/**
 * Max Exam Lab - Centralized Global Design System (Concept 6)
 * Establishes universal color tokens, Inter typography, orbital ring branding,
 * and dark-glass component styling across all pages and views.
 */

:root {
  /* Core Concept 6 Palette */
  --bg-main: #07131c;
  --bg-surface: #0f1b29;
  --bg-surface-elevated: #132437;
  --bg-surface-glass: rgba(15, 27, 41, 0.78);

  /* Cyan Accents */
  --cyan-primary: #4feef1;
  --cyan-bright: #84fbf6;
  --cyan-neon: #79f4f0;
  --cyan-glow: rgba(79, 238, 241, 0.28);
  --cyan-dim: rgba(79, 238, 241, 0.12);

  /* Typography Colors */
  --text-primary: #eefaff;
  --text-muted: #a8b7c0;
  --text-dim: #718794;

  /* Logo Identity */
  --logo-max: #f4fbff;
  --logo-lab: #70eef0;
  --logo-tagline: #86a6b2;

  /* Borders & Rules */
  --border-subtle: rgba(79, 238, 241, 0.16);
  --border-medium: rgba(79, 238, 241, 0.32);
  --border-active: rgba(79, 238, 241, 0.65);
  --border-glass: rgba(255, 255, 255, 0.08);

  /* Functional Status */
  --status-free: #61e7e8;
  --status-free-bg: rgba(97, 231, 232, 0.12);
  --status-premium: #ffd36f;
  --status-premium-bg: rgba(255, 211, 111, 0.14);
  --status-success: #5ee4a8;
  --status-danger: #ff6e85;

  /* Typography Scale & Font */
  --font-system: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* Universal Typography & Reset */
html {
  background-color: var(--bg-main) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-system) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--bg-main) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-system) !important;
}

h1, h2, h3, h4, h5, h6, p, span, button, a, input, select, textarea {
  font-family: var(--font-system) !important;
}

/* ============================================================
   CANONICAL ORBITAL RING LOGO MARK & WORDMARK
   ============================================================ */
.max-brand-lockup,
.brand-clickable {
  display: inline-flex !important;
  align-items: center !important;
  gap: 13px !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  text-align: left !important;
  opacity: 1 !important;
  filter: none !important;
  color: inherit !important;
}

.brand-orbit-mark {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  border: 3.5px solid var(--cyan-primary) !important;
  border-right-color: rgba(79, 238, 241, 0.25) !important;
  box-shadow: 0 0 16px var(--cyan-glow), inset 0 0 8px rgba(79, 238, 241, 0.22) !important;
  position: relative !important;
  flex: 0 0 38px !important;
  display: block !important;
  opacity: 1 !important;
  box-sizing: border-box !important;
}

.brand-orbit-mark::before {
  content: "" !important;
  position: absolute !important;
  inset: 5px !important;
  border-radius: 50% !important;
  border: 1.8px solid rgba(132, 251, 246, 0.55) !important;
  box-sizing: border-box !important;
}

.brand-orbit-mark::after {
  content: "" !important;
  position: absolute !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  right: -3px !important;
  top: 2px !important;
  box-shadow: 0 0 10px var(--cyan-neon), 0 0 4px #ffffff !important;
}

.brand-wordmark {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  line-height: 1.15 !important;
  text-align: left !important;
  opacity: 1 !important;
}

.brand-wordmark strong,
.brand-wordmark .brand-wordmark-row {
  font-family: var(--font-system) !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  color: var(--logo-max) !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
}

.brand-wordmark .brand-max {
  color: var(--logo-max) !important;
  font-weight: 800 !important;
}

.brand-wordmark .brand-examlab {
  color: var(--logo-lab) !important;
  font-weight: 800 !important;
}

.brand-wordmark small,
.brand-wordmark .brand-tagline {
  margin-top: 3px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  color: var(--logo-tagline) !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  display: block !important;
}

/* ============================================================
   GLOBAL DARK GLASS HEADER & NAVIGATION
   ============================================================ */
.site-header,
.sitebar,
.topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: rgba(7, 19, 28, 0.88) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45) !important;
}

.header-quick-link,
.topbar a:not(.max-brand-lockup),
.sitebar .nav a {
  color: var(--text-muted) !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.header-quick-link:hover,
.topbar a:not(.max-brand-lockup):hover,
.sitebar .nav a:hover,
.header-quick-link.active {
  color: var(--cyan-bright) !important;
  background: rgba(79, 238, 241, 0.08) !important;
  text-shadow: 0 0 10px rgba(79, 238, 241, 0.35) !important;
}

/* Header Buttons */
.account-btn,
.sitebar .btn,
.topbar .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 18px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

.account-btn:hover,
.sitebar .btn:hover,
.topbar .btn:hover {
  border-color: var(--cyan-primary) !important;
  color: #ffffff !important;
  background: rgba(79, 238, 241, 0.12) !important;
  box-shadow: 0 0 14px var(--cyan-glow) !important;
  transform: translateY(-1px) !important;
}

.account-btn.primary,
.sitebar .btn.primary,
.topbar .btn.primary {
  background: linear-gradient(135deg, #0c7572, #1ba39d) !important;
  border-color: var(--cyan-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 0 18px rgba(79, 238, 241, 0.35) !important;
}

.account-btn.primary:hover,
.sitebar .btn.primary:hover,
.topbar .btn.primary:hover {
  background: linear-gradient(135deg, #14938f, #24b8b2) !important;
  border-color: var(--cyan-neon) !important;
  box-shadow: 0 0 24px rgba(121, 244, 240, 0.55) !important;
}

/* User Profile Trigger */
.profile-trigger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 14px 6px 8px !important;
  border-radius: 999px !important;
  background: rgba(15, 27, 41, 0.8) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.profile-trigger:hover {
  border-color: var(--cyan-primary) !important;
  box-shadow: 0 0 14px var(--cyan-glow) !important;
}

.profile-avatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #0c7572, #1ba39d) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  border: 1.5px solid var(--cyan-bright) !important;
}

.profile-trigger-copy strong,
#accountChip {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

.profile-trigger-copy small {
  font-family: var(--font-body) !important;
  font-size: 9px !important;
  color: var(--text-muted) !important;
}

.account-panel {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-medium) !important;
  border-radius: 20px !important;
  box-shadow: 0 22px 65px rgba(0, 0, 0, 0.6), 0 0 24px var(--cyan-glow) !important;
  color: var(--text-primary) !important;
}

.account-panel::before {
  background: var(--bg-surface) !important;
  border-left: 1px solid var(--border-medium) !important;
  border-top: 1px solid var(--border-medium) !important;
}

.account-panel h3 {
  color: #ffffff !important;
  font-family: var(--font-body) !important;
}

.account-meta {
  color: var(--text-muted) !important;
}

.account-stat {
  background: var(--bg-surface-elevated) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 12px !important;
}

.account-stat strong {
  color: var(--cyan-bright) !important;
  font-family: var(--font-body) !important;
}

.account-stat span {
  color: var(--text-muted) !important;
}

.account-menu-link {
  background: var(--bg-surface-elevated) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 12px !important;
  color: var(--text-primary) !important;
  transition: all 0.15s ease !important;
}

.account-menu-link:hover {
  background: rgba(79, 238, 241, 0.12) !important;
  border-color: var(--cyan-primary) !important;
  color: #ffffff !important;
}

.account-menu-link strong {
  color: #ffffff !important;
}

.account-menu-link small {
  color: var(--text-muted) !important;
}

.account-menu-link .menu-icon {
  background: rgba(79, 238, 241, 0.15) !important;
  color: var(--cyan-bright) !important;
  border-radius: 8px !important;
}

.account-signout {
  background: rgba(255, 110, 133, 0.08) !important;
  border: 1px solid rgba(255, 110, 133, 0.3) !important;
  border-radius: 11px !important;
  color: #ff8fa0 !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  transition: all 0.15s ease !important;
}

.account-signout:hover {
  background: #ff6e85 !important;
  color: #07131c !important;
  border-color: #ff6e85 !important;
}

/* Language Menu */
.language-menu-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 12px !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-subtle) !important;
  background: rgba(15, 27, 41, 0.6) !important;
  color: var(--text-primary) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.language-menu-toggle:hover {
  border-color: var(--cyan-primary) !important;
  background: rgba(79, 238, 241, 0.08) !important;
}

.language-menu-list {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-medium) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(16px) !important;
  padding: 6px !important;
}

.language-menu-list button {
  color: var(--text-primary) !important;
  border-radius: 6px !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.language-menu-list button:hover,
.language-menu-list button.active {
  background: rgba(79, 238, 241, 0.12) !important;
  color: var(--cyan-bright) !important;
}

/* ============================================================
   GLOBAL CARD & SURFACE STANDARDS
   ============================================================ */
.glass-card,
.info-card,
.support-card {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 18px !important;
  padding: 24px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(12px) !important;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

.glass-card:hover,
.info-card:hover,
.support-card:hover {
  border-color: var(--cyan-primary) !important;
  box-shadow: 0 12px 36px var(--cyan-glow) !important;
  transform: translateY(-2px) !important;
}

/* Badges */
.badge-free {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--status-free) !important;
  background: var(--status-free-bg) !important;
  border: 1px solid rgba(97, 231, 232, 0.35) !important;
}

.badge-premium {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--status-premium) !important;
  background: var(--status-premium-bg) !important;
  border: 1px solid rgba(255, 211, 111, 0.45) !important;
  box-shadow: 0 0 10px rgba(255, 211, 111, 0.2) !important;
}

/* ============================================================
   EXAM & IELTS DARK-COCKPIT ENGINE PROTECTION
   Guarantees visual continuity with Concept 6 across all exam views
   ============================================================ */
#view-ielts-exam,
#view-exam,
.view-exam {
  background: var(--bg-main) !important;
  color: var(--text-primary) !important;
}

#view-ielts-exam .reading-passage-pane {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
  color: var(--text-primary) !important;
}

#view-ielts-exam .reading-passage-pane .rp-title {
  color: #ffffff !important;
  font-family: var(--font-body) !important;
  font-weight: 800 !important;
}

#view-ielts-exam .reading-passage-pane p {
  color: var(--text-primary) !important;
  font-family: var(--font-body) !important;
}

#view-ielts-exam .rp-passage-tab {
  background: var(--bg-surface-elevated) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 8px !important;
  color: var(--text-muted) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  transition: all 0.15s ease !important;
}

#view-ielts-exam .rp-passage-tab:hover {
  color: #ffffff !important;
  border-color: var(--cyan-primary) !important;
}

#view-ielts-exam .rp-passage-tab.active {
  border-color: var(--cyan-primary) !important;
  color: var(--cyan-bright) !important;
  font-weight: 800 !important;
  background: rgba(79, 238, 241, 0.15) !important;
  box-shadow: 0 0 12px var(--cyan-glow) !important;
}

#view-ielts-exam .navigator,
#ieltsNavigator {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35) !important;
  color: var(--text-primary) !important;
}

#view-ielts-exam .nav-header,
#ieltsNavigator .nav-header {
  color: var(--cyan-bright) !important;
  font-family: var(--font-body) !important;
  font-weight: 800 !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

#view-ielts-exam .ielts-qblock {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
  color: var(--text-primary) !important;
}

#view-ielts-exam .ielts-q-num {
  background: var(--cyan-primary) !important;
  color: #07131c !important;
  font-family: var(--font-body) !important;
  font-weight: 800 !important;
  border-radius: 4px !important;
}

#view-ielts-exam .ielts-choice-btn {
  background: var(--bg-surface-elevated) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 8px !important;
  color: var(--text-primary) !important;
  transition: all 0.15s ease !important;
}

#view-ielts-exam .ielts-choice-btn:hover {
  border-color: var(--cyan-primary) !important;
  background: rgba(79, 238, 241, 0.12) !important;
  color: #ffffff !important;
}

#view-ielts-exam .ielts-choice-btn.correct {
  border-color: var(--correct) !important;
  background: rgba(94, 228, 168, 0.15) !important;
  color: var(--correct) !important;
  font-weight: 700 !important;
}

#view-ielts-exam .ielts-choice-btn.wrong {
  border-color: var(--wrong) !important;
  background: rgba(255, 110, 133, 0.15) !important;
  color: var(--wrong) !important;
}

#view-ielts-exam .ielts-check-checkbox {
  background: var(--bg-surface-elevated) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 8px !important;
  color: var(--text-primary) !important;
  transition: all 0.15s ease !important;
}

#view-ielts-exam .ielts-check-checkbox:hover {
  border-color: var(--cyan-primary) !important;
  background: rgba(79, 238, 241, 0.12) !important;
  color: #ffffff !important;
}

#view-ielts-exam .gap-input,
.gap-input {
  background: rgba(19, 36, 55, 0.85) !important;
  color: #eefaff !important;
  border: none !important;
  border-bottom: 2px solid var(--cyan-primary) !important;
  border-radius: 4px !important;
  font-family: var(--font-body) !important;
}

#view-ielts-exam .gap-input:focus,
.gap-input:focus {
  outline: none !important;
  border-bottom-color: var(--cyan-bright) !important;
  background: var(--bg-surface-elevated) !important;
  box-shadow: 0 0 8px var(--cyan-glow) !important;
}

#view-ielts-exam .match-input {
  background: var(--bg-surface-elevated) !important;
  color: #eefaff !important;
  border: 1px solid var(--border-medium) !important;
  border-radius: 6px !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
}

#view-ielts-exam .startover-btn,
.startover-btn {
  background: rgba(255, 110, 133, 0.1) !important;
  color: #ff8fa0 !important;
  border: 1px solid rgba(255, 110, 133, 0.35) !important;
  border-radius: 8px !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  transition: all 0.15s ease !important;
}

#view-ielts-exam .startover-btn:hover,
.startover-btn:hover {
  background: #ff6e85 !important;
  color: #07131c !important;
  border-color: #ff6e85 !important;
}

#view-ielts-exam .pn-btn,
.pn-btn {
  background: var(--bg-surface-elevated) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 8px !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  transition: all 0.15s ease !important;
}

#view-ielts-exam .pn-btn:hover:not(:disabled),
.pn-btn:hover:not(:disabled) {
  background: rgba(79, 238, 241, 0.15) !important;
  border-color: var(--cyan-primary) !important;
  color: #ffffff !important;
}

#view-ielts-exam .nav-btn,
.nav-btn {
  background: var(--bg-surface-elevated) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 6px !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  transition: all 0.12s ease !important;
}

#view-ielts-exam .nav-btn:hover,
.nav-btn:hover {
  border-color: var(--cyan-primary) !important;
  background: rgba(79, 238, 241, 0.18) !important;
  color: #ffffff !important;
}

#view-ielts-exam .nav-btn.correct,
.nav-btn.correct {
  background: var(--correct) !important;
  border-color: var(--correct) !important;
  color: #07131c !important;
  font-weight: 800 !important;
}

#view-ielts-exam .nav-btn.wrong,
.nav-btn.wrong {
  background: var(--wrong-bg) !important;
  border-color: var(--wrong) !important;
  color: var(--wrong) !important;
}

#view-ielts-exam .ielts-task-box,
#view-ielts-exam .speaking-part-box,
#view-ielts-exam .ielts-notes {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 14px !important;
  color: var(--text-primary) !important;
}

#view-ielts-exam .ielts-table {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
}

#view-ielts-exam .ielts-table th {
  background: var(--bg-surface-elevated) !important;
  color: var(--cyan-bright) !important;
  border-color: var(--border-subtle) !important;
}

#view-ielts-exam .ielts-table td {
  border-color: var(--border-subtle) !important;
  color: var(--text-primary) !important;
}

.context-back,
#contextExit,
.context-exit {
  background: rgba(19, 36, 55, 0.7) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 999px !important;
  color: var(--text-primary) !important;
  font-family: var(--font-system) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 7px 16px !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
}

.context-back:hover,
#contextExit:hover,
.context-exit:hover {
  color: var(--cyan-primary) !important;
  border-color: var(--cyan-primary) !important;
  background: rgba(79, 238, 241, 0.14) !important;
  box-shadow: 0 0 12px var(--cyan-glow) !important;
}

/* ============================================================
   EXAM SELECTION VIEWS (YDS, YÖKDİL, PROFICIENCY, IELTS)
   ============================================================ */
#view-versions,
.view-versions {
  background: var(--bg-main) !important;
  color: var(--text-primary) !important;
}

.versions-wrap {
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 34px 24px 68px !important;
}

.versions-eyebrow {
  color: var(--cyan-primary) !important;
  font-family: var(--font-system) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}

.versions-title {
  color: #ffffff !important;
  font-family: var(--font-system) !important;
  font-weight: 800 !important;
  font-size: clamp(32px, 4.5vw, 50px) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.05 !important;
  margin: 0 0 8px !important;
}

.versions-sub {
  color: var(--text-muted) !important;
  font-family: var(--font-system) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  margin: 0 0 32px !important;
}

.version-card:not(.ultimate-premium-card) {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-system) !important;
  padding: 24px 26px !important;
  transition: all 0.2s ease !important;
}

.version-card:not(.ultimate-premium-card):hover,
.version-card:not(.ultimate-premium-card):focus-visible {
  border-color: var(--border-active) !important;
  background: var(--bg-surface-elevated) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 18px var(--cyan-glow) !important;
  transform: translateY(-2px) !important;
}

.version-card .version-label {
  color: #ffffff !important;
  font-family: var(--font-system) !important;
  font-weight: 700 !important;
  font-size: 20px !important;
}

.version-card .version-progress {
  color: var(--text-muted) !important;
  font-family: var(--font-system) !important;
  font-size: 12px !important;
}

.version-go {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: var(--cyan-primary) !important;
  background: rgba(79, 238, 241, 0.1) !important;
  border: 1px solid rgba(79, 238, 241, 0.3) !important;
  border-radius: 999px !important;
  padding: 9px 16px !important;
  font-family: var(--font-system) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.version-go:hover {
  background: var(--cyan-primary) !important;
  color: #07131c !important;
  border-color: var(--cyan-bright) !important;
  box-shadow: 0 0 14px var(--cyan-glow) !important;
}

/* Hide duplicate context title in header during version selection */
body.max-category-selection-mode .context-title,
body.max-category-selection-mode .context-sub,
body.max-ielts-selection-mode .context-title,
body.max-ielts-selection-mode .context-sub,
body.max-ielts-book-mode .context-title,
body.max-ielts-book-mode .context-sub {
  display: none !important;
}

.context-row {
  background: transparent !important;
  border: none !important;
}

.context-title {
  color: #ffffff !important;
  font-family: var(--font-system) !important;
  font-weight: 700 !important;
}

.context-sub {
  color: var(--text-muted) !important;
  font-family: var(--font-system) !important;
}




/* MAX review theme compliance layer, 2026-09-18.
   Preview branch only. Canonical values follow docs/MAX-DESIGN-STANDARD.md. */
html[data-theme="light"]{
  --max-bg:#F5F9FB;--max-surface:#FFFFFF;--max-surface-elevated:#EDF4F7;
  --max-text:#10232E;--max-text-secondary:#526873;--max-text-muted:#637985;
  --max-border:#BFD1D9;--max-accent:#087F89;--max-accent-strong:#066A73;
  --max-success:#087A4B;--max-success-surface:#E5F7EF;
  --max-error:#B42335;--max-error-surface:#FDEBED;
  --max-elevation:0 16px 40px rgba(16,35,46,.12);
}
html[data-theme="dark"]{
  --max-bg:#07131C;--max-surface:#0F1B29;--max-surface-elevated:#132437;
  --max-text:#EEFAFF;--max-text-secondary:#A8B7C0;--max-text-muted:#8FA2AD;
  --max-border:rgba(79,238,241,.22);--max-accent:#4FEEF1;--max-accent-strong:#20CFD4;
  --max-success:#39E58C;--max-success-surface:rgba(57,229,140,.14);
  --max-error:#FF5F6D;--max-error-surface:rgba(255,95,109,.14);
  --max-elevation:0 18px 45px rgba(0,0,0,.28);
}
html[data-theme] body{background-color:var(--max-bg);color:var(--max-text)}
html[data-theme] .context-title,html[data-theme] .version-card .version-label{color:var(--max-text)!important}
html[data-theme] .context-sub,html[data-theme] .version-card .version-progress{color:var(--max-text-secondary)!important}


/* Review fix 1: light header parity for IELTS, YDS and YOKDIL.
   Match the approved Proficiency / English Practice / Games light shell. */
html[data-theme="light"] .site-header,
html[data-theme="light"] .sitebar,
html[data-theme="light"] .topbar{
  background:rgba(255,255,255,.96)!important;
  color:#10232e!important;
  border-bottom-color:#d7e3e8!important;
  box-shadow:0 4px 18px rgba(16,35,46,.08)!important;
}
html[data-theme="light"] .brand-wordmark strong,
html[data-theme="light"] .brand-wordmark .brand-wordmark-row,
html[data-theme="light"] .brand-wordmark .brand-max{color:#10232e!important}
html[data-theme="light"] .brand-wordmark .brand-examlab{color:#10232e!important}
html[data-theme="light"] .brand-wordmark small,
html[data-theme="light"] .brand-wordmark .brand-tagline{color:#637985!important}
html[data-theme="light"] .header-quick-link,
html[data-theme="light"] .topbar a:not(.max-brand-lockup),
html[data-theme="light"] .sitebar .nav a{color:#526873!important}
html[data-theme="light"] .header-quick-link:hover,
html[data-theme="light"] .topbar a:not(.max-brand-lockup):hover,
html[data-theme="light"] .sitebar .nav a:hover,
html[data-theme="light"] .header-quick-link.active{
  color:#087f89!important;background:#edf4f7!important;text-shadow:none!important;
}
html[data-theme="light"] .account-btn,
html[data-theme="light"] .sitebar .btn,
html[data-theme="light"] .topbar .btn{
  background:#fff!important;color:#10232e!important;border-color:#b9cbd3!important;
  box-shadow:0 4px 14px rgba(16,35,46,.08)!important;
}
html[data-theme="light"] .account-btn.primary,
html[data-theme="light"] .sitebar .btn.primary,
html[data-theme="light"] .topbar .btn.primary{
  background:#087f89!important;color:#fff!important;border-color:#087f89!important;
}
html[data-theme="light"] .max-theme-toggle{background:#fff!important;color:#10232e!important;border-color:#bfd1d9!important}
html[data-theme="light"] .context-row{background:#fff!important;border-bottom:1px solid #d7e3e8!important}
html[data-theme="light"] .context-row .back-link,
html[data-theme="light"] .context-row .context-action,
html[data-theme="light"] .context-row a,
html[data-theme="light"] .context-row button{
  background:#fff!important;color:#10232e!important;border-color:#bfd1d9!important;
  box-shadow:0 4px 14px rgba(16,35,46,.06)!important;
}
html[data-theme="light"] .context-row .back-link:hover,
html[data-theme="light"] .context-row .context-action:hover,
html[data-theme="light"] .context-row a:hover,
html[data-theme="light"] .context-row button:hover{
  color:#087f89!important;border-color:#087f89!important;background:#edf4f7!important;
}


/* Review fix 2: canonical context navigation buttons.
   Keep Previous Page / Exit to Exams aligned with the site accent in both modes. */
html[data-theme="light"] .context-row .context-back,
html[data-theme="light"] .context-row #contextExit,
html[data-theme="light"] .context-row .context-exit{
  background:#FFFFFF!important;
  color:#087F89!important;
  border:1px solid #087F89!important;
  box-shadow:0 4px 14px rgba(16,35,46,.06)!important;
}
html[data-theme="light"] .context-row .context-back:hover,
html[data-theme="light"] .context-row #contextExit:hover,
html[data-theme="light"] .context-row .context-exit:hover{
  background:#EDF4F7!important;
  color:#066A73!important;
  border-color:#066A73!important;
  box-shadow:0 4px 14px rgba(16,35,46,.10)!important;
}
html[data-theme="dark"] .context-row .context-back,
html[data-theme="dark"] .context-row #contextExit,
html[data-theme="dark"] .context-row .context-exit{
  background:#0F1B29!important;
  color:#4FEEF1!important;
  border:1px solid rgba(79,238,241,.32)!important;
  box-shadow:none!important;
}


/* Review fix 3: light exam shell header.
   The landing page intentionally keeps its dark cockpit header. Once the SPA
   enters IELTS/YDS/YOKDIL/Proficiency routes, Light Mode must use the approved
   white exam header even though body.max-landing-mode remains on the SPA body. */
html[data-theme="light"] body.max-landing-mode.max-category-selection-mode .site-header,
html[data-theme="light"] body.max-landing-mode.max-category-exam-mode .site-header,
html[data-theme="light"] body.max-landing-mode.max-ielts-selection-mode .site-header,
html[data-theme="light"] body.max-landing-mode.max-ielts-book-mode .site-header,
html[data-theme="light"] body.max-landing-mode.max-ielts-exam-mode .site-header{
  background:#FFFFFF!important;
  background-image:none!important;
  color:#10232E!important;
  border-bottom:1px solid #D7E3E8!important;
  box-shadow:0 4px 18px rgba(16,35,46,.08)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
html[data-theme="light"] body.max-landing-mode.max-category-selection-mode .site-header .brand-row,
html[data-theme="light"] body.max-landing-mode.max-category-exam-mode .site-header .brand-row,
html[data-theme="light"] body.max-landing-mode.max-ielts-selection-mode .site-header .brand-row,
html[data-theme="light"] body.max-landing-mode.max-ielts-book-mode .site-header .brand-row,
html[data-theme="light"] body.max-landing-mode.max-ielts-exam-mode .site-header .brand-row,
html[data-theme="light"] body.max-landing-mode.max-category-selection-mode .site-header .context-row,
html[data-theme="light"] body.max-landing-mode.max-category-exam-mode .site-header .context-row,
html[data-theme="light"] body.max-landing-mode.max-ielts-selection-mode .site-header .context-row,
html[data-theme="light"] body.max-landing-mode.max-ielts-book-mode .site-header .context-row,
html[data-theme="light"] body.max-landing-mode.max-ielts-exam-mode .site-header .context-row{
  background:#FFFFFF!important;
  background-image:none!important;
  color:#10232E!important;
}


/* ============================================================
   CANONICAL GLOBAL HEADER GEOMETRY
   One desktop shell for landing + exam routes. Page-specific context remains
   in the second row; component styling/theme remains owned by existing tokens.
   ============================================================ */
@media (min-width:1101px){
  .site-header>.brand-row,
  .site-header>.context-row{
    width:min(1500px,calc(100% - 48px))!important;
    max-width:1500px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }
  .site-header>.brand-row{
    display:grid!important;
    grid-template-columns:max-content max-content minmax(0,1fr) max-content!important;
    align-items:center!important;
    column-gap:18px!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  .site-header .header-quick-links{min-width:0!important}
  .site-header .header-quick-links>ul{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:clamp(8px,1vw,18px)!important;
  }
  .site-header .account-actions{
    justify-self:end!important;
    margin-left:clamp(18px,2vw,34px)!important;
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
  }
  .site-header>.context-row{
    padding-left:0!important;
    padding-right:0!important;
  }
}
@media (min-width:1500px){
  .site-header>.brand-row,
  .site-header>.context-row{width:min(1560px,calc(100% - 64px))!important;max-width:1560px!important}
}