:root{
  --bg:#f3f2f7;--card:#fff;--ink:#17171c;--mut:#6b6b78;--line:#e6e5ee;--blue:#3b6fb6;--acc:#6c5cd6;--acc2:#b06ab3;
  --good:#1f9d63;--bad:#d2473f;--warn:#b7791f;--warnbg:#fff6df;--soft:#f0eefb;--shadow:0 6px 24px rgba(40,30,90,.08);
  --A1:#2f9e6b;--A2:#3b82c4;--B1:#c98a1b;--B2:#c2553f;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#121217;--card:#1d1d25;--ink:#f2f2f6;--mut:#a3a3b3;--line:#2e2e3a;--blue:#8db4ea;--acc:#9d90f0;--acc2:#d08fd3;
  --good:#4cc38a;--bad:#f0766e;--warn:#e8b860;--warnbg:#3a3018;--soft:#2a2740;--shadow:0 6px 24px rgba(0,0,0,.35);
}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);
  background:linear-gradient(160deg,#e9e6fb 0%,var(--bg) 38%,#f7e9f2 100%) fixed;min-height:100vh}
@media (prefers-color-scheme:dark){body{background:linear-gradient(160deg,#1c1a33 0%,var(--bg) 40%,#26182a 100%) fixed}}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
[hidden]{display:none!important}
.wrap{max-width:720px;margin:0 auto;padding:calc(14px + env(safe-area-inset-top)) 14px calc(96px + env(safe-area-inset-bottom))}
.wrap.wide{max-width:1040px}
.immersive .wrap{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
.hero{padding:10px 4px 14px}.hero h1{font-size:28px;letter-spacing:-.02em}.hero p{color:var(--mut)}
.card{background:var(--card);border-radius:24px;box-shadow:var(--shadow);margin-bottom:14px}
.pad{padding:18px}.center{text-align:center}
.mut{color:var(--mut);font-size:14px}
.empty{color:var(--mut);text-align:center;padding:28px 18px}

/* progress */
.bar{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .3s}
.bar.big{height:10px}
.bar.c-A1 i{background:var(--A1)}.bar.c-A2 i{background:var(--A2)}.bar.c-B1 i{background:var(--B1)}.bar.c-B2 i{background:var(--B2)}
.overall{display:flex;gap:18px;align-items:center;padding:18px}
.ring{width:128px;height:128px;flex:none}
.rbg{fill:none;stroke:var(--line);stroke-width:10}
.rfg{fill:none;stroke:var(--acc);stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset .4s}
.rpc{font-size:26px;font-weight:800;fill:var(--ink)}.rlb{font-size:11px;fill:var(--mut)}
.ov{flex:1;min-width:0}.ovn{font-size:17px}.ovn b{font-size:24px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.chip{background:var(--soft);border-radius:99px;padding:5px 11px;font-size:13px;font-weight:600}
@media (max-width:520px){.overall{flex-direction:column;text-align:center}.chips{justify-content:center}.overall .btn{width:100%}}
.cefrs{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px;margin-top:14px}
.cfh{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--mut)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border-radius:14px;background:var(--acc);color:#fff;font-weight:700;transition:transform .15s,opacity .15s}
.btn:active{transform:scale(.97)}.btn:disabled{opacity:.45;cursor:default}
.btn.ghost{background:var(--soft);color:var(--ink)}
.btn.good{background:var(--good)}.btn.bad{background:var(--bad)}
.btn.wide{width:100%;margin-top:12px}
.btns{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 4px}.btns .btn{flex:1}
.search,select{width:100%;min-height:46px;border-radius:14px;border:1px solid var(--line);background:var(--card);padding:0 14px;margin-bottom:12px;outline:none}
.search:focus,select:focus{border-color:var(--acc)}

/* home grid */
.gh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:14px 4px 10px;flex-wrap:wrap}
.gh h2{font-size:22px;font-weight:600;letter-spacing:-.01em}.gh span{color:var(--mut);font-size:13px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:700px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:980px){.grid{grid-template-columns:repeat(4,1fr)}}
.tile{background:var(--card);border-radius:20px;box-shadow:var(--shadow);padding:14px;min-height:132px;display:flex;flex-direction:column;transition:transform .15s}
.tile:active{transform:scale(.98)}@media (hover:hover){.tile:hover{transform:translateY(-2px)}}
.th{display:flex;justify-content:space-between;align-items:flex-start}
.emo{font-size:26px;line-height:1}.tp{font-weight:700;font-size:14px;color:var(--mut)}
.tn{font-weight:650;margin-top:6px;line-height:1.25;flex:1}.tc{color:var(--mut);font-size:13px;margin-top:8px}
.hitsec{font-size:12px;color:var(--mut);margin-top:10px}

/* theme page */
.topbar{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.rbtn{width:46px;height:46px;border-radius:50%;background:var(--card);box-shadow:var(--shadow);display:grid;place-items:center;color:var(--blue);flex:none}
.rsp{width:46px;flex:none}
.tt{flex:1;text-align:center;font-weight:700;font-size:18px}.tt.sm{font-size:15px}
.ic{width:24px;height:24px}
.thp{display:flex;align-items:baseline;gap:10px}.thp b{font-size:28px}
.chipsrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.chipsrow select{width:auto;flex:1;min-width:120px;margin:0;min-height:38px}
.fchip{min-height:38px;padding:0 14px;border-radius:99px;background:var(--card);border:1px solid var(--line);font-weight:600;font-size:14px}
.fchip.on{background:var(--acc);border-color:var(--acc);color:#fff}
.pos{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);margin:14px 0 4px}.pos:first-child{margin-top:0}
.pos span{background:var(--soft);border-radius:99px;padding:1px 8px;margin-left:4px}
.row{display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--line)}.row:last-child{border-bottom:0}
.rmain{flex:1;min-width:0;display:flex;align-items:center;gap:10px;text-align:left;padding:10px 0;min-height:56px}
.rtxt{flex:1;min-width:0;display:flex;flex-direction:column}
.rfr{font-weight:650}.ren{color:var(--mut);font-size:14px}
.art{color:var(--mut);font-weight:400}
.cefr{font-size:11px;font-weight:800;border-radius:6px;padding:2px 6px;color:#fff;flex:none}
.c-A1{background:var(--A1)}.c-A2{background:var(--A2)}.c-B1{background:var(--B1)}.c-B2{background:var(--B2)}
.gen{font-size:12px;border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--mut);white-space:nowrap;flex:none}
.star{width:40px;height:44px;display:grid;place-items:center;color:var(--line);flex:none}.star.on{color:#e6a700}
.stt{font-size:12px;font-weight:700;border-radius:99px;padding:5px 10px;min-width:78px;text-align:center;flex:none}
button.stt{min-height:32px}
.s-new{background:var(--soft);color:var(--mut)}.s-learning{background:#fdefc8;color:#8a5a00}.s-mastered{background:#d6f3e4;color:#11603b}
@media (prefers-color-scheme:dark){.s-learning{background:#4a3a12;color:#f3cf7a}.s-mastered{background:#173d2b;color:#8be0b3}}

/* flashcard */
.study{max-width:560px}
.fc{padding:26px 24px 20px;text-align:center}
.pair{display:flex;justify-content:space-between;gap:16px;text-align:left}
.pl,.pr{flex:1 1 0;min-width:0}.pr{text-align:right}
.word{font-size:clamp(20px,5.6vw,30px);font-weight:800;line-height:1.14;letter-spacing:-.02em;overflow-wrap:break-word}
.lab{color:var(--blue);font-size:15px;margin-top:2px}.lab.l{font-weight:500}
.hid{color:var(--line)}
.fc hr{border:0;border-top:1.5px solid var(--line);margin:18px 0}
.mnb{min-height:96px}
.kw{font-size:24px;line-height:1.25}
.imag{font-size:22px;line-height:1.3;margin-top:14px}.imag.sm{font-size:17px;color:var(--mut);margin-top:8px}
.q{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid currentColor;font-size:12px;font-weight:700;color:var(--mut);margin-left:6px;vertical-align:middle}
.cog{display:inline-block;background:#d6f3e4;color:#11603b;font-weight:700;border-radius:99px;padding:6px 14px}
.warn{background:var(--warnbg);color:var(--warn);border-radius:12px;padding:10px 12px;font-size:14px;margin-bottom:14px;text-align:left}
.nomn{color:var(--mut);padding:26px 0}
.cemo{font-size:72px;line-height:1;margin:18px auto 6px;width:150px;height:150px;border-radius:28px;display:grid;place-items:center;background:linear-gradient(135deg,var(--soft),transparent)}
.cimg{width:100%;max-width:340px;aspect-ratio:1;object-fit:cover;border-radius:22px;margin-top:18px}
.meta{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:14px;font-size:13px;color:var(--mut)}
.acts{display:flex;justify-content:space-around;background:var(--card);border-radius:22px;box-shadow:var(--shadow);padding:8px;margin:-4px 26px 14px}
.acts button{width:52px;height:52px;display:grid;place-items:center;border-radius:50%}
.acts .ic{width:28px;height:28px}.acts .on{color:var(--warn)}.acts .on.heart{color:var(--bad)}
.snav{display:flex;gap:10px}.snav .btn{flex:1;min-height:52px}.snav .btn.wide{margin:0}
.done .big{font-size:56px}.done h2{margin:6px 0}.done .btn{margin-top:14px}

/* quiz */
.quiz{margin-top:14px}
.qp{font-size:28px;font-weight:800;line-height:1.2;margin-bottom:4px;overflow-wrap:anywhere}
.opts{display:grid;gap:10px;margin-top:16px}.opts.two{grid-template-columns:1fr 1fr}
.opt{min-height:52px;border-radius:14px;border:1.5px solid var(--line);padding:10px 14px;text-align:left;font-weight:600;background:var(--card)}
.opt.right{border-color:var(--good);background:#d6f3e4;color:#11603b}.opt.wrong{border-color:var(--bad);background:#fbe0de;color:#8b2620}
#qform{margin-top:16px}
.accs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.acc{min-width:38px;height:38px;border-radius:10px;background:var(--soft);font-weight:700}
.fb{border-radius:14px;padding:12px 14px;margin-top:16px}.fb.ok{background:#d6f3e4;color:#11603b}.fb.no{background:#fbe0de;color:#8b2620}
.fb .mut{color:inherit;opacity:.85;margin-top:4px}

/* stats */
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:14px}@media (min-width:560px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{padding:16px;text-align:center;margin:0}.kpi b{display:block;font-size:28px}.kpi span{color:var(--mut);font-size:13px}
.days{display:flex;gap:4px;align-items:flex-end;height:120px}
.dcol{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px}
.dcol i{width:100%;background:var(--acc);border-radius:5px 5px 0 0;min-height:2px}
.dcol span{font-size:10px;color:var(--mut)}
.spark{width:100%;height:80px;color:var(--acc)}
.srow{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:9px 0;border-bottom:1px solid var(--line)}.srow .bar{grid-column:1/-1;margin-top:4px}.srow:last-child{border:0}

/* chrome */
#tabs{position:fixed;left:0;right:0;bottom:0;display:flex;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);z-index:5}
#tabs a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0 6px;font-size:11px;font-weight:600;color:var(--mut)}
#tabs a.on{color:var(--acc)}
#sheet{position:fixed;inset:0;background:rgba(10,10,20,.45);z-index:20;display:flex;align-items:flex-end;justify-content:center}
.sheetc{background:var(--card);border-radius:24px 24px 0 0;padding:22px 20px calc(20px + env(safe-area-inset-bottom));width:100%;max-width:560px;max-height:85vh;overflow:auto}
.sheetc h2{margin-bottom:6px}.sheetc p{margin-bottom:10px;color:var(--mut)}
.it{width:100%;border-collapse:collapse;font-size:14px}.it th{text-align:left;color:var(--mut);font-weight:500;padding:7px 12px 7px 0;vertical-align:top;white-space:nowrap}.it td{padding:7px 0}
#toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));transform:translateX(-50%);background:#22222c;color:#fff;border-radius:14px;padding:11px 16px;font-size:14px;max-width:86vw;z-index:30;box-shadow:var(--shadow);text-align:center}
:focus-visible{outline:3px solid color-mix(in srgb,var(--acc) 55%,transparent);outline-offset:2px}