/* ══════════════════════════════════════════════
   SCA Online — Page-Specific Styles
   ══════════════════════════════════════════════ */

/* ── HERO SECTION ── */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-height);
  position: relative;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg .orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.4;
  animation: float 8s ease-in-out infinite;
}

.hero-bg .orb-1 {
  width: 500px; height: 500px;
  background: var(--accent-violet);
  top: -10%; right: -5%;
}

.hero-bg .orb-2 {
  width: 400px; height: 400px;
  background: var(--accent-cyan);
  bottom: -10%; left: -5%;
  animation-delay: 3s;
}

.hero-bg .orb-3 {
  width: 300px; height: 300px;
  background: var(--accent-rose);
  top: 40%; left: 30%;
  animation-delay: 5s;
  opacity: 0.2;
}

.hero-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.hero-text { max-width: 600px; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: rgba(124,58,237,0.12);
  border: 1px solid rgba(124,58,237,0.3);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  color: var(--accent-violet-light);
  margin-bottom: var(--space-6);
}

.hero-title {
  font-size: var(--fs-7xl);
  font-weight: 900;
  line-height: 1.05;
  margin-bottom: var(--space-6);
}

.hero-subtitle {
  font-size: var(--fs-lg);
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
  max-width: 480px;
}

.hero-actions {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}

.hero-stats {
  display: flex;
  gap: var(--space-10);
}

.hero-stat-value {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--text-primary);
}

.hero-stat-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.hero-visual-card {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 4/3;
  background: var(--bg-glass);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  backdrop-filter: blur(20px);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  animation: float 6s ease-in-out infinite;
}

.daw-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.daw-dots {
  display: flex;
  gap: var(--space-1);
}

.daw-dots span {
  width: 10px; height: 10px;
  border-radius: 50%;
}

.daw-dots span:nth-child(1) { background: var(--accent-red); }
.daw-dots span:nth-child(2) { background: var(--accent-amber); }
.daw-dots span:nth-child(3) { background: var(--accent-green); }

.daw-title {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.daw-tracks {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.daw-track {
  height: 28px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  gap: 2px;
}

.daw-track-block {
  height: 100%;
  border-radius: var(--radius-sm);
  opacity: 0.7;
}

/* ── FEATURES / OFFERS ── */
.offers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-12);
}

.offer-card {
  padding: var(--space-8);
  text-align: center;
  position: relative;
}

.offer-card.featured {
  border-color: var(--accent-violet);
  box-shadow: var(--shadow-glow-violet);
}

.offer-card.featured::before { opacity: 1; }

.offer-icon {
  width: 64px; height: 64px;
  margin: 0 auto var(--space-5);
  background: var(--gradient-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xl);
}

.offer-card h3 { margin-bottom: var(--space-3); }
.offer-card p { font-size: var(--fs-sm); margin-bottom: var(--space-6); }

.offer-features {
  text-align: left;
  margin-bottom: var(--space-6);
}

.offer-features li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.offer-features li::before {
  content: '✓';
  color: var(--accent-green);
  font-weight: 700;
  flex-shrink: 0;
}

.offer-price {
  font-family: var(--font-heading);
  font-size: var(--fs-3xl);
  font-weight: 800;
  margin-bottom: var(--space-4);
}

.offer-price span {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-weight: 400;
}

/* ── SECTION HEADERS ── */
.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-12);
}

.section-header .section-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: rgba(124,58,237,0.1);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--accent-violet-light);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-4);
}

.section-header h2 { margin-bottom: var(--space-4); }

.section-header p {
  font-size: var(--fs-lg);
  color: var(--text-muted);
}

/* ── HOW IT WORKS ── */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  position: relative;
}

.step-card { text-align: center; padding: var(--space-6); }

.step-number {
  width: 48px; height: 48px;
  margin: 0 auto var(--space-4);
  background: var(--gradient-btn);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-lg);
}

.step-card h4 { margin-bottom: var(--space-2); font-size: var(--fs-lg); }
.step-card p { font-size: var(--fs-sm); }

/* ── TESTIMONIALS ── */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.testimonial-card { padding: var(--space-6); }
.testimonial-card .stars { color: var(--accent-amber); margin-bottom: var(--space-3); }
.testimonial-card blockquote {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-4);
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.testimonial-author-info h5 {
  font-size: var(--fs-sm);
  font-weight: 600;
}

.testimonial-author-info p {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ── CTA SECTION ── */
.cta-section {
  background: var(--gradient-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  padding: var(--space-16) var(--space-8);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle at center, rgba(124,58,237,0.08) 0%, transparent 60%);
}

.cta-section h2 { position: relative; margin-bottom: var(--space-4); }
.cta-section p { position: relative; max-width: 500px; margin: 0 auto var(--space-8); }
.cta-section .btn { position: relative; }

/* ── COURSE CATALOG ── */
.courses-filter {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
  justify-content: center;
}

.filter-btn {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-subtle);
  transition: all var(--duration-fast) var(--ease-smooth);
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--accent-violet);
  color: white;
  border-color: var(--accent-violet);
}

.courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-6);
}

.course-card { padding: 0; overflow: hidden; }

.course-card-thumb {
  width: 100%;
  height: 180px;
  background: var(--gradient-card);
  position: relative;
  overflow: hidden;
}

.course-card-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.course-card-thumb .course-duration {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  background: rgba(0,0,0,0.7);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.course-card-body { padding: var(--space-5); }

.course-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

.course-card-body h4 {
  font-size: var(--fs-base);
  margin-bottom: var(--space-2);
}

.course-card-body p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-4);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.course-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.course-price {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--accent-cyan-light);
}

/* ── AUTH PAGES ── */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-12) var(--space-6);
  position: relative;
  overflow-y: auto;
}

.auth-card {
  width: 100%;
  max-width: 460px;
  padding: var(--space-8);
  margin: auto;
}

.auth-card .auth-header {
  text-align: center;
  margin-bottom: var(--space-6);
}

.auth-card .auth-header h2 { margin-bottom: var(--space-2); font-size: var(--fs-2xl); }

.auth-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  background: rgba(255,255,255,0.04);
  padding: var(--space-1);
  border-radius: var(--radius-lg);
}

.auth-tab {
  flex: 1;
  padding: var(--space-3);
  text-align: center;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-smooth);
}

.auth-tab.active {
  background: var(--accent-violet);
  color: white;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-6) 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

/* ── DASHBOARD LAYOUT ── */
.dashboard-layout {
  display: flex;
  min-height: 100vh;
  padding-top: var(--nav-height);
}

.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-subtle);
  padding: var(--space-6) var(--space-4);
  position: fixed;
  top: var(--nav-height);
  bottom: 0;
  overflow-y: auto;
}

.sidebar-nav { display: flex; flex-direction: column; gap: var(--space-1); }

.sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-secondary);
  transition: all var(--duration-fast) var(--ease-smooth);
}

.sidebar-link:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text-primary);
}

.sidebar-link.active {
  background: rgba(124,58,237,0.12);
  color: var(--accent-violet-light);
}

.sidebar-section-title {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  padding: var(--space-6) var(--space-4) var(--space-2);
}

.dashboard-main {
  flex: 1;
  margin-left: var(--sidebar-width);
  padding: var(--space-8);
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-8);
}

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.dash-stat-card {
  padding: var(--space-5);
}

.dash-stat-card .stat-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);
  margin-bottom: var(--space-3);
}

.dash-stat-card h3 {
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-1);
}

.dash-stat-card p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ── VIDEO PLAYER ── */
.video-player-container {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #000;
  aspect-ratio: 16/9;
}

.video-player-container .play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.4);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-smooth);
}

.video-player-container .play-overlay:hover {
  background: rgba(0,0,0,0.2);
}

.play-btn-circle {
  width: 72px; height: 72px;
  background: var(--gradient-btn);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xl);
  box-shadow: var(--shadow-glow-violet);
  transition: transform var(--duration-fast) var(--ease-bounce);
}

.play-overlay:hover .play-btn-circle {
  transform: scale(1.1);
}

/* ── MODULE LIST ── */
.module-list { display: flex; flex-direction: column; gap: var(--space-3); }

.module-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-smooth);
}

.module-item:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--accent-violet);
}

.module-item.locked { opacity: 0.5; cursor: not-allowed; }
.module-item.completed { border-color: var(--accent-green); }

.module-item .module-num {
  width: 36px; height: 36px;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--fs-sm);
  flex-shrink: 0;
}

.module-item.completed .module-num {
  background: var(--accent-green);
  color: white;
}

.module-info { flex: 1; }
.module-info h5 { font-size: var(--fs-sm); font-weight: 600; }
.module-info p { font-size: var(--fs-xs); color: var(--text-muted); }

/* ── Mobile Bottom Nav Bar ── */
.mobile-nav,.dash-mobile-tabs{display:none;position:fixed;bottom:0;left:0;right:0;z-index:9999;background:rgba(18,10,24,.96);border-top:1px solid var(--border-subtle);padding:var(--space-2) 0 env(safe-area-inset-bottom,var(--space-2));backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 -4px 20px rgba(0,0,0,.4);}
.mobile-nav-inner{display:flex;justify-content:space-around;align-items:center;max-width:500px;margin:0 auto;}
.mobile-nav-inner a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:var(--space-2) var(--space-1);font-size:10px;color:var(--text-muted);text-decoration:none;transition:all .2s;flex:1;border-radius:var(--radius-md);}
.mobile-nav-inner a .mn-icon{font-size:1.3rem;line-height:1;}
.mobile-nav-inner a.active,.mobile-nav-inner a:active{color:var(--accent-primary-light);}
.mobile-nav-inner a:hover{color:var(--accent-primary);background:rgba(212,135,143,.08);}

/* ── Footer Accordion Mobile ── */
.footer-accordion-toggle{display:none;}
.footer-col-content{display:flex;flex-direction:column;}

/* ── Quiz Responsive ── */
.quiz-container{max-width:100%;box-sizing:border-box;}
.quiz-container .card{padding:var(--space-4) !important;max-width:100%;overflow-x:hidden;}
.quiz-option{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);margin-bottom:var(--space-2);border:1px solid var(--border-subtle);border-radius:var(--radius-md);cursor:pointer;transition:all .2s;font-size:var(--fs-sm);word-break:break-word;}
.quiz-option:hover{border-color:var(--accent-primary);background:rgba(212,135,143,.05);}
.quiz-option input[type="radio"]{flex-shrink:0;accent-color:var(--accent-primary);}

/* ── Responsive 1024px ── */
@media (max-width: 1024px) {
  .hero-content{grid-template-columns:1fr;text-align:center;}
  .hero-text{margin:0 auto;}
  .hero-subtitle{margin:0 auto var(--space-8);}
  .hero-actions{justify-content:center;flex-wrap:wrap;}
  .hero-stats{justify-content:center;}
  .hero-visual{display:none;}
  .offers-grid{grid-template-columns:1fr;max-width:420px;margin:var(--space-12) auto 0;}
  .steps-grid{grid-template-columns:repeat(2,1fr);}
  .testimonials-grid{grid-template-columns:1fr;}
  .dashboard-stats{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr !important;}
}

/* ── Responsive 768px ── */
@media (max-width: 768px) {
  body{padding-bottom:70px;}
  .hero{min-height:auto;padding:calc(var(--nav-height) + var(--space-8)) 0 var(--space-10);}
  .hero-title{font-size:var(--fs-3xl) !important;}
  .hero-badge{font-size:var(--fs-xs);}
  .hero-subtitle{font-size:var(--fs-sm);}
  .hero-actions{flex-direction:column;gap:var(--space-3);}
  .hero-actions .btn{width:100%;text-align:center;}
  .hero-stats{gap:var(--space-6);}

  /* Sidebar → bottom tabs */
  .sidebar{display:none !important;}
  .dashboard-main{margin-left:0 !important;padding:var(--space-4) !important;padding-bottom:90px !important;overflow-x:hidden;}
  .dashboard-layout{display:block;}
  .dash-mobile-tabs{display:block;}
  .mobile-nav{display:block;}

  /* Prevent horizontal overflow */
  body{overflow-x:hidden;}
  .container{overflow-x:hidden;}
  .card{overflow:hidden;max-width:100%;box-sizing:border-box;}

  /* Flex wrapping */
  .dashboard-header{flex-wrap:wrap;}
  .dashboard-header .btn{width:100%;text-align:center;}

  /* Stats */
  .dashboard-stats{grid-template-columns:1fr 1fr !important;gap:var(--space-3) !important;}
  .dash-stat-card h3{font-size:var(--fs-lg) !important;}
  .dash-stat-card p{font-size:var(--fs-xs);}
  .dashboard-header{flex-direction:column;gap:var(--space-3);text-align:center;}
  .dashboard-header h2{font-size:var(--fs-xl);}

  /* Nav */
  .nav-links{display:none !important;}
  .nav-toggle{display:flex !important;}

  /* Sections */
  .section{padding:var(--space-10) 0;}
  .section-header h2{font-size:var(--fs-2xl);}
  .steps-grid{grid-template-columns:1fr !important;}
  .offers-grid{max-width:100% !important;margin-left:0 !important;margin-right:0 !important;}
  .offer-card{padding:var(--space-5) !important;}

  /* Footer accordion */
  .footer-grid{grid-template-columns:1fr !important;}
  .footer-col h4{cursor:pointer;display:flex;justify-content:space-between;align-items:center;}
  .footer-col h4::after{content:'▸';transition:transform .3s;}
  .footer-col.open h4::after{transform:rotate(90deg);}
  .footer-col-content{display:none;}
  .footer-col.open .footer-col-content{display:flex;}
  .footer-brand{text-align:center;margin-bottom:var(--space-6);}
  .footer-bottom{flex-direction:column;text-align:center;gap:var(--space-3);}

  /* Cards & grids */
  .course-card{min-width:0 !important;}
  .courses-grid{grid-template-columns:1fr !important;}
  .courses-filter{flex-wrap:wrap;gap:var(--space-2) !important;justify-content:center;}
  .filter-btn{font-size:var(--fs-xs);padding:var(--space-1) var(--space-3);}

  /* Quiz */
  .quiz-container{padding:var(--space-3);}
  .quiz-option{font-size:var(--fs-xs);padding:var(--space-2) var(--space-3);}

  /* Modal */
  .modal{width:95vw !important;max-width:95vw !important;margin:var(--space-3);max-height:90vh !important;}

  /* CTA */
  .cta-section{padding:var(--space-8) var(--space-4) !important;text-align:center;}
  .cta-section h2{font-size:var(--fs-xl) !important;}

  /* Auth */
  .auth-page{padding:var(--space-4);min-height:auto;padding-bottom:80px;}
  .auth-card{max-width:100% !important;margin:0 !important;padding:var(--space-5) !important;width:100% !important;box-sizing:border-box;}
  .auth-header h2{font-size:var(--fs-lg);}
  .auth-tabs{flex-wrap:wrap;}

  /* ── ALL inline grid 2-col → 1-col ── */
  [style*="grid-template-columns:1fr 320px"],
  [style*="grid-template-columns:1fr 340px"],
  [style*="grid-template-columns: 1fr 320px"],
  [style*="grid-template-columns: 1fr 340px"],
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns:1fr 2fr"],
  [style*="grid-template-columns: 1fr 2fr"]{grid-template-columns:1fr !important;}

  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr !important;}

  [style*="grid-template-columns:repeat(auto-fill"],
  [style*="grid-template-columns: repeat(auto-fill"]{grid-template-columns:1fr !important;}

  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3,1fr)"]{grid-template-columns:1fr !important;}

  [style*="grid-template-columns:repeat(2,1fr)"]{grid-template-columns:1fr !important;}

  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"]{grid-template-columns:1fr !important;}

  /* Module builder mobile */
  .module-builder{padding:var(--space-3);}
  .chapter-item{flex-wrap:wrap;gap:var(--space-2) !important;}
  .chapter-item input,.chapter-item select{min-width:0;font-size:var(--fs-xs) !important;}
  .chapter-item input[style*="flex:2"]{flex:1 1 100% !important;min-width:0;}
  .chapter-item select[style*="width:90px"]{width:100% !important;flex:1 1 100% !important;}

  /* Live session */
  .live-layout{grid-template-columns:1fr !important;padding:var(--space-3) !important;padding-top:calc(var(--nav-height) + var(--space-3)) !important;padding-bottom:90px !important;}
  .live-video{aspect-ratio:4/3 !important;}
  .live-controls{flex-wrap:wrap;gap:var(--space-2) !important;padding:var(--space-3) !important;}
  .live-controls button{font-size:var(--fs-xs) !important;padding:var(--space-2) !important;}
  .chat-panel{max-height:350px;}
  .chat-messages{max-height:200px !important;}
  .participants{display:none;}

  /* Partners section */
  .partners-grid{grid-template-columns:repeat(3,1fr) !important;gap:var(--space-3) !important;}

  /* Features grid */
  [id="featGrid"]{grid-template-columns:1fr !important;}

  /* Contact form */
  .contact-form{padding:var(--space-5) !important;}

  /* Course detail */
  .course-detail-layout{grid-template-columns:1fr !important;}
  .course-detail-sidebar{position:static !important;}
  .course-detail-title{font-size:var(--fs-2xl) !important;}
  [style*="position:sticky"]{position:static !important;}
  .module-item{flex-wrap:wrap;gap:var(--space-2) !important;}
  .module-item .badge{font-size:var(--fs-xs) !important;white-space:nowrap;}
  .stat-card{min-width:0 !important;}
  .video-player-container{margin-bottom:var(--space-4) !important;}
  /* Quiz modal mobile */
  #quizModal{width:95vw !important;max-width:95vw !important;padding:var(--space-4) !important;max-height:85vh !important;overflow-y:auto !important;}
  #quizModal label{padding:var(--space-3) !important;border:1px solid var(--border-subtle);border-radius:var(--radius-md);margin-bottom:var(--space-1);}
  #quizModal p{font-size:var(--fs-sm) !important;}

  /* Admin specific */
  .admin-tabs{flex-wrap:wrap;gap:var(--space-1) !important;}
  .admin-tabs button,.admin-tabs a{font-size:var(--fs-xs) !important;padding:var(--space-2) var(--space-3) !important;}
}

/* ── Responsive 480px ── */
@media (max-width: 480px) {
  .container{padding:0 var(--space-3);}
  .hero-title{font-size:var(--fs-2xl) !important;}
  .hero-stats{flex-direction:row;gap:var(--space-4);}
  .hero-stat-value{font-size:var(--fs-lg);}
  .dashboard-stats{grid-template-columns:1fr 1fr !important;}
  .offer-features li{font-size:var(--fs-xs);}
  .offer-price{font-size:var(--fs-lg);}
  .testimonial-card blockquote{font-size:var(--fs-sm);}
  .step-card{padding:var(--space-4) !important;}
  .card{border-radius:var(--radius-md);}
  .section-header p{font-size:var(--fs-sm);}
  .btn-lg{padding:var(--space-3) var(--space-5) !important;font-size:var(--fs-sm) !important;}
  .form-input{font-size:16px !important;} /* prevent iOS zoom */

  /* Type selector cards */
  [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr !important;}
}