/* ===== DESIGN TOKENS ===== */
:root{
  color-scheme:light;
  --bg:#f5f7fb;--ink:#141821;--muted:#667085;--line:#d9e0ea;
  --panel:#fff;--accent:#0f766e;--accent-dark:#115e59;--warn:#b42318;
  /* premium dark palette */
  --p-bg:#080b10;--p-surface:rgba(15,23,42,.72);--p-glass:rgba(15,23,42,.55);
  --p-border:rgba(255,255,255,.10);--p-border-hi:rgba(255,255,255,.18);
  --p-text:#f8fafc;--p-muted:#94a3b8;--p-sub:#cbd5e1;
  --p-teal:#14b8a6;--p-teal-glow:rgba(20,184,166,.18);
  --p-amber:#f59e0b;--p-amber-glow:rgba(245,158,11,.14);
  --p-gold:#fbbf24;--p-mint:#99f6e4;--p-lime:#a7f3d0;
  --p-red:#ef4444;--p-blue:#dbeafe;
  --font-display:'Outfit',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --radius-sm:12px;--radius-md:18px;--radius-lg:24px;--radius-pill:999px;
  --shadow-card:0 24px 70px rgba(0,0,0,.34);
  --shadow-glow:0 0 40px rgba(20,184,166,.12);
  --blur:blur(18px);
}
*{box-sizing:border-box;margin:0}
body{font-family:var(--font-body);background:var(--bg);color:var(--ink)}
a{color:var(--accent-dark);font-weight:700}
button,input,select,textarea{font:inherit}
button{border:0;border-radius:8px;background:var(--accent);color:#fff;cursor:pointer;font-weight:800;min-height:42px;padding:0 16px}
button:hover{background:var(--accent-dark)}
input,select,textarea{width:100%;border:1px solid var(--line);border-radius:8px;margin-top:6px;min-height:42px;padding:10px 12px}
textarea{min-height:86px}
table{border-collapse:collapse;width:100%}
th,td{border-bottom:1px solid var(--line);padding:12px;text-align:left;vertical-align:top}
th{color:var(--muted);font-size:13px;text-transform:uppercase}

/* ===== ADMIN LAYOUT (unchanged) ===== */
.login{display:grid;min-height:100vh;place-items:center;padding:24px}
.admin-shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.sidebar{background:#111827;color:#fff;padding:24px}
.sidebar h1{font-size:24px;margin:0 0 28px}
.sidebar a,.sidebar button{align-items:center;background:0 0;border-radius:8px;color:#d1d5db;display:flex;font-weight:700;min-height:42px;padding:0 10px;text-decoration:none;width:100%}
.sidebar a:hover,.sidebar button:hover{background:#1f2937;color:#fff}
.admin-main{padding:32px;overflow-x:auto}
.page-head{margin-bottom:18px}
.page-head h2,.panel h1,.panel h3{margin:0 0 6px}
.page-head p,.panel p{color:var(--muted);margin:0}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;margin-bottom:20px;padding:18px}
.narrow{max-width:420px;width:100%}
.form-grid{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:14px}
.form-grid .wide{grid-column:span 2}
.compact-form{margin-top:12px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr));gap:14px;margin-bottom:18px}
.stat{background:#fff;border:1px solid var(--line);border-radius:8px;padding:18px}
.stat strong{display:block;font-size:32px}
.stat span{color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.error{color:var(--warn);font-weight:800}

/* =========================================
   PREMIUM MEMBER PAGE — $100k SAAS AESTHETIC
   ========================================= */
.premium-member-page{
  color:var(--p-text);min-height:100vh;min-height:100dvh;
  overflow-x:hidden;padding:16px 16px 60px;
  font-family:var(--font-body);
  position: relative;
  z-index: 1;
}

/* --- INTERACTIVE BACKGROUND --- */
body:has(.premium-member-page) {
  background-color: #000000; /* Pure black for premium feel */
}

.interactive-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: 
    radial-gradient(circle at 15% 50%, rgba(20, 184, 166, 0.08), transparent 50%),
    radial-gradient(circle at 85% 30%, rgba(99, 102, 241, 0.06), transparent 50%),
    radial-gradient(circle at 50% 100%, rgba(245, 158, 11, 0.05), transparent 50%);
  filter: blur(60px);
}

.mouse-glow {
  position: fixed;
  top: 0; left: 0;
  width: 600px; height: 600px;
  background: radial-gradient(circle closest-side, rgba(20, 184, 166, 0.15), transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  filter: blur(40px);
}

.training-shell{margin:0 auto;max-width:1180px;perspective:1200px; position: relative; z-index: 2;}

/* --- ANIMATED NOISE GRAIN --- */
.interactive-bg::after {
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.025; /* Very subtle grain */
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- SHARED GLASS CARD --- */
.glass-card{
  background:var(--p-surface);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--p-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  position:relative;
}

/* --- HERO SECTION --- */
.training-hero{
  background:
    linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
    rgba(10, 10, 10, 0.4);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.08);
  border-top: 1px solid rgba(255,255,255,0.15);
  border-radius:var(--radius-lg);
  min-height:320px;overflow:hidden;padding:28px;
  position:relative;transform-style:preserve-3d;
  box-shadow: 0 30px 60px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.1);
}
.hero-grid{
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:34px 34px;inset:0;opacity:.18;position:absolute;
  transform:translateZ(-40px) rotateX(62deg) translateY(70px) scale(1.2);
  transform-origin:bottom center;
  animation:gridPulse 8s ease-in-out infinite;
}
@keyframes gridPulse{0%,100%{opacity:.18}50%{opacity:.28}}

.training-hero::after{
  background:linear-gradient(90deg,var(--p-teal),var(--p-amber),var(--p-red));
  bottom:0;content:'';height:3px;left:28px;position:absolute;right:28px;
  animation:barShimmer 3s ease-in-out infinite;
}
@keyframes barShimmer{0%,100%{opacity:1}50%{opacity:.6}}

/* Hero floating orbs */
.training-hero::before{
  content:'';position:absolute;width:200px;height:200px;
  background:radial-gradient(circle,rgba(20,184,166,.2),transparent 70%);
  top:-60px;right:-40px;border-radius:50%;
  animation:orbFloat 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-20px,15px) scale(1.15)}}

.hero-topline,.hero-content,.hero-chips{position:relative;z-index:1}
.hero-topline{
  color:var(--p-lime);font-family:var(--font-display);
  font-size:12px;font-weight:900;letter-spacing:.12em;
  text-transform:uppercase;display:flex;align-items:center;
  justify-content:space-between;gap:8px;
}
.hero-topline .gym-badge{
  background:rgba(255,255,255,.06);border:1px solid var(--p-border);
  border-radius:var(--radius-pill);padding:6px 14px;
  display:inline-flex;align-items:center;gap:6px;
}
.hero-topline .gym-badge::before{
  content:'';width:8px;height:8px;border-radius:50%;
  background:var(--p-teal);box-shadow:0 0 8px var(--p-teal);
  animation:livePulse 2s ease-in-out infinite;
}
@keyframes livePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}

.hero-content{
  display:grid;gap:24px;
  grid-template-columns:minmax(0,1fr) 170px;
  align-items:end;margin-top:48px;
}
.eyebrow{
  color:var(--p-gold);font-family:var(--font-display);
  font-size:11px;font-weight:900;letter-spacing:.16em;
  margin:0 0 10px;text-transform:uppercase;
}
.hero-content h1{
  font-family:var(--font-display);color:#fff;
  font-size:clamp(32px,7vw,72px);font-weight:900;
  letter-spacing:-.02em;line-height:.95;margin:0;
}
.hero-content h1 .name-gradient{
  background:linear-gradient(135deg,var(--p-teal),var(--p-mint));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-copy{color:var(--p-sub);font-size:15px;line-height:1.65;margin:14px 0 0;max-width:600px}

/* Completion ring */
.hero-score{
  aspect-ratio:1;width:150px;
  background:
    radial-gradient(circle at center,#111827 56%,transparent 58%),
    conic-gradient(var(--p-teal) var(--progress,0%),rgba(255,255,255,.08) 0);
  border-radius:var(--radius-md);display:grid;place-items:center;
  text-align:center;transform:translateZ(42px);
  box-shadow:0 0 30px rgba(20,184,166,.15);
  transition:--progress .8s ease;
}
.hero-score span{display:block;font-family:var(--font-display);font-size:36px;font-weight:900;color:#fff}
.hero-score small{display:block;color:var(--p-muted);font-weight:700;margin-top:2px;font-size:11px}

.hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.hero-chips span{
  background:rgba(255,255,255,.06);border:1px solid var(--p-border);
  border-radius:var(--radius-pill);color:#e2e8f0;
  font-size:12px;font-weight:800;padding:8px 14px;
  transition:all .25s ease;
}
.hero-chips span:hover{background:rgba(255,255,255,.12);border-color:var(--p-border-hi);transform:translateY(-1px)}

/* --- METRIC CARDS --- */
.metric-grid{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr));margin:14px 0}
.metric-card{
  background:var(--p-glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--p-border);border-radius:var(--radius-md);
  min-height:120px;padding:16px;
  box-shadow:var(--shadow-card);position:relative;overflow:hidden;
  transition:transform .3s ease,box-shadow .3s ease;
}
.metric-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card),var(--shadow-glow)}
.metric-card::after{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  border-radius:var(--radius-md) var(--radius-md) 0 0;
}
.metric-card:nth-child(1)::after{background:linear-gradient(90deg,var(--p-teal),transparent)}
.metric-card:nth-child(2)::after{background:linear-gradient(90deg,var(--p-amber),transparent)}
.metric-card:nth-child(3)::after{background:linear-gradient(90deg,var(--p-mint),transparent)}
.metric-card:nth-child(4)::after{background:linear-gradient(90deg,var(--p-gold),transparent)}

.metric-card span,.metric-card small{display:block;font-weight:700}
.metric-card span{color:var(--p-muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.metric-card strong{
  color:#fff;display:block;font-family:var(--font-display);
  font-size:36px;font-weight:900;line-height:1;margin:12px 0 6px;
}
.metric-card small{color:var(--p-muted);font-size:12px}
.metric-card .metric-icon{
  position:absolute;top:14px;right:14px;font-size:20px;opacity:.5;
}

/* --- CONTENT LAYOUT --- */
.content-grid{display:grid;gap:16px;grid-template-columns:minmax(0,1fr) 360px}
.workout-stage,.leaderboard-panel{
  background:var(--p-surface);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--p-border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);padding:22px;
}

.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px}
.section-heading h2{color:#fff;font-family:var(--font-display);font-size:24px;font-weight:900;margin:0}
.section-heading>span{
  background:var(--p-teal-glow);border:1px solid rgba(20,184,166,.28);
  border-radius:var(--radius-pill);color:var(--p-mint);font-weight:900;
  padding:8px 14px;font-size:12px;white-space:nowrap;
}

/* --- EXERCISE CARDS --- */
.premium-workout-list{display:grid;gap:14px}
.premium-exercise-card{
  background: rgba(20, 20, 20, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.06);
  border-top: 1px solid rgba(255,255,255,0.1);
  border-radius:var(--radius-md);
  box-shadow: 0 15px 35px rgba(0,0,0,0.4);
  display:grid;gap:14px;grid-template-columns:56px minmax(0,1fr);
  padding:16px;transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow .35s ease, border-color .35s ease, background .35s ease;
}
.premium-exercise-card:hover{
  border-color: rgba(20, 184, 166, 0.3);
  background: rgba(30, 30, 30, 0.5);
  box-shadow: 0 20px 40px rgba(0,0,0,0.6), 0 0 30px rgba(20,184,166,.1);
}

.exercise-index{
  background:linear-gradient(160deg,var(--p-teal),var(--p-amber));
  border-radius:14px;color:#071413;display:grid;font-family:var(--font-display);
  font-weight:950;font-size:18px;min-height:56px;place-items:center;
  box-shadow:0 4px 15px rgba(20,184,166,.3);
}
.exercise-index span{transform:translateZ(22px)}

.exercise-title-row{display:flex;align-items:flex-start;gap:12px;justify-content:space-between}
.exercise-title-row p{color:var(--p-muted);font-size:11px;font-weight:900;margin:0 0 3px;text-transform:uppercase;letter-spacing:.06em}
.exercise-title-row h3{color:#fff;font-family:var(--font-display);font-size:20px;font-weight:800;margin:0}

.rest-pill{
  background:var(--p-amber-glow);border:1px solid rgba(245,158,11,.25);
  border-radius:var(--radius-pill);color:#fde68a;flex:0 0 auto;
  font-size:12px;font-weight:900;padding:7px 12px;white-space:nowrap;
}

.set-row{display:flex;align-items:center;gap:8px;margin:12px 0;flex-wrap:wrap}
.set-row span{
  background:rgba(255,255,255,.06);border:1px solid var(--p-border);
  border-radius:var(--radius-sm);color:var(--p-sub);font-weight:800;
  padding:9px 12px;font-size:13px;
}
.set-row strong{color:#fff}

.coach-cue,.trainer-note{border-radius:var(--radius-sm);line-height:1.55;margin:10px 0 0;padding:12px;font-size:13px}
.coach-cue{background:rgba(20,184,166,.08);border:1px solid rgba(20,184,166,.15);color:var(--p-blue)}
.trainer-note{background:rgba(248,250,252,.05);border:1px solid rgba(248,250,252,.08);color:var(--p-blue)}

.premium-video-link{
  align-items:center;
  background:linear-gradient(135deg,#f8fafc,var(--p-mint));
  border-radius:var(--radius-sm);color:#0f172a;display:flex;
  font-weight:900;justify-content:space-between;
  margin-top:12px;min-height:46px;padding:0 14px;text-decoration:none;
  font-size:13px;
  transition:transform .2s ease,box-shadow .2s ease;
}
.premium-video-link:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(20,184,166,.2)}
.premium-video-link b{background:#0f172a;border-radius:var(--radius-pill);color:#fff;padding:6px 12px;font-size:12px}

.btn-complete-wrapper { margin-top: 16px; display: flex; justify-content: flex-end; }
.btn-complete {
  background: var(--p-teal-glow);
  border: 1px solid rgba(20,184,166,.4);
  color: var(--p-mint);
  padding: 10px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 0 15px rgba(20,184,166,.1);
}
.btn-complete:hover {
  background: rgba(20,184,166,.3);
  box-shadow: 0 0 25px rgba(20,184,166,.3);
  transform: translateY(-2px);
}
.btn-complete.is-done {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
  color: var(--p-muted);
  pointer-events: none;
  box-shadow: none;
}

/* --- LEADERBOARD --- */
.leaderboard-list{display:grid;gap:8px;list-style:none;padding:0}
.leaderboard-list li{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);
  border-radius:14px;display:flex;align-items:center;gap:12px;padding:12px;
  transition:all .25s ease;
}
.leaderboard-list li:hover{background:rgba(255,255,255,.08);transform:translateX(3px)}
.leaderboard-list li.is-current{background:rgba(20,184,166,.14);border-color:rgba(20,184,166,.28)}
.leaderboard-list li.is-current:hover{background:rgba(20,184,166,.2)}

.rank-number{
  background:linear-gradient(135deg,#1e293b,#111827);
  border:1px solid var(--p-border);
  border-radius:var(--radius-sm);color:var(--p-gold);display:grid;
  flex:0 0 42px;font-family:var(--font-display);font-weight:950;
  height:42px;place-items:center;font-size:14px;
}
.rank-1 .rank-number{background:linear-gradient(135deg,rgba(251,191,36,.2),rgba(245,158,11,.1));color:var(--p-gold);border-color:rgba(251,191,36,.3)}
.rank-2 .rank-number{background:linear-gradient(135deg,rgba(148,163,184,.15),rgba(100,116,139,.1));color:#e2e8f0;border-color:rgba(148,163,184,.2)}
.rank-3 .rank-number{background:linear-gradient(135deg,rgba(180,130,80,.15),rgba(160,110,60,.1));color:#d4a574;border-color:rgba(180,130,80,.2)}

.leaderboard-list div{min-width:0}
.leaderboard-list strong{display:block;color:#fff;overflow-wrap:anywhere;font-size:14px}
.leaderboard-list small{display:block;color:var(--p-muted);font-size:11px;margin-top:2px}
.leaderboard-list b{color:var(--p-mint);font-family:var(--font-display);font-size:18px;font-weight:900;margin-left:auto;white-space:nowrap}

.leaderboard-empty{
  background:rgba(248,250,252,.05);border:1px solid rgba(248,250,252,.08);
  border-radius:14px;padding:16px;display:grid;gap:6px;
}
.leaderboard-empty strong{color:#fff;font-size:15px}
.leaderboard-empty span{color:var(--p-muted);font-size:13px}

/* --- EMPTY / RECOVERY STATE --- */
.premium-empty-state{
  background:linear-gradient(145deg,rgba(30,41,59,.92),rgba(12,18,28,.95));
  border:1px solid var(--p-border);border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);padding:28px;text-align:center;
}
.premium-empty-state .empty-icon{font-size:48px;margin-bottom:16px;display:block}
.premium-empty-state h3{color:#fff;font-family:var(--font-display);font-size:24px;font-weight:900;margin:0 0 10px}
.premium-empty-state p{color:var(--p-muted);line-height:1.6;margin:0;font-size:14px}
.premium-empty-state .next-workout{
  margin-top:18px;display:inline-flex;align-items:center;gap:8px;
  background:var(--p-teal-glow);border:1px solid rgba(20,184,166,.25);
  border-radius:var(--radius-pill);color:var(--p-mint);
  font-weight:800;padding:10px 20px;font-size:13px;
}

/* --- FOOTER BRANDING --- */
.cockpit-footer{
  text-align:center;margin-top:40px;padding:20px;
  color:var(--p-muted);font-size:12px;font-weight:600;
}
.cockpit-footer span{color:var(--p-teal)}

/* --- ANIMATIONS --- */
.reveal-panel{transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
.motion-ready .reveal-panel{opacity:0;transform:translateY(22px)}
.reveal-panel.is-visible{opacity:1;transform:translateY(0)}
.reveal-panel:nth-child(2){transition-delay:.08s}
.reveal-panel:nth-child(3){transition-delay:.16s}
.reveal-panel:nth-child(4){transition-delay:.24s}

.tilt-card{transition:transform .4s cubic-bezier(.22,1,.36,1)}

/* counter animation */
@keyframes countUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.count-animate{animation:countUp .5s ease forwards}

/* --- RESPONSIVE --- */
@media(max-width:820px){
  .admin-shell{grid-template-columns:1fr}
  .sidebar{position:static}
  .form-grid,.stats{grid-template-columns:1fr}
  .form-grid .wide{grid-column:auto}
  .admin-main{padding:18px}
  .premium-member-page{padding:10px 10px 48px}
  .training-hero{border-radius:var(--radius-md);min-height:auto;padding:20px}
  .hero-content{grid-template-columns:1fr;align-items:start;margin-top:32px;gap:18px}
  .hero-score{width:120px}
  .hero-content h1{font-size:clamp(28px,8vw,48px)}
  .metric-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .content-grid{grid-template-columns:1fr}
  .premium-exercise-card{grid-template-columns:44px minmax(0,1fr);padding:14px}
  .exercise-index{min-height:44px;font-size:15px;border-radius:12px}
  .exercise-title-row{display:grid;gap:8px}
  .exercise-title-row h3{font-size:18px}
  .set-row{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .section-heading h2{font-size:20px}
  .leaderboard-panel{padding:16px}
}
@media(max-width:420px){
  .metric-grid{grid-template-columns:1fr 1fr}
  .metric-card strong{font-size:28px}
  .hero-chips span{font-size:11px;padding:6px 10px}
}
@media(prefers-reduced-motion:reduce){
  .reveal-panel,.tilt-card{transition:none;transform:none!important}
  .hero-grid,.training-hero::after,.training-hero::before{animation:none}
}