/* =====================
   THEME VARIABLES
===================== */
:root{
  --bg-gradient-start:#020617;
  --bg-gradient-end:#0f172a;
  --bg-surface:#111827;
  --bg-soft:#0f172a;

  --border:#1f2937;
  --border-strong:#374151;

  --text-main:#ffffff;
  --text-muted:#94a3b8;

  --accent:#22c55e;
  --accent-soft:#4ade80;
  --danger:#ef4444;
}

/* =====================
   THEMES
===================== */
[data-theme="neon"]{
  --accent:#22c55e;
  --accent-soft:#4ade80;
}
[data-theme="crimson"]{
  --accent:#ef4444;
  --accent-soft:#f87171;
  --danger:#b91c1c;
}
[data-theme="ocean"]{
  --accent:#0ea5e9;
  --accent-soft:#38bdf8;
}
[data-theme="gold"]{
  --accent:#f59e0b;
  --accent-soft:#fbbf24;
}
[data-theme="void"]{
  --bg-gradient-start:#000000;
  --bg-gradient-end:#050505;
  --bg-surface:#0a0a0a;
  --accent:#8b5cf6;
  --accent-soft:#a78bfa;
}

/* =====================
   RESET / GLOBAL
===================== */
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{
  height:100%; width:100%;
  font-family:system-ui,Arial,sans-serif;
  background:linear-gradient(135deg,var(--bg-gradient-start),var(--bg-gradient-end));
  color:var(--text-main);
  overflow-x:hidden;
}
body{ display:flex; flex-direction:column; align-items:center; min-height:100dvh; }

/* =====================
   APP WRAP
===================== */
.app-wrap{
  width:100%; max-width:980px; min-height:100vh;
  flex:1; display:flex; flex-direction:column; align-items:center;
  padding-bottom:60px;
  background:linear-gradient(135deg,var(--bg-gradient-start),var(--bg-gradient-end));
  color:var(--text-main);
}

/* =====================
   CONTENT
===================== */
.content{
  flex:1; width:100%; display:flex; flex-direction:column;
  gap:16px; padding:20px 14px; overflow-y:auto;
}

/* =====================
   HERO
===================== */
.hero{
  width:100%; text-align:center; padding:32px 22px 20px;
  border-bottom:1px solid var(--border);
}
.hero-inner{ max-width:980px; margin:0 auto; }
.hero-title{ font-size:2.3rem; font-weight:900; }
.hero-sub{ margin-top:6px; color:var(--text-muted); font-size:.95rem; font-weight:600; }

/* ===== SUMMARY ===== */
.hero-summary{
  margin-top:22px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
}
.hero-stat{
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:16px; padding:14px; text-align:center; transition:.2s ease;
}
.hero-stat:hover{ border-color:var(--accent); box-shadow:0 0 12px color-mix(in srgb, var(--accent) 40%, transparent);}
.hero-stat-label{ font-size:.7rem; opacity:.6; }
.hero-stat-value{ font-size:1.3rem; font-weight:900; }

/* =====================
   CARDS & EXERCISES
===================== */
.card{
  background:linear-gradient(180deg,var(--bg-surface),#0b1220);
  border-radius:22px; padding:24px; border:2px solid var(--border-strong);
  box-shadow:0 20px 60px rgba(0,0,0,.7); display:flex; flex-direction:column; align-items:center; text-align:center;
  animation:enter .35s ease;
}
.card.boss{
  border-color:var(--danger);
  box-shadow:0 0 40px var(--danger)66, 0 0 80px var(--danger)22 inset;
  animation:bossPulse 1.6s infinite;
}
@keyframes bossPulse{0%,100%{box-shadow:0 0 30px var(--danger)44}50%{box-shadow:0 0 70px var(--danger)88}}
@keyframes enter{from{opacity:0; transform:translateY(24px)}}

.exercise{
  background:var(--bg-surface); border-radius:20px; padding:18px; margin-bottom:16px;
  border:2px solid var(--border); box-shadow:0 10px 30px rgba(0,0,0,.4); position:relative; transition:.25s ease;
}
.exercise:hover{ border-color:var(--accent); box-shadow:0 0 18px color-mix(in srgb,var(--accent)30%,transparent);}
.exercise-index{
  position:absolute; top:-10px; right:12px;
  background:var(--accent); color:#000; font-weight:900; font-size:.8rem;
  padding:4px 9px; border-radius:999px;
}
.exercise h3{ margin:0 0 12px; font-size:1.15rem; }

/* ===== INFO GRID ===== */
.row{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:10px; }
.badge{ background:var(--bg-soft); border:1px solid var(--border); border-radius:12px; padding:8px 6px; text-align:center; transition:.2s ease;}
.badge:hover{ border-color:var(--accent);}
.badge-label{ font-size:.65rem; opacity:.6; }
.badge-value{ font-size:.95rem; font-weight:800; }

/* ===== XP BAR ===== */
.xpbar{ margin-top:12px; height:8px; background:var(--border); border-radius:999px; overflow:hidden; }
.xpfill{ height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-soft)); transition:width .4s ease; }

/* =====================
   TABS
===================== */
.tabs{
  position:fixed; bottom:0; left:0; width:100%; height:60px;
  background:var(--bg-surface); border-top:1px solid var(--border);
  display:flex; justify-content:space-around; align-items:center;
  padding-bottom:env(safe-area-inset-bottom); z-index:100;
}
.tab{
  display:flex; flex-direction:column; align-items:center;
  color:#cbd5e1; font-weight:600; cursor:pointer;
  padding:6px 8px; font-size:.85rem; transition:color .2s ease;
}
.tab:hover, .tab.active{ color:var(--accent);}
.tab-icon{ width:30px; height:30px; margin-bottom:4px; filter:brightness(0.8); }
.tab.active .tab-icon, .tab:hover .tab-icon{ filter:brightness(1) drop-shadow(0 0 4px var(--accent)); }

/* =====================
   HEADER
===================== */
.app-header{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; background:var(--bg-surface); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:50;
}
.header-title{ flex:1; text-align:center; }
.backButton{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; background:none; border:none; color:var(--text-main); cursor:pointer;
}
.backButton svg{ width:100%; height:100%; }

/* =====================
   FOOTER
===================== */
.footer{
  position:fixed; bottom:0; left:0; right:0; padding:16px; background:var(--bg-soft); border-top:1px solid var(--border);
}

/* =====================
   BUTTONS
===================== */
button.primary{
  background:linear-gradient(180deg,var(--accent),var(--accent-soft));
  border:none; border-radius:999px; padding:16px 22px; font-weight:1000;
  margin:22px auto 0; cursor:pointer; font-size:1rem; letter-spacing:.5px; display:block;
  color: white;
}
button.primary:active{ transform:scale(.97); }

/* =====================
   RESPONSIVE
===================== */
@media(max-width:768px){ .hero{width:85%;} .list{width:90%;} .row{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){
  .hero-title{font-size:1.8rem;} .hero-sub{font-size:.85rem;} .entry-title{font-size:1.1rem;}
  .tab-icon{width:24px;height:24px;} .tab{font-size:.75rem;}
}
@media(max-width:380px) and (max-height:700px){
  .hero-inner{padding:8px 12px;gap:6px;} .level{font-size:1rem;} .session-xp{font-size:.75rem;}
  .xp-bar{height:8px;} .combo{font-size:.75rem;}
  .card{padding:14px;border-radius:16px;} .exercise{font-size:1.15rem;margin-bottom:6px;}
  .meta{font-size:.65rem;} .muscle-icon{width:80px;margin:8px auto;}
  .set-box{font-size:.85rem;margin:6px 0;} .set-progress{height:10px;}
  .info-grid{gap:6px;margin-top:12px;} .badge{padding:6px 4px;}
  .badge-label{font-size:.6rem;} .badge-value{font-size:.8rem;}
  button.primary{padding:12px 16px;font-size:.85rem;margin-top:14px;}
  #pauseCircle{width:130px;height:130px;} #skipPauseBtn{padding:8px;font-size:.75rem;}
}

/* =====================
   ANIMATION
===================== */
@keyframes breath{0%,100%{transform:scale(1);}50%{transform:scale(1.1);}}
@keyframes pulseGlow{0%{box-shadow:0 0 0 rgba(34,197,94,0);}50%{box-shadow:0 0 12px rgba(34,197,94,.6);}100%{box-shadow:0 0 0 rgba(34,197,94,0);}}