/* Mnemo prototype — design tokens from SPEC §13. Light + dark via [data-theme]. */
:root {
  --window:#f5f5f5; --card:#fff; --border:#e0e0e0; --divider:#f0f0f0; --inset:#fafafa;
  --input-border:#d0d0d0; --blue:#306bec; --blue-hover:#2558c8;
  --blue-tint:#eef4fe; --blue-chip:#e3edfd; --blue-chip-border:#c9dcf8; --blue-dark:#2a5aa8;
  --amber-bg:#fdecc8; --amber-underline:#e6a817; --amber-text:#5c430e;
  --red-bg:#fde3e3; --red-text:#9a3a3a;
  --neutral-bg:#ececec; --neutral-text:#404040;
  --green:#2e7d43; --warn-bg:#fdf6e3; --warn-border:#f2e3b3; --warn-text:#b08a3e;
  --t1:#202020; --t2:#404040; --t3:#6a6a6a; --muted:#8a8a8a; --faint:#a5a5a5;
  --mascot:#F4813F;
}
[data-theme="dark"] {
  --window:#1e1f22; --card:#26282e; --border:#33363e; --divider:#2c2f36; --inset:#22242a;
  --input-border:#3a3d45; --blue-tint:#22304a; --blue-chip:#25344f; --blue-chip-border:#33456a; --blue-dark:#9bbcf5;
  --amber-bg:#4a3d1e; --amber-text:#e7c67a; --red-bg:#4a2727; --red-text:#e79999;
  --neutral-bg:#33363e; --neutral-text:#c8cad0;
  --green:#6fce8b; --warn-bg:#3a331d; --warn-border:#544a2a; --warn-text:#d8b566;
  --t1:#e8e6e1; --t2:#c8cad0; --t3:#9aa0ab; --muted:#8b8e97; --faint:#5c5f68;
}

* { box-sizing:border-box; }
body { margin:0; background:var(--window); color:var(--t1);
  font:13px/1.5 system-ui,sans-serif; }
a { color:var(--blue); text-decoration:none; }
.mono { font-family:ui-monospace,Menlo,monospace; }

/* --- shell / top bar --- */
.topbar { display:flex; align-items:center; gap:18px; background:var(--card);
  border-bottom:1px solid var(--border); padding:10px 18px; position:sticky; top:0; z-index:5; }
.brand { display:flex; align-items:center; gap:8px; font-weight:600; font-size:13px; }
.brandlogo { height:24px; width:auto; display:block; border-radius:4px; }
.tabs { display:flex; gap:16px; }
.tab { font-size:12px; font-weight:500; color:var(--t3); padding:6px 2px;
  border-bottom:2px solid transparent; }
.tab.active { color:var(--blue); border-bottom-color:var(--blue); }
.tab:hover { color:var(--t1); }
.spacer { flex:1; }
.rightinfo { font-size:11px; color:var(--t3); }
.themebtn { border:1px solid var(--input-border); background:var(--card); color:var(--t2);
  border-radius:4px; padding:4px 9px; cursor:pointer; font-size:13px; }
.themebtn:hover { background:var(--divider); }
.navind { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600;
  color:var(--t3); padding:3px 10px; border:1px solid var(--border); border-radius:12px; }
.navind:hover { filter:brightness(1.06); }
.navind .dot { width:8px; height:8px; border-radius:50%; display:inline-block; flex:none;
  background:var(--faint); }
.navind.on { color:var(--green); border-color:var(--green); }
.navind.on .dot { background:var(--green); box-shadow:0 0 5px var(--green); }
.navind.off { color:var(--warn-text); border-color:var(--warn-border); }
.navind.off .dot { background:var(--amber-underline); }
.navind.checking { color:var(--t3); }
.navind.checking .dot { background:var(--muted); animation:navpulse 1s ease-in-out infinite; }
@keyframes navpulse { 0%,100% { opacity:.35; } 50% { opacity:1; } }
.savedtoast { position:fixed; bottom:18px; right:18px; z-index:30; background:var(--green);
  color:#fff; padding:8px 14px; border-radius:6px; font-size:12px; font-weight:600;
  box-shadow:0 2px 10px rgba(0,0,0,.2); pointer-events:none; animation:savedfade 1.9s ease forwards; }
@keyframes savedfade { 0%,55% { opacity:1; } 100% { opacity:0; } }

.page { max-width:960px; margin:0 auto; padding:22px 18px 60px; }

/* --- cards / layout --- */
.card { background:var(--card); border:1px solid var(--border); border-radius:6px; }
.pad { padding:14px 16px; }
.grid2 { display:grid; grid-template-columns:1fr 320px; gap:16px; align-items:start; }
.grid3 { display:grid; grid-template-columns:250px minmax(0,1fr) 300px; gap:16px; align-items:start; }
.page.wide { max-width:1220px; }
@media (max-width:1080px) { .grid3 { grid-template-columns:1fr; } }
.grid2audio { display:grid; grid-template-columns:300px 1fr; gap:16px; align-items:start; }
.label { font:600 11px system-ui; color:var(--muted); text-transform:uppercase;
  letter-spacing:.04em; margin-bottom:10px; }
.row { display:flex; align-items:center; gap:8px; }
.between { display:flex; align-items:center; justify-content:space-between; }
.muted { color:var(--muted); } .t3 { color:var(--t3); } .faint { color:var(--faint); }
.fs11 { font-size:11px; } .fs12 { font-size:12px; }

/* --- buttons --- */
.btn { border:1px solid var(--input-border); background:var(--card); color:var(--t2);
  border-radius:4px; padding:6px 12px; font:500 12px system-ui; cursor:pointer; }
.btn:hover { background:var(--divider); }
.btn-primary { background:var(--blue); border-color:var(--blue); color:#fff; }
.btn-primary:hover { background:var(--blue-hover); }
.btn.on { background:var(--blue); border-color:var(--blue); color:#fff; }
.btn-lg { padding:10px 16px; font-size:13px; width:100%; }

/* --- struggle pool --- */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.stats2 { grid-template-columns:repeat(2,1fr); }
.stat { background:var(--inset); border:1px solid var(--border); border-radius:6px;
  padding:12px; text-align:center; }
.stat .n { font-size:22px; font-weight:700; }
.stat .l { font-size:11px; color:var(--t3); margin-top:2px; }

.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { padding:5px 10px; border-radius:5px; font-size:13px; cursor:default;
  background:var(--neutral-bg); color:var(--neutral-text); }
.chip small { font-size:10px; opacity:.7; }
.chip-amber { background:var(--amber-bg); color:var(--amber-text); }
.chip-red { background:var(--red-bg); color:var(--red-text); }
.chip-neutral { background:var(--neutral-bg); color:var(--neutral-text); }
.chip-blue { background:var(--blue-chip); color:var(--blue-dark);
  border:1px solid var(--blue-chip-border); }

/* --- word panel (story) --- */
.panel-row { display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:10px 0; border-top:1px solid var(--divider); }
.panel-row:first-child { border-top:none; }
.panel-row.new { background:var(--blue-tint); margin:0 -16px; padding:10px 16px;
  border-color:transparent; }
.panel-row.known { opacity:.55; }
.pw { font-size:15px; font-weight:600; }
.pr { color:var(--t3); font-size:12px; margin-left:6px; font-weight:400; }
.pg { font-size:12px; color:var(--t2); }
.pstatus { font-size:11px; color:var(--muted); }

/* --- story text --- */
.story-text { font-size:17px; line-height:2; color:var(--t1); }
.w-struggle { background:var(--amber-bg); border-bottom:2px solid var(--amber-underline); }
.ktok { transition:background-color .1s linear, color .1s linear; }
.story-text.clickable .ktok { cursor:pointer; }
.kspeak { background:#ffd43b; color:#1a1a1a; border-radius:2px; }
.ratesel { width:auto; padding:3px 6px; font-size:11px; }
.cursor { display:inline-block; width:2px; height:1.05em; vertical-align:-2px; margin-left:1px;
  background:var(--blue); animation:blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }

/* hover tooltip (reading · meaning) on story words and struggle chips */
.wtip { position:relative; cursor:help; }
.wtip:hover::after { content:attr(data-tip); position:absolute; left:50%; bottom:100%;
  transform:translateX(-50%); margin-bottom:7px; white-space:nowrap; background:var(--t1);
  color:var(--card); padding:4px 9px; border-radius:5px; font:400 12px system-ui;
  pointer-events:none; z-index:20; box-shadow:0 2px 10px rgba(0,0,0,.28); }
.wtip:hover::before { content:''; position:absolute; left:50%; bottom:100%;
  transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--t1); z-index:20; }
.w-new { background:var(--blue-chip); border-bottom:2px dotted var(--blue); }
/* interleaved sentence + per-sentence translation (display toggled inline via JS) */
.spara { margin:0 0 6px; }
.spara .zh { display:inline; }
.spara .tr { font-size:13px; line-height:1.5; color:var(--t3);
  margin:2px 0 10px; padding-left:10px; border-left:2px solid var(--divider); }
.legend { display:flex; gap:14px; margin-top:14px; font-size:11px; color:var(--t3); }
.legend .sw { display:inline-block; width:10px; height:10px; border-radius:2px;
  margin-right:5px; vertical-align:-1px; }

/* --- forms --- */
input[type=text], input[type=password], input[type=number], select { width:100%;
  border:1px solid var(--input-border); background:var(--card); color:var(--t1);
  border-radius:4px; padding:6px 10px; font:12px system-ui; }
.field { margin-bottom:14px; }
.field > span { display:block; font-size:12px; color:var(--t3); margin-bottom:5px; }
.seg { display:flex; border:1px solid var(--input-border); border-radius:4px;
  overflow:hidden; }
.seg label, .seg a { flex:1; text-align:center; padding:6px 14px; font:500 11px system-ui;
  cursor:pointer; color:var(--t3); }
.seg input { display:none; }
.seg label:has(input:checked), .seg label.on, .seg a.on { background:var(--blue); color:#fff; }

/* key/value grid used by the Model + TTS cards (mockup 2e / 4b) */
.kv { display:grid; grid-template-columns:auto 1fr; gap:8px 10px; align-items:center;
  font-size:12px; }
.kv > span { color:var(--t3); }
.kv .val { border:1px solid var(--input-border); border-radius:4px; padding:5px 10px;
  background:var(--card); color:var(--t1); }
.kv input, .kv select { padding:5px 10px; }
.kv .ro { background:var(--inset); color:var(--t2); font:11px ui-monospace,monospace; }
.stack { display:flex; flex-direction:column; gap:12px; }
.stepper { display:inline-flex; border:1px solid var(--input-border); border-radius:4px; overflow:hidden; }
.stepper a, .stepper span { padding:5px 14px; font:500 13px system-ui; color:var(--t2); }
.stepper a:hover { background:var(--divider); }
.stepper span { min-width:34px; text-align:center; color:var(--t1);
  border-left:1px solid var(--input-border); border-right:1px solid var(--input-border); }
.testrow { display:flex; gap:8px; align-items:center; margin-top:10px; }
.btn-sm { padding:4px 10px; font-size:11px; }
.help { display:flex; align-items:center; gap:6px; margin-top:10px; padding-top:9px;
  border-top:1px solid var(--divider); font:500 11px system-ui; color:var(--blue);
  cursor:pointer; }
.helpbody { font:11px/1.6 system-ui; color:var(--t3); background:var(--inset);
  border:1px solid var(--divider); border-radius:5px; padding:9px 11px; margin-top:7px; }
.step { display:flex; gap:8px; margin-top:6px; }
.step .num { flex:none; width:16px; height:16px; background:var(--blue-chip);
  color:var(--blue-dark); border-radius:50%; font:600 10px/16px system-ui; text-align:center; }

.deckpick { display:flex; flex-wrap:wrap; gap:6px; }
.deckpick label { display:inline-flex; align-items:center; gap:5px; font-size:12px;
  padding:4px 10px; border:1px solid var(--blue-chip-border); background:var(--blue-chip);
  color:var(--blue-dark); border-radius:14px; cursor:pointer; }
.deckpick input { accent-color:var(--blue); }

/* --- banners --- */
.banner { border-radius:6px; padding:12px 14px; font-size:12px; margin-bottom:16px; }
.banner-warn { background:var(--warn-bg); border:1px solid var(--warn-border); color:var(--warn-text); }
.banner-info { background:var(--blue-tint); border:1px solid var(--blue-chip-border); color:var(--blue-dark); }
.ok { color:var(--green); } .err { color:var(--red-text); }

/* --- bubble / mascot aside --- */
.bubble { position:relative; background:var(--card); border:1px solid var(--border);
  border-radius:10px; padding:9px 12px; font-size:12px; color:var(--t2); }

/* --- sentence cards --- */
.sent { border-top:1px solid var(--divider); padding:14px 0; }
.sent:first-child { border-top:none; }
.sent .s { font-size:16px; line-height:1.8; }
.sent .rt { font-size:12px; color:var(--t3); margin:4px 0 8px; }

.empty { text-align:center; color:var(--muted); padding:60px 20px; }
.empty .big { font-size:40px; margin-bottom:10px; }

/* --- collection table --- */
.ctable { width:100%; border-collapse:collapse; font-size:12px; }
.ctable th { text-align:left; font:600 11px system-ui; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em; padding:7px 8px;
  border-bottom:1px solid var(--border); white-space:nowrap; }
.ctable td { padding:8px; border-bottom:1px solid var(--divider); vertical-align:middle; }
.ctable tbody tr:hover td { background:var(--inset); }
.ctable .w { font-size:15px; font-weight:600; white-space:nowrap; }
.ctable .num { text-align:right; color:var(--t3); white-space:nowrap; }
.ctable .chip { font-size:11px; padding:3px 8px; white-space:nowrap; }

.forgot-btn.done { color:var(--muted); border-color:var(--border); background:var(--inset);
  cursor:default; font-weight:400; }
.forgot-dim { opacity:.55; }
.forgot-dim:hover td { background:transparent !important; }

/* --- audio progress --- */
.bar { height:6px; background:var(--divider); border-radius:3px; overflow:hidden; }
.bar > i { display:block; height:100%; background:var(--blue); }
.proc { display:flex; justify-content:space-between; font-size:12px; padding:7px 0;
  border-top:1px solid var(--divider); }