.grammar-view { max-width: none; }

.grammar-learning-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding: 22px 24px;
  border: 1px solid rgba(35, 64, 76, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 28px rgba(36, 65, 67, 0.08);
}

.grammar-learning-actions > div { display: flex; flex-direction: column; gap: 5px; }
.grammar-learning-actions strong { color: #19324c; font-size: 18px; }
.grammar-learning-actions span { color: #607487; }
.grammar-learning-actions button,
.grammar-result button {
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid #1d8c73;
  border-radius: 8px;
  background: #f7fffc;
  color: #116954;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.grammar-learning-actions #grammarStartButton { background: #147a63; color: #fff; }

.grammar-empty {
  margin-top: 24px;
  padding: 32px;
  border: 1px solid rgba(35, 64, 76, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  text-align: center;
}
.grammar-empty strong { display: block; margin-bottom: 8px; font-size: 20px; }
.grammar-empty p { color: #607487; }

body[data-current-view="grammarRun"] .app-shell {
  display: block;
  min-height: calc(100vh - var(--app-header-height, 76px));
}
body[data-current-view="grammarRun"] .main-sidebar { display: none; }
body[data-current-view="grammarRun"] .app-content { width: 100%; max-width: none; padding: 0; }
body[data-current-view="grammarRun"] .grammar-run-view { min-height: calc(100vh - var(--app-header-height, 76px)); padding: 0; }
body[data-current-view="grammarRun"] .grammar-run-view .special-training-card { width: 100%; max-width: none; min-height: calc(100vh - var(--app-header-height, 76px)); border-radius: 0; }
body[data-current-view="grammarRun"] .grammar-question { min-height: 0; }
body[data-current-view="grammarRun"] .test-toolbar {
  grid-template-columns: auto minmax(180px, 1fr) max-content !important;
  column-gap: clamp(8px, 1.4vw, 18px);
}
body[data-current-view="grammarRun"] .test-toolbar__status {
  display: grid;
  grid-template-columns: repeat(4, max-content) !important;
  justify-content: end;
  align-items: center;
  gap: 8px clamp(8px, 1.2vw, 18px);
  min-width: 0;
  font-size: clamp(12px, 1.35vw, 18px);
  letter-spacing: 0;
  white-space: nowrap;
}
body[data-current-view="grammarRun"] .test-toolbar__status .test-toolbar__progress {
  grid-column: 1 / -1;
}

@media (max-width: 1180px) {
  body[data-current-view="grammarRun"] .test-toolbar {
    grid-template-columns: auto minmax(0, 1fr) !important;
    row-gap: 10px;
  }
  body[data-current-view="grammarRun"] .test-toolbar__status {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    justify-content: stretch;
    width: 100%;
    gap: 7px;
    font-size: clamp(12px, 2vw, 16px);
    text-align: center;
  }
}

@media (max-width: 520px) {
  body[data-current-view="grammarRun"] .test-toolbar__status {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    white-space: normal;
  }
}

.grammar-question .grammar-prompt { font-size: clamp(26px, 3vw, 44px); }
.grammar-answer-slots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0 6px; }
.grammar-token { position: relative; min-width: 42px; min-height: 48px; padding: 6px 10px; border-bottom: 3px solid #91a0af; color: #245cb9; font-size: 28px; cursor: text; }
.grammar-token-placeholder { visibility: hidden; font: inherit; }
.grammar-token b { position: absolute; inset: 6px 10px auto; white-space: nowrap; font: inherit; }
.grammar-char { display: inline-block; min-width: .18em; }
.grammar-caret { display: inline-block; width: 2px; height: 1em; margin: 0 1px -2px 0; background: currentColor; animation: grammar-caret-blink 1s steps(1, end) infinite; }
@keyframes grammar-caret-blink { 50% { opacity: 0; } }
.grammar-token.active { border-color: #245cb9; }
.grammar-token.correct { border-color: #168464; color: #168464; }
.grammar-token.incorrect { border-color: #c33a31; color: #c33a31; }
.grammar-token.revealed { border-color: #245cb9; color: #245cb9; }
.grammar-answer-slots.is-wrong .grammar-token { border-color: #c33a31; color: #c33a31; }
.grammar-hidden-input { position: fixed; width: 1px; height: 1px; left: -10px; bottom: -10px; opacity: 0; pointer-events: none; }
.grammar-question .grammar-keyboard { width: min(880px, 96%); }
.grammar-keyboard.uppercase [data-grammar-key] { text-transform: uppercase; }
.grammar-study-toolbar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  width: min(900px, 96%);
  margin-top: 8px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(24, 65, 57, 0.08);
}
.grammar-study-toolbar button {
  min-height: 42px;
  border: 1px solid #d8e1dc;
  border-radius: 7px;
  background: #edf7f3;
  color: var(--green, #23856d);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.grammar-study-toolbar button small { display: block; margin-top: 3px; color: #7b8c98; font-size: 10px; font-weight: 600; }
.grammar-study-toolbar .grammar-submit-main small { color: rgba(255,255,255,.78); }
.grammar-study-toolbar .grammar-submit-main { background: var(--green, #23856d); color: #fff; border-color: var(--green, #23856d); }
.grammar-study-toolbar button:hover { border-color: var(--green, #23856d); background: #e4f2ec; }
.grammar-study-toolbar .grammar-submit-main:hover { background: #176f5b; color: #fff; }
.grammar-answer-popup { position: absolute; inset: 0 0 auto; z-index: 5; padding: 18px 24px; border-bottom: 1px solid #d9e1dd; background: rgba(255,255,255,.98); box-shadow: 0 10px 24px rgba(28,54,65,.12); }
.grammar-answer-popup[hidden] { display: none; }
.grammar-answer-groups { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.grammar-answer-groups article { min-width: 120px; padding: 8px 14px; text-align: center; border-bottom: 3px solid #2f65c8; }
.grammar-answer-groups article span, .grammar-answer-groups article small { display: block; color: #667988; }
.grammar-answer-groups article strong { display: block; margin: 4px 0; font-size: 20px; }
.grammar-answer-popup > p { margin: 12px 0 0; text-align: center; color: #556979; }
#grammarFeedback { pointer-events: none; }
.grammar-question.is-explanation { align-self: stretch; width: 100%; max-width: none; color: #172535; }
.grammar-explanation { width: 100%; min-height: 430px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; outline: none; }
.grammar-explanation-groups { display: flex; flex-wrap: wrap; align-items: start; justify-content: center; gap: 40px; }
.grammar-explanation-group { display: grid; justify-items: center; width: max-content; max-width: 94vw; padding: 0; background: transparent; color: #172535; text-align: center; }
.grammar-teaching-tokens { display: flex; justify-content: center; align-items: end; gap: 14px; margin: 0; }
.grammar-teaching-token { display: grid; grid-template-rows: 26px 32px auto; justify-items: center; align-items: end; gap: 2px; min-width: 70px; }
.grammar-teaching-token small { color: #6f7c88; font-size: 20px; font-style: italic; line-height: 1; }
.grammar-teaching-token strong { grid-row: 3; color: #172535; font-size: 48px; line-height: 1; }
.grammar-teaching-token span { grid-row: 2; padding: 3px 10px; border-radius: 7px; background: #9900a7; color: #fff; font-size: 19px; line-height: 1.2; }
.grammar-teaching-token:nth-child(3n+2) span { background: #966900; }
.grammar-teaching-token:nth-child(3n) span { background: #176b95; }
.grammar-role-card { display: block; box-sizing: border-box; width: 100%; margin-top: 10px; padding: 18px 16px; border-radius: 0 0 14px 14px; background: #60005f; color: #fff; font-size: 27px; line-height: 1; }
.grammar-explanation-group > p { margin: 38px 0 0; color: #34495d; font-size: 28px; }
.grammar-explanation-toolbar { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; }
.grammar-explanation-toolbar .grammar-pronunciation-round {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  justify-self: center;
  padding: 0;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
}
.grammar-kaoshen-teaching { width: min(94vw, 760px); display: grid; grid-template-columns: 1fr; gap: 12px; }
.grammar-teaching-item { display: grid; grid-template-columns: 92px 1fr; align-items: start; gap: 12px; padding: 14px 16px; border-radius: 12px; background: #fdf2ff; border: 1px solid #e7c6ea; text-align: left; }
.grammar-teaching-item > span { font-size: 20px; font-weight: 700; color: #60005f; line-height: 1.4; }
.grammar-teaching-item > p { margin: 0; color: #172535; font-size: 22px; line-height: 1.5; }
.grammar-teaching-item.grammar-oral-formula { background: #fff7e8; border-color: #f0d9a8; }
.grammar-teaching-item.grammar-oral-formula > span { color: #966900; }
@media (max-width: 640px) {
  .grammar-teaching-item { grid-template-columns: 1fr; gap: 6px; }
  .grammar-teaching-item > p { font-size: 19px; }
}
.grammar-result { min-height: calc(100vh - var(--app-header-height, 76px)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.grammar-result[hidden] { display: none; }
.grammar-result > strong { font-size: 70px; color: #147a63; }

@media (max-width: 760px) {
  .grammar-learning-actions { grid-template-columns: 1fr; }
  .grammar-learning-actions button { width: 100%; }
  .grammar-study-toolbar { gap: 5px; padding: 6px; }
  .grammar-study-toolbar button { min-width: 0; padding-inline: 3px; font-size: 12px; }
}

@media (orientation: landscape) and (max-height: 620px) {
  body[data-current-view="grammarRun"] {
    overflow: hidden;
  }

  body[data-current-view="grammarRun"] .workbench-header {
    display: none !important;
  }

  body[data-current-view="grammarRun"] .app-shell,
  body[data-current-view="grammarRun"] .grammar-run-view {
    width: 100%;
    height: 100dvh;
    min-height: 0;
  }

  body[data-current-view="grammarRun"] .grammar-run-view {
    padding: 4px 6px !important;
  }

  body[data-current-view="grammarRun"] .grammar-run-view .special-training-card {
    height: 100%;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    padding: 8px 10px !important;
    overflow: hidden;
  }

  body[data-current-view="grammarRun"] .test-toolbar {
    min-height: 52px;
    padding: 0 4px 6px;
  }

  body[data-current-view="grammarRun"] .test-toolbar__identity h1 {
    font-size: 16px;
  }

  body[data-current-view="grammarRun"] .grammar-question {
    min-height: 0;
    align-content: start;
    gap: 6px;
    padding: 6px 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  body[data-current-view="grammarRun"] .grammar-study-toolbar {
    position: sticky;
    bottom: 0;
    z-index: 4;
    flex: 0 0 auto;
    margin-bottom: 2px;
    background: rgba(238, 246, 242, 0.98);
  }
}