*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#0a0a0f;--paper:#f5f0e8;--gold:#c9a84c;--gold-light:#e8d5a3;
  --ink-muted:#4a4a5a;--ink-faint:#9a9aaa;
  --surface:#fffef9;--border:#ddd8cc;
  --success:#16a34a;--success-bg:#f0fdf4;
  --danger:#dc2626;--danger-bg:#fef2f2;
  --warn:#d97706;--warn-bg:#fffbeb;
  --review-bg:#1e1e2e;--review-accent:#7c6cf2;
  --radius:10px;
  --ff-serif:'Playfair Display',Georgia,serif;
  --ff-sans:'Noto Serif SC','PingFang SC','Microsoft YaHei',serif;
  --ff-mono:'Space Mono','Courier New',monospace;
  --max-w:680px;
}
html{font-size:16px;}
body{background:var(--paper);color:var(--ink);font-family:var(--ff-sans);min-height:100vh;-webkit-font-smoothing:antialiased;}
.screen{display:none;}.screen.active{display:block;}

/* ── HEADER ── */
.app-header{background:var(--ink);padding:.875rem 1.25rem;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:30;max-width:100%;}
.header-back{color:var(--gold);background:none;border:none;font-family:var(--ff-mono);font-size:13px;cursor:pointer;padding:4px 8px;border-radius:4px;white-space:nowrap;}
.header-back:hover{background:rgba(201,168,76,.15)}
.header-title{font-family:var(--ff-serif);color:var(--paper);font-size:18px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.header-badge{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:3px;flex-shrink:0;}
.badge-cet4{background:#dbeafe;color:#1d4ed8;}.badge-cet6{background:#fce7f3;color:#be185d;}
.badge-ielts{background:#dcfce7;color:#15803d;}.badge-ielts-pure{background:#ede9fe;color:#6d28d9;}

/* ── PAGE WRAPPER ── */
.page-wrap{max-width:var(--max-w);margin:0 auto;padding:1.5rem 1.25rem;}
@media(min-width:720px){.page-wrap{padding:2rem 2rem;}}
.practice-page{max-width:var(--max-w);margin:0 auto;padding:1.25rem 1.25rem;}
@media(min-width:720px){.practice-page{padding:1.75rem 2rem;}}

/* ── BUTTONS ── */
.btn{display:block;width:100%;border:none;border-radius:var(--radius);padding:14px;font-family:var(--ff-serif);font-size:16px;cursor:pointer;transition:all .2s;letter-spacing:.03em;text-align:center;}
.btn-primary{background:var(--ink);color:var(--paper);}
.btn-primary:hover{background:#2a2a35;transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.15);}
.btn-secondary{background:transparent;color:var(--ink);border:1.5px solid var(--border);font-size:14px;margin-top:.75rem;}
.btn-secondary:hover{border-color:var(--gold);background:#fffbf0;}
.btn-icon{background:none;border:1.5px solid var(--border);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;flex-shrink:0;transition:all .15s;}
.btn-icon:hover{border-color:var(--gold);background:#fffbf0;}

/* ── PROGRESS ── */
.progress-wrap{display:flex;align-items:center;gap:12px;margin-bottom:1.5rem;}
.progress-bar{flex:1;height:4px;background:var(--border);border-radius:2px;overflow:hidden;}
.progress-fill{height:100%;background:var(--gold);border-radius:2px;transition:width .4s ease;}
.progress-label{font-family:var(--ff-mono);font-size:11px;color:var(--ink-faint);white-space:nowrap;}

/* ── PHASE BADGES ── */
.phase-badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:20px;margin-bottom:.875rem;}
.phase-l1{background:#dbeafe;color:#1d4ed8;}.phase-cloud{background:#fef9c3;color:#92400e;}
.phase-l2{background:#fce7f3;color:#be185d;}.phase-stress{background:#ede9fe;color:#6d28d9;}
.phase-dictation{background:#dcfce7;color:#15803d;}

/* ── WORD HEADER ── */
.word-display{font-family:var(--ff-serif);font-size:clamp(26px,5vw,42px);font-weight:700;color:var(--ink);margin-bottom:.25rem;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.word-ipa{font-family:var(--ff-mono);font-size:14px;color:var(--ink-muted);margin-bottom:1.25rem;}

/* ── CARD ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.125rem;}
.sentence-box{font-size:15px;line-height:1.8;margin-bottom:1.25rem;}
.blank{font-weight:700;border-bottom:2px solid var(--gold);padding:0 4px;}
.sent-source{font-size:11px;color:var(--ink-faint);font-family:var(--ff-mono);}

/* ── OPTIONS ── */
.opts-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:1rem;}
@media(max-width:400px){.opts-grid{grid-template-columns:1fr;}}
.opt{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);padding:.875rem 1rem;font-size:14px;color:var(--ink);cursor:pointer;text-align:left;transition:all .15s;font-family:var(--ff-sans);line-height:1.4;}
.opt:hover:not(:disabled){border-color:var(--gold);background:#fffbf0;}
.opt.correct{background:var(--success-bg);border-color:#86efac;color:var(--success);}
.opt.wrong{background:var(--danger-bg);border-color:#fca5a5;color:var(--danger);}

/* ── FEEDBACK ── */
.feedback{border-radius:var(--radius);padding:.875rem 1rem;font-size:14px;line-height:1.6;margin-bottom:1rem;display:none;border-left:3px solid;}
.feedback.show{display:block;}
.feedback.ok{background:var(--success-bg);border-color:var(--success);color:var(--success);}
.feedback.miss{background:var(--danger-bg);border-color:var(--danger);color:var(--danger);}
.next-btn{background:var(--ink);color:var(--paper);border:none;border-radius:var(--radius);padding:12px 24px;font-family:var(--ff-serif);font-size:15px;cursor:pointer;display:none;transition:all .15s;margin-top:.25rem;}
.next-btn.show{display:inline-block;}.next-btn:hover{background:#2a2a35;}

/* ── WORD CLOUD ── */
.cloud-container{position:relative;width:100%;padding-bottom:65%;margin:.75rem 0;}
.cloud-svg{position:absolute;top:0;left:0;width:100%;height:100%;}
.cloud-hint{font-size:12px;color:var(--ink-faint);text-align:center;}

/* ── L2 ── */
.l2-opts{display:flex;flex-direction:column;gap:8px;margin-bottom:1rem;}
.l2-opt{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);padding:.875rem 1rem;font-size:14px;color:var(--ink);cursor:pointer;text-align:left;transition:all .15s;line-height:1.6;}
.l2-opt:hover:not(:disabled){border-color:var(--gold);background:#fffbf0;}
.l2-opt.wrong{background:var(--danger-bg);border-color:#fca5a5;color:var(--danger);}
.l2-opt.correct{background:var(--success-bg);border-color:#86efac;color:var(--success);}
.l2-opt.neutral{background:var(--surface);border-color:var(--border);color:var(--ink);opacity:.6;}
.expand-btn{background:none;border:1px dashed var(--border);border-radius:6px;padding:6px 12px;font-size:12px;color:var(--ink-faint);cursor:pointer;margin-top:.5rem;}
.expand-btn:hover{border-color:var(--gold);color:var(--ink);}
.l2-exp{display:none;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.875rem 1rem;font-size:13px;line-height:1.7;color:var(--ink-muted);margin-top:.5rem;}
.l2-exp.show{display:block;}

/* ── STRESS ── */
.stress-opts{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:1rem;justify-content:center;}
.stress-opt{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);padding:.875rem 1.25rem;font-size:16px;font-family:var(--ff-mono);color:var(--ink);cursor:pointer;transition:all .15s;text-align:center;min-width:80px;}
.stress-opt:hover:not(:disabled){border-color:var(--gold);background:#fffbf0;}
.stress-opt.correct{background:var(--success-bg);border-color:#86efac;color:var(--success);}
.stress-opt.wrong{background:var(--danger-bg);border-color:#fca5a5;color:var(--danger);}
.stress-question{font-size:14px;color:var(--ink-muted);text-align:center;margin-bottom:1rem;}

/* ── DICTATION ── */
.char-row{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;margin:1.25rem 0 1rem;min-height:52px;align-items:flex-end;}
.char-box{width:clamp(22px,6vw,34px);height:42px;border-bottom:2px solid var(--border);display:flex;align-items:flex-end;justify-content:center;padding-bottom:3px;font-size:clamp(15px,4vw,22px);font-family:var(--ff-mono);font-weight:700;transition:color .08s,border-color .08s;color:var(--ink-faint);}
.char-box.match{color:#16a34a;border-color:#16a34a;}.char-box.mismatch{color:var(--danger);border-color:var(--danger);}
.char-box.cursor{border-color:var(--gold);border-width:3px;}
.spell-input{width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--radius);font-size:18px;font-family:var(--ff-mono);background:var(--surface);color:var(--ink);letter-spacing:3px;outline:none;transition:border-color .2s;text-align:center;}
.spell-input:focus{border-color:var(--gold);}.spell-input.all-correct{border-color:var(--success);background:var(--success-bg);}
.skip-link{display:block;text-align:center;font-size:12px;color:var(--ink-faint);margin-top:.75rem;cursor:pointer;text-decoration:underline;}
.big-speak-btn{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--ink);color:var(--paper);border:none;border-radius:var(--radius);padding:12px 24px;font-size:15px;cursor:pointer;margin:0 auto 1.25rem;font-family:var(--ff-serif);}
.big-speak-btn:hover{background:#2a2a35;}

/* ── REVIEW BANNER ── */
.review-banner{background:var(--review-bg);color:#e2e8f0;border-radius:12px;padding:1.25rem 1.5rem;margin-bottom:1.5rem;display:flex;align-items:center;gap:12px;}
.review-banner-icon{font-size:28px;flex-shrink:0;}
.review-banner h3{font-family:var(--ff-serif);font-size:18px;color:var(--review-accent);margin-bottom:2px;}
.review-banner p{font-size:12px;color:#94a3b8;}

/* ── MATCHING GAME ── */
.match-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:1.25rem;}
.match-col{display:flex;flex-direction:column;gap:8px;}
.match-item{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);padding:.75rem 1rem;font-size:14px;cursor:pointer;transition:all .15s;text-align:center;line-height:1.4;min-height:52px;display:flex;align-items:center;justify-content:center;}
.match-item:hover:not(.matched):not(.wrong-shake){border-color:var(--gold);background:#fffbf0;}
.match-item.selected{border-color:var(--review-accent);background:#ede9fe;color:#4c1d95;}
.match-item.matched{background:var(--success-bg);border-color:#86efac;color:var(--success);cursor:default;}
.match-item.wrong-shake{background:var(--danger-bg);border-color:#fca5a5;animation:shake .3s;}
.match-en{font-family:var(--ff-mono);font-weight:700;font-size:13px;}.match-zh{font-family:var(--ff-sans);}
.match-score{font-size:13px;color:var(--ink-muted);text-align:center;margin-bottom:1rem;}

/* ── AUDIO MATCH GAME ── */
.audio-match-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:1.25rem;align-items:start;}
.audio-col{display:flex;flex-direction:column;gap:8px;}
.audio-play-btn{
  background:var(--review-bg);border:1.5px solid #3a3a5c;
  border-radius:var(--radius);
  height:64px;
  color:#e2e8f0;cursor:pointer;transition:all .15s;
  display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;
  padding:0 1rem;
}
.audio-play-btn:hover:not(.used){border-color:var(--review-accent);background:#2a2a3e;}
.audio-play-btn.playing{border-color:var(--review-accent);background:#2a2a3e;}
.audio-play-btn.used{opacity:.4;cursor:default;}
.audio-play-icon{font-size:20px;flex-shrink:0;}
.audio-play-label{font-family:var(--ff-mono);font-size:11px;color:#94a3b8;}
.audio-zh-btn{
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--radius);
  height:64px;
  font-size:14px;cursor:pointer;transition:all .15s;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-sans);padding:0 .75rem;text-align:center;
}
.audio-zh-btn:hover:not(.matched):not(.wrong-shake){border-color:var(--gold);background:#fffbf0;}
.audio-zh-btn.matched{background:var(--success-bg);border-color:#86efac;color:var(--success);cursor:default;}
.audio-zh-btn.wrong-shake{background:var(--danger-bg);border-color:#fca5a5;animation:shake .3s;}
.audio-match-status{font-size:13px;color:var(--review-accent);font-family:var(--ff-mono);text-align:center;margin-bottom:1rem;}

@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* ── DECK / GROUP / PREVIEW ── */
.deck-page{padding:2rem 1.25rem;max-width:var(--max-w);margin:0 auto;}
@media(min-width:720px){.deck-page{padding:2.5rem 2rem;}}
.deck-page h2{font-family:var(--ff-serif);font-size:26px;margin-bottom:.5rem;}
.deck-page>p{font-size:13px;color:var(--ink-muted);margin-bottom:2rem;line-height:1.6;}
.deck-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(min-width:560px){.deck-grid{grid-template-columns:repeat(4,1fr);}}
.deck-card{background:var(--surface);border:1.5px solid var(--border);border-radius:12px;padding:1.25rem 1rem;cursor:pointer;transition:all .2s;}
.deck-card:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.08);}
.deck-card-icon{font-size:28px;margin-bottom:.75rem;}
.deck-card-name{font-family:var(--ff-serif);font-size:15px;font-weight:700;margin-bottom:.25rem;}
.deck-card-count{font-family:var(--ff-mono);font-size:11px;color:var(--ink-faint);}
.deck-card-desc{font-size:12px;color:var(--ink-muted);margin-top:.5rem;line-height:1.5;}
.group-page{padding:1.5rem 1.25rem;max-width:var(--max-w);margin:0 auto;}
@media(min-width:720px){.group-page{padding:2rem 2rem;}}
.group-page h2{font-family:var(--ff-serif);font-size:22px;margin-bottom:.35rem;}
.group-page>p{font-size:13px;color:var(--ink-muted);margin-bottom:1.5rem;}
.group-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:8px;}
.group-btn{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);padding:.75rem .5rem;text-align:center;cursor:pointer;transition:all .18s;}
.group-btn:hover{border-color:var(--gold);background:#fffbf0;transform:translateY(-1px);}
.group-btn .gn{font-family:var(--ff-serif);font-size:17px;font-weight:700;}
.group-btn .gc{font-size:10px;color:var(--ink-faint);margin-top:2px;font-family:var(--ff-mono);}
.preview-hint{background:var(--warn-bg);border:1px solid #fde68a;border-radius:var(--radius);padding:.875rem 1rem;font-size:13px;color:var(--warn);margin-bottom:1.25rem;line-height:1.5;}
.word-preview-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:1.5rem;}
@media(min-width:560px){.word-preview-list{grid-template-columns:repeat(4,1fr);}}
@media(max-width:380px){.word-preview-list{grid-template-columns:1fr;}}
.word-preview-item{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:.6rem .875rem;font-size:15px;font-family:var(--ff-mono);color:var(--ink);}

/* ── COMPLETE / CHECKIN ── */
.missed-item{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:.75rem 1rem;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:8px;}
.missed-word{font-family:var(--ff-mono);font-size:14px;font-weight:700;color:var(--danger);}
.missed-def{font-size:13px;color:var(--ink-muted);flex:1;line-height:1.5;}
.complete-card{background:var(--ink);color:var(--paper);border-radius:16px;padding:2rem 1.5rem;text-align:center;margin-bottom:1.5rem;}
.complete-emoji{font-size:48px;margin-bottom:1rem;}
.complete-title{font-family:var(--ff-serif);font-size:28px;margin-bottom:.5rem;color:var(--gold);}
.complete-sub{font-size:14px;color:rgba(245,240,232,.6);margin-bottom:1.5rem;}
.complete-stats{display:flex;gap:2rem;justify-content:center;}
.cstat-num{font-family:var(--ff-serif);font-size:32px;font-weight:700;color:var(--gold);}
.cstat-lbl{font-size:11px;color:rgba(245,240,232,.4);font-family:var(--ff-mono);text-transform:uppercase;}

/* ── CHECKIN CARD ── */
.checkin-card{background:var(--ink);color:var(--paper);border-radius:14px;padding:1.5rem;margin-bottom:1.25rem;position:relative;overflow:hidden;}
.checkin-card::before{content:'';position:absolute;top:-40px;right:-40px;width:180px;height:180px;border-radius:50%;background:rgba(201,168,76,.07);pointer-events:none;}
.checkin-brand{font-family:var(--ff-mono);font-size:11px;color:var(--gold);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.75rem;}
.checkin-title{font-family:var(--ff-serif);font-size:20px;font-weight:700;margin-bottom:.25rem;}
.checkin-meta{font-size:12px;color:rgba(245,240,232,.45);font-family:var(--ff-mono);margin-bottom:1rem;}
.checkin-row{display:flex;gap:10px;margin-bottom:.5rem;}
.checkin-box{flex:1;background:rgba(255,255,255,.07);border-radius:8px;padding:.75rem;text-align:center;}
.checkin-num{font-family:var(--ff-serif);font-size:24px;font-weight:700;color:var(--gold);}
.checkin-lbl{font-size:10px;color:rgba(245,240,232,.4);font-family:var(--ff-mono);text-transform:uppercase;margin-top:2px;}
.checkin-hint{font-size:12px;color:var(--ink-muted);text-align:center;margin-bottom:1.25rem;}

/* ── UTIL ── */
.mt2{margin-top:1rem;}.mt3{margin-top:1.5rem;}
.text-muted{color:var(--ink-muted);font-size:13px;line-height:1.6;}