:root {
  --bg:#edf1ed; --paper:#fff; --paper-2:#f5f7f4; --ink:#24312d; --muted:#73807b; --line:#dbe2dd;
  --accent:#497c69; --accent-2:#dcebe4; --accent-dark:#315c4e; --red:#b94b43; --red-2:#f5e3e0;
  --amber:#a56d28; --amber-2:#f5ead7; --blue:#4c7888; --blue-2:#e0ebee; --purple:#755f90; --purple-2:#ebe5f1;
  --shadow:0 14px 40px rgba(35,54,47,.09); --on-accent:#fff; --toast-bg:#24312d; --toast-text:#fff; --sans:Inter,"Microsoft YaHei",system-ui,sans-serif;
  --serif:Georgia,"Times New Roman","Songti SC",serif; --mono:"Cascadia Mono",Consolas,monospace;
}
:root[data-theme="ocean"] { --bg:#eaf1f3;--paper:#fff;--paper-2:#f1f6f7;--ink:#22363c;--muted:#6e8288;--line:#d4e1e4;--accent:#397789;--accent-2:#dcebef;--accent-dark:#285c69;--blue:#397789; }
:root[data-theme="latte"] { --bg:#f2eee7;--paper:#fffdf9;--paper-2:#f7f2ea;--ink:#3e342c;--muted:#82746a;--line:#e7ddd0;--accent:#8a684e;--accent-2:#eee1d4;--accent-dark:#694b37; }
:root[data-theme="violet"] { --bg:#efedf3;--paper:#fff;--paper-2:#f6f3f8;--ink:#352f3d;--muted:#7a7084;--line:#e1dae7;--accent:#77628b;--accent-2:#e8e0ef;--accent-dark:#59466e; }
:root[data-theme="forest"] { --bg:#dfe8e1;--paper:#f8fbf8;--paper-2:#eaf1eb;--ink:#20352b;--muted:#687c70;--line:#cbd9cf;--accent:#356c50;--accent-2:#d2e5d9;--accent-dark:#244e39; }
:root[data-theme="dusk"] { --bg:#18252d;--paper:#21333d;--paper-2:#293e49;--ink:#edf4f4;--muted:#bac8cc;--line:#49606a;--accent:#72a9b6;--accent-2:#294854;--accent-dark:#b9dce3;--on-accent:#10252b;--toast-bg:#e8f3f5;--toast-text:#16292f;--red:#ff9188;--red-2:#563637;--amber:#efc07b;--amber-2:#51442f;--blue:#92c4cf;--blue-2:#31515c;--purple:#c6b0dd;--purple-2:#493f57;--shadow:0 16px 42px rgba(0,0,0,.25); }
:root[data-theme="cocoa"] { --bg:#251e1b;--paper:#332925;--paper-2:#40332e;--ink:#f5eee8;--muted:#d1c0b6;--line:#67544a;--accent:#c18b68;--accent-2:#513b30;--accent-dark:#f0c7a7;--on-accent:#2a1d17;--toast-bg:#f5eee8;--toast-text:#2c211d;--red:#ff9186;--red-2:#5b3935;--amber:#efc57f;--amber-2:#55472f;--blue:#a4c6ce;--blue-2:#395158;--purple:#d1b6de;--purple-2:#514057;--shadow:0 16px 42px rgba(0,0,0,.28); }
:root[data-theme="night"] { --bg:#111918;--paper:#1a2724;--paper-2:#23322e;--ink:#edf4f0;--muted:#b9c7c1;--line:#425850;--accent:#72b393;--accent-2:#29473a;--accent-dark:#bce2cf;--on-accent:#10251c;--toast-bg:#edf4f0;--toast-text:#14231e;--red:#ff9187;--red-2:#553634;--amber:#eec37c;--amber-2:#51462f;--blue:#96c3cd;--blue-2:#315058;--purple:#ccb3df;--purple-2:#493e56;--shadow:0 16px 42px rgba(0,0,0,.3); }

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--bg); font-family:var(--sans); font-size:14px; }
body.modal-open { overflow:hidden; }
button,input,textarea,select { color:inherit; font:inherit; }
button { -webkit-tap-highlight-color:transparent; }
input,textarea,select { width:100%; border:1px solid var(--line); border-radius:9px; background:var(--paper); padding:11px 12px; outline:none; font-size:13px; }
textarea { resize:vertical; line-height:1.55; }
input:focus,textarea:focus,select:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-2) 75%,transparent); }
input::placeholder,textarea::placeholder { color:var(--muted); opacity:.8; }
option { color:var(--ink); background:var(--paper); }
label { display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:13px; }
label small { font-weight:400; }
h1,h2,h3,h4,p { margin-top:0; }
.hidden { display:none !important; }
.muted { color:var(--muted); font-size:13px; }

/* A file:// page is a different storage origin. Keep it visibly blocked so an
   old tab cannot look like the live app and silently receive clicks. */
.origin-guard { display:none; }
html[data-runtime-origin="migration"] .origin-guard { position:fixed; z-index:1000; inset:0; display:grid; place-items:center; padding:24px; background:var(--bg); }
html[data-runtime-origin="migration"] .app-shell,
html[data-runtime-origin="migration"] #selection-toolbar,
html[data-runtime-origin="migration"] #library-selection-toolbar,
html[data-runtime-origin="migration"] #improvement-study-modal,
html[data-runtime-origin="migration"] #speaking-modal,
html[data-runtime-origin="migration"] #toast { display:none !important; }
.origin-guard-card { width:min(620px,100%); padding:30px; border:1px solid var(--line); border-radius:18px; background:var(--paper); box-shadow:var(--shadow); }
.origin-guard-card>span { color:var(--accent-dark); font-family:var(--mono); font-size:11px; letter-spacing:.12em; }
.origin-guard-card h1 { margin:12px 0 8px; font-family:var(--serif); font-size:32px; }
.origin-guard-card p { color:var(--muted); line-height:1.7; }
.origin-guard-card small { display:block; margin-top:18px; color:var(--muted); line-height:1.6; }
.runtime-diagnostic { position:fixed; z-index:130; right:20px; bottom:20px; display:grid; gap:5px; max-width:min(520px,calc(100vw - 40px)); padding:12px 15px; border:1px solid color-mix(in srgb,var(--red) 65%,var(--line)); border-radius:10px; color:var(--red); background:var(--paper); box-shadow:var(--shadow); font-size:12px; }
.runtime-diagnostic b { font-size:13px; }

.app-shell { display:grid; grid-template-columns:218px minmax(0,1fr); min-height:100vh; }
.sidebar { position:sticky; z-index:10; top:0; height:100vh; padding:25px 16px; border-right:1px solid var(--line); background:var(--paper); }
.brand { display:flex; align-items:center; gap:10px; padding:0 7px; }
.brand>span { display:grid; width:39px; height:39px; place-items:center; border-radius:11px; color:var(--on-accent); background:var(--accent); font-family:var(--serif); font-weight:700; }
.brand strong,.brand small { display:block; }
.brand strong { font-family:var(--serif); font-size:17px; }
.brand small { margin-top:2px; color:var(--muted); font-size:10px; letter-spacing:.06em; }
.nav { display:flex; flex-direction:column; gap:5px; margin-top:31px; }
.nav-item { position:relative; z-index:1; display:flex; align-items:center; gap:9px; width:100%; padding:11px 12px; border:0; border-radius:9px; color:var(--muted); background:transparent; text-align:left; cursor:pointer; pointer-events:auto; font-size:13px; }
.nav-item span { font-family:var(--mono); font-size:11px; }
.nav-item.active { color:var(--on-accent); background:var(--accent); }
.sidebar-note { position:absolute; right:17px; bottom:22px; left:17px; padding:12px; border-radius:9px; color:var(--muted); background:var(--paper-2); font-size:11px; line-height:1.6; }
.main { min-width:0; padding:31px 38px 70px; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:25px; }
.topbar h1 { margin:3px 0 0; font-family:var(--serif); font-size:32px; }
.eyebrow { color:var(--accent-dark); font-family:var(--mono); font-size:11px; letter-spacing:.12em; }
.topbar-actions { display:flex; align-items:center; gap:8px; }
.topbar-actions select { width:118px; }
.cloud-sync-indicator { border:1px solid var(--line); border-radius:999px; padding:7px 11px; background:var(--paper); color:var(--muted); font:inherit; font-size:12px; cursor:pointer; white-space:nowrap; }
.cloud-sync-indicator.ok { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); }
.cloud-sync-indicator.error { color:var(--red); border-color:color-mix(in srgb,var(--red) 45%,var(--line)); }
.page { display:none; }
.page.active { display:block; }
.card { padding:20px; border:1px solid var(--line); border-radius:15px; background:var(--paper); box-shadow:var(--shadow); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:42px; padding:9px 15px; border:1px solid transparent; border-radius:9px; cursor:pointer; font-size:13px; font-weight:700; }
.button.primary { color:var(--on-accent); background:var(--accent); }
.button.secondary { border-color:var(--accent); color:var(--accent-dark); background:var(--accent-2); }
.button.ghost { border-color:var(--line); color:var(--muted); background:var(--paper); }
.button.danger { border-color:var(--red); color:var(--red); background:var(--red-2); }
.button.full { width:100%; }
.button.text { padding-inline:4px; color:var(--muted); background:transparent; }
.action-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; }
.stack-actions { display:flex; flex-direction:column; align-items:flex-start; gap:9px; margin-top:16px; }
.file-button input { display:none; }
.step-tag { color:var(--accent-dark); font-family:var(--mono); font-size:11px; letter-spacing:.08em; }
.status-line { min-height:20px; margin-top:8px; color:var(--muted); font-size:12px; }
.status-line.ok { color:var(--accent); }
.status-line.error { color:var(--red); }
.status-line.warning { color:var(--amber,#a86b00); }
.toast { position:fixed; z-index:120; right:24px; bottom:24px; max-width:420px; padding:12px 16px; border:1px solid var(--line); border-radius:9px; color:var(--toast-text); background:var(--toast-bg); box-shadow:var(--shadow); opacity:0; transform:translateY(9px); pointer-events:none; transition:.18s; font-size:13px; }
.toast.show { opacity:1; transform:none; }

.workspace-intro,.review-hero { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 25px; margin-bottom:14px; border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line)); border-radius:16px; background:linear-gradient(135deg,var(--accent-2),var(--paper)); }
.workspace-intro h2,.review-hero h2 { margin:7px 0 5px; font-family:var(--serif); font-size:27px; }
.workspace-intro p,.review-hero p { margin:0; color:var(--muted); font-size:14px; }
.note-progress,.review-count { display:grid; flex:0 0 100px; height:100px; place-items:center; align-content:center; border:1px solid var(--line); border-radius:50%; background:var(--paper); }
.note-progress b,.review-count b { color:var(--accent); font-family:var(--serif); font-size:29px; line-height:1; }
.note-progress span,.review-count span,.note-progress small { margin-top:3px; color:var(--muted); font-size:10px; }
.note-progress i { color:var(--accent); font-style:normal; }
.workspace-layout { display:grid; grid-template-columns:minmax(360px,.78fr) minmax(0,1.22fr); gap:14px; align-items:start; }
.entry-panel { position:sticky; top:18px; max-height:calc(100vh - 36px); overflow:auto; }
.entry-source { padding-bottom:13px; border-bottom:1px solid var(--line); }
.entry-source-meta { margin-top:7px; color:var(--muted); font-family:var(--mono); font-size:11px; }
.record-edit-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; padding:10px 11px; border:1px solid color-mix(in srgb,var(--accent) 42%,var(--line)); border-radius:8px; background:color-mix(in srgb,var(--accent) 10%,var(--paper)); color:var(--ink); font-size:12px; }
.record-edit-bar button { flex:none; border:0; padding:3px 0; color:var(--accent); background:transparent; cursor:pointer; font:inherit; font-weight:700; }
.entry-tabs { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; margin:15px 0; }
.entry-tabs button { min-height:40px; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:var(--paper-2); cursor:pointer; font-size:12px; }
.entry-tabs button.active { border-color:var(--accent); color:var(--on-accent); background:var(--accent); }
.entry-form { display:none; }
.entry-form.active { display:flex; flex-direction:column; gap:10px; }
.form-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:3px; }
.form-heading h3 { margin:0; font-family:var(--serif); font-size:21px; }
.form-heading span { color:var(--muted); font-size:11px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ai-entry { padding-top:15px; margin-top:17px; border-top:1px solid var(--line); }
.ai-entry>div:first-child { display:flex; justify-content:space-between; gap:10px; margin-bottom:9px; }
.ai-entry strong { font-size:13px; }
.ai-entry span { color:var(--muted); font-size:11px; }
.ai-suggestion { padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--paper-2); }
.ai-suggestion h4 { margin:0 0 7px; font-family:var(--serif); }
.ai-suggestion-section { padding:8px 0; border-bottom:1px solid var(--line); }
.ai-suggestion-section:last-child { border-bottom:0; }
.ai-suggestion-section p { margin:4px 0; font-size:12px; line-height:1.65; }
.ai-suggestion-actions { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.mini-button { padding:7px 10px; border:1px solid var(--line); border-radius:7px; color:var(--muted); background:var(--paper); cursor:pointer; font-size:11px; }
.mini-button.primary-mini { border-color:var(--accent); color:var(--on-accent); background:var(--accent); }
.mini-button.delete { color:var(--red); }
.note-review { min-height:720px; }
.note-review-head { display:flex; justify-content:space-between; gap:20px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.note-review-head h2 { margin:5px 0 3px; font-family:var(--serif); }
.note-review-head p { margin:0; color:var(--muted); font-size:12px; }
.note-review-actions { display:flex; flex-wrap:wrap; align-items:flex-start; gap:7px; }
.selection-help { padding:10px 12px; margin:13px 0; border:1px dashed color-mix(in srgb,var(--accent) 45%,var(--line)); border-radius:8px; color:var(--ink); background:var(--accent-2); font-size:12px; line-height:1.55; }
.review-note-content { min-height:550px; padding:9px 6px; white-space:pre-wrap; overflow-wrap:anywhere; font-size:16px; line-height:1.9; user-select:text; }
.review-note-content::selection,.review-note-content *::selection { color:var(--ink); background:var(--amber-2); }
.selection-toolbar { position:fixed; z-index:90; display:flex; flex-wrap:wrap; gap:5px; max-width:min(820px,calc(100vw - 20px)); padding:7px; border:1px solid var(--line); border-radius:10px; background:var(--paper); box-shadow:0 13px 36px rgba(0,0,0,.28); }
.selection-toolbar button { padding:8px 10px; border:0; border-radius:7px; color:var(--ink); background:var(--paper-2); cursor:pointer; font-size:11px; }
.selection-toolbar button.direct-save { color:var(--accent-dark); background:var(--accent-2); font-weight:700; }
.selection-toolbar button:hover { color:var(--on-accent); background:var(--accent); }
.library-selection-toolbar { z-index:95; width:max-content; }
kbd { padding:1px 4px; border-radius:3px; color:var(--muted); background:var(--line); font-family:var(--mono); font-size:9px; }

.library-head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:14px; }
.library-head p { margin:0; color:var(--muted); font-size:14px; }
.library-tools { display:flex; gap:8px; min-width:min(510px,100%); }
.library-tools input { min-width:220px; }
.library-dashboard { display:flex; align-items:center; justify-content:space-between; gap:22px; padding:19px 21px; margin-bottom:14px; border:1px solid var(--line); border-radius:15px; background:var(--paper); box-shadow:var(--shadow); }
.library-dashboard p { margin:0 0 12px; color:var(--muted); font-size:14px; }
.library-stats { display:flex; flex-wrap:wrap; gap:8px; }
.library-stats span { padding:7px 10px; border-radius:8px; color:var(--muted); background:var(--paper-2); font-size:12px; }
.library-stats b { margin-right:3px; color:var(--ink); font-family:var(--mono); font-size:14px; }
.record-list { display:flex; flex-direction:column; gap:12px; }
.record-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; padding:18px 20px; border:1px solid var(--line); border-radius:13px; background:var(--paper); }
.record-card:hover { border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); }
.record-head { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-bottom:9px; }
.record-type,.record-source,.record-priority { padding:4px 8px; border:0; border-radius:999px; color:var(--muted); background:var(--paper-2); font-size:11px; }
.record-source { cursor:pointer; }
.record-priority.high { color:var(--amber); background:var(--amber-2); }
.mastery-select { width:auto; min-width:94px; min-height:30px; padding:4px 8px; border-radius:999px; color:var(--ink); background:var(--paper-2); font-size:11px; font-weight:700; }
.mastery-select.learning { color:var(--red); background:var(--red-2); }
.mastery-select.known { color:var(--blue); background:var(--blue-2); }
.mastery-select.mastered { color:var(--accent-dark); background:var(--accent-2); }
.mastery-select.fluent { color:var(--purple); background:var(--purple-2); }
.record-body { display:grid; gap:7px; }
.record-line { padding:11px 13px; border-left:3px solid var(--line); border-radius:0 7px 7px 0; background:var(--paper-2); font-size:14px; line-height:1.65; }
.record-line.original { border-color:var(--red); background:var(--red-2); }
.record-line.better,.record-line.correct { border-color:var(--accent); background:var(--accent-2); }
.record-line strong { display:block; margin-bottom:3px; font-size:11px; letter-spacing:.04em; }
.record-note { color:var(--muted); font-size:12px; }
.record-actions { display:flex; flex-direction:column; gap:6px; min-width:78px; }
.star-button { min-width:34px; min-height:32px; padding:5px 9px; border:1px solid var(--line); border-radius:7px; color:var(--muted); background:var(--paper); cursor:pointer; font-size:12px; font-weight:800; }
.star-button.active { border-color:var(--amber); color:var(--amber); background:var(--amber-2); box-shadow:0 0 0 2px color-mix(in srgb,var(--amber) 16%,transparent); }
.empty-state { padding:55px 20px; color:var(--muted); text-align:center; font-size:14px; }

.improvement-card { padding:18px; border:1px solid var(--line); border-radius:15px; background:var(--paper); box-shadow:0 5px 18px color-mix(in srgb,var(--ink) 5%,transparent); }
.improvement-card:hover { border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); }
.improvement-card-head { display:flex; align-items:center; justify-content:space-between; gap:14px; padding-bottom:13px; border-bottom:1px solid var(--line); }
.record-identity,.card-toolbar,.compact-actions,.compact-title { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.record-index { flex:none; color:var(--accent-dark); font-family:var(--mono); font-size:13px; font-weight:800; letter-spacing:.04em; }
.mastery-badge { display:inline-flex; align-items:center; min-height:24px; padding:3px 8px; border-radius:999px; color:var(--muted); background:var(--paper-2); font-size:11px; font-weight:700; }
.mastery-badge.known { color:var(--blue); background:var(--blue-2); }
.mastery-badge.mastered { color:var(--accent-dark); background:var(--accent-2); }
.mastery-badge.fluent { color:var(--purple); background:var(--purple-2); }
.mastery-badge.learning { color:var(--red); background:var(--red-2); }
.comparison-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:14px; }
.comparison-grid.count-1 { grid-template-columns:1fr; }
.comparison-grid.count-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.comparison-grid.count-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.display-options { position:relative; padding:7px 10px; border:1px solid var(--line); border-radius:10px; background:var(--panel); }
.display-options summary { cursor:pointer; white-space:nowrap; }
.display-options label { display:flex; align-items:center; gap:6px; margin-top:7px; white-space:nowrap; }
.speaking-columns { display:grid; grid-template-columns:minmax(240px,300px) minmax(0,1fr); gap:18px; margin-top:18px; align-items:start; }
.story-sidebar { position:sticky; top:20px; max-height:calc(100vh - 40px); overflow:auto; }
.story-list,.material-list { display:grid; gap:12px; }
.story-item { display:grid; grid-template-columns:1fr auto auto; gap:6px; align-items:center; padding:10px; border:1px solid var(--line); border-radius:12px; }
.story-item>button:first-child { display:grid; gap:3px; text-align:left; color:inherit; background:none; border:0; cursor:pointer; }
.story-item small,.story-item span { color:var(--muted); }
.material-card { display:grid; gap:12px; }
.material-topic-banner { display:flex; align-items:center; gap:10px; padding:10px 13px; border-left:5px solid var(--accent); border-radius:10px; background:var(--accent-2); color:var(--accent-dark); }
.material-topic-banner span { font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; opacity:.78; }
.material-topic-banner strong { font-size:18px; line-height:1.35; }
.material-card-head { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; }
.material-card-head h3 { margin:8px 0 4px; }
.material-card-head p,.material-preview { margin:0; color:var(--muted); white-space:pre-wrap; }
.material-tags { display:flex; flex-wrap:wrap; gap:6px; }
.material-tags span { padding:4px 8px; border-radius:999px; background:var(--soft); color:var(--muted); font-size:12px; }
.material-collapse-group { border:1px solid var(--line); border-radius:15px; background:var(--panel); overflow:hidden; }
.material-collapse-group>summary { display:flex; flex-wrap:wrap; align-items:center; gap:9px; padding:14px 16px; cursor:pointer; color:var(--ink); }
.material-collapse-group>summary::marker { color:var(--accent); }
.material-collapse-group>summary strong { font-size:17px; }
.material-collapse-group>summary span { color:var(--muted); }
.material-collapse-group>summary .repair-count-badge { margin-left:auto; }
.material-collapse-content { display:grid; gap:10px; padding:0 12px 12px; }
.material-collapse-content .material-card { box-shadow:none; }
.material-source-unit { overflow:hidden; border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line)); border-radius:18px; background:var(--paper); box-shadow:0 8px 28px color-mix(in srgb,var(--ink) 7%,transparent); }
.material-source-banner { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:16px; align-items:center; padding:16px 18px; border-bottom:1px solid var(--line); background:linear-gradient(135deg,var(--accent-2),var(--panel)); }
.material-source-banner>div { display:grid; gap:3px; }
.material-source-banner span { color:var(--muted); font-size:12px; }
.material-source-banner strong { color:var(--accent-dark); font-size:23px; }
.material-source-banner h2 { margin:0; font-size:20px; line-height:1.35; }
.material-source-parts { display:grid; gap:12px; padding:14px; }
.material-part-two { overflow:hidden; border:1px solid var(--line); border-radius:15px; background:var(--panel); }
.material-part-heading { display:flex; align-items:center; gap:10px; padding:14px 16px; }
.material-part-empty { padding:14px; border:1px dashed var(--line); border-radius:11px; color:var(--muted); text-align:center; }
.material-part-actions { display:flex; justify-content:flex-end; }
.material-add-question { border-style:dashed; }
.pending-material-card { border-color:var(--amber); background:color-mix(in srgb,var(--amber) 5%,var(--paper)); }
.speaking-form { display:grid; gap:14px; }
.speaking-form fieldset { border:1px solid var(--line); border-radius:12px; padding:12px; }
.speaking-editor-dialog { width:min(900px,96vw); max-height:92vh; overflow:auto; }
.material-detail { display:grid; gap:16px; }
.material-detail section,.outline-row { padding:12px; border:1px solid var(--line); border-radius:12px; }
.material-detail p { white-space:pre-wrap; line-height:1.65; }
.outline-row+ .outline-row { margin-top:8px; }
.import-summary { padding:12px; background:var(--soft); border-radius:12px; }
.import-preview { display:grid; gap:8px; max-height:58vh; overflow:auto; margin:14px 0; }
.import-item { display:flex; gap:10px; align-items:flex-start; padding:12px; border:1px solid var(--line); border-radius:12px; }
.import-item span { display:grid; gap:4px; }
.repair-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:end; margin:14px 0; }
.repair-toolbar label { display:grid; gap:5px; min-width:190px; color:var(--muted); font-size:12px; }
.repair-audit-list { display:grid; gap:12px; max-height:60vh; overflow:auto; padding-right:4px; }
.repair-source-group { border:1px solid var(--line); border-radius:14px; background:var(--paper); }
.repair-source-group[open] { box-shadow:0 8px 24px color-mix(in srgb,var(--ink) 8%,transparent); }
.repair-source-group>summary { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:13px 15px; cursor:pointer; }
.repair-source-group>summary span { color:var(--muted); }
.repair-source-body { display:grid; gap:14px; padding:0 15px 15px; }
.repair-reasons { margin:0; padding:11px 12px 11px 30px; border-radius:10px; color:var(--red); background:color-mix(in srgb,var(--red) 8%,var(--paper)); }
.repair-current-list,.repair-proposed-list { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.repair-current-list li,.repair-proposed-list li { padding:10px 12px; border:1px solid var(--line); border-radius:10px; }
.repair-current-list p,.repair-proposed-list p { margin:5px 0 0; white-space:pre-wrap; color:var(--muted); line-height:1.55; }
.repair-proposed-list li { border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); background:color-mix(in srgb,var(--accent) 5%,var(--paper)); }
.repair-result { display:grid; gap:10px; }
.repair-result-head { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; }
.repair-count-badge { padding:3px 8px; border-radius:999px; background:var(--soft); color:var(--muted); font-size:12px; }
.repair-error { padding:10px 12px; border-radius:10px; color:var(--red); background:color-mix(in srgb,var(--red) 8%,var(--paper)); white-space:pre-wrap; }
.repair-ok { padding:10px 12px; border-radius:10px; color:var(--accent-dark); background:color-mix(in srgb,var(--accent) 8%,var(--paper)); }
.import-material-item span { width:100%; }
.import-item small { color:var(--muted); }
.import-source-preview { display:grid; gap:6px; margin-top:10px; max-height:240px; overflow:auto; }
.import-source-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:8px; align-items:center; padding:8px 10px; border:1px solid var(--line); border-radius:9px; background:var(--panel); }
.import-source-row small { color:var(--muted); }
.import-source-group { display:grid; gap:8px; }
.import-source-group>summary { cursor:pointer; padding:9px 10px; background:var(--soft); border-radius:9px; }
.import-raw-source { margin:0 4px 8px; }
.import-raw-source>summary { cursor:pointer; color:var(--muted); font-size:12px; }
.import-raw-source pre { max-height:220px; overflow:auto; white-space:pre-wrap; word-break:break-word; padding:10px; background:var(--soft); border-radius:8px; font:12px/1.6 var(--mono); }
.import-material-fields { display:grid; gap:8px; flex:1; min-width:0; }
.import-material-fields label { display:grid; gap:4px; }
.import-check { display:flex; gap:5px; align-items:center; white-space:nowrap; padding-top:4px; }
.import-needs-review { border-color:var(--amber); }
.import-warning { color:var(--amber); white-space:pre-wrap; }
.training-stats { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin:14px 0; }
.training-stats>div { display:grid; gap:4px; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--panel); text-align:center; }
.training-stats b { font-size:22px; }
.training-stats .training-stat-wide { grid-column:span 3; text-align:left; }
.training-stats .training-stat-wide b { font-size:15px; line-height:1.5; }
.training-start { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.training-session { max-width:1100px; margin:0 auto; }
.training-session-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.training-session-head>div { display:flex; align-items:center; gap:12px; }
#training-timer { font-size:28px; font-variant-numeric:tabular-nums; }
.training-card { display:grid; gap:18px; }
.training-meta { display:flex; flex-wrap:wrap; gap:8px; color:var(--muted); }
.training-meta span { padding:5px 9px; border-radius:999px; background:var(--soft); }
#training-question { font-size:clamp(24px,4vw,40px); line-height:1.25; }
.training-hints { display:grid; gap:10px; }
.training-hint { padding:14px; border-left:4px solid var(--accent); background:var(--soft); border-radius:8px; }
.training-hint p { margin:7px 0 0; white-space:pre-wrap; font-size:18px; }
.training-reference { padding:16px; border:1px solid var(--accent); border-radius:14px; background:var(--soft); }
.reference-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.reference-grid p { white-space:pre-wrap; line-height:1.65; }
.training-self-review { display:grid; gap:14px; }
.rating-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.comparison-panel { min-width:0; min-height:116px; padding:14px 15px; border:1px solid var(--line); border-top:4px solid var(--line); border-radius:10px; background:var(--paper-2); }
.comparison-panel.original { border-top-color:var(--red); background:var(--red-2); }
.comparison-panel.corrected { border-top-color:var(--amber); background:var(--amber-2); }
.comparison-panel.better { border-top-color:var(--accent); background:var(--accent-2); }
.comparison-panel.empty { opacity:.72; background:var(--paper-2); }
.comparison-panel span { color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.04em; }
.comparison-panel p { margin:9px 0 0; color:var(--ink); font-size:15px; line-height:1.65; overflow-wrap:anywhere; }
.comparison-panel.empty p { color:var(--muted); font-size:13px; }

.compact-record { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:15px; padding:16px 18px; border:1px solid var(--line); border-radius:13px; background:var(--paper); }
.compact-record:hover { border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); }
.starred-record { border:2px solid var(--amber) !important; border-left-width:8px !important; background:linear-gradient(135deg,color-mix(in srgb,var(--amber-2) 70%,var(--paper)),var(--paper)) !important; box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 24%,transparent),0 10px 28px color-mix(in srgb,var(--amber) 22%,transparent) !important; }
.improvement-card.starred-record .record-index,.compact-record.starred-record .record-index { color:var(--amber); }
.compact-record-main { min-width:0; }
.compact-title strong { color:var(--ink); font-size:17px; line-height:1.45; overflow-wrap:anywhere; }
.compact-extra,.compact-example { margin:8px 0 0; font-size:13px; line-height:1.6; }
.compact-extra { color:var(--muted); }
.compact-example { padding-left:10px; border-left:3px solid var(--accent); color:var(--ink); }
.compact-record .record-source { display:inline-flex; margin-top:9px; padding-left:0; background:transparent; }
.compact-actions { justify-content:flex-end; }
.sentence-text { display:block; margin-top:9px; font-size:16px; line-height:1.7; }

.study-modal { position:fixed; z-index:110; inset:0; display:grid; place-items:center; padding:22px; background:rgba(5,12,10,.72); backdrop-filter:blur(5px); }
.study-dialog { width:min(760px,100%); max-height:calc(100vh - 44px); overflow:auto; padding:24px; border:1px solid var(--line); border-radius:18px; background:var(--paper); box-shadow:0 24px 80px rgba(0,0,0,.38); }
.study-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding-bottom:15px; border-bottom:1px solid var(--line); }
.study-head h2 { margin:5px 0 0; font-family:var(--serif); font-size:28px; }
.study-close { width:40px; height:40px; border:1px solid var(--line); border-radius:50%; color:var(--muted); background:var(--paper-2); cursor:pointer; font-size:24px; line-height:1; }
.study-card { padding-top:20px; }
.study-number { color:var(--accent-dark); font-family:var(--mono); font-size:13px; font-weight:800; }
.study-prompt { padding:23px; margin:12px 0 16px; border-left:5px solid var(--red); border-radius:12px; background:var(--red-2); }
.study-prompt span,.study-answer span { color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.05em; }
.study-prompt p { margin:10px 0 0; font-size:22px; line-height:1.65; }
.study-answer { display:grid; grid-template-columns:1fr; gap:10px; margin-top:16px; }
.study-answer>div { padding:17px; border:1px solid var(--line); border-top:4px solid var(--accent); border-radius:10px; background:var(--accent-2); }
.study-answer p { margin:8px 0 0; font-size:16px; line-height:1.65; }
.study-ratings { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:18px; }
.study-ratings button { min-height:48px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:var(--paper-2); cursor:pointer; font-size:13px; font-weight:800; }
.study-ratings button:nth-child(1) { color:var(--red); background:var(--red-2); }
.study-ratings button:nth-child(2) { color:var(--blue); background:var(--blue-2); }
.study-ratings button:nth-child(3) { color:var(--accent-dark); background:var(--accent-2); }
.study-ratings button:nth-child(4) { color:var(--purple); background:var(--purple-2); }
.study-finished { padding:60px 20px 35px; text-align:center; }
.study-finished b { display:block; font-family:var(--serif); font-size:30px; }
.study-finished p { margin:10px 0 20px; color:var(--muted); font-size:14px; }

.review-layout { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:14px; align-items:start; }
.review-list { display:flex; flex-direction:column; gap:10px; }
.review-card { padding:15px 17px; border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:11px; background:var(--paper); }
.review-card-head { display:flex; justify-content:space-between; gap:10px; margin-bottom:9px; color:var(--muted); font-size:12px; }
.review-card-question { font-size:15px; line-height:1.65; }
.review-answer { display:none; padding:11px 12px; margin-top:9px; border-radius:7px; color:var(--ink); background:var(--accent-2); font-size:14px; line-height:1.65; white-space:pre-wrap; }
.review-card.revealed .review-answer { display:block; }
.review-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.review-actions button { padding:8px 11px; border:1px solid var(--line); border-radius:7px; color:var(--ink); background:var(--paper-2); cursor:pointer; font-size:12px; }
.review-guide { position:sticky; top:18px; }
.review-guide h3 { font-family:var(--serif); }
.review-guide p { font-size:12px; line-height:1.55; }

.notes-layout { display:grid; grid-template-columns:minmax(360px,.78fr) minmax(0,1.22fr); gap:14px; align-items:start; }
.note-editor { position:sticky; top:18px; }
.note-editor>label { margin-top:10px; }
.note-list-tools { margin-bottom:10px; }
.note-list { display:flex; flex-direction:column; gap:9px; }
.note-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; padding:15px 17px; border:1px solid var(--line); border-radius:11px; background:var(--paper); }
.note-card.done { border-color:color-mix(in srgb,var(--accent) 70%,var(--line)); border-left:6px solid var(--accent); background:linear-gradient(135deg,var(--accent-2),var(--paper)); box-shadow:0 7px 22px color-mix(in srgb,var(--accent) 12%,transparent); }
.note-card h3 { margin:0 0 4px; font-family:var(--serif); font-size:17px; }
.note-meta { color:var(--muted); font-family:var(--mono); font-size:11px; }
.note-preview { margin:8px 0 0; color:var(--muted); font-size:13px; line-height:1.6; }
.note-status { align-self:start; padding:5px 9px; border-radius:999px; color:var(--amber); background:var(--amber-2); font-size:11px; }
.note-status.done { padding:7px 11px; border:1px solid var(--accent); color:var(--accent-dark); background:var(--accent-2); font-size:12px; font-weight:800; }
.note-status.reviewing { color:var(--blue); background:var(--blue-2); }

.settings-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr); gap:14px; align-items:start; }
.settings-grid .card>label { margin-top:10px; }
.security-note { padding:11px 12px; border:1px solid color-mix(in srgb,var(--amber) 35%,var(--line)); border-radius:8px; color:var(--ink); background:var(--amber-2); font-size:12px; line-height:1.6; }
.cloud-sync-card { grid-column:1 / -1; }
.cloud-sync-login-form { display:flex; align-items:flex-end; gap:12px; margin-top:12px; }
.cloud-sync-login-form label { flex:1; margin:0; }
.cloud-sync-meta { display:flex; flex-wrap:wrap; gap:14px; color:var(--muted); font-size:12px; }
.cloud-sync-choice { margin-top:14px; padding:13px; border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line)); border-radius:10px; background:var(--surface-soft,#f5f8f5); }
.cloud-sync-choice.error { border-color:color-mix(in srgb,var(--red) 45%,var(--line)); background:color-mix(in srgb,var(--red) 7%,var(--paper)); }
.cloud-sync-choice p { margin:7px 0 10px; font-size:13px; line-height:1.6; }
.cloud-sync-choice ul { margin:6px 0 10px 18px; color:var(--muted); font-size:12px; max-height:160px; overflow:auto; }
.cloud-sync-choice li { margin-bottom:8px; }
.cloud-sync-choice li strong,.cloud-sync-choice li small { display:block; }
.cloud-sync-choice li small { margin-top:3px; overflow-wrap:anywhere; }
.cloud-sync-history { width:100%; max-height:260px; overflow:auto; border-top:1px solid var(--line); padding-top:8px; }
.cloud-sync-history-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size:12px; }
.cloud-sync-history-row span { color:var(--muted); }
.cloud-sync-history-row button { min-height:32px; padding:5px 9px; }
.check-line { flex-direction:row; align-items:center; }
.check-line input { width:16px; min-height:16px; }
.data-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.data-stat { padding:12px; border-radius:9px; background:var(--paper-2); }
.data-stat b { display:block; font-family:var(--mono); font-size:19px; }
.data-stat span { color:var(--muted); font-size:11px; }
.pagination { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; padding:18px 4px 4px; color:var(--muted); font-size:12px; }
.pagination button,.pagination select,.pagination input { width:auto; min-height:34px; padding:7px 10px; }
.pagination input { width:76px; }
.pagination .page-summary { min-width:180px; text-align:center; }
.speaking-pagination { justify-content:flex-start; margin:8px 0; padding:10px 0; }
.speaking-pagination .pagination-pages { display:flex; align-items:center; gap:5px; }
.speaking-pagination .pagination-pages button { min-width:34px; padding-inline:8px; }
.speaking-pagination button.active { color:var(--paper); border-color:var(--accent-dark); background:var(--accent-dark); }
.pagination-ellipsis { padding:0 2px; color:var(--muted); }
.import-progress-panel { display:grid; gap:12px; margin-top:12px; padding:14px; border:1px solid var(--line); border-radius:13px; background:var(--paper-2); }
.import-progress-head { display:grid; gap:8px; }
.import-progress-head>div,.import-progress-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.import-progress-head span,.import-progress-meta { color:var(--muted); font-size:12px; }
.import-progress-head progress { width:100%; height:13px; accent-color:var(--accent); }
.import-progress-meta b { color:var(--ink); }
.import-current-batch { display:grid; gap:4px; padding:10px 12px; border-left:4px solid var(--accent); border-radius:9px; background:var(--accent-2); }
.import-current-batch span,.import-current-batch small { color:var(--muted); }
.import-batch-log-list { display:grid; gap:6px; max-height:310px; overflow:auto; }
.import-batch-log { border:1px solid var(--line); border-radius:9px; background:var(--panel); }
.import-batch-log>summary { display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; gap:7px; align-items:center; padding:8px 10px; cursor:pointer; list-style:none; }
.import-batch-log>summary::-webkit-details-marker { display:none; }
.import-batch-log>summary span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:12px; }
.import-batch-log>summary em { color:var(--muted); font-size:11px; font-style:normal; white-space:nowrap; }
.import-batch-icon { width:18px; text-align:center; color:var(--accent-dark); font-weight:900; }
.import-batch-log.error .import-batch-icon,.import-batch-log.error>summary em { color:var(--red); }
.import-batch-detail { display:grid; gap:5px; padding:0 10px 9px 35px; color:var(--muted); font-size:12px; }
.import-batch-items { color:var(--ink); line-height:1.5; }
.import-process-summary { margin:12px 0; border:1px solid var(--line); border-radius:11px; padding:8px 10px; background:var(--paper-2); }
.import-process-summary>summary { cursor:pointer; color:var(--accent-dark); font-weight:800; }
.import-process-summary .import-batch-log-list { margin-top:8px; }
.source-group { border:1px solid var(--line); border-radius:13px; background:color-mix(in srgb,var(--paper) 80%,transparent); }
.source-group>summary { padding:13px 16px; color:var(--accent-dark); cursor:pointer; font-weight:800; }
.source-group>.record-list { padding:0 10px 10px; }
.storage-meter { padding:13px; margin:12px 0; border-radius:10px; background:var(--paper-2); }
.storage-meter>div { display:flex; justify-content:space-between; gap:12px; }
.storage-meter progress { width:100%; height:12px; margin-top:9px; accent-color:var(--accent); }
.storage-meter .warning { color:var(--amber); }
.storage-meter .error { color:var(--red); }
.study-finished-actions { justify-content:center; }
.analysis-dashboard { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:12px; }
.analysis-dashboard h2 { margin:6px 0; font-family:var(--serif); font-size:26px; }
.analysis-dashboard p { margin:0; color:var(--muted); }
.analysis-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-width:min(520px,100%); }
.analysis-actions select { flex:1; min-width:240px; }
.analysis-tools { margin:12px 0; }
.analysis-progress { padding:10px 13px; color:var(--muted); font-size:12px; }
.analysis-list { display:flex; flex-direction:column; gap:12px; }
.analysis-card { padding:16px; border:1px solid var(--line); border-radius:13px; background:var(--paper); }
.analysis-card.accepted { border-left:6px solid var(--accent); }
.analysis-card.accepted textarea { opacity:.72; pointer-events:none; }
.analysis-card.ignored { opacity:.68; }
.analysis-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.analysis-card-head>div { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.analysis-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.analysis-panel { padding:12px; border:1px solid var(--line); border-radius:9px; background:var(--paper-2); }
.analysis-panel.original { border-top:4px solid var(--red); background:var(--red-2); }
.analysis-panel.corrected { border-top:4px solid var(--amber); background:var(--amber-2); }
.analysis-panel.better { border-top:4px solid var(--accent); background:var(--accent-2); }
.analysis-panel span { color:var(--muted); font-size:11px; font-weight:800; }
.analysis-panel p { margin:8px 0 0; line-height:1.6; white-space:pre-wrap; }
.analysis-panel textarea { margin-top:8px; min-height:92px; }
.analysis-issues { padding:10px 12px; margin:10px 0; border-radius:8px; background:var(--paper-2); }
.analysis-issues ul { margin:6px 0 0; padding-left:20px; }
.analysis-issues li { margin:4px 0; line-height:1.5; }
html[data-density="compact"] .improvement-card { padding:11px 13px; }
html[data-density="compact"] .comparison-panel { min-height:72px; padding:9px 11px; }
html[data-density="compact"] .comparison-panel p { margin-top:5px; font-size:13px; line-height:1.45; }
html[data-density="compact"] .compact-record { padding:10px 13px; }
html[data-density="compact"] .record-list { gap:7px; }
html[data-density="compact"] .compact-title strong,html[data-density="compact"] .sentence-text { font-size:14px; }

@media (max-width:1050px) {
  .workspace-layout,.notes-layout { grid-template-columns:minmax(330px,.9fr) minmax(0,1.1fr); }
  .main { padding:27px 25px 60px; }
}
@media (max-width:820px) {
  .app-shell { display:block; }
  .sidebar { position:sticky; z-index:60; top:0; width:100%; height:auto; padding:8px 9px; border-right:0; border-bottom:1px solid var(--line); }
  .brand,.sidebar-note { display:none; }
  .nav { flex-direction:row; gap:4px; margin:0; overflow-x:auto; scrollbar-width:none; }
  .nav-item { width:auto; flex:0 0 auto; padding:8px 10px; white-space:nowrap; font-size:10px; }
  .nav-item span { display:none; }
  .main { padding:20px 13px 55px; }
  .topbar { align-items:flex-start; flex-direction:column; gap:10px; }
  .topbar-actions { width:100%; flex-wrap:wrap; }
  .cloud-sync-login-form { align-items:stretch; flex-direction:column; }
  .workspace-layout,.notes-layout,.settings-grid,.review-layout { grid-template-columns:1fr; }
  .analysis-dashboard { align-items:flex-start; flex-direction:column; }
  .analysis-actions { min-width:0; width:100%; }
  .analysis-grid { grid-template-columns:1fr; }
  .entry-panel,.note-editor,.review-guide { position:static; max-height:none; }
  .note-review { min-height:500px; }
  .library-head { align-items:flex-start; flex-direction:column; }
  .library-dashboard { align-items:flex-start; flex-direction:column; }
  .library-tools { width:100%; min-width:0; flex-direction:column; }
  .record-card { grid-template-columns:1fr; }
  .record-actions { flex-direction:row; flex-wrap:wrap; }
  .comparison-grid { grid-template-columns:1fr; }
  .speaking-columns { grid-template-columns:1fr; }
  .story-sidebar { position:static; max-height:none; }
  .training-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .training-stats .training-stat-wide { grid-column:span 2; }
  .training-start,.material-card-head { align-items:stretch; flex-direction:column; }
  .material-source-banner { grid-template-columns:1fr; gap:8px; }
  .reference-grid,.rating-grid { grid-template-columns:1fr; }
  .compact-record { grid-template-columns:auto minmax(0,1fr); }
  .compact-actions { grid-column:2; justify-content:flex-start; }
}
@media (max-width:480px) {
  .workspace-intro,.review-hero { align-items:flex-start; flex-direction:column; padding:19px 17px; }
  .note-progress,.review-count { width:82px; height:82px; flex-basis:82px; }
  .form-row { grid-template-columns:1fr; }
  .note-review-head { flex-direction:column; }
  .selection-toolbar { right:8px; left:8px !important; justify-content:center; }
  .data-stats { grid-template-columns:1fr; }
  .improvement-card-head { align-items:flex-start; flex-direction:column; }
  .card-toolbar { width:100%; }
  .compact-record { grid-template-columns:1fr; }
  .compact-actions { grid-column:auto; }
  .study-modal { padding:10px; }
  .study-dialog { max-height:calc(100vh - 20px); padding:18px; }
  .study-answer { grid-template-columns:1fr; }
  .study-ratings { grid-template-columns:1fr 1fr; }
  .study-prompt p { font-size:18px; }
}

/* Speaking library trust and workflow additions */
.material-inbox { margin:14px 0 18px; padding:16px 18px; }
.material-inbox .form-heading { margin-bottom:8px; }
.material-inbox-counts { display:flex; flex-wrap:wrap; gap:9px; }
.inbox-count { display:flex; align-items:center; gap:8px; border:1px solid var(--line,#d9e0dc); background:var(--surface,#fff); border-radius:12px; padding:8px 12px; cursor:pointer; color:inherit; }
.inbox-count:hover { border-color:var(--accent,#558d75); transform:translateY(-1px); }
.inbox-count.active { border-color:var(--accent,#558d75); background:#e9f3ed; box-shadow:0 0 0 2px color-mix(in srgb,var(--accent,#558d75) 18%,transparent); }
.inbox-count b { font-size:18px; }
.inbox-count span { font-size:12px; color:var(--muted,#6e7d75); }
.material-layers { display:flex; flex-wrap:wrap; gap:6px; margin:9px 0 4px; }
.material-layers span { border-radius:999px; padding:4px 8px; font-size:11px; background:var(--surface-soft,#f2f6f3); color:var(--muted,#6e7d75); }
.material-layers .layer-original { color:#5d6d63; }
.material-layers .layer-personal { color:#386b58; background:#e7f3ec; }
.material-layers .layer-ai { color:#705d8e; background:#f1ecfa; }
.material-related { margin:7px 0; font-size:12px; color:var(--muted,#6e7d75); }
.material-related span { display:inline-block; margin:3px 4px 0 0; padding:3px 7px; border-radius:7px; background:var(--surface-soft,#f2f6f3); }
.material-confidence { margin:4px 0; font-size:12px; }
.pair-status { margin-left:auto; color:#356f58; font-size:11px; }
.material-topic-group { margin:14px 0; border:1px solid var(--line,#d9e0dc); border-radius:14px; background:color-mix(in srgb,var(--surface,#fff) 92%,var(--accent,#558d75)); }
.material-topic-group > summary { display:flex; align-items:center; gap:10px; padding:13px 15px; cursor:pointer; list-style:none; }
.material-topic-group > summary::-webkit-details-marker { display:none; }
.material-topic-group-body { padding:0 10px 10px; }
.material-topic-group-body .material-source-unit { margin-top:10px; }
.state-needs-review,.state-raw-only,.state-suspicious,.state-part-review,.state-pending { border-left:4px solid #d4934e; }
.note-status.warning { background:#fff1dc; color:#8b5a19; }
.warning-text { color:#9b651c; }
.ok-text { color:#2f7858; }
.editor-layer-note { margin:8px 0 12px; padding:9px 11px; border-radius:9px; background:#f4f0fb; color:#6c5a84; font-size:12px; }
.training-plan-summary { display:flex; flex-wrap:wrap; gap:12px; min-height:22px; margin:8px 0 12px; color:var(--muted,#6e7d75); font-size:13px; }
.grammar-radar { margin-top:16px; padding:17px 18px; }
.grammar-radar-list { display:grid; gap:9px; margin:11px 0; }
.grammar-radar-row { display:grid; grid-template-columns:minmax(90px,150px) minmax(100px,1fr) 34px; align-items:center; gap:10px; font-size:13px; }
.grammar-radar-row > div { height:8px; border-radius:999px; background:var(--surface-soft,#eef3ef); overflow:hidden; }
.grammar-radar-row i { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#6ba789,#d4a15f); }
.data-import-preview { margin-top:12px; }
.import-diff-card { padding:14px; border:1px solid var(--line,#d9e0dc); border-radius:12px; background:var(--surface-soft,#f7faf8); }
.import-diff-card table { width:100%; border-collapse:collapse; margin:10px 0; font-size:12px; }
.import-diff-card th,.import-diff-card td { padding:6px 8px; border-bottom:1px solid var(--line,#d9e0dc); text-align:left; }
.import-diff-card td.positive { color:#2d7957; }
.import-diff-card td.negative { color:#a34f45; }
.repair-evidence { margin-top:7px; padding:7px 9px; border:1px dashed var(--line,#d9e0dc); border-radius:8px; font-size:12px; }
.repair-evidence summary { cursor:pointer; color:#5d7180; }
.repair-evidence p { margin:5px 0; white-space:pre-wrap; }
.inbox-hidden { display:none !important; }
@media (max-width:680px) {
  .grammar-radar-row { grid-template-columns:90px minmax(80px,1fr) 28px; }
  .material-topic-group-body { padding:0 5px 8px; }
  .pair-status { width:100%; margin-left:0; }
}

/* IELTS overall band score calculator */
.band-calculator-intro { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 25px; margin-bottom:14px; border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line)); border-radius:16px; background:linear-gradient(135deg,var(--accent-2),var(--paper)); }
.band-calculator-intro h2 { margin:7px 0 5px; font-family:var(--serif); font-size:27px; }
.band-calculator-intro p { max-width:720px; margin:0; color:var(--muted); font-size:14px; line-height:1.65; }
.band-calculator-rule { display:grid; flex:0 0 auto; gap:4px; min-width:160px; padding:13px 15px; border:1px solid var(--line); border-radius:12px; background:var(--paper); }
.band-calculator-rule strong { margin-bottom:2px; color:var(--accent-dark); font-size:12px; }
.band-calculator-rule span { color:var(--muted); font-family:var(--mono); font-size:11px; }
.band-calculator { --band-listening:#5794ed; --band-reading:#89df8e; --band-writing:#f5b84f; --band-speaking:#f27f87; position:relative; overflow:hidden; padding:clamp(24px,4vw,44px); border:1px solid #292c2f; border-radius:18px; color:#f7f8f9; background:#101111; box-shadow:0 20px 55px rgba(0,0,0,.22); color-scheme:dark; }
.band-calculator::before { position:absolute; inset:0 0 auto; height:180px; content:""; pointer-events:none; background:radial-gradient(circle at 76% 0,rgba(68,119,194,.18),transparent 58%); }
.band-listening { --band-skill:var(--band-listening); }
.band-reading { --band-skill:var(--band-reading); }
.band-writing { --band-skill:var(--band-writing); }
.band-speaking { --band-skill:var(--band-speaking); }
.band-visual { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 132px; align-items:center; gap:clamp(28px,6vw,76px); max-width:820px; margin:0 auto; }
.band-chart { min-width:0; }
.band-chart-title { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:21px; }
.band-chart-title span { font-size:clamp(20px,2.6vw,30px); font-weight:500; letter-spacing:-.025em; }
.band-chart-title small { color:#92979c; font-size:11px; text-align:right; }
.band-chart-row { margin-top:11px; }
.band-chart-label { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:5px; color:#f7f8f9; font-size:12px; font-weight:800; }
.band-chart-label output { color:var(--band-skill); font-family:var(--mono); }
.band-chart-track { height:31px; overflow:hidden; border-radius:4px; background:#202224; }
.band-chart-track i { display:block; width:66.667%; height:100%; border-radius:4px; background:var(--band-skill); transition:width .16s ease; }
.band-overall-card { display:grid; width:132px; min-height:132px; place-items:center; align-content:center; padding:14px; border:1px solid rgba(255,255,255,.06); border-radius:15px; background:linear-gradient(145deg,#244d86,#1c3761); box-shadow:0 16px 34px rgba(0,0,0,.3); text-align:center; }
.band-overall-card span,.band-overall-card small { color:#e5efff; font-size:9px; font-weight:900; letter-spacing:.14em; }
.band-overall-card output { margin:3px 0; color:#fff; font-size:42px; font-weight:500; line-height:1; }
.band-rounding-note { max-width:820px; margin:38px auto 0; color:#c4c7ca; font-size:11px; font-style:italic; line-height:1.6; }
.band-control-summary { display:grid; place-items:center; margin:76px 0 34px; text-align:center; }
.band-control-summary>span { font-size:10px; font-weight:900; letter-spacing:.06em; }
.band-control-summary strong { margin-top:3px; font-family:var(--mono); font-size:19px; }
.band-summary-metrics { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 10px; margin-top:7px; }
.band-summary-metrics span { padding:5px 8px; border:1px solid #2b2e30; border-radius:999px; color:#92979c; background:#171819; font-size:10px; }
.band-summary-metrics b { margin-left:3px; color:#f2f4f5; font-family:var(--mono); font-size:11px; }
.band-controls { display:grid; grid-template-columns:1fr 1fr; gap:13px 34px; max-width:820px; margin:0 auto; }
.band-score-control { display:grid; grid-template-columns:116px minmax(100px,1fr) 76px; align-items:center; gap:14px; color:#f0f2f3; font-size:13px; }
.band-score-control>span { font-weight:700; white-space:nowrap; }
.band-score-control output { display:grid; min-height:48px; place-items:center; border:1px solid #252729; border-radius:14px; color:#fff; background:#18191a; font-family:var(--mono); font-size:14px; }
.band-score-slider[type="range"] { --score-progress:66.667%; appearance:none; -webkit-appearance:none; width:100%; height:8px; min-height:8px; padding:0; border:0; border-radius:999px; outline:none; background:linear-gradient(90deg,var(--band-skill) 0 var(--score-progress),#323436 var(--score-progress) 100%); box-shadow:none; cursor:pointer; }
.band-score-slider[type="range"]:focus { border:0; box-shadow:none; }
.band-score-slider[type="range"]:focus-visible { outline:3px solid rgba(255,255,255,.25); outline-offset:6px; }
.band-score-slider[type="range"]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:18px; height:24px; border:2px solid #fff; border-radius:7px; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.35); }
.band-score-slider[type="range"]::-moz-range-thumb { width:15px; height:21px; border:2px solid #fff; border-radius:7px; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.35); }
.band-calculator-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; max-width:820px; margin:32px auto 0; padding:15px 18px; border:1px solid #26282a; border-radius:13px; background:#18191a; }
.band-calculator-footer p { margin:0; color:#b8bdc0; font-size:12px; line-height:1.55; }
.band-reset-button { flex:none; min-height:38px; padding:8px 13px; border:1px solid #3a3d40; border-radius:9px; color:#e7e9ea; background:#202224; cursor:pointer; font-size:11px; font-weight:800; }
.band-reset-button:hover { border-color:#697078; background:#292c2f; }

@media (max-width:1050px) {
  .band-score-control { grid-template-columns:104px minmax(90px,1fr) 66px; gap:10px; }
}
@media (max-width:820px) {
  .band-calculator-intro { align-items:flex-start; }
  .band-controls { grid-template-columns:1fr; }
  .band-score-control { grid-template-columns:124px minmax(110px,1fr) 76px; }
}
@media (max-width:620px) {
  .band-calculator-intro { flex-direction:column; padding:19px 17px; }
  .band-calculator-rule { width:100%; }
  .band-visual { grid-template-columns:1fr; }
  .band-overall-card { justify-self:center; }
  .band-chart-title { align-items:flex-start; flex-direction:column; }
  .band-chart-title small { text-align:left; }
  .band-control-summary { margin-top:54px; }
  .band-calculator-footer { align-items:stretch; flex-direction:column; }
  .band-reset-button { width:100%; }
}
@media (max-width:440px) {
  .band-calculator { padding:22px 16px; }
  .band-score-control { grid-template-columns:minmax(0,1fr) 68px; gap:8px 12px; }
  .band-score-control>span { grid-column:1 / -1; }
  .band-rounding-note { margin-top:28px; }
}

.band-detail-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr); gap:14px; margin-top:14px; align-items:start; }
.band-detail-card { min-width:0; }
.band-detail-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:16px; }
.band-detail-heading h3 { margin:6px 0 5px; font-family:var(--serif); font-size:23px; }
.band-detail-heading p { max-width:620px; margin:0; color:var(--muted); font-size:12px; line-height:1.6; }
.band-detail-heading>strong { display:grid; flex:0 0 82px; min-height:82px; place-items:center; border-radius:15px; color:var(--on-accent); background:var(--accent); font-family:var(--mono); font-size:25px; }
.band-converter-controls { display:grid; grid-template-columns:minmax(170px,1fr) 120px auto; align-items:end; gap:10px; }
.band-converter-controls .button { white-space:nowrap; }
.band-converter-result { min-height:22px; margin:14px 0 8px; color:var(--ink); font-size:13px; font-weight:700; line-height:1.55; }
.band-table-note { margin-bottom:12px; padding:10px 12px; border:1px solid color-mix(in srgb,var(--amber) 38%,var(--line)); border-radius:9px; color:var(--muted); background:var(--amber-2); font-size:11px; line-height:1.6; }
.band-table-scroll { max-width:100%; overflow:auto; border:1px solid var(--line); border-radius:11px; background:var(--paper); }
.band-conversion-table-scroll { max-height:470px; }
.band-rounding-table-scroll { max-height:515px; scroll-behavior:smooth; }
.band-reference-table { width:100%; border-collapse:separate; border-spacing:0; font-size:12px; text-align:center; }
.band-reference-table th,.band-reference-table td { min-width:74px; padding:9px 10px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); white-space:nowrap; }
.band-reference-table th:last-child,.band-reference-table td:last-child { border-right:0; }
.band-reference-table tbody tr:last-child td { border-bottom:0; }
.band-reference-table thead { position:sticky; z-index:2; top:0; }
.band-reference-table th { color:var(--accent-dark); background:var(--paper-2); font-size:11px; font-weight:900; }
.band-reference-table thead tr+tr th { top:35px; color:var(--muted); }
.band-reference-table tbody tr:nth-child(even) td { background:color-mix(in srgb,var(--paper-2) 60%,var(--paper)); }
.band-reference-table tbody tr.current td { color:var(--on-accent); background:var(--accent); font-weight:900; }
.band-current-breakdown { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
.band-current-breakdown>div { display:grid; min-height:72px; place-items:center; align-content:center; padding:10px; border:1px solid var(--line); border-radius:11px; background:var(--paper-2); text-align:center; }
.band-current-breakdown span { color:var(--muted); font-size:10px; }
.band-current-breakdown strong { margin-top:4px; color:var(--accent-dark); font-family:var(--mono); font-size:18px; }

@media (max-width:1120px) {
  .band-detail-grid { grid-template-columns:1fr; }
}
@media (max-width:680px) {
  .band-converter-controls { grid-template-columns:1fr 110px; }
  .band-converter-controls .button { grid-column:1 / -1; }
  .band-detail-heading { align-items:stretch; flex-direction:column; }
  .band-detail-heading>strong { width:82px; }
}
@media (max-width:440px) {
  .band-converter-controls { grid-template-columns:1fr; }
  .band-converter-controls .button { grid-column:auto; }
  .band-current-breakdown { grid-template-columns:1fr; }
  .band-current-breakdown>div { min-height:58px; }
}