/* A quiet study room. Shared controls and the reading workbench live here;
   route-specific layouts live in modules.css. */
:root {
  color-scheme: light;
  --bg: #f4f3ee;
  --surface: #fffefa;
  --surface-soft: #efeee7;
  --ink: #292f2a;
  --muted: #737970;
  --accent: #315d4c;
  --accent-hover: #244e3e;
  --accent-soft: #e5ede5;
  --border: #e0e2d8;
  --danger: #a3483f;
  --danger-soft: #faebe7;
  --warning: #966c25;
  --radius: 16px;
  --shadow: 0 16px 44px #2e3b2e12;
  --sidebar-width: 220px;
  --reader-font-size: 20px;
  --reader-size: 20px;
  --reader-line-height: 1.9;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  --font-reading: Georgia, "Times New Roman", "Noto Serif", "Songti SC", serif;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--bg); }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
button { border: 0; color: inherit; }
button:disabled { cursor: not-allowed; opacity: .45; }
a { color: var(--accent); text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
button, input, select, textarea { outline: none; }
:focus-visible { outline: 3px solid #92b2a0; outline-offset: 3px; }
button:focus-visible { outline-offset: 3px; }
button:disabled:hover { transform: none; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--ink); line-height: 1.35; }
h1 { font-size: clamp(25px, 2.2vw, 34px); letter-spacing: -.8px; font-weight: 650; }
h2 { font-size: 22px; letter-spacing: -.4px; font-weight: 650; }
h3 { font-size: 17px; font-weight: 650; }
img { max-width: 100%; }
svg.icon { display: inline-block; flex-shrink: 0; vertical-align: middle; }
[hidden] { display: none !important; }
::selection { color: #173b2c; background: #cadfbd; }
input::placeholder, textarea::placeholder { color: #93978d; opacity: 1; }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--accent); }
input[type="range"] { min-height: 28px; cursor: pointer; }
textarea { resize: vertical; }
.muted { color: var(--muted); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 8px; left: 16px; z-index: 1000;
  padding: 10px 18px; border-radius: 8px; background: var(--accent); color: white;
  transform: translateY(-150%); transition: transform .16s ease;
}
.skip-link:focus { transform: translateY(0); }

/* Shell */
.app-shell { min-height: 100dvh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--sidebar-width);
  display: flex; flex-direction: column; padding: 31px 18px 22px;
  background: #eaece3; border-right: 1px solid #dde1d5;
}
.logo {
  display: flex; align-items: center; gap: 11px; color: var(--ink);
  margin: 0 10px 43px; text-decoration: none; font-size: 19px;
  font-weight: 680; letter-spacing: -.6px;
}
.logo-mark {
  display: grid; place-items: center; width: 38px; height: 38px;
  background: var(--accent); color: #fffef7; border-radius: 12px 12px 12px 3px;
}
.logo small { display: block; color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: 2px; }
.sidebar nav, .primary-nav { display: grid; gap: 5px; overflow: auto; min-height: 0; padding: 3px; margin: -3px; }
.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); margin: 0 10px 30px; font-size: 19px; font-weight: 650; letter-spacing: -.5px; text-decoration: none; }
.brand > .icon { width: 37px; height: 37px; color: var(--accent); padding: 7px; border-radius: 11px 11px 11px 3px; background: #dbe5d1; }
.brand small { display: block; font-weight: 400; font-size: 10px; color: #89927f; letter-spacing: .5px; margin-top: 2px; }
.nav-item {
  position: relative; width: 100%; min-height: 44px; padding: 10px 16px;
  display: flex; align-items: center; gap: 13px; border-radius: 11px;
  background: transparent; color: #666f61; text-decoration: none; text-align: left;
  transition: background .18s ease, color .18s ease;
}
.nav-item:hover { color: var(--accent); background: #ffffff71; text-decoration: none; }
.nav-item.active, .nav-item[aria-current="page"] { color: var(--accent); background: #fffef9; font-weight: 650; }
.nav-item.active::after, .nav-item[aria-current="page"]::after {
  content: ""; position: absolute; right: 14px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--accent);
}
.sidebar-bottom { margin-top: auto; padding-top: 28px; }
.sidebar-note { padding: 0 14px 19px; color: #899080; font-size: 12px; line-height: 1.8; }
.userbadge {
  display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 16px 10px 0;
  border-top: 1px solid #d8ddd0; color: #55614e; font-size: 13px;
}
.userbadge > .icon { width: 33px; height: 33px; padding: 8px; background: #dce3d2; border-radius: 50%; }
.userbadge span { min-width: 0; }
.userbadge small { display: block; }
.avatar {
  display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px;
  border-radius: 50%; background: #d4ddcd; color: var(--accent); font-weight: 650;
}
.userbadge strong { display: block; font-size: 13px; font-weight: 600; }
.userbadge small { color: var(--muted); font-size: 11px; }
.main-shell { min-height: 100dvh; margin-left: var(--sidebar-width); }
.topbar {
  position: sticky; top: 0; z-index: 30; height: 78px; display: flex;
  align-items: center; justify-content: space-between; gap: 18px; padding: 0 42px;
  border-bottom: 1px solid var(--border); background: #f4f3eef5;
  backdrop-filter: blur(12px);
}
.topbar h1, .topbar h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: 0; }
.topbar #nav-toggle { display: none; }
.topbar > div:not(.toolbar-actions) { margin-right: auto; display: flex; align-items: center; gap: 18px; }
.topbar > div:not(.toolbar-actions) > .muted { font-size: 10px; letter-spacing: 1.2px; }
.topbar strong { font-size: 14px; font-weight: 550; }
.topbar-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.topbar-title span, .breadcrumb { color: var(--muted); font-size: 13px; }
.topbar-actions { display: flex; align-items: center; gap: 14px; }
.topbar .date { color: var(--muted); font-size: 12px; }
.page { max-width: 1320px; padding: 39px 42px 64px; margin: 0 auto; }
.page > .page { max-width: none; padding: 0; }
.page-heading { display: block; margin-bottom: 30px; }
.page-heading:has(> div) { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.page-heading h1 { margin-bottom: 8px; }
.page-heading p { margin-bottom: 0; color: var(--muted); }
.eyebrow { margin-bottom: 10px; font-size: 11px; letter-spacing: 2px; font-weight: 650; color: var(--muted); text-transform: uppercase; }
.page-heading > .eyebrow { display: block; }
.filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; margin-bottom: 25px; }
.filterbar input, .filterbar select { padding: 11px 13px; min-height: 45px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--ink); }
.filterbar input { flex: 1; min-width: 200px; }
.resource-list { display: grid; border: 1px solid var(--border); background: var(--surface); border-radius: 15px; overflow: hidden; }
.resource-row { display: flex; align-items: center; gap: 17px; width: 100%; padding: 22px 25px; background: transparent; text-align: left; border-bottom: 1px solid var(--border); transition: background .15s ease; }
.resource-row:last-child { border-bottom: 0; }
.resource-row:hover { background: #f0f4e9; }
.resource-row > span:first-child { color: #78916a; width: 41px; height: 41px; border-radius: 11px; background: #edf1e5; display: grid; place-items: center; flex-shrink: 0; }
.resource-row > span:nth-child(2) { flex: 1; min-width: 0; }
.resource-row strong { display: block; color: #526247; font-size: 14px; font-weight: 550; margin-bottom: 4px; }
.resource-row small { color: #929b86; font-size: 11px; }
.resource-row > .icon { color: #8d9e7b; }

/* Controls */
.primary, .secondary, .text-button, .danger-button, .icon-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; padding: 11px 20px; border-radius: 10px; font-size: 14px;
  font-weight: 550; line-height: 1.5; text-decoration: none;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.primary { background: var(--accent); color: #fff; border: 1px solid var(--accent); }
.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); box-shadow: 0 4px 14px #315d4c20; }
.secondary { background: var(--surface); border: 1px solid var(--border); color: #505b4a; }
.secondary:hover:not(:disabled) { background: var(--accent-soft); border-color: #bdccba; }
.text-button { padding-inline: 10px; background: transparent; color: var(--accent); }
.text-button:hover:not(:disabled) { background: var(--accent-soft); }
.danger-button { background: var(--danger-soft); color: var(--danger); border: 1px solid #ecd0c9; }
.icon-button { flex-shrink: 0; width: 44px; padding: 10px; background: transparent; border: 1px solid transparent; color: #68725f; }
.icon-button:hover:not(:disabled), .icon-button.active, .icon-button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.primary:active:not(:disabled), .secondary:active:not(:disabled), .icon-button:active:not(:disabled) { transform: translateY(1px); }
.small { min-height: 36px; padding: 7px 13px; font-size: 12px; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; color: #56604f; font-size: 13px; font-weight: 550; }
.field input, .field select, .field textarea, input.field, select.field, textarea.field {
  width: 100%; min-height: 46px; padding: 11px 13px; border: 1px solid #d9ded1;
  border-radius: 9px; background: var(--surface); color: var(--ink); font-weight: 400;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field input:focus, .field select:focus, .field textarea:focus, input.field:focus, select.field:focus, textarea.field:focus {
  border-color: #72927a; box-shadow: 0 0 0 3px #315d4c0c;
}
.field textarea { min-height: 140px; line-height: 1.85; }
.field small { font-size: 12px; font-weight: 400; color: var(--muted); }
.input-with-icon { display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--muted); }
.input-with-icon input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: transparent; color: var(--ink); }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 6px; background: #eeefe7; color: #747c68; font-size: 11px; font-weight: 500; white-space: nowrap; }
.tag.green { color: var(--accent); background: var(--accent-soft); }
.tag.warning { color: var(--warning); background: #f3ecd7; }
.mode-tabs { display: inline-flex; flex-wrap: wrap; align-items: center; padding: 4px; gap: 3px; background: #eaece3; border-radius: 10px; }
.mode-tabs button { min-height: 36px; padding: 7px 16px; background: transparent; border-radius: 7px; color: #737b6c; font-size: 13px; }
.mode-tabs button.active, .mode-tabs button[aria-selected="true"] { background: var(--surface); color: var(--accent); box-shadow: 0 1px 4px #283d2110; font-weight: 600; }
.toolbar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.empty-state { padding: 68px 24px; text-align: center; color: var(--muted); }
.empty-state > .icon { margin-bottom: 18px; opacity: .6; width: 36px; height: 36px; }
.empty-state h2, .empty-state h3 { margin-bottom: 8px; }
.empty-state p { max-width: 430px; margin: 0 auto 22px; font-size: 14px; }
.error-message { padding: 12px 16px; background: var(--danger-soft); color: var(--danger); border-radius: 9px; font-size: 13px; }
.loading { display: flex; align-items: center; justify-content: center; gap: 11px; padding: 55px 16px; color: var(--muted); font-size: 14px; }
.spinner { width: 19px; height: 19px; border: 2px solid #dbe0d3; border-top-color: var(--accent); border-radius: 50%; animation: spin .85s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.progressbar { height: 5px; overflow: hidden; border-radius: 9px; background: #e2e7dc; }
.progressbar > span, .progressbar > div { display: block; height: 100%; border-radius: inherit; background: #779b72; transition: width .25s ease; }

/* Login is the real entry to the private library. */
.login-screen { min-height: 100dvh; display: grid; grid-template-columns: minmax(340px, 1.05fr) minmax(400px, 1fr); background: var(--surface); }
.login-intro, .login-story { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 6vw, 100px); background: #e9eddf; }
.login-intro::after, .login-story::after {
  content: ""; pointer-events: none; position: absolute; width: 530px; height: 530px;
  right: -190px; bottom: -260px; border: 1px solid #c9d2bd; border-radius: 50%;
  box-shadow: 0 0 0 58px #e9eddf, 0 0 0 59px #d4dcc9, 0 0 0 116px #e9eddf, 0 0 0 117px #dce2d3;
}
.login-intro .logo, .login-story .logo { position: absolute; top: 37px; left: clamp(30px, 6vw, 100px); margin: 0; }
.login-story .brand { position: absolute; top: 37px; left: clamp(30px, 6vw, 100px); margin: 0; }
.login-intro h1, .login-story h1 { max-width: 430px; margin: 0 0 24px; font-size: clamp(36px, 4vw, 60px); line-height: 1.3; letter-spacing: -1.6px; font-weight: 500; }
.login-intro p, .login-story p { max-width: 375px; margin-bottom: 35px; color: #78816e; font-size: 15px; line-height: 2; }
.login-kicker { color: #7f8b72; font-size: 11px; letter-spacing: 3px; margin-bottom: 25px; }
.login-features { display: flex; gap: 19px; flex-wrap: wrap; color: #566b4d; font-size: 12px; }
.login-features span { display: flex; align-items: center; gap: 7px; }
.login-side { display: flex; align-items: center; justify-content: center; padding: 55px 44px; }
.login-panel { width: min(100%, 360px); margin: auto; padding: 48px 0; }
.login-screen > .login-panel { width: min(360px, calc(100% - 56px)); }
.login-panel h2 { margin-bottom: 9px; font-size: 26px; font-weight: 600; }
.login-panel > p { margin-bottom: 31px; color: var(--muted); font-size: 13px; }
.login-panel .primary { width: 100%; margin-top: 7px; }
.login-panel .login-footnote { margin: 23px 0 0; font-size: 11px; text-align: center; color: #8b9184; }
.login-panel .error-message { margin-bottom: 19px; }
#login-error { color: var(--danger); font-size: 13px; }
#login-error:empty { display: none; }

/* The desktop exam workbench gives each side its own scrolling surface. */
.page:has(> .workbench) { max-width: none; padding: 0; }
.page.practice-page { max-width: none; padding: 0; }
.workbench {
  --reader-background: #faf8f0; --reader-color: #33382f; --reader-muted: #929584;
  display: flex; flex-direction: column; min-height: 560px; height: calc(100dvh - 78px);
  background: var(--surface); overflow: hidden;
}
.practice-topbar { flex-shrink: 0; min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 28px; border-bottom: 1px solid var(--border); background: var(--surface); }
.practice-heading { display: flex; align-items: center; min-width: 0; gap: 13px; }
.practice-heading h1, .practice-heading h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.2px; }
.practice-heading small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.practice-topbar .toolbar-actions { flex-shrink: 0; }
.practice-topbar > div:first-child { min-width: 0; }
.practice-topbar h1 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.practice-topbar .eyebrow { display: block; margin: 0 0 5px; font-size: 9px; letter-spacing: 1.5px; }
.practice-topbar .secondary { min-height: 38px; padding: 8px 12px; font-size: 12px; }
.mode-field select { max-width: 106px; min-height: 38px; padding: 8px; background: var(--surface); color: var(--accent); border: 1px solid var(--border); border-radius: 8px; font-size: 12px; }
.practice-topbar .tag { background: #f0f1e9; }
.practice-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(320px, var(--split, 55%)) 9px minmax(300px, 1fr); overflow: hidden; }
.article-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--reader-background); color: var(--reader-color); }
.question-pane { min-width: 0; min-height: 0; overflow: auto; padding: 28px 30px 38px; overscroll-behavior: contain; scrollbar-gutter: stable; scroll-behavior: smooth; }
.resize-handle { width: 9px; background: #eeeee5; cursor: col-resize; border-left: 1px solid #e1e2d8; border-right: 1px solid #e1e2d8; position: relative; touch-action: none; }
.resize-handle::after { content: ""; position: absolute; top: 45%; left: 3px; width: 1px; height: 30px; border-left: 1px solid #bbc5af; border-right: 1px solid #bbc5af; }
.resize-handle:hover, .resize-handle:focus-visible, .resize-handle.dragging { background: #d5dfc9; }
.reading-toolbar {
  position: sticky; top: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; min-height: 56px; flex-shrink: 0; padding: 9px 24px; border-bottom: 1px solid #e2e2d761;
  background: color-mix(in srgb, var(--reader-background) 94%, transparent); backdrop-filter: blur(10px);
}
.reading-toolbar > span, .reading-toolbar > small { color: var(--reader-muted); font-size: 11px; letter-spacing: .5px; }
.reading-toolbar .icon-button { min-height: 34px; width: 34px; padding: 7px; color: var(--reader-muted); }
.reading-toolbar [data-size] { width: 37px; padding: 5px; white-space: nowrap; font-size: 13px; line-height: 1; }
.reading-toolbar .toolbar-actions { gap: 3px; }
.reading-toolbar .secondary { min-height: 34px; padding: 6px 9px; border-color: transparent; background: transparent; color: var(--reader-muted); font-size: 12px; }
.reading-toolbar .secondary:hover { background: #a5bc8b20; }
.reading-toolbar select { min-height: 34px; max-width: 73px; padding: 5px; border: 0; border-radius: 6px; color: var(--reader-muted); background: transparent; font-size: 12px; }
.reader-content { flex: 1; min-height: 0; width: 100%; max-width: 850px; margin: 0 auto; padding: 35px 42px 65px; font-size: var(--reader-size, var(--reader-font-size)); line-height: var(--reader-line-height); overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scroll-behavior: smooth; }
.reader-content h2 { margin-bottom: 27px; font-family: var(--font-reading); font-size: 27px; font-weight: 500; line-height: 1.5; color: inherit; letter-spacing: 0; }
.reader-content h3 { color: inherit; font-family: var(--font-reading); font-size: 21px; margin: 1.7em 0 .7em; }
.reader-content p, .paragraph { position: relative; margin: 0 0 1.25em; font-family: var(--font-reading); font-size: inherit; line-height: inherit; overflow-wrap: anywhere; }
.paragraph > .paragraph-text { margin-bottom: 0; white-space: pre-wrap; }
.paragraph[data-label]::before { content: attr(data-label); display: block; font-family: var(--font-sans); font-size: 11px; color: var(--reader-muted); margin-bottom: 6px; }
.paragraph-label { position: absolute; left: -24px; top: 7px; color: var(--reader-muted); font-family: var(--font-sans); font-size: 10px; line-height: 1.6; user-select: none; }
.reader-content mark, .paragraph mark, .reader-highlight { color: inherit; padding: 1px 0; border-radius: 2px; background: #e9dda4; }
.reader-content u, .paragraph u, .reader-underline { text-decoration-line: underline; text-decoration-color: #849b6e; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.word-active, .lookup-active { color: #315d4c; background: #dce9c9; border-radius: 3px; box-shadow: 0 0 0 3px #dce9c9; }
.word-tap { animation: word-response .3s ease-out; }
.word-focus { border: 1px solid #76965f; outline: 3px solid #bdd7a354; outline-offset: 2px; background: #c0dba22b; border-radius: 3px; animation: popup-in .16s ease-out; }
@keyframes word-response { from { background: #b3cda0; } to { background: #dce9c9; } }
.reading-paper { --reader-background: #faf8f0; --reader-color: #33382f; --reader-muted: #929584; }
.reading-white { --reader-background: #fff; --reader-color: #303730; --reader-muted: #969f91; }
.reading-night { --reader-background: #252c27; --reader-color: #d3d9ce; --reader-muted: #8d9a87; }
.reading-night .reading-toolbar { border-color: #ffffff0d; }
.reading-night .reader-content mark, .reading-night .reader-highlight { background: #746638; color: #f7efd7; }
.reading-night .reader-underline { text-decoration-color: #a4bd8a; }
.reading-night .word-active, .reading-night .lookup-active { color: #e4efd8; background: #465d3e; box-shadow: 0 0 0 3px #465d3e; }
.reading-fullscreen, .workbench:fullscreen { position: fixed; inset: 0; z-index: 70; height: 100dvh; background: var(--surface); }
.reading-fullscreen .practice-body { grid-template-columns: 1fr; }
.reading-fullscreen .question-pane, .reading-fullscreen .resize-handle { display: none; }
.reading-fullscreen .reader-content { max-width: 930px; padding-inline: 60px; }
.article-pane:fullscreen, .article-pane.reader-expanded { position: fixed; inset: 0; z-index: 80; display: flex; width: 100%; height: 100dvh; background: var(--reader-background); }
.article-pane:fullscreen .reader-content, .article-pane.reader-expanded .reader-content { max-width: 980px; padding-inline: 65px; }
.paper-view { flex: 1; min-height: 0; }
.hide-page-navigation > button:not([data-download]), .hide-page-navigation > span { display: none; }
.hide-page-navigation { justify-content: flex-end; }
.mobile-practice-tabs { display: none; }
.mobile-pane-tabs { display: none; }

/* A single question is deliberately given room, with visible selected states. */
.question-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 25px; }
.question-number { color: var(--accent); font-size: 13px; font-weight: 600; }
.question-count { color: var(--muted); font-size: 12px; }
.question-stem { margin: 0 0 25px; font-family: var(--font-reading); font-size: 19px; line-height: 1.8; color: #394132; white-space: pre-wrap; }
.question-pane h2 { margin-bottom: 18px; font-size: 15px; font-weight: 550; }
.question-pane h2 small { font-size: 11px; font-weight: 400; }
.question-type { margin-bottom: 12px; font-size: 11px; color: #8e9685; letter-spacing: .5px; }
.answer-options { display: grid; gap: 12px; }
.answer-list { display: grid; gap: 12px; }
.answer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.answer-grid .answer-option { position: relative; padding: 10px; gap: 7px; min-height: 51px; font-size: 15px; align-items: center; justify-content: center; flex-wrap: wrap; }
.answer-grid .answer-label { width: 23px; min-height: 23px; border-radius: 6px; font-size: 11px; }
.answer-grid .answer-text { flex: auto; }
.answer-grid .answer-option > .icon { position: absolute; top: 5px; right: 5px; width: 10px; height: 10px; }
.answer-option {
  width: 100%; min-height: 65px; display: flex; align-items: flex-start; gap: 13px;
  padding: 15px 16px; border: 1px solid #e2e5da; border-radius: 12px; text-align: left;
  background: #fffefa; color: #526048; font-family: var(--font-reading); font-size: 17px; line-height: 1.65;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.answer-option:hover:not(:disabled) { border-color: #b7c8ab; background: #f3f6ec; }
.answer-option.selected { border-color: #7e9b70; background: #eaf0df; box-shadow: 0 0 0 1px #7e9b701a; color: #344c2d; }
.answer-label { width: 27px; min-height: 27px; flex-shrink: 0; display: grid; place-items: center; margin-top: 1px; border: 1px solid #dce1d3; border-radius: 8px; color: #7d8871; font-family: var(--font-sans); font-size: 12px; line-height: 1; transition: background .18s ease, color .18s ease; }
.selected .answer-label { background: #6b895e; border-color: #6b895e; color: #fff; }
.answer-text { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.answer-check { align-self: center; margin-left: auto; color: #6b895e; }
.answer-option > .icon { align-self: center; color: #6b895e; width: 17px; height: 17px; }
.answer-option.correct { border-color: #80a16f; background: #e9f1e1; }
.answer-option.correct .answer-label { background: #6b895e; border-color: #6b895e; color: white; }
.answer-option.wrong { border-color: #c98b7c; background: #fcf1eb; }
.answer-option.wrong .answer-label { background: #b96b5b; border-color: #b96b5b; color: white; }
.answer-option:disabled { opacity: 1; cursor: default; }
.question-pane .word-hint { display: flex; align-items: center; gap: 6px; margin: 24px 0 0; font-size: 11px; color: #939b88; }
.question-explanation { margin-top: 28px; padding: 22px; border-left: 3px solid #a5b991; background: #f4f6ee; color: #67745c; font-size: 15px; line-height: 1.9; }
.question-explanation h3 { margin-bottom: 11px; color: var(--accent); font-size: 13px; }
.question-explanation p:last-child { margin-bottom: 0; }
.analysis { margin-top: 25px; padding: 21px; border-radius: 11px; background: #f0f4e7; border: 1px solid #e0e8d5; color: #637657; font-size: 14px; line-height: 1.9; }
.analysis h3 { margin-bottom: 12px; color: #557345; font-size: 14px; }
.analysis p { white-space: pre-wrap; }
.analysis .field { margin-top: 23px; }
.analysis summary { cursor: pointer; }
.answer-feedback { margin: 16px 0 24px; color: #8d9b80; font-size: 11px; }
.question-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 24px 0; }
.palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 9px; }
.palette-item { position: relative; min-height: 43px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: #727d66; font-size: 13px; }
.palette-item.answered { background: var(--accent-soft); border-color: #b5c7ac; color: var(--accent); }
.palette-item.active { background: var(--accent); border-color: var(--accent); color: white; }
.palette-item.current { border-color: var(--accent); outline: 2px solid #a8bd982f; }
.palette-item > .icon { position: absolute; top: 4px; right: 3px; width: 10px; height: 10px; color: #a67d3a; }
.palette-item.flagged::after { content: ""; position: absolute; top: 5px; right: 5px; width: 5px; height: 5px; border-radius: 50%; background: #d2a65c; }
.palette-item.correct { border-color: #83a570; color: #4e783a; background: #edf4e5; }
.palette-item.wrong { border-color: #d8a599; color: var(--danger); background: var(--danger-soft); }
.palette-key { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 21px; color: var(--muted); font-size: 11px; }
.palette-key i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; background: var(--accent-soft); border: 1px solid #b5c7ac; }
.practice-footer { min-height: 78px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 28px; border-top: 1px solid var(--border); background: var(--surface); }
.practice-footer > div { display: flex; align-items: center; gap: 10px; }
.practice-footer .question-nav { margin: 0; }
.practice-footer [data-progress] { min-width: 47px; text-align: center; color: #87977a; font-size: 11px; }
.practice-footer .footer-meta { color: #929987; font-size: 11px; gap: 15px; }
.practice-footer .primary, .practice-footer .secondary { padding-inline: 22px; }
.practice-result { text-align: center; padding: 16px 0 24px; }
.result-number { color: var(--accent); font-size: 59px; letter-spacing: -3px; font-weight: 450; line-height: 1.2; }
.result-number small { font-size: 19px; margin-left: 4px; letter-spacing: 0; }
.word-bank { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.word-bank button { padding: 9px 12px; border-radius: 7px; border: 1px solid #dce3d1; background: var(--surface); font-family: var(--font-reading); font-size: 16px; color: #617552; }
.word-bank button.selected { color: white; background: var(--accent); border-color: var(--accent); }
.word-bank button.used { opacity: .45; }
.answer-blank { min-width: 90px; display: inline-block; padding: 0 5px; margin-inline: 3px; border-bottom: 1px solid #7d9870; color: var(--accent); background: #e7eedc; font-size: inherit; line-height: inherit; font-family: inherit; }
.answer-blank.active { border-bottom-width: 3px; background: #d6e4c6; }
.audio-player { display: flex; align-items: center; gap: 13px; padding: 15px 19px; margin-bottom: 24px; background: #eaf0e1; border: 1px solid #dbe5cd; border-radius: 12px; color: #5e7350; }
.audio-player .icon-button { color: var(--accent); background: #fffef9; border-radius: 50%; }
.audio-player audio { max-width: 100%; min-width: 0; flex: 1; height: 40px; }
.audio-player .audio-track { flex: 1; min-width: 0; }
.audio-player small { font-size: 11px; }
.audio-slot:empty { display: none; }
.audio-slot { flex-shrink: 0; }
.audio-slot .audio-player { margin: 0; border: 0; border-bottom: 1px solid #d9e2ce; border-radius: 0; padding: 10px 28px; min-height: 58px; }
.audio-slot .audio-player > audio { display: none; }
.audio-slot input[type="range"] { flex: 1; min-width: 50px; }
.audio-slot [data-audio-time] { font-variant-numeric: tabular-nums; font-size: 12px; }
.audio-slot select { max-width: 77px; min-height: 34px; border: 0; background: transparent; color: inherit; font-size: 12px; }
.audio-slot .secondary { min-height: 34px; padding: 6px 10px; font-size: 11px; background: transparent; }
.exam-editor { width: 100%; min-height: 340px; padding: 20px; font-size: 19px; line-height: 1.9; font-family: var(--font-reading); border: 1px solid var(--border); border-radius: 11px; color: var(--ink); background: var(--surface); }
.paper-image { display: block; width: 100%; margin: 0 auto 18px; background: #fff; box-shadow: 0 2px 10px #30382310; }

/* Floating word meaning and selection tools stay close to the text. */
.word-popup { position: fixed; z-index: 110; width: 310px; max-width: calc(100vw - 24px); padding: 19px 21px 20px; color: #344030; background: #fffefa; border: 1px solid #dbe2d0; border-radius: 14px; box-shadow: 0 12px 48px #283a242b; animation: popup-in .15s ease-out; }
.word-popup::before { content: ""; position: absolute; width: 10px; height: 10px; bottom: -6px; left: 50%; border-right: 1px solid #dbe2d0; border-bottom: 1px solid #dbe2d0; background: #fffefa; transform: rotate(45deg); }
.word-popup.below::before { bottom: auto; top: -6px; border: 0; border-top: 1px solid #dbe2d0; border-left: 1px solid #dbe2d0; }
.word-popup .word-title { font-family: var(--font-reading); font-size: 25px; line-height: 1.3; font-weight: 500; margin: 0 35px 7px 0; color: #315d4c; }
.word-popup .word-phonetic { color: #94a187; font-size: 12px; margin-bottom: 14px; }
.word-popup .word-meaning { color: #46553f; font-size: 17px; line-height: 1.75; white-space: pre-line; }
.popup-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-right: 21px; }
.popup-heading strong { color: #315d4c; font-size: 25px; font-weight: 500; line-height: 1.3; font-family: var(--font-reading); }
.word-popup > .muted { margin: 8px 0 13px; font-size: 12px; }
.word-popup .word-meaning:last-child { margin-bottom: 0; }
.word-popup .secondary { min-height: 35px; padding: 7px 12px; font-size: 12px; background: var(--accent-soft); color: var(--accent); border: 0; }
.word-popup .word-pos { color: #94a187; font-style: italic; font-size: 12px; margin-right: 6px; }
.word-popup .icon-button { position: absolute; top: 7px; right: 8px; width: 34px; min-height: 34px; padding: 7px; }
.word-popup .word-actions { margin-top: 15px; padding-top: 12px; border-top: 1px solid #edf0e7; display: flex; gap: 8px; }
.word-popup .word-actions button { min-height: 35px; padding: 7px 11px; border-radius: 7px; font-size: 12px; color: var(--accent); background: var(--accent-soft); }
@keyframes popup-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.selection-toolbar { position: fixed; z-index: 105; display: flex; align-items: center; gap: 3px; padding: 5px; border-radius: 10px; border: 1px solid #d4deca; background: var(--surface); box-shadow: var(--shadow); }
.selection-toolbar button { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 7px 10px; background: transparent; color: #607750; border-radius: 6px; font-size: 12px; }
.selection-toolbar button:hover { background: var(--accent-soft); }

/* Dialogs and notices. Native <dialog> or a focus-managed overlay can use these. */
.modal-backdrop { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 24px; background: #28302559; backdrop-filter: blur(4px); }
.dialog { width: min(100%, 530px); max-height: calc(100dvh - 48px); overflow: auto; padding: 30px; border: 1px solid #e0e5d6; border-radius: 19px; box-shadow: 0 22px 70px #1e2f1d26; background: var(--surface); }
dialog.dialog::backdrop { background: #28302559; backdrop-filter: blur(4px); }
.dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 23px; }
.dialog-header h2 { margin: 0; font-size: 20px; }
.dialog-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 25px; }
.toast { position: fixed; z-index: 150; bottom: 25px; left: calc(50% + var(--sidebar-width) / 2); transform: translate(-50%, 20px); max-width: min(540px, calc(100vw - 32px)); padding: 12px 20px; border-radius: 11px; background: #334631; color: #fffefa; box-shadow: 0 8px 30px #23372123; opacity: 0; pointer-events: none; font-size: 13px; text-align: center; transition: transform .2s ease, opacity .2s ease; }
.toast.visible, .toast.show, .toast:not(:empty) { opacity: 1; transform: translate(-50%, 0); }
.toast:empty { display: none; }

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1e2520; --surface: #293129; --surface-soft: #343e32;
  --ink: #dce4d6; --muted: #a0ac96; --accent: #a5c394;
  --accent-hover: #b9d7a8; --accent-soft: #3b4c34; --border: #3c4936;
  --danger: #e6aa98; --danger-soft: #4a3430; --warning: #d1b87e;
}
html[data-theme="dark"] .sidebar { background: #252f25; border-color: var(--border); }
html[data-theme="dark"] .brand > .icon, html[data-theme="dark"] .userbadge > .icon, html[data-theme="dark"] .avatar { background: #374a30; }
html[data-theme="dark"] .brand small, html[data-theme="dark"] .userbadge, html[data-theme="dark"] .brand { color: var(--ink); }
html[data-theme="dark"] .userbadge { border-color: var(--border); }
html[data-theme="dark"] .nav-item { color: #a3b09b; }
html[data-theme="dark"] .nav-item.active, html[data-theme="dark"] .nav-item[aria-current="page"] { color: #c7dfb8; background: #374a30; }
html[data-theme="dark"] .nav-item:hover { background: #ffffff08; }
html[data-theme="dark"] .topbar { background: #1e2520f5; }
html[data-theme="dark"] .primary { background: #8dab7c; color: #1d3019; border-color: #8dab7c; }
html[data-theme="dark"] .secondary, html[data-theme="dark"] .field { color: var(--ink); }
html[data-theme="dark"] .field input, html[data-theme="dark"] .field select, html[data-theme="dark"] .field textarea { border-color: var(--border); }
html[data-theme="dark"] .tag, html[data-theme="dark"] .mode-tabs { background: #34402e; color: #b4c2a8; }
html[data-theme="dark"] .mode-tabs button { color: var(--muted); }
html[data-theme="dark"] .resource-row:hover { background: #33432d; }
html[data-theme="dark"] .resource-row > span:first-child { background: #35452f; }
html[data-theme="dark"] .resource-row strong { color: #c1d3b5; }
html[data-theme="dark"] .question-stem { color: var(--ink); }
html[data-theme="dark"] .answer-option { background: #293129; border-color: #495640; color: #d6e1cd; }
html[data-theme="dark"] .answer-option:hover { background: #35432e; }
html[data-theme="dark"] .answer-option.selected, html[data-theme="dark"] .answer-option.correct { background: #3c5132; border-color: #90ad79; color: #e0eed7; }
html[data-theme="dark"] .answer-option.wrong { background: #4e3730; border-color: #a97968; }
html[data-theme="dark"] .answer-label { color: #a5b697; border-color: #55664a; }
html[data-theme="dark"] .selected .answer-label, html[data-theme="dark"] .correct .answer-label { color: white; }
html[data-theme="dark"] .question-explanation { background: #323f2d; color: #c1d1b5; }
html[data-theme="dark"] .analysis { background: #323f2d; color: #c1d1b5; border-color: #4c5f3f; }
html[data-theme="dark"] .analysis h3 { color: #b3cf9d; }
html[data-theme="dark"] .resize-handle { background: #374332; border-color: #45523c; }
html[data-theme="dark"] .audio-player { background: #35452e; border-color: #4c6241; color: #b6cca5; }
html[data-theme="dark"] .audio-player .icon-button { background: #465b3c; }
html[data-theme="dark"] .word-popup { background: #2e3a29; border-color: #596c4b; color: var(--ink); }
html[data-theme="dark"] .word-popup::before { background: #2e3a29; border-color: #596c4b; }
html[data-theme="dark"] .word-popup .word-title { color: #cae1b9; }
html[data-theme="dark"] .popup-heading strong { color: #cae1b9; }
html[data-theme="dark"] .word-popup .word-meaning { color: #bfceb3; }
html[data-theme="dark"] .login-story { background: #2e3c27; }
html[data-theme="dark"] .login-story::after { display: none; }
html[data-theme="dark"] .login-story p, html[data-theme="dark"] .login-features { color: #b1c29f; }

@media (min-width: 1500px) {
  .reader-content { padding-inline: 60px; }
  .question-pane { padding: 32px 42px 45px; }
}

@media (max-width: 1150px) {
  :root { --sidebar-width: 190px; }
  .sidebar { padding-inline: 13px; }
  .logo { margin-inline: 8px; font-size: 17px; gap: 8px; }
  .logo-mark { width: 32px; height: 32px; border-radius: 10px 10px 10px 3px; }
  .nav-item { padding-inline: 14px; }
  .topbar { padding-inline: 27px; height: 70px; }
  .page { padding: 30px 27px 50px; }
  .workbench { height: calc(100dvh - 70px); }
  .practice-topbar { padding: 11px 20px; gap: 10px; }
  .practice-topbar .toolbar-actions { gap: 3px; }
  .practice-body { grid-template-columns: minmax(280px, var(--split, 52%)) 9px minmax(265px, 1fr); }
  .reader-content { padding: 27px 25px 50px; }
  .reading-toolbar { padding-inline: 15px; }
  .question-pane { padding: 24px 20px 32px; }
  .answer-option { padding: 13px; gap: 10px; font-size: 16px; }
  .practice-footer { padding-inline: 20px; }
  .practice-footer .footer-meta { gap: 8px; }
}

@media (max-width: 800px) {
  :root { --sidebar-width: 0px; --reader-font-size: 19px; }
  body { padding-bottom: 0; }
  .sidebar { inset: 0 auto 0 0; width: 250px; height: 100dvh; padding: 28px 18px max(22px, env(safe-area-inset-bottom)); border-right: 1px solid var(--border); transform: translateX(-100%); visibility: hidden; pointer-events: none; transition: transform .22s ease; z-index: 65; box-shadow: none; }
  .sidebar.open { transform: translateX(0); visibility: visible; pointer-events: auto; box-shadow: 0 0 0 100vmax #1d291c66; }
  .sidebar .brand { margin-bottom: 22px; }
  .sidebar nav, .sidebar .primary-nav { display: grid; gap: 3px; }
  .nav-item { min-height: 45px; padding: 10px 14px; }
  .sidebar-backdrop { display: none; }
  .app-shell:has(.sidebar.open) .sidebar-backdrop { position: fixed; inset: 0; z-index: 60; display: block; background: transparent; }
  .main-shell { margin-left: 0; min-height: 100dvh; }
  .topbar { height: 61px; padding: 0 21px; gap: 12px; }
  .topbar #nav-toggle { display: inline-flex; width: 35px; padding: 7px; }
  .topbar > div:not(.toolbar-actions) { gap: 12px; }
  .topbar > div:not(.toolbar-actions) > .muted { display: none; }
  .topbar .date, .topbar-title .breadcrumb { display: none; }
  .topbar-actions { gap: 5px; }
  .topbar h1, .topbar h2 { font-size: 15px; }
  .page { padding: 25px 21px 37px; }
  .page-heading { gap: 15px; margin-bottom: 23px; }
  .page-heading p { font-size: 13px; }
  .page-heading h1 { font-size: 26px; }
  .workbench { height: calc(100dvh - 61px); min-height: 450px; }
  .practice-topbar { min-height: 65px; padding: 9px 14px; }
  .practice-heading { gap: 4px; }
  .practice-heading h1, .practice-heading h2 { max-width: 190px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .practice-heading small { font-size: 10px; }
  .practice-topbar h1 { max-width: 230px; font-size: 14px; }
  .practice-topbar .toolbar-actions > .tag { display: none; }
  .practice-topbar .icon-button { width: 38px; min-height: 40px; padding: 9px; }
  .practice-body { display: block; position: relative; }
  .article-pane, .question-pane { height: 100%; width: 100%; }
  .article-pane { display: none; }
  .question-pane { padding: 23px 23px 36px; }
  .workbench[data-pane="article"] .article-pane, .workbench[data-mobile-pane="article"] .article-pane, .workbench.show-article .article-pane { display: block; }
  .workbench[data-pane="article"] .question-pane, .workbench[data-mobile-pane="article"] .question-pane, .workbench.show-article .question-pane { display: none; }
  .practice-body[data-view="article"] .article-pane { display: flex; }
  .practice-body[data-view="article"] .question-pane { display: none; }
  /* Written exam sections keep their prompt above the editor on a phone. */
  .practice-body:not([data-view]) { display: flex; flex-direction: column; }
  .practice-body:not([data-view]) > .article-pane { display: flex; flex: 0 0 30dvh; min-height: 150px; max-height: 35dvh; height: auto; }
  .practice-body:not([data-view]) > .article-pane .reader-content { padding: 23px 25px 30px; }
  .practice-body:not([data-view]) > .question-pane { flex: 1; min-height: 0; height: auto; padding-top: 20px; }
  .practice-body:not([data-view]) .exam-editor { min-height: 250px; }
  .resize-handle { display: none; }
  .mobile-practice-tabs { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 6px 16px 10px; flex-shrink: 0; background: var(--surface); border-bottom: 1px solid var(--border); }
  .mobile-practice-tabs button { flex: 1; max-width: 220px; min-height: 37px; border-radius: 8px; font-size: 12px; color: var(--muted); background: #f2f3eb; }
  .mobile-practice-tabs button.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
  .mobile-pane-tabs { display: flex; border-radius: 0; justify-content: center; gap: 7px; padding: 6px 16px 9px; flex-shrink: 0; background: var(--surface); border-bottom: 1px solid var(--border); }
  .mobile-pane-tabs button { flex: 1; max-width: 220px; min-height: 37px; border-radius: 8px; font-size: 12px; color: var(--muted); background: var(--surface-soft); }
  .mobile-pane-tabs button.active { background: var(--accent-soft); color: var(--accent); box-shadow: none; font-weight: 600; }
  .reading-toolbar { min-height: 50px; }
  .reading-toolbar { padding-inline: 10px; gap: 4px; }
  .reader-content { padding: 25px 25px 45px; }
  .reader-content h2 { font-size: 24px; }
  .practice-footer { min-height: 68px; padding: 10px 13px; gap: 8px; }
  .practice-footer > div { gap: 7px; }
  .practice-footer .footer-meta { display: none; }
  .practice-footer .desktop-only { display: none; }
  .practice-footer .primary, .practice-footer .secondary { min-height: 43px; padding: 9px 14px; font-size: 12px; }
  .practice-footer .icon-button { width: 39px; min-height: 43px; }
  .practice-footer .question-count { font-size: 11px; }
  .question-stem { font-size: 19px; }
  .answer-option { min-height: 64px; padding: 15px; font-size: 17px; }
  .question-header { margin-bottom: 22px; }
  .reading-fullscreen { height: 100dvh; }
  .reading-fullscreen .article-pane { display: block; }
  .reading-fullscreen .reader-content { padding-inline: 28px; }
  .reading-fullscreen .mobile-practice-tabs { display: none; }
  .article-pane.reader-expanded, .article-pane:fullscreen { display: flex; }
  .article-pane:fullscreen .reader-content, .article-pane.reader-expanded .reader-content { padding-inline: 29px; }
  .paper-view { display: flex; }
  .filterbar { align-items: stretch; }
  .filterbar input { min-width: 170px; }
  .resource-row { padding: 18px; gap: 13px; }
  .resource-row strong { font-size: 13px; }
  .audio-slot .audio-player { padding-inline: 15px; gap: 9px; }
  .audio-slot .audio-player > .muted { font-size: 11px; }
  .login-screen { min-height: 100dvh; grid-template-columns: 1fr; }
  .login-intro, .login-story { padding: 100px 32px 42px; min-height: 320px; }
  .login-intro .logo, .login-story .logo { top: 25px; left: 32px; }
  .login-story .brand { top: 25px; left: 32px; }
  .login-intro h1, .login-story h1 { max-width: 400px; font-size: 34px; margin-bottom: 15px; }
  .login-intro p, .login-story p { margin-bottom: 15px; font-size: 13px; }
  .login-intro::after, .login-story::after { width: 350px; height: 350px; right: -220px; bottom: -220px; }
  .login-kicker { display: none; }
  .login-side { padding: 7px 30px 30px; }
  .login-panel { padding: 35px 0; }
  .login-panel h2 { font-size: 24px; }
  .login-panel > p { margin-bottom: 25px; }
  body:has(.login-screen) { padding-bottom: 0; }
  .dialog { padding: 24px; border-radius: 16px; }
  .modal-backdrop { padding: 15px; }
  .toast { bottom: calc(24px + env(safe-area-inset-bottom)); left: 50%; }
}

@media (max-width: 600px) {
  .answer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .answer-grid .answer-option { flex-wrap: nowrap; justify-content: flex-start; gap: 7px; padding: 10px 9px; font-size: 15px; }
  .answer-grid .answer-text { flex: 1; overflow-wrap: normal; word-break: normal; }
  .answer-grid .answer-label { width: 22px; min-height: 22px; }
}

@media (max-width: 390px) {
  .topbar { padding-inline: 16px; }
  .page { padding-inline: 16px; }
  .practice-heading h1, .practice-heading h2 { max-width: 148px; }
  .practice-topbar h1 { max-width: 155px; }
  .practice-topbar .secondary { padding-inline: 8px; font-size: 11px; gap: 5px; }
  .mode-field select { max-width: 87px; padding-inline: 5px; font-size: 11px; }
  .practice-topbar .toolbar-actions { gap: 0; }
  .practice-topbar .icon-button { width: 34px; }
  .practice-footer .primary, .practice-footer .secondary { padding-inline: 10px; }
  .question-pane { padding-inline: 19px; }
  .reader-content { padding-inline: 21px; }
  .answer-option { gap: 10px; padding: 13px; }
  .answer-grid .answer-option { gap: 5px; font-size: 14px; }
  .answer-grid .answer-label { width: 20px; min-height: 20px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media print {
  body { background: white; padding: 0; }
  .sidebar, .topbar, .practice-topbar, .practice-footer, .resize-handle, .reading-toolbar, .mobile-practice-tabs, .word-popup, .toast, .selection-toolbar { display: none !important; }
  .main-shell { margin: 0; }
  .workbench, .practice-body, .article-pane, .question-pane { height: auto; min-height: 0; overflow: visible; display: block; }
  .reader-content { max-width: none; padding: 0; color: #000; }
  .question-pane { padding: 30px 0; }
  .answer-option { break-inside: avoid; }
}

.word-popup { max-height:calc(100dvh - 24px); overflow:auto; }
.word-popup > .muted { font-size:14px; }
.word-popup.reading-night { background:#29342c;color:#e3eadb;border-color:#56634d; }
.word-popup.reading-night .word-meaning { color:#e3eadb; }
.word-popup.reading-night .muted { color:#afbf9f; }
.word-popup.reading-night::before { background:#29342c;border-color:#56634d; }