/* ReverseVpn — dark-only, performance-optimized */
:root {
  color-scheme: dark only;
  --rv-bg-0: #0b1020;
  --rv-bg-1: #111827;
  --rv-surface: rgba(18, 22, 32, 0.92);
  --rv-surface-2: rgba(24, 30, 44, 0.96);
  --rv-border: rgba(255, 255, 255, 0.1);
  --rv-accent: #6366f1;
  --rv-accent-soft: rgba(99, 102, 241, 0.22);
}

html {
  color-scheme: dark only !important;
}

html.dark,
html:not(.light),
html.light {
  color-scheme: dark only !important;
}

html,
body,
#root {
  min-height: 100%;
  background-color: var(--rv-bg-0) !important;
}

body {
  background:
    radial-gradient(900px 480px at 12% -8%, rgba(99, 102, 241, 0.22), transparent 58%),
    radial-gradient(700px 420px at 88% 0%, rgba(56, 189, 248, 0.12), transparent 55%),
    linear-gradient(165deg, var(--rv-bg-0) 0%, var(--rv-bg-1) 100%) !important;
  background-attachment: scroll !important;
}

/* kill animated backgrounds (canvas/svg layers) */
[class*="background-"],
[class*="Background"],
[data-testid*="background"],
canvas[class*="bg"],
canvas[class*="Bg"],
.bg-animation,
.background-animation {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* force dark palette even if app toggles light */
html.light body,
html.light #root,
.light [class*="card"],
.light [class*="Card"],
.light [class*="panel"],
.light [class*="Panel"],
.light [class*="sidebar"],
.light [class*="Sidebar"],
.light [class*="header"],
.light [class*="Header"],
.light main,
.light nav {
  background-color: var(--rv-surface) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

/* surfaces — no backdrop-filter (GPU heavy) */
[class*="card"],
[class*="Card"],
[class*="panel"],
[class*="Panel"],
article,
div[role="dialog"] {
  background: var(--rv-surface) !important;
  border: 1px solid var(--rv-border) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28) !important;
  border-radius: 14px !important;
}

[class*="sidebar"],
[class*="Sidebar"],
[class*="header"],
[class*="Header"],
nav {
  background: var(--rv-surface-2) !important;
  border-color: var(--rv-border) !important;
}

input,
textarea,
select,
[class*="input"],
[class*="Input"],
[class*="select"],
[class*="Select"] {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(99, 102, 241, 0.65) !important;
  box-shadow: 0 0 0 2px var(--rv-accent-soft) !important;
}

button,
[role="button"],
[class*="button"],
[class*="Button"] {
  transition: background-color 0.12s ease, border-color 0.12s ease !important;
}

button:hover,
[role="button"]:hover {
  transform: none !important;
}

/* hide theme switcher */
[aria-label*="theme" i],
[aria-label*="тем" i],
[data-testid*="theme" i],
button[class*="ThemeToggle"],
[class*="ThemeToggle"],
[class*="theme-toggle"] {
  display: none !important;
}

/* reduce motion globally */
@media (prefers-reduced-motion: no-preference) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.12s !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
}
::-webkit-scrollbar-track { background: transparent; }