/* SuccServer design tokens, taken from succserver.xyz (Site v6/index.html). Plain CSS, no build step.
   Starfield + nebula + planet horizon: succserver-stars.js (same folder as this file's copy; same-origin, no network). */
:root {
  /* colour */
  --bg: #020309;                       /* page; html + body */
  --ink: #e2e6fa;                      /* text */
  --muted: #7a82a6;                    /* secondary text */
  --faint: #4a5276;                    /* captions, placeholders, disabled */
  --cyan: #5cdbe9;                     /* PRIMARY accent: links, focus, active, kickers */
  --blue: #4d78ee;
  --violet: #7a4cf0;                   /* secondary accent */
  --pink: #e058bf;
  --amber: #eeb05a;                    /* warnings, "new" */
  --good: #43dc96;                     /* success / online */
  /* surfaces */
  --glass: rgba(6, 8, 22, 0.62);       /* panels/cards over the starfield; add backdrop-filter: blur(14px) saturate(130%) */
  --glass-strong: rgba(4, 6, 16, 0.9); /* modals, menus, dialogs */
  --tile: rgba(255, 255, 255, 0.025);  /* buttons / list rows inside a panel */
  --tile-hover: rgba(255, 255, 255, 0.045);
  --field: rgba(255, 255, 255, 0.04);  /* inputs */
  --line: rgba(125, 140, 230, 0.11);   /* every border */
  --line-hot: rgba(92, 219, 233, 0.5); /* hover / focus border */
  --radius: 18px;                      /* panels, modals; buttons/tiles use 14px, inputs 10px, chips/pills 999px */
  --shadow-panel: 0 20px 60px -20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04);
  --shadow-modal: 0 30px 80px -20px rgba(0,0,0,.8), 0 0 60px -24px rgba(92,219,233,.45);
  /* type */
  --sans: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;   /* weights 400 / 500 / 700 */
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; /* weights 400 / 500 */
}
/* Fonts: <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
   (external; under COEP require-corp it won't load, so the system-ui fallback applies. To self-host, download both from Google Fonts into the theme folder and @font-face them.) */

html { background: var(--bg); color-scheme: dark; }
body { color: var(--ink); font-family: var(--sans); background: var(--bg); -webkit-font-smoothing: antialiased; }

/* Background: the star layer is a fixed div#succ-space (z-index 0, pointer-events none) created by succserver-stars.js.
   The app's own root needs a transparent background and position:relative; z-index:1 so it sits above it. */

/* Panel / card */
.succ-panel {
  background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius);
  backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); box-shadow: var(--shadow-panel);
}

/* Tile button / list row (the homepage's main buttons). --hue = the item's accent, default cyan */
.succ-tile {
  --hue: var(--cyan);
  padding: 18px 18px 16px; border-radius: 14px; background: var(--tile); border: 1px solid var(--line); color: var(--ink); text-decoration: none;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s, background .25s, box-shadow .25s;
}
.succ-tile:hover, .succ-tile:focus-visible {
  transform: translateY(-3px); background: var(--tile-hover); outline: none;
  border-color: color-mix(in srgb, var(--hue) 55%, transparent);
  box-shadow: 0 14px 40px -18px color-mix(in srgb, var(--hue) 70%, transparent);
}

/* Primary button (cyan tint, as the game dialogs' .go-btn.primary) */
.succ-btn { padding: 12px; border-radius: 12px; cursor: pointer; font: 500 14px var(--sans); letter-spacing: .02em;
            color: var(--ink); background: rgba(255,255,255,.04); border: 1px solid var(--line); transition: border-color .2s, background .2s; }
.succ-btn:hover, .succ-btn:focus-visible { border-color: var(--line-hot); outline: none; }
.succ-btn.primary { background: color-mix(in srgb, var(--cyan) 16%, transparent); border-color: color-mix(in srgb, var(--cyan) 45%, transparent); }
.succ-btn:disabled { opacity: .5; }
/* Secondary = .succ-btn without .primary (neutral glass). Pill chips: height 38-40px, border-radius 999px / 14px, same border. */

/* Inputs */
.succ-input { padding: 11px 12px; border-radius: 10px; font: 500 15px var(--sans); color: var(--ink);
              background: var(--field); border: 1px solid var(--line); outline: none; }
.succ-input:focus { border-color: var(--line-hot); }
.succ-input::placeholder { color: var(--faint); }

/* Links: cyan, underline on hover */
.succ-link { color: var(--cyan); text-decoration: none; } .succ-link:hover { text-decoration: underline; }

/* Section label: small mono caps ("SERVICES") */
.succ-label { font: 500 10.5px var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--faint); }

/* Tabs (segmented): track = rgba(255,255,255,.03) + --line border, radius 14px, padding 4px; tab radius 10px, 700 14.5px sans, muted;
   selected = ink text, background color-mix(in srgb, var(--cyan) 12%, transparent), border color-mix(in srgb, var(--cyan) 35%, transparent) */

/* Scrollbars/selection: nothing custom. Status colours: online = --good with 0 0 6px glow, warning = --amber, error = #ff6b6b-ish. */