/* Warchief · control surface
   Same class contract as the current stylesheet; different visual system.

   What changed and why:
   - No gradients on surfaces. Every panel was linear-gradient(180deg, …); flat fills with one
     hairline border read as deliberate, gradients read as decoration.
   - One accent, used only for primary action and active state. Status colour is reserved for status.
   - Weight 500/600 instead of 700/800 everywhere. When everything is bold, nothing is.
   - Uppercase + letter-spacing kept for micro-labels only, not for buttons and tabs.
   - Denser: this is an ops console, not a marketing page.
   - Light and dark, because dark-only is its own kind of default. */

/* light-dark() resolves against the element's own color-scheme, so the explicit Light/Dark toggle has to
   drive it. Without these the palettes follow the OS only, and choosing Light on a dark machine leaves
   every palette resolving to its dark half. Specificity (0,1,1) beats the bare :root below, so order here
   does not matter · but they belong at the top where the scheme is established. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

:root,
[data-palette="ember"] {
  color-scheme: light dark;

  --ground:     #f7f7f8;
  --surface:    #ffffff;
  --surface-2:  #f2f2f4;
  --line:       #e3e3e7;
  --line-strong:#d3d3d9;

  --ink:        #17171a;
  --ink-2:      #56565e;
  --ink-3:      #8a8a94;

  --accent:     #b4441f;
  --accent-ink: #ffffff;
  --accent-wash:#fdf0ea;
  --accent-line:#f0c4b0;

  --ok:    #1f7a4d;
  --warn:  #9a6b0a;
  --bad:   #b0342c;
  --ok-wash:   #eaf5ef;
  --warn-wash: #fbf3e2;
  --bad-wash:  #fbedec;

  --console:    #fbfbfc;

  --r:    6px;
  --r-sm: 4px;

  --ui:   "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --sidebar-w: 216px;

  /* ── ELEVATION ──────────────────────────────────────────────────────────────────────────────────
     Three steps, and only three. The stylesheet's first rule is that surfaces are flat, and that
     still holds: these are for things that genuinely float above the page · popovers, modals, a
     sticky header proving it has content scrolled under it. A panel never gets one.
     Tuned low and wide rather than dark and tight; a shadow you can point at is too strong. */
  --lift-1: 0 1px 2px rgba(16,16,20,.05);
  --lift-2: 0 4px 12px rgba(16,16,20,.08), 0 1px 3px rgba(16,16,20,.05);
  --lift-3: 0 16px 40px rgba(16,16,20,.14), 0 2px 8px rgba(16,16,20,.06);

  /* ── MOTION ─────────────────────────────────────────────────────────────────────────────────────
     One duration and one curve, so nothing in the interface moves at a speed nothing else moves at.
     140ms is below the threshold where a transition reads as waiting. The curve settles without
     overshoot · an ops console should not bounce. */
  --ease: cubic-bezier(.2, 0, 0, 1);
  --dur: 140ms;

  /* Focus is a RING, never a glow, and never a colour change alone: colour alone is invisible to
     anyone who cannot distinguish it, and a glow bleeds into neighbouring controls in a dense layout. */
  --focus: 0 0 0 3px var(--accent-wash), 0 0 0 1px var(--accent);
}

:root:not([data-theme="light"]):not([data-palette]),
:root:not([data-theme="light"])[data-palette="ember"] {
  @media (prefers-color-scheme: dark) {
    --ground:     #0c0c0e;
    --surface:    #131316;
    --surface-2:  #1a1a1e;
    --line:       #24242a;
    --line-strong:#33333b;

    --ink:        #ededf0;
    --ink-2:      #a1a1ab;
    --ink-3:      #6c6c77;

    --accent:     #e0653a;
    --accent-ink: #1a0d07;
    --accent-wash:#2a1710;
    --accent-line:#5a2e1c;

    --ok:    #4ec98a;
    --warn:  #e0b155;
    --bad:   #ef7c72;
    --ok-wash:   #12241a;
    --warn-wash: #262013;
    --bad-wash:  #2a1614;

    --console:    #0a0a0c;
  }
}

:root[data-theme="dark"]:not([data-palette]),
:root[data-theme="dark"][data-palette="ember"] {
  --ground: #0c0c0e; --surface: #131316; --surface-2: #1a1a1e;
  --line: #24242a; --line-strong: #33333b;
  --ink: #ededf0; --ink-2: #a1a1ab; --ink-3: #6c6c77;
  --accent: #e0653a; --accent-ink: #1a0d07; --accent-wash: #2a1710; --accent-line: #5a2e1c;
  --ok: #4ec98a; --warn: #e0b155; --bad: #ef7c72;
  --ok-wash: #12241a; --warn-wash: #262013; --bad-wash: #2a1614;
  --console: #0a0a0c;
}

/* Status colours follow the mode for every palette; a named palette owns its surfaces and accent,
   but a warning is a warning in every skin. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ok: #4ec98a; --warn: #e0b155; --bad: #ef7c72;
    --ok-wash: #12241a; --warn-wash: #262013; --bad-wash: #2a1614;
  }
}
:root[data-theme="dark"] {
  --ok: #4ec98a; --warn: #e0b155; --bad: #ef7c72;
  --ok-wash: #12241a; --warn-wash: #262013; --bad-wash: #2a1614;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

.hidden { display: none !important; }

/* ── shell ───────────────────────────────────────────────────────────────── */
.app { display: none; min-height: 100vh; }
.app.active { display: grid; grid-template-columns: var(--sidebar-w) 1fr; }

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 14px 10px;
  display: flex; flex-direction: column; gap: 18px;
  position: sticky; top: 0; height: 100vh;
}

.side-brand {
  display: flex; align-items: center; gap: 9px; padding: 5px 6px;
  width: 100%; border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.side-brand:hover { background: var(--surface-2); }
.side-brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.brand-mark {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  color: var(--accent); font-weight: 600; font-size: 13px;
}
/* The mark is an inline SVG carrying hardcoded lime fills from the old theme. Presentation
   attributes lose to any CSS rule, so re-point them at currentColor and the mark follows
   whichever palette is active instead of staying the one colour it was drawn in. */
.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand-mark svg [stroke]:not([stroke="none"]) { stroke: currentColor; }
.brand-mark svg [fill]:not([fill="none"]) { fill: currentColor; }
.side-brand-name { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.side-brand-sub  { font-size: 11px; color: var(--ink-3); margin-top: -2px; }

.side-nav { display: flex; flex-direction: column; gap: 1px; }
.nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px;
  border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-2);
  font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; text-align: left; width: 100%;
}
.nav-item:hover { background: var(--surface-2); color: var(--ink); }
.nav-item.active { background: var(--surface-2); color: var(--ink); font-weight: 600; }
.nav-item.active::before {
  content: ""; width: 2px; height: 14px; margin-left: -9px; margin-right: 7px;
  background: var(--accent); border-radius: 2px;
}
.side-spacer { flex: 1; }

.side-conn { display: flex; align-items: center; gap: 7px; padding: 8px 9px; font-size: 12px; color: var(--ink-2); }
.conn-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bad); flex: none; }
.conn-dot.off { background: var(--bad); }
.conn-dot.on { background: var(--ok); }

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

.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px; height: 52px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  position: sticky; top: 0; z-index: 5;
}
.page-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.topbar-spacer { flex: 1; }
.content { padding: 20px; display: flex; flex-direction: column; gap: 16px; }

/* ── panels ──────────────────────────────────────────────────────────────── */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.panel-title { font-size: 13px; font-weight: 600; }
.panel-sub { font-size: 12px; color: var(--ink-3); margin-top: -8px; }

/* The modules take the room and the console takes the rest. The old 360px left rail forced a single
   file of cards down a tall page while two thirds of the width sat empty; the list is a grid now, so
   the column has to be able to hold more than one of them. */
.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 42%); gap: 14px; align-items: start; }
@media (max-width: 1100px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── THE READOUT ──────────────────────────────────────────────────────────────────────────────────
   One bar, divided · not fourteen bordered pills. Pills gave every figure its own box and its own
   border, which is fourteen frames competing with the numbers inside them; a single ruled strip reads
   as one instrument. The numbers are the content, so they are the only thing at full contrast, set in
   tabular figures so a column of them does not shift as it ticks.

   (What was here before had the label at 5px and the value at 7.5px · below the size at which a
   figure can be read at all, let alone glanced at. Restored to a readable scale.) */
.status-strip {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.stat-card {
  position: relative;
  /* The strip holds <div> cells and <button> cells side by side (a pin, an event placing). Without
     this the buttons keep the browser's own border and read as boxes inside a bar that has none. */
  border: 0;
  padding: 9px 12px;
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0;
  box-shadow: inset 1px 0 0 var(--line);
}
.stat-card:first-child { box-shadow: none; }
.stat-label {
  font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stat-value {
  font-size: 16px; font-weight: 600; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stat-value.accent { color: var(--accent); }
.stat-card .delta { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.stat-card .delta.up { color: var(--ok); }
.stat-card .delta.down { color: var(--bad); }

/* ── controls ────────────────────────────────────────────────────────────── */
.btn {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  padding: 6px 12px;
  border-radius: var(--r-sm);
  font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer;
}
.btn:hover { background: var(--surface-2); }
.btn-sm { padding: 4px 9px; font-size: 12px; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn-primary:hover { filter: brightness(1.06); background: var(--accent); }
.btn-danger-ghost { color: var(--bad); border-color: var(--line-strong); background: transparent; }
.btn-danger-ghost:hover { background: var(--bad-wash); }

.input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 7px 10px;
  color: var(--ink);
  font: inherit; font-size: 13px;
}
.input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.input:read-only { background: var(--surface-2); color: var(--ink-2); cursor: not-allowed; }
/* Searchable selects use a read-only text face intentionally: the value is chosen from the popup below,
   not typed into the face. It is still an interactive control, so do not show the unavailable cursor on
   castle, template, troop, tool or package pickers. */
.ssel .ssel-val:read-only { cursor: pointer; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field > label { font-size: 12px; font-weight: 500; color: var(--ink-2); }
.hint { font-size: 11.5px; color: var(--ink-3); }
.password-control { position: relative; width: 100%; }
.password-control .input { padding-right: 42px; }
.password-toggle {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 30px; height: 30px; padding: 5px; border: 0; border-radius: 6px;
  display: grid; place-items: center; background: transparent; color: var(--ink-3); cursor: pointer;
}
.password-toggle:hover { background: var(--surface-2); color: var(--ink); }
.password-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.password-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.password-toggle .password-eye-slash { display: none; }
.password-toggle[aria-pressed="true"] .password-eye-slash { display: block; }

/* segmented control: a control, not a headline */
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 2px; gap: 2px; }
.seg-btn {
  padding: 5px 11px; border: 0; border-radius: 3px;
  background: transparent; color: var(--ink-2);
  font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
}
.seg-btn.active { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgb(0 0 0 / 0.06); }

/* switch */
.sw { position: relative; width: 36px; height: 20px; flex-shrink: 0; display: inline-block; }
.sw-track {
  position: absolute; inset: 0;
  background: var(--surface-2); border: 1px solid var(--line-strong);
  border-radius: 999px; cursor: pointer; transition: .15s;
}
.sw-track::before {
  content: ""; position: absolute; width: 14px; height: 14px; left: 2px; top: 2px;
  background: var(--ink-3); border-radius: 50%; transition: .15s;
}
.sw input:checked + .sw-track { background: var(--ok-wash); border-color: var(--ok); }
.sw input:checked + .sw-track::before { transform: translateX(16px); background: var(--ok); }
.sw input:disabled + .sw-track { opacity: .4; cursor: not-allowed; }
/* also honour a .on class, which the demo markup uses */
.sw.on .sw-track { background: var(--ok-wash); border-color: var(--ok); }
.sw.on .sw-track::before { transform: translateX(16px); background: var(--ok); }

/* ── status vocabulary ───────────────────────────────────────────────────── */
.tag, .chip, .run-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px; border-radius: 3px;
  font-size: 11.5px; font-weight: 500;
  background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--line);
}
.run-pill.on  { background: var(--ok-wash);   color: var(--ok);   border-color: transparent; }
.run-pill.off { background: var(--surface-2); color: var(--ink-3); }
.tag.warn { background: var(--warn-wash); color: var(--warn); border-color: transparent; }
.tag.bad  { background: var(--bad-wash);  color: var(--bad);  border-color: transparent; }

/* ── tables ──────────────────────────────────────────────────────────────── */
.acct-table { display: flex; flex-direction: column; gap: 8px; }
.inv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.inv-table th {
  text-align: left; padding: 7px 10px;
  font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-3); border-bottom: 1px solid var(--line);
}
.inv-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); }
.inv-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── MODULE ROWS ──────────────────────────────────────────────────────────────────────────────────
   A module is one line: what it is, whether it is running, and the two things you can do to it. It was
   a 60px card carrying a full-width button, stacked one per row down a narrow column · forty of those
   is a page you scroll rather than a list you scan. Now they tile, and the row is short enough that a
   whole category fits on one screen.

   State is said in words at the left AND shown by the switch at the right, because the switch alone is
   the one thing in this list that reads differently to someone who cannot separate the two colours. */
.bot-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(246px, 1fr));
  gap: 6px;
}
.bot-card {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 8px 11px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  min-width: 0;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.bot-card:hover { border-color: var(--line-strong); }
/* The running ones carry a solid edge rather than a filled background: a wash on every active card
   turns a list of twelve into a block of colour, and the edge is still visible at a glance. */
.bot-card.on { border-left: 2px solid var(--accent); padding-left: 10px; }
.bot-ico { width: 26px; height: 26px; border-radius: var(--r-sm); flex: none; object-fit: cover; }
.bot-ico-fallback {
  display: grid; place-items: center;
  background: var(--surface-2); color: var(--ink-3);
  font-size: 10px; font-weight: 600; letter-spacing: .02em;
}
.bot-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bot-name {
  font-size: 13px; font-weight: 500; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bot-state { font-size: 11px; color: var(--ink-3); }
.bot-card.on .bot-state { color: var(--accent); }
.bot-acts { display: flex; align-items: center; gap: 2px; flex: none; }
.bot-desc { font-size: 12px; color: var(--ink-3); line-height: 1.5; }

/* A control that is only an icon still has to be a target and still has to say what it is on focus. */
.icon-btn {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-3);
  cursor: pointer; padding: 0;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn:focus-visible { outline: 0; box-shadow: var(--focus); color: var(--ink); }

/* ── console ─────────────────────────────────────────────────────────────── */
.console-col {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  display: flex; flex-direction: column;
  /* Sticks and fills the viewport rather than ending where the module list happens to end. A log you
     have to scroll the PAGE to reach is a log nobody is watching, and the shorter the module list gets
     the more empty console frame there was underneath it. */
  position: sticky; top: 20px;
  height: calc(100vh - 40px); overflow: hidden;
}
@media (max-width: 1100px) { .console-col { position: static; height: 60vh; } }
.console-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 14px; border-bottom: 1px solid var(--line);
}
.console-title { font-size: 13px; font-weight: 600; }
.console-live-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ok); }
.console-body {
  background: var(--console);
  padding: 12px 14px;
  font-family: var(--mono); font-size: 12px; line-height: 1.55;
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
}
/* Time and level are a fixed gutter, so the messages line up as a column instead of starting at a
   different indent on every line · which is the difference between a log you can scan and one you
   have to read. `ch` because the font is monospaced and the widths are known: 5 for HH:MM, 7 for the
   longest level tag. */
.log-row { display: grid; grid-template-columns: 5ch 7ch minmax(0, 1fr); gap: 10px; align-items: baseline; }
.log-t { color: var(--ink-3); }
.log-tag { color: var(--ink-3); }
.log-m { color: var(--ink-2); overflow-wrap: anywhere; }
.log-row.lvl1 .log-m, .log-tag.lvl1 { color: var(--warn); }
.log-row.lvl2 .log-m, .log-tag.lvl2 { color: var(--bad); }
.console-empty { color: var(--ink-3); font-family: var(--ui); font-size: 12.5px; }

/* ── auth ────────────────────────────────────────────────────────────────── */
.auth-wrap {
  min-height: 100vh; padding: 24px; background: var(--ground);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
}
.auth-card {
  width: 100%; max-width: 340px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.auth-brand .brand-mark { width: 40px; height: 40px; }
.auth-brand h1 { font-size: 20px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
/* <em> splits the wordmark in two; it is a colour break, not emphasis. */
.auth-brand h1 em { font-style: normal; color: var(--accent); }
.auth-brand p { font-size: 12.5px; color: var(--ink-3); margin: 0; }
.auth-tabs { display: inline-flex; background: var(--surface-2); border-radius: var(--r-sm); padding: 2px; gap: 2px; }
.auth-tab {
  flex: 1; padding: 6px 10px; border: 0; border-radius: 3px; background: transparent;
  color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
}
.auth-tab.active { background: var(--surface); color: var(--ink); font-weight: 600; }
.auth-foot { font-size: 11.5px; color: var(--ink-3); text-align: center; }
.auth-disclaimer { margin: 14px 0 0; font-size: 11.5px; line-height: 1.55; opacity: .72; text-align: center; }
.auth-error { font-size: 12px; color: var(--bad); }

/* ── overlays ────────────────────────────────────────────────────────────── */
.overlay { position: fixed; inset: 0; background: rgb(0 0 0 / .38); display: none; place-items: center; padding: 20px; z-index: 1000; }
.overlay.active { display: grid; }
.sheet {
  width: 100%; max-width: 560px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 12px 32px rgb(0 0 0 / .18);
  display: flex; flex-direction: column; max-height: 86vh;
}
.sheet.narrow { max-width: 400px; }
/* Module settings are the widest form in the panel · ordered plans, chip lists and pickers that need
   a line of their own · and 560px squeezed all of them into a column narrower than the labels beside
   them. Wider, and taller, because scrolling a form to find the one field you came for is the cost. */
.sheet.sheet-wide { max-width: 720px; max-height: 90vh; }
.sheet-head { padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.sheet-body { padding: 16px; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.sheet-foot { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; }
.x-btn { margin-left: auto; border: 0; background: transparent; color: var(--ink-3); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 4px; }
.x-btn:hover { color: var(--ink); }

/* ── option rows ─────────────────────────────────────────────────────────── */
.opt-row { display: grid; grid-template-columns: 1fr 180px; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.opt-row:last-child { border-bottom: 0; }
.opt-name { font-size: 13px; font-weight: 500; }
.opt-desc { font-size: 11.5px; color: var(--ink-3); }
.opt-row-disabled { opacity: .55; }
.opt-row-disabled .input:disabled { cursor: not-allowed; }
.opt-ctl-wide { grid-column: 1 / -1; }

/* Crafter is one scheduler with three routes, so its route selector must make
   the distinction visible before a recipe is chosen. These are real buttons
   with radio semantics; the hidden value is still the ordinary config field. */
.opt-row:has(.crafting-mode) { grid-template-columns: 1fr; }
.opt-row:has(.crafting-mode) .opt-ctl { max-width: none; width: 100%; }
.crafting-mode-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
.crafting-mode-choice {
  min-height: 72px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink);
  padding: 10px 12px; text-align: left; font: inherit; cursor: pointer;
}
.crafting-mode-choice:hover { border-color: var(--line-strong); background: var(--surface-2); }
.crafting-mode-choice.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-wash); }
.crafting-mode-choice.is-off { opacity: .68; }
.crafting-mode-choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.crafting-mode-title { font-size: 13px; font-weight: 650; }
.crafting-mode-desc { color: var(--ink-3); font-size: 11.5px; line-height: 1.3; }
.crafting-mode-choice.active .crafting-mode-desc { color: var(--ink-2); }
.crafting-mode-state { color: var(--ok); font-size: 11px; font-weight: 650; }
.crafting-mode-choice.is-off .crafting-mode-state { color: var(--ink-3); }
.crafting-recipe { width: min(100%, 360px); }

.empty-note { color: var(--ink-3); font-size: 12.5px; padding: 12px 0; }
.kbd { font-family: var(--mono); font-size: 11px; border: 1px solid var(--line-strong); border-radius: 3px; padding: 1px 4px; color: var(--ink-2); }

/* ═══════════════════════════════════════════════════════════════════════════
   PALETTES · each overrides only the accent and the neutral temperature, so
   every component above inherits without knowing which one is active.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. GOLD · warm neutrals, struck-metal accent ─────────────────────────── */
[data-palette="gold"] {
  --ground: light-dark(#ecd8b2, #1a1207);
  --surface: light-dark(#fff7e4, #261b0c);
  --surface-2: light-dark(#e6cfa4, #332512);
  --line: light-dark(#d4b982, #4c3a1d);
  --line-strong: light-dark(#b99a5e, #644d28);
  --ink: light-dark(#2b2111, #f7ecd5);
  --ink-2: light-dark(#5f4d31, #cdbb98);
  --ink-3: light-dark(#8b7652, #9a8763);
  --accent: light-dark(#8a5a0a, #e0b45a);
  --accent-ink: light-dark(#fff8e6, #1b1305);
  --accent-wash: light-dark(#f4e2b8, #3a2a12);
  --accent-line: light-dark(#c9a252, #7a5c2a);
  --ok: light-dark(#2f7d52, #7fbf8f);
  --ok-wash: light-dark(#e3efe5, #1b2e22);
  --warn: light-dark(#8f6308, #e0b46a);
  --warn-wash: light-dark(#f7e8c8, #352a18);
  --bad: light-dark(#9a3b2f, #e28b80);
  --bad-wash: light-dark(#f6e0dc, #35201f);
  --console: light-dark(#1d170c, #100b05);
  --chrome: light-dark(#2a2213, #1b140a);
  --chrome-2: light-dark(#382d19, #261d10);
  --chrome-line: light-dark(#564324, #40311b);
  --chrome-ink: light-dark(#f8efdc, #f6ecd9);
  --chrome-muted: light-dark(#c0b08d, #b5a685);
}
/* ── 2. CHERRY · cool neutrals, deep fruit accent ─────────────────────────── */
[data-palette="cherry"] {
  --ground: light-dark(#f2d6db, #1c0a10);
  --surface: light-dark(#fff3f5, #2a1018);
  --surface-2: light-dark(#e9c3ca, #391521);
  --line: light-dark(#dbaab4, #5a2433);
  --line-strong: light-dark(#c28695, #743143);
  --ink: light-dark(#2c161b, #f7e6ea);
  --ink-2: light-dark(#63434a, #d0b1b8);
  --ink-3: light-dark(#936f77, #9d757e);
  --accent: light-dark(#9d1330, #d95c70);
  --accent-ink: light-dark(#ffffff, #1b0508);
  --accent-wash: light-dark(#f9dce2, #3a1420);
  --accent-line: light-dark(#e0a0ae, #7a2c3d);
  --ok: light-dark(#2f7a52, #7fbf8f);
  --ok-wash: light-dark(#e3efe5, #1b2e22);
  --warn: light-dark(#a06a16, #e0b46a);
  --warn-wash: light-dark(#f8ecd6, #352a18);
  --bad: light-dark(#b02a3c, #e28b80);
  --bad-wash: light-dark(#f9e2e4, #35201f);
  --console: light-dark(#221016, #12060a);
  --chrome: light-dark(#2a1218, #1e0a10);
  --chrome-2: light-dark(#3a1820, #2b1019);
  --chrome-line: light-dark(#5a2834, #4a2030);
  --chrome-ink: light-dark(#fbeef1, #f8e9ee);
  --chrome-muted: light-dark(#c9aab1, #c09fa8);
}
/* ── 3. CHOCOLATE · cocoa ground, caramel accent ──────────────────────────── */
[data-palette="chocolate"] {
  --ground: light-dark(#ead6bd, #1a0f08);
  --surface: light-dark(#fdf3e6, #28180d);
  --surface-2: light-dark(#e0c8a9, #362114);
  --line: light-dark(#d0b28f, #543522);
  --line-strong: light-dark(#b8946c, #6c4630);
  --ink: light-dark(#2b1d11, #f5e8d8);
  --ink-2: light-dark(#5f4a36, #cfb8a1);
  --ink-3: light-dark(#8e7459, #9f8065);
  --accent: light-dark(#7d4518, #d08a4a);
  --accent-ink: light-dark(#fff8f0, #1a0f05);
  --accent-wash: light-dark(#f3e0ca, #38230f);
  --accent-line: light-dark(#cfaa81, #744a27);
  --ok: light-dark(#3f7a4a, #7fbf8f);
  --ok-wash: light-dark(#e4efe4, #1b2e22);
  --warn: light-dark(#a06a1f, #e0b46a);
  --warn-wash: light-dark(#f8ecd8, #352a18);
  --bad: light-dark(#a5432f, #e28b80);
  --bad-wash: light-dark(#f7e2dc, #35201f);
  --console: light-dark(#1f150d, #0f0905);
  --chrome: light-dark(#2a1d12, #1b120a);
  --chrome-2: light-dark(#3a291a, #271a0f);
  --chrome-line: light-dark(#5a4129, #42301f);
  --chrome-ink: light-dark(#f9f0e6, #f6ecdf);
  --chrome-muted: light-dark(#c7b49f, #bda78f);
}
/* ── 4. MARBLE · quarried stone: warm ivory greys, a slate accent ──────────
   Marble and Obsidian are two palettes, not one with a light and a dark half.
   Both are monochrome and both answer to the light/dark switch like every other
   palette; what separates them is temperature. Marble is warm · ivory, bone,
   slate. Obsidian below is cold · blue-black glass. Put side by side in the
   same mode they read as different stones, which is the whole point. */
[data-palette="marble"] {
  --ground: light-dark(#dde1de, #10140f);
  --surface: light-dark(#f6f8f5, #1b211c);
  --surface-2: light-dark(#d1d6d1, #262d27);
  --line: light-dark(#b9c0b9, #3a433c);
  --line-strong: light-dark(#9aa49c, #4e5a51);
  --ink: light-dark(#1b211d, #eef2ee);
  --ink-2: light-dark(#4a554e, #bcc5be);
  --ink-3: light-dark(#758078, #8b978f);
  --accent: light-dark(#343b35, #dfe5dc);
  --accent-ink: light-dark(#ffffff, #1c1b18);
  --accent-wash: light-dark(#e2e6e2, #2c332d);
  --accent-line: light-dark(#b3bdb5, #566258);
  --ok: light-dark(#3c6f58, #7fbf8f);
  --ok-wash: light-dark(#e2eee8, #1b2e22);
  --warn: light-dark(#8a6a25, #e0b46a);
  --warn-wash: light-dark(#f5eedf, #352a18);
  --bad: light-dark(#9a4a45, #e28b80);
  --bad-wash: light-dark(#f4e3e1, #35201f);
  --console: light-dark(#181c19, #0b0e0c);
  --chrome: light-dark(#242a25, #141915);
  --chrome-2: light-dark(#333b35, #1e241f);
  --chrome-line: light-dark(#4d574f, #333b35);
  --chrome-ink: light-dark(#f3f6f2, #eef3ef);
  --chrome-muted: light-dark(#b8c2ba, #aab6ad);
}
/* ── 5. OBSIDIAN · volcanic glass: cold blue-black, a bright edge ─────────── */
[data-palette="obsidian"] {
  --ground: light-dark(#d5dae6, #060810);
  --surface: light-dark(#f1f4fb, #0f131e);
  --surface-2: light-dark(#c7cfdf, #171d2b);
  --line: light-dark(#aeb8ca, #283146);
  --line-strong: light-dark(#8e9ab2, #3a4660);
  --ink: light-dark(#141821, #edf1fa);
  --ink-2: light-dark(#454e62, #b8c1d4);
  --ink-3: light-dark(#727d93, #7f8aa2);
  --accent: light-dark(#2b3245, #d9d9e6);
  --accent-ink: light-dark(#ffffff, #07070a);
  --accent-wash: light-dark(#dfe4f0, #1d2436);
  --accent-line: light-dark(#a9b4ca, #3f4b68);
  --ok: light-dark(#2d6f5a, #7fbf8f);
  --ok-wash: light-dark(#e0ede8, #1b2e22);
  --warn: light-dark(#9a6b1f, #e0b46a);
  --warn-wash: light-dark(#f4eedf, #352a18);
  --bad: light-dark(#a63e4a, #e28b80);
  --bad-wash: light-dark(#f5e2e5, #35201f);
  --console: light-dark(#10131c, #04060a);
  --chrome: light-dark(#171c29, #070a12);
  --chrome-2: light-dark(#232a3b, #101522);
  --chrome-line: light-dark(#3a4560, #263049);
  --chrome-ink: light-dark(#f2f5fc, #eef2fb);
  --chrome-muted: light-dark(#b4bdce, #a9b3c7);
}
/* ═══════════════════════════════════════════════════════════════════════════
   REMAINING COMPONENTS · geometry preserved from the previous stylesheet,
   surfaces restated in the new language (flat fills, hairlines, one accent).
   ═══════════════════════════════════════════════════════════════════════════ */

.view { display: none; }
.view.active { display: flex; flex-direction: column; gap: 16px; }

/* status strip / stat icon */
/* Keep each readout wide enough for its label and value. Extra pins now wrap
   into another row instead of squeezing earlier cells into ellipses. */
.status-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.stat-ico { position: absolute; top: 50%; transform: translateY(-50%); right: 8px; width: 20px; height: 20px; opacity: .22; }

/* accounts */
.acct-row { display: flex; gap: 12px; align-items: center; }
.acct-row .who { flex: 1; min-width: 0; }
.acct-row .who .s { margin-top: 2px; font-size: 11.5px; color: var(--ink-3); }
.acct-switch { display: flex; gap: 8px; }
.acct-select { min-width: 150px; }

/* module column + actions */
.bots-col { display: flex; flex-direction: column; gap: 12px; }
.bot-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cfg-ico { width: 26px; height: 26px; border-radius: var(--r-sm); }
.help-ico { width: 20px; height: 20px; margin-right: 7px; opacity: .6; }

/* forms */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.opt-info { flex: 1; min-width: 0; }
.opt-ctl { flex-shrink: 0; display: flex; min-width: 120px; max-width: 300px; justify-content: flex-end; }
.opt-ctl .input { width: 100%; }
.opt-ctl .input.tiny { width: 110px; text-align: right; }
.sub-checks { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.sub-checks-inline { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.unit-inline { display: inline-flex; align-items: center; gap: 7px; }
.unit-inline .input.tiny { width: 110px; text-align: right; }
.unit-inline > span { font-size: 12px; color: var(--ink-3); }
.sub-check { display: flex; gap: 9px; align-items: center; font-size: 13px; color: var(--ink-2); }
.sub-check input { width: 15px; height: 15px; accent-color: var(--accent); }

/* toasts · the only place a coloured edge earns its keep */
.toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 2000; }
.toast {
  background: var(--surface); border: 1px solid var(--line); border-left: 2px solid var(--ok);
  border-radius: var(--r); padding: 10px 13px; font-size: 13px; color: var(--ink);
  min-width: 240px; max-width: 360px; box-shadow: 0 6px 18px rgb(0 0 0 / .14);
}
.toast.warn { border-left-color: var(--warn); }
.toast.err  { border-left-color: var(--bad); }

/* help */
/* ── THE MODULE CATALOGUE ─────────────────────────────────────────────────────────────────────────
   Fifty-odd cards each carrying a full paragraph is a document, not a reference: nobody reads it, and
   the one module you came to look up is somewhere in the middle of it. Two lines each, clamped, so the
   page can be scanned · and the whole description is one click away on the card itself, which is where
   someone who actually wants it goes. */
.help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.help-card {
  background: var(--surface); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 3px;
  cursor: pointer; border: 0; text-align: left; font: inherit; color: inherit;
  transition: background var(--dur) var(--ease);
}
.help-card:hover { background: var(--surface-2); }
.help-card:focus-visible { outline: 0; box-shadow: var(--focus); position: relative; z-index: 1; }
.help-card .h { display: flex; align-items: center; font-size: 13px; font-weight: 500; }
.help-card .b {
  line-height: 1.5; font-size: 12px; color: var(--ink-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* sparklines */
.spark-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.spark-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px;
}
.spark-card svg { width: 100%; height: 46px; display: block; }
.spark-card svg path, .spark-card svg polyline { stroke: var(--accent); fill: none; }
.spark-l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.spark-v { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.spark-d { font-size: 11.5px; color: var(--ink-3); }

/* session gains */
.session-gains {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 9px 14px; border-bottom: 1px solid var(--line);
}
.session-gains:empty { display: none; }
.sg-cell { display: flex; gap: 5px; align-items: baseline; white-space: nowrap; }
.sg-k { font-size: 11.5px; color: var(--ink-3); }
.sg-label { font-size: 11.5px; color: var(--ink-3); }
.sg-v { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* The end-of-session summary is a block, not another cell: it wraps onto its own row under the live
   figures, which is also what stops it squeezing them when both are on screen at once. */
.sg-summary {
  flex-basis: 100%; display: flex; flex-direction: column; gap: 7px;
  padding-top: 7px; border-top: 1px dashed var(--line);
}
.sg-summary .sg-cells { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.sg-lines { margin: 0; padding-left: 17px; display: flex; flex-direction: column; gap: 3px; color: var(--ink-2); font-size: 11.5px; line-height: 1.5; }

/* announcements */
.ann-card {
  background: var(--surface); border: 1px solid var(--line); border-left: 2px solid var(--line-strong);
  border-radius: var(--r); padding: 13px 15px; display: flex; flex-direction: column; gap: 8px;
}
.ann-card.update  { border-left-color: var(--accent); }
.ann-card.warning { border-left-color: var(--warn); }
.ann-card.maintenance { border-left-color: var(--warn); }
.ann-card.info    { border-left-color: var(--ok); }
.ann-head { display: flex; gap: 10px; align-items: baseline; }
.ann-title { font-size: 13px; font-weight: 600; }
.ann-date { font-size: 11.5px; color: var(--ink-3); margin-left: auto; }
.ann-body { line-height: 1.55; font-size: 13px; color: var(--ink-2); }
/* An announcement image is whatever the operator attached: a wide screenshot, a 112px icon tile, a
   square of art. `contain` is the rule that survives all three · `cover` would crop a screenshot's
   edges and behead a portrait, and the panel cannot know which it is looking at. */
.ann-image {
  width: 100%; max-height: 240px; object-fit: contain; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface-2);
}

/* templates */
.tpl-toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.tpl-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.tpl-cats { width: fit-content; }
.tpl-libbar { display: flex; gap: 8px; flex-wrap: wrap; }
.tpl-search { max-width: 280px; }
.tpl-layout { display: grid; grid-template-columns: 260px 1fr; gap: 14px; margin-top: 14px; }
.tpl-layout.hidden { display: none; }
.tpl-library { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 16px; max-height: 70vh; overflow-y: auto; }
.tpl-libitem { display: flex; gap: 8px; align-items: center; padding: 7px 9px; border-radius: var(--r-sm); border: 1px solid transparent; background: transparent; cursor: pointer; }
.tpl-libitem:hover { background: var(--surface-2); }
.tpl-libitem.active { background: var(--surface-2); border-color: var(--line); }
/* A <button> keeps the browser's own grey face and border unless it is told otherwise, which is why
   every template in this list read as a filled bar rather than a name. */
.tpl-libname {
  flex: 1; min-width: 0; text-align: left; display: flex; flex-direction: column; gap: 1px;
  border: 0; background: transparent; color: inherit; font: inherit; padding: 0; cursor: pointer;
}
.tpl-libname > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-libname:focus-visible { outline: 0; box-shadow: var(--focus); border-radius: var(--r-sm); }
.tpl-libmeta { font-size: 11px; color: var(--ink-3); }
.tpl-detail-head { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; align-items: baseline; }
.tpl-detail-name { font-size: 14px; font-weight: 600; }
.tpl-detail-meta { font-size: 11.5px; color: var(--ink-3); }
.tpl-sections { width: fit-content; max-width: 100%; overflow-x: auto; margin-bottom: 12px; flex-wrap: nowrap; }
.tpl-edit-top { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.tpl-edit-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tpl-waves { display: flex; flex-direction: column; gap: 14px; }
.tpl-wave { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 13px; }
.tpl-wave-head { display: flex; margin-bottom: 10px; font-size: 12.5px; font-weight: 600; }
.tpl-flanks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tpl-flank { display: flex; flex-direction: column; gap: 6px; }
.tpl-flank-title { border-bottom: 1px solid var(--line); padding-bottom: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.tpl-bucket-label { margin-top: 4px; font-size: 11px; color: var(--ink-3); }
.tpl-chips { display: flex; flex-direction: column; gap: 4px; }
.tpl-chip { display: flex; gap: 6px; align-items: center; font-size: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 3px 7px; }
.tpl-chip span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-chip-c { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tpl-chip-x { border: 0; background: transparent; color: var(--ink-3); cursor: pointer; padding: 0 2px; }
.tpl-chip-x:hover { color: var(--bad); }
.tpl-add { display: flex; gap: 4px; }
.tpl-slot { display: flex; gap: 6px; margin-bottom: 5px; }
.tpl-slot select, .tpl-slot .ssel { flex: 1; min-width: 90px; }
.tpl-slot .tpl-slot-c, .tpl-slot-c { width: 68px; flex: none; }
.tpl-slot-move { display: flex; flex-direction: column; gap: 2px; }
.tpl-slot-move .btn-xs { line-height: 12px; min-height: 0; padding: 1px 5px; font-size: 10px; }
.tpl-slot-note { margin-left: 6px; font-size: 11px; color: var(--ink-3); }
.tpl-empty { color: var(--ink-3); font-size: 12.5px; padding: 14px 0; }

/* searchable select */
.ssel { position: relative; display: inline-block; width: 100%; }
.ssel .ssel-val { width: 100%; padding-right: 28px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; text-align: left; }
.ssel-pop {
  position: fixed; top: 0; left: 0; right: auto; box-sizing: border-box;
  width: min(760px, calc(100vw - 32px)); max-width: calc(100vw - 32px);
  min-width: min(220px, calc(100vw - 32px)); z-index: 3000;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r);
  padding: 7px; box-shadow: 0 8px 22px rgb(0 0 0 / .16);
}
/* The popup carries the `hidden` attribute when closed, and the browser's own [hidden] rule is
   display:none at the weakest possible specificity · which the display:flex above beats. Without
   this every picker in the panel sits permanently open with a stray filter box under it. */
.ssel-pop[hidden] { display: none; }
.ssel-q { width: 100%; }
.ssel-opts { max-height: min(520px, calc(100vh - 32px)); overflow-y: auto; display: block; }
/* Give every result a definite box. Leaving these as flex items with an automatic minimum size made
   long package labels collapse into clipped glyph fragments in the searchable package picker. */
.ssel-opt {
  display: flex; align-items: flex-start; gap: 8px; width: 100%; min-width: 0; min-height: 30px;
  overflow: hidden; text-overflow: clip; white-space: normal; overflow-wrap: anywhere;
  text-align: left; border: 0; background: transparent; color: var(--ink);
  font: inherit; font-size: 13px; padding: 6px 8px; border-radius: var(--r-sm); cursor: pointer;
}
.ssel-opt:hover, .ssel-opt.active { background: var(--surface-2); }
.ssel-opt-label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ssel-opt.unavailable, .ssel-opt.unavailable:hover {
  color: var(--ink-3); background: transparent; cursor: not-allowed; opacity: .72;
}
.ssel-opt.unavailable .ssel-star { display: none; }
.ssel-star { flex: none; border: 0; background: transparent; color: var(--ink-3); cursor: pointer; font: inherit; font-size: 18px; line-height: 1; padding: 0 2px; }
.ssel-star:hover, .ssel-star.on { color: var(--accent); }
.ssel-empty { color: var(--ink-3); font-size: 12.5px; padding: 8px; }

/* stats + inventory */
.stats-tab { display: flex; flex-direction: column; gap: 12px; }
.stats-tab.hidden { display: none; }
.inv-wrap { overflow-x: auto; }
.inv-table th, .inv-table td { text-align: right; border-bottom: 1px solid var(--line); }
.inv-table th:first-child, .inv-table td.inv-name { text-align: left; }
/* Every other table here leads with its one text column, which is what th:first-child and .inv-name
   cover. A ranking leads with the RANK and carries the name second, so the left-aligned column is no
   longer the first one · this marks any column that holds text rather than a number. */
.inv-table th.inv-text, .inv-table td.inv-text { text-align: left; }
.inv-table tr:last-child td { border-bottom: none; }
.inv-table tr.inv-total td { border-top: 1px solid var(--line-strong); font-weight: 600; }
.troop-sum { margin-left: 6px; color: var(--ink-3); font-size: 11.5px; }

/* guides */
.guide-layout { display: grid; grid-template-columns: 230px 1fr; gap: 16px; }
.guide-toc { display: flex; flex-direction: column; gap: 1px; position: sticky; top: 16px; align-self: start; }
.guide-toc-item { text-align: left; border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: 13px; padding: 6px 9px; border-radius: var(--r-sm); cursor: pointer; }
.guide-toc-item:hover { background: var(--surface-2); color: var(--ink); }
.guide-toc-item.active { background: var(--surface-2); color: var(--ink); font-weight: 600; }
.guide-cat { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin: 10px 0 3px 9px; }
.guide-article { min-height: 320px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; }
.guide-badge { display: inline-block; margin-bottom: 12px; font-size: 11px; padding: 2px 7px; border-radius: 3px; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.guide-h { font-size: 15px; font-weight: 600; margin: 16px 0 6px; letter-spacing: -.01em; }
.guide-body { line-height: 1.7; font-size: 13.5px; color: var(--ink-2); }
.guide-body ul, .guide-body ol { padding-left: 22px; }
.guide-body li { margin-bottom: 7px; }
.guide-body b, .guide-body strong { color: var(--ink); font-weight: 600; }
.guide-tip { border-left: 2px solid var(--accent); background: var(--accent-wash); padding: 9px 12px; border-radius: 0 var(--r-sm) var(--r-sm) 0; margin: 10px 0; font-size: 13px; }

/* theme picker (Help view) */
.theme-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; }
.theme-opt {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  padding: 9px 11px; cursor: pointer; font: inherit; font-size: 13px; color: var(--ink); text-align: left;
}
.theme-opt:hover { border-color: var(--line-strong); }
.theme-opt.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.theme-swatch { width: 22px; height: 22px; border-radius: var(--r-sm); flex: none; border: 1px solid rgb(0 0 0 / .15); }


/* ═══════════════════════════════════════════════════════════════════════════
   DESCENDANT RULES · sizing and element-level rules the port dropped. Without
   these the icons render at their intrinsic size, which is what made the
   sidebar enormous.
   ═══════════════════════════════════════════════════════════════════════════ */

.nav-item svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .8; }
.side-brand .brand-mark { width: 30px; height: 30px; }
.side-brand .brand-mark svg { width: 20px; height: 20px; }
.auth-brand .brand-mark svg { width: 34px; height: 34px; }
.brand-mark svg { width: 100%; height: 100%; }
.sidebar > .btn { padding: 6px 10px; font-size: 12.5px; }
.stat-ico svg, .stat-ico img { width: 100%; height: 100%; object-fit: contain; }
.bot-ico img, .cfg-ico img, .help-ico img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }

/* the real control is a hidden checkbox behind the track */
.sw input { opacity: 0; width: 0; height: 0; position: absolute; }

.run-pill .run-label-swap { display: inline-block; min-width: 84px; text-align: center; }
.run-pill.running:hover .run-label-swap span { display: none; }

.field label { font-size: 12px; font-weight: 500; color: var(--ink-2); }
.field .hint { font-size: 11.5px; color: var(--ink-3); }
.console-head .grow { flex: 1; }
.sheet-head h3 { font-size: 14px; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 9px; }
.sheet-head .sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; font-weight: 400; }
.acct-row .who .n { font-weight: 600; font-size: 13px; }
.help-card .h { font-weight: 600; font-size: 13px; color: var(--ink); }
.tpl-libname > span:first-child { font-weight: 600; font-size: 13px; }
#stats-tabs { margin-bottom: 12px; width: fit-content; }
.guide-body code {
  font-family: var(--mono); font-size: .88em;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 3px; padding: 1px 4px;
}

/* ── responsive, matching the previous breakpoints ───────────────────────── */
@media (max-width: 1100px) { .dash-grid { grid-template-columns: 1fr; } }
@media (max-width: 920px) {
  .app.active { grid-template-columns: 1fr; }
  .sidebar {
    position: static; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap;
    gap: 10px; padding: 10px 14px; border-right: none; border-bottom: 1px solid var(--line);
  }
  .side-brand-sub { display: none; }
  .side-nav { flex-direction: row; flex-wrap: wrap; gap: 4px; flex: 1; }
  .nav-item { width: auto; padding: 6px 10px; font-size: 12.5px; }
  .nav-item svg { display: none; }
  .nav-item.active::before { display: none; }
  .side-spacer, .side-conn { display: none; }
  .topbar { flex-wrap: wrap; height: auto; padding: 10px 14px; gap: 10px; }
  .content { padding: 16px 14px; }
  .bot-list { max-height: none; overflow: visible; }
  .console-col { min-height: 420px; }
  .form-grid { grid-template-columns: 1fr; }
  .opt-row { grid-template-columns: 1fr; gap: 8px; }
  .opt-ctl { justify-content: flex-start; max-width: none; }
  .opt-ctl .input { width: 100%; }
}
@media (max-width: 860px) { .tpl-layout { grid-template-columns: 1fr; } .tpl-library { position: static; max-height: none; } }
@media (max-width: 720px) { .tpl-flanks { grid-template-columns: 1fr; } .guide-layout { grid-template-columns: 1fr; } .guide-toc { position: static; flex-direction: row; flex-wrap: wrap; } }
@media (max-width: 560px) {
  .crafting-mode-options, .rows-field:has(.crafting-mode) .crafting-mode-options { grid-template-columns: 1fr; }
  .crafting-mode-choice { min-height: 0; }
}
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.input::placeholder { color: var(--ink-3); }
/* native select arrow, redrawn without the old gradient trick */
select.input {
  appearance: none; padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.side-brand-name em { color: var(--accent); font-style: normal; }
.form-grid .full { grid-column: 1 / -1; }
.guide-body p { margin: 0 0 10px; }
.run-pill.running:hover .run-label-swap::after { content: "Stop bots"; }
.run-pill:disabled { opacity: .4; cursor: not-allowed; }

/* the (i) beside a module name */
.info-btn {
  width: 16px; height: 16px; flex: none; padding: 0;
  border: 1px solid var(--line-strong); border-radius: 50%;
  background: transparent; color: var(--ink-3);
  font: inherit; font-size: 10px; font-weight: 600; line-height: 1;
  display: inline-grid; place-items: center; cursor: pointer;
}
.info-btn:hover { color: var(--accent); border-color: var(--accent); }
.info-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }


/* ═══════════════════════════════════════════════════════════════════════════
   APPEARANCE POPOVER · palette and light/dark, off the sidebar.
   The swatches carry no colours of their own: each chip sets data-palette on
   ITSELF, so the palette blocks above hand it the real thing. Add a palette up
   there and its swatch is right without touching anything down here. Each chip
   also pins data-theme="light", so the row reads as four fixed samples rather
   than shifting under the mode the reader is currently in.
   ═══════════════════════════════════════════════════════════════════════════ */
.theme-pop {
  position: fixed; z-index: 60; width: 244px; padding: 12px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r); box-shadow: 0 12px 32px rgba(0,0,0,.18);
  display: none; flex-direction: column; gap: 10px;
}
.theme-pop.active { display: flex; }
.theme-pop-title {
  font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3);
}
.theme-pop .input { width: 100%; font-size: 12px; }
.theme-pop-note { font-size: 10.5px; line-height: 1.45; color: var(--ink-3); }
.theme-swatches { display: flex; flex-direction: column; gap: 2px; }

.sw-row {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 5px 7px; border: 1px solid transparent; border-radius: var(--r-sm);
  background: none; cursor: pointer; text-align: left;
  font: inherit; font-size: 12.5px; color: var(--ink-2);
}
.sw-row:hover { background: var(--surface-2); color: var(--ink); }
.sw-row[aria-checked="true"] { border-color: var(--line-strong); background: var(--surface-2); color: var(--ink); font-weight: 600; }

/* the chip itself · ground, then the accent, then ink, so a palette is legible at 34px */
.sw-chip {
  width: 34px; height: 18px; flex: 0 0 34px; border-radius: 3px; overflow: hidden;
  display: flex; border: 1px solid var(--line-strong);
}
.sw-chip i { display: block; height: 100%; }
.sw-chip i:nth-child(1) { width: 46%; background: var(--surface-2); }
.sw-chip i:nth-child(2) { width: 34%; background: var(--accent); }
.sw-chip i:nth-child(3) { width: 20%; background: var(--ink); }

.sw-tick { margin-left: auto; color: var(--accent); font-size: 12px; line-height: 1; }
.sw-row[aria-checked="false"] .sw-tick { visibility: hidden; }

/* ═══ MOUNT TOGGLE ═════════════════════════════════════════════════════════════════════════════════
   The mount, as two sides with the words inside them: coin on the left, feather on the right. It sits
   in the same 180px control column the dropdown it replaced used, and the active side is the one the
   march will ride. */
.mount-toggle { display: inline-flex; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.mount-btn {
  flex: 1; min-width: 82px; padding: 6px 10px; border: 0;
  background: var(--surface); color: var(--ink-3); cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .01em;
}
.mount-btn:hover { background: var(--surface-2); color: var(--ink); }
.mount-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mount-btn.active { background: var(--accent); color: var(--accent-ink); }
/* The reports-to-delete group: three labelled checks, one per kind of report. */
.acct-checks { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.acct-check { display: inline-flex; align-items: center; gap: 5px; }
.acct-checks .sub-check { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.acct-checks .sub-check input { width: 15px; height: 15px; }
.settings-foot { display: flex; align-items: center; gap: 12px; padding: 14px 0 2px; border-top: 1px solid var(--line); margin-top: 4px; }
.settings-foot .hint { font-size: 12px; color: var(--ink-3); }

/* Account settings keeps one control column. Every field fills the same 180px track, so a unit
   suffix can never push its input out of line with the rows above and below it. */
#settings-body .opt-ctl { width: 180px; min-width: 0; max-width: none; }
#settings-body .opt-ctl .input,
#settings-body .opt-ctl .input.tiny,
#settings-body .password-control .input { width: 100%; }
#settings-body .password-control { width: 100%; }
#settings-body .opt-row-wide .opt-ctl { width: auto; max-width: none; }
#settings-body .unit-control { position: relative; width: 100%; }
#settings-body .unit-control .input { padding-right: 66px; text-align: right; }
#settings-body .unit-suffix {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 11.5px; color: var(--ink-3); pointer-events: none; white-space: nowrap;
}
@media (max-width: 920px) {
  #settings-body .opt-ctl { width: 100%; }
}

/* mode: three segments, same control the rest of the panel uses */
.theme-modes { display: flex; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.theme-modes button {
  flex: 1; padding: 5px 0; border: 0; background: var(--surface); cursor: pointer;
  font: inherit; font-size: 12px; color: var(--ink-2);
}
.theme-modes button:hover { background: var(--surface-2); color: var(--ink); }
.theme-modes button[aria-checked="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }

@media (max-width: 860px) {
  .theme-pop { left: 12px !important; right: 12px; width: auto; }
}

/* ── config sections (were tabs) ─────────────────────────────────────────── */
/* Section headings STICK. A long module is a long scroll, and a heading that has scrolled away takes
   with it the only thing saying which half of the form the field under the cursor belongs to. */
.cfg-section {
  position: sticky; top: -16px; z-index: 2;
  margin: 18px -16px 2px; padding: 8px 16px 6px;
  background: var(--surface); border-bottom: 1px solid var(--line);
  font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3);
}
.cfg-section:first-child { margin-top: -8px; }

/* The module's own description leads the form; it is prose, so it gets a measure rather than the full
   width of a 720px sheet, where a line runs past the length an eye can track back from. */
#config-sub { max-width: 62ch; line-height: 1.55; }

/* ── multi select: an ordered list built by choosing ─────────────────────── */
.msel { display: flex; flex-direction: column; gap: 6px; width: 100%; min-width: 240px; }
.msel-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.msel-empty { font-size: 12px; color: var(--ink-3); font-style: italic; }
.msel-chip {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px 3px 2px 2px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface-2); font-size: 12px; color: var(--ink);
}
.msel-lab { padding: 0 4px; }
.msel-chip button {
  border: 0; background: none; cursor: pointer; color: var(--ink-3);
  font: inherit; font-size: 10px; line-height: 1; padding: 3px 3px; border-radius: 3px;
}
.msel-chip button:hover:not(:disabled) { background: var(--surface); color: var(--ink); }
.msel-chip button:disabled { opacity: .25; cursor: default; }
.msel-rm { font-size: 13px !important; color: var(--bad) !important; }
.msel .ssel { width: 100%; }

/* A list of chips needs the width of the row, not the 180px column a single value sits in · one
   chip per line is unreadable and hides the order, which for these settings IS the setting. */
.opt-row:has(.msel) { grid-template-columns: 1fr; }
.opt-row:has(.msel) .opt-ctl { max-width: none; width: 100%; justify-content: flex-start; }

/* ── UNIT PLAN ────────────────────────────────────────────────────────────────────────────────────
   An ordered list of tiers, so it is laid out as one: a rank number, what it sends, how many, and the
   controls that move it. The rank is not decoration · the plan is walked top-down and the first tier
   in stock is the one that flies, so the position of a row is the setting. */
.uplan { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.uplan-rows { display: flex; flex-direction: column; gap: 4px; }
.uplan-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 6px 5px 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.uplan-ord {
  flex: none; width: 18px; text-align: center;
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
}
.uplan-pick { flex: 1; min-width: 0; }
.uplan-pick .msel { min-width: 0; }
.uplan-name {
  display: block; font-size: 13px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.uplan-x { flex: none; color: var(--ink-3); font-size: 12px; }
.uplan-n { flex: none; width: 74px; text-align: right; }
.uplan-mv, .uplan-rm {
  flex: none; border: 0; background: transparent; cursor: pointer;
  color: var(--ink-3); font-size: 11px; line-height: 1; padding: 4px 5px; border-radius: 3px;
}
.uplan-mv:hover:not(:disabled), .uplan-rm:hover { background: var(--surface); color: var(--ink); }
.uplan-mv:disabled { opacity: .25; cursor: default; }
.uplan-rm { font-size: 14px; color: var(--bad); }
.uplan-empty { font-size: 12px; color: var(--ink-3); font-style: italic; padding: 2px 0; }
.uplan-foot .ssel { width: 100%; }
/* Like a multi-select, a plan needs the row's full width · a 200px control cannot hold a tier. */
.opt-row:has(.uplan) { grid-template-columns: 1fr; }
.opt-row:has(.uplan) .opt-ctl { max-width: none; width: 100%; justify-content: flex-start; }


/* ═══ TACTICAL SHELL ═══════════════════════════════════════════════════════════════════════════════
   A storm-tracker inspired presentation layer. It deliberately sits at the end of the stylesheet so
   the existing component contract and JS remain untouched while the product gets a clearer, denser
   command-centre feel and a responsive shell at tablet/mobile widths. */
:root {
  --chrome: #101614;
  --chrome-2: #17211d;
  --chrome-line: #2a3730;
  --chrome-ink: #f0f4ee;
  --chrome-muted: #9aa79d;
  --storm: #5f9634;
  --storm-deep: #284b20;
}

body {
  background-image:
    radial-gradient(circle at 78% -10%, rgb(95 150 52 / .08), transparent 34rem),
    radial-gradient(circle at 12% 100%, rgb(180 68 31 / .035), transparent 28rem);
}

.app.active {
  grid-template-columns: clamp(224px, 19vw, 270px) minmax(0, 1fr);
}

.sidebar {
  background: var(--chrome);
  border-right-color: var(--chrome-line);
  padding: 16px 12px;
  gap: 22px;
  box-shadow: 8px 0 28px rgb(0 0 0 / .08);
}

.side-brand {
  padding: 9px 10px;
  border-color: var(--chrome-line);
  background: var(--chrome-2);
}
.side-brand:hover { background: #1d2a24; }
.side-brand-name { color: var(--chrome-ink); letter-spacing: .025em; }
.side-brand-name em { color: #a8d65d; }
.side-brand-sub { color: var(--chrome-muted); }
.side-brand .brand-mark { color: #a8d65d; }

.side-nav { gap: 4px; }
.nav-item {
  color: var(--chrome-muted);
  padding: 9px 11px;
  border-radius: 5px;
  letter-spacing: .005em;
}
.nav-item:hover { background: var(--chrome-2); color: var(--chrome-ink); }
.nav-item.active {
  background: #22342a;
  color: var(--chrome-ink);
  box-shadow: inset 0 0 0 1px rgb(168 214 93 / .12);
}
.nav-item.active::before {
  width: 3px;
  height: 18px;
  margin-left: -11px;
  margin-right: 8px;
  background: #a8d65d;
}
.nav-item svg { color: #adbaaf; opacity: .9; }
.nav-item.active svg { color: #b9e276; }

.side-conn {
  color: var(--chrome-muted);
  border-top: 1px solid var(--chrome-line);
  padding: 13px 11px 3px;
}
.conn-dot.on { box-shadow: 0 0 0 3px rgb(95 150 52 / .12); }
.sidebar > .btn-danger-ghost {
  color: #e7a294;
  border-color: var(--chrome-line);
  background: transparent;
}
.sidebar > .btn-danger-ghost:hover { background: rgb(176 52 44 / .16); }

.main { background: transparent; }
.topbar {
  min-height: 64px;
  height: auto;
  padding: 11px clamp(16px, 2.2vw, 30px);
  background: rgb(16 22 20 / .97);
  border-bottom-color: var(--chrome-line);
  box-shadow: 0 5px 18px rgb(0 0 0 / .08);
}
.page-title { color: var(--chrome-ink); font-size: 16px; letter-spacing: .01em; }
.acct-switch { align-items: center; }
.acct-select {
  background: var(--chrome-2);
  border-color: var(--chrome-line);
  color: var(--chrome-ink);
}
.topbar .btn:not(.run-pill) {
  background: transparent;
  border-color: var(--chrome-line);
  color: var(--chrome-muted);
}
.topbar .btn:not(.run-pill):hover { background: var(--chrome-2); color: var(--chrome-ink); }
.topbar .run-pill { border-color: transparent; }

.content {
  padding: clamp(16px, 2.4vw, 30px);
  gap: 18px;
  max-width: 1800px;
  width: 100%;
  margin: 0 auto;
}
.panel, .console-col, .status-strip {
  border-radius: 8px;
  box-shadow: 0 1px 1px rgb(0 0 0 / .025);
}
.panel { padding: 18px; }
.panel-title { font-size: 14px; letter-spacing: .005em; }
.panel-sub { max-width: 78ch; line-height: 1.55; }
.status-strip { box-shadow: var(--lift-1); }
.stat-card { padding: 12px 14px; }
.stat-label { letter-spacing: .08em; }

.dash-grid { gap: 18px; grid-template-columns: minmax(0, 1fr) minmax(390px, 40%); }
.bots-col { gap: 14px; }
.bot-list { gap: 8px; }
.bot-card {
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--surface);
}
.bot-card:hover { transform: translateY(-1px); box-shadow: var(--lift-1); }
.bot-card.on { border-left-color: var(--storm); }
.bot-card.on .bot-state { color: var(--storm); }
.console-col { top: 82px; height: calc(100vh - 112px); }
.console-head { padding: 13px 16px; background: var(--surface); }
.console-live-dot { box-shadow: 0 0 0 3px rgb(95 150 52 / .12); }
.console-body { padding: 14px 16px; }

.seg {
  padding: 3px;
  border-radius: 6px;
}
.seg-btn { padding: 7px 13px; }
.seg-btn.active { box-shadow: var(--lift-1); }

.auth-wrap {
  position: relative;
  overflow: hidden;
  padding: 28px 18px;
  background-color: #101614;
  background-image:
    linear-gradient(rgb(16 22 20 / .78), rgb(16 22 20 / .92)),
    radial-gradient(circle at 50% 15%, rgb(95 150 52 / .32), transparent 30rem),
    repeating-linear-gradient(135deg, transparent 0 20px, rgb(168 214 93 / .025) 21px, transparent 22px);
}
.auth-wrap::before {
  content: "";
  position: absolute;
  width: min(70vw, 720px);
  aspect-ratio: 1;
  border: 1px solid rgb(168 214 93 / .12);
  border-radius: 50%;
  box-shadow: 0 0 0 42px rgb(168 214 93 / .025), 0 0 0 84px rgb(168 214 93 / .018);
  pointer-events: none;
}
.auth-brand, .auth-card { position: relative; z-index: 1; }
.auth-brand { gap: 10px; }
.auth-brand .brand-mark {
  width: 58px; height: 58px; padding: 9px;
  border: 1px solid rgb(168 214 93 / .38);
  border-radius: 50%;
  background: rgb(23 33 29 / .9);
  color: #a8d65d;
  box-shadow: 0 0 0 7px rgb(168 214 93 / .06);
}
.auth-brand h1 { color: #f0f4ee; font-size: 24px; letter-spacing: .05em; }
.auth-brand h1 em { color: #a8d65d; }
.auth-brand p { color: #a6b2a9; }
.auth-card {
  max-width: 408px;
  padding: 24px;
  border-color: #2a3730;
  border-radius: 10px;
  background: rgb(23 33 29 / .96);
  box-shadow: 0 24px 70px rgb(0 0 0 / .34), 0 0 0 1px rgb(168 214 93 / .04);
}
.auth-tabs { background: #101614; }
.auth-tab { color: #9aa79d; padding: 8px 12px; }
.auth-tab.active { background: #2a472b; color: #eaf4e4; }
.auth-card .field > label { color: #b3c0b5; }
.auth-card .input {
  background: #101614;
  border-color: #34443a;
  color: #f0f4ee;
  padding: 9px 11px;
}
.auth-card .password-control .input { padding-right: 42px; }
.auth-card .input:focus { border-color: #a8d65d; outline-color: #a8d65d; }
.auth-card .btn-primary { background: #5f9634; border-color: #5f9634; color: #071006; padding: 9px 12px; }
.auth-foot { color: #819086; line-height: 1.5; }

/* The activation screen rides on the sign-in card · it is the same moment in the same session, one step
   later · and adds the three things it has that the form does not: who is signed in, what the server said
   about them, and the one action they still have. Colours come from the palette variables so a theme that
   restyles .auth-card restyles this with it. */
#activation-screen .activation-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
#activation-screen .activation-badge { font-size: 13.5px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
#activation-screen .activation-note { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--ink-2); }
#activation-screen .activation-actions { display: flex; justify-content: flex-end; }

/* The account form has a scrollable body and a fixed footer instead of overflowing its sheet. */
#modal-acct-edit .sheet { max-height: min(86dvh, 760px); }
#modal-acct-edit form { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; }
#modal-acct-edit .sheet-body { min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
#modal-acct-edit .sheet-foot { flex: 0 0 auto; }

@media (max-width: 1180px) {
  .app.active { grid-template-columns: 224px minmax(0, 1fr); }
  .dash-grid { grid-template-columns: minmax(0, 1fr) minmax(340px, 40%); }
}

@media (max-width: 920px) {
  .app.active { display: flex; flex-direction: column; }
  .sidebar {
    position: sticky;
    top: 0;
    z-index: 20;
    height: auto;
    min-height: 62px;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 12px;
    padding: 9px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--chrome-line);
  }
  .side-brand { width: auto; flex: 0 0 auto; padding: 7px 9px; }
  .side-nav {
    min-width: 0;
    flex: 1;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 3px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .side-nav::-webkit-scrollbar { display: none; }
  .nav-item { flex: 0 0 auto; width: auto; padding: 8px 10px; font-size: 12px; white-space: nowrap; }
  .nav-item svg { display: none; }
  .nav-item.active::before { display: none; }
  .side-spacer { display: none; }
  .side-conn { display: none; }
  .sidebar > .btn-danger-ghost { flex: 0 0 auto; padding: 7px 9px; font-size: 0; }
  .sidebar > .btn-danger-ghost svg { margin: 0; }
  .topbar { position: sticky; top: 62px; z-index: 10; }
  .content { padding: 16px 14px 24px; }
  .console-col { top: 0; height: 60vh; }
}

@media (max-width: 640px) {
  #modal-acct-edit .sheet { max-height: calc(100dvh - 20px); }
  .sidebar { align-items: stretch; flex-wrap: wrap; gap: 7px; padding: 8px; }
  .side-brand { flex: 1; min-width: 160px; }
  .side-nav { order: 3; flex-basis: 100%; }
  .nav-item { flex: 1 0 auto; justify-content: center; }
  .sidebar > .btn-danger-ghost { align-self: center; }
  .topbar { top: 108px; padding: 10px 12px; gap: 8px; }
  .page-title { flex: 1 0 100%; }
  .topbar-spacer { display: none; }
  .acct-switch { width: 100%; }
  .acct-select { min-width: 0; flex: 1; }
  .acct-switch .btn { flex: 0 0 auto; }
  .run-pill { margin-left: auto; }
  .content { padding: 12px 10px 20px; gap: 12px; }
  .panel { padding: 14px; }
  .status-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-card { min-width: 0; }
  .console-head { padding: 11px 12px; }
  .console-head .grow { display: none; }
  .console-head #console-filter { order: 3; width: 100% !important; }
  .console-body { padding: 12px; }
  .log-row { grid-template-columns: 4ch 6ch minmax(0, 1fr); gap: 6px; }
  .auth-wrap { padding: 20px 12px; }
  .auth-card { padding: 18px; }
}


/* ── pinned-stat picker ──────────────────────────────────────────────────────
   Borrows the palette popover's shell (.theme-pop) and adds a scrolling list,
   because the catalogue is longer than a palette list and should not push the
   panel off a short window. */
.pin-pop { width: 244px; }
.pin-count { float: right; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.pin-list { display: flex; flex-direction: column; gap: 2px; max-height: 46vh; overflow-y: auto; }
.pin-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 5px 8px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink); font: inherit; font-size: 12.5px;
  text-align: left; cursor: pointer;
}
.pin-row:hover:not(:disabled) { background: var(--surface-2, rgba(127,127,127,.10)); }
.pin-row:disabled { opacity: .38; cursor: default; }
.pin-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin-dim { font-size: 10px; color: var(--ink-3); }
.pin-action {
  flex: none; min-width: 42px; text-align: right;
  color: var(--ink-3); font-size: 10px; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase;
}
.pin-row.on .pin-action { color: var(--accent); }

/* The trailing "+ Pin" cell is a button sitting in a strip of divs, so it needs back what a <button>
   takes away · and nothing else: it is a cell of the same instrument, not a card of its own. */
.stat-card.pin-add {
  align-items: flex-start; text-align: left; cursor: pointer;
  color: var(--ink-3); font: inherit; background: transparent;
}
.stat-card.pin-add:hover { color: var(--ink); background: var(--surface-2); }
.stat-card.pin-add:focus-visible { outline: 0; box-shadow: inset 1px 0 0 var(--line), var(--focus); }
.stat-card.pin-add .stat-value { font-size: 15px; color: inherit; }


/* ═══ FINISH ═══════════════════════════════════════════════════════════════════════════════════════
   The details that separate an interface that works from one that feels considered. All of it themed
   through the same tokens, so every palette gets it for free and nothing here needs a second copy. */

/* Selection picks up the accent instead of the browser's blue, which otherwise appears in six
   palettes as the one colour nobody chose. */
::selection { background: var(--accent-wash); color: var(--ink); }

/* Scrollbars. The default light scrollbar inside a dark console is the most obvious tell that a theme
   stops at the edges of the content. */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 6px;
  border: 3px solid var(--surface);   /* inset the thumb so it reads as a rail, not a bar */
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
::-webkit-scrollbar-corner { background: transparent; }

/* One focus treatment for everything reachable by keyboard. :focus-visible, not :focus, so a mouse
   click does not leave a ring behind · the reason the default is so often turned off entirely. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: var(--r-sm);
}

/* Figures line up in columns everywhere numbers are compared. */
.stat-value, .inv-table td, .sg-v, .spark-v, .kbd { font-variant-numeric: tabular-nums; }

/* Interactive things settle rather than snap. Deliberately narrow: transitioning everything is how a
   UI ends up feeling laggy. */
.btn, .nav-item, .seg-btn, .input, .bot-card, .stat-card, .pin-row, .sw-row {
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:active { transform: translateY(.5px); }

/* Floating surfaces get real elevation, replacing the hardcoded shadow they carried. */
.theme-pop, .pin-pop { box-shadow: var(--lift-3); }
.modal-card, .modal .panel { box-shadow: var(--lift-3); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .btn:active { transform: none; }
}


/* ═══ RANKINGS ═════════════════════════════════════════════════════════════════════════════════════
   Layered onto .inv-table rather than a parallel table of its own · the house table already handles
   the geometry, and a second one would drift from it. */

/* The rank cell. Top three carry a metal tone: a tinted fill and a 1px inset ring, no gradient. The
   class is set from the rank VALUE in JS, never from row position · on page two, row one is rank 51
   and a :nth-child rule would decorate it as if it had won. */
.rank-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 22px; padding: 0 7px; border-radius: 11px;
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--ink-2); background: var(--surface-2);
}
.rank-badge.m1 { color:#7a5a12; background:#fbf3dd; box-shadow: inset 0 0 0 1px #e8d296; }
.rank-badge.m2 { color:#5b5f66; background:#f1f2f4; box-shadow: inset 0 0 0 1px #cfd3d9; }
.rank-badge.m3 { color:#7a4a2a; background:#f9ece2; box-shadow: inset 0 0 0 1px #ddb896; }
:root:not([data-theme="light"]) .rank-badge.m1, [data-theme="dark"] .rank-badge.m1 { color:#e8cf92; background:#3a3018; box-shadow: inset 0 0 0 1px #6b5622; }
:root:not([data-theme="light"]) .rank-badge.m2, [data-theme="dark"] .rank-badge.m2 { color:#d5d9df; background:#2b2d31; box-shadow: inset 0 0 0 1px #4c5158; }
:root:not([data-theme="light"]) .rank-badge.m3, [data-theme="dark"] .rank-badge.m3 { color:#e0b48e; background:#3a2a1e; box-shadow: inset 0 0 0 1px #6d4a2f; }

/* Scores get the mono face and tabular figures. Columns of digits that do not line up is the fastest
   way to make a table of numbers feel unconsidered. */
.inv-table td.score { font-family: var(--mono); font-size: 12.5px; }

/* Rows respond, so a long list can be tracked across with the eye or the cursor. */
.inv-table tr:not(:first-child):hover td { background: var(--surface-2); }

/* THE WORDMARK. Sized as a share of the page with a floor and a ceiling, the way the page it comes
   from sizes it · big enough to read as a banner, never big enough to become the page. */
.rank-logo { display: flex; justify-content: center; }
.rank-logo img { width: 28%; min-width: 200px; max-width: 320px; height: auto; }

/* The two figures on the Player / Alliance toggle. */
.seg-btn img { height: 16px; width: auto; vertical-align: -3px; margin-right: 6px; }

/* THE CONTROL BAR of the ported page: server, board, side, search · one row that wraps rather than a
   second tab, because every one of them changes what the same table shows. */
/* flex-direction is NOT optional here. `.panel` is itself a flex COLUMN, and a rule that sets
   display:flex without saying which way inherits that column · which turns this bar into a
   right-aligned stack as tall as the viewport, with the table pushed below the fold. */
.rank-controls { display: flex; flex-direction: row; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.rank-controls .field { min-width: 150px; }

/* The category band. A board's own split · a level bracket on a permanent board, an event's own
   division on an event one · with an arrow either side, exactly where the page it copies puts it. */
.rank-band-row { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px; }
.rank-band { min-width: 220px; text-align: center; font-weight: 600; font-size: 14px; }
.rank-band-row .btn { min-width: 40px; }

/* The whole row carries the metal on a ranking table, not just the badge. Same three tones as
   .rank-badge, at the strength a full row can take without swallowing the text on it. */
.rank-row-m1 td { background: #fbf3dd; }
.rank-row-m2 td { background: #f1f2f4; }
.rank-row-m3 td { background: #f9ece2; }
:root:not([data-theme="light"]) .rank-row-m1 td, [data-theme="dark"] .rank-row-m1 td { background: #302816; }
:root:not([data-theme="light"]) .rank-row-m2 td, [data-theme="dark"] .rank-row-m2 td { background: #26272b; }
:root:not([data-theme="light"]) .rank-row-m3 td, [data-theme="dark"] .rank-row-m3 td { background: #2f2419; }
.rank-table tr.rank-row-m1:hover td, .rank-table tr.rank-row-m2:hover td, .rank-table tr.rank-row-m3:hover td { filter: brightness(1.04); }

/* The countdown chip. Quiet until the last hour, because a deadline days away is information and a
   deadline minutes away is a prompt. */
.rank-timer {
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  padding: 4px 10px; border-radius: 999px;
  color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line);
}
.rank-timer-soon { color: var(--accent); border-color: var(--accent-line); background: var(--accent-wash); }

/* An alliance name is a link into that alliance's own ranking, so it looks like one. */
.rank-link { color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.rank-link:hover { text-decoration-thickness: 2px; }

/* The three medal counts share one column, the way the board itself reports them. */
.rank-medals { white-space: nowrap; }
.rank-medals span + span { margin-left: 10px; }
.rank-medals img { height: 18px; width: auto; vertical-align: -4px; margin-right: 3px; }

.rank-pager { display: flex; flex-direction: row; align-items: center; gap: 6px; flex-wrap: wrap; }
.rank-pager .btn { min-width: 38px; }

/* The account being watched, findable in a long board without reading it. */
.inv-table tr.is-you td { background: var(--accent-wash); }
.inv-table tr.is-you td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.you-tag {
  margin-left: 7px; padding: 1px 6px; border-radius: 9px;
  font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent); background: var(--surface); box-shadow: inset 0 0 0 1px var(--accent-line);
}

/* A header that stays put. Boards are long and the columns stop meaning anything once they scroll off. */
.inv-wrap { max-height: 64vh; overflow: auto; }
.inv-table th { position: sticky; top: 0; z-index: 1; background: var(--surface); }

/* Skeleton rows while a board loads. A spinner says "wait"; a skeleton says what is coming and stops
   the layout jumping when it lands. */
.skel { height: 11px; border-radius: 3px; background: var(--surface-2); position: relative; overflow: hidden; }
.skel::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(127,127,127,.13), transparent);
  animation: skel-shim 1.15s infinite;
}
@keyframes skel-shim { 100% { transform: translateX(100%); } }


/* ═══ EVENT PINS & RULES ═══════════════════════════════════════════════════════════════════════════
   Two surfaces: a card on the status strip carrying a placing, and the sheet that card opens. Both are
   built out of what is already here · .stat-card for the card, .opt-row/.cfg-section for the form ·
   because a rule editor that looks like a different application is a rule editor nobody trusts. */

/* A placing is the one card you act on, so it is a real button. .stat-card gives it the box; these
   three lines give back what a <button> takes away. */
.stat-card.evt-card {
  align-items: flex-start; text-align: left; cursor: pointer;
  font: inherit; color: var(--ink); background: transparent;
}
.stat-card.evt-card:hover { background: var(--surface-2); }
.stat-card.evt-card:focus-visible { outline: 0; box-shadow: inset 1px 0 0 var(--line), var(--focus); }

/* Rules exist on this event / rules exist AND may spend tickets. Two states, one dot, because the
   difference between a stored rule and an armed one is the difference this panel most has to keep
   straight · and a card that shouted it would shout on every account that has ever saved one. */
.evt-dot {
  position: absolute; top: 4px; right: 4px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink-3);
}
.evt-dot.armed { background: var(--warn); }

/* The pin popover carries two lists now · the numbers and the event standings · so each gets a heading
   and its own counter. Same rows underneath both; the heading is the only thing separating them. */
.pin-group {
  margin: 9px 2px 3px; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3);
}
.pin-group:first-child { margin-top: 2px; }   /* after the base rule, or the base margin wins */
.pin-addevt { display: flex; gap: 4px; margin-top: 6px; }
.pin-addevt .input { font-size: 12px; padding: 4px 6px; min-width: 0; }
.pin-addevt #pin-evt-id { width: 56px; }
.pin-addevt #pin-evt-name { flex: 1; }
.pin-note { margin-top: 6px; font-size: 10.5px; line-height: 1.45; color: var(--ink-3); }

/* One rule per row, and the whole sentence on the row: a list of names would mean opening each one to
   find out which is the expensive one. */
.evt-listhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-bottom: 8px; font-size: 12px; color: var(--ink-3);
}
.evt-rule {
  display: flex; flex-direction: column; gap: 4px; width: 100%;
  padding: 8px 10px; margin-bottom: 6px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
}
.evt-rule:hover { border-color: var(--line-strong); }
.evt-rule.active { border-color: var(--accent); background: var(--accent-wash); }
.evt-rule-head { display: flex; align-items: center; gap: 8px; }
.evt-rule-name {
  flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.evt-rule-sum { font-size: 11.5px; line-height: 1.5; color: var(--ink-3); }

/* A control that the chosen condition does not read. Greyed beside the field rather than disabled:
   disabling it would throw the number away, and switching the condition back should not cost the
   operator the value they typed. */
.evt-dim { display: none; align-self: center; margin-right: 8px; font-size: 11px; color: var(--ink-3); }
.evt-dim.on { display: inline; }

/* Warnings, not errors: everything here saves. They are the difference between a rule that stops at
   the bracket edge and one that keeps spending past it. */
.evt-warns { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.evt-warn { display: flex; gap: 8px; align-items: flex-start; font-size: 11.5px; line-height: 1.5; color: var(--ink-2); }
.evt-warn .tag { flex-shrink: 0; }

/* The exact object that will be sent, on demand. A settings form that quietly adds a field of its own
   is how the two halves of a feature drift apart, so this one shows its work. */
.evt-json { margin-top: 12px; }
.evt-json summary { cursor: pointer; font-size: 11.5px; color: var(--ink-3); }
.evt-json pre {
  margin: 8px 0 0; padding: 10px; max-height: 220px; overflow: auto;
  background: var(--console); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--ink-2);
}

/* THE STALE-PAGE PROMPT. Bottom centre, above everything, and quiet · it is information, not an alarm,
   and the page it is sitting on still works. */
.update-bar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 900;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line-strong);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  font-size: 12.5px; color: var(--ink-2); max-width: min(92vw, 640px);
}

/* per-castle rows (option type "Rows") */
.opt-row-wide { grid-template-columns: 1fr; }
.opt-row-wide .opt-ctl { display: block; max-width: none; min-width: 0; }
.rows-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px; margin: 6px 0; border: 1px solid var(--line); border-radius: 8px; }
.rows-fields { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 12px; }
.rows-field .input, .rows-field .ssel, .rows-field .msel { width: 100%; }
.rows-field .input.tiny { width: 100%; text-align: left; }
.rows-field:has(.crafting-mode) { grid-column: 1 / -1; }
.rows-field:has(.crafting-mode) .crafting-mode-options { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
.rows-foot { display: flex; align-items: center; gap: 12px; padding: 4px 0; }

/* Kingdom Sender's per-resource and per-troop overrides deliberately live in
   one compact table: a blank cell visibly means "use shared", while an
   explicit zero remains a real safe limit. */
.opt-row:has(.limit-table) { grid-template-columns: 1fr; }
.opt-row:has(.limit-table) .opt-ctl { display: block; max-width: none; width: 100%; }
.limit-table { width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.limit-head, .limit-row { display: grid; grid-template-columns: minmax(120px, 1.35fr) repeat(3, minmax(90px, 1fr)); gap: 7px; align-items: center; padding: 7px 9px; }
.limit-head { background: var(--surface-2); border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.limit-row { border-bottom: 1px solid var(--line); }
.limit-row:last-child { border-bottom: 0; }
.limit-row strong { font-size: 12px; font-weight: 600; }
.limit-row .input { width: 100%; min-width: 0; text-align: right; }
.limit-note { margin: 0; padding: 8px 9px; }
.limit-foot { display: flex; align-items: center; gap: 10px; padding: 8px 9px; border-top: 1px solid var(--line); }
.limit-foot .limit-note { padding: 0; }
.unit-limit-table .limit-head, .unit-limit-row { grid-template-columns: minmax(170px, 1.5fr) repeat(3, minmax(90px, 1fr)) 28px; }
.limit-unit-pick, .limit-unit-pick .ssel { width: 100%; min-width: 0; }
.limit-rm { color: var(--bad); }
.limit-error { min-height: 0; padding: 0 9px; color: var(--bad); font-size: 12px; }
.limit-error:not(:empty) { padding-bottom: 8px; }

/* ═══ BOT REWIND ═════════════════════════════════════════════════════════════════════════════════
   The dashboard is intentionally restrained; Stats gets the one place allowed to feel celebratory.
   Colour carries meaning (today, week, highlight), while the figures remain compact and scannable. */
.rewind-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 22px;
  padding: clamp(18px, 3vw, 30px); border: 1px solid var(--chrome-line);
  border-radius: 12px; color: var(--chrome-ink); overflow: hidden; position: relative;
  background: radial-gradient(circle at 86% 18%, rgb(168 214 93 / .28), transparent 17rem),
              linear-gradient(135deg, #17261e 0%, #101614 58%, #1d1a16 100%);
  box-shadow: 0 14px 30px rgb(0 0 0 / .12);
}
.rewind-hero::after {
  content: ""; position: absolute; width: 280px; height: 280px; right: 12%; top: -210px;
  border: 1px solid rgb(168 214 93 / .18); border-radius: 50%;
  box-shadow: 0 0 0 28px rgb(168 214 93 / .035), 0 0 0 56px rgb(168 214 93 / .022);
  pointer-events: none;
}
.rewind-hero-copy, .rewind-activity { position: relative; z-index: 1; }
.rewind-kicker, .rewind-card-kicker {
  display: inline-flex; align-items: center; gap: 7px; color: #b9e276; font-size: 10px;
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.rewind-kicker-dot { width: 7px; height: 7px; border-radius: 50%; background: #a8d65d; box-shadow: 0 0 0 4px rgb(168 214 93 / .14); }
.rewind-hero h2 { margin: 8px 0 5px; font-size: clamp(22px, 4vw, 34px); line-height: 1.05; letter-spacing: -.035em; }
.rewind-hero p { margin: 0; color: #a6b2a9; font-size: 13px; max-width: 58ch; }
.rewind-activity { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.rewind-activity-value { color: #dff3c3; font-size: clamp(28px, 5vw, 44px); font-weight: 600; line-height: 1; letter-spacing: -.05em; }
.rewind-activity-label { color: #91a197; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; margin-top: 6px; }
.rewind-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rewind-card {
  min-width: 0; padding: 16px; border: 1px solid var(--line); border-top: 3px solid #7fc35b;
  border-radius: 10px; background: var(--surface); box-shadow: var(--lift-1); overflow: hidden;
}
.rewind-card.rewind-week { border-top-color: #5ec5bc; }
.rewind-card.rewind-best { border-top-color: #e4af55; }
.rewind-card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rewind-card-kicker { color: var(--ink-3); letter-spacing: .1em; }
.rewind-card-period { flex: none; color: var(--ink-3); font-size: 11px; }
.rewind-card h3 { margin: 8px 0 12px; font-size: 19px; letter-spacing: -.025em; }
.rewind-lead { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.rewind-lead strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--accent); font-size: 18px; }
.rewind-week .rewind-lead strong { color: #238e86; }
.rewind-best .rewind-lead strong { color: #b47a1d; }
.rewind-lead span { flex: none; color: var(--ink-3); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.rewind-card-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 9px 0 14px; color: var(--ink-2); font-size: 11px; }
.rewind-card-meta span + span { padding-left: 12px; border-left: 1px solid var(--line); }
.rewind-loot-list { display: flex; flex-direction: column; gap: 8px; }
.rewind-loot-row { display: grid; grid-template-columns: minmax(82px, .7fr) minmax(50px, 1fr) auto; gap: 8px; align-items: center; font-size: 11px; }
.rewind-loot-name { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rewind-loot-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #8bbf62; }
.rewind-loot-dot.stone { background: #8ca9a2; } .rewind-loot-dot.food { background: #50b878; }
.rewind-loot-dot.coins { background: #e2b44f; } .rewind-loot-dot.rubies { background: #d8789b; }
.rewind-loot-dot.aqua { background: #38bdf8; }
.rewind-loot-dot.heritage { background: #b087df; } .rewind-loot-dot.samuraiTokens { background: #e37a49; }
.rewind-loot-track { height: 5px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.rewind-loot-track i { display: block; height: 100%; min-width: 4px; border-radius: inherit; background: #86bd5d; }
.rewind-week .rewind-loot-track i { background: #54b9af; }
.rewind-loot-value { color: var(--ink); font-weight: 600; text-align: right; }
.rewind-no-loot, .rewind-note, .rewind-empty { color: var(--ink-3); font-size: 12px; line-height: 1.55; }
.rewind-note { margin: 0; max-width: 30ch; }
.rewind-empty { grid-column: 1 / -1; padding: 18px; border: 1px dashed var(--line-strong); border-radius: 10px; text-align: center; }
.rewind-muted { background: color-mix(in srgb, var(--surface) 82%, var(--surface-2)); }

@media (max-width: 820px) {
  .rewind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rewind-best { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  body { overflow-x: hidden; }
  .app.active { min-width: 0; }
  .sidebar { position: relative; }
  .topbar { position: sticky; top: 0; }
  .content { min-width: 0; padding: 10px 9px 24px; }
  .rewind-hero { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 17px 15px; }
  .rewind-hero h2 { font-size: 24px; }
  .rewind-hero p { font-size: 12px; }
  .rewind-grid { grid-template-columns: minmax(0, 1fr); }
  .rewind-best { grid-column: auto; }
  .rewind-card { padding: 14px; }
  #stats-tabs { max-width: 100%; overflow-x: auto; }
  #stats-tabs .seg-btn { flex: 0 0 auto; white-space: nowrap; }
  .rows-fields { grid-template-columns: minmax(0, 1fr); }
  .rows-row { gap: 7px; }
  .limit-table { overflow-x: auto; }
  .limit-head, .limit-row { min-width: 500px; }
  .status-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-card { padding: 10px 11px; }
  .stat-value { font-size: 15px; }
}

@media (max-width: 360px) {
  .rewind-hero { grid-template-columns: 1fr; }
  .rewind-activity { align-items: flex-start; text-align: left; flex-direction: row; gap: 7px; }
  .rewind-activity-label { align-self: flex-end; margin-bottom: 3px; }
  .rewind-card-meta { gap: 5px 8px; }
  .rewind-card-meta span + span { padding-left: 8px; }
  .rewind-loot-row { grid-template-columns: minmax(78px, .8fr) minmax(38px, 1fr) auto; gap: 6px; }
}

/* ═══ STORM DISCOVERY SHEET ═══════════════════════════════════════════════════════════════════════
   A compact tracker view inside the Storm settings sheet. The table stays readable on desktop and
   becomes a horizontally scrollable data surface on a phone, preserving every coordinate column. */
.config-tabs {
  display: flex; gap: 4px; padding: 8px 16px 0;
  border-bottom: 1px solid var(--line); background: var(--surface);
}
.config-tab {
  border: 0; border-bottom: 2px solid transparent; padding: 8px 12px 10px;
  background: transparent; color: var(--ink-3); font: inherit; font-size: 12px;
  cursor: pointer;
}
.config-tab:hover { color: var(--ink); }
.config-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.storm-discovery {
  min-height: 0; flex: 1; overflow: auto; padding: 18px 20px 20px;
  display: flex; flex-direction: column; gap: 14px;
  background: color-mix(in srgb, var(--surface) 94%, var(--accent-wash));
}
.storm-discovery-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.storm-discovery-kicker {
  color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 4px;
}
.storm-discovery-head h4 { margin: 0; font-size: 17px; letter-spacing: -.01em; }
.storm-discovery-head p { margin: 5px 0 0; max-width: 64ch; color: var(--ink-3); font-size: 11.5px; line-height: 1.5; }
.storm-discovery-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.storm-live-pill, .storm-state, .storm-tag {
  display: inline-flex; align-items: center; width: fit-content; white-space: nowrap;
  border-radius: 999px; font-size: 10px; line-height: 1; font-weight: 600;
}
.storm-live-pill { padding: 6px 9px; background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--line); }
.storm-live-pill.live { color: #2da66a; border-color: color-mix(in srgb, #2da66a 42%, var(--line)); background: color-mix(in srgb, #2da66a 10%, var(--surface)); }
.storm-live-pill.cached { color: var(--ink-2); }
.storm-discovery-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px 14px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  color: var(--ink-3); font-size: 11px;
}
.storm-discovery-meta b { color: var(--ink); font-size: 13px; }
.storm-discovery-scan { margin-left: auto; }
.storm-discovery-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.storm-discovery-tab {
  border: 0; border-bottom: 2px solid transparent; padding: 8px 11px 9px;
  background: transparent; color: var(--ink-3); font: inherit; font-size: 12px; cursor: pointer;
}
.storm-discovery-tab span { margin-left: 4px; color: var(--ink-3); font-size: 10px; }
.storm-discovery-tab:hover { color: var(--ink); }
.storm-discovery-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.storm-discovery-toolbar { display: flex; align-items: center; gap: 10px; }
.storm-discovery-toolbar .input { flex: 1; min-width: 0; }
.storm-discovery-toolbar > span { flex: none; color: var(--ink-3); font-size: 11px; }
.storm-discovery-table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.storm-discovery-table { width: 100%; min-width: 650px; border-collapse: collapse; font-size: 11.5px; }
.storm-discovery-table th {
  position: sticky; top: 0; z-index: 1; padding: 9px 10px; text-align: left;
  background: var(--surface-2); color: var(--ink-3); font-size: 10px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.storm-discovery-table td { padding: 9px 10px; border-top: 1px solid var(--line); color: var(--ink-2); vertical-align: middle; }
.storm-discovery-table tr:hover td { background: color-mix(in srgb, var(--accent-wash) 38%, var(--surface)); }
.storm-discovery-table td strong { display: block; color: var(--ink); font-size: 11.5px; font-weight: 600; }
.storm-discovery-table td small { display: block; margin-top: 2px; color: var(--ink-3); font-size: 10px; }
.storm-tag { padding: 5px 8px; text-transform: capitalize; background: var(--surface-2); color: var(--ink-2); }
.storm-tag.easy { color: #7dbb47; background: color-mix(in srgb, #7dbb47 12%, var(--surface)); }
.storm-tag.hard { color: #e39a62; background: color-mix(in srgb, #e39a62 12%, var(--surface)); }
.storm-state { padding: 5px 8px; text-transform: capitalize; background: var(--surface-2); color: var(--ink-2); }
.storm-state.attackable, .storm-state.free { color: #2da66a; background: color-mix(in srgb, #2da66a 11%, var(--surface)); }
.storm-state.cooling, .storm-state.respawning { color: #d49b3c; background: color-mix(in srgb, #d49b3c 11%, var(--surface)); }
.storm-state.sunk, .storm-state.occupied, .storm-state.hidden { color: var(--ink-3); }
.storm-coords { font-family: var(--mono); white-space: nowrap; color: var(--ink) !important; }
.storm-discovery-empty {
  padding: 22px; border: 1px dashed var(--line-strong); border-radius: 8px;
  color: var(--ink-3); text-align: center; font-size: 12px;
}
.storm-discovery-empty-large { min-height: 260px; display: flex; align-items: center; justify-content: center; gap: 8px; flex-direction: column; }
.storm-discovery-empty-large strong { color: var(--ink); font-size: 14px; }
.storm-discovery-empty-large span { max-width: 40ch; line-height: 1.5; }
.storm-empty-icon { color: var(--accent); font-size: 32px; line-height: 1; opacity: .8; }

@media (max-width: 640px) {
  .storm-discovery { padding: 15px 13px 16px; }
  .storm-discovery-head { flex-direction: column; gap: 10px; }
  .storm-discovery-actions { justify-content: space-between; width: 100%; }
  .storm-discovery-scan { width: 100%; margin-left: 0; }
  .storm-discovery-toolbar { align-items: stretch; flex-direction: column; }
  .storm-discovery-toolbar > span { text-align: right; }
  .config-tabs { padding-inline: 12px; }
}

/* ═══ STORM TRACKER SKIN ══════════════════════════════════════════════════════════════════════════
   Shared visual language for the whole control surface. The public Storm Tracker uses a dark,
   cartographic command-centre treatment: a quiet map-like canvas, green water/land accents, compact
   telemetry and bright status signals. This layer applies that language to every existing page and
   component without changing markup, settings, or bot behaviour. The named custom palettes still
   work; the default palette is the one that becomes Storm Tracker. */

/* The default/ember variables that used to live here are owned by the Ledger defaults at the end of
   this file. The component rules below remain and read whichever palette or mode is active. */

body {
  background-color: var(--ground);
  background-image:
    radial-gradient(circle at 82% -8%, rgb(91 199 165 / .15), transparent 30rem),
    radial-gradient(circle at 4% 95%, rgb(42 130 106 / .12), transparent 28rem),
    linear-gradient(rgb(80 161 132 / .035) 1px, transparent 1px),
    linear-gradient(90deg, rgb(80 161 132 / .035) 1px, transparent 1px);
  background-size: auto, auto, 44px 44px, 44px 44px;
  background-attachment: fixed;
}

.app.active { grid-template-columns: clamp(230px, 20vw, 286px) minmax(0, 1fr); }

.sidebar {
  background:
    radial-gradient(circle at 10% 0%, rgb(120 210 181 / .08), transparent 18rem),
    linear-gradient(180deg, var(--chrome-2), var(--chrome));
  border-right-color: var(--chrome-line);
  box-shadow: 10px 0 34px rgb(0 0 0 / .18);
}
.side-brand {
  border-color: color-mix(in srgb, var(--storm) 28%, var(--chrome-line));
  background: color-mix(in srgb, var(--storm-deep) 28%, var(--chrome-2));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .04);
}
.side-brand:hover { background: color-mix(in srgb, var(--storm-deep) 46%, var(--chrome-2)); }
.side-brand-name { letter-spacing: .045em; }
.side-brand-sub { color: color-mix(in srgb, var(--chrome-muted) 88%, var(--storm)); }
.side-brand .brand-mark { color: var(--storm); filter: drop-shadow(0 0 8px rgb(120 210 181 / .22)); }
.side-nav { gap: 5px; }
.nav-item {
  border: 1px solid transparent;
  color: var(--chrome-muted);
  border-radius: 8px;
}
.nav-item:hover {
  background: rgb(120 210 181 / .07);
  border-color: rgb(120 210 181 / .12);
  color: var(--chrome-ink);
}
.nav-item.active {
  background: linear-gradient(90deg, rgb(120 210 181 / .16), rgb(120 210 181 / .05));
  border-color: rgb(120 210 181 / .22);
  color: var(--chrome-ink);
  box-shadow: inset 3px 0 0 var(--storm), 0 3px 12px rgb(0 0 0 / .12);
}
.nav-item.active::before { display: none; }
.nav-item.active svg { color: var(--storm); filter: drop-shadow(0 0 5px rgb(120 210 181 / .32)); }
.side-conn { border-top-color: var(--chrome-line); }

.topbar {
  background: color-mix(in srgb, var(--chrome) 94%, transparent);
  border-bottom-color: var(--chrome-line);
  box-shadow: 0 8px 28px rgb(0 0 0 / .16);
  backdrop-filter: blur(14px);
}
.page-title { letter-spacing: .025em; }
.acct-select, .topbar .btn:not(.run-pill) {
  border-color: var(--chrome-line);
  background: color-mix(in srgb, var(--chrome-2) 78%, transparent);
}
.topbar .btn:not(.run-pill):hover { border-color: var(--storm); background: rgb(120 210 181 / .08); }
.run-pill { box-shadow: 0 0 0 1px rgb(120 210 181 / .15), 0 5px 14px rgb(0 0 0 / .16); }

.content { position: relative; }
.content::before {
  content: "";
  position: fixed;
  inset: 64px 0 0;
  pointer-events: none;
  opacity: .22;
  background: radial-gradient(circle at 50% 0%, transparent 0 20rem, rgb(0 0 0 / .09) 80rem);
  z-index: -1;
}

.panel, .console-col, .status-strip {
  border-color: var(--line);
  border-radius: 12px;
  box-shadow: var(--lift-1);
}
.panel {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 97%, var(--storm) 3%), var(--surface));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .035), var(--lift-1);
}
.panel-title { letter-spacing: .02em; }
.panel-sub { color: var(--ink-3); }
.status-strip {
  background: linear-gradient(90deg, color-mix(in srgb, var(--surface) 96%, var(--storm) 4%), var(--surface));
  border-color: var(--line);
}
.stat-card { border-color: var(--line); }
.stat-card:hover { background: var(--surface-2); }
.stat-value { color: var(--ink); }
.stat-label { color: var(--ink-3); }

.bot-list { gap: 10px; }
.bot-card {
  border-color: var(--line);
  border-radius: 10px;
  background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--surface) 92%, var(--storm) 8%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .025), var(--lift-1);
}
.bot-card:hover { border-color: color-mix(in srgb, var(--storm) 46%, var(--line)); box-shadow: var(--lift-2); }
.bot-card.on {
  border-left: 3px solid var(--storm);
  padding-left: 9px;
  box-shadow: inset 0 0 22px rgb(120 210 181 / .045), var(--lift-1);
}
.bot-card.on .bot-state { color: var(--storm); }
.bot-ico { background: color-mix(in srgb, var(--storm-deep) 34%, var(--surface-2)); border-color: var(--line-strong); }

.console-col {
  background: var(--console);
  border-color: var(--line);
  box-shadow: inset 0 1px 0 rgb(120 210 181 / .04), var(--lift-2);
}
.console-head { background: linear-gradient(90deg, var(--surface), color-mix(in srgb, var(--surface) 85%, var(--storm) 15%)); border-bottom-color: var(--line); }
.console-title { color: var(--ink); letter-spacing: .025em; }
.console-live-dot { background: var(--ok); box-shadow: 0 0 0 4px rgb(101 213 155 / .12), 0 0 12px rgb(101 213 155 / .48); }
.console-body { background: var(--console); }
.log-row:hover { background: rgb(120 210 181 / .055); }
.log-tag { border-color: var(--line-strong); }

.seg {
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 9px;
}
.seg-btn { border-radius: 7px; color: var(--ink-3); }
.seg-btn:hover { color: var(--ink); background: rgb(120 210 181 / .08); }
.seg-btn.active { background: var(--surface); color: var(--accent); box-shadow: 0 2px 6px rgb(0 0 0 / .15); }

.btn {
  border-radius: 8px;
  border-color: var(--line-strong);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .035);
}
.btn:hover { border-color: var(--accent); box-shadow: 0 0 0 1px rgb(120 210 181 / .1); }
.btn-primary {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 72%, #2b9a7e));
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 5px 16px rgb(42 154 126 / .22), inset 0 1px 0 rgb(255 255 255 / .18);
}
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 7px 19px rgb(42 154 126 / .3); }
.btn-danger-ghost:hover { border-color: var(--bad); }

.input, select, textarea {
  border-color: var(--line-strong);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 88%, var(--surface-2));
  color: var(--ink);
}
.input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line-strong)); }
.input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: var(--focus); }
::placeholder { color: var(--ink-3); }
.hint, .opt-info, .info { color: var(--ink-3); }
.tag, .chip, .kbd { border-color: var(--line-strong); background: var(--surface-2); color: var(--ink-2); }

.sheet, .modal-card, .theme-pop, .pin-pop, .ssel-pop {
  border-color: var(--line-strong);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 94%, var(--surface-2)));
  box-shadow: var(--lift-3);
}
.overlay { background: rgb(1 10 8 / .72); backdrop-filter: blur(4px); }
.sheet-head, .sheet-foot { border-color: var(--line); }
.sheet-head { background: linear-gradient(90deg, var(--surface), color-mix(in srgb, var(--surface) 89%, var(--storm) 11%)); }
.sheet-foot { background: color-mix(in srgb, var(--surface) 94%, var(--surface-2)); }
.cfg-section { border-top-color: var(--line); }
.opt-row, .rows-row, .sw-row, .pin-row { border-color: var(--line); }
.opt-row:hover, .rows-row:hover { background: rgb(120 210 181 / .04); }
.sw-row:hover, .pin-row:hover:not(:disabled) { background: rgb(120 210 181 / .08); }

.table-wrap, .inv-wrap, .rank-table, .storm-discovery-table-wrap {
  border-color: var(--line);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .02);
}
.inv-table, .rank-table, .storm-discovery-table { background: var(--surface); }
.inv-table th, .rank-table th, .storm-discovery-table th {
  background: linear-gradient(180deg, var(--surface-2), color-mix(in srgb, var(--surface-2) 78%, var(--storm) 22%));
  color: var(--ink-3);
  border-bottom-color: var(--line-strong);
}
.inv-table td, .rank-table td, .storm-discovery-table td { border-top-color: var(--line); }
.inv-table tr:hover td, .rank-row:hover td, .storm-discovery-table tr:hover td { background: rgb(120 210 181 / .055); }
.rank-row.is-you td { background: color-mix(in srgb, var(--accent-wash) 62%, var(--surface)); }

.storm-discovery {
  background:
    linear-gradient(rgb(82 164 134 / .04) 1px, transparent 1px),
    linear-gradient(90deg, rgb(82 164 134 / .04) 1px, transparent 1px),
    color-mix(in srgb, var(--surface) 92%, var(--storm) 8%);
  background-size: 30px 30px;
}
.config-tabs, .storm-discovery-tabs { border-bottom-color: var(--line-strong); }
.config-tab.active, .storm-discovery-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.storm-live-pill.live, .storm-state.attackable, .storm-state.free { color: var(--ok); }
.storm-tag.easy { color: var(--storm); }
.storm-tag.hard { color: var(--warn); }

.auth-wrap {
  background-color: var(--chrome);
  background-image:
    linear-gradient(rgb(7 17 15 / .72), rgb(7 17 15 / .92)),
    radial-gradient(circle at 50% 8%, rgb(120 210 181 / .25), transparent 32rem),
    linear-gradient(rgb(120 210 181 / .04) 1px, transparent 1px),
    linear-gradient(90deg, rgb(120 210 181 / .04) 1px, transparent 1px);
  background-size: auto, auto, 42px 42px, 42px 42px;
}
.auth-brand .brand-mark { color: var(--storm); border-color: rgb(120 210 181 / .42); background: var(--chrome-2); box-shadow: 0 0 0 8px rgb(120 210 181 / .07), 0 0 32px rgb(120 210 181 / .12); }
.auth-brand h1 em { color: var(--storm); }
.auth-card { border-color: var(--chrome-line); background: color-mix(in srgb, var(--chrome-2) 96%, black); box-shadow: var(--lift-3), 0 0 0 1px rgb(120 210 181 / .045); }
.auth-tabs { background: var(--chrome); border-color: var(--chrome-line); }
.auth-tab.active { background: var(--storm-deep); color: var(--chrome-ink); }
.auth-card .input { background: var(--chrome); border-color: var(--chrome-line); }
.auth-card .input:focus { border-color: var(--storm); }
.auth-card .btn-primary { background: var(--storm); border-color: var(--storm); color: #07110f; }

.theme-pop-title, .guide-h, .help-card h3, .ann-title, .tpl-title { color: var(--ink); }
.guide-article, .help-card, .ann-card, .evt-card, .tpl-card, .spark-card, .rewind-card {
  border-color: var(--line);
  border-radius: 11px;
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 94%, var(--surface-2)));
  box-shadow: var(--lift-1);
}
.guide-article:hover, .help-card:hover, .ann-card:hover, .evt-card:hover, .tpl-card:hover { border-color: color-mix(in srgb, var(--storm) 48%, var(--line)); }
.guide-tip, .help-ico, .ann-date, .rank-band { background: var(--accent-wash); border-color: var(--accent-line); }
.guide-badge, .rank-badge { border-color: var(--line-strong); }
.spark-card { background: var(--surface); }
.rewind-hero { background: radial-gradient(circle at 86% 18%, rgb(120 210 181 / .28), transparent 17rem), linear-gradient(135deg, #133a2e 0%, #081612 62%, #182c25 100%); border-color: var(--chrome-line); }
.rewind-card { border-top-color: var(--storm); }
.rewind-week { border-top-color: #67c8c0; }
.rewind-best { border-top-color: #e4b45f; }

/* Keep dense data usable on narrow screens. These rules complement the existing mobile layout and
   avoid forcing the tracker’s wide tables or multi-field settings rows to shrink into unreadable text. */
@media (max-width: 920px) {
  .app.active { grid-template-columns: 1fr; }
  .sidebar { box-shadow: 0 8px 26px rgb(0 0 0 / .18); }
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .console-col { min-height: 420px; }
}

@media (max-width: 640px) {
  .topbar { backdrop-filter: blur(12px); }
  .content { padding-inline: 10px; }
  .panel { padding: 14px; border-radius: 10px; }
  .status-strip { border-radius: 10px; }
  .stat-card { padding: 11px 10px; }
  .bot-card { padding: 10px; }
  .sheet, .modal-card { max-height: calc(100dvh - 16px); border-radius: 12px; }
  .sheet-head, .sheet-foot { padding-inline: 14px; }
  .sheet-body { padding-inline: 14px; }
  .storm-discovery-table-wrap, .inv-wrap, .rank-table { max-width: 100%; overflow-x: auto; }
  .storm-discovery-table, .inv-table, .rank-table { min-width: 610px; }
  .rows-row { flex-direction: column; }
  .rows-row .x-btn { align-self: flex-end; order: -1; }
}

@media (max-width: 380px) {
  body { font-size: 13px; }
  .side-brand-name { font-size: 13px; }
  .nav-item { padding-inline: 8px; }
  .topbar { padding-inline: 9px; }
  .acct-select { font-size: 12px; }
  .panel { padding: 12px; }
}

/* The Storm map is a data surface, so it gets the room of the viewport instead of the narrow form width.
   Keep this scoped to the Storm sheet: other module settings retain their comfortable reading width. */
.sheet.sheet-wide.storm-sheet {
  width: min(1240px, calc(100vw - 24px));
  max-width: 1240px;
  max-height: 94vh;
}
.storm-sheet .sheet-head { padding-block: 11px; }
.storm-sheet .sheet-head .sub { font-size: 11px; }
.storm-sheet .storm-discovery {
  min-height: 0;
  padding: 14px 20px 16px;
  gap: 10px;
}
.storm-sheet .storm-discovery-head { align-items: center; }
.storm-sheet .storm-discovery-head h4 { font-size: 16px; }

/* ═══ WARCHIEF FIELD COMMAND ════════════════════════════════════════════════
   The previous dark theme had the right utility, but it still read like a
   collection of generic software panels. This layer gives the shell a clear
   point of view: obsidian framing, a gold command accent, emerald used only
   for live intelligence, and a little of the game world in the surfaces.
   It stays at the end of the sheet so every existing control and view keeps
   its behavioural contract. */
/* The Field Command variable layer is retired; the Ledger defaults and the named palettes own the
   semantic variables. Its component rules below remain and read the active palette and mode. */
body {
  background-color: var(--ground);
  background-image:
    radial-gradient(ellipse 64rem 44rem at 78% -18%, rgb(91 145 72 / .17), transparent 64%),
    radial-gradient(ellipse 46rem 30rem at 17% 108%, rgb(169 123 37 / .1), transparent 68%),
    linear-gradient(rgb(180 202 146 / .026) 1px, transparent 1px),
    linear-gradient(90deg, rgb(180 202 146 / .026) 1px, transparent 1px);
  background-size: auto, auto, 52px 52px, 52px 52px;
}

.app.active { grid-template-columns: clamp(246px, 20vw, 286px) minmax(0, 1fr); }

.sidebar {
  gap: 16px;
  padding: 12px 11px;
  background:
    linear-gradient(180deg, rgb(8 13 9 / .22), transparent 12rem),
    radial-gradient(circle at 0% 0%, rgb(128 188 116 / .08), transparent 17rem),
    var(--chrome);
  border-right-color: var(--chrome-line);
  box-shadow: 14px 0 38px rgb(0 0 0 / .22);
}
.side-brand {
  min-height: 72px;
  padding: 12px 11px;
  border-radius: 10px;
  border-color: rgb(217 170 78 / .23);
  background:
    radial-gradient(circle at 82% 8%, rgb(217 170 78 / .12), transparent 7rem),
    linear-gradient(135deg, #192417, #10170f 70%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .05), 0 8px 24px rgb(0 0 0 / .18);
}
.side-brand:hover { background: linear-gradient(135deg, #202d1c, #121a11 70%); }
.side-brand .brand-mark {
  width: 38px;
  height: 38px;
  padding: 5px;
  border: 1px solid rgb(217 170 78 / .4);
  border-radius: 50%;
  color: var(--accent);
  background: rgb(8 12 8 / .72);
  box-shadow: 0 0 0 4px rgb(217 170 78 / .055), 0 0 18px rgb(217 170 78 / .12);
}
.side-brand-name { color: var(--chrome-ink); font-size: 15px; letter-spacing: .09em; }
.side-brand-name em { color: var(--chrome-accent); }
.side-brand-sub { color: #9ea994; letter-spacing: .04em; }
.side-nav { gap: 2px; }
.nav-section {
  padding: 15px 10px 5px;
  color: #747d6f;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
}
.nav-section:first-child { padding-top: 5px; }
.nav-item {
  min-height: 40px;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--chrome-muted);
  font-size: 13px;
}
.nav-item svg {
  width: 18px;
  height: 18px;
  padding: 3px;
  border: 1px solid rgb(255 255 255 / .055);
  border-radius: 5px;
  color: #a8b39d;
  background: rgb(255 255 255 / .035);
  opacity: 1;
}
.nav-item:hover {
  border-color: rgb(217 170 78 / .12);
  background: linear-gradient(90deg, rgb(217 170 78 / .075), transparent);
  color: var(--chrome-ink);
}
.nav-item.active {
  border-color: rgb(217 170 78 / .3);
  background: linear-gradient(90deg, rgb(217 170 78 / .2), rgb(217 170 78 / .055));
  color: #fff8e9;
  box-shadow: inset 3px 0 0 var(--accent), inset 0 1px 0 rgb(255 255 255 / .045), 0 6px 17px rgb(0 0 0 / .14);
}
.nav-item.active svg {
  color: var(--accent);
  border-color: rgb(217 170 78 / .4);
  background: rgb(74 55 20 / .54);
  filter: drop-shadow(0 0 6px rgb(217 170 78 / .26));
}
.side-conn { border-top-color: var(--chrome-line); color: #99a391; }
.conn-dot.on { background: var(--ok); box-shadow: 0 0 0 4px rgb(135 206 152 / .1), 0 0 12px rgb(135 206 152 / .36); }

.topbar {
  min-height: 68px;
  padding-inline: clamp(18px, 2.6vw, 36px);
  border-bottom-color: rgb(217 170 78 / .16);
  background: color-mix(in srgb, var(--chrome) 94%, transparent);
  box-shadow: 0 10px 32px rgb(0 0 0 / .22);
}
.page-title { color: var(--chrome-ink); font-size: 16px; letter-spacing: .025em; }
.page-title::before {
  content: "WARCHIEF / ";
  color: #8a927f;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
}
.acct-select, .topbar .btn:not(.run-pill) {
  border-color: var(--chrome-line);
  background: rgb(255 255 255 / .035);
  color: var(--chrome-ink);
}
.topbar .btn:not(.run-pill):hover { border-color: rgb(217 170 78 / .52); background: rgb(217 170 78 / .09); }
.run-pill {
  border-color: #d7a342;
  background: linear-gradient(135deg, #e4bc67, #c68b2d);
  color: #201605;
  box-shadow: 0 5px 18px rgb(185 126 31 / .24), inset 0 1px 0 rgb(255 255 255 / .3);
}

.content { gap: 20px; padding: clamp(18px, 2.7vw, 36px); }
.content::before { opacity: .34; }
.panel, .console-col, .status-strip {
  border-color: var(--line);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .035), var(--lift-1);
}
.panel {
  background:
    linear-gradient(145deg, rgb(255 255 255 / .02), transparent 22%),
    linear-gradient(180deg, #131b13, #101610);
}
.panel-title { color: var(--ink); letter-spacing: .03em; }
.panel-sub { color: var(--ink-3); }
.status-strip {
  background: linear-gradient(90deg, rgb(217 170 78 / .07), transparent 30%), #101710;
  border-color: rgb(217 170 78 / .2);
}
.stat-card { box-shadow: inset 1px 0 0 var(--line); }
.stat-card:first-child { box-shadow: none; }
.stat-value.accent { color: var(--accent); }

.command-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 168px;
  overflow: hidden;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgb(217 170 78 / .3);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgb(8 14 9 / .22) 0%, rgb(8 14 9 / .36) 47%, rgb(8 14 9 / .86) 100%),
    radial-gradient(circle at 76% 32%, rgb(145 199 115 / .3), transparent 15rem),
    linear-gradient(135deg, #284824, #122619 53%, #0b120c 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .075), var(--lift-2);
}
.command-hero::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: min(38%, 400px);
  opacity: .34;
  background: url("icons/attackStormForts.png") no-repeat center 60% / min(230px, 88%);
  filter: drop-shadow(0 18px 26px rgb(0 0 0 / .55)) saturate(.85);
  pointer-events: none;
}
.command-hero-copy { position: relative; z-index: 1; max-width: 680px; }
.command-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #d4bf87;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.command-kicker-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 12px rgb(135 206 152 / .7); }
.command-hero h1 { margin: 10px 0 6px; color: #fffdf5; font-size: clamp(25px, 3vw, 38px); letter-spacing: -.045em; line-height: 1; }
.command-hero p { max-width: 500px; margin: 0; color: #c4cebe; font-size: 13px; line-height: 1.6; }
.command-sigil {
  position: relative;
  z-index: 1;
  display: grid;
  width: 74px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgb(217 170 78 / .52);
  border-radius: 50%;
  color: #f9df9e;
  font-family: Georgia, serif;
  font-size: 30px;
  text-shadow: 0 0 14px rgb(217 170 78 / .55);
  background: radial-gradient(circle, rgb(81 63 26 / .88), rgb(18 23 14 / .88) 68%);
  box-shadow: 0 0 0 8px rgb(217 170 78 / .055), 0 18px 36px rgb(0 0 0 / .28);
}
.command-sigil-ring { position: absolute; inset: 8px; border: 1px dashed rgb(217 170 78 / .52); border-radius: 50%; }

.dash-grid { gap: 20px; }
.seg { border-color: var(--line); border-radius: 10px; background: #0c120c; }
.seg-btn { border-radius: 8px; color: var(--ink-3); }
.seg-btn:hover { background: rgb(217 170 78 / .08); color: var(--ink); }
.seg-btn.active { color: #f4dfab; background: linear-gradient(135deg, rgb(217 170 78 / .25), rgb(217 170 78 / .08)); box-shadow: inset 0 0 0 1px rgb(217 170 78 / .14), 0 2px 8px rgb(0 0 0 / .16); }
.bot-list { gap: 11px; }
.bot-card {
  min-height: 66px;
  border-color: var(--line);
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgb(135 206 152 / .035), transparent 45%),
    #111811;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .026), var(--lift-1);
}
.bot-card:hover { border-color: rgb(217 170 78 / .42); box-shadow: var(--lift-2); }
.bot-card.on { border-left: 3px solid var(--accent); background: linear-gradient(90deg, rgb(217 170 78 / .13), transparent 52%), #151a10; }
.bot-card.on .bot-state { color: #e6bd66; }
.bot-ico { background: #182318; border-color: #3d4b37; }

.console-col { border-color: #354232; background: var(--console); box-shadow: inset 0 1px 0 rgb(255 255 255 / .04), var(--lift-2); }
.console-head { border-bottom-color: #354232; background: linear-gradient(90deg, #151e14, #111811); }
.console-title { color: #f0f2e8; }
.console-live-dot { background: var(--ok); box-shadow: 0 0 0 4px rgb(135 206 152 / .12), 0 0 12px rgb(135 206 152 / .48); }
.console-body { background: linear-gradient(180deg, rgb(255 255 255 / .012), transparent 9rem), var(--console); }
.log-row:hover { background: rgb(217 170 78 / .055); }

.btn { border-radius: 8px; border-color: var(--line-strong); background: #182017; color: var(--ink); }
.btn:hover { border-color: rgb(217 170 78 / .6); background: #222b1d; }
.btn-primary { border-color: #d9aa4e; background: linear-gradient(135deg, #e7bf6a, #c68d32); color: #211706; box-shadow: 0 5px 16px rgb(185 126 31 / .24), inset 0 1px 0 rgb(255 255 255 / .28); }
.btn-primary:hover { box-shadow: 0 7px 21px rgb(185 126 31 / .32), inset 0 1px 0 rgb(255 255 255 / .28); }
.input, select, textarea { border-color: var(--line-strong); border-radius: 8px; background: #0c120c; color: var(--ink); }
.input:hover, select:hover, textarea:hover { border-color: rgb(217 170 78 / .5); }
.input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: var(--focus); }

.auth-wrap {
  gap: 26px;
  background-color: #080d09;
  background-image:
    linear-gradient(90deg, rgb(5 9 6 / .22), rgb(5 9 6 / .66)),
    radial-gradient(ellipse 48rem 35rem at 76% 12%, rgb(95 151 75 / .28), transparent 67%),
    linear-gradient(rgb(209 176 96 / .04) 1px, transparent 1px),
    linear-gradient(90deg, rgb(209 176 96 / .04) 1px, transparent 1px);
  background-size: auto, auto, 48px 48px, 48px 48px;
}
.auth-wrap::before {
  width: min(74vw, 820px);
  border-color: rgb(217 170 78 / .13);
  box-shadow: 0 0 0 54px rgb(217 170 78 / .022), 0 0 0 108px rgb(217 170 78 / .012);
}
.auth-brand .brand-mark { border-color: rgb(217 170 78 / .5); color: var(--accent); background: #12190f; box-shadow: 0 0 0 8px rgb(217 170 78 / .06), 0 0 34px rgb(217 170 78 / .13); }
.auth-brand h1 { color: #fbf4e3; letter-spacing: .13em; }
.auth-brand h1 em { color: var(--accent); }
.auth-brand p { color: #b7bead; }
.auth-card { border-color: rgb(217 170 78 / .25); border-radius: 14px; background: linear-gradient(180deg, rgb(24 33 21 / .96), rgb(12 18 12 / .98)); box-shadow: var(--lift-3), inset 0 1px 0 rgb(255 255 255 / .045); }
.auth-tabs { border: 1px solid #33402f; background: #0a100a; }
.auth-tab.active { background: linear-gradient(135deg, #604519, #3c2e13); color: #ffedbd; }
.auth-card .input { background: #080d08; border-color: #3b4a37; color: #f3f2eb; }
.auth-card .input:focus { border-color: var(--accent); outline-color: var(--accent); }
.auth-card .btn-primary { border-color: var(--accent); background: linear-gradient(135deg, #e7bf6a, #c68d32); color: #211706; }
.auth-foot { color: #929b8b; }

@media (max-width: 920px) {
  .app.active { grid-template-columns: 1fr; }
  .nav-section { display: none; }
  .command-hero { min-height: 148px; }
}
@media (max-width: 640px) {
  .page-title::before { display: none; }
  .command-hero { min-height: 0; padding: 21px 18px; }
  .command-hero::after, .command-sigil { display: none; }
  .command-hero h1 { font-size: 27px; }
  .command-hero p { font-size: 12px; }
  .panel, .console-col, .status-strip { border-radius: 11px; }
}

/* ═══ THE WARCHIEF LEDGER ══════════════════════════════════════════════════
   A complete visual reset from the earlier glowing command-centre layer.
   Warchief is now a richly illustrated ledger: warm paper for work, ink-dark
   navigation for orientation, and real world art at the moments that deserve
   it. The data remains dense; its framing no longer looks like a graph paper
   demo. */
/* The ledger is the default look. Palette and mode remain real controls: named palettes keep their
   own semantic variables, and this block supplies the paper defaults only when no named palette is
   selected. The ledger components below read the semantic variables, so choosing a palette or the
   light/dark switch changes the workbench instead of being flattened. */
:root:not([data-palette]),
:root[data-palette="ember"] {
  color-scheme: light;
  --ground: #e8e2d6;
  --surface: #fffdf8;
  --surface-2: #f3ecdf;
  --line: #ded3c1;
  --line-strong: #c9b99f;
  --ink: #263126;
  --ink-2: #52604e;
  --ink-3: #7b8576;
  --accent: #a86f32;
  --accent-ink: #fffaf0;
  --accent-wash: #f4e3c8;
  --accent-line: #d2ad78;
  --ok: #487a59;
  --ok-wash: #e4eee4;
  --warn: #a66a23;
  --warn-wash: #faefd9;
  --bad: #ad5346;
  --bad-wash: #f7e3df;
  --console: #20271f;
  --chrome: #1b241d;
  --chrome-2: #263329;
  --chrome-line: #41503f;
  --chrome-ink: #f6f0e2;
  --chrome-muted: #bdc4b4;
  --storm: #52795c;
  --storm-deep: #385741;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-palette]),
  :root:not([data-theme="light"])[data-palette="ember"] {
    color-scheme: dark;
    --ground: #141712;
    --surface: #1d211a;
    --surface-2: #262b22;
    --line: #394030;
    --line-strong: #4f5942;
    --ink: #efe9dc;
    --ink-2: #c4bfb1;
    --ink-3: #8f8a7b;
    --accent: #d6a45c;
    --accent-ink: #1b1305;
    --accent-wash: #332817;
    --accent-line: #6b552e;
    --ok: #7fbf8f;
    --ok-wash: #1b2e22;
    --warn: #e0b46a;
    --warn-wash: #352a18;
    --bad: #e28b80;
    --bad-wash: #35201f;
    --console: #10130f;
    --chrome: #0f130e;
    --chrome-2: #182016;
    --chrome-line: #2d3828;
    --chrome-ink: #f3eddf;
    --chrome-muted: #a9b19f;
    --storm: #78d2b5;
    --storm-deep: #1d604c;
  }
}

:root[data-theme="dark"]:not([data-palette]),
:root[data-theme="dark"][data-palette="ember"] {
  color-scheme: dark;
  --ground: #141712;
  --surface: #1d211a;
  --surface-2: #262b22;
  --line: #394030;
  --line-strong: #4f5942;
  --ink: #efe9dc;
  --ink-2: #c4bfb1;
  --ink-3: #8f8a7b;
  --accent: #d6a45c;
  --accent-ink: #1b1305;
  --accent-wash: #332817;
  --accent-line: #6b552e;
  --ok: #7fbf8f;
  --ok-wash: #1b2e22;
  --warn: #e0b46a;
  --warn-wash: #352a18;
  --bad: #e28b80;
  --bad-wash: #35201f;
  --console: #10130f;
  --chrome: #0f130e;
  --chrome-2: #182016;
  --chrome-line: #2d3828;
  --chrome-ink: #f3eddf;
  --chrome-muted: #a9b19f;
  --storm: #78d2b5;
  --storm-deep: #1d604c;
}

/* Geometry, elevation and the workbench tint are ledger-wide, not palette choices. The tint follows
   the active surface and ground so the same paper hierarchy survives every palette and mode. */
:root {
  --r: 14px;
  --r-sm: 9px;
  --lift-1: 0 1px 1px rgb(61 46 24 / .05), 0 8px 22px rgb(61 46 24 / .07);
  --lift-2: 0 15px 36px rgb(61 46 24 / .13), 0 2px 6px rgb(61 46 24 / .06);
  --lift-3: 0 28px 70px rgb(28 29 20 / .26), 0 4px 13px rgb(28 29 20 / .12);
  --focus: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 0 1px var(--accent);
  --ledger-main: color-mix(in srgb, var(--surface) 40%, var(--ground));
  --chrome-accent: color-mix(in srgb, var(--accent) 55%, #f6f0e2);
}

body {
  color: var(--ink);
  background-color: var(--ground);
  background-image:
    radial-gradient(circle at 80% -20%, rgb(255 255 255 / .75), transparent 38rem),
    linear-gradient(105deg, rgb(101 116 86 / .045), transparent 45%);
  background-size: auto;
}
.main { background: #f5f1e9; }

/* The sidebar feels like a book cover rather than a coloured application rail. */
.sidebar {
  padding: 14px 12px;
  gap: 17px;
  background:
    linear-gradient(180deg, rgb(3 8 4 / .08), transparent 12rem),
    radial-gradient(circle at 100% 0%, rgb(196 158 90 / .16), transparent 14rem),
    #1b241d;
  border-right-color: #354436;
  box-shadow: 8px 0 26px rgb(26 30 21 / .12);
}
.side-brand {
  position: relative;
  min-height: 82px;
  overflow: hidden;
  padding: 13px 12px;
  border: 1px solid rgb(220 189 127 / .34);
  border-radius: 12px;
  background: linear-gradient(120deg, #33462f, #1d281f 72%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 9px 20px rgb(0 0 0 / .12);
}
.side-brand::after {
  content: "";
  position: absolute;
  width: 104px;
  height: 104px;
  right: -26px;
  bottom: -31px;
  opacity: .16;
  background: url("icons/attackStormForts.png") center / contain no-repeat;
  filter: sepia(.35) saturate(.65);
  pointer-events: none;
}
.side-brand > * { position: relative; z-index: 1; }
.side-brand:hover { background: linear-gradient(120deg, #3a4e34, #212d22 72%); }
.side-brand .brand-mark {
  width: 42px;
  height: 42px;
  padding: 6px;
  border: 1px solid rgb(232 202 141 / .68);
  border-radius: 50%;
  color: #f0cc88;
  background: rgb(23 31 22 / .78);
  box-shadow: none;
}
.side-brand-name { color: #fff9ec; font-size: 15px; letter-spacing: .1em; }
.side-brand-name em { color: #f1cd8d; }
.side-brand-sub { color: #c3cbb7; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.nav-section { color: #94a08d; padding: 16px 10px 6px; font-size: 9px; letter-spacing: .17em; }
.nav-item { min-height: 41px; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; color: #c5ccb9; font-size: 13px; }
.nav-item svg { width: 18px; height: 18px; padding: 0; border: 0; border-radius: 0; background: none; color: #bac4ae; }
.nav-item:hover { border-color: rgb(230 207 160 / .12); background: rgb(255 255 255 / .055); color: #fffaf0; }
.nav-item.active { border-color: rgb(227 194 129 / .3); background: linear-gradient(90deg, rgb(193 143 62 / .36), rgb(193 143 62 / .12)); color: #fff9ec; box-shadow: none; }
.nav-item.active svg { color: #f5d292; border: 0; background: none; filter: none; }
.side-conn { color: #bdc6b5; border-top-color: #3c493a; }
.conn-dot.on { background: #79a879; box-shadow: none; }
.sidebar > .btn-danger-ghost { color: #efb4a9; border-color: #475246; }

/* A calm, paper-coloured workbench gives tables and settings much better hierarchy. */
.topbar {
  min-height: 66px;
  border-bottom-color: #ddd1be;
  background: rgb(255 253 248 / .9);
  box-shadow: 0 1px 0 rgb(94 74 41 / .04), 0 7px 20px rgb(94 74 41 / .045);
  backdrop-filter: blur(12px);
}
.page-title { color: #29362b; font-family: Georgia, "Times New Roman", serif; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.page-title::before { color: #9b8663; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; }
.acct-select, .topbar .btn:not(.run-pill) { border-color: #d4c7b4; background: #fffdf8; color: #40503f; }
.topbar .btn:not(.run-pill):hover { border-color: #b58b54; background: #faf3e6; }
.run-pill { border-color: #3f684d; background: #426b50; color: #fffaf0; box-shadow: 0 4px 10px rgb(55 91 64 / .14); }
.run-pill.on { background: #426b50; color: #fffaf0; }

.content { gap: 22px; max-width: 1720px; padding: clamp(20px, 3vw, 42px); }
.content::before { display: none; }
.panel, .status-strip {
  border-color: #ded3c1;
  border-radius: 14px;
  box-shadow: var(--lift-1);
}
.panel { background: #fffdf8; }
.panel-title { color: #314033; font-family: Georgia, "Times New Roman", serif; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.panel-sub { color: #75806f; }
.status-strip { background: #fffaf0; border-color: #e2d5c0; box-shadow: 0 1px 0 rgb(91 69 32 / .04); }
.stat-card { box-shadow: inset 1px 0 0 #e5dbcb; }
.stat-card:first-child { box-shadow: none; }
.stat-label { color: #8e826f; font-size: 9px; letter-spacing: .12em; }
.stat-value { color: #354437; font-family: Georgia, "Times New Roman", serif; font-size: 19px; }
.stat-value.accent { color: #9a6129; }

/* The original illustrated panorama is the feature image, not a decorative glow. */
.command-hero {
  min-height: 252px;
  align-items: flex-end;
  padding: clamp(25px, 3.2vw, 42px);
  border: 0;
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgb(15 21 16 / .94) 0%, rgb(15 21 16 / .72) 43%, rgb(15 21 16 / .1) 80%),
    linear-gradient(0deg, rgb(9 13 9 / .32), transparent 48%),
    url("images/field-command-hero-v2.webp") center / cover;
  box-shadow: 0 18px 42px rgb(46 39 25 / .22);
}
.command-hero::after { display: none; }
.command-hero-copy { max-width: 600px; }
.command-kicker { color: #e7c88f; font-size: 10px; letter-spacing: .15em; }
.command-kicker-dot { width: 7px; height: 7px; background: #9ab88b; box-shadow: none; }
.command-hero h1 { margin: 12px 0 8px; color: #fffaf0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(30px, 3.5vw, 46px); font-weight: 600; letter-spacing: -.045em; line-height: .98; }
.command-hero p { color: #e6e3d5; font-size: 14px; line-height: 1.55; }
.command-sigil { width: 70px; border-color: rgb(231 202 144 / .62); color: #f6d99d; background: rgb(20 27 18 / .58); box-shadow: none; text-shadow: none; }
.command-sigil-ring { border-color: rgb(231 202 144 / .46); }

/* Modules become a catalogue of illustrated capabilities instead of wireframe rows. */
.dash-grid { grid-template-columns: minmax(0, 1fr) minmax(360px, .74fr); gap: 24px; }
.seg { border-color: #ded3c1; border-radius: 10px; background: #f1eadf; }
.seg-btn { border-radius: 8px; color: #6b786a; }
.seg-btn:hover { background: #e8decd; color: #344435; }
.seg-btn.active { background: #fffdf8; color: #745021; box-shadow: 0 1px 4px rgb(89 66 33 / .12); }
.bot-list { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.bot-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  min-height: 82px;
  gap: 12px;
  padding: 11px;
  border: 1px solid #dfd5c5;
  border-radius: 13px;
  background: #fffdf8;
  box-shadow: 0 1px 0 rgb(68 55 31 / .03);
}
.bot-card:hover { transform: translateY(-2px); border-color: #c6a778; background: #fffdf8; box-shadow: var(--lift-2); }
.bot-card.on { border-left: 1px solid #d1b072; padding-left: 11px; background: linear-gradient(100deg, #fff8e8, #fffdf8 72%); }
.bot-ico { width: 58px; height: 58px; padding: 4px; border: 1px solid #d9cbb5; border-radius: 10px; background: #f1e9db; box-shadow: none; object-fit: contain; }
.bot-ico-fallback { color: #8f7a57; background: #f1e9db; }
.bot-meta { gap: 3px; }
.bot-name { color: #304032; font-family: Georgia, "Times New Roman", serif; font-size: 15px; font-weight: 600; }
.bot-state { color: #7b8675; font-size: 11px; text-transform: capitalize; }
.bot-card.on .bot-state { color: #4f7d5b; }
.bot-acts { gap: 3px; }
.icon-btn { border-radius: 7px; color: #76806f; }
.icon-btn:hover { color: #855c2a; background: #f2e8d8; }
.sw-track { border-color: #bdb59f; background: #e4dfd3; }
.sw-track::before { background: #8a947f; }
.sw input:checked + .sw-track { border-color: #558063; background: #deebdf; }
.sw input:checked + .sw-track::before { background: #52805f; }

/* The live log remains dark by function, but it is charcoal ink·not cyber neon. */
.console-col { border-color: #313d30; border-radius: 14px; background: #20271f; box-shadow: 0 12px 28px rgb(43 41 29 / .15); }
.console-head { border-bottom-color: #394638; background: #293329; }
.console-title { color: #f1ecdf; font-family: Georgia, "Times New Roman", serif; font-size: 15px; }
.console-live-dot { background: #91b482; box-shadow: none; }
.console-head .input, .console-head .btn { border-color: #4b5948; background: #20291f; color: #e8eadf; }
.console-body { background: #20271f; color: #d5ddcd; }
.log-t, .log-tag { color: #97a593; }
.log-m { color: #dde2d5; }
.log-row:hover { background: rgb(242 219 166 / .07); }
.log-row.lvl1 .log-m, .log-tag.lvl1 { color: #e7c277; }

/* Every form and overlay now belongs to the paper workbench too. */
.btn { border-color: #cdbda7; border-radius: 8px; background: #fffdf8; color: #445342; box-shadow: none; }
.btn:hover { border-color: #b78952; background: #faf1e2; box-shadow: none; }
.btn-primary { border-color: #3f684d; background: #426b50; color: #fffaf0; box-shadow: none; }
.btn-primary:hover { background: #365b43; box-shadow: none; }
.input, select, textarea { border-color: #cfc1ad; border-radius: 8px; background: #fffdf8; color: #334033; }
.input:hover, select:hover, textarea:hover { border-color: #af8550; }
.input:focus, select:focus, textarea:focus { border-color: #9f6d34; box-shadow: var(--focus); }
.sheet, .modal-card, .theme-pop, .pin-pop, .ssel-pop { border-color: #d3c4ad; border-radius: 15px; background: #fffdf8; box-shadow: var(--lift-3); }
.overlay { background: rgb(24 30 22 / .48); backdrop-filter: blur(5px); }
.sheet-head { border-color: #e3d8c7; background: #f6f0e5; }
.sheet-foot { border-color: #e3d8c7; background: #faf6ef; }
.opt-row, .rows-row, .sw-row, .pin-row { border-color: #e8dfd1; }
.opt-row:hover, .rows-row:hover, .sw-row:hover, .pin-row:hover:not(:disabled) { background: #fbf4e8; }
.table-wrap, .inv-wrap, .rank-table, .storm-discovery-table-wrap { border-color: #d9cdbc; border-radius: 11px; box-shadow: none; }
.inv-table, .rank-table, .storm-discovery-table { background: #fffdf8; }
.inv-table th, .rank-table th, .storm-discovery-table th { border-bottom-color: #d8cab4; background: #f2ebdf; color: #776b59; }
.inv-table td, .rank-table td, .storm-discovery-table td { border-top-color: #eee7dc; }
.inv-table tr:hover td, .rank-row:hover td, .storm-discovery-table tr:hover td { background: #fcf4e5; }
.storm-discovery { background: #f6f0e6; }
.rewind-hero { border-color: #d8c8ae; background: linear-gradient(90deg, rgb(23 34 25 / .86), rgb(23 34 25 / .34)), url("images/field-command-hero-v2.webp") center 68% / cover; }
.guide-article, .help-card, .ann-card, .evt-card, .tpl-card, .spark-card, .rewind-card { border-color: #e0d5c4; border-radius: 13px; background: #fffdf8; box-shadow: var(--lift-1); }
.guide-article:hover, .help-card:hover, .ann-card:hover, .evt-card:hover, .tpl-card:hover { border-color: #c5a46e; }

/* Sign-in opens like the title page of the product, using the same project-owned artwork. */
.auth-wrap {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(340px, 408px);
  align-content: center;
  column-gap: clamp(36px, 10vw, 150px);
  min-height: 100vh;
  padding: clamp(32px, 7vw, 96px);
  background:
    linear-gradient(90deg, rgb(11 16 11 / .79) 0%, rgb(11 16 11 / .48) 48%, rgb(11 16 11 / .27)),
    url("images/field-command-hero-v2.webp") center / cover;
}
.auth-wrap::before { display: none; }
.auth-brand { align-items: flex-start; text-align: left; gap: 12px; }
.auth-brand .brand-mark { width: 64px; height: 64px; padding: 10px; border-color: rgb(241 205 141 / .76); color: #f0ca89; background: rgb(20 29 20 / .68); box-shadow: none; }
.auth-brand h1 { color: #fff9ec; font-family: Georgia, "Times New Roman", serif; font-size: clamp(32px, 4.2vw, 54px); letter-spacing: .07em; line-height: .9; }
.auth-brand h1 em { color: #edc682; }
.auth-brand p { max-width: 360px; color: #e7e2d5; font-size: 14px; line-height: 1.6; }
.auth-card { max-width: 408px; padding: 26px; border-color: rgb(242 220 180 / .58); border-radius: 15px; background: rgb(255 252 245 / .94); box-shadow: 0 22px 60px rgb(0 0 0 / .25); }
.auth-tabs { border: 1px solid #ded0ba; background: #eee6da; }
.auth-tab { color: #707a6e; }
.auth-tab.active { background: #fffdf8; color: #35503d; box-shadow: 0 1px 4px rgb(78 58 27 / .1); }
.auth-card .field > label { color: #53604e; }
.auth-card .input { border-color: #cfbea6; background: #fffdf8; color: #304031; }
.auth-card .input:focus { border-color: #a57034; outline-color: #a57034; }
.auth-card .btn-primary { border-color: #426b50; background: #426b50; color: #fffaf0; }
.auth-foot { color: #74806f; }

@media (max-width: 1120px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .console-col { position: static; min-height: 440px; height: 58vh; }
  .auth-wrap { column-gap: 40px; }
}
@media (max-width: 760px) {
  .auth-wrap { grid-template-columns: 1fr; gap: 28px; padding: 48px 22px; background-position: 60% center; }
  .auth-brand { max-width: 480px; }
  .auth-card { width: min(100%, 408px); }
  .command-hero { min-height: 220px; background-position: 62% center; }
}
@media (max-width: 640px) {
  .main { background: #f5f1e9; }
  .sidebar { background: #1b241d; }
  .nav-section { display: none; }
  .nav-item { min-height: 35px; }
  .topbar { background: rgb(255 253 248 / .96); }
  .content { padding: 16px 12px 28px; gap: 16px; }
  .command-hero { min-height: 190px; padding: 23px 20px; background-position: 67% center; }
  .command-hero h1 { font-size: 31px; }
  .command-hero p { max-width: 290px; font-size: 12px; }
  .command-sigil { display: none; }
  .bot-list { grid-template-columns: 1fr; gap: 10px; }
  .bot-card { min-height: 76px; grid-template-columns: 52px minmax(0, 1fr) auto; padding: 10px; }
  .bot-ico { width: 52px; height: 52px; }
}

/* ═══ REALM LIBRARY EXTENSION ══════════════════════════════════════════════
   The first ledger pass establishes the book-cover shell. These page-level
   treatments carry that world through the quieter working areas so Templates,
   Guides, Rankings, and settings never fall back to anonymous application UI. */
.page-banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 190px;
  overflow: hidden;
  padding: clamp(24px, 3vw, 36px);
  border: 0;
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgb(23 28 21 / .92) 0%, rgb(23 28 21 / .7) 43%, rgb(23 28 21 / .08) 80%),
    url("images/realm-ledger-atlas-v2.webp") center / cover;
  box-shadow: 0 14px 34px rgb(58 45 23 / .18);
}
.page-banner-copy { position: relative; z-index: 1; max-width: 590px; }
.page-banner-kicker {
  display: inline-flex;
  align-items: center;
  color: #e8c98f;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.page-banner-kicker::before {
  content: "";
  width: 21px;
  height: 1px;
  margin-right: 8px;
  background: currentColor;
  opacity: .8;
}
.page-banner h2 {
  margin: 9px 0 7px;
  color: #fff9ed;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(25px, 3vw, 37px);
  font-weight: 600;
  letter-spacing: -.038em;
  line-height: 1;
}
.page-banner p { max-width: 500px; margin: 0; color: #e3e2d5; font-size: 13px; line-height: 1.6; }
.template-banner { background-position: center 56%; }
.guide-banner { background-position: center 45%; }
.help-banner { background-position: center 38%; }

/* A ranking header should feel like an illuminated title card, not a loose logo above a form. */
.rank-banner { justify-content: space-between; gap: 28px; min-height: 212px; }
.rank-banner .rank-logo {
  position: relative;
  z-index: 1;
  flex: 0 1 310px;
  justify-content: flex-end;
  margin: 0;
}
.rank-banner .rank-logo img {
  width: min(100%, 300px);
  min-width: 0;
  max-width: 300px;
  padding: 13px 18px;
  border: 1px solid rgb(248 225 179 / .35);
  border-radius: 10px;
  background: rgb(16 21 15 / .28);
  box-shadow: 0 9px 24px rgb(0 0 0 / .14);
}
.rank-controls { border-top: 3px solid #d6ae6d; }
.rank-band-row { border-left: 3px solid #557962; }
.rank-band { color: #4b624c; font-family: Georgia, "Times New Roman", serif; }
.rank-badge { border-color: #cbb89b; }
.rank-badge.m1 { color: #805814; background: #f7e5bb; box-shadow: inset 0 0 0 1px #d7b361; }
.rank-badge.m2 { color: #52585e; background: #eaebe9; box-shadow: inset 0 0 0 1px #bdc3c3; }
.rank-badge.m3 { color: #7d4a25; background: #f2dbcb; box-shadow: inset 0 0 0 1px #cf9973; }
.rank-row-m1 td { background: #fff5dc; }
.rank-row-m2 td { background: #f7f7f2; }
.rank-row-m3 td { background: #fcf0e7; }
.rank-row.is-you td { background: #f8ead3; }
.rank-link { color: #885c2b; }
/* The earlier night-skin selectors are intentionally more specific; repeat
   the ledger values at that specificity so a saved Dark preference cannot
   turn the podium rows back into graphite blocks. */
:root:not([data-theme="light"]) .rank-badge.m1, [data-theme="dark"] .rank-badge.m1 { color: #805814; background: #f7e5bb; box-shadow: inset 0 0 0 1px #d7b361; }
:root:not([data-theme="light"]) .rank-badge.m2, [data-theme="dark"] .rank-badge.m2 { color: #52585e; background: #eaebe9; box-shadow: inset 0 0 0 1px #bdc3c3; }
:root:not([data-theme="light"]) .rank-badge.m3, [data-theme="dark"] .rank-badge.m3 { color: #7d4a25; background: #f2dbcb; box-shadow: inset 0 0 0 1px #cf9973; }
:root:not([data-theme="light"]) .rank-row-m1 td, [data-theme="dark"] .rank-row-m1 td { background: #fff5dc; }
:root:not([data-theme="light"]) .rank-row-m2 td, [data-theme="dark"] .rank-row-m2 td { background: #f7f7f2; }
:root:not([data-theme="light"]) .rank-row-m3 td, [data-theme="dark"] .rank-row-m3 td { background: #fcf0e7; }

/* Templates become a library of cards and tabs; the dense formation editor still keeps its precision. */
.tpl-layout { gap: 18px; }
.tpl-library {
  padding: 8px;
  border: 1px solid #e1d5c2;
  border-radius: 12px;
  background: #f5eee2;
  box-shadow: 0 1px 0 rgb(65 45 22 / .04);
}
.tpl-libitem { min-height: 46px; padding: 9px 10px; border-radius: 8px; }
.tpl-libitem:hover { background: #fffaf0; }
.tpl-libitem.active { border-color: #cfb07d; background: #fffaf0; box-shadow: 0 2px 7px rgb(78 55 22 / .08); }
.tpl-libname > span:first-child, .tpl-detail-name { color: #334535; font-family: Georgia, "Times New Roman", serif; font-size: 15px; }
.tpl-detail-meta, .tpl-libmeta { color: #7b8576; }
.tpl-wave { border-color: #dfd3c0; border-radius: 12px; background: #fffdf8; box-shadow: 0 2px 8px rgb(60 44 21 / .04); }
.tpl-wave-head { color: #4c624e; font-family: Georgia, "Times New Roman", serif; font-size: 14px; }
.tpl-flank-title { border-bottom-color: #e4d9c9; color: #88785f; letter-spacing: .09em; }
.tpl-chip { border-color: #dfd2bf; border-radius: 7px; background: #f7efe2; color: #4c5e4d; }
.tpl-chip-c { color: #8c6b38; }

/* Guides look like a marginalia page with an unobtrusive, readable table of contents. */
.guide-layout { gap: 20px; }
.guide-toc {
  padding: 9px;
  border: 1px solid #e0d5c4;
  border-radius: 12px;
  background: #f6f0e6;
  box-shadow: 0 2px 8px rgb(60 44 21 / .035);
}
.guide-cat { color: #947d59; font-size: 9px; letter-spacing: .14em; }
.guide-toc-item { padding: 8px 9px; color: #637260; }
.guide-toc-item:hover { background: #fffaf0; color: #354b39; }
.guide-toc-item.active { background: #e9dbc4; color: #38533d; }
.guide-article { border-color: #ded2c0; border-radius: 14px; padding: clamp(20px, 3vw, 34px); background: #fffdf8; box-shadow: var(--lift-1); }
.guide-badge { border-color: #d5bd95; background: #f6e7cb; color: #75542a; }
.guide-h { color: #314235; font-family: Georgia, "Times New Roman", serif; font-size: 19px; }
.guide-body { color: #536151; line-height: 1.78; }
.guide-body code { border-color: #e1d2b9; background: #f6eddf; color: #73552e; }
.guide-tip { border-left-color: #9f7135; background: #fbf0dc; color: #53604d; }

/* Empty areas now invite the operator in, instead of looking like missing content. */
.empty-note, .tpl-empty {
  min-height: 116px;
  display: grid;
  place-items: center;
  padding: 24px;
  border: 1px dashed #cbb99b;
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgb(255 253 248 / .92), rgb(255 253 248 / .74)),
    url("images/realm-ledger-atlas-v2.webp") center / cover;
  color: #667161;
  text-align: center;
}
.console-empty {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #bdc8b7;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  text-align: left;
  white-space: pre-wrap;
}
.console-prompt { color: #d9aa4e; font-weight: 600; }
.console-empty-detail { color: #98a995; }

/* Announcements and module inventory read as correspondence pinned into the same ledger. */
.ann-card, .evt-card { padding: 16px 18px; border-left-width: 3px; border-color: #dfd2c0; background: #fffdf8; }
.ann-card.update { border-left-color: #a86f32; }
.ann-card.warning { border-left-color: #ba822c; }
.ann-card.info { border-left-color: #5b815f; }
.ann-title { color: #354636; font-family: Georgia, "Times New Roman", serif; font-size: 16px; }
.ann-date { color: #93846d; }
.ann-body { color: #5e6b5b; }
.ann-image { border-color: #dfd2c0; background: #f5ecde; }
.help-grid { gap: 12px; border: 0; border-radius: 0; background: transparent; overflow: visible; }
.help-card { min-height: 126px; padding: 16px; border: 1px solid #e0d5c4; border-radius: 12px; background: #fffdf8; box-shadow: var(--lift-1); }
.help-card:hover { background: #fffaf1; border-color: #c8a973; box-shadow: var(--lift-2); }
.help-card .h { color: #354637; font-family: Georgia, "Times New Roman", serif; font-size: 16px; }
.help-ico { width: 34px; height: 34px; margin-right: 10px; padding: 4px; border: 1px solid #d8c8af; border-radius: 9px; background: #f5ecde; opacity: 1; }
.help-card .b { color: #74806f; line-height: 1.55; }

@media (max-width: 720px) {
  .page-banner { min-height: 174px; padding: 24px 20px; background-position: 60% center; }
  .page-banner h2 { font-size: 28px; }
  .page-banner p { max-width: 320px; font-size: 12px; }
  .rank-banner .rank-logo { display: none; }
  .guide-toc { position: static; display: flex; flex-direction: row; flex-wrap: wrap; }
  .guide-cat { flex-basis: 100%; }
}
@media (max-width: 520px) {
  .page-banner { min-height: 156px; }
  .page-banner-kicker { font-size: 8.5px; }
  .page-banner h2 { font-size: 25px; }
  .tpl-library { position: static; max-height: none; }
}

/* Warchief mark · the Regent is the default because the strong steel-and-wine
   silhouette stays legible in the compact sidebar. The Ranger and Strategist
   variants live beside it as first-class alternatives, not discarded drafts. */
.side-brand::after {
  width: 112px;
  height: 112px;
  right: -24px;
  bottom: -24px;
  opacity: .24;
  background: url("images/warchief-concept-a-regent-ruby.webp") center / cover no-repeat;
  filter: saturate(.82) contrast(1.06);
}
.side-brand .brand-mark {
  padding: 0;
  overflow: hidden;
  border-color: rgb(232 202 141 / .76);
  background: #171c16 url("images/warchief-concept-a-regent-ruby.webp") center / cover no-repeat;
}
.side-brand .brand-mark svg { display: none; }
.storm-sheet .storm-discovery-head p { display: none; }
.storm-sheet .storm-discovery-meta { padding: 8px 11px; gap: 6px 13px; }
.storm-sheet .storm-discovery-table-wrap {
  min-height: 320px;
  max-height: min(62vh, 720px);
}
.storm-sheet .storm-discovery-table { min-width: 720px; font-size: 11px; }
.storm-sheet .storm-discovery-table { table-layout: fixed; }
.storm-col-name { width: 18%; }
.storm-col-tier { width: 10%; }
.storm-col-state { width: 16%; }
.storm-col-count { width: 14%; }
.storm-col-availability { width: 25%; }
.storm-col-coords { width: 17%; }
.storm-col-resource { width: 10%; }
.storm-col-owner { width: 14%; }
.storm-sheet .storm-discovery-table th { padding: 8px 10px; }
.storm-sheet .storm-discovery-table td { padding: 7px 10px; }
.storm-sheet .storm-discovery-table td strong { font-size: 11px; }
.storm-sheet .storm-discovery-table td small { font-size: 9.5px; }
.storm-count { white-space: nowrap; }
.storm-availability { white-space: nowrap; color: var(--ink-2); }
.storm-availability.attackable { color: var(--ok); font-weight: 600; }
.storm-availability.cooling, .storm-availability.respawning { color: var(--warn); }
.storm-discovery-toolbar { flex-wrap: wrap; }
.storm-filter-select { flex: 0 1 112px; width: 112px; min-width: 96px; }
.storm-sort-select { flex: 0 1 154px; width: 154px; min-width: 128px; }

@media (max-width: 640px) {
  .sheet.sheet-wide.storm-sheet {
    width: calc(100vw - 12px);
    max-width: calc(100vw - 12px);
    max-height: calc(100dvh - 12px);
  }
  .storm-sheet .storm-discovery { padding: 12px 12px 14px; }
  .storm-sheet .storm-discovery-table-wrap {
    min-height: 280px;
    max-height: calc(100dvh - 290px);
  }
  .storm-sheet .storm-discovery-table { min-width: 680px; }
  .storm-filter-select, .storm-sort-select { width: 100%; min-width: 0; }
}

/* ── live worker control ────────────────────────────────────────────────────
   Starting is a deliberate lifecycle action. Keep the state and the action visible in the button;
   the old hover-only Stop label made a running account look like a passive status chip. */
.topbar { min-width: 0; }
.page-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-pending {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--warn); font-size: 11px; font-weight: 600; white-space: nowrap;
}
.run-pending[hidden] { display: none; }
.run-pending::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--warn);
  box-shadow: 0 0 0 3px var(--warn-wash);
}
.connect-pill {
  min-height: 34px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface); color: var(--ink-2); font: inherit; font-size: 11.5px; font-weight: 650;
  cursor: pointer; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.connect-pill:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); background: var(--accent-wash); }
.connect-pill.connected { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); background: var(--ok-wash); }
.connect-pill:focus-visible { outline: none; box-shadow: var(--focus); }
.connect-pill:disabled { opacity: .55; cursor: not-allowed; }
.run-pill {
  min-height: 38px; min-width: 126px; justify-content: center; gap: 8px;
  padding: 0 15px; border: 1px solid transparent; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .01em;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.run-pill > #run-pill-label { display: inline-flex; align-items: center; gap: 8px; }
.run-pill .run-glyph { font-size: 10px; line-height: 1; }
.run-pill.stopped {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 26%, transparent);
}
.run-pill.running {
  background: var(--ok-wash); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 48%, var(--line));
  box-shadow: 0 3px 10px color-mix(in srgb, var(--ok) 14%, transparent);
}
.run-pill.pending { border-style: dashed; }
.run-pill:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 7px 16px color-mix(in srgb, var(--ink) 16%, transparent); }
.run-pill:active:not(:disabled) { transform: translateY(0); }
.run-pill:focus-visible { outline: none; box-shadow: var(--focus), 0 5px 14px color-mix(in srgb, var(--ink) 14%, transparent); }
.run-pill:disabled { opacity: .5; transform: none; }

/* Keep long module lists cheap to paint and keep the narrow dashboard usable on phones. */
.bot-card { content-visibility: auto; contain-intrinsic-size: 0 82px; }
@media (max-width: 640px) {
  .connect-pill { width: 100%; }
  .run-pending { order: 4; flex: 1 0 100%; justify-content: flex-end; padding-right: 2px; }
  .run-pill { width: 100%; margin-left: 0; }
  .acct-switch { flex-wrap: wrap; }
  .acct-switch .acct-select { width: 100%; flex-basis: 100%; }
  .acct-switch .btn { margin-left: auto; }
  .topbar { align-items: stretch; }
  .content { min-width: 0; }
  .panel, .dash-grid, .status-strip, .bot-list { min-width: 0; }
}

/* ── module priority organizer ─────────────────────────────────────────────
   The list deliberately has both native drag-and-drop and visible move controls: HTML drag is
   efficient with a pointer, while buttons remain reliable for keyboard and touch users. */
.bots-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.bots-head .seg { margin-bottom: 0; }
.priority-open { white-space: nowrap; }
.priority-sheet { max-width: 760px; }
.priority-body { display: grid; gap: 12px; }
.priority-summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  color: var(--ink-2); font-size: 12px;
}
.priority-summary > :first-child { color: var(--ink); font-weight: 700; }
.priority-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.priority-row {
  display: grid; grid-template-columns: 30px 20px 32px minmax(0, 1fr) auto;
  align-items: center; gap: 9px; min-height: 58px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 4%, transparent);
  cursor: grab; transition: border-color var(--dur) var(--ease), opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.priority-row:hover { border-color: var(--line-strong); }
.priority-row:active { cursor: grabbing; }
.priority-row-dragging { opacity: .46; border-style: dashed; transform: scale(.99); }
.priority-rank {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-wash); color: var(--accent); font-size: 12px; font-weight: 800;
}
.priority-handle { color: var(--ink-3); font-size: 21px; line-height: 1; letter-spacing: -3px; user-select: none; }
.priority-icon { width: 28px; height: 28px; object-fit: contain; }
.priority-icon-fallback { display: grid; place-items: center; border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-3); font-size: 10px; font-weight: 700; }
.priority-meta { min-width: 0; display: grid; gap: 2px; }
.priority-name { overflow: hidden; color: var(--ink); font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.priority-category { color: var(--ink-3); font-size: 11px; text-transform: capitalize; }
.priority-actions { display: inline-flex; gap: 5px; }
.priority-move { width: 30px; height: 30px; padding: 0; font-size: 16px; }
.priority-move:disabled { cursor: not-allowed; opacity: .38; }
@media (max-width: 640px) {
  .bots-head { align-items: stretch; flex-direction: column; }
  .priority-open { align-self: flex-end; }
  .priority-summary { align-items: flex-start; flex-direction: column; gap: 3px; }
  .priority-row { grid-template-columns: 28px 16px 28px minmax(0, 1fr) auto; gap: 7px; padding: 8px; }
  .priority-handle { font-size: 18px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIGN-UP ANSWER THAT IS NEITHER SUCCESS NOR FAILURE
   A sign-up now ends one of three ways, and the middle one · the account was created and is waiting for
   the server administrator · is not a fault. It lands in the same box as a wrong password, so the box has
   to be able to say which it is; left in the default red it would read as a rejection.
   ═══════════════════════════════════════════════════════════════════════════ */
.auth-error.info {
  color: var(--accent);
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SERVER ADMINISTRATOR
   The second shell reuses the sidebar, panel and table already in the file; what is new here is only
   what those do not cover · the count cards, the two administrator tables, and the sign-up row.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Four counts, each a button into the view behind it: the number and the way to act on it are one target
   rather than a figure you then have to go and find. */
.admin-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.admin-card {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); color: var(--ink); font: inherit; cursor: pointer;
}
.admin-card:hover { border-color: var(--accent-line); background: var(--accent-wash); }
.admin-card-l { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.admin-card-v { font-size: 24px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.admin-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* Both administrator tables. The inherited inventory alignment is right-aligned columns, which is correct
   for numbers and wrong for a user agent; only the duration column stays right. */
.admin-table th, .admin-table td { text-align: left; border-bottom: 1px solid var(--line); }
.admin-table td.admin-num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-table .admin-trow { cursor: pointer; }
.admin-mono { font-family: var(--mono); font-size: 11px; overflow-wrap: anywhere; }
.admin-detail td { padding: 2px 10px 12px; border-bottom: 1px solid var(--line); }
.admin-kv { display: flex; gap: 10px; font-size: 11.5px; padding: 1px 0; }
.admin-kv span { width: 84px; flex: none; color: var(--ink-3); }
.admin-kv b { min-width: 0; color: var(--ink-2); font-weight: 500; overflow-wrap: anywhere; }

/* An account waiting to be admitted: what it calls itself on the left, the two answers on the right. */
.admin-row {
  display: flex; gap: 12px; align-items: center; padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.admin-row:last-child { border-bottom: 0; }
.admin-row-main { flex: 1; min-width: 0; }
.admin-row-name { font-size: 13px; font-weight: 600; }
.admin-row-meta { display: flex; flex-wrap: wrap; gap: 3px 14px; font-size: 11.5px; color: var(--ink-3); }
.admin-row-acts { display: flex; gap: 6px; flex: none; }
.admin-waiting { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }

.game-name-review { padding: 12px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 7px; }
.game-name-review:last-child { border-bottom: 0; padding-bottom: 0; }
.game-name-review-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.game-name-review-head > div { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.game-name-review-existing { margin: 0; padding-left: 20px; color: var(--ink-2); font-size: 12px; }
.game-name-review-actions { display: flex; flex-wrap: wrap; gap: 7px; }

/* The state beside an account that already holds access. Approved is the ordinary case and stays as the
   base chip; revoked is the one that changes what the page can do, and reads like the refusal it is. */
.chip.admin-chip-revoked { background: var(--bad-wash); color: var(--bad); border-color: transparent; }

@media (max-width: 640px) {
  .admin-row { align-items: stretch; flex-direction: column; gap: 8px; }
  .admin-row-acts { justify-content: flex-end; }
}
.auth-recovery-link { margin-top: 12px; text-align: center; }
.auth-recovery { display: grid; gap: 12px; margin-top: 12px; }
.auth-link { border: 0; padding: 4px 0; color: var(--accent); background: transparent; cursor: pointer; font: inherit; }
.auth-link:hover { text-decoration: underline; }

/* ═══ LEDGER THEME SURFACES ══════════════════════════════════════════════════
   The ledger reset above hardcoded its paper colours, which flattened every palette and mode.
   These rules are the theme-aware pass: the structure, typography and art stay ledger, while the
   workbench, cards, tables, forms and accents read the semantic variables chosen by Appearance.
   The ink sidebar, console, heros and auth cover stay deliberately branded in every mode. */
body {
  background-image:
    radial-gradient(circle at 80% -20%, color-mix(in srgb, var(--surface) 70%, transparent), transparent 38rem),
    linear-gradient(105deg, color-mix(in srgb, var(--accent) 5%, transparent), transparent 45%);
}
.main { background: var(--ledger-main); }
.topbar { border-bottom-color: var(--line); background: color-mix(in srgb, var(--surface) 92%, transparent); }
.page-title { color: var(--ink); }
.page-title::before { color: var(--ink-3); }
.acct-select, .topbar .btn:not(.run-pill) { border-color: var(--line-strong); background: var(--surface); color: var(--ink-2); }
.topbar .btn:not(.run-pill):hover { border-color: var(--accent-line); background: var(--accent-wash); }
.panel, .status-strip { border-color: var(--line); }
.panel { background: var(--surface); }
.panel-title { color: var(--ink); }
.panel-sub { color: var(--ink-3); }
.status-strip { background: var(--surface-2); border-color: var(--line); }
.stat-card { box-shadow: inset 1px 0 0 var(--line); }
.stat-label { color: var(--ink-3); }
.stat-value { color: var(--ink); }
.stat-value.accent { color: var(--accent); }
.seg { border-color: var(--line); background: var(--surface-2); }
.seg-btn { color: var(--ink-2); }
.seg-btn:hover { background: var(--surface); color: var(--ink); }
.seg-btn.active { background: var(--surface); color: var(--accent); }
.bot-card { border-color: var(--line); background: var(--surface); }
.bot-card:hover { border-color: var(--accent-line); background: var(--surface); }
.bot-card.on { border-left-color: var(--accent-line); background: linear-gradient(100deg, var(--accent-wash), var(--surface) 72%); }
.bot-ico { border-color: var(--line-strong); background: var(--surface-2); }
.bot-ico-fallback { color: var(--ink-3); background: var(--surface-2); }
.bot-name { color: var(--ink); }
.bot-state { color: var(--ink-3); }
.bot-card.on .bot-state { color: var(--ok); }
.icon-btn { color: var(--ink-3); }
.icon-btn:hover { color: var(--accent); background: var(--accent-wash); }
.btn { border-color: var(--line-strong); background: var(--surface); color: var(--ink-2); }
.btn:hover { border-color: var(--accent-line); background: var(--accent-wash); }
.btn-primary { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
.input, select, textarea { border-color: var(--line-strong); background: var(--surface); color: var(--ink); }
.input:hover, select:hover, textarea:hover { border-color: var(--accent-line); }
.input:focus, select:focus, textarea:focus { border-color: var(--accent); }
.sheet, .modal-card, .theme-pop, .pin-pop, .ssel-pop { border-color: var(--line-strong); background: var(--surface); }
.sheet-head { border-color: var(--line); background: var(--surface-2); }
.sheet-foot { border-color: var(--line); background: var(--surface-2); }
.opt-row, .rows-row, .sw-row, .pin-row { border-color: var(--line); }
.opt-row:hover, .rows-row:hover, .sw-row:hover, .pin-row:hover:not(:disabled) { background: var(--surface-2); }
.table-wrap, .inv-wrap, .rank-table, .storm-discovery-table-wrap { border-color: var(--line); }
.inv-table, .rank-table, .storm-discovery-table { background: var(--surface); }
.inv-table th, .rank-table th, .storm-discovery-table th { border-bottom-color: var(--line); background: var(--surface-2); color: var(--ink-3); }
.inv-table td, .rank-table td, .storm-discovery-table td { border-top-color: var(--line); }
.inv-table tr:hover td, .rank-row:hover td, .storm-discovery-table tr:hover td { background: var(--surface-2); }
.storm-discovery { background: var(--surface-2); }
.guide-article, .help-card, .ann-card, .evt-card, .tpl-card, .spark-card, .rewind-card { border-color: var(--line); background: var(--surface); }
.guide-article:hover, .help-card:hover, .ann-card:hover, .evt-card:hover, .tpl-card:hover { border-color: var(--accent-line); }
.side-brand-name em { color: var(--chrome-accent); }
.nav-item.active { border-color: color-mix(in srgb, var(--accent) 42%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 32%, transparent), color-mix(in srgb, var(--accent) 8%, transparent)); color: var(--chrome-ink); }
.nav-item.active svg { color: var(--chrome-accent); }
.page-banner-kicker, .command-kicker { color: var(--chrome-accent); }

/* The sign-in cover is branded art, but its card is part of the same theme: a dark reader should not
   meet a paper-white form before signing in, and a palette should colour the primary action too. */
.auth-card {
  border-color: color-mix(in srgb, var(--accent-line) 55%, transparent);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}
.auth-tabs { border-color: var(--line); background: var(--surface-2); }
.auth-tab { color: var(--ink-3); }
.auth-tab.active { background: var(--surface); color: var(--ink); box-shadow: var(--lift-1); }
.auth-card .field > label { color: var(--ink-2); }
.auth-card .input { border-color: var(--line-strong); background: var(--surface); color: var(--ink); }
.auth-card .input:focus { border-color: var(--accent); outline-color: var(--accent); }
.auth-card .btn-primary { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.auth-card .hint, .auth-disclaimer, .auth-foot { color: var(--ink-3); }
.auth-brand h1 em { color: var(--chrome-accent); }

/* Remaining ledger details: guides, announcements, help cards, templates and podium rows. These
   carried their own paper colours, so a palette stopped at the panel edges without them. */
.guide-h { color: var(--ink); }
.guide-tip { border-left-color: var(--accent); background: var(--accent-wash); color: var(--ink-2); }
.guide-toc-item { color: var(--ink-2); }
.guide-toc-item:hover { background: var(--surface-2); color: var(--ink); }
.guide-toc-item.active { background: var(--accent-wash); color: var(--accent); }
.rank-band-row { border-left-color: var(--accent); }
.rank-band { color: var(--ink); }
.rank-row-m1 td { background: color-mix(in srgb, var(--accent-wash) 65%, var(--surface)); }
.rank-row-m2 td { background: var(--surface-2); }
.rank-row-m3 td { background: color-mix(in srgb, var(--accent-wash) 40%, var(--surface)); }
.rank-row.is-you td { background: var(--accent-wash); }
.rank-link { color: var(--accent); }
:root:not([data-theme="light"]) .rank-row-m1 td, [data-theme="dark"] .rank-row-m1 td { background: color-mix(in srgb, var(--accent-wash) 65%, var(--surface)); }
:root:not([data-theme="light"]) .rank-row-m2 td, [data-theme="dark"] .rank-row-m2 td { background: var(--surface-2); }
:root:not([data-theme="light"]) .rank-row-m3 td, [data-theme="dark"] .rank-row-m3 td { background: color-mix(in srgb, var(--accent-wash) 40%, var(--surface)); }
.ann-card, .evt-card { border-color: var(--line); background: var(--surface); }
.ann-card.update { border-left-color: var(--accent); }
.ann-card.warning { border-left-color: var(--warn); }
.ann-card.info { border-left-color: var(--ok); }
.ann-title { color: var(--ink); }
.ann-date { color: var(--ink-3); }
.ann-body { color: var(--ink-2); }
.ann-image { border-color: var(--line); background: var(--surface-2); }
.help-card { border-color: var(--line); background: var(--surface); }
.help-card:hover { background: var(--surface-2); border-color: var(--accent-line); }
.help-card .h { color: var(--ink); }
.help-card .b { color: var(--ink-2); }
.help-ico { border-color: var(--line-strong); background: var(--accent-wash); }
.tpl-library { border-color: var(--line); background: var(--surface-2); }
.tpl-libitem:hover, .tpl-libitem.active { background: var(--surface); border-color: var(--accent-line); }
.tpl-libname > span:first-child, .tpl-detail-name, .tpl-wave-head { color: var(--ink); }
.tpl-detail-meta, .tpl-libmeta { color: var(--ink-3); }
.tpl-wave { border-color: var(--line); background: var(--surface); }
.tpl-flank-title { border-bottom-color: var(--line); color: var(--ink-3); }


/* ═══ PALETTE-TINTED CHROME ══════════════════════════════════════════════════
   The sidebar, console and illustrated banners are large surfaces. Leaving them the same green in
   every skin is what made palettes read as button outlines; these rules hand them to the active
   palette's chrome/console tokens while keeping their ledger structure and art. */
.sidebar {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--chrome-ink) 7%, transparent), transparent 12rem),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 15rem),
    var(--chrome);
  border-right-color: var(--chrome-line);
}
.side-brand {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--chrome-line));
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 18%, var(--chrome-2)), var(--chrome-2) 72%);
}
.side-brand:hover { background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 28%, var(--chrome-2)), var(--chrome-2) 72%); }
.side-brand .brand-mark { border-color: color-mix(in srgb, var(--accent) 58%, var(--chrome-line)); background-color: var(--chrome-2); }
.side-brand-name { color: var(--chrome-ink); }
.side-brand-name em { color: var(--chrome-accent); }
.side-brand-sub { color: var(--chrome-muted); }
.nav-section { color: var(--chrome-muted); }
.nav-item { color: var(--chrome-muted); }
.nav-item svg { color: var(--chrome-muted); }
.nav-item:hover { background: color-mix(in srgb, var(--chrome-ink) 8%, transparent); border-color: color-mix(in srgb, var(--chrome-ink) 13%, transparent); color: var(--chrome-ink); }
.nav-item.active { border-color: color-mix(in srgb, var(--accent) 48%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 40%, transparent), color-mix(in srgb, var(--accent) 10%, transparent)); color: var(--chrome-ink); }
.nav-item.active svg { color: var(--chrome-accent); }
.side-conn { color: var(--chrome-muted); border-top-color: var(--chrome-line); }
.conn-dot.on { background: var(--ok); }
.sidebar > .btn-danger-ghost { color: var(--bad); border-color: var(--chrome-line); }

.console-col { border-color: var(--chrome-line); background: var(--console); }
.console-head { border-bottom-color: var(--chrome-line); background: color-mix(in srgb, var(--console) 80%, var(--chrome-2)); }
.console-title { color: var(--chrome-ink); }
.console-live-dot { background: var(--ok); }
.console-head .input, .console-head .btn, .session-gains .btn {
  border-color: var(--chrome-line);
  background: color-mix(in srgb, var(--console) 72%, var(--chrome-2));
  color: var(--chrome-ink);
}
.console-body { background: var(--console); color: var(--chrome-ink); }
.console-empty { color: var(--chrome-muted); }
.console-empty-detail { color: var(--chrome-muted); }
.console-prompt { color: var(--chrome-accent); }
.session-gains { border-bottom-color: var(--chrome-line); color: var(--chrome-muted); }
.sg-k, .sg-label { color: var(--chrome-muted); }
.sg-v { color: var(--chrome-ink); }
.sg-summary { border-top-color: var(--chrome-line); }
.sg-lines { color: var(--chrome-muted); }
.log-t, .log-tag { color: color-mix(in srgb, var(--chrome-muted) 80%, var(--chrome-ink)); }
.log-m { color: var(--chrome-ink); }
.log-row:hover { background: color-mix(in srgb, var(--accent) 11%, transparent); }
.log-row.lvl1 .log-m, .log-tag.lvl1 { color: var(--warn); }
.log-row.lvl2 .log-m, .log-tag.lvl2 { color: var(--bad); }
.log-row.lvl3 .log-m, .log-tag.lvl3 { color: var(--chrome-muted); }

/* The illustrated banners carry the same palette temperature as the workbench. */
.command-hero, .page-banner { position: relative; }
.command-hero::before, .page-banner::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 38%, transparent), transparent 64%);
  mix-blend-mode: soft-light;
}
.command-hero-copy, .page-banner-copy { position: relative; z-index: 1; }