/* Belajar v2: Telegram Mini App, phone only, dark only, Senja palette (plans/done/2026-10-04-v2-app/palette.html).
   Component styles are ported from plans/done/2026-10-04-v2-app/mockup.html. */

/* ── Senja tokens (verbatim from palette.html) ─────────────────────────────────── */
:root{
  --bg:#121318; --surface:#1a1c23; --surface-2:#23262f; --line:#2a2d37;
  --text:#eceef3; --muted:#8d91a0; --faint:#4c505d;

  --senja:#7d74e6;  --senja-btn:#3a357f;  --senja-btn-text:#e9e6ff;  --senja-tonal:#24223b; --senja-tonal-text:#bbb4ff;
  --laut:#45b9a5;   --laut-tonal:#16302c;  --laut-tonal-text:#93e2d2;
  --daun:#58c494;   --daun-btn:#1e3f31;    --daun-btn-text:#bdeed6;
  --bata:#d9767f;   --bata-surface:#24181b; --bata-btn:#4a262c; --bata-btn-text:#ffd3d7;
  --kunyit:#f2a33a; --emas:#e6c35c;

  --noun:#6cb8f0; --verb:#5cc99a; --adj:#efab5f; --other:#b89ef2;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;
}
/* role names used by the mockup's components, mapped onto the Senja tokens */
:root{
  --ok:var(--daun); --over:var(--bata); --flame:var(--kunyit);
  --ink-btn:var(--senja-btn); --ink-btn-text:var(--senja-btn-text); --tonal:var(--senja-tonal); --tonal-text:var(--senja-tonal-text);
  --ok-btn:var(--daun-btn); --ok-btn-text:var(--daun-btn-text); --bad-btn:var(--bata-btn); --bad-btn-text:var(--bata-btn-text);
  --words:var(--senja); --sents:var(--laut); --mine:var(--emas);
  color-scheme:dark;
}

/* ── safe areas (exactly as ka-ching app.css) ──────────────────────────────────── */
:root{
  /* safe areas: the notch / home bar outside Telegram (viewport-fit=cover) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
/* inside Telegram: its safe area (status bar) + content safe area (Close / ⋯ pills in fullscreen).
   Scoped to html.in-tg: in a plain browser telegram-web-app.js may set the tg vars to 0
   and that would override env() on iOS Safari. */
html.in-tg {
  --safe-top: calc(var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px));
  --safe-bottom: calc(var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + var(--tg-content-safe-area-inset-bottom, 0px));
}

/* ── base ──────────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--text);font:15px/1.35 var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
body{min-height:100vh;min-height:100dvh;max-width:480px;margin:0 auto;position:relative;overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
button:disabled{cursor:default}
a{color:inherit;text-decoration:none}
input,textarea{font:inherit;color:inherit}
svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ── layout ────────────────────────────────────────────────────────────────────── */
.screen{min-height:100vh;min-height:100dvh;padding:calc(var(--safe-top) + 8px) 20px calc(96px + var(--safe-bottom));display:flex;flex-direction:column;gap:14px}
.screen.lesson{padding-bottom:calc(16px + var(--safe-bottom))}
.title{font-size:32px;font-weight:700;letter-spacing:-.02em}
.muted{color:var(--muted)} .faint{color:var(--faint)} .small{font-size:13px} .row{display:flex;align-items:center;gap:12px} .grow{flex:1}
.upper{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.center{text-align:center}

/* ── tab bar ───────────────────────────────────────────────────────────────────── */
.tabbar{position:fixed;left:50%;transform:translateX(-50%);width:100%;max-width:480px;bottom:0;display:flex;justify-content:space-around;align-items:center;padding:10px 12px calc(var(--safe-bottom) + 4px);background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);z-index:4}
.tabbar[hidden]{display:none}
.tab{width:52px;height:44px;display:grid;place-items:center;color:var(--faint)} .tab.on{color:var(--text)}
.tab svg{width:26px;height:26px}
.tab-add{width:84px;height:46px;border-radius:16px;background:var(--tonal);color:var(--tonal-text);display:grid;place-items:center}
.tab-add svg{width:24px;height:24px}

/* ── buttons, lists ────────────────────────────────────────────────────────────── */
.cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:54px;border-radius:16px;background:var(--ink-btn);color:var(--ink-btn-text);font-weight:700;font-size:17px;flex:none;text-align:center;transition:opacity .15s}
.cta.ok{background:var(--ok-btn);color:var(--ok-btn-text)} .cta.bad{background:var(--bad-btn);color:var(--bad-btn-text)} .cta.soft{background:var(--surface-2);color:var(--text)}
.cta:disabled{opacity:.4}
.link{display:block;width:100%;text-align:center;color:var(--muted);font-size:15px;font-weight:500;padding:4px}
.group{background:var(--surface);border-radius:16px;overflow:hidden;flex:none}
.item{display:flex;align-items:center;gap:12px;min-height:54px;padding:8px 16px;position:relative;width:100%}
.item+.item::before{content:"";position:absolute;top:0;left:16px;right:0;height:1px;background:var(--line)}
.item .sub{display:block;font-size:13px;color:var(--muted);margin-top:1px}
.bar{height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden} .bar i{display:block;height:100%;border-radius:99px}
.w-noun{color:var(--noun)} .w-verb{color:var(--verb)} .w-adj{color:var(--adj)} .w-other{color:var(--other)}
.star{color:var(--mine)}

/* ── home ──────────────────────────────────────────────────────────────────────── */
.hero{text-align:center;margin-top:6px}
.hero .n{font-size:64px;font-weight:700;line-height:1;letter-spacing:-.03em;display:flex;align-items:center;justify-content:center;gap:6px}
.hero .goal{display:inline-flex;gap:6px;margin-top:10px;padding:6px 12px;border-radius:99px;background:var(--surface);font-size:14px}
.hero .goal.met b{color:var(--ok)}
.trk{background:var(--surface);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:10px;flex:none}
.trk .h{display:flex;align-items:baseline;gap:8px} .trk .name{font-size:19px;font-weight:700} .trk .cnt{color:var(--muted);font-size:14px}
.go{height:40px;padding:0 18px;border-radius:12px;background:var(--tonal);color:var(--tonal-text);font-weight:700;display:grid;place-items:center;font-size:15px;flex:none}
.go.sents{background:var(--laut-tonal);color:var(--laut-tonal-text)}

/* ── lesson ────────────────────────────────────────────────────────────────────── */
.lbar{height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin-top:2px;flex:none} .lbar i{display:block;height:100%;background:var(--ok);border-radius:99px;transition:width .35s ease}
.lbar.sents i{background:var(--sents)}
.meta{text-align:center;color:var(--muted);font-size:13px}
.meta.mine{color:var(--mine)}
.emo{text-align:center;line-height:1} .fi{display:inline-block;vertical-align:middle;object-fit:contain;flex:none} .emo .fi{filter:drop-shadow(0 8px 18px #0006)}
.fi.miss{visibility:hidden} .emo .fi.miss,.hide-miss .fi.miss{display:none}
.fi-gap{display:inline-block;flex:none}
.word{font-size:46px;font-weight:700;text-align:center;letter-spacing:-.02em;line-height:1.05}
.mean{text-align:center;color:var(--muted);font-size:18px}
.legend{display:flex;justify-content:center;margin-top:8px}
.legend span{font-size:12px;font-weight:600;padding:3px 9px;border-radius:99px;background:var(--surface)}
.sent{background:var(--surface);border-radius:16px;padding:14px 16px;font-size:18px;display:flex;gap:12px;align-items:center;flex:none}
.sent .t{flex:1} .sent .en{color:var(--muted);font-size:14px;margin-top:3px}
.sent u{text-decoration-thickness:2px;text-underline-offset:4px}
.play{width:44px;height:44px;border-radius:50%;background:var(--tonal);color:var(--tonal-text);display:grid;place-items:center;flex:none} .play svg{width:20px;height:20px}
.play.sm{width:38px;height:38px} .play.sm svg{width:17px;height:17px}
.play.xl{width:84px;height:84px} .play.xl svg{width:34px;height:34px}
.play.on{background:var(--ink-btn);color:var(--ink-btn-text)}
.slow{height:44px;padding:0 12px;border-radius:99px;background:var(--surface-2);display:grid;place-items:center;font-weight:700;font-size:13px;color:var(--muted);flex:none}
.slow.sm{height:38px}
.slow.on{color:var(--tonal-text)}
.q{font-size:22px;font-weight:700;letter-spacing:-.01em}
.prompt{text-align:center;margin-top:24px}
.prompt .p{font-size:28px;font-weight:700;margin-top:6px;letter-spacing:-.01em}
.prompt.wd .p{font-size:40px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:none}
.opts.one{grid-template-columns:1fr}
.opt{background:var(--surface);border:2px solid transparent;border-radius:14px;padding:15px 14px;font-size:17px;font-weight:600;text-align:left;transition:border-color .12s,background .12s}
.opt.sel{border-color:var(--tonal-text);background:var(--tonal)} .opt.wrong{border-color:var(--over)} .opt.good{border-color:var(--ok)}
.slots{min-height:100px;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;padding-bottom:12px;flex:none}
.tile{background:var(--surface);border-radius:12px;padding:9px 13px;font-size:17px;font-weight:600;border-bottom:3px solid var(--surface-2)}
.tile.noun{border-bottom-color:var(--noun)} .tile.verb{border-bottom-color:var(--verb)} .tile.adj{border-bottom-color:var(--adj)} .tile.other{border-bottom-color:var(--other)}
.tile.ghost{color:transparent;background:var(--surface-2);border-bottom-color:transparent;pointer-events:none}
.bank{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;flex:none}
.blank{display:inline-block;min-width:64px;border-bottom:2px solid var(--text);margin:0 2px;text-align:center}
.blank b{font-weight:700}
.typed{width:100%;background:var(--surface);border:2px solid var(--surface-2);border-radius:14px;padding:14px 16px;font-size:20px;font-weight:600;outline:none;resize:none;flex:none}
.typed:focus{border-color:var(--tonal-text)}
.typed.wrong{border-color:var(--over)} .typed.good{border-color:var(--ok)}
.sheet{position:fixed;left:50%;transform:translateX(-50%);width:100%;max-width:480px;bottom:0;padding:18px 20px calc(var(--safe-bottom) + 12px);border-radius:22px 22px 0 0;z-index:3;animation:sheetup .22s cubic-bezier(.2,.9,.3,1)}
@keyframes sheetup{from{transform:translate(-50%,40%);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.sheet.bad{background:var(--bata-surface);border-top:1px solid #3a2328} .sheet.good{background:#15211b;border-top:1px solid #213a2d}
.sheet .h{font-size:20px;font-weight:700}
.sheet.bad .h{color:var(--over)} .sheet.good .h{color:var(--ok)}
.sheet .ans{font-size:18px}
.sheet .ans .en{color:var(--muted);font-size:14px;margin-top:2px}
.dim{opacity:.35}
.sline{position:relative;text-align:center;font-size:32px;font-weight:700;letter-spacing:-.02em;margin-top:42px;line-height:1.25}
.sline .wd{cursor:pointer}
.sline .wd.on{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.pop{position:absolute;background:var(--surface-2);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:13px;font-weight:600;white-space:nowrap;letter-spacing:0;line-height:1.3;z-index:2;pointer-events:none}
.pop::after{content:"";position:absolute;left:var(--arrow,20px);bottom:-6px;width:10px;height:10px;background:var(--surface-2);border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}

/* ── summary ───────────────────────────────────────────────────────────────────── */
.big{font-size:56px;font-weight:700;line-height:1;letter-spacing:-.03em}
.bump{animation:bump .7s cubic-bezier(.2,.9,.3,1.4) .25s both}
@keyframes bump{0%{transform:scale(.6);opacity:.2}60%{transform:scale(1.12);opacity:1}100%{transform:none}}
.stat .num{font-size:24px;font-weight:700}

/* ── path, level, mastery, settings ────────────────────────────────────────────── */
.lvl{display:flex;align-items:center;gap:14px;min-height:62px;padding:8px 16px;position:relative;width:100%}
.lvl+.lvl::before{content:"";position:absolute;top:0;left:66px;right:0;height:1px;background:var(--line)}
.node{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:15px;flex:none;background:var(--surface-2);color:var(--muted)}
.node.done{background:var(--ok-btn);color:var(--ok-btn-text)} .node.cur{background:var(--ink-btn);color:var(--ink-btn-text)}
.node svg{width:18px;height:18px}
.chk{width:24px;height:24px;border-radius:7px;border:2px solid var(--faint);flex:none;display:grid;place-items:center;color:transparent}
.chk.on{background:var(--ok-btn);border-color:var(--ok);color:var(--ok-btn-text)} .chk svg{width:15px;height:15px;stroke-width:3}
.state{font-size:12px;font-weight:600;color:var(--muted);flex:none}
.seg{display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);border-radius:12px;padding:3px;flex:none}
.seg a{text-align:center;padding:7px 0;border-radius:9px;font-size:13px;font-weight:600;color:var(--muted)} .seg a.on{background:var(--surface-2);color:var(--text)}
.dots{display:flex;gap:3px;flex:none} .dots i{width:5px;height:14px;border-radius:3px;background:var(--surface-2)} .dots i.on{background:var(--ok)} .dots.weak i.on{background:var(--flame)}
.undo{font-size:14px;font-weight:700;color:var(--tonal-text);padding:8px 0 8px 8px;flex:none}
.search{width:100%;background:var(--surface);border:0;border-radius:12px;padding:10px 14px;font-size:15px;outline:none;flex:none}
.search::placeholder{color:var(--faint)}
.toggle{width:50px;height:30px;border-radius:99px;background:var(--surface-2);position:relative;flex:none;transition:background .15s}
.toggle::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:var(--faint);transition:left .15s,background .15s}
.toggle.on{background:var(--ok-btn)} .toggle.on::after{left:23px;background:var(--ok-btn-text)}
.stepper{display:flex;background:var(--surface-2);border-radius:10px;padding:2px;flex:none} .stepper button{padding:5px 12px;border-radius:8px;font-weight:600;color:var(--muted)} .stepper button.on{background:var(--bg);color:var(--text)}
.timewrap{position:relative;color:var(--muted);font-variant-numeric:tabular-nums;padding:6px 2px}
.timewrap.off{opacity:.45}
.timein{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;color-scheme:dark}
.empty{text-align:center;color:var(--muted);padding:28px 16px}

/* ── loaders ───────────────────────────────────────────────────────────────────── */
.splash{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;z-index:10;background:var(--bg);transition:opacity .25s}
.splash.out{opacity:0;pointer-events:none}
.drops{display:flex;gap:10px;height:54px;align-items:flex-end}
.drops .tile{font-size:24px;padding:10px 15px;opacity:0;animation:drop 3.2s cubic-bezier(.2,.9,.3,1.4) infinite}
.drops .tile:nth-child(2){animation-delay:.22s} .drops .tile:nth-child(3){animation-delay:.44s}
@keyframes drop{0%{opacity:0;transform:translateY(-36px) scale(.85)}12%{opacity:1;transform:none}80%{opacity:1;transform:none}93%,100%{opacity:0;transform:translateY(8px)}}
.ld{width:120px;height:4px;border-radius:99px;background:var(--surface-2);overflow:hidden} .ld i{display:block;height:100%;width:40%;border-radius:99px;background:var(--words);animation:slide 1.2s ease-in-out infinite}
@keyframes slide{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}
.tips{height:20px;overflow:hidden;color:var(--muted);font-size:14px;text-align:center} .tips div{animation:tips 6s steps(1) infinite} .tips span{display:block;height:20px}
@keyframes tips{0%{transform:none}33%{transform:translateY(-20px)}66%{transform:translateY(-40px)}}
.sk{background:linear-gradient(90deg,var(--surface) 0%,var(--surface-2) 45%,var(--surface) 90%);background-size:300% 100%;animation:shimmer 1.4s linear infinite;border-radius:18px;flex:none}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* ── toast, gate ───────────────────────────────────────────────────────────────── */
.toast{position:fixed;left:50%;transform:translate(-50%,-8px);top:calc(12px + var(--safe-top));width:max-content;max-width:calc(100% - 32px);background:var(--surface-2);color:var(--text);border:1px solid var(--line);padding:10px 16px;border-radius:14px;font-size:14px;font-weight:500;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;z-index:20;display:flex;align-items:center;gap:14px}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.show.act{pointer-events:auto}
.toast button{font-weight:700;color:var(--tonal-text)}
.gate{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:calc(40px + var(--safe-top)) 28px calc(40px + var(--safe-bottom))}
.gate h1{font-size:26px;letter-spacing:-.02em}
.gate p{color:var(--muted);font-size:16px;line-height:1.4;margin-bottom:18px;max-width:320px}
.gate .cta{max-width:320px}

/* ── capture sheet (the + ) and the long-press menu ────────────────────────────── */
.cap{position:fixed;inset:0;z-index:8}
.cap-back{position:absolute;inset:0;background:#000a;animation:fadein .2s ease}
.csheet{position:absolute;left:50%;transform:translateX(-50%);width:100%;max-width:480px;bottom:0;max-height:calc(100dvh - var(--safe-top) - 24px);overflow-y:auto;overscroll-behavior:contain;background:var(--surface);border-top:1px solid var(--line);border-radius:22px 22px 0 0;padding:8px 20px calc(var(--safe-bottom) + 16px);animation:sheetup .24s cubic-bezier(.2,.9,.3,1);transition:transform .15s}
.cap.out .cap-back{opacity:0;transition:opacity .2s} .cap.out .csheet{transform:translate(-50%,100%);transition:transform .2s ease-in}
@keyframes fadein{from{opacity:0}}
.grab{width:40px;height:5px;border-radius:99px;background:var(--faint);margin:2px auto 12px;touch-action:none;cursor:grab;position:relative}
.grab::after{content:"";position:absolute;inset:-12px -30px}
.cbody{display:flex;flex-direction:column;gap:14px}
.ctitle{font-size:22px;font-weight:700;letter-spacing:-.01em}
.cin{font-size:17px;font-weight:500;background:var(--bg)}
.cin::placeholder{color:var(--faint);font-weight:400}
.cmeta{text-align:center;color:var(--mine);font-size:13px;font-weight:600}
.csent{text-align:center;font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.csheet .mean{margin-top:-8px}
.csheet .group{background:var(--bg)}
.csheet .opt{background:var(--bg)}
.cbox{background:var(--bg);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:6px}
.cinfo{background:var(--senja-tonal);color:var(--senja-tonal-text);border-radius:12px;padding:10px 12px;font-size:14px}
.cwarn{background:#2a2215;color:var(--kunyit);border-radius:12px;padding:10px 12px;font-size:14px}
.csheet .row .cta{flex:1;width:auto}
.cmenu .item{font-size:17px;font-weight:600;justify-content:center}
.cmenu .item.danger{color:var(--bata)}