@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* ========== Light mode (default) ========== */
  color-scheme: light;
  --bg-dark: #E8ECF0;
  --bg: #F4F6F8;
  --bg-light: #FFFFFF;
  --text: #1A1D23;
  --text-muted: #6B7280;
  --highlight: #9CA3AF;
  --border: #E5E7EB;
  --border-muted: #F3F4F6;
  --primary: #4F46E5;
  --secondary: #D97706;
  --danger: #DC2626;
  --warning: #F59E0B;
  --success: #10B981;
  --info: #3B82F6;

  /* Glass Cockpit — light layered depth */
  --cockpit-bg: #F4F6F8;
  --cockpit-surface: #FFFFFF;
  --cockpit-elevated: #F0F2F5;

  /* Glow accents */
  --glow-primary: #818CF8;
  --glow-success: #34D399;
}

html.dark {
  /* ========== Dark mode (override) ========== */
  color-scheme: dark;
  --bg-dark: oklch(0.1 0.025 264);
  --bg: #22262b;
  --bg-light: oklch(0.2 0.025 264);
  --text: oklch(0.96 0.05 264);
  --text-muted: oklch(0.76 0.05 264);
  --highlight: oklch(0.5 0.05 264);
  --border: oklch(0.4 0.05 264);
  --border-muted: oklch(0.3 0.05 264);
  --primary: oklch(0.76 0.1 264);
  --secondary: oklch(0.76 0.1 84);
  --danger: oklch(0.7 0.05 30);
  --warning: oklch(0.7 0.05 100);
  --success: oklch(0.7 0.05 160);
  --info: oklch(0.7 0.05 260);

  /* Glass Cockpit — managed dynamically by ThemeContext (nexus/cockpit/aero etc.)
     Do NOT define --cockpit-bg/surface/elevated here — ThemeContext inline styles handle them. */

  /* Glow accents */
  --glow-primary: oklch(0.7 0.15 264);
  --glow-success: oklch(0.7 0.15 160);
}

/* Utility classes for Tailwind usage if needed, though arbitrary values work too */
.bg-theme-dark {
  background-color: var(--bg-dark);
}

.bg-theme-base {
  background-color: var(--bg);
}

.bg-theme-light {
  background-color: var(--bg-light);
}

.text-theme-base {
  color: var(--text);
}

.text-theme-muted {
  color: var(--text-muted);
}

.border-theme-base {
  border-color: var(--border);
}

.border-theme-muted {
  border-color: var(--border-muted);
}

/* ======================================================
   [EN] Non-critical CSS — moved from index.html inline <style>
        to enable non-blocking CSS loading.
   [KR] 비크리티컬 CSS — index.html 인라인 <style>에서 이동.
        비차단 CSS 로딩을 위함.
   ====================================================== */

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

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

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

html.dark ::-webkit-scrollbar-thumb {
  background: #374151;
}

html.dark ::-webkit-scrollbar-thumb:hover {
  background: #4b5563;
}

/* Admin Sidebar Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(17, 24, 39, 0.3);
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.5), rgba(139, 92, 246, 0.5));
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.8), rgba(139, 92, 246, 0.8));
}

/* Learning Environment — content scrollbar (light mode) */
.learning-scrollbar::-webkit-scrollbar {
  width: 5px;
}

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

.learning-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(209, 213, 219, 0.6);
  border-radius: 10px;
}

.learning-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(156, 163, 175, 0.8);
}

html.dark .learning-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(55, 65, 81, 0.5);
}

html.dark .learning-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(75, 85, 99, 0.7);
}

/* Selection */
::selection {
  background-color: #0c8ce9;
  color: white;
}

/* Glassmorphism */
.glass {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.glass-dark {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
}

.glass-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

html.dark .glass-card {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Smooth Transitions (scoped to interactive elements only) */
button,
input,
select,
a,
[role="button"] {
  transition-property: color, background-color, border-color, box-shadow, transform, opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

/* Date Input — theme-adaptive text */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  color: var(--text, #1A1D23) !important;
}

html.dark input[type="date"],
html.dark input[type="time"],
html.dark input[type="datetime-local"] {
  color-scheme: dark;
}

html.dark input[type="date"]::-webkit-calendar-picker-indicator,
html.dark input[type="time"]::-webkit-calendar-picker-indicator,
html.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(0.8);
  cursor: pointer;
}

/* Print */
@media print {
  .no-print {
    display: none !important;
  }

  body,
  html {
    background: #fff !important;
    color: #000 !important;
  }
}

/* ======================================================================
   [EN] WARM PAPER — Global Light Mode Overrides
       Inverts Tailwind dark-mode utility classes via html:not(.dark)
       so 260+ components get light mode WITHOUT individual file changes.
   [KR] WARM PAPER — 전역 라이트모드 오버라이드
       html:not(.dark) 셀렉터로 Tailwind 다크모드 유틸리티를
       라이트 값으로 반전. 개별 파일 수정 없이 260+ 컴포넌트 일괄 적용.
   ====================================================================== */

/* ─── Cockpit CSS Variables (Header + Layout) ─── */
html:not(.dark) {
  --cockpit-bg: #FFFFFF;
  --cockpit-surface: #F7F6F3;
  --cockpit-elevated: #EFEEEB;
}

/* ─── Backgrounds ────────────────────────────────── */
html:not(.dark) .bg-gray-950,
html:not(.dark) .bg-slate-950 {
  background-color: #F2F1EE !important;
}

html:not(.dark) .bg-gray-900,
html:not(.dark) .bg-slate-900 {
  background-color: #F7F6F3 !important;
}

html:not(.dark) .bg-gray-800,
html:not(.dark) .bg-slate-800 {
  background-color: #EFEEEB !important;
}

html:not(.dark) .bg-gray-800\/90,
html:not(.dark) .bg-slate-800\/90 {
  background-color: rgba(239, 238, 235, 0.92) !important;
}

html:not(.dark) .bg-gray-700,
html:not(.dark) .bg-slate-700 {
  background-color: #E7E6E3 !important;
}

html:not(.dark) .bg-gray-600,
html:not(.dark) .bg-slate-600 {
  background-color: #DDD9D3 !important;
}

/* Hover backgrounds */
html:not(.dark) .hover\:bg-gray-800:hover,
html:not(.dark) .hover\:bg-slate-800:hover {
  background-color: #E7E6E3 !important;
}

html:not(.dark) .hover\:bg-gray-700:hover,
html:not(.dark) .hover\:bg-slate-700:hover {
  background-color: #DDD9D3 !important;
}

html:not(.dark) .hover\:bg-gray-750:hover {
  background-color: #E7E6E3 !important;
}

/* Arbitrary bg values commonly used */
html:not(.dark) .bg-\[\#0f172a\],
html:not(.dark) .bg-\[\#111827\],
html:not(.dark) .bg-\[\#1a1a2e\],
html:not(.dark) .bg-\[\#1e293b\],
html:not(.dark) .bg-\[\#222740\] {
  background-color: #F7F6F3 !important;
}

html:not(.dark) .hover\:bg-\[\#2d3548\]:hover {
  background-color: #EFEEEB !important;
}

/* Opacity backgrounds (rgba overlays) */
html:not(.dark) .bg-gray-900\/95,
html:not(.dark) .bg-slate-900\/95 {
  background-color: rgba(247, 246, 243, 0.97) !important;
}

html:not(.dark) .bg-gray-900\/80,
html:not(.dark) .bg-slate-900\/80,
html:not(.dark) .bg-gray-900\/90 {
  background-color: rgba(247, 246, 243, 0.95) !important;
}

html:not(.dark) .bg-black\/50,
html:not(.dark) .bg-black\/60,
html:not(.dark) .bg-black\/70 {
  background-color: rgba(0, 0, 0, 0.3) !important;
}

/* ─── Text Colors ────────────────────────────────── */
html:not(.dark) .text-white {
  color: #0D1E35 !important;
}

html:not(.dark) .text-gray-100,
html:not(.dark) .text-slate-100 {
  color: #0D1E35 !important;
}

html:not(.dark) .text-gray-200,
html:not(.dark) .text-slate-200 {
  color: #0D1E35 !important;
}

html:not(.dark) .text-gray-300,
html:not(.dark) .text-slate-300 {
  color: #2E4057 !important;
}

html:not(.dark) .text-gray-400,
html:not(.dark) .text-slate-400 {
  color: #2E4057 !important;
}

html:not(.dark) .text-gray-500,
html:not(.dark) .text-slate-500 {
  color: #546E8A !important;
}

/* Hover text */
html:not(.dark) .hover\:text-white:hover {
  color: #0D1E35 !important;
}

html:not(.dark) .hover\:text-gray-100:hover,
html:not(.dark) .hover\:text-gray-200:hover {
  color: #0D1E35 !important;
}

html:not(.dark) .hover\:text-gray-300:hover {
  color: #0D1E35 !important;
}

/* Group hover text */
html:not(.dark) .group-hover\:text-white:hover,
html:not(.dark) .group:hover .group-hover\:text-white {
  color: #0D1E35 !important;
}

/* ─── Border Colors ──────────────────────────────── */
html:not(.dark) .border-gray-800,
html:not(.dark) .border-slate-800 {
  border-color: #C0BDB5 !important;
}

html:not(.dark) .border-gray-700,
html:not(.dark) .border-slate-700 {
  border-color: #C0BDB5 !important;
}

html:not(.dark) .border-gray-600,
html:not(.dark) .border-slate-600 {
  border-color: #C8C4BE !important;
}

html:not(.dark) .border-white\/10,
html:not(.dark) .border-white\/5 {
  border-color: rgba(0, 0, 0, 0.12) !important;
}

/* Divide */
html:not(.dark) .divide-gray-800 > * + *,
html:not(.dark) .divide-gray-700 > * + * {
  border-color: #DDD9D3 !important;
}

/* ─── Ring & Focus ───────────────────────────────── */
html:not(.dark) .ring-gray-700,
html:not(.dark) .ring-slate-700 {
  --tw-ring-color: #DDD9D3 !important;
}

html:not(.dark) .focus\:ring-indigo-500:focus,
html:not(.dark) .focus\:ring-blue-500:focus {
  --tw-ring-color: #1B4D7A !important;
}

/* ─── Input Fields ───────────────────────────────── */
html:not(.dark) input,
html:not(.dark) textarea,
html:not(.dark) select {
  color: #2D2D2D;
}

html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
  color: #8C8C8C !important;
}

/* ─── Accent Colors in Light Mode ────────────────── */
html:not(.dark) .bg-indigo-600 {
  background-color: #1B4D7A !important;
}

html:not(.dark) .bg-indigo-500 {
  background-color: #2B6CB0 !important;
}

html:not(.dark) .hover\:bg-indigo-700:hover {
  background-color: #153D61 !important;
}

html:not(.dark) .text-indigo-400,
html:not(.dark) .text-indigo-300 {
  color: #1B4D7A !important;
}

html:not(.dark) .text-blue-400,
html:not(.dark) .text-blue-300 {
  color: #2B6CB0 !important;
}

html:not(.dark) .text-emerald-400,
html:not(.dark) .text-green-400 {
  color: #2F855A !important;
}

html:not(.dark) .text-red-400 {
  color: #C53030 !important;
}

html:not(.dark) .text-yellow-400,
html:not(.dark) .text-amber-400 {
  color: #B7791F !important;
}

html:not(.dark) .text-purple-400 {
  color: #6B46C1 !important;
}

html:not(.dark) .text-teal-400 {
  color: #2C7A7B !important;
}

/* ─── Status badges / pills ──────────────────────── */
html:not(.dark) .bg-green-500\/10,
html:not(.dark) .bg-emerald-500\/10 {
  background-color: rgba(47, 133, 90, 0.08) !important;
}

html:not(.dark) .bg-red-500\/10 {
  background-color: rgba(197, 48, 48, 0.08) !important;
}

html:not(.dark) .bg-blue-500\/10,
html:not(.dark) .bg-indigo-500\/10 {
  background-color: rgba(27, 77, 122, 0.08) !important;
}

html:not(.dark) .bg-yellow-500\/10,
html:not(.dark) .bg-amber-500\/10 {
  background-color: rgba(183, 121, 31, 0.08) !important;
}

/* ─── Shadows ────────────────────────────────────── */
html:not(.dark) .shadow-lg {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

html:not(.dark) .shadow-xl {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10) !important;
}

html:not(.dark) .shadow-2xl {
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12) !important;
}

/* ─── Prose (Markdown content) ───────────────────── */
html:not(.dark) .prose-invert {
  --tw-prose-body: #2E4057 !important;
  --tw-prose-headings: #0D1E35 !important;
  --tw-prose-links: #1B4D7A !important;
  --tw-prose-bold: #0D1E35 !important;
  --tw-prose-code: #0D1E35 !important;
  --tw-prose-pre-bg: #F5F5F2 !important;
  color: #2E4057 !important;
}

/* ─── Scrollbar for light mode ───────────────────── */
html:not(.dark) .custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(239, 238, 235, 0.5);
}

html:not(.dark) .custom-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(27, 77, 122, 0.3), rgba(43, 108, 176, 0.3));
}

html:not(.dark) .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(27, 77, 122, 0.5), rgba(43, 108, 176, 0.5));
}

/* ─── Glass effects ──────────────────────────────── */
html:not(.dark) .glass-dark {
  background: rgba(247, 246, 243, 0.85) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

/* ─── Gradient overrides ─────────────────────────── */
html:not(.dark) .from-gray-900,
html:not(.dark) .from-slate-900 {
  --tw-gradient-from: #F7F6F3 !important;
}

html:not(.dark) .to-gray-800,
html:not(.dark) .to-slate-800 {
  --tw-gradient-to: #EFEEEB !important;
}

html:not(.dark) .via-gray-900,
html:not(.dark) .via-slate-900 {
  --tw-gradient-via: #F2F1EE !important;
}

/* ======================================================================
   [EN] Learning Environment Light Theme — e-textbook palette alignment
   [KR] 학습환경 라이트 테마 — 전자교재 라이트 팔레트 기반 통합 스타일
   ====================================================================== */

.learning-environment-shell[data-learning-theme-mode="light"] {
  color-scheme: light;
  --bg-base: #f3ecdf;
  --bg-surface: #fffaf2;
  --bg-surface-hover: #f5ecdf;
  --bg-overlay: rgba(199, 101, 43, 0.06);
  --bg-overlay-hover: rgba(199, 101, 43, 0.12);
  --cockpit-bg: #efe5d6;
  --cockpit-surface: rgba(255, 250, 242, 0.96);
  --cockpit-elevated: #f4eadc;
  --primary: #19324a;
  --primary-muted: #314a62;
  --primary-glow: rgba(199, 101, 43, 0.12);
  --primary-glow-strong: rgba(199, 101, 43, 0.22);
  --border: rgba(22, 32, 43, 0.12);
  --border-subtle: rgba(22, 32, 43, 0.08);
  --text-primary: #16202b;
  --text-secondary: #556274;
  --text-muted: #7b8794;
  --shadow-card: 0 18px 40px rgba(91, 62, 37, 0.08);
  background:
    radial-gradient(circle at top right, rgba(199, 101, 43, 0.10), transparent 22%),
    radial-gradient(circle at top left, rgba(25, 50, 74, 0.05), transparent 18%),
    linear-gradient(180deg, #f6efe3 0%, #f3ecdf 38%, #ebdfcf 100%);
  color: var(--text-primary);
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(153, 127, 96, 0.45);
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(123, 98, 71, 0.62);
}

.learning-environment-shell[data-learning-theme-mode="light"] > header,
.learning-environment-shell[data-learning-theme-mode="light"] > nav {
  background: rgba(255, 250, 242, 0.88) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.learning-environment-shell[data-learning-theme-mode="light"] > header {
  box-shadow: inset 0 -1px 0 rgba(22, 32, 43, 0.08);
}

.learning-environment-shell[data-learning-theme-mode="light"] > nav {
  box-shadow: inset 0 1px 0 rgba(22, 32, 43, 0.08);
}

.learning-environment-shell[data-learning-theme-mode="light"] [class*="bg-cockpit-bg"] {
  background-color: rgba(255, 250, 242, 0.92) !important;
}

.learning-environment-shell[data-learning-theme-mode="light"] [class*="bg-cockpit-surface"] {
  background-color: rgba(255, 250, 242, 0.96) !important;
}

.learning-environment-shell[data-learning-theme-mode="light"] [class*="bg-cockpit-elevated"] {
  background-color: #f4eadc !important;
}

.learning-environment-shell[data-learning-theme-mode="light"] [class*="border-gray-200"],
.learning-environment-shell[data-learning-theme-mode="light"] [class*="border-gray-700/30"],
.learning-environment-shell[data-learning-theme-mode="light"] [class*="border-gray-700/40"],
.learning-environment-shell[data-learning-theme-mode="light"] [class*="border-gray-800/30"],
.learning-environment-shell[data-learning-theme-mode="light"] [class*="border-gray-800/50"],
.learning-environment-shell[data-learning-theme-mode="light"] [class*="border-white/10"],
.learning-environment-shell[data-learning-theme-mode="light"] [class*="border-white/5"] {
  border-color: rgba(22, 32, 43, 0.10) !important;
}

.learning-environment-shell[data-learning-theme-mode="light"] [class*="bg-gray-200"],
.learning-environment-shell[data-learning-theme-mode="light"] [class*="bg-gray-100"] {
  background-color: rgba(22, 32, 43, 0.08) !important;
}

.learning-environment-shell[data-learning-theme-mode="light"] [class*="bg-gray-700/30"],
.learning-environment-shell[data-learning-theme-mode="light"] [class*="bg-gray-700/50"],
.learning-environment-shell[data-learning-theme-mode="light"] [class*="bg-gray-800/40"],
.learning-environment-shell[data-learning-theme-mode="light"] [class*="bg-gray-800/50"],
.learning-environment-shell[data-learning-theme-mode="light"] [class*="bg-gray-900/60"],
.learning-environment-shell[data-learning-theme-mode="light"] [class*="bg-gray-900/80"] {
  background-color: rgba(22, 32, 43, 0.07) !important;
}

.learning-environment-shell[data-learning-theme-mode="light"] .text-white,
.learning-environment-shell[data-learning-theme-mode="light"] [class*="dark:text-white"],
.learning-environment-shell[data-learning-theme-mode="light"] .text-gray-900,
.learning-environment-shell[data-learning-theme-mode="light"] .text-gray-700,
.learning-environment-shell[data-learning-theme-mode="light"] [class*="dark:text-gray-300"],
.learning-environment-shell[data-learning-theme-mode="light"] [class*="dark:text-gray-400"],
.learning-environment-shell[data-learning-theme-mode="light"] [class*="dark:text-gray-500"] {
  color: #16202b !important;
}

.learning-environment-shell[data-learning-theme-mode="light"] .text-gray-600,
.learning-environment-shell[data-learning-theme-mode="light"] .text-gray-500,
.learning-environment-shell[data-learning-theme-mode="light"] .text-gray-400,
.learning-environment-shell[data-learning-theme-mode="light"] .text-gray-300 {
  color: #5d6a7c !important;
}

.learning-environment-shell[data-learning-theme-mode="light"] [class*="hover:text-white"]:hover,
.learning-environment-shell[data-learning-theme-mode="light"] [class*="dark:hover:text-white"]:hover {
  color: #16202b !important;
}

.learning-environment-shell[data-learning-theme-mode="light"] [class*="hover:bg-cockpit-elevated"]:hover,
.learning-environment-shell[data-learning-theme-mode="light"] [class*="hover:bg-gray-800"]:hover,
.learning-environment-shell[data-learning-theme-mode="light"] [class*="hover:bg-gray-900"]:hover {
  background-color: #efe3d2 !important;
}

.learning-environment-shell[data-learning-theme-mode="light"] [class*="text-indigo-600"],
.learning-environment-shell[data-learning-theme-mode="light"] [class*="text-indigo-400"],
.learning-environment-shell[data-learning-theme-mode="light"] [class*="dark:text-indigo-400"],
.learning-environment-shell[data-learning-theme-mode="light"] [class*="dark:text-indigo-300"] {
  color: #c7652b !important;
}

.learning-environment-shell[data-learning-theme-mode="light"] [class*="bg-indigo-100"],
.learning-environment-shell[data-learning-theme-mode="light"] [class*="bg-indigo-500/20"],
.learning-environment-shell[data-learning-theme-mode="light"] [class*="dark:bg-indigo-500/20"] {
  background-color: rgba(199, 101, 43, 0.10) !important;
}

.learning-environment-shell[data-learning-theme-mode="light"] [class*="border-indigo-200"],
.learning-environment-shell[data-learning-theme-mode="light"] [class*="border-indigo-500/30"],
.learning-environment-shell[data-learning-theme-mode="light"] [class*="ring-indigo-400/30"] {
  border-color: rgba(199, 101, 43, 0.22) !important;
  --tw-ring-color: rgba(199, 101, 43, 0.18) !important;
}

.learning-environment-shell[data-learning-theme-mode="light"] [class*="shadow-[0_-4px_16px"] {
  box-shadow:
    0 -6px 22px rgba(91, 62, 37, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

.learning-environment-shell[data-learning-theme-mode="light"] .rounded-xl,
.learning-environment-shell[data-learning-theme-mode="light"] .rounded-2xl,
.learning-environment-shell[data-learning-theme-mode="light"] .rounded-t-xl,
.learning-environment-shell[data-learning-theme-mode="light"] .rounded-b-xl {
  box-shadow: 0 12px 28px rgba(91, 62, 37, 0.05);
}

.learning-video-stage {
  width: 100%;
  min-height: calc(100vh - 260px);
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.learning-video-frame {
  width: min(100%, 1320px);
  min-height: 100%;
  background: #000;
  border-radius: 30px;
  overflow: hidden;
}

.learning-video-meta {
  display: none;
}

.learning-video-shell {
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 260px);
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.learning-video-ratio {
  position: relative;
  aspect-ratio: 16 / 9;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: 1px;
}

.learning-quiz-content {
  min-height: 0;
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-module-panel--video-light {
  background:
    radial-gradient(circle at top right, rgba(199, 101, 43, 0.10), transparent 28%),
    linear-gradient(180deg, rgba(255, 252, 246, 0.96) 0%, rgba(248, 240, 229, 0.92) 100%) !important;
  box-shadow:
    0 18px 48px rgba(91, 62, 37, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-module-tabs {
  gap: 8px;
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-module-tab {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-module-tab[data-active="true"] {
  background:
    linear-gradient(180deg, rgba(255, 251, 244, 0.98), rgba(248, 240, 228, 0.94)) !important;
  color: #16202b !important;
  border-color: rgba(22, 32, 43, 0.12) !important;
  box-shadow:
    0 -6px 22px rgba(91, 62, 37, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-module-tab[data-locked="true"] {
  color: #8a7a68 !important;
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-video-frame {
  background:
    linear-gradient(180deg, rgba(255, 252, 246, 0.96), rgba(247, 239, 228, 0.94));
  border: 1px solid rgba(22, 32, 43, 0.10);
  box-shadow:
    0 28px 60px rgba(91, 62, 37, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
  padding: 22px;
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-video-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-video-eyebrow {
  margin: 0 0 6px;
  color: #c7652b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-video-title {
  margin: 0;
  color: #16202b;
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.9rem);
  line-height: 1.1;
  font-weight: 700;
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-video-pill {
  flex-shrink: 0;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: rgba(199, 101, 43, 0.10);
  border: 1px solid rgba(199, 101, 43, 0.18);
  color: #c7652b;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-video-shell {
  min-height: calc(100vh - 340px);
  background:
    radial-gradient(circle at 50% 0%, rgba(87, 120, 156, 0.18), transparent 44%),
    linear-gradient(180deg, #203245 0%, #132234 100%);
  border-radius: 24px;
  padding: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 16px 36px rgba(17, 28, 42, 0.24);
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-video-ratio {
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.24);
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-quiz-subtabs {
  gap: 10px;
  padding: 8px 8px 0;
  background: linear-gradient(180deg, rgba(255, 251, 244, 0.94), rgba(247, 239, 228, 0.88));
  border: 1px solid rgba(22, 32, 43, 0.10);
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-quiz-subtab {
  border-radius: 18px 18px 0 0;
  border-bottom-color: transparent !important;
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-quiz-subtab[data-active="true"] {
  background:
    linear-gradient(180deg, rgba(255, 251, 244, 1), rgba(248, 240, 228, 0.98)) !important;
  color: #16202b !important;
  border-color: rgba(22, 32, 43, 0.12) !important;
  box-shadow:
    0 -6px 20px rgba(91, 62, 37, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-quiz-subtab[data-active="false"] {
  color: #6b7280 !important;
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-quiz-subtab[data-active="false"]:hover {
  background: rgba(199, 101, 43, 0.06) !important;
  color: #445264 !important;
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-quiz-content {
  padding: 26px 22px 18px;
  background:
    linear-gradient(180deg, rgba(255, 252, 247, 0.96), rgba(249, 241, 229, 0.92));
  border: 1px solid rgba(22, 32, 43, 0.10);
  border-top: 0;
  border-radius: 0 0 28px 28px;
  box-shadow:
    0 20px 44px rgba(91, 62, 37, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-quiz-launch {
  padding: 30px 28px;
  background: rgba(255, 251, 244, 0.74);
  border: 1px solid rgba(22, 32, 43, 0.08);
  border-radius: 24px;
  box-shadow: 0 14px 30px rgba(91, 62, 37, 0.07);
}

@media (max-width: 960px) {
  .learning-environment-shell[data-learning-theme-mode="light"] .learning-video-frame {
    padding: 16px;
    border-radius: 22px;
  }

  .learning-environment-shell[data-learning-theme-mode="light"] .learning-video-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .learning-environment-shell[data-learning-theme-mode="light"] .learning-video-shell {
    min-height: auto;
    padding: 12px;
  }

  .learning-environment-shell[data-learning-theme-mode="light"] .learning-quiz-content {
    padding: 18px 14px 12px;
  }
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-video-player {
  border: 1px solid rgba(22, 32, 43, 0.12);
  box-shadow:
    0 24px 50px rgba(17, 28, 42, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-video-buffering {
  background: rgba(19, 34, 52, 0.28);
  backdrop-filter: blur(2px);
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-video-resume-card {
  background: linear-gradient(180deg, rgba(255, 251, 244, 0.98), rgba(248, 240, 228, 0.96)) !important;
  border-color: rgba(22, 32, 43, 0.10) !important;
  box-shadow:
    0 24px 48px rgba(17, 28, 42, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-video-controls {
  background: linear-gradient(180deg, transparent 0%, rgba(13, 24, 38, 0.26) 16%, rgba(13, 24, 38, 0.78) 100%) !important;
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-video-progress {
  background: rgba(255, 255, 255, 0.18) !important;
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-video-progress::-webkit-slider-thumb {
  background: #fffaf2 !important;
  box-shadow:
    0 0 0 3px rgba(199, 101, 43, 0.22),
    0 4px 10px rgba(0, 0, 0, 0.35);
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-video-time {
  color: rgba(255, 247, 237, 0.82) !important;
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-video-control-button {
  color: rgba(255, 247, 237, 0.78) !important;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-video-control-button:hover {
  color: #fffaf2 !important;
  background: rgba(199, 101, 43, 0.18) !important;
  border-color: rgba(199, 101, 43, 0.28) !important;
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-video-control-button--primary {
  background: rgba(199, 101, 43, 0.16);
  border-color: rgba(199, 101, 43, 0.24);
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-video-speed-button {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  color: rgba(255, 247, 237, 0.78) !important;
  padding-inline: 0.7rem;
  padding-block: 0.35rem;
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-video-speed-button:hover {
  color: #fffaf2 !important;
  background: rgba(199, 101, 43, 0.18) !important;
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-video-speed-menu {
  background: linear-gradient(180deg, rgba(255, 251, 244, 0.98), rgba(247, 239, 228, 0.96)) !important;
  border-color: rgba(22, 32, 43, 0.10) !important;
  box-shadow:
    0 18px 36px rgba(17, 28, 42, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-video-speed-option {
  color: #4d5b6c !important;
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-video-speed-option:hover {
  background: rgba(199, 101, 43, 0.08) !important;
  color: #16202b !important;
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-video-speed-option[class*="bg-blue-600"] {
  background: rgba(199, 101, 43, 0.14) !important;
  color: #c7652b !important;
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-quiz-result-hero {
  background: linear-gradient(180deg, rgba(255, 251, 244, 0.98), rgba(248, 240, 228, 0.94));
  box-shadow:
    0 18px 40px rgba(91, 62, 37, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-quiz-result-statusbar {
  border: 1px solid rgba(22, 32, 43, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66);
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-quiz-result-card {
  box-shadow:
    0 12px 28px rgba(91, 62, 37, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-quiz-result-card[class*="bg-red-900"] {
  background: rgba(255, 235, 232, 0.8) !important;
  border-color: rgba(239, 68, 68, 0.18) !important;
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-quiz-result-card[class*="bg-emerald-900"] {
  background: rgba(233, 249, 241, 0.82) !important;
  border-color: rgba(16, 185, 129, 0.18) !important;
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-quiz-result-explanation {
  border: 1px solid rgba(22, 32, 43, 0.06);
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-quiz-result-action {
  background: linear-gradient(180deg, rgba(255, 251, 244, 0.98), rgba(243, 234, 220, 0.96)) !important;
  color: #16202b !important;
  border: 1px solid rgba(22, 32, 43, 0.10);
  box-shadow:
    0 12px 24px rgba(91, 62, 37, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-quiz-result-action:hover {
  background: rgba(199, 101, 43, 0.10) !important;
  color: #c7652b !important;
  border-color: rgba(199, 101, 43, 0.18);
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-quiz-result-action--wrong {
  background: linear-gradient(180deg, rgba(255, 238, 235, 0.98), rgba(255, 227, 220, 0.94)) !important;
  color: #c2410c !important;
  border-color: rgba(239, 68, 68, 0.16);
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-mock-result-card,
.learning-environment-shell[data-learning-theme-mode="light"] .learning-mock-result-warning {
  background: linear-gradient(180deg, rgba(255, 251, 244, 0.98), rgba(248, 240, 228, 0.94)) !important;
  border-color: rgba(22, 32, 43, 0.10) !important;
  box-shadow:
    0 16px 34px rgba(91, 62, 37, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-mock-result .text-white,
.learning-environment-shell[data-learning-theme-mode="light"] .learning-mock-result-card .text-white,
.learning-environment-shell[data-learning-theme-mode="light"] .learning-mock-result-warning .text-white {
  color: #16202b !important;
}

.learning-environment-shell[data-learning-theme-mode="light"] .learning-mock-result-back:hover {
  color: #c7652b !important;
}