/* ═════════════════════════════════════════════════════════════
   MODERN & MINIMALIST EDTECH REFINE (2026 UI/UX UPGRADE)
   Clean, Calm, High-legibility, Micro-interactions, Notion/Coursera vibe
   ═════════════════════════════════════════════════════════════ */

:root {
  --refine-bg: #f8fafc;
  --refine-surface: #ffffff;
  --refine-surface-elevated: #ffffff;
  --refine-border: #e2e8f0;
  --refine-border-hover: #cbd5e1;
  --refine-primary: #2563eb;
  --refine-primary-hover: #1d4ed8;
  --refine-primary-soft: #eff6ff;
  --refine-text-title: #0f172a;
  --refine-text-body: #334155;
  --refine-text-muted: #64748b;
  --refine-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --refine-shadow-md: 0 4px 14px -2px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
  --refine-shadow-hover: 0 12px 28px -4px rgba(37, 99, 235, 0.08), 0 4px 10px -2px rgba(15, 23, 42, 0.04);
  --refine-radius-card: 20px;
  --refine-radius-btn: 12px;
}

[data-theme="dark"] {
  --refine-bg: #0b0f19;
  --refine-surface: #131b2e;
  --refine-surface-elevated: #1a243b;
  --refine-border: rgba(255, 255, 255, 0.08);
  --refine-border-hover: rgba(255, 255, 255, 0.16);
  --refine-primary: #3b82f6;
  --refine-primary-hover: #60a5fa;
  --refine-primary-soft: rgba(59, 130, 246, 0.12);
  --refine-text-title: #f8fafc;
  --refine-text-body: #cbd5e1;
  --refine-text-muted: #94a3b8;
  --refine-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
  --refine-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.35);
  --refine-shadow-hover: 0 14px 30px rgba(0, 0, 0, 0.5);
}

/* ── 1. Refined Layout & Background ── */
body {
  background-color: var(--refine-bg) !important;
  background-image: radial-gradient(rgba(99, 102, 241, 0.08) 1.2px, transparent 1.2px) !important;
  background-size: 28px 28px !important;
  color: var(--refine-text-body) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  letter-spacing: -0.011em !important;
}

[data-theme="dark"] body {
  background-color: #080b13 !important;
  background-image: radial-gradient(rgba(99, 102, 241, 0.16) 1.2px, transparent 1.2px) !important;
}

/* ── 2. Header Polish ── */
.app-shell-header {
  border-bottom: 1px solid var(--refine-border) !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04) !important;
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(20px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
}

[data-theme="dark"] .app-shell-header {
  background: rgba(11, 15, 25, 0.85) !important;
}

.brand-title {
  font-weight: 900 !important;
  letter-spacing: -0.035em !important;
  background: linear-gradient(135deg, #0f172a 0%, #2563eb 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

[data-theme="dark"] .brand-title {
  background: linear-gradient(135deg, #ffffff 0%, #60a5fa 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.header-search-pill-btn {
  border-radius: var(--refine-radius-btn) !important;
  border: 1px solid var(--refine-border) !important;
  background: var(--refine-bg) !important;
  transition: all 0.2s ease !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

.header-search-pill-btn:hover {
  border-color: var(--refine-primary) !important;
  background: var(--refine-surface) !important;
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.15) !important;
}

/* ── 3. Clean & Modern Hero Card (Ambient Mesh Lighting) ── */
.dashboard-hero-card {
  background: radial-gradient(120% 120% at 85% 15%, rgba(99, 102, 241, 0.08) 0%, rgba(255, 255, 255, 0) 60%),
              linear-gradient(135deg, #ffffff 0%, #f8fafc 55%, #f1f5f9 100%) !important;
  border-radius: 24px !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.03),
              0 12px 32px -4px rgba(15, 23, 42, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  padding: 36px 40px !important;
  position: relative !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 240px !important;
  grid-template-rows: auto auto !important;
  grid-template-areas:
    "main art"
    "stats stats" !important;
  gap: 24px 36px !important;
  align-items: center !important;
}

[data-theme="dark"] .dashboard-hero-card {
  background: radial-gradient(120% 120% at 85% 15%, rgba(99, 102, 241, 0.16) 0%, rgba(15, 23, 42, 0) 65%),
              linear-gradient(135deg, #111827 0%, #0f172a 60%, #0b0f19 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.6),
              inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

.dashboard-hero-card::before {
  display: none !important; /* Hide old heavy watermark for clean minimal look */
}

.hero-main-content {
  grid-area: main !important;
  min-width: 0 !important;
  width: 100% !important;
}

.hero-illustration-slot {
  grid-area: art !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* Hero Badges */
.hero-badge-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
  margin-bottom: 14px !important;
}

.hero-school-badge,
.hero-grade-badge,
.hero-moet-badge {
  white-space: nowrap !important;
}

.hero-school-badge {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
  color: #1d4ed8 !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(37, 99, 235, 0.18) !important;
}

.hero-grade-badge {
  background: #fef3c7 !important;
  color: #b45309 !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.03em !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(217, 119, 6, 0.2) !important;
}

.hero-moet-badge {
  background: #ecfdf5 !important;
  color: #047857 !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(16, 185, 129, 0.2) !important;
}

[data-theme="dark"] .hero-school-badge {
  background: rgba(37, 99, 235, 0.15) !important;
  color: #93c5fd !important;
  border-color: rgba(37, 99, 235, 0.3) !important;
}

[data-theme="dark"] .hero-grade-badge {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #fcd34d !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}

[data-theme="dark"] .hero-moet-badge {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #6ee7b7 !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}

.hero-title {
  font-size: 2.25rem !important;
  font-weight: 850 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.2 !important;
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 45%, #2563eb 85%, #6366f1 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  margin-bottom: 12px !important;
}

[data-theme="dark"] .hero-title {
  background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 45%, #60a5fa 85%, #a78bfa 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.hero-subtitle {
  font-size: 1.02rem !important;
  line-height: 1.6 !important;
  color: var(--refine-text-muted) !important;
  max-width: 620px !important;
  margin-bottom: 24px !important;
}

/* 3D Floating Animation on Hero Art */
.hero-illustration-slot {
  perspective: 900px !important;
  transform-style: preserve-3d !important;
}

.hero-student-art-img {
  filter: drop-shadow(0 20px 40px rgba(37, 99, 235, 0.35)) !important;
  animation: heroFloat3D 6.5s ease-in-out infinite !important;
  transform-style: preserve-3d !important;
  will-change: transform !important;
}

@keyframes heroFloat3D {
  0%, 100% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(-10px) scale(1.025);
  }
}

.hero-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  width: 100% !important;
}

.btn-hero-primary {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 13px 26px !important;
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.btn-hero-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.45) !important;
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
}

.btn-hero-secondary {
  border-radius: 14px !important;
  padding: 13px 22px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  border: 1px solid var(--refine-border) !important;
  background: var(--refine-surface) !important;
  color: var(--refine-text-body) !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.btn-hero-secondary:hover {
  background: var(--refine-primary-soft) !important;
  color: var(--refine-primary) !important;
  border-color: var(--refine-primary) !important;
}

/* Hero Stats - Full-Width Dock Across Card Bottom */
.hero-student-stats {
  grid-area: stats !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-around !important;
  width: 100% !important;
  margin-top: 8px !important;
  padding: 16px 28px !important;
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="dark"] .hero-student-stats {
  background: rgba(19, 27, 46, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.student-stat-item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex: 1 !important;
  justify-content: center !important;
}

.stat-divider {
  width: 1px !important;
  height: 36px !important;
  background: rgba(226, 232, 240, 0.8) !important;
}

[data-theme="dark"] .stat-divider {
  background: rgba(255, 255, 255, 0.1) !important;
}

.stat-icon-wrap {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.stat-icon-wrap.streak {
  background: #fff7ed !important;
  color: #ea580c !important;
}

.stat-icon-wrap.exams {
  background: #eff6ff !important;
  color: #2563eb !important;
}

.stat-icon-wrap.accuracy {
  background: #ecfdf5 !important;
  color: #059669 !important;
}

[data-theme="dark"] .stat-icon-wrap.streak {
  background: rgba(234, 88, 12, 0.15) !important;
  color: #fb923c !important;
}

[data-theme="dark"] .stat-icon-wrap.exams {
  background: rgba(37, 99, 235, 0.15) !important;
  color: #60a5fa !important;
}

[data-theme="dark"] .stat-icon-wrap.accuracy {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
}

.stat-num {
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  font-size: 1.15rem !important;
  color: var(--refine-text-title) !important;
}

.stat-label {
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  color: var(--refine-text-muted) !important;
}

/* ── 4. Subject Cards (Enterprise Bento-Grid Architecture) ── */
.dashboard-subjects-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 22px !important;
}

.dash-subject-card {
  border-radius: 20px !important;
  border: 1px solid var(--refine-border) !important;
  background: var(--refine-surface) !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.03),
              0 8px 24px -4px rgba(15, 23, 42, 0.04),
              inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  padding: 26px !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  overflow: hidden !important;
  transform-style: preserve-3d !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.28s ease,
              border-color 0.2s ease !important;
}

.dash-subject-card[data-tilt-active="true"],
.subject-card-item[data-tilt-active="true"],
.smart-tool-card[data-tilt-active="true"],
.mode-card[data-tilt-active="true"],
.dashboard-hero-card[data-tilt-active="true"] {
  transition: none !important;
}

.dash-subject-card[data-tilt-active="true"]:hover,
.subject-card-item[data-tilt-active="true"]:hover,
.smart-tool-card[data-tilt-active="true"]:hover,
.mode-card[data-tilt-active="true"]:hover,
.dashboard-hero-card[data-tilt-active="true"]:hover {
  transform: none;
}

.dash-subject-card:hover:not([data-tilt-active="true"]) {
  transform: translateY(-5px) !important;
}

/* Subject-Specific Theme Accents & Signature Glow Auras */
.dash-sub-toan { --sub-accent: #3b82f6; }
.dash-sub-vatli { --sub-accent: #0284c7; }
.dash-sub-hoahoc { --sub-accent: #f59e0b; }
.dash-sub-sinhhoc { --sub-accent: #10b981; }
.dash-sub-lichsu { --sub-accent: #ef4444; }
.dash-sub-tienganh { --sub-accent: #8b5cf6; }

.dash-sub-toan:hover {
  border-color: rgba(59, 130, 246, 0.6) !important;
  box-shadow: 0 20px 40px -10px rgba(59, 130, 246, 0.22), 0 0 0 1px rgba(59, 130, 246, 0.4) !important;
}
.dash-sub-vatli:hover {
  border-color: rgba(2, 132, 199, 0.6) !important;
  box-shadow: 0 20px 40px -10px rgba(2, 132, 199, 0.22), 0 0 0 1px rgba(2, 132, 199, 0.4) !important;
}
.dash-sub-hoahoc:hover {
  border-color: rgba(245, 158, 11, 0.6) !important;
  box-shadow: 0 20px 40px -10px rgba(245, 158, 11, 0.22), 0 0 0 1px rgba(245, 158, 11, 0.4) !important;
}
.dash-sub-sinhhoc:hover {
  border-color: rgba(16, 185, 129, 0.6) !important;
  box-shadow: 0 20px 40px -10px rgba(16, 185, 129, 0.22), 0 0 0 1px rgba(16, 185, 129, 0.4) !important;
}
.dash-sub-lichsu:hover {
  border-color: rgba(239, 68, 68, 0.6) !important;
  box-shadow: 0 20px 40px -10px rgba(239, 68, 68, 0.22), 0 0 0 1px rgba(239, 68, 68, 0.4) !important;
}
.dash-sub-tienganh:hover {
  border-color: rgba(139, 92, 246, 0.6) !important;
  box-shadow: 0 20px 40px -10px rgba(139, 92, 246, 0.22), 0 0 0 1px rgba(139, 92, 246, 0.4) !important;
}

.dash-sub-icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.dash-subject-card:hover .dash-sub-icon {
  transform: scale(1.08) rotate(-3deg) !important;
}

.dash-sub-icon.toan { background: #eff6ff !important; }
.dash-sub-icon.vatli { background: #f0f9ff !important; }
.dash-sub-icon.hoahoc { background: #ecfdf5 !important; }
.dash-sub-icon.sinhhoc { background: #f0fdf4 !important; }
.dash-sub-icon.lichsu { background: #fff1f2 !important; }
.dash-sub-icon.tienganh { background: #f5f3ff !important; }

[data-theme="dark"] .dash-sub-icon.toan { background: rgba(37, 99, 235, 0.15) !important; }
[data-theme="dark"] .dash-sub-icon.vatli { background: rgba(2, 132, 199, 0.15) !important; }
[data-theme="dark"] .dash-sub-icon.hoahoc { background: rgba(5, 150, 105, 0.15) !important; }
[data-theme="dark"] .dash-sub-icon.sinhhoc { background: rgba(16, 185, 129, 0.15) !important; }
[data-theme="dark"] .dash-sub-icon.lichsu { background: rgba(225, 29, 72, 0.15) !important; }
[data-theme="dark"] .dash-sub-icon.tienganh { background: rgba(124, 58, 237, 0.15) !important; }

.dash-sub-name {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--refine-text-title) !important;
  margin-top: 16px !important;
  margin-bottom: 8px !important;
}

.dash-sub-desc {
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
  color: var(--refine-text-muted) !important;
  margin-bottom: 18px !important;
}

.dash-sub-pill {
  border-radius: 999px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  letter-spacing: 0.03em !important;
}

.dash-sub-tag {
  border-radius: 8px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  padding: 5px 10px !important;
  background: var(--refine-bg) !important;
  color: var(--refine-text-muted) !important;
  border: 1px solid var(--refine-border) !important;
}

.dash-sub-cta {
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  color: var(--refine-primary) !important;
  transition: transform 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.dash-subject-card:hover .dash-sub-cta {
  transform: translateX(4px) !important;
}

/* ── 4B. Smart Tools Grid ── */
.smart-tools-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 20px !important;
}

.smart-tool-card {
  border-radius: 18px !important;
  border: 1px solid var(--refine-border) !important;
  background: var(--refine-surface) !important;
  box-shadow: var(--refine-shadow-sm) !important;
  padding: 22px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.2s ease !important;
}

.smart-tool-card:hover {
  transform: translateY(-4px) !important;
  border-color: var(--refine-primary) !important;
  box-shadow: var(--refine-shadow-hover) !important;
}

.tool-icon-wrapper {
  width: 44px !important;
  height: 44px !important;
  border-radius: 13px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 14px !important;
  transition: transform 0.2s ease !important;
}

.smart-tool-card:hover .tool-icon-wrapper {
  transform: scale(1.1) !important;
}

.tool-title {
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  color: var(--refine-text-title) !important;
  margin-bottom: 6px !important;
  letter-spacing: -0.01em !important;
}

.tool-desc {
  font-size: 0.88rem !important;
  line-height: 1.5 !important;
  color: var(--refine-text-muted) !important;
  margin-bottom: 16px !important;
}

.tool-action-arrow {
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: var(--refine-primary) !important;
  transition: transform 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.smart-tool-card:hover .tool-action-arrow {
  transform: translateX(4px) !important;
}

/* ── 4C. Daily SM-2 Mistakes Card ── */
.daily-sm2-card {
  border-radius: 20px !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.35) 0%, var(--refine-surface) 60%) !important;
  box-shadow: 0 4px 16px -2px rgba(245, 158, 11, 0.08) !important;
  padding: 24px 28px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

[data-theme="dark"] .daily-sm2-card {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, var(--refine-surface) 60%) !important;
  border-color: rgba(245, 158, 11, 0.25) !important;
}

.daily-sm2-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px -4px rgba(245, 158, 11, 0.15) !important;
  border-color: #f59e0b !important;
}

/* ── 4D. Section Headers Polish ── */
.section-title {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--refine-text-title) !important;
  line-height: 1.3 !important;
}

.section-hint {
  font-size: 0.9rem !important;
  color: var(--refine-text-muted) !important;
  margin-top: 4px !important;
}

/* ── 5. Mode Selection Cards (Exam/Study Modes) ── */
.mode-card {
  border-radius: 16px !important;
  border: 1.5px solid var(--refine-border) !important;
  background: var(--refine-surface) !important;
  box-shadow: var(--refine-shadow-sm) !important;
  padding: 18px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.mode-card:hover {
  border-color: var(--refine-primary) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--refine-shadow-md) !important;
}

.mode-card.selected {
  border-color: var(--refine-primary) !important;
  background: var(--refine-primary-soft) !important;
  box-shadow: 0 0 0 1px var(--refine-primary), var(--refine-shadow-sm) !important;
}

.mode-name {
  font-weight: 700 !important;
  font-size: 0.98rem !important;
  color: var(--refine-text-title) !important;
  letter-spacing: -0.01em !important;
}

.mode-desc {
  font-size: 0.82rem !important;
  line-height: 1.45 !important;
  color: var(--refine-text-muted) !important;
}

/* ── 6. Quiz & Exam Room (High Cognitive Ergonomics) ── */
.quiz-header {
  border-radius: 18px !important;
  border: 1px solid var(--refine-border) !important;
  background: var(--refine-surface) !important;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  padding: 12px 20px !important;
  position: relative !important;
}

.quiz-sidebar {
  border-radius: 18px !important;
  border: 1px solid var(--refine-border) !important;
  background: var(--refine-surface) !important;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04) !important;
}

.q-dot {
  border-radius: 10px !important;
  border: 1px solid var(--refine-border) !important;
  background: var(--refine-bg) !important;
  color: var(--refine-text-muted) !important;
  font-weight: 600 !important;
  position: relative !important;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.2s ease,
              border-color 0.2s ease,
              background-color 0.2s ease !important;
}

.q-dot:hover {
  border-color: var(--refine-primary) !important;
  color: var(--refine-primary) !important;
  background: var(--refine-surface) !important;
  transform: translateY(-2px) scale(1.08) !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15) !important;
}

.q-dot:active {
  transform: scale(0.92) !important;
}

.q-dot.current {
  background: var(--refine-primary) !important;
  color: #ffffff !important;
  border-color: var(--refine-primary) !important;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.4) !important;
  animation: dotRadarPulse 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}

.q-dot.answered {
  background: var(--refine-primary-soft) !important;
  color: var(--refine-primary) !important;
  border-color: rgba(37, 99, 235, 0.3) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

.q-dot.flagged {
  border-color: #f59e0b !important;
  background: #fef3c7 !important;
  color: #b45309 !important;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.25) !important;
}

.q-dot.flagged::after {
  content: '' !important;
  position: absolute !important;
  top: 3px !important;
  right: 3px !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #f59e0b !important;
  box-shadow: 0 0 6px #f59e0b !important;
  animation: flamePulse 2s infinite !important;
}

.question-card {
  border-radius: 22px !important;
  border: 1px solid var(--refine-border) !important;
  background: var(--refine-surface) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03),
              0 12px 32px -4px rgba(15, 23, 42, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  padding: 32px 36px !important;
  position: relative !important;
  overflow: hidden !important;
  animation: questionCardEnter 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.question-card.question-entering {
  animation: questionCardEnter 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.question-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, #2563eb, #6366f1, #38bdf8, #2563eb) !important;
  background-size: 200% 100% !important;
  animation: questionBeam 6s linear infinite !important;
}

.question-text {
  font-size: 1.1rem !important;
  line-height: 1.7 !important;
  color: var(--refine-text-title) !important;
  font-weight: 500 !important;
}

.option {
  border-radius: 14px !important;
  border: 1.5px solid var(--refine-border) !important;
  background: var(--refine-surface) !important;
  padding: 14px 20px !important;
  font-size: 0.98rem !important;
  line-height: 1.55 !important;
  color: var(--refine-text-body) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  text-align: left !important;
  margin-bottom: 12px !important;
  position: relative !important;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.2s ease,
              background 0.2s ease,
              box-shadow 0.22s ease !important;
}

.option:hover {
  border-color: #93c5fd !important;
  background: var(--refine-bg) !important;
  transform: translateX(6px) scale(1.008) !important;
  box-shadow: 0 4px 16px -2px rgba(37, 99, 235, 0.12) !important;
}

.option:active {
  transform: scale(0.985) translateX(3px) !important;
}

.option.selected {
  border-color: var(--refine-primary) !important;
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.95) 0%, rgba(219, 234, 254, 0.45) 100%) !important;
  color: var(--refine-primary-hover) !important;
  box-shadow: 0 0 0 2px var(--refine-primary), 0 8px 24px -4px rgba(37, 99, 235, 0.25) !important;
  transform: translateX(6px) scale(1.01) !important;
  animation: optionSpringPop 0.26s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

[data-theme="dark"] .option.selected {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.22) 0%, rgba(30, 58, 138, 0.15) 100%) !important;
  box-shadow: 0 0 0 2px var(--refine-primary), 0 8px 24px -4px rgba(0, 0, 0, 0.6) !important;
}

.option-letter {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  background: var(--refine-bg) !important;
  border: 1.5px solid var(--refine-border) !important;
  color: var(--refine-text-title) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.option:hover .option-letter {
  background: var(--refine-primary-soft) !important;
  color: var(--refine-primary) !important;
  border-color: var(--refine-primary) !important;
  transform: scale(1.08) !important;
}

.option.selected .option-letter {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.45) !important;
  animation: letterBadgePop 0.26s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.option-text {
  flex: 1 !important;
}

.option-shortcut-hint {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: var(--refine-text-muted) !important;
  background: var(--refine-bg) !important;
  border: 1px solid var(--refine-border) !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  margin-left: auto !important;
}

/* TF Split-Pane Layout */
.tf-split-layout {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  margin-top: 10px !important;
}

@media (max-width: 860px) {
  .tf-split-layout {
    grid-template-columns: 1fr !important;
  }
}

.tf-split-passage-pane {
  background: var(--refine-bg) !important;
  border: 1px solid var(--refine-border) !important;
  border-radius: 16px !important;
  padding: 22px !important;
  max-height: 520px !important;
  overflow-y: auto !important;
}

.passage-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: var(--refine-primary) !important;
  background: var(--refine-primary-soft) !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  margin-bottom: 12px !important;
}

.tf-statement {
  border-radius: 16px !important;
  border: 1px solid var(--refine-border) !important;
  background: var(--refine-surface) !important;
  padding: 18px 20px !important;
  margin-bottom: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.2s ease,
              box-shadow 0.22s ease !important;
}

.tf-statement:hover {
  border-color: #93c5fd !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.06) !important;
}

.tf-statement-text {
  font-size: 0.98rem !important;
  line-height: 1.55 !important;
  color: var(--refine-text-title) !important;
}

.tf-buttons {
  display: flex !important;
  gap: 10px !important;
}

.tf-btn {
  flex: 1 !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  border: 1.5px solid var(--refine-border) !important;
  background: var(--refine-surface) !important;
  color: var(--refine-text-body) !important;
  cursor: pointer !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 0.2s ease,
              border-color 0.2s ease,
              box-shadow 0.2s ease !important;
}

.tf-btn:hover {
  background: var(--refine-bg) !important;
  transform: translateY(-2px) !important;
}

.tf-btn:active {
  transform: scale(0.92) !important;
}

.tf-btn.selected:first-child {
  transform: translateY(-2px) scale(1.02) !important;
  background: #ecfdf5 !important;
  color: #047857 !important;
  border-color: #10b981 !important;
  box-shadow: 0 0 0 2px #10b981, 0 6px 20px rgba(16, 185, 129, 0.28) !important;
  animation: tfPopGreen 0.26s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.tf-btn.selected:last-child {
  transform: translateY(-2px) scale(1.02) !important;
  background: #fff1f2 !important;
  color: #be123c !important;
  border-color: #f43f5e !important;
  box-shadow: 0 0 0 2px #f43f5e, 0 6px 20px rgba(244, 63, 94, 0.28) !important;
  animation: tfPopRed 0.26s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

[data-theme="dark"] .tf-btn.selected:first-child {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #34d399 !important;
  box-shadow: 0 0 0 2px #10b981, 0 6px 20px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .tf-btn.selected:last-child {
  background: rgba(244, 63, 94, 0.2) !important;
  color: #fb7185 !important;
  box-shadow: 0 0 0 2px #f43f5e, 0 6px 20px rgba(0, 0, 0, 0.6) !important;
}

/* Short Answer Keypad & Field */
.sa-container {
  background: var(--refine-surface) !important;
  border: 1px solid var(--refine-border) !important;
  border-radius: 18px !important;
  padding: 24px !important;
}

.sa-math-keypad {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
}

.math-key-btn {
  padding: 8px 16px !important;
  border-radius: 10px !important;
  border: 1px solid var(--refine-border) !important;
  background: var(--refine-bg) !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  color: var(--refine-text-body) !important;
  cursor: pointer !important;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.15s ease,
              background 0.15s ease !important;
}

.math-key-btn:hover {
  border-color: var(--refine-primary) !important;
  background: var(--refine-primary-soft) !important;
  color: var(--refine-primary) !important;
  transform: translateY(-2px) scale(1.04) !important;
}

.math-key-btn:active {
  transform: scale(0.92) !important;
}

.sa-input {
  width: 100% !important;
  padding: 14px 18px !important;
  border-radius: 12px !important;
  border: 1.5px solid var(--refine-border) !important;
  background: var(--refine-bg) !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  color: var(--refine-text-title) !important;
  transition: all 0.2s ease !important;
}

.sa-input:focus {
  outline: none !important;
  border-color: var(--refine-primary) !important;
  background: var(--refine-surface) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
}

.sa-math-live-preview {
  margin-top: 12px !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  background: var(--refine-bg) !important;
  border: 1px dashed var(--refine-border) !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  transition: border-color 0.2s ease !important;
}

/* Exam Timer & Header Controls */
.timer {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--refine-bg) !important;
  border: 1px solid var(--refine-border) !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  color: var(--refine-text-title) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.3s ease !important;
}

.timer.warning {
  border-color: #f59e0b !important;
  background: #fef3c7 !important;
  color: #b45309 !important;
  animation: timerWarningBreathe 2s ease-in-out infinite !important;
}

.timer.danger {
  border-color: #ef4444 !important;
  background: #fee2e2 !important;
  color: #b91c1c !important;
  animation: timerDangerPulse 0.9s ease-in-out infinite !important;
}

.timer-icon {
  color: var(--refine-primary) !important;
  display: flex !important;
  align-items: center !important;
}

.timer.warning .timer-icon {
  color: #b45309 !important;
}

.timer.danger .timer-icon {
  color: #b91c1c !important;
}

.exam-tools-row {
  display: flex !important;
  gap: 6px !important;
}

.exam-tool-btn {
  border-radius: 8px !important;
  border: 1px solid var(--refine-border) !important;
  background: var(--refine-bg) !important;
  padding: 6px 10px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: var(--refine-text-body) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.exam-tool-btn:hover {
  border-color: var(--refine-primary) !important;
  color: var(--refine-primary) !important;
  transform: translateY(-1px) !important;
}

/* Exam Room Navigation Buttons */
.quiz-nav {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 24px !important;
}

.nav-btn {
  border-radius: 12px !important;
  font-weight: 700 !important;
  padding: 11px 22px !important;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.22s ease,
              background 0.2s ease !important;
}

.nav-btn.prev:hover:not(:disabled) {
  transform: translateX(-4px) !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
}

.nav-btn.next:hover:not(:disabled) {
  transform: translateX(4px) !important;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35) !important;
}

.nav-btn.submit {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 18px rgba(16, 185, 129, 0.38) !important;
  position: relative !important;
  overflow: hidden !important;
  animation: submitBtnBreathe 2.8s ease-in-out infinite !important;
}

.nav-btn.submit::after {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  left: -60% !important;
  width: 40% !important;
  height: 200% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent) !important;
  transform: rotate(25deg) !important;
  animation: heroBtnSweep 3.5s ease-in-out infinite !important;
  pointer-events: none !important;
}

.nav-btn.submit:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.55) !important;
}

.btn-flag-toggle {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.2s ease,
              background 0.2s ease !important;
}

.btn-flag-toggle:hover {
  transform: scale(1.05) !important;
}

.btn-flag-toggle.active {
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.45) !important;
  animation: flagBounce 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Skeleton Shimmer Wave for Loading States (Chỗ tải) */
.skeleton-loading,
.question-text:empty::before {
  content: '' !important;
  display: block !important;
  height: 24px !important;
  width: 80% !important;
  border-radius: 8px !important;
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%) !important;
  background-size: 200% 100% !important;
  animation: shimmerWave 1.8s infinite !important;
}

[data-theme="dark"] .skeleton-loading,
[data-theme="dark"] .question-text:empty::before {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%) !important;
  background-size: 200% 100% !important;
}

@keyframes shimmerWave {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes questionCardEnter {
  from {
    opacity: 0.4;
    transform: translateY(10px) scale(0.995);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes questionBeam {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

@keyframes optionSpringPop {
  0% { transform: scale(0.98) translateX(2px); }
  60% { transform: scale(1.02) translateX(8px); }
  100% { transform: scale(1.01) translateX(6px); }
}

@keyframes letterBadgePop {
  0% { transform: scale(0.8); }
  60% { transform: scale(1.2) rotate(-6deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes dotRadarPulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.5), 0 2px 10px rgba(37, 99, 235, 0.4); }
  50% { box-shadow: 0 0 0 7px rgba(37, 99, 235, 0), 0 2px 10px rgba(37, 99, 235, 0.4); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0), 0 2px 10px rgba(37, 99, 235, 0.4); }
}

@keyframes timerWarningBreathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
}

@keyframes timerDangerPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
  50% { transform: scale(1.04); box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

@keyframes submitBtnBreathe {
  0%, 100% { box-shadow: 0 4px 18px rgba(16, 185, 129, 0.38); }
  50% { box-shadow: 0 4px 26px rgba(16, 185, 129, 0.65); }
}

@keyframes flagBounce {
  0% { transform: scale(0.9); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@keyframes tfPopGreen {
  0% { transform: scale(0.92); }
  60% { transform: scale(1.08); }
  100% { transform: translateY(-2px) scale(1.02); }
}

@keyframes tfPopRed {
  0% { transform: scale(0.92); }
  60% { transform: scale(1.08); }
  100% { transform: translateY(-2px) scale(1.02); }
}

/* ── 8. Result Card & Decision 764 Breakdown ── */
.result-card {
  border-radius: 24px !important;
  border: 1px solid var(--refine-border) !important;
  background: var(--refine-surface) !important;
  box-shadow: var(--refine-shadow-md) !important;
  padding: 40px !important;
  max-width: 820px !important;
  margin: 0 auto !important;
}

.score-circle {
  width: 140px !important;
  height: 140px !important;
  margin: 0 auto 20px !important;
}

.score-value {
  font-size: 2.2rem !important;
  font-weight: 900 !important;
  color: var(--refine-text-title) !important;
}

.decision-764-breakdown {
  border-radius: 18px !important;
  border: 1px solid var(--refine-border) !important;
  background: var(--refine-bg) !important;
  padding: 24px !important;
  margin: 28px 0 !important;
}

.breakdown-tag {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  color: var(--refine-primary) !important;
  background: var(--refine-primary-soft) !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  display: inline-block !important;
}

.breakdown-title {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--refine-text-title) !important;
  margin-top: 8px !important;
}

.breakdown-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  margin-top: 16px !important;
}

@media (max-width: 768px) {
  .breakdown-grid {
    grid-template-columns: 1fr !important;
  }
}

.breakdown-item {
  border-radius: 14px !important;
  background: var(--refine-surface) !important;
  border: 1px solid var(--refine-border) !important;
  padding: 16px !important;
  transition: transform 0.2s ease !important;
}

.breakdown-item:hover {
  transform: translateY(-2px) !important;
}

.breakdown-item.p1 { border-top: 3px solid #2563eb !important; }
.breakdown-item.p2 { border-top: 3px solid #059669 !important; }
.breakdown-item.p3 { border-top: 3px solid #7c3aed !important; }

.bd-part {
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
}

.breakdown-item.p1 .bd-part { color: #2563eb !important; }
.breakdown-item.p2 .bd-part { color: #059669 !important; }
.breakdown-item.p3 .bd-part { color: #7c3aed !important; }

.bd-name {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--refine-text-title) !important;
  margin: 4px 0 6px !important;
}

.bd-desc {
  font-size: 0.8rem !important;
  line-height: 1.45 !important;
  color: var(--refine-text-muted) !important;
  margin-bottom: 8px !important;
}

.bd-scale {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: var(--refine-text-body) !important;
  background: var(--refine-bg) !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  display: inline-block !important;
}

.btn-share-card {
  border-radius: 14px !important;
  font-weight: 600 !important;
  padding: 12px 20px !important;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
  color: #1d4ed8 !important;
  border: 1px solid rgba(37, 99, 235, 0.25) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin-top: 20px !important;
  transition: all 0.2s ease !important;
}

.btn-share-card:hover {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
  transform: translateY(-1px) !important;
}

/* ── 9. Sub-Feature Header Banners (Fix Inconsistent Dark Slabs in Light Mode) ── */
.custom-exam-header-banner,
.checker-header,
.planner-hero-card,
.diag-welcome-card,
.mistake-header-banner {
  background: linear-gradient(135deg, #ffffff 0%, #f4f8ff 55%, #f5f3ff 100%) !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-radius: 22px !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05) !important;
  color: var(--refine-text-title) !important;
  padding: 30px !important;
}

.custom-exam-header-banner h1,
.custom-exam-header-banner h2,
.custom-exam-header-banner .header-title,
.checker-heading,
.planner-hero-title,
.diag-welcome-title,
.mistake-banner-title {
  color: var(--refine-text-title) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

.custom-exam-header-banner p,
.custom-exam-header-banner .header-desc,
.checker-subheading,
.planner-hero-desc,
.diag-welcome-desc,
.mistake-banner-desc {
  color: var(--refine-text-muted) !important;
  line-height: 1.6 !important;
}

[data-theme="dark"] .custom-exam-header-banner,
[data-theme="dark"] .checker-header,
[data-theme="dark"] .planner-hero-card,
[data-theme="dark"] .diag-welcome-card,
[data-theme="dark"] .mistake-header-banner {
  background: linear-gradient(135deg, #131b2e 0%, #0f172a 60%, #161c33 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
  color: var(--refine-text-title) !important;
}

[data-theme="dark"] .custom-exam-header-banner .header-title,
[data-theme="dark"] .checker-heading,
[data-theme="dark"] .planner-hero-title,
[data-theme="dark"] .diag-welcome-title,
[data-theme="dark"] .mistake-banner-title {
  color: #f8fafc !important;
}

[data-theme="dark"] .custom-exam-header-banner p,
[data-theme="dark"] .checker-subheading,
[data-theme="dark"] .planner-hero-desc,
[data-theme="dark"] .diag-welcome-desc,
[data-theme="dark"] .mistake-banner-desc {
  color: #94a3b8 !important;
}

/* ── 10. Topic Selection Checklist & Config ── */
.topic-card {
  border-radius: 16px !important;
  border: 1px solid var(--refine-border) !important;
  background: var(--refine-surface) !important;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  margin-bottom: 12px !important;
}

.topic-card:hover {
  border-color: #93c5fd !important;
  background: var(--refine-bg) !important;
  transform: translateX(4px) !important;
}

.topic-card.selected {
  border-color: var(--refine-primary) !important;
  background: var(--refine-primary-soft) !important;
  box-shadow: 0 0 0 1px var(--refine-primary) !important;
}

.topic-title {
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  color: var(--refine-text-title) !important;
  margin-bottom: 4px !important;
  letter-spacing: -0.01em !important;
}

.topic-meta-pill {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: var(--refine-text-muted) !important;
  background: var(--refine-bg) !important;
  border: 1px solid var(--refine-border) !important;
  padding: 3px 9px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.quiz-config {
  border-radius: 18px !important;
  border: 1px solid var(--refine-border) !important;
  background: var(--refine-surface) !important;
  padding: 24px !important;
  box-shadow: var(--refine-shadow-sm) !important;
  margin: 20px 0 !important;
}

.config-input {
  border-radius: 10px !important;
  border: 1.5px solid var(--refine-border) !important;
  background: var(--refine-bg) !important;
  padding: 8px 12px !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  color: var(--refine-text-title) !important;
}

.config-input:focus {
  outline: none !important;
  border-color: var(--refine-primary) !important;
  background: var(--refine-surface) !important;
}

.start-btn {
  border-radius: 14px !important;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: 14px 28px !important;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.start-btn:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.45) !important;
}

.start-btn:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}

/* ── 11. Subject Explorer Polish ── */
.explorer-wrapper {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px 60px !important;
}

.explorer-header {
  margin-bottom: 28px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 20px !important;
}

.explorer-title {
  font-size: 1.85rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: var(--refine-text-title) !important;
}

.explorer-subtitle {
  font-size: 0.98rem !important;
  line-height: 1.55 !important;
  color: var(--refine-text-muted) !important;
  margin-top: 6px !important;
  max-width: 700px !important;
}

.grade-pill-group {
  display: inline-flex !important;
  background: var(--refine-bg) !important;
  border: 1px solid var(--refine-border) !important;
  padding: 4px !important;
  border-radius: 999px !important;
  gap: 4px !important;
}

.grade-pill {
  padding: 7px 18px !important;
  border-radius: 999px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  border: none !important;
  background: transparent !important;
  color: var(--refine-text-muted) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.grade-pill:hover {
  color: var(--refine-text-title) !important;
}

.grade-pill.active {
  background: var(--refine-surface) !important;
  color: var(--refine-primary) !important;
  box-shadow: var(--refine-shadow-sm) !important;
}

.subjects-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
  gap: 24px !important;
}

.subject-card-item {
  border-radius: 20px !important;
  border: 1px solid var(--refine-border) !important;
  background: var(--refine-surface) !important;
  box-shadow: var(--refine-shadow-sm) !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.2s ease !important;
}

.subject-card-item:hover {
  transform: translateY(-4px) !important;
  border-color: var(--refine-primary) !important;
  box-shadow: var(--refine-shadow-hover) !important;
}

.sub-icon-box {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.sub-card-title {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--refine-text-title) !important;
  margin-top: 14px !important;
  margin-bottom: 6px !important;
}

.sub-card-desc {
  font-size: 0.9rem !important;
  line-height: 1.55 !important;
  color: var(--refine-text-muted) !important;
  margin-bottom: 16px !important;
}

.card-meta {
  background: var(--refine-bg) !important;
  border: 1px solid var(--refine-border) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  margin-bottom: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.meta-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 0.82rem !important;
}

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

.meta-value {
  color: var(--refine-text-title) !important;
  font-weight: 600 !important;
}

/* ── 12. Dashboard Layout Fixes ── */
.dashboard-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

.dashboard-subjects-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
}

@media (max-width: 900px) {
  .dashboard-hero-card {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "main"
      "art"
      "stats" !important;
    text-align: center !important;
    gap: 20px !important;
    padding: 24px 20px !important;
  }

  .hero-badge-row {
    justify-content: center !important;
  }

  .hero-subtitle {
    margin: 0 auto 20px !important;
  }

  .hero-actions {
    justify-content: center !important;
  }

  .btn-hero-primary,
  .btn-hero-secondary {
    white-space: normal !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .hero-student-stats {
    flex-direction: column !important;
    gap: 14px !important;
  }

  .stat-divider {
    display: none !important;
  }
}


/* ── 7. Soft Scrollbar & Mobile Bar ── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #334155;
}

.mobile-bottom-nav {
  border-top: 1px solid var(--refine-border) !important;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04) !important;
}

/* ═════════════════════════════════════════════════════════════
   8. MODERN HIGH-IMPACT MICRO-INTERACTIONS & KINETIC POLISH
   ═════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  /* Dynamic Spring Hover on Action Cards */
  .dash-subject-card,
  .subject-card-item,
  .smart-tool-card,
  .mode-card,
  .planner-task-card,
  .diagnostic-blueprint-card {
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.2s ease !important;
  }

  .dash-subject-card:hover:not([data-tilt-active="true"]),
  .subject-card-item:hover:not([data-tilt-active="true"]),
  .smart-tool-card:hover:not([data-tilt-active="true"]),
  .mode-card:hover:not([data-tilt-active="true"]) {
    transform: translateY(-4px) scale(1.01) !important;
    box-shadow: 0 16px 32px -8px rgba(37, 99, 235, 0.14),
                0 4px 12px -2px rgba(15, 23, 42, 0.06),
                0 0 0 1px rgba(37, 99, 235, 0.15) !important;
  }

  /* Tactile Press Down Feedback */
  .dash-subject-card:active,
  .subject-card-item:active,
  .smart-tool-card:active,
  .mode-card:active,
  .btn:active {
    transform: scale(0.98) !important;
  }

  /* 3D Extruded Tactile Button */
  .btn-hero-primary {
    position: relative !important;
    overflow: hidden !important;
    transform-style: preserve-3d !important;
    box-shadow: 0 4px 0 #1d4ed8, 0 10px 24px -2px rgba(37, 99, 235, 0.45) !important;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease !important;
  }

  .btn-hero-primary::after {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -60% !important;
    width: 40% !important;
    height: 200% !important;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.28) 50%,
      rgba(255, 255, 255, 0) 100%
    ) !important;
    transform: rotate(25deg) !important;
    animation: heroBtnSweep 4.5s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
    pointer-events: none !important;
  }

  .btn-hero-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 0 #1d4ed8, 0 16px 32px -2px rgba(37, 99, 235, 0.55) !important;
  }

  .btn-hero-primary:active {
    transform: translateY(3px) !important;
    box-shadow: 0 1px 0 #1d4ed8, 0 4px 12px rgba(37, 99, 235, 0.3) !important;
  }

  /* Micro-pulse for Streak Flame Icon */
  .stat-icon-wrap.streak svg {
    animation: flamePulse 2.8s ease-in-out infinite !important;
    transform-origin: center bottom !important;
  }

  /* Interactive Option Choice Hover/Active */
  .option-item {
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
                border-color 0.15s ease,
                background-color 0.15s ease,
                box-shadow 0.18s ease !important;
  }

  .option-item:hover:not(.disabled) {
    transform: translateX(4px) !important;
  }
}

@keyframes heroBtnSweep {
  0%, 65% {
    left: -60%;
  }
  100% {
    left: 140%;
  }
}

@keyframes flamePulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 2px rgba(245, 158, 11, 0.4));
  }
  50% {
    transform: scale(1.12);
    filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.7));
  }
}

/* Glassmorphism Polish on Header & Dropdowns */
.app-shell-header {
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  position: relative !important;
  z-index: 10 !important;
}

[data-theme="dark"] .dash-subject-card:hover:not([data-tilt-active="true"]),
[data-theme="dark"] .subject-card-item:hover:not([data-tilt-active="true"]),
[data-theme="dark"] .smart-tool-card:hover:not([data-tilt-active="true"]),
[data-theme="dark"] .mode-card:hover:not([data-tilt-active="true"]) {
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.7),
              0 0 0 1px rgba(59, 130, 246, 0.35),
              0 0 20px -4px rgba(59, 130, 246, 0.25) !important;
}

/* ═════════════════════════════════════════════════════════════
   9. GLOBAL 3D AMBIENT ENVIRONMENT & MULTI-LAYER PERSPECTIVE
   ═════════════════════════════════════════════════════════════ */
.ntmk-3d-ambient-bg {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 0.85 !important;
}

#main-content {
  position: relative !important;
  z-index: 1 !important;
}

.hero-3d-bg-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 1 !important;
}

.hero-main-content,
.hero-student-stats,
.hero-illustration-slot {
  position: relative !important;
  z-index: 2 !important;
}

.card-3d-glare {
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  z-index: 5 !important;
  opacity: 0;
  transition: opacity 0.25s ease !important;
}

.dash-subject-card,
.subject-card-item,
.smart-tool-card,
.mode-card,
.dashboard-hero-card {
  transform-style: preserve-3d !important;
}

.dash-sub-icon,
.dash-sub-name,
.dash-sub-desc,
.dash-sub-meta,
.dash-sub-footer,
.dash-sub-pill,
.tool-icon-wrapper,
.tool-title,
.tool-desc,
.tool-action-arrow {
  transform-style: preserve-3d !important;
  transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important;
}