:root{
  --bg:#f4f6f9; --card:#fff; --ink:#16212b; --muted:#5d6b75; --line:#e1e6eb;
  --brand:#0f4c5c; --brand-2:#1b9aaa; --accent:#f77f00; --ok:#1f8a4c; --bad:#c0392b; --gold:#f6bd16;
  --ok-bg:#e7f6ec; --bad-bg:#fdecea; --tip:#fff6dd; --radius:16px;
  --shadow:0 1px 2px rgba(16,40,50,.05),0 6px 18px rgba(16,40,50,.07);
  --grad:linear-gradient(135deg,var(--brand),var(--brand-2));
}
body[data-zone="toeic"]{--brand:#3a0ca3;--brand-2:#7209b7;--accent:#f72585}
@media (prefers-color-scheme:dark){
  :root{--bg:#0e1419;--card:#161f26;--ink:#e6edf1;--muted:#9aa9b3;--line:#26333c;--ok-bg:#12321f;--bad-bg:#3a1714;--tip:#3a3218;--shadow:none;--brand:#2fb6c8;--brand-2:#5fd3e0}
  body[data-zone="toeic"]{--brand:#9d8cff;--brand-2:#c77dff}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55;font-size:16px;padding-bottom:76px;transition:background .3s}
a{color:var(--brand)}
button,select,input,textarea{font:inherit;color:inherit}
.container{max-width:920px;margin:0 auto;padding:16px}
.view{animation:fadeUp .35s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* top bar */
.topbar{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar-inner{max-width:920px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:9px 16px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font-weight:800;letter-spacing:.2px}
.logo{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#0f4c5c,#3a0ca3);color:#fff;font-size:14px;box-shadow:0 4px 12px rgba(58,12,163,.25)}
.zone-switch{display:flex;background:var(--bg);border-radius:999px;padding:3px;gap:2px}
.zone-switch a{text-decoration:none;color:var(--muted);padding:5px 14px;border-radius:999px;font-weight:700;font-size:14px}
.zone-switch a.active{background:var(--grad);color:#fff}
.timer{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:800;background:var(--brand);color:#fff;padding:4px 11px;border-radius:999px;font-size:15px}
.timer.warn{background:var(--bad);animation:pulse 1s infinite}
.me-chip{margin-left:auto;display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-weight:700;font-size:14px;background:var(--bg);padding:4px 10px 4px 4px;border-radius:999px}
.timer:not([hidden]) + .me-chip{margin-left:8px}
.me-chip .av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#fff;font-size:13px}
.flame{display:inline-block;animation:flick 1.2s infinite alternate;transform-origin:50% 90%}
@keyframes flick{0%{transform:scale(1) rotate(-3deg)}100%{transform:scale(1.15) rotate(3deg)}}
@keyframes pulse{50%{transform:scale(1.06)}}
.bottomnav{display:none}
@media (max-width:720px){
  .brand-text{display:none}
  .me-chip .nm{display:none}
  .bottomnav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:30;background:var(--card);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .bottomnav a{flex:1;text-align:center;text-decoration:none;color:var(--muted);font-size:11px;padding:6px 0 7px}
  .bottomnav a span{display:block;font-size:18px;line-height:1.25;font-weight:800}
  .bottomnav a.active{color:var(--brand);font-weight:700}
}
body.auth .topbar,body.auth .bottomnav{display:none}
body.auth{padding-bottom:0}
body.auth .container{max-width:none;padding:0}
/* typography & layout */
h1{font-size:1.55rem;margin:.2em 0 .4em;line-height:1.25}
h2{font-size:1.2rem;margin:1.1em 0 .5em}
h3{font-size:1.05rem;margin:1em 0 .4em;color:var(--brand)}
h4{font-size:1rem;margin:1em 0 .3em}
.muted{color:var(--muted)} .small{font-size:.88rem} .center{text-align:center}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin:12px 0;box-shadow:var(--shadow)}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.tile{position:relative;display:block;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s;overflow:hidden}
.tile:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(16,40,50,.12)}
.tile .big{font-size:1.7rem;font-weight:900;color:var(--brand);line-height:1.1}
.tile .t{font-weight:800}
.tile .tag{position:absolute;top:10px;right:10px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.spacer{flex:1}
.hero{position:relative;background:var(--grad);color:#fff;border-radius:22px;padding:22px;margin:6px 0 16px;overflow:hidden;box-shadow:0 12px 30px rgba(15,76,92,.25)}
.hero h1{color:#fff;margin-top:0}
.hero p{margin:.3em 0;opacity:.95}
.hero::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.12)}
.hero::before{content:"";position:absolute;right:60px;bottom:-80px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.08)}
.zone-card{min-height:150px;color:#fff;border:none}
.zone-card.aptis{background:linear-gradient(135deg,#0f4c5c,#1b9aaa)}
.zone-card.toeic{background:linear-gradient(135deg,#3a0ca3,#7209b7)}
.zone-card .big,.zone-card .t{color:#fff}
.zone-card .emoji{position:absolute;right:14px;bottom:6px;font-size:3.2rem;opacity:.35}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:var(--card);border-radius:12px;padding:9px 15px;cursor:pointer;text-decoration:none;color:var(--ink);font-weight:700;transition:transform .1s,box-shadow .15s}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 4px 14px rgba(15,76,92,.25)}
.btn.accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.sm{padding:5px 10px;font-size:.88rem;border-radius:10px}
.btn.block{width:100%}
.pill{display:inline-block;font-size:.78rem;padding:2px 9px;border-radius:999px;background:var(--bg);border:1px solid var(--line);color:var(--muted);font-weight:600}
.pill.ok{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.pill.hot{background:#fff1e6;color:#d9480f;border-color:transparent}
.pill.brand{background:color-mix(in srgb,var(--brand) 12%,var(--card));color:var(--brand);border-color:transparent}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 4px}
.tabs a{text-decoration:none;padding:7px 14px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--muted);font-weight:700;font-size:.92rem}
.tabs a.active{background:var(--grad);color:#fff;border-color:transparent}
/* profile & gamification */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:620px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;text-align:center}
.stat b{display:block;font-size:1.45rem;color:var(--brand)}
.stat span{font-size:.8rem;color:var(--muted)}
.levelbox{display:flex;align-items:center;gap:16px}
.ring{width:84px;height:84px;flex:0 0 84px}
.ring circle{fill:none;stroke-width:9}
.ring .bgc{stroke:rgba(255,255,255,.25)}
.ring .fg{stroke:#fff;stroke-linecap:round;transition:stroke-dashoffset 1.2s ease;transform:rotate(-90deg);transform-origin:50% 50%}
.ring text{fill:#fff;font-weight:900;font-size:22px}
.xpbar{height:10px;border-radius:99px;background:rgba(255,255,255,.25);overflow:hidden;margin-top:8px}
.xpbar>i{display:block;height:100%;background:#fff;border-radius:99px;transition:width 1.2s ease}
.bar{height:9px;background:var(--line);border-radius:99px;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--grad);transition:width .8s ease}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.badge{text-align:center;padding:12px 8px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.badge .ic{font-size:2rem;display:block}
.badge b{display:block;font-size:.85rem;margin-top:4px}
.badge small{color:var(--muted);font-size:.72rem;line-height:1.25;display:block}
.badge.locked{opacity:.38;filter:grayscale(1)}
.heat{display:grid;grid-template-rows:repeat(7,12px);grid-auto-flow:column;grid-auto-columns:12px;gap:3px;overflow-x:auto;padding-bottom:4px}
.heat i{width:12px;height:12px;border-radius:3px;background:var(--line)}
.heat i.l1{background:color-mix(in srgb,var(--brand) 30%,var(--card))}
.heat i.l2{background:color-mix(in srgb,var(--brand) 55%,var(--card))}
.heat i.l3{background:color-mix(in srgb,var(--brand) 80%,var(--card))}
.heat i.l4{background:var(--brand)}
.lb-row{display:flex;align-items:center;gap:10px;padding:9px 6px;border-bottom:1px solid var(--line)}
.lb-row .rk{width:30px;text-align:center;font-weight:900}
.lb-row.me{background:color-mix(in srgb,var(--brand) 10%,var(--card));border-radius:10px}
.lb-row .sc{margin-left:auto;font-weight:800;color:var(--brand)}
.medal{font-size:1.3rem}
/* questions */
.q{padding:12px 0;border-top:1px solid var(--line)}
.q:first-child{border-top:none}
.q .stem{margin-bottom:8px}
.q .num{display:inline-block;min-width:1.8em;font-weight:800;color:var(--brand)}
.opts{display:grid;gap:7px}
.opts.inline{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}
.opt{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;background:var(--card);transition:border-color .15s,background .15s,transform .1s}
.opt:hover{border-color:color-mix(in srgb,var(--brand) 50%,var(--line))}
.opt input{margin-top:4px;accent-color:var(--brand)}
.opt:has(input:checked){border-color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,var(--card))}
.opt.correct,.opt.correct:has(input:checked){border-color:var(--ok);background:var(--ok-bg);animation:pop .35s}
.opt.wrong,.opt.wrong:has(input:checked){border-color:var(--bad);background:var(--bad-bg);animation:shake .35s}
@keyframes pop{50%{transform:scale(1.02)}}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
select{padding:8px 10px;border:1.5px solid var(--line);border-radius:10px;background:var(--card);max-width:100%}
select.correct{border-color:var(--ok);background:var(--ok-bg)}
select.wrong{border-color:var(--bad);background:var(--bad-bg)}
.fix{display:block;margin-top:6px;font-size:.9rem;color:var(--ok);font-weight:600}
.expl{font-size:.9rem;color:var(--muted);margin-top:6px;padding:8px 10px;background:var(--bg);border-radius:10px}
.passage{background:var(--bg);border-radius:12px;padding:12px 14px;margin:8px 0;white-space:pre-line}
.passage .ptitle{font-weight:800;margin-bottom:6px;white-space:normal}
.wordlist{background:var(--bg);border-radius:12px;padding:10px 12px;margin:8px 0;font-size:.95rem}
.inline-sel{display:inline-block;margin:2px}
.tip{background:var(--tip);border-left:4px solid #e3a008;padding:10px 12px;border-radius:10px;margin:10px 0}
.score{font-size:2rem;font-weight:900;color:var(--brand)}
.result{border:2px solid var(--brand);animation:fadeUp .4s}
.script{display:none;background:var(--bg);border-radius:10px;padding:10px 12px;margin-top:8px;font-size:.93rem}
.reviewing .script{display:block}
textarea{width:100%;min-height:110px;border:1.5px solid var(--line);border-radius:12px;padding:10px;background:var(--card);resize:vertical}
input[type=text],input[type=search],input[type=password]{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--card)}
input:focus,textarea:focus,select:focus{outline:2px solid color-mix(in srgb,var(--brand) 50%,transparent);outline-offset:1px}
.wc{font-size:.85rem;color:var(--muted);text-align:right}
.wc.ok{color:var(--ok)}
.scene{margin:8px 0;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#fff;max-width:520px}
.scene svg{display:block;width:100%;height:auto}
.scenes{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.img-desc{font-size:.88rem;color:var(--muted);font-style:italic;margin:4px 2px}
.graphic table{max-width:420px}
.recs audio{width:100%;margin-top:6px}
.sq{padding:8px 10px;border-radius:10px;transition:background .2s}
.sq.now{background:color-mix(in srgb,var(--accent) 16%,var(--card));font-weight:700}
.status{font-weight:800;color:var(--accent);min-height:1.5em}
.play{display:inline-flex;gap:6px;align-items:center;margin:4px 0 8px}
.btn.playing{background:var(--accent);color:#fff;border-color:var(--accent)}
/* flashcards */
.flash{max-width:540px;margin:0 auto}
.fcard{min-height:250px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;cursor:pointer;user-select:none;perspective:900px;transition:transform .4s}
.fcard.flip{animation:flipIn .4s}
@keyframes flipIn{0%{transform:rotateY(90deg)}100%{transform:rotateY(0)}}
.fcard .w{font-size:2.1rem;font-weight:900}
.fcard .m{font-size:1.25rem;margin-top:8px}
.fcard .c{font-style:italic;color:var(--muted);margin-top:6px}
/* tables */
.tbl{overflow-x:auto;margin:8px 0}
table{border-collapse:collapse;width:100%;font-size:.93rem}
th,td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
th{background:var(--brand);color:#fff}
tr:nth-child(even) td{background:color-mix(in srgb,var(--bg) 60%,var(--card))}
.doc p{margin:.5em 0}
.doc ul{padding-left:1.3em}
.doc table{min-width:520px}
.say{border:none;background:none;cursor:pointer;font-size:1.05rem;padding:0 4px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:.9rem}
.sticky-actions{position:sticky;bottom:78px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px;display:flex;gap:8px;justify-content:flex-end;align-items:center;box-shadow:var(--shadow);margin-top:12px;z-index:10}
@media (min-width:721px){.sticky-actions{bottom:12px}}
.hidden{display:none!important}
.unit-list .tile{display:flex;gap:12px;align-items:center}
.unit-no{flex:0 0 46px;height:46px;border-radius:14px;display:grid;place-items:center;font-weight:900;background:color-mix(in srgb,var(--brand) 12%,var(--card));color:var(--brand)}
.unit-no.done{background:var(--ok);color:#fff}
.section-title{display:flex;align-items:center;gap:8px}
.section-title .ic{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--brand) 12%,var(--card))}
/* toasts & modal & confetti */
.toasts{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--ink);color:var(--card);padding:10px 16px;border-radius:999px;font-weight:800;box-shadow:0 8px 24px rgba(0,0,0,.2);animation:toastIn .4s ease,toastOut .4s ease 2.6s forwards}
.toast.xp{background:linear-gradient(135deg,#f6bd16,#f77f00);color:#2b1700}
.toast.err{background:var(--bad);color:#fff}
@keyframes toastIn{from{opacity:0;transform:translateY(-14px) scale(.9)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-10px)}}
.modal-back{position:fixed;inset:0;background:rgba(10,15,20,.55);z-index:70;display:grid;place-items:center;padding:20px;animation:fadeUp .25s}
.modal{background:var(--card);border-radius:22px;padding:24px;max-width:380px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.modal .big-ic{font-size:4rem;display:block;animation:bounce 1s ease infinite alternate}
@keyframes bounce{to{transform:translateY(-8px) scale(1.05)}}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:80;width:100%;height:100%}
/* auth */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(135deg,#0f4c5c,#3a0ca3 60%,#7209b7);background-size:200% 200%;animation:gradMove 12s ease infinite}
@keyframes gradMove{50%{background-position:100% 100%}}
.auth-box{background:var(--card);border-radius:24px;padding:26px;max-width:420px;width:100%;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.auth-box h1{text-align:center}
.auth-feat{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:14px 0}
.auth-feat div{background:var(--bg);border-radius:12px;padding:8px 10px;font-size:.85rem;font-weight:600}
.field{margin:10px 0}
.field label{display:block;font-size:.85rem;font-weight:700;margin-bottom:4px;color:var(--muted)}
.err-msg{color:var(--bad);font-weight:700;min-height:1.4em;font-size:.92rem}
.chart svg{width:100%;height:auto}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:.85rem}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.ex-done .opt{pointer-events:none}
.copy{font-family:ui-monospace,Consolas,monospace;font-weight:800;letter-spacing:1px}