/*
  DayZ Server Manager — web UI styles.
  Copyright (c) 2026 Aristarh Ucolov.
  Design system v3 — "premium panel": deep graphite surfaces, orange accent,
  SVG iconography, layered elevation, full light theme, mobile-first fixes,
  a11y (focus rings, reduced motion, contrast ≥ AA). All component CSS is
  token-driven; every class name from v2 is preserved.
*/

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */

:root,
html[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces — increasing prominence */
  --bg:               #0c0f16;
  --bg-soft:          #11141c;
  --surface:          #161a23;
  --surface-2:        #1c212d;
  --surface-hover:    #232937;
  --panel:            #161a23;          /* legacy alias */
  --panel-alt:        #1c212d;

  /* Borders */
  --border:           #262d3a;
  --border-strong:    #364052;
  --border-subtle:    #1b202b;

  /* Text */
  --text:             #eef1f7;
  --text-secondary:   #b2bac9;
  --text-tertiary:    #8a94ab;          /* ≥ AA on --surface for 11px labels */
  --text-faint:       #6b7590;          /* decorative meta only */
  --text-dim:         #8a94ab;          /* legacy alias */

  /* Accent — DayZ-ish orange, the colour the manager shipped with through
     v0.10.1. Dark theme carries DARK ink on the bright fill (7.6:1); the light
     theme below uses a deep burnt orange instead, because #ff7a2b on white is
     only 2.6:1 and cannot hold text. Both directions were measured. */
  --accent:           #ff7a2b;
  --accent-hover:     #ff8f4d;
  --accent-soft:      rgba(255, 122, 43, 0.14);
  --accent-soft-2:    rgba(255, 122, 43, 0.26);
  --accent-ink:       #14080a;
  --accent-grad:      linear-gradient(180deg, #ff8942, #f26a18);

  /* Semantic */
  --ok:               #3ecf8e;
  --ok-soft:          rgba(62, 207, 142, 0.14);
  --warn:             #f5b740;
  --warn-soft:        rgba(245, 183, 64, 0.14);
  --error:            #fb5d63;
  --error-soft:       rgba(251, 93, 99, 0.14);
  --info:             #5fa8fb;
  --info-soft:        rgba(95, 168, 251, 0.14);

  /* Terminal (log panes) */
  --terminal-bg:      #05080c;
  --terminal-border:  #161c28;
  --terminal-text:    #c8d4e0;

  /* Radius scale */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* Shadow scale — diffuse, low-contrast */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .22);
  --gold:             #f5c04a;
  --gold-soft:        rgba(245, 192, 74, 0.10);
  --gold-line:        rgba(245, 192, 74, 0.38);
  /* Player loadout figure. */
  --lo-off:   #2b313d;
  --lo-on-1:  #ff9a52;
  --lo-on-2:  #e2600f;
  --lo-gear:  #a8430d;
  --lo-gun:   #464b55;
  --lo-dark:  #1c2028;
  --lo-line:  rgba(0, 0, 0, .38);
  --lo-metal: #c9ced6;
  --lo-grid:  rgba(255, 255, 255, .035);
  --shadow:    0 6px 20px rgba(0, 0, 0, .30);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .46);

  /* Layout */
  --sidebar-w: 252px;
  --topbar-h: 58px;

  /* Two-layer focus ring — crisp on any surface (bg gap + accent) */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

html[data-theme="light"] {
  color-scheme: light;

  --bg:               #f4f6fa;
  --bg-soft:          #eef1f6;          /* recessed wells stay visible on white cards */
  --surface:          #ffffff;
  --surface-2:        #f1f3f8;
  --surface-hover:    #e9edf4;
  --panel:            #ffffff;
  --panel-alt:        #f1f3f8;

  --border:           #dfe4ec;
  --border-strong:    #c4ccda;
  --border-subtle:    #e9edf3;

  --text:             #181d28;
  --text-secondary:   #46516a;
  --text-tertiary:    #64708a;
  --text-faint:       #8a94ab;
  --text-dim:         #64708a;

  --accent:           #c2410c;
  --accent-hover:     #a5350a;
  --accent-soft:      rgba(194, 65, 12, 0.10);
  --accent-soft-2:    rgba(194, 65, 12, 0.22);
  --accent-ink:       #ffffff;
  --accent-grad:      linear-gradient(180deg, #cf4710, #b23a09);

  --ok:               #12a165;
  --ok-soft:          rgba(18, 161, 101, 0.12);
  --warn:             #854d0e;
  --warn-soft:        rgba(133, 77, 14, 0.12);
  --error:            #d8453f;
  --error-soft:       rgba(216, 69, 63, 0.10);
  --info:             #2f6fe0;
  --info-soft:        rgba(47, 111, 224, 0.10);

  --terminal-bg:      #0d1117;
  --terminal-border:  #d8dee8;
  --terminal-text:    #c9d4e0;

  --shadow-sm: 0 1px 2px rgba(20, 30, 50, .06);
  --gold:             #a16207;
  --gold-soft:        rgba(202, 138, 4, 0.09);
  --gold-line:        rgba(161, 98, 7, 0.35);
  --lo-off:   #d3d9e3;
  --lo-on-1:  #f59e5b;
  --lo-on-2:  #d0560e;
  --lo-gear:  #9a3a0c;
  --lo-gun:   #4b5563;
  --lo-dark:  #2f3644;
  --lo-line:  rgba(0, 0, 0, .25);
  --lo-metal: #e5e7eb;
  --lo-grid:  rgba(15, 23, 42, .05);
  --shadow:    0 6px 20px rgba(20, 30, 50, .09);
  --shadow-lg: 0 16px 40px rgba(20, 30, 50, .16);
}

/* Extra colour schemes. Each block overrides only the tokens that differ;
   the rest falls back to the dark defaults above. */
html[data-theme="midnight"] {
  color-scheme: dark;
  --bg:               #070a14;
  --bg-soft:          #0b0f1b;
  --surface:          #101626;
  --surface-2:        #151d31;
  --surface-hover:    #1b2540;
  --panel:            #101626;
  --panel-alt:        #151d31;
  --border:           #22304a;
  --border-strong:    #2f4162;
  --border-subtle:    #151d2e;
  --text:             #e8eeff;
  --text-secondary:   #b0c0dd;
  --text-tertiary:    #8296b8;
  --text-faint:       #65789a;
  --text-dim:         #8296b8;
  --accent:           #4f8cff;
  --accent-hover:     #6da0ff;
  --accent-soft:      rgba(79, 140, 255, 0.14);
  --accent-soft-2:    rgba(79, 140, 255, 0.26);
  --accent-ink:       #06101f;
  --accent-grad:      linear-gradient(180deg, #5f97ff, #3b78e6);
  --terminal-bg:      #040711;
  --terminal-border:  #16243f;
  --terminal-text:    #c8d8f0;
}

html[data-theme="forest"] {
  color-scheme: dark;
  --bg:               #0a120d;
  --bg-soft:          #0e1711;
  --surface:          #121d16;
  --surface-2:        #17251c;
  --surface-hover:    #1e2f23;
  --panel:            #121d16;
  --panel-alt:        #17251c;
  --border:           #24382a;
  --border-strong:    #324b39;
  --border-subtle:    #17251c;
  --text:             #e9f5ec;
  --text-secondary:   #b5ceba;
  --text-tertiary:    #86a58d;
  --text-faint:       #6b8a72;
  --text-dim:         #86a58d;
  --accent:           #4fbf7a;
  --accent-hover:     #67d492;
  --accent-soft:      rgba(79, 191, 122, 0.14);
  --accent-soft-2:    rgba(79, 191, 122, 0.26);
  --accent-ink:       #06130a;
  --accent-grad:      linear-gradient(180deg, #5fd08a, #3a9e61);
  --terminal-bg:      #050c08;
  --terminal-border:  #1b2e22;
  --terminal-text:    #c8e6d2;
}

html[data-theme="sand"] {
  color-scheme: light;
  --bg:               #f6f1e8;
  --bg-soft:          #efe7da;
  --surface:          #fffdf9;
  --surface-2:        #f4ede2;
  --surface-hover:    #ece3d5;
  --panel:            #fffdf9;
  --panel-alt:        #f4ede2;
  --border:           #e2d6c4;
  --border-strong:    #cbbba3;
  --border-subtle:    #eee6da;
  --text:             #2a2118;
  --text-secondary:   #5a4b3a;
  --text-tertiary:    #7d6c58;
  --text-faint:       #9a8872;
  --text-dim:         #7d6c58;
  --accent:           #b45309;
  --accent-hover:     #92400e;
  --accent-soft:      rgba(180, 83, 9, 0.10);
  --accent-soft-2:    rgba(180, 83, 9, 0.22);
  --accent-ink:       #ffffff;
  --accent-grad:      linear-gradient(180deg, #c2600f, #9a4708);
  --terminal-bg:      #231b12;
  --terminal-border:  #d8c9b4;
  --terminal-text:    #f0e6d8;
  --shadow-sm:        0 1px 2px rgba(60, 40, 20, .08);
  --shadow:           0 6px 20px rgba(60, 40, 20, .10);
  --shadow-lg:        0 16px 40px rgba(60, 40, 20, .18);
}

/* ============================================================
   2. RESET + BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; cursor: pointer; }
a:hover { color: var(--accent-hover); }

h1, h2, h3, h4, h5 { margin: 0 0 8px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
h2 { font-size: 16px; letter-spacing: -0.005em; }
h3 { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
h4 { font-size: 13px; color: var(--text-secondary); }

p { margin: 0 0 8px; }
small { color: var(--text-tertiary); font-size: 12px; }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px; }
hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }

::selection { background: var(--accent-soft-2); color: var(--text); }
::placeholder { color: var(--text-faint); opacity: 1; }

/* Scrollbars — WebKit + Firefox */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: 6px;
  border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: padding-box; }

/* Uniform focus ring for every interactive element */
:where(a, button, [tabindex], select, input, textarea, .tree-node, .cmdp-row):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ============================================================
   3. FORM CONTROLS
   ============================================================ */

button, .btn-link {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s, transform .08s;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
button:not(:disabled):hover, .btn-link:hover { background: var(--surface-hover); border-color: var(--border-strong); }
button:not(:disabled):active { transform: translateY(1px); }
button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

button.primary {
  background: var(--accent-grad); border-color: var(--accent); color: var(--accent-ink); font-weight: 600;
  box-shadow: var(--shadow-sm);
}
button.primary:not(:disabled):hover { background: var(--accent-hover); border-color: var(--accent-hover); }

button.secondary {
  background: transparent; border-color: var(--border); color: var(--text-secondary);
}
button.secondary:not(:disabled):hover { border-color: var(--border-strong); color: var(--text); background: var(--surface-hover); }

button.danger {
  background: var(--error-soft); border-color: transparent; color: var(--error);
}
button.danger:not(:disabled):hover { background: var(--error); color: #fff; border-color: var(--error); }

button:disabled { opacity: .45; cursor: not-allowed; }

/* Async button state — JS toggles .loading while the request is in flight. */
button.loading { pointer-events: none; color: transparent !important; position: relative; }
button.loading::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--accent-soft-2); border-top-color: var(--accent);
  animation: spin .6s linear infinite;
}
button.primary.loading::after { border-color: rgba(255,255,255,.35); border-top-color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }

input[type=text], input[type=number], input[type=password], input[type=search],
input:not([type]), select, textarea {
  background: var(--bg-soft);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 13px;
  width: 100%;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) { border-color: var(--border-strong); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft-2);
}
textarea { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; min-height: 320px; line-height: 1.5; }

/* Custom chevron so <select> matches the token-driven inputs. */
select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a94ab' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-inline-end: 30px;
}

input[type=checkbox], input[type=radio] {
  width: auto; accent-color: var(--accent); margin-inline-end: 4px;
}

/* Toggle switch — add class "switch" to an <input type=checkbox>. */
input[type=checkbox].switch {
  appearance: none; -webkit-appearance: none;
  position: relative; flex: none; margin: 0;
  width: 40px; height: 22px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  cursor: pointer; vertical-align: middle;
  transition: background .15s, border-color .15s;
}
input[type=checkbox].switch::after {
  content: ''; position: absolute; top: 50%; inset-inline-start: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-tertiary);
  transform: translateY(-50%);
  transition: transform .18s cubic-bezier(.2, 0, 0, 1.4), background .15s;
}
input[type=checkbox].switch:checked {
  background: var(--accent); border-color: var(--accent);
}
input[type=checkbox].switch:checked::after {
  background: #fff; transform: translateY(-50%) translateX(18px);
}
input[type=checkbox].switch:disabled { opacity: .5; cursor: not-allowed; }
input[type=checkbox].switch:focus-visible { outline: none; box-shadow: var(--focus-ring); }

label:has(> input.switch) {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 8px 0; cursor: pointer;
  text-transform: none; letter-spacing: 0;
  font-size: 13px; font-weight: 500; color: var(--text-secondary);
}

label {
  display: block; margin: 14px 0 6px;
  color: var(--text-tertiary);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
}
/* A label wrapping a checkbox or radio is that control's caption, not a field
   heading — no small caps. :where() keeps it as weak as `label`, so labels
   with their own class keep their look. */
label:where(:has(> input[type=checkbox]), :has(> input[type=radio])) {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 8px 0; cursor: pointer;
  text-transform: none; letter-spacing: 0;
  font-size: 13px; font-weight: 500; color: var(--text-secondary);
}
.hint { color: var(--text-tertiary); font-size: 12px; display: block; margin-top: 4px; line-height: 1.5; }

.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* ============================================================
   4. APP SHELL — sidebar + main column
   ============================================================ */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}

.sidebar {
  background: var(--bg-soft);
  border-inline-end: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: sticky; top: 0;
  height: 100vh; height: 100dvh;
  overflow-y: auto;
  padding: 18px 12px 12px;
  z-index: 30;
}

.sidebar-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 6px 18px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
}
.sidebar-brand .logo {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, #ff8f4d, #ef6a15);
  color: #14080a;
  display: grid; place-items: center;
  font-weight: 800; border-radius: var(--radius-sm);
  letter-spacing: -1px; font-size: 15px;
  box-shadow: 0 0 0 1px var(--accent-soft-2), 0 6px 18px var(--accent-soft);
}
.sidebar-brand .title { font-weight: 700; font-size: 14px; line-height: 1.2; }
.sidebar-brand .subtitle { color: var(--text-tertiary); font-size: 11px; line-height: 1.2; margin-top: 2px; }

.nav { display: flex; flex-direction: column; flex: 1; gap: 8px; }
.nav-group { display: flex; flex-direction: column; gap: 1px; }
.nav-group-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-faint);
  padding: 8px 10px 4px;
}
.nav a {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  font-size: 13px;
  white-space: nowrap;
  font-weight: 500;
  transition: background .12s, color .12s;
}
.nav a:hover { background: var(--surface-hover); color: var(--text); }
.nav a:active { background: var(--accent-soft-2); }
.nav a.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
/* Accent rail on the active item — subtle "you are here" marker. */
.nav a.active::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 6px; bottom: 6px;
  width: 3px; border-radius: 999px; background: var(--accent);
}
.nav a:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.nav .nav-icon {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px;
  opacity: 0.75; flex: none;
  color: inherit;
}
.nav .nav-icon svg { width: 16px; height: 16px; display: block; }
.nav a.active .nav-icon { opacity: 1; }

.sidebar-foot {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 8px 4px;
  margin-top: 12px;
  border-top: 1px solid var(--border-subtle);
  font-size: 11px;
  color: var(--text-tertiary);
}
.donate-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-tertiary);
  font-size: 12px;
  padding: 4px 6px; border-radius: var(--radius-sm);
}
.donate-link:hover { color: var(--accent); background: var(--surface-hover); }
.copyright { padding: 6px 6px 0; font-size: 11px; color: var(--text-faint); }

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

/* ============================================================
   5. TOPBAR — translucent glass, elevation on scroll
   ============================================================ */

.topbar {
  display: flex; align-items: center; gap: 10px;
  height: var(--topbar-h);
  padding: 0 24px;
  background: color-mix(in srgb, var(--bg-soft) 82%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
  transition: box-shadow .15s;
}
.topbar.scrolled { box-shadow: var(--shadow-sm); }
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .topbar { background: var(--bg-soft); }
}
/* A spacer that pushes what follows to the end of a flex row. */
.grow { flex: 1 1 auto; }
.topbar .grow { flex: 1; min-width: 0; }
.nav-toggle {
  display: none;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  width: 36px; height: 36px; font-size: 18px; cursor: pointer;
  padding: 0;
  align-items: center; justify-content: center;
}
.kbd-hint {
  display: inline-flex; gap: 6px; align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 10px; cursor: pointer; color: var(--text-tertiary);
  font-size: 12px;
  transition: color .12s, border-color .12s;
}
.kbd-hint:hover { color: var(--text); border-color: var(--accent); }
.kbd-hint-label { color: inherit; }
.kbd {
  font: 600 10.5px ui-monospace, "Cascadia Mono", Consolas, monospace;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: var(--radius-xs); padding: 0 5px; line-height: 16px;
  color: var(--text-secondary);
}
.icon-btn {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  width: 36px; height: 36px; padding: 0;
  cursor: pointer; font-size: 14px;
  display: inline-grid; place-items: center;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Theme picker under the topbar button */
.theme-menu {
  position: fixed; z-index: 1000; min-width: 180px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 2px;
}
.theme-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 10px; background: transparent; border: 0; border-radius: 6px;
  color: var(--text); text-align: left; font: inherit; cursor: pointer;
}
.theme-menu-item:hover { background: var(--surface-hover); }
.theme-menu-item.active { color: var(--accent); background: var(--accent-soft); }
.theme-menu-check { width: 14px; text-align: center; }
.topbar-sel {
  width: auto; min-width: 64px; padding: 6px 26px 6px 10px;
  background-color: var(--surface); height: 36px;
}

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: 12px; font-weight: 500;
  height: 32px;
  max-width: 40vw;
}
.chip > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--text-tertiary); flex: none;
}
.chip.running .dot { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); animation: pulse 2s infinite; }
.chip.stopped .dot { background: var(--text-tertiary); }
.chip.error .dot   { background: var(--error); box-shadow: 0 0 0 3px var(--error-soft); }
.chip.offline      { border-style: dashed; color: var(--text-tertiary); }
.chip.offline .dot { background: var(--warn); }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--ok-soft); }
  50%      { box-shadow: 0 0 0 6px var(--ok-soft); }
}

/* ============================================================
   6. PAGE LAYOUT — main, page-header, cards
   ============================================================ */

main {
  padding: 24px;
  max-width: 1500px;
  margin: 0 auto;
  width: 100%;
  flex: 1;
  animation: fadein .18s ease-out;
}
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.support-footer {
  max-width: 1500px; width: 100%; margin: 0 auto;
  padding: 0 24px 24px;
}
.support-footer:empty { display: none; }
.support-footer .donate-card { margin-top: 0; }

.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.page-header h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.page-header .page-sub { color: var(--text-secondary); font-size: 13px; margin-top: 4px; }
.page-header .page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
}
.card h2 { margin: 0 0 14px; font-size: 16px; font-weight: 600; letter-spacing: -0.005em; text-transform: none; color: var(--text); }
.card h3 {
  margin: 0 0 12px; color: var(--text-tertiary);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
}
.card > p:first-of-type.hint { margin-top: -4px; margin-bottom: 14px; }
/* …but when that first hint actually follows the button row (e.g. the Validator's
   auto-fix note), the negative pull-up crammed it against the buttons. Give it
   real breathing room instead. */
.card > .actions + p.hint { margin-top: 12px; margin-bottom: 0; }
/* Validator result summary — severity counts above the issue table. */
.validator-summary { display: flex; gap: 8px; margin: 14px 0 10px; flex-wrap: wrap; }
.validator-ok { color: var(--ok, #22c55e); font-weight: 600; margin-top: 14px; }
/* Secondary "well" tier — flat inset card for nested/secondary content. */
.card.flat { background: var(--surface-2); box-shadow: none; }

.grid-2, .grid-3, .grid-4 { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 640px)  { .grid-4 { grid-template-columns: 1fr; } }

.kv { display: grid; grid-template-columns: minmax(72px, max-content) minmax(0, 1fr); gap: 8px 16px; font-size: 13px; align-items: center; }
.kv .k { color: var(--text-tertiary); font-size: 12px; }
/* Short values: never split a CJK word ("いいえ") across lines. */
.kv > div { word-break: keep-all; }
.fps-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.fps-val.ok { color: var(--ok); }
.fps-val.warn { color: var(--warn); }
.fps-val.bad { color: var(--error); }
.fps-none { border-bottom: 1px dotted var(--text-tertiary); cursor: help; }
.cfg-group-hint { margin: -4px 0 10px; }

.actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

/* Empty state — icon + message + optional CTA, used by list/table views. */
.empty-state {
  text-align: center;
  padding: 40px 24px;
  color: var(--text-tertiary);
}
.empty-state .es-icon { font-size: 30px; opacity: .5; margin-bottom: 10px; }
.empty-state .es-icon svg { width: 34px; height: 34px; }
.empty-state .es-title { font-size: 14px; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }
.empty-state .es-hint { font-size: 12.5px; line-height: 1.55; max-width: 420px; margin: 0 auto; }
.empty-state .actions { justify-content: center; }

/* Skeleton shimmer — structure placeholder while a view awaits its API. */
.skeleton {
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-hover) 45%, var(--surface-2) 65%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  min-height: 14px;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ============================================================
   7. METRICS / DASHBOARD
   ============================================================ */

.spark { display: block; width: 100%; height: 44px; margin-top: 8px; }
.spark path { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; }
.spark .spark-area { fill: var(--accent-soft); stroke: none; }
.metric-num {
  font-variant-numeric: tabular-nums;
  font-size: 26px; font-weight: 700;
  color: var(--text); letter-spacing: -0.01em; line-height: 1.1;
}
.metric-sub {
  color: var(--text-tertiary);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 600; margin-top: 4px;
}

/* ============================================================
   8. TABLES
   ============================================================ */

/* Horizontal scroll wrapper emitted by the JS table helper — keeps <table>
   semantics intact (never display:block on the table itself). */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table {
  width: 100%; border-collapse: collapse; font-size: 13px;
  background: transparent;
}
thead th {
  text-align: start; padding: 10px 12px;
  color: var(--text-tertiary);
  font-weight: 700; font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  border-bottom: none;
  box-shadow: 0 1px 0 var(--border);       /* travels with sticky cells */
  position: sticky; top: var(--topbar-h); background: var(--surface); z-index: 1;
}
.table-scroll thead th, .modal-card thead th { top: 0; }
tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface-hover); }
td.num, th.num { text-align: end; font-variant-numeric: tabular-nums; }
table.is-empty thead { display: none; }
table.is-empty tbody tr:hover td { background: transparent; }

th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--accent); }
th[aria-sort] { color: var(--accent); }
th[aria-sort="ascending"]::after  { content: " ↑"; }
th[aria-sort="descending"]::after { content: " ↓"; }

/* Inline-editable table cells (Types, Vehicles, event spawns): plain values
   until hovered or focused — a table of full input boxes reads as a form, not
   a table. input-qualified, so they outrank the global input[type=…] rule
   (which used to win and drew every cell as a big box). */
input.inline-cell {
  width: 100%; min-width: 60px; height: 30px;
  padding: 3px 8px; font-size: 13px; font-variant-numeric: tabular-nums;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--radius-sm);
  -moz-appearance: textfield; appearance: textfield;
}
input.inline-cell::-webkit-inner-spin-button, input.inline-cell::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input.inline-cell:hover:not(:focus) { border-color: var(--border); background: var(--bg-soft); }
input.inline-cell:focus { background: var(--bg-soft); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft-2); }
td.num input.inline-cell { text-align: end; }
tbody tr.dirty td { background: var(--warn-soft); }
tbody tr.dirty td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
tbody tr.dirty:hover td { background: color-mix(in srgb, var(--warn-soft) 60%, var(--surface-hover)); }
td.mono, th.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px; }

/* ============================================================
   9. BADGES
   ============================================================ */

.badge {
  display: inline-flex; align-items: center;
  padding: 2px 9px; font-size: 11px; font-weight: 600;
  border-radius: 999px;
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.badge.ok   { background: var(--ok-soft);   color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.err  { background: var(--error-soft);color: var(--error); }
.badge.info { background: var(--info-soft); color: var(--info); }
.badge.mute { background: var(--surface-2); color: var(--text-tertiary); }

.lock-indicator {
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0.55; cursor: not-allowed; font-size: 14px;
  filter: grayscale(1);
}

/* Weather slider value badge. */
.slider-val {
  min-width: 58px; text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--accent); font-weight: 600; font-size: 12.5px;
  background: var(--accent-soft); border-radius: 999px;
  padding: 3px 8px;
}
.wrow {
  display: grid; grid-template-columns: 190px 1fr auto;
  gap: 12px; align-items: center; margin-bottom: 14px;
}
input[type=range].wslider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(to right,
    var(--accent) 0%, var(--accent) var(--val, 0%),
    var(--surface-2) var(--val, 0%), var(--surface-2) 100%);
}
input[type=range].wslider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface);
  box-shadow: var(--shadow-sm);
}
input[type=range].wslider::-moz-range-thumb {
  width: 16px; height: 16px; border: 2px solid var(--surface);
  border-radius: 50%; background: var(--accent);
}
input[type=range].wslider:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.preset-grid {
  display: grid; gap: 10px; margin: 4px 0 12px;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
}
.preset-tile {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 14px 8px; font-size: 13px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text);
  transition: border-color .12s, background .12s, color .12s, transform .08s;
}
.preset-tile:not(:disabled):hover { border-color: var(--accent); background: var(--accent-soft); }
.preset-tile:not(:disabled):active { transform: scale(.985); }
.preset-tile.active {
  border-color: var(--accent); background: var(--accent-soft);
  color: var(--accent); font-weight: 600; box-shadow: 0 0 0 3px var(--accent-soft-2);
}
.preset-tile:disabled { opacity: .5; cursor: not-allowed; }
.preset-tile .ic { display: inline-flex; color: var(--text-secondary); }
.preset-tile .ic svg { width: 26px; height: 26px; }
.preset-tile:not(:disabled):hover .ic, .preset-tile.active .ic { color: var(--accent); }
.slider-label { display: inline-flex; align-items: center; gap: 9px; color: var(--text-secondary); }
.slider-label .ic { display: inline-flex; color: var(--text-tertiary); }
.slider-label .ic svg { width: 18px; height: 18px; }

.saved-note {
  opacity: 0; transition: opacity .2s;
  color: var(--ok); font-weight: 600; font-size: 13px;
  align-self: center;
}
.saved-note.show { opacity: 1; }
/* In a page header the note floats beside the buttons instead of holding an
   invisible gap in front of them (which pushed them sideways on phones). */
.page-actions { position: relative; }
.page-actions .saved-note {
  position: absolute; top: 50%; transform: translateY(-50%);
  inset-inline-end: calc(100% + 10px); white-space: nowrap; pointer-events: none;
}
@media (max-width: 600px) {
  /* Floated past the header's edge, the hidden note widened a phone page to
     468px. In flow it takes space only while it is shown. */
  .page-actions .saved-note { position: static; transform: none; }
  .page-actions .saved-note:not(.show) { display: none; }
}

/* ============================================================
   10. MODAL
   ============================================================ */

.modal {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  z-index: 100;
  animation: fadein .15s ease-out;
  padding: 24px;
}
.modal.hidden { display: none; }
.modal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 0;
  width: min(560px, 96%);
  max-height: 88vh;
  max-height: calc(100dvh - 32px);
  overflow: auto;
  box-shadow: var(--shadow-lg);
  animation: scale-in .15s ease-out;
}
.modal-card.wide { width: min(960px, 96%); }
.modal-overlay { padding: 24px; }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.modal-header h3 {
  margin: 0; font-size: 14px; font-weight: 600;
  text-transform: none; letter-spacing: 0; color: var(--text);
}
.modal-body { padding: 22px; }
.modal-close {
  background: transparent; border: none; color: var(--text-tertiary);
  font-size: 22px; cursor: pointer; line-height: 1; padding: 0 6px;
  border-radius: var(--radius-sm);
  transition: color .12s, background .12s;
}
.modal-close:hover { color: var(--text); background: var(--surface-hover); }

@keyframes scale-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

/* ============================================================
   11. COMMAND PALETTE
   ============================================================ */

.cmdp-overlay { align-items: flex-start; padding-top: 12vh; }
.modal-card.cmdp { width: min(640px, 96%); padding: 0; max-height: 70vh; max-height: 70dvh; display: flex; flex-direction: column; }
.cmdp-input-wrap { padding: 18px 20px; border-bottom: 1px solid var(--border); }
.cmdp-input-wrap input {
  width: 100%; background: transparent; border: none; outline: none;
  color: var(--text); font-size: 16px; padding: 0; box-shadow: none;
}
.cmdp-list { overflow: auto; flex: 1; padding: 6px 0; }
.cmdp-row {
  display: flex; gap: 12px; align-items: center;
  padding: 9px 20px; cursor: pointer; user-select: none;
  font-size: 13px;
}
.cmdp-row:hover { background: var(--surface-hover); }
.cmdp-row.active { background: var(--accent-soft); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
.cmdp-row.active .cmdp-kind { color: var(--accent); }
.cmdp-kind { width: 16px; opacity: .7; font-size: 12px; color: var(--text-tertiary); }
.cmdp-kind.action { color: var(--accent); }
.cmdp-label { flex: 1; }
.cmdp-empty { padding: 22px 20px; color: var(--text-tertiary); }
.cmdp-foot {
  padding: 10px 20px; border-top: 1px solid var(--border);
  display: flex; gap: 6px; flex-wrap: wrap; font-size: 11px; color: var(--text-tertiary);
}
.cmdp-foot span { display: inline-block; }
.cmdp-foot span:nth-child(odd) {
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  padding: 0 6px; line-height: 18px; background: var(--bg-soft);
  font: 600 10.5px ui-monospace, "Cascadia Mono", Consolas, monospace;
  color: var(--text-secondary);
}

/* ============================================================
   12. PROGRESS BAR
   ============================================================ */

.top-progress {
  position: fixed; top: 0; inset-inline-start: 0; inset-inline-end: 0;
  height: 2px; background: transparent; z-index: 200;
  pointer-events: none; transition: opacity .15s;
  opacity: 0;
}
.top-progress.busy { opacity: 1; }
.top-progress.busy::after {
  content: ''; display: block; height: 100%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: top-progress-slide 1.1s linear infinite;
}
@keyframes top-progress-slide {
  0%   { transform: translateX(-50%); width: 50%; }
  100% { transform: translateX(200%); width: 50%; }
}

/* ============================================================
   13. TOASTS — stacked container, severity accents
   ============================================================ */

#toast-region {
  position: fixed; bottom: 24px; inset-inline-end: 24px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 150;
  max-width: min(360px, calc(100vw - 32px));
}
.toast {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 11px 14px;
  border-radius: var(--radius);
  opacity: 0; transform: translateY(8px);
  transition: opacity .2s, transform .2s;
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  cursor: pointer;
  word-break: break-word;
}
.toast.visible { opacity: 1; transform: translateY(0); }
.toast.error { box-shadow: inset 3px 0 0 var(--error), var(--shadow-lg); }
.toast.ok    { box-shadow: inset 3px 0 0 var(--ok),    var(--shadow-lg); }
.toast.warn  { box-shadow: inset 3px 0 0 var(--warn),  var(--shadow-lg); }

/* ============================================================
   14. TOOLBAR / PILLS / TREE / MISC
   ============================================================ */

.toolbar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-bottom: 14px; padding: 10px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.toolbar input[type="text"], .toolbar input[type="search"], .toolbar input:not([type]) { flex: 1 1 260px; width: auto; }
.toolbar .spacer, .toolbar .grow { flex: 1 1 auto; }
.toolbar label {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-tertiary); font-size: 12px;
  margin: 0; text-transform: none; letter-spacing: 0; font-weight: 500;
}

.tree {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  max-height: min(520px, 60dvh);
  overflow: auto;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12.5px;
}
.tree .node { padding: 3px 6px; cursor: pointer; border-radius: var(--radius-sm); }
.tree .node:hover { background: var(--surface-hover); }
.tree .node.dir { color: var(--accent); }
.tree .node.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.tree-node { padding: 4px 8px; cursor: pointer; border-radius: var(--radius-sm); font-size: 13px; }
.tree-node:hover { background: var(--surface-hover); }
.tree-node.active { background: var(--accent); color: var(--accent-ink); }
.tree-node.dir { color: var(--text-secondary); font-weight: 600; }

/* Files page: a grid item refuses to shrink below its content by default, so
   one long line in the editor pushed the whole card past the window. */
.files-view .grid-2 > * { min-width: 0; }
.files-editor-col .CodeMirror { max-width: 100%; }
.files-editor-col textarea { max-width: 100%; }

.pills { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 10px; }
.pill {
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  display: inline-flex; align-items: center;
}
button.pill:not(:disabled):hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.pill button { margin-inline-start: 6px; padding: 0 4px; background: transparent; border: none; color: var(--text-tertiary); }
.pill button:hover { color: var(--error); background: transparent; }

.flag {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px; font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  margin-inline-start: 8px;
}

.warning-bar {
  background: var(--warn-soft);
  border: 1px solid var(--warn);
  color: var(--warn);
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-size: 13px;
}

.log-pane {
  height: min(560px, 65dvh);
  overflow: auto;
  background: var(--terminal-bg);
  border: 1px solid var(--terminal-border);
  border-radius: var(--radius);
  padding: 12px 14px;
  font: 12px/1.5 ui-monospace, Consolas, "Cascadia Mono", monospace;
  color: var(--terminal-text);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}
.log-pane.nowrap { white-space: pre; }

.drag-handle { cursor: grab; color: var(--text-tertiary); padding: 0 8px; }
.dragging { opacity: 0.5; }

.order-list { display: flex; flex-direction: column; gap: 4px; }
.order-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: grab; user-select: none;
  font-size: 13px;
}
.order-row:hover { border-color: var(--accent); }
.order-row.dragging { opacity: 0.4; cursor: grabbing; }
.order-row .order-arrows { display: inline-flex; gap: 2px; margin-inline-start: auto; }
.order-row .order-arrows button { padding: 2px 8px; font-size: 12px; line-height: 1.2; }

.donate-card {
  background: linear-gradient(135deg, var(--accent-soft), transparent 70%);
  border: 1px solid var(--accent-soft-2);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  margin-top: 16px;
}
.donate-card h3 { margin: 0 0 6px; color: var(--accent); }
.donate-card p  { margin: 0 0 12px; color: var(--text-secondary); }
.donate-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.donate-buttons a {
  padding: 8px 14px; border-radius: var(--radius-sm); color: #fff; font-weight: 600; font-size: 13px;
  display: inline-flex; align-items: center; gap: 6px;
}
.donate-buttons a.coffee { background: #ff813f; }
.donate-buttons a.coffee:hover { background: #ff9254; }
.donate-buttons a.kofi   { background: #13c3ff; color: #04283a; }
.donate-buttons a.kofi:hover   { background: #35cfff; }
.donate-buttons a.da     { background: #ec4980; }
.donate-buttons a.da:hover     { background: #f25a8f; }

.hidden { display: none; }

/* ============================================================
   15. CODEMIRROR
   ============================================================ */

.CodeMirror {
  height: auto;
  min-height: 360px;
  max-height: 72vh;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.CodeMirror-gutters { border-inline-end: 1px solid var(--border); }
.two-col { display: grid; grid-template-columns: 280px 1fr; gap: 16px; }
.two-col .left  { border-inline-end: 1px solid var(--border); padding-inline-end: 14px; }
.two-col .CodeMirror { min-height: 56vh; max-height: 70vh; }
html[data-theme="light"] .CodeMirror { background: #fff; color: #1e1e1e; }
html[data-theme="light"] .CodeMirror.cm-s-material-darker { background: #fff; }
html[data-theme="light"] .CodeMirror .CodeMirror-gutters { background: #f5f5f7; }
/* Dark theme: the editor sits on the panel's own navy instead of the theme's
   grey #212121, which read as olive next to the cards. */
html[data-theme="dark"] .CodeMirror.cm-s-material-darker { background: var(--bg-soft); }
html[data-theme="dark"] .cm-s-material-darker .CodeMirror-gutters { background: var(--bg-soft); border-inline-end: 1px solid var(--border); }
html[data-theme="dark"] .cm-s-material-darker .CodeMirror-activeline-background { background: var(--surface-2); }

/* ============================================================
   16. ADM LOG ROWS
   ============================================================ */

.adm-list, .adm-strip { display: flex; flex-direction: column; gap: 4px; max-height: 600px; overflow-y: auto; }
.adm-strip { max-height: 260px; }
.adm-row {
  display: flex; gap: 10px; align-items: center; font-size: 12px;
  padding: 6px 10px; border-radius: var(--radius-sm);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  background: var(--bg-soft);
  border: 1px solid var(--border-subtle);
}
.adm-row:hover { background: var(--surface-hover); border-color: var(--border); }
.adm-time { color: var(--text-tertiary); min-width: 58px; }
.adm-type {
  text-transform: uppercase; font-weight: 700; font-size: 10px;
  padding: 2px 7px; border-radius: var(--radius-xs); min-width: 62px; text-align: center;
  background: var(--surface-2); color: var(--text-tertiary);
}
.adm-connect    { background: var(--ok-soft);   color: var(--ok); }
.adm-disconnect { background: var(--surface-2); color: var(--text-tertiary); }
.adm-kill       { background: var(--error-soft);color: var(--error); }
.adm-hit        { background: var(--warn-soft); color: var(--warn); }
.adm-chat       { background: var(--info-soft); color: var(--info); }
.adm-death      { background: var(--error-soft);color: var(--error); }
.adm-player     { font-weight: 600; color: var(--text); }
.adm-arrow      { color: var(--text-tertiary); }
.adm-meta       { color: var(--text-tertiary); font-style: italic; }
.adm-msg        { color: var(--text); }

/* ============================================================
   17. WIZARD / FIRST-RUN HELPERS
   ============================================================ */

.steam-list { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.steam-list.hidden { display: none; }
.steam-row {
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
  padding: 8px 12px; background: var(--bg-soft);
  border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 12.5px;
}
.missions-preview { margin-top: 12px; }
.missions-preview.hidden { display: none; }
.missions-title { color: var(--text-tertiary); font-size: 12px; margin-bottom: 6px; }
.missions-list {
  list-style: none; padding: 8px 12px; margin: 0;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm);
  max-height: 140px; overflow: auto; font-size: 12.5px;
}
.missions-list li { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.missions-list li.active { font-weight: 600; }

/* ============================================================
   18. PAGER / PICKERS
   ============================================================ */

.pager { display: flex; gap: 6px; align-items: center; padding: 10px 0 4px; flex-wrap: wrap; }
.pager .pager-num { min-width: 110px; text-align: center; color: var(--text-tertiary); font-size: 12px; }
.pager input[type="number"] { width: 70px; }

.modxml-row {
  padding: 10px 12px;
  background: var(--bg-soft); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm); margin-bottom: 6px;
}
.modxml-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; }
.modxml-meta code {
  background: var(--surface-2); border: 1px solid var(--border-subtle);
  padding: 2px 6px; border-radius: var(--radius-xs); color: var(--text-secondary);
}

.sync-pick-list { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow: auto; padding: 6px 0; }
.sync-pick-row {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 12px;
  align-items: center;
  padding: 8px 12px; border-radius: var(--radius-sm);
  background: var(--bg-soft); border: 1px solid var(--border-subtle);
  margin: 0; cursor: pointer;
  text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text);
  font-size: 13px;
}
.sync-pick-row:hover { background: var(--surface-hover); border-color: var(--border); }
.sync-pick-row input[type="checkbox"] { margin: 0; }
.sync-pick-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sync-pick-name > div:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mod-pick-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.mod-pick {
  text-align: start; padding: 12px 14px; background: var(--bg-soft);
  border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;
  color: var(--text); font-size: 13px;
  transition: border-color .12s, background .12s;
}
.mod-pick:hover { border-color: var(--accent); background: var(--accent-soft); }
@media (max-width: 700px) { .mod-pick-list { grid-template-columns: 1fr; } }

/* ============================================================
   18b. PERFORMANCE CHARTS / GAMEPLAY FORM
   ============================================================ */

.chart-range { display: flex; gap: 6px; margin-bottom: 12px; }
.chart-range button { padding: 4px 12px; font-size: 12px; }
.perf-grid { display: grid; gap: 14px; }
.chart-box { position: relative; }
.chart-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 4px;
}
.chart-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-tertiary);
}
.chart-minmax { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.chart-svg { display: block; width: 100%; height: 120px; }
.chart-grid { stroke: var(--border-subtle); stroke-width: 1; }
.chart-line { stroke: var(--accent); stroke-width: 2; fill: none; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart-area { fill: var(--accent-soft); stroke: none; }
.chart-cross { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.chart-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.chart-x {
  display: flex; justify-content: space-between;
  font-size: 10.5px; color: var(--text-faint); font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.chart-tip {
  position: absolute; top: 18px; transform: translateX(-50%);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 3px 9px;
  font-size: 11.5px; font-variant-numeric: tabular-nums;
  pointer-events: none; white-space: nowrap; box-shadow: var(--shadow-sm);
  z-index: 2;
}

/* Gameplay editor: generic recursive form. */
.gp-group {
  border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 8px; background: var(--bg-soft);
}
.gp-group > summary {
  cursor: pointer; padding: 10px 14px; font-weight: 600; font-size: 13px;
  color: var(--text-secondary); user-select: none;
}
.gp-group[open] > summary { border-bottom: 1px solid var(--border-subtle); color: var(--text); }
.gp-group > .gp-grid { padding: 4px 14px 14px; }
.gp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 16px; align-items: end; }
.gp-grid .gp-group { grid-column: 1 / -1; margin-top: 8px; }
.gp-grid input.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px; }
/* A field label carrying an ⓘ help marker, and a boolean row whose marker sits
   outside the <label> so clicking it doesn't toggle the switch. */
.gp-flabel { display: flex; align-items: center; gap: 6px; }
.gp-bool { display: flex; align-items: center; gap: 8px; }
.gp-bool > label { margin: 0; }
.gp-group > summary > .help-mark { margin-inline-start: 6px; vertical-align: middle; }

/* ============================================================
   18c. ATTACHMENTS EDITOR (cfgspawnabletypes)
   ============================================================ */

/* A slot is a container for its items, so it reads as one object: tinted
   header, quiet body, and a single column grid shared by every row. */
.attach-group {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow: hidden;
  background: var(--surface);
}
.attach-head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.attach-head-label { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.attach-eq { color: var(--text-faint); font-size: 12px; }
.attach-body { padding: 10px 12px 12px; }

.attach-slot-no {
  font: 700 11px ui-monospace, "Cascadia Mono", Consolas, monospace;
  color: var(--accent-ink); background: var(--accent);
  border-radius: var(--radius-xs); padding: 2px 7px; flex: none;
}

/* Numeric inputs are deliberately narrow and monospace: they hold a
   probability or a weight, never prose.
   Selector must be `input.attach-num`, not `.attach-num` — the global
   `input[type=text] { width: 100% }` outranks a bare class and stretched this
   field to 888px inside the slot header. */
input.attach-num {
  width: 76px; flex: none; text-align: center;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12.5px;
}
/* .grow is only defined for .topbar/.toolbar; the header needs its own. */
.attach-head .grow { flex: 1 1 auto; }

.attach-items { display: grid; gap: 4px; }
.attach-item {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 76px 62px 30px;
  gap: 8px; align-items: center;
}
/* Column captions: without them the two 1.00 fields on screen were
   indistinguishable, though one is a probability and the other a weight. */
.attach-cols {
  font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-tertiary);
  padding-bottom: 2px;
}
.attach-cols span { display: inline-flex; align-items: center; gap: 5px; }
.attach-cols .ta-r { justify-content: flex-end; }

.attach-name { position: relative; display: block; min-width: 0; }
.attach-name input {
  width: 100%;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12.5px;
}
/* A class absent from types.xml almost always means a typo — the attachment
   would silently never spawn, so it is flagged inside the field itself. */
.attach-item.unknown .attach-name input { border-color: var(--warn); padding-inline-end: 26px; }
.attach-warn {
  position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--warn); color: #fff;
  font: 700 10px/1 sans-serif; cursor: help;
}

.attach-pct {
  font: 600 12px ui-monospace, "Cascadia Mono", Consolas, monospace;
  color: var(--ok); text-align: end;
}
.attach-pct.zero { color: var(--text-faint); }
.attach-pct.slot {
  color: var(--accent); text-align: start;
  font-size: 13px;
}

/* Deleting one item must not compete with Save for attention. Quiet until
   you reach for it. */
.icon-x {
  width: 28px; height: 28px; padding: 0; flex: none;
  justify-content: center;
  background: transparent; border-color: transparent;
  color: var(--text-faint); font-size: 16px; line-height: 1;
}
.icon-x:not(:disabled):hover {
  background: var(--error-soft); border-color: transparent; color: var(--error);
}

.attach-add { margin-top: 8px; font-size: 12px; padding: 5px 11px; }

/* The drawing-based editor of one cfgspawnabletypes entry (spawnedit.js):
   the item or vehicle with a tile per slot, the group list under it. */
.se-editor { display: flex; flex-direction: column; gap: 10px; }
.se-doll-wrap { display: flex; flex-direction: column; gap: 6px; }
.se-tile .li-tile-main { padding-inline-end: 4px; }
.se-pct { align-self: center; flex: none; font: 700 11.5px ui-monospace, "Cascadia Mono", Consolas, monospace;
  padding: 2px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.se-pct.full { background: var(--ok-soft); color: var(--ok); }
.se-pct.low { background: var(--warn-soft); color: var(--warn); }
.se-veh .li-art { min-height: 240px; }
/* A car is narrow from above: its tiles get the room, so part names fit. */
.li-doll.se-veh { grid-template-columns: minmax(0, 1fr) minmax(150px, 210px) minmax(0, 1fr); }
.se-veh .li-svg { max-width: 210px; max-height: 400px; }
.se-veh-svg .li-battery.on > *, .se-veh-svg .li-plug.on > *, .se-veh-svg .li-belt.on > *, .se-veh-svg .li-radiator.on > *,
.se-veh-svg .li-spare1.on > *, .se-veh-svg .li-spare2.on > * { fill: var(--lo-on-1); stroke: var(--lo-gun); stroke-width: 2; }
.se-veh .li-left, .se-veh .li-right { justify-content: space-around; }
.se-bulk { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.se-bulk .pill { min-width: 52px; }
.se-howto { margin: 0; }
.se-one { margin: 6px 0 0; font-size: 12px; }
.attach-group.folded .attach-body { display: none; }
.attach-group.folded { margin-bottom: 6px; }
.attach-group.folded .attach-head { padding: 5px 10px; }
.attach-group.folded .attach-slot-name { cursor: pointer; }
.se-more { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.se-more .pill { font-size: 12px; }
.attach-group.folded .attach-head { border-bottom: none; }
.attach-toggle { width: 24px; height: 24px; padding: 0; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--text-secondary); cursor: pointer; border-radius: var(--radius-xs); transition: transform .15s; }
.attach-toggle:hover { background: var(--surface-hover); color: var(--text); }
.attach-group.folded .attach-toggle { transform: rotate(-90deg); }
.attach-slot-name { font-weight: 700; font-size: 13px; color: var(--text); flex: none; }
.attach-sum-mini { display: none; min-width: 0; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.attach-group.folded .attach-sum-mini { display: inline; }
.attach-name-in { position: relative; display: block; }
/* A group's parts, laid out like the loadout's rows (seGroupCard). */
.se-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.se-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto 64px 30px; gap: 10px; align-items: center;
  padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.se-row.warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); }
.se-row-name { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; padding: 2px 6px; margin: 0;
  border: none; background: none; color: var(--text); font: inherit; text-align: start; cursor: pointer; border-radius: var(--radius-xs); }
.se-row-name:not(:disabled):hover { background: var(--surface-hover); }
.se-row-name b { max-width: 100%; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.se-row-name code { max-width: 100%; font-size: 11px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.se-row-warn { font-size: 11px; font-weight: 600; color: var(--warn); }
.se-row-w { display: inline-flex; align-items: center; gap: 6px; }
.se-row-k { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }
.se-row input.attach-num { width: 66px; flex: 0 0 66px; }
.se-row .attach-pct { justify-self: end; }
.se-empty { margin: 0 0 8px; }
.se-rest-head { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 8px; }
.se-rest-head .hint { margin: 0; }
.se-dialog .attach-group { margin: 0 0 4px; }
.se-add-group { width: auto; padding: 8px 16px; }
.se-own { flex: none; }
.se-own-hint { margin: 0 0 6px; }
@media (max-width: 640px) {
  .se-row { grid-template-columns: 28px minmax(0, 1fr) 30px; }
  .se-row > .se-own { grid-column: 2; grid-row: 2; justify-self: start; }
  .se-row > .se-row-w { grid-column: 2; grid-row: 3; }
  .se-row > .attach-pct { grid-column: 3; grid-row: 3; }
  .se-row > .icon-x { grid-column: 3; grid-row: 1; }
}
.se-item-name { display: block; font-size: 11px; color: var(--text-tertiary); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.se-item-name:empty { display: none; }
.attach-item.nofit .attach-name input { border-color: var(--warn); padding-inline-end: 26px; }
.attach-item.nofit .se-item-name { color: var(--warn); }

@media (max-width: 620px) {
  .attach-item { grid-template-columns: 1fr 70px 56px 28px; gap: 6px; }
  .attach-head { flex-wrap: wrap; }
}

/* ============================================================
   18f. SUPPORT TOUCHPOINTS
   ============================================================ */

/* Topbar heart: the smallest permanent presence there is — one icon, and the
   label only when there is room for it. */
.support-btn {
  background: transparent; border-color: transparent;
  color: var(--text-tertiary);
  padding: 5px 9px; font-size: 12px;
}
.support-btn:not(:disabled):hover {
  background: var(--accent-soft); border-color: transparent; color: var(--accent);
}
.support-heart { color: var(--accent); font-size: 13px; line-height: 1; }

/* Closing strip in the guide. Lighter than the footer card on purpose: it is
   an aside after eight chapters, not another advert. */
.guide-support {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 18px; padding: 14px 16px;
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.guide-support .grow { flex: 1 1 auto; }
.guide-support-heart { color: var(--accent); font-size: 22px; line-height: 1; flex: none; }
.guide-support strong { display: block; font-size: 14px; }
.guide-support p { margin: 2px 0 0; color: var(--text-secondary); font-size: 12.5px; }
.guide-support .donate-buttons { margin: 0; }

@media (max-width: 900px) {
  .support-btn-label { display: none; }
}

/* --- list page: what each entry IS, not just how many slots it has ------ */

.kind-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.kind-chip {
  padding: 5px 11px; font-size: 12px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-secondary);
}
.kind-chip.active {
  background: var(--accent); border-color: var(--accent);
  color: var(--accent-ink); font-weight: 600;
}
.kind-count {
  font: 600 11px ui-monospace, "Cascadia Mono", Consolas, monospace;
  opacity: .7;
}
.kind-chip.active .kind-count { opacity: .85; }

.kind-badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--border-strong); color: var(--text-secondary);
}
.kind-badge.k-weapon    { color: #ff9d5c; border-color: rgba(255,157,92,.45); }
.kind-badge.k-clothing  { color: #6aa8ff; border-color: rgba(106,168,255,.45); }
.kind-badge.k-container { color: #3ecf8e; border-color: rgba(62,207,142,.45); }
.kind-badge.k-vehicle   { color: #c89bff; border-color: rgba(200,155,255,.45); }
.kind-badge.k-infected  { color: #9ccc5a; border-color: rgba(156,204,90,.45); }
.kind-badge.k-animal    { color: #d9a066; border-color: rgba(217,160,102,.45); }

.attach-table td { vertical-align: middle; }
.attach-name-cell { font-weight: 600; }
/* The types.xml category, shown quietly next to the name — it is where the
   kind badge comes from, so an admin can see why a row is labelled as it is. */
.attach-cat {
  display: block; font-size: 11px; color: var(--text-faint);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
.attach-table td.num.zero { color: var(--text-faint); }
/* Fixed layout so the table always fits its container: the fixed columns get
   explicit widths and the contents column takes whatever is left and truncates.
   The old rigid 460px contents column pushed the table past its container on
   narrower screens — that overflow scrolled the Edit button off and split the
   row-hover band in two. */
.attach-table { table-layout: fixed; width: 100%; }
.attach-table th:nth-child(1), .attach-table td:nth-child(1) { width: 24%; }
.attach-table th:nth-child(2), .attach-table td:nth-child(2) { width: 96px; }
.attach-table th:nth-child(3), .attach-table td:nth-child(3) { width: 92px; }
.attach-table th:nth-child(4), .attach-table td:nth-child(4) { width: 84px; }
.attach-table th:nth-child(6), .attach-table td:nth-child(6) { width: 112px; }
/* Truncate on an inner span, NOT the <td>: overflow:hidden on a table cell
   collapses it to its content height and vertical-centres it, so the row-hover
   band came up short and floated — leaving the contents column looking offset
   from the rest of the row. The td stays a normal full-height cell. */
.attach-sum-in { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-name-cell { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-cat { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- editor: attachments / cargo / properties as separate sections ------- */

.attach-section { margin-top: 18px; }
.attach-section:first-of-type { margin-top: 10px; }
.attach-section > h3 { margin-bottom: 6px; }
.attach-props { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.attach-prop { display: flex; align-items: center; gap: 8px; min-width: 0; }
.attach-prop.grow { flex: 1 1 240px; }
.attach-prop.grow input { flex: 1; }

/* ============================================================
   18h. PLAYER LOADOUT
   ============================================================ */

.loadout-state { font-size: 13px; padding: 10px 13px; border-radius: var(--radius-sm);
  background: var(--surface-2); border-inline-start: 3px solid var(--border-strong); margin-bottom: 12px; }
.loadout-state.ok   { border-inline-start-color: var(--ok);   color: var(--text); }
.loadout-state.warn { border-inline-start-color: var(--warn); color: var(--text); }
.loadout-state.err  { border-inline-start-color: var(--error); color: var(--text); background: var(--error-soft); }
.kind-badge.err { color: var(--error); border-color: var(--error); margin-inline-start: 6px; }
.loadout-unlinked { margin: 0 0 12px; padding-inline-start: 20px; font-size: 13px; line-height: 1.7; }
.loadout-unlinked-box { margin-top: 16px; padding: 12px 14px; border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm); }
.loadout-unlinked-box h4 { margin: 0 0 4px; font-size: 13.5px; }
.loadout-unlinked-row { align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--border); flex-wrap: wrap; }

/* ---- Player loadout: kits, the figure, slots, carry, summary ---- */
.lo-broken { align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.lo-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 12px; }
.lo-tab {
  display: flex; align-items: center; gap: 10px; min-width: 170px; padding: 8px 14px 8px 9px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  color: var(--text); text-align: start; cursor: pointer;
}
.lo-tab:hover { border-color: var(--border-strong); }
.lo-tab.on { border-color: var(--accent); background: linear-gradient(135deg, var(--accent-soft), transparent 80%), var(--surface); }
.lo-tab-ico { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px;
  background: var(--surface-2); color: var(--text-secondary); flex: none; }
.lo-tab.on .lo-tab-ico { background: var(--accent-grad); color: #fff; }
.lo-tab-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.lo-tab-txt b { font-size: 13.5px; }
.lo-tab-txt small { font-size: 11.5px; color: var(--text-secondary); }
.lo-tab-new { min-width: 0; border-style: dashed; color: var(--text-secondary); }
.lo-tabs .grow { flex: 1; }
.lo-ico { display: inline-flex; align-items: center; justify-content: center; }

.lo-editor { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.lo-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lo-main > .card { margin: 0; }
.lo-step-head { display: flex; gap: 12px; align-items: flex-start; }
.lo-step-head h3 { margin: 1px 0 2px; font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--text); }
.lo-step-head p.hint { margin: 0 0 12px; }
.lo-step-n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--accent-grad); color: #fff; font-weight: 700; font-size: 13px; }
.lo-who { display: grid; grid-template-columns: minmax(180px, 1.2fr) minmax(200px, 1fr) 150px; gap: 12px; align-items: start; }
.lo-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* A field that is a <label> must not take the global label margin: the
   columns of a row start on one line. */
label.lo-field { margin: 0; }
.lo-field .lo-flabel { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }
.lo-chars { display: flex; flex-direction: column; gap: 8px; }
.lo-chars-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 4px 10px; max-height: 210px;
  overflow: auto; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-soft); }
.lo-char { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }

/* The figure between two columns of slots, on a faint grid. */
.lo-doll {
  display: grid; grid-template-columns: minmax(0, 1fr) 220px minmax(0, 1fr); gap: 14px; padding: 16px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background-color: var(--bg-soft);
  background-image: linear-gradient(var(--lo-grid) 1px, transparent 1px), linear-gradient(90deg, var(--lo-grid) 1px, transparent 1px);
  background-size: 24px 24px;
}
.lo-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lo-slot {
  display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 10px 12px; text-align: start;
  border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface);
  color: var(--text); cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s;
}
.lo-slot:hover { border-color: var(--accent); transform: translateY(-1px); }
.lo-slot.on { border-style: solid; border-color: var(--accent-soft-2);
  background: linear-gradient(135deg, var(--accent-soft), transparent 75%), var(--surface); }
.lo-slot-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 10px; background: var(--surface-2); color: var(--text-tertiary); }
.lo-slot.on .lo-slot-ico { background: var(--accent-grad); color: #fff; box-shadow: 0 0 14px var(--accent-soft-2); }
.lo-slot-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.lo-slot-label { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); }
.lo-slot-item { font-size: 13.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lo-slot-item.unknown { color: var(--warn); }
.lo-slot-hint { font-size: 12.5px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lo-slot-rand { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--accent); }
.lo-slot-inside { font-size: 11px; color: var(--text-tertiary); }
.lo-slot-plus { flex: none; color: var(--text-tertiary); font-size: 20px; line-height: 1; }
.lo-center { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lo-figure { width: 100%; max-width: 210px; }
.lo-figure .lo-doll-svg { width: 100%; height: auto; display: block; transition: filter .3s; }
.lo-figure[class*="has-"] .lo-doll-svg { filter: drop-shadow(0 0 22px var(--accent-soft-2)); }
.lo-filled { margin-top: 8px; font-size: 12px; color: var(--text-secondary); }
.lo-other { margin: 12px 0 0; grid-column: 1 / -1; }
/* Figure parts: grey until their slot is filled. */
.lo-doll-svg .lo-shadow { fill: rgba(0, 0, 0, .32); }
.lo-doll-svg .part path, .lo-doll-svg .part rect, .lo-doll-svg .part circle { fill: var(--lo-off); transition: fill .25s; }
.lo-figure.has-body .part-body path, .lo-figure.has-legs .part-legs path { fill: url(#loBody); }
.lo-figure.has-feet .part-feet path, .lo-figure.has-gloves .part-hands circle { fill: var(--lo-gear); }
.lo-doll-svg .lay { display: none; }
.lo-figure.has-shoulder .lay-shoulder, .lo-figure.has-melee .lay-melee, .lo-figure.has-back .lay-back,
.lo-figure.has-back .lay-back-straps, .lo-figure.has-body .lay-body-detail, .lo-figure.has-vest .lay-vest,
.lo-figure.has-legs .lay-legs-detail, .lo-figure.has-hips .lay-hips, .lo-figure.has-armband .lay-armband,
.lo-figure.has-headgear .lay-headgear, .lo-figure.has-mask .lay-mask, .lo-figure.has-eyewear .lay-eyewear,
.lo-figure.has-hands .lay-inhands { display: inline; }
.lo-doll-svg .gun { stroke: var(--lo-gun); stroke-width: 7; stroke-linecap: round; fill: none; }
.lo-doll-svg .gun-tip { stroke: var(--lo-gun); stroke-width: 4; stroke-linecap: round; fill: none; }
.lo-doll-svg .axe, .lo-doll-svg .pack, .lo-doll-svg .vest, .lo-doll-svg .band, .lo-doll-svg .hat { fill: var(--lo-gear); }
.lo-doll-svg .line { stroke: var(--lo-line); stroke-width: 2; fill: none; }
.lo-doll-svg .strap { stroke: var(--lo-gear); stroke-width: 5; stroke-linecap: round; fill: none; }
.lo-doll-svg .brim { stroke: var(--lo-gear); stroke-width: 4; stroke-linecap: round; }
.lo-doll-svg .belt, .lo-doll-svg .mask, .lo-doll-svg .glasses, .lo-doll-svg .held { fill: var(--lo-dark); }
.lo-doll-svg .buckle { fill: var(--lo-metal); }

/* Rows: variants, contents, carried items. */
.lo-variants { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.lo-variant { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.lo-variant-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lo-variant-kids { margin-top: 8px; padding-inline-start: 44px; }
.lo-kids-label { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); }
.lo-kids { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.lo-pick-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 8px; background: var(--accent-soft); color: var(--accent); }
.lo-pick-name { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.lo-pick-name b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lo-pick-name code { font-size: 11.5px; color: var(--text-tertiary); background: none; padding: 0; }
.lo-mod { align-self: flex-start; margin-top: 2px; font-size: 10.5px; padding: 0 6px; border-radius: 999px; background: var(--info-soft); color: var(--info); }
.lo-unknown { font-size: 11.5px; color: var(--warn); }
.lo-mini { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
input.lo-num { width: 66px; flex: 0 0 66px; }
.lo-pct { min-width: 34px; font-size: 12px; font-weight: 700; color: var(--accent); }
select.lo-sel { width: auto; min-width: 0; max-width: 150px; font-size: 12.5px; padding-block: 6px; padding-inline: 8px 26px; background-position: right 8px center;
  text-overflow: ellipsis; }
.lo-attr, .lo-custom { display: inline-flex; align-items: center; gap: 5px; }
.lo-row { display: grid; grid-template-columns: 32px minmax(110px, 1fr) auto auto auto auto 30px; gap: 8px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.lo-row.compact { padding: 6px 8px; background: var(--bg-soft); }
.lo-add { width: 100%; padding: 9px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
  background: transparent; color: var(--text-secondary); font-weight: 600; cursor: pointer; }
.lo-add:hover, .lo-add-inside:hover { border-color: var(--accent); color: var(--accent); }
.lo-add-inside { align-self: flex-start; padding: 4px 10px; border: 1px dashed var(--border-strong); border-radius: 999px;
  background: transparent; color: var(--text-secondary); font-size: 12px; cursor: pointer; }
.lo-bundle { display: flex; flex-direction: column; gap: 6px; padding: 10px; margin-bottom: 10px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-soft); }
.lo-bundle-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lo-bundle-add { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lo-bundle-add .lo-add { width: auto; padding: 8px 16px; }
.lo-inside-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; font-size: 12px; font-weight: 600;
  border: 1px dashed var(--border-strong); border-radius: 999px; background: transparent; color: var(--text-secondary); white-space: nowrap; }
.lo-inside-btn:hover { border-color: var(--accent); color: var(--accent); }
.lo-inside-btn.on { border-style: solid; border-color: var(--accent-soft-2); background: var(--accent-soft); color: var(--accent); }
.lo-inside-btn .lo-ico { display: inline-flex; }
.lo-char-sex { margin-inline-start: auto; font-size: 12px; color: var(--text-tertiary); }
.lo-char.f .lo-char-sex { color: var(--accent); }

/* Item editor: the item drawn, a tile per attachment slot around it. */
.li-editor { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.li-loading { margin: 6px 0; }
.li-doll {
  display: grid; gap: 10px; padding: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 1.5fr) minmax(0, 1fr);
  grid-template-areas: "top top top" "left art right" "bottom bottom bottom";
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background-color: var(--bg-soft);
  background-image: linear-gradient(var(--lo-grid) 1px, transparent 1px), linear-gradient(90deg, var(--lo-grid) 1px, transparent 1px);
  background-size: 24px 24px;
}
.li-side { display: flex; gap: 8px; min-width: 0; }
.li-side:empty { display: none; }
.li-top { grid-area: top; justify-content: center; flex-wrap: wrap; }
.li-bottom { grid-area: bottom; justify-content: center; flex-wrap: wrap; }
.li-left { grid-area: left; flex-direction: column; justify-content: center; }
.li-right { grid-area: right; flex-direction: column; justify-content: center; }
.li-top .li-tile, .li-bottom .li-tile { flex: 0 1 220px; }
.li-art { grid-area: art; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 110px; padding: 6px; }
.li-pips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.li-pip { width: 12px; height: 12px; border-radius: 50%; border: 1.5px dashed var(--border-strong); transition: background .25s, border-color .25s; }
.li-pip.on { border-style: solid; border-color: var(--lo-on-1); background: var(--lo-on-2); box-shadow: 0 0 8px var(--accent-soft-2); }
.li-svg { width: 100%; max-width: 340px; height: auto; display: block; overflow: visible; }
.li-k-vest .li-svg, .li-k-pack .li-svg, .li-k-helmet .li-svg, .li-k-box .li-svg { max-width: 180px; }
.li-k-pistol .li-svg, .li-k-scope .li-svg, .li-k-torch .li-svg { max-width: 230px; }
.li-svg .li-body { fill: var(--lo-gun); }
.li-svg .li-stroke { fill: none; stroke: var(--lo-line); stroke-width: 2.5; stroke-linecap: round; }
.li-svg .li-part > *:not(.li-stroke) { fill: transparent; stroke: var(--border-strong); stroke-width: 1.5; stroke-dasharray: 4 3; transition: fill .25s, stroke .25s; }
.li-svg .li-part .li-stroke { stroke: var(--border-strong); stroke-dasharray: 4 3; }
.li-svg .li-part.on > *:not(.li-stroke) { fill: var(--lo-on-2); stroke: var(--lo-on-1); stroke-dasharray: none; }
.li-svg .li-part.on .li-stroke { stroke: var(--lo-on-1); stroke-dasharray: none; }
.li-doll:has(.li-part.on) .li-svg { filter: drop-shadow(0 0 14px var(--accent-soft-2)); }
.li-tile {
  position: relative; display: flex; align-items: stretch; min-width: 0;
  border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface);
  transition: border-color .15s, transform .15s;
}
.li-tile:hover { border-color: var(--accent); }
.li-tile.on { border-style: solid; border-color: var(--accent-soft-2);
  background: linear-gradient(135deg, var(--accent-soft), transparent 75%), var(--surface); }
.li-tile.none { opacity: .55; }
.li-tile-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; text-align: start;
  background: none; border: none; color: var(--text); cursor: pointer; border-radius: var(--radius); }
.li-tile-main:disabled { cursor: default; }
.li-tile-label { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); }
.li-tile-main > span { max-width: 100%; }
.li-tile-item { display: block; font-size: 13px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li-tile-item.empty { font-weight: 500; color: var(--text-secondary); }
.li-tile:hover .li-tile-item.empty { color: var(--accent); }
.li-tile-sub { font-size: 11px; color: var(--text-tertiary); }
.li-tile-set { align-self: center; width: 26px; height: 26px; flex: none; border-color: transparent; background: transparent; color: var(--text-tertiary); }
.li-tile-x { align-self: center; margin-inline-end: 4px; }
.li-count { margin: 0; text-align: center; font-size: 12px; }
.li-tile-key { font-size: 11px; font-weight: 600; color: var(--accent); }
.li-tile-off { font-size: 11px; font-weight: 600; color: var(--warn); white-space: normal; }
.li-tile.on.off { border-color: var(--warn); background: linear-gradient(135deg, var(--warn-soft), transparent 75%), var(--surface); }
/* A weapon's feed: loaded (a magazine or rounds in it) or not, and Load. */
.li-loaded { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius-sm);
  border: 1px dashed var(--border-strong); color: var(--text-secondary); font-size: 12.5px; }
.li-loaded.on { border-style: solid; border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); background: var(--ok-soft); color: var(--text); }
.li-loaded.on .lo-ico { color: var(--ok); }
/* "Round in the chamber" under a loaded weapon's feed. */
.li-chamber { display: flex; align-items: flex-start; gap: 12px; padding: 9px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface); cursor: pointer; }
.li-chamber .switch { margin-top: 1px; }
.li-chamber-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.li-chamber-main b { font-size: 13px; font-weight: 600; }
.li-chamber-note { margin: 0; font-size: 12px; line-height: 1.45; }
.lo-ammo { display: inline-block; margin-inline-start: 6px; padding: 0 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .02em; vertical-align: 1px; }
.lo-ammo[hidden] { display: none; }
.lo-ammo.on { background: var(--ok-soft); color: var(--ok); }
.lo-ammo.off { background: var(--warn-soft); color: var(--warn); }
.lo-slot-txt .lo-ammo { margin: 2px 0 0; align-self: flex-start; }

/* A fresh character's food, water and warmth (the tweaks mod applies them). */
.lo-stats h3 { margin-bottom: 4px; }
.lo-stats.dirty { border-color: var(--accent); }
.lo-stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.lo-stat { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--bg-soft); }
.lo-stat-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 8px; background: var(--surface-2); }
.lo-stat-food { --stat: var(--warn); }
.lo-stat-water { --stat: var(--info); }
.lo-stat-warmth { --stat: var(--error); }
.lo-stat-ico { color: var(--stat); }
.lo-stat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.lo-stat-label { font-weight: 600; font-size: 13px; }
.lo-stat-bar { display: block; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.lo-stat-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--stat); transition: width .25s; }
.lo-stat-fill.game { opacity: .4; }
.lo-stat-ctl { display: flex; gap: 6px; align-items: center; }
select.lo-stat-sel { flex: 1; min-width: 0; width: auto; }
.lo-stat-custom { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.lo-stat-custom[hidden] { display: none; }
input.lo-stat-num { width: 66px; flex: 0 0 66px; }
.lo-stats-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.lo-stat-state { font-size: 12.5px; color: var(--accent); font-weight: 600; }
@media (max-width: 900px) { .lo-stats-grid { grid-template-columns: minmax(0, 1fr); } }
.li-inside { display: flex; flex-direction: column; gap: 6px; }
.li-dialog .lo-row { margin-bottom: 8px; }

/* Summary and the hotbar strip. */
.lo-summary { position: sticky; top: calc(var(--topbar-h) + 12px); display: flex; flex-direction: column; gap: 12px; margin: 0; }
.lo-sum-head { display: flex; align-items: center; gap: 8px; color: var(--accent); }
.lo-sum-head h3 { margin: 0; font-size: 15px; color: var(--text); text-transform: none; letter-spacing: 0; }
.lo-sum-who { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--text-secondary); }
.lo-sum-sec h4 { margin: 0 0 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); }
.lo-sum-slot { display: grid; grid-template-columns: 104px 1fr; gap: 8px; padding: 3px 0; font-size: 12.5px; }
.lo-sum-k { display: inline-flex; align-items: center; gap: 5px; color: var(--text-secondary); }
.lo-sum-v { color: var(--text); font-size: 12.5px; margin: 0; }
.lo-sum-file { margin: 0; font-size: 11.5px; }
.lo-hotbar { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.lo-hk { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); color: var(--text-tertiary); }
.lo-hk.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.lo-hk.clash { border-color: var(--warn); }
.lo-hk-n { position: absolute; top: 1px; inset-inline-start: 3px; font-size: 9.5px; color: var(--text-tertiary); }
.lo-roll { font-size: 12.5px; margin-top: 8px; }
.lo-roll-line { display: flex; gap: 8px; padding: 3px 0; border-top: 1px dashed var(--border-subtle); }
.lo-roll-line:first-child { border-top: none; }

/* Advanced JSON and the save bar. */
.lo-json-card summary { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; cursor: pointer; }
.lo-json-card summary .hint { font-size: 12px; }
textarea.lo-json { width: 100%; margin-top: 10px; font-size: 12px; }
.lo-savebar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
/* Unsaved edits keep the bar in view. */
.lo-savebar.dirty { position: sticky; bottom: 10px; z-index: 5; border-color: var(--accent); box-shadow: var(--shadow); }
.lo-save-state { font-size: 13px; color: var(--text-secondary); }
.lo-savebar.dirty .lo-save-state { color: var(--accent); font-weight: 600; }

/* The item picker. */
.lo-pick input.lo-pick-search { width: 100%; font-size: 14px; padding: 10px 12px; }
.lo-pick-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.lo-chip { padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  color: var(--text); font-size: 12.5px; cursor: pointer; }
.lo-chip:hover { border-color: var(--border-strong); }
.lo-chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.lo-pick-info { padding: 8px 10px; margin-bottom: 6px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 12.5px; }
.lo-pick-list { max-height: min(52vh, 520px); overflow: auto; display: flex; flex-direction: column; }
.lo-pick-row { display: flex; align-items: center; gap: 12px; padding: 7px 6px; border-bottom: 1px solid var(--border-subtle); }
.lo-pick-row:hover { background: var(--surface-hover); }
.lo-pick-add { margin-inline-start: auto; flex: none; border: none; background: none; color: var(--accent); font-weight: 600; cursor: pointer; padding: 6px 8px; }
.lo-pick-add.done { color: var(--ok); }
.lo-pick-none { padding: 20px 6px; }
.lo-pick-manual { margin-top: 10px; font-size: 12.5px; }

@media (max-width: 1200px) {
  .lo-editor { grid-template-columns: 1fr; }
  .lo-summary { position: static; }
}
@media (max-width: 880px) {
  .lo-doll { grid-template-columns: 1fr 1fr; }
  .lo-center { grid-column: 1 / -1; order: -1; }
  .lo-figure { max-width: 150px; }
  .lo-who { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .li-doll, .li-doll.se-veh { grid-template-columns: 1fr 1fr; grid-template-areas: "art art" "top top" "left right" "bottom bottom"; padding: 10px; }
  .li-top .li-tile, .li-bottom .li-tile { flex: 1 1 160px; }
}
@media (max-width: 560px) {
  .lo-doll { grid-template-columns: 1fr; padding: 10px; }
  .lo-row { grid-template-columns: 32px minmax(0, 1fr) 30px; }
  .lo-row > :nth-child(n+3):not(.icon-x) { grid-column: 2 / 3; }
  .lo-row > .icon-x { grid-column: 3; grid-row: 1; }
  .lo-variant-kids { padding-inline-start: 0; }
  .lo-tab { min-width: 0; flex: 1 1 140px; }
}


/* History — config snapshots grouped by file. */
.hist-file { margin-bottom: 12px; }
.hist-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.hist-path { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; color: var(--text); word-break: break-all; }
.hist-versions { display: flex; flex-direction: column; gap: 2px; }
.hist-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--border-subtle); }
.hist-row:first-child { border-top: none; }
.hist-when { font-size: 13px; color: var(--text-secondary); min-width: 160px; }
.hist-size { flex: none; }
.pill-warn { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: var(--warn-soft); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); }

/* Server health tiles. */
.health-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.health-tile { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-soft); }
.health-tile.clickable { cursor: pointer; transition: border-color .12s, background .12s; }
.health-tile.clickable:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.health-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; margin-top: 4px; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 15%, transparent); }
.health-tile.ok .health-dot { color: var(--ok, #22c55e); background: var(--ok, #22c55e); }
.health-tile.warn .health-dot { color: var(--warn); background: var(--warn); }
.health-tile.error .health-dot { color: var(--error); background: var(--error); }
.health-tile.idle .health-dot { color: var(--text-tertiary); background: var(--text-tertiary); }
.health-tile-t { font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); }
.health-tile-d { font-size: 14px; color: var(--text); margin-top: 3px; }
.cleanup-rows { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.cleanup-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border-subtle); }
.cleanup-row:first-child { border-top: none; }
.cleanup-label { font-weight: 600; min-width: 140px; }
.cleanup-size { color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* Sponsors — a thank-you wall. */
.sponsors-intro { font-size: 15px; line-height: 1.6; margin: 0; }
.sponsors-wall { display: flex; flex-direction: column; gap: 12px; }
.sponsor-card { border-inline-start: 3px solid var(--accent); }
.sponsor-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sponsor-name { font-weight: 700; font-size: 16px; }
.sponsor-amount { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.sponsor-date { color: var(--text-tertiary); font-size: 12px; margin-inline-start: auto; }
.sponsor-link { display: inline-block; margin-top: 4px; font-size: 13px; }
.sponsor-msg { margin: 10px 0 0; padding: 8px 14px; border-inline-start: 2px solid var(--border-strong);
  color: var(--text); font-style: italic; background: var(--bg-soft); border-radius: 0 var(--radius) var(--radius) 0; }
.sponsor-reply { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.sponsor-reply-label { font-weight: 600; color: var(--accent); font-size: 13px; }
.sponsor-anon { margin-top: 10px; }
/* Sponsors the project gave a title to (lead testers): a gold card that
   stands apart from the orange accent of everyone else. */
.sponsor-card.sponsor-hl {
  border-inline-start-color: var(--gold);
  background: linear-gradient(135deg, var(--gold-soft), transparent 55%), var(--surface);
  box-shadow: 0 0 0 1px var(--gold-line), var(--shadow-sm, none);
}
.sponsor-hl .sponsor-name { color: var(--gold); }
.sponsor-role {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 7px;
  border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--gold); background: var(--gold-soft); border: 1px solid var(--gold-line);
}
.sponsor-role-icon { display: inline-flex; }
.sponsors-cta { margin-top: 12px; }

/* Sidebar version badge — opens the changelog. */
.app-version { display: inline-block; margin-top: 3px; padding: 1px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 600; cursor: pointer;
  color: var(--text-tertiary); background: var(--bg-soft); border: 1px solid var(--border);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.app-version:hover { color: var(--accent); border-color: var(--accent); }

/* What's-new / changelog. */
.changelog { display: flex; flex-direction: column; gap: 16px; margin: 12px 0; max-height: 60vh; overflow-y: auto; }
.changelog-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.changelog-ver { font-weight: 700; font-size: 15px; color: var(--accent); }
.changelog-date { color: var(--text-tertiary); font-size: 12px; }
.changelog-notes { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 4px; }
.changelog-notes li { line-height: 1.5; }

@media (max-width: 620px) {
}

/* ============================================================
   18g. DIAGNOSIS / DIFF / WIPE UNDO
   ============================================================ */

/* Why the server did not start. Shown only when it is down and something was
   actually recognised, so it never becomes wallpaper. */
.diag-card { border-color: var(--error); }
.diag-item {
  border-inline-start: 3px solid var(--warn);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 11px 13px; margin-top: 10px;
}
.diag-item.fatal { border-inline-start-color: var(--error); }
.diag-head { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.diag-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  background: var(--warn-soft); color: var(--warn);
}
.diag-item.fatal .diag-badge { background: var(--error-soft); color: var(--error); }
.diag-detail { margin: 0 0 8px; color: var(--text-secondary); line-height: 1.6; }
/* The raw log line, always shown: the classification is a heuristic and the
   admin has to be able to check it. */
.diag-line {
  margin: 0; padding: 7px 9px;
  background: var(--terminal-bg); color: var(--terminal-text);
  border-radius: var(--radius-xs);
  font: 11.5px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace;
  white-space: pre-wrap; word-break: break-all;
}
.diag-src {
  display: flex; align-items: center; gap: 10px; margin-top: 8px;
  font: 700 10px/1 ui-monospace, Consolas, monospace;
  letter-spacing: .08em; color: var(--text-faint);
}
.diag-src button { padding: 4px 10px; font-size: 12px; letter-spacing: 0; }

/* Backup diff */
.diff-stat { display: flex; align-items: center; gap: 12px; margin: 10px 0; font-size: 13px; }
.diff-plus  { color: var(--ok); font-weight: 700; }
.diff-minus { color: var(--error); font-weight: 700; }
.diff-view {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-soft);
  max-height: 55vh; overflow: auto;
  font: 12px/1.55 ui-monospace, "Cascadia Mono", Consolas, monospace;
}
.diff-row { display: flex; align-items: flex-start; white-space: pre; }
.diff-num {
  flex: none; width: 46px; text-align: end; padding: 0 8px 0 0;
  color: var(--text-faint); user-select: none;
}
.diff-sign { flex: none; width: 16px; text-align: center; user-select: none; }
.diff-text { flex: 1; padding-inline-end: 10px; white-space: pre-wrap; word-break: break-all; }
.diff-row.dadd { background: var(--ok-soft); }
.diff-row.dadd .diff-sign { color: var(--ok); }
.diff-row.ddel { background: var(--error-soft); }
.diff-row.ddel .diff-sign { color: var(--error); }
.diff-row.dctx { color: var(--text-secondary); }

/* Previous wipes */
.wipe-set {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; margin-top: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.wipe-set.blocked { opacity: .72; }
.wipe-blocked { margin-top: 4px; font-size: 12px; color: var(--warn); }

/* ============================================================
   18d. HOVER HELP
   ============================================================ */

.with-help { display: inline-flex; align-items: center; gap: 6px; }
.help-mark {
  display: inline-grid; place-items: center;
  width: 15px; height: 15px; flex: none;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  color: var(--text-tertiary);
  font: 700 10px/1 ui-monospace, "Cascadia Mono", Consolas, monospace;
  cursor: help; user-select: none;
  transition: color .12s, border-color .12s, background .12s;
  text-transform: none; letter-spacing: 0;
}
th > .help-mark, td > .help-mark, h3 > .help-mark { margin-inline-start: 6px; vertical-align: -2px; }
.help-mark:hover, .help-mark:focus-visible {
  color: var(--accent-ink); background: var(--accent); border-color: var(--accent);
}
.help-tip {
  position: absolute; z-index: 400;
  max-width: 340px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 10px 13px;
  font-size: 12.5px; line-height: 1.55;
  color: var(--text);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden;
  transition: opacity .12s;
  pointer-events: none;
  text-transform: none; letter-spacing: 0; font-weight: 400;
}
.help-tip.visible { opacity: 1; visibility: visible; }

/* ============================================================
   18e. BEGINNER'S GUIDE
   ============================================================ */

.guide-toc {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.guide-toc-item {
  display: flex; align-items: center; gap: 10px;
  text-align: start; width: 100%;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: border-color .12s, background .12s, transform .12s;
}
.guide-toc-item:hover { border-color: var(--accent); transform: translateY(-1px); }
/* Long chapter titles must wrap inside the tile, not run past its edge. */
.guide-toc-item > span:last-child { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.guide-toc-num {
  display: grid; place-items: center; flex: none;
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 11px; font-weight: 700;
}

.guide-chapter { scroll-margin-top: 84px; }
.guide-head { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.guide-head h2 { margin: 0; }
.guide-badge {
  display: grid; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--border);
}
.guide-badge svg { width: 21px; height: 21px; }
.guide-kicker {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-tertiary);
}
.guide-intro { color: var(--text-secondary); line-height: 1.65; margin: 10px 0 4px; }

.guide-shot { margin: 14px 0 0; }
.guide-shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.guide-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; }
.guide-step { display: flex; gap: 13px; padding: 12px 0; border-top: 1px solid var(--border); }
.guide-step-num {
  display: grid; place-items: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  font-size: 12px; font-weight: 700;
}
.guide-step-body strong { display: block; margin-bottom: 4px; font-size: 14px; }
.guide-step-body p { margin: 0; color: var(--text-secondary); line-height: 1.62; }
.guide-jump { margin-top: 9px; padding: 5px 11px; font-size: 12px; }

.guide-tips {
  margin-top: 16px; padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--warn);
  border-radius: var(--radius);
}
.guide-tips-title {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 7px;
}
.guide-tips ul { margin: 0; padding-inline-start: 18px; }
.guide-tips li { color: var(--text-secondary); line-height: 1.6; margin-bottom: 6px; }
.guide-tips li:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .guide-toc { grid-template-columns: 1fr; }
  .guide-head { gap: 11px; }
  .guide-badge { width: 36px; height: 36px; }
}

/* ============================================================
   19. SIDEBAR DRAWER (mobile) + RESPONSIVE
   ============================================================ */

.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(1px);
  z-index: 25;
  opacity: 0; transition: opacity .18s;
}
.sidebar-backdrop.visible { display: block; opacity: 1; }

@media (max-width: 1000px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; top: 0; inset-inline-start: 0;
    height: 100vh; height: 100dvh;
    width: 280px; transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: var(--shadow-lg);
    padding-inline-start: max(12px, env(safe-area-inset-left));
  }
  .sidebar.open { transform: translateX(0); }
  .nav-toggle { display: inline-flex; }
  .topbar { padding: 0 16px; }
  main { padding: 16px; }
  .support-footer { padding: 0 16px 16px; }
  .card { padding: 16px 18px; border-radius: var(--radius); }
  .page-header h1 { font-size: 19px; }

  /* Any table inside the content column scrolls horizontally instead of
     overflowing the page — structure-agnostic (Types/Events tables are
     nested in wrappers, not direct card children). */
  main table { max-width: 100%; }
  main .table-scroll table td { white-space: nowrap; }

  /* Sticky headers stick to the viewport top on mobile (topbar scrolls away
     in the drawer layout is false — keep the offset). */
}

/* Touch ergonomics — larger targets, permanent affordances. */
@media (pointer: coarse) {
  button { min-height: 40px; }
  .nav a { padding: 11px 10px; }
  .modal-close { width: 40px; height: 40px; }
  input[type=checkbox]:not(.switch) { width: 18px; height: 18px; }
  input.inline-cell { border-color: var(--border); }
  input[type=range].wslider::-webkit-slider-thumb { width: 22px; height: 22px; }
  input[type=range].wslider::-moz-range-thumb { width: 22px; height: 22px; }
}
/* iOS zooms the page when focusing fields under 16px — bump on small
   touch screens instead of blocking zoom. */
@media (max-width: 1000px) and (pointer: coarse) {
  input[type=text], input[type=number], input[type=password], input[type=search],
  input:not([type]), select, textarea, .inline-cell { font-size: 16px; }
}

@media (max-width: 700px) {
  .wrow { grid-template-columns: 1fr auto; }
  .wrow .slider-label { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; }
  .two-col .left { border-inline-end: none; padding-inline-end: 0; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
}

@media (max-width: 600px) {
  .topbar .kbd-hint .kbd { display: none; }
  .topbar .chip { font-size: 11px; padding: 4px 8px; }
  .topbar-sel { width: 60px; min-width: 0; }
  main { padding: 12px; }
  .support-footer { padding: 0 12px 12px; }
  .card { padding: 14px; }
  .toolbar { padding: 8px; }
  .toolbar input[type="text"], .toolbar input[type="search"] { flex: 1 1 100%; }
  .modal { padding: 12px; }
  .modal-overlay { padding: 12px; }
  .page-header { margin-bottom: 14px; }
  #toast-region { inset-inline-start: 16px; inset-inline-end: 16px; max-width: none; bottom: calc(16px + env(safe-area-inset-bottom)); }
  .cmdp-overlay { padding-top: 4vh; }
}

/* ============================================================
   20. MOTION + PRINT
   ============================================================ */

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

/* Player profile panel --------------------------------------------------- */
.player-link { cursor: pointer; }
.player-link:hover { color: var(--accent); text-decoration: underline; }
.profile-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.profile-badges:empty { display: none; }
.profile-id { margin-bottom: 12px; line-height: 1.7; }
.profile-stats { display: flex; flex-wrap: wrap; gap: 18px; margin: 6px 0 14px; }
.profile-stat { text-align: center; min-width: 60px; }
.ps-num { font-size: 20px; font-weight: 700; }
.profile-mod { flex-wrap: wrap; margin: 10px 0 4px; }
.profile-activity { max-height: 260px; overflow-y: auto; margin-top: 4px; }

/* Players — watch flag + admin notes ------------------------------------- */
.star-cell { width: 34px; text-align: center; padding-inline-start: 4px; padding-inline-end: 4px; }
.star-btn {
  background: none; border: none; cursor: pointer; padding: 2px 4px;
  font-size: 17px; line-height: 1; color: var(--text-tertiary);
  border-radius: 6px; transition: color .12s, background .12s;
}
.star-btn:hover { color: var(--warn); background: var(--surface-2); }
.star-btn.on { color: var(--warn); }
tr.row-watch > td { background: var(--warn-soft); }
tr.row-watch > td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.player-note {
  margin-top: 4px; font-size: 12px; color: var(--text-secondary);
  white-space: pre-wrap; border-inline-start: 2px solid var(--border); padding-inline-start: 8px;
}

/* Leaderboard ------------------------------------------------------------- */
.lb-metrics { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.lb-tab {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-secondary);
  padding: 6px 14px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 13px;
  transition: background .12s, color .12s, border-color .12s;
}
.lb-tab:hover { border-color: var(--accent); color: var(--text); }
.lb-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.lb-rank-h { width: 48px; }
.lb-rank { text-align: center; font-weight: 700; color: var(--text-tertiary); }
.lb-medal { font-size: 19px; }
.lb-score { font-weight: 700; color: var(--accent); }
.lb-active { color: var(--accent); }
tr.lb-top > td { background: var(--surface-2); }

/* Global config search --------------------------------------------------- */
.search-group { margin-top: 14px; }
.search-file {
  display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px;
  color: var(--text-secondary); padding-bottom: 4px; border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.search-file-name { font-family: var(--mono, ui-monospace, monospace); }
.search-hit {
  display: flex; gap: 10px; align-items: baseline; padding: 4px 6px; border-radius: 6px;
}
.search-hit.link { cursor: pointer; }
.search-hit.link:hover { background: var(--surface-2); }
.search-ln {
  flex: 0 0 auto; min-width: 40px; text-align: end; color: var(--text-tertiary);
  font-variant-numeric: tabular-nums; font-size: 12px;
}
.search-snip {
  white-space: pre-wrap; word-break: break-word; font-size: 12.5px;
  font-family: var(--mono, ui-monospace, monospace); color: var(--text);
}
.search-snip mark { background: var(--warn-soft); color: var(--text); border-radius: 3px; padding: 0 1px; }

/* Config profiles -------------------------------------------------------- */
.profile-row {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  padding: 12px 0; border-top: 1px solid var(--border);
}
.profile-row:first-of-type { border-top: none; }
.profile-main { min-width: 0; }
.profile-name { font-weight: 700; }
.profile-actions { display: flex; gap: 8px; flex: 0 0 auto; }

/* Loot economy dashboard ------------------------------------------------- */
.ebar-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.ebar-label {
  flex: 0 0 150px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12.5px; color: var(--text-secondary);
}
.ebar-track { flex: 1 1 auto; height: 14px; background: var(--surface-2); border-radius: 7px; overflow: hidden; }
.ebar-fill { height: 100%; background: var(--accent); border-radius: 7px; min-width: 2px; }
.ebar-val {
  flex: 0 0 auto; min-width: 64px; text-align: end; font-size: 12px;
  color: var(--text-tertiary); font-variant-numeric: tabular-nums;
}
.inline-check { display: flex; gap: 8px; align-items: center; margin-top: 8px; }

/* Live chat -------------------------------------------------------------- */
.chat-feed {
  max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px;
  border: 1px solid var(--border); border-radius: 8px; padding: 8px; background: var(--surface-2);
}
.chat-line { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.chat-time { color: var(--text-tertiary); font-variant-numeric: tabular-nums; flex: 0 0 auto; font-size: 12px; }
.chat-ch { color: var(--text-tertiary); background: var(--surface-3, var(--surface)); border: 1px solid var(--border);
  border-radius: 4px; padding: 0 5px; font-size: 11px; flex: 0 0 auto; }
.chat-player { font-weight: 700; color: var(--accent); flex: 0 0 auto; }
.chat-text { color: var(--text); word-break: break-word; }
.chat-status { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; font-size: 12px; color: var(--text-secondary); }
.chat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-tertiary); flex: 0 0 auto; }
.chat-dot.on { background: var(--ok, #34c759); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok, #34c759) 25%, transparent); }
.rcon-down { color: var(--warn); font-weight: 600; cursor: help; }

/* RCon — announcement presets -------------------------------------------- */
.preset-list { display: flex; flex-direction: column; gap: 6px; }
.preset-msg { display: flex; align-items: center; gap: 6px; }
.preset-send { flex: 1 1 auto; text-align: start; justify-content: flex-start;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Attachments — preset-reference (⚙) groups ------------------------------ */
.attach-add-row { display: flex; gap: 8px; flex-wrap: wrap; }
.attach-group.attach-preset { border-inline-start: 3px solid var(--accent); }
.attach-gear { margin: 0 4px; font-size: 15px; }
.attach-preset-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.attach-preset-row > input[type="text"]:first-child { flex: 1 1 220px; }

/* Game map + heatmap ----------------------------------------------------- */
.map-wrap {
  position: relative;
  max-width: 760px; margin: 0 auto; border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
}
.game-map { display: block; width: 100%; height: auto; background: var(--surface); touch-action: none; }
.game-map.gm-zoomed { cursor: grab; }
.game-map.gm-panning { cursor: grabbing; }
.gm-bg { fill: var(--surface-2); }
.gm-grid { stroke: var(--border); stroke-width: 0.5; vector-effect: non-scaling-stroke; }
/* Point outlines stay crisp (constant screen thickness) at any zoom. */
.ev-pt, .sp-pt, .live-pt, .gm-town { vector-effect: non-scaling-stroke; }
/* On-map zoom controls. */
.gm-zoom { position: absolute; top: 8px; inset-inline-end: 8px; display: flex; flex-direction: column; gap: 4px; }
.gm-zbtn {
  width: 30px; height: 30px; padding: 0; display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1; border: 1px solid var(--border); border-radius: 7px;
  background: color-mix(in srgb, var(--surface) 82%, transparent); color: var(--text);
  cursor: pointer; backdrop-filter: blur(3px);
}
.gm-zbtn:hover { background: var(--surface-hover); border-color: var(--accent); }
.gm-axis { fill: var(--text-tertiary); font-size: 11px; }
.gm-town { fill: var(--text-secondary); }
.gm-town-label { fill: var(--text-secondary); font-size: 9px; font-weight: 600; }
.map-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.map-legend { display: flex; gap: 14px; flex-wrap: wrap; }
.map-leg { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.map-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.map-dot-pvp { background: var(--error); }
.map-dot-env { background: var(--warn); }
.map-dot-suicide { background: var(--text-tertiary); }
.map-readout {
  font-variant-numeric: tabular-nums; color: var(--text-tertiary);
  font-size: 12px; min-width: 150px; text-align: end;
}
.map-img-ctl { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.game-map.has-img .gm-grid { stroke-opacity: 0.3; }
.game-map.gm-has-shape .gm-grid,
.game-map.gm-placeholder .gm-grid { stroke: #ffffff; stroke-opacity: 0.12; }
.gm-water { fill: #294055; }
.gm-land { fill: #54674a; }   /* lowland base */
/* Schematic rivers — a thin water-blue stroke, constant thickness at any zoom. */
.gm-river { fill: none; stroke: #3f6d8c; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0.85; }
/* Topographic schematic layers (fixed map colours, like the water/land above,
   so a map looks like a map in either UI theme). Hypsometric elevation tints
   (lowland → peak) plus contour lines give a real relief-map feel. */
.gm-hi { opacity: 0.92; }
.gm-hi1 { fill: #64744c; }   /* upland */
.gm-hi2 { fill: #8a8155; }   /* highland */
.gm-hi3 { fill: #a99a6b; }   /* peaks */
.gm-contour { fill: none; stroke: #26331f; stroke-width: 0.7; opacity: 0.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* Desert worlds: sand and rock instead of grass and forest. */
.game-map.gm-arid .gm-land { fill: #8f7d58; }
.game-map.gm-arid .gm-hi1 { fill: #a08a60; }
.game-map.gm-arid .gm-hi2 { fill: #b29a6b; }
.game-map.gm-arid .gm-hi3 { fill: #c4ad7c; }
.game-map.gm-arid .gm-contour { stroke: #4d3b22; }
.gm-shore { stroke: #1f3547; stroke-width: 1.2; opacity: 0.65; }
.gm-lake { stroke: #22384a; stroke-width: 0.8; opacity: 0.9; vector-effect: non-scaling-stroke; }
.gm-road { fill: none; stroke: #d8c79c; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0.7; }
.gm-road-major { stroke: #efdcab; stroke-width: 2.2; opacity: 0.9; }
.gm-city { fill: #f4e7c9; stroke: #6f5f3c; stroke-width: 0.5; vector-effect: non-scaling-stroke; }
.gm-city-core { fill: #c14434; }
.gm-city-label { font-size: 12px; font-weight: 800; }
.gm-mil { fill: #db6f5c; stroke: #3c1b15; stroke-width: 0.4; vector-effect: non-scaling-stroke; }   /* military */
.gm-air { fill: #86c8db; stroke: #1f434c; stroke-width: 0.4; vector-effect: non-scaling-stroke; }   /* airfield */
.gm-poi { fill: none; stroke: #ebd489; stroke-width: 1; vector-effect: non-scaling-stroke; }        /* landmark */
/* Neutral land tint for worlds with neither an uploaded image nor a schematic. */
.gm-land-soft { fill: #3a4636; }
.game-map.gm-has-shape .gm-axis { fill: #cfe0d8; }
.game-map.gm-placeholder .gm-axis { fill: #cfe0d8; }
.game-map.gm-has-shape .gm-town { fill: #f0f4ef; }
/* Labels get a dark halo (paint-order: stroke behind fill) so they stay legible
   over any terrain tint — the touch that reads as a real cartographic label. */
.game-map.gm-has-shape .gm-town-label { fill: #f4f7f0; paint-order: stroke;
  stroke: #182015; stroke-width: 2.4px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* Level-of-detail: town / landmark labels reveal only when zoomed in (JS toggles
   .gm-lod-in on the marks group once past ~1.8x); cities / airfields / military
   stay labelled at any zoom, so the overview reads clean. POI groups are
   counter-scaled in JS so markers keep a constant on-screen size at any zoom. */
.gm-tier-minor .gm-town-label { display: none; }
.game-map.gm-has-shape .gm-marks.gm-lod-in .gm-tier-minor .gm-town-label { display: inline; }
/* Upload call-to-action on placeholder maps. */
.gm-cta-title { fill: #eef3ea; font-size: 30px; font-weight: 800; opacity: 0.9; }
.gm-cta-hint { fill: #cbd6cc; font-size: 17px; opacity: 0.85; }
.heat { stroke: none; }
.heat-pvp { fill: var(--error); fill-opacity: 0.42; }
.heat-env { fill: var(--warn); fill-opacity: 0.38; }
.heat-suicide { fill: var(--text-tertiary); fill-opacity: 0.38; }
.gm-edit { cursor: crosshair; }
.ev-pt { fill: var(--accent); stroke: #fff; stroke-width: 1; cursor: grab; }
.ev-pt:hover { fill: var(--warn); }
.chip-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.live-pt { fill: var(--ok); stroke: #fff; stroke-width: 1; }
.live-pt.stale { fill: var(--text-tertiary); }
/* Last-known (RCon can't confirm online): hollow marker so it reads as unconfirmed. */
.live-pt.offline { fill: var(--surface-2); stroke: var(--warn); stroke-width: 1.5; }
.live-label { fill: var(--text); font-size: 10px; font-weight: 700; }
.live-label.stale { fill: var(--text-tertiary); font-weight: 600; }

/* Player spawn-point editor --------------------------------------------- */
.sp-pt { stroke: #fff; stroke-width: 1; }
.sp-pt-active { cursor: grab; stroke-width: 1.4; }
.sp-tabs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.sp-tab { padding: 6px 14px; }
.sp-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.sp-tab.sp-absent { opacity: .6; border-style: dashed; }
.sp-groups { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; align-items: center; }
.sp-group-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); cursor: pointer; }
.sp-group-chip.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.sp-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.sp-gname { font-family: var(--mono, ui-monospace, monospace); font-size: 12px; }
.sp-gcount { font-size: 11px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.sp-group-edit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.sp-group-edit input { flex: 0 0 220px; font-family: var(--mono, ui-monospace, monospace); }
.sp-active-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.sp-params { display: flex; flex-direction: column; gap: 8px; }
.sp-param-block { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 12px; }
.sp-param-block > summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.sp-param-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 14px; padding: 8px 0 4px; }
.sp-param { display: flex; flex-direction: column; gap: 3px; }
.sp-param label { font-size: 12px; color: var(--text-secondary); }
.sp-param input { width: 100%; }

/* Random presets library ------------------------------------------------- */
.preset-block { padding: 12px 0; border-top: 1px solid var(--border); }
.preset-block:first-of-type { border-top: none; }
.preset-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.preset-name { font-weight: 700; font-family: var(--mono, ui-monospace, monospace); }

/* Preset editor (cfgrandompresets.xml) --------------------------------- */
.preset-edit { padding: 14px 16px; }
.preset-edit-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.preset-name-inp { flex: 1 1 220px; font-family: var(--mono, ui-monospace, monospace); font-weight: 700; }
.chance-lbl { display: inline-flex; align-items: center; gap: 6px; }
.chance-inp { width: 74px; text-align: end; font-variant-numeric: tabular-nums; }
/* The global input[type=text]{width:100%} outranks .chance-inp in a flex row,
   ballooning the weight box — pin the flex-basis so the name column keeps the
   slack instead. */
.chance-lbl .chance-inp { flex: 0 0 90px; }
.preset-item-row .chance-inp { flex: 0 0 74px; }
.preset-items { display: flex; flex-direction: column; gap: 6px; }
.preset-item-head { display: flex; align-items: center; gap: 8px; padding: 0 2px 2px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); }
.preset-item-head > span:first-child { flex: 1 1 auto; }
.preset-col-wt { width: 74px; text-align: end; }
.preset-col-real { min-width: 54px; text-align: end; }
.preset-col-x { width: 30px; }
.preset-item-row { display: flex; align-items: center; gap: 8px; }
.preset-name-wrap { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; }
.preset-name-wrap .item-name-inp { flex: 1 1 auto; min-width: 0; }
.preset-item-row.unknown .item-name-inp { border-color: var(--warn); }
.preset-real { min-width: 54px; text-align: end; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.preset-add-row { margin-top: 2px; }
button.small { padding: 4px 10px; font-size: 12px; }

/* Where does it spawn ---------------------------------------------------- */
.loot-hit { padding: 10px 0; border-top: 1px solid var(--border); }
.loot-hit:first-of-type { border-top: none; }
.loot-hit-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 2px; }
.loot-name { font-weight: 700; font-family: var(--mono, ui-monospace, monospace); }
.loot-hit .chip-list { margin-top: 6px; margin-bottom: 0; }
.loot-warn { color: var(--warn); margin-top: 4px; }

/* globals.xml form ------------------------------------------------------- */
/* Globals: variables in groups, like the Gameplay page — the name, its tag
   and a default/changed chip on the left, the value with its unit on the
   right; 0/1 flags as switches. */
.gl-groups { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.gl-group[hidden], .gl-row[hidden] { display: none; }
.gl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr)); gap: 0 28px; padding: 4px 14px 10px; }
.gl-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0;
  border-bottom: 1px solid var(--border-subtle); min-width: 0; }
.gl-label { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.gl-name { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.gl-value { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.gl-value input.gl-input { width: 116px; text-align: end; font-variant-numeric: tabular-nums; padding-block: 6px; }
.gl-unit { width: 44px; font-size: 12px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gl-row.gl-flag > .switch { margin-inline-end: 52px; }
@media (max-width: 520px) {
  .gl-value input.gl-input { width: 92px; }
  .gl-row.gl-flag > .switch { margin-inline-end: 0; }
}

@media print {
  .sidebar, .topbar, .sidebar-backdrop, #toast-region, .support-footer,
  .nav-toggle, .top-progress, .actions, .toolbar { display: none !important; }
  .app { display: block; }
  :root, html[data-theme="dark"] {
    --bg: #fff; --bg-soft: #fff; --surface: #fff; --surface-2: #f2f2f2;
    --text: #000; --text-secondary: #333; --text-tertiary: #555; --border: #bbb;
  }
  .card { box-shadow: none; break-inside: avoid; }
}

/* ============================================================
   v1.0.0 — October Update
   ============================================================ */
.info-bar {
  background: var(--info-soft);
  border: 1px solid var(--info);
  color: var(--text);
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-size: 13px;
}
.chip.stopping .dot { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); animation: pulse 1s infinite; }
.restart-next { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.restart-countdown { font-variant-numeric: tabular-nums; font-weight: 600; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }

/* Mod source picker (Settings + first-run). */
.source-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 6px 0 14px; }
.source-opt {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); cursor: pointer; margin: 0;
}
.source-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.source-opt input { margin-top: 3px; flex: 0 0 auto; }
.source-opt > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.source-opt small.hint { margin: 0; }
.source-opts.compact .source-opt { padding: 9px 10px; }
.source-status { margin-top: 8px; min-height: 22px; }

/* CPU core picker. */
.core-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; margin: 4px 0 6px; }
.core-cb {
  display: flex; align-items: center; gap: 6px; margin: 0;
  padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-xs);
  background: var(--surface-2); font-variant-numeric: tabular-nums; cursor: pointer;
}
.core-cb:has(input:checked) { border-color: var(--accent); }

/* Restart timeline preview. */
.restart-timeline { margin-top: 14px; }
.tl { list-style: none; margin: 6px 0 0; padding: 0 0 0 14px; border-inline-start: 2px solid var(--border-strong); }
.tl li { position: relative; display: flex; gap: 10px; align-items: baseline; padding: 4px 0; font-size: 13px; }
.tl li::before {
  content: ""; position: absolute; inset-inline-start: -20px; top: 10px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--surface); border: 2px solid var(--text-tertiary);
}
.tl li.tl-warn::before { border-color: var(--warn); }
.tl li.tl-kick::before { border-color: var(--error); }
.tl li.tl-restart::before { border-color: var(--accent); background: var(--accent); }
.tl-at { min-width: 62px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
/* Input + trailing button on one line (the global input width:100% would
   otherwise push the button onto its own row). */
.row.path-row { flex-wrap: nowrap; gap: 8px; }
.row.path-row > input { flex: 1 1 auto; width: auto; min-width: 0; }
.row.path-row > button { flex: 0 0 auto; white-space: nowrap; }
/* Option cards are <label>s: undo the global small-caps label style. */
label.source-opt {
  text-transform: none; letter-spacing: normal;
  font-size: 13px; font-weight: 400; color: var(--text);
}
label.source-opt b { font-weight: 600; }
label.core-cb { text-transform: none; letter-spacing: normal; font-size: 12px; font-weight: 500; color: var(--text-secondary); }
/* Open-folder buttons. */
.btn-reveal { display: inline-flex; align-items: center; gap: 6px; }
.btn-reveal svg { flex: 0 0 auto; }
.btn-reveal.icon-only { padding: 6px 8px; }
.quick-folders { display: flex; flex-wrap: wrap; gap: 8px; }
/* A toolbar that carries the card title is a card header, not a filter bar:
   drop the inset frame so it does not read as an input box. */
.toolbar:has(> h2), .toolbar:has(> h3) { background: none; border: none; padding: 0; }
.toolbar > h2, .toolbar > h3 { margin: 0; flex: 1 1 auto; }
/* The hidden attribute must win over component display rules (.card, .row…). */
[hidden] { display: none !important; }
/* Event spawn editor. */
.ev-pt.sel { fill: var(--warn); stroke: var(--text); stroke-width: 2; }
.ev-pt.has-y { stroke: var(--info); }
.ev-table-wrap { max-height: 420px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ev-table { margin: 0; }
.ev-table th { position: sticky; top: 0; background: var(--surface-2); z-index: 1; }
.ev-table tr.sel td { background: var(--accent-soft); }
.ev-table tr.off-map td:first-child { color: var(--error); font-weight: 700; }
.ev-table .inline-cell { width: 100%; min-width: 80px; }
.ev-table button.icon-only { padding: 3px 9px; }
.ev-one { display: grid; grid-template-columns: repeat(4, minmax(70px, 1fr)) auto; gap: 8px; align-items: center; }
.coord-paste { min-height: 130px; font-size: 12px; }
label.inline-switch { margin: 0; }
button.pulse { box-shadow: 0 0 0 3px var(--accent-soft-2); }
@media (max-width: 720px) { .ev-one { grid-template-columns: 1fr 1fr; } .ev-one button { grid-column: 1 / -1; } }
.map-toolbar > label { margin: 0; }
.map-toolbar > select { width: auto; min-width: 220px; max-width: 360px; }
/* Types filters. */
.type-kinds { margin: 0 0 10px; }
.type-kinds .pill.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.pill-count { margin-inline-start: 6px; font-size: 11px; opacity: .75; font-variant-numeric: tabular-nums; }
.toolbar select.types-filter { width: auto; min-width: 150px; max-width: 220px; }
/* Dropdowns in filter bars size to content instead of taking a whole row. */
.toolbar > select { width: auto; min-width: 160px; max-width: 320px; }
/* Vehicles. */
.veh-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.veh-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(520px, 1.2fr); gap: 8px 24px; align-items: start; }
/* The variants table sits beside the fields only while the card is wide enough
   to show it whole; a narrower card stacks it underneath (it used to be cut off). */
.veh-card { margin: 0; container-type: inline-size; }
@container (max-width: 960px) { .veh-body { grid-template-columns: minmax(0, 1fr); } }
.veh-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.veh-head h3 { margin: 0; }
.veh-warns { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.veh-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
@media (max-width: 720px) { .veh-fields { grid-template-columns: 1fr 1fr; } }
/* Vehicle drawings (own shapes) and the spawn condition row. */
.veh-art { flex: none; width: 150px; height: 68px; margin-inline-end: 6px; }
.va-svg { width: 100%; height: 100%; display: block; }
.va-body { stroke: rgba(0, 0, 0, .35); stroke-width: 1.5; }
.va-tyre { fill: #1b1e24; stroke: #0d0f12; stroke-width: 2; }
.va-rim { fill: #9aa3ad; }
.va-glass { fill: rgba(150, 200, 235, .55); stroke: rgba(0, 0, 0, .25); stroke-width: 1; }
.va-line { stroke: rgba(0, 0, 0, .35); stroke-width: 1.5; fill: none; }
.va-dark { fill: #23272e; }
.va-tarp { fill: #5b6448; stroke: rgba(0, 0, 0, .35); stroke-width: 1.5; }
.va-frame { stroke: #2b2f36; stroke-width: 5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.va-water { stroke: #4e8fd1; stroke-width: 3; fill: none; opacity: .7; }
.veh-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-inline-end: 7px; vertical-align: -1px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), 0 0 0 1px var(--border); }
.veh-cond { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; margin-top: 4px; padding: 10px 12px;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); }
.veh-cond-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.veh-cond-k { display: inline-flex; align-items: center; gap: 6px; min-width: 150px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.veh-fluid { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
select.veh-fluid-sel { width: auto; min-width: 210px; }
input.veh-fluid-num { width: 70px; flex: 0 0 70px; }
.veh-fluid-custom { display: inline-flex; align-items: center; gap: 5px; }
.veh-fluid-custom[hidden] { display: none; }
@media (max-width: 600px) { .veh-art { width: 96px; height: 44px; } }
.veh-kids-wrap { margin-top: 14px; }
.veh-kids { margin: 0; }
.veh-kids th { white-space: normal; }
.veh-kids th, .veh-kids td { padding-inline: 6px; }
/* Long class names break only after an underscore (a <wbr> the page inserts),
   never in the middle of a word. */
.veh-kids td:first-child { overflow-wrap: normal; }
.veh-kids .inline-cell { width: 58px; min-width: 52px; }
.veh-parts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.veh-parts .hint { margin: 0; }
.veh-mods { border-color: var(--accent-soft-2); }
.veh-mod-group + .veh-mod-group { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.veh-mod-list { margin: 6px 0 0; padding-inline-start: 18px; display: grid; gap: 4px; }
.veh-mod-list .badge { margin-inline-start: 8px; }
.veh-mod-group .sub-title { text-transform: none; letter-spacing: 0; }
tr.row-active td { background: var(--ok-soft); }
/* Native file pickers styled like the rest of the buttons. */
input[type=file] { color: var(--text-secondary); font-size: 13px; max-width: 100%; }
input[type=file]::file-selector-button {
  margin-inline-end: 10px; padding: 7px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text);
  font: inherit; font-weight: 600; cursor: pointer;
}
input[type=file]::file-selector-button:hover { border-color: var(--accent); }

/* Day / night planner. */
.dn-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
@media (max-width: 1100px) { .dn-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .dn-stats { grid-template-columns: 1fr 1fr; } }
.dn-stat.restart { border-inline-start: 3px solid var(--error); }
/* Gameplay → lightingConfig: the same night four ways (gpNightPicker). */
.gp-night { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.gp-night-opt { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 6px 6px 8px; margin: 0;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); text-align: start; cursor: pointer; }
.gp-night-opt:not(:disabled):hover { border-color: var(--border-strong); }
.gp-night-opt.on { border-color: var(--accent); background: linear-gradient(135deg, var(--accent-soft), transparent 80%), var(--surface); }
.gp-night-art { display: block; border-radius: 8px; overflow: hidden; margin-bottom: 4px; }
.gp-night-art svg { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.gp-night-opt b { font-size: 13px; padding: 0 2px; }
.gp-night-opt small { font-size: 11.5px; color: var(--text-secondary); padding: 0 2px; }
/* Buttons do not wrap by default: a long caption (Russian, German) must. */
.gp-night-opt b, .gp-night-opt small { white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
.gp-night-n { position: absolute; top: 10px; inset-inline-end: 10px; padding: 0 6px; border-radius: 999px; font-size: 11px;
  background: rgba(0, 0, 0, .55); color: #fff; }
.gp-night-opt.on .gp-night-n { background: var(--accent); }
.gp2-field .gp-night { margin-top: 2px; }
.gp-hit, .gp2-field .gp-night:has(.gp-night-opt:nth-child(2):last-child) { grid-template-columns: repeat(auto-fill, minmax(170px, 230px)); }
/* Globals → the main numbers as pictures with sliders (visuals.js). */
.gl-vis { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.gl-vis-tile { display: flex; flex-direction: column; gap: 8px; padding: 8px 8px 10px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--bg-soft); min-width: 0; }
.gl-vis-art svg { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 8px; }
.gl-vis-say { margin: 0; padding: 0 2px; font-size: 13px; font-weight: 650; color: var(--text); }
.gl-vis-sl { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0 2px; text-transform: none; letter-spacing: 0;
  font-size: 11.5px; font-weight: 500; color: var(--text-secondary); }
.gl-vis-sl input { width: 100%; }
.gl-vis-card .hint { margin: 2px 0 12px; }
@media (max-width: 900px) { .gp-night { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* The Server page's time-of-day group (timeSummary). */
.tsum { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px; align-items: stretch; }
.tsum-sky { position: relative; min-height: 112px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.tsum-clock { position: absolute; bottom: 8px; inset-inline-start: 10px; color: #fff; font-size: 22px; font-weight: 800;
  font-variant-numeric: tabular-nums; text-shadow: 0 1px 6px rgba(0, 0, 0, .55); }
.tsum-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tsum-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tsum-stat { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg-soft); min-width: 0; }
.tsum-ico { flex: none; display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 8px; background: var(--surface-2); }
.tsum-stat.day .tsum-ico { color: #e8a33d; }
.tsum-stat.night .tsum-ico { color: var(--info); }
.tsum-stat.start .tsum-ico { color: var(--accent); }
.tsum-k { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-tertiary); }
.tsum-k b { color: var(--accent); letter-spacing: 0; }
.tsum-v { font-size: 14px; font-weight: 650; color: var(--text); overflow-wrap: anywhere; }
.tsum-bar { display: flex; height: 22px; border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
.tsum-seg { display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; font-size: 11px; font-weight: 700; white-space: nowrap; }
.tsum-seg.day { background: linear-gradient(90deg, #f6c35b, #f3d98a); color: #4a3505; }
.tsum-seg.night { background: linear-gradient(90deg, #1f2a5c, #2c3a78); color: #dfe6ff; }
.tsum-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 900px) { .tsum { grid-template-columns: minmax(0, 1fr); } .tsum-stats { grid-template-columns: minmax(0, 1fr); } }
.dn-stat .v.small { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
/* The sky at the in-game time, with ▶ to play one in-game day. */
.dn-sky { position: relative; height: 210px; margin-top: 10px; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); background: #0b1026; }
.dn-sky-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dn-sky-info { position: absolute; top: 14px; inset-inline-start: 16px; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .55); }
.dn-sky-phase { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
.dn-sky-clock { font-size: 34px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.dn-sky-sub { font-size: 12px; opacity: .92; }
.dn-sky-art { position: absolute; inset: 0; }
.dn-sky-btns { position: absolute; top: 12px; inset-inline-end: 12px; display: flex; gap: 8px; }
.dn-play { width: 36px; height: 36px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .35); cursor: pointer; transition: background .15s, transform .15s; }
.dn-play:hover { background: rgba(0, 0, 0, .55); transform: scale(1.06); }
.dn-play.on { background: var(--accent); border-color: rgba(255, 255, 255, .6); }
.dn-play[hidden] { display: none; }
/* One in-game day in real time: day and night to scale, a marker now. */
.dn-realbar { margin-top: 8px; }
.dn-rb { position: relative; display: flex; height: 26px; border-radius: 7px; border: 1px solid var(--border); cursor: ew-resize; touch-action: none; user-select: none; }
.dn-rb-day { border-start-start-radius: 6px; border-end-start-radius: 6px; }
.dn-rb-night { border-start-end-radius: 6px; border-end-end-radius: 6px; }
.dn-rb-day, .dn-rb-night { display: flex; align-items: center; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 11.5px; font-weight: 600; }
.dn-rb-day { background: linear-gradient(90deg, #f6b25a, #f08a3c); color: #3b1d05; padding-inline-start: 8px; }
.dn-rb-night { background: #25305c; color: #c9d2ff; justify-content: flex-end; padding-inline-end: 8px; }
.dn-rb-now { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-inline-start: -1px; background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45); border-radius: 2px; outline: none; cursor: grab; }
.dn-rb-knob { position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .25); transition: transform .12s; }
.dn-rb:hover .dn-rb-knob, .dn-rb.drag .dn-rb-knob { transform: scale(1.18); }
.dn-rb.drag .dn-rb-now { cursor: grabbing; }
.dn-rb-now:focus-visible .dn-rb-knob { box-shadow: 0 0 0 3px var(--accent), 0 1px 4px rgba(0, 0, 0, .5); }
.dn-rb-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 5px; font-size: 11.5px; color: var(--text-secondary); }
.dn-rb-legend .grow { flex: 1; }
/* "Aim for a feel" presets. */
.dn-feel-title { margin: 14px 0 8px; font-size: 13px; }
.dn-feel { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.dn-feel-card { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 6px;
  padding: 10px 12px; text-align: start; white-space: normal; height: auto; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); }
.dn-feel-card:hover { border-color: var(--border-strong); }
.dn-feel-card.on { border-color: var(--accent); background: var(--accent-soft); }
.dn-feel-card b { font-size: 13px; }
.dn-feel-card small { font-size: 11.5px; color: var(--text-secondary); }
.dn-feel-bar { display: flex; width: 100%; height: 6px; border-radius: 3px; overflow: hidden; background: #25305c; }
.dn-feel-bar .d { background: #f2b14c; }
.dn-slide { display: flex; align-items: center; gap: 10px; }
.dn-slide input[type=range] { flex: 1; min-width: 0; accent-color: var(--accent); }
.dn-slide input[type=number] { width: 90px; flex: 0 0 90px; }
@media (max-width: 600px) { .dn-sky { height: 160px; } .dn-sky-clock { font-size: 28px; } }
.dn-stat { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; }
.dn-stat .k { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); }
.dn-stat .v { font-size: 16px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.dn-stat.day { border-inline-start: 3px solid #f2b638; }
.dn-stat.night { border-inline-start: 3px solid #5b6fd6; }
.dn-stat.sun { border-inline-start: 3px solid var(--accent); }
.dn-bar { width: 100%; }
.dn-svg { width: 100%; height: 58px; display: block; overflow: visible; }
.dn-day { fill: #f2c14e; }
.dn-night { fill: #25305c; }
html[data-theme="light"] .dn-night { fill: #3b4a8a; }
.dn-restart { stroke: var(--error); stroke-width: 3; }
.dn-axis { fill: var(--text-tertiary); font-size: 11px; }
.dn-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin-top: 6px; font-size: 12px; color: var(--text-secondary); }
.dn-legend .hint { margin: 0; }
.dn-key::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-inline-end: 6px; vertical-align: -2px; }
.dn-key.day::before { background: #f2c14e; }
.dn-key.night::before { background: #25305c; border: 1px solid var(--border-strong); }
.dn-key.restart::before { width: 3px; background: var(--error); border-radius: 0; }
.dn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; margin-top: 8px; }
@media (max-width: 900px) { .dn-grid { grid-template-columns: 1fr; } }
.dn-field input[type=number] { max-width: 160px; }
.dn-plan { margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); }
.dn-plan h4 { margin: 0 0 8px; }

/* Weather preview. */
/* Manual weather: the scene (clouds, sun, rain, snow, fog, lightning, a tree
   and grass in the wind) and what players will notice. */
.wx-preview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 16px; align-items: start; margin: 6px 0 16px; }
.wx-preview h4 { margin: 0 0 6px; }
.wx-side { padding-top: 2px; }
.wx-scene {
  --oc: 0; --fog: 0; --rain: 0; --snow: 0; --lean: 0deg; --amp: 1deg; --glean: 0deg; --gamp: 2deg; --sway: 3s; --drift: 100s; --slant: 0deg; --snowdx: 0px;
  position: relative; height: 250px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: #2f7fd8;
}
.wx-scene > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wx-scene .wx-grey { opacity: calc(var(--oc) * 1.1); transition: opacity .4s; }
.wx-scene .wx-dark { opacity: calc((var(--oc) - .72) * 2.6); transition: opacity .4s; }
.wx-scene.storm .wx-dark { opacity: calc((var(--oc) - .6) * 2.2); }
.wx-scene .wx-sun { opacity: calc(1 - var(--oc) * 1.15); transition: opacity .4s; }
.wx-scene .wx-cloud { transition: opacity .4s; animation: wx-drift var(--drift) ease-in-out infinite alternate; }
.wx-scene .wx-cloud:nth-child(2n) { animation-direction: alternate-reverse; }
.wx-scene .wx-cloud ellipse { fill: color-mix(in srgb, #59616c calc(var(--oc) * 100%), #ffffff); transition: fill .4s; }
.wx-scene.storm .wx-cloud ellipse { fill: color-mix(in srgb, #2b3038 70%, #59616c); }
@keyframes wx-drift { from { transform: translateX(-36px); } to { transform: translateX(36px); } }
.wx-scene .wx-hill { fill: #4f7a3f; transition: fill .4s; }
.wx-scene .wx-hill.far { fill: #6a8f55; opacity: .9; }
.wx-scene .wx-snowcap { fill: #f4f7fa; opacity: var(--snow); transition: opacity .4s; }
.wx-scene.snow .wx-hill { fill: color-mix(in srgb, #e9eef3 calc(var(--snow) * 100%), #4f7a3f); }
.wx-scene.snow .wx-hill.far { fill: color-mix(in srgb, #dfe6ec calc(var(--snow) * 100%), #6a8f55); }
.wx-scene .wx-trunk { fill: #5a3d26; }
.wx-scene .wx-crown circle { fill: #2f6b36; }
.wx-scene .wx-crown circle:nth-child(2n) { fill: #3a7d41; }
.wx-scene.snow .wx-crown circle { fill: color-mix(in srgb, #e8eef2 calc(var(--snow) * 45%), #2f6b36); }
.wx-scene .wx-bush ellipse { fill: #3c6e35; }
.wx-scene .wx-blade { fill: none; stroke: #3f6f2f; stroke-width: 2; stroke-linecap: round; }
/* The wind: a lean that grows with it, and a sway that quickens. */
.wx-scene .wx-tree { animation: wx-sway-trunk var(--sway) ease-in-out infinite alternate; }
.wx-scene .wx-tree.small { animation-duration: calc(var(--sway) * .8); }
.wx-scene .wx-crown { animation: wx-sway var(--sway) ease-in-out infinite alternate; }
.wx-scene .wx-bush { animation: wx-sway var(--sway) ease-in-out infinite alternate; animation-delay: -.4s; }
.wx-scene .wx-blade { animation: wx-grass calc(var(--sway) * .7) ease-in-out infinite alternate; }
@keyframes wx-sway-trunk { from { transform: rotate(calc(var(--lean) * .25 - var(--amp) * .3)); } to { transform: rotate(calc(var(--lean) * .25 + var(--amp) * .3)); } }
@keyframes wx-sway { from { transform: rotate(calc(var(--lean) * .75 - var(--amp))); } to { transform: rotate(calc(var(--lean) * .75 + var(--amp))); } }
@keyframes wx-grass { from { transform: skewX(calc(var(--glean) - var(--gamp))); } to { transform: skewX(calc(var(--glean) + var(--gamp))); } }
.wx-scene .wx-leaves { display: none; }
.wx-scene.windy .wx-leaves { display: inline; }
.wx-scene .wx-leaf { fill: #6f9a3a; animation: wx-leaf 2.6s linear infinite; }
.wx-scene .wx-leaf:nth-child(3n) { fill: #b8862f; }
@keyframes wx-leaf {
  from { transform: translate(180px, var(--ly)) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  to { transform: translate(640px, calc(var(--ly) + 50px)) rotate(720deg); opacity: .9; }
}
/* Rain, snow, fog, lightning. */
.wx-scene .wx-rain, .wx-scene .wx-snow, .wx-scene .wx-bolt, .wx-scene .wx-flash { display: none; }
.wx-scene.rain .wx-rain { display: inline; opacity: var(--rain); }
.wx-scene .wx-rain { transform: skewX(var(--slant)); transform-origin: 300px 0; }
.wx-scene .wx-drop { stroke: #dbe9ff; stroke-width: 1.6; stroke-linecap: round; opacity: .8; animation: wx-fall .6s linear infinite; }
.wx-scene .wx-drop.far { stroke-width: 1; opacity: .5; }
@keyframes wx-fall { to { transform: translateY(300px); } }
.wx-scene.snow .wx-snow { display: inline; opacity: var(--snow); }
.wx-scene .wx-flake { fill: #fff; animation: wx-snowfall 4s linear infinite; }
@keyframes wx-snowfall { to { transform: translate(var(--snowdx), 300px); } }
.wx-scene .wx-fog { fill: #dfe3e8; opacity: calc(var(--fog) * .72); transition: opacity .4s; }
.wx-scene .wx-fogband { opacity: var(--fog); transition: opacity .4s; }
.wx-scene.storm .wx-bolt { display: inline; fill: #fff6b0; opacity: 0; animation: wx-bolt 4.2s linear infinite; }
.wx-scene.storm .wx-flash { display: inline; fill: #fff; opacity: 0; animation: wx-flash 4.2s linear infinite; }
@keyframes wx-bolt { 0%, 86% { opacity: 0; } 87%, 89% { opacity: 1; } 90%, 91% { opacity: 0; } 92%, 93% { opacity: .9; } 94%, 100% { opacity: 0; } }
@keyframes wx-flash { 0%, 86% { opacity: 0; } 87% { opacity: .45; } 89% { opacity: 0; } 92% { opacity: .3; } 94%, 100% { opacity: 0; } }
.wx-scene-tags { position: absolute; inset-inline-start: 10px; bottom: 10px; display: flex; gap: 6px; }
.wx-tag { display: inline-flex; align-items: center; gap: 2px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; background: rgba(10, 16, 28, .55);
  backdrop-filter: blur(4px); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .wx-scene *, .wx-scene { animation: none !important; }
  .wx-scene .wx-tree { transform: rotate(calc(var(--lean) * .25)); }
  .wx-scene .wx-crown, .wx-scene .wx-bush { transform: rotate(calc(var(--lean) * .75)); }
  .wx-scene .wx-blade { transform: skewX(var(--glean)); }
}
@media (max-width: 760px) { .wx-preview { grid-template-columns: 1fr; } .wx-scene { height: 200px; } }
/* Long preset names (e.g. RU "Отключить (ваниль)") wrap inside the tile. */
.preset-tile { white-space: normal; text-align: center; line-height: 1.25; min-width: 0; }
#weather-trans { max-width: 480px !important; width: 100%; }
/* Validator v2. */
.validator-top .actions { margin-top: 10px; }
/* The summary opens the card — no extra gap above it. */
.validator-top .validator-summary { margin-top: 0; align-items: center; }
.validator-top .validator-summary .hint { margin-top: 0; }
.validator-top .validator-ok { margin-top: 0; }
.vgroup { padding-top: 14px; }
.vgroup-err { border-inline-start: 3px solid var(--error); }
.vgroup-warn { border-inline-start: 3px solid var(--warn); }
.vgroup-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vgroup-head h3 { margin: 0; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--text); }
.vgroup-items { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.vitem { display: grid; grid-template-columns: minmax(140px, 220px) 1fr auto; gap: 12px; align-items: center; padding: 6px 8px; border-radius: var(--radius-xs); background: var(--surface-2); font-size: 13px; }
.vitem-where { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vitem-msg { min-width: 0; overflow-wrap: anywhere; }
.vitem-acts { display: flex; gap: 6px; }
.vitem-acts .icon-only { padding: 4px 9px; }
@media (max-width: 720px) { .vitem { grid-template-columns: 1fr; } }
button.link-btn { background: none; border: none; color: var(--accent); padding: 4px 0; cursor: pointer; font-weight: 600; justify-self: start; }
.validator-report ul { margin: 0; padding-inline-start: 18px; font-size: 12px; }
.vgroup-head .grow, .veh-head .grow { flex: 1 1 auto; }

/* Map data layers. */
.gm-layers-btn svg { display: block; }
.gm-layers-panel {
  position: absolute; top: 0; inset-inline-end: 38px; width: 250px; z-index: 5;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); padding: 10px 12px;
}
.gm-layers-title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 6px; }
label.gm-layer-row {
  display: flex; align-items: center; gap: 8px; margin: 4px 0; cursor: pointer;
  text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: var(--text);
}
.gm-layer-swatch { width: 14px; height: 14px; border-radius: 3px; flex: 0 0 auto; border: 1px solid var(--border-strong); }
.sw-land { background: #d8d0b4; }
.sw-tiers { background: linear-gradient(90deg, #4caf50 0 25%, #e6c229 25% 50%, #f08a24 50% 75%, #e03a3a 75%); }
.sw-buildings { background: #3a3f4a; }
.sw-infected { background: rgba(224, 58, 58, .45); border-color: #e03a3a; }
.sw-wildlife { background: rgba(76, 175, 80, .4); border-color: #4caf50; }
.sw-toxic { background: rgba(190, 220, 40, .5); border-color: #b6c21b; }
.gm-tier-legend { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 6px 22px; }
.gm-tier-legend span { font-size: 10px; padding: 1px 6px; border-radius: 3px; color: #111; background: #9e9e9e; }
.gm-tier-legend .tier-tier1 { background: #7cc47f; }
.gm-tier-legend .tier-tier2 { background: #ecd064; }
.gm-tier-legend .tier-tier3 { background: #f3a860; }
.gm-tier-legend .tier-tier4 { background: #ea7474; }
.gm-tier-legend .tier-unique { background: #bb87dd; }
.gm-layers-hint { font-size: 11px; margin-top: 8px; }
.ov-land { opacity: 1; }
.ov-tiers { opacity: .55; }
.ov-b { stroke: none; }
.ov-b-house { fill: #2f343d; }
.ov-b-misc { fill: #5b6270; }
.ov-b-ind { fill: #3b5b86; }
.ov-b-mil { fill: #9c2f2f; }
.ov-zone circle { vector-effect: non-scaling-stroke; stroke-width: 1; }
.ov-infected circle { fill: rgba(224, 58, 58, .16); stroke: rgba(224, 58, 58, .75); }
.ov-wildlife circle { fill: rgba(76, 175, 80, .14); stroke: rgba(76, 175, 80, .7); }
.ov-toxic circle { fill: rgba(190, 220, 40, .30); stroke: #b6c21b; stroke-width: 1.5; }
/* With the real land drawn, the placeholder tint and "upload a map" prompt go. */
.game-map.gm-land-on .gm-land-soft, .game-map.gm-land-on .gm-cta { display: none; }
.game-map.gm-land-on .gm-bg { fill: #9ec3d9; }
html[data-theme="dark"] .game-map.gm-land-on .gm-bg { fill: #1d3346; }

/* Steam query state on the dashboard server card */
.browser-ok, .browser-wait { display: inline-flex; align-items: center; gap: 6px; }
.browser-bad { color: var(--text-tertiary); font-size: 12.5px; }
.dot-ok, .dot-wait { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot-ok { background: var(--ok); }
.dot-wait { background: var(--warn); animation: pulse 1s infinite; }

/* Getting-started checklist (dashboard) */
.setup-card { margin-bottom: 16px; }
.setup-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.setup-head h3 { margin: 0; }
.setup-count { color: var(--text-tertiary); font-size: 12.5px; flex: 1; }
.setup-bar { height: 4px; border-radius: 4px; background: var(--border); margin: 10px 0 6px; overflow: hidden; }
.setup-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width .3s; }
.setup-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 0 28px; }
.setup-list li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; min-width: 0; border-bottom: 1px solid var(--border-subtle); }
.setup-check { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 1.5px solid var(--border-strong, var(--border)); display: grid; place-items: center; font-size: 11px; margin-top: 1px; }
.setup-list li.done .setup-check { background: var(--ok); border-color: var(--ok); color: #fff; }
.setup-list li.done .setup-title { color: var(--text-tertiary); }
.setup-text { flex: 1; min-width: 0; }
.setup-title { font-weight: 500; }
.setup-why { color: var(--text-tertiary); font-size: 12.5px; margin-top: 2px; }
.setup-list .link-btn { flex: none; margin-top: 1px; }
@keyframes flashTarget { 0%, 60% { box-shadow: 0 0 0 3px var(--accent-soft-2); } 100% { box-shadow: 0 0 0 3px transparent; } }
.flash-target { animation: flashTarget 1.8s ease-out; border-radius: 6px; }

/* Narrow topbar: keep every control whole — only the status chip may shrink
   (the language select used to get squeezed to "R…"). */
@media (max-width: 600px) {
  .topbar { gap: 6px; padding: 0 10px; }
  .topbar > * { flex-shrink: 0; }
  .topbar .grow { flex-shrink: 1; }
  .topbar .chip { flex-shrink: 1; min-width: 0; }
  .topbar-sel { width: 58px; padding: 6px 20px 6px 8px; background-position: right 6px center; }
  .topbar .icon-btn, .topbar .nav-toggle { width: 34px; height: 34px; }
}
.kbd-hint-icon { display: none; }
@media (max-width: 420px) {
  .topbar .kbd-hint { padding: 0; width: 34px; height: 34px; justify-content: center; }
  .topbar .kbd-hint-label { display: none; }
  .topbar .kbd-hint-icon { display: block; }
}

/* Long unbroken paths in hints (C:\...\mpmissions\...\cfggameplay.json) used to
   push the page wider than a phone screen. */
.hint { overflow-wrap: anywhere; }
p { overflow-wrap: break-word; }

/* Wide editor tables scroll sideways on narrow screens only — on desktop they
   stay in the page flow so their sticky headers keep following the page. */
@media (max-width: 900px) {
  .table-scroll-narrow { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-scroll-narrow thead th { top: 0; }
}

/* History rows: the Compare / Restore buttons wrap under the date on phones. */
.hist-row { flex-wrap: wrap; }
@media (max-width: 600px) {
  .hist-when { min-width: 0; flex: 1 1 auto; }
}

/* Vehicle fields: labels are one or two lines ("MIN" vs "RESPAWN BELOW (MIN)");
   reserve two lines and sit them on the input so the inputs line up. */
.veh-field { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.veh-field > :first-child { align-self: end; }
.veh-field > :not(:first-child) { align-self: start; }
/* Native file input: never squeeze the "No file chosen" text into an ellipsis. */
input[type=file] { width: 100%; min-width: 0; }

/* Mods page: map missions still waiting inside installed mods */
.pending-missions .row + .row { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-subtle); }

/* ============================================================
   Panel login, remote access, chat archive
   ============================================================ */
body.auth-locked .app,
body.auth-locked #first-run,
body.auth-locked #support-footer { display: none; }
.login-screen {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; overflow-y: auto;
  background:
    radial-gradient(900px 500px at 15% -10%, var(--accent-soft), transparent 60%),
    var(--bg);
}
.login-screen.hidden { display: none; }
.login-card {
  width: min(400px, 100%);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  padding: 26px 26px 20px;
  display: flex; flex-direction: column; gap: 6px;
}
.login-card h2 { margin: 14px 0 0; font-size: 20px; }
.login-card .hint { margin: 0 0 8px; }
.login-card input[type=text], .login-card input[type=password] { width: 100%; margin-bottom: 6px; }
.login-card button[type=submit] { margin-top: 10px; justify-content: center; padding: 10px 14px; font-size: 14px; }
.login-brand { display: flex; align-items: center; gap: 12px; }
.login-brand .logo {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #ff8f4d, #ef6a15);
  box-shadow: 0 0 0 1px var(--accent-soft-2), 0 6px 18px var(--accent-soft);
}
.login-brand .title { font-weight: 700; font-size: 15px; }
.login-brand .subtitle { color: var(--text-tertiary); font-size: 12px; }
.login-remember { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 13px; }
.login-error {
  background: var(--error-soft); color: var(--error); border-radius: var(--radius-sm);
  padding: 8px 12px; font-size: 13px; margin-top: 6px;
}
.login-foot { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.login-foot select { width: 100%; }

.ok-bar {
  background: var(--ok-soft); border: 1px solid var(--ok); color: var(--text);
  padding: 10px 14px; border-radius: var(--radius); margin-bottom: 12px; font-size: 13px;
  overflow-wrap: anywhere;
}
.ok-bar code { margin: 0 4px; user-select: all; }
.warn-text { color: var(--warn); }
button.linkish {
  background: none; border: none; padding: 0; color: var(--accent); cursor: pointer;
  font-size: 13px; text-decoration: underline; text-underline-offset: 2px;
}
button.linkish:not(:disabled):hover { background: none; color: var(--accent); }

.session-list { display: flex; flex-direction: column; gap: 6px; }
.session-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2);
}
.session-row.current { border-color: var(--ok); }
.session-main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.session-main .hint { flex-basis: 100%; margin: 0; }

.remote-step {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 0; border-top: 1px solid var(--border-subtle);
}
.remote-step:first-of-type { border-top: none; }
.rs-mark {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 12px; margin-top: 1px;
}
.rs-mark.ok   { background: var(--ok-soft); color: var(--ok); }
.rs-mark.warn { background: var(--warn-soft); color: var(--warn); }
.rs-mark.bad  { background: var(--error-soft); color: var(--error); }
.remote-step-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 auto; }
.remote-step-main > label { display: flex; align-items: center; gap: 8px; }
.remote-step-title { font-weight: 600; }
.remote-step-main .hint { margin: 0; }
.port-list { display: flex; flex-wrap: wrap; gap: 6px; }
.port-chip {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px;
  padding: 2px 8px; border-radius: var(--radius-xs); border: 1px solid var(--border);
}
.port-chip.ok  { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.port-chip.bad { background: var(--error-soft); color: var(--error); border-color: transparent; cursor: help; }
.url-list { margin: 6px 0; padding-inline-start: 20px; }
.url-list a { overflow-wrap: anywhere; }
.remote-check { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.remote-check .warning-bar, .remote-check .ok-bar { margin: 4px 0 0; }
.remote-watch { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.remote-tunnel { margin-top: 10px; }
.remote-tunnel summary { cursor: pointer; font-weight: 600; color: var(--accent); }

.chat-line.mine .chat-player { color: var(--ok); }
.chat-line.mine { background: var(--ok-soft); border-radius: 4px; padding: 1px 4px; }
.chat-line.admin .chat-player { color: var(--warn); }
.chat-archive-bar { gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.chat-archive-bar select { flex: 0 1 260px; }
.chat-archive-bar input[type=search] { flex: 1 1 200px; width: auto; }
.chat-feed.archive { max-height: 560px; }
@media (max-width: 600px) {
  .chat-line { flex-wrap: wrap; }
  .chat-text { flex-basis: 100%; }
}
.remote-step-main > button:not(.linkish) { align-self: flex-start; }
.remote-step-main > button.linkish { align-self: flex-start; }

/* ============================================================
   Right-to-left (Arabic). Layout uses logical properties above; these
   rules mirror what logical properties cannot express.
   ============================================================ */
[dir=rtl] input[type=checkbox].switch:checked::after { transform: translateY(-50%) translateX(-18px); }
[dir=rtl] select { background-position: left 10px center; }
@media (max-width: 1000px) {
  [dir=rtl] .sidebar { transform: translateX(100%); }
  [dir=rtl] .sidebar.open { transform: translateX(0); }
}
/* Code, paths, logs and editors stay left-to-right inside RTL pages. */
.CodeMirror, .log-pane, pre, code, .mono, .diff-text, input[type=url],
input.mono, textarea.code, .chat-time, .port-chip { direction: ltr; unicode-bidi: isolate; }
[dir=rtl] .log-pane, [dir=rtl] pre, [dir=rtl] .CodeMirror { text-align: left; }
[dir=rtl] .topbar-sel { padding: 6px 10px 6px 26px; background-position: left 8px center; }
[dir=rtl] .tl { padding: 0 14px 0 0; }
[dir=rtl] .gm-tier-legend { margin: 0 22px 6px 0; }
@media (max-width: 1000px) {
  [dir=rtl] .topbar-sel { padding: 6px 8px 6px 20px; background-position: left 6px center; }
}
/* Numbers with Latin units ("55.0 GB", "12.5 %") keep their order in RTL. */
[dir=rtl] .metric-num, [dir=rtl] .num, [dir=rtl] .badge, [dir=rtl] .chip { unicode-bidi: isolate; }
[dir=rtl] .metric-num { direction: ltr; text-align: end; }

/* ============================================================
   Page structure: section icons, tabs, card titles
   ============================================================ */
.page-head-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.page-icon {
  flex: none; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-soft-2);
}
@media (max-width: 600px) { .page-icon { width: 36px; height: 36px; border-radius: 10px; } .page-icon svg { width: 18px; height: 18px; } }

.section-tabs {
  display: flex; gap: 4px; margin: -4px 0 18px; padding: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.section-tabs::-webkit-scrollbar { display: none; }
.section-tab {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 9px 14px; border-radius: var(--radius);
  color: var(--text-secondary); font-weight: 600; font-size: 13px;
  text-decoration: none; white-space: nowrap;
  transition: background .15s, color .15s;
}
.section-tab:hover { background: var(--surface-hover); color: var(--text); }
.section-tab.active { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-soft-2); }
.section-tab-icon { display: inline-flex; }

.card .card-title { display: flex; align-items: center; gap: 8px; }
.card-title-icon { display: inline-flex; color: var(--accent); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.card-head h3, .card-head .with-help { margin: 0; }
.card-head .with-help h3 { margin: 0; }
.field { min-width: 0; }
.field > label:first-child { margin-top: 0; }
.field + .field { margin-top: 0; }
.card > .field { margin-top: 12px; }
.sub-title {
  margin: 20px 0 8px; font-size: 12px; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: .06em;
}
.flags-grid { gap: 2px 18px; }
.flags-grid .switch-row { margin: 6px 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================
   Server page: map choice
   ============================================================ */
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.map-tile {
  display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface-2); transition: border-color .15s, box-shadow .15s;
}
.map-tile:hover { border-color: var(--border-strong); }
.map-tile.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft-2), 0 8px 24px var(--accent-soft); }
.map-thumb { aspect-ratio: 16 / 9; background: #294055; position: relative; overflow: hidden; }
.map-thumb-svg { width: 100%; height: 100%; display: block; }
.map-thumb.placeholder {
  display: grid; place-items: center;
  background: repeating-radial-gradient(circle at 30% 40%, #3a4636 0 9px, #34402f 9px 18px);
}
.map-thumb-initial { font-size: 44px; font-weight: 800; color: rgba(255, 255, 255, .55); }
.mt-water { fill: #294055; }
.mt-land { fill: #54674a; }
.mt-hi1 { fill: #64744c; }
.mt-hi2 { fill: #8a8155; }
.mt-hi3 { fill: #a99a6b; }
/* Desert worlds (Nasdara, Takistan), as on the big map. */
.map-thumb-svg.arid .mt-land { fill: #8f7d58; }
.map-thumb-svg.arid .mt-hi1 { fill: #a08a60; }
.map-thumb-svg.arid .mt-hi2 { fill: #b29a6b; }
.map-thumb-svg.arid .mt-hi3 { fill: #c4ad7c; }
.mt-river { fill: none; stroke: #4a7a99; stroke-width: 0.9; stroke-linejoin: round; stroke-linecap: round; }
.map-tile.invalid .map-thumb { filter: grayscale(.7); opacity: .8; }
.map-tile-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.map-tile-world { font-weight: 700; font-size: 15px; color: var(--text); }
.map-tile-name { font-size: 12px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-tile-meta { font-size: 12px; color: var(--text-tertiary); overflow-wrap: anywhere; }
.map-tile-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.map-tile-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 10px; }
.map-tile-actions button { flex: 1 1 auto; justify-content: center; }

/* ============================================================
   Server page: serverDZ.cfg groups
   ============================================================ */
.cfg-group { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--border-subtle); }
.card > .cfg-group:first-of-type { border-top: none; margin-top: 4px; padding-top: 0; }
.cfg-group-title {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
  font-size: 13px; font-weight: 700; color: var(--text); text-transform: none; letter-spacing: 0;
}
.cfg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 18px; align-items: end; }
.cfg-field { min-width: 0; }
.cfg-field.wide { grid-column: span 2; }
.cfg-label { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 8px; margin-bottom: 6px; min-width: 0; }
.cfg-label label, .cfg-label .with-help { margin: 0; }
.cfg-key { font-size: 10.5px; color: var(--text-faint); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; background: none; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cfg-bools { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 18px; margin-top: 12px; }
.cfg-grid + .cfg-bools { margin-top: 14px; }
.cfg-bool {
  display: flex; align-items: center; gap: 12px; margin: 0; cursor: pointer;
  padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius); background: var(--surface-2);
  text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: var(--text-secondary);
  transition: border-color .15s;
}
.cfg-bool:hover { border-color: var(--border-strong); }
.cfg-bool-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cfg-bool-label { display: inline-flex; align-items: center; gap: 6px; color: var(--text); overflow-wrap: anywhere; }
.cfg-bool .cfg-key { white-space: normal; overflow-wrap: anywhere; }
.secret-wrap { position: relative; display: flex; }
.secret-wrap input { flex: 1; padding-inline-end: 42px; }
.rcon-access-row { gap: 8px; }
.rcon-access-row .secret-wrap { flex: 1 1 220px; min-width: 0; }
.card > .rcon-access-row + p.hint { margin-top: 10px; }
.eye-btn {
  position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 28px; padding: 0; font-size: 14px; border: none; background: transparent;
}
@media (max-width: 600px) { .cfg-field.wide { grid-column: auto; } .cfg-grid, .cfg-bools { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .map-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .map-tile-body { padding: 10px; }
  .map-tile-world { font-size: 14px; }
  .map-tile-actions button { font-size: 12px; padding: 6px 8px; }
  .section-tab { padding: 8px 11px; }
}

/* ============================================================
   Multi-server — switcher, menu, Servers page, all-servers card
   ============================================================ */
.srv-switch {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 10px 0 11px; max-width: 260px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-weight: 600; font-size: 13px; cursor: pointer;
  transition: border-color .12s, color .12s;
}
.srv-switch:hover, .srv-switch[aria-expanded="true"] { border-color: var(--accent); }
.srv-switch-icon { color: var(--accent); flex: none; }
.srv-switch-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.srv-caret { color: var(--text-tertiary); flex: none; }
.srv-switch .srv-dot { display: none; }
.srv-switch.multi .srv-dot { display: inline-block; }
.srv-switch.multi .srv-switch-icon { display: none; }

.srv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-tertiary); flex: none; display: inline-block; }
.srv-dot.ok   { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.srv-dot.warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.srv-dot.err  { background: var(--error); box-shadow: 0 0 0 3px var(--error-soft); }
.srv-dot.mute { background: var(--text-tertiary); }

.srv-menu {
  position: fixed; z-index: 60; min-width: 260px; max-width: min(380px, calc(100vw - 20px));
  max-height: min(70vh, 520px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px;
}
.srv-menu-head {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-tertiary); padding: 6px 10px 6px;
}
.srv-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text); text-align: start; cursor: pointer;
  font: inherit;
}
.srv-menu-item:hover:not(:disabled) { background: var(--surface-hover); }
.srv-menu-item.current { background: var(--accent-soft); }
.srv-menu-item:disabled { opacity: .55; cursor: not-allowed; }
.srv-menu-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.srv-menu-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srv-menu-sub { font-size: 11.5px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srv-menu-check { color: var(--accent); font-weight: 700; }
.srv-menu-sep { height: 1px; background: var(--border); margin: 6px 4px; }
.srv-menu-link { color: var(--text-secondary); font-weight: 600; font-size: 13px; }
.srv-menu-icon { display: inline-flex; color: var(--accent); width: 8px; justify-content: center; }

.servers-intro { line-height: 1.55; }
.servers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 16px; margin-bottom: 16px; }
.servers-grid .card { margin-bottom: 0; }
.srv-card { display: flex; flex-direction: column; gap: 12px; }
.srv-card.current { border-color: var(--accent-soft-2); box-shadow: inset 0 0 0 1px var(--accent-soft-2), var(--shadow-sm); }
.srv-card.broken { border-style: dashed; }
.srv-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.srv-card-head .badge { margin-inline-start: 0; }
.srv-card-head .grow { flex: 1; }
.srv-card .srv-card-name { margin: 0; font-size: 16px; text-transform: none; letter-spacing: 0; color: var(--text); font-weight: 700; overflow-wrap: anywhere; }
.srv-kv { font-size: 12.5px; }
.srv-kv .k { color: var(--text-tertiary); }
.srv-dir { overflow-wrap: anywhere; font-size: 12px; }
.srv-card .warning-bar { margin-bottom: 0; padding: 9px 12px; }
.err-bar { background: var(--error-soft); border-color: var(--error); color: var(--error); }
.srv-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.srv-actions .grow { flex: 1; }
.danger-text:hover:not(:disabled) { color: var(--error); border-color: var(--error); }
.icon-btn:disabled { opacity: .45; cursor: not-allowed; }

.srv-add .section-tabs { margin: 4px 0 14px; }
.srv-add .section-tab { border: 0; background: transparent; cursor: pointer; font: inherit; font-weight: 600; font-size: 13px; }
.srv-add .section-tab.active { background: var(--accent-soft); }
.srv-inspect { font-size: 12.5px; min-height: 18px; margin: 6px 0 4px; color: var(--text-secondary); }
.srv-inspect.ok { color: var(--ok); }
.srv-inspect.bad { color: var(--error); }
.srv-job { margin-top: 14px; }
.srv-job-line { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.srv-job-file { margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progress { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
.progress-bar { height: 100%; background: var(--accent-grad); border-radius: 999px; transition: width .4s ease; }

.all-servers-list { display: flex; flex-direction: column; gap: 2px; }
.as-row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--radius-sm); }
.as-row:hover { background: var(--surface-hover); }
.as-row.current { background: var(--accent-soft); }
.as-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.as-name { font-weight: 600; font-size: 13.5px; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.as-name:hover { color: var(--accent); }
.as-sub { font-size: 12px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1000px) {
  .srv-switch { max-width: 170px; padding: 0 8px; }
}
@media (max-width: 600px) {
  .srv-switch { max-width: 120px; font-size: 12px; }
  .srv-switch .srv-caret { display: none; }
}

/* ============================================================
   Players — tabs, tables, ban dialog, profile IDs
   ============================================================ */
.players-tiles .tile-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: start; cursor: pointer; font: inherit; color: inherit; width: 100%; transition: border-color .15s; }
.players-tiles .tile-btn:hover { border-color: var(--accent-soft-2); }
.players-tiles .tile-btn h3 { margin-top: 0; }
.players-tabs { margin-top: 2px; }
.players-tabs .section-tab, .srv-add-tabs .section-tab { border: 0; background: transparent; cursor: pointer; font: inherit; font-weight: 600; font-size: 13px; }
.players-tabs .section-tab.active { background: var(--accent-soft); }
.players-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.players-toolbar .grow { flex: 1; }
.players-toolbar select { width: auto; }
.players-toolbar label.hint { margin: 0; }
.players-search { flex: 1 1 260px; max-width: 420px; }
.players-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.player-cell { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; }
.player-cell .badge { margin-inline-start: 0; }
.id-cell { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.row-actions { white-space: nowrap; text-align: end; }
.row-actions button + button { margin-inline-start: 6px; }
.ping { font-variant-numeric: tabular-nums; font-weight: 600; }
.ping.ok { color: var(--ok); } .ping.warn { color: var(--warn); } .ping.bad { color: var(--error); }
.bans-history { margin-top: 12px; }
.bans-history .btn-link { padding: 4px 0; }

.ban-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.ban-chip {
  padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.ban-chip:hover { border-color: var(--accent); color: var(--text); }
.ban-chip.active { background: var(--error-soft); border-color: var(--error); color: var(--error); }
.ban-custom { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.ban-custom input { width: 110px; }
.ban-custom select { width: auto; }
.ban-summary { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin: 2px 0 10px; }
.ban-summary.perm { color: var(--error); }
.ban-info { margin-top: 10px; }

.profile-idrow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.profile-idrow .hint { flex: none; min-width: 120px; }
.profile-idval { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: 12.5px; }
.icon-btn.small-icon { width: 26px; height: 26px; font-size: 13px; flex: none; }
.profile-ban { display: flex; flex-direction: column; gap: 3px; margin: 4px 0 12px; }
.profile-ban .hint { color: inherit; opacity: .85; }
.adm-type.mod-ban { background: var(--error-soft); color: var(--error); }
.adm-type.mod-unban, .adm-type.mod-expired { background: var(--ok-soft); color: var(--ok); }
.adm-type.mod-kick { background: var(--warn-soft); color: var(--warn); }
@media (max-width: 640px) {
  .profile-idrow .hint { min-width: 0; }
  .row-actions { white-space: normal; }
  .row-actions button { margin: 2px 0; }
}

/* ============================================================
   Discord settings, settings scope
   ============================================================ */
/* Discord events — one row per event: the emoji and colour of its message,
   the name, the ping tag and the switch at the end. (label.dc-ev must beat
   label:has(> input.switch), which makes switch labels inline.) */
.dc-events { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.dc-col { display: grid; gap: 14px; min-width: 0; }
.dc-group { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); padding: 10px 12px 4px; min-width: 0; }
.dc-group-head { display: flex; align-items: center; gap: 8px; padding: 2px 2px 8px; border-bottom: 1px solid var(--border-subtle); }
.dc-group-head .sub-title { margin: 0; flex: 1; }
.dc-count { font-size: 11.5px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums; }
.dc-count.none { color: var(--text-tertiary); background: var(--panel-alt); }
.dc-group label.dc-ev { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 8px 4px; border-radius: var(--radius-sm); color: var(--text); font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; cursor: pointer; }
.dc-group label.dc-ev + label.dc-ev { border-top: 1px solid var(--border-subtle); }
.dc-group label.dc-ev:hover { background: var(--surface-hover); }
.dc-ico { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; line-height: 1;
  background: color-mix(in srgb, var(--dc) 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dc) 35%, transparent); }
.dc-ev-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dc-ev input.switch { flex: 0 0 auto; margin-inline-start: auto; }
.dc-tag { font-size: 10.5px; flex: 0 0 auto; }
.dc-preview-wrap { display: grid; gap: 8px; min-width: 0; }
.dc-preview-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-weight: 600; font-size: 13px; color: var(--text); padding: 0 2px; }
.dc-preview-label .hint { margin: 0; font-weight: 400; }
.dc-preview { --dc: var(--accent); display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--radius); background: #313338; color: #dbdee1; font-size: 13.5px; min-width: 0; }
.dc-pv-avatar { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: #5865f2; color: #fff; display: grid; place-items: center; font-weight: 700; object-fit: cover; }
.dc-pv-body { min-width: 0; flex: 1; }
.dc-pv-head { display: flex; align-items: baseline; gap: 8px; }
.dc-pv-head b { color: #f2f3f5; font-weight: 600; }
.dc-pv-time { color: #949ba4; font-size: 11.5px; }
.dc-pv-ping { display: inline-block; margin-top: 2px; padding: 0 3px; border-radius: 3px; color: #c9cdfb; background: rgba(88, 101, 242, .3); font-weight: 500; }
.dc-pv-embed { margin-top: 6px; padding: 9px 12px 10px; border-radius: 4px; background: #2b2d31; border-inline-start: 4px solid var(--dc); display: grid; gap: 6px; }
.dc-pv-title { color: #f2f3f5; font-weight: 600; overflow-wrap: anywhere; }
.dc-pv-desc { color: #dbdee1; overflow-wrap: anywhere; }
.dc-pv-foot { color: #949ba4; font-size: 11.5px; }
@media (max-width: 900px) { .dc-events { grid-template-columns: 1fr; } }
.scope-note {
  display: inline-flex; align-items: center; gap: 8px; margin: -6px 0 14px;
  padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-soft-2);
}
.scope-note.panel { background: var(--info-soft); color: var(--info); border-color: var(--info); }
.note-input { font-family: inherit !important; font-weight: 400 !important; font-size: 13.5px !important; }
.be-bans .be-until { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.be-bans .be-until input[type=datetime-local] { width: auto; min-width: 190px; }
.be-bans .be-until input:disabled { opacity: .45; }
tr.row-expired > td { opacity: .6; }
.toast.toast-action { display: flex; align-items: center; gap: 12px; }
.toast.toast-action button { flex: none; }

/* Vehicles from mods: detected cars and their setup */
.veh-mod-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.veh-mod-head .sub-title { margin: 0; }
.veh-detected { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; margin-top: 8px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.veh-detected.done { opacity: .8; }
.veh-detected-main { min-width: 0; }
.veh-detected-main .hint { overflow-wrap: anywhere; }
.warn-text { color: var(--warn); }
@media (max-width: 640px) {
  .players-tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .players-tiles .tile-btn { padding: 12px 14px; }
  .players-tiles .tile-btn h3 { font-size: 10.5px; }
  .players-tiles .metric-num { font-size: 22px; }
  .srv-actions .grow { display: none; }
}

/* Dashboard (1.0 polish) */
.dash-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .dash-grid { grid-template-columns: 1fr 1fr; } .dash-grid .dash-server { grid-column: 1 / -1; } }
@media (max-width: 640px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dash-res .res-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.dash-res .res-row .spark { flex: 1; max-width: 55%; height: 36px; }
button.fps-none { padding: 0; min-height: 0; border: 0; background: none; color: var(--text-tertiary); cursor: pointer; }
.bar-action { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bar-action .bar-text { flex: 1 1 240px; }
.setup-card.compact .setup-head { margin-bottom: 8px; }
.setup-next { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: 13.5px; }

/* Server page: shortcuts, summary row, sticky save bar */
.page-anchors { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 14px; }
.anchor-chip { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.anchor-chip:hover { border-color: var(--accent); color: var(--text); }
.cfg-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13.5px;
  padding: 10px 12px; border: 1px dashed var(--border); border-radius: var(--radius-sm); }
.sticky-save { position: sticky; bottom: 12px; z-index: 15; display: flex; align-items: center; gap: 10px; margin-top: 12px;
  padding: 10px 14px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--accent-soft-2);
  box-shadow: var(--shadow); font-size: 13px; font-weight: 600; }
.sticky-save[hidden] { display: none; }
.sticky-save .grow { flex: 1; }
@media (max-width: 600px) {
  .cfg-bools { gap: 6px; }
  .cfg-bool { padding: 8px 10px; }
}

/* RCon: what the running BattlEye uses, and a rejected-password state. */
.rcon-live { margin-top: 10px; display: grid; gap: 8px; }
.rcon-live .hint { margin: 0; }
.rcon-live .warning-bar { margin: 0; }
.chat-dot.bad { background: var(--error); box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 22%, transparent); }

/* Events: category chips, sortable table, a compact phone layout. */
.evl-toolbar input[type=search] { flex: 0 1 260px; min-width: 160px; }
.evl-cats { margin: 0; }
.evl-cats .pill { cursor: pointer; }
.evl-cats .pill.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.evl-cats .pill.warn { border-color: color-mix(in srgb, var(--warn) 55%, var(--border)); color: var(--warn); }
.evl-cats .pill.warn.active { background: var(--warn-soft); border-color: var(--warn); }
/* Events: the kind of each event as a small coloured icon before its name. */
.evl-icon { display: inline-flex; vertical-align: -3px; margin-inline-end: 8px; color: var(--text-tertiary); }
.evl-icon.k-animals { color: #d9a066; }
.evl-icon.k-infected { color: #9ccc5a; }
.evl-icon.k-vehicles { color: #c89bff; }
.evl-icon.k-static { color: #ff9d5c; }
.evl-icon.k-trajectory { color: #6aa8ff; }
.evl-summary { margin-bottom: 12px; }
.evl-table { width: 100%; }
.evl-table td { padding-top: 7px; padding-bottom: 7px; }
.evl-act .icon-btn { width: 30px; height: 30px; }
.evl-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.evl-row { cursor: pointer; }
.evl-row:hover td, .evl-row:focus-visible td { background: var(--surface-hover); }
.evl-row:focus-visible { outline: none; }
.evl-row.off td { color: var(--text-tertiary); }
.evl-name .badge { margin-inline-start: 6px; vertical-align: middle; }
.evl-file { display: inline-block; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evl-sub { display: none; }
.evl-c { text-align: center; }
th.evl-act, td.evl-act { width: 44px; text-align: end; }
td.strong { font-weight: 600; color: var(--text); }
.evl-foot { margin-top: 10px; }
@media (max-width: 640px) {
  .evl-hide-sm { display: none; }
  .evl-sub { display: block; margin: 3px 0 0; font-size: 11.5px; }
  .evl-file { max-width: 150px; }
  .evl-toolbar input[type=search] { flex: 1 1 100%; }
}
/* Events editor */
.evl-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.evl-links button span { display: inline-flex; vertical-align: middle; }
.evl-bools { margin: 14px 0 4px; }
.evl-kids-title { display: flex; align-items: center; gap: 6px; margin: 20px 0 8px; }
.evl-kids { display: grid; gap: 8px; }
.evl-kid { display: grid; grid-template-columns: minmax(180px, 1fr) repeat(4, 86px) 32px; gap: 8px; align-items: end; }
.evl-kid > button.icon-btn { margin-bottom: 2px; }
label.evl-kid-num { display: grid; gap: 3px; margin: 0; font-size: 10.5px; }
.evl-kid-num input { width: 100%; }
.evl-kids > button { justify-self: start; }
@media (max-width: 700px) {
  .evl-kid { grid-template-columns: repeat(4, minmax(0, 1fr)) 32px; padding: 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); }
  .evl-kid > input[type=text] { grid-column: 1 / -1; }
}
/* Long editor dialogs keep their buttons in view. */
.actions .grow { flex: 1; }
.modal-card.wide .modal-body > .actions:last-child {
  position: sticky; bottom: 0; z-index: 1;
  margin: 18px -22px -22px; padding: 12px 22px;
  background: var(--surface); border-top: 1px solid var(--border);
}

/* Gameplay (cfggameplay.json): groups of localized fields with the raw key,
   "default" / "changed" chips and a reset per field. */
.gp2-toolbar input[type=search] { flex: 0 1 280px; min-width: 160px; }
.gp2 { display: grid; gap: 12px; }
.gp2[hidden], .gp2-group[hidden], .gp2-sub[hidden], .gp2-field[hidden], .gp2-bool[hidden] { display: none; }
.gp2-group { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); min-width: 0; }
.gp2-group > summary { display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; list-style: none; font-weight: 600; color: var(--text); }
.gp2-group > summary::-webkit-details-marker { display: none; }
.gp2-group > summary::after { content: '▾'; color: var(--text-tertiary); transition: transform .15s; }
.gp2-group:not([open]) > summary::after { transform: rotate(-90deg); }
.gp2-group[open] > summary { border-bottom: 1px solid var(--border-subtle); }
.gp2-group > summary .cfg-key { font-weight: 400; }
.gp2-title { font-size: 14px; }
.gp2-count { font-size: 11.5px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 1px 8px; }
.gp2-count[hidden] { display: none; }
.gp2-body { padding: 14px; display: grid; gap: 14px; }
.gp2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px 18px; align-items: start; }
.gp2-field { min-width: 0; }
.gp2-field.wide { grid-column: 1 / -1; }
.gp2-field input { width: 100%; }
/* Fields side by side line up row by row — labels, then controls, then notes —
   whatever wraps to two lines in a neighbour (the Server and Gameplay grids). */
@supports (grid-template-rows: subgrid) {
  .cfg-grid, .gp2-grid { align-items: stretch; }
  .cfg-field, .gp2-field { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .cfg-field > :first-child, .gp2-field > :first-child { align-self: end; }
  .cfg-field > :not(:first-child), .gp2-field > :not(:first-child) { align-self: start; }
}
.gp2-bools { margin-top: 0; }
.gp2-keyline { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.gp2-chip { font-size: 10.5px; border-radius: 999px; padding: 0 7px; line-height: 17px; white-space: nowrap; }
.gp2-chip:empty { display: none; }
.gp2-chip.def { color: var(--text-tertiary); background: var(--panel-alt); }
.gp2-chip.mod { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.gp2-reset { background: none; border: none; padding: 0 2px; color: var(--accent); cursor: pointer; font-size: 14px; line-height: 1; }
.gp2-reset[hidden] { display: none; }
.gp2-sub { border-top: 1px dashed var(--border); padding-top: 12px; display: grid; gap: 12px; }
.gp2-subtitle { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); text-transform: none; letter-spacing: 0; }
.gp2-subtitle .cfg-key { font-weight: 400; }
.gp2-note { font-size: 11.5px; margin-top: 4px; }
.gp2-color { display: flex; align-items: center; gap: 8px; }
.gp2-swatch { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border); }
.gp2-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gp2-months { display: grid; grid-template-columns: repeat(12, minmax(54px, 1fr)); gap: 6px; }
label.gp2-month { display: grid; gap: 3px; margin: 0; font-size: 10.5px; text-align: center; }
.gp2-month input { text-align: center; padding-inline: 4px; }
.gp2-raw { width: 100%; font-size: 12.5px; }
.gp2-raw[hidden] { display: none; }
.gp2-path { margin-top: 12px; }
.gp2-nomatch[hidden] { display: none; }
input.bad { border-color: var(--error) !important; }
@media (max-width: 900px) { .gp2-months { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .gp2-body { padding: 10px; }
  .gp2-toolbar input[type=search] { flex: 1 1 100%; }
  .gp2-months { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.gp2-group > summary .grow { flex: 1; }
.gp2 .cfg-bool { background: var(--surface); }
.gp2-body > .cfg-bools { margin-top: 0; }
button.link-btn.cfg-override { font-size: 11.5px; font-weight: 600; padding: 2px 0 0; color: var(--warn); text-align: start; }
button.link-btn.cfg-override::before { content: "↗ "; }
@media (max-width: 600px) { .gp2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; } .gp2-field.wide { grid-column: 1 / -1; } }

/* Vehicles: summary tiles, filter tabs, readable card titles, parts state. */
.veh-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 10px; }
.veh-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; text-align: start; color: var(--text); font: inherit; }
button.veh-tile.clickable { cursor: pointer; }
button.veh-tile.clickable:hover { border-color: var(--warn); background: var(--surface); }
.veh-tile-v { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.veh-tile-k { font-size: 12px; color: var(--text-tertiary); margin-top: 4px; }
.veh-tile.accent .veh-tile-v { color: var(--accent); }
.veh-tile.warn .veh-tile-v { color: var(--warn); }
.veh-tile.ok .veh-tile-v { color: var(--ok); }
.veh-intro { margin: 0 0 12px; }
.veh-tabs { margin-bottom: 12px; }
.veh-title { display: grid; gap: 1px; min-width: 0; }
.veh-head h3 { text-transform: none; letter-spacing: 0; font-size: 16px; font-weight: 700; color: var(--text); }
.veh-card[hidden] { display: none; }
.veh-card.mod-off { border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); }
.veh-file { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.veh-head button span { display: inline-flex; vertical-align: middle; }
.veh-parts .pill.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.veh-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.veh-foot .grow { flex: 1; }
.veh-foot .veh-parts { margin: 0; }
label.veh-active { margin: 6px 0 0; }
.veh-kids tr.never td { color: var(--text-tertiary); }
.veh-kids tr.never .inline-cell { opacity: .7; }
.veh-never { display: none; margin-inline-start: 6px; font-family: inherit; }
.veh-kids tr.never .veh-never { display: inline-block; }

/* Vehicles laid out like the loadout: a tab per vehicle, the chosen one's
   parts drawn on the car (spawnedit.js) beside a panel with its settings. */
.veh-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin: 0 0 14px; }
.veh-pick { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 12px 7px 8px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); text-align: start; cursor: pointer; }
.veh-pick[hidden] { display: none; }
.veh-pick:hover { border-color: var(--border-strong); }
.veh-pick.on { border-color: var(--accent); background: linear-gradient(135deg, var(--accent-soft), transparent 80%), var(--surface); }
.veh-pick.off .veh-pick-art { opacity: .45; filter: grayscale(1); }
.veh-pick-art { flex: none; width: 66px; height: 30px; }
.veh-pick-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.veh-pick-txt b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.veh-pick-txt small { font-size: 11.5px; color: var(--text-secondary); }
.veh-pick.dirty .veh-pick-txt b::after { content: ' •'; color: var(--accent); }
.veh-pick-warn { position: absolute; top: 7px; inset-inline-end: 8px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.veh-editor { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; align-items: start; }
.veh-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.veh-main > .card { margin: 0; }
.veh-sec-head { display: flex; align-items: center; gap: 10px; }
.veh-sec-head h3 { margin: 0; font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--text); }
.veh-sec-head + .hint { margin: 4px 0 12px; }
.veh-shop-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: 8px; background: var(--accent-grad); color: #fff; }
.veh-vars { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.veh-var { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text-secondary); font: 12px ui-monospace, "Cascadia Mono", Consolas, monospace; cursor: pointer; }
.veh-var:hover { border-color: var(--border-strong); color: var(--text); }
.veh-var.on { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.veh-var.never:not(.on) { opacity: .6; }
.veh-var .veh-dot { margin: 0; }
.veh-var-n { padding: 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--text-tertiary); font-weight: 700; font-size: 11px; }
.veh-var-n.full { background: var(--ok-soft); color: var(--ok); }
.veh-var-dirty { color: var(--accent); font-weight: 700; }
.veh-shop-new { margin: 0 0 10px; }
.veh-trunk { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
.veh-trunk .veh-sec-head + .hint { margin: 4px 0 10px; }
.veh-shop-file { margin: 8px 0 0; font-size: 11.5px; overflow-wrap: anywhere; }
.se-bulk .pill.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.veh-panel { position: sticky; top: calc(var(--topbar-h) + 12px); margin: 0; display: flex; flex-direction: column; gap: 10px; }
.veh-panel.mod-off { border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); }
.veh-panel-art { display: flex; align-items: center; justify-content: center; height: 128px; padding: 8px 12px; border-radius: var(--radius);
  background-color: var(--bg-soft);
  background-image: linear-gradient(var(--lo-grid) 1px, transparent 1px), linear-gradient(90deg, var(--lo-grid) 1px, transparent 1px);
  background-size: 24px 24px; }
.veh-panel-art .va-svg { max-width: 270px; }
.veh-panel .veh-title h3 { font-size: 17px; text-transform: none; letter-spacing: 0; color: var(--text); }
.veh-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.veh-badges:empty { display: none; }
.veh-badges .veh-file { overflow-wrap: anywhere; }
.veh-pos-btn { align-self: flex-start; }
.veh-panel .veh-warns { margin: 0; }
.veh-panel .veh-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.veh-panel .veh-cond { margin: 0; }
.veh-panel .veh-cond-k { min-width: 0; flex-basis: 100%; }
.veh-panel select.veh-fluid-sel { min-width: 0; width: 100%; }
.veh-panel .veh-fluid { width: 100%; }
.veh-panel .veh-foot { margin-top: 4px; }
.veh-variant-btn { display: inline; padding: 0; border: none; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.veh-variant-btn:hover { color: var(--accent); }
.veh-kids tr.on td { background: var(--accent-soft); }
@media (max-width: 1200px) {
  .veh-editor { grid-template-columns: minmax(0, 1fr); }
  .veh-panel { position: static; order: -1; }
}
@container (max-width: 560px) { .veh-loot { display: none; } }
@media (max-width: 760px) { .veh-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .veh-tile { padding: 12px; } .veh-tile-v { font-size: 20px; } }
@container (max-width: 560px) { .veh-kids .inline-cell { width: 50px; min-width: 44px; } .veh-kids th, .veh-kids td { padding-inline: 4px; } }

/* Weather: the current state and the shared smoothness on one row; the
   day/night hours as HTML under the bar (the SVG stretches, text must not). */
.wx-now { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 10px; }
.wx-now .grow { flex: 1; }
.wx-trans { display: inline-flex; align-items: center; gap: 8px; }
.wx-trans-row { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
.wx-trans-k { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wx-trans-k label { margin: 0; text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 600; color: var(--text); }
.wx-trans-k .hint { margin: 0; }
.wx-trans-row select { width: auto; flex: 0 1 360px; min-width: 240px; }
@media (max-width: 600px) { .wx-trans-row select { flex: 1 1 100%; min-width: 0; } }
.wx-trans label, .wx-trans .with-help { margin: 0; }
.wx-trans select { width: auto; min-width: 150px; }
label.wx-dyn { margin-top: 12px; }
.dn-svg { height: 34px; }
.dn-axis-row { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.dn-tick { min-width: 0; white-space: nowrap; }
.dn-stat .sub { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }
label.dn-persist { margin: 22px 0 4px; }
.dn-plan-row { gap: 10px 18px; }
label.dn-plan-field { display: inline-flex; align-items: center; gap: 8px; margin: 0; white-space: nowrap; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--text-secondary); }
@media (max-width: 600px) {
  .dn-tick.odd { display: none; }
  .wx-now .grow { display: none; }
  .wx-trans { width: 100%; }
  .wx-trans select { flex: 1; }
}
.wx-trans label { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: var(--text-secondary); }

/* ==== economy ==== */
/* Economy: the file picker sits in the page header. */
.econ-file { display: inline-flex; align-items: center; gap: 8px; margin: 0; text-transform: none; letter-spacing: 0;
  font-size: 12.5px; font-weight: 500; color: var(--text-tertiary); }
.econ-file select { width: auto; min-width: 150px; max-width: 260px; }
.econ-tune-scope { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.econ-tune-scope label { margin: 0; }
.econ-tune-scope select { width: auto; min-width: 200px; max-width: 100%; }
.econ-drill-hint { margin: 0 0 10px; }
/* Bars share one column set per card (subgrid), so every track is the same
   length however wide its value text is. The first declaration is the
   fallback for a browser without subgrid. */
.ebar-list { display: grid; grid-template-columns: minmax(90px, 180px) minmax(0, 1fr) max-content; gap: 2px 10px; }
.ebar-list .ebar-row { grid-column: 1 / -1; display: grid; align-items: center; padding: 3px 6px;
  grid-template-columns: minmax(90px, 180px) minmax(0, 1fr) max-content; grid-template-columns: subgrid; }
.ebar-list .ebar-label { max-width: 180px; min-width: 0; }
.ebar-list .ebar-track, .ebar-list .ebar-fill { display: block; }
.ebar-list .ebar-val { min-width: 0; }
.ebar-cat .cfg-key { margin-inline-start: 2px; }
button.ebar-link { width: 100%; background: transparent; border: 0; border-radius: var(--radius-sm);
  font: inherit; color: inherit; text-align: start; white-space: normal; cursor: pointer; }
button.ebar-link:not(:disabled):hover { background: var(--surface-hover); }
button.ebar-link:hover .ebar-label { color: var(--accent); }
@media (max-width: 600px) {
  /* Label and value on one line, the track full width under them: a 150px
     label left a phone ~50px of track. */
  .ebar-list { display: block; }
  .ebar-list .ebar-row { grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; padding: 5px 4px; }
  .ebar-list .ebar-label { max-width: none; }
  .ebar-list .ebar-track { grid-column: 1 / -1; grid-row: 2; height: 10px; }
  .econ-file { flex: 1 1 100%; }
  .econ-file select { flex: 1; max-width: none; }
}

/* Types: loading skeleton, the name as a link to the full editor, and the
   bottom dock holding the selection actions and the unsaved-changes bar. */
.types-skel { height: 30px; margin: 6px 0; }
.types-name-btn { display: block; max-width: 360px; min-height: 0; padding: 0; border: 0; background: none; color: var(--text);
  font: inherit; font-weight: 500; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.types-name-btn:not(:disabled):hover { background: none; color: var(--accent); text-decoration: underline; }
/* Types rows: where and at which tier an item spawns, under its name; the
   lifetime in words next to the seconds; items that never spawn dimmed. */
.types-table td { padding-block: 5px; vertical-align: middle; }
.types-sub { display: block; max-width: 360px; margin-top: 1px; font-size: 11.5px; color: var(--text-tertiary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.types-life { display: flex; align-items: center; gap: 6px; }
.types-life input.inline-cell { flex: 1 1 auto; }
.types-life-h { flex: 0 0 auto; min-width: 34px; font-size: 11.5px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.types-table tr.zero .types-name-btn { color: var(--text-tertiary); }
.types-table tr.zero td.num input.inline-cell { color: var(--text-tertiary); }
.types-table .types-edit { width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.types-dock { position: sticky; bottom: 12px; z-index: 15; display: grid; gap: 8px; margin-top: 12px; }
.types-dock > .sticky-save { position: static; margin-top: 0; flex-wrap: wrap; }
.types-dock select { width: auto; min-width: 170px; max-width: 100%; padding-block: 4px; font-size: 12.5px; }
.types-catfilter:empty { display: none; }
.types-catfilter .pill { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); gap: 6px; }
.types-chip-x { font-size: 14px; line-height: 1; }
.types-fields { gap: 12px 16px; }
.types-field .cfg-label label { margin: 0; }
.pills .types-list-inp { width: 150px; }
@media (max-width: 1280px) {
  .types-name-btn, .types-sub { max-width: 240px; }
}
@media (max-width: 1100px) {
  .types-name-btn, .types-sub { max-width: 180px; }
  .types-table .tk-ico { width: 26px; height: 26px; }
  .types-life-h { display: none; }
}
@media (max-width: 600px) {
  /* Phone: checkbox, name and the three numbers fit; the category and Edit
     columns go (the name opens the editor). */
  .types-table th:nth-child(6), .types-table td:nth-child(6),
  .types-table th:nth-child(7), .types-table td:nth-child(7) { display: none; }
  .types-table th, .types-table td { padding-inline: 4px; }
  .types-table thead th { font-size: 10px; letter-spacing: .02em; }
  .types-name-btn { max-width: 112px; }
  .types-table .inline-cell { width: 52px; min-width: 0; padding-inline: 4px; }
  /* The dock must not eat half a phone screen. */
  .types-dock > .sticky-save { gap: 6px; padding: 8px 10px; font-size: 12.5px; }
  .types-dock .grow { display: none; }
  .types-dock button.small { padding: 4px 8px; }
  .types-dock select { flex: 1 1 100%; }
}

/* Custom types: row actions and the unreadable-file badge. */
.moded-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.moded-broken { margin-inline-start: 8px; }
@media (max-width: 600px) {
  /* Phone: each file is a small stacked card, so the row actions are on
     screen instead of past a sideways scroll. */
  .moded-table thead { display: none; }
  .moded-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px;
    padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
  .moded-table tbody tr:last-child { border-bottom: 0; }
  .moded-table tbody td { display: block; padding: 0; border: 0; }
  .moded-table tbody td:nth-child(1), .moded-table tbody td:nth-child(5) { grid-column: 1 / -1; }
  .moded-table tbody td:nth-child(2) { text-align: start; color: var(--text-secondary); }
  .moded-table tbody td:nth-child(2)::before { content: attr(data-label) ": "; color: var(--text-tertiary); }
  .moded-table tbody td:nth-child(3) { display: none; }
  .moded-actions { justify-content: flex-start; }
}

/* Attachments: the whole row opens the editor. */
.attach-table tbody tr.attach-row { cursor: pointer; }
/* Item kinds: one colour and icon each, in Types, Loot economy and chips. */
.tk-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px;
  color: var(--tk, var(--text-tertiary)); background: color-mix(in srgb, var(--tk, var(--text-tertiary)) 14%, transparent); }
.kind-chip .tk-ico { width: auto; height: auto; background: none; margin-inline-end: -2px; }
.tk-weapons { --tk: #ff9d5c; } .tk-ammo { --tk: #f2b84b; } .tk-mags { --tk: #e8a34a; }
.tk-clothes { --tk: #6aa8ff; } .tk-food { --tk: #8fd16a; } .tk-tools { --tk: #9aa7bd; }
.tk-containers { --tk: #3ecf8e; } .tk-explosives { --tk: #ff6b6b; } .tk-books { --tk: #c7a27a; }
.tk-lootdispatch { --tk: #c89bff; } .tk-other { --tk: #8b95a7; }
.tk-infected { --tk: #9ccc5a; } .tk-animal { --tk: #d9a066; } .tk-vehicle { --tk: #c89bff; }
html[data-theme="light"] .tk-infected { --tk: #4d7c0f; } html[data-theme="light"] .tk-animal { --tk: #9a5b13; }
html[data-theme="light"] .tk-vehicle { --tk: #7c3aed; }
html[data-theme="light"] .tk-weapons { --tk: #d9661c; } html[data-theme="light"] .tk-ammo { --tk: #b7791f; }
html[data-theme="light"] .tk-mags { --tk: #b45309; } html[data-theme="light"] .tk-clothes { --tk: #2563eb; }
html[data-theme="light"] .tk-food { --tk: #4d7c0f; } html[data-theme="light"] .tk-tools { --tk: #475569; }
html[data-theme="light"] .tk-containers { --tk: #059669; } html[data-theme="light"] .tk-explosives { --tk: #dc2626; }
html[data-theme="light"] .tk-books { --tk: #92400e; } html[data-theme="light"] .tk-lootdispatch { --tk: #7c3aed; }
html[data-theme="light"] .tk-other { --tk: #64748b; }
.types-namecell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.types-namecol { display: flex; flex-direction: column; min-width: 0; }
.types-cat { display: flex; align-items: center; gap: 6px; }
.types-cat-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tk, var(--text-faint)); }
.types-cat input.inline-cell { min-width: 96px; }
.veh-tweaks-note { display: flex; align-items: flex-start; gap: 6px; }
.veh-tweaks-note > span:first-child { flex: none; margin-top: 2px; color: var(--accent); }
/* Loot economy: bars in their kind's colour, usage and tier side by side,
   each scaling button with the total it gives. */
.ebar-row[class*="tk-"] .ebar-fill { background: var(--tk); }
.ebar-label .tk-ico { width: 20px; height: 20px; border-radius: 5px; margin-inline-end: 6px; vertical-align: middle; }
.econ-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.econ-pair > .card { margin: 0 0 14px; }
@media (max-width: 1000px) { .econ-pair { grid-template-columns: 1fr; } }
button.econ-scale { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.2; padding-block: 6px; }
.econ-est { font-size: 11px; font-weight: 500; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
/* Presets: the Attachments table with a chance bar and a "used" column. */
.rp-table th:nth-child(1), .rp-table td:nth-child(1) { width: 22%; }
.rp-table th:nth-child(2), .rp-table td:nth-child(2) { width: 118px; }
.rp-table th:nth-child(3), .rp-table td:nth-child(3) { width: 150px; }
.rp-table th:nth-child(4), .rp-table td:nth-child(4) { width: 76px; }
.rp-table th:nth-child(6), .rp-table td:nth-child(6) { width: 150px; }
.rp-table th:nth-child(7), .rp-table td:nth-child(7) { width: 92px; }
.rp-chance { display: flex; align-items: center; gap: 8px; }
.rp-bar { flex: 1 1 auto; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; min-width: 40px; }
.rp-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--accent-grad, var(--accent)); }
.rp-pct { min-width: 42px; text-align: end; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rp-edit-head { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.rp-edit-name { display: flex; flex-direction: column; gap: 4px; flex: 1 1 260px; margin: 0; }
.rp-edit-name .preset-name-inp { flex: none; }
.rp-edit-head .kind-badge, .rp-edit-head .badge { margin-bottom: 9px; }
@media (max-width: 1100px) {
  .rp-table th:nth-child(5), .rp-table td:nth-child(5) { display: none; }
}
@media (max-width: 760px) {
  .rp-table th:nth-child(6), .rp-table td:nth-child(6), .rp-table th:nth-child(4), .rp-table td:nth-child(4) { display: none; }
  .rp-table th:nth-child(3), .rp-table td:nth-child(3) { width: 110px; }
}
.attach-table tbody tr.attach-row:hover .attach-name-cell { color: var(--accent); }
@media (max-width: 620px) {
  /* Phone: name (with its category) and kind only. The fixed column widths
     added up to more than the card, so the name column collapsed to nothing. */
  .attach-table th:nth-child(1), .attach-table td:nth-child(1) { width: auto; }
  .attach-table th:nth-child(n+3), .attach-table td:nth-child(n+3) { display: none; }
}

/* Unsaved-changes bars: on a phone the buttons wrap under the text instead
   of running off the right edge. */
@media (max-width: 600px) { .sticky-save { flex-wrap: wrap; } }

/* Presets: one-line summaries that open into the editor. */
.rp-card { padding: 0; margin-bottom: 6px; }
.rp-kinds { margin-top: 10px; }
/* The folded line: kind, name, group chance · items, the first classes. */
.rp-kind { min-width: 84px; text-align: center; }
.rp-items { flex: 1 1 200px; min-width: 0; font-size: 12px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-card > .rp-summary { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; padding: 11px 16px;
  cursor: pointer; list-style: none; border-radius: var(--radius-lg); }
.rp-card > .rp-summary::-webkit-details-marker { display: none; }
.rp-card > .rp-summary::before { content: '▸'; color: var(--text-tertiary); transition: transform .15s; }
.rp-card[open] > .rp-summary::before { transform: rotate(90deg); }
.rp-card[open] > .rp-summary { border-bottom: 1px solid var(--border-subtle); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.rp-card > .rp-summary:hover { background: var(--surface-hover); }
.rp-name { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight: 700; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.rp-name.rp-unnamed { font-family: inherit; font-weight: 500; font-style: italic; color: var(--text-tertiary); }
.rp-meta { color: var(--text-tertiary); font-size: 12.5px; }
.rp-badges { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-inline-start: auto; flex: 0 0 auto; }
.rp-body { padding: 12px 16px 14px; }
.rp-count { white-space: nowrap; }
.rp-unknown-btn.active { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.rp-del { margin-inline-start: auto; }
.rp-wt-lbl { display: none; }
/* The unknown-class "!" is positioned against its own field; without this it
   floated to one spot at the page edge for every flagged row. */
.preset-name-wrap { position: relative; }
.preset-item-row.unknown .item-name-inp { padding-inline-end: 26px; }
@media (max-width: 600px) {
  /* Phone: the class name gets a full line; weight, real chance and × the
     next one. A 150px name box cut FirefightersHelmet_* to the same text. */
  .preset-item-head { display: none; }
  .preset-item-row { display: grid; grid-template-columns: auto 74px minmax(0, 1fr) 30px; align-items: center;
    grid-template-areas: "name name name name" "lbl wt real x"; gap: 4px 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border-subtle); }
  .preset-item-row .preset-name-wrap { grid-area: name; }
  .preset-item-row .rp-wt-lbl { display: block; grid-area: lbl; }
  .preset-item-row .chance-inp { grid-area: wt; }
  .preset-item-row .preset-real { grid-area: real; text-align: start; }
  .preset-item-row .icon-x { grid-area: x; }
  .preset-edit-head .preset-name-inp { flex: 1 1 100%; }
  .rp-badges { margin-inline-start: 0; }
}

/* Where to find / Search: the other spawn paths as links, and the links
   between the two pages. */
.search-xlink { margin-bottom: 10px; }
.loot-also { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.pill.loot-ref { padding: 3px 10px; font-size: 12px; }
.loot-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.loot-warn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.loot-warn-row .loot-warn { margin: 4px 0; }
/* ==== end economy ==== */

/* ==== maps ==== */
/* Touch: at 1x a swipe over a map scrolls the page; once zoomed, one finger
   pans and two pinch (buildGameMap's pointer handlers). A drag that starts on
   an editor point never scrolls, so the point can be moved. */
.game-map { touch-action: pan-y; }
.game-map.gm-zoomed { touch-action: none; }
.ev-pt-g, .sp-pt-g { touch-action: none; }
.map-hit { fill: transparent; stroke: none; pointer-events: all; }
@media (pointer: coarse) {
  .gm-zbtn { width: 40px; height: 40px; font-size: 18px; }
}
/* Narrow (phone) maps label only the cities until zoomed in. */
.game-map.gm-narrow .gm-marks:not(.gm-lod-in) .gm-poi-g:not(.gm-t-city) .gm-town-label { display: none; }
/* The spacer in map toolbars had no width, so counts and readouts never
   reached the right edge. */
.map-toolbar .grow { flex: 1 1 auto; }
/* Map background (picture / size) section of the layers panel. */
.gm-bg-sec { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-subtle); }
.gm-bg-sec .map-img-ctl input[type=number] { flex: 1 1 90px; min-width: 0; }

/* Event-spawn editor */
.ev-info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: -2px 0 8px; font-size: 12.5px; }
.ev-info:empty { display: none; }
.ev-info button.link-btn { padding: 0; }
button.ev-chip { border: 1px solid transparent; cursor: pointer; font: inherit; font-size: 11.5px; }
button.ev-chip:hover { border-color: currentColor; }
.ev-hlabel { display: block; margin: 10px 0 4px; }
.ev-one { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.ev-table button.icon-only svg { display: block; }
@media (max-width: 720px) {
  /* Each point is a small card: "#n  [zoom] [x]", then X | Z, then Y | A. */
  .ev-table-wrap { max-height: 60vh; }
  .ev-table, .ev-table tbody { display: block; }
  .ev-table thead { display: none; }
  .ev-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; padding: 8px 10px; border-bottom: 1px solid var(--border-subtle); }
  .ev-table td { display: block; padding: 0; border: 0; text-align: start; }
  .ev-table tr.sel { background: var(--accent-soft); }
  .ev-table tr.sel td { background: none; }
  .ev-table td.ev-c-n { grid-row: 1; grid-column: 1; align-self: center; font-weight: 600; }
  .ev-table td.ev-c-n::before { content: "#"; }
  .ev-table td.ev-c-act { grid-row: 1; grid-column: 2; }
  .ev-table td.ev-c-x { grid-row: 2; grid-column: 1; }
  .ev-table td.ev-c-z { grid-row: 2; grid-column: 2; }
  .ev-table td.ev-c-y { grid-row: 3; grid-column: 1; }
  .ev-table td.ev-c-a { grid-row: 3; grid-column: 2; }
  .ev-table td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; color: var(--text-tertiary); margin-bottom: 2px; }
  .ev-table .inline-cell { min-width: 0; }
}

/* Player spawn-point editor: other groups as outlined dots, the active group
   on top with a white ring, the selected point with a thick one. */
.sp-pt-other { opacity: .8; stroke: rgba(0, 0, 0, .55); stroke-width: 1; }
.sp-pt-active { stroke: #fff; stroke-width: 1.6; }
.sp-pt.sel { stroke-width: 3; }
.sp-sel-info { font-variant-numeric: tabular-nums; }
.sp-list-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .sp-list-cols { grid-template-columns: 1fr; } }
.sp-list-wrap { max-height: 360px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.sp-list-wrap > p.hint { margin: 10px 12px; }
.sp-list { margin: 0; }
.sp-list th { position: sticky; top: 0; background: var(--surface-2); z-index: 1; }
.sp-list tr.sel td { background: var(--accent-soft); }
.sp-list .inline-cell { width: 100%; min-width: 0; }
.sp-list button.icon-only { padding: 3px 9px; }
.sp-list button.icon-only svg { display: block; }
.sp-paste-col > label { margin-top: 0; }
.sp-paste { min-height: 110px; }
.sp-unit-wrap { display: flex; align-items: center; gap: 6px; }
.sp-unit-wrap input { flex: 1; min-width: 0; }
.sp-unit { font-size: 12px; color: var(--text-tertiary); min-width: 14px; }
.sp-param .cfg-label { margin-bottom: 4px; }
.sp-param-grid { align-items: end; } /* fields line up when a label wraps */
.sp-param-bool { align-self: end; }

/* Vehicles: a modded vehicle the admin deleted, offered back. */
.veh-removed { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--border-subtle); flex-wrap: wrap; }

/* Dashboard "Getting started": the × that removes it for good. */
.setup-head .setup-dismiss { margin-inline-start: 2px; }

/* Settings → Startup: the systemd unit for servers without a desktop. */
.startup-systemd { margin: 6px 0 12px; }
.startup-systemd summary { cursor: pointer; font-size: 13px; color: var(--text-secondary); }
.startup-unit { white-space: pre; overflow-x: auto; padding: 10px 12px; margin: 8px 0; font-size: 12px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }

/* Live map: the map with the player list beside it (under it when narrow).
   The square map is as large as the window's height allows, so the whole
   map is in view without scrolling the page. */
.live-layout { --live-map: min(880px, max(420px, calc(100vh - 230px)));
  display: grid; grid-template-columns: minmax(0, var(--live-map)) minmax(220px, 1fr); gap: 14px; align-items: start; }
.live-layout .map-wrap { margin: 0; max-width: none; }
@media (max-width: 1100px) {
  .live-layout { grid-template-columns: minmax(0, 1fr); }
  .live-layout .map-wrap { margin: 0 auto; max-width: var(--live-map); }
}
.live-layout + .hint { margin-top: 10px; }
.map-wrap.is-idle { opacity: .6; }
.live-stopped { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px; margin-bottom: 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); font-size: 13px; }
.live-stopped-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-tertiary); flex: 0 0 auto; }
.live-stopped-text { flex: 1 1 260px; min-width: 0; }
.live-tip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px; margin-bottom: 10px;
  border: 1px solid var(--border); border-inline-start: 3px solid var(--accent); border-radius: var(--radius-sm);
  background: var(--accent-soft); font-size: 13px; }
.live-tip-text { flex: 1 1 300px; min-width: 0; }
.live-updated { font-variant-numeric: tabular-nums; }
.live-list { display: flex; flex-direction: column; gap: 4px; max-height: var(--live-map); overflow-y: auto; min-width: 0; }
@media (max-width: 1100px) { .live-list { max-height: 320px; } }
.live-list-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }
.live-list > p.hint { margin: 0; }
.live-row { display: flex; align-items: center; gap: 4px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-2); }
.live-row:hover { border-color: var(--border-strong); }
.live-row.active { border-color: var(--accent); background: var(--accent-soft); }
button.live-row-main { flex: 1; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1px 8px;
  padding: 6px 10px; border: 0; background: none; color: var(--text); text-align: start; font-size: 13px; cursor: pointer; }
.live-row-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.live-row-sub { grid-column: 2; font-size: 11.5px; font-weight: 500; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.live-row-sub .is-online { color: var(--ok); }
.live-row-sub .is-last { color: var(--warn); }
.live-row-dot { grid-row: 1 / span 2; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); }
.live-row-dot.stale { background: var(--text-tertiary); }
.live-row-dot.offline { background: transparent; border: 2px solid var(--warn); }
.live-row-prof { flex: 0 0 auto; margin-inline-end: 4px; }
/* Player markers are scaled to screen pixels in JS: fixed 11px names with a
   dark halo, legible on the map's terrain colours in either theme. */
.live-g { cursor: pointer; }
.live-g .live-label { font-size: 11px; fill: #f4f7f0; paint-order: stroke; stroke: #182015; stroke-width: 3px; stroke-linejoin: round; }
.live-g .live-label.stale { fill: #c9d1c6; }
.live-g.focus .live-pt { stroke: var(--accent); stroke-width: 3; }

/* Heatmap foot line and hover readouts. */
.map-wrap + .hint { margin-top: 10px; }
.map-readout:empty { min-width: 0; }
@media (hover: none) { .map-readout { display: none; } }

/* Missions page: installed missions as map tiles, the trash as a fold-out. */
.map-tile-actions button.icon-only { flex: 0 0 auto; }
.msn-empty { padding: 14px 12px; }
.msn-trash > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.msn-trash > summary::-webkit-details-marker { display: none; }
.msn-trash > summary .card-title { margin: 0; }
.msn-trash > summary::after { content: "▾"; margin-inline-start: auto; color: var(--text-tertiary); transition: transform .15s; }
.msn-trash:not([open]) > summary::after { transform: rotate(-90deg); }
.msn-trash[open] > summary { margin-bottom: 8px; }
.msn-trash-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 0; border-top: 1px solid var(--border-subtle); }
.msn-trash-info { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.msn-trash-act { display: flex; flex-wrap: wrap; gap: 6px; }
/* ==== end maps ==== */

/* ==== overview ==== */
/* ==== end overview ==== */

/* ==== live ==== */
/* Logs — search marks, the empty / waiting placeholder, footer. */
.logs-toolbar label:has(> input.switch) { margin: 0; }
.logs-pause[aria-pressed="true"] { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.log-pane mark { background: var(--warn); color: var(--terminal-bg); border-radius: 2px; }
.log-pane.is-empty { display: grid; place-items: center; }
.log-pane.is-empty::before {
  content: attr(data-empty); max-width: 440px; padding: 0 16px; text-align: center; white-space: normal;
  font: 13px/1.55 "Inter", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  color: var(--terminal-text); opacity: .6;
}
.logs-foot { display: flex; justify-content: space-between; gap: 4px 14px; flex-wrap: wrap; margin-top: 8px; }
.logs-foot .hint { margin: 0; }

/* Players, bans, whitelist, leaderboard on a phone: secondary columns hide and
   a line under the name carries their values (the Events table's pattern), so
   the row's actions never sit in a sideways scroll. */
td .pl-sub { display: none; }
@media (max-width: 640px) {
  .pl-hide-sm { display: none; }
  td .pl-sub { display: block; margin: 3px 0 0; font-size: 11.5px; }
  main .table-scroll table td.pl-name { white-space: normal; }
}

/* A tab strip wider than the screen fades out at the edge that hides more
   tabs (players.js stripFades sets the classes). */
.section-tabs.tabs-fade-end { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
.section-tabs.tabs-fade-start { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent); }
.section-tabs.tabs-fade-start.tabs-fade-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
[dir=rtl] .section-tabs.tabs-fade-end:not(.tabs-fade-start) { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent); }
[dir=rtl] .section-tabs.tabs-fade-start:not(.tabs-fade-end) { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }

/* Log rows (admin log, kill feed, dashboard strip) on a phone: the row wraps
   and its details / chat text take their own line under the names, like
   .chat-line; the list grows with the page instead of scrolling inside it. */
@media (max-width: 600px) {
  .adm-row { flex-wrap: wrap; row-gap: 3px; }
  .adm-row > .adm-meta:last-child:not(.adm-source), .adm-row > .adm-msg { flex-basis: 100%; padding-inline-start: 68px; }
  .adm-list { max-height: none; }
}

/* Kill feed — All / PvP / Other deaths chips. */
.kf-kinds { margin: 0; }
.kf-kinds .pill { cursor: pointer; }
.kf-kinds .pill.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* Whitelist — the short ID's copy button. */
.id-cell .icon-btn { margin-inline-start: 6px; vertical-align: middle; }

/* Leaderboard — metrics as section tabs, ⓘ and the banned switch on one line. */
.lb-head { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin-bottom: 12px; }
.lb-head .section-tabs { margin: 0; flex-wrap: wrap; }
.lb-head .grow { flex: 1; }
.lb-head label:has(> input.switch) { margin: 0; }
.lb-note { margin: -4px 0 8px; }
.lb-star { color: var(--warn); margin-inline-start: 6px; }
.lb-banned { margin-inline-start: 6px; }

/* Section tabs drawn as <button>s (leaderboard metrics, chat Live / Archive):
   no button chrome, like the Players tabs. */
.btn-tabs .section-tab { border: 0; background: transparent; cursor: pointer; font: inherit; font-weight: 600; font-size: 13px; }
.btn-tabs .section-tab.active { background: var(--accent-soft); }

/* Chat — quick messages under the reply box; next-step buttons in the feed. */
.chat-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.chat-presets-label { font-size: 12px; color: var(--text-tertiary); margin-inline-end: 2px; }
.chat-preset { display: inline-flex; align-items: stretch; max-width: 100%; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.chat-preset button { background: transparent; border: 0; border-radius: 0; padding: 4px 10px; font-size: 12.5px; }
.chat-preset .chat-preset-send { display: block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.chat-preset .chat-preset-send:not(:disabled):hover { background: var(--accent-soft); color: var(--accent); }
.chat-preset .chat-preset-x { padding: 4px 8px; color: var(--text-tertiary); border-inline-start: 1px solid var(--border); }
.chat-preset .chat-preset-x:hover { color: var(--error); background: transparent; }
.chat-feed .actions { margin-top: 6px; }

/* RCon — labelled access fields, the online summary, the Chat link and the
   console's command chips. */
.rcon-access-row { align-items: flex-end; }
.rcon-access-row .rcon-pass { flex: 1 1 220px; min-width: 0; }
.rcon-access-row .rcon-port { flex: 0 1 150px; }
.rcon-online { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rcon-online .grow { flex: 1; }
.rcon-online + .hint { margin-top: 8px; }
.rcon-chat-link { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rcon-chat-link .grow { flex: 1 1 220px; color: var(--text-secondary); font-size: 13px; }
.rcon-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.rcon-chips .hint { margin: 0 4px 0 0; }
.rcon-chips .pill { cursor: pointer; padding: 3px 10px; font-size: 12px; }

/* Players — the sort label stays with its select when the toolbar wraps. */
.players-sort { display: flex; align-items: center; gap: 6px; }
.players-sort label { margin: 0; }
@media (max-width: 600px) { .players-sort { flex: 1 1 100%; } .players-sort select { flex: 1; } }
/* Online now on a phone: Message / Kick / Ban may wrap instead of pushing
   the row off-screen. */
@media (max-width: 640px) { main .table-scroll .online-table td.row-actions { white-space: normal; } }
/* ==== end live ==== */

/* ==== config ==== */
/* Config profiles: what applying would change, and the scheduled swaps. */
.cfgp-diff { display: flex; flex-direction: column; margin: 4px 0 12px; }
.cfgp-diff-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 6px 0; border-top: 1px solid var(--border-subtle); }
.cfgp-diff-row:first-child { border-top: none; }
.cfgp-diff-key { flex: 0 0 200px; color: var(--text-secondary); font-size: 13px; }
.cfgp-diff-path { flex: 1 1 260px; min-width: 0; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px; word-break: break-all; }
.cfgp-diff-val { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; }
.cfgp-sched-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; padding: 6px 0; border-top: 1px solid var(--border-subtle); }
.card-title + .cfgp-sched-row { border-top: none; }
@media (max-width: 600px) {
  .profile-row { flex-wrap: wrap; }
  .profile-actions { flex-wrap: wrap; }
  .cfgp-diff-key { flex-basis: 100%; }
}
/* Files: where you are in the tree, and the open file. */
.files-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin-bottom: 8px; font-size: 13px; }
.files-crumb { background: none; border: none; padding: 2px 6px; border-radius: var(--radius-sm); color: var(--accent); font: inherit; cursor: pointer; }
.files-crumb:hover { background: var(--accent-soft); }
.files-crumb.current { color: var(--text); font-weight: 600; cursor: default; }
.files-crumb-sep { color: var(--text-tertiary); }
.files-path { word-break: break-all; margin-bottom: 6px; }
.files-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.files-totree { display: none; }
@media (max-width: 900px) {
  .files-totree { display: inline-flex; }
  .files-view .tree { max-height: 40dvh; }
}
/* ==== end config ==== */

/* Small phones: the top bar's buttons and the server switch must fit 360–400px
   (the theme button ended 5px past the edge, so every page scrolled sideways). */
@media (max-width: 440px) {
  .topbar { gap: 4px; padding: 0 8px; }
  .topbar .srv-switch { flex-shrink: 1; min-width: 0; }
  .topbar .srv-switch-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Mods: search + state chips above the table. */
.mods-find input[type=search] { flex: 0 1 260px; min-width: 160px; }
.mods-chips { margin: 0; }
.mods-chips .pill { cursor: pointer; }
.mods-chips .pill.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
@media (max-width: 600px) { .mods-find input[type=search] { flex: 1 1 100%; } }

/* Guide: a way back to the contents on the long page, next-chapter links,
   tap-to-zoom screenshots; Guide and Sponsors end with their own support call. */
body.no-support-footer .support-footer { display: none; }
.guide-to-top { position: fixed; inset-inline-end: 22px; bottom: 22px; z-index: 30; border-radius: 999px; padding: 9px 16px;
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); box-shadow: var(--shadow); font-weight: 600; }
.guide-to-top:hover { border-color: var(--accent); color: var(--accent); }
.guide-to-top[hidden] { display: none; }
button.link-btn.guide-next { margin-top: 14px; }
.guide-shot img { cursor: zoom-in; }
.guide-zoom { display: block; width: 100%; height: auto; border-radius: var(--radius); }
@media (max-width: 640px) {
  .guide-toc { grid-template-columns: 1fr 1fr; }
  .guide-to-top { bottom: 14px; inset-inline-end: 14px; }
}

/* Servers: one-line folder with an open button; the two add modes share the
   row on phones instead of hiding the second one off-screen. */
.srv-dir-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.srv-dir-line .srv-dir { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
.srv-dir-line .btn-reveal.icon-only { width: 28px; height: 28px; flex: 0 0 auto; }
.srv-add-tabs .section-tab { flex: 1 1 0; justify-content: center; text-align: center; white-space: normal; }

/* ---- Mods → Direct download (SteamCMD) ---- */
.wsdl-body { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.wsdl-step { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-soft); }
.wsdl-step.ok { border-inline-start: 3px solid var(--ok); }
.wsdl-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; background: var(--surface-2); color: var(--text-secondary); }
.wsdl-step.ok .wsdl-n { background: var(--ok); color: #fff; }
.wsdl-step-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.wsdl-step-title { font-weight: 700; font-size: 14px; }
.wsdl-step-main > .hint, .wsdl-step-main > p { margin: 0; }
.wsdl-step-main > textarea { min-height: 0; height: 78px; resize: vertical; }
.wsdl-row { gap: 8px; flex-wrap: wrap; align-items: center; }
.wsdl-row input[type=text], .wsdl-row input[type=password] { flex: 1 1 180px; width: auto; }
input.wsdl-code { flex: 0 1 170px; letter-spacing: .15em; }
.wsdl-signed { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13.5px; }
.wsdl-progress { font-size: 13px; color: var(--accent); display: flex; align-items: center; gap: 8px; }
.wsdl-progress::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--accent-soft-2);
  border-top-color: var(--accent); animation: wsdl-spin .8s linear infinite; }
@keyframes wsdl-spin { to { transform: rotate(360deg); } }
.wsdl-list { display: flex; flex-direction: column; max-height: 320px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.wsdl-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--border-subtle); cursor: pointer; }
.wsdl-item:last-child { border-bottom: none; }
.wsdl-item.bad { opacity: .6; cursor: default; }
.wsdl-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wsdl-item-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsdl-job { display: flex; flex-direction: column; gap: 8px; }
.wsdl-job-row { display: grid; grid-template-columns: minmax(140px, 1.2fr) minmax(160px, 1fr) 140px auto 26px; gap: 10px; align-items: center; font-size: 13px; }
.wsdl-job-row.gone .wsdl-job-state { color: var(--warn); }
.wsdl-job-row > button.small { justify-self: start; }
.wsdl-job-foot { display: flex; align-items: center; margin-top: 4px; }
.wsdl-job-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.wsdl-job-row.error .wsdl-job-state { color: var(--error); }
.wsdl-job-row.done .wsdl-job-state { color: var(--ok); }
.wsdl-log { font-size: 11px; max-height: 90px; overflow: auto; margin: 0; padding: 8px; background: var(--terminal-bg);
  color: var(--terminal-text); border-radius: var(--radius-sm); white-space: pre-wrap; }
@media (max-width: 720px) { .wsdl-job-row { grid-template-columns: 1fr; } }

/* ==== map tools: ruler, admin markers (maptools.js) ==== */
.gm-zbtn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.gm-tool-btn svg { display: block; }
.game-map.gm-measuring, .game-map.gm-placing { cursor: crosshair; }
/* In a tool mode the page's points and the markers let clicks through to the map. */
.game-map.gm-measuring .gm-layer, .game-map.gm-measuring .gm-markers,
.game-map.gm-placing .gm-layer, .game-map.gm-placing .gm-markers { pointer-events: none; }
.gm-ruler { pointer-events: none; }
.gm-ruler-casing { fill: none; stroke: rgba(0, 0, 0, .55); stroke-width: 5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.gm-ruler-line { fill: none; stroke: #ffd23f; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.gm-ruler-pt { fill: #ffd23f; stroke: #151515; stroke-width: 1.5; }
.gm-ruler-pt.first { fill: #fff; }
.gm-ruler-label { font-size: 12px; font-weight: 700; fill: #fff; paint-order: stroke; stroke: #151515; stroke-width: 3px; stroke-linejoin: round; }
.gm-toolbox {
  position: absolute; top: 8px; inset-inline-start: 8px; z-index: 4; max-width: min(340px, calc(100% - 64px));
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); padding: 8px 10px; font-size: 13px;
}
.gm-toolbox[hidden] { display: none; }
.gm-toolbox-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gm-toolbox-icon { color: var(--accent); display: inline-flex; }
.gm-ruler-total { font-size: 15px; font-variant-numeric: tabular-nums; }
.gm-toolbox p.hint { margin: 4px 0 8px; font-size: 12px; }
.gm-toolbox-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.gm-place-hint { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gm-mk { cursor: pointer; }
.gm-mk-pin { stroke: #fff; stroke-width: 1.5; fill: #e5484d; }
.gm-mk-dot { fill: #fff; }
.gm-mk-label { font-size: 12px; font-weight: 700; fill: #fff; paint-order: stroke; stroke: rgba(0, 0, 0, .78); stroke-width: 3px; stroke-linejoin: round; }
.gm-mk-orange .gm-mk-pin { fill: #f76b15; }
.gm-mk-yellow .gm-mk-pin { fill: #e8b500; }
.gm-mk-green .gm-mk-pin { fill: #30a46c; }
.gm-mk-blue .gm-mk-pin { fill: #0b84f3; }
.gm-mk-purple .gm-mk-pin { fill: #8e4ec6; }
.mk-red { background: #e5484d; }
.mk-orange { background: #f76b15; }
.mk-yellow { background: #e8b500; }
.mk-green { background: #30a46c; }
.mk-blue { background: #0b84f3; }
.mk-purple { background: #8e4ec6; }
.gm-mk-panel { width: 260px; }
button.gm-mk-add { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 6px; }
button.gm-mk-add > span:first-child { display: inline-flex; }
.gm-mk-list { max-height: 230px; overflow: auto; margin-top: 4px; border-top: 1px solid var(--border-subtle); padding-top: 4px; }
.gm-mk-list .hint { font-size: 12px; margin: 4px 0 0; }
.gm-mk-row { display: flex; align-items: center; gap: 4px; }
button.gm-mk-go {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: none; border: none;
  padding: 5px 2px; text-align: start; color: var(--text); cursor: pointer; font-size: 13px; font-weight: 500;
}
button.gm-mk-go:hover .gm-mk-name { color: var(--accent); }
.gm-mk-swatch { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.gm-mk-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-mk-row .icon-btn { width: 26px; height: 26px; flex: none; }
.gm-mk-form { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 14px; align-items: center; margin-bottom: 12px; }
.gm-mk-form > label { margin: 0; }
.gm-mk-form textarea { min-height: 0; resize: vertical; font-family: inherit; font-size: 13.5px; }
.gm-mk-colors { display: flex; gap: 8px; flex-wrap: wrap; }
button.gm-mk-color { width: 26px; height: 26px; min-width: 0; border-radius: 50%; border: 2px solid var(--surface); padding: 0; cursor: pointer; box-shadow: 0 0 0 1px var(--border-strong); }
button.gm-mk-color.on { box-shadow: 0 0 0 2px var(--text); }
.gm-mk-where { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.gm-mk-changed { margin: 0 0 10px; font-size: 12px; }
@media (max-width: 560px) { .gm-mk-form { grid-template-columns: 1fr; gap: 6px; } }

/* Live map trails: where each player went before the dot. */
.live-trail { fill: none; stroke: #7cc8f8; stroke-width: 2; stroke-opacity: .75; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; stroke-linejoin: round; pointer-events: none; }
.live-trail.focus { stroke: var(--accent); stroke-opacity: 1; stroke-width: 2.5; }
.live-trail-pt { fill: #7cc8f8; opacity: .8; pointer-events: none; }
.live-trail-pt.focus { fill: var(--accent); opacity: 1; }
.live-trail-swatch { width: 18px; height: 0; border-top: 2px dashed #7cc8f8; display: inline-block; }

/* Heatmap: base building next to the deaths. */
.map-legends { display: flex; flex-direction: column; gap: 6px; margin: -2px 0 10px; }
.map-leg-title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); min-width: 70px; align-self: center; }
.map-dot-build { background: #3b82f6; border-radius: 2px; }
.map-dot-raid { background: #c026d3; border-radius: 1px; transform: rotate(45deg) scale(.85); }
.map-dot-stash { background: #b7791f; border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.heat-b { cursor: pointer; stroke: rgba(255, 255, 255, .85); stroke-width: .8; }
.heat-build { fill: #3b82f6; fill-opacity: .8; }
.heat-raid { fill: #c026d3; fill-opacity: .85; }
.heat-stash { fill: #b7791f; fill-opacity: .85; }

/* Players: server-wide actions over the online list, same-address hint. */
.online-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; }
.online-lock { margin-inline-start: 4px; }
.profile-sameip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; }
.profile-sameip .link-btn { padding: 2px 0; }

/* Admin log: base-building lines. */
.adm-type.adm-base-build { background: rgba(59, 130, 246, .16); color: #3b82f6; }
.adm-type.adm-base-raid { background: rgba(192, 38, 211, .16); color: #c026d3; }
.adm-type.adm-base-stash { background: rgba(183, 121, 31, .18); color: #b7791f; }
/* Phones: a legend group's title on its own line. */
@media (max-width: 560px) { .map-leg-title { flex-basis: 100%; } }

/* Manager health notices on the dashboard (lifecycle.go). */
.mgr-notices:empty { display: none; }
.mgr-notice { border-inline-start: 3px solid var(--warn); }
.mgr-notice.is-crash { border-inline-start-color: var(--error); }
.mgr-notice-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mgr-notice-icon { display: inline-flex; color: var(--warn); }
.mgr-notice.is-crash .mgr-notice-icon { color: var(--error); }
.mgr-notice p { margin: 0 0 8px; }
.mgr-notice-tips { margin: 0 0 8px; padding-inline-start: 20px; font-size: 13px; color: var(--text-secondary); }
.mgr-notice-tips li { margin: 3px 0; }
.mgr-restarted { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; color: var(--ok); font-weight: 600; font-size: 13px; }
.mgr-fault { margin: 0 0 6px; overflow-wrap: anywhere; }
.mgr-crash-log { max-height: 260px; overflow: auto; font-size: 11.5px; background: var(--terminal-bg); color: var(--terminal-text); padding: 10px; border-radius: var(--radius-sm); white-space: pre-wrap; margin: 8px 0; }
.mgr-notice-x { width: 28px; height: 28px; flex: none; }
.awake-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.awake-row > label { margin: 0; }
.awake-row > select { flex: 0 1 340px; }

/* Mods: the Steam Workshop source. */
.mods-ws-tip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.info-bar.source-ws { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.wsdl-progress.done::before { display: none; }

/* Vehicles: parts & cargo per variant; the panel's own mod on the Mods page. */
.veh-parts-cell { white-space: nowrap; }
.veh-parts-cell .badge { vertical-align: middle; }
.veh-attach-btn { width: 26px; height: 26px; margin-inline-start: 6px; vertical-align: middle; }
tr.mod-managed td { background: color-mix(in srgb, var(--accent) 5%, transparent); }

/* Mods: a mod loaded both ways (-mod and -serverMod). */
.mods-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mods-both[hidden] { display: none; }
/* Direct download: why an item is on the list. */
.wsdl-item-note { display: block; font-size: 12px; color: var(--text-secondary); }
.wsdl-item.needed .wsdl-item-note:first-of-type { color: var(--warn); }
.wsdl-col { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Vehicles: what the numbers do. */
.veh-count { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 2px; padding: 9px 11px; border-radius: var(--radius-sm);
  background: var(--surface-2); font-size: 12.5px; }
.veh-count-main { color: var(--text); }
.veh-count-warn { color: var(--warn); font-weight: 600; }
.veh-count-persist { margin: 0; font-size: 12px; }

/* Wipe: everything, or the world only. */
.wipe-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 12px 0 4px; }
.wipe-mode { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 0;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.wipe-mode:has(input:checked) { border-color: var(--error); background: var(--error-soft); }
.wipe-mode-ico { color: var(--text-secondary); display: inline-flex; }
.wipe-mode-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wipe-mode-main .hint { margin: 0; font-size: 12px; }
.wipe-mode-size { font-size: 12px; color: var(--text-secondary); }
.wipe-world-tag { margin-inline-start: 8px; }

/* Contaminated zones. */
.zones-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 14px; align-items: start; }
.zones-mapcard { margin: 0; }
.zones-side { margin: 0; position: sticky; top: 12px; max-height: calc(100vh - 40px); overflow: auto; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.seg-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 0; background: transparent; padding: 6px 11px; font-size: 12.5px; }
.seg-btn + .seg-btn { border-inline-start: 1px solid var(--border); }
.seg-btn.active { background: var(--accent); color: #fff; }
.zones-map[data-mode="zone"], .zones-map[data-mode="safe"] { cursor: crosshair; }
.zone-c { fill: color-mix(in srgb, #a3c93a 28%, transparent); stroke: #8db32a; stroke-width: 1.4; vector-effect: non-scaling-stroke; cursor: move; }
.zone-g.other .zone-c { fill: color-mix(in srgb, var(--info) 22%, transparent); stroke: var(--info); }
.zone-g.sel .zone-c { stroke: var(--warn); stroke-width: 2.4; fill: color-mix(in srgb, #a3c93a 40%, transparent); }
.zone-centre { fill: #6f8f17; stroke: #fff; stroke-width: 1.2; vector-effect: non-scaling-stroke; cursor: move; }
.zone-g.sel .zone-centre { fill: var(--warn); }
.zone-label { fill: var(--text); paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; font-weight: 600; pointer-events: none; }
.zone-handle { fill: var(--warn); stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; cursor: ew-resize; }
.zone-safe-m { fill: var(--ok); stroke: #fff; stroke-width: 1.2; vector-effect: non-scaling-stroke; cursor: move; }
.zone-dyn-c { fill: color-mix(in srgb, #9b6bd6 12%, transparent); stroke: #9b6bd6; stroke-width: 1.2; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.zone-dyn-dot { fill: #9b6bd6; pointer-events: none; }
.zones-side h3 { margin-top: 0; }
.zones-side-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.zones-list { display: flex; flex-direction: column; gap: 4px; }
.zones-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: start; padding: 7px 9px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface); }
.zones-item:hover { border-color: var(--accent); }
.zones-item .grow { display: flex; flex-direction: column; min-width: 0; }
.zones-item small { font-size: 11px; }
.zones-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: #a3c93a; border: 2px solid #8db32a; }
.zones-item.other .zones-dot { background: var(--info); border-color: var(--info); }
.zones-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.zones-form > .zones-field:first-child, .zones-form .zones-type, .zones-form .zones-field.wide,
.zones-form > .zones-field:has(.zones-radius), .zones-xyz { grid-column: 1 / -1; }
.zones-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.zones-field label { margin: 0; font-size: 12px; color: var(--text-secondary); }
.zones-field small { font-size: 11px; margin: 0; }
.zones-radius { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 8px; align-items: center; }
.zones-xyz { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.zones-more { margin-top: 10px; }
.zones-more summary { cursor: pointer; font-size: 12.5px; color: var(--text-secondary); margin-bottom: 8px; }
.zones-dyn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 8px 0; }
input.zones-num { width: 90px; }
.zones-loot-add { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.zones-loot-add input[type=text] { flex: 1 1 220px; width: auto; }
tr.zones-added td { background: color-mix(in srgb, var(--ok) 8%, transparent); }
@media (max-width: 980px) {
  .zones-layout { grid-template-columns: 1fr; }
  .zones-side { position: static; max-height: none; }
}

/* A map drawn from the world's own files (terrainmap.go): dark labels with a
   light halo over the light topographic picture. */
.game-map.gm-has-terrain .gm-town-label { fill: #1d2531; paint-order: stroke;
  stroke: rgba(255, 255, 255, .9); stroke-width: 2.6px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.game-map.gm-has-terrain .gm-marks.gm-lod-in .gm-tier-minor .gm-town-label { display: inline; }
.game-map.gm-has-terrain .gm-city { fill: #ffffff; stroke: #3b3226; }
.game-map.gm-has-terrain .gm-town { fill: #ffffff; stroke: #4b4234; stroke-width: .7; }
.game-map.gm-has-terrain .gm-poi { stroke: #6b5a3c; }
.game-map.gm-has-terrain .gm-grid { stroke: #4b5563; stroke-opacity: .28; }
.game-map.gm-has-terrain .gm-axis { fill: #3d4652; paint-order: stroke; stroke: rgba(255, 255, 255, .8); stroke-width: 2px; }
.gm-capital-label { font-size: 13.5px; font-weight: 800; letter-spacing: .02em; }
.gm-hill { fill: #8a6a3e; stroke: #fff; stroke-width: .5; vector-effect: non-scaling-stroke; }
.game-map .gm-hill-label { font-style: italic; font-weight: 500; font-size: 8.5px; }
.game-map.gm-has-terrain .gm-hill-label { fill: #5b4325; }
.game-map .gm-sea-label { font-style: italic; font-weight: 600; letter-spacing: .08em; }
.game-map.gm-has-terrain .gm-sea-label { fill: #24557f; }
/* Hills, bays and landmarks appear one zoom step after the villages. */
.gm-tier-detail .gm-town-label { display: none; }
.game-map .gm-marks:not(.gm-lod-in) .gm-tier-detail { display: none; }
.game-map.gm-has-terrain .gm-marks.gm-lod-in2 .gm-tier-detail .gm-town-label { display: inline; }
.sw-names { background: #ffffff; border-color: #1d2531; position: relative; }
.sw-names::after { content: "A"; position: absolute; inset: 0; font-size: 10px; font-weight: 800; line-height: 12px; text-align: center; color: #1d2531; }
.gm-terrain-ctl { display: grid; gap: 4px; justify-items: start; margin-bottom: 8px; }
.gm-terrain-ctl .hint { font-size: 11px; margin: 0; }
.gm-terrain-note {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 4;
  max-width: calc(100% - 100px); padding: 6px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow); font-size: 12.5px; color: var(--text); backdrop-filter: blur(4px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gm-terrain-note::before {
  content: ""; display: inline-block; width: 9px; height: 9px; margin-inline-end: 8px; border-radius: 50%;
  border: 2px solid var(--accent); border-top-color: transparent; vertical-align: -1px; animation: spin .9s linear infinite;
}

/* Server page pictures (visuals.js srvVisuals): the switches they stand for
   are hidden, their fields stay the source of truth. */
.cfg-hidden { display: none !important; }
.srv-vis { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px 18px; margin: 2px 0 16px; }
.srv-vis-item { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.srv-vis-label { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 12.5px; font-weight: 650; color: var(--text-secondary); }
.srv-vis .gp-night { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.srv-vis .srv-vis-night { grid-column: 1 / -1; }
.srv-vis .srv-vis-night .gp-night { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.srv-vis .gl-vis-tile { max-width: 440px; }
@media (max-width: 900px) { .srv-vis .srv-vis-night .gp-night { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .srv-vis { grid-template-columns: minmax(0, 1fr); } }

/* Gameplay: the year's temperatures and the sprint time (visuals.js). */
.gp2-temps-wrap { display: grid; gap: 10px; }
.gp-temps { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px 4px; background: var(--surface-2); }
.gp-temps-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.gp-temps-leg { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 12px; }
.gp-temps-leg i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.gp-temps-leg i.hi { background: #f08a3c; }
.gp-temps-leg i.lo { background: #4aa3df; }
.gp-temps-svg { display: block; width: 100%; height: auto; }
.gpt-grid { stroke: var(--border); stroke-width: 1; }
.gpt-grid.zero { stroke: var(--text-tertiary); stroke-dasharray: 4 3; }
.gpt-ax { fill: var(--text-tertiary); font-size: 11px; }
.gpt-band { fill: rgba(240, 138, 60, .13); }
.gpt-hi, .gpt-lo { fill: none; stroke-width: 2.2; stroke-linejoin: round; }
.gpt-hi { stroke: #f08a3c; }
.gpt-lo { stroke: #4aa3df; }
.gpt-dot-hi { fill: #f08a3c; }
.gpt-dot-lo { fill: #4aa3df; }
.gp-stam { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface-2); display: grid; gap: 7px; margin-bottom: 12px; max-width: 560px; }
.gp-stam-head { font-size: 13px; }
.gp-stam-row { display: grid; grid-template-columns: minmax(70px, 110px) 1fr minmax(52px, auto); align-items: center; gap: 10px; font-size: 12.5px; }
.gp-stam-kg { color: var(--text-secondary); }
.gp-stam-bar { height: 10px; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.gp-stam-bar i { display: block; height: 100%; background: linear-gradient(90deg, #3ecf8e, #a3d65c); border-radius: 6px; }
.gp-stam-s { text-align: end; font-variant-numeric: tabular-nums; }
.gp-stam .hint { margin: 2px 0 0; font-size: 12px; }
.srv-vis .srv-vis-wide { grid-column: span 2; }
.srv-vis .srv-vis-wide .gp-night { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .srv-vis .srv-vis-wide { grid-column: 1 / -1; } }
@media (max-width: 520px) { .srv-vis .srv-vis-wide .gp-night { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.map-thumb-img { width: 100%; height: 100%; display: block; object-fit: cover; }