:root{
  --bg:#0b0f14; --bg2:#111823; --card:#151d29; --card2:#1b2532;
  --line:#233042; --line2:#2c3a4d;
  --text:#eef3f9; --muted:#9fb0c3; --faint:#6c7d92;
  --accent:#4ade80; --accent2:#22c55e; --accentink:#052e16;
  --blue:#60a5fa; --amber:#fbbf24; --red:#f87171; --violet:#a78bfa;
  --radius:18px; --radius-sm:12px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html,body{margin:0;padding:0;width:100%;min-height:100%}
html{background:#0b0f14}
body{
  background:radial-gradient(120% 80% at 50% 0%,#131d2b 0%,#0b0f14 55%,#0b0f14 100%);
  color:var(--text);
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  padding-bottom:calc(78px + var(--safe-bottom));
}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}
input,select{font:inherit}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.02em}
a{color:var(--blue)}

#app{max-width:520px;margin:0 auto;padding:calc(14px + var(--safe-top)) 16px 8px}

/* ---------- generic bits ---------- */
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.center{text-align:center}
.row{display:flex;align-items:center;gap:12px}
.between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.wrap{flex-wrap:wrap}
.grow{flex:1}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:var(--card2);border:1px solid var(--line);font-size:13px;color:var(--muted);white-space:nowrap}
.pill svg{width:14px;height:14px;fill:currentColor;opacity:.85}
.tag{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.08em;font-weight:600}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:14px}
.card.tight{padding:13px 14px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 18px;border-radius:14px;font-weight:650;background:var(--card2);border:1px solid var(--line2);color:var(--text);transition:transform .06s ease,background .15s}
.btn:active{transform:scale(.97)}
.btn.primary{background:linear-gradient(180deg,var(--accent),var(--accent2));color:var(--accentink);border:none;box-shadow:0 6px 18px -6px rgba(34,197,94,.5)}
.btn.ghost{background:transparent;border:1px solid var(--line)}
.btn.block{display:flex;width:100%}
.btn.sm{padding:8px 13px;border-radius:11px;font-size:14px}
.btn.danger{color:var(--red);border-color:#5b2626;background:#2a1618}

.hd{display:flex;align-items:flex-end;justify-content:space-between;margin:4px 2px 16px}
.hd .sub{color:var(--muted);font-size:14px}
.hd h1{font-size:26px}

/* ---------- onboarding ---------- */
.ob-wrap{min-height:70vh;display:flex;flex-direction:column;justify-content:center}
.ob-logo{width:64px;height:64px;border-radius:18px;margin:0 auto 18px;display:block;box-shadow:0 10px 30px -10px rgba(74,222,128,.6)}
.choice{display:block;width:100%;text-align:left;background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:15px 16px;margin-bottom:11px;transition:border-color .15s,background .15s}
.choice .t{font-weight:650}
.choice .d{color:var(--muted);font-size:13.5px;margin-top:3px}
.choice[aria-pressed="true"]{border-color:var(--accent);background:linear-gradient(180deg,rgba(74,222,128,.09),rgba(74,222,128,.02))}
.seg{display:flex;gap:8px}
.seg button{flex:1;padding:12px;border-radius:12px;background:var(--card);border:1.5px solid var(--line);font-weight:600}
.seg button[aria-pressed="true"]{border-color:var(--accent);background:rgba(74,222,128,.1);color:var(--text)}
.dots{display:flex;gap:6px;justify-content:center;margin:20px 0 6px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--line2)}
.dots i.on{background:var(--accent);width:20px;border-radius:4px}
.ob-step-title{font-size:22px;margin-bottom:6px}
.ob-step-sub{color:var(--muted);margin-bottom:20px}

/* ---------- today ---------- */
.hero{background:linear-gradient(150deg,#16233a,#131b28);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:14px;position:relative;overflow:hidden}
.hero .focus{font-size:13px;color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.hero h2{font-size:24px;margin:4px 0 10px}
.hero .meta{display:flex;gap:8px;flex-wrap:wrap}
.hero.rest{background:linear-gradient(150deg,#1a2233,#141a24)}

.ex{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:11px;transition:border-color .15s}
.ex.done{border-color:rgba(74,222,128,.4);background:linear-gradient(180deg,rgba(74,222,128,.06),transparent)}
.ex-top{display:flex;align-items:flex-start;gap:12px}
.ex-name{font-weight:650;font-size:16.5px}
.ex-sub{color:var(--muted);font-size:13px;margin-top:2px}
.ex-note{color:var(--faint);font-size:12.5px;margin-top:6px}
.check{flex:none;width:30px;height:30px;border-radius:50%;border:2px solid var(--line2);display:grid;place-items:center;transition:.15s}
.check svg{width:16px;height:16px;fill:#fff;opacity:0;transform:scale(.5);transition:.15s}
.check.on{background:var(--accent);border-color:var(--accent)}
.check.on svg{opacity:1;transform:scale(1);fill:var(--accentink)}

.sets{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.setrow{display:flex;align-items:center;gap:8px}
.setrow .n{width:44px;font-size:12px;color:var(--faint);font-weight:600}
.field{flex:1;display:flex;align-items:center;background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:0 10px;height:44px}
.field label{font-size:11px;color:var(--faint);margin-right:8px;text-transform:uppercase;letter-spacing:.05em}
.field input{width:100%;background:none;border:none;color:var(--text);font-size:17px;font-weight:600;text-align:right;outline:none;-webkit-appearance:none;appearance:none}
.field .u{color:var(--faint);font-size:13px;margin-left:5px}
.setdone{flex:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--line2);display:grid;place-items:center;background:var(--bg2)}
.setdone svg{width:16px;height:16px;fill:var(--faint)}
.setdone.on{background:rgba(74,222,128,.14);border-color:var(--accent)}
.setdone.on svg{fill:var(--accent)}
.addset{align-self:flex-start;font-size:13px;color:var(--muted);padding:6px 2px}

.cardio-log{margin-top:12px;display:flex;gap:8px;align-items:center}

/* ---------- plan ---------- */
.day{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:9px}
.day .dow{width:42px;font-weight:700;color:var(--muted);font-size:13px;text-transform:uppercase}
.day.today{border-color:var(--accent)}
.day .arrow{color:var(--faint)}
.dot{width:9px;height:9px;border-radius:50%;flex:none}

/* ---------- progress ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px;text-align:center}
.stat .v{font-size:24px;font-weight:750;letter-spacing:-.02em}
.stat .l{font-size:11.5px;color:var(--muted);margin-top:2px}
.chart{width:100%;height:190px;display:block}
.legend{display:flex;gap:14px;justify-content:center;margin-top:10px;font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.hist-row{display:flex;align-items:center;justify-content:space-between;padding:11px 2px;border-bottom:1px solid var(--line)}
.hist-row:last-child{border:none}

/* ---------- settings ---------- */
.set-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.set-item:last-child{border:none}
.set-item .k{font-weight:600}
.set-item .h{font-size:12.5px;color:var(--faint);margin-top:2px}
.switch{width:50px;height:30px;border-radius:999px;background:var(--line2);position:relative;flex:none;transition:.2s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:.2s}
.switch.on{background:var(--accent)}
.switch.on::after{transform:translateX(20px)}
select.inp,input.inp{background:var(--bg2);border:1px solid var(--line);border-radius:11px;color:var(--text);padding:9px 12px;font-size:15px;outline:none}
input.inp[type=time]{min-width:110px}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:9px 14px;border-radius:999px;background:var(--card);border:1.5px solid var(--line);font-size:14px;font-weight:600;color:var(--muted)}
.chip[aria-pressed="true"]{border-color:var(--accent);background:rgba(74,222,128,.12);color:var(--text)}

.note{background:rgba(96,165,250,.08);border:1px solid rgba(96,165,250,.25);border-radius:12px;padding:11px 13px;font-size:13px;color:#bcd4f5;margin-bottom:12px}
.note b{color:#dbe8fb}

/* ---------- tabbar ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:rgba(13,19,27,.86);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--line);padding:8px 6px calc(8px + var(--safe-bottom))}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px;color:var(--faint);font-size:11px;font-weight:600}
.tab svg{width:24px;height:24px;fill:currentColor}
.tab.on{color:var(--accent)}

.toast{position:fixed;left:50%;bottom:calc(96px + var(--safe-bottom));transform:translateX(-50%) translateY(20px);
  background:#eef3f9;color:#0b0f14;padding:11px 18px;border-radius:999px;font-weight:650;font-size:14px;
  opacity:0;transition:.25s;z-index:100;box-shadow:0 10px 30px -8px rgba(0,0,0,.5);pointer-events:none;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.fade{animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.empty{text-align:center;color:var(--muted);padding:40px 20px}
.empty svg{width:46px;height:46px;fill:var(--line2);margin-bottom:10px}