/* Screenshot-approved blue-black palette. Loaded after the release stylesheet. */
[data-theme='dark'],
[data-mode='dark'],
body.dark,
.dark {
  --bg-app: #111923;
  --bg-panel: #1b2531;
  --bg-card: #202c3a;
  --bg-card-hover: #29384a;
  --border-subtle: #344458;
  --border-focus: #3c628b;

  --text-main: #e5e7eb;
  --text-sub: #a3b2c7;
  --text-muted: #8e9fb6;

  --accent: #60a5fa;
  --accent-hover: #93c5fd;
  --accent-subtle: #2b3c50;
  --accent-border: #3b82f6;
  --on-accent: #111923;

  --active-word-bg: #344d68;
  --active-word-text: #93c5fd;
  --active-word-border: #3c628b;
  --badge-author-bg: #2b3c50;
  --badge-author-text: #93c5fd;
  --active-nav-bg: #2b3c50;
  --active-nav-text: #60a5fa;
  --video-surface: #080c12;
  --video-control: #f1f5f9;
  --video-control-muted: #a3b2c7;

  /* Semantic aliases also cover admin forms, dialogs, menus and charts. */
  --background: 213.33 34.62% 10.20%;
  --foreground: 220 13.04% 90.98%;
  --card: 212.31 28.89% 17.65%;
  --card-foreground: 220 13.04% 90.98%;
  --popover: 212.73 28.95% 14.90%;
  --popover-foreground: 220 13.04% 90.98%;
  --primary: 213.12 93.9% 67.84%;
  --primary-foreground: 213.33 34.62% 10.20%;
  --secondary: 212.73 28.70% 22.55%;
  --secondary-foreground: 220 13.04% 90.98%;
  --muted: 212.73 28.70% 22.55%;
  --muted-foreground: 215 24.32% 70.98%;
  --accent-hsl: 212.43 30.08% 24.12%;
  --accent-foreground: 211.7 96.36% 78.43%;
  --border: 213.33 25.71% 27.45%;
  --input: 213.33 25.71% 27.45%;
  --ring: 217.22 91.22% 59.8%;
  --chart-1: 213.12 93.9% 67.84%;
  --chart-2: 211.7 96.36% 78.43%;
  --chart-3: 215 24.32% 70.98%;
  --chart-4: 199 89% 60%;
  --sidebar-background: 212.73 28.95% 14.90%;
  --sidebar-foreground: 220 13.04% 90.98%;
  --sidebar-primary: 213.12 93.9% 67.84%;
  --sidebar-primary-foreground: 213.33 34.62% 10.20%;
  --sidebar-accent: 212.43 30.08% 24.12%;
  --sidebar-accent-foreground: 211.7 96.36% 78.43%;
  --sidebar-border: 213.33 25.71% 27.45%;
  --sidebar-ring: 217.22 91.22% 59.8%;
  --shadow-card: 0 2px 8px rgb(0 0 0 / 16%);
  --shadow-hover: 0 12px 28px rgb(0 0 0 / 28%);
}

:is([data-theme='dark'], [data-mode='dark'], .dark) .video-detail-page {
  --video-learning-border: var(--border-subtle);
}

:is([data-theme='dark'], [data-mode='dark'], .dark) .theme-mode-tab[data-active='true'],
:is([data-theme='dark'], [data-mode='dark'], .dark) .theme-mode-tab[aria-selected='true'] {
  color: var(--accent);
}

:is([data-theme='dark'], [data-mode='dark'], .dark) .video-detail-page :is(
  .practice-sentence-card,
  .subtitle-timeline-card,
  .shadowing-recording-card,
  .study-book-card
) {
  box-shadow: var(--shadow-card);
}

:is([data-theme='dark'], [data-mode='dark'], .dark) .video-detail-page .subtitle-timeline-card:is(
  .is-playing,
  [data-active='true']
) {
  background-color: var(--accent-subtle);
  border-color: var(--accent-border);
  color: #f1f5f9;
  box-shadow: 0 0 0 1px var(--accent-border), 0 6px 20px rgb(59 130 246 / 10%);
}

:is([data-theme='dark'], [data-mode='dark'], .dark) .video-detail-page .video-detail-player {
  background-color: var(--video-surface);
}

:is([data-theme='dark'], [data-mode='dark'], .dark) .video-detail-page [data-learning-control-bar],
:is([data-theme='dark'], [data-mode='dark'], .dark) .video-detail-page [data-practice-action-bar] {
  background-color: var(--bg-panel);
}

/* The downloaded release has fixed light colors in its admin shell. The
   structural selector supports that bundle; .admin-layout is the source hook. */
:is([data-theme='dark'], [data-mode='dark'], .dark) :is(
  .admin-layout,
  .h-screen:has(> aside a[href='/admin/ai'])
) {
  background: var(--bg-app) !important;
  color: var(--text-main);
}

:is([data-theme='dark'], [data-mode='dark'], .dark) :is(
  .admin-layout,
  .h-screen:has(> aside a[href='/admin/ai'])
) :is(aside.bg-white, .bg-white.border-b) {
  background-color: var(--bg-panel);
}

:is([data-theme='dark'], [data-mode='dark'], .dark) :is(
  .admin-layout,
  .h-screen:has(> aside a[href='/admin/ai'])
) aside :is(a.bg-primary, .bg-primary .text-white) {
  color: var(--on-accent);
  fill: currentColor;
}