/* ============== AhrTrends Premium Diet Planner ============== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
/* ============== AURA DS — Design Tokens ============== */
:root{
  --gate-background:#090909;
  --gate-surface:#141414;
  --gate-border:#363636;
  --gate-foreground:#f5f5f5;
  --gate-muted:#a3a3a3;
  --gate-button:#f5f5f5;
  --gate-button-foreground:#141414;
  /* Aura DS — Emerald Midnight palette */
  --aura-void:#04070b;
  --aura-deep:#070c12;
  --aura-surface:#0b1119;
  --aura-elevated:#111a24;
  --aura-border:rgba(126,255,214,.10);
  --aura-border-strong:rgba(126,255,214,.24);
  --aura-border-glow:rgba(126,255,214,.45);

  --aura-primary:#19e59b;
  --aura-primary-dim:#0fc98c;
  --aura-primary-deep:#07331f;
  --aura-primary-glow:rgba(25,229,155,.28);
  --aura-primary-ultra:rgba(25,229,155,.07);

  --aura-secondary:#ffb84d;
  --aura-secondary-glow:rgba(255,184,77,.28);

  --aura-danger:#ff5f6d;
  --aura-warn:#ffb84d;

  --aura-text:#f2f7f5;
  --aura-text-2:#9fb3ad;
  --aura-text-3:#6b7f7a;

  --aura-grad-primary:linear-gradient(135deg,#19e59b 0%,#37d6ff 55%,#7cf3c6 130%);
  --aura-grad-mesh:
    radial-gradient(60% 50% at 18% 10%, rgba(25,229,155,.22), transparent 60%),
    radial-gradient(50% 40% at 90% 20%, rgba(55,214,255,.18), transparent 65%),
    radial-gradient(50% 50% at 50% 100%, rgba(255,184,77,.12), transparent 70%);
  --aura-grad-text:linear-gradient(135deg,#ffffff 0%,#a9ffe1 60%,#37d6ff 120%);

  --aura-shadow-1:0 1px 0 rgba(255,255,255,.04) inset, 0 10px 40px rgba(0,0,0,.5);
  --aura-shadow-2:0 0 0 1px rgba(25,229,155,.14), 0 20px 60px rgba(0,0,0,.6), 0 0 60px rgba(25,229,155,.10);
  --aura-shadow-glow:0 0 0 1px rgba(25,229,155,.40), 0 10px 50px rgba(25,229,155,.35);

  --aura-r-sm:12px;
  --aura-r:18px;
  --aura-r-lg:24px;
  --aura-r-xl:32px;

  --aura-ease:cubic-bezier(.23,1,.32,1);

  --aura-font-display:'Cabinet Grotesk','Space Grotesk',system-ui,sans-serif;
  --aura-font-body:'Geist','Inter',system-ui,-apple-system,sans-serif;
  --aura-font-mono:'Geist Mono','JetBrains Mono',ui-monospace,monospace;

  /* ---- Legacy aliases (DO NOT remove — used across 1000+ lines) ---- */
  --bg:var(--aura-void);
  --bg-2:var(--aura-deep);
  --surface:rgba(255,255,255,.04);
  --surface-2:rgba(255,255,255,.07);
  --border:var(--aura-border);
  --border-strong:var(--aura-border-strong);
  --text:var(--aura-text);
  --text-dim:var(--aura-text-2);
  --muted:var(--aura-text-3);
  --green:var(--aura-primary);
  --green-1:var(--aura-primary-dim);
  --green-2:#19e59b;
  --green-deep:#06251b;
  --gold:var(--aura-secondary);
  --gold-2:#ffb84d;
  --red:var(--aura-danger);
  --grad-primary:var(--aura-grad-primary);
  --grad-text:var(--aura-grad-text);
  --grad-glow:radial-gradient(60% 60% at 50% 30%, rgba(25,229,155,.40), transparent 70%);
  --shadow-soft:var(--aura-shadow-1);
  --shadow-neon:var(--aura-shadow-glow);
  --radius:var(--aura-r);
  --radius-sm:var(--aura-r-sm);
  --font:var(--aura-font-body);
  --display:var(--aura-font-display);
}
body.light{
  /* Force premium dark Aura experience in both modes */
  color-scheme:dark;
}
body{
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(25,229,155,.16), transparent 60%),
    radial-gradient(900px 600px at -10% 100%, rgba(55,214,255,.12), transparent 60%),
    linear-gradient(180deg,var(--aura-void) 0%,#060b10 100%);
  color:var(--aura-text);
  font-family:var(--aura-font-body);
  min-height:100vh;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:'cv11','ss01','ss02';
}
h1,h2,h3,h4,h5,.display{font-family:var(--aura-font-display);letter-spacing:-.02em;font-weight:600}
.mono,code,kbd,.num{font-family:var(--aura-font-mono);font-variant-numeric:tabular-nums}

/* ===== Ambient Aura orbs (fixed background layer) ===== */
.aura-orbs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aura-orbs::before,.aura-orbs::after,.aura-orbs span{
  content:"";position:absolute;border-radius:50%;filter:blur(80px);opacity:.45;
  will-change:transform;
}
.aura-orbs::before{
  width:560px;height:560px;left:-120px;top:-140px;
  background:radial-gradient(circle,rgba(25,229,155,.45),transparent 70%);
  animation:auraFloatA 22s ease-in-out infinite;
}
.aura-orbs::after{
  width:640px;height:640px;right:-160px;top:30%;
  background:radial-gradient(circle,rgba(55,214,255,.35),transparent 70%);
  animation:auraFloatB 28s ease-in-out infinite;
}
.aura-orbs span{
  width:480px;height:480px;left:40%;bottom:-180px;
  background:radial-gradient(circle,rgba(255,184,77,.28),transparent 70%);
  animation:auraFloatC 26s ease-in-out infinite;
}
@keyframes auraFloatA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,40px) scale(1.08)}}
@keyframes auraFloatB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-50px,30px) scale(.95)}}
@keyframes auraFloatC{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,-50px) scale(1.1)}}
@media (prefers-reduced-motion:reduce){
  .aura-orbs::before,.aura-orbs::after,.aura-orbs span{animation:none}
}

/* ===== Glassmorphism utilities ===== */
.glass-1{
  background:rgba(20,20,20,.7);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--aura-r);
  box-shadow:var(--aura-shadow-1);
}
.glass-2{
  background:rgba(12,12,12,.85);
  -webkit-backdrop-filter:blur(40px) saturate(200%);
  backdrop-filter:blur(40px) saturate(200%);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--aura-r-lg);
  box-shadow:var(--aura-shadow-2);
}
.glass-interactive{transition:all .4s var(--aura-ease)}
.glass-interactive:hover{border-color:rgba(255,255,255,.30);transform:translateY(-4px)}
.aura-text-grad{
  background:var(--aura-grad-text);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
img{max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select{font-family:inherit}

.hidden{display:none !important}

/* Scroll progress */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0%;z-index:200;background:linear-gradient(90deg,#19e59b,#c5c5c5);box-shadow:0 0 12px rgba(255,255,255,.6);transition:width .1s linear}

/* Particles */
#particles{position:fixed;inset:0;z-index:0;pointer-events:none}

/* Season overlay */
.season-overlay{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.season-overlay .flake,.season-overlay .leaf,.season-overlay .petal,.season-overlay .ember{position:absolute;top:-10vh;will-change:transform,opacity;opacity:.85}
.flake{width:6px;height:6px;background:#ffffff;border-radius:50%;filter:blur(.3px);box-shadow:0 0 8px rgba(255,255,255,.6);animation:fall linear infinite}
.leaf{width:14px;height:10px;background:linear-gradient(135deg,#848484,#4e4e4e);border-radius:60% 20% 60% 20%;animation:fall linear infinite}
.petal{width:10px;height:10px;background:radial-gradient(circle,#b8b8b8,#909090);border-radius:50%;animation:fall linear infinite}
.ember{width:5px;height:5px;background:#e5e5e5;border-radius:50%;box-shadow:0 0 10px rgba(255,255,255,.7);animation:fall linear infinite}
@keyframes fall{0%{transform:translate3d(0,-10vh,0) rotate(0)}100%{transform:translate3d(40px,110vh,0) rotate(360deg)}}

/* Glass */
.glass{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--border);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
}

/* Buttons */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:.55rem;
  padding:.85rem 1.4rem;border-radius:999px;font-weight:600;font-size:.92rem;
  letter-spacing:.02em;transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  white-space:nowrap;overflow:hidden;
}
.btn svg{width:1em;height:1em}
.btn-primary{
  background:linear-gradient(135deg,#19e59b,#0f9d74);color:#070707;
  box-shadow:0 10px 30px rgba(25,229,155,.35), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(25,229,155,.45)}
.btn-ghost{background:rgba(255,255,255,.06);color:var(--text);border:1px solid var(--border)}
.btn-ghost:hover{background:rgba(255,255,255,.10);transform:translateY(-2px)}
.icon-btn{width:38px;height:38px;border-radius:50%;display:inline-grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid var(--border);transition:.25s}
.icon-btn:hover{background:rgba(255,255,255,.12)}
.icon-btn svg{width:18px;height:18px}
.ripple::after{
  content:"";position:absolute;left:var(--rx,50%);top:var(--ry,50%);width:0;height:0;border-radius:50%;
  background:rgba(255,255,255,.35);transform:translate(-50%,-50%);transition:width .5s ease, height .5s ease, opacity .8s ease;opacity:.6;pointer-events:none;
}
.ripple.rippling::after{width:300px;height:300px;opacity:0}

/* Brand */
.brand{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--display);font-weight:700;font-size:1.05rem}
.brand-logo{width:36px;height:36px;border-radius:10px;background:#ffffff url('./ahr-logo.png') center/contain no-repeat;box-shadow:0 0 18px rgba(25,229,155,.35),0 4px 14px rgba(0,0,0,.4);border:1px solid rgba(25,229,155,.35);flex:none}

/* ============= LOCK SCREEN ============= */
.lock-screen{
  position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:1.25rem;
  background:radial-gradient(1000px 600px at 50% 30%, rgba(25,229,155,.25), transparent 60%),
             radial-gradient(800px 500px at 80% 90%, rgba(25,229,155,.12), transparent 60%),
             var(--bg);
  animation:lockIn .6s ease both;
}
.lock-screen.unlocked{animation:lockOut .9s ease forwards}
@keyframes lockIn{from{opacity:0}to{opacity:1}}
@keyframes lockOut{to{opacity:0;transform:scale(1.04);filter:blur(8px);visibility:hidden}}
.lock-bg-glow{position:absolute;inset:-10%;background:var(--grad-glow);filter:blur(40px);pointer-events:none}
.lock-card{
  position:relative;z-index:2;width:min(460px,100%);padding:2.2rem 1.6rem;border-radius:24px;text-align:center;
  border:1px solid var(--border-strong);box-shadow:var(--shadow-neon);
  animation:floaty 6s ease-in-out infinite;
}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.lock-card.shake{animation:shake .5s; box-shadow:0 0 0 1px rgba(104,104,104,.35), 0 0 60px rgba(104,104,104,.45)}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(10px)}60%{transform:translateX(-8px)}80%{transform:translateX(8px)}}
.lock-icon{width:64px;height:64px;margin:0 auto;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#19e59b,#0a0a0a);box-shadow:0 0 30px rgba(25,229,155,.55);color:#ffffff;animation:pulseGlow 2.4s ease-in-out infinite}
.lock-icon svg{width:34px;height:34px}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(25,229,155,.5)}50%{box-shadow:0 0 0 18px rgba(25,229,155,0)}}
.lock-icon.success{background:linear-gradient(135deg,#f5f5f5,#19e59b);animation:successPulse 1s ease}
@keyframes successPulse{0%{transform:scale(1)}50%{transform:scale(1.2);box-shadow:0 0 60px rgba(255,255,255,.9)}100%{transform:scale(1)}}
.lock-title{font-family:var(--display);font-size:2rem;margin:1rem 0 .25rem;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.lock-sub{margin:0;color:var(--gold-2);font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:.78rem}
.lock-hint{color:var(--text-dim);margin:.85rem 0 1.4rem;font-size:.95rem}
.lock-input-wrap{display:flex;gap:.5rem;flex-wrap:wrap}
.lock-input-wrap input{
  flex:1;min-width:160px;padding:.95rem 1.1rem;border-radius:14px;border:1px solid var(--border);
  background:rgba(0,0,0,.35);color:#ffffff;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  font-size:16px; /* prevents iOS focus-zoom */
  outline:none;transition:.25s
}
.lock-input-wrap input:focus{border-color:var(--green-2);box-shadow:0 0 0 4px rgba(255,255,255,.18)}
.lock-msg{margin-top:.85rem;font-size:.88rem;min-height:1.2em}
.lock-msg.err{color:#b7b7b7}
.lock-msg.ok{color:var(--green-2)}
.lock-codes{margin-top:1rem;color:var(--text-dim);font-size:.78rem}
.lock-codes span{display:inline-block;margin:0 .25rem;padding:.15rem .5rem;border:1px solid var(--border);border-radius:6px;color:var(--gold-2);letter-spacing:.1em}

/* Two access gates share a quiet, monochrome account surface. */
#lockScreen{background:var(--gate-background);overflow-y:auto;}
#lockScreen .lock-bg-glow{display:none;}
#lockScreen .lock-card{background:var(--gate-surface) !important;border:1px solid var(--gate-border);border-radius:8px;box-shadow:none;animation:none;max-height:calc(100dvh - 2.5rem);overflow-y:auto;}
#lockScreen .lock-icon{background:var(--gate-background);color:var(--gate-foreground);border:1px solid var(--gate-border);box-shadow:none;animation:none;}
#lockScreen .lock-title{background:none;color:var(--gate-foreground);letter-spacing:0;}
#lockScreen .lock-sub{color:var(--gate-foreground);font-size:1.15rem;text-transform:none;letter-spacing:0;margin-top:1.5rem;}
#lockScreen .lock-hint,.gate-foot{color:var(--gate-muted);line-height:1.6;}
.gate-foot{font-size:.8rem;margin:1rem 0 0;}
#lockScreen .btn{border-radius:8px;min-height:46px;letter-spacing:0;white-space:normal;}
#lockScreen .btn-primary,#lockScreen .btn-google{background:var(--gate-button);color:var(--gate-button-foreground);box-shadow:none;}
#lockScreen .btn:disabled{opacity:.6;cursor:wait;}
#lockScreen .btn-ghost{background:transparent;color:var(--gate-foreground);border-color:var(--gate-border);}
#lockScreen .lock-input-wrap{display:grid;grid-template-columns:minmax(0,1fr);}
#lockScreen .lock-input-wrap input{width:100%;min-width:0;background:var(--gate-background);color:var(--gate-foreground);border-color:var(--gate-border);border-radius:8px;letter-spacing:0;}
#lockScreen #getCodeBtn{width:100%;margin-top:12px;}
#lockScreen #gateSignOut{border:0;margin-top:10px;color:var(--gate-muted);}
#lockScreen .lock-msg{color:var(--gate-muted);}

/* NAV */
.nav{position:sticky;top:.6rem;z-index:60;width:min(1100px,calc(100% - 2rem));margin:.6rem auto 0;border-radius:16px;overflow:hidden;background:rgba(5,20,16,.92);border-color:var(--aura-border-strong)}
.nav-inner{display:grid;grid-template-rows:auto auto auto;padding:0}
.nav-row{min-width:0;padding:.52rem 1rem}
.nav-row-brand{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.8rem;border-bottom:1px solid var(--aura-border)}
.nav-row-brand .brand{min-width:0}
.brand-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-name em{color:var(--aura-primary);font-style:normal;font-weight:500}
.nav-account{display:flex;align-items:center;justify-content:flex-end;gap:.45rem;min-width:0}
.nav-secure{display:inline-flex;align-items:center;gap:.4rem;padding:.36rem .62rem;border:1px solid var(--aura-border);border-radius:999px;background:var(--aura-primary-ultra);color:var(--aura-text-2);font-size:.68rem;font-weight:700;text-transform:uppercase}
.nav-secure-dot{width:7px;height:7px;flex:none;border-radius:50%;background:var(--aura-primary);box-shadow:0 0 10px var(--aura-primary)}
.nav-links{display:flex;justify-content:center;gap:clamp(.8rem,2.2vw,1.7rem);overflow-x:auto;scrollbar-width:none;border-top:1px solid var(--aura-border);background:rgba(0,0,0,.12)}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{flex:none;color:var(--text-dim);font-size:.82rem;font-weight:600;position:relative;padding:.18rem 0;white-space:nowrap}
.nav-links a:hover{color:var(--text)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:linear-gradient(90deg,#19e59b,#c5c5c5);transition:width .3s}
.nav-links a:hover::after{width:100%}
.nav-actions{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:.5rem;background:var(--aura-primary-ultra)}
.nav-actions .btn,.nav-account .btn{min-height:34px;padding:.48rem .82rem;border-radius:8px;font-size:.75rem;letter-spacing:0}
.clock{min-width:0;font-family:var(--aura-font-mono);font-size:.78rem;color:var(--aura-primary);padding:0;border:0;border-radius:0;background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:640px){
  .nav{top:.35rem;width:calc(100% - .75rem);margin:.35rem auto 0;border-radius:14px}
  .nav-row{padding:.45rem .65rem}
  .brand{gap:.45rem;font-size:.9rem}
  .brand-logo{width:30px;height:30px;border-radius:8px}
  .nav-secure{padding:.3rem .45rem;font-size:.58rem}
  .nav-account{gap:.3rem}
  .nav-account .btn{padding:.4rem .55rem;font-size:.68rem}
  .nav-actions{grid-template-columns:minmax(0,1fr) auto auto;gap:.35rem}
  .nav-actions .btn{padding:.42rem .55rem;font-size:.68rem}
  .clock{display:block;font-size:.68rem}
  .nav-links{display:flex;justify-content:flex-start;gap:1.15rem;padding:.55rem .7rem}
  .nav-links a{font-size:.74rem}
}

/* HERO */
.hero{position:relative;padding:7rem 1.5rem 5rem;overflow:hidden;min-height:90vh;display:flex;align-items:center;justify-content:center}
.hero-bg{position:absolute;inset:0;background:
  radial-gradient(800px 500px at 30% 40%, rgba(25,229,155,.25), transparent 60%),
  radial-gradient(600px 400px at 70% 60%, rgba(25,229,155,.18), transparent 60%);
  filter:blur(20px);opacity:.9;pointer-events:none
}
.hero-orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;pointer-events:none;animation:floatOrb 14s ease-in-out infinite}
.orb-1{width:380px;height:380px;background:#19e59b;top:-80px;left:-120px}
.orb-2{width:320px;height:320px;background:#c5c5c5;bottom:-100px;right:-80px;animation-delay:-4s}
.orb-3{width:240px;height:240px;background:#f5f5f5;top:30%;right:10%;animation-delay:-7s}
@keyframes floatOrb{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(20px,-30px) scale(1.05)}}

.hero-content{position:relative;z-index:2;max-width:1100px;width:100%;text-align:center}
.badge-pill{display:inline-flex;align-items:center;gap:.55rem;padding:.45rem .9rem;border-radius:999px;border:1px solid var(--border-strong);background:rgba(255,255,255,.05);font-size:.75rem;letter-spacing:.18em;color:var(--gold-2);text-transform:uppercase;font-weight:600}
.dot-pulse{width:8px;height:8px;border-radius:50%;background:#f5f5f5;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:dot 2s infinite}
@keyframes dot{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}70%{box-shadow:0 0 0 12px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

.hero-title{font-family:var(--display);font-size:clamp(2.2rem,5.5vw,4.4rem);line-height:1.05;margin:1.2rem 0 1rem;font-weight:700;letter-spacing:-.02em}
.grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{max-width:720px;margin:0 auto;color:var(--text-dim);font-size:clamp(1rem,1.4vw,1.15rem)}
.hero-cta{display:flex;gap:.8rem;justify-content:center;margin-top:1.8rem;flex-wrap:wrap}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:3.5rem;max-width:920px;margin-inline:auto}
.stat{padding:1.2rem;text-align:center;border-radius:18px}
.stat-num{font-family:var(--display);font-size:clamp(1.4rem,2.4vw,2rem);font-weight:700;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-num small{font-size:.55em;font-weight:600;color:var(--gold-2);-webkit-text-fill-color:var(--gold-2)}
.stat-label{color:var(--text-dim);font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;margin-top:.25rem}
@media(max-width:640px){.hero-stats{grid-template-columns:repeat(2,1fr)}}

.scroll-indicator{margin-top:3rem;width:24px;height:40px;border:2px solid var(--border-strong);border-radius:14px;display:inline-block;position:relative}
.scroll-indicator span{position:absolute;left:50%;top:6px;width:4px;height:8px;background:var(--green-2);border-radius:4px;transform:translateX(-50%);animation:scrollDot 1.6s infinite}
@keyframes scrollDot{0%{opacity:0;transform:translate(-50%,0)}50%{opacity:1}100%{opacity:0;transform:translate(-50%,16px)}}

/* GOAL ROW */
.goal-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;padding:0 1.5rem;max-width:1200px;margin:0 auto 4rem}
@media(max-width:820px){.goal-row{grid-template-columns:1fr}}
.goal-card{padding:1.5rem;text-align:center;transition:.4s;cursor:pointer}
.goal-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-neon)}
.goal-card h3{margin:.6rem 0 .25rem;font-family:var(--display)}
.goal-card p{color:var(--text-dim);font-size:.92rem;margin:0}
.goal-anim{height:80px;display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:.6rem}
.loss-anim span{width:10px;height:40px;background:linear-gradient(180deg,#a2a2a2,#686868);border-radius:6px;animation:lossPulse 1.4s ease-in-out infinite;box-shadow:0 0 16px rgba(104,104,104,.5)}
.loss-anim span:nth-child(2){animation-delay:.18s;height:30px}
.loss-anim span:nth-child(3){animation-delay:.36s;height:22px}
@keyframes lossPulse{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.5);filter:brightness(1.3)}}
.gain-anim span{width:14px;height:14px;background:#f5f5f5;border-radius:50%;box-shadow:0 0 22px rgba(255,255,255,.7);animation:gainBounce 1.4s ease-in-out infinite}
.gain-anim span:nth-child(2){animation-delay:.18s}
.gain-anim span:nth-child(3){animation-delay:.36s}
@keyframes gainBounce{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-22px) scale(1.4)}}
.maintain-anim{width:120px;height:40px;background:repeating-linear-gradient(90deg,transparent 0 8px,#f5f5f5 8px 10px);mask:linear-gradient(90deg,transparent,#000000 20%,#000000 80%,transparent);-webkit-mask:linear-gradient(90deg,transparent,#000000 20%,#000000 80%,transparent);position:relative;animation:heartbeat 1.6s ease-in-out infinite}
@keyframes heartbeat{0%,100%{filter:drop-shadow(0 0 8px rgba(255,255,255,.6))}50%{filter:drop-shadow(0 0 18px rgba(255,255,255,1))}}

/* SECTION */
.section-head{text-align:center;padding:1rem;max-width:820px;margin:0 auto 1.6rem}
.section-title{font-family:var(--display);font-size:clamp(1.8rem,3.6vw,2.6rem);margin:0;letter-spacing:-.01em}
.section-sub{color:var(--text-dim);margin-top:.6rem}

/* PLANNER */
.planner-section{padding:2rem 1.5rem;max-width:1200px;margin:2rem auto 4rem;position:relative}
.planner-form{padding:1.6rem;border-radius:24px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem 1.1rem}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.4rem}
.field>span{font-size:.78rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.14em;font-weight:600}
.field input,.field select{
  padding:.85rem 1rem;border-radius:12px;border:1px solid var(--border);background:rgba(0,0,0,.3);color:var(--text);
  outline:none;transition:.25s;font-size:.95rem;
}
body.light .field input,body.light .field select{background:rgba(255,255,255,.7)}
.field input:focus,.field select:focus{border-color:var(--green-2);box-shadow:0 0 0 4px rgba(255,255,255,.16)}
.form-actions{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1.4rem;flex-wrap:wrap}

/* LOADING */
.loading{position:fixed;inset:0;z-index:200;background:rgba(7,7,7,.85);backdrop-filter:blur(14px);display:grid;place-items:center;padding:1rem}
.loading-card{padding:2.2rem 1.8rem;text-align:center;width:min(460px,100%);position:relative;overflow:hidden}
.loading-card h3{font-family:var(--display);margin:.4rem 0 1rem}
.loader-ring{width:90px;height:90px;margin:0 auto;position:relative}
.loader-ring div{position:absolute;inset:0;border-radius:50%;border:3px solid transparent;border-top-color:#f5f5f5;animation:spin 1.4s linear infinite}
.loader-ring div:nth-child(2){inset:10px;border-top-color:#c5c5c5;animation-duration:1s;animation-direction:reverse}
.loader-ring div:nth-child(3){inset:22px;border-top-color:#19e59b;animation-duration:.7s}
@keyframes spin{to{transform:rotate(360deg)}}
.loader-bar{height:6px;background:rgba(255,255,255,.08);border-radius:6px;margin:1rem 0 .4rem;overflow:hidden}
#loaderFill{height:100%;width:0;background:linear-gradient(90deg,#19e59b,#c5c5c5);border-radius:6px;transition:width .2s}
.loading-percent{color:var(--gold-2);font-family:var(--display);letter-spacing:.18em;margin:.2rem 0 0}
.scan-lines{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 2px,transparent 2px 5px);pointer-events:none;animation:scan 4s linear infinite;opacity:.4}
@keyframes scan{from{background-position:0 0}to{background-position:0 200px}}

/* RESULTS */
.results{padding:2rem 1.5rem 6rem;max-width:1300px;margin:0 auto}
.result-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.2rem 1.4rem;border-radius:20px;flex-wrap:wrap}
.result-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.progress-row{display:flex;align-items:center;gap:1rem;padding:1rem 1.4rem;margin:1rem 0 1.5rem;border-radius:16px}
.progress-label{font-size:.85rem;color:var(--text-dim);min-width:140px}
.progress-bar{flex:1;height:8px;background:rgba(255,255,255,.07);border-radius:8px;overflow:hidden;min-width:120px}
#monthProgress{height:100%;width:0;background:linear-gradient(90deg,#19e59b,#c5c5c5);border-radius:8px;transition:width .4s}
.progress-text{font-family:var(--display);color:var(--gold-2);font-weight:700;min-width:50px;text-align:right}

.days-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.day-card{padding:1.1rem 1.2rem;border-radius:18px;cursor:pointer;transition:.35s;position:relative;overflow:hidden}
.day-card::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(25,229,155,.15),transparent 60%);opacity:0;transition:.35s;pointer-events:none}
.day-card:hover::before{opacity:1}
.day-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.35)}
.day-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.day-num{font-family:var(--display);font-weight:700}
.day-cal{font-size:.78rem;color:var(--gold-2)}
.day-summary{color:var(--text-dim);font-size:.86rem;margin:0 0 .6rem}
.day-bars{display:grid;gap:.4rem;margin-bottom:.6rem}
.bar{height:5px;background:rgba(255,255,255,.07);border-radius:4px;overflow:hidden;position:relative}
.bar i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:linear-gradient(90deg,#19e59b,#f5f5f5);transition:width .8s}
.bar.b-c i{background:linear-gradient(90deg,#e5e5e5,#a3a3a3)}
.bar.b-f i{background:linear-gradient(90deg,#8e8e8e,#686868)}
.bar-row{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.12em}
.day-meals{display:none;margin-top:.6rem;font-size:.88rem;line-height:1.55;color:var(--text-dim)}
.day-meals strong{color:var(--text)}
.day-card.open .day-meals{display:block;animation:fadeUp .3s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.day-toggle{display:flex;align-items:center;justify-content:space-between;margin-top:.6rem}
.day-check{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--border-strong);display:grid;place-items:center;cursor:pointer;transition:.25s;color:transparent;font-weight:700;font-size:.8rem}
.day-check.done{background:linear-gradient(135deg,#19e59b,#0a0a0a);border-color:#19e59b;color:#ffffff;box-shadow:0 0 14px rgba(25,229,155,.5);animation:popCheck .4s}
@keyframes popCheck{0%{transform:scale(0.6)}60%{transform:scale(1.2)}100%{transform:scale(1)}}

/* TOOLS */
.tools-section{padding:2rem 1.5rem 4rem;max-width:1200px;margin:0 auto}
.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:820px){.tools-grid{grid-template-columns:1fr}}
.tool{padding:1.4rem}
.tool h3{font-family:var(--display);margin:0 0 .8rem}
.tool-row{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin-bottom:.7rem}
.tool-row input{padding:.7rem .9rem;border-radius:10px;border:1px solid var(--border);background:rgba(0,0,0,.3);color:var(--text);outline:none}
.tool-out{margin-top:.7rem;font-family:var(--display);color:var(--gold-2);font-weight:600;min-height:1.4em}
.tool-tip{color:var(--text-dim);min-height:3em;margin:.2rem 0 .8rem}

/* TESTIMONIALS */
.testimonials-section{padding:2rem 1.5rem 4rem;max-width:1200px;margin:0 auto;overflow:hidden}
.testimonials{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.6rem;scrollbar-width:thin}
.testimonial{flex:0 0 320px;padding:1.4rem;border-radius:18px;scroll-snap-align:start;border:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02))}
.testimonial p{color:var(--text-dim);margin:0 0 .8rem;font-size:.95rem;line-height:1.55}
.testimonial-who{display:flex;align-items:center;gap:.6rem}
.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#19e59b,#c5c5c5);display:grid;place-items:center;color:#070707;font-weight:700;font-family:var(--display)}
.who-info b{display:block;font-size:.9rem}
.who-info span{font-size:.78rem;color:var(--text-dim)}

/* FAQ */
.faq-section{padding:2rem 1.5rem 4rem;max-width:900px;margin:0 auto}
.faq-list{display:grid;gap:.7rem}
.faq{padding:1rem 1.1rem;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.03);cursor:pointer;transition:.25s}
.faq:hover{border-color:rgba(255,255,255,.3)}
.faq-q{display:flex;justify-content:space-between;align-items:center;font-weight:600}
.faq-a{max-height:0;overflow:hidden;color:var(--text-dim);transition:max-height .35s ease, margin .25s ease;font-size:.94rem}
.faq.open .faq-a{max-height:300px;margin-top:.7rem}
.faq-icon{transition:.3s}
.faq.open .faq-icon{transform:rotate(45deg);color:var(--green-2)}

/* CONTACT */
.contact-section{padding:2rem 1.5rem 4rem;max-width:900px;margin:0 auto}
.contact-card{padding:2rem;border-radius:24px;text-align:center}
.sub-form{display:flex;gap:.5rem;justify-content:center;margin-top:1rem;flex-wrap:wrap}
.sub-form input{flex:1;min-width:220px;padding:.85rem 1rem;border-radius:999px;border:1px solid var(--border);background:rgba(0,0,0,.3);color:var(--text);outline:none}
.sub-form input:focus{border-color:var(--green-2);box-shadow:0 0 0 4px rgba(255,255,255,.16)}
.sub-msg{margin-top:.7rem;color:var(--green-2);min-height:1.2em}

/* FOOTER */
.footer{border-top:1px solid var(--border);padding:2rem 1.5rem;margin-top:2rem;background:linear-gradient(180deg,transparent,rgba(0,0,0,.4))}
.footer-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr 1.2fr;gap:1.4rem;align-items:center}
@media(max-width:820px){.footer-inner{grid-template-columns:1fr;text-align:center}}
.footer-text{color:var(--text-dim);margin:.4rem 0 0;font-size:.9rem}
.socials{display:flex;gap:.6rem;justify-content:center}
.socials a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid var(--border);transition:.25s}
.socials a:hover{transform:translateY(-3px);background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4)}
.socials svg{width:18px;height:18px}
.footer-meta{display:flex;flex-direction:column;gap:.3rem;color:var(--text-dim);font-size:.82rem;text-align:right}
@media(max-width:820px){.footer-meta{text-align:center;align-items:center}}

/* FAB */
.fab{position:fixed;right:1.2rem;bottom:1.2rem;width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#19e59b,#0f9d74);color:#ffffff;display:none;align-items:center;justify-content:center;box-shadow:0 12px 28px rgba(25,229,155,.4);z-index:50;transition:.25s}
.fab:hover{transform:translateY(-3px) scale(1.05)}
.fab.show{display:inline-flex;animation:fadeUp .3s}
.fab svg{width:20px;height:20px}

/* AI Assistant */
.ai-fab{position:fixed;right:1.2rem;bottom:5rem;width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,#c5c5c5,#0f9d74);color:#0a0a0a;font-weight:800;font-family:var(--display);font-size:.9rem;letter-spacing:.08em;display:grid;place-items:center;box-shadow:0 14px 30px rgba(25,229,155,.45);z-index:55;border:1px solid rgba(255,255,255,.2)}
.ai-pulse{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(25,229,155,.7);animation:aiPulse 2s ease-out infinite;pointer-events:none}
@keyframes aiPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.5);opacity:0}}
.ai-panel{position:fixed;right:1.2rem;bottom:7.4rem;width:min(340px,90vw);max-height:60vh;display:flex;flex-direction:column;z-index:60;border-radius:18px;overflow:hidden}
.ai-head{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1rem;border-bottom:1px solid var(--border)}
.ai-body{flex:1;overflow-y:auto;padding:.8rem;display:flex;flex-direction:column;gap:.5rem;font-size:.92rem}
.ai-msg{padding:.6rem .8rem;border-radius:12px;max-width:90%;line-height:1.45}
.ai-msg.ai{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:var(--text);align-self:flex-start}
.ai-msg.user{background:rgba(255,255,255,.06);align-self:flex-end}
.ai-form{display:flex;gap:.4rem;padding:.6rem;border-top:1px solid var(--border)}
.ai-form input{flex:1;padding:.6rem .8rem;border-radius:999px;border:1px solid var(--border);background:rgba(0,0,0,.3);color:var(--text);outline:none}
.ai-form .btn{padding:.55rem 1rem}

/* Reveal animations */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1;transform:translateY(0)}

/* Magnetic */
.magnetic{transition:transform .25s ease, box-shadow .25s ease}

/* Print */
@media print{
  body{background:#ffffff !important;color:#000000 !important}
  .nav,.fab,.ai-fab,.ai-panel,.scroll-progress,#particles,.season-overlay,.lock-screen,.hero,.goal-row,.tools-section,.testimonials-section,.faq-section,.contact-section,.footer,.result-actions,#themeToggle,#logoutBtn{display:none !important}
  .glass{background:#ffffff !important;box-shadow:none !important;border:1px solid #dddddd !important;color:#000000 !important}
  .day-card{break-inside:avoid;page-break-inside:avoid}
  .days-grid{grid-template-columns:repeat(2,1fr) !important}
  .day-meals{display:block !important}
  .grad-text{color:#0f9d74 !important;-webkit-text-fill-color:#0f9d74 !important}
  .results{padding:0}
}

/* Height ft/in row */
.ft-row{display:flex;align-items:center;gap:.4rem;padding:.4rem .55rem;border-radius:12px;border:1px solid var(--border);background:rgba(0,0,0,.3)}
body.light .ft-row{background:rgba(255,255,255,.85)}
.ft-row input{flex:1;min-width:0;padding:.55rem .6rem;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text);outline:none;font-size:.95rem}
.ft-sep{font-size:.78rem;color:var(--text-dim);font-weight:600;letter-spacing:.1em}

/* Tools tri row */
.tool-row.tri{grid-template-columns:repeat(3,1fr)}
@media(max-width:480px){.tool-row.tri{grid-template-columns:repeat(2,1fr)}}

/* Exercise block in day card */
.ex-block{margin-top:.7rem;padding:.7rem .8rem;border-radius:12px;background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(25,229,155,.06));border:1px solid rgba(255,255,255,.20)}
body.light .ex-block{background:linear-gradient(135deg,rgba(122,122,122,.10),rgba(155,155,155,.06));border-color:rgba(122,122,122,.25)}
.ex-head-row{font-size:.88rem;color:var(--text);margin-bottom:.4rem}
.ex-head-row strong{color:var(--green-2)}
body.light .ex-head-row strong{color:var(--green-2)}
.ex-meta{display:block;font-size:.74rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em;margin-top:.15rem}
.ex-viz{height:170px;display:grid;place-items:center;margin:.4rem 0;position:relative;border-radius:14px;background:radial-gradient(ellipse at 50% 90%,rgba(255,255,255,.18),transparent 70%),linear-gradient(160deg,rgba(23,23,23,.55),rgba(6,6,6,.65));border:1px solid rgba(255,255,255,.18);overflow:hidden;box-shadow:inset 0 0 30px rgba(255,255,255,.08), 0 6px 20px -10px rgba(0,0,0,.5)}
body.light .ex-viz{background:radial-gradient(ellipse at 50% 90%,rgba(122,122,122,.15),transparent 70%),linear-gradient(160deg,#fafafa,#f2f2f2);border-color:rgba(122,122,122,.2)}
.ex-viz::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%);background-size:200% 100%;animation:exShimmer 4s linear infinite;pointer-events:none}
@keyframes exShimmer{0%{background-position:200% 0}100%{background-position:-100% 0}}
.ex-viz::after{content:"●";position:absolute;right:10px;top:8px;color:#686868;font-size:.7rem;text-shadow:0 0 12px rgba(104,104,104,.7);animation:exHeart 1s ease-in-out infinite;width:auto;height:auto;background:none;box-shadow:none}
@keyframes exHeart{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.4);opacity:1}}
.ex-svg.ex-scene{width:100%;max-width:280px;height:160px;display:block;filter:drop-shadow(0 8px 14px rgba(0,0,0,.35))}
.ex-svg.ex-scene *{transform-box:fill-box}
.ex-combo{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--text-dim);margin-top:6px}
.ex-combo span{color:var(--gold-2);font-weight:600}

/* ===== Premium per-exercise motion ===== */
.ex-svg.ex-scene{--exspd:1.2s}

/* WALKING */
.ex-walking .exA-leg1{transform-origin:100px 80px;animation:exWalkF var(--exspd) cubic-bezier(.4,0,.6,1) infinite}
.ex-walking .exA-leg2{transform-origin:100px 80px;animation:exWalkB var(--exspd) cubic-bezier(.4,0,.6,1) infinite}
.ex-walking .exA-arm1{transform-origin:100px 48px;animation:exWalkB var(--exspd) cubic-bezier(.4,0,.6,1) infinite}
.ex-walking .exA-arm2{transform-origin:100px 48px;animation:exWalkF var(--exspd) cubic-bezier(.4,0,.6,1) infinite}
.ex-walking .exA{animation:exBob calc(var(--exspd)/2) ease-in-out infinite}
@keyframes exWalkF{0%,100%{transform:rotate(22deg)}50%{transform:rotate(-22deg)}}
@keyframes exWalkB{0%,100%{transform:rotate(-22deg)}50%{transform:rotate(22deg)}}
@keyframes exBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

/* TREADMILL */
.ex-treadmill .exA-leg1{transform-origin:100px 80px;animation:exRunF .55s cubic-bezier(.4,0,.6,1) infinite}
.ex-treadmill .exA-leg2{transform-origin:100px 80px;animation:exRunB .55s cubic-bezier(.4,0,.6,1) infinite}
.ex-treadmill .exA-arm1{transform-origin:100px 48px;animation:exRunB .55s cubic-bezier(.4,0,.6,1) infinite}
.ex-treadmill .exA-arm2{transform-origin:100px 48px;animation:exRunF .55s cubic-bezier(.4,0,.6,1) infinite}
.ex-treadmill .exA{animation:exBob .27s ease-in-out infinite}
.ex-treadmill .exProp-belt-l1{animation:exBelt .35s linear infinite}
@keyframes exRunF{0%,100%{transform:rotate(40deg)}50%{transform:rotate(-40deg)}}
@keyframes exRunB{0%,100%{transform:rotate(-40deg)}50%{transform:rotate(40deg)}}
@keyframes exBelt{from{stroke-dashoffset:0}to{stroke-dashoffset:-36}}

/* HIGH KNEES */
.ex-highknees .exF-legL{transform-origin:92px 80px;animation:exKneeL .45s ease-in-out infinite}
.ex-highknees .exF-legR{transform-origin:108px 80px;animation:exKneeR .45s ease-in-out infinite}
.ex-highknees .exF-armL{transform-origin:78px 48px;animation:exKneeR .45s ease-in-out infinite}
.ex-highknees .exF-armR{transform-origin:122px 48px;animation:exKneeL .45s ease-in-out infinite}
.ex-highknees .exF{animation:exBob .22s ease-in-out infinite}
@keyframes exKneeL{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(35deg)}}
@keyframes exKneeR{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(-35deg)}}

/* CYCLING */
.ex-cycling .exProp-wheelL,.ex-cycling .exProp-wheelR{transform-origin:center;animation:exSpin .9s linear infinite}
.ex-cycling .exProp-spoke1,.ex-cycling .exProp-spoke2{transform-origin:48px 118px;animation:exSpin .9s linear infinite}
.ex-cycling .exProp-spoke3,.ex-cycling .exProp-spoke4{transform-origin:160px 118px;animation:exSpin .9s linear infinite}
.ex-cycling .exProp-pedal{transform-origin:104px 92px;animation:exPedal .9s linear infinite}
.ex-cycling .exA-leg1{transform-origin:100px 80px;animation:exCycleL .9s linear infinite}
.ex-cycling .exA-leg2{transform-origin:100px 80px;animation:exCycleR .9s linear infinite}
@keyframes exSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes exPedal{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
@keyframes exCycleL{0%,100%{transform:rotate(25deg)}50%{transform:rotate(-25deg)}}
@keyframes exCycleR{0%,100%{transform:rotate(-25deg)}50%{transform:rotate(25deg)}}

/* JUMP ROPE */
.ex-jumprope .exF{animation:exJump .55s cubic-bezier(.5,0,.5,1) infinite}
.ex-jumprope .exProp-rope{animation:exRopeFlip .55s linear infinite;transform-origin:100px 80px}
@keyframes exJump{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes exRopeFlip{0%{d:path("M70 80 Q100 20 130 80")}25%{d:path("M70 80 Q40 80 100 60")}50%{d:path("M70 80 Q100 140 130 80")}75%{d:path("M70 80 Q160 80 100 60")}100%{d:path("M70 80 Q100 20 130 80")}}

/* STAIRS */
.ex-stairs .exA{animation:exStairWalk 1.2s ease-in-out infinite}
.ex-stairs .exA-leg1{transform-origin:100px 80px;animation:exWalkF 1.2s ease-in-out infinite}
.ex-stairs .exA-leg2{transform-origin:100px 80px;animation:exWalkB 1.2s ease-in-out infinite}
@keyframes exStairWalk{0%,100%{transform:translate(0,0)}50%{transform:translate(4px,-3px)}}

/* BOXING */
.ex-boxing .exF{animation:exBox .5s ease-in-out infinite}
.ex-boxing .exF-armL{transform-origin:78px 48px;animation:exJab .8s ease-in-out infinite}
.ex-boxing .exF-armR{transform-origin:122px 48px;animation:exCross .8s ease-in-out .4s infinite}
@keyframes exBox{0%,100%{transform:translateX(0)}50%{transform:translateX(2px)}}
@keyframes exJab{0%,80%,100%{transform:translateX(0) rotate(0)}40%{transform:translateX(14px) rotate(75deg) scale(1.1)}}
@keyframes exCross{0%,80%,100%{transform:translateX(0) rotate(0)}40%{transform:translateX(-14px) rotate(-75deg) scale(1.1)}}

/* PUSH-UP */
.ex-pushup .exA{animation:exPushDown 1.3s ease-in-out infinite}
@keyframes exPushDown{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

/* SQUAT */
.ex-squat .exF{animation:exSquatBody 1.6s ease-in-out infinite;transform-origin:100px 130px}
.ex-squat .exF-thighL,.ex-squat .exF-thighR{transform-origin:top;animation:exThigh 1.6s ease-in-out infinite}
@keyframes exSquatBody{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(14px) scaleY(.86)}}
@keyframes exThigh{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.78)}}

/* JUMP SQUATS */
.ex-jumpsquat .exF{animation:exJumpSq 1.1s cubic-bezier(.5,0,.5,1) infinite;transform-origin:100px 130px}
@keyframes exJumpSq{0%,100%{transform:translateY(0) scaleY(1)}40%{transform:translateY(12px) scaleY(.78)}70%{transform:translateY(-14px) scaleY(1.05)}}

/* LUNGE */
.ex-lunge .exA-leg1{transform-origin:100px 80px;animation:exLungeF 1.6s ease-in-out infinite}
.ex-lunge .exA-leg2{transform-origin:100px 80px;animation:exLungeB 1.6s ease-in-out infinite}
.ex-lunge .exA{animation:exLungeBody 1.6s ease-in-out infinite}
@keyframes exLungeF{0%,100%{transform:rotate(28deg)}50%{transform:rotate(-12deg)}}
@keyframes exLungeB{0%,100%{transform:rotate(-30deg)}50%{transform:rotate(10deg)}}
@keyframes exLungeBody{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

/* PLANK */
.ex-plank .exA{animation:exBreathe 3.5s ease-in-out infinite}
@keyframes exBreathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px) scale(1.01)}}

/* CURL */
.ex-curl .exF-foreL{transform-origin:78px 66px;animation:exCurlA 1.2s ease-in-out infinite}
.ex-curl .exF-foreR{transform-origin:122px 66px;animation:exCurlA 1.2s ease-in-out infinite}
.ex-curl .exProp-db{animation:exCurlDB 1.2s ease-in-out infinite;transform-origin:100px 88px}
@keyframes exCurlA{0%,100%{transform:rotate(0)}50%{transform:rotate(-130deg)}}
@keyframes exCurlDB{0%,100%{transform:translateY(0)}50%{transform:translateY(-30px) scaleY(.6)}}

/* PRESS */
.ex-press .exF-armL{transform-origin:78px 48px;animation:exPressA 1.3s ease-in-out infinite}
.ex-press .exF-armR{transform-origin:122px 48px;animation:exPressA 1.3s ease-in-out infinite}
.ex-press .exProp-db{animation:exPressDB 1.3s ease-in-out infinite}
@keyframes exPressA{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-22px) rotate(0)}}
@keyframes exPressDB{0%,100%{transform:translateY(0)}50%{transform:translateY(-44px)}}

/* PULL-UP */
.ex-pullup .exF{animation:exPull 1.5s ease-in-out infinite;transform-origin:100px 30px}
.ex-pullup .exF-armL,.ex-pullup .exF-armR{transform-origin:top;animation:exPullArm 1.5s ease-in-out infinite}
@keyframes exPull{0%,100%{transform:translateY(8px)}50%{transform:translateY(-12px)}}
@keyframes exPullArm{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.55)}}

/* DEADLIFT */
.ex-deadlift .exA{animation:exHinge 2s ease-in-out infinite;transform-origin:100px 80px}
.ex-deadlift .exProp-bar{animation:exBarLift 2s ease-in-out infinite}
@keyframes exHinge{0%,100%{transform:rotate(0) translateY(0)}50%{transform:rotate(-32deg) translateY(6px)}}
@keyframes exBarLift{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}

/* JUMPING JACKS */
.ex-jack .exF-armL{transform-origin:78px 48px;animation:exJackArmL .7s ease-in-out infinite}
.ex-jack .exF-armR{transform-origin:122px 48px;animation:exJackArmR .7s ease-in-out infinite}
.ex-jack .exF-legL{transform-origin:92px 80px;animation:exJackLegL .7s ease-in-out infinite}
.ex-jack .exF-legR{transform-origin:108px 80px;animation:exJackLegR .7s ease-in-out infinite}
.ex-jack .exF{animation:exJump .7s ease-in-out infinite}
@keyframes exJackArmL{0%,100%{transform:rotate(0)}50%{transform:rotate(-160deg)}}
@keyframes exJackArmR{0%,100%{transform:rotate(0)}50%{transform:rotate(160deg)}}
@keyframes exJackLegL{0%,100%{transform:rotate(0)}50%{transform:rotate(-22deg) translateX(-4px)}}
@keyframes exJackLegR{0%,100%{transform:rotate(0)}50%{transform:rotate(22deg) translateX(4px)}}

/* MOUNTAIN CLIMBERS */
.ex-climber .exA-leg1{transform-origin:100px 80px;animation:exClimbF .35s linear infinite}
.ex-climber .exA-leg2{transform-origin:100px 80px;animation:exClimbB .35s linear infinite}
@keyframes exClimbF{0%,100%{transform:rotate(60deg) translateY(-8px)}50%{transform:rotate(0deg) translateY(0)}}
@keyframes exClimbB{0%,100%{transform:rotate(0deg) translateY(0)}50%{transform:rotate(60deg) translateY(-8px)}}

/* BURPEE */
.ex-burpee .exF{animation:exBurp 1.8s ease-in-out infinite;transform-origin:100px 130px}
@keyframes exBurp{0%,100%{transform:translateY(0) scale(1)}25%{transform:translateY(16px) scaleY(.7)}50%{transform:translateY(38px) scaleY(.45) rotate(-78deg)}75%{transform:translateY(-14px) scale(1.06)}}

/* YOGA */
.ex-yoga .exF{animation:exYogaSway 4s ease-in-out infinite;transform-origin:100px 130px}
.ex-yoga .exF-armL{transform-origin:78px 48px;animation:exYogaArmL 4s ease-in-out infinite}
.ex-yoga .exF-armR{transform-origin:122px 48px;animation:exYogaArmR 4s ease-in-out infinite}
@keyframes exYogaSway{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1deg)}}
@keyframes exYogaArmL{0%,100%{transform:rotate(-90deg)}50%{transform:rotate(-100deg)}}
@keyframes exYogaArmR{0%,100%{transform:rotate(90deg)}50%{transform:rotate(100deg)}}

/* Small combo viz */
.ex-viz-sm{height:90px}
.ex-viz-sm .ex-svg.ex-scene{max-width:150px;height:90px}

/* Premium hover */
.ex-block{position:relative;overflow:hidden}
.ex-block::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.12),transparent 50%);opacity:0;transition:opacity .35s}
.ex-block:hover::after{opacity:1}

/* Howto step list */
.ex-howto{margin:.5rem 0 .6rem 1.1rem;padding:0;display:grid;gap:.25rem;font-size:.82rem;line-height:1.45;color:var(--text);counter-reset:exhowto}
.ex-howto li{position:relative;padding:.35rem .55rem .35rem .65rem;background:linear-gradient(90deg, color-mix(in oklab, var(--green-2) 12%, transparent), transparent);border-left:2px solid var(--green-2);border-radius:0 .35rem .35rem 0;list-style:none;counter-increment:exhowto}
.ex-howto li::before{content:counter(exhowto);display:inline-block;width:1.2rem;height:1.2rem;line-height:1.2rem;text-align:center;background:var(--green-2);color:#ffffff;border-radius:50%;font-size:.7rem;font-weight:700;margin-right:.4rem}
.ex-howto-combo li{border-left-color:#bfbfbf;background:linear-gradient(90deg,rgba(191,191,191,.15),transparent)}
.ex-howto-combo li::before{background:#bfbfbf}

.ex-tip{font-size:.82rem;line-height:1.5;padding:.55rem .7rem;margin:.5rem 0;background:linear-gradient(135deg,color-mix(in oklab,var(--green-2) 18%,transparent),color-mix(in oklab,var(--green-2) 6%,transparent));border:1px solid color-mix(in oklab,var(--green-2) 35%,transparent);border-radius:.55rem;color:var(--text)}

/* ===== Food Lifestyle Preference ===== */
.lifestyle-section{margin:1.5rem 0 .5rem;padding:1.25rem;border-radius:1rem;background:linear-gradient(135deg,color-mix(in oklab,var(--green-2) 6%,transparent),transparent);border:1px solid color-mix(in oklab,var(--green-2) 18%,transparent)}
.lifestyle-head{text-align:center;margin-bottom:1.25rem}
.lifestyle-tag{display:inline-block;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--green-2);background:color-mix(in oklab,var(--green-2) 14%,transparent);padding:.3rem .7rem;border-radius:999px;margin-bottom:.6rem}
.lifestyle-head h3{font-family:'Space Grotesk',sans-serif;font-size:1.4rem;margin:.25rem 0 .35rem;background:linear-gradient(90deg,var(--green-1),var(--green-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.lifestyle-head p{color:var(--muted);font-size:.88rem;max-width:34rem;margin:0 auto}
.lifestyle-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.9rem}
.life-card{position:relative;display:flex;flex-direction:column;gap:.7rem;padding:1.1rem;border-radius:.95rem;cursor:pointer;transition:transform .35s cubic-bezier(.2,.9,.3,1.4),border-color .25s,box-shadow .35s,background .25s;overflow:hidden;border:1.5px solid color-mix(in oklab,var(--green-2) 12%,transparent)}
.life-card::before{content:"";position:absolute;inset:-2px;border-radius:inherit;background:conic-gradient(from 0deg,transparent,color-mix(in oklab,var(--green-2) 45%,transparent),transparent 60%);opacity:0;transition:opacity .4s;z-index:0;animation:lifeSpin 6s linear infinite;pointer-events:none}
.life-card>*{position:relative;z-index:1}
.life-card input{position:absolute;opacity:0;pointer-events:none}
.life-card:hover{transform:translateY(-4px);border-color:color-mix(in oklab,var(--green-2) 40%,transparent);box-shadow:0 18px 40px -20px color-mix(in oklab,var(--green-2) 50%,transparent)}
.life-card:has(input:checked){border-color:var(--green-2);background:linear-gradient(135deg,color-mix(in oklab,var(--green-2) 14%,transparent),color-mix(in oklab,var(--green-1) 6%,transparent));box-shadow:0 0 0 1px var(--green-2),0 20px 50px -18px color-mix(in oklab,var(--green-2) 60%,transparent);transform:translateY(-3px)}
.life-card:has(input:checked)::before{opacity:.55}
.life-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:.7rem;background:linear-gradient(135deg,color-mix(in oklab,var(--green-2) 22%,transparent),color-mix(in oklab,var(--green-1) 12%,transparent));color:var(--green-2)}
.life-icon svg{width:22px;height:22px}
.life-body h4{font-family:'Space Grotesk',sans-serif;font-size:1.02rem;margin:0 0 .25rem;color:var(--text)}
.life-body p{font-size:.82rem;line-height:1.5;color:var(--muted);margin:0 0 .55rem}
.life-tags{display:flex;flex-wrap:wrap;gap:.3rem;list-style:none;padding:0;margin:0}
.life-tags li{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--green-2);padding:.22rem .55rem;border-radius:999px;background:color-mix(in oklab,var(--green-2) 12%,transparent);border:1px solid color-mix(in oklab,var(--green-2) 22%,transparent)}
.life-check{position:absolute;top:.7rem;right:.7rem;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.75rem;font-weight:800;color:#202020;background:var(--green-2);opacity:0;transform:scale(.5);transition:opacity .25s,transform .35s cubic-bezier(.2,.9,.3,1.6)}
.life-card:has(input:checked) .life-check{opacity:1;transform:scale(1)}
@keyframes lifeSpin{to{transform:rotate(360deg)}}
@media (max-width:560px){.lifestyle-grid{grid-template-columns:1fr}}

/* ============= PART 1: Accordion day card ============= */
.acc-card{ padding:14px 16px; transition:box-shadow .3s, transform .3s; }
.acc-card.open{ box-shadow:0 18px 50px -20px rgba(255,255,255,.35); }
.acc-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:10px; }
.day-head-right{ display:flex; align-items:center; gap:8px; }
.day-summary{ font-size:.78rem; color:var(--text-dim); margin:4px 0 0; line-height:1.4; }
.acc-tabs{ display:flex; flex-wrap:wrap; gap:6px; padding:6px 0; border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); }
.acc-tab{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); color:var(--text-dim); padding:6px 11px; border-radius:999px; font-size:.74rem; cursor:pointer; transition:all .25s; font-weight:500; backdrop-filter:blur(6px); }
.acc-tab:hover{ background:rgba(255,255,255,.12); color:#f5f5f5; transform:translateY(-1px); }
.acc-tab.active{ background:linear-gradient(135deg, rgba(255,255,255,.25), rgba(25,229,155,.18)); color:#ffffff; border-color:rgba(255,255,255,.45); box-shadow:0 4px 14px -4px rgba(255,255,255,.5); }
.acc-panels{ display:grid; grid-template-rows:1fr; }
.acc-panel{ display:none; padding:14px 4px 4px; animation:accFade .3s ease; }
.acc-panel.active{ display:block; }
@keyframes accFade{ from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }
.acc-panel p{ margin:6px 0; font-size:.85rem; line-height:1.5; }
.alt-list, .tip-list{ margin:4px 0 10px 18px; padding:0; font-size:.8rem; color:var(--text-dim); line-height:1.55; }
.alt-list li, .tip-list li{ margin:2px 0; }
.nut-note{ margin-top:10px; font-size:.82rem; color:var(--text-dim); }

/* ============= User chip + greet ============= */
.user-chip{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.3); padding:6px 10px 6px 12px; border-radius:999px; font-size:.78rem; color:#f5f5f5; }
.user-chip.hidden{ display:none; }
.uc-dot{ width:8px; height:8px; border-radius:50%; background:#f5f5f5; box-shadow:0 0 8px #f5f5f5; animation:pulseDot 2s infinite; }
@keyframes pulseDot{ 50%{ opacity:.4 } }
.uc-out{ background:transparent; border:none; color:#f5f5f5; cursor:pointer; font-size:1rem; padding:2px 4px; line-height:1; }
.uc-out:hover{ color:#ffffff; }
.greet-slot{ font-size:.95rem; color:#f5f5f5; font-weight:600; margin-bottom:10px; min-height:1.2em; letter-spacing:.2px; }

/* ============= Login promo card ============= */
.login-promo-wrap{ max-width:1100px; margin:60px auto 20px; padding:0 20px; }
.login-promo{ display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:center; padding:32px; border:1px solid rgba(25,229,155,.2); background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(25,229,155,.06)); position:relative; overflow:hidden; }
.login-promo::before{ content:''; position:absolute; inset:-50%; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.15), transparent 60%); pointer-events:none; }
.lp-text{ flex:1 1 320px; position:relative; }
.lp-text h3{ font-family:'Space Grotesk',sans-serif; font-size:1.6rem; margin:0 0 8px; background:linear-gradient(135deg,#f5f5f5,#c5c5c5); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lp-text p{ color:var(--text-dim); margin:0; font-size:.95rem; line-height:1.6; }
.lp-actions{ display:flex; gap:10px; flex-wrap:wrap; position:relative; }

/* ============= Login modal ============= */
.login-modal{ position:fixed; inset:0; background:rgba(12,12,12,.75); backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center; z-index:9999; padding:20px; }
.login-modal.open{ display:flex; animation:modalIn .25s ease; }
@keyframes modalIn{ from{opacity:0} to{opacity:1} }
.login-card{ width:100%; max-width:400px; padding:32px 28px; position:relative; border:1px solid rgba(255,255,255,.25); animation:cardIn .3s ease; }
@keyframes cardIn{ from{transform:translateY(20px) scale(.95); opacity:0} to{transform:none; opacity:1} }
.login-close{ position:absolute; top:12px; right:14px; background:transparent; border:none; color:var(--text-dim); font-size:1.6rem; cursor:pointer; line-height:1; }
.login-close:hover{ color:#ffffff; }
.login-card h3{ margin:0 0 6px; font-family:'Space Grotesk',sans-serif; font-size:1.4rem; }
.login-sub{ color:var(--text-dim); font-size:.85rem; margin:0 0 20px; }
.btn-google{ width:100%; display:flex; align-items:center; justify-content:center; gap:10px; background:#ffffff; color:#222222; border:none; padding:11px; font-weight:600; }
.btn-google:hover{ background:#f4f4f4; }
.login-or{ display:flex; align-items:center; gap:10px; margin:18px 0; color:var(--text-dim); font-size:.78rem; }
.login-or::before, .login-or::after{ content:''; flex:1; height:1px; background:rgba(255,255,255,.1); }
.email-login{ display:grid; gap:10px; }
.email-login input{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); color:#ffffff; padding:10px 12px; border-radius:10px; font-size:.9rem; outline:none; transition:border-color .2s; }
.email-login input:focus{ border-color:#f5f5f5; }
.email-login button{ margin-top:4px; }
.login-status{ margin-top:10px; font-size:.78rem; color:#c5c5c5; min-height:1em; text-align:center; }
.login-foot{ font-size:.7rem; color:var(--text-dim); text-align:center; margin:14px 0 0; }

@media (max-width:600px){
  .acc-tabs{ gap:4px; }
  .acc-tab{ padding:5px 9px; font-size:.7rem; }
  .login-promo{ padding:22px; }
  .lp-text h3{ font-size:1.3rem; }
}

/* ===== Premium Meal Sub-Tabs (Breakfast / Lunch / Dinner / Snacks / Drinks) ===== */
.meal-subtabs{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px;
  padding:6px; background:rgba(255,255,255,.03); border-radius:14px;
  border:1px solid rgba(255,255,255,.06);
}
.meal-subtab{
  flex:1 1 auto; min-width:88px;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 12px; border-radius:10px;
  background:transparent; border:1px solid transparent;
  color:var(--text-dim); font-size:.78rem; font-weight:600; cursor:pointer;
  transition:all .25s ease;
}
.meal-subtab span{
  font-size:.66rem; opacity:.75; padding:2px 6px;
  background:rgba(255,255,255,.06); border-radius:999px;
}
.meal-subtab:hover{ background:rgba(255,255,255,.08); color:#e7e7e7; }
.meal-subtab.active{
  background:linear-gradient(135deg, rgba(255,255,255,.28), rgba(25,229,155,.18));
  color:#ffffff; border-color:rgba(255,255,255,.5);
  box-shadow:0 6px 18px -8px rgba(255,255,255,.55);
}
.meal-subtab.active span{ background:rgba(0,0,0,.25); color:#ffffff; }

.meal-subpanel{ display:none; animation:accFade .3s ease; }
.meal-subpanel.active{ display:block; }

.meal-card{
  background:linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:16px 18px;
  backdrop-filter:blur(10px);
  position:relative; overflow:hidden;
}
.meal-card::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at top right, rgba(255,255,255,.12), transparent 60%);
  pointer-events:none;
}
.meal-head{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:10px; position:relative;
}
.meal-title{
  font-size:.78rem; font-weight:600; letter-spacing:.04em;
  color:var(--text-dim); text-transform:uppercase;
}
.meal-cal{
  font-size:.78rem; font-weight:700; color:#f5f5f5;
  background:rgba(255,255,255,.12); padding:4px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
}
.meal-name{
  font-size:1.05rem; font-weight:600; color:#ffffff;
  line-height:1.4; margin-bottom:10px; position:relative;
}
.meal-tags{
  display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; position:relative;
}
.meal-tag{
  font-size:.68rem; padding:3px 9px; border-radius:999px;
  background:rgba(25,229,155,.1); color:#e4e4e4;
  border:1px solid rgba(25,229,155,.2);
}
.meal-macros{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  padding:10px 0; border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  margin-bottom:12px; position:relative;
}
.macro{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  font-size:.7rem; color:var(--text-dim); text-align:center;
}
.macro b{ font-size:1rem; color:#ffffff; font-weight:700; }
.macro.p b{ color:#8e8e8e; }
.macro.c b{ color:#e5e5e5; }
.macro.f b{ color:#9c9c9c; }

.meal-alts-wrap{ position:relative; }
.meal-alts-title{
  font-size:.72rem; font-weight:600; color:var(--text-dim);
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px;
}
.meal-alts{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:6px;
}
.meal-alts li{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:8px 12px; border-radius:10px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  font-size:.83rem; color:#e7e7e7;
  transition:all .2s ease;
}
.meal-alts li:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.25);
  transform:translateX(2px);
}
.alt-name{ flex:1; }
.alt-p{
  font-size:.7rem; font-weight:700; color:#8e8e8e;
  background:rgba(142,142,142,.1); padding:3px 8px; border-radius:999px;
  border:1px solid rgba(142,142,142,.2); white-space:nowrap;
}
.meal-card-mini .meal-name{ font-size:.95rem; }

@media (max-width:520px){
  .meal-subtab{ min-width:72px; padding:7px 9px; font-size:.72rem; }
  .meal-card{ padding:13px 14px; }
  .meal-name{ font-size:.98rem; }
  .macro b{ font-size:.9rem; }
}

/* ========== AI CHAT MARKDOWN POLISH ========== */
.ai-msg p { margin: 0 0 6px 0; line-height: 1.5; }
.ai-msg p:last-child { margin-bottom: 0; }
.ai-msg ol.ai-list, .ai-msg ul.ai-list {
  margin: 4px 0 6px 0; padding-left: 18px;
}
.ai-msg ol.ai-list li, .ai-msg ul.ai-list li { margin: 2px 0; line-height: 1.45; }
.ai-msg code {
  background: rgba(166,166,166,0.12); color: #19e59b;
  padding: 1px 5px; border-radius: 4px; font-size: .85em;
  font-family: 'SF Mono', Menlo, monospace;
}

/* ========== EXERCISES SECTION ========== */
.exercises-section {
  padding: 80px 24px;
  max-width: 1280px;
  margin: 0 auto;
}
.ex-filters {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: center;
  margin: 0 0 32px 0;
}
.ex-pillgroup {
  display: flex; flex-wrap: wrap; gap: 6px;
  background: rgba(255,255,255,0.03);
  padding: 4px; border-radius: 50px;
  border: 1px solid rgba(166,166,166,0.14);
}
.ex-pill {
  border: 0; background: transparent; cursor: pointer;
  color: #8a8a8a; padding: 7px 14px; font-size: .82rem;
  font-weight: 500; border-radius: 50px;
  transition: all .25s ease;
  font-family: inherit;
}
.ex-pill:hover { color: #19e59b; }
.ex-pill.active {
  background: linear-gradient(135deg, #a6a6a6, #19e59b);
  color: #0a0a0a; font-weight: 600;
  box-shadow: 0 4px 16px rgba(166,166,166,0.3);
}
.ex-search {
  padding: 9px 16px; border-radius: 50px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(166,166,166,0.18);
  color: #f0f0f0; font-size: .85rem; min-width: 220px;
  font-family: inherit;
}
.ex-search:focus { outline: none; border-color: rgba(166,166,166,0.5); }

.ex-grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.ex-card {
  border-radius: 20px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: all .35s cubic-bezier(.4,0,.2,1);
}
.ex-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.4), 0 0 0 1px rgba(166,166,166,0.3);
}
.ex-anim {
  height: 200px;
  background: radial-gradient(ellipse at center bottom, rgba(166,166,166,0.08), transparent 70%), #0b0b0b;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid rgba(166,166,166,0.12);
}
.ex-svg { width: 130px; height: 180px; position:relative; overflow:hidden; border-radius:14px; border:1px solid rgba(255,255,255,.15); box-shadow:0 10px 30px rgba(0,0,0,.5); background:#0e0e0e; }
.ex-svg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(10,10,10,.75) 100%); pointer-events:none; transition:opacity .35s; }
.ex-svg:hover::after{ opacity:.55; }
.ex-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.9,.3,1); }
.ex-svg:hover .ex-img { transform: scale(1.08); }
.ex-svg .head, .ex-svg .torso, .ex-svg .armL, .ex-svg .armR, .ex-svg .legL, .ex-svg .legR {
  stroke: #19e59b; stroke-width: 3; stroke-linecap: round; fill: none;
  transform-box: fill-box; transform-origin: center;
}
.ex-svg .head { fill: #19e59b; stroke: none; }
.ex-svg .ground { stroke: rgba(166,166,166,0.3); stroke-width: 1.5; stroke-dasharray: 3 4; }
.ex-svg .figure { transform-box: fill-box; transform-origin: 50px 80px; }

.ex-meta { padding: 18px 20px 20px; }
.ex-meta h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem; margin: 0 0 10px;
  color: #f0f0f0;
}
.ex-badges { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.ex-badge {
  padding: 3px 10px; border-radius: 50px;
  font-size: .7rem; font-weight: 600;
  text-transform: capitalize; border: 1px solid;
}
.ex-muscle {
  background: rgba(166,166,166,0.15);
  color: #19e59b; border-color: rgba(166,166,166,0.3);
}
.ex-stats {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: .78rem; color: #8a8a8a;
}
.ex-desc {
  font-size: .82rem; color: #8a8a8a;
  line-height: 1.5; margin: 0;
}

/* ===== 12 unique stick-figure animations ===== */
@keyframes pushup-body { 0%,100%{ transform: translateY(-6px) rotate(-4deg);} 50%{ transform: translateY(8px) rotate(-4deg);} }
.ex-pushup .figure { animation: pushup-body 1.6s ease-in-out infinite; transform-origin: 70px 95px; }
.ex-pushup .legL, .ex-pushup .legR { transform: translate(15px, -25px) rotate(82deg); }
.ex-pushup .armL, .ex-pushup .armR { transform: translateY(20px); }
.ex-pushup .torso { transform: translateY(-5px) rotate(82deg); transform-origin: 50px 30px; }
.ex-pushup .head { transform: translate(35px,-12px); }

@keyframes squat-body { 0%,100%{ transform: translateY(0) scaleY(1);} 50%{ transform: translateY(15px) scaleY(.85);} }
@keyframes squat-leg { 0%,100%{ stroke-dasharray: 0;} 50%{ transform: scaleY(.7);} }
.ex-squat .figure { animation: squat-body 1.6s ease-in-out infinite; transform-origin: 50px 110px; }

@keyframes plank-pulse { 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.04);} }
.ex-plank .figure { animation: plank-pulse 2.4s ease-in-out infinite; transform-origin: 50px 80px; }
.ex-plank .torso { transform: rotate(82deg) translateY(-22px); transform-origin: 50px 30px; }
.ex-plank .legL, .ex-plank .legR { transform: rotate(82deg) translateY(-18px); }
.ex-plank .armL, .ex-plank .armR { transform: rotate(-10deg) translateY(15px); }
.ex-plank .head { transform: translate(40px,-5px); }

@keyframes jj-armL { 0%,100%{ transform: rotate(0deg);} 50%{ transform: rotate(-90deg);} }
@keyframes jj-armR { 0%,100%{ transform: rotate(0deg);} 50%{ transform: rotate(90deg);} }
@keyframes jj-legL { 0%,100%{ transform: rotate(0deg);} 50%{ transform: rotate(-22deg);} }
@keyframes jj-legR { 0%,100%{ transform: rotate(0deg);} 50%{ transform: rotate(22deg);} }
@keyframes jj-bounce { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-6px);} }
.ex-jjacks .figure { animation: jj-bounce .6s ease-in-out infinite; }
.ex-jjacks .armL { animation: jj-armL .6s ease-in-out infinite; transform-origin: 50px 40px; }
.ex-jjacks .armR { animation: jj-armR .6s ease-in-out infinite; transform-origin: 50px 40px; }
.ex-jjacks .legL { animation: jj-legL .6s ease-in-out infinite; transform-origin: 50px 78px; }
.ex-jjacks .legR { animation: jj-legR .6s ease-in-out infinite; transform-origin: 50px 78px; }

@keyframes burpee-cycle {
  0%,15%   { transform: translateY(0) scaleY(1); }
  30%,45%  { transform: translateY(20px) scaleY(.7); }
  60%,75%  { transform: translateY(28px) scaleY(.5) rotate(0); }
  85%      { transform: translateY(-12px) scaleY(1.05); }
  100%     { transform: translateY(0) scaleY(1); }
}
.ex-burpee .figure { animation: burpee-cycle 2.6s ease-in-out infinite; transform-origin: 50px 110px; }

@keyframes curl-armL { 0%,100%{ transform: rotate(0deg);} 50%{ transform: rotate(-115deg);} }
@keyframes curl-armR { 0%,100%{ transform: rotate(0deg);} 50%{ transform: rotate(115deg);} }
.ex-curl .armL { animation: curl-armL 1.6s ease-in-out infinite; transform-origin: 50px 40px; }
.ex-curl .armR { animation: curl-armR 1.6s ease-in-out infinite; transform-origin: 50px 40px; }

@keyframes lunge-body { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(14px);} }
@keyframes lunge-legL { 0%,100%{ transform: rotate(0);} 50%{ transform: rotate(-25deg);} }
@keyframes lunge-legR { 0%,100%{ transform: rotate(0);} 50%{ transform: rotate(25deg);} }
.ex-lunge .figure { animation: lunge-body 1.8s ease-in-out infinite; }
.ex-lunge .legL { animation: lunge-legL 1.8s ease-in-out infinite; transform-origin: 50px 78px; }
.ex-lunge .legR { animation: lunge-legR 1.8s ease-in-out infinite; transform-origin: 50px 78px; }

@keyframes mclimb-legL { 0%,100%{ transform: rotate(82deg) translateY(-18px);} 50%{ transform: rotate(40deg) translateY(-30px);} }
@keyframes mclimb-legR { 0%,100%{ transform: rotate(82deg) translateY(-18px) translateX(8px);} 50%{ transform: rotate(120deg) translateY(-10px);} }
.ex-mclimb .torso { transform: rotate(82deg) translateY(-22px); transform-origin: 50px 30px; }
.ex-mclimb .armL, .ex-mclimb .armR { transform: rotate(-10deg) translateY(15px); }
.ex-mclimb .head { transform: translate(40px,-5px); }
.ex-mclimb .legL { animation: mclimb-legL .8s ease-in-out infinite; transform-origin: 50px 78px; }
.ex-mclimb .legR { animation: mclimb-legR .8s ease-in-out infinite alternate; transform-origin: 50px 78px; }

@keyframes row-armL { 0%,100%{ transform: rotate(0deg);} 50%{ transform: rotate(-65deg);} }
@keyframes row-armR { 0%,100%{ transform: rotate(0deg);} 50%{ transform: rotate(65deg);} }
@keyframes row-torso { 0%,100%{ transform: rotate(45deg) translateY(-10px);} }
.ex-row .torso { transform: rotate(45deg) translateY(-12px); transform-origin: 50px 30px; }
.ex-row .legL { transform: rotate(-12deg); transform-origin: 50px 78px; }
.ex-row .legR { transform: rotate(12deg); transform-origin: 50px 78px; }
.ex-row .armL { animation: row-armL 1.6s ease-in-out infinite; transform-origin: 50px 40px; }
.ex-row .armR { animation: row-armR 1.6s ease-in-out infinite; transform-origin: 50px 40px; }
.ex-row .head { transform: translate(20px,5px); }

@keyframes deadlift-cycle {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(20px) rotate(35deg); }
}
.ex-deadlift .figure { animation: deadlift-cycle 2s ease-in-out infinite; transform-origin: 50px 110px; }

@keyframes situp-cycle { 0%,100%{ transform: rotate(0deg);} 50%{ transform: rotate(-50deg);} }
.ex-situp .figure { animation: situp-cycle 1.5s ease-in-out infinite; transform-origin: 50px 110px; }
.ex-situp .legL, .ex-situp .legR { transform: rotate(70deg) translateY(-25px); }

@keyframes hk-legL { 0%,100%{ transform: rotate(0deg);} 50%{ transform: rotate(-75deg);} }
@keyframes hk-legR { 0%,100%{ transform: rotate(0deg);} 50%{ transform: rotate(75deg);} }
@keyframes hk-armL { 0%,100%{ transform: rotate(35deg);} 50%{ transform: rotate(-35deg);} }
@keyframes hk-armR { 0%,100%{ transform: rotate(-35deg);} 50%{ transform: rotate(35deg);} }
.ex-hknees .legL { animation: hk-legL .5s ease-in-out infinite; transform-origin: 50px 78px; }
.ex-hknees .legR { animation: hk-legR .5s ease-in-out infinite alternate; transform-origin: 50px 78px; }
.ex-hknees .armL { animation: hk-armL .5s ease-in-out infinite; transform-origin: 50px 40px; }
.ex-hknees .armR { animation: hk-armR .5s ease-in-out infinite; transform-origin: 50px 40px; }

@media (max-width: 720px) {
  .ex-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .ex-search { min-width: 100%; }
}
@media (max-width: 460px) {
  .ex-grid { grid-template-columns: 1fr; }
}

/* ============ WAVE 2: Tools, Testimonials, FAQ, Footer ============ */
.tool .tool-desc { font-size: 12px; color: var(--text-muted, #a2a2a2); margin: -4px 0 10px; }
.tool select { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: inherit; border-radius: 10px; padding: 8px 10px; font: inherit; }
.tool .tool-row.tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tool .tool-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.btn.btn-link { background: transparent; border: 0; color: var(--accent, #6f6f6f); padding: 6px 0; text-decoration: underline; font-size: 13px; }

/* BMI Gauge */
.bmi-gauge { margin-top: 14px; position: relative; }
.bmi-track { display: flex; height: 8px; border-radius: 999px; overflow: hidden; }
.bmi-seg { flex: 1; }
.bmi-seg.s1 { background: #949494; }
.bmi-seg.s2 { background: #ffffff; }
.bmi-seg.s3 { background: #bdbdbd; }
.bmi-seg.s4 { background: #6c6c6c; }
.bmi-marker { position: absolute; top: -4px; width: 4px; height: 16px; background: #ffffff; border-radius: 2px; box-shadow: 0 0 8px rgba(255,255,255,0.6); transition: left 0.5s cubic-bezier(0.4,0,0.2,1); }
.bmi-marker:empty { display: none; }
.bmi-labels { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10px; color: var(--text-muted, #a2a2a2); text-transform: uppercase; letter-spacing: 0.5px; }

/* Macro bars */
.macro-bars { margin-top: 14px; display: grid; gap: 8px; }
.macro { display: grid; grid-template-columns: 60px 1fr 50px; align-items: center; gap: 10px; font-size: 12px; }
.macro b { text-align: right; color: var(--text-strong, #ffffff); }
.mbar { height: 8px; background: rgba(255,255,255,0.06); border-radius: 999px; overflow: hidden; }
.mbar i { display: block; height: 100%; width: 0; border-radius: 999px; transition: width 0.7s cubic-bezier(0.4,0,0.2,1); }
.mbar .mp { background: linear-gradient(90deg, #6f6f6f, #a9a9a9); }
.mbar .mc { background: linear-gradient(90deg, #bdbdbd, #efefef); }
.mbar .mf { background: linear-gradient(90deg, #ffffff, #c8c8c8); }

/* Hydration */
.hyd-glasses { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 4px; font-size: 18px; line-height: 1; }
.hg { animation: hgPop 0.4s ease both; display: inline-block; }
.hg:nth-child(1) { animation-delay: 0.02s } .hg:nth-child(2) { animation-delay: 0.06s }
.hg:nth-child(3) { animation-delay: 0.10s } .hg:nth-child(4) { animation-delay: 0.14s }
.hg:nth-child(5) { animation-delay: 0.18s } .hg:nth-child(6) { animation-delay: 0.22s }
@keyframes hgPop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Testimonial stars */
.t-stars { color: #bdbdbd; letter-spacing: 2px; font-size: 14px; margin-bottom: 8px; }

/* FAQ richer */
.faq { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; margin-bottom: 10px; overflow: hidden; transition: border-color 0.2s; }
.faq:hover { border-color: rgba(111,111,111,0.3); }
.faq-q { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; cursor: pointer; font-weight: 600; gap: 12px; }
.faq-icon { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: rgba(111,111,111,0.15); color: var(--accent, #6f6f6f); font-size: 16px; transition: transform 0.3s; }
.faq.open .faq-icon { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s; padding: 0 18px; }
.faq.open .faq-a { max-height: 300px; padding: 0 18px 16px; }
.faq-a p { margin: 0; color: var(--text-muted, #b1b1b1); line-height: 1.6; font-size: 14px; }

/* Footer grid */
.footer { padding: 56px 24px 24px; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.3)); margin-top: 80px; border-top: 1px solid rgba(255,255,255,0.06); }
.footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.footer-brand .footer-text { color: var(--text-muted, #a2a2a2); font-size: 13px; line-height: 1.6; margin: 12px 0 16px; max-width: 320px; }
.footer-col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-strong, #ffffff); margin: 0 0 14px; }
.footer-col a { display: block; color: var(--text-muted, #a2a2a2); text-decoration: none; padding: 6px 0; font-size: 14px; transition: color 0.2s, transform 0.2s; }
.footer-col a:hover { color: var(--accent, #6f6f6f); transform: translateX(2px); }
.footer-bottom { max-width: 1200px; margin: 24px auto 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--text-muted, #a2a2a2); }
.footer-badge { background: rgba(111,111,111,0.15); color: var(--accent, #6f6f6f); padding: 4px 10px; border-radius: 999px; font-weight: 600; }

@media (max-width: 860px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 520px) {
  .footer-inner { grid-template-columns: 1fr; }
  .tool .tool-row.tri { grid-template-columns: 1fr 1fr; }
}

/* ============== AURA DS — Landing Phase 2 ============== */

/* Hero typography upgrade */
.hero-title{
  font-family:var(--aura-font-display);
  font-size:clamp(2.6rem,6.8vw,5.6rem);
  line-height:1.02;
  letter-spacing:-.035em;
  font-weight:700;
}
.grad-text,.hero-title .grad-text{
  background:var(--aura-grad-text);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.hero-sub{font-size:clamp(1.02rem,1.5vw,1.22rem);line-height:1.55;color:var(--aura-text-2)}
.stat-num{font-family:var(--aura-font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* Section eyebrow */
.aura-eyebrow{
  display:inline-block;padding:.4rem .9rem;
  font:600 .68rem/1 var(--aura-font-mono);
  letter-spacing:.28em;color:var(--aura-primary);
  background:var(--aura-primary-glow);
  border:1px solid var(--aura-border-strong);
  border-radius:999px;margin-bottom:1rem;
  text-transform:uppercase;
}
.section-head{text-align:center;max-width:780px;margin:0 auto 2.6rem;padding:0 1.2rem}
.section-title{font-family:var(--aura-font-display);font-size:clamp(2rem,4vw,3.4rem);line-height:1.05;letter-spacing:-.03em;font-weight:700;margin:.4rem 0 .8rem}
.section-sub{color:var(--aura-text-2);font-size:clamp(.98rem,1.2vw,1.1rem);line-height:1.55}

/* ===== Bento grid ===== */
.aura-bento-wrap{max-width:1240px;margin:5rem auto 5rem;padding:0 1.4rem}
.aura-bento{
  display:grid;gap:1.1rem;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:minmax(160px,auto);
}
.bento{
  position:relative;overflow:hidden;
  padding:1.5rem 1.5rem 1.7rem;
  display:flex;flex-direction:column;gap:.55rem;
  color:var(--aura-text);text-decoration:none;
  background:linear-gradient(180deg,rgba(20,20,20,.85),rgba(12,12,12,.92));
}
.bento h3{font-family:var(--aura-font-display);font-size:1.35rem;font-weight:600;margin:.2rem 0 0;letter-spacing:-.01em}
.bento p{color:var(--aura-text-2);font-size:.95rem;line-height:1.5;margin:0}
.bento-icon{
  width:46px;height:46px;display:grid;place-items:center;
  border-radius:14px;font-size:1.4rem;
  background:var(--aura-primary-glow);
  border:1px solid var(--aura-border-strong);
}
.bento-a{grid-column:span 3;grid-row:span 2}
.bento-b{grid-column:span 3}
.bento-c{grid-column:span 2}
.bento-d{grid-column:span 2}
.bento-e{grid-column:span 2}
.bento-a .bento-icon{width:58px;height:58px;font-size:1.8rem}
.bento-a h3{font-size:1.9rem}
.bento-a p{font-size:1.02rem;max-width:480px}
.bento-glow{
  position:absolute;inset:auto -40% -60% auto;width:80%;height:80%;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.18),transparent 70%);
  pointer-events:none;filter:blur(40px);
}
@media(max-width:960px){
  .aura-bento{grid-template-columns:repeat(4,1fr)}
  .bento-a{grid-column:span 4}
  .bento-b{grid-column:span 4}
  .bento-c,.bento-d,.bento-e{grid-column:span 4}
}

/* ===== Meal carousel ===== */
.meal-preview-wrap{max-width:1280px;margin:5rem auto 5rem;padding:0 1.4rem}
.meal-carousel{
  display:flex;gap:1.1rem;overflow-x:auto;overflow-y:visible;
  padding:1rem .4rem 2rem;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent;
  -webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(90deg,transparent 0,#000000 3%,#000000 97%,transparent 100%);
}
.meal-carousel::-webkit-scrollbar{height:6px}
.meal-carousel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:99px}
.meal-card{
  flex:0 0 320px;scroll-snap-align:start;
  display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--aura-r-lg);
}
.meal-img{
  height:200px;background-size:cover;background-position:center;
  position:relative;
}
.meal-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(12,12,12,.85) 100%);
}
.meal-body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.6rem}
.meal-tag{
  font:600 .65rem/1 var(--aura-font-mono);letter-spacing:.2em;
  color:var(--aura-primary);text-transform:uppercase;
}
.meal-body h3{font-family:var(--aura-font-display);font-size:1.18rem;font-weight:600;margin:.1rem 0;letter-spacing:-.01em;line-height:1.25}
.meal-macros{display:flex;flex-wrap:wrap;gap:.5rem .85rem;margin-top:.3rem;font-size:.78rem;color:var(--aura-text-2)}
.m-cal{
  font-family:var(--aura-font-mono);color:var(--aura-primary);font-weight:600;font-size:1rem;
}
.m-cal small{color:var(--aura-text-3);font-weight:500;margin-left:2px}
.m-mac{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--aura-font-mono)}
.m-mac i{
  display:inline-block;width:36px;height:4px;border-radius:99px;
  background:rgba(255,255,255,.08);position:relative;overflow:hidden;
}
.m-mac i::before{
  content:"";position:absolute;left:0;top:0;height:100%;width:var(--p,50%);
  background:var(--aura-grad-primary);border-radius:99px;
}
@media(max-width:640px){
  .meal-card{flex:0 0 78%}
}

/* Bento + meal hover lift respects reduced motion */
@media (prefers-reduced-motion:reduce){
  .glass-interactive:hover{transform:none}
}

/* ============== AURA DS — App Shell (Sidebar + Bottom Nav) ============== */
.aura-side{
  position:fixed;left:0;top:0;bottom:0;width:232px;z-index:50;
  display:none;flex-direction:column;gap:.4rem;
  padding:1.2rem .85rem 1.2rem;
  background:linear-gradient(180deg,rgba(12,12,12,.85) 0%,rgba(4,4,4,.92) 100%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  backdrop-filter:blur(28px) saturate(180%);
  border-right:1px solid rgba(255,255,255,.10);
  box-shadow:8px 0 60px rgba(0,0,0,.45);
  transition:width .35s var(--aura-ease);
}
.aura-side .as-brand{
  display:flex;align-items:center;gap:.65rem;padding:.4rem .6rem 1.2rem;
  color:var(--aura-text);font-family:var(--aura-font-display);font-weight:700;font-size:1.1rem;
  letter-spacing:-.01em;text-decoration:none;
}
.aura-side .as-brand .brand-logo{
  width:36px;height:36px;border-radius:10px;
  background:#ffffff url('./ahr-logo.png') center/contain no-repeat;
  box-shadow:0 0 18px rgba(25,229,155,.35),0 4px 14px rgba(0,0,0,.4);
  border:1px solid rgba(25,229,155,.35);
  display:inline-block;flex:none;
}
.aura-side .as-nav{display:flex;flex-direction:column;gap:.18rem;overflow-y:auto;flex:1}
.aura-side .as-nav a{
  display:flex;align-items:center;gap:.85rem;
  padding:.7rem .8rem;border-radius:12px;
  font:500 .92rem/1 var(--aura-font-body);color:var(--aura-text-2);
  text-decoration:none;
  border:1px solid transparent;
  transition:all .25s var(--aura-ease);
}
.aura-side .as-nav .as-ico{
  width:28px;height:28px;display:grid;place-items:center;
  font-size:1rem;border-radius:8px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  color:var(--aura-text);flex:none;
}
.aura-side .as-nav a:hover{color:var(--aura-text);background:rgba(255,255,255,.04)}
.aura-side .as-nav a.is-active{
  color:var(--aura-text);
  background:var(--aura-primary-glow);
  border-color:var(--aura-border-strong);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}
.aura-side .as-nav a.is-active .as-ico{
  background:var(--aura-grad-primary);color:#141414;
  box-shadow:0 0 18px rgba(255,255,255,.45);
  border-color:transparent;
}
.aura-side .as-collapse{
  margin-top:.4rem;align-self:flex-end;
  width:30px;height:30px;border-radius:8px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  color:var(--aura-text-2);font-weight:600;cursor:pointer;
  transition:all .25s var(--aura-ease);
}
.aura-side .as-collapse:hover{color:var(--aura-primary);border-color:var(--aura-border-strong)}

/* Collapsed state */
body.aura-side-collapsed .aura-side{width:72px}
body.aura-side-collapsed .aura-side .as-brand-name,
body.aura-side-collapsed .aura-side .as-label{display:none}
body.aura-side-collapsed .aura-side .as-nav a{justify-content:center;padding:.7rem 0}
body.aura-side-collapsed .app{padding-left:72px !important}

/* Mobile bottom nav */
.aura-bottom{
  position:fixed;left:10px;right:10px;bottom:10px;z-index:55;
  display:none;align-items:stretch;justify-content:space-around;gap:4px;
  padding:.45rem .5rem;
  background:rgba(12,12,12,.85);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  box-shadow:0 12px 40px rgba(0,0,0,.55), 0 0 40px rgba(255,255,255,.06);
}
.aura-bottom a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:.55rem .2rem;border-radius:14px;text-decoration:none;
  color:var(--aura-text-2);font:600 .65rem/1 var(--aura-font-body);
  transition:all .25s var(--aura-ease);
  min-height:48px;
}
.aura-bottom a span{font-size:1.15rem;line-height:1}
.aura-bottom a b{font-weight:600;letter-spacing:.04em}
.aura-bottom a.is-active{
  color:#141414;
  background:var(--aura-grad-primary);
  box-shadow:0 6px 20px rgba(255,255,255,.35);
}
.aura-bottom a:not(.is-active):hover{color:var(--aura-text);background:rgba(255,255,255,.04)}

/* Responsive switching */
@media (min-width:1024px){
  /* Keep the original full-width desktop layout and top navigation. */
  .aura-side{display:none}
  .app{padding-left:0}
  .nav .nav-links{display:flex}
  .nav-inner .brand{opacity:1}
}
@media (max-width:639px){
  .aura-bottom{display:flex}
  body{padding-bottom:80px}
  /* Avoid AI fab + bottom nav overlap */
  .ai-fab{bottom:96px !important}
  .fab#topBtn{bottom:96px !important}
}

/* ============== AURA DS — Meal cards with food photos ============== */
.meal-card{
  position:relative;overflow:hidden;border-radius:var(--aura-r-lg);
  background:linear-gradient(180deg,rgba(20,20,20,.82),rgba(12,12,12,.92));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--aura-shadow-1);
  transition:transform .35s var(--aura-ease), border-color .35s var(--aura-ease), box-shadow .35s var(--aura-ease);
}
.meal-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.22);
  box-shadow:var(--aura-shadow-2);
}
.meal-photo{
  position:relative;height:200px;background-size:cover;background-position:center;
  background-color:#0d0d0d;
}
.meal-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 0%,transparent 45%,rgba(12,12,12,.55) 80%,rgba(12,12,12,.96) 100%);
  pointer-events:none;
}
.meal-photo-cal{
  position:absolute;top:.85rem;right:.85rem;z-index:2;
  font:600 .78rem/1 var(--aura-font-mono);letter-spacing:.04em;
  color:#141414;padding:.45rem .7rem;border-radius:99px;
  background:var(--aura-grad-primary);
  box-shadow:0 6px 22px rgba(255,255,255,.45);
}
.meal-card .meal-head{padding:1rem 1.1rem .25rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.meal-card .meal-title{font:600 .72rem/1 var(--aura-font-mono);letter-spacing:.22em;color:var(--aura-primary);text-transform:uppercase}
.meal-card .meal-cal{font:600 .82rem/1 var(--aura-font-mono);color:var(--aura-text-2);letter-spacing:.04em}
.meal-card .meal-name{
  padding:.25rem 1.1rem 0;
  font-family:var(--aura-font-display);font-weight:600;font-size:1.15rem;
  letter-spacing:-.01em;color:var(--aura-text);line-height:1.3;
}
.meal-card .meal-tags{padding:.6rem 1.1rem 0;display:flex;flex-wrap:wrap;gap:.35rem}
.meal-card .meal-tag{
  font:600 .65rem/1 var(--aura-font-mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--aura-text-2);padding:.35rem .55rem;border-radius:99px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
}
.meal-card .meal-macros{padding:.85rem 1.1rem 1.1rem;display:flex;flex-wrap:wrap;gap:.45rem .85rem;font-family:var(--aura-font-mono);font-size:.78rem;color:var(--aura-text-2)}
.meal-card .meal-macros .macro{display:inline-flex;align-items:center;gap:.35rem}
.meal-card .meal-macros .macro b{color:var(--aura-text);font-weight:600}
.meal-card .meal-macros .macro.p b{color:var(--aura-primary)}
.meal-card .meal-macros .macro.c b{color:var(--aura-secondary)}
.meal-card .meal-macros .macro.f b{color:var(--aura-warn)}
.meal-card .meal-alts-wrap{padding:.85rem 1.1rem 1.1rem;border-top:1px solid rgba(255,255,255,.05)}
.meal-card .meal-alts-title{font:600 .68rem/1 var(--aura-font-mono);letter-spacing:.18em;color:var(--aura-text-3);text-transform:uppercase;margin-bottom:.55rem}
.meal-card .meal-alts{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.3rem}
.meal-card .meal-alts li{display:flex;justify-content:space-between;gap:.5rem;font-size:.85rem;color:var(--aura-text-2)}
.meal-card .meal-alts .alt-p{font-family:var(--aura-font-mono);color:var(--aura-primary);font-size:.75rem}

.meal-card-mini .meal-photo{height:150px}

@media (max-width:560px){
  .meal-photo{height:170px}
  .meal-card .meal-name{font-size:1.05rem}
}

/* ============================================================
   PHASE 5 — AURA AI COACH CHAT REDESIGN
   Glass bubbles · Neon FAB · Refined chips · Animated typing
   ============================================================ */

/* --- FAB: neon green glow pulse --- */
.ai-fab{
  background: linear-gradient(135deg, var(--aura-primary, #f5f5f5), #ffffff) !important;
  color:#141414 !important;
  border:1px solid rgba(255,255,255,.55) !important;
  box-shadow:
    0 0 0 0 rgba(255,255,255,.55),
    0 14px 36px rgba(255,255,255,.35),
    0 4px 12px rgba(0,0,0,.4) !important;
  animation: auraFabPulse 2.6s ease-in-out infinite;
  transition: transform .25s ease, box-shadow .25s ease;
}
.ai-fab:hover{ transform: translateY(-3px) scale(1.06); }
@keyframes auraFabPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,255,255,.45),0 14px 36px rgba(255,255,255,.35),0 4px 12px rgba(0,0,0,.4); }
  50%{    box-shadow:0 0 0 14px rgba(255,255,255,0),0 14px 36px rgba(255,255,255,.45),0 4px 12px rgba(0,0,0,.4); }
}

/* --- Panel: glass with neon edge --- */
.ai-panel{
  background: linear-gradient(180deg, rgba(22,22,22,.92), rgba(13,13,13,.96)) !important;
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 60px rgba(255,255,255,.08);
  animation: auraPanelIn .35s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes auraPanelIn{
  from{ opacity:0; transform: translateY(14px) scale(.96); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

/* Panel header bar (uses first element) */
.ai-panel > *:first-child{
  background: linear-gradient(180deg, rgba(255,255,255,.08), transparent);
  border-bottom:1px solid rgba(255,255,255,.12);
}

/* --- Body / scroll --- */
#aiBody{
  padding: 1rem .9rem 1rem !important;
  gap:.55rem !important;
  scroll-behavior:smooth;
}
#aiBody::-webkit-scrollbar{ width:6px }
#aiBody::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.25); border-radius:99px }

/* --- Bubbles --- */
.ai-msg{
  font-size:.88rem;
  border-radius:16px !important;
  padding:.7rem .95rem !important;
  max-width:88% !important;
  animation: auraBubbleIn .28s cubic-bezier(.2,.9,.3,1.2);
  word-wrap:break-word;
}
@keyframes auraBubbleIn{
  from{ opacity:0; transform: translateY(6px) scale(.97); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}
.ai-msg.ai{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  border-bottom-left-radius:6px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.ai-msg.ai b{ color: var(--aura-primary, #f5f5f5); }
.ai-msg.user{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) !important;
  border:1px solid rgba(255,255,255,.14);
  border-bottom-right-radius:6px !important;
  color: #f6f6f6 !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
}

/* Inline code & lists inside bubbles */
.ai-msg code{
  background: rgba(255,255,255,.12) !important;
  color: var(--aura-primary, #f5f5f5) !important;
  border:1px solid rgba(255,255,255,.18);
  padding:.05rem .35rem; border-radius:6px;
  font-family: var(--aura-font-mono, ui-monospace, monospace);
  font-size:.82em;
}
.ai-msg .ai-list{ padding-left:1.1rem !important; margin:.25rem 0 .25rem !important; }
.ai-msg .ai-list li::marker{ color: var(--aura-primary, #f5f5f5); }

/* --- Typing indicator: bouncing neon dots --- */
.ai-msg.ai-typing{
  display:inline-flex !important; align-items:center; gap:6px;
  padding:.75rem 1rem !important; width:auto !important;
}
.ai-msg.ai-typing span{
  width:7px; height:7px; border-radius:50%;
  background: var(--aura-primary, #f5f5f5);
  box-shadow:0 0 8px rgba(255,255,255,.6);
  animation: auraTypingDot 1.1s ease-in-out infinite;
  display:inline-block;
}
.ai-msg.ai-typing span:nth-child(2){ animation-delay:.15s }
.ai-msg.ai-typing span:nth-child(3){ animation-delay:.3s }
@keyframes auraTypingDot{
  0%,80%,100%{ transform: translateY(0); opacity:.4 }
  40%{ transform: translateY(-5px); opacity:1 }
}

/* --- Quick prompt chips --- */
.ai-chips{
  display:flex; flex-wrap:wrap; gap:.4rem;
  margin-top:.4rem;
}
.ai-chip{
  background: rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.22);
  color: #f9f9f9;
  padding:.45rem .75rem;
  border-radius:99px;
  font-size:.78rem; font-weight:500;
  cursor:pointer;
  transition: all .22s cubic-bezier(.2,.9,.3,1.2);
  white-space:nowrap;
  backdrop-filter: blur(6px);
}
.ai-chip:hover{
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.45);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255,255,255,.18);
}
.ai-chip:active{ transform: translateY(0) scale(.97); }

/* --- Form / input row --- */
#aiForm{
  border-top:1px solid rgba(255,255,255,.12);
  background: linear-gradient(0deg, rgba(0,0,0,.35), transparent);
  padding:.6rem .65rem !important;
  gap:.5rem !important;
}
#aiInput{
  background: rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  color:#f6f6f6 !important;
  border-radius:12px !important;
  padding:.65rem .85rem !important;
  font-size:.9rem !important;
  transition: border-color .2s, box-shadow .2s;
}
#aiInput::placeholder{ color: rgba(255,255,255,.4) }
#aiInput:focus{
  outline:none !important;
  border-color: var(--aura-primary, #f5f5f5) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.18), 0 0 24px rgba(255,255,255,.15) !important;
}
#aiForm button[type="submit"]{
  background: linear-gradient(135deg, var(--aura-primary, #f5f5f5), #ffffff) !important;
  color:#141414 !important;
  border:none !important;
  border-radius:12px !important;
  padding:.65rem 1rem !important;
  font-weight:700 !important;
  cursor:pointer;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 4px 14px rgba(255,255,255,.3);
}
#aiForm button[type="submit"]:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(255,255,255,.45);
}

/* Mobile: full-width panel */
@media (max-width: 560px){
  .ai-panel{
    right:.6rem !important;
    left:.6rem !important;
    width:auto !important;
    bottom: 6rem !important;
    max-height: 72vh !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .ai-fab, .ai-panel, .ai-msg, .ai-msg.ai-typing span{ animation: none !important; }
}

/* ============================================================
   PHASE 6 — AURA DS · Animated Progress + Motivational Empty States
   ============================================================ */

/* --- Progress row: glass + glow --- */
.progress-row{
  position:relative;
  flex-wrap:wrap;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) !important;
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 30px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.04) inset;
  transition: border-color .3s, box-shadow .3s;
}
.progress-row.is-complete{
  border-color: rgba(255,255,255,.45);
  box-shadow: 0 12px 40px rgba(255,255,255,.18), 0 0 0 1px rgba(255,255,255,.12) inset;
}

.progress-label{
  font-family: var(--aura-font-display, inherit);
  font-weight:600;
  letter-spacing:.01em;
  color: #f6f6f6 !important;
}

/* --- Progress bar: shimmer + glow + gradient --- */
.progress-bar{
  position:relative;
  height:12px !important;
  background: rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.06);
  border-radius:99px !important;
  overflow:visible !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.3) inset;
}
#monthProgress{
  position:relative;
  height:100% !important;
  background: linear-gradient(90deg, #ffffff 0%, #f5f5f5 50%, #ededed 100%) !important;
  border-radius:99px !important;
  box-shadow: 0 0 18px rgba(255,255,255,.55), 0 0 0 1px rgba(255,255,255,.35) inset;
  transition: width 1.1s cubic-bezier(.2,.9,.3,1.2) !important;
  overflow:hidden;
}
#monthProgress::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(90deg, transparent 0, rgba(255,255,255,.35) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: auraBarShimmer 2.4s ease-in-out infinite;
}
@keyframes auraBarShimmer{
  0%{ transform: translateX(-100%); }
  60%,100%{ transform: translateX(220%); }
}

/* Milestone dots --- */
.progress-milestones{
  position:absolute; inset:0;
  pointer-events:none;
}
.progress-milestones i{
  position:absolute; top:50%;
  width:10px; height:10px; border-radius:50%;
  background: rgba(255,255,255,.12);
  border:2px solid rgba(255,255,255,.18);
  transform: translate(-50%,-50%);
  transition: all .4s cubic-bezier(.2,.9,.3,1.2);
}
.progress-milestones i[data-m="25"]{ left:25% }
.progress-milestones i[data-m="50"]{ left:50% }
.progress-milestones i[data-m="75"]{ left:75% }
.progress-milestones i[data-m="100"]{ left:calc(100% - 2px) }
.progress-milestones i.hit{
  background: var(--aura-primary, #f5f5f5);
  border-color: #ffffff;
  box-shadow: 0 0 12px rgba(255,255,255,.85), 0 0 0 3px rgba(255,255,255,.18);
  transform: translate(-50%,-50%) scale(1.15);
}

/* --- Animated % counter --- */
.progress-text{
  font-family: var(--aura-font-mono, ui-monospace, monospace) !important;
  font-weight:700;
  font-size:1.05rem !important;
  background: linear-gradient(135deg, #f5f5f5, #ededed);
  -webkit-background-clip: text; background-clip:text;
  -webkit-text-fill-color: transparent; color: transparent !important;
  text-shadow: 0 0 24px rgba(255,255,255,.3);
  min-width: 58px !important;
}
.progress-row.is-complete .progress-text{
  animation: auraPctPop .8s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes auraPctPop{
  0%{ transform: scale(1) }
  40%{ transform: scale(1.18) }
  100%{ transform: scale(1) }
}

/* --- Motivational caption --- */
.progress-caption{
  flex-basis:100%;
  margin-top:.65rem;
  padding-top:.65rem;
  border-top:1px dashed rgba(255,255,255,.14);
  font-size:.85rem;
  color: rgba(246,246,246,.78);
  font-weight:500;
  letter-spacing:.01em;
  animation: auraCapFade .5s ease both;
}
@keyframes auraCapFade{
  from{ opacity:0; transform: translateY(4px) }
  to{ opacity:1; transform: translateY(0) }
}

/* Empty state variant — glowing pulse on bar */
.progress-row.is-empty .progress-bar{
  background: rgba(255,255,255,.04) !important;
  animation: auraEmptyPulse 2.6s ease-in-out infinite;
}
@keyframes auraEmptyPulse{
  0%,100%{ box-shadow: 0 2px 8px rgba(0,0,0,.3) inset, 0 0 0 0 rgba(255,255,255,.25) }
  50%{    box-shadow: 0 2px 8px rgba(0,0,0,.3) inset, 0 0 0 6px rgba(255,255,255,0) }
}
.progress-row.is-empty .progress-text{
  background: linear-gradient(135deg, rgba(255,255,255,.5), rgba(255,255,255,.25));
  -webkit-background-clip: text; background-clip:text;
}

/* --- Generic motivational empty state (reusable) --- */
.aura-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding: 2.6rem 1.4rem;
  border-radius:20px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px dashed rgba(255,255,255,.22);
  gap:.8rem;
  position:relative; overflow:hidden;
}
.aura-empty::before{
  content:''; position:absolute; inset:-40%;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.12), transparent 60%);
  animation: auraEmptyGlow 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes auraEmptyGlow{
  0%,100%{ opacity:.6; transform: translateY(0) }
  50%{ opacity:1; transform: translateY(-8px) }
}
.aura-empty-icon{
  font-size:2.6rem; line-height:1;
  filter: drop-shadow(0 6px 18px rgba(255,255,255,.5));
  animation: auraEmptyFloat 3.4s ease-in-out infinite;
}
@keyframes auraEmptyFloat{
  0%,100%{ transform: translateY(0) rotate(-2deg) }
  50%{ transform: translateY(-6px) rotate(2deg) }
}
.aura-empty-title{
  font-family: var(--aura-font-display, inherit);
  font-weight:700;
  font-size:1.15rem;
  background: linear-gradient(135deg, #ffffff, #ededed);
  -webkit-background-clip: text; background-clip:text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.aura-empty-sub{
  color: rgba(246,246,246,.7);
  font-size:.92rem;
  max-width: 360px;
  line-height:1.5;
}
.aura-empty-cta{
  margin-top:.4rem;
  background: linear-gradient(135deg, var(--aura-primary, #f5f5f5), #ffffff);
  color:#141414; font-weight:700;
  padding:.65rem 1.2rem; border-radius:99px; border:none;
  cursor:pointer;
  box-shadow: 0 8px 22px rgba(255,255,255,.35);
  transition: transform .2s, box-shadow .2s;
}
.aura-empty-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(255,255,255,.5);
}

@media (max-width:560px){
  .progress-row{ padding:.9rem 1rem !important; }
  .progress-label{ min-width:0 !important; font-size:.8rem !important; }
}
@media (prefers-reduced-motion: reduce){
  #monthProgress::after, .progress-row.is-empty .progress-bar,
  .aura-empty::before, .aura-empty-icon{ animation: none !important; }
}

/* ============================================================
   PHASE 7 — AURA DS · Exercise Image Polish + Onboarding Tour
   ============================================================ */

/* --- Exercise card images: brighter + crisper --- */
.ex-card .ex-anim{
  position:relative;
  overflow:hidden;
  border-radius:14px;
  background: linear-gradient(135deg, #0d0d0d, #191919);
  isolation:isolate;
}
.ex-card .ex-anim::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.55));
  pointer-events:none;
  z-index:2;
}
.ex-img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  filter: brightness(1.08) contrast(1.08) saturate(1.12);
  transition: filter .35s ease, transform .5s cubic-bezier(.2,.9,.3,1.2);
  will-change: transform;
}
.ex-card:hover .ex-img{
  filter: brightness(1.18) contrast(1.12) saturate(1.2);
  transform: scale(1.06);
}
.ex-card{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ex-card:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.35) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.45), 0 0 22px rgba(255,255,255,.18);
}

/* ===== Onboarding Tour ===== */
.aura-tour{
  position:fixed; inset:0;
  z-index: 9999;
  pointer-events:none;
}
.aura-tour.hidden{ display:none; }
body.aura-tour-active{ overflow:hidden; }

.aura-tour-overlay{
  position:absolute; inset:0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.55), rgba(0,0,0,.82));
  backdrop-filter: blur(2px);
  pointer-events:auto;
  animation: auraTourFade .35s ease both;
}
@keyframes auraTourFade{ from{opacity:0} to{opacity:1} }

.aura-tour-spot{
  position:absolute;
  display:none;
  border-radius:18px;
  box-shadow:
    0 0 0 4px rgba(255,255,255,.85),
    0 0 0 9999px rgba(0,0,0,.72),
    0 0 50px rgba(255,255,255,.5);
  transition: top .45s cubic-bezier(.2,.9,.3,1.2), left .45s cubic-bezier(.2,.9,.3,1.2),
              width .45s cubic-bezier(.2,.9,.3,1.2), height .45s cubic-bezier(.2,.9,.3,1.2);
  pointer-events:none;
  animation: auraSpotPulse 2.2s ease-in-out infinite;
}
@keyframes auraSpotPulse{
  0%,100%{ box-shadow:0 0 0 4px rgba(255,255,255,.85),0 0 0 9999px rgba(0,0,0,.72),0 0 50px rgba(255,255,255,.5); }
  50%{    box-shadow:0 0 0 6px rgba(255,255,255,1),  0 0 0 9999px rgba(0,0,0,.72),0 0 80px rgba(255,255,255,.7); }
}

.aura-tour-card{
  position:absolute;
  width: min(380px, calc(100vw - 32px));
  padding: 1.4rem 1.4rem 1.1rem;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(25,25,25,.96), rgba(13,13,13,.98));
  backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow:
    0 40px 100px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 80px rgba(255,255,255,.12);
  color: #f6f6f6;
  pointer-events:auto;
  animation: auraTourCardIn .4s cubic-bezier(.2,.9,.3,1.2) both;
  transition: top .45s cubic-bezier(.2,.9,.3,1.2), left .45s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes auraTourCardIn{
  from{ opacity:0; transform: translateY(10px) scale(.96); }
  to{   opacity:1; transform: translateY(0) scale(1); }
}
.aura-tour-progress{
  position:absolute; top:0; left:0; right:0; height:3px;
  background: rgba(255,255,255,.08); border-radius: 20px 20px 0 0; overflow:hidden;
}
.aura-tour-progress i{
  display:block; height:100%; width:0;
  background: linear-gradient(90deg, #ffffff, #f5f5f5, #ededed);
  box-shadow: 0 0 12px rgba(255,255,255,.6);
  transition: width .45s cubic-bezier(.2,.9,.3,1.2);
}
.aura-tour-step{
  font-family: var(--aura-font-mono, ui-monospace, monospace);
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--aura-primary, #f5f5f5);
  margin-bottom:.5rem;
}
.aura-tour-card h3{
  margin:0 0 .55rem;
  font-family: var(--aura-font-display, inherit);
  font-size: 1.35rem; font-weight:700; line-height:1.2;
  background: linear-gradient(135deg, #ffffff 30%, #ededed);
  -webkit-background-clip: text; background-clip:text;
  -webkit-text-fill-color: transparent; color:transparent;
}
.aura-tour-card p{
  margin:0 0 1.1rem;
  font-size:.92rem; line-height:1.55;
  color: rgba(246,246,246,.82);
}
.aura-tour-actions{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
}
.aura-tour-right{ display:flex; gap:.5rem; }
.aura-tour-skip{
  background:transparent; border:none; color: rgba(246,246,246,.55);
  font-size:.82rem; cursor:pointer; padding:.4rem .2rem;
  transition: color .2s;
}
.aura-tour-skip:hover{ color: rgba(246,246,246,.9); }
.aura-tour-btn{
  background: linear-gradient(135deg, var(--aura-primary, #f5f5f5), #ffffff);
  color:#141414; font-weight:700; font-size:.85rem;
  border:none; border-radius:99px;
  padding:.55rem 1rem; cursor:pointer;
  box-shadow: 0 6px 18px rgba(255,255,255,.3);
  transition: transform .2s, box-shadow .2s, opacity .2s;
}
.aura-tour-btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 26px rgba(255,255,255,.45); }
.aura-tour-btn.ghost{
  background: transparent;
  color: rgba(246,246,246,.85);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:none;
}
.aura-tour-btn.ghost:hover{ background: rgba(255,255,255,.06); }
.aura-tour-btn:disabled{ opacity:.35; cursor:not-allowed; transform:none; }

/* Footer replay button */
.aura-tour-replay{
  display:inline-flex; align-items:center; gap:.4rem;
  margin: 1rem auto 0;
  background: rgba(255,255,255,.08);
  color: var(--aura-primary, #f5f5f5);
  border:1px solid rgba(255,255,255,.25);
  border-radius: 99px;
  padding:.5rem 1rem;
  font-size:.82rem; font-weight:600;
  cursor:pointer;
  transition: all .22s;
}
.aura-tour-replay:hover{
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.5);
  transform: translateY(-1px);
}

@media (max-width:640px){
  .aura-tour-card{
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px);
    padding: 1rem 1rem .9rem;
    border-radius: 16px;
  }
  .aura-tour-card h3{ font-size:1.05rem; line-height:1.25; }
  .aura-tour-card p{ font-size:.86rem; line-height:1.5; margin-bottom:.85rem; }
  .aura-tour-step{ font-size:.65rem; margin-bottom:.35rem; }
  .aura-tour-actions{
    flex-wrap: wrap;
    gap:.5rem;
  }
  .aura-tour-right{
    flex: 1 1 100%;
    justify-content: flex-end;
    order: 2;
  }
  .aura-tour-skip{
    order: 1;
    font-size:.78rem;
    padding:.5rem .3rem;
  }
  .aura-tour-btn{
    padding:.6rem 1rem;
    font-size:.85rem;
    min-height: 40px;
    min-width: 72px;
  }
}

@media (prefers-reduced-motion: reduce){
  .aura-tour-spot, .aura-tour-overlay, .aura-tour-card, .ex-img{ animation: none !important; transition: none !important; }
}

/* ============================================================
   PHASE 8 — AURA DS · Tools / Reviews / FAQ Premium Polish
   ============================================================ */

/* ---------- Section heads (universal upgrade) ---------- */
#tools .section-head, #exercises .section-head,
#testimonials .section-head, #faq .section-head{
  text-align:center; margin-bottom:1.8rem;
}
#tools .section-title, #exercises .section-title,
#testimonials .section-title, #faq .section-title{
  font-family: var(--aura-font-display, inherit);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing:-.02em; font-weight:700;
  background: linear-gradient(135deg, #ffffff 30%, #ededed);
  -webkit-background-clip: text; background-clip:text;
  -webkit-text-fill-color: transparent;
}

/* ---------- TOOLS / CALCULATORS ---------- */
.tools-section .tools-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
}
.tool{
  position:relative;
  padding: 1.6rem 1.4rem !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(25,25,25,.7), rgba(13,13,13,.85)) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  backdrop-filter: blur(24px) saturate(160%);
  box-shadow: 0 14px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.04) inset;
  overflow:hidden;
  transition: transform .3s cubic-bezier(.2,.9,.3,1.2), border-color .3s, box-shadow .3s;
}
.tool::before{
  content:'';
  position:absolute; inset:-1px;
  border-radius: inherit;
  padding:1px;
  background: linear-gradient(135deg, rgba(255,255,255,.35), transparent 40%, rgba(255,255,255,.18));
  -webkit-mask: linear-gradient(#000000 0 0) content-box, linear-gradient(#000000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:0; transition: opacity .3s;
  pointer-events:none;
}
.tool::after{
  content:''; position:absolute;
  top:-60%; right:-30%; width:280px; height:280px;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 65%);
  pointer-events:none; opacity:.55; transition: opacity .3s;
}
.tool:hover{
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.4) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 30px rgba(255,255,255,.18);
}
.tool:hover::before{ opacity:1 }
.tool:hover::after{ opacity:.85 }

.tool h3{
  position:relative;
  font-family: var(--aura-font-display, inherit);
  font-size: 1.15rem; font-weight:700;
  margin: 0 0 1rem;
  display:flex; align-items:center; gap:.55rem;
  color:#f6f6f6;
}
.tool h3::before{
  content:'';
  width:34px; height:34px; border-radius:10px;
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.3);
  box-shadow: 0 0 18px rgba(255,255,255,.2);
  display:grid; place-items:center;
  font-size:1.1rem;
}
#tools .tool:nth-child(1) h3::before{ content:'⚖️' }
#tools .tool:nth-child(2) h3::before{ content:'🔥' }
#tools .tool:nth-child(3) h3::before{ content:'💧' }

.tool-row{ display:grid; gap:.55rem; margin-bottom:.85rem; position:relative; grid-auto-columns: minmax(0,1fr); }
.tool-row > *{ min-width:0; }
.tool-row.tri{ grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); }
.tool input, .tool select{ min-width:0 !important; width:100% !important; box-sizing:border-box; }
.tool input{
  background: rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  color:#f6f6f6 !important;
  border-radius: 12px !important;
  padding: .7rem .85rem !important;
  font-size:.92rem !important;
  font-family: var(--aura-font-mono, ui-monospace, monospace);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.tool input::placeholder{ color: rgba(255,255,255,.38); font-family: inherit; }
.tool input:focus{
  outline:none !important;
  background: rgba(255,255,255,.06) !important;
  border-color: var(--aura-primary, #f5f5f5) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.16) !important;
}
.tool .btn{
  width:100%;
  background: linear-gradient(135deg, var(--aura-primary, #f5f5f5), #ffffff) !important;
  color:#141414 !important;
  border:none !important;
  border-radius: 12px !important;
  padding:.75rem 1rem !important;
  font-weight:700 !important;
  font-size:.9rem;
  cursor:pointer;
  box-shadow: 0 6px 18px rgba(255,255,255,.28);
  transition: transform .2s, box-shadow .2s;
}
.tool .btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 26px rgba(255,255,255,.42); }
.tool-out{
  margin-top: 1rem;
  padding: .85rem 1rem;
  background: rgba(255,255,255,.06);
  border:1px dashed rgba(255,255,255,.22);
  border-radius: 12px;
  font-family: var(--aura-font-mono, ui-monospace, monospace);
  font-size: .95rem;
  color: #ededed;
  min-height: 1.5rem;
  word-break: break-word;
  animation: auraToolOut .4s ease;
}
@keyframes auraToolOut{ from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:translateY(0)} }
.tool-tip{
  font-size:.95rem; line-height:1.55;
  color: rgba(246,246,246,.85);
  background: rgba(255,255,255,.05);
  padding:1rem; border-radius:12px;
  border-left:3px solid var(--aura-primary, #f5f5f5);
  margin-bottom:1rem;
}

/* ---------- TESTIMONIALS / REVIEWS ---------- */
.testimonials-section{ padding:3rem 1.5rem 4rem !important; }
.testimonials{
  scroll-snap-type: x mandatory;
  padding: 1rem .25rem 1.5rem !important;
  mask-image: linear-gradient(90deg, transparent 0, #000000 3%, #000000 97%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000000 3%, #000000 97%, transparent 100%);
}
.testimonials::-webkit-scrollbar{ height:5px }
.testimonials::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.3); border-radius:99px }
.testimonial, .testi, .review-card{
  flex: 0 0 320px;
  scroll-snap-align: start;
  position:relative;
  padding: 1.6rem 1.4rem 1.2rem !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, rgba(25,25,25,.75), rgba(13,13,13,.9)) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  backdrop-filter: blur(20px);
  box-shadow: 0 14px 36px rgba(0,0,0,.4);
  transition: transform .3s cubic-bezier(.2,.9,.3,1.2), border-color .3s, box-shadow .3s;
}
.testimonial::before, .testi::before, .review-card::before{
  content:'"';
  position:absolute; top:.2rem; right:1rem;
  font-family: Georgia, serif;
  font-size: 5rem; line-height:1;
  color: rgba(255,255,255,.18);
  pointer-events:none;
}
.testimonial:hover, .testi:hover, .review-card:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.35) !important;
  box-shadow: 0 22px 50px rgba(0,0,0,.55), 0 0 24px rgba(255,255,255,.14);
}
.testimonial p, .testi p, .review-card p{
  font-size: .95rem; line-height:1.6;
  color: rgba(246,246,246,.92);
  margin: 0 0 1rem;
  position:relative;
}
.testimonial .stars, .testi .stars, .review-card .stars,
.testimonial .rating, .testi .rating{
  color: #cccccc;
  font-size: .9rem;
  letter-spacing:.08em;
  margin-bottom:.4rem;
  filter: drop-shadow(0 0 6px rgba(204,204,204,.35));
}
.testimonial b, .testi b, .review-card b,
.testimonial .name, .testi .name, .review-card .name{
  display:block;
  font-family: var(--aura-font-display, inherit);
  font-weight:700; color:#ffffff;
  font-size:.92rem;
}
.testimonial small, .testi small, .review-card small,
.testimonial .role, .testi .role, .review-card .role{
  color: rgba(246,246,246,.55);
  font-size:.78rem;
  letter-spacing:.04em;
}

/* ---------- FAQ ---------- */
.faq-section{ padding:3rem 1.5rem 5rem !important; }
.faq-list{ gap: .65rem !important; }
.faq{
  background: linear-gradient(180deg, rgba(25,25,25,.6), rgba(13,13,13,.75)) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 16px !important;
  padding: 0 !important;
  overflow:hidden;
  transition: border-color .3s, box-shadow .3s, transform .2s;
}
.faq:hover{
  border-color: rgba(255,255,255,.32) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.3), 0 0 18px rgba(255,255,255,.1);
}
.faq.open{
  border-color: rgba(255,255,255,.45) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(13,13,13,.85)) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.4), 0 0 26px rgba(255,255,255,.18);
}
.faq-q{
  padding: 1.1rem 1.3rem !important;
  cursor: pointer;
  font-family: var(--aura-font-display, inherit);
  font-weight:600 !important;
  font-size: .98rem;
  color: #f6f6f6 !important;
  gap:1rem;
  transition: color .2s;
}
.faq.open .faq-q{ color: var(--aura-primary, #f5f5f5) !important; }
.faq-icon{
  width:30px !important; height:30px !important;
  flex:0 0 30px;
  background: rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.28) !important;
  color: var(--aura-primary, #f5f5f5) !important;
  border-radius:50% !important;
  display:grid; place-items:center;
  font-size:1rem; font-weight:700;
  transition: transform .35s cubic-bezier(.2,.9,.3,1.2), background .25s, box-shadow .25s !important;
}
.faq.open .faq-icon{
  transform: rotate(45deg) !important;
  background: var(--aura-primary, #f5f5f5) !important;
  color: #141414 !important;
  box-shadow: 0 0 14px rgba(255,255,255,.6);
}
.faq-a{
  padding: 0 1.3rem !important;
  color: rgba(246,246,246,.78) !important;
  font-size: .92rem !important;
  line-height: 1.6;
  transition: max-height .45s cubic-bezier(.2,.9,.3,1.2), padding .35s !important;
}
.faq.open .faq-a{
  padding: 0 1.3rem 1.2rem !important;
  max-height: 600px !important;
}
.faq-a p{ margin:0 !important; color: inherit !important; font-size: inherit !important; }

@media (max-width:560px){
  .tool{ padding: 1.3rem 1.1rem !important; }
  .testimonial, .testi, .review-card{ flex-basis: 280px; }
  .faq-q{ font-size:.92rem !important; padding:.95rem 1.1rem !important; }
}
@media (prefers-reduced-motion: reduce){
  .tool, .testimonial, .testi, .review-card, .faq, .faq-icon, .tool-out{
    transition: none !important; animation: none !important;
  }
}

/* ============================================================
   PHASE 9 — AURA DS · Hero / Contact / Footer Premium Polish
   ============================================================ */

/* ---------- Exercise card images: AI art adjust (darker base, soft glow) ---------- */
.ex-img{
  filter: brightness(1.0) contrast(1.05) saturate(1.05) !important;
}
.ex-card:hover .ex-img{
  filter: brightness(1.1) contrast(1.1) saturate(1.15) !important;
}
.ex-card .ex-anim{
  background: radial-gradient(circle at 50% 100%, rgba(255,255,255,.08), #0d0d0d 70%) !important;
}

/* ---------- HERO POLISH ---------- */
.hero{
  position:relative;
  overflow:hidden;
}
.hero-orb{
  filter: blur(80px);
  opacity: .55 !important;
  animation: auraOrbDrift 14s ease-in-out infinite;
}
.hero-orb.orb-1{ background: radial-gradient(circle, #f5f5f5, transparent 70%); animation-delay: 0s; }
.hero-orb.orb-2{ background: radial-gradient(circle, #ffffff, transparent 70%); animation-delay: -4s; }
.hero-orb.orb-3{ background: radial-gradient(circle, #ededed, transparent 70%); animation-delay: -8s; }
@keyframes auraOrbDrift{
  0%,100%{ transform: translate(0,0) scale(1); opacity:.5 }
  33%{    transform: translate(40px,-30px) scale(1.15); opacity:.7 }
  66%{    transform: translate(-30px,30px) scale(.95); opacity:.6 }
}

.hero-title{
  position:relative;
  letter-spacing:-.025em !important;
}
.hero-title .grad-text{
  background: linear-gradient(135deg, #f5f5f5 0%, #ededed 40%, #ffffff 100%);
  -webkit-background-clip: text; background-clip:text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 60px rgba(255,255,255,.35);
  animation: auraGradShift 6s ease-in-out infinite;
  background-size: 200% 200%;
}
@keyframes auraGradShift{
  0%,100%{ background-position: 0% 50% }
  50%{    background-position: 100% 50% }
}

.hero-cta .btn{
  position:relative;
  padding: .95rem 1.8rem !important;
  border-radius: 99px !important;
  font-weight:700 !important;
  letter-spacing:.02em;
  transition: transform .25s cubic-bezier(.2,.9,.3,1.2), box-shadow .25s, background .25s !important;
}
.hero-cta .btn-primary{
  background: linear-gradient(135deg, var(--aura-primary, #f5f5f5), #ffffff) !important;
  color:#141414 !important;
  border:none !important;
  box-shadow: 0 12px 30px rgba(255,255,255,.4), 0 0 0 1px rgba(255,255,255,.25) inset;
}
.hero-cta .btn-primary:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 50px rgba(255,255,255,.55), 0 0 0 1px rgba(255,255,255,.4) inset;
}
.hero-cta .btn-ghost{
  background: rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.28) !important;
  color: #f6f6f6 !important;
  backdrop-filter: blur(10px);
}
.hero-cta .btn-ghost:hover{
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.5) !important;
  transform: translateY(-3px);
}

/* Hero stats — glass chip row */
.hero-stats{
  display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
  margin-top: 2.4rem;
}
.hero-stats .stat{
  padding: 1.1rem 1.4rem !important;
  min-width: 150px;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(25,25,25,.7), rgba(13,13,13,.85)) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  backdrop-filter: blur(20px);
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.hero-stats .stat:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.4) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.4), 0 0 24px rgba(255,255,255,.18);
}
.hero-stats .stat-num{
  font-family: var(--aura-font-mono, ui-monospace, monospace) !important;
  font-weight: 700;
  font-size: 1.85rem !important;
  background: linear-gradient(135deg, #ffffff, #ededed);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color: transparent;
}
.hero-stats .stat-label{
  color: rgba(246,246,246,.65);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: .35rem;
}

/* ---------- CONTACT / NEWSLETTER ---------- */
.contact-section{
  padding: 3rem 1.5rem 4rem;
  max-width: 900px;
  margin: 0 auto;
}
.contact-card{
  position:relative;
  padding: 2.6rem 2rem !important;
  border-radius: 26px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(13,13,13,.85)) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  backdrop-filter: blur(28px) saturate(160%);
  box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06) inset;
  overflow:hidden;
}
.contact-card::before{
  content:''; position:absolute;
  top:-50%; left:50%; width:120%; height:160%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at top, rgba(255,255,255,.18), transparent 60%);
  pointer-events:none;
  animation: auraOrbDrift 12s ease-in-out infinite;
}
.contact-card .section-title{
  position:relative;
  font-family: var(--aura-font-display, inherit);
  font-size: clamp(1.7rem, 4vw, 2.4rem) !important;
  font-weight: 700;
  letter-spacing:-.02em;
}
.contact-card .section-sub{
  position:relative;
  color: rgba(246,246,246,.7);
  max-width: 480px;
  margin: .6rem auto 1.8rem;
  font-size: .98rem;
  line-height: 1.55;
}
.sub-form{
  position:relative;
  display:flex; gap:.6rem;
  max-width: 480px; margin: 0 auto;
  flex-wrap:wrap;
}
.sub-form input{
  flex:1; min-width: 200px;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  color: #f6f6f6 !important;
  border-radius: 99px !important;
  padding: .9rem 1.3rem !important;
  font-size: .95rem !important;
  font-family: var(--aura-font-mono, ui-monospace, monospace);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.sub-form input::placeholder{ color: rgba(255,255,255,.4); }
.sub-form input:focus{
  outline:none !important;
  background: rgba(255,255,255,.06) !important;
  border-color: var(--aura-primary, #f5f5f5) !important;
  box-shadow: 0 0 0 4px rgba(255,255,255,.16), 0 0 30px rgba(255,255,255,.18) !important;
}
.sub-form button{
  background: linear-gradient(135deg, var(--aura-primary, #f5f5f5), #ffffff) !important;
  color: #141414 !important;
  border: none !important;
  border-radius: 99px !important;
  padding: .9rem 1.6rem !important;
  font-weight: 700 !important;
  font-size: .9rem;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(255,255,255,.35);
  transition: transform .2s, box-shadow .2s;
}
.sub-form button:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(255,255,255,.5);
}
.sub-msg{
  position:relative;
  margin-top: 1rem;
  color: var(--aura-primary, #f5f5f5);
  font-size: .88rem;
  min-height: 1.2rem;
  font-family: var(--aura-font-mono, ui-monospace, monospace);
}

/* ---------- FOOTER ---------- */
.footer{
  position:relative;
  border-top: 1px solid rgba(255,255,255,.12) !important;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.55)) !important;
  padding: 3rem 1.5rem 2.4rem !important;
  margin-top: 4rem;
  overflow:hidden;
}
.footer::before{
  content:''; position:absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 60%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
}
.footer::after{
  content:''; position:absolute;
  bottom: -100px; left: 50%; transform: translateX(-50%);
  width: 600px; height: 200px;
  background: radial-gradient(ellipse, rgba(255,255,255,.12), transparent 70%);
  pointer-events:none;
}
.footer .brand{
  display:flex; align-items:center; gap:.6rem;
}
.footer .brand-name{
  font-family: var(--aura-font-display, inherit);
  font-weight: 700;
  font-size: 1.1rem;
  background: linear-gradient(135deg, #ffffff, #ededed);
  -webkit-background-clip: text; background-clip:text;
  -webkit-text-fill-color: transparent;
}
.footer-text{
  color: rgba(246,246,246,.55) !important;
  font-size: .85rem !important;
  line-height: 1.5;
  margin-top: .5rem !important;
  max-width: 280px;
}
.socials{
  display:flex; justify-content:center; gap:.7rem;
}
.socials a{
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(246,246,246,.75);
  transition: all .25s cubic-bezier(.2,.9,.3,1.2);
}
.socials a svg{ width:18px; height:18px; }
.socials a:hover{
  background: var(--aura-primary, #f5f5f5);
  color: #141414;
  border-color: var(--aura-primary, #f5f5f5);
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 8px 18px rgba(255,255,255,.45);
}
.footer-meta{
  color: rgba(246,246,246,.55) !important;
  font-size: .78rem !important;
  letter-spacing: .03em;
}
.footer-meta span:first-child{
  font-family: var(--aura-font-mono, ui-monospace, monospace);
  color: rgba(255,255,255,.7) !important;
}

/* ---------- FAB Back-to-top ---------- */
#topBtn{
  background: linear-gradient(135deg, var(--aura-primary, #f5f5f5), #ffffff) !important;
  color: #141414 !important;
  border: 1px solid rgba(255,255,255,.45) !important;
  box-shadow: 0 12px 28px rgba(255,255,255,.35) !important;
  transition: transform .25s, box-shadow .25s;
}
#topBtn:hover{
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 18px 36px rgba(255,255,255,.55) !important;
}

@media (max-width:560px){
  .contact-card{ padding: 2rem 1.3rem !important; }
  .hero-stats .stat{ min-width: 130px; padding: .9rem 1.1rem !important; }
  .hero-stats .stat-num{ font-size: 1.55rem !important; }
}
@media (prefers-reduced-motion: reduce){
  .hero-orb, .hero-title .grad-text, .contact-card::before{ animation: none !important; }
}

/* ============ PHASE 10 — Diet Plan Photos + Personalized BMI Marker ============ */

/* Real exercise photos — square frame, full image visible */
.ex-viz{
  aspect-ratio: 1 / 1;
  height: auto !important;
  width: 100%;
  max-width: 320px;
  margin: .4rem auto;
}
.ex-viz-sm{
  aspect-ratio: 1 / 1;
  height: auto !important;
  width: 90px;
}
.ex-viz .ex-photo,
.ex-viz-sm .ex-photo{
  width:100%;
  height:100%;
  object-fit: contain;
  background: #121212;
  border-radius:14px;
  display:block;
  filter:brightness(1.06) contrast(1.06) saturate(1.1);
  transition: transform .5s ease, filter .3s ease;
}
body.light .ex-viz .ex-photo,
body.light .ex-viz-sm .ex-photo{ background:#f4f4f4; }
.ex-viz .ex-photo{ animation: exPhotoIn .55s ease both; }
.ex-viz:hover .ex-photo{ transform: scale(1.03); filter:brightness(1.12) contrast(1.1) saturate(1.18); }
.ex-viz-sm .ex-photo{ border-radius:10px; }
@keyframes exPhotoIn{
  from{ opacity:0; transform: scale(1.04); }
  to  { opacity:1; transform: scale(1); }
}
.ex-viz:has(.ex-photo)::before,
.ex-viz:has(.ex-photo)::after{ display:none; }

/* ===== Personalized BMI gauge ===== */
.bmi-gauge{ padding-top: 28px; }
.bmi-track{ height: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.08); }
.bmi-marker{
  width: 14px; height: 22px;
  top: 22px;
  background: linear-gradient(180deg,#ffffff,#f7f7f7);
  border-radius: 6px;
  border: 2px solid #121212;
  box-shadow: 0 0 0 2px rgba(255,255,255,.65), 0 0 18px rgba(255,255,255,.7);
  transform: translateX(-50%);
  margin-left: 0;
}
/* "You" pill that sits above the marker */
.bmi-youtag{
  position:absolute;
  top: -2px;
  transform: translateX(-50%);
  background: linear-gradient(135deg,#f5f5f5,#ffffff);
  color:#141414;
  font-weight:800;
  font-size: 10px;
  letter-spacing:.4px;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(255,255,255,.45);
  transition: left .5s cubic-bezier(.4,0,.2,1);
  opacity: 0;
  pointer-events: none;
}
.bmi-youtag::after{
  content:"";
  position:absolute; left:50%; bottom:-5px;
  transform: translateX(-50%) rotate(45deg);
  width: 8px; height: 8px;
  background: #ffffff;
}
.bmi-youtag.visible{ opacity:1; }
.bmi-youtag .num{ opacity:.85; margin-left:4px; font-weight:600; }

/* Ideal BMI tick (BMI 22 → ~28% of 15–40 scale) */
.bmi-ideal{
  position:absolute;
  top: 18px;
  width: 2px; height: 18px;
  background: rgba(255,255,255,.55);
  transform: translateX(-50%);
  border-radius:2px;
}
.bmi-ideal::after{
  content:"Ideal";
  position:absolute;
  top: 20px; left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  letter-spacing: .5px;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
}

/* Health advice strip under the gauge */
.bmi-advice{
  margin-top: 28px;
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  font-size: 12px; line-height:1.45;
  color: var(--text, #e6e6e6);
}
.bmi-advice .dot{
  width:10px; height:10px; border-radius:50%;
  flex-shrink:0;
  box-shadow: 0 0 10px currentColor;
}
.bmi-advice b{ color:#ffffff; }

/* Macro bars — add a "target" tick line so user sees recommended balance */
.mbar{ position:relative; }
.mbar .target-tick{
  position:absolute; top:-3px; bottom:-3px;
  width: 2px;
  background: rgba(255,255,255,.55);
  border-radius:2px;
  box-shadow: 0 0 6px rgba(255,255,255,.4);
}

/* ============== PHASE 12 · Recipe Accordion + Shopping List ============== */
.recipe-acc{
  margin-top:12px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  overflow:hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.recipe-acc[open]{
  border-color: rgba(25,229,155,.35);
  box-shadow: 0 8px 28px -12px rgba(25,229,155,.35);
}
.recipe-acc > summary{
  list-style:none;
  cursor:pointer;
  padding:11px 14px;
  font-size:.82rem;
  font-weight:600;
  color:#e6e6e6;
  display:flex; align-items:center; gap:8px;
  user-select:none;
}
.recipe-acc > summary::-webkit-details-marker{display:none}
.recipe-acc > summary::after{
  content:'▾'; margin-left:auto; opacity:.55; transition:transform .25s ease;
}
.recipe-acc[open] > summary::after{ transform:rotate(180deg); opacity:.9; }
.recipe-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:8px;
  background: linear-gradient(135deg, #898989, #686868);
  color:#ffffff; font-size:.75rem;
}
.recipe-body{
  display:grid; grid-template-columns: 1fr 1fr;
  gap:14px; padding:12px 14px 14px;
  border-top:1px solid rgba(255,255,255,.06);
  background: rgba(12,12,12,.35);
}
.recipe-col h5{
  margin:0 0 6px;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#19e59b;
  opacity:.85;
}
.recipe-ing, .recipe-steps{
  margin:0; padding-left:18px;
  font-size:.78rem; line-height:1.5;
  color:#ededed;
}
.recipe-ing li{ margin-bottom:3px; }
.recipe-steps li{ margin-bottom:5px; }
@media (max-width:560px){
  .recipe-body{ grid-template-columns: 1fr; }
}

/* Shopping list */
.shopping-wrap{
  margin:18px 0 22px;
  padding:18px 18px 14px;
  border-radius:18px;
  background: linear-gradient(160deg, rgba(25,229,155,.08), rgba(114,114,114,.06));
  border:1px solid rgba(25,229,155,.18);
}
.shopping-head h3{
  margin:0 0 4px;
  font-size:1.05rem;
  background: linear-gradient(90deg,#19e59b,#727272);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.shopping-head p{
  margin:0 0 12px; font-size:.82rem; opacity:.75;
}
.shopping-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
}
.shopping-week{
  background: rgba(12,12,12,.45);
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  padding:0;
  overflow:hidden;
}
.shopping-week > summary{
  list-style:none; cursor:pointer; user-select:none;
  padding:10px 12px;
  display:flex; align-items:center; justify-content:space-between;
  font-size:.85rem;
  color:#f0f0f0;
  background: linear-gradient(90deg, rgba(25,229,155,.1), transparent);
}
.shopping-week > summary::-webkit-details-marker{display:none}
.shopping-week > summary span{ font-size:.72rem; opacity:.6; }
.shopping-list{
  list-style:none; margin:0; padding:8px 12px 12px;
  max-height:240px; overflow-y:auto;
}
.shopping-list li{
  display:flex; justify-content:space-between; align-items:center;
  padding:5px 0;
  font-size:.78rem;
  border-bottom: 1px dashed rgba(255,255,255,.05);
}
.shopping-list li:last-child{ border-bottom:none; }
.sl-name{ color:#e6e6e6; text-transform:capitalize; }
.sl-count{ color:#19e59b; font-weight:600; font-size:.72rem; }
.sl-more{ opacity:.55; font-style:italic; justify-content:center !important; }
.sl-copy{
  margin: 0 12px 12px;
  font-size:.72rem !important;
  padding:6px 12px !important;
}

/* ============== PHASE 13 · Meal-prep timing + batch guide ============== */
.recipe-meta{
  display:flex; flex-wrap:wrap; gap:6px;
  padding: 0 14px 10px;
  background: rgba(12,12,12,.35);
  border-top: 1px solid rgba(255,255,255,.05);
}
.rec-badge{
  display:inline-flex; align-items:center; gap:4px;
  font-size:.68rem; font-weight:600;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color:#e6e6e6;
  letter-spacing:.02em;
}
.rec-prep  { background: linear-gradient(135deg, rgba(25,229,155,.18), rgba(25,229,155,.06)); border-color: rgba(25,229,155,.3); color:#e9e9e9; }
.rec-cook  { background: linear-gradient(135deg, rgba(137,137,137,.2),  rgba(104,104,104,.08));   border-color: rgba(137,137,137,.32); color:#d9d9d9; }
.rec-total { background: linear-gradient(135deg, rgba(114,114,114,.2),  rgba(114,114,114,.08));  border-color: rgba(114,114,114,.32); color:#dcdcdc; }
.rec-batch { background: linear-gradient(135deg, rgba(155,155,155,.22),  rgba(155,155,155,.08));   border-color: rgba(155,155,155,.32); color:#f0f0f0; }

/* Sunday Prep guide inside each shopping week */
.prep-guide{
  margin: 4px 12px 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(155,155,155,.12), rgba(25,229,155,.06));
  border: 1px solid rgba(155,155,155,.22);
}
.prep-guide-head{
  display:flex; align-items:center; gap:8px;
  font-size:.82rem; color:#f3f3f3;
}
.prep-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:8px;
  background: linear-gradient(135deg,#9b9b9b,#19e59b);
  font-size:.78rem;
}
.prep-time{
  margin-left:auto;
  font-size:.7rem; font-weight:600;
  color:#19e59b; opacity:.9;
}
.prep-list{
  list-style:none; margin:8px 0 6px; padding:0;
}
.prep-list li{
  display:flex; justify-content:space-between; align-items:center;
  padding:4px 0;
  font-size:.76rem;
  border-bottom: 1px dashed rgba(255,255,255,.06);
}
.prep-list li:last-child{ border-bottom:none; }
.prep-dish{ color:#e6e6e6; text-transform:capitalize; }
.prep-meta{ color:#f0f0f0; font-weight:600; font-size:.7rem; }
.prep-note{
  margin:6px 0 0; font-size:.68rem;
  opacity:.65; font-style:italic;
}

/* Phase 15 — Macro-matched swaps */
.meal-swap-wrap{
  margin-top:14px;
  padding:12px 14px;
  background:linear-gradient(135deg, rgba(111,111,111,0.08), rgba(113,113,113,0.06));
  border:1px solid rgba(111,111,111,0.25);
  border-radius:12px;
}
.meal-swap-title{
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.04em;
  color:#b6b6b6;
  margin-bottom:8px;
  text-transform:uppercase;
}
.meal-swap{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.msw-item{
  padding:8px 10px;
  background:rgba(16,16,16,0.55);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:8px;
}
.msw-row{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:4px; }
.msw-name{ font-weight:600; font-size:.9rem; color:#f5f5f5; }
.msw-kcal{ font-size:.78rem; color:#d4d4d4; white-space:nowrap; }
.msw-macros{ display:flex; flex-wrap:wrap; gap:10px; font-size:.78rem; color:#e7e7e7; }
.msw-mac b{ color:#ffffff; font-weight:700; }
.sw-up{ color:#a2a2a2; font-weight:600; }
.sw-down{ color:#afafaf; font-weight:600; }
.sw-eq{ color:#a1a1a1; font-weight:600; }
.meal-swap-note{
  margin:8px 0 0;
  font-size:.72rem;
  color:#a1a1a1;
  font-style:italic;
}
@media (max-width:640px){
  .msw-macros{ gap:6px; font-size:.72rem; }
  .msw-name{ font-size:.84rem; }
}

/* ============ GOAL CARD CTA + GOAL INFO PAGE ============ */
.goal-card{text-decoration:none;color:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center}
.goal-cta{margin-top:.9rem;display:inline-block;padding:.4rem .9rem;border-radius:999px;font-size:.78rem;font-weight:600;letter-spacing:.04em;background:rgba(25,229,155,.12);color:#19e59b;border:1px solid rgba(25,229,155,.35);transition:.25s}
.goal-card:hover .goal-cta{background:rgba(25,229,155,.22);transform:translateY(-2px)}

.goal-page-header{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background:rgba(10,10,10,.75);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.06)}
.gp-brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:#ffffff;font-weight:700}
.gp-brand-name{font-family:var(--display);letter-spacing:.04em}
.gp-brand .brand-logo{width:38px;height:38px;border-radius:10px}

.goal-page{max-width:1080px;margin:0 auto;padding:1.5rem 1.2rem 4rem;display:flex;flex-direction:column;gap:1.4rem}
.gp-hero{border-radius:28px;padding:3rem 2rem;text-align:center;color:#ffffff;position:relative;overflow:hidden;box-shadow:0 20px 60px -20px rgba(0,0,0,.6)}
.gp-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.15),transparent 60%);pointer-events:none}
.gp-hero-inner{position:relative;z-index:1}
.gp-badge{display:inline-block;padding:.4rem 1rem;border-radius:999px;background:rgba(0,0,0,.3);font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;backdrop-filter:blur(8px);margin-bottom:1rem}
.gp-hero h1{font-family:var(--display);font-size:clamp(2rem,5vw,3.4rem);margin:0 0 .6rem;line-height:1.1}
.gp-tagline{font-size:clamp(1rem,2vw,1.2rem);opacity:.95;max-width:640px;margin:0 auto}

.gp-section{padding:1.6rem 1.5rem;border-radius:20px}
.gp-section h2{font-family:var(--display);font-size:1.25rem;margin:0 0 .9rem;color:#ffffff;letter-spacing:.02em}
.gp-section p{color:var(--text-dim);line-height:1.65;margin:0 0 .6rem}

.gp-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
@media(max-width:780px){.gp-grid{grid-template-columns:1fr}}

.gp-list{margin:0;padding-left:1.2rem;color:var(--text-dim);line-height:1.75}
.gp-list li{margin-bottom:.35rem}

.gp-formula{display:inline-block;padding:.6rem 1rem;border-radius:12px;background:rgba(255,255,255,.04);border-left:3px solid #19e59b;font-weight:600;color:#ffffff;font-family:var(--display)}
.gp-eg{font-style:italic;font-size:.9rem;color:var(--text-dim);margin:.6rem 0 1rem !important}
.gp-macros{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.gp-macros li{display:flex;justify-content:space-between;padding:.7rem .9rem;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:12px}
.gp-macros span{color:var(--text-dim);font-size:.85rem}
.gp-macros b{color:#ffffff;font-size:.9rem}
@media(max-width:520px){.gp-macros{grid-template-columns:1fr}}

.gp-eat{border-left:3px solid #ffffff}
.gp-avoid{border-left:3px solid #9a9a9a}

.gp-cta-section{border-radius:28px;padding:3rem 2rem;text-align:center;color:#ffffff;margin-top:1rem;box-shadow:0 20px 60px -20px rgba(0,0,0,.6)}
.gp-cta-section h2{font-family:var(--display);font-size:clamp(1.4rem,3vw,2rem);margin:0 0 .6rem}
.gp-cta-section p{margin:0 0 1.4rem;opacity:.95}
.gp-cta-btn{background:#ffffff !important;color:#111111 !important;font-weight:700;padding:.9rem 1.8rem}

.goal-page-footer{text-align:center;padding:2rem 1rem;color:var(--text-dim);font-size:.85rem;border-top:1px solid rgba(255,255,255,.05)}

/* ========== ANNOUNCEMENT BAR ========== */
.announcement-bar{
  background:linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.08));
  border-bottom:1px solid rgba(255,255,255,.15);
  text-align:center;
  padding:10px 20px;
  font-size:13px;
  color:#a1a1a1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  position:relative;
  z-index:50;
}
.announcement-bar strong{color:#ffffff;font-weight:700}
.announcement-pulse{
  width:8px;height:8px;background:#ffffff;border-radius:50%;
  display:inline-block;
  animation:announce-pulse 2s infinite;
  box-shadow:0 0 0 0 rgba(255,255,255,.5);
}
.announcement-sep{opacity:.4}
.announcement-cta{
  color:#ffffff;font-weight:700;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
}
.announcement-cta:hover{color:#f5f5f5}
@keyframes announce-pulse{
  0%,100%{opacity:1;transform:scale(1);box-shadow:0 0 0 0 rgba(255,255,255,.5)}
  50%{opacity:.5;transform:scale(1.35);box-shadow:0 0 0 8px rgba(255,255,255,0)}
}
@media (max-width:560px){
  .announcement-bar{font-size:12px;padding:9px 14px}
  .announcement-sep{display:none}
}

/* ========== TRUST BADGES ========== */
.trust-section{
  padding:50px 20px;
  text-align:center;
  border-top:1px solid rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.04);
  max-width:1200px;
  margin:1rem auto 0;
}
.trust-label{
  color:#a1a1a1;
  font-size:11px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;
  margin-bottom:24px;
}
.trust-badges{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:14px;max-width:980px;margin:0 auto;
}
.trust-badge{
  display:flex;align-items:center;gap:12px;
  background:rgba(20,20,20,.6);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  padding:14px 18px;min-width:200px;
  transition:all .3s ease;
  text-align:left;
}
.trust-badge:hover{
  border-color:rgba(255,255,255,.25);
  transform:translateY(-2px);
}
.trust-icon{font-size:24px;line-height:1}
.trust-badge-title{font-size:13px;font-weight:700;color:#ffffff}
.trust-badge-sub{font-size:11px;color:#a1a1a1;margin-top:2px}
@media (max-width:768px){
  .trust-badges{gap:10px}
  .trust-badge{min-width:calc(50% - 10px);padding:12px 14px}
}

/* ========== UPGRADED TESTIMONIAL CARDS ========== */
.testimonial .t-top{
  display:flex;align-items:center;gap:10px;margin-bottom:10px;
}
.testimonial .t-top .avatar{
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,#ffffff,#e5e5e5);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;color:#000000;font-size:15px;flex-shrink:0;
}
.testimonial .t-top .who-info{display:flex;flex-direction:column;line-height:1.2}
.testimonial .t-top .who-info b{color:#ffffff;font-size:14px}
.testimonial .t-top .who-info span{color:#a1a1a1;font-size:11px;margin-top:2px}
.testimonial .t-verified{
  margin-left:auto;
  background:rgba(255,255,255,.1);
  color:#ffffff;
  font-size:10px;font-weight:700;
  padding:3px 9px;border-radius:20px;
  border:1px solid rgba(255,255,255,.2);
  white-space:nowrap;
}
.testimonial .t-result{
  background:rgba(255,255,255,.07);
  color:#ffffff;
  font-size:12px;font-weight:700;
  padding:5px 11px;border-radius:8px;
  display:inline-block;
  margin:6px 0 10px;
  border:1px solid rgba(255,255,255,.15);
}
.testimonial .t-plan{
  font-size:11px;color:#a1a1a1;margin-top:10px;
  font-weight:600;letter-spacing:.4px;
  padding-top:10px;border-top:1px solid rgba(255,255,255,.05);
}

/* ============== First-Visit Guided Tour ============== */
.ahr-tour-overlay{
  position:fixed; inset:0; z-index:9999;
  background: radial-gradient(circle at var(--sx,50%) var(--sy,50%), transparent 0, rgba(8,8,8,.78) 60%);
  animation: ahrTourFade .35s ease;
  pointer-events:auto;
}
.ahr-tour-overlay.closing{ opacity:0; transition:opacity .25s ease; }
@keyframes ahrTourFade { from{opacity:0} to{opacity:1} }

.ahr-tour-spot{
  position:absolute; border-radius:18px;
  box-shadow:
    0 0 0 3px rgba(173,173,173,.85),
    0 0 0 9999px rgba(8,8,8,.72),
    0 0 50px 6px rgba(173,173,173,.35);
  transition: top .45s cubic-bezier(.6,.2,.2,1), left .45s cubic-bezier(.6,.2,.2,1),
              width .45s cubic-bezier(.6,.2,.2,1), height .45s cubic-bezier(.6,.2,.2,1);
  pointer-events:none;
}

.ahr-tour-tip{
  position:absolute; max-width:340px; min-width:260px;
  background: linear-gradient(180deg, rgba(26,26,26,.98), rgba(16,16,16,.98));
  color:#ededed; border:1px solid rgba(173,173,173,.35);
  border-radius:16px; padding:18px 18px 14px;
  box-shadow: 0 25px 60px -10px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) inset;
  font-family: Inter, system-ui, sans-serif;
  animation: ahrTipIn .35s cubic-bezier(.2,.8,.3,1.2);
}
@keyframes ahrTipIn { from{transform:translateY(8px); opacity:0} to{transform:none; opacity:1} }
.ahr-tour-step{
  display:inline-block; font-size:11px; letter-spacing:1.5px; font-weight:700;
  color:#c5c5c5; background:rgba(173,173,173,.12); padding:4px 10px; border-radius:20px;
  margin-bottom:10px;
}
.ahr-tour-tip h4{
  margin:0 0 6px; font-size:17px; font-weight:700;
  background: linear-gradient(90deg,#ffffff,#e7e7e7); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ahr-tour-tip p{ margin:0 0 14px; font-size:13.5px; line-height:1.55; color:#c7c7c7; }
.ahr-tour-actions{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ahr-tour-skip{
  background:transparent; border:none; color:#898989; font-size:12px; cursor:pointer; padding:6px 4px;
  text-decoration:underline; text-underline-offset:3px;
}
.ahr-tour-skip:hover{ color:#c7c7c7; }
.ahr-tour-nav{ display:flex; gap:8px; }
.ahr-tour-nav button{
  background:linear-gradient(135deg,#c5c5c5,#919191); color:#202020;
  border:none; padding:8px 14px; border-radius:10px; font-weight:700; font-size:13px;
  cursor:pointer; transition:transform .15s ease, box-shadow .2s ease;
}
.ahr-tour-nav .ahr-tour-prev{
  background:rgba(255,255,255,.06); color:#d5d5d5; border:1px solid rgba(255,255,255,.08);
}
.ahr-tour-nav button:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 6px 16px -4px rgba(173,173,173,.4); }
.ahr-tour-nav button:disabled{ opacity:.4; cursor:not-allowed; }

@media (max-width:520px){
  .ahr-tour-tip{ max-width:calc(100vw - 24px); min-width:0; }
}

/* ===== AI real-time images + AI insights ===== */
.meal-photo.ai-photo{
  position:relative;
  overflow:hidden;
  background-color:var(--aura-deep);
  background-size:cover;
  background-position:center;
  transition:background-image .35s ease, filter .35s ease;
}
.meal-photo.ai-tap:not(.ai-ready){
  background-image:none !important;
  background-color:var(--aura-deep);
}
.meal-photo.ai-loading::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(100deg, transparent 20%, var(--aura-border-strong) 42%, transparent 64%);
  background-size:220% 100%; animation:aiShimmer 1.1s linear infinite;
}
@keyframes aiShimmer{ from{ background-position:180% 0; } to{ background-position:-60% 0; } }
.meal-photo.ai-failed{ background-color:var(--aura-surface); }
.meal-photo .ai-badge{
  position:absolute; top:8px; left:8px; z-index:2; font-size:10px; font-weight:800; letter-spacing:.08em;
  padding:3px 7px; border-radius:999px; color:#0a0a0a; background:#fff; opacity:0;
}
.meal-photo.ai-ready .ai-badge{ opacity:1; }

@media (prefers-reduced-motion:reduce){
  .meal-photo.ai-loading::after{ animation:none; background:var(--surface-2); }
}

.ai-insight{
  margin-top:12px; padding:12px 14px; border-radius:14px; display:none;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04);
}
.ai-insight.visible{ display:block; }
.ai-insight-head{ font-size:12px; font-weight:800; letter-spacing:.04em; opacity:.85; margin-bottom:6px; }
.ai-insight .ai-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:#fff; margin-right:6px; animation:aiPulse 1s ease-in-out infinite; }
@keyframes aiPulse{ 0%,100%{ opacity:.25; transform:scale(.8);} 50%{ opacity:1; transform:scale(1);} }
.ai-insight-list{ margin:0; padding-left:16px; display:grid; gap:5px; }
.ai-insight-list li{ font-size:13px; line-height:1.5; }
.ai-insight-src{ margin-top:8px; font-size:11px; opacity:.6; }
.ai-insight-src a{ color:inherit; text-decoration:underline; }

/* ============ EXERCISE IMAGE FRAMING — portrait, never cropped (site-wide) ============ */
.ex-anim{
  height: auto !important;
  padding: .7rem;
}
.ex-svg{
  width: 100% !important;
  max-width: 230px;
  height: auto !important;
  aspect-ratio: 3 / 4;
  background: #0b0b0b;
}
.ex-img{
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  background: #0b0b0b;
}
.ex-svg:hover .ex-img,
.ex-card:hover .ex-img{ transform: scale(1.03); }
/* plan / day-card thumbnails */
.ex-viz{ aspect-ratio: 3 / 4 !important; max-width: 280px; }
.ex-viz-sm{ aspect-ratio: 3 / 4 !important; height: auto !important; }
.ex-viz .ex-photo,
.ex-viz-sm .ex-photo{ object-fit: contain !important; }

/* ---------- Access gate: trial + token panes ---------- */
.gate-pane.hidden{ display:none; }
.gate-pane .email-login{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.gate-pane .email-login input{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid var(--aura-border-strong, rgba(255,255,255,.14));
  background:var(--surface-2, rgba(255,255,255,.04)); color:inherit; font:inherit;
}
#gateSignOut{ margin-top:12px; opacity:.7; font-size:.85rem; background:none; border:none; cursor:pointer; color:inherit; }
#gateSignOut:hover{ opacity:1; text-decoration:underline; }
.trial-banner{
  text-align:center; padding:8px 14px; font-size:.85rem; letter-spacing:.02em;
  background:var(--surface-2, rgba(255,255,255,.05));
  border-bottom:1px solid var(--aura-border-strong, rgba(255,255,255,.12));
}

/* ---- Meal reminder card ---- */
.push-card{
  margin:10px auto; max-width:820px; padding:12px 14px;
  display:flex; flex-direction:column; gap:10px;
  background:var(--surface-2, rgba(255,255,255,.05));
  border:1px solid var(--aura-border-strong, rgba(255,255,255,.12));
  border-radius:14px;
}
.push-row{ display:flex; flex-direction:column; gap:3px; }
.push-title{ font-weight:600; font-size:.95rem; }
.push-sub{ font-size:.8rem; opacity:.75; line-height:1.4; }
.push-actions{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.push-msg{ font-size:.78rem; opacity:.8; }
.push-times{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px; }
.push-time{ display:flex; flex-direction:column; gap:4px; font-size:.75rem; opacity:.9; }
.push-time input{
  background:rgba(255,255,255,.06); color:inherit;
  border:1px solid var(--aura-border-strong, rgba(255,255,255,.14));
  border-radius:9px; padding:7px 9px; font:inherit; font-size:.85rem;
}

/* ---------- Access code modal (header button) ---------- */
#navCodeBtn.hidden{display:none!important;}
.code-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.78);backdrop-filter:blur(6px);padding:20px;}
.code-modal-card{position:relative;width:100%;max-width:380px;background:#0b0b0b;border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:26px 22px;text-align:center;}
.code-modal-card h3{margin:0 0 8px;font-size:20px;letter-spacing:.02em;}
.code-modal-sub{margin:0 0 16px;font-size:13px;opacity:.7;line-height:1.5;}
.code-modal-card input{width:100%;padding:13px 14px;margin-bottom:12px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:#fff;text-align:center;letter-spacing:.18em;text-transform:uppercase;font-size:15px;}
.code-modal-card .btn{width:100%;}
.code-modal-msg{margin-top:12px;font-size:13px;min-height:18px;opacity:.85;}
.code-modal-msg.err{color:#ff6b6b;}
.code-modal-msg.ok{color:#6bffa0;}
.code-modal-x{position:absolute;top:10px;right:12px;background:none;border:0;color:#fff;opacity:.55;font-size:24px;line-height:1;cursor:pointer;}
.code-modal-x:hover{opacity:1;}

/* Meal reminder deep-link highlight */
.day-card.deeplink-hit{ outline:2px solid #fff; outline-offset:2px; animation:deeplinkPulse 1.2s ease-in-out 2; }
@keyframes deeplinkPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,255,255,.35);} 50%{ box-shadow:0 0 0 10px rgba(255,255,255,0);} }

/* In-app meal reminder toast (fallback when OS notifications are blocked) */
.inapp-toast{
  position:fixed; left:50%; transform:translateX(-50%); bottom:18px; z-index:9999;
  display:flex; align-items:center; gap:14px; max-width:min(560px, 94vw);
  padding:14px 16px; border:1px solid #fff; border-radius:14px;
  background:#000; color:#fff; box-shadow:0 12px 40px rgba(0,0,0,.6);
}
.inapp-toast .inapp-body{ display:flex; flex-direction:column; gap:4px; }
.inapp-toast .inapp-body strong{ font-size:15px; }
.inapp-toast .inapp-body span{ font-size:13px; opacity:.8; }
.inapp-toast .inapp-actions{ display:flex; gap:8px; margin-left:auto; }

/* Reminder status screen */
.rem-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:999; display:flex; align-items:center; justify-content:center; padding:16px; }
.rem-modal{ background:#111; border:1px solid rgba(255,255,255,.12); border-radius:16px; max-width:520px; width:100%; max-height:85vh; overflow-y:auto; padding:22px; color:#fff; }
.rem-modal h3{ margin:0 0 4px; font-size:1.1rem; }
.rem-modal .rem-close{ float:right; background:none; border:none; color:#fff; font-size:20px; cursor:pointer; opacity:.7; }
.rem-section{ margin-top:16px; padding-top:12px; border-top:1px solid rgba(255,255,255,.08); }
.rem-section h4{ margin:0 0 8px; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; opacity:.6; }
.rem-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:.88rem; padding:5px 0; }
.rem-row .rem-k{ opacity:.7; }
.rem-pill{ font-size:.72rem; padding:2px 10px; border-radius:999px; font-weight:600; }
.rem-pill.on{ background:rgba(74,222,128,.15); color:#4ade80; }
.rem-pill.off{ background:rgba(248,113,113,.15); color:#f87171; }
.rem-pill.warn{ background:rgba(250,204,21,.15); color:#facc15; }
.rem-hist{ list-style:none; margin:0; padding:0; font-size:.84rem; }
.rem-hist li{ display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px solid rgba(255,255,255,.05); }
.rem-hist .rem-when{ opacity:.6; white-space:nowrap; }
.rem-empty{ font-size:.84rem; opacity:.6; }

/* Loading skeleton for images (perf pass) */
img.ahr-sk{background:linear-gradient(100deg,rgba(255,255,255,.04) 30%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.04) 70%);background-size:200% 100%;animation:ahrSk 1.2s linear infinite}
@keyframes ahrSk{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){img.ahr-sk{animation:none}}

/* Trial lock — Days 8–30 for trial users */
.day-card.locked-day{position:relative;opacity:.55;filter:grayscale(.4);}
.day-card.locked-day .acc-tabs,.day-card.locked-day .acc-panels{pointer-events:none;}
.day-lock-badge{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.04em;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);margin-bottom:6px;}

/* On-demand meal photos */
.ai-tap{cursor:pointer;}
.ai-tap-hint{position:absolute;inset:auto 0 10px 0;text-align:center;font-size:12px;font-weight:600;letter-spacing:.03em;opacity:.85;pointer-events:none;}
.ai-prog{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);}
.ai-prog-ring{width:64px;height:64px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;animation:aiProgSpin 1s linear infinite;display:flex;align-items:center;justify-content:center;}
.ai-prog-num{font-size:13px;font-weight:700;animation:aiProgSpinRev 1s linear infinite;}
@keyframes aiProgSpin{to{transform:rotate(360deg)}}
@keyframes aiProgSpinRev{to{transform:rotate(-360deg)}}

/* Reminders status: switches + time inputs */
.rem-ctl{ display:inline-flex; align-items:center; gap:8px; }
.rem-msg{ font-size:.7rem; opacity:.75; max-width:180px; text-align:right; font-weight:400; }
.rem-switch{ position:relative; display:inline-block; width:40px; height:22px; flex:none; }
.rem-switch input{ opacity:0; width:0; height:0; }
.rem-slider{ position:absolute; inset:0; cursor:pointer; border-radius:999px; background:rgba(255,255,255,.18); transition:background .2s; }
.rem-slider::before{ content:""; position:absolute; width:16px; height:16px; left:3px; top:3px; border-radius:50%; background:currentColor; transition:transform .2s; }
.rem-switch input:checked + .rem-slider{ background:rgba(74,222,128,.55); }
.rem-switch input:checked + .rem-slider::before{ transform:translateX(18px); }
.rem-switch input:disabled + .rem-slider{ opacity:.5; }
.rem-time{ background:transparent; color:inherit; border:1px solid rgba(255,255,255,.2); border-radius:8px; padding:3px 6px; font:inherit; }
/* Meal photo locked for trial users */
.ai-photo.ai-locked{ cursor:pointer; background-image:none !important; background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02)); backdrop-filter:blur(6px); }
.ai-photo.ai-locked .ai-tap-hint{ opacity:.9; }

/* ===== iPhone/touch stability: cut GPU memory (Safari tab crashes) ===== */
@media (hover:none) and (pointer:coarse), (max-width:820px){
  .aura-orbs::before,.aura-orbs::after,.aura-orbs span{animation:none !important;will-change:auto !important;filter:blur(40px) !important;opacity:.3}
  .hero-orb{animation:none !important;filter:blur(30px) !important}
  .season-overlay,#particles{display:none !important}
  .glass,.glass-1,.glass-2,.loading,.day-card,.meal-card,.card{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
  .glass,.glass-1{background:rgba(18,18,18,.94) !important}
  .glass-2{background:rgba(10,10,10,.97) !important}
  .scan-lines,.ex-viz::before{animation:none !important}
}
@supports (-webkit-touch-callout:none){
  *{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
}

/* Gates use the site primary gradient */
#lockScreen{background:var(--aura-grad-mesh),var(--aura-void);}
#lockScreen .lock-card{border-color:var(--aura-border-strong);border-radius:20px;box-shadow:var(--aura-shadow-2);}
#lockScreen .lock-title{font-family:var(--aura-font-display);font-weight:800;font-size:2.2rem;letter-spacing:-.02em;background:var(--aura-grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;}
#lockScreen .btn-primary{background:var(--aura-grad-primary);color:var(--aura-void);}
#lockScreen .lock-input-wrap input:focus{border-color:var(--aura-primary);outline:none;}
#lockScreen .btn-ghost{border-color:var(--aura-border-strong);}

/* Gate email block */
.gate-divider{display:flex;align-items:center;gap:12px;margin:14px 0;color:var(--gate-muted,#a3a3a3);font-size:13px}
.gate-divider::before,.gate-divider::after{content:"";flex:1;height:1px;background:var(--gate-border,#363636)}
.gate-foot{margin-top:12px;font-size:13px;color:var(--gate-muted,#a3a3a3);text-align:center}
#gateEmail,#codeEmail{width:100%;margin-bottom:10px}