:root{
  --navy:#081826; --navy2:#0e2438; --card:#122c44; --card2:#16334e;
  --steel:#3b82c4; --steel-dim:#274b6b;
  --gold:#f0b429; --gold-soft:#caa14a;
  --green:#3ecf6e; --red:#ef5350; --amber:#ff9f43;
  --text:#f2f6fa; --muted:#8fa6bd; --line:rgba(255,255,255,.08);
  --r:16px;
  --sh-sm:0 2px 10px rgba(0,0,0,.28);
  --sh-md:0 8px 24px rgba(0,0,0,.34);
  --sh-gold:0 6px 18px rgba(240,180,41,.30);
  --sh-steel:0 4px 14px rgba(59,130,196,.32);
  color-scheme:dark;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;}
html,body{margin:0;padding:0;}
body{
  background:var(--navy); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  min-height:100dvh; display:flex; justify-content:center;
}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:8px;}
#app{width:100%; max-width:480px; min-height:100dvh; position:relative; background:radial-gradient(120% 40% at 50% -10%, #12324e 0%, var(--navy) 60%);}
.view{display:none; padding:0 18px 112px;}
.view.active{display:block; animation:fade .25s ease;}
@keyframes fade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
#view-onboarding{padding-bottom:0;}
#view-summary{padding-bottom:56px;}
h1,h2,h3{text-wrap:balance;}

/* header */
.topbar{display:flex; align-items:center; gap:10px; padding:calc(12px + env(safe-area-inset-top)) 18px 10px; position:sticky; top:0; z-index:20; background:linear-gradient(var(--navy) 80%, transparent); border-bottom:1px solid rgba(255,255,255,.05);}
.topbar img.logo{width:38px; height:38px; border-radius:10px;}
.topbar svg.mascot{width:38px; height:38px; border-radius:10px; flex:none; box-shadow:var(--sh-sm);}
.topbar .brand{font-weight:800; letter-spacing:.4px; font-size:17px; line-height:1.2;}
.topbar .brand small{display:block; font-weight:700; color:var(--gold); font-size:9.5px; letter-spacing:2.2px; margin-top:1px;}
.topbar .spacer{flex:1;}
.pill{display:flex; align-items:center; gap:5px; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:6px 12px; min-height:34px; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; box-shadow:var(--sh-sm); white-space:nowrap;}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--gold); flex:none;}
.streak-fire{font-size:14px; line-height:1;}

/* cards */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:16px; margin:12px 0; box-shadow:var(--sh-sm);}
.card h3{margin:0 0 4px; font-size:15px;}
.card p{margin:6px 0; color:var(--muted); font-size:13.5px; line-height:1.55;}
.row{display:flex; align-items:center; gap:14px;}
.grow{flex:1; min-width:0;}

/* rings */
.ring{position:relative; width:64px; height:64px; flex:none;}
.ring svg{transform:rotate(-90deg); display:block;}
.ring .pct{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; font-variant-numeric:tabular-nums;}
.ring.lg{width:92px;height:92px;} .ring.lg .pct{font-size:20px;}

/* buttons */
.btn{display:block; width:100%; border:none; border-radius:14px; padding:15px; font-size:16px; font-weight:800; cursor:pointer; margin:8px 0; letter-spacing:.2px; transition:transform .12s ease, filter .15s ease, box-shadow .15s ease;}
.btn:active{transform:scale(.97); filter:brightness(1.07);}
.btn-gold{background:linear-gradient(180deg,#ffc93c,#e9a90c); color:#231600; box-shadow:var(--sh-gold);}
.btn-ghost{background:var(--card2); color:var(--text); border:1px solid var(--line); box-shadow:var(--sh-sm);}
.btn-steel{background:linear-gradient(180deg,#4a94d8,#3573ad); color:#fff; box-shadow:var(--sh-steel);}
.btn-row{display:flex; gap:10px;} .btn-row .btn{margin:10px 0; min-height:56px; display:flex; align-items:center; justify-content:center; font-size:15px;}
.opt{display:block; width:100%; text-align:left; background:var(--card2); color:var(--text); border:2px solid var(--line); border-radius:14px; padding:14px 15px; min-height:58px; font-size:15.5px; line-height:1.45; margin:9px 0; cursor:pointer; box-shadow:var(--sh-sm); transition:border-color .18s ease, background-color .18s ease, transform .1s ease;}
.opt:active:not(:disabled){transform:scale(.985);}
.opt .letter{display:inline-flex; width:26px; height:26px; border-radius:8px; background:var(--steel-dim); color:#cfe3f7; font-weight:800; font-size:13px; align-items:center; justify-content:center; margin-right:10px; vertical-align:middle; flex:none; transition:background-color .18s ease;}
.opt.correct{border-color:var(--green); background:rgba(62,207,110,.12);}
.opt.correct .letter{background:var(--green); color:#062b14;}
.opt.wrong{border-color:var(--red); background:rgba(239,83,80,.12);}
.opt.wrong .letter{background:var(--red); color:#3d0a0a;}
.opt.dim{opacity:.5;}
.opt:disabled{cursor:default;}

/* onboarding */
.onb{min-height:100dvh; display:flex; flex-direction:column; justify-content:center; padding:24px 24px 48px;}
.onb .logo-big{width:110px; height:110px; border-radius:26px; margin:0 auto 18px; box-shadow:0 12px 40px rgba(240,180,41,.25);}
.onb svg.mascot-big{width:104px; height:104px; margin:0 auto 16px; display:block; background:transparent;}
.onb .credit{text-align:center; color:var(--muted); font-size:12px; letter-spacing:1.5px; text-transform:uppercase; margin:10px 0 2px;}
.onb h1{text-align:center; font-size:30px; margin:6px 0 4px; letter-spacing:.3px;}
.onb .tag{text-align:center; color:var(--gold); font-size:11.5px; letter-spacing:3px; font-weight:700; margin-bottom:10px;}
.onb .sub{text-align:center; color:var(--muted); font-size:14.5px; line-height:1.6; margin:0 6px 20px; text-wrap:pretty;}
.onb label{display:block; font-size:12px; font-weight:700; color:var(--muted); margin:18px 0 8px; letter-spacing:1px; text-transform:uppercase;}
.date-wrap{position:relative; width:100%; min-height:56px; display:flex; align-items:center; justify-content:center; background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh-sm); overflow:hidden;}
#exam-date-label{font-size:17px; color:var(--text); pointer-events:none; font-variant-numeric:tabular-nums;}
#exam-date-label.empty{color:var(--muted);}
.date-wrap input[type=date]{position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; border:0; padding:0; font-size:17px; color-scheme:dark; cursor:pointer;}
.date-wrap:focus-within{border-color:var(--gold);}
.goal-pick{display:flex; gap:10px;}
.goal-card{flex:1; background:var(--card); border:2px solid var(--line); border-radius:14px; padding:16px 8px; min-height:82px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; text-align:center; cursor:pointer; box-shadow:var(--sh-sm); transition:border-color .18s ease, background-color .18s ease, transform .1s ease, box-shadow .18s ease;}
.goal-card:active{transform:scale(.96);}
.goal-card b{display:block; font-size:22px; color:var(--gold); font-variant-numeric:tabular-nums;}
.goal-card span{font-size:11.5px; color:var(--muted);}
.goal-card.sel{border-color:var(--gold); background:rgba(240,180,41,.09); box-shadow:0 0 0 1px var(--gold), 0 4px 14px rgba(240,180,41,.16);}
.plan-line{text-align:center; color:var(--muted); font-size:14px; margin:18px 0 6px; line-height:1.7;}
.plan-line b{color:var(--text); font-variant-numeric:tabular-nums;}

/* plan-building interstitial */
#onb-building{text-align:center;}
.build-bolt{animation:buildpulse 1.1s ease-in-out infinite;}
.build-bolt .halo{animation:halopulse 1.1s ease-in-out infinite;}
@keyframes buildpulse{0%,100%{transform:scale(1);}50%{transform:scale(1.07);}}
@keyframes halopulse{0%,100%{opacity:.45;}50%{opacity:1;}}
.build-bar{height:10px; background:var(--card2); border-radius:99px; overflow:hidden; margin:20px 10px 4px; box-shadow:inset 0 1px 3px rgba(0,0,0,.35);}
.build-bar i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold),#ffd76a); border-radius:99px; transition:width .5s ease;}
.build-list{list-style:none; margin:16px auto 0; padding:0; text-align:left; max-width:300px;}
.build-list li{opacity:.35; padding:9px 4px; font-size:14.5px; color:var(--muted); transition:opacity .3s ease, color .3s ease;}
.build-list li::before{content:"○"; margin-right:10px; font-size:13px;}
.build-list li.done{opacity:1; color:var(--text);}
.build-list li.done::before{content:"✓"; color:var(--gold); font-weight:800;}

/* skill path */
.sec-head{display:flex; align-items:center; gap:10px; margin:20px 2px 10px; scroll-margin-top:76px;}
.sec-head .badge{background:var(--steel-dim); color:#cfe3f7; font-weight:800; font-size:12px; border-radius:8px; padding:5px 10px; flex:none;}
.sec-head h2{margin:0; font-size:16px; flex:1; min-width:0;}
.sec-head .w{font-size:11.5px; color:var(--gold); font-weight:700; white-space:nowrap;}
.node{display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; min-height:72px; margin:8px 0; cursor:pointer; width:100%; color:var(--text); text-align:left; font-size:14.5px; box-shadow:var(--sh-sm); transition:transform .1s ease, border-color .15s ease;}
.node:active{transform:scale(.985); border-color:rgba(240,180,41,.4);}
.node .meta{flex:1; min-width:0;}
.node .meta b{display:block; font-size:14.5px; line-height:1.35;}
.node .meta span{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums;}
.node .chev{color:var(--muted); font-size:18px; opacity:.7; flex:none;}
.ring.sm{width:46px;height:46px;} .ring.sm .pct{font-size:11px;}

/* drill */
.drill-top{display:flex; align-items:center; gap:8px; padding:14px 0 4px; padding:calc(14px + env(safe-area-inset-top, 0px)) 0 4px;}
.drill-top .x{background:none; border:none; color:var(--muted); font-size:20px; cursor:pointer; width:44px; height:44px; margin-left:-12px; display:flex; align-items:center; justify-content:center; border-radius:12px; flex:none; transition:background-color .15s ease, color .15s ease;}
.drill-top .x:active{background:rgba(255,255,255,.08); color:var(--text);}
.pbar{flex:1; height:10px; background:var(--card2); border-radius:99px; overflow:hidden; box-shadow:inset 0 1px 3px rgba(0,0,0,.35);}
.pbar i{display:block; height:100%; background:linear-gradient(90deg,var(--gold),#ffd76a); border-radius:99px; transition:width .3s ease;}
.timer{font-variant-numeric:tabular-nums; font-weight:800; font-size:14px; color:var(--muted); min-width:52px; text-align:right;}
.timer.over{color:var(--amber);}
.qcount{font-size:12px; color:var(--muted); font-weight:700; margin:10px 2px 0; letter-spacing:1px;}
.stem{font-size:18px; line-height:1.55; margin:10px 2px 14px; font-weight:600; text-wrap:pretty;}
.feedback{border-radius:var(--r); padding:15px 16px; margin:12px 0; border:1px solid var(--line); box-shadow:var(--sh-sm); animation:rise .22s ease;}
@keyframes rise{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
.feedback.ok{background:rgba(62,207,110,.1); border-color:rgba(62,207,110,.45);}
.feedback.no{background:rgba(239,83,80,.1); border-color:rgba(239,83,80,.45);}
.feedback .verdict{font-weight:800; font-size:15px; margin-bottom:6px;}
.feedback.ok .verdict{color:var(--green);} .feedback.no .verdict{color:var(--red);}
.feedback p{margin:6px 0; font-size:14px; line-height:1.6; color:var(--text);}
.lookup{display:inline-block; margin-top:10px; background:rgba(240,180,41,.14); border:1px solid rgba(240,180,41,.45); color:var(--gold); font-size:12.5px; font-weight:700; border-radius:999px; padding:7px 13px;}
.lookup svg{vertical-align:-2px; margin-right:3px;}

/* summary */
.sum-hero{text-align:center; padding:24px 0 6px;}
.sum-hero h2{margin:10px 0 2px; font-size:22px;}
.sum-hero p{color:var(--muted); margin:4px 0 0; font-size:14px;}
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0 6px;}
.stat{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:15px 12px; text-align:center; box-shadow:var(--sh-sm);}
.stat b{display:block; font-size:21px; color:var(--gold); font-variant-numeric:tabular-nums;}
.stat span{font-size:11px; color:var(--muted); letter-spacing:.8px;}

/* readiness bars */
.rsec{margin:14px 0;}
.rsec .lab{display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:13.5px; margin-bottom:7px;}
.rsec .lab b{font-weight:700;} .rsec .lab span{color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap;}
.rbar{height:12px; background:var(--card2); border-radius:99px; overflow:hidden; box-shadow:inset 0 1px 3px rgba(0,0,0,.35);}
.rbar i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--steel),#6aa9e8); transition:width .5s ease;}
.rbar i.hot{background:linear-gradient(90deg,#e9a90c,var(--gold));}

/* bottom nav */
.tabbar{position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:480px; display:flex; background:rgba(8,24,38,.94); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-top:1px solid var(--line); padding:8px 18px calc(10px + env(safe-area-inset-bottom)); z-index:30;}.tab{flex:1; background:none; border:none; color:var(--muted); font-size:11px; font-weight:700; padding:8px; min-height:54px; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border-radius:12px; transition:transform .1s ease, color .15s ease;}
.tab:active{transform:scale(.93);}
.tab .ic{font-size:20px; line-height:1;}
.tab.on{color:var(--gold);}
.tabpane{display:none;}
.tabpane.active{display:block; animation:fade .25s ease;}

/* sheet */
.sheet{position:fixed; inset:0; z-index:50; display:none; align-items:flex-end; justify-content:center;}
.sheet.open{display:flex;}
.sheet .scrim{position:absolute; inset:0; background:rgba(0,0,0,.6); animation:fade .2s ease;}
.sheet .body{position:relative; width:100%; max-width:480px; background:var(--navy2); border-radius:22px 22px 0 0; padding:10px 20px calc(24px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); box-shadow:var(--sh-md); animation:up .25s ease;}
.sheet .body::before{content:""; display:block; width:42px; height:4px; border-radius:99px; background:rgba(255,255,255,.18); margin:2px auto 14px;}
@keyframes up{from{transform:translateY(40px); opacity:0;} to{transform:none; opacity:1;}}
.sheet h3{margin:0 0 4px; font-size:19px;}
.sheet p{color:var(--muted); font-size:13.5px; margin:6px 0 12px; line-height:1.55;}
.mode-pick{display:flex; gap:10px; margin:12px 0;}
.mode-card{flex:1; border:2px solid var(--line); background:var(--card); border-radius:14px; padding:14px 10px; min-height:78px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; text-align:center; cursor:pointer; transition:border-color .18s ease, transform .1s ease, box-shadow .18s ease;}
.mode-card:active{transform:scale(.96);}
.mode-card b{display:block; font-size:14.5px;} .mode-card b svg{vertical-align:-2px; margin-right:2px;} .mode-card span{font-size:11.5px; color:var(--muted);}
.mode-card.sel{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold);}
.hidden{display:none !important;}
.kv{display:flex; justify-content:space-between; font-size:13.5px; color:var(--muted); padding:6px 0;}
.kv b{color:var(--text); font-variant-numeric:tabular-nums;}

/* ---------- Duolingo polish: v2 ---------- */

/* icon button (topbar) */
.icon-x{background:none; border:none; color:var(--muted); font-size:16px; width:44px; height:44px; cursor:pointer; flex:none; display:flex; align-items:center; justify-content:center; border-radius:12px;}
.icon-x:active{background:rgba(255,255,255,.08);}

/* countdown */
.countdown{text-align:center; font-size:13.5px; color:var(--muted); margin:12px 0 2px;}
.countdown b{color:var(--gold); font-variant-numeric:tabular-nums;}

/* trend */
.trend-pct{font-size:30px; font-weight:800; color:var(--gold); font-variant-numeric:tabular-nums; flex:none;}
#trend-spark{margin-top:10px;}

/* quests */
.quest{margin:12px 0 4px;}
.quest .qinfo{display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:13.5px; margin-bottom:6px;}
.quest .qinfo b{font-weight:700;}
.quest .qinfo span{color:var(--muted); font-variant-numeric:tabular-nums; font-size:12.5px; white-space:nowrap;}
.quest.done .qinfo b{color:var(--green);}
.quest.done .qinfo span{color:var(--green); font-weight:700;}
.qbar{height:8px; background:var(--card2); border-radius:99px; overflow:hidden; box-shadow:inset 0 1px 3px rgba(0,0,0,.35);}
.qbar i{display:block; height:100%; background:linear-gradient(90deg,var(--gold),#ffd76a); border-radius:99px; transition:width .4s ease;}
.quest.done .qbar i{background:var(--green);}

/* guided path */
.path{position:relative; padding:4px 0 8px;}
.path::before{content:""; position:absolute; top:0; bottom:0; left:50%; width:4px; transform:translateX(-50%); border-radius:99px; background-image:linear-gradient(rgba(255,255,255,.13) 55%, transparent 45%); background-size:4px 16px; opacity:.8;}
.pstep{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; margin:16px 0; transform:translateX(var(--off,0px));}
.pnode{width:76px; height:76px; min-height:76px; border-radius:50%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-md); transition:transform .12s ease; background:linear-gradient(180deg,#ffc93c,#e9a90c); padding:0;}
.pnode:active{transform:scale(.93);}
.pring{width:60px; height:60px; border-radius:50%; background:#081826; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:800; color:var(--gold);}
.pnode.locked{background:#22374c;}
.pnode.locked .pring{background:#16283a; filter:grayscale(.5); opacity:.7;}
.pnode.next{animation:pulse 1.8s ease-in-out infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(240,180,41,.55);}50%{box-shadow:0 0 0 14px rgba(240,180,41,0);}}
.pnode.boss{width:90px; height:90px; min-height:90px;}
.pnode.boss .pring{width:72px; height:72px; font-size:32px;}
.pnode.boss.avail{animation:chestglow 2.4s ease-in-out infinite;}
@keyframes chestglow{0%,100%{box-shadow:0 0 0 0 rgba(240,180,41,.4);}50%{box-shadow:0 0 22px 4px rgba(240,180,41,.45);}}
.pname{margin-top:8px; font-size:12px; color:var(--muted); text-align:center; max-width:140px; line-height:1.35;}
.pnode.next + .pname{color:var(--text); font-weight:700;}
.shake{animation:shake .4s ease;}
@keyframes shake{0%,100%{transform:none;}25%{transform:translateX(-9px);}50%{transform:translateX(7px);}75%{transform:translateX(-4px);}}

/* drill: mascot moods, hearts, flag */
#drill-mascot{width:34px; height:34px; flex:none;}
#drill-mascot svg{width:100%; height:100%; display:block;}
.mascot-svg.mood-happy{animation:bounce .5s ease;}
@keyframes bounce{0%{transform:scale(1);}40%{transform:scale(1.18) rotate(-5deg);}70%{transform:scale(.96);}100%{transform:scale(1);}}
.mascot-svg.mood-sad{transform:rotate(-10deg); filter:saturate(.35) brightness(.8);}
.mascot-svg.mood-sad .halo{display:none;}
.mascot-svg.mood-sleeping{filter:saturate(.7) brightness(.85);}
.hearts{display:flex; gap:3px; font-size:16px; flex:none; line-height:1; align-items:center;}
.hearts .lost{filter:grayscale(1); opacity:.3;}
.qcount-row{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px;}
.qcount-row .qcount{margin:0;}
.flag-btn{background:var(--card); border:1px solid var(--line); border-radius:10px; width:44px; height:44px; font-size:17px; cursor:pointer; flex:none; box-shadow:var(--sh-sm);}
.flag-btn:active{transform:scale(.93);}
.flag-btn.flagged{border-color:var(--gold); background:rgba(240,180,41,.16);}

/* toast */
.toast{position:fixed; left:50%; bottom:calc(96px + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(16px); max-width:min(440px,92vw); background:#0e2438; border:1px solid rgba(240,180,41,.5); color:var(--text); padding:12px 18px; border-radius:999px; font-size:14px; font-weight:700; box-shadow:var(--sh-md); opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; z-index:100; text-align:center;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* settings */
.set-row{display:flex; align-items:center; gap:12px; padding:10px 0;}
.set-row .grow b{display:block; font-size:14.5px;}
.set-row .grow span{font-size:12.5px; color:var(--muted); line-height:1.4; display:block; margin-top:2px;}
.toggle{width:58px; height:36px; min-height:36px; border-radius:99px; background:var(--card2); border:1px solid var(--line); cursor:pointer; position:relative; flex:none; transition:background-color .2s ease; padding:0;}
.toggle i{position:absolute; top:4px; left:5px; width:26px; height:26px; border-radius:50%; background:#8fa6bd; transition:left .2s ease, background-color .2s ease;}
.toggle.on{background:rgba(62,207,110,.25); border-color:var(--green);}
.toggle.on i{left:25px; background:var(--green);}
.set-date{position:relative; width:152px; flex:none; min-height:44px; display:flex; align-items:center; justify-content:center; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden;}
.set-date span{font-size:14px; color:var(--text); pointer-events:none; font-variant-numeric:tabular-nums;}
.set-date input[type=date]{position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; border:0; padding:0; font-size:17px; color-scheme:dark; cursor:pointer;}
.set-date:focus-within{border-color:var(--gold);}
.goal-num{width:76px; flex:none; background:var(--card); border:1px solid var(--line); border-radius:12px; color:var(--text); font-size:16px; font-weight:700; text-align:center; padding:8px 4px; font-variant-numeric:tabular-nums;}
.goal-num:focus{border-color:var(--gold); outline:none;}
.btn-sm{width:auto; padding:10px 18px; min-height:48px; font-size:14px; margin:0; flex:none;}
.fine{font-size:12px; color:var(--muted); line-height:1.55; margin:10px 0 0;}
#install-mascot{width:52px; height:52px; flex:none;}
#install-mascot svg{width:100%; height:100%; display:block;}
#sum-mascot{width:86px; height:86px; margin:0 auto 2px;}
#sum-mascot svg{width:100%; height:100%; display:block;}

/* first-run path tour */
#tour-ov{position:fixed; inset:0; z-index:90;}
#tour-ov.bye{opacity:0; transition:opacity .4s ease;}
.tour-cap{position:fixed; top:calc(14px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); width:min(440px, calc(100vw - 32px)); background:#0e2438; border:1px solid rgba(240,180,41,.55); border-radius:16px; padding:12px 14px; display:flex; align-items:center; gap:12px; box-shadow:var(--sh-md); animation:rise .3s ease; z-index:91;}
.tour-cap-text{flex:1; min-width:0;}
.tour-cap-text b{display:block; font-size:15px;}
.tour-cap-text span{display:block; font-size:12.5px; color:var(--muted); margin-top:2px;}
.tour-skip{flex:none; min-width:64px; min-height:44px; border-radius:12px; border:1px solid var(--line); background:var(--card2); color:var(--text); font-weight:800; font-size:14px; cursor:pointer; padding:0 14px;}
.tour-skip:active{transform:scale(.95);}
.pnode.tour-pop{animation:tourpop .55s cubic-bezier(.2,1.5,.4,1);}
@keyframes tourpop{0%{transform:scale(.55);}100%{transform:scale(1);}}

/* how-it-works onboarding card */
#onb-how{padding-top:calc(12px + env(safe-area-inset-top)); padding-bottom:calc(64px + env(safe-area-inset-bottom));}
.how-slide{display:flex; flex-direction:column; align-items:center; text-align:center; animation:fade .25s ease;}
.how-mascot{width:60px; height:60px; margin:0 auto 8px;}
.how-mascot svg{width:100%; height:100%; display:block;}
.how-slide h2{font-size:27px; line-height:1.3; font-weight:800; margin:0 8px 4px; text-wrap:balance;}
#onb-how .btn{max-width:340px; margin-left:auto; margin-right:auto;}

/* animated mini chain visual — pure CSS, no image assets */
.how-chain{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:space-between; height:238px; margin:18px 0 24px;}
.how-chain::before{content:""; position:absolute; top:12px; bottom:12px; left:50%; border-left:2px dashed rgba(240,180,41,.35); transform:translateX(-50%);}
.how-node{position:relative; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:19px; background:#0e2438; border:2px solid #274b6b; color:#5b7186; opacity:.55; animation:howflash 2.5s ease-in-out infinite; animation-delay:var(--d,0s);}
.how-node:nth-child(odd){margin-right:72px;}
.how-node:nth-child(even){margin-left:72px;}
.how-node.is-done{border-color:var(--gold); color:var(--gold);}
.how-node.is-next{border-color:var(--gold); color:#0e2438; background:linear-gradient(180deg,#ffc93c,#e9a90c);}
@keyframes howflash{
  0%,100%{opacity:.55; transform:scale(.94); box-shadow:0 0 0 rgba(240,180,41,0);}
  12%{opacity:1; transform:scale(1.12); box-shadow:0 0 24px rgba(240,180,41,.7);}
  26%{opacity:.55; transform:scale(.94); box-shadow:0 0 0 rgba(240,180,41,0);}
}

/* centered modal (quit-drill confirm, chain-complete) */
.modal{position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center; padding:24px;}
.modal.open{display:flex;}
.modal .scrim{position:absolute; inset:0; background:rgba(0,0,0,.62); animation:fade .2s ease;}
.modal .mbox{position:relative; width:100%; max-width:340px; background:var(--navy2); border:1px solid var(--line); border-radius:20px; padding:24px 20px calc(18px + env(safe-area-inset-bottom)); box-shadow:var(--sh-md); animation:pop .22s ease; text-align:center;}
.modal .mbox h3{margin:0 0 6px; font-size:19px;}
.modal .mbox p{color:var(--muted); font-size:14px; margin:0 0 14px; line-height:1.55;}
.modal .mbox .btn{margin:8px 0 0;}
@keyframes pop{from{transform:scale(.92); opacity:0;} to{transform:none; opacity:1;}}
.chain-box{border-color:rgba(240,180,41,.5); box-shadow:0 0 44px rgba(240,180,41,.22), var(--sh-md);}
.chain-box h2{margin:12px 0 6px; font-size:24px;}
#chain-mascot{width:88px; height:88px; margin:0 auto;}
#chain-mascot svg{width:100%; height:100%; display:block;}
.chain-x{position:absolute; top:8px; right:8px;}

/* celebration overlay (daily goal) */
.cel{position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center; background:rgba(4,12,20,.74); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); padding:24px;}
.cel.open{display:flex;}
.cel-card{position:relative; text-align:center; padding:26px 30px; animation:celin .35s cubic-bezier(.2,1.4,.4,1);}
@keyframes celin{from{transform:scale(.7); opacity:0;} to{transform:scale(1); opacity:1;}}
.cel-card h2{margin:12px 0 6px; font-size:24px;}
.cel-card p{color:var(--muted); font-size:14.5px; margin:0; line-height:1.55;}
#goal-cel-mascot{width:88px; height:88px; margin:0 auto;}
#goal-cel-mascot svg{width:100%; height:100%; display:block;}

/* CSS sparkles/confetti — transform + opacity only */
.fx-sparks{position:absolute; inset:0; pointer-events:none; overflow:hidden;}
.fx-sparks i{position:absolute; width:9px; height:9px; border-radius:3px; background:var(--gold); opacity:0; animation:celspark 1.7s ease-out infinite;}
.fx-sparks i:nth-child(1){left:12%; top:64%; animation-delay:0s; background:#ffd76a;}
.fx-sparks i:nth-child(2){left:22%; top:70%; animation-delay:.25s; transform:rotate(24deg);}
.fx-sparks i:nth-child(3){left:34%; top:66%; animation-delay:.5s; background:#3ecf6e; border-radius:50%;}
.fx-sparks i:nth-child(4){left:46%; top:72%; animation-delay:.15s; background:#ffd76a;}
.fx-sparks i:nth-child(5){left:58%; top:66%; animation-delay:.4s; transform:rotate(45deg);}
.fx-sparks i:nth-child(6){left:70%; top:70%; animation-delay:.6s; background:#4a94d8; border-radius:50%;}
.fx-sparks i:nth-child(7){left:80%; top:64%; animation-delay:.3s; background:#ffd76a;}
.fx-sparks i:nth-child(8){left:88%; top:70%; animation-delay:.55s; transform:rotate(70deg);}
.fx-sparks i:nth-child(9){left:28%; top:76%; animation-delay:.7s; background:#3ecf6e;}
.fx-sparks i:nth-child(10){left:64%; top:76%; animation-delay:.1s; background:#ffd76a; border-radius:50%;}
@keyframes celspark{
  0%{opacity:0; transform:translateY(10px) scale(.4) rotate(0deg);}
  18%{opacity:1;}
  100%{opacity:0; transform:translateY(-110px) scale(1) rotate(220deg);}
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important;}
  .how-node{opacity:.8;}
  .how-node:first-child{opacity:1; border-color:var(--gold); box-shadow:0 0 16px rgba(240,180,41,.5);}
}

/* ---------- native iOS shell: paywall + auth (never shown on web) ---------- */
.paywall-box, #authwall .mbox{max-height:92dvh; overflow-y:auto;}
.pw-cards{display:flex; gap:10px; margin:14px 0 4px;}
.pw-card{flex:1; display:flex; flex-direction:column; gap:4px; align-items:flex-start; text-align:left;
  background:#0e2438; border:2px solid #2a3f55; border-radius:14px; padding:14px 12px; color:#fff;
  font:inherit; cursor:pointer; min-height:88px; position:relative;}
.pw-card b{font-size:15px;}
.pw-price{font-size:17px; font-weight:800; color:var(--gold);}
.pw-card .pw-per{font-size:12px; color:var(--muted);}
.pw-card.sel{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 6px 18px rgba(240,180,41,.18);}
.pw-badge{position:absolute; top:-11px; right:8px; background:var(--gold); color:#081826;
  font-size:11px; font-weight:800; padding:3px 8px; border-radius:999px; white-space:nowrap;}
#paywall .fine a, #authwall .fine a{color:var(--gold);}
#auth-email{width:100%; box-sizing:border-box; background:#0e2438; border:2px solid #2a3f55;
  border-radius:12px; color:#fff; font:inherit; font-size:16px; padding:13px 14px; margin:10px 0;}
#auth-email:focus{outline:none; border-color:var(--gold);}
#auth-email-wrap .btn{margin-top:4px;}
#paywall-mascot, #auth-mascot{display:flex; justify-content:center; margin-bottom:2px;}
#account-rows:empty{display:none;}