*{box-sizing:border-box}
:root{
  color-scheme:light dark;
  --bg:#f6f6f4; --card:#ffffff; --ink:#0b0b0b; --ink2:#52514e; --muted:#8a8984; --line:#e2e1dc;
  --fill:#eceae5; --accent:#2a78d6; --on-accent:#ffffff; --good:#008300; --warn:#b45309; --danger:#c0392b;
  --r:14px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#111110; --card:#1c1c1b; --ink:#f0efec; --ink2:#c3c2b7; --muted:#8c8b85; --line:#2f2f2d;
    --fill:#2a2a28; --accent:#3987e5; --good:#5cb85c; --warn:#e0a030; --danger:#e66767;
  }
}
html{background:var(--bg)}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:17px/1.35 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  -webkit-text-size-adjust:100%;
  padding-bottom:calc(130px + env(safe-area-inset-bottom));
}
.top{position:sticky; top:0; z-index:5; background:var(--bg); padding:calc(10px + env(safe-area-inset-top)) 16px 8px; border-bottom:1px solid var(--line)}
.top h1{margin:0; font-size:20px; font-weight:700}
main{padding:12px 16px; max-width:560px; margin:0 auto}
h2{font-size:24px; margin:4px 0}
h3{font-size:18px; margin:0}
p{margin:6px 0}
.sub{color:var(--ink2); font-size:14px; margin:4px 0}
.pad{padding:0 4px 8px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:12px; margin:0 0 12px}
.exhead{display:flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap}
.target{font-weight:600; color:var(--accent); font-variant-numeric:tabular-nums}
.why{font-size:14px; color:var(--ink2); margin:4px 0 6px}
.why.up{color:var(--good)} .why.down{color:var(--danger)} .why.hold{color:var(--warn)}

button{font:inherit; color:inherit; background:none; border:0; padding:0; -webkit-tap-highlight-color:transparent; cursor:pointer}
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 16px; border-radius:12px; background:var(--fill); font-weight:600}
.btn.primary{background:var(--accent); color:var(--on-accent)}
.btn.ghost{background:transparent; border:1px solid var(--line)}
.btn.small{min-height:38px; padding:0 12px; font-size:15px}
.btn.big{font-size:18px; min-height:52px}
.btn.block{width:100%; margin:0 0 12px}
.link{color:var(--accent); min-height:44px; padding:0 8px; font-weight:500}
.link.danger{color:var(--danger)}
.link:disabled{opacity:.35; cursor:default}
.row{display:flex; gap:8px; align-items:center; margin-top:8px}
.row.wrap{flex-wrap:wrap}
.row > select{flex:1; min-width:0}
.actions{display:grid; gap:8px; margin:16px 0}

input,select,textarea{font:inherit; color:inherit; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:8px 10px; min-height:44px; font-size:17px}
select{appearance:none; -webkit-appearance:none; padding-right:28px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat}
textarea{width:100%; resize:vertical}
label{display:block; margin:8px 0}
label > input, label > select{display:block; width:100%; margin-top:4px}

/* Today */
.dayhead{margin:4px 0 12px}
.dayhead select{display:inline-block; width:auto; margin-left:6px}
.banner{background:var(--fill); border-radius:var(--r); padding:12px; margin-bottom:12px; font-size:15px}
.superset{border:1px dashed var(--accent); border-radius:calc(var(--r) + 6px); padding:6px; margin-bottom:12px}
.superset .card{margin-bottom:6px} .superset .card:last-child{margin-bottom:0}
.sslabel{font-size:12px; color:var(--accent); padding:2px 8px 6px; font-weight:600; text-transform:uppercase; letter-spacing:.04em}

.setrow{display:grid; grid-template-columns:20px 1fr 1fr; grid-template-areas:"n w r" "n rir rir"; gap:6px 8px; align-items:center; padding:8px 0; border-top:1px solid var(--line)}
.setrow .n{grid-area:n; color:var(--muted); font-size:14px; font-variant-numeric:tabular-nums}
.stepper{display:grid; grid-template-columns:44px 1fr 44px; align-items:center; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--bg)}
.stepper.w{grid-area:w} .stepper.r{grid-area:r}
.stepper button{min-height:44px; font-size:22px; color:var(--accent)}
.stepper input{border:0; border-radius:0; text-align:center; min-width:0; width:100%; padding:0 2px; background:transparent; font-variant-numeric:tabular-nums}
.stepper .unit{position:absolute}
.rirrow{grid-area:rir; display:grid; grid-template-columns:30px repeat(5,1fr) 56px; gap:4px; align-items:center}
.rirrow .lbl{font-size:12px; color:var(--muted)}
.rirrow button{min-height:40px; border-radius:10px; background:var(--fill); font-variant-numeric:tabular-nums}
.rirrow button[aria-pressed="true"]{background:var(--ink); color:var(--card)}
.rirrow .log{background:var(--accent); color:var(--on-accent); font-size:20px; font-weight:700}
.setrow.done{grid-template-columns:20px 1fr auto 28px; grid-template-areas:"n val rir chk"; min-height:44px}
.setrow.done .val{grid-area:val; font-variant-numeric:tabular-nums}
.setrow.done .rir{grid-area:rir; color:var(--ink2); font-size:14px}
.setrow.done .chk{grid-area:chk; color:var(--good); font-weight:700; text-align:right}

/* Timer + tabs */
.timer{position:fixed; left:12px; right:12px; bottom:calc(66px + env(safe-area-inset-bottom)); background:var(--ink); color:var(--card); border-radius:14px; padding:8px 8px 8px 14px; display:flex; align-items:center; gap:8px; z-index:6; font-variant-numeric:tabular-nums; box-shadow:0 6px 20px rgba(0,0,0,.25)}
.timer[hidden]{display:none}
.timer span{flex:1; font-weight:600}
.timer.done{background:var(--accent); color:var(--on-accent)}
.timer button{min-height:36px; padding:0 10px; border-radius:9px; background:rgba(255,255,255,.18); font-weight:600}
.tabbar{position:fixed; left:0; right:0; bottom:0; display:grid; grid-template-columns:repeat(5,1fr); background:var(--card); border-top:1px solid var(--line); padding:4px 0 calc(4px + env(safe-area-inset-bottom)); z-index:7}
.tabbar button{min-height:48px; font-size:13px; color:var(--muted)}
.tabbar button[aria-current="page"]{color:var(--accent); font-weight:600}

/* History */
.hhead{width:100%; display:flex; justify-content:space-between; align-items:baseline; gap:8px; text-align:left; min-height:40px}
.hline{display:flex; justify-content:space-between; gap:8px; font-size:15px; padding:2px 0}
.hgroup{border-top:1px solid var(--line); padding:6px 0; margin-top:6px}
.hset{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:15px}

/* Volume */
.vrow{display:grid; grid-template-columns:84px 1fr 30px 108px; gap:8px; align-items:center; padding:5px 0; font-size:14px}
.vm{text-transform:capitalize}
.vn{text-align:right; font-variant-numeric:tabular-nums; font-weight:600}
.vbar{position:relative; height:10px; background:var(--fill); border-radius:5px}
.vfill{height:100%; background:var(--accent); border-radius:5px}
.tick{position:absolute; top:-3px; width:2px; height:16px; background:var(--muted); opacity:.6}
.vf{color:var(--ink2); font-size:12px}
.vf.low,.vf.high{color:var(--warn)} .vf.none{color:var(--muted)}
.chart{width:100%; height:auto; display:block; margin-top:8px; touch-action:pan-y}
.chart .line{fill:none; stroke:var(--accent); stroke-width:2; stroke-linejoin:round}
.chart .dot{fill:var(--card); stroke:var(--accent); stroke-width:2}
.chart .grid{stroke:var(--line); stroke-width:1}
.chart text{fill:var(--ink2); font-size:11px; font-family:inherit}
.tip{font-size:14px; color:var(--ink2); min-height:20px; margin-top:4px; font-variant-numeric:tabular-nums}
details summary{min-height:44px; display:flex; align-items:center; color:var(--accent); cursor:pointer}
table{width:100%; border-collapse:collapse; font-size:14px}
td,th{text-align:left; padding:4px 0; border-top:1px solid var(--line); font-variant-numeric:tabular-nums}
th{font-weight:600; color:var(--ink2)}

/* Plan */
.pitem{border-top:1px solid var(--line); padding:8px 0}
.prow1{display:flex; justify-content:space-between; align-items:center; gap:8px}
.prow1 span{white-space:nowrap}
.prow2{display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:14px}
.prow2 label{display:inline-flex; align-items:center; gap:6px; margin:4px 0}
.prow2 input:not([type=checkbox]){width:54px; min-height:38px; padding:4px 6px; text-align:center; font-size:16px}
.prow2 input[type=checkbox]{width:22px; height:22px; min-height:0}
.lrow{display:flex; justify-content:space-between; align-items:center; gap:8px; border-top:1px solid var(--line); padding:8px 0}

/* Dialogs */
dialog{border:0; border-radius:16px; background:var(--card); color:var(--ink); padding:16px; width:min(92vw,420px); max-height:85vh; overflow:auto}
dialog::backdrop{background:rgba(0,0,0,.45)}
dialog menu{display:flex; gap:8px; justify-content:flex-end; padding:0; margin:12px 0 0}
.muscles{display:grid; grid-template-columns:1fr 1fr; gap:2px 8px; font-size:15px}
.muscles label{display:flex; align-items:center; gap:8px; margin:2px 0; min-height:36px; text-transform:capitalize}
.muscles input{width:22px; height:22px; min-height:0}
.help p{font-size:15px}