/* ============================================================
   LIFT — design system
   ============================================================ */
:root{
  --bg:#0a0c10;
  --bg-elev:#10141b;
  --card:#151a23;
  --card-2:#1b2230;
  --line:#28303d;
  --line-soft:#1f2631;
  --txt:#f2f5f8;
  --dim:#93a1b1;
  --faint:#5c6a7a;
  --accent:#4cb5ff;
  --accent-deep:#1f77c4;
  --accent-ink:#03121f;
  --good:#3fd68b;
  --good-ink:#032410;
  --warn:#ffb340;
  --bad:#ff6060;
  --violet:#a78bfa;
  --done-bg:#182430;
  --shadow:0 8px 28px rgba(0,0,0,.45);
  --r-lg:18px; --r-md:14px; --r-sm:11px;
  --tabbar-h:64px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{height:100%;}
body{
  margin:0; min-height:100%;
  background:var(--bg); color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  overscroll-behavior-y:none;
}
.wrap{max-width:560px; margin:0 auto; padding:14px 16px calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 28px);}
h1{font-size:24px; margin:6px 0 2px; letter-spacing:-.3px; font-weight:800;}
h2{font-size:13px; margin:20px 0 8px; color:var(--dim); text-transform:uppercase; letter-spacing:1.2px; font-weight:700;}
.muted{color:var(--dim);}
.faint{color:var(--faint);}
.mono{font-variant-numeric:tabular-nums;}
.big{font-size:clamp(38px,13vw,64px); font-weight:800; line-height:1.02; letter-spacing:-1.5px;}
small{font-size:13px;}

/* ---- layout helpers ---- */
.row{display:flex; gap:10px; align-items:center;}
.row.sb{justify-content:space-between;}
.grow{flex:1; min-width:0;}
.stack{display:flex; flex-direction:column; gap:10px;}
.hidden{display:none !important;}

/* ---- cards ---- */
.card{
  background:var(--card); border:1px solid var(--line-soft);
  border-radius:var(--r-lg); padding:16px; margin:12px 0;
}
.card.hero{
  background:linear-gradient(160deg,#16202e 0%, #121722 55%, #141a24 100%);
  border-color:var(--line);
}
.card h2:first-child{margin-top:0;}

/* ---- buttons ---- */
button{
  font-family:inherit; font-size:17px; font-weight:700; color:var(--txt);
  background:var(--card-2); border:1px solid var(--line); border-radius:var(--r-md);
  min-height:54px; padding:0 18px; cursor:pointer; touch-action:manipulation;
  transition:transform .06s ease, filter .12s ease;
}
button:active{transform:scale(.975);}
button.primary{
  background:linear-gradient(180deg,var(--accent) 0%, var(--accent-deep) 130%);
  border-color:transparent; color:var(--accent-ink);
  box-shadow:0 4px 18px rgba(76,181,255,.22);
}
button.good{
  background:linear-gradient(180deg,var(--good) 0%, #1f9e60 140%);
  border-color:transparent; color:var(--good-ink);
  box-shadow:0 4px 18px rgba(63,214,139,.2);
}
button.danger{background:transparent; border-color:rgba(255,96,96,.5); color:var(--bad);}
button.ghost{background:transparent;}
button.small{min-height:42px; font-size:14px; padding:0 14px; border-radius:var(--r-sm);}
button.block{width:100%;}
button:disabled{opacity:.35; pointer-events:none;}
.btnrow{display:flex; gap:10px; margin-top:10px;}
.btnrow button{flex:1;}

/* ---- inputs ---- */
input[type=number],input[type=text],textarea,select{
  font-family:inherit; font-size:19px; font-weight:700; color:var(--txt);
  background:#0d1117; border:1px solid var(--line); border-radius:12px;
  padding:10px 12px; width:100%; min-height:50px; text-align:center;
}
textarea{text-align:left; font-weight:500; font-size:16px; min-height:74px; resize:vertical;}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(76,181,255,.18);}
label.fld{display:block; margin:12px 0;}
label.fld span{display:block; color:var(--dim); font-size:12px; margin-bottom:5px; text-transform:uppercase; letter-spacing:.6px; font-weight:700;}
.fld-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 12px;}

/* toggle switch */
.switch{position:relative; width:52px; height:32px; flex:none;}
.switch input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer;}
.switch i{
  position:absolute; inset:0; border-radius:999px; background:var(--card-2);
  border:1px solid var(--line); transition:background .15s;
}
.switch i::after{
  content:""; position:absolute; top:3px; left:3px; width:24px; height:24px;
  border-radius:50%; background:var(--dim); transition:transform .15s, background .15s;
}
.switch input:checked + i{background:var(--accent-deep); border-color:var(--accent-deep);}
.switch input:checked + i::after{transform:translateX(20px); background:#fff;}

/* ---- pills / badges ---- */
.pill{
  display:inline-block; font-size:12px; font-weight:800; padding:4px 10px; border-radius:999px;
  background:var(--card-2); border:1px solid var(--line); color:var(--dim); letter-spacing:.5px;
}
.pill.A{background:#0f2740; border-color:#1d4d77; color:#7cc4ff;}
.pill.B{background:#2d2010; border-color:#6b4d1d; color:#ffcf7c;}
.pill.up{background:#0e2c1c; border-color:#1e5e3c; color:var(--good);}
.pill.hold{background:#20242c; border-color:var(--line); color:var(--dim);}
.pill.deload{background:#321616; border-color:#6e2a2a; color:var(--bad);}
.pill.pr{background:#241a3d; border-color:#4c3a80; color:var(--violet);}

/* ---- stat tiles ---- */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:12px 0;}
.stat{
  background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r-md);
  padding:12px 12px 10px; text-align:center;
}
.stat b{display:block; font-size:22px; letter-spacing:-.5px;}
.stat span{display:block; color:var(--faint); font-size:11px; text-transform:uppercase; letter-spacing:.8px; margin-top:3px; font-weight:700;}

/* ---- set rows ---- */
.set{
  display:flex; align-items:center; gap:12px; padding:12px 13px; border-radius:var(--r-md);
  background:var(--card-2); border:1px solid var(--line-soft); margin:8px 0;
  transition:opacity .15s, border-color .15s;
}
.set.current{border-color:var(--accent); box-shadow:0 0 0 2px rgba(76,181,255,.16);}
.set.done{background:var(--done-bg); opacity:.72;}
.set .check{
  width:30px; height:30px; flex:none; border-radius:50%; border:2px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--good);
}
.set.done .check{border-color:var(--good); background:rgba(63,214,139,.12);}
.set .lbl{flex:1; min-width:0;}
.set .lbl b{font-size:16px;}
.set .lbl small{display:block; color:var(--dim); font-size:13px; margin-top:2px;}
.set .lbl small.loadline{color:var(--accent); font-weight:600; margin-top:3px;}
.set .wt{font-size:21px; font-weight:800; text-align:right; flex:none;}
.set .wt small{font-size:11px; color:var(--faint); font-weight:700;}
.set .reps{width:86px; flex:none;}
.set .reps input{min-height:44px; font-size:17px; padding:6px;}
.set button.donebtn{min-height:44px; flex:none;}

/* ---- progress bar ---- */
.progressbar{height:5px; background:var(--card-2); border-radius:999px; overflow:hidden; margin:10px 0 4px;}
.progressbar i{display:block; height:100%; background:linear-gradient(90deg,var(--accent),#7cd4ff); width:0; transition:width .25s ease; border-radius:999px;}

/* ---- rest overlay ---- */
#rest{
  position:fixed; inset:0; background:rgba(6,8,11,.97); z-index:50; display:none;
  flex-direction:column; align-items:center; justify-content:center; padding:24px; text-align:center;
}
#rest.show{display:flex;}
.restring{position:relative; width:min(72vw,300px); aspect-ratio:1;}
.restring svg{width:100%; height:100%; transform:rotate(-90deg);}
.restring .track{stroke:var(--card-2);}
.restring .arc{stroke:var(--accent); transition:stroke-dashoffset .2s linear; stroke-linecap:round;}
.restring.flash .arc{stroke:var(--bad);}
#restNum{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:clamp(56px,18vw,86px); font-weight:800; letter-spacing:-2px;
}
#restNext{margin-top:18px; color:var(--dim); font-size:15px;}
.restctl{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; justify-content:center;}
.restctl button{min-width:92px;}

/* ---- screens / tab bar ---- */
.screen{display:none; animation:fadein .18s ease;}
.screen.show{display:block;}
@keyframes fadein{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}

#tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:rgba(13,17,23,.86); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--line-soft);
  padding-bottom:env(safe-area-inset-bottom);
}
#tabbar .inner{max-width:560px; margin:0 auto; display:flex; height:var(--tabbar-h);}
#tabbar button{
  flex:1; background:none; border:none; border-radius:0; min-height:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--faint); font-size:10.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
#tabbar button svg{width:23px; height:23px; stroke:currentColor;}
#tabbar button.active{color:var(--accent);}
#tabbar button:active{transform:none;}
body.in-session #tabbar{display:none;}

/* ---- history / log ---- */
.logitem{padding:13px 0; border-bottom:1px solid var(--line-soft);}
.logitem:last-child{border-bottom:none;}
.logitem .head{display:flex; justify-content:space-between; align-items:center; gap:8px;}
.logitem .detail{margin-top:6px; color:var(--dim); font-size:14px; line-height:1.55;}
.logitem.clickable{cursor:pointer;}
.logitem.clickable:active{opacity:.7;}

/* ---- charts ---- */
.chart{margin:8px 0 2px;}
.chart svg{display:block; width:100%; height:auto;}
.chart .axis{stroke:var(--line-soft); stroke-width:1;}
.chart .gridline{stroke:var(--line-soft); stroke-width:.5; stroke-dasharray:3 4;}
.chart text{fill:var(--faint); font-size:10px; font-family:inherit; font-variant-numeric:tabular-nums;}
.chart .line{fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;}
.chart .area{opacity:.12;}
.chart .dot{stroke:var(--bg); stroke-width:1.5;}
.chart-legend{display:flex; gap:16px; margin-top:8px; flex-wrap:wrap;}
.chart-legend span{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--dim); font-weight:600;}
.chart-legend i{width:10px; height:10px; border-radius:3px; display:inline-block;}

/* ---- toast ---- */
.toast{
  position:fixed; bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 18px);
  left:50%; transform:translateX(-50%) translateY(6px);
  background:#232d39; border:1px solid var(--line); color:var(--txt); padding:12px 20px;
  border-radius:12px; font-weight:600; z-index:60; opacity:0;
  transition:opacity .22s, transform .22s; pointer-events:none; box-shadow:var(--shadow);
  max-width:88vw; text-align:center;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---- misc ---- */
.note{font-size:14px; color:var(--dim); margin-top:6px; line-height:1.5;}
.callout{
  border-radius:var(--r-md); padding:12px 14px; font-size:14px; line-height:1.5; margin:10px 0;
  border:1px solid var(--line);
}
.callout.info{background:#0f2233; border-color:#1d4360; color:#a8d4f5;}
.callout.win{background:#0e2c1c; border-color:#1e5e3c; color:#9fe8c3;}
.callout.warn{background:#2d2410; border-color:#6b571d; color:#ffd98f;}
.callout.bad{background:#321616; border-color:#6e2a2a; color:#ffb3b3;}
a.link{color:var(--accent); text-decoration:none; font-weight:600;}
.divider{height:1px; background:var(--line-soft); margin:14px 0;}
.spacer{height:8px;}