/* ATOM · Editorial edition. Shared palette for the complete learning experience. */
:root {
  color-scheme:dark;
  --paper:#171918; --card:#202321; --card-raised:#272a26;
  --ink:#f1ecdf; --muted:#b4b4a8; --gold:#d4b77b; --gold-bright:#e5cc98;
  --border:#3d4038; --gold-line:#766647; --success:#a7c8af; --error:#efb0a0;
  --shadow:0 18px 56px #00000024;
  --serif:Georgia,'Times New Roman','Songti SC','STSong','Noto Serif CJK SC',serif;
  font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;
  color:var(--ink); background:var(--paper); font-synthesis:none;
}
* { box-sizing:border-box; }
body { margin:0; min-width:280px; }
button,input { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.5; }
button:focus-visible,input:focus-visible,a:focus-visible,summary:focus-visible { outline:2px solid var(--gold-bright); outline-offset:5px; }
::selection { background:var(--gold); color:var(--paper); }
a { color:var(--gold); }
.app-shell { min-height:100vh; }
.topbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:22px; padding:22px clamp(24px,4vw,64px); border-bottom:1px solid var(--border); }
.brand { display:inline-flex; align-items:center; flex:none; text-decoration:none; }
.brand img { display:block; width:214px; height:58px; object-fit:contain; }
.topbar-tools { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.topbar-label,.progress-caption { display:block; color:var(--muted); font-size:10px; white-space:nowrap; }
.test-entry,.all-words-entry { min-height:44px; padding:10px 13px; border:1px solid var(--border); border-radius:4px; background:transparent; color:var(--ink); font-size:12px; font-weight:600; white-space:nowrap; }
.test-entry:hover,.all-words-entry:hover { border-color:var(--gold-line); background:var(--card-raised); }
.test-entry.active { background:var(--gold); border-color:var(--gold); color:var(--paper); }
.demo-account { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:11px; white-space:nowrap; }
.demo-avatar { display:grid; place-items:center; width:28px; height:28px; border:1px solid var(--gold-line); border-radius:50%; color:var(--gold); font-size:11px; }
.catalog-picker { position:relative; }
.catalog-picker summary { display:flex; align-items:center; gap:10px; min-width:184px; min-height:44px; padding:9px 12px; border:1px solid var(--border); border-radius:4px; cursor:pointer; list-style:none; }
.catalog-picker summary::-webkit-details-marker { display:none; }
.catalog-picker summary strong { font-size:12px; font-weight:500; white-space:nowrap; }
.catalog-picker summary > span:last-child { margin-left:auto; color:var(--gold); }
.catalog-picker[open] summary { border-color:var(--gold); }
.catalog-options { position:absolute; top:calc(100% + 8px); left:0; width:248px; padding:6px; border:1px solid var(--gold-line); border-radius:4px; background:var(--card); box-shadow:var(--shadow); z-index:3; }
.catalog-option { width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px; border:0; border-radius:2px; background:transparent; text-align:left; color:var(--ink); font-size:13px; }
.catalog-option.selected { color:var(--gold); background:#d4b77b12; }
.catalog-option:disabled { color:var(--muted); opacity:.65; cursor:default; }
.catalog-option small { font-size:10px; color:var(--muted); white-space:nowrap; }
.all-progress { display:flex; flex-direction:column; gap:3px; min-width:72px; padding-left:16px; border-left:1px solid var(--border); }
.all-progress strong { color:var(--gold); font-size:15px; line-height:1.2; font-variant-numeric:tabular-nums; }
.mini-track { display:block; width:72px; height:2px; background:var(--border); overflow:hidden; margin-top:3px; }
.mini-track span { display:block; height:100%; background:var(--gold); }
.main { width:100%; max-width:1140px; min-width:0; padding:36px 32px 64px; margin:0 auto; }
.edition-heading { max-width:840px; margin:0 auto 28px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.edition-kicker { display:block; color:var(--gold); font-size:10px; letter-spacing:.24em; margin-bottom:10px; }
.edition-title { margin:0; font-family:var(--serif); font-size:clamp(32px,4vw,48px); line-height:1.18; font-weight:400; letter-spacing:-.035em; }
.edition-note { color:var(--muted); font-size:11px; line-height:1.7; text-align:right; }
.edition-note span { display:block; color:var(--gold); font-size:9px; letter-spacing:.16em; }
.study-layout,.test-layout { max-width:840px; margin:0 auto; }
.study-content { min-width:0; }
.study-card,.test-card { background:var(--card); border:1px solid var(--border); border-top:2px solid var(--gold-line); border-radius:6px; box-shadow:var(--shadow); padding:clamp(24px,4vw,46px); }
.study-card { min-height:490px; }
.study-card h2 { margin:14px 0 8px; font-family:var(--serif); font-weight:400; font-size:clamp(27px,3vw,36px); line-height:1.4; }
.study-card .subtext { color:var(--muted); font-size:13px; line-height:1.75; }
.study-step-heading { display:flex; align-items:center; gap:18px; }
.study-step-number { color:var(--gold); font-family:var(--serif); font-size:48px; font-weight:400; letter-spacing:-.04em; line-height:1; }
.study-card .study-step-heading h2 { margin:0; font-size:clamp(23px,3vw,30px); }
.step-label,.test-kicker { color:var(--gold); font-size:11px; letter-spacing:.14em; line-height:1.7; }
.audio-stage { min-height:218px; display:grid; place-items:center; }
.audio-play { width:106px; height:106px; border-radius:50%; border:1px solid var(--gold); background:#d4b77b0a; color:var(--gold); font-size:29px; box-shadow:0 0 0 12px #d4b77b05,0 0 0 13px #d4b77b14; display:grid; place-items:center; padding-left:10px; transition:background .2s,box-shadow .2s; }
.audio-play:hover { background:#d4b77b1c; box-shadow:0 0 0 12px #d4b77b0a,0 0 0 13px #d4b77b38; }
.audio-caption { text-align:center; color:var(--muted); font-size:11px; margin-top:25px; letter-spacing:.04em; }
.btn { border:1px solid transparent; border-radius:4px; min-height:46px; padding:11px 20px; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600; font-size:13px; transition:background .15s,border-color .15s; text-decoration:none; }
.btn-primary { background:var(--gold); color:var(--paper); }
.btn-primary:hover:not(:disabled) { background:var(--gold-bright); }
.btn-outline,.btn-soft,.btn-light { border-color:var(--gold-line); color:var(--gold); background:transparent; }
.btn-outline:hover,.btn-soft:hover,.btn-light:hover { background:#d4b77b12; }
.btn-text { background:transparent; color:var(--muted); padding:9px 7px; }
.btn-text:hover { color:var(--ink); }
.btn-danger { background:#efb0a015; color:var(--error); }
.input-row { display:flex; gap:9px; }
.field { width:100%; flex:1; min-width:0; min-height:52px; border:1px solid #686b5f; background:var(--paper); color:var(--ink); border-radius:4px; padding:14px 16px; font-size:14px; }
.field::placeholder { color:var(--muted); opacity:1; }
.field:focus { border-color:var(--gold); box-shadow:0 0 0 3px #d4b77b12; }
.stage-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:22px; }
.stage-actions .btn { min-width:136px; }
.stage-actions .btn-text { min-width:auto; }
.word-reveal { text-align:center; padding:34px 10px 28px; }
.word-reveal .word { font-family:var(--serif); font-size:clamp(40px,6vw,68px); font-weight:400; letter-spacing:-.035em; overflow-wrap:anywhere; }
.word-reveal .pron { color:var(--muted); margin-top:10px; font-size:14px; }
.answer { padding:17px 19px; background:#a7c8af08; border:1px solid #a7c8af30; border-radius:4px; margin-top:19px; font-size:14px; line-height:1.8; }
.answer b { color:var(--success); }
.answer.needs-work { background:#d4b77b08; border-color:var(--gold-line); }
.answer.needs-work b { color:var(--gold-bright); }
.answer-definition { color:var(--ink); margin-top:5px; font-size:15px; }
.answer-insight { color:var(--muted); margin-top:8px; }
.scene-visual { width:100%; max-width:420px; aspect-ratio:1; height:auto; border-radius:3px; background:var(--paper); object-fit:contain; display:block; margin:24px auto; border:1px solid var(--border); }
.scene-source { margin:-8px 0 4px; color:var(--muted); font-size:11px; line-height:1.5; overflow-wrap:anywhere; }
.scene-source a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
.scene-english { font-family:var(--serif); font-size:22px; line-height:1.7; margin:15px 0 10px; }
.scene-translation { font-size:14px; color:var(--muted); line-height:1.8; }
.round-progress { margin:22px auto 0; padding:20px 0; border-top:1px solid var(--border); }
.round-progress-heading,.all-words-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.round-progress-heading strong { font-size:12px; font-weight:500; }
.round-progress-heading span,.all-words-heading span { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.round-steps { display:flex; flex-wrap:wrap; gap:8px; margin-top:15px; }
.round-step { width:31px; height:31px; display:grid; place-items:center; border:1px solid var(--border); border-radius:50%; color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.round-step.active { border-color:var(--gold); color:var(--gold); background:#d4b77b10; }
.round-step.done,.round-step.known { border-color:var(--gold); background:var(--gold); color:var(--paper); }
.all-words-panel { max-width:1080px; margin:0 auto 28px; padding:24px; background:var(--card); border:1px solid var(--border); border-radius:6px; }
.all-words-heading strong { font-family:var(--serif); font-size:23px; font-weight:400; }
.all-words-legend { display:flex; flex-wrap:wrap; gap:18px; margin:12px 0 20px; color:var(--muted); font-size:11px; }
.all-words-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.all-word-row { display:flex; align-items:center; gap:6px; min-width:0; min-height:48px; padding:6px 8px; border:1px solid var(--border); border-radius:3px; }
.all-word-number { flex:none; width:25px; color:var(--muted); font-size:10px; font-variant-numeric:tabular-nums; }
.all-word-text { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.word-status { flex:none; display:grid; place-items:center; width:32px; height:32px; border:1px solid #757968; border-radius:50%; background:transparent; color:var(--gold); font-size:12px; font-weight:700; }
.word-status.known { background:var(--gold); border-color:var(--gold); color:var(--paper); }
.word-status.learned { background:#d4b77b12; border-color:var(--gold); }
.word-status:hover { outline:2px solid var(--gold-line); outline-offset:2px; }
.word-clear { flex:none; width:28px; height:36px; padding:0; border:0; background:transparent; color:var(--muted); font-size:18px; }
.word-clear:hover { color:var(--error); }
.all-words-paging { display:flex; align-items:center; justify-content:center; gap:18px; margin-top:20px; font-size:12px; color:var(--muted); }
.all-words-paging button { min-height:44px; padding:8px 12px; border:1px solid var(--border); border-radius:4px; background:transparent; color:var(--gold); }
.test-card { min-height:385px; }
.test-kicker { margin:0 0 14px; }
.test-card h1 { margin:0 0 18px; font-family:var(--serif); font-weight:400; font-size:clamp(44px,7vw,76px); line-height:1.12; letter-spacing:-.035em; overflow-wrap:anywhere; }
.test-card h1 span { color:var(--muted); font-size:.5em; }
.test-muted { color:var(--muted); font-size:14px; line-height:1.9; }
.test-intro .btn { margin-top:28px; }
.test-question-head { display:flex; justify-content:space-between; gap:12px; color:var(--gold); font-size:12px; margin-bottom:30px; }
.test-question-head span:last-child { color:var(--muted); }
.test-progress-label { display:flex; justify-content:space-between; gap:12px; font-size:12px; }
.test-progress-label strong { font-weight:500; }
.test-progress-label span { color:var(--muted); font-variant-numeric:tabular-nums; }
.test-track { height:4px; overflow:hidden; background:var(--border); margin:12px 0 34px; }
.test-track span { display:block; height:100%; background:var(--gold); transition:width .35s ease; }
.test-pron { min-height:20px; margin:-5px 0 22px; color:var(--muted); }
.test-play { min-height:44px; border:1px solid var(--gold-line); border-radius:4px; background:transparent; color:var(--gold); padding:12px 16px; margin:0 0 28px; }
.test-play:hover { background:#d4b77b12; }
.test-play span { font-size:13px; margin-left:7px; }
.test-question .input-row { max-width:640px; }
.test-history,.test-live-feedback { margin-top:24px; padding:24px clamp(18px,4vw,34px); background:var(--card); border:1px solid var(--border); border-radius:6px; }
.test-history h2,.test-live-heading h2 { margin:0; font-family:var(--serif); font-size:24px; font-weight:400; }
.test-live-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.test-live-heading > span { color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.test-live-feedback ol { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:26px; list-style:none; padding:0; margin:17px 0 0; }
.test-live-row { display:grid; grid-template-columns:28px minmax(0,1fr); align-items:start; gap:10px; padding:14px 0; border-top:1px solid var(--border); }
.test-live-icon { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#a7c8af14; color:var(--success); font-size:17px; }
.test-live-row.incorrect .test-live-icon { background:#efb0a014; color:var(--error); }
.test-live-row.uncertain .test-live-icon,.test-live-row.skipped .test-live-icon { background:#d4b77b14; color:var(--gold); }
.test-live-copy { min-width:0; }
.test-live-copy .test-live-heading { align-items:baseline; flex-wrap:wrap; gap:4px 10px; }
.test-live-copy .test-live-heading strong { font-family:var(--serif); font-size:20px; font-weight:400; overflow-wrap:anywhere; }
.test-live-result,.test-mark { color:var(--success); font-size:12px; white-space:nowrap; }
.test-live-result.incorrect,.test-mark.incorrect { color:var(--error); }
.test-live-result.uncertain,.test-live-result.skipped,.test-mark.uncertain { color:var(--gold); }
.test-live-copy p { margin:7px 0 0; font-size:13px; line-height:1.7; }
.test-live-meaning { color:var(--ink); }
.test-live-answer { color:var(--muted); overflow-wrap:anywhere; }
.test-history-row { border-top:1px solid var(--border); margin-top:12px; }
.test-history-row summary { list-style:none; display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:16px 0; cursor:pointer; font-size:13px; }
.test-history-row summary::-webkit-details-marker { display:none; }
.test-history-row summary strong { margin-left:auto; color:var(--gold); }
.test-history-row summary small { color:var(--muted); }
.test-history-words { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px 20px; margin:0 0 17px; padding:0; }
.test-history-words li { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:12px; padding:6px 0; overflow-wrap:anywhere; }
.test-save-error { color:var(--error); font-size:13px; }
.test-save-error button { border:0; background:none; color:inherit; text-decoration:underline; }
.finish-card { text-align:center; display:grid; place-items:center; }
.finish-art { color:var(--gold); font-size:64px; margin:12px 0; }
.finish-title { font-family:var(--serif); font-size:34px; }
.finish-card .stage-actions { justify-content:center; }
.toast { position:fixed; right:24px; bottom:24px; background:var(--ink); color:var(--paper); padding:14px 18px; border:1px solid var(--gold); border-radius:4px; box-shadow:var(--shadow); font-size:13px; opacity:0; transform:translateY(15px); transition:.2s; pointer-events:none; z-index:10; max-width:min(340px,calc(100vw - 32px)); }
.toast.visible { opacity:1; transform:translateY(0); }
@media (max-width:1100px) { .topbar { justify-content:center; }.topbar-tools { justify-content:center; } }
@media (max-width:820px) { .all-words-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:640px) {
  .topbar { flex-direction:column; align-items:stretch; gap:18px; padding:18px 20px; }
  .brand { align-self:center; }.brand img { width:194px; height:52px; }
  .topbar-tools { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
  .catalog-picker { min-width:0; grid-column:1/-1; }
  .catalog-picker summary { min-width:0; }.catalog-options { width:min(248px,calc(100vw - 40px)); }
  .test-entry,.all-words-entry { width:100%; }.demo-account { justify-self:end; }
  .all-progress { min-width:0; padding-left:12px; flex-direction:row; flex-wrap:wrap; gap:4px 9px; align-items:baseline; }
  .all-progress .topbar-label { width:100%; }.mini-track { width:100%; }
  .main { padding:26px 16px 40px; }.edition-heading { margin-bottom:22px; gap:10px; }
  .edition-kicker { font-size:9px; letter-spacing:.15em; }.edition-note { font-size:10px; }.edition-note span { font-size:8px; }
  .study-card,.test-card { padding:25px 22px; min-height:unset; }.audio-stage { min-height:210px; }
  .stage-actions .btn { flex:1; }.stage-actions .btn-text { flex:0 1 auto; }
  .round-steps { gap:7px; }.round-step { width:28px; height:28px; }
  .all-words-panel { padding:19px 13px; }.all-words-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .all-words-heading strong { font-size:20px; }.word-status { width:40px; height:40px; }.word-clear { width:36px; height:40px; }
  .test-card { min-height:340px; }.test-question-head { font-size:11px; }.test-history-words { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .test-live-feedback ol { grid-template-columns:1fr; }.test-live-heading h2,.test-history h2 { font-size:22px; }
  .scene-english { font-size:21px; }.field { font-size:16px; }.toast { right:16px; bottom:16px; }
}
@media (max-width:430px) { .all-words-grid { grid-template-columns:1fr; }.all-word-row { gap:8px; padding:5px 9px; }.all-word-number { width:28px; }.edition-title { font-size:34px; } }
@media (max-width:350px) { .main { padding-left:12px; padding-right:12px; }.study-card,.test-card { padding:23px 18px; }.edition-title { font-size:30px; }.edition-note { max-width:94px; }.study-step-number { font-size:42px; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }