/* ============================================================
   BadgerOS — visual system
   Palette and structure follow the official BadgerOS brand kit:
   near-black graphite surfaces, hairline steel borders, and a
   controlled violet accent used for the live/primary state.
   ============================================================ */

[hidden] { display: none !important; }

:root {
  --accent-rgb:     107, 70, 255;
  --edge-rgb:       45, 45, 54;
  --ink:            #09080d;
  --ink-2:          #0b0a10;
  --surface:        #121218;
  --surface-2:      #191920;
  --surface-3:      #202029;
  --rail:           #09080d;
  --well:           #0a0910;   /* inputs, code wells, sunken panels */

  --brass:          #41414d;
  --brass-soft:     #2d2d36;
  --gold:           #6b46ff;
  --gold-bright:    #9b7dff;
  --gold-dim:       #4a2ad1;
  --gold-glass:     rgba(var(--accent-rgb), .10);

  --text:           #ffffff;
  /* Alias, kept in every theme via this single fallback: a handful of rules
     use --text-1, and an undefined custom property makes `color` fall back
     to *inherited* -- not the theme color -- so chips, AI bubbles and
     btn-ghost hovers picked up whatever their parent happened to be. */
  --text-1:         var(--text);
  --text-2:         #a7a7b3;
  --text-3:         #72727f;

  --green:          #4fca8b;
  --green-dim:      #1f4c37;
  --red:            #e2564f;
  --red-dim:        #4d1f1d;
  --amber:          #e8a13c;
  --blue:           #6aa6f0;
  --violet:         #a683e8;

  --radius:         14px;
  --radius-sm:      9px;
  --gap:            16px;

  --sans: "Inter", "Segoe UI", system-ui, -apple-system, "Noto Sans", Ubuntu, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Code", "SF Mono", "Noto Sans Mono", ui-monospace, monospace;

  --titlebar:       linear-gradient(180deg, #14110c, #0c0a08);
  --ribbon:         rgba(8, 7, 6, .9);
  --topbar:         linear-gradient(180deg, rgba(23, 20, 16, .8), rgba(12, 10, 8, .8));
  --terminal:       #050509;
  --terminal-text:  #e3e3ea;
  --scrim:          rgba(5, 4, 3, .74);

  --shadow-card: 0 1px 0 rgba(255, 255, 255, .04) inset,
                 0 18px 40px -24px rgba(0, 0, 0, .9);
  --edge: 1px solid var(--brass-soft);
  color-scheme: dark;
}

html[data-theme="obsidian"] {
  --accent-rgb: 164, 174, 202;
  --edge-rgb: 63, 69, 92;
  --ink: #05060a; --ink-2: #080a10; --surface: #0d1018; --surface-2: #121622;
  --surface-3: #181d2b; --rail: #080a11; --brass: #4a536e; --brass-soft: #293047;
  --gold: #a4aeca; --gold-bright: #e1e7f7; --gold-dim: #7d89aa;
  --gold-glass: rgba(var(--accent-rgb), .10); --text: #edf0f8; --text-2: #b4bdd2; --text-3: #76819b;
}

html[data-theme="nether"] {
  --accent-rgb: 244, 112, 67;
  --edge-rgb: 111, 42, 30;
  --ink: #0b0303; --ink-2: #120504; --surface: #1a0907; --surface-2: #250d09;
  --surface-3: #32120c; --rail: #120504; --brass: #7b3020; --brass-soft: #481b14;
  --gold: #f47043; --gold-bright: #ffd0a5; --gold-dim: #c75432;
  --gold-glass: rgba(var(--accent-rgb), .11); --text: #ffe8da; --text-2: #dbad98; --text-3: #9e6d5b;
}

html[data-theme="ender"] {
  --accent-rgb: 190, 104, 255;
  --edge-rgb: 74, 39, 103;
  --ink: #06030b; --ink-2: #0c0612; --surface: #130b1d; --surface-2: #1b1029;
  --surface-3: #251538; --rail: #0c0612; --brass: #603881; --brass-soft: #38214e;
  --gold: #be68ff; --gold-bright: #ead0ff; --gold-dim: #9851c9;
  --gold-glass: rgba(var(--accent-rgb), .11); --text: #f5eaff; --text-2: #c8abd9; --text-3: #897099;
  --green: #54e0bb;
}

html[data-theme="frost"] {
  --accent-rgb: 92, 194, 238;
  --edge-rgb: 35, 82, 108;
  --ink: #02080d; --ink-2: #040d14; --surface: #08141d; --surface-2: #0c1b27;
  --surface-3: #112634; --rail: #050f17; --brass: #285b75; --brass-soft: #16394d;
  --gold: #5cc2ee; --gold-bright: #c9efff; --gold-dim: #4698bd;
  --gold-glass: rgba(var(--accent-rgb), .10); --text: #e5f7ff; --text-2: #a5cedf; --text-3: #668c9e;
}


/* Daylight -- the first light theme. A dark UI is a preference, not a
   universal: people run panels next to a window, on a laptop outdoors, or
   simply prefer light. The surface ramp inverts (ink is the lightest, not
   the darkest) and a few effects that only make sense on dark -- inset
   highlights, glows -- are neutralised below. */
html[data-theme="daylight"] {
  --accent-rgb: 92, 58, 214;
  --edge-rgb: 206, 208, 219;
  --ink: #f6f6f9; --ink-2: #ffffff; --surface: #ffffff; --surface-2: #f2f3f7;
  --surface-3: #e8eaf1; --rail: #ffffff;
  --brass: #c2c5d2; --brass-soft: #d9dbe5;
  --gold: #5c3ad6; --gold-bright: #4227b8; --gold-dim: #ded7fb;
  --gold-glass: rgba(var(--accent-rgb), .08);
  --text: #14141c; --text-2: #43434f; --text-3: #5e5e70;
  --green: #1a8f5a; --green-dim: #cdeeda;
  --red: #c33a33; --red-dim: #f6d7d5;
  --amber: #9a6512; --blue: #2f6fc4; --violet: #6b46c9;
  --shadow-card: 0 1px 2px rgba(20, 20, 28, .06),
                 0 10px 26px -18px rgba(20, 20, 28, .28);
  --well: #eef0f5;
  --titlebar: linear-gradient(180deg, #ffffff, #f2f3f7);
  --ribbon: rgba(255, 255, 255, .92);
  --topbar: linear-gradient(180deg, #ffffff, #f7f8fb);
  /* The console stays dark even on the light theme: server output is
     ANSI-coloured for a dark background and washes out on white. */
  --terminal: #14141c; --terminal-text: #e8e8ef;
  --scrim: rgba(20, 20, 28, .45);
  color-scheme: light;
}
/* On light, a translucent-white inset reads as a smear rather than a
   highlight, and dark glows turn into grey haze. */
html[data-theme="daylight"] .login-aurora { opacity: .18; }
/* The console keeps its dark --terminal background on Daylight (see the
   token comment above): --terminal-text stays near-white, so a light
   surface here rendered white-on-white and every ordinary log line
   vanished. */
html[data-theme="daylight"] .titlebar,
html[data-theme="daylight"] .sidebar { background: var(--surface-2); }

/* Moss -- a calm, low-saturation dark green. The existing dark themes are
   all cool blue/violet or hot orange; this is the restful one. */
html[data-theme="moss"] {
  --accent-rgb: 122, 184, 122;
  --edge-rgb: 47, 66, 50;
  --ink: #060907; --ink-2: #0a0f0b; --surface: #101711; --surface-2: #161f18;
  --surface-3: #1d2a20; --rail: #0a0f0b; --brass: #3f5a44; --brass-soft: #263629;
  --gold: #7ab87a; --gold-bright: #cdeccd; --gold-dim: #4f8a55;
  --gold-glass: rgba(var(--accent-rgb), .10);
  --text: #eaf4ea; --text-2: #a9c2ac; --text-3: #718a76;
  --amber: #d7a94a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

body {
  background:
    radial-gradient(1100px 620px at 18% -8%, rgba(var(--accent-rgb), .10), transparent 60%),
    radial-gradient(900px 520px at 96% 4%, rgba(var(--accent-rgb), .06), transparent 62%),
    var(--ink);
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button { touch-action: manipulation; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: .01em; }
small { font-size: .82em; }
code { font-family: var(--mono); font-size: .9em; color: var(--gold-dim); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}
.skip-link { position: fixed; z-index: 1000; left: 12px; top: 8px; transform: translateY(-160%); padding: 9px 13px; border-radius: var(--radius-sm); background: var(--gold-bright); color: var(--ink); font-weight: 700; }
.skip-link:focus { transform: none; }
::selection { background: rgba(var(--accent-rgb), .32); color: var(--text); }

.micro-label {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ─────────────────────────  SIGN IN  ───────────────────────── */

.login-screen {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 40;
}

.login-aurora {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 380px at 50% 12%, rgba(var(--accent-rgb), .16), transparent 70%),
    radial-gradient(420px 300px at 50% 100%, rgba(var(--accent-rgb), .07), transparent 70%);
  pointer-events: none;
}

.login-card {
  position: relative;
  width: min(400px, 100%);
  padding: 34px 30px 30px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 14px;
}

.login-mark { width: 74px; height: 74px; margin: 0 auto 2px; object-fit: contain; }
/* The lockup is wide rather than square, so it needs its own box -- reusing
   the 74x74 emblem slot would letterbox it into illegibility. */
.login-lockup {
  width: min(300px, 76vw);
  height: auto;
  margin: 0 auto 4px;
  display: block;
}
/* The lockup already carries both the product name and the descriptor
   ("MINECRAFT SERVER CONTROL PANEL"), so the heading and subtitle under it
   would be a second, smaller copy of words already on screen. */
.login-lockup + .login-title,
.login-lockup + .login-title + .login-sub { display: none; }
.login-title { text-align: center; font-size: 24px; letter-spacing: .06em; color: var(--gold-bright); }
.login-sub { margin: -6px 0 8px; text-align: center; color: var(--text-3); font-size: 13px; }
.login-error {
  margin: 0;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: rgba(226, 86, 79, .12);
  border: 1px solid var(--red-dim);
  color: #f2a9a4;
  font-size: 13px;
}
.login-hint { margin: 4px 0 0; text-align: center; color: var(--text-3); font-size: 12px; }
.signup-card { width: min(520px, 100%); max-height: calc(100dvh - 28px); overflow-y: auto; }
.signup-mark { width: 58px; height: 58px; }
.signup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

@media (max-width: 560px) {
  .login-screen { padding: 12px; align-items: start; overflow-y: auto; }
  .login-card { padding: 24px 20px 22px; margin-block: auto; }
  .signup-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────  SHELL  ───────────────────────── */

.app { display: flex; flex-direction: column; height: 100%; }

.titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px;
  height: 42px;
  flex: none;
  background: var(--titlebar);
  border-bottom: var(--edge);
}
.titlebar-brand { display: flex; align-items: center; gap: 10px; }
.titlebar-crown { color: var(--gold); font-size: 13px; }
.titlebar-name {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-dim);
}
.titlebar-meta { display: flex; gap: 14px; align-items: center; }
.titlebar-clock, .titlebar-version {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
}

.shell { display: flex; flex: 1; min-height: 0; }

/* ─────────────────────────  SIDEBAR  ───────────────────────── */

.sidebar {
  width: 234px;
  flex: none;
  background: linear-gradient(180deg, var(--rail), #080706);
  border-right: var(--edge);
  display: flex;
  flex-direction: column;
  padding: 14px 12px;
  overflow-y: auto;
}

.sidebar-close { display: none; }

.nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }

.nav-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text-2);
  font-size: 14px;
  text-align: left;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.nav-item:hover { background: rgba(var(--accent-rgb), .06); color: var(--text); }
.nav-item.is-active {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .04));
  border-color: var(--brass);
  color: var(--gold-bright);
}
.nav-glyph { width: 18px; text-align: center; color: var(--gold-dim); font-size: 13px; }
.nav-item.is-active .nav-glyph { color: var(--gold); }

.sidebar-foot { margin-top: auto; padding-top: 14px; }
.netstat {
  border: var(--edge);
  border-radius: var(--radius-sm);
  background: rgba(var(--accent-rgb), .03);
  padding: 12px;
}
.netstat-title {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 9px;
}
.netstat-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
  font-size: 12px;
  color: var(--text-3);
}
.netstat-row b { color: var(--gold); font-family: var(--mono); font-weight: 500; }

/* ─────────────────────────  MAIN  ───────────────────────── */

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: var(--edge);
  background: var(--topbar);
  flex: none;
}

.server-ribbon {
  flex: none;
  display: flex;
  justify-content: center;
  padding: 10px 18px 11px;
  border-bottom: var(--edge);
  background: var(--ribbon);
}

.menu-btn { display: none; }

.icon-btn {
  background: var(--surface-2);
  border: var(--edge);
  border-radius: var(--radius-sm);
  color: var(--gold);
  padding: 8px 11px;
}

.server-switch {
  display: flex;
  justify-content: center;
  gap: 8px;
  overflow-x: auto;
  flex: 0 1 980px;
  min-width: 0;
  width: 100%;
  scrollbar-width: thin;
  padding-bottom: 2px;
}

.server-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  white-space: nowrap;
  background: var(--surface);
  border: var(--edge);
  border-radius: 999px;
  color: var(--text-2);
  font-size: 13px;
  transition: border-color .14s ease, color .14s ease, background .14s ease;
  min-width: min(250px, 30%);
  justify-content: center;
}
.server-pill:hover { border-color: var(--brass); color: var(--text); }
.server-pill.is-active {
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .18), rgba(var(--accent-rgb), .05));
  border-color: var(--gold-dim);
  color: var(--gold-bright);
}
.server-pill .dot { width: 7px; height: 7px; }
.server-pill-kind {
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}

.topbar-actions { display: flex; align-items: center; gap: 10px; flex: none; }

.theme-picker {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-3);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.theme-picker select {
  width: 126px;
  padding: 7px 26px 7px 9px;
  border: var(--edge);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 8px 5px 5px;
  background: var(--surface);
  border: var(--edge);
  border-radius: 999px;
}
.user-avatar {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--gold), var(--gold-dim));
  color: #ffffff;
  font-weight: 700;
  font-size: 12px;
}
.user-meta { display: flex; flex-direction: column; line-height: 1.15; }
.user-meta b { font-size: 12px; color: var(--text); }
.user-meta small { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }

.content { flex: 1; overflow-y: auto; padding: 18px; }
.view { display: grid; gap: var(--gap); }

.dashboard-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 48px;
  padding: 9px 13px;
  border: 1px solid rgba(var(--edge-rgb), .55);
  border-radius: var(--radius-sm);
  background: rgba(var(--accent-rgb), .035);
}
.dashboard-toolbar-copy { display: grid; gap: 3px; min-width: 0; }
.dashboard-toolbar-copy strong { color: var(--text-2); font-size: 12px; font-weight: 500; }
.dashboard-toolbar-actions { display: flex; gap: 8px; flex: none; }

.network-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 17px;
  background:
    linear-gradient(90deg, rgba(var(--accent-rgb), .12), transparent 50%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
}
.network-controls-copy { min-width: 0; display: grid; gap: 3px; }
.network-controls-copy strong { color: var(--gold-bright); font-size: 16px; }
.network-controls-copy small { color: var(--text-3); line-height: 1.35; }
.network-controls-actions { display: flex; align-items: center; gap: 9px; flex: none; }

/* ─────────────────────────  CARDS  ───────────────────────── */

.card {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  min-width: 0;
}

.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  align-items: start;
}
.dashboard-card { position: relative; align-self: start; transition: opacity .16s ease, border-color .16s ease; }
.dashboard-card.card-span-full { grid-column: 1 / -1; }
.dashboard-card.card-span-half { grid-column: span 2; }
.dashboard-card[data-card-size="normal"] { grid-column: span 1; }
.dashboard-card[data-card-size="half"] { grid-column: span 2; }
.dashboard-card[data-card-size="full"] { grid-column: 1 / -1; }
.dashboard-card-handle {
  display: none;
  position: absolute;
  z-index: 5;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: min(180px, calc(100% - 20px));
  min-height: 29px;
  padding: 4px 10px;
  border: 1px solid var(--brass);
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--gold);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: grab;
  touch-action: none;
  user-select: none;
  box-shadow: 0 8px 20px -12px #000;
}
.dashboard-card-handle:active { cursor: grabbing; }
.dashboard-cards[data-layout-locked="false"] .dashboard-card {
  padding-top: 42px;
  border-color: var(--brass);
}
.dashboard-cards[data-layout-locked="false"] .dashboard-card-handle { display: flex; }
.dashboard-card.is-dragging { opacity: .34; border-style: dashed; }
.dashboard-card-resize { display: none; position: absolute; z-index: 6; right: 3px; bottom: 3px; width: 25px; height: 25px; border: 0; border-right: 2px solid var(--gold-dim); border-bottom: 2px solid var(--gold-dim); border-radius: 0 0 7px 0; background: transparent; cursor: ew-resize; touch-action: none; }
.dashboard-cards[data-layout-locked="false"] .dashboard-card-resize { display: block; }
.dashboard-card.is-resizing { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .14); }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(var(--edge-rgb), .5);
}
.card-head h2 {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-dim);
  display: flex;
  align-items: baseline;
  gap: 9px;
}
.card-head h2 small { letter-spacing: 0; text-transform: none; color: var(--text-2); font-size: 12px; }
.card-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.card-tag {
  font-family: var(--mono);
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--gold-glass);
  border: 1px solid var(--brass-soft);
  color: var(--gold);
}

.grid-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--gap);
}

.grid-quad {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  align-items: start;
}
.card-wide { grid-column: 1 / -1; }

/* Server status */
.status-body { padding: 18px 16px; display: grid; gap: 16px; }
.status-flag { display: flex; align-items: center; gap: 11px; }
.status-word {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--green);
}
.status-word[data-state="STOPPED"] { color: var(--text-3); }
.status-word[data-state="ERROR"]   { color: var(--red); }
.status-word[data-state="STARTING"],
.status-word[data-state="STOPPING"] { color: var(--amber); }
.status-word[data-state="ADOPTED"] { color: var(--blue); }

.dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--text-3);
  flex: none;
}
.dot[data-state="RUNNING"] { background: var(--green); box-shadow: 0 0 0 4px rgba(79, 202, 139, .16); }
.dot[data-state="ERROR"]   { background: var(--red);   box-shadow: 0 0 0 4px rgba(226, 86, 79, .16); }
.dot[data-state="STARTING"], .dot[data-state="STOPPING"] {
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(232, 161, 60, .16);
  animation: pulse 1.5s ease-in-out infinite;
}
.dot[data-state="ADOPTED"] { background: var(--blue); box-shadow: 0 0 0 4px rgba(106, 166, 240, .16); }

@keyframes pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none !important; } }

.status-facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.status-facts div { min-width: 0; }
.status-facts dt {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 3px;
}
.status-facts dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
  overflow-wrap: anywhere;
}

.status-issue {
  margin: 0;
  padding: 11px 16px;
  background: rgba(232, 161, 60, .08);
  border-top: 1px solid rgba(232, 161, 60, .22);
  color: #edc383;
  font-size: 12.5px;
}

/* Quick actions */
.card-actions { display: flex; flex-direction: column; }
.action-grid {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.action {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 15px 8px;
  background: linear-gradient(180deg, var(--surface-3), var(--surface));
  border: var(--edge);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: 12px;
  transition: transform .12s ease, border-color .12s ease, color .12s ease;
}
.action:hover:not(:disabled) {
  border-color: var(--gold-dim);
  color: var(--gold-bright);
  transform: translateY(-1px);
}
.action:disabled { opacity: .38; cursor: not-allowed; }
.action-glyph { font-size: 17px; color: var(--gold); }
.action-danger:hover:not(:disabled) { border-color: var(--red); color: #f0a29c; }
.action-danger .action-glyph { color: var(--red); }

.action-network { margin-top: auto; padding: 14px 16px; border-top: 1px solid rgba(var(--edge-rgb), .5); }
.action-network-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }

/* Stat strip */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
  gap: var(--gap);
}
.stat {
  padding: 13px 15px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  min-width: 0;
}
.stat-label {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.stat-value {
  margin-top: 7px;
  font-family: var(--mono);
  font-size: 23px;
  font-weight: 500;
  color: var(--gold-bright);
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.stat-value .unit { font-size: 12px; color: var(--text-3); margin-left: 3px; }
.stat-sub { margin-top: 5px; font-size: 11px; color: var(--text-3); }

/* ─────────────────────────  CONSOLE  ───────────────────────── */

.console-surface {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  background: var(--terminal);
  color: var(--terminal-text);
  padding: 12px 14px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-top: 1px solid rgba(var(--edge-rgb), .4);
}
.console-mini { height: 268px; }
.console-full { height: min(58vh, 640px); }
.console-combined { height: clamp(230px, 36vh, 430px); }

#ai-transcript { height: min(55vh, 520px); display: flex; flex-direction: column; gap: 8px; white-space: normal; }
.ai-message { padding: 9px 12px; border-radius: var(--radius-sm); font-size: 13.5px; line-height: 1.5; max-width: 80%; }
.ai-message-user { align-self: flex-end; background: var(--gold-dim, #3a2f10); color: var(--text-1); }
.ai-message-assistant { align-self: flex-start; background: var(--surface-2); color: var(--text-1); }
.ai-message-tool, .ai-message-tool-result {
  align-self: stretch; max-width: 100%; font-family: var(--mono); font-size: 11.5px;
  background: #050509; color: var(--text-3); border: var(--edge);
}

/* ─────────────────────────  AI AGENT MESSENGER  ───────────────────────── */
/* A Facebook-Messenger-style floating chat, present on every screen (not
   just one dashboard view). See the TOASTS block below for how the toast
   stack is shifted out of this same corner to avoid overlapping it. */

.ai-messenger { position: fixed; right: 24px; bottom: 24px; z-index: 65; }

.ai-messenger-fab {
  width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--gold-bright), var(--gold-dim));
  color: var(--ink); box-shadow: 0 14px 32px -12px #000, 0 0 0 1px rgba(var(--edge-rgb), .5);
  transition: transform .15s ease;
}
.ai-messenger-fab:hover { transform: scale(1.06); }
.ai-messenger-fab .ico { width: 26px; height: 26px; }
.ai-messenger.is-open .ai-messenger-fab { transform: scale(0.001); position: absolute; pointer-events: none; }

.ai-messenger-panel {
  position: absolute; right: 0; bottom: 0;
  width: min(380px, calc(100vw - 48px));
  height: min(560px, calc(100vh - 120px));
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: var(--edge); border-radius: var(--radius);
  box-shadow: 0 30px 70px -22px #000;
  overflow: hidden;
}

.ai-messenger-head {
  display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 14px;
  border-bottom: 1px solid rgba(var(--edge-rgb), .4); flex: none;
}
.ai-messenger-head select { flex: 1; min-width: 0; }
.ai-messenger-head-actions { display: flex; gap: 4px; flex: none; }

/* Give the panel a face and a name. A bare server dropdown reads like a
   config form; this reads like someone you're talking to. */
.ai-messenger-identity { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.ai-messenger-avatar {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: #1a1508;
  background: linear-gradient(135deg, var(--gold, #e8b84b), #d19b2a);
}
.ai-messenger-title { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ai-messenger-title strong { font-size: 13.5px; line-height: 1.2; }
.ai-messenger-title select {
  background: none; border: 0; padding: 0; height: auto;
  font-size: 11.5px; color: var(--text-3); cursor: pointer; max-width: 100%;
}

/* Empty-conversation greeting + one-tap openers. */
.ai-greeting { padding: 18px 4px; display: flex; flex-direction: column; gap: 8px; }
.ai-greeting-hi { margin: 0; font-size: 15px; font-weight: 650; color: var(--text-1); }
.ai-greeting-sub { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-3); }
.ai-greeting-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ai-chip {
  border: 1px solid rgba(var(--edge-rgb), .8); background: var(--surface-2);
  color: var(--text-2); border-radius: 999px; padding: 6px 11px;
  font-size: 12px; cursor: pointer; text-align: left; line-height: 1.35;
}
.ai-chip:hover { border-color: var(--gold, #e8b84b); color: var(--text-1); }

/* "Badger is working…" while a turn runs tool calls. */
.ai-typing { display: flex; align-items: center; gap: 5px; padding: 8px 12px; align-self: flex-start; }
.ai-typing-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--text-3);
  animation: ai-typing-bounce 1.2s infinite ease-in-out;
}
.ai-typing-dot:nth-child(2) { animation-delay: .15s; }
.ai-typing-dot:nth-child(3) { animation-delay: .3s; }
.ai-typing-label { font-size: 12px; color: var(--text-3); margin-left: 4px; }
@keyframes ai-typing-bounce {
  0%, 60%, 100% { opacity: .35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-typing-dot { animation: none; opacity: .6; }
}

/* A failed send is part of the conversation, not just a corner toast. */
.ai-message-error {
  align-self: flex-start; background: rgba(200, 70, 70, .14);
  border: 1px solid rgba(200, 70, 70, .4); color: var(--text-1);
}

.ai-messenger-transcript { flex: 1; height: auto; min-height: 0; border-top: 0; }
.ai-messenger-unavailable { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center; }
.ai-messenger-panel .console-input { flex: none; }

.console-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  align-items: start;
}
.console-card .console-surface { height: clamp(260px, 38vh, 500px); }
.console-card .card-head { min-height: 58px; }
.console-card .card-head h2 { min-width: 0; }
.console-card .card-head h2 small {
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.console-prefix {
  display: inline-block;
  min-width: 9ch;
  margin-right: 8px;
  color: var(--gold);
  font-weight: 700;
}
.console-card .console-note { min-height: 42px; }

.cline { display: block; }
.cline .ts { color: #5a5a66; margin-right: 8px; }
.cline-error { color: #f0938c; }
.cline-warn  { color: #e8bd72; }
.cline-panel { color: var(--gold); }

.c-black          { color: #6b6257; }
.c-red            { color: #d4635c; }
.c-green          { color: #64bd8a; }
.c-yellow, .c-gold { color: var(--gold); }
.c-blue           { color: #6f9de0; }
.c-magenta        { color: #b98ae0; }
.c-cyan           { color: #63bcc4; }
.c-white          { color: #ece2ce; }
.c-gray, .c-dark-gray { color: #8a7d6a; }
.c-bright-red     { color: #f08880; }
.c-bright-green   { color: #7cd7a2; }
.c-bright-yellow  { color: var(--gold-bright); }
.c-bright-blue    { color: #8bb6ee; }
.c-bright-magenta { color: #c9a2f0; }
.c-bright-cyan    { color: #7fd3da; }
.c-bright-white   { color: #fbf3e2; }
.c-bold { font-weight: 700; }

.console-input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--surface-3);
  border-top: 1px solid rgba(var(--edge-rgb), .5);
}
.console-prompt { color: var(--gold); font-family: var(--mono); font-weight: 700; }
.console-input input {
  flex: 1;
  min-width: 0;
  background: var(--well);
  border: var(--edge);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
}
.console-input input:disabled { opacity: .5; }
.console-note {
  margin: 0;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--amber);
  background: rgba(232, 161, 60, .07);
  border-top: 1px solid rgba(232, 161, 60, .2);
}

/* ─────────────────────────  TABLES  ───────────────────────── */

.table-wrap { overflow-x: auto; }
.table-wrap.is-dragover {
  outline: 2px dashed var(--gold);
  outline-offset: -2px;
  background: var(--gold-glass);
  border-radius: var(--radius);
}
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th {
  text-align: left;
  padding: 10px 16px;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
  border-bottom: 1px solid rgba(var(--edge-rgb), .5);
  white-space: nowrap;
}
.table td {
  padding: 11px 16px;
  border-bottom: 1px solid rgba(var(--edge-rgb), .22);
  color: var(--text-2);
  vertical-align: middle;
}
.table tbody tr:hover td { background: rgba(var(--accent-rgb), .04); }
.table tbody tr:last-child td { border-bottom: none; }
.table .name { color: var(--text); font-weight: 500; }
.table .mono { font-family: var(--mono); font-size: 12px; }
.col-actions { text-align: right; }
.table td.col-actions { text-align: right; white-space: nowrap; }
.row-actions { display: inline-flex; gap: 6px; }

.diff-row td { padding: 0 16px 14px; background: rgba(var(--accent-rgb), .03); }
.diff-view {
  margin: 0; padding: 12px 14px;
  background: var(--surface-3, #16161d);
  border: 1px solid rgba(var(--edge-rgb), .3);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow-y: auto;
  color: var(--text-2);
}

.player-cell { display: flex; align-items: center; gap: 10px; }
.player-head {
  width: 26px; height: 26px;
  border-radius: 5px;
  background: linear-gradient(160deg, var(--surface-3), var(--ink-2));
  border: 1px solid var(--brass-soft);
  display: grid;
  place-items: center;
  font-size: 11px;
  color: var(--gold);
  font-weight: 600;
  flex: none;
}

.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid var(--brass-soft);
  background: var(--gold-glass);
  color: var(--gold);
}
.badge-ok    { color: var(--green); border-color: var(--green-dim); background: rgba(79, 202, 139, .1); }
.badge-bad   { color: var(--red);   border-color: var(--red-dim);   background: rgba(226, 86, 79, .1); }
.badge-warn  { color: var(--amber); border-color: rgba(232, 161, 60, .35); background: rgba(232, 161, 60, .1); }
.badge-info  { color: var(--blue);  border-color: rgba(106, 166, 240, .3); background: rgba(106, 166, 240, .1); }

/* Remote support banner: deliberately loud. If support is in the panel, the
   customer should not be able to miss it. */
.support-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--amber);
  background: rgba(232, 161, 60, .14);
  border-bottom: 1px solid rgba(232, 161, 60, .4);
}
.support-banner .btn { margin-left: auto; }

/* Update-available prompt. Calmer than the support banner by default; louder
   when the install is a major or several releases behind. */
.update-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  background: rgba(106, 166, 240, .12);
  border-bottom: 1px solid rgba(106, 166, 240, .35);
}
.update-banner .btn { margin-left: auto; }
.update-banner-strong {
  color: var(--amber);
  background: rgba(232, 161, 60, .14);
  border-bottom-color: rgba(232, 161, 60, .4);
}

/* ─────────────────────────  FEED / TILES  ───────────────────────── */

.feed { list-style: none; margin: 0; padding: 8px; display: grid; gap: 6px; max-height: 268px; overflow-y: auto; }
.feed li {
  display: flex;
  gap: 11px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  background: rgba(var(--accent-rgb), .035);
  border: 1px solid rgba(var(--edge-rgb), .35);
}
.feed-glyph {
  width: 26px; height: 26px;
  border-radius: 7px;
  display: grid; place-items: center;
  background: var(--gold-glass);
  color: var(--gold);
  font-size: 12px;
  flex: none;
}
.feed-body { min-width: 0; }
.feed-title { font-size: 12.5px; color: var(--text); }
.feed-sub { font-size: 11px; color: var(--text-3); margin-top: 2px; }

.tile-grid {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(226px, 1fr));
  gap: 12px;
}
.tile {
  padding: 14px;
  background: var(--surface-3);
  border: var(--edge);
  border-radius: var(--radius-sm);
}
.tile-name { font-size: 14px; color: var(--text); }
.tile-label { font-size: 11px; color: var(--gold-dim); margin-top: 2px; }
.tile-facts { margin-top: 11px; display: grid; gap: 5px; font-size: 12px; color: var(--text-3); }
.tile-facts b { color: var(--text-2); font-family: var(--mono); font-weight: 500; }

/* ─────────────────────────  CHART  ───────────────────────── */

.chart-wrap { padding: 16px; }
.chart { width: 100%; height: 220px; display: block; }
.chart-legend { display: flex; gap: 18px; margin-top: 10px; font-size: 11px; color: var(--text-3); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.swatch-cpu { background: var(--gold); }
.swatch-mem { background: var(--blue); }
.swatch-players { background: var(--green); }

/* ─────────────────────────  FORMS  ───────────────────────── */

.form-grid {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  align-items: end;
}
.field { display: grid; gap: 6px; min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field-label {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.field-help { font-size: 11px; color: var(--text-3); }

.input, .field input, .field select, .field textarea {
  width: 100%;
  background: var(--well);
  border: var(--edge);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--text);
  font-size: 13px;
}
.input:focus, .field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold-dim);
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .12);
}
.input-sm { padding: 7px 10px; font-size: 12px; width: auto; min-width: 170px; }
textarea.input { resize: vertical; font-family: var(--mono); font-size: 12px; }

.editor {
  width: 100%;
  min-height: 380px;
  background: var(--terminal);
  border: none;
  border-top: 1px solid rgba(var(--edge-rgb), .4);
  padding: 14px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: #e3e3ea;
  resize: vertical;
}

.check { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-3); }
.check input { accent-color: var(--gold); width: 15px; height: 15px; }
.notification-settings { display: flex; flex-wrap: wrap; gap: 10px 20px; padding: 12px; border: var(--edge); border-radius: var(--radius-sm); }
.notification-settings legend { padding: 0 6px; }

.switch { position: relative; display: inline-block; width: 42px; height: 23px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-track {
  position: absolute; inset: 0;
  background: #23232c;
  border: 1px solid var(--brass-soft);
  border-radius: 999px;
  transition: background .16s ease, border-color .16s ease;
}
.switch-track::before {
  content: "";
  position: absolute;
  width: 17px; height: 17px;
  left: 2px; top: 2px;
  border-radius: 50%;
  background: var(--text-3);
  transition: transform .16s ease, background .16s ease;
}
.switch input:checked + .switch-track { background: rgba(79, 202, 139, .22); border-color: var(--green-dim); }
.switch input:checked + .switch-track::before { transform: translateX(19px); background: var(--green); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--gold); outline-offset: 2px; }

.daypick { display: flex; flex-wrap: wrap; gap: 6px; }
.daypick label {
  padding: 7px 12px;
  border: var(--edge);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-3);
  cursor: pointer;
}
.daypick input { display: none; }
.daypick input:checked + span { color: var(--gold-bright); }
.daypick label:has(input:checked) { border-color: var(--gold-dim); background: var(--gold-glass); }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(var(--edge-rgb), .35);
  font-family: var(--mono);
  font-size: 12px;
}
.crumb { background: none; border: none; color: var(--gold-dim); padding: 2px 4px; border-radius: 4px; }
.crumb:hover { color: var(--gold-bright); }
.crumb-sep { color: var(--text-3); }

.checklist { list-style: none; margin: 0; padding: 12px 16px; display: grid; gap: 8px; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--text-2); }
.checklist .mark { flex: none; width: 18px; text-align: center; }
.checklist .mark-ok { color: var(--green); }
.checklist .mark-bad { color: var(--red); }
.checklist .mark-warn { color: var(--amber); }
.text-warn { color: var(--amber); font-weight: 600; }
.card-head-spaced { margin-top: 16px; }

.endpoint-grid { padding: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 12px; }
.endpoint-card { padding: 15px; border: var(--edge); border-radius: var(--radius-sm); background: rgba(var(--edge-rgb), .08); display: grid; gap: 12px; }
.endpoint-card.is-healthy { border-color: rgba(79, 202, 139, .38); }
.endpoint-card.is-unhealthy { border-color: rgba(226, 86, 79, .42); }
.endpoint-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.endpoint-address { color: var(--gold-bright); font: 600 14px/1.4 var(--mono); }
.route-path { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: var(--text-3); font-size: 11px; }
.route-step { padding: 5px 8px; border-radius: 999px; background: var(--surface-3); border: var(--edge); }
.route-arrow { color: var(--gold-dim); }
.endpoint-health { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; }
.health-ok { color: var(--green); }
.health-bad { color: var(--red); }
.connection-state { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; white-space: nowrap; }
.connection-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 16%, transparent); }
.connection-state.is-live { color: var(--green); }
.connection-state.is-reconnecting, .connection-state.is-connecting { color: var(--amber); }
.connection-state.is-degraded { color: var(--red); }

/* ─────────────────────────  BUTTONS  ───────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  border: var(--edge);
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 13px;
  transition: border-color .13s ease, color .13s ease, background .13s ease;
}
.btn:hover:not(:disabled) { border-color: var(--gold-dim); color: var(--gold-bright); }
.btn:disabled { opacity: .42; cursor: not-allowed; }
.btn-sm { padding: 7px 12px; font-size: 12px; }
.btn-block { width: 100%; }
.btn-primary {
  background: linear-gradient(180deg, var(--gold), var(--gold-dim));
  border-color: var(--gold-dim);
  color: #ffffff;
  font-weight: 600;
}
.btn-primary:hover:not(:disabled) { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: #ffffff; }
.btn-ghost { background: transparent; }
.btn-danger { border-color: var(--red-dim); color: #eb948e; }
.btn-danger:hover:not(:disabled) { border-color: var(--red); color: #f6b3ae; background: rgba(226, 86, 79, .1); }

.empty, .hint {
  margin: 0;
  padding: 18px 16px;
  color: var(--text-3);
  font-size: 12.5px;
  text-align: center;
}
.hint { text-align: left; border-top: 1px solid rgba(var(--edge-rgb), .3); font-size: 12px; }

/* ─────────────────────────  TOASTS + MODAL  ───────────────────────── */

.toasts {
  position: fixed;
  right: 100px; /* shifted left of the AI messenger bubble, which lives in this same corner */
  bottom: 18px;
  display: grid;
  gap: 9px;
  /* Above the AI messenger (z 65): the 100px shift only clears the closed
     58px bubble, and the *open* chat panel covered this exact spot -- any
     toast fired mid-chat was completely hidden. */
  z-index: 70;
  max-width: min(380px, calc(100vw - 36px));
}
.toast {
  display: flex;
  gap: 11px;
  padding: 12px 14px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: var(--edge);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
  box-shadow: 0 16px 36px -18px rgba(0, 0, 0, .95);
  font-size: 13px;
  color: var(--text-2);
  animation: toast-in .2s ease;
}
.toast-ok    { border-left-color: var(--green); }
.toast-error { border-left-color: var(--red); }
.toast-warn  { border-left-color: var(--amber); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  display: grid;
  place-items: center;
  padding: 22px;
  z-index: 70;
}
.modal {
  width: min(440px, 100%);
  padding: 22px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: var(--edge);
  border-radius: var(--radius);
  box-shadow: 0 26px 60px -26px #000;
  display: grid;
  gap: 14px;
}
.modal h3 { font-size: 15px; color: var(--gold-bright); }
.modal p { margin: 0; font-size: 13.5px; color: var(--text-2); line-height: 1.55; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; }

/* ─────────────────────────  RESPONSIVE  ───────────────────────── */

@media (max-width: 1400px) {
  .dashboard-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-card.card-span-half { grid-column: span 1; }
  .dashboard-card[data-card-size="half"],
  .dashboard-card[data-card-size="full"] { grid-column: 1 / -1; }
  .grid-quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-console-mini { grid-column: 1 / -1; }
  .console-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .console-card:last-child { grid-column: 1 / -1; }
}

@media (max-width: 1180px) {
  .theme-picker > span { display: none; }
  .grid-hero { grid-template-columns: 1fr; }
  .status-body { grid-template-columns: 1fr; }
  .status-art { height: 128px; }
}

@media (max-width: 860px) {
  .dashboard-cards { grid-template-columns: 1fr; }
  .dashboard-card.card-span-half,
  .dashboard-card.card-span-full { grid-column: auto; }
  .dashboard-card[data-card-size] { grid-column: auto; }
  .grid-quad { grid-template-columns: 1fr; }
  .searchbox { display: none; }
  .add-server span { display: none; }
  .menu-btn { display: block; }
  .content { padding: 14px; }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: 26px 0 60px -30px #000;
  }
  .sidebar.is-open { transform: none; }
  .sidebar-close {
    display: block;
    align-self: flex-end;
    background: none;
    border: none;
    color: var(--text-3);
    font-size: 18px;
    padding: 4px 8px;
    margin-bottom: 6px;
  }
  .user-meta { display: none; }
  .action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-facts { grid-template-columns: 1fr; }
  .titlebar-clock { display: none; }
  .server-ribbon { padding-inline: 10px; }
  .server-switch { justify-content: flex-start; }
  .server-pill { min-width: min(230px, 78vw); }
  .network-controls { align-items: stretch; flex-direction: column; }
  .network-controls-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .console-grid { grid-template-columns: 1fr; }
  .console-card:last-child { grid-column: auto; }
  .console-combined { height: 34vh; }
}

@media (max-width: 540px), (orientation: portrait) and (max-width: 760px) {
  :root { --gap: 11px; --radius: 11px; }
  .titlebar { padding-inline: 12px; }
  .topbar { padding: 9px 8px; gap: 7px; }
  .topbar-actions { gap: 6px; min-width: 0; }
  #btn-rescan, .user-avatar { display: none; }
  .user-chip { gap: 2px; padding: 3px; }
  .add-server { display: none; }
  .content { padding: 10px; }
  .card-head { align-items: flex-start; flex-direction: column; }
  .card-head-actions { width: 100%; }
  .dashboard-toolbar { align-items: stretch; flex-direction: column; }
  .dashboard-toolbar-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .theme-picker select { width: 104px; }
  .profile-panel { right: 8px; width: calc(100vw - 16px); }
  .signup-key-form { grid-template-columns: 1fr; }
  .signup-key-form .field-wide,
  .signup-key-form > .btn { grid-column: auto; }
  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .network-controls-actions { grid-template-columns: 1fr; }
  .network-controls-actions .btn { width: 100%; }
  .chart { height: 180px; }
}

@media (orientation: landscape) and (max-height: 650px) {
  .titlebar { height: 34px; }
  .server-ribbon { padding-block: 6px; }
  .server-pill { padding-block: 6px; }
  .console-combined { height: 40vh; }
  .console-card .console-surface { height: 48vh; }
}

html[data-aspect="ultrawide"] .content { max-width: 1900px; width: 100%; margin-inline: auto; }
html[data-aspect="tall"] .grid-hero { grid-template-columns: 1fr; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ============================================================
   Components added to match the control-panel mockup:
   icon system, hero status card, sparkline tiles, the four
   summary lists, search, notifications, and rank badges.
   ============================================================ */

/* ── icons ── */

.ico {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--gold-dim);
  vertical-align: -3px;
}
.ico-sm { width: 15px; height: 15px; vertical-align: -2px; }
.ico-lg { width: 22px; height: 22px; }
.nav-item .ico { color: var(--gold-dim); }
.nav-item.is-active .ico,
.nav-item:hover .ico { color: var(--gold); }
.btn .ico { color: currentColor; }
.btn-primary .ico { color: #ffffff; }
.titlebar-crown { color: var(--gold); }

/* ── topbar: add server, search, notifications ── */

.add-server { flex: none; white-space: nowrap; }

.searchbox { position: relative; flex: 0 1 260px; min-width: 0; }
.searchbox input {
  width: 100%;
  background: var(--well);
  border: var(--edge);
  border-radius: 999px;
  padding: 8px 12px 8px 34px;
  font-size: 12.5px;
  color: var(--text);
}
.searchbox input:focus {
  border-color: var(--gold-dim);
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .12);
}
.search-glyph {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 340px;
  overflow-y: auto;
  background: var(--surface-2);
  border: var(--edge);
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 44px -20px #000;
  padding: 5px;
}
.search-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: none;
  text-align: left;
  color: var(--text-2);
}
.search-item:hover, .search-item:focus-visible {
  background: var(--gold-glass);
  border-color: var(--brass-soft);
  color: var(--text);
}
.search-item b { font-size: 12.5px; font-weight: 500; color: var(--text); }
.search-item small { display: block; font-size: 11px; color: var(--text-3); }
.search-empty { padding: 12px; text-align: center; color: var(--text-3); font-size: 12px; }

.icon-btn.bell { position: relative; }
.bell-dot {
  position: absolute;
  top: 5px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 2px var(--surface);
}
.icon-btn.ghost { background: none; border-color: transparent; padding: 6px; }
.icon-btn.ghost:hover { border-color: var(--brass); }

.notif-panel {
  position: absolute;
  top: calc(100% - 4px);
  right: 18px;
  z-index: 32;
  width: min(340px, calc(100vw - 36px));
  background: var(--surface-2);
  border: var(--edge);
  border-radius: var(--radius);
  box-shadow: 0 22px 48px -22px #000;
}
.notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(var(--edge-rgb), .5);
}

.profile-panel {
  position: absolute;
  top: calc(100% + 7px);
  right: 18px;
  z-index: 34;
  width: min(500px, calc(100vw - 36px));
  max-height: min(720px, calc(100dvh - 112px));
  overflow-y: auto;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: var(--edge);
  border-radius: var(--radius);
  box-shadow: 0 28px 68px -26px #000;
}
.profile-head,
.profile-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.profile-head { padding: 16px; border-bottom: 1px solid rgba(var(--edge-rgb), .5); }
.profile-head h2 { margin-top: 3px; color: var(--gold-bright); font-size: 18px; }
.profile-head small { color: var(--text-3); }
.signup-key-manager { padding: 16px; display: grid; gap: 14px; }
.profile-section-title strong { display: block; margin-top: 3px; color: var(--text); }
.profile-help { margin: 0; color: var(--text-3); font-size: 12px; line-height: 1.5; }
.signup-key-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 11px;
}
.signup-key-form > .btn { grid-column: 1 / -1; }
.generated-key {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--green-dim);
  border-radius: var(--radius-sm);
  background: rgba(79, 202, 139, .08);
}
.generated-key .field-label { grid-column: 1 / -1; }
.generated-key code { overflow-wrap: anywhere; color: var(--green); align-self: center; }
.signup-key-list { display: grid; gap: 8px; }
.signup-key-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  padding: 10px 11px;
  border: var(--edge);
  border-radius: var(--radius-sm);
  background: rgba(var(--accent-rgb), .025);
}
.signup-key-row b { display: block; color: var(--text-2); font-size: 12px; }
.signup-key-row code { font-size: 11px; }
.signup-key-row small { display: block; margin-top: 4px; color: var(--text-3); }
.signup-key-row .badge { align-self: start; }
.signup-key-row .row-actions { grid-column: 1 / -1; justify-content: flex-end; }
.badge-used, .badge-expired, .badge-revoked {
  color: var(--text-3);
  border-color: var(--brass-soft);
  background: var(--surface-3);
}

/* ── sidebar network actions ── */

.netgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.netgrid .btn { padding: 7px 6px; font-size: 11px; justify-content: flex-start; gap: 5px; }
.netstat + .netstat { margin-top: 10px; }
.netstat-row span { display: inline-flex; align-items: center; gap: 6px; }

/* ── status card with artwork ── */

.status-body {
  padding: 14px;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.status-art {
  height: 132px;
  border-radius: var(--radius-sm);
  border: var(--edge);
  overflow: hidden;
  background: var(--well);
  display: grid;
  place-items: center;
}
.status-art img { width: 100%; height: 100%; object-fit: cover; }
.status-art img.is-favicon {
  width: 74px;
  height: 74px;
  object-fit: contain;
  image-rendering: pixelated;
}
.status-detail { display: grid; gap: 13px; min-width: 0; }
.status-facts .fact-wide { grid-column: 1 / -1; }
.motd { font-family: var(--mono); font-size: 12px; line-height: 1.5; }

/* ── stat tiles with sparklines ── */

.stat { position: relative; display: flex; flex-direction: column; }
.stat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.spark { width: 62px; height: 26px; flex: none; margin-top: 2px; }
.spark path { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.spark .spark-line { stroke: var(--gold); }
.spark .spark-fill { fill: rgba(var(--accent-rgb), .12); stroke: none; }
.spark.is-good .spark-line { stroke: var(--green); }
.spark.is-good .spark-fill { fill: rgba(79, 202, 139, .12); }
.spark.is-warn .spark-line { stroke: var(--amber); }
.spark.is-warn .spark-fill { fill: rgba(232, 161, 60, .12); }

/* ── the four summary lists ── */

.world-list, .plugin-list, .backup-list, .file-list {
  list-style: none;
  margin: 0;
  padding: 8px;
  display: grid;
  gap: 5px;
  max-height: 258px;
  overflow-y: auto;
}

.world-row { display: flex; align-items: center; gap: 10px; padding: 5px; border-radius: 8px; }
.world-row:hover { background: rgba(var(--accent-rgb), .04); }
.world-thumb {
  width: 46px;
  height: 32px;
  border-radius: 5px;
  border: 1px solid var(--brass-soft);
  object-fit: cover;
  flex: none;
}
/* Same art, shown large on the Worlds page grid tiles instead of the small
   dashboard row icon above. */
.world-thumb-lg { width: 100%; height: 84px; }
.world-tile-spaced { margin-top: 10px; }
.world-meta { min-width: 0; flex: 1; }
.world-meta b { display: block; font-size: 12.5px; font-weight: 500; color: var(--text); }
.world-meta small { font-size: 10.5px; color: var(--text-3); font-family: var(--mono); }

.plugin-row, .backup-row, .file-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 6px;
  border-radius: 8px;
  font-size: 12px;
}
.plugin-row:hover, .backup-row:hover, .file-row:hover { background: rgba(var(--accent-rgb), .04); }
.plugin-row .name, .backup-row .name, .file-row .name {
  flex: 1;
  min-width: 0;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plugin-row .version, .backup-row .meta, .file-row .meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  flex: none;
}
.backup-row .stack { flex: 1; min-width: 0; }
.backup-row .stack b { display: block; font-size: 12px; font-weight: 500; color: var(--text); }
.backup-row .stack small { font-size: 10.5px; color: var(--text-3); }

/* ── the little server card under the console ── */

.server-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid rgba(var(--edge-rgb), .5);
  background: var(--surface-3);
}
.server-strip .stack { flex: 1; min-width: 0; }
.server-strip .stack b { display: block; font-size: 12.5px; font-weight: 500; color: var(--gold-bright); }
.server-strip .stack small {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bars { display: flex; align-items: flex-end; gap: 2px; height: 18px; flex: none; }
.bars i { width: 3px; border-radius: 1px; background: var(--brass); display: block; }
.bars i.on { background: var(--green); }

/* ── ranks and player heads ── */

.rank {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid var(--brass-soft);
  background: var(--gold-glass);
  color: var(--gold);
  white-space: nowrap;
}
.rank-owner { color: #f7dd97; border-color: var(--gold-dim); background: rgba(var(--accent-rgb), .16); }
.rank-admin { color: #f0938c; border-color: var(--red-dim); background: rgba(226, 86, 79, .12); }
.rank-moderator { color: #8bb6ee; border-color: rgba(106, 166, 240, .3); background: rgba(106, 166, 240, .1); }
.rank-helper { color: #7fd3da; border-color: rgba(99, 188, 196, .3); background: rgba(99, 188, 196, .1); }
.rank-vip { color: #c9a2f0; border-color: rgba(166, 131, 232, .3); background: rgba(166, 131, 232, .1); }
.rank-builder { color: #7cd7a2; border-color: var(--green-dim); background: rgba(79, 202, 139, .1); }
.rank-player { color: var(--text-3); background: none; }

.player-head { overflow: hidden; padding: 0; }
.player-head img, .player-head svg { width: 100%; height: 100%; display: block; }
.player-head img { image-rendering: pixelated; }

/* ── misc ── */

.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.badge-maintenance { color: var(--violet); border-color: rgba(166, 131, 232, .35); background: rgba(166, 131, 232, .12); }
.server-pill.is-maintenance { border-color: rgba(166, 131, 232, .5); }

.manual-list { padding: 0 16px 16px; display: grid; gap: 6px; }
.manual-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: var(--edge);
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-2);
}
.manual-row span { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.cline-metric { color: var(--text-2); }
.chart { height: 180px; }
.chart text { font-family: var(--mono); font-size: 9px; fill: var(--text-3); }
.swatch-tps { background: var(--green); }

/* ─────────────────────────  ANDROID / TOUCH LAYOUT  ───────────────────────── */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body, .app { width: 100%; max-width: 100%; }

@supports (height: 100dvh) {
  html, body, .app { height: 100dvh; }
}

.content {
  min-width: 0;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: max(18px, env(safe-area-inset-bottom));
}

.table-wrap,
.console-surface,
.server-switch { -webkit-overflow-scrolling: touch; }

@media (hover: none) and (pointer: coarse) {
  .btn, .icon-btn, .nav-item, .server-pill, .action { min-height: 44px; }
  .icon-btn { min-width: 44px; }
  .check input { width: 20px; height: 20px; }
  input, select, textarea { font-size: 16px !important; }
  .dashboard-card-handle { min-height: 44px; width: min(220px, calc(100% - 18px)); }
  .dashboard-card-resize { width: 44px; height: 44px; }
}

@media (max-width: 600px) {
  /* Mobile pass: previously this breakpoint minimized every padding/gap
     value to fit as much as possible on screen, which read as cramped and
     cluttered. The fix is the opposite instinct -- more breathing room per
     card, not more cards' worth of stuff visible at once. Comfortable
     spacing and one clear thing at a time beats density on a phone. */
  :root { --gap: 14px; --radius: 14px; --radius-sm: 10px; }

  .titlebar {
    height: calc(38px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 14px 0;
    gap: 8px;
  }
  .titlebar-name { max-width: 62vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .titlebar-meta, .titlebar-version, .titlebar-clock { display: none; }

  .topbar {
    min-height: 58px;
    padding: 8px max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left));
    gap: 8px;
  }
  .menu-btn { display: inline-flex; flex: none; padding: 10px 12px; }
  .topbar-actions { margin-left: auto; gap: 6px; min-width: 0; }
  .theme-picker, #btn-rescan, .add-server, .searchbox { display: none; }
  .topbar-actions > .icon-btn { padding: 10px 12px; }
  .user-chip { padding: 0; gap: 1px; border: 0; background: transparent; }
  .user-meta, .user-avatar { display: none; }
  .user-chip .icon-btn { min-width: 44px; padding: 10px; }

  .server-ribbon {
    padding: 10px max(10px, env(safe-area-inset-right)) 10px max(10px, env(safe-area-inset-left));
  }
  .server-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
    flex-basis: 100%;
  }
  .server-pill {
    min-width: 0;
    width: 100%;
    gap: 7px;
    padding: 10px 8px;
    font-size: clamp(11px, 3.2vw, 13px);
    overflow: hidden;
  }
  .server-pill > span:not(.dot):not(.server-pill-kind) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .server-pill-kind { display: none; }

  .content {
    padding: 14px max(14px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  }
  .view { width: 100%; min-width: 0; }
  .dashboard-cards, .grid-hero, .grid-quad, .console-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .dashboard-card, .card, .card-full { width: 100%; max-width: 100%; grid-column: auto !important; }

  .dashboard-toolbar { padding: 14px; }
  .dashboard-toolbar-actions { width: 100%; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .dashboard-toolbar-actions .btn { width: 100%; padding-inline: 12px; }
  .network-controls { padding: 16px; gap: 14px; }
  .network-controls-actions { width: 100%; grid-template-columns: 1fr; }

  .card-head { padding: 16px; gap: 11px; }
  .card-head h2 { max-width: 100%; line-height: 1.4; flex-wrap: wrap; }
  .card-head-actions { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .card-head-actions > * { min-width: 0; width: 100%; }
  .action-grid { padding: 16px; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .status-body { padding: 16px; grid-template-columns: 1fr; gap: 14px; }
  .status-art { height: 118px; }
  .status-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .status-word { font-size: 25px; }

  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat { padding: 14px; }
  .stat-value { font-size: 21px; }
  .spark { width: 48px; }

  .console-mini { height: 220px; }
  .console-combined { height: min(42dvh, 360px); }
  .console-card .console-surface { height: min(48dvh, 420px); }
  .console-surface { padding: 12px; font-size: 12px; line-height: 1.55; }
  .console-prefix { min-width: 0; margin-right: 5px; }
  .console-input { padding: 11px; gap: 8px; }
  .console-prompt { display: none; }

  .tile-grid, .form-grid, .endpoint-grid { padding: 16px; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .chart-wrap { padding: 14px; }
  .chart { height: 160px; }
  .chart-legend { gap: 10px; flex-wrap: wrap; }

  .table-wrap { width: 100%; max-width: 100%; overscroll-behavior-x: contain; }
  .table { min-width: 620px; font-size: 12.5px; }
  .table th, .table td { padding: 12px 14px; }

  .sidebar {
    width: min(86vw, 320px);
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  }
  .sidebar-close { min-width: 44px; min-height: 44px; }

  .notif-panel, .profile-panel {
    position: fixed;
    inset: calc(env(safe-area-inset-top) + 8px) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    width: auto;
    max-height: none;
    overflow-y: auto;
  }
  .notif-head { align-items: flex-start; gap: 8px; }
  .notif-head .row-actions { flex-wrap: wrap; justify-content: flex-end; }

  .modal-backdrop { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .modal { max-height: 92dvh; overflow-y: auto; padding: 20px; }
  .modal-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  /* Toasts sit above the messenger bubble here rather than side-by-side
     with it (there isn't the width to spare), and full-width like every
     other mobile panel. */
  .toasts { left: 8px; right: 8px; bottom: max(84px, calc(env(safe-area-inset-bottom) + 74px)); max-width: none; }

  .ai-messenger { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); }
  .ai-messenger-panel {
    position: fixed; inset: auto 8px max(14px, env(safe-area-inset-bottom)) 8px;
    width: auto; height: min(72dvh, 620px);
  }

  .editor { min-height: 52dvh; }
  .generated-key, .signup-key-row { grid-template-columns: minmax(0, 1fr); }
  .generated-key .field-label, .signup-key-row .row-actions { grid-column: auto; }
}

@media (max-width: 360px) {
  .server-pill { font-size: 10px; }
  .stat-strip, .status-facts { grid-template-columns: 1fr; }
  .card-head-actions, .modal-actions { grid-template-columns: 1fr; }
}

/* Assistant / Support tabs inside the messenger. */
.ai-messenger-tabs {
  display: flex; gap: 2px; flex: none;
  padding: 0 10px; border-bottom: 1px solid rgba(var(--edge-rgb), .4);
}
.ai-tab {
  background: none; border: 0; cursor: pointer;
  padding: 9px 12px; font-size: 12.5px; font-weight: 600;
  color: var(--text-3); border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.ai-tab:hover { color: var(--text-2); }
.ai-tab.is-active { color: var(--text-1); border-bottom-color: var(--gold, #e8b84b); }

.ai-support { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; }
.ai-support-lede { margin: 0; font-size: 14.5px; font-weight: 650; color: var(--text-1); }
.ai-support-note { margin: 0; font-size: 12px; color: var(--text-3); }
.ai-support-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.ai-support-actions .btn { width: 100%; justify-content: center; }
.btn-ghost {
  background: transparent; color: var(--text-2);
  border: 1px solid rgba(var(--edge-rgb), .8);
}
.btn-ghost:hover { border-color: var(--gold, #e8b84b); color: var(--text-1); }
.ai-support-fine { margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text-3); }

/* An action that is already running. Reads as "working", not "broken" --
   the button stays legible rather than fading to near-invisible. */
.is-busy { opacity: .72; cursor: progress; }

/* -- Error log (Settings) ------------------------------------------------
   An operator reading this is already stuck, so each entry has to carry the
   explanation with it: what it means, what to do, and whether it is theirs
   to fix. A severity stripe makes the critical ones findable by eye. */
.error-list { display: flex; flex-direction: column; gap: 10px; }
.error-entry {
  border: 1px solid var(--brass-soft);
  border-left: 3px solid var(--brass);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 11px 14px;
}
.error-entry.error-critical { border-left-color: var(--red); }
.error-entry.error-error    { border-left-color: var(--red-dim); }
.error-entry.error-warning  { border-left-color: var(--amber); }
.error-entry.error-info     { border-left-color: var(--blue); }

.error-entry-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.error-code { color: var(--gold-bright); font-size: 12.5px; letter-spacing: .04em; }
.error-title { font-weight: 600; font-size: 14px; }
.error-when { margin-left: auto; color: var(--text-3); font-size: 12px; }

.error-meaning { margin: 6px 0 4px; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.error-fix { margin: 0; color: var(--text); font-size: 13px; line-height: 1.5; }

.error-entry-foot {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-top: 9px;
}
.error-badge {
  font-size: 11.5px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--brass-soft); color: var(--text-2);
}
.error-badge-support { border-color: var(--red-dim); color: var(--red); }
.error-badge-config  { border-color: var(--brass); color: var(--amber); }
.error-badge-self    { border-color: var(--green-dim); color: var(--green); }
.error-badge-transient { color: var(--text-3); }
.error-area, .error-detail { font-size: 11.5px; color: var(--text-3); }
.error-detail {
  flex: 1 1 100%;
  overflow-wrap: anywhere;
  padding-top: 2px;
}

/* -- Dropdowns -----------------------------------------------------------
   Selects were inheriting the text-input box but keeping the platform's own
   arrow, so every dropdown in the panel rendered with a widget that belonged
   to the OS rather than to the product -- and on a dark surface the native
   arrow is frequently near-invisible.

   The chevron is an inline data: URI rather than an ::after pseudo-element
   because a <select> cannot host one: its children are <option>s and the
   pseudo-element would be painted behind the closed control. currentColor
   is not available inside a background image, so the stroke is the token
   value spelled out; the light-theme block overrides it.

   The popup list itself is drawn by the OS and cannot be styled, which is
   why `color-scheme` matters -- it is what makes the browser paint that
   list dark instead of white-on-white. */
select.input,
.field select,
.theme-picker select,
.ai-messenger-head select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23a7a7b3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  padding-right: 32px;
  cursor: pointer;
  /* Long option text must not blow out the control's width. */
  text-overflow: ellipsis;
}
select.input-sm { padding-right: 28px; background-position: right 9px center; }

select.input:hover,
.field select:hover { border-color: var(--brass); }

select.input:disabled,
.field select:disabled {
  opacity: .5;
  cursor: not-allowed;
  background-image: none;
}

/* An option group header reads as a label, not a choice. */
select.input optgroup { color: var(--text-3); font-style: normal; font-weight: 600; }
select.input option { color: var(--text); background: var(--surface-2); }

/* A select whose current value is a warning state earns a colour, so
   "Maintenance" or "Stopped" is legible without reading the text. */
select.input[data-state="warn"] { border-color: var(--amber); }
select.input[data-state="danger"] { border-color: var(--red); }

/* The chevron's colour is baked into a data: URI, so it cannot follow a CSS
   variable the way the rest of the control does. On the light theme the
   dark-theme grey (#a7a7b3) sits at roughly 2:1 against a white field --
   visible, but not comfortably so -- and #43434f matches --text-2 there. */
html[data-theme="daylight"] select.input,
html[data-theme="daylight"] .field select,
html[data-theme="daylight"] .theme-picker select,
html[data-theme="daylight"] .ai-messenger-head select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%2343434f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* -- Password reveal -----------------------------------------------------
   The toggle sits inside the field's box rather than beside it, so adding it
   does not change any form's layout or alignment. Padding on the input keeps
   the typed value from running underneath the button. */
.pw-wrap { position: relative; display: block; width: 100%; }
.pw-wrap input { width: 100%; padding-right: 40px; }

.pw-reveal {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-3);
}
.pw-reveal:hover { color: var(--text-2); background: var(--surface-3); }
.pw-reveal.is-on { color: var(--gold-bright); }
.pw-reveal:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

/* Some browsers draw their own reveal control; two of them side by side is
   confusing, and theirs does not re-mask on blur the way ours does. */
.pw-wrap input::-ms-reveal,
.pw-wrap input::-ms-clear { display: none; }

/* ── backup in progress: the live "New backup" row (app.js paintBackupRow) ── */
.backup-job-row td { padding-top: 14px; padding-bottom: 14px; background: var(--gold-glass); }
.backup-job { display: grid; gap: 8px; }
.backup-job-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.backup-job-phase { color: var(--text); font-weight: 600; }
.backup-job-percent { margin-left: auto; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.backup-progress {
  position: relative; height: 10px; border-radius: 999px; overflow: hidden;
  background: var(--well); border: 1px solid rgba(var(--edge-rgb), .6);
}
.backup-progress-fill {
  height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright));
  transition: width .9s linear;
}
.backup-progress.is-indeterminate .backup-progress-fill {
  width: 30%; animation: backup-progress-slide 1.4s ease-in-out infinite;
}
@keyframes backup-progress-slide { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.backup-job-meta {
  display: flex; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap;
  font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .backup-progress-fill { transition: none; }
  .backup-progress.is-indeterminate .backup-progress-fill { animation: none; width: 100%; opacity: .35; }
}