:root {
  --bg: #05070D;
  --bg2: #0B0F1A;
  --panel: #0E1424;
  --line: #1E2A42;
  --neon: #00F0FF;
  --neon-soft: #7DF9FF;
  --neon-deep: #00B8CC;
  --magenta: #FF2E9A;
  --text: #E6F1FF;
  --muted: #A9BBD9;

  --neon-rgb: 0, 240, 255;
  --neon-soft-rgb: 125, 249, 255;
  --neon-deep-rgb: 0, 184, 204;
  --magenta-rgb: 255, 46, 154;
  --text-rgb: 230, 241, 255;
  --muted-rgb: 169, 187, 217;
  --bg-rgb: 5, 7, 13;
  --bg2-rgb: 11, 15, 26;

  --font-base: 'Segoe UI', system-ui, sans-serif;
}

/* ---------- Светлая тема — переключатель в шапке, .icon-btn.sun/.moon ---------- */
:root[data-theme="light"] {
  --bg: #F5F8FC;
  --bg2: #FFFFFF;
  --panel: #FFFFFF;
  --line: #D7E0EE;
  --neon: #00798F;
  --neon-soft: #1FA6BC;
  --neon-deep: #005C6E;
  --magenta: #C21B72;
  --text: #0B0F1A;
  --muted: #4B5670;

  --neon-rgb: 0, 121, 143;
  --neon-soft-rgb: 31, 166, 188;
  --neon-deep-rgb: 0, 92, 110;
  --magenta-rgb: 194, 27, 114;
  --text-rgb: 11, 15, 26;
  --muted-rgb: 75, 86, 112;
  --bg-rgb: 245, 248, 252;
  --bg2-rgb: 255, 255, 255;
}
:root[data-theme="light"] body {
  background: radial-gradient(1200px 600px at 70% -10%, rgba(var(--neon-rgb), .05), transparent 60%),
              radial-gradient(900px 500px at 10% 110%, rgba(var(--magenta-rgb), .04), transparent 60%),
              var(--bg);
}
:root[data-theme="light"] .glass-card { box-shadow: 0 4px 20px rgba(11, 15, 26, .06); }

/* Кнопка-переключатель темы: два вложенных иконка-состояния, видимость по data-theme */
.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 96px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.hidden { display: none !important; }

/* ---------- Небольшие переиспользуемые примитивы (вместо inline style=) ---------- */
.stack { display: flex; flex-direction: column; }
.stack.gap-sm { gap: 8px; }
.stack.gap-md { gap: 14px; }
.stack.gap-lg { gap: 16px; }
.stack.gap-xl { gap: 32px; }
.state-msg { text-align: center; padding: 48px 0; color: var(--muted); }
.state-msg.compact { padding: 16px 0; }
.plain-btn { background: none; border: none; cursor: pointer; font: inherit; text-align: left; width: 100%; color: inherit; }
.link-btn { background: none; border: none; cursor: pointer; font: inherit; color: var(--neon); transition: opacity .2s; }
.link-btn:hover { opacity: .75; }
.span-all { grid-column: 1 / -1; }

/* Иконки lucide — размеры */
[data-lucide], svg.lucide { flex-shrink: 0; }
.w-3.h-3 { width: .75rem; height: .75rem; }
.w-4.h-4 { width: 1rem; height: 1rem; }
.w-5.h-5 { width: 1.25rem; height: 1.25rem; }
.w-6.h-6 { width: 1.5rem; height: 1.5rem; }
.w-8.h-8 { width: 2rem; height: 2rem; }
.w-10.h-10 { width: 2.5rem; height: 2.5rem; }

/* Отступы-примитивы, используются точечно поверх семантических классов */
.mt-8 { margin-top: 2rem; }
.mb-8 { margin-bottom: 2rem; }
.mt-12 { margin-top: 3rem; }
.pt-12 { padding-top: 3rem; border-top: 1px solid var(--line); }

body {
  background: radial-gradient(1200px 600px at 70% -10%, rgba(var(--neon-rgb), .08), transparent 60%),
              radial-gradient(900px 500px at 10% 110%, rgba(var(--magenta-rgb), .07), transparent 60%),
              var(--bg);
  color: var(--text);
  font-family: var(--font-base);
  min-height: 100vh;
}

/* ---------- Стеклянная карточка (glassmorphism) — общий примитив ---------- */
.glass-card {
  position: relative;
  isolation: isolate;
  background: rgba(var(--bg2-rgb), .55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(var(--neon-rgb), .15);
  border-radius: 20px;
  padding: 2rem;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.4,0,.2,1), border-color .4s, box-shadow .4s, background .4s;
}
.glass-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--neon), var(--magenta)); opacity: .7;
}
.glass-card::after {
  content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle at 30% 30%, rgba(var(--text-rgb), .04) 0%, transparent 60%);
  opacity: 0; transition: opacity .6s; pointer-events: none;
}
.glass-card .shine {
  position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(var(--text-rgb), .05), transparent);
  transition: left .7s; pointer-events: none;
}
.glass-card:hover {
  transform: translateY(-8px);
  border-color: rgba(var(--neon-rgb), .4);
  box-shadow: 0 20px 50px rgba(var(--neon-rgb), .1);
  background: rgba(var(--bg2-rgb), .7);
}
.glass-card:hover::after { opacity: 1; }
.glass-card:hover .shine { left: 150%; }

/* ---------- Таблица в неон-стиле — общий примитив ---------- */
.table-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid var(--line); }
.neon-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.neon-table thead th {
  background: rgba(var(--neon-rgb), .08); padding: 1rem 1.25rem; text-align: left;
  font-weight: 700; color: var(--neon); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.neon-table tbody tr { border-bottom: 1px solid var(--line); }
.neon-table tbody tr:last-child { border-bottom: none; }
.neon-table tbody tr:hover { background: rgba(var(--neon-rgb), .03); }
.neon-table tbody td { padding: 1rem 1.25rem; color: var(--muted); }
.neon-table tbody td:first-child { color: var(--text); font-weight: 600; }
.neon-table .highlight-col { background: rgba(var(--neon-rgb), .05) !important; color: var(--neon) !important; font-weight: 700 !important; }