/* ═══════════════════════════════════════════════════════════════════
   SabrFitness — Premium Design System
   Inspired by Hevy + Nike Training Club + Apple Fitness+
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design Tokens ── */
:root {
  --accent:       #FF4D00;
  --accent2:      #FF7A00;
  --accent3:      #FFB800;
  --green:        #00D084;
  --red:          #FF2D55;
  --orange:       #FF6B00;
  --yellow:       #FFD60A;
  --blue:         #0A84FF;
  --radius:       16px;
  --radius-sm:    12px;
  --radius-pill:  50px;
  --sidebar:      240px;
  --topbar-h:     56px;
  --grad-accent:  linear-gradient(135deg, #FF4D00 0%, #FF7A00 60%, #FFB800 100%);
  --grad-green:   linear-gradient(135deg, #00D084, #00A86B);
  --grad-orange:  linear-gradient(135deg, #FF4D00, #FF2D55);
  --shadow-glow:  0 8px 32px rgba(255,77,0,0.45);
  --shadow-card:  0 4px 24px rgba(0,0,0,0.35);
  --transition:   cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Dark Theme ── */
.dark {
  --bg:      #080808;
  --bg2:     #0e0e0e;
  --bg3:     #141414;
  --bg4:     #1a1a1a;
  --card:    rgba(255,255,255,0.03);
  --card-solid: #111111;
  --border:  rgba(255,255,255,0.07);
  --border2: rgba(255,255,255,0.13);
  --text:    #F5F5F5;
  --text2:   #888888;
  --text3:   #444444;
  --glass:   rgba(255,255,255,0.04);
  --glass-border: rgba(255,255,255,0.09);
}

/* ── Light Theme ── */
.light {
  --bg:      #f4f4fc;
  --bg2:     #ffffff;
  --bg3:     #ebebf7;
  --bg4:     #e0e0f0;
  --card:    rgba(255,255,255,0.85);
  --card-solid: #ffffff;
  --border:  rgba(0,0,0,0.07);
  --border2: rgba(0,0,0,0.12);
  --text:    #0d0d1a;
  --text2:   #55558a;
  --text3:   #aaaacc;
  --glass:   rgba(255,255,255,0.7);
  --glass-border: rgba(0,0,0,0.08);
}

/* ══════════════════════════════════════════════════════ BASE ══ */
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 15px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
  margin: 0;
}

a { color: var(--accent); text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: 1.3rem;  font-weight: 700; letter-spacing: -0.02em; }
h3 { font-size: 1rem;    font-weight: 600; }
.hidden { display: none !important; }
.flex1 { flex: 1; }

/* ══════════════════════════════════════════════════════ SCROLLBAR ══ */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--text3); }

/* ══════════════════════════════════════════════════════ INPUTS ══ */
input[type=text], input[type=email], input[type=password],
input[type=number], input[type=tel], input[type=date],
select, textarea {
  background: var(--bg3);
  border: 1.5px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: .7rem 1rem;
  font-size: 14px;
  font-family: inherit;
  width: 100%;
  outline: none;
  transition: border-color .2s var(--transition), box-shadow .2s var(--transition), background .2s;
  box-sizing: border-box;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,.18);
  background: var(--bg4);
}
input::placeholder { color: var(--text3); }

/* ══════════════════════════════════════════════════════ ANIMATIONS ══ */
@keyframes fadeIn    { from{opacity:0}                         to{opacity:1} }
@keyframes slideUp   { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideIn   { from{opacity:0;transform:translateX(-16px)} to{opacity:1;transform:translateX(0)} }
@keyframes pulse     { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
@keyframes bounce    { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-14px) scale(1.12)} }
@keyframes shimmer   { 0%{background-position:-200% center} 100%{background-position:200% center} }
@keyframes glow-pulse{ 0%,100%{opacity:.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.15)} }
@keyframes spin      { to{transform:rotate(360deg)} }
@keyframes modal-in  { from{opacity:0;transform:scale(.94) translateY(10px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes page-in   { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes toast-in  { from{opacity:0;transform:translateX(-50%) translateY(10px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
@keyframes celeb-in  { from{opacity:0;transform:scale(.88)} to{opacity:1;transform:scale(1)} }
@keyframes celeb-title-in { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes bounce-emoji { from{transform:translateY(0) scale(1)} to{transform:translateY(-16px) scale(1.15)} }
@keyframes shake     { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
@keyframes ob-step-in{ from{opacity:0;transform:translateX(24px)} to{opacity:1;transform:translateX(0)} }
@keyframes ft-enter  { from{opacity:0;transform:scale(.88)} to{opacity:1;transform:scale(1)} }
@keyframes tick-pop  { 0%{transform:scale(1)} 40%{transform:scale(1.07)} 100%{transform:scale(1)} }
@keyframes plankBreath  { 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(1.04)} }
@keyframes pullUpAnim   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-36px)} }
@keyframes pushUpAnim   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-22px)} }
@keyframes squatAnim    { 0%,100%{transform:scaleY(1) translateY(0)} 50%{transform:scaleY(.72) translateY(12px)} }
@keyframes holdPulse    { 0%,100%{opacity:1;r:54} 50%{opacity:.35;r:70} }
@keyframes runBob       { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
@keyframes curlAnim     { 0%,100%{transform:rotate(0deg)} 50%{transform:rotate(-60deg)} }
@keyframes pressAnim    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-28px)} }
@keyframes lsitAnim     { 0%,100%{opacity:1} 50%{opacity:.6} }
@keyframes dipAnim      { 0%,100%{transform:translateY(0)} 50%{transform:translateY(22px)} }

/* ══════════════════════════════════════════════════════ SKELETON ══ */
.skeleton {
  background: linear-gradient(90deg, var(--bg3) 25%, var(--bg4) 50%, var(--bg3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 8px;
}

/* ══════════════════════════════════════════════════════ GLASS CARD ══ */
.glass-card {
  background: var(--card);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius);
}

/* ══════════════════════════════════════════════════════ GRADIENT TEXT ══ */
.gradient-text {
  background: var(--grad-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ══════════════════════════════════════════════════════ BUTTONS ══ */
.btn-primary {
  background: linear-gradient(135deg, #6366f1, #a855f7);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 15px;
  padding: .75rem 1.5rem;
  cursor: pointer;
  transition: transform .15s var(--transition), box-shadow .2s var(--transition), opacity .2s;
  letter-spacing: -.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background .2s;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}
.btn-primary:hover::after { background: rgba(255,255,255,.06); }
.btn-primary:active { transform: translateY(0); box-shadow: none; }
.btn-primary.full { width: 100%; margin-bottom: .5rem; }

.glow-btn {
  background: linear-gradient(135deg, #6366f1, #a855f7);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 700;
  padding: .75rem 1.5rem;
  transition: transform .15s var(--transition), box-shadow .25s var(--transition);
}
.glow-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); }

.btn-ghost {
  background: transparent;
  border: 1.5px solid var(--border2);
  color: var(--text);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 14px;
  padding: .7rem 1.25rem;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s;
}
.btn-ghost:hover {
  background: var(--bg3);
  border-color: var(--text3);
  transform: translateY(-1px);
}
.btn-ghost.full { width: 100%; margin-bottom: .5rem; }
.btn-ghost.small { padding: .4rem .9rem; font-size: 13px; }

.btn-outline {
  border: 2px dashed var(--border2);
  color: var(--text2);
  border-radius: var(--radius-sm);
  padding: .8rem;
  font-size: 14px;
  font-weight: 600;
  width: 100%;
  margin-top: 1rem;
  transition: border-color .2s, color .2s, background .2s;
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); background: rgba(99,102,241,.06); }

.btn-icon {
  background: var(--bg3);
  border: 1px solid var(--border2);
  color: var(--text2);
  border-radius: 8px;
  padding: .35rem .7rem;
  font-size: 13px;
  transition: background .2s, color .2s;
}
.btn-icon:hover { background: var(--bg4); color: var(--text); }

.btn-danger {
  background: rgba(244,63,94,.12);
  color: var(--red);
  border-radius: var(--radius-sm);
  padding: .6rem 1.2rem;
  font-size: 14px;
  border: 1px solid rgba(244,63,94,.25);
  font-weight: 600;
  transition: background .2s;
}
.btn-danger:hover { background: rgba(244,63,94,.22); }

.btn-row { display: flex; gap: .75rem; flex-wrap: wrap; }
.btn-sm  { padding: .35rem .75rem; font-size: 13px; border-radius: 8px; }

.btn-auth-primary {
  width: 100%;
  padding: .85rem;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: .95rem;
  margin-top: .75rem;
  transition: transform .15s var(--transition), box-shadow .2s var(--transition), opacity .2s;
  box-shadow: 0 4px 18px rgba(99,102,241,.3);
}
.btn-auth-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(99,102,241,.45); }

.btn-auth-ghost {
  width: 100%;
  padding: .78rem;
  background: var(--bg3);
  color: var(--text);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .9rem;
  margin-top: .5rem;
  border: 1.5px solid var(--border2);
  transition: background .2s, border-color .2s;
}
.btn-auth-ghost:hover { background: var(--bg4); border-color: var(--text3); }

/* ── Chips / Pills ── */
.chip, .pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .75rem;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
.chip { border-radius: 8px; }

/* ══════════════════════════════════════════════════════ AUTH SCREEN ══ */
.auth-screen { display:none; position:fixed; inset:0; z-index:9999; overflow:auto; }
.auth-screen.active { display:flex; }

.auth-left {
  flex: 1;
  background: linear-gradient(135deg, #06060e 0%, #100820 40%, #0d1528 100%);
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.auth-left::before {
  content: '';
  position: absolute;
  top: -100px; right: -80px;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(99,102,241,.35) 0%, transparent 70%);
  pointer-events: none;
  animation: glow-pulse 3s ease-in-out infinite;
}
.auth-left::after {
  content: '';
  position: absolute;
  bottom: -60px; left: -60px;
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(168,85,247,.18) 0%, transparent 70%);
  pointer-events: none;
}

.auth-brand { position: relative; z-index: 1; }
.auth-logo {
  width: 68px; height: 68px;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 10px 40px rgba(99,102,241,.5);
}
.auth-brand-name {
  font-size: 2.6rem;
  font-weight: 900;
  color: #fff;
  margin: 0 0 .4rem;
  letter-spacing: -.04em;
  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,.8) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.auth-brand-tag { color: rgba(255,255,255,.55); font-size: 1rem; margin: 0; }

.auth-features {
  list-style: none;
  margin: 2.5rem 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: relative;
  z-index: 1;
}
.auth-features li { display: flex; align-items: flex-start; gap: 1rem; }
.auth-feat-icon {
  width: 44px; height: 44px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.auth-features li div strong { display: block; color: #fff; font-size: .95rem; margin-bottom: .2rem; font-weight: 700; }
.auth-features li div p { color: rgba(255,255,255,.48); font-size: .82rem; margin: 0; }
.auth-left-foot { color: rgba(255,255,255,.25); font-size: .78rem; margin: 2rem 0 0; position: relative; z-index: 1; }

.auth-right {
  flex: 1;
  background: var(--bg);
  overflow-y: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 3rem 2rem;
}
.auth-form-wrap { width: 100%; max-width: 460px; }
.auth-tabs {
  display: flex;
  background: var(--bg3);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 2rem;
  gap: 4px;
}
.auth-tab {
  flex: 1;
  padding: .65rem;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text2);
  transition: all .2s var(--transition);
}
.auth-tab.active {
  background: linear-gradient(135deg, #6366f1, #a855f7);
  color: #fff;
  box-shadow: 0 4px 14px rgba(99,102,241,.35);
}
.auth-form-title { font-size: 1.55rem; font-weight: 800; color: var(--text); margin-bottom: .25rem; letter-spacing: -.02em; }
.auth-form-sub { color: var(--text2); font-size: .9rem; margin-bottom: 1.75rem; }

.input-icon-wrap { position: relative; }
.input-icon-wrap input { padding-left: 2.6rem; width: 100%; }
.input-icon { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); font-size: 1rem; pointer-events: none; }
.input-suffix { position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); font-size: .8rem; color: var(--text2); pointer-events: none; }
.pw-toggle { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); background: none; color: var(--text2); font-size: .9rem; padding: .2rem .4rem; transition: color .2s; }
.pw-toggle:hover { color: var(--text); }

.pw-strength-bar { height: 4px; background: var(--bg3); border-radius: 4px; margin-top: .4rem; overflow: hidden; }
#pwStrengthFill { height: 100%; border-radius: 4px; width: 0; transition: width .35s var(--transition), background .35s; }

.gender-picker { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.gender-opt {
  display: flex; align-items: center; gap: .5rem;
  background: var(--bg3); border: 2px solid var(--border2);
  border-radius: 12px; padding: .7rem 1rem;
  cursor: pointer; transition: all .2s var(--transition);
  font-size: .88rem; font-weight: 600;
}
.gender-opt:has(input:checked) { border-color: var(--accent); background: rgba(99,102,241,.1); color: var(--accent); }
.gender-opt input { display: none; }

.goal-picker { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; }
.goal-opt {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--bg3); border: 2px solid var(--border2);
  border-radius: 12px; padding: .7rem .5rem;
  cursor: pointer; transition: all .2s; font-size: .82rem; font-weight: 600;
}
.goal-opt:has(input:checked) { border-color: var(--accent); background: rgba(99,102,241,.1); color: var(--accent); }
.goal-opt input { display: none; }

.level-picker { display: flex; gap: .5rem; }
.level-opt {
  flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--bg3); border: 2px solid var(--border2);
  border-radius: 12px; padding: .8rem .5rem;
  cursor: pointer; transition: all .2s;
}
.level-opt:has(input:checked) { border-color: var(--accent); background: rgba(99,102,241,.1); }
.level-opt input { display: none; }
.level-opt span { font-weight: 700; font-size: .88rem; display: block; }
.level-opt small { color: var(--text2); font-size: .75rem; display: block; margin-top: .2rem; }
.level-opt:has(input:checked) span, .level-opt:has(input:checked) small { color: var(--accent); }

.reg-steps { display: flex; align-items: center; margin-bottom: 1.5rem; }
.reg-step { display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.reg-step span {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg3); border: 2px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .8rem; color: var(--text2);
  transition: all .25s var(--transition);
}
.reg-step.active span, .reg-step.done span {
  background: linear-gradient(135deg, #6366f1, #a855f7);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(99,102,241,.4);
}
.reg-step small { font-size: .7rem; color: var(--text2); font-weight: 600; }
.reg-step.active small { color: var(--accent); }
.reg-step-line { flex: 1; height: 2px; background: var(--border2); margin: 0 .4rem .9rem; transition: background .25s; }
.reg-step-line.done { background: linear-gradient(90deg, #6366f1, #a855f7); }

.checkbox-label { display: flex; align-items: flex-start; gap: .6rem; font-size: .85rem; color: var(--text2); cursor: pointer; }
.checkbox-label input { margin-top: .15rem; flex-shrink: 0; accent-color: var(--accent); }
.checkbox-label a { color: var(--accent); font-weight: 600; }
.opt-tag { font-size: .7rem; font-weight: 500; color: var(--text2); background: var(--bg3); padding: .1rem .4rem; border-radius: 20px; margin-left: .3rem; }

.auth-switch { text-align: center; font-size: .85rem; color: var(--text2); margin-top: 1.25rem; }
.auth-switch a { color: var(--accent); font-weight: 600; }

.field { margin-bottom: 1rem; }
.field label { display: block; font-size: 13px; color: var(--text2); margin-bottom: .4rem; font-weight: 600; }
.form-error { color: var(--red); font-size: 13px; margin-bottom: .5rem; min-height: 1.2em; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }

@media (max-width: 768px) { .auth-left { display: none; } .auth-right { padding: 2rem 1.25rem; } }

/* ══════════════════════════════════════════════════════ TOPBAR ══ */
.top-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: rgba(8,8,16,.85);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem 0 calc(var(--sidebar) + 1.5rem);
  z-index: 110;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.light .top-bar { background: rgba(244,244,252,.9); }

.top-bar-right { display: flex; align-items: center; gap: .75rem; }

.sidebar-toggle { display: none; background: var(--bg3); border: 1px solid var(--border2); border-radius: 8px; padding: .4rem .65rem; font-size: 1.1rem; color: var(--text2); transition: color .2s, background .2s; }
.sidebar-toggle:hover { background: var(--bg4); color: var(--text); }

.theme-toggle-btn { background: var(--bg3); border: 1px solid var(--border2); border-radius: 10px; padding: .4rem .65rem; font-size: 1rem; color: var(--text2); transition: background .2s, color .2s; }
.theme-toggle-btn:hover { background: var(--bg4); color: var(--text); }

/* Legacy topbar (keep compatibility) */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: rgba(8,8,16,.85);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem 0 calc(var(--sidebar) + 1.5rem);
  z-index: 110;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.light .topbar { background: rgba(244,244,252,.9); }
.topbar-brand {
  font-size: 1rem; font-weight: 800;
  background: var(--grad-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.topbar-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; color: #fff;
  cursor: pointer; overflow: hidden;
  border: 2px solid rgba(99,102,241,.4);
  position: relative; flex-shrink: 0;
  transition: transform .2s, box-shadow .2s;
}
.topbar-avatar:hover { transform: scale(1.08); box-shadow: 0 4px 16px rgba(99,102,241,.4); }
.topbar-avatar img { width: 100%; height: 100%; object-fit: cover; }

.avatar-dropdown {
  position: absolute; top: calc(var(--topbar-h) + 4px); right: 0;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  z-index: 999; min-width: 190px; overflow: hidden; display: none;
  animation: modal-in .2s var(--transition);
}
.avatar-dropdown.open { display: block; }
.avatar-dd-item {
  padding: .75rem 1rem; font-size: 14px;
  cursor: pointer; display: flex; align-items: center; gap: .6rem;
  transition: background .15s;
  font-weight: 500;
}
.avatar-dd-item:hover { background: var(--bg3); }

/* Top Avatar (new) */
.top-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; color: #fff;
  cursor: pointer; overflow: hidden;
  border: 2px solid rgba(99,102,241,.4);
  transition: transform .2s var(--transition), box-shadow .2s;
}
.top-avatar:hover { transform: scale(1.08); box-shadow: 0 4px 16px rgba(99,102,241,.4); }
.top-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ══════════════════════════════════════════════════════ SIDEBAR ══ */
#app { display: flex; min-height: 100vh; padding-top: var(--topbar-h); }

#sidebar {
  width: var(--sidebar);
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: var(--topbar-h); left: 0;
  height: calc(100vh - var(--topbar-h));
  z-index: 100;
  overflow-y: auto;
  transition: transform .3s var(--transition);
}

.sidebar-logo {
  padding: 1.5rem 1.25rem 1.25rem;
  display: flex; align-items: center; gap: .6rem;
  font-size: 1.25rem; font-weight: 900;
  background: var(--grad-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  border-bottom: 1px solid var(--border);
  margin-bottom: .75rem;
  letter-spacing: -.02em;
}

.nav-links { list-style: none; flex: 1; padding: 0 .75rem; }
.nav-links li { margin-bottom: .15rem; }

.nav-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem 1rem;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text2);
  text-decoration: none;
  transition: background .15s var(--transition), color .15s var(--transition), transform .15s;
  position: relative;
}
.nav-link:hover { background: var(--bg3); color: var(--text); }
.nav-link.active {
  background: linear-gradient(135deg, rgba(99,102,241,.15), rgba(168,85,247,.1));
  color: var(--accent);
  border: 1px solid rgba(99,102,241,.2);
}
.nav-icon { font-size: 1.15rem; }

.sidebar-bottom {
  padding: 1rem .75rem;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.sidebar-user { font-size: 13px; color: var(--text2); margin-bottom: .6rem; font-weight: 500; }

#mainContent {
  margin-left: var(--sidebar);
  flex: 1;
  padding: 2rem;
  max-width: calc(100vw - var(--sidebar));
  min-height: calc(100vh - var(--topbar-h));
}

/* ══════════════════════════════════════════════════════ BOTTOM NAV ══ */
#bottomNav, .bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 64px;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  z-index: 100;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.bot-btn, .bottom-nav-item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .2rem; padding: .5rem .25rem;
  font-size: 1.25rem; color: var(--text2);
  transition: color .2s var(--transition), transform .15s;
  border-radius: 0;
}
.bot-btn span, .bnav-label { font-size: 10px; font-weight: 700; letter-spacing: .03em; }
.bot-btn.active, .bottom-nav-item.active { color: var(--accent); }
.bot-btn.active .bnav-icon, .bottom-nav-item.active .bnav-icon { transform: scale(1.15); }
.bnav-icon { font-size: 1.25rem; transition: transform .2s var(--transition); }

/* ══════════════════════════════════════════════════════ PAGES ══ */
.page { display: none; }
.page.active { display: block; animation: page-in .24s var(--transition) both; }

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.page-header .sub { color: var(--text2); font-size: 14px; margin-top: .25rem; }
.page-header h1 {
  background: linear-gradient(135deg, var(--text) 0%, var(--text2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Section title */
.section-title {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: .85rem;
}
.section-title.gradient {
  background: var(--grad-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Page hero */
.page-hero {
  background: linear-gradient(135deg, rgba(99,102,241,.12) 0%, rgba(168,85,247,.08) 50%, rgba(236,72,153,.06) 100%);
  border: 1px solid rgba(99,102,241,.18);
  border-radius: 20px;
  padding: 1.75rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(99,102,241,.18) 0%, transparent 70%);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════ CARDS ══ */
.card {
  background: var(--card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 1.4rem;
  margin-bottom: 1.25rem;
  transition: transform .2s var(--transition), box-shadow .2s var(--transition), border-color .2s;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.dark .card { box-shadow: var(--shadow-card); }
.card:hover { transform: translateY(-2px); box-shadow: 0 14px 48px rgba(0,0,0,.22); border-color: rgba(99,102,241,.18); }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.1rem; }
.card-header h3 { font-size: 1rem; font-weight: 700; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

/* ══════════════════════════════════════════════════════ STAT CARDS ══ */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }

.stat-card {
  background: var(--card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 1.2rem 1.1rem;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  transition: transform .2s var(--transition), box-shadow .2s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(0,0,0,.2); }
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad-accent);
  opacity: 0;
  transition: opacity .3s;
}
.stat-card:hover::before { opacity: 1; }

.stat-label {
  font-size: 11px; color: var(--text2); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
}
.stat-value {
  font-size: 2rem; font-weight: 900; margin: .3rem 0 .15rem;
  background: var(--grad-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
  letter-spacing: -.04em;
}
.stat-sub { font-size: 12px; color: var(--text3); }

/* ══════════════════════════════════════════════════════ EXERCISE CARDS ══ */
.exercise-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 1rem; }

.exercise-card {
  background: var(--card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: border-color .2s var(--transition), transform .2s var(--transition), box-shadow .2s;
  position: relative;
  overflow: hidden;
}
.exercise-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(99,102,241,.05), transparent);
  opacity: 0;
  transition: opacity .25s;
}
.exercise-card:hover {
  border-color: rgba(99,102,241,.35);
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(99,102,241,.12);
}
.exercise-card:hover::after { opacity: 1; }

.ex-name { font-weight: 700; font-size: 15px; color: var(--text); margin-bottom: .5rem; }
.ex-meta { display: flex; flex-wrap: wrap; gap: .35rem; }

/* ── Badges ── */
.badge {
  display: inline-flex; align-items: center;
  padding: .22rem .65rem;
  border-radius: 8px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--bg3); color: var(--text2);
}
.cat-strength     { background: rgba(59,130,246,.12); color: #60a5fa; }
.cat-calisthenics { background: rgba(16,185,129,.12); color: #34d399; }
.cat-cardio       { background: rgba(249,115,22,.12); color: #fb923c; }
.cat-flexibility  { background: rgba(168,85,247,.12); color: #c084fc; }
.cat-hypertrophy  { background: rgba(236,72,153,.12); color: #f472b6; }
.cat-general      { background: rgba(99,102,241,.12); color: #818cf8; }
.diff-beginner    { background: rgba(16,185,129,.1);  color: #34d399; }
.diff-intermediate{ background: rgba(251,191,36,.1);  color: #fcd34d; }
.diff-advanced    { background: rgba(244,63,94,.1);   color: #fb7185; }

.search-filter-bar { display: flex; gap: .75rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.search-input { background: var(--card); border: 1px solid var(--glass-border); }

/* ══════════════════════════════════════════════════════ PROGRAMS ══ */
.programs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; }

.program-card {
  background: var(--card-solid);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .2s var(--transition), box-shadow .2s var(--transition);
  position: relative;
}
.program-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.program-card-banner {
  height: 160px;
  background: var(--grad-accent);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.program-card-banner img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .7;
}
.program-card-banner-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.1) 60%);
}
.program-card-banner-badges {
  position: relative; z-index: 1;
  display: flex; gap: .4rem;
  padding: .75rem 1rem;
  flex-wrap: wrap;
}
.program-card-body { padding: 1.1rem 1.25rem 1.25rem; }
.program-name { font-weight: 800; font-size: 1.05rem; margin-bottom: .35rem; color: var(--text); letter-spacing: -.01em; }
.program-desc { font-size: 13px; color: var(--text2); margin-bottom: .85rem; line-height: 1.55; }
.program-meta { display: flex; gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.prog-meta-item { font-size: 12px; color: var(--text2); }
.prog-meta-item strong { color: var(--text); }

/* Program banner default gradients by category */
.prog-banner-strength   { background: linear-gradient(135deg, #FF4D00, #FF2D55); }
.prog-banner-hypertrophy { background: linear-gradient(135deg, #FF7A00, #FF4D00); }
.prog-banner-calisthenics { background: linear-gradient(135deg, #00D084, #0A84FF); }
.prog-banner-cardio     { background: linear-gradient(135deg, #0A84FF, #5E5CE6); }
.prog-banner-general    { background: linear-gradient(135deg, #5E5CE6, #FF4D00); }

/* Admin image upload preview */
.prog-img-upload-wrap { position: relative; cursor: pointer; }
.prog-img-preview { width: 100%; height: 120px; border-radius: 10px; object-fit: cover; display: none; }
.prog-img-placeholder {
  width: 100%; height: 120px; border-radius: 10px;
  border: 2px dashed var(--border2);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .4rem; color: var(--text2); font-size: 13px; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.prog-img-placeholder:hover { border-color: var(--accent); background: rgba(255,77,0,.05); }

/* ══════════════════════════════════════════════════════ ACTIVE WORKOUT ══ */
.active-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 1.5rem;
  background: var(--card);
  padding: 1.4rem;
  border-radius: var(--radius);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
}
.timer-text {
  color: var(--accent);
  font-size: 1.5rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.active-actions { display: flex; gap: .75rem; align-items: center; }

.active-exercise {
  background: var(--card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  overflow: hidden;
  backdrop-filter: blur(10px);
  transition: border-color .2s;
}
.active-exercise:hover { border-color: rgba(99,102,241,.25); }
.ae-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.25rem;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
}
.ae-name { font-weight: 700; font-size: 15px; }
.ae-body { padding: 1rem 1.25rem; }
.sets-table { width: 100%; border-collapse: collapse; }
.sets-table th {
  text-align: left; font-size: 11px; color: var(--text2);
  font-weight: 700; padding: .35rem .5rem;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase; letter-spacing: .05em;
}
.sets-table td { padding: .5rem; }
.sets-table td input { padding: .4rem .6rem; text-align: center; font-size: 14px; }
.set-done { background: rgba(16,185,129,.07); }
.set-done td input { opacity: .6; }

.btn-complete-set {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 8px; padding: .4rem .85rem;
  font-size: 12px; font-weight: 600;
  transition: all .2s; white-space: nowrap;
}
.btn-complete-set:hover { border-color: var(--green); color: var(--green); }
.btn-complete-set.done {
  background: rgba(16,185,129,.15);
  border-color: var(--green); color: var(--green);
}
.add-set-row { margin-top: .75rem; }

/* Workout exercise card */
.workout-ex-card {
  background: var(--card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

/* ══════════════════════════════════════════════════════ PROGRESS ══ */
.pr-table { width: 100%; border-collapse: collapse; }
.pr-table th { text-align: left; font-size: 12px; color: var(--text2); padding: .5rem; border-bottom: 1px solid var(--border); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pr-table td { padding: .65rem .5rem; border-bottom: 1px solid var(--border); font-size: 14px; }
.pr-table tr:last-child td { border-bottom: none; }
.pr-badge { background: rgba(251,191,36,.15); color: var(--yellow); font-size: 11px; padding: .2rem .5rem; border-radius: 6px; font-weight: 700; }

/* Progress bars */
.progress-bar-wrap { height: 8px; background: var(--bg3); border-radius: var(--radius-pill); overflow: hidden; }
.progress-bar-fill {
  height: 100%; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #6366f1, #a855f7);
  box-shadow: 0 0 8px rgba(99,102,241,.4);
  transition: width .6s var(--transition);
}

/* Progress ring */
.progress-ring { position: relative; display: inline-flex; align-items: center; justify-content: center; }

/* ══════════════════════════════════════════════════════ NUTRITION ══ */
.macro-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: 1rem; }
.macro-item { text-align: center; background: var(--bg3); border-radius: 12px; padding: .85rem; }
.macro-val { font-size: 1.3rem; font-weight: 800; }
.macro-lbl { font-size: 12px; color: var(--text2); font-weight: 600; margin-top: .15rem; }
.food-item { display: flex; justify-content: space-between; align-items: center; padding: .75rem 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.food-item:last-child { border-bottom: none; }
.food-cals { color: var(--accent); font-weight: 700; }

.calorie-bar-wrap { margin-bottom: 1rem; }
.calorie-bar-label { display: flex; justify-content: space-between; font-size: 13px; color: var(--text2); margin-bottom: .4rem; font-weight: 600; }
.calorie-bar { height: 10px; background: var(--bg3); border-radius: var(--radius-pill); overflow: hidden; }
.calorie-bar-fill {
  height: 100%; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #6366f1, #a855f7);
  transition: width .5s var(--transition);
  box-shadow: 0 0 8px rgba(99,102,241,.35);
}
.calorie-bar-fill.over { background: linear-gradient(90deg, #f97316, #f43f5e); }

/* ══════════════════════════════════════════════════════ ACHIEVEMENTS ══ */
.achievements-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }

.achievement-item, .achievement-card {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 1rem .9rem;
  text-align: center;
  transition: all .2s var(--transition);
}
.achievement-item.unlocked, .achievement-card.unlocked {
  border-color: var(--yellow);
  background: rgba(251,191,36,.06);
  box-shadow: 0 4px 20px rgba(251,191,36,.12);
}
.achievement-item.unlocked:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(251,191,36,.18); }
.achievement-icon { font-size: 1.9rem; margin-bottom: .45rem; }
.achievement-name { font-size: 12px; font-weight: 700; }
.achievement-desc { font-size: 11px; color: var(--text2); margin-top: .2rem; }
.achievement-item:not(.unlocked), .achievement-card:not(.unlocked) { opacity: .4; filter: grayscale(1); }

/* ══════════════════════════════════════════════════════ REST TIMER ══ */
.timer-label { color: var(--text2); font-size: 14px; margin-bottom: .5rem; font-weight: 600; }
.timer-big {
  font-size: 3.5rem; font-weight: 900; color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin-bottom: .5rem; letter-spacing: -.04em;
}
.progress-ring-wrap { margin: 0 auto 1.25rem; width: 160px; height: 160px; position: relative; }
.timer-actions { display: flex; gap: .75rem; justify-content: center; }

/* ══════════════════════════════════════════════════════ MODALS ══ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 1rem;
}
.modal-overlay:not(.active) { display: none; }

.modal-box {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 22px;
  padding: 1.75rem;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
  animation: modal-in .28s var(--transition);
}
.modal-box.large  { max-width: 700px; }
.modal-box.small  { max-width: 360px; }
.modal-box.center { text-align: center; }
.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.25rem;
}
.modal-header h3 { font-size: 1.05rem; font-weight: 700; }

/* Legacy classes */
.logo-wrap { text-align: center; margin-bottom: 1.5rem; }
.logo-icon { font-size: 2.5rem; }
.logo-text { display: block; font-size: 1.6rem; font-weight: 800; color: var(--accent); }
.tab-bar { display: flex; background: var(--bg3); border-radius: 10px; padding: 3px; margin-bottom: 1.5rem; }
.tab { flex: 1; padding: .55rem; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--text2); transition: all .2s; }
.tab.active { background: linear-gradient(135deg, #6366f1, #a855f7); color: #fff; }

/* ══════════════════════════════════════════════════════ FINISH MODAL ══ */
.finish-icon { font-size: 4rem; margin-bottom: .75rem; display: block; animation: bounce .8s ease infinite alternate; }
.finish-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: 1.25rem 0; text-align: left; }
.finish-stat { background: var(--bg3); border-radius: 12px; padding: .85rem; border: 1px solid var(--border2); }
.finish-stat-val { font-size: 1.25rem; font-weight: 800; color: var(--accent); }
.finish-stat-lbl { font-size: 12px; color: var(--text2); font-weight: 600; }

/* ══════════════════════════════════════════════════════ PICKER ══ */
.picker-list { max-height: 400px; overflow-y: auto; margin-top: .75rem; }
.picker-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: .75rem; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .15s; font-size: 14px;
}
.picker-item:hover { background: var(--bg3); }
.filter-row { display: flex; gap: .5rem; margin-top: .75rem; }
.filter-row select { flex: 1; }

/* ══════════════════════════════════════════════════════ EXERCISE DETAIL ══ */
.ex-detail-muscles { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.ex-detail-steps { list-style: none; counter-reset: steps; }
.ex-detail-steps li {
  counter-increment: steps;
  padding: .65rem 0 .65rem 2.75rem;
  position: relative; border-bottom: 1px solid var(--border); font-size: 14px;
}
.ex-detail-steps li:last-child { border-bottom: none; }
.ex-detail-steps li::before {
  content: counter(steps);
  position: absolute; left: 0;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  color: #fff; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; top: .7rem;
}
.ex-tips { background: rgba(99,102,241,.08); border: 1px solid rgba(99,102,241,.15); border-radius: 12px; padding: 1rem; margin-top: 1rem; }
.ex-tips h4 { color: var(--accent); font-size: 13px; margin-bottom: .5rem; font-weight: 700; }
.ex-tips ul { padding-left: 1.25rem; font-size: 13px; color: var(--text2); }

/* ══════════════════════════════════════════════════════ WORKOUT HISTORY ══ */
.history-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: .9rem 0; border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.history-item:last-child { border-bottom: none; }
.history-name { font-weight: 700; font-size: 14px; }
.history-meta { font-size: 12px; color: var(--text2); margin-top: .2rem; }
.history-right { text-align: right; font-size: 13px; color: var(--text2); }

/* ══════════════════════════════════════════════════════ TODAY PLAN ══ */
.today-plan-empty { color: var(--text2); font-size: 14px; text-align: center; padding: 1.5rem 0; }
.today-ex-item {
  display: flex; justify-content: space-between;
  padding: .55rem 0; border-bottom: 1px solid var(--border); font-size: 14px;
}
.today-ex-item:last-child { border-bottom: none; }

/* ══════════════════════════════════════════════════════ WEEK BARS ══ */
.week-bars { display: flex; align-items: flex-end; gap: .4rem; height: 100px; padding: .5rem 0; }
.week-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.week-bar {
  width: 100%;
  background: linear-gradient(180deg, #6366f1, #a855f7);
  border-radius: 4px 4px 0 0;
  min-height: 3px;
  transition: height .5s var(--transition);
  box-shadow: 0 0 8px rgba(99,102,241,.3);
}
.week-bar.rest { background: var(--border); box-shadow: none; }
.week-day-lbl { font-size: 11px; color: var(--text2); font-weight: 600; }

/* ══════════════════════════════════════════════════════ PROFILE ══ */
.toggle-row { display: flex; justify-content: space-between; align-items: center; padding: .75rem 0; border-bottom: 1px solid var(--border); }
.toggle { position: relative; display: inline-block; width: 48px; height: 28px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; inset: 0; background: var(--bg3); border-radius: 28px; transition: .25s var(--transition); cursor: pointer; border: 1.5px solid var(--border2); }
.slider:before { content: ''; position: absolute; width: 20px; height: 20px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .25s var(--transition); box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.toggle input:checked + .slider { background: linear-gradient(135deg, #6366f1, #a855f7); border-color: transparent; }
.toggle input:checked + .slider:before { transform: translateX(20px); }

.profile-stat { display: flex; justify-content: space-between; padding: .55rem 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.profile-stat:last-child { border-bottom: none; }
.profile-stat-val { font-weight: 700; color: var(--accent); }

.profile-avatar {
  width: 80px; height: 80px; border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 2rem; color: #fff;
  overflow: hidden; border: 3px solid rgba(99,102,241,.4);
  box-shadow: 0 4px 20px rgba(99,102,241,.3);
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ══════════════════════════════════════════════════════ BIG START ══ */
.big-start-btn {
  background: linear-gradient(135deg, #6366f1, #a855f7);
  color: #fff; border-radius: var(--radius);
  padding: 1.6rem; width: 100%;
  font-size: 1.1rem; font-weight: 800; text-align: center;
  transition: transform .15s var(--transition), box-shadow .2s var(--transition);
  letter-spacing: -.01em;
}
.big-start-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(99,102,241,.4); }
.big-start-btn span { font-size: 1.4rem; margin-right: .5rem; }
.link { font-size: 13px; color: var(--accent); font-weight: 600; }

.program-quick-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: .7rem 0; border-bottom: 1px solid var(--border); font-size: 14px;
}
.program-quick-item:last-child { border-bottom: none; }

/* ══════════════════════════════════════════════════════ EMPTY STATES ══ */
.empty-state { text-align: center; padding: 2.75rem 1rem; color: var(--text2); font-size: 14px; }
.empty-icon { font-size: 2.75rem; margin-bottom: .6rem; }

/* ══════════════════════════════════════════════════════ TIMER PAGE ══ */
.timer-center-card { display: flex; flex-direction: column; align-items: center; padding: 2rem 1rem; }
.big-timer-display {
  font-size: 4rem; font-weight: 900; font-variant-numeric: tabular-nums;
  color: var(--text); letter-spacing: -.04em; line-height: 1;
}
.timer-btn-row { display: flex; gap: 1rem; align-items: center; margin-top: 1.5rem; flex-wrap: wrap; justify-content: center; }
.big-timer-btn { padding: .75rem 2.5rem !important; font-size: 1.05rem !important; }
.lap-list { width: 100%; max-width: 400px; margin-top: 1.5rem; }
.lap-item {
  display: flex; justify-content: space-between;
  padding: .55rem .75rem; border-bottom: 1px solid var(--border);
  font-size: 14px; font-variant-numeric: tabular-nums;
}
.lap-item:first-child { color: var(--accent); font-weight: 700; }

.holds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.hold-card {
  background: var(--card); border: 1px solid var(--glass-border);
  border-radius: var(--radius); padding: 1.4rem;
  display: flex; flex-direction: column; align-items: center; gap: .75rem; text-align: center;
  backdrop-filter: blur(10px);
}
.hold-card-icon { font-size: 2.5rem; }
.hold-card-name { font-weight: 800; font-size: 1rem; }
.hold-card-desc { font-size: 12px; color: var(--text2); }
.hold-timer-display { font-size: 2.2rem; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--accent); }
.hold-btn-row { display: flex; gap: .5rem; width: 100%; justify-content: center; }
.custom-ring-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.custom-ring-label { position: absolute; display: flex; flex-direction: column; align-items: center; }

/* Timer ring */
.timer-ring { position: relative; }

/* ══════════════════════════════════════════════════════ SESSION OVERLAY ══ */
.session-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: var(--bg);
  display: flex; flex-direction: column; overflow-y: auto;
}
.session-overlay.hidden { display: none; }

.session-topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: .9rem 1.25rem;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.session-timer-wrap { display: flex; flex-direction: column; }
.session-timer-label { font-size: 10px; color: var(--text2); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.session-timer-val {
  font-size: 1.5rem; font-weight: 900; font-variant-numeric: tabular-nums;
  background: var(--grad-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.session-center-info { text-align: center; }
.session-ex-num { font-size: 13px; color: var(--text2); font-weight: 700; }

.session-body {
  flex: 1; padding: 1.25rem;
  display: flex; flex-direction: column; gap: 1.25rem;
  max-width: 600px; margin: 0 auto; width: 100%;
}
.session-anim-wrap {
  background: var(--card); border: 1px solid var(--glass-border);
  border-radius: var(--radius); padding: 1.5rem;
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
  backdrop-filter: blur(10px);
}
.session-anim-container { width: 180px; height: 180px; display: flex; align-items: center; justify-content: center; }
.session-ex-name { font-size: 1.3rem; font-weight: 800; text-align: center; letter-spacing: -.02em; }
.session-ex-muscles { font-size: 13px; color: var(--text2); text-align: center; }
.session-set-tracker {
  background: var(--card); border: 1px solid var(--glass-border);
  border-radius: var(--radius); padding: 1.25rem; backdrop-filter: blur(10px);
}
.session-set-info { font-size: 14px; color: var(--text2); margin-bottom: .75rem; font-weight: 600; }
.session-sets-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.session-set-dot {
  width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; cursor: pointer;
  transition: all .2s var(--transition);
}
.session-set-dot.done {
  background: linear-gradient(135deg, #10b981, #059669);
  border-color: transparent; color: #fff;
  box-shadow: 0 4px 12px rgba(16,185,129,.3);
}
.session-set-dot.active { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.session-timed-block { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.session-timed-display { font-size: 2.5rem; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--accent); }
.session-timed-ring-wrap { position: relative; }
.session-rep-block { display: flex; flex-direction: column; gap: .75rem; }
.session-rep-info { font-size: 1.5rem; font-weight: 900; color: var(--text); text-align: center; }
.session-weight-field { margin: 0; }
.session-notes-row { display: flex; gap: .5rem; }
.session-nav-row { display: flex; justify-content: space-between; align-items: center; }
.session-dots { display: flex; gap: .4rem; }
.session-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border2); transition: background .2s; }
.session-dot.active { background: var(--accent); }
.session-dot.done { background: var(--green); }

/* ══════════════════════════════════════════════════════ FULLSCREEN TIMER ══ */
.full-timer-overlay {
  position: fixed; inset: 0;
  background: #060610;
  z-index: 9999;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  animation: ft-enter .35s cubic-bezier(.34,1.4,.64,1);
}
.full-timer-overlay.hidden { display: none; }
.full-timer-overlay::before {
  content: '';
  position: absolute;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,.22) 0%, transparent 70%);
  animation: glow-pulse 2.8s ease-in-out infinite;
  pointer-events: none;
}
.full-timer-inner { text-align: center; position: relative; z-index: 1; }
.full-timer-label {
  font-size: .8rem; font-weight: 900; letter-spacing: .25em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 2rem; opacity: .9;
}
.full-timer-ring-wrap {
  position: relative; width: 320px; height: 320px;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.full-timer-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform: rotate(-90deg);
  filter: drop-shadow(0 0 22px rgba(99,102,241,.55));
}
.ring-bg { fill: none; stroke: rgba(255,255,255,.06); stroke-width: 14; }
.ring-progress {
  fill: none; stroke: var(--accent); stroke-width: 14; stroke-linecap: round;
  transition: stroke-dashoffset .55s var(--transition), stroke .4s;
}
.full-timer-time {
  font-size: 6.5rem; font-weight: 900; color: #fff;
  letter-spacing: -.07em; line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 60px rgba(99,102,241,.7);
}
.full-timer-time.tick { animation: tick-pop .2s ease; }
.full-timer-sub { font-size: 1rem; color: rgba(255,255,255,.4); margin-top: 2rem; min-height: 1.5rem; letter-spacing: .03em; }
.full-timer-btns { display: flex; gap: 1rem; margin-top: 2.5rem; justify-content: center; }
.ft-btn-close {
  background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.5); border-radius: 100px; padding: .75rem 1.75rem;
  font-size: 14px; font-weight: 600; cursor: pointer; transition: background .2s, color .2s;
}
.ft-btn-close:hover { background: rgba(255,255,255,.12); color: #fff; }
.ft-btn-skip {
  background: linear-gradient(135deg, #6366f1, #a855f7);
  color: #fff; border: none; border-radius: 100px; padding: .75rem 2.25rem;
  font-size: 14px; font-weight: 700; cursor: pointer;
  transition: transform .15s var(--transition), box-shadow .2s;
  box-shadow: 0 6px 24px rgba(99,102,241,.5);
}
.ft-btn-skip:hover { transform: translateY(-1px); box-shadow: 0 10px 32px rgba(99,102,241,.6); }

/* ══ New fullscreen timer (from app.js additions) ══ */
.fullscreen-timer {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(6,6,16,.97);
  display: flex; align-items: center; justify-content: center;
}
.fullscreen-timer.hidden { display: none; }
.ft-content { text-align: center; position: relative; z-index: 1; padding: 2rem; }
.ft-label { font-size: .8rem; font-weight: 900; letter-spacing: .25em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.5rem; }
.ft-ring-wrap {
  position: relative; width: 260px; height: 260px;
  margin: 0 auto 1.5rem;
  display: flex; align-items: center; justify-content: center;
}
.ft-ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); filter: drop-shadow(0 0 18px rgba(99,102,241,.5)); }
.ft-ring-bg { fill: none; stroke: rgba(255,255,255,.07); stroke-width: 12; }
.ft-ring-progress { fill: none; stroke: var(--accent); stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset .55s var(--transition); }
.ft-time { font-size: 5rem; font-weight: 900; color: #fff; letter-spacing: -.06em; font-variant-numeric: tabular-nums; text-shadow: 0 0 50px rgba(99,102,241,.7); }
.ft-exercise { font-size: 1rem; color: rgba(255,255,255,.5); min-height: 1.5rem; margin-bottom: 1.5rem; }
.ft-btn-row { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
@media (max-width: 480px) { .full-timer-ring-wrap{width:260px;height:260px} .full-timer-time{font-size:5rem} .ft-ring-wrap{width:220px;height:220px} .ft-time{font-size:4rem} }

/* ══════════════════════════════════════════════════════ CELEBRATION ══ */
.celeb-overlay, .celebration-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 8888;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  animation: celeb-in .4s cubic-bezier(.34,1.4,.64,1) both;
}
.celeb-overlay.hidden, .celebration-overlay.hidden { display: none; }
.celeb-overlay.celeb-out { animation: celeb-fade-out .4s ease forwards; }
@keyframes celeb-fade-out { from{opacity:1;transform:scale(1)} to{opacity:0;transform:scale(1.05)} }

.celeb-inner, .celebration-content { text-align: center; z-index: 1; padding: 2rem; position: relative; }
.celeb-emoji, .celebration-emoji {
  font-size: 5.5rem; display: block;
  animation: bounce-emoji .7s ease infinite alternate;
  filter: drop-shadow(0 4px 24px rgba(255,255,255,.2));
}
.celeb-title, .celebration-title {
  font-size: 2.6rem; font-weight: 900; color: #fff;
  margin: .75rem 0 .4rem;
  letter-spacing: -.04em;
  animation: celeb-title-in .45s cubic-bezier(.34,1.3,.64,1) .1s both;
}
.celeb-sub, .celebration-msg {
  font-size: 1.05rem; color: rgba(255,255,255,.65);
  animation: celeb-title-in .45s cubic-bezier(.34,1.3,.64,1) .2s both;
  margin-bottom: 1.5rem;
}
#confettiCanvas { position: absolute; inset: 0; pointer-events: none; width: 100%; height: 100%; }

/* ══════════════════════════════════════════════════════ TOAST ══ */
.toast {
  position: fixed; bottom: 90px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #6366f1, #a855f7);
  color: #fff;
  padding: .75rem 1.5rem;
  border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 700;
  z-index: 9999;
  box-shadow: 0 8px 32px rgba(99,102,241,.4);
  animation: toast-in .3s cubic-bezier(.34,1.56,.64,1);
  white-space: nowrap; pointer-events: none;
  border: 1px solid rgba(255,255,255,.15);
}

/* ══════════════════════════════════════════════════════ ADMIN ══ */
.admin-link { color: var(--orange) !important; }
.admin-badge {
  background: linear-gradient(135deg, #f97316, #f43f5e);
  color: #fff; font-size: 11px; font-weight: 800;
  padding: .3rem .85rem; border-radius: 20px; letter-spacing: .1em;
}
.admin-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.5rem; background: var(--card); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: .5rem; }
.admin-tab {
  padding: .55rem 1.1rem; border-radius: 10px;
  font-size: 14px; font-weight: 600; color: var(--text2);
  transition: all .2s var(--transition);
}
.admin-tab.active { background: linear-gradient(135deg, #6366f1, #a855f7); color: #fff; box-shadow: 0 4px 14px rgba(99,102,241,.3); }
.admin-tab-content { }
#page-admin .admin-tab-content { display: none; opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; }
#page-admin .admin-tab-content.active-tab { display: block; opacity: 1; transform: translateY(0); }
.admin-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.count-badge { background: linear-gradient(135deg, #6366f1, #a855f7); color: #fff; font-size: 11px; font-weight: 700; padding: .15rem .55rem; border-radius: 20px; margin-left: .4rem; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th { text-align: left; font-size: 12px; color: var(--text2); padding: .65rem .75rem; border-bottom: 2px solid var(--border); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.admin-table td { padding: .75rem .75rem; border-bottom: 1px solid var(--border); font-size: 14px; vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--bg3); }
.admin-actions { display: flex; gap: .4rem; }
.btn-edit { background: rgba(99,102,241,.12); color: var(--accent); border-radius: 8px; padding: .3rem .8rem; font-size: 12px; font-weight: 700; transition: background .2s; }
.btn-edit:hover { background: rgba(99,102,241,.25); }
.btn-del { background: rgba(244,63,94,.1); color: var(--red); border-radius: 8px; padding: .3rem .8rem; font-size: 12px; font-weight: 700; transition: background .2s; }
.btn-del:hover { background: rgba(244,63,94,.22); }

.prog-day-block { background: var(--bg3); border: 1px solid var(--border2); border-radius: var(--radius); margin-bottom: .85rem; overflow: hidden; }
.prog-day-header { display: flex; justify-content: space-between; align-items: center; padding: .75rem 1rem; background: var(--card); border-bottom: 1px solid var(--border); }
.prog-day-body { padding: 1rem; }
.prog-day-ex-row { display: grid; grid-template-columns: 2fr 60px 70px 70px 70px 32px; gap: .4rem; align-items: center; margin-bottom: .4rem; font-size: 13px; }
.prog-day-ex-row select, .prog-day-ex-row input { font-size: 13px; padding: .35rem .5rem; }
.prog-day-ex-header { display: grid; grid-template-columns: 2fr 60px 70px 70px 70px 32px; gap: .4rem; margin-bottom: .4rem; }
.prog-day-ex-header span { font-size: 11px; color: var(--text2); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }

.widget-config-list { display: flex; flex-direction: column; gap: .5rem; }
.widget-config-item { display: flex; justify-content: space-between; align-items: center; background: var(--card); border: 1px solid var(--glass-border); border-radius: 12px; padding: .9rem 1rem; cursor: grab; transition: box-shadow .2s; }
.widget-config-item:hover { box-shadow: 0 4px 20px rgba(0,0,0,.15); }
.widget-config-item:active { cursor: grabbing; }
.widget-drag-handle { color: var(--text2); font-size: 1.1rem; margin-right: .75rem; cursor: grab; }
.widget-config-left { display: flex; align-items: center; }
.widget-icon { font-size: 1.3rem; margin-right: .75rem; }
.widget-info-name { font-weight: 700; font-size: 14px; }
.widget-info-desc { font-size: 12px; color: var(--text2); }

.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #6366f1, #a855f7); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: #fff; margin-right: .6rem; }

/* ══════════════════════════════════════════════════════ OTP / VERIFY ══ */
.verify-icon { font-size: 3.5rem; text-align: center; animation: bounce-emoji .7s ease infinite alternate; display: block; }
.otp-row { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 1.5rem 0 .5rem; }
.otp-box {
  width: 50px; height: 60px; border-radius: 14px;
  border: 2px solid var(--border2);
  background: var(--bg3); color: var(--text);
  font-size: 1.6rem; font-weight: 800; text-align: center;
  outline: none; transition: border .2s, box-shadow .2s;
  caret-color: var(--accent);
}
.otp-box:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,.2); }
.otp-box.filled { border-color: var(--accent); background: rgba(99,102,241,.07); }
.otp-box.error { border-color: var(--red) !important; animation: shake .3s ease; }
.otp-dash { color: var(--text2); font-size: 1.4rem; font-weight: 300; margin: 0 .15rem; }
.otp-footer { display: flex; justify-content: center; align-items: center; gap: .75rem; margin-top: 1rem; font-size: 13px; color: var(--text2); }
.otp-resend { background: none; border: none; color: var(--accent); font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: underline; }
.dev-code-hint { background: rgba(249,115,22,.08); border: 1px dashed var(--orange); border-radius: 12px; padding: .65rem 1rem; text-align: center; font-size: 14px; margin: .75rem 0; color: var(--orange); }
.dev-code-hint strong { font-size: 1.4rem; letter-spacing: .25em; margin-left: .25rem; }

/* ══════════════════════════════════════════════════════ DASHBOARD HERO ══ */
.dashboard-hero {
  background: linear-gradient(135deg, rgba(99,102,241,.12) 0%, rgba(139,92,246,.08) 50%, rgba(236,72,153,.06) 100%);
  border: 1px solid rgba(99,102,241,.2);
  border-radius: 22px;
  padding: 1.75rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}
.dashboard-hero::before {
  content: ''; position: absolute; top: -60px; right: -60px;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(99,102,241,.2) 0%, transparent 70%);
  pointer-events: none;
}
.dashboard-hero::after {
  content: ''; position: absolute; bottom: -40px; left: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(168,85,247,.12) 0%, transparent 70%);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════ ONBOARDING ══ */
.onboarding-overlay { position: fixed; inset: 0; background: var(--bg); z-index: 10000; display: flex; align-items: center; justify-content: center; overflow-y: auto; padding: 2rem 1rem; }
.onboarding-overlay.hidden { display: none; }
.onboarding-wrap { width: 100%; max-width: 560px; position: relative; }

.ob-progress-bar { height: 3px; background: var(--bg3); border-radius: 3px; margin-bottom: 1rem; overflow: hidden; }
.ob-progress-fill { height: 100%; background: var(--grad-accent); border-radius: 3px; transition: width .5s var(--transition); }
.ob-step-count { font-size: 12px; color: var(--text3); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 2.5rem; }
.ob-step { text-align: center; animation: ob-step-in .35s cubic-bezier(.34,1.3,.64,1); }
.ob-step.hidden { display: none; }
.ob-emoji { font-size: 4rem; margin-bottom: 1rem; display: block; animation: bounce-emoji .8s ease infinite alternate; }
.ob-title { font-size: 1.9rem; font-weight: 900; letter-spacing: -.04em; color: var(--text); margin: 0 0 .6rem; }
.ob-sub { font-size: 15px; color: var(--text2); line-height: 1.6; margin: 0 0 2rem; }

.ob-option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 2rem; text-align: left; }
.ob-option {
  background: var(--card); border: 2px solid var(--border2);
  border-radius: var(--radius); padding: 1.1rem;
  cursor: pointer; transition: border-color .2s, background .2s, transform .15s;
  backdrop-filter: blur(10px);
}
.ob-option:hover { border-color: var(--accent); transform: translateY(-2px); }
.ob-option.selected { border-color: var(--accent); background: rgba(99,102,241,.08); }
.ob-opt-icon { font-size: 1.75rem; margin-bottom: .5rem; }
.ob-opt-title { font-weight: 700; font-size: 15px; color: var(--text); margin-bottom: .25rem; }
.ob-opt-desc { font-size: 12px; color: var(--text2); line-height: 1.4; }

.ob-days-grid { display: flex; gap: .75rem; justify-content: center; margin-bottom: 2rem; flex-wrap: wrap; }
.ob-day-opt {
  width: 72px; height: 82px; background: var(--card);
  border: 2px solid var(--border2); border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; transition: all .2s;
}
.ob-day-opt span { font-size: 2rem; font-weight: 900; color: var(--text); line-height: 1; }
.ob-day-opt small { font-size: 11px; color: var(--text2); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.ob-day-opt:hover, .ob-day-opt.selected { border-color: var(--accent); background: rgba(99,102,241,.1); }
.ob-day-opt.selected span { color: var(--accent); }

.ob-checkbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 2rem; text-align: left; }
.ob-check {
  display: flex; align-items: center; gap: .7rem;
  background: var(--card); border: 2px solid var(--border2);
  border-radius: 12px; padding: .88rem 1rem;
  cursor: pointer; transition: border-color .2s;
  font-size: 14px; font-weight: 600; color: var(--text);
}
.ob-check:has(input:checked) { border-color: var(--accent); background: rgba(99,102,241,.08); }
.ob-check input { accent-color: var(--accent); width: 16px; height: 16px; flex-shrink: 0; }

.ob-fields { text-align: left; margin-bottom: 2rem; }
.ob-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ob-field label { font-size: 13px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: .06em; display: block; margin-bottom: .4rem; }
.ob-input-wrap { position: relative; }
.ob-input-wrap input { padding-right: 3rem; }
.ob-unit { position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--text3); font-weight: 700; }
.ob-field-note { font-size: 12px; color: var(--text3); margin-top: .75rem; }

.ob-nav { display: flex; gap: .75rem; justify-content: center; }
.ob-btn-primary {
  background: linear-gradient(135deg, #6366f1, #a855f7);
  color: #fff; border: none; border-radius: 100px;
  padding: .85rem 2.5rem; font-size: 15px; font-weight: 700;
  cursor: pointer; transition: transform .15s var(--transition), box-shadow .2s;
  box-shadow: 0 4px 20px rgba(99,102,241,.35);
}
.ob-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(99,102,241,.5); }
.ob-btn-ghost {
  background: transparent; border: 1.5px solid var(--border2);
  color: var(--text2); border-radius: 100px;
  padding: .85rem 2rem; font-size: 15px; font-weight: 600;
  cursor: pointer; transition: background .2s, color .2s;
}
.ob-btn-ghost:hover { background: var(--bg3); color: var(--text); }
.ob-btn-large { padding: 1rem 3rem; font-size: 1.05rem; width: 100%; }

.ob-result-card {
  background: linear-gradient(135deg, rgba(99,102,241,.1), rgba(168,85,247,.07));
  border: 1.5px solid rgba(99,102,241,.25);
  border-radius: 22px; padding: 1.5rem; text-align: left; margin-bottom: 1rem;
}
.ob-result-prog-name { font-size: 1.3rem; font-weight: 900; color: var(--text); margin-bottom: .4rem; }
.ob-result-prog-desc { font-size: 13px; color: var(--text2); line-height: 1.6; }
.ob-result-stats { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.ob-result-stat { background: var(--card); border: 1px solid var(--glass-border); border-radius: 14px; padding: .8rem 1.25rem; text-align: center; }
.ob-result-stat-val { font-size: 1.5rem; font-weight: 900; color: var(--accent); line-height: 1; }
.ob-result-stat-lbl { font-size: 11px; color: var(--text2); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; margin-top: .25rem; }

/* ══════════════════════════════════════════════════════ NAV ACTIVE ══ */
.nav-link.active {
  background: linear-gradient(135deg, rgba(99,102,241,.14), rgba(168,85,247,.09));
  color: var(--accent);
  border: 1px solid rgba(99,102,241,.2);
}

/* ══ COACHING ══ */
.msg-badge { background:var(--red);color:#fff;font-size:10px;font-weight:700;padding:.1rem .4rem;border-radius:20px;margin-left:.35rem; }
.messages-layout { display:grid;grid-template-columns:260px 1fr;gap:1rem;height:600px; }
.msg-sidebar { background:var(--card-solid);border:1px solid var(--border);border-radius:var(--radius);overflow-y:auto; }
.msg-main { background:var(--card-solid);border:1px solid var(--border);border-radius:var(--radius);display:flex;flex-direction:column; }
.msg-convo-item { padding:.85rem 1rem;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s; }
.msg-convo-item:hover,.msg-convo-item.active { background:rgba(255,77,0,.08); }
.msg-convo-name { font-weight:600;font-size:14px; }
.msg-convo-preview { font-size:12px;color:var(--text2);margin-top:.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.msg-thread { flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.6rem; }
.msg-bubble { max-width:70%;padding:.65rem .9rem;border-radius:16px;font-size:14px;line-height:1.5; }
.msg-bubble.mine { background:var(--accent);color:#fff;align-self:flex-end;border-bottom-right-radius:4px; }
.msg-bubble.theirs { background:var(--bg3);color:var(--text);align-self:flex-start;border-bottom-left-radius:4px; }
.msg-time { font-size:10px;opacity:.6;margin-top:.2rem; }
.msg-input-row { display:flex;gap:.5rem;padding:.75rem;border-top:1px solid var(--border); }
.msg-input-row input { flex:1; }
.msg-empty { display:flex;align-items:center;justify-content:center;height:100%;color:var(--text2);font-size:14px; }

.check-in-card { background:var(--card-solid);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem 1.25rem;margin-bottom:.75rem; }
.check-in-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem; }
.check-in-metrics { display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.6rem;margin-bottom:.75rem; }
.check-in-metric { background:var(--bg3);border-radius:10px;padding:.5rem .75rem;text-align:center; }
.check-in-metric .val { font-size:1.3rem;font-weight:800;color:var(--accent); }
.check-in-metric .lbl { font-size:11px;color:var(--text2);margin-top:.15rem; }
.coach-reply { background:rgba(255,77,0,.08);border:1px solid rgba(255,77,0,.2);border-radius:10px;padding:.75rem 1rem;margin-top:.6rem;font-size:13px; }
.coach-reply strong { color:var(--accent); }

.client-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem; }
.client-card { background:var(--card-solid);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem;cursor:pointer;transition:transform .2s,box-shadow .2s; }
.client-card:hover { transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.3); }
.client-card-top { display:flex;align-items:center;gap:.75rem;margin-bottom:.85rem; }
.client-big-avatar { width:48px;height:48px;border-radius:50%;background:var(--grad-accent);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;color:#fff;flex-shrink:0; }
.client-stat-row { display:flex;gap:.75rem;flex-wrap:wrap; }
.client-stat { font-size:12px;color:var(--text2); }
.client-stat strong { color:var(--text); }

.nutrition-target-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.75rem;margin-bottom:1rem; }
.nutrition-target-card { background:var(--bg3);border-radius:12px;padding:.85rem;text-align:center; }
.nutrition-target-val { font-size:1.6rem;font-weight:900;background:var(--grad-accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent; }
.nutrition-target-lbl { font-size:12px;color:var(--text2);margin-top:.2rem; }

.photo-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.6rem; }
.photo-card { border-radius:10px;overflow:hidden;aspect-ratio:3/4;position:relative;cursor:pointer; }
.photo-card img { width:100%;height:100%;object-fit:cover; }
.photo-card-caption { position:absolute;bottom:0;left:0;right:0;padding:.4rem .6rem;background:linear-gradient(transparent,rgba(0,0,0,.7));font-size:11px;color:#fff; }

/* ══════════════════════════════════════════════════════ RESPONSIVE ══ */
@media (max-width: 900px) {
  :root { --sidebar: 200px; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .two-col { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  #sidebar { display: none; transform: translateX(-100%); }
  #sidebar.open { display: flex; transform: translateX(0); }
  #mainContent { margin-left: 0; padding: 1rem; padding-bottom: 80px; max-width: 100vw; }
  #bottomNav, .bottom-nav { display: flex; }
  .top-bar, .topbar { padding-left: 1.25rem; }
  .topbar-brand { display: none; }
  .sidebar-toggle { display: flex; align-items: center; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .programs-grid { grid-template-columns: 1fr; }
  .exercise-grid { grid-template-columns: 1fr; }
  h1 { font-size: 1.35rem; }
  .avatar-dropdown { right: 0; top: 52px; }
}

@media (max-width: 420px) {
  .stats-row { grid-template-columns: 1fr 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .macro-details { grid-template-columns: repeat(3, 1fr); }
  .ob-option-grid { grid-template-columns: 1fr; }
  .ob-checkbox-grid { grid-template-columns: 1fr; }
  .ob-field-row { grid-template-columns: 1fr; }
  .ob-title { font-size: 1.5rem; }
}

/* ══════════════════════════════════════════════════════ TOPBAR RESPONSIVE ══ */
@media (max-width: 680px) {
  .topbar { padding-left: 1.25rem; }
  .topbar-brand { display: none; }
}

/* ══════════════════════════════════════════════════════ LIGHT MODE OVERRIDE ══ */
.light .card { background: rgba(255,255,255,.9); box-shadow: 0 2px 20px rgba(0,0,0,.07); }
.light .card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.12); }
.light .stat-card { background: rgba(255,255,255,.95); box-shadow: 0 2px 16px rgba(0,0,0,.08); }
.light .exercise-card { background: rgba(255,255,255,.9); }
.light .program-card { background: rgba(255,255,255,.9); }
.light .modal-box { background: #fff; }
.light .auth-right { background: #f4f4fc; }
.light #sidebar { background: #ffffff; border-right-color: rgba(0,0,0,.08); }
.light .topbar, .light .top-bar { border-bottom-color: rgba(0,0,0,.07); }
.light .session-overlay { background: #f4f4fc; }
.light .session-anim-wrap { background: rgba(255,255,255,.9); }
.light .session-set-tracker { background: rgba(255,255,255,.9); }
.light .hold-card { background: rgba(255,255,255,.9); }
.light .full-timer-overlay { background: #0d0d1a; }
.light .fullscreen-timer { background: rgba(8,8,22,.97); }