[hidden] { display: none !important; }
:root {
  color-scheme: dark;
  --ink: #e8edf5;
  --muted: #8e9bac;
  --page: #0b111a;
  --panel: #101722;
  --panel-2: #141e2b;
  --line: #2b3849;
  --focus: #70a7ff;
  --orchestrator: #48dc95;
  --openai: #45c6ff;
  --anthropic: #ff9c4a;
  --review: #c983ff;
  --wait: #ffd05b;
  --bounce: #ff5d67;
  --unknown: #8391a4;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--ink); font: 14px/1.45 Inter, ui-sans-serif, system-ui, sans-serif; }
button, a { color: inherit; font: inherit; }
button { cursor: pointer; }
.map-shell { width: min(1480px, 100%); margin: 0 auto; padding: 24px; }
.map-toolbar { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 14px; }
.eyebrow { margin: 0 0 3px; color: var(--focus); font-size: 11px; letter-spacing: .15em; }
h1 { margin: 0; font-size: clamp(22px, 3vw, 32px); font-weight: 500; letter-spacing: -.025em; }
.subtitle { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
body[data-public-fleet="true"] .map-toolbar .subtitle { color: var(--bounce); }
.toolbar-actions { display: grid; justify-items: end; gap: 8px; }
.view-switch { display: inline-flex; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; }
.view-switch a { padding: 4px 9px; color: var(--muted); font-size: 11px; text-decoration: none; }
.view-switch a + a { border-left: 1px solid var(--line); }
.view-switch a.current { background: var(--focus); color: #07111e; }
.map-status { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 9px; color: var(--muted); font-size: 12px; }
.mode-badge { padding: 4px 8px; border: 1px solid var(--line); border-radius: 4px; color: var(--wait); letter-spacing: .08em; }
.mode-badge.live { color: var(--orchestrator); }
.mode-badge.degraded { color: var(--wait); }
.map-status button { padding: 5px 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel-2); }
.map-status button:hover, .map-status button[aria-pressed="true"] { border-color: var(--focus); color: var(--ink); }
.fleet-board { display: grid; grid-template-columns: 184px minmax(760px, 1fr) 184px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.stage-scroll { min-width: 0; overflow-x: auto; }
.hierarchy-stage { position: relative; min-width: 760px; height: 650px; overflow: hidden; background-color: #0d1621; background-image: radial-gradient(circle at 50% 10%, rgba(72,220,149,.1), transparent 24%), linear-gradient(rgba(43,56,73,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(43,56,73,.16) 1px, transparent 1px); background-size: auto, 28px 28px, 28px 28px; transition: height .25s ease; }
.side-rail { min-width: 0; background: rgba(16,23,34,.96); }
.side-left { border-right: 1px solid var(--line); }
.side-right { border-left: 1px solid var(--line); }
.side-card { padding: 15px 13px; border-bottom: 1px solid var(--line); }
.side-card:last-child { border-bottom: 0; }
.side-card h2 { margin: 0 0 10px; font-size: 10px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; }
.side-card dl { display: grid; gap: 7px; margin: 0; }
.side-card dl > div, .progress-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.side-card dt, .progress-row span { color: var(--muted); font-size: 10px; }
.side-card dd, .progress-row strong { margin: 0; font-size: 13px; font-weight: 500; text-align: right; }
.side-card p { margin: 10px 0 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.dispatch-card > strong { display: block; color: var(--orchestrator); font-size: 30px; font-weight: 500; font-variant-numeric: tabular-nums; }
.progress-row { margin-top: 9px; }
.progress-track { height: 5px; margin-top: 4px; overflow: hidden; border-radius: 9px; background: #202b38; }
.progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--orchestrator); transition: width .3s ease; }
.zabbix-mark { display: inline-block; padding: 4px 6px; background: #d40000; color: #fff; font-size: 9px; letter-spacing: .08em; }
.monitor-state { display: block; margin-bottom: 9px; color: var(--unknown); font-size: 11px; }
.monitor-state.healthy { color: var(--orchestrator); }
.monitor-state.warning { color: var(--wait); }
.problem-list { display: grid; gap: 5px; margin: 9px 0 0; padding-left: 17px; color: var(--muted); font-size: 9px; }
.tier-label { position: absolute; z-index: 1; left: 18px; right: 18px; padding-top: 4px; border-top: 1px solid rgba(131,145,164,.28); color: var(--muted); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.tier-orchestrator { top: 16px; border: 0; }
#builder-tier { top: 176px; }
#reviewer-tier { top: 420px; }
.flow-layer, .node-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.flow-layer { z-index: 2; overflow: visible; pointer-events: none; }
.flow { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; opacity: .75; vector-effect: non-scaling-stroke; }
.flow.dispatch { stroke: var(--orchestrator); marker-end: url(#dispatch-arrow); }
.flow.review { stroke: var(--review); stroke-width: 3; marker-end: url(#review-arrow); }
.flow.bounce { stroke: var(--bounce); stroke-width: 3; stroke-dasharray: 7 5; marker-end: url(#bounce-arrow); }
#dispatch-arrow path { fill: var(--orchestrator); }
#review-arrow path { fill: var(--review); }
#bounce-arrow path { fill: var(--bounce); }
.node-layer { z-index: 3; }
.fleet-node { --ring: var(--line); --vendor: var(--unknown); position: absolute; transform: translate(-50%, -50%); filter: drop-shadow(0 7px 10px rgba(0,0,0,.38)); cursor: pointer; }
.fleet-node:focus { outline: none; filter: drop-shadow(0 0 10px rgba(112,167,255,.75)); }
.fleet-node.builder { width: 144px; height: 110px; }
.fleet-node.reviewer { width: 126px; height: 132px; }
.fleet-node.orchestrator { width: 154px; height: 154px; }
.node-ring, .node-card { position: absolute; }
.node-ring { inset: 0; background: var(--ring); }
.node-card { inset: 5px; display: flex; overflow: hidden; flex-direction: column; justify-content: center; min-width: 0; background: var(--panel); color: var(--ink); }
.builder .node-ring, .builder .node-card { clip-path: polygon(12% 0,88% 0,100% 50%,88% 100%,12% 100%,0 50%); }
.reviewer .node-ring, .reviewer .node-card { clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); }
.orchestrator .node-ring, .orchestrator .node-card { border-radius: 50%; }
.orchestrator .node-ring { background: var(--line); box-shadow: none; }
.orchestrator.state-orchestrating .node-ring { background: linear-gradient(135deg, var(--orchestrator), #1f9f68); box-shadow: 0 0 19px rgba(72,220,149,.35); }
.orchestrator.state-failed .node-ring { background: var(--bounce); box-shadow: 0 0 19px rgba(255,93,103,.3); }
.builder.state-building, .builder.state-testing { --ring: var(--vendor); }
.reviewer.state-reviewing { --ring: var(--review); }
.state-bounced { --ring: var(--bounce); }
.state-failed { --ring: var(--bounce); }
.state-disabled { opacity: .52; }
.node-card { padding: 10px 18px; text-align: left; }
.reviewer .node-card { align-items: center; padding: 22px 24px; text-align: center; }
.orchestrator .node-card { align-items: center; padding: 18px; text-align: center; }
.node-top { display: flex; width: 100%; min-width: 0; align-items: center; justify-content: space-between; gap: 6px; }
.reviewer .node-top { display: block; text-align: center; }
.lane { font-size: 12px; font-weight: 600; }
.role { color: var(--muted); font-size: 7px; letter-spacing: .09em; text-transform: uppercase; }
.reviewer .lane { display: block; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.reviewer .role { display: none; }
.vendor { display: flex; width: 100%; min-width: 0; align-items: center; justify-content: center; margin-top: 3px; color: var(--vendor); }
.vendor-logo { display: inline-grid; width: 24px; height: 24px; flex: 0 0 auto; place-items: center; }
.vendor-logo svg { display: block; width: 24px; height: 24px; fill: currentColor; }
.vendor-logo.generic { border: 1px solid currentColor; border-radius: 50%; font-size: 9px; }
.agent-profile { display: grid; max-width: calc(100% - 30px); min-width: 0; margin-left: 6px; color: var(--ink); line-height: 1.05; }
.agent-model { overflow: hidden; font-size: 8px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.agent-effort { max-width: 100%; margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 7px; letter-spacing: .04em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.orchestrator .agent-profile { display: none; }
.reviewer .agent-profile { margin-left: 3px; }
.reviewer .agent-model { max-width: 40px; font-size: 7px; }
.reviewer .agent-effort { font-size: 6px; }
.task { display: -webkit-box; width: 100%; min-height: 20px; margin-top: 3px; overflow: hidden; font-size: 8px; line-height: 1.25; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.reviewer .task { min-height: 10px; -webkit-line-clamp: 1; }
.node-meta { display: flex; width: 100%; min-width: 0; justify-content: space-between; gap: 6px; margin-top: auto; padding-top: 3px; color: var(--muted); font-size: 7px; text-transform: uppercase; }
.node-meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reviewer .node-meta { display: grid; justify-items: center; }
.orchestrator .role { color: var(--orchestrator); }
.orchestrator .lane { margin-top: 3px; font-size: 14px; }
.orchestrator .task { min-height: 0; margin-top: 7px; color: var(--muted); }
.orchestrator .dispatch-value { margin-top: 3px; color: var(--ink); font-size: 23px; font-weight: 500; font-variant-numeric: tabular-nums; }
.orchestrator .node-meta { justify-content: center; }
.empty-workers { position: absolute; z-index: 4; top: 230px; left: 50%; transform: translateX(-50%); color: var(--muted); }
.legend { position: absolute; z-index: 5; right: 12px; bottom: 12px; display: flex; width: 260px; align-items: flex-start; flex-direction: column; gap: 6px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 5px; background: rgba(11,17,26,.94); color: var(--muted); font-size: 9px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend-shape { display: inline-block; width: 16px; height: 16px; background: var(--unknown); }
.orchestrator-shape { border-radius: 50%; background: var(--orchestrator); }
.builder-shape { clip-path: polygon(15% 0,85% 0,100% 50%,85% 100%,15% 100%,0 50%); }
.reviewer-shape { clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--unknown); }
.legend-dot.openai { background: var(--openai); }.legend-dot.anthropic { background: var(--anthropic); }.legend-dot.review { background: var(--review); }.legend-dot.failure { background: var(--bounce); }.legend-dot.neutral { background: var(--line); }
.legend-line { position: relative; width: 22px; border-top: 2px solid var(--orchestrator); }
.legend-line::after { position: absolute; top: -4px; right: -1px; content: ""; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 5px solid var(--orchestrator); }
.legend-line.review { border-color: var(--review); }.legend-line.review::after { border-left-color: var(--review); }
.legend-line.bounce { border-color: var(--bounce); border-top-style: dashed; }.legend-line.bounce::after { border-left-color: var(--bounce); }
.legend-source { width: 100%; margin-top: 2px; padding-top: 7px; border-top: 1px solid var(--line); }
.detail-strip { display: grid; grid-template-columns: 1fr .65fr .9fr .8fr .8fr 2fr; gap: 1px; margin-top: 8px; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--line); }
.detail-strip > div { min-width: 0; padding: 10px 12px; background: var(--panel-2); }
.detail-strip span { display: block; margin-bottom: 2px; color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.detail-strip strong { display: block; overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.usage-section { margin-top: 18px; padding: 14px; border: 1px solid #2c3235; border-radius: 7px; background: #111217; color: #d8d9da; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.section-heading h2 { margin: 0; font-size: 16px; font-weight: 500; }
.section-heading a { color: #73bf69; font-size: 11px; }
.usage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.usage-panel { min-width: 0; min-height: 168px; padding: 9px 10px; border: 1px solid #2c3235; border-radius: 3px; background: #181b1f; }
.usage-title { color: #d8d9da; font-size: 10px; }
.gauge { display: block; width: 100%; height: 128px; }
.gauge-track, .gauge-value { fill: none; stroke-width: 20; }
.gauge-track { stroke: #24272d; }
.gauge-number { fill: #d8d9da; font-size: 28px; text-anchor: middle; }
.gauge-reset { fill: #8e8e8e; font-size: 8px; text-anchor: middle; }
.usage-empty { grid-column: 1 / -1; padding: 30px; color: #8e8e8e; text-align: center; }
.error { color: var(--bounce); }
@media (max-width: 1150px) {
  .fleet-board { grid-template-columns: 1fr 1fr; }
  .stage-scroll { grid-column: 1 / -1; grid-row: 1; }
  .side-left { grid-column: 1; grid-row: 2; border-top: 1px solid var(--line); border-right: 1px solid var(--line); }
  .side-right { grid-column: 2; grid-row: 2; border-top: 1px solid var(--line); border-left: 0; }
  .usage-grid { grid-template-columns: 1fr 1fr; }
}
.hierarchy-stage.dense .fleet-node.builder { width: 116px; height: 110px; }
.hierarchy-stage.dense .fleet-node.reviewer { width: 112px; height: 132px; }
.hierarchy-stage.dense .node-card { padding-right: 13px; padding-left: 13px; }
.hierarchy-stage.dense .reviewer .node-card { padding: 20px 19px; }
.hierarchy-stage.dense .agent-profile { margin-left: 4px; }
.hierarchy-stage.dense .agent-model { max-width: 52px; }
@media (max-width: 720px) {
  .map-shell { padding: 12px; }
  .map-toolbar { align-items: start; flex-direction: column; }
  .toolbar-actions { width: 100%; justify-items: start; }
  .map-status { justify-content: start; }
  .fleet-board { display: block; }
  .side-left, .side-right { border: 0; border-top: 1px solid var(--line); }
  .detail-strip { grid-template-columns: 1fr 1fr; }
  .detail-work { grid-column: 1 / -1; }
  .usage-grid { grid-template-columns: 1fr; }
  .legend-source { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hierarchy-stage, .progress-track i { transition: none; }
}

/* Public nodes already name their roles; keep the connector field free of labels. */
body[data-public-fleet] .tier-label,
body[data-public-fleet] .progress-track { display: none; }
body[data-public-fleet] .orchestrator .node-top { flex-direction: column; gap: 2px; }