/* ── IronFlow Design System ─────────────────────────────── */
:root {
  --bg-primary: #030409;
  --bg-secondary: transparent;
  --bg-card: rgba(255,255,255,0.03);
  --bg-card-hover: rgba(255,255,255,0.06);
  --bg-card-active: rgba(255,255,255,0.08);
  --bg-input: rgba(255,255,255,0.04);
  --bg-sheet: rgba(10,12,20,0.98);
  --border: rgba(255,255,255,0.08);
  --border-focus: rgba(74,222,128,0.5);
  --text-primary: #ffffff;
  --text-secondary: rgba(255,255,255,0.6);
  --text-muted: rgba(255,255,255,0.35);
  --accent: #4ade80;
  --accent-rgb: 74,222,128;
  --accent-dim: rgba(74,222,128,0.12);
  --accent-gradient: linear-gradient(135deg, #4ade80, #22d3ee);
  --danger: #ef4444;
  --danger-dim: rgba(239,68,68,0.12);
  --danger-rgb: 239,68,68;
  --warning: #fbbf24;
  --warning-dim: rgba(251,191,36,0.12);
  --success: #10b981;
  --info: #60a5fa;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 100px;
  --shadow-card: 0 8px 32px rgba(0,0,0,0.4);
  --shadow-glow: 0 0 30px rgba(var(--accent-rgb),0.15);
  --shadow-sheet: 0 -20px 60px rgba(0,0,0,0.5);
  --nav-height: 72px;
  --header-height: 64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

/* ── Light Theme ── */
[data-theme="light"] {
  --bg-primary: #f4f5f9;
  --bg-card: rgba(255,255,255,0.7);
  --bg-card-hover: rgba(255,255,255,0.9);
  --bg-card-active: rgba(255,255,255,1);
  --bg-input: rgba(0,0,0,0.03);
  --bg-sheet: rgba(244,245,249,0.98);
  --border: rgba(0,0,0,0.07);
  --text-primary: #1a1a2e;
  --text-secondary: rgba(26,26,46,0.6);
  --text-muted: rgba(26,26,46,0.35);
  --shadow-card: 0 8px 32px rgba(0,0,0,0.06);
  --shadow-sheet: 0 -20px 60px rgba(0,0,0,0.1);
}

/* ── Accent Colors ── */
[data-accent="green"]  { --accent: #4ade80; --accent-rgb: 74,222,128; --accent-dim: rgba(74,222,128,0.12); --accent-gradient: linear-gradient(135deg,#4ade80,#22d3ee); --border-focus: rgba(74,222,128,0.5); --shadow-glow: 0 0 30px rgba(74,222,128,0.15); }
[data-accent="rose"]   { --accent: #fb7185; --accent-rgb: 251,113,133; --accent-dim: rgba(251,113,133,0.12); --accent-gradient: linear-gradient(135deg,#fb7185,#f472b6); --border-focus: rgba(251,113,133,0.5); --shadow-glow: 0 0 30px rgba(251,113,133,0.15); }
[data-accent="blue"]   { --accent: #60a5fa; --accent-rgb: 96,165,250; --accent-dim: rgba(96,165,250,0.12); --accent-gradient: linear-gradient(135deg,#60a5fa,#818cf8); --border-focus: rgba(96,165,250,0.5); --shadow-glow: 0 0 30px rgba(96,165,250,0.15); }
[data-accent="gold"]   { --accent: #fbbf24; --accent-rgb: 251,191,36; --accent-dim: rgba(251,191,36,0.12); --accent-gradient: linear-gradient(135deg,#fbbf24,#f59e0b); --border-focus: rgba(251,191,36,0.5); --shadow-glow: 0 0 30px rgba(251,191,36,0.15); }
[data-accent="purple"] { --accent: #c084fc; --accent-rgb: 192,132,252; --accent-dim: rgba(192,132,252,0.12); --accent-gradient: linear-gradient(135deg,#c084fc,#a78bfa); --border-focus: rgba(192,132,252,0.5); --shadow-glow: 0 0 30px rgba(192,132,252,0.15); }
[data-accent="teal"]   { --accent: #2dd4bf; --accent-rgb: 45,212,191; --accent-dim: rgba(45,212,191,0.12); --accent-gradient: linear-gradient(135deg,#2dd4bf,#22d3ee); --border-focus: rgba(45,212,191,0.5); --shadow-glow: 0 0 30px rgba(45,212,191,0.15); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height:100%; width:100%; background: var(--bg-primary); color: var(--text-primary); overflow: hidden; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; }
.hidden { display: none !important; }
button { font-family: inherit; }
input, select { font-family: inherit; }

/* ── Ambient Background ── */
.ambient-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--bg-primary); transition: background 0.4s; }
.glow-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.4; animation: floatOrb 20s infinite ease-in-out alternate; }
.orb-1 { width: 350px; height: 350px; background: rgba(var(--accent-rgb),0.3); top: -80px; left: -80px; }
.orb-2 { width: 450px; height: 450px; background: rgba(34,211,238,0.2); bottom: -120px; right: -80px; animation-delay: -7s; }
.orb-3 { width: 280px; height: 280px; background: rgba(251,191,36,0.15); top: 40%; left: 50%; animation-delay: -12s; }
[data-theme="light"] .glow-orb { opacity: 0.18; }
@keyframes floatOrb { 0%{transform:translate(0,0) scale(1)} 50%{transform:translate(30px,50px) scale(1.15)} 100%{transform:translate(-30px,20px) scale(0.9)} }

/* ── App Layout ── */
.app { display:flex; flex-direction:column; height:100%; width:100%; }
.app-header { display:flex; align-items:center; justify-content:space-between; padding:12px 20px; padding-top:calc(12px + var(--safe-top)); height:var(--header-height); flex-shrink:0; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--border); z-index:10; }
.header-left { display:flex; align-items:center; gap:12px; }
.header-emoji { font-size:26px; }
.header-title { font-size:18px; font-weight:800; letter-spacing:-0.3px; }
.header-date { font-size:12px; color:var(--text-muted); margin-top:1px; }
.streak-badge { display:flex; align-items:center; gap:5px; background:var(--accent-dim); padding:7px 14px; border-radius:var(--radius-pill); border:1px solid rgba(var(--accent-rgb),0.2); cursor:pointer; transition:all 0.3s; }
.streak-badge:active { transform:scale(0.95); }
.streak-fire { font-size:16px; }
.streak-count { font-size:16px; font-weight:800; color:var(--accent); }

/* ── Pages ── */
.page-container { flex:1; overflow-y:auto; overflow-x:hidden; padding:20px; padding-bottom:calc(var(--nav-height) + var(--safe-bottom) + 24px); scroll-behavior:smooth; -webkit-overflow-scrolling:touch; }
.page { display:none; animation: pageIn 0.35s cubic-bezier(0.4,0,0.2,1); }
.page.active { display:block; }
@keyframes pageIn { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

/* ── Score Ring ── */
.score-section { display:flex; flex-direction:column; align-items:center; margin-bottom:28px; }
.score-ring-container { position:relative; width:140px; height:140px; margin-bottom:14px; }
.score-ring { width:100%; height:100%; transform:rotate(-90deg); }
.score-ring-bg { fill:none; stroke:var(--border); stroke-width:7; }
.score-ring-fill { fill:none; stroke:url(#ringGradient); stroke-width:7; stroke-linecap:round; stroke-dasharray:327; stroke-dashoffset:327; transition:stroke-dashoffset 1s cubic-bezier(0.4,0,0.2,1); filter:drop-shadow(0 0 8px rgba(var(--accent-rgb),0.4)); }
.score-text { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:2px; flex-direction:column; }
.score-num { font-size:38px; font-weight:800; background:var(--accent-gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; }
.score-den { font-size:14px; font-weight:600; color:var(--text-muted); }
.score-label { font-size:14px; color:var(--text-secondary); font-weight:500; text-align:center; max-width:260px; }

/* ── Routine Badge ── */
.routine-badge { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:20px; }
.routine-badge-inner { display:flex; align-items:center; gap:8px; background:var(--bg-card); border:1px solid var(--border); padding:8px 18px; border-radius:var(--radius-pill); font-size:13px; font-weight:600; color:var(--text-secondary); cursor:pointer; transition:all 0.3s; }
.routine-badge-inner:active { transform:scale(0.96); background:var(--bg-card-hover); }
.routine-badge-inner svg { width:14px; height:14px; opacity:0.5; }

/* ── Exercise Cards ── */
.exercise-list { display:flex; flex-direction:column; gap:12px; }
.exercise-card { background:var(--bg-card); border:1.5px solid var(--border); border-radius:var(--radius-md); padding:16px; transition:all 0.3s cubic-bezier(0.4,0,0.2,1); }
.exercise-card.completed { border-color:rgba(var(--accent-rgb),0.4); background:var(--accent-dim); }
.exercise-card.current { box-shadow:var(--shadow-glow); border-color:rgba(var(--accent-rgb),0.3); }
.exercise-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.exercise-card-name { font-size:15px; font-weight:700; display:flex; align-items:center; gap:8px; }
.exercise-card-name .cat-emoji { font-size:18px; }
.exercise-card-sets-count { font-size:12px; font-weight:700; color:var(--accent); background:var(--accent-dim); padding:4px 10px; border-radius:var(--radius-pill); }
.exercise-card.completed .exercise-card-sets-count { background:rgba(var(--accent-rgb),0.25); }
.exercise-card-target { font-size:12px; color:var(--text-muted); margin-bottom:10px; }
.logged-sets { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.set-pill { display:flex; align-items:center; gap:4px; padding:6px 12px; border-radius:var(--radius-pill); font-size:13px; font-weight:600; background:var(--accent-dim); color:var(--accent); border:1px solid rgba(var(--accent-rgb),0.15); cursor:pointer; transition:all 0.25s; }
.set-pill:active { transform:scale(0.92); }
.set-pill .pill-weight { font-size:11px; color:var(--text-muted); }
.add-set-btn { display:flex; align-items:center; gap:4px; padding:6px 14px; border-radius:var(--radius-pill); font-size:13px; font-weight:700; background:transparent; color:var(--accent); border:1.5px dashed rgba(var(--accent-rgb),0.3); cursor:pointer; transition:all 0.25s; }
.add-set-btn:hover { background:var(--accent-dim); border-color:rgba(var(--accent-rgb),0.5); }
.add-set-btn:active { transform:scale(0.92); }
.add-set-btn svg { width:14px; height:14px; }

/* ── Finish Workout Button ── */
.finish-workout-btn { width:100%; padding:16px; border-radius:var(--radius-md); border:none; background:var(--accent-gradient); color:#000; font-size:16px; font-weight:800; cursor:pointer; margin-top:20px; transition:all 0.3s; letter-spacing:0.3px; box-shadow:0 8px 24px rgba(var(--accent-rgb),0.3); }
.finish-workout-btn:active { transform:scale(0.97); box-shadow:0 4px 12px rgba(var(--accent-rgb),0.2); }
.finish-workout-btn:disabled { opacity:0.4; cursor:not-allowed; transform:none; box-shadow:none; }
.finish-workout-btn.completed { background:var(--accent-dim); color:var(--accent); box-shadow:none; border:1.5px solid rgba(var(--accent-rgb),0.3); }

/* ── Rest Day Screen ── */
.rest-day { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px 20px; min-height:60vh; }
.rest-day-icon { font-size:72px; margin-bottom:20px; animation: float 3s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.rest-day h2 { font-size:24px; font-weight:800; margin-bottom:8px; }
.rest-day p { font-size:15px; color:var(--text-secondary); max-width:280px; line-height:1.5; }
.rest-day .next-day { margin-top:24px; background:var(--accent-dim); color:var(--accent); padding:10px 20px; border-radius:var(--radius-pill); font-size:13px; font-weight:700; }

/* ── Quick-Log Bottom Sheet ── */
.sheet-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:100; opacity:0; transition:opacity 0.3s; pointer-events:none; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.sheet-overlay.active { opacity:1; pointer-events:auto; }
.sheet { position:fixed; bottom:0; left:0; right:0; z-index:101; background:var(--bg-sheet); border-radius:var(--radius-lg) var(--radius-lg) 0 0; padding:20px; padding-bottom:calc(20px + var(--safe-bottom)); transform:translateY(100%); transition:transform 0.35s cubic-bezier(0.4,0,0.2,1); box-shadow:var(--shadow-sheet); }
.sheet.active { transform:translateY(0); }
.sheet-handle { width:40px; height:4px; background:var(--border); border-radius:2px; margin:0 auto 16px; }
.sheet-title { font-size:16px; font-weight:700; margin-bottom:4px; }
.sheet-subtitle { font-size:13px; color:var(--text-muted); margin-bottom:20px; }
.sheet-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.sheet-label { font-size:14px; font-weight:600; color:var(--text-secondary); }
.sheet-stepper { display:flex; align-items:center; gap:12px; }
.stepper-btn { width:40px; height:40px; border-radius:50%; border:1.5px solid var(--border); background:var(--bg-card); color:var(--text-primary); font-size:20px; font-weight:700; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.2s; }
.stepper-btn:active { transform:scale(0.9); background:var(--accent-dim); border-color:var(--accent); }
.stepper-value { font-size:22px; font-weight:800; width:56px; text-align:center; background:transparent; border:none; color:var(--text-primary); -moz-appearance:textfield; }
.stepper-value::-webkit-outer-spin-button, .stepper-value::-webkit-inner-spin-button { -webkit-appearance:none; }
.sheet-confirm-btn { width:100%; padding:14px; border-radius:var(--radius-md); border:none; background:var(--accent-gradient); color:#000; font-size:15px; font-weight:800; cursor:pointer; transition:all 0.3s; margin-top:8px; }
.sheet-confirm-btn:active { transform:scale(0.97); }

/* ── Exercise Picker Sheet ── */
.picker-search { width:100%; padding:12px 16px; border-radius:var(--radius-md); border:1.5px solid var(--border); background:var(--bg-input); color:var(--text-primary); font-size:15px; font-weight:500; outline:none; transition:border-color 0.3s; margin-bottom:12px; }
.picker-search:focus { border-color:var(--accent); }
.picker-search::placeholder { color:var(--text-muted); }
.picker-categories { display:flex; gap:8px; overflow-x:auto; padding-bottom:12px; margin-bottom:12px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.picker-categories::-webkit-scrollbar { display:none; }
.picker-cat { padding:6px 14px; border-radius:var(--radius-pill); border:1px solid var(--border); background:transparent; color:var(--text-secondary); font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; transition:all 0.2s; text-transform:capitalize; }
.picker-cat.active { background:var(--accent-dim); color:var(--accent); border-color:rgba(var(--accent-rgb),0.3); }
.picker-cat:active { transform:scale(0.95); }
.picker-list { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:2px; scrollbar-width:none; min-height:0; }
.picker-list::-webkit-scrollbar { display:none; }
/* Full-screen picker — search stays visible when keyboard opens */
.picker-fullscreen { display:flex; flex-direction:column; height:100dvh; max-height:100dvh; border-radius:0; padding-top:calc(12px + var(--safe-top)); }
.picker-fullscreen.active { transform:translateY(0); }
.picker-header-sticky { flex-shrink:0; }
.picker-item { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-radius:var(--radius-sm); cursor:pointer; transition:all 0.2s; }
.picker-item:active { background:var(--accent-dim); transform:scale(0.98); }
.picker-item-name { font-size:14px; font-weight:600; }
.picker-item-badge { font-size:11px; color:var(--text-muted); background:var(--bg-input); padding:3px 8px; border-radius:var(--radius-pill); text-transform:capitalize; }
.picker-item.added { opacity:0.4; }
.picker-item.added::after { content:'✓'; color:var(--accent); font-weight:800; margin-left:8px; }
.picker-add-custom { display:flex; align-items:center; justify-content:center; gap:6px; padding:12px; margin-top:8px; border-radius:var(--radius-md); border:1.5px dashed var(--border); background:transparent; color:var(--accent); font-size:13px; font-weight:700; cursor:pointer; width:100%; transition:all 0.2s; }
.picker-add-custom:active { background:var(--accent-dim); }

/* ── Calendar ── */
.calendar-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.cal-month { font-size:18px; font-weight:800; }
.cal-nav { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); width:38px; height:38px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:20px; color:var(--text-primary); transition:all 0.2s; }
.cal-nav:active { transform:scale(0.9); background:var(--accent-dim); }
.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:24px; }
.cal-day-label { text-align:center; font-size:11px; color:var(--text-muted); font-weight:700; padding:4px 0; text-transform:uppercase; letter-spacing:0.5px; }
.cal-cell { aspect-ratio:1; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; cursor:pointer; transition:all 0.2s; border:1.5px solid transparent; position:relative; }
.cal-cell:active { transform:scale(0.88); }
.cal-cell.empty { cursor:default; }
.cal-cell.today { border-color:var(--accent); }
.cal-cell.completed { background:var(--accent-dim); color:var(--accent); }
.cal-cell.missed { background:var(--danger-dim); color:var(--danger); animation: missedPulse 2.5s ease-in-out infinite; }
@keyframes missedPulse { 0%,100%{box-shadow:0 0 0 0 rgba(var(--danger-rgb),0)} 50%{box-shadow:0 0 12px 2px rgba(var(--danger-rgb),0.15)} }
.cal-cell.rest-day { background:transparent; color:var(--text-muted); }
.cal-cell.future { color:var(--text-muted); opacity:0.5; }

.day-detail { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px; margin-bottom:20px; animation: pageIn 0.3s; }
.day-detail-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.day-detail-title { font-size:15px; font-weight:800; }
.day-detail-close { background:none; border:none; color:var(--text-muted); font-size:22px; cursor:pointer; padding:0 4px; }
.day-detail-exercises { display:flex; flex-direction:column; gap:8px; }
.day-exercise { background:var(--bg-input); border-radius:var(--radius-sm); padding:12px; }
.day-exercise-name { font-size:13px; font-weight:700; margin-bottom:6px; }
.day-exercise-sets { display:flex; flex-wrap:wrap; gap:6px; }
.day-set-chip { padding:4px 10px; border-radius:var(--radius-pill); font-size:12px; font-weight:600; background:var(--accent-dim); color:var(--accent); }
.day-no-data { text-align:center; color:var(--text-muted); font-size:14px; padding:20px 0; }

.streak-cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.streak-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px; text-align:center; }
.streak-card-label { display:block; font-size:12px; color:var(--text-muted); margin-bottom:8px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
.streak-card-value { font-size:22px; font-weight:800; color:var(--accent); }

/* ── Progress Page ── */
.pr-scroll { display:flex; gap:12px; overflow-x:auto; padding-bottom:12px; margin-bottom:24px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.pr-scroll::-webkit-scrollbar { display:none; }
.pr-card { flex-shrink:0; width:140px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); padding:16px; text-align:center; }
.pr-card-icon { font-size:24px; margin-bottom:6px; }
.pr-card-exercise { font-size:12px; color:var(--text-secondary); font-weight:600; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pr-card-value { font-size:20px; font-weight:800; color:var(--accent); }
.pr-card-date { font-size:11px; color:var(--text-muted); margin-top:4px; }

.section-title { font-size:14px; font-weight:800; margin-bottom:14px; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.5px; }

.volume-chart { display:flex; gap:6px; align-items:flex-end; height:120px; margin-bottom:24px; padding:16px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); }
.volume-bar { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; }
.volume-bar-fill { width:100%; border-radius:6px 6px 0 0; background:var(--accent-gradient); transition:height 0.6s cubic-bezier(0.4,0,0.2,1); min-height:4px; }
.volume-bar-label { font-size:10px; color:var(--text-muted); font-weight:700; }

.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:24px; }
.stat-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px; text-align:center; }
.stat-value { display:block; font-size:26px; font-weight:800; color:var(--accent); line-height:1; }
.stat-label { display:block; font-size:11px; color:var(--text-muted); margin-top:8px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }

.progress-select-wrap { margin-bottom:20px; }
.progress-select { width:100%; padding:12px 16px; border-radius:var(--radius-md); border:1.5px solid var(--border); background:var(--bg-input); color:var(--text-primary); font-size:14px; font-weight:500; appearance:none; -webkit-appearance:none; outline:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; transition:border-color 0.3s; }
.progress-select:focus { border-color:var(--accent); }
.progress-chart { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); padding:16px; min-height:100px; }
.progress-chart-empty { text-align:center; color:var(--text-muted); font-size:13px; padding:30px 0; }
.progress-chart svg { width:100%; height:120px; }
.progress-chart .chart-line { fill:none; stroke:var(--accent); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.progress-chart .chart-area { fill:url(#chartGradient); opacity:0.15; }
.progress-chart .chart-dot { fill:var(--accent); filter:drop-shadow(0 0 4px rgba(var(--accent-rgb),0.5)); }

/* ── Routines Page ── */
.routine-card { background:var(--bg-card); border:1.5px solid var(--border); border-radius:var(--radius-md); padding:18px; margin-bottom:12px; transition:all 0.3s; }
.routine-card.active-routine { border-color:rgba(var(--accent-rgb),0.4); background:var(--accent-dim); }
.routine-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.routine-card-name { font-size:16px; font-weight:800; }
.routine-card-badge { font-size:11px; font-weight:700; padding:4px 10px; border-radius:var(--radius-pill); background:var(--accent-dim); color:var(--accent); text-transform:uppercase; letter-spacing:0.5px; }
.routine-card-desc { font-size:13px; color:var(--text-muted); margin-bottom:10px; }
.routine-card-meta { font-size:12px; color:var(--text-secondary); margin-bottom:12px; }
.routine-card-actions { display:flex; gap:8px; }
.routine-btn { padding:8px 16px; border-radius:var(--radius-pill); border:1px solid var(--border); background:var(--bg-card-hover); color:var(--text-secondary); font-size:12px; font-weight:700; cursor:pointer; transition:all 0.2s; }
.routine-btn:active { transform:scale(0.95); }
.routine-btn.primary { background:var(--accent-dim); color:var(--accent); border-color:rgba(var(--accent-rgb),0.2); }
.routine-btn.danger { color:var(--danger); border-color:rgba(var(--danger-rgb),0.2); }
.routine-btn.danger:active { background:var(--danger-dim); }

.new-routine-btn { width:100%; padding:14px; border-radius:var(--radius-md); border:1.5px dashed var(--border); background:transparent; color:var(--accent); font-size:14px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:all 0.3s; margin-top:4px; }
.new-routine-btn:active { background:var(--accent-dim); transform:scale(0.98); }

/* ── Routine Editor (inline) ── */
.editor-exercise { display:flex; align-items:center; gap:10px; padding:12px; background:var(--bg-input); border-radius:var(--radius-sm); margin-bottom:8px; cursor:pointer; transition:all 0.2s; border:1.5px solid transparent; }
.editor-exercise:active { background:var(--bg-card-hover); border-color:rgba(var(--accent-rgb),0.2); }
.editor-exercise-info { flex:1; }
.editor-exercise-name { font-size:14px; font-weight:700; }
.editor-exercise-target { font-size:12px; color:var(--text-muted); margin-top:2px; }
.editor-exercise-edit-hint { font-size:11px; color:var(--accent); margin-top:3px; opacity:0.7; }
.editor-exercise-delete { width:32px; height:32px; border-radius:50%; border:none; background:var(--danger-dim); color:var(--danger); font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; flex-shrink:0; }
.editor-exercise-delete:active { transform:scale(0.9); }

/* ── Settings Page ── */
.settings-group { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px; margin-bottom:16px; }
.settings-group-title { font-size:13px; font-weight:800; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:14px; }
.setting-row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); }
.setting-row:last-child { border-bottom:none; }
.setting-row label { font-size:14px; color:var(--text-secondary); font-weight:500; }
.setting-value { font-size:14px; font-weight:600; }

.workout-days-grid { display:flex; gap:8px; flex-wrap:wrap; }
.day-toggle { width:42px; height:42px; border-radius:50%; border:1.5px solid var(--border); background:transparent; color:var(--text-muted); font-size:13px; font-weight:700; cursor:pointer; transition:all 0.3s; display:flex; align-items:center; justify-content:center; }
.day-toggle.active { background:var(--accent-dim); color:var(--accent); border-color:rgba(var(--accent-rgb),0.4); box-shadow:0 0 12px rgba(var(--accent-rgb),0.15); }
.day-toggle:active { transform:scale(0.88); }
.days-summary { font-size:12px; color:var(--text-muted); margin-top:10px; font-weight:600; }

.theme-toggle { display:flex; gap:8px; }
.theme-btn { padding:8px 16px; border-radius:var(--radius-pill); border:1px solid var(--border); background:var(--bg-card); color:var(--text-secondary); font-size:13px; font-weight:600; cursor:pointer; transition:all 0.3s; }
.theme-btn.active { background:var(--accent-dim); color:var(--accent); border-color:rgba(var(--accent-rgb),0.3); }
.accent-picker { display:flex; gap:10px; flex-wrap:wrap; }
.accent-dot { width:34px; height:34px; border-radius:50%; border:3px solid transparent; background:var(--dot-color); cursor:pointer; transition:all 0.3s; }
.accent-dot.active { border-color:var(--text-primary); transform:scale(1.15); box-shadow:0 0 14px var(--dot-color); }
.accent-dot:active { transform:scale(0.9); }

.danger-btn { width:100%; padding:12px; border-radius:var(--radius-sm); border:1px solid var(--danger); background:var(--danger-dim); color:var(--danger); font-size:14px; font-weight:700; cursor:pointer; margin-top:12px; transition:all 0.2s; }
.danger-btn:active { transform:scale(0.97); }
.app-version { text-align:center; color:var(--text-muted); font-size:13px; }

/* ── Bottom Nav ── */
.bottom-nav { display:flex; align-items:center; justify-content:space-around; height:var(--nav-height); padding-bottom:var(--safe-bottom); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-top:1px solid var(--border); background:rgba(3,4,9,0.85); flex-shrink:0; z-index:10; }
[data-theme="light"] .bottom-nav { background:rgba(244,245,249,0.88); }
.nav-item { display:flex; flex-direction:column; align-items:center; gap:4px; background:none; border:none; color:var(--text-muted); font-size:11px; font-weight:600; cursor:pointer; padding:8px 12px; transition:all 0.3s; position:relative; }
.nav-item.active { color:var(--accent); }
.nav-item.active::after { content:''; position:absolute; top:-1px; left:50%; transform:translateX(-50%); width:22px; height:3px; background:var(--accent-gradient); border-radius:0 0 3px 3px; }
.nav-item svg { width:22px; height:22px; transition:transform 0.3s; }
.nav-item.active svg { transform:scale(1.1); }

/* ── Toast ── */
.toast { position:fixed; bottom:calc(var(--nav-height) + 20px + var(--safe-bottom)); left:50%; transform:translateX(-50%) translateY(20px); padding:12px 24px; border-radius:var(--radius-lg); background:var(--accent-gradient); color:#000; font-weight:700; font-size:14px; z-index:200; opacity:0; transition:all 0.35s cubic-bezier(0.4,0,0.2,1); white-space:nowrap; pointer-events:none; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* PR Celebration */
@keyframes prCelebrate { 0%{transform:scale(0) rotate(-10deg);opacity:0} 50%{transform:scale(1.2) rotate(5deg)} 100%{transform:scale(1) rotate(0);opacity:1} }
.pr-toast { background:linear-gradient(135deg, #fbbf24, #f59e0b) !important; }

/* ── Confirm Dialog ── */
.confirm-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; transition:opacity 0.3s; pointer-events:none; backdrop-filter:blur(4px); }
.confirm-overlay.active { opacity:1; pointer-events:auto; }
.confirm-box { background:var(--bg-sheet); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; max-width:320px; width:100%; text-align:center; transform:scale(0.9); transition:transform 0.3s; }
.confirm-overlay.active .confirm-box { transform:scale(1); }
.confirm-title { font-size:18px; font-weight:800; margin-bottom:8px; }
.confirm-text { font-size:14px; color:var(--text-secondary); margin-bottom:20px; line-height:1.5; }
.confirm-actions { display:flex; gap:10px; }
.confirm-actions button { flex:1; padding:12px; border-radius:var(--radius-sm); font-size:14px; font-weight:700; cursor:pointer; transition:all 0.2s; }
.confirm-cancel { background:var(--bg-card); border:1px solid var(--border); color:var(--text-secondary); }
.confirm-danger { background:var(--danger); border:none; color:#fff; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:0; }

/* ── Animations ── */
@keyframes slideUp { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes popIn { 0%{transform:scale(0)} 60%{transform:scale(1.15)} 100%{transform:scale(1)} }
.anim-slide-up { animation: slideUp 0.4s cubic-bezier(0.4,0,0.2,1) both; }
.anim-pop { animation: popIn 0.4s cubic-bezier(0.4,0,0.2,1) both; }