:root{
  --ink:#0f111a; --panel:#171b27; --line:#262c3c; --text:#ccd2e2; --dim:#6b7488;
  --lamp:#f0a83c; --lamp-soft:rgba(240,168,60,.16); --cold:#4a5468; --warn:#e0685c;
  --good:#5cc08a; --good-soft:rgba(92,192,138,.16);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--ink);color:var(--text);font-family:var(--sans)}
body{padding:max(18px,env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom));max-width:520px;margin:0 auto;min-height:100vh}
h1,h2{margin:0;font-weight:600}
a{color:var(--lamp);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input{font:inherit}
:focus-visible{outline:2px solid var(--lamp);outline-offset:2px;border-radius:4px}
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}

header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:26px}
header .day{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--dim)}

.status{text-align:center;padding:6px 0 4px}
.state{font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--cold);transition:color .4s}
.open .state{color:var(--lamp)}
.readout{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:clamp(58px,20vw,94px);line-height:1;letter-spacing:-.045em;font-weight:500;margin:12px 0 6px;transition:color .4s,text-shadow .4s}
.open .readout{color:var(--lamp);text-shadow:0 0 34px var(--lamp-soft)}
.sub{font-size:13px;color:var(--dim);min-height:19px}

.gauge{display:flex;gap:3px;margin:24px 0 6px;height:34px}
.seg{flex:1;border-radius:2px;background:var(--line);transition:background .5s ease}
.seg.on{background:var(--cold)}
.open .seg.on{background:var(--lamp);box-shadow:0 0 10px var(--lamp-soft)}
.gauge-labels{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:.08em}

.act{display:block;width:100%;margin-top:26px;padding:19px;border-radius:3px;border:1px solid var(--lamp);background:var(--lamp);color:#141007;font-family:var(--mono);font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:600}
.act.early{background:none;color:var(--dim);border-color:var(--line)}
.act.confirm{background:none;color:var(--warn);border-color:var(--warn)}
.act:active{transform:scale(.99)}

section{margin-top:34px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:12px}
.cell{background:var(--panel);padding:14px}
.cell .k{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.cell .v{font-family:var(--mono);font-size:23px;margin-top:5px;font-variant-numeric:tabular-nums}

.strip{margin-top:12px;border:1px solid var(--line);background:var(--panel);padding:14px}
.track{position:relative;height:3px;background:var(--line);margin:16px 0 10px}
.fill{position:absolute;inset:0 auto 0 0;background:var(--cold)}
.pin{position:absolute;top:-5px;width:2px;height:13px;background:var(--lamp)}
.ends{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--dim)}

.bars{display:flex;align-items:flex-end;gap:4px;height:64px;margin-top:14px}
.bar{flex:1;background:var(--line);border-radius:1px 1px 0 0;min-height:2px}
.bar.today{background:var(--lamp)}
.bars-x{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--dim);margin-top:6px}

/* SVG line charts */
.chart{margin-top:14px;border:1px solid var(--line);background:var(--panel);padding:12px 10px}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .axis{stroke:var(--line);stroke-width:1}
.chart .target{stroke:var(--cold);stroke-width:1;stroke-dasharray:3 4;fill:none}
.chart .series{stroke:var(--lamp);stroke-width:2;fill:none;stroke-linejoin:round;stroke-linecap:round}
.chart .dot{fill:var(--lamp)}
.chart .empty{fill:var(--dim);font-family:var(--mono);font-size:11px}

/* hourly heatmap */
.heat{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;margin-top:14px}
.heat .h{aspect-ratio:1;border-radius:1px;background:var(--line)}
.heat-x{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--dim);margin-top:6px}

/* forms */
.field{margin-bottom:16px}
label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:7px}
input{width:100%;padding:13px;background:var(--panel);border:1px solid var(--line);border-radius:2px;color:var(--text);font-family:var(--mono);font-size:16px}
select{width:100%;padding:13px;background:var(--panel);border:1px solid var(--line);border-radius:2px;color:var(--text);font-family:var(--mono);font-size:14px;appearance:none;-webkit-appearance:none}
select:focus-visible{outline:2px solid var(--lamp);outline-offset:2px}
.hint{font-size:12px;color:var(--dim);margin-top:6px;line-height:1.5}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.ghost{padding:11px 15px;border:1px solid var(--line);border-radius:2px;font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.ghost.on{color:var(--lamp);border-color:var(--lamp)}
.ghost.danger{color:var(--warn);border-color:rgba(224,104,92,.35)}
.banner{border:1px solid var(--warn);color:var(--warn);padding:12px;font-size:13px;line-height:1.5;margin-bottom:20px}
.boot{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);text-align:center;padding:80px 0}
.hidden{display:none !important}

/* auth pages */
body.auth{display:flex;align-items:center;min-height:100dvh}
.auth .card{width:100%}

/* cravings */
.craving-intensity{display:flex;gap:6px;margin-top:14px}
.craving-intensity button{flex:1;padding:12px 0;border:1px solid var(--line);border-radius:2px;font-family:var(--mono);color:var(--dim);font-variant-numeric:tabular-nums}
.craving-intensity button.sel{border-color:var(--lamp);color:var(--lamp);background:var(--lamp-soft)}
.craving-list{list-style:none;margin:14px 0 0;padding:0}
.craving-list li{display:flex;gap:10px;align-items:baseline;border-top:1px solid var(--line);padding:10px 2px;font-size:13px}
.craving-list li:first-child{border-top:none}
.craving-list .when{font-family:var(--mono);font-size:11px;color:var(--dim);min-width:96px}
.craving-list .pip{font-family:var(--mono);font-size:11px}
.craving-list .resisted{color:var(--good)}
.craving-list .gave{color:var(--warn)}
.craving-list .note{color:var(--text);opacity:.85}

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