:root{
  --bg:#16001b;
  --card:#24002c;
  --fg:#ffffff;
  --muted:#cdbce4;
  --accent:#ffcc00;
  --border:rgba(255,255,255,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,system-ui,Segoe UI,Roboto,Inter,Arial,sans-serif;background:var(--bg);color:var(--fg)}

.app-header{
  position:sticky;top:0;z-index:1000;
  display:grid;grid-template-columns:1fr auto;
  gap:10px;align-items:center;
  background:linear-gradient(90deg,rgba(75,0,130,.85),rgba(122,12,194,.85));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding:12px 14px;border-bottom:1px solid var(--border);
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}
.brand-block h1{margin:0;font-size:1.2rem;font-weight:900}
.nav-wrap{grid-column:1 / -1;display:flex;justify-content:center}
.nav-menu{position:relative;display:inline-flex;gap:6px;padding:6px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18)}
.nav-menu a{position:relative;z-index:1;color:#fff;text-decoration:none;font-weight:800;padding:10px 14px;border-radius:999px}
.nav-menu a.active{color:#1a001a}
.nav-indicator{position:absolute;top:4px;left:4px;height:calc(100% - 8px);width:0;background:linear-gradient(90deg,#ffcc00,#ffe171);border-radius:999px;box-shadow:0 6px 16px rgba(0,0,0,.2);transition:transform .25s ease,width .25s ease}
.menu-toggle{justify-self:end;width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff}
.actions{display:flex;gap:8px;align-items:center;justify-self:end}
.global-rest,.video-mode{display:flex;gap:6px;align-items:center;border:1px solid var(--border);padding:6px 8px;border-radius:10px}
.global-rest label,.video-mode label{font-size:.9rem;color:var(--muted)}
.global-rest select,.video-mode select{border:0;background:transparent;color:var(--fg);font-weight:700}

@media (max-width:820px){
  .nav-menu{display:none;flex-direction:column;gap:8px;width:100%;padding:8px}
  .nav-menu.show{display:flex}
  .nav-indicator{display:none}
}

main{padding:16px 12px 90px}
.panel{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:14px;padding:14px;box-shadow:0 8px 20px rgba(0,0,0,.22);margin-bottom:18px}
.exercise-list{list-style:none;margin:0;padding:0}
.exercise-list li{display:grid;grid-template-columns:1fr;gap:12px;padding:12px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);margin-bottom:10px}
@media(min-width:560px){.exercise-list li{grid-template-columns:1fr auto;align-items:center}}

.video-actions{display:flex;gap:10px;flex-wrap:wrap}
.video,button.video{padding:10px 14px;border-radius:12px;font-weight:800;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff}
.video:hover,button.video:hover{background:rgba(255,255,255,.12)}

.player{aspect-ratio:16/9;width:100%;border-radius:12px;overflow:hidden;margin:12px 0}
.yt-iframe{width:100%;height:100%;border:0;display:block}

#notesArea{width:100%;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.05);color:var(--fg);padding:10px;font-size:1rem}

.workout-bar{position:fixed;left:0;bottom:0;width:100%;display:flex;justify-content:space-around;background:linear-gradient(90deg,#4b0082,#7a0cc2);padding:max(10px, env(safe-area-inset-bottom));box-shadow:0 -2px 10px rgba(0,0,0,.25);z-index:1000}
.workout-bar button{flex:1;color:#fff;font-weight:800;background:none;border:none;font-size:1.05rem;padding:8px 0;border-radius:12px}

.timer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:2000}
.timer-overlay.hidden{display:none}
.timer-box{background:#fff;padding:20px;border-radius:20px;text-align:center;width:86%;max-width:360px}
.timer-box h2{margin-top:0;color:#4b0082}
#timer-display{font-size:2.6rem;font-weight:800;margin:10px 0;color:#1a001a}
.timer-controls button{margin:6px;padding:10px 16px;border-radius:10px;background:#4b0082;color:#fff;border:none;font-weight:700}


/* Clean cues beneath exercise names */
.cues{ margin:0; padding:0 0 0 16px; color:var(--muted); font-size:.95rem; }
.cues li{ margin:2px 0; }
.exercise-list li .cues + .video-actions{ margin-top:4px; }


/* === Weekly Progress Widget === */
.progress-panel h2{ margin-top: 0; }
.progress-grid{ display:grid; grid-template-columns: 1fr; gap:12px; }
.prog{ display:grid; grid-template-columns: 60px 1fr 48px; align-items:center; gap:10px; }
.prog.total label{ font-weight: 900; }
.prog label{ color: var(--muted); font-weight: 700; }
.bar{ position:relative; height:12px; background: rgba(255,255,255,0.08); border-radius:999px; overflow:hidden; }
.bar span{ position:absolute; left:0; top:0; height:100%; background: linear-gradient(90deg,#ffcc00,#ffe171); border-radius:999px; width:0%; transition: width .25s ease; }
.prog em{ font-style: normal; font-weight: 900; color: #ffe171; text-align:right; }
@media(min-width:600px){ .progress-grid{ grid-template-columns: 1fr 1fr; } }


/* Progress header with reset button */
.progress-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.chip{
  border:1px solid var(--border);
  background: rgba(255,255,255,0.06);
  color:#fff;
  padding:8px 12px;
  border-radius:999px;
  font-weight:800;
}
.chip:hover{ background: rgba(255,255,255,0.12); }
.progress-panel small.note{ color: var(--muted); }