.grammar-view { color: var(--ink); min-height: 62vh; }
.grammar-shell { max-width: 980px; margin: 0 auto; padding: 24px 20px 56px; }
.grammar-head, .grammar-session-head, .grammar-section-title, .grammar-question-footer, .grammar-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.grammar-head { margin-bottom: 26px; }
.grammar-head h2, .grammar-score h2 { font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 2.7rem); line-height: 1.08; margin: 4px 0 10px; }
.grammar-kicker, .grammar-mode { color: var(--rose-deep); font-size: .74rem; font-weight: 800; letter-spacing: .13em; margin: 0; text-transform: uppercase; }
.grammar-goal { align-items: center; background: var(--rose-soft); border: 1px solid var(--rose); border-radius: 50%; display: flex; flex: 0 0 102px; height: 102px; justify-content: center; flex-direction: column; transform: rotate(3deg); }
.grammar-goal strong { font-family: var(--serif); font-size: 2.2rem; line-height: 1; }
.grammar-goal span { color: var(--rose-deep); font-size: .68rem; font-weight: 800; letter-spacing: .08em; margin-top: 4px; text-transform: uppercase; }
.grammar-personal { background: linear-gradient(135deg, var(--rose-ghost), var(--lilac-soft)); border-color: var(--rose-soft); margin-bottom: 30px; padding: 22px; }
.grammar-section-title { margin-bottom: 14px; }
.grammar-section-title h3 { font-family: var(--serif); font-size: 1.35rem; margin: 0; }
.grammar-spark { background: var(--card); border: 1px solid var(--rose-soft); border-radius: 999px; color: var(--rose-deep); font-size: .73rem; font-weight: 750; padding: 7px 11px; }
.grammar-personal-row { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grammar-topic-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grammar-topic { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); color: var(--ink); cursor: pointer; display: grid; gap: 8px; min-height: 132px; padding: 17px; text-align: left; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.grammar-topic:hover, .grammar-topic:focus-visible { border-color: var(--rose); box-shadow: 0 8px 24px color-mix(in srgb, var(--rose) 17%, transparent); outline: none; transform: translateY(-2px); }
.grammar-topic.compact { background: color-mix(in srgb, var(--card) 88%, transparent); box-shadow: none; min-height: 112px; padding: 14px; }
.grammar-topic-name { font-family: var(--serif); font-size: 1.05rem; font-weight: 700; line-height: 1.15; }
.grammar-accuracy { color: var(--rose-deep); font-size: .74rem; font-weight: 800; justify-self: end; }
.grammar-bar { background: var(--rose-soft); border-radius: 999px; display: block; height: 6px; overflow: hidden; width: 100%; }
.grammar-bar i { background: var(--rose-deep); border-radius: inherit; display: block; height: 100%; min-width: 3px; }
.grammar-centre { display: grid; min-height: 56vh; place-items: center; }
.grammar-message { max-width: 480px; padding: 36px; text-align: center; width: 100%; }
.grammar-message .btn { margin-top: 14px; }
.grammar-loader { animation: grammar-pulse 1s ease-in-out infinite alternate; background: var(--rose); border-radius: 50%; display: inline-block; height: 13px; margin-top: 18px; width: 13px; }
@keyframes grammar-pulse { to { box-shadow: 0 0 0 12px var(--rose-soft); transform: scale(.8); } }
.grammar-session { max-width: 780px; }
.grammar-session-head { margin-bottom: 16px; }
.grammar-session-head > div { text-align: right; }
.grammar-text-button { background: none; border: 0; color: var(--rose-deep); cursor: pointer; font: inherit; font-size: .83rem; font-weight: 800; padding: 7px 2px; }
.grammar-text-button:hover { text-decoration: underline; }
.grammar-dots { display: grid; gap: 6px; grid-template-columns: repeat(var(--question-count, 10), 1fr); margin: 0 0 18px; }
.grammar-dots i { background: var(--line); border-radius: 999px; height: 6px; transition: background .2s ease; }
.grammar-dots i.done { background: var(--sage); }
.grammar-dots i.current { background: var(--rose-deep); }
.grammar-question { padding: clamp(22px, 5vw, 42px); }
.grammar-mode { margin-bottom: 18px; }
.grammar-question .mcq-q { font-family: var(--serif); font-size: clamp(1.25rem, 3vw, 1.75rem); line-height: 1.45; white-space: pre-line; }
.grammar-question .mcq-n { display: none; }
.grammar-question .mcq-why { background: var(--gold-soft); border-radius: var(--r-sm); color: var(--ink); line-height: 1.5; margin-top: 14px; padding: 13px 15px; }
.grammar-analysis .mcq-opts button span { text-decoration: underline; text-decoration-color: var(--rose); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.grammar-underlined-part { display: inline; white-space: nowrap; }
.grammar-underlined-part small { color: var(--rose-deep); font-family: sans-serif; font-size: .58em; font-weight: 900; margin-right: 3px; vertical-align: super; }
.grammar-underlined-part u { text-decoration-color: var(--rose); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.grammar-question-footer { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 20px; }
.grammar-question-footer .is-right { color: var(--sage); font-weight: 800; }
.grammar-question-footer .is-wrong { color: var(--rose-deep); font-weight: 800; }
.grammar-results { max-width: 760px; }
.grammar-score { padding: clamp(24px, 6vw, 48px); text-align: center; }
.grammar-score-ring { background: conic-gradient(var(--sage) var(--score), var(--sage-soft) 0); border-radius: 50%; display: grid; height: 142px; margin: 15px auto 20px; place-items: center; width: 142px; }
.grammar-score-ring > div { align-items: center; background: var(--card); border-radius: 50%; display: flex; flex-direction: column; height: 112px; justify-content: center; width: 112px; }
.grammar-score-ring strong { font-family: var(--serif); font-size: 2rem; }
.grammar-score-ring span { color: var(--muted); font-size: .78rem; }
.grammar-perfect { background: var(--sage-soft); border-radius: var(--r-md); margin: 24px 0; padding: 18px; }
.grammar-review { margin: 28px 0; text-align: left; }
.grammar-review h3 { font-family: var(--serif); margin-bottom: 10px; }
.grammar-review article { align-items: flex-start; border-top: 1px solid var(--line); display: grid; gap: 12px; grid-template-columns: 28px 1fr; padding: 14px 0; }
.grammar-review article > span { align-items: center; background: var(--rose-soft); border-radius: 50%; color: var(--rose-deep); display: flex; font-size: .72rem; font-weight: 800; height: 26px; justify-content: center; }
.grammar-review p { line-height: 1.4; margin: 1px 0 6px; }
.grammar-review small { color: var(--muted); }
.grammar-actions { flex-wrap: wrap; justify-content: center; }
.grammar-secondary { background: var(--card); border: 1px solid var(--rose); color: var(--rose-deep); }

@media (max-width: 700px) {
  .grammar-shell { padding: 16px 14px 38px; }
  .grammar-head { align-items: flex-start; }
  .grammar-goal { flex-basis: 76px; height: 76px; }
  .grammar-goal strong { font-size: 1.65rem; }
  .grammar-goal span { font-size: .56rem; }
  .grammar-personal { padding: 16px; }
  .grammar-personal-row { display: flex; margin: 0 -4px; overflow-x: auto; padding: 2px 4px 9px; scroll-snap-type: x mandatory; }
  .grammar-personal-row .grammar-topic { flex: 0 0 72%; scroll-snap-align: start; }
  .grammar-topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grammar-topic { min-height: 124px; padding: 14px; }
  .grammar-section-title { align-items: flex-end; }
  .grammar-question { padding: 22px 17px; }
  .grammar-question-footer { align-items: stretch; flex-direction: column; }
  .grammar-question-footer .btn { width: 100%; }
  .grammar-actions { align-items: stretch; flex-direction: column; }
  .grammar-actions .btn { width: 100%; }
}

@media (max-width: 390px) {
  .grammar-topic-grid { grid-template-columns: 1fr; }
  .grammar-head h2 { font-size: 1.75rem; }
}