:root{
  --bg:#151109;--panel:#1e1810;--panel2:#26201a;--line:#332a20;
  --ink:#f3ecdf;--muted:#a2937d;--dim:#6f6350;
  --orange:#ff7a1a;--orange-d:#c85c0d;--green:#35c06a;--red:#e5533d;--gold:#e6b422;--blue:#4aa3ff;
  --disp:"Space Grotesk",system-ui,sans-serif;--body:"Inter",system-ui,sans-serif;--mono:"Space Mono",monospace;
  --safe:env(safe-area-inset-bottom,0px);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(900px 500px at 85% -10%,rgba(255,122,26,.10),transparent 60%),radial-gradient(700px 400px at -10% 110%,rgba(53,192,106,.06),transparent 55%)}
.hidden{display:none!important}
.wrap{position:relative;z-index:1;max-width:680px;margin:0 auto;padding:0 15px calc(100px + var(--safe))}
.btn{font-family:var(--disp);font-weight:600;font-size:14px;border:none;border-radius:12px;padding:12px 18px;cursor:pointer;transition:.15s;color:#1a1206}
.btn.primary{background:var(--orange)}
.btn.primary:active{background:#ff8c38}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn.ghost:active{border-color:var(--orange);color:var(--orange)}
.btn.green{background:var(--green);color:#08160c}
.btn.sm{padding:9px 13px;font-size:13px}
.btn.wide{width:100%}
input,select{font-family:var(--body);font-size:15px}

/* LOGIN */
.login{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--bg)}
.login-box{width:100%;max-width:340px;text-align:center}
.login .logo{font-family:var(--disp);font-weight:700;font-size:30px}
.login .sub{color:var(--muted);margin:6px 0 22px}
.login input{width:100%;background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:12px;padding:14px;margin-bottom:12px}
.login input:focus{outline:none;border-color:var(--orange)}
.login .err{color:var(--red);font-size:13px;margin-top:10px;min-height:18px}

/* HERO */
.hero{display:flex;justify-content:space-between;align-items:center;padding:20px 0 6px}
.hello{font-family:var(--disp);font-weight:700;font-size:22px}
.streakbadge{font-family:var(--mono);font-size:13px;color:var(--orange);background:rgba(255,122,26,.12);border:1px solid rgba(255,122,26,.4);padding:6px 12px;border-radius:20px}

/* TABS bottom */
.tabs{position:fixed;bottom:0;left:0;right:0;z-index:30;display:flex;justify-content:space-between;background:rgba(21,17,9,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:8px 6px calc(8px + var(--safe))}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:none;color:var(--muted);font-family:var(--disp);font-weight:600;font-size:10.5px;padding:6px 2px;cursor:pointer}
.tab span{font-size:19px;line-height:1}
.tab.on{color:var(--orange)}

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

.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 17px;margin:13px 0}
.card h2{font-family:var(--disp);font-weight:700;font-size:17px;display:flex;align-items:center;gap:9px;margin-bottom:8px}
.card h2 .dot{width:8px;height:8px;border-radius:50%;background:var(--orange)}
.hint{color:var(--muted);font-size:13px;margin-bottom:8px}
.mono{font-family:var(--mono)}

/* hero session */
.sessioncard{background:linear-gradient(135deg,#251a0f,#33230f);border:1px solid var(--orange-d)}
.sessioncard .k{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--orange)}
.sessioncard .n{font-family:var(--disp);font-weight:700;font-size:28px;margin:2px 0 6px}
.sessioncard .msg{color:#e9dcc9;font-size:13.5px;margin-bottom:12px}

/* nudges */
.nudge{display:flex;align-items:center;gap:11px;background:var(--panel2);border:1px solid var(--line);border-radius:13px;padding:12px 14px;margin:10px 0}
.nudge .ic{font-size:20px}.nudge .tx{flex:1;font-size:13.5px}
.nudge button{font-family:var(--disp);font-weight:600;font-size:12px;background:var(--orange);color:#1a1206;border:none;border-radius:9px;padding:8px 12px}

/* rings / stats */
.ring-row{display:flex;gap:12px;justify-content:space-around;flex-wrap:wrap}
.ring{--p:0;--c:var(--orange);width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:conic-gradient(var(--c) calc(var(--p)*1%),var(--panel2) 0);position:relative}
.ring::after{content:"";position:absolute;width:74px;height:74px;border-radius:50%;background:var(--panel)}
.ring .in{position:relative;z-index:2;text-align:center;font-family:var(--disp);font-weight:700;font-size:18px;line-height:1}
.ring .in small{display:block;font-size:10px;color:var(--muted);font-weight:500;margin-top:2px}

.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:520px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px}
.stat .kk{font-family:var(--mono);font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--dim)}
.stat .vv{font-family:var(--disp);font-weight:700;font-size:21px;margin-top:2px}
.stat .vv small{font-size:12px;color:var(--muted);font-weight:500}

/* track */
.track .rail{position:relative;height:13px;background:var(--panel2);border:1px solid var(--line);border-radius:20px;margin:12px 0 8px}
.track .fill{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--orange-d),var(--orange));border-radius:20px}
.track .marker{position:absolute;top:50%;width:24px;height:24px;border-radius:50%;background:var(--orange);border:3px solid var(--bg);box-shadow:0 0 0 2px var(--orange);transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;font-size:11px}
.track .ends{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;color:var(--muted)}
.track .ends .goal{color:var(--green)}

/* exo cards (muscu) */
.exo{border:1px solid var(--line);border-radius:13px;margin:10px 0;background:var(--panel2);overflow:hidden}
.exo .top{display:flex;align-items:center;gap:11px;padding:13px 14px;cursor:pointer}
.exo .en{font-family:var(--disp);font-weight:600;font-size:15px}
.exo .tags{margin-top:3px;display:flex;gap:5px;flex-wrap:wrap}
.mtag{font-family:var(--mono);font-size:9px;background:#3a2c18;color:#d9a25e;padding:2px 6px;border-radius:7px}
.exo .coach{color:var(--gold);font-size:12px;margin-top:5px;font-style:italic}
.setbadge{font-family:var(--mono);font-weight:700;font-size:12px;background:var(--orange);color:#1a1206;padding:5px 10px;border-radius:20px;white-space:nowrap}
.exo .body{padding:0 14px 14px}
.tuto{color:var(--muted);font-size:13px;margin:6px 0}.tuto b{color:var(--orange)}
.setrow{display:flex;align-items:center;gap:8px;margin:7px 0}
.setrow .idx{font-family:var(--mono);font-size:12px;color:var(--dim);width:44px}
.setrow input{width:70px;background:var(--bg);border:1px solid var(--line);color:var(--ink);border-radius:9px;padding:9px;font-family:var(--mono);text-align:center}
.setrow input:focus{outline:none;border-color:var(--orange)}
.setrow .x{color:var(--dim)}
.setrow .setchk{width:26px;height:26px;border-radius:7px;border:2px solid var(--dim);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.setrow .setchk.done{background:var(--green);border-color:var(--green)}
.setrow .setchk.done::after{content:"✓";color:#08160c;font-weight:700}

/* nutrition */
.searchbar{display:flex;gap:8px;margin-bottom:8px}
.searchbar input{flex:1;background:var(--bg);border:1px solid var(--line);color:var(--ink);border-radius:11px;padding:12px}
.searchbar input:focus{outline:none;border-color:var(--orange)}
.foodres{list-style:none}
.foodres li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:11px 12px;border:1px solid var(--line);border-radius:11px;margin:7px 0;background:var(--panel2)}
.foodres .fn{font-size:13.5px;font-weight:600}
.foodres .fm{font-family:var(--mono);font-size:11px;color:var(--muted)}
.foodres button{font-family:var(--disp);font-weight:700;font-size:18px;background:var(--orange);color:#1a1206;border:none;border-radius:9px;width:34px;height:34px;flex:0 0 auto}
.logrow{display:flex;justify-content:space-between;font-size:13px;padding:9px 0;border-bottom:1px solid var(--line)}
.logrow:last-child{border:none}.logrow .del{color:var(--red);background:none;border:none;font-family:var(--mono)}
.pbar{height:11px;background:var(--panel2);border:1px solid var(--line);border-radius:20px;overflow:hidden;margin:6px 0}
.pbar .pf{height:100%;border-radius:20px}

/* zones */
.zones{display:flex;border-radius:12px;overflow:hidden;border:1px solid var(--line);margin:10px 0}
.zones div{flex:1;padding:12px 5px;text-align:center;color:#fff}
.z2{background:#2e9e44}.z3{background:#d39b0c}.z45{background:#cf3b28}
.zones .zn{font-family:var(--mono);font-size:9.5px;font-weight:700}
.zones .zb{font-family:var(--disp);font-size:15px;font-weight:700;margin:2px 0}

/* forms + lists */
.pform{display:flex;gap:9px;flex-wrap:wrap;align-items:flex-end}
.fld{display:flex;flex-direction:column;gap:4px}
.fld label{font-family:var(--mono);font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--dim)}
.fld input,.fld select{background:var(--bg);border:1px solid var(--line);color:var(--ink);border-radius:9px;padding:10px;font-family:var(--mono);width:110px}
.fld input:focus{outline:none;border-color:var(--orange)}
.entries{list-style:none;margin-top:6px}
.entries li{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12.5px;padding:8px 0;border-bottom:1px solid var(--line);color:var(--muted)}
.entries li:last-child{border:none}.entries .del{color:var(--red);background:none;border:none;font-family:var(--mono)}
.chartbox{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px;margin-top:6px}
.callout{background:#2a1c10;border-left:3px solid var(--orange);border-radius:0 10px 10px 0;padding:10px 13px;font-size:13px;color:#e9dcc9;margin:10px 0}
.callout.good{background:#122417;border-left-color:var(--green)}
.callout b{color:#fff}
.pill{display:inline-block;font-family:var(--mono);font-size:11px;padding:4px 9px;border-radius:20px;background:var(--panel2);border:1px solid var(--line);color:var(--muted)}

/* toast + timer */
.toast{position:fixed;bottom:calc(84px + var(--safe));left:50%;transform:translateX(-50%) translateY(120px);background:var(--green);color:#08160c;font-family:var(--disp);font-weight:600;font-size:13px;padding:10px 18px;border-radius:12px;z-index:60;transition:transform .3s;box-shadow:0 8px 24px rgba(0,0,0,.4);text-align:center;max-width:90%}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.pr{background:var(--gold);color:#241a00}
.rest-timer{position:fixed;bottom:calc(84px + var(--safe));left:50%;transform:translateX(-50%);z-index:55;background:var(--orange);color:#1a1206;font-family:var(--mono);font-weight:700;font-size:18px;padding:10px 16px;border-radius:14px;display:flex;align-items:center;gap:12px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.rest-timer button{background:rgba(0,0,0,.15);border:none;color:#1a1206;font-family:var(--disp);font-weight:600;font-size:12px;padding:6px 10px;border-radius:8px}
