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

:root {
  --primary:         #E07300;
  --primary-dim:     #3D2010;
  --tertiary:        #C49A72;
  --secondary:       #6490B0;
  --bg:              #000000;
  --surface:         #111111;
  --surface-variant: #1C1C1C;
  --text:            #E4E4EC;
  --text-secondary:  #8890A4;
  --border:          #2A2A2A;
  --border-focus:    rgba(224,115,0,0.4);
  --navbar-h:        56px;
  --tabbar-h:        44px;
}

html, body { height: 100%; background: var(--bg); color: var(--text); font-family: 'Inter', sans-serif; }

/* ── Background decoration ───────────────────────────────────── */
@keyframes gridFade { from { opacity: 0; } to { opacity: 1; } }
.bg-grid {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
  animation: gridFade 1.2s ease both;
}
.glow {
  position: fixed; top: 30%; left: 50%; transform: translate(-50%, -50%);
  width: 600px; height: 400px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(224,115,0,0.15) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}

/* ── Interactive landing FX (mouse-driven) ───────────────────── */
/* Container holds the --spot-x / --spot-y cursor coords (set via JS);
   children inherit them through CSS custom property cascade. */
.landing-fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* Soft orange spotlight that trails the cursor. */
.fx-spotlight {
  position: absolute; inset: 0;
  background: radial-gradient(360px circle at var(--spot-x, 50%) var(--spot-y, 30%),
              rgba(224,115,0,0.16), transparent 65%);
}

/* A brighter grid layer revealed only in a halo around the cursor —
   makes the lattice "ignite" as the pointer moves. */
.fx-grid {
  position: absolute; inset: 0; opacity: 0.55;
  background-image:
    linear-gradient(rgba(224,115,0,0.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(224,115,0,0.55) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(180px circle at var(--spot-x, 50%) var(--spot-y, 50%), #000 0%, transparent 70%);
  mask-image: radial-gradient(180px circle at var(--spot-x, 50%) var(--spot-y, 50%), #000 0%, transparent 70%);
}

/* Two slow-drifting colour blobs for ambient depth. */
.fx-aurora::before, .fx-aurora::after {
  content: ''; position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: 0.45;
}
.fx-aurora::before {
  width: 480px; height: 480px; top: -120px; left: -80px;
  background: radial-gradient(circle, rgba(224,115,0,0.45), transparent 70%);
  animation: drift1 18s ease-in-out infinite;
}
.fx-aurora::after {
  width: 420px; height: 420px; bottom: -140px; right: -60px;
  background: radial-gradient(circle, rgba(100,144,176,0.35), transparent 70%);
  animation: drift2 22s ease-in-out infinite;
}
@keyframes drift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(120px, 80px) scale(1.15); }
}
@keyframes drift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-100px, -60px) scale(1.1); }
}

/* ── Shared tags ─────────────────────────────────────────────── */
.tag {
  font-size: 11px; font-weight: 500; border-radius: 6px;
  padding: 3px 8px; white-space: nowrap;
}
.tag-muscle   { background: rgba(224,115,0,0.12); color: #E07300; }
.tag-equip    { background: rgba(100,144,176,0.12); color: #6490B0; }
.tag-cat      { background: rgba(196,154,114,0.12); color: #C49A72; }

/* ── Spinner ─────────────────────────────────────────────────── */
.spinner-wrap { display: flex; align-items: center; justify-content: center; padding: 80px 24px; }
.spinner-full { min-height: 100vh; }
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  width: 36px; height: 36px; border: 3px solid var(--border);
  border-top-color: var(--primary); border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* ── Error / Empty ───────────────────────────────────────────── */
.error-banner {
  margin: 20px 24px; background: rgba(224,86,114,0.1);
  border: 1px solid rgba(224,86,114,0.3); color: #E05672;
  border-radius: 10px; padding: 14px 16px; font-size: 13px;
}
.empty-state {
  padding: 60px 24px; text-align: center; color: var(--text-secondary);
}
.empty-state p { font-size: 15px; font-weight: 600; margin-bottom: 6px; color: var(--text); }
.empty-state span { font-size: 13px; }

/* ── Landing ─────────────────────────────────────────────────── */
.landing-wrap {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 24px;
  position: relative; z-index: 1;
}

/* Entrance stage: owns the load-in fade/rise so the card's own
   transform stays free for the live cursor tilt. */
.card-stage {
  position: relative; z-index: 2; max-width: 480px; width: 100%;
  perspective: 1100px;
  opacity: 0; transform: translateY(28px);
  animation: stageIn 0.9s cubic-bezier(.18,.7,.2,1) 0.05s forwards;
}
@keyframes stageIn {
  to { opacity: 1; transform: translateY(0); }
}

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; padding: 48px 40px; width: 100%;
  text-align: center; position: relative;
  box-shadow: 0 0 0 1px rgba(224,115,0,0.08), 0 32px 64px rgba(0,0,0,0.6);
  /* Live tilt driven by --rx / --ry (set via JS on mousemove). */
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(.18,.7,.2,1);
  will-change: transform;
}
/* Glare highlight that follows the cursor across the card face. */
.card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0; transition: opacity 0.35s;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 0%),
              rgba(255,255,255,0.07), transparent 55%);
}
.card-stage:hover .card::before { opacity: 1; }

.logo-wrap { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 32px; }
.logo-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, #FF8A1E, var(--primary) 60%, #B85A00);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 900; color: #fff; flex-shrink: 0;
  box-shadow: 0 8px 22px rgba(224,115,0,0.45), inset 0 1px 0 rgba(255,255,255,0.25);
  animation: logoFloat 5s ease-in-out infinite;
}
@keyframes logoFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-4px) rotate(-2deg); }
}
.logo-name { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--primary-dim); color: var(--primary);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px;
  border: 1px solid rgba(224,115,0,0.25); border-radius: 999px; padding: 4px 12px;
  margin-bottom: 20px;
}
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
h1 {
  font-family: 'Anton', 'Inter', sans-serif; font-weight: 400;
  font-size: clamp(34px, 7vw, 50px); letter-spacing: 0.5px;
  text-transform: uppercase; line-height: 0.98; margin-bottom: 16px;
}
h1 span { color: var(--primary); text-shadow: 0 0 32px rgba(224,115,0,0.4); }
.desc { font-size: 15px; line-height: 1.65; color: var(--text-secondary); margin-bottom: 32px; }

/* ── Staggered entrance reveals for card content ─────────────── */
.reveal { opacity: 0; transform: translateY(16px); animation: revealUp 0.7s cubic-bezier(.18,.7,.2,1) forwards; }
@keyframes revealUp { to { opacity: 1; transform: translateY(0); } }
.reveal.d1 { animation-delay: 0.30s; }
.reveal.d2 { animation-delay: 0.40s; }
.reveal.d3 { animation-delay: 0.50s; }
.reveal.d4 { animation-delay: 0.60s; }
.reveal.d5 { animation-delay: 0.70s; }
.reveal.d6 { animation-delay: 0.80s; }
.reveal.d7 { animation-delay: 0.90s; }

/* Honour users who prefer reduced motion: drop all landing motion. */
@media (prefers-reduced-motion: reduce) {
  .card-stage, .reveal, .logo-icon,
  .fx-aurora::before, .fx-aurora::after, .badge-dot,
  .waitlist-zone, .waitlist-btn, .waitlist-btn::before {
    animation: none !important;
  }
  .card-stage, .reveal { opacity: 1 !important; transform: none !important; }
  .card { transition: none !important; }
}
.features { list-style: none; text-align: left; display: flex; flex-direction: column; gap: 10px; margin-bottom: 36px; }
.features li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-secondary); }
.check {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(224,115,0,0.12); color: var(--primary);
  display: flex; align-items: center; justify-content: center; font-size: 11px;
}
.login-link { margin-top: 24px; font-size: 13px; color: var(--text-secondary); }
.login-link button {
  background: none; border: none; color: var(--tertiary); font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 600; cursor: pointer; padding: 0;
  text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color 0.2s;
}
.login-link button:hover { text-decoration-color: var(--tertiary); }

/* ── Waitlist ─────────────────────────────────────────────────── */
/* The whole signup is wrapped in a raised, gently breathing panel so
   it reads as the primary action on the page. */
.waitlist-zone {
  position: relative;
  background: rgba(224,115,0,0.06);
  border: 1px solid rgba(224,115,0,0.28);
  border-radius: 14px; padding: 18px;
  display: flex; flex-direction: column; gap: 14px;
  animation: zoneGlow 3.4s ease-in-out infinite;
}
@keyframes zoneGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(224,115,0,0.05), 0 0 0 rgba(224,115,0,0); }
  50%      { box-shadow: 0 0 0 1px rgba(224,115,0,0.20), 0 0 30px rgba(224,115,0,0.22); }
}
/* Promo now sits inside the zone, so it drops its own box styling. */
.waitlist-promo { text-align: left; }
.waitlist-promo-title {
  font-size: 13px; font-weight: 700; color: var(--primary); margin-bottom: 6px;
}
.waitlist-promo p {
  font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin: 0;
}
.waitlist-promo strong { color: var(--text); font-weight: 600; }
.waitlist-form { display: flex; flex-direction: column; gap: 10px; }
.waitlist-row { display: flex; gap: 8px; }
.waitlist-input {
  flex: 1; background: var(--surface-variant); border: 1px solid var(--border);
  color: var(--text); font-family: 'Inter', sans-serif; font-size: 14px;
  border-radius: 10px; padding: 11px 14px; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.waitlist-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--border-focus); }
.waitlist-input::placeholder { color: var(--text-secondary); }
.waitlist-btn {
  position: relative; overflow: hidden;
  background: var(--primary); color: #fff; border: none;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700;
  border-radius: 10px; padding: 11px 20px; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(224,115,0,0.3);
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
  animation: btnPulse 2.8s ease-in-out infinite;
}
/* Breathing halo — rhythmically draws the eye to the CTA. */
@keyframes btnPulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(224,115,0,0.28); }
  50%      { box-shadow: 0 6px 28px rgba(224,115,0,0.55); }
}
/* Light sweep that periodically crosses the button face. */
.waitlist-btn::before {
  content: ''; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-18deg);
  animation: btnShine 3.6s ease-in-out infinite;
}
@keyframes btnShine {
  0%   { left: -60%; }
  30%  { left: 130%; }
  100% { left: 130%; }
}
.wl-label { position: relative; z-index: 1; display: inline-flex; align-items: center; }
.wl-arrow { display: inline-block; margin-left: 7px; transition: transform 0.25s; }
.waitlist-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 9px 30px rgba(224,115,0,0.6); }
.waitlist-btn:hover:not(:disabled) .wl-arrow { transform: translateX(4px); }
.waitlist-btn:disabled { opacity: 0.5; cursor: default; animation: none; }
.waitlist-btn:disabled::before { display: none; }
.waitlist-success {
  background: rgba(60,180,100,0.1); border: 1px solid rgba(60,180,100,0.3);
  color: #4CAF7D; border-radius: 10px; padding: 14px 16px;
  font-size: 14px; font-weight: 600; text-align: center;
}
.waitlist-success span { display: block; font-size: 12px; font-weight: 400; color: #4CAF7D; opacity: 0.85; margin-top: 4px; }
.waitlist-error {
  font-size: 12px; color: #E05672; text-align: left; margin-top: -4px;
}

/* ── Login ───────────────────────────────────────────────────── */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; position: relative; z-index: 1;
}
.login-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; padding: 40px; width: 100%; max-width: 380px;
  box-shadow: 0 0 0 1px rgba(224,115,0,0.08), 0 32px 64px rgba(0,0,0,0.6);
}
.login-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.login-logo .logo-icon { width: 36px; height: 36px; border-radius: 10px; font-size: 18px; }
.login-logo .logo-name { font-size: 20px; font-weight: 700; }
.login-card h2 { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.login-card .sub { font-size: 14px; color: var(--text-secondary); margin-bottom: 28px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; }
.field input {
  width: 100%; background: var(--surface-variant); border: 1px solid var(--border);
  color: var(--text); font-family: 'Inter', sans-serif; font-size: 14px;
  border-radius: 10px; padding: 11px 14px; outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--border-focus); }
.field input::placeholder { color: var(--text-secondary); }
.btn-primary {
  width: 100%; background: var(--primary); color: #fff; border: none;
  font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600;
  border-radius: 10px; padding: 12px; cursor: pointer; transition: opacity 0.2s; margin-top: 8px;
}
.btn-primary:hover:not(:disabled) { opacity: 0.88; }
.btn-primary:disabled { opacity: 0.45; cursor: default; }
.login-error {
  background: rgba(224,86,114,0.1); border: 1px solid rgba(224,86,114,0.3);
  color: #E05672; border-radius: 8px; padding: 10px 14px;
  font-size: 13px; margin-bottom: 16px;
}
.back-link {
  background: none; border: none; color: var(--text-secondary); font-family: 'Inter', sans-serif;
  font-size: 13px; cursor: pointer; padding: 0; margin-top: 20px;
  display: block; width: 100%; text-align: center; transition: color 0.2s;
}
.back-link:hover { color: var(--text); }

/* ── Library: chrome ─────────────────────────────────────────── */
.library-wrap { min-height: 100vh; display: flex; flex-direction: column; position: relative; z-index: 1; }

.navbar {
  position: sticky; top: 0; z-index: 20;
  height: var(--navbar-h);
  background: rgba(0,0,0,0.88); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; padding: 0 24px;
}
.navbar-left { display: flex; align-items: center; gap: 10px; }
.navbar-left .logo-icon { width: 32px; height: 32px; border-radius: 8px; font-size: 16px; }
.navbar-left .logo-name { font-size: 18px; font-weight: 700; }
.navbar-right { display: flex; align-items: center; gap: 12px; }
.user-email { font-size: 13px; color: var(--text-secondary); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-signout {
  background: var(--surface-variant); border: 1px solid var(--border);
  color: var(--text-secondary); font-family: 'Inter', sans-serif; font-size: 13px;
  font-weight: 500; border-radius: 8px; padding: 6px 12px; cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.btn-signout:hover { color: var(--text); border-color: var(--text-secondary); }

.tab-bar {
  position: sticky; top: var(--navbar-h); z-index: 19;
  background: rgba(0,0,0,0.88); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  display: flex; padding: 0 24px; height: var(--tabbar-h);
}
.tab-btn {
  padding: 0 4px; margin-right: 20px; font-size: 14px; font-weight: 500;
  color: var(--text-secondary); border: none; background: none;
  font-family: 'Inter', sans-serif; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

/* ── Exercises tab ───────────────────────────────────────────── */
.lib-controls { padding: 20px 24px 0; display: flex; flex-direction: column; gap: 12px; }
.lib-title { font-size: 22px; font-weight: 800; letter-spacing: -0.3px; }
.lib-title span { color: var(--text-secondary); font-size: 14px; font-weight: 400; margin-left: 8px; }
.search-bar {
  width: 100%; background: var(--surface); border: 1px solid var(--border);
  color: var(--text); font-family: 'Inter', sans-serif; font-size: 14px;
  border-radius: 10px; padding: 10px 14px; outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.search-bar:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--border-focus); }
.search-bar::placeholder { color: var(--text-secondary); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-select {
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  font-family: 'Inter', sans-serif; font-size: 13px; border-radius: 8px;
  padding: 6px 28px 6px 10px; outline: none; cursor: pointer; transition: border-color 0.2s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238890A4' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}
.filter-select:focus { border-color: var(--primary); }
.filter-select.active { border-color: var(--primary); color: var(--primary); background-color: var(--primary-dim); }
.clear-btn {
  background: none; border: 1px solid var(--border); color: var(--text-secondary);
  font-family: 'Inter', sans-serif; font-size: 13px; border-radius: 8px;
  padding: 6px 12px; cursor: pointer; transition: color 0.2s;
}
.clear-btn:hover { color: var(--text); }
.lib-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px; padding: 16px 24px 24px;
}
.ex-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px; transition: border-color 0.2s, transform 0.15s;
}
.ex-card:hover { border-color: rgba(224,115,0,0.3); transform: translateY(-1px); }
.ex-name { font-size: 14px; font-weight: 600; margin-bottom: 10px; line-height: 1.3; }
.ex-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.lib-footer { padding: 0 24px 32px; display: flex; align-items: center; justify-content: space-between; }
.lib-footer span { font-size: 13px; color: var(--text-secondary); }
.btn-more {
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500;
  border-radius: 10px; padding: 9px 20px; cursor: pointer; transition: border-color 0.2s, color 0.2s;
}
.btn-more:hover { border-color: var(--primary); color: var(--primary); }

/* ── Programs tab: list ──────────────────────────────────────── */
.prog-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px; padding: 20px 24px;
}
.prog-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 20px 20px 16px; cursor: pointer;
  transition: border-color 0.2s, transform 0.15s; text-align: left;
  display: flex; flex-direction: column; gap: 10px;
}
.prog-card:hover { border-color: rgba(224,115,0,0.35); transform: translateY(-1px); }
.prog-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.prog-title { font-size: 15px; font-weight: 700; line-height: 1.3; }
.prog-arrow { color: var(--text-secondary); font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.prog-desc {
  font-size: 13px; color: var(--text-secondary); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.prog-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── Programs tab: detail views ──────────────────────────────── */
.detail-wrap { padding: 20px 24px 40px; max-width: 700px; }

.back-nav {
  background: none; border: none; color: var(--text-secondary);
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500;
  cursor: pointer; padding: 0; margin-bottom: 20px;
  display: inline-flex; align-items: center; gap: 4px; transition: color 0.2s;
}
.back-nav:hover { color: var(--text); }

.detail-header { margin-bottom: 28px; }
.detail-sup {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1.1px; color: var(--text-secondary); margin-bottom: 8px;
}
.detail-title { font-size: 26px; font-weight: 800; letter-spacing: -0.3px; margin-bottom: 8px; line-height: 1.2; }
.detail-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin-top: 6px; }
.detail-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

.week-section { margin-bottom: 24px; }
.week-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1.1px; color: var(--text-secondary); margin-bottom: 10px;
}
.days-list { display: flex; flex-direction: column; gap: 8px; }
.day-btn {
  width: 100%; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px; cursor: pointer; font-family: 'Inter', sans-serif;
  display: flex; align-items: center; justify-content: space-between;
  transition: border-color 0.2s, background 0.15s; text-align: left;
}
.day-btn:hover { border-color: rgba(224,115,0,0.3); background: rgba(224,115,0,0.03); }
.day-btn-left { display: flex; flex-direction: column; gap: 3px; }
.day-name { font-size: 14px; font-weight: 600; color: var(--text); }
.day-meta { font-size: 12px; color: var(--text-secondary); }
.day-arrow { color: var(--text-secondary); font-size: 16px; }

.ex-list { display: flex; flex-direction: column; gap: 8px; }
.ex-row {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
}
.superset-marker {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  color: var(--primary); padding: 6px 16px 0; display: flex; align-items: center; gap: 6px;
}
.superset-line { flex: 1; height: 1px; background: rgba(224,115,0,0.2); }
.ex-row-inner {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 14px 16px; gap: 12px;
}
.ex-row-left { flex: 1; min-width: 0; }
.ex-row-name { font-size: 14px; font-weight: 600; margin-bottom: 7px; }
.ex-row-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.ex-row-note { font-size: 12px; color: var(--text-secondary); margin-top: 6px; font-style: italic; line-height: 1.4; }
.ex-row-right { text-align: right; flex-shrink: 0; }
.ex-row-sets { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; }
.ex-row-rest { font-size: 12px; color: var(--text-secondary); margin-top: 3px; white-space: nowrap; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 520px) {
  .card { padding: 36px 24px; }
  h1 { font-size: 24px; }
  .navbar, .tab-bar { padding: 0 16px; }
  .lib-controls, .detail-wrap { padding-left: 16px; padding-right: 16px; }
  .lib-grid, .prog-list { padding: 12px 16px 24px; grid-template-columns: 1fr; }
  .lib-footer { padding: 0 16px 24px; }
  .user-email { display: none; }
  .ex-row-sets { font-size: 13px; }
  /* Stack the email input and button so the button can't overflow the card */
  .waitlist-row { flex-direction: column; }
  .waitlist-btn { width: 100%; text-align: center; }
}