/* Layout: one phone-width column. Sticky header with tabs; a session or a text trainer takes over the column.
   Two language "tracks": EN = cobalt, ES = saffron. Stars are saffron in both. Neutrals are cool blue-grey. */
:root{
  --bg:#ECEEF2; --surface:#FFFFFF; --surface-2:#E1E5EC; --fg:#141922; --muted:#5A6371; --line:#D3D8E0;
  --en:#2E49D1; --en-on:#FFFFFF; --en-ink:#2A43C4; --en-soft:#DCE2FA;
  --es:#E8A21A; --es-on:#1C1400; --es-ink:#8A5800; --es-soft:#FAEBC9;
  --good:#1D8350; --good-soft:#D5EFE1; --bad:#BF3434; --bad-soft:#F6DADA; --mid-soft:#FAEBC9;
  --star:#E8A21A;
  --shadow:0 1px 2px rgba(20,25,34,.08);
  --f-display:"Unbounded","Onest",system-ui,sans-serif;
  --f-body:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --r:14px;
  --lang:var(--en); --lang-on:var(--en-on); --lang-ink:var(--en-ink); --lang-soft:var(--en-soft);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1116; --surface:#171B22; --surface-2:#232833; --fg:#E7EAF0; --muted:#98A1AF; --line:#2B313C;
    --en:#7F95FF; --en-on:#0B1030; --en-ink:#A3B2FF; --en-soft:#1C2452;
    --es:#F2B437; --es-on:#1C1400; --es-ink:#F4C465; --es-soft:#3A2C0C;
    --good:#4DC98B; --good-soft:#123021; --bad:#FF7B7B; --bad-soft:#3B1818; --mid-soft:#3A2C0C;
    --star:#F2B437; --shadow:none; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1116; --surface:#171B22; --surface-2:#232833; --fg:#E7EAF0; --muted:#98A1AF; --line:#2B313C;
  --en:#7F95FF; --en-on:#0B1030; --en-ink:#A3B2FF; --en-soft:#1C2452;
  --es:#F2B437; --es-on:#1C1400; --es-ink:#F4C465; --es-soft:#3A2C0C;
  --good:#4DC98B; --good-soft:#123021; --bad:#FF7B7B; --bad-soft:#3B1818; --mid-soft:#3A2C0C;
  --star:#F2B437; --shadow:none; color-scheme:dark;
}
.L-en{--lang:var(--en);--lang-on:var(--en-on);--lang-ink:var(--en-ink);--lang-soft:var(--en-soft)}
.L-es{--lang:var(--es);--lang-on:var(--es-on);--lang-ink:var(--es-ink);--lang-soft:var(--es-soft)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
.wrap{max-width:760px;margin-inline:auto;padding-inline:16px}
h1,h2,h3{margin:0;text-wrap:balance}
h1{font-family:var(--f-display);font-weight:700;font-size:clamp(28px,6.5vw,40px);line-height:1.1;letter-spacing:-.02em}
h2{font-family:var(--f-display);font-weight:500;font-size:21px;line-height:1.25;letter-spacing:-.01em}
h3{font-size:17px;font-weight:700}
p{margin:0}
a{color:var(--lang-ink);text-underline-offset:3px}
[hidden]{display:none!important}
.muted{color:var(--muted)} .small{font-size:14px}
.eyebrow{font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.stack{display:flex;flex-direction:column;gap:20px}
.stack-s{display:flex;flex-direction:column;gap:10px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.row.between{justify-content:space-between}
.row.nowrap{flex-wrap:nowrap}
.minw{min-width:0}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:14px;min-width:0}
details.panel{display:block}
details.panel[open] summary{margin-bottom:14px}
main{display:flex;flex-direction:column;gap:20px;padding-block:20px calc(88px + env(safe-area-inset-bottom,0px))}
:focus-visible{outline:3px solid color-mix(in srgb,var(--lang) 65%,transparent);outline-offset:2px}

/* header */
#hdr{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:12px 4px}
body.in-session .bar{padding-block:12px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:700;font-size:16px;letter-spacing:-.01em}
.brand .tracks{display:grid;gap:3px;width:20px}
.brand .tracks i{display:block;height:4px;border-radius:2px}
.t-en{background:var(--en)} .t-es{background:var(--es)}
.streak{font-size:14px;color:var(--muted);white-space:nowrap;display:flex;align-items:baseline;gap:3px}
.streak b{font-family:var(--f-display);color:var(--fg);font-size:16px}
.streak .xp{margin-left:8px;font-family:var(--f-mono);font-size:12px;padding:2px 7px;border-radius:999px;background:var(--surface-2);color:var(--fg)}
.tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;padding-block:6px 10px;margin-inline:-8px}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:0 0 auto;border:0;background:none;color:var(--muted);font:500 15px/1 var(--f-body);padding:9px 12px;border-radius:999px;cursor:pointer}
.tabs button:hover{color:var(--fg)}
.tabs button[aria-current=page]{background:var(--fg);color:var(--bg)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--surface);color:var(--fg);font:600 15px/1.25 var(--f-body);padding:10px 16px;border-radius:12px;cursor:pointer;min-height:44px;text-align:center;text-decoration:none}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--lang);color:var(--lang-on);border-color:transparent}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent}
.btn.big{font-size:17px;padding:14px 20px;min-height:56px;border-radius:14px}
.btn.small{min-height:36px;padding:6px 12px;font-size:14px;border-radius:10px}
.btn.danger{background:var(--bad);color:#fff;border-color:transparent}
.btn:disabled,.btn.disabled{opacity:.5;cursor:not-allowed;filter:none;pointer-events:none}
.btn.rec{align-self:flex-start;border-style:dashed}
.btn.rec.on{background:var(--bad);color:#fff;border:0;animation:recpulse 1.2s ease-in-out infinite}
@keyframes recpulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--bad) 25%,transparent)}}
.wide{width:100%}
.link{background:none;border:0;color:var(--lang-ink);font:inherit;font-weight:600;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px;text-align:left}
.link.quiet{color:var(--muted);font-weight:500}
.ib{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--lang-ink);display:inline-grid;place-items:center;cursor:pointer;flex:0 0 auto;padding:0}
.ib:hover{border-color:var(--lang)}
.back{align-self:flex-start;padding-left:8px}
.check{display:inline-flex;gap:8px;align-items:center;font-size:15px}
.check input{width:20px;height:20px;accent-color:var(--lang)}

/* today */
.hero{display:flex;flex-direction:column;gap:14px;padding-block:6px 2px}
.hero-title .lname{color:var(--lang-ink)}
.plan{list-style:none;margin:4px 0 0;padding:0;display:grid;border-top:1px solid var(--line)}
.plan li{display:grid;grid-template-columns:104px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);align-items:baseline}
.plan li>span:last-child{min-width:0}
.plan .k{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cta{display:grid;grid-template-columns:1.4fr 1fr;gap:10px;margin-top:4px}
@media (max-width:520px){.cta{grid-template-columns:1fr}}
.nudge{font-size:15px;color:var(--muted)}
.intro{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;display:grid;gap:10px}
.intro ol{margin:0;padding-left:20px;display:grid;gap:4px}
.week-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.big-num{font-family:var(--f-display);font-weight:700;font-size:44px;line-height:1;font-variant-numeric:tabular-nums}
.big-num small{font-size:20px;color:var(--muted);font-weight:500;margin-left:2px}
.week-side{display:grid;gap:2px;text-align:right;font-size:14px;color:var(--muted)}
.week-side b{color:var(--fg);font-variant-numeric:tabular-nums}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.day{display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.day i{display:block;width:100%;max-width:44px;aspect-ratio:1;border-radius:10px;background:var(--surface-2)}
.day.full i{background:var(--lang)}
.day.lazy i{background:var(--lang-soft);box-shadow:inset 0 0 0 2px var(--lang)}
.day.today span{color:var(--fg);font-weight:600}
.day.today i{outline:2px solid var(--fg);outline-offset:2px}
.day.future i{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.tracks{display:grid;gap:6px}
.track{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center;text-align:left;background:none;border:0;border-radius:12px;padding:10px 8px;margin-inline:-8px;color:inherit;font:inherit;cursor:pointer}
.track:hover{background:var(--surface-2)}
.tl{font-family:var(--f-display);font-weight:700;font-size:17px;color:var(--lang-ink)}
.tr{display:grid;gap:6px;min-width:0}
.ticks{display:flex;gap:3px}
.ticks i{flex:1;height:14px;border-radius:3px;background:var(--surface-2)}
.ticks i.done{background:var(--lang)}
.ticks i.cur{background:var(--lang-soft);box-shadow:inset 0 0 0 2px var(--lang)}
.made{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:14px;border-radius:12px;background:var(--lang-soft);flex-wrap:wrap}
.made>div{min-width:0;flex:1 1 220px;display:grid;gap:2px}

/* inputs */
input.text,textarea,select,input[type=time]{font:inherit;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:11px 14px;width:100%;min-width:0}
input[type=time]{width:auto;padding:8px 10px}
input.text{font-size:18px}
textarea{font-size:17px;resize:vertical;min-height:92px;line-height:1.45}
textarea[readonly]{background:var(--surface-2)}
select{font-size:15px}
.field{display:grid;gap:8px}
.field>label{font-weight:600;font-size:15px}
.fill{display:flex;gap:10px}
.fill input{flex:1}
@media (max-width:420px){.fill{flex-wrap:wrap}.fill .btn{width:100%}}

/* session */
.sess{display:flex;flex-direction:column;gap:24px}
.sess-top{display:grid;gap:10px}
.steps{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:4px}
.steps span{height:6px;border-radius:3px;background:var(--surface-2)}
.steps span.done{background:var(--lang)}
.steps span.cur{background:color-mix(in srgb,var(--lang) 40%,var(--surface-2))}
.sess-meta{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sess-next{padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:flex-end}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media (max-width:520px){.stats{grid-template-columns:repeat(2,1fr)}}
.stats>div{display:grid;gap:2px;padding:12px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.stats b{font-family:var(--f-display);font-size:26px;line-height:1.1;font-variant-numeric:tabular-nums}
.stats span{font-size:13px;color:var(--muted)}
.stats .st-known b{color:var(--good)}

/* player */
.player{display:flex;align-items:center;gap:16px}
.play{width:72px;height:72px;border-radius:50%;border:0;background:var(--lang);color:var(--lang-on);display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
.play:hover{filter:brightness(1.06)}
.pmeta{display:grid;flex:1;min-width:0}
.chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chip{border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:999px;padding:6px 12px;font:500 14px var(--f-body);cursor:pointer}
.chip[aria-pressed=true]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.chip:disabled{opacity:.45;cursor:default}
.qs{display:grid;gap:20px}
.qblock{display:grid;gap:8px}
.qblock .qt{font-weight:600;font-size:17px}
.lines{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.line{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:12px;border-radius:12px;background:var(--surface);border:1px solid var(--line);transition:box-shadow .15s}
.line.B{background:var(--lang-soft);border-color:transparent}
.line>div{min-width:0;display:grid;gap:2px}
.who{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.line .tgt{font-size:17px;font-weight:500}
.line.now{box-shadow:0 0 0 2px var(--lang)}
.line.you{box-shadow:0 0 0 2px var(--good)}
.line.you .who::after{content:" · повтори вслух";color:var(--good)}
.phr{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.phr li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center}

/* exercises */
.ex-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.q{font-size:21px;line-height:1.45;font-weight:500}
.blank{display:inline-block;min-width:3.2em;border-bottom:2px solid var(--lang);text-align:center;padding-inline:4px;line-height:1.2}
.blank.filled{color:var(--lang-ink);font-weight:600}
.opts{display:grid;gap:8px}
.opt{justify-content:flex-start;text-align:left;font-weight:500;font-size:17px}
.opt:disabled{opacity:.55}
.opt.right,.opt.right:disabled{background:var(--good-soft);border-color:var(--good);opacity:1}
.opt.wrong,.opt.wrong:disabled{background:var(--bad-soft);border-color:var(--bad);opacity:1}
.fb{border-radius:12px;padding:12px 14px;display:grid;gap:4px}
.fb.good{background:var(--good-soft)} .fb.bad{background:var(--bad-soft)}
.fb b{color:var(--good)} .fb.bad b{color:var(--bad)}
.fb.note{background:var(--lang-soft)}
.answer{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:14px;border-radius:12px;background:var(--lang-soft)}
.answer>div{min-width:0}
.tgt{font-size:18px;font-weight:600}
.tgt-s{font-size:16px;font-weight:600}
.ctx{font-style:italic}
.grades{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.grades .btn{padding-inline:6px;font-size:14px}
.score{font-family:var(--f-display);font-weight:700;font-size:64px;line-height:1;color:var(--lang-ink)}
.score.good{color:var(--good)}

/* rule */
.rule .rb{display:grid;gap:6px}
.rule .rb p{max-width:66ch}
.rbody{display:grid;gap:18px}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
tr:last-child td{border-bottom:0}
th{font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;color:var(--muted);font-weight:500;background:var(--surface-2)}
code{font-family:var(--f-mono);font-size:.88em;background:var(--surface-2);padding:1px 5px;border-radius:5px}
.exs,.mis{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.exs li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.exs li>div{min-width:0}
.exs .tgt{font-size:17px;font-weight:500}
.mis li{padding:10px 12px;border-radius:10px;background:var(--surface);border:1px solid var(--line)}
.mis .bad{text-decoration:line-through;text-decoration-color:var(--bad);color:var(--muted)}
.mis .good{color:var(--good);font-weight:600}
details:not(.panel){border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface)}
details summary{cursor:pointer;font-weight:600}
details:not(.panel)[open] summary{margin-bottom:16px}
.ask-out{display:grid;gap:8px;white-space:pre-wrap}

/* lists */
.seg{display:inline-flex;padding:4px;border-radius:12px;background:var(--surface-2);gap:4px;align-self:flex-start;flex-wrap:wrap}
.seg button{border:0;background:none;font:600 14px var(--f-body);color:var(--muted);padding:7px 12px;border-radius:9px;cursor:pointer}
.seg button[aria-pressed=true]{background:var(--surface);color:var(--fg);box-shadow:var(--shadow)}
.list{display:grid;gap:8px}
.unit-row{display:grid;grid-template-columns:32px 1fr auto;gap:12px;align-items:center;text-align:left;padding:14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:inherit;font:inherit;cursor:pointer;width:100%}
.unit-row:hover{border-color:var(--muted)}
.unit-row.cur{border-color:var(--lang);box-shadow:inset 0 0 0 1px var(--lang)}
.unit-row .num{font-family:var(--f-mono);font-size:13px;color:var(--muted)}
.ut{display:grid;gap:2px;min-width:0}
.pills{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.pill{font-family:var(--f-mono);font-size:12px;padding:3px 8px;border-radius:999px;background:var(--surface-2);color:var(--muted);white-space:nowrap}
.pill.good{background:var(--good-soft);color:var(--good)}
.pill.lang{background:var(--lang);color:var(--lang-on)}
.pill.soft{background:var(--lang-soft);color:var(--lang-ink)}
.flash{min-height:230px;align-items:center;justify-content:center;text-align:center;gap:14px;padding:28px 20px}
.flash .front{font-size:22px;font-weight:600;max-width:32ch}
.flash .back{font-family:var(--f-display);font-weight:500;font-size:22px;line-height:1.3;color:var(--lang-ink);max-width:30ch}
.kbd{text-align:center}
@media (hover:none){.kbd{display:none}}
.clist{list-style:none;margin:0;padding:0;display:grid}
.clist li{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.clist li>div{min-width:0}
.lb{font-family:var(--f-mono);font-size:11px;padding:2px 6px;border-radius:6px;background:var(--lang-soft);color:var(--lang-ink)}
.x{border:0;background:none;color:var(--muted);cursor:pointer;font-size:20px;line-height:1;width:32px;height:32px;border-radius:8px;flex:0 0 auto}
.x:hover{background:var(--surface-2);color:var(--bad)}
.timer{display:flex;align-items:baseline;gap:6px}
.timer span:first-child{font-family:var(--f-display);font-size:56px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:var(--lang-ink)}
.thinking{display:flex;gap:12px;align-items:center;color:var(--muted)}
.thinking::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--lang);animation:pulse .9s ease-in-out infinite alternate;flex:0 0 auto}
@keyframes pulse{from{opacity:.3;transform:scale(.8)}to{opacity:1;transform:scale(1.1)}}
.err{color:var(--bad)}
.fix{display:grid;gap:12px;padding:16px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.diary-item{display:grid;gap:4px;padding:12px 0;border-bottom:1px solid var(--line)}
.prose{display:grid;gap:12px;max-width:68ch}
.prose ul,.prose ol{margin:0;padding-left:20px;display:grid;gap:8px}
.prose h2{margin-top:10px}

/* texts */
.txrow{grid-template-columns:1fr auto;padding:0;cursor:default}
.txopen{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:14px;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer;min-width:0}
.txrow>.x,.txrow>.btn{margin-right:10px}
.tx-top{display:grid;gap:10px}
.tx-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx-score{display:grid;justify-items:end;gap:2px;flex:0 0 auto}
.tx-score>span:first-child{display:inline-flex;align-items:center;gap:4px;font-family:var(--f-display);font-weight:700;font-size:18px}
.tx-score svg,.stars svg{color:var(--star)}
.combo{font-family:var(--f-mono);font-size:12px;padding:2px 7px;border-radius:999px;background:var(--star);color:#1C1400}
.steps.tx span.s3{background:var(--good)}
.steps.tx span.s2{background:color-mix(in srgb,var(--good) 60%,var(--surface-2))}
.steps.tx span.s1{background:var(--star)}
.steps.tx span.s0{background:var(--bad)}
.steps.tx span.cur{background:color-mix(in srgb,var(--lang) 45%,var(--surface-2))}
.sent{gap:12px}
.sent-t{font-size:21px;line-height:2.1;margin:0}
.w{display:inline-flex;flex-direction:column;align-items:center;vertical-align:top;border:0;background:none;color:inherit;font:inherit;padding:0 1px;margin:0;cursor:pointer;line-height:1.3;border-bottom:1px dashed color-mix(in srgb,var(--muted) 50%,transparent);border-radius:0}
.w:hover,.w.on{background:var(--lang-soft);border-radius:6px}
.w small{font-size:12px;color:var(--lang-ink);font-weight:500;line-height:1.1;max-width:9em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w.seen{border-bottom-color:transparent}
.wpop{padding:10px 12px;border-radius:10px;background:var(--lang-soft)}
.hints{display:flex;flex-wrap:wrap;gap:6px}
.gloss{display:flex;flex-wrap:wrap;gap:6px}
.gl{font-size:14px;padding:4px 10px;border-radius:999px;background:var(--surface-2)}
.gl b{font-weight:600}
.tx-res .stars{display:inline-flex;gap:2px}
.tx-res .stars i{display:inline-grid;opacity:.25}
.tx-res .stars i.on{opacity:1}
.tx-res .stars svg{width:22px;height:22px}

/* art */
.art{display:block;max-width:100%}
.art.banner{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:18px;background:var(--surface-2)}
.panel>.art.banner{border-radius:12px}
.hero .art.banner{aspect-ratio:2/1}
.thumb{width:56px;height:56px;border-radius:12px;overflow:hidden;background:var(--surface-2);display:block;flex:0 0 auto}
.thumb .art{width:100%;height:100%;object-fit:cover}
.unit-row:has(.thumb){grid-template-columns:56px 1fr auto;padding:10px 14px 10px 10px}

/* onboarding */
.choice{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.opt-card{display:grid;gap:2px;text-align:left;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:inherit;font:inherit;cursor:pointer}
.opt-card:hover{border-color:var(--muted)}
.opt-card.on{border-color:var(--lang);box-shadow:inset 0 0 0 2px var(--lang);background:var(--lang-soft)}

/* admin */
.linkbox{padding:12px 14px;border-radius:12px;background:var(--surface-2);overflow-x:auto}
.linkbox code{background:none;padding:0;font-size:14px;white-space:nowrap;user-select:all}
.adm-row{display:flex;gap:12px;align-items:center;justify-content:space-between;width:100%;text-align:left;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:inherit;font:inherit;cursor:pointer}
.adm-row:hover{border-color:var(--muted)}
.adm-main{display:grid;gap:2px;min-width:0}
.adm-main b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-side{display:flex;gap:6px;align-items:center;flex:0 0 auto}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.spark{display:flex;align-items:flex-end;gap:2px;height:22px;width:84px}
.spark i{flex:1;height:var(--h);min-height:2px;border-radius:2px;background:var(--surface-2)}
.spark i.on{background:var(--good)}
.spark.big{height:64px;width:100%;gap:4px}
@media (max-width:420px){.adm-side .pill{display:none}}

#toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:12px;font-size:15px;opacity:0;pointer-events:none;transition:.2s;max-width:calc(100% - 32px);z-index:50}
#toast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}