:root {
  color-scheme: dark;
  --page: #0d0d0d; --surface: #1a1a19; --ink: #ffffff; --ink-2: #c3c2b7;
  --muted: #898781; --grid: #2c2c2a; --border: rgba(255,255,255,0.10);
  --good: #0ca30c; --critical: #d03b3b; --warn: #eda100; --accent: #3987e5;
  /* Same color as --surface, translucent -- only used on body.public (the
     Listen Live pages, which share this stylesheet with the real admin
     pages but aren't the admin page itself), so the background watermark
     shows through there without touching admin.html/admin_login.html. */
  --surface-a: rgba(26,26,25,0.72);
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --page: #f9f9f7; --surface: #fcfcfb; --ink: #0b0b0b; --ink-2: #52514e;
    --muted: #898781; --grid: #e1e0d9; --border: rgba(11,11,11,0.10);
    --good: #006300; --critical: #b83232; --warn: #9a6c00; --accent: #2a78d6;
    --surface-a: rgba(252,252,251,0.72);
  }
}
* { box-sizing: border-box; margin: 0; }
body {
  background: var(--page); color: var(--ink);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  padding: 24px 20px 48px;
}
.wrap { max-width: 720px; margin: 0 auto; }
h1 { font-size: 20px; font-weight: 650; margin-bottom: 4px; }
.sub { color: var(--muted); font-size: 13px; margin-bottom: 20px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
        padding: 16px; margin-bottom: 14px; }
.card h2 { font-size: 14px; font-weight: 600; color: var(--ink-2); margin-bottom: 10px; }
label { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 4px; }
input[type=text], input[type=password] {
  width: 100%; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--grid);
  background: var(--page); color: var(--ink); font-size: 14px; margin-bottom: 14px;
}
button, .btn {
  border: 1px solid var(--grid); background: var(--surface); color: var(--ink);
  padding: 6px 12px; border-radius: 6px; font-size: 13px; cursor: pointer;
}
button:hover, .btn:hover { border-color: var(--accent); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.danger { border-color: var(--critical); color: var(--critical); }
button:disabled { opacity: .5; cursor: not-allowed; }
.error { color: var(--critical); font-size: 13px; margin-bottom: 14px; }
/* Grid, not flex space-between -- a fixed name column means .pills always
   starts at the same x position regardless of how long any given row's
   name is (a flex row let long names like "nxdnxreflector" push the pill
   further right than a short one like "xlxd", so they never lined up). */
.row { display: grid; grid-template-columns: 180px auto 1fr; align-items: center;
       gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--grid); }
.row:last-child { border-bottom: none; }
.name { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pills { display: flex; gap: 6px; align-items: center; }
.actions { justify-self: end; }
.pill { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--grid); color: var(--muted); }
.pill.running { color: var(--good); border-color: var(--good); }
.pill.exited, .pill.missing { color: var(--critical); border-color: var(--critical); }
.actions { display: flex; gap: 6px; }
.group-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.group-head .status { font-size: 12px; color: var(--muted); }
.top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.top a, .top button { font-size: 13px; }
.toast { position: fixed; bottom: 20px; right: 20px; background: var(--surface);
         border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px;
         font-size: 13px; display: none; box-shadow: 0 4px 16px rgba(0,0,0,.35); }

/* Listen Live's login/player pages (listen_login.html, listen.html) share
   this stylesheet with the real admin pages for convenience, but aren't
   the admin page -- scoped to body.public so admin.html/admin_login.html
   (no such class) are completely untouched by this. */
body.public .card { background: var(--surface-a); }
body.public .bg-logo {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(60vmin, 560px); height: min(60vmin, 560px);
  opacity: 0.12; z-index: -1; pointer-events: none; user-select: none;
}