/* ── Typefaces ────────────────────────────────────────────────────
   Self-hosted, not fetched from Google. The privacy policy says the app
   makes no third-party requests, and a webfont CDN would be one.
   Files live in /brand/fonts (latin subset, woff2, ~176 KB total).
   `font-display: swap` so text paints in the fallback immediately. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap; src: url("/brand/fonts/archivo-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 800; font-display: swap; src: url("/brand/fonts/archivo-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/brand/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/brand/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/brand/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/brand/fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/brand/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/brand/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/brand/fonts/ibm-plex-mono-latin-700-normal.woff2") format("woff2"); }

:root {
    --bg: #f4f5f7;
    /* neutral page (brand yellow is now an ACCENT, not the background) */
    --bg-soft: #eceef1;
    --card: #ffffff;
    --card-2: #f7f8fa;
    /* insets / hover */
    --ink: #14161a;
    /* near-black text */
    --ink-bold: #0b0c0f;
    /* deepest ink, for text ON brand yellow in dark mode */
    --muted: #6b7280;
    --line: #e4e6ea;
    /* hairline on white */
    --line-bold: #d7dade;
    /* stronger hairline (no longer a heavy black outline) */
    --brand: #f5c84b;
    --brand-deep: #d99f27;
    /* amber accent / hover */
    --brand-hi: #ffc93c;
    /* brighter yellow. TYPE AND SURFACES IN DARK MODE ONLY. Never behind the
       logo or mascot: both PNGs bake #f5c84b into their background, so any
       other yellow under them shows a rectangular seam. */
    --brand-txt: #a97c10;
    /* yellow as TEXT on a light background. #f5c84b fails contrast. */
    --green: #2e9e5b;
    --green-hi: #4ade80;
    --warn: #b4801c;
    /* the ONE amber warn. Replaces a second, near-identical value. */
    --warn-hi: #e8b44a;
    --red: #e0483f;
    /* the ONE red. Replaces #d9534f, which was the same colour by eye. */
    --red-hi: #f0817d;
    --pink: #eb6e8a;
    --discord: #5865f2;
    --discord-hover: #4954d4;
    --radius: 12px;
    --shadow: 0 6px 18px rgba(28, 27, 26, 0.12);
    --shadow-card: 0 2px 0 rgba(28, 27, 26, 0.06);

    /* Type. Set once here; every `font-family: inherit` on inputs keeps working. */
    --font-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-family: var(--font-ui);
}

* {
    box-sizing: border-box;
}

/* The hidden attribute must always win, even over display:flex on a class. */
[hidden] {
    display: none !important;
}
.tpl-item .rule-channel { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
@media (max-width: 600px) { .ev-form-grid { grid-template-columns: 1fr; } }
.cal-chip.sel { outline: 2px solid var(--brand-deep); outline-offset: 1px; }

/* ── Admin sidebar layout ──────────── */
/* ── Servers dashboard ────────────────────────────────────────────
   Self-contained palette. It deliberately does NOT reuse --ink/--card,
   because those invert under [data-theme="dark"] and turned the sidebar
   light-on-light. Tokens below are redefined per theme instead. */
/* Sidebar + menu tokens live at :root so BOTH shells (dashboard and admin)
   flip with the theme. Light mode gets a light sidebar, matching the rest of
   the page, rather than a permanently dark rail. */
/* Surface, sidebar and menu tokens all live at :root, so ONE theme flip
   covers every page. They used to sit on `.sv-shell`, which meant anything
   rendered outside that element had to redefine its own copies. Every
   consumer is a `.sv-*` / `.set-*` / `.legal-*` / `.doc-*` class that is
   inside the shell anyway, so hoisting changes nothing visually. */
:root {
  --side-bg: #f7f8fa;
  --side-line: #e6e8ec;
  --side-txt: #5b6472;
  --side-txt-hi: #14161a;
  --side-hover: rgba(20, 22, 26, .05);
  --side-active: #ebedf1;
  --menu-bg: #ffffff;
  --menu-line: #e6e8ec;
  --menu-txt: #454c59;
  --menu-shadow: 0 12px 30px rgba(20, 22, 26, .12);

  --sv-side: var(--side-bg);
  --sv-side-line: var(--side-line);
  --sv-side-txt: var(--side-txt);
  --sv-side-txt-hi: var(--side-txt-hi);
  --sv-side-hover: var(--side-hover);
  --sv-side-active: var(--side-active);
  --sv-page: #f4f5f7;
  --sv-surface: #ffffff;
  --sv-border: #e6e8ec;
  --sv-border-hi: #c9ccd2;
  --sv-line-strong: #d7dade;
  --sv-txt: #14161a;
  --sv-txt-hi: var(--sv-txt);
  --sv-txt-dim: #6b7280;
  --sv-chip: #f0f2f5;
  --sv-chip-txt: #6b7280;
  --sv-blurple: #5865f2;
  --sv-blurple-hi: #4854e0;

  /* Per-theme faces of the brand yellow. Light keeps #f5c84b plus its 2px
     deep-yellow ledge; dark switches to the brighter #ffc93c with no shadow. */
  --sv-accent: var(--brand);
  --sv-accent-line: var(--brand-deep);
  --sv-accent-txt: var(--ink);
  --sv-accent-shadow: 0 2px 0 var(--brand-deep);
  --sv-accent-soft: rgba(245, 200, 75, .22);
  --sv-warn: var(--warn);
  --sv-green: var(--green);
  --sv-red: var(--red);

  /* Selection: checkboxes and the rows that contain them.
     The two themes do NOT mirror each other here. On light the tick box is
     ink with a white check, because a yellow box with a dark tick has too
     little contrast against a white card. On dark it is the bright yellow
     with an ink check. Selected LABEL text follows the same rule as all
     yellow type: #a97c10 on light, never #f5c84b. */
  /* Tick box. The rendered mockup screens are the authority here: on light
     the box is INK with a white tick, which holds contrast against a white
     card in a way a yellow box does not. The controls-library swatch shows a
     yellow fill, but the screens win because that is what ships. Dark is
     brand yellow with an ink tick in both. */
  --sv-check-bg: var(--ink);
  --sv-check-tick: #ffffff;
  --sv-check-line: #d3d7de;
  --sv-check-edge: var(--ink);
  --sv-sel-border: var(--brand-deep);
  --sv-sel-bg: rgba(245, 200, 75, .14);
  --sv-sel-txt: var(--brand-txt);

  /* Shared control geometry: one height, one radius, one inset. */
  --ctl-h: 40px;
  --ctl-h-sm: 32px;
  --ctl-h-lg: 48px;
  --ctl-r: 8px;
  --ctl-pad: 12px;
  /* Focus: a 3px ring on fields, a 2px outline offset 2 on buttons. The ring
     drops to 22% in dark so it does not bloom against the darker surface. */
  --focus-ring: 0 0 0 3px rgba(245, 200, 75, .30);
  --focus-outline: var(--brand-deep);
  --sv-track: var(--sv-chip);
  --sv-hairline: rgba(20, 22, 26, .08);
  /* Inset rows sitting ON a card: squad rows, fleet rows, the log panel.
     Light steps DOWN to #f7f8fa; dark steps down to the page colour. */
  --sv-inset: #f7f8fa;
  --sv-log-bg: #f7f8fa;
}
html[data-theme="dark"] {
  --side-bg: #101216;
  --side-line: rgba(255, 255, 255, .07);
  --side-txt: #a8adb8;
  --side-txt-hi: #ffffff;
  --side-hover: rgba(255, 255, 255, .06);
  --side-active: rgba(255, 255, 255, .10);
  --menu-bg: #1e2127;
  --menu-line: #2c313a;
  --menu-txt: #b7bdc8;
  --menu-shadow: 0 12px 30px rgba(0, 0, 0, .45);

  --sv-page: #16181d;
  --sv-surface: #1c1f25;
  --sv-border: #282c34;
  --sv-border-hi: #3a3f48;
  --sv-line-strong: #3a3f48;
  --sv-txt: #e8eaed;
  --sv-txt-dim: #9099a6;
  --sv-chip: #262a31;
  --sv-chip-txt: #9099a6;

  --sv-accent: var(--brand-hi);
  --sv-accent-line: var(--brand-hi);
  --sv-accent-txt: var(--ink-bold);
  --sv-accent-shadow: none;
  --sv-accent-soft: rgba(255, 201, 60, .14);
  --sv-warn: var(--warn-hi);
  --sv-green: var(--green-hi);
  --sv-red: var(--red);

  --sv-check-bg: var(--brand-hi);
  --sv-check-tick: var(--ink-bold);
  --sv-check-line: #3a3f49;
  --sv-check-edge: var(--brand-hi);
  --sv-sel-border: var(--brand-hi);
  --sv-sel-bg: rgba(255, 201, 60, .10);
  --sv-sel-txt: var(--brand-hi);

  --focus-ring: 0 0 0 3px rgba(255, 201, 60, .22);
  --focus-outline: var(--brand-hi);
  --sv-track: #23272e;
  --sv-hairline: rgba(255, 255, 255, .06);
  --sv-inset: #16181d;
  --sv-log-bg: #0b0c0f;
}

.sv-shell {
  /* App-style layout: the shell owns the viewport, and only the content area
     scrolls. Sidebar and top bar therefore stay put no matter how many servers
     are listed. `overflow: hidden` here is safe because the popup menus live
     in children that are not themselves clipped. */
  display: flex; height: 100vh; overflow: hidden; align-items: stretch;
  background: var(--sv-page); color: var(--sv-txt);
  font-family: var(--font-ui);
}

/* Inline SVG icons (the Tabler webfont does not render in this app). */
.sv-shell .ic { width: 18px; height: 18px; flex-shrink: 0; display: inline-block; vertical-align: -3px; }
.sv-nav-item .ic, .sv-sub-item .ic { opacity: .85; }
.sv-badge .ic { width: 13px; height: 13px; vertical-align: -2px; }
.sv-meta .ic { width: 15px; height: 15px; opacity: .75; }
.sv-btn .ic { width: 15px; height: 15px; }
.sv-icon-btn .ic, .sv-icon-btn svg { width: 16px; height: 16px; }
.sv-help-ico .ic { width: 14px; height: 14px; }
.sv-discord .ic { width: 17px; height: 17px; }

/* Sidebar */
.sv-side {
  width: 246px; flex-shrink: 0; background: var(--sv-side);
  border-right: 1px solid var(--sv-side-line);
  display: flex; flex-direction: column; padding: 16px 12px;
  height: 100vh;
  /* NOT overflow:hidden - the user menu opens upward out of this box. */
}
.sv-brand { display: flex; align-items: center; gap: 11px; padding: 4px 6px 20px; }
/* Stays --brand (#f5c84b) in BOTH themes, never --sv-accent. logo.png is
   opaque with #f5c84b baked into its background, so any other yellow behind
   it shows as a rectangular seam around the artwork. */
.sv-brand-logo {
  width: 36px; height: 36px; border-radius: 10px; background: var(--brand); color: #14161a;
  display: grid; place-items: center; flex-shrink: 0; overflow: hidden;
}
.sv-brand-logo img { width: 100%; height: 100%; object-fit: cover; }
.sv-brand-logo i { font-size: 20px; }
.sv-brand-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.sv-brand-text strong { color: var(--sv-side-txt-hi); font: 700 14px var(--font-display); letter-spacing: -0.015em; }
.sv-brand-text small { color: var(--sv-side-txt); font-size: 11px; font-weight: 500; opacity: .85; }

/* Only the nav list scrolls if it ever grows; the brand and footer stay fixed. */
.sv-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; }
.sv-nav-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 8px;
  color: var(--sv-side-txt); font-size: 14px; font-weight: 500; text-decoration: none;
  transition: background .12s ease, color .12s ease;
  /* Pointer + no text selection, so hovering the label never shows an I-beam. */
  cursor: pointer; user-select: none; -webkit-user-select: none;
}
.sv-nav-item i { font-size: 18px; opacity: .9; }
.sv-nav-item:hover { background: var(--sv-side-hover); color: var(--sv-side-txt-hi); }
/* Active nav is brand-tinted with a 2px yellow marker down its inside edge,
   drawn as an inset shadow so it costs no layout and cannot shift the label. */
.sv-nav-item.is-active {
  background: var(--sv-accent-soft); color: var(--sv-side-txt-hi); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--sv-accent-line);
}
html[data-theme="dark"] .sv-nav-item.is-active { color: var(--brand-hi); }

.sv-side-foot { display: flex; flex-direction: column; gap: 10px; }
.sv-help {
  background: var(--side-hover); border: 1px solid var(--side-line);
  border-radius: 12px; padding: 12px;
}
.sv-help-top { display: flex; align-items: center; gap: 8px; color: var(--side-txt-hi); font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.sv-help-ico { width: 24px; height: 24px; border-radius: 7px; background: var(--sv-blurple); display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.sv-discord {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--sv-blurple); color: #fff; border-radius: 8px; padding: 9px 10px;
  font-size: 13px; font-weight: 600; text-decoration: none; transition: background .12s ease;
}
.sv-discord:hover { background: var(--sv-blurple-hi); color: #fff; }
.sv-support-open { width: 100%; border: 0; font-family: inherit; cursor: pointer; }

.sv-support-chat {
  position: fixed; right: 18px; bottom: 18px; z-index: 140;
  width: min(390px, calc(100vw - 28px)); height: min(560px, calc(100vh - 28px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--sv-surface); color: var(--sv-txt); border: 1px solid var(--sv-border);
  border-radius: 14px; box-shadow: 0 22px 60px rgba(0, 0, 0, .28);
}
.sv-support-chat[hidden] { display: none; }
.sv-support-head { display: flex; align-items: center; gap: 10px; padding: 14px; border-bottom: 1px solid var(--sv-border); }
.sv-support-head-ico { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; background: var(--sv-blurple); color: #fff; }
.sv-support-head-ico .ic { width: 17px; height: 17px; }
.sv-support-head-ico img { width: 100%; height: 100%; display: block; border-radius: inherit; object-fit: cover; }
.sv-support-head > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sv-support-head strong { font-size: 14px; color: var(--sv-txt-hi); }
.sv-support-head small { font-size: 11px; color: var(--sv-txt-dim); }
.sv-support-close { margin-left: auto; width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; padding: 0 0 2px; border: 1px solid var(--sv-border); border-radius: 9px; background: transparent; color: var(--sv-txt-dim); font: 400 26px/1 var(--font-ui); cursor: pointer; }
.sv-support-close:hover { color: var(--sv-txt-hi); background: var(--side-hover); }
.sv-support-ticketbar { flex: 0 0 auto; max-height: 156px; overflow-x: hidden; overflow-y: auto; border-bottom: 1px solid var(--sv-border); scrollbar-width: thin; }
.sv-support-ticketbar[hidden] { display: none; }
.sv-support-ticket-list { display: flex; flex-direction: column; }
.sv-support-ticket-item { width: 100%; min-height: 50px; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 14px; border: 0; border-bottom: 1px solid var(--sv-border); background: var(--sv-inset); color: var(--sv-txt); text-align: left; }
.sv-support-ticket-item:last-child { border-bottom: 0; }
.sv-support-ticket-item:hover { background: var(--side-hover); }
.sv-support-ticket-item > span:first-child { min-width: 0; }
.sv-support-ticket-item small { display: block; margin-bottom: 2px; color: var(--sv-txt-dim); font: 600 9px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.sv-support-ticket-item strong { display: block; overflow: hidden; color: var(--sv-txt); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.sv-support-ticket-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.sv-support-ticket-view { flex: 0 0 auto; padding: 3px 2px; border: 0; background: transparent; color: var(--sv-txt); opacity: .72; font: 700 10px var(--font-ui); cursor: pointer; }
.sv-support-ticket-item:hover .sv-support-ticket-view { opacity: 1; }
.sv-support-new-row { flex: 0 0 auto; padding: 9px 10px; border-bottom: 1px solid var(--sv-border); }
.sv-support-new-row[hidden] { display: none; }
.sv-support-new { width: 100%; min-height: 34px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--sv-blurple); color: #fff; font: 700 11px var(--font-ui); cursor: pointer; }
.sv-support-new:hover { background: var(--sv-blurple-hi); }
.sv-support-new:disabled { opacity: .55; cursor: wait; }
.sv-support-subject { width: 100%; min-height: 50px; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--sv-border); background: var(--sv-inset); }
.sv-support-subject[hidden], .sv-support-field[hidden] { display: none; }
.sv-support-subject-info { min-width: 0; flex: 1 1 auto; }
.sv-support-subject small { display: block; margin-bottom: 2px; color: var(--sv-txt-dim); font: 600 9px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.sv-support-subject strong { display: block; overflow: hidden; color: var(--sv-txt-hi); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.sv-support-status-badge { flex: 0 0 auto; padding: 4px 7px; border-radius: 999px; background: color-mix(in srgb, var(--sv-txt-dim) 14%, transparent); color: var(--sv-txt-dim); font: 700 9px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.sv-support-status-badge.is-open { background: color-mix(in srgb, var(--sv-green) 14%, transparent); color: var(--sv-green); }
.sv-support-expand { flex: 0 0 auto; padding: 3px 2px; border: 0; background: transparent; color: var(--sv-txt); opacity: .72; font: 700 10px var(--font-ui); cursor: pointer; }
.sv-support-expand:hover { color: var(--sv-txt); opacity: 1; }
.sv-support-chat.is-closed-collapsed { height: auto; }
.sv-support-chat.is-closed-collapsed .sv-support-messages { display: none; }
.sv-support-messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px; scrollbar-width: thin; }
.sv-support-empty { min-height: 100%; display: grid; place-content: center; gap: 5px; text-align: center; color: var(--sv-txt-dim); font-size: 12px; }
.sv-support-empty strong { color: var(--sv-txt-hi); font-size: 14px; }
.sv-support-loading { min-height: 100%; display: flex; align-items: center; justify-content: center; gap: 5px; }
.sv-support-loading span { width: 7px; height: 7px; border-radius: 50%; background: var(--sv-txt-dim); animation: supportPulse 1s ease-in-out infinite; }
.sv-support-loading span:nth-child(2) { animation-delay: .15s; }
.sv-support-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes supportPulse { 0%, 100% { opacity: .28; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.sv-support-row { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 14px; }
.sv-support-row.is-user { align-items: flex-end; }
.sv-support-row.is-grouped { margin-top: -10px; }
.sv-support-author { display: flex; align-items: center; gap: 5px; margin: 0 4px 4px; }
.sv-support-msg-avatar { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.sv-support-label { color: var(--sv-txt-dim); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.sv-support-bubble { max-width: 82%; padding: 8px 12px; border: 1px solid var(--sv-border); border-radius: 17px 17px 17px 5px; background: var(--sv-inset); color: var(--sv-txt-hi); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.sv-support-row.is-user .sv-support-bubble { border-color: transparent; border-radius: 17px 17px 5px 17px; background: var(--sv-blurple); color: #fff; }
.sv-support-row time { margin: 4px 4px 0; color: var(--sv-txt-dim); font: 500 9px var(--font-mono); }
.sv-support-closed-note { display: flex; flex-direction: column; gap: 3px; margin: 20px 0 4px; padding: 11px 12px; border: 1px solid var(--sv-border); border-radius: 10px; background: var(--sv-inset); text-align: center; }
.sv-support-closed-note strong { color: var(--sv-txt-hi); font-size: 12px; }
.sv-support-closed-note span { color: var(--sv-txt-dim); font-size: 11px; }
.sv-support-form { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 14px; border-top: 1px solid var(--sv-border); background: var(--sv-surface); }
.sv-support-field { flex: none; width: 100%; display: flex; flex-direction: column; gap: 5px; }
.sv-support-field span { color: var(--sv-txt-dim); font: 600 9px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.sv-support-field input { width: 100%; min-height: 38px; padding: 8px 11px; border: 1px solid var(--sv-border); border-radius: 9px; outline: 0; background: var(--sv-inset); color: var(--sv-txt-hi); font: 13px var(--font-ui); }
.sv-support-field input:focus { border-color: var(--sv-blurple); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sv-blurple) 18%, transparent); }
.sv-support-field select { width: 100%; min-height: 38px; padding: 8px 34px 8px 11px; border: 1px solid var(--sv-border); border-radius: 9px; outline: 0; appearance: none; -webkit-appearance: none; color-scheme: light; background-color: var(--sv-inset); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; color: var(--sv-txt-hi); font: 13px var(--font-ui); cursor: pointer; }
.sv-support-field select option { background: #fff; color: #14161a; }
html[data-theme="dark"] .sv-support-field select { color-scheme: dark; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239099a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .sv-support-field select option { background: #1c1f25; color: #e8eaed; }
.sv-support-field select:focus { border-color: var(--sv-blurple); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sv-blurple) 18%, transparent); }
.sv-support-form textarea { width: 100%; min-height: 72px; max-height: 130px; resize: vertical; padding: 10px 11px; border: 1px solid var(--sv-border); border-radius: 9px; outline: 0; background: var(--sv-inset); color: var(--sv-txt-hi); font: 13px/1.4 var(--font-ui); }
.sv-support-form textarea:focus { border-color: var(--sv-blurple); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sv-blurple) 18%, transparent); }
.sv-support-send { align-self: flex-end; min-width: 76px; min-height: 38px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--sv-blurple); color: #fff; font: 700 12px var(--font-ui); cursor: pointer; }
.sv-support-back { align-self: flex-start; padding: 2px 0; border: 0; background: transparent; color: var(--sv-txt-dim); font: 700 11px var(--font-ui); cursor: pointer; }
.sv-support-back:hover { color: var(--sv-txt); background: transparent !important; }
.sv-support-form button:hover { background: var(--sv-blurple-hi); }
.sv-support-form button:disabled { opacity: .55; cursor: wait; }

@media (max-width: 520px) {
  .sv-support-chat { right: 7px; bottom: 7px; width: calc(100vw - 14px); height: min(620px, calc(100vh - 14px)); border-radius: 12px; }
}

.sv-subnav { display: flex; flex-direction: column; gap: 1px; }
.sv-sub-item {
  display: flex; align-items: center; gap: 11px; padding: 8px 11px; border-radius: 8px;
  color: var(--sv-side-txt); font-size: 13px; font-weight: 500; text-decoration: none;
  cursor: pointer; user-select: none; -webkit-user-select: none;
}
.sv-sub-item i { font-size: 16px; opacity: .85; }
.sv-sub-item:hover { background: var(--sv-side-hover); color: var(--sv-side-txt-hi); }

/* User row + popup menu */
.sv-usermenu { position: relative; }
.sv-user {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 8px; border-radius: 10px; margin-top: 8px;
  background: transparent; border: 1px solid transparent; cursor: pointer;
  font-family: inherit; text-align: left; transition: background .12s ease, border-color .12s ease;
}
.sv-user:hover, .sv-user.is-open { background: var(--sv-side-hover); border-color: var(--sv-side-line); }
.sv-user-av { border-radius: 50%; flex-shrink: 0; width: 30px; height: 30px; }
.sv-user-av-fb { display: grid; place-items: center; background: var(--sv-side-hover); color: var(--sv-side-txt); }
.sv-user-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--sv-side-txt-hi); font-size: 13px; font-weight: 600;
}
.sv-user-caret { color: var(--sv-side-txt); width: 15px; height: 15px; }

.sv-menu {
  position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  background: var(--menu-bg); border: 1px solid var(--menu-line);
  border-radius: 12px; padding: 6px; box-shadow: var(--menu-shadow);
}
.sv-menu-head { display: flex; align-items: center; gap: 9px; padding: 8px 8px 9px; }
.sv-menu-name { color: var(--side-txt-hi); font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-menu-sep { height: 1px; background: var(--menu-line); margin: 2px 0 6px; }
.sv-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border-radius: 8px; background: transparent; border: none;
  color: var(--menu-txt); font-size: 13px; font-weight: 500; font-family: inherit;
  cursor: pointer; text-decoration: none; text-align: left;
}
.sv-menu-item:hover { background: var(--side-hover); color: var(--side-txt-hi); }
/* Base icon button. Colours below are for the DARK sidebar. */
.sv-icon-btn {
  width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center;
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  color: var(--sv-side-txt); cursor: pointer; font-family: inherit;
  transition: background .12s ease, color .12s ease;
}
.sv-icon-btn:hover { background: var(--sv-side-hover); color: var(--sv-side-txt-hi); }

/* Same button in the LIGHT top bar. Needs higher specificity than the rule
   above, or the sidebar's white hover colour makes the icon invisible on a
   light background (which is exactly what happened). */
.sv-topbar .sv-icon-btn {
  width: 34px; height: 34px; margin-left: 0; padding: 0;
  border: 1px solid var(--sv-border); border-radius: 8px;
  color: var(--sv-txt-dim);
}
.sv-topbar .sv-icon-btn:hover { background: var(--sv-chip); color: var(--sv-txt); }
.sv-topbar .sv-icon-btn:focus-visible,
.sv-side .sv-icon-btn:focus-visible { outline: 2px solid var(--sv-blurple); outline-offset: 2px; }

/* Main: fixed top bar, scrolling content beneath it. */
.sv-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.sv-topbar {
  display: flex; align-items: center; gap: 12px; padding: 0 30px; height: 62px;
  border-bottom: 1px solid var(--sv-border); background: var(--sv-surface);
  flex-shrink: 0; position: relative; z-index: 20;
}
.sv-topbar h1 { margin: 0; font: 800 17px var(--font-display); letter-spacing: -0.02em; color: var(--sv-txt); }
.sv-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.sv-topbar-right .sv-notify { width: 34px; height: 34px; flex-basis: 34px; }

/* Dashboard header additions from the approved mockup. */
.sv-title-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sv-summary {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 4px 8px; border: 1px solid var(--sv-border); border-radius: 6px;
  color: var(--sv-txt-dim); font: 600 10.5px var(--font-mono);
  letter-spacing: .12em; text-transform: uppercase;
}

/* ── Legal pages (terms / privacy) ───────────────────────────── */
.legal-shell .sv-main { width: 100%; }
.legal-switch {
  font-size: 12.5px; font-weight: 600; color: var(--sv-txt-dim);
  text-decoration: none; padding: 7px 11px; border-radius: 8px;
  border: 1px solid var(--sv-border); white-space: nowrap;
}
.legal-switch:hover { background: var(--sv-chip); color: var(--sv-txt); }
.legal {
  max-width: 820px;             /* long-form text needs a readable measure */
  margin: 0 auto;
  color: var(--sv-txt);
  font-size: 14.5px; line-height: 1.7;
}
.legal h2 { font-size: 21px; font-weight: 700; letter-spacing: -.015em; margin: 34px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--sv-border); }
.legal h3 { font-size: 16.5px; font-weight: 650; margin: 26px 0 8px; }
.legal h4 { font-size: 14.5px; font-weight: 650; margin: 20px 0 6px; }
.legal h2:first-child, .legal h3:first-child { margin-top: 0; }
.legal p { margin: 0 0 13px; }
.legal ul, .legal ol { margin: 0 0 14px; padding-left: 22px; }
.legal li { margin-bottom: 7px; }
.legal strong { font-weight: 650; color: var(--sv-txt); }
.legal a { color: var(--sv-blurple); }
.legal code {
  font-size: 13px; background: var(--sv-chip); padding: 1px 5px; border-radius: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.legal hr { border: none; border-top: 1px solid var(--sv-border); margin: 28px 0; }
.legal blockquote {
  margin: 0 0 18px; padding: 14px 16px; border-radius: 10px;
  background: var(--sv-chip); border-left: 3px solid var(--sv-blurple);
  font-size: 13.5px;
}
.legal-tablewrap { overflow-x: auto; margin: 0 0 18px; }
.legal table { width: 100%; border-collapse: collapse; font-size: 13px; }
.legal th, .legal td {
  text-align: left; padding: 9px 12px; border: 1px solid var(--sv-border); vertical-align: top;
}
.legal th { background: var(--sv-chip); font-weight: 650; }
/* ── Docs layout: article + sticky table of contents ─────────── */
/* Same 1560px cap as the dashboard grid, so every page lines up. */
.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 48px; align-items: start; max-width: 1560px; }
.doc-layout.is-plain { grid-template-columns: minmax(0, 1fr); }
/* The article fills its grid column; the grid owns the width, not the article. */
.doc-layout .legal { max-width: none; }
.doc-toc { position: sticky; top: 8px; }
.doc-toc-h {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--sv-txt-dim); margin-bottom: 10px;
}
.doc-toc nav { display: flex; flex-direction: column; gap: 1px; border-left: 1px solid var(--sv-border); }
.doc-toc a {
  padding: 6px 12px; font-size: 12.5px; color: var(--sv-txt-dim);
  text-decoration: none; border-left: 2px solid transparent; margin-left: -1px; line-height: 1.4;
}
.doc-toc a:hover { color: var(--sv-txt); }
.doc-toc a.is-sub { padding-left: 24px; font-size: 12px; }
.doc-toc a.is-active { color: var(--sv-blurple); border-left-color: var(--sv-blurple); font-weight: 600; }

/* Footer legal links: plain text links, not buttons. */
.page-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  max-width: 1560px; margin: 48px 0 0; padding-top: 20px;
  border-top: 1px solid var(--sv-border);
  font-size: 12.5px; color: var(--sv-txt-dim);
}
.page-foot nav { display: flex; gap: 20px; flex-wrap: wrap; }
.page-foot a { color: inherit !important; font-family: var(--font-ui) !important; font-size: inherit !important; font-weight: 400 !important; text-decoration: none; }
.page-foot a:hover { color: var(--sv-txt); text-decoration: underline; }

/* Callout boxes inside docs */
.doc-note {
  margin: 0 0 20px; padding: 14px 16px; border-radius: 10px;
  background: rgba(88, 101, 242, .07); border: 1px solid rgba(88, 101, 242, .25);
}
.doc-note strong { display: block; margin-bottom: 4px; font-size: 13.5px; color: var(--sv-txt); }
.doc-note p { margin: 0; font-size: 13.5px; color: var(--sv-txt-dim); }
.doc-note-warn { background: rgba(217, 159, 39, .09); border-color: rgba(217, 159, 39, .3); }
.d-chip { fill: var(--sv-chip); stroke: none; }

@media (max-width: 1000px) {
  .doc-layout { grid-template-columns: minmax(0, 1fr); }
  .doc-toc { display: none; }
}

/* ── Documentation visuals ───────────────────────────────────── */
.doc-figure {
  margin: 0 0 20px; padding: 18px; border-radius: 12px;
  background: var(--sv-chip); border: 1px solid var(--sv-border);
}
.doc-figure svg { width: 100%; height: auto; display: block; }
.doc-cap { margin: 12px 0 0; font-size: 12.5px; color: var(--sv-txt-dim); text-align: center; }
.d-box { fill: var(--sv-surface); stroke: var(--sv-border); stroke-width: 1.5; }
.d-box-accent { stroke: var(--sv-blurple); stroke-width: 2; }
.d-t { fill: var(--sv-txt); font-size: 13px; font-family: inherit; text-anchor: middle; }
.d-t-strong { font-weight: 700; }
.d-t-dim { fill: var(--sv-txt-dim); font-size: 11.5px; }
.d-line { stroke: var(--sv-blurple); stroke-width: 2; fill: none; }
.d-line-off { stroke: var(--sv-border); stroke-dasharray: 5 5; }
.d-arrow { stroke: var(--sv-blurple); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.d-x { stroke: var(--red); stroke-width: 2.5; stroke-linecap: round; }

.doc-steps { display: flex; flex-direction: column; gap: 12px; margin: 0 0 22px; }
.doc-step {
  display: flex; gap: 14px; padding: 14px 16px; border-radius: 12px;
  background: var(--sv-surface); border: 1px solid var(--sv-border);
}
.doc-num {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  background: var(--sv-blurple); color: #fff; font-size: 12.5px; font-weight: 700;
}
.doc-step strong { display: block; margin-bottom: 3px; font-size: 14px; }
.doc-step p { margin: 0; font-size: 13.5px; color: var(--sv-txt-dim); }

.doc-cmds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 22px; }
.doc-cmd { padding: 14px 16px; border-radius: 12px; background: var(--sv-surface); border: 1px solid var(--sv-border); }
.doc-cmd code {
  display: inline-block; margin-bottom: 6px; padding: 3px 9px; border-radius: 6px;
  background: var(--sv-blurple); color: #fff; font-size: 13px; font-weight: 600;
}
.doc-cmd p { margin: 0; font-size: 13px; color: var(--sv-txt-dim); }
@media (max-width: 720px) { .doc-cmds { grid-template-columns: 1fr; } }

/* ── Admin page editor ───────────────────────────────────────── */
.pg-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pg-pick { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.pg-pick select { min-width: 190px; }
.pg-meta { font-size: 12px; color: var(--muted); font-weight: 600; }
.pg-bar-right { margin-left: auto; display: flex; gap: 8px; }
.pg-toolbar {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 8px; border: 1px solid var(--line); border-bottom: none;
  border-radius: 10px 10px 0 0; background: var(--card-2);
}
.pg-toolbar button {
  min-width: 34px; height: 30px; padding: 0 9px; border-radius: 7px;
  background: transparent; border: 1px solid transparent; color: var(--ink);
  font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.pg-toolbar button:hover:not(:disabled) { background: var(--card); border-color: var(--line); }
.pg-toolbar button.is-on { background: var(--ink); color: var(--card); }
.pg-toolbar button:disabled { opacity: .4; cursor: not-allowed; }
.pg-sep { width: 1px; height: 20px; background: var(--line); margin: 0 3px; }
.pg-editor, .pg-html {
  width: 100%; min-height: 460px; max-height: 62vh; overflow-y: auto;
  padding: 20px 22px; border: 1px solid var(--line); border-radius: 0 0 10px 10px;
  background: var(--card); color: var(--ink);
}
.pg-editor:focus, .pg-html:focus { outline: none; border-color: var(--brand-deep); }
.pg-html {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  line-height: 1.6; resize: vertical; white-space: pre-wrap;
}
.pg-note { margin-top: 10px; }

@media (max-width: 640px) {
  .legal { font-size: 14px; }
  .legal h2 { font-size: 18px; }
  .legal-nav { display: none; }
  .pg-bar-right { margin-left: 0; width: 100%; }
  .pg-editor, .pg-html { padding: 14px; min-height: 320px; }
}

/* ── Notification bell ───────────────────────────────────────── */
.sv-notify {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: 0 0 34px;
}
.sv-notify .sv-bell {
  position: relative; width: 34px; height: 34px; margin: 0; padding: 0;
  display: grid; place-items: center; color: var(--sv-txt-dim);
}
.sv-notify .sv-bell .ic,
.sv-notify .sv-bell svg { display: block; width: 17px; height: 17px; vertical-align: 0; }
.sv-bell:hover, .sv-bell.is-open { background: var(--sv-chip); color: var(--sv-txt); }
.sv-bell-dot {
  position: absolute; top: -5px; right: -5px; z-index: 2;
  min-width: 17px; height: 17px; box-sizing: border-box; padding: 0 3px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--red); color: #fff; border: 2px solid var(--sv-surface);
  font: 700 9px/1 var(--font-ui); text-align: center;
}
.sv-bell-dot[hidden] { display: none; }
.sv-notifpanel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
  width: min(340px, calc(100vw - 28px));
  background: var(--menu-bg); border: 1px solid var(--menu-line);
  border-radius: 12px; box-shadow: var(--menu-shadow); overflow: hidden;
}
.sv-notif-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--menu-line);
}
.sv-notif-head strong { font-size: 13.5px; font-weight: 650; color: var(--side-txt-hi); }
.sv-notif-readall {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 12px; font-weight: 600; color: var(--sv-txt-dim); padding: 4px 6px; border-radius: 6px;
}
.sv-notif-readall:hover { background: var(--side-hover); color: var(--side-txt-hi); }
.sv-notif-readall .ic { width: 13px; height: 13px; }
.sv-notif-list { max-height: 340px; overflow-y: auto; }
.sv-notif-item {
  display: flex; gap: 11px; padding: 12px 14px; text-decoration: none;
  border-bottom: 1px solid var(--menu-line);
}
.sv-notif-item:last-child { border-bottom: none; }
.sv-notif-item:hover { background: var(--side-hover); }
.sv-notif-item.is-unread { background: rgba(88, 101, 242, .06); }
.sv-notif-item.is-unread:hover { background: rgba(88, 101, 242, .10); }
.sv-notif-ico {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center;
  background: rgba(88, 101, 242, .12); color: #5865f2;
}
.sv-notif-ico .ic { width: 16px; height: 16px; }
.sv-notif-success { background: rgba(46, 158, 91, .13); color: #2e9e5b; }
.sv-notif-warning { background: rgba(217, 159, 39, .14); color: var(--sv-warn); }
.sv-notif-billing { background: rgba(139, 92, 246, .13); color: #8b5cf6; }
.sv-notif-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sv-notif-text strong { font-size: 13px; font-weight: 600; color: var(--side-txt-hi); }
.sv-notif-text span { font-size: 12px; color: var(--menu-txt); line-height: 1.45; }
.sv-notif-text small { font-size: 11px; color: var(--sv-txt-dim); margin-top: 2px; }
.sv-notif-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 30px 16px; color: var(--sv-txt-dim); font-size: 12.5px;
}
.sv-notif-empty .ic { width: 22px; height: 22px; opacity: .5; }
.sv-content {
  padding: 26px 30px 44px; width: 100%;
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
}

/* Slim scrollbars so the scrolling region does not shout. */
.sv-content::-webkit-scrollbar, .sv-nav::-webkit-scrollbar, .sv-notif-list::-webkit-scrollbar { width: 10px; }
.sv-content::-webkit-scrollbar-track, .sv-nav::-webkit-scrollbar-track { background: transparent; }
.sv-content::-webkit-scrollbar-thumb,
.sv-nav::-webkit-scrollbar-thumb,
.sv-notif-list::-webkit-scrollbar-thumb {
  background: var(--sv-border); border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box;
}
.sv-content::-webkit-scrollbar-thumb:hover { background: var(--sv-txt-dim); background-clip: content-box; }
.sv-content, .sv-nav { scrollbar-width: thin; scrollbar-color: var(--sv-border) transparent; }
.sv-lead { margin: 0; color: var(--sv-txt-dim); font-size: 14px; }
.sv-note { max-width: 1560px; }

.sv-list-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.sv-sort { position: relative; margin-left: auto; }
.sv-sort-trigger {
  display: inline-flex; align-items: center; gap: 8px; min-height: 30px;
  padding: 5px 8px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: #9099a6; cursor: pointer;
  font: 600 10.5px var(--font-mono); letter-spacing: .14em;
  text-transform: uppercase; white-space: nowrap;
}
.sv-sort-trigger:hover, .sv-sort-trigger.is-open {
  color: var(--sv-txt); background: var(--sv-surface); border-color: var(--sv-border);
}
.sv-sort-trigger:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: 2px; }
.sv-sort-caret {
  width: 6px; height: 6px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px);
  transition: transform .12s ease;
}
.sv-sort-trigger.is-open .sv-sort-caret { transform: rotate(225deg) translate(-1px, -1px); }
.sv-sort-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  width: 174px; padding: 6px; background: var(--menu-bg);
  border: 1px solid var(--menu-line); border-radius: 12px; box-shadow: var(--menu-shadow);
}
.sv-sort-menu button {
  display: flex; align-items: center; width: 100%; min-height: 34px;
  padding: 7px 10px; border: 0; border-radius: 8px; background: transparent;
  color: var(--menu-txt); cursor: pointer; text-align: left;
  font: 500 12.5px var(--font-ui);
}
.sv-sort-menu button:hover { color: var(--side-txt-hi); background: var(--side-hover); }
.sv-sort-menu button[aria-selected="true"] {
  color: var(--sv-sel-txt); background: var(--sv-accent-soft); font-weight: 600;
}
html[data-theme="dark"] .sv-sort-trigger { color: #5f6773; }
html[data-theme="dark"] .sv-sort-trigger:hover,
html[data-theme="dark"] .sv-sort-trigger.is-open { color: var(--sv-txt); }

/* Two columns that actually FILL the available width. The old 1180px cap left a
   large gap on wide screens. `stretch` keeps both cards in a row the same
   height even when one wraps to an extra meta line. */
/* One column, full width. Each server is a row you scan top to bottom, which
   keeps the name, state, meta and actions on a single predictable line
   instead of reflowing into a narrow two-up card. No cap: .sv-content owns
   the page padding, so the rows run to the edge of the content area. */
.sv-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  align-items: stretch;
}
.sv-list > .sv-card { height: 100%; }
.sv-list > .sv-empty { grid-column: 1 / -1; }
.sv-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--sv-surface); border: 1px solid var(--sv-border);
  /* State stripe. The plan status is readable down the left edge before you
     read a word of the card. Default is the border colour, i.e. no signal. */
  border-left: 3px solid var(--sv-border);
  border-radius: 12px; padding: 16px 18px;
  transition: border-color .12s ease, transform .12s ease;
}
.sv-card:hover { border-color: var(--sv-border-hi); }
.sv-card.is-active { border-left-color: var(--brand-deep); }
.sv-card.is-warn { border-left-color: var(--sv-warn); }
/* :hover must not wipe the stripe out, so restate it at equal specificity. */
.sv-card.is-active:hover { border-left-color: var(--brand-deep); }
.sv-card.is-warn:hover { border-left-color: var(--sv-warn); }
.sv-avatar {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; overflow: hidden;
  background: var(--sv-chip); display: grid; place-items: center;
  font: 700 13px var(--font-mono); letter-spacing: .02em; color: var(--sv-chip-txt);
}
.sv-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-avatar-txt { display: grid; place-items: center; width: 100%; height: 100%; }
.sv-card-body { flex: 1; min-width: 0; }
.sv-card-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sv-name { font: 700 16px var(--font-display); color: var(--sv-txt); letter-spacing: -0.02em; }
/* Badges are DATA labels, so they take the mono face in caps. */
.sv-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 10.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 6px;
  background: var(--sv-chip); color: var(--sv-chip-txt); border: 1px solid transparent;
  white-space: nowrap;
}
.sv-badge .ic { width: 12px; height: 12px; }
.sv-badge-on { background: rgba(46, 158, 91, .12); color: var(--sv-green); border-color: rgba(46, 158, 91, .3); }
.sv-badge-warn { background: rgba(217, 159, 39, .14); color: var(--sv-warn); border-color: rgba(217, 159, 39, .32); }
/* Relay live. Shown only while this server actually has a session running, so
   it has to read as a state and not as another plan label: a lit dot rather
   than an icon, and it sits first in the row. */
.sv-badge-live { background: rgba(46, 158, 91, .12); color: var(--sv-green); border-color: rgba(46, 158, 91, .3); }
.sv-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: currentColor; display: block;
}

/* The meta line is data too: mono, uppercase, tracked out. Tabular figures
   stop the counts shifting sideways when a number changes width. */
.sv-meta {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 7px;
  font: 500 11.5px var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--sv-txt-dim);
}
.sv-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.sv-meta .ic { width: 14px; height: 14px; opacity: .8; }
.sv-warn { color: var(--sv-warn); }

.sv-renew-off { color: var(--sv-red); }
.sv-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.dashboard-page .sv-actions .sv-btn-outline {
  border-color: var(--sv-line-strong); color: var(--sv-txt); background: transparent;
}
.dashboard-page .sv-actions .sv-btn-outline:disabled { color: var(--sv-txt-dim); }

/* The approved dashboard uses the compact, uppercase ShotKalli lockup. Keep
   this scoped to the dashboard because the shell is shared with other pages. */
.dashboard-page .sv-brand-logo, .relay-page .sv-brand-logo { border-radius: 8px; }
.dashboard-page .sv-brand-text strong, .relay-page .sv-brand-text strong {
  font-weight: 800; letter-spacing: -.01em; text-transform: uppercase;
}
.dashboard-page .sv-brand-text small, .relay-page .sv-brand-text small {
  font: 500 10.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
}
.dashboard-page .sv-help, .relay-page .sv-help { background: var(--sv-surface); }
.dashboard-page .sv-user, .relay-page .sv-user {
  background: var(--sv-surface); border-color: var(--sv-side-line); margin-top: 0;
}
.dashboard-page .sv-nav-item.is-active, .relay-page .sv-nav-item.is-active {
  background: rgba(217, 159, 39, .16); color: var(--sv-sel-txt);
  box-shadow: inset 2px 0 0 var(--sv-sel-txt);
}

/* .sv-btn and every variant are defined in the CONTROLS LIBRARY at the end
   of this file, alongside .btn so both share one geometry. A second copy
   lived here and had to be kept in sync by hand. */

.sv-empty {
  background: var(--sv-surface); border: 1px dashed var(--sv-border); border-radius: 12px;
  padding: 30px; text-align: center; color: var(--sv-txt-dim); font-size: 14px;
}
.sv-empty p { margin: 0 0 6px; }
.sv-empty-ico { display: block; margin: 0 auto 10px; opacity: .5; }
.sv-empty-ico .ic { width: 30px; height: 30px; }

/* ── Settings page ─────────────────────────────────────────── */
/* Content fills the available width on every page. Individual grids cap
   themselves where a very long line would hurt readability. */
.sv-narrow { max-width: 820px; }
.set-card { max-width: 760px; }
.set-card {
  background: var(--sv-surface); border: 1px solid var(--sv-border);
  border-radius: 12px; margin-bottom: 14px; overflow: hidden;
}
.set-card.is-danger { border-color: rgba(224, 72, 63, .45); }
.set-head { display: flex; align-items: flex-start; gap: 13px; padding: 16px 18px; }
.set-ico {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center;
  background: rgba(88, 101, 242, .12); color: var(--sv-blurple);
}
.set-ico .ic { width: 19px; height: 19px; }
/* Tinted per section, like a settings page should read at a glance. */
.set-ico-notify { background: rgba(88, 101, 242, .12); color: #5865f2; }
.set-ico-data { background: rgba(46, 158, 91, .13); color: #2e9e5b; }
.set-ico-danger { background: rgba(224, 72, 63, .12); color: var(--red); }
html[data-theme="dark"] .set-ico-data { color: var(--green-hi); }
html[data-theme="dark"] .set-ico-notify { color: #8b93f8; }
html[data-theme="dark"] .set-ico-danger { color: var(--red-hi); }
.set-head h2 { margin: 0 0 2px; font-size: 15px; font-weight: 650; color: var(--sv-txt); letter-spacing: -0.01em; }
.set-head p { margin: 0; font-size: 13px; color: var(--sv-txt-dim); }
.set-body { border-top: 1px solid var(--sv-border); padding: 6px 18px 16px; }
.set-note { margin: 12px 0; font-size: 13px; line-height: 1.6; color: var(--sv-txt-dim); }
.set-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.set-profile { display: flex; align-items: center; gap: 14px; padding: 18px; flex-wrap: wrap; }
.set-avatar { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; }
.set-avatar-fb { display: grid; place-items: center; background: var(--sv-chip); color: var(--sv-chip-txt); }
.set-avatar-fb .ic { width: 24px; height: 24px; }
.set-profile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.set-profile-text strong { font-size: 16px; font-weight: 650; color: var(--sv-txt); }
.set-profile-text span { font-size: 12.5px; color: var(--sv-txt-dim); }
.set-managed { margin-left: auto; font-size: 12.5px; color: var(--sv-txt-dim); }

.set-row {
  display: flex; align-items: center; gap: 16px; padding: 14px 0;
  border-bottom: 1px solid var(--sv-border);
}
.set-row:last-child { border-bottom: none; }
.set-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.set-row-text strong { font-size: 13.5px; font-weight: 600; color: var(--sv-txt); }
.set-row-text span { font-size: 12.5px; color: var(--sv-txt-dim); }

.set-switch {
  width: 42px; height: 24px; border-radius: 999px; flex-shrink: 0; position: relative;
  background: var(--sv-chip); border: 1px solid var(--sv-border); cursor: pointer; padding: 0;
  transition: background .15s ease, border-color .15s ease;
}
.set-switch .set-knob {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s ease;
}
.set-switch.is-on { background: var(--sv-blurple); border-color: var(--sv-blurple); }
.set-switch.is-on .set-knob { transform: translateX(18px); }

.sv-btn-danger { background: var(--red); color: #fff; }
.sv-btn-danger:hover { background: #c63b33; }

@media (max-width: 620px) {
  .set-managed { margin-left: 0; flex-basis: 100%; }
}
.sv-note { max-width: 880px; margin: 18px 0 0; font-size: 12.5px; color: var(--sv-txt-dim); line-height: 1.55; }

/* ── Responsive ───────────────────────────────────────────────────
   1080  two columns collapse to one
    980  narrower sidebar
    820  sidebar becomes a horizontal header
    560  card contents stack, actions go full width
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 980px) {
  .sv-side { width: 208px; padding: 14px 9px; }
  .sv-content { padding: 22px 20px 36px; }
  .sv-topbar { padding: 0 20px; }
}

@media (max-width: 820px) {
  /* Below tablet the sidebar becomes a header, so the fixed-viewport layout is
     dropped and the page scrolls normally (which is what phones expect). */
  .sv-shell { flex-direction: column; height: auto; min-height: 100vh; overflow: visible; }
  .sv-main { min-height: 0; }
  .sv-content { overflow: visible; flex: none; }
  .sv-nav { overflow: visible; }
  .sv-side {
    width: auto; height: auto; position: static;
    border-right: none; border-bottom: 1px solid var(--sv-side-line);
    flex-direction: row; align-items: center; flex-wrap: wrap;
    gap: 10px; padding: 10px 14px;
  }
  .sv-brand { padding: 0; margin-right: auto; }
  .sv-nav { flex-direction: row; flex-wrap: wrap; flex: 0 1 auto; gap: 4px; order: 3; width: 100%; }
  .sv-nav-item { width: auto; padding: 8px 11px; font-size: 13px; }
  .sv-side-foot { flex-direction: row; align-items: center; gap: 8px; order: 2; }
  .sv-subnav { flex-direction: row; }
  .sv-sub-item span { display: none; }          /* icon-only on small screens */
  .sv-sub-item { padding: 8px; }
  .sv-usermenu { position: relative; }
  .sv-user { margin-top: 0; padding: 6px 8px; }
  .sv-user-name { max-width: 120px; }
  /* Menu now hangs DOWN from the header instead of up from the sidebar floor. */
  .sv-menu { bottom: auto; top: calc(100% + 6px); left: auto; right: 0; width: 220px; }
  .sv-topbar { height: 56px; }
}

@media (max-width: 560px) {
  .sv-topbar { padding: 0 14px; height: 52px; }
  .sv-topbar h1 { font-size: 16px; }
  .sv-content { padding: 16px 14px 28px; }
  .sv-lead { font-size: 13px; }
  .sv-title-row { gap: 8px; }
  .sv-summary { font-size: 9.5px; letter-spacing: .08em; }
  .sv-sort { margin-left: 0; }

  .sv-card { flex-wrap: wrap; gap: 12px; padding: 13px 14px; }
  .sv-avatar { width: 40px; height: 40px; }
  .sv-card-body { flex: 1 1 auto; min-width: 0; }
  .sv-card-top { gap: 7px; }
  .sv-name { font-size: 14px; }
  .sv-meta { gap: 10px; font-size: 12px; }
  .sv-actions { width: 100%; justify-content: stretch; gap: 8px; }
  .sv-actions > * { flex: 1 1 0; justify-content: center; }

  .sv-brand-text small { display: none; }
  .sv-user-name { max-width: 90px; }

  /* Settings */
  .set-head { padding: 14px; gap: 11px; }
  .set-body { padding: 4px 14px 14px; }
  .set-profile { padding: 14px; gap: 12px; }
  .set-row { flex-wrap: wrap; gap: 10px; }
  .set-actions > * { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 380px) {
  .sv-brand-text strong { font-size: 13px; }
  .sv-user-name { display: none; }
  .sv-actions { flex-direction: column; }
  .sv-actions > * { width: 100%; }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .sv-shell *, .sv-shell *::before, .sv-shell *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

.admin-shell { display: flex; min-height: 100vh; align-items: stretch; }
.admin-side {
  width: 210px; flex-shrink: 0; background: var(--ink); color: #fff;
  display: flex; flex-direction: column; padding: 14px 10px;
  position: sticky; top: 0; height: 100vh;
}
.admin-brand { font-weight: 800; font-size: 17px; display: flex; align-items: center; gap: 8px; padding: 6px 8px 14px; color: #fff; }
.admin-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
  background: transparent; border: none; color: #cfcabf; font-size: 14px; font-weight: 600;
  font-family: inherit; cursor: pointer; text-decoration: none; text-align: left; width: 100%;
}
.nav-item:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.nav-item.active { background: var(--brand); color: var(--ink); font-weight: 800; }
.nav-item i { font-size: 18px; }
.admin-side-foot { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 10px; }
.admin-user { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px; font-size: 13px; color: #cfcabf; }
.admin-user .btn-ghost { color: #cfcabf; border-color: rgba(255, 255, 255, 0.25); }
.admin-user .btn-ghost:hover { color: #fff; border-color: #fff; }
.admin-main { flex: 1; min-width: 0; padding: 20px 22px 50px; }
.admin-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.panel-title { font-size: 20px; font-weight: 800; }
body.embed .topbar { display: none; }
body.embed .dash { padding-top: 14px; }

.bt-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .bt-wrap { grid-template-columns: 1fr; } }

/* left: map */
.bt-mapcard { background: var(--ink); border: 2px solid var(--ink); border-radius: 16px; padding: 12px; box-shadow: var(--shadow-card); }
.bt-mapview.bt-panning { cursor: grabbing; }
.bt-mapview.bt-adding { cursor: crosshair; }
#btSelLoc { font-family: inherit; font-size: 13px; font-weight: 600; color: #fff; background: #0d0d0f; border: 2px solid #000; border-radius: 8px; padding: 6px 10px; width: 100%; cursor: pointer; }
#btSelLoc:focus { outline: none; border-color: var(--brand); }

/* pins — small subtle ring markers; the name shows only on hover as a dark tooltip */
.bt-pin { position: absolute; transform: translate(-50%, -50%) scale(var(--pin-scale, 1)); transform-origin: center; display: block; background: transparent; border: 0; padding: 0; cursor: pointer; touch-action: none; z-index: 2; font-family: inherit; }
.bt-pin.sel { z-index: 8; }
.bt-pin-mark { --pc: #9aa0aa; display: block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #1c1b1a; box-shadow: 0 0 0 2px #d9c38a, 0 2px 5px rgba(0,0,0,.6); background: radial-gradient(circle, #fff 0 15%, var(--pc) 15% 54%, #241f1a 54% 68%, var(--pc) 68% 100%); }
.bt-pin-label { position: absolute; left: 50%; bottom: calc(100% + 7px); transform: translateX(-50%); font-size: 12px; font-weight: 700; color: #fff; background: rgba(9,11,18,.96); border: 1px solid rgba(255,255,255,.14); border-radius: 7px; padding: 5px 10px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; box-shadow: 0 6px 16px rgba(0,0,0,.55); z-index: 12; }
.bt-pin-label::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: rgba(9,11,18,.96); }
.bt-pin:hover { z-index: 20; }
.bt-pin:hover .bt-pin-label, .bt-pin.sel .bt-pin-label { opacity: 1; }
.bt-pin.bt-up .bt-pin-mark { --pc: #e8443a; }
.bt-pin.bt-wait .bt-pin-mark { --pc: #e8b84b; }
.bt-pin.bt-unknown .bt-pin-mark { --pc: #9aa0aa; }
.bt-pin.bt-elite .bt-pin-mark { --pc: #a56be0; width: 22px; height: 22px; box-shadow: 0 0 0 2px #d9c38a, 0 0 12px 2px rgba(150,90,220,.7), 0 2px 6px rgba(0,0,0,.6); animation: btPulse 1.9s ease-in-out infinite; }
@keyframes btPulse {
  0%, 100% { box-shadow: 0 0 0 2px #d9c38a, 0 0 9px 1px rgba(150,90,220,.5), 0 2px 6px rgba(0,0,0,.6); }
  50% { box-shadow: 0 0 0 2px #e8d3a0, 0 0 18px 5px rgba(150,90,220,.9), 0 2px 6px rgba(0,0,0,.6); }
}
.bt-pin.sel:not(.bt-elite) .bt-pin-mark { box-shadow: 0 0 0 2px var(--brand), 0 2px 8px rgba(0,0,0,.7); }

/* custom boss-location pins: a distinct SVG marker, no hover tooltip */
.bt-pin.bt-custom { transform: translate(-50%, -100%) scale(var(--pin-scale, 1)); transform-origin: 50% 100%; }
.bt-pin.bt-custom .bt-custom-svg { display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.55)); }
.bt-pin.bt-custom.sel .bt-custom-svg { filter: drop-shadow(0 0 3px var(--brand)) drop-shadow(0 2px 3px rgba(0,0,0,.55)); }
.bt-zoomctl button.active { background: var(--brand); color: #1c1b1a; }
.bt-dot.bt-up { background: var(--red); } .bt-dot.bt-wait { background: var(--brand); } .bt-dot.bt-unknown { background: #b8b2a4; }
.bt-dot.bt-elite { background: radial-gradient(circle, #c79bff 0%, #7b45c8 72%); }
.bt-tab { flex: 1; padding: 9px 8px; border: 2px solid var(--ink); border-radius: 10px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 800; font-family: inherit; cursor: pointer; }
.bt-tab.active { background: var(--ink); color: #fff; }
.bt-terr { text-align: left; background: var(--card-2); border: 2px solid var(--line); border-radius: 10px; padding: 9px 11px; cursor: pointer; font-family: inherit; display: flex; flex-direction: column; gap: 6px; }
.bt-terr.active { border-color: var(--ink); background: #fff; box-shadow: inset 0 0 0 2px var(--brand); }
.bt-terr-top { display: flex; align-items: center; justify-content: space-between; }
.bt-terr-name { font-weight: 800; font-size: 14px; }
.bt-terr-time { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 800; font-size: 15px; padding: 2px 8px; border-radius: 7px; border: 2px solid var(--ink); text-align: center; }

/* status colors (shared) */
.bt-wait { background: #fbe8c2; color: #8a5a06; }
.bt-up { background: #fbd9d6; color: #a3251d; }
.bt-unknown { color: #6f6a5f; }
.bt-sel-countdown { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 800; font-size: 30px; text-align: center; padding: 10px; border-radius: 12px; border: 2px solid var(--ink); letter-spacing: 1px; }
.bt-field { display: flex; flex-direction: column; gap: 5px; }
.bt-field-lab { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); }
.bt-field input { background: #fff; color: var(--ink); border: 2px solid var(--line); border-radius: 9px; padding: 8px 10px; font-size: 14px; font-family: inherit; font-weight: 600; }
.bt-field input[type="number"] { width: 84px; }
.bt-field input[type="text"] { width: 100%; }
.bt-field input:focus { outline: none; border-color: var(--ink); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink.active { background: var(--brand); color: var(--ink); }
.btn-ink:hover:not(:disabled) { background: #34322e; }
.btn-ink.active:hover { background: var(--brand-deep); }
.btn-defeat { width: 100%; justify-content: center; padding: 13px; font-size: 15px; font-weight: 800; background: var(--red); color: #fff; border: 2px solid var(--ink); border-radius: 11px; cursor: pointer; font-family: inherit; text-transform: uppercase; letter-spacing: .4px; }
.btn-defeat:hover { background: #c63b33; }
.linkish { background: none; border: 0; color: var(--muted); font-size: 12px; font-weight: 700; font-family: inherit; cursor: pointer; text-decoration: underline; padding: 2px; }
.linkish:hover { color: var(--ink); }
.linkish.bt-danger { color: var(--red); }

/* territory cards */
.bt-terr-badge { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; padding: 2px 7px; border-radius: 6px; border: 1.5px solid var(--ink); }
.bt-terr-loc { font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-sel-status { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; padding: 3px 9px; border-radius: 7px; border: 2px solid var(--ink); white-space: nowrap; }
.bt-sel-mid .bt-sel-countdown { flex: 1; margin: 0; }
.bt-field-est .bt-field-lab { text-align: right; }
.bt-field select { background: #fff; color: var(--ink); border: 2px solid var(--line); border-radius: 9px; padding: 8px 10px; font-size: 14px; font-family: inherit; font-weight: 600; width: 100%; cursor: pointer; }
.bt-field select:focus { outline: none; border-color: var(--ink); }

/* Enter kill time modal */
.bt-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: rgba(9,11,18,.6); padding: 20px; }
.bt-modal[hidden] { display: none; }
.bt-modal-card { background: var(--card); border: 2px solid var(--ink); border-radius: 16px; padding: 20px; width: min(380px, 100%); box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 12px; }
.bt-modal-title { font-size: 16px; font-weight: 800; margin: 0; }
.bt-modal-sub { font-size: 12px; color: var(--muted); font-weight: 600; margin: 0; }
.bt-modal input[type="datetime-local"] { background: #fff; color: var(--ink); border: 2px solid var(--line); border-radius: 9px; padding: 8px 10px; font-size: 14px; font-family: inherit; font-weight: 600; }
.bt-modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.bt-modal-actions .btn-defeat { width: auto; padding: 10px 18px; }
.bt-history-card { width: min(480px, 100%); }
.bt-history-list { list-style: none; margin: 0; padding: 0; max-height: 55vh; overflow: auto; display: flex; flex-direction: column; gap: 3px; }
.bt-history-list li { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 8px; background: var(--card-2); }
.bt-hist-time { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.bt-hist-text { font-size: 13px; font-weight: 600; color: var(--ink); }
.bt-hist-empty { text-align: center; color: var(--muted); font-weight: 600; background: transparent !important; }
.bt-modal-actions .linkish.bt-danger { margin-right: auto; }
.boss-tab.active { background: var(--ink); color: #fff; }
.boss-loc { flex: 1; min-width: 90px; max-width: 200px; background: #fff; color: var(--ink); border: 2px solid var(--line); border-radius: 8px; padding: 3px 8px; font-size: 12px; font-family: inherit; }
@media (max-width: 600px) {
  .boss-item { flex-wrap: wrap; }
  .boss-status { min-width: 80px; font-size: 13px; }
}
@media (max-width: 760px) {
  .admin-shell { flex-direction: column; }
  .admin-side { width: auto; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 8px 10px; }
  .admin-brand { padding: 0 8px 0 4px; }
  .admin-nav { flex-direction: row; flex: 1 1 100%; order: 3; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
  .nav-item { width: auto; padding: 8px 10px; }
  .admin-side-foot { flex-direction: row; border-top: none; padding-top: 0; margin-left: auto; }
  .admin-user #userName { display: none; }
  .admin-main { padding: 16px 12px 40px; }
}
@media (max-width: 600px) {
  .cal-cell { min-height: 58px; padding: 2px; }
  .cal-chip { font-size: 9px; padding: 1px 3px; }
  .cal-title { font-size: 15px; min-width: 110px; }
}

/* ── Events (guild manager) ──────────── */
.start-row input[type="text"],
.start-row input[type="datetime-local"],
.start-row input[type="number"],
.start-row textarea {
    background: #fff;
    color: var(--ink);
    border: 2px solid var(--ink);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 14px;
    font-family: inherit;
    width: 100%;
}
.start-row textarea { resize: vertical; }
.person { background: #fff; border: 1px solid var(--ink); border-radius: 6px; padding: 2px 8px; font-size: 12px; font-weight: 600; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    min-height: 100vh;
}

/* ── Mascot logo ─────────────────────── */
.mascot {
    display: block;
    border-radius: 50%;
    background: var(--brand);
    border: 2px solid var(--ink);
    object-fit: cover;
}

/* ── Buttons ─────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 2px solid var(--ink);
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, transform 0.05s, color 0.15s, opacity 0.15s;
    background: #fff;
    color: var(--ink);
    text-decoration: none;
}

.btn:active {
    transform: translateY(1px);
}

.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-sm {
    padding: 7px 13px;
    font-size: 14px;
}

.btn-primary {
    background: var(--ink);
    color: #fff;
}

.btn-primary:hover:not(:disabled) {
    background: #34322e;
}

.btn-danger {
    background: var(--red);
    color: #fff;
    border-color: var(--ink);
}

.btn-danger:hover:not(:disabled) {
    background: #c63b33;
}

.btn-discord {
    background: var(--discord);
    color: #fff;
    border-color: var(--ink);
    gap: 9px;
    width: 100%;
    justify-content: center;
    padding: 14px;
    font-size: 16px;
}

.btn-discord:hover {
    background: var(--discord-hover);
}

.btn-discord svg {
    width: 20px;
    margin-top: 3px;
}

.btn-ghost {
    background: transparent;
    color: var(--muted);
    border-color: var(--line);
}

.btn-ghost:hover {
    color: var(--ink);
    border-color: var(--ink);
}

/* ── Login ───────────────────────────── */
.login-body {
    display: grid;
    place-items: center;
    padding: 24px;
}

.login-card {
    background: var(--card);
    border: 2px solid var(--ink);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 40px 36px;
    width: 100%;
    max-width: 380px;
    text-align: center;
}

.logo-mark {
    position: relative;
    width: 84px;
    height: 84px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--brand);
    border: 2px solid var(--ink);
    display: grid;
    place-items: center;
}

.logo-mark .mono {
    font-weight: 800;
    font-size: 26px;
    letter-spacing: 1px;
}

.ping {
    position: absolute;
    top: -1px;
    right: 5px;
    z-index: 2;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--green);
    border: 2px solid var(--ink);
}

.login-card h1 {
    margin: 0 0 6px;
    font-size: 24px;
}

.login-logo {
    width: 100%;
    border-radius: 100%;
}

.subtitle {
    color: var(--muted);
    margin: 0 0 28px;
    font-size: 15px;
}

.hint {
    color: var(--muted);
    font-size: 13px;
    margin: 18px 0 0;
}

.error {
    color: var(--red);
    font-size: 14px;
    margin-top: 14px;
    font-weight: 600;
}

/* ── Top bar ─────────────────────────── */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 22px;
    border-bottom: 2px solid var(--ink);
    background: var(--card);
    position: sticky;
    top: 0;
    z-index: 10;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 17px;
    min-width: 0;
}

#botTitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand .mascot {
    width: 32px;
    height: 32px;
}

.logo-dot {
    position: relative;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: var(--brand);
    border: 2px solid var(--ink);
    overflow: hidden;
    flex-shrink: 0;
}

.logo-dot-small {
    position: relative;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: var(--brand);
    border: 2px solid var(--ink);
    overflow: hidden;
    flex-shrink: 0;
}

.logo-dot .mascot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    padding-right: 12px;
    margin-right: 2px;
    border-right: 2px solid var(--line);
}

.back-link:hover {
    color: var(--ink);
}

.user {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--muted);
    font-weight: 600;
    flex-shrink: 0;
}

.user img {
    border-radius: 50%;
    border: 2px solid var(--ink);
}


@media (max-width: 720px) {
    #botTitle {
        display: none;
    }
}

/* ── Dashboard layout ────────────────── */
/* .dash used to be the page container. It now sits on the same element as
   .sv-content, which owns the padding and width, so this rule must not set
   layout of its own (it was overriding .sv-content and breaking the padding). */
.dash {
    display: block;
}

.card {
    background: var(--card);
    border: 2px solid var(--ink);
    border-radius: 14px;
    box-shadow: var(--shadow-card);
    padding: 20px;
    margin-bottom: 18px;
}

.card h2 {
    margin: 0 0 4px;
    font-size: 16px;
}

.card-sub {
    color: var(--muted);
    font-size: 13px;
    margin: 0 0 16px;
    line-height: 1.5;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.volume-card {
    grid-column: 1 / -1;
}

@media (max-width: 720px) {
    .grid {
        grid-template-columns: 1fr;
    }
}

/* two-column relay layout: controls + volume | log + fleet */
.relay-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
}

.relay-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.relay-col .card {
    margin-bottom: 0;
}

@media (max-width: 760px) {
    .relay-col {
        margin-bottom: 18px;
    }

    .relay-cols {
        grid-template-columns: 1fr;
        display: block;
    }
}

/* ── Hub (bot selector) ──────────────── */
.hub {
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 22px 60px;
}

.hub-title {
    margin: 0 0 4px;
    font-size: 24px;
}

.hub-sub {
    color: #5c5849;
    font-size: 14px;
    margin: 0 0 26px;
}

.bot-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bot-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--card);
    border: 2px solid var(--ink);
    border-radius: 14px;
    box-shadow: var(--shadow-card);
    padding: 18px 20px;
    text-decoration: none;
    color: var(--ink);
    transition: transform 0.08s, box-shadow 0.14s;
}

.bot-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.bot-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    flex-shrink: 0;
    background: var(--brand);
    border: 2px solid var(--ink);
    display: grid;
    place-items: center;
    font-size: 24px;
    color: var(--ink);
    overflow: hidden;
}

.bot-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.logo-dot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bot-body {
    flex: 1;
    min-width: 0;
}

.bot-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 3px;
}

.bot-name {
    font-size: 16px;
    font-weight: 800;
}

.bot-blurb {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.bot-chevron {
    color: var(--ink);
    font-size: 20px;
    flex-shrink: 0;
}

/* ── Status card ─────────────────────── */
.status-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.pill {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.3px;
    border: 2px solid var(--ink);
}

.pill-off {
    background: #efe9db;
    color: #6f6a5f;
}

.pill-on {
    background: #cdeecf;
    color: #1c1b1a;
}

.guild {
    margin-left: 10px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
}

.status-actions {
    display: flex;
    gap: 10px;
}

.status-meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 20px;
}

@media (max-width: 560px) {
    .status-meta {
        grid-template-columns: repeat(2, 1fr);
    }
}

.meta-item {
    background: var(--card-2);
    border: 2px solid var(--ink);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.meta-label {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 700;
}

/* .meta-val is defined once, with the relay panel further down. */

/* ── Channel picker ──────────────────── */
.channel-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.channel {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    background: var(--card-2);
    border: 2px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
    user-select: none;
}

.channel:hover {
    border-color: var(--ink);
}

.channel.selected {
    border-color: var(--ink);
    background: #fdefc2;
}

.channel.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.channel .chk {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 2px solid var(--ink);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: #fff;
}

.channel.selected .chk {
    background: var(--ink);
}

.channel .chk svg {
    display: none;
}

.channel.selected .chk svg {
    display: block;
}

.channel .name {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
}

.channel .tag {
    font-size: 12px;
    color: var(--muted);
}

.card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
}

.pick-count {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

/* ── Fleet list ──────────────────────── */
.fleet-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fleet-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--card-2);
    border: 2px solid var(--line);
    border-radius: 10px;
    font-size: 14px;
}

.fleet-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--green);
    border: 1px solid var(--ink);
    flex-shrink: 0;
}

.fleet-name {
    font-weight: 700;
}

.fleet-worker {
    color: var(--muted);
    font-size: 13px;
    margin-left: auto;
}

.fleet-clear {
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 18px;
    padding: 0 4px;
    line-height: 1;
}

.fleet-clear:hover {
    color: var(--red);
}

.fleet-empty {
    color: var(--muted);
    font-size: 14px;
    padding: 8px 2px;
}

.failed-box {
    margin-top: 14px;
    padding: 12px;
    border: 2px solid var(--red);
    border-radius: 10px;
    background: #fbe4e2;
}

.failed-title {
    color: var(--red);
    font-size: 13px;
    font-weight: 800;
}

.failed-box ul {
    margin: 6px 0 0;
    padding-left: 18px;
    color: #8a3b36;
    font-size: 13px;
}

/* ── Volume ──────────────────────────── */
.volume-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.volume-row input[type="range"] {
    flex: 1;
    accent-color: var(--brand-deep);
    height: 6px;
}

.volume-val {
    font-weight: 800;
    font-size: 16px;
    min-width: 52px;
    text-align: right;
}

/* ── Notifier: rules ─────────────────── */
.rule-list,
.activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rule-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    background: var(--card-2);
    border: 2px solid var(--line);
    border-radius: 10px;
}

.rule-item.rule-off {
    opacity: 0.6;
}

.rule-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rule-name {
    font-size: 14px;
    font-weight: 700;
}

.rule-channel {
    font-size: 12px;
    color: var(--muted);
}

.rule-switch {
    width: 40px;
    height: 23px;
    border-radius: 999px;
    border: 2px solid var(--ink);
    background: #efe9db;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

.rule-switch.on {
    background: var(--green);
}

.rule-switch .knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--ink);
    transition: transform 0.15s;
}

.rule-switch.on .knob {
    transform: translateX(17px);
}

.rule-test {
    flex-shrink: 0;
}

/* ── Notifier: activity ──────────────── */
.activity-item {
    padding: 11px 13px;
    background: var(--card-2);
    border: 2px solid var(--line);
    border-radius: 10px;
    border-left: 6px solid var(--brand);
}

.activity-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.activity-rule {
    font-size: 13px;
    font-weight: 800;
}

.activity-time {
    font-size: 12px;
    color: var(--muted);
    flex-shrink: 0;
}

.activity-text {
    font-size: 14px;
    margin: 3px 0;
}

.activity-channel {
    font-size: 12px;
    color: var(--muted);
}

/* ── Toast ───────────────────────────── */
.toast {
    position: fixed;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    color: #fff;
    padding: 12px 18px;
    border-radius: 10px;
    box-shadow: var(--shadow);
    font-size: 14px;
    font-weight: 600;
    z-index: 50;
    animation: rise 0.2s ease;
}

.toast.err {
    background: var(--red);
    color: #fff;
}

/* In dark mode --ink flips light, which made the toast nearly invisible.
   Pin a solid dark surface with a border and light text. */
html[data-theme="dark"] .toast {
    background: #2b3140;
    color: #f3f5f8;
    border: 1px solid rgba(255, 255, 255, 0.14);
}
html[data-theme="dark"] .toast.err {
    background: var(--red);
    color: #fff;
    border-color: transparent;
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translate(-50%, 8px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* ── Server picker + start form ──────── */
.guildbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.guildbar label {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    text-transform: uppercase;
}

.guildbar select,
.start-row select {
    background: #fff;
    color: var(--ink);
    border: 2px solid var(--ink);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.guildbar select {
    min-width: 240px;
}

.start-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.start-row>label {
    font-size: 13px;
    font-weight: 700;
}

.start-row select {
    max-width: 100%;
}

.caller-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.caller-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--card-2);
    border: 2px solid var(--line);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.caller-item input {
    accent-color: var(--brand-deep);
    width: 16px;
    height: 16px;
}

/* ── Add worker (admin) ──────────────── */
.worker-add {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.worker-add input {
    flex: 1;
    min-width: 0;
    background: #fff;
    color: var(--ink);
    border: 2px solid var(--ink);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 14px;
    font-family: inherit;
}

.worker-add input::placeholder {
    color: var(--muted);
}

/* ── Session log ─────────────────────── */
.logs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.logs-tools {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* .log-live is defined once, with the relay panel further down. */

.live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    animation: blink 1.4s infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

.log-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 10px;
    background: #fffdf6;
    border: 2px solid var(--line);
    border-radius: 10px;
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.log-item {
    display: grid;
    grid-template-columns: 82px 64px 1fr;
    gap: 10px;
    align-items: baseline;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 12.5px;
}

.log-item:hover {
    background: var(--card-2);
}

.log-time {
    color: var(--muted);
}

.log-tag {
    font-weight: 800;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.3px;
    padding: 2px 4px;
    border-radius: 5px;
    text-align: center;
    background: #efe9db;
    color: #6f6a5f;
}

.log-msg {
    color: var(--ink);
    line-height: 1.4;
}

.log-warn .log-tag {
    background: #fbe8c2;
    color: #8a5a06;
}

.log-error .log-tag {
    background: #fbd9d6;
    color: #a3251d;
}

.log-error .log-msg {
    color: #a3251d;
}

.log-empty {
    color: var(--muted);
    font-size: 13px;
    padding: 6px;
    font-family: system-ui, sans-serif;
}

/* ── Mobile ──────────────────────────── */
@media (max-width: 600px) {
    .topbar {
        padding: 9px 12px;
    }

    .brand {
        font-size: 14px;
        gap: 7px;
    }

    .brand .logo-dot {
        width: 24px;
        height: 24px;
    }

    .back-link {
        padding-right: 8px;
        margin-right: 0;
        font-size: 13px;
    }

    .user {
        gap: 6px;
        font-size: 12px;
    }

    .user img {
        display: none;
    }

    #userName {
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .btn {
        padding: 10px 14px;
    }

    .btn-sm {
        padding: 6px 10px;
        font-size: 12px;
    }

    .dash {
        padding: 16px 12px 48px;
    }

    .hub {
        padding: 20px 12px 48px;
    }

    .hub-title,
    .login-card h1 {
        font-size: 21px;
    }

    .card {
        padding: 15px;
    }

    .guildbar {
        flex-wrap: wrap;
    }

    .guildbar select {
        min-width: 0;
        width: 100%;
    }

    .status-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .status-actions {
        width: 100%;
    }

    .status-meta {
        grid-template-columns: 1fr 1fr;
    }

    .login-card {
        padding: 30px 22px;
    }

    .bot-icon {
        width: 42px;
        height: 42px;
        font-size: 20px;
    }

    .caller-item,
    .channel .name {
        font-size: 13px;
    }

    .log-item {
        grid-template-columns: 58px 50px 1fr;
        gap: 6px;
        font-size: 11.5px;
    }

    .fleet-worker {
        font-size: 12px;
    }
}
/* Cross-server relay: "relay into server" picker in the squads card */
.relay-into-row { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; }
.relay-into-row label { font-size: 13px; opacity: .85; }
.relay-into-row select { flex: 1; min-width: 180px; padding: 7px 10px; border-radius: 8px; }

/* Recent logins: cap height and scroll so it doesn't stretch the admin page */
#loginsList { max-height: 320px; overflow-y: auto; padding-right: 4px; }

/* Worker bots: cap height and scroll so a big fleet doesn't stretch the page */
#workersList { max-height: 340px; overflow-y: auto; padding-right: 4px; }

/* ── Admin: Active instances ─────────────────────────────────── */
.instances-list { display: flex; flex-direction: column; gap: 18px; }
.instance-card {
  border: 1.5px solid var(--border, #e4dcc6);
  border-radius: 16px;
  padding: 20px 22px;
  background: var(--surface-2, #fff);
  box-shadow: 0 6px 20px rgba(60, 50, 20, .07);
}
.instance-card, .instance-card * { font-family: inherit; }
.inst-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.inst-head-btns { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.inst-head-left { display: flex; align-items: center; gap: 12px; min-width: 0; flex-shrink: 0; }
.inst-live { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.inst-title { font-weight: 700; font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inst-toprow { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; align-items: flex-start; }
.inst-stats { flex: 1; min-width: 240px; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  padding: 14px; border: 1px solid var(--border, #e4dcc6); border-radius: 14px; background: var(--surface-1, #fffdf8); }
.inst-stat { display: flex; flex-direction: column; gap: 3px; background: var(--card-2); border: 1px solid var(--border, #e4dcc6); border-radius: 10px; padding: 10px 13px; }
.inst-stat-k { font-size: 10px; opacity: .5; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.inst-stat-v { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inst-relays { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border, #e4dcc6); }
.inst-relay { border: 1px solid var(--border, #e4dcc6); border-radius: 14px; padding: 12px 14px; background: var(--surface-1, #fffdf8); }
.inst-relay-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.inst-relay-name { font-size: 13.5px; font-weight: 700; }
.inst-relay-count { font-size: 11px; opacity: .5; }
.inst-chan { display: flex; align-items: center; gap: 9px; font-size: 13.5px; padding: 6px; border-radius: 8px; }
.inst-chan:hover { background: rgba(0,0,0,.03); }
.inst-chan-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inst-worker { font-size: 11px; opacity: .5; }
.inst-chan-x { border: 0; background: transparent; cursor: pointer; color: var(--muted); font-size: 17px; line-height: 1; padding: 0 4px; border-radius: 6px; }
.inst-chan-x:hover { color: var(--red); background: rgba(229, 72, 77, .12); }
.inst-empty { font-size: 13px; opacity: .55; padding: 10px 2px; }

/* per-instance controls (volume + add squads) */
.inst-controls {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start;
  flex: 1; min-width: 260px; margin: 0;
  padding: 14px 16px; border: 1px solid var(--border, #e4dcc6); border-radius: 14px; background: var(--surface-1, #fffdf8);
}
.inst-ctrl { display: flex; flex-direction: column; gap: 7px; }
.inst-ctrl > label { font-size: 10px; font-weight: 700; opacity: .5; text-transform: uppercase; letter-spacing: .07em; }
.inst-ctrl select { padding: 8px 12px; border-radius: 10px; border: 1.5px solid var(--border-strong, #c9bd98); background: var(--surface-2, #fff); font-size: 13px; }
.inst-vol select { width: 100px; }
.inst-add { flex: 1; min-width: 260px; }
.inst-add-server { width: 100%; max-width: 360px; }
.inst-add-channels { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 8px; }
.inst-add-channels:empty { margin: 0; }
.inst-add-chan {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  font-weight: 700;
  border: 2px solid var(--border-strong, #c9bd98); border-radius: 999px; padding: 6px 14px; cursor: pointer;
  background: #fff; transition: background .12s, border-color .12s, box-shadow .12s; user-select: none;
}
.inst-add-chan:hover { border-color: #b7a870; background: #fdfbf4; }
.inst-add-chan input { position: absolute; opacity: 0; width: 0; height: 0; }
.inst-add-chan:has(input:checked) {
  background: #fbe6a2; border-color: #c9971a; color: #6b4e00; font-weight: 700;
  box-shadow: inset 0 0 0 1px #c9971a;
}
.inst-add-note { font-size: 12px; opacity: .55; }
.inst-add-go { align-self: flex-start; }

/* Dashboard: dismiss a 'could not cover' entry */
#failedList li { display: flex; align-items: center; gap: 8px; }
#failedList li > span { flex: 1; }
.failed-x { border: 0; background: transparent; cursor: pointer; color: var(--red); font-size: 16px; line-height: 1; padding: 0 4px; border-radius: 6px; }
.failed-x:hover { background: rgba(229, 72, 77, .12); }

/* Instances: captain line control */
.inst-cap-active { display: flex; align-items: center; gap: 10px; }
.inst-cap-name { font-size: 13px; }
.inst-cap select { padding: 8px 12px; border-radius: 10px; border: 1.5px solid var(--border-strong, #c9bd98); background: var(--surface-2, #fff); font-size: 13px; width: 100%; max-width: none; box-sizing: border-box; }

/* Dashboard: captain line control */
.cap-active { display: flex; align-items: center; gap: 12px; }
.cap-active .cap-name { flex: 1; }
.cap-pick select { width: 100%; max-width: 420px; padding: 9px 12px; border-radius: 10px; border: 1.5px solid var(--border-strong, #c9bd98); background: var(--surface-2, #fff); font-size: 13px; }

/* Dashboard: captain two-step picker */
.cap-pick { display: flex; flex-wrap: wrap; gap: 14px; }
.cap-field { display: flex; flex-direction: column; gap: 6px; }
.cap-label { font-size: 11px; font-weight: 700; opacity: .55; text-transform: uppercase; letter-spacing: .04em; }
.cap-field select { padding: 9px 12px; border-radius: 10px; border: 1.5px solid var(--border-strong, #c9bd98); background: var(--surface-2, #fff); font-size: 13px; min-width: 200px; }

/* Dashboard captain picker: match the caller picker */
.cap-head-label { display: block; font-weight: 700; font-size: 13px; margin: 4px 0 6px; }
.cap-server { width: 100%; max-width: none; padding: 9px 12px; border-radius: 10px; border: 1.5px solid var(--border-strong, #c9bd98); background: var(--surface-2, #fff); font-size: 13px; margin-bottom: 6px; }
.cap-set { margin-top: 10px; }

/* Uniform dropdown borders (dashboard + admin) */
#guildSelect, #startChannel, #relayGuildSelect, .relay-into-row select,
.cap-server, .inst-ctrl select, .inst-add-server, .inst-cap-server {
  border: 2px solid #333;
  border-radius: 10px;
  padding: 8px 12px;
  background: var(--surface-2, #fff);
  font-size: 13px;
}
.cap-server, .inst-cap-server { width: 100%; max-width: none; }
.inst-cap-people { margin: 8px 0; }
.inst-cap-set { margin-top: 4px; }

/* Admin: captain line always on its own full-width row below the other controls */
.inst-cap { flex-basis: 100%; width: 100%; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--border, #e4dcc6); }
.inst-cap .inst-cap-people { margin: 8px 0; }

/* Instance card: pulsing live dot + subtle depth */
.inst-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green, #3ba55d); box-shadow: 0 0 0 0 rgba(59,165,93,.5); animation: instPulse 2s infinite; flex: none; }
@keyframes instPulse {
  0% { box-shadow: 0 0 0 0 rgba(59,165,93,.5); }
  70% { box-shadow: 0 0 0 7px rgba(59,165,93,0); }
  100% { box-shadow: 0 0 0 0 rgba(59,165,93,0); }
}
.instance-card { transition: box-shadow .2s ease; }
.instance-card:hover { box-shadow: 0 10px 30px rgba(60, 50, 20, .10); }

/* Admin instance controls: stacked layout + full-width dropdowns + volume slider */
.inst-controls { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 14px; }
.inst-add, .inst-add-server, .inst-cap-server, .inst-cap-pick { width: 100%; max-width: none; }
.inst-add-server { max-width: none; }
.inst-vol-ctrl label { display: flex; justify-content: space-between; align-items: center; }
.inst-vol-val { font-weight: 700; opacity: .85; }
.inst-vol-slider { width: 100%; accent-color: var(--brand-deep); height: 6px; cursor: pointer; }

/* Captain + add-squads selects: force true full width */
.inst-cap-pick, .inst-cap-active { width: 100%; }
.inst-cap-server, .inst-add-server { display: block; width: 100%; max-width: none; box-sizing: border-box; }

/* Two-line identity chip: server nickname over the real username */
.caller-item .cn { display: flex; flex-direction: column; line-height: 1.15; }
.cn-name { color: var(--ink); font-weight: 600; }
.cn-user { color: var(--muted); font-size: 11px; }
.cn-extra { color: var(--muted); font-weight: 400; opacity: .8; }

/* Collapsible admin cards (click the title to slide open/closed) */
.collapsible > .card-toggle { cursor: pointer; display: flex; align-items: center; justify-content: space-between; margin: 0; user-select: none; }
.collapsible > .card-toggle::after { content: '\25B8'; font-size: .8em; opacity: .55; transition: transform .25s ease; }
.collapsible:not(.collapsed) > .card-toggle::after { transform: rotate(90deg); }
.collapsible > .card-body { overflow: hidden; max-height: 1600px; opacity: 1; transition: max-height .32s ease, opacity .25s ease, margin-top .25s ease; margin-top: 12px; }
.collapsible.collapsed > .card-body { max-height: 0; opacity: 0; margin-top: 0; pointer-events: none; }

/* Captain picker: search box + height-capped scroll list for long lists */
.cap-search { width: 100%; box-sizing: border-box; padding: 8px 12px; margin: 8px 0 6px; border: 2px solid #000; border-radius: 10px; font-size: 13px; background: var(--surface-2, #fff); }
.cap-scroll { max-height: 220px; overflow-y: auto; }
.cap-scroll::-webkit-scrollbar { width: 8px; }
.cap-scroll::-webkit-scrollbar-thumb { background: var(--border-strong, #c9bd98); border-radius: 8px; }

/* Cap the "Who to relay" / caller lists so a long list scrolls instead of growing */
.caller-list { max-height: 240px; overflow-y: auto; }
.caller-list::-webkit-scrollbar { width: 8px; }
.caller-list::-webkit-scrollbar-thumb { background: var(--border-strong, #c9bd98); border-radius: 8px; }

/* Captain-line volume slider (independent of squad relay volume) */
.cap-vol-row { margin-top: 10px; }
.cap-vol-label { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; opacity: .8; margin-bottom: 4px; }
.cap-vol-row input[type="range"] { width: 100%; accent-color: var(--brand-deep); height: 6px; cursor: pointer; }

/* Clean, thin scrollbars for all scrollable card lists */
.fleet-list, .cap-scroll, .caller-list, .log-list, #logList {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong, #c9bd98) transparent;
}
.fleet-list::-webkit-scrollbar,
.log-list::-webkit-scrollbar,
#logList::-webkit-scrollbar { width: 8px; }
.fleet-list::-webkit-scrollbar-track,
.log-list::-webkit-scrollbar-track,
#logList::-webkit-scrollbar-track { background: transparent; }
.fleet-list::-webkit-scrollbar-thumb,
.log-list::-webkit-scrollbar-thumb,
#logList::-webkit-scrollbar-thumb { background: var(--border-strong, #c9bd98); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.fleet-list::-webkit-scrollbar-thumb:hover,
.log-list::-webkit-scrollbar-thumb:hover,
#logList::-webkit-scrollbar-thumb:hover { background: #b7a870; background-clip: padding-box; }

/* Cap Command servers + Bot install links so long lists scroll instead of growing */
#mainServersList, #installsList { max-height: 260px; overflow-y: auto; padding-right: 2px; }

/* Command-server per-worker access checklist */
.ms-block { flex-direction: column; align-items: stretch; gap: 0; }
.ms-head { display: flex; align-items: center; gap: 10px; width: 100%; }
.ms-head .fleet-name { flex: 1; }
.ms-workers { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 2px; padding-left: 22px; }
.ms-wchk { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; cursor: pointer; }
.ms-wchk input { accent-color: var(--brand-deep); cursor: pointer; }
.ms-wchk.ms-absent { opacity: .5; cursor: not-allowed; }

/* "Not a member" tag on admin instance cards */
.inst-notmember { margin-left: 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #8a5a06; background: #fbe8c2; padding: 2px 7px; border-radius: 999px; }

/* Command-server worker sub-lists (present vs. request-to-join) */
.ms-sub { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; opacity: .5; margin: 10px 0 2px; padding-left: 22px; }
.ms-workers-req .ms-wchk { opacity: .85; }

/* "Could not cover" — put the × at the top of the row, not the bottom */
.failed-box ul { list-style: none; padding-left: 0; }
.failed-box li { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.failed-x { align-self: flex-start; }

/* Admin Instances "Could not cover" block */
.inst-failed { margin: 12px 14px 14px; padding: 10px 12px; border: 1px solid #e5484d; border-radius: 10px; background: #fbe4e2; }
.inst-failed-title { color: #e5484d; font-weight: 800; font-size: 12px; display: block; margin-bottom: 6px; }
.inst-failed-row { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: #8a3b36; }
.inst-failed-x { align-self: flex-start; border: 0; background: transparent; color: #e5484d; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; border-radius: 6px; }
.inst-failed-x:hover { background: rgba(229,72,77,.12); }

/* ─────────────────────────────────────────────────────────────────────────
   DARK MODE — per-user, toggled via #themeToggle. Overrides the CSS variables
   plus a handful of hard-coded surfaces the base theme sets directly.
   ───────────────────────────────────────────────────────────────────────── */
html[data-theme="dark"] {
  --bg: #16181d;
  --bg-soft: #1b1e24;
  --card: #1c1f25;
  --card-2: #23262d;
  --ink: #e8eaed;
  --muted: #9099a6;
  --line: #282c34;
  --line-bold: #333844;
  --brand: #f5c84b;
  --brand-deep: #e0b64a;
  /* Status colours brighten in dark, per the brand sheet's dark mapping.
     These used to be a THIRD set of near-identical greens and reds
     (#35c46b / #f0655c) fighting the --green-hi / --red-hi pair. One each. */
  --green: var(--green-hi);
  --red: var(--red-hi);
  --warn: var(--warn-hi);
  --pink: #f2889f;
  --shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
  --shadow-card: 0 2px 0 rgba(0, 0, 0, 0.35);
  /* surface/border tokens used by newer components (with light fallbacks) */
  --surface-1: #1e2128;
  --surface-2: #262a33;
  --border: #333741;
  --border-strong: #454a55;
}

/* Legacy dark patches, for the admin and hub shells only.
   These were written for the old ink-filled design. Left unscoped they sat at
   (0,2,1) and silently outranked the token rules at (0,2,0) inside .sv-shell,
   so half the relay restyle never applied in dark mode. Inside .sv-shell the
   --sv-* tokens already flip per theme and no dark patch is needed. */
html[data-theme="dark"] .admin-shell .card,
html[data-theme="dark"] .hub .card,
html[data-theme="dark"] .admin-shell .instance-card,
html[data-theme="dark"] .hub .instance-card,
html[data-theme="dark"] .admin-shell .status-card,
html[data-theme="dark"] .hub .status-card { border-color: var(--line-bold); background: var(--card); }
html[data-theme="dark"] .admin-shell .status-card,
html[data-theme="dark"] .hub .status-card,
html[data-theme="dark"] .admin-shell .inst-stat,
html[data-theme="dark"] .hub .inst-stat,
html[data-theme="dark"] .admin-shell .fleet-item,
html[data-theme="dark"] .hub .fleet-item,
html[data-theme="dark"] .admin-shell .ms-block,
html[data-theme="dark"] .hub .ms-block { background: var(--card-2); }

/* Inputs, selects, sliders, dropdowns */
html[data-theme="dark"] .admin-shell input,
html[data-theme="dark"] .hub input,
html[data-theme="dark"] .admin-shell select,
html[data-theme="dark"] .hub select,
html[data-theme="dark"] .admin-shell textarea,
html[data-theme="dark"] .hub textarea { background: var(--surface-2); color: var(--ink); border-color: var(--border-strong); }
html[data-theme="dark"] .admin-shell select option,
html[data-theme="dark"] .hub select option { background: #1e2128; color: var(--ink); }
html[data-theme="dark"] .cap-search,
html[data-theme="dark"] .inst-add-server,
html[data-theme="dark"] .inst-cap-server { background: var(--surface-2); color: var(--ink); border-color: var(--ink); }

/* Log + session views */
html[data-theme="dark"] .log-item:hover { background: var(--card-2); }
html[data-theme="dark"] .admin-shell .log-tag,
html[data-theme="dark"] .hub .log-tag { background: #33373f; color: #cfc9bd; }
html[data-theme="dark"] .log-list, html[data-theme="dark"] #logList { background: transparent; }

/* Buttons: keep primary as amber-on-dark so it reads on dark cards */
html[data-theme="dark"] .admin-shell .btn-ghost,
html[data-theme="dark"] .hub .btn-ghost { color: var(--ink); border-color: var(--border-strong); }
html[data-theme="dark"] .admin-shell .btn-ghost:hover,
html[data-theme="dark"] .hub .btn-ghost:hover { background: var(--card-2); }

/* Pills / tags / badges that were tuned for the light theme */
html[data-theme="dark"] .inst-notmember { background: #4a3a1a; color: #f0c46a; }
html[data-theme="dark"] .admin-shell .inst-failed { background: #2a1c1b; border-color: #6e3a35; }
html[data-theme="dark"] .admin-shell .inst-failed-title { color: #f0918a; }
html[data-theme="dark"] .admin-shell .inst-failed-row { color: #e5b3ad; }

/* The theme toggle button */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; }
.theme-toggle i { font-size: 16px; }

/* Admin sidebar in dark mode: the base theme paints it with var(--ink) (black in
   light mode). In dark that variable is light, so pin the sidebar to a genuine
   dark shade and restore readable nav contrast. */
html[data-theme="dark"] .admin-side { background: #0f1218; color: var(--ink); border-right: 1px solid var(--line); }
html[data-theme="dark"] .admin-brand { color: var(--ink); }
html[data-theme="dark"] .nav-item { color: #c3beb4; }
html[data-theme="dark"] .nav-item:hover { background: rgba(255, 255, 255, 0.06); color: var(--ink); }
html[data-theme="dark"] .nav-item.active { color: #1c1b1a; }
html[data-theme="dark"] .admin-user { color: #c3beb4; }
html[data-theme="dark"] .admin-side-foot { border-top-color: rgba(255, 255, 255, 0.1); }
html[data-theme="dark"] .admin-brand .logo-dot { filter: none; }

/* Status stat tiles: softer border than the stark light outline */
html[data-theme="dark"] .admin-shell .meta-item,
html[data-theme="dark"] .hub .meta-item,
html[data-theme="dark"] .admin-shell .inst-stat,
html[data-theme="dark"] .hub .inst-stat { border-color: var(--line-bold); background: var(--card-2); }

/* Dark mode: channel chips in the admin add-squads picker were hard-coded white */
html[data-theme="dark"] .inst-add-chan { background: var(--card-2); color: var(--ink); border-color: var(--border-strong); }
html[data-theme="dark"] .inst-add-chan:hover { background: #30343e; border-color: var(--brand-deep); }
html[data-theme="dark"] .inst-add-chan:has(input:checked) { background: #4a3a12; border-color: var(--brand-deep); color: #f2d489; box-shadow: inset 0 0 0 1px var(--brand-deep); }

/* Dark mode buttons: .btn-primary uses var(--ink) as its background (black in
   light) which inverts to light in dark, hiding the white label. Make primary
   buttons amber-on-dark, and soften generic button borders. */
html[data-theme="dark"] .admin-shell .btn,
html[data-theme="dark"] .hub .btn { border-color: var(--line-bold); }
html[data-theme="dark"] .admin-shell .btn-primary,
html[data-theme="dark"] .hub .btn-primary { background: var(--brand-deep); border-color: var(--brand-deep); color: #1b1608; }
html[data-theme="dark"] .admin-shell .btn-primary:hover:not(:disabled),
html[data-theme="dark"] .hub .btn-primary:hover:not(:disabled) { background: #f0c452; border-color: #f0c452; color: #1b1608; }

/* A dark-mode-only checkbox used to be defined here: 18px, 5px radius, amber
   fill. Its specificity (0,2,2) outranked the scoped rule (0,2,1), so in dark
   mode it silently replaced the real checkbox everywhere and the two themes
   drew different controls. The single definition further down is themed by
   --sv-check-* and covers both. */

/* The squad picker's tick box is themed by --sv-check-* tokens now, so it
   needs no per-theme patch. These overrides outranked the scoped rules and
   forced a yellow box with a dark tick in dark mode. */

/* Relaying (covered) channels: show as checked, less dimmed than fully-disabled ones */
.channel.covered.disabled { opacity: .72; }
.channel.covered .chk { opacity: 1; }

/* Live "change caller" control - a dropdown popover below the Caller tile */
.btn-xs { font-size: 11px; padding: 4px 10px; border-width: 1px; }
.meta-item { position: relative; }
.change-caller-box {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  width: 250px; max-width: 80vw;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--card); border: 2px solid var(--line-bold, #1c1b1a);
  border-radius: 12px; padding: 12px; box-shadow: var(--shadow);
}
.change-caller-box .caller-list { max-height: 200px; overflow-y: auto; overflow-x: hidden; gap: 6px; }
.change-caller-box #changeCallerGo { align-self: stretch; text-align: center; justify-content: center; }
html[data-theme="dark"] .change-caller-box { border-color: var(--line-bold); background: var(--card); }

/* "change" caller button: clearly visible in both light and dark mode */
#changeCallerBtn {
  border: 1.5px solid var(--line-bold, #1c1b1a);
  color: var(--ink);
  background: var(--card-2, #fbf7ec);
  opacity: 1;
  font-weight: 700;
  border-radius: 999px;
  margin-left: 6px;
}
#changeCallerBtn:hover { background: var(--brand); color: #1c1b1a; border-color: var(--brand-deep); }
html[data-theme="dark"] #changeCallerBtn { border-color: var(--border-strong); background: var(--surface-2); color: var(--ink); }
html[data-theme="dark"] #changeCallerBtn:hover { background: var(--brand-deep); color: #1b1608; border-color: var(--brand-deep); }

/* Channel picker: category headers + member count (match Discord layout) */
.chan-cat { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; opacity: .55; margin: 10px 2px 4px; }
.channel .chan-count { font-size: 12px; font-weight: 600; opacity: .55; }

/* Admin add-squads category header + captain picker channel header */
.inst-add-cat { flex-basis: 100%; width: 100%; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; opacity: .5; margin: 8px 0 2px; }
.cap-chan-head { flex-basis: 100%; width: 100%; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; opacity: .55; margin: 8px 2px 3px; }
.cap-chan-head:first-child { margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   UNIFIED THEME OVERRIDES
   The relay panel and admin pages were built on the old "yellow page + 2px
   black outline" look. These rules bring them in line with the dashboard:
   neutral surfaces, 1px hairlines, brand yellow kept as an accent only.
   Placed last so they win over both the base and dark-theme rules.
   ═══════════════════════════════════════════════════════════════════════════ */

body { background: var(--bg); color: var(--ink); }

/* Cards and panels: hairline instead of heavy outline. */
.card,
.status-card,
.instance-card,
.bt-block,
.bt-modal-card,
.events-frame {
  border: 1px solid var(--line) !important;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 18, 22, .04);
}
html[data-theme="dark"] .admin-shell .card,
html[data-theme="dark"] .admin-shell .status-card,
html[data-theme="dark"] .admin-shell .instance-card { box-shadow: none; }

/* Inset blocks (stat tiles, list rows, channel chips). */
.inst-stat,
.fleet-item,
.caller-item,
.channel,
.ms-block,
.bt-terr,
.tpl-item,
.cal-cell {
  border: 1px solid var(--line) !important;
  border-radius: 10px;
}

/* Top bar reads as a real app header, not a yellow band. */
.topbar {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}

/* Admin sidebar uses the same shared tokens as the dashboard sidebar, so it
   is LIGHT in light mode and dark in dark mode (it previously used --ink,
   which inverts, and then was pinned dark - both were wrong). */
.admin-side {
  background: var(--side-bg) !important;
  border-right: 1px solid var(--side-line);
  color: var(--side-txt);
}
.admin-brand { color: var(--side-txt-hi); }
.nav-item { color: var(--side-txt); }
.nav-item:hover { background: var(--side-hover); color: var(--side-txt-hi); }
.nav-item.active {
  background: var(--side-active) !important;
  color: var(--side-txt-hi) !important;
  font-weight: 600;
}
.admin-side-foot { border-top: 1px solid var(--side-line); }
.admin-user { color: var(--side-txt); }
.admin-user #userName { color: var(--side-txt-hi); font-weight: 600; }

/* Buttons: primary is solid ink, brand yellow reserved for real emphasis. */
.btn {
  border-radius: 8px;
  border-width: 1px;
  font-weight: 600;
}
.btn-primary {
  background: var(--ink);
  color: var(--card);
  border-color: var(--ink);
}
.btn-primary:hover { opacity: .88; background: var(--ink); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { background: var(--card-2); }

/* Pills / status chips. */
.pill { border-width: 1px; border-radius: 999px; font-weight: 600; }
.pill-on { background: rgba(46, 158, 91, .12); color: #2e9e5b; border-color: rgba(46, 158, 91, .3); }
.pill-off { background: var(--card-2); color: var(--muted); border-color: var(--line); }

/* Inputs. */
input, select, textarea {
  border: 1px solid var(--line) !important;
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand-deep) !important;
  box-shadow: 0 0 0 3px rgba(217, 159, 39, .15);
}

/* Hub bot cards. */
.bot-card {
  border: 1px solid var(--line) !important;
  border-radius: 12px;
  background: var(--card);
}
.bot-card:hover { border-color: var(--line-bold) !important; }

/* ── Admin sidebar controls ───────────────────────────────────────────
   The admin sidebar is ALWAYS dark, so its buttons must not use theme
   variables: in light mode var(--card-2) is near-white and the inherited
   `color:#fff` made "Sign out" white-on-white. Fixed colours instead. */
.admin-side .btn,
.admin-user .btn,
.admin-side .btn-ghost,
.admin-user .btn-ghost {
  background: transparent;
  color: var(--side-txt);
  border: 1px solid var(--side-line);
}
.admin-side .btn-ghost:hover,
.admin-user .btn-ghost:hover,
.admin-side .btn:hover,
.admin-user .btn:hover {
  background: var(--side-hover);
  color: var(--side-txt-hi);
  border-color: var(--side-txt-hi);
}
.admin-side .btn:focus-visible,
.admin-user .btn:focus-visible { outline: 2px solid var(--sv-blurple, #5865f2); outline-offset: 2px; }

/* ── Dark-mode contrast fixes ─────────────────────────────────────────
   `--ink` flips from near-black to near-white between themes, so any rule
   pairing `background: var(--ink)` with a hard-coded `color:#fff` goes
   invisible in dark mode. Using var(--card) for the text makes it flip
   with the surface instead of fighting it. */
.bt-tab.active,
.boss-tab.active {
  background: var(--ink);
  color: var(--card);
}
.bt-tab.active svg, .boss-tab.active svg { stroke: var(--card); }
.admin-side a.nav-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* ── Legacy components inside the new shell ───────────────────────────
   The relay page reuses .card/.btn/.pill from the original design. Scoped to
   .sv-shell they now read from the SAME tokens as the dashboard and settings
   pages, so all three look like one product. Pages outside the shell (admin,
   events) keep their existing look. */
.sv-shell .card,
.sv-shell .status-card {
  background: var(--sv-surface) !important;
  border: 1px solid var(--sv-border) !important;
  border-radius: 12px;
  box-shadow: none;
}
.sv-shell .card-sub { color: var(--sv-txt-dim); }
.sv-shell .guild { color: var(--sv-txt); }
.sv-shell .guildbar label { color: var(--sv-txt-dim); }

.sv-shell .meta-item {
  background: var(--sv-chip) !important;
  border: 1px solid transparent !important;
}
.sv-shell .meta-label { color: var(--sv-txt-dim); }
.sv-shell .meta-val { color: var(--sv-txt); }

/* The state pill is defined once, with the rest of the relay panel further
   down. It used to be declared here as well, with hard-coded greens that had
   to be patched per theme. */

/* Text fields are defined in the CONTROLS LIBRARY at the end of this file.
   A second copy lived here and focused with a BLURPLE ring, which the brand
   sheet reserves for Discord actions and the switch on-state. Focus is a
   brand-yellow ring now. */

/* Selects: the native control renders its own grey button face on hover, which
   looked broken against both themes. Strip the native chrome and draw our own
   chevron so hover/focus match every other control. */
.sv-shell select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 34px !important;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 11px center !important;
  background-size: 15px 15px !important;
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.sv-shell select:hover { border-color: var(--sv-txt-dim) !important; }
html[data-theme="dark"] .sv-shell select {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239099a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
}
/* The dropdown list itself is drawn by the OS; set both so it is never
   white-on-white or black-on-black. */
.sv-shell select option { background: var(--sv-surface); color: var(--sv-txt); }
/* The checkbox, radio, switch, slider and every button variant are defined
   ONCE in the CONTROLS LIBRARY at the end of this file. An earlier 16px/4px
   definition lived here and competed with it. */

/* Log rows are the only one of these that stays a flat chip. The channel,
   caller and fleet rows each carry their own border and selected state
   below, so they must NOT be forced to a single background here. That
   `!important` was overriding every one of them. */
.sv-shell .log-list li { color: var(--sv-txt); }
.sv-shell .log-empty,
.sv-shell .fleet-empty {
  background: var(--sv-chip); border: 1px dashed var(--sv-border);
  color: var(--sv-txt-dim);
}
.sv-shell .pick-count { color: var(--sv-txt-dim); }

/* ── Relay panel polish ───────────────────────────────────────────────
   Brings the relay page up to the dashboard's visual language: a real app
   header, quieter labels, stat tiles, and consistent card typography. */

.topbar {
  position: sticky; top: 0; z-index: 30;
  height: 62px; padding: 0 30px;
  display: flex; align-items: center; gap: 12px;
}
.topbar .brand { font: 800 17px var(--font-display); letter-spacing: -.02em; gap: 10px; }
.topbar .user { gap: 10px; }
.topbar .user #userName { font-size: 13px; font-weight: 600; color: var(--muted); }
.topbar .theme-toggle {
  width: 34px; min-width: 34px; height: 34px; padding: 0;
  display: inline-grid; place-items: center;
  border: 1px solid var(--sv-border); border-radius: 8px;
  color: var(--sv-txt-dim);
}
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--muted);
  text-decoration: none; padding: 6px 10px; border-radius: 8px;
  border: 1px solid transparent;
}
.back-link:hover { background: var(--card-2); color: var(--ink); border-color: var(--line); }
.ic-sm { width: 15px; height: 15px; flex-shrink: 0; }
.nav-item .ic-sm { width: 16px; height: 16px; }

/* .dash sits on the SAME element as .sv-content on the relay page. It must not
   set padding (that cancelled .sv-content's padding and pushed cards flush to
   the window edge), and its width cap now matches the dashboard's 1560px grid
   so both pages line up identically. */
.dash { width: 100%; margin: 0; }
.dash > * { max-width: 1560px; }   /* same cap as the dashboard's server grid */

/* ── Relay control panel, on the brand system ──────────────────────
   Section 05 of the branding sheet. Card ORDER and COPY are unchanged;
   only the surfaces, type and colour move onto the --sv-* tokens so the
   relay page stops being a second, cream-coloured design.
   ───────────────────────────────────────────────────────────────── */

/* The old "Server" dropdown is replaced by the switcher popup below. */
.guildbar { display: none; }

/* Status card: on-air header */
.status-card { padding: 16px 18px; }
.status-head { align-items: center; gap: 12px; margin-bottom: 0; }
.status-head .guild { font: 800 24px var(--font-display); letter-spacing: -.03em; color: var(--sv-txt); margin-left: 10px; }
.status-actions { display: flex; gap: 9px; }

/* State pill: a true pill with a lit dot, not a badge. */
.sv-shell .pill {
  display: inline-flex; align-items: center; gap: 7px;
  font: 700 10.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px; border: 1px solid transparent;
}
.sv-shell .pill::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; flex: none;
}
.sv-shell .pill-on { background: rgba(46, 158, 91, .16); color: var(--sv-green); }
.sv-shell .pill-off { background: var(--sv-chip); color: var(--sv-txt-dim); }

/* Stat tiles. One bordered slab divided by 1px gaps: the grid gap shows the
   container's colour through, which draws the hairlines without four
   separate borders meeting and doubling up at the joins. */
.status-meta {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; margin-top: 18px;
  background: var(--sv-border); border: 1px solid var(--sv-border);
  border-radius: 10px; overflow: hidden;
}
.sv-shell .meta-item {
  background: var(--sv-page); border: none;
  padding: 14px 16px; border-radius: 0;
}
.meta-label {
  display: flex; align-items: center; gap: 6px;
  font: 600 10px var(--font-mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--sv-txt-dim); margin-bottom: 0;
}
/* Numbers are mono at 24. The caller is a name, not a measurement, so it
   takes the display face instead. */
.meta-val {
  font: 600 24px var(--font-mono); letter-spacing: 0;
  font-variant-numeric: tabular-nums; color: var(--sv-txt); margin-top: 2px;
}
#callerVal.meta-val {
  font: 700 17px var(--font-display); margin-top: 4px; letter-spacing: -.01em;
}
/* Active squads is the one number that carries the brand colour: it is the
   thing the whole panel exists to report. */
#activeVal.meta-val { color: var(--sv-sel-txt); }

/* Cards */
.sv-shell .card {
  background: var(--sv-surface); border: 1px solid var(--sv-border);
  border-radius: 12px; padding: 18px 20px; box-shadow: none;
}
.sv-shell .card h2 { font: 700 15px var(--font-display); letter-spacing: -.015em; margin: 0 0 3px; color: var(--sv-txt); }
.card-sub { font-size: 13px; line-height: 1.55; color: var(--sv-txt-dim); margin: 0 0 14px; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.pick-count { font: 500 11.5px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--sv-txt-dim); }

/* Master volume. accent-color was --brand-deep, which is a duller amber in
   dark mode; the accent token gives the brighter yellow there instead. The
   readout is a number that changes as you drag, so it is mono and tabular
   and cannot reflow the row under the cursor. */
.sv-shell .volume-row input[type="range"] { accent-color: var(--sv-accent-line); }
.sv-shell .volume-val {
  font: 600 14px var(--font-mono); font-variant-numeric: tabular-nums;
  min-width: 48px; text-align: right; color: var(--sv-sel-txt);
}

/* Field labels above the command-channel select and the caller picker. Small
   mono caps, so they read as labels rather than as headings competing with
   the card title. */
.sv-shell .start-row > label,
.sv-shell .relay-into-row > label {
  display: block; margin-bottom: 5px;
  font: 600 10.5px var(--font-mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--sv-txt-dim);
}
/* Control height is set once in the controls library. */

/* Session log: an inset, terminal-ish panel so it reads as a feed rather
   than as more cards. Timestamp and tag are mono and fixed-width, which
   keeps the message column aligned down the whole list. */
.logs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sv-shell .logs-card { background: var(--sv-log-bg); }
/* Rows are separated by a hairline rather than by a filled chip: at 12px
   mono the colour of the tag alone carries the status, and boxes around
   every line turn the feed into a ladder. */
.log-list { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.relay-page .log-list { background: transparent; border: 0; border-radius: 0; }
.sv-shell .log-list li {
  display: flex; gap: 10px;
  font: 500 12px var(--font-mono); line-height: 1.5;
  padding: 5px 0; border-radius: 0; background: transparent;
  margin-bottom: 0; color: var(--sv-txt);
  border-bottom: 1px solid var(--sv-hairline);
}
.sv-shell .log-list li:last-child { border-bottom: none; }
.sv-shell .log-time { color: var(--sv-txt-dim); font-variant-numeric: tabular-nums; flex: none; }
.sv-shell .log-tag {
  flex: none; text-align: left; min-width: 0;
  font: 500 12px var(--font-mono); letter-spacing: 0; text-transform: uppercase;
  padding: 0; border-radius: 0; background: none; color: var(--sv-green);
}
.sv-shell .log-info .log-tag, .sv-shell .log-item .log-tag { color: var(--sv-txt-dim); }
.sv-shell .log-ok .log-tag, .sv-shell .log-session .log-tag { color: var(--sv-green); }
.sv-shell .log-warn .log-tag { background: none; color: var(--sv-warn); }
.sv-shell .log-error .log-tag { background: none; color: var(--sv-red); }
.log-live {
  display: inline-flex; align-items: center; gap: 5px; margin-left: auto;
  font: 700 10.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--sv-green);
}
.log-live .live-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.log-empty, .fleet-empty {
  background: transparent; border: 1px dashed var(--sv-border); border-radius: 10px;
  padding: 16px; text-align: center; font-size: 13px; color: var(--sv-txt-dim);
}

/* Squads picker, to the mockup's values.
   Row: 10/12 padding, 8px radius, page-coloured inset on a card.
   Connected: a green stripe down the left edge, no tick box (you cannot
   deselect a channel that is already covered).
   Selected: 1.5px yellow edge and a faint yellow wash.
   Unavailable: dimmed to .45 with an empty box. */
.sv-shell .channel {
  display: flex; align-items: center; gap: 10px;
  background: var(--sv-inset); border: 1px solid var(--sv-border);
  border-left: 3px solid var(--sv-border);
  border-radius: 8px; padding: 10px 12px;
}
.sv-shell .channel:hover { border-color: var(--sv-border-hi); }
.sv-shell .channel.covered { border-left-color: var(--sv-green); }
.sv-shell .channel.covered .tag { color: var(--sv-green); }
.sv-shell .channel.selected {
  background: var(--sv-sel-bg);
  border: 1.5px solid var(--sv-sel-border);
}
.sv-shell .channel.covered.selected {
  border-left: 3px solid var(--sv-green);
}
.sv-shell .channel.selected .name { font-weight: 600; }
.sv-shell .channel.selected .tag { color: var(--sv-sel-txt); }
.sv-shell .channel .name { font-size: 13.5px; color: var(--sv-txt); }
.sv-shell .channel .tag {
  margin-left: auto;
  font: 600 10.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--sv-txt-dim);
}
.sv-shell .channel .chan-count {
  font: 500 11px var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--sv-txt-dim); opacity: 1;
}
/* .chk is a span, not an input, but it has to look identical to the real
   checkboxes next to it. Same 16/4px box and the same per-theme fill. */
.sv-shell .channel .chk {
  width: 16px; height: 16px; border-radius: 4px; flex: none;
  background: transparent; border: 1.5px solid var(--sv-check-line);
  display: grid; place-items: center;
}
.sv-shell .channel.selected .chk {
  background: var(--sv-check-bg); border-color: var(--sv-check-bg);
}
/* The svg is display:none until .selected, so only its colour is set here. */
.sv-shell .channel .chk svg { width: 11px; height: 11px; stroke: var(--sv-check-tick); }
.sv-shell .channel.disabled { opacity: .45; }
.sv-shell .channel.covered.disabled { opacity: 1; }

/* Caller picker rows: same language as the squads rows, slightly tighter.
   The row highlights from the checkbox inside it, so the label and the box
   can never disagree about whether someone is selected. */
.sv-shell .caller-item {
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: 1px solid var(--sv-border);
  border-radius: 8px; padding: 9px 11px; margin: 0;
  font-size: 13.5px; color: var(--sv-txt); cursor: pointer;
}
.sv-shell .caller-item:hover { border-color: var(--sv-border-hi); }
.sv-shell .caller-item:has(input:checked) {
  background: var(--sv-sel-bg);
  border: 1.5px solid var(--sv-sel-border);
  font-weight: 600;
}
.sv-shell .caller-item .cn small,
.sv-shell .caller-item small {
  font: 500 11px var(--font-mono); color: var(--sv-txt-dim); font-weight: 500;
}
.sv-shell .caller-list { display: flex; flex-direction: column; gap: 6px; }

/* Live fleet rows */
.sv-shell .fleet-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--sv-inset); border: 1px solid var(--sv-border);
  border-left: 3px solid var(--sv-green);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 6px;
}
.sv-shell .fleet-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--sv-txt); }
/* The worker tag is an identifier, so it takes the mono face and sits right,
   matching the mockup's "Speaker#4411" column. */
.sv-shell .fleet-worker {
  margin-left: auto;
  font: 500 12px var(--font-mono);
  color: var(--sv-txt-dim); white-space: nowrap;
}
.sv-shell .fleet-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sv-green); flex-shrink: 0; }

/* Could not cover */
.sv-shell .failed-box {
  border: 1px solid rgba(224, 72, 63, .35); background: rgba(224, 72, 63, .12);
  border-radius: 9px; padding: 11px 13px; margin-top: 12px;
}
.sv-shell .failed-title {
  display: block; margin-bottom: 5px; color: var(--sv-red);
  font: 700 10.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
}
.sv-shell .failed-box ul, .sv-shell .failed-box li {
  font-size: 13px; color: var(--sv-txt); margin: 0; padding: 0; list-style: none;
}

/* Relay columns */
.relay-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.relay-col { display: flex; flex-direction: column; gap: 14px; }

/* Approved Relay composition: its status and four metrics form a full-width
   control header, while the operational cards scroll underneath. All IDs and
   controls are the existing ones; only their presentation and placement move. */
.relay-page .sv-main { overflow: hidden; }
.relay-view {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain; background: var(--sv-page);
}
.relay-page .relay-statusbar {
  padding: 0; border: 0 !important; border-bottom: 1px solid var(--sv-border) !important;
  border-radius: 0; background: var(--sv-surface) !important; flex: none;
}
.relay-page .status-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;
  width: 100%; height: 62px; padding: 0 30px;
  border-bottom: 1px solid var(--sv-border); background: var(--sv-surface);
}
.relay-page .status-head > div:first-child {
  display: grid; grid-template-columns: auto minmax(0, auto);
  align-items: center; column-gap: 14px;
}
.relay-page .status-head > div:first-child > .pill { grid-column: 1; grid-row: 1 / span 2; }
.relay-page .status-head .gsw { grid-column: 2; grid-row: 1; }
.status-context {
  grid-column: 2; grid-row: 2; margin-top: 3px;
  color: var(--sv-txt-dim); font: 500 11.5px var(--font-mono);
  letter-spacing: .1em; text-transform: uppercase;
}
.relay-page .status-actions { margin-left: auto; align-items: center; }
.relay-page .status-actions .sv-icon-btn {
  width: 34px; height: 34px; padding: 0; margin: 0;
  border: 1px solid var(--sv-border); border-radius: 8px; color: var(--sv-txt-dim);
}
.relay-page .status-actions .sv-icon-btn:hover { background: var(--sv-chip); color: var(--sv-txt); }
.relay-page .status-meta {
  width: calc(100% - 60px); max-width: none; margin: 20px 30px;
}
.relay-page .status-meta .meta-item { background: var(--sv-surface) !important; }
.relay-workspace { padding: 22px 30px 30px; }
.relay-page .relay-cols { max-width: 1560px; gap: 12px; }
.relay-page .relay-col { gap: 12px; }
.relay-page .start-card { order: 0; }
.relay-page .volume-card { order: 1; }
.relay-page #squadsCard { order: 2; }
.relay-page #addBotsCard { order: 3; }
.relay-page .relay-view.is-running .volume-card { order: 0; }
.relay-page .relay-view.is-running #squadsCard { order: 1; }
.relay-page .relay-view.is-running #addBotsCard { order: 2; }
.relay-page #notifyMount { display: flex; }
.relay-page #addBotsCard .fleet-list {
  display: flex !important; flex-direction: row !important;
  flex-wrap: wrap !important; align-items: center;
  gap: 8px; margin: 0; padding: 0; list-style: none;
}
.relay-page #addBotsList > .invite-worker {
  display: inline-flex !important; flex: 0 0 auto !important;
  width: auto !important; margin: 0; padding: 0; list-style: none;
}
.relay-page .invite-worker .btn { gap: 8px; }
.relay-page .worker-code,
.relay-page .fleet-code {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  padding: 3px 7px; border-radius: 5px; background: var(--sv-accent-soft);
  color: var(--sv-sel-txt); font: 700 11px var(--font-mono);
}
.relay-page .invite-worker .worker-code { padding: 2px 6px; background: var(--sv-chip); color: var(--sv-txt-dim); }
.relay-page .cap-active { padding: 11px 13px; border: 1px solid var(--sv-border); border-radius: 9px; background: var(--sv-inset); }
.relay-page .cap-active .cn { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.relay-page .cap-active .cn-name { color: var(--sv-txt); font-size: 13.5px; }
.relay-page .cap-active .cn-user { color: var(--sv-txt-dim); font: 500 10.5px var(--font-mono); }
.relay-page .cap-active .cn-extra { color: var(--sv-txt-dim); font: 500 10.5px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }

/* Long relay pickers stay inside their cards. The action rows remain visible
   while only the choices scroll, which keeps large Discord servers usable. */
.relay-page #callerList {
  display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  max-height: 160px !important; overflow-y: auto !important; overflow-x: hidden !important;
  padding-right: 5px;
  overscroll-behavior: contain;
}
.relay-page #callerList > .caller-item { width: 100%; min-width: 0; }
.relay-page #changeCallerList {
  display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important;
  max-height: 160px !important; overflow-y: auto !important; overflow-x: hidden !important;
  padding-right: 5px;
  overscroll-behavior: contain;
}
.relay-page #channelList {
  max-height: 350px !important; overflow-y: auto !important; overflow-x: hidden !important;
  padding-right: 6px;
  overscroll-behavior: contain;
}
.relay-page #capPeople {
  display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important;
  max-height: 200px !important; overflow-y: auto !important; overflow-x: hidden !important;
  padding-right: 5px;
  overscroll-behavior: contain;
}
.relay-page #callerList,
.relay-page #changeCallerList,
.relay-page #channelList,
.relay-page #capPeople {
  scrollbar-width: thin;
  scrollbar-color: var(--sv-border-hi) transparent;
}
.relay-page #callerList::-webkit-scrollbar,
.relay-page #changeCallerList::-webkit-scrollbar,
.relay-page #channelList::-webkit-scrollbar,
.relay-page #capPeople::-webkit-scrollbar { width: 8px; }
.relay-page #callerList::-webkit-scrollbar-track,
.relay-page #changeCallerList::-webkit-scrollbar-track,
.relay-page #channelList::-webkit-scrollbar-track,
.relay-page #capPeople::-webkit-scrollbar-track { background: transparent; }
.relay-page #callerList::-webkit-scrollbar-thumb,
.relay-page #changeCallerList::-webkit-scrollbar-thumb,
.relay-page #channelList::-webkit-scrollbar-thumb,
.relay-page #capPeople::-webkit-scrollbar-thumb {
  border: 2px solid transparent; border-radius: 999px;
  background: var(--sv-border-hi); background-clip: padding-box;
}

@media (max-width: 560px) {
  .relay-page #callerList { grid-template-columns: 1fr; }
}

/* ── Server switcher ───────────────────────────────────────────────
   Opens from the server name in the on-air header. Purely a navigation
   control: opening or closing it must never touch the running relay. */
.gsw { position: relative; display: inline-flex; }
.gsw-trigger {
  display: inline-flex; align-items: center; gap: 9px;
  background: transparent; border: none; border-radius: 8px;
  padding: 0; margin-left: 0; cursor: pointer;
  font: 800 17px var(--font-display); letter-spacing: -.02em; color: var(--sv-txt);
}
/* The caret is its own bordered square with an up/down glyph, which reads as
   "switch between" rather than "open a menu below". */
.gsw-trigger .gsw-caret {
  width: 24px; height: 24px; border-radius: 7px; flex: none;
  border: 1px solid var(--sv-border); color: var(--sv-txt-dim);
  display: grid; place-items: center;
  transition: border-color .12s ease, color .12s ease;
}
.gsw-trigger .gsw-caret svg { width: 14px; height: 14px; }
.gsw-trigger:hover .gsw-caret,
.gsw-trigger[aria-expanded="true"] .gsw-caret { border-color: var(--sv-txt-dim); color: var(--sv-txt); }
/* .status-head .guild carries a left margin for the old inline layout; inside
   the trigger the button's own padding does that job. */
.gsw-trigger .guild { margin-left: 0; }
.gsw-trigger:focus-visible { outline: 2px solid var(--sv-blurple); outline-offset: 2px; }
.gsw-panel {
  position: absolute; top: calc(100% + 12px); left: 0; z-index: 60;
  width: 308px; max-width: calc(100vw - 32px);
  background: var(--menu-bg); border: 1px solid var(--menu-line);
  border-radius: 12px; padding: 6px; box-shadow: var(--menu-shadow);
}
.gsw-head {
  font: 600 10.5px var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--sv-txt-dim); padding: 8px 10px 6px;
}
.gsw-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border-radius: 8px; border: 1px solid transparent;
  background: transparent; color: var(--menu-txt); cursor: pointer;
  font-family: var(--font-ui); font-size: 13.5px; text-align: left; text-decoration: none;
}
.gsw-item:hover { background: var(--side-hover); color: var(--side-txt-hi); }
/* Current server, tinted with the brand yellow like the active nav item. */
.gsw-item.is-current { background: var(--sv-accent-soft); color: var(--side-txt-hi); font-weight: 600; }
html[data-theme="dark"] .gsw-item.is-current { color: var(--brand-hi); }
/* Listed so the menu matches the dashboard, but not a switch target. */
.gsw-item.is-off { opacity: .5; cursor: default; }
.gsw-item.is-off:hover { background: transparent; color: var(--menu-txt); }
.gsw-av {
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  background: var(--sv-chip); color: var(--sv-chip-txt); overflow: hidden;
  display: grid; place-items: center; font: 700 10px var(--font-mono);
}
.gsw-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gsw-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsw-state {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
  font: 600 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--sv-txt-dim);
}
.gsw-state.is-live { color: var(--sv-green); }
.gsw-state .gsw-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.gsw-sep { height: 1px; background: var(--menu-line); margin: 4px 0; }

@media (max-width: 1020px) {
  .relay-cols { grid-template-columns: 1fr; }
  .status-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .relay-page .relay-cols { grid-template-columns: 1fr; }
  .relay-page .status-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .topbar { height: auto; padding: 10px 14px; flex-wrap: wrap; gap: 10px; }
  .topbar .brand { font-size: 14px; }
  .sv-topbar .back-link + h1 { padding-left: 10px; }
  .sv-topbar .back-link span { display: none; }
  .status-head { flex-direction: column; align-items: flex-start; }
  .status-actions { width: 100%; }
  .status-actions .btn { flex: 1 1 0; justify-content: center; }
  .status-meta { grid-template-columns: 1fr 1fr; }
  .meta-val { font-size: 16px; }
  .sv-shell .card { padding: 15px 16px; }
  /* Anchored left would run off-screen on a narrow phone. */
  .gsw-panel { left: auto; right: 0; }
  .relay-page .relay-statusbar { padding: 0; }
  .relay-page .relay-workspace { padding: 14px 14px 28px; }
  .relay-page .status-head {
    height: auto; min-height: 56px; padding: 10px 14px;
    flex-direction: column; align-items: stretch;
  }
  .relay-page .status-head > div:first-child { align-self: flex-start; }
  .relay-page .status-actions { width: 100%; margin-left: 0; }
  .relay-page .status-actions .btn { flex: 1 1 0; }
  .relay-page .status-meta {
    width: calc(100% - 28px); margin: 14px;
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 400px) {
  .status-meta { grid-template-columns: 1fr; }
  .relay-page .status-meta { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .relay-page .sv-main, .relay-page .relay-view { overflow: visible; }
}

/* ══════════════════════════════════════════════════════════════════════
   CONTROLS LIBRARY
   Section 01 of branding-mockup v2, "every state, both themes".
   Placed last on purpose: it is the authoritative definition of every
   interactive control, so it must not be silently outranked the way the
   legacy dark patches outranked the component rules.
   Geometry is identical in both themes - 40px height, 8px radius, 12px
   inset, 3px focus ring. Only surface, border and text tokens flip.
   Two rules from the sheet, treated as absolutes:
     - Yellow means THE action. One primary per view. Yellow never carries
       a border colour and never sets body text.
     - Blurple is only for Discord actions and the on-state of a switch.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Buttons ─────────────────────────────────────────────────────────── */
.sv-shell .btn,
.sv-shell .sv-btn,
.admin-shell .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: var(--ctl-h); padding: 0 16px; box-sizing: border-box;
  border-radius: var(--ctl-r); border: 1px solid transparent;
  font: 700 13px var(--font-ui); white-space: nowrap;
  cursor: pointer; text-decoration: none;
  transition: background .12s ease, border-color .12s ease, filter .12s ease, transform .06s ease;
}
.sv-shell .btn-sm, .sv-shell .sv-btn-sm, .admin-shell .btn-sm { height: var(--ctl-h-sm); padding: 0 12px; font-size: 12.5px; }
.sv-shell .btn-lg, .sv-shell .sv-btn-lg { height: var(--ctl-h-lg); padding: 0 22px; font-size: 14px; }
.sv-shell .btn-block, .sv-shell .sv-btn-block { width: 100%; }

/* Primary. Light carries the 2px deep-yellow ledge; dark drops it, because
   on a dark surface that shadow reads as grime rather than as depth. */
.sv-shell .btn-primary,
.sv-shell .sv-btn-primary,
.admin-shell .btn-primary {
  background: var(--sv-accent); color: var(--sv-accent-txt);
  border-color: transparent; box-shadow: var(--sv-accent-shadow);
}
.sv-shell .btn-primary:hover:not(:disabled),
.sv-shell .sv-btn-primary:hover:not(:disabled),
.admin-shell .btn-primary:hover:not(:disabled) { filter: brightness(.94); background: var(--sv-accent); }
/* Pressed: the button travels down onto its own ledge. */
.sv-shell .btn-primary:active:not(:disabled),
.sv-shell .sv-btn-primary:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }

.sv-shell .btn-ink, .sv-shell .sv-btn-ink {
  background: var(--ink-bold); color: #ffffff; border-color: var(--sv-border);
}
.sv-shell .btn-outline { background: transparent; color: var(--sv-txt); border: 1.5px solid var(--sv-check-edge); }
.sv-shell .btn-quiet, .sv-shell .btn-ghost,
.sv-shell .sv-btn-ghost, .admin-shell .btn-ghost {
  background: transparent; color: var(--sv-txt); border: 1px solid var(--sv-border);
}
.sv-shell .btn-quiet:hover:not(:disabled),
.sv-shell .btn-ghost:hover:not(:disabled),
.sv-shell .sv-btn-ghost:hover:not(:disabled) { background: var(--sv-chip); }
/* Ghost proper: no border at all, dim label. */
.sv-shell .btn-bare { background: transparent; color: var(--sv-txt-dim); border: none; padding: 0 10px; }
.sv-shell .btn-bare:hover:not(:disabled) { color: var(--sv-txt); }

.sv-shell .btn-danger, .sv-shell .sv-btn-danger, .admin-shell .btn-danger {
  background: var(--red); color: #fff; border-color: transparent; box-shadow: none;
}
.sv-shell .btn-danger:hover:not(:disabled) { filter: brightness(.94); }
/* Quiet destructive: for a delete that should not shout from a settings row. */
.sv-shell .btn-danger-quiet {
  background: transparent; color: var(--sv-red); border: 1px solid rgba(224, 72, 63, .4);
}
.sv-shell .btn-danger-quiet:hover:not(:disabled) { background: rgba(224, 72, 63, .08); }

.sv-shell .btn-discord, .btn-discord {
  background: var(--discord); color: #fff; border-color: transparent;
}
.sv-shell .btn-discord:hover:not(:disabled), .btn-discord:hover { background: var(--discord-hover); }

/* Disabled is opacity, never a grey repaint, so the control keeps its shape
   and you can still tell which button it is. */
.sv-shell .btn:disabled, .sv-shell .sv-btn:disabled,
.sv-shell .btn[disabled], .admin-shell .btn:disabled {
  opacity: .45; cursor: not-allowed; box-shadow: none; filter: none; transform: none;
}
.sv-shell .btn .ic, .sv-shell .sv-btn .ic { width: 15px; height: 15px; }
/* Icon-only: a 40px square. Needs an aria-label in the markup. */
.sv-shell .btn-icon { width: var(--ctl-h); padding: 0; }

/* ── Focus ───────────────────────────────────────────────────────────── */
.sv-shell .btn:focus-visible, .sv-shell .sv-btn:focus-visible,
.admin-shell .btn:focus-visible, .sv-shell a:focus-visible {
  outline: 2px solid var(--focus-outline); outline-offset: 2px;
}

/* ── Links. Never blurple. ───────────────────────────────────────────── */
.sv-shell .sv-content a:not(.btn):not(.sv-btn):not(.gsw-item):not(.sv-nav-item):not(.sv-menu-item):not(.sv-sub-item) {
  color: var(--sv-sel-txt); font-weight: 600; text-decoration: none;
}
.sv-shell .sv-content a:not(.btn):not(.sv-btn):not(.gsw-item):hover {
  text-decoration: underline; text-underline-offset: 3px;
}
.sv-shell .link-muted { color: var(--sv-txt-dim); font-weight: 500; }
.sv-shell .link-disabled { color: var(--sv-txt-dim); opacity: .5; pointer-events: none; }

/* ── Text fields, select, textarea ───────────────────────────────────── */
.sv-shell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.sv-shell select,
.sv-shell textarea {
  height: var(--ctl-h); padding: 0 var(--ctl-pad); box-sizing: border-box;
  border-radius: var(--ctl-r);
  /* background-COLOR, never the `background` shorthand. The shorthand resets
     background-image and background-repeat, which wiped the select's custom
     chevron and left it tiling across the whole field. */
  background-color: var(--sv-surface) !important;
  border: 1px solid var(--sv-border) !important;
  color: var(--sv-txt);
  font-family: var(--font-ui); font-size: 13.5px;
}
.sv-shell textarea {
  height: auto; min-height: 74px; padding: 10px var(--ctl-pad); resize: vertical;
}
.sv-shell input::placeholder, .sv-shell textarea::placeholder { color: var(--sv-txt-dim); }
.sv-shell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
.sv-shell select:focus,
.sv-shell textarea:focus {
  outline: none;
  border: 1.5px solid var(--sv-check-edge) !important;
  box-shadow: var(--focus-ring);
}
.sv-shell .is-error input, .sv-shell input.is-error,
.sv-shell .is-error select, .sv-shell select.is-error {
  border: 1.5px solid var(--red) !important;
}
.sv-shell input:disabled, .sv-shell select:disabled, .sv-shell textarea:disabled {
  opacity: .5;
}

/* ── Field anatomy: label, hint, control, then helper or error ───────── */
.sv-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.sv-field > label, .sv-label {
  font: 600 12px var(--font-ui); color: var(--sv-txt); display: flex; align-items: center; gap: 5px;
}
/* Required is a red asterisk, never the word. */
.sv-field .req { color: var(--red); }
.sv-hint { font-size: 12px; color: var(--sv-txt-dim); }
.sv-helper { font-size: 12px; color: var(--sv-txt-dim); }
.sv-error { font-size: 12px; color: var(--sv-red); }

/* ── Checkbox: 18px, radius 5, 1.5px edge ────────────────────────────── */
.sv-shell input[type="checkbox"],
.admin-shell input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; flex: none; margin: 0;
  border-radius: 5px;
  border: 1.5px solid var(--sv-check-line) !important;
  background: transparent !important;
  display: inline-grid; place-content: center;
  cursor: pointer; vertical-align: -4px;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.sv-shell input[type="checkbox"]:checked,
.admin-shell input[type="checkbox"]:checked {
  background: var(--sv-check-bg) !important;
  border-color: var(--sv-check-edge) !important;
}
.sv-shell input[type="checkbox"]:checked::after,
.admin-shell input[type="checkbox"]:checked::after {
  content: ""; width: 4px; height: 8px;
  border: solid var(--sv-check-tick); border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}
/* Indeterminate: a 9x2.5 bar, for "some squads selected". */
.sv-shell input[type="checkbox"]:indeterminate {
  background: var(--sv-check-bg) !important; border-color: var(--sv-check-edge) !important;
}
.sv-shell input[type="checkbox"]:indeterminate::after {
  content: ""; width: 9px; height: 2.5px; border: none; border-radius: 2px;
  background: var(--sv-check-tick); transform: none;
}
.sv-shell input[type="checkbox"]:focus-visible,
.admin-shell input[type="checkbox"]:focus-visible {
  outline: none; border-color: var(--sv-check-edge) !important; box-shadow: var(--focus-ring);
}
.sv-shell input[type="checkbox"].is-error { border-color: var(--red) !important; }
.sv-shell input[type="checkbox"]:disabled,
.admin-shell input[type="checkbox"]:disabled { opacity: .45; cursor: not-allowed; }

/* ── Radio: same box, round ──────────────────────────────────────────── */
.sv-shell input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; flex: none; margin: 0;
  border-radius: 50%;
  border: 1.5px solid var(--sv-check-line);
  background: var(--sv-surface);
  display: inline-grid; place-content: center; cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.sv-shell input[type="radio"]:checked { border-color: var(--sv-check-edge); border-width: 5px; }
.sv-shell input[type="radio"]:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sv-shell input[type="radio"]:disabled { opacity: .45; cursor: not-allowed; }

/* ── Switch. Blurple on-state is the one sanctioned non-Discord use. ─── */
.sv-shell .set-switch { width: 44px; height: 24px; }
.sv-shell .set-switch .set-knob {
  width: 18px; height: 18px; box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.sv-shell .set-switch.is-on .set-knob { transform: translateX(20px); }
.sv-shell .set-switch:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sv-shell .set-switch:disabled { opacity: .45; cursor: not-allowed; }

/* ── Slider: 5px track, 17px thumb with a 2px brand ring ─────────────── */
.sv-shell input[type="range"] {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 5px; border-radius: 999px;
  background: var(--sv-track); cursor: pointer;
}
.relay-page #volume {
  --range-progress: 100%;
  background:
    linear-gradient(to right, var(--sv-accent-line), var(--sv-accent-line))
      0 / var(--range-progress) 100% no-repeat,
    var(--sv-track);
}
.sv-shell input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 17px; height: 17px; border-radius: 50%;
  background: #fff; border: 2px solid var(--sv-accent-line);
  cursor: pointer;
}
.sv-shell input[type="range"]::-moz-range-thumb {
  width: 17px; height: 17px; border-radius: 50%;
  background: #fff; border: 2px solid var(--sv-accent-line); cursor: pointer;
}
.sv-shell input[type="range"]:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sv-shell input[type="range"]:disabled { opacity: .45; cursor: not-allowed; }

/* ── Segmented control: a radio group in disguise, 2 to 4 options ────── */
.sv-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--ctl-r); background: var(--sv-chip); }
.sv-seg button {
  padding: 7px 14px; border: none; border-radius: 6px; background: transparent;
  font: 600 12.5px var(--font-ui); color: var(--sv-txt-dim); cursor: pointer;
}
.sv-seg button.is-on { background: var(--sv-surface); color: var(--sv-txt); }

/* ── Multi-select tag ────────────────────────────────────────────────── */
.sv-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--sv-chip); border: 1px solid var(--sv-border);
  border-radius: 6px; padding: 4px 8px; font: 600 12px var(--font-ui);
  color: var(--sv-txt);
}
.sv-tag button { border: none; background: none; color: var(--sv-txt-dim); cursor: pointer; padding: 0; line-height: 1; }

/* Motion: honour the OS setting. */
@media (prefers-reduced-motion: reduce) {
  .sv-shell .btn, .sv-shell .sv-btn,
  .sv-shell input, .sv-shell select { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   ADMIN · BRANDING MOCKUP ALIGNMENT
   Owner tools keep their existing DOM/API hooks; this layer only changes
   presentation to match the dashboard and relay visual system.
   ══════════════════════════════════════════════════════════════════════ */
.admin-page {
  margin: 0;
  background: var(--sv-page);
  color: var(--sv-txt);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
.admin-page .admin-shell { min-height: 100vh; background: var(--sv-page); }
.admin-page .admin-side {
  width: 246px;
  padding: 16px 12px;
  background: var(--sv-side) !important;
  border-right: 1px solid var(--sv-border);
  color: var(--sv-txt-dim);
}
.admin-page .admin-brand {
  display: flex; align-items: center; gap: 11px;
  padding: 4px 6px 20px;
  color: var(--sv-txt); text-decoration: none;
}
.admin-page .admin-brand:hover { color: var(--sv-txt); }
.admin-page .admin-brand-logo {
  width: 36px; height: 36px; flex: none; overflow: hidden;
  display: grid; place-items: center;
  border-radius: 8px; background: #f5c84b;
}
.admin-page .admin-brand-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-page .admin-brand-copy { display: flex; flex-direction: column; line-height: 1.3; }
.admin-page .admin-brand-copy strong {
  font: 800 14px var(--font-display); letter-spacing: -.01em;
  text-transform: uppercase; color: var(--sv-txt);
}
.admin-page .admin-brand-copy small {
  font: 500 10.5px var(--font-mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--sv-txt-dim);
}
.admin-page .admin-nav { gap: 2px; }
.admin-page .nav-item {
  gap: 11px; min-height: 38px; padding: 9px 11px;
  border-radius: 8px; color: var(--sv-txt-dim);
  font: 500 14px var(--font-ui);
}
.admin-page .nav-item:hover { background: var(--sv-side-hover); color: var(--sv-txt); }
.admin-page .nav-item.active {
  background: var(--sv-side-active) !important;
  color: var(--sv-accent-line) !important; font-weight: 600;
  box-shadow: inset 2px 0 0 var(--sv-accent-line);
}
.admin-page .nav-item .ic-sm { width: 18px; height: 18px; flex: none; }
.admin-page .admin-side-foot { gap: 10px; padding-top: 12px; border-top: 1px solid var(--sv-border); }
.admin-page .admin-side-foot > a { font-size: 13px; }
.admin-page .admin-user {
  gap: 9px; min-height: 48px; padding: 8px;
  border: 1px solid var(--sv-border); border-radius: 10px;
  background: var(--sv-surface); color: var(--sv-txt);
}
.admin-page .admin-user::before {
  content: ''; width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: var(--sv-chip);
  box-shadow: inset 0 0 0 1px var(--sv-border);
}
.admin-page .admin-user #userName {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--sv-txt); font-size: 13px; font-weight: 600;
}
.admin-page .admin-user .btn { margin-left: auto; flex: none; }

.admin-page .admin-main { padding: 0 30px 44px; }
.admin-page .admin-topbar {
  height: 62px; min-height: 62px; margin: 0 -30px 26px; padding: 0 30px;
  border-bottom: 1px solid var(--sv-border); background: var(--sv-surface);
}
.admin-page .admin-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.admin-page .panel-title {
  font: 800 17px var(--font-display); letter-spacing: -.02em;
  color: var(--sv-txt); white-space: nowrap;
}
.admin-page .admin-owner-badge {
  padding: 4px 8px; border: 1px solid var(--sv-border); border-radius: 6px;
  color: var(--sv-txt-dim);
  font: 600 10.5px var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
}
.admin-page #refreshNote {
  color: var(--sv-green);
  font: 600 10.5px var(--font-mono); letter-spacing: .12em;
}
.admin-page .theme-toggle {
  width: 34px; min-width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--sv-border); border-radius: 8px;
  display: inline-grid; place-items: center; color: var(--sv-txt-dim);
}
.admin-page .theme-toggle:hover { color: var(--sv-txt); }
.admin-page .theme-toggle svg {
  display: block; width: 18px !important; height: 18px !important;
  min-width: 18px; min-height: 18px; overflow: visible;
}

.admin-page .admin-panel { width: 100%; max-width: none; margin: 0; }
.admin-page .card,
.admin-page .status-card,
.admin-page .instance-card {
  margin: 0;
  padding: 18px;
  background: var(--sv-surface) !important;
  border: 1px solid var(--sv-border) !important;
  border-radius: 12px;
  box-shadow: none;
}
.admin-page .card h2,
.admin-page .instance-card h2 {
  margin: 0; color: var(--sv-txt);
  font: 700 15px var(--font-display); letter-spacing: -.015em;
}
.admin-page .card-sub {
  color: var(--sv-txt-dim); font-size: 12.5px; line-height: 1.5;
}
.admin-page .status-card {
  margin-bottom: 14px; padding: 17px 18px;
  border-left: 3px solid var(--sv-border-hi) !important;
}
.admin-page .status-card:has(.pill-on) { border-left-color: var(--sv-green) !important; }
.admin-page .status-head { margin-bottom: 14px; }
.admin-page .status-head > div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-page .pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border: 0; border-radius: 6px;
  font: 600 10.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
}
.admin-page .pill-on { background: rgba(46, 158, 91, .12); color: var(--sv-green); }
.admin-page .pill-off { background: var(--sv-chip); color: var(--sv-txt-dim); }
.admin-page .guild { color: var(--sv-txt); font-size: 13px; font-weight: 600; }
.admin-page .status-meta {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0; margin-top: 0; padding: 0; background: transparent; border: 0;
}
.admin-page .meta-item {
  min-width: 0; padding: 2px 18px;
  border: 0; border-left: 1px solid var(--sv-border);
  border-radius: 0; background: transparent;
}
.admin-page .admin-shell .meta-item,
html[data-theme="dark"] .admin-page .admin-shell .meta-item {
  background: transparent !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
}
.admin-page .meta-item:first-child { padding-left: 0; border-left: 0; }
.admin-page .meta-label {
  color: var(--sv-txt-dim);
  font: 500 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  text-shadow: none; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision;
}
.admin-page .meta-val {
  margin-top: 3px; color: var(--sv-txt);
  font: 600 20px var(--font-mono); font-variant-numeric: tabular-nums;
  text-shadow: none; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision;
}

.admin-page .relay-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.admin-page .relay-col { gap: 10px; }
.admin-page .collapsible { padding: 0; overflow: clip; }
.admin-page .collapsible > .card-toggle {
  min-height: 54px; padding: 0 18px;
}
.admin-page .collapsible > .card-toggle::after {
  content: ''; width: 7px; height: 7px;
  border-right: 1.5px solid var(--sv-txt-dim);
  border-bottom: 1.5px solid var(--sv-txt-dim);
  transform: rotate(45deg); transition: transform .2s ease;
}
.admin-page .collapsible.collapsed > .card-toggle::after { transform: rotate(-45deg); }
.admin-page .collapsible > .card-body {
  margin: 0; padding: 0 18px 18px;
  border-top: 1px solid var(--sv-border);
}
.admin-page .collapsible > .card-body > .card-sub:first-child { margin-top: 14px; }
.admin-page .collapsible.collapsed > .card-body { padding-top: 0; padding-bottom: 0; border-top-color: transparent; }

.admin-page .fleet-list { gap: 6px; padding: 0; }
.admin-page .fleet-item,
.admin-page .ms-block {
  min-height: 44px; padding: 10px 12px;
  background: var(--sv-inset) !important;
  border: 1px solid var(--sv-border) !important;
  border-radius: 8px;
  color: var(--sv-txt); font-size: 13px;
}
.admin-page #mainServersList {
  max-height: 380px;
  gap: 8px;
  padding-right: 6px;
}
.admin-page #mainServersList > .ms-block {
  flex: 0 0 auto;
  min-height: max-content;
  padding: 12px;
}
.admin-page .ms-head { min-height: 22px; }
.admin-page .ms-head .fleet-worker {
  margin-left: auto; white-space: nowrap;
}
.admin-page .ms-sub {
  margin: 12px 0 7px;
  padding-left: 22px;
  color: var(--sv-txt-dim); opacity: 1;
  font: 600 9.5px/1.4 var(--font-mono); letter-spacing: .06em;
}
.admin-page .ms-workers {
  align-items: center;
  gap: 8px 16px;
  margin: 0;
  padding: 0 0 2px 22px;
}
.admin-page .ms-workers-req {
  padding-top: 1px;
}
.admin-page .ms-wchk {
  min-height: 22px;
  gap: 7px;
  white-space: nowrap;
  color: var(--sv-txt);
}
.admin-page .fleet-empty,
.admin-page .log-empty {
  padding: 16px; border: 1px dashed var(--sv-border); border-radius: 8px;
  background: transparent; color: var(--sv-txt-dim); font-size: 12.5px;
}
.admin-page .fleet-dot { width: 7px; height: 7px; flex: none; }
.admin-page .fleet-name { color: var(--sv-txt); font-weight: 600; }
.admin-page .fleet-meta,
.admin-page .fleet-worker { color: var(--sv-txt-dim); font-family: var(--font-mono); font-size: 11px; }
.admin-page .fleet-clear,
.admin-page .failed-x {
  color: var(--sv-txt-dim); border-radius: 6px;
}
.admin-page .fleet-clear:hover,
.admin-page .failed-x:hover { color: var(--sv-red); background: rgba(224, 72, 63, .12); }

.admin-page .worker-add { gap: 8px; }
.admin-page input:not([type="checkbox"]):not([type="range"]),
.admin-page select,
.admin-page textarea {
  min-height: 38px; padding: 8px 11px;
  border: 1px solid var(--sv-border) !important; border-radius: 8px;
  background: var(--sv-surface); color: var(--sv-txt);
  font: 500 13px var(--font-ui);
}
.admin-page input::placeholder,
.admin-page textarea::placeholder { color: var(--sv-txt-dim); opacity: .72; }
.admin-page input:focus,
.admin-page select:focus,
.admin-page textarea:focus {
  border-color: var(--sv-accent-line) !important;
  box-shadow: var(--focus-ring);
}
.admin-page .btn {
  min-height: 36px; padding: 0 13px; border-radius: 8px;
  font: 600 12.5px var(--font-ui);
}
.admin-page .btn-primary {
  background: var(--sv-accent); color: var(--sv-accent-txt);
  border-color: var(--sv-accent);
}
.admin-page .btn-primary:hover:not(:disabled) { background: var(--sv-accent); filter: brightness(.95); }
.admin-page .btn-ghost {
  background: transparent; color: var(--sv-txt-dim); border-color: var(--sv-border);
}
.admin-page .btn-ghost:hover { background: var(--sv-chip); color: var(--sv-txt); }
.admin-page .btn-danger { background: var(--sv-red); color: #fff; border-color: var(--sv-red); }

.admin-page .log-list { border: 0; border-radius: 0; background: transparent; }
.admin-page .log-item {
  grid-template-columns: 76px 64px minmax(0, 1fr);
  padding: 8px 2px; border-bottom: 1px solid var(--sv-border);
  color: var(--sv-txt); font: 500 11.5px/1.45 var(--font-mono);
}
.admin-page .log-time,
.admin-page .log-tag { color: var(--sv-txt-dim); }

.admin-page #panel-instances > .card,
.admin-page #panel-pages > .card { padding: 20px; }
.admin-page .instances-list { gap: 12px; margin-top: 16px; }
.admin-page .instance-card { padding: 18px; border-left: 3px solid var(--sv-green) !important; }
.admin-page .instance-card:hover { box-shadow: none; border-color: var(--sv-border-hi) !important; }
.admin-page .inst-stat,
.admin-page .inst-add-channels,
.admin-page .inst-cap-pick {
  background: var(--sv-inset); border: 1px solid var(--sv-border) !important; border-radius: 8px;
}
.admin-page .inst-stat-label,
.admin-page .inst-add-note,
.admin-page .inst-add-cat,
.admin-page .cap-chan-head {
  color: var(--sv-txt-dim); font-family: var(--font-mono); letter-spacing: .08em;
}
.admin-page input[type="range"] { accent-color: var(--sv-accent); }

.admin-page .pg-bar { margin: 18px 0 12px; padding-top: 16px; border-top: 1px solid var(--sv-border); }
.admin-page .pg-toolbar {
  padding: 6px; background: var(--sv-inset);
  border: 1px solid var(--sv-border); border-radius: 8px 8px 0 0;
}
.admin-page .pg-toolbar button {
  min-height: 30px; border: 0; border-radius: 6px;
  background: transparent; color: var(--sv-txt-dim);
}
.admin-page .pg-toolbar button:hover:not(:disabled) { background: var(--sv-surface); color: var(--sv-txt); }
.admin-page .pg-editor,
.admin-page .pg-html {
  border: 1px solid var(--sv-border) !important; border-top: 0 !important;
  border-radius: 0 0 8px 8px; background: var(--sv-surface); color: var(--sv-txt);
}

@media (max-width: 1080px) {
  .admin-page .relay-cols { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .admin-page .admin-shell { flex-direction: column; }
  .admin-page .admin-side {
    width: auto; height: auto; position: static;
    flex-direction: row; align-items: center; flex-wrap: wrap;
    gap: 10px; padding: 10px 14px;
    border-right: 0; border-bottom: 1px solid var(--sv-border);
  }
  .admin-page .admin-brand { margin-right: auto; padding: 0; }
  .admin-page .admin-nav { order: 3; flex: 1 1 100%; flex-direction: row; gap: 4px; margin: 0; }
  .admin-page .admin-nav .nav-item { width: auto; }
  .admin-page .admin-side-foot { margin-left: auto; padding: 0; border: 0; flex-direction: row; }
  .admin-page .admin-side-foot > a { display: none; }
  .admin-page .admin-user { min-height: 38px; padding: 3px 4px 3px 8px; }
  .admin-page .admin-user::before { display: none; }
  .admin-page .admin-main { padding: 0 20px 36px; }
  .admin-page .admin-topbar { margin: 0 -20px 20px; padding: 0 20px; }
}
@media (max-width: 600px) {
  .admin-page .admin-brand-copy small,
  .admin-page .admin-owner-badge,
  .admin-page .admin-user #userName { display: none; }
  .admin-page .admin-main { padding: 0 14px 28px; }
  .admin-page .admin-topbar { min-height: 54px; margin: 0 -14px 16px; padding: 0 14px; }
  .admin-page .admin-nav { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 1px; }
  .admin-page .admin-nav .nav-item { flex: 0 0 auto; font-size: 13px; padding: 8px 10px; }
  .admin-page .status-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 0; }
  .admin-page .meta-item:nth-child(3) { padding-left: 0; border-left: 0; }
  .admin-page .worker-add { align-items: stretch; flex-direction: column; }
  .admin-page .worker-add .btn { width: 100%; justify-content: center; }
  .admin-page .pg-bar-right { width: 100%; margin-left: 0; }
  .admin-page .pg-bar-right .btn { flex: 1; }
  .admin-page .log-item { grid-template-columns: 68px minmax(0, 1fr); }
  .admin-page .log-tag { display: none; }
  .admin-page .ms-head { flex-wrap: wrap; }
  .admin-page .ms-head .fleet-worker {
    order: 4; width: calc(100% - 22px); margin: 2px 0 0 22px;
    overflow: hidden; text-overflow: ellipsis;
  }
  .admin-page .ms-sub,
  .admin-page .ms-workers { padding-left: 0; }
}

/* ── Dashboard loading skeleton ────────────────────────────────────────
   Static shell + server rows keep the finished layout in place while the
   account and server requests are in flight. JS replaces these nodes. */
@keyframes sv-skeleton-pulse {
  0%, 100% { opacity: .58; }
  50% { opacity: 1; }
}
.sv-sk-block {
  display: block; margin: 0; border: 0; border-radius: 999px;
  background: var(--sv-chip);
  animation: sv-skeleton-pulse 1.35s ease-in-out infinite;
}
.sv-skeleton-side { pointer-events: none; }
.sv-sk-brand { display: flex; align-items: center; gap: 11px; padding: 4px 6px 20px; }
.sv-sk-logo { width: 36px; height: 36px; border-radius: 8px; flex: none; }
.sv-sk-copy { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.sv-sk-copy > :first-child { width: 112px; height: 11px; }
.sv-sk-copy > :last-child { width: 76px; height: 8px; }
.sv-sk-nav { display: flex; flex: 1; flex-direction: column; gap: 4px; }
.sv-sk-navrow { display: flex; align-items: center; gap: 11px; min-height: 38px; padding: 9px 11px; }
.sv-sk-navrow > i { width: 18px; height: 18px; flex: none; border-radius: 5px; }
.sv-sk-navrow > b { width: 82px; height: 10px; }
.sv-sk-foot { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--sv-border); }
.sv-sk-help { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--sv-border); border-radius: 12px; background: var(--sv-surface); }
.sv-sk-help > :first-child { width: 126px; height: 10px; }
.sv-sk-help > :last-child { width: 100%; height: 32px; border-radius: 8px; }
.sv-sk-user { display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 8px; border: 1px solid var(--sv-border); border-radius: 10px; background: var(--sv-surface); }
.sv-sk-user > i { width: 30px; height: 30px; flex: none; }
.sv-sk-user > b { width: 86px; height: 10px; }

.sv-skeleton-list { pointer-events: none; }
.sv-sk-card { min-height: 80px; }
.sv-sk-card::before { display: none; }
.sv-sk-card .sv-sk-avatar { width: 44px; height: 44px; border-radius: 12px; flex: none; }
.sv-sk-card .sv-sk-copy { flex: 1; }
.sv-sk-card .sv-sk-copy > :first-child { width: min(180px, 45%); height: 12px; }
.sv-sk-card .sv-sk-copy > :last-child { width: min(128px, 34%); height: 9px; }
.sv-sk-card .sv-sk-action { width: 96px; height: 40px; border-radius: 8px; flex: none; }
.sv-sk-card:nth-child(2n) .sv-sk-copy > :first-child { width: min(148px, 40%); }
.sv-sk-card:nth-child(3n) .sv-sk-copy > :last-child { width: min(166px, 38%); }

html[data-theme="dark"] .sv-sk-block { background: #282c34; }

@media (max-width: 820px) {
  .sv-skeleton-side { min-height: 58px; }
  .sv-skeleton-side .sv-sk-brand { padding: 0; margin-right: auto; }
  .sv-skeleton-side .sv-sk-nav { order: 3; flex: 1 1 100%; flex-direction: row; }
  .sv-skeleton-side .sv-sk-foot { flex-direction: row; padding: 0; border: 0; }
  .sv-skeleton-side .sv-sk-help,
  .sv-skeleton-side .sv-sk-foot > .sv-sk-navrow { display: none; }
  .sv-skeleton-side .sv-sk-user { min-height: 38px; padding: 3px 8px; }
}
@media (max-width: 560px) {
  .sv-sk-card { flex-wrap: wrap; min-height: 112px; }
  .sv-sk-card .sv-sk-action { width: 100%; height: 36px; }
  .sv-skeleton-side .sv-sk-navrow:nth-child(n+3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-sk-block { animation: none; opacity: .75; }
}

/* ══════════════════════════════════════════════════════════════════════
   PUBLIC DOCUMENTS · BRANDING MOCKUP ALIGNMENT
   Shared by /docs, /privacy and /terms. The article body remains editable;
   this is only the stable public shell and long-form reading system.
   ══════════════════════════════════════════════════════════════════════ */
.public-page {
  margin: 0; background: var(--sv-page); color: var(--sv-txt);
  font-family: var(--font-ui); -webkit-font-smoothing: antialiased;
}
.public-site-head {
  position: sticky; top: 0; z-index: 80;
  background: #f5c84b; color: #14161a;
  border-bottom: 1.5px solid #14161a;
}
.public-site-head-inner {
  width: 100%; max-width: 1180px; height: 64px; margin: 0 auto; padding: 0 30px;
  display: flex; align-items: center; gap: 12px;
}
.public-brand {
  display: inline-flex; align-items: center; gap: 12px;
  color: #14161a; text-decoration: none;
}
.public-brand:hover { color: #14161a; }
.public-brand-logo {
  width: 32px; height: 32px; flex: none; overflow: hidden;
  border: 1.5px solid #14161a; border-radius: 8px; background: #f5c84b;
}
.public-brand-logo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.public-brand strong {
  font: 800 15px var(--font-display); letter-spacing: -.02em; text-transform: uppercase;
}
.public-nav {
  display: flex; align-items: center; gap: 22px; margin-left: 34px;
  font: 600 12px var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
}
.public-nav a { color: #14161a; opacity: .66; text-decoration: none; }
.public-nav a:hover,
.public-nav a.is-active { color: #14161a; opacity: 1; }
.public-nav a.is-active { text-decoration: underline; text-underline-offset: 5px; }
.public-actions { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.public-theme {
  width: 32px; height: 32px; padding: 0;
  display: grid; place-items: center;
  border: 1.5px solid #14161a; border-radius: 8px;
  background: transparent; color: #14161a; cursor: pointer;
}
.public-theme:hover { background: rgba(20, 22, 26, .08); }
.public-theme:focus-visible { outline: 2px solid #14161a; outline-offset: 2px; }
.public-theme svg { display: block; width: 17px; height: 17px; }
.public-dashboard {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 15px;
  border-radius: 8px; background: #14161a; color: #f5c84b;
  text-decoration: none; font: 700 13px var(--font-ui);
}
.public-dashboard:hover { color: #f5c84b; background: #292c32; }

.public-page .legal-shell {
  display: block; height: auto; min-height: calc(100vh - 64px); overflow: visible;
  background: var(--sv-page);
}
.public-page .legal-shell .sv-main { min-height: calc(100vh - 64px); overflow: visible; }
.public-titlebar {
  height: 62px; border-bottom: 1px solid var(--sv-border); background: var(--sv-surface);
}
.public-titlebar-inner {
  width: 100%; max-width: 1180px; height: 100%; margin: 0 auto; padding: 0 30px;
  display: flex; align-items: center;
}
.public-titlebar h1 {
  margin: 0; color: var(--sv-txt);
  font: 700 17px var(--font-display); letter-spacing: -.015em;
}
.public-page .sv-content {
  width: 100%; max-width: 1180px; margin: 0 auto; padding: 26px 30px 34px;
  overflow: visible; overscroll-behavior: auto;
}
.public-page .doc-layout {
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 48px; max-width: none;
}
.public-page .doc-layout .legal { min-width: 0; max-width: none; margin: 0; }
.public-page:not(.public-page-docs) .doc-layout .legal { max-width: 760px; }
.public-page .legal h2 {
  margin-top: 34px; padding-top: 4px; color: var(--sv-txt);
  font: 700 21px var(--font-display); letter-spacing: -.02em;
}
.public-page .legal > .legal-intro + h2 { margin-top: 20px; }
.public-page .legal h3 {
  color: var(--sv-txt); font: 700 16.5px var(--font-display);
  scroll-margin-top: 82px;
}
.public-page .legal-intro {
  margin-bottom: 20px; color: var(--sv-txt-dim) !important; font-size: 13.5px;
}
.public-page .legal-num {
  display: inline-block; min-width: 26px; margin-right: 0;
  color: var(--sv-accent-line);
  font: 600 13px var(--font-mono); letter-spacing: 0;
}
.public-page .legal p,
.public-page .legal li { color: var(--sv-txt); }
.public-page .legal blockquote {
  background: var(--sv-surface); border: 1px solid var(--sv-border);
  border-left: 3px solid var(--sv-accent-line);
}
.public-page .legal table { background: var(--sv-surface); }
.public-page .legal th { background: var(--sv-chip); }
.public-page .doc-toc { top: 82px; max-height: calc(100vh - 104px); overflow-y: auto; }
.public-page .doc-toc-h {
  font: 700 11px var(--font-mono); letter-spacing: .14em;
}
.public-page .doc-toc a {
  color: var(--sv-txt-dim) !important;
  font-weight: 400;
  border-left-color: transparent;
}
.public-page .doc-toc a:hover { color: var(--sv-txt) !important; }
.public-page .doc-toc a.is-active {
  color: var(--sv-txt) !important;
  border-left-color: var(--sv-accent-line);
  font-weight: 600;
}
.public-page-docs .doc-toc a:not(.is-sub) {
  margin-top: 11px; color: var(--sv-txt) !important;
  font: 700 12px var(--font-ui); letter-spacing: .01em;
}
.public-page-docs .doc-toc a:not(.is-sub):first-child { margin-top: 0; }
.public-page-docs .doc-toc a.is-sub { padding-left: 24px; }
.public-page .page-foot {
  max-width: none; margin-top: 48px; color: var(--sv-txt-dim);
}

@media (max-width: 1000px) {
  .public-page .doc-layout { grid-template-columns: minmax(0, 1fr); }
  .public-page .doc-toc { display: none; }
  .public-page:not(.public-page-docs) .doc-layout .legal { max-width: 820px; }
}
@media (max-width: 760px) {
  .public-site-head-inner { padding: 0 18px; }
  .public-nav { margin-left: 18px; gap: 14px; }
  .public-titlebar-inner { padding: 0 20px; }
  .public-page .sv-content { padding: 22px 20px 30px; }
}
@media (max-width: 560px) {
  .public-site-head-inner { height: 58px; padding: 0 14px; }
  .public-brand strong { font-size: 13px; }
  .public-nav { display: none; }
  .public-dashboard { min-height: 34px; padding: 0 11px; font-size: 12px; }
  .public-theme { width: 30px; height: 30px; }
  .public-titlebar { height: 54px; }
  .public-titlebar-inner { padding: 0 14px; }
  .public-page .legal-shell,
  .public-page .legal-shell .sv-main { min-height: calc(100vh - 58px); }
  .public-page .sv-content { padding: 18px 14px 26px; }
  .public-page .legal { font-size: 14px; line-height: 1.65; }
  .public-page .legal h2 { font-size: 19px; }
  .public-page .legal-tablewrap { margin-left: -14px; margin-right: -14px; padding: 0 14px; }
  .public-page .page-foot { margin-top: 34px; }
}

/* Documentation content from Documentation.dc.html. */
.doc-step-list { display: flex; flex-direction: column; gap: 12px; margin: 0 0 22px; }
.doc-step {
  display: flex; gap: 14px; padding: 14px 16px;
  border: 1px solid var(--sv-border); border-radius: 12px; background: var(--sv-surface);
}
.doc-step > span {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--ink); color: var(--brand);
  font: 700 12.5px var(--font-mono);
}
html[data-theme="dark"] .doc-step > span { background: var(--brand-hi); color: var(--ink-bold); }
.doc-step strong { display: block; margin-bottom: 3px; font-size: 14px; }
.doc-step p { margin: 0; color: var(--sv-txt-dim) !important; font-size: 13.5px; }

.doc-command-grid,
.doc-trouble-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; margin: 0 0 14px;
}
.doc-command,
.doc-trouble-grid > div {
  padding: 14px 16px; border: 1px solid var(--sv-border);
  border-radius: 12px; background: var(--sv-surface);
}
.public-page .legal .doc-command code {
  display: inline-block; margin-bottom: 6px; padding: 3px 9px;
  background: var(--ink); color: var(--brand); font: 600 13px var(--font-mono);
}
html[data-theme="dark"] .public-page .legal .doc-command code {
  background: var(--brand-hi); color: var(--ink-bold);
}
.doc-command > span {
  margin-left: 8px; color: var(--sv-warn);
  font: 500 11px var(--font-mono);
}
.doc-command p,
.doc-trouble-grid p { margin: 0; color: var(--sv-txt-dim) !important; font-size: 13px; }
.doc-trouble-grid { margin-bottom: 22px; }
.doc-trouble-grid strong { display: block; margin-bottom: 3px; font-size: 14px; }
.doc-muted { margin-bottom: 22px !important; color: var(--sv-txt-dim) !important; font-size: 13.5px; }
.doc-checklist { margin: 0 0 18px !important; padding: 0 !important; list-style: none !important; }
.doc-checklist li { position: relative; margin: 0 !important; padding: 7px 0 7px 27px; }
.doc-checklist li::before {
  content: '\2713'; position: absolute; left: 0; top: 7px;
  width: 17px; height: 17px; display: grid; place-items: center;
  border-radius: 50%; background: color-mix(in srgb, var(--sv-green) 16%, transparent);
  color: var(--sv-green); font: 800 11px var(--font-ui);
}
.doc-control-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0; margin: 0 0 22px; overflow: hidden;
  border: 1px solid var(--sv-border); border-radius: 12px; background: var(--sv-surface);
}
.doc-control-list > div { padding: 14px 16px; }
.doc-control-list > div:nth-child(even) { border-left: 1px solid var(--sv-border); }
.doc-control-list > div:nth-child(n+3) { border-top: 1px solid var(--sv-border); }
.doc-control-list strong { display: block; margin-bottom: 3px; font-size: 14px; }
.doc-control-list p { margin: 0; color: var(--sv-txt-dim) !important; font-size: 13px; }

.doc-discord {
  margin: 0 0 22px; padding: 20px; border: 1px solid var(--sv-border);
  border-radius: 12px; background: #1e1f22; color: #dbdee1;
  font-size: 14px;
}
.doc-discord-row { display: flex; gap: 14px; }
.doc-discord-avatar {
  width: 40px; height: 40px; flex: none; overflow: hidden;
  border-radius: 50%; background: #f5c84b;
}
.doc-discord-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.doc-discord-body { flex: 1; min-width: 0; }
.doc-discord-author { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.doc-discord-author strong { color: #fff; font-size: 15px; }
.doc-discord-author > span {
  padding: 2px 5px; border-radius: 4px; background: #5865f2; color: #fff;
  font: 600 10px var(--font-ui);
}
.doc-discord-author small { color: #949ba4; font-size: 11.5px; }
.doc-discord-embed {
  padding: 14px 16px; border-left: 4px solid #949ba4;
  border-radius: 5px; background: #2b2d31;
}
.doc-discord-embed > strong { display: block; margin-bottom: 9px; color: #fff; font-size: 15.5px; }
.doc-discord-embed > div { line-height: 1.5; }
.doc-discord-embed b { color: #fff; }
.doc-discord-embed small { display: block; margin-top: 11px; color: #b5bac1; font-size: 12.5px; font-weight: 600; }
.doc-discord-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.doc-discord-buttons span {
  padding: 8px 15px; border-radius: 3px; background: #4e5058; color: #fff;
  font: 600 14px var(--font-ui);
}
.doc-discord-buttons .is-start { background: #248046; }
.doc-discord-buttons .is-stop { background: #da373c; }
.doc-discord-select {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; padding: 11px 14px; border-radius: 4px; background: #2b2d31;
}
.doc-discord-select span { color: #949ba4; }

.doc-flow-list {
  margin: 0 0 22px; overflow: hidden;
  border: 1px solid var(--sv-border); border-radius: 12px; background: var(--sv-surface);
}
.doc-flow-list > div { display: flex; align-items: center; gap: 12px; padding: 13px 16px; }
.doc-flow-list > div + div { border-top: 1px solid var(--sv-border); }
.doc-flow-list span { color: var(--sv-txt); font-size: 13.5px; }
.doc-flow-list b {
  margin-left: auto; color: var(--sv-txt-dim);
  font: 600 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
}
.doc-flow-list .is-two { color: var(--sv-accent-line); }
.doc-flow-list .is-one { color: var(--sv-green); }

@media (max-width: 640px) {
  .doc-command-grid,
  .doc-trouble-grid,
  .doc-control-list { grid-template-columns: 1fr; }
  .doc-control-list > div:nth-child(even) { border-left: 0; }
  .doc-control-list > div + div { border-top: 1px solid var(--sv-border); }
  .doc-discord { padding: 14px; }
  .doc-discord-row { gap: 10px; }
  .doc-discord-avatar { width: 34px; height: 34px; }
  .doc-discord-buttons span { flex: 1 1 calc(50% - 4px); text-align: center; }
}