:root {
  color-scheme: dark;
  --bg: #080a0d;
  --surface: #111419;
  --surface-2: #171b21;
  --surface-3: #20262e;
  --text: #f6f7f8;
  --muted: #8d96a3;
  --line: rgba(255,255,255,.08);
  --accent: #b7ff46;
  --accent-2: #71df20;
  --danger: #ff6b6b;
  --shadow: 0 18px 50px rgba(0,0,0,.28);
  --radius: 22px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
}

:root.light {
  color-scheme: light;
  --bg: #f3f5f0;
  --surface: #ffffff;
  --surface-2: #e9ece5;
  --surface-3: #dde2d8;
  --text: #151814;
  --muted: #687067;
  --line: rgba(21,24,20,.09);
  --accent: #7ee000;
  --accent-2: #65b900;
  --shadow: 0 18px 50px rgba(35,45,25,.12);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); }
button, input, select { font: inherit; }
button { color: inherit; }
button:active { transform: scale(.98); }
#app { width: min(100%, 620px); margin: 0 auto; min-height: 100vh; padding: env(safe-area-inset-top) 18px calc(104px + env(safe-area-inset-bottom)); }
.topbar { display:flex; align-items:center; justify-content:space-between; padding: 18px 2px 20px; }
.topbar h1 { margin: 4px 0 0; font-size: 27px; letter-spacing: -.8px; }
.eyebrow { margin: 0; color: var(--accent-2); font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.icon-button { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); font-size: 20px; cursor: pointer; }
.view { display:none; animation: fade .22s ease; }
.view.active { display:block; }
@keyframes fade { from {opacity:0; transform:translateY(5px)} }

.hero-card { padding: 22px; border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(140deg, var(--surface-2), var(--surface)); box-shadow: var(--shadow); overflow:hidden; position:relative; }
.hero-card::after { content:""; position:absolute; width:180px; height:180px; border-radius:50%; right:-75px; top:-90px; background:var(--accent); filter:blur(85px); opacity:.13; }
.hero-row { display:flex; justify-content:space-between; gap:16px; align-items:center; position:relative; z-index:1; }
.hero-row h2 { margin:12px 0 5px; font-size:23px; letter-spacing:-.5px; }
.hero-row p { margin:0; color:var(--muted); font-size:13px; }
.status-pill { display:inline-flex; align-items:center; gap:7px; padding:6px 9px; border-radius:99px; background:rgba(183,255,70,.1); color:var(--accent); font-size:10px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; }
.status-pill i { width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 10px currentColor; }
.progress-ring { --size:72px; display:grid; place-items:center; width:var(--size); height:var(--size); flex:0 0 var(--size); border-radius:50%; background:conic-gradient(var(--accent) calc(var(--progress)*1%), var(--surface-3) 0); position:relative; }
.progress-ring::after { content:""; position:absolute; inset:6px; border-radius:50%; background:var(--surface); }
.progress-ring span { position:relative; z-index:1; font-size:14px; font-weight:800; }
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.stats-grid div { display:flex; flex-direction:column; gap:4px; }
.stats-grid strong { font-size:16px; }
.stats-grid span { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.7px; }

.section-heading { display:flex; align-items:end; justify-content:space-between; margin:28px 2px 14px; }
.section-heading.first { margin-top:4px; }
.section-heading h2 { margin:4px 0 0; font-size:22px; letter-spacing:-.4px; }
.text-button { border:0; background:none; color:var(--accent-2); font-size:13px; font-weight:800; padding:9px 0 9px 12px; cursor:pointer; }
.workout-groups { display:flex; flex-direction:column; gap:14px; }
.group-card { border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); overflow:hidden; }
.group-head { display:flex; align-items:center; gap:10px; padding:14px 16px; background:var(--surface-2); border-bottom:1px solid var(--line); }
.group-letter { display:grid; place-items:center; width:28px; height:28px; border-radius:9px; background:var(--accent); color:#111; font-weight:900; font-size:12px; }
.group-head strong { font-size:12px; letter-spacing:.8px; text-transform:uppercase; }
.group-head span:last-child { margin-left:auto; color:var(--muted); font-size:11px; }
.exercise { padding:17px 16px; }
.exercise + .exercise { border-top:1px solid var(--line); }
.exercise-title { display:flex; align-items:start; justify-content:space-between; gap:12px; margin-bottom:13px; }
.exercise-title h3 { margin:0; font-size:16px; letter-spacing:-.2px; }
.exercise-title p { margin:4px 0 0; color:var(--muted); font-size:11px; }
.more-button { border:0; background:none; color:var(--muted); padding:0 3px; font-size:20px; cursor:pointer; }
.sets-head, .set-row { display:grid; grid-template-columns:27px 1fr 1fr 38px; gap:8px; align-items:center; }
.sets-head { color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.7px; text-align:center; margin-bottom:6px; }
.set-row { margin-top:8px; }
.set-number { text-align:center; color:var(--muted); font-size:12px; font-weight:700; }
.set-input { width:100%; height:40px; border:1px solid var(--line); border-radius:11px; background:var(--surface-2); color:var(--text); text-align:center; font-weight:700; outline:none; }
.set-input:focus { border-color:var(--accent-2); box-shadow:0 0 0 3px rgba(126,224,0,.1); }
.check-set { width:38px; height:38px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); color:transparent; font-size:17px; font-weight:900; cursor:pointer; }
.check-set.done { color:#10150b; border-color:var(--accent); background:var(--accent); }
.set-row.done .set-input { opacity:.55; }
.add-set { display:block; width:100%; margin-top:12px; border:1px dashed var(--line); border-radius:11px; background:transparent; color:var(--muted); padding:9px; font-size:11px; font-weight:800; cursor:pointer; }
.previous { color:var(--accent-2)!important; }
.finish-button, .primary-button { width:100%; border:0; border-radius:17px; background:var(--accent); color:#10150b; padding:16px; font-weight:900; cursor:pointer; box-shadow:0 12px 28px rgba(126,224,0,.12); }
.finish-button { margin-top:18px; display:flex; flex-direction:column; gap:2px; }
.finish-button small { font-size:10px; opacity:.65; font-weight:700; }

.routine-list, .history-list { display:flex; flex-direction:column; gap:12px; }
.routine-card, .history-card, .info-card, .privacy-card, .settings-card { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.routine-card { padding:18px; }
.routine-top { display:flex; justify-content:space-between; gap:14px; align-items:start; }
.routine-card h3, .history-card h3 { margin:0 0 5px; font-size:17px; }
.routine-card p, .history-card p, .info-card p, .privacy-card p { margin:0; color:var(--muted); font-size:12px; line-height:1.45; }
.routine-badge { border-radius:99px; padding:6px 9px; background:var(--surface-2); color:var(--muted); font-size:10px; font-weight:800; white-space:nowrap; }
.routine-actions { display:flex; gap:8px; margin-top:16px; }
.routine-actions button { flex:1; border:1px solid var(--line); border-radius:12px; padding:10px; background:var(--surface-2); font-size:12px; font-weight:800; cursor:pointer; }
.routine-actions button:first-child { background:var(--accent); color:#10150b; border-color:transparent; }
.info-card, .privacy-card { display:flex; gap:14px; padding:17px; margin-top:16px; }
.info-card strong, .privacy-card strong { display:block; margin-bottom:4px; font-size:13px; }
.info-icon, .privacy-card > span { display:grid; place-items:center; flex:0 0 36px; width:36px; height:36px; border-radius:12px; background:rgba(183,255,70,.1); color:var(--accent-2); font-weight:900; }
.history-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:17px; }
.summary-tile { padding:14px 10px; border:1px solid var(--line); border-radius:16px; background:var(--surface); text-align:center; }
.summary-tile strong { display:block; font-size:18px; }
.summary-tile span { display:block; margin-top:4px; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.6px; }
.history-card { padding:17px; }
.history-top { display:flex; justify-content:space-between; }
.history-date { color:var(--accent-2); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.7px; }
.history-metrics { display:grid; grid-template-columns:repeat(3,1fr); margin-top:13px; padding-top:13px; border-top:1px solid var(--line); }
.history-metrics span { color:var(--muted); font-size:10px; }
.history-metrics strong { display:block; color:var(--text); font-size:13px; margin-bottom:2px; }
.empty-state { padding:36px 20px; border:1px dashed var(--line); border-radius:var(--radius); text-align:center; color:var(--muted); }
.empty-state span { font-size:30px; }
.empty-state strong { display:block; color:var(--text); margin:8px 0 4px; }

.settings-card { overflow:hidden; }
.setting-row { display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; padding:17px; border:0; background:transparent; color:var(--text); text-align:left; }
.setting-row + .setting-row { border-top:1px solid var(--line); }
.setting-row strong { display:block; font-size:14px; }
.setting-row small { display:block; margin-top:4px; color:var(--muted); font-size:11px; }
.setting-row select { border:1px solid var(--line); border-radius:10px; background:var(--surface-2); color:var(--text); padding:8px; }
.action-row { cursor:pointer; }
.action-row b { color:var(--accent-2); font-size:20px; }

.bottom-nav { position:fixed; z-index:10; left:50%; bottom:0; transform:translateX(-50%); width:min(100%,620px); display:grid; grid-template-columns:repeat(4,1fr); padding:8px 12px calc(8px + env(safe-area-inset-bottom)); background:color-mix(in srgb, var(--bg) 88%, transparent); border-top:1px solid var(--line); backdrop-filter:blur(20px); }
.nav-item { display:flex; flex-direction:column; align-items:center; gap:3px; border:0; background:none; color:var(--muted); padding:7px; cursor:pointer; }
.nav-item span { font-size:20px; height:22px; }
.nav-item small { font-size:9px; font-weight:800; }
.nav-item.active { color:var(--accent-2); }
.rest-timer { position:fixed; z-index:20; left:50%; bottom:82px; transform:translateX(-50%); width:min(calc(100% - 24px), 596px); padding:13px 16px 10px; border:1px solid rgba(183,255,70,.3); border-radius:18px; background:#1b2414; color:#f6f7f8; box-shadow:0 16px 45px rgba(0,0,0,.4); }
.rest-timer > div:first-child { display:flex; align-items:center; justify-content:space-between; }
.rest-timer span { color:#b7ff46; font-size:9px; font-weight:900; letter-spacing:1px; }
.rest-timer strong { font-variant-numeric:tabular-nums; font-size:22px; }
.timer-actions { display:flex; justify-content:center; gap:8px; margin-top:-22px; padding-right:65px; }
.timer-actions button { border:1px solid rgba(255,255,255,.1); border-radius:8px; background:rgba(255,255,255,.06); color:#d9dfd2; font-size:10px; padding:5px 8px; }
.timer-bar { height:3px; margin-top:10px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; }
.timer-bar i { display:block; height:100%; width:100%; background:#b7ff46; transition:width .3s linear; }

.sheet-dialog { width:min(calc(100% - 24px), 560px); padding:0; border:1px solid var(--line); border-radius:26px; background:var(--surface); color:var(--text); box-shadow:var(--shadow); }
.sheet-dialog::backdrop { background:rgba(0,0,0,.65); backdrop-filter:blur(5px); }
.sheet-dialog form { padding:9px 20px 20px; }
.sheet-handle { width:40px; height:4px; border-radius:99px; background:var(--surface-3); margin:0 auto 16px; }
.dialog-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.dialog-heading h2 { margin:4px 0 0; }
.sheet-dialog label { display:block; margin-top:13px; color:var(--muted); font-size:11px; font-weight:800; }
.sheet-dialog input, .sheet-dialog select { width:100%; margin-top:7px; padding:13px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); color:var(--text); outline:none; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.primary-button { margin-top:20px; }
.toast { position:fixed; z-index:40; left:50%; top:calc(18px + env(safe-area-inset-top)); transform:translate(-50%,-90px); opacity:0; min-width:220px; max-width:calc(100% - 32px); padding:12px 16px; border:1px solid var(--line); border-radius:13px; background:var(--text); color:var(--bg); box-shadow:var(--shadow); text-align:center; font-size:12px; font-weight:800; transition:.25s ease; }
.toast.show { transform:translate(-50%,0); opacity:1; }

@media (min-width: 700px) {
  #app { padding-left:24px; padding-right:24px; }
  .hero-card { padding:26px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none!important; transition:none!important; } }