/* CUR Map API — Executive Theme System (Dark / Light) */

:root,
html[data-theme='dark'] {
  color-scheme: dark;
  --brand-400: #38bdf8;
  --brand-500: #0ea5e9;
  --brand-600: #0284c7;
  --surface-950: #020617;
  --surface-900: #0f172a;
  --surface-0: #020617;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --border-subtle: rgba(51, 65, 85, 0.6);
  --border-strong: rgba(51, 65, 85, 0.8);
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(51, 65, 85, 0.6);
  --input-bg: rgba(2, 6, 23, 0.8);
  --input-text: #f1f5f9;
  --input-placeholder: #64748b;
  --btn-ghost-bg: rgba(255, 255, 255, 0.03);
  --btn-ghost-text: #cbd5e1;
  --btn-ghost-hover-bg: rgba(255, 255, 255, 0.08);
  --btn-ghost-hover-text: #f1f5f9;
  --modal-backdrop: rgba(0, 0, 0, 0.7);
  --scrollbar-track: #1e293b;
  --scrollbar-thumb: #475569;
  --landing-bg: radial-gradient(ellipse 100% 80% at 50% 0%, #0a1525 0%, #020617 60%);
  --panel-shadow: none;
  --glow-brand: 0 0 60px -12px rgba(14, 165, 233, 0.35);
  --glow-cyan: 0 0 60px -12px rgba(34, 211, 238, 0.25);
  --code-bg: rgba(2, 6, 23, 0.85);
  --table-divider: rgba(30, 41, 59, 0.6);

  /* Семантические алиасы. Исторические имена (--surface-*, --glass-*)
     оставлены рабочими, чтобы не переписывать разом всю разметку. */
  --bg-primary: var(--surface-950);
  --bg-secondary: var(--surface-900);
  --card-bg: var(--glass-bg);
  --border-color: var(--border-subtle);

  /* Блок кода. В тёмной теме фон почти чёрный, текст светлый. */
  --code-surface: #020617;
  --code-border: rgba(51, 65, 85, 0.6);
  --code-text: #cbd5e1;
  --code-sample-bg: rgba(2, 6, 23, 0.6);
  --code-btn-bg: rgba(15, 23, 42, 0.9);

  /* Токены подсветки — рассчитаны на тёмный фон блока кода. */
  --tok-key: #7dd3fc;
  --tok-str: #34d399;
  --tok-num: #fcd34d;
  --tok-dim: #64748b;

  /* Дорожка прогресс-бара и нейтральный бейдж — роли, а не оттенки. */
  --track-bg: #1f2937;
  --badge-neutral-bg: rgba(51, 65, 85, 0.55);
  --ring-page: var(--surface-950);
}

html[data-theme='light'] {
  color-scheme: light;
  --brand-400: #0ea5e9;
  --brand-500: #0284c7;
  --brand-600: #0369a1;
  --surface-950: #f8fafc;
  --surface-900: #ffffff;
  --surface-0: #f1f5f9;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --border-subtle: rgba(226, 232, 240, 0.95);
  --border-strong: rgba(203, 213, 225, 0.95);
  --glass-bg: rgba(255, 255, 255, 0.92);
  --glass-border: rgba(226, 232, 240, 0.95);
  --input-bg: #ffffff;
  --input-text: #0f172a;
  --input-placeholder: #94a3b8;
  --btn-ghost-bg: #ffffff;
  --btn-ghost-text: #334155;
  --btn-ghost-hover-bg: #f1f5f9;
  --btn-ghost-hover-text: #0f172a;
  --modal-backdrop: rgba(15, 23, 42, 0.35);
  --scrollbar-track: #e2e8f0;
  --scrollbar-thumb: #94a3b8;
  --landing-bg: radial-gradient(ellipse 100% 80% at 50% -10%, #e2e8f0 0%, #f8fafc 55%, #ffffff 100%);
  --panel-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.12);
  --glow-brand: 0 8px 28px -12px rgba(2, 132, 199, 0.25);
  --glow-cyan: 0 8px 28px -12px rgba(99, 102, 241, 0.2);
  /* Молочный, а не чёрный: тёмный блок кода посреди светлой страницы
     читается как невыключенная заплата из другой темы. */
  --code-bg: #f1f5f9;
  --table-divider: rgba(226, 232, 240, 0.95);

  --bg-primary: var(--surface-950);
  --bg-secondary: var(--surface-900);
  --card-bg: var(--glass-bg);
  --border-color: var(--border-subtle);

  --code-surface: #f8fafc;
  --code-border: #e2e8f0;
  --code-text: #334155;
  --code-sample-bg: #ffffff;
  --code-btn-bg: rgba(255, 255, 255, 0.92);

  /* Те же роли, но затемнённые до контраста ≥ 4.5:1 на молочном фоне.
     Светлые токены тёмной темы на #f8fafc нечитаемы. */
  --tok-key: #0369a1;
  --tok-str: #047857;
  --tok-num: #b45309;
  --tok-dim: #64748b;

  --track-bg: #e2e8f0;
  --badge-neutral-bg: #e2e8f0;
  --ring-page: #ffffff;
}

html {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

body {
  background-color: var(--surface-950);
  color: var(--text-primary);
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Background */
.landing-bg-subtle {
  background: var(--landing-bg);
}

/* Glass panels */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--panel-shadow);
}

.glass {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 100%);
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  transition: all 0.2s ease;
  box-shadow: 0 0 20px -4px rgba(14, 165, 233, 0.4);
}

html[data-theme='light'] .btn-primary {
  box-shadow: 0 4px 14px -4px rgba(2, 132, 199, 0.45);
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--brand-400) 0%, var(--brand-500) 100%);
  transform: translateY(-1px);
  box-shadow: 0 0 28px -4px rgba(14, 165, 233, 0.55);
}

html[data-theme='light'] .btn-primary:hover:not(:disabled) {
  box-shadow: 0 8px 20px -6px rgba(2, 132, 199, 0.5);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: 1px solid var(--border-strong);
  background: var(--btn-ghost-bg);
  padding: 0.375rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--btn-ghost-text);
  transition: all 0.2s ease;
}

.btn-ghost:hover {
  background: var(--btn-ghost-hover-bg);
  border-color: var(--border-strong);
  color: var(--btn-ghost-hover-text);
}

.btn-ghost-danger:hover {
  border-color: rgba(127, 29, 29, 0.5);
  color: #f87171;
}

html[data-theme='light'] .btn-ghost-danger:hover {
  border-color: rgba(248, 113, 113, 0.55);
  color: #dc2626;
  background: #fef2f2;
}

/* Theme toggle — fixed footprint, no layout shift */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0;
  border-radius: 0.625rem;
  border: 1px solid var(--border-strong);
  background: var(--btn-ghost-bg);
  color: var(--btn-ghost-text);
  cursor: pointer;
  overflow: hidden;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.theme-toggle:hover {
  background: var(--btn-ghost-hover-bg);
  color: var(--btn-ghost-hover-text);
  box-shadow: var(--panel-shadow);
}

.theme-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.25);
}

.theme-toggle__icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: opacity 0.28s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.theme-toggle__icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

.theme-toggle__sun {
  opacity: 0;
  transform: rotate(-40deg) scale(0.7);
}

.theme-toggle__moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

html[data-theme='light'] .theme-toggle__sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

html[data-theme='light'] .theme-toggle__moon {
  opacity: 0;
  transform: rotate(40deg) scale(0.7);
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle__icon {
    transition: opacity 0.15s ease;
  }
  .theme-toggle__sun,
  .theme-toggle__moon,
  html[data-theme='light'] .theme-toggle__sun,
  html[data-theme='light'] .theme-toggle__moon {
    transform: none;
  }
}

/* Typography */
.text-gradient {
  background: linear-gradient(135deg, #f8fafc 0%, #94a3b8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-brand {
  background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 50%, #6366f1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Glow accents */
.glow-brand {
  box-shadow: var(--glow-brand);
}

.glow-cyan {
  box-shadow: var(--glow-cyan);
}

/* Form inputs */
.input-field {
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid var(--border-strong);
  background: var(--input-bg);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--input-text);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s;
}

.input-field::placeholder {
  color: var(--input-placeholder);
}

.input-field:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

/* Scrollbar */
.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 3px;
}

/* Premium feature cards */
.feature-card-premium {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
  transition: border-color 0.2s ease;
}

.feature-card-premium:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

.feature-card {
  transition: border-color 0.2s ease;
}

/* Modal */
.modal-backdrop {
  background: var(--modal-backdrop);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Landing entrance animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
  opacity: 0;
}

.animate-delay-1 { animation-delay: 0.15s; }
.animate-delay-2 { animation-delay: 0.3s; }
.animate-delay-3 { animation-delay: 0.45s; }
.animate-delay-4 { animation-delay: 0.6s; }
.animate-delay-5 { animation-delay: 0.75s; }

@media (prefers-reduced-motion: reduce) {
  .animate-fade-in-up {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Light theme remaps for dashboard + cabinet modals (Tailwind dark-first UI)
   ========================================================================== */

html[data-theme='light'] #dashboard,
html[data-theme='light'] #dashboard ~ [id$='Modal'],
html[data-theme='light'] #toast {
  color: var(--text-primary);
}

html[data-theme='light'] #dashboard .text-white,
html[data-theme='light'] #dashboard ~ [id$='Modal'] .text-white {
  color: #0f172a !important;
}

html[data-theme='light'] #dashboard .text-slate-100,
html[data-theme='light'] #dashboard .text-slate-200,
html[data-theme='light'] #dashboard ~ [id$='Modal'] .text-slate-100,
html[data-theme='light'] #dashboard ~ [id$='Modal'] .text-slate-200 {
  color: #0f172a !important;
}

html[data-theme='light'] #dashboard .text-slate-300,
html[data-theme='light'] #dashboard ~ [id$='Modal'] .text-slate-300 {
  color: #334155 !important;
}

html[data-theme='light'] #dashboard .text-slate-400,
html[data-theme='light'] #dashboard .text-gray-400,
html[data-theme='light'] #dashboard ~ [id$='Modal'] .text-slate-400,
html[data-theme='light'] #dashboard ~ [id$='Modal'] .text-gray-400 {
  color: #64748b !important;
}

html[data-theme='light'] #dashboard .text-slate-500,
html[data-theme='light'] #dashboard .text-gray-500,
html[data-theme='light'] #dashboard .text-gray-600,
html[data-theme='light'] #dashboard ~ [id$='Modal'] .text-slate-500,
html[data-theme='light'] #dashboard ~ [id$='Modal'] .text-gray-500 {
  color: #64748b !important;
}

html[data-theme='light'] #dashboard .border-slate-800,
html[data-theme='light'] #dashboard .border-slate-800\/60,
html[data-theme='light'] #dashboard .border-gray-800,
html[data-theme='light'] #dashboard ~ [id$='Modal'] .border-slate-800,
html[data-theme='light'] #dashboard ~ [id$='Modal'] .border-slate-800\/60,
html[data-theme='light'] #dashboard ~ [id$='Modal'] .border-gray-800,
html[data-theme='light'] #dashboard ~ [id$='Modal'] .border-slate-700\/80 {
  border-color: #e2e8f0 !important;
}

html[data-theme='light'] #dashboard .divide-slate-800\/60 > :not([hidden]) ~ :not([hidden]),
html[data-theme='light'] #dashboard ~ [id$='Modal'] .divide-slate-800\/60 > :not([hidden]) ~ :not([hidden]),
html[data-theme='light'] #dashboard .divide-gray-800\/80 > :not([hidden]) ~ :not([hidden]) {
  border-color: #e2e8f0 !important;
}

html[data-theme='light'] #dashboard .bg-gray-950,
html[data-theme='light'] #dashboard .bg-gray-950\/60,
html[data-theme='light'] #dashboard .bg-gray-950\/80,
html[data-theme='light'] #dashboard .bg-gray-950\/95,
html[data-theme='light'] #dashboard .bg-slate-950\/50,
html[data-theme='light'] #dashboard .bg-slate-950\/40,
html[data-theme='light'] #dashboard .bg-slate-950\/95,
html[data-theme='light'] #dashboard .bg-black\/40,
html[data-theme='light'] #dashboard ~ [id$='Modal'] .bg-gray-950,
html[data-theme='light'] #dashboard ~ [id$='Modal'] .bg-gray-950\/60,
html[data-theme='light'] #dashboard ~ [id$='Modal'] .bg-gray-950\/80,
html[data-theme='light'] #dashboard ~ [id$='Modal'] .bg-gray-950\/95,
html[data-theme='light'] #dashboard ~ [id$='Modal'] .bg-slate-950\/50,
html[data-theme='light'] #dashboard ~ [id$='Modal'] .bg-slate-950\/40,
html[data-theme='light'] #dashboard ~ [id$='Modal'] .bg-slate-950\/95,
html[data-theme='light'] #dashboard ~ [id$='Modal'] .bg-black\/40 {
  background-color: #f8fafc !important;
}

html[data-theme='light'] #dashboard .bg-slate-800\/40:hover,
html[data-theme='light'] #dashboard .hover\:bg-slate-800\/40:hover,
html[data-theme='light'] #dashboard ~ [id$='Modal'] .hover\:bg-slate-800\/40:hover,
html[data-theme='light'] #dashboard .hover\:bg-gray-800\/30:hover {
  background-color: #f1f5f9 !important;
}

html[data-theme='light'] #dashboard .bg-gray-800,
html[data-theme='light'] #dashboard .bg-slate-800 {
  background-color: #e2e8f0 !important;
}

html[data-theme='light'] #dashboard pre,
html[data-theme='light'] #dashboard ~ [id$='Modal'] pre {
  background-color: var(--code-bg, #f8fafc) !important;
  border-color: #e2e8f0 !important;
  color: var(--text-primary, #0f172a) !important;
}

html[data-theme='light'] #dashboard pre .text-gray-500,
html[data-theme='light'] #dashboard pre .text-gray-400,
html[data-theme='light'] #dashboard pre .text-slate-500 {
  color: var(--text-muted, #64748b) !important;
}

html[data-theme='light'] #dashboard pre .text-white {
  color: var(--text-primary, #0f172a) !important;
}

html[data-theme='light'] #dashboard .text-sky-300,
html[data-theme='light'] #dashboard ~ [id$='Modal'] .text-sky-300,
html[data-theme='light'] #dashboard ~ [id$='Modal'] .text-sky-400\/90 {
  color: #0369a1 !important;
}

html[data-theme='light'] #dashboard .text-indigo-400,
html[data-theme='light'] #dashboard .text-indigo-400\/90,
html[data-theme='light'] #dashboard ~ [id$='Modal'] .text-indigo-400 {
  color: #4f46e5 !important;
}

html[data-theme='light'] #dashboard .border-l-indigo-500\/40 {
  border-left-color: rgba(99, 102, 241, 0.55) !important;
}

html[data-theme='light'] #dashboard .bg-sky-950\/20,
html[data-theme='light'] #dashboard .border-sky-800\/40 {
  background-color: #f0f9ff !important;
  border-color: #bae6fd !important;
}

html[data-theme='light'] #dashboard .text-sky-200,
html[data-theme='light'] #dashboard .text-sky-400 {
  color: #0369a1 !important;
}

html[data-theme='light'] #dashboard .border-red-900\/50,
html[data-theme='light'] #dashboard .bg-red-950\/20,
html[data-theme='light'] #dashboard .bg-red-950\/30,
html[data-theme='light'] #dashboard ~ [id$='Modal'] .bg-red-950\/30 {
  background-color: #fef2f2 !important;
  border-color: #fecaca !important;
}

html[data-theme='light'] #dashboard .text-red-400,
html[data-theme='light'] #dashboard ~ [id$='Modal'] .text-red-400 {
  color: #dc2626 !important;
}

html[data-theme='light'] #dashboard .bg-emerald-950\/30,
html[data-theme='light'] #dashboard ~ [id$='Modal'] .bg-emerald-950\/30,
html[data-theme='light'] #dashboard ~ [id$='Modal'] .border-emerald-800\/50 {
  background-color: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
}

html[data-theme='light'] #dashboard .text-emerald-300,
html[data-theme='light'] #dashboard .text-emerald-400,
html[data-theme='light'] #dashboard ~ [id$='Modal'] .text-emerald-300,
html[data-theme='light'] #dashboard ~ [id$='Modal'] .text-emerald-400 {
  color: #059669 !important;
}

html[data-theme='light'] #dashboard .bg-amber-950\/30,
html[data-theme='light'] #dashboard .text-amber-400\/90 {
  color: #b45309 !important;
}

html[data-theme='light'] #dashboard header.glass-panel {
  background: rgba(255, 255, 255, 0.88);
  border-bottom-color: #e2e8f0;
}

html[data-theme='light'] #dashboard ~ [id$='Modal'] .glass-panel {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.18);
}

html[data-theme='light'] #dashboard ~ [id$='Modal'] .text-slate-100 {
  color: #0f172a !important;
}

html[data-theme='light'] #toast {
  box-shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.25);
}

/* Keep landing cinematic dark regardless of cabinet theme */
html[data-theme='light'] #authGate {
  color: #f1f5f9;
}

/*
  Лендинг всегда тёмный (видео + оверлей), даже если в кабинете выбрана
  светлая тема. Без этой блокировки подвал берёт --bg-secondary/#ffffff
  и рисует белую полосу поверх карты.
*/
#authGate .global-footer {
  background: rgba(2, 6, 23, 0.92) !important;
  border-top-color: rgba(255, 255, 255, 0.1) !important;
  color: #94a3b8 !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#authGate .global-footer .footer-support__title,
#authGate .global-footer .footer-legal {
  color: #94a3b8 !important;
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

#authGate .global-footer .footer-mail {
  color: #38bdf8 !important;
}

#authGate .global-footer .footer-copy {
  color: #64748b !important;
  background: transparent !important;
}

/* Live stats dashboard */
.stat-dashboard {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 24px 48px -24px rgba(0, 0, 0, 0.5);
}

.stat-metric-card {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  padding: 1.25rem 1.5rem;
}

.stat-metric-value {
  font-variant-numeric: tabular-nums;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.stat-metric-value.is-updating {
  color: var(--brand-400);
  text-shadow: 0 0 20px rgba(56, 189, 248, 0.35);
}

.stat-endpoint-bar {
  display: flex;
  height: 0.5rem;
  overflow: hidden;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06);
}

.stat-endpoint-bar-tiles {
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-endpoint-bar-geocode {
  background: linear-gradient(90deg, #6366f1, #818cf8);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-services-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
  width: 100%;
}

.stat-service-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3.5rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.6);
  font-size: 0.9375rem;
  font-weight: 500;
  color: #e2e8f0;
}

.stat-service-card--ok {
  border-color: rgba(34, 197, 94, 0.2);
  background: rgba(15, 23, 42, 0.75);
}

.stat-service-card--down {
  border-color: rgba(239, 68, 68, 0.35);
  color: #fca5a5;
}

.stat-service-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-status-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.stat-status-dot--ok {
  background: #22c55e;
  box-shadow:
    0 0 12px rgba(34, 197, 94, 0.85),
    0 0 24px rgba(34, 197, 94, 0.35);
  animation: statPulseOk 2s ease-in-out infinite;
}

.stat-status-dot--down {
  background: #ef4444;
  box-shadow:
    0 0 12px rgba(239, 68, 68, 0.85),
    0 0 24px rgba(239, 68, 68, 0.35);
  animation: statPulseDown 1.2s ease-in-out infinite;
}

@keyframes statPulseOk {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.75; transform: scale(0.95); }
}

@keyframes statPulseDown {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.stat-terminal {
  font-family: ui-monospace, 'JetBrains Mono', 'Cascadia Code', monospace;
  font-size: 0.8125rem;
  line-height: 1.75;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(2, 6, 23, 0.9);
  padding: 1rem 1.25rem;
  overflow-x: hidden;
  overflow-y: hidden;
}

.stat-terminal-line {
  display: block;
  padding: 0.1875rem 0;
  animation: statTerminalFadeIn 0.4s ease-out both;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #cbd5e1;
}

.stat-terminal-line--muted {
  color: #64748b;
}

.stat-terminal-line--smart {
  color: #10b981;
  font-weight: 700;
}

.stat-terminal-line--reverse {
  color: #3b82f6;
}

.stat-terminal-line--tiles {
  color: #6b7280;
}

.stat-overrides-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  border: 1px solid rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.08);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6ee7b7;
}

.stat-overrides-badge .stat-status-dot {
  width: 0.5rem;
  height: 0.5rem;
}

.stat-donuts-grid {
  width: 100%;
}

.stat-donut-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0.75rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.stat-donut {
  --pct: 0;
  --color: #38bdf8;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(
    var(--color) calc(var(--pct) * 1%),
    rgba(255, 255, 255, 0.08) 0
  );
  position: relative;
}

.stat-donut::before {
  content: '';
  position: absolute;
  inset: 0.7rem;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.95);
}

.stat-donut-value {
  position: relative;
  z-index: 1;
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #e2e8f0;
}

.stat-donut-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
}

.stat-donut-count {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: #64748b;
}

@keyframes statTerminalFadeIn {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 1024px) {
  .stat-services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .stat-services-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .stat-terminal {
    font-size: 0.6875rem;
    padding: 0.875rem 1rem;
  }

  .stat-metric-card .stat-metric-value.text-3xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .stat-service-card {
    padding: 0.875rem 1rem;
    font-size: 0.8125rem;
    min-height: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stat-status-dot--ok,
  .stat-status-dot--down { animation: none; }
  .stat-terminal-line { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Переключатель языка (RU | KZ | EN)
   ═══════════════════════════════════════════════════════════════════════ */

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0.1875rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.625rem;
  background: var(--btn-ghost-bg);
}

.lang-switch__btn {
  min-width: 2.25rem;
  padding: 0.25rem 0.4375rem;
  border-radius: 0.4375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: transparent;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.lang-switch__btn:hover {
  color: var(--btn-ghost-hover-text);
  background: var(--btn-ghost-hover-bg);
}

.lang-switch__btn--active {
  color: #ffffff;
  background: var(--brand-600);
}

html[data-theme='light'] .lang-switch__btn--active {
  color: #ffffff;
  background: var(--brand-500);
}

/* ═══════════════════════════════════════════════════════════════════════
   Вкладки кабинета
   ═══════════════════════════════════════════════════════════════════════ */

.dash-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border-subtle);
}

.dash-tab {
  position: relative;
  padding: 0.625rem 0.25rem;
  margin-right: 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  transition: color 0.15s ease;
}

.dash-tab:hover {
  color: var(--text-primary);
}

.dash-tab--active {
  color: var(--brand-400);
}

/* Подчёркивание активной вкладки перекрывает границу контейнера. */
.dash-tab--active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--brand-500);
}

/* ═══════════════════════════════════════════════════════════════════════
   Селектор расчётного периода
   ═══════════════════════════════════════════════════════════════════════ */

.period-select {
  padding: 0.3125rem 0.625rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  background: var(--input-bg);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.period-select:hover,
.period-select:focus {
  border-color: var(--brand-500);
  outline: none;
}

.period-spinner {
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid var(--border-strong);
  border-top-color: var(--brand-500);
  border-radius: 50%;
  animation: periodSpin 0.7s linear infinite;
}

@keyframes periodSpin {
  to { transform: rotate(360deg); }
}

/* Перерисовка таблицы при смене месяца — без «прыжка» содержимого. */
.period-fade {
  opacity: 0.35;
  transition: opacity 0.18s ease;
}

/* ═══════════════════════════════════════════════════════════════════════
   Интерактивная документация API
   ═══════════════════════════════════════════════════════════════════════ */

.doc-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--glass-border);
  border-radius: 1rem;
  background: var(--glass-bg);
}

.doc-nav__title {
  width: 100%;
  margin-bottom: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.doc-nav__link {
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--border-subtle);
  border-radius: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.doc-nav__link:hover {
  color: var(--brand-400);
  border-color: var(--brand-500);
}

.doc-param {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  padding: 0.625rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  background: var(--code-bg);
}

.doc-note {
  margin-top: 1.25rem;
  padding: 1rem;
  border: 1px solid var(--border-color);
  border-left: 4px solid rgba(99, 102, 241, 0.4);
  border-radius: 0.75rem;
  background: var(--code-bg);
}

.doc-note--accent {
  border-left-color: rgba(14, 165, 233, 0.6);
}

.doc-note__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.doc-note__body {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.doc-sample {
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  background: var(--code-sample-bg);
}

.doc-sample__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
}

.doc-sample code {
  display: block;
  margin-top: 0.25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.6875rem;
  line-height: 1.5;
  word-break: break-word;
  color: var(--text-secondary);
}

/* Блок кода: кнопка «Копировать» позиционируется относительно обёртки. */
.doc-code-wrap {
  position: relative;
}

.doc-code {
  overflow-x: auto;
  padding: 1rem;
  border: 1px solid var(--code-border);
  border-radius: 0.75rem;
  background: var(--code-surface);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--code-text);
}

.doc-code code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre;
}

.doc-copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 1;
  padding: 0.1875rem 0.5rem;
  border: 1px solid var(--code-border);
  border-radius: 0.375rem;
  font-size: 0.6875rem;
  color: var(--text-secondary);
  background: var(--code-btn-bg);
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.doc-code-wrap:hover .doc-copy-btn,
.doc-copy-btn:focus {
  opacity: 1;
}

.doc-copy-btn:hover {
  color: var(--text-primary);
}

.doc-copy-btn--done {
  opacity: 1;
  color: var(--tok-str);
  border-color: rgba(52, 211, 153, 0.5);
}

/* Токены подсветки берут цвет из темы: на молочном фоне светлой темы
   яркие цвета тёмной темы не проходят по контрасту. */
.tok-key { color: var(--tok-key); }
.tok-str { color: var(--tok-str); }
.tok-num { color: var(--tok-num); }
.tok-cmd { color: var(--tok-dim); }
.tok-flag { color: var(--tok-dim); }

@media (prefers-reduced-motion: reduce) {
  .period-spinner { animation: none; }
  .period-fade { transition: none; }
}

/* ── Семантические утилиты разметки ───────────────────────────────────
   Пришли на смену утилитам Tailwind вида bg-slate-950 / border-slate-800:
   те задают конкретный оттенок и о теме не знают, поэтому в светлой теме
   оставались тёмными пятнами. Здесь задаётся РОЛЬ, а оттенок приходит из
   палитры активной темы.
   ─────────────────────────────────────────────────────────────────────── */

/** Рамка любого контейнера. */
.ui-border { border-color: var(--border-color); }

/** Разделители между строками таблиц и списков. */
.ui-divide > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-color); }

/** Дорожка прогресс-бара — фон под заполненной частью. */
.ui-track { background-color: var(--track-bg); }

/** Утопленная подпанель внутри карточки. */
.ui-surface { background-color: var(--code-bg); }

/** Поверхность блока кода и моноширинных значений. */
.ui-code-surface { background-color: var(--code-surface); }

/** Залипающая шапка таблицы. */
.ui-thead { background-color: var(--bg-secondary); }

/** Поле ввода вне класса .input-field. */
.ui-input {
  background-color: var(--input-bg);
  color: var(--input-text);
  border-color: var(--border-strong);
}

/** Строка таблицы с подсветкой при наведении. */
.ui-row { transition: background-color 0.15s ease; }
.ui-row:hover { background-color: var(--btn-ghost-hover-bg); }

/** Нейтральный бейдж статуса. */
.ui-badge-neutral {
  background-color: var(--badge-neutral-bg);
  color: var(--text-secondary);
}

/** Ободок маркера таймлайна — сливается с фоном страницы. */
.ui-ring-page { --tw-ring-color: var(--ring-page); }

/** Приглушённая кнопка (отмена, вторичное действие). */
.ui-btn-subtle {
  border-color: var(--border-strong);
  color: var(--text-secondary);
}
.ui-btn-subtle:hover {
  background-color: var(--btn-ghost-hover-bg);
  color: var(--text-primary);
}

/* ── Семантические классы документации ────────────────────────────────
   Пришли на смену утилитам вида text-white / bg-gray-950: те не знали о
   теме и оставались тёмными на светлом фоне.
   ─────────────────────────────────────────────────────────────────────── */

.doc-hero__title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-primary);
}

.doc-hero__sub {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.doc-hero__url {
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  font-size: 0.75rem;
  color: var(--brand-400);
  background: var(--code-bg);
}

.doc-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.doc-card__title--lg {
  font-size: 1.125rem;
}

.doc-card__desc {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.doc-card__note {
  margin-top: 1rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.doc-endpoint {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875rem;
  color: var(--text-primary);
}

.doc-param__desc {
  color: var(--text-secondary);
}

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

.doc-bp-list {
  margin-top: 0.75rem;
  padding-left: 1.25rem;
  list-style: disc;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.doc-bp-list > li + li {
  margin-top: 0.625rem;
}

.doc-bp-list::marker,
.doc-bp-list > li::marker {
  color: var(--text-muted);
}

.doc-bp-list__term {
  color: var(--text-primary);
}

.doc-contact__label {
  width: 8rem;
  flex-shrink: 0;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

/* ── Таблица кодов ответа ─────────────────────────────────────────────── */

.doc-table-wrap {
  margin-top: 1.25rem;
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
}

.doc-table {
  width: 100%;
  min-width: 30rem;
  text-align: left;
  font-size: 0.875rem;
  border-collapse: collapse;
}

.doc-table__head {
  border-bottom: 1px solid var(--border-color);
  background: var(--code-bg);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.doc-table__th {
  padding: 0.75rem 1.25rem;
  font-weight: 500;
}

.doc-table__row {
  border-top: 1px solid var(--table-divider);
  transition: background-color 0.15s ease;
}

.doc-table__row:hover {
  background: var(--btn-ghost-hover-bg);
}

.doc-table__cell {
  padding: 0.75rem 1.25rem;
  color: var(--text-secondary);
}

.doc-table__cell--strong {
  font-weight: 500;
  color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════════════
   Сквозной подвал портала
   Состав минимальный: блок поддержки и копирайт — см. js/footer.js.
   ═══════════════════════════════════════════════════════════════════════ */

/* Непроницаемый токен темы: полупрозрачный glass даёт молочную полосу. */
.global-footer {
  position: relative;
  z-index: 10;
  display: block;
  margin-top: 4rem;
  border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

html[data-theme='light'] .global-footer {
  background: var(--bg-secondary);
  border-top-color: #e2e8f0;
  color: var(--text-secondary);
}

.footer-shell {
  max-width: 80rem;
  margin: 0 auto;
  padding: 2rem 1rem 1.5rem;
}

@media (min-width: 640px) {
  .footer-shell { padding-left: 1.5rem; padding-right: 1.5rem; }
}

@media (min-width: 1024px) {
  .footer-shell { padding-left: 2rem; padding-right: 2rem; }
}

/* ── Блок технической поддержки ───────────────────────────────────────── */

.footer-support {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.375rem 0.75rem;
  min-width: 0;
}

.footer-support__title {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  /* --text-secondary, а не --text-muted: на мелком кегле приглушённый
     токен не добирает 4.5:1 в светлой теме. */
  color: var(--text-secondary);
}

.footer-support__value {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}

.footer-mail {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--brand-400);
  text-decoration: none;
  word-break: break-word;
  transition: color 0.15s ease;
}

.footer-mail:hover,
.footer-mail:focus-visible {
  color: var(--text-primary);
  text-decoration: underline;
}

/* ── Кнопка копирования с тултипом ────────────────────────────────────── */

.footer-copy {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 28×28 — минимальная комфортная цель на тач-экране в плотной строке. */
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.footer-copy:hover,
.footer-copy:focus-visible {
  color: var(--text-primary);
  background: var(--btn-ghost-hover-bg);
  border-color: var(--border-strong);
}

.footer-copy__icon {
  width: 0.875rem;
  height: 0.875rem;
}

.footer-copy--done {
  color: #047857;
  border-color: rgba(4, 120, 87, 0.45);
}

.footer-copy__tip {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%) translateY(0.25rem);
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
  /* Тултип одинаков в обеих темах: белым по тёмно-зелёному — контраст 7:1. */
  color: #ecfdf5;
  background: #047857;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.footer-copy--done .footer-copy__tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Копирайт ─────────────────────────────────────────────────────────── */

.footer-legal {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-color);
  font-size: 0.75rem;
  text-align: center;
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .footer-copy__tip { transition: opacity 0.01s; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Светлая тема — принудительный слой (Force Override)
   ═══════════════════════════════════════════════════════════════════════

   Tailwind CDN инжектит утилиты ПОСЛЕ app.css. Плюс в ранней версии этой
   таблицы для <pre> стоял тёмный #0f172a !important — он побеждал любые
   «мягкие» светлые правила. Здесь каждое свойство фона/текста/рамки
   закрыто !important, чтобы ни хайлайтер, ни утилита, ни инлайн не
   оставили чёрное пятно.

   Правило: внутри светлой темы ни один контейнер, блок кода или карточка
   не темнее #e2e8f0. Исключение — акцентные кнопки и цветные бейджи.
   ─────────────────────────────────────────────────────────────────────── */

html[data-theme='light'] #dashboard pre,
html[data-theme='light'] #dashboard code,
html[data-theme='light'] #dashboard .doc-code,
html[data-theme='light'] #dashboard .doc-block,
html[data-theme='light'] #dashboard .doc-card,
html[data-theme='light'] #dashboard .endpoint-box,
html[data-theme='light'] #dashboard ~ [id$='Modal'] pre,
html[data-theme='light'] #dashboard ~ [id$='Modal'] code {
  background-color: var(--code-bg, #f8fafc) !important;
  color: var(--text-primary, #0f172a) !important;
  border-color: #e2e8f0 !important;
}

html[data-theme='light'] #dashboard .doc-note,
html[data-theme='light'] #dashboard .doc-param,
html[data-theme='light'] #dashboard .doc-nav,
html[data-theme='light'] #dashboard .doc-sample,
html[data-theme='light'] #dashboard .doc-table-wrap,
html[data-theme='light'] #dashboard .doc-hero__url,
html[data-theme='light'] #dashboard .ui-surface,
html[data-theme='light'] #dashboard .ui-code-surface,
html[data-theme='light'] #dashboard .glass-panel {
  background-color: var(--code-bg, #f8fafc) !important;
  color: var(--text-primary, #0f172a) !important;
  border-color: #e2e8f0 !important;
}

/* Карточки документации — белая поверхность, не молочная заливка кода. */
html[data-theme='light'] #dashboard .glass-panel {
  background-color: var(--card-bg, #ffffff) !important;
}

/* Подвал кабинета не должен попадать под заливку блоков кода / glass-panel. */
html[data-theme='light'] #dashboard > .global-footer {
  background-color: var(--bg-secondary, #ffffff) !important;
  color: var(--text-secondary, #64748b) !important;
  border-top-color: #e2e8f0 !important;
}

/* Токены подсветки не наследуют !important с <pre>/<code>. */
html[data-theme='light'] #dashboard .tok-key { color: var(--tok-key) !important; }
html[data-theme='light'] #dashboard .tok-str { color: var(--tok-str) !important; }
html[data-theme='light'] #dashboard .tok-num { color: var(--tok-num) !important; }
html[data-theme='light'] #dashboard .tok-cmd,
html[data-theme='light'] #dashboard .tok-flag { color: var(--tok-dim) !important; }

/*
  highlight.js / Prism сюда не подключены: подсветка своя (классы .tok-*).
  Правила ниже — страховка, если CDN-хайлайтер когда-нибудь вернётся.
*/
html[data-theme='light'] .hljs,
html[data-theme='light'] .hljs-subst,
html[data-theme='light'] pre[class*='language-'],
html[data-theme='light'] code[class*='language-'] {
  background: var(--code-bg, #f8fafc) !important;
  color: var(--text-primary, #0f172a) !important;
}

/* Последний рубеж: утилиты Tailwind, если они вернутся в разметку. */
html[data-theme='light'] #dashboard [class*='bg-slate-9'],
html[data-theme='light'] #dashboard [class*='bg-gray-9'],
html[data-theme='light'] #dashboard [class*='bg-black'],
html[data-theme='light'] #dashboard [class*='bg-surface-9'],
html[data-theme='light'] #dashboard ~ [id$='Modal'] [class*='bg-slate-9'],
html[data-theme='light'] #dashboard ~ [id$='Modal'] [class*='bg-gray-9'],
html[data-theme='light'] #dashboard ~ [id$='Modal'] [class*='bg-black'],
html[data-theme='light'] #dashboard ~ [id$='Modal'] [class*='bg-surface-9'] {
  background-color: var(--card-bg, #ffffff) !important;
}

html[data-theme='light'] #dashboard [class*='border-slate-8'],
html[data-theme='light'] #dashboard [class*='border-gray-8'],
html[data-theme='light'] #dashboard [class*='border-slate-7'],
html[data-theme='light'] #dashboard [class*='border-gray-7'],
html[data-theme='light'] #dashboard ~ [id$='Modal'] [class*='border-slate-8'],
html[data-theme='light'] #dashboard ~ [id$='Modal'] [class*='border-slate-7'] {
  border-color: #e2e8f0 !important;
}