/* ============================================================
   A1 landing — dark theme (v2)
   Shares the SPA cookie "vite-ui-theme" (light|dark|system)
   so the homepage and the control panel stay in sync.
   v2: fix header (scrolled pill / btn-tg / lang hover / sep),
       native new-api style theme switch (ghost icon + dropdown)
   ============================================================ */
html.dark { color-scheme: dark; }

html.dark {
  --bg: #0b0f17;
  --soft: #121a28;
  --ink: #e8eef6;
  --text: #aab4c5;
  --muted: #8290a6;
  --line: #25324a;
  --brand: #4aa3e8;
  --brand-hover: #5fb0ef;
  --brand-soft: #11233a;
  --spa-fg: #f2f5f9;
  --spa-muted: #9aa6b8;
  --spa-border: #2a3850;
  --spa-primary: #4aa3e8;
  --spa-primary-hover: #5fb0ef;
  --k-punc: #6b7787;
  --k-key: #7fb0e6;
  --k-str: #e0956a;
  --k-num: #57b58c;
  --k-com: #6b7787;
}

/* surfaces that were hard-coded #fff / translucent white */
html.dark body { background: var(--bg); color: var(--text); }

/* --- header --- */
html.dark .hdr-nav { background: transparent; }
/* the scrolled floating pill hard-codes white -> override for dark */
html.dark .hdr.scrolled .hdr-nav {
  background: rgba(13, 19, 32, .65);
  box-shadow: 0 0 0 .5px rgba(42, 56, 80, .55), 0 2px 16px -6px rgba(0, 0, 0, .5);
}
html.dark .hdr-links a:hover { color: var(--spa-fg); }
html.dark .hdr-sep { background: rgba(232, 232, 232, .16); }
html.dark .lang-btn:hover { background: rgba(255, 255, 255, .08); }
html.dark .lang-menu { background: var(--soft); border-color: var(--line); box-shadow: 0 8px 30px rgba(0, 0, 0, .5); }
html.dark .lang-menu button:hover { background: rgba(255, 255, 255, .08); }
html.dark .btn-tg { background: var(--soft); border-color: var(--line); }
html.dark .btn-tg:hover { background: #1a2433; }
html.dark .mnav { background: #0d1320; }
html.dark .burger span { background: var(--spa-fg); }

html.dark .hero-bg {
  background:
    radial-gradient(62% 58% at 88% -10%, rgba(40, 90, 120, .35) 0%, rgba(40, 90, 120, 0) 62%),
    linear-gradient(180deg, #0e1826 0%, #0c1422 40%, #0b0f17 78%);
}
html.dark .console,
html.dark .card,
html.dark .dash,
html.dark .mtag,
html.dark .dx-cell,
html.dark .dx-sel-list span,
html.dark .dx-sel,
html.dark .btn-outline,
html.dark .btn-onnavy { background: var(--soft); border-color: var(--line); }
html.dark .cta { background: linear-gradient(180deg, #0b0f17 0%, #121a28 100%); }
html.dark .section-soft { background: var(--soft); }
html.dark .dx-sel { border-color: var(--line); }
html.dark .btn-outline:hover { background: #1a2433; border-color: #34465f; }
html.dark .footer { background: #0d1320; }

/* logos: lighten so they stay visible on the dark page */
html.dark .hdr-logo-box img,
html.dark .footer img { filter: invert(1) hue-rotate(180deg); }

/* ============================================================
   Theme switch — mirrors the native new-api <ThemeSwitch/>:
   ghost icon button (sun in light, moon in dark) + dropdown
   menu with Светлая / Тёмная and a check mark.
   ============================================================ */
.theme-switch { position: relative; flex-shrink: 0; margin-left: 4px; }
.theme-btn {
  width: 36px; height: 36px; border: 0; border-radius: var(--spa-md);
  background: transparent; color: var(--spa-fg); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  position: relative; transition: background .2s;
}
.theme-btn:hover { background: rgba(0, 0, 0, .05); }
html.dark .theme-btn:hover { background: rgba(255, 255, 255, .08); }
.theme-btn svg { width: 19px; height: 19px; display: block; }
.ti-sun, .ti-moon {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  transition: opacity .2s, transform .2s;
}
html:not(.dark) .ti-moon { opacity: 0; transform: rotate(90deg) scale(0); }
html.dark .ti-sun { opacity: 0; transform: rotate(-90deg) scale(0); }

.theme-menu {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 132px;
  background: #fff; border: 1px solid #e5e9f0; border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
  padding: 4px; display: none; z-index: 80;
}
.theme-switch.open .theme-menu { display: block; }
html.dark .theme-menu {
  background: var(--soft); border-color: var(--line);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
}
.theme-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: 8px;
  background: transparent; font: inherit; font-size: 13px;
  color: var(--spa-fg); cursor: pointer; white-space: nowrap;
}
.theme-item:hover { background: rgba(0, 0, 0, .05); }
html.dark .theme-item:hover { background: rgba(255, 255, 255, .08); }
.ti-check { margin-left: auto; display: none; }
.ti-check svg { width: 14px; height: 14px; }
.theme-item.active .ti-check { display: inline-flex; }

/* --- v3: opaque floating pill so page text never shows through --- */
.hdr.scrolled .hdr-nav { background: rgba(255, 255, 255, .92); }
html.dark .hdr.scrolled .hdr-nav { background: rgba(13, 19, 32, .92); }