/* ================================================================
   EduCam Pro — CSS Principal
   Palette : Vert foncé #0A3D2B · Or #F4A100 · Blanc cassé #FAFAF5
   Typographie : Playfair Display (titres) · DM Sans (corps)
   Design : "African Academic Excellence" — Mobile-first 2026
   ================================================================ */

/* ── VARIABLES ────────────────────────────────────────────────── */
:root {
  --edu-green:       #0A3D2B;
  --edu-green-mid:   #1a6645;
  --edu-green-light: #e8f5ee;
  --edu-gold:        #F4A100;
  --edu-gold-dark:   #c07e00;
  --edu-gold-light:  #fff8e7;
  --edu-cream:       #FAFAF5;
  --edu-dark:        #1a1a2e;
  --edu-gray:        #6c757d;
  --edu-border:      #e8e8e0;

  --font-serif:  'Playfair Display', Georgia, serif;
  --font-sans:   'DM Sans', system-ui, sans-serif;

  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --shadow-sm:   0 2px 8px rgba(10,61,43,.08);
  --shadow-md:   0 6px 24px rgba(10,61,43,.12);
  --shadow-lg:   0 12px 40px rgba(10,61,43,.18);
}

/* ── BASE ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

.edu-body {
  font-family: var(--font-sans);
  background: var(--edu-cream);
  color: var(--edu-dark);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .edu-hero-title, .edu-page-title { font-family: var(--font-serif); }

/* ── UTILITIES ────────────────────────────────────────────────── */
.py-6 { padding-top: 4rem; padding-bottom: 4rem; }
.mt-6 { margin-top: 4rem; }
.text-gold { color: var(--edu-gold) !important; }
.text-dark-green { color: var(--edu-green) !important; }
.bg-dark-green { background-color: var(--edu-green) !important; }
.bg-light-green { background-color: var(--edu-green-light) !important; }
.bg-gold { background-color: var(--edu-gold) !important; }

/* ── BUTTONS ──────────────────────────────────────────────────── */
.btn-gold {
  background: var(--edu-gold);
  color: var(--edu-green);
  border: none;
  font-weight: 700;
  border-radius: 50px;
  transition: all .2s ease;
}
.btn-gold:hover { background: var(--edu-gold-dark); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn-outline-gold {
  border: 2px solid var(--edu-gold);
  color: var(--edu-gold);
  background: transparent;
  font-weight: 700;
  border-radius: 50px;
  transition: all .2s ease;
}
.btn-outline-gold:hover { background: var(--edu-gold); color: var(--edu-green); }

.btn-outline-green {
  border: 2px solid var(--edu-green);
  color: var(--edu-green);
  background: transparent;
  font-weight: 600;
  border-radius: 50px;
  transition: all .2s ease;
}
.btn-outline-green:hover { background: var(--edu-green); color: #fff; }

.btn-dark-green {
  background: var(--edu-green);
  color: #fff;
  border: none;
  font-weight: 700;
  border-radius: 50px;
  transition: all .2s ease;
}
.btn-dark-green:hover { background: var(--edu-green-mid); transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* ── NAVBAR ───────────────────────────────────────────────────── */
.edu-navbar {
  background: var(--edu-green);
  padding: .75rem 0;
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
}
.edu-brand {
  display: flex; align-items: center; gap: .5rem;
  text-decoration: none;
}
.brand-icon { font-size: 1.5rem; }
.brand-text {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.5px;
}
.brand-pro { color: var(--edu-gold); }
.edu-navbar .nav-link { color: rgba(255,255,255,.85) !important; font-weight: 500; }
.edu-navbar .nav-link:hover { color: var(--edu-gold) !important; }

/* ── FOOTER ───────────────────────────────────────────────────── */
.edu-footer {
  background: #0d1117;
  color: rgba(255,255,255,.7);
  padding: 3rem 0 1.5rem;
}
.edu-brand-footer {
  font-family: var(--font-serif);
  color: var(--edu-gold);
  font-size: 1.2rem;
}

/* ── BADGES DE PAIEMENT ───────────────────────────────────────── */
.badge-payment {
  display: inline-flex;
  align-items: center;
  padding: .35rem .75rem;
  border-radius: 50px;
  font-size: .75rem;
  font-weight: 700;
}
.orange-money-badge { background: #ff6600; color: #fff; }
.mtn-badge { background: #ffcc00; color: #1a1a1a; }

/* ── HERO ─────────────────────────────────────────────────────── */
.edu-hero {
  background: linear-gradient(135deg, var(--edu-green) 0%, #1a5c3a 60%, #0d2e1f 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.edu-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(244,161,0,.15) 0%, transparent 70%);
  pointer-events: none;
}
.min-vh-80 { min-height: 80vh; }
.hero-badge {
  background: rgba(244,161,0,.2);
  border: 1px solid rgba(244,161,0,.4);
  color: var(--edu-gold);
  padding: .4rem .9rem;
  border-radius: 50px;
  font-size: .85rem;
  font-weight: 600;
}
.edu-hero-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  line-height: 1.15;
  color: #fff;
}
.edu-hero-subtitle {
  font-size: 1.1rem;
  color: rgba(255,255,255,.8);
  line-height: 1.6;
}
.hero-stats { gap: 2rem; }
.stat-item { display: flex; flex-direction: column; align-items: center; }
.stat-number {
  font-size: 2rem; font-weight: 900;
  font-family: var(--font-serif); color: var(--edu-gold);
}
.stat-label { font-size: .8rem; color: rgba(255,255,255,.6); }

/* Hero Cards (illustration) */
.hero-illustration { position: relative; height: 300px; }
.hero-card-stack { position: relative; }
.hero-card {
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-md);
  padding: 1rem 1.2rem;
  display: flex; align-items: center; gap: .8rem;
  color: #fff;
  position: absolute;
  width: 280px;
  transition: transform .3s ease;
}
.card-1 { top: 0; left: 20px; }
.card-2 { top: 80px; left: 0; transform: rotate(-2deg); }
.card-3 { top: 160px; left: 30px; transform: rotate(1deg); }
.hc-icon { font-size: 1.8rem; }
.hc-text { display: flex; flex-direction: column; }
.hc-text strong { font-size: .9rem; font-weight: 700; }
.hc-text span { font-size: .75rem; color: rgba(255,255,255,.7); }

/* ── SECTION TITLES ───────────────────────────────────────────── */
.section-title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--edu-green);
}
.section-subtitle {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--edu-green);
}

/* ── LEVEL CARDS ─────────────────────────────────────────────── */
.level-card {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 2px solid var(--edu-border);
  transition: all .25s ease;
}
.level-card:hover {
  border-color: var(--edu-gold);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.level-icon { font-size: 2.5rem; }

/* ── STEPS ────────────────────────────────────────────────────── */
.step-card {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--edu-border);
  position: relative;
  overflow: hidden;
}
.step-number {
  position: absolute; top: -10px; right: -10px;
  font-size: 5rem; font-weight: 900;
  color: var(--edu-green-light);
  font-family: var(--font-serif);
  line-height: 1;
}
.step-icon { font-size: 2.5rem; position: relative; z-index: 1; }

/* ── PLANS ────────────────────────────────────────────────────── */
.plan-card-preview {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: all .25s ease;
  position: relative;
}
.plan-card-preview:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.plan-card-preview.plan-featured {
  background: var(--edu-gold);
  border-color: var(--edu-gold);
}
.plan-badge {
  position: absolute; top: -12px; right: 20px;
  background: var(--edu-gold);
  color: var(--edu-green);
  padding: .25rem .75rem;
  border-radius: 50px;
  font-size: .75rem; font-weight: 700;
}
.plan-header h3 { font-family: var(--font-serif); font-weight: 700; color: #fff; }
.plan-card-preview.plan-featured .plan-header h3 { color: var(--edu-green); }
.price-amount { font-size: 2rem; font-weight: 900; color: var(--edu-gold); }
.plan-card-preview.plan-featured .price-amount { color: var(--edu-green); }
.price-period { color: rgba(255,255,255,.7); font-size: .9rem; }
.plan-features-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.plan-features-list li { padding: .4rem 0; font-size: .9rem; color: rgba(255,255,255,.85); }
.plan-card-preview.plan-featured .plan-features-list li { color: var(--edu-green); }

/* Plans page */
.plan-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 2px solid var(--edu-border);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: all .25s ease;
}
.plan-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.plan-card-featured {
  border-color: var(--edu-gold);
  box-shadow: 0 8px 32px rgba(244,161,0,.2);
}
.plan-card-header {
  background: var(--edu-green);
  color: #fff;
  padding: 1.8rem;
  position: relative;
}
.plan-card-featured .plan-card-header { background: linear-gradient(135deg, var(--edu-green) 0%, var(--edu-green-mid) 100%); }
.plan-badge-featured {
  position: absolute; top: -1px; right: 20px;
  background: var(--edu-gold); color: var(--edu-green);
  padding: .3rem .8rem; border-radius: 0 0 8px 8px;
  font-size: .75rem; font-weight: 700;
}
.plan-name { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 700; color: #fff; }
.plan-price-amount { font-size: 2.2rem; font-weight: 900; color: var(--edu-gold); }
.plan-price-period { color: rgba(255,255,255,.7); }
.plan-savings-badge {
  display: inline-block;
  background: rgba(244,161,0,.2);
  border: 1px solid rgba(244,161,0,.4);
  color: var(--edu-gold);
  padding: .25rem .6rem; border-radius: 50px;
  font-size: .75rem; font-weight: 600;
}
.plan-card-body { padding: 1.5rem; flex-grow: 1; }
.plan-feature-list { list-style: none; padding: 0; margin: 0; }
.plan-feature-list li { padding: .5rem 0; border-bottom: 1px solid var(--edu-border); font-size: .9rem; }
.plan-feature-list li:last-child { border-bottom: none; }
.plan-card-footer { padding: 1.5rem; border-top: 1px solid var(--edu-border); background: var(--edu-cream); }

.pay-icon {
  display: inline-block;
  padding: .3rem .7rem;
  border-radius: 50px;
  font-size: .75rem;
  font-weight: 700;
  margin-right: .4rem;
}
.orange-money { background: #ff6600; color: #fff; }
.mtn-money { background: #ffcc00; color: #1a1a1a; }

/* ── TESTIMONIALS ─────────────────────────────────────────────── */
.testimonial-card {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--edu-gold);
  transition: all .25s ease;
}
.testimonial-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* ── CTA ──────────────────────────────────────────────────────── */
.cta-section { position: relative; overflow: hidden; }

/* ── AUTH PAGES ───────────────────────────────────────────────── */
.auth-page { background: linear-gradient(135deg, var(--edu-green) 0%, #1a6645 100%); min-height: 100vh; }
.auth-wrapper {
  min-height: calc(100vh - 80px);
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem;
}
.auth-wrapper-wide .auth-card { max-width: 520px; }
.auth-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-lg);
}
.auth-brand {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--edu-green);
  text-decoration: none;
}
.auth-title { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 800; color: var(--edu-green); }
.auth-subtitle { color: var(--edu-gray); font-size: .95rem; }
.btn-show-pwd {
  position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none; color: var(--edu-gray);
  cursor: pointer; padding: 0; line-height: 1;
}

/* ── DASHBOARD ────────────────────────────────────────────────── */
.dash-header { background: #fff; border-radius: var(--radius-md); padding: 1.5rem; box-shadow: var(--shadow-sm); }
.dash-welcome { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 700; color: var(--edu-green); }
.subscription-badge {
  display: flex; align-items: center; gap: .75rem;
  background: var(--edu-green-light);
  border: 2px solid var(--edu-green);
  border-radius: var(--radius-md);
  padding: .75rem 1.2rem;
}
.badge-sub-icon { font-size: 1.5rem; }
.badge-sub-plan { font-weight: 700; color: var(--edu-green); font-size: .9rem; }
.badge-sub-expiry { font-size: .8rem; }

.dash-stat-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 1.2rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--edu-border);
  text-align: center;
}
.stat-icon { font-size: 1.8rem; display: block; margin-bottom: .5rem; color: var(--edu-green); }
.stat-value { font-size: 1.8rem; font-weight: 800; color: var(--edu-green); font-family: var(--font-serif); }
.stat-label { font-size: .75rem; color: var(--edu-gray); }

/* ── SUBJECT CARDS ────────────────────────────────────────────── */
.subject-card-link { text-decoration: none; color: inherit; display: block; }
.subject-card {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 2px solid var(--edu-border);
  transition: all .25s ease;
  cursor: pointer;
}
.subject-card:hover { border-color: var(--edu-gold); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.subject-icon { font-size: 1.8rem; }
.subject-big-icon { font-size: 2.5rem; }

.badge-level {
  display: inline-block;
  background: var(--edu-green-light);
  color: var(--edu-green);
  border: 1px solid var(--edu-green);
  padding: .15rem .55rem;
  border-radius: 50px;
  font-size: .7rem;
  font-weight: 700;
}
.badge-premium {
  display: inline-block;
  background: var(--edu-gold-light);
  color: var(--edu-gold-dark);
  border: 1px solid var(--edu-gold);
  padding: .15rem .55rem;
  border-radius: 50px;
  font-size: .7rem;
  font-weight: 700;
}
.badge-free {
  display: inline-block;
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
  padding: .15rem .55rem;
  border-radius: 50px;
  font-size: .7rem;
  font-weight: 700;
}

/* ── VIDEO MINI CARDS ─────────────────────────────────────────── */
.video-mini-card {
  display: flex; align-items: center; gap: .75rem;
  background: #fff; border-radius: var(--radius-sm);
  padding: .75rem; text-decoration: none; color: inherit;
  border: 1px solid var(--edu-border);
  transition: all .2s ease;
  position: relative;
}
.video-mini-card:hover { box-shadow: var(--shadow-sm); border-color: var(--edu-gold); }
.video-mini-thumb {
  width: 70px; height: 48px;
  border-radius: 6px; overflow: hidden;
  background: var(--edu-green); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.video-mini-thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-thumb-placeholder { color: var(--edu-gold); font-size: 1.2rem; }
.video-mini-title { font-size: .85rem; line-height: 1.3; }
.badge-free { position: absolute; top: 4px; right: 4px; }

/* ── PAYMENT FORMS ────────────────────────────────────────────── */
.payment-steps {
  display: flex; align-items: center; justify-content: center; gap: 0;
}
.step {
  display: flex; align-items: center; gap: .4rem;
  font-size: .85rem; color: var(--edu-gray);
  font-weight: 600;
}
.step.active { color: var(--edu-green); }
.step span {
  width: 28px; height: 28px;
  background: var(--edu-border); color: var(--edu-gray);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700;
}
.step.active span { background: var(--edu-green); color: #fff; }
.step-divider {
  width: 50px; height: 2px;
  background: var(--edu-border);
  margin: 0 .5rem;
}
.payment-form-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.payment-summary-card {
  background: var(--edu-cream);
  border-radius: var(--radius-lg);
  border: 2px solid var(--edu-green-light);
}
.summary-plan-name { font-weight: 700; font-size: 1.1rem; color: var(--edu-green); }
.summary-price { color: var(--edu-gold); }
.alert-security { background: rgba(10,61,43,.05); border: 1px solid var(--edu-green-light); }

/* Provider selector */
.provider-option { cursor: pointer; flex: 1; }
.provider-card {
  background: #fff;
  border: 2px solid var(--edu-border);
  border-radius: var(--radius-md);
  padding: 1rem;
  text-align: center;
  transition: all .2s ease;
}
.provider-option.selected .provider-card,
.provider-option:hover .provider-card {
  border-color: var(--edu-gold);
  background: var(--edu-gold-light);
}
.provider-logo { font-size: 1.8rem; }

/* ── PENDING PAYMENT ──────────────────────────────────────────── */
.pending-animation { position: relative; width: 100px; height: 100px; margin: 0 auto; }
.pending-ring {
  position: absolute; inset: 0;
  border: 4px solid var(--edu-green-light);
  border-top-color: var(--edu-green);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.pending-icon {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem;
}
@keyframes spin { to { transform: rotate(360deg); } }
.tx-details-card {
  background: var(--edu-cream);
  border-radius: var(--radius-md);
  border: 1px solid var(--edu-border);
}

/* ── SUCCESS PAGE ─────────────────────────────────────────────── */
.success-checkmark { font-size: 4rem; animation: popIn .5s ease; }
@keyframes popIn { from { transform: scale(0); } to { transform: scale(1); } }
.access-code-display { text-align: center; }
.code-box {
  font-family: 'Courier New', monospace;
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: .3em;
  color: var(--edu-green);
  background: var(--edu-green-light);
  border: 3px dashed var(--edu-green);
  border-radius: var(--radius-md);
  padding: 1.2rem 1.5rem;
  display: inline-block;
  cursor: pointer;
  transition: all .2s ease;
}
.code-box:hover { background: var(--edu-gold-light); border-color: var(--edu-gold); }
.code-instructions {
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--edu-border);
}

/* ── SUBJECT DETAIL ───────────────────────────────────────────── */
.subject-detail-header {
  background: linear-gradient(135deg, var(--edu-green) 0%, var(--edu-green-mid) 100%);
  color: #fff;
  border-radius: var(--radius-lg);
}
.subject-detail-icon { font-size: 3.5rem; }
.doc-card {
  background: #fff;
  border-radius: var(--radius-sm);
  border: 1px solid var(--edu-border);
  transition: all .2s ease;
}
.doc-card:hover { box-shadow: var(--shadow-sm); border-color: var(--edu-green); }
.doc-icon { font-size: 1.8rem; flex-shrink: 0; }
.premium-banner {
  background: linear-gradient(135deg, var(--edu-green-light) 0%, #f0faf5 100%);
  border: 2px solid var(--edu-green);
  border-radius: var(--radius-lg);
}
.video-card-row {
  background: #fff;
  border-radius: var(--radius-sm);
  border: 1px solid var(--edu-border);
  transition: all .2s ease;
}
.video-card-row:hover { box-shadow: var(--shadow-sm); border-color: var(--edu-gold); }
.video-thumb-sm {
  width: 80px; height: 55px; border-radius: 6px;
  overflow: hidden; background: var(--edu-green);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; position: relative;
}
.video-thumb-sm img { width: 100%; height: 100%; object-fit: cover; }
.video-thumb-ph { color: var(--edu-gold); font-size: 1.2rem; }

/* ── ACTIVATE CODE ────────────────────────────────────────────── */
.activate-icon { font-size: 3rem; }
.alert-info-edu {
  background: rgba(10,61,43,.06);
  border: 1px solid rgba(10,61,43,.15);
  border-radius: var(--radius-sm);
  color: var(--edu-green);
}

/* ── FILTER SIDEBAR ───────────────────────────────────────────── */
.filter-card {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--edu-border);
  position: sticky;
  top: 80px;
}

/* ── ADMIN ────────────────────────────────────────────────────── */
.admin-stat-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--edu-green);
  text-align: center;
}
.admin-stat-card .stat-sub { font-size: .75rem; margin-top: .25rem; }
.admin-nav-card {
  display: block;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--edu-border);
  text-decoration: none;
  color: var(--edu-dark);
  transition: all .2s ease;
}
.admin-nav-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--edu-gold); }
.badge-provider {
  display: inline-block; padding: .2rem .5rem;
  border-radius: 50px; font-size: .7rem; font-weight: 700;
}
.orange-provider { background: #ff6600; color: #fff; }
.mtn-provider { background: #ffcc00; color: #1a1a1a; }

/* ── PLAN TOGGLE ──────────────────────────────────────────────── */
.toggle-switch { display: inline-flex; align-items: center; cursor: pointer; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  width: 48px; height: 26px;
  background: var(--edu-green);
  border-radius: 13px; position: relative;
  transition: .2s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 50%;
  top: 3px; left: 3px;
  transition: .2s;
}
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(22px); }
.toggle-label { font-weight: 600; color: var(--edu-green); }

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 576px) {
  .edu-hero-title { font-size: 1.7rem; }
  .auth-card { padding: 1.5rem; }
  .hero-illustration { display: none; }
  .payment-steps { font-size: .75rem; }
  .code-box { font-size: 1.2rem; letter-spacing: .15em; }
  .plans-preview .plan-card-preview { padding: 1.2rem; }
}
@media (min-width: 992px) {
  .auth-wrapper { padding: 3rem; }
}

/* ── SCROLLBAR ────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--edu-cream); }
::-webkit-scrollbar-thumb { background: var(--edu-green); border-radius: 3px; }

/* ── ANIMATE ON SCROLL ────────────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease, transform .5s ease;
}
.fade-up.visible { opacity: 1; transform: none; }