/* =====================================================================
 * REFUGE COMMAND-CENTER — design-token spine for the "new panel".
 * Re-themed 2026-06-12 onto the COMMAND DECK framework (the refugebot
 * admin design system): squared geometry, hairline frames, flat graphite
 * surfaces, one signal-orange accent + scan-blue data accent, Chakra
 * Petch / IBM Plex type. Token NAMES are unchanged — every region
 * stylesheet keys off these vars, so redefining values re-skins the app.
 * Deck component overrides live at the END of this stylesheet.
 * Fonts are BUNDLED (static/fonts/, go:embed) — no external font loads.
 * ===================================================================== */
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/chakra-petch-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/chakra-petch-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/chakra-petch-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-mono-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/ibm-plex-sans-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
:root {
  /* ---- COMMAND DECK base — cold graphite, blue-leaning (matches the
          refugebot admin "Command Deck" framework: squared geometry,
          hairline frames, one signal-orange accent) ---- */
  --bg:          #07090d;
  --bg-deep:     #05070a;
  --bg-raised:   #0a0d12;
  --surface:     #0d1117;
  --surface-2:   #11161d;
  --surface-3:   #161c25;
  --border:      rgba(232,237,242,.10);
  --border-soft: rgba(232,237,242,.05);
  --border-strong: rgba(232,237,242,.22);
  --hairline:    rgba(232,237,242,.07);

  /* ---- ink ---- */
  --text:        #e8edf2;
  --text-dim:    #aab4c0;
  --muted:       #6b7684;

  /* ---- accents: signal orange (interactive/brand) + scan blue (data) ---- */
  --accent:      #ff6b1a;   /* signal */
  --accent-2:    #5fb2ff;   /* scan — cool data accent */
  --accent-3:    #2ee06b;   /* ok green */
  --accent-hot:  #ff8a47;   /* signal-hi */
  --amber:       #ffc53d;
  --ok:          #2ee06b;
  --warn:        #ffc53d;
  --err:         #ff4242;

  --mono: 'IBM Plex Mono',ui-monospace,Consolas,monospace;
  --sans: 'IBM Plex Sans',-apple-system,"Segoe UI",Roboto,sans-serif;
  --display: 'Chakra Petch',system-ui,sans-serif;

  /* ---- radius scale — squared geometry, 12px is dead ---- */
  --radius:    2px;
  --radius-lg: 2px;
  --radius-sm: 2px;
  --radius-pill: 3px;   /* pills are rectangular tags now */

  /* ---- elevation — flat; shadows reserved for floating layers ---- */
  --shadow-sm: none;
  --shadow-md: 0 8px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.55);
  --shadow-pop: 0 16px 48px rgba(0,0,0,.55), 0 0 0 1px var(--border-strong) inset;

  /* ---- "glow" is now a hairline ring (values stay box-shadow-shaped so
          every box-shadow:var(--glow-*) consumer keeps working) ---- */
  --glow-accent: 0 0 0 1px rgba(255,107,26,.45);
  --glow-violet: 0 0 0 1px rgba(95,178,255,.40);
  --glow-ok:     0 0 0 1px rgba(46,224,107,.40);
  --glow-err:    0 0 0 1px rgba(255,66,66,.45);

  /* ---- gradients flattened to one-step surfaces / signal fills ---- */
  --grad-accent:  linear-gradient(180deg,#ff7b30 0%,#ff6b1a 100%);
  --grad-accent-2:linear-gradient(180deg,#ff8a47 0%,#ff6b1a 100%);
  --grad-hot:     linear-gradient(180deg,#ff8a47 0%,#ff6b1a 100%);
  --grad-surface: linear-gradient(180deg,#11161d 0%,#0d1117 100%);
  --grad-card:    linear-gradient(180deg,#0d1117 0%,#0d1117 100%);
  --grad-card-hover: linear-gradient(180deg,#11161d 0%,#11161d 100%);
  --grad-btn:     linear-gradient(180deg,#11161d 0%,#0d1117 100%);
  --grad-rail:    linear-gradient(180deg,#0a0d12 0%,#0a0d12 100%);
  --grad-danger:  linear-gradient(180deg,#ff4242 0%,#e63232 100%);
  --grad-ok:      linear-gradient(180deg,#2ee06b 0%,#27c75e 100%);

  /* ---- motion — nothing bounces on the deck ---- */
  --ease-out:    cubic-bezier(.2,0,.2,1);
  --ease-in-out: cubic-bezier(.2,0,.2,1);
  --ease-spring: cubic-bezier(.2,0,.2,1);

  /* density var the card grid reads (settings: cozy/comfortable/compact) */
  --svr-grid-min: 280px;

  /* ---- Deck-native tokens (mirrors refugebot site.css; used by the
          Command Deck override layer at the end of this stylesheet).
          Where a Deck name duplicated a spine token's literal value it is
          now an alias — one flat token system, identical computed values. ---- */
  --signal:var(--accent); --signal-hi:var(--accent-hot); --signal-dim:rgba(255,107,26,.13);
  --on-signal:var(--bg-raised);
  --scan:var(--accent-2); --scan-dim:rgba(95,178,255,.12);
  --ok-dim:rgba(46,224,107,.12); --err-dim:rgba(255,66,66,.12); --warn-dim:rgba(255,197,61,.12);
  --line:var(--border); --line-hi:var(--border-strong);
  --ink:var(--text); --ink-2:var(--text-dim); --ink-3:var(--muted); --ink-4:#3d4754;
  --notch:10px;
  --chamfer:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,0 100%);
  --chamfer-sm:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,0 100%);
  --hazard:repeating-linear-gradient(135deg,rgba(255,66,66,.75) 0 10px,rgba(255,66,66,.08) 10px 20px);
  --fast:120ms linear; --med:240ms cubic-bezier(.2,0,.2,1);
}

/* faint scanline + grid texture token reused by chrome surfaces */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

/* ---- Deck backdrop: flat graphite. The aurora is DEAD — depth comes from
   hairlines and one-step surface shifts, never glow. A single faint
   registration grid (the Deck's rationed texture) sits behind the shell;
   static, so it composites once and never costs a frame. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 20%, #000 25%, transparent 75%);
}
body::after { content: none; }
.app-shell, .sidebar, .topbar, main, .app-main, .app-content, header.nav { position: relative; z-index: 1; }

/* ---- shared keyframes used across surfaces ---- */
@keyframes pulseDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.45;transform:scale(.72)} }
@keyframes pulseGlow { 0%,100%{opacity:.25} 50%{opacity:.9} }
@keyframes ringspin { to { transform: rotate(360deg); } }
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes cardIn { from{opacity:0;transform:translateY(14px) scale(.97)} to{opacity:1;transform:none} }
@keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
@keyframes popIn { from{opacity:0;transform:translateY(16px) scale(.96)} to{opacity:1;transform:none} }
@keyframes sweep { 0%{transform:translateX(-120%)} 100%{transform:translateX(220%)} }

/* page-transition: content fades+rises when a new view is shown */
.view-enter { animation: fadeUp .34s var(--ease-out) both; }

/* scrollbars */
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(232,237,242,.16); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(232,237,242,.3); background-clip: content-box; }

/* generic utility tokens many regions lean on */
.dim { color: var(--text-dim); }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }


/* ===================== REGION: shell ===================== */
/* =============== APP SHELL (sidebar + topbar + content) =============== */
.app-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 100vh;
}

.sidebar {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  background: var(--grad-rail);
  border-right: 1px solid var(--border);
  padding: 0;
  overflow-y: auto;
}

.side-brand {
  display: flex; align-items: center; gap: 11px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--border-soft);
  background:
    radial-gradient(circle at 20% 0%, rgba(255,107,26,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,107,26,.02) 0%, transparent 100%);
  position: relative;
}

.side-brand .logo {
  width: 36px; height: 36px; border-radius: var(--radius);
  background: var(--grad-accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow:
    var(--glow-accent),
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(0,0,0,.18);
  position: relative;
  overflow: hidden;
}

.side-brand .logo::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.4), transparent 55%);
  pointer-events: none;
}

.side-brand .logo .mark {
  font-size: 14px; font-weight: 800; color: #0a0e17;
  letter-spacing: -.5px; line-height: 1;
  font-family: var(--sans);
  text-shadow: 0 1px 0 rgba(255,255,255,.2);
  position: relative; z-index: 1;
}

.side-brand .word {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}

.side-brand .word .name {
  font-weight: 700; font-size: 14.5px;
  background: var(--grad-accent-2);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: .2px; line-height: 1;
}

.side-brand .word .sub {
  font-size: 9.5px; font-weight: 600;
  color: var(--text-dim); opacity: .85;
  text-transform: uppercase; letter-spacing: .9px;
  line-height: 1;
}

.side-nav {
  display: flex; flex-direction: column; gap: 1px;
  padding: 10px 8px;
}

.side-section {
  font-size: 10px; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: 1.1px;
  padding: 10px 10px 6px;
}

.side-link {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: var(--radius-sm);
  font-size: 12.5px; color: var(--text-dim); font-weight: 500;
  text-decoration: none; cursor: pointer;
  transition: background .12s var(--ease-out), color .12s var(--ease-out), box-shadow .18s var(--ease-out);
  position: relative;
}

.side-link:hover {
  background: rgba(255,107,26,.08);
  color: var(--text); text-decoration: none;
}

.side-link.active {
  background: rgba(255,107,26,.12);
  color: var(--accent);
}

.side-link.active::before {
  content: ""; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 2px;
  background: var(--grad-accent); border-radius: 0 2px 2px 0;
}

.side-link .ic {
  font-size: 14px; width: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 18px;
}

.side-link .ic svg { fill: currentColor; }

.side-link .count {
  margin-left: auto; font-size: 10.5px;
  background: rgba(255,107,26,.06);
  padding: 1px 7px; border-radius: var(--radius);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  font-weight: 600;
}

.side-actions {
  padding: 8px 12px 12px;
  display: flex; flex-direction: column; gap: 6px;
  border-top: 1px solid var(--border-soft);
}

.side-actions button { width: 100%; justify-content: center; }

.side-foot {
  margin-top: auto;
  padding: 10px 14px 6px;
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--text-dim);
  border-top: 1px solid var(--border-soft);
}

.side-user {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px 12px;
  font-size: 11px; color: var(--muted);
}

.side-user #whoami {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Top bar inside the content pane — page title + search + breadcrumbs. */
.app-main {
  display: flex; flex-direction: column;
  min-width: 0; /* prevent grid blowout */
  min-height: 100vh;
}

.topbar {
  position: sticky; top: 0; z-index: 8;
  display: flex; align-items: center; gap: 14px;
  padding: 13px 24px;
  background: var(--grad-surface);
  border-bottom: 1px solid var(--border);
  backdrop-filter: saturate(1.3) blur(10px);
  -webkit-backdrop-filter: saturate(1.3) blur(10px);
}

.topbar h1 {
  margin: 0; font-size: 15px; font-weight: 600;
  letter-spacing: .2px;
  color: var(--text);
  display: flex; align-items: center; gap: 8px;
}

.topbar h1 .muted { color: var(--text-dim); font-weight: 400; }

.topbar-search {
  position: relative; flex: 1; max-width: 320px;
}

.topbar-search::before {
  content: "🔍"; position: absolute; left: 10px; top: 50%;
  transform: translateY(-50%); font-size: 11px; opacity: .6;
  pointer-events: none;
}

.topbar-search input {
  width: 100%; padding: 7px 10px 7px 28px;
  font-size: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  transition: border-color .15s var(--ease-out), box-shadow .18s var(--ease-out);
}

.topbar-search input:focus {
  outline: none;
  border-color: var(--accent);
}

.topbar-spacer { flex: 1; }

/* Live health pill — running/total + agents online. Updates every poll. */
.topbar-health {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255,107,26,.06);
  border: 1px solid rgba(255,107,26,.18);
  font-size: 12px; color: var(--text-dim);
  transition: border-color .15s var(--ease-out), background .15s var(--ease-out), box-shadow .18s var(--ease-out);
}

.topbar-health:hover {
  border-color: rgba(255,107,26,.35);
  background: rgba(255,107,26,.10);
}

.topbar-health .seg { display: inline-flex; align-items: center; gap: 5px; }

.topbar-health .seg strong {
  color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums;
}

.topbar-health .seg.run-seg .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok);
  box-shadow: var(--glow-ok);
  animation: pulseDot 2.4s ease-in-out infinite;
}

.topbar-health .seg.agent-seg .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: var(--glow-accent);
}

.topbar-health .seg.agent-seg.warn .dot {
  background: var(--warn);
  box-shadow: 0 0 6px rgba(255,193,75,.6);
}

.topbar-health .vsep {
  width: 1px; height: 16px;
  background: var(--border-soft);
}

/* Topbar primary action — "+ New server". Always visible (regardless
   of sidebar drawer state) so creating a server is a single tap. */
.topbar-new-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px;
  border-radius: var(--radius);
  background: var(--grad-accent);
  border: 1px solid transparent;
  color: #0a0e17;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .15px;
  cursor: pointer;
  transition: transform .12s var(--ease-out), box-shadow .18s var(--ease-out), background .15s var(--ease-out);
  box-shadow: var(--glow-accent), inset 0 1px 0 rgba(255,255,255,.22);
  white-space: nowrap;
  flex: 0 0 auto;
  min-height: 0;
}

.topbar-new-btn:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #ff6b1a 0%, #2ee06b 48%, #5fb2ff 100%);
}

.topbar-new-btn:active { transform: translateY(0); }

.topbar-new-btn svg { fill: currentColor; pointer-events: none; flex: 0 0 auto; }

@media (max-width: 900px) {
  .topbar-new-btn { padding: 7px 11px; font-size: 12px; }
}

@media (max-width: 480px) {
  /* iPhone SE etc — collapse to a round icon-only button to save room. */
  .topbar-new-btn { width: 36px; padding: 0; justify-content: center; border-radius: 50%; }
  .topbar-new-btn .lbl { display: none; }
}

/* Topbar icon button — Settings cog. */
.topbar-icon-btn {
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  background: rgba(255,107,26,.05);
  border: 1px solid var(--border);
  color: var(--text-dim);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: color .15s var(--ease-out), background .15s var(--ease-out), border-color .15s var(--ease-out), transform .15s var(--ease-out), box-shadow .18s var(--ease-out);
  box-shadow: none;
  padding: 0;
}

.topbar-icon-btn:hover {
  color: var(--accent);
  background: rgba(255,107,26,.12);
  border-color: rgba(255,107,26,.3);
  transform: none;
}

.topbar-icon-btn svg {
  width: 18px; height: 18px; fill: currentColor;
  transition: transform .35s var(--ease-out);
}

.topbar-icon-btn:hover svg { transform: rotate(45deg); }

.app-content {
  padding: 18px 24px 24px;
  display: flex; flex-direction: column; gap: 16px;
  max-width: none; /* override old main max-width; we have the sidebar now */
  margin: 0;
}


/* ===================== REGION: herostats ===================== */
  /* =============== HERO STATS (compact chip bar) ===============
     Replaces the previous 4-up giant card grid (~85px tall) with a
     single horizontal chip bar (~36px tall). Same IDs are preserved so
     the existing refreshHeroStats() logic continues to find each value.
     Each chip carries a colored dot + value + label + secondary hint;
     wraps gracefully on narrow viewports. */
  /* Cluster overview band — the at-a-glance header. Reflowed from a row of
     small pills into a row of proper stat cards: big number on top, label +
     hint below, an accent rail down the left edge, live dot top-right. Same
     markup (.stat-chip > .dot/.val/.lbl/.hint), restyled. */
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    align-items: stretch;
    margin-bottom: 4px;
  }
  .stat-chip {
    position: relative;
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    padding: 16px 18px 15px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background:
      linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)),
      var(--bg-raised);
    overflow: hidden;
    transition: all .2s var(--ease-out);
    cursor: default;
  }
  /* Left accent rail, colored per stat tone. */
  .stat-chip::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--text-dim); opacity: .8;
  }
  .stat-chip.ok::before   { background: var(--grad-accent-2); }
  .stat-chip.acc2::before { background: linear-gradient(180deg,var(--accent-2),#5fb2ff); }
  .stat-chip.warn::before { background: linear-gradient(180deg,var(--amber),#ff8a3d); }
  .stat-chip.acc::before  { background: var(--grad-accent); }
  /* Faint radial wash echoing the tone, behind the content. */
  .stat-chip::after {
    content: ""; position: absolute; right: -30%; top: -60%;
    width: 80%; height: 200%; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255,107,26,.10), transparent 70%);
    pointer-events: none; opacity: .9;
  }
  .stat-chip.ok::after   { background: radial-gradient(closest-side, rgba(46,224,107,.12), transparent 70%); }
  .stat-chip.acc2::after { background: radial-gradient(closest-side, rgba(95,178,255,.12), transparent 70%); }
  .stat-chip.warn::after { background: radial-gradient(closest-side, rgba(255,177,59,.12), transparent 70%); }
  .stat-chip:hover {
    border-color: rgba(255,107,26,.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0,0,0,.4), var(--glow-accent);
  }
  .stat-chip .dot {
    position: absolute; top: 14px; right: 14px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--text-dim);
    transition: all .2s var(--ease-out);
  }
  .stat-chip.ok   .dot { background: var(--ok); box-shadow: 0 0 12px rgba(46,224,107,.8), 0 0 24px rgba(46,224,107,.4); animation: pulseDot 2.4s ease-in-out infinite; }
  .stat-chip.acc2 .dot { background: var(--accent-2); box-shadow: 0 0 10px rgba(95,178,255,.7), 0 0 20px rgba(95,178,255,.35); }
  .stat-chip.warn .dot { background: var(--amber); box-shadow: 0 0 10px rgba(255,177,59,.7), 0 0 20px rgba(255,177,59,.35); animation: pulseDot 2s ease-in-out infinite; }
  .stat-chip .val {
    order: 2;
    font-size: 30px; font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    letter-spacing: -.5px;
    line-height: 1;
    transition: color .2s var(--ease-out);
  }
  .stat-chip.ok   .val { color: var(--ok); text-shadow: 0 0 14px rgba(46,224,107,.4); }
  .stat-chip.acc2 .val { color: var(--accent-2); text-shadow: 0 0 14px rgba(95,178,255,.35); }
  .stat-chip.warn .val { color: var(--amber); text-shadow: 0 0 14px rgba(255,177,59,.35); }
  .stat-chip.acc  .val { color: var(--accent); text-shadow: 0 0 14px rgba(255,107,26,.35); }
  .stat-chip .lbl {
    order: 1;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dim);
    line-height: 1;
    transition: color .2s var(--ease-out);
  }
  .stat-chip:hover .lbl { color: var(--text); }
  .stat-chip .hint {
    order: 3;
    font-size: 11.5px; color: var(--muted);
    line-height: 1;
    opacity: .9;
    transition: opacity .2s var(--ease-out);
  }
  /* Cluster-health sparkline — sits across the bottom of the card, behind
     the text, as a subtle trend band. preserveAspectRatio=none lets it
     stretch to the card width. */
  .stat-spark {
    position: absolute; left: 0; right: 0; bottom: 0;
    width: 100%; height: 30px;
    pointer-events: none; z-index: 0; opacity: .85;
  }
  .stat-spark .spark-line { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
  .stat-spark .spark-area { stroke: none; }
  /* Keep the number + label legible above the sparkline. */
  .stat-chip .val, .stat-chip .lbl, .stat-chip .hint, .stat-chip .dot { position: relative; z-index: 1; }
  @keyframes chipGlow {
    from { box-shadow: var(--border); }
    to { box-shadow: var(--glow-accent); }
  }
  @media (max-width: 720px) {
    .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .stat-chip { padding: 12px 12px 11px 15px; }
    .stat-chip .val { font-size: 24px; }
  }

  /* =============== GLOBAL ACTION INDICATORS (in-place button states) =============== */
  @keyframes act-spin { to { transform: rotate(360deg); } }
  @keyframes act-pop  { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  @keyframes act-progress { 0% { left: -30%; } 100% { left: 100%; } }
  .act-spin {
    width: 12px; height: 12px; flex-shrink: 0;
    border: 1.6px solid rgba(255,107,26,.35);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: act-spin .65s linear infinite;
    display: inline-block; vertical-align: -2px;
    margin-right: 2px;
  }
  button.is-loading, a.is-loading {
    position: relative;
    pointer-events: none;
    opacity: 1 !important;
  }
  button.is-loading::after {
    /* thin progress bar along the bottom edge during loading */
    content: ""; position: absolute; bottom: 0; height: 2px; left: -30%; width: 30%;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: .95;
    animation: act-progress 1s ease-in-out infinite;
    box-shadow: 0 0 6px var(--accent);
  }
  button.is-success {
    background: linear-gradient(180deg, rgba(46,224,107,.25), rgba(46,224,107,.1)) !important;
    border-color: rgba(46,224,107,.6) !important;
    color: var(--ok) !important;
    pointer-events: none;
    box-shadow: 0 0 16px rgba(46,224,107,.35) !important;
  }
  button.is-error {
    background: linear-gradient(180deg, rgba(255,66,66,.25), rgba(255,66,66,.1)) !important;
    border-color: rgba(255,66,66,.6) !important;
    color: var(--err) !important;
    box-shadow: 0 0 16px rgba(255,66,66,.35) !important;
  }
  button.is-success .act-check, button.is-error .act-x {
    display: inline-block; animation: act-pop .18s var(--ease-out) both;
    font-weight: 700; margin-right: 2px;
  }

  /* Action-state overlay (appended to the button during runAction). Covers
     the button's underlying label so the indicator is visible without
     overwriting the innerHTML. When removeOverlay fires the button is
     instantly back to its own label, which updateCard may have updated
     to the new semantic state (Stop → Start) in the meantime — zero
     mid-flight label desync. */
  .act-overlay {
    position: absolute; inset: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    font: inherit; color: inherit; padding: inherit; border-radius: inherit;
    pointer-events: none;
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    animation: act-pop .15s var(--ease-out) both;
  }
  .act-overlay.is-success { background: linear-gradient(180deg, rgba(46,224,107,.32), rgba(46,224,107,.16));  color: var(--ok); box-shadow: inset 0 0 16px rgba(46,224,107,.2); }
  .act-overlay.is-error   { background: linear-gradient(180deg, rgba(255,66,66,.32), rgba(255,66,66,.18)); color: var(--err); box-shadow: inset 0 0 16px rgba(255,66,66,.2); }
  .act-overlay.is-loading::after {
    content: ""; position: absolute; bottom: 0; height: 2px; left: -30%; width: 30%;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: .95;
    animation: act-progress 1s ease-in-out infinite;
    box-shadow: 0 0 6px var(--accent);
  }

  /* Global progress overlay — pinned top strip when any long-running
     action is in flight (uploads, recreates, etc). */
  .act-progress-global {
    position: fixed; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--accent) 25%, var(--accent-2) 50%, var(--accent) 75%, transparent 100%);
    background-size: 200% 100%;
    animation: act-global-slide 1.2s linear infinite;
    z-index: 9999;
    opacity: 0; pointer-events: none;
    transition: opacity .15s;
    box-shadow: 0 0 12px var(--accent);
  }
  .act-progress-global.on { opacity: 1; }
  @keyframes act-global-slide {
    from { background-position: 200% 0; }
    to   { background-position: -100% 0; }
  }

/* ===================== REGION: responsive ===================== */
  /* =============== responsive: tablet (900-1100px) =============== */
  @media (max-width: 1100px) and (min-width: 901px) {
    .app-shell { grid-template-columns: 200px 1fr; }
    .sidebar { width: 200px; }
  }

  /* =============== responsive: small tablet / large phone (720-900px) ===============
     Sidebar becomes a slide-in drawer triggered by the topbar hamburger. */
  @media (max-width: 900px) {
    .app-shell { grid-template-columns: 1fr; min-height: 100dvh; }
    .sidebar {
      position: fixed; left: 0; top: 0; bottom: 0;
      width: 280px; max-width: 86vw;
      z-index: 1000;
      transform: translateX(-100%);
      transition: transform .26s var(--ease-out);
      box-shadow: 0 0 50px rgba(0,0,0,.6);
      overflow-y: auto;
    }
    body.sidebar-open .sidebar { transform: translateX(0); }
    .sidebar-backdrop {
      position: fixed; inset: 0;
      background: rgba(7,11,20,.6);
      backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
      z-index: 999;
      opacity: 0; pointer-events: none;
      transition: opacity .22s ease-out;
    }
    body.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
    body.sidebar-open { overflow: hidden; }
    /* Hamburger gets revealed in the topbar. */
    .topbar-menu-btn { display: inline-flex !important; }
    /* Topbar tightens up so hamburger + title + cog all fit. */
    .topbar { padding: 11px 14px; gap: 10px; }
    .topbar h1 { font-size: 14px; }
    .topbar-search { display: none; }   /* search lives in the filter strip on mobile */
    .topbar-health { display: none; }   /* counts live in hero stats already */
    .app-content { padding: 14px 12px 24px; gap: 12px; }
    /* Hero stats already wrap as chips — extra mobile tightening lives
       in the .hero-stats rule above. Nothing to override here. */
    /* Filter strip wraps tighter. */
    .svr-toolbar { padding: 10px; gap: 8px; border-radius: var(--radius); }
    .svr-tb-label { display: none; }
    .svr-tb-sep { display: none; }
    .svr-tb-spacer { display: none; }
    .svr-pill { padding: 5px 10px; font-size: 12px; }
    /* Server tile grid: smaller minmax = 2 per row at iPhone widths. */
    .svr-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
    .svr-group-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
    /* Modals fill the screen — no margin to waste. */
    .modal-bg { padding: 0; align-items: stretch; justify-content: stretch; }
    .modal {
      width: 100vw !important; height: 100dvh !important;
      max-width: 100vw !important; max-height: 100dvh !important;
      border-radius: 0 !important;
      margin: 0 !important;
    }
    /* Modal heads stack title above actions on phones. */
    .modal-head {
      flex-wrap: wrap; gap: 8px; padding: 10px 12px;
      position: sticky; top: 0; z-index: 5;
      background: var(--grad-card);
    }
    /* Instance modal — tabs scrollable, head wraps. */
    .im-head { padding: 12px 13px; flex-wrap: wrap; gap: 11px; }
    .im-head .game-tile { width: 42px; height: 42px; flex: 0 0 42px; font-size: 22px; }
    .im-head .titles .t { font-size: 16px; }
    .im-head .titles { flex: 1 1 60%; }
    .im-head .quick { width: 100%; flex-wrap: wrap; }
    .im-act-primary span, .im-act-ghost span { font-size: 12.5px; }
    .im-tabs { padding: 6px 8px; gap: 2px; }
    .im-tab { padding: 7px 11px; font-size: 12px; }
    .im-tab .icn { font-size: 12px; }
    /* Field cards full-width on small panes. */
    .cfg-grid { grid-template-columns: 1fr; gap: 10px; }
    /* Editor takes full viewport. */
    #editor-modal .modal { height: 100dvh !important; }
    .modal-body.editor textarea { font-size: 14px; padding: 12px 14px; }
    .editor-search-bar { flex-wrap: wrap; padding: 7px 10px; }
    .editor-search-bar .es-help { display: none; }
    .editor-search-bar .es-input-wrap { flex: 1 1 100%; max-width: none; }
    /* Docs modal — rail collapses to a top horizontal scroll strip. */
    #docs-modal .modal { height: 100dvh !important; }
    .docs-shell { flex-direction: column; }
    .docs-rail {
      width: auto; flex: 0 0 auto;
      border-right: none; border-bottom: 1px solid var(--border-soft);
      flex-direction: row; flex-wrap: nowrap;
      overflow-x: auto; overflow-y: hidden;
      gap: 6px; padding: 10px 12px;
    }
    .docs-rail-section { flex-direction: row; gap: 4px; }
    .docs-rail-section-h { display: none; }
    .docs-rail-search {
      position: sticky; left: 0; flex: 0 0 auto;
      border-bottom: none; padding: 0; margin: 0;
      width: 160px;
    }
    .docs-rail-search input { padding: 5px 10px 5px 28px; font-size: 12px; }
    .docs-rail-link {
      flex: 0 0 auto;
      padding: 7px 11px; font-size: 12px;
    }
    .docs-rail-link.indent { padding-left: 20px; }
    .docs-rail-link.active::before { display: none; }
    .docs-content { padding: 18px 18px 60px; font-size: 13px; }
    .docs-content h1 { font-size: 22px; }
    .docs-content h2 { font-size: 16px; }
    /* Settings modal — sections stack cleaner. */
    .settings-row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .settings-row-ctrl select { width: 100%; min-width: 0; }
    .about-card { flex-direction: column; align-items: flex-start; gap: 12px; text-align: left; }
    /* Touch targets — buttons get a healthy tap size. */
    button.small { min-height: 36px; }
    button { min-height: 38px; }
    button.act-primary, button.act-restart, button.act-manage { min-height: 0; } /* tile buttons stay round */
    /* Toast positioning out of the safe area. */
    #toasts {
      bottom: max(16px, env(safe-area-inset-bottom));
      right: max(12px, env(safe-area-inset-right));
      left: max(12px, env(safe-area-inset-left));
      max-width: none;
    }
  }

  @media (max-width: 720px) {
    /* Settings tab inside the instance modal — single column on phones. */
    .im-set-grid { grid-template-columns: 1fr !important; gap: 10px; padding: 12px; }
    /* Docs tables tighten so cell text wraps. */
    .docs-table { font-size: 11.5px; }
    .docs-table th, .docs-table td { padding: 6px 8px; }
    .docs-table th { font-size: 10px; }
    /* DayZ / ARK mod grid: 1 per row instead of overflow. */
    .dzm-grid { grid-template-columns: 1fr !important; }
    /* New-server modal module picker tightens. */
    .module-picker-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; gap: 10px; max-height: 60dvh; }
    /* Form grids stack label above input on phones. */
    .form-grid { grid-template-columns: 1fr !important; gap: 6px 0; padding: 12px 14px; }
    .form-grid > .row { width: 100%; }
    /* Player table + mod row scrolls horizontally if needed. */
    .dzm-mod-row { flex-wrap: wrap; gap: 8px; }
    /* Side-rail (Config tab) already collapses to top pills @820px; tighten further. */
    .cfg-rail-link { padding: 6px 9px; }
  }

  /* =============== responsive: small phone (≤480px, e.g. iPhone SE) =============== */
  @media (max-width: 480px) {
    .app-content { padding: 12px 10px 24px; gap: 10px; }
    .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .stat-chip { padding: 11px 11px 10px 14px; }
    .stat-chip .val { font-size: 22px; }
    .stat-chip .lbl { font-size: 10px; }
    .svr-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
    .svr-group-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
    .svr-tile-name { font-size: 14px; }
    .svr-tile-meta { font-size: 11px; }
    .topbar { padding: 9px 12px; }
    .modal-head h3 { font-size: 13px; }
  }

  /* The hamburger button — hidden by default on desktop, shown on mobile via the rule above. */
  .topbar-menu-btn {
    display: none;
    width: 38px; height: 38px;
    border-radius: var(--radius-sm);
    background: rgba(255,107,26,.04);
    border: 1px solid var(--border-soft);
    color: var(--accent);
    align-items: center; justify-content: center;
    cursor: pointer; padding: 0;
    flex: 0 0 38px;
    transition: background .15s var(--ease-out), border-color .15s var(--ease-out), color .15s var(--ease-out), box-shadow .15s var(--ease-out);
    box-shadow: none;
  }
  .topbar-menu-btn:hover { 
    background: rgba(255,107,26,.08); 
    border-color: rgba(255,107,26,.25); 
    color: var(--accent);
    box-shadow: var(--glow-accent);
  }
  .topbar-menu-btn svg { width: 20px; height: 20px; fill: currentColor; }

  /* Backdrop element behind the open sidebar drawer (only meaningful below 900px). */
  .sidebar-backdrop { display: none; }

  /* =============== PULL-TO-REFRESH (mobile + PWA) ===============
     The PWA has no browser chrome → no reload button. A drag-down
     gesture from the top of the page triggers a soft re-poll of all
     dashboard data. Indicator floats below the topbar / status bar. */
  #ptr-indicator {
    position: fixed;
    top: 0; left: 50%;
    transform: translateY(-70px) translateX(-50%);
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--grad-card);
    border: 1px solid var(--border-soft);
    box-shadow: 0 8px 22px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.03);
    z-index: 998; /* below modals (1000), above sidebar */
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    opacity: 0;
    color: var(--text-dim);
    transition: background .15s var(--ease-out), border-color .15s var(--ease-out), color .15s var(--ease-out);
  }
  #ptr-indicator.ready {
    border-color: rgba(255,107,26,.55);
    color: var(--accent);
    background: linear-gradient(180deg, rgba(15,22,34,.95) 0%, rgba(7,10,16,.95) 100%);
    box-shadow: 0 8px 22px rgba(255,107,26,.32), inset 0 1px 0 rgba(255,255,255,.1), var(--glow-accent);
  }
  #ptr-indicator .ptr-arrow {
    font-size: 20px; line-height: 1; font-weight: 700;
    transition: transform .25s var(--ease-out);
    display: inline-flex;
  }
  #ptr-indicator.ready .ptr-arrow { transform: rotate(180deg); }
  #ptr-indicator.loading .ptr-arrow { display: none; }
  #ptr-indicator .ptr-spin {
    width: 22px; height: 22px;
    border: 2.5px solid rgba(255,107,26,.16);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: ptr-spin .8s linear infinite;
    display: none;
  }
  #ptr-indicator.loading .ptr-spin { display: inline-block; }
  @keyframes ptr-spin { to { transform: rotate(360deg); } }
  /* Stop the iOS rubber-band overscroll on body so our custom indicator
     isn't fighting the native bounce on every pull. */
  html, body { overscroll-behavior-y: contain; }

  /* Fine-grained scrollbars tuned to the theme. */
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(255,107,26,.08); border-radius: var(--radius-sm); border: 2px solid transparent; background-clip: content-box; }
  ::-webkit-scrollbar-thumb:hover { background: rgba(255,107,26,.15); background-clip: content-box; }
  * { scrollbar-width: thin; scrollbar-color: rgba(255,107,26,.08) transparent; }
  *, *::before, *::after { box-sizing: border-box; }
  html, body { height: 100%; }
  /* Suppress horizontal scroll on the body — wide elements are expected
     to introduce their own internal scroll (e.g. tab strip, code blocks),
     never cause the whole page to slide. */
  html, body { overflow-x: hidden; }
  /* Kill the iOS double-tap-zoom delay on interactive elements; tap reads
     as a click instantly. */
  button, a, .svr-pill, .docs-rail-link, .cfg-rail-link, .im-tab,
  .svr-tile, .stat-card, label.toggle, [role="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  /* Don't let iOS Safari adjust font sizes when the device rotates. */
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    font-family: var(--sans);
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: .1px;
  }
  a { color: var(--accent); text-decoration: none; }
  a:hover { text-decoration: underline; }

  /* =============== TOP NAV =============== */
  header.nav {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 22px;
    background: var(--grad-surface);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(255,107,26,.08) inset, 0 2px 10px rgba(0,0,0,.35);
    backdrop-filter: saturate(1.3) blur(10px);
    -webkit-backdrop-filter: saturate(1.3) blur(10px);
  }
  .brand {
    display: flex; align-items: center; gap: 10px;
    font-weight: 600; font-size: 14px; letter-spacing: .2px;
    font-family: var(--sans);
  }
  .brand .txt {
    background: linear-gradient(135deg, #ff6b1a 0%, #5fb2ff 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    letter-spacing: .3px;
  }
  .brand .logo {
    width: 28px; height: 28px; border-radius: var(--radius);
    background: var(--grad-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
    box-shadow: 0 3px 10px rgba(255,107,26,.3), inset 0 1px 0 rgba(255,255,255,.3), var(--glow-accent);
    position: relative;
  }
  .brand .logo::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.3), transparent 60%);
  }
  .nav-spacer { flex: 1; }
  .nav .muted { color: var(--text-dim); font-size: 13px; }
  .dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--muted); vertical-align: middle; margin-right: 6px;
  }
  .dot.ok { background: var(--ok); box-shadow: 0 0 6px rgba(46,224,107,.6); }
  .dot.err { background: var(--err); box-shadow: 0 0 6px rgba(255,66,66,.6); }

  /* =============== LAYOUT =============== */
  main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 22px;
    display: flex; flex-direction: column; gap: 16px;
  }
  section.panel {
    background: var(--grad-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: background .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s var(--ease-out);
  }
  section.panel:hover {
    background: var(--grad-card-hover);
    box-shadow: var(--shadow-lg);
    border-color: var(--border-strong);
  }
  section.panel > header {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-soft);
    background: linear-gradient(180deg, rgba(255,107,26,.025), transparent);
  }
  section.panel > header h2 {
    margin: 0; font-size: 11.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim);
    display: flex; align-items: center; gap: 8px;
  }
  section.panel > header h2::before {
    content: ""; width: 2px; height: 12px;
    background: var(--grad-accent); border-radius: 1px;
  }
  section.panel > header .sub { color: var(--text-dim); font-size: 11.5px; font-weight: 400; }
  section.panel > header .actions { margin-left: auto; display: flex; gap: 6px; }

/* ===================== REGION: cards ===================== */
  /* =============== GRID OF SERVER CARDS =============== */
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    padding: 16px;
  }
  .card {
    background: var(--grad-card);
    border: 1.5px solid rgba(255,107,26,.12);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: transform .16s var(--ease-out), border-color .18s, box-shadow .24s, background .2s;
    box-shadow: var(--shadow-md), inset 0 1px 1px rgba(255,107,26,.06);
  }
  .card::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    pointer-events: none; opacity: 0; transition: opacity .24s var(--ease-out);
    background: linear-gradient(135deg, rgba(255,107,26,.12) 0%, rgba(95,178,255,.06) 50%, transparent 80%);
  }
  .card:hover {
    border-color: rgba(255,107,26,.35);
    background: var(--grad-card-hover);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg), var(--glow-accent);
  }
  .card:hover::after { opacity: 1; }
  .card:active { transform: translateY(-1px); transition-duration: .08s; }
  .card.card-new { animation: cardsCardIn .28s var(--ease-out) both; }
  @keyframes cardsCardIn {
    from { opacity: 0; transform: translateY(12px) scale(.96); }
    to   { opacity: 1; transform: none; }
  }

  .card.is-stopping { border-color: rgba(255,177,59,.55); }
  .card.is-stopping::before {
    background: radial-gradient(closest-side, rgba(255,177,59,.4), rgba(255,177,59,0) 72%);
    animation: cardsPulseGlow 1.6s ease-in-out infinite;
  }

  .card.is-deleting {
    opacity: .32; transform: scale(.985);
    transition: opacity .35s ease, transform .35s ease;
    pointer-events: none;
    border-color: rgba(255,66,66,.5);
  }
  .card.is-deleting::after {
    content: "DELETING…"; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
    color: #ff848f; background: rgba(20,8,8,.55);
    pointer-events: none; z-index: 3;
  }

  .card.is-installing, .card.is-starting, .card.is-ready {
    position: relative;
    overflow: visible;
    will-change: border-color;
    transition: border-color .35s ease-out;
  }
  .card.is-installing::before, .card.is-starting::before, .card.is-ready::before {
    content: ""; position: absolute; inset: -5px; border-radius: inherit;
    z-index: -1;
    pointer-events: none;
    will-change: opacity, transform;
    transform: scale(1);
    opacity: 0;
  }

  .card.is-installing { border-color: rgba(255,107,26,.7); }
  .card.is-installing::before {
    background: radial-gradient(closest-side, rgba(255,107,26,.55), rgba(255,107,26,0) 72%);
    animation: cardsPulseGlow 2.4s cubic-bezier(.45,.05,.55,.95) infinite;
  }

  .card.is-starting { border-color: rgba(255,177,59,.65); }
  .card.is-starting::before {
    background: radial-gradient(closest-side, rgba(255,177,59,.5), rgba(255,177,59,0) 72%);
    animation: cardsPulseGlow 2.4s cubic-bezier(.45,.05,.55,.95) infinite;
  }

  .card.is-ready { border-color: rgba(46,224,107,.85); }
  .card.is-ready::before {
    background: radial-gradient(closest-side, rgba(46,224,107,.75), rgba(46,224,107,0) 70%);
    animation: readyFlash 1.4s ease-out forwards;
  }
  @keyframes cardsPulseGlow {
    0%, 100% { opacity: 0;    transform: scale(.96); }
    50%      { opacity: .95;  transform: scale(1.04); }
  }
  @keyframes readyFlash {
    0%   { opacity: 1;   transform: scale(1.00); }
    60%  { opacity: .4;  transform: scale(1.06); }
    100% { opacity: 0;   transform: scale(1.08); }
  }

  .card-hero {
    position: relative;
    aspect-ratio: 460/215;
    background-size: cover; background-position: top center;
    background-color: #070b14;
    isolation: isolate;
    overflow: hidden;
    box-shadow: inset 0 -16px 8px -6px #070b14;
  }

  .hero-players {
    position: absolute; bottom: 8px; right: 10px;
    z-index: 2;
    font-size: 10px; font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: rgba(255,255,255,.88);
    text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 4px rgba(255,107,26,.3);
    letter-spacing: .2px;
    pointer-events: none;
  }
  .hero-players.empty { color: rgba(255,255,255,.5); }

  .hero-port {
    position: absolute; bottom: 30px; left: 12px;
    z-index: 2;
    font-family: var(--mono);
    font-size: 10px; font-weight: 600;
    color: rgba(255,107,26,.95);
    background: rgba(7,11,20,.65);
    padding: 3px 8px; border-radius: var(--radius-sm);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,107,26,.25);
    pointer-events: none;
    letter-spacing: .2px;
    font-variant-numeric: tabular-nums;
  }
  .port-tag {
    font-family: var(--mono); font-size: 10px;
    color: rgba(255,107,26,.8);
    background: rgba(255,107,26,.08);
    padding: 2px 7px; border-radius: 4px;
    margin-left: 6px; font-weight: 500;
    letter-spacing: .2px;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--border-soft);
  }

  .card-hero::before {
    content: ""; position: absolute; inset: 0;
    background:
      linear-gradient(180deg,
        rgba(7,11,20,0)    0%,
        rgba(7,11,20,.2)   30%,
        rgba(7,11,20,.6)   65%,
        rgba(7,11,20,1)    85%,
        rgba(7,11,20,1)   100%);
    z-index: 1;
  }

  .card-hero::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 35%, rgba(255,107,26,.18) 50%, transparent 65%);
    transform: translateX(-120%);
    transition: transform .8s var(--ease-out);
    mix-blend-mode: screen;
    z-index: 1;
  }
  .card:hover .card-hero::after { transform: translateX(120%); }

  .hero-top {
    position: absolute; top: 8px; left: 10px; right: 10px;
    z-index: 2;
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
  }

  .hero-sub {
    font-size: 9.5px; font-weight: 700; letter-spacing: .9px;
    color: rgba(255,255,255,.95);
    background: rgba(7,11,20,.7);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    padding: 4px 10px; border-radius: var(--radius-pill);
    border: 1px solid rgba(255,107,26,.25);
    text-transform: uppercase;
    max-width: 60%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    box-shadow: inset 0 1px 1px rgba(255,255,255,.08);
  }

  .hero-title {
    position: absolute; bottom: 8px; left: 12px; right: 92px;
    z-index: 2;
    font-weight: 700; font-size: 16px; letter-spacing: .1px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,.9), 0 0 8px rgba(255,107,26,.2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  .card-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px;
    border-bottom: 1px solid var(--border-soft);
    background: linear-gradient(180deg, rgba(16,26,42,.5) 0%, rgba(11,17,28,.8) 100%);
  }

  .game-tile {
    width: 40px; height: 40px; flex: 0 0 40px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    box-shadow:
      inset 0 1px 2px rgba(255,107,26,.15),
      inset 0 -1px 2px rgba(0,0,0,.3),
      0 4px 12px rgba(0,0,0,.4);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-soft);
  }
  .game-tile img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 30%;
    border-radius: inherit;
    display: block;
  }
  .game-tile::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,.18), transparent 50%);
    pointer-events: none;
    z-index: 1;
  }
  .game-tile[data-has-icon="1"]::after {
    background: linear-gradient(180deg, rgba(255,255,255,.12), transparent 40%);
  }

  .card-head .meta { min-width: 0; flex: 1; }
  .card-head .title {
    font-weight: 600; font-size: 13px; color: var(--text);
    letter-spacing: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .card-head .sub { font-size: 11px; color: var(--text-dim); margin-top: 2px; font-weight: 400; }

  .status-pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 14px; border-radius: var(--radius-pill);
    font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
    border: 1.5px solid;
    position: relative;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .25s, color .25s, border-color .25s, transform .15s, box-shadow .25s;
  }
  .status-pill::before {
    content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: currentColor; box-shadow: 0 0 10px currentColor, 0 0 0 2px rgba(0,0,0,.3);
  }

  .card.is-installing .status-pill,
  .card.is-starting   .status-pill { transform: scale(1.08); }

  .status-pill.running {
    background: linear-gradient(180deg, rgba(46,224,107,.4), rgba(46,224,107,.18));
    color: #d1fae5;
    border-color: rgba(46,224,107,.6);
    box-shadow: 0 0 12px rgba(46,224,107,.25);
  }
  .status-pill.running::before { animation: cardsPulseDot 2s ease-in-out infinite; }
  @keyframes cardsPulseDot {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 10px currentColor, 0 0 0 2px rgba(0,0,0,.3); }
    50%      { opacity: .5; transform: scale(.85); box-shadow: 0 0 5px currentColor, 0 0 0 1px rgba(0,0,0,.2); }
  }
  @keyframes im-dzm-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
  }


/* ===================== REGION: dayzmods ===================== */

/* ============ DayZ Mods tab (Workshop manager) — REFUGE COMMAND-CENTER ============ */
@keyframes im-dzm-cardIn {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes im-dzm-successFlash {
  0%   { box-shadow: 0 0 0 0 rgba(46,224,107,.6), 0 6px 18px rgba(0,0,0,.45); }
  60%  { box-shadow: 0 0 0 12px rgba(46,224,107,0),  0 6px 18px rgba(0,0,0,.45); }
  100% { box-shadow: 0 0 0 0 rgba(46,224,107,0),    0 6px 18px rgba(0,0,0,.45); }
}
@keyframes im-dzm-activePulse {
}
@keyframes im-dzm-spin { to { transform: rotate(360deg); } }

/* Hero search bar. Full-width input, leading icon, neon-accented hero gradient. */
.dzm-search-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 4px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.dzm-search-wrap:focus-within {
  border-color: var(--accent);
  background: var(--surface-3);
  box-shadow: 0 0 0 2px rgba(255,107,26,.18);
}
.dzm-search-icon {
  display: flex; align-items: center; justify-content: center;
  width: 38px; color: var(--text-dim); font-size: 15px;
  flex-shrink: 0;
}
.dzm-search-wrap input.dzm-search-input {
  flex: 1; min-width: 0;
  border: none; background: transparent;
  padding: 10px 0;
  font-size: 14px;
  color: var(--text);
}
.dzm-search-wrap input.dzm-search-input:focus {
  outline: none; box-shadow: none; background: transparent; border: none;
}
.dzm-search-spin {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,107,26,.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  align-self: center;
  animation: im-dzm-spin .7s linear infinite;
  margin-right: 8px;
  opacity: 0; transition: opacity .2s;
}
.dzm-search-spin.on { opacity: 1; }
.dzm-search-clear {
  align-self: center; margin-right: 4px;
  background: transparent; border: none; color: var(--text-dim);
  width: 28px; height: 28px; padding: 0; font-size: 14px;
  border-radius: 50%; cursor: pointer;
  transition: color .15s, background .15s;
}
.dzm-search-clear:hover { background: rgba(255,107,26,.08); color: var(--accent); }

.dzm-search-opts {
  display: flex; gap: 14px; align-items: center;
  margin-top: 8px;
  font-size: 12px; color: var(--text-dim);
}
.dzm-search-opts label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.dzm-search-opts input[type=checkbox] { margin: 0; accent-color: var(--accent); }

/* Result grid + cards — game-art hero with dark scrim + animated sheen. */
.dzm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 4px;
}
.dzm-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 0;
  border-radius: var(--radius);
  background: var(--grad-card);
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  transition: transform .18s var(--ease-out), border-color .18s, box-shadow .18s, background .18s;
  animation: im-dzm-cardIn .22s var(--ease-out);
}
.dzm-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,107,26,.28);
  background: var(--grad-card-hover);
  box-shadow: var(--glow-accent), 0 8px 24px rgba(0,0,0,.45);
}
.dzm-card-img {
  width: 100%; height: 120px;
  object-fit: cover; background: #111;
  display: block;
  transition: transform .25s var(--ease-out);
  position: relative;
}
.dzm-card-img::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.4) 100%);
  pointer-events: none;
}
.dzm-card:hover .dzm-card-img { transform: scale(1.04); }
.dzm-card-body {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px;
  flex: 1;
}
.dzm-card-title {
  font-weight: 600; font-size: 13px; line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text);
}
.dzm-card-meta {
  font-size: 11px; color: var(--text-dim);
  display: flex; gap: 6px; align-items: center;
}
.dzm-card-foot {
  display: flex; gap: 6px; align-items: center; justify-content: space-between;
  margin-top: auto;
}
.dzm-card-badge-installed {
  font-size: 10.5px; padding: 3px 8px; border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(46,224,107,.25), rgba(46,224,107,.18));
  color: var(--ok); font-weight: 600;
  border: 1px solid rgba(46,224,107,.35);
}

/* Single-mod preview card (when user pastes an ID/URL) — hero card with accent accent. */
.dzm-preview {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 14px; align-items: stretch;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--grad-card);
  border: 1px solid var(--border);
  animation: im-dzm-cardIn .22s var(--ease-out);
  box-shadow: var(--shadow-md);
}
.dzm-preview-img { width: 100%; height: 120px; object-fit: cover; border-radius: var(--radius-sm); background: #111; }
.dzm-preview-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dzm-preview-title { font-size: 16px; font-weight: 700; color: var(--text); }
.dzm-preview-meta { font-size: 12px; color: var(--text-dim); display: flex; gap: 12px; flex-wrap: wrap; }
.dzm-preview-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; justify-content: center; min-width: 120px; }

/* Installed-mod list entries — side accent stripe, hover lift + glow. */
.dzm-list { display: flex; flex-direction: column; gap: 8px; }
.dzm-mod-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--grad-card);
  border: 1px solid var(--border);
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
  animation: im-dzm-cardIn .22s var(--ease-out);
  position: relative;
}
.dzm-mod-row:hover {
  border-color: rgba(255,107,26,.22);
  background: var(--grad-card-hover);
  transform: translateX(2px);
  box-shadow: var(--shadow-sm);
}
.dzm-mod-row.client { border-left: 3px solid var(--accent); }
.dzm-mod-row.server { border-left: 3px solid var(--accent-2); }
.dzm-mod-row.just-added { animation: im-dzm-successFlash 1.8s var(--ease-out); border-color: rgba(46,224,107,.35); }
.dzm-mod-row-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.dzm-mod-row-title {
  font-weight: 600; font-size: 13px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text);
}
.dzm-mod-row-sub { font-size: 11px; color: var(--text-dim); display: flex; gap: 8px; align-items: center; }
.dzm-mod-row-kind {
  font-size: 10px; font-weight: 600;
  padding: 2px 8px; border-radius: var(--radius);
  transition: background .15s, color .15s;
}
.dzm-mod-row-kind.client { background: rgba(255,107,26,.16); color: var(--accent); }
.dzm-mod-row-kind.server { background: rgba(95,178,255,.16); color: var(--accent-2); }

/* Section headings. */
.dzm-section {
  display: flex; justify-content: space-between; align-items: center;
  margin: 16px 0 10px;
}
.dzm-section h4 { margin: 0; font-size: 13px; font-weight: 600; color: var(--text); }
.dzm-section .dim { font-weight: 400; color: var(--text-dim); }

/* Empty-state placeholder. */
.dzm-empty {
  text-align: center; padding: 28px 16px;
  color: var(--text-dim); font-size: 13px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: rgba(255,107,26,.02);
}
.dzm-empty .big { font-size: 24px; margin-bottom: 6px; color: var(--muted); }

/* Download job cards — pulse on active, mint glow on done, red on error. */
.dzm-job {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--grad-card);
  border: 1px solid var(--border);
  transition: border-color .2s, box-shadow .2s;
  animation: im-dzm-cardIn .22s var(--ease-out);
}
.dzm-job.active { animation: im-dzm-cardIn .22s var(--ease-out), im-dzm-activePulse 2.2s var(--ease-in-out) infinite; border-color: rgba(255,107,26,.28); box-shadow: var(--glow-accent); }
.dzm-job.done   { border-color: rgba(46,224,107,.4); animation: im-dzm-cardIn .22s var(--ease-out), im-dzm-successFlash 1.8s var(--ease-out); box-shadow: var(--glow-ok); }
.dzm-job.error  { border-color: rgba(255,66,66,.35); box-shadow: var(--glow-err); }
.dzm-job.login_needed { border-color: rgba(255,177,59,.35); box-shadow: 0 0 16px rgba(255,177,59,.3), 0 0 40px rgba(255,177,59,.12); }
.dzm-job-progress {
  height: 8px; border-radius: 4px; overflow: hidden;
  background: rgba(255,255,255,.05);
  margin: 8px 0 8px;
  box-shadow: inset 0 0 4px rgba(0,0,0,.3);
}
.dzm-job-progress > div {
  height: 100%;
  transition: width .3s var(--ease-out);
  background: var(--grad-accent);
}
.dzm-job-log {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--text-dim);
  margin: 0; padding: 6px 10px;
  background: rgba(0,0,0,.4);
  border-radius: 4px;
  border: 1px solid var(--border-soft);
  white-space: pre-wrap; word-break: break-all;
  max-height: 60px; overflow: auto;
}

/* Status pills — neon glow + animated dot for live states. */
.status-pill.stopped  { background: linear-gradient(180deg, rgba(93,107,134,.45), rgba(93,107,134,.22)); color: #c5d1e0; border: 1px solid rgba(93,107,134,.5); border-radius: var(--radius-pill); padding: 4px 10px; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.status-pill.starting { background: linear-gradient(180deg, rgba(255,177,59,.48), rgba(255,177,59,.20)); color: #fef3c7; border: 1px solid rgba(255,177,59,.6); border-radius: var(--radius-pill); padding: 4px 10px; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.status-pill.starting::before { animation: pulseDot .9s ease-in-out infinite; background: #fcd34d; width: 6px; height: 6px; border-radius: 50%; }
.status-pill.crashed  { background: linear-gradient(180deg, rgba(255,66,66,.48), rgba(255,66,66,.20)); color: #fee2e2; border: 1px solid rgba(255,66,66,.6); border-radius: var(--radius-pill); padding: 4px 10px; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.status-pill.deleting { background: linear-gradient(180deg, rgba(255,66,66,.55), rgba(255,66,66,.28)); color: #fef2f2; border: 1px solid rgba(255,66,66,.7); border-radius: var(--radius-pill); padding: 4px 10px; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.status-pill.deleting::before { animation: pulseDot .7s ease-in-out infinite; background: #fca5a5; width: 6px; height: 6px; border-radius: 50%; }
.status-pill.stopping { background: linear-gradient(180deg, rgba(251,146,60,.48), rgba(251,146,60,.20)); color: #fed7aa; border: 1px solid rgba(251,146,60,.6); border-radius: var(--radius-pill); padding: 4px 10px; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.status-pill.stopping::before { animation: pulseDot 1.0s ease-in-out infinite; background: #fdba74; width: 6px; height: 6px; border-radius: 50%; }
.status-pill.creating { background: linear-gradient(180deg, rgba(255,107,26,.48), rgba(255,107,26,.20)); color: #cffafe; border: 1px solid rgba(255,107,26,.6); border-radius: var(--radius-pill); padding: 4px 10px; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.status-pill.installing { background: linear-gradient(180deg, rgba(255,107,26,.52), rgba(255,107,26,.25)); color: #cffafe; border: 1px solid rgba(255,107,26,.65); border-radius: var(--radius-pill); padding: 4px 10px; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.status-pill.installing::before { animation: pulseDot .8s ease-in-out infinite; background: #a5f3fc; width: 6px; height: 6px; border-radius: 50%; }
.status-pill.ready { background: linear-gradient(180deg, rgba(46,224,107,.52), rgba(46,224,107,.26)); color: #d1fae5; border: 1px solid rgba(46,224,107,.7); border-radius: var(--radius-pill); padding: 4px 10px; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; box-shadow: var(--glow-ok); }
.status-pill.ready::before { animation: none; background: var(--ok); width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 12px var(--ok); }

.metrics { padding: 9px 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.metric { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.metric .label {
  width: 40px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .7px;
  font-size: 9.5px; font-weight: 600;
}
.metric .bar {
  flex: 1; height: 5px;
  background: rgba(0,0,0,.42);
  border-radius: 3px; overflow: hidden;
}
.metric .fill {
  height: 100%; width: 0%; border-radius: inherit;
  transition: width .6s var(--ease-out), background .3s;
  position: relative;
  background: var(--grad-accent);
}
.metric .fill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.25) 50%, transparent 100%);
  transform: translateX(-100%);
  /* PERF: the shimmer used to run infinitely on EVERY stat bar of EVERY
     card — dozens of always-on animation layers. Now it plays only on the
     card you're actually looking at (hover). */
}
.card:hover .metric .fill::after, .metric:hover .fill::after {
  animation: barShine 3s ease-in-out infinite;
}
@keyframes barShine { 50% { transform: translateX(100%); } 100% { transform: translateX(100%); } }
.metric .val {
  width: 80px; text-align: right;
  font-family: var(--mono); font-size: 10.5px; color: var(--text);
  font-variant-numeric: tabular-nums;
}

.actions-row {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(255,107,26,.02), rgba(95,178,255,.01));
}


/* ===================== REGION: forms ===================== */
/* =============== FORMS & BUTTONS =============== */
button {
  font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  padding: 7px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,.05); color: var(--text);
  cursor: pointer;
  position: relative; overflow: hidden;
  transition: background .15s var(--ease-out), border-color .15s, transform .1s, box-shadow .15s, color .12s;
  letter-spacing: .1px;
  line-height: 1.3;
}
button:hover {
  background: rgba(255,255,255,.09);
  border-color: var(--border);
  color: #fff;
}
button:active { transform: scale(.98); transition-duration: .05s; }

button.primary {
  background: var(--grad-accent);
  color: #05070a;
  border-color: transparent;
  font-weight: 700;
  box-shadow: 0 2px 12px rgba(255,107,26,.28);
}
button.primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 4px 18px rgba(255,107,26,.45);
  border-color: transparent;
  color: #05070a;
}
button.primary:active { transform: scale(.98); }

button.danger {
  color: #fca5a5;
  border-color: rgba(255,66,66,.4);
  background: rgba(255,66,66,.12);
}
button.danger:hover {
  background: rgba(255,66,66,.22);
  border-color: var(--err);
  color: #fff;
}
button.danger:active { transform: scale(.98); }

button.ghost { background: transparent; border-color: transparent; box-shadow: none; }
button.ghost:hover { background: rgba(255,107,26,.1); border-color: rgba(255,107,26,.3); }
button.small { padding: 5px 10px; font-size: 11.5px; border-radius: var(--radius-sm); }
button:disabled { opacity: .4; cursor: not-allowed; filter: none; transform: none !important; }
button:disabled:hover { filter: none; transform: none; box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 1px 2px rgba(0,0,0,.25); }

input, select, textarea {
  font-family: var(--sans); font-size: 12.5px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  transition: border-color .18s, box-shadow .18s, background .18s;
  line-height: 1.3;
}
input::placeholder, textarea::placeholder {
  color: rgba(154,163,179,.42);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}
input:focus::placeholder, textarea:focus::placeholder { color: rgba(154,163,179,.28); }
input:hover, select:hover, textarea:hover {
  border-color: var(--border);
  background: var(--surface-3);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-3);
}
input.mono, textarea.mono { font-family: var(--mono); font-size: 12.5px; }

/* Hide the native number spinners — they look ugly on dark backgrounds. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; font-family: var(--mono); }

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' stroke='%23ff6b1a' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 30px;
}

label {
  font-size: 11.5px; color: var(--text-dim);
  font-weight: 600; text-transform: uppercase; letter-spacing: .7px;
}

/* iOS-style toggle switch (replaces checkbox in config forms). */
.toggle {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer; user-select: none;
}
.toggle input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.toggle .track {
  width: 40px; height: 22px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  position: relative;
  transition: background .2s, border-color .2s, box-shadow .2s;
  flex-shrink: 0;
}
.toggle .track::after {
  content: ""; position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #eef1fa;
  box-shadow: 0 2px 4px rgba(0,0,0,.4);
  transition: transform .22s var(--ease-out), background .2s;
}
.toggle input:checked + .track {
  background: var(--grad-accent);
  border-color: rgba(255,107,26,.55);
  box-shadow: var(--glow-accent), inset 0 1px 0 rgba(255,255,255,.2);
}
.toggle input:checked + .track::after { transform: translateX(18px); background: #fff; }
.toggle .label-txt { font-size: 12.5px; font-weight: 500; color: var(--text); text-transform: none; letter-spacing: 0; }
.toggle .label-txt.on { color: var(--accent); }

.form-grid {
  display: grid; gap: 10px 14px; padding: 16px 18px;
  grid-template-columns: 100px 1fr; align-items: center;
}
.form-grid > .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.form-grid input, .form-grid select { min-width: 0; flex: 1; }
.form-grid .row > * { min-width: 0; }
.form-grid .row > input, .form-grid .row > select { flex: 1 1 140px; }

/* =============== MODULE PICKER TILES (New Server modal) =============== */
.module-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  width: 100%;
  max-height: 480px;
  overflow-y: auto;
  padding: 2px 2px 4px;
}
.module-tile {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--border);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--bg-raised);
  transition: transform .18s var(--ease-out), border-color .15s, box-shadow .2s;
  animation: cardIn .22s var(--ease-out) both;
}
.module-tile:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: rgba(255,107,26,.5);
  z-index: 1;
}
.module-tile.selected {
  border-color: transparent;
  box-shadow:
    0 0 0 2px var(--accent),
    0 0 24px rgba(255,107,26,.35),
    0 8px 28px rgba(0,0,0,.5);
  transform: translateY(-2px);
}
.module-tile::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,107,26,.22) 0%, transparent 60%);
  opacity: 0; transition: opacity .2s;
}
.module-tile:hover::before { opacity: 1; }
.module-tile .mt-name {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 12px 10px;
  background: linear-gradient(0deg, rgba(0,0,0,.95) 15%, rgba(0,0,0,.6) 60%, rgba(0,0,0,0));
  font-size: 13.5px; font-weight: 600;
  color: #fff;
  letter-spacing: 0;
  line-height: 1.3;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.module-tile .mt-check {
  position: absolute; top: 8px; right: 8px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent);
  color: #0b1020; font-size: 15px; line-height: 24px; text-align: center;
  font-weight: 800;
  opacity: 0; transform: scale(.6);
  transition: opacity .15s, transform .15s var(--ease-out);
}
.module-tile.selected .mt-check { opacity: 1; transform: scale(1); }

/* Server-ID input pair: a friendly "Display name" field that mirrors
   to the real kebab-case id on the side, and a live preview of the
   final id + a toggle to edit the raw id manually. */
.id-preview {
  display: flex; align-items: center; gap: 8px;
  margin-top: 6px; font-size: 11.5px; color: var(--text-dim);
}
.id-preview .mono {
  font-family: var(--mono); color: var(--accent);
  background: rgba(255,107,26,.12);
  padding: 2px 8px; border-radius: 4px;
  border: 1px solid rgba(255,107,26,.28);
}
.id-preview .edit-link {
  margin-left: auto; font-size: 11px; cursor: pointer;
  color: var(--text-dim); text-decoration: underline dotted;
}
.id-preview .edit-link:hover { color: var(--accent); }
/* The hint/help line under an input, living in the same grid cell without stretching the input. */
.form-hint {
  font-size: 11px; color: var(--text-dim);
  margin-top: 2px; min-width: 0;
  line-height: 1.4;
}

/* =============== TABLES =============== */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 11px 18px; text-align: left; border-bottom: 1px solid var(--border-soft); }
th {
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .8px; color: var(--text-dim);
  background: linear-gradient(180deg, rgba(255,107,26,.04), transparent);
}
tr:last-child td { border-bottom: none; }
tr { transition: background .12s; }
tr:hover { background: rgba(255,107,26,.08); }
.mono { font-family: var(--mono); font-size: 12px; }
.dim  { color: var(--text-dim); font-size: 12px; }

/* =============== GLOBAL ACTION BAR =============== */
.global-bar {
  display: flex; gap: 10px; align-items: center;
  padding: 4px 2px;
}
.global-bar .sub {
  color: var(--text-dim); font-size: 12.5px; font-weight: 500;
}

/* ===================== REGION: agentpanes ===================== */
/* =============== AGENT PANES (each pane = full panel card) =============== */
#agents-wrap {
  display: flex; flex-direction: column; gap: 18px;
}
.agent-pane {
  background: var(--grad-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: box-shadow .2s, border-color .2s, background .2s;
}
.agent-pane:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--border-strong);
  background: var(--grad-card-hover);
}
.agent-pane-head {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 22px;
  background: linear-gradient(180deg, rgba(255,107,26,.04), rgba(255,107,26,.01));
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  user-select: none;
  transition: background .15s, border-color .15s;
}
.agent-pane-head:hover {
  background: linear-gradient(180deg, rgba(255,107,26,.08), rgba(255,107,26,.03));
  border-bottom-color: var(--border);
}
.agent-pane-head .chev {
  color: var(--text-dim); font-size: 12px; flex-shrink: 0;
  transition: transform .25s var(--ease-out), color .15s;
  font-family: var(--mono); font-weight: 700;
}
.agent-pane-head:hover .chev {
  color: var(--accent);
}
.agent-pane.collapsed .chev {
  transform: rotate(-90deg);
}
.agent-icon {
  width: 42px; height: 42px; border-radius: var(--radius);
  background: var(--grad-accent);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  box-shadow: 0 6px 14px rgba(255,107,26,.35), inset 0 1px 0 rgba(255,255,255,.25);
  flex-shrink: 0;
  position: relative;
  transition: box-shadow .25s;
}
.agent-pane-head:hover .agent-icon {
  box-shadow: var(--glow-accent), inset 0 1px 0 rgba(255,255,255,.3);
}
.agent-icon::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.3), transparent 60%);
  pointer-events: none;
}
.agent-icon.offline {
  background: linear-gradient(135deg, #2a3244, #1f2632);
  box-shadow: 0 4px 10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
  filter: grayscale(.75) opacity(.6);
}
.agent-pane-head .info {
  min-width: 0; flex: 1;
}
.agent-pane-head .name {
  font-weight: 700; font-size: 15.5px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  letter-spacing: .15px;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--display);
}
.agent-pane-head .name .id-dot {
  font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--text-dim);
  letter-spacing: .4px;
}
.agent-pane-head .name .offline-tag {
  display: inline-block;
  background: rgba(255,66,66,.12); color: #ff8a96;
  border: 1px solid rgba(255,66,66,.3);
  padding: 3px 9px; border-radius: var(--radius-pill);
  font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  font-family: var(--mono);
  transition: all .15s;
}
.agent-pane-head:hover .offline-tag {
  border-color: rgba(255,66,66,.5);
  box-shadow: 0 0 10px rgba(255,66,66,.15);
}
.agent-pane-head .details {
  font-size: 12px; color: var(--text-dim); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--sans);
}
.agent-pane-head .details .mono {
  font-family: var(--mono); font-size: 11.5px; color: var(--accent);
}
.agent-pane-head .notes {
  font-size: 11.5px; color: var(--muted); margin-top: 3px;
  font-style: italic;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--sans);
}
.agent-pane-head .stats {
  font-size: 12px; color: var(--text-dim);
  white-space: nowrap;
  display: flex; gap: 16px; align-items: center;
  flex-shrink: 0;
  font-family: var(--mono);
}
.agent-pane-head .stats .count {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px;
}
.agent-pane-head .stats .count strong {
  color: var(--accent); font-weight: 700; font-size: 18px; font-family: var(--mono);
}
.agent-pane-head .stats .running-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok); margin-right: 5px;
  box-shadow: 0 0 8px var(--ok), 0 0 16px rgba(46,224,107,.2);
  animation: pulseDot 2s ease-in-out infinite;
}
.agent-pane-head .actions {
  display: flex; gap: 8px; flex-shrink: 0;
}
.agent-pane-head .actions button {
  position: relative; z-index: 2;
}
.agent-pane-body {
  transition: max-height .35s var(--ease-out), opacity .25s;
  overflow: hidden;
  max-height: 9999px;
}
.agent-pane.collapsed .agent-pane-body {
  max-height: 0 !important; opacity: 0;
}
.agent-pane-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 18px;
  padding: 20px;
}
.agent-pane-empty {
  padding: 36px 22px;
  color: var(--text-dim); font-size: 13px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255,107,26,.02), transparent);
  border-top: 1px solid var(--border-soft);
  transition: background .2s;
}
.agent-pane-empty.offline {
  background: linear-gradient(180deg, rgba(255,66,66,.04), transparent);
  color: var(--muted);
}
.agent-pane-empty .big {
  font-size: 36px; opacity: .25; margin-bottom: 8px;
  animation: glowBreathe 4s ease-in-out infinite;
}
.agent-pane-empty button {
  margin-top: 12px;
}

/* =============== EVENT FEED =============== */
#events {
  font-family: var(--mono); font-size: 12px; height: 320px; overflow-y: auto;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(4,6,10,.8), rgba(7,10,16,.95));
  border-top: 1px solid var(--border-soft);
  position: relative;
}
#events::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,107,26,.1), transparent);
  pointer-events: none;
}
.ev {
  padding: 3px 0; line-height: 1.7; white-space: pre-wrap; word-break: break-all;
  color: var(--text-dim);
  transition: color .15s;
}
.ev:hover {
  color: var(--text);
}
.ev .t {
  color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; margin-right: 8px;
  opacity: .6;
  transition: opacity .15s;
}
.ev:hover .t {
  opacity: .8;
}
.ev .k {
  color: var(--accent); font-weight: 700; letter-spacing: .4px;
}
.ev.log .k {
  color: #64748b;
}
.ev.state .k {
  color: #ffc24b;
}
.ev.player .k {
  color: #2ee06b;
}
.ev.log .i {
  color: #a8b5d6;
}
.ev.state .i {
  color: #fde09e;
}
.ev.player .i {
  color: var(--ok);
}
.ev .i {
  color: #a8b5d6;
}

/* ===================== REGION: modal ===================== */
/* =============== MODAL =============== */
.modal-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,.82); z-index: 100;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  animation: bgFadeIn .18s ease-out;
}
.modal-bg.closing { animation: bgFadeOut .14s ease-in forwards; }
.modal-bg.closing .modal { animation: modalOut .14s cubic-bezier(.4, 0, .7, .4) forwards; }
@keyframes bgFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes bgFadeOut { from { opacity: 1; } to { opacity: 0; } }
.modal {
  background: linear-gradient(180deg, rgba(22,32,50,.95) 0%, rgba(11,17,28,.98) 100%);
  border: 1px solid rgba(255,107,26,.18);
  border-radius: var(--radius-lg);
  width: min(1100px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  display: flex; flex-direction: column; overflow: hidden;
  animation: modalIn .22s cubic-bezier(.16, 1, .3, 1);
  will-change: transform, opacity;
  position: relative;
  transform-origin: center 30%;
}
.modal::before {
  content:""; position:absolute; inset:0; border-radius: inherit; pointer-events:none;
  background: radial-gradient(circle at 0% 0%, rgba(255,107,26,.08), transparent 40%),
              radial-gradient(circle at 100% 0%, rgba(95,178,255,.06), transparent 40%);
}
.modal > * { position: relative; z-index: 1; }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(10px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes modalOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(6px) scale(.97); }
}
@media (prefers-reduced-motion: reduce) {
  .modal-bg { animation: bgFadeIn .12s linear; }
  .modal-bg.closing { animation: bgFadeOut .1s linear forwards; }
  .modal { animation: modalReducedIn .12s linear; will-change: opacity; }
  .modal-bg.closing .modal { animation: modalReducedOut .1s linear forwards; }
  @keyframes modalReducedIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes modalReducedOut { from { opacity: 1; } to { opacity: 0; } }
}
.modal.small { width: min(480px, calc(100vw - 32px)); }
.modal.wide  { width: min(780px, calc(100vw - 32px)); }
.modal.large { width: min(1240px, calc(100vw - 32px)); height: min(820px, calc(100vh - 32px)); }
.modal-head {
  padding: 11px 16px; border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, rgba(255,107,26,.05), transparent);
}
.modal-head .title { flex: 1; font-family: var(--mono); font-size: 12.5px; color: var(--text-dim); }
.modal-head h3 { margin: 0; font-size: 13.5px; font-weight: 600; flex: 1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color: var(--text);}
.modal-body { flex: 1; overflow: auto; }
/* ============================================================
   New-server modal — DEAD-SIMPLE single scrolling box (new.html).
   THIS is the file the panel actually serves by default.
   The modal body is ONE overflow:auto container holding the form,
   options, game grid AND the actions bar. No flex height juggling,
   no nested scrollers, no fixed pixel height. The Create button is
   sticky to the bottom of that scroller and also in normal flow, so
   it can never be trapped off-screen — if content (7DTD's tall
   config) overflows, you just scroll the one box.
   ============================================================ */
#new-server-modal .modal {
  display: block;                  /* override the global flex modal */
  height: auto;
  max-height: calc(100dvh - 24px);
  overflow: hidden;                /* clip rounded corners; body scrolls */
}
.modal-body.new-server-body {
  display: block;
  max-height: calc(100dvh - 24px - 46px); /* viewport cap minus the head bar */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0;
}
.ns-form-top {
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--border-soft);
}
.ns-form-top .id-preview { margin-top: 6px; }
.ns-game-section { padding: 12px 20px 8px; }
.ns-game-header {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 8px;
}
.ns-game-scroll { padding-right: 4px; }
.ns-game-scroll .module-picker-grid {
  max-height: none;
  overflow: visible;
  align-content: start;
}
.ns-game-scroll .module-tile { animation: none; }
.ns-game-scroll .module-tile { transform: translateZ(0); }
.ns-actions {
  position: sticky; bottom: 0; z-index: 3;
  padding: 12px 20px;
  border-top: 1px solid var(--border-soft);
  background: var(--surface);   /* opaque so scrolled content doesn't show through */
  display: flex; justify-content: flex-end; gap: 8px;
}
@media (max-width: 720px) {
  #new-server-modal .modal { height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .modal-body.new-server-body { max-height: calc(100dvh - 46px); }
  .ns-form-top { padding: 12px 14px 10px; }
  .ns-game-section { padding: 10px 14px 6px; }
  .ns-actions { padding: 10px 14px; }
}
#editor-modal .modal {
  width: min(1280px, calc(100vw - 32px));
  height: min(86vh, 920px);
  max-height: 86vh;
  display: flex; flex-direction: column;
}
.modal-body.editor {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0;
  background: linear-gradient(180deg, #030507 0%, #070a0e 100%);
  overflow: hidden;
  position: relative;
}
.editor-find-hl {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  display: none;
  border-left: 4px solid var(--accent);
  background: linear-gradient(90deg, rgba(255,107,26,.22) 0%, rgba(95,178,255,.12) 50%, rgba(255,107,26,.08) 100%);
  border-radius: 0 4px 4px 0;
  transition: top .25s var(--ease-out);
}
.editor-find-hl.pulse {
  animation: editorFindPulse 1.6s var(--ease-out);
}
@keyframes editorFindPulse {
  0% {
    background: linear-gradient(90deg, rgba(255,107,26,.65) 0%, rgba(95,178,255,.42) 50%, rgba(255,107,26,.18) 100%);
    border-left-width: 6px;
    transform: translateX(-3px);
  }
  18% {
    transform: translateX(0);
  }
  60% {
    background: linear-gradient(90deg, rgba(255,107,26,.42) 0%, rgba(95,178,255,.28) 50%, rgba(255,107,26,.14) 100%);
  }
  100% {
    background: linear-gradient(90deg, rgba(255,107,26,.22) 0%, rgba(95,178,255,.12) 50%, rgba(255,107,26,.08) 100%);
    border-left-width: 4px;
  }
}
.editor-search-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.editor-search-bar .es-input-wrap {
  position: relative; flex: 1; max-width: 360px;
}
.editor-search-bar .es-input-wrap::before {
  content: "🔍"; position: absolute; left: 9px; top: 50%;
  transform: translateY(-50%); font-size: 11px; opacity: .6;
  pointer-events: none;
}
.editor-search-bar input[type="text"] {
  width: 100%; padding: 6px 10px 6px 28px; font-size: 12.5px;
  font-family: var(--mono);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  color: var(--text);
  border-radius: var(--radius-sm);
  transition: border-color .2s, box-shadow .2s;
}
.editor-search-bar input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
}
.editor-search-bar .es-count {
  font-size: 11.5px; color: var(--text-dim);
  font-family: var(--mono); min-width: 56px; text-align: center;
  padding: 4px 8px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.04); border: 1px solid var(--border-soft);
}
.editor-search-bar .es-count.has-match { color: var(--accent); border-color: rgba(255,107,26,.35); }
.editor-search-bar .es-count.no-match  { color: var(--err); border-color: rgba(255,66,66,.25); }
.editor-search-bar button.es-nav {
  width: 28px; height: 28px; padding: 0;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border-soft);
  color: var(--text-dim);
  font-size: 12px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .15s, background .15s, border-color .15s;
  box-shadow: none;
}
.editor-search-bar button.es-nav:hover { color: var(--text); background: rgba(255,107,26,.12); border-color: rgba(255,107,26,.3); transform: none; }
.editor-search-bar button.es-nav:disabled { opacity: .35; cursor: not-allowed; }
.editor-search-bar .es-help {
  font-size: 10.5px; color: var(--muted);
  margin-left: auto;
}
.editor-search-bar .es-help kbd {
  display: inline-block; padding: 1px 5px; border-radius: 3px;
  background: rgba(255,107,26,.08); border: 1px solid var(--border-soft);
  font-family: var(--mono); font-size: 10px; color: var(--text-dim);
  margin: 0 2px;
}
.modal-body.editor textarea {
  flex: 1; width: 100%; padding: 14px 18px; border: none; outline: none; resize: none;
  background: linear-gradient(180deg, #030507 0%, #070a0e 100%); color: var(--text);
  font-family: var(--mono); font-size: 13px; line-height: 1.6;
  min-height: 0;
  tab-size: 2;
}
.modal-body .pad { padding: 14px 16px; }
.modal-body code { background: rgba(255,107,26,.08); padding: 1px 5px; border-radius: 3px; font-family: var(--mono); font-size: 11.5px; color: var(--accent); }

/* =============== INSTANCE MODAL =============== */
.im-head {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-raised);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.im-head .banner {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 35%;
  opacity: 0; transition: opacity .3s;
  z-index: -2;
}
.im-head.has-banner .banner { opacity: .28; }
.im-head.has-banner::after {
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(90deg, rgba(12,17,27,.92) 0%, rgba(12,17,27,.72) 55%, rgba(12,17,27,.55) 100%);
}
.im-head.has-banner .titles .t { color:#fff; text-shadow: 0 2px 8px rgba(0,0,0,.85); }
.im-head .game-tile {
  width: 56px; height: 56px; flex: 0 0 56px; font-size: 30px;
  border-radius: var(--radius); overflow: hidden;
  display:flex;align-items:center;justify-content:center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 18px rgba(0,0,0,.5);
}
.im-head .titles { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.im-title-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.im-head .titles .t {
  font-size: 19px; font-weight: 800; letter-spacing: -.3px; color: var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap; min-width: 0;
}
.im-head .titles .s { font-size: 12px; color: var(--text-dim); }
#im-bloodmoon {
  flex: 0 0 auto; padding: 3px 9px; border-radius: var(--radius-pill);
  font-size: 10.5px; font-weight: 700;
  background: rgba(255,60,60,.18); border: 1px solid rgba(255,60,60,.5); color: #ff6b6b;
}
/* Live header stat chips. */
.im-head-stats { display: flex; align-items: center; gap: 16px; margin-top: 5px; flex-wrap: wrap; }
.im-hstat { display: inline-flex; align-items: baseline; gap: 5px; font-size: 12px; color: var(--text-dim); }
.im-hstat[hidden] { display: none; }
.im-hstat .ic { font-size: 11px; opacity: .7; align-self: center; }
.im-hstat b { font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.im-hstat .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; opacity: .65; }
.im-head .quick { display:flex; align-items: center; gap:7px; flex: 0 0 auto; }

/* Modal header action buttons — match the card action row. */
.im-act-primary {
  height: 36px; padding: 0 16px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: transform .12s var(--ease-out), background .18s, box-shadow .2s, color .15s, border-color .18s;
}
.im-act-primary svg { width: 15px; height: 15px; }
.im-act-primary:active { transform: scale(.97); }
.im-act-primary.act-start { background: var(--grad-accent-2); color: #04200f; box-shadow: 0 2px 12px rgba(46,224,107,.3); }
.im-act-primary.act-start:hover:not(:disabled) { filter: brightness(1.07); box-shadow: 0 4px 18px rgba(46,224,107,.5); }
.im-act-primary.act-stop { background: rgba(255,66,66,.16); color: #fca5a5; border-color: rgba(255,66,66,.45); }
.im-act-primary.act-stop:hover:not(:disabled) { background: rgba(255,66,66,.26); color: #fff; border-color: var(--err); }
.im-act-ghost {
  height: 36px; padding: 0 14px;
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.05); border: 1px solid var(--border-soft);
  color: var(--text-dim); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .18s, border-color .18s, color .15s, transform .12s;
}
.im-act-ghost svg { width: 15px; height: 15px; }
.im-act-ghost:hover:not(:disabled) { background: rgba(255,177,59,.14); border-color: rgba(255,177,59,.5); color: var(--amber); }
.im-act-ghost:active { transform: scale(.97); }
.im-act-primary:disabled, .im-act-ghost:disabled { opacity: .4; cursor: not-allowed; }
.im-act-close {
  width: 36px; height: 36px; flex: 0 0 36px; margin-left: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: transparent; border: 1px solid var(--border-soft);
  color: var(--text-dim); cursor: pointer;
  transition: background .18s, border-color .18s, color .15s;
}
.im-act-close svg { width: 16px; height: 16px; }
.im-act-close:hover { background: rgba(255,66,66,.14); border-color: rgba(255,66,66,.5); color: #fca5a5; }
.im-tabs {
  display: flex; gap: 3px; padding: 7px 14px;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  position: relative;
  scrollbar-width: thin;
  align-items: center;
}
.im-tabs::-webkit-scrollbar { height: 4px; }
.im-tabs::-webkit-scrollbar-thumb { background: rgba(255,107,26,.15); border-radius: 4px; }
.im-tab {
  padding: 8px 13px; cursor: pointer;
  font-size: 12.5px; font-weight: 600;
  color: var(--text-dim);
  border: 1px solid transparent; background: none; box-shadow: none;
  border-radius: var(--radius-pill);
  transition: color .16s, background .16s, border-color .16s;
  white-space: nowrap;
  position: relative;
  display: inline-flex; align-items: center; gap: 6px; line-height: 1;
  flex: 0 0 auto;
}
.im-tab:hover { color: var(--text); background: rgba(255,255,255,.05); }
.im-tab.active {
  color: var(--accent);
  background: rgba(255,107,26,.12);
  border-color: rgba(255,107,26,.4);
}
.im-tab .icn {
  font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; height: 1em; width: 1em;
  filter: saturate(1.05);
}
/* Divider between core tabs and the game-specific tab group. */
.im-tab-divider {
  width: 1px; height: 20px; flex: 0 0 1px;
  background: var(--border); margin: 0 6px;
}
.im-panel {
  display: none; flex: 1; overflow: auto; flex-direction: column;
  animation: fadeSlide .26s var(--ease-out);
}
.im-panel.active { display: flex; }
@keyframes fadeSlide { from { opacity: 0; transform: translateY(8px) scale(.997); } to { opacity: 1; transform: none; } }
.modal-body.im-body { display: flex; flex-direction: column; padding: 0; }

/* === EAH tab styling === */
.eah-pills { display: flex; gap: 6px; padding: 12px 16px 8px; flex-wrap: wrap; border-bottom: 1px solid var(--border-soft); align-items: center; }
.eah-keyhint { margin-left: auto; font-size: 11px; color: rgba(255,107,26,.35); user-select: none; cursor: help; letter-spacing: .03em; }
textarea.eah-note { width: 100%; min-height: 28px; resize: vertical; font: inherit; font-size: 12px; padding: 4px 6px; border-radius: 4px; border: 1px solid var(--border-soft); background: rgba(11,17,28,.8); color: inherit; box-sizing: border-box; transition: border-color .25s, background .25s, box-shadow .25s; }
textarea.eah-note.saving { border-color: rgba(255,177,59,.4); background: rgba(255,177,59,.06); box-shadow: 0 0 10px rgba(255,177,59,.12); }
textarea.eah-note.saved { border-color: rgba(46,224,107,.4); background: rgba(46,224,107,.08); box-shadow: 0 0 12px rgba(46,224,107,.15); }
textarea.eah-note.save-err { border-color: rgba(255,66,66,.45); background: rgba(255,66,66,.08); box-shadow: 0 0 10px rgba(255,66,66,.15); }
dialog.eah-ban-dlg[open] { padding: 0; border: 1px solid rgba(255,107,26,.2); border-radius: var(--radius-sm); background: linear-gradient(180deg, rgba(22,32,50,.95) 0%, rgba(11,17,28,.98) 100%); color: #e8eaf2; max-width: 360px; }
dialog.eah-ban-dlg::backdrop { background: rgba(0,0,0,.65); }
dialog.eah-ban-dlg[open] .eah-ban-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
dialog.eah-ban-dlg[open] .eah-ban-grid button { padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-soft); background: rgba(255,107,26,.08); color: inherit; cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s; }
dialog.eah-ban-dlg[open] .eah-ban-grid button.danger { border-color: rgba(255,66,66,.3); }
dialog.eah-ban-dlg[open] .eah-ban-grid button.danger:hover { background: rgba(255,66,66,.15); border-color: rgba(255,66,66,.5); box-shadow: 0 0 10px rgba(255,66,66,.12); }
.live-row { padding: 2px 0; border-bottom: 1px dashed rgba(255,107,26,.06); white-space: pre-wrap; word-break: break-word; }
.live-row:hover { background: rgba(255,107,26,.04); }
.live-ts { color: rgba(147,161,189,.5); margin-right: 6px; }
.live-cmd { color: var(--accent); font-weight: 600; margin-right: 6px; }
.live-player { color: var(--amber); margin-right: 6px; }
.live-pf { color: var(--ok); margin-right: 6px; }
.live-detail { color: rgba(234,241,255,.8); }
.eah-pill {
  background: rgba(255,107,26,.08); border: 1px solid var(--border-soft);
  color: var(--text); padding: 6px 12px; border-radius: 999px;
  font-size: 12.5px; cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s;
}
.eah-pill.active { background: var(--grad-accent); border-color: rgba(255,107,26,.4); color: #fff; box-shadow: 0 0 16px rgba(255,107,26,.3); font-weight: 600; }
.eah-body { flex: 1; overflow: auto; padding: 8px 16px 16px; }
.eah-body .pad { padding: 12px; }
.eah-body .empty { padding: 24px; text-align: center; color: var(--muted); }
.eah-body .empty.err { color: var(--err); font-family: var(--mono); white-space: pre-wrap; }
.eah-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.eah-table th, .eah-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border-soft); }
.eah-table th { color: var(--muted); font-weight: 500; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; background: rgba(255,107,26,.04); }
.eah-table tbody tr:hover { background: rgba(255,107,26,.06); }
.eah-table button { margin-right: 4px; }
.eah-search { display: flex; gap: 8px; padding: 8px 12px; }
.eah-search input, .eah-search select {
  flex: 1; padding: 6px 10px; background: rgba(11,17,28,.8);
  border: 1px solid var(--border-soft); border-radius: 4px; color: var(--text);
  transition: border-color .2s, box-shadow .2s;
}
.eah-search input:focus, .eah-search select:focus {
  outline: none;
  border-color: rgba(255,107,26,.35);
}
.eah-search select { flex: 0 0 200px; }
.eah-item-grid { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 8px 12px; max-height: 60vh; overflow: auto; }
.eah-item-row { padding: 6px 10px; border-radius: 4px; background: rgba(255,107,26,.06); display: flex; gap: 10px; align-items: center; transition: background .12s; }
.eah-item-row:hover { background: rgba(255,107,26,.12); }
.eah-item-icon { width: 32px; height: 32px; flex: 0 0 32px; image-rendering: pixelated; background: rgba(11,17,28,.6); border-radius: 4px; }
.eah-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.7);
  z-index: 9999; display: flex; align-items: center; justify-content: center;
}
.eah-modal-card {
  width: min(640px, 90vw); max-height: 80vh; display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(22,32,50,.95) 0%, rgba(11,17,28,.98) 100%); border: 1px solid rgba(255,107,26,.18); border-radius: var(--radius-sm);
  box-shadow: 0 30px 80px rgba(0,0,0,.7);
}
.eah-modal-head {
  padding: 12px 16px; font-weight: 500; display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--border-soft);
}
.eah-modal-head button { background: transparent; border: none; color: var(--muted); font-size: 16px; cursor: pointer; transition: color .15s; }
.eah-modal-head button:hover { color: var(--text); }
.eah-modal-card input#eah-give-q { margin: 12px; padding: 8px 12px; background: rgba(11,17,28,.8); border: 1px solid var(--border-soft); border-radius: 4px; color: var(--text); transition: border-color .2s, box-shadow .2s; }
.eah-modal-list { flex: 1; overflow: auto; padding: 0 12px 12px; }
.eah-give-row { padding: 8px 10px; border-radius: 4px; cursor: pointer; transition: background .12s; }
.eah-give-row:hover { background: rgba(255,107,26,.12); }
.eah-modal-foot { padding: 12px 16px; border-top: 1px solid var(--border-soft); }
.eah-scenario { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 4px; background: rgba(255,107,26,.06); margin-bottom: 6px; }
.eah-job { padding: 12px; border-radius: 4px; background: rgba(255,107,26,.06); }
.eah-job .err { color: var(--err); }
.eah-job-log { max-height: 240px; overflow: auto; font-size: 11.5px; padding: 8px; background: rgba(11,17,28,.8); border-radius: 4px; white-space: pre-wrap; border: 1px solid var(--border-soft); }
.eah-tpl { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 4px; background: rgba(255,107,26,.06); margin-bottom: 6px; }
.eah-map-canvas { background: rgba(11,17,28,.6); border-radius: var(--radius-sm); padding: 4px; border: 1px solid var(--border-soft); }
.chat-row { padding: 4px 6px; border-radius: 3px; display: grid; grid-template-columns: 110px 80px 140px 1fr; gap: 8px; align-items: baseline; font-size: 12.5px; transition: background .12s; }
.chat-row:hover { background: rgba(255,107,26,.06); }
.chat-ch { font-size: 11px; padding: 1px 6px; border-radius: 999px; text-align: center; font-weight: 500; }
.chat-ch-0 { background: rgba(46,224,107,.15); color: var(--ok); }
.chat-ch-1 { background: rgba(255,177,59,.15); color: var(--amber); }
.chat-ch-2 { background: rgba(95,178,255,.15); color: var(--accent-2); }
.chat-ch-3 { background: rgba(255,107,26,.15); color: var(--accent); }
.chat-ch-4 { background: rgba(255,138,71,.15); color: var(--accent-hot); }
.health-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.health-card { padding: 10px 12px; border-radius: var(--radius-sm); background: rgba(255,107,26,.06); border: 1px solid var(--border-soft); transition: background .12s, border-color .12s; }
.health-card:hover { background: rgba(255,107,26,.1); border-color: rgba(255,107,26,.2); }
.galaxy-star { cursor: pointer; }
.galaxy-star:hover circle { stroke: var(--accent); stroke-width: 2; }
.galaxy-sector { padding: 6px 8px; margin-top: 6px; border-radius: 4px; background: rgba(255,107,26,.06); }
.galaxy-pf { padding: 2px 0 2px 12px; font-size: 12.5px; }
.ban-remaining { font-variant-numeric: tabular-nums; }

/* Console tab — matches the main-dashboard Live events look so the two
   feel like the same surface at different scopes. */
.console-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; position: relative; }
/* "N new lines ↓" chip — shows while the user is scrolled up reading
   history and new output is streaming in below. Click = jump to live. */
.console-newchip {
  position: absolute;
  bottom: 68px; /* clears the command input bar */
  left: 50%; transform: translateX(-50%);
  display: none;
  padding: 5px 14px;
  border: 1px solid rgba(255,107,26,.5);
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--accent);
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.5);
  z-index: 4;
}
.console-newchip.on { display: inline-block; }
.console-newchip:hover { background: rgba(255,107,26,.15); }
.im-install-banner {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 16px;
  margin: 8px 12px;
  background: linear-gradient(135deg, rgba(255,107,26,.14), rgba(95,178,255,.08));
  border: 1px solid rgba(255,107,26,.3);
  border-radius: var(--radius-sm);
  color: #e0e7ff;
  animation: installBannerIn .25s var(--ease-out);
}
@keyframes installBannerIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.im-install-banner .ib-spinner {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border: 2.5px solid rgba(255,107,26,.25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: ibSpin .9s linear infinite;
  margin-top: 2px;
}
@keyframes ibSpin { to { transform: rotate(360deg); } }
.im-install-banner .ib-body { flex: 1; min-width: 0; }
.im-install-banner .ib-title {
  font-size: 13px; font-weight: 700; letter-spacing: .01em;
  color: #ffffff;
}
.im-install-banner .ib-sub {
  font-family: var(--mono); font-size: 11.5px;
  color: rgba(255,107,26,.8);
  margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.im-install-banner .ib-hint {
  font-size: 11.5px; color: rgba(234,241,255,.55);
  margin-top: 6px; line-height: 1.45;
}
.console-out {
  flex: 1; margin: 0; padding: 12px 16px;
  font-family: var(--mono); font-size: 12px;
  line-height: 1.55;
  overflow: auto; white-space: pre-wrap; word-break: break-word;
  /* The pit: flat near-black ground with faint scanlines, phosphor-warm
     body text — voiced after the refugebot server console. */
  background-color: #050608;
  background-image: repeating-linear-gradient(
    0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px);
  border-radius: 0;
  /* Perf: isolate console layout/paint from the rest of the modal.
     NOTE: no content-visibility on lines — lazy rendering made scrolling
     feel like page-flips and turned scrollHeight into an estimate, which
     broke jump-to-bottom (the repin chip glitch). */
  contain: layout paint;
}
.console-out .ln {
  padding: 1px 0; display: flex; gap: 10px; align-items: baseline;
}
.console-out .ln .ts {
  color: rgba(216,203,168,.38); flex-shrink: 0; font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.console-out .ln .txt { min-width: 0; flex: 1; }
.console-out .ln.cmd .txt   { color: var(--accent); font-weight: 600; }
.console-out .ln.reply .txt { color: rgba(95,178,255,.9); }
.console-out .ln.err .txt   { color: var(--err); }
.console-out .ln.sys .txt   { color: var(--warn); font-style: italic; }
.console-out .ln.log .txt   { color: #d8cba8; }
.console-input {
  display: flex; gap: 8px; padding: 12px 16px;
  border-top: 1px solid var(--border); background: var(--bg-raised);
}
.console-input input { font-family: var(--mono); }
.console-input > input { flex: 1; }

/* Console command autocomplete + reference drawer. */
.cch-wrap { position: relative; flex: 1; display: flex; min-width: 0; }
.cch-wrap > input { flex: 1; width: 100%; min-width: 0; }
.cch-drop {
  position: absolute; bottom: calc(100% + 4px); left: 0; right: 0;
  max-height: 260px; overflow: auto;
  background: var(--surface-2); border: 1px solid rgba(255,107,26,.2);
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 22px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,107,26,.1);
  z-index: 5;
  display: none;
}
.cch-drop.on { display: block; }
.cch-item {
  padding: 8px 10px; cursor: pointer;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12px; line-height: 1.35;
  transition: background .12s;
}
.cch-item:last-child { border-bottom: none; }
.cch-item.sel, .cch-item:hover { background: rgba(255,107,26,.12); }
.cch-item .cmd { font-family: var(--mono); font-weight: 600; color: var(--accent); }
.cch-item .args { font-family: var(--mono); color: var(--text-dim); margin-left: 6px; }
.cch-item .desc { color: var(--text-dim); font-size: 11px; margin-top: 2px; }

.cch-drawer {
  margin-top: 10px;
  max-height: 0; overflow: hidden;
  transition: max-height .25s var(--ease-out);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}
.cch-drawer.on {
  max-height: 420px; overflow: auto;
  border-color: rgba(255,107,26,.2);
  background: linear-gradient(180deg, rgba(22,32,50,.9) 0%, rgba(11,17,28,.92) 100%);
}
.cch-drawer .cch-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; border-bottom: 1px solid var(--border-soft);
  position: sticky; top: 0; background: linear-gradient(180deg, rgba(22,32,50,.9) 0%, rgba(11,17,28,.92) 100%); z-index: 1;
}
.cch-drawer .cch-head input {
  flex: 1; margin-right: 8px;
  font-family: var(--sans); font-size: 12px;
  padding: 6px 10px;
}
.cch-cat { padding: 8px 12px; }
.cch-cat h5 {
  margin: 0 0 4px; font-size: 11px; font-weight: 700;
  color: var(--accent); text-transform: uppercase; letter-spacing: .8px;
}
.cch-cat .cch-row {
  padding: 6px 8px; border-radius: var(--radius-sm);
  display: flex; gap: 10px; align-items: flex-start;
  cursor: pointer; font-size: 12px;
  transition: background .1s;
}
.cch-cat .cch-row:hover { background: rgba(255,107,26,.1); }
.cch-cat .cch-row .mono {
  font-family: var(--mono); font-size: 11.5px;
  color: var(--accent); min-width: 130px; flex-shrink: 0;
}
.cch-cat .cch-row .args {
  font-family: var(--mono); font-size: 11px; color: var(--text-dim);
}
.cch-cat .cch-row .desc { color: var(--text-dim); font-size: 11.5px; }
.cch-cat .cch-row .ex {
  font-family: var(--mono); font-size: 10.5px; color: var(--muted);
  margin-top: 2px; display: block;
}

.cch-empty { padding: 20px; text-align: center; font-size: 12px; color: var(--text-dim); }
.console-info { padding: 9px 18px; font-size: 11.5px; color: var(--text-dim); background: var(--bg-raised); border-bottom: 1px solid var(--border-soft); display:flex; gap:14px; align-items:center; transition: color .25s ease; }
.console-info .autoscroll { margin-left: auto; display:inline-flex; align-items:center; gap:6px; cursor: pointer; user-select: none; }
.console-info #im-c-clear {
  padding: 4px 11px; border-radius: var(--radius-sm); font-size: 11.5px; font-weight: 600;
  background: rgba(255,255,255,.05); border: 1px solid var(--border-soft); color: var(--text-dim); cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.console-info #im-c-clear:hover { background: rgba(255,255,255,.08); color: var(--text); border-color: var(--border); }
#im-c-mode.rcon-warn { color: var(--warn); font-weight: 600; }
#im-c-mode.rcon-warn::before { content: ""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--warn); box-shadow:0 0 10px var(--warn); margin-right:6px; vertical-align:middle; animation: pulseDot 1.1s ease-in-out infinite; }

/* Steam OpenID "Sign in through Steam" button. Uses Valve's official
   button asset so the visual matches what users expect from any other
   Steam-auth page. Wrapping in <a> means the click navigates to the
   OpenID redirect endpoint (no JS needed for the happy path). */
.btn-steam-signin {
  display: inline-flex; align-items: center; padding: 0; line-height: 0;
  border: 1px solid transparent; border-radius: var(--radius-sm); overflow: hidden;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  cursor: pointer; flex: 0 0 auto;
}
.btn-steam-signin:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,107,26,.2); border-color: rgba(255,107,26,.3); }
.btn-steam-signin img { display: block; height: 24px; }

/* Fatal-log banner — surfaces when a known crash signature appears in
   the live log stream. Sticky between the console-info chip and the
   log output so it's impossible to miss while scrolling logs. */
.im-fatal-banner {
  position: relative;
  margin: 10px 16px 0;
  padding: 12px 36px 12px 14px;
  border: 1px solid rgba(255,66,66,.35);
  border-left: 4px solid var(--err);
  background: linear-gradient(180deg, rgba(255,66,66,.12), rgba(255,66,66,.06));
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.5;
  animation: im-fatal-slide-in .3s ease-out;
}
@keyframes im-fatal-slide-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.im-fatal-head { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--err); margin-bottom: 4px; font-size: 13px; }
.im-fatal-icon { font-size: 16px; }
.im-fatal-guidance { color: var(--text); margin-bottom: 6px; }
.im-fatal-line { color: var(--text-dim); font-size: 11px; opacity: .8; padding: 6px 8px; background: rgba(0,0,0,.25); border-radius: 4px; word-break: break-all; border: 1px solid rgba(255,66,66,.15); }
.im-fatal-close {
  position: absolute; top: 6px; right: 6px;
  background: transparent; border: 0; color: var(--text-dim);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 4px 8px;
  transition: color .15s;
}
.im-fatal-close:hover { color: var(--text); }

/* Steam-login banner inside the per-instance modal — fires when an
   instance was created with a Steam-gated update_provider but no
   credentials are cached yet. Sticky between the modal head and tab
   body so it's impossible to miss. */
.im-steam-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; margin: 0;
  background: linear-gradient(180deg, rgba(255,107,26,.14), rgba(255,107,26,.06));
  border-bottom: 1px solid rgba(255,107,26,.25);
  color: rgba(234,241,255,.9); font-size: 13px;
}
.im-steam-banner button { margin-left: auto; }

/* Delete-instance modal: type-to-confirm field colors green when the
   id matches the live instance's id — a small but reassuring "yes,
   this is what you mean" signal before the destructive action. */
#del-confirm.ok { border-color: rgba(46,224,107,.4); background: linear-gradient(180deg, rgba(46,224,107,.08), rgba(46,224,107,.02)); box-shadow: 0 0 12px rgba(46,224,107,.15); }

/* Orphaned-instances pane: the agent that owned these is no longer
   connected/registered — instances exist in the DB but can't be
   managed until the agent comes back. Renders with a muted red
   accent so operators notice there's a problem to investigate. */
.agent-pane.orphan { border-color: rgba(255,66,66,.25); background: linear-gradient(180deg, rgba(255,66,66,.06), rgba(255,66,66,.02)); }
.agent-pane.orphan .agent-pane-head { color: var(--err); }
.agent-pane.orphan .agent-icon { background: rgba(255,66,66,.12); border-color: rgba(255,66,66,.3); }

/* Quick-action buttons on card - prevent click-through */
.actions-row button, .actions-row .spacer { position: relative; z-index: 2; }

/* ===== Players tab roster ===== */
.pl-hero {
  display: flex; align-items: center; gap: 16px;
  margin: 16px; padding: 16px 18px;
  background: var(--bg-raised); border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}
.pl-hero-count { display: flex; align-items: baseline; gap: 7px; flex: 0 0 auto; }
.pl-hero-num { font-size: 34px; font-weight: 800; color: var(--accent-2); letter-spacing: -.5px; line-height: 1; }
.pl-hero-cap { font-size: 16px; font-weight: 600; color: var(--text-dim); }
.pl-hero-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); margin-left: 6px; align-self: center; }
.pl-hero-bar { flex: 1; height: 8px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; min-width: 80px; }
.pl-hero-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: width .5s var(--ease-out); }
.pl-hero-pct { font-size: 12px; color: var(--text-dim); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.pl-roster {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px; padding: 0 16px 16px;
}
.pl-card {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px;
  background: var(--bg-raised); border: 1px solid var(--border-soft);
  border-radius: var(--radius); min-width: 0;
  transition: border-color .15s, background .15s;
}
.pl-card:hover { border-color: rgba(95,178,255,.4); }
.pl-avatar {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: #fff;
  background: hsl(var(--ph, 260) 55% 42%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.pl-card-main { flex: 1; min-width: 0; }
.pl-card-name { font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-card-meta { display: flex; gap: 8px; font-size: 11px; color: var(--text-dim); margin-top: 2px; overflow: hidden; }
.pl-card-meta .mono { font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-card-extra { opacity: .8; }
.pl-kick {
  flex: 0 0 auto; padding: 5px 11px; border-radius: var(--radius-sm);
  background: rgba(255,66,66,.12); border: 1px solid rgba(255,66,66,.4);
  color: #fca5a5; font-size: 11.5px; font-weight: 600; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.pl-kick:hover:not(:disabled) { background: rgba(255,66,66,.25); color: #fff; border-color: var(--err); }
.pl-kick:disabled { opacity: .6; cursor: default; }

/* Settings tab layout */
.im-set-grid {
  display: grid; gap: 16px; padding: 18px;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
}
.im-set-card {
  background: var(--bg-raised); border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.im-set-card.danger { grid-column: 1 / -1; border-color: rgba(255,66,66,.25); }
.im-set-card.danger:hover { border-color: rgba(255,66,66,.35); box-shadow: 0 0 20px rgba(255,66,66,.12); }
.im-set-card > header {
  padding: 10px 14px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px;
  color: var(--text-dim); background: rgba(255,255,255,.012);
  border-bottom: 1px solid var(--border-soft);
}
.im-set-card.danger > header { color: var(--err); background: linear-gradient(180deg, rgba(255,66,66,.08), transparent); }
.im-set-card > .body { padding: 14px; }
.im-set-card .kv { display: flex; gap: 12px; padding: 6px 0; align-items: baseline; }
.im-set-card .kv label {
  min-width: 90px; text-transform: uppercase; font-size: 10.5px; font-weight: 600;
  letter-spacing: .5px; color: var(--text-dim);
}
.im-set-ports-tbl { width: 100%; }
.im-set-ports-tbl th { font-size: 10.5px; }
.im-set-ports-tbl td { padding: 8px 10px; }

/* Sub-tab navigation inside the Config tab. Each schema group becomes
   a pill; clicking reveals just that group. Fits way more settings than
   a single scroll. */
.im-cfg-nav {
  display: flex; gap: 4px; padding: 5px;
  background: rgba(255,107,26,.06);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  margin-bottom: 18px;
  flex-wrap: wrap;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.cfg-tab {
  padding: 8px 16px; border-radius: var(--radius-sm);
  background: transparent; border: none; color: var(--text-dim);
  cursor: pointer; font-size: 13px; font-weight: 500;
  transition: color .18s, background .18s, box-shadow .2s;
  white-space: nowrap; box-shadow: none;
}
.cfg-tab:hover { color: var(--text); background: rgba(255,107,26,.1); transform: none; }
.cfg-tab.active {
  background: var(--grad-accent);
  color: #0a0e17; font-weight: 700;
  box-shadow: 0 4px 14px rgba(255,107,26,.35), inset 0 1px 0 rgba(255,255,255,.15);
}
.im-cfg-pane { display: none; }
.im-cfg-pane.active {
  display: block;
  animation: cfgPaneIn .22s var(--ease-out);
}
@keyframes cfgPaneIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.im-cfg-pane-desc {
  font-size: 12.5px; color: var(--text-dim);
  margin-bottom: 14px; padding: 10px 14px;
  background: rgba(255,107,26,.1); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
}
/* Files-tab root picker — horizontal pills, one per browseable_root. */
.fs-roots { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fs-roots .label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px;
  color: var(--text-dim); margin-right: 4px;
}
.fs-root-btn {
  padding: 6px 12px; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid var(--border-soft);
  color: var(--text-dim); font-size: 12.5px; font-weight: 500;
  cursor: pointer; transition: all .15s; box-shadow: none;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
.fs-root-btn:hover { color: var(--text); border-color: rgba(255,107,26,.25); transform: none; }
.fs-root-btn.active {
  background: var(--grad-accent);
  color: #0a0e17; font-weight: 700; border-color: transparent;
  box-shadow: 0 3px 10px rgba(255,107,26,.25);
}
.fs-root-btn .name { font-family: var(--sans); line-height: 1.1; }
.fs-root-btn .hint { font-size: 10.5px; opacity: .75; font-weight: 500; line-height: 1.1; }

/* Files-tab table — selectable rows + checkbox column. */
#im-f-wrap table { width: 100%; border-collapse: collapse; }
#im-f-wrap th, #im-f-wrap td { padding: 6px 10px; vertical-align: middle; }
#im-f-wrap th { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); border-bottom: 1px solid var(--border-soft); position: sticky; top: 0; background: rgba(255,107,26,.04); z-index: 2; }
#im-f-wrap tbody tr { border-bottom: 1px solid var(--border-soft); transition: background .12s; }
#im-f-wrap tbody tr:hover { background: rgba(255,107,26,.08); }
#im-f-wrap tbody tr.selected { background: rgba(255,107,26,.14); }
#im-f-wrap tbody tr.selected:hover { background: rgba(255,107,26,.2); }
#im-f-wrap td.fs-chk { width: 26px; padding-right: 0; }
#im-f-wrap td.fs-chk input { cursor: pointer; }
#im-f-wrap td.fs-name-cell { user-select: none; }
#im-f-wrap td.fs-actions-cell { white-space: nowrap; text-align: right; }

/* Drag-and-drop overlay covers the file pane when files are dragged
   from the OS over the modal. */
.fs-droppy {
  position: absolute; inset: 0;
  background: rgba(255,107,26,.16);
  border: 2px dashed var(--accent);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  z-index: 4; pointer-events: none;
  backdrop-filter: blur(2px);
}
.fs-droppy-msg {
  font-size: 16px; font-weight: 700; color: var(--accent);
  background: rgba(0,0,0,.4); padding: 14px 22px; border-radius: var(--radius);
}

/* Upload progress overlay. */
.fs-prog {
  position: absolute; right: 16px; bottom: 16px; z-index: 5;
  pointer-events: auto;
}
.fs-prog-card {
  min-width: 280px; padding: 12px 14px;
  background: linear-gradient(180deg, rgba(22,32,50,.95) 0%, rgba(11,17,28,.98) 100%); border: 1px solid rgba(255,107,26,.18);
  border-radius: var(--radius); box-shadow: 0 8px 28px rgba(0,0,0,.5);
  display: flex; flex-direction: column; gap: 6px;
}
.fs-prog-title { font-size: 13px; font-weight: 600; color: var(--text); }
.fs-prog-meta { font-size: 11.5px; color: var(--text-dim); }
.fs-prog-bar { width: 100%; height: 6px; background: rgba(255,107,26,.12); border-radius: 999px; overflow: hidden; }
.fs-prog-fill { height: 100%; background: var(--grad-accent); transition: width .15s; }
.fs-prog-actions { display: flex; justify-content: flex-end; gap: 6px; }

/* Right-click context menu. */
.fs-ctx {
  position: fixed; z-index: 1200;
  min-width: 200px; padding: 4px;
  background: linear-gradient(180deg, rgba(22,32,50,.95) 0%, rgba(11,17,28,.98) 100%); border: 1px solid rgba(255,107,26,.18);
  border-radius: var(--radius-sm); box-shadow: 0 8px 28px rgba(0,0,0,.5);
  font-size: 13px;
  max-height: calc(100vh - 16px); overflow-y: auto; overscroll-behavior: contain;
}
.fs-ctx-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: var(--radius-sm);
  cursor: pointer; color: var(--text); user-select: none;
  line-height: 1.2; transition: background .12s;
}
.fs-ctx-item:hover { background: rgba(255,107,26,.14); }
.fs-ctx-item.danger { color: var(--err); }
.fs-ctx-item.danger:hover { background: rgba(255,66,66,.14); }
.fs-ctx-item.disabled { opacity: .4; pointer-events: none; }
.fs-ctx-sep { height: 1px; margin: 4px 6px; background: rgba(255,107,26,.12); }
.fs-ctx-icn { width: 18px; flex: 0 0 18px; text-align: center; }

/* Mods helper: large textarea + chip hints. */
.im-cfg-field.wide { grid-column: 1 / -1; }
.im-cfg-field textarea {
  width: 100%; min-height: 90px;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.7;
  resize: vertical;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  transition: border-color .2s, box-shadow .2s;
}
.im-cfg-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255,107,26,.18);
}
.cfg-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.cfg-chip {
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.05); border: 1px solid var(--border-soft);
  font-size: 11px; color: var(--text-dim);
  font-family: var(--mono);
}

.im-cfg-group {
  margin-bottom: 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-raised);
  transition: border-color .2s, box-shadow .2s;
}
.im-cfg-group-h {
  padding: 12px 16px;
  font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .9px;
  color: var(--text-dim);
  background: rgba(255,255,255,.012);
  border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center; gap: 8px;
}
.im-cfg-group-h::before {
  content: ""; width: 3px; height: 14px;
  background: var(--grad-accent); border-radius: 2px;
}
.im-cfg-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px 20px;
  padding: 20px;
}
.im-cfg-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.im-cfg-field label {
  color: var(--text); text-transform: none; letter-spacing: .1px;
  display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  line-height: 1.25;
}
.im-cfg-field label > .name-line {
  font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.im-cfg-field label .mono.dim {
  display: block;
  font-size: 10.5px; opacity: .65; font-weight: 400;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.im-cfg-field input, .im-cfg-field select, .im-cfg-field textarea { width: 100%; }
.im-cfg-field .toggle { padding: 4px 0; }
.im-cfg-field .form-hint { font-size: 11px; color: var(--text-dim); margin-top: 2px; line-height: 1.4; }


/* ===================== REGION: portsconfig ===================== */
  /* =============== PORTS TABLE =============== */
  /* Replaces the old "stack of inputs" ports UI. Single-glance scannable
     grid: friendly name + manifest key, colored protocol pill, container
     port (read-only), editable host port, internal/required chips. */
  .ports-table {
    display: flex; flex-direction: column;
    border: 1px solid var(--border-soft); border-radius: var(--radius);
    overflow: hidden; background: var(--bg-raised);
  }
  .ports-row {
    display: grid;
    grid-template-columns: minmax(160px, 2fr) 80px minmax(80px, 1fr) minmax(140px, 1.2fr) minmax(120px, 1fr);
    gap: 12px; align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-soft);
    transition: background .18s var(--ease-out), box-shadow .18s var(--ease-out), transform .12s var(--ease-out);
  }
  .ports-row:last-child { border-bottom: 0; }
  .ports-row:not(.ports-head):hover {
    background: linear-gradient(135deg, rgba(255,107,26,.08), rgba(95,178,255,.06));
    transform: translateX(2px);
  }
  .ports-head {
    background: rgba(255,255,255,.012);
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.1px;
    color: var(--text-dim); padding: 10px 16px;
    border-bottom: 1px solid var(--border-soft);
  }
  .port-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .port-name-friendly {
    font-size: 13px; font-weight: 600; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .port-name-key { font-size: 10.5px; opacity: .65; line-height: 1.1; font-family: var(--mono); }
  .port-proto {
    display: inline-block;
    padding: 4px 10px; border-radius: var(--radius-pill);
    font-size: 10.5px; font-weight: 700; letter-spacing: .6px;
    color: var(--proto-c, var(--accent));
    border: 1px solid color-mix(in srgb, var(--proto-c, var(--accent)) 50%, transparent);
    background: color-mix(in srgb, var(--proto-c, var(--accent)) 18%, transparent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--proto-c, var(--accent)) 20%, transparent);
    text-transform: uppercase;
  }
  .ports-row input[type="number"] {
    width: 100%;
    font-family: var(--mono); letter-spacing: .5px;
    background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    padding: 8px 11px; font-size: 13px;
    transition: border-color .15s, box-shadow .15s, background .15s;
  }
  .ports-row input[type="number"]:focus { outline: 0; border-color: var(--accent); box-shadow: var(--glow-accent); background: rgba(255,107,26,.03); }
  .ports-row input[type="number"]:disabled { opacity: .5; cursor: not-allowed; }
  .ports-row input[type="number"].dup { border-color: var(--err); background: rgba(255,66,66,.08); box-shadow: 0 0 0 3px rgba(255,66,66,.15); }
  .port-flags { display: flex; gap: 6px; flex-wrap: wrap; }
  .port-chip {
    display: inline-block; padding: 3px 10px;
    border-radius: var(--radius-pill); border: 1px solid var(--border-strong);
    font-size: 10.5px; color: var(--text-dim);
    background: rgba(255,107,26,.06);
    white-space: nowrap; transition: all .12s var(--ease-out);
  }
  .port-chip-int { color: var(--amber); border-color: rgba(255,177,59,.4); background: rgba(255,177,59,.12); }
  .ports-foot {
    margin-top: 16px; display: flex; gap: 14px;
    align-items: center; flex-wrap: wrap;
  }
  .ports-warn {
    color: var(--err); font-size: 12.5px; font-weight: 500;
    padding: 8px 13px; border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(255,66,66,.12), rgba(255,66,66,.05));
    border: 1px solid rgba(255,66,66,.35);
  }
  /* On narrow modals (mobile, half-screen) collapse to two-column rows
     with the protocol + container port stacking under the name. */
  @media (max-width: 720px) {
    .ports-row, .ports-head {
      grid-template-columns: 1fr 100px;
      grid-template-rows: auto auto;
    }
    .ports-row > div:nth-child(1) { grid-column: 1; grid-row: 1; }
    .ports-row > div:nth-child(2) { grid-column: 2; grid-row: 1; justify-self: end; }
    .ports-row > div:nth-child(3) { display: none; }
    .ports-row > div:nth-child(4) { grid-column: 1 / -1; grid-row: 2; }
    .ports-row > div:nth-child(5) { grid-column: 1 / -1; grid-row: 3; }
    .ports-head > div:not(:nth-child(1)):not(:nth-child(2)) { display: none; }
  }

  /* =============== UNIFIED CONFIG TAB (rail + main + sticky footer) ===============
     One nav, one Apply footer, one dirty-state model — across env-config /
     ports / INI. Replaces the older 3-stacked-cards layout. */
  .cfg-shell {
    display: flex; flex-direction: column;
    height: 100%; min-height: 420px;
  }
  .cfg-body {
    display: grid; grid-template-columns: 240px 1fr;
    flex: 1; min-height: 0;
  }
  .cfg-rail {
    border-right: 1px solid var(--border-soft);
    padding: 14px 10px;
    overflow-y: auto;
    background: var(--grad-rail);
    display: flex; flex-direction: column; gap: 18px;
  }
  .cfg-rail-section { display: flex; flex-direction: column; gap: 3px; }
  .cfg-rail-section-h {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.1px;
    color: var(--accent); opacity: .75;
    padding: 0 8px 6px; box-shadow: inset 0 -1px 0 rgba(255,107,26,.15);
  }
  .cfg-rail-link {
    display: grid; grid-template-columns: 24px 1fr auto;
    align-items: center; gap: 9px;
    padding: 9px 11px; border-radius: var(--radius-sm);
    background: transparent; border: 1px solid transparent;
    color: var(--text-dim); cursor: pointer;
    text-align: left; line-height: 1.25;
    transition: all .18s var(--ease-out);
    box-shadow: none;
    position: relative;
  }
  .cfg-rail-link:hover {
    color: var(--text);
    background: rgba(255,107,26,.06);
    border-color: rgba(255,107,26,.2);
    transform: translateX(1px);
  }
  .cfg-rail-link.active {
    background: linear-gradient(135deg, rgba(255,107,26,.16), rgba(95,178,255,.12));
    color: var(--accent);
    border-color: rgba(255,107,26,.4);
  }
  .cfg-rail-link.active::before {
    content: ""; position: absolute;
    left: -10px; top: 6px; bottom: 6px; width: 3px;
    background: var(--grad-accent); border-radius: 0 2px 2px 0;
    animation: sweep .8s var(--ease-out) forwards;
  }
  .cfg-rail-icon {
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; line-height: 1;
  }
  .cfg-rail-text {
    display: flex; flex-direction: column; gap: 1px;
    min-width: 0;
  }
  .cfg-rail-title {
    font-size: 13px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .cfg-rail-sub {
    font-size: 10.5px; opacity: .68; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .cfg-rail-count {
    font-size: 10.5px; font-weight: 600;
    color: var(--text-dim); opacity: .7;
    background: rgba(255,107,26,.08);
    padding: 2px 8px; border-radius: var(--radius-pill);
    border: 1px solid var(--border-soft);
    font-family: var(--mono);
    transition: all .12s var(--ease-out);
  }
  .cfg-rail-link.active .cfg-rail-count {
    background: rgba(255,107,26,.18);
    border-color: rgba(255,107,26,.4);
    color: var(--accent);
  }
  .cfg-rail-dirty {
    position: absolute; top: 7px; right: 7px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--amber);
    box-shadow: 0 0 10px var(--amber);
    animation: pulseDot .8s ease-in-out infinite;
  }

  .cfg-main {
    display: flex; flex-direction: column;
    min-width: 0; min-height: 0;
  }
  .cfg-main-head {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--border-soft);
    background: linear-gradient(180deg, rgba(255,107,26,.06), transparent);
  }
  .cfg-main-title {
    display: flex; align-items: baseline; gap: 8px;
    font-size: 14px; font-weight: 700; color: var(--text);
  }
  .cfg-main-title .cfg-main-sub {
    font-size: 11.5px; font-weight: 500; color: var(--text-dim);
  }
  .cfg-search-wrap {
    margin-left: auto;
    position: relative;
    width: 240px; max-width: 50%;
  }
  .cfg-search-wrap .cfg-search-icon {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    font-size: 12px; color: var(--text-dim); pointer-events: none;
  }
  .cfg-search {
    width: 100%; padding: 8px 11px 8px 32px;
    font-size: 12.5px; background: var(--surface-2); border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text); transition: all .15s var(--ease-out);
  }
  .cfg-search:focus { outline: 0; border-color: var(--accent); box-shadow: var(--glow-accent); }
  .cfg-pane-stage {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: 18px;
    transition: opacity .18s var(--ease-out), transform .22s var(--ease-out), filter .15s var(--ease-out);
  }
  .cfg-pane-stage.cfg-pane-leaving {
    opacity: 0; transform: translateX(-12px);
    filter: blur(2px); pointer-events: none;
  }
  .cfg-pane {
    display: none;
    animation: cfgRailPaneIn .32s var(--ease-out);
  }
  .cfg-pane.active { display: block; }
  @keyframes cfgRailPaneIn {
    0%   { opacity: 0; transform: translateX(14px) scale(.992); filter: blur(2px); }
    60%  { filter: blur(0); }
    100% { opacity: 1; transform: none; filter: blur(0); }
  }
  /* Staggered card entrance (per-card --i index set inline at render). */
  @keyframes cfgCardIn {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to   { opacity: 1; transform: none; }
  }
  .cfg-grid > .cfg-card {
    animation: cfgCardIn .42s var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 22ms);
  }
  .cfg-pane-desc {
    font-size: 12.5px; color: var(--text-dim);
    margin-bottom: 16px; padding: 12px 15px;
    background: linear-gradient(135deg, rgba(255,107,26,.1), rgba(255,107,26,.05));
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm); line-height: 1.6;
  }
  /* ===== 7DTD V3.0 SandboxCode panel ===== */
  .sb-toolbar { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
  .sb-tool { display: flex; flex-direction: column; gap: 5px; min-width: 220px; }
  .sb-tool-grow { flex: 1 1 320px; }
  .sb-tool > label { font-size: 11px; font-weight: 600; color: var(--text-dim); }
  .sb-paste-row { display: flex; gap: 8px; }
  .sb-paste-row .cfg-input { flex: 1; }
  .sb-codeline {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-size: 12px; color: var(--text-dim); margin-bottom: 16px;
    padding: 8px 12px; background: rgba(255,255,255,.03); border-radius: var(--radius-sm);
  }
  .sb-codeline code {
    font-family: ui-monospace, monospace; color: var(--accent);
    background: rgba(255,107,26,.1); padding: 2px 7px; border-radius: 4px;
    word-break: break-all;
  }
  .btn-xs { font-size: 10.5px; padding: 3px 8px; }
  details.sb-cat {
    margin-bottom: 10px; border: 1px solid var(--border, rgba(255,255,255,.08));
    border-radius: var(--radius-sm); overflow: hidden;
    background: rgba(255,255,255,.02);
  }
  details.sb-cat > summary {
    cursor: pointer; padding: 11px 14px; font-weight: 600; font-size: 13px;
    list-style: none; display: flex; align-items: center; gap: 8px;
    user-select: none;
  }
  details.sb-cat > summary::-webkit-details-marker { display: none; }
  details.sb-cat > summary::before { content: "▸"; color: var(--accent); transition: transform .15s; }
  details.sb-cat[open] > summary::before { transform: rotate(90deg); }
  details.sb-cat > summary:hover { background: rgba(255,107,26,.06); }
  .sb-cat-count {
    margin-left: auto; font-size: 10.5px; color: var(--text-dim);
    background: rgba(255,255,255,.06); padding: 1px 8px; border-radius: var(--radius-pill);
  }
  .sb-grid { padding: 6px 14px 14px; }
  .sbopt-row { position: relative; }
  .sbopt-row .sb-dot {
    display: none; width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); margin-left: 6px; vertical-align: middle;
  }
  .sbopt-row.sb-changed .sb-dot { display: inline-block; }
  .sbopt-row.sb-changed .cfg-card-label { color: var(--accent); }
  .cfg-section {
    margin-bottom: 22px;
  }
  .cfg-section-h {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    color: var(--accent); opacity: .85;
    padding-bottom: 9px; margin-bottom: 13px;
    border-bottom: 2px solid var(--border-strong);
  }
  .cfg-section-h::before {
    content: ""; width: 3px; height: 13px;
    background: var(--grad-accent); border-radius: 2px;
  }

  /* Field cards — used across env / ports / INI panes for visual consistency. */
  .cfg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px 14px;
  }
  .cfg-card {
    position: relative;
    display: flex; flex-direction: column; gap: 8px;
    padding: 13px 15px;
    background: var(--grad-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    min-width: 0;
    transition: all .18s var(--ease-out);
    box-shadow: var(--shadow-sm);
  }
  .cfg-card:hover {
    border-color: rgba(255,107,26,.3);
    background: var(--grad-card-hover);
    transform: translateY(-2px);
  }
  .cfg-card:focus-within {
    border-color: var(--accent);
    box-shadow: var(--glow-accent), var(--shadow-md);
  }
  .cfg-card[data-dirty="1"] {
    border-color: var(--amber);
    background: linear-gradient(180deg, rgba(255,177,59,.1), rgba(255,177,59,.04));
    box-shadow: -4px 0 0 0 var(--amber), var(--shadow-md), 0 0 16px rgba(255,177,59,.12);
  }
  .cfg-card.wide { grid-column: 1 / -1; }
  .cfg-card-head {
    display: flex; align-items: flex-start; gap: 9px;
    min-width: 0;
  }
  .cfg-card-label {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 3px;
    cursor: pointer;
  }
  .cfg-card-name {
    font-size: 13px; font-weight: 600; color: var(--text);
    line-height: 1.25;
    text-transform: none; letter-spacing: 0;
  }
  .cfg-card-key {
    font-family: var(--mono);
    font-size: 10.5px; font-weight: 400;
    color: var(--text-dim); opacity: .65;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .cfg-card-dot {
    flex: 0 0 auto;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--amber);
    box-shadow: 0 0 10px var(--amber);
    margin-top: 5px;
    display: none;
    animation: pulseDot .8s ease-in-out infinite;
  }
  .cfg-card[data-dirty="1"] .cfg-card-dot { display: block; }
  .cfg-card-input { display: block; }
  .cfg-card-input input,
  .cfg-card-input select,
  .cfg-card-input textarea {
    width: 100%;
  }
  .cfg-card-input input[type="text"],
  .cfg-card-input input[type="password"],
  .cfg-card-input input[type="number"],
  .cfg-card-input select,
  .cfg-card-input textarea {
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text);
    padding: 7px 10px;
    font-family: var(--sans);
    transition: all .15s var(--ease-out);
  }
  .cfg-card-input input[type="text"]:focus,
  .cfg-card-input input[type="password"]:focus,
  .cfg-card-input input[type="number"]:focus,
  .cfg-card-input select:focus,
  .cfg-card-input textarea:focus {
    outline: 0; border-color: var(--accent); box-shadow: var(--glow-accent);
  }
  .cfg-card-input .toggle { padding: 2px 0; }
  .cfg-card-hint {
    font-size: 11.5px; line-height: 1.55;
    color: var(--text-dim);
    display: flex; align-items: flex-start; gap: 7px;
    padding-left: 1px;
  }
  .cfg-card-hint::before {
    content: "›"; color: var(--accent); opacity: .75; flex: 0 0 auto;
    font-weight: 700; line-height: 1.55;
    font-size: 13px; margin-top: -1px;
  }
  .cfg-card-warn {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 12px;
    background: linear-gradient(135deg, rgba(255,66,66,.12), rgba(255,66,66,.05));
    border: 1px solid rgba(255,66,66,.35);
    border-radius: var(--radius-sm);
    font-size: 11.5px; line-height: 1.4;
    color: var(--err);
  }
  .cfg-card-warn .warn-icon {
    flex: 0 0 auto;
    font-size: 14px; line-height: 1;
    filter: saturate(1.2) drop-shadow(0 0 4px rgba(255,66,66,.4));
  }
  .cfg-card-warn .warn-text { flex: 1; min-width: 0; }

  /* "Hidden by filter" — fade out (not display:none, so the layout doesn't jump
     on every keystroke); pointer-events off to mute non-matching cards. */
  .cfg-card[data-filter-hide="1"] {
    opacity: .22; pointer-events: none;
    filter: grayscale(.5);
    transition: opacity .25s var(--ease-out), filter .25s var(--ease-out);
  }

  /* Sticky footer Apply — knows about all dirties (env + ports + ini)
     and dispatches each scope to its right endpoint sequentially. */
  .cfg-foot {
    border-top: 1px solid var(--border);
    padding: 13px 18px;
    display: flex; gap: 12px; align-items: center;
    background: linear-gradient(180deg, rgba(20,24,36,.85), rgba(14,17,25,.95));
    flex: 0 0 auto;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 rgba(255,107,26,.08);
  }
  .cfg-foot-status {
    font-size: 12.5px; color: var(--text-dim);
    display: flex; align-items: center; gap: 8px;
    flex: 1; min-width: 0;
  }
  .cfg-foot-status.dirty { color: var(--text); }
  .cfg-foot-status .cfg-foot-pip {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--amber);
    box-shadow: 0 0 10px var(--amber);
    flex: 0 0 auto;
    animation: pulseDot .8s ease-in-out infinite;
  }
  .cfg-foot-progress {
    font-size: 11.5px; color: var(--accent);
    font-family: var(--mono);
  }
  .cfg-foot-btn { font-size: 12.5px; padding: 8px 16px; border-radius: var(--radius-sm); }

  /* Empty / error states inside the pane. */
  .cfg-empty {
    text-align: center;
    padding: 50px 20px;
    color: var(--text-dim);
  }
  .cfg-empty .big { font-size: 36px; margin-bottom: 8px; }
  .cfg-empty .hint { display: block; font-size: 12px; margin-top: 6px; opacity: .8; }

  /* Responsive: stack rail above main on narrow modals. */
  @media (max-width: 820px) {
    .cfg-body { grid-template-columns: 1fr; }
    .cfg-rail {
      border-right: 0; border-bottom: 1px solid var(--border-soft);
      flex-direction: row; flex-wrap: nowrap; gap: 6px;
      overflow-x: auto; overflow-y: hidden;
      padding: 10px 14px;
    }
    .cfg-rail-section { flex-direction: row; gap: 6px; }
    .cfg-rail-section-h { display: none; }
    .cfg-rail-link {
      grid-template-columns: auto auto auto;
      padding: 6px 10px;
      flex: 0 0 auto;
    }
    .cfg-rail-link.active::before { display: none; }
    .cfg-rail-sub { display: none; }
    .cfg-search-wrap { width: 160px; }
  }


/* ===================== REGION: freshtiles ===================== */
/* =============== FRESH SERVERS LAYOUT (flat grid + glass tiles) ===============
   REFUGE COMMAND-CENTER variant: neon-on-graphite, animated accent glows,
   depth, gradient game-art heroes, live-pulse status, crisp glass chrome. */

.svr-toolbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  row-gap: 8px;
  padding: 12px 14px;
  background: var(--grad-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 18px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-md);
}
.svr-tb-group { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; min-width: 0; }
/* Group toggle + sort select travel as one unbreakable cluster so the
   sort select can never orphan onto its own ragged row; when the toolbar
   wraps, the cluster right-aligns as a coherent second row. */
.svr-tb-cluster { display: flex; gap: 10px; align-items: center; flex-wrap: nowrap; flex: 0 0 auto; margin-left: auto; }
@media (max-width: 1500px) {
  /* The cluster's margin-left:auto owns right-alignment now; a growing
     spacer would steal width from the scrolling GAME strip. */
  .svr-toolbar .svr-tb-spacer { flex: 0 0 8px; }
  /* GAME pills scroll sideways instead of stacking a third toolbar row. */
  .svr-tb-games {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    flex: 3 1 160px; min-width: 160px; max-width: 100%;
    scrollbar-width: thin;
    padding-bottom: 2px;
  }
}
.svr-tb-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .9px; color: var(--text-dim); opacity: .7;
  margin-right: 4px;
}
.svr-tb-sep { width: 1px; height: 24px; background: var(--border-soft); margin: 0 6px; flex: 0 0 1px; }
.svr-tb-spacer { flex: 1; min-width: 8px; }
/* Group-by segmented control: pills sit flush as one connected switch. */
.svr-group-toggle { gap: 0; padding: 2px; border-radius: var(--radius-pill); background: var(--bg-deep); border: 1px solid var(--border-soft); }
.svr-group-toggle .svr-tb-label { margin: 0 6px 0 8px; }
.svr-group-toggle .svr-pill { border: 0; background: transparent; padding: 5px 11px; border-radius: var(--radius-pill); }
.svr-group-toggle .svr-pill:hover { background: rgba(255,255,255,.05); }
.svr-group-toggle .svr-pill.active { background: var(--grad-accent); color: #05070a; font-weight: 700; box-shadow: 0 2px 10px rgba(255,107,26,.3); }
.svr-pill {
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.04); border: 1px solid var(--border-soft);
  color: var(--text-dim); font-size: 12.5px; font-weight: 500;
  cursor: pointer; transition: color .15s, background .15s, border-color .15s, box-shadow .2s, transform .12s;
  white-space: nowrap; box-shadow: none;
  display: inline-flex; align-items: center; gap: 7px;
}
.svr-pill:hover {
  color: var(--text); border-color: var(--accent);
  background: rgba(255,107,26,.08); transform: translateY(-1px);
}
.svr-pill.active {
  background: var(--grad-accent); color: #0a0e17; font-weight: 700;
  border-color: transparent;
  box-shadow: var(--glow-accent), inset 0 1px 0 rgba(255,255,255,.28);
  transform: translateY(-2px);
}
.svr-pill .pill-count {
  font-family: var(--mono); font-size: 11px;
  background: rgba(0,0,0,.22); padding: 1px 7px; border-radius: var(--radius-pill);
  color: inherit; opacity: .9; line-height: 1.4;
}
.svr-pill.active .pill-count { background: rgba(255,255,255,.22); }
.svr-pill .pill-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 6px currentColor;
  flex: 0 0 7px;
}
.svr-pill[data-status="running"] .pill-dot {
  background: var(--ok); box-shadow: 0 0 10px var(--ok), 0 0 24px rgba(46,224,107,.4);
  animation: pulseDot 2.2s ease-in-out infinite;
}
.svr-pill[data-status="stopped"] .pill-dot { background: var(--muted); }
.svr-pill[data-status="issues"]  .pill-dot { background: var(--err); box-shadow: 0 0 10px var(--err), 0 0 24px rgba(255,66,66,.4); }
@keyframes pillPulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.svr-pill.agent-offline {
  border-color: rgba(255,66,66,.4);
  color: #fca5a5;
}
.svr-pill.agent-offline.active {
  background: var(--grad-danger);
  color: #fef2f2;
  border-color: transparent;
  box-shadow: var(--glow-err);
}
.svr-tb-btn {
  padding: 7px 13px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.04); border: 1px solid var(--border-soft);
  color: var(--text-dim); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .15s; box-shadow: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.svr-tb-btn:hover {
  color: var(--text); border-color: var(--accent); background: rgba(255,107,26,.12);
  transform: translateY(-1px);
}
.svr-tb-btn select {
  background: transparent; border: none; color: inherit;
  font-size: 12px; font-weight: 600; padding: 0;
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
  background-image: none;
  padding-right: 0;
}
.svr-tb-btn select:focus { outline: none; box-shadow: none; }
.svr-tb-btn select option { background: var(--bg-raised); color: var(--text); }

/* =============== BATCH ACTIONS BAR ===============
   Primary accent on mint/teal, secondary actions in muted. */
.svr-batchbar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(255,107,26,.06), rgba(255,107,26,.02));
  border: 1px solid rgba(255,107,26,.2);
  border-radius: var(--radius);
  margin-bottom: 14px;
  font-size: 12.5px;
}
.svr-batch-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .9px; color: var(--accent); opacity: .8;
  margin-right: 4px;
}
.svr-batch-sep { width: 1px; height: 22px; background: rgba(255,107,26,.3); margin: 0 6px; }
.svr-batch-btn {
  padding: 6px 13px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  color: var(--text); font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .12s, box-shadow .2s;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.svr-batch-btn:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.4);
}
.svr-batch-btn:disabled {
  opacity: .35; cursor: not-allowed;
}
.svr-batch-btn.start {
  background: linear-gradient(135deg, rgba(46,224,107,.16), rgba(46,224,107,.06));
  border-color: rgba(46,224,107,.4); color: var(--ok);
}
.svr-batch-btn.start:not(:disabled):hover {
  background: linear-gradient(135deg, rgba(46,224,107,.32), rgba(46,224,107,.18));
  color: #fff; border-color: var(--ok);
  box-shadow: var(--glow-ok), 0 8px 20px rgba(46,224,107,.3);
}
.svr-batch-btn.stop {
  background: linear-gradient(135deg, rgba(255,66,66,.14), rgba(255,66,66,.04));
  border-color: rgba(255,66,66,.3); color: #fca5a5;
}
.svr-batch-btn.stop:not(:disabled):hover {
  background: linear-gradient(135deg, rgba(255,66,66,.3), rgba(255,66,66,.16));
  color: #fff; border-color: var(--err);
  box-shadow: var(--glow-err), 0 8px 20px rgba(255,66,66,.3);
}
.svr-batch-btn.restart {
  background: linear-gradient(135deg, rgba(255,177,59,.14), rgba(255,177,59,.04));
  border-color: rgba(255,177,59,.3); color: var(--amber);
}
.svr-batch-btn.restart:not(:disabled):hover {
  background: linear-gradient(135deg, rgba(255,177,59,.32), rgba(255,177,59,.16));
  color: #fff; border-color: var(--amber);
  box-shadow: 0 0 16px rgba(255,177,59,.35), 0 8px 20px rgba(255,177,59,.3);
}
.svr-batch-btn.game {
  background: linear-gradient(135deg, rgba(255,107,26,.14), rgba(255,107,26,.04));
  border-color: rgba(255,107,26,.3); color: var(--accent);
}
.svr-batch-btn.game:not(:disabled):hover {
  background: linear-gradient(135deg, rgba(255,107,26,.32), rgba(255,107,26,.16));
  color: #fff; border-color: var(--accent);
  box-shadow: var(--glow-accent), 0 8px 20px rgba(255,107,26,.3);
}
.svr-batch-progress {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: var(--radius-pill);
  background: rgba(255,107,26,.12);
  border: 1px solid rgba(255,107,26,.32);
  color: var(--accent);
  font-family: var(--mono); font-size: 11.5px;
}
.svr-batch-progress .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent);
  animation: pulseDot 1.2s ease-in-out infinite;
}
.svr-batch-progress .line { color: var(--text); max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svr-batch-cancel {
  padding: 3px 10px; border-radius: var(--radius-sm);
  background: rgba(255,66,66,.16);
  border: 1px solid rgba(255,66,66,.4);
  color: #fca5a5;
  font-size: 11px; font-weight: 600;
  cursor: pointer;
}
.svr-batch-cancel:hover { background: rgba(255,66,66,.4); color: #fff; border-color: var(--err); }
@media (max-width: 720px) {
  .svr-batchbar { padding: 9px 11px; gap: 6px; border-radius: var(--radius); }
  .svr-batch-btn { padding: 5px 10px; font-size: 11.5px; }
  .svr-batch-progress { display: none; }
}

/* The flat servers grid */
.svr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--svr-grid-min, 300px), 1fr));
  gap: 14px;
}
@media (max-width: 600px) {
  .svr-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
}
.svr-grid.grouped {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.svr-agent-section { display: flex; flex-direction: column; gap: 10px; }
.svr-agent-header {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 4px 6px 2px;
  border-bottom: 1px solid var(--border-soft);
}
.svr-agent-icon {
  font-size: 17px; line-height: 1; flex: 0 0 auto;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.svr-agent-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted);
  flex: 0 0 auto;
}
.svr-agent-dot.on { background: var(--ok); box-shadow: 0 0 10px var(--ok), 0 0 20px rgba(46,224,107,.35); }
.svr-agent-dot.off { background: var(--err); }
.svr-agent-lab { font-weight: 600; font-size: 14px; color: var(--text); }
.svr-agent-badge {
  font-size: 11px; padding: 1px 7px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .5px;
}
.svr-agent-badge.offline { color: var(--err); border-color: rgba(255,66,66,.4); }
.svr-agent-badge.orphan  { color: var(--amber); border-color: rgba(255,177,59,.4); }
.svr-agent-meta { margin-left: auto; font-size: 12px; color: var(--text-dim); }
.svr-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--svr-grid-min, 300px), 1fr));
  gap: 14px;
}
@media (max-width: 600px) {
  .svr-group-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
  .svr-agent-meta { font-size: 11px; }
}
.svr-empty {
  text-align: center; padding: 60px 24px;
  color: var(--text-dim);
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius);
  background: rgba(255,255,255,.012);
}
.svr-empty .big { font-size: 48px; margin-bottom: 8px; opacity: .8; }
.svr-empty .hint { display: block; font-size: 12.5px; margin-top: 8px; opacity: .85; }

/* The tile itself — glass card with art bleed. Game-art hero with dark scrim. */
/* Overhauled server card — a vertical card: art banner on top, always-
   visible info body, always-visible action row at the bottom. No more
   click-to-flip strip; nothing is hidden behind a mode toggle. */
.svr-tile {
  position: relative;
  display: flex; flex-direction: column;
  /* Cap width so a lone card in a wide track (single-game groups) reads
     as a card, not a stretched banner; extra track width stays empty. */
  max-width: 380px;
  width: 100%;
  border-radius: var(--radius);
  /* NOTE: no overflow:hidden here — the ⋯ More menu pops out of the card
     and must not be clipped. The banner clips its own art (top corners
     rounded below); the action row's bottom corners are rounded too. */
  background: var(--bg-raised);
  border: 1px solid var(--border);
  transition: transform .2s var(--ease-out), border-color .2s, box-shadow .3s;
  isolation: isolate;
  animation: svrTileIn .42s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 30ms);
}
@keyframes svrTileIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.svr-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(255,107,26,.45);
  box-shadow: 0 16px 40px rgba(0,0,0,.5), var(--glow-accent);
  z-index: 2;
}
.svr-tile.is-deleting {
  opacity: .35; pointer-events: none;
  filter: grayscale(.8) blur(1px);
  transition: opacity .25s, filter .25s;
}

/* Art banner — fixed-height header strip showing the game art. */
.svr-card-banner {
  position: relative;
  height: 96px;
  flex: 0 0 96px;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
}
.svr-tile-art {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  background-color: var(--bg-deep);
  filter: saturate(.92) brightness(.82);
  transition: filter .3s var(--ease-out), transform .5s var(--ease-out);
  z-index: 0;
}
.svr-tile:hover .svr-tile-art {
  filter: saturate(1.08) brightness(.95);
  transform: scale(1.06);
}
.svr-tile-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,10,16,0) 30%, rgba(7,10,16,.55) 80%, var(--bg-raised) 100%);
}
.svr-tile-art-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; opacity: .8;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.6));
  z-index: 0;
}

/* Status badge — pill with pulsing dot, pinned to the banner top-right. */
.svr-tile-status {
  position: absolute; top: 9px; right: 9px; z-index: 3;
  width: max-content;
  max-width: calc(100% - 18px);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 8px; border-radius: var(--radius-pill);
  background: rgba(7,10,16,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 9.5px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color .2s, border-color .2s, background .2s, box-shadow .2s;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  flex: 0 0 auto;
}
.svr-tile-status .dot {
  width: 8px; height: 8px; border-radius: 50%; background: currentColor;
  flex: 0 0 8px;
}
.svr-tile-status.running { color: var(--ok); border-color: rgba(46,224,107,.5); }
.svr-tile-status.running .dot { box-shadow: 0 0 10px var(--ok), 0 0 24px rgba(46,224,107,.4); animation: pulseDot 2.4s ease-in-out infinite; }
.svr-tile-status.starting, .svr-tile-status.installing, .svr-tile-status.stopping, .svr-tile-status.restarting, .svr-tile-status.updating {
  color: var(--amber); border-color: rgba(255,177,59,.5);
}
.svr-tile-status.starting .dot, .svr-tile-status.installing .dot, .svr-tile-status.stopping .dot, .svr-tile-status.restarting .dot, .svr-tile-status.updating .dot {
  box-shadow: 0 0 10px var(--amber), 0 0 24px rgba(255,177,59,.3);
  animation: pulseDot 1.4s ease-in-out infinite;
}
.svr-tile-status.stopped { color: var(--muted); border-color: rgba(255,255,255,.2); }
.svr-tile-status.crashed, .svr-tile-status.deleting, .svr-tile-status.delete {
  color: #fca5a5; border-color: rgba(255,66,66,.5);
  box-shadow: 0 0 12px rgba(255,66,66,.25);
}
.svr-tile-status.ready { color: var(--ok); border-color: rgba(46,224,107,.5); }

/* Agent chip — top-left frosted label. */
.svr-tile-agent {
  position: absolute; top: 10px; left: 10px;
  font-size: 10.5px; font-weight: 600;
  padding: 3px 9px; border-radius: var(--radius-sm);
  background: rgba(11,14,21,.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,107,26,.2);
  color: var(--accent);
  z-index: 3; opacity: .95;
  font-family: var(--mono);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: calc(100% - 100px);
  line-height: 1.4;
  transition: border-color .2s, color .2s;
}
.svr-tile-agent.offline {
  border-color: rgba(255,66,66,.4);
  color: #fca5a5;
}
.svr-tile-agent.offline::before {
  content: "⚠ "; opacity: .8;
}

/* Cluster badge — color-coded chip pinned bottom-left of the banner so you can
   tell at a glance which cluster a server belongs to. Hue comes from the
   cluster id (hashed) so every cluster gets a stable, distinct color with no
   hardcoding. Hidden by default; shown only for instances that are cluster
   members (data-cluster set in updateCard). The ★ marks the cluster master. */
.svr-tile-cluster {
  position: absolute; bottom: 9px; left: 10px; z-index: 3;
  display: none; align-items: center; gap: 5px;
  max-width: calc(100% - 20px);
  padding: 2px 8px 2px 7px; border-radius: var(--radius-pill);
  background: rgba(7,10,16,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--cluster-color, rgba(255,255,255,.3));
  color: var(--cluster-color, #fff);
  font-size: 9.5px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  line-height: 1.5;
}
.svr-tile-cluster.is-member { display: inline-flex; }
.svr-tile-cluster .cdot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px;
  background: var(--cluster-color, #fff);
  box-shadow: 0 0 8px var(--cluster-color, transparent);
}
.svr-tile-cluster .cmaster { font-size: 9px; opacity: .95; }

/* WI-14: "Update available" badge — amber pill, bottom-right of the banner
   (cluster badge owns bottom-left). Lit by updateCard when the last manual
   update check found installed != latest buildid. Check-only indicator. */
.svr-tile-update {
  position: absolute; bottom: 9px; right: 10px; z-index: 3;
  display: none; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: rgba(7,10,16,.82);
  border: 1px solid var(--warn, #f59e0b);
  color: var(--warn, #f59e0b);
  font-size: 9.5px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; white-space: nowrap; line-height: 1.5;
}
.svr-tile-update.is-stale { display: inline-flex; }

/* Update-check result pills in the instance modal's Updates tab. */
.uc-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  border: 1px solid var(--border);
}
.uc-pill.uc-ok    { color: var(--ok, #22c55e);   border-color: var(--ok, #22c55e); }
.uc-pill.uc-stale { color: var(--warn, #f59e0b); border-color: var(--warn, #f59e0b); }
.uc-pill.uc-err   { color: var(--danger, #ef4444); border-color: var(--danger, #ef4444); }

/* Body / info panel — static, between the banner and the action row. */
.svr-tile-body {
  padding: 11px 13px 10px;
  color: var(--text);
  display: flex; flex-direction: column; gap: 6px;
  flex: 1 1 auto;
}
.svr-tile-row {
  display: flex; align-items: baseline; gap: 8px; min-width: 0;
}
.svr-tile-name {
  font-size: 15px; font-weight: 700; line-height: 1.25;
  color: var(--text);
  /* Two-line clamp — operator complaint #1 was single-line ellipsis
     truncating almost every real server name. Full name on el.title. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal; overflow-wrap: anywhere;
  overflow: hidden;
  flex: 1; min-width: 0;
}
.svr-tile-uptime {
  flex: 0 0 auto;
  font-size: 11px; font-weight: 600;
  color: var(--text-dim);
  font-family: var(--mono);
  margin-left: auto; /* sits at the right edge of the meta row */
}
.svr-tile-uptime.empty { display: none; }
.svr-tile-meta {
  display: flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  line-height: 1.4;
}
.svr-tile-meta .module {
  color: var(--text-dim); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.svr-tile-meta .sep { opacity: .4; flex: 0 0 auto; }
.svr-tile-meta .port {
  font-family: var(--mono); color: var(--accent); font-weight: 600;
  flex: 0 0 auto;
}
.svr-tile-meta .players { color: var(--text); font-weight: 600; flex: 0 0 auto; }
.svr-tile-meta .players.empty { display: none; }
.svr-tile-meta .players.empty + .sep { display: none; }

.svr-tile-bars {
  display: grid; grid-template-columns: 1fr 1fr; gap: 9px;
  margin-top: 2px;
}
.svr-tile-bars .bar-row {
  display: flex; align-items: center; gap: 6px;
  min-width: 0;
}
.svr-tile-bars .lbl {
  flex: 0 0 auto;
  font-size: 8.5px; font-weight: 700; letter-spacing: .55px;
  text-transform: uppercase;
  color: var(--muted);
}
.svr-tile-bars .bar {
  flex: 1; min-width: 0;
  height: 5px; border-radius: 3px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.3);
}
.svr-tile-bars .fill {
  height: 100%; width: 0%;
  background: var(--grad-accent-2);
  transition: width .45s var(--ease-out), background .3s;
}
.svr-tile-bars .val {
  flex: 0 0 auto;
  font-size: 10px; font-weight: 600;
  font-family: var(--mono);
  color: var(--text-dim);
  min-width: 30px; text-align: right;
}

/* =============== CARD ACTION ROW (always visible) ===============
   A clear, labeled control bar at the bottom of every card: one primary
   Start/Stop button (with a text label), then secondary icon buttons
   (Restart / Console / Files / Manage), then a ⋯ More menu for the rare
   and dangerous actions. No mode flip, nothing hidden. */
.svr-card-actions {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 11px 11px;
  border-top: 1px solid var(--border-soft);
  background: rgba(255,255,255,.012);
  border-radius: 0 0 var(--radius) var(--radius);
}

/* Primary Start/Stop — labeled, fills the leftover space. */
.svr-act-primary {
  flex: 1 1 auto; min-width: 78px;
  height: 34px; padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 12.5px; font-weight: 700; letter-spacing: .2px;
  cursor: pointer;
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .12s var(--ease-out), background .18s, box-shadow .2s, color .15s, border-color .18s;
}
.svr-act-primary svg { width: 15px; height: 15px; flex: 0 0 15px; transition: transform .2s var(--ease-out); }
.svr-act-primary:active { transform: scale(.97); }
.svr-act-primary.act-start {
  background: var(--grad-accent-2); color: #04200f;
  box-shadow: 0 2px 12px rgba(46,224,107,.28);
}
.svr-act-primary.act-start:hover { box-shadow: 0 4px 18px rgba(46,224,107,.5); filter: brightness(1.06); }
.svr-act-primary.act-start:hover svg { transform: translateX(1px) scale(1.08); }
.svr-act-primary.act-stop {
  background: rgba(255,66,66,.14); color: #fca5a5;
  border-color: rgba(255,66,66,.45);
}
.svr-act-primary.act-stop:hover { background: rgba(255,66,66,.24); color: #fff; border-color: var(--err); }

/* Secondary icon buttons. */
.svr-act-icon {
  flex: 0 0 auto;
  width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border-soft);
  color: var(--text-dim);
  cursor: pointer;
  transition: transform .12s var(--ease-out), background .18s, border-color .18s, color .15s;
}
.svr-act-icon svg { width: 16px; height: 16px; transition: transform .2s var(--ease-out); }
.svr-act-icon:hover {
  background: rgba(255,107,26,.12); border-color: rgba(255,107,26,.5); color: var(--accent);
}
.svr-act-icon:active { transform: scale(.94); }
.svr-act-icon[data-restart-btn]:hover svg { transform: rotate(-180deg); }
.svr-act-manage:hover svg { transform: rotate(45deg); }

/* "More" menu popover. */
.svr-act-more-wrap { position: relative; flex: 0 0 auto; }
.svr-act-menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  z-index: 30;
  min-width: 172px;
  padding: 5px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 14px 40px rgba(0,0,0,.55);
  display: flex; flex-direction: column; gap: 2px;
  animation: cardMenuIn .14s var(--ease-out);
}
.svr-act-menu.drop-up { top: auto; bottom: calc(100% + 6px); transform-origin: bottom right; }
@keyframes cardMenuIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.svr-act-menu[hidden] { display: none; }
.svr-menu-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px;
  border: 0; border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text); font-size: 12.5px; font-weight: 500;
  text-align: left; cursor: pointer; width: 100%;
  transition: background .14s, color .14s;
}
.svr-menu-item svg { width: 15px; height: 15px; flex: 0 0 15px; opacity: .85; }
.svr-menu-item:hover { background: rgba(255,255,255,.06); }
.svr-menu-item.danger { color: #fca5a5; }
.svr-menu-item.danger:hover { background: rgba(255,66,66,.15); color: #fff; }
.svr-menu-sep { height: 1px; background: var(--border-soft); margin: 4px 2px; }

/* Action-progress overlay (loading/success/error) on the primary button. */
.svr-act-primary .act-overlay {
  gap: 0; padding: 0; z-index: 3; border-radius: inherit;
}
.svr-act-primary .act-overlay.is-loading { background: var(--grad-accent); color: #05070a; }
.svr-act-primary .act-overlay.is-success { background: var(--grad-accent-2); color: #04200f; }
.svr-act-primary .act-overlay.is-error   { background: linear-gradient(180deg, rgba(255,66,66,.95), rgba(220,38,38,.92)); color: #fef2f2; }

@media (max-width: 480px) {
  .svr-card-actions { padding: 8px; gap: 5px; }
  .svr-act-icon { width: 32px; height: 32px; }
  .svr-act-primary { height: 32px; }
}

/* Compact agents drawer (collapsed by default, expands when "Manage agents" clicked) */
.agents-drawer {
  margin-top: 22px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(255,255,255,.012);
}
.agents-drawer summary {
  padding: 12px 16px;
  cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--text-dim);
  display: flex; align-items: center; gap: 10px;
  list-style: none;
  user-select: none;
  transition: background .15s, color .15s;
}
.agents-drawer summary::-webkit-details-marker { display: none; }
.agents-drawer summary:hover { background: rgba(255,255,255,.025); color: var(--text); }
.agents-drawer summary::before {
  content: "▸";
  transition: transform .2s;
  color: var(--accent); opacity: .7;
  display: inline-block; font-size: 10px;
}
.agents-drawer[open] summary::before { transform: rotate(90deg); }
.agents-drawer-body {
  padding: 4px 16px 16px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px;
}
.agent-mini-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.018);
  transition: border-color .15s, background .15s;
}
.agent-mini-card:hover { border-color: var(--accent); background: rgba(255,107,26,.08); }
.agent-mini-card.offline { border-color: rgba(255,66,66,.25); background: rgba(255,66,66,.04); }
.agent-mini-card .agent-icon-mini {
  width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: var(--radius-sm);
  background: rgba(255,107,26,.15); border: 1px solid rgba(255,107,26,.3);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.agent-mini-card.offline .agent-icon-mini { background: rgba(255,66,66,.12); border-color: rgba(255,66,66,.32); }
.agent-mini-card .info { flex: 1; min-width: 0; }
.agent-mini-card .info .label { font-size: 12.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-mini-card .info .meta { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-mini-card .actions { display: flex; gap: 5px; }


/* ===================== REGION: cmdkdocs ===================== */
/* =============== COMMAND PALETTE (Ctrl/Cmd+K) ===============
   Search-everything jumper. Lists servers, quick actions (Start/
   Stop/Restart per server), pages, and docs sections; arrow keys
   navigate, Enter executes. Sized + positioned like a Spotlight /
   VS Code command palette: narrow, near the top of the viewport. */
#cmdk-modal { align-items: flex-start; padding-top: 11vh; }
#cmdk-modal .modal {
  width: min(620px, calc(100vw - 32px));
  max-height: 70vh;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  animation: popIn .28s var(--ease-out);
}
.cmdk-input-wrap {
  display: flex; align-items: center; gap: 11px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(255,107,26,.04), transparent);
}
.cmdk-input-wrap .cmdk-icon { 
  font-size: 17px; opacity: .7; flex: 0 0 auto; 
  color: var(--accent);
}
#cmdk-input {
  flex: 1; min-width: 0;
  border: none; background: transparent;
  font-size: 15px; color: var(--text);
  padding: 0;
  font-family: var(--sans);
  font-weight: 500;
}
#cmdk-input:focus { 
  outline: none; box-shadow: none; background: transparent; 
}
#cmdk-input::placeholder { font-style: normal; opacity: .55; color: var(--text-dim); }
.cmdk-input-wrap .cmdk-keyhint {
  font-size: 10.5px; color: var(--text-dim); opacity: .75;
  white-space: nowrap;
  flex: 0 0 auto;
  display: inline-flex; gap: 4px; align-items: center;
  font-weight: 500;
}
.cmdk-input-wrap .cmdk-keyhint kbd {
  display: inline-block; padding: 3px 7px; border-radius: 4px;
  background: rgba(255,107,26,.08); border: 1px solid rgba(255,107,26,.25);
  border-bottom-width: 1px;
  font-family: var(--mono); font-size: 10px; color: var(--accent);
  font-weight: 600;
}
.cmdk-results {
  max-height: calc(70vh - 62px);
  overflow-y: auto;
  padding: 8px 8px 10px;
}
.cmdk-section-h {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.1px;
  color: var(--accent); opacity: .6;
  padding: 10px 14px 6px;
  text-shadow: 0 0 8px rgba(255,107,26,.15);
}
.cmdk-row {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all .14s var(--ease-out);
  background: transparent;
  border: 1px solid transparent;
}
.cmdk-row:hover { 
  background: rgba(255,107,26,.08);
  border-color: rgba(255,107,26,.18);
}
.cmdk-row.selected {
  background: linear-gradient(135deg, rgba(255,107,26,.16), rgba(95,178,255,.12));
  border-color: rgba(255,107,26,.4);
}
.cmdk-row .ic {
  width: 28px; height: 28px; flex: 0 0 28px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; opacity: 1;
  border-radius: var(--radius-sm);
  background: rgba(255,107,26,.12);
  transition: all .12s var(--ease-out);
}
.cmdk-row:hover .ic { 
  box-shadow: 0 0 18px rgba(255,107,26,.25);
  transform: scale(1.05);
}
.cmdk-row .text { flex: 1; min-width: 0; }
.cmdk-row .title {
  font-size: 13px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  letter-spacing: .2px;
}
.cmdk-row .sub {
  font-size: 11px; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-top: 2px;
  opacity: .7;
}
.cmdk-row .badge {
  font-size: 10px; font-weight: 700;
  padding: 3px 9px; border-radius: var(--radius-pill);
  background: rgba(255,107,26,.1);
  color: var(--accent);
  flex: 0 0 auto;
  border: 1px solid rgba(255,107,26,.25);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.cmdk-row.kind-action .ic   { 
  color: var(--accent); 
  background: linear-gradient(135deg, rgba(255,107,26,.16), rgba(91,140,255,.12));
}
.cmdk-row.kind-server .ic   { 
  color: var(--accent-2); 
  background: linear-gradient(135deg, rgba(95,178,255,.16), rgba(167,139,250,.12));
  box-shadow: 0 0 16px rgba(95,178,255,.2);
}
.cmdk-row.kind-page .ic     { 
  color: var(--accent-3); 
  background: linear-gradient(135deg, rgba(46,224,107,.16), rgba(46,224,107,.12));
  box-shadow: 0 0 16px rgba(46,224,107,.2);
}
.cmdk-row.kind-doc .ic      { 
  color: var(--warn); 
  background: linear-gradient(135deg, rgba(255,177,59,.16), rgba(251,191,36,.12));
  box-shadow: 0 0 16px rgba(251,191,36,.2);
}
.cmdk-empty {
  padding: 40px 20px; text-align: center;
  color: var(--text-dim);
}
.cmdk-empty .big { 
  font-size: 36px; opacity: .7; margin-bottom: 8px; 
}
.cmdk-empty code { 
  font-family: var(--mono); color: var(--accent); 
  background: rgba(255,107,26,.08);
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 600;
}
/* Topbar Cmd+K hint (clickable) */
.topbar-cmdk-hint {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255,107,26,.08);
  border: 1px solid rgba(255,107,26,.2);
  font-size: 11px; color: var(--accent);
  cursor: pointer; user-select: none;
  transition: all .15s var(--ease-out);
  font-weight: 500;
}
.topbar-cmdk-hint:hover {
  color: #ffffff;
  background: rgba(255,107,26,.14);
  border-color: rgba(255,107,26,.35);
  transform: translateY(-1px);
}
.topbar-cmdk-hint kbd {
  display: inline-block; padding: 1px 5px; border-radius: 3px;
  background: rgba(255,107,26,.12); border: 1px solid rgba(255,107,26,.25);
  font-family: var(--mono); font-size: 10.5px; color: var(--accent);
  line-height: 1.5;
  font-weight: 600;
}
@media (max-width: 720px) {
  .topbar-cmdk-hint { display: none; }  /* collapse on phones — Ctrl+K still works */
}

/* 720–1200px band: keep the topbar a single 62px line. Without this the
   title / Ctrl-K hint wrapped and the bar grew to ~78px. */
@media (max-width: 1200px) {
  .topbar h1 { white-space: nowrap; }
  .topbar-cmdk-hint { white-space: nowrap; }
  .topbar-cmdk-hint kbd { white-space: nowrap; }
  .topbar-search { min-width: 150px; }
  .topbar-health { display: none; }  /* duplicates the hero chips */
}

/* =============== DOCS MODAL =============== */
#docs-modal .modal {
  width: min(1180px, calc(100vw - 32px));
  height: min(86vh, 920px);
  max-height: 86vh;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-pop);
  animation: popIn .32s var(--ease-out);
}
/* The modal-body default is `display: block; overflow: auto`; for the
   docs we need it to be a flex container that constrains its child's
   height so docs-content can actually scroll on its own. */
#docs-modal .modal-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  min-height: 0;
}
.docs-shell { display: flex; flex: 1; min-height: 0; }
.docs-rail {
  width: 240px; flex: 0 0 240px;
  border-right: 1px solid var(--border-soft);
  background: var(--grad-rail);
  overflow-y: auto;
  padding: 16px 12px 28px;
  display: flex; flex-direction: column; gap: 20px;
}
.docs-rail-search {
  position: relative; padding: 0 4px 8px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 6px;
}
.docs-rail-search::before {
  content: "🔍"; position: absolute; left: 12px; top: 8px;
  font-size: 12px; opacity: .65; pointer-events: none;
}
.docs-rail-search input {
  width: 100%; padding: 8px 10px 8px 30px;
  font-size: 12.5px;
  background: rgba(255,107,26,.08);
  border: 1px solid rgba(255,107,26,.2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--sans);
  transition: all .15s var(--ease-out);
}
.docs-rail-search input:focus {
  outline: none;
  background: rgba(255,107,26,.12);
  border-color: rgba(255,107,26,.35);
}
.docs-rail-search input::placeholder {
  color: var(--text-dim);
  opacity: .6;
}
.docs-rail-section { display: flex; flex-direction: column; gap: 3px; }
.docs-rail-section-h {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.1px;
  color: var(--accent); opacity: .65;
  padding: 3px 10px 8px;
  text-shadow: 0 0 8px rgba(255,107,26,.15);
}
.docs-rail-link {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid transparent;
  color: var(--text-dim); cursor: pointer;
  text-align: left; line-height: 1.4;
  transition: all .15s var(--ease-out);
  box-shadow: none; font-size: 12.5px; font-weight: 500;
  text-decoration: none;
  position: relative;
}
.docs-rail-link.indent { padding-left: 26px; font-size: 12px; opacity: .85; }
.docs-rail-link:hover { 
  color: var(--text); 
  background: rgba(255,107,26,.1); 
  border-color: rgba(255,107,26,.2);
}
.docs-rail-link.active {
  background: linear-gradient(135deg, rgba(46,224,107,.18), rgba(255,107,26,.12));
  color: var(--accent-3);
  border-color: rgba(46,224,107,.35);
  font-weight: 600;
  box-shadow: 0 0 16px rgba(46,224,107,.15);
}
.docs-rail-link.active::before {
  content: ""; position: absolute; left: -13px; top: 5px; bottom: 5px; width: 3px;
  background: linear-gradient(180deg, var(--accent-3), var(--accent)); 
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 12px rgba(46,224,107,.6);
  animation: glowBreathe .8s ease-in-out infinite;
}
.docs-rail-link .ic { width: 16px; text-align: center; flex: 0 0 16px; font-size: 13px; }

.docs-content {
  flex: 1; min-width: 0; min-height: 0;
  overflow-y: auto;
  padding: 32px 42px 90px;
  color: var(--text);
  line-height: 1.68;
  font-size: 13.5px;
  scroll-behavior: smooth;
  background: linear-gradient(180deg, rgba(11,17,28,.5), transparent);
}
.docs-content section {
  margin-bottom: 40px; scroll-margin-top: 24px;
  position: relative; /* anchor for the flash stripe */
}
/* When the user navigates to a section, an accent stripe pulses on the
   left edge so the landing is unmistakable, then fades. */
.docs-content section.docs-flash::before {
  content: ""; position: absolute;
  left: -26px; top: -6px; bottom: -6px; width: 4px;
  background: var(--grad-accent);
  border-radius: 2px;
  animation: docsSectionFlash 1.8s var(--ease-out) forwards;
  pointer-events: none;
}
@keyframes docsSectionFlash {
  40%  { opacity: 1; transform: scaleY(1); }
}
.docs-content section.docs-flash > h1,
.docs-content section.docs-flash > h2 {
  animation: docsTitleFlash 1.5s var(--ease-out);
}
@keyframes docsTitleFlash {
  0%   { transform: translateX(-6px); opacity: .6; }
  22%  { transform: translateX(0);    opacity: 1; }
  100% { transform: none;              opacity: 1; }
}
.docs-content h1 {
  font-size: 28px; font-weight: 800; margin: 0 0 14px;
  background: linear-gradient(135deg, #ffffff 0%, #ff6b1a 50%, #5fb2ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: -.5px;
  font-family: var(--display);
  text-shadow: 0 0 40px rgba(255,107,26,.25);
}
.docs-content h2 {
  font-size: 18px; font-weight: 700;
  margin: 32px 0 12px;
  color: var(--text);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center; gap: 10px;
  letter-spacing: .1px;
}
.docs-content h2::before {
  content: ""; width: 4px; height: 18px;
  background: var(--grad-accent); border-radius: 2px;
  flex: 0 0 auto;
}
.docs-content h3 {
  font-size: 14.5px; font-weight: 700;
  margin: 22px 0 10px;
  color: var(--accent);
  letter-spacing: .15px;
  text-shadow: 0 0 12px rgba(255,107,26,.2);
}
.docs-content p { margin: 10px 0; }
.docs-content ul, .docs-content ol { margin: 10px 0; padding-left: 24px; }
.docs-content li { margin: 5px 0; }
.docs-content code {
  background: rgba(255,107,26,.1);
  border: 1px solid rgba(255,107,26,.22);
  padding: 2px 7px; border-radius: 4px;
  font-family: var(--mono); font-size: 12px;
  color: #b6d4ff;
  font-weight: 500;
}
.docs-content pre {
  background: linear-gradient(180deg, #0a0f1a, #050709);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 12px 0;
  overflow-x: auto;
  font-size: 12px; line-height: 1.58;
}
.docs-content pre code { background: none; border: none; padding: 0; color: #c8d8f0; }
.docs-content kbd {
  display: inline-block; padding: 2px 7px; border-radius: 4px;
  background: rgba(255,107,26,.1); border: 1px solid rgba(255,107,26,.25);
  border-bottom-width: 1px;
  font-family: var(--mono); font-size: 11.5px; color: var(--accent);
  margin: 0 3px; line-height: 1.5;
  font-weight: 600;
}
.docs-content a { 
  color: var(--accent); 
  text-decoration: none; 
  border-bottom: 1px dashed rgba(255,107,26,.4);
  transition: all .15s var(--ease-out);
  font-weight: 500;
}
.docs-content a:hover { 
  border-bottom-style: solid;
  color: #ffffff;
  text-shadow: 0 0 12px rgba(255,107,26,.3);
}
.docs-content strong { color: var(--text); font-weight: 700; }
.docs-callout {
  margin: 14px 0;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid;
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.6;
}
.docs-callout .ic { flex: 0 0 auto; font-size: 18px; line-height: 1.2; }
.docs-callout.tip   { 
  background: rgba(255,107,26,.08); 
  border-color: rgba(255,107,26,.3); 
  color: #b6d8ff;
}
.docs-callout.warn  { 
  background: rgba(255,177,59,.08); 
  border-color: rgba(255,177,59,.3); 
  color: #ffd077;
  box-shadow: 0 0 16px rgba(255,177,59,.08) inset;
}
.docs-callout.danger{ 
  background: rgba(255,66,66,.08); 
  border-color: rgba(255,66,66,.35); 
  color: #ff9db3;
  box-shadow: 0 0 16px rgba(255,66,66,.1) inset;
}
.docs-callout p:first-child { margin-top: 0; }
.docs-callout p:last-child  { margin-bottom: 0; }
.docs-table {
  width: 100%; border-collapse: collapse; margin: 14px 0;
  font-size: 12.5px;
}
.docs-table th, .docs-table td {
  text-align: left; padding: 10px 12px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
.docs-table th {
  font-weight: 700; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .7px; color: var(--accent);
  background: rgba(255,107,26,.06);
  border-bottom: 1px solid var(--border-soft);
}
.docs-table tr:hover td { 
  background: rgba(255,107,26,.04);
}
.docs-content section[data-doc-hidden="1"] { display: none; }
.docs-content .docs-no-results {
  padding: 70px 20px; text-align: center;
  color: var(--text-dim);
}
.docs-no-results > * { opacity: .7; }
.docs-rail-link[data-doc-hidden="1"] { display: none; }

/* ===================== REGION: modupload ===================== */
/* =============== 7DTD MOD UPLOAD ZONE ===============
   Drag-and-drop zip uploader. Accepts multiple files at once,
   handles nested zips, detects ModInfo.xml on the server, and
   writes each mod's contents into /game/Mods/<modname>/. */
.sdtd-upload-zone {
  position: relative;
  border: 2px dashed rgba(255,107,26,.22);
  border-radius: var(--radius);
  padding: 26px 22px;
  text-align: center;
  background: linear-gradient(135deg, rgba(255,107,26,.04), rgba(95,178,255,.02));
  transition:
    border-color .25s var(--ease-out),
    background .25s var(--ease-out),
    transform .2s var(--ease-out),
    box-shadow .25s ease-out;
  cursor: pointer;
  overflow: hidden;
}
.sdtd-upload-zone:hover {
  border-color: rgba(255,107,26,.35);
  background: linear-gradient(135deg, rgba(255,107,26,.08), rgba(95,178,255,.04));
}
.sdtd-upload-zone.drag-over {
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(255,107,26,.14), rgba(95,178,255,.08));
  transform: scale(1.012);
  animation: sdtdDragPulse 1.4s ease-in-out infinite;
}
@keyframes sdtdDragPulse {
}
/* Animated grid sweep behind the zone — subtle, gives the UI life
   while the operator is dragging. */
.sdtd-upload-zone::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,107,26,.12), transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(95,178,255,.08), transparent 60%);
  pointer-events: none; opacity: 0;
  transition: opacity .25s var(--ease-out);
}
.sdtd-upload-zone.drag-over::before { opacity: 1; }
/* Floating arrow + dot decoration that animates in on drag-over */
.sdtd-upload-zone .upload-arrow {
  font-size: 42px; line-height: 1;
  color: var(--text-dim); opacity: .55;
  margin-bottom: 10px;
  transition: transform .35s var(--ease-out), color .25s, opacity .25s;
  display: inline-block;
}
.sdtd-upload-zone.drag-over .upload-arrow {
  transform: translateY(-6px) scale(1.18);
  color: var(--accent); opacity: 1;
  filter: drop-shadow(0 6px 14px rgba(255,107,26,.55));
  animation: sdtdArrowBob 1.4s ease-in-out infinite;
}
@keyframes sdtdArrowBob {
  0%, 100% { transform: translateY(-6px) scale(1.18); }
  50%      { transform: translateY(-12px) scale(1.22); }
}
.sdtd-upload-zone .upload-headline {
  font-size: 14.5px; font-weight: 600; color: var(--text);
  margin-bottom: 4px;
  transition: color .2s;
}
.sdtd-upload-zone.drag-over .upload-headline { color: var(--accent); }
.sdtd-upload-zone .upload-sub {
  font-size: 12px; color: var(--text-dim);
  line-height: 1.55;
}
.sdtd-upload-zone input[type="file"] { display: none; }

/* Per-zip / per-mod progress + result list */
.sdtd-upload-progress {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255,107,26,.16);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(255,107,26,.06), rgba(95,178,255,.02));
}
.sdtd-upload-progress-head {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 8px;
  font-size: 13px; font-weight: 600; color: var(--text);
}
.sdtd-upload-progress-spin {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,107,26,.16);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: ptr-spin .9s linear infinite;
  flex: 0 0 16px;
}
.sdtd-upload-bar {
  height: 4px; border-radius: 3px;
  background: rgba(255,107,26,.06);
  overflow: hidden;
}
.sdtd-upload-bar-fill {
  width: 35%; height: 100%;
  background: var(--grad-accent);
  border-radius: 3px;
  animation: bkBarSlide 1.6s ease-in-out infinite;
}

.sdtd-upload-results {
  margin-top: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.sdtd-upload-row {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: rgba(22,32,50,.4);
  animation: cardIn .35s var(--ease-out) backwards;
}
.sdtd-upload-row.installed { border-color: rgba(46,224,107,.22); background: linear-gradient(135deg, rgba(46,224,107,.08), rgba(46,224,107,.02)); }
.sdtd-upload-row.skipped   { border-color: rgba(255,177,59,.20); background: linear-gradient(135deg, rgba(255,177,59,.07), rgba(255,177,59,.02)); }
.sdtd-upload-row.failed    { border-color: rgba(255,66,66,.22); background: linear-gradient(135deg, rgba(255,66,66,.08), rgba(255,66,66,.02)); }
.sdtd-upload-row .ic {
  width: 24px; height: 24px; flex: 0 0 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 14px; font-weight: 700;
}
.sdtd-upload-row.installed .ic { background: rgba(46,224,107,.2); color: #2ee06b; }
.sdtd-upload-row.skipped   .ic { background: rgba(255,177,59,.18); color: #ffc53d; }
.sdtd-upload-row.failed    .ic { background: rgba(255,66,66,.2); color: #ff4242; }
.sdtd-upload-row .info { flex: 1; min-width: 0; }
.sdtd-upload-row .name {
  font-size: 13px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sdtd-upload-row .meta {
  font-size: 11px; color: var(--text-dim); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sdtd-upload-row .badge {
  flex: 0 0 auto;
  font-size: 10px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase;
  padding: 2px 8px; border-radius: var(--radius-pill);
  border: 1px solid;
}
.sdtd-upload-row.installed .badge { color: #2ee06b; border-color: rgba(46,224,107,.4); background: rgba(46,224,107,.08); }
.sdtd-upload-row.skipped   .badge { color: #ffc53d; border-color: rgba(255,177,59,.4); background: rgba(255,177,59,.08); }
.sdtd-upload-row.failed    .badge { color: #ff4242; border-color: rgba(255,66,66,.4); background: rgba(255,66,66,.08); }

/* =============== BACKUPS TAB ===============*/
.bk-auto-wrap {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: var(--radius-sm);
  background: rgba(255,107,26,.04);
  border: 1px solid var(--border-soft);
  transition: border-color .15s, background .15s;
}
.bk-auto-wrap:hover { border-color: rgba(255,107,26,.16); background: rgba(255,107,26,.08); }
.bk-auto-label { font-size: 11.5px; color: var(--text-dim); font-weight: 600; }
.bk-auto-select {
  background: transparent; border: none; color: var(--text);
  font-size: 12px; font-weight: 600; padding: 4px 4px;
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
  background-image: none;
  padding-right: 0;
}
.bk-auto-select:focus { outline: none; box-shadow: none; }
.bk-auto-select option { background: var(--bg-raised); color: var(--text); }
.bk-auto-wrap.active {
  background: rgba(255,107,26,.12);
  border-color: rgba(255,107,26,.32);
}
.bk-auto-wrap.active .bk-auto-label { color: var(--accent); }

/* Animated progress strip — sits between the header and the backup
   list while a backup is running. SSE log lines from the sidecar
   update the bottom line so the operator sees real activity, not a
   blind spinner. */
.im-b-progress {
  margin: 12px 18px 0;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(255,107,26,.08), rgba(95,178,255,.04));
  border: 1px solid rgba(255,107,26,.20);
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 18px rgba(255,107,26,.08);
  animation: bkProgressIn .25s var(--ease-out);
}
@keyframes bkProgressIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.im-b-progress-head {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 8px;
}
.im-b-progress-head strong { font-size: 13px; color: var(--text); flex: 1; min-width: 0; }
.im-b-progress-elapsed { flex: 0 0 auto; font-size: 11px; }
.im-b-progress-spin {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,107,26,.16);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: ptr-spin .9s linear infinite;
  flex: 0 0 16px;
}
.im-b-progress-bar {
  height: 4px; border-radius: 3px;
  background: rgba(255,107,26,.06);
  overflow: hidden;
  margin-bottom: 8px;
}
.im-b-progress-bar-fill {
  width: 35%; height: 100%;
  background: var(--grad-accent);
  border-radius: 3px;
  animation: bkBarSlide 1.6s ease-in-out infinite;
}
@keyframes bkBarSlide {
  0%   { transform: translateX(-30%); width: 30%; }
  50%  { transform: translateX(60%); width: 50%; }
  100% { transform: translateX(190%); width: 30%; }
}
.im-b-progress-line {
  font-size: 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  opacity: .8;
}

/* "Intelligent backups" info note + per-game include/exclude box. */
.bk-smart-note {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(255,107,26,.06), rgba(95,178,255,.03));
  border: 1px solid rgba(255,107,26,.14);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  font-size: 12px; line-height: 1.55;
  color: var(--text-dim);
}
.bk-smart-note .ic { font-size: 18px; line-height: 1; flex: 0 0 auto; }
.bk-smart-note strong { color: var(--text); }

/* Backup card list — replaces the old <table>. */
.bk-card-list { display: flex; flex-direction: column; gap: 10px; }
.bk-card {
  background: var(--bg-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 13px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 14px;
  align-items: center;
  transition: border-color .15s, background .15s, box-shadow .2s;
  animation: cardIn .35s var(--ease-out) backwards;
}
.bk-card-list > .bk-card:nth-child(1) { animation-delay: 0; }
.bk-card-list > .bk-card:nth-child(2) { animation-delay: 30ms; }
.bk-card-list > .bk-card:nth-child(3) { animation-delay: 60ms; }
.bk-card-list > .bk-card:nth-child(n+4) { animation-delay: 90ms; }
@keyframes bkCardIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.bk-card:hover {
  border-color: rgba(255,107,26,.22);
  background: var(--grad-card-hover);
}
.bk-card-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.bk-card-when {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  display: flex; align-items: baseline; gap: 8px;
}
.bk-card-when .ago { font-size: 11px; font-weight: 400; color: var(--text-dim); }
.bk-card-meta {
  font-size: 11.5px; color: var(--text-dim);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  line-height: 1.4;
}
.bk-card-meta .size { font-family: var(--mono); color: var(--accent); font-weight: 600; }
.bk-card-meta .desc { color: var(--text); font-style: italic; }
.bk-card-meta .auto-tag {
  padding: 1px 8px; border-radius: var(--radius-pill);
  background: rgba(255,107,26,.12); border: 1px solid rgba(255,107,26,.28);
  font-size: 10px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--accent);
}
.bk-card-meta .id { font-family: var(--mono); font-size: 10.5px; opacity: .55; }
.bk-card-actions { display: flex; gap: 6px; flex-shrink: 0; }
.bk-card-actions button {
  min-height: 0;
  padding: 7px 11px;
  font-size: 12px; font-weight: 600;
  border-radius: var(--radius-sm);
  transition: background .15s, border-color .15s, color .15s, transform .12s;
}
.bk-card-actions button.bk-browse {
  background: linear-gradient(135deg, rgba(255,107,26,.14), rgba(255,107,26,.04));
  border: 1px solid rgba(255,107,26,.32);
  color: var(--accent);
}
.bk-card-actions button.bk-browse:hover {
  background: linear-gradient(135deg, rgba(255,107,26,.28), rgba(255,107,26,.12));
  color: #fff; border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(255,107,26,.24);
}
.bk-card-actions button.bk-restore {
  background: linear-gradient(135deg, rgba(46,224,107,.14), rgba(46,224,107,.04));
  border: 1px solid rgba(46,224,107,.32);
  color: #2ee06b;
}
.bk-card-actions button.bk-restore:hover {
  background: linear-gradient(135deg, rgba(46,224,107,.32), rgba(46,224,107,.16));
  color: #fff; border-color: #2ee06b;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(46,224,107,.28);
}
.bk-card-actions button.bk-del {
  background: linear-gradient(135deg, rgba(255,66,66,.12), rgba(255,66,66,.04));
  border: 1px solid rgba(255,66,66,.24);
  color: #ff4242;
}
.bk-card-actions button.bk-del:hover {
  background: linear-gradient(135deg, rgba(255,66,66,.32), rgba(255,66,66,.16));
  color: #fff; border-color: #ff4242;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(255,66,66,.28);
}
@media (max-width: 720px) {
  .bk-card { grid-template-columns: 1fr; }
  .bk-card-actions { justify-content: flex-end; }
}

/* =============== BULK CONFIRM MODAL ===============
   Replaces the native window.confirm()/prompt() the batch action
   runner used to use. Same modal handles confirm-only flows AND
   prompts that need a freeform RCON message. */
#bulk-confirm-modal .bcm-pad { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 14px; }
#bulk-confirm-modal .bcm-message {
  margin: 0; font-size: 14px; color: var(--text); line-height: 1.5;
}
#bulk-confirm-modal .bcm-message strong { color: #fff; }
#bulk-confirm-modal .bcm-input-wrap { display: flex; flex-direction: column; gap: 6px; }
#bulk-confirm-modal .bcm-input-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .8px; color: var(--text-dim); opacity: .85;
}
#bulk-confirm-modal .bcm-input {
  padding: 9px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(22,32,50,.5);
  color: var(--text);
  font-size: 13px;
}
#bulk-confirm-modal .bcm-list-wrap {
  background: rgba(22,32,50,.4);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 10px 14px 12px;
  max-height: 180px; overflow: auto;
}
#bulk-confirm-modal .bcm-list-head {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .8px; color: var(--text-dim);
  margin-bottom: 6px;
}
#bulk-confirm-modal .bcm-list { list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: 12px; }
#bulk-confirm-modal .bcm-list li {
  padding: 3px 0; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#bulk-confirm-modal .bcm-list li.more { color: var(--text-dim); font-style: italic; font-family: var(--sans); }
#bulk-confirm-modal .bcm-grace {
  font-size: 12px; color: var(--text-dim);
  background: linear-gradient(135deg, rgba(255,107,26,.08), rgba(95,178,255,.04));
  border: 1px solid rgba(255,107,26,.18);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  line-height: 1.5;
}
#bulk-confirm-modal .bcm-buttons {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 4px;
}
#bulk-confirm-modal .bcm-cancel,
#bulk-confirm-modal .bcm-ok {
  padding: 9px 18px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .12s, box-shadow .2s;
}
#bulk-confirm-modal .bcm-cancel {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  color: var(--text-dim);
}
#bulk-confirm-modal .bcm-cancel:hover { color: var(--text); border-color: rgba(255,107,26,.16); background: rgba(255,107,26,.08); }
#bulk-confirm-modal .bcm-ok {
  background: linear-gradient(135deg, rgba(255,107,26,.24), rgba(255,107,26,.12));
  border: 1px solid rgba(255,107,26,.40);
  color: #fff;
  box-shadow: 0 4px 14px rgba(255,107,26,.20);
}
#bulk-confirm-modal .bcm-ok:hover {
  background: linear-gradient(135deg, rgba(255,107,26,.40), rgba(255,107,26,.24));
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(255,107,26,.32);
}
#bulk-confirm-modal .bcm-ok.danger {
  background: linear-gradient(135deg, rgba(255,66,66,.24), rgba(255,66,66,.12));
  border-color: rgba(255,66,66,.40);
}
#bulk-confirm-modal .bcm-ok.danger:hover {
  background: linear-gradient(135deg, rgba(255,66,66,.40), rgba(255,66,66,.24));
  box-shadow: 0 6px 18px rgba(255,66,66,.32);
}


/* ===================== REGION: backupark ===================== */
  /* =============== BACKUP BROWSER ===============*/
  /* Two-pane layout: left is a virtualized-ish tree (each row a flat
     div, indented by path depth), right is either a text viewer for
     plain-text entries or a "binary, download to view" placeholder. */
  #bk-browser-modal .modal { width: min(1120px, calc(100vw - 32px)); }
  #bk-browser-modal .modal-body {
    padding: 0;
    height: min(70vh, 720px);
    min-height: 420px;
    display: grid;
    grid-template-columns: 340px 1fr;
  }
  .bkb-tree {
    border-right: 1px solid var(--border-strong);
    overflow: auto;
    padding: 8px 0;
    background: linear-gradient(180deg, rgba(15,22,33,.95) 0%, rgba(7,10,16,.92) 100%);
    font-size: 13px;
  }
  .bkb-tree .bkb-search {
    padding: 8px 12px 10px;
    position: sticky; top: 0; z-index: 2;
    background: linear-gradient(180deg, rgba(20,29,44,.96), rgba(15,22,33,.92));
    border-bottom: 1px solid var(--border-strong);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .bkb-tree .bkb-search input {
    width: 100%;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--text);
    font-size: 12px;
    transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
  }
  .bkb-tree .bkb-search input:focus {
    outline: none;
    border-color: var(--accent);
  }
  .bkb-row {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 12px 4px 6px;
    cursor: pointer;
    user-select: none;
    border-radius: var(--radius-sm);
    margin: 0 6px;
    transition: background 120ms var(--ease-out), color 120ms var(--ease-out);
  }
  .bkb-row:hover { background: rgba(255,107,26,.06); }
  .bkb-row.selected { background: rgba(255,107,26,.12); color: var(--accent); text-shadow: 0 0 8px rgba(255,107,26,.3); }
  .bkb-row .bkb-twist {
    width: 14px; flex: 0 0 14px;
    color: var(--text-dim);
    font-family: var(--mono);
    font-size: 10px;
    text-align: center;
    transition: transform 120ms var(--ease-out);
  }
  .bkb-row .bkb-twist.open { transform: rotate(90deg); }
  .bkb-row .bkb-icon { width: 16px; flex: 0 0 16px; opacity: .8; text-align: center; }
  .bkb-row .bkb-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); }
  .bkb-row .bkb-size { color: var(--text-dim); font-family: var(--mono); font-size: 11px; flex-shrink: 0; }
  .bkb-row.dir .bkb-name { color: var(--text); }
  .bkb-content {
    display: flex; flex-direction: column; min-height: 0;
    background: linear-gradient(180deg, rgba(15,22,33,.92) 0%, rgba(7,10,16,.94) 100%);
  }
  .bkb-content-head {
    padding: 9px 14px;
    border-bottom: 1px solid var(--border-strong);
    display: flex; align-items: center; gap: 12px;
    font-family: var(--mono); font-size: 12px;
    background: linear-gradient(180deg, rgba(20,29,44,.88), rgba(15,22,33,.85));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .bkb-content-head .path { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
  .bkb-content-head .bytes { color: var(--text-dim); }
  .bkb-content-head button {
    padding: 5px 10px; font-size: 11.5px;
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, rgba(255,107,26,.12), rgba(255,107,26,.05));
    border: 1px solid var(--accent);
    color: var(--accent);
    cursor: pointer;
    transition: all 140ms var(--ease-out);
    font-weight: 600;
  }
  .bkb-content-head button:hover { 
    background: linear-gradient(180deg, rgba(255,107,26,.22), rgba(255,107,26,.15));
    color: #fff;
  }
  .bkb-viewer {
    flex: 1; min-height: 0;
    overflow: auto;
    padding: 12px 16px;
    font-family: var(--mono);
    font-size: 12.5px;
    line-height: 1.55;
    white-space: pre;
    tab-size: 2;
  }
  .bkb-viewer.text { color: var(--text); }
  .bkb-empty, .bkb-binary, .bkb-loading {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: var(--text-dim); gap: 10px; padding: 40px;
    text-align: center;
  }
  .bkb-empty .icon, .bkb-binary .icon { font-size: 42px; opacity: .55; }
  .bkb-banner {
    margin: 0; padding: 8px 14px;
    background: linear-gradient(90deg, rgba(255,177,59,.08), rgba(255,177,59,.02));
    border-bottom: 1px solid rgba(255,177,59,.25);
    color: var(--amber);
    font-size: 12px;
    font-weight: 600;
  }
  @media (max-width: 720px) {
    #bk-browser-modal .modal-body { grid-template-columns: 1fr; height: 75vh; }
    .bkb-tree { max-height: 38vh; border-right: none; border-bottom: 1px solid var(--border-strong); }
  }

  /* =============== ARK MODS STAGING ===============*/
  /* Pending-state visual treatment for the per-mod rows. Stage adds get
     a yellow accent stripe + "to install" badge; stage removes get a
     red strikethrough + "will remove" badge. Operator can cancel any
     pending action before clicking Apply. */
  .arkm-pending-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px; border-radius: var(--radius-pill);
    font-size: 9.5px; font-weight: 700; letter-spacing: .4px;
    text-transform: uppercase;
    border: 1px solid;
    vertical-align: middle;
    transition: all 120ms var(--ease-out);
  }
  .arkm-pending-badge.add { 
    background: linear-gradient(120deg, rgba(255,177,59,.14), rgba(255,177,59,.06));
    border-color: var(--amber);
    color: var(--amber);
    box-shadow: 0 0 8px rgba(255,177,59,.15);
  }
  .arkm-pending-badge.remove { 
    background: linear-gradient(120deg, rgba(255,66,66,.14), rgba(255,66,66,.06));
    border-color: var(--err);
    color: var(--err);
    box-shadow: 0 0 8px rgba(255,66,66,.15);
  }
  .dzm-mod-row.arkm-pending-add {
    border-left: 3px solid var(--amber);
    background: linear-gradient(90deg, rgba(255,177,59,.08), transparent 60%);
    box-shadow: inset 0 0 12px rgba(255,177,59,.05);
  }
  .dzm-mod-row.arkm-pending-remove {
    border-left: 3px solid var(--err);
    background: linear-gradient(90deg, rgba(255,66,66,.07), transparent 60%);
    box-shadow: inset 0 0 12px rgba(255,66,66,.05);
    opacity: .65;
  }
  .dzm-mod-row.arkm-pending-remove .dzm-mod-row-title {
    text-decoration: line-through;
    text-decoration-color: rgba(255,66,66,.5);
  }
  .arkm-pending-footer {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(180deg, rgba(255,177,59,.08), rgba(255,177,59,.03));
    border: 1px solid var(--amber);
    border-radius: var(--radius);
    box-shadow: 0 0 0 1px rgba(255,177,59,.15), 0 8px 24px rgba(255,177,59,.1);
    position: sticky; bottom: 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .arkm-pending-footer .arkm-pending-pip {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--amber);
    box-shadow: 0 0 8px rgba(255,177,59,.8), inset 0 0 4px rgba(255,255,255,.3);
    animation: pulseDot 2s ease-in-out infinite;
    flex: 0 0 auto;
  }
  .arkm-pending-footer .arkm-pending-status {
    font-size: 12.5px; color: var(--text);
    font-weight: 600;
  }

  /* =============== SETTINGS MODAL ===============*/
  .settings-section h4 {
    margin: 0 0 10px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .9px;
    color: var(--accent);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--accent);
    display: flex; align-items: center; gap: 8px;
    opacity: 1;
  }
  .settings-section h4::before {
    content: ""; width: 3px; height: 11px;
    background: var(--grad-accent);
    border-radius: 2px;
    flex: 0 0 auto;
  }
  .settings-row {
    display: flex; align-items: center; gap: 14px;
    padding: 11px 2px;
    border-bottom: 1px dashed rgba(255,107,26,.04);
    transition: background 120ms var(--ease-out);
  }
  .settings-row:hover { background: rgba(255,107,26,.03); }
  .settings-row:last-child { border-bottom: none; }
  .settings-row-info { flex: 1; min-width: 0; }
  .settings-row-info .lbl { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; }
  .settings-row-info .hint { font-size: 11.5px; color: var(--text-dim); margin-top: 3px; line-height: 1.45; }
  .settings-row-ctrl { flex: 0 0 auto; display: flex; align-items: center; }
  .settings-row-ctrl select { 
    min-width: 170px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--sans);
    font-size: 13px;
    cursor: pointer;
    transition: all 140ms var(--ease-out);
  }
  .settings-row-ctrl select:hover {
    border-color: var(--accent);
  }
  .settings-row-ctrl select:focus {
    outline: none;
    border-color: var(--accent);
  }

  /* Density toggle hooks: tiles use --svr-grid-min, bars hide via class. */
  .hide-svr-bars .svr-tile-bars { display: none; }
  .hide-svr-bars .svr-tile-body { padding-bottom: 13px; }

  /* RGSP brand block in About (settings modal). */
  .about-card {
    display: flex; gap: 14px; align-items: center;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(255,107,26,.08), rgba(95,178,255,.06));
    border: 1px solid rgba(255,107,26,.25);
    border-radius: var(--radius);
  }
  .about-card .logo-big {
    width: 52px; height: 52px; flex: 0 0 52px;
    border-radius: var(--radius-sm);
    background: var(--grad-accent);
    display: flex; align-items: center; justify-content: center;
    color: #0a0e17; font-weight: 800; font-size: 18px;
    letter-spacing: -.5px;
    position: relative; overflow: hidden;
  }
  .about-card .logo-big::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.4), transparent 55%);
  }
  .about-card .info .name {
    font-size: 15px; font-weight: 700; color: var(--text);
    display: flex; align-items: baseline; gap: 8px;
  }
  .about-card .info .name .ver { font-size: 11.5px; font-weight: 400; color: var(--text-dim); font-family: var(--mono); }
  .about-card .info .desc { font-size: 12px; color: var(--text-dim); margin-top: 4px; line-height: 1.5; }
  .about-card .info .links { margin-top: 8px; display: flex; gap: 12px; font-size: 11.5px; }
  .about-card .info .links a { color: var(--accent); text-decoration: none; transition: all 120ms var(--ease-out); }
  .about-card .info .links a:hover { color: #fff; text-decoration: underline; text-shadow: 0 0 8px rgba(255,107,26,.4); }

/* ===================== REGION: toastutil ===================== */
  /* =============== TOASTS =============== */
  #toasts {
    position: fixed; bottom: 24px; right: 24px; z-index: 9999;
    display: flex; flex-direction: column; gap: 12px; max-width: 440px;
    pointer-events: none;
  }
  #toasts .toast { pointer-events: auto; }
  .toast {
    background: linear-gradient(180deg, rgba(15,22,34,.88), rgba(7,10,16,.91));
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    font-size: 13px;
    color: var(--text);
    animation: toastIn .4s var(--ease-out);
    position: relative; overflow: hidden;
  }
  .toast::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--grad-accent);
  }
  .toast.ok::before { 
    background: var(--grad-ok); 
    box-shadow: 0 0 16px rgba(46,224,107,.6), inset 0 0 12px rgba(46,224,107,.3); 
  }
  .toast.err::before { 
    background: var(--grad-danger); 
    box-shadow: 0 0 16px rgba(255,66,66,.6), inset 0 0 12px rgba(255,66,66,.3); 
  }
  .toast .close {
    float: right; cursor: pointer; color: var(--text-dim);
    margin-left: 12px; font-size: 18px; line-height: 1;
    /* real <button>: strip chrome, keep a >=24px hit target */
    background: none; border: 0; padding: 0; font-family: inherit;
    min-width: 24px; min-height: 24px; margin-top: -4px; margin-right: -6px;
    transition: color .2s var(--ease-out), opacity .2s var(--ease-out);
  }
  .toast.leaving {
    opacity: 0; transform: translateX(24px);
    transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
  }
  .toast .close:hover { color: var(--accent); opacity: .85; }
  @keyframes toastIn {
    from { transform: translateX(32px) scale(.94); opacity: 0; }
    to   { transform: none; opacity: 1; }
  }

  /* =============== BREADCRUMBS =============== */
  .crumbs { 
    font-family: var(--mono); 
    font-size: 12px; 
    display: inline-flex; 
    gap: 8px; 
    align-items: center; 
    color: var(--text-dim);
  }
  .crumbs a { 
    cursor: pointer; 
    color: var(--accent);
    transition: color .2s var(--ease-out);
  }
  .crumbs a:hover { 
    color: var(--accent-2);
  }
  .crumbs .sep { 
    color: var(--muted); 
    opacity: .4; 
  }
  .fs-hdr { 
    padding: 12px 20px; 
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(15,22,34,.5), rgba(7,10,16,.6));
    font-size: 13px;
    color: var(--text-dim);
  }

  /* =============== EMPTY STATES =============== */
  .empty { 
    padding: 56px 24px; 
    text-align: center; 
    color: var(--text-dim); 
    font-size: 14px;
  }
  .empty .hint { 
    display: block; 
    margin-top: 10px; 
    font-size: 12.5px; 
    color: var(--muted);
    line-height: 1.6;
  }
  .empty .big { 
    font-size: 48px; 
    margin-bottom: 14px; 
    opacity: .35;
    filter: drop-shadow(0 0 12px rgba(255,107,26,.1));
  }

  /* =============== UTILITY =============== */
  .row-gap { 
    display: flex; 
    gap: 12px; 
    flex-wrap: wrap; 
    align-items: center; 
  }
  .spacer { flex: 1; }
  pre.log {
    margin: 0; 
    padding: 16px 20px; 
    font-family: var(--mono); 
    font-size: 12px;
    background: linear-gradient(180deg, rgba(4,6,10,.95), rgba(7,10,16,.98));
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    max-height: 260px; 
    overflow: auto; 
    white-space: pre-wrap; 
    word-break: break-all;
    color: var(--text-dim);
    box-shadow: inset 0 1px 4px rgba(0,0,0,.4);
  }

  /* small-screen: tighter */
  @media (max-width: 640px) {
    main { padding: 14px; gap: 14px; }
    .form-grid { grid-template-columns: 1fr; gap: 6px; padding: 14px; }
    .form-grid > label { padding-top: 8px; }
    .cards { padding: 14px; grid-template-columns: 1fr; }
    th, td { padding: 8px 12px; }
    #toasts { bottom: 12px; right: 12px; max-width: calc(100vw - 24px); }
  }

  .panel-ctxmenu {
    position: fixed; z-index: 99999; min-width: 200px;
    background: linear-gradient(180deg, rgba(15,22,34,.96), rgba(7,10,16,.97));
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 6px 0;
    font-size: 13px; 
    color: var(--text);
    user-select: none;
  }
  .panel-ctxmenu-item {
    padding: 8px 14px; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    gap: 10px;
    color: var(--text);
    transition: background .16s var(--ease-out), color .16s var(--ease-out);
  }
  .panel-ctxmenu-item:hover { 
    background: linear-gradient(90deg, rgba(255,107,26,.16), rgba(255,107,26,.08));
    color: var(--accent);
  }
  .panel-ctxmenu-item.danger { 
    color: var(--err); 
  }
  .panel-ctxmenu-item.danger:hover { 
    background: linear-gradient(90deg, rgba(255,66,66,.16), rgba(255,66,66,.08));
    color: var(--accent-hot);
  }
  .panel-ctxmenu-item.disabled { 
    opacity: .4; 
    pointer-events: none; 
  }
  .panel-ctxmenu-divider {
    height: 1px;
    background: var(--border);
    margin: 6px 0;
  }
  .panel-ctxmenu-icon {
    width: 16px;
    opacity: .8;
    text-align: center;
  }

/* ═══════════════════════════════════════════════════════════════════════════
   COMMAND DECK OVERRIDE LAYER (2026-06-12)
   Voices the panel in the refugebot admin design system: squared geometry,
   hairline frames, flat graphite, signal-orange interactive + scan-blue
   data accents, Chakra Petch / IBM Plex type, square LEDs.
   Appended LAST so it wins the cascade without editing the region CSS
   above. Selector names are load-bearing (JS templates) — nothing here
   renames or restructures; it only re-voices paint, type and motion.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 0 · Glass is dead. backdrop-filter was the page's biggest compositing
   cost (every blurred layer re-renders when anything beneath it paints).
   Chrome surfaces below get opaque fills instead. */
* { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* ── 1 · Type voice — Chakra headings, mono micro-labels, no soft shadows */
h1, h2, h3 { font-family: var(--display); }
::selection { background: rgba(255,107,26,.28); color: var(--ink); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* ── 2 · Buttons — squared hairline; primary = chamfered signal fill.
   Deck motion rule: nothing bounces, nothing lifts, nothing glows. */
button {
  font-family: var(--display);
  text-transform: uppercase; letter-spacing: .07em; font-size: 11.5px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  border-radius: var(--radius); box-shadow: none;
}
button:hover  { background: var(--surface-2); border-color: var(--line-hi); color: var(--ink); transform: none; }
button:active { background: var(--surface-3); transform: none; }
button.primary {
  background: var(--signal); color: var(--on-signal); border-color: transparent;
  clip-path: var(--chamfer-sm); box-shadow: none;
}
button.primary:hover { background: var(--signal-hi); filter: none; box-shadow: none; }
button.danger { background: transparent; border-color: var(--err); color: var(--err); }
button.danger:hover { background: var(--err-dim); border-color: var(--err); color: var(--err); }
button.ghost { border-color: transparent; }
button.ghost:hover { background: var(--signal-dim); border-color: var(--signal); color: var(--ink); }
button.small { font-size: 10.5px; letter-spacing: .05em; }

/* ── 3 · Card action row — labeled primary keeps its FUNCTIONAL color
   (green start / red stop; status colors are never decorative), flattened
   to Deck finishes: chamfered fill, hairline outline, zero glow. */
.svr-card-actions { background: var(--bg-raised); border-top: 1px solid var(--line); }
.svr-act-primary {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .08em;
  font-size: 11.5px; border-radius: var(--radius);
}
.svr-act-primary:active { transform: none; }
.svr-act-primary.act-start { background: var(--grad-ok); color: #04200f; box-shadow: none; clip-path: var(--chamfer-sm); border-color: transparent; }
.svr-act-primary.act-start:hover { box-shadow: none; filter: brightness(1.07); }
.svr-act-primary.act-start:hover svg { transform: none; }
.svr-act-primary.act-stop { background: transparent; border-color: var(--err); color: var(--err); }
.svr-act-primary.act-stop:hover { background: var(--err-dim); border-color: var(--err); color: var(--err); }
.svr-act-icon { background: var(--surface); border-color: var(--line); color: var(--ink-2); border-radius: var(--radius); }
.svr-act-icon:hover { background: var(--signal-dim); border-color: var(--signal); color: var(--signal); }
.svr-act-icon:active { transform: none; }
.svr-act-menu { background: var(--surface); border-color: var(--line-hi); border-radius: var(--radius); box-shadow: var(--shadow-md); }
.svr-menu-item { border-radius: var(--radius); }
.svr-menu-item:hover { background: var(--surface-2); }
.svr-menu-item.danger { color: var(--err); }
.svr-menu-item.danger:hover { background: var(--err-dim); color: var(--err); }

/* ── 4 · Server tiles — flat instrument modules; hover = hairline shift */
.svr-tile { box-shadow: none; }
.svr-tile:hover { transform: none; box-shadow: none; border-color: var(--line-hi); }

/* status tag → rectangular mono tag + square LED (one 8px ring max) */
.svr-tile-status {
  font-family: var(--mono); font-weight: 600; letter-spacing: .12em;
  background: rgba(10,13,18,.92); text-shadow: none;
  border-radius: var(--radius-pill);
}
.svr-tile-status .dot { border-radius: 0; width: 6px; height: 6px; flex: 0 0 6px; }
.svr-tile-status.running .dot { box-shadow: 0 0 8px currentColor; }
.svr-tile-status.starting .dot, .svr-tile-status.installing .dot, .svr-tile-status.stopping .dot,
.svr-tile-status.restarting .dot, .svr-tile-status.updating .dot { box-shadow: 0 0 8px currentColor; }
.svr-tile-status.crashed, .svr-tile-status.deleting, .svr-tile-status.delete { box-shadow: none; color: var(--err); }

/* agent chip = identity/data → scan blue (signal stays rationed) */
.svr-tile-agent { background: rgba(10,13,18,.92); border-color: rgba(95,178,255,.30); color: var(--scan); border-radius: var(--radius-pill); font-size: 10px; letter-spacing: .08em; }
.svr-tile-agent.offline { border-color: rgba(255,66,66,.4); color: var(--err); }

/* ── 5 · Topbar → telemetry strip voice */
.topbar { background: var(--bg-raised); border-bottom: 1px solid var(--line); }
.topbar h1 { font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }
.topbar-health .seg { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.topbar-health .seg .dot, .topbar-health .dot { border-radius: 0; }
.topbar-new-btn { background: var(--signal); color: var(--on-signal); border: none; clip-path: var(--chamfer-sm); box-shadow: none; }
.topbar-new-btn:hover { background: var(--signal-hi); box-shadow: none; transform: none; filter: none; }
.topbar-icon-btn { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
.topbar-icon-btn:hover { background: var(--signal-dim); border-color: var(--signal); color: var(--signal); transform: none; }

/* ── 6 · Sidebar → instrument rail: active item carries an inset signal rail */
.sidebar { background: var(--bg-raised); border-right: 1px solid var(--line); }
.side-link { border-radius: var(--radius); }
.side-link:hover { background: var(--surface-2); }
.side-link.active { background: var(--surface-2); color: var(--ink); box-shadow: inset 2px 0 0 var(--signal); }
.side-link.active::before { content: none; }
.side-link.active .ic { color: var(--signal); }
.side-link .count {
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2);
  font-family: var(--mono); font-size: 10px; border-radius: var(--radius-pill);
}

/* ── 7 · Inputs — flat, signal double-ring calibration focus */
input, select, textarea { background: var(--surface); border-color: var(--line); border-radius: var(--radius); }
input::placeholder, textarea::placeholder { font-style: normal; color: var(--ink-3); }
input:hover, select:hover, textarea:hover { background: var(--surface); border-color: var(--line-hi); }
input:focus, select:focus, textarea:focus {
  border-color: var(--signal);
  box-shadow: 0 0 0 3px var(--signal-dim);
  background: var(--surface);
}

/* ── 8 · Modals — squared, hairline frame, zone-bar tabs */
.modal-bg { background: rgba(4,6,9,.72); }
.modal { background: var(--surface); border: 1px solid var(--line-hi); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.im-tab { font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; font-size: 11px; border-radius: var(--radius); }
.im-tab.active { background: var(--signal-dim); color: var(--signal); border-color: rgba(255,107,26,.35); }

/* ── 9 · Squared scrollbars, fleet-wide */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--bg-raised); border-radius: 0; }
*::-webkit-scrollbar-thumb { background: var(--surface-3); border: 1px solid var(--line); border-radius: 0; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }
* { scrollbar-color: #3d4754 #0a0d12; scrollbar-width: thin; }

/* ── 10 · Numerals read as instruments everywhere */
.stat-chip, .topbar-health, .im-head-stats { font-variant-numeric: tabular-nums; }

/* ================ Template Library (WI-09) ================ */
/* Flat Command Deck cards over /api/template-catalog. Monogram tiles
   (no CDN hotlinks); local /game-art/<id>.jpg layers on top when it
   exists (img onerror removes itself otherwise). */
.lib-toolbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-bottom: 14px;
}
.lib-toolbar input {
  flex: 1 1 220px; min-width: 180px;
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 12px; color: inherit; font: inherit;
}
.lib-toolbar input:focus { outline: none; border-color: var(--accent); }
.lib-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.lib-chip {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 12px; font-size: 12px; color: inherit;
  cursor: pointer; transition: border-color .12s, background .12s;
}
.lib-chip:hover { border-color: var(--accent); }
.lib-chip.active {
  border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.lib-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  max-height: min(60vh, 620px); overflow: auto; padding-right: 2px;
}
.lib-card {
  display: flex; align-items: center; gap: 10px; text-align: left;
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px; color: inherit; font: inherit;
  cursor: pointer; transition: border-color .12s, transform .12s;
}
.lib-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.lib-card-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.lib-name {
  font-weight: 600; font-size: 13px; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.lib-art {
  position: relative; flex: none; width: 44px; height: 44px;
  border-radius: 8px; overflow: hidden; border: 1px solid var(--border);
}
.lib-art img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.lib-mono {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 20px;
  color: hsl(var(--mono-h, 20) 65% 72%);
  background: linear-gradient(150deg,
    hsl(var(--mono-h, 20) 32% 15%),
    hsl(var(--mono-h, 20) 40% 9%));
}
.modal-head .lib-art { width: 26px; height: 26px; vertical-align: -7px; display: inline-block; margin-right: 6px; }
.modal-head .lib-mono { font-size: 13px; }
.lib-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.lib-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  border: 1px solid var(--border); border-radius: 4px; padding: 1.5px 6px;
  color: var(--muted, #98a2ad);
}
.lib-tag.native { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.lib-tag.wine   { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.lib-tag.login  { color: var(--err); border-color: color-mix(in srgb, var(--err) 45%, transparent); }
.lib-tag.ported { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.lib-detail h4 {
  margin: 14px 0 6px; font-size: 11px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase; opacity: .7;
}
.lib-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.lib-table th, .lib-table td {
  text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--border);
}
.lib-table th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; opacity: .6; }
.lib-rx { font-size: 11.5px; word-break: break-all; }
.lib-rx-block {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: 6px; padding: 8px 10px;
}
.lib-kv { display: flex; gap: 10px; font-size: 12.5px; align-items: baseline; }
.lib-kv b { flex: none; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; opacity: .7; }
.lib-scaffold-row {
  display: flex; align-items: center; gap: 12px; margin-top: 16px;
  padding-top: 14px; border-top: 1px solid var(--border); font-size: 12.5px;
}
.lib-scaffold-out { margin-top: 12px; }
.lib-scaffold-ok {
  border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent);
  border-radius: 8px; padding: 10px 12px; font-size: 12.5px;
  background: color-mix(in srgb, var(--ok) 7%, transparent);
}
.lib-scaffold-ok ul { margin: 8px 0 0; padding-left: 18px; }
.lib-scaffold-warn { margin-top: 8px; color: var(--warn); }

/* ---- shared dirty-state indicators (env config etc.) ---- */
.dirty-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); flex: 0 0 8px; }
.row-dirty { background: var(--warn-dim, rgba(255,197,61,.08)); }
.empty .big svg { display: inline-block; vertical-align: middle; color: var(--ink-3, var(--muted)); }
.dzm-empty .big svg, .cfg-empty .big svg, .cmdk-empty .big svg { display: inline-block; vertical-align: middle; color: var(--ink-3, var(--muted)); }
