@import url('/packages/web-shared/src/design-tokens.css');
@import url('/packages/web-shared/src/components.css');
@import url('/packages/web-shared/src/v2.css');

:root {
  /* Semantic aliases — web-admin */
  --ink:    var(--athenyx-text);
  --muted:  var(--athenyx-muted);
  --paper:  var(--athenyx-canvas);
  --panel:  var(--athenyx-surface);
  --line:   var(--athenyx-border);
  --ok:     var(--athenyx-healthy);
  --warn:   var(--athenyx-warning);
  --gold:   var(--athenyx-warning);
  --steel:  var(--athenyx-advisor);
  --ai:     var(--athenyx-ai);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--athenyx-font-body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}

/* ── Fixed header ─────────────────────────────────────────────────────────── */

#admin-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  background: rgba(15, 19, 23, 0.96); /* token: --athenyx-canvas @ 0.96 */
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
  z-index: 100;
}

.adm-hd-left  { display: flex; align-items: center; gap: 32px; }
.adm-hd-right { display: flex; align-items: center; gap: 12px; }

.adm-brand {
  font-family: var(--athenyx-font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--ai);
  text-transform: uppercase;
  letter-spacing: -.02em;
}

.adm-nav {
  display: flex;
  gap: 28px;
  font-family: var(--athenyx-font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.adm-nav a {
  color: var(--muted);
  text-decoration: none;
  padding-bottom: 2px;
}

.adm-nav a.is-active {
  color: var(--ai);
  border-bottom: 2px solid var(--ai);
}

.adm-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 28px;
  border-radius: var(--athenyx-radius-pill);
  background: var(--panel);
  border: 1px solid var(--line);
  font-family: var(--athenyx-font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.adm-pill.pill-ok {
  color: var(--ai);
  border-color: rgba(98, 240, 190, 0.3); /* token: --athenyx-ai @ 0.3 */
}

.adm-pill.pill-warn {
  color: var(--warn);
  border-color: rgba(255, 182, 72, 0.3); /* token: --athenyx-warning @ 0.3 */
}

.adm-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}

.adm-avatar {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, #1f3540, #0a1820);
  border: 1px solid var(--ai);
  color: var(--ai);
  display: grid;
  place-items: center;
  font-family: var(--athenyx-font-display);
  font-weight: 700;
  font-size: 11px;
}

/* ── Two-column layout (sidebar + main) ───────────────────────────────────── */

.admin-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
  padding-top: 56px;
}

#admin-sidebar {
  position: sticky;
  top: 56px;
  height: calc(100vh - 56px);
  overflow-y: auto;
  padding: 24px 12px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: var(--athenyx-surface);
  box-shadow: 16px 0 32px rgba(0, 0, 0, 0.16);
}

.side-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.side-label {
  display: block;
  font-family: var(--athenyx-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 10px;
  margin-bottom: 6px;
}

.side-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--ink);
  font-family: var(--athenyx-font-body);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

.side-link:hover { background: rgba(255, 255, 255, 0.04) /* token: --athenyx-text @ 0.04 */; }

.side-link.is-active {
  background: var(--athenyx-ai-soft);
  color: var(--ai);
}

.side-grp {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.side-ico {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.side-ico .ms {
  font-size: 16px;
  color: var(--muted);
}

.side-link.is-active .ms { color: var(--ai); }

.side-ct {
  font-family: var(--athenyx-font-display);
  font-size: 10px;
  color: var(--muted);
}

.side-ct-live { color: var(--ai); }
.side-ct-warn { color: var(--warn); }

/* ── Main content area ────────────────────────────────────────────────────── */

main {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 32px 40px 60px;
  overflow: auto;
  min-height: 0;
}

/* ── Dashboard toolbar ────────────────────────────────────────────────────── */

.dash-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
}

.dash-kicker {
  font-family: var(--athenyx-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .28em;
  color: var(--muted);
  text-transform: uppercase;
}

.dash-h1 {
  margin: 6px 0 0;
  font-family: var(--athenyx-font-display);
  font-weight: 600;
  font-size: 32px;
  color: var(--ink);
  letter-spacing: -.02em;
}

.dash-tools {
  display: flex;
  gap: 10px;
}

.b-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  height: 36px;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--athenyx-font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}

.b-ghost:hover { background: rgba(255, 255, 255, 0.06) /* token: --athenyx-text @ 0.06 */; }

.b-ghost .ms { font-size: 16px; color: var(--muted); }

.b-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  height: 36px;
  border-radius: 8px;
  background: var(--ai);
  color: #072018;
  border: 0;
  font-family: var(--athenyx-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
}

/* ── KPI strip ───────────────────────────────────────────────────────────── */

.kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}

.kpi {
  padding: 18px 20px;
  background: var(--panel);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kpi-k {
  font-family: var(--athenyx-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--muted);
  text-transform: uppercase;
}

.kpi-v {
  font-family: var(--athenyx-font-mono);
  font-size: 30px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0;
  font-feature-settings: "tnum";
}

.kpi-v.kpi-ok { color: var(--ai); }
.kpi-v.kpi-warn { color: var(--warn); }
.kpi-v.kpi-crit { color: var(--athenyx-critical); }

.kpi-spark {
  height: 32px;
  width: 100%;
  margin-top: 2px;
}

.kpi-delta {
  font-family: var(--athenyx-font-display);
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
}

.kpi-delta-up { color: var(--ai); }
.kpi-delta-dn { color: var(--athenyx-critical); }

/* ── Dashboard 2-column row ──────────────────────────────────────────────── */

.dash-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.dash-panel {
  background: var(--panel);
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}

.dash-panel-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.dash-panel-lbl {
  font-family: var(--athenyx-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--muted);
  text-transform: uppercase;
  display: block;
}

.dash-panel-title {
  margin: 4px 0 0;
  font-family: var(--athenyx-font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -.01em;
}

/* ── Durability grid ─────────────────────────────────────────────────────── */

.dur-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.dur-card {
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dur-k {
  font-family: var(--athenyx-font-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.dur-v {
  font-family: var(--athenyx-font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  font-feature-settings: "tnum";
}

/* ── Sessions table shell ────────────────────────────────────────────────── */

.table-shell {
  background: var(--panel);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
  padding: 22px 24px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}

.table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.table-tools {
  display: flex;
  gap: 8px;
}

/* ── Incident View ───────────────────────────────────────────────────────── */

.inc-banner {
  height: 64px;
  background: linear-gradient(90deg, rgba(255, 77, 79, 0.18), rgba(255, 77, 79, 0.06) 60%, transparent); /* token: --athenyx-critical @ 0.18, 0.06 */
  border-bottom: 2px solid var(--athenyx-critical);
  display: flex;
  align-items: center;
  padding: 0 40px;
  gap: 18px;
  margin-bottom: 0;
}

.inc-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--athenyx-critical);
  color: var(--athenyx-text);
  font-family: var(--athenyx-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.inc-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--athenyx-text);
  animation: sl-pulse 1.2s ease-in-out infinite;
}

.inc-banner-title {
  margin: 0;
  font-family: var(--athenyx-font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -.01em;
}

.inc-banner-id {
  font-family: var(--athenyx-font-mono);
  font-size: 11px;
  color: var(--muted);
  margin-left: auto;
}

.inc-body {
  display: grid;
  grid-template-columns: 1fr 380px;
  min-height: calc(100vh - 56px - 64px);
}

.inc-main {
  padding: 24px 32px 32px;
  overflow: auto;
}

.inc-right {
  border-left: 1px solid var(--line);
  padding: 20px 24px;
  overflow: auto;
  background: var(--panel);
}

.inc-crumb {
  font-family: var(--athenyx-font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.inc-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 14px;
}

.inc-stat {
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.inc-stat.crit {
  border-color: rgba(255, 77, 79, 0.35); /* token: --athenyx-critical @ 0.35 */
  background: rgba(255, 77, 79, 0.05); /* token: --athenyx-critical @ 0.05 */
}

.inc-stat-k {
  display: block;
  font-family: var(--athenyx-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--muted);
  text-transform: uppercase;
}

.inc-stat-v {
  display: block;
  font-family: var(--athenyx-font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 3px;
  font-feature-settings: "tnum";
}

.inc-stat-v.crit { color: var(--athenyx-critical); }

.inc-stat-sub {
  display: block;
  font-family: var(--athenyx-font-mono);
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}

.inc-chart {
  margin-top: 24px;
  padding: 18px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--athenyx-radius);
}

.inc-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.inc-chart-title {
  margin: 0;
  font-family: var(--athenyx-font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.inc-chart-sub {
  font-family: var(--athenyx-font-mono);
  font-size: 10px;
  color: var(--muted);
}

.inc-chart-legend {
  display: flex;
  gap: 14px;
  font-family: var(--athenyx-font-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--muted);
  text-transform: uppercase;
}

.inc-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.inc-chart-legend i {
  width: 10px;
  height: 2px;
  display: inline-block;
}

.inc-timeline {
  margin-top: 24px;
  padding: 18px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--athenyx-radius);
}

.inc-timeline h3 {
  margin: 0 0 14px;
  font-family: var(--athenyx-font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.inc-ev {
  display: grid;
  grid-template-columns: 84px 16px 1fr;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--athenyx-border-soft);
}

.inc-ev:last-child { border-bottom: 0; }

.inc-ev-ts {
  font-family: var(--athenyx-font-mono);
  font-size: 11px;
  color: var(--muted);
  padding-top: 1px;
}

.inc-ev-dot {
  display: flex;
  justify-content: center;
  padding-top: 4px;
}

.inc-ev-dot i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ai);
  display: block;
}

.inc-ev-crit .inc-ev-dot i {
  background: var(--athenyx-critical);
  box-shadow: 0 0 0 4px rgba(255, 77, 79, 0.18); /* token: --athenyx-critical @ 0.18 */
}

.inc-ev-who {
  font-family: var(--athenyx-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--ai);
  text-transform: uppercase;
}

.inc-ev-crit .inc-ev-who { color: var(--athenyx-critical); }

.inc-ev-txt {
  font-family: var(--athenyx-font-body);
  font-size: 13px;
  color: var(--ink);
  margin-top: 3px;
}

.inc-card {
  padding: 18px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--athenyx-radius);
  margin-bottom: 16px;
}

.inc-card h3 {
  margin: 0 0 12px;
  font-family: var(--athenyx-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--muted);
  text-transform: uppercase;
}

.inc-row {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid var(--athenyx-border-soft);
}

.inc-row:last-child { border-bottom: 0; }
.inc-row-k { font-family: var(--athenyx-font-body); font-size: 12px; color: var(--muted); }
.inc-row-v { font-family: var(--athenyx-font-mono); font-size: 12px; color: var(--ink); }

.inc-impact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--athenyx-border-soft);
}

.inc-impact-item:last-child { border-bottom: 0; }

.inc-impact-ic {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--panel);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--ink);
}

.inc-impact-ic .ms { font-size: 16px; }

.inc-impact-crit .inc-impact-ic {
  background: rgba(255, 77, 79, 0.1); /* token: --athenyx-critical @ 0.1 */
  border-color: rgba(255, 77, 79, 0.35); /* token: --athenyx-critical @ 0.35 */
  color: var(--athenyx-critical);
}

.inc-impact-lbl {
  font-family: var(--athenyx-font-body);
  font-size: 12px;
  color: var(--ink);
}

.inc-actions-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.inc-btn {
  padding: 0 14px;
  height: 40px;
  border-radius: 8px;
  font-family: var(--athenyx-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.inc-btn-primary { background: var(--ai); color: #072018; border: 0; }
.inc-btn-ghost { background: var(--panel); border: 1px solid var(--line); color: var(--ink); }

/* ── Geographic map ──────────────────────────────────────────────────────── */

.dash-map {
  height: 280px;
  position: relative;
  background: var(--paper);
  border-radius: 10px;
  border: 1px solid var(--athenyx-border-soft);
  overflow: hidden;
}

/* ── Activity chart ──────────────────────────────────────────────────────── */

.activity-chart {
  height: 300px;
  position: relative;
}

/* ── Sessions table ──────────────────────────────────────────────────────── */

.tt {
  width: 100%;
  border-collapse: collapse;
}

.tt th {
  text-align: left;
  padding: 14px 18px;
  font-family: var(--athenyx-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--muted);
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.tt td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--athenyx-border-soft);
  font-family: var(--athenyx-font-body);
  font-size: 13px;
  color: var(--ink);
  vertical-align: middle;
}

.tt tr:last-child td { border-bottom: 0; }
.tt tr:hover td { background: rgba(255, 255, 255, 0.02) /* token: --athenyx-text @ 0.02 */; }
.tt-selected td { background: rgba(98, 240, 190, 0.04); /* token: --athenyx-ai @ 0.04 */ }

.tt-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tt-cell-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--ai);
  flex-shrink: 0;
}

.tt-cell-icon .ms { font-size: 16px; }

.tt-cell-nm {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
}

.tt-cell-sub {
  font-family: var(--athenyx-font-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 2px;
}

.tt-num {
  font-family: var(--athenyx-font-display);
  font-feature-settings: "tnum";
  font-size: 13px;
  font-weight: 600;
}

.tt-num-live { color: var(--ai); }

.tt-bar {
  width: 100%;
  height: 6px;
  background: var(--paper);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 6px;
}

.tt-bar > i {
  display: block;
  height: 100%;
  background: var(--ai);
}

/* ── Status pill (table) ─────────────────────────────────────────────────── */

.stp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--athenyx-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.stp-d {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.stp-ok { background: rgba(98, 240, 190, 0.1); border: 1px solid rgba(98, 240, 190, 0.3); color: var(--ai); } /* token: --athenyx-ai @ 0.1, 0.3 */
.stp-ok .stp-d { background: var(--ai); }

.stp-warn { background: rgba(255, 182, 72, 0.1); /* token: --athenyx-warning @ 0.1 */ border: 1px solid rgba(255, 182, 72, 0.3); /* token: --athenyx-warning @ 0.3 */ color: var(--warn); }
.stp-warn .stp-d { background: var(--warn); }

.stp-crit { background: rgba(255, 77, 79, 0.1); /* token: --athenyx-critical @ 0.1 */ border: 1px solid rgba(255, 77, 79, 0.3); /* token: --athenyx-critical @ 0.3 */ color: var(--athenyx-critical); }
.stp-crit .stp-d { background: var(--athenyx-critical); }

.stp-muted { background: var(--panel); border: 1px solid var(--line); color: var(--muted); }
.stp-muted .stp-d { background: var(--muted); }

/* ── Legacy panel/hero (kept for proof boards) ───────────────────────────── */

.hero,
.panel,
.session-card,
.metrics article {
  border: 1px solid var(--line);
  background: rgba(22, 28, 34, 0.86); /* token: --athenyx-surface @ 0.86 */
  box-shadow: none;
}

.hero {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 300px);
  gap: 28px;
  padding: 34px;
  border-radius: var(--athenyx-radius);
  align-items: start;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--steel);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 760px;
  margin-bottom: 14px;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  font-family: var(--athenyx-font-display);
}

h2 {
  margin-bottom: 0;
  font-weight: 700;
  font-family: var(--athenyx-font-display);
}

h3 {
  margin-bottom: 0;
  font-weight: 500;
  font-family: var(--athenyx-font-display);
}

.hero-copy {
  max-width: 620px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 1.08rem;
}

.first-demo-boundary-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.first-demo-boundary {
  min-width: 0;
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: var(--athenyx-radius);
  padding: 12px 14px;
  background: rgba(22, 28, 34, 0.72); /* token: --athenyx-surface @ 0.72 */
}

.first-demo-boundary span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.first-demo-boundary strong {
  color: var(--ink);
  font-size: 0.9rem;
}

.first-demo-boundary p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.first-demo-boundary-info {
  border-left-color: var(--steel);
}

.first-demo-boundary-warn {
  border-left-color: var(--gold);
}

.first-demo-boundary-ok {
  border-left-color: var(--ok);
}

.first-demo-step-rail {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: var(--athenyx-radius);
  padding: 14px;
  background: rgba(22, 28, 34, 0.58); /* token: --athenyx-surface @ 0.58 */
}

.first-demo-step-rail-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: var(--muted);
}

.first-demo-step-rail-head span {
  color: var(--steel);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.first-demo-step-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.first-demo-step {
  min-width: 0;
  display: grid;
  gap: 4px;
  border: 1px solid rgba(196, 214, 226, 0.12);
  border-radius: var(--athenyx-radius);
  padding: 10px;
  background: rgba(15, 19, 23, 0.62) /* token: --athenyx-canvas @ 0.62 */;
}

.first-demo-step-active {
  border-color: rgba(47, 212, 200, 0.62); /* token: --athenyx-advisor @ 0.62 */
  background: rgba(47, 212, 200, 0.1); /* token: --athenyx-advisor @ 0.1 */
}

.first-demo-step span {
  color: var(--steel);
  font-size: 0.68rem;
  font-weight: 800;
}

.first-demo-step strong {
  font-size: 0.84rem;
}

.first-demo-step p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.32;
}

.config {
  display: grid;
  gap: 14px;
  align-self: end;
}

.session-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(140px, 0.5fr));
  gap: 12px;
  margin-top: 18px;
}

.session-bulk-bar {
  position: sticky;
  top: 12px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--athenyx-radius);
  background: rgba(15, 23, 29, 0.9);
}

.checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 700;
}

.checkbox-row input {
  width: auto;
  margin: 0;
}

.risk-action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.risk-action-bar button {
  min-height: 2rem;
  padding: 8px 12px;
  font-size: 0.78rem;
}

.session-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.compact-checkbox span {
  color: var(--muted);
  font-size: 0.76rem;
}

.config-drawer {
  align-self: start;
  border: 1px solid rgba(196, 214, 226, 0.12);
  border-radius: var(--athenyx-radius);
  background: rgba(15, 23, 29, 0.62);
  padding: 14px;
}

.config-drawer summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.config-drawer .config {
  margin-top: 14px;
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--athenyx-radius);
  padding: 12px 13px;
  color: var(--ink);
  background: #0f171d;
}

select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--athenyx-radius);
  padding: 10px 12px;
  color: var(--ink);
  background: #0f171d;
}

button {
  border: 1px solid rgba(47, 212, 200, 0.34); /* token: --athenyx-advisor @ 0.34 */
  border-radius: var(--athenyx-radius);
  padding: 12px 18px;
  color: #9ef4e9;
  background: rgba(47, 212, 200, 0.12); /* token: --athenyx-advisor @ 0.12 */
  font-weight: 800;
  cursor: pointer;
}

.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6rem;
  border: 1px solid rgba(47, 212, 200, 0.34); /* token: --athenyx-advisor @ 0.34 */
  border-radius: var(--athenyx-radius);
  padding: 12px 18px;
  color: #9ef4e9;
  background: rgba(47, 212, 200, 0.12); /* token: --athenyx-advisor @ 0.12 */
  font-weight: 800;
  text-decoration: none;
}

.mini-link {
  min-height: 2rem;
  padding: 8px 12px;
  font-size: 0.78rem;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}

/* ── Node topology visualizer ─────────────────────────────────────────────── */

.topology-panel {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--athenyx-radius);
  background: rgba(10, 18, 16, 0.72);
  vertical-align: top;
  margin-bottom: 18px;
}

.topology-ring {
  width: 160px;
  height: 160px;
}

.topology-hub {
  fill: var(--athenyx-advisor, #7ba8ff);
  fill-opacity: 0.85;
}

.topology-hub-label {
  fill: var(--athenyx-text);
  font-size: 5px;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}

.topology-edge {
  stroke: rgba(196, 214, 226, 0.2);
  stroke-width: 0.6;
}

.topology-node {
  fill-opacity: 0.85;
}

.topology-node-ok {
  fill: var(--athenyx-healthy, #39d98a);
}

.topology-node-warn {
  fill: var(--athenyx-warning, #ffb648);
}

.topology-node-critical {
  fill: var(--athenyx-alert, #ff7b5c);
}

.topology-node-ended {
  fill: rgba(142, 160, 175, 0.4);
}

.topology-pulse {
  fill: none;
  stroke: var(--athenyx-healthy, #39d98a);
  stroke-width: 0.8;
  stroke-opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: topology-pulse 2.4s ease-out infinite;
}

@keyframes topology-pulse {
  0%   { transform: scale(1);    stroke-opacity: 0.6; }
  100% { transform: scale(1.78); stroke-opacity: 0; }
}

.topology-label {
  fill: var(--muted, #8ea0af);
  font-size: 4.5px;
  text-anchor: middle;
  dominant-baseline: auto;
  pointer-events: none;
}

.topology-empty {
  fill: rgba(142, 160, 175, 0.55);
}

.topology-legend {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 0.68rem;
  color: var(--muted);
  margin: 0;
}

.topology-legend .topology-node {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.cohort-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.cohort-grid article {
  border: 1px solid var(--line);
  border-radius: var(--athenyx-radius);
  padding: 16px;
  background: rgba(15, 23, 29, 0.72);
}

.cohort-grid span {
  display: block;
  font-size: 1.5rem;
  line-height: 1;
}

.cohort-queue {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: var(--athenyx-radius);
  padding: 16px;
  background: rgba(15, 23, 29, 0.72);
}

.queue-list {
  display: grid;
  gap: 10px;
}

.queue-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--athenyx-radius);
  background: rgba(18, 24, 30, 0.78);
}

.queue-item.critical {
  border-color: rgba(255, 123, 92, 0.45); /* token: --athenyx-danger @ 0.45 */
}

.queue-item.high {
  border-color: rgba(230, 185, 76, 0.34); /* token: ~--athenyx-warning @ 0.34 */
}

.queue-item.moderate {
  border-color: rgba(47, 212, 200, 0.24); /* token: --athenyx-advisor @ 0.24 */
}

.queue-item.stable {
  border-color: rgba(57, 217, 138, 0.22); /* token: --athenyx-healthy @ 0.22 */
}

.queue-item p {
  margin: 6px 0 0;
  color: var(--muted);
}

.queue-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ledger-list {
  display: grid;
  gap: 10px;
}

.ledger-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--athenyx-radius);
  background: rgba(18, 24, 30, 0.78);
}

.ledger-entry.ok {
  border-color: rgba(57, 217, 138, 0.22); /* token: --athenyx-healthy @ 0.22 */
}

.ledger-entry.failed {
  border-color: rgba(255, 123, 92, 0.45); /* token: --athenyx-danger @ 0.45 */
}

.ledger-entry p {
  margin: 6px 0 0;
  color: var(--muted);
}

.closeout-checklist {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.closeout-checklist article {
  border: 1px solid var(--line);
  border-radius: var(--athenyx-radius);
  padding: 14px;
  background: rgba(18, 24, 30, 0.78);
}

.closeout-checklist article.ok {
  border-color: rgba(57, 217, 138, 0.22); /* token: --athenyx-healthy @ 0.22 */
}

.closeout-checklist article.warn {
  border-color: rgba(255, 123, 92, 0.45); /* token: --athenyx-danger @ 0.45 */
}

.closeout-checklist p {
  margin: 6px 0 0;
  color: var(--muted);
}

.suggestion-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pilot-ops-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr);
  gap: 14px;
  margin-top: 16px;
}

.pilot-ops-primary,
.pilot-ops-action {
  border: 1px solid var(--line);
  border-radius: var(--athenyx-radius);
  background: rgba(15, 23, 29, 0.72);
}

.pilot-ops-primary {
  display: grid;
  align-content: space-between;
  gap: 18px;
  padding: 18px;
}

.pilot-ops-primary.ok {
  border-color: rgba(57, 217, 138, 0.24); /* token: --athenyx-healthy @ 0.24 */
}

.pilot-ops-primary.warn {
  border-color: rgba(230, 185, 76, 0.38); /* token: ~--athenyx-warning @ 0.38 */
}

.pilot-ops-primary.block {
  border-color: rgba(255, 123, 92, 0.45); /* token: --athenyx-danger @ 0.45 */
}

.pilot-ops-primary span,
.pilot-ops-kpis span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.pilot-ops-primary strong {
  display: block;
  margin-top: 4px;
  font-size: 1.6rem;
}

.pilot-ops-primary p,
.pilot-ops-action p {
  margin: 8px 0 0;
  color: var(--muted);
}

.pilot-ops-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.pilot-ops-kpis div {
  border: 1px solid var(--line);
  border-radius: var(--athenyx-radius);
  padding: 12px;
  background: rgba(18, 24, 30, 0.78);
}

.pilot-ops-kpis strong {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  font-family: var(--athenyx-font-display);
}

.pilot-ops-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.pilot-ops-action {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.pilot-ops-action.ok {
  border-color: rgba(57, 217, 138, 0.22); /* token: --athenyx-healthy @ 0.22 */
}

.pilot-ops-action.warn {
  border-color: rgba(230, 185, 76, 0.38); /* token: ~--athenyx-warning @ 0.38 */
}

.pilot-ops-action.block {
  border-color: rgba(255, 123, 92, 0.45); /* token: --athenyx-danger @ 0.45 */
}

.pilot-ops-action strong {
  display: block;
  margin-top: 10px;
}

.pilot-ops-session-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.pilot-ops-session-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--athenyx-radius);
  padding: 12px;
  background: rgba(18, 24, 30, 0.78);
}

.pilot-ops-session-list article.critical,
.pilot-ops-session-list article.high {
  border-color: rgba(255, 123, 92, 0.36); /* token: --athenyx-danger @ 0.36 */
}

.pilot-ops-session-list article.moderate {
  border-color: rgba(230, 185, 76, 0.32); /* token: ~--athenyx-warning @ 0.32 */
}

.pilot-ops-session-list strong {
  display: block;
  margin-top: 8px;
}

.pilot-ops-session-list p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.incident-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 18px 0;
  border-radius: var(--athenyx-radius);
  padding: 22px 26px;
  color: var(--ink);
  box-shadow: none;
}

.incident-banner.blocked {
  border: 1px solid rgba(255, 123, 92, 0.45); /* token: --athenyx-danger @ 0.45 */
  background: rgba(255, 123, 92, 0.12); /* token: --athenyx-danger @ 0.12 */
}

.incident-banner.clear {
  border: 1px solid rgba(57, 217, 138, 0.34); /* token: --athenyx-healthy @ 0.34 */
  background: rgba(57, 217, 138, 0.1); /* token: --athenyx-healthy @ 0.1 */
}

.incident-banner .eyebrow,
.incident-banner p {
  color: var(--muted);
}

.incident-banner h2 {
  margin-bottom: 8px;
  font-size: 1.5rem;
}

.incident-banner p {
  margin-bottom: 0;
}

.incident-banner strong {
  border: 1px solid var(--line);
  border-radius: var(--athenyx-radius);
  padding: 9px 14px;
  text-transform: uppercase;
}

.demo-run-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  gap: 14px;
  margin-top: 16px;
}

.demo-run-primary,
.demo-run-step {
  border: 1px solid var(--line);
  border-radius: var(--athenyx-radius);
  background: rgba(15, 23, 29, 0.72);
}

.demo-run-primary {
  display: grid;
  align-content: space-between;
  gap: 18px;
  padding: 18px;
}

.demo-run-primary.ok,
.demo-run-step.ok {
  border-color: rgba(57, 217, 138, 0.22); /* token: --athenyx-healthy @ 0.22 */
}

.demo-run-primary.warn,
.demo-run-step.warn {
  border-color: rgba(230, 185, 76, 0.38); /* token: ~--athenyx-warning @ 0.38 */
}

.demo-run-primary.block,
.demo-run-step.block {
  border-color: rgba(255, 123, 92, 0.45); /* token: --athenyx-danger @ 0.45 */
}

.demo-run-primary span,
.demo-run-step span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.demo-run-primary strong {
  display: block;
  margin-top: 6px;
  font-size: 1.32rem;
  line-height: 1.15;
}

.demo-run-primary p,
.demo-run-step p {
  margin: 8px 0 0;
  color: var(--muted);
}

.demo-run-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.demo-run-step {
  display: grid;
  align-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 14px;
}

.demo-run-step strong {
  display: block;
  margin-top: 6px;
  line-height: 1.16;
}

.metrics article {
  border-radius: var(--athenyx-radius);
  padding: 20px;
}

.metrics span {
  display: block;
  font-size: 1.875rem;
  font-weight: 700;
  font-family: var(--athenyx-font-display);
  line-height: 1;
}

.metrics p,
.timestamp,
.empty,
.summary,
.blockers {
  color: var(--muted);
}

.durability-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.durability-strip article {
  display: grid;
  gap: 6px;
  min-height: 72px;
  padding: 14px;
  border: 1px solid rgba(196, 214, 226, 0.14);
  border-radius: var(--athenyx-radius);
  background: rgba(15, 23, 29, 0.72);
}

.durability-strip span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.durability-strip strong {
  font-family: var(--athenyx-font-display);
  font-weight: 500;
}

.panel {
  border-radius: var(--athenyx-radius);
  padding: 26px;
  margin-top: 18px;
}

.panel-head,
.session-title {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}

.sessions {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.session-card {
  border-radius: var(--athenyx-radius);
  padding: 22px;
}

.session-card.warn {
  border-color: rgba(185, 77, 42, 0.46);
}

.session-card.ok {
  border-color: rgba(29, 117, 88, 0.34);
}

.session-title span {
  border-radius: var(--athenyx-radius);
  padding: 7px 12px;
  color: var(--athenyx-danger);
  background: rgba(255, 123, 92, 0.16); /* token: --athenyx-danger @ 0.16 */
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.session-card.ok .session-title span {
  color: var(--athenyx-healthy);
  background: rgba(57, 217, 138, 0.14); /* token: --athenyx-healthy @ 0.14 */
}

.risk-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}


.risk-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--athenyx-radius);
  padding: 4px 8px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.risk-chip.critical {
  color: var(--athenyx-danger);
  background: rgba(255, 123, 92, 0.18); /* token: --athenyx-danger @ 0.18 */
}

.risk-chip.high {
  color: var(--athenyx-warning);
  background: rgba(255, 182, 72, 0.16); /* token: --athenyx-warning @ 0.16 */
}

.risk-chip.moderate {
  color: var(--athenyx-advisor);
  background: var(--athenyx-advisor-soft);
}

.risk-chip.stable {
  color: var(--athenyx-healthy);
  background: rgba(57, 217, 138, 0.14); /* token: --athenyx-healthy @ 0.14 */
}

.status-pill {
  border-radius: var(--athenyx-radius);
  padding: 7px 12px;
  color: var(--athenyx-danger);
  background: rgba(255, 123, 92, 0.16); /* token: --athenyx-danger @ 0.16 */
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.status-pill.ok {
  color: var(--athenyx-healthy);
  background: rgba(57, 217, 138, 0.14); /* token: --athenyx-healthy @ 0.14 */
}

.status-pill.warn {
  color: var(--athenyx-warning);
  background: rgba(255, 182, 72, 0.12); /* token: --athenyx-warning @ 0.12 */
}

.status-pill.block {
  color: var(--athenyx-danger);
  background: rgba(255, 123, 92, 0.22); /* token: --athenyx-danger @ 0.22 */
}

.readiness-columns {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: 16px;
  margin-top: 18px;
}

.readiness-columns h3 {
  margin: 0 0 12px;
}

.readiness-gate-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.readiness-gate,
.readiness-session {
  border: 1px solid var(--line);
  border-radius: var(--athenyx-radius);
  padding: 14px;
  background: rgba(18, 24, 30, 0.78);
}

.readiness-gate {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.readiness-gate.ok,
.readiness-session.ok {
  border-color: rgba(57, 217, 138, 0.22); /* token: --athenyx-healthy @ 0.22 */
}

.readiness-gate.warn,
.readiness-session.warn {
  border-color: rgba(230, 185, 76, 0.38); /* token: ~--athenyx-warning @ 0.38 */
}

.readiness-gate.block,
.readiness-session.block {
  border-color: rgba(255, 123, 92, 0.45); /* token: --athenyx-danger @ 0.45 */
}

.readiness-gate p {
  margin: 6px 0 0;
  color: var(--muted);
}

.readiness-gate code {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  white-space: normal;
}

dl {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

dd {
  margin: 3px 0 0;
  font-weight: 800;
}

.alert {
  border: 1px solid rgba(185, 77, 42, 0.32);
  border-radius: var(--athenyx-radius);
  padding: 12px 14px;
  color: var(--warn);
  background: rgba(255, 123, 92, 0.1); /* token: --athenyx-danger @ 0.1 */
}

.compact {
  margin-bottom: 0;
}

.anchors,
.detail-grid {
  display: grid;
  gap: 14px;
}

.anchors {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.anchors article,
.detail-grid article {
  border: 1px solid var(--line);
  border-radius: var(--athenyx-radius);
  padding: 16px;
  background: rgba(15, 23, 29, 0.72);
}

.anchors article.warn {
  border-color: rgba(185, 77, 42, 0.38);
}

.anchors article.ok {
  border-color: rgba(29, 117, 88, 0.34);
}

.anchors span {
  float: right;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

code {
  display: block;
  margin-top: 8px;
  white-space: normal;
  word-break: break-word;
  color: var(--steel);
}

.detail-grid {
  grid-template-columns: 1.15fr 1fr 1fr;
}

.session-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 16px 0 18px;
  border: 1px solid var(--line);
  border-radius: var(--athenyx-radius);
  padding: 14px;
  background: rgba(15, 23, 29, 0.72);
}

.session-actions div {
  display: grid;
  gap: 3px;
  min-width: 150px;
  margin-right: auto;
}

.session-actions span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.session-actions strong {
  font-size: 1rem;
}

.row {
  border-top: 1px solid var(--line);
  padding: 12px 0;
}

.row:first-of-type {
  border-top: 0;
}

.row span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.mini-button {
  min-height: 2rem;
  padding: 8px 12px;
  font-size: 0.78rem;
}

.mini-button.secondary {
  background: transparent;
  border-color: var(--border);
  color: var(--muted);
}

.mini-button.secondary:hover {
  border-color: var(--accent);
  color: var(--text);
}

.remediation-meta {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 2px 0 4px;
}

.remediation-actions {
  margin: 4px 0;
  padding-left: 1.2em;
  font-size: 0.82rem;
  color: var(--muted);
}

.remediation-actions li {
  margin-bottom: 2px;
}

@media (max-width: 820px) {
  .hero,
  .metrics,
  .session-toolbar,
  .durability-strip,
  .anchors,
  .cohort-grid,
  .readiness-columns,
  .closeout-checklist,
  .detail-grid,
  .pilot-ops-layout,
  .pilot-ops-actions,
  .pilot-ops-session-list,
  .demo-run-layout,
  .demo-run-steps,
  .first-demo-boundary-strip,
  .first-demo-step-list,
  dl {
    grid-template-columns: 1fr;
  }

  .panel-head,
  .session-title,
  .incident-banner,
  .queue-item,
  .ledger-entry {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Pilot UI pass: keep operational state prominent while endpoint details stay tucked away. */
button {
  min-height: 2.6rem;
}

.hero,
.panel,
.metrics article,
.session-card {
  background: rgba(18, 24, 30, 0.78);
}

.session-card h3,
.incident-banner h2,
.panel h2 {
  line-height: 1.15;
}

.session-card dl {
  padding-top: 4px;
}

/* Product alignment pass: keep the admin's first screen operational, with proof tools one deliberate click away. */
.hero {
  padding: 24px;
  gap: 18px;
}

.hero h1 {
  font-size: 2rem;
}

.hero-copy {
  font-size: 0.98rem;
}

.metrics {
  gap: 10px;
  margin-top: 12px;
}

.metrics article {
  min-height: 5.2rem;
  padding: 14px;
}

.pilot-ops-board,
.panel {
  margin-top: 14px;
}

.pilot-ops-layout {
  gap: 12px;
}

.pilot-ops-actions {
  gap: 10px;
}

.pilot-ops-action {
  min-height: 7rem;
}

.sessions {
  display: grid;
  gap: 12px;
}

.admin-proof-drawer {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: var(--athenyx-radius);
  padding: 14px;
  background: rgba(18, 24, 30, 0.72);
}

.admin-proof-drawer summary {
  display: grid;
  gap: 3px;
  cursor: pointer;
  list-style-position: inside;
}

.admin-proof-drawer summary span {
  font-weight: 800;
}

.admin-proof-drawer summary small {
  color: var(--muted);
}

.source-label {
  font-size: 0.75em;
  font-weight: 400;
  color: var(--muted);
  margin-left: 6px;
}

.admin-proof-stack {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.admin-proof-stack > .panel {
  margin-top: 0;
}

.admin-proof-placeholder {
  margin: 12px 0 0;
  color: var(--muted);
}

@media (max-width: 820px) {
  main {
    width: min(100vw - 20px, 1180px);
    padding: 18px 0 36px;
  }

  .hero {
    padding: 18px;
  }

  .hero h1 {
    font-size: 1.65rem;
  }

  .metrics article,
  .pilot-ops-action,
  .session-card {
    min-height: auto;
  }

  .session-bulk-bar,
  .risk-action-bar,
  .action-row {
    align-items: stretch;
  }

  .session-bulk-bar button,
  .risk-action-bar button,
  .action-row button {
    flex: 1 1 10rem;
  }

  .admin-proof-drawer {
    padding: 12px;
  }
}

/* ── OR Node Drawer ───────────────────────────────────────────────────────── */

.or-node-drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(5, 7, 9, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s;
  z-index: 49;
}

.or-node-drawer-scrim.open {
  opacity: 1;
  pointer-events: auto;
}

.or-node-drawer {
  position: fixed;
  right: 0;
  top: 56px;
  bottom: 0;
  width: 540px;
  background: var(--panel);
  box-shadow: -30px 0 80px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 50;
  border-left: 1px solid var(--line);
}

.or-node-drawer.open {
  transform: translateX(0);
}

.or-node-drawer-head {
  padding: 22px 28px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.or-node-drawer-head h2 {
  flex: 1;
  font-size: 1rem;
}

.or-node-drawer-head .eyebrow {
  margin: 0 0 4px;
}

.or-node-drawer-close {
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
}

.or-node-drawer-close:hover {
  color: var(--ink);
  border-color: var(--ink);
}

.drawer-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  padding: 0 16px;
  gap: 4px;
  flex-shrink: 0;
}

.drawer-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  font-family: var(--athenyx-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--muted);
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.drawer-tab .ms { font-size: 14px; }

.drawer-tab:hover { color: var(--ink); }

.drawer-tab.active {
  color: var(--ink);
  border-color: var(--ai);
}

.or-node-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 28px;
}

.or-node-drawer-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.or-node-drawer-kpi dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

.recording-card { padding: 12px 0; border-bottom: 1px solid var(--line); }
.recording-card:last-child { border-bottom: none; }
.recording-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 0.8rem; }
.recording-video { width: 100%; max-height: 320px; border-radius: 6px; background: #000; display: block; }

/* ── Recordings page ─────────────────────────────────────────────────────── */

.rec-search-input {
  background: var(--athenyx-canvas);
  border: 1px solid var(--line);
  border-radius: var(--athenyx-radius);
  color: var(--ink);
  font-family: var(--athenyx-font-body);
  font-size: 13px;
  height: 34px;
  min-width: 240px;
  padding: 0 12px;
}

.rec-status {
  color: var(--muted);
  font-family: var(--athenyx-font-mono);
  font-size: 12px;
  margin: 0 0 14px;
}

/* Degraded capability, not an error — amber per the colour semantics. */
.rec-status-partial { color: var(--athenyx-warning); }

.rec-layout {
  align-items: start;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr);
  padding-bottom: 24px;
}

/* Two-column only: the list gets its own scroll so it can sit beside the
   sticky player. Stacked (narrow) it must scroll with the page instead —
   a nested scroll region under the player is a trap on touch. */
@media (min-width: 1101px) {
  .rec-list { max-height: calc(100vh - 220px); overflow-y: auto; }
}

@media (max-width: 1100px) {
  .rec-layout { grid-template-columns: 1fr; }
  .rec-player { position: static; }
}

.rec-player {
  background: var(--panel);
  border-radius: var(--athenyx-radius);
  overflow: hidden;
  position: sticky;
  top: 16px;
}

.rec-player-video {
  aspect-ratio: 16 / 9;
  background: #000;
  display: block;
  width: 100%;
}

/* Playback watchdog verdict — a stalled stream gets words and a number
   instead of the <video> element's silent native spinner. */
.rec-player-net {
  background: rgba(255, 182, 72, 0.07);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
  padding: 10px 18px;
}
.rec-player-net code { color: var(--athenyx-warning); }
.rec-player-net.is-bad { color: var(--athenyx-warning); }

.rec-player-empty,
.rec-player-pending {
  align-items: center;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #16202a, #0a1218);
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
  padding: 32px;
  text-align: center;
}

.rec-player-empty .ms,
.rec-player-pending .ms { font-size: 40px; color: var(--athenyx-warning); }
.rec-player-empty .ms { color: var(--muted); }
.rec-player-empty p,
.rec-player-pending p { margin: 0; max-width: 46ch; font-size: 13px; line-height: 1.5; }

.rec-player-meta {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 16px 18px;
}

.rec-player-titles h2 {
  font-family: var(--athenyx-font-display);
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 4px;
}

.rec-player-titles p { color: var(--muted); font-size: 12px; margin: 0 0 6px; word-break: break-all; }
.rec-player-titles code { color: var(--muted); font-family: var(--athenyx-font-mono); font-size: 11px; }
/* Download controls are anchors (the browser handles the transfer), so the
   button classes need the link underline removed explicitly — styles.css has
   no global `a { text-decoration: none }`. */
.rec-player-actions { flex-shrink: 0; }
.rec-player-actions a { text-decoration: none; }

/* `.mini-button` only carries sizing — the base look comes from the `button`
   element rule, which an <a> does not inherit. The row download is an anchor
   (the browser owns the transfer), so it needs the surface drawn explicitly. */
.rec-row-tags a.mini-button {
  align-items: center;
  background: rgba(255, 255, 255, 0.05) /* token: --athenyx-text @ 0.05 */;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  display: inline-flex;
  justify-content: center;
  min-height: 0;
  padding: 5px;
  text-decoration: none;
}

.rec-row-tags a.mini-button:hover { color: var(--ai); border-color: var(--ai); }
.rec-row-tags a.mini-button .ms { font-size: 16px; }

.rec-list { display: flex; flex-direction: column; gap: 14px; }
.rec-group { background: var(--panel); border-radius: var(--athenyx-radius); overflow: hidden; }

.rec-group-h {
  align-items: center;
  background: var(--athenyx-canvas);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 14px;
}

.rec-group-nm { font-family: var(--athenyx-font-display); font-size: 13px; font-weight: 700; }
.rec-group-sub { color: var(--muted); font-size: 11px; margin-top: 2px; }

.rec-row {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 12px;
  padding: 10px 14px;
  transition: background 120ms ease;
}

.rec-row:hover { background: rgba(98, 240, 190, 0.06); }
.rec-row:focus-visible { outline: 2px solid var(--ai); outline-offset: -2px; }
.rec-row.is-active { background: rgba(98, 240, 190, 0.12); }
.rec-row.is-pending { cursor: default; }
.rec-row-ico .ms { color: var(--ai); font-size: 22px; }
.rec-row.is-pending .rec-row-ico .ms { color: var(--athenyx-warning); }
.rec-row-body { flex: 1; min-width: 0; }
.rec-row-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-row-sub { align-items: center; color: var(--muted); display: flex; font-size: 11px; gap: 8px; margin-top: 2px; }
.rec-row-sub code { font-family: var(--athenyx-font-mono); }
.rec-row-tags { align-items: center; display: flex; flex-shrink: 0; gap: 6px; }

.rec-empty {
  align-items: center;
  background: var(--panel);
  border-radius: var(--athenyx-radius);
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 64px 32px;
  text-align: center;
}

.rec-empty .ms { color: var(--muted); font-size: 44px; }
.rec-empty h2 { color: var(--ink); font-family: var(--athenyx-font-display); font-size: 16px; margin: 0; }
.rec-empty p { margin: 0; max-width: 52ch; font-size: 13px; line-height: 1.6; }

.or-node-drawer-kpi dd {
  font-size: 1.125rem;
  font-weight: 700;
  font-family: var(--athenyx-font-display);
  margin: 0;
}

/* ── Downloads page ──────────────────────────────────────────────────────── */

.downloads-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  padding: 0 0 24px;
}

@media (max-width: 820px) {
  .downloads-grid { grid-template-columns: 1fr; }
}

.download-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--athenyx-radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.download-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.download-platform-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #1f3540, #0a1820);
  border: 1px solid var(--ai);
  color: var(--ai);
  display: grid;
  place-items: center;
  font-family: var(--athenyx-font-display);
  font-weight: 700;
  font-size: 20px;
  flex-shrink: 0;
}

.download-platform-label {
  margin: 0;
  font-family: var(--athenyx-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}

.download-filename {
  font-family: var(--athenyx-font-body);
  font-size: 12px;
  color: var(--muted);
}

.download-description {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.download-requirements {
  flex: 1;
}

.download-req-label {
  display: block;
  font-family: var(--athenyx-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.download-requirements ul {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
}

.download-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: var(--athenyx-radius);
  background: var(--ai);
  color: #0a1820;
  font-family: var(--athenyx-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border: none;
  transition: opacity 0.15s;
}

.download-button:hover {
  opacity: 0.85;
}

.download-instructions {
  margin-bottom: 32px;
}

.download-steps {
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink);
}

.download-steps code {
  font-size: 13px;
  background: rgba(255, 255, 255, 0.06) /* token: --athenyx-text @ 0.06 */;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--line);
}

/* ── Icon utilities ───────────────────────────────────────────────────────── */

.status-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  vertical-align: middle;
  flex-shrink: 0;
}

dd .status-icon {
  margin-right: 0.25rem;
}

/* ── Breadcrumb ───────────────────────────────────────────────────────────── */

.adm-crumb-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
  font-family: var(--athenyx-font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.adm-crumb-link {
  color: var(--muted);
  text-decoration: none;
  transition: color .15s;
}
.adm-crumb-link:hover { color: var(--ink); }

.adm-crumb-sep {
  color: var(--muted);
  opacity: .5;
  user-select: none;
}

.adm-crumb-cur {
  color: var(--ai);
}

/* ── Stub page notice ─────────────────────────────────────────────────────── */

.admin-stub-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 240px;
  color: var(--muted);
  text-align: center;
}

.admin-stub-notice .ms {
  font-size: 40px;
  color: var(--athenyx-border);
}

.admin-stub-notice p {
  margin: 0;
  font-size: 13px;
}

/* ── Sites Dashboard (ADMIN-3) ────────────────────────────────────────────── */

.sd-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
}

.sd-kicker {
  display: block;
  font-family: var(--athenyx-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .28em;
  color: var(--muted);
  text-transform: uppercase;
}

.sd-h1 {
  margin: 6px 0 0;
  font-family: var(--athenyx-font-display);
  font-weight: 600;
  font-size: 32px;
  color: var(--ink);
  letter-spacing: -.02em;
}

.sd-tools {
  display: flex;
  gap: 10px;
}

/* KPI strip */
.sd-kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}

.sd-kpi {
  padding: 18px 20px;
  background: var(--panel);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sd-kpi-k {
  font-family: var(--athenyx-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--muted);
  text-transform: uppercase;
}

.sd-kpi-v {
  font-family: var(--athenyx-font-mono);
  font-size: 30px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0;
  font-feature-settings: "tnum";
  line-height: 1;
}

.sd-kpi-ok   { color: var(--athenyx-ai); }
.sd-kpi-warn { color: var(--athenyx-warning); }
.sd-kpi-crit { color: var(--athenyx-critical); }

.sd-kpi-sub {
  font-size: 18px;
  color: var(--muted);
}

.sd-kpi-delta {
  font-family: var(--athenyx-font-display);
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
}

.sd-delta-up { color: var(--athenyx-ai); }
.sd-delta-dn { color: var(--athenyx-critical); }

/* Map + activity row */
.sd-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.sd-panel {
  background: var(--panel);
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}

.sd-panel-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.sd-panel-lbl {
  display: block;
  font-family: var(--athenyx-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--muted);
  text-transform: uppercase;
}

.sd-panel-title {
  margin: 4px 0 0;
  font-family: var(--athenyx-font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -.01em;
}

.sd-map {
  height: 280px;
  background: var(--paper);
  border-radius: 10px;
  overflow: hidden;
}

.sd-activity {
  height: 280px;
}

/* Sites table */
.sd-table-shell {
  background: var(--panel);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}

.sd-tt {
  width: 100%;
  border-collapse: collapse;
}

.sd-tt th {
  text-align: left;
  padding: 14px 18px;
  font-family: var(--athenyx-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--muted);
  text-transform: uppercase;
  border-bottom: 1px solid var(--athenyx-border-soft);
  background: var(--paper);
}

.sd-tt td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--athenyx-border-soft);
  font-family: var(--athenyx-font-body);
  font-size: 13px;
  color: var(--ink);
  vertical-align: middle;
}

.sd-tt-row:last-child td { border-bottom: 0; }
.sd-tt-row:hover td { background: rgba(255, 255, 255, 0.02) /* token: --athenyx-text @ 0.02 */; }

.sd-site-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sd-site-ic {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--athenyx-ai);
  flex-shrink: 0;
}

.sd-site-nm {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
}

.sd-site-sub {
  font-family: var(--athenyx-font-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 2px;
}

/* Status pill */
.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--athenyx-radius-pill);
  font-family: var(--athenyx-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.stat-pill-ok {
  background: var(--athenyx-ai-soft);
  border: 1px solid rgba(98, 240, 190, 0.3); /* token: --athenyx-ai @ 0.3 */
  color: var(--athenyx-ai);
}

.stat-pill-w {
  background: rgba(255, 182, 72, 0.1); /* token: --athenyx-warning @ 0.1 */
  border: 1px solid rgba(255, 182, 72, 0.3); /* token: --athenyx-warning @ 0.3 */
  color: var(--athenyx-warning);
}

.stat-pill-c {
  background: rgba(255, 77, 79, 0.1); /* token: --athenyx-critical @ 0.1 */
  border: 1px solid rgba(255, 77, 79, 0.3); /* token: --athenyx-critical @ 0.3 */
  color: var(--athenyx-critical);
}

.stat-pill-d {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.stat-pill-ok .stat-pill-d { background: var(--athenyx-ai); }
.stat-pill-w  .stat-pill-d { background: var(--athenyx-warning); }
.stat-pill-c  .stat-pill-d { background: var(--athenyx-critical); }

/* Numeric value + bar */
.sd-num {
  font-family: var(--athenyx-font-mono);
  font-feature-settings: "tnum";
  font-size: 13px;
  font-weight: 500;
  display: block;
}

.sd-bar {
  width: 100%;
  height: 4px;
  background: var(--paper);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 5px;
}

.sd-bar > i {
  display: block;
  height: 100%;
  background: var(--athenyx-ai);
  border-radius: 2px;
}

.sd-bar-w > i { background: var(--athenyx-warning); }
.sd-bar-c > i { background: var(--athenyx-critical); }

/* ── Site Card (ADMIN-4) ──────────────────────────────────────────────────── */

.sc-hero {
  background: linear-gradient(135deg, var(--athenyx-surface) 0%, #1a2330 100%);
  border: 1px solid var(--athenyx-border);
  border-radius: 18px;
  padding: 32px 36px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  margin-bottom: 18px;
}

.sc-hero-l {
  display: flex;
  gap: 22px;
  align-items: flex-start;
}

.sc-hero-ic {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background: var(--athenyx-canvas);
  border: 1px solid var(--athenyx-border);
  display: grid;
  place-items: center;
  color: var(--athenyx-ai);
  flex-shrink: 0;
}

.sc-hero-ic .ms { font-size: 36px; }

.sc-hero-h1 {
  margin: 0;
  font-family: var(--athenyx-font-display);
  font-weight: 600;
  font-size: 28px;
  color: var(--athenyx-text);
  letter-spacing: -0.02em;
}

.sc-hero-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.sc-meta-it {
  font-family: var(--athenyx-font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--athenyx-muted);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sc-meta-it .ms { font-size: 14px; color: var(--athenyx-muted); }

.sc-hero-pills {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.sc-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--athenyx-sub-surface);
  border: 1px solid var(--athenyx-border);
  font-family: var(--athenyx-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--athenyx-muted);
  text-transform: uppercase;
}

.sc-pill-ok {
  color: var(--athenyx-ai);
  border-color: rgba(98, 240, 190, 0.3); /* token: --athenyx-ai @ 0.3 */
  background: rgba(98, 240, 190, 0.08); /* token: --athenyx-ai @ 0.08 */
}

.sc-pill-w {
  color: var(--athenyx-warning);
  border-color: rgba(255, 182, 72, 0.3); /* token: --athenyx-warning @ 0.3 */
  background: rgba(255, 182, 72, 0.08); /* token: --athenyx-warning @ 0.08 */
}

.sc-pill-c {
  color: var(--athenyx-critical);
  border-color: rgba(255, 77, 79, 0.3); /* token: --athenyx-critical @ 0.3 */
  background: rgba(255, 77, 79, 0.08); /* token: --athenyx-critical @ 0.08 */
}

.sc-pill-slo {
  color: var(--athenyx-ai);
  border-color: rgba(98, 240, 190, 0.3); /* token: --athenyx-ai @ 0.3 */
}

.sc-pill-d {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.sc-hero-r {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.sc-hero-age {
  font-family: var(--athenyx-font-display);
  font-size: 10px;
  color: var(--athenyx-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.sc-hero-btn {
  min-width: 140px;
  height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  font-family: var(--athenyx-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

/* KPI tiles */

.sc-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.sc-kpi {
  padding: 20px 22px;
  background: var(--athenyx-surface);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}

.sc-kpi-k {
  font-family: var(--athenyx-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--athenyx-muted);
  text-transform: uppercase;
}

.sc-kpi-v {
  font-family: var(--athenyx-font-mono);
  font-size: 36px;
  font-weight: 600;
  color: var(--athenyx-text);
  margin-top: 6px;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum";
  display: block;
}

.sc-kpi-ok { color: var(--athenyx-ai); }
.sc-kpi-warn { color: var(--athenyx-warning); }

.sc-kpi-sub {
  font-size: 18px;
  color: var(--athenyx-muted);
}

.sc-kpi-delta {
  font-family: var(--athenyx-font-display);
  font-size: 11px;
  font-weight: 600;
  color: var(--athenyx-muted);
  margin-top: 4px;
}

.sc-delta-up { color: var(--athenyx-ai); }

/* 2-column grid */

.sc-grid2 {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}

.sc-panel {
  background: var(--athenyx-surface);
  border: 1px solid var(--athenyx-border);
  border-radius: 14px;
  padding: 22px 24px;
}

.sc-panel-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.sc-lbl {
  font-family: var(--athenyx-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--athenyx-muted);
  text-transform: uppercase;
  display: block;
}

.sc-panel-title {
  margin: 4px 0 0;
  font-family: var(--athenyx-font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--athenyx-text);
  letter-spacing: -0.01em;
}

/* OR nodes grid */

.sc-nodes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.sc-node {
  padding: 14px;
  background: var(--athenyx-sub-surface);
  border: 1px solid var(--athenyx-border);
  border-radius: 10px;
}

.sc-node-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sc-node-id {
  font-family: var(--athenyx-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--athenyx-text);
  text-transform: uppercase;
}

.sc-node-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--athenyx-muted);
}

.sc-node-ok .sc-node-dot {
  background: var(--athenyx-ai);
  box-shadow: 0 0 6px var(--athenyx-ai);
}

.sc-node-live .sc-node-dot {
  background: var(--athenyx-ai);
  box-shadow: 0 0 6px var(--athenyx-ai);
  animation: pulse 1.4s ease-in-out infinite;
}

.sc-node-w .sc-node-dot {
  background: var(--athenyx-warning);
}

.sc-node-nm {
  font-family: var(--athenyx-font-body);
  font-size: 12px;
  color: var(--athenyx-text);
  margin-top: 6px;
  font-weight: 500;
}

.sc-node-meta {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.sc-node-meta span {
  font-family: var(--athenyx-font-mono);
  font-size: 10px;
  color: var(--athenyx-muted);
}

.sc-node-live {
  border-color: rgba(98, 240, 190, 0.35); /* token: --athenyx-ai @ 0.35 */
  background: linear-gradient(180deg, rgba(98, 240, 190, 0.05), transparent 70%), /* token: --athenyx-ai @ 0.05 */
    var(--athenyx-sub-surface);
}

/* Latency chart */

.sc-chart {
  height: 240px;
  position: relative;
}

/* Compliance / config */

.sc-cfg-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sc-cfg {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--athenyx-sub-surface);
  border: 1px solid var(--athenyx-border);
  border-radius: 8px;
}

.sc-cfg .ms { color: var(--athenyx-ai); font-size: 18px; flex-shrink: 0; }
.sc-cfg-warn .ms { color: var(--athenyx-warning); }

.sc-cfg-meta { flex: 1; }

.sc-cfg-nm {
  font-family: var(--athenyx-font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--athenyx-text);
}

.sc-cfg-sub {
  font-family: var(--athenyx-font-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--athenyx-muted);
  text-transform: uppercase;
  margin-top: 2px;
}

.sc-cfg-v {
  font-family: var(--athenyx-font-mono);
  font-size: 11px;
  color: var(--athenyx-muted);
}

/* Team roster */

.sc-ppl {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sc-person {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
}

.sc-person-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--athenyx-sub-surface);
  border: 1.5px solid var(--athenyx-border);
  color: var(--athenyx-text);
  display: grid;
  place-items: center;
  font-family: var(--athenyx-font-display);
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
}

.sc-person-advisor .sc-person-av {
  border-color: var(--athenyx-advisor);
  color: var(--athenyx-advisor);
}

.sc-person-meta { flex: 1; }

.sc-person-nm {
  font-family: var(--athenyx-font-body);
  font-size: 13px;
  color: var(--athenyx-text);
  font-weight: 600;
}

.sc-person-role {
  font-family: var(--athenyx-font-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--athenyx-muted);
  text-transform: uppercase;
  margin-top: 2px;
}

.sc-person-ico {
  color: var(--athenyx-muted);
  font-size: 18px;
}

.sc-person-online .sc-person-ico { color: var(--athenyx-ai); }

/* Activity feed */

.sc-activity-panel {
  margin-bottom: 40px;
}

.sc-act {
  display: flex;
  flex-direction: column;
}

.sc-act-row {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--athenyx-border-soft, rgba(43, 54, 64, 0.5));
}

.sc-act-row:last-child { border-bottom: 0; }

.sc-act-ts {
  font-family: var(--athenyx-font-mono);
  font-size: 10px;
  color: var(--athenyx-muted);
  width: 70px;
  flex-shrink: 0;
  padding-top: 2px;
}

.sc-act-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--athenyx-ai);
  margin-top: 6px;
  flex-shrink: 0;
}

.sc-act-w .sc-act-dot { background: var(--athenyx-warning); }
.sc-act-h .sc-act-dot { background: var(--athenyx-advisor); }

.sc-act-who {
  font-family: var(--athenyx-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--athenyx-ai);
  text-transform: uppercase;
  display: block;
}

.sc-act-w .sc-act-who { color: var(--athenyx-warning); }
.sc-act-h .sc-act-who { color: var(--athenyx-advisor); }

.sc-act-txt {
  font-family: var(--athenyx-font-body);
  font-size: 13px;
  color: var(--athenyx-text);
  margin-top: 2px;
  line-height: 1.4;
}

/* ── Site Detail Tabbed (ADMIN-5) ─────────────────────────────────────────── */

.sdt-siteh {
  border-bottom: 1px solid var(--athenyx-border-soft);
  padding: 20px 40px 0;
  flex: none;
}

.sdt-siteh-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sdt-siteh-l {
  display: flex;
  gap: 16px;
  align-items: center;
}

.sdt-siteh-ic {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--athenyx-surface);
  border: 1px solid var(--athenyx-border);
  color: var(--athenyx-ai);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.sdt-siteh-ic .ms { font-size: 26px; }

.sdt-siteh-h1 {
  margin: 0;
  font-family: var(--athenyx-font-display);
  font-weight: 600;
  font-size: 26px;
  color: var(--athenyx-text);
  letter-spacing: -0.02em;
}

.sdt-siteh-meta {
  font-family: var(--athenyx-font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--athenyx-muted);
  text-transform: uppercase;
  margin-top: 4px;
}

.sdt-siteh-r {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Tab bar */

.sdt-tabs {
  display: flex;
  gap: 4px;
  padding: 0;
  margin-top: 18px;
}

.sdt-tab {
  padding: 12px 14px;
  font-family: var(--athenyx-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--athenyx-muted);
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}

.sdt-tab:hover { color: var(--athenyx-text); }

.sdt-tab-active {
  color: var(--athenyx-text);
  border-color: var(--athenyx-ai);
}

.sdt-tab-ct {
  font-size: 9px;
  color: var(--athenyx-muted);
}

.sdt-tab-active .sdt-tab-ct { color: var(--athenyx-ai); }

/* 2-column body */

.sdt-body {
  flex: 1;
  overflow: auto;
  padding: 24px 40px 60px;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-content: start;
}

/* Section nav */

.sdt-secnav {
  background: var(--athenyx-surface);
  border: 1px solid var(--athenyx-border-soft);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-self: start;
  position: sticky;
  top: 0;
}

.sdt-secnav-h {
  font-family: var(--athenyx-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--athenyx-muted);
  text-transform: uppercase;
}

.sdt-secnav-grp {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sdt-secnav-a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 11px;
  border-radius: 8px;
  color: var(--athenyx-text);
  font-family: var(--athenyx-font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}

.sdt-secnav-a:hover { background: var(--athenyx-sub-surface); }

.sdt-secnav-active {
  background: rgba(98, 240, 190, 0.08); /* token: --athenyx-ai @ 0.08 */
  color: var(--athenyx-ai);
}

.sdt-secnav-ct {
  font-family: var(--athenyx-font-display);
  font-size: 10px;
  color: var(--athenyx-muted);
}

.sdt-secnav-active .sdt-secnav-ct { color: var(--athenyx-ai); }

/* Content area */

.sdt-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sdt-panel {
  background: var(--athenyx-surface);
  border: 1px solid var(--athenyx-border);
  border-radius: 14px;
  padding: 22px 24px;
}

.sdt-panel-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.sdt-lbl {
  font-family: var(--athenyx-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--athenyx-muted);
  text-transform: uppercase;
  display: block;
}

.sdt-panel-title {
  margin: 4px 0 14px;
  font-family: var(--athenyx-font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--athenyx-text);
  letter-spacing: -0.01em;
}

/* KPI tiles (OR Nodes tab) */

.sdt-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

.sdt-kpi {
  padding: 16px 18px;
  background: var(--athenyx-sub-surface);
  border: 1px solid var(--athenyx-border);
  border-radius: 10px;
}

.sdt-kpi-k {
  font-family: var(--athenyx-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--athenyx-muted);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sdt-kpi-d {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--athenyx-muted);
  flex-shrink: 0;
}

.sdt-kpi-ok .sdt-kpi-d { background: var(--athenyx-ai); box-shadow: 0 0 4px var(--athenyx-ai); }
.sdt-kpi-live .sdt-kpi-d {
  background: var(--athenyx-ai);
  box-shadow: 0 0 6px var(--athenyx-ai);
  animation: pulse 1.4s ease-in-out infinite;
}
.sdt-kpi-warn .sdt-kpi-d { background: var(--athenyx-warning); }

.sdt-kpi-v {
  font-family: var(--athenyx-font-mono);
  font-size: 30px;
  font-weight: 600;
  color: var(--athenyx-text);
  margin-top: 6px;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum";
  display: block;
}

.sdt-kpi-ok .sdt-kpi-v,
.sdt-kpi-live .sdt-kpi-v { color: var(--athenyx-ai); }
.sdt-kpi-warn .sdt-kpi-v { color: var(--athenyx-warning); }

.sdt-kpi-of {
  font-size: 14px;
  color: var(--athenyx-muted);
  margin-left: 2px;
}

.sdt-kpi-delta {
  font-family: var(--athenyx-font-display);
  font-size: 10px;
  font-weight: 600;
  color: var(--athenyx-muted);
  margin-top: 3px;
}

.sdt-kpi-ok .sdt-kpi-delta { color: var(--athenyx-ai); }

/* Node mini-cards grid */

.sdt-nodes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.sdt-node-mini {
  padding: 12px 14px;
  background: var(--athenyx-sub-surface);
  border: 1px solid var(--athenyx-border);
  border-radius: 10px;
}

.sdt-nm-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sdt-nm-id {
  font-family: var(--athenyx-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--athenyx-text);
  text-transform: uppercase;
}

.sdt-nm-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--athenyx-muted);
}

.sdt-nm-ok .sdt-nm-dot { background: var(--athenyx-ai); box-shadow: 0 0 6px var(--athenyx-ai); }
.sdt-nm-live .sdt-nm-dot {
  background: var(--athenyx-ai);
  box-shadow: 0 0 6px var(--athenyx-ai);
  animation: pulse 1.4s ease-in-out infinite;
}
.sdt-nm-w .sdt-nm-dot { background: var(--athenyx-warning); }

.sdt-nm-live {
  border-color: rgba(98, 240, 190, 0.35); /* token: --athenyx-ai @ 0.35 */
  background: linear-gradient(180deg, rgba(98, 240, 190, 0.05), transparent 70%), /* token: --athenyx-ai @ 0.05 */
    var(--athenyx-sub-surface);
}

.sdt-nm-w {
  border-color: rgba(255, 182, 72, 0.3); /* token: --athenyx-warning @ 0.3 */
  background: linear-gradient(180deg, rgba(255, 182, 72, 0.05), transparent 70%), /* token: --athenyx-warning @ 0.05 */
    var(--athenyx-sub-surface);
}

.sdt-nm-nm {
  font-family: var(--athenyx-font-body);
  font-size: 12px;
  color: var(--athenyx-text);
  margin-top: 5px;
  font-weight: 500;
}

.sdt-nm-meta {
  display: flex;
  gap: 10px;
  margin-top: 5px;
}

.sdt-nm-meta span {
  font-family: var(--athenyx-font-mono);
  font-size: 10px;
  color: var(--athenyx-muted);
}

/* Node list table */

.sdt-ntbl-wrap {
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--athenyx-border);
  background: var(--athenyx-sub-surface);
}

.sdt-ntbl {
  width: 100%;
  border-collapse: collapse;
}

.sdt-ntbl thead th {
  text-align: left;
  padding: 11px 14px;
  background: var(--athenyx-canvas);
  font-family: var(--athenyx-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--athenyx-muted);
  text-transform: uppercase;
  border-bottom: 1px solid var(--athenyx-border);
}

.sdt-ntbl tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--athenyx-border-soft);
  color: var(--athenyx-text);
  vertical-align: middle;
  font-family: var(--athenyx-font-mono);
  font-size: 12px;
  font-feature-settings: "tnum";
}

.sdt-ntbl tbody tr:last-child td { border-bottom: 0; }
.sdt-ntbl tbody tr:hover td { background: rgba(98, 240, 190, 0.04); /* token: --athenyx-ai @ 0.04 */ }

.sdt-ntbl-id { font-family: var(--athenyx-font-display); font-weight: 700; letter-spacing: 0.12em; width: 88px; }
.sdt-ntbl-room { font-family: var(--athenyx-font-body); font-weight: 500; }
.sdt-ntbl-session { font-family: var(--athenyx-font-body); }
.sdt-ntbl-none { color: var(--athenyx-muted); font-style: italic; font-family: var(--athenyx-font-body); }
.sdt-ntbl-lat { text-align: right; width: 90px; }
.sdt-ntbl-build { color: var(--athenyx-muted); width: 100px; }
.sdt-ntbl-actions { text-align: right; width: 130px; }

.sdt-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--athenyx-canvas);
  border: 1px solid var(--athenyx-border);
  font-family: var(--athenyx-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--athenyx-muted);
}

.sdt-spill-d {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--athenyx-muted);
  flex-shrink: 0;
}

.sdt-status-pill.live { color: var(--athenyx-ai); border-color: rgba(98,240,190,.3); background: rgba(98,240,190,.08); } /* token: --athenyx-ai @ 0.3, 0.08 */
.sdt-status-pill.live .sdt-spill-d { background: var(--athenyx-ai); box-shadow: 0 0 6px var(--athenyx-ai); animation: pulse 1.4s ease-in-out infinite; }
.sdt-status-pill.ok { color: var(--athenyx-ai); border-color: rgba(98,240,190,.3); background: rgba(98,240,190,.08); } /* token: --athenyx-ai @ 0.3, 0.08 */
.sdt-status-pill.ok .sdt-spill-d { background: var(--athenyx-ai); }
.sdt-status-pill.warn { color: var(--athenyx-warning); border-color: rgba(255,182,72,.3); background: rgba(255,182,72,.08); } /* token: --athenyx-warning @ 0.3, 0.08 */
.sdt-status-pill.warn .sdt-spill-d { background: var(--athenyx-warning); }

.sdt-row-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--athenyx-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--athenyx-ai);
  text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid rgba(98, 240, 190, 0.25); /* token: --athenyx-ai @ 0.25 */
  border-radius: 6px;
  background: rgba(98, 240, 190, 0.08); /* token: --athenyx-ai @ 0.08 */
  cursor: pointer;
}

.sdt-row-action .ms { font-size: 12px; }

.lat-good { color: var(--athenyx-ai); }
.lat-warn { color: var(--athenyx-warning); }
.lat-bad  { color: var(--athenyx-critical); }
.lat-na   { color: var(--athenyx-muted); }

/* Settings tab — form */

.sdt-frm {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 22px;
}

.sdt-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sdt-field-col2 { grid-column: span 2; }

.sdt-flbl {
  font-family: var(--athenyx-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--athenyx-muted);
  text-transform: uppercase;
}

.sdt-input {
  padding: 10px 12px;
  background: var(--athenyx-canvas);
  border: 1px solid var(--athenyx-border);
  border-radius: 8px;
  color: var(--athenyx-text);
  font: 500 13px var(--athenyx-font-body);
  resize: vertical;
}

.sdt-input:disabled { opacity: 0.5; }

/* Operational toggles */

.sdt-togs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sdt-tog {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border: 1px solid var(--athenyx-border);
  background: var(--athenyx-sub-surface);
  border-radius: 10px;
}

.sdt-tog-meta { display: flex; flex-direction: column; gap: 2px; }

.sdt-tog-nm {
  font-family: var(--athenyx-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--athenyx-text);
}

.sdt-tog-desc {
  font-family: var(--athenyx-font-body);
  font-size: 12px;
  color: var(--athenyx-muted);
}

.sdt-switch {
  width: 36px;
  height: 22px;
  border-radius: 12px;
  background: var(--athenyx-canvas);
  border: 1px solid var(--athenyx-border);
  position: relative;
  flex-shrink: 0;
}

.sdt-switch::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--athenyx-muted);
  transition: left 0.2s;
}

.sdt-switch-on {
  background: var(--athenyx-ai);
  border-color: var(--athenyx-ai);
}

.sdt-switch-on::after {
  left: 16px;
  background: #072018;
}

/* Trust badges */

.sdt-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.sdt-badge {
  padding: 14px 16px;
  border: 1px solid var(--athenyx-border);
  background: var(--athenyx-sub-surface);
  border-radius: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.sdt-badge .ms {
  color: var(--athenyx-ai);
  font-size: 22px;
  flex-shrink: 0;
}

.sdt-badge-nm {
  font-family: var(--athenyx-font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--athenyx-text);
}

.sdt-badge-sub {
  font-family: var(--athenyx-font-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--athenyx-muted);
  text-transform: uppercase;
  margin-top: 2px;
}


/* ── OR Node Drawer (ADMIN-6) ─────────────────────────────────────────────── */

.nd-scrim {
  position: fixed;
  inset: 56px 540px 0 0;
  background: rgba(5, 7, 9, 0.55);
  z-index: 50;
  cursor: pointer;
}

.nd-drawer {
  position: fixed;
  right: 0;
  top: 56px;
  bottom: 0;
  width: 540px;
  background: var(--athenyx-surface);
  border-left: 1px solid var(--athenyx-border);
  display: flex;
  flex-direction: column;
  box-shadow: -30px 0 80px rgba(0, 0, 0, 0.5);
  z-index: 51;
}

/* Drawer header */

.nd-dh {
  padding: 22px 28px 16px;
  border-bottom: 1px solid var(--athenyx-border-soft);
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.nd-dh-ic {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--athenyx-canvas);
  border: 1px solid var(--athenyx-border);
  color: var(--athenyx-ai);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.nd-dh-ic .ms { font-size: 22px; }

.nd-dh-meta { flex: 1; }

.nd-kicker {
  font-family: var(--athenyx-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--athenyx-ai);
  text-transform: uppercase;
  display: block;
}

.nd-title {
  margin: 4px 0 0;
  font-family: var(--athenyx-font-display);
  font-weight: 600;
  font-size: 22px;
  color: var(--athenyx-text);
  letter-spacing: -0.01em;
}

.nd-sub {
  font-family: var(--athenyx-font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--athenyx-muted);
  text-transform: uppercase;
  margin-top: 4px;
}

.nd-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--athenyx-sub-surface);
  border: 1px solid var(--athenyx-border);
  color: var(--athenyx-text);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

/* Pills */

.nd-pills {
  padding: 14px 28px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--athenyx-border-soft);
}

.nd-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--athenyx-sub-surface);
  border: 1px solid var(--athenyx-border);
  font-family: var(--athenyx-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--athenyx-muted);
  text-transform: uppercase;
}

.nd-pill-live {
  color: var(--athenyx-ai);
  border-color: rgba(98, 240, 190, 0.3); /* token: --athenyx-ai @ 0.3 */
  background: rgba(98, 240, 190, 0.08); /* token: --athenyx-ai @ 0.08 */
}

.nd-pill-w {
  color: var(--athenyx-warning);
  border-color: rgba(255, 182, 72, 0.3); /* token: --athenyx-warning @ 0.3 */
  background: rgba(255, 182, 72, 0.08); /* token: --athenyx-warning @ 0.08 */
}

.nd-pill-d {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--athenyx-ai);
  animation: pulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

/* Live preview */

.nd-preview {
  padding: 16px 28px;
  border-bottom: 1px solid var(--athenyx-border-soft);
}

.nd-frame {
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  position: relative;
  border: 1px solid var(--athenyx-border);
}

.nd-frame-feed {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0a1820 0%, #0f2030 40%, #081520 100%);
  opacity: 0.8;
}

.nd-frame-lbl {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 3px 9px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.6);
  font-family: var(--athenyx-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--athenyx-ai);
  text-transform: uppercase;
}

/* KPIs strip */

.nd-kpis {
  padding: 16px 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  border-bottom: 1px solid var(--athenyx-border-soft);
}

.nd-kpi {
  padding: 10px 12px;
  background: var(--athenyx-sub-surface);
  border-radius: 8px;
}

.nd-kpi-k {
  font-family: var(--athenyx-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--athenyx-muted);
  text-transform: uppercase;
}

.nd-kpi-v {
  font-family: var(--athenyx-font-mono);
  font-size: 18px;
  font-weight: 600;
  color: var(--athenyx-text);
  margin-top: 2px;
  font-feature-settings: "tnum";
  display: block;
}

.nd-kpi-ok { color: var(--athenyx-ai); }

/* Scrollable body */

.nd-body {
  flex: 1;
  overflow-y: auto;
}

.nd-sec {
  padding: 18px 28px;
  border-bottom: 1px solid var(--athenyx-border-soft);
}

.nd-sec:last-child { border-bottom: 0; }

.nd-sec-h {
  margin: 0 0 12px;
  font-family: var(--athenyx-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--athenyx-muted);
  text-transform: uppercase;
}

.nd-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(43, 54, 64, 0.4) /* token: --athenyx-border @ 0.4 */;
}

.nd-row:last-child { border-bottom: 0; }

.nd-row-k {
  font-family: var(--athenyx-font-body);
  font-size: 12px;
  color: var(--athenyx-muted);
}

.nd-row-v {
  font-family: var(--athenyx-font-mono);
  font-size: 12px;
  color: var(--athenyx-text);
}

.nd-val-ok { color: var(--athenyx-ai); }
.nd-val-warn { color: var(--athenyx-warning); }
.nd-val-human { color: var(--athenyx-advisor); }

/* Timeline */

.nd-timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nd-ev {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.nd-ev-ts {
  font-family: var(--athenyx-font-mono);
  font-size: 10px;
  color: var(--athenyx-muted);
  width: 40px;
  flex-shrink: 0;
  padding-top: 1px;
}

.nd-ev-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--athenyx-ai);
  margin-top: 5px;
  flex-shrink: 0;
}

.nd-ev-h .nd-ev-dot { background: var(--athenyx-advisor); }
.nd-ev-w .nd-ev-dot { background: var(--athenyx-warning); }

.nd-ev-body { flex: 1; }

.nd-ev-who {
  font-family: var(--athenyx-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--athenyx-ai);
  text-transform: uppercase;
}

.nd-ev-h .nd-ev-who { color: var(--athenyx-advisor); }
.nd-ev-w .nd-ev-who { color: var(--athenyx-warning); }

.nd-ev-txt {
  font-family: var(--athenyx-font-body);
  font-size: 12px;
  color: var(--athenyx-text);
  margin-top: 2px;
}

/* Footer actions */

.nd-actions {
  padding: 14px 28px;
  display: flex;
  gap: 8px;
  border-top: 1px solid var(--athenyx-border);
  background: var(--athenyx-sub-surface);
  flex-shrink: 0;
}

.nd-btn-decommission {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  height: 38px;
  border-radius: 8px;
  background: rgba(255, 77, 79, 0.1); /* token: --athenyx-critical @ 0.1 */
  border: 1px solid rgba(255, 77, 79, 0.3); /* token: --athenyx-critical @ 0.3 */
  color: var(--athenyx-critical);
  font-family: var(--athenyx-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
}

/* ── ADMIN-7 — OR Nodes List (onl-*) ─────────────────────────────────────── */

.onl-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.onl-title-block { flex: 1; }

.onl-kicker {
  font-family: var(--athenyx-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--athenyx-muted);
  display: block;
  margin-bottom: 6px;
}

.onl-h1 {
  margin: 0 0 4px;
  font-family: var(--athenyx-font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--athenyx-text);
  letter-spacing: -0.02em;
}

.onl-sub {
  font-family: var(--athenyx-font-mono);
  font-size: 12px;
  color: var(--athenyx-muted);
}

.onl-tools { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

.onl-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.onl-kpi {
  padding: 14px 16px;
  background: var(--athenyx-surface);
  border: 1px solid var(--athenyx-border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.onl-kpi-k {
  font-family: var(--athenyx-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--athenyx-muted);
}

.onl-kpi-v {
  font-family: var(--athenyx-font-mono);
  font-size: 24px;
  font-weight: 600;
  color: var(--athenyx-text);
  font-feature-settings: "tnum";
}

.onl-kpi-of { font-size: 14px; color: var(--athenyx-muted); }

.onl-kpi-ok .onl-kpi-v { color: var(--athenyx-ai); }
.onl-kpi-live .onl-kpi-v { color: var(--athenyx-ai); }
.onl-kpi-warn .onl-kpi-v { color: var(--athenyx-warning); }

.onl-filters {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.onl-seg {
  display: flex;
  gap: 2px;
  background: var(--athenyx-surface);
  border: 1px solid var(--athenyx-border);
  border-radius: 8px;
  padding: 3px;
}

.onl-seg-btn {
  padding: 5px 14px;
  border-radius: 6px;
  border: none;
  background: none;
  font-family: var(--athenyx-font-display);
  font-size: 11px;
  font-weight: 600;
  color: var(--athenyx-muted);
  cursor: pointer;
}

.onl-seg-btn.active {
  background: var(--athenyx-sub-surface);
  color: var(--athenyx-text);
}

.onl-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--athenyx-surface);
  border: 1px solid var(--athenyx-border);
  border-radius: 8px;
  flex: 1;
  max-width: 320px;
}

.onl-search-input {
  border: none;
  background: none;
  color: var(--athenyx-text);
  font-family: var(--athenyx-font-body);
  font-size: 13px;
  outline: none;
  flex: 1;
}

.onl-search-input::placeholder { color: var(--athenyx-muted); }

.onl-table-wrap {
  background: var(--athenyx-surface);
  border: 1px solid var(--athenyx-border);
  border-radius: var(--athenyx-radius);
  overflow-x: auto;
  overflow-y: hidden;
}

.onl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.onl-table thead th {
  padding: 10px 14px;
  font-family: var(--athenyx-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--athenyx-muted);
  border-bottom: 1px solid var(--athenyx-border);
  text-align: left;
  white-space: nowrap;
}

.onl-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--athenyx-border-soft);
  vertical-align: middle;
}

.onl-table tbody tr:last-child td { border-bottom: 0; }
.onl-table tbody tr:hover td { background: rgba(98, 240, 190, 0.03); /* token: --athenyx-ai @ 0.03 */ }

.onl-tr-live { box-shadow: inset 3px 0 0 var(--athenyx-ai); }
.onl-tr-warn { box-shadow: inset 3px 0 0 var(--athenyx-warning); }
.onl-tr-offline { opacity: 0.5; }

.onl-node-id {
  font-family: var(--athenyx-font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
}

.onl-room {
  font-family: var(--athenyx-font-body);
  font-size: 13px;
  color: var(--athenyx-text);
}

.onl-specialty {
  font-family: var(--athenyx-font-body);
  font-size: 11px;
  color: var(--athenyx-muted);
}

.onl-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--athenyx-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--athenyx-sub-surface);
  border: 1px solid var(--athenyx-border);
  color: var(--athenyx-muted);
}

.onl-pill-live {
  color: var(--athenyx-ai);
  border-color: rgba(98, 240, 190, 0.3); /* token: --athenyx-ai @ 0.3 */
  background: rgba(98, 240, 190, 0.08); /* token: --athenyx-ai @ 0.08 */
}

.onl-pill-ok { color: var(--athenyx-muted); }

.onl-pill-w {
  color: var(--athenyx-warning);
  border-color: rgba(255, 182, 72, 0.3); /* token: --athenyx-warning @ 0.3 */
  background: rgba(255, 182, 72, 0.08); /* token: --athenyx-warning @ 0.08 */
}

.onl-pill-offline {
  color: var(--athenyx-critical);
  border-color: rgba(255, 77, 79, 0.3); /* token: --athenyx-critical @ 0.3 */
  background: rgba(255, 77, 79, 0.06); /* token: --athenyx-critical @ 0.06 */
}

/* Soak telemetry flag chips (Pass 5). Per design color semantics in
   CLAUDE.md: mint = system primary / AI / OK; cyan = human action; amber =
   degraded / caution. Each chip is small enough to cluster ~3 in the column. */
.onl-flag {
  display: inline-block;
  font-family: var(--athenyx-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid transparent;
  margin-right: 4px;
  white-space: nowrap;
}
.onl-flag-mint {
  color: var(--athenyx-ai);
  border-color: rgba(98, 240, 190, 0.3);
  background: rgba(98, 240, 190, 0.08);
}
.onl-flag-cyan {
  color: var(--athenyx-advisor);
  border-color: rgba(47, 212, 200, 0.3);
  background: rgba(47, 212, 200, 0.08);
}
.onl-flag-amber {
  color: var(--athenyx-warning);
  border-color: rgba(255, 182, 72, 0.3);
  background: rgba(255, 182, 72, 0.08);
}
/* Soak-flags cell wraps the chip cluster so narrow viewports don't push
   the chips into a single horizontal line that overflows the table. */
.onl-flags {
  max-width: 200px;
  white-space: normal;
}
.onl-kpis-soak {
  margin-top: 8px;
  border-top: 1px solid var(--athenyx-border-soft);
  padding-top: 12px;
}
.onl-kpi-mint .onl-kpi-v { color: var(--athenyx-ai); }
.onl-kpi-cyan .onl-kpi-v { color: var(--athenyx-advisor); }

.onl-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--athenyx-ai);
  animation: pulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

.onl-session-tag {
  font-family: var(--athenyx-font-mono);
  font-size: 11px;
  color: var(--athenyx-ai);
  background: rgba(98, 240, 190, 0.08); /* token: --athenyx-ai @ 0.08 */
  border: 1px solid rgba(98, 240, 190, 0.2); /* token: --athenyx-ai @ 0.2 */
  border-radius: 4px;
  padding: 2px 7px;
  display: inline-block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.onl-none { color: var(--athenyx-muted); font-style: italic; }

.onl-lat {
  font-family: var(--athenyx-font-mono);
  font-size: 12px;
  text-align: right;
  color: var(--athenyx-text);
}

.onl-build {
  font-family: var(--athenyx-font-mono);
  font-size: 11px;
  color: var(--athenyx-muted);
}

.onl-seen {
  font-family: var(--athenyx-font-body);
  font-size: 12px;
  color: var(--athenyx-muted);
  white-space: nowrap;
}

.onl-actions { text-align: right; white-space: nowrap; }

.onl-btn {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--athenyx-border);
  background: var(--athenyx-sub-surface);
  font-family: var(--athenyx-font-display);
  font-size: 10px;
  font-weight: 600;
  color: var(--athenyx-text);
  cursor: pointer;
  margin-left: 4px;
}

.onl-btn:hover { border-color: var(--athenyx-ai); color: var(--athenyx-ai); }

.onl-btn-live {
  color: var(--athenyx-ai);
  border-color: rgba(98, 240, 190, 0.3); /* token: --athenyx-ai @ 0.3 */
  background: rgba(98, 240, 190, 0.08); /* token: --athenyx-ai @ 0.08 */
}

.onl-tfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--athenyx-border);
}

.onl-tfoot-info {
  font-family: var(--athenyx-font-body);
  font-size: 12px;
  color: var(--athenyx-muted);
}

.onl-pager { display: flex; gap: 4px; }

.onl-pager-btn {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--athenyx-border);
  background: none;
  font-family: var(--athenyx-font-mono);
  font-size: 12px;
  color: var(--athenyx-muted);
  cursor: pointer;
}

.onl-pager-btn.active {
  background: var(--athenyx-ai);
  border-color: var(--athenyx-ai);
  color: #000;
  font-weight: 700;
}

/* ── ADMIN-8 — Live Ops (lo-*) ────────────────────────────────────────────── */

.lo-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.lo-title-block { flex: 1; }

.lo-status-pills {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}

.lo-status-ok, .lo-status-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--athenyx-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--athenyx-ai);
}

.lo-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--athenyx-ai);
  flex-shrink: 0;
}

.lo-dot-pulse { animation: pulse 1.4s ease-in-out infinite; }

.lo-h1 {
  margin: 0;
  font-family: var(--athenyx-font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--athenyx-text);
  letter-spacing: -0.02em;
}

.lo-tools { display: flex; gap: 8px; align-items: center; }

.lo-refresh {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--athenyx-font-body);
  font-size: 12px;
  color: var(--athenyx-muted);
}

.lo-refresh-lbl {
  font-family: var(--athenyx-font-body);
  font-size: 12px;
  color: var(--muted);
}

.lo-refresh-ring {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--athenyx-border);
  border-top-color: var(--athenyx-ai);
  animation: spin 2s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.lo-kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}

.lo-kpi {
  padding: 14px 16px;
  background: var(--athenyx-surface);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lo-kpi-k {
  font-family: var(--athenyx-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--athenyx-muted);
}

.lo-kpi-v {
  font-family: var(--athenyx-font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--athenyx-text);
  font-feature-settings: "tnum";
}

.lo-kpi-ok { color: var(--athenyx-ai); }
.lo-kpi-warn { color: var(--athenyx-warning); }

.lo-body {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 20px;
  align-items: start;
}

.lo-sessions { min-width: 0; }

.lo-col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--athenyx-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--athenyx-muted);
  margin-bottom: 12px;
}

.lo-col-ct {
  font-family: var(--athenyx-font-mono);
  background: var(--athenyx-sub-surface);
  border: 1px solid var(--athenyx-border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  color: var(--athenyx-text);
}

.lo-session {
  background: var(--athenyx-surface);
  border: 1px solid var(--athenyx-border);
  border-radius: var(--athenyx-radius);
  overflow: hidden;
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: 240px 1fr;
}

.lo-vid {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}

.lo-vid-feed {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0a1820 0%, #0f2030 50%, #081520 100%);
}

.lo-live-pill {
  position: absolute;
  top: 8px;
  left: 8px;
  font-family: var(--athenyx-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.7);
  padding: 3px 8px;
  border-radius: 4px;
}

.lo-vid-meta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 6px 8px;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.lo-session-code {
  font-family: var(--athenyx-font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--athenyx-ai);
}

.lo-block {
  font-family: var(--athenyx-font-mono);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6) /* token: --athenyx-text @ 0.6 */;
}

.lo-info {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lo-info-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.lo-session-id {
  font-family: var(--athenyx-font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--athenyx-text);
  letter-spacing: 0.06em;
}

.lo-session-sub {
  font-family: var(--athenyx-font-body);
  font-size: 11px;
  color: var(--athenyx-muted);
  margin-top: 2px;
}

.lo-dur {
  font-family: var(--athenyx-font-mono);
  font-size: 13px;
  color: var(--athenyx-text);
  font-feature-settings: "tnum";
  flex-shrink: 0;
}

.lo-av-stack { display: flex; gap: 4px; }

.lo-av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--athenyx-font-display);
  font-size: 10px;
  font-weight: 700;
}

.lo-av-filled {
  background: rgba(47, 212, 200, 0.2); /* token: --athenyx-advisor @ 0.2 */
  border: 1px solid var(--athenyx-advisor);
  color: var(--athenyx-advisor);
}

.lo-av-open {
  background: var(--athenyx-sub-surface);
  border: 1px dashed var(--athenyx-border);
}

.lo-ai { display: flex; flex-direction: column; gap: 4px; }

.lo-ai-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lo-ai-lbl {
  font-family: var(--athenyx-font-display);
  font-size: 10px;
  color: var(--athenyx-muted);
  width: 60px;
  flex-shrink: 0;
}

.lo-ai-track {
  flex: 1;
  height: 4px;
  background: var(--athenyx-sub-surface);
  border-radius: 2px;
  overflow: hidden;
}

.lo-ai-bar {
  height: 100%;
  background: var(--athenyx-ai);
  border-radius: 2px;
}

.lo-ai-pct {
  font-family: var(--athenyx-font-mono);
  font-size: 10px;
  color: var(--athenyx-text);
  width: 30px;
  text-align: right;
  flex-shrink: 0;
}

.lo-session-actions { display: flex; gap: 6px; }

/* Feed panel */

.lo-feed {
  background: var(--athenyx-surface);
  border: 1px solid var(--athenyx-border);
  border-radius: var(--athenyx-radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.lo-fp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--athenyx-border);
  font-family: var(--athenyx-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--athenyx-muted);
}

.lo-fp-ct {
  font-family: var(--athenyx-font-mono);
  background: var(--athenyx-sub-surface);
  border: 1px solid var(--athenyx-border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  color: var(--athenyx-text);
}

.lo-fp-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lo-ev {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.lo-ev-ts {
  font-family: var(--athenyx-font-mono);
  font-size: 10px;
  color: var(--athenyx-muted);
  width: 46px;
  flex-shrink: 0;
  padding-top: 1px;
}

.lo-ev-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
}

.lo-ev-body { flex: 1; font-size: 12px; line-height: 1.4; }

.lo-ev-tag {
  font-family: var(--athenyx-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--athenyx-ai);
  margin-right: 4px;
}

.lo-ev-txt { color: var(--athenyx-text); }

.lo-fp-foot {
  padding: 10px 14px;
  border-top: 1px solid var(--athenyx-border);
}

/* ── ADMIN-9 — Audit Log (al-*) ───────────────────────────────────────────── */

.al-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.al-title-block { flex: 1; }

.al-kicker {
  font-family: var(--athenyx-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--athenyx-muted);
  display: block;
  margin-bottom: 6px;
}

.al-h1 {
  margin: 0 0 4px;
  font-family: var(--athenyx-font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--athenyx-text);
  letter-spacing: -0.02em;
}

.al-meta {
  font-family: var(--athenyx-font-body);
  font-size: 12px;
  color: var(--athenyx-muted);
}

.al-ct {
  font-family: var(--athenyx-font-mono);
  color: var(--athenyx-text);
}

.al-tools {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.al-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--athenyx-surface);
  border: 1px solid var(--athenyx-border);
  border-radius: 8px;
  min-width: 220px;
}

.al-search-input {
  border: none;
  background: none;
  color: var(--athenyx-text);
  font-family: var(--athenyx-font-body);
  font-size: 13px;
  outline: none;
  flex: 1;
}

.al-search-input::placeholder { color: var(--athenyx-muted); }

.al-filters { margin-bottom: 16px; }

.al-cats {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.al-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--athenyx-border);
  background: var(--athenyx-surface);
  font-family: var(--athenyx-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--athenyx-muted);
  cursor: pointer;
}

.al-cat.active {
  border-color: var(--athenyx-ai);
  color: var(--athenyx-ai);
  background: rgba(98, 240, 190, 0.08); /* token: --athenyx-ai @ 0.08 */
}

.al-cat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.al-cat-ct {
  font-family: var(--athenyx-font-mono);
  font-size: 10px;
  color: var(--athenyx-muted);
}

.al-table-wrap {
  background: var(--athenyx-surface);
  border: 1px solid var(--athenyx-border);
  border-radius: var(--athenyx-radius);
  overflow: hidden;
}

.al-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
}

.al-table thead th {
  padding: 10px 12px;
  font-family: var(--athenyx-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--athenyx-muted);
  border-bottom: 1px solid var(--athenyx-border);
  text-align: left;
  white-space: nowrap;
}

.al-ts-h { width: 200px; }
.al-sev-h { width: 48px; text-align: center; }

.al-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(43, 54, 64, 0.4) /* token: --athenyx-border @ 0.4 */;
  vertical-align: top;
}

.al-table tbody tr:last-child td { border-bottom: 0; }
.al-row-z td { background: rgba(255, 255, 255, 0.015) /* token: --athenyx-text @ 0.015 */; }
.al-table tbody tr:hover td { background: rgba(98, 240, 190, 0.03); /* token: --athenyx-ai @ 0.03 */ }

.al-ts {
  font-family: var(--athenyx-font-mono);
  font-size: 11px;
  color: var(--athenyx-muted);
  white-space: nowrap;
}

.al-cat-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid;
  font-family: var(--athenyx-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.al-actor {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.al-av {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--athenyx-font-display);
  font-size: 8px;
  font-weight: 700;
  color: var(--athenyx-text);
  flex-shrink: 0;
}

.al-ev-main {
  font-family: var(--athenyx-font-mono);
  font-size: 11px;
  color: var(--athenyx-text);
  font-weight: 600;
  margin-bottom: 3px;
}

.al-ev-sub {
  font-family: var(--athenyx-font-body);
  font-size: 11px;
  color: var(--athenyx-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.al-site {
  font-family: var(--athenyx-font-body);
  font-size: 11px;
  color: var(--athenyx-muted);
  white-space: nowrap;
}

.al-sev { text-align: center; }

.al-tfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--athenyx-border);
}

.al-tfoot-info {
  font-family: var(--athenyx-font-body);
  font-size: 12px;
  color: var(--athenyx-muted);
}

.al-pager { display: flex; gap: 4px; align-items: center; }

.al-pager-btn {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--athenyx-border);
  background: none;
  font-family: var(--athenyx-font-mono);
  font-size: 12px;
  color: var(--athenyx-muted);
  cursor: pointer;
}

.al-pager-btn.active {
  background: var(--athenyx-ai);
  border-color: var(--athenyx-ai);
  color: #000;
  font-weight: 700;
}

.al-pager-dots {
  font-family: var(--athenyx-font-mono);
  font-size: 12px;
  color: var(--athenyx-muted);
  padding: 0 4px;
}

/* ── Header logout button ─────────────────────────────────────────────────── */

.adm-logout-btn {
  background: none;
  border: none;
  color: var(--athenyx-muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  transition: color 0.15s;
}

.adm-logout-btn:hover {
  color: var(--athenyx-text);
}

/* ── Login screen ─────────────────────────────────────────────────────────── */

.login-root {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--athenyx-canvas);
  z-index: 200;
}

.login-card {
  width: 360px;
  background: rgba(22, 28, 34, 0.92); /* token: --athenyx-surface @ 0.92 */
  backdrop-filter: blur(20px);
  border-radius: var(--athenyx-radius);
  padding: 40px 36px 36px;
}

.login-brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 32px;
}

.login-brand-mark {
  font-family: var(--athenyx-font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--athenyx-ai);
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.login-brand-sub {
  font-size: 13px;
  color: var(--athenyx-muted);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--athenyx-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.login-input {
  background: var(--athenyx-surface-strong);
  color: var(--athenyx-text);
  border: none;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: var(--athenyx-font-body);
  outline: none;
  transition: box-shadow 0.15s;
}

.login-input:focus {
  box-shadow: 0 0 0 2px var(--athenyx-ai);
}

.login-error {
  font-size: 13px;
  color: var(--athenyx-error, #ff4d4f);
  margin: 0;
}

.login-btn {
  margin-top: 8px;
  padding: 10px 0;
  background: var(--athenyx-ai);
  color: #000;
  font-weight: 600;
  font-size: 14px;
  font-family: var(--athenyx-font-body);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.15s;
}

.login-btn:hover:not(:disabled) {
  opacity: 0.88;
}

.login-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Language switcher ───────────────────────────────────────────────────────── */

.lang-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(43, 54, 64, 0.6); /* token: --athenyx-border @ 0.6 */
  border-radius: 6px;
  padding: 2px;
}

.lang-btn {
  background: none;
  border: none;
  color: var(--athenyx-muted);
  font-family: var(--athenyx-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 7px;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  line-height: 1;
}

.lang-btn:hover {
  color: var(--athenyx-text);
}

.lang-btn.is-active {
  background: var(--athenyx-ai);
  color: #000;
}

/* Login page lang switcher */

.login-lang {
  display: flex;
  justify-content: flex-end;
  gap: 2px;
  margin-bottom: 20px;
}

.login-lang-btn {
  background: none;
  border: none;
  color: var(--athenyx-muted);
  font-family: var(--athenyx-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 7px;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.login-lang-btn:hover {
  color: var(--athenyx-text);
}

.login-lang-btn.is-active {
  background: var(--athenyx-ai);
  color: #000;
}

/* ── ADMIN-10 — Demo Rail (dr-*) ── */

.dr-top { margin-bottom: 18px; }
.dr-h1 { font-family: var(--f-display, 'Space Grotesk', sans-serif); font-weight: 600; font-size: 30px; color: var(--athenyx-text); letter-spacing: -.02em; margin: 0; }
.dr-lede { font-size: 13px; color: var(--athenyx-muted); line-height: 1.6; margin: 8px 0 0; max-width: 700px; }

.dr-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.dr-seg { display: flex; gap: 2px; background: var(--athenyx-surface); border: 1px solid var(--athenyx-border); border-radius: 8px; padding: 3px; }
.dr-seg-btn { padding: 6px 14px; border: 0; border-radius: 6px; font-family: var(--f-display, inherit); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; background: transparent; color: var(--athenyx-muted); }
.dr-seg-btn.active { background: var(--athenyx-canvas); color: var(--athenyx-text); border: 1px solid var(--athenyx-border); }

.dr-search { display: inline-flex; align-items: center; gap: 8px; background: var(--athenyx-surface); border: 1px solid var(--athenyx-border); border-radius: 8px; padding: 0 12px; height: 36px; min-width: 280px; }
.dr-search-input { background: transparent; border: 0; outline: 0; color: var(--athenyx-text); font-family: var(--f-body, 'Inter', sans-serif); font-size: 13px; flex: 1; }
.dr-search-input::placeholder { color: var(--athenyx-muted); }

.dr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.dr-empty { grid-column: 1 / -1; text-align: center; color: var(--athenyx-muted); padding: 40px; }

.dr-card { background: var(--athenyx-surface); border: 1px solid var(--athenyx-border); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }

.dr-thumb { position: relative; aspect-ratio: 16/9; background: #0a1218; overflow: hidden; }
.dr-feed { position: absolute; inset: 0; background: url("../assets/surgical-feed.svg") center/cover no-repeat; opacity: .85; }
.dr-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(10,18,24,.8) 100%); }
.dr-corner { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; }
.dr-pill { display: inline-flex; padding: 3px 8px; border-radius: 4px; background: rgba(22,28,34,.82); backdrop-filter: blur(8px); font-family: var(--f-display, inherit); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--athenyx-text); }
.dr-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; background: rgba(22,28,34,.6); border: 2px solid var(--athenyx-ai); color: var(--athenyx-ai); display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(6px); }
.dr-play .ms { font-size: 28px; }
.dr-dur { position: absolute; bottom: 8px; right: 10px; font-family: var(--f-mono, 'JetBrains Mono', monospace); font-size: 11px; font-weight: 500; color: var(--athenyx-text); background: rgba(22,28,34,.7); padding: 2px 7px; border-radius: 4px; backdrop-filter: blur(4px); }

.dr-strip { height: 32px; background: var(--athenyx-canvas); border-bottom: 1px solid var(--athenyx-border); }

.dr-meta { padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.dr-kicker { font-family: var(--f-display, inherit); font-size: 9px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--athenyx-muted); }
.dr-title { font-family: var(--f-display, inherit); font-size: 15px; font-weight: 600; color: var(--athenyx-text); margin: 0; letter-spacing: -.01em; }
.dr-desc { font-size: 12px; color: var(--athenyx-muted); line-height: 1.5; }
.dr-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.dr-tag { display: inline-flex; padding: 3px 8px; border-radius: 4px; background: var(--athenyx-sub-surface, rgba(22,28,34,.5)); border: 1px solid var(--athenyx-border); font-family: var(--f-display, inherit); font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--athenyx-muted); }
.dr-tag-ok { color: var(--athenyx-ai); border-color: rgba(98,240,190,.25); }
.dr-tag-critical { color: var(--athenyx-critical); border-color: rgba(255,77,79,.25); }

.dr-foot { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--athenyx-border); }
.dr-surgeon { font-family: var(--f-mono, 'JetBrains Mono', monospace); font-size: 10px; color: var(--athenyx-muted); }

.dr-load-more { text-align: center; margin-top: 24px; }

/* MF-1 (2026-06-17): reason-dialog modal for admin actions that
   need a free-text audit justification (Force closeout, etc.). */
.reason-dialog {
  border: 1px solid var(--athenyx-border);
  background: var(--athenyx-surface);
  color: var(--athenyx-text);
  border-radius: 6px;
  padding: 0;
  max-width: 480px;
  width: calc(100vw - 48px);
}
.reason-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}
.reason-dialog-form {
  padding: 20px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.reason-dialog-form h2 {
  font-family: var(--f-display, inherit);
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: var(--athenyx-text);
}
.reason-dialog-prompt {
  font-size: 13px;
  color: var(--athenyx-muted);
  line-height: 1.5;
  margin: 0;
}
.reason-dialog-textarea {
  width: 100%;
  resize: vertical;
  min-height: 80px;
  background: var(--athenyx-canvas);
  border: 1px solid var(--athenyx-border);
  border-radius: 4px;
  padding: 8px 10px;
  font: inherit;
  color: var(--athenyx-text);
}
.reason-dialog-textarea:focus {
  outline: 2px solid var(--athenyx-ai);
  outline-offset: 1px;
}
.reason-dialog-counter {
  font-family: var(--f-mono, monospace);
  font-size: 11px;
  color: var(--athenyx-muted);
  margin: -4px 0 0;
  text-align: right;
}
.reason-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}
.mini-button.danger {
  background: var(--athenyx-critical, #ff4d4f);
  border-color: var(--athenyx-critical, #ff4d4f);
  color: #fff;
}
.mini-button.danger:hover:not(:disabled) {
  filter: brightness(1.1);
}
.mini-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}