/*
 * Qonzer — the product skin, taken from qonzer.com and QPanel.
 *
 * Near-black with a blue cast rather than a neutral grey; cards a shade lighter,
 * flat, hairline-bordered, no glow. The mark's blue carries every action as a
 * solid pill, the artwork's gold is the second accent, Roboto sets the type.
 *
 * The chrome the site actually has: a darker topbar than the page, a hairline
 * under it, blue pill buttons with a lifted hover, blue focus rings, and the
 * QPanel loader's faint circuit glow behind the login card.
 */

[data-brand="qonzer"] {
  --bg: #0b0f16;
  --surface: #161b24;
  --surface-2: #1e242f;
  --field: #11161e;
  --primary: #1b84e7;
  --primary-ink: #ffffff;
  --secondary: #7b8798;
  --accent: #f0b429;
  --fg: #e7ecf3;
  --muted: #98a3b3;
  --line: rgba(231, 236, 243, 0.1);
  --valkyra: #e8646a;
  --lonestar: #1b84e7;
  --manticore: #3fbf7f;
  --teamkill: #f0b429;
  --watch: #e08b2c;
  --flag: #b794f6;

  --good: #3fbf7f;
  --bad: #ef5350;
  --warn: #f0b429;
  --info: #2fa8e0;
  --idle: #6b7889;
  --bad-soft: rgba(239, 83, 80, 0.16);
  --badge-live: #3fbf7f;
  --badge-next: #f0b429;

  --scrim: rgba(3, 6, 11, 0.66);
  --spotlight: rgba(3, 6, 11, 0.76);
  --shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  --shadow-lift: 0 -8px 24px rgba(0, 0, 0, 0.4);
  --radius: 6px;
  --font: Roboto, "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
}

/* QPanel's backdrop: cold teal arcs over near-black, kept faint enough to sit
   under a working console. */
[data-brand="qonzer"].plus-grid::before,
[data-brand="qonzer"] .plus-grid::before {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 60% 42% at 50% 46%, rgba(27, 132, 231, 0.1), transparent 70%),
    radial-gradient(ellipse 34% 26% at 12% 24%, rgba(0, 187, 255, 0.07), transparent 72%),
    radial-gradient(ellipse 30% 24% at 88% 74%, rgba(0, 187, 255, 0.06), transparent 72%);
}

/* The site's header sits below the page, not above it: darker, hairline-ruled,
   no shadow. */
[data-brand="qonzer"] .topbar {
  background: #080b11;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}

[data-brand="qonzer"] .nav {
  background: #0d121a;
  border-right: 1px solid var(--line);
}

[data-brand="qonzer"] .card,
[data-brand="qonzer"] .connect-card,
[data-brand="qonzer"] .modal,
[data-brand="qonzer"] .menu {
  background: var(--surface);
  border: 1px solid var(--line);
}

/* "My Account" on the site: a solid blue pill that lifts on hover. */
[data-brand="qonzer"] .btn-primary,
[data-brand="qonzer"] .btn-gold {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-ink);
  border-radius: 4px;
  letter-spacing: 0.02em;
  text-transform: none;
  transition: background 120ms ease, transform 120ms ease;
}

[data-brand="qonzer"] .btn-primary:hover,
[data-brand="qonzer"] .btn-gold:hover {
  background: #2b93f2;
  border-color: #2b93f2;
  color: var(--primary-ink);
  transform: translateY(-1px);
}

[data-brand="qonzer"] .ctrl:focus,
[data-brand="qonzer"] .field input:not([type="checkbox"]):focus,
[data-brand="qonzer"] .field select:focus,
[data-brand="qonzer"] .field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(27, 132, 231, 0.22);
}

[data-brand="qonzer"] .nav a.active,
[data-brand="qonzer"] .server-tab.active {
  background: rgba(27, 132, 231, 0.14);
  color: #6bb8f5;
}

/* Small blue caps above a heading, the way the site labels its sections. */
[data-brand="qonzer"] .brand-sub {
  color: var(--primary);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}