/* ============================================================
   Runway — Execution OS · desktop, light
   ============================================================ */
:root{
  --bg:#eeeef1; --panel:#f7f7f9; --card:#fff; --ink:#16171b; --ink-2:#65666e; --ink-3:#a2a3ab; --line:#e8e8ea;
  --track-lane:#e4e2d8;
  --volt:#00c46e; --volt-deep:#00a85e; --gold:#f5a623; --gold-soft:#fff6e6;
  --rev:#ff7847; --rev-tint:#fff1ea; --rev-deep:#e8551f;
  --sup:#3b8cff; --sup-tint:#e9f2ff; --sup-deep:#1d68d6;
  --lea:#a06bff; --lea-tint:#f1eaff; --lea-deep:#7b3fe4;
  --amber:#f59e0b; --amber-soft:#fef4e2; --amber-track:#f6e2ba;
  --danger:#ff5f57;
  --shadow-sm:0 1px 2px rgba(20,20,30,.05),0 2px 8px rgba(20,20,30,.05);
  --shadow-md:0 2px 8px rgba(20,20,30,.06),0 14px 34px rgba(20,20,30,.09);
  --shadow-lg:0 12px 40px rgba(20,20,30,.14),0 30px 80px rgba(20,20,30,.16);
  --font:-apple-system,"SF Pro Display","SF Pro Text",BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --r:18px; --r-sm:12px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased;}
html,body{height:100%;background:var(--bg);font-family:var(--font);color:var(--ink);overscroll-behavior:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--volt);outline-offset:2px;border-radius:6px;}
input,textarea,select{font-family:inherit;font-size:14px;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:11px 12px;width:100%;}
input::placeholder,textarea::placeholder{color:var(--ink-3);}
textarea{resize:vertical;line-height:1.45;}
label{font-size:12px;color:var(--ink-2);font-weight:600;display:block;margin-bottom:7px;}
.hint{font-size:11.5px;color:var(--ink-3);margin-top:6px;line-height:1.4;}
.hint.warn{color:var(--amber);}
::-webkit-scrollbar{width:10px;height:10px;} ::-webkit-scrollbar-thumb{background:#d6d6da;border-radius:6px;border:3px solid var(--panel);} ::-webkit-scrollbar-track{background:transparent;}

#app{height:100vh;}

/* ---------- app shell ---------- */
.shell{display:grid;grid-template-columns:224px 1fr 300px;height:100vh;}
.shell.two{grid-template-columns:224px 1fr;}

/* ---------- sidebar ---------- */
.side{background:var(--panel);border-right:1px solid var(--line);padding:20px 13px;display:flex;flex-direction:column;overflow-y:auto;}
.side.dim .side-mid{opacity:.55;transition:opacity .2s;}
.side.dim:hover .side-mid{opacity:1;}
.brand{font-size:16px;font-weight:800;letter-spacing:.01em;padding:0 8px 20px;display:flex;align-items:center;gap:8px;}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--volt);box-shadow:0 0 10px var(--volt);}
.brand .brand-logo{width:22px;height:22px;object-fit:contain;display:block;}
.navitem{display:flex;align-items:center;gap:11px;padding:9px 8px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--ink-2);width:100%;text-align:left;}
.navitem:hover{background:#ececef;}
.navitem.on{background:#e9e9ec;color:var(--ink);}
.navitem .ic{width:16px;height:16px;border-radius:5px;background:var(--ink-3);}
.navitem.on .ic{background:var(--volt);}
.side-sep{height:1px;background:var(--line);margin:14px 4px;}
.side-lab{font-size:10.5px;font-weight:700;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;padding:6px 8px;display:flex;justify-content:space-between;align-items:center;}
.projitem{display:flex;align-items:center;gap:10px;padding:8px;border-radius:9px;font-size:13.5px;font-weight:560;width:100%;text-align:left;color:var(--ink);}
.projitem:hover{background:#ececef;}
.projitem.active{background:rgba(0,196,110,.1);font-weight:680;}
.projitem .pd{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.projitem .ct{margin-left:auto;font-size:11px;color:var(--ink-3);font-weight:650;}
.projitem.add{color:var(--ink-3);font-weight:600;}
.side-mid{display:flex;flex-direction:column;}
.side-foot{margin-top:auto;padding:10px 8px 4px;display:flex;align-items:center;gap:10px;}
.side-foot .av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--volt),#00c4ff);flex-shrink:0;}
.side-foot .nm{font-size:13px;font-weight:650;line-height:1.2;} .side-foot .nm span{display:block;font-size:11px;color:var(--ink-3);font-weight:550;margin-top:1px;}

/* ---------- center column ---------- */
.center{padding:22px 30px 60px;overflow-y:auto;}
.center.narrow{max-width:860px;margin-left:auto;margin-right:auto;width:100%;}
.ch{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px;}
.ch h1{font-size:24px;font-weight:780;letter-spacing:-0.02em;}
.ch h1 span{color:var(--ink-3);font-weight:600;font-size:14px;margin-left:8px;}
.ch h1 span b{color:var(--ink-2);font-weight:700;font-variant-numeric:tabular-nums;}
.ch .filter-wrap{position:relative;}
.filter-btn{font-size:12.5px;color:var(--ink-2);font-weight:600;background:var(--card);padding:8px 13px;border-radius:20px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:7px;}
.filter-btn .pd{width:8px;height:8px;border-radius:50%;}

/* filter chips row */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.fchip{font-size:12.5px;font-weight:650;padding:7px 13px;border-radius:20px;background:var(--card);box-shadow:var(--shadow-sm);color:var(--ink-2);display:flex;align-items:center;gap:7px;border:1.5px solid transparent;}
.fchip .d{width:8px;height:8px;border-radius:50%;}
.fchip.on{background:var(--ink);color:#fff;}
.fchip:not(.on):hover{color:var(--ink);}

/* quote */
.quote{display:flex;align-items:center;gap:13px;background:linear-gradient(120deg,#fff,#fbfbf7);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:14px;padding:14px 17px;margin-bottom:16px;box-shadow:var(--shadow-sm);}
.quote .mark{font-size:32px;font-weight:800;color:var(--gold);line-height:.6;font-family:Georgia,serif;flex-shrink:0;}
.quote .qt{font-size:14.5px;font-weight:560;line-height:1.35;}
.quote .qt cite{display:block;font-size:11.5px;color:var(--ink-3);font-weight:600;font-style:normal;margin-top:4px;}

/* track card */
.track-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 22px;margin-bottom:12px;display:flex;align-items:center;gap:24px;box-shadow:var(--shadow-sm);}
.track-card .svgwrap{flex:1;min-width:0;}
.tc-stats{flex-shrink:0;text-align:right;}
.tc-stats .laps{font-size:34px;font-weight:800;letter-spacing:-0.03em;line-height:1;}
.tc-stats .laps small{font-size:14px;color:var(--ink-3);font-weight:600;}
.tc-stats .mi{font-size:12.5px;color:var(--ink-2);font-weight:600;margin-top:7px;}
.tc-stats .mi b{color:var(--gold);font-size:16px;}
.tc-stats .mo{font-size:11.5px;color:var(--ink-3);font-weight:600;margin-top:3px;}
.runner-dot{transition:none;}

/* money floor */
.floor{border-radius:var(--r-sm);padding:14px 17px;box-shadow:var(--shadow-sm);margin-bottom:18px;border:1px solid var(--line);background:var(--card);}
.floor.under{border-color:var(--amber-track);background:linear-gradient(120deg,#fff,var(--amber-soft));}
.floor.over{border-color:#bfe9cf;background:linear-gradient(120deg,#fff,#f2fbf6);}
.floor.off{opacity:.75;}
.floor-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.floor-top .lhs{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:720;}
.floor-top .pct b{font-size:15px;font-weight:750;}
.floor.under .floor-top .pct b{color:var(--amber);} .floor.over .floor-top .pct b{color:var(--volt-deep);}
.floor-top .pct span{color:var(--ink-3);font-weight:600;font-size:12.5px;}
.floor-bar{height:9px;border-radius:5px;background:var(--bg);overflow:hidden;position:relative;}
.floor-bar i{display:block;height:100%;border-radius:5px;}
.floor.under .floor-bar i{background:linear-gradient(90deg,#f5a623,#f7b94a);}
.floor.over .floor-bar i{background:linear-gradient(90deg,var(--volt),#33d98a);}
.floor-bar .mk{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--ink);opacity:.3;}
.floor .ff{font-size:11.5px;font-weight:560;margin-top:10px;line-height:1.4;}
.floor.under .ff{color:#9a6a12;} .floor.over .ff{color:var(--volt-deep);} .floor.off .ff{color:var(--ink-3);}
.floor .ff b{font-weight:720;}

/* now card */
.now{background:var(--card);border-radius:var(--r);padding:20px;box-shadow:var(--shadow-sm);margin-bottom:20px;border:1.5px solid #ffe4d6;}
.now.empty{border-style:dashed;border-color:var(--line);text-align:center;padding:34px 24px;}
.now.empty h3{font-size:17px;font-weight:700;margin-bottom:8px;} .now.empty p{font-size:13.5px;color:var(--ink-2);line-height:1.5;max-width:46ch;margin:0 auto 16px;}
.now .tagrow{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap;}
.pchip{font-size:11px;font-weight:700;padding:5px 10px;border-radius:16px;display:flex;align-items:center;gap:6px;background:var(--bg);color:var(--ink-2);}
.pchip .d{width:7px;height:7px;border-radius:50%;}
.chip{font-size:11px;font-weight:700;padding:5px 10px;border-radius:16px;}
.chip.rev{color:var(--rev-deep);background:var(--rev-tint);}
.chip.sup{color:var(--sup-deep);background:var(--sup-tint);}
.chip.lea{color:var(--lea-deep);background:var(--lea-tint);}
.chip.rep{color:var(--ink-2);background:var(--bg);}
.now .rn{font-size:11.5px;color:var(--ink-3);font-weight:600;margin-left:auto;}
.now h2{font-size:22px;font-weight:750;letter-spacing:-0.02em;line-height:1.2;margin-bottom:14px;}
.now .goal-feed{display:flex;align-items:center;gap:10px;margin:0 0 14px;}
.now .goal-feed .gf-b{flex:1;} .now .goal-feed .gf-top{display:flex;justify-content:space-between;font-size:11.5px;margin-bottom:5px;} .now .goal-feed .gf-top b{font-weight:650;} .now .goal-feed .gf-top span{color:var(--ink-3);font-weight:600;}
.now .goal-feed .gf-track{height:6px;background:var(--bg);border-radius:4px;overflow:hidden;} .now .goal-feed .gf-fill{height:100%;background:var(--rev);border-radius:4px;}
.now-grid{display:flex;gap:16px;align-items:flex-end;}
.now .fa{flex:1;background:var(--bg);border-radius:var(--r-sm);padding:13px 15px;}
.now .fa .k{font-size:10.5px;color:var(--ink-3);font-weight:700;text-transform:uppercase;margin-bottom:4px;letter-spacing:.03em;}
.now .fa .v{font-size:14.5px;font-weight:560;line-height:1.4;}
.startbtn{border:none;border-radius:var(--r-sm);padding:15px 28px;font-size:15.5px;font-weight:750;color:#fff;background:linear-gradient(135deg,var(--rev),#ff9838);box-shadow:0 8px 20px rgba(255,120,71,.3);white-space:nowrap;transition:transform .1s,filter .15s;}
.startbtn:hover{filter:brightness(1.05);} .startbtn:active{transform:scale(.98);}
.now .est{font-size:12px;color:var(--ink-3);font-weight:600;margin-top:12px;}
.now .est b{color:var(--volt-deep);}
.kbd{font-size:10.5px;color:var(--ink-3);font-weight:600;margin-left:6px;background:var(--bg);padding:2px 7px;border-radius:5px;border:1px solid var(--line);}

/* section + task rows */
.sec{font-size:12.5px;font-weight:700;color:var(--ink-2);margin:6px 2px 12px;display:flex;justify-content:space-between;}
.sec .sub{color:var(--ink-3);font-weight:600;}
.tcard{background:var(--card);border-radius:var(--r-sm);padding:12px 14px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:12px;margin-bottom:8px;transition:border-color .15s;border:1px solid transparent;}
.tcard:hover{border-color:var(--line);}
.tcard .rail{width:4px;align-self:stretch;border-radius:3px;background:var(--ink-3);}
.tcard .tm{font-size:11.5px;font-weight:650;color:var(--ink-3);width:44px;flex-shrink:0;}
.tcard .b{flex:1;min-width:0;} .tcard .b h3{font-size:14.5px;font-weight:640;line-height:1.25;}
.tcard .b .m{font-size:11.5px;color:var(--ink-3);font-weight:550;margin-top:3px;display:flex;gap:7px;align-items:center;flex-wrap:wrap;}
.tcard .b .m .pdot{width:7px;height:7px;border-radius:50%;}
.tcard.done{opacity:.6;} .tcard.done .b h3{text-decoration:line-through;}
.tcard .laps{font-size:10.5px;font-weight:700;color:var(--volt-deep);background:rgba(0,196,110,.1);padding:4px 9px;border-radius:10px;flex-shrink:0;}
.tcard .play{width:32px;height:32px;border-radius:9px;background:var(--bg);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.tcard .play:hover{background:#e9e9ec;}
.tcard .chk{width:24px;height:24px;border-radius:50%;background:var(--volt);display:flex;align-items:center;justify-content:center;flex-shrink:0;}

.add-row{width:100%;border:1.5px dashed #d5d5d8;background:transparent;color:var(--ink-2);padding:13px;border-radius:var(--r-sm);font-size:13.5px;font-weight:600;margin-top:4px;}
.add-row:hover{border-color:var(--ink-3);color:var(--ink);}

/* right rail */
.rail{background:var(--panel);border-left:1px solid var(--line);padding:22px 18px;overflow-y:auto;}
.rail h4{font-size:12px;font-weight:700;color:var(--ink-2);margin-bottom:12px;}
.stat-lg{background:var(--card);border-radius:var(--r-sm);padding:16px;box-shadow:var(--shadow-sm);margin-bottom:11px;}
.stat-lg .k{font-size:11px;font-weight:650;color:var(--ink-3);margin-bottom:6px;}
.stat-lg .v{font-size:28px;font-weight:800;letter-spacing:-0.02em;line-height:1;}
.stat-lg .v small{font-size:14px;color:var(--ink-3);font-weight:650;}
.stat-lg .tr{font-size:11px;font-weight:650;margin-top:7px;}
.tr.good{color:var(--volt-deep);} .tr.bad{color:var(--amber);} .tr.flat{color:var(--ink-3);}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:11px;}
.stat-sm{background:var(--card);border-radius:var(--r-sm);padding:13px;box-shadow:var(--shadow-sm);}
.stat-sm .k{font-size:10.5px;font-weight:650;color:var(--ink-3);margin-bottom:5px;}
.stat-sm .v{font-size:21px;font-weight:780;letter-spacing:-0.02em;}
.stat-sm .u{font-size:10.5px;color:var(--ink-3);font-weight:550;margin-top:2px;}
.alloc{background:var(--card);border-radius:var(--r-sm);padding:15px;box-shadow:var(--shadow-sm);margin-bottom:11px;}
.alloc .k{font-size:11px;font-weight:650;color:var(--ink-3);margin-bottom:11px;}
.alloc-bar{height:11px;border-radius:6px;overflow:hidden;display:flex;background:var(--bg);}
.alloc-bar i{height:100%;}
.alloc-empty{font-size:11.5px;color:var(--ink-3);text-align:center;padding:2px 0;}
.alloc-leg{margin-top:11px;display:flex;flex-direction:column;gap:6px;}
.alloc-leg .li{font-size:11px;color:var(--ink-2);font-weight:600;display:flex;align-items:center;gap:7px;}
.alloc-leg .sw{width:8px;height:8px;border-radius:2px;}
.alloc-leg b{margin-left:auto;color:var(--ink);}
.shelf{background:var(--gold-soft);border:1px solid #f6e2ba;border-radius:var(--r-sm);padding:15px;}
.shelf .sh{font-size:12.5px;font-weight:750;margin-bottom:3px;color:#8a5a00;}
.shelf .cap2{font-size:10.5px;color:#a87b2e;font-weight:550;margin-bottom:12px;line-height:1.4;}
.shelf .opt{background:#fff;border-radius:10px;padding:10px 11px;display:flex;align-items:center;gap:9px;margin-bottom:6px;box-shadow:var(--shadow-sm);}
.shelf .opt .pdot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.shelf .opt .b{flex:1;min-width:0;} .shelf .opt .b h5{font-size:12px;font-weight:620;line-height:1.2;} .shelf .opt .b .m{font-size:9.5px;color:var(--ink-3);margin-top:2px;}
.shelf .opt .add{color:var(--rev-deep);font-size:17px;width:22px;height:22px;border-radius:50%;background:var(--rev-tint);display:flex;align-items:center;justify-content:center;flex-shrink:0;}

/* recovery banner */
.recovery{background:linear-gradient(150deg,#eafaf2,#fff);border:1px solid #bfe9cf;border-radius:var(--r);padding:20px;margin-bottom:18px;}
.recovery .rk{font-size:11px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--volt-deep);margin-bottom:9px;}
.recovery h3{font-size:18px;font-weight:720;margin-bottom:7px;}
.recovery p{font-size:13.5px;color:var(--ink-2);line-height:1.5;margin-bottom:15px;}
.recovery .rbtns{display:flex;gap:10px;}
.recovery .rbtn{padding:11px 18px;border-radius:var(--r-sm);font-size:13.5px;font-weight:650;}
.recovery .rbtn.primary{background:var(--volt);color:#053720;} .recovery .rbtn.ghost{border:1px solid var(--line);color:var(--ink-2);}

/* ---------- FOCUS ---------- */
.focus{background:linear-gradient(180deg,#fbfbf9,#f3f2ee);display:flex;flex-direction:column;height:100vh;}
.focus-top{display:flex;align-items:center;justify-content:space-between;padding:20px 30px 0;}
.focus-top .ex{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--volt-deep);display:flex;align-items:center;gap:7px;}
.focus-top .ex .d{width:8px;height:8px;border-radius:50%;background:var(--volt);box-shadow:0 0 8px var(--volt);}
.focus-top .tags{display:flex;gap:8px;}
.focus-body{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:20px;padding:20px 40px 16px;text-align:center;overflow-y:auto;}
/* task title is CONTEXT — it defers to the timer (the one focal point) */
.focus-head{display:flex;flex-direction:column;align-items:center;gap:9px;max-width:34ch;}
.focus-body h1{font-size:19px;font-weight:680;letter-spacing:-0.01em;line-height:1.3;color:var(--ink);}
.focus-first{font-size:12.5px;color:var(--ink-2);line-height:1.4;display:inline-flex;align-items:center;gap:8px;background:rgba(0,196,110,.09);border-radius:999px;padding:6px 14px;text-align:left;}
.focus-first .ff-lbl{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--volt-deep);flex-shrink:0;}
.focus-track{width:min(360px,66%);}
/* THE focal point */
.focus-timer-wrap{display:flex;flex-direction:column;align-items:center;gap:5px;}
.timer{font-size:74px;font-weight:800;letter-spacing:-0.03em;font-variant-numeric:tabular-nums;line-height:.95;color:var(--ink);}
.timer.over{color:var(--rev-deep);}
.timer.paused{color:var(--ink-3);}
.timer-sub{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
.commit{font-size:12px;color:var(--ink-2);margin-top:5px;}
.commit b{color:var(--ink);font-variant-numeric:tabular-nums;}
.commit.cleared{color:var(--volt-deep);font-weight:600;}
.lap-note{font-size:11px;color:var(--volt-deep);font-weight:700;}
.focus-controls{padding:12px 30px 24px;display:flex;flex-direction:column;gap:8px;max-width:440px;margin:0 auto;width:100%;flex-shrink:0;border-top:1px solid rgba(20,20,30,.06);}
.ctl-row{display:flex;gap:8px;}
.ctl{flex:1;padding:12px;border-radius:11px;font-size:13.5px;font-weight:700;border:1px solid var(--line);background:var(--card);color:var(--ink);box-shadow:var(--shadow-sm);transition:filter .15s,background .15s,border-color .15s;}
.ctl:hover{filter:brightness(.98);}
.ctl.finish{background:var(--volt);color:#053720;border-color:var(--volt);}
.ctl.pause{color:var(--ink-2);}
.ctl-row.sub .ctl{padding:9px;font-size:12px;font-weight:650;box-shadow:none;background:transparent;}
.ctl.stuck{color:#b8860b;border-color:#efd9a3;}
.ctl.stuck:hover{background:#fdf6e6;}
.ctl.switch{color:var(--ink-3);border-color:var(--line);}
.ctl.switch:hover{background:var(--bg);color:var(--ink-2);}
/* switch/justification modal */
.sw-text{width:100%;min-height:120px;margin:14px 0 6px;}
.sw-count{font-size:12px;color:var(--ink-3);font-weight:650;text-align:right;}
.sw-count.ok{color:var(--volt-deep);}
.ghost-btn:disabled{opacity:.5;cursor:default;}
.ghost-btn.armed{border-color:var(--rev);color:var(--rev-deep);}
.kbds{text-align:center;font-size:10.5px;color:var(--ink-3);font-weight:600;margin-top:3px;}
.kbds span{background:var(--card);padding:2px 7px;border-radius:5px;margin:0 3px;border:1px solid var(--line);}

/* ---------- SIGNALS ---------- */
.sig-hero{background:var(--card);border-radius:var(--r);padding:22px;box-shadow:var(--shadow-sm);margin-bottom:14px;}
.sig-hero .k{font-size:12px;font-weight:700;color:var(--ink-2);margin-bottom:8px;}
.sig-hero .v,.sig-card .v,.stat-lg .v,.stat-sm .v,.tc-stats .laps,.mfoot .s b{font-variant-numeric:tabular-nums;}
.sig-hero .v{font-size:46px;font-weight:800;letter-spacing:-0.03em;line-height:1;}
.sig-hero .v small{font-size:18px;color:var(--ink-3);font-weight:650;}
.sig-hero .tr{font-size:13px;font-weight:650;margin-top:9px;}
.sig-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
.sig-card{background:var(--card);border-radius:var(--r);padding:18px;box-shadow:var(--shadow-sm);}
.sig-card .k{font-size:11.5px;font-weight:700;color:var(--ink-2);margin-bottom:7px;}
.sig-card .v{font-size:30px;font-weight:780;letter-spacing:-0.02em;}
.sig-card .v small{font-size:14px;color:var(--ink-3);font-weight:650;}
.sig-card .u{font-size:11.5px;color:var(--ink-3);font-weight:550;margin-top:3px;}
.panel{background:var(--card);border-radius:var(--r);padding:18px;box-shadow:var(--shadow-sm);margin-bottom:14px;}
.panel h4{font-size:13px;font-weight:700;margin-bottom:3px;}
.panel .c{font-size:11.5px;color:var(--ink-3);font-weight:550;margin-bottom:15px;line-height:1.4;}
.mbars{display:flex;align-items:flex-end;gap:6px;height:88px;}
.mbars .b{flex:1;height:100%;background:var(--bg);border-radius:5px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;}
.mbars .b i{width:100%;background:linear-gradient(180deg,#33d98a,var(--volt));border-radius:5px;min-height:2px;}
.mbars .b.today i{background:linear-gradient(180deg,#f7b94a,var(--gold));}
.mx{display:flex;gap:6px;margin-top:7px;} .mx span{flex:1;text-align:center;font-size:9.5px;color:var(--ink-3);font-weight:600;}
.mfoot{display:flex;justify-content:space-between;margin-top:15px;padding-top:14px;border-top:1px solid var(--line);flex-wrap:wrap;gap:10px;}
.mfoot .s b{font-size:18px;font-weight:750;letter-spacing:-0.02em;} .mfoot .s span{display:block;font-size:11px;color:var(--ink-3);font-weight:600;margin-top:1px;}
.prow{display:flex;align-items:center;gap:10px;margin-bottom:9px;}
.prow .pl{font-size:12.5px;width:42%;font-weight:550;}
.prow .pt{flex:1;height:7px;background:var(--bg);border-radius:4px;overflow:hidden;}
.prow .pf{height:100%;background:var(--rev);border-radius:4px;}
.prow .pn{font-size:11.5px;color:var(--ink-3);font-weight:650;width:16px;text-align:right;}
.empty-note{font-size:12.5px;color:var(--ink-3);line-height:1.5;}

/* ---------- PLAN ---------- */
.plan-note{background:var(--sup-tint);border-radius:var(--r-sm);padding:12px 15px;font-size:12.5px;color:var(--sup-deep);font-weight:550;line-height:1.45;margin-bottom:16px;}
.goal{background:var(--card);border-radius:var(--r);padding:15px 16px;box-shadow:var(--shadow-sm);margin-bottom:10px;display:flex;gap:13px;align-items:center;}
.goal .grail{width:4px;align-self:stretch;border-radius:3px;background:var(--rev);}
.goal .gb{flex:1;min-width:0;} .goal .gh{display:flex;align-items:center;gap:8px;margin-bottom:9px;} .goal .gh h3{font-size:15px;font-weight:700;letter-spacing:-0.01em;}
.goal .gt{height:8px;background:var(--bg);border-radius:5px;overflow:hidden;margin-bottom:8px;} .goal .gt i{display:block;height:100%;border-radius:5px;}
.goal .gm{font-size:11.5px;color:var(--ink-3);font-weight:600;display:flex;gap:11px;flex-wrap:wrap;} .goal .gm b{color:var(--ink);}
.goal .adj{display:flex;flex-direction:column;gap:5px;flex-shrink:0;} .goal .adj button{width:32px;height:28px;border-radius:8px;background:var(--bg);font-size:17px;font-weight:600;color:var(--ink);} .goal .adj button:hover{background:#e9e9ec;}
.proj{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow-sm);margin-bottom:12px;overflow:hidden;}
.proj-h{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);}
.proj-h .pd{width:11px;height:11px;border-radius:50%;flex-shrink:0;}
.proj-h h3{font-size:15px;font-weight:740;letter-spacing:-0.01em;}
.proj-h .cnt{margin-left:auto;font-size:11px;color:var(--ink-3);font-weight:650;}
.proj-h .del{font-size:11px;color:var(--ink-3);font-weight:600;padding:4px 8px;border-radius:7px;}
.proj-h .del:hover{color:var(--danger);background:#fff0f0;}
.ptask{padding:12px 16px;display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--line);}
.ptask:last-of-type{border-bottom:none;}
.ptask .b{flex:1;min-width:0;} .ptask .b h4{font-size:14px;font-weight:600;}
.ptask .b .m{font-size:11px;color:var(--ink-3);font-weight:550;margin-top:2px;display:flex;gap:6px;align-items:center;}
.ptask.done .b h4{text-decoration:line-through;color:var(--ink-3);}
.ptask .flag{font-size:10.5px;font-weight:700;padding:6px 11px;border-radius:11px;white-space:nowrap;}
.ptask .flag.today{color:var(--volt-deep);background:rgba(0,196,110,.12);}
.ptask .flag.date{color:var(--ink-2);background:var(--bg);}
.ptask .flag.none{color:var(--ink-3);background:var(--bg);}
.proj-add{padding:12px 16px;font-size:12.5px;font-weight:600;color:var(--ink-2);width:100%;text-align:left;}
.proj-add:hover{color:var(--ink);background:var(--bg);}

/* ---------- modal / sheet ---------- */
.scrim{position:fixed;inset:0;z-index:100;background:rgba(20,20,28,.4);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:24px;animation:fade .18s;}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:var(--card);border-radius:22px;box-shadow:var(--shadow-lg);width:100%;max-width:480px;max-height:90vh;overflow-y:auto;padding:24px;animation:pop .22s cubic-bezier(.2,.9,.3,1);}
@keyframes pop{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
.modal h3{font-size:19px;font-weight:750;margin-bottom:18px;}
.field{margin-bottom:15px;}
.cat-picker,.proj-picker{display:flex;gap:8px;flex-wrap:wrap;}
.cat-opt{padding:11px 8px;border-radius:10px;border:1px solid var(--line);background:var(--card);font-size:13px;font-weight:600;text-align:center;flex:1;min-width:80px;color:var(--ink-2);}
.cat-opt.on-Revenue{border-color:var(--rev);background:var(--rev-tint);color:var(--rev-deep);}
.cat-opt.on-Support{border-color:var(--sup);background:var(--sup-tint);color:var(--sup-deep);}
.cat-opt.on-Learning{border-color:var(--lea);background:var(--lea-tint);color:var(--lea-deep);}
.cat-opt.on-none{border-color:var(--ink-3);background:var(--bg);color:var(--ink);}
.goal-opt,.proj-opt{padding:9px 12px;border-radius:9px;border:1px solid var(--line);background:var(--card);font-size:13px;font-weight:560;color:var(--ink-2);display:flex;align-items:center;gap:7px;}
.goal-opt.on,.proj-opt.on{border-color:var(--volt);background:rgba(0,196,110,.08);color:var(--ink);}
.proj-opt .pd{width:8px;height:8px;border-radius:50%;}
.dur-row{display:flex;gap:8px;flex-wrap:wrap;}
.dur-opt{flex:1;min-width:52px;padding:11px;border-radius:10px;border:1px solid var(--line);background:var(--card);font-size:13px;text-align:center;color:var(--ink-2);font-weight:600;}
.dur-opt.on{border-color:var(--volt);color:var(--volt-deep);background:rgba(0,196,110,.08);}
.modal-actions{display:flex;gap:10px;margin-top:8px;}
.modal-actions .save{flex:1;background:var(--volt);color:#053720;font-weight:700;font-size:15px;padding:14px;border-radius:var(--r-sm);}
.modal-actions .cancel{padding:14px 20px;border-radius:var(--r-sm);border:1px solid var(--line);color:var(--ink-2);font-weight:600;}
.modal-actions .del{padding:14px 18px;border-radius:var(--r-sm);border:1px solid #ffd9d6;color:var(--danger);font-weight:600;}
.num-row{display:flex;gap:10px;} .num-field{flex:1;} .num-field .nl{font-size:11px;color:var(--ink-3);font-weight:600;margin-bottom:6px;display:block;}
.flag-row{display:flex;gap:8px;flex-wrap:wrap;}
.flag-opt{padding:9px 13px;border-radius:9px;border:1px solid var(--line);background:var(--card);font-size:12.5px;font-weight:600;color:var(--ink-2);}
.flag-opt.on{border-color:var(--volt);background:rgba(0,196,110,.08);color:var(--volt-deep);}

/* stuck sheet */
.sheet{background:var(--card);border-radius:22px;box-shadow:var(--shadow-lg);width:100%;max-width:460px;max-height:90vh;overflow-y:auto;padding:22px;animation:pop .22s cubic-bezier(.2,.9,.3,1);}
.sheet h3{font-size:18px;font-weight:730;margin-bottom:5px;}
.sheet .sub{font-size:13px;color:var(--ink-2);margin-bottom:18px;line-height:1.45;}
.reasons{display:grid;gap:7px;}
.reason{text-align:left;padding:13px 15px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card);font-size:14.5px;font-weight:500;display:flex;align-items:center;justify-content:space-between;}
.reason:hover{border-color:var(--ink-3);}
.reason .arrow{color:var(--ink-3);}
.interv .r-echo{font-size:12px;color:var(--amber);font-weight:650;margin-bottom:14px;}
.interv .step{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);}
.interv .step:last-of-type{border-bottom:none;}
.interv .step .n{font-size:12px;color:var(--volt-deep);font-weight:700;padding-top:2px;}
.interv .step .c .h{font-size:14px;font-weight:650;margin-bottom:3px;}
.interv .step .c .p{font-size:13px;color:var(--ink-2);line-height:1.45;}
.interv .step .c .p .money{color:var(--rev-deep);font-weight:650;}
.interv .shrunk{font-size:13.5px;background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--volt);border-radius:10px;padding:11px 13px;margin-top:8px;line-height:1.4;}
.interv-actions{display:flex;flex-direction:column;gap:9px;margin-top:20px;}
.big-start{width:100%;background:var(--volt);color:#053720;font-weight:750;font-size:16px;padding:15px;border-radius:var(--r-sm);}
.ghost-btn{width:100%;background:transparent;border:1px solid var(--line);color:var(--ink-2);padding:13px;border-radius:var(--r-sm);font-size:14px;font-weight:600;}

/* nudge / tally sheet inside finish */
.tally-line{font-size:14px;color:var(--ink-2);line-height:1.5;margin-bottom:14px;} .tally-line b{color:var(--ink);}
.wk-strip{display:flex;gap:5px;} .wk-strip .d{flex:1;text-align:center;} .wk-strip .d .bar{height:34px;background:var(--bg);border-radius:5px;display:flex;align-items:flex-end;overflow:hidden;margin-bottom:4px;} .wk-strip .d .bar i{width:100%;border-radius:5px;} .wk-strip .d.ok i{background:var(--volt);} .wk-strip .d.miss i{background:var(--amber);} .wk-strip .d small{font-size:9.5px;color:var(--ink-3);font-weight:600;}

/* toast */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:14px;font-weight:550;padding:13px 20px;border-radius:999px;z-index:200;box-shadow:var(--shadow-lg);animation:toastin .3s;max-width:90vw;text-align:center;}
@keyframes toastin{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}

@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important;}}
@media (max-width:1080px){ .shell{grid-template-columns:200px 1fr;} .rail{display:none;} }

/* ---------- project settings + delete confirm ---------- */
.proj-settings{width:30px;height:30px;border-radius:8px;color:var(--ink-3);font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.proj-settings:hover{background:var(--bg);color:var(--ink);}
.settings-list{display:flex;flex-direction:column;gap:8px;}
.settings-item{display:flex;align-items:center;gap:13px;padding:13px 14px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card);text-align:left;width:100%;transition:border-color .15s,background .15s;}
.settings-item:hover{border-color:var(--ink-3);background:var(--bg);}
.settings-item.danger:hover{border-color:#ffd9d6;background:#fff5f5;}
.settings-item .si-ic{font-size:17px;flex-shrink:0;}
.settings-item .si-t{font-size:14px;font-weight:640;}
.settings-item .si-d{font-size:12px;color:var(--ink-3);margin-top:2px;}
.settings-item.danger .si-t{color:var(--danger);}
.del-confirm{padding:14px 20px;border-radius:var(--r-sm);background:#f3d0cd;color:#a3352c;font-weight:700;font-size:14px;flex:1;transition:background .15s,color .15s;cursor:not-allowed;}
.del-confirm.armed{background:var(--danger);color:#fff;cursor:pointer;box-shadow:0 6px 16px rgba(255,95,87,.3);}
.del-confirm:disabled{opacity:1;}

/* sidebar gear */
.side-gear{margin-left:auto;width:30px;height:30px;border-radius:8px;color:var(--ink-3);font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.side-gear:hover{background:#ececef;color:var(--ink);}

/* ============================================================
   Auth screen + sync status
   ============================================================ */
.auth-wrap{height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#f4f4f6,#eceef1);padding:24px;}
.auth-loading{font-size:15px;color:var(--ink-3);font-weight:600;}
.auth-card{background:var(--card);border-radius:22px;box-shadow:var(--shadow-lg);width:100%;max-width:400px;padding:34px 30px;}
.auth-brand{display:flex;align-items:center;gap:9px;margin-bottom:22px;}
.auth-brand img{width:26px;height:26px;}
.auth-brand span{font-size:17px;font-weight:800;letter-spacing:.01em;}
.auth-card h1{font-size:23px;font-weight:780;letter-spacing:-0.02em;margin-bottom:6px;}
.auth-sub{font-size:13.5px;color:var(--ink-2);line-height:1.5;margin-bottom:22px;}
.auth-field{margin-bottom:14px;}
.auth-field label{font-size:12px;color:var(--ink-2);font-weight:600;display:block;margin-bottom:6px;}
.auth-field input{width:100%;font-size:15px;padding:12px 13px;border:1px solid var(--line);border-radius:11px;background:var(--card);}
.auth-msg{font-size:12.5px;font-weight:550;padding:10px 12px;border-radius:9px;margin-bottom:14px;line-height:1.4;}
.auth-msg.err{background:#fff0f0;color:#c0392b;border:1px solid #ffd9d6;}
.auth-msg.ok{background:#eafaf2;color:var(--volt-deep);border:1px solid #bfe9cf;}
.auth-btn{width:100%;background:var(--rev);color:#fff;font-weight:750;font-size:15.5px;padding:14px;border-radius:12px;box-shadow:0 8px 20px rgba(255,120,71,.3);transition:filter .15s;}
.auth-btn:hover{filter:brightness(1.05);} .auth-btn:disabled{opacity:.6;}
.auth-switch{text-align:center;font-size:13px;color:var(--ink-2);margin-top:18px;}
.auth-switch button{color:var(--rev-deep);font-weight:700;}
.auth-skip{text-align:center;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);}
.auth-skip button{font-size:12px;color:var(--ink-3);font-weight:600;}
.auth-skip button:hover{color:var(--ink-2);}

.auth-status{font-size:12.5px;font-weight:600;padding:10px 13px;border-radius:10px;}
.auth-status.ok{background:#eafaf2;color:var(--volt-deep);border:1px solid #bfe9cf;}
.auth-status.off{background:var(--bg);color:var(--ink-2);border:1px solid var(--line);}
.auth-status b{font-weight:750;}
.auth-forgot{text-align:center;margin-top:12px;}
.auth-forgot button{font-size:12.5px;color:var(--ink-3);font-weight:600;}
.auth-forgot button:hover{color:var(--rev-deep);}
.ce-icon{ font-size:44px; text-align:center; margin-bottom:4px; }
.ce-hint{ font-size:12px; color:var(--ink-3); text-align:center; margin-top:12px; line-height:1.4; }
.auth-btn:disabled{ opacity:.55; cursor:default; }

/* ---- profile in sidebar footer ---- */
.side-foot{cursor:pointer;border-radius:10px;transition:background .15s;}
.side-foot:hover{background:var(--bg);}
.side-foot .av{overflow:hidden;}
.side-foot .av img{width:100%;height:100%;object-fit:cover;display:block;}
.side-foot .side-gear{margin-left:auto;font-size:15px;color:var(--ink-3);}

/* ---- profile editor in settings panel ---- */
.profile-edit{display:flex;align-items:center;gap:14px;margin:4px 0 14px;}
.pf-av{position:relative;flex-shrink:0;border:none;background:none;padding:0;cursor:pointer;}
.pf-av .av.lg{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--volt),#00c4ff);overflow:hidden;}
.pf-av .av.lg img{width:100%;height:100%;object-fit:cover;display:block;}
.pf-cam{position:absolute;right:-2px;bottom:-2px;background:var(--card);border:1px solid var(--line);border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:11px;}
.pf-fields{flex:1;min-width:0;}
.pf-name-input{width:100%;font-size:15px;font-weight:650;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--card);}
.pf-email{font-size:12px;color:var(--ink-3);margin-top:5px;padding-left:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pf-av-actions{margin:-6px 0 12px;}
.linkbtn{font-size:12px;color:var(--rev-deep);font-weight:650;background:none;}
.linkbtn:hover{text-decoration:underline;}

/* ---- onboarding (first-run tutorial) ---- */
.ob-card{ text-align:left; }
.ob-steps{ display:flex; gap:8px; justify-content:center; margin:2px 0 20px; }
.ob-dot{ width:8px; height:8px; border-radius:50%; background:var(--line); transition:background .2s; }
.ob-dot.on{ background:var(--rev); }
.ob-dot.done{ background:var(--volt); }
.ob-avatar-wrap{ display:flex; justify-content:center; margin-bottom:18px; }
.ob-skip{ text-align:center; margin-top:14px; }
.ob-skip button{ font-size:12.5px; color:var(--ink-3); font-weight:600; }
.ob-skip button:hover{ color:var(--ink-2); }

/* ---- task steps: editor list ---- */
.steps-edit{ display:flex; flex-direction:column; gap:8px; margin-bottom:8px; }
.step-edit-row{ display:flex; align-items:center; gap:8px; }
.step-edit-row .step-grip{ color:var(--ink-3); font-size:14px; user-select:none; }
.step-edit-row .step-input{ flex:1; }
.step-del{ width:32px; height:32px; flex-shrink:0; border-radius:8px; color:var(--ink-3); font-size:13px; background:var(--bg); }
.step-del:hover{ color:var(--danger); background:#fff5f5; }
.add-step{ font-size:13px; font-weight:650; color:var(--sup-deep); padding:4px 2px; }
.add-step:hover{ text-decoration:underline; }

/* ---- task steps: focus checklist ---- */
.focus-steps{ display:flex; flex-direction:column; gap:7px; width:100%; max-width:420px; margin:0 auto; text-align:left; }
.fstep-head{ display:flex; align-items:center; justify-content:space-between; padding:0 2px 1px; }
.fstep-label{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.fstep-prog{ font-size:11px; font-weight:700; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.fstep{ display:flex; align-items:center; gap:11px; padding:10px 13px; border-radius:10px; border:1px solid var(--line); background:var(--card); width:100%; text-align:left; transition:border-color .15s,background .15s; }
.fstep:hover{ border-color:var(--ink-3); }
.fstep-box{ width:19px; height:19px; flex-shrink:0; border-radius:6px; border:2px solid var(--ink-3); display:flex; align-items:center; justify-content:center; }
.fstep.done{ background:var(--bg); }
.fstep.done .fstep-box{ background:var(--volt); border-color:var(--volt); }
.fstep.done .fstep-txt{ text-decoration:line-through; color:var(--ink-3); }
.fstep-txt{ font-size:13.5px; font-weight:560; line-height:1.3; }

/* ---- today's plan progress (Signals rail) ---- */
.planprog{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:13px 15px; margin-bottom:12px; box-shadow:var(--shadow-sm); }
.planprog .k{ font-size:11px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; }
.pp-big{ font-size:19px; font-weight:800; letter-spacing:-0.02em; }
.pp-big span{ color:var(--ink-3); font-weight:600; font-size:13px; }
.pp-bar{ height:8px; border-radius:5px; background:var(--bg); overflow:hidden; margin:9px 0 7px; }
.pp-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--volt),#00c4ff); border-radius:5px; transition:width .3s ease; }
.pp-sub{ font-size:11.5px; color:var(--ink-2); font-weight:600; }
.pp-empty{ font-size:12px; color:var(--ink-3); line-height:1.4; }

/* money floor + plan progress render inline only on mobile (desktop uses the rail) */
.rail-mobile{ display:none; }

/* ---- "Coming up" cards on Today (future / undated tasks) ---- */
.ucard{ display:flex; align-items:center; gap:13px; background:var(--card); border:1px dashed #d3d3da; border-radius:14px; padding:12px 15px; margin-bottom:8px; cursor:pointer; transition:border-color .15s; }
.ucard:hover{ border-color:var(--ink-3); }
.ucard .b{ flex:1; min-width:0; }
.ucard h3{ font-size:14.5px; font-weight:680; }
.ucard .m{ font-size:12px; color:var(--ink-3); font-weight:560; display:flex; align-items:center; gap:6px; margin-top:3px; }
.ucard .m .pdot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.ubadge{ flex-shrink:0; font-size:11px; font-weight:700; padding:5px 10px; border-radius:20px; white-space:nowrap; }
.ubadge.dated{ background:var(--sup-tint); color:var(--sup-deep); }
.ubadge.nodate{ background:var(--bg); color:var(--ink-3); }
.upull{ flex-shrink:0; font-size:12px; font-weight:700; color:var(--volt-deep); background:rgba(0,196,110,.1); padding:7px 12px; border-radius:20px; }
.upull:hover{ background:rgba(0,196,110,.18); }

/* ============================================================
   MOBILE — bottom nav + FAB (hidden on desktop)
   ============================================================ */
.mobilebar{display:none;}
.m-fab{display:none;}
.mtop{display:none;}

@media (max-width:640px){
  /* --- shell: single column, no sidebar/rail --- */
  .shell, .shell.two{grid-template-columns:1fr !important;height:auto;min-height:100vh;}
  .side{display:none !important;}
  .rail{display:none !important;}
  .center, .center.narrow{max-width:100% !important;margin:0 !important;padding:62px 16px 120px !important;}
  .rail-mobile{display:block;margin-bottom:8px;}
  /* logo top bar — the sidebar (which holds the logo on desktop) is hidden on mobile */
  .mtop{display:flex;align-items:center;gap:8px;position:fixed;top:0;left:0;right:0;z-index:60;height:50px;padding:0 16px;background:rgba(238,238,241,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);font-weight:800;font-size:16px;letter-spacing:-0.01em;}
  .mtop img{width:24px;height:24px;object-fit:contain;}

  /* --- header spacing --- */
  .ch{margin-bottom:14px;}
  .ch h1{font-size:26px;}
  .ch h1 span{display:block;margin:2px 0 0 0;font-size:13px;}

  /* --- track full width, taller stroke --- */
  .track-card{padding:14px 16px;border-radius:22px;flex-direction:column;align-items:stretch;gap:8px;}
  .track-card .svgwrap{order:2;}
  .track-card .tc-stats{order:1;text-align:left;display:flex;align-items:baseline;gap:14px;}
  .tc-stats .laps{font-size:30px;}
  .tc-stats .mi{margin-top:0;}

  /* --- now card, big start --- */
  .now{border-radius:22px;padding:18px;}
  .now h2{font-size:21px;}
  .now-grid{flex-direction:column;align-items:stretch;gap:12px;}
  .startbtn{width:100%;padding:17px;font-size:16.5px;border-radius:15px;}
  .now .est .kbd{display:none;}  /* no keyboard hint on mobile */

  /* --- money floor + chips --- */
  .floor{border-radius:15px;}
  .chips{margin-bottom:14px;-webkit-overflow-scrolling:touch;}
  .fchip{padding:8px 14px;}

  /* --- task rows bigger tap targets --- */
  .tcard{padding:13px 14px;border-radius:15px;}
  .tcard .play{width:40px;height:40px;}

  /* --- Signals: single column --- */
  .sig-duo{grid-template-columns:1fr 1fr;}
  .center.narrow .sig-hero .v{font-size:40px;}

  /* --- Plan: full width --- */
  .goal, .proj{border-radius:16px;}

  /* --- FOCUS full-screen fits phone --- */
  .focus{height:100vh;padding:60px 20px calc(24px + env(safe-area-inset-bottom));}
  .focus-body{padding:0 6px;}
  .focus-body h1{font-size:25px;}
  .focus-first{font-size:15px;}
  .timer{font-size:64px;}
  .focus-track{width:100%;}
  .focus-controls{max-width:100%;padding:0;}
  .ctl{padding:17px;}
  .kbds{display:none;}  /* no keyboard hints on phone */

  /* --- modals become bottom sheets --- */
  .scrim{align-items:flex-end;padding:0;}
  .modal, .sheet{max-width:100%;border-radius:22px 22px 0 0;max-height:92vh;padding:22px 20px calc(22px + env(safe-area-inset-bottom));animation:sheetup .28s cubic-bezier(.2,.9,.3,1);}
  @keyframes sheetup{from{transform:translateY(100%)}to{transform:translateY(0)}}

  /* --- BOTTOM TAB BAR --- */
  .mobilebar{
    display:flex;position:fixed;bottom:0;left:0;right:0;z-index:50;
    height:calc(64px + env(safe-area-inset-bottom));
    padding:8px 12px calc(8px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.9);backdrop-filter:blur(20px);
    border-top:1px solid var(--line);
  }
  .mtab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11px;font-weight:650;color:var(--ink-3);}
  .mtab.on{color:var(--volt-deep);}
  .mtab .mic{width:22px;height:22px;background:currentColor;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;}
  .mic-today{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2.4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2.4'/%3E%3C/svg%3E");}
  .mic-signals{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='13' width='3.4' height='7' rx='1' fill='black'/%3E%3Crect x='10.3' y='8' width='3.4' height='12' rx='1' fill='black'/%3E%3Crect x='16.6' y='4' width='3.4' height='16' rx='1' fill='black'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='13' width='3.4' height='7' rx='1' fill='black'/%3E%3Crect x='10.3' y='8' width='3.4' height='12' rx='1' fill='black'/%3E%3Crect x='16.6' y='4' width='3.4' height='16' rx='1' fill='black'/%3E%3C/svg%3E");}
  .mic-plan{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='6' width='12' height='12' rx='2.5' transform='rotate(45 12 12)' fill='none' stroke='black' stroke-width='2.4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='6' width='12' height='12' rx='2.5' transform='rotate(45 12 12)' fill='none' stroke='black' stroke-width='2.4'/%3E%3C/svg%3E");}

  /* --- ADD FAB --- */
  .m-fab{
    display:flex;position:fixed;z-index:51;
    right:18px;bottom:calc(80px + env(safe-area-inset-bottom));
    width:56px;height:56px;border-radius:18px;align-items:center;justify-content:center;
    font-size:30px;font-weight:400;color:#fff;line-height:1;
    background:linear-gradient(135deg,var(--rev),#ff9838);
    box-shadow:0 10px 26px rgba(255,120,71,.42);
  }
  .m-fab.hide{display:none;}
  .m-fab:active{transform:scale(.94);}
}