/* ── Self-hosted fonts ────────────────────────────────────────────────
   Previously loaded from fonts.googleapis.com + cdn.jsdelivr.net (the
   IRANSansWeb reference never actually resolved — the npm package it
   points at ships only the CSS, not the font binaries — so the app was
   silently already falling back to Vazirmatn). Self-hosting removes
   3 external DNS/TLS round-trips and is far more reliable for users on
   Iranian networks, where Google/CDN domains are often slow or filtered. */
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/vazirmatn-300.woff') format('woff')}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/vazirmatn-400.woff') format('woff')}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/vazirmatn-500.woff') format('woff')}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/vazirmatn-600.woff') format('woff')}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/vazirmatn-700.woff') format('woff')}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/vazirmatn-800.woff') format('woff')}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:900;font-display:swap;src:url('/fonts/vazirmatn-900.woff') format('woff')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/plusjakartasans-400.woff') format('woff')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/plusjakartasans-500.woff') format('woff')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/plusjakartasans-600.woff') format('woff')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/plusjakartasans-700.woff') format('woff')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/plusjakartasans-800.woff') format('woff')}

:root{--ink-teal:#04222E;--ink-gold:#241300;--silver:#CBD5E1;--silver-2:#94A3B8;--bronze:#E0965A;--bronze-2:#B4713A;--gold-hi:#FFD54A;--teal:#00D4C1;--blue:#2979FF;--purple:#7B61FF;--amber:#FFC857;--navy:#0D1326;--paper:#F5F7FA;--brand-500:#2979FF;--brand-400:#5C97FF;--brand-600:#1B5FD8;--brand-glow:rgba(41,121,255,.45);--logo-eye:#00D4C1;--logo-deep:#0D1326;--aqua-500:#00D4C1;--aqua-400:#3FE4D6;--ai-500:#7B61FF;--ai-400:#9B87FF;--ai-glow:rgba(123,97,255,.45);--lime-500:#3DDC97;--lime-400:#5FEBAE;--gold-500:#FFC857;--gold-400:#FFD98A;--rose-500:#FF5D8F;--rose-400:#FF87AC;--violet-grad:linear-gradient(135deg,#00D4C1 0%,#2979FF 52%,#7B61FF 100%);--ai-grad:linear-gradient(135deg,#7B61FF 0%,#9B6CFF 55%,#FF5D8F 100%);--brand-grad:linear-gradient(135deg,#00D4C1 0%,#2979FF 52%,#7B61FF 100%);--aqua-grad:linear-gradient(135deg,#00D4C1 0%,#3DDC97 100%);--gold-grad:linear-gradient(135deg,#FFC857 0%,#FF9A3D 100%);--rose-grad:linear-gradient(135deg,#FF5D8F 0%,#7B61FF 100%);--r-xs:10px;--r-sm:14px;--r-md:20px;--r-lg:28px;--r-xl:36px;--r-pill:999px;--ease:cubic-bezier(.22,1,.36,1);--dur:.45s;--dock:112px;--font-fa:'Vazirmatn',system-ui,-apple-system,'Segoe UI',sans-serif;--font-en:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif}
[data-theme="dark"]{--bg-0:#080C1A;--bg-1:#0D1326;--bg-2:#141C36;--bg-3:#1D2749;--surface:rgba(255,255,255,.055);--surface-2:rgba(255,255,255,.09);--stroke:rgba(255,255,255,.10);--stroke-2:rgba(255,255,255,.18);--text-1:#F4F6FF;--text-2:#A9B2D0;--text-3:#6B759B;--inset:rgba(0,0,0,.24);
  --plate:rgba(0,212,193,.10);--plate-line:rgba(0,212,193,.24);--shadow-lg:0 24px 60px -18px rgba(0,0,0,.85);--shadow-sm:0 8px 24px -10px rgba(0,0,0,.7);--blur:saturate(180%) blur(24px);--scrim:linear-gradient(180deg,rgba(13,19,38,0) 0%,rgba(13,19,38,.95) 70%)}
[data-theme="light"]{--bg-0:#F5F7FA;--bg-1:#FFFFFF;--bg-2:#F8FAFD;--bg-3:#EBF0F8;--surface:rgba(255,255,255,.85);--surface-2:rgba(41,121,255,.07);--stroke:rgba(20,24,48,.09);--stroke-2:rgba(20,24,48,.16);--text-1:#12142A;--text-2:#5A6188;--text-3:#9AA0BF;--inset:rgba(20,24,48,.055);--plate:rgba(0,212,193,.12);--plate-line:rgba(0,212,193,.28);--shadow-lg:0 24px 50px -20px rgba(60,50,140,.28);--shadow-sm:0 8px 22px -12px rgba(60,50,140,.25);--blur:saturate(180%) blur(20px);--scrim:linear-gradient(180deg,rgba(242,244,253,0) 0%,rgba(242,244,253,.95) 70%)}
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{font-family:var(--font-fa);background:
    radial-gradient(1100px 620px at 12% -8%, rgba(0,212,193,.26), transparent 60%),
    radial-gradient(900px 560px at 92% 8%, rgba(41,121,255,.24), transparent 60%),
    radial-gradient(900px 700px at 50% 108%, rgba(123,97,255,.22), transparent 60%),
    #070A16;display:flex;align-items:center;justify-content:center;gap:34px;padding:28px;overflow-x:hidden;color:#fff}
body[data-theme="light"]{background:
    radial-gradient(1000px 600px at 10% -10%, #CDF3FA, transparent 60%),
    radial-gradient(900px 520px at 92% 6%, #DCEEFF, transparent 60%),
    radial-gradient(800px 640px at 55% 110%, #E4DEFF, transparent 60%),
    #EEF3FA}
::-webkit-scrollbar{width:0;height:0}
.hidden{display:none!important}
.side{width:290px;flex:0 0 290px;color:var(--text-1);align-self:center}
.brandmark{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.brandmark .logo{width:54px;height:54px;border-radius:16px;font-size:26px;background:var(--navy)!important;padding:9px 14px;display:grid;place-items:center;box-shadow:0 12px 34px -8px var(--brand-glow),inset 0 0 0 1px rgba(79,224,238,.25)}
.brandmark h1{font-size:20px;margin:0;font-weight:800;color:#fff;letter-spacing:-.2px}
.brandmark p{margin:2px 0 0;font-size:12px;color:#A9B2D0}
body[data-theme="light"] .brandmark h1{color:#12142A}
body[data-theme="light"] .brandmark p{color:#5A6188}
.side-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11);border-radius:20px;padding:16px;backdrop-filter:var(--blur);margin-bottom:14px}
body[data-theme="light"] .side-card{background:rgba(255,255,255,.75);border-color:rgba(20,24,48,.08)}
.side-card h3{margin:0 0 12px;font-size:12px;letter-spacing:.4px;color:#8E97BB;font-weight:700}
body[data-theme="light"] .side-card h3{color:#6B7295}
.seg{display:flex;background:var(--inset);border-radius:14px;padding:4px;gap:4px}
.seg button{flex:1;border:0;background:transparent;color:#A9B2D0;font-family:var(--font-fa);font-size:13px;font-weight:600;padding:9px;border-radius:10px;cursor:pointer;transition:.25s var(--ease)}
.seg button.on{background:var(--violet-grad);color:#fff;box-shadow:0 6px 18px -6px var(--brand-glow)}
.jump{display:grid;grid-template-columns:1fr 1fr;gap:7px;max-height:330px;overflow-y:auto}
.jump button{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:#C8CFE8;font-family:var(--font-fa);font-size:12px;font-weight:600;padding:9px 6px;border-radius:12px;cursor:pointer;transition:.22s var(--ease);display:flex;align-items:center;gap:6px;justify-content:center}
body[data-theme="light"] .jump button{background:#fff;border-color:rgba(20,24,48,.08);color:#3C4266}
.jump button:hover{transform:translateY(-2px);border-color:var(--brand-400);color:#fff}
body[data-theme="light"] .jump button:hover{color:#12142A}
.jump button.on{background:var(--violet-grad);color:#fff;border-color:transparent}
.hintbox{font-size:12px;line-height:2;color:#8E97BB}
body[data-theme="light"] .hintbox{color:#6B7295}
.phone{position:relative;width:390px;height:844px;flex:0 0 390px;border-radius:36px;background:var(--bg-0);border:1px solid var(--stroke);box-shadow:0 0 0 11px #14151F, 0 0 0 12.5px rgba(255,255,255,.10), 0 50px 110px -30px rgba(0,0,0,.9);overflow:hidden;color:var(--text-1);isolation:isolate}
body[data-theme="light"] .phone{box-shadow:0 0 0 11px #DFE2F2, 0 0 0 12.5px rgba(255,255,255,.9), 0 44px 90px -32px rgba(70,60,150,.35)}
.phone::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:
    radial-gradient(520px 300px at 85% -6%, rgba(0,212,193,.22), transparent 62%),
    radial-gradient(460px 300px at 8% 22%, rgba(41,121,255,.20), transparent 62%),
    radial-gradient(520px 340px at 60% 104%, rgba(123,97,255,.20), transparent 62%)}
.notch{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:122px;height:32px;background:#000;border-radius:20px;z-index:60}
body[data-theme="light"] .notch{background:#0B0D17}
.statusbar{position:absolute;top:0;left:0;right:0;height:54px;z-index:55;display:flex;align-items:center;justify-content:space-between;padding:16px 26px 0;font-family:var(--font-en);font-size:14px;font-weight:700;color:var(--text-1);pointer-events:none}
.statusbar .icons{display:flex;gap:5px;align-items:center;font-size:11px;opacity:.95}
.viewport{position:absolute;inset:0;z-index:5;overflow:hidden}
.screen{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding:60px 0 var(--dock);opacity:0;visibility:hidden;transform:translateY(14px) scale(.985);transition:opacity .38s var(--ease),transform .48s var(--ease),visibility .38s}
.screen.active{opacity:1;visibility:visible;transform:none}
.screen::-webkit-scrollbar{width:0}
.pad{padding:0 20px}
.appbar{display:flex;align-items:center;justify-content:space-between;padding:6px 20px 14px;gap:10px}
.appbar h2{margin:0;font-size:18px;font-weight:800;letter-spacing:-.3px;display:flex;align-items:center;gap:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appbar h2 svg
.appbar .sub{font-size:12px;color:var(--text-3);font-weight:500;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chipstat{display:flex;gap:7px;align-items:center}
.stat{display:flex;align-items:center;gap:5px;background:var(--surface);border:1px solid var(--stroke);border-radius:var(--r-pill);padding:6px 11px;font-size:12px;font-weight:800;backdrop-filter:var(--blur);color:var(--text-1)}
.stat.fire{color:var(--gold-400);border-color:rgba(255,176,32,.28);background:rgba(255,176,32,.10)}
.stat.gem{color:var(--aqua-400);border-color:rgba(34,211,238,.28);background:rgba(34,211,238,.10)}
.stat.xp{color:var(--lime-400);border-color:rgba(61,220,151,.28);background:rgba(61,220,151,.10)}
.iconbtn svg
.iconbtn{width:38px;height:38px;border-radius:12px;background:var(--surface);border:1px solid var(--stroke);display:grid;place-items:center;font-size:16px;cursor:pointer;transition:.25s var(--ease);backdrop-filter:var(--blur);color:var(--text-1);flex:0 0 auto}
.iconbtn:active{transform:scale(.9)}
.avatar{width:42px;height:42px;border-radius:14px;background:var(--violet-grad);display:grid;place-items:center;font-size:18px;box-shadow:0 8px 22px -8px var(--brand-glow);cursor:pointer;position:relative}
.avatar .ring{position:absolute;inset:-3px;border-radius:16px;border:2px solid var(--lime-500);opacity:.8}
.card{background:var(--surface);border:1px solid var(--stroke);border-radius:var(--r-lg);padding:16px;backdrop-filter:var(--blur);box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.card.tight{padding:13px;border-radius:var(--r-md)}
.sect{margin:22px 0 11px;display:flex;align-items:center;justify-content:space-between;padding:0 20px}
.sect h3{margin:0;font-size:16px;font-weight:800;display:flex;align-items:center;gap:7px;line-height:1.5}
.sect h3 svg
.sect a{font-size:12px;color:var(--brand-400);text-decoration:none;font-weight:700;cursor:pointer}
.muted{color:var(--text-2);font-size:12px;line-height:1.9}
.tiny{font-size:11px;color:var(--text-3)}
.en{font-family:var(--font-en);direction:ltr;unicode-bidi:isolate}
.btn svg
.btn{display:flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;font-family:var(--font-fa);font-weight:800;font-size:14px;color:#fff;padding:15px;border-radius:var(--r-md);width:100%;transition:.22s var(--ease);position:relative;overflow:hidden}
.btn:active{transform:scale(.972)}
.btn-primary{box-shadow:0 14px 32px -12px var(--brand-glow);background:var(--brand-grad);color:var(--ink-teal)}
.btn-lime{background:var(--aqua-grad);color:var(--ink-teal);box-shadow:0 14px 32px -12px rgba(61,220,151,.55)}
.btn-gold{background:var(--gold-grad);color:var(--ink-gold);box-shadow:0 14px 32px -12px rgba(255,176,32,.55)}
.btn-ghost{background:var(--surface);border:1px solid var(--stroke-2);color:var(--text-1)}
.btn::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);transition:.7s}
.btn:hover::after{transform:translateX(120%)}
.btn-sm{padding:10px 14px;font-size:12px;border-radius:var(--r-sm);width:auto}
.tags{display:flex;gap:7px;flex-wrap:wrap}
.tag{font-size:11px;font-weight:700;padding:5px 10px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--stroke);color:var(--text-2)}
.tag.v{background:rgba(41,121,255,.14);border-color:rgba(41,121,255,.3);color:var(--brand-400)}
.tag.a{background:rgba(34,211,238,.14);border-color:rgba(34,211,238,.3);color:var(--aqua-400)}
.tag.g{background:rgba(61,220,151,.14);border-color:rgba(61,220,151,.3);color:var(--lime-400)}
.tag.o{background:rgba(255,176,32,.14);border-color:rgba(255,176,32,.3);color:var(--gold-400)}
.tag.r{background:rgba(255,93,143,.14);border-color:rgba(255,93,143,.3);color:var(--rose-400)}
.bar{height:9px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden;position:relative}
.bar i{display:block;height:100%;border-radius:var(--r-pill);background:var(--aqua-grad);box-shadow:0 0 14px rgba(61,220,151,.6);transition:width 1s var(--ease)}
.bar.v i{background:var(--violet-grad);box-shadow:0 0 14px var(--brand-glow)}
.bar.o i{background:var(--gold-grad);box-shadow:0 0 14px rgba(255,176,32,.55)}
.hscroll{display:flex;gap:12px;overflow-x:auto;padding:2px 20px 6px;scroll-snap-type:x mandatory}
.hscroll::-webkit-scrollbar{height:0}
.hscroll>*{scroll-snap-align:start;flex:0 0 auto}
.tabbar{position:absolute;bottom:0;left:0;right:0;height:96px;z-index:50;padding:0 12px 22px;display:flex;align-items:flex-end;justify-content:space-around;background:var(--scrim);backdrop-filter:var(--blur);pointer-events:auto}
.tabbar::before{content:'';position:absolute;left:12px;right:12px;bottom:16px;height:66px;border-radius:24px;background:var(--surface);border:1px solid var(--stroke);backdrop-filter:var(--blur);box-shadow:var(--shadow-lg);z-index:-1}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;width:60px;padding:12px 0 0;cursor:pointer;transition:.25s var(--ease);background:none;border:0;font-family:var(--font-fa);color:var(--text-3)}
.tab .tic{display:grid;place-items:center;transition:.3s var(--ease);font-size:23px}
.tab .lb{font-size:10px;font-weight:700}
.tab.on{color:var(--brand-400)}
.tab.on .tic{transform:translateY(-3px) scale(1.08)}
.tab.on::after{content:'';position:absolute;bottom:6px;width:5px;height:5px;border-radius:50%;background:var(--brand-500);box-shadow:0 0 10px var(--brand-500)}
.tab.fab{width:64px}
.tab.fab.on::after{display:none}
.stagger>*{animation:popIn .5s var(--ease) backwards}
.stagger>*:nth-child(1){animation-delay:.02s}
.stagger>*:nth-child(2){animation-delay:.07s}
.stagger>*:nth-child(3){animation-delay:.12s}
.stagger>*:nth-child(4){animation-delay:.17s}
.stagger>*:nth-child(5){animation-delay:.22s}
.stagger>*:nth-child(6){animation-delay:.27s}
.stagger>*:nth-child(7){animation-delay:.32s}
.stagger>*:nth-child(8){animation-delay:.37s}
.toast{position:absolute;left:50%;bottom:118px;transform:translate(-50%,20px);z-index:80;background:rgba(20,24,45,.95);border:1px solid var(--stroke-2);color:#fff;padding:11px 18px;border-radius:var(--r-pill);font-size:12px;font-weight:700;backdrop-filter:var(--blur);opacity:0;pointer-events:none;transition:.35s var(--ease);white-space:nowrap;box-shadow:var(--shadow-lg)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.dayd{width:34px;height:34px;border-radius:12px;background:var(--surface-2);border:1px dashed var(--stroke-2);display:grid;place-items:center;margin-top:6px;font-size:15px;color:var(--text-3)}
.dayd.on{background:rgba(255,176,32,.16);border:1px solid rgba(255,176,32,.45);box-shadow:0 0 14px rgba(255,176,32,.25);color:var(--gold-400)}
.dayd.now{background:var(--violet-grad);border:0;box-shadow:0 0 16px var(--brand-glow);animation:floatY 2.4s infinite;color:#fff}
.chal{display:flex;align-items:center;gap:12px;cursor:pointer;transition:.25s var(--ease)}
.chal:active{transform:scale(.98)}
.chal.done{opacity:.62}
.chal.now{border-color:rgba(41,121,255,.4);box-shadow:0 0 0 1px rgba(41,121,255,.2),var(--shadow-sm)}
.chal .ci{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:18px;flex:0 0 40px}
.histcard .hi,.scen .se,.artrow .ac,.errrow .ipabox,.evrow .evd,.srrow .sri, .milestone .mi2,.rewrow .rwi,.roundrow .rn,.smrow .sn,.sylrow .ipabox{font-size:18px}
.milestone>svg.ic,.rewrow>svg.ic,.roundrow>svg.ic,.tnote>svg.ic,.drill>svg.ic, .cando>svg.ic,.checkline>svg.ic,.exrow .exi,.polrow .pl,.planstep .ps,.etymrow>svg
.chal .cb{flex:1;min-width:0}
.chal .cb b{display:block;font-size:13px;font-weight:800}
.chal .cb span{display:block;font-size:11px;color:var(--text-3);margin-top:2px}
.node{position:relative;display:flex;align-items:center;gap:13px;margin-bottom:6px;cursor:pointer}
.node .bub{width:64px;height:64px;border-radius:24px;display:grid;place-items:center;font-size:26px;flex:0 0 64px;border:1px solid var(--stroke);background:var(--surface);transition:.28s var(--ease);position:relative}
.node:active .bub{transform:scale(.92)}
.node.done .bub{background:var(--aqua-grad);border:0;color:var(--ink-teal);box-shadow:0 10px 26px -10px rgba(61,220,151,.6)}
.node.curr .bub{background:var(--violet-grad);border:0;box-shadow:0 12px 30px -8px var(--brand-glow);animation:floatY 3s infinite}
.node.curr .bub::after{content:'';position:absolute;inset:-6px;border-radius:28px;border:2px solid var(--brand-400);opacity:.5;animation:pulseGlow 2.4s infinite}
.node.lock .bub{opacity:.45;filter:grayscale(1)}
.node .meta b{display:block;font-size:14px;font-weight:800}
.node .meta span{display:block;font-size:11px;color:var(--text-3);margin-top:3px}
.connector{width:3px;height:26px;margin-inline-start:31px;border-radius:8px;background:var(--stroke-2)}
.connector.done{background:var(--lime-500);box-shadow:0 0 10px rgba(61,220,151,.5)}
.node.chest .bub{background:var(--gold-grad);border:0;color:var(--ink-gold);box-shadow:0 10px 26px -10px rgba(255,176,32,.6)}
.optbtn{font-size:15px;font-weight:700;padding:15px;border-radius:var(--r-md);cursor:pointer;background:var(--surface);border:1.5px solid var(--stroke-2);color:var(--text-1);transition:.22s var(--ease)}
.optbtn:active{transform:scale(.96)}
.optbtn.sel{border-color:var(--brand-500);background:rgba(41,121,255,.16);color:var(--brand-400)}
.optbtn.ok{border-color:var(--lime-500);background:rgba(61,220,151,.16);color:var(--lime-400)}
.optbtn.no{border-color:var(--rose-500);background:rgba(255,93,143,.14);color:var(--rose-400)}
.blankslot{display:inline-block;min-width:74px;border-bottom:2.5px solid var(--brand-500);color:var(--brand-400);font-weight:800;text-align:center;padding:0 5px}
.wavebox{flex:1;display:flex;align-items:center;gap:2.5px;height:34px}
.wavebox b{flex:1;background:linear-gradient(180deg,#2979FF,#00D4C1);border-radius:8px;height:100%;transform:scaleY(.3);transition:.3s}
.wavebox.play b{animation:wave 1s infinite ease-in-out}
.bub-row{display:flex;gap:9px;margin-bottom:13px;align-items:flex-end}
.bub-row.me{flex-direction:row-reverse}
.bub-av{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:15px;flex:0 0 32px;background:var(--ai-grad)}
.bub-row.me .bub-av{background:var(--aqua-grad)}
.bub-msg{max-width:74%;padding:12px 14px;border-radius:20px;font-size:14px;line-height:1.95;background:var(--surface);border:1px solid var(--stroke);backdrop-filter:var(--blur);color:var(--text-1)}
.bub-row.me .bub-msg{background:linear-gradient(135deg,rgba(34,211,238,.2),rgba(61,220,151,.14));border-color:rgba(34,211,238,.3)}
.micwrap{position:relative;width:104px;height:104px;margin:0 auto;display:grid;place-items:center}
.micwrap .halo{position:absolute;inset:0;border-radius:50%;background:var(--violet-grad);opacity:.28;animation:haloPulse 2.4s infinite}
.micwrap .halo:nth-child(2){animation-delay:.8s}
.micbtn{width:78px;height:78px;border-radius:50%;background:var(--violet-grad);border:0;color:#fff;font-size:30px;cursor:pointer;box-shadow:0 16px 40px -10px var(--brand-glow);position:relative;z-index:2;transition:.22s var(--ease)}
.micbtn:active{transform:scale(.92)}
.row>svg.ic:first-child{width:38px;height:38px;min-width:38px;padding:9px;border-radius:12px;background:var(--surface-2);border:1px solid var(--stroke);stroke:url(#igrad);box-sizing:border-box}
.row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--stroke);cursor:pointer;transition:.22s var(--ease)}
.row:active{transform:scale(.985)}
.row .rl{flex:1;min-width:0}
.row .rl b{display:block;font-size:14px;font-weight:800}
.row .rl span{display:block;font-size:12px;color:var(--text-3);margin-top:3px}
.rank{width:28px;text-align:center;font-weight:900;font-size:13px;color:var(--text-3)}
.rank.g1{color:var(--gold-hi)}
.rank.g2{color:var(--silver)}
.rank.g3{color:var(--bronze)}
.fcard{perspective:1200px;height:290px;margin-bottom:14px}
.fcard .inner{position:relative;width:100%;height:100%;transition:transform .7s var(--ease);transform-style:preserve-3d;cursor:pointer}
.fcard.flip .inner{transform:rotateY(180deg)}
.fcard .face{position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--r-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px;text-align:center;border:1px solid var(--stroke);box-shadow:var(--shadow-lg)}
.fcard .front{background:linear-gradient(150deg,rgba(41,121,255,.28),rgba(34,211,238,.16)),var(--bg-2)}
.fcard .back{transform:rotateY(180deg);background:linear-gradient(150deg,rgba(61,220,151,.24),rgba(255,176,32,.14)),var(--bg-2)}
.ipakey{padding:11px 6px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--stroke);text-align:center;cursor:pointer;transition:.2s var(--ease);font-family:var(--font-en)}
.ipakey:active{transform:scale(.93)}
.ipakey b{display:block;font-size:15px;font-weight:700;color:var(--aqua-400)}
.ipakey span{display:block;font-size:10px;color:var(--text-3);margin-top:2px}
.booktile{width:118px;cursor:pointer}
.booktile .cv{display:grid;place-items:center;font-size:36px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden;aspect-ratio:3/4;height:auto;border-radius:16px}
.booktile .cv::after{content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:9px;background:var(--inset)}
.booktile b{display:block;font-size:12px;font-weight:800;margin-top:8px;line-height:1.6}
.booktile span{display:block;font-size:10px;color:var(--text-3);margin-top:2px}
.badge{aspect-ratio:1;border-radius:20px;display:grid;place-items:center;font-size:26px;background:var(--surface);border:1px solid var(--stroke);position:relative}
.badge.got{background:linear-gradient(145deg,rgba(255,176,32,.24),rgba(255,93,143,.14));border-color:rgba(255,176,32,.4)}
.badge.lockb{opacity:.35;filter:grayscale(1)}
.wt{color:var(--aqua-400);border-bottom:1.5px dotted var(--aqua-400);cursor:pointer;font-weight:600}
.wt:active{background:rgba(34,211,238,.18);border-radius:8px}
.ex{cursor:pointer;transition:.25s var(--ease)}
.ex:active{transform:scale(.96)}
.ex b{display:block;font-size:13px;font-weight:800;margin-top:8px}
.ex span{display:block;font-size:10px;color:var(--text-3);margin-top:3px;line-height:1.7}
.chartbar{flex:1;border-radius:8px 7px 3px 3px;background:linear-gradient(180deg,#2979FF,#00D4C1);opacity:.75;transition:.6s var(--ease)}
.chartbar.hot{background:var(--gold-grad);opacity:1;box-shadow:0 0 16px rgba(255,176,32,.5)}
.mini{flex:1;text-align:center;background:var(--inset);border-radius:var(--r-sm);padding:9px 4px}
.mini .mv{font-size:16px;font-weight:900}
.mini .ml{font-size:10px;color:var(--text-3);margin-top:2px}
.mini .mtrend{font-size:9px;margin-top:3px;font-weight:800}
.mtrend.up{color:var(--lime-400)}
.mtrend.dn{color:var(--rose-400)}
.mtrend.flat{color:var(--text-3)}
.coach{width:104px;text-align:center;cursor:pointer;transition:.25s var(--ease)}
.coach:active{transform:scale(.94)}
.coach .ca{display:grid;place-items:center;font-size:26px;margin:0 auto;border:2px solid transparent;transition:.28s var(--ease);position:relative;aspect-ratio:1;width:64px;height:auto;border-radius:20px;background:var(--bg-2)}
.coach.on .ca{border-color:var(--brand-400);box-shadow:0 0 0 4px rgba(41,121,255,.18),0 10px 26px -10px var(--brand-glow)}
.coach.on .ca::after{content:'✓';position:absolute;bottom:-3px;inset-inline-end:-3px;width:20px;height:20px;border-radius:50%;background:var(--lime-500);color:var(--ink-teal);font-size:11px;display:grid;place-items:center;font-weight:900}
.coach b{display:block;font-size:12px;font-weight:800;margin-top:7px}
.coach span{display:block;font-size:10px;color:var(--text-3);margin-top:2px}
.setrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--stroke);font-size:12px;font-weight:600}
.setrow:last-child{border:0}
.segmini{display:flex;background:var(--inset);border-radius:10px;padding:3px;gap:3px}
.segmini button{border:0;background:transparent;color:var(--text-3);font-family:var(--font-fa);font-size:10px;font-weight:700;padding:6px 9px;border-radius:8px;cursor:pointer;transition:.22s var(--ease);white-space:nowrap}
.segmini button.on{background:var(--violet-grad);color:#fff}
.modecard{border:1px solid var(--stroke);border-radius:var(--r-md);padding:14px 13px;cursor:pointer;transition:.25s var(--ease);backdrop-filter:var(--blur);position:relative;overflow:hidden}
.modecard:active{transform:scale(.96)}
.modecard .mi{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;margin-bottom:9px;background:rgba(255,255,255,.07);border:1px solid var(--stroke);font-size:20px}
body[data-theme="light"] .modecard .mi{background:rgba(20,24,48,.05)}
.modecard b{display:block;font-size:13px;font-weight:800}
.modecard span{display:block;font-size:10px;color:var(--text-3);margin-top:4px;line-height:1.7}
.modecard i{display:inline-block;margin-top:9px;font-style:normal}
.scen{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--stroke);cursor:pointer;transition:.22s var(--ease)}
.scen:active{transform:scale(.985)}
.scen .se{flex:0 0 42px;background:var(--surface-2);aspect-ratio:1;width:46px;height:auto;border-radius:14px;padding:0;font-size:20px;display:grid;place-items:center}
.scen .sl{flex:1;min-width:0}
.scen .sl b{display:block;font-size:13px;font-weight:800}
.scen .sl span{display:block;font-size:10px;color:var(--text-3);margin-top:3px}
.livedot{width:7px;height:7px;border-radius:50%;background:var(--rose-500);display:inline-block;box-shadow:0 0 8px var(--rose-500);animation:blink 1.3s infinite}
.hudgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.hud{display:flex;align-items:center;gap:8px;background:var(--inset);border-radius:12px;padding:8px 10px}
.hud .hl{font-size:10px;color:var(--text-2);flex:0 0 52px;font-weight:700;line-height:1.35}
.hud .hbar{flex:1;height:5px;border-radius:8px;background:var(--surface-2);overflow:hidden}
.hud .hbar i{display:block;height:100%;border-radius:8px;transition:width .8s var(--ease)}
.hud .hv{font-size:10px;font-weight:900;flex:0 0 auto;white-space:nowrap;color:var(--text-1)}
.w{padding:1px 3px;border-radius:8px;cursor:pointer;transition:.2s}
.w.ok{color:var(--lime-400)}
.w.warn{color:var(--gold-400);background:rgba(255,176,32,.14);text-decoration:underline wavy var(--gold-500) 1.5px;text-underline-offset:4px}
.w.bad{color:var(--rose-400);background:rgba(255,93,143,.16);text-decoration:underline wavy var(--rose-500) 1.5px;text-underline-offset:4px}
.inlinefix{margin-top:9px;padding:9px 11px;border-radius:12px;background:rgba(255,176,32,.10);border:1px solid rgba(255,176,32,.28)}
.chipbtn svg
.chipbtn{border:1px solid var(--stroke-2);background:var(--surface);color:var(--text-2);font-family:var(--font-fa);font-size:11px;font-weight:700;padding:6px 10px;border-radius:var(--r-pill);cursor:pointer;transition:.2s var(--ease)}
.chipbtn:active{transform:scale(.92)}
.chipbtn.tall{display:flex;flex-direction:column;gap:3px;padding:9px 4px;border-radius:14px;font-size:15px}
.chipbtn.tall span{font-size:10px;font-weight:700}
.fixcard{border-inline-start:3px solid var(--rose-500)}
.fixhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.fixbad{font-size:12px;line-height:2;color:var(--rose-400);text-decoration:line-through;opacity:.8;direction:ltr;text-align:start}
.fixgood{font-size:13px;line-height:2;color:var(--lime-400);font-weight:600;direction:ltr;text-align:start}
.ipabox{width:52px;height:40px;border-radius:12px;display:grid;place-items:center;font-family:var(--font-en);font-size:15px;font-weight:700;flex:0 0 auto;border:1px solid var(--stroke)}
.ipabox.good{background:rgba(61,220,151,.16);border-color:rgba(61,220,151,.4);color:var(--lime-400)}
.ipabox.warn{background:rgba(255,176,32,.16);border-color:rgba(255,176,32,.4);color:var(--gold-400)}
.ipabox.bad{background:rgba(255,93,143,.16);border-color:rgba(255,93,143,.4);color:var(--rose-400)}
.errrow{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--stroke);cursor:pointer;transition:.22s var(--ease)}
.errrow:active{transform:scale(.985)}
.errrow .rl{flex:1;min-width:0}
.errrow .rl b{display:block;font-size:12px;font-weight:800}
.errrow .rl span{display:block;font-size:10px;color:var(--text-3);margin-top:2px}
.wavehead{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.wavesvg{width:100%;height:58px;background:var(--inset);border-radius:12px}
body[data-theme="light"] .wavesvg{background:rgba(20,24,48,.04)}
.segline{display:flex;gap:4px;margin-top:6px}
.seg-n{text-align:center;font-family:var(--font-en);font-size:11px;font-weight:700;padding:4px 0;border-radius:8px;background:var(--surface-2);color:var(--text-2)}
.seg-n.hi{background:rgba(34,211,238,.2);color:var(--aqua-400);border:1px solid rgba(34,211,238,.35)}
.seg-n.err{background:rgba(255,93,143,.2);color:var(--rose-400);border:1px solid rgba(255,93,143,.4)}
.sylrow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--stroke)}
.sylrow .rl{flex:1;min-width:0}
.sylrow .rl b{display:block;font-size:12px;font-weight:800}
.sylrow .rl span{display:block;font-size:10px;color:var(--text-3);margin-top:2px}
.ipagrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ipacell{padding:11px 4px;border-radius:14px;background:var(--surface);border:1px solid var(--stroke);text-align:center;cursor:pointer;transition:.2s var(--ease);position:relative;font-family:var(--font-en)}
.ipacell:active{transform:scale(.92)}
.ipacell.on{border-color:var(--brand-400);background:rgba(41,121,255,.16);box-shadow:0 0 0 2px rgba(41,121,255,.18)}
.ipacell b{display:block;font-size:15px;font-weight:700}
.ipacell span{display:block;font-size:9px;color:var(--text-3);margin-top:3px}
.ipacell::before{content:'';position:absolute;top:6px;inset-inline-end:6px;width:6px;height:6px;border-radius:50%}
.ipacell.good::before{background:var(--lime-500);box-shadow:0 0 6px var(--lime-500)}
.ipacell.warn::before{background:var(--gold-500);box-shadow:0 0 6px var(--gold-500)}
.ipacell.bad::before{background:var(--rose-500);box-shadow:0 0 6px var(--rose-500)}
.dotk{display:inline-block;width:8px;height:8px;border-radius:50%;margin-inline-end:4px;vertical-align:middle}
.dotk.good{background:var(--lime-500)}
.dotk.warn{background:var(--gold-500)}
.dotk.bad{background:var(--rose-500)}
.syl{font-family:var(--font-en);font-size:15px;font-weight:700;padding:9px 12px;border-radius:12px;background:var(--surface);border:1.5px solid var(--stroke-2);cursor:pointer;transition:.2s var(--ease)}
.syl:active{transform:scale(.93)}
.syl.ok{background:rgba(61,220,151,.18);border-color:var(--lime-500);color:var(--lime-400);font-size:16px;text-transform:uppercase}
.syl.no{background:rgba(255,93,143,.16);border-color:var(--rose-500);color:var(--rose-400)}
.stw{font-weight:800}
.stw.hi{color:var(--gold-400);font-size:16px;text-shadow:0 0 12px rgba(255,176,32,.4)}
.beat{border-radius:8px;background:var(--stroke-2)}
.beat.sm{width:7px;height:8px}
.beat.md{width:12px;height:14px;background:var(--brand-500)}
.beat.lg{width:19px;height:19px;background:var(--gold-500);box-shadow:0 0 10px rgba(255,176,32,.45)}
.linkcard{cursor:pointer;transition:.2s var(--ease);direction:ltr;text-align:start}
.linkcard:active{transform:scale(.98)}
.lnk{color:var(--aqua-400);font-size:16px;font-weight:900}
.daygrid{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.daycell{aspect-ratio:1;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--stroke);font-size:11px;font-weight:800;cursor:pointer;transition:.2s var(--ease)}
.daycell:active{transform:scale(.92)}
.daycell.done{background:rgba(61,220,151,.18);border-color:rgba(61,220,151,.4);color:var(--lime-400)}
.daycell.today{background:var(--violet-grad);border:0;color:#fff;box-shadow:0 8px 20px -8px var(--brand-glow)}
.daycell small{font-size:9px;font-weight:600;opacity:.75;margin-top:2px}
.searchbar{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--stroke);cursor:pointer;backdrop-filter:var(--blur)}
.filterrow{display:flex;gap:7px;overflow-x:auto;padding-bottom:3px}
.filterrow::-webkit-scrollbar{height:0}
.fchip{flex:0 0 auto;border:1px solid var(--stroke);background:var(--surface);color:var(--text-2);font-family:var(--font-fa);font-size:12px;font-weight:700;padding:8px 13px;border-radius:var(--r-pill);cursor:pointer;transition:.22s var(--ease);white-space:nowrap}
.fchip:active{transform:scale(.94)}
.fchip.on{background:var(--violet-grad);color:#fff;border-color:transparent;box-shadow:0 6px 16px -8px var(--brand-glow)}
.inputfake{width:100%;padding:13px 15px;border-radius:var(--r-md);background:var(--inset);border:1.5px solid var(--stroke-2);cursor:text;text-align:center}
.stackbar{display:flex;height:10px;border-radius:var(--r-pill);overflow:hidden;background:var(--surface-2)}
.stackbar i{display:block;height:100%}
.pron{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:5px 10px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--stroke);cursor:pointer}
.pron:active{transform:scale(.94)}
.freqbar{display:flex;align-items:center;gap:9px}
.listcard{width:132px;padding:13px;border-radius:var(--r-md);border:1px solid var(--stroke);cursor:pointer;transition:.25s var(--ease);backdrop-filter:var(--blur)}
.listcard:active{transform:scale(.95)}
.listcard b{display:block;font-size:12px;font-weight:800;margin-top:7px}
.listcard span{display:block;font-size:10px;color:var(--text-3);margin-top:2px}
.sense{border-inline-start:3px solid var(--brand-500)}
.sensehead{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.snum{width:24px;height:24px;border-radius:8px;background:var(--violet-grad);display:grid;place-items:center;font-size:12px;font-weight:900;color:#fff;flex:0 0 24px}
.exline{padding:8px 0;border-top:1px solid var(--stroke);direction:ltr;text-align:start}
.exline span:first-child{display:block;font-size:12px;line-height:1.9}
.exline span:last-child{display:block;font-size:11px;color:var(--text-3);margin-top:3px;direction:rtl;text-align:start}
.colgroup{padding:10px 0;border-bottom:1px solid var(--stroke)}
.collab{font-size:11px;font-weight:800;color:var(--text-3);margin-bottom:7px}
.famcell{padding:10px;border-radius:var(--r-sm);background:var(--surface-2);text-align:center}
.famcell b{display:block;font-size:13px;font-weight:800;margin:6px 0 3px}
.famcell span{display:block;font-size:10px;color:var(--text-3)}
.synrow b{font-size:14px;font-family:var(--font-en)}
.etymrow{display:flex;gap:11px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--stroke)}
.wrow{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--stroke);cursor:pointer;transition:.22s var(--ease)}
.wrow:active{transform:scale(.985)}
.wrow .wl{flex:1;min-width:0}
.wrow .wl b{display:block;font-size:13px;font-weight:800;font-family:var(--font-en)}
.wrow .wl span{display:block;font-size:11px;color:var(--text-3);margin-top:2px}
.boxdot{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:11px;font-weight:900;flex:0 0 26px;border:1px solid var(--stroke)}
.lbox{display:flex;align-items:center;gap:13px;padding:14px;border-radius:var(--r-md);border:1px solid var(--stroke);background:var(--surface);cursor:pointer;transition:.25s var(--ease);position:relative;overflow:hidden}
.lbox:active{transform:scale(.985)}
.lbox .lnum{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;font-size:18px;font-weight:900;flex:0 0 48px;color:#fff}
.lbox .ll{flex:1;min-width:0}
.lbox .ll b{display:block;font-size:14px;font-weight:800}
.lbox .ll span{display:block;font-size:11px;color:var(--text-3);margin-top:3px}
.cardstack{display:flex;gap:2px;margin-top:7px}
.cardstack i{height:16px;flex:1;max-width:9px;border-radius:8px;background:var(--surface-2);border:1px solid var(--stroke-2)}
.cardstack i.f{background:currentColor;border-color:transparent;opacity:.85}
.flowline{display:flex;align-items:center;gap:4px;justify-content:space-between}
.fnode{flex:1;text-align:center;padding:8px 2px;border-radius:10px;background:var(--surface-2);border:1px solid var(--stroke);font-size:11px;font-weight:900}
.fnode small{display:block;font-size:9px;font-weight:600;color:var(--text-3);margin-top:2px}
.fnode.gold{background:var(--gold-grad);color:var(--ink-gold);border:0}
.fnode.gold small{color:rgba(36,19,0,.7)}
.farrow{color:var(--text-3);font-size:11px;flex:0 0 auto}
.ctype{animation:popIn .35s var(--ease)}
.gradebtn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 4px;border-radius:var(--r-md);background:var(--surface);border:1.5px solid var(--stroke-2);cursor:pointer;font-family:var(--font-fa);color:var(--text-1);transition:.22s var(--ease)}
.gradebtn:active{transform:scale(.93)}
.gradebtn .ge{font-size:20px}
.gradebtn .gl{font-size:10px;font-weight:800}
.gradebtn .gt{font-size:9px;color:var(--text-3)}
.gradebtn.r{border-color:rgba(255,93,143,.4)}
.gradebtn.o{border-color:rgba(255,176,32,.4)}
.gradebtn.g{border-color:rgba(61,220,151,.4)}
.gradebtn.a{border-color:rgba(34,211,238,.4)}
.boxtrack{display:flex;gap:5px;justify-content:center}
.bt{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:12px;font-weight:900;background:var(--surface-2);border:1px solid var(--stroke);color:var(--text-3);transition:.4s var(--ease)}
.bt.cur{background:var(--violet-grad);color:#fff;border:0;box-shadow:0 6px 18px -6px var(--brand-glow);transform:scale(1.12)}
.bt.hit{background:var(--aqua-grad);color:var(--ink-teal);border:0}
.spellrow{display:flex;gap:4px;justify-content:center;flex-wrap:wrap}
.sbox{width:24px;height:32px;border-radius:8px;background:var(--surface-2);border:1.5px solid var(--stroke-2);display:grid;place-items:center;font-family:var(--font-en);font-size:14px;font-weight:700}
.sbox.f{background:rgba(61,220,151,.18);border-color:var(--lime-500);color:var(--lime-400)}
.sbox.cur{border-color:var(--brand-500);box-shadow:0 0 0 3px rgba(41,121,255,.2);animation:blink 1.2s infinite}
.heatmap{display:grid;grid-template-columns:repeat(9,1fr);gap:4px}
.hcell{aspect-ratio:1;border-radius:8px;background:var(--surface-2)}
.hcell.l0{background:var(--surface-2)}
.hcell.l1{background:rgba(61,220,151,.25)}
.hcell.l2{background:rgba(61,220,151,.5)}
.hcell.l3{background:rgba(61,220,151,.75)}
.hcell.l4{background:var(--lime-500);box-shadow:0 0 8px rgba(61,220,151,.5)}
.fbar{flex:1;border-radius:8px 6px 3px 3px;background:linear-gradient(180deg,#2979FF,#00D4C1);position:relative;transition:.7s var(--ease)}
.fbar.hot{background:var(--gold-grad);box-shadow:0 0 14px rgba(255,176,32,.5)}
.fbar span{position:absolute;top:-15px;left:50%;transform:translateX(-50%);font-size:9px;color:var(--text-3);font-weight:700}
.readerbar{position:absolute;top:0;left:0;right:0;height:52px;z-index:40;display:flex;align-items:center;gap:10px;padding:0 16px;background:var(--scrim);backdrop-filter:var(--blur)}
.readerbody{font-family:var(--font-en);direction:ltr;text-align:left}
.ptext{font-size:15px;line-height:2.5;margin:0 0 6px;color:var(--text-1)}
.ptrans{font-family:var(--font-fa);direction:rtl;text-align:right;font-size:12px;line-height:2.1;color:var(--text-3);margin:0 0 20px;padding-inline-start:11px;border-inline-start:2px solid var(--stroke-2)}
.rw{cursor:pointer;border-radius:8px;padding:0 2px;transition:.2s}
.rw.new{color:var(--aqua-400);border-bottom:1.5px dotted var(--aqua-400)}
.rw.saved{color:var(--gold-400);background:rgba(255,176,32,.14)}
.rw.known{color:var(--lime-400);opacity:.85}
.rw:active{background:rgba(41,121,255,.24)}
.readertools{position:absolute;left:0;right:0;bottom:92px;z-index:28;display:none;gap:6px;padding:12px 18px 12px;background:linear-gradient(180deg,transparent,var(--bg-0) 46%);backdrop-filter:var(--blur)}
.readertools.show{display:flex;animation:dockIn .32s var(--ease)}
.readertools>.rtinner{flex:1;display:flex;gap:6px;padding:7px;border-radius:20px;background:var(--surface);border:1px solid var(--stroke);box-shadow:0 12px 32px -14px rgba(0,0,0,.75)}
.rtool{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:transparent;color:var(--text-2);font-family:var(--font-fa);font-size:16px;cursor:pointer;padding:5px 0;border-radius:12px;transition:.2s var(--ease)}
.rtool span{font-size:9px;font-weight:700}
.rtool:active{background:var(--surface-2);transform:scale(.92)}
.artrow{display:flex;gap:12px;padding:11px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--stroke);cursor:pointer;transition:.22s var(--ease)}
.artrow:active{transform:scale(.985)}
.artrow .ac{display:grid;place-items:center;font-size:23px;flex:0 0 52px;aspect-ratio:1;width:56px;height:auto;border-radius:16px}
.artrow .rl{flex:1;min-width:0}
.artrow .rl b{display:block;font-size:13px;font-weight:800}
.artrow .rl span{display:block;font-size:10px;color:var(--text-3);margin-top:3px}
.histcard{display:flex;gap:12px;padding:12px 13px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--stroke);cursor:pointer;transition:.22s var(--ease)}
.histcard:active{transform:scale(.985)}
.histcard .hi{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:20px;flex:0 0 44px;background:var(--surface-2)}
.histcard .hl{flex:1;min-width:0}
.histcard .hl b{display:block;font-size:13px;font-weight:800}
.histcard .hl span{display:block;font-size:10px;color:var(--text-3);margin-top:3px}
.scorebadge{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:12px;font-weight:900;flex:0 0 38px;border:1px solid}
.scorebadge.hi{background:rgba(61,220,151,.16);border-color:rgba(61,220,151,.4);color:var(--lime-400)}
.scorebadge.md{background:rgba(255,176,32,.16);border-color:rgba(255,176,32,.4);color:var(--gold-400)}
.scorebadge.lo{background:rgba(255,93,143,.16);border-color:rgba(255,93,143,.4);color:var(--rose-400)}
.notehead{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.notecard{cursor:pointer;transition:.22s var(--ease);border-inline-start:3px solid var(--brand-500)}
.notecard:active{transform:scale(.985)}
.notecard.g{border-inline-start-color:var(--lime-500)}
.notecard.o{border-inline-start-color:var(--gold-500)}
.notecard.r{border-inline-start-color:var(--rose-500)}
.notecard.a{border-inline-start-color:var(--aqua-500)}
.sheetmask{position:absolute;inset:0;z-index:70;background:rgba(4,8,18,.62);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:.3s var(--ease)}
.sheetmask.show{opacity:1;pointer-events:auto}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:75;max-height:84%;overflow-y:auto;background:var(--bg-1);border-top:1px solid var(--stroke-2);border-radius:28px 30px 0 0;transform:translateY(102%);transition:transform .42s var(--ease);box-shadow:0 -20px 60px -20px rgba(0,0,0,.85)}
.sheet.show{transform:translateY(0)}
.sheet::-webkit-scrollbar{width:0}
.sheetgrab{width:42px;height:4.5px;border-radius:8px;background:var(--stroke-2);margin:11px auto 4px}
.sheetbody{padding:8px 20px 26px}
.boxpick{display:flex;gap:6px}
.bp{flex:1;padding:10px 2px;border-radius:12px;background:var(--surface);border:1.5px solid var(--stroke-2);font-family:var(--font-fa);font-size:13px;font-weight:900;color:var(--text-2);cursor:pointer;transition:.22s var(--ease)}
.bp small{display:block;font-size:9px;font-weight:600;color:var(--text-3);margin-top:2px}
.bp:active{transform:scale(.93)}
.bp.on{background:var(--violet-grad);color:#fff;border-color:transparent;box-shadow:0 8px 20px -8px var(--brand-glow)}
.bp.on small{color:rgba(255,255,255,.75)}
.tag.pick{cursor:pointer;transition:.2s var(--ease)}
.tag.pick.on{background:var(--violet-grad);color:#fff;border-color:transparent}
.modeswitch{display:flex;background:var(--inset);border-radius:12px;padding:3px;gap:3px;flex:0 0 auto}
body[data-theme="light"] .modeswitch{background:rgba(20,24,48,.07)}
.ms{border:0;background:transparent;font-size:15px;padding:6px 10px;border-radius:10px;cursor:pointer;transition:.22s var(--ease);opacity:.5}
.ms.on{background:var(--violet-grad);opacity:1;box-shadow:0 5px 14px -5px var(--brand-glow)}
.daysep{text-align:center;margin:4px 0 14px}
.daysep span{font-size:10px;color:var(--text-3);background:var(--surface);padding:4px 12px;border-radius:var(--r-pill);border:1px solid var(--stroke)}
.msgtools{display:flex;gap:5px;margin-top:6px;padding-inline-start:4px}
.bub-row.me .msgtools{justify-content:flex-end;padding-inline-end:4px}
.mt svg
.mt{width:28px;height:28px;border-radius:8px;border:1px solid var(--stroke);background:var(--surface);font-size:12px;cursor:pointer;transition:.2s var(--ease);color:var(--text-2)}
.mt:active{transform:scale(.88)}
.ptrans2{font-family:var(--font-fa);font-size:12px;color:var(--text-3);margin-top:7px;padding-top:7px;border-top:1px dashed var(--stroke-2);line-height:1.9}
.corrcard{margin-top:7px;padding:11px 13px;border-radius:16px;background:rgba(255,176,32,.10);border:1px solid rgba(255,176,32,.3)}
.corrhead{display:flex;justify-content:space-between;align-items:center}
.corritem{display:flex;gap:8px;align-items:flex-start;margin-top:9px;font-size:12px;line-height:1.9;color:var(--text-2)}
.cnum{width:18px;height:18px;border-radius:8px;background:var(--gold-500);color:var(--ink-gold);font-size:10px;font-weight:900;display:grid;place-items:center;flex:0 0 18px;margin-top:2px}
.typing{display:flex;gap:4px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:tdot 1.3s infinite}
.typing i:nth-child(2){animation-delay:.18s}
.typing i:nth-child(3){animation-delay:.36s}
.composer{display:flex;align-items:center;gap:7px;padding:7px;border-radius:20px;background:var(--surface);border:1px solid var(--stroke);backdrop-filter:var(--blur)}
.cbtn svg
.cbtn{width:38px;height:38px;border-radius:12px;border:0;background:var(--surface-2);font-size:16px;cursor:pointer;flex:0 0 38px;transition:.2s var(--ease);color:var(--text-1)}
.cbtn:active{transform:scale(.9)}
.cbtn.send{background:var(--violet-grad);color:#fff;box-shadow:0 6px 16px -6px var(--brand-glow)}
.cinput{flex:1;min-width:0;padding:6px 4px;font-size:13px;direction:ltr;text-align:start;white-space:nowrap;overflow:hidden;cursor:text}
.caret{display:inline-block;width:1.5px;height:14px;background:var(--brand-400);vertical-align:middle;margin:0 1px;animation:blink 1s infinite}
.ghosttext{color:var(--text-3);opacity:.5}
.div{width:82px;text-align:center;cursor:pointer;transition:.25s var(--ease);flex:0 0 auto}
.div:active{transform:scale(.93)}
.div .dv{width:58px;height:58px;border-radius:20px;display:grid;place-items:center;font-size:26px;margin:0 auto;border:2px solid transparent;transition:.25s var(--ease);position:relative}
.div.on .dv{border-color:var(--gold-400);box-shadow:0 0 0 4px rgba(255,176,32,.16),0 10px 24px -10px rgba(255,176,32,.6)}
.div.lock .dv{opacity:.32;filter:grayscale(1)}
.div b{display:block;font-size:10px;font-weight:800;margin-top:6px}
.div small{display:block;font-size:9px;color:var(--text-3);margin-top:1px}
.countdown{display:flex;gap:7px;justify-content:center}
.cdbox{flex:1;max-width:64px;text-align:center;padding:9px 2px;border-radius:14px;background:var(--inset);border:1px solid var(--stroke)}
.cdbox b{display:block;font-size:18px;font-weight:900;font-family:var(--font-fa)}
.cdbox small{display:block;font-size:9px;color:var(--text-3);margin-top:2px}
.zonebar{text-align:center;font-size:10px;font-weight:800;padding:6px;border-radius:10px;background:var(--surface-2);color:var(--text-3)}
.zonebar.up{background:rgba(61,220,151,.14);color:var(--lime-400);border:1px dashed rgba(61,220,151,.4)}
.zonebar.dn{background:rgba(255,93,143,.12);color:var(--rose-400);border:1px dashed rgba(255,93,143,.4)}
.lbrow{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--surface);border:1px solid var(--stroke);transition:.22s var(--ease)}
.lbrow.me{background:linear-gradient(135deg,rgba(41,121,255,.24),rgba(34,211,238,.12));border-color:rgba(41,121,255,.4)}
.lbrow .rl{flex:1;min-width:0}
.lbrow .rl b{display:block;font-size:12px;font-weight:800}
.lbrow .rl span{display:block;font-size:10px;color:var(--text-3);margin-top:2px}
.rewrow{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--stroke)}
.rewrow.gold{background:linear-gradient(135deg,rgba(255,213,74,.16),rgba(255,176,32,.06));border-color:rgba(255,213,74,.32)}
.rewrow.silver{background:linear-gradient(135deg,rgba(203,213,225,.12),rgba(41,121,255,.06));border-color:rgba(203,213,225,.28)}
.rewrow .rwi{font-size:23px;flex:0 0 auto}
.rewrow .rl{flex:1;min-width:0}
.rewrow .rl b{display:block;font-size:12px;font-weight:800}
.rewrow .rl span{display:block;font-size:10px;color:var(--text-3);margin-top:3px}
.versus{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.vplayer{text-align:center;flex:1}
.vplayer b{display:block;font-size:12px;font-weight:800;margin-top:6px}
.vav{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:23px;margin:0 auto;border:2px solid transparent}
.vav.me{background:var(--aqua-grad);border-color:rgba(34,211,238,.5);box-shadow:0 0 18px -4px rgba(34,211,238,.5)}
.vav.op{background:var(--rose-grad);border-color:rgba(255,93,143,.5);box-shadow:0 0 18px -4px rgba(255,93,143,.5)}
.vscore{font-size:23px;font-weight:900;color:var(--aqua-400);margin-top:4px}
.vscore.op{color:var(--rose-400)}
.vsmid{flex:0 0 auto;text-align:center}
.timerring{position:relative;width:70px;height:70px}
.timerring svg{width:70px;height:70px}
.tnum{position:absolute;inset:0;display:grid;place-items:center;font-size:23px;font-weight:900;color:var(--gold-400)}
.scorebar{height:9px;border-radius:var(--r-pill);background:rgba(255,93,143,.35);overflow:hidden}
.scorebar i{display:block;height:100%;background:var(--aqua-grad);border-radius:var(--r-pill);box-shadow:0 0 12px rgba(34,211,238,.6);transition:width .6s var(--ease)}
.duelopt{position:relative;overflow:hidden;font-size:14px;font-weight:700;padding:15px;border-radius:var(--r-md);cursor:pointer;background:var(--surface);border:1.5px solid var(--stroke-2);color:var(--text-1);transition:.2s var(--ease)}
.duelopt:active{transform:scale(.95)}
.duelopt.ok{border-color:var(--lime-500);background:rgba(61,220,151,.18);color:var(--lime-400)}
.duelopt.no{border-color:var(--rose-500);background:rgba(255,93,143,.16);color:var(--rose-400)}
.opbar{position:absolute;bottom:0;left:0;height:3px;width:0;background:var(--rose-500)}
.opbar.op{width:100%;animation:opFill 2.4s linear}
.roundrow{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--stroke)}
.roundrow.win{border-inline-start:3px solid var(--lime-500)}
.roundrow.lose{border-inline-start:3px solid var(--rose-500)}
.roundrow.now{border-inline-start:3px solid var(--gold-500);background:rgba(255,176,32,.08)}
.roundrow .rn{width:24px;height:24px;border-radius:8px;background:var(--surface-2);display:grid;place-items:center;font-size:11px;font-weight:900;flex:0 0 24px}
.roundrow .rl{flex:1;min-width:0}
.roundrow .rl b{display:block;font-size:12px;font-weight:800}
.roundrow .rl span{display:block;font-size:10px;color:var(--text-3);margin-top:2px}
.bracket{display:flex;gap:16px;min-width:340px}
.bcol{flex:1;display:flex;flex-direction:column;gap:5px}
.blab{font-size:10px;font-weight:800;color:var(--text-3);text-align:center;margin-bottom:5px}
.bmatch{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:10px;background:var(--surface-2);border:1px solid var(--stroke);font-size:11px}
.bmatch b{font-size:12px;font-weight:900}
.bmatch.won{background:rgba(61,220,151,.16);border-color:rgba(61,220,151,.4);color:var(--lime-400)}
.bmatch.live{background:rgba(255,176,32,.14);border-color:rgba(255,176,32,.4);color:var(--gold-400);animation:blink 2s infinite}
.bmatch.pend{opacity:.4;border-style:dashed}
.bgap{height:14px}
.bgap.sm{height:24px}
.bgap.md{height:48px}
.teambar{display:flex;height:34px;border-radius:12px;overflow:hidden;gap:2px}
.tside{display:grid;place-items:center;font-size:10px;font-weight:800;transition:flex .8s var(--ease)}
.tside.a{background:var(--aqua-grad);color:var(--ink-teal)}
.tside.b{background:var(--rose-grad);color:#fff}
.memrow{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:12px;background:var(--surface);border:1px solid var(--stroke)}
.memrow .mrank{font-size:11px;font-weight:900;color:var(--text-3);width:16px}
.memrow .rl{flex:1}
.memrow .rl b{font-size:12px;font-weight:800}
.evrow{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--stroke);cursor:pointer;transition:.22s var(--ease)}
.evrow:active{transform:scale(.985)}
.evd{width:46px;text-align:center;padding:6px 0;border-radius:12px;background:var(--violet-grad);flex:0 0 46px}
.evd b{display:block;font-size:16px;font-weight:900;color:#fff}
.evd small{display:block;font-size:9px;color:rgba(255,255,255,.8)}
.evrow .rl{flex:1;min-width:0}
.evrow .rl b{display:block;font-size:12px;font-weight:800}
.evrow .rl span{display:block;font-size:10px;color:var(--text-3);margin-top:3px}
.lvlchip{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);padding:3px 11px;border-radius:var(--r-pill);background:var(--gold-grad);color:var(--ink-gold);font-size:11px;font-weight:900;box-shadow:0 5px 14px -5px rgba(255,176,32,.7)}
.rlegend{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:5px 0;border-bottom:1px solid var(--stroke)}
.rlegend:last-child{border:0}
.yearmap{display:grid;grid-template-columns:repeat(26,1fr);gap:2.5px}
.yearmap .hcell{border-radius:2.5px}
.bdg{width:74px;text-align:center;flex:0 0 auto}
.bdg span{display:grid;place-items:center;width:58px;height:58px;border-radius:20px;font-size:26px;margin:0 auto;border:1.5px solid var(--stroke)}
.bdg.gold span{background:linear-gradient(145deg,rgba(255,213,74,.28),rgba(255,176,32,.1));border-color:rgba(255,213,74,.5);box-shadow:0 0 18px -6px rgba(255,213,74,.6)}
.bdg.silver span{background:linear-gradient(145deg,rgba(203,213,225,.22),rgba(41,121,255,.08));border-color:rgba(203,213,225,.4)}
.bdg.bronze span{background:linear-gradient(145deg,rgba(224,150,90,.22),rgba(255,93,143,.06));border-color:rgba(224,150,90,.4)}
.bdg small{display:block;font-size:9px;color:var(--text-3);margin-top:6px;line-height:1.5}
.milestone{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--stroke)}
.milestone .mi2{font-size:20px;flex:0 0 auto}
.milestone .rl{flex:1;min-width:0}
.milestone .rl b{display:block;font-size:12px;font-weight:800}
.milestone .rl span{display:block;font-size:10px;color:var(--text-3);margin-top:2px}
.bdggrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.bcell{aspect-ratio:.82;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 4px;background:var(--surface);border:1px solid var(--stroke);cursor:pointer;transition:.22s var(--ease);text-align:center;position:relative;color:var(--text-2)}
.bcell:active{transform:scale(.93)}
.bcell .be{font-size:23px}
.bcell .bn{font-size:9px;font-weight:800;line-height:1.4}
.bcell.got.gold{background:linear-gradient(145deg,rgba(255,213,74,.24),rgba(255,176,32,.07));border-color:rgba(255,213,74,.45);color:var(--gold-400)}
.bcell.got.silver{background:linear-gradient(145deg,rgba(203,213,225,.18),rgba(41,121,255,.06));border-color:rgba(203,213,225,.35);color:var(--silver)}
.bcell.got.bronze{background:linear-gradient(145deg,rgba(224,150,90,.18),rgba(255,93,143,.05));border-color:rgba(224,150,90,.35);color:var(--bronze)}
.bcell.lock2{opacity:.34}
.bcell.lock2 .be{filter:grayscale(1)}
.bcell .bprog{position:absolute;bottom:6px;left:8px;right:8px;height:3px;border-radius:8px;background:var(--surface-2)}
.bcell .bprog i{display:block;height:100%;border-radius:8px;background:var(--gold-500)}
.toggle{width:44px;height:25px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--stroke);cursor:pointer;position:relative;transition:.28s var(--ease);flex:0 0 44px}
.toggle i{position:absolute;top:2.5px;inset-inline-start:2.5px;width:18px;height:18px;border-radius:50%;background:var(--text-3);transition:.28s var(--ease)}
.toggle.on{background:var(--violet-grad);border-color:transparent}
.toggle.on i{inset-inline-start:22px;background:#fff}
.levelbadge{width:82px;height:82px;border-radius:28px;background:var(--violet-grad);display:grid;place-items:center;font-family:var(--font-en);font-size:30px;font-weight:800;color:#fff;margin:0 auto;box-shadow:0 14px 34px -10px var(--brand-glow)}
.levelbadge.up{background:var(--aqua-grad);color:var(--ink-teal);box-shadow:0 14px 34px -10px rgba(61,220,151,.7)}
.cefrmap{display:flex;gap:5px}
.cefrcell{flex:1;text-align:center;padding:12px 2px;border-radius:14px;background:var(--surface);border:1px solid var(--stroke);cursor:pointer;transition:.22s var(--ease)}
.cefrcell b{display:block;font-family:var(--font-en);font-size:14px;font-weight:800}
.cefrcell small{display:block;font-size:9px;color:var(--text-3);margin-top:3px}
.cefrcell.done{background:rgba(61,220,151,.16);border-color:rgba(61,220,151,.4);color:var(--lime-400)}
.cefrcell.cur{background:var(--violet-grad);border:0;color:#fff;box-shadow:0 8px 22px -8px var(--brand-glow);transform:scale(1.06)}
.cefrcell.cur small{color:rgba(255,255,255,.8)}
.cefrcell.lk{opacity:.42}
.skillrow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--stroke)}
.skillrow .si{font-size:18px;flex:0 0 auto}
.skillrow .sl{flex:1;min-width:0}
.skillrow .sl b{display:block;font-size:12px;font-weight:800}
.sectiontabs{display:flex;gap:6px}
.stab{flex:1;text-align:center;padding:9px 2px;border-radius:12px;background:var(--surface);border:1px solid var(--stroke);font-size:16px;color:var(--text-3);transition:.22s var(--ease)}
.stab small{display:block;font-size:9px;font-weight:700;margin-top:3px}
.stab.done{background:rgba(61,220,151,.14);border-color:rgba(61,220,151,.35);color:var(--lime-400)}
.stab.on{background:var(--violet-grad);border:0;color:#fff;box-shadow:0 8px 20px -8px var(--brand-glow)}
.adaptbar{display:flex;gap:4px}
.ad{flex:1;text-align:center;padding:6px 2px;border-radius:8px;background:var(--surface-2);font-family:var(--font-en);font-size:10px;font-weight:700;color:var(--text-3);transition:.4s var(--ease)}
.ad.cur{background:var(--gold-grad);color:var(--ink-gold);font-weight:900;transform:scale(1.12);box-shadow:0 5px 14px -5px rgba(255,176,32,.6)}
.cmprow{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--stroke)}
.cmprow .ci2{font-size:18px;flex:0 0 auto}
.cmprow .cl{flex:1;min-width:0}
.cmprow .cl b{display:block;font-size:12px;font-weight:800;margin-bottom:6px}
.cmpbar{position:relative;height:14px}
.cmpbar i{position:absolute;left:0;height:6px;border-radius:8px;transition:width .9s var(--ease)}
.cmpbar i.old{top:0;background:var(--stroke-2)}
.cmpbar i.new{top:8px;background:var(--aqua-grad);box-shadow:0 0 8px rgba(61,220,151,.5)}
.cmprow .cd{font-size:10px;font-weight:800;text-align:center;flex:0 0 auto;line-height:1.6}
.cd.up{color:var(--lime-400)}
.cd.flat2{color:var(--text-3)}
.cd small{font-size:9px}
.cando{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--stroke);font-size:12px;line-height:1.9;color:var(--text-2)}
.cando.yes{border-inline-start:3px solid var(--lime-500)}
.cando.soon{border-inline-start:3px solid var(--gold-500)}
.cando.no{border-inline-start:3px solid var(--text-3);opacity:.72}
.gapcard{border-inline-start:3px solid var(--brand-500)}
.gapcard.r{border-inline-start-color:var(--rose-500)}
.gapcard.o{border-inline-start-color:var(--gold-500)}
.gapcard.v{border-inline-start-color:var(--brand-500)}
.planstep{display:flex;gap:11px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--stroke)}
.planstep.last{border:0}
.planstep .ps{width:26px;height:26px;border-radius:8px;background:var(--violet-grad);color:#fff;font-size:12px;font-weight:900;display:grid;place-items:center;flex:0 0 26px}
.planstep .ps.gold{background:var(--gold-grad);color:var(--ink-gold)}
.planstep b{display:block;font-size:12px;font-weight:800}
.planstep span{display:block;font-size:10px;color:var(--text-3);margin-top:3px;line-height:1.8}
.backbtn svg
.backbtn{width:38px;height:38px;border-radius:12px;background:var(--surface);border:1px solid var(--stroke);display:grid;place-items:center;font-size:16px;cursor:pointer;transition:.22s var(--ease);backdrop-filter:var(--blur);color:var(--text-1);flex:0 0 38px;margin-inline-end:2px}
.backbtn:active{transform:scale(.88)}
.appbar>div{min-width:0}
.lessonbar{position:sticky;top:0;z-index:30;padding:4px 16px 12px;background:linear-gradient(180deg,var(--bg-0) 60%,transparent);backdrop-filter:var(--blur)}
.lbtop{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.lbtop .lt{flex:1;min-width:0}
.lbtop .lt b{display:block;font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lbtop .lt span{display:block;font-size:10px;color:var(--text-3);margin-top:1px}
.steps{display:flex;align-items:center;gap:3px}
.stp{flex:1;height:5px;border-radius:8px;background:var(--surface-2);transition:.5s var(--ease);position:relative;cursor:pointer}
.stp.done{background:var(--lime-500);box-shadow:0 0 8px rgba(61,220,151,.5)}
.stp.on{background:var(--violet-grad);box-shadow:0 0 10px var(--brand-glow)}
.stepnav{padding:18px 20px 4px}
.smrow{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--stroke);cursor:pointer;transition:.22s var(--ease);margin-bottom:6px}
.smrow:active{transform:scale(.985)}
.smrow .sn{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-size:16px;flex:0 0 36px;background:var(--surface-2);border:1px solid var(--stroke)}
.smrow.done .sn{background:var(--aqua-grad);color:var(--ink-teal);border:0}
.smrow.on{border-color:rgba(41,121,255,.45);background:rgba(41,121,255,.10)}
.smrow.on .sn{background:var(--violet-grad);color:#fff;border:0;animation:floatY 3s infinite}
.smrow.lk{opacity:.5}
.smrow .sl2{flex:1;min-width:0}
.smrow .sl2 b{display:block;font-size:12px;font-weight:800}
.smrow .sl2 span{display:block;font-size:10px;color:var(--text-3);margin-top:2px}
.smconn{width:2px;height:10px;margin-inline-start:31px;background:var(--stroke-2);border-radius:8px}
.smconn.done{background:var(--lime-500)}
.vplayer-box{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--stroke);background:var(--bg-2);box-shadow:var(--shadow-lg)}
.vstage{position:relative;background:linear-gradient(140deg,#2A1B4D,#12213D 55%,#3D1B33);display:grid;place-items:center;cursor:pointer;overflow:hidden;aspect-ratio:16/9;height:auto}
.vstage::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 72% 26%,rgba(41,121,255,.4),transparent 52%),
             radial-gradient(circle at 22% 78%,rgba(255,176,32,.28),transparent 48%)}
.vscene{font-size:44px;position:relative;filter:drop-shadow(0 10px 26px rgba(0,0,0,.55));animation:floatY 5s infinite ease-in-out;z-index:2}
.vstill{position:absolute;inset:0;object-fit:cover}
.vstill.loaded{opacity:.42}
.vplay{position:absolute;width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);border:1.5px solid rgba(255,255,255,.35);display:grid;place-items:center;font-size:23px;color:#fff;transition:.25s var(--ease)}
.vstage.playing .vplay{opacity:0;transform:scale(1.4)}
.vsub{position:absolute;bottom:12px;left:12px;right:12px;text-align:center;padding:9px 12px;border-radius:14px;background:rgba(6,10,22,.72);backdrop-filter:blur(6px)}
.vsub b{display:block;font-family:var(--font-en);font-size:13px;color:#fff;line-height:1.7}
.vsub span{display:block;font-size:11px;color:rgba(255,255,255,.72);margin-top:4px}
.vsub.hide-fa span{display:none}
.vctrl{display:flex;align-items:center;gap:10px;padding:11px 13px 8px}
.vc{width:34px;height:34px;border-radius:10px;border:0;background:var(--surface-2);font-size:15px;cursor:pointer;color:var(--text-1);flex:0 0 34px}
.vc:active{transform:scale(.9)}
.vtrack{flex:1;height:6px;border-radius:8px;background:var(--surface-2);position:relative;cursor:pointer}
.vtrack i{display:block;height:100%;border-radius:8px;background:var(--violet-grad);box-shadow:0 0 10px var(--brand-glow);transition:width .4s var(--ease)}
.vmark{position:absolute;top:-3px;width:3px;height:12px;border-radius:8px;background:var(--gold-500);opacity:.85}
.vopts{display:flex;gap:6px;padding:0 13px 13px;overflow-x:auto}
.vopts::-webkit-scrollbar{height:0}
.vopts .chipbtn{flex:0 0 auto}
.chipbtn.on{background:var(--violet-grad);color:#fff;border-color:transparent}
.vchap{width:118px;padding:11px;border-radius:14px;background:var(--surface);border:1px solid var(--stroke);cursor:pointer;transition:.22s var(--ease)}
.vchap:active{transform:scale(.94)}
.vchap b{display:block;font-size:12px;font-weight:800;color:var(--aqua-400)}
.vchap span{display:block;font-size:10px;color:var(--text-3);margin-top:4px}
.vchap.done{opacity:.62}
.vchap.on{border-color:var(--brand-400);background:rgba(41,121,255,.14)}
.tline{display:flex;gap:9px;padding:8px 9px;border-radius:10px;cursor:pointer;transition:.2s var(--ease);align-items:flex-start}
.tline:hover{background:var(--surface-2)}
.tline.on{background:rgba(41,121,255,.16);border:1px solid rgba(41,121,255,.3)}
.tline .tt{font-family:var(--font-en);font-size:10px;color:var(--text-3);flex:0 0 30px;padding-top:3px}
.tline .en{font-size:12px;line-height:1.95;direction:ltr;text-align:start}
.tline .fa2{font-size:10px;color:var(--text-3);margin-top:4px;line-height:1.8}
.tnote{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:14px;background:var(--surface);border:1px solid var(--stroke);cursor:pointer;font-size:12px;line-height:1.9;color:var(--text-2)}
.tnote .tt{font-family:var(--font-en);font-size:10px;color:var(--gold-400);font-weight:700;flex:0 0 auto;background:rgba(255,176,32,.14);padding:2px 6px;border-radius:8px}
.phrcard{padding:12px 13px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--stroke);border-inline-start:3px solid var(--brand-500);cursor:pointer;transition:.22s var(--ease)}
.phrcard:active{transform:scale(.985)}
.phrcard .pe{font-family:var(--font-en);font-size:14px;font-weight:700;direction:ltr;text-align:start}
.phrcard .pf{font-size:12px;color:var(--text-2);margin-top:5px}
.phrcard .pu{font-size:10px;color:var(--text-3);margin-top:6px;font-style:italic}
.vocgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.voccard{padding:12px 11px;border-radius:16px;background:var(--surface);border:1px solid var(--stroke);cursor:pointer;transition:.22s var(--ease);position:relative}
.voccard:active{transform:scale(.95)}
.voccard b{display:block;font-family:var(--font-en);font-size:14px;font-weight:800}
.voccard .ip{display:block;font-family:var(--font-en);font-size:10px;color:var(--aqua-400);margin-top:2px}
.voccard .fa3{display:block;font-size:12px;color:var(--text-2);margin-top:5px}
.voccard .add{position:absolute;top:8px;inset-inline-end:8px;opacity:.6;font-size:14px}
.voccard.known{border-color:rgba(61,220,151,.35);background:rgba(61,220,151,.08)}
.matchb{padding:12px 6px;border-radius:12px;background:var(--surface);border:1.5px solid var(--stroke-2);font-family:var(--font-fa);font-size:12px;font-weight:700;color:var(--text-1);cursor:pointer;transition:.2s var(--ease)}
.matchb:active{transform:scale(.94)}
.matchb.sel{border-color:var(--brand-500);background:rgba(41,121,255,.16)}
.matchb.ok{border-color:var(--lime-500);background:rgba(61,220,151,.18);color:var(--lime-400);opacity:.6}
.tfrow{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--stroke);font-size:12px;line-height:1.8}
.tfrow .rl{flex:1}
.tfb{width:36px;height:36px;border-radius:12px;border:1.5px solid var(--stroke-2);background:var(--surface-2);font-size:15px;cursor:pointer;color:var(--text-2);transition:.2s var(--ease)}
.tfb:active{transform:scale(.9)}
.tfb.ok{border-color:var(--lime-500);background:rgba(61,220,151,.2);color:var(--lime-400)}
.tfb.no{border-color:var(--rose-500);background:rgba(255,93,143,.16);color:var(--rose-400)}
.polrow{display:flex;gap:11px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--stroke)}
.polrow .pl{font-size:16px;flex:0 0 auto}
.polrow b{display:block;font-family:var(--font-en);font-size:13px;font-weight:700;direction:ltr;text-align:start}
.polrow span{display:block;font-size:10px;color:var(--text-3);margin-top:3px}
.polrow.r b{color:var(--rose-400)}
.polrow.o b{color:var(--gold-400)}
.polrow.g b{color:var(--lime-400)}
.polrow.a b{color:var(--aqua-400)}
.gtable{width:100%;border-collapse:collapse;font-size:12px}
.gtable th{background:var(--surface-2);padding:9px 8px;font-weight:800;font-size:10px;color:var(--text-2);text-align:start}
.gtable td{padding:9px 8px;border-top:1px solid var(--stroke);line-height:1.7}
.gtable td.en{direction:ltr;text-align:start}
.buildbox{min-height:52px;padding:12px;border-radius:14px;background:var(--inset);border:1.5px dashed var(--stroke-2);display:flex;flex-wrap:wrap;gap:6px;align-items:center;direction:ltr;justify-content:center}
.bw{cursor:pointer;transition:.2s var(--ease)}
.bw.used{opacity:.25;pointer-events:none}
.menu-card{background:linear-gradient(150deg,rgba(255,248,235,.06),rgba(41,121,255,.05))}
.mgroup{font-family:var(--font-en);font-size:10px;font-weight:800;letter-spacing:1.5px;color:var(--gold-400);margin:12px 0 6px;padding-bottom:4px;border-bottom:1px solid var(--stroke)}
.mitem{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;font-size:12px;direction:ltr;gap:10px}
.mitem b{font-family:var(--font-en);color:var(--aqua-400);flex:0 0 auto}
.mnote{font-size:10px;color:var(--text-3);margin-top:12px;padding-top:9px;border-top:1px dashed var(--stroke-2);line-height:1.9;direction:ltr;text-align:start}
.drill{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--stroke)}
.drill.done{opacity:.6;border-inline-start:3px solid var(--lime-500)}
.drill.now{border-color:rgba(255,176,32,.4);background:rgba(255,176,32,.08);border-inline-start:3px solid var(--gold-500)}
.drill .dl{flex:1;min-width:0}
.drill .dl b{display:block;font-size:13px;font-weight:700;direction:ltr;text-align:start}
.drill .dl span{display:block;color:var(--text-3);margin-top:3px;direction:ltr;text-align:start}
.checkline{display:flex;gap:9px;align-items:flex-start;padding:7px 0;font-size:12px;color:var(--text-2);line-height:1.8}
.checkline.done{color:var(--lime-400)}
.edbar{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;background:var(--surface-2);border-bottom:1px solid var(--stroke)}
.editor{padding:14px;font-size:14px;line-height:2.3;direction:ltr;text-align:start;min-height:110px;cursor:text}
.edfoot{display:flex;gap:6px;padding:9px 12px;border-top:1px solid var(--stroke);background:var(--surface-2)}
.obsteps{display:flex;align-items:center;justify-content:center;gap:0}
.ob{width:28px;height:28px;border-radius:50%;background:var(--surface-2);border:1px solid var(--stroke);display:grid;place-items:center;font-size:12px;font-weight:900;color:var(--text-3);flex:0 0 28px}
.ob.on{background:var(--violet-grad);color:#fff;border:0;box-shadow:0 6px 16px -6px var(--brand-glow)}
.obl{width:38px;height:2.5px;background:var(--stroke-2)}
.obl.on{background:var(--brand-500)}
.goalcard{padding:14px 12px;border-radius:16px;background:var(--surface);border:1.5px solid var(--stroke);cursor:pointer;transition:.22s var(--ease);text-align:center}
.goalcard:active{transform:scale(.95)}
.goalcard .gi{font-size:26px}
.goalcard b{display:block;font-size:12px;font-weight:800;margin-top:7px}
.goalcard span{display:block;font-size:10px;color:var(--text-3);margin-top:3px;line-height:1.6}
.goalcard.on{border-color:var(--brand-400);background:rgba(41,121,255,.14);box-shadow:0 0 0 3px rgba(41,121,255,.14)}
.timecard{padding:13px 4px;border-radius:14px;background:var(--surface);border:1.5px solid var(--stroke);cursor:pointer;text-align:center;transition:.22s var(--ease)}
.timecard:active{transform:scale(.93)}
.timecard b{display:block;font-size:16px;font-weight:900}
.timecard span{display:block;font-size:10px;color:var(--text-3);margin-top:3px}
.timecard.on{border-color:var(--aqua-400);background:rgba(34,211,238,.14);color:var(--aqua-400)}
.dirgroup{margin-bottom:6px}
.dirlist{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:0 20px}
.dircell{display:flex;align-items:center;gap:9px;padding:11px 11px;border-radius:14px;background:var(--surface);border:1px solid var(--stroke);cursor:pointer;transition:.22s var(--ease)}
.dircell:active{transform:scale(.95)}
.dircell .di{flex:0 0 auto;color:var(--brand-400);display:grid;place-items:center}
.dircell .di 
.dircell .dt{flex:1;min-width:0}
.dircell .dt b{display:block;font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dircell .dt span{display:block;font-size:9px;color:var(--text-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mascot{display:block;margin:0 auto;border-radius:20px;box-shadow:0 18px 38px -16px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.08)}
.emptyart{width:62px;height:85px;margin:0 auto 14px;opacity:.9;display:block;filter:drop-shadow(0 10px 22px rgba(0,212,193,.28))}
.ph,.avph{width:100%;height:100%;object-fit:cover;object-position:center;display:block;border-radius:inherit;opacity:0;transition:opacity .45s var(--ease)}
.ph.loaded,.avph.loaded{opacity:1}
.phwrap{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(140deg,var(--bg-2),var(--bg-3))}
.phwrap::before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
body[data-theme="light"] .phwrap::before{box-shadow:inset 0 0 0 1px rgba(20,24,48,.08)}
.phwrap>.ph,.phwrap>.avph{position:absolute;inset:0}
.phwrap.scrim::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;background:linear-gradient(180deg,transparent 42%,rgba(13,19,38,.78) 100%)}
.phwrap .cap{position:absolute;bottom:9px;inset-inline-start:11px;z-index:4;font-size:11px;font-weight:800;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.podart{aspect-ratio:16/10;border-radius:14px}
.plart{aspect-ratio:16/9;position:relative;height:196px;border-radius:var(--r-xl);overflow:hidden;background:linear-gradient(150deg,#0E2B3E,#123A52 50%,#0B2038);display:grid;place-items:center;border:1px solid var(--stroke)}
.plstill{position:absolute;inset:0;object-fit:cover;z-index:1}
.plstill.loaded{opacity:.45}
.plicon,.plrings{position:relative;z-index:2}
.contcover{aspect-ratio:3/4;width:74px;height:auto;border-radius:14px;flex:0 0 74px}
.herobanner{aspect-ratio:21/9;height:auto;border-radius:0}
.tab .tic 
body[data-theme="light"] .tab.fab .tic.fabmark{border-color:#fff}
.tab.fab.on .tic.fabmark::after{content:'';position:absolute;inset:-5px;border-radius:24px;border:2px solid var(--teal);opacity:.55}
.hint{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border-radius:14px;margin:0 20px 12px;background:rgba(0,212,193,.10);border:1px solid rgba(0,212,193,.26);font-size:12px;line-height:1.95;color:var(--text-2)}
.hint>div{flex:1 1 auto;min-width:0}
.hint .hi2{flex:0 0 auto;font-size:15px;line-height:1;color:var(--teal)}
.hint b{color:var(--teal)}
.hint .x{flex:0 0 20px;width:20px;height:20px;border-radius:8px;border:0;padding:0;background:transparent;color:var(--text-3);cursor:pointer;font-size:12px;line-height:1}
.hint .x svg
.hint.gone{display:none}
.racetimer{position:relative;width:118px;height:118px;margin:0 auto}
.racetimer svg{width:118px;height:118px}
.racenum{position:absolute;inset:0;display:grid;place-items:center;font-size:36px;font-weight:900;color:var(--gold-400);transition:color .3s}
.seltool{position:absolute;z-index:60;display:none;gap:2px;padding:5px;border-radius:16px;background:rgba(18,26,48,.97);border:1px solid var(--stroke-2);backdrop-filter:var(--blur);box-shadow:0 14px 34px -12px rgba(0,0,0,.8)}
.seltool.show{display:flex;animation:popIn .22s var(--ease)}
.seltool button{display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:none;color:#DDE4F5;font-family:var(--font-fa);font-weight:700;padding:7px 9px;border-radius:10px;cursor:pointer;transition:.18s var(--ease);font-size:15px}
.seltool button:active{background:rgba(0,212,193,.22);transform:scale(.9)}
.seltool button 
.ctxbtn{position:absolute;top:8px;inset-inline-end:8px;z-index:5;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--stroke);color:var(--text-3);cursor:pointer;transition:.2s var(--ease);line-height:1;font-size:14px}
.ctxbtn:active{transform:scale(.85)}
.ctxbtn:hover{color:var(--teal);border-color:rgba(0,212,193,.4)}
[data-ctx]{position:relative}
.act-sheet{max-height:82%}
.quotecard{padding:12px 14px;border-radius:14px;background:var(--surface-2);border:1px solid var(--stroke);border-inline-start:3px solid var(--teal);font-size:12px;line-height:2}
.quotecard .qen{font-family:var(--font-en);direction:ltr;text-align:start;display:block}
.quotecard .qmeta{margin-top:8px;padding-top:8px;border-top:1px dashed var(--stroke-2);font-size:11px;color:var(--text-3)}
.actgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.actbtn{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:13px 12px;border-radius:16px;background:var(--surface);border:1.5px solid var(--stroke);cursor:pointer;font-family:var(--font-fa);color:var(--text-1);text-align:start;transition:.22s var(--ease)}
.actbtn:active{transform:scale(.95)}
.actbtn b{font-size:12px;font-weight:800}
.actbtn small{font-size:10px;color:var(--text-3);line-height:1.6}
.actbtn .ai2{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:var(--surface-2);color:var(--brand-400);margin-bottom:5px}
.actbtn.ai{border-color:rgba(123,97,255,.45);background:linear-gradient(150deg,rgba(123,97,255,.16),rgba(0,212,193,.06))}
.actbtn.ai .ai2{background:var(--ai-grad);color:#fff}
.attachcard{padding:10px 12px;border-radius:12px;background:var(--inset);border:1px solid var(--stroke);border-inline-start:3px solid var(--teal);margin-bottom:9px}
body[data-theme="light"] .attachcard{background:rgba(20,24,48,.05)}
.attachcard .ah{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:800;color:var(--teal);margin-bottom:6px}
.attachcard .ab{font-size:12px;line-height:1.95;color:var(--text-2)}
.attachcard .ab .en{direction:ltr;text-align:start;display:block}
.newmsg{animation:msgIn .45s var(--ease)}
.hl{background:linear-gradient(180deg,transparent 58%,rgba(255,200,87,.45) 58%);border-radius:8px}
.term{display:inline-flex;align-items:center;gap:4px;cursor:pointer;white-space:nowrap}
.term .q{width:15px;height:15px;border-radius:50%;display:inline-grid;place-items:center;font-weight:900;background:rgba(0,212,193,.18);color:var(--teal);border:1px solid rgba(0,212,193,.4);flex:0 0 15px;line-height:1;transition:.2s var(--ease);font-size:10px}
.term:active .q{transform:scale(.82)}
.term.on-dark .q{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.35)}
.tshelp{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;font-size:16px;font-weight:900;background:rgba(0,212,193,.16);color:var(--teal);border:1px solid rgba(0,212,193,.35);flex:0 0 34px}
.term-sheet{max-height:70%}
.dockzone{position:absolute;left:0;right:0;bottom:92px;z-index:28;padding:14px 20px 12px;display:none;background:linear-gradient(180deg,transparent,var(--bg-0) 46%);backdrop-filter:var(--blur)}
.dockzone.show{display:block;animation:dockIn .32s var(--ease)}
.dockzone .composer{box-shadow:0 12px 32px -14px rgba(0,0,0,.75)}
.screen.withdock{padding-bottom:198px}
.viewport::before{content:'';position:absolute;top:0;left:0;right:0;height:56px;z-index:29;pointer-events:none;background:linear-gradient(180deg,var(--bg-0) 34%,transparent)}
.gateway{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:8px}
.gw{display:flex;flex-direction:column;align-items:center;gap:5px;padding:13px 6px 12px;border-radius:16px;background:var(--surface);border:1.5px solid var(--stroke);cursor:pointer;font-family:var(--font-fa);color:var(--text-1);transition:.24s var(--ease);backdrop-filter:var(--blur)}
.gw:active{transform:scale(.95)}
.gw b{font-size:12px;font-weight:800;line-height:1.4}
.gw small{font-size:9px;color:var(--text-3);line-height:1.5}
.gw .gwi{width:42px;height:42px;border-radius:14px;background:var(--navy);display:grid;place-items:center;padding:6px 9px;box-shadow:inset 0 0 0 1px rgba(0,212,193,.28)}
.gw .gwi.bare{width:34px;height:47px;border-radius:0;background:none;box-shadow:none;padding:0;filter:drop-shadow(0 6px 14px rgba(0,212,193,.4))}
.gw .gwi.ico{background:var(--surface-2);box-shadow:none;color:var(--brand-400)}
.gw .gwi.ico 
.gw .gwi .logomark{width:100%;height:100%}
.gw.on{border-color:var(--teal);background:linear-gradient(150deg,rgba(0,212,193,.16),rgba(123,97,255,.08));box-shadow:0 0 0 3px rgba(0,212,193,.14),0 12px 28px -14px var(--brand-glow)}
.gw.on small{color:var(--teal)}
.composer .cbtn 
.qacard{display:flex;flex-direction:column;align-items:center;gap:7px;padding:13px 5px;border-radius:16px;background:var(--surface);border:1px solid var(--stroke);cursor:pointer;transition:.22s var(--ease);backdrop-filter:var(--blur)}
.qacard:active{transform:scale(.93)}
.qacard b{font-size:10px;font-weight:700}
.qacard .iconbox{width:40px;height:40px;flex:0 0 40px;border-radius:14px;font-size:18px}
.qacard .iconbox 
[style*="linear-gradient(1"] svg.ic,[style*="linear-gradient(13"] svg.ic, [style*="linear-gradient(14"] svg.ic,[style*="var(--violet-grad)"] svg.ic, [style*="var(--aqua-grad)"] svg.ic,[style*="var(--gold-grad)"] svg.ic, [style*="var(--ai-grad)"] svg
.iconbox .ic,.qacard .ic,.modecard .mi .ic,.dircell .di .ic, .emptystate .ic,.hint .hi2 
.btn .ic,.tab.fab .ic,.cbtn.send .ic,.plb.main .ic,.micbtn .ic, [class*="grad"] > .ic,.bub-av .ic,.vplay .ic,.evd .ic,.snum .ic,.cnum .ic, .ps .ic,.fseg .ic,.tside .ic,.lnum .ic,.dpick.on .ic,.bp.on .ic, .fchip.on .ic,.stab.on .ic,.cefrcell.cur .ic,.gradebtn .ic, .exrow.on .exck .ic,.actbtn.ai .ai2 
.btn-primary .ic,.btn-lime .ic,.btn-gold .ic,.tab.fab 
.sect h3 
.appbar h2 
.tag .ic,.chipbtn .ic,.stat 
.muted .ic,.tiny 
.icg{stroke:url(#igrad)}
.iconbox{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:0 0 44px;background:var(--surface-2);border:1px solid var(--stroke);color:var(--brand-400);font-size:20px}
.iconbox.teal{color:var(--teal);background:rgba(0,212,193,.12);border-color:rgba(0,212,193,.28)}
.iconbox.blue{color:var(--blue);background:rgba(41,121,255,.12);border-color:rgba(41,121,255,.28)}
.iconbox.purple{color:var(--purple);background:rgba(123,97,255,.12);border-color:rgba(123,97,255,.28)}
.iconbox.amber{color:var(--amber);background:rgba(255,200,87,.12);border-color:rgba(255,200,87,.28)}
.iconbox.lime{color:var(--lime-400);background:rgba(61,220,151,.12);border-color:rgba(61,220,151,.28)}
.iconbox.rose{color:var(--rose-400);background:rgba(255,93,143,.12);border-color:rgba(255,93,143,.28)}
.logomark{width:100%;height:100%;display:block;overflow:visible}
.brandmark .logo svg{width:100%;height:100%}
.avatar.zbot{width:38px;height:52px;border-radius:0;background:none;box-shadow:none;padding:0;filter:drop-shadow(0 7px 16px rgba(0,212,193,.4));animation:floatY 4s infinite}
.bub-av.zbot{width:30px;height:41px;flex:0 0 30px;border-radius:0;background:none;box-shadow:none;padding:0;filter:drop-shadow(0 5px 12px rgba(0,212,193,.35))}
.avatar.zbot .logomark,.bub-av.zbot .logomark,.gw .gwi.bare .logomark{width:100%;height:100%;display:block}
.logomark .eyeL,.logomark .eyeR{transform-box:fill-box;transform-origin:center}
.realinput{width:100%;padding:12px 14px;border-radius:var(--r-sm);background:var(--inset);border:1.5px solid var(--stroke-2);font-family:var(--font-fa);font-size:14px;line-height:1.9;color:var(--text-1);outline:none;min-height:44px;transition:.2s var(--ease)}
.realinput:focus{border-color:var(--brand-400);box-shadow:0 0 0 3px rgba(41,121,255,.16);background:rgba(41,121,255,.06)}
.realinput:empty::before{content:attr(data-ph);color:var(--text-3);pointer-events:none}
.realinput.multiline{min-height:88px}
.realinput.flat{background:transparent;border:0;padding:8px 4px;min-height:34px;flex:1}
.realinput.flat:focus{box-shadow:none;background:transparent}
.realinput.en{direction:ltr;text-align:start;font-family:var(--font-en)}
.searchbar.focus{border-color:var(--brand-400);box-shadow:0 0 0 3px rgba(41,121,255,.14)}
.searchbar .realinput{background:transparent;border:0;padding:0;min-height:auto;flex:1}
.searchbar .realinput:focus{box-shadow:none}
.fieldlab{font-size:11px;font-weight:800;color:var(--text-3);margin-bottom:7px}
.emptystate{text-align:center;padding:30px 20px}
.emptystate b{display:block;font-size:14px;font-weight:800}
.emptystate span{display:block;font-size:12px;color:var(--text-3);margin-top:6px;line-height:1.9}
.plglow{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,rgba(41,121,255,.45),transparent 60%)}
.plicon{font-size:44px;position:relative;z-index:2;filter:drop-shadow(0 10px 24px rgba(0,0,0,.5))}
.plrings{position:absolute;inset:0;display:grid;place-items:center}
.plrings span{position:absolute;width:104px;height:104px;border-radius:50%;border:1.5px solid rgba(79,224,238,.35);animation:plPulse 3.4s infinite}
.plrings span:nth-child(2){animation-delay:1.1s}
.plrings span:nth-child(3){animation-delay:2.2s}
.plctrl{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:16px}
.plb{width:46px;height:46px;border-radius:16px;border:1px solid var(--stroke);background:var(--surface);font-size:18px;cursor:pointer;color:var(--text-1);transition:.2s var(--ease)}
.plb:active{transform:scale(.9)}
.plb.main{width:64px;height:64px;font-size:23px;background:var(--violet-grad);border:0;color:var(--ink-teal);box-shadow:0 14px 32px -10px var(--brand-glow)}
.ilevel{height:9px;border-radius:8px;background:var(--surface-2);position:relative;overflow:visible}
.ilevel i{display:block;height:100%;border-radius:8px;background:var(--aqua-grad);box-shadow:0 0 12px rgba(61,220,151,.5)}
.ilevel .imark{position:absolute;top:-4px;width:2.5px;height:17px;border-radius:8px;background:var(--gold-500);box-shadow:0 0 8px var(--gold-500)}
.iconpick,.colorpick{display:flex;gap:7px;flex-wrap:wrap}
.iconpick span{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:18px;background:var(--surface);border:1.5px solid var(--stroke);cursor:pointer;transition:.2s var(--ease)}
.iconpick span:active{transform:scale(.9)}
.iconpick span.on{border-color:var(--brand-400);background:rgba(41,121,255,.16);box-shadow:0 0 0 3px rgba(41,121,255,.14)}
.colorpick span{width:34px;height:34px;border-radius:12px;cursor:pointer;border:2.5px solid transparent;transition:.2s var(--ease)}
.colorpick span.on{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.22)}
.tmpl{display:flex;align-items:center;gap:9px;padding:12px 11px;border-radius:14px;background:var(--surface);border:1.5px solid var(--stroke);cursor:pointer;transition:.2s var(--ease)}
.tmpl:active{transform:scale(.95)}
.tmpl.on{border-color:var(--brand-400);background:rgba(41,121,255,.14)}
.tmpl span{font-size:20px}
.tmpl b{font-size:12px;font-weight:800}
.gtable.cmp td{text-align:center;font-size:11px}
.gtable.cmp td:first-child{text-align:start;font-weight:700}
.gtable.cmp td.yes{color:var(--lime-400);font-weight:800}
.planc{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 15px;border-radius:var(--r-md);background:var(--surface);border:1.5px solid var(--stroke);cursor:pointer;transition:.22s var(--ease)}
.planc:active{transform:scale(.98)}
.planc.on{border-color:var(--gold-400);background:linear-gradient(135deg,rgba(255,176,32,.16),rgba(41,121,255,.06));box-shadow:0 0 0 3px rgba(255,176,32,.14)}
.planc .pl2 b{display:block;font-size:14px;font-weight:900}
.planc .pl2 span{display:block;font-size:10px;color:var(--text-3);margin-top:3px}
.planc .pp{text-align:end;flex:0 0 auto}
.planc .pp b{display:block;font-size:15px;font-weight:900;color:var(--gold-400)}
.planc .pp span{display:block;font-size:10px;color:var(--text-3)}
.pbadge{position:absolute;top:-9px;inset-inline-start:14px;background:var(--gold-grad);color:var(--ink-gold);font-size:10px;font-weight:900;padding:3px 9px;border-radius:var(--r-pill)}
.exrow{display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:var(--r-md);background:var(--surface);border:1.5px solid var(--stroke);cursor:pointer;transition:.22s var(--ease)}
.exrow:active{transform:scale(.985)}
.exrow.on{border-color:var(--brand-400);background:rgba(41,121,255,.10)}
.exrow .exi{font-size:20px}
.exrow .rl{flex:1;min-width:0}
.exrow .rl b{display:block;font-size:12px;font-weight:800}
.exrow .rl span{display:block;font-size:10px;color:var(--text-3);margin-top:3px}
.exrow .exck{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;font-size:12px;border:1.5px solid var(--stroke-2);color:transparent}
.exrow.on .exck{background:var(--violet-grad);border-color:transparent;color:var(--ink-teal)}
.fmt{padding:12px 4px;border-radius:14px;background:var(--surface);border:1.5px solid var(--stroke);text-align:center;cursor:pointer;transition:.2s var(--ease)}
.fmt:active{transform:scale(.93)}
.fmt span{font-size:20px}
.fmt b{display:block;font-size:11px;font-weight:800;margin-top:4px}
.fmt small{display:block;font-size:9px;color:var(--text-3);margin-top:2px}
.fmt.on{border-color:var(--brand-400);background:rgba(41,121,255,.14)}
.timedial{display:flex;flex-direction:column;align-items:center;gap:4px}
.tarrow{border:0;background:var(--surface-2);width:44px;height:26px;border-radius:8px;cursor:pointer;color:var(--text-2);font-size:11px;transition:.2s var(--ease)}
.tarrow:active{transform:scale(.9)}
.tbig{font-size:44px;font-weight:900;letter-spacing:2px;color:var(--brand-400);text-shadow:0 0 24px rgba(41,121,255,.5)}
.dpick{flex:1;aspect-ratio:1;border-radius:12px;display:grid;place-items:center;font-size:12px;font-weight:800;background:var(--surface);border:1.5px solid var(--stroke);cursor:pointer;color:var(--text-3);transition:.2s var(--ease)}
.dpick:active{transform:scale(.9)}
.dpick.on{background:var(--violet-grad);color:var(--ink-teal);border-color:transparent;box-shadow:0 6px 16px -6px var(--brand-glow)}
.pbrow{padding:12px 13px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--stroke);border-inline-start:3px solid var(--brand-500);cursor:pointer;transition:.22s var(--ease)}
.pbrow:active{transform:scale(.985)}
.pbrow .pbe{font-family:var(--font-en);font-size:14px;font-weight:700;direction:ltr;text-align:start}
.pbrow .pbf{font-size:12px;color:var(--text-2);margin-top:5px}
.pbrow.f1{border-inline-start-color:var(--lime-500)}
.pbrow.f2{border-inline-start-color:var(--gold-500)}
.pbrow.f3{border-inline-start-color:var(--ai-500)}
.forgetbar{display:flex;height:34px;border-radius:12px;overflow:hidden;gap:2px;margin-top:14px}
.fseg{display:grid;place-items:center;font-size:10px;font-weight:800}
.fseg.risk{background:linear-gradient(135deg,#FF5D8F,#FF7A45);color:#fff}
.fseg.safe{background:rgba(61,220,151,.22);color:var(--lime-400)}
.conf{padding:13px 4px;border-radius:16px;background:var(--surface);border:1.5px solid var(--stroke);text-align:center;cursor:pointer;transition:.2s var(--ease)}
.conf:active{transform:scale(.93)}
.conf span{font-size:23px}
.conf small{display:block;font-size:9px;color:var(--text-3);margin-top:5px}
.conf.on{border-color:var(--brand-400);background:rgba(41,121,255,.14);box-shadow:0 0 0 3px rgba(41,121,255,.12)}
.nextstep{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:18px 17px;background:linear-gradient(140deg,rgba(41,121,255,.26),rgba(139,108,255,.14));border:1px solid rgba(41,121,255,.36);box-shadow:0 18px 44px -18px rgba(41,121,255,.5)}
.nextstep::after{content:'';position:absolute;top:-40%;inset-inline-end:-18%;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,rgba(79,224,238,.3),transparent 68%)}
.nsmark{width:44px;height:60px;flex:0 0 44px;background:none;border:0;padding:0;box-shadow:none;filter:drop-shadow(0 8px 18px rgba(0,212,193,.35))}
.nsbtn{margin-top:14px}
body.simple .dense{display:none!important}
body.simple .mini .mtrend{display:none}
.simplepill{display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--stroke);cursor:pointer;font-size:12px;font-weight:700}
.whychip{display:flex;gap:9px;align-items:flex-start;padding:10px 12px;border-radius:14px;background:rgba(139,108,255,.12);border:1px solid rgba(139,108,255,.28);font-size:12px;line-height:1.9;color:var(--text-2);margin-bottom:13px}
.whychip b{color:var(--ai-400)}
.srrow{display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--stroke);cursor:pointer;transition:.22s var(--ease)}
.srrow:active{transform:scale(.985)}
.srrow .sri{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:18px;flex:0 0 38px;background:var(--surface-2)}
.srrow .rl{flex:1;min-width:0}
.srrow .rl b{display:block;font-size:12px;font-weight:800}
.srrow .rl span{display:block;font-size:10px;color:var(--text-3);margin-top:3px}
.swatch{flex:1;height:24px;border-radius:8px;border:1px solid rgba(255,255,255,.14)}
.tailpad{height:18px}
.btn-primary,.btn-lime,.btn-gold{color:var(--ink-teal)}
.dv svg.ic,.lnum svg.ic,.evd svg.ic,.ai2 svg.ic,.vav svg.ic, .plb.main svg.ic,.micbtn svg.ic,.cbtn.send svg.ic,.tside svg.ic, .fseg svg.ic,.snum svg.ic,.cnum svg.ic,.ps svg.ic,.sn svg.ic, .dpick.on svg.ic,.bp.on svg.ic,.fchip.on svg.ic,.stab.on svg.ic, .cefrcell.cur svg.ic,.exrow.on .exck svg.ic,.bt.cur svg.ic, .iconbtn[style*="grad"] svg.ic,.card[style*="grad"] > svg
.chal .ci,.histcard .hi,.srrow .sri,.smrow .sn,.scen .se, .artrow .ac,.roundrow .rn,.evd,.lnum,.dv,.vav,.ai2{font-size:18px}
.milestone .mi2,.rewrow .rwi,.exrow .exi,.polrow .pl,.si,.hi2, .tnote .tt,.checkline > svg.ic,.cando > svg
.badge,.bcell .be{font-size:23px}
.seltool button svg
.ctxbtn svg
.gtable td svg.ic,.gtable th svg
.optbtn svg.ic,.matchb svg.ic,.duelopt svg
.gradebtn .ge svg
.conf span,.timecard b,.goalcard .gi,.fmt span,.tmpl span{font-size:23px}
.conf span svg.ic,.goalcard .gi svg.ic,.fmt span svg.ic,.tmpl span svg
.emptystate 
.vscene,.plicon{font-size:36px}
.mi2{font-size:18px}
.vscene svg.ic,.plicon svg
.dayd svg
.dayd.now svg
.ipabox svg.ic,.seg-n svg
.notehead svg.ic,.fixhead svg
.bub-msg svg
.attachcard .ah svg
.quotecard svg
.appbar .sub svg
.lb svg
.iconbtn,.backbtn,.cbtn,.mt,.ctxbtn,.chipbtn{color:var(--text-2)}
.iconbtn:hover,.backbtn:hover,.mt:hover,.chipbtn:hover{color:var(--text-1)}
.optbtn,.matchb,.duelopt,.gradebtn{color:var(--text-1)}
.hi2{color:var(--teal)}
.si,.mi2,.rwi,.exi,.pl{color:var(--brand-400)}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:8px}

@keyframes pulseGlow{0%,100%{box-shadow:0 12px 30px -8px var(--brand-glow)}50%{box-shadow:0 12px 44px -4px var(--brand-glow)}}


@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

@keyframes spinSlow{to{transform:rotate(360deg)}}

@keyframes popIn{0%{transform:scale(.85);opacity:0}100%{transform:scale(1);opacity:1}}

@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}

@keyframes wave{0%,100%{transform:scaleY(.28)}50%{transform:scaleY(1)}}

@keyframes haloPulse{0%{transform:scale(.75);opacity:.4}100%{transform:scale(1.5);opacity:0}}

@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

@keyframes tdot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}

@keyframes opFill{from{width:0}to{width:100%}}

@keyframes msgIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@keyframes dockIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@keyframes plPulse{0%{transform:scale(.7);opacity:.7}100%{transform:scale(1.9);opacity:0}}


@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}


@media(max-width:1180px){.side{display:none}}

@media(max-width:460px){
  body{padding:0}
  .phone{width:100vw;height:100vh;border-radius:0;box-shadow:none;border:0}
}

svg
.iconbox,.chal .ci,.histcard .hi,.srrow .sri,.smrow .sn,.scen .se, .artrow .ac,.modecard .mi,.qacard .iconbox,.lesson-hero-ic, .gw .gwi.ico,.actbtn .ai2,.dircell .di,.evd,.lnum,.dv,.vav,.bcell .be{background:var(--plate);border:1px solid var(--plate-line);box-shadow:none;color:var(--teal)}
.lesson-hero-ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(6px);flex:0 0 52px}
.lesson-hero-ic svg
.btn svg.ic,.tab.fab svg.ic,.cbtn.send svg.ic,.plb.main svg.ic, .micbtn svg.ic,.gradebtn svg.ic,.optbtn svg.ic,.duelopt svg.ic, .tfb svg.ic,.matchb svg
.tab.fab .tic.fabmark{border-radius:20px;position:relative;animation:pulseGlow 3.2s infinite;background:none;border:0;box-shadow:none;padding:0;width:56px;height:56px;margin-top:-24px;filter:drop-shadow(0 10px 22px rgba(0,212,193,.45))}
.tab.fab .tic.fabmark::after{display:none}
.tab.fab.on .tic.fabmark{transform:translateY(-3px) scale(1.06)}
.tab.fab .tic.fabmark .logomark{width:100%;height:100%}
.artrow .ac{aspect-ratio:1;width:56px;height:auto;border-radius:16px;flex:0 0 56px}
.scen .se{aspect-ratio:1;width:46px;height:auto;border-radius:14px;flex:0 0 46px;padding:0;display:grid;place-items:center}
.phwrap{position:relative;overflow:hidden;isolation:isolate}
.phwrap>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.booktile .cv{aspect-ratio:3/4;width:100%;height:auto}
.booktile{width:118px;flex:0 0 118px}
.podart{aspect-ratio:16/10;width:100%;height:auto}
.coach .ca{aspect-ratio:1;width:64px;height:auto;flex:0 0 64px}
.contcover{aspect-ratio:3/4;width:74px;height:auto;flex:0 0 74px}
.plart{aspect-ratio:16/9;width:100%;height:auto}
.vstage{aspect-ratio:16/9;width:100%;height:auto}
.card>.phwrap:first-child{border-radius:20px 20px 0 0}
.hscroll>.card{flex:0 0 auto}

.ic{width:20px;height:20px;flex:0 0 auto;display:block;
  fill:none;stroke:url(#igrad);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  overflow:visible;vertical-align:middle}
.ic.sm{width:16px;height:16px;stroke-width:1.8}
.ic.lg{width:26px;height:26px;stroke-width:1.45}

.plate{width:42px;height:42px;flex:0 0 42px;border-radius:14px;display:grid;place-items:center;
  background:var(--plate);border:1px solid var(--plate-line);transition:.22s var(--ease)}
.plate.sm{width:34px;height:34px;flex:0 0 34px;border-radius:12px}
.plate.lg{width:52px;height:52px;flex:0 0 52px;border-radius:18px}
.plate.lg .ic{width:26px;height:26px}
.plate.sm .ic{width:17px;height:17px}
.row:active .plate,.chal:active .plate,.milestone:active .plate{transform:scale(.92)}

.sect h3{display:flex;align-items:center;gap:8px;line-height:1.6}
.sect h3 .ic{width:19px;height:19px}
.appbar h2{display:flex;align-items:center;gap:8px}
.appbar h2 .ic{width:21px;height:21px}

.btn{gap:9px}
.btn .ic{width:18px;height:18px;stroke:currentColor;stroke-width:1.8}
.btn-sm .ic{width:16px;height:16px}
.iconbtn .ic,.backbtn .ic,.cbtn .ic{width:19px;height:19px;stroke:currentColor}
.mt .ic,.ctxbtn .ic,.chipbtn .ic{width:15px;height:15px;stroke:currentColor}
.chipbtn{display:inline-flex;align-items:center;gap:6px}
.tag{display:inline-flex;align-items:center;gap:5px}
.tag .ic{width:13px;height:13px;stroke:currentColor;stroke-width:1.9}
.stat{display:inline-flex;align-items:center;gap:6px}
.stat .ic{width:15px;height:15px;stroke:currentColor;stroke-width:1.8}
.muted .ic,.tiny .ic{width:14px;height:14px;display:inline-block;vertical-align:-.18em}
.optbtn .ic,.duelopt .ic,.matchb .ic,.gradebtn .ic,.tfb .ic{stroke:currentColor}
.dircell .di{width:38px;height:38px;flex:0 0 38px;border-radius:13px;display:grid;place-items:center;
  background:var(--plate);border:1px solid var(--plate-line)}
.qacard .iconbox{width:42px;height:42px;flex:0 0 42px;border-radius:15px;display:grid;place-items:center;
  background:var(--plate);border:1px solid var(--plate-line)}
.modecard .mi{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;margin-bottom:10px;
  background:var(--plate);border:1px solid var(--plate-line)}
.modecard .mi .ic{width:22px;height:22px}
.seltool button .ic{width:18px;height:18px;stroke:#5CE7F0}
.emptystate .ic{width:30px;height:30px}
.hint .hi2 .ic{width:17px;height:17px}
.lesson-hero-ic{width:54px;height:54px;flex:0 0 54px;border-radius:18px;display:grid;place-items:center;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(8px)}
.lesson-hero-ic .ic{width:27px;height:27px;stroke:#fff;stroke-width:1.6}
.tab .tic .ic{width:23px;height:23px;stroke:currentColor;stroke-width:1.7}
.plb .ic,.micbtn .ic,.vc .ic{stroke:currentColor}
.plb.main .ic,.micbtn .ic{width:24px;height:24px}

:root{
  --tap-xl:56px;
  --z-hero:26px; --z-h1:20px; --z-h2:17px; --z-body:15px; --z-label:13px; --z-meta:12px;
}
.friendly{font-size:var(--z-body);line-height:2}
.friendly .sect h3{font-size:var(--z-h2)}
.friendly .sect a{font-size:var(--z-label);padding:6px 10px;border-radius:12px;background:var(--surface)}
.friendly .appbar h2{font-size:var(--z-h1)}
.friendly .appbar .sub{font-size:var(--z-label)}
.friendly .muted{font-size:var(--z-label);line-height:2.05}
.friendly .tiny{font-size:var(--z-meta)}
.friendly .stp{height:11px;border-radius:8px}
.friendly .stp.on{transform:scaleY(1.45)}
.friendly .steps{display:flex;gap:6px}
.friendly .lessonbar{padding:6px 16px 14px}
.friendly .lbtop .lt b{font-size:17px;font-weight:900;display:flex;align-items:center;gap:8px}
.friendly .lbtop .lt b .ic{width:22px;height:22px}
.friendly .lbtop .lt span{font-size:12px}
.friendly .smrow{padding:15px 15px;border-radius:20px;gap:14px;min-height:var(--tap-xl)}
.friendly .smrow .sn{width:50px;height:50px;flex:0 0 50px;border-radius:17px}
.friendly .smrow .sn .ic{width:24px;height:24px}
.friendly .smrow .sl2 b{font-size:16px}
.friendly .smrow .sl2 span{font-size:12px;margin-top:3px}
.friendly .smconn{margin-inline-start:38px;height:12px;width:3px}
.friendly .whychip{font-size:13px;line-height:2}
.friendly .stepnav .btn{min-height:60px;font-size:17px;font-weight:900}
.friendly .optbtn,.friendly .matchb{min-height:54px;font-size:15px;border-radius:18px}
.friendly .tfb{width:46px;height:46px;border-radius:15px}
.friendly .chal{min-height:66px;border-radius:22px;padding:14px 15px;gap:14px}
.friendly .chal .ci{width:50px;height:50px;flex:0 0 50px;border-radius:17px}
.friendly .chal .cb b{font-size:16px}
.friendly .conf span,.friendly .tmpl span,.friendly .fmt span{display:grid;place-items:center}
.friendly .conf .ic,.friendly .tmpl .ic,.friendly .fmt .ic{width:24px;height:24px}
.friendly .bdg span .ic{width:26px;height:26px}
.friendly .cando .ic,.friendly .checkline .ic{width:19px;height:19px}
.friendly .btn{min-height:var(--tap-xl);font-size:16px;border-radius:20px}
.friendly .btn svg.ic{width:21px;height:21px}
.friendly .tag{font-size:var(--z-meta);padding:7px 12px}
.friendly .stat{font-size:var(--z-label);padding:9px 14px;gap:7px}
.friendly .stat svg.ic{width:18px;height:18px}
.friendly .plate{width:50px;height:50px;flex:0 0 50px;border-radius:17px}
.friendly .plate svg.ic{width:25px;height:25px}
.friendly .row{padding:15px 16px;gap:14px;min-height:var(--tap-xl);border-radius:20px}
.friendly .row .rl b{font-size:var(--z-body)}
.friendly .row .rl span{font-size:var(--z-label);margin-top:4px}
.friendly .card{padding:18px;border-radius:24px}
.friendly .iconbtn,.friendly .backbtn{width:46px;height:46px;border-radius:16px}
.friendly .iconbtn svg.ic,.friendly .backbtn svg.ic{width:21px;height:21px}

.hero{position:relative;overflow:hidden;border-radius:28px;padding:20px;
  background:linear-gradient(150deg,rgba(0,212,193,.22),rgba(41,121,255,.16) 55%,rgba(123,97,255,.14));
  border:1px solid rgba(0,212,193,.32);box-shadow:0 22px 50px -22px rgba(0,212,193,.5)}
.hero::after{content:'';position:absolute;top:-45%;inset-inline-end:-15%;width:230px;height:230px;
  border-radius:50%;background:radial-gradient(circle,rgba(0,212,193,.3),transparent 68%);pointer-events:none}
.hero-top{display:flex;align-items:center;gap:14px;position:relative}
.hero-mark{width:58px;height:78px;flex:0 0 58px;filter:drop-shadow(0 10px 20px rgba(0,212,193,.5))}
.hero-kicker{font-size:var(--z-meta);font-weight:800;color:var(--teal);letter-spacing:.3px}
.hero-title{font-size:var(--z-hero);font-weight:900;line-height:1.5;margin-top:4px}
.hero-sub{font-size:var(--z-label);color:var(--text-2);margin-top:6px;line-height:1.95}
.hero .btn{margin-top:18px;min-height:60px;font-size:17px}

.steps5{display:flex;gap:9px;align-items:center;justify-content:center}
.dot5{flex:1;height:12px;border-radius:8px;background:var(--surface-2);border:1px solid var(--stroke);
  position:relative;transition:.4s var(--ease)}
.dot5.done{background:var(--aqua-grad);border-color:transparent;box-shadow:0 0 14px rgba(0,212,193,.55)}
.dot5.now{background:var(--brand-grad);border-color:transparent;box-shadow:0 0 16px rgba(41,121,255,.6);
  transform:scaleY(1.5)}

.bigtiles{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}
.bigtile{display:flex;flex-direction:column;align-items:center;gap:9px;padding:16px 6px 14px;
  border-radius:22px;background:var(--surface);border:1px solid var(--stroke);cursor:pointer;
  transition:.22s var(--ease);min-height:96px;justify-content:center;backdrop-filter:var(--blur)}
.bigtile:active{transform:scale(.93)}
.bigtile .bt-ic{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;
  background:var(--plate);border:1px solid var(--plate-line)}
.bigtile .bt-ic svg.ic{width:24px;height:24px}
.bigtile b{font-size:var(--z-meta);font-weight:800;text-align:center;line-height:1.5}

.streakrow{display:flex;justify-content:space-between;gap:6px}
.sday{flex:1;text-align:center}
.sday .sd-l{font-size:11px;color:var(--text-3);margin-bottom:7px}
.sday .sd-b{height:40px;border-radius:14px;display:grid;place-items:center;
  background:var(--surface-2);border:1px dashed var(--stroke-2)}
.sday .sd-b svg.ic{width:19px;height:19px}
.sday.on .sd-b{background:rgba(255,200,87,.16);border:1px solid rgba(255,200,87,.45)}
.sday.today .sd-b{background:var(--brand-grad);border:0;box-shadow:0 8px 20px -8px var(--brand-glow);color:#04222E}

.bigstat{display:flex;gap:11px}
.bigstat .bs{flex:1;text-align:center;padding:14px 6px;border-radius:20px;
  background:var(--surface);border:1px solid var(--stroke)}
.bigstat .bs b{display:block;font-size:23px;font-weight:900}
.bigstat .bs span{display:block;font-size:11.5px;color:var(--text-3);margin-top:4px}
.ringwrap{position:relative;width:88px;height:88px;flex:0 0 88px}
.ringwrap svg{width:88px;height:88px}
.ringnum{position:absolute;inset:0;display:grid;place-items:center;font-size:24px;font-weight:900}
.chapgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.chapcell{padding:14px 8px;border-radius:20px;background:var(--surface);border:1px solid var(--stroke);
  text-align:center;cursor:pointer;transition:.22s var(--ease)}
.chapcell:active{transform:scale(.93)}
.chapcell .cnum2{width:38px;height:38px;border-radius:14px;display:grid;place-items:center;margin:0 auto 8px;
  background:var(--plate);border:1px solid var(--plate-line)}
.chapcell .cnum2 svg.ic{width:20px;height:20px}
.chapcell b{display:block;font-size:12.5px;font-weight:800}
.chapcell small{display:block;font-size:11px;color:var(--text-3);margin-top:3px}
.chapcell.done .cnum2{background:rgba(61,220,151,.16);border-color:rgba(61,220,151,.4)}
.chapcell.cur{border-color:var(--teal);background:rgba(0,212,193,.10);box-shadow:0 0 0 3px rgba(0,212,193,.12)}
.chapcell.lock{opacity:.5}
.friendly .node .bub{width:74px;height:74px;flex:0 0 74px;border-radius:26px}
.friendly .node .bub svg.ic{width:30px;height:30px}
.friendly .node .meta b{font-size:15px}
.friendly .node .meta span{font-size:12.5px;margin-top:4px}
.friendly .connector{margin-inline-start:36px;height:22px;width:4px}
.node{display:flex;align-items:center;gap:15px;margin-bottom:4px;cursor:pointer}
.node .meta{flex:1;min-width:0}
.node .tag{flex:0 0 auto}


/* ══════════════════════════════════════════════════════════════════════════
   زبان‌یار — DESIGN SYSTEM v3
   ──────────────────────────────────────────────────────────────────────────
   A single override layer applied on top of the v1 prototype stylesheet.
   Everything below re-expresses the app in the v2 design language:

     · 4px spacing grid, exposed as --s-1 … --s-9
     · a real type scale with locked line-heights (--t-display … --t-label)
     · 44px minimum tap target enforced on every interactive primitive
     · semantic colour roles (brand / aqua / ai / ok / warn / danger / gold)
       instead of raw hex, so both themes stay AA without per-screen fixes
     · one elevation ramp, one motion curve, one border-radius family
     · prefers-reduced-motion honoured globally

   Ordering matters: tokens → primitives → components → screens → utilities.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · SPACING, RADIUS, MOTION, TAP ─────────────────────────────────── */
:root{
  /* 4px grid. Nothing in the app should use a bare pixel gap any more. */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px;
  --s-5:20px; --s-6:24px; --s-7:32px; --s-8:40px; --s-9:56px;

  /* gutter — the single horizontal rhythm every screen aligns to */
  --gut:20px;

  /* radius family — tighter at the small end than v1, which read soft/blobby */
  --r-xs:10px; --r-sm:14px; --r-md:18px; --r-lg:24px; --r-xl:32px;
  --r-2xl:40px; --r-pill:999px;

  /* motion — one curve for entrances, one for exits, one duration ramp */
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-in:cubic-bezier(.4,0,1,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1);
  --d-1:.14s; --d-2:.22s; --d-3:.34s; --d-4:.48s;

  /* accessibility */
  --tap:44px;              /* WCAG 2.5.5 target size */
  --focus:0 0 0 3px rgba(0,212,193,.55), 0 0 0 5px rgba(8,12,26,.9);

  /* typography — font, weight, size, line-height locked together so a
     component can never accidentally ship a 13px/1.2 label */
  --f-fa:'IRANSansWeb','IRANSans','Vazirmatn',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-en:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  --t-display:900 28px/1.32 var(--f-fa);
  --t-h1:900 23px/1.38 var(--f-fa);
  --t-h2:800 19px/1.45 var(--f-fa);
  --t-h3:800 16px/1.5  var(--f-fa);
  --t-body:500 14px/1.85 var(--f-fa);
  --t-sm:500 13px/1.8  var(--f-fa);
  --t-label:700 12.5px/1.6 var(--f-fa);
  --t-caption:500 11.5px/1.75 var(--f-fa);
  --t-micro:700 10.5px/1.5 var(--f-fa);

  /* brand ramp — unchanged hues, but now named by role, not by colour */
  --c-teal:#00D4C1;  --c-teal-4:#3FE4D6;  --c-teal-6:#009F91;
  --c-blue:#2979FF;  --c-blue-4:#5C97FF;  --c-blue-6:#1B5FD8;
  --c-violet:#7B61FF;--c-violet-4:#9B87FF;--c-violet-6:#5D42E0;
  --c-lime:#3DDC97;  --c-lime-4:#5FEBAE;  --c-lime-6:#1FA76F;
  --c-gold:#FFC857;  --c-gold-4:#FFD98A;  --c-gold-6:#BD871C;
  --c-rose:#FF5D8F;  --c-rose-4:#FF87AC;  --c-rose-6:#E03A70;

  /* semantic roles */
  --brand:var(--c-blue);
  --aqua:var(--c-teal);
  --ai:var(--c-violet);
  --ok:var(--c-lime);
  --warn:var(--c-gold);
  --danger:var(--c-rose);

  /* gradients */
  --g-brand:linear-gradient(135deg,#00D4C1 0%,#2979FF 52%,#7B61FF 100%);
  --g-aqua:linear-gradient(135deg,#00D4C1 0%,#3DDC97 100%);
  --g-ai:linear-gradient(135deg,#7B61FF 0%,#9B6CFF 55%,#FF5D8F 100%);
  --g-gold:linear-gradient(135deg,#FFC857 0%,#FF9A3D 100%);
  --g-rose:linear-gradient(135deg,#FF5D8F 0%,#7B61FF 100%);
  --g-ok:linear-gradient(135deg,#3DDC97 0%,#00D4C1 100%);

  /* ink used on top of a saturated brand fill — never plain white, which
     vibrates against teal at this weight */
  --on-brand:#011018;
  --on-gold:#241300;

  --dock:104px;
}

/* ── 2 · THEME SURFACES ───────────────────────────────────────────────── */
[data-theme="dark"]{
  --bg-0:#070B18;  --bg-1:#0C1224;  --bg-2:#131B33;  --bg-3:#1B2445;
  --surface:rgba(255,255,255,.055);
  --surface-2:rgba(255,255,255,.085);
  --surface-3:rgba(255,255,255,.13);
  --stroke:rgba(255,255,255,.095);
  --stroke-2:rgba(255,255,255,.17);
  --text-1:#F4F6FF;  --text-2:#A7B0CF;  --text-3:#6A749A;
  --inset:rgba(0,0,0,.26);
  --plate:rgba(0,212,193,.10);
  --plate-line:rgba(0,212,193,.24);
  --shadow-xs:0 2px 8px -4px rgba(0,0,0,.6);
  --shadow-sm:0 8px 24px -12px rgba(0,0,0,.72);
  --shadow-md:0 16px 40px -16px rgba(0,0,0,.8);
  --shadow-lg:0 28px 66px -20px rgba(0,0,0,.88);
  --glow-brand:0 18px 44px -16px rgba(41,121,255,.6);
  --glow-aqua:0 18px 44px -16px rgba(0,212,193,.55);
  --blur:saturate(180%) blur(22px);
  --scrim:linear-gradient(180deg,rgba(7,11,24,0) 0%,rgba(7,11,24,.86) 46%,rgba(7,11,24,.97) 100%);
  --img-veil:linear-gradient(190deg,rgba(7,11,24,.18) 0%,rgba(7,11,24,.72) 58%,rgba(7,11,24,.94) 100%);
  --focus:0 0 0 3px rgba(0,212,193,.55), 0 0 0 5px rgba(7,11,24,.9);
}
[data-theme="light"]{
  --bg-0:#F2F5FA;  --bg-1:#FFFFFF;  --bg-2:#F7FAFE;  --bg-3:#E9EFF8;
  --surface:rgba(255,255,255,.9);
  --surface-2:rgba(41,121,255,.065);
  --surface-3:rgba(41,121,255,.11);
  --stroke:rgba(18,22,46,.085);
  --stroke-2:rgba(18,22,46,.15);
  --text-1:#101430;  --text-2:#535A82;  --text-3:#888FB2;
  --inset:rgba(18,22,46,.05);
  --plate:rgba(0,212,193,.13);
  --plate-line:rgba(0,169,154,.3);
  --shadow-xs:0 2px 6px -3px rgba(60,50,140,.16);
  --shadow-sm:0 8px 22px -14px rgba(60,50,140,.3);
  --shadow-md:0 16px 36px -18px rgba(60,50,140,.32);
  --shadow-lg:0 26px 56px -22px rgba(60,50,140,.34);
  --glow-brand:0 16px 38px -18px rgba(41,121,255,.5);
  --glow-aqua:0 16px 38px -18px rgba(0,169,154,.45);
  --blur:saturate(180%) blur(18px);
  --scrim:linear-gradient(180deg,rgba(242,245,250,0) 0%,rgba(242,245,250,.88) 46%,rgba(242,245,250,.98) 100%);
  --img-veil:linear-gradient(190deg,rgba(10,14,34,.1) 0%,rgba(10,14,34,.6) 58%,rgba(10,14,34,.86) 100%);
  --focus:0 0 0 3px rgba(0,169,154,.5), 0 0 0 5px rgba(255,255,255,.95);

  /* light theme needs darker accents to clear 4.5:1 on white */
  --aqua:#009F91;
  --ok:#1FA76F;
  --warn:#BD871C;
}

/* ── 3 · GLOBAL RESET ADDENDUM ────────────────────────────────────────── */
*,*::before,*::after{ -webkit-tap-highlight-color:transparent }

body{
  font-family:var(--f-fa);
  background:
    radial-gradient(1100px 640px at 12% -12%, rgba(41,121,255,.16), transparent 62%),
    radial-gradient(900px 560px at 92% 4%, rgba(123,97,255,.14), transparent 60%),
    radial-gradient(760px 520px at 50% 108%, rgba(0,212,193,.10), transparent 62%),
    var(--bg-0);
  background-attachment:fixed;
}
body[data-theme="light"]{
  background:
    radial-gradient(1100px 640px at 12% -12%, rgba(41,121,255,.11), transparent 62%),
    radial-gradient(900px 560px at 92% 4%, rgba(123,97,255,.09), transparent 60%),
    radial-gradient(760px 520px at 50% 108%, rgba(0,212,193,.10), transparent 62%),
    var(--bg-0);
}

/* Focus is never removed — only restyled, and only for keyboard users. */
:focus{ outline:none }
:focus-visible{ outline:none; box-shadow:var(--focus); border-radius:var(--r-xs) }

/* Selection picks up the brand rather than the OS default blue. */
::selection{ background:rgba(0,212,193,.3); color:var(--text-1) }

/* Numerals: Persian text, Latin figures — the app mixes both constantly,
   so the English face is scoped to a class instead of guessed per element. */
.en,.num{ font-family:var(--f-en); font-feature-settings:"tnum" 1,"lnum" 1 }


/* ══════════════════════════════════════════════════════════════════════════
   4 · DEVICE SHELL & SCREEN CHROME
   The phone frame, status bar, scroll container and screen transition.
   ══════════════════════════════════════════════════════════════════════════ */

.phone{
  width:390px; height:844px; flex:0 0 390px;
  border-radius:44px;
  background:var(--bg-0);
  border:1px solid var(--stroke);
  box-shadow:
    0 0 0 10px #101423,
    0 0 0 11.5px rgba(255,255,255,.09),
    0 0 0 12px rgba(0,0,0,.5),
    0 60px 130px -34px rgba(0,0,0,.92);
}
body[data-theme="light"] .phone{
  box-shadow:
    0 0 0 10px #E4E9F2,
    0 0 0 11.5px rgba(255,255,255,.9),
    0 0 0 12px rgba(60,50,140,.14),
    0 50px 110px -34px rgba(60,50,140,.34);
}

/* Inner hairline — reads as glass thickness, not as a border. */
.phone::before{
  content:''; position:absolute; inset:0; border-radius:inherit; z-index:60;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),
             inset 0 1px 0 rgba(255,255,255,.14);
}
body[data-theme="light"] .phone::before{
  box-shadow:inset 0 0 0 1px rgba(18,22,46,.06),
             inset 0 1px 0 rgba(255,255,255,.9);
}

.notch{
  position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:112px; height:29px; border-radius:var(--r-pill);
  background:#080B16; z-index:40;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
body[data-theme="light"] .notch{
  background:#0E1120; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}

.statusbar{
  position:absolute; top:0; left:0; right:0; height:52px; z-index:38;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--s-6) 0;
  font:var(--t-micro); color:var(--text-1);
  pointer-events:none; letter-spacing:.2px;
}
.statusbar .icons,.statusbar .sb-r{
  display:flex; align-items:center; gap:var(--s-2); opacity:.85;
}

.viewport{ position:absolute; inset:0; z-index:5; overflow:hidden }

/* ── SCREEN ───────────────────────────────────────────────────────────────
   Screens are stacked and cross-faded. The inactive ones keep visibility:
   hidden so their focusable children stay out of the tab order.          */
.screen{
  position:absolute; inset:0;
  overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:56px 0 var(--dock);
  opacity:0; visibility:hidden;
  transform:translateY(10px) scale(.99);
  transition:opacity var(--d-3) var(--e-out),
             transform var(--d-4) var(--e-out),
             visibility var(--d-3);
  scrollbar-width:none;
}
.screen::-webkit-scrollbar{ width:0; height:0 }
.screen.active{ opacity:1; visibility:visible; transform:none }

/* Full-attention screens (a lesson step, a live call) drop the tab bar and
   reclaim its space. */
.screen.no-dock,.screen.nodock{ padding-bottom:var(--s-6) }
.screen.withdock{ padding-bottom:var(--dock) }

.pad{ padding:0 var(--gut) }
.pad.dense{ padding:0 var(--gut) }
.tailpad{ height:var(--s-9) }

/* ── SECTION HEADER ───────────────────────────────────────────────────────
   The rhythm marker of every screen: 32px above, 12px below, and the label
   is deliberately smaller than the content it introduces.                */
.sect{
  margin:var(--s-7) 0 var(--s-3);
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-3); padding:0 var(--gut);
}
.sect.dense{ margin-top:var(--s-6) }
.sect h3{
  margin:0; display:flex; align-items:center; gap:var(--s-2);
  font:var(--t-h3); color:var(--text-1); letter-spacing:-.2px;
}
.sect h3 .ic{ width:17px; height:17px; color:var(--aqua); flex:0 0 17px }
.sect a,.sect .link{
  display:inline-flex; align-items:center; gap:var(--s-1);
  font:var(--t-label); color:var(--aqua);
  cursor:pointer; background:none; border:0; padding:var(--s-2);
  margin:calc(var(--s-2) * -1);
  border-radius:var(--r-xs); transition:var(--d-2) var(--e-out);
}
.sect a:hover,.sect .link:hover{ color:var(--c-teal-4); gap:var(--s-2) }
.sect a .ic,.sect .link .ic{ width:13px; height:13px }

/* ── APP BAR ──────────────────────────────────────────────────────────── */
.appbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-3); padding:var(--s-2) var(--gut) var(--s-4);
}
.appbar h2{
  margin:0; display:flex; align-items:center; gap:var(--s-2);
  font:var(--t-h1); color:var(--text-1); letter-spacing:-.5px;
}
.appbar h2 .ic{ width:21px; height:21px; color:var(--aqua) }
.appbar .sub{
  margin-top:2px; font:var(--t-caption); color:var(--text-2);
}
.appbar-t{ min-width:0 }
.appbar-t h2{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

.chipstat,.chips{ display:flex; align-items:center; gap:var(--s-2); flex:0 0 auto }

/* ── AVATAR ───────────────────────────────────────────────────────────── */
.avatar{
  position:relative; width:var(--tap); height:var(--tap); flex:0 0 var(--tap);
  border-radius:var(--r-sm); display:grid; place-items:center;
  background:var(--surface-2); border:1px solid var(--stroke);
  color:var(--text-1); cursor:pointer; padding:0;
  transition:var(--d-2) var(--e-out);
}
.avatar:hover{ background:var(--surface-3) }
.avatar .ring{
  position:absolute; inset:-3px; border-radius:calc(var(--r-sm) + 3px);
  background:var(--g-brand); z-index:-1; opacity:.55;
  filter:blur(5px);
}
.avatar .ic{ width:21px; height:21px }

/* ── ICON BUTTON ──────────────────────────────────────────────────────────
   44px hit area, 38px visible box — the extra 6px is transparent padding,
   which is how you satisfy the tap-target rule without a chunky UI.      */
.iconbtn,.backbtn,.cbtn,.mt,.ctxbtn{
  width:var(--tap); height:var(--tap); flex:0 0 var(--tap);
  border-radius:var(--r-sm);
  background:var(--surface); border:1px solid var(--stroke);
  display:grid; place-items:center; cursor:pointer; padding:0;
  color:var(--text-1); backdrop-filter:var(--blur);
  transition:var(--d-2) var(--e-out);
}
.iconbtn:hover,.backbtn:hover,.cbtn:hover,.mt:hover,.ctxbtn:hover{
  background:var(--surface-2); border-color:var(--stroke-2);
  transform:translateY(-1px);
}
.iconbtn:active,.backbtn:active,.cbtn:active,.mt:active,.ctxbtn:active{
  transform:scale(.94);
}
.iconbtn .ic,.backbtn .ic,.cbtn .ic,.mt .ic,.ctxbtn .ic{ width:18px; height:18px }

/* ── ICON SIZING SCALE ───────────────────────────────────────────────────
   One stroke weight (1.75) across the whole app. Icons scale by class, and
   the stroke does NOT scale with them, so a 28px icon does not read heavier
   than a 14px one.                                                       */
.ic{
  width:18px; height:18px; flex:0 0 auto; display:inline-block;
  fill:none; stroke:currentColor; stroke-width:1.75;
  stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.ic.xs{ width:13px; height:13px; stroke-width:2 }
.ic.sm{ width:16px; height:16px; stroke-width:1.85 }
.ic.lg{ width:21px; height:21px; stroke-width:1.7 }
.ic.xl{ width:26px; height:26px; stroke-width:1.6 }
.ic.xxl{ width:34px; height:34px; stroke-width:1.5 }
.ic.inline{ vertical-align:-2px }

/* ── HORIZONTAL SCROLLER ──────────────────────────────────────────────── */
.hscroll{
  display:flex; gap:var(--s-3);
  overflow-x:auto; overflow-y:hidden;
  padding:var(--s-1) var(--gut) var(--s-2);
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  scroll-padding-inline:var(--gut);
}
.hscroll::-webkit-scrollbar{ height:0 }
.hscroll>*{ scroll-snap-align:start; flex:0 0 auto }


/* ══════════════════════════════════════════════════════════════════════════
   5 · PRIMITIVES — card, button, tag, chip, bar, row, field
   These cascade into all 60 screens, so every rule here is doing 60× work.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── CARD ─────────────────────────────────────────────────────────────────
   One surface, three densities. The border is doing the structural work,
   not the shadow — shadows at this size read as blur, not elevation.    */
.card{
  background:var(--surface);
  border:1px solid var(--stroke);
  border-radius:var(--r-lg);
  padding:var(--s-4);
  backdrop-filter:var(--blur);
  box-shadow:var(--shadow-sm);
  position:relative;
}
.card.tight{ padding:var(--s-3) }
.card.loose{ padding:var(--s-5) }
.card.flat{ box-shadow:none; background:var(--surface-2) }
.card.clickable,.card[onclick]{ cursor:pointer; transition:var(--d-2) var(--e-out) }
.card.clickable:hover,.card[onclick]:hover{
  border-color:var(--stroke-2); transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}

/* ── BUTTON ───────────────────────────────────────────────────────────────
   Full-width by default because the primary action on a phone screen
   almost always is. min-height locks the tap target.                    */
.btn{
  display:flex; align-items:center; justify-content:center; gap:var(--s-2);
  width:100%; min-height:var(--tap);
  padding:var(--s-4) var(--s-5);
  border:0; border-radius:var(--r-md);
  font:800 14.5px/1 var(--f-fa);
  color:#fff; cursor:pointer;
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform var(--d-2) var(--e-out), box-shadow var(--d-2) var(--e-out),
             background var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out);
}
.btn .ic{ width:18px; height:18px }
.btn:hover{ transform:translateY(-2px) }
.btn:active{ transform:translateY(0) scale(.98) }
.btn:disabled{ opacity:.42; cursor:not-allowed; transform:none !important }

/* sheen — a single pass on hover, not a permanent shimmer */
.btn::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.3) 50%,transparent 68%);
  transform:translateX(-120%); transition:transform .6s var(--e-out);
}
.btn:hover::after{ transform:translateX(120%) }

.btn-primary{ background:var(--g-brand); color:var(--on-brand); box-shadow:var(--glow-brand) }
.btn-primary:hover{ box-shadow:0 22px 52px -16px rgba(41,121,255,.7) }
.btn-lime,.btn-ok{ background:var(--g-ok); color:var(--on-brand); box-shadow:var(--glow-aqua) }
.btn-gold{ background:var(--g-gold); color:var(--on-gold); box-shadow:0 18px 44px -16px rgba(255,200,87,.55) }
.btn-ai{ background:var(--g-ai); color:#fff; box-shadow:0 18px 44px -16px rgba(123,97,255,.6) }
.btn-rose,.btn-danger{ background:var(--g-rose); color:#fff; box-shadow:0 18px 44px -16px rgba(255,93,143,.55) }

.btn-ghost{
  background:var(--surface); color:var(--text-1);
  border:1px solid var(--stroke); box-shadow:none;
  backdrop-filter:var(--blur);
}
.btn-ghost:hover{ background:var(--surface-2); border-color:var(--stroke-2) }

.btn-quiet{
  background:transparent; color:var(--text-2);
  border:1px solid transparent; box-shadow:none;
  font-weight:700;
}
.btn-quiet:hover{ background:var(--surface); color:var(--text-1) }

.btn-sm{
  width:auto; min-height:38px; padding:var(--s-2) var(--s-4);
  font-size:12.5px; border-radius:var(--r-sm);
}
.btn-sm .ic{ width:15px; height:15px }
.btn-lg{ min-height:54px; font-size:16px; border-radius:var(--r-lg) }

/* two buttons on one line — 60/40, primary leading */
.btn-row{ display:flex; gap:var(--s-2) }
.btn-row .btn{ flex:1 }

/* ── TAG ──────────────────────────────────────────────────────────────────
   Read-only status. Never interactive unless it also carries .pick.     */
.tag{
  display:inline-flex; align-items:center; gap:var(--s-1);
  padding:var(--s-1) var(--s-2);
  border-radius:var(--r-pill);
  font:var(--t-micro);
  background:var(--surface-2); border:1px solid var(--stroke);
  color:var(--text-2); white-space:nowrap;
}
.tag .ic{ width:12px; height:12px }
.tag.brand,.tag.v{ background:rgba(41,121,255,.15); border-color:rgba(41,121,255,.32); color:var(--c-blue-4) }
.tag.aqua,.tag.a{ background:rgba(0,212,193,.14); border-color:rgba(0,212,193,.32); color:var(--c-teal) }
.tag.ok,.tag.g{ background:rgba(61,220,151,.14); border-color:rgba(61,220,151,.32); color:var(--c-lime) }
.tag.warn,.tag.o{ background:rgba(255,200,87,.15); border-color:rgba(255,200,87,.34); color:var(--c-gold) }
.tag.danger,.tag.r{ background:rgba(255,93,143,.15); border-color:rgba(255,93,143,.34); color:var(--c-rose) }
.tag.ai{ background:rgba(123,97,255,.16); border-color:rgba(123,97,255,.34); color:var(--c-violet-4) }
body[data-theme="light"] .tag.brand,body[data-theme="light"] .tag.v{ color:var(--c-blue-6) }
body[data-theme="light"] .tag.aqua,body[data-theme="light"] .tag.a{ color:var(--c-teal-6) }
body[data-theme="light"] .tag.ok,body[data-theme="light"] .tag.g{ color:var(--c-lime-6) }
body[data-theme="light"] .tag.warn,body[data-theme="light"] .tag.o{ color:var(--c-gold-6) }
body[data-theme="light"] .tag.danger,body[data-theme="light"] .tag.r{ color:var(--c-rose-6) }
body[data-theme="light"] .tag.ai{ color:var(--c-violet-6) }

.tags{ display:flex; flex-wrap:wrap; gap:var(--s-2) }

/* selectable tag (self-assessment "where did you get stuck") */
.tag.pick{ cursor:pointer; min-height:34px; padding:var(--s-2) var(--s-3);
  transition:var(--d-2) var(--e-out) }
.tag.pick:hover{ transform:translateY(-1px) }
.tag.pick.on{ background:var(--g-brand); border-color:transparent; color:var(--on-brand) }

/* ── CHIP / STAT PILL ─────────────────────────────────────────────────── */
.chip,.stat{
  display:inline-flex; align-items:center; gap:var(--s-1);
  min-height:32px; padding:var(--s-1) var(--s-3);
  border-radius:var(--r-pill);
  font:700 12px/1 var(--f-fa);
  background:var(--surface); border:1px solid var(--stroke);
  color:var(--text-1); backdrop-filter:var(--blur);
}
.chip .ic,.stat .ic{ width:14px; height:14px }
.chip.fire,.stat.fire{ color:var(--c-gold); border-color:rgba(255,200,87,.34); background:rgba(255,200,87,.13) }
.chip.gem,.stat.gem{ color:var(--c-teal); border-color:rgba(0,212,193,.32); background:rgba(0,212,193,.12) }
.chip.xp,.stat.xp{ color:var(--c-violet-4); border-color:rgba(123,97,255,.32); background:rgba(123,97,255,.13) }
body[data-theme="light"] .chip.fire,body[data-theme="light"] .stat.fire{ color:var(--c-gold-6) }
body[data-theme="light"] .chip.gem,body[data-theme="light"] .stat.gem{ color:var(--c-teal-6) }
body[data-theme="light"] .chip.xp,body[data-theme="light"] .stat.xp{ color:var(--c-violet-6) }

/* ── FILTER CHIP (scrolling filter rows) ──────────────────────────────── */
.fchip,.chipbtn{
  display:inline-flex; align-items:center; gap:var(--s-2);
  min-height:38px; padding:var(--s-2) var(--s-4);
  border-radius:var(--r-pill);
  font:var(--t-label); white-space:nowrap;
  background:var(--surface); border:1px solid var(--stroke);
  color:var(--text-2); cursor:pointer;
  transition:var(--d-2) var(--e-out);
}
.fchip .ic,.chipbtn .ic{ width:15px; height:15px }
.fchip:hover,.chipbtn:hover{ background:var(--surface-2); color:var(--text-1) }
.fchip:active,.chipbtn:active{ transform:scale(.96) }
.fchip.on,.chipbtn.on{
  background:var(--g-brand); border-color:transparent;
  color:var(--on-brand); box-shadow:var(--glow-brand);
}
.fchip .fc-n{
  min-width:20px; padding:0 5px; height:19px; border-radius:var(--r-pill);
  display:grid; place-items:center; font:var(--t-micro);
  background:var(--surface-3);
}
.fchip.on .fc-n{ background:rgba(4,34,46,.22) }

.filterrow{
  display:flex; gap:var(--s-2); overflow-x:auto;
  padding:var(--s-1) var(--gut) var(--s-2);
  scrollbar-width:none;
}
.filterrow::-webkit-scrollbar{ height:0 }

/* ── PROGRESS BAR ─────────────────────────────────────────────────────── */
.bar{
  height:8px; border-radius:var(--r-pill);
  background:var(--inset); overflow:hidden; position:relative;
}
.bar i{
  display:block; height:100%; width:0; border-radius:inherit;
  background:var(--g-brand);
  transition:width .9s var(--e-out);
}
.bar.v i,.bar.brand i{ background:var(--g-brand) }
.bar.a i,.bar.aqua i{ background:var(--g-aqua) }
.bar.g i,.bar.ok i{ background:var(--g-ok) }
.bar.o i,.bar.warn i{ background:var(--g-gold) }
.bar.r i,.bar.danger i{ background:var(--g-rose) }
.bar.thin{ height:5px }
.bar.thick{ height:11px }

/* ── LIST ROW ─────────────────────────────────────────────────────────────
   The workhorse. Icon tile · two-line body · trailing status.           */
.row{
  display:flex; align-items:center; gap:var(--s-3);
  min-height:var(--tap);
  padding:var(--s-3);
  border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--stroke);
  cursor:pointer; transition:var(--d-2) var(--e-out);
  text-align:start; width:100%;
}
.row:hover{ background:var(--surface-2); border-color:var(--stroke-2); transform:translateX(-2px) }
.row:active{ transform:scale(.99) }

.row-ic,.plate{
  width:40px; height:40px; flex:0 0 40px;
  border-radius:var(--r-sm);
  display:grid; place-items:center;
  background:var(--plate); border:1px solid var(--plate-line);
  color:var(--aqua);
  transition:var(--d-2) var(--e-out);
}
.plate.sm,.row-ic.sm{ width:32px; height:32px; flex:0 0 32px; border-radius:var(--r-xs) }
.plate.lg,.row-ic.lg{ width:52px; height:52px; flex:0 0 52px; border-radius:var(--r-md) }
.plate .ic{ width:19px; height:19px }
.plate.lg .ic{ width:24px; height:24px }
.plate.sm .ic{ width:15px; height:15px }
.row:hover .row-ic,.row:hover .plate{ transform:scale(1.06) }

.row-b,.row .rl{
  flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;
}
.row-b b,.row .rl b{ font:var(--t-label); color:var(--text-1); font-size:13.5px }
.row-b span,.row .rl span{ font:var(--t-caption); color:var(--text-2) }

/* ── FIELD / INPUT ────────────────────────────────────────────────────── */
.field,.realinput,textarea.field{
  width:100%; min-height:var(--tap);
  padding:var(--s-3) var(--s-4);
  border-radius:var(--r-md);
  background:var(--inset); border:1px solid var(--stroke);
  color:var(--text-1); font:var(--t-body);
  resize:vertical; transition:var(--d-2) var(--e-out);
}
textarea.field{ min-height:96px; line-height:1.9 }
.field::placeholder{ color:var(--text-3) }
.field:focus{ border-color:rgba(0,212,193,.5); background:var(--surface) }

.searchbar,.inputfake{
  display:flex; align-items:center; gap:var(--s-3);
  min-height:var(--tap); padding:var(--s-3) var(--s-4);
  border-radius:var(--r-md);
  background:var(--inset); border:1px solid var(--stroke);
  color:var(--text-3); font:var(--t-body); cursor:text;
}
.searchbar .ic,.inputfake .ic{ color:var(--text-3); flex:0 0 auto }

/* ── TOGGLE ───────────────────────────────────────────────────────────── */
.toggle{
  width:48px; height:28px; flex:0 0 48px; border-radius:var(--r-pill);
  background:var(--inset); border:1px solid var(--stroke);
  position:relative; cursor:pointer; transition:var(--d-2) var(--e-out);
}
.toggle::after{
  content:''; position:absolute; top:2px; inset-inline-start:2px;
  width:22px; height:22px; border-radius:50%;
  background:var(--text-3); transition:var(--d-2) var(--e-out);
}
.toggle.on{ background:var(--g-ok); border-color:transparent }
.toggle.on::after{ inset-inline-start:22px; background:#fff }

/* ── SEGMENTED CONTROL ────────────────────────────────────────────────── */
.segmini,.seg{
  display:flex; gap:var(--s-1); padding:var(--s-1);
  background:var(--inset); border-radius:var(--r-md);
  border:1px solid var(--stroke);
}
.segmini button,.seg button{
  flex:1; min-height:36px; border:0; border-radius:var(--r-sm);
  background:transparent; color:var(--text-2);
  font:var(--t-label); cursor:pointer;
  transition:var(--d-2) var(--e-out);
}
.segmini button:hover,.seg button:hover{ color:var(--text-1) }
.segmini button.on,.seg button.on{
  background:var(--g-brand); color:var(--on-brand);
  box-shadow:var(--shadow-xs);
}

/* ── SETTINGS ROW ─────────────────────────────────────────────────────── */
.setrow{
  display:flex; align-items:center; gap:var(--s-3);
  min-height:var(--tap); padding:var(--s-3) 0;
  border-bottom:1px solid var(--stroke);
}
.setrow:last-child{ border-bottom:0 }

/* ── TEXT ROLES ───────────────────────────────────────────────────────── */
.muted,.dim{ font:var(--t-caption); color:var(--text-2) }
.tiny,.dim-2{ font:var(--t-caption); color:var(--text-3); font-size:11px }
.t-display{ font:var(--t-display); letter-spacing:-.7px }
.t-h1{ font:var(--t-h1); letter-spacing:-.5px }
.t-h2{ font:var(--t-h2); letter-spacing:-.35px }
.t-h3{ font:var(--t-h3); letter-spacing:-.2px }
.t-body{ font:var(--t-body) }
.t-sm{ font:var(--t-sm) }
.t-label{ font:var(--t-label) }
.t-caption{ font:var(--t-caption) }
.t-micro{ font:var(--t-micro) }


/* ══════════════════════════════════════════════════════════════════════════
   6 · HERO SURFACES, DIALS & PROGRESS OBJECTS
   The "one unmistakable next action" pattern from v2, plus the completion
   affordances that replace v1's flat bars.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── HERO PLATE ───────────────────────────────────────────────────────────
   The single most important surface on any screen. Photographic or
   gradient, always with one sentence of *why* and exactly one button.  */
.hero{
  position:relative; overflow:hidden;
  border-radius:var(--r-xl);
  padding:var(--s-5);
  background:
    linear-gradient(150deg,rgba(0,212,193,.20),rgba(41,121,255,.15) 52%,rgba(123,97,255,.13)),
    var(--bg-2);
  border:1px solid rgba(0,212,193,.28);
  box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.09);
  isolation:isolate;
}
/* corner bloom — gives the plate a light source instead of flat tint */
.hero::after{
  content:''; position:absolute; z-index:-1;
  inset-inline-end:-64px; top:-64px; width:200px; height:200px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(0,212,193,.34),transparent 68%);
  filter:blur(8px);
}
.hero.photo{ padding:0; border-color:var(--stroke) }
.hero.photo>img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:-2;
}
.hero.photo::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--img-veil);
}
.hero-body{ position:relative; padding:var(--s-5) }
.hero-body.center{ text-align:center }
.hero.photo .hero-title,.hero.photo .hero-sub,.hero.photo .t-display{ color:#fff }
.hero.photo .hero-sub{ color:rgba(255,255,255,.82) }

.hero-top{ display:flex; align-items:flex-start; gap:var(--s-4); margin-bottom:var(--s-4) }
.hero-mark{ width:44px; height:60px; flex:0 0 44px; filter:drop-shadow(0 6px 16px rgba(0,212,193,.4)) }
.hero-kicker{
  display:inline-flex; align-items:center; gap:var(--s-1);
  font:var(--t-micro); color:var(--c-gold);
  letter-spacing:.4px; margin-bottom:var(--s-2);
}
.hero-title{ font:var(--t-display); color:var(--text-1); letter-spacing:-.7px; margin:0 }
.hero-sub{ font:var(--t-sm); color:var(--text-2); margin:var(--s-2) 0 0; max-width:30ch }
.hero .btn{ margin-top:var(--s-4) }

/* ── DIAL ─────────────────────────────────────────────────────────────────
   A ring reads as "a thing you close". Stronger completion pull than a
   linear meter, which reads as "a thing that is happening to you".     */
.dial{ position:relative; display:grid; place-items:center; flex:0 0 auto }
.dial svg{ transform:rotate(-90deg) }
.dial-track{ stroke:var(--inset) }
.dial-fill{
  stroke:url(#gBrand); stroke-linecap:round;
  stroke-dashoffset:264;
  transition:stroke-dashoffset 1.1s var(--e-out);
}
.dial-num{
  position:absolute; font:900 22px/1 var(--f-fa); color:var(--text-1);
  letter-spacing:-.5px;
}
.dial-num small{ font-size:12px; opacity:.6; font-weight:700 }

/* ── STEP PIPS ────────────────────────────────────────────────────────────
   Lesson progress. Segments, not a bar — you can count what's left.    */
.steps,.steps5{ display:flex; gap:var(--s-1); align-items:center }
.steps i,.dot5{
  flex:1; height:6px; border-radius:var(--r-pill);
  background:var(--inset); transition:var(--d-3) var(--e-out);
}
.steps i.done,.dot5.done{ background:var(--g-ok) }
.steps i.now,.dot5.now{
  background:var(--g-brand);
  box-shadow:0 0 0 3px rgba(41,121,255,.2);
}
.dot5{ flex:1 }

/* small 5-dot pips used inside cards and the word sheet */
.pips{ display:inline-flex; gap:3px; align-items:center }
.pips i{
  width:7px; height:7px; border-radius:50%;
  background:var(--inset); border:1px solid var(--stroke);
}
.pips i.on{ background:var(--g-brand); border-color:transparent }
.pips.due i.on{ background:var(--g-gold) }

/* ── WEEK STRIP ───────────────────────────────────────────────────────────
   Loss aversion, not vanity: the point is the gap you don't want.      */
.streakrow,.wdays{ display:flex; gap:var(--s-1); justify-content:space-between }
.sday,.wday{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:var(--s-2);
}
.sday .sd-l,.wd-lb{ font:var(--t-micro); color:var(--text-3) }
.sday .sd-b,.wd-dot{
  width:34px; height:34px; border-radius:var(--r-xs);
  display:grid; place-items:center;
  background:var(--inset); border:1px solid var(--stroke);
  color:var(--text-3); transition:var(--d-2) var(--e-out);
}
.sday .sd-b .ic,.wd-dot .ic{ width:16px; height:16px }
.sday.on .sd-b,.wday.on .wd-dot{
  background:rgba(255,200,87,.16); border-color:rgba(255,200,87,.4);
  color:var(--c-gold);
}
.sday.today .sd-b,.wday.now .wd-dot{
  background:var(--g-brand); border-color:transparent; color:var(--on-brand);
  box-shadow:0 0 0 4px rgba(41,121,255,.16);
}

/* ── RISK BAR ─────────────────────────────────────────────────────────────
   Proportional split. Width IS the number, so no legend is needed.     */
.riskbar,.forgetbar{
  display:flex; height:38px; border-radius:var(--r-sm); overflow:hidden;
  border:1px solid var(--stroke); font:var(--t-label);
}
.rk-risk,.fseg.risk{
  display:grid; place-items:center; color:var(--on-brand);
  background:var(--g-rose);
}
.rk-safe,.fseg.safe{
  display:grid; place-items:center; color:var(--on-brand);
  background:var(--g-ok);
}
.fseg{ display:grid; place-items:center; font:var(--t-label) }

/* ── LEITNER BOX COLUMNS ──────────────────────────────────────────────── */
.boxes,.boxrow{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s-2); height:120px;
}
.lbox,.bx{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:var(--s-2);
  height:100%; justify-content:flex-end; cursor:pointer;
  transition:var(--d-2) var(--e-out);
}
.lbox:hover{ transform:translateY(-3px) }
.lb-n,.bx-n{ font:800 14px/1 var(--f-fa); color:var(--text-1) }
.lb-col,.bx-b{
  width:100%; border-radius:var(--r-xs) var(--r-xs) 4px 4px;
  background:var(--g-brand); min-height:8px;
  transition:height 1s var(--e-out);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.lbox.due .lb-col{ background:var(--g-gold) }
.lb-lb{
  font:var(--t-micro); color:var(--text-3);
  width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; background:var(--inset);
}
.lbox.due .lb-lb{ background:rgba(255,200,87,.18); color:var(--c-gold) }

/* ── STAT GRID ────────────────────────────────────────────────────────── */
.bigstat{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-2) }
.bigstat .bs{
  display:flex; flex-direction:column; align-items:center; gap:var(--s-1);
  padding:var(--s-3) var(--s-2); border-radius:var(--r-md);
  background:var(--surface-2); border:1px solid var(--stroke); text-align:center;
}
.bigstat .bs b{ font:900 19px/1 var(--f-fa); color:var(--text-1) }
.bigstat .bs span{ font:var(--t-micro); color:var(--text-3) }

.mini{
  display:flex; flex-direction:column; gap:var(--s-1);
  padding:var(--s-3); border-radius:var(--r-md);
  background:var(--surface-2); border:1px solid var(--stroke);
}
.mini .mv{ font:900 20px/1 var(--f-fa); color:var(--text-1) }
.mini .ml{ font:var(--t-micro); color:var(--text-3) }
.mini .mtrend{ font:var(--t-micro); display:flex; align-items:center; gap:3px }
.mtrend.up{ color:var(--ok) } .mtrend.dn{ color:var(--danger) } .mtrend.flat{ color:var(--text-3) }

/* ── BIG TILE GRID (the "what should I do?" launcher) ─────────────────── */
.bigtiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-2) }
.bigtile{
  display:flex; flex-direction:column; align-items:center; gap:var(--s-2);
  padding:var(--s-3) var(--s-1);
  border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--stroke);
  cursor:pointer; transition:var(--d-2) var(--e-out);
  text-align:center;
}
.bigtile:hover{ transform:translateY(-3px); border-color:var(--plate-line); box-shadow:var(--shadow-sm) }
.bigtile:active{ transform:scale(.95) }
.bigtile .bt-ic{
  width:38px; height:38px; border-radius:var(--r-sm);
  display:grid; place-items:center;
  background:var(--plate); border:1px solid var(--plate-line);
  color:var(--aqua);
}
.bigtile .bt-ic .ic{ width:19px; height:19px }
.bigtile b{ font:var(--t-micro); color:var(--text-2); font-size:10.5px }

/* ── CHAPTER TILE ─────────────────────────────────────────────────────── */
.chaptile,.chapcell{
  display:flex; flex-direction:column; gap:var(--s-2);
  min-width:132px; padding:var(--s-4);
  border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--stroke);
  cursor:pointer; text-align:start;
  transition:var(--d-2) var(--e-out);
}
.chaptile:hover{ transform:translateY(-3px); box-shadow:var(--shadow-sm) }
.ch-n,.cnum2{ font:var(--t-micro); color:var(--text-3) }
.ch-t{ font:var(--t-h3); color:var(--text-1) }
.chaptile.on,.chapcell.cur{
  border-color:rgba(41,121,255,.42);
  background:linear-gradient(150deg,rgba(41,121,255,.14),rgba(123,97,255,.08));
  box-shadow:var(--glow-brand);
}
.chaptile.locked,.chapcell.lock{ opacity:.5 }
.chaptile.locked:hover{ transform:none }


/* ══════════════════════════════════════════════════════════════════════════
   7 · LEARNING SURFACES — path, lesson, review, chat, speaking
   ══════════════════════════════════════════════════════════════════════════ */

/* ── PATH MAP ─────────────────────────────────────────────────────────────
   A serpentine trail. States are readable without colour alone: each node
   also carries a distinct icon and a distinct elevation.               */
.pathmap{ position:relative; padding:var(--s-4) 0 }
.pathmap .trail{
  position:absolute; inset:var(--s-4) 0; width:100%; z-index:0;
  pointer-events:none;
}
.pathmap .trail path{
  fill:none; stroke:var(--inset); stroke-width:5; stroke-linecap:round;
  stroke-dasharray:2 12;
}
.pathmap .trail path.lit{
  stroke:url(#gAqua); stroke-dasharray:none; opacity:.75;
}

.pnode,.node{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:var(--s-4);
  margin-bottom:var(--s-4);
}
.pnode.r,.node.r{ flex-direction:row-reverse; text-align:end }
.pn-btn,.node .bub{
  width:62px; height:62px; flex:0 0 62px;
  border-radius:50%; display:grid; place-items:center;
  background:var(--surface-2); border:1px solid var(--stroke);
  color:var(--text-3); cursor:pointer;
  transition:var(--d-2) var(--e-spring);
  box-shadow:var(--shadow-xs);
}
.pn-btn:hover{ transform:translateY(-3px) }
.pn-btn:active{ transform:scale(.93) }

.pnode.done .pn-btn,.node.done .bub{
  background:var(--g-ok); border-color:transparent; color:var(--on-brand);
  box-shadow:0 10px 26px -10px rgba(61,220,151,.6);
}
.pnode.now .pn-btn,.node.curr .bub{
  background:var(--g-brand); border-color:transparent; color:var(--on-brand);
  box-shadow:0 0 0 5px rgba(41,121,255,.18), var(--glow-brand);
  animation:pulseGlow 2.6s var(--e-out) infinite;
}
.pnode.locked .pn-btn,.node.lock .bub{ opacity:.42; cursor:not-allowed; box-shadow:none }
.pnode.boss .pn-btn{
  width:72px; height:72px; flex:0 0 72px;
  background:var(--g-gold); color:var(--on-gold); border-color:transparent;
}
.pn-badge{
  position:absolute; top:-3px; inset-inline-end:-3px;
  width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--g-gold); color:var(--on-gold);
  border:2px solid var(--bg-0);
}
.pn-badge .ic{ width:12px; height:12px }

.pn-meta,.node .meta{ flex:1; min-width:0 }
.pn-meta b,.node .meta b{ display:block; font:var(--t-label); color:var(--text-1); font-size:14px }
.pn-meta span,.node .meta span{ font:var(--t-caption); color:var(--text-2) }

/* ── LESSON BAR (the top chrome of a lesson step) ─────────────────────── */
.lessonbar,.sessionbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:var(--s-3);
  padding:var(--s-3) var(--gut);
  background:var(--bg-0);                       /* fallback */
  background:color-mix(in srgb, var(--bg-0) 82%, transparent);
  backdrop-filter:var(--blur);
  border-bottom:1px solid var(--stroke);
  margin-bottom:var(--s-4);
}
.lb-close{
  width:38px; height:38px; flex:0 0 38px; border-radius:var(--r-sm);
  background:var(--surface); border:1px solid var(--stroke);
  display:grid; place-items:center; color:var(--text-2); cursor:pointer;
  transition:var(--d-2) var(--e-out);
}
.lb-close:hover{ background:var(--surface-2); color:var(--text-1) }
.hearts{
  display:inline-flex; align-items:center; gap:var(--s-1);
  font:700 13px/1 var(--f-fa); color:var(--danger);
  padding:var(--s-2) var(--s-3); border-radius:var(--r-pill);
  background:rgba(255,93,143,.12); border:1px solid rgba(255,93,143,.3);
}
.sb-t{ flex:1; min-width:0 }
.sb-t b{ font:var(--t-label); color:var(--text-1); display:block }
.sb-meta{ display:flex; gap:var(--s-1); font:var(--t-caption); color:var(--text-3) }

.modeswitch{
  display:flex; gap:2px; padding:3px; border-radius:var(--r-pill);
  background:var(--inset); border:1px solid var(--stroke);
}
.modeswitch button{
  width:34px; height:32px; border:0; border-radius:var(--r-pill);
  background:transparent; color:var(--text-3); cursor:pointer;
  display:grid; place-items:center; transition:var(--d-2) var(--e-out);
}
.modeswitch button.on{ background:var(--g-brand); color:var(--on-brand) }

/* ── ANSWER OPTION ────────────────────────────────────────────────────── */
.optbtn,.matchb,.duelopt{
  display:flex; align-items:center; gap:var(--s-3);
  width:100%; min-height:54px;
  padding:var(--s-3) var(--s-4);
  border-radius:var(--r-md);
  background:var(--surface); border:1.5px solid var(--stroke);
  color:var(--text-1); font:var(--t-body); font-weight:600;
  cursor:pointer; text-align:start;
  transition:var(--d-2) var(--e-out);
}
.optbtn:hover,.matchb:hover,.duelopt:hover{
  border-color:var(--stroke-2); background:var(--surface-2); transform:translateY(-2px);
}
.optbtn:active,.matchb:active{ transform:scale(.985) }
.optbtn.sel,.matchb.sel{
  border-color:rgba(41,121,255,.55);
  background:rgba(41,121,255,.12);
  box-shadow:0 0 0 3px rgba(41,121,255,.14);
}
.optbtn.ok,.matchb.yes{
  border-color:rgba(61,220,151,.6); background:rgba(61,220,151,.13);
  box-shadow:0 0 0 3px rgba(61,220,151,.14);
}
.optbtn.no,.matchb.bad{
  border-color:rgba(255,93,143,.6); background:rgba(255,93,143,.12);
  box-shadow:0 0 0 3px rgba(255,93,143,.14);
}

.blankslot{
  display:inline-grid; place-items:center;
  min-width:88px; min-height:38px; padding:0 var(--s-3);
  border-radius:var(--r-sm);
  border:1.5px dashed var(--stroke-2); background:var(--inset);
  color:var(--text-3); font:var(--t-label);
  vertical-align:middle;
}

/* ── FLASHCARD ────────────────────────────────────────────────────────── */
.flip,.fcard{ perspective:1200px; height:190px; cursor:pointer }
.flip-in,.fcard .inner{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .62s var(--e-out);
}
.flip.on .flip-in,.fcard.flip .inner{ transform:rotateY(180deg) }
.flip-f,.flip-b,.fcard .face{
  position:absolute; inset:0;
  display:grid; place-items:center; text-align:center;
  padding:var(--s-5);
  border-radius:var(--r-lg);
  backface-visibility:hidden;
  border:1px solid var(--stroke);
  background:var(--surface); backdrop-filter:var(--blur);
  box-shadow:var(--shadow-sm);
}
.flip-b,.fcard .back{
  transform:rotateY(180deg);
  background:linear-gradient(150deg,rgba(0,212,193,.14),rgba(41,121,255,.1));
  border-color:var(--plate-line);
}

/* ── SELF-GRADE BUTTONS ───────────────────────────────────────────────── */
.grades{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-2) }
.grade,.gradebtn{
  display:flex; flex-direction:column; align-items:center; gap:var(--s-1);
  min-height:68px; padding:var(--s-3) var(--s-1);
  border-radius:var(--r-md); border:1px solid var(--stroke);
  background:var(--surface); color:var(--text-1);
  font:var(--t-micro); cursor:pointer;
  transition:var(--d-2) var(--e-out);
}
.grade:hover,.gradebtn:hover{ transform:translateY(-2px) }
.grade:active{ transform:scale(.95) }
.grade .g-t,.gradebtn .gt{ font:var(--t-caption); color:var(--text-3); font-size:10px }
.grade.g1,.gradebtn.r{ border-color:rgba(255,93,143,.38); color:var(--c-rose) }
.grade.g2,.gradebtn.o{ border-color:rgba(255,200,87,.38); color:var(--c-gold) }
.grade.g3,.gradebtn.g{ border-color:rgba(41,121,255,.38); color:var(--c-blue-4) }
.grade.g4,.gradebtn.a{ border-color:rgba(61,220,151,.38); color:var(--c-lime) }

/* ── CHAT ─────────────────────────────────────────────────────────────── */
.bubrow,.bub-row{
  display:flex; gap:var(--s-2); align-items:flex-start;
  margin-bottom:var(--s-4);
  animation:msgIn .4s var(--e-out) both;
}
.bubrow.me,.bub-row.me{ flex-direction:row-reverse }
.bub-av{
  width:32px; height:32px; flex:0 0 32px; border-radius:var(--r-xs);
  display:grid; place-items:center;
  background:var(--g-ai); color:#fff;
  box-shadow:0 6px 16px -8px rgba(123,97,255,.7);
}
.bubrow.me .bub-av,.bub-row.me .bub-av{ background:var(--surface-3); color:var(--text-2); box-shadow:none }
.bubcol{ min-width:0; max-width:78% }
.bub,.bub-msg{
  padding:var(--s-3) var(--s-4);
  border-radius:var(--r-md);
  border-start-start-radius:var(--s-1);
  background:var(--surface); border:1px solid var(--stroke);
  font:var(--t-body); color:var(--text-1);
  box-shadow:var(--shadow-xs);
}
.bubrow.me .bub,.bub-row.me .bub-msg{
  background:linear-gradient(150deg,rgba(41,121,255,.18),rgba(123,97,255,.12));
  border-color:rgba(41,121,255,.3);
  border-start-start-radius:var(--r-md);
  border-start-end-radius:var(--s-1);
}
.bub-en{ font-family:var(--f-en); direction:ltr; text-align:left; line-height:1.75 }
.bub-trans{
  margin-top:var(--s-2); padding-top:var(--s-2);
  border-top:1px dashed var(--stroke);
  font:var(--t-caption); color:var(--text-2);
}
.bubtools,.msgtools{ display:flex; gap:var(--s-1); margin-top:var(--s-1) }
.bubtool{
  width:30px; height:30px; border-radius:var(--r-xs);
  border:1px solid transparent; background:transparent;
  color:var(--text-3); cursor:pointer; display:grid; place-items:center;
  transition:var(--d-2) var(--e-out);
}
.bubtool:hover{ background:var(--surface); color:var(--text-1); border-color:var(--stroke) }
.bubtool.on{ color:var(--ok); background:rgba(61,220,151,.12); border-color:rgba(61,220,151,.3) }

.daysep{ display:flex; align-items:center; gap:var(--s-3); margin:var(--s-4) 0 }
.daysep::before,.daysep::after{ content:''; flex:1; height:1px; background:var(--stroke) }
.daysep span{ font:var(--t-caption); color:var(--text-3) }

.typing{ display:inline-flex; gap:4px; padding:var(--s-3) var(--s-4) }
.typing i{
  width:7px; height:7px; border-radius:50%; background:var(--text-3);
  animation:tdot 1.3s infinite;
}
.typing i:nth-child(2){ animation-delay:.18s }
.typing i:nth-child(3){ animation-delay:.36s }

/* ── COMPOSER ─────────────────────────────────────────────────────────── */
.composer{
  position:sticky; bottom:0; z-index:20;
  display:flex; align-items:flex-end; gap:var(--s-2);
  padding:var(--s-3) var(--gut) var(--s-5);
  background:var(--scrim); backdrop-filter:var(--blur);
  border-top:1px solid var(--stroke);
}
.cm-field{
  flex:1; min-height:var(--tap); max-height:110px;
  padding:var(--s-3) var(--s-4);
  border-radius:var(--r-lg);
  background:var(--inset); border:1px solid var(--stroke);
  color:var(--text-1); font:var(--t-body); resize:none;
}
.cm-send{
  width:var(--tap); height:var(--tap); flex:0 0 var(--tap);
  border-radius:50%; border:0; cursor:pointer;
  background:var(--g-brand); color:var(--on-brand);
  display:grid; place-items:center;
  box-shadow:var(--glow-brand);
  transition:var(--d-2) var(--e-out);
}
.cm-send:disabled{ background:var(--surface-2); color:var(--text-3); box-shadow:none }

/* ── CORRECTION CALLOUT ───────────────────────────────────────────────── */
.callout{
  display:flex; gap:var(--s-3); align-items:flex-start;
  padding:var(--s-4);
  border-radius:var(--r-md);
  background:var(--surface-2); border:1px solid var(--stroke);
}
.callout b{ font:var(--t-label); color:var(--text-1); display:block }
.fix{ direction:ltr; text-align:left; font-family:var(--f-en); line-height:1.9 }
.fix del,.fixbad{
  text-decoration:line-through; color:var(--danger);
  text-decoration-thickness:2px; opacity:.85;
}
.fix ins,.fixgood{
  text-decoration:none; color:var(--ok); font-weight:700;
  background:rgba(61,220,151,.14); padding:1px 5px; border-radius:6px;
}

/* ── MIC / LIVE SPEAKING ──────────────────────────────────────────────── */
.micwrap{ position:relative; display:grid; place-items:center; padding:var(--s-6) 0 }
.micbtn{
  width:92px; height:92px; border-radius:50%; border:0; cursor:pointer;
  background:var(--g-brand); color:var(--on-brand);
  display:grid; place-items:center; position:relative; z-index:2;
  box-shadow:0 22px 54px -16px rgba(41,121,255,.7);
  transition:var(--d-2) var(--e-spring);
}
.micbtn:active{ transform:scale(.93) }
.micbtn .ic{ width:34px; height:34px }
.micwrap .halo{
  position:absolute; width:92px; height:92px; border-radius:50%;
  border:2px solid rgba(0,212,193,.4);
  animation:haloPulse 2.4s var(--e-out) infinite;
}
.micwrap .halo:nth-child(2){ animation-delay:.8s }

.livedot{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--danger); animation:blink 1.4s infinite;
}

/* ── COACH CARD (AI recommendation) ───────────────────────────────────── */
.coach{
  display:flex; gap:var(--s-3); align-items:flex-start;
  padding:var(--s-4);
  border-radius:var(--r-lg);
  background:linear-gradient(150deg,rgba(123,97,255,.14),rgba(255,93,143,.07));
  border:1px solid rgba(123,97,255,.3);
  box-shadow:var(--shadow-sm);
}
.co-av,.coach .ca{
  width:40px; height:40px; flex:0 0 40px; border-radius:var(--r-sm);
  display:grid; place-items:center;
  background:var(--g-ai); color:#fff;
  box-shadow:0 8px 20px -8px rgba(123,97,255,.7);
}
.co-b{ flex:1; min-width:0 }
.co-name{
  display:flex; align-items:center; gap:var(--s-1);
  font:var(--t-micro); color:var(--c-violet-4);
  margin-bottom:var(--s-2); letter-spacing:.3px;
}
body[data-theme="light"] .co-name{ color:var(--c-violet-6) }

/* ── SKILL DELTA ROW ──────────────────────────────────────────────────── */
.skill,.skillrow{
  display:flex; gap:var(--s-3); align-items:center;
  padding:var(--s-3) 0; border-bottom:1px solid var(--stroke);
}
.skill:last-child,.skillrow:last-child{ border-bottom:0 }
.sk-ic{
  width:36px; height:36px; flex:0 0 36px; border-radius:var(--r-xs);
  display:grid; place-items:center;
  background:var(--plate); border:1px solid var(--plate-line); color:var(--aqua);
}
.sk-b{ flex:1; min-width:0 }
.sk-top{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:var(--s-2); font:var(--t-label); color:var(--text-1);
}
.sk-delta{ font:var(--t-micro) }
.sk-delta.up{ color:var(--ok) }
.sk-delta.down{ color:var(--danger) }

/* ── CONFIDENCE PICKER ────────────────────────────────────────────────── */
.confrow{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-2) }
.conf{
  display:flex; flex-direction:column; align-items:center; gap:var(--s-2);
  min-height:74px; padding:var(--s-3) var(--s-1);
  border-radius:var(--r-md); border:1px solid var(--stroke);
  background:var(--surface); color:var(--text-2);
  font:var(--t-micro); cursor:pointer; text-align:center;
  transition:var(--d-2) var(--e-out);
}
.conf:hover{ transform:translateY(-2px); color:var(--text-1) }
.conf.on{
  background:var(--g-brand); border-color:transparent;
  color:var(--on-brand); box-shadow:var(--glow-brand);
}

/* ── DATA VIZ ─────────────────────────────────────────────────────────── */
.radar{ width:100%; height:auto; display:block }
.rd-web{ fill:none; stroke:var(--stroke); stroke-width:1 }
.rd-axis{ stroke:var(--stroke); stroke-width:1 }
.rd-shape{ fill:url(#gRadar); stroke:var(--c-teal); stroke-width:2; stroke-linejoin:round }
.rd-pt{ fill:var(--c-teal); stroke:var(--bg-1); stroke-width:2 }
.radar text{ font:var(--t-micro); fill:var(--text-3) }

.curve{ width:100%; height:auto; display:block }
.cv-grid{ stroke:var(--stroke); stroke-width:1; stroke-dasharray:3 5 }
.cv-area{ fill:url(#gCurve) }
.cv-line{ fill:none; stroke:var(--c-rose); stroke-width:2.5; stroke-linecap:round }
.cv-line.boost{ stroke:var(--c-lime); stroke-dasharray:5 5 }
.cv-now{ stroke:var(--stroke-2); stroke-width:1.5; stroke-dasharray:4 4 }
.cv-dot{ fill:var(--c-rose); stroke:var(--bg-1); stroke-width:2.5 }
.curve text{ font:var(--t-micro); fill:var(--text-3) }


/* ══════════════════════════════════════════════════════════════════════════
   8 · CONTENT SURFACES — dictionary, notebook, reader, phonetics, league
   ══════════════════════════════════════════════════════════════════════════ */

/* ── WORD ROW ─────────────────────────────────────────────────────────── */
.wordrow,.wrow{
  display:flex; align-items:center; gap:var(--s-3);
  min-height:var(--tap); padding:var(--s-3);
  border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--stroke);
  cursor:pointer; transition:var(--d-2) var(--e-out); width:100%;
  text-align:start;
}
.wordrow:hover,.wrow:hover{ background:var(--surface-2); transform:translateX(-2px) }
.wr-b,.wrow .wl{ flex:1; min-width:0 }
.wr-en,.wrow .wl b{
  display:block; font-family:var(--f-en); font-weight:700; font-size:15px;
  color:var(--text-1); direction:ltr; text-align:start;
}
.wr-fa,.wrow .wl span{ font:var(--t-caption); color:var(--text-2) }

/* ── PRONUNCIATION ────────────────────────────────────────────────────── */
.prons{ display:flex; gap:var(--s-2); flex-wrap:wrap }
.pron{
  display:inline-flex; align-items:center; gap:var(--s-2);
  min-height:38px; padding:var(--s-2) var(--s-3);
  border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--stroke);
  color:var(--text-1); font-family:var(--f-en); font-size:12.5px;
  cursor:pointer; direction:ltr;
  transition:var(--d-2) var(--e-out);
}
.pron:hover{ background:var(--surface-2); border-color:var(--plate-line) }
.pron .flag{
  font:var(--t-micro); padding:2px 6px; border-radius:5px;
  background:var(--surface-3); color:var(--text-2);
}

/* ── FREQUENCY METER ──────────────────────────────────────────────────── */
.freq{ display:flex; align-items:center; gap:var(--s-3) }
.fq-bars{ display:inline-flex; gap:3px; align-items:flex-end }
.fq-bars i{
  width:7px; border-radius:2px; background:var(--inset);
  border:1px solid var(--stroke);
}
.fq-bars i:nth-child(1){ height:8px }
.fq-bars i:nth-child(2){ height:11px }
.fq-bars i:nth-child(3){ height:14px }
.fq-bars i:nth-child(4){ height:17px }
.fq-bars i:nth-child(5){ height:20px }
.fq-bars i.on{ background:var(--g-aqua); border-color:transparent }

/* ── SENSE / DEFINITION BLOCK ─────────────────────────────────────────── */
.sense{ padding:var(--s-3) 0; border-bottom:1px solid var(--stroke) }
.sense:last-child{ border-bottom:0 }
.sensehead{ display:flex; align-items:center; gap:var(--s-2); margin-bottom:var(--s-2) }
.snum{
  width:20px; height:20px; flex:0 0 20px; border-radius:6px;
  display:grid; place-items:center; font:var(--t-micro);
  background:var(--plate); border:1px solid var(--plate-line); color:var(--aqua);
}
.exline{
  display:flex; flex-direction:column; gap:2px;
  padding:var(--s-2) var(--s-3); margin-top:var(--s-2);
  border-radius:var(--r-xs);
  background:var(--inset); border-inline-start:2px solid var(--plate-line);
}
.exline span:first-child{ font-family:var(--f-en); direction:ltr; text-align:left; font-size:13px }
.exline span:last-child{ font:var(--t-caption); color:var(--text-2) }

/* ── NOTEBOOK NOTE ────────────────────────────────────────────────────── */
.note{
  padding:var(--s-4); border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--stroke);
  cursor:pointer; transition:var(--d-2) var(--e-out);
  box-shadow:var(--shadow-xs);
}
.note:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm) }
.nt-head{ display:flex; align-items:flex-start; gap:var(--s-2); margin-bottom:var(--s-2) }
.nt-title{ flex:1; font:var(--t-h3); color:var(--text-1) }
.nt-src{ font:var(--t-micro); color:var(--text-3) }
.nt-body{ font:var(--t-sm); color:var(--text-2); margin:0 0 var(--s-3) }
.nt-tags{ display:flex; flex-wrap:wrap; gap:var(--s-1) }

/* ── READER ───────────────────────────────────────────────────────────── */
.readerbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:var(--s-3);
  padding:var(--s-3) var(--gut);
  background:var(--bg-0);                       /* fallback */
  background:color-mix(in srgb, var(--bg-0) 84%, transparent);
  backdrop-filter:var(--blur); border-bottom:1px solid var(--stroke);
}
.readerbody{ padding:var(--s-5) var(--gut) }
.ptext{
  font-family:var(--f-en); direction:ltr; text-align:left;
  font-size:16px; line-height:2.1; color:var(--text-1);
  margin:0 0 var(--s-3);
}
.ptrans{
  font:var(--t-sm); color:var(--text-2);
  padding-inline-start:var(--s-3);
  border-inline-start:2px solid var(--stroke);
  margin:0 0 var(--s-5);
}
/* tappable word inside running text */
.rw{
  cursor:pointer; border-radius:5px; padding:1px 3px; margin:0 -1px;
  transition:var(--d-1) var(--e-out);
  border-bottom:1.5px solid transparent;
}
.rw:hover{ background:var(--surface-2) }
.rw.new{ border-bottom-color:var(--c-gold); background:rgba(255,200,87,.1) }
.rw.saved{ border-bottom-color:var(--c-teal); background:rgba(0,212,193,.1) }
.rw.known{ opacity:.72 }

.readertools{
  position:fixed; inset-inline:0; bottom:0; z-index:60;
  transform:translateY(110%); transition:transform var(--d-3) var(--e-out);
}
.readertools.show{ transform:none }
.rtool{
  display:flex; flex-direction:column; align-items:center; gap:var(--s-1);
  min-width:60px; min-height:var(--tap); padding:var(--s-2);
  border-radius:var(--r-sm); border:0; background:transparent;
  color:var(--text-2); font:var(--t-micro); cursor:pointer;
  transition:var(--d-2) var(--e-out);
}
.rtool:hover{ background:var(--surface-2); color:var(--text-1) }

/* ── PHONETICS ────────────────────────────────────────────────────────── */
.ipagrid{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s-2) }
.ipacell{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  min-height:58px; padding:var(--s-2);
  border-radius:var(--r-sm); border:1px solid var(--stroke);
  background:var(--surface); cursor:pointer;
  transition:var(--d-2) var(--e-out);
}
.ipacell:hover{ transform:translateY(-2px); border-color:var(--plate-line) }
.ipacell b{ font-family:var(--f-en); font-size:15px; color:var(--text-1) }
.ipacell span{ font:var(--t-micro); color:var(--text-3); font-size:9.5px }
.ipacell::before{
  content:''; position:absolute; top:5px; inset-inline-end:5px;
  width:6px; height:6px; border-radius:50%; background:var(--text-3); opacity:.5;
}
.ipacell.good::before{ background:var(--ok); opacity:1 }
.ipacell.warn::before{ background:var(--warn); opacity:1 }
.ipacell.bad::before{ background:var(--danger); opacity:1 }
.ipacell.on{
  border-color:rgba(41,121,255,.5); background:rgba(41,121,255,.12);
  box-shadow:0 0 0 3px rgba(41,121,255,.14);
}

.ipabox{
  min-width:46px; height:38px; padding:0 var(--s-3);
  border-radius:var(--r-xs); display:grid; place-items:center;
  background:var(--inset); border:1px solid var(--stroke);
  font-family:var(--f-en); font-size:14px; color:var(--text-1);
}
.ipabox.good{ background:rgba(61,220,151,.14); border-color:rgba(61,220,151,.34); color:var(--c-lime) }
.ipabox.warn{ background:rgba(255,200,87,.14); border-color:rgba(255,200,87,.34); color:var(--c-gold) }
.ipabox.bad{ background:rgba(255,93,143,.14); border-color:rgba(255,93,143,.34); color:var(--c-rose) }

.wavebox{
  display:flex; align-items:flex-end; justify-content:center; gap:3px;
  height:56px; padding:var(--s-3);
  border-radius:var(--r-md); background:var(--inset); border:1px solid var(--stroke);
}
.wavebox b{
  width:4px; border-radius:2px; background:var(--g-aqua);
  height:20%; transition:height .2s var(--e-out);
}
.wavebox.play b{ animation:wave 1.1s var(--e-out) infinite }

.dotk{ width:9px; height:9px; border-radius:50%; background:var(--text-3); flex:0 0 9px }
.dotk.good{ background:var(--ok) } .dotk.warn{ background:var(--warn) } .dotk.bad{ background:var(--danger) }

/* word coloured by pronunciation accuracy */
.w{ padding:1px 4px; border-radius:5px; font-family:var(--f-en) }
.w.ok{ background:rgba(61,220,151,.16); color:var(--c-lime) }
.w.warn{ background:rgba(255,200,87,.16); color:var(--c-gold) }
.w.bad{ background:rgba(255,93,143,.16); color:var(--c-rose) }

/* ── LEAGUE / RANKING ─────────────────────────────────────────────────── */
.rank{
  width:30px; height:30px; flex:0 0 30px; border-radius:var(--r-xs);
  display:grid; place-items:center; font:800 13px/1 var(--f-en);
  background:var(--inset); border:1px solid var(--stroke); color:var(--text-2);
}
.rank.g1{ background:var(--g-gold); color:var(--on-gold); border-color:transparent }
.rank.g2{ background:linear-gradient(135deg,#E2E8F0,#94A3B8); color:#1B2340; border-color:transparent }
.rank.g3{ background:linear-gradient(135deg,#E0965A,#B4713A); color:#2A1508; border-color:transparent }

/* ── HEATMAP ──────────────────────────────────────────────────────────── */
.heatmap{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px }
.hcell{ aspect-ratio:1; border-radius:5px; background:var(--inset) }
.hcell.l1{ background:rgba(0,212,193,.24) }
.hcell.l2{ background:rgba(0,212,193,.45) }
.hcell.l3{ background:rgba(0,212,193,.68) }
.hcell.l4{ background:var(--c-teal) }

/* ── BADGE / ACHIEVEMENT ──────────────────────────────────────────────── */
.badge{
  display:flex; flex-direction:column; align-items:center; gap:var(--s-2);
  padding:var(--s-4) var(--s-2); border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--stroke);
  text-align:center; transition:var(--d-2) var(--e-out);
}
.badge.got{ border-color:rgba(255,200,87,.4); background:rgba(255,200,87,.09) }
.badge.lockb{ opacity:.42 }

/* ── EMPTY STATE ──────────────────────────────────────────────────────── */
.empty,.emptystate{
  display:flex; flex-direction:column; align-items:center; gap:var(--s-2);
  padding:var(--s-8) var(--s-5); text-align:center;
  border-radius:var(--r-lg);
  background:var(--surface-2); border:1px dashed var(--stroke-2);
}
.empty .ic,.emptystate .ic{ width:32px; height:32px; color:var(--text-3); margin-bottom:var(--s-2) }
.empty b{ font:var(--t-h3); color:var(--text-1) }
.empty span{ font:var(--t-caption); color:var(--text-2); max-width:28ch }

/* ── BOTTOM SHEET (word lookup) ───────────────────────────────────────────
   A sheet, not a screen: looking a word up must never cost the reader
   their place. The v1 shell (.sheet / .sheetmask / .sheetgrab /
   .sheetbody) is kept intact and only re-skinned, so every existing
   openSheet() call site keeps working.                                 */
.sheet-scrim,.sheetmask{
  position:absolute; inset:0; z-index:70;
  background:rgba(4,7,18,.62); backdrop-filter:blur(4px);
  opacity:0; pointer-events:none;
  transition:opacity var(--d-3) var(--e-out);
}
body[data-theme="light"] .sheet-scrim,
body[data-theme="light"] .sheetmask{ background:rgba(18,22,46,.4) }
.sheet-scrim.show,.sheetmask.show{ opacity:1; pointer-events:auto }

.sheet{
  position:absolute; inset-inline:0; bottom:0; z-index:75;
  max-height:84%; overflow-y:auto;
  border-radius:var(--r-2xl) var(--r-2xl) 0 0;
  background:var(--bg-1);
  border-top:1px solid var(--stroke-2);
  box-shadow:0 -24px 64px -22px rgba(0,0,0,.72);
  transform:translateY(102%);
  transition:transform var(--d-4) var(--e-out);
  scrollbar-width:none;
}
.sheet::-webkit-scrollbar{ width:0 }
.sheet.show{ transform:none }
.sheetbody{ padding:var(--s-2) var(--gut) var(--s-7) }
.sheet-grip,.sheetgrab{
  width:40px; height:4px; border-radius:var(--r-pill);
  background:var(--stroke-2); margin:var(--s-3) auto var(--s-1);
}

/* docked action strip (reader tools, lesson footers) */
.dockzone{
  position:absolute; inset-inline:0; bottom:var(--dock); z-index:28;
  padding:var(--s-4) var(--gut) var(--s-3);
  background:linear-gradient(180deg,transparent,var(--bg-0) 46%);
  backdrop-filter:var(--blur);
}

/* ── TOAST ────────────────────────────────────────────────────────────── */
.toast{
  position:absolute; bottom:calc(var(--dock) + var(--s-3));
  inset-inline:var(--gut); z-index:95;
  display:flex; align-items:center; gap:var(--s-2);
  padding:var(--s-3) var(--s-4); border-radius:var(--r-md);
  background:var(--bg-3); border:1px solid var(--stroke-2);
  color:var(--text-1); font:var(--t-label);
  box-shadow:var(--shadow-lg);
  opacity:0; transform:translateY(14px);
  transition:var(--d-3) var(--e-out); pointer-events:none;
}
.toast.show{ opacity:1; transform:none }


/* ══════════════════════════════════════════════════════════════════════════
   9 · TAB BAR, UTILITIES, MOTION, RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */

/* ── TAB BAR ──────────────────────────────────────────────────────────────
   Five destinations, the middle one raised. The raised tab is the app's
   verb ("practise"), the other four are nouns.                         */
.tabbar{
  position:absolute; inset-inline:0; bottom:0; z-index:50; height:var(--dock);
  display:flex; align-items:flex-start; justify-content:space-around;
  padding:var(--s-3) var(--s-3) var(--s-6);
  background:var(--scrim); backdrop-filter:var(--blur);
}
.tabbar::before{
  content:''; position:absolute; top:0; inset-inline:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--stroke) 22%,var(--stroke) 78%,transparent);
}
.tab{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:var(--s-1);
  width:60px; min-height:var(--tap); padding:var(--s-2) 0 0;
  border:0; background:none; cursor:pointer;
  color:var(--text-3); font-family:var(--f-fa);
  transition:var(--d-2) var(--e-out);
}
.tab .tic{
  width:26px; height:26px; display:grid; place-items:center;
  transition:var(--d-2) var(--e-spring);
}
.tab .lb{ font:var(--t-micro); font-size:10px }
.tab:hover{ color:var(--text-2) }
.tab.on{ color:var(--aqua) }
.tab.on .tic{ transform:translateY(-2px) scale(1.06) }
/* active pip — a dot, not an underline; underlines fight the home bar */
.tab.on::after{
  content:''; position:absolute; bottom:-2px;
  width:4px; height:4px; border-radius:50%; background:var(--aqua);
}

/* raised centre tab */
.tab.fab .tic{
  width:52px; height:52px; margin-top:-22px;
  border-radius:var(--r-md);
  background:var(--g-brand); color:var(--on-brand);
  box-shadow:var(--glow-brand), 0 0 0 5px var(--bg-0);
  transition:var(--d-2) var(--e-spring);
}
.tab.fab:hover .tic{ transform:translateY(-3px) }
.tab.fab.on::after{ display:none }
.tab.fab .tic .ic{ width:24px; height:24px }

/* ── LAYOUT UTILITIES ─────────────────────────────────────────────────── */
.hstack{ display:flex; align-items:center }
.vstack,.stack{ display:flex; flex-direction:column }
.grow{ flex:1; min-width:0 }
.gap-1{ gap:var(--s-1) } .gap-2{ gap:var(--s-2) } .gap-3{ gap:var(--s-3) }
.gap-4{ gap:var(--s-4) } .gap-5{ gap:var(--s-5) } .gap-6{ gap:var(--s-6) }
.wrap{ flex-wrap:wrap }
.center{ text-align:center }
.between{ justify-content:space-between }
.hidden,[hidden]{ display:none !important }

.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-2) }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-2) }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-2) }

/* ── STAGGERED ENTRANCE ───────────────────────────────────────────────── */
.stagger>*{ animation:popIn .5s var(--e-out) both }
.stagger>*:nth-child(1){ animation-delay:.02s }
.stagger>*:nth-child(2){ animation-delay:.07s }
.stagger>*:nth-child(3){ animation-delay:.12s }
.stagger>*:nth-child(4){ animation-delay:.17s }
.stagger>*:nth-child(5){ animation-delay:.22s }
.stagger>*:nth-child(6){ animation-delay:.27s }
.stagger>*:nth-child(7){ animation-delay:.32s }
.stagger>*:nth-child(8){ animation-delay:.37s }

/* ── KEYFRAMES ────────────────────────────────────────────────────────── */
@keyframes popIn{
  from{ opacity:0; transform:translateY(12px) scale(.98) }
  to{ opacity:1; transform:none }
}
@keyframes msgIn{
  from{ opacity:0; transform:translateY(8px) }
  to{ opacity:1; transform:none }
}
@keyframes pulseGlow{
  0%,100%{ box-shadow:0 0 0 5px rgba(41,121,255,.18), var(--glow-brand) }
  50%{ box-shadow:0 0 0 11px rgba(41,121,255,0), var(--glow-brand) }
}
@keyframes haloPulse{
  0%{ transform:scale(1); opacity:.7 }
  100%{ transform:scale(1.9); opacity:0 }
}
@keyframes blink{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }
@keyframes tdot{
  0%,60%,100%{ transform:translateY(0); opacity:.4 }
  30%{ transform:translateY(-5px); opacity:1 }
}
@keyframes wave{
  0%,100%{ height:22% } 50%{ height:86% }
}
@keyframes floatY{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }
@keyframes shimmer{ to{ background-position:200% 0 } }

/* Motion is decoration. If the user has asked for less of it, remove all
   of it — including the screen transition, which is the biggest offender. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .screen{ transform:none !important }
}

/* ── SIMPLE MODE ──────────────────────────────────────────────────────────
   A genuine accessibility mode, not a toggle that hides one card: it drops
   secondary sections, flattens decoration and raises type by 1px.       */
body.simple .dense{ display:none }
body.simple .mini .mtrend{ display:none }
body.simple .card{ backdrop-filter:none; box-shadow:none }
body.simple .hero::after{ display:none }
body.simple .t-caption,body.simple .muted{ font-size:12.5px }
.simplepill{
  display:inline-flex; align-items:center; gap:var(--s-1);
  padding:var(--s-1) var(--s-3); border-radius:var(--r-pill);
  font:var(--t-micro); background:rgba(61,220,151,.14);
  border:1px solid rgba(61,220,151,.32); color:var(--ok);
}

/* ── PROTOTYPE SIDE PANEL ─────────────────────────────────────────────── */
.side{ width:270px; flex:0 0 270px; position:sticky; top:var(--s-7); color:var(--text-1) }
.brandmark{ display:flex; align-items:center; gap:var(--s-3); margin-bottom:var(--s-5) }
.brandmark .logo{
  width:52px; height:52px; flex:0 0 52px; border-radius:var(--r-md);
  display:grid; place-items:center; background:#0C1224;
  box-shadow:var(--glow-brand), inset 0 0 0 1px rgba(0,212,193,.25);
}
.brandmark h1{ margin:0; font:var(--t-h2); letter-spacing:-.4px }
.brandmark p{ margin:2px 0 0; font:var(--t-caption); color:var(--text-2) }

.side-card{
  background:var(--surface); border:1px solid var(--stroke);
  border-radius:var(--r-md); padding:var(--s-4);
  backdrop-filter:var(--blur); margin-bottom:var(--s-3);
}
.side-card h3{
  margin:0 0 var(--s-3); font:var(--t-micro);
  letter-spacing:.5px; color:var(--text-3);
}
.jump{ display:grid; gap:var(--s-1); max-height:340px; overflow-y:auto; scrollbar-width:thin }
.jump button{
  display:flex; align-items:center; gap:var(--s-2); width:100%;
  min-height:38px; padding:var(--s-2) var(--s-3);
  border-radius:var(--r-sm); border:1px solid var(--stroke);
  background:var(--surface); color:var(--text-1);
  font:var(--t-label); cursor:pointer; text-align:start;
  transition:var(--d-2) var(--e-out);
}
.jump button:hover{ transform:translateX(-3px); background:var(--surface-2) }
.jump button.on{ background:var(--g-brand); color:var(--on-brand); border-color:transparent }
.jump button .ic{ width:16px; height:16px }
.hintbox{ font:var(--t-caption); color:var(--text-2); line-height:2 }
.hintbox b{ color:var(--text-1) }

/* ── RESPONSIVE ───────────────────────────────────────────────────────── */
@media(max-width:1180px){
  body{ flex-direction:column; align-items:center; gap:var(--s-6) }
  .side{ position:static; width:390px; flex:0 0 auto }
  .jump{ max-height:none }
}
@media(max-width:460px){
  body{ padding:0 }
  .phone{
    width:100vw; height:100dvh; flex:0 0 auto;
    border-radius:0; box-shadow:none; border:0;
  }
  .phone::before{ display:none }
  .notch{ display:none }
  .side{ display:none }
}


/* ══════════════════════════════════════════════════════════════════════════
   10 · BRIDGE LAYER
   The v1 sheet carries a `.friendly` block that hard-codes sizes on almost
   every primitive. Those selectors out-specify the v3 rules above, so each
   one is answered here rather than deleted upstream — the prototype stays
   readable as a diff, and nothing silently regresses.

   Everything below also picks up the v1-only components that had no v2
   counterpart (duel, league, placement, reader, phonetics detail…) and
   brings them onto the same tokens.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 10.1 · NEUTRALISE `.friendly` SIZE OVERRIDES ─────────────────────── */
.friendly{ font:var(--t-body) }
.friendly .sect h3{ font:var(--t-h3); letter-spacing:-.2px }
.friendly .sect a{
  font:var(--t-label); padding:var(--s-2); margin:calc(var(--s-2)*-1);
  border-radius:var(--r-xs); background:none;
}
.friendly .appbar h2{ font:var(--t-h1); letter-spacing:-.5px }
.friendly .appbar .sub{ font:var(--t-caption) }
.friendly .muted{ font:var(--t-caption) }
.friendly .tiny{ font:var(--t-caption); font-size:11px }

.friendly .btn{ min-height:var(--tap); font-size:14.5px; border-radius:var(--r-md) }
.friendly .btn svg.ic{ width:18px; height:18px }
.friendly .btn.btn-lg{ min-height:54px; font-size:16px; border-radius:var(--r-lg) }
.friendly .tag{ font:var(--t-micro); padding:var(--s-1) var(--s-2) }
.friendly .stat{ font:700 12px/1 var(--f-fa); padding:var(--s-1) var(--s-3); gap:var(--s-1) }
.friendly .stat svg.ic{ width:14px; height:14px }
.friendly .plate{ width:40px; height:40px; flex:0 0 40px; border-radius:var(--r-sm) }
.friendly .plate svg.ic{ width:19px; height:19px }
.friendly .plate.lg{ width:52px; height:52px; flex:0 0 52px; border-radius:var(--r-md) }
.friendly .plate.sm{ width:32px; height:32px; flex:0 0 32px; border-radius:var(--r-xs) }
.friendly .row{ padding:var(--s-3); gap:var(--s-3); min-height:var(--tap); border-radius:var(--r-md) }
.friendly .row .rl b{ font:var(--t-label); font-size:13.5px }
.friendly .row .rl span{ font:var(--t-caption); margin-top:1px }
.friendly .card{ padding:var(--s-4); border-radius:var(--r-lg) }
.friendly .card.tight{ padding:var(--s-3) }
.friendly .iconbtn,.friendly .backbtn{
  width:var(--tap); height:var(--tap); border-radius:var(--r-sm);
}
.friendly .iconbtn svg.ic,.friendly .backbtn svg.ic{ width:18px; height:18px }
.friendly .optbtn,.friendly .matchb{ min-height:54px; font-size:14px; border-radius:var(--r-md) }
.friendly .stepnav .btn{ min-height:54px; font-size:16px }
.friendly .chal{ min-height:var(--tap); border-radius:var(--r-md); padding:var(--s-3); gap:var(--s-3) }
.friendly .chal .ci{ width:40px; height:40px; flex:0 0 40px; border-radius:var(--r-sm) }
.friendly .chal .cb b{ font:var(--t-label); font-size:13.5px }
.friendly .steps{ display:flex; gap:var(--s-1) }
.friendly .stp{ height:6px; border-radius:var(--r-pill) }
.friendly .stp.on{ transform:none; background:var(--g-brand) }
.friendly .lessonbar{ padding:var(--s-3) var(--gut) }
.friendly .smrow{ padding:var(--s-3); border-radius:var(--r-md); gap:var(--s-3); min-height:var(--tap) }
.friendly .smrow .sn{ width:40px; height:40px; flex:0 0 40px; border-radius:var(--r-sm) }
.friendly .smrow .sn .ic{ width:19px; height:19px }
.friendly .smrow .sl2 b{ font:var(--t-label); font-size:13.5px }
.friendly .smrow .sl2 span{ font:var(--t-caption); margin-top:1px }
.friendly .conf .ic,.friendly .tmpl .ic,.friendly .fmt .ic{ width:21px; height:21px }
.friendly .tfb{ width:40px; height:40px; border-radius:var(--r-sm) }
.friendly .whychip{ font:var(--t-caption) }
.friendly .node .bub{ width:62px; height:62px; flex:0 0 62px }
.friendly .node .bub svg.ic{ width:26px; height:26px }
.friendly .node .meta b{ font:var(--t-label); font-size:14px }
.friendly .node .meta span{ font:var(--t-caption) }

/* ── 10.2 · CHALLENGE / TASK ROW ──────────────────────────────────────── */
.chal{
  display:flex; align-items:center; gap:var(--s-3);
  min-height:var(--tap); padding:var(--s-3);
  border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--stroke);
  cursor:pointer; transition:var(--d-2) var(--e-out); width:100%; text-align:start;
}
.chal:hover{ background:var(--surface-2); transform:translateX(-2px) }
.chal .ci{
  width:40px; height:40px; flex:0 0 40px; border-radius:var(--r-sm);
  display:grid; place-items:center;
  background:var(--plate); border:1px solid var(--plate-line); color:var(--aqua);
}
.chal .cb{ flex:1; min-width:0 }
.chal .cb b{ display:block; font:var(--t-label); color:var(--text-1) }
.chal .cb span{ font:var(--t-caption); color:var(--text-2) }
.chal.done{ opacity:.55 }
.chal.done .ci{ background:rgba(61,220,151,.14); border-color:rgba(61,220,151,.32); color:var(--ok) }
.chal.now{
  border-color:rgba(41,121,255,.4);
  background:linear-gradient(150deg,rgba(41,121,255,.12),rgba(123,97,255,.06));
  box-shadow:var(--glow-brand);
}

/* ── 10.3 · SHARED ICON TILES ─────────────────────────────────────────────
   Every one-off tile in v1 (.ci .hi .sri .sn .se .ac .rn .evd .lnum .mi …)
   collapses onto a single recipe here.                                  */
.iconbox,.chal .ci,.histcard .hi,.srrow .sri,.smrow .sn,.scen .se,.artrow .ac,
.modecard .mi,.qacard .iconbox,.lesson-hero-ic,.actbtn .ai2,.dircell .di,
.evd,.lnum,.dv,.vav,.bcell .be,.exi,.rwi,.si,.mi2,.pl,.gi,.ci2,.cd{
  border-radius:var(--r-sm);
  background:var(--plate); border:1px solid var(--plate-line);
  color:var(--aqua); display:grid; place-items:center;
  transition:var(--d-2) var(--e-out);
}
.lesson-hero-ic{
  width:52px; height:52px; flex:0 0 52px; border-radius:var(--r-md);
  background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.3); color:#fff;
}

/* ── 10.4 · MODE / SCENARIO CARDS ─────────────────────────────────────── */
.modecard{
  display:flex; flex-direction:column; gap:var(--s-2);
  padding:var(--s-4); border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--stroke);
  cursor:pointer; transition:var(--d-2) var(--e-out); text-align:start;
}
.modecard:hover{ transform:translateY(-3px); box-shadow:var(--shadow-sm); border-color:var(--plate-line) }
.modecard .mi{ width:40px; height:40px; flex:0 0 40px }
.modecard b{ font:var(--t-h3); color:var(--text-1) }
.modecard span{ font:var(--t-caption); color:var(--text-2) }
.modecard i{ font-style:normal; font:var(--t-micro); color:var(--text-3) }

.scen{
  display:flex; align-items:center; gap:var(--s-3);
  min-height:var(--tap); padding:var(--s-3); border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--stroke);
  cursor:pointer; transition:var(--d-2) var(--e-out); width:100%; text-align:start;
}
.scen:hover{ background:var(--surface-2); transform:translateX(-2px) }
.scen .se{ width:40px; height:40px; flex:0 0 40px }
.scen .sl{ flex:1; min-width:0 }
.scen .sl b{ display:block; font:var(--t-label); color:var(--text-1) }
.scen .sl span{ font:var(--t-caption); color:var(--text-2) }

/* ── 10.5 · HUD (live speaking metrics) ───────────────────────────────── */
.hudgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-2) }
.hud{
  display:flex; flex-direction:column; gap:var(--s-2);
  padding:var(--s-3); border-radius:var(--r-md);
  background:var(--surface-2); border:1px solid var(--stroke);
}
.hud .hl{ font:var(--t-micro); color:var(--text-3) }
.hud .hbar{ height:5px; border-radius:var(--r-pill); background:var(--inset); overflow:hidden }
.hud .hbar i{ display:block; height:100%; background:var(--g-aqua); border-radius:inherit }
.hud .hv{ font:800 15px/1 var(--f-fa); color:var(--text-1) }

/* ── 10.6 · CORRECTION CARD ───────────────────────────────────────────── */
.fixcard{
  padding:var(--s-4); border-radius:var(--r-md);
  background:var(--surface-2); border:1px solid var(--stroke);
}
.fixhead{
  display:flex; align-items:center; gap:var(--s-2);
  font:var(--t-label); color:var(--text-1); margin-bottom:var(--s-2);
}
.inlinefix{ font-family:var(--f-en); direction:ltr; text-align:left; line-height:1.95 }

/* ── 10.7 · HISTORY / ARTICLE / ERROR ROWS ────────────────────────────── */
.histcard,.artrow,.errrow,.srrow,.roundrow,.rewrow,.smrow,.evrow,.milestone,.sylrow{
  display:flex; align-items:center; gap:var(--s-3);
  min-height:var(--tap); padding:var(--s-3);
  border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--stroke);
  cursor:pointer; transition:var(--d-2) var(--e-out); width:100%; text-align:start;
}
.histcard:hover,.artrow:hover,.errrow:hover,.srrow:hover{
  background:var(--surface-2); transform:translateX(-2px);
}
.histcard .hi,.artrow .ac,.srrow .sri,.smrow .sn,.roundrow .rn,.sylrow .ipabox{
  width:40px; height:40px; flex:0 0 40px;
}
.histcard .hl,.artrow .rl,.errrow .rl,.srrow .rl,.sylrow .rl{ flex:1; min-width:0 }
.histcard .hl b,.artrow .rl b,.errrow .rl b,.srrow .rl b,.sylrow .rl b{
  display:block; font:var(--t-label); color:var(--text-1); font-size:13.5px;
}
.histcard .hl span,.artrow .rl span,.errrow .rl span,.srrow .rl span,.sylrow .rl span{
  font:var(--t-caption); color:var(--text-2);
}

/* ── 10.8 · LIST / BOOK / GOAL CARDS ──────────────────────────────────── */
.listcard,.linkcard,.goalcard,.timecard,.booktile{
  border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--stroke);
  cursor:pointer; transition:var(--d-2) var(--e-out);
}
.listcard:hover,.linkcard:hover,.goalcard:hover,.booktile:hover{
  transform:translateY(-3px); box-shadow:var(--shadow-sm);
}
.listcard b,.booktile b{ font:var(--t-h3); color:var(--text-1) }
.listcard span,.booktile span{ font:var(--t-caption); color:var(--text-2) }
.booktile .cv{ border-radius:var(--r-md) var(--r-md) 0 0; overflow:hidden }

/* ── 10.9 · IMAGE PLATES ──────────────────────────────────────────────── */
.phwrap{ position:relative; overflow:hidden; background:var(--bg-2) }
.phwrap>img,.phwrap .ph{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:opacity .6s var(--e-out);
}
.phwrap.scrim::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:var(--img-veil);
}
.card>.phwrap:first-child{ border-radius:var(--r-lg) var(--r-lg) 0 0 }

/* ── 10.10 · MISC ROWS & CHIPS ────────────────────────────────────────── */
.whychip{
  display:inline-flex; align-items:center; gap:var(--s-2);
  padding:var(--s-2) var(--s-3); border-radius:var(--r-sm);
  background:rgba(255,200,87,.11); border:1px solid rgba(255,200,87,.28);
  font:var(--t-caption); color:var(--text-2);
}
.whychip b{ color:var(--c-gold) }
body[data-theme="light"] .whychip b{ color:var(--c-gold-6) }

.hint{
  display:flex; gap:var(--s-3); align-items:flex-start;
  padding:var(--s-3) var(--s-4); border-radius:var(--r-md);
  background:var(--surface-2); border:1px solid var(--stroke);
  font:var(--t-caption); color:var(--text-2);
}
.hint .hi2{
  width:32px; height:32px; flex:0 0 32px; border-radius:var(--r-xs);
  display:grid; place-items:center;
  background:var(--plate); border:1px solid var(--plate-line); color:var(--aqua);
}

.cando,.checkline{
  display:flex; align-items:center; gap:var(--s-2);
  font:var(--t-sm); color:var(--text-2); padding:var(--s-1) 0;
}
.cando .ic,.checkline .ic{ width:17px; height:17px; color:var(--ok); flex:0 0 17px }

.stepnav{ display:flex; gap:var(--s-2); padding:var(--s-4) var(--gut) }
.stepnav .btn{ flex:1 }

/* ── 10.11 · SPELLING / DRILL BOXES ───────────────────────────────────── */
.sbox{
  width:40px; height:48px; border-radius:var(--r-xs);
  display:grid; place-items:center;
  background:var(--inset); border:1.5px solid var(--stroke);
  font-family:var(--f-en); font-size:19px; font-weight:700; color:var(--text-1);
  transition:var(--d-2) var(--e-out);
}
.sbox.f{ background:rgba(61,220,151,.13); border-color:rgba(61,220,151,.4) }
.sbox.cur{ border-color:rgba(41,121,255,.6); box-shadow:0 0 0 3px rgba(41,121,255,.15) }
.spellrow{ display:flex; gap:var(--s-2); justify-content:center; flex-wrap:wrap }

/* ── 10.12 · LEITNER FLOW ─────────────────────────────────────────────── */
.flowline{ display:flex; align-items:center; gap:var(--s-2); justify-content:center }
.fnode{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  min-width:52px; padding:var(--s-2); border-radius:var(--r-sm);
  background:var(--surface-2); border:1px solid var(--stroke);
  font:var(--t-label); color:var(--text-1);
}
.fnode small{ font:var(--t-micro); color:var(--text-3) }
.fnode.gold{ background:rgba(255,200,87,.14); border-color:rgba(255,200,87,.34) }
.farrow{ color:var(--text-3); flex:0 0 auto }

.boxtrack{ display:flex; gap:var(--s-1) }
.bt{ flex:1; height:6px; border-radius:var(--r-pill); background:var(--inset) }
.bt.hit{ background:var(--g-ok) }
.bt.cur{ background:var(--g-brand); box-shadow:0 0 0 3px rgba(41,121,255,.18) }

/* ── 10.13 · DAY / DATE PICKERS ───────────────────────────────────────── */
.daygrid{ display:grid; grid-template-columns:repeat(7,1fr); gap:var(--s-1) }
.daycell,.dayd,.dpick{
  aspect-ratio:1; min-height:38px; border-radius:var(--r-xs);
  display:grid; place-items:center;
  background:var(--surface-2); border:1px solid var(--stroke);
  font:var(--t-label); color:var(--text-2); cursor:pointer;
  transition:var(--d-2) var(--e-out);
}
.daycell:hover,.dpick:hover{ background:var(--surface-3); color:var(--text-1) }
.daycell.done,.dayd.on{ background:rgba(61,220,151,.16); border-color:rgba(61,220,151,.34); color:var(--ok) }
.daycell.today,.dayd.now,.dpick.on{
  background:var(--g-brand); border-color:transparent; color:var(--on-brand);
}

/* ── 10.14 · CHART BARS ───────────────────────────────────────────────── */
.chartbar,.fbar,.cmpbar{
  border-radius:var(--r-xs) var(--r-xs) 3px 3px;
  background:var(--g-brand); min-height:6px;
  transition:height 1s var(--e-out);
}
.chartbar.hot,.fbar.hot{ background:var(--g-gold) }
.stackbar{ display:flex; height:11px; border-radius:var(--r-pill); overflow:hidden; background:var(--inset) }
.stackbar i{ display:block; height:100% }

/* ── 10.15 · SEGMENT / SYLLABLE ───────────────────────────────────────── */
.segline{ display:flex; gap:var(--s-1); flex-wrap:wrap; justify-content:center }
.seg-n,.syl,.stw{
  padding:var(--s-2) var(--s-3); border-radius:var(--r-xs);
  background:var(--surface-2); border:1px solid var(--stroke);
  font-family:var(--f-en); font-size:14px; color:var(--text-1);
  transition:var(--d-2) var(--e-out);
}
.seg-n.hi,.stw.hi{ background:rgba(41,121,255,.16); border-color:rgba(41,121,255,.36); color:var(--c-blue-4) }
.seg-n.err{ background:rgba(255,93,143,.15); border-color:rgba(255,93,143,.36); color:var(--c-rose) }
.syl.ok{ background:rgba(61,220,151,.15); border-color:rgba(61,220,151,.36); color:var(--c-lime) }
.syl.no{ background:rgba(255,93,143,.15); border-color:rgba(255,93,143,.36); color:var(--c-rose) }
.beat{ border-radius:var(--r-pill); background:var(--g-aqua); height:6px }
.beat.sm{ width:14px } .beat.md{ width:24px } .beat.lg{ width:38px }

/* ── 10.16 · IPA KEY / COACH ROW ──────────────────────────────────────── */
.ipakey{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  min-width:52px; min-height:52px; padding:var(--s-2);
  border-radius:var(--r-sm); background:var(--surface); border:1px solid var(--stroke);
  cursor:pointer; transition:var(--d-2) var(--e-out);
}
.ipakey:hover{ transform:translateY(-2px); border-color:var(--plate-line) }
.ipakey b{ font-family:var(--f-en); font-size:15px; color:var(--text-1) }
.ipakey span{ font:var(--t-micro); color:var(--text-3) }

/* ── 10.17 · WORD-TILE / EXAMPLE ──────────────────────────────────────── */
.wt,.ex{
  padding:var(--s-3); border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--stroke);
  cursor:pointer; transition:var(--d-2) var(--e-out);
}
.wt:hover,.ex:hover{ background:var(--surface-2); transform:translateY(-2px) }
.ex b{ display:block; font-family:var(--f-en); direction:ltr; text-align:left; color:var(--text-1) }
.ex span{ font:var(--t-caption); color:var(--text-2) }

/* ── 10.18 · MISC ─────────────────────────────────────────────────────── */
.swatch{ width:26px; height:26px; border-radius:8px; border:1px solid var(--stroke) }
.scorebadge{
  display:inline-grid; place-items:center;
  min-width:44px; height:44px; padding:0 var(--s-2); border-radius:var(--r-sm);
  font:900 17px/1 var(--f-en);
  background:var(--surface-2); border:1px solid var(--stroke); color:var(--text-1);
}
.scorebadge.hi{ background:rgba(61,220,151,.16); border-color:rgba(61,220,151,.36); color:var(--c-lime) }
.scorebadge.md{ background:rgba(255,200,87,.16); border-color:rgba(255,200,87,.36); color:var(--c-gold) }

.nextstep{
  position:relative; padding:var(--s-4); border-radius:var(--r-lg);
  background:linear-gradient(150deg,rgba(0,212,193,.14),rgba(41,121,255,.09));
  border:1px solid var(--plate-line);
}
.nsmark{
  width:40px; height:40px; flex:0 0 40px; border-radius:var(--r-sm);
  display:grid; place-items:center; background:var(--g-brand); color:var(--on-brand);
}

.connector,.smconn{
  width:3px; border-radius:var(--r-pill); background:var(--inset);
  margin-inline-start:30px; height:14px;
}
.connector.done{ background:var(--g-ok) }

/* ── 10.19 · LIGHT-THEME PHOTO CONTRAST ───────────────────────────────────
   Text over a photograph needs the veil in both themes — light mode is not
   an excuse to drop it, or the caption vanishes on a bright image.      */
body[data-theme="light"] .hero.photo .hero-title,
body[data-theme="light"] .hero.photo .t-display,
body[data-theme="light"] .phwrap.scrim .lesson-hero-ic{ color:#fff }

/* ── 10.20 · FALLBACK: any leftover pixel radius gets the new family ──── */
.qacard,.cdbox,.tmpl,.fmt,.opbar,.drill,.duelopt,.planstep,.timecard,
.goalcard,.polrow,.cmprow,.errcard,.tfb{
  border-radius:var(--r-md);
}


/* ============================================================
   Production adjustments (EduBot real app, ported from the
   LinguaAI-v3 mockup). Only structural/functional tweaks live
   here — no color or spacing overrides, to stay pixel-faithful
   to the reference file.
   ============================================================ */
/* The mockup's fake "9:41" status bar / notch duplicate the real
   device's own status bar + notch in production, so both are hidden
   at every width (the mockup only hid the notch below 460px). */
.statusbar{ display:none !important; }
.notch{ display:none !important; }
/* The mockup never used real <a> tags (everything was div/span+onclick in
   its single-file demo). Real multi-page navigation needs actual anchors
   for hrefs, so reset the browser's default link underline/color here —
   components keep their own colors exactly as in the reference file. */
a{ color:inherit; text-decoration:none; }
/* No dev sidebar (.side) in production — real pages simply don't
   include that markup, so no override is needed for it. */
/* Auth screens (login/register) have no direct mockup reference;
   built purely from existing tokens/components (.field, .btn,
   .card, .plate…) so they still feel native to the same system. */
.authhead{ text-align:center; padding:34px 0 6px; }
.authhead .logomark{ width:52px; height:72px; margin:0 auto 14px; display:block; }
.authhead h1{ font-size:20px; margin-bottom:4px; }
.fieldgroup{ margin-bottom:14px; }
.fieldgroup .t-label{ display:block; margin-bottom:7px; color:var(--text-2); }
.fieldgroup .fieldwrap{ position:relative; }
.fieldgroup .fieldwrap .ic{ position:absolute; inset-inline-start:14px; top:50%; transform:translateY(-50%); color:var(--text-3); pointer-events:none; }
.fieldgroup .fieldwrap .field{ padding-inline-start:42px; padding-inline-end:42px; }
.fieldgroup .fieldwrap .eyebtn{ position:absolute; inset-inline-end:12px; top:50%; transform:translateY(-50%); background:none; border:0; padding:4px; color:var(--text-3); cursor:pointer; }
.fieldgroup .fieldwrap .eyebtn.off{ position:relative; }
.fieldgroup .fieldwrap .eyebtn.off::after{ content:''; position:absolute; inset:7px; border-top:1.6px solid currentColor; transform:rotate(45deg); }
.form-error{ color:var(--rose-400); font-size:12.5px; font-weight:700; margin:-4px 0 12px; min-height:0; }
.form-error:empty{ display:none; }
.disabled-badge{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:var(--r-pill); background:var(--surface-2); color:var(--text-3); border:1px solid var(--stroke); }
.bigtile.disabled{ opacity:.5; cursor:pointer; position:relative; }
.bigtile.disabled .bt-ic{ filter:grayscale(1); }
.bigtile{ position:relative; }
/* Speaking practice recording indicator (lessons/{id}/speaking/grade flow). */
.rec-status{ display:inline-flex; align-items:center; gap:7px; color:var(--rose-400); font-weight:700; }
.rec-dot{ width:8px; height:8px; border-radius:50%; background:var(--rose-400); animation:pulse2 1.1s infinite; }
.rec-timer{ font-family:monospace; }
.btn.recording{ background:var(--rose-500); border-color:transparent; }
.cbtn.recording{ background:var(--rose-500); color:#fff; }
.dircell{ position:relative; }
.dircell.disabled{ opacity:.5; }
.dircell.disabled .di{ filter:grayscale(1); }
@keyframes pulse2{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }
.comingsoon{ text-align:center; padding:40px 20px; }
.comingsoon .plate{ margin:0 auto 16px; }

/* ── Responsive shell override ─────────────────────────────────────────
   The mockup's .phone / body rules simulate a "device on a desk" design-
   review canvas (dark gradient backdrop, flex-centered fixed 390×844
   hardware frame with bezel box-shadow) — fine for presenting the design,
   wrong for a real production web app, which must fill the actual browser
   viewport responsively on every screen size (phones, tablets, desktop),
   exactly like the real reference site (wallgold.ir/app). The mockup only
   fixed this below 460px (@media max-width:460px); we make full-bleed,
   chrome-less behaviour the default at ALL widths instead, and give wide
   screens a centered, capped-width column instead of a floating bezel. */
html,body{ width:100%; min-height:100%; }
body{
  display:block !important;
  align-items:unset !important;
  justify-content:unset !important;
  gap:0 !important;
  padding:0 !important;
  background:var(--bg-0) !important;
  overflow-x:hidden;
}
.phone{
  position:relative !important;
  width:100% !important;
  max-width:480px !important;
  height:100vh !important;
  height:100dvh !important;
  margin:0 auto !important;
  flex:none !important;
  border-radius:0 !important;
  border:0 !important;
  box-shadow:none !important;
}
body[data-theme="light"] .phone{ box-shadow:none !important; }
@media(min-width:481px){
  .phone{
    border-inline-start:1px solid var(--stroke);
    border-inline-end:1px solid var(--stroke);
  }
}
.side{ display:none !important; }

/* --- Bug-fix round: icon distortion fixes ---
   A pre-existing selector-list rule meant only for the big pulsing tab-bar
   icon (.tab.fab .tic.fabmark) is missing a comma and therefore also
   matches .cbtn.send svg.ic and .micbtn svg.ic, leaking 56px size /
   animation / filter / absolute positioning onto them. Override here. */
.cbtn.send svg.ic{
  width:19px; height:19px; stroke:currentColor; color:#fff;
  position:static; margin-top:0; padding:0; border-radius:0;
  animation:none; filter:none; background:none; box-shadow:none;
}
.micbtn svg.ic{
  position:static; margin-top:0; padding:0; border-radius:0;
  animation:none; filter:none; background:none; box-shadow:none;
}

/* --- Live voice mic button: nicer idle/active animation --- */
@keyframes micBreathe{
  0%,100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(124,140,255,.35); }
  50%{ transform:scale(1.045); box-shadow:0 0 0 10px rgba(124,140,255,0); }
}
@keyframes micActivePulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(244,63,94,.45); }
  50%{ box-shadow:0 0 0 14px rgba(244,63,94,0); }
}
.micbtn:not(.recording){ animation:micBreathe 2.6s ease-in-out infinite; }
.micbtn.recording{ animation:micActivePulse 1.4s ease-in-out infinite; }