/* ============================================================================
   Operator Console, Ember restyle (rebuilt from scratch to the approved spec).
   Forge-dark canvas · diamond-blue accent (the 10%) · frosted chrome.
   Mobile-first (~360px) with a 720px breakpoint. tokens.css owns all colours.
   ============================================================================ */

/* ── Reset / base ─────────────────────────────────────────────────────────*/
*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100dvh;
  overflow: hidden;                 /* only .scroll-area scrolls, shell contract */
  margin: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
               Helvetica, Arial, sans-serif;
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.45;
  color: var(--fg-0);
  background-color: var(--bg-0);
  /* the original vivid warm gradient-mesh, ember glow sweeping the corners */
  background-image:
    /* the top-right radial is status-driven via body::before (its size/location
       match the original orange radial); the rest of the ember mesh is unchanged. */
    radial-gradient(80% 55% at 10% -4%, rgba(238,91,162,.18) 0%, transparent 55%),
    radial-gradient(120% 90% at 6% 108%, rgba(197,57,127,.18) 0%, transparent 55%),
    radial-gradient(120% 90% at 100% 114%, rgba(193,40,24,.14) 0%, transparent 55%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

/* System status glow, the top background glow tracks the overall status
   indicator (green = live, amber = alert, red = critical) and pulses with it.
   Driven by document.body.dataset.sys, set in renderServicesStrip(). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;                 /* above the ember mesh, behind all content */
  pointer-events: none;
  /* same size/location as the original top-right orange radial */
  background: radial-gradient(85% 58% at 92% 0%, var(--sys-glow, transparent) 0%, transparent 52%);
  transition: background 0.9s ease;
}
body[data-sys="live"]::before     { --sys-glow: rgba(84,224,142,.26);  animation: sys-glow-soft 3.6s ease-in-out infinite; }
body[data-sys="loading"]::before  { --sys-glow: rgba(224,161,58,.24);  animation: sys-glow-soft 2.4s ease-in-out infinite; }
body[data-sys="alert"]::before    { --sys-glow: rgba(224,161,58,.32);  animation: sys-glow-throb 1.7s ease-in-out infinite; }
body[data-sys="critical"]::before { --sys-glow: rgba(255,107,107,.34); animation: sys-glow-throb 1.15s ease-in-out infinite; }
@keyframes sys-glow-soft  { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.95; } }
@keyframes sys-glow-throb { 0%, 100% { opacity: 0.50; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none !important; opacity: 0.8 !important; }
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; }
p { margin: 0 0 0.6rem; }
a { color: var(--accent-bright); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
svg { display: block; }
[hidden] { display: none !important; }
.hidden { display: none !important; }

::selection { background: var(--accent-soft); color: var(--fg-0); }

/* Thin, dark scrollbars */
.scroll-area, .activity-feed-scroll, .log-lines, .svc-log-pre, .partner-board {
  scrollbar-width: thin;
  scrollbar-color: var(--surface-hi) transparent;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--surface-hi); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

/* ── Form elements, dark system defaults ─────────────────────────────────*/
input, select, textarea, button {
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--fg-0);
}

input[type="text"], input[type="search"], input[type="number"],
input[type="datetime-local"], input[type="email"], input[type="url"],
select, textarea {
  width: 100%;
  background: var(--surface);
  color: var(--fg-0);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
  min-height: 40px;
  transition: border-color var(--t-base), background var(--t-base);
}
textarea { resize: vertical; line-height: 1.4; }
input::placeholder, textarea::placeholder { color: var(--fg-2); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent-border);
  background: var(--surface-2);
}
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-2) 50%),
                    linear-gradient(135deg, var(--fg-2) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 1.8rem;
}
option { background: var(--bg-0); color: var(--fg-0); }

label { font-size: var(--fs-xs); color: var(--fg-1); }

button {
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface-hi);
  color: var(--fg-0);
  border-radius: var(--r-pill);
  padding: 0.5rem 0.95rem;
  min-height: var(--tap);
  font-weight: 600;
  transition: background var(--t-fast), border-color var(--t-fast),
              transform var(--t-fast), filter var(--t-fast);
}
button:hover { filter: brightness(1.12); }
button:active { transform: scale(0.97); }
button:disabled { opacity: 0.5; cursor: default; transform: none; filter: none; }

/* Primary / CTA, accent (reserved 10%) */
.primary, .sheet-primary, .hero-cta {
  background: var(--accent);
  color: var(--on-accent);
  border: 0;
  font-weight: 700;
}
.primary:hover, .sheet-primary:hover, .hero-cta:hover { filter: brightness(1.08); }

.ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-1);
}
.danger, .danger-action {
  background: rgba(255, 107, 107, 0.14);
  border: 1px solid rgba(255, 107, 107, 0.30);
  color: var(--critical);
}

input[type="range"], .slider, .range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  min-height: 0;
  padding: 0;
  background: var(--surface-hi);
  border: 0;
  border-radius: 999px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg-0);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border: 2px solid var(--bg-0);
  border-radius: 50%; background: var(--accent); cursor: pointer;
}

/* Switch (toggle) */
.switch {
  position: relative;
  display: inline-block;
  width: 46px; height: 28px;
  flex: 0 0 auto;
}
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .slider, .switch > span {
  position: absolute; inset: 0;
  /* Override the generic `.slider` (range-input) rule above, which otherwise
     collapses this track to a 6px bar and the knob bulges out. */
  width: auto; height: auto; min-height: 0;
  -webkit-appearance: none; appearance: none;
  background: var(--surface-hi);
  border-radius: 999px;
  transition: background var(--t-base);
}
.switch .slider::before, .switch > span::before {
  content: ""; position: absolute;
  width: 22px; height: 22px; left: 3px; top: 3px;
  background: var(--fg-0); border-radius: 50%;
  transition: transform var(--t-base);
}
.switch input:checked + .slider, .switch input:checked + span { background: var(--accent); }
.switch input:checked + .slider::before, .switch input:checked + span::before { transform: translateX(18px); }

/* ============================================================================
   SHELL, html/body fixed; only .scroll-area scrolls.
   ============================================================================ */
#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

.scroll-area {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

/* Login / centred panes */
.center-pane {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 1.25rem;
}
.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow);
}
.login-card .brand { text-align: center; margin-bottom: 0.5rem; }
.login-card .brand img { width: 56px; height: 56px; border-radius: 14px; margin: 0 auto 0.6rem; }
.login-card .brand h2 { font-size: var(--fs-lg); }
.login-card .by { color: var(--fg-1); font-size: var(--fs-xs); margin-top: 0.15rem; }
.err {
  color: var(--critical);
  background: rgba(255, 107, 107, 0.10);
  border: 1px solid rgba(255, 107, 107, 0.25);
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  font-size: var(--fs-xs);
}

/* ── Topbar (frosted, sticky) ─────────────────────────────────────────────*/
.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  height: calc(var(--header-h) + var(--sat));
  padding: var(--sat) calc(var(--gap-md) + var(--sar)) 0 calc(var(--gap-md) + var(--sal));
  background: transparent;
  border-bottom: none;
  position: sticky;
  top: 0;
  z-index: 40;
}
/* "Backup AI" pill, centred in the top bar, shown only while AI is on the
   temporary backup model (relay /api/services/status → ai_backup). */
.ai-backup-pill {
  position: absolute;
  left: 50%;
  top: calc(var(--sat) + var(--header-h) / 2);
  transform: translate(-50%, -50%);
  z-index: 41;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 46vw;
  padding: 0.16rem 0.62rem;
  border-radius: 999px;
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--warn);
  background: rgba(224, 161, 58, 0.16);
  border: 1px solid rgba(224, 161, 58, 0.40);
  pointer-events: none;
}
.ai-backup-pill[hidden] { display: none; }
.topbar-brand-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 0;
  padding: 0;
  min-height: auto;
  color: var(--fg-0);
}
.topbar-brand-btn:hover { filter: none; }
.brand-diamond { flex: 0 0 auto; }
.brand-logo { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; display: block; }
.topbar-brand {
  font-weight: 600;
  font-size: var(--fs-md);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.compact-title {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--fg-1);
  margin-left: 0.25rem;
  opacity: 0;
  transition: opacity var(--t-base);
}
.conn-row {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}
.conn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-xs);
  color: var(--fg-1);
  white-space: nowrap;
}
.conn .dot, .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ok);
  flex: 0 0 auto;
}
.dot.err, .conn .dot.err { background: var(--critical); }
.dot.warn { background: var(--warn); }
.dot.pending { background: var(--warn); }
.build-tag { font-size: var(--fs-3xs); color: var(--fg-2); }
.refresh {
  background: none;
  border: 0;
  font-size: 1.05rem;
  padding: 0.25rem;
  min-height: auto;
  line-height: 1;
}
.refresh:hover { filter: brightness(1.2); }

/* ── Pages ───────────────────────────────────────────────────────────────*/
.pages { width: 100%; }
.page {
  /* No max-width on touch: a phone/tablet must FILL its viewport. Capping +
     centering here is what made wide-viewport devices (e.g. a Pixel in Chrome
     "Desktop site" mode reporting ~1000px) render a narrow 760px column with
     huge side margins, then scale the whole page down so everything looked tiny.
     A real mouse desktop re-applies the readable max-width further down. */
  max-width: none;
  margin: 0 auto;
  padding: var(--gap-md) calc(var(--gap-md) + var(--sar)) calc(var(--sab) + var(--gap-lg)) calc(var(--gap-md) + var(--sal));
}
/* Readable centered column only on a true mouse-driven desktop. */
@media (hover: hover) and (pointer: fine) {
  .page { max-width: 760px; }
}
.page.hidden { display: none !important; }

.large-title { font-size: var(--fs-2xl); font-weight: 600; margin: 0.25rem 0 1rem; }
.section-h, .sub-h {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-2);
  font-weight: 600;
  margin: 1.25rem 0 0.6rem;
}
.sub-h { margin: 0.75rem 0 0.4rem; }
.summary-text { color: var(--fg-1); font-size: var(--fs-sm); }
.title { font-weight: 600; }
.sub { color: var(--fg-1); font-size: var(--fs-sm); }
.meta { color: var(--fg-2); font-size: var(--fs-xs); }
.hint, .gh-hint, .log-hint, .sheet-help { color: var(--fg-2); font-size: var(--fs-xs); }
.muted { color: var(--fg-2); }
.empty {
  color: var(--fg-2);
  font-size: var(--fs-sm);
  text-align: center;
  padding: 1.25rem 1rem;
}
/* empty-state glyph: a muted, slightly larger line icon above the text */
.empty .icon { color: var(--fg-2); margin-bottom: 0.4rem; line-height: 0; }
.empty .icon .ico { opacity: 0.6; }
/* inline line-icons (registry SVGs via icon() in app.js), nudge to the text's
   optical centre next to adjacent label text (feed rows, badges, buttons). */
.ico { display: inline-block; vertical-align: -0.16em; }
.value, .v { color: var(--fg-1); }

/* ── Home columns (single col mobile, two cols ≥720) ──────────────────────*/
.home-cols { display: flex; flex-direction: column; gap: var(--gap-md); }
.home-col-main, .home-col-side { display: flex; flex-direction: column; gap: var(--gap-md); min-width: 0; width: 100%; }
/* Direct home cards stretch to the column width */
.home-col-main > *, .home-col-side > * { width: 100%; }

/* ============================================================================
   HERO"Needs attention"
   ============================================================================ */
.hero-attention {
  background: var(--accent-hero);
  border: 1px solid var(--accent-border);
  border-radius: var(--r-lg);
  padding: var(--pad-card) 1.1rem;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "ico body"
    "cta cta";
  align-items: start;
  column-gap: 0.7rem;
  row-gap: 0.5rem;
}
.hero-attention.clear {
  background: rgba(84, 224, 142, 0.07);
  border-color: rgba(84, 224, 142, 0.26);
}
.hero-ico {
  grid-area: ico;
  font-size: 1.1rem;
  line-height: 1;
  margin-top: 0.05rem;
}
.hero-body { grid-area: body; min-width: 0; }
/* eyebrow */
.hero-title {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  color: var(--accent-bright);
}
.hero-attention.clear .hero-title { color: var(--ok); }
/* hero glyph inherits container colour → state colour preserved (bell=accent,
   urgent=red dot, clear=green check). It's a lone block icon, so no baseline nudge. */
.hero-ico .ico { vertical-align: 0; }
.hero-attention .hero-ico { color: var(--accent-bright); }
.hero-attention.urgent .hero-ico { color: var(--critical); }
.hero-attention.clear .hero-ico { color: var(--ok); }
.hero-sub {
  color: var(--fg-1);
  font-size: var(--fs-sm);
  margin-top: 0.35rem;
}
.hero-list { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.hero-list li { color: var(--fg-1); font-size: var(--fs-sm); }
.hero-list strong, .hero-body b { color: var(--fg-0); font-weight: 700; }
.hero-cta {
  grid-area: cta;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  margin-top: 0.35rem;
  border-radius: var(--r-pill);
  min-height: var(--tap);
  font-weight: 700;
}
/* "All clear" has no CTA, let body span full width */
.hero-attention.clear { grid-template-areas: "ico body"; }

/* ============================================================================
   STAT CARDS
   ============================================================================ */
.stat-grid {
  display: grid;
  /* Fixed 2-up across the whole phone/tablet range. auto-fit/minmax was packing
     3-4 tiny cards on devices that report a wide CSS viewport (~600-700px), which
     made the home read as a shrunk desktop instead of a generous mobile layout.
     Desktop keeps the same 2-up grid, so the four tiles read as a 2×2 block. */
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-md);
}
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--gap-sm); }

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0.85rem 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  transition: border-color var(--t-base), transform var(--t-base);
}
.stat-card.critical { border-color: rgba(255, 107, 107, 0.35); background: rgba(255, 107, 107, 0.07); }
.stat-card.attention { border-color: rgba(224, 161, 58, 0.35); background: rgba(224, 161, 58, 0.06); }
/* leading icon chip (carries inline bg/color from app.js) */
.stat-ico {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; line-height: 1;
  background: var(--surface-hi);
}
.stat-body { min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.stat-num {
  font-size: var(--fs-stat);
  font-weight: 600;
  line-height: 1.05;
  color: var(--fg-0);
  letter-spacing: -0.01em;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2rem;
}
/* Single-line stat value (e.g. Shards "9/9 · 999ms"), never wrap mid-value. */
.stat-num.oneline { flex-wrap: nowrap; white-space: nowrap; }
.stat-label {
  font-size: var(--fs-2xs);
  color: var(--fg-2);
  font-weight: 600;
}
.stat-num.awaiting, .stat-num .awaiting { color: var(--warn); }
.stat-card.critical .stat-num { color: var(--critical); }
.stat-card.attention .stat-num { color: var(--warn); }
/* split card (Open / Awaiting reply), two stacked halves side by side */
.stat-split-card { gap: 1rem; }
.ssplit-half { display: flex; flex-direction: column; gap: 0.15rem; }
/* alert tile sub-counts */
.stat-num.tri { font-size: var(--fs-md); }
.t-orange { color: var(--warn); }
.t-green { color: var(--ok); }
.t-red { color: var(--critical); }

/* generic metric */
.metric { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0.7rem; }
.metric .label, .label { font-size: var(--fs-2xs); color: var(--fg-2); }

/* ============================================================================
   CARDS / LISTS / ROWS, the workhorse surfaces
   ============================================================================ */
.card, .list, .bill-card, .sai-card, .mi-card, .chart-card, .gusage-card,
.attr-card, .partner-card, .fleet-rollup, .ach-group, .rate-bubble,
.log-alert, .inc-summary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.list { overflow: hidden; }

/* interactive lift on hover (pointer devices only) */
@media (hover: hover) {
  .card:hover, .stat-card:hover, .partner-card:hover, .inc-clickable:hover,
  .issue-row:hover, .session-row:hover, .bill-head:hover, .feed-row:hover,
  .activity-row:hover, .ach-row:hover, .svc-row:hover, .log-alert:hover {
    border-color: var(--accent-border);
    transform: translateY(-1px);
  }
}

/* ── Rows (settings/list/activity) ────────────────────────────────────────*/
.row, .feed-row, .activity-row, .issue-row, .session-row, .svc-row,
.shard-row, .partner-srow, .sai-log-row, .mi-recent-row, .config-row,
.rate-row {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  padding: 0.7rem var(--pad-card);
  border-bottom: 1px solid var(--divider);
  min-width: 0;
}
.list .row:last-child,
.row:last-child { border-bottom: 0; }
.row.setting { gap: var(--gap-md); }

.row-body, .feed-body, .session-body, .inc-note-body, .bill-body { flex: 1; min-width: 0; }
.row-title, .feed-title {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--fg-0);
  overflow: hidden;
  text-overflow: ellipsis;
}
.row-sub, .feed-meta {
  color: var(--fg-1);
  font-size: var(--fs-xs);
  margin-top: 0.1rem;
}
.row-trail {
  margin-left: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--fg-1);
  font-size: var(--fs-xs);
}
.row-trail button { min-height: 36px; padding: 0.35rem 0.8rem; font-size: var(--fs-xs); }
.row.ticket-unread { background: var(--accent-soft); }
.row.ticket-unread .row-title::after {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-left: 0.4rem;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}

/* leading status circle / icon */
.leading-circle {
  flex: 0 0 auto;
  width: var(--circle-sm); height: var(--circle-sm);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  background: var(--surface-hi);
  color: var(--fg-0);
}
.leading-circle.accent { background: var(--accent-soft); color: var(--accent-bright); }
.leading-circle.neutral { background: var(--surface-hi); color: var(--fg-1); }
.leading-circle.critical { background: rgba(255, 107, 107, 0.18); color: var(--critical); }
.leading-circle.high { background: rgba(255, 148, 102, 0.18); color: var(--high); }
.leading-circle.warn { background: rgba(224, 161, 58, 0.18); color: var(--warn); }
.leading-circle.info { background: var(--accent-soft); color: var(--accent-bright); }
.leading-circle.ok { background: rgba(84, 224, 142, 0.16); color: var(--ok); }
.big-circle {
  flex: 0 0 auto;
  width: var(--circle-lg); height: var(--circle-lg);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  background: var(--surface-hi);
}

/* ── Activity feed ────────────────────────────────────────────────────────*/
.activity-feed-scroll {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  max-height: 70vh;
  overflow-y: auto;
}
.feed-icon {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem;
  background: var(--surface-hi);
}
.feed-kind { font-weight: 600; font-size: var(--fs-sm); }
.feed-tag {
  display: inline-flex; align-items: center;
  font-size: var(--fs-3xs);
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: var(--surface-hi);
  color: var(--fg-1);
}

/* feed filters */
.feed-controls-d { background: transparent; }
.feed-controls-d > summary { list-style: none; cursor: pointer; }
.feed-controls-d > summary::-webkit-details-marker { display: none; }
.feed-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
}
.feed-head-meta { display: inline-flex; align-items: center; gap: 0.5rem; }
.feed-head-cog { opacity: 0.8; }
.feed-count { font-size: var(--fs-xs); color: var(--fg-2); }
.feed-live { font-size: var(--fs-xs); color: var(--fg-2); }
.feed-live.end { color: var(--ok); }
.feed-controls { display: flex; flex-direction: column; gap: var(--gap-sm); padding: var(--gap-sm) 0; }
.feed-filter-row { display: flex; gap: var(--gap-sm); flex-wrap: wrap; }
.feed-filter-row > * { flex: 1; min-width: 0; }
.feed-dates { font-size: var(--fs-xs); }
.feed-date-lbl { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; }
.feed-select, .feed-input { min-height: 38px; }
.feed-btn { flex: 1; }

/* filter / segmented bars */
.filter-bar, .fleet-sort-bar, .feed-cat-bar, .chart-ranges, .partner-seg,
.bc-type-toggle, .issues-tools {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin-bottom: var(--gap-sm);
}
.filter-bar button, .fleet-sort-btn, .chart-range-btn, .partner-seg-btn,
.bc-type-btn, .chart-churn-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--fg-1);
  border-radius: var(--r-pill);
  padding: 0.35rem 0.8rem;
  min-height: 34px;
  font-size: var(--fs-xs);
  font-weight: 600;
}
.filter-bar button.active, .fleet-sort-btn.active, .chart-range-btn.active,
.partner-seg-btn.active, .bc-type-btn.active, .chart-churn-btn.active {
  background: var(--accent-container);
  border-color: var(--accent-border);
  color: var(--accent-bright);
}
.fleet-sort-label { font-size: var(--fs-xs); color: var(--fg-2); align-self: center; margin-right: 0.25rem; }

/* ── Buttons: small variants used inline ──────────────────────────────────*/
.back-btn {
  background: var(--surface-hi);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 36px; height: 36px;
  min-height: 36px;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; line-height: 1;
  flex: 0 0 auto;
}
.icon-btn { background: none; border: 0; min-height: auto; padding: 0.25rem; font-size: 1.05rem; }
.icon-btn.muted { opacity: 0.5; }
.edit-btn, .ack-btn, .partner-link-btn, .partner-del, .partner-save,
.log-copy-btn, .shard-restart, .issues-refresh, .issues-ack-all,
.sai-link, .ach-viewall, .pitch-copy, .inc-icon-btn {
  font-size: var(--fs-xs);
}

/* badges / tags / pills */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 0.35rem;
  border-radius: 999px;
  font-size: var(--fs-3xs);
  font-weight: 700;
  background: var(--critical);
  color: #2a0707;
}
.badge.zero { display: none; }
.git-ref, .route-badge, .mi-chip {
  display: inline-flex; align-items: center;
  font-size: var(--fs-3xs);
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: var(--surface-hi);
  color: var(--fg-1);
}
/* severity helpers (feed-tag / sev-tag / leading-circle modifiers) */
.sev-tag {
  display: inline-flex; align-items: center;
  font-size: var(--fs-3xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em;
  padding: 0.12rem 0.45rem; border-radius: 999px;
  background: var(--surface-hi); color: var(--fg-1);
}
.sev-tag.critical, .feed-tag.sev-critical, .sev-critical { background: rgba(255,107,107,0.16); color: var(--critical); }
.sev-tag.high, .feed-tag.sev-high, .sev-high { background: rgba(255,148,102,0.16); color: var(--high); }
.sev-tag.warn, .feed-tag.sev-warn, .sev-warn { background: rgba(224,161,58,0.16); color: var(--warn); }
/* REVIEW = a resolved alert worth a look, yellow, matching --warn (no .review
   modifier existed before, so these pills fell back to the neutral grey base). */
.sev-tag.review { background: rgba(224,161,58,0.16); color: var(--warn); }
.sev-tag.info, .feed-tag.sev-info, .sev-info { background: var(--accent-soft); color: var(--accent-bright); }
.sev-tag.ok, .feed-tag.sev-ok { background: rgba(84,224,142,0.16); color: var(--ok); }

/* ── Progress bars (.bar/.fill, sai-bar, gusage, mi-bar) ──────────────────*/
.bar, .sai-bar, .gusage-bar, .mi-bar {
  height: 8px;
  background: var(--surface-hi);
  border-radius: 999px;
  overflow: hidden;
  width: 100%;
}
.fill, .sai-bar-fill, .gusage-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width var(--t-base);
}
.fill.warn, .sai-bar-fill.warn, .gusage-warn { background: var(--warn); }
.fill.high { background: var(--high); }
.fill.critical, .sai-bar-fill.critical, .gusage-critical { background: var(--critical); }
.gusage-ok, .sai-bar-fill.ok { background: var(--ok); }

/* ============================================================================
   DETAIL HEADERS (server / ticket / incident / alerts)
   ============================================================================ */
.detail-header {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  margin: 0.25rem 0 1rem;
}
.header-body { flex: 1; min-width: 0; }
/* Branding reflection: when a server has set a custom brand colour, the operator
   detail header echoes it, a corner glow + a brand ring on the avatar + a chip.
   --cb-* vars are set inline from the brand hue in renderServerDetail(). */
.detail-header.branded {
  background:
    radial-gradient(120% 150% at 0% 0%, var(--cb-strong), transparent 60%),
    radial-gradient(110% 140% at 100% 0%, var(--cb-soft), transparent 64%);
  border: 1px solid var(--cb-border);
  border-radius: var(--r-md);
  padding: 0.5rem 0.7rem;
  margin-left: -0.2rem; margin-right: -0.2rem;
}
.detail-header.branded .big-circle { box-shadow: 0 0 0 2px var(--cb-ring), 0 6px 16px rgba(0,0,0,0.3); }
.brand-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  margin-top: 0.3rem;
  font-size: var(--fs-2xs); font-weight: 600; color: var(--fg-1);
  background: var(--surface-hi); border: 1px solid var(--border);
  border-radius: 999px; padding: 0.12rem 0.5rem;
}
.brand-sw { width: 0.7rem; height: 0.7rem; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,0.18); flex: 0 0 auto; }

/* Per-server thread: choose the outgoing channel (owner DM vs staff chat). */
.thread-channel { display: flex; gap: 0.4rem; margin-bottom: 0.6rem; }
.thread-channel[hidden] { display: none; }
.ch-btn {
  flex: 1; min-height: 2.2rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--fg-1); font-weight: 600; font-size: var(--fs-xs); cursor: pointer;
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
}
.ch-btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.header-name { font-size: var(--fs-lg); font-weight: 600; }
.header-sub { color: var(--fg-1); font-size: var(--fs-xs); margin-top: 0.15rem; }
.head-actions { margin-left: auto; display: flex; gap: 0.4rem; }
.detail-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.detail-actions button { flex: 1; min-width: 120px; }
.detail-cols { display: flex; flex-direction: column; gap: var(--gap-md); }
.detail-block { display: flex; flex-direction: column; gap: 0.4rem; }
.detail-block.full { grid-column: 1 / -1; }
.muted-banner {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0.7rem 0.9rem;
  font-size: var(--fs-sm);
  color: var(--fg-1);
  margin-bottom: 1rem;
}
.config-row { display: flex; gap: 0.5rem; align-items: baseline; }
.config-key { color: var(--fg-2); font-size: var(--fs-xs); flex: 0 0 40%; }
.config-value { color: var(--fg-0); font-size: var(--fs-sm); flex: 1; word-break: break-word; }
.config-value.muted { color: var(--fg-2); }
/* Poll rows: question takes the room, status sits hard-right (not mid-row). */
.config-row.poll-row { justify-content: space-between; }
.config-row.poll-row .config-key { flex: 1 1 auto; color: var(--fg-1); font-size: var(--fs-sm); }
.config-row.poll-row .config-value { flex: 0 0 auto; text-align: right; white-space: nowrap; }

/* ── Server-detail Configuration (collapsible disclosure + card system) ───── */
/* The whole section collapses (default) so the recent-events log stays high on
   the page. The <summary> reuses the .section-h look and IS the toggle, so we
   suppress the browser's default disclosure marker and supply our own chevron
   (mirrors the Billing .bill-card pattern). */
.cfg-disclosure { margin: 0; }
.cfg-disclosure-sum {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  list-style: none;
  margin: 1.25rem 0 0.6rem;
}
.cfg-disclosure-sum::-webkit-details-marker { display: none; }
.cfg-disclosure-title { flex: 1 1 auto; min-width: 0; }
.cfg-disclosure-chev {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--fg-2);
  transition: transform var(--t-base);
}
.cfg-disclosure[open] .cfg-disclosure-chev { transform: rotate(180deg); }
@media (hover: hover) {
  .cfg-disclosure-sum:hover .cfg-disclosure-chev { color: var(--fg-1); }
}
/* Cards pack into a masonry layout (CSS multi-column): variable-height cards
   flow top-to-bottom into as many ~280px columns as fit, collapsing to a single
   column on narrow/mobile, no row gaps from uneven card heights. */
#server-config-list {
  columns: 280px;
  column-gap: var(--gap-md);
}
#server-config-list > .cfg-card { break-inside: avoid; margin-bottom: var(--gap-md); }
/* "Updated" note + loading/empty placeholders aren't cards, span all columns. */
.cfg-updated,
#server-config-list > .empty { column-span: all; }
.cfg-card { padding: 0; overflow: hidden; }
.cfg-card-head {
  padding: 0.85rem var(--pad-card) 0.75rem;
  border-bottom: 1px solid var(--divider);
  font-weight: 600;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-2);
}
.cfg-rows { display: flex; flex-direction: column; }
.cfg-row {
  display: flex;
  align-items: baseline;
  gap: var(--gap-md);
  padding: 0.75rem var(--pad-card);
  border-bottom: 1px solid var(--divider);
  transition: background var(--t-base);
}
.cfg-row:last-child { border-bottom: 0; }
.cfg-label { flex: 0 0 42%; color: var(--fg-1); font-size: var(--fs-sm); word-break: break-word; }
.cfg-value { flex: 1; min-width: 0; color: var(--fg-0); font-size: var(--fs-sm); word-break: break-word; }
.cfg-value.muted { color: var(--fg-2); }
.cfg-value.bool-on { color: var(--ok); }
.cfg-value.bool-off { color: var(--fg-2); }
.cfg-edit {
  flex: 0 0 auto;
  align-self: center;
  background: var(--surface-hi);
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 8px);
  color: var(--fg-1);
  font-size: var(--fs-xs);
  min-height: 32px;
  padding: 0.3rem 0.8rem;
}
@media (hover: hover) {
  .cfg-row.is-editable:hover { background: var(--surface-hi); }
  .cfg-row.is-editable:hover .cfg-edit { border-color: var(--accent-border); color: var(--accent-bright); }
}
.cfg-updated {
  padding: 0.2rem var(--pad-card);
  font-size: var(--fs-xs);
  color: var(--fg-2);
}
.owner-thread-link { color: var(--accent-bright); font-size: var(--fs-sm); }
.added-by-line { color: var(--fg-2); font-size: var(--fs-xs); margin-top: 0.3rem; }

/* ============================================================================
   FLEET (rollup, sort, rows)
   ============================================================================ */
.fleet-rollup { padding: 1rem 1.2rem; display: flex; flex-direction: row; align-items: center; gap: 0.6rem; }
.fleet-members { display: flex; gap: var(--gap-md); flex-wrap: wrap; }
.fr-col { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; min-width: 0; align-items: center; text-align: center; }
.fr-num { font-size: var(--fs-xl); font-weight: 700; color: var(--fg-0); letter-spacing: -0.02em; }
.fr-label { font-size: var(--fs-2xs); color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.05em; }
.fr-divider { width: 1px; align-self: stretch; background: var(--divider); margin: 0.2rem 0; }

/* Community polls, render #home-polls as one clean card (header + rows). */
#home-polls { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--pad-card); }
#home-polls .section-h { margin: 0 0 0.6rem; padding: 0; }
#home-polls .list { background: none; border: 0; padding: 0; margin: 0; box-shadow: none; }
#home-polls .config-row { padding: 0.5rem 0; gap: 0.6rem; }
#home-polls .config-row + .config-row { border-top: 1px solid var(--divider); }
#home-polls .config-key { font-size: var(--fs-sm); color: var(--fg-1); }
#home-polls .config-value { font-size: var(--fs-xs); color: var(--fg-2); white-space: nowrap; }

/* ============================================================================
   CHARTS
   ============================================================================ */
.chart-card { padding: var(--pad-card); }
.chart-head { display: flex; align-items: baseline; gap: 0.5rem; justify-content: space-between; margin-bottom: 0.5rem; }
.chart-title { font-weight: 600; font-size: var(--fs-sm); }
.chart-caption, .chart-leg, .chart-legend { color: var(--fg-2); font-size: var(--fs-xs); }
.chart-legend { display: flex; gap: var(--gap-md); flex-wrap: wrap; margin-top: 0.5rem; }
.chart-leg { display: inline-flex; align-items: center; gap: 0.35rem; }
.chart-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.chart-plot { position: relative; width: 100%; }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-grid { stroke: var(--divider); stroke-width: 1; }

/* Graph focus mode, fill the viewport with just the growth chart (the top bar
   stays; the bottom menu + everything else are hidden) and drop the chart's
   glass background so it sits on the app gradient. Toggled via body.graph-focus. */
body.graph-focus .bottom-nav { display: none; }
body.graph-focus .scroll-area > * { visibility: hidden; }
body.graph-focus #home-fleet-chart {
  visibility: visible;
  position: fixed;
  top: calc(var(--header-h) + var(--sat));
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  padding: var(--gap-md) calc(var(--gap-md) + var(--sar)) calc(var(--gap-md) + var(--sab)) calc(var(--gap-md) + var(--sal));
  display: flex;
  overflow: hidden;
}
body.graph-focus #home-fleet-chart .chart-card {
  background: transparent;
  border: none;
  box-shadow: none;
  width: 100%;
  display: flex;
  flex-direction: column;
}
body.graph-focus #home-fleet-chart .chart-plot { flex: 1; min-height: 0; display: flex; }
body.graph-focus #home-fleet-chart .chart-svg { width: 100%; height: 100%; }
/* focus chrome: no scrollbar from the (hidden) page behind, and drop the
   redundant delta caption text (it's already in the legend), keep the buttons. */
body.graph-focus .scroll-area { overflow: hidden; }
body.graph-focus #home-fleet-chart .chart-caption > span { display: none; }
/* Focus mode: float the ThreatNet card over the top-middle of the graph. */
body.graph-focus #home-threatnet {
  visibility: visible;
  position: fixed;
  top: calc(var(--header-h) + var(--sat) + 0.55rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: min(640px, calc(100vw - 1.5rem));
  pointer-events: none;   /* a pure overlay, don't block graph interaction */
}
body.graph-focus #home-threatnet .sai-card {
  background: var(--glass-strong, rgba(20,16,16,0.94));
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(0,0,0,0.5);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.chart-axis, .chart-axis-y { fill: var(--fg-2); font-size: 10px; }
.chart-cursor { stroke: var(--accent-border); stroke-width: 1; }
.chart-milestone { stroke: var(--gold); stroke-dasharray: 3 3; }
.chart-ms-label { fill: var(--gold); font-size: 9px; }
.chart-annot { fill: var(--fg-2); font-size: 9px; }
.chart-tip, .fc-tip-t, .fc-tip-ev {
  background: var(--glass-strong);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.4rem 0.55rem;
  font-size: var(--fs-xs);
  color: var(--fg-0);
}
.fc-tip-t { font-weight: 600; }
.fc-tip-ev { color: var(--fg-1); }
.chart-delta { font-size: var(--fs-xs); font-weight: 600; }
.chart-delta.up { color: var(--ok); }
.chart-delta.down { color: var(--critical); }
.chart-delta.flat { color: var(--fg-2); }
.chart-empty { color: var(--fg-2); text-align: center; padding: 1.5rem; font-size: var(--fs-sm); }

/* ============================================================================
   SAi  (pink identity) + AI usage + rate/route/think/tool/chat
   ============================================================================ */
.sai-card { padding: var(--pad-card); display: flex; flex-direction: column; gap: 0.6rem; }
.sai-head, .sai-title { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.sai-title { font-size: var(--fs-md); }
.sai-working-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); }
.sai-title-est { color: var(--fg-2); font-size: var(--fs-xs); padding: 0.1rem 0.45rem; background: var(--pink-soft); border-radius: 999px; }
.sai-balance { font-size: var(--fs-xl); font-weight: 600; color: var(--fg-0); }
.sai-balance-auto, .sai-balance-stale { font-size: var(--fs-xs); color: var(--fg-2); }
.sai-balance-stale { color: var(--warn); }
.sai-state { font-size: var(--fs-xs); padding: 0.12rem 0.5rem; border-radius: 999px; background: var(--surface-hi); color: var(--fg-1); }
.sai-state-ok { background: rgba(84,224,142,0.16); color: var(--ok); }
.sai-state-warn { background: rgba(224,161,58,0.16); color: var(--warn); }
.sai-state-critical { background: rgba(255,107,107,0.16); color: var(--critical); }
.sai-bar-meta { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--fg-2); }
.sai-bar-pct { font-weight: 600; color: var(--fg-1); }
.sai-spend-line { display: flex; align-items: baseline; gap: 0.4rem; }
.sai-spend-month { font-size: var(--fs-lg); font-weight: 600; }
.sai-spend-sub { color: var(--fg-2); font-size: var(--fs-xs); }
.sai-spend-note { color: var(--fg-2); font-size: var(--fs-3xs); line-height: 1.3; margin-top: -0.35rem; }
.sai-link { color: var(--accent-bright); font-weight: 600; background: none; border: 0; padding: 0; min-height: auto; }
.sai-actions-min { display: flex; gap: 0.5rem; flex-wrap: wrap; }
/* AI provider status (Claude primary vs backup model) */
.sai-prov { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: var(--fs-sm);
  padding: 0.3rem 0.5rem; border-radius: var(--r-sm); background: var(--surface-hi); }
.sai-prov-dot { flex: 0 0 auto; font-size: 0.75em; }
.sai-prov-since { margin-left: auto; font-weight: 500; color: var(--fg-2); font-size: var(--fs-xs); }
.sai-prov-ok .sai-prov-label { color: var(--ok); }
.sai-prov-warn .sai-prov-label { color: var(--warn); }
.sai-prov-critical .sai-prov-label { color: var(--critical); }
.sai-prov-note { color: var(--fg-2); font-size: var(--fs-xs); line-height: 1.35; margin-top: -0.2rem; }
/* AI usage / call counts */
.sai-usage { font-size: var(--fs-sm); color: var(--fg-1); }
.sai-usage strong { color: var(--fg-0); font-weight: 700; }
.sai-usage-sub { color: var(--fg-2); font-size: var(--fs-xs); }
/* Recent AI provider-transition events */
.sai-events { font-size: var(--fs-xs); }
.sai-events > summary { cursor: pointer; color: var(--fg-2); font-weight: 600; list-style: none; }
.sai-events > summary::-webkit-details-marker { display: none; }
.sai-events > summary::before { content: "▸"; margin-right: 0.35rem; }
.sai-events[open] > summary::before { content: "▾"; }
.sai-events-list { list-style: none; margin: 0.35rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.sai-events-list li { display: flex; align-items: baseline; gap: 0.4rem; }
.sai-ev-ico { flex: 0 0 auto; }
.sai-ev-reason { color: var(--fg-1); }
.sai-ev-at { margin-left: auto; color: var(--fg-2); white-space: nowrap; }
.sai-bd-h { color: var(--fg-2); font-size: var(--fs-3xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin: 0.45rem 0 0.1rem; }

/* ThreatNet monitoring card, compact 3-up metric grid */
.tn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.tn-cell {
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
  padding: 0.4rem 0.3rem; border-radius: var(--r-sm);
  background: var(--surface-hi);
}
.tn-cell strong { font-size: var(--fs-md); font-weight: 700; line-height: 1; }
.tn-cell span { color: var(--fg-2); font-size: var(--fs-3xs); text-align: center; }
.tn-scanned { margin-top: 0.55rem; padding-top: 0.5rem; border-top: 1px solid var(--border); color: var(--fg-2); font-size: var(--fs-xs); text-align: center; }
.tn-scanned strong { color: var(--fg-0); }
/* Slimmer ThreatNet card (home main column, in place of the old fleet rollup). */
.sai-card.tn-slim { gap: 0.4rem; padding: 0.5rem 0.8rem; }
.sai-card.tn-slim .sai-head { justify-content: space-between; gap: 0.6rem; }
.tn-scanned-inline { font-size: var(--fs-xs); color: var(--fg-2); font-weight: 500; white-space: nowrap; }
.tn-scanned-inline strong { color: var(--fg-0); font-weight: 700; }
.sai-card.tn-slim .tn-grid { gap: 0.35rem; }
.sai-card.tn-slim .tn-cell { padding: 0.3rem 0.2rem; }
/* All 6 metric cards in one row on desktop (3 on mobile) */
@media (min-width: 720px) { .tn-grid { grid-template-columns: repeat(6, 1fr); } }

.sai-intro { background: var(--pink-soft); border: 1px solid rgba(238,91,162,0.28); border-radius: var(--r-md); padding: var(--pad-card); }
.sai-intro-emoji { font-size: 1.5rem; }
.sai-intro-head, .sai-intro-title { font-weight: 600; font-size: var(--fs-md); }
.sai-intro-sub, .sai-intro-note, .sai-intro-foot { color: var(--fg-1); font-size: var(--fs-sm); margin-top: 0.3rem; }
.sai-intro-section { margin-top: 0.7rem; }
.sai-intro-list { margin: 0.4rem 0 0; padding-left: 1.1rem; color: var(--fg-1); font-size: var(--fs-sm); display: flex; flex-direction: column; gap: 0.25rem; }

.sai-log-h { font-weight: 600; font-size: var(--fs-sm); margin-top: 0.5rem; }
.sai-log-evs { display: flex; flex-direction: column; }
.sai-log-row { flex-direction: column; align-items: stretch; gap: 0.2rem; }
.sai-log-sum { font-size: var(--fs-sm); }
.sai-log-kind { font-weight: 600; }
.sai-log-ts { color: var(--fg-2); font-size: var(--fs-xs); }
.sai-log-status { font-size: var(--fs-3xs); font-weight: 700; text-transform: uppercase; }
.sai-log-ev { color: var(--fg-1); font-size: var(--fs-xs); }
.sai-log-row.sai-state-warn { border-left: 2px solid var(--warn); padding-left: 0.7rem; }
.sai-log-row.sai-state-critical { border-left: 2px solid var(--critical); padding-left: 0.7rem; }

.rate-bubble { padding: 0.8rem; display: flex; flex-direction: column; gap: 0.45rem; }
.rate-row { padding: 0.4rem 0; border-bottom: 1px solid var(--divider); }
.rate-icon { font-size: 1.05rem; flex: 0 0 auto; }
.rate-title { font-weight: 600; font-size: var(--fs-sm); }
.rate-model { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-xs); color: var(--accent-bright); }
.rate-desc { color: var(--fg-1); font-size: var(--fs-xs); }
.rate-tried { color: var(--fg-2); font-size: var(--fs-xs); }

.route-wrap { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.route-badge { background: var(--accent-soft); color: var(--accent-bright); }
.route-reason { color: var(--fg-2); font-size: var(--fs-xs); }

.think-harder-row { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.5rem; }
.think-harder-btn { background: var(--pink-soft); border: 1px solid rgba(238,91,162,0.3); color: var(--pink); }

.tool-call { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem 0.7rem; margin: 0.4rem 0; }
.tool-icon { font-size: 0.95rem; }
.tool-name { font-weight: 600; font-size: var(--fs-sm); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.tool-status { font-size: var(--fs-3xs); color: var(--fg-2); }
.tool-arg, .tool-body, .tool-result { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-xs); color: var(--fg-1); white-space: pre-wrap; word-break: break-word; }
.tool-result-label { font-size: var(--fs-3xs); color: var(--fg-2); text-transform: uppercase; }

.chat-bubble { border-radius: 14px; padding: 0.6rem 0.8rem; margin: 0.4rem 0; max-width: 88%; font-size: var(--fs-sm); }
.chat-bubble.user { background: var(--accent); color: var(--on-accent); margin-left: auto; }
.chat-bubble.assistant { background: var(--surface-2); border: 1px solid var(--border); }
.chat-typing { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--fg-2); font-size: var(--fs-xs); }
.chat-typing-dots { display: inline-flex; gap: 0.2rem; }
.chat-typing-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--fg-2); animation: typing 1.2s infinite; }
.chat-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.chat-typing-dot:nth-child(3) { animation-delay: 0.3s; }
.chat-typing-text { color: var(--fg-2); }
@keyframes typing { 0%,60%,100% { opacity: 0.3; } 30% { opacity: 1; } }

/* ============================================================================
   ALERTS / INCIDENTS / ISSUES / LOG
   ============================================================================ */
.issues-toolbar, .issues-tools { display: flex; align-items: center; gap: 0.5rem; justify-content: space-between; margin-bottom: var(--gap-sm); }
.issues-count { font-size: var(--fs-xs); color: var(--fg-2); }
.issue-row { gap: 0.6rem; cursor: pointer; }
.issue-text { flex: 1; min-width: 0; font-size: var(--fs-sm); }
.issue-note { color: var(--fg-1); font-size: var(--fs-xs); margin-top: 0.15rem; }
.issue-chevron { color: var(--fg-2); flex: 0 0 auto; }

.alert-cols { display: flex; gap: 0.5rem; margin-bottom: var(--gap-sm); }
.alert-col { flex: 1; min-width: 0; }
.alert-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-xs); color: var(--fg-2); }

.inc-summary { padding: var(--pad-card); display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: var(--gap-md); }
.inc-clickable { cursor: pointer; }
.inc-meta { color: var(--fg-2); font-size: var(--fs-xs); display: flex; gap: 0.5rem; flex-wrap: wrap; }
.inc-affected { display: flex; flex-direction: column; gap: 0.25rem; }
.inc-aff-row { display: flex; gap: 0.5rem; font-size: var(--fs-xs); }
.inc-aff-k { color: var(--fg-2); flex: 0 0 40%; }
.inc-aff-v { color: var(--fg-0); flex: 1; }
.inc-working { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--accent-bright); font-size: var(--fs-xs); }
.inc-thread { display: flex; flex-direction: column; gap: 0.5rem; margin: var(--gap-md) 0; }
.inc-note { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0.7rem 0.85rem; }
.inc-note-head { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.25rem; }
.inc-note-kind { font-weight: 600; font-size: var(--fs-xs); }
.inc-note-ts { color: var(--fg-2); font-size: var(--fs-3xs); margin-left: auto; }
.inc-note-body { color: var(--fg-1); font-size: var(--fs-sm); }
.inc-cmds { margin-top: var(--gap-md); }
.inc-cmd-row { display: flex; gap: 0.5rem; margin-top: var(--gap-md); }
.inc-cmd-input { flex: 1; }
.inc-cmd, .inc-cmd-send { flex: 0 0 auto; }
.inc-icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); padding: 0.4rem; flex: 0 0 auto; cursor: pointer; background: var(--surface-hi); border: 1px solid var(--border); border-radius: 8px; color: var(--fg-0); }

.log-alert { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.85rem; margin-bottom: var(--gap-sm); cursor: pointer; transition: border-color var(--t-base), transform var(--t-base); }
.log-alert-ico { font-size: 1.1rem; flex: 0 0 auto; }
.log-alert-body { flex: 1; min-width: 0; }
.log-alert-title { font-weight: 600; font-size: var(--fs-sm); }
.log-alert-sub { color: var(--fg-1); font-size: var(--fs-xs); }
.log-alert-chev { color: var(--fg-2); }
.log-lines {
  background: #0c0909;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0.6rem 0.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-xs);
  color: var(--fg-1);
  max-height: 50vh;
  overflow: auto;
  white-space: pre;
}
.log-line { display: block; padding: 0.05rem 0; }
.log-line.sel { background: var(--accent-soft); }
.log-tools { display: flex; gap: 0.5rem; margin-bottom: var(--gap-sm); }

/* ============================================================================
   PARTNERS
   ============================================================================ */
.attr-card { padding: var(--pad-card); }
.attr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px,1fr)); gap: var(--gap-sm); }
.attr-funnel { display: flex; flex-direction: column; gap: 0.4rem; }
.attr-step { display: flex; align-items: center; gap: 0.5rem; }
.attr-source { flex: 0 0 auto; font-size: var(--fs-xs); color: var(--fg-1); }
.attr-n { font-weight: 600; color: var(--fg-0); }
.attr-l { color: var(--fg-2); font-size: var(--fs-xs); }
.attr-arrow { color: var(--fg-2); }
.attr-caveat { color: var(--fg-2); font-size: var(--fs-xs); margin-top: 0.5rem; }

.partner-board { display: flex; gap: var(--gap-md); overflow-x: auto; padding-bottom: 0.5rem; }
.partner-col { flex: 0 0 82%; min-width: 240px; }
.partner-col-h { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-2); font-weight: 600; margin-bottom: 0.4rem; }
.partner-col-body { display: flex; flex-direction: column; gap: var(--gap-sm); }
.partner-card { padding: 0.8rem 0.9rem; display: flex; flex-direction: column; gap: 0.4rem; transition: border-color var(--t-base), transform var(--t-base); }
.partner-top { display: flex; align-items: center; gap: 0.5rem; }
.partner-name { font-weight: 600; font-size: var(--fs-sm); flex: 1; min-width: 0; }
.partner-status, .partner-acq { font-size: var(--fs-3xs); padding: 0.1rem 0.45rem; border-radius: 999px; background: var(--surface-hi); color: var(--fg-1); }
.partner-meta, .partner-contact, .partner-notes, .partner-srv-note { color: var(--fg-1); font-size: var(--fs-xs); }
.partner-actions, .partner-add-actions, .partner-add-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.partner-actions button, .partner-link-btn, .partner-del, .partner-save { font-size: var(--fs-xs); min-height: 36px; padding: 0.35rem 0.7rem; }
.partner-del { background: rgba(255,107,107,0.12); border-color: rgba(255,107,107,0.3); color: var(--critical); }
.partner-save { background: var(--accent); color: var(--on-accent); border: 0; }
.partner-input, .partner-textarea { width: 100%; }
.partner-textarea { min-height: 70px; }
.partner-add-d summary, .partner-pitch-d summary, .partner-add-form { cursor: pointer; }
.partner-add-d, .partner-pitch-d { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0.8rem 0.9rem; margin-bottom: var(--gap-md); }
.partner-add-sum { font-weight: 600; font-size: var(--fs-sm); }
.partner-add-form { display: flex; flex-direction: column; gap: var(--gap-sm); margin-top: 0.6rem; }
.partner-srv-list { display: flex; flex-direction: column; gap: 0.4rem; }
.partner-srow { gap: 0.5rem; padding: 0.5rem 0; }
.partner-srow-body { flex: 1; min-width: 0; }
.partner-srow-name { font-weight: 600; font-size: var(--fs-sm); }
.partner-srow-meta { color: var(--fg-2); font-size: var(--fs-xs); }
.partner-seg { margin-bottom: 0.6rem; }

.pitch-list { display: flex; flex-direction: column; gap: var(--gap-sm); margin-top: 0.6rem; }
.pitch-row { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem 0.7rem; }
.pitch-head { display: flex; align-items: center; gap: 0.5rem; }
.pitch-label { font-weight: 600; font-size: var(--fs-sm); flex: 1; }
.pitch-copy { font-size: var(--fs-xs); }
.pitch-text { color: var(--fg-1); font-size: var(--fs-xs); margin-top: 0.3rem; white-space: pre-wrap; }
.pitch-note { color: var(--fg-2); font-size: var(--fs-3xs); margin-top: 0.25rem; }

/* Outreach: the "exactly how to reach out" CTA + AI-drafted pitch. */
.partner-contact { display: inline-flex; align-items: center; min-height: 36px;
  padding: 0.35rem 0.7rem; border-radius: var(--r-md); font-weight: 600;
  background: var(--surface-hi); border: 1px solid var(--border); color: var(--accent);
  text-decoration: none; }
.partner-contact:hover { border-color: var(--accent); }
.partner-draft-btn { font-size: var(--fs-xs); min-height: 36px; padding: 0.35rem 0.7rem;
  background: rgba(124,108,255,0.12); border: 1px solid rgba(124,108,255,0.3); color: var(--accent); }
.partner-pitch { background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 0.6rem 0.7rem; display: flex; flex-direction: column; gap: 0.45rem; }
.partner-pitch-text { color: var(--fg-1); font-size: var(--fs-xs); white-space: pre-wrap; }
.partner-pitch-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.partner-add-row select.partner-input { flex: 0 0 auto; width: auto; min-width: 11rem; }
.partner-discover { margin-bottom: var(--gap-md); }
.partner-discover-btn { width: 100%; min-height: 40px; font-weight: 600; font-size: var(--fs-sm);
  background: rgba(124,108,255,0.12); border: 1px solid rgba(124,108,255,0.3); color: var(--accent);
  border-radius: var(--r-md); }
.partner-discover-btn:hover:not(:disabled) { border-color: var(--accent); }
.partner-discover-btn:disabled { opacity: 0.6; }

/* ============================================================================
   ACHIEVEMENTS (layout only, never restyle emblem SVGs)
   ============================================================================ */
.ach-group { padding: var(--pad-card); margin-bottom: var(--gap-md); }
.ach-group-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.ach-group-title { font-weight: 600; font-size: var(--fs-sm); flex: 1; }
.ach-group-count { color: var(--fg-2); font-size: var(--fs-xs); }
/* The gallery is a vertical stack of groups; only the emblem grid inside each
   group is the multi-column grid (a grid wrapper here squeezed groups into one
   narrow column). */
.ach-gallery { display: flex; flex-direction: column; gap: var(--gap-md); }
.ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: var(--gap-sm);
}
.ach-cell { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; text-align: center; }
.ach-cell.ach-locked { opacity: 0.4; filter: grayscale(0.8); }
.ach-emblem { width: 52px; height: 52px; }
.ach-cell-lbl { font-size: var(--fs-3xs); color: var(--fg-1); line-height: 1.2; }
.ach-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0; }
.ach-empty, .ach-empty-note { color: var(--fg-2); font-size: var(--fs-xs); text-align: center; padding: 0.8rem; }
.ach-viewall { background: none; border: 0; color: var(--accent-bright); min-height: auto; padding: 0.3rem; }

/* ============================================================================
   BILLING (gold = premium)
   ============================================================================ */
.bill-card { margin-bottom: var(--gap-md); overflow: hidden; }
/* The summary IS the toggle, suppress the browser's default disclosure
   triangle so only our own chevron shows (no stray marker top-left). */
.bill-sum { flex: 1; min-width: 0; list-style: none; cursor: pointer; }
.bill-sum::-webkit-details-marker { display: none; }
.bill-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.85rem var(--pad-card); }
.bill-title { display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0; font-weight: 600; }
.bill-chev { display: inline-flex; flex: 0 0 auto; margin-left: auto; color: var(--fg-2); transition: transform var(--t-base); }
.bill-card[open] .bill-chev { transform: rotate(180deg); }
.bill-body { padding: 0 var(--pad-card) var(--pad-card); display: flex; flex-direction: column; gap: 0.5rem; }

.gusage-card { padding: var(--pad-card); display: flex; flex-direction: column; gap: 0.5rem; }
.gusage-head { display: flex; align-items: center; gap: 0.5rem; }
.gusage-plan { font-size: var(--fs-3xs); font-weight: 700; text-transform: uppercase; padding: 0.12rem 0.5rem; border-radius: 999px; background: var(--gold-soft); color: var(--gold); }
.gusage-meta, .gusage-sub { color: var(--fg-2); font-size: var(--fs-xs); }
.gusage-warn-text { color: var(--warn); font-size: var(--fs-xs); }

/* ============================================================================
   SHARDS / SERVICES / SESSIONS / SYSTEM
   ============================================================================ */
.shard-list, .svc-list { min-width: 0; }
.shard-row { gap: 0.6rem; }
.shard-dot, .svc-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--fg-2); }
.shard-dot.ok, .svc-dot.ok, .svc-dot.active { background: var(--ok); }
.shard-dot.warn, .svc-dot.warn { background: var(--warn); }
.shard-dot.err, .svc-dot.err, .svc-dot.failed { background: var(--critical); }
.shard-id { font-weight: 600; font-size: var(--fs-sm); }
.shard-meta { color: var(--fg-2); font-size: var(--fs-xs); }
.shard-restart { margin-left: auto; }

.svc-row { gap: 0.6rem; cursor: pointer; transition: border-color var(--t-base), transform var(--t-base); }
#topbar-services { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.svc-ind { display: inline-flex; align-items: center; gap: 0.3rem; flex: 0 0 auto; background: none; border: 0; padding: 0; min-height: 0; color: var(--fg-2); font-size: var(--fs-2xs); font-weight: 700; white-space: nowrap; cursor: pointer; }
.svc-ind .svc-dot { width: 7px; height: 7px; }
.svc-ind:active { opacity: 0.6; }
.svc-row-name { font-weight: 600; font-size: var(--fs-sm); flex: 1; min-width: 0; }
.svc-row-state { color: var(--fg-1); font-size: var(--fs-xs); }
.svc-chev { color: var(--fg-2); }
.svc-spinner { width: 14px; height: 14px; border: 2px solid var(--surface-hi); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }

/* ── Combined system-status indicator ─────────────────────────────────────
   One compact pill (dot + label) whose colour/animation = the worst severity
   across all services, SAi-Dev and the relay connection. Click → popover. */
.sys-status {
  display: inline-flex; align-items: center; gap: 0.4rem; flex: 0 0 auto;
  background: var(--surface-hi); border: 1px solid var(--border); border-radius: 999px;
  padding: 0.18rem 0.55rem 0.18rem 0.5rem; min-height: 0;
  color: var(--fg-1); font-size: var(--fs-2xs); font-weight: 700; white-space: nowrap; cursor: pointer;
}
.sys-status:active { opacity: 0.7; }
.sys-status .sys-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--fg-2); }
.sys-status .svc-spinner { width: 12px; height: 12px; }
.sys-status.sys-live     .sys-dot { background: var(--ok);       animation: sys-pulse 2s ease-in-out infinite; }
.sys-status.sys-alert    .sys-dot { background: var(--warn);     animation: sys-flash 1s steps(1) infinite; }
.sys-status.sys-critical .sys-dot { background: var(--critical); animation: sys-flash 0.4s steps(1) infinite; }
.sys-status.sys-alert    { color: var(--warn); }
.sys-status.sys-critical { color: var(--critical); }
@keyframes sys-pulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 var(--ok); } 50% { opacity: 0.55; box-shadow: 0 0 0 3px rgba(0,0,0,0); } }
@keyframes sys-flash { 0%,49% { opacity: 1; } 50%,100% { opacity: 0.2; } }

/* Popover anchored under the indicator: one row per system. */
.sys-pop {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 230px; max-width: 86vw;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); padding: 0.3rem; overflow: hidden;
}
.conn-row { position: relative; }
.sys-pop-row {
  display: flex; align-items: center; gap: 0.5rem; width: 100%;
  background: none; border: 0; border-radius: 8px; padding: 0.45rem 0.5rem; min-height: 0;
  color: var(--fg-1); font-size: var(--fs-xs); text-align: left; cursor: pointer;
}
.sys-pop-row:not(:disabled):hover { background: var(--surface-hi); }
.sys-pop-row:disabled, .sys-pop-info { cursor: default; }
.sys-pop-row .svc-dot { width: 9px; height: 9px; }
.sys-pop-name  { font-weight: 700; flex: 0 0 auto; }
.sys-pop-ver   { flex: 0 0 auto; font-size: var(--fs-3xs); font-weight: 600; color: var(--fg-2); font-variant-numeric: tabular-nums; background: var(--surface-hi); border-radius: 6px; padding: 0.05rem 0.32rem; letter-spacing: 0.01em; }
.sys-pop-state { color: var(--fg-2); font-size: var(--fs-2xs); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sys-pop-tag   { font-size: var(--fs-3xs); font-weight: 700; flex: 0 0 auto; text-transform: uppercase; letter-spacing: 0.03em; color: var(--fg-2); }
.sys-tag-live     { color: var(--ok); }
.sys-tag-loading  { color: var(--accent); }
.sys-tag-alert    { color: var(--warn); }
.sys-tag-critical { color: var(--critical); }
@media (prefers-reduced-motion: reduce) {
  .sys-status .sys-dot { animation: none !important; }
}
.svc-log-pre {
  background: #0c0909; border: 1px solid var(--border); border-radius: 10px;
  padding: 0.6rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-xs); color: var(--fg-1); max-height: 40vh; overflow: auto; white-space: pre;
}
@keyframes spin { to { transform: rotate(360deg); } }

.session-row { gap: 0.6rem; cursor: pointer; }
.session-row.active { border-left: 2px solid var(--accent); }
.session-body { flex: 1; min-width: 0; }
.session-actions { display: flex; gap: 0.4rem; }

/* ============================================================================
   MOD INSIGHT (.mi-*)
   ============================================================================ */
.mi-card { padding: var(--pad-card); display: flex; flex-direction: column; gap: 0.6rem; }
.mi-head { display: flex; align-items: center; gap: 0.5rem; }
.mi-title { font-weight: 600; font-size: var(--fs-sm); flex: 1; }
.mi-sub-h { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-2); font-weight: 600; }
.mi-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.mi-bar-key { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--fg-1); }
.mi-bar { display: flex; height: 8px; background: var(--surface-hi); border-radius: 999px; overflow: hidden; }
.mi-bar-sa { background: var(--pink); height: 100%; }
.mi-bar-nat { background: var(--steel); height: 100%; }
.mi-actors, .mi-recent { display: flex; flex-direction: column; gap: 0.3rem; }
.mi-actor-row, .mi-recent-row { gap: 0.5rem; font-size: var(--fs-xs); }
.mi-actor-native, .mi-native { color: var(--steel); }
.mi-native.high { color: var(--high); }
.mi-tamper { color: var(--critical); font-size: var(--fs-xs); }

/* ============================================================================
   SHEET (bottom-sheet modal)
   ============================================================================ */
.sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 80;
}
.sheet {
  width: 100%; max-width: 560px;
  /* Cap to the viewport so tall content (e.g. the full trophy case) can never
     push the title or the Cancel/Close actions off-screen. The body scrolls;
     the header + actions stay pinned. */
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 0.6rem 1.1rem calc(1.1rem + var(--sab));
  box-shadow: var(--shadow);
  animation: sheet-up var(--t-base);
}
.sheet-handle, .sheet-title, .sheet-actions { flex: 0 0 auto; }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet-handle { width: 38px; height: 4px; border-radius: 999px; background: var(--surface-hi); margin: 0.25rem auto 0.85rem; }
.sheet-title { font-weight: 600; font-size: var(--fs-md); margin-bottom: 0.75rem; }
.sheet-body { display: flex; flex-direction: column; gap: var(--gap-sm); flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.sheet-form { display: flex; flex-direction: column; gap: var(--gap-sm); }
.sheet-field { display: flex; flex-direction: column; gap: 0.3rem; }
.sheet-label { font-size: var(--fs-xs); color: var(--fg-1); font-weight: 600; }
.sheet-help { font-size: var(--fs-3xs); }
.sheet-actions { display: flex; gap: 0.6rem; margin-top: 1rem; }
.sheet-primary { flex: 1; }
.sheet-secondary { flex: 0 0 auto; background: var(--surface-hi); }

/* ============================================================================
   MARKDOWN (.md-*)
   ============================================================================ */
.md-h1, .md-h2, .md-h3, .md-h4 { font-weight: 600; margin: 0.6rem 0 0.3rem; }
.md-h1 { font-size: var(--fs-lg); }
.md-h2 { font-size: var(--fs-md); }
.md-h3 { font-size: var(--fs-base); }
.md-ul, .md-ol { margin: 0.3rem 0; padding-left: 1.2rem; color: var(--fg-1); }
.md-ul li, .md-ol li { margin: 0.15rem 0; }
.md-link { color: var(--accent-bright); }
.md-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; background: var(--surface-hi); padding: 0.1rem 0.35rem; border-radius: 5px; }
.md-pre { background: #0c0909; border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem; overflow: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-xs); }
.md-bq { border-left: 3px solid var(--accent-border); padding-left: 0.75rem; color: var(--fg-1); margin: 0.4rem 0; }

/* ============================================================================
   SKELETONS
   ============================================================================ */
.skel, .skel-line, .skel-circle {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 37%, var(--surface) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: 8px;
}
.skel-line { height: 12px; margin: 0.3rem 0; }
.skel-circle { width: var(--circle-sm); height: var(--circle-sm); border-radius: 50%; }
.skel-stack { display: flex; flex-direction: column; gap: 0.4rem; padding: var(--pad-card); }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ============================================================================
   TICKETS
   ============================================================================ */
.ticket-preview { color: var(--fg-1); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket-reply { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0.7rem 0.85rem; margin-bottom: var(--gap-sm); }
.ticket-reply.operator, .ticket-reply.staff { border-left: 2px solid var(--accent); }
.ticket-reply.user { border-left: 2px solid var(--steel); }
/* Operator-internal notes (e.g. SAi escalation), never shown to the customer;
   tinted amber here so they're obviously internal in the operator's thread. */
.ticket-reply.internal { background: rgba(224, 161, 58, 0.10); border-color: rgba(224, 161, 58, 0.32); border-left: 2px solid var(--warn); }
.ticket-reply.internal .who { color: var(--warn); }
.int-tag { font-size: var(--fs-3xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--warn); background: rgba(224,161,58,0.16); border-radius: 999px; padding: 0.05rem 0.4rem; margin-left: 0.35rem; }

/* SAi-Support draft awaiting operator approval. Tinted amber to read as a
   pending action, nothing here has been sent to the user yet. */
.sai-draft { background: rgba(224,161,58,0.08); border: 1px solid rgba(224,161,58,0.32); border-left: 2px solid var(--warn); border-radius: var(--r-md); padding: 0.7rem 0.85rem; margin-bottom: var(--gap-sm); }
.sai-draft .who { color: var(--warn); font-weight: 600; margin-bottom: 0.4rem; }
.sai-draft-text { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--fg-0); padding: 0.5rem 0.6rem; font: inherit; resize: vertical; }
.sai-draft-gloss { margin-top: 0.45rem; padding: 0.4rem 0.55rem; background: var(--surface-hi); border-radius: var(--r-sm); color: var(--fg-2); font-size: var(--fs-xs); }
.sai-draft-gloss strong { color: var(--fg-1); }
/* Two-way ticket translation: English gloss under a non-English message, and the
   composer cue that a reply will be sent translated. */
.tr-gloss { margin-top: 0.4rem; padding: 0.35rem 0.55rem; border-left: 2px solid var(--accent-border); background: var(--surface-hi); border-radius: var(--r-sm); color: var(--fg-2); font-size: var(--fs-xs); }
.tr-gloss strong { color: var(--fg-1); }
.ticket-tr-hint { margin: 0.1rem 0 0.5rem; color: var(--fg-2); font-size: var(--fs-xs); }
.ticket-tr-hint strong { color: var(--fg-1); }
.sai-draft-actions { display: flex; gap: var(--gap-sm); margin-top: 0.55rem; }
.sai-draft-actions button { min-height: 36px; padding: 0.35rem 0.9rem; font-size: var(--fs-xs); }
.sai-draft-actions button[data-approve-draft] { background: var(--accent); border-color: var(--accent-border); color: #fff; }
.sai-draft-actions button.ghost { background: transparent; }

/* ============================================================================
   TOAST + PTR (pull-to-refresh) + swipe
   ============================================================================ */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bottom-nav-h) + var(--sab) + 0.75rem);
  transform: translateX(-50%) translateY(1rem);
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  color: var(--fg-0);
  padding: 0.65rem 1rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base), transform var(--t-base);
  max-width: 90vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.t-green { border-color: rgba(84,224,142,0.4); }
.toast.t-orange { border-color: rgba(224,161,58,0.4); }
.toast.t-red { border-color: rgba(255,107,107,0.4); }
.t-clear { color: var(--fg-0); }
.t-sep { color: var(--fg-2); margin: 0 0.3rem; }

.ptr {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: center;
  height: 0; overflow: hidden;
  pointer-events: none;
}
.ptr-disc {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin-top: 0.5rem;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 50%;
}
.ptr-arrow { color: var(--accent); transition: transform var(--t-base); }
.ptr-spinner { display: none; width: 16px; height: 16px; border: 2px solid var(--surface-hi); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }

.swipe-bg {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 1.1rem;
  background: rgba(255, 107, 107, 0.18);
  color: var(--critical);
  border-radius: var(--r-md);
}

/* ============================================================================
   MISC small utilities referenced by app.js / index.html
   ============================================================================ */
.dot-sep { color: var(--fg-2); margin: 0 0.3rem; }
.ot-arrow { color: var(--fg-2); }
.what { font-weight: 600; }
.who { color: var(--fg-1); }
.right { margin-left: auto; }
.sm { font-size: var(--fs-xs); }
.short { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tri { color: var(--fg-2); }
.icon { flex: 0 0 auto; }
.broadcast { color: var(--accent-bright); }
.full { width: 100%; }
.section-h a { float: right; font-weight: 600; }

/* generic colour-state text helpers (chart-delta etc. shared) */
.up { color: var(--ok); }
.down { color: var(--critical); }
.flat { color: var(--fg-2); }

/* ============================================================================
   BOTTOM NAV (frosted, pinned)
   ============================================================================ */
/* Primary nav: a top-right dropdown menu opened by the topbar hamburger
   (was a fixed bottom bar). The data-tab buttons + JS are unchanged. */
.bottom-nav {
  position: fixed;
  top: calc(3.4rem + var(--sat, 0px));
  right: calc(var(--gap-md) + var(--sar));
  z-index: 60;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 216px;
  max-width: calc(100vw - 1.5rem);
  padding: 0.35rem;
  gap: 0.1rem;
  background: var(--bg-nav);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  box-shadow: 0 18px 44px rgba(0,0,0,0.55);
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.bottom-nav.open { opacity: 1; transform: none; pointer-events: auto; }
.bottom-nav > button {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.7rem;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  padding: 0.6rem 0.65rem;
  min-height: auto;
  color: var(--fg-1);
  font-size: var(--fs-sm);
  font-weight: 600;
  position: relative;
}
.bottom-nav > button:hover { filter: none; }
.bottom-nav > button:active { filter: none; transform: none; }
.bottom-nav > button:active .ico-pill { transform: scale(0.92); }
.ico-pill {
  display: flex; align-items: center; justify-content: center;
  width: var(--pill-w); height: var(--pill-h);
  border-radius: var(--r-pill);
  transition: background var(--t-base), transform var(--t-fast);
}
.bottom-nav .ico { width: 22px; height: 22px; opacity: 0.85; }
.bottom-nav > button.active { color: var(--accent-bright); }
.bottom-nav > button.active .ico-pill { background: var(--accent-container); }
.bottom-nav > button.active .ico { filter: none; opacity: 1; }
.bottom-nav .badge {
  position: static;
  margin-left: auto;
}

/* ============================================================================
   RESPONSIVE, ≥720px: wider grids, two-column home, two-column detail.
   ============================================================================ */
/* Width-only niceties, safe on touch (tablets/large phones) too. */
@media (min-width: 720px) {
  .compact-title { opacity: 1; }
  .page { padding-left: var(--gap-lg); padding-right: var(--gap-lg); }
}

/* Multi-column DESKTOP layouts are gated on capability, not just width: a real
   mouse-driven desktop (hover + fine pointer). Touch devices (phones AND tablets)
   stay single-column regardless of how wide a CSS viewport they report, this is
   what actually fixes large phones that report a desktop-ish width. */
@media (min-width: 720px) and (hover: hover) and (pointer: fine) {
  .detail-cols { display: grid; grid-template-columns: 1fr 1fr; }
  .detail-block.full { grid-column: 1 / -1; }
  .partner-board { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; }
  .partner-col { flex: 1; min-width: 0; }
}
@media (min-width: 1000px) and (hover: hover) and (pointer: fine) {
  .page { max-width: 980px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .home-cols { flex-direction: row; align-items: flex-start; gap: var(--gap-lg); }
  .home-col-main { flex: 1.4; min-width: 0; }
  .home-col-side { flex: 1; min-width: 0; position: sticky; top: var(--gap-md); }
  /* Config rows stay single-column within each card; the cards themselves now
     pack into a masonry layout (#server-config-list CSS columns), which is
     what shortens the once-long per-server settings list. */
}

/* ── Extra-large / fullscreen displays ────────────────────────────────────*/
/* Widen the readable column and scale the rem-based UI up a touch so it stays
   comfortable from a distance on a fullscreen monitor. Fixed-px chrome (top bar,
   bottom nav, tap targets) is unaffected. Mouse-desktop only. */
@media (min-width: 1500px) and (hover: hover) and (pointer: fine) {
  html { font-size: 17px; }
  .page { max-width: 1180px; }
}
@media (min-width: 1800px) and (hover: hover) and (pointer: fine) {
  html { font-size: 18px; }
  .page { max-width: 1360px; }
}
@media (min-width: 2300px) and (hover: hover) and (pointer: fine) {
  html { font-size: 19px; }
  .page { max-width: 1580px; }
}

/* ── Live stat-change animations (home dashboard) ─────────────────────────
   A value ticking up/down gets a brief directional "shadow" pulse, joins lift
   up in green, removals drop down in red, messages rise in blue, and a
   ThreatNet catch stamps the number boldly. Neutralised under reduced-motion. */
@keyframes statUpGreen {
  0%   { text-shadow: none; transform: translateY(0); color: inherit; }
  25%  { text-shadow: 0 -7px 16px rgba(46,204,113,.8); transform: translateY(-3px); color: #2ecc71; }
  100% { text-shadow: none; transform: translateY(0); color: inherit; }
}
@keyframes statDownRed {
  0%   { text-shadow: none; transform: translateY(0); color: inherit; }
  25%  { text-shadow: 0 7px 16px rgba(231,76,60,.8); transform: translateY(3px); color: #e74c3c; }
  100% { text-shadow: none; transform: translateY(0); color: inherit; }
}
@keyframes statUpBlue {
  0%   { text-shadow: none; transform: translateY(0); color: inherit; }
  25%  { text-shadow: 0 -7px 16px rgba(60,193,240,.85); transform: translateY(-3px); color: #3cc1f0; }
  100% { text-shadow: none; transform: translateY(0); color: inherit; }
}
@keyframes statStamp {
  0%   { transform: scale(1.7); opacity: .15; text-shadow: 0 0 26px rgba(238,91,162,.95); letter-spacing: .05em; }
  55%  { transform: scale(.9);  opacity: 1;   text-shadow: 0 0 16px rgba(238,91,162,.75); }
  78%  { transform: scale(1.07); }
  100% { transform: scale(1); text-shadow: none; letter-spacing: 0; }
}
.stat-flash-up   { animation: statUpGreen 1.1s ease-out; }
.stat-flash-down { animation: statDownRed 1.1s ease-out; }
.stat-flash-blue { animation: statUpBlue 1.1s ease-out; }
.stat-stamp      { display: inline-block; animation: statStamp .85s cubic-bezier(.2,1.5,.4,1); font-weight: 900 !important; color: var(--pink, #ee5ba2); }

/* ── Reduced motion ───────────────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── Dev Wiki (operator-only visual reference) ─────────────────────────────── */
.dw { padding: 0 var(--pad-card, 1rem) 2.5rem; max-width: 940px; }
.dw-lead { color: var(--fg-1); font-size: var(--fs-sm); line-height: 1.55; margin: 0 0 1rem; }
.dw-toc { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.25rem; }
.dw-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.35rem 0.7rem; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border);
  color: var(--fg-1); font-size: var(--fs-xs); font-weight: 600;
  cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast);
}
.dw-chip:hover { color: var(--fg-0); border-color: var(--accent-border); }
.dw-sec { margin: 1.9rem 0; scroll-margin-top: 4.5rem; }
.dw-sec > h2 { font-size: var(--fs-lg); margin: 0 0 0.35rem; color: var(--fg-0); }
.dw-sec > p { color: var(--fg-1); font-size: var(--fs-sm); line-height: 1.55; margin: 0.2rem 0 0.8rem; }
.dw-sec code { background: rgba(255,255,255,0.06); padding: 0.05rem 0.35rem; border-radius: 5px; font-size: 0.92em; }
.dw-diagram {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 1rem; margin: 0.5rem 0;
}
.dw-diagram pre.mermaid { margin: 0; background: none; text-align: center; min-width: min-content; }
.dw-table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); margin: 0.5rem 0; }
.dw-table th, .dw-table td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--divider); vertical-align: top; }
.dw-table thead th { color: var(--fg-2); font-weight: 600; }
.dw-table tbody th { color: var(--fg-0); font-weight: 700; padding-top: 0.9rem; }
.dw-table td { color: var(--fg-1); }
.dw-table tr:last-child td { border-bottom: 0; }
.dw-badge { display: inline-block; padding: 0.03rem 0.4rem; border-radius: var(--r-pill); font-size: var(--fs-3xs); font-weight: 700; }
.dw-badge.free { background: rgba(84,224,142,0.14); color: var(--ok); }
.dw-badge.prem { background: rgba(245,196,34,0.14); color: var(--gold); }
.dw-badge.byok { background: rgba(60,193,240,0.14); color: var(--accent); }
.dw-more { margin: 0.5rem 0; }
.dw-more > summary { cursor: pointer; color: var(--accent); font-size: var(--fs-sm); font-weight: 600; padding: 0.3rem 0; }
.dw-note { color: var(--fg-2); font-size: var(--fs-xs); line-height: 1.5; margin: 0.4rem 0; }