:root{
  --bg:#060a18; --ink:#f4f7ff; --dim:#c6cfe6; --mute:#95a1c4;
  --blue:#2f6bff; --blue2:#58a6ff; --cyan:#5de1ff; --green:#39e58c; --amber:#ffc24b; --red:#ff5d6c;
  --card:rgba(14,22,50,.82); --line:rgba(110,160,255,.38);
  --glow:0 1px 0 rgba(255,255,255,.03) inset;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box}
:root{color-scheme:dark;--accent:var(--blue2)}
body[data-page=gym]{--accent:#6ea0ff} body[data-page=health]{--accent:#4fd8a0} body[data-page=routine]{--accent:#ffc24b} body[data-page=deadlock]{--accent:#5de1ff} body[data-page=review]{--accent:#c58bff} body[data-page=improve]{--accent:#ff9f6e}
/* charts */
.chartw{position:relative;margin-top:8px;color:var(--ink)} .chartw .chart{position:absolute;inset:0;width:100%;height:100%;display:block} .grid > .card{min-width:0}
.chartw .yl{position:absolute;left:0;width:5.2%;min-width:30px;text-align:right;font-size:10px;color:var(--mute);transform:translateY(-50%);pointer-events:none}
.chartw .tl{position:absolute;right:1.6%;font-size:10px;color:var(--green);transform:translateY(-100%);pointer-events:none}
.cx{display:flex;justify-content:space-between;font-size:11px;color:var(--dim);margin-top:4px;padding-left:5.2%} .nodata{font-size:12px;color:var(--dim);padding:14px 0;line-height:1.6}
.bars{display:flex;align-items:flex-end;gap:2px;margin-top:8px;position:relative}
.bars i{flex:1;background:linear-gradient(180deg,var(--accent),var(--blue));border-radius:2px 2px 0 0;opacity:.85;min-height:2px}
.bars i.ok{background:linear-gradient(180deg,var(--green),#1f9c5e)} .bars i.bad{background:linear-gradient(180deg,var(--red),#b0333f)} .bars i.mute{opacity:.22}
.bars s{position:absolute;left:0;right:0;height:0;border-top:1px dashed rgba(57,229,140,.55);pointer-events:none}
/* level + badges */
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:10px}
.badge{padding:10px 12px;border-radius:12px;background:rgba(20,30,64,.5);border:1px solid rgba(110,160,255,.18);opacity:.6}
.badge.done{opacity:1;border-color:rgba(57,229,140,.5);background:rgba(57,229,140,.08)}
.badge .bn{font-weight:700;font-size:12.5px} .badge .bh{font-size:10.5px;color:var(--dim);margin-top:2px;line-height:1.4} .badge .bp{font-size:10.5px;color:var(--mute);margin-top:4px}
/* improve tips */
.tips{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.tip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:12px;background:rgba(20,30,64,.5);border:1px solid rgba(110,160,255,.18)}
.tip .t{flex:1 1 240px;font-size:12.5px;line-height:1.55;color:var(--ink);min-width:0} .tip .acts{display:flex;gap:4px;flex-wrap:nowrap;margin-left:auto}
.tip.habit{border-color:rgba(57,229,140,.45)} .tip.off{opacity:.45} .tip.off .h{text-decoration:line-through}
.tip .t{display:flex;flex-direction:column;gap:2px} .tip .h{font-weight:700;font-size:13px;color:var(--ink)} .tip .d{font-size:12px;color:var(--dim);line-height:1.5} .tip .acts .btn{padding:5px 9px;min-width:34px}
.stiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin-top:10px}
.stile{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:rgba(20,30,64,.5);border:1px solid rgba(110,160,255,.18);text-decoration:none;color:var(--ink);min-width:0}
.stile.on{border-color:color-mix(in srgb,var(--accent) 70%,transparent);background:rgba(47,107,255,.14)} .stile .st{display:flex;flex-direction:column;min-width:0} .stile b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .stile small{font-size:10.5px;color:var(--mute)}
details.more{margin-top:8px} details.more summary{cursor:pointer;font-size:11.5px;color:var(--mute);list-style:none} details.more summary::before{content:"▸ "} details.more[open] summary::before{content:"▾ "} details.more p{margin-top:6px}
.btn.sm.on{border-color:rgba(57,229,140,.55);color:var(--green)}
:root[data-theme=light]{color-scheme:light;--bg:#eef2fb;--ink:#0e1530;--dim:#4a5674;--mute:#7d88a6;--card:rgba(255,255,255,.86);--line:rgba(47,107,255,.28);--blue2:#2f6bff;--cyan:#0a8fb8;--green:#15a364;--amber:#b7791f;--red:#d63d4c}
:root[data-theme=light] .blobs{opacity:.18} :root[data-theme=light] .vign{display:none}
:root[data-theme=light] .item{background:rgba(255,255,255,.7);border-color:rgba(47,107,255,.18)} :root[data-theme=light] .tile{background:rgba(255,255,255,.8)}
:root[data-theme=light] input,:root[data-theme=light] select,:root[data-theme=light] textarea{background:#fff} :root[data-theme=light] select option{background:#fff;color:var(--ink)}
:root[data-theme=light] .pwa{background:rgba(238,242,251,.92)} :root[data-theme=light] nav{background:rgba(238,242,251,.6)}
:root[data-theme=light] .modal .box{background:#fff} :root[data-theme=light] .toast{background:#fff;color:var(--ink)}
body.compact main{padding-top:20px} body.compact .card{padding:14px 14px 12px} body.compact .grid{gap:10px} body.compact .card p{font-size:12.5px;line-height:1.5} body.compact .item{padding:8px 12px} body.compact h1{font-size:24px;margin-bottom:14px} body.compact .big{font-size:26px}
.fold{float:right;width:22px;height:22px;border:0;background:none;color:var(--mute);cursor:pointer;font:inherit;margin:-2px -4px 0 8px;opacity:.6}
.fold::before{content:"▾";display:block;transition:transform .15s} .card.folded .fold::before{transform:rotate(-90deg)}
.card.folded > *:not(h3):not(.row:has(h3)){display:none} .card.folded{padding-bottom:14px}
.card.folded > .row > *:not(h3){display:none}
.toast .undo{margin-left:12px;border:1px solid var(--line);background:rgba(47,107,255,.2);color:var(--ink);border-radius:8px;padding:4px 10px;font:inherit;font-size:12px;cursor:pointer}
.pwa.unsynced::after,.brand.unsynced::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--amber)}
.pwa.unsynced::after{top:4px;right:8px} .brand{position:relative} .brand.unsynced::after{top:0;right:-12px}
tr.pb td{animation:pbflash 1.2s ease-out} @keyframes pbflash{0%{background:rgba(57,229,140,.35)}100%{background:rgba(20,30,64,.45)}}
.chip.pb{border-color:rgba(57,229,140,.6);color:var(--green);font-weight:700}
.quick{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
/* chat / energy ticks */
.enrow{display:flex;gap:8px;margin-top:12px}
.enbtn{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 0 8px;border-radius:12px;border:1px solid var(--line);background:rgba(20,30,64,.6);color:var(--ink);font:inherit;cursor:pointer}
.enbtn b{font-size:18px} .enbtn span{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.enbtn:active{transform:scale(.96)} .enbtn.e1{border-color:rgba(255,99,99,.45)} .enbtn.e2{border-color:rgba(255,170,80,.45)} .enbtn.e4{border-color:rgba(110,200,255,.45)} .enbtn.e5{border-color:rgba(57,229,140,.55)}
.today-en{display:flex;align-items:center;gap:8px;margin:-6px 0 16px} .today-en .k{font-size:11px;color:var(--dim);letter-spacing:.08em;text-transform:uppercase;margin-right:4px} .today-en .enbtn{flex:0 0 44px;padding:6px 0} .today-en .enbtn span{display:none}
@media (max-width:560px){.today-en{flex-wrap:wrap} .today-en .enbtn{flex:1}}
.quick .btn{padding:8px 12px;font-size:12.5px}
.rank{display:flex;align-items:baseline;gap:10px}
select option{background:#0a1230;color:var(--ink)}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);-webkit-font-smoothing:antialiased}
body{min-height:100dvh;overflow-x:hidden}
a{color:var(--cyan)}
.blobs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;filter:blur(110px) saturate(.7);opacity:.34}
.blob{position:absolute;border-radius:50%}
.b1{width:70vmax;height:70vmax;left:-20vmax;top:-20vmax;background:radial-gradient(circle,#0a2cff 0%,#0414a8 35%,transparent 70%)}
.b2{width:60vmax;height:60vmax;right:-25vmax;top:10vmax;background:radial-gradient(circle,#0848ff 0%,#06188f 40%,transparent 70%)}
.b3{width:50vmax;height:50vmax;left:-10vmax;bottom:-25vmax;background:radial-gradient(circle,#36d8ff 0%,#0d7ac9 35%,transparent 70%)}
.b4{width:40vmax;height:40vmax;right:10vmax;bottom:-20vmax;background:radial-gradient(circle,#061c7a 0%,transparent 70%)}
.vign{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,0,0,.05) 30%,rgba(0,0,0,.6) 100%)}
.scan{display:none}

.app{position:relative;z-index:1;display:grid;grid-template-columns:220px 1fr;min-height:100dvh}
nav{padding:28px 18px;border-right:1px solid rgba(88,140,255,.18);background:rgba(2,3,10,.35);backdrop-filter:blur(10px)}
.brand{font-weight:700;letter-spacing:.08em;font-size:18px}
.brand small{display:block;color:var(--dim);font-weight:400;font-size:10px;letter-spacing:.2em;margin-top:4px}
.nav{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-direction:column;gap:6px}
.nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--dim);text-decoration:none;font-size:13px;border:1px solid transparent}
.nav a svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6}
.nav a.on{color:var(--ink);background:rgba(47,107,255,.14);border-color:var(--line)}
.navfoot{margin-top:30px;color:var(--mute);font-size:11px;line-height:1.6}
main{padding:36px 40px 120px;max-width:1180px;width:100%;min-width:0}
.eyebrow{font-size:11px;letter-spacing:.22em;color:var(--dim);text-transform:uppercase}
h1{margin:6px 0 22px;font-size:30px;font-weight:700;letter-spacing:.01em;text-shadow:0 0 18px rgba(170,205,255,.35)}
h2{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin:28px 0 12px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));grid-auto-flow:dense}
.card{position:relative;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 20px 18px;box-shadow:var(--glow)}
.card.hot{border-color:rgba(93,225,255,.45);box-shadow:0 0 0 1px rgba(93,225,255,.15)}
.card.dimc{opacity:.55}
.card .ic{width:20px;height:20px;stroke:var(--blue2);fill:none;stroke-width:1.6;margin-bottom:12px;opacity:.8}
.card h3{margin:0 0 10px;font-size:15px;font-weight:700}
.card p{margin:0;color:var(--dim);font-size:13px;line-height:1.7}
.big{font-size:32px;font-weight:700;letter-spacing:-.01em}
.big small{font-size:12px;color:var(--dim);font-weight:400;margin-left:8px;letter-spacing:0}
.ok{color:var(--green)}
.tile{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:14px;background:rgba(14,22,50,.75);border:1px solid rgba(110,160,255,.3);text-decoration:none;color:var(--ink);min-width:0}
.tile .k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.tile .v{font-size:20px;font-weight:700}
.tile .v small{font-size:11px;color:var(--dim);font-weight:400;margin-left:6px}
.tile .s{font-size:11.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;grid-column:1/-1}
.next{display:flex;align-items:center;gap:14px}
.next .t{flex:1;min-width:0}
.next .t b{display:block;font-size:15px;margin-bottom:3px}
.next .t span{color:var(--dim);font-size:12.5px}
.warn{color:var(--amber)} .bad{color:var(--red)} .cy{color:var(--cyan)} .mute{color:var(--mute)}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sp{justify-content:space-between}
.bar{height:6px;border-radius:4px;background:rgba(88,140,255,.15);overflow:hidden;margin-top:10px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--accent))}
.card.hot{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.tab.on,.chip.on{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
h1{color:color-mix(in srgb,var(--ink) 92%,var(--accent))}
.chip{font-size:10.5px;padding:3px 9px;border-radius:999px;border:1px solid rgba(88,140,255,.25);color:var(--dim);white-space:nowrap}
.chip.on{color:var(--ink);background:rgba(47,107,255,.22);border-color:rgba(88,140,255,.4)}
.chip.g{border-color:rgba(57,229,140,.4);color:var(--green)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:10px;border:1px solid rgba(88,140,255,.4);background:rgba(47,107,255,.2);color:var(--ink);font:inherit;font-size:13px;cursor:pointer;text-decoration:none}
.btn.ghost{background:transparent;box-shadow:none;color:var(--dim)}
.btn.danger{border-color:rgba(255,93,108,.5);color:var(--red);background:transparent;box-shadow:none}
.btn.sm{padding:5px 9px;font-size:11px}
.btn:disabled{opacity:.4;cursor:default}
.list{display:flex;flex-direction:column;gap:8px}
.item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:rgba(20,30,64,.6);border:1px solid rgba(110,160,255,.2)}
.item .t{flex:1;font-size:13px;min-width:0}
.item .s{font-size:11px;color:var(--dim)}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.tab{padding:7px 12px;border-radius:9px;border:1px solid rgba(88,140,255,.25);color:var(--dim);font-size:12px;cursor:pointer;background:none;font-family:inherit}
.tab.on{color:var(--ink);border-color:rgba(88,140,255,.45);background:rgba(47,107,255,.2)}
.tab{text-decoration:none}
.tw{overflow-x:auto;margin-top:10px;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{text-align:left;font-weight:500;color:var(--dim);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:6px 8px;border-bottom:1px solid rgba(88,140,255,.2);white-space:nowrap}
td{padding:9px 8px;border-bottom:1px solid rgba(88,140,255,.1);vertical-align:middle}
input,select,textarea{background:rgba(88,140,255,.08);border:1px solid var(--line);border-radius:9px;color:var(--ink);font:inherit;font-size:13px;padding:9px 10px;width:100%}
input.log{background:rgba(255,230,120,.08);border-color:rgba(255,194,75,.35)}
input::placeholder{color:var(--mute)}
input[type=number]{-moz-appearance:textfield}
label.f{display:block;font-size:11px;color:var(--dim);letter-spacing:.08em;text-transform:uppercase;margin:12px 0 5px}
.mini{font-size:11.5px;color:var(--dim)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font-size:11px}
.cal .h{color:var(--mute);text-align:center;padding:4px 0;font-size:10px}
.cal .d{aspect-ratio:1;border-radius:8px;border:1px solid rgba(88,140,255,.12);padding:5px;position:relative;color:var(--dim);cursor:pointer;min-width:0}
.cal .d b{font-weight:500;color:var(--ink)}
.cal .d.u{background:rgba(47,107,255,.28);border-color:var(--line)} .cal .d.l{background:rgba(57,229,140,.18);border-color:rgba(57,229,140,.45)}
.cal .d.nx{outline:1px dashed var(--cyan);outline-offset:-1px}
.cal .d.r{background:rgba(120,134,166,.18);border-color:rgba(120,134,166,.4)}
.meta3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.meta3 input{min-width:0;padding:8px 6px;font-size:12.5px}
.exlist{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.exrow{border:1px solid rgba(110,160,255,.18);border-radius:12px;padding:10px 12px;background:rgba(20,30,64,.45)}
.exrow.pb{animation:pbflash 1.2s ease-out}
.exhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.exhead .exname{font-weight:700}
.exhead .exttl{display:flex;flex-direction:column;gap:1px;min-width:0}
.exhead .exsets{font-size:12px;font-weight:600;color:var(--cyan);letter-spacing:.02em}
.exhead .mv{margin-left:auto;display:flex;gap:2px;align-items:center}
.exhead .mv .btn{padding:3px 7px}
.exbody{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(120px,1fr);gap:10px;align-items:center;margin-top:8px}
.exbody .lastcell{line-height:1.45}
.exbody input{padding:10px 10px;font-size:14px}
.exrow.dragging{opacity:.4} .exrow.over{border-top:2px solid var(--cyan)}
@media (max-width:560px){ .exhead .mini{display:none} .exbody{grid-template-columns:1fr} }
.vrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;align-items:center}
.vsel{width:auto;padding:4px 8px;font-size:11.5px;border-radius:7px}
.copy{cursor:pointer;text-decoration:underline dotted rgba(142,155,184,.6);text-underline-offset:3px}
.cal .d.today b{color:var(--cyan)}
.cal .d small{display:block;font-size:9px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl{position:relative;height:38px;margin-top:12px;border-radius:8px;background:rgba(88,140,255,.08);border:1px solid rgba(88,140,255,.18);overflow:hidden}
.tl .seg{position:absolute;top:6px;height:10px;border-radius:5px}
.tl .seg.med{background:linear-gradient(90deg,var(--blue),rgba(47,107,255,.15))}
.tl .seg.caf{top:20px;background:linear-gradient(90deg,var(--amber),rgba(255,194,75,.1))}
.tl .seg.cut{top:0;height:100%;width:1px;background:var(--amber);opacity:.6}
.tl .seg.bed{top:0;height:100%;background:rgba(94,120,170,.2);border-left:1px dashed var(--dim)}
.tl .now{position:absolute;top:0;bottom:0;width:1px;background:#fff;box-shadow:0 0 8px #fff}
.ticks{display:flex;justify-content:space-between;font-size:9.5px;color:var(--mute);margin-top:4px}
.chk{width:18px;height:18px;border-radius:6px;border:1px solid var(--line);display:grid;place-items:center;cursor:pointer;flex:none}
.chk.on{background:var(--blue)}
.chk.on::after{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.spark{display:flex;align-items:flex-end;gap:3px;height:46px;margin-top:10px}
.spark i{flex:1;background:linear-gradient(180deg,var(--cyan),var(--blue));border-radius:3px 3px 0 0;opacity:.85;min-height:3px}
.pwa{position:fixed;left:0;right:0;bottom:0;display:none;z-index:5;background:rgba(8,13,32,.88);backdrop-filter:blur(14px);border-top:1px solid rgba(88,140,255,.25);padding:8px 6px calc(8px + env(safe-area-inset-bottom))}
.pwa a{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--mute);text-decoration:none;font-size:8px;letter-spacing:.02em;padding:4px 0;min-width:0;overflow:hidden;white-space:nowrap}
.pwa a svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6}
.pwa a.on{color:var(--cyan)}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);z-index:20;background:rgba(6,12,34,.95);border:1px solid var(--line);border-radius:10px;padding:10px 16px;font-size:12.5px;opacity:0;transition:.25s;pointer-events:none;box-shadow:var(--glow);max-width:90vw}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);display:grid;place-items:center;padding:16px}
.modal .box{width:min(520px,100%);max-height:90dvh;overflow:auto;background:rgba(6,12,34,.97);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--glow)}
.modal h3{margin:0 0 12px;font-size:16px}
.sync{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--mute);margin-right:6px;vertical-align:middle}
.sync.ok{background:var(--green);box-shadow:0 0 8px var(--green)} .sync.bad{background:var(--red)} .sync.busy{background:var(--amber)}
.exname{cursor:pointer;text-decoration:underline dotted rgba(142,155,184,.6);text-underline-offset:3px}
.timer{font-variant-numeric:tabular-nums}
.muscles{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.muscles span{font-size:9.5px;padding:1px 6px;border-radius:999px;background:rgba(88,140,255,.12);color:var(--dim)}
.hi{width:28px;height:28px;border-radius:7px;border:1px solid var(--line);object-fit:cover;background:#0a1230;flex:none}
.hero{width:28px;height:28px;border-radius:7px;background:rgba(47,107,255,.2);border:1px solid var(--line);display:grid;place-items:center;font-size:9px;font-weight:700;color:var(--blue2);flex:none}
.W{color:var(--green)} .L{color:var(--red)}
.drag{cursor:grab;color:var(--mute);padding:0 4px;user-select:none}
td.mv{white-space:nowrap;width:1%}
td.mv .btn{padding:3px 6px;margin-left:2px}
tr.dragging{opacity:.4} tr.over td{border-top:2px solid var(--cyan)}
@media (max-width:860px){ .drag{display:none} }
body.locked nav,body.locked .pwa{display:none!important}
.gate{min-height:100dvh;display:grid;place-items:center;padding:24px}
.gate .card{width:min(380px,100%)}
.gate .brand{font-size:26px;margin-bottom:4px}
@media (max-width:860px){
  .app{grid-template-columns:1fr} nav{display:none} .pwa{display:flex}
  main{padding:18px 14px 100px} h1{font-size:24px;margin:4px 0 14px} .eyebrow{font-size:10px} .tabs{gap:5px;margin-bottom:10px} .tab{padding:6px 10px;font-size:11.5px} .grid{grid-template-columns:1fr 1fr;gap:10px} .card{padding:16px 14px 14px}
  .card.span{grid-column:1/-1}
}
@media (max-width:560px){ .grid{grid-template-columns:1fr} th.opt,td.opt{display:none}
  /* phone rows with controls: text on its own line, value + buttons on the next, right-aligned */
  body[data-page=routine] .item .t{flex:1 1 calc(100% - 40px)} body[data-page=routine] .item .bar{max-width:none!important}
  body[data-page=routine] .item > .s{margin-left:auto} body[data-page=routine] .item > .row{flex-wrap:nowrap}
  .tip .acts{flex:1 1 auto;justify-content:flex-end}
}
@media (min-width:861px){.card.span{grid-column:span 2}}
/* desktop: use the width, less air (phone layout untouched) */
@media (min-width:1100px){
  main{max-width:1640px;padding:22px 28px 80px}
  h1{font-size:26px;margin:4px 0 14px} .tabs{margin-bottom:10px}
  .grid{gap:12px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
  .card{padding:16px 16px 14px} .card p{line-height:1.6}
  .item{padding:9px 12px} .list{gap:6px} .tiles{gap:8px} .tile{padding:12px 14px}
  .quick{margin-bottom:12px}
  /* pages that are all half-width cards would leave a column empty: go full width */
  body[data-page=improve] .card.span,body[data-page=routine] .card.span,body[data-page=deadlock] .card.span{grid-column:1/-1}
  /* Today: readiness + next on the left, pre-game under them, minimums tall on the right, tiles across */
  body[data-page=today] .grid{grid-template-columns:1fr 1fr 1.25fr;grid-template-areas:"rd nx mn" "pg pg mn" "tl tl tl"}
  body[data-page=today] .card.rd{grid-area:rd} body[data-page=today] .card.nx{grid-area:nx} body[data-page=today] .card.pg{grid-area:pg} body[data-page=today] .card.mn{grid-area:mn} body[data-page=today] .tiles{grid-area:tl}
}

/* colour grading: three surface tiers (card > item > input), the page accent carries the interactive bits (buttons, ticks, tabs, hot cards), green/amber/red are reserved for states. Last in the file so it wins the cascade. */
.card{background:linear-gradient(180deg,rgba(22,32,66,.9),rgba(12,19,44,.86));border-color:rgba(110,160,255,.3)}
.card.hot{border-color:color-mix(in srgb,var(--accent) 60%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent),0 12px 40px -24px color-mix(in srgb,var(--accent) 60%,transparent)}
.card.hot h3{color:color-mix(in srgb,var(--ink) 75%,var(--accent))}
.item{background:rgba(10,17,40,.55);border-color:rgba(110,160,255,.16)} .item.done{opacity:.7}
input,select,textarea{background:rgba(5,9,24,.55);border-color:rgba(110,160,255,.28)} input:focus,select:focus,textarea:focus{outline:none;border-color:color-mix(in srgb,var(--accent) 70%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.btn{background:color-mix(in srgb,var(--accent) 24%,transparent);border-color:color-mix(in srgb,var(--accent) 50%,transparent)} .btn:hover{background:color-mix(in srgb,var(--accent) 34%,transparent)}
.btn.ghost{background:transparent;border-color:rgba(110,160,255,.28)} .btn.ghost:hover{background:rgba(110,160,255,.1)}
.chk.on{background:var(--accent);border-color:var(--accent)}
.tab.on{background:color-mix(in srgb,var(--accent) 22%,transparent);border-color:color-mix(in srgb,var(--accent) 60%,transparent)}
.chip.on{background:color-mix(in srgb,var(--accent) 20%,transparent);border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.chip.g{background:rgba(57,229,140,.1)} .chip.pb{background:rgba(57,229,140,.12)}
.bar{background:rgba(110,160,255,.12)} .bar i{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 70%,var(--blue)),var(--accent))}
.tile{background:linear-gradient(180deg,rgba(20,30,62,.8),rgba(12,19,44,.75))} .tile:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.big.ok,.v.ok{color:var(--green)} .big.warn{color:var(--amber)}
.nav a.on{background:rgba(47,107,255,.16);border-color:rgba(110,160,255,.35)} .pwa a.on{color:var(--accent)}
h1{text-shadow:0 0 22px color-mix(in srgb,var(--accent) 35%,transparent)}
:root[data-theme=light] .card{background:rgba(255,255,255,.88)} :root[data-theme=light] .item{background:rgba(255,255,255,.7)} :root[data-theme=light] input,:root[data-theme=light] select,:root[data-theme=light] textarea{background:#fff} :root[data-theme=light] .tile{background:rgba(255,255,255,.8)}