*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
.hidden{display:none!important;}
:root{
  --red:#e63946;--red2:#c1121f;
  --bg:#f4f1ee;--s1:#ffffff;--s2:#f9f7f5;--s3:#ede9e4;
  --border:#e0dbd4;--text:#1a1a1a;--soft:#555550;--muted:#999;
  --green:#16a34a;--gold:#d97706;
  --dark:#141414;--dark2:#1e1e1e;--dark3:#2a2a2a;
}
html,body{height:100%;font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;}

/* ── Screens ── */
.screen{display:none;min-height:100vh;flex-direction:column;}
.screen.active{display:flex;}

/* ── Nav ── */
.nav{position:sticky;top:0;z-index:100;background:rgba(20,20,20,0.97);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,0.08);padding:0 20px;height:58px;
  display:flex;align-items:center;justify-content:space-between;
  box-shadow:0 2px 20px rgba(0,0,0,0.5);}
.nav-logo{font-size:1.1rem;font-weight:900;letter-spacing:0.5px;color:#fff;}
.nav-logo span{color:var(--red);}
.nav-right{display:flex;align-items:center;gap:10px;}
.nav-btn{padding:7px 16px;border-radius:8px;font-size:0.82rem;font-weight:700;cursor:pointer;border:none;font-family:'Inter',sans-serif;}
.nav-btn-ghost{background:transparent;color:rgba(255,255,255,0.7);border:1px solid rgba(255,255,255,0.2);}
.nav-btn-ghost:hover{color:var(--text);border-color:var(--soft);}
.nav-btn-red{background:var(--red);color:#fff;}
.nav-btn-red:hover{background:var(--red2);}

/* ── Back btn ── */
.back-btn{display:flex;align-items:center;gap:6px;background:none;border:none;color:rgba(255,255,255,0.7);
  font-size:0.88rem;font-weight:600;cursor:pointer;padding:0;font-family:'Inter',sans-serif;}
.back-btn:hover{color:#fff;}

/* ── Hero ── */
.hero{padding:60px 20px 48px;text-align:center;max-width:560px;margin:0 auto;}
.hero-tag{display:inline-block;background:rgba(230,57,70,0.15);color:var(--red);
  font-size:0.75rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  padding:5px 14px;border-radius:20px;margin-bottom:20px;}
.hero h1{font-size:clamp(2.2rem,8vw,3.8rem);font-weight:900;line-height:1.05;letter-spacing:-1px;margin-bottom:16px;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,0.4);}
.hero h1 span{color:var(--red);}
.hero p{font-size:1rem;color:var(--soft);line-height:1.6;margin-bottom:32px;max-width:400px;margin-left:auto;margin-right:auto;}
.hero-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border-radius:10px;font-size:0.95rem;font-weight:700;
  cursor:pointer;border:none;font-family:'Inter',sans-serif;transition:all .15s;text-decoration:none;
  pointer-events:auto;position:relative;}
.btn:active{transform:scale(0.97);}
.btn-primary{background:var(--red);color:#fff;}
.btn-primary:hover{background:var(--red2);}
.btn-outline{background:transparent;color:var(--text);border:1.5px solid var(--border);}
.btn-outline:hover{border-color:var(--soft);}
.btn-lg{padding:16px 36px;font-size:1rem;border-radius:12px;width:100%;display:flex !important;align-items:center;justify-content:center;min-height:52px;position:relative;z-index:10;}
.btn-green{background:var(--green);color:#fff;}
.btn-green:hover{opacity:0.88;}
.btn-ghost{background:var(--s2);color:var(--text);border:1px solid var(--border);}
.btn-ghost:hover{background:var(--s3);}
.btn-disabled{opacity:0.4;cursor:not-allowed;pointer-events:none;}

/* ── Section ── */
.section{padding:40px 20px 90px;max-width:640px;margin:0 auto;width:100%;}
.section-title{font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;
  color:var(--muted);margin-bottom:20px;}
.section-h{font-size:1.5rem;font-weight:800;margin-bottom:8px;}
.section-sub{font-size:0.9rem;color:var(--soft);margin-bottom:24px;line-height:1.5;}

/* ── Class cards ── */
.class-grid{display:flex;flex-direction:column;gap:10px;margin-bottom:32px;}
.class-card{background:#fff;border:1.5px solid var(--border);border-radius:14px;
  padding:16px 18px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:all .15s;
  box-shadow:0 2px 8px rgba(0,0,0,0.06);}
.class-card:hover,.class-card.selected{border-color:var(--red);background:rgba(230,57,70,0.06);}
.class-card.full{opacity:0.45;cursor:not-allowed;pointer-events:none;}
.class-day{font-size:0.7rem;font-weight:800;text-transform:uppercase;letter-spacing:0.8px;
  padding:4px 10px;border-radius:6px;flex-shrink:0;}
.day-tue{background:rgba(59,130,246,0.15);color:#60a5fa;}
.day-wed{background:rgba(168,85,247,0.15);color:#c084fc;}
.day-sat{background:rgba(245,158,11,0.15);color:#f59e0b;}
.day-other{background:rgba(100,116,139,0.15);color:#94a3b8;}
.class-info{flex:1;}
.class-date{font-size:0.95rem;font-weight:700;}
.class-time{font-size:0.8rem;color:var(--soft);margin-top:2px;}
.class-spots{font-size:0.78rem;font-weight:600;flex-shrink:0;}
.spots-ok{color:var(--green);}
.spots-low{color:var(--gold);}
.spots-full{color:var(--muted);}
.class-check{width:22px;height:22px;border-radius:50%;border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;}
.class-card.selected .class-check{background:var(--red);border-color:var(--red);}

/* ── Pricing cards ── */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:32px;}
@media(max-width:500px){.pricing-grid{grid-template-columns:1fr;}}
.price-card{background:#fff;border:1.5px solid var(--border);border-radius:14px;padding:20px 16px;text-align:center;transition:transform .15s,box-shadow .15s;box-shadow:0 2px 12px rgba(0,0,0,0.07);}
.price-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.3);}
.price-card.featured{border-color:var(--red);background:rgba(230,57,70,0.08);box-shadow:0 0 0 1px rgba(230,57,70,0.2);}
.price-tag-label{font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:8px;}
.price-amount{font-size:2rem;font-weight:900;line-height:1;margin-bottom:4px;}
.price-amount span{font-size:1rem;font-weight:500;color:var(--soft);}
.price-name{font-size:0.82rem;font-weight:700;margin-bottom:6px;}
.price-desc{font-size:0.75rem;color:var(--muted);line-height:1.4;}
.price-badge{display:inline-block;background:var(--red);color:#fff;font-size:0.65rem;font-weight:800;
  text-transform:uppercase;letter-spacing:0.5px;padding:2px 8px;border-radius:4px;margin-bottom:8px;}

/* ── How it works ── */
.steps{display:flex;flex-direction:column;gap:16px;margin-bottom:32px;}
.step-item{display:flex;gap:16px;align-items:flex-start;}
.step-num{width:36px;height:36px;border-radius:50%;background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:0.88rem;font-weight:800;flex-shrink:0;}
.step-text h4{font-size:0.95rem;font-weight:700;margin-bottom:3px;}
.step-text p{font-size:0.83rem;color:var(--soft);line-height:1.5;}

/* ── Option cards (booking type selection) ── */
.option-grid{display:flex;flex-direction:column;gap:12px;}
.option-card{background:#fff;border:1.5px solid var(--border);border-radius:16px;
  padding:20px;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:16px;
  box-shadow:0 2px 12px rgba(0,0,0,0.07);}
.option-card:hover{border-color:var(--red);background:rgba(230,57,70,0.05);box-shadow:0 4px 16px rgba(0,0,0,0.35);}
.option-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;font-size:1.4rem;flex-shrink:0;}
.option-body{flex:1;}
.option-body h3{font-size:1rem;font-weight:700;margin-bottom:3px;}
.option-body p{font-size:0.82rem;color:var(--soft);line-height:1.4;}
.option-price{font-size:1.2rem;font-weight:800;color:var(--red);flex-shrink:0;}
.option-arrow{color:var(--muted);font-size:1rem;}

/* ── Input ── */
.field{margin-bottom:18px;}
.field label{display:block;font-size:0.82rem;font-weight:600;color:var(--soft);margin-bottom:7px;}
.field input{width:100%;padding:13px 16px;background:#fff;border:1.5px solid var(--border);
  border-radius:10px;color:var(--text);font-size:0.95rem;font-family:'Inter',sans-serif;outline:none;transition:border-color .15s;
  box-shadow:0 1px 4px rgba(0,0,0,0.06);}
.field input:focus{border-color:var(--red);}
.field input::placeholder{color:var(--muted);}
.field .hint{font-size:0.76rem;color:var(--muted);margin-top:5px;}
.field-error{border-color:var(--red) !important;}
.error-msg{font-size:0.78rem;color:var(--red);margin-top:5px;}

/* ── Voucher input ── */
.voucher-box{background:#fff;border:2px dashed var(--border);border-radius:16px;padding:28px 20px;text-align:center;margin-bottom:24px;}
.voucher-box h3{font-size:1.1rem;font-weight:800;margin-bottom:8px;}
.voucher-box p{font-size:0.85rem;color:var(--soft);margin-bottom:20px;}
.voucher-input-row{display:flex;gap:10px;}
.voucher-input{flex:1;padding:13px 16px;background:var(--s1);border:1.5px solid var(--border);
  border-radius:10px;color:var(--text);font-size:1rem;font-family:'Inter',monospace;
  letter-spacing:2px;text-transform:uppercase;outline:none;text-align:center;}
.voucher-input:focus{border-color:var(--red);}

/* ── Divider ── */
.divider{display:flex;align-items:center;gap:12px;margin:20px 0;}
.divider span{font-size:0.78rem;color:var(--muted);flex-shrink:0;}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border);}

/* ── Summary box ── */
.summary-box{background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px;margin-bottom:24px;box-shadow:0 2px 8px rgba(0,0,0,0.06);}
.summary-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--border);}
.summary-row:last-child{border-bottom:none;}
.summary-label{font-size:0.85rem;color:var(--soft);}
.summary-value{font-size:0.88rem;font-weight:600;}
.summary-total{font-size:1.1rem;font-weight:800;color:var(--red);}

/* ── Success ── */
.success-icon{width:80px;height:80px;border-radius:50%;background:rgba(34,197,94,0.15);
  border:2px solid var(--green);display:flex;align-items:center;justify-content:center;
  font-size:2.2rem;margin:0 auto 20px;}

/* ── Dashboard ── */
.pkg-bar{background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px;margin-bottom:12px;box-shadow:0 2px 8px rgba(0,0,0,0.06);}
.pkg-bar-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.pkg-bar-name{font-size:0.82rem;font-weight:700;color:var(--soft);}
.pkg-bar-count{font-size:1.4rem;font-weight:900;}
.pkg-bar-count span{font-size:0.85rem;font-weight:500;color:var(--soft);}
.pkg-dots{display:flex;gap:6px;margin-bottom:8px;}
.pkg-dot{flex:1;height:8px;border-radius:4px;background:var(--border);}
.pkg-dot.used{background:var(--red);}
.pkg-dot.avail{background:var(--green);}
.pkg-expiry{font-size:0.75rem;color:var(--muted);}
.pkg-expiry.soon{color:var(--gold);}

.upcoming-list{display:flex;flex-direction:column;gap:8px;}
.upcoming-item{background:#fff;border:1px solid var(--border);border-radius:12px;
  padding:14px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 2px 8px rgba(0,0,0,0.05);}
.upcoming-date-box{text-align:center;background:var(--s3);border-radius:8px;padding:6px 10px;flex-shrink:0;min-width:46px;}
.upcoming-date-box .u-day{font-size:0.62rem;font-weight:700;text-transform:uppercase;color:var(--muted);}
.upcoming-date-box .u-num{font-size:1.2rem;font-weight:800;line-height:1;}
.upcoming-info{flex:1;}
.upcoming-info h4{font-size:0.92rem;font-weight:700;}
.upcoming-info p{font-size:0.78rem;color:var(--soft);margin-top:2px;}
.upcoming-actions{display:flex;gap:8px;}
.btn-sm{padding:7px 14px;font-size:0.78rem;border-radius:7px;}

/* ── Login card ── */
.login-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:32px 24px;max-width:380px;margin:40px auto;width:100%;box-shadow:0 4px 24px rgba(0,0,0,0.08);}
.login-card h2{font-size:1.4rem;font-weight:800;margin-bottom:6px;}
.login-card p{font-size:0.85rem;color:var(--soft);margin-bottom:24px;}

/* ── Hero visual ── */
.hero-bg{position:relative;overflow:hidden;background:#0a0a0a;}
.hero-photo{position:absolute;inset:0;z-index:0;
  background-image:url('Hero.jpg.jpeg');
  background-size:cover;background-position:center 55%;
  filter:brightness(0.72) saturate(1.05) contrast(1.15);}
.hero-bg::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to bottom, rgba(10,10,10,0.1) 0%, rgba(10,10,10,0.45) 100%),
    radial-gradient(ellipse 80% 60% at 20% 40%, rgba(34,80,20,0.3) 0%, transparent 60%),
    radial-gradient(ellipse 100% 50% at 50% 0%, rgba(245,158,11,0.06) 0%, transparent 50%);
}
/* Tree silhouettes via CSS */
.hero-bg::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:200px;z-index:1;
  background:linear-gradient(to top, #0a0a0a 0%, transparent 100%);
}
.hero-trees{position:absolute;inset:0;z-index:1;opacity:0.18;overflow:hidden;}
.hero-trees svg{width:100%;height:100%;}
.hero-content{position:relative;z-index:2;}

/* Floating orbs */
.orb{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:1;}
.orb1{width:300px;height:300px;background:rgba(230,57,70,0.12);top:-80px;right:-60px;}
.orb2{width:200px;height:200px;background:rgba(34,80,20,0.25);bottom:20px;left:-40px;}
.orb3{width:150px;height:150px;background:rgba(245,158,11,0.08);top:40%;right:10%;}

/* Red diagonal accent */
.hero-accent{position:absolute;top:0;right:0;width:3px;height:100%;
  background:linear-gradient(to bottom,transparent,var(--red),transparent);opacity:0.4;z-index:2;}

/* Corner brackets */
.bracket{position:absolute;width:28px;height:28px;opacity:0.3;}
.bracket-tl{top:16px;left:16px;border-top:2px solid var(--red);border-left:2px solid var(--red);}
.bracket-tr{top:16px;right:16px;border-top:2px solid var(--red);border-right:2px solid var(--red);}
.bracket-bl{bottom:16px;left:16px;border-bottom:2px solid var(--red);border-left:2px solid var(--red);}
.bracket-br{bottom:16px;right:16px;border-bottom:2px solid var(--red);border-right:2px solid var(--red);}

/* Stamp badge */
.stamp{display:inline-block;border:2px solid var(--red);border-radius:4px;
  padding:3px 10px;font-size:0.65rem;font-weight:900;letter-spacing:2px;text-transform:uppercase;
  color:var(--red);transform:rotate(-2deg);margin-bottom:14px;}

/* Enhanced cards */
.class-card{transition:border-color .15s,background .15s,box-shadow .15s;}
.class-card:hover:not(.full){box-shadow:0 0 0 1px var(--red) inset,0 4px 16px rgba(230,57,70,0.12);}
.option-card:hover{box-shadow:0 0 0 1px var(--red) inset,0 4px 16px rgba(230,57,70,0.1);}

/* ── Sunrise special session — same card, glowing sunrise gradient ── */
.class-card-sunrise{
  background:radial-gradient(circle at 12% 88%,#fff2b0 0%,#ffd470 15%,#ffab5e 32%,#fa8a7c 52%,#fff3ea 80%)!important;
  border:2px solid #ffce86!important;
  animation:sunriseGlow 3.4s ease-in-out infinite;
}
.class-card-sunrise:hover:not(.full){box-shadow:0 0 0 2px #ffd36b inset,0 0 28px rgba(255,150,70,0.85)!important;}
.class-card-sunrise .class-date{color:#3a1200!important;}
.class-card-sunrise .class-time{color:#6a2400!important;}
.class-card-sunrise .class-spots{color:#5a1e00!important;}
.class-card-sunrise .class-day{background:rgba(255,255,255,0.45)!important;color:#7a2600!important;}
.class-card-sunrise .class-check{border-color:rgba(120,40,0,0.45)!important;}
.class-card-sunrise .option-arrow{color:#7a2600!important;}
@keyframes sunriseGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(255,210,90,0.5),0 0 14px rgba(255,150,70,0.45),0 4px 16px rgba(230,57,70,0.22);}
  50%{box-shadow:0 0 0 2px rgba(255,215,100,0.9),0 0 30px rgba(255,160,80,0.8),0 4px 22px rgba(230,57,70,0.32);}
}

/* ── TheCityGirlsLeipzig private session — pink-white fading gradient ── */
.class-card-citygirls{
  background:linear-gradient(90deg,#ffffff 0%,#ffe4ef 32%,#ffc4dd 62%,#ff9ec7 100%)!important;
  border:2px solid #ff9ec7!important;
  position:relative;
  overflow:hidden;
}
.class-card-citygirls::before{
  content:'TheCityGirlsLeipzig';
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;font-weight:900;letter-spacing:0.5px;white-space:nowrap;
  color:#d63384;opacity:0.3;   /* 70% transparent background lettering */
  pointer-events:none;z-index:0;
}
.class-card-citygirls>*{position:relative;z-index:1;}
.class-card-citygirls:hover:not(.full){box-shadow:0 0 0 2px #ff9ec7 inset,0 0 24px rgba(255,120,180,0.55)!important;}
.class-card-citygirls .class-date{color:#7a1f4d!important;}
.class-card-citygirls .class-time{color:#a12d68!important;}
.class-card-citygirls .class-spots{color:#8c2458!important;}
.class-card-citygirls .class-day{background:rgba(255,255,255,0.55)!important;color:#a12d68!important;}
.class-card-citygirls .class-check{border-color:rgba(160,40,100,0.45)!important;}
.class-card-citygirls .option-arrow{color:#a12d68!important;}

/* Section divider */
.section-divider{height:1px;background:linear-gradient(to right,transparent,var(--border),transparent);margin:0 20px;}

/* Stat strip */
.stat-strip{display:flex;justify-content:center;gap:0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:#fff;}
.stat-item{flex:1;max-width:160px;text-align:center;padding:18px 10px;border-right:1px solid var(--border);}
.stat-item:last-child{border-right:none;}
.stat-item-num{font-size:1.4rem;font-weight:900;color:var(--red);}
.stat-item-lbl{font-size:0.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.8px;margin-top:2px;}

/* ── Footer ── */
.admin-tab.active{color:var(--red)!important;border-bottom-color:var(--red)!important;}
.footer{border-top:1px solid var(--border);padding:28px 20px;text-align:center;font-size:0.78rem;color:var(--muted);margin-top:auto;background:#fff;}

/* ── Whatsapp float ── */
.wa-float{position:fixed;bottom:20px;right:20px;width:52px;height:52px;border-radius:50%;
  background:#25d366;display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;text-decoration:none;box-shadow:0 4px 14px rgba(37,211,102,0.35);z-index:200;transition:transform .2s;}
.wa-float:hover{transform:scale(1.08);}

/* ── Toast ── */
.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--s3);border:1px solid var(--border);border-radius:10px;
  padding:12px 20px;font-size:0.85rem;font-weight:600;opacity:0;transition:all .3s;z-index:300;white-space:nowrap;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast.error{border-color:var(--red);color:var(--red);}
.toast.success{border-color:var(--green);color:var(--green);}

@media(min-width:640px){
  .hero{padding:80px 20px 64px;}
  .hero h1{font-size:4rem;}
  .section{padding:56px 20px;}
  .option-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
}

/* ── Click target fixes ── */
/* All child elements inside buttons pass clicks through to parent */
button *,
.btn *,
.nav-btn *,
.back-btn *,
.copy-btn *,
.type-btn * {
  pointer-events: none;
}
/* Option cards and class cards — full area clickable */
.option-card,
.class-card,
.admin-tab,
.pkg-card {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.option-card *,
.class-card * {
  pointer-events: none;
}
/* Buttons always fill their box fully */
button,
.btn,
.nav-btn,
.back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
/* Make sure anchor buttons also fill properly */
a.btn {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Minimum touch target size for mobile (44px is Apple's guideline) */
@media (max-width: 640px) {
  button,
  .btn,
  .nav-btn {
    min-height: 44px;
  }
  .btn-sm {
    min-height: 36px;
  }
}

@media print {
  /* White page, black text — no wasted toner on backgrounds */
  :root {
    --bg:#fff; --s1:#fff; --s2:#fff; --s3:#f5f5f5;
    --border:#bbb; --text:#000; --soft:#333; --muted:#555;
    --dark:#fff; --dark2:#fff; --dark3:#f0f0f0;
  }
  html, body { background:#fff !important; color:#000 !important; }

  /* Hide things that don't belong on paper */
  .nav, .back-btn, .hero-btns, .hero-photo, .hero-trees,
  .hero-bg::before, .hero-bg::after, .hero-accent,
  .btn, button, .section-divider,
  #verify-timer, .grace-cd, [data-cancel-id], [data-reschedule-id],
  .adm-nav-btn, .adm-manage-btn { display:none !important; }

  /* Only print the active screen */
  .screen { display:none !important; }
  .screen.active { display:block !important; min-height:unset !important; }

  /* Strip dark hero, make readable */
  .hero-bg { background:#fff !important; }
  .hero h1, .hero h1 span { color:#000 !important; text-shadow:none !important; }
  .hero p, .hero-tag { color:#333 !important; background:none !important; }

  /* Strip nav bar */
  .nav { background:#fff !important; border-bottom:1px solid #ccc !important; }
  .nav-logo, .nav-logo span { color:#000 !important; }

  /* Cards & sections — white, simple border */
  .class-card, .upcoming-item, .dash-pkg-card,
  .adm-session-card, [style*="background:#"] {
    background:#fff !important;
    box-shadow:none !important;
    border-color:#bbb !important;
  }

  /* Kill colored backgrounds on badges/tags but keep text legible */
  [class*="day-"], [class*="badge"], .hero-tag,
  [style*="background:rgba"] { background:none !important; }

  /* Keep red for brand accents only; strip fill colors */
  .spots-ok, .spots-low { color:#000 !important; }

  /* Admin panels — show the active one */
  .adm-page { display:none !important; }
  .adm-page[style*="display: block"],
  .adm-page[style*="display:block"] { display:block !important; }
  .adm-manage-panel { display:none !important; }
  .adm-manage-panel.active { display:block !important; }

  /* No page break inside cards */
  .class-card, .upcoming-item, .adm-session-card { page-break-inside:avoid; }
}

@keyframes spin { to { transform: rotate(360deg); } }

      #dash-store{ margin-top:26px; }
      #dash-store .store-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
      #dash-store .store-card{ background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.06); cursor:pointer; transition:box-shadow .15s, transform .15s; }
      #dash-store .store-card:hover{ box-shadow:0 6px 18px rgba(0,0,0,0.12); transform:translateY(-2px); }
      #dash-store .store-media{ position:relative; aspect-ratio:1/1; background:#eef0f4; overflow:hidden; }
      #dash-store .store-slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .45s ease; }
      #dash-store .store-slide.on{ opacity:1; }
      #dash-store .store-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; border:none; background:rgba(255,255,255,0.92); color:#111; font-size:1.05rem; line-height:1; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,0.22); display:flex; align-items:center; justify-content:center; z-index:2; padding:0; }
      #dash-store .store-prev{ left:6px; }
      #dash-store .store-next{ right:6px; }
      #dash-store .store-dots{ position:absolute; bottom:8px; left:0; right:0; display:flex; gap:5px; justify-content:center; z-index:2; }
      #dash-store .store-dot{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.55); box-shadow:0 0 2px rgba(0,0,0,0.35); transition:background .2s; }
      #dash-store .store-dot.on{ background:#fff; }
      #dash-store .store-name{ padding:10px 12px 12px; font-size:0.85rem; font-weight:700; color:var(--text); text-align:center; }
      /* Sold-out / unavailable: greyed image, not clickable, no label text. */
      /* Sold out: image at 50% opacity, but still tappable so we can explain. */
      #dash-store .store-card.store-unavailable{ cursor:pointer; }
      #dash-store .store-card.store-unavailable .store-media{ opacity:0.5; }
      #dash-store .store-card.store-unavailable:hover{ box-shadow:0 6px 18px rgba(0,0,0,0.12); transform:translateY(-2px); }
      #dash-store .store-card.store-unavailable .store-name{ color:var(--muted); }
    

/* ══ ADMIN DARK THEME ══ */
#s-admin{background:#0f111a;color:#f1f5f9;flex-direction:column;}
.adm-header{background:linear-gradient(135deg,#1a0a0a 0%,#2d0e0e 50%,#1a0a0a 100%);border-bottom:2px solid #e63946;padding:10px 24px;display:flex;flex-wrap:wrap;align-items:center;min-height:64px;gap:16px;flex-shrink:0;}
.adm-logo{font-size:1.1rem;font-weight:800;letter-spacing:1px;color:#f1f5f9;}
.adm-logo span{color:#e63946;}
.adm-fetch-btn{background:#e63946;color:#fff;border:none;padding:8px 18px;border-radius:8px;font-weight:700;font-size:0.82rem;cursor:pointer;font-family:inherit;}
.adm-fetch-btn:hover{opacity:0.88;}
.adm-header-meta{font-size:0.8rem;color:#64748b;text-align:right;margin-left:auto;}
.adm-header-meta strong{color:#94a3b8;display:block;}
.adm-nav{background:#161b27;border-bottom:1px solid #2a3448;display:flex;overflow-x:auto;flex-shrink:0;}
.adm-nav-btn{padding:14px 22px;font-size:0.88rem;font-weight:600;border:none;background:none;color:#64748b;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:color .15s;font-family:inherit;}
.adm-nav-btn.active{color:#e63946;border-bottom-color:#e63946;}
.adm-nav-btn:hover:not(.active){color:#f1f5f9;}
.adm-logout{margin-left:auto;padding:14px 22px;font-size:0.82rem;font-weight:600;border:none;background:none;color:#64748b;cursor:pointer;white-space:nowrap;font-family:inherit;}
.adm-logout:hover{color:#f1f5f9;}
.adm-body{flex:1;overflow-y:auto;}
.adm-page{display:none;padding:24px;max-width:1200px;margin:0 auto;}
.adm-page.active{display:block;}
.adm-card{background:#1d2436;border:1px solid #2a3448;border-radius:12px;padding:20px;}
.adm-card-title{font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#64748b;margin-bottom:12px;}
.adm-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;}
.adm-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:24px;}
@media(max-width:900px){.adm-grid-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.adm-grid-4,.adm-grid-2{grid-template-columns:1fr;}}
.adm-stat-card{background:#1d2436;border:1px solid #2a3448;border-radius:12px;padding:20px;}
.adm-stat-num{font-size:2rem;font-weight:800;line-height:1;margin-bottom:4px;}
.adm-stat-label{font-size:0.78rem;color:#64748b;}
.adm-stat-sub{font-size:0.75rem;color:#94a3b8;margin-top:4px;}
.adm-sec-head{font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#64748b;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid #2a3448;}
.adm-alert{background:rgba(230,57,70,0.12);border:1px solid rgba(230,57,70,0.35);border-radius:10px;padding:14px 18px;margin-bottom:20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.adm-alert-title{font-weight:700;font-size:0.88rem;color:#e63946;}
.adm-alert-tag{background:rgba(230,57,70,0.2);color:#ff8a91;border-radius:6px;padding:3px 10px;font-size:0.78rem;font-weight:600;}
.adm-pkg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-bottom:24px;}
.adm-pkg-card{background:#1d2436;border:1px solid #2a3448;border-radius:12px;padding:16px;position:relative;}
.adm-pkg-card.warn{border-color:rgba(245,158,11,0.5);background:rgba(245,158,11,0.05);}
.adm-pkg-card.danger{border-color:rgba(230,57,70,0.5);background:rgba(230,57,70,0.05);}
.adm-pkg-card.done{opacity:0.5;}
.adm-pkg-name{font-weight:700;font-size:0.92rem;margin-bottom:8px;padding-right:60px;}
.adm-pkg-dots{display:flex;gap:5px;margin-bottom:8px;}
.adm-pkg-dot{width:22px;height:22px;border-radius:50%;border:2px solid #2a3448;}
.adm-pkg-dot.used{background:#e63946;border-color:#e63946;}
.adm-pkg-dot.left{background:#22c55e;border-color:#22c55e;}
.adm-pkg-badge{position:absolute;top:14px;right:14px;font-size:0.7rem;font-weight:700;padding:3px 8px;border-radius:6px;}
.adm-pkg-badge.ok{background:rgba(34,197,94,0.15);color:#22c55e;}
.adm-pkg-badge.warn{background:rgba(245,158,11,0.15);color:#f59e0b;}
.adm-pkg-badge.danger{background:rgba(230,57,70,0.15);color:#e63946;}
.adm-pkg-badge.done,.adm-pkg-badge.expired{background:rgba(100,116,139,0.2);color:#64748b;}
.adm-pkg-meta{font-size:0.75rem;color:#64748b;margin-top:6px;}
.adm-pkg-expiry{font-size:0.75rem;margin-top:4px;}
.adm-pkg-expiry.near{color:#f59e0b;}.adm-pkg-expiry.over{color:#e63946;}.adm-pkg-expiry.ok{color:#64748b;}
.adm-session-list{display:flex;flex-direction:column;gap:12px;}
.adm-session-card{background:#1d2436;border:1px solid #2a3448;border-radius:12px;overflow:hidden;}
.adm-session-header{padding:14px 18px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:background .15s;}
.adm-session-header:hover{background:rgba(255,255,255,0.03);}
.adm-session-body{display:none;padding:0 18px 18px;border-top:1px solid #2a3448;}
.adm-session-card.open .adm-session-body{display:block;}
.adm-chevron{color:#64748b;font-size:0.8rem;transition:transform .2s;}
.adm-session-card.open .adm-chevron{transform:rotate(180deg);}
.adm-attendee-row{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;background:rgba(255,255,255,0.03);margin-bottom:4px;}
.adm-attendee-name{flex:1;font-size:0.88rem;color:#f1f5f9;}
.adm-attendee-pkg{font-size:0.72rem;font-weight:700;padding:2px 7px;border-radius:4px;white-space:nowrap;}
.adm-a-pkg{background:rgba(230,57,70,0.15);color:#ff8a91;}
.adm-a-trial{background:rgba(168,85,247,0.15);color:#c084fc;}
.adm-a-single{background:rgba(245,158,11,0.15);color:#f59e0b;}
.adm-attendee-price{font-size:0.82rem;color:#22c55e;font-weight:600;margin-left:auto;}
.adm-badge-tue{background:rgba(59,130,246,0.15);color:#60a5fa;font-size:0.7rem;font-weight:800;padding:3px 9px;border-radius:6px;text-transform:uppercase;letter-spacing:0.5px;}
.adm-badge-wed{background:rgba(168,85,247,0.15);color:#c084fc;font-size:0.7rem;font-weight:800;padding:3px 9px;border-radius:6px;text-transform:uppercase;letter-spacing:0.5px;}
.adm-badge-sat{background:rgba(245,158,11,0.15);color:#f59e0b;font-size:0.7rem;font-weight:800;padding:3px 9px;border-radius:6px;text-transform:uppercase;letter-spacing:0.5px;}
.adm-badge-other{background:rgba(100,116,139,0.15);color:#94a3b8;font-size:0.7rem;font-weight:800;padding:3px 9px;border-radius:6px;text-transform:uppercase;letter-spacing:0.5px;}
.adm-chart-wrap{position:relative;height:300px;}
.adm-chart-wrap-sm{position:relative;height:240px;}
.adm-manage-nav{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid #2a3448;margin-bottom:20px;}
.adm-manage-btn{padding:10px 18px;font-size:0.85rem;font-weight:700;border:none;background:none;color:#64748b;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;font-family:inherit;transition:color .15s;}
.adm-manage-btn.active{color:#e63946;border-bottom-color:#e63946;}
.adm-manage-btn:hover:not(.active){color:#f1f5f9;}
.adm-manage-panel{display:none;}.adm-manage-panel.active{display:block;}
/* Income / Expenses / All switch inside the Transactions panel */
.tx-seg{display:inline-flex;gap:4px;background:#161b27;border:1.5px solid #2a3448;border-radius:10px;padding:4px;margin-bottom:16px;}
.tx-seg-btn{padding:7px 18px;font-size:0.82rem;font-weight:800;border:none;background:none;color:#64748b;cursor:pointer;border-radius:7px;font-family:inherit;transition:background .15s,color .15s;}
.tx-seg-btn.active{background:#e63946;color:#fff;}
.tx-seg-btn:hover:not(.active){color:#f1f5f9;}
#s-admin .field label{color:#94a3b8;}
#s-admin .field input{background:#1d2436;border-color:#2a3448;color:#f1f5f9;}
#s-admin .field input::placeholder{color:#4a5568;}
#s-admin .field input:focus{border-color:#e63946;}
#s-admin select{background:#1d2436;border:1px solid #2a3448;color:#f1f5f9;border-radius:8px;padding:10px 14px;font-size:0.9rem;width:100%;font-family:inherit;}
#s-admin .section-title{color:#64748b;}
.adm-settings-block{background:#1d2436;border:1px solid #2a3448;border-radius:12px;padding:24px;margin-bottom:20px;}
.adm-settings-block h3{font-size:1rem;font-weight:700;margin-bottom:8px;color:#f1f5f9;}
.adm-settings-block p{font-size:0.87rem;color:#94a3b8;line-height:1.6;margin-bottom:14px;}
.adm-code-box{background:#0d1117;border:1px solid #2a3448;border-radius:8px;padding:16px;font-family:'Courier New',monospace;font-size:0.75rem;color:#e6edf3;overflow-x:auto;white-space:pre;max-height:240px;overflow-y:auto;line-height:1.5;}
.adm-url-input{width:100%;padding:11px 14px;background:#161b27;border:1.5px solid #2a3448;border-radius:8px;color:#f1f5f9;font-size:0.9rem;margin-bottom:10px;outline:none;font-family:inherit;}
.adm-url-input:focus{border-color:#e63946;}
.adm-btn-red{padding:10px 22px;background:#e63946;color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:700;font-size:0.88rem;font-family:inherit;}
.adm-btn-red:hover{opacity:0.88;}
.adm-copy-btn{margin-top:10px;padding:7px 16px;background:#161b27;border:1px solid #2a3448;color:#f1f5f9;border-radius:7px;cursor:pointer;font-size:0.82rem;font-weight:600;font-family:inherit;display:inline-block;}
.adm-copy-btn:hover{background:#2a3448;}
.adm-step-list{counter-reset:steps;list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:16px;}
.adm-step-list li{counter-increment:steps;display:flex;gap:12px;font-size:0.87rem;color:#94a3b8;line-height:1.5;}
.adm-step-list li::before{content:counter(steps);background:#e63946;color:#fff;border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:0.72rem;font-weight:800;flex-shrink:0;}
.adm-status-dot{width:8px;height:8px;border-radius:50%;background:#64748b;display:inline-block;margin-right:6px;}
.adm-status-dot.connected{background:#22c55e;}
#s-admin .btn{font-family:inherit;}


/* ═══════════════════════════════════════════════════════════════════════════
   TRAINING PLAN — quiz, review and published-plan styles
   ═══════════════════════════════════════════════════════════════════════════
   Lifted from boxing-program-planner-test.html (v19), lines 15-115 of the
   sandbox <style>, by a script that only rewrote selectors — 385 declarations
   in, 385 out, byte-identical after the prefix. The print / PDF-tracker /
   streak styles further down the sandbox are deliberately NOT here yet.

   EVERY selector is scoped under .plan-scope, and that is not cosmetic: the
   sandbox defines its own .btn, .btn-outline and .tag, which would otherwise
   restyle every button on the live site. .plan-scope .btn (0,2,0) beats
   app.css's .btn (0,1,0) inside the container and does nothing outside it.

   Put .plan-scope on any container that renders planner markup — today the
   member's quiz card and the admin review panel.
   ═══════════════════════════════════════════════════════════════════════════ */
  .plan-scope .planner-card{position:relative;border-radius:18px;padding:2px;margin-bottom:20px;background:linear-gradient(135deg,#f6d878,var(--gold),#f6d878);box-shadow:0 6px 24px rgba(217,119,6,0.18);animation:planner-glow 4.2s ease-in-out infinite;}
  @keyframes planner-glow{0%,100%{box-shadow:0 6px 24px rgba(217,119,6,0.18);}
    50%{box-shadow:0 6px 30px rgba(217,119,6,0.30);}}
  @media (prefers-reduced-motion: reduce){
    .plan-scope .planner-card{animation:none;}
  }
  .plan-scope .planner-card-inner{background:var(--s1);border-radius:16px;padding:24px 22px;min-height:280px;display:flex;flex-direction:column;}
  .plan-scope .planner-card-inner.is-teaser{min-height:0;}
  .plan-scope .planner-ribbon{position:absolute;top:-11px;left:18px;background:var(--gold);color:#fff;font-size:0.66rem;font-weight:800;letter-spacing:1px;padding:4px 10px;border-radius:6px;box-shadow:0 2px 6px rgba(217,119,6,0.35);}
  .plan-scope .progress-label{font-size:0.72rem;font-weight:700;color:var(--muted);letter-spacing:0.4px;margin-bottom:8px;}
  .plan-scope .progress-track{height:5px;background:var(--s3);border-radius:3px;overflow:hidden;margin-bottom:20px;}
  .plan-scope .progress-fill{height:100%;background:var(--gold);border-radius:3px;transition:width .25s ease;}
  .plan-scope .step-title{font-size:1.28rem;font-weight:900;letter-spacing:-0.2px;margin-bottom:4px;line-height:1.25;text-align:center;}
  .plan-scope .step-sub{font-size:0.85rem;color:var(--soft);margin-bottom:18px;line-height:1.5;text-align:center;}
  .plan-scope .equip-items-row{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:-8px 0 18px;}
  .plan-scope .equip-item{font-size:0.8rem;font-weight:800;color:var(--green);background:rgba(22,163,74,0.09);border:1px solid rgba(22,163,74,0.22);padding:5px 12px;border-radius:20px;}
  .plan-scope .btn{border:none;border-radius:12px;font-weight:700;cursor:pointer;font-family:inherit;font-size:0.95rem;padding:14px 20px;transition:transform .1s,box-shadow .15s,opacity .15s;}
  .plan-scope .btn:active{transform:scale(0.98);}
  .plan-scope .btn-gold{background:var(--gold);color:#fff;box-shadow:0 3px 14px rgba(217,119,6,0.35);}
  .plan-scope .btn-gold:hover{opacity:0.92;}
  .plan-scope .btn-red{background:var(--red);color:#fff;box-shadow:0 3px 14px rgba(230,57,70,0.3);}
  .plan-scope .btn-red:hover{background:var(--red2);}
  .plan-scope .btn-outline{background:transparent;border:1.5px solid var(--border);color:var(--soft);}
  .plan-scope .btn-outline:hover{border-color:var(--soft);}
  .plan-scope .btn-block{width:100%;}
  .plan-scope .btn:disabled{opacity:0.35;cursor:not-allowed;box-shadow:none;}
  .plan-scope .opt-list{display:flex;flex-direction:column;gap:10px;margin-bottom:8px;}
  .plan-scope .opt-card{display:flex;flex-direction:column;align-items:stretch;width:100%;padding:16px 18px;border:1.5px solid var(--border);border-radius:14px;background:var(--s2);cursor:pointer;font-size:0.98rem;font-weight:700;color:var(--text);transition:border-color .12s,background .12s,opacity .12s;}
  .plan-scope .opt-card:hover:not(.disabled){border-color:var(--red);}
  .plan-scope .opt-card.on{border-color:var(--red);background:rgba(230,57,70,0.07);}
  .plan-scope .opt-card.disabled{opacity:0.4;cursor:not-allowed;}
  .plan-scope .opt-card.disabled.info-open{opacity:0.75;}
  .plan-scope /* keep the sentence readable if she opens it while capped out */
  .opt-main{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;}
  .plan-scope .opt-lead{display:flex;align-items:center;gap:9px;min-width:0;}
  .plan-scope .opt-label{min-width:0;}
  .plan-scope .opt-check{width:24px;height:24px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:0.78rem;color:transparent;}
  .plan-scope .opt-card.on .opt-check{background:var(--red);border-color:var(--red);color:#fff;}
  .plan-scope .opt-info{flex-shrink:0;width:26px;height:26px;padding:0;border-radius:50%;border:none;background:var(--s3);color:var(--soft);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s,transform .18s;}
  .plan-scope .opt-info svg{transition:transform .18s ease;}
  .plan-scope .opt-info:hover{background:var(--border);color:var(--text);}
  .plan-scope .opt-info:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
  .plan-scope .opt-card.info-open .opt-info{background:var(--red);color:#fff;}
  .plan-scope .opt-card.info-open .opt-info svg{transform:rotate(180deg);}
  .plan-scope .opt-desc{display:none;font-size:0.82rem;font-weight:500;color:var(--soft);line-height:1.5;margin-top:11px;padding-top:11px;border-top:1px solid var(--border);}
  .plan-scope .opt-card.info-open .opt-desc{display:block;}
  .plan-scope .nav-row{display:flex;gap:10px;margin-top:auto;padding-top:8px;}
  .plan-scope .nav-row .btn-outline{flex:0 0 auto;padding-left:18px;padding-right:18px;}
  .plan-scope .nav-row .btn-primary-slot{flex:1;}
  .plan-scope .teaser-title{font-size:1.15rem;font-weight:900;margin:4px 0 6px;text-align:center;}
  .plan-scope .teaser-sub{font-size:0.86rem;color:var(--soft);line-height:1.55;margin-bottom:16px;text-align:center;}
  .plan-scope .pending-emoji{font-size:2.2rem;text-align:center;margin-bottom:4px;}
  .plan-scope /* ── Scroll-wheel number picker ── */
  .wheel-field{margin-bottom:22px;}
  .plan-scope .wheel-field-label{font-size:0.82rem;font-weight:700;text-align:center;margin-bottom:10px;}
  .plan-scope .wheel-wrap{display:flex;align-items:center;justify-content:center;gap:14px;}
  .plan-scope .wheel-wrap.wheel-disabled{opacity:0.32;pointer-events:none;}
  .plan-scope .wheel-arrows{display:flex;flex-direction:column;gap:8px;}
  .plan-scope .wheel-arrow{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--border);background:var(--s2);color:var(--soft);font-size:0.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit;}
  .plan-scope .wheel-arrow:hover{border-color:var(--gold);color:var(--gold);}
  .plan-scope .wheel-viewport{position:relative;width:120px;height:200px;overflow:hidden;}
  .plan-scope .wheel-highlight{position:absolute;left:0;right:0;top:80px;height:40px;background:rgba(217,119,6,0.08);border-top:1.5px solid rgba(217,119,6,0.35);border-bottom:1.5px solid rgba(217,119,6,0.35);pointer-events:none;border-radius:8px;}
  .plan-scope .wheel-scroll{position:relative;height:100%;overflow-y:auto;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .plan-scope .wheel-scroll::-webkit-scrollbar{display:none;}
  .plan-scope .wheel-spacer{height:80px;}
  .plan-scope .wheel-row{height:40px;display:flex;align-items:center;justify-content:center;scroll-snap-align:center;font-size:1.05rem;font-weight:700;color:var(--muted);cursor:pointer;}
  .plan-scope .wheel-unit{font-size:0.72rem;color:var(--muted);text-align:center;margin-top:8px;}
  .plan-scope .wheel-skip{display:block;text-align:center;font-size:0.78rem;color:var(--muted);text-decoration:underline;margin-top:10px;cursor:pointer;background:none;border:none;font-family:inherit;width:100%;}
  .plan-scope .field-input-inline{display:block;width:120px;margin:0 auto;text-align:center;font-size:1.6rem;font-weight:800;color:var(--red);border:1.5px solid var(--border);border-radius:12px;padding:14px 10px;font-family:inherit;background:var(--s2);}
  .plan-scope .field-input-inline:focus{outline:none;border-color:var(--gold);}
  .plan-scope .results-headline{font-size:1.4rem;font-weight:900;letter-spacing:-0.3px;margin:2px 0 4px;}
  .plan-scope .results-sub{font-size:0.85rem;color:var(--soft);margin-bottom:10px;}
  .plan-scope .freq-callout{background:rgba(230,57,70,0.08);border:1px solid rgba(230,57,70,0.25);border-radius:12px;padding:11px 14px;font-size:0.9rem;color:var(--text);margin-bottom:16px;text-align:center;}
  .plan-scope .freq-callout b{color:var(--red2);}
  .plan-scope .results-book-link{display:block;text-align:center;margin-top:12px;font-size:0.82rem;color:var(--soft);text-decoration:underline;}
  .plan-scope .phase-card{background:var(--s2);border:1px solid var(--border);border-radius:14px;padding:15px 16px;margin-bottom:10px;}
  .plan-scope .phase-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px;flex-wrap:wrap;}
  .plan-scope .phase-name{font-size:0.98rem;font-weight:800;}
  .plan-scope .phase-weeks{font-size:0.72rem;font-weight:700;color:#fff;background:var(--red);padding:3px 9px;border-radius:20px;white-space:nowrap;}
  .plan-scope .phase-tags{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 8px;}
  .plan-scope .tag{font-size:0.68rem;font-weight:700;color:var(--red2);background:rgba(230,57,70,0.1);padding:3px 9px;border-radius:6px;}
  .plan-scope .phase-session{font-size:0.76rem;font-weight:700;color:var(--gold);margin:0 0 8px;}
  .plan-scope .phase-note{font-size:0.82rem;color:var(--soft);line-height:1.5;}
  .plan-scope .phase-exercises{margin-top:10px;border-top:1px dashed var(--border);padding-top:10px;}
  .plan-scope .ex-item{margin-bottom:8px;}
  .plan-scope .ex-item:last-child{margin-bottom:0;}
  .plan-scope .ex-name{font-size:0.82rem;font-weight:700;color:var(--text);}
  .plan-scope .ex-dose{font-size:0.7rem;font-weight:700;color:var(--red2);background:rgba(230,57,70,0.08);padding:2px 7px;border-radius:6px;margin-left:6px;white-space:nowrap;}
  .plan-scope .ex-detail{font-size:0.78rem;color:var(--soft);line-height:1.45;margin-top:1px;}
  .plan-scope .ex-caution{font-size:0.74rem;color:#8a5100;background:rgba(217,119,6,0.1);border-radius:6px;padding:4px 8px;margin-top:4px;display:inline-block;}
  .plan-scope .keepmind-box{background:rgba(217,119,6,0.08);border:1px solid rgba(217,119,6,0.28);border-radius:12px;padding:13px 15px;margin:14px 0;font-size:0.82rem;color:#8a5100;line-height:1.6;}
  .plan-scope .keepmind-box .kb-title{font-weight:800;color:var(--gold);font-size:0.72rem;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px;}
  .plan-scope .retake{display:block;text-align:center;margin-top:14px;font-size:0.8rem;color:var(--muted);text-decoration:underline;cursor:pointer;background:none;border:none;font-family:inherit;width:100%;}


/* ═══════════════════════════════════════════════════════════════════════════
   TRAINING PLAN — printable handout (plan + weekly tracker)
   ═══════════════════════════════════════════════════════════════════════════
   The .pdf-* / .pdftbl-* rules below are lifted from the sandbox's PDF view
   (lines 234-261 of its <style>) by the same selector-rewriting script as the
   block above: 80 declarations in, 80 out, only the .plan-scope prefix added.

   Everything else here is new, and exists to solve one problem: app.css
   already has an @media print block written for the app's own screens, and it
   would fight anything we tried to print. So printing does not happen from a
   screen at all. PlanPrint builds a standalone #plan-print-root, appended
   directly to <body>, and stamps `plan-printing` on <html>; the print rules
   then hide every OTHER child of body. The :not(#plan-print-root) selector
   carries id specificity, which is what lets it beat the existing
   `.screen.active { display:block !important }` rule.
   ═══════════════════════════════════════════════════════════════════════════ */
  .plan-scope .pdf-view{position:relative;padding-right:44px;}
  .plan-scope .pdf-side-wave{position:absolute;top:0;right:0;width:26px;height:100%;pointer-events:none;}
  .plan-scope .pdf-side-wave svg{display:block;width:100%;height:100%;}
  .plan-scope .pdf-side-wave path{fill:var(--print-accent, #a21caf);opacity:0.55;}
  .plan-scope .pdf-header{display:flex;align-items:baseline;gap:10px;padding-bottom:10px;margin-bottom:14px;border-bottom:1px solid var(--border);}
  .plan-scope .pdf-header .pdf-logo{font-size:1.05rem;font-weight:800;letter-spacing:0.4px;}
  .plan-scope .pdf-header .pdf-logo span{color:var(--print-accent, #a21caf);}
  .plan-scope .pdf-title{font-size:1.2rem;font-weight:900;letter-spacing:-0.2px;margin-bottom:2px;}
  .plan-scope .pdf-sub{font-size:0.8rem;color:var(--soft);margin-bottom:16px;}
  .plan-scope .pdf-phase{margin-bottom:22px;}
  .plan-scope .pdf-phase-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:4px;flex-wrap:wrap;}
  .plan-scope .pdf-phase-name{font-size:0.92rem;font-weight:800;}
  .plan-scope .pdf-phase-weeks{font-size:0.7rem;font-weight:700;color:var(--soft);white-space:nowrap;}
  .plan-scope .pdf-phase-session{font-size:0.72rem;color:var(--soft);margin-bottom:8px;}
  .plan-scope .pdftbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .plan-scope .pdftbl{width:100%;border-collapse:collapse;font-size:0.72rem;margin-top:4px;}
  .plan-scope .pdftbl th{text-align:left;font-size:0.6rem;font-weight:800;text-transform:uppercase;letter-spacing:0.3px;color:var(--muted);padding:4px 6px;border-bottom:1.5px solid var(--border);}
  .plan-scope .pdftbl th.pdftbl-wk{text-align:center;}
  .plan-scope .pdftbl td{padding:5px 6px;border-bottom:1px solid var(--border);vertical-align:middle;}
  .plan-scope .pdftbl td.pdftbl-check{text-align:center;}
  .plan-scope .pdftbl td.pdftbl-ex{font-weight:700;}
  .plan-scope .pdftbl td.pdftbl-dose{color:var(--soft);white-space:nowrap;}
  .plan-scope .pdftbl-day-row td{padding-top:12px;padding-bottom:4px;font-size:0.66rem;font-weight:800;letter-spacing:0.4px;color:var(--text);border-bottom:1.5px solid var(--print-accent, #a21caf);}
  .plan-scope .pdftbl-box{display:inline-block;width:13px;height:13px;border:1.3px solid #999;border-radius:2px;}

/* ── the on-screen preview ── */
#plan-print-root{display:none;position:fixed;inset:0;z-index:9999;background:var(--bg);overflow:auto;-webkit-overflow-scrolling:touch;}
#plan-print-root.open{display:block;}
#plan-print-bar{position:sticky;top:0;z-index:2;display:flex;gap:10px;align-items:center;justify-content:flex-end;
  background:var(--dark);padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.1);}
#plan-print-bar .pp-who{margin-right:auto;color:#f1f5f9;font-size:0.85rem;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#plan-print-bar button{padding:8px 16px;font-size:0.82rem;font-weight:700;border-radius:8px;cursor:pointer;font-family:inherit;border:none;}
#plan-print-sheet{max-width:760px;margin:20px auto 60px;background:#fff;border:1px solid var(--border);border-radius:14px;
  padding:26px 44px 26px 24px;position:relative;color:var(--text);}
/* On screen the flourish gets a 26px lane; in print it becomes 14mm. Reserved
   padding either way, so it never sits behind the text. */
.plan-print-wave{display:block;position:absolute;top:0;right:0;width:26px;height:100%;pointer-events:none;}
.plan-print-wave svg{display:block;width:100%;height:100%;}
.plan-print-wave path{fill:var(--print-accent,#a21caf);opacity:0.55;}

/* ── The document look, applied ON SCREEN as well as on paper ──────────────
   These used to live inside @media print. They are out here now because the
   member reads this document on her phone and prints it from the same view —
   if the two looked different, the preview would be lying about the print. ── */
#plan-print-sheet .phase-card{background:none;border:1px solid var(--print-accent,#a21caf);break-inside:avoid;}
#plan-print-sheet .freq-callout,
#plan-print-sheet .keepmind-box{background:none;border-color:#ccc;}
#plan-print-sheet .keepmind-box,
#plan-print-sheet .keepmind-box .kb-title{color:#333;}
#plan-print-sheet .tag{background:none;border:1px solid #ccc;color:#333;}
#plan-print-sheet .phase-exercises{border-top:1px dashed #ccc;}
#plan-print-sheet .phase-session{color:#333;}
#plan-print-sheet .ex-dose,
#plan-print-sheet .ex-caution{background:none;border:1px solid #ccc;color:#333;}
#plan-print-sheet .phase-weeks{background:none;border:1px solid #999;color:#333;padding:2px 8px;}
.plan-print-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding-bottom:10px;margin-bottom:16px;border-bottom:1px solid var(--border);}
.plan-print-logo{font-size:1.1rem;font-weight:800;letter-spacing:0.5px;}
.plan-print-logo span{color:var(--print-accent,#a21caf);}
.plan-print-for{font-size:0.8rem;color:var(--muted);}
.plan-print-secttl{font-size:1.2rem;font-weight:900;letter-spacing:-0.2px;margin:26px 0 2px;}
.plan-print-sectsub{font-size:0.8rem;color:var(--soft);margin-bottom:14px;}

/* ── on paper ── */
@page { margin: 18mm 16mm; }
@media print {
  /* Nothing but the handout. The :not() carries id specificity, so this beats
     app.css's `.screen.active { display:block !important }` above. */
  html.plan-printing body > *:not(#plan-print-root){display:none !important;}
  html.plan-printing #plan-print-root{display:block !important;position:static !important;inset:auto !important;
    overflow:visible !important;background:#fff !important;}
  html.plan-printing #plan-print-bar{display:none !important;}
  /* Right padding reserves a clean lane for the side wave, so it never has to
     sit behind text on a negative z-index — Chromium's PDF pipeline drops that
     when the positioned ancestor is nested more than one level deep. */
  html.plan-printing #plan-print-sheet{max-width:none;margin:0;border:none;border-radius:0;
    padding:0 18mm 0 0;background:none !important;box-shadow:none;}
  html.plan-printing .plan-print-wave{width:14mm;}

  html.plan-printing #plan-print-sheet .pdf-phase{break-inside:avoid;}
  html.plan-printing #plan-print-sheet .pdftbl-wrap{overflow:visible;}
}


/* ═══════════════════════════════════════════════════════════════════════════
   TRAINING PLAN — what a member actually sees in her profile
   ═══════════════════════════════════════════════════════════════════════════
   Not the plan. The plan is a document she opens ("Watch your plan"), styled
   exactly as it prints. Her profile shows only what changes week to week: the
   streak, this week's training, and the way in.
   ═══════════════════════════════════════════════════════════════════════════ */
.plan-scope .tl-top{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.plan-scope .tl-flame{font-size:2rem;line-height:1;filter:grayscale(1);opacity:0.4;}
.plan-scope .tl-flame.lit{filter:none;opacity:1;}
.plan-scope .tl-streaknum{font-size:1.9rem;font-weight:900;line-height:1;color:var(--muted);}
.plan-scope .tl-streaknum.lit{color:var(--gold);}
.plan-scope .tl-streaktxt{font-size:0.8rem;color:var(--soft);line-height:1.35;}
.plan-scope .tl-streaktxt b{color:var(--text);}

.plan-scope .tl-wk{font-size:0.7rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
.plan-scope .tl-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--border);}
.plan-scope .tl-row:last-of-type{border-bottom:1px solid var(--border);}
.plan-scope .tl-label{flex:1;min-width:0;font-size:0.9rem;font-weight:700;}
.plan-scope .tl-sub{font-size:0.76rem;color:var(--muted);font-weight:500;margin-top:1px;}
.plan-scope .tl-dots{display:flex;gap:5px;flex-shrink:0;}
.plan-scope .tl-dot{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--border);background:none;}
.plan-scope .tl-dot.on{background:var(--green);border-color:var(--green);}
.plan-scope .tl-dot.lesson.on{background:var(--red);border-color:var(--red);}

.plan-scope .tl-log{width:100%;margin-top:16px;padding:14px;border-radius:12px;border:none;background:var(--green);color:#fff;
  font-size:0.95rem;font-weight:800;cursor:pointer;font-family:inherit;}
.plan-scope .tl-log.done{background:none;border:1.5px solid var(--border);color:var(--soft);font-weight:700;font-size:0.85rem;padding:11px;}
.plan-scope .tl-watch{width:100%;margin-top:10px;padding:15px;border-radius:12px;border:none;
  background:var(--gold);color:#fff;font-size:1rem;font-weight:800;cursor:pointer;font-family:inherit;
  box-shadow:0 3px 14px rgba(217,119,6,0.35);}
.plan-scope .tl-watch:hover{opacity:0.92;}

.plan-scope .tl-recent{margin-top:20px;border-top:1px solid var(--border);}
.plan-scope .tl-loghead{display:flex;align-items:center;gap:10px;padding:13px 2px;cursor:pointer;}
.plan-scope .tl-logtitle{flex:1;min-width:0;font-size:0.7rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);}
.plan-scope .tl-logcount{font-size:0.76rem;font-weight:800;color:var(--soft);background:var(--s3);border-radius:20px;padding:2px 9px;}
.plan-scope .tl-logchev{width:16px;flex-shrink:0;color:var(--muted);font-size:0.7rem;transition:transform .18s;}
.plan-scope .tl-recent.open .tl-logchev{transform:rotate(180deg);}
.plan-scope .tl-logbody{display:none;max-height:260px;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px;}
.plan-scope .tl-recent.open .tl-logbody{display:block;}
.plan-scope .tl-item{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--s3);font-size:0.84rem;}
.plan-scope .tl-item:last-child{border-bottom:none;}
.plan-scope .tl-item .tl-when{flex:1;color:var(--soft);}
.plan-scope .tl-item .tl-kind{font-size:0.74rem;color:var(--muted);}
.plan-scope .tl-empty{font-size:0.82rem;color:var(--muted);padding:8px 0;}

/* the how-to list on the plan document */
#plan-print-sheet .pl-move{padding:11px 0;border-bottom:1px solid #ddd;break-inside:avoid;}
#plan-print-sheet .pl-move:last-child{border-bottom:none;}
#plan-print-sheet .pl-movehead{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:3px;}
#plan-print-sheet .pl-movename{font-size:0.92rem;font-weight:800;}
#plan-print-sheet .pl-movehow{font-size:0.85rem;color:#333;line-height:1.55;}

/* ── The tracker on a narrow phone ────────────────────────────────────────
   On a 320px screen a table with an exercise column, a dose column and up to
   five week columns leaves the names wrapping onto three lines and only WK1
   in view. Below 460px the dose moves under the name instead of owning a
   column, which buys back enough width for every week to be visible at once.
   The dose is emitted in both places by weekTableHtml; only one is ever shown. */
.plan-scope .pdftbl-dose-sm{display:none;}
@media (max-width: 460px) {
  #plan-print-sheet{padding:20px 22px 20px 14px;margin:12px auto 40px;}
  .plan-scope .pdftbl th.pdftbl-dose,
  .plan-scope .pdftbl td.pdftbl-dose{display:none;}
  .plan-scope .pdftbl-dose-sm{display:block;font-weight:600;color:var(--soft);font-size:0.66rem;margin-top:2px;white-space:nowrap;}
  .plan-scope .pdftbl{font-size:0.7rem;}
  .plan-scope .pdftbl th,
  .plan-scope .pdftbl td{padding:5px 3px;}
  .plan-scope .pdftbl td.pdftbl-check,
  .plan-scope .pdftbl th.pdftbl-wk{padding-left:2px;padding-right:2px;}
  .plan-scope .plan-print-head{gap:4px;}
  .plan-scope .plan-print-secttl{font-size:1.05rem;}
}
/* Printing is never narrow — undo all of it on paper. */
@media print {
  html.plan-printing .pdftbl-dose-sm{display:none !important;}
  html.plan-printing .pdftbl th.pdftbl-dose,
  html.plan-printing .pdftbl td.pdftbl-dose{display:table-cell !important;}
}

/* At 320px a five-week phase overran its box by 4px. Tighten the tick columns
   just on the smallest phones so every week fits without sideways scrolling. */
@media (max-width: 360px) {
  .plan-scope .pdftbl td.pdftbl-check,
  .plan-scope .pdftbl th.pdftbl-wk{padding-left:1px;padding-right:1px;}
  .plan-scope .pdftbl-box{width:12px;height:12px;}
  .plan-scope .pdftbl th{font-size:0.56rem;}
}