:root{
    --bg:#0E0E10; --surface:#18181B; --surface2:#212124;
    --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.14);
    --text:#F4F4F3; --muted:#8A8A90;
    --accent:#E5482B; --good:#4CAF7D; --bad:#EF4444;
    --gold:#D4A853; --gold-dim:rgba(212,168,83,.15); --gold-border:rgba(212,168,83,.35);
    --premium-wash:linear-gradient(165deg, rgba(229,72,43,.12) 0%, rgba(212,168,83,.06) 45%, transparent 70%);
    --disp:'Inter',system-ui,sans-serif; --ui:'Inter',system-ui,sans-serif;
    --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;height:100%}
  html.md-native,body.md-native{overscroll-behavior:none;touch-action:manipulation;-webkit-text-size-adjust:100%}
  body{
    background:var(--bg);
    font-family:var(--ui); color:var(--text);
    display:flex; align-items:center; justify-content:center; padding:20px; min-height:100%;
  }
  body.md-native{padding:0}
  #phone{
    width:390px; max-width:100%; height:780px; max-height:94vh;
    background:var(--bg); border:1px solid var(--border); border-radius:28px; overflow:hidden;
    position:relative; box-shadow:0 24px 60px rgba(0,0,0,.5); display:flex; flex-direction:column;
  }
  body.md-native #phone{
    width:100%; height:100vh; height:100dvh; max-height:none;
    border:none; border-radius:0; box-shadow:none;
  }
  #app{flex:1; overflow:hidden; position:relative}
  .screen{position:absolute; inset:0; display:flex; flex-direction:column; padding:20px 18px 16px; overflow-y:auto;
    padding-top:max(20px, env(safe-area-inset-top)); padding-bottom:max(16px, env(safe-area-inset-bottom));
    animation:screenIn .28s cubic-bezier(.22,1,.36,1); -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain}
  @keyframes screenIn{0%{opacity:0; transform:translateY(8px)}100%{opacity:1; transform:none}}
  body.md-native .screen{animation-duration:.22s}
  .screen::-webkit-scrollbar{width:0}
  @media (max-width:440px){
    body{padding:0} #phone{width:100%; height:100vh; height:100dvh; max-height:none; border-radius:0; border:none; box-shadow:none}
  }

  h1,h2{font-family:var(--disp); font-weight:700; margin:0; line-height:1.05}
  button{font-family:inherit}

  /* status bar */
  .statusbar{display:flex; align-items:center; gap:10px; margin-bottom:10px}
  .icon-btn{background:var(--surface); border:1px solid var(--border); color:var(--text); width:36px; height:36px;
    border-radius:10px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0}
  .icon-btn:hover{background:var(--surface2); border-color:var(--border-strong)}
  .icon-btn svg{width:18px; height:18px}
  .flame{display:flex; align-items:center; gap:5px; font-family:var(--mono); font-weight:600; font-size:14px; color:var(--text);
    background:none; border:none; padding:0; cursor:pointer}
  .flame.cold{color:var(--muted)}
  /* .pill combines the username and Free/Premium state into one element
     (see renderHome()) rather than two stacked ones, so it needs its own
     truncation instead of relying on a fixed short label. */
  .pill{margin-left:auto; font-size:12px; font-weight:600; padding:6px 11px; border-radius:20px; border:1px solid var(--border);
    color:var(--muted); cursor:pointer; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .pill.train{color:var(--good); border-color:rgba(76,175,125,.35)}
  .pill.test{color:var(--accent); border-color:rgba(229,72,43,.35)}

  /* rank */
  .rank-badge{background:var(--surface); border:1px solid var(--border); color:var(--text); font-family:var(--mono);
    font-weight:700; font-size:11px; letter-spacing:.02em; padding:6px 11px; border-radius:20px; cursor:pointer; white-space:nowrap}
  .rank-badge:hover{border-color:var(--border-strong)}
  .rank-corner-badge{font-family:var(--mono); font-weight:700; font-size:10px; color:var(--muted); border:1px solid var(--border-strong);
    padding:4px 9px; border-radius:14px; background:var(--surface); white-space:nowrap; flex-shrink:0}
  .rank-slam{display:inline-block; font-family:var(--disp); font-weight:800; font-size:20px; letter-spacing:.05em; text-transform:uppercase;
    background:var(--accent); color:#fff; padding:10px 20px; border-radius:14px; margin-bottom:14px;
    transform:scale(2.2) rotate(-8deg); opacity:0}
  .rank-slam.show{animation:rankSlamIn .5s cubic-bezier(.34,1.56,.64,1) forwards}
  @keyframes rankSlamIn{0%{transform:scale(2.4) rotate(-10deg); opacity:0}60%{transform:scale(.92) rotate(2deg); opacity:1}100%{transform:scale(1) rotate(0deg); opacity:1}}

  /* home */
  .home-head{margin-bottom:22px}
  .home-head .sub{font-size:14px; color:var(--muted); line-height:1.5}
  .insights{display:flex; gap:8px; margin-bottom:18px}
  .insight{flex:1; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px 8px; text-align:center}
  .insight .k{font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
  .insight .v{font-family:var(--mono); font-weight:700; font-size:16px; margin-top:3px}
  .stack{display:flex; flex-direction:column; gap:10px}
  .tile{width:100%; text-align:left; background:var(--surface); color:var(--text); border:1px solid var(--border);
    border-radius:14px; padding:20px; cursor:pointer; transition:background .15s, border-color .15s, transform .12s}
  .tile:hover{background:var(--surface2); border-color:var(--border-strong)}
  .tile:active{transform:scale(.985) translateY(1px)}
  .tile:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
  .tile-title{font-family:var(--disp); font-weight:700; font-size:19px}
  .tile-sub{font-size:13px; color:var(--muted); margin-top:4px}
  .tile.primary{background:var(--accent); border-color:var(--accent)}
  .tile.primary:hover{background:#ff5b3b}
  .tile.primary .tile-sub{color:rgba(255,255,255,.75)}
  .tile.locked{opacity:.55}
  /* Free Feature unlock moment (see renderHome()): fires once, the first
     render that notices the day's eligibility just opened. Finite pulse
     count, not an infinite loop, so the card settles back to normal instead
     of nagging for attention every time the user glances at it. */
  @keyframes unlockPulse{0%{box-shadow:0 0 0 0 rgba(229,72,43,.55)}70%{box-shadow:0 0 0 14px rgba(229,72,43,0)}100%{box-shadow:0 0 0 0 rgba(229,72,43,0)}}
  .tile.unlock-pulse{animation:unlockPulse 1s ease-out 2}
  .ring-wrap{display:flex; flex-direction:column; align-items:center; margin-bottom:18px; cursor:pointer}
  .ring-wrap .motivate{font-size:13px; color:var(--muted); text-align:center; margin-top:2px; max-width:260px}
  .banner{border-radius:12px; padding:12px 14px; margin-bottom:12px; font-size:13px; line-height:1.4}
  .banner.good{background:rgba(76,175,125,.12); border:1px solid rgba(76,175,125,.35)}
  .banner.info{background:var(--surface); border:1px solid var(--border); color:var(--muted)}
  .dev-btn{display:block; margin:16px auto 0; background:none; border:1px dashed var(--border-strong); color:var(--muted);
    font-size:10px; padding:4px 10px; border-radius:6px; cursor:pointer}
  .dev-btn:hover{color:var(--text); border-color:var(--accent)}

  /* rows (lists inside sub-screens) */
  .rows{display:flex; flex-direction:column; gap:8px}
  .row{width:100%; text-align:left; background:var(--surface); color:var(--text); border:1px solid var(--border);
    border-radius:12px; padding:13px 14px; cursor:pointer; display:flex; align-items:center; gap:12px;
    transition:background .15s, transform .12s}
  .row:hover{background:var(--surface2)} .row:active{transform:scale(.985) translateX(1px)}
  .row:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
  .row.locked{opacity:.55}
  .row.danger{color:var(--bad); border-color:rgba(229,72,43,.3)}
  .row-body{flex:1; min-width:0}
  .row-name{font-weight:600; font-size:15px}
  .row-tag{font-size:12px; color:var(--muted); margin-top:1px}
  .row-right{font-family:var(--mono); font-size:11px; color:var(--muted); white-space:nowrap}
  .section-label{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; margin:18px 0 8px}
  .section-label:first-child{margin-top:0}

  /* account */
  .acct-card{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:18px; margin-bottom:18px}
  .acct-card .plan-name{font-family:var(--disp); font-weight:700; font-size:20px}
  .acct-card .plan-sub{font-size:13px; color:var(--muted); margin-top:3px}
  .acct-stats{display:flex; gap:8px; margin-top:14px}
  .acct-stat{flex:1; background:var(--surface2); border-radius:9px; padding:9px 10px; text-align:center}
  .acct-stat .k{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em}
  .acct-stat .v{font-family:var(--mono); font-weight:700; font-size:16px; margin-top:2px}

  /* analytics dashboard */
  .muted-note{font-size:13px; color:var(--muted); line-height:1.5}
  .linechart{width:100%; height:70px; display:block}
  .heatmap{display:flex; gap:3px; overflow-x:auto}
  .hcol{display:flex; flex-direction:column; gap:3px}
  .hcell{width:10px; height:10px; border-radius:2px; background:var(--surface2); flex-shrink:0}
  .hcell.hgood{background:var(--good)} .hcell.hbad{background:var(--bad)}
  .meter{height:8px; background:var(--surface2); border-radius:4px; overflow:hidden; margin-top:12px}
  .meter b{display:block; height:100%; background:var(--accent)}
  .mrow{display:flex; justify-content:space-between; align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px 14px}
  .badge-lvl{font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; border:1px solid; white-space:nowrap; margin-left:10px}
  .badge-lvl.learn,.badge-lvl.beg{color:var(--muted); border-color:var(--border-strong)}
  .badge-lvl.int{color:var(--accent); border-color:rgba(229,72,43,.35)}
  .badge-lvl.adv{color:var(--good); border-color:rgba(76,175,125,.35)}
  .pie-row{display:flex; align-items:center; gap:16px}
  .piechart-wrap{width:110px; height:110px; flex-shrink:0}
  .piechart{width:100%; height:100%; display:block}
  .legend{display:flex; flex-wrap:wrap; gap:8px 14px}
  .legend-item{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted)}
  .legend-dot{width:9px; height:9px; border-radius:50%; flex-shrink:0}
  .focus-bar{height:4px; border-radius:2px; background:var(--surface2); overflow:hidden}
  .focus-bar b{display:block; height:100%; background:var(--accent)}

  /* locked feature preview (blurred premium mockup) */
  .locked-preview{position:relative; border-radius:12px; overflow:hidden; margin:14px 0}
  .locked-preview .blurred{filter:blur(5px); pointer-events:none; user-select:none}
  .locked-overlay{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    background:rgba(14,14,16,.62); border-radius:12px; text-align:center; padding:16px}
  .locked-overlay .lock-ic{font-size:22px}
  .locked-overlay .lock-title{font-weight:700; font-size:14px}
  .locked-overlay .lock-btn{background:var(--accent); color:#fff; border:none; font-weight:600; font-size:13px; padding:9px 20px; border-radius:20px; cursor:pointer; margin-top:2px}

  /* streak calendar (month view) */
  .cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
  .cal-month{font-family:var(--disp); font-weight:700; font-size:15px}
  .cal-nav{background:var(--surface2); border:1px solid var(--border); color:var(--text); width:28px; height:28px; border-radius:8px; cursor:pointer; font-size:15px; display:flex; align-items:center; justify-content:center; flex-shrink:0}
  .cal-nav:hover{border-color:var(--border-strong)}
  .cal-nav:disabled{opacity:.3; cursor:default}
  .cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
  .cal-grid.cal-dow{margin-bottom:4px}
  .cal-dowcell{text-align:center; font-size:10px; color:var(--muted); font-weight:600}
  .cal-cell{aspect-ratio:1; border-radius:6px; background:var(--surface2); display:flex; align-items:center; justify-content:center}
  .cal-cell.cal-empty{background:transparent}
  .cal-cell.cal-good{background:var(--good)}
  .cal-cell.cal-bad{background:var(--bad)}
  .cal-daynum{font-size:10px; color:rgba(255,255,255,.55)}
  .cal-cell.cal-good .cal-daynum, .cal-cell.cal-bad .cal-daynum{color:rgba(255,255,255,.9); font-weight:600}
  .cal-legend{display:flex; gap:14px; margin-top:10px; font-size:11px; color:var(--muted)}
  .cal-legend span{display:inline-flex; align-items:center; gap:5px}
  .cal-legend i{width:9px; height:9px; border-radius:2px; display:inline-block}

  /* topbar (sub-screens) */
  .topbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px}
  .topbar .title{font-family:var(--disp); font-weight:700; font-size:17px}
  .xbtn{background:none; border:1px solid var(--border); color:var(--muted); width:32px; height:32px; border-radius:9px; font-size:15px; cursor:pointer}
  .xbtn:hover{color:var(--text); border-color:var(--border-strong)}

  /* drill */
  .stats{display:flex; gap:7px; margin-bottom:6px}
  .stat{flex:1; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:8px}
  .stat .k{font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
  .stat .v{font-family:var(--mono); font-weight:700; font-size:18px; margin-top:2px}
  .stat .v.timer.rush{color:var(--accent)} .stat .v.combo{color:var(--good)}
  .progress{height:8px; background:var(--surface2); border-radius:4px; margin:14px 0 10px; overflow:hidden}
  .progress b{display:block; height:100%; width:0; background:var(--accent); transition:width .25s}
  .arena{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; min-height:210px; gap:0}
  .qkind{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; flex-shrink:0}
  .prompt{font-family:var(--disp); font-weight:700; font-size:min(46px,12vw); line-height:1.12; text-align:center; flex-shrink:0; max-width:100%; padding:0 8px}
  .prompt.prompt-in{animation:promptIn .22s cubic-bezier(.22,1,.36,1)}
  @keyframes promptIn{0%{opacity:0; transform:translateY(8px) scale(.98)}100%{opacity:1; transform:none}}
  .prompt small{font-family:var(--ui); font-weight:500; font-size:13px; color:var(--muted); display:block; margin-top:8px; line-height:1.35}
  /* Answer lives in its own band under the question so typed digits never collide with the prompt. */
  .answer-slot{position:relative; margin-top:52px; min-height:58px; width:min(280px,80%); display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden}
  .answer{min-height:52px; min-width:170px; width:100%; padding:10px 16px 8px; font-family:var(--mono); font-weight:700; font-size:30px; line-height:1.15; text-align:center; border-bottom:2px solid var(--border); position:relative; z-index:1}
  .answer.empty{color:#4a4a4d}
  .answer.answer-hidden{visibility:hidden}
  .answer .caret{color:var(--accent); animation:blink 1s steps(1) infinite}
  @keyframes blink{50%{opacity:0}}
  /* Pass/Miss replaces the answer in the same band — never overlays the question. */
  .stamp{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--disp); font-weight:700; font-size:36px; text-transform:uppercase;
    padding:2px 16px; opacity:0; pointer-events:none; z-index:2; white-space:nowrap}
  .stamp.show{animation:fadein .5s ease-out forwards}
  .stamp.pass{color:var(--good)} .stamp.fail{color:var(--bad)}
  @keyframes fadein{0%{opacity:0;transform:translateY(6px) scale(.92)}20%{opacity:1;transform:translateY(0) scale(1.04)}40%{transform:scale(1)}75%{opacity:1}100%{opacity:0;transform:translateY(-4px)}}
  .arena.flash-good{animation:arenaFlashGood .35s ease-out}
  .arena.flash-bad{animation:arenaFlashBad .35s ease-out}
  @keyframes arenaFlashGood{0%{box-shadow:inset 0 0 0 0 rgba(76,175,125,0)}30%{box-shadow:inset 0 0 40px 0 rgba(76,175,125,.18)}100%{box-shadow:inset 0 0 0 0 rgba(76,175,125,0)}}
  @keyframes arenaFlashBad{0%{box-shadow:inset 0 0 0 0 rgba(239,68,68,0)}30%{box-shadow:inset 0 0 40px 0 rgba(239,68,68,.16)}100%{box-shadow:inset 0 0 0 0 rgba(239,68,68,0)}}
  .testbar{display:flex; gap:6px; margin-bottom:8px}
  .testbar button{flex:1; font-size:11px; font-weight:600; padding:8px 0; border-radius:8px; border:1px dashed var(--border-strong); background:transparent; color:var(--muted); cursor:pointer}
  .testbar button:hover{color:var(--text); border-color:var(--accent)}
  .keys{display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:12px}
  .key{background:var(--surface); border:1px solid var(--border); color:var(--text); font-family:var(--mono); font-weight:700; font-size:20px; padding:13px 0; border-radius:10px; cursor:pointer;
    transition:background .12s, transform .1s}
  .key{touch-action:manipulation; user-select:none; -webkit-user-select:none}
  .key:hover{background:var(--surface2)} .key:active{background:var(--surface2)} .key:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
  .key.del{color:var(--muted); font-size:17px}
  .key.fire{grid-column:span 3; background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; font-size:15px; text-transform:uppercase; letter-spacing:.04em; padding:14px 0}
  .key.fire:hover{background:#ff5b3b}
  .keys.letters{display:flex; flex-direction:column; gap:7px}
  .keys.letters .krow{display:flex; gap:7px}
  .keys.letters .key{flex:1; font-size:14px; padding:9px 0}

  /* report / generic panels */
  /* Small entrance flourish on the report header — the visual half of the
     "drill complete" moment that pairs with the haptic in finish(). Fast and
     one-shot, not a loop, so it never fights the report being read. */
  @keyframes reportIn{0%{opacity:0; transform:translateY(6px)}100%{opacity:1; transform:translateY(0)}}
  .rpt-head{display:flex; align-items:baseline; justify-content:space-between; border-bottom:1px solid var(--border); padding-bottom:12px; margin-bottom:16px; animation:reportIn .35s ease-out}
  .rpt-head h1{font-size:24px}
  .verdict{font-weight:700; font-size:13px; padding:3px 10px; border:1px solid; border-radius:20px}
  .verdict.ok{color:var(--good); border-color:rgba(76,175,125,.4)} .verdict.bad{color:var(--bad); border-color:rgba(229,72,43,.4)}
  .grid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px}
  .cell{background:var(--surface); border:1px solid var(--border); border-radius:11px; padding:12px 13px}
  .cell .k{font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
  .cell .v{font-family:var(--mono); font-weight:700; font-size:22px; margin-top:3px}
  .cell .v .u{font-size:12px; color:var(--muted)}
  .subhead{font-weight:600; font-size:13px; color:var(--text); margin:4px 0 8px}
  .list{list-style:none; margin:0 0 auto; padding:0; display:flex; flex-direction:column; gap:6px}
  .list li{display:flex; justify-content:space-between; font-family:var(--mono); font-size:13px; padding:9px 12px; background:var(--surface); border:1px solid var(--border); border-radius:9px}
  .list li.hist{flex-direction:column; gap:2px}
  .list li.hist .top{display:flex; justify-content:space-between; width:100%}
  .list li .t{color:var(--muted)}
  .list li.clean{color:var(--good); justify-content:center}
  .tease{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; text-align:center; margin:14px 0}
  .tease .big{font-family:var(--disp); font-weight:700; font-size:17px; margin-bottom:6px}
  .tease p{font-size:13px; color:var(--muted); margin:0 0 4px; line-height:1.5}
  .btnrow{display:flex; gap:8px; margin-top:16px}
  .btn{flex:1; font-weight:600; font-size:14px; padding:13px 0; border-radius:10px; cursor:pointer; border:1px solid var(--border); background:var(--surface); color:var(--text)}
  .btn.primary{background:var(--accent); border-color:var(--accent); color:#fff} .btn:active{transform:translateY(1px)}

  /* premium upgrade */
  .upgrade-hero{background:var(--premium-wash); border:1px solid var(--border); border-radius:16px; padding:20px 18px; margin-bottom:18px}
  .upgrade-brand{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:8px}
  .upgrade-hero h1{font-size:24px; line-height:1.08; margin-bottom:8px}
  .upgrade-hero .sub{font-size:14px; color:var(--muted); line-height:1.5; margin:0}
  .benefit-list{display:flex; flex-direction:column; gap:8px; margin-bottom:20px; animation:benefitIn .4s ease-out}
  @keyframes benefitIn{0%{opacity:0; transform:translateY(6px)}100%{opacity:1; transform:none}}
  .benefit-row{display:flex; align-items:flex-start; gap:12px; padding:11px 12px; background:var(--surface); border:1px solid var(--border); border-radius:11px}
  .benefit-ic{font-size:16px; line-height:1; flex-shrink:0; margin-top:1px}
  .benefit-body{min-width:0}
  .benefit-title{font-weight:600; font-size:13px; line-height:1.3}
  .benefit-desc{font-size:12px; color:var(--muted); margin-top:2px; line-height:1.4}
  .plan-stack{display:flex; flex-direction:column; gap:10px}
  .plan-label{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:4px 0 2px}

  /* pricing */
  .plan{width:100%; text-align:left; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px 16px; cursor:pointer; position:relative; color:var(--text); display:flex; justify-content:space-between; align-items:center; transition:transform .12s, border-color .15s, background .15s}
  .plan:hover{background:var(--surface2); border-color:var(--border-strong)}
  .plan:active{transform:scale(.985)}
  .plan.feat{border-color:var(--gold); background:linear-gradient(135deg, rgba(212,168,83,.08), var(--surface))}
  .plan .pn{font-weight:700; font-size:16px}
  .plan .pnote{font-size:12px; color:var(--muted); margin-top:2px}
  .plan .pday{font-family:var(--mono); font-size:10px; color:var(--gold); margin-top:4px}
  .plan .price{font-family:var(--mono); font-weight:700; font-size:22px; text-align:right; color:var(--text)}
  .plan.feat .price{color:var(--gold)}
  .plan .mrp{font-family:var(--mono); font-size:11px; color:var(--muted); text-decoration:line-through}
  .badge{position:absolute; top:-8px; right:12px; background:var(--accent); color:#fff; font-weight:600; font-size:10px; letter-spacing:.04em; padding:2px 8px; border-radius:10px}
  .plan.feat .badge{background:var(--gold); color:#1a1408}
  .fineprint{font-family:var(--mono); font-size:10px; color:var(--muted); text-align:center; margin-top:12px; line-height:1.6}

  /* cups / trophy ladder */
  .cups-bar{display:flex; flex-direction:column; align-items:stretch; gap:6px; width:100%; margin:-4px 0 14px; padding:12px 14px; cursor:pointer; transition:transform .15s ease, background .15s, border-color .15s; background:var(--surface); border:1px solid var(--gold-border); border-radius:14px; color:inherit; font:inherit; text-align:left}
  .cups-bar:active{transform:scale(.985)}
  .cups-bar-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
  .cups-chip{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-weight:700; font-size:13px; padding:5px 11px; border-radius:20px; background:var(--gold-dim); border:1px solid var(--gold-border); color:var(--gold)}
  .cups-chip.locked{opacity:.65; color:var(--muted); border-color:var(--border); background:var(--surface)}
  .cups-meta{font-size:12px; font-weight:600; color:var(--text)}
  .cups-progress{height:5px; border-radius:99px; background:var(--surface2); overflow:hidden}
  .cups-progress>span{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--accent), var(--gold)); transition:width .35s cubic-bezier(.22,1,.36,1)}
  .cups-next{font-size:11px; color:var(--muted)}
  .cup-delta{display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 14px; border-radius:12px; margin:0 0 14px; font-family:var(--mono); font-weight:700; font-size:15px}
  .cup-delta.win{background:var(--gold-dim); border:1px solid var(--gold-border); color:var(--gold)}
  .cup-delta.loss{background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3); color:var(--bad)}
  .cup-delta.neutral{background:var(--surface); border:1px solid var(--border); color:var(--muted)}
  .cup-slam{display:inline-block; font-family:var(--disp); font-weight:800; font-size:18px; color:var(--gold); transform:scale(1.8); opacity:0}
  .cup-slam.show{animation:rankSlamIn .5s cubic-bezier(.34,1.56,.64,1) forwards}
  .cup-hero{display:flex; align-items:center; gap:16px; padding:18px 16px; border-radius:16px; margin:0 0 16px; border:1px solid var(--border)}
  .cup-hero.win{background:var(--gold-dim); border-color:var(--gold-border)}
  .cup-hero.loss{background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.28)}
  .cup-hero-delta{font-family:var(--disp); font-weight:800; font-size:42px; line-height:1; letter-spacing:-.02em; min-width:4.2rem; text-align:center; transform:scale(1.15); opacity:0}
  .cup-hero-delta.show{animation:rankSlamIn .55s cubic-bezier(.34,1.56,.64,1) forwards}
  .cup-hero.win .cup-hero-delta{color:var(--gold)}
  .cup-hero.loss .cup-hero-delta{color:var(--bad)}
  .cup-hero-meta{flex:1; min-width:0}
  .cup-hero-label{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:2px}
  .cup-hero-outcome{font-weight:700; font-size:15px; color:var(--text); line-height:1.25}
  .cup-hero-vs{font-size:12px; color:var(--muted); margin-top:4px; line-height:1.35}
  .cup-target{display:flex; flex-direction:column; gap:4px; padding:10px 12px; margin-bottom:10px; border-radius:12px; background:var(--premium-wash); border:1px solid var(--gold-border)}
  .cup-target.loading,.cup-target.done{opacity:.85}
  .cup-target-main{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
  .cup-target-k{font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}
  .cup-target-v{font-family:var(--mono); font-weight:800; font-size:20px; color:var(--gold); line-height:1}
  .cup-target-hint{font-size:11px; color:var(--muted); line-height:1.35}
  .cup-target-hint b{color:var(--text); font-weight:700}
  .arena-row{display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-radius:10px; margin-bottom:6px; border:1px solid var(--border); background:var(--surface)}
  .arena-row.current{border-color:var(--gold-border); background:var(--gold-dim)}
  .arena-row.reached .arena-name{color:var(--text)}
  .arena-row.locked .arena-name{color:var(--muted)}
  .arena-name{font-weight:600; font-size:13px}
  .arena-cups{font-family:var(--mono); font-size:11px; color:var(--muted)}

  /* cups leaderboard */
  .lb-you{background:var(--premium-wash); border:1px solid var(--gold-border); border-radius:14px; padding:16px 14px; margin-bottom:8px; text-align:center}
  .lb-you-cups{font-family:var(--mono); font-weight:800; font-size:28px; color:var(--gold); line-height:1.1}
  .lb-you-arena{font-weight:700; font-size:15px; margin-top:4px}
  .lb-you-next{font-size:12px; color:var(--muted)}
  .lb-you-rank{font-size:12px; color:var(--muted); margin-bottom:10px}
  .lb-list{display:flex; flex-direction:column; gap:6px; padding-bottom:56px}
  .lb-row{display:grid; grid-template-columns:36px 1fr auto auto; gap:8px; align-items:center; padding:11px 12px; border-radius:11px; background:var(--surface); border:1px solid var(--border); scroll-margin:88px}
  .lb-row.you{border-color:var(--gold-border); background:var(--gold-dim)}
  .lb-rank{font-family:var(--mono); font-size:12px; color:var(--muted)}
  .lb-name{font-weight:600; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .lb-arena{font-size:11px; color:var(--muted)}
  .lb-cups{font-family:var(--mono); font-weight:700; font-size:13px; color:var(--gold)}
  .lb-gap{text-align:center; font-size:11px; color:var(--muted); padding:4px 0 2px; letter-spacing:.04em}
  .lb-top-btn{position:fixed; right:max(16px, calc(50% - 210px)); bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:20; border:1px solid var(--gold-border); background:var(--surface); color:var(--gold); font-family:var(--mono); font-size:12px; font-weight:700; padding:10px 14px; border-radius:999px; box-shadow:0 8px 24px rgba(0,0,0,.18); cursor:pointer}
  .lb-top-btn[hidden]{display:none}

  /* premium lock chip */
  .prem-chip{font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:3px 7px; border-radius:6px; border:1px solid var(--border-strong); color:var(--muted); flex-shrink:0}
  .row.locked-prem{opacity:.72}
  .linkish{background:none; border:none; padding:0; margin:0; font:inherit; color:var(--accent); cursor:pointer; text-decoration:underline}

  /* config chips */
  .chips{display:flex; gap:7px; flex-wrap:wrap; margin:6px 0 14px}
  .chip{background:var(--surface); border:1px solid var(--border); color:var(--text); font-family:var(--mono); font-size:14px; padding:8px 14px; border-radius:9px; cursor:pointer}
  .chip.on{background:var(--accent); color:#fff; border-color:var(--accent); font-weight:700}
  .cfg-label{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-top:6px}
  .numinput{width:100%; background:var(--surface); border:1px solid var(--border); color:var(--text);
    font-family:var(--mono); font-size:20px; font-weight:700; text-align:center; padding:12px 0;
    border-radius:9px; margin:6px 0 14px; -moz-appearance:textfield; appearance:textfield}
  .numinput:focus{outline:2px solid var(--accent); outline-offset:2px; border-color:var(--accent)}
  .numinput::-webkit-outer-spin-button, .numinput::-webkit-inner-spin-button{margin-left:6px}

  /* sign-in */
  .textinput{width:100%; background:var(--surface); border:1px solid var(--border); color:var(--text);
    font-family:var(--ui); font-size:15px; padding:13px 14px; border-radius:10px}
  .textinput:focus{outline:2px solid var(--accent); outline-offset:2px; border-color:var(--accent)}
  .textinput::placeholder{color:var(--muted)}
  .divider{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; margin:4px 0}
  .divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border)}

  /* toast + modal */
  #toast{position:absolute; left:50%; bottom:22px; transform:translateX(-50%) translateY(20px); background:var(--surface2); border:1px solid var(--border-strong);
    color:var(--text); font-size:13px; padding:10px 15px; border-radius:10px; opacity:0; transition:.3s; pointer-events:none; max-width:86%; text-align:center; z-index:20}
  #toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
  #modal{position:absolute; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; padding:26px; z-index:30}
  #modal.show{display:flex; animation:modalFade .2s ease-out}
  @keyframes modalFade{0%{opacity:0}100%{opacity:1}}
  .sheet{background:var(--bg); border:1px solid var(--border); border-radius:16px; padding:22px 20px; width:100%; max-width:320px;
    animation:sheetIn .28s cubic-bezier(.22,1,.36,1)}
  @keyframes sheetIn{0%{opacity:0; transform:translateY(16px) scale(.97)}100%{opacity:1; transform:none}}
  .sheet h2{font-size:19px; margin:0 0 10px}
  .sheet p{font-size:13px; color:var(--muted); line-height:1.55; margin:0 0 16px}
  @media (prefers-reduced-motion:reduce){
    .stamp.show{animation:none;opacity:1}
    .done-tick,.done-rule,.done-mark h1,.done-mark p{animation:none}
    .done-tick{stroke-dashoffset:0}
    .done-rule{transform:none}
    .caret{animation:none}
    .rank-slam.show{animation:none;opacity:1;transform:none}
    .tile.unlock-pulse{animation:none}
    .rpt-head{animation:none}
    .screen,.prompt.prompt-in,.sheet,#modal.show,.arena.flash-good,.arena.flash-bad{animation:none}
  }

  /* rooms */
  .room-card{width:100%; text-align:left; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px; cursor:pointer; display:block}
  .room-card:hover{background:var(--surface2); border-color:var(--border-strong)}
  .room-card-head{font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
  .room-card-task{font-weight:600; font-size:14px; margin-top:6px}
  .room-card-sub{font-size:13px; color:var(--muted); margin-top:4px}
  .room-card-mystate{font-size:13px; margin-top:8px; display:flex; align-items:center; gap:6px}
  .room-dots{display:flex; gap:6px; margin-top:10px}
  .room-dot{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; font-size:12px; background:var(--surface2); flex-shrink:0}
  .room-dot-good{background:rgba(76,175,125,.18); color:var(--good)}
  .room-dot-wait{background:rgba(229,72,43,.12); color:var(--accent)}
  .room-dot-declared{background:var(--surface2); color:var(--muted)}
  .room-dot-bad{background:rgba(239,68,68,.15); color:var(--bad)}
  .room-dot-today{background:var(--surface2); color:var(--text); border:1px dashed var(--border-strong)}
  .room-dot-future{background:transparent; color:var(--muted)}
  .room-pending{margin-top:10px; font-size:13px; font-weight:700; color:var(--accent)}
  .room-banner-loud{background:rgba(229,72,43,.12); border:1px solid rgba(229,72,43,.35); color:var(--text)}

  .room-grid-wrap{overflow-x:auto}
  .room-grid{display:grid; gap:4px; grid-auto-rows:30px; min-width:320px}
  .room-grid-row{display:contents}
  .room-grid-name{display:flex; align-items:center; gap:5px; padding:2px 4px; overflow:hidden}
  .room-grid-cell{position:relative; width:100%; height:100%; border-radius:6px; border:none; background:var(--surface2); display:flex; align-items:center; justify-content:center; font-size:12px; cursor:pointer; color:var(--text); padding:0}
  .room-grid-cell[data-reactions]:not([data-reactions="0"])::after{content:attr(data-reactions); position:absolute; top:-4px; right:-4px; background:var(--accent); color:#fff; font-family:var(--mono); font-size:8px; font-weight:700; min-width:13px; height:13px; padding:0 2px; border-radius:7px; display:flex; align-items:center; justify-content:center; line-height:1}
  .room-grid-headercell{font-family:var(--mono); font-size:9px; color:var(--muted); background:transparent; cursor:default}
  .room-grid-today{outline:1px solid var(--accent); outline-offset:-1px}

  .room-declare-link{display:block; margin:10px auto 0; background:none; border:1px dashed var(--border-strong); color:var(--muted);
    font-size:11px; padding:6px 12px; border-radius:8px; cursor:pointer}
  .room-declare-link:hover{color:var(--text); border-color:var(--accent)}
  .room-declare-link:disabled{opacity:.5; cursor:default}
  .room-card-declare{display:block; margin-top:8px; background:none; border:none; color:var(--muted); font-size:12px; padding:2px 0; cursor:pointer; text-decoration:underline; text-underline-offset:2px}
  .room-card-declare:hover{color:var(--text)}

  .room-submit-banner{border-radius:12px; padding:14px; margin-bottom:16px; border:1px solid var(--border)}
  .room-submit-banner.good{background:rgba(76,175,125,.12); border-color:rgba(76,175,125,.35)}
  .room-submit-banner.warn{background:rgba(229,72,43,.1); border-color:rgba(229,72,43,.3)}
  .room-submit-head{font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
  .room-submit-sub{font-weight:600; font-size:14px; margin-top:4px}
  .room-submit-verdict{font-size:13px; margin-top:6px; color:var(--text)}

  .room-reaction-row{display:flex; gap:6px; margin-top:10px; flex-wrap:wrap}
  .room-reaction-chip{background:var(--surface2); border:1px solid var(--border); color:var(--text); font-size:13px; padding:6px 10px; border-radius:20px; cursor:pointer}
  .room-reaction-chip.on{background:rgba(229,72,43,.18); border-color:var(--accent)}
  .room-onboard-illustration{font-size:40px; text-align:center; margin:10px 0 18px}

  .room-review-row{display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border)}
  .room-review-row:last-child{border-bottom:none}
  .room-review-row-body{flex:1; min-width:0}
  .room-review-row-name{font-weight:600; font-size:13px}
  .room-review-row-verdict{font-size:12px; color:var(--muted); margin-top:1px}

  .room-avatar{display:inline-flex; align-items:center; justify-content:center; border-radius:50%; color:#fff; font-weight:700; flex-shrink:0}
  .room-avatar-anon{background:var(--surface2); color:var(--muted)}

  .room-grid-name-text{font-size:11px; color:var(--muted); min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .room-grid-myreactions{position:absolute; top:-7px; right:-4px; font-size:9px; line-height:1; background:var(--surface); border-radius:8px; padding:1px 2px}

  .room-feed{display:flex; flex-direction:column; gap:10px; margin-bottom:18px}
  .room-feed-item{display:flex; gap:10px}
  .room-feed-item-body{flex:1; min-width:0}
  .room-feed-item-text{font-size:13px; line-height:1.4}
  .room-feed-item-time{color:var(--muted); font-size:12px}
  .room-feed-react-row{display:flex; gap:5px; margin-top:5px}
  .room-feed-react-chip{background:var(--surface2); border:1px solid var(--border); color:var(--text); font-size:12px; padding:3px 7px; border-radius:14px; cursor:pointer}
  .room-feed-react-chip.on{background:rgba(229,72,43,.18); border-color:var(--accent)}
  .room-feed-react-chip:disabled{opacity:.5; cursor:default}

  /* Dev harness panel — collapsed chip by default so it never covers X / FIRE.
     localhost + ?dev=1 only (js/rooms/dev-panel.js). */
  #dev-room-panel{position:fixed; bottom:16px; left:16px; z-index:999; width:auto;
    background:transparent; border:none; padding:0; font-family:var(--mono);
    max-height:calc(100vh - 32px)}
  #dev-room-panel .dev-room-panel-toggle{background:var(--surface); border:1px solid var(--accent); color:var(--accent);
    font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.08em; padding:8px 12px; border-radius:999px; cursor:pointer}
  #dev-room-panel .dev-room-panel-body{display:none; width:200px; margin-top:8px; background:var(--surface); border:1px solid var(--accent);
    border-radius:12px; padding:12px; box-shadow:0 12px 30px rgba(0,0,0,.5); overflow:auto; max-height:min(360px, calc(100vh - 72px))}
  #dev-room-panel:not(.collapsed) .dev-room-panel-body{display:block}
  #dev-room-panel:not(.collapsed) .dev-room-panel-toggle{border-radius:10px; padding:6px 10px}
  @media (min-width: 900px){
    #dev-room-panel{top:16px; right:16px; bottom:auto; left:auto}
  }
  .dev-room-panel-head{font-size:11px; font-weight:700; letter-spacing:.08em; color:var(--accent); margin-bottom:6px}
  .dev-room-panel-status{font-size:12px; color:var(--muted); margin-bottom:10px; line-height:1.4}
  .dev-room-panel-btn{display:block; width:100%; margin-top:6px; background:var(--surface2); border:1px solid var(--border-strong);
    color:var(--text); font-size:12px; padding:8px; border-radius:8px; cursor:pointer; font-family:var(--ui)}
  .dev-room-panel-btn:hover{border-color:var(--accent)}
  .dev-room-panel-btn:disabled{opacity:.5; cursor:default}
  .dev-room-panel-reset{color:var(--bad); border-color:rgba(239,68,68,.35)}

  .done-mark{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}
  .done-word{display:flex; align-items:center; gap:10px}
  .done-word svg{width:28px; height:28px; overflow:visible}
  .done-tick{fill:none; stroke:var(--accent); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:32; stroke-dashoffset:32; animation:drawTick .36s ease-out .15s forwards}
  .done-rule{width:148px; height:2px; margin-top:16px; background:var(--accent); transform:scaleX(0); transform-origin:left center; animation:doneRule .45s cubic-bezier(.22,1,.36,1) forwards}
  .done-mark h1{margin:0; font-size:34px; animation:doneTitle .32s ease-out both}
  .done-mark p{margin:10px 0 0; color:var(--muted); font-size:15px; animation:doneTitle .32s ease-out .28s both}
  .done-mark.instant .done-tick{animation:none; stroke-dashoffset:0}
  .done-mark.instant .done-rule{animation:none; transform:none}
  .done-mark.instant h1,.done-mark.instant p{animation:none}
  @keyframes drawTick{to{stroke-dashoffset:0}}
  @keyframes doneRule{to{transform:scaleX(1)}}
  @keyframes doneTitle{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
  .screen.with-tabs{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
  .signin-screen{justify-content:flex-start; padding-top:28px}
  #app>.tabbar{position:absolute; left:0; right:0; bottom:0; z-index:6; display:grid; grid-template-columns:repeat(3,1fr);
    background:var(--bg); border-top:1px solid var(--border); padding:6px 8px calc(8px + env(safe-area-inset-bottom))}
  .tab{background:none; border:none; color:var(--muted); font:inherit; font-size:13px; font-weight:600; padding:12px 0; cursor:pointer}
  .tab.on{color:var(--accent)}
  .tab.on.calm{color:var(--text)}
  .page-title{font-size:28px; margin:4px 0 8px}
  .page-sub{font-size:14px; color:var(--muted); line-height:1.4; margin:0 0 8px}
  .statusbar .grow{flex:1}
  .chip-btn{background:var(--surface); border:1px solid var(--border); color:var(--text); font:inherit; font-size:12px; font-weight:600;
    border-radius:999px; padding:7px 10px; cursor:pointer}
  .chip-btn.gold{color:var(--gold)}
  .today{flex:1; display:flex; flex-direction:column; justify-content:center; padding:12px 2px 8px}
  .today .kicker{margin:0 0 8px; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
  .today h1{font-size:34px}
  .today.done{justify-content:flex-start; padding-top:8px}
  .done-secs{width:100%; margin-top:12px; display:flex; flex-direction:column; gap:6px}
  .done-sec{display:flex; justify-content:space-between; gap:12px; font-size:13px; color:var(--muted)}
  .done-sec span:first-child{color:var(--text)}
  .prem-nudge{width:100%; margin-top:22px; text-align:left}
  .prem-nudge p{margin:0 0 12px; font-size:14px; line-height:1.45; color:var(--muted)}
  .today.done .start{margin-top:22px}
  .today.done .bye{margin-top:10px}
  .unlock-rule,button.unlock-rule{width:100%; margin:14px 0 0; padding:12px 14px; border:1px solid var(--border-strong); border-radius:12px; background:var(--surface); text-align:left; font:inherit; color:inherit}
  button.unlock-rule{cursor:pointer}
  .unlock-k{font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--accent)}
  .unlock-rule p{margin:6px 0 0; font-size:14px; line-height:1.45; color:var(--text)}
  .unlock-lead{color:var(--text)}
  .unlock-status{color:var(--muted); font-size:13px}
  .today .set{margin:16px 0 0; font-size:17px; line-height:1.45}
  .today .mins{margin:12px 0 0; color:var(--muted); font-size:14px}
  .today .start{margin-top:22px; width:100%; background:var(--accent); color:#fff; border:0; border-radius:14px; padding:16px;
    font:inherit; font-size:16px; font-weight:600; cursor:pointer}
  .today .after,.today .rule,.today .bye,.today-note{margin:14px 0 0; font-size:14px; line-height:1.45; color:var(--muted)}
  .today .result-stats{margin:16px 0 0; font-size:22px; font-weight:600}
  .today .dot{color:var(--muted); font-weight:400}
  .today .cup-line{margin:8px 0 0; color:var(--gold); font-size:16px; font-weight:600}
  .today .textlink,.today-note.link,.upgrade-link button,.block-link{background:none; border:0; padding:0; color:var(--text);
    font:inherit; font-size:14px; font-weight:600; text-decoration:underline; text-underline-offset:3px; cursor:pointer}
  .today .textlink{margin-top:18px; align-self:flex-start}
  .today-room{margin-top:18px; align-self:flex-start; background:none; border:0; padding:0; color:var(--muted); font:inherit; font-size:13px; cursor:pointer}
  .blocks{display:flex; flex-direction:column; gap:8px}
  .block{text-align:left; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px; color:inherit; font:inherit; width:100%}
  .block-k{font-size:12px; color:var(--muted)}
  .block-v{margin-top:2px; font-size:20px; font-weight:600}
  .block p{margin:8px 0 0; font-size:13px; line-height:1.4; color:var(--muted)}
  .block-link{display:inline-block; margin-top:10px}
  .days{display:flex; gap:6px; margin-top:10px}
  .days span{width:10px; height:10px; border-radius:50%; background:#2a2a2e}
  .days span.on{background:var(--accent)}
  .days span.today{background:transparent; box-shadow:inset 0 0 0 1.5px var(--accent)}
  .upgrade-link{text-align:center; margin:16px 0 4px}
  .upgrade-link button{color:var(--gold)}