/* Midorado.gg Sniper — design tokens ("midnight radar")
   Deep ink-navy surfaces, violet → cyan signal accents. Solid layered surfaces (no
   blur stacks) so WebView2 stays smooth on modest GPUs. */

/* ===== Fonts (bundled, offline) ===== */
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter.ttf") format("truetype");
  font-weight: 100 900; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/SpaceGrotesk.ttf") format("truetype");
  font-weight: 300 700; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/JetBrainsMono.ttf") format("truetype");
  font-weight: 100 800; font-display: swap; font-style: normal;
}

/* ===== Shared tokens ===== */
:root {
  /* brand signal */
  --accent: #7c5cff;
  --accent-hi: #9d85ff;
  --accent-2: #22d3ee;
  --on-accent: #ffffff;
  --grad: linear-gradient(135deg, #7c5cff 0%, #6d5dfc 45%, #3fb6f2 100%);
  --grad-btn: linear-gradient(135deg, #8466ff 0%, #6f55f5 100%);

  /* type */
  --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --display: "Space Grotesk", "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-base: 13.5px;
  --fs-lg: 15px;
  --fs-xl: 18px;
  --fs-2xl: 22px;
  --fs-3xl: 26px;

  /* shape */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius: 14px;
  --radius-lg: 18px;
  --r-pill: 999px;

  /* spacing (4/8 rhythm) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 140ms;
  --t-med: 220ms;
  --trans: var(--t-fast) var(--ease);

  /* layout */
  --tb-h: 44px;
  --side-w: 232px;
}

/* ===== Midnight (default) ===== */
html[data-theme="midnight"] {
  color-scheme: dark;
  --bg: #080b16;
  --bg-deep: #060812;
  --panel: #0e1222;
  --panel-solid: #0f1324;
  --raised: #141a2e;
  --raised-2: #1a2139;
  --raised-3: #232b46;
  --line: rgba(150, 160, 255, 0.075);
  --line-2: rgba(150, 160, 255, 0.13);
  --line-3: rgba(170, 180, 255, 0.22);
  --inner: inset 0 1px 0 rgba(255, 255, 255, 0.035);

  --text: #e8ebf8;
  --text-dim: #99a2c3;
  --text-faint: #636c8e;

  --ok: #34d399;
  --warn: #fbbf24;
  --err: #fb7185;
  --ok-soft: rgba(52, 211, 153, 0.12);
  --warn-soft: rgba(251, 191, 36, 0.12);
  --err-soft: rgba(251, 113, 133, 0.12);
  --info-soft: rgba(34, 211, 238, 0.12);
  --accent-soft: rgba(124, 92, 255, 0.14);
  --accent-line: rgba(124, 92, 255, 0.38);

  --input-bg: #0a0e1c;
  --hover: rgba(160, 170, 255, 0.055);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 28px 70px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(150, 160, 255, 0.08);
  --glow: 0 0 0 1px rgba(124, 92, 255, 0.35), 0 10px 32px -14px rgba(124, 92, 255, 0.55);

  --radar-ring: rgba(157, 133, 255, 0.34);
  --radar-ring-2: rgba(157, 133, 255, 0.16);
  --overlay: rgba(3, 5, 12, 0.72);

  /* legacy aliases kept for inline styles in JS */
  --panel-2: var(--raised);
  --border: var(--line);
  --border-strong: var(--line-2);
  --bg-grad-1: #0d1430;
  --bg-grad-2: #060912;
}

/* ===== Light ===== */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f3f9;
  --bg-deep: #e9ebf5;
  --panel: #ffffff;
  --panel-solid: #ffffff;
  --raised: #f5f6fb;
  --raised-2: #eceef7;
  --raised-3: #e1e4f1;
  --line: rgba(28, 32, 80, 0.085);
  --line-2: rgba(28, 32, 80, 0.14);
  --line-3: rgba(28, 32, 80, 0.24);
  --inner: inset 0 1px 0 rgba(255, 255, 255, 0.8);

  --text: #141733;
  --text-dim: #4b5275;
  --text-faint: #858baa;

  --accent: #6a4cf5;
  --accent-hi: #5a3ee6;
  --accent-2: #0a93b6;
  --grad: linear-gradient(135deg, #6a4cf5 0%, #5c55f0 45%, #1aa6d6 100%);
  --grad-btn: linear-gradient(135deg, #7355f7 0%, #5f44ea 100%);

  --ok: #047857;
  --warn: #b45309;
  --err: #d61f4f;
  --ok-soft: rgba(5, 150, 105, 0.1);
  --warn-soft: rgba(217, 119, 6, 0.11);
  --err-soft: rgba(225, 29, 72, 0.09);
  --info-soft: rgba(8, 145, 178, 0.1);
  --accent-soft: rgba(106, 76, 245, 0.09);
  --accent-line: rgba(106, 76, 245, 0.32);

  --input-bg: #f7f8fc;
  --hover: rgba(28, 32, 80, 0.045);

  --shadow-sm: 0 1px 2px rgba(28, 32, 80, 0.08);
  --shadow: 0 10px 28px -16px rgba(28, 32, 80, 0.28);
  --shadow-lg: 0 28px 64px -22px rgba(28, 32, 80, 0.35), 0 0 0 1px rgba(28, 32, 80, 0.06);
  --glow: 0 0 0 1px rgba(106, 76, 245, 0.35), 0 10px 28px -14px rgba(106, 76, 245, 0.45);

  --radar-ring: rgba(106, 76, 245, 0.34);
  --radar-ring-2: rgba(106, 76, 245, 0.15);
  --overlay: rgba(20, 23, 51, 0.38);

  --panel-2: var(--raised);
  --border: var(--line);
  --border-strong: var(--line-2);
  --bg-grad-1: #ffffff;
  --bg-grad-2: #e6ebf6;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 1ms; --t-med: 1ms; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
  user-select: none;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; font-size: inherit; }
button:disabled { cursor: not-allowed; }
input, select, textarea { font-family: inherit; }
input, textarea { user-select: text; }
a { color: var(--accent); }
img { max-width: 100%; }
[hidden] { display: none !important; }
.theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
::selection { background: rgba(124, 92, 255, 0.35); }

.ico-svg { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ico-svg svg { display: block; }
[dir="rtl"] .ico-svg.flip svg { transform: scaleX(-1); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 20px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--line-3); background-clip: padding-box; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes ping { 0% { transform: scale(1); opacity: 0.6; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }