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

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:14px;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:14px;line-height:1.5;letter-spacing:-0.1px;
  color:var(--text);background:var(--surface);
  -webkit-font-smoothing:antialiased;
}
[x-cloak]{display:none!important;}
a{text-decoration:none;color:inherit;}
button,input,select,textarea{font-family:inherit;}

/* ── Tokens ── */
:root{
  --black:#000000;
  --near:#111111;
  --ink:#1c1c1c;
  --mid:#444444;
  --subtle:#717171;
  --muted:#a0a0a0;
  --border:#ebebeb;
  --border-strong:#c8c8c8;
  --surface:#f5f5f0;
  --card:#ffffff;
  --white:#ffffff;
  --text:#1c1c1c;
  --text-2:#717171;
  /* Accent */
  --accent:#D4F040;
  --accent-dk:#8fb827;
  --accent-mid:#b5d132;
  --accent-bg:rgba(212,240,64,.10);
  --accent-border:rgba(212,240,64,.45);
  /* Semantic */
  --green:#16a34a;
  --green-bg:#f0fdf4;
  --red:#dc2626;
  --red-bg:#fef2f2;
  --amber:#d97706;
  --amber-bg:#fffbeb;
  --blue:#2563eb;
  /* Layout */
  --max-w:430px;
  --nav-h:64px;
  --header-h:54px;
  /* Radii */
  --r-xs:6px;
  --r-sm:10px;
  --r-md:14px;
  --r-lg:18px;
  --r-xl:22px;
  --r-pill:9999px;
  /* Shadows */
  --sh-xs:0 1px 3px rgba(0,0,0,.04);
  --sh-sm:0 2px 12px rgba(0,0,0,.06);
  --sh-md:0 4px 24px rgba(0,0,0,.08);
  --sh-lg:0 8px 40px rgba(0,0,0,.10);
}

/* ── Shell ── */
.app-wrapper{min-height:100vh;background:var(--surface);display:flex;justify-content:center;}
.app-container{width:100%;max-width:var(--max-w);min-height:100vh;background:var(--card);position:relative;overflow-x:hidden;box-shadow:0 0 60px rgba(0,0,0,.08);}

/* ── Page header ── */
.page-header{
  height:var(--header-h);display:flex;align-items:center;
  justify-content:space-between;padding:0 18px;
  background:rgba(255,255,255,.95);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:100;
}
.header-brand{
  font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.5px;
}
.header-brand span{color:var(--accent-dk);}
.btn-icon-hd{
  width:36px;height:36px;border-radius:var(--r-sm);border:none;
  background:transparent;color:var(--mid);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;transition:background .12s;flex-shrink:0;
}
.btn-icon-hd:hover{background:var(--surface);}

/* ── Bottom nav (Uber style) ── */
.bottom-nav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:var(--max-w);height:var(--nav-h);
  background:rgba(255,255,255,.97);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--border);
  display:flex;align-items:center;padding:0 4px;
  padding-bottom:env(safe-area-inset-bottom);z-index:150;
}
.nav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;padding:6px 2px;
  color:var(--muted);font-size:10px;font-weight:600;
  letter-spacing:.02em;text-decoration:none;transition:color .12s;
  text-transform:uppercase;
}
.nav-item i{font-size:21px;line-height:1;transition:color .12s;}
.nav-item.active{color:var(--ink);}
.nav-center{
  width:52px;height:52px;border-radius:50%;
  background:var(--ink);color:var(--white)!important;
  font-size:20px;margin-top:-16px;
  border:3px solid var(--card);
  flex-shrink:0;flex:0 0 52px;
  box-shadow:var(--sh-md);
  transition:transform .15s,background .15s;
}
.nav-center:hover{transform:scale(1.06);background:var(--near)!important;}
.nav-center i{font-size:20px;color:var(--white)!important;}
.nav-badge{
  position:absolute;top:5px;right:calc(50% - 22px);
  background:var(--red);color:#fff;font-size:9px;font-weight:700;
  min-width:14px;height:14px;border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:center;padding:0 3px;
  border:1.5px solid var(--white);
}

/* ── Auth (dark standalone) ── */
.auth-wrap{
  min-height:100vh;background:var(--near);
  display:flex;flex-direction:column;padding:28px 20px 40px;
  max-width:var(--max-w);margin:0 auto;
}
.auth-logo{
  font-size:2rem;font-weight:900;color:#fff;
  letter-spacing:-.05em;margin-bottom:6px;
}
.auth-logo span{color:var(--accent);}
.auth-tag{font-size:13px;color:rgba(255,255,255,.4);margin-bottom:36px;}

/* ── Input (light) ── */
.field{margin-bottom:16px;}
.field-label{display:block;font-size:11px;font-weight:600;color:var(--subtle);
             text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px;}
.input{
  width:100%;padding:13px 14px;
  border:1.5px solid var(--border);border-radius:var(--r-md);
  font-size:14px;color:var(--ink);background:var(--white);
  outline:none;font-family:inherit;transition:border-color .15s,box-shadow .15s;
}
.input:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(0,0,0,.06);}
.input::placeholder{color:var(--muted);}
/* Dark inputs for auth */
.input-dark{
  width:100%;padding:14px 16px;
  background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.12);
  border-radius:var(--r-md);color:#fff;font-size:14px;font-family:inherit;outline:none;
  transition:border-color .2s,box-shadow .2s;
  -webkit-appearance:none;appearance:none;
  height:52px;
}
.input-dark:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(212,240,64,.12);
  background:rgba(255,255,255,.10);
}
.input-dark::placeholder{color:rgba(255,255,255,.28);}
.input-dark:-webkit-autofill,
.input-dark:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff;
  -webkit-box-shadow:0 0 0 1000px rgba(30,30,30,.95) inset;
  caret-color:#fff;
}

/* ── Auth field with leading icon + trailing password toggle ── */
.field-dark{position:relative;display:block;}
.field-dark .field-icon{
  position:absolute;left:15px;top:50%;transform:translateY(-50%);
  color:rgba(255,255,255,.32);font-size:15px;line-height:1;
  pointer-events:none;z-index:2;
}
/* leave room for the icons */
.field-dark .input-dark{padding-left:44px;}
.field-dark.has-toggle .input-dark{padding-right:48px;}

/* the eye/see-password button */
.pw-toggle{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;border-radius:50%;cursor:pointer;padding:0;
  color:rgba(255,255,255,.35);font-size:16px;line-height:1;z-index:3;
  transition:color .15s,background .15s;
  -webkit-tap-highlight-color:transparent;
}
.pw-toggle:hover{color:rgba(255,255,255,.7);background:rgba(255,255,255,.06);}
.pw-toggle:active{background:rgba(255,255,255,.12);}
.pw-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
.pw-toggle.is-on{color:var(--accent);}

/* ── Social sign-in ── */
.btn-google{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  height:52px;padding:0 18px;border-radius:var(--r-md);cursor:pointer;
  background:#fff;color:#1f1f1f;border:1.5px solid rgba(255,255,255,.14);
  font-family:inherit;font-size:14px;font-weight:600;text-decoration:none;
  transition:filter .15s,transform .05s;
}
.btn-google:hover{filter:brightness(.96);}
.btn-google:active{transform:translateY(1px);}
.btn-google .g-mark{width:18px;height:18px;flex-shrink:0;}
.auth-divider{
  display:flex;align-items:center;gap:12px;
  margin:18px 0;color:rgba(255,255,255,.3);font-size:11px;
  text-transform:uppercase;letter-spacing:.1em;font-weight:600;
}
.auth-divider::before,.auth-divider::after{
  content:"";flex:1;height:1px;background:rgba(255,255,255,.12);
}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:13px 22px;border-radius:var(--r-pill);
  font-size:14px;font-weight:700;cursor:pointer;border:none;
  font-family:inherit;letter-spacing:-.2px;transition:all .15s;
  text-decoration:none;white-space:nowrap;
}
.btn-primary{background:var(--ink);color:#fff;}
.btn-primary:hover{background:var(--near);}
.btn-primary:active{transform:scale(.98);}
.btn-accent{background:var(--accent);color:var(--ink);}
.btn-accent:hover{background:var(--accent-mid);}
.btn-accent:active{transform:scale(.98);}
.btn-white{background:var(--white);color:var(--ink);border:1.5px solid var(--border);}
.btn-white:hover{border-color:var(--border-strong);}
.btn-ghost-dark{background:rgba(255,255,255,.08);color:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.12);}
.btn-ghost-dark:hover{background:rgba(255,255,255,.13);}
.btn-danger{background:var(--red-bg);color:var(--red);border:1px solid var(--red);}
.btn-block{width:100%;}
.btn-lg{padding:15px 26px;font-size:15px;}
.btn-sm{padding:8px 15px;font-size:12px;}
.btn-xs{padding:5px 11px;font-size:11px;font-weight:600;}

/* ── OTP ── */
.otp-row{display:flex;gap:10px;justify-content:center;}
.otp-box{
  width:58px;height:62px;
  background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.14);
  border-radius:var(--r-md);text-align:center;
  font-size:1.5rem;font-weight:800;color:#fff;
  outline:none;font-family:inherit;transition:border-color .15s;
}
.otp-box:focus{border-color:var(--accent);}

/* ── Splash slides ── */
.splash-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.2);transition:all .2s;}
.splash-dot.on{width:22px;border-radius:4px;background:var(--accent);}
.splash-title{font-size:1.6rem;font-weight:800;color:#fff;letter-spacing:-.04em;line-height:1.2;margin-bottom:12px;}
.splash-desc{font-size:13px;color:rgba(255,255,255,.45);line-height:1.65;}

/* ── Wizard ── */
.wz-shell{min-height:100vh;background:var(--near);display:flex;flex-direction:column;padding-bottom:28px;}
.wz-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 10px;}
.wz-logo{font-size:16px;font-weight:900;color:#fff;letter-spacing:-.5px;}
.wz-logo span{color:var(--accent);}
.wz-counter{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;color:var(--accent);
  background:rgba(212,240,64,.14);border:1px solid rgba(212,240,64,.3);border-radius:99px;padding:4px 10px;}
.wz-progress-bar{height:6px;background:rgba(255,255,255,.12);margin:0 20px;border-radius:99px;overflow:hidden;}
.wz-progress-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),#a6c614);
  box-shadow:0 0 10px rgba(212,240,64,.6);transition:width .5s cubic-bezier(.4,0,.2,1);}
.wz-body{padding:28px 20px 0;}
.wz-title{font-size:1.5rem;font-weight:800;color:#fff;letter-spacing:-.04em;line-height:1.2;margin-bottom:8px;}
.wz-sub{font-size:13px;color:rgba(255,255,255,.4);line-height:1.55;margin-bottom:24px;}
/* Option cards */
.opt-grid{display:grid;gap:10px;}
.opt-grid-2{grid-template-columns:1fr 1fr;}
.opt-card{
  background:rgba(255,255,255,.06);border:2px solid transparent;
  border-radius:var(--r-lg);padding:16px;cursor:pointer;
  transition:border-color .15s,background .15s;
  display:flex;align-items:center;gap:12px;
}
.opt-card-vert{flex-direction:column;align-items:center;text-align:center;padding:18px 12px;}
.opt-card:hover{background:rgba(255,255,255,.09);}
.opt-card.sel{border-color:var(--accent)!important;background:rgba(212,240,64,.10)!important;}
.opt-icon{font-size:1.7rem;line-height:1;flex-shrink:0;}
.opt-icon-sm{font-size:1.3rem;line-height:1;flex-shrink:0;}
.opt-label{font-size:14px;font-weight:600;color:#fff;line-height:1.3;}
.opt-sub{font-size:11px;color:rgba(255,255,255,.38);margin-top:2px;}
.opt-check{
  width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;color:transparent;margin-left:auto;flex-shrink:0;transition:all .15s;
}
.opt-card.sel .opt-check{background:var(--accent);border-color:var(--accent);color:var(--ink);}
/* Slider */
.wz-slider-wrap{margin:8px 0;}
.wz-slider-val{
  font-size:3.5rem;font-weight:900;color:var(--accent);letter-spacing:-.05em;
  text-align:center;line-height:1;margin-bottom:14px;
}
.wz-slider-unit{font-size:16px;color:rgba(255,255,255,.35);font-weight:400;margin-left:4px;}
input[type=range]{
  -webkit-appearance:none;width:100%;height:4px;
  border-radius:2px;background:rgba(255,255,255,.15);outline:none;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:26px;height:26px;border-radius:50%;
  background:var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.4);cursor:pointer;
  transition:transform .12s;
}
input[type=range]::-webkit-slider-thumb:active{transform:scale(1.2);}
.unit-toggle{
  display:flex;gap:0;background:rgba(255,255,255,.08);border-radius:var(--r-pill);
  padding:3px;width:fit-content;margin:12px auto 0;
}
.unit-btn{
  padding:6px 16px;border-radius:var(--r-pill);font-size:12px;font-weight:700;
  color:rgba(255,255,255,.45);cursor:pointer;border:none;background:transparent;
  transition:all .15s;font-family:inherit;
}
.unit-btn.on{background:var(--accent);color:var(--ink);}
/* Review step */
.review-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 0;border-bottom:1px solid rgba(255,255,255,.07);
}
.review-label{font-size:12px;color:rgba(255,255,255,.35);font-weight:500;}
.review-val{font-size:14px;font-weight:700;color:#fff;text-align:right;max-width:60%;}
.review-val-accent{color:var(--accent);}
/* Nav buttons */
.wz-nav{
  width:100%;max-width:var(--max-w);margin:auto auto 0;padding:24px 20px 8px;
  display:flex;gap:10px;
}

/* ── Section header ── */
.sec-hd{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;}
.sec-title{font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.3px;}
.sec-link{font-size:13px;font-weight:600;color:var(--subtle);transition:color .12s;}
.sec-link:hover{color:var(--ink);}

/* ── Program card (Airbnb listing style) ── */
.prog-card{
  background:var(--white);border-radius:var(--r-lg);overflow:hidden;
  display:block;text-decoration:none;transition:transform .12s,box-shadow .15s;
  border:1px solid var(--border);
}
.prog-card:hover{transform:translateY(-2px);box-shadow:var(--sh-md);}
.prog-cover{width:100%;height:170px;object-fit:cover;display:block;background:var(--surface);}
.prog-cover-ph{
  height:170px;display:flex;align-items:center;justify-content:center;
  font-size:3rem;
}
.prog-cover-ph.c-strength {background:linear-gradient(135deg,#1c1c1c,#333);}
.prog-cover-ph.c-cardio   {background:linear-gradient(135deg,#f97316,#ea580c);}
.prog-cover-ph.c-mindful  {background:linear-gradient(135deg,#8b5cf6,#7c3aed);}
.prog-cover-ph.c-flex     {background:linear-gradient(135deg,#0ea5e9,#0284c7);}
.prog-body{padding:13px 14px 14px;}
.prog-level{
  display:inline-flex;align-items:center;gap:4px;
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  padding:3px 9px;border-radius:var(--r-pill);margin-bottom:7px;
}
.lvl-beginner    {background:#dcfce7;color:#14532d;}
.lvl-intermediate{background:#fef9c3;color:#713f12;}
.lvl-advanced    {background:#fee2e2;color:#7f1d1d;}
.prog-title{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.2px;margin-bottom:6px;line-height:1.25;}
.prog-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--subtle);}
.prog-meta i{font-size:11px;}
.prog-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:10px;margin-top:8px;border-top:1px solid var(--border);
}
.xp-tag{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--accent-bg);color:var(--accent-dk);
  font-size:11px;font-weight:700;padding:3px 9px;border-radius:var(--r-pill);
  border:1px solid rgba(143,184,39,.25);
}
/* Horizontal program card (search list) */
.prog-card-h{
  display:flex;gap:0;align-items:stretch;border-radius:var(--r-lg);
  overflow:hidden;border:1px solid var(--border);background:var(--white);
  text-decoration:none;transition:box-shadow .15s;
}
.prog-card-h:hover{box-shadow:var(--sh-md);transform:translateY(-1px);}
.prog-card-h{transition:box-shadow .15s,transform .15s;}
.prog-card-h .prog-thumb{width:104px;flex-shrink:0;object-fit:cover;background:var(--surface);}
.prog-card-h .prog-thumb-ph{width:104px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:2rem;}
.prog-card-h .prog-body{padding:11px 13px;display:flex;flex-direction:column;justify-content:center;}

/* ── Coach card ── */
.coach-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:15px;display:flex;gap:12px;align-items:flex-start;
  text-decoration:none;transition:box-shadow .15s;
}
.coach-card:hover{box-shadow:var(--sh-sm);}
.coach-av{width:52px;height:52px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--surface);}
.coach-av-ph{
  width:52px;height:52px;border-radius:50%;flex-shrink:0;
  background:var(--surface);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:700;color:var(--mid);
}
.coach-name{font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-.1px;}
.coach-spec{font-size:12px;color:var(--subtle);margin-top:2px;}
.coach-stars{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--ink);margin-top:5px;}
.coach-stars i{font-size:11px;color:#f59e0b;}
.coach-stars span{color:var(--subtle);font-weight:400;margin-left:2px;}
.verified{
  display:inline-flex;align-items:center;gap:3px;
  background:#eff6ff;color:#1d4ed8;
  font-size:9px;font-weight:700;padding:2px 7px;border-radius:var(--r-pill);
  margin-left:5px;letter-spacing:.02em;
}
.match-tag{background:var(--accent-bg);color:var(--accent-dk);border:1px solid var(--accent-border);}

/* ── Level / XP / Gamification ── */
.xp-bar-track{height:6px;background:var(--border);border-radius:var(--r-pill);overflow:hidden;}
.xp-bar-fill{height:100%;background:var(--accent);border-radius:var(--r-pill);transition:width .6s ease;}
.level-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:var(--r-pill);font-size:11px;font-weight:700;letter-spacing:.02em;}
.lv-rookie    {background:#f1f5f9;color:#475569;}
.lv-challenger{background:#eff6ff;color:#1d4ed8;}
.lv-athlete   {background:#f0fdf4;color:#15803d;}
.lv-champion  {background:#fffbeb;color:#b45309;}
.lv-legend    {background:#faf5ff;color:#7e22ce;}
.streak-wrap{background:var(--ink);border-radius:var(--r-lg);padding:16px 18px;display:flex;align-items:center;gap:14px;}
.streak-num{font-size:2rem;font-weight:900;color:var(--accent);letter-spacing:-.05em;line-height:1;}
.streak-lbl{font-size:11px;color:rgba(255,255,255,.4);font-weight:500;margin-top:2px;}
.hearts-row{display:flex;gap:3px;}
.heart{font-size:17px;line-height:1;}
.heart.empty{opacity:.2;filter:grayscale(1);}
/* Today hero */
.today-hero{background:var(--ink);border-radius:var(--r-xl);padding:20px;position:relative;overflow:hidden;margin-bottom:22px;}
.today-hero::before{content:'';position:absolute;top:-40px;right:-40px;width:160px;height:160px;border-radius:50%;background:rgba(212,240,64,.06);pointer-events:none;}
.today-day{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--accent-dk);margin-bottom:5px;}
.today-title{font-size:17px;font-weight:800;color:#fff;letter-spacing:-.3px;margin-bottom:6px;}
.today-meta{font-size:12px;color:rgba(255,255,255,.38);margin-bottom:16px;}
.today-pbar{height:4px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden;margin-bottom:5px;}
.today-pfill{height:100%;background:var(--accent);border-radius:2px;}
.today-pct{font-size:10px;color:rgba(255,255,255,.3);}

/* ── Session card ── */
.session-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);padding:13px;display:flex;align-items:center;gap:12px;}
.sess-num{width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--ink);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex-shrink:0;}
.sess-num.done{background:var(--green);color:#fff;}
.sess-num.locked{background:var(--surface);color:var(--muted);border:1px solid var(--border);}
.sess-title{font-size:13px;font-weight:700;color:var(--ink);}
.sess-meta{font-size:11px;color:var(--subtle);margin-top:2px;}

/* ── Quiz ── */
.quiz-pbar{height:3px;background:var(--border);border-radius:2px;margin:0 0 22px;}
.quiz-pfill{height:100%;background:var(--ink);border-radius:2px;transition:width .3s ease;}
.quiz-step{padding:8px 18px 0;}
.quiz-q{font-size:1.2rem;font-weight:800;color:var(--ink);letter-spacing:-.3px;line-height:1.25;margin-bottom:6px;}
.quiz-sub{font-size:13px;color:var(--subtle);margin-bottom:22px;}
.choice-card{
  background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-lg);
  padding:14px 16px;cursor:pointer;display:flex;align-items:center;gap:11px;
  margin-bottom:9px;transition:all .12s;
}
.choice-card:hover{border-color:var(--border-strong);}
.choice-card.sel{background:rgba(212,240,64,.08);border-color:var(--accent);}
.choice-icon{font-size:1.25rem;flex-shrink:0;color:var(--accent-dk,#7a8a1f);display:inline-flex;width:26px;justify-content:center;}
.choice-txt{font-size:13px;font-weight:600;color:var(--ink);}
.choice-check{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border);margin-left:auto;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10px;color:transparent;transition:all .12s;}
.choice-card.sel .choice-check{background:var(--accent);border-color:var(--accent);color:var(--ink);}

/* ── Settings row ── */
.srow{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s;}
.srow:hover{background:var(--surface);}
.srow-icon{width:36px;height:36px;border-radius:var(--r-sm);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:16px;}
.srow-label{flex:1;font-size:14px;font-weight:600;color:var(--ink);}
.srow-val{font-size:12px;color:var(--subtle);}
.srow-arr{color:var(--muted);font-size:12px;}

/* ── Toggle ── */
.toggle{position:relative;width:44px;height:24px;flex-shrink:0;}
.toggle input{opacity:0;width:0;height:0;position:absolute;}
.toggle-track{position:absolute;inset:0;background:var(--border);border-radius:var(--r-pill);cursor:pointer;transition:background .2s;}
.toggle input:checked + .toggle-track{background:var(--accent);}
.toggle-track::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s;}
.toggle input:checked + .toggle-track::after{transform:translateX(20px);}

/* ── Scroll row ── */
.scroll-row{display:flex;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px;scrollbar-width:none;}
.scroll-row::-webkit-scrollbar{display:none;}

/* ── Badges / Pills ── */
.pill{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--r-pill);font-size:10px;font-weight:700;letter-spacing:.03em;}
.pill-green  {background:#dcfce7;color:#14532d;}
.pill-yellow {background:#fef9c3;color:#713f12;}
.pill-red    {background:#fee2e2;color:#7f1d1d;}
.pill-blue   {background:#dbeafe;color:#1e40af;}
.pill-gray   {background:var(--surface);color:var(--mid);}
.pill-accent {background:var(--accent-bg);color:var(--accent-dk);border:1px solid var(--accent-border);}

/* ── Category chips ── */
.cat-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 14px;border-radius:var(--r-pill);
  font-size:12px;font-weight:600;white-space:nowrap;
  border:1.5px solid var(--border);background:var(--white);color:var(--mid);
  cursor:pointer;transition:all .12s;text-decoration:none;flex-shrink:0;
}
.cat-chip:hover{border-color:var(--border-strong);}
.cat-chip.on{background:var(--accent);color:var(--ink);border-color:var(--accent);font-weight:800;}

/* ── Notifications ── */
.notif{display:flex;gap:10px;padding:13px 16px;cursor:pointer;transition:background .1s;border-bottom:1px solid var(--border);}
.notif:hover{background:var(--surface);}
.notif.unread{background:#fffef5;}
.notif-ico{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.ni-streak  {background:#fef3c7;color:#92400e;}
.ni-session {background:#dcfce7;color:#14532d;}
.ni-achieve {background:var(--accent-bg);color:var(--accent-dk);}
.ni-coach   {background:#dbeafe;color:#1e40af;}
.ni-system  {background:var(--surface);color:var(--mid);}
.notif-title{font-size:13px;font-weight:700;color:var(--ink);}
.notif-body {font-size:12px;color:var(--subtle);margin-top:2px;line-height:1.45;}
.notif-time {font-size:10px;color:var(--muted);margin-top:3px;}
.unread-dot{width:7px;height:7px;border-radius:50%;background:var(--accent-dk);flex-shrink:0;margin-top:6px;}

/* ── HTMX progress bar ── */
#htmx-progress{position:fixed;top:0;left:0;height:2px;width:0%;background:var(--ink);z-index:9999;transition:width .25s,opacity .3s;}

/* ── Page content ── */
.page-content{padding:18px 18px calc(var(--nav-h) + 18px);}

/* ── Card ── */
.card{background:var(--white);border-radius:var(--r-lg);border:1px solid var(--border);overflow:hidden;}
.card-body{padding:16px;}

/* ── Empty state ── */
.empty{text-align:center;padding:52px 24px;}
.empty-icon{font-size:2.6rem;display:block;margin-bottom:12px;color:var(--accent-dk);opacity:.5;}
.empty-title{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:4px;}
.empty-sub  {font-size:13px;color:var(--subtle);}

/* ── Progress bars (profile) ── */
.prog-pbar{height:5px;background:var(--border);border-radius:2px;overflow:hidden;margin:5px 0 3px;}
.prog-pfill{height:100%;background:var(--ink);border-radius:2px;}

/* Responsive desktop frame */
@media(min-width:900px){
  .app-wrapper{background:#e5e5e0;}
  .app-container{border-radius:24px;margin:20px;min-height:calc(100vh - 40px);}
  .bottom-nav{border-radius:0 0 24px 24px;}
}


/* ═══════════════════════════════════════════════════
   COACH STUDIO — Design System Extension
   ═══════════════════════════════════════════════════ */
:root {
  --coach-bg:     #0a0a0a;
  --coach-card:   #141414;
  --coach-border: rgba(255,255,255,.09);
  --coach-text:   rgba(255,255,255,.9);
  --coach-muted:  rgba(255,255,255,.38);
  --g-green:      #D4F040;  /* same as --accent */
}

/* Studio shell */
.studio-shell{min-height:100vh;background:var(--coach-bg);color:var(--coach-text);}
.studio-header{
  height:54px;display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;background:rgba(20,20,20,.97);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--coach-border);position:sticky;top:0;z-index:80;
}
.studio-brand{font-size:15px;font-weight:800;color:#fff;letter-spacing:-.4px;}
.studio-brand span{color:var(--g-green);}

/* Sidebar (desktop) */
.studio-sidebar{
  width:220px;background:var(--coach-card);border-right:1px solid var(--coach-border);
  display:flex;flex-direction:column;
  position:fixed;top:54px;left:0;bottom:0;z-index:60;
}
.studio-sidebar a{
  display:flex;align-items:center;gap:10px;padding:12px 16px;
  font-size:13px;font-weight:600;color:var(--coach-muted);
  text-decoration:none;transition:all .12s;border-left:3px solid transparent;
}
.studio-sidebar a:hover{color:#fff;background:rgba(255,255,255,.04);}
.studio-sidebar a.active{color:#fff;border-left-color:var(--g-green);background:rgba(212,240,64,.06);}
.studio-main{margin-left:0;padding:16px;}
@media(min-width:700px){.studio-main{margin-left:220px;padding:24px;}}
@media(max-width:699px){
  .studio-sidebar{position:sticky;top:0;left:auto;bottom:auto;width:100%;height:auto;
    flex-direction:row;overflow-x:auto;overflow-y:hidden;border-right:none;
    border-bottom:1px solid var(--coach-border);-webkit-overflow-scrolling:touch;}
  .studio-sidebar a{white-space:nowrap;border-left:none;border-bottom:3px solid transparent;padding:12px 14px;flex-shrink:0;}
  .studio-sidebar a.active{border-left:none;border-bottom-color:var(--g-green);}
  .studio-sidebar a[style*="margin-top:auto"]{margin-top:0!important;margin-left:auto;}
}

/* Program card (dark) */
.prog-dark-card{
  background:var(--coach-card);border:1px solid var(--coach-border);
  border-radius:16px;padding:16px;display:flex;gap:12px;align-items:flex-start;
  cursor:pointer;transition:border-color .15s,background .12s;
}
.prog-dark-card:hover{border-color:rgba(255,255,255,.2);background:#1a1a1a;}
.prog-dark-card.selected{border-color:var(--g-green);}
.prog-level-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px;}
.dot-beginner{background:#4ade80;}
.dot-intermediate{background:#fbbf24;}
.dot-advanced{background:#f87171;}

/* Session row */
.session-row{
  display:flex;align-items:center;gap:10px;padding:12px 14px;
  background:rgba(255,255,255,.03);border:1px solid var(--coach-border);
  border-radius:10px;margin-bottom:8px;cursor:pointer;transition:all .12s;
}
.session-row:hover{background:rgba(255,255,255,.06);}
.session-row.expanded{background:rgba(212,240,64,.06);border-color:rgba(212,240,64,.25);}
.session-day-badge{
  width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:rgba(255,255,255,.5);flex-shrink:0;
}
.session-day-badge.has-video{background:rgba(212,240,64,.15);color:var(--g-green);}

/* Exercise card */
.ex-card{
  background:rgba(255,255,255,.04);border:1px solid var(--coach-border);
  border-radius:10px;padding:12px 14px;display:flex;gap:10px;align-items:center;
  margin-bottom:8px;transition:all .12s;
}
.ex-card:hover{background:rgba(255,255,255,.07);}
.ex-num{
  width:28px;height:28px;border-radius:50%;background:var(--g-green);
  color:#000;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:900;flex-shrink:0;
}
.ex-has-video{
  width:28px;height:28px;border-radius:50%;background:rgba(34,197,94,.2);
  color:#4ade80;display:flex;align-items:center;justify-content:center;
  font-size:13px;flex-shrink:0;
}

/* Camera fullscreen */
.camera-shell{
  position:fixed;inset:0;background:#000;z-index:200;
  display:flex;flex-direction:column;max-width:430px;margin:0 auto;
}
/* ── Coach camera: full-bleed viewfinder ──────────────────────────────────
   Grid stacking puts the video and every overlay in the SAME cell, so the
   viewfinder always fills the screen and the controls sit on top of it.
   Sizing lives in these classes on purpose: an Alpine `:style` binding can
   replace an element's inline style attribute, but it can never remove a class. */
.cam-shell{position:relative;width:100%;max-width:var(--max-w);margin:0 auto;
  height:100vh;height:100dvh;background:#000;overflow:hidden;
  display:grid;grid-template-columns:1fr;grid-template-rows:1fr;}
.cam-shell > *{grid-area:1/1;min-width:0;min-height:0;}
.camera-video{width:100%;height:100%;object-fit:cover;background:#000;display:block;}
.camera-overlay-header{
  position:absolute;top:0;left:0;right:0;
  padding:16px;background:linear-gradient(to bottom,rgba(0,0,0,.8) 0%,transparent 100%);
  display:flex;align-items:center;justify-content:space-between;z-index:10;
}
.camera-overlay-footer{
  position:absolute;bottom:0;left:0;right:0;
  padding:20px 20px 32px;background:linear-gradient(to top,rgba(0,0,0,.9) 0%,transparent 100%);
  display:flex;align-items:center;justify-content:space-around;z-index:10;
}
/* Record button ring */
.record-ring{
  position:relative;width:80px;height:80px;
  display:flex;align-items:center;justify-content:center;
}
.record-btn-inner{
  width:62px;height:62px;border-radius:50%;background:#fff;
  border:none;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;
;position:relative;z-index:50;}
.record-btn-inner.recording{background:var(--g-green);}
.record-btn-inner:active{transform:scale(.94);}

/* Side tools (TikTok style) */
.side-tools-stack{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:18px;align-items:center;z-index:10;
}
.side-tool-btn{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  border:none;background:none;cursor:pointer;
}
.side-tool-icon{
  width:42px;height:42px;border-radius:50%;
  background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:18px;
}
.side-tool-label{font-size:9px;font-weight:700;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.05em;}

/* Music picker */
.music-sheet{
  background:#111;border-radius:20px 20px 0 0;padding:16px;
  max-height:75vh;overflow:hidden;display:flex;flex-direction:column;
}
.music-track-row{
  display:flex;align-items:center;gap:12px;padding:11px 12px;
  border-radius:10px;cursor:pointer;transition:background .12s;
}
.music-track-row:hover{background:rgba(255,255,255,.06);}
.music-track-row.playing{background:rgba(212,240,64,.1);}
.music-thumb{
  width:44px;height:44px;border-radius:8px;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;
  overflow:hidden;
}
.music-thumb img{width:100%;height:100%;object-fit:cover;}
.music-title{font-size:13px;font-weight:700;color:#fff;}
.music-artist{font-size:11px;color:rgba(255,255,255,.4);margin-top:1px;}
.music-duration{font-size:11px;color:rgba(255,255,255,.3);margin-left:auto;flex-shrink:0;}
.music-playing-indicator{display:flex;gap:2px;align-items:flex-end;height:16px;flex-shrink:0;}
.music-bar{width:3px;border-radius:2px;background:var(--g-green);animation:musicBar .6s ease-in-out infinite alternate;}
.music-bar:nth-child(2){animation-delay:.15s;height:60%;}
.music-bar:nth-child(3){animation-delay:.3s;height:80%;}
.music-bar:nth-child(1){height:100%;}
@keyframes musicBar{from{transform:scaleY(.4)}to{transform:scaleY(1)}}

/* Editor timeline */
.timeline-wrap{
  background:var(--coach-card);border-radius:12px;overflow:hidden;
  border:1px solid var(--coach-border);
}
.timeline-ruler{
  height:24px;background:rgba(255,255,255,.04);
  display:flex;align-items:center;padding:0 8px;
  border-bottom:1px solid var(--coach-border);overflow:hidden;
}
.timeline-track{
  height:44px;position:relative;overflow:hidden;
  border-bottom:1px solid var(--coach-border);
}
.timeline-track-label{
  position:absolute;left:0;top:0;bottom:0;width:60px;
  background:var(--coach-card);z-index:5;
  display:flex;align-items:center;padding:0 8px;
  font-size:10px;font-weight:700;color:rgba(255,255,255,.3);
  text-transform:uppercase;letter-spacing:.06em;border-right:1px solid var(--coach-border);
}
.timeline-clip{
  position:absolute;left:60px;right:0;top:6px;bottom:6px;
  background:rgba(212,240,64,.2);border:1px solid rgba(212,240,64,.4);
  border-radius:4px;display:flex;align-items:center;padding:0 8px;
  font-size:11px;font-weight:600;color:var(--g-green);overflow:hidden;
  cursor:grab;
}
.timeline-clip.music{background:rgba(59,130,246,.2);border-color:rgba(59,130,246,.4);color:#60a5fa;}
.timeline-playhead{
  position:absolute;top:0;bottom:0;width:2px;background:var(--g-green);z-index:10;
  pointer-events:none;
}
.timeline-playhead::before{
  content:'';position:absolute;top:0;left:-5px;
  border:6px solid transparent;border-bottom-color:var(--g-green);
  border-top:none;transform:translateY(-100%);
}

/* Coach form */
.studio-input{
  width:100%;padding:11px 13px;background:rgba(255,255,255,.06);
  border:1.5px solid var(--coach-border);border-radius:10px;
  color:#fff;font-size:13px;font-family:inherit;outline:none;
  transition:border-color .15s;
}
.studio-input:focus{border-color:var(--g-green);}
.studio-input::placeholder{color:rgba(255,255,255,.25);}
.studio-label{display:block;font-size:10px;font-weight:700;color:rgba(255,255,255,.35);
               text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;}
.studio-select{
  width:100%;padding:11px 13px;background:rgba(255,255,255,.06);
  border:1.5px solid var(--coach-border);border-radius:10px;
  color:#fff;font-size:13px;font-family:inherit;outline:none;cursor:pointer;
  -webkit-appearance:none;
}
.studio-select option{background:#1a1a1a;color:#fff;}
.studio-select:focus{border-color:var(--g-green);}
.studio-textarea{
  width:100%;padding:11px 13px;background:rgba(255,255,255,.06);
  border:1.5px solid var(--coach-border);border-radius:10px;
  color:#fff;font-size:13px;font-family:inherit;outline:none;resize:vertical;min-height:72px;
  transition:border-color .15s;
}
.studio-textarea:focus{border-color:var(--g-green);}
.studio-textarea::placeholder{color:rgba(255,255,255,.25);}

/* Chips/tags */
.muscle-chip{
  display:inline-flex;align-items:center;gap:4px;padding:4px 10px;
  background:rgba(212,240,64,.1);border:1px solid rgba(212,240,64,.25);
  border-radius:var(--r-pill);font-size:11px;font-weight:700;color:var(--g-green);
  cursor:pointer;transition:all .12s;
}
.muscle-chip:hover{background:rgba(212,240,64,.2);}
.muscle-chip.sel{background:var(--g-green);color:#000;}

/* Stats bar */
.studio-stat{
  background:rgba(255,255,255,.04);border:1px solid var(--coach-border);
  border-radius:12px;padding:14px;text-align:center;
}
.studio-stat-num{font-size:1.6rem;font-weight:900;color:#fff;letter-spacing:-.04em;}
.studio-stat-label{font-size:10px;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.08em;margin-top:2px;}

/* Empty state dark */
.empty-dark{text-align:center;padding:48px 24px;}
.empty-dark-icon{font-size:3rem;margin-bottom:12px;opacity:.2;}
.empty-dark-title{font-size:15px;font-weight:700;color:rgba(255,255,255,.6);}
.empty-dark-sub  {font-size:12px;color:rgba(255,255,255,.25);margin-top:4px;}


/* ═══════════════════════════════════════════════════
   MOBILE OPTIMIZATIONS
   ═══════════════════════════════════════════════════ */

/* Touch target minimum 44px for all interactive elements */
button, a, [role="button"] {
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* Prevent text selection on tap-heavy UI */
.camera-shell, #workoutRoot {
  -webkit-user-select: none;
  user-select: none;
}

/* Active press states for mobile (replaces :hover) */
.btn:active          { transform: scale(.97); opacity: .9; }
.btn-accent:active   { transform: scale(.97); }
.btn-primary:active  { transform: scale(.97); }

/* Fix btn rendering on iOS */
.btn {
  -webkit-appearance: none;
  appearance: none;
}

/* Bottom nav — safe area + proper height */
nav.bottom-nav, nav[style*="bottom:0"] {
  padding-bottom: max(8px, env(safe-area-inset-bottom, 8px));
}

/* Input fields — prevent iOS zoom on focus (need font-size >= 16px) */
.input, .input-dark, .studio-input, .studio-select, .studio-textarea {
  font-size: max(16px, 14px);   /* iOS won't zoom if font-size >= 16px */
}

/* Session player specific */
#workoutRoot video {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* Right rail buttons — ensure tap area */
.side-tool-btn, #workoutRoot button {
  min-width: 44px;
  min-height: 44px;
}

/* Choice cards — bigger tap area on mobile */
.choice-card {
  min-height: 52px;
  padding: 13px 16px;
}

/* Program cards — proper spacing */
.prog-card {
  margin-bottom: 12px;
}

/* Scrollable containers — momentum scrolling */
.discover-scroll, .session-list, .drafts-list, [style*="overflow-y:auto"] {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* OTP boxes — proper mobile size */
.otp-box {
  min-width: 52px;
  min-height: 62px;
  font-size: 22px;
}

/* Focus visible for accessibility */
:focus-visible {
  outline: 2px solid #D4F040;
  outline-offset: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}

/* Prevent horizontal overflow WITHOUT creating a scroll container
   (overflow-x:hidden on <html> breaks vertical touch-scroll on mobile). */
body {
  overflow-x: clip;
}


/* ═══════════════════════════════════════════════════
   COACHMATCH V12 — Bodybuilding / Lookmaxxing / Medical
   Additive tokens only — nothing above is changed
   ═══════════════════════════════════════════════════ */

/* V12 category cover gradients */
.prog-cover-ph.c-bulk        { background: linear-gradient(135deg,#1a0a00,#7c2d12); }
.prog-cover-ph.c-cut         { background: linear-gradient(135deg,#450a0a,#991b1b); }
.prog-cover-ph.c-lookmaxxing { background: linear-gradient(135deg,#0d0019,#581c87); }
.prog-cover-ph.c-performance { background: linear-gradient(135deg,#0c1445,#1d4ed8); }
.prog-cover-ph.c-medical     { background: linear-gradient(135deg,#052e16,#14532d); }

/* V12 category pills */
.v12-cat-bulk        { background:#fff3e8; color:#c2410c; border:1px solid #fed7aa; }
.v12-cat-cut         { background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; }
.v12-cat-lookmaxxing { background:#faf5ff; color:#6d28d9; border:1px solid #e9d5ff; }
.v12-cat-performance { background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; }
.v12-cat-medical     { background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; }

/* V12 medical badge */
.badge-medical {
  display:inline-flex; align-items:center; gap:4px;
  background:#f0fdf4; color:#15803d;
  font-size:9px; font-weight:700; padding:2px 8px;
  border-radius:var(--r-pill); border:1px solid #bbf7d0;
  letter-spacing:.02em;
}

/* V12 product card grid */
.product-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:11px;
}
.product-card {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden;
  text-decoration:none; transition:box-shadow .15s;
}
.product-card:hover { box-shadow:var(--sh-sm); }
.product-card-img {
  height:120px; display:flex; align-items:center;
  justify-content:center; font-size:2.8rem;
  background:var(--surface); position:relative;
}
.product-card-body { padding:10px 12px 12px; }
.product-name { font-size:13px; font-weight:700; color:var(--ink); line-height:1.3; margin-bottom:5px; }
.product-price { font-size:16px; font-weight:900; color:var(--ink); }
.badge-18plus {
  position:absolute; top:7px; right:7px;
  background:#fffbeb; color:#92400e;
  font-size:8px; font-weight:800; padding:2px 6px;
  border-radius:var(--r-xs); border:1px solid #fde68a;
}
.badge-rx {
  position:absolute; top:7px; left:7px;
  background:#eff6ff; color:#1d4ed8;
  font-size:8px; font-weight:800; padding:2px 6px;
  border-radius:var(--r-xs); border:1px solid #bfdbfe;
}

/* V12 macro display */
.macro-ring {
  background:var(--surface); border-radius:var(--r-lg);
  padding:14px; text-align:center;
}
.macro-val { font-size:22px; font-weight:900; letter-spacing:-.04em; line-height:1; }
.macro-lbl { font-size:9px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-top:3px; }
.macro-protein { color:#ef4444; }
.macro-carbs   { color:#3b82f6; }
.macro-fats    { color:#f59e0b; }
.macro-kcal    { color:var(--accent-dk); }

/* V12 consultation card */
.consult-card {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:16px;
  display:flex; gap:13px; align-items:flex-start;
}
.doctor-av {
  width:52px; height:52px; border-radius:50%;
  background:var(--green-bg); border:2px solid #86efac;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0;
}

/* V12 quiz score bar */
.score-bar-wrap { margin-bottom:9px; }
.score-bar-track { height:4px; background:var(--border); border-radius:2px; overflow:hidden; margin-top:5px; }
.score-bar-fill { height:100%; background:var(--accent); border-radius:2px; transition:width .6s ease; }

/* V12 goal badge (on profile) */
.goal-badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 12px; border-radius:var(--r-pill);
  font-size:11px; font-weight:700; letter-spacing:.02em;
}
.goal-bulk        { background:#fff3e8; color:#c2410c; }
.goal-cut         { background:#fef2f2; color:#b91c1c; }
.goal-lookmax     { background:#faf5ff; color:#6d28d9; }
.goal-performance { background:#eff6ff; color:#1d4ed8; }
.goal-medical     { background:#f0fdf4; color:#15803d; }

/* ══════════════════════════════════════════════════════════════
   MOBILE / PWA POLISH
   ══════════════════════════════════════════════════════════════ */

/* Kill the grey tap flash and text selection jank on touch UIs */
* { -webkit-tap-highlight-color: transparent; }
button, a, .btn, .opt-card, .sess-num, [role="button"] { touch-action: manipulation; }

/* Never allow sideways scroll (handled by `body { overflow-x: clip }` above —
   must NOT set overflow/overscroll on <html> or vertical scroll breaks). */

/* Respect the notch / home-indicator on iOS PWAs */
.auth-wrap { padding-top: max(28px, env(safe-area-inset-top)); }
.bottom-nav, .nav-bar, .tabbar {
  padding-bottom: max(0px, env(safe-area-inset-bottom));
}
.app-shell, .app-main { padding-bottom: calc(var(--nav-h, 64px) + env(safe-area-inset-bottom)); }

/* Comfortable, thumb-sized tap targets */
.sess-num, .pw-toggle, .unit-btn, .icon-btn { min-width: 40px; min-height: 40px; }
a.btn, button.btn, .btn-block { min-height: 48px; }

/* Session rows: clear pressed feedback now that they're links */
a[href] .sess-title { transition: color .12s; }
a[href]:active { filter: brightness(.97); }

/* Inputs never zoom the viewport on focus (iOS zooms < 16px) */
input, select, textarea, .input, .input-dark { font-size: 16px; }

/* Smooth momentum scroll inside scrollable panels */
.scroll-y, .offcanvas-body, .sheet-body { -webkit-overflow-scrolling: touch; }

/* Larger, easier hit area for icon-only buttons on small screens */
@media (max-width: 430px) {
  .btn { padding-left: 16px; padding-right: 16px; }
  .card, .sess-card { border-radius: var(--r-md); }
  .auth-wrap { padding-left: 18px; padding-right: 18px; }
}

/* Disable double-tap-to-zoom on interactive controls */
label, .field-dark, .opt-card { touch-action: manipulation; }

/* ══════════════════════════════════════════════════════════════
   REVAMP — premium onboarding + Fitboost-inspired polish
   ══════════════════════════════════════════════════════════════ */

/* Splash hero */
.splash-badge{
  width:62px;height:62px;border-radius:20px;
  background:var(--accent-bg);border:1px solid var(--accent-border);
  display:flex;align-items:center;justify-content:center;margin-bottom:28px;
  box-shadow:0 8px 30px rgba(212,240,64,.10);
}
.splash-badge i{font-size:27px;color:var(--accent);}
.splash-hl{
  font-size:2.7rem;font-weight:900;line-height:1.02;
  letter-spacing:-.045em;margin:0;color:#fff;
}
.splash-desc{font-size:14px;color:rgba(255,255,255,.5);line-height:1.6;}

/* Section headers: nicer "See all" affordance */
.sec-hd a, a.see-all{
  font-size:12px;font-weight:800;color:var(--accent-dk);
  letter-spacing:-.1px;text-decoration:none;display:inline-flex;align-items:center;gap:3px;
}
.sec-hd a:active{opacity:.6;}

/* Accent button: subtle lime depth for presence (Fitboost feel) */
.btn-accent{box-shadow:0 6px 18px rgba(212,240,64,.28);}
.btn-accent:active{box-shadow:0 2px 8px rgba(212,240,64,.22);}

/* Bottom nav: lime active pip under the active tab */
.nav-item.active{color:var(--ink);position:relative;}
.nav-item.active::after{
  content:"";position:absolute;top:-8px;left:50%;transform:translateX(-50%);
  width:18px;height:3px;border-radius:99px;background:var(--accent);
}

/* Tighter, more confident headings app-wide */
.sec-title{letter-spacing:-.4px;}
.today-title{letter-spacing:-.5px;}

/* Filter chips: comfortable tap size + smoother */
.cat-chip{transition:background .15s,color .15s,border-color .15s;min-height:34px;}

/* Program cover/thumb placeholder icons (were emoji, now bi icons) */
.prog-cover-ph i, .prog-thumb-ph i{ font-size:2rem; color:var(--accent-dk); }

/* ══════════════════════════════════════════════════════════════
   IMAGE-FORWARD PROGRAM HERO CARD (Fitboost-style)
   Uses cover image if present, else a rich category-colored gradient.
   ══════════════════════════════════════════════════════════════ */
.prog-hero{
  position:relative;display:block;height:212px;border-radius:var(--r-xl);
  overflow:hidden;text-decoration:none;box-shadow:var(--sh-md);
  background:linear-gradient(158deg, var(--cat,#D4F040) -10%, #101010 76%);
  isolation:isolate;
}
.prog-hero:active{transform:scale(.99);}
.prog-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;}
.prog-hero::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(to top, rgba(0,0,0,.92) 6%, rgba(0,0,0,.45) 42%, rgba(0,0,0,.12) 100%);
}
.prog-hero-top{position:absolute;top:14px;left:14px;right:14px;z-index:1;display:flex;gap:6px;align-items:center;}
.prog-hero-play{
  margin-left:auto;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.16);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;
  border:1px solid rgba(255,255,255,.25);
}
.prog-hero-body{position:absolute;left:17px;right:17px;bottom:15px;z-index:1;}
.prog-hero-cat{
  font-size:11px;font-weight:800;color:var(--accent);text-transform:uppercase;
  letter-spacing:.07em;margin-bottom:7px;display:inline-flex;align-items:center;gap:5px;
}
.prog-hero-title{font-size:1.4rem;font-weight:900;color:#fff;letter-spacing:-.5px;line-height:1.08;margin-bottom:10px;}
.prog-hero-meta{display:flex;gap:16px;font-size:12px;font-weight:600;color:rgba(255,255,255,.82);}
.prog-hero-meta i{color:var(--accent);margin-right:4px;}

/* ══════════════════════════════════════════════════════════════
   PROGRAM DETAIL — full-bleed hero + overlapping sheet (Fitboost)
   ══════════════════════════════════════════════════════════════ */
.pd-hero{
  position:relative;height:340px;
  background:linear-gradient(158deg, var(--cat,#D4F040) -12%, #0d0d0d 74%);
  isolation:isolate;
}
.pd-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;}
.pd-hero::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.35) 0%, transparent 30%, rgba(0,0,0,.55) 100%);
}
.pd-hero-nav{
  position:absolute;top:max(14px,env(safe-area-inset-top));left:14px;right:14px;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
}
.pd-circle-btn{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:rgba(20,20,20,.55);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:17px;
  text-decoration:none;
}
.pd-hero-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;
  width:66px;height:66px;border-radius:50%;
  background:rgba(255,255,255,.18);backdrop-filter:blur(10px);
  border:1.5px solid rgba(255,255,255,.4);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;
}
.pd-sheet{
  position:relative;z-index:1;margin-top:-26px;
  background:var(--card);border-radius:26px 26px 0 0;
  padding:22px 20px 0;
}
.pd-stats{display:flex;align-items:center;gap:0;margin-bottom:16px;}
.pd-stat{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;}
.pd-stat i{font-size:16px;color:var(--accent-dk);}
.pd-stat span{font-size:13px;font-weight:800;color:var(--ink);letter-spacing:-.2px;}
.pd-stat small{font-size:9px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;}
.pd-stat-div{width:1px;height:34px;background:var(--border);flex-shrink:0;}
.pd-with{font-size:12px;font-weight:600;color:var(--subtle);margin-bottom:6px;}
.pd-with a{color:var(--accent-dk);font-weight:800;text-decoration:none;}
.pd-title{font-size:1.7rem;font-weight:900;color:var(--ink);letter-spacing:-.6px;line-height:1.08;margin:0 0 12px;}
.pd-desc{font-size:14px;color:var(--subtle);line-height:1.7;margin:0;}
.pd-desc-clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.pd-more{
  background:none;border:none;padding:6px 0 0;cursor:pointer;
  font-size:13px;font-weight:800;color:var(--accent-dk);font-family:inherit;
}

/* Coach detail: avatar centered in the hero */
.ch-av{
  width:100px;height:100px;border-radius:50%;object-fit:cover;
  border:3px solid var(--accent);box-shadow:0 10px 34px rgba(0,0,0,.45);
}
.ch-av-ph{
  width:100px;height:100px;border-radius:50%;
  background:linear-gradient(140deg,var(--accent),var(--accent-dk));color:#111;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:2.6rem;
  border:3px solid #fff;box-shadow:0 10px 34px rgba(0,0,0,.45);
}
.ch-spec-pill{
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-radius:var(--r-pill);backdrop-filter:blur(6px);
}

/* ══════════════════════════════════════════════════════════════
   PROGRAM TILE — compact image-forward list card (Fitboost)
   ══════════════════════════════════════════════════════════════ */
.prog-tile{
  position:relative;display:block;height:150px;border-radius:var(--r-lg);
  overflow:hidden;text-decoration:none;box-shadow:var(--sh-sm);
  background:linear-gradient(150deg, var(--cat,#D4F040) -22%, #101010 82%);
  isolation:isolate;transition:box-shadow .15s,transform .12s;
}
.prog-tile:hover{box-shadow:var(--sh-md);transform:translateY(-1px);}
.prog-tile:active{transform:scale(.99);}
.prog-tile-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;}
.prog-tile::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(to top, rgba(0,0,0,.9) 4%, rgba(0,0,0,.4) 46%, rgba(0,0,0,.08) 100%);
}
.prog-tile-top{position:absolute;top:12px;left:12px;right:12px;z-index:1;display:flex;gap:6px;align-items:center;}
.prog-tile-body{position:absolute;left:14px;right:14px;bottom:13px;z-index:1;}
.prog-tile-cat{font-size:10px;font-weight:800;color:var(--accent);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px;display:inline-flex;align-items:center;gap:4px;}
.prog-tile-title{font-size:1.08rem;font-weight:900;color:#fff;letter-spacing:-.3px;line-height:1.12;margin-bottom:7px;}
.prog-tile-meta{display:flex;gap:14px;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.82);}
.prog-tile-meta i{color:var(--accent);margin-right:3px;}

/* Settings/profile row icons (emoji → bi icon) */
.srow-icon i{ font-size:17px; color:var(--near); }

/* Wizard option icons (emoji → bi icon), lime on dark cards */
.opt-icon i, .opt-icon-sm i{ color:var(--accent); }
.opt-check i{ font-size:13px; }

/* Notification icon badges (emoji → bi icon) */
.notif-icon{width:40px;height:40px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.05rem;background:var(--accent-bg);color:var(--accent-dk);}
.notif-icon-streak{background:#fff1e6;color:#f97316;}
.notif-icon-achievement{background:#fef9e7;color:#d4a017;}
.notif-icon-coach{background:#eef2ff;color:#4f46e5;}
.notif-icon-promo{background:#fdf2f8;color:#db2777;}

/* ══════════════════════════════════════════════════════════════════════════
   GAMIFICATION KIT  (Coach Deck, XP, rings, glow) — brand: lime on near-black
   ══════════════════════════════════════════════════════════════════════════ */
:root{ --glow:0 0 24px rgba(212,240,64,.55), 0 0 60px rgba(212,240,64,.25); }
.neon-glow{ box-shadow:var(--glow); }

/* Brand wordmark (white "Coach" + lime "Match") */
.wordmark{ font-family:'Clash Display','Inter',sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1; }
.wordmark .wm-a{ color:#fff; } .wordmark .wm-b{ color:var(--accent); }

/* Step / progress bar (n / total) */
.step-bar{ height:6px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden; }
.step-bar > i{ display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),#a6c614);
  box-shadow:0 0 10px rgba(212,240,64,.6);transition:width .5s cubic-bezier(.4,0,.2,1); }

/* Hexagonal XP badge + sparkle burst */
.xp-hex{ position:relative;width:74px;height:82px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#e6ff5a,#b6dd1e);color:#0d0d0d;font-weight:900;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  box-shadow:0 0 22px rgba(212,240,64,.7);animation:xpPop .5s cubic-bezier(.34,1.56,.64,1); }
.xp-hex b{ font-size:1.35rem;line-height:1; } .xp-hex span{ font-size:.62rem;letter-spacing:.14em;font-weight:800; }
@keyframes xpPop{ 0%{transform:scale(.3) rotate(-12deg);opacity:0;} 60%{transform:scale(1.12) rotate(3deg);} 100%{transform:scale(1) rotate(0);opacity:1;} }
.spark{ position:absolute;width:7px;height:7px;border-radius:50%;background:#eaff7a;box-shadow:0 0 8px #d4f040;animation:sparkle .9s ease-out forwards; }
@keyframes sparkle{ 0%{transform:translate(0,0) scale(.2);opacity:1;} 100%{transform:translate(var(--dx),var(--dy)) scale(1);opacity:0;} }

/* Match ring (avatar completeness) */
.match-ring{ position:relative;display:inline-grid;place-items:center; }
.match-ring svg{ transform:rotate(-90deg); } .match-ring .rt{ fill:none;stroke:rgba(255,255,255,.12); }
.match-ring .rf{ fill:none;stroke:var(--accent);stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(212,240,64,.6));
  transition:stroke-dashoffset .7s cubic-bezier(.4,0,.2,1); }

/* ── Coach Deck (Tinder-style, swipe + flip) ── */
.deck-wrap{ position:relative;height:clamp(430px,62vh,560px);perspective:1400px; }
.deck-card{ position:absolute;inset:0;border-radius:26px;overflow:hidden;
  transform-style:preserve-3d;will-change:transform;transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .35s; }
.deck-card.gone-l{ transform:translateX(-140%) rotate(-18deg)!important;opacity:0; }
.deck-card.gone-r{ transform:translateX(140%) rotate(18deg)!important;opacity:0; }
.deck-face{ position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:26px;overflow:hidden;background:#141414;border:1px solid rgba(255,255,255,.08); }
.deck-back{ transform:rotateY(180deg); }
.deck-photo{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; }
.deck-photo-grad{ position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,10,.96) 12%,rgba(10,10,10,.35) 46%,rgba(10,10,10,.05) 72%,rgba(212,240,64,.12) 100%); }
.deck-ph{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:5rem;color:#0d0d0d;
  background:radial-gradient(120% 80% at 50% 0,var(--cat,#D4F040),#0d0d0d 72%); }
.deck-body{ position:absolute;left:18px;right:18px;bottom:16px;z-index:2; }
.deck-tag{ display:inline-flex;align-items:center;gap:5px;background:var(--accent);color:#0d0d0d;font-size:10px;font-weight:900;
  text-transform:uppercase;letter-spacing:.08em;padding:4px 10px;border-radius:99px;margin-bottom:9px; }
.deck-name{ font-size:1.55rem;font-weight:900;color:#fff;letter-spacing:-.4px;line-height:1.05; }
.deck-sub{ font-size:12.5px;color:rgba(255,255,255,.7);margin-top:2px; }
.deck-pills{ display:flex;flex-wrap:wrap;gap:6px;margin-top:11px; }
.deck-pill{ display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);
  color:#fff;font-size:11px;font-weight:700;padding:5px 11px;border-radius:99px;backdrop-filter:blur(6px); }
.deck-pill i{ color:var(--accent); }
.deck-lang{ display:inline-flex;align-items:center;gap:5px;background:rgba(212,240,64,.16);border:1px solid rgba(212,240,64,.3);
  color:var(--accent);font-size:10.5px;font-weight:800;padding:4px 9px;border-radius:99px; }
.deck-flip-btn{ position:absolute;top:14px;right:14px;z-index:3;width:40px;height:40px;border-radius:50%;border:none;
  background:rgba(255,255,255,.92);color:#0d0d0d;display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.35);-webkit-tap-highlight-color:transparent; }
.deck-verified{ position:absolute;top:14px;left:14px;z-index:3;display:inline-flex;align-items:center;gap:4px;
  background:rgba(37,99,235,.92);color:#fff;font-size:10px;font-weight:800;padding:5px 9px;border-radius:99px; }
/* deck action buttons */
.deck-actions{ display:flex;align-items:center;justify-content:center;gap:20px;margin-top:20px; }
.deck-act{ border:none;cursor:pointer;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;justify-content:center;
  border-radius:50%;transition:transform .12s; } .deck-act:active{ transform:scale(.9); }
.deck-act-pass{ width:58px;height:58px;background:#1c1c1c;border:1px solid rgba(255,255,255,.14);color:#ff5a5a;font-size:24px; }
.deck-act-like{ width:70px;height:70px;background:var(--accent);color:#0d0d0d;font-size:30px;box-shadow:0 0 26px rgba(212,240,64,.6); }
.deck-act-info{ width:58px;height:58px;background:#1c1c1c;border:1px solid rgba(255,255,255,.14);color:#fff;font-size:22px; }
/* deck position dots */
.deck-dots{ display:flex;gap:5px;justify-content:center;margin-top:14px; }
.deck-dots i{ width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.22);transition:all .3s; }
.deck-dots i.on{ width:20px;background:var(--accent); }

/* Wizard signature step motion */
@keyframes wzStepIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
.wz-body{animation:wzStepIn .38s cubic-bezier(.4,0,.2,1);}

/* ══════════════════════════════════════════════════════════════════════════
   SIGNATURE COMPONENTS (consolidated) — reuse everywhere for coherence
   ══════════════════════════════════════════════════════════════════════════ */
/* Full-screen dark "match layer" shell (deck, standings) */
.match-shell{position:fixed;inset:0;background:#0a0a0a;font-family:'Inter',-apple-system,sans-serif;}
.match-shell-col{display:flex;flex-direction:column;overflow:hidden;}
.match-shell-scroll{overflow-y:auto;}
.match-top{padding:max(16px,env(safe-area-inset-top,16px)) 18px 0;}

/* Branded glow card (the match CTA + rank-1 standings) */
.glow-card{display:block;text-decoration:none;position:relative;overflow:hidden;
  background:linear-gradient(120deg,#1a1d10,#0d0d0d);border:1px solid rgba(212,240,64,.28);
  border-radius:var(--r-xl);padding:16px;box-shadow:0 0 22px rgba(212,240,64,.12);}
.glow-card-ico{flex-shrink:0;width:50px;height:50px;border-radius:14px;background:var(--accent);
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 18px rgba(212,240,64,.5);
  font-size:1.45rem;color:#0d0d0d;}
.glow-card-ttl{font-size:15px;font-weight:900;color:#fff;letter-spacing:-.3px;}
.glow-card-sub{font-size:12px;color:rgba(255,255,255,.55);margin-top:2px;}

/* Dark stat tile row (standings, calendar, deck summaries) */
.gm-stats{display:flex;gap:10px;}
.gm-stat{flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  border-radius:16px;padding:13px;text-align:center;}
.gm-stat-n{font-size:1.5rem;font-weight:900;line-height:1;}
.gm-stat-l{font-size:9px;font-weight:700;color:rgba(255,255,255,.45);text-transform:uppercase;
  letter-spacing:.06em;margin-top:5px;}

/* ── Gamified quiz: segmented "energy" progress bar (chevron fill) ── */
.energy-wrap{display:flex;align-items:center;gap:9px;padding:0 4px;}
.energy-bolt{color:var(--accent);font-size:18px;flex-shrink:0;filter:drop-shadow(0 0 5px rgba(212,240,64,.6));}
.energy-track{flex:1;display:flex;gap:5px;}
.energy-seg{flex:1;height:15px;border-radius:3px;transform:skewX(-16deg);
  background:rgba(0,0,0,.09);transition:background .45s cubic-bezier(.4,0,.2,1),box-shadow .45s,transform .2s;}
.energy-seg.on{background:linear-gradient(160deg,#e6ff5a,#b6dd1e);box-shadow:0 0 9px rgba(212,240,64,.55);}
.energy-seg.pop{transform:skewX(-16deg) scaleY(1.28);}
.energy-star{color:var(--border);font-size:19px;flex-shrink:0;transition:all .45s cubic-bezier(.34,1.56,.64,1);}
.energy-star.on{color:#f5c518;filter:drop-shadow(0 0 6px rgba(245,197,24,.7));transform:scale(1.18) rotate(8deg);}
/* mini step ring (top-right of the energy row) */
.mini-ring{position:relative;width:38px;height:38px;flex-shrink:0;}
.mini-ring svg{transform:rotate(-90deg);}
.mini-ring .mt{fill:none;stroke:rgba(0,0,0,.1);}
.mini-ring .mf{fill:none;stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset .5s cubic-bezier(.4,0,.2,1);}
.mini-ring .ml{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;color:var(--ink);}

/* Skeleton shimmer (offcanvas / lazy content) */
.sk-line{background:linear-gradient(90deg,var(--surface) 25%,var(--border) 37%,var(--surface) 63%);
  background-size:400% 100%;animation:skShimmer 1.3s ease infinite;}
@keyframes skShimmer{0%{background-position:100% 0;}100%{background-position:-100% 0;}}

/* Calendar day tactile press */
.dash-day{ -webkit-tap-highlight-color:transparent; }
.dash-day:active{ transform:scale(.9); }

/* ── Mascot "Blaze" (brand asset) ── */
.mascot{position:relative;}
.mascot img{display:block;width:100%;height:100%;user-select:none;-webkit-user-drag:none;}
.mascot-idle img{animation:mFloat 3s ease-in-out infinite;transform-origin:50% 90%;}
@keyframes mFloat{0%,100%{transform:translateY(0) rotate(-1.5deg);}50%{transform:translateY(-7px) rotate(1.5deg);}}
.mascot-cheer img{animation:mCheer .7s ease-in-out infinite;transform-origin:50% 90%;}
@keyframes mCheer{0%,100%{transform:translateY(0) scale(1) rotate(-2deg);}50%{transform:translateY(-11px) scale(1.05) rotate(2deg);}}
@media (prefers-reduced-motion:reduce){.mascot-idle img,.mascot-cheer img{animation:none;}}

/* ── Design-system form fields (light in-app surfaces) ───────────────────── */
.ds-field{margin-bottom:18px;}
.ds-label{display:block;font-size:12px;font-weight:700;letter-spacing:.01em;color:var(--subtle);
  text-transform:uppercase;margin-bottom:8px;}
.ds-input,.ds-textarea{width:100%;background:var(--card);border:1.5px solid var(--border);
  border-radius:var(--r-md);padding:14px 15px;font-size:15px;font-weight:500;color:var(--near);
  font-family:inherit;transition:border-color .16s,box-shadow .16s;-webkit-appearance:none;appearance:none;}
.ds-input::placeholder,.ds-textarea::placeholder{color:var(--muted);font-weight:400;}
.ds-input:focus,.ds-textarea:focus{outline:none;border-color:var(--accent-dk);
  box-shadow:0 0 0 3px rgba(212,240,64,.18);}
.ds-textarea{resize:vertical;min-height:96px;line-height:1.5;}
.ds-hint{display:block;font-size:11.5px;color:var(--muted);margin-top:6px;}
.ds-counter{float:right;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;}

/* Avatar picker */
.ds-avatar-pick{display:flex;flex-direction:column;align-items:center;gap:12px;margin:4px 0 26px;}
.ds-avatar-ring{position:relative;width:104px;height:104px;border-radius:50%;cursor:pointer;
  border:3px solid var(--accent);box-shadow:0 6px 22px rgba(0,0,0,.10);overflow:hidden;background:var(--surface);}
.ds-avatar-ring img{width:100%;height:100%;object-fit:cover;display:block;}
.ds-avatar-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:2.4rem;color:var(--muted);background:var(--surface);}
.ds-avatar-badge{position:absolute;right:2px;bottom:2px;width:32px;height:32px;border-radius:50%;
  background:var(--accent);color:var(--near);display:flex;align-items:center;justify-content:center;
  font-size:15px;border:3px solid var(--card);box-shadow:0 2px 6px rgba(0,0,0,.18);}
.ds-avatar-hint{font-size:12px;font-weight:600;color:var(--subtle);}

/* ═══════════════════════════════════════════════════════════════════════════
   UX pass — Lucide icons, motion, profile nudges, refined controls
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Lucide icons ─────────────────────────────────────────────────────────
   Lucide renders inline SVG. Sizing from font-size (1em) keeps every existing
   `font-size:` on an icon working exactly as it did with the icon font. */
svg.lucide{width:1em;height:1em;flex:0 0 auto;vertical-align:-.125em;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.ico-fill{fill:currentColor;}                 /* "solid" variants (active nav, filled stars) */
i[data-lucide]{display:inline-block;width:1em;height:1em;}   /* pre-paint placeholder, no layout jump */

/* ── shadcn-flavoured tokens (same atmosphere, tighter execution) ───────── */
:root{
  --ring:rgba(212,240,64,.55);
  --shadow-xs:0 1px 2px rgba(16,16,14,.06);
  --shadow-sm:0 1px 3px rgba(16,16,14,.08),0 1px 2px rgba(16,16,14,.04);
  --shadow-md:0 4px 12px rgba(16,16,14,.08),0 2px 4px rgba(16,16,14,.04);
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-in:cubic-bezier(.4,0,1,1);
}
/* One consistent focus ring everywhere, instead of per-control outlines. */
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:none;box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--ring);border-radius:var(--r-sm);
}

/* ── Buttons: a touch smaller, a touch tighter, still tappable ────────────
   Apple HIG 44pt / Material 48dp / WCAG 44px — min-height stays above all three. */
.btn,button.btn,.btn-block{min-height:46px;}
.btn{padding-left:15px;padding-right:15px;border-radius:var(--r-md);
  font-size:14px;letter-spacing:-.01em;transition:transform .12s var(--ease-out),
  box-shadow .16s var(--ease-out),background .16s var(--ease-out);}
.btn-lg{padding:13px 22px;font-size:14.5px;border-radius:var(--r-md);min-height:48px;}
.btn-sm{padding:7px 13px;font-size:12px;border-radius:var(--r-sm);min-height:38px;}
.btn:active{transform:translateY(1px) scale(.995);}
.btn-accent{box-shadow:var(--shadow-sm);}
.btn-accent:hover{box-shadow:var(--shadow-md);}

/* ── Page transitions: the outgoing screen slides left, the next follows in
      from the right. Purely decorative — disabled for reduced-motion. ────── */
@keyframes pgInRight{from{transform:translate3d(100%,0,0);opacity:.6}
                     to{transform:translate3d(0,0,0);opacity:1}}
@keyframes pgOutLeft{from{transform:translate3d(0,0,0);opacity:1}
                     to{transform:translate3d(-26%,0,0);opacity:0}}
@keyframes pgInLeft{from{transform:translate3d(-26%,0,0);opacity:.6}
                    to{transform:translate3d(0,0,0);opacity:1}}
@keyframes pgOutRight{from{transform:translate3d(0,0,0);opacity:1}
                      to{transform:translate3d(100%,0,0);opacity:0}}
@keyframes riseUp{from{transform:translate3d(0,14px,0);opacity:0}
                  to{transform:translate3d(0,0,0);opacity:1}}

@media (prefers-reduced-motion: no-preference){
  .pg-enter{animation:pgInRight .30s var(--ease-out) both;}
  .pg-exit {animation:pgOutLeft .20s var(--ease-in) both;}
  .pg-enter-back{animation:pgInLeft .30s var(--ease-out) both;}
  .pg-exit-back {animation:pgOutRight .20s var(--ease-in) both;}
  /* Cards drift up as the screen settles. Short, staggered, never blocking. */
  .pg-enter .rise{animation:riseUp .34s var(--ease-out) both;}
  .pg-enter .rise:nth-child(1){animation-delay:.02s}
  .pg-enter .rise:nth-child(2){animation-delay:.06s}
  .pg-enter .rise:nth-child(3){animation-delay:.10s}
  .pg-enter .rise:nth-child(4){animation-delay:.14s}
  .pg-enter .rise:nth-child(5){animation-delay:.18s}
  .pg-enter .rise:nth-child(n+6){animation-delay:.22s}
}
/* Sheets and detail panels rise instead of appearing. */
@media (prefers-reduced-motion: no-preference){
  .slide-up{animation:riseUp .26s var(--ease-out) both;}
}

/* ── Profile-completion nudges: a graceful glow, not a red badge ──────────
   .glow-nudge  — breathing border glow on a field/row still to be filled
   .glow-ring   — circling glow, used on the avatar                          */
@keyframes glowBreathe{
  0%,100%{box-shadow:0 0 0 1.5px var(--accent),0 0 0 0 rgba(212,240,64,0);}
  50%    {box-shadow:0 0 0 1.5px var(--accent),0 0 16px 2px rgba(212,240,64,.34);}
}
@keyframes glowSpin{to{transform:rotate(1turn);}}
.glow-nudge{position:relative;border-color:var(--accent);}
@media (prefers-reduced-motion: no-preference){
  .glow-nudge{animation:glowBreathe 2.6s ease-in-out infinite;}
}
.glow-ring{position:relative;isolation:isolate;}
.glow-ring::before{content:"";position:absolute;inset:-4px;border-radius:50%;z-index:-1;
  background:conic-gradient(from 0deg,rgba(212,240,64,0) 0deg,rgba(212,240,64,0) 200deg,
             var(--accent) 300deg,rgba(212,240,64,0) 360deg);
  filter:blur(2px);}
@media (prefers-reduced-motion: no-preference){
  .glow-ring::before{animation:glowSpin 3.4s linear infinite;}
}
.nudge-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px rgba(212,240,64,.22);flex:0 0 auto;}

/* Profile completion meter */
.pc-wrap{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:14px 15px;box-shadow:var(--shadow-xs);}
.pc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px;}
.pc-title{font-size:13px;font-weight:800;color:var(--ink);letter-spacing:-.01em;}
.pc-pct{font-size:12px;font-weight:800;color:var(--accent-dk);font-variant-numeric:tabular-nums;}
.pc-bar{height:6px;background:var(--surface);border-radius:99px;overflow:hidden;}
.pc-fill{height:100%;background:linear-gradient(90deg,var(--accent-mid),var(--accent));
  border-radius:99px;transition:width .5s var(--ease-out);}
.pc-steps{display:flex;flex-direction:column;gap:2px;margin-top:11px;}
.pc-step{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:var(--r-sm);
  border:1px solid transparent;text-decoration:none;color:var(--ink);font-size:13px;font-weight:600;
  min-height:44px;transition:background .14s var(--ease-out);}
.pc-step:hover{background:var(--surface);}
.pc-step.done{color:var(--muted);font-weight:500;}
.pc-step .pc-ico{width:18px;text-align:center;color:var(--accent-dk);font-size:14px;}
.pc-step.done .pc-ico{color:var(--green);}