/* ==========================================================================
   SUPERHOLIC LAB — Design System v3.0 (Light Professional Theme)
   ECC Framework: Engagement · Clarity · Consistency
   Architecture: Mathematical Constraints, 8-Point Grid, Semantic Tokens
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Bebas+Neue&display=swap');

/* ──────────────────────────────────────────────────────────────────────────
   1. DESIGN TOKENS (:root)
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* -- TYPOGRAPHY -- */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  
  --text-xs:   0.75rem;  /* 12px */
  --text-sm:   0.875rem; /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg:   1.125rem; /* 18px */
  --text-xl:   1.25rem;  /* 20px */
  --text-2xl:  1.5rem;   /* 24px */
  --text-3xl:  2.5rem;   /* 40px */
  --text-4xl:  3.5rem;   /* 56px */

  /* -- SPACING (8-Point Grid) -- */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 1rem;     /* 16px */
  --space-4: 1.5rem;   /* 24px */
  --space-5: 2rem;     /* 32px */
  --space-6: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */
  --space-10: 5rem;    /* 80px */

  /* -- SEMANTIC COLORS (Light Theme) -- */
  --bg-page:      #F9FAFA; /* Very subtle off-white/sage tint for app background */
  --bg-surface:   #FFFFFF; /* Pure white for cards and modals */
  --bg-elevated:  #F0F4F3; /* Light sage-grey for hovers and filled inputs */
  
  --text-main:    #2C3E3A; /* Deep dark sage (almost charcoal) for primary text */
  --text-muted:   #6B7A77; /* Medium sage for secondary text/labels */
  --text-logo:    #fffde7; /* light cream for logo text */
  --border-light: #E2E8E6; /* Soft borders */
  --border-dark:  #CBD5D2; /* Stronger borders */

  /* -- BRAND ACCENTS (Original Sage Elements Restored) -- */
  --brand-sage:   #51615E; /* Primary Brand Color */
  --sage-dark:    #3A4E4A; /* Deepest Sage for Footers & Hero */
  --cream:        #F9F6F0; /* Soft readable text for dark backgrounds */
  --cream-dim:    rgba(249, 246, 240, 0.7);
  
  --brand-rose:   #B76E79; /* Primary Action / CTA */
  --brand-rose-hover: #A05D67; 
  
  --brand-mint:   #059669; /* Success */
  --brand-amber:  #D97706; /* Warning */
  --brand-error:  #DC2626; /* Danger */

  /* -- SUBJECT COLORS -- */
  --maths-colour:   #3B82F6; /* Vibrant Blue */
  --science-colour: #059669; /* Vibrant Green/Mint */
  --english-colour: #8B5CF6; /* Vibrant Purple */

  /* -- RADII & SHADOWS -- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px rgba(44, 62, 58, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(44, 62, 58, 0.08), 0 2px 4px -1px rgba(44, 62, 58, 0.04);

  --navbar-h: 64px;

}

/* ──────────────────────────────────────────────────────────────────────────
   2. RESET & BASE
   ────────────────────────────────────────────────────────────────────────── */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-page);
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  color: inherit; /* Allows text to inherit white on dark backgrounds */
  line-height: 1.2;
}

.font-display {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

a {
  color: var(--brand-rose);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--brand-rose-hover);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ──────────────────────────────────────────────────────────────────────────
   3. LAYOUT & UTILITIES
   ────────────────────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* Flexbox */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }

/* Spacing */
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }

/* Vertical Padding Utilities for Section Backgrounds */
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.py-10 { padding-top: var(--space-10); padding-bottom: var(--space-10); }

/* Section Backgrounds (Color Blocking) */
.bg-sage { background-color: var(--brand-sage); color: var(--cream); }
.bg-sage .text-muted { color: var(--cream-dim) !important; }

.bg-sage-dark { background-color: var(--sage-dark); color: var(--cream); }
.bg-sage-dark .text-muted { color: var(--cream-dim) !important; }

.bg-rose { background-color: var(--brand-rose); color: #FFFFFF; }
.bg-rose .text-muted { color: rgba(255,255,255,0.8) !important; }

.bg-white { background-color: var(--bg-surface); }
.bg-page { background-color: var(--bg-page); }

/* Typography */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.uppercase { text-transform: uppercase; }

/* Semantic Text Colors */
.text-main { color: var(--text-main); }
.text-secondary, .text-muted { color: var(--text-muted); }
.text-danger, .text-error { color: var(--brand-error); }
.text-success { color: var(--brand-mint); }
.text-amber { color: var(--brand-amber); }
.text-rose { color: var(--brand-rose); }
.text-white { color: #FFFFFF; }

/* Helpers */
.hidden { display: none !important; }
.w-full { width: 100%; }

/* ──────────────────────────────────────────────────────────────────────────
   4. MASTER COMPONENTS
   ────────────────────────────────────────────────────────────────────────── */

/* -- CARDS -- */
.card {
  background: var(--bg-surface);
  color: var(--text-main); /* Force dark text even on dark backgrounds */
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover {
  box-shadow: var(--shadow-md);
}
.card h1, .card h2, .card h3, .card h4 {
  color: var(--text-main);
}
.card .text-muted {
  color: var(--text-muted) !important;
}

/* -- BUTTONS -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 44px;
  padding: 0 var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--brand-rose);
  color: #FFFFFF;
}
.btn-primary:hover:not(:disabled) {
  background: var(--brand-rose-hover);
  color: #FFFFFF;
}

.btn-secondary {
  background: var(--bg-surface);
  color: var(--brand-sage);
  border-color: var(--border-dark);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--bg-elevated);
}

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--bg-elevated);
  color: var(--text-main);
}

.btn-sm {
  height: 32px;
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
}
.btn-full {
  width: 100%;
}

/* -- BADGES -- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--bg-elevated);
  color: var(--text-main);
}
.badge-success { background: rgba(5, 150, 105, 0.1); color: var(--brand-mint); }
.badge-amber   { background: rgba(217, 119, 6, 0.1); color: var(--brand-amber); }
.badge-danger  { background: rgba(220, 38, 38, 0.1); color: var(--brand-error); }
.badge-info    { background: rgba(59, 130, 246, 0.1); color: var(--maths-colour); }

/* -- INPUTS -- */
.form-input {
  width: 100%;
  height: 44px;
  padding: 0 var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-md);
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-input:focus {
  outline: none;
  border-color: var(--brand-rose);
  box-shadow: 0 0 0 3px rgba(183, 110, 121, 0.1);
}

/* ──────────────────────────────────────────────────────────────────────────
   5. APP LAYOUT SHELL
   ────────────────────────────────────────────────────────────────────────── */

/* -- TOP NAVBAR -- */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 64px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  padding: 0 var(--space-4);
  z-index: 100;
}
.navbar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--text-main);
  letter-spacing: 0.02em;
}

/* -- MOBILE NAVBAR TOGGLE -- */
.navbar-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
}
.navbar-toggle span {
  width: 22px;
  height: 2px;
  background: var(--text-main);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.navbar-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar-toggle.is-active span:nth-child(2) { opacity: 0; }
.navbar-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -- MOBILE MENU DROPDOWN -- */
.navbar-mobile {
  position: absolute;
  top: 64px;
  left: 0;
  right: 0;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-light);
  box-shadow: var(--shadow-md);
  padding: var(--space-4);
  display: none;
  flex-direction: column;
  gap: var(--space-2);
}
.navbar-mobile.is-open {
  display: flex;
}
.navbar-mobile a {
  padding: var(--space-2) 0;
  color: var(--text-main);
  font-weight: 500;
  border-bottom: 1px solid var(--bg-elevated);
}
.navbar-mobile a:last-child {
  border-bottom: none;
}

@media (max-width: 768px) {
  .navbar-actions #auth-header-container { display: none; } /* Hide desktop login on tiny screens */
  .navbar-toggle { display: flex !important; }
}

/* -- BOTTOM NAV (Mobile) -- */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 64px;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  font-size: 0.65rem;
  font-weight: 600;
}
.bottom-nav-item svg {
  width: 24px;
  height: 24px;
  opacity: 0.7;
}
.bottom-nav-item.is-active,
.bottom-nav-item:hover {
  color: var(--brand-rose);
}
.bottom-nav-item.is-active svg {
  opacity: 1;
}

/* -- GLOBAL FOOTER NORMALISER -- */
.footer {
  background: var(--bg-page);
}
.footer.bg-sage-dark {
  border-top: none;
}
.footer.bg-sage-dark .footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.1);
}
.footer.bg-sage-dark a {
  color: var(--cream-dim);
}
.footer.bg-sage-dark a:hover {
  color: var(--brand-rose);
}
.footer .container {
  max-width: 800px !important;
  margin: 0 auto !important;
  padding-left: var(--space-4) !important;
  padding-right: var(--space-4) !important;
}
body.has-bottom-nav .footer {
  padding-bottom: 96px !important; 
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  border-top: 1px solid var(--border-light);
  gap: 16px;
}
.footer-bottom a {
  color: var(--text-muted);
}
.footer-bottom a:hover {
  color: var(--brand-rose);
}
@media (max-width: 640px) {
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start !important;
    text-align: left !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   6. LEGACY WIDGET OVERRIDES (Quiz/Progress specific logic)
   ────────────────────────────────────────────────────────────────────────── */
/* Progress Bar Tracks */
.quiz-progress-bar {
  width: 100%;
  height: 8px;
  background: var(--border-light);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.quiz-progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
}

/* Loading Spinners */
.spinner-sm {
  width: 24px; height: 24px;
  border: 3px solid var(--border-light);
  border-top-color: var(--brand-rose);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ──────────────────────────────────────────────────────────────────────────
   7. ADVANCED UI, TEXTURES & ANIMATIONS
   ────────────────────────────────────────────────────────────────────────── */
/* ── 1. Navbar & Footer Strict Dark Overrides ── */
.navbar.bg-sage-dark { background-color: var(--sage-dark) !important; border-bottom: 3px solid var(--brand-rose) !important; backdrop-filter: none !important; }
.footer.bg-sage-dark { background-color: var(--sage-dark) !important; }
.footer.bg-sage-dark .text-muted { color: rgba(255,255,255,0.6) !important; }
.footer.bg-sage-dark a { color: rgba(255,255,255,0.8) !important; }
.footer.bg-sage-dark a:hover { color: var(--brand-rose) !important; }

/* Fix Mobile Hamburger Menu Visibility - FORCE ON DESKTOP TOO */
.navbar-toggle { display: flex !important; }
.navbar-toggle span { background-color: #fffde7 !important; }

/* ── 2. High-Tech Hover Animations ── */
/* Springy Buttons */
.btn { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, background 0.3s ease !important; }
.btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }

/* Feature Cards Lift */
.hover-lift { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease; }
.hover-lift:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0,0,0,0.12); }

/* Pricing Banners Dramatic Lift */
.pricing-card-hover { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease; }
.pricing-card-hover:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }

/* ── 3. ECC Framework Glassmorphism Cards ── */
.ecc-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.4s ease, box-shadow 0.4s ease;
}
.ecc-card:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,0.12);
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
  border: 1px solid rgba(255,255,255,0.2);
}

/* ── 4. Premium Background Textures ── */
/* Technical Dot Matrix for Hero */
.texture-dots {
  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 24px 24px;
}
/* Architectural Blueprint Grid for Dark Sections */
.texture-grid {
  background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}
/* Subtle Engineering Grid for Light Sections */
.texture-light-grid {
  background-image: linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
  background-size: 32px 32px;
}
/* Playful Polka Dot Texture for Footer */
.texture-whimsical {
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 3px, transparent 3px),
                    radial-gradient(rgba(255, 255, 255, 0.06) 3px, transparent 3px);
  background-position: 0 0, 20px 20px;
  background-size: 40px 40px;
}

/* ── 5. Cute Pet Animations ── */
.hero-pet-track {
  width: 100%;
  height: 35px;
  position: absolute;
  bottom: 0; 
  left: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 10;
}
.walking-dog {
  position: absolute;
  bottom: -5px;
  font-size: 28px;
  animation: exploreHero 28s linear infinite;
}
@keyframes exploreHero {
  0%   { transform: translateX(-50px) scaleX(1); }
  48%  { transform: translateX(100vw) scaleX(1); }
  50%  { transform: translateX(100vw) scaleX(-1); }
  98%  { transform: translateX(-50px) scaleX(-1); }
  100% { transform: translateX(-50px) scaleX(1); }
}

.footer-pet-track {
  width: 100%;
  height: 35px;
  position: absolute;
  top: -35px; /* Sits exactly on the top edge of the footer */
  left: 0;
  overflow: hidden;
  pointer-events: none;
}
.walking-pet {
  position: absolute;
  bottom: -5px; /* Hides the bottom of the emoji slightly for a 'walking on a line' effect */
  font-size: 28px;
  animation: exploreFooter 35s linear infinite;
}
@keyframes exploreFooter {
  /* Reversed to start from the right side */
  0%   { transform: translateX(100vw) scaleX(-1); }
  48%  { transform: translateX(-50px) scaleX(-1); }
  50%  { transform: translateX(-50px) scaleX(1); }
  98%  { transform: translateX(100vw) scaleX(1); }
  100% { transform: translateX(100vw) scaleX(-1); }
}

/* ──────────────────────────────────────────────────────────────────────────
   8. BADGES & FLOATING DESKTOP NAVIGATION (CRM STYLE)
   ────────────────────────────────────────────────────────────────────────── */

/* ── Badges (If not already defined) ── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--bg-elevated);
  color: var(--text-main);
}
.badge-info    { background: rgba(59, 130, 246, 0.1); color: var(--maths-colour); }
.badge-success { background: rgba(5, 150, 105, 0.1); color: var(--brand-mint); }
.badge-amber   { background: rgba(217, 119, 6, 0.1); color: var(--brand-amber); }
.badge-danger  { background: rgba(220, 38, 38, 0.1); color: var(--brand-error); }

/* ── Floating Right Side Navigation (Desktop CRM Style) ── */
@media (min-width: 768px) {
  body.has-bottom-nav {
    padding-bottom: 0 !important;
    padding-right: 0 !important; /* Floats directly over content, no reserved space */
  }
  
  .bottom-nav {
    top: 50%; /* Vertically center on screen */
    transform: translateY(-50%);
    bottom: auto;
    left: auto;
    right: var(--space-6); /* Offset gracefully from the right edge */
    width: 72px;
    height: auto; /* Wraps tightly around the 4 icons */
    flex-direction: column;
    justify-content: center;
    padding: var(--space-4) 0;
    
    /* Premium Glassmorphism Pill Styling */
    background: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 40px; /* Perfectly rounded top and bottom */
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
  }
  
  .bottom-nav-item {
    width: 100%;
    padding: var(--space-3) 0;
    gap: 6px;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  
  .bottom-nav-item:hover {
    transform: scale(1.1); /* Subtle playful bump on hover */
  }
}

/* ── Active Icon "Light Up" Effect ── */
.bottom-nav-item.is-active {
  color: var(--brand-rose);
}
.bottom-nav-item.is-active svg {
  opacity: 1;
  /* Adds a premium glowing effect around the active SVG */
  filter: drop-shadow(0 0 8px rgba(183, 110, 121, 0.6)); 
}

/* ─── EXAM SPECIFIC STYLES ─── */
    .exam-navigator {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: var(--space-6);
    }
    .nav-pip {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-sm);
      font-size: var(--text-sm);
      font-weight: 700;
      background: var(--bg-elevated);
      color: var(--text-muted);
      border: 2px solid transparent;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .nav-pip.is-answered { background: rgba(5, 150, 105, 0.1); color: var(--brand-mint); border-color: rgba(5, 150, 105, 0.2); }
    .nav-pip.is-flagged { background: rgba(217, 119, 6, 0.1); color: var(--brand-amber); border-color: rgba(217, 119, 6, 0.4); }
    .nav-pip.is-active { border-color: var(--text-main); transform: scale(1.1); box-shadow: var(--shadow-sm); }
    
    .mcq-opt {
      display: flex;
      align-items: center;
      padding: var(--space-4);
      margin-bottom: var(--space-2);
      border: 2px solid var(--border-light);
      border-radius: var(--radius-md);
      background: var(--bg-surface);
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .mcq-opt:hover { border-color: var(--border-dark); background: var(--bg-elevated); }
    .mcq-opt.is-sel {
      border-color: var(--brand-mint);
      background: rgba(5, 150, 105, 0.05);
      box-shadow: 0 4px 12px rgba(5, 150, 105, 0.1);
    }
    .mcq-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: var(--radius-full);
      background: var(--bg-elevated);
      font-weight: bold;
      margin-right: var(--space-3);
    }
    .mcq-opt.is-sel .mcq-badge { background: var(--brand-mint); color: white; }

    /* Digital Scratchpad */
    .scratchpad-container {
      border: 2px solid var(--border-light);
      border-radius: var(--radius-md);
      background: #FFFFFF;
      position: relative;
      overflow: hidden;
      margin-top: var(--space-2);
    }
    .scratchpad-canvas {
      width: 100%;
      height: 300px;
      cursor: crosshair;
      touch-action: none; /* Prevents scrolling while drawing */
    }
    .scratchpad-tools {
      position: absolute;
      top: 8px; right: 8px;
      display: flex;
      gap: 8px;
    }

    /* Results Accordion */
    .result-item { border-left: 4px solid var(--border-light); padding-left: var(--space-4); margin-bottom: var(--space-6); }
    .result-item.c-ok { border-left-color: var(--brand-mint); }
    .result-item.c-part { border-left-color: var(--brand-amber); }
    .result-item.c-bad { border-left-color: var(--brand-error); }
    
    .timer-pill {
      background: var(--bg-surface);
      color: var(--text-main);
      padding: 6px 16px;
      border-radius: var(--radius-full);
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      box-shadow: var(--shadow-sm);
    }
    .timer-pill.danger { background: var(--brand-error); color: white; animation: pulse 1s infinite; }
    @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
/* Modal Backdrop */
    .modal-backdrop {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(44, 62, 58, 0.6);
      backdrop-filter: blur(4px);
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
    }
    .modal-backdrop.is-open {
      opacity: 1;
      pointer-events: auto;
    }
    
    /* Modal Card Animation */
    .modal-card {
      transform: translateY(20px);
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      width: 100%;
      max-width: 400px;
    }
    .modal-backdrop.is-open .modal-card {
      transform: translateY(0);
    }
/* Dojo Specific UI */
    .mcq-opt {
      display: flex;
      align-items: center;
      padding: var(--space-4);
      margin-bottom: var(--space-3);
      border: 2px solid var(--border-light);
      border-radius: var(--radius-md);
      background: var(--bg-surface);
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .mcq-opt:hover { border-color: var(--border-dark); background: var(--bg-elevated); transform: scale(1.01); }
    .mcq-opt.is-sel {
      border-color: var(--brand-mint);
      background: rgba(5, 150, 105, 0.05);
      transform: scale(0.98); 
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
    }
    .mcq-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: var(--radius-full);
      background: var(--bg-elevated);
      font-weight: bold;
      margin-right: var(--space-4);
      transition: all 0.2s ease;
    }
    .mcq-opt.is-sel .mcq-badge { background: var(--brand-mint); color: white; }

    .scratchpad-container {
      border: 2px solid var(--border-light);
      border-radius: var(--radius-md);
      background: #FFFFFF;
      position: relative;
      overflow: hidden;
      margin-top: var(--space-4);
    }
    .scratchpad-canvas {
      width: 100%;
      height: 300px;
      cursor: crosshair;
      touch-action: none;
    }
    
    .feedback-panel {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height 0.4s ease, opacity 0.4s ease, margin 0.4s ease;
    }
    .feedback-panel.is-open {
      max-height: 500px;
      opacity: 1;
      margin-top: var(--space-4);
    }

    @keyframes flameFlicker {
      0% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.1) rotate(-3deg); opacity: 0.9; }
      100% { transform: scale(1); opacity: 1; }
    }
    .streak-fire { display: inline-block; animation: flameFlicker 1.5s ease-in-out infinite; }
/* ──────────────────────────────────────────────────────────────────────────
   9. GLOBAL FOOTER OVERRIDES & ANIMATIONS
   ────────────────────────────────────────────────────────────────────────── */
.footer-link { 
  transition: color 0.2s ease, transform 0.2s ease; 
  display: inline-block; 
}
.footer-link:hover { 
  color: var(--brand-rose) !important; 
  transform: translateX(4px); 
}
/* Inward hover for right-aligned links in the footer */
.text-right .footer-link:hover { 
  transform: translateX(-4px); 
} 
.social-icon { 
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease; 
}
.social-icon:hover { 
  transform: translateY(-4px) scale(1.1); 
  color: var(--brand-rose) !important; 
}
  
/* ── Tutor 3.0 Specific Chat Styles ── */
    .chat-scroll-area { scroll-behavior: smooth; }

    /* overflow-hidden utility (used by chat card to clip border-radius) */
    .overflow-hidden { overflow: hidden; }
    .overflow-y-auto { overflow-y: auto; }

    .chat-bubble-user {
      background-color: var(--sage-dark);
      color: var(--cream);
      align-self: flex-end;
      border-radius: 16px 16px 0 16px;
      padding: 12px 16px;
      max-width: 85%;
      box-shadow: var(--shadow-sm);
      flex-shrink: 0;
      min-width: 0;
      word-break: break-word;
      overflow-wrap: anywhere;
    }
    .chat-bubble-tutor {
      background-color: var(--bg-elevated);
      color: var(--text-main);
      align-self: flex-start;
      border-radius: 16px 16px 16px 0;
      padding: 16px;
      max-width: 85%;
      box-shadow: var(--shadow-sm);
      border: 1px solid var(--border-light);
      line-height: 1.6;
      flex-shrink: 0;
      min-width: 0;
      word-break: break-word;
      overflow-wrap: anywhere;
    }
    .chat-typing {
      align-self: flex-start;
      padding: 12px 16px;
      flex-shrink: 0;
    }
    .chat-typing span {
      display: inline-block; width: 6px; height: 6px;
      background-color: var(--brand-rose); border-radius: 50%;
      margin: 0 2px; animation: typing 1.4s infinite both;
    }
    .chat-typing span:nth-child(1) { animation-delay: 0s; }
    .chat-typing span:nth-child(2) { animation-delay: 0.2s; }
    .chat-typing span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes typing { 0%, 80%, 100% { transform: scale(0); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } }

    /* Canvas Area */
    .scratchpad-container {
      border: 2px solid var(--border-light);
      border-radius: var(--radius-md);
      background: #FFFFFF;
      position: relative;
      overflow: hidden;
      margin-bottom: var(--space-4);
      display: none;
    }
    .scratchpad-container.is-open { display: block; }
    .scratchpad-canvas { width: 100%; height: 200px; cursor: crosshair; touch-action: none; }

/* ── Premium Dropdown for Useful Links ── */
        .useful-links-dropdown { position: relative; outline: none; }
        .useful-links-btn {
          background: rgba(255,255,255,0.08); 
          color: var(--text-logo) !important; 
          border: 1px solid rgba(255,255,255,0.15);
          padding: 8px 16px; 
          border-radius: var(--radius-md); 
          font-size: var(--text-sm); 
          font-weight: 600;
          cursor: pointer; 
          display: flex; 
          align-items: center; 
          gap: 8px; 
          transition: background 0.2s ease, border-color 0.2s ease;
        }
        .useful-links-btn:hover, .useful-links-dropdown:focus-within .useful-links-btn { 
          background: rgba(255,255,255,0.15); 
          border-color: rgba(255,255,255,0.3);
        }
        
        /* Dropdown drops DOWNWARDS and to the left, floating above all elements */
        .useful-links-menu {
          position: absolute; 
          right: 0; 
          top: calc(100% + 8px); 
          background: var(--sage-dark);
          border: 1px solid rgba(255,255,255,0.15); 
          border-radius: var(--radius-md); 
          box-shadow: 0 10px 25px rgba(0,0,0,0.3);
          min-width: 180px; 
          display: flex; 
          flex-direction: column; 
          padding: var(--space-2); 
          z-index: 999;
          opacity: 0; 
          visibility: hidden; 
          transform: translateY(-10px); 
          transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .useful-links-dropdown:hover .useful-links-menu,
        .useful-links-dropdown:focus-within .useful-links-menu {
          opacity: 1; 
          visibility: visible; 
          transform: translateY(0);
        }
        .useful-links-menu a {
          padding: 10px 12px; 
          color: var(--cream) !important; 
          text-decoration: none;
          font-size: var(--text-sm); 
          font-weight: 500; 
          border-radius: var(--radius-sm);
          transition: background 0.2s, color 0.2s; 
          text-align: left;
        }
        .useful-links-menu a:hover { 
          background: rgba(255,255,255,0.1); 
          color: var(--brand-rose) !important; 
        }

        /* ── Top Button Custom Hover ── */
        .footer-top-btn {
          color: var(--text-logo) !important; 
          border: 1px solid rgba(255,255,255,0.2); 
          border-radius: var(--radius-full); 
          padding: 0 16px;
          background: transparent;
          transition: all 0.2s ease;
        }
        .footer-top-btn:hover {
          background-color: var(--brand-rose) !important;
          border-color: var(--brand-rose) !important;
          color: #fffde7 !important;
        }

        /* ── Mobile Responsiveness for Footer ── */
        @media (max-width: 768px) {
          /* Stack the middle row (Badges & Socials) cleanly */
          .footer-mid-row { flex-direction: column !important; align-items: flex-start !important; gap: var(--space-6) !important; }
          .footer-social-wrap { width: 100%; justify-content: space-between !important; }
        }

        /* ==========================================================================
   GLOBAL HEADER COMPONENT OVERRIDES
   ========================================================================== */
/* 1. Force Auth Button to be persistent on mobile */
.navbar-actions #auth-header-container {
  display: flex !important;
}

/* 2. Wrap Dropdown Menu to content size instead of full width */
#navDropdown {
  left: auto !important;
  right: var(--space-4) !important;
  width: max-content !important;
  min-width: 200px;
  border-radius: var(--radius-md) !important;
  top: 68px !important; 
  box-shadow: var(--shadow-md);
}

/* ── Learner Kebab Menu & Dropdown 3.0 Styles ── */
    .kebab-btn {
      width: 32px; 
      height: 32px; 
      display: flex; 
      align-items: center; 
      justify-content: center; 
      border-radius: 50%; 
      border: none; 
      background: transparent; 
      cursor: pointer; 
      color: var(--text-muted); 
      font-size: 1.25rem; 
      transition: background 0.2s ease, color 0.2s ease; 
      flex-shrink: 0;
    }
    .kebab-btn:hover {
      background: var(--bg-elevated); 
      color: var(--text-main);
    }
    .learner-dropdown {
      position: absolute; 
      right: 0; 
      top: 40px; 
      min-width: 180px; 
      background: var(--bg-surface); 
      border: 1px solid var(--border-light); 
      border-radius: var(--radius-md); 
      box-shadow: var(--shadow-md); 
      z-index: 100; 
      overflow: hidden; 
      display: flex; 
      flex-direction: column;
    }
    .learner-dropdown-item {
      width: 100%; 
      text-align: left; 
      padding: 12px 16px; 
      background: transparent; 
      border: none; 
      font-family: var(--font-body); 
      font-size: var(--text-sm); 
      font-weight: 600; 
      color: var(--text-main); 
      cursor: pointer; 
      transition: background 0.2s ease, color 0.2s ease;
    }
    .learner-dropdown-item:hover {
      background: var(--bg-elevated);
    }
    .learner-dropdown-item.danger:hover {
      background: rgba(220, 38, 38, 0.08);
      color: var(--brand-error);
    }
    .learner-dropdown-divider {
      height: 1px; 
      background: var(--border-light); 
      width: 100%;
    }
    .badge-xs { font-size: var(--text-xs); padding: 2px 8px; }
    .text-light { color: rgba(255,255,255,0.82); }
    .label-mono { letter-spacing: 0.08em; }
    .list-reset { list-style: none; }
    .prose-sm { max-width: 480px; }

/* ══ Index.html BUTTONS ════════════════════════════════════════════════════ */
.btn-glass {
  background: rgba(255,255,255,0.12);
  color: var(--cream);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(4px);
}
.btn-glass:hover:not(:disabled) { background: rgba(255,255,255,0.2); color: var(--cream); }
.btn-white { background: var(--bg-surface); color: var(--brand-rose); font-weight: 700; }
.btn-white:hover:not(:disabled) { background: var(--bg-elevated); color: var(--brand-rose); }
.btn-outline-white { background: transparent; color: var(--cream); border: 1px solid rgba(255,255,255,0.35); }
.btn-outline-white:hover:not(:disabled) { background: rgba(255,255,255,0.1); }

/* ══ BADGES ════════════════════════════════════════════════════ */
.badge-glass      { background: rgba(255,255,255,0.1);  color: var(--cream); }
.badge-rose-solid { background: var(--brand-rose);       color: var(--bg-surface); }
.badge-maths      { background: rgba(59,130,246,0.18);  color: var(--maths-colour); }
.badge-dark-mint  { background: rgba(5,150,105,0.18);   color: var(--brand-mint); }

/* ══ CARD ACCENTS ══════════════════════════════════════════════ */
.card-accent-rose {
  border-left: 4px solid var(--brand-rose);
  border-top: none; border-right: none; border-bottom: none;
  background: var(--bg-page);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.card-rule-rose  { border-left: 4px solid var(--brand-rose); }
.card-rule-mint  { border-left: 4px solid var(--brand-mint); }
.card-rule-amber { border-left: 4px solid var(--brand-amber); }

/* ══ VIDEO ══════════════════════════════════════════════════════ */
.video-wrap {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  line-height: 0;
  height: 415px; /* increase height (~1.5x, adjust as needed) */
}
.video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 🔥 removes black bars */
  display: block;
}

/* ══ HERO ═══════════════════════════════════════════════════════
   Two-column flex. align-items: flex-start so tops are level.
   The float card overlaps the photo via position:absolute.       */
.hero-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
}
.hero-left {
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
/* Buttons in a row — flex-wrap so they collapse to column on mobile */
.hero-cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.hero-cta-note {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.55);
}
.hero-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255,255,255,0.15);
}
.stat-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.55);
  margin-top: var(--space-1);
}
/* Right column: contains photo + absolutely-positioned float card */
.hero-right {
  flex: 1;
  min-width: 300px;
  position: relative;
}
.hero-photo {
  width: 100%;
  max-width: 500px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: block;
}
/* Float card: absolute, overlapping bottom-right quarter of photo */
.hero-float-card {
  position: absolute;
  bottom: var(--space-2);   /* sits inside the photo — bottom-right quarter */
  right: calc(-1 * var(--space-3)); /* slight overhang */
  width: 240px;
  z-index: 2;
}

/* ══ CREDIBILITY BAR ════════════════════════════════════════════ */
/* flex-nowrap on ≥768px so items stay in one row */
.cred-inner {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  overflow-x: auto;
  padding: var(--space-3) var(--space-4);
}
.cred-sep { width: 1px; height: 32px; background: var(--border-light); flex-shrink: 0; }
.cred-item { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }

/* ══ QUIZ BANK ══════════════════════════════════════════════════
   Two-column: rotated photo left, text right (z-index so text is on top).
   Feature strip beneath spans both columns.                      */
.quiz-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0;                   /* no gap — text intentionally overlaps rotated photo */
  position: relative;
}
/* Photo column: overflow hidden clips rotation spill; extra top padding lets top corner align with text */
.quiz-photo-col {
  flex: 0 0 44%;
  position: relative;
  overflow: visible;
  padding-top: var(--space-6);
  padding-left: var(--space-4);
}
.quiz-photo-rotated {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transform: translateY(80px) rotate(-10deg); 
  transform-origin: top left;
  display: block;
}
/* Text column: z-index 1 so words sit on top of the photo */
.quiz-text-col {
  flex: 1;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-6);
  position: relative;
  z-index: 1;
}
/* Feature strip: 3 items in a horizontal row spanning full width */
.quiz-feature-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-6);
  margin-top: var(--space-1);
  padding-top: var(--space-1);
  border-top: 1px solid var(--border-light);
}
.quiz-feature-item {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
@media (max-width: 768px) {
  .quiz-feature-strip { flex-wrap: wrap; }
  .quiz-photo-col { flex: 0 0 100%; overflow: visible; }
  .quiz-layout { gap: var(--space-4); }
}

/* ══ PRACTICE PAPERS ════════════════════════════════════════════
   Heading/intro now lives inside the video column (right), stacked above video.
   3 ecc-cards stacked left, right column = intro text + video.   */
.papers-layout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  align-items: flex-start;
}
.papers-stack { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: var(--space-4); }
.papers-right-col { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: var(--space-5); }

/* ══ PROGRESS TRACKER ══════════════════════════════════════════
   Cards left. Right column: two photos layered.
   progress-screenshot: +20deg, moved DOWN 100px, z-index 2.
   dashboard-screenshot: -20deg, moved UP 300px, 75% size, z-index 1 (behind).  */
.progress-layout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  align-items: stretch;
}
.progress-cards-col { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: var(--space-4); }
.progress-photos-col {
  flex: 1;
  min-width: 280px;
  position: relative;
  padding: var(--space-4);  /* breathing room — never touches cards */
  min-height: 400px;        /* enough height to contain the offset photos */
}
.progress-photo-top {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transform: rotate(20deg);
  transform-origin: top center;
  display: block;
  position: relative;
  top: 100px;               /* pushed DOWN 100px */
  z-index: 2;
}
.progress-photo-bottom {
  width: 75%;               /* reduced to 75% */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transform: rotate(-20deg);
  transform-origin: bottom center;
  display: block;
  position: relative;
  top: -300px;              /* pulled UP 300px (negative = up) */
  margin-left: auto;        /* push right */
  z-index: 1;               /* behind top photo — nothing overlaps cards */
}

/* ══ STUDY NOTES ════════════════════════════════════════════════
   Text left, photo right. Photo: 5deg clockwise, z-index behind text.
   3-feature items in ONE horizontal row.                         */
.studynotes-layout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  align-items: flex-start;
}
.studynotes-text { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: var(--space-4); }
.studynotes-photo-wrap {
  flex: 1;
  min-width: 260px;
  position: relative;
  padding: var(--space-4);  /* gap so photo never touches text column */
  z-index: 0;               /* behind text */
}
.studynotes-photo {
  width: 100%;
  max-width: 420px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transform: rotate(5deg);
  transform-origin: top center;
  display: block;
}
/* 3 feature items in a row */
.studynotes-features {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-4);
  margin-top: var(--space-2);
}
.studynotes-feature-item {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
@media (max-width: 768px) {
  .studynotes-features { flex-wrap: wrap; }
}

/* ══ MISS WENA ══════════════════════════════════════════════════
   Photo (chat card) LEFT, text table RIGHT — swapped from previous.  */
.wena-avatar {
  width: 64px; height: 64px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 3px solid var(--brand-rose);
  flex-shrink: 0;
}

/* ══ HELPERS ════════════════════════════════════════════════════ */
.self-start  { align-self: flex-start; }
.self-center { align-self: center; }
.ml-auto     { margin-left: auto; }
.prose-cap   { max-width: 600px; margin-left: auto; margin-right: auto; }
.label-spaced { letter-spacing: 0.08em; text-transform: uppercase; }
.list-reset  { list-style: none; }
p { text-align: justify; }
.badge, .btn, h1, h2, h3, h4, .text-center p { text-align: initial; }
.price-suffix { font-family: var(--font-body); font-size: var(--text-sm); text-transform: none; font-weight: 400; color: var(--text-muted); }

/* ══ PRICING ════════════════════════════════════════════════════ */
.card-featured { border-color: var(--brand-rose); box-shadow: var(--shadow-md); }
.billing-toggle { display: inline-flex; align-items: center; gap: var(--space-1); background: var(--brand-sage); border-radius: var(--radius-full); padding: var(--space-1); }
.billing-toggle .btn-sm { border-radius: var(--radius-full); }
.billing-toggle .btn-active   { background: var(--bg-surface); color: var(--text-main); }
.billing-toggle .btn-inactive { background: transparent; color: var(--cream); }