:root {
  color-scheme: dark;
  --bg: #05090b;
  --panel: rgba(13, 20, 23, 0.9);
  --panel-2: rgba(18, 27, 31, 0.82);
  --line: rgba(180, 211, 216, 0.16);
  --line-strong: rgba(49, 221, 234, 0.52);
  --ink: #f1f7f7;
  --muted: #8f9da2;
  --accent: #31ddea;
  --accent-2: #6cebf2;
  --danger: #ff8e84;
  --warning: #f3b867;
  --radius: 12px;
  --shadow: 0 22px 70px rgba(0, 0, 0, 0.38);
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body, #app { min-height: 100%; margin: 0; }
body {
  background:
    radial-gradient(circle at 70% -20%, rgba(49, 221, 234, 0.06), transparent 38%),
    radial-gradient(rgba(74, 113, 119, 0.18) 0.7px, transparent 0.7px),
    var(--bg);
  background-size: auto, 8px 8px, auto;
  color: var(--ink);
  font-family: var(--font);
}
button, input, select, textarea { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }