/* ==========================================================================
   InsightLearn 2026 — Unified Pages Design System
   Covers ALL pages except Index (il-landing-2026.css) and Auth (bundle-pages.css)
   Uses !important to override CDN-cached stale scoped CSS.
   ========================================================================== */

/* ---------- Design Tokens ---------- */
:root {
  --il-primary: #6C3CE1;
  --il-primary-hover: #5a2dc7;
  --il-secondary: #00C9DB;
  --il-dark-bg: #0F0B1A;
  --il-dark-surface: #1A1432;
  --il-dark-border: rgba(255, 255, 255, 0.1);
  --il-card-bg: #fff;
  --il-card-radius: 16px;
  --il-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --il-card-shadow-hover: 0 16px 40px rgba(0, 0, 0, 0.14);
  --il-text-primary: #1f2937;
  --il-text-secondary: #6b7280;
  --il-text-muted: #9ca3af;
  --il-gradient: linear-gradient(135deg, #6C3CE1, #00C9DB);
  --il-gradient-hero: linear-gradient(160deg, #0F0B1A 0%, #1A1432 50%, #0F0B1A 100%);
  --il-glass-bg: rgba(255, 255, 255, 0.08);
  --il-glass-border: rgba(255, 255, 255, 0.12);
  --il-glass-blur: blur(12px);
  --il-page-bg: #f8fafc;
  --il-max-width: 1120px;
  --il-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --il-transition: 0.25s ease;
}

/* ==========================================================================
   1. PAGE WRAPPERS — all {prefix}-page classes
   ========================================================================== */
[class$="-page"],
.about-page, .admin-page, .analytics-page, .billing-page, .blog-page,
.cart-page, .case-studies-page, .certificates-page, .changelog-page,
.checkout-page, .console-page, .contact-page, .courses-page, .docs-page,
.edit-course-page, .enterprise-page, .faq-page, .instructor-page,
.instructor-reviews-page, .instructor-students-page, .legal-page,
.notifications-page, .order-confirmation-page, .profile-page,
.resources-page, .search-page, .solution-page, .status-page,
.tenant-page, .test-page, .wishlist-page {
  min-height: 100vh !important;
  background: var(--il-page-bg) !important;
  font-family: var(--il-font) !important;
  color: var(--il-text-primary) !important;
  line-height: 1.6 !important;
}

/* ==========================================================================
   2. HERO SECTIONS — all {prefix}-hero classes
   ========================================================================== */
[class*="-hero"]:not([class*="-hero-"]) {
  position: relative !important;
  background: var(--il-gradient-hero) !important;
  color: #fff !important;
  padding: 80px 1.5rem 60px !important;
  text-align: center !important;
  overflow: hidden !important;
  margin-top: -80px !important; /* Pull hero up into main-content padding to eliminate white gap */
  padding-top: 140px !important; /* 80px (header offset) + 60px (hero padding) */
}

[class*="-hero"] h1 {
  font-size: clamp(2rem, 4.5vw, 3rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  margin: 0 0 1rem !important;
  color: #fff !important;
  letter-spacing: -0.02em !important;
}

[class*="-hero"] > p,
[class*="-hero"] .hero-subtitle,
[class*="-hero-subtitle"] {
  font-size: 1.125rem !important;
  color: rgba(255, 255, 255, 0.75) !important;
  line-height: 1.7 !important;
  max-width: 640px !important;
  margin: 0 auto 2rem !important;
}

[class*="-hero"] .hero-glow,
[class*="-hero"]:not(.il-hero):not(.enterprise-hero)::before {
  content: '' !important;
  position: absolute !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  width: 500px !important;
  height: 500px !important;
  top: -20% !important;
  right: -10% !important;
  background: radial-gradient(circle, rgba(108, 60, 225, 0.2) 0%, rgba(0, 201, 219, 0.08) 40%, transparent 70%) !important;
}

[class*="-hero"] > *:not([class*="glow"]) {
  position: relative !important;
  z-index: 1 !important;
}

/* ==========================================================================
   3. SECTION CONTAINERS
   ========================================================================== */
.container,
[class*="-section-container"],
.section-container {
  max-width: var(--il-max-width) !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
}

[class*="-section"] {
  padding: 4rem 0 !important;
}

/* ==========================================================================
   4. SECTION HEADERS
   ========================================================================== */
[class*="-section-header"] {
  text-align: center !important;
  margin-bottom: 3rem !important;
}

[class*="-section-title"] {
  font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
  font-weight: 700 !important;
  color: var(--il-text-primary) !important;
  margin: 0 0 0.75rem !important;
  line-height: 1.2 !important;
}

[class*="-section-subtitle"] {
  font-size: 1.0625rem !important;
  color: var(--il-text-secondary) !important;
  line-height: 1.7 !important;
  max-width: 600px !important;
  margin: 0 auto !important;
}

/* ==========================================================================
   5. CARD GRIDS
   ========================================================================== */
[class*="-grid"],
.methods-grid, .category-grid, .stats-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
}

[class*="-capabilities-grid"] {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1.5rem !important;
}

/* Cards */
[class*="-card"],
.method-card, .category-card {
  background: var(--il-card-bg) !important;
  border-radius: var(--il-card-radius) !important;
  padding: 1.75rem !important;
  box-shadow: var(--il-card-shadow) !important;
  transition: transform var(--il-transition), box-shadow var(--il-transition) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

[class*="-card"]:hover,
.method-card:hover, .category-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--il-card-shadow-hover) !important;
}

[class*="-card"] h3,
.method-card h3, .category-card h3 {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: var(--il-text-primary) !important;
  margin: 0 0 0.5rem !important;
}

[class*="-card"] p,
.method-card p, .category-card p {
  font-size: 0.9375rem !important;
  color: var(--il-text-secondary) !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* Stat items */
.stat-item {
  text-align: center !important;
  padding: 1.5rem !important;
}

.stat-item .stat-value,
.stat-item h3 {
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: var(--il-primary) !important;
  margin: 0 0 0.25rem !important;
}

.stat-item .stat-label,
.stat-item p {
  font-size: 0.875rem !important;
  color: var(--il-text-muted) !important;
  margin: 0 !important;
}

/* ==========================================================================
   6. FEATURE LISTS
   ========================================================================== */
[class*="-feature"],
.feature-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 1rem !important;
  padding: 1rem 0 !important;
}

.feature-icon,
[class*="-feature-icon"] {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  background: var(--il-gradient) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 1.25rem !important;
  flex-shrink: 0 !important;
}

/* ==========================================================================
   7. BUTTONS
   ========================================================================== */
.btn,
[class*="-btn"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 0.75rem 1.75rem !important;
  font-size: 0.9375rem !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
  line-height: 1.4 !important;
}

.btn-primary,
[class*="-btn-primary"] {
  color: #fff !important;
  background: var(--il-primary) !important;
  box-shadow: 0 4px 16px rgba(108, 60, 225, 0.3) !important;
}

.btn-primary:hover,
[class*="-btn-primary"]:hover {
  background: var(--il-primary-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 24px rgba(108, 60, 225, 0.45) !important;
}

.btn-secondary,
[class*="-btn-secondary"] {
  color: #fff !important;
  background: var(--il-secondary) !important;
  box-shadow: 0 4px 16px rgba(0, 201, 219, 0.25) !important;
}

.btn-secondary:hover,
[class*="-btn-secondary"]:hover {
  background: #00b3c4 !important;
  transform: translateY(-1px) !important;
}

.btn-outline,
[class*="-btn-outline"] {
  color: var(--il-primary) !important;
  background: transparent !important;
  border: 2px solid var(--il-primary) !important;
}

.btn-outline:hover,
[class*="-btn-outline"]:hover {
  background: var(--il-primary) !important;
  color: #fff !important;
}

/* Hero button overrides (white text on dark bg) */
[class*="-hero"] .btn-outline,
[class*="-hero"] [class*="-btn-outline"] {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

[class*="-hero"] .btn-outline:hover,
[class*="-hero"] [class*="-btn-outline"]:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: #fff !important;
  color: #fff !important;
}

/* ==========================================================================
   8. FORMS
   ========================================================================== */
.form-group {
  margin-bottom: 1.25rem !important;
}

.form-label {
  display: block !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--il-text-primary) !important;
  margin-bottom: 0.375rem !important;
}

.form-input,
.form-control,
.search-input {
  width: 100% !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.9375rem !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--il-text-primary) !important;
  transition: border-color var(--il-transition), box-shadow var(--il-transition) !important;
  outline: none !important;
  font-family: inherit !important;
}

.form-input:focus,
.form-control:focus,
.search-input:focus {
  border-color: var(--il-primary) !important;
  box-shadow: 0 0 0 3px rgba(108, 60, 225, 0.12) !important;
}

.form-input::placeholder,
.form-control::placeholder,
.search-input::placeholder {
  color: var(--il-text-muted) !important;
}

textarea.form-input,
textarea.form-control {
  min-height: 120px !important;
  resize: vertical !important;
}

/* ==========================================================================
   9. ADMIN / DASHBOARD LAYOUT
   ========================================================================== */
.admin-page {
  display: flex !important;
  min-height: 100vh !important;
  background: #f3f4f6 !important;
}

.admin-page .admin-sidebar,
.admin-page [class*="-sidebar"] {
  width: 260px !important;
  background: var(--il-dark-bg) !important;
  color: #fff !important;
  padding: 1.5rem 0 !important;
  flex-shrink: 0 !important;
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  overflow-y: auto !important;
}

.admin-page .admin-sidebar a,
.admin-page [class*="-sidebar"] a {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.625rem 1.5rem !important;
  color: rgba(255, 255, 255, 0.65) !important;
  text-decoration: none !important;
  font-size: 0.875rem !important;
  transition: background var(--il-transition), color var(--il-transition) !important;
}

.admin-page .admin-sidebar a:hover,
.admin-page .admin-sidebar a.active,
.admin-page [class*="-sidebar"] a:hover,
.admin-page [class*="-sidebar"] a.active {
  background: rgba(108, 60, 225, 0.2) !important;
  color: #fff !important;
}

.admin-page .admin-main,
.admin-page [class*="-main"] {
  flex: 1 !important;
  padding: 2rem !important;
  min-width: 0 !important;
}

.admin-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 2rem !important;
}

.admin-header h1 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--il-text-primary) !important;
  margin: 0 !important;
}

.admin-card {
  background: #fff !important;
  border-radius: var(--il-card-radius) !important;
  padding: 1.5rem !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
  margin-bottom: 1.5rem !important;
}

/* Data tables */
.admin-table,
[class*="-table"] table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 0.875rem !important;
}

.admin-table th,
[class*="-table"] th {
  text-align: left !important;
  padding: 0.75rem 1rem !important;
  font-weight: 600 !important;
  color: var(--il-text-secondary) !important;
  border-bottom: 2px solid #e5e7eb !important;
  font-size: 0.8125rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.admin-table td,
[class*="-table"] td {
  padding: 0.75rem 1rem !important;
  border-bottom: 1px solid #f3f4f6 !important;
  color: var(--il-text-primary) !important;
}

.admin-table tr:hover,
[class*="-table"] tr:hover {
  background: #f9fafb !important;
}

/* ==========================================================================
   10. STATUS / BADGE COMPONENTS
   ========================================================================== */
.status-badge, .badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.25rem 0.75rem !important;
  border-radius: 9999px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  gap: 0.375rem !important;
}

.status-indicator {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  display: inline-block !important;
}

/* Status variants */
.badge-success, .status-badge.success,
.badge[class*="success"], .status-badge[class*="success"] {
  background: #ecfdf5 !important;
  color: #059669 !important;
}

.badge-warning, .status-badge.warning,
.badge[class*="warning"], .status-badge[class*="warning"] {
  background: #fef3c7 !important;
  color: #d97706 !important;
}

.badge-danger, .status-badge.danger, .status-badge.error,
.badge[class*="danger"], .badge[class*="error"] {
  background: #fef2f2 !important;
  color: #dc2626 !important;
}

.badge-info, .status-badge.info,
.badge[class*="info"] {
  background: #ecfeff !important;
  color: #0891b2 !important;
}

.badge-primary, .status-badge.primary {
  background: rgba(108, 60, 225, 0.1) !important;
  color: var(--il-primary) !important;
}

.status-indicator.online { background: #10b981 !important; }
.status-indicator.offline { background: #ef4444 !important; }
.status-indicator.warning { background: #f59e0b !important; }

/* ==========================================================================
   11. FAQ ACCORDION
   ========================================================================== */
.faq-item {
  background: var(--il-card-bg) !important;
  border-radius: var(--il-card-radius) !important;
  margin-bottom: 0.75rem !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  overflow: hidden !important;
}

.faq-question {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 1.25rem 1.5rem !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--il-text-primary) !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: color var(--il-transition) !important;
}

.faq-question:hover {
  color: var(--il-primary) !important;
}

.faq-toggle {
  width: 24px !important;
  height: 24px !important;
  flex-shrink: 0 !important;
  transition: transform 0.3s ease !important;
  color: var(--il-text-muted) !important;
}

.faq-item.active .faq-toggle {
  transform: rotate(45deg) !important;
}

.faq-answer {
  padding: 0 1.5rem 1.25rem !important;
  font-size: 0.9375rem !important;
  color: var(--il-text-secondary) !important;
  line-height: 1.7 !important;
}

/* ==========================================================================
   12. PRICING TABLES
   ========================================================================== */
.pricing-card {
  background: var(--il-card-bg) !important;
  border-radius: var(--il-card-radius) !important;
  padding: 2.5rem 2rem !important;
  text-align: center !important;
  border: 2px solid transparent !important;
  box-shadow: var(--il-card-shadow) !important;
  transition: transform var(--il-transition), box-shadow var(--il-transition) !important;
  position: relative !important;
}

.pricing-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--il-card-shadow-hover) !important;
}

.pricing-card.featured, .pricing-card.popular {
  border-color: var(--il-primary) !important;
  box-shadow: 0 8px 32px rgba(108, 60, 225, 0.18) !important;
}

.pricing-header {
  margin-bottom: 1.5rem !important;
}

.pricing-header h3 {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--il-text-primary) !important;
  margin: 0 0 0.5rem !important;
}

.pricing-price {
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  color: var(--il-primary) !important;
  line-height: 1.2 !important;
  margin: 0.5rem 0 !important;
}

.pricing-price span {
  font-size: 1rem !important;
  font-weight: 400 !important;
  color: var(--il-text-muted) !important;
}

.pricing-features {
  list-style: none !important;
  padding: 0 !important;
  margin: 1.5rem 0 2rem !important;
  text-align: left !important;
}

.pricing-features li {
  padding: 0.5rem 0 !important;
  font-size: 0.9375rem !important;
  color: var(--il-text-secondary) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.625rem !important;
}

.pricing-features li::before {
  content: '\2713' !important;
  color: var(--il-secondary) !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}

/* ==========================================================================
   13. TIMELINE / STEPS
   ========================================================================== */
.timeline {
  position: relative !important;
  padding-left: 2rem !important;
}

.timeline::before {
  content: '' !important;
  position: absolute !important;
  left: 15px !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 2px !important;
  background: var(--il-gradient) !important;
  opacity: 0.3 !important;
}

.step {
  display: flex !important;
  align-items: flex-start !important;
  gap: 1.25rem !important;
  margin-bottom: 2rem !important;
  position: relative !important;
}

.step-number {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: var(--il-gradient) !important;
  color: #fff !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 12px rgba(108, 60, 225, 0.25) !important;
}

.step-content h3 {
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  color: var(--il-text-primary) !important;
  margin: 0 0 0.375rem !important;
}

.step-content p {
  font-size: 0.9375rem !important;
  color: var(--il-text-secondary) !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* ==========================================================================
   14. TESTIMONIALS / REVIEWS
   ========================================================================== */
.review-card {
  background: var(--il-card-bg) !important;
  border-radius: var(--il-card-radius) !important;
  padding: 1.75rem !important;
  box-shadow: var(--il-card-shadow) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.review-header {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  margin-bottom: 1rem !important;
}

.review-header img,
.review-header .review-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

.review-header .review-name {
  font-weight: 600 !important;
  color: var(--il-text-primary) !important;
  font-size: 0.9375rem !important;
}

.review-header .review-role {
  font-size: 0.8125rem !important;
  color: var(--il-text-muted) !important;
}

.review-stars {
  display: flex !important;
  gap: 0.125rem !important;
  color: #f59e0b !important;
  font-size: 0.875rem !important;
  margin-bottom: 0.75rem !important;
}

.review-card p,
.review-card .review-text {
  font-size: 0.9375rem !important;
  color: var(--il-text-secondary) !important;
  line-height: 1.7 !important;
  margin: 0 !important;
  font-style: italic !important;
}

/* ==========================================================================
   GLASSMORPHISM VARIANT (dark sections)
   ========================================================================== */
[class*="-dark"] [class*="-card"],
.glass-card {
  background: var(--il-glass-bg) !important;
  border: 1px solid var(--il-glass-border) !important;
  backdrop-filter: var(--il-glass-blur) !important;
  -webkit-backdrop-filter: var(--il-glass-blur) !important;
}

[class*="-dark"] [class*="-card"]:hover,
.glass-card:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

[class*="-dark"] [class*="-card"] h3,
.glass-card h3 { color: #fff !important; }

[class*="-dark"] [class*="-card"] p,
.glass-card p { color: rgba(255, 255, 255, 0.65) !important; }

[class*="-dark"] [class*="-section-title"] { color: #fff !important; }
[class*="-dark"] [class*="-section-subtitle"] { color: rgba(255, 255, 255, 0.6) !important; }

/* ==========================================================================
   CARD ICON BADGES (shared across features/capabilities)
   ========================================================================== */
[class*="-card-icon"],
[class*="-icon-wrapper"] {
  width: 56px !important;
  height: 56px !important;
  border-radius: 14px !important;
  background: var(--il-gradient) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 1.375rem !important;
  margin-bottom: 1rem !important;
}

/* ==========================================================================
   LINK STYLES (within pages)
   ========================================================================== */
[class$="-page"] a:not(.btn):not([class*="-btn"]):not([class*="nav"]):not([class*="sidebar"]) {
  color: var(--il-primary) !important;
  text-decoration: none !important;
  transition: color var(--il-transition) !important;
}

[class$="-page"] a:not(.btn):not([class*="-btn"]):not([class*="nav"]):not([class*="sidebar"]):hover {
  color: var(--il-primary-hover) !important;
  text-decoration: underline !important;
}

/* ==========================================================================
   EMPTY / LOADING STATES
   ========================================================================== */
.empty-state,
[class*="-empty"] {
  text-align: center !important;
  padding: 3rem 1.5rem !important;
  color: var(--il-text-muted) !important;
}

.empty-state h3,
[class*="-empty"] h3 {
  font-size: 1.25rem !important;
  color: var(--il-text-secondary) !important;
  margin: 1rem 0 0.5rem !important;
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.pagination {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.375rem !important;
  margin-top: 2rem !important;
}

.pagination a, .pagination button, .pagination span {
  padding: 0.5rem 0.875rem !important;
  border-radius: 8px !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  border: 1px solid #e5e7eb !important;
  background: #fff !important;
  color: var(--il-text-primary) !important;
  transition: all var(--il-transition) !important;
  cursor: pointer !important;
}

.pagination .active,
.pagination [aria-current="page"] {
  background: var(--il-primary) !important;
  color: #fff !important;
  border-color: var(--il-primary) !important;
}

/* ==========================================================================
   NOTIFICATION ITEMS
   ========================================================================== */
.notification-item,
[class*="notification-card"] {
  display: flex !important;
  gap: 1rem !important;
  padding: 1rem 1.25rem !important;
  border-bottom: 1px solid #f3f4f6 !important;
  transition: background var(--il-transition) !important;
}

.notification-item:hover,
[class*="notification-card"]:hover {
  background: #f9fafb !important;
}

.notification-item.unread,
[class*="notification-card"].unread {
  background: rgba(108, 60, 225, 0.04) !important;
  border-left: 3px solid var(--il-primary) !important;
}

/* ==========================================================================
   TABS
   ========================================================================== */
.tabs, [class*="-tabs"] {
  display: flex !important;
  border-bottom: 2px solid #e5e7eb !important;
  gap: 0 !important;
  margin-bottom: 2rem !important;
}

.tab, [class*="-tab"] {
  padding: 0.75rem 1.25rem !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  color: var(--il-text-secondary) !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
  cursor: pointer !important;
  transition: color var(--il-transition), border-color var(--il-transition) !important;
  background: none !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

.tab.active, [class*="-tab"].active,
.tab:hover, [class*="-tab"]:hover {
  color: var(--il-primary) !important;
  border-bottom-color: var(--il-primary) !important;
}

/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */

/* Tablet: <= 1023px */
@media (max-width: 1023px) {
  [class*="-grid"],
  .methods-grid, .category-grid, .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

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

  [class*="-hero"] {
    padding: 120px 1.25rem 48px !important; /* 80px header + 40px hero */
    margin-top: -80px !important;
  }

  [class*="-hero"] h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
  }

  .admin-page .admin-sidebar,
  .admin-page [class*="-sidebar"] {
    width: 220px !important;
  }

  .pricing-card {
    padding: 2rem 1.5rem !important;
  }
}

/* Mobile: <= 767px */
@media (max-width: 767px) {
  [class*="-grid"],
  .methods-grid, .category-grid, .stats-grid,
  [class*="-capabilities-grid"] {
    grid-template-columns: 1fr !important;
  }

  [class*="-hero"] {
    padding: 112px 1rem 36px !important; /* 80px header + 32px hero */
    margin-top: -80px !important;
  }

  [class*="-hero"] h1 {
    font-size: 1.625rem !important;
  }

  [class*="-hero"] > p,
  [class*="-hero-subtitle"] {
    font-size: 1rem !important;
  }

  [class*="-section"] {
    padding: 2.5rem 0 !important;
  }

  [class*="-section-title"] {
    font-size: 1.375rem !important;
  }

  .container,
  [class*="-section-container"],
  .section-container {
    padding: 0 1rem !important;
  }

  /* Admin: stack sidebar below on mobile */
  .admin-page {
    flex-direction: column !important;
  }

  .admin-page .admin-sidebar,
  .admin-page [class*="-sidebar"] {
    width: 100% !important;
    height: auto !important;
    position: static !important;
    padding: 1rem 0 !important;
  }

  .admin-page .admin-main,
  .admin-page [class*="-main"] {
    padding: 1rem !important;
  }

  .admin-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }

  /* Table horizontal scroll on mobile */
  .admin-table,
  [class*="-table"] {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .btn, [class*="-btn"] {
    padding: 0.625rem 1.25rem !important;
    font-size: 0.875rem !important;
  }

  .pricing-price {
    font-size: 2rem !important;
  }

  .step {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  .timeline {
    padding-left: 0 !important;
  }

  .timeline::before {
    display: none !important;
  }

  .tabs, [class*="-tabs"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .tab, [class*="-tab"] {
    white-space: nowrap !important;
    font-size: 0.875rem !important;
    padding: 0.625rem 1rem !important;
  }

  .review-header {
    flex-direction: column !important;
    text-align: center !important;
  }
}

/* Small mobile: <= 480px */
@media (max-width: 480px) {
  [class*="-hero"] h1 {
    font-size: 1.375rem !important;
  }

  .pricing-card {
    padding: 1.5rem 1rem !important;
  }

  [class*="-card"],
  .method-card, .category-card {
    padding: 1.25rem !important;
  }
}