:root {
  color-scheme: light;
  --bg: #f4f7f6; --surface: #fff; --surface-2: #edf3f1; --surface-3: #e4ece9;
  --text: #12221e; --muted: #61716c; --line: #d4dfdb; --line-strong: #b9cbc5;
  --accent: #0f6957; --accent-strong: #095343; --accent-soft: #dff1eb;
  --correct: #086d3f; --correct-soft: #c9ead9; --wrong: #b4232e; --wrong-soft: #f7cfd3;
  --flag: #7a5200; --flag-soft: #f6d66c; --shadow: 0 14px 36px rgba(23,50,42,.08);
  --reader-size: 20px; --reader-family: Arial, Helvetica, sans-serif; --reader-weight: 650;
  --drawer-width: 238px; --header-safe-top: env(safe-area-inset-top, 0px);
  --header-row-height: 54px; --header-height: calc(var(--header-row-height) + var(--header-safe-top)); --radius: 16px;
}
html[data-theme="dark"] {
  color-scheme: dark; --bg: #101714; --surface: #18211e; --surface-2: #202c28; --surface-3: #293832;
  --text: #eef5f2; --muted: #a7b8b2; --line: #2e3f39; --line-strong: #425851;
  --accent: #6fcab3; --accent-strong: #52b99f; --accent-soft: #1b3c33;
  --correct: #7be0a8; --correct-soft: #1c4c32; --wrong: #ff9099; --wrong-soft: #51262b;
  --flag: #ffd36a; --flag-soft: #4f3c10; --shadow: 0 18px 46px rgba(0,0,0,.25);
}
* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
button,input,select,textarea { font: inherit; color: inherit; }
button,a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid color-mix(in srgb,var(--accent) 48%,transparent); outline-offset: 2px; }
.hidden { display: none !important; }
.loading-screen { min-height:100vh; display:grid; place-items:center; padding:24px; }
.loading-card { width:min(560px,100%); padding:34px; text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow); }
.spinner { width:34px;height:34px;margin:0 auto 16px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.auth-screen { min-height:100svh;padding:clamp(14px,3vw,34px);display:grid;place-items:center;background:
  radial-gradient(circle at 12% 15%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 32%),
  radial-gradient(circle at 88% 85%,color-mix(in srgb,var(--correct) 10%,transparent),transparent 30%),var(--bg); }
.auth-layout { width:min(1100px,100%);min-height:min(760px,calc(100svh - 40px));display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);overflow:hidden;border:1px solid var(--line);border-radius:30px;background:var(--surface);box-shadow:0 26px 80px rgba(12,45,36,.17); }
.auth-brand { position:relative;isolation:isolate;overflow:hidden;padding:clamp(28px,5vw,64px);display:flex;flex-direction:column;color:#eefbf7;background:linear-gradient(145deg,#0b4438 0%,#0f6957 56%,#164f48 100%); }
.auth-brand::before,.auth-brand::after { content:"";position:absolute;z-index:-1;border-radius:50%;border:1px solid rgba(255,255,255,.14); }
.auth-brand::before { width:430px;height:430px;right:-235px;top:-180px;box-shadow:0 0 0 54px rgba(255,255,255,.025),0 0 0 108px rgba(255,255,255,.018); }
.auth-brand::after { width:320px;height:320px;left:-190px;bottom:-190px;box-shadow:0 0 0 44px rgba(255,255,255,.025); }
.auth-brand-top { display:flex;align-items:center;gap:12px;font-size:13px;font-weight:850;letter-spacing:.02em; }
.auth-monogram,.auth-seal { display:grid;place-items:center;border-radius:12px;font-weight:900; }
.auth-monogram { width:42px;height:42px;color:#0b4438;background:#bdeadd;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55); }
.mind-orbit { position:relative;width:min(310px,64vw);aspect-ratio:1;margin:auto;display:grid;place-items:center;border:1px solid rgba(255,255,255,.19);border-radius:50%;box-shadow:0 0 0 26px rgba(255,255,255,.04),0 0 0 52px rgba(255,255,255,.025); }
.mind-orbit::before,.mind-orbit::after { content:"";position:absolute;background:rgba(255,255,255,.16); }
.mind-orbit::before { width:76%;height:1px;transform:rotate(32deg); }.mind-orbit::after { width:1px;height:76%;transform:rotate(32deg); }
.orbit-core { width:112px;height:112px;display:grid;place-items:center;border-radius:42% 58% 52% 48%;color:#0b4438;background:#d7f5ec;font-family:Georgia,serif;font-size:58px;box-shadow:0 16px 40px rgba(0,0,0,.18); }
.mind-orbit i { position:absolute;width:15px;height:15px;border:3px solid #0f6957;border-radius:50%;background:#d7f5ec;box-shadow:0 0 0 7px rgba(215,245,236,.12); }
.mind-orbit i:nth-child(2){top:9%;left:27%}.mind-orbit i:nth-child(3){top:31%;right:6%}.mind-orbit i:nth-child(4){bottom:9%;right:28%}.mind-orbit i:nth-child(5){bottom:30%;left:6%}
.auth-brand-copy { max-width:620px; }.auth-brand-copy .eyebrow { color:#bdeadd; }.auth-brand-copy h1 { max-width:620px;margin:9px 0 14px;font-size:clamp(32px,4.5vw,56px);line-height:1.02;letter-spacing:-.045em; }.auth-brand-copy p { max-width:580px;margin:0;color:rgba(238,251,247,.78);font-size:14px;line-height:1.65; }
.auth-trust { display:flex;flex-wrap:wrap;gap:8px;margin-top:28px; }.auth-trust span { padding:7px 10px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.07);font-size:10px;font-weight:800; }
.auth-panel { padding:clamp(28px,5vw,58px);display:flex;flex-direction:column;justify-content:center; }
.auth-panel-head { display:flex;align-items:center;gap:13px; }.auth-panel-head h2 { margin:2px 0 0;font-size:clamp(26px,3vw,36px);letter-spacing:-.035em; }.auth-seal { width:46px;height:46px;flex:none;color:#fff;background:var(--accent-strong);font-size:13px;letter-spacing:.05em; }
.auth-intro { margin:18px 0;color:var(--muted);font-size:13px;line-height:1.55; }
.auth-message { margin-bottom:14px;padding:11px 12px;border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line));border-radius:11px;background:var(--accent-soft);color:var(--accent-strong);font-size:12px;font-weight:750; }
.auth-form { display:grid;gap:13px; }.auth-field { display:grid;gap:6px; }.auth-field span { font-size:11px;font-weight:850; }.auth-field input { width:100%;min-height:48px;padding:0 14px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface-2); }.auth-field input:focus { border-color:var(--accent);background:var(--surface);outline:3px solid color-mix(in srgb,var(--accent) 17%,transparent); }
.auth-text-button { justify-self:end;padding:0;border:0;background:transparent;color:var(--accent);font-size:11px;font-weight:850; }.auth-submit { width:100%;min-height:49px;margin-top:2px; }.auth-submit:disabled { opacity:.6;cursor:wait; }
.auth-switch { margin-top:16px;text-align:center;color:var(--muted);font-size:12px; }.auth-switch button { padding:0;border:0;background:transparent;color:var(--accent);font-weight:850; }
.auth-divider { display:flex;align-items:center;gap:10px;margin:22px 0 13px;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; }.auth-divider::before,.auth-divider::after { content:"";height:1px;flex:1;background:var(--line); }
.auth-demo { width:100%; }.auth-footnote { margin:10px 0 0;text-align:center;color:var(--muted);font-size:9px;line-height:1.5; }

.app-header { position:sticky;top:0;z-index:80;height:var(--header-height);display:flex;align-items:center;gap:8px;padding:calc(var(--header-safe-top) + 8px) 10px 7px;background:color-mix(in srgb,var(--surface) 94%,transparent);border-bottom:1px solid var(--line);backdrop-filter:blur(16px); }
.icon-button { width:38px;height:38px;min-width:38px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--surface);font-weight:800;touch-action:manipulation; }
.icon-button:hover,.tool-icon:hover { border-color:var(--accent);background:var(--accent-soft); }
.icon-button:disabled { opacity:.34;cursor:default; }
.menu-button { font-size:20px;line-height:1; }
.back-button { font-size:22px;line-height:1; }
.home-button { background:var(--accent-strong);color:#fff;border-color:transparent;font-size:14px; }
.header-center { position:relative; flex:1; min-width:0; display:flex;align-items:center; }
.header-crumbs { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:12px; }
.header-crumbs button { border:0;background:transparent;color:var(--accent);padding:0; }
.search-wrap { position:relative; }
.search-panel { position:absolute;top:44px;left:0;width:min(520px,calc(100vw - 30px));padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow); }
.search-panel input { width:100%;height:40px;padding:0 12px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px; }
.search-results { max-height:56vh;overflow:auto;margin-top:7px; }
.search-result { width:100%;padding:10px;border:0;border-radius:9px;background:transparent;text-align:left; }
.search-result:hover { background:var(--surface-2); }
.search-result small,.search-result span { display:block; }
.search-result small { color:var(--accent);font-weight:800;margin-bottom:3px; }
.search-result span { color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.account-wrap { position:relative; }
.account-button { position:relative;background:var(--accent-soft);color:var(--accent-strong);font-size:12px; }
.sync-dot { position:absolute;width:8px;height:8px;border-radius:50%;background:var(--correct);right:-1px;bottom:-1px;border:2px solid var(--surface); }
.account-popover { position:absolute;top:44px;left:0;min-width:220px;padding:14px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow); }
.account-popover strong,.account-popover span { display:block; }
.account-popover span { color:var(--muted);font-size:12px;margin-top:4px; }
.account-popover .app-version { margin-top:9px;font-size:10px;font-weight:850;letter-spacing:.04em; }
.account-popover a { display:block;margin-top:12px;color:var(--wrong);font-weight:800;text-decoration:none;font-size:13px; }

.app-frame { display:grid;grid-template-columns:0 minmax(0,1fr);transition:grid-template-columns .22s ease; }
.app-frame.drawer-open { grid-template-columns:var(--drawer-width) minmax(0,1fr); }
.side-drawer { position:sticky;top:var(--header-height);height:calc(100vh - var(--header-height));overflow:hidden;background:var(--surface);border-right:1px solid var(--line); }
.drawer-inner { width:var(--drawer-width);height:100%;padding:12px 10px;display:flex;flex-direction:column;gap:5px; }
.drawer-link { width:100%;min-height:42px;padding:0 12px;display:flex;align-items:center;gap:10px;border:0;border-radius:11px;background:transparent;text-align:left;font-size:13px;font-weight:750; }
.drawer-link:hover,.drawer-link.active { background:var(--accent-soft);color:var(--accent); }
.drawer-premium { margin-left:auto;padding:3px 6px;border-radius:999px;background:var(--flag-soft);color:var(--flag);font-size:8px;font-weight:900;letter-spacing:.03em; }
.drawer-link.flagged { color:var(--flag); }
.drawer-link.wrong { color:var(--wrong); }
.drawer-icon { width:25px;text-align:center;font-size:17px; }
.drawer-spacer { flex:1; }
.drawer-note { padding:10px;color:var(--muted);font-size:11px;line-height:1.45; }
.drawer-version { padding:0 10px 8px;color:var(--muted);font-size:9px;font-weight:850;letter-spacing:.05em;text-transform:uppercase; }
.content { min-width:0; }
.page-shell { width:min(1080px,calc(100% - 28px));margin:0 auto;padding:24px 0 70px; }
.reader-shell { width:100%;padding:10px 12px 54px; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:8px;font-size:clamp(26px,4vw,40px);line-height:1.08;letter-spacing:-.035em; }
.muted { color:var(--muted); }
.small { font-size:12px; }
.eyebrow { color:var(--accent);font-size:11px;font-weight:900;letter-spacing:.13em;text-transform:uppercase; }
.panel { background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow); }
.empty-state { padding:38px;text-align:center;background:var(--surface);border:1px dashed var(--line-strong);border-radius:16px; }

.library-shell { max-width:1180px; }
.library-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,470px),1fr));gap:16px;align-items:stretch; }
.book-tile { min-height:260px;position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(150px,38%) minmax(0,1fr);border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow);text-align:left;padding:0; }
.book-tile:hover { transform:translateY(-2px);border-color:var(--accent); }
.book-cover-compact { min-height:100%;padding:22px 18px;color:#fff;background:linear-gradient(145deg,#155a4d,#0c3f36);position:relative;overflow:hidden; }
.book-cover-compact::after { content:"";position:absolute;width:145px;height:145px;border:25px solid rgba(255,255,255,.07);border-radius:50%;right:-68px;bottom:-75px; }
.book-cover-image { min-height:100%;display:grid;place-items:center;overflow:hidden;background:#f5f7f6; }
.book-cover-image img { width:100%;height:100%;object-fit:contain;display:block; }
.cover-kicker { font-size:10px;font-weight:900;letter-spacing:.17em; }
.cover-title { margin-top:6px;font-size:24px;font-weight:850;letter-spacing:-.04em; }
.cover-meta { position:absolute;left:18px;bottom:18px;font-size:10px;color:rgba(255,255,255,.82); }
.tile-body { min-width:0;padding:20px;display:flex;flex-direction:column; }
.tile-heading h2 { margin:0;font-size:clamp(18px,2.3vw,25px);line-height:1.12;letter-spacing:-.025em; }
.tile-heading p { margin:7px 0 18px;color:var(--muted);font-size:12px; }
.tile-meta { color:var(--muted);font-size:12px; }
.tile-progress { margin-top:auto; }
.tile-stats { display:flex;justify-content:space-between;gap:10px;margin-bottom:7px;font-size:11px;color:var(--muted); }
.progress-track { height:7px;overflow:hidden;border-radius:999px;background:var(--surface-3); }
.progress-fill { height:100%;background:var(--accent);border-radius:inherit; }
.book-placeholder { aspect-ratio:1/1;border:1px dashed color-mix(in srgb,var(--line) 44%,transparent);border-radius:18px;background:color-mix(in srgb,var(--surface) 18%,transparent);display:grid;place-items:center;color:color-mix(in srgb,var(--muted) 22%,transparent);font-size:10px;letter-spacing:.05em; }
.saved-notes-list { display:grid;gap:12px; }
.saved-note-card { overflow:hidden;padding:0; }
.saved-note-link { width:100%;padding:11px 15px;display:flex;justify-content:space-between;gap:12px;border:0;border-bottom:1px solid var(--line);background:var(--surface-2);color:var(--accent);text-align:left;font-size:12px;font-weight:850; }
.saved-note-link time { flex:none;color:var(--muted);font-size:10px;font-weight:600; }
.saved-question { padding:16px 18px 12px;font-family:var(--reader-family);font-size:calc(var(--reader-size) * .78);font-weight:var(--reader-weight);line-height:1.55; }
.saved-note-text { margin:0 18px 18px;padding:13px 15px;border-left:4px solid var(--accent);border-radius:0 11px 11px 0;background:var(--accent-soft);font-family:var(--reader-family);font-size:calc(var(--reader-size) * .72);font-weight:var(--reader-weight);line-height:1.5; }

.book-panel { padding:18px 20px;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:14px; }
.book-panel h1 { font-size:clamp(24px,3vw,32px);margin:0; }
.book-panel-meta { color:var(--muted);font-size:12px;margin-top:4px; }
.status-pill { flex:none;padding:7px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:850; }
.chapter-list { display:grid;grid-template-columns:1fr;gap:10px; }
.chapter-card { width:100%;padding:15px 17px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 5px 18px rgba(20,50,41,.04);text-align:left; }
.chapter-card:hover { border-color:var(--accent);transform:translateX(2px); }
.chapter-card.locked { opacity:.82;cursor:pointer;background:linear-gradient(135deg,var(--surface),var(--surface-2)); }
.chapter-card.locked:hover { border-color:var(--flag); }
.premium-lock { display:inline-flex;padding:4px 9px;border-radius:999px;color:var(--flag);background:var(--flag-soft);font-weight:850; }
.premium-feature-panel { width:min(620px,100%);margin:8vh auto 0;text-align:center;padding:clamp(28px,6vw,56px); }
.premium-feature-panel p { max-width:480px;margin:14px auto 22px;color:var(--muted);line-height:1.65; }
.chapter-label { color:var(--accent);font-size:10px;font-weight:900;letter-spacing:.09em; }
.chapter-card h3 { margin:3px 0 9px;font-size:16px; }
.chapter-meta { display:flex;gap:12px;color:var(--muted);font-size:11px; }
.chapter-count { font-size:18px;font-weight:900; }

.reader-topnav { margin-bottom:10px;padding:10px 12px;background:var(--surface);border:1px solid var(--line);border-radius:13px; }
.chapter-strip-head { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px; }
.chapter-strip-head strong { font-size:13px; }
.chapter-strip-head span { color:var(--muted);font-size:11px; }
.number-strip { position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px;overflow:visible;padding:2px; }
.number-page { display:contents; }
.number-chip { width:33px;height:33px;min-width:33px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);font-size:11px;font-weight:800; }
.number-chip.correct { background:color-mix(in srgb,var(--correct) 22%,var(--surface));border-color:color-mix(in srgb,var(--correct) 60%,var(--line));color:var(--correct); }
.number-chip.wrong { background:color-mix(in srgb,var(--wrong) 20%,var(--surface));border-color:color-mix(in srgb,var(--wrong) 62%,var(--line));color:var(--wrong); }
.number-chip.flagged { box-shadow:0 0 0 2px color-mix(in srgb,var(--flag) 72%,transparent);background-color:color-mix(in srgb,var(--flag-soft) 45%,var(--surface)); }
.number-chip.current { outline:3px solid var(--accent-strong);outline-offset:1px;background:var(--accent-strong);border-color:var(--accent-strong);color:#fff; }
.reader-card { position:relative;width:100%;padding:14px clamp(16px,4vw,46px) 28px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow); }
.reader-toolbar { display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--line); }
.question-index { color:var(--text);font-size:15px;font-weight:900; }
.marker-row { display:flex;align-items:center;gap:6px;position:relative; }
.tool-icon { width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;background:var(--surface);font-size:15px; }
.tool-icon.active,.tool-icon.speaking,.mini-tool.speaking { background:var(--accent-soft);color:var(--accent);border-color:var(--accent); }
.tool-word { min-height:34px;padding:0 9px;border:1px solid var(--line);border-radius:9px;background:var(--surface);font-size:11px;font-weight:850; }
.tool-word.active { background:var(--accent-soft);color:var(--accent);border-color:var(--accent); }
.review-tool { min-height:36px;padding:0 10px;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:9px;background:var(--surface);font-size:11px;font-weight:850;white-space:nowrap;touch-action:manipulation; }
.review-tool:hover { border-color:var(--accent);background:var(--accent-soft); }
.review-tool.flag { color:var(--flag); }
.tool-icon.flag { color:var(--flag); }
.tool-icon.flag.active { background:var(--flag-soft);border-color:var(--flag);color:var(--flag); }
.highlight-palette { position:absolute;right:0;top:40px;z-index:10;display:flex;gap:7px;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow); }
.color-dot { width:26px;height:26px;border:1px solid rgba(0,0,0,.16);border-radius:50%; }
.color-dot.yellow { background:#ffe477; }.color-dot.green { background:#9fe3b7; }.color-dot.blue { background:#a9d8ff; }.color-dot.pink { background:#ffb9d0; }
.color-dot.remove { display:grid;place-items:center;background:var(--surface-2);color:var(--wrong);font-size:18px;font-weight:900; }
.reader-content { font-family:var(--reader-family);font-size:var(--reader-size);font-weight:var(--reader-weight);line-height:1.7; }
.text-section { margin:22px 0; }
.section-label { margin-bottom:7px;color:var(--accent);font-family:Arial,Helvetica,sans-serif;font-size:11px;font-weight:900;letter-spacing:.13em;text-transform:uppercase; }
.lead-in { margin:0;padding:18px 20px;background:var(--surface-2);border-left:5px solid color-mix(in srgb,var(--accent) 28%,var(--line));border-radius:0 14px 14px 0;white-space:pre-line; }
.question-stem { margin:0;white-space:pre-line; }
.options { display:grid;gap:7px;margin:16px 0; }
.option { width:100%;min-height:54px;padding:10px 13px;display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:11px;border:1px solid var(--line-strong);border-radius:13px;background:var(--surface);text-align:left;line-height:1.35; }
.option:hover:not(:disabled) { border-color:var(--accent);background:var(--accent-soft); }
.option:disabled { cursor:default;opacity:1; }
.option-letter { width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:var(--surface-2);color:var(--accent);font-weight:900; }
.option.active { background:var(--accent-soft);border:2px solid var(--accent); }
.option.active .option-letter { background:var(--accent);color:#fff; }
.option.correct { background:var(--correct-soft);border:2px solid var(--correct);color:color-mix(in srgb,var(--correct) 82%,var(--text)); }
.option.correct .option-letter { background:color-mix(in srgb,var(--correct) 20%,var(--surface));color:var(--correct);border:1px solid var(--correct); }
.option.incorrect { background:var(--wrong-soft);border:2px solid var(--wrong);color:color-mix(in srgb,var(--wrong) 82%,var(--text)); }
.option.incorrect .option-letter { background:color-mix(in srgb,var(--wrong) 20%,var(--surface));color:var(--wrong);border:1px solid var(--wrong); }
.multi-submit-row { display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);font-family:Arial,Helvetica,sans-serif;font-size:11px;color:var(--muted); }
.multi-submit-row .button:disabled { opacity:.45;cursor:not-allowed; }
.reader-inline-nav { display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;margin:18px auto;padding-top:14px;border-top:1px solid var(--line); }
.nav-button { width:min(100%,180px);min-height:48px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface-2);color:var(--text);font-family:Arial,Helvetica,sans-serif;font-size:13px;font-weight:900;box-shadow:0 4px 12px rgba(20,50,41,.06); }
.nav-button:first-child { justify-self:end; }
.nav-button:last-child { justify-self:start; }
.nav-button:hover:not(:disabled) { border-color:var(--accent);background:var(--accent-soft);color:var(--accent-strong); }
.nav-button.finish-button { color:#fff;background:var(--accent-strong);border-color:var(--accent-strong); }
.nav-button:disabled { opacity:.34;cursor:not-allowed; }
.nav-label { color:var(--muted);font-family:Arial,Helvetica,sans-serif;font-size:11px; }
.edge-nav { position:absolute;top:12px;z-index:5;width:34px;height:38px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);font-size:22px; }
.edge-nav.prev { left:-8px;border-radius:0 12px 12px 0; }.edge-nav.next { right:-8px;border-radius:12px 0 0 12px; }
.edge-nav:disabled { display:none; }
.answer-area { display:grid;gap:11px;margin-top:4px; }
.answer-section { padding:17px 19px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2); }
.answer-section.correct-answer { background:var(--correct-soft);border-color:color-mix(in srgb,var(--correct) 45%,var(--line)); }
.answer-section h3 { margin:0 0 9px;font-family:Arial,Helvetica,sans-serif;font-size:15px; }
.answer-section p { margin:0;white-space:pre-line; }
.explanation-head { display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px; }
.explanation-head h3 { flex:none;margin:5px 0 0; }
.explanation-tools { width:min(100%,600px);display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:7px; }
.explanation-highlight-wrap { position:relative;display:grid; }
.explanation-highlight-wrap .highlight-palette { top:35px;right:0; }
.mini-tool { width:100%;min-height:36px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-family:Arial,Helvetica,sans-serif;font-size:10px;font-weight:850;white-space:nowrap; }
.mini-tool.remove-highlight { color:var(--wrong); }
.note-card { margin-top:18px;padding-top:16px;border-top:1px solid var(--line); }
.note-card textarea { width:100%;min-height:120px;resize:none;overflow:hidden;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);font-family:var(--reader-family);font-size:var(--reader-size);font-weight:var(--reader-weight);line-height:1.5; }
.note-actions { display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:8px; }
.next-note-button { min-width:160px; }
.note-status { color:var(--muted);font-family:Arial,Helvetica,sans-serif;font-size:11px; }
mark.hl-yellow { background:#ffe477; } mark.hl-green { background:#9fe3b7; } mark.hl-blue { background:#a9d8ff; } mark.hl-pink { background:#ffb9d0; }
mark { color:#12221e;border-radius:3px;padding:0 .04em; }
mark.selected-highlight { outline:2px solid var(--accent);outline-offset:2px; }

.mode-head { margin-bottom:16px; }
.mode-head p { margin:5px 0 0;color:var(--muted); }
.queue-list { display:flex;flex-wrap:wrap;align-items:flex-start;gap:clamp(8px,1.6vw,14px); }
.queue-item { width:clamp(48px,3.25em,66px);aspect-ratio:1;padding:0;display:grid;place-items:center;flex:0 0 auto;border:1px solid var(--line-strong);border-radius:50%;background:var(--surface);text-align:center;box-shadow:0 4px 12px rgba(20,50,41,.06); }
.queue-item:hover { border-color:var(--accent);background:var(--accent-soft);color:var(--accent-strong);transform:translateY(-1px); }
.queue-number { display:grid;place-items:center;font-size:clamp(13px,.72em,18px);font-weight:900; }
.queue-copy { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.queue-time { color:var(--muted);font-size:10px; }
.practice-banner { margin-bottom:10px;padding:9px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line);color:var(--muted);font-size:12px; }
.practice-banner.wrong { color:var(--wrong); }.practice-banner.flagged { color:var(--flag);background:var(--flag-soft); }
.exam-form { padding:22px; }
.form-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px; }
.field { display:grid;gap:7px;font-weight:800; }
.field span { font-size:13px; }
.field select,.field input[type="number"],.field input[type="range"] { width:100%;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2); }
.field input[type="range"] { padding:0; }
.voice-field-row { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center; }
.voice-field-row select { width:100%;min-width:0;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2);touch-action:manipulation; }
.voice-refresh { min-height:44px;white-space:nowrap; }
.field-hint { color:var(--muted);font-size:11px;font-weight:600; }
.source-box { margin-top:15px;padding:14px;border:1px solid var(--line);border-radius:12px; }
.source-box legend { font-weight:900;padding:0 6px; }
.source-box label { display:flex;align-items:center;gap:8px;padding:7px; }
.button { min-height:42px;padding:0 16px;border:1px solid var(--line-strong);border-radius:11px;background:var(--surface);font-weight:850;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px; }
.button.primary { color:#fff;background:var(--accent-strong);border-color:var(--accent-strong); }
.button.flag { color:var(--flag);background:var(--flag-soft);border-color:var(--flag); }
.button-row { display:flex;flex-wrap:wrap;gap:9px;margin-top:18px; }
.exam-score { padding:35px;text-align:center; }.exam-score strong { display:block;font-size:50px;color:var(--accent); }

.admin-console { display:grid;gap:18px; }
.admin-loading { min-height:180px;display:grid;place-items:center;color:var(--muted);font-weight:750; }
.admin-section { padding:clamp(18px,3vw,28px); }
.admin-section-head { display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px; }
.admin-section-head h2 { margin:3px 0 0;font-size:24px; }
.admin-section-head input { width:min(330px,100%);min-height:44px;padding:0 13px;border:1px solid var(--line-strong);border-radius:11px;background:var(--surface-2); }
.admin-users,.admin-chapters { display:grid;gap:9px; }
.admin-user,.admin-chapter { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2); }
.admin-user > div:first-child,.admin-chapter > span { min-width:0;display:grid;gap:3px; }
.admin-user span,.admin-user small,.admin-chapter small { color:var(--muted);font-size:11px;overflow-wrap:anywhere; }
.admin-user-actions { display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:7px; }
.admin-user-actions select,.admin-chapter select { min-height:40px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface); }
.admin-date { display:grid;gap:3px;color:var(--muted);font-size:9px;font-weight:800; }.admin-date input { min-height:40px;padding:0 8px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:10px; }
.admin-duration select { min-width:180px; }
.admin-date input:disabled { opacity:.55;cursor:not-allowed; }
.admin-user-owner { background:color-mix(in srgb,var(--accent-soft) 74%,var(--surface)); }
.admin-permanent-badge { display:inline-flex;align-items:center;padding:7px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent-strong)!important;font-size:10px!important;font-weight:900;white-space:nowrap; }
.admin-user-actions .button { min-height:40px;padding:0 13px;font-size:11px; }

.settings-dialog { width:min(680px,calc(100% - 24px));max-height:88vh;padding:0;border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--text);box-shadow:0 30px 100px rgba(0,0,0,.32); }
.settings-dialog::backdrop { background:rgba(9,19,16,.55);backdrop-filter:blur(4px); }
.dialog-head,.dialog-actions { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line); }
.dialog-head h2 { margin:0;font-size:20px; }.dialog-head p { margin:2px 0 0;color:var(--muted);font-size:11px; }
.dialog-body { padding:18px;display:grid;gap:15px;max-height:62vh;overflow:auto; }
.dialog-actions { justify-content:flex-end;border-top:1px solid var(--line);border-bottom:0; }
.sound-fieldset { display:flex;flex-wrap:wrap;gap:8px 18px;padding:13px;border:1px solid var(--line);border-radius:12px; }
.sound-fieldset legend { font-weight:900;padding:0 6px; }.sound-fieldset label { display:flex;align-items:center;gap:7px; }
.toast { position:fixed;z-index:200;left:50%;bottom:22px;transform:translate(-50%,18px);padding:10px 14px;border-radius:12px;background:var(--text);color:var(--surface);font-weight:800;font-size:12px;opacity:0;pointer-events:none;transition:.2s ease; }
.toast.show { opacity:1;transform:translate(-50%,0); }

@media (min-width:768px) and (max-width:1366px) {
  :root { --header-row-height:66px; }
  .app-header { gap:10px;padding:calc(var(--header-safe-top) + 11px) 16px 8px; }
  .icon-button { width:46px;height:46px;min-width:46px;font-size:15px; }
  .menu-button,.back-button { font-size:24px; }
  .account-button { font-size:13px; }
  .header-crumbs { font-size:13px; }
  .search-panel,.account-popover { top:52px; }
}

@media (max-width:760px) {
  :root { --drawer-width:min(82vw,270px); }
  .app-frame.drawer-open { grid-template-columns:var(--drawer-width) minmax(320px,1fr);overflow-x:auto; }
  .page-shell { width:calc(100% - 20px);padding-top:16px; }
  .reader-shell { padding:8px 5px 40px; }
  .book-tile { min-height:235px;grid-template-columns:minmax(132px,38%) minmax(0,1fr); }
  .library-grid { grid-template-columns:1fr;gap:11px; }
  .cover-title { font-size:20px; }.tile-body { padding:15px; }.tile-heading h2 { font-size:18px; }
  .book-panel { align-items:flex-start; }.status-pill { display:none; }
  .reader-card { padding:11px 14px 24px;border-radius:14px; }
  .reader-content { line-height:1.58; }
  .lead-in { padding:14px; }.option { min-height:50px; }
  .number-chip { width:31px;height:31px;min-width:31px; }
  .explanation-head { flex-direction:column; }.explanation-tools { width:100%; }
  .form-grid { grid-template-columns:1fr; }
  .auth-screen { padding:0;place-items:stretch; }.auth-layout { min-height:100svh;grid-template-columns:1fr;border:0;border-radius:0; }.auth-brand { min-height:250px;padding:24px; }.mind-orbit { position:absolute;width:190px;right:-38px;top:42px;opacity:.62; }.orbit-core { width:78px;height:78px;font-size:40px; }.auth-brand-copy { margin-top:auto;max-width:68%; }.auth-brand-copy h1 { margin-bottom:8px;font-size:30px; }.auth-brand-copy p { display:none; }.auth-trust { margin-top:14px;max-width:80%; }.auth-panel { padding:28px 22px 34px; }
  .admin-section-head { align-items:stretch;flex-direction:column; }.admin-section-head input { width:100%; }
  .admin-user,.admin-chapter { grid-template-columns:1fr; }.admin-user-actions { justify-content:stretch; }.admin-user-actions > * { flex:1 1 130px; }.admin-chapter select { width:100%; }
}
@media (max-width:430px) {
  .book-tile { min-height:215px;grid-template-columns:minmax(112px,38%) minmax(0,1fr); }
  .book-cover-compact { min-height:100%;padding:17px 12px; }.cover-meta { left:12px;bottom:14px; }
  .tile-body { padding:13px; }.tile-heading h2 { font-size:16px; }.tile-heading p { margin-bottom:12px;font-size:10px; }
  .reader-toolbar { align-items:flex-start; }.marker-row { gap:4px;flex-wrap:wrap;justify-content:flex-end; }.tool-icon { width:32px;height:32px; }.review-tool { min-height:34px;padding:0 8px;font-size:10px; }
  .chapter-strip-head { align-items:flex-start;flex-direction:column;gap:3px; }
  .reader-inline-nav { gap:7px; }.nav-button { min-height:44px;padding:0 10px;font-size:12px; }.nav-label { font-size:10px;text-align:center; }
  .voice-field-row { grid-template-columns:1fr; }.voice-refresh { width:100%; }
  .auth-brand { min-height:230px; }.auth-brand-top { max-width:62%;font-size:11px; }.auth-brand-copy { max-width:72%; }.auth-brand-copy h1 { font-size:26px; }.auth-trust span:nth-child(3) { display:none; }.auth-panel { padding:24px 18px 30px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important;transition:none!important;animation:none!important; } }