/* smolbrain: chunky, warm, game-like. One phone-width column, buttons with a hard bottom edge */
:root{
  --bg:#F3FBF8; --surface:#FFFFFF; --ink:#16232B; --muted:#5E6E72; --line:#DCEDE7;
  --accent:#1FC7A5; --accent-deep:#12937A; --sun:#FF9EC2; --sun-deep:#E0608F;
  --sky:#DCEBFF; --sky-deep:#9CC1F2; --good:#3DBE6B; --good-deep:#2A9A52; --good-soft:#E3F7EA;
  --bad:#F0544F; --bad-deep:#C93B37; --bad-soft:#FDE6E5; --lock:#D9D3C8;
  --display:"Baloo 2","Arial Rounded MT Bold",system-ui,sans-serif;
  --body:"Nunito Sans","Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0F1A1C; --surface:#172528; --ink:#EAF6F2; --muted:#9DB3B0; --line:#26393B;
  --sky:#26304A; --sky-deep:#3B4A6E; --good-soft:#1C3326; --bad-soft:#3A1F22; --lock:#3A3546; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0F1A1C; --surface:#172528; --ink:#EAF6F2; --muted:#9DB3B0; --line:#26393B;
  --sky:#26304A; --sky-deep:#3B4A6E; --good-soft:#1C3326; --bad-soft:#3A1F22; --lock:#3A3546; color-scheme:dark}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-tap-highlight-color:transparent}
.app{max-width:440px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;padding-inline:18px;padding-block:calc(env(safe-area-inset-top,0px) + 14px) calc(env(safe-area-inset-bottom,0px) + 18px)}
h1,h2,h3{font-family:var(--display);margin:0;line-height:1.1;text-wrap:balance}
p{margin:0}
img{max-width:100%}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--sky-deep);outline-offset:3px}

/* buttons */
.btn{display:block;width:100%;border:0;border-radius:16px;padding:14px 18px;font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:.02em;text-transform:uppercase;cursor:pointer;background:var(--accent);color:#fff;box-shadow:0 5px 0 var(--accent-deep);transition:transform .06s,box-shadow .06s}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--accent-deep)}
.btn.ghost{background:var(--surface);color:var(--ink);border:2px solid var(--line);box-shadow:0 4px 0 var(--line)}
.btn.good{background:var(--good);box-shadow:0 5px 0 var(--good-deep)}
.btn.bad{background:var(--bad);box-shadow:0 5px 0 var(--bad-deep)}
.btn.sun{background:var(--sun);color:#1F1B2E;box-shadow:0 5px 0 var(--sun-deep)}
.btn[disabled]{background:var(--lock);color:var(--muted);box-shadow:0 5px 0 var(--line);cursor:not-allowed}
.stack{display:flex;flex-direction:column;gap:14px}
.grow{flex:1}
.center{text-align:center}
.muted{color:var(--muted)}
.mascot{display:block;margin-inline:auto;object-fit:contain}

/* welcome */
.welcome{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding-top:20px}
.wordmark{height:56px;object-fit:contain;display:block;margin-inline:auto}
.wordmark-text{font-family:var(--display);font-weight:800;font-size:56px;text-align:center;letter-spacing:-.02em}
.welcome .mascot{width:min(70vw,280px)}
.welcome h1{font-size:30px;text-align:center}
.speech{background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:12px 16px;font-family:var(--display);font-weight:600;font-size:18px;line-height:1.3;position:relative}
.speech::after{content:"";position:absolute;left:28px;bottom:-11px;width:18px;height:18px;background:var(--surface);border-right:2px solid var(--line);border-bottom:2px solid var(--line);transform:rotate(45deg)}
.speech.up::after{top:-11px;bottom:auto;transform:rotate(225deg)}

/* top bars */
.topbar{display:flex;align-items:center;gap:10px;padding-block:6px 14px}
.chip{display:flex;align-items:center;gap:6px;font-family:var(--display);font-weight:800;font-size:18px;padding:4px 10px;border-radius:12px}
.chip .ico{font-size:20px;line-height:1}
.chip.streak{color:var(--accent)}
.chip.coffee{color:#8A5A2B}
.chip.floor{margin-left:auto;background:var(--sky);color:var(--ink);font-size:14px;border-radius:10px}
.progress{flex:1;height:16px;background:var(--line);border-radius:10px;overflow:hidden}
.progress span{display:block;height:100%;background:var(--good);border-radius:10px;transition:width .3s;box-shadow:inset 0 -4px 0 rgba(0,0,0,.08)}
.close{border:0;background:none;font-size:26px;line-height:1;cursor:pointer;color:var(--muted);padding:4px}

/* quiz */
.qtitle{font-size:26px;margin-block:8px 18px}
.opts{display:flex;flex-direction:column;gap:12px}
.opt{text-align:left;border:2px solid var(--line);border-bottom-width:5px;border-radius:16px;padding:14px 16px;background:var(--surface);font-weight:700;font-size:16px;cursor:pointer;transition:background .1s,border-color .1s}
.opt:hover{border-color:var(--sky-deep)}
.opt.sel{border-color:var(--sky-deep);background:var(--sky)}
.opt.right{border-color:var(--good);background:var(--good-soft)}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft)}

/* role card */
.rolecard{background:var(--accent);color:#fff;border-radius:24px;padding:22px;display:flex;flex-direction:column;gap:10px;box-shadow:0 6px 0 var(--accent-deep);position:relative;overflow:hidden}
.rolecard .kick{font-family:var(--display);font-weight:700;opacity:.9}
.rolecard h2{font-size:34px}
.rolecard .tag{font-family:var(--display);font-weight:700;font-size:18px;background:rgba(255,255,255,.18);border-radius:10px;padding:4px 10px;align-self:flex-start}
.rolecard img{width:120px;position:absolute;right:-10px;bottom:-14px}
.rolecard p.blurb{max-width:72%;font-size:15px}
.choices{display:flex;flex-direction:column;gap:10px}

/* home path */
.unit{background:var(--accent);color:#fff;border-radius:18px;padding:14px 16px;box-shadow:0 5px 0 var(--accent-deep);margin-bottom:22px}
.unit h2{font-size:22px}
.unit p{opacity:.92;font-size:14px;font-weight:600}
.unit.locked{background:var(--lock);color:var(--muted);box-shadow:0 5px 0 var(--line)}
.path{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;padding-block:52px 30px}
.node{width:78px;height:72px;border-radius:50%;border:0;cursor:pointer;background:var(--accent);box-shadow:0 7px 0 var(--accent-deep);display:grid;place-items:center;font-size:30px;position:relative;color:#fff;transition:transform .06s}
.node:active{transform:translateY(5px);box-shadow:0 2px 0 var(--accent-deep)}
.node.done{background:var(--sun);box-shadow:0 7px 0 var(--sun-deep);color:#1F1B2E}
.node.locked{background:var(--lock);box-shadow:0 7px 0 var(--line);cursor:not-allowed;color:var(--muted)}
.node.current::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:5px solid var(--line)}
.node .start{position:absolute;top:-44px;left:50%;transform:translateX(-50%);background:var(--surface);color:var(--accent);border:2px solid var(--line);font-family:var(--display);font-weight:800;font-size:15px;padding:4px 12px;border-radius:12px;white-space:nowrap;animation:bob 1.4s ease-in-out infinite}
@keyframes bob{50%{transform:translate(-50%,-5px)}}
.path .sidekick{position:absolute;width:110px}
.nodelabel{font-family:var(--display);font-weight:700;font-size:13px;color:var(--muted);margin-top:-14px;text-align:center;max-width:160px}

/* bottom nav */
.tabs{position:sticky;bottom:0;margin-top:auto;display:flex;justify-content:space-around;background:var(--bg);border-top:2px solid var(--line);padding-block:8px calc(env(safe-area-inset-bottom,0px) + 4px);margin-inline:-18px}
.tab{border:2px solid transparent;background:none;border-radius:14px;padding:6px 12px;font-family:var(--display);font-weight:700;font-size:13px;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer}
.tab .ico{font-size:22px;line-height:1}
.tab.on{border-color:var(--sky-deep);background:var(--sky);color:var(--ink)}

/* lesson */
.lesson{flex:1;display:flex;flex-direction:column;gap:18px}
.learn{background:var(--surface);border:2px solid var(--line);border-bottom-width:5px;border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:10px}
.learn .kick{font-family:var(--display);font-weight:700;color:var(--accent);font-size:15px}
.learn h2{font-size:26px}
.learn p{font-size:17px}
.smolline{display:flex;gap:10px;align-items:flex-end}
.smolline img{width:76px;flex:none}
.smolline .speech{font-size:16px}
.smolline .speech::after{left:-9px;bottom:16px;transform:rotate(135deg)}
.fillline{font-family:var(--display);font-weight:700;font-size:22px;line-height:1.5}
.blank{display:inline-block;min-width:90px;border-bottom:3px solid var(--ink);text-align:center;padding-inline:6px;color:var(--accent)}
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{border:2px solid var(--line);border-bottom-width:5px;border-radius:14px;padding:10px 16px;background:var(--surface);font-weight:800;cursor:pointer}
.pill.sel{background:var(--sky);border-color:var(--sky-deep)}
.pill.used{visibility:hidden}
.orderzone{min-height:60px;border:2px dashed var(--line);border-radius:16px;padding:10px;display:flex;flex-direction:column;gap:8px}
.orderzone .pill,.orderbank .pill{text-align:left;width:100%}
.orderbank{display:flex;flex-direction:column;gap:8px}
.tf{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tf .opt{text-align:center;font-family:var(--display);font-size:20px}

.sheet{position:sticky;bottom:0;margin-inline:-18px;padding:16px 18px calc(env(safe-area-inset-bottom,0px) + 16px);display:flex;flex-direction:column;gap:12px;background:var(--bg)}
.sheet.good{background:var(--good-soft)}
.sheet.bad{background:var(--bad-soft)}
.sheet h3{font-size:24px}
.sheet.good h3{color:var(--good-deep)}
.sheet.bad h3{color:var(--bad-deep)}
.sheet .why{font-size:15px}
.sheet .row{display:flex;gap:10px;align-items:center}
.sheet .row img{width:56px}
.sheet .row p{font-family:var(--display);font-weight:600;font-size:16px}

/* complete */
.done-screen{flex:1;display:flex;flex-direction:column;justify-content:center;gap:20px;text-align:center}
.done-screen .mascot{width:min(60vw,240px)}
.done-screen h1{font-size:34px;color:var(--accent)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat{border:2px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface)}
.stat b{display:block;font-family:var(--display);font-size:13px;color:#fff;padding:4px;text-transform:uppercase;letter-spacing:.05em}
.stat span{display:block;font-family:var(--display);font-weight:800;font-size:26px;padding:8px}
.stat.xp b{background:var(--sun-deep)}
.stat.acc b{background:var(--good)}
.bigflame{font-family:var(--display);font-weight:800;font-size:64px;color:var(--accent);line-height:1}

/* leagues + profile + plans */
.pagehead{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.pagehead h1{font-size:30px}
.board{display:flex;flex-direction:column;border:2px solid var(--line);border-radius:18px;overflow:hidden;background:var(--surface)}
.board .row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:2px solid var(--line);font-weight:700}
.board .row:last-child{border-bottom:0}
.board .rank{width:26px;font-family:var(--display);font-weight:800;color:var(--muted);text-align:center}
.board .av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:800;background:var(--sky)}
.board .xp{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--muted)}
.board .row.me{background:var(--good-soft)}
.board .zone{padding:6px 14px;font-family:var(--display);font-weight:700;font-size:13px;text-align:center}
.board .zone.up{color:var(--good-deep);background:var(--good-soft)}
.board .zone.down{color:var(--bad-deep);background:var(--bad-soft)}
.note{font-size:13px;color:var(--muted)}

.review{background:var(--ink);color:var(--bg);border-radius:22px;padding:20px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}
.review .kick{font-family:var(--display);font-weight:700;color:var(--sun)}
.review h2{font-size:28px}
.review .grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.review .cell{background:rgba(255,255,255,.08);border-radius:14px;padding:10px}
.review .cell b{display:block;font-family:var(--display);font-size:24px}
.review .cell span{font-size:13px;opacity:.75}
.review .comment{font-family:var(--display);font-weight:600;font-size:17px;color:var(--sun);max-width:70%}
.review img{position:absolute;right:-6px;bottom:-10px;width:110px}

.tier{border:2px solid var(--line);border-bottom-width:5px;border-radius:20px;padding:18px;background:var(--surface);display:flex;flex-direction:column;gap:10px}
.tier.ultra{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.tier h3{font-size:24px}
.tier .price{font-family:var(--display);font-weight:800;font-size:28px}
.tier .price small{font-size:15px;color:var(--muted);font-weight:700}
.tier ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px;font-size:15px}
.ladder{display:flex;flex-direction:column;gap:10px}
.rung{display:flex;gap:12px;align-items:center;border:2px solid var(--line);border-radius:16px;padding:12px 14px;background:var(--surface)}
.rung .dot{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:16px;background:var(--sun);font-weight:800}
.rung.lock .dot{background:var(--lock)}
.rung h3{font-size:17px}
.rung p{font-size:14px;color:var(--muted)}

.modal{position:fixed;inset:0;background:rgba(20,16,30,.55);display:grid;place-items:end center;z-index:10;padding:18px}
.modal .box{width:100%;max-width:440px;background:var(--bg);border-radius:24px;padding:22px;display:flex;flex-direction:column;gap:14px;text-align:center}
.modal .box img{width:150px;margin-inline:auto}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:12px;font-weight:700;z-index:20}

@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* v2: ink-outline cartoon style from the Antigravity UI direction */
:root{--edge:2.5px solid var(--ink)}
.opt,.learn,.tier,.rung,.board,.stat,.speech,.pill,.orderzone,.btn.ghost,.unit,.node,.rolecard,.review,.modal .box{border:var(--edge)!important}
.opt,.learn,.tier,.rung,.pill,.btn.ghost{box-shadow:0 4px 0 var(--ink)!important;border-bottom-width:2.5px!important}
.btn{border:var(--edge);box-shadow:0 5px 0 var(--ink)}
.btn:active{box-shadow:0 1px 0 var(--ink)}
.btn.good,.btn.bad,.btn.sun{box-shadow:0 5px 0 var(--ink)}
.btn[disabled]{border-color:var(--muted);box-shadow:0 5px 0 var(--muted)}
.unit{box-shadow:0 5px 0 var(--ink)}
.node{box-shadow:0 7px 0 var(--ink)}
.node.done{box-shadow:0 7px 0 var(--ink)}
.node.locked{border-color:var(--muted)!important;box-shadow:0 7px 0 var(--muted)}
.speech::after{border-right:var(--edge);border-bottom:var(--edge)}
.opt{display:flex;align-items:center;gap:12px}
.opt .letter{flex:none;width:34px;height:34px;border:var(--edge);border-radius:10px;display:grid;place-items:center;font-family:var(--display);font-weight:800;background:var(--bg)}
.opt.sel .letter{background:var(--accent);color:#fff}
.opt.right .letter{background:var(--good);color:#fff}
.opt.wrong .letter{background:var(--bad);color:#fff}
.opt.sel{background:color-mix(in srgb,var(--accent) 10%,var(--surface));border-color:var(--accent)!important}
.week{display:flex;justify-content:space-between;gap:6px;border:var(--edge);border-radius:18px;padding:14px;background:var(--surface);box-shadow:0 4px 0 var(--ink)}
.week div{display:flex;flex-direction:column;align-items:center;gap:4px;font-family:var(--display);font-weight:700;font-size:12px;color:var(--muted)}
.week span{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:var(--edge);background:var(--line);font-size:15px}
.week .lit span{background:var(--sun)}
.week .now span{background:var(--accent)}
.week .now{color:var(--accent)}
.rewards{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.rewards span{border:var(--edge);border-radius:12px;padding:4px 10px;font-weight:800;font-size:13px;background:var(--surface)}
.trackhead{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface);border:var(--edge);border-radius:18px;padding:12px 16px;box-shadow:0 4px 0 var(--ink);margin-bottom:6px}
.trackhead small{display:block;font-family:var(--display);font-weight:700;color:var(--muted);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.trackhead h2{font-size:24px}
.trackhead .count{font-family:var(--display);font-weight:800;font-size:14px;background:var(--sun);border:var(--edge);border-radius:12px;padding:4px 10px;white-space:nowrap}

/* smol hero on home: the mascot is the progress bar */
.brainhero{display:flex;align-items:center;gap:14px;background:var(--surface);border:var(--edge);border-radius:20px;padding:12px 16px;box-shadow:0 4px 0 var(--ink);margin-bottom:12px}
.brainhero .smolhero{width:96px;flex:none}
.brainhero .kick{font-family:var(--display);font-weight:700;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.brainhero h2{font-size:26px;color:var(--accent-deep)}
.brainhero p.muted{font-size:14px}

/* ================= v3: immersive layer ================= */
body{background:radial-gradient(120% 60% at 50% -10%, color-mix(in srgb,var(--accent) 16%, var(--bg)) 0%, var(--bg) 60%) fixed var(--bg)}
.app.enter > *{animation:rise .38s cubic-bezier(.2,.8,.2,1) both}
.app.enter > *:nth-child(2){animation-delay:.04s}.app.enter > *:nth-child(3){animation-delay:.08s}.app.enter > *:nth-child(4){animation-delay:.12s}.app.enter > *:nth-child(5){animation-delay:.16s}
@keyframes rise{from{opacity:.001;transform:translateY(14px)}to{opacity:1;transform:none}}

/* icons */
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic.flip{transform:rotate(180deg);margin-left:auto;opacity:.5}
.chip{display:flex;align-items:center;gap:5px}
.chip b{font-family:var(--display);font-weight:800;font-size:18px}
.chip.streak{color:#FF7A45}.chip.streak .ic{fill:#FFB36B}
.chip.fuel{color:#E2A400}.chip.fuel .ic{fill:#FFD23F}
.chip.combo{color:#FF5E8A}.chip.combo .ic{fill:#FF9EC2;animation:flick .5s ease-in-out infinite alternate}
@keyframes flick{to{transform:scale(1.15) rotate(-6deg)}}
.chip.league{margin-left:auto;background:var(--surface);border:var(--edge);border-radius:12px;font-family:var(--display);font-weight:700;font-size:14px;padding:4px 10px;box-shadow:0 3px 0 var(--ink)}
.chip.league .ic{width:16px;height:16px;color:var(--accent-deep)}
.iconbtn{border:0;background:none;color:var(--muted);padding:6px;cursor:pointer;display:grid;place-items:center}
.iconbtn .ic{width:24px;height:24px}
.tb-title{font-family:var(--display);font-size:20px}

/* mascot motion */
.float{animation:float 3.2s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px) rotate(-1.5deg)}}
.pop{animation:popin .55s cubic-bezier(.2,1.6,.4,1) both}
@keyframes popin{from{transform:scale(.4);opacity:0}}
.wordmark-text{font-family:var(--display);font-weight:800;font-size:46px;text-align:center;letter-spacing:-.02em;margin:0}
.wordmark-text span{color:var(--sun-deep)}
.hero-smol{position:relative;display:grid;place-items:center;padding-block:10px}
.hero-smol .mascot{width:min(64vw,250px);position:relative;z-index:1}
.hero-smol .glow{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 35%,transparent),transparent 65%);filter:blur(6px)}

/* speech bubbles (typewriter) */
.bubble{background:var(--surface);border:var(--edge);border-radius:18px;padding:12px 16px;box-shadow:0 4px 0 var(--ink);position:relative;min-height:48px}
.bubble p{font-family:var(--display);font-weight:600;font-size:17px;line-height:1.3;margin:0}
.bubble.big p{font-size:21px}
.smolline .bubble{flex:1}
.intro{flex:1;display:flex;flex-direction:column;gap:18px;justify-content:flex-end;padding-bottom:6px}
.intro-stage{display:grid;place-items:center;flex:1}
.intro-stage .mascot{width:min(58vw,230px)}
.field{display:flex;flex-direction:column;gap:6px;font-weight:700}
.field input{font:600 18px var(--body);padding:14px 16px;border:var(--edge);border-radius:14px;background:var(--surface);color:var(--ink);box-shadow:0 4px 0 var(--ink);outline:none}
.field input:focus{border-color:var(--accent-deep)}

/* quiz + options */
.quizhead{display:flex;align-items:center;gap:10px}
.quizhead .mini{width:46px}
.stagger > *{animation:rise .35s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0ms)}
.opt{transition:transform .08s,background .15s,border-color .15s}
.opt:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)!important}
.opt.goal{align-items:center}
.gnum{width:40px;height:40px;border-radius:12px;border:var(--edge);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:20px;background:var(--sky);flex:none}
.opt.goal.sel .gnum{background:var(--accent);color:#fff}
.opt.reveal-right{border-color:var(--good)!important;background:var(--good-soft)}
.rolecard{background:var(--accent);box-shadow:0 6px 0 var(--ink)}
.rolecard.reveal{animation:flipin .7s cubic-bezier(.2,1.3,.4,1) both .15s}
@keyframes flipin{from{transform:perspective(700px) rotateX(70deg) scale(.8);opacity:0}}
.result{flex:1;justify-content:center}

/* notif preview */
.phone-notif{display:flex;gap:12px;align-items:flex-start;background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(10px);border:1.5px solid var(--line);border-radius:20px;padding:12px 14px;box-shadow:0 10px 30px rgba(10,40,40,.12);animation:rise .4s both;animation-delay:var(--d,0ms)}
.phone-notif .appicon{width:38px;height:38px;border-radius:10px;background:var(--accent);display:grid;place-items:center;color:#fff;flex:none}
.phone-notif b{font-size:14px}
.phone-notif p{font-size:15px;margin:0}
.phone-notif .when{margin-left:auto;font-size:12px;color:var(--muted)}
.notif-list{display:flex;flex-direction:column;gap:10px;margin-block:12px}

/* home */
.brainhero{gap:16px;align-items:center;overflow:hidden;position:relative}
.domewrap{width:104px;flex:none;display:grid;place-items:center}
.domewrap .smolhero{width:100%}
.bh-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.meter{height:12px;background:var(--line);border-radius:8px;border:2px solid var(--ink);overflow:hidden}
.meter span{display:block;height:100%;background:repeating-linear-gradient(-45deg,var(--sun),var(--sun) 6px,var(--sun-deep) 6px,var(--sun-deep) 12px);animation:slide 1.2s linear infinite;background-size:200% 100%;transition:width .8s}
@keyframes slide{to{background-position:-34px 0}}
.trackhead .count{background:var(--sky)}
.nodewrap{transform:translateX(var(--x));position:relative;display:flex;flex-direction:column;align-items:center}
.node .ic{width:30px;height:30px;stroke-width:2.6}
.node.current{background:var(--accent);color:#fff}
.node.current .ic{fill:#fff}
.node .ring{position:absolute;inset:-12px;border-radius:50%;border:4px solid var(--accent);opacity:.35;animation:pulse 1.6s ease-out infinite}
@keyframes pulse{from{transform:scale(.9);opacity:.6}to{transform:scale(1.25);opacity:0}}
.node.nope{animation:nope .35s}
@keyframes nope{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.popcard{position:absolute;top:92px;z-index:5;width:240px;background:var(--accent);color:#fff;border:var(--edge);border-radius:18px;padding:14px;box-shadow:0 6px 0 var(--ink);display:flex;flex-direction:column;gap:8px;animation:popin .3s cubic-bezier(.2,1.5,.4,1) both}
.popcard::before{content:"";position:absolute;top:-10px;left:50%;width:16px;height:16px;background:var(--accent);border-left:var(--edge);border-top:var(--edge);transform:translateX(-50%) rotate(45deg)}
.popcard h3{font-size:20px}
.popcard .muted{color:rgba(255,255,255,.85);font-size:14px}
.popcard .btn{background:#fff;color:var(--accent-deep);display:flex;align-items:center;justify-content:center;gap:6px;font-size:17px}
.popcard .btn .ic{fill:#FFD23F;color:#E2A400}
.unit.locked{display:flex;align-items:center;gap:12px;cursor:pointer}
.unit.locked > .ic{width:26px;height:26px}
.unit.locked div{flex:1;min-width:0}
.tier-tag{font-family:var(--display);font-weight:800;font-size:12px;background:var(--sun);color:#16232B;border:2px solid var(--ink);border-radius:10px;padding:3px 8px;white-space:nowrap}
.tier-tag.galaxy{background:var(--ink);color:var(--sun)}
.tab{gap:3px}
.tab .ic{width:24px;height:24px}
.tab.on .ic{color:var(--accent-deep)}

/* lesson */
.qtype{font-family:var(--display);font-weight:800;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-deep);margin:0}
.card-in{animation:flipin .5s cubic-bezier(.2,1.2,.4,1) both}
.blank.pop{animation:popin .3s both}
.pill .n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;margin-right:8px}
.lesson.shake{animation:nope .4s}
.dock{display:flex;align-items:flex-end;gap:10px;margin-top:auto;padding-top:14px}
.dock img{width:74px;flex:none;transition:transform .3s}
.dock.happy img{animation:hop .5s cubic-bezier(.2,1.6,.4,1)}
.dock.sad img{animation:nope .4s}
@keyframes hop{40%{transform:translateY(-16px) rotate(-6deg)}}
.dock .bubble{flex:1}
.dock .bubble p{font-size:15px}
.sheet{border-top:2px solid transparent}
.sheet.up{animation:sheetup .3s cubic-bezier(.2,.9,.3,1) both;border-top-color:var(--ink)}
@keyframes sheetup{from{transform:translateY(60%);opacity:.3}}
.sheet-head{display:flex;align-items:center;gap:8px}
.sheet-head .ic{width:30px;height:30px;stroke-width:3}
.sheet.good .sheet-head{color:var(--good-deep)}.sheet.bad .sheet-head{color:var(--bad-deep)}
.confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:50}

/* complete */
.stats{grid-template-columns:repeat(3,1fr)}
.stat.cmb b{background:var(--sun-deep)}
.stat.xp b{background:var(--accent-deep)}
.streakflame{position:relative;margin-inline:auto;width:150px;height:150px;display:grid;place-items:center}
.streakflame .ic{width:150px;height:150px;fill:#FFB36B;color:#FF7A45;stroke-width:1.2;animation:flick .6s ease-in-out infinite alternate}
.streakflame b{position:absolute;bottom:26px;font-family:var(--display);font-size:44px;color:#fff;text-shadow:0 2px 0 #C2410C}
.week .ic{width:16px;height:16px;fill:#fff;color:#fff}
.week .lit span,.week .now span{background:#FF7A45}
.growbox{position:relative;width:min(60vw,230px);aspect-ratio:1;margin-inline:auto}
.growbox img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.growbox .before{animation:fadeout .9s ease .4s forwards}
.growbox .after{opacity:0;animation:growin .9s cubic-bezier(.2,1.5,.4,1) .7s forwards}
@keyframes fadeout{to{opacity:0;transform:scale(.85)}}
@keyframes growin{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.kick{font-family:var(--display);font-weight:700;color:var(--accent-deep);text-transform:uppercase;letter-spacing:.06em;font-size:13px;margin:0}

/* leagues */
.ladder-row{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin-bottom:12px}
.ladder-row span{display:flex;align-items:center;gap:4px;white-space:nowrap;font-family:var(--display);font-weight:700;font-size:13px;padding:6px 10px;border:2px solid var(--line);border-radius:12px;color:var(--muted)}
.ladder-row span.on{border:var(--edge);color:var(--ink);background:var(--sun);box-shadow:0 3px 0 var(--ink)}
.ladder-row .ic{width:16px;height:16px}
.board .row{animation:rise .35s both;animation-delay:var(--d)}

/* profile + settings */
.review{background:linear-gradient(160deg,#16232B,#1E3A3F);color:#EAF6F2}
.review .kick{color:var(--sun)}
.settings{display:flex;flex-direction:column;border:var(--edge);border-radius:18px;overflow:hidden;background:var(--surface);margin-top:16px;box-shadow:0 4px 0 var(--ink)}
.setrow{display:flex;align-items:center;gap:12px;padding:14px 16px;border:0;border-bottom:2px solid var(--line);background:none;text-align:left;cursor:pointer;font:700 16px var(--body);color:var(--ink);width:100%}
.setrow:last-child{border-bottom:0}
.setrow > span{display:flex;flex-direction:column;flex:1;min-width:0}
.setrow small{font-weight:600;font-size:13px;color:var(--muted)}
.setrow.danger{color:var(--bad-deep)}
.setrow input[type=time]{font:700 15px var(--body);border:2px solid var(--line);border-radius:10px;padding:6px 8px;background:var(--bg);color:var(--ink)}
.switch{width:46px;height:28px;border-radius:20px;background:var(--line);border:2px solid var(--ink);position:relative;flex:none;transition:background .2s}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--ink);transition:left .2s}
.switch.on{background:var(--accent)}.switch.on::after{left:20px}
.seg{display:flex;border:var(--edge);border-radius:14px;overflow:hidden;box-shadow:0 3px 0 var(--ink);background:var(--surface);margin-top:12px}
.seg button{flex:1;border:0;background:none;padding:10px;font:800 15px var(--display);color:var(--muted);cursor:pointer}
.seg button.on{background:var(--ink);color:var(--bg)}

/* paywall */
.cur{margin-left:auto;display:flex;border:2px solid var(--line);border-radius:10px;overflow:hidden}
.cur button{border:0;background:none;padding:4px 12px;font:800 15px var(--display);color:var(--muted);cursor:pointer}
.cur button.on{background:var(--ink);color:var(--bg)}
.paywall-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.paywall-hero img{width:150px}
.paywall-hero h1{font-size:36px}
.tiers2{margin-block:14px}
.cycles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cycle{position:relative;text-align:left;border:var(--edge);border-radius:18px;padding:16px 14px 12px;background:var(--surface);box-shadow:0 4px 0 var(--ink);display:flex;flex-direction:column;gap:2px;cursor:pointer;font-family:var(--body);color:var(--ink)}
.cycle b{font-family:var(--display);font-size:18px}
.cycle span{font-weight:800}
.cycle small{color:var(--muted);font-weight:600}
.cycle.on{border-color:var(--accent-deep);background:color-mix(in srgb,var(--accent) 12%,var(--surface));box-shadow:0 4px 0 var(--accent-deep)}
.cycle .badge{position:absolute;top:-12px;right:10px;background:var(--sun);border:2px solid var(--ink);border-radius:10px;padding:1px 8px;font:800 12px var(--display)}
.perks{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.perks li{display:flex;gap:10px;align-items:center;font-weight:700}
.perks .ic{color:#fff;background:var(--accent);border-radius:50%;padding:3px;width:22px;height:22px;stroke-width:3}
.sticky-cta{position:sticky;bottom:0;padding-block:14px 8px;background:linear-gradient(transparent,var(--bg) 30%);display:flex;flex-direction:column;gap:6px;margin-top:12px}
.rung .dot .ic{width:18px;height:18px}
@media (prefers-reduced-motion: reduce){.float,.ring,.meter span{animation:none!important}}
.nodewrap:has(.popcard){z-index:20}
.setrow > span.switch{flex:none;display:block}
.sheet-react{display:flex;align-items:center;gap:10px}
.sheet-react img{width:56px;flex:none;animation:hop .5s cubic-bezier(.2,1.6,.4,1)}
.sheet.bad .sheet-react img{animation:nope .4s}
.sheet-react p{font-family:var(--display);font-weight:600;font-size:16px;margin:0}
.dock.hide{visibility:hidden}

/* v4: reel-driven additions */
.rolecard .dream{font-size:14px;background:rgba(255,255,255,.16);border-radius:12px;padding:8px 10px;max-width:72%;margin:0}
.btn.share{font-size:16px}
.drop{background:var(--ink);color:#EAF6F2;border:var(--edge);border-radius:18px;padding:14px 16px;box-shadow:0 4px 0 color-mix(in srgb,var(--ink) 70%,#000);margin-bottom:16px;cursor:pointer;display:flex;flex-direction:column;gap:4px}
.drop-head{display:flex;align-items:center;gap:8px;color:var(--sun)}
.drop-head .kick{color:var(--sun)}
.drop h3{font-size:20px}
.drop .muted{color:#9DB3B0;font-size:14px;margin:0}
.drop-foot{display:flex;align-items:center;gap:10px;margin-top:6px}
.drop-foot .tier-tag.galaxy{background:var(--sun);color:#16232B}
.giftbox{display:flex;align-items:center;gap:12px;justify-content:center;border:2.5px dashed var(--sun-deep);background:color-mix(in srgb,var(--sun) 18%,var(--surface));border-radius:18px;padding:14px;font:800 16px var(--display);color:var(--ink);cursor:pointer;animation:wiggle 1.6s ease-in-out infinite}
.giftbox .ic{width:32px;height:32px;color:var(--sun-deep);fill:color-mix(in srgb,var(--sun) 60%,transparent)}
.giftbox.open{border-style:solid;border-color:var(--ink);animation:popin .45s cubic-bezier(.2,1.6,.4,1);text-align:left;box-shadow:0 4px 0 var(--ink)}
.giftbox.open .ic{fill:var(--sun);color:var(--ink)}
.giftbox span b{font-size:18px}
@keyframes wiggle{0%,80%,100%{transform:none}85%{transform:rotate(-3deg)}90%{transform:rotate(3deg)}95%{transform:rotate(-2deg)}}
.linkbtn{background:none;border:0;color:var(--muted);font:700 15px var(--body);text-decoration:underline;cursor:pointer;padding:6px}
.modal .box.offer img{width:120px}
.setrow.invite{background:color-mix(in srgb,var(--sun) 16%,var(--surface))}

/* ================= v5: palettes ================= */
:root[data-palette="cream"]{
  --bg:#FFF8EF; --surface:#FFFFFF; --ink:#1E1B2E; --muted:#6E6878; --line:#F0E4D4;
  --accent:#FF6F91; --accent-deep:#D9466C; --sun:#FFD23F; --sun-deep:#E0AE12;
  --sky:#E8F3FF; --sky-deep:#9CC8F0; --good:#2FBF71; --good-deep:#1E9A57; --good-soft:#E4F7EC;
  --bad:#F0544F; --bad-deep:#C93B37; --bad-soft:#FDE7E6; --lock:#E9DED0; color-scheme:light;
}
:root[data-palette="night"]{
  --bg:#0F1233; --surface:#1A1F4A; --ink:#F3F1FF; --muted:#A9A8CC; --line:#2A3066;
  --accent:#FF7EB6; --accent-deep:#D94F8C; --sun:#FFD23F; --sun-deep:#E0AE12;
  --sky:#232A63; --sky-deep:#4A56A8; --good:#35D08A; --good-deep:#22A86B; --good-soft:#163A3A;
  --bad:#FF6B6B; --bad-deep:#E04848; --bad-soft:#3E1F33; --lock:#2C3270; color-scheme:dark;
}
:root[data-palette="night"] body{background:radial-gradient(120% 60% at 50% -10%,#2A2F7A 0%,var(--bg) 60%) fixed var(--bg)}
:root[data-palette="night"] .btn.ghost,:root[data-palette="night"] .opt,:root[data-palette="night"] .learn,:root[data-palette="night"] .card{color:var(--ink)}
:root[data-palette="night"] .chip.league,:root[data-palette="night"] .bubble{background:var(--surface)}
:root[data-palette="mint"]{
  --bg:#F3FBF8; --surface:#FFFFFF; --ink:#16232B; --muted:#5E6E72; --line:#DCEDE7;
  --accent:#1FC7A5; --accent-deep:#12937A; --sun:#FF9EC2; --sun-deep:#E0608F; color-scheme:light;
}
/* the wordmark keeps the brain pink whatever the palette */
.wordmark-text span{color:#E0608F}

/* tabs with five items */
.tab{padding:6px 6px;font-size:12px;min-width:0}

/* Talk to Smol entry on home */
.talkbar{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--sky);border:var(--edge);border-radius:18px;padding:10px 14px;box-shadow:0 4px 0 var(--ink);margin-bottom:12px;cursor:pointer;font:inherit;color:var(--ink)}
.talkbar img{width:48px;flex:none}
.talkbar span{display:flex;flex-direction:column;flex:1;min-width:0}
.talkbar b{font-family:var(--display);font-size:18px}
.talkbar small{color:var(--muted);font-weight:600;font-size:13px}

/* locked teaser */
.talk-tease{display:flex;flex-direction:column;gap:14px;flex:1}
.tease-chat{position:relative;display:flex;flex-direction:column;gap:10px;padding-bottom:6px}
.msg{max-width:86%;font-size:15px;font-weight:600;line-height:1.4}
.msg.you{align-self:flex-end;background:var(--accent);color:#fff;border:var(--edge);border-radius:18px 18px 4px 18px;padding:10px 14px;box-shadow:0 3px 0 var(--ink)}
.msg.smol{align-self:flex-start;display:flex;gap:8px;align-items:flex-end}
.msg.smol img{width:40px;flex:none}
.msg.smol p{margin:0;background:var(--surface);border:var(--edge);border-radius:18px 18px 18px 4px;padding:10px 14px;box-shadow:0 3px 0 var(--ink)}
.blurwall{position:absolute;left:-6px;right:-6px;bottom:-10px;height:62%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;text-align:center;padding:16px;background:linear-gradient(transparent,var(--bg) 45%);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border-radius:16px}
.blurwall .ic{width:30px;height:30px;color:var(--accent-deep)}
.blurwall b{font-family:var(--display);font-size:20px}
.blurwall span{color:var(--muted);font-size:14px;max-width:32ch}

/* chat */
.chatlog{flex:1;display:flex;flex-direction:column;gap:12px;overflow-y:auto;padding-block:8px 12px;max-height:52vh}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px}
.pchip{flex:none;border:2px solid var(--ink);border-radius:14px;background:var(--surface);padding:8px 12px;font:700 13px var(--body);color:var(--ink);cursor:pointer;box-shadow:0 2px 0 var(--ink)}
.composer{display:flex;gap:8px;align-items:center;padding-block:6px 10px}
.composer input{flex:1;min-width:0;font:600 16px var(--body);padding:12px 14px;border:var(--edge);border-radius:16px;background:var(--surface);color:var(--ink);box-shadow:0 3px 0 var(--ink);outline:none}
.composer .mic,.composer .send{width:46px;height:46px;flex:none;border:var(--edge);border-radius:14px;display:grid;place-items:center;cursor:pointer;box-shadow:0 3px 0 var(--ink)}
.composer .mic{background:var(--sky);color:var(--ink)}
.composer .send{background:var(--accent);color:#fff}
.composer .send .ic{fill:#fff}
.talkbar > span.tier-tag{flex:none;display:inline-block}

/* ================= v6: voice Talk to Smol ================= */
.voice-stage{flex:1;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding-top:6px}
.smolbig{position:relative;width:min(58vw,230px);--lv:0;transform:scale(calc(1 + var(--lv) * .06));transition:transform .06s}
.smolbig img{width:100%;position:relative;z-index:1;animation:float 3.2s ease-in-out infinite}
.smolbig .halo{position:absolute;left:50%;top:22%;width:62%;aspect-ratio:1;transform:translate(-50%,-50%) scale(calc(.9 + var(--lv) * .8));border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,#FF9EC2 60%,transparent),transparent 65%);opacity:calc(.25 + var(--lv));filter:blur(4px);z-index:0}
.vstate{font-family:var(--display);font-weight:800;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0}
.vstate.listen{color:var(--bad-deep)}.vstate.think{color:var(--sun-deep)}.vstate.speak{color:var(--accent-deep)}
.caption{font-family:var(--display);font-weight:600;font-size:20px;line-height:1.3;max-width:30ch;margin:0;min-height:52px}
.you-said{font-size:14px;color:var(--muted);margin:0;max-width:34ch}
.voice-stage .chips{max-width:100%;justify-content:flex-start}
.micbig{width:84px;height:84px;border-radius:50%;border:var(--edge);background:var(--accent);color:#fff;display:grid;place-items:center;box-shadow:0 6px 0 var(--ink);cursor:pointer;margin-top:6px;transition:transform .08s}
.micbig .ic{width:34px;height:34px}
.micbig:active{transform:translateY(4px);box-shadow:0 2px 0 var(--ink)}
.micbig[disabled]{background:var(--lock);color:var(--muted);cursor:wait}
.micbig.live{background:var(--bad);animation:pulse 1.2s ease-out infinite;box-shadow:0 0 0 0 rgba(240,84,79,.5),0 6px 0 var(--ink)}
.voice-stage.tease{position:relative}
.wave{display:flex;align-items:center;gap:4px;height:46px}
.wave i{display:block;width:5px;border-radius:3px;background:var(--accent);height:calc(10px + (var(--i) * 7 % 34) * 1px);animation:wv 1s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -70ms)}
@keyframes wv{to{transform:scaleY(.35)}}
.lockcard{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--surface);border:var(--edge);border-radius:18px;padding:16px;box-shadow:0 4px 0 var(--ink);max-width:340px}
.lockcard .ic{width:28px;height:28px;color:var(--accent-deep)}
.lockcard b{font-family:var(--display);font-size:20px}
.lockcard span{color:var(--muted);font-size:14px}

/* ================= v7: contrast pass (WCAG AA) =================
   --accent: fills that carry white text (>= 4.5:1 with #fff)
   --accent-text: coloured text on the page background (>= 4.5:1)
   --dark-card: surfaces that stay dark in every palette               */
:root,:root[data-palette="cream"]{--accent:#E5426D;--accent-deep:#B32A52;--accent-text:#B32A52;--dark-card:#1C1F33;--good-deep:#17804A;--bad-deep:#B8322F;--muted:#5F5968}
:root[data-palette="night"]{--accent:#CF347D;--accent-deep:#A3225F;--accent-text:#FF9CC8;--dark-card:#0A0D26;--good-deep:#1E8A57;--bad-deep:#C73838;--muted:#B9B8DA}
:root[data-palette="mint"]{--accent:#087A65;--accent-deep:#05594A;--accent-text:#076B58;--dark-card:#16232B;--good-deep:#17804A;--bad-deep:#B8322F;--muted:#52615F}

/* coloured text uses the text token */
.kick,.qtype,.learn .kick,.node .start,.week .now,.done-screen h1,.brainhero h2,.drop-head .kick{color:var(--accent-text)}
.done-screen h1{color:var(--accent-text)}
.week .now{color:var(--accent-text)}

/* fills that always carry dark text */
.badge,.cycle .badge,.tier-tag,.ladder-row span.on,.gnum,.trackhead .count,.rewards span,.giftbox,.opt.goal .gnum{color:#16232B}
.opt.goal.sel .gnum{color:#fff;background:var(--accent)}
.tier-tag.galaxy{background:var(--dark-card);color:#FFD23F;border-color:var(--dark-card)}

/* surfaces that must stay dark in every palette */
.drop{background:var(--dark-card);color:#EEF2FF;border-color:var(--ink)}
.drop .muted{color:#B9C2D6}
.drop-head,.drop-head .kick{color:#FFD23F}
.drop-foot .tier-tag.galaxy{background:#FFD23F;color:#16232B;border-color:#FFD23F}
.review{background-color:#16232B}

/* white text on fills */
.rolecard,.rolecard .kick,.rolecard h2,.rolecard .blurb,.rolecard .dream,.rolecard .tag{color:#fff}
.rolecard .tag,.rolecard .dream{background:rgba(0,0,0,.18)}
.popcard,.popcard h3,.popcard .muted{color:#fff}
.popcard .btn{color:var(--accent-deep)}
.btn.good{background:var(--good-deep)}
.btn.bad,.opt.wrong .letter{background:var(--bad-deep)}
.opt.right .letter{background:var(--good-deep)}
.stat b{color:#16232B}
.stat.xp b{background:var(--accent);color:#fff}
.stat.acc b{background:#7FE0A8}
.stat.cmb b{background:#FFD23F}
.zone.up{color:var(--good-deep)!important}
.zone.down{color:var(--bad-deep)!important}
:root[data-palette="night"] .zone.up{color:#7FE0A8!important}
:root[data-palette="night"] .zone.down{color:#FF9B9B!important}
.setrow.danger{color:var(--bad-deep)}
:root[data-palette="night"] .setrow.danger{color:#FF9B9B}

/* topbar numbers: bright icons, darker numbers */
.chip.streak b{color:#C2410C}
.chip.fuel b{color:#8A6100}
:root[data-palette="night"] .chip.streak b{color:#FFB38A}
:root[data-palette="night"] .chip.fuel b{color:#FFE07A}

/* locked units and small print on tinted surfaces */
.unit.locked h2,.unit.locked p{color:var(--ink)}
.unit.locked p{opacity:1}
.talkbar small{color:var(--ink)}
.sheet.good h3,.sheet.good .sheet-head{color:var(--good-deep)}
.sheet.bad h3,.sheet.bad .sheet-head{color:var(--bad-deep)}
:root[data-palette="night"] .sheet.good h3,:root[data-palette="night"] .sheet.good .sheet-head{color:#7FE0A8}
:root[data-palette="night"] .sheet.bad h3,:root[data-palette="night"] .sheet.bad .sheet-head{color:#FF9B9B}
.paywall-hero .muted,.cycle small{color:var(--muted)}
:root,:root[data-palette="cream"]{--accent:#CC2E5D;--accent-deep:#A3214A;--good-deep:#15703F}
:root[data-palette="mint"]{--good-deep:#15703F}
:root[data-palette="night"] .gnum,:root[data-palette="night"] .trackhead .count,:root[data-palette="night"] .giftbox{color:var(--ink)}
:root[data-palette="night"] .opt.goal.sel .gnum{color:#fff}
.streakflame b{color:#7C2D12;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.legal-links{text-align:center;font-size:13px;color:var(--muted);margin:0}
.legal-links a{color:var(--muted)}
.ai-note{font-size:12px;color:var(--muted);text-align:center;margin:0}
a.setrow{text-decoration:none}

/* ================= v8: complete palettes =================
   Each palette defines EVERY colour token, so the system dark-mode block can never mix in.
   The app's look comes from the palette the user picked, not from the OS setting. */
:root,:root[data-palette="cream"]{
  --bg:#FFF8EF; --surface:#FFFFFF; --ink:#1E1B2E; --muted:#5F5968; --line:#F0E4D4;
  --accent:#CC2E5D; --accent-deep:#A3214A; --accent-text:#B32A52; --sun:#FFD23F; --sun-deep:#E0AE12;
  --sky:#E8F3FF; --sky-deep:#9CC8F0; --good:#2FBF71; --good-deep:#15703F; --good-soft:#E4F7EC;
  --bad:#F0544F; --bad-deep:#B8322F; --bad-soft:#FDE7E6; --lock:#E9DED0; --dark-card:#1C1F33; color-scheme:light;
}
:root[data-palette="mint"]{
  --bg:#F3FBF8; --surface:#FFFFFF; --ink:#16232B; --muted:#52615F; --line:#DCEDE7;
  --accent:#087A65; --accent-deep:#05594A; --accent-text:#076B58; --sun:#FF9EC2; --sun-deep:#E0608F;
  --sky:#E3F4EF; --sky-deep:#8FD3C2; --good:#3DBE6B; --good-deep:#15703F; --good-soft:#E3F7EA;
  --bad:#F0544F; --bad-deep:#B8322F; --bad-soft:#FDE6E5; --lock:#DCE6E2; --dark-card:#16232B; color-scheme:light;
}
:root[data-palette="night"]{
  --bg:#0F1233; --surface:#1A1F4A; --ink:#F3F1FF; --muted:#B9B8DA; --line:#2A3066;
  --accent:#CF347D; --accent-deep:#A3225F; --accent-text:#FF9CC8; --sun:#FFD23F; --sun-deep:#E0AE12;
  --sky:#232A63; --sky-deep:#4A56A8; --good:#35D08A; --good-deep:#1E8A57; --good-soft:#163A3A;
  --bad:#FF6B6B; --bad-deep:#C73838; --bad-soft:#3E1F33; --lock:#2C3270; --dark-card:#0A0D26; color-scheme:dark;
}
/* light palettes stay light even when the phone is in dark mode */
:root[data-palette="cream"] body,:root[data-palette="mint"] body{background-color:var(--bg)}
.countdown{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--sky);border:var(--edge);border-radius:16px;padding:10px;box-shadow:0 3px 0 var(--ink)}
.countdown span{font-size:13px;font-weight:700;color:var(--muted)}
.countdown b{font-family:var(--display);font-size:34px;line-height:1;color:var(--accent-text);font-variant-numeric:tabular-nums}
.dealbar{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#FFD23F;color:#16232B;border:var(--edge);border-radius:16px;padding:8px 12px;box-shadow:0 4px 0 var(--ink);cursor:pointer;margin-bottom:10px;animation:wiggle 2.2s ease-in-out infinite}
.dealbar img{width:44px;flex:none}
.dealbar span{display:flex;flex-direction:column;flex:1;min-width:0}
.dealbar b{font-family:var(--display);font-size:16px}
.dealbar small{font-size:13px;font-weight:700}
.dealbar i{font-style:normal;font-variant-numeric:tabular-nums}

/* v9: review fixes */
.ic.end{margin-left:auto;opacity:.6}
.path{overflow-x:clip}
.popcard::before{margin-left:var(--arrow,0)}
.btn[disabled]{opacity:1}
.popcard{left:0}
.popcard::before{margin-left:0;left:calc(50% + var(--arrow,0px))}
.streakflame b{background:#FFB36B;border-radius:14px;padding:0 10px;line-height:1.1}

/* v10: billed price is the biggest price on the paywall (Apple 3.1.2), voice chips while Smol talks */
.billed{display:flex;flex-direction:column;align-items:center;gap:2px;margin:0 0 4px;text-align:center}
.billed b{font-family:var(--display,inherit);font-size:24px;line-height:1.1;color:var(--ink)}
.billed span{font-size:13px;color:var(--muted)}
.pchip:disabled{opacity:.55}
.voice-stage.tease #hear{align-self:center}
.sticky-cta{background:linear-gradient(transparent,var(--bg) 22px);padding-top:28px}

/* v11: one-screen paywall, Bumble style */
.pw{height:calc(100svh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:10px;padding:0 2px;overflow:hidden}
.pw-top{display:flex;align-items:center;gap:10px}
.pw-sp{width:40px}
.pw-tiers{flex:1;display:grid;grid-template-columns:1fr 1fr;background:var(--surface);border:2px solid var(--ink);border-radius:14px;padding:3px;box-shadow:0 3px 0 var(--ink)}
.pw-tiers button{border:0;background:none;border-radius:10px;padding:10px 6px 8px;font:800 14px/1 var(--display);cursor:pointer;color:var(--muted)}
.pw-tiers button.on{background:var(--sun);color:#16232B}
.pw-reason{display:flex;align-items:center;gap:8px;justify-content:center;font-weight:800;font-size:13px;color:var(--accent-text)}
.pw-reason .ic{width:16px;height:16px}
.pw-hero{display:grid;place-items:center;flex:1 1 0;min-height:60px;max-height:190px;overflow:hidden}
.pw-smol{height:100%;max-height:100%;width:auto;object-fit:contain;animation:pwbob 3s ease-in-out infinite}
@keyframes pwbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.pw-perks{overflow:hidden;touch-action:pan-y;user-select:none}
.pw-track{display:flex;transition:transform .45s cubic-bezier(.2,1.2,.4,1)}
.pw-perk{flex:0 0 100%;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:2px 12px}
.pw-ic{width:46px;height:46px;border-radius:14px;border:2px solid var(--ink);background:var(--sun);display:grid;place-items:center;box-shadow:0 3px 0 var(--ink);margin-bottom:6px}
.pw-ic .ic{width:24px;height:24px;color:#16232B}
.pw-perk b{font:800 21px/1.15 var(--display);display:flex;align-items:center;gap:8px}
.pw-perk b em{font:800 11px/1 var(--body);font-style:normal;text-transform:uppercase;letter-spacing:.05em;background:var(--line);color:var(--muted);border-radius:6px;padding:4px 6px}
.pw-perk span{font-size:15px;color:var(--muted)}
.pw-dots{display:flex;justify-content:center;gap:6px;margin-top:10px}
.pw-dots i{width:8px;height:8px;border-radius:4px;background:var(--line);transition:width .3s,background .3s;cursor:pointer}
.pw-dots i.on{width:22px;background:var(--ink)}
.pw-rows{display:flex;flex-direction:column;gap:10px}
.pw-row{position:relative;display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:12px;text-align:left;background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:14px 16px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.pw-row.on{border-color:var(--ink);box-shadow:0 4px 0 var(--ink)}
.pw-row .radio{width:22px;height:22px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center}
.pw-row.on .radio::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--accent)}
.pw-l,.pw-r{display:flex;flex-direction:column;gap:3px}
.pw-r{text-align:right}
.pw-l b,.pw-r b{font:800 18px/1 var(--display)}
.pw-l small,.pw-r small{font-size:12.5px;color:var(--muted);font-weight:700}
.pw-save{position:absolute;top:-11px;right:14px;background:var(--sun);border:1.5px solid var(--ink);border-radius:6px;padding:3px 7px;font:800 11px/1 var(--body);color:#16232B}
.pw-cta{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.pw-billed{text-align:center;font-size:13.5px;color:var(--muted);font-weight:700}
.pw-billed b{display:block;font:800 22px/1.15 var(--display);color:var(--ink)}
.pw-legal{text-align:center;font-size:11.5px;line-height:1.5;color:var(--muted)}
.pw-legal .linkbtn,.pw-legal a{font-size:11.5px;color:var(--muted);text-decoration:underline}
.pw .dealbar{margin:0}
@media (max-height:700px){.pw-hero{max-height:110px}.pw-perk b{font-size:18px}.pw-ic{width:38px;height:38px}.pw-row{padding:11px 14px}}

/* v12: career switcher, unit dividers, upgrade chip */
.trackhead.trackpick{width:100%;text-align:left;cursor:pointer;font:inherit;color:inherit}
.trackhead.trackpick h2{display:flex;align-items:center;gap:8px}
.trackhead.trackpick h2 .ic{width:20px;height:20px;color:var(--accent-text)}
.unitdiv{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:22px 0 6px;padding:10px 14px;border-radius:14px;background:var(--surface);border:2px dashed var(--line);font:800 14px/1.2 var(--display);color:var(--muted)}
.path .unitdiv:first-child{margin-top:4px}
.unitdiv.paylock{cursor:pointer;border-style:solid;border-color:var(--ink)}
.unitdiv .tier-tag{display:inline-flex;align-items:center;gap:4px}
.unitdiv .tier-tag .ic{width:13px;height:13px}
.node.paid .ic{color:var(--accent-text)}
.gemchip{border:var(--edge);background:var(--sun);color:#16232B;cursor:pointer;padding:6px 9px;display:grid;place-items:center}
.gemchip .ic{width:18px;height:18px}
.smolline.upsell{width:100%;border:0;background:none;padding:0;cursor:pointer;text-align:left;font:inherit;color:inherit}
.modal.careersheet .box.careers{text-align:left;max-height:86svh;overflow:auto}
.clist{display:flex;flex-direction:column;gap:8px}
.crow{display:grid;grid-template-columns:1fr auto;grid-template-areas:"t n" "b b";gap:8px 10px;align-items:center;background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:12px 14px;cursor:pointer;font:inherit;color:var(--ink);text-align:left}
.crow.on{border-color:var(--ink);box-shadow:0 4px 0 var(--ink)}
.crow .ctext{grid-area:t;display:flex;flex-direction:column;gap:2px}
.crow .ctext b{font:800 18px/1.1 var(--display)}
.crow .ctext small{font-size:13px;color:var(--muted);font-weight:700}
.crow .cnum{grid-area:n;font:800 13px/1 var(--display);background:var(--sun);color:#16232B;border-radius:8px;padding:5px 8px}
.crow .cbar{grid-area:b;height:8px;border-radius:5px;background:var(--line);overflow:hidden}
.crow .cbar i{display:block;height:100%;background:var(--good)}

/* v13: jobs board */
.jobs-head{display:flex;align-items:baseline;justify-content:space-between;margin:8px 0 10px}
.jobs-head h1{font-size:34px}
.jcount{font:800 13px/1 var(--display);color:var(--muted)}
.jchips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;margin:0 -18px;padding-inline:18px;scrollbar-width:none}
.jchips::-webkit-scrollbar{display:none}
.jchip{flex:0 0 auto;border:2px solid var(--line);background:var(--surface);color:var(--ink);border-radius:12px;padding:8px 12px;font:800 13px/1 var(--display);cursor:pointer}
.jchip.on{border-color:var(--ink);background:var(--sun);color:#16232B;box-shadow:0 3px 0 var(--ink)}
.joblist{display:flex;flex-direction:column;gap:10px;padding-bottom:90px}
.job{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;background:var(--surface);border:var(--edge);border-radius:18px;padding:12px;box-shadow:0 3px 0 var(--ink)}
.jlogo{width:44px;height:44px;border-radius:12px;border:2px solid var(--ink);display:grid;place-items:center;font:800 20px/1 var(--display);background:var(--sky);color:var(--ink)}
.jtext{display:flex;flex-direction:column;gap:2px;min-width:0}
.jtext b{font:800 15.5px/1.25 var(--display)}
.jtext span{font-weight:800;font-size:13.5px;color:var(--ink)}
.jtext small{display:flex;align-items:center;gap:3px;font-size:12px;color:var(--muted);font-weight:700;flex-wrap:wrap}
.jtext small .ic{width:13px;height:13px}
.btn.jbtn{padding:10px 12px 8px;font-size:12.5px;gap:5px;box-shadow:0 3px 0 var(--ink)}
.btn.jbtn .ic{width:13px;height:13px}
.jobs-empty{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;color:var(--muted);font-weight:700;padding:30px 10px}
.jobs-empty img{width:120px}
.btn.jbtn{width:auto}
.crow.lockd{opacity:.75}.crow .cnum .ic{width:14px;height:14px}

/* v14: portfolio review card on the Jobs tab */
.reviewcard{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;width:100%;text-align:left;background:var(--sky);border:var(--edge);border-radius:18px;padding:12px 14px;box-shadow:0 3px 0 var(--ink);margin-bottom:12px;cursor:pointer;font:inherit;color:var(--ink)}
.reviewcard img{width:46px}
.reviewcard b{display:block;font:800 16px/1.2 var(--display)}
.reviewcard small{font-size:12.5px;color:var(--muted);font-weight:700}
.reviewcard .tier-tag{white-space:nowrap}
.field textarea{width:100%;min-height:90px;resize:vertical;font:inherit;border:2px solid var(--line);border-radius:12px;padding:10px;background:var(--surface);color:var(--ink)}
.jlogo.hid{background:var(--line);color:var(--muted)}
.jlogo.hid .ic{width:18px;height:18px}
.jhidden{display:block;width:120px;height:12px;margin:3px 0 2px;border-radius:6px;background:repeating-linear-gradient(90deg,var(--muted) 0 8px,transparent 8px 11px);opacity:.35;filter:blur(1.5px)}
.jnew{font-style:normal;font:800 10.5px/1 var(--body);text-transform:uppercase;letter-spacing:.05em;background:var(--good-soft);color:var(--good-deep);border-radius:5px;padding:3px 5px;margin-left:6px;vertical-align:2px}
.jsec{font:800 12px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:8px 2px 0}

/* v15: a small dot shows while screen recording is on (Apple asks for a visible sign) */
html.rec body::after{content:"";position:fixed;top:calc(env(safe-area-inset-top,0px) + 6px);left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#E5484D;z-index:200;pointer-events:none;box-shadow:0 0 0 2px var(--bg)}
.jlocknote{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:800;color:var(--muted);margin:-4px 2px 10px}
.jlocknote .ic{width:14px;height:14px}