:root {
  color-scheme: dark;
  --bg: #090909;
  --panel: #111;
  --panel-2: #171717;
  --line: #2a2a2a;
  --muted: #929292;
  --text: #f4f4f4;
  --yellow: #ffd400;
  --active: #8fd14f;
  --development: #f2a93b;
  --planned: #777;
  --danger: #ff5f57;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select { font: inherit; }
.topbar { min-height: 84px; padding: 18px clamp(18px,4vw,52px); display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); background:#050505; position:sticky; top:0; z-index:10; }
h1,h2,p { margin-top:0; }
h1 { margin-bottom:0; font-size:clamp(1.45rem,3vw,2.2rem); letter-spacing:-.04em; }
h2 { margin-bottom:0; font-size:1.1rem; }
.eyebrow { margin-bottom:5px; color:var(--yellow); font-size:.68rem; font-weight:800; letter-spacing:.14em; }
.mode { display:flex; gap:8px; align-items:center; padding:8px 11px; border:1px solid #3d3a18; background:#171608; color:var(--yellow); font-size:.72rem; font-weight:800; letter-spacing:.08em; }
.mode span { width:8px; height:8px; border-radius:50%; background:var(--yellow); box-shadow:0 0 12px var(--yellow); }
main { width:min(1500px, 96vw); margin:24px auto 46px; }
.summary { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:12px; }
.summary article { border:1px solid var(--line); background:var(--panel); padding:18px; }
.summary strong { display:block; font-size:1.8rem; }
.summary span { color:var(--muted); font-size:.78rem; }
.toolbar { display:grid; grid-template-columns:minmax(220px,2fr) 1fr 1fr auto; gap:12px; align-items:end; padding:14px; background:var(--panel); border:1px solid var(--line); margin-bottom:12px; }
label { color:var(--muted); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
input,select,button { width:100%; margin-top:7px; min-height:42px; border:1px solid #343434; background:#0a0a0a; color:var(--text); padding:0 12px; }
button { width:auto; cursor:pointer; color:var(--yellow); border-color:#4c4510; }
button:hover { background:#1d1a06; }
button:disabled { cursor:wait; opacity:.65; }
.workspace { display:grid; grid-template-columns:minmax(0, 3fr) minmax(280px, 1fr); gap:12px; }
.panel { background:var(--panel); border:1px solid var(--line); }
.panel-heading { min-height:72px; padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); }
.panel-heading p:last-child { color:var(--muted); font-size:.78rem; margin:0; }
.live-panel { margin-bottom:12px; }
.live-actions { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:.72rem; }
.live-actions button { margin:0; min-height:36px; }
.health-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-bottom:1px solid var(--line); }
.health-summary article { background:#0d0d0d; padding:14px 18px; }
.health-summary strong { display:block; font-size:1.4rem; }
.health-summary span { color:var(--muted); font-size:.7rem; }
.monitor-notice { padding:11px 18px; color:var(--development); border-bottom:1px solid var(--line); font-size:.75rem; }
.monitor-notice.ready { color:var(--muted); }
.monitor-notice.error { color:var(--danger); }
.health-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:14px; }
.health-card { position:relative; min-height:132px; padding:14px; border:1px solid var(--line); background:var(--panel-2); }
.health-card.operational { border-color:#31521f; }
.health-card.degraded { border-color:#725019; }
.health-card.down { border-color:#6d2825; }
.health-card.not_configured { border-color:#3b3b3b; }
.health-card-head { display:flex; align-items:center; gap:8px; }
.health-dot { width:8px; height:8px; border-radius:50%; background:var(--planned); }
.operational .health-dot { background:var(--active); box-shadow:0 0 8px rgba(143,209,79,.45); }
.degraded .health-dot { background:var(--development); }
.down .health-dot { background:var(--danger); }
.health-kind { display:block; margin:7px 0; color:var(--muted); font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; }
.health-card p,.health-card small { display:block; color:#a8a8a8; font-size:.7rem; line-height:1.45; overflow-wrap:anywhere; }
.health-state { position:absolute; right:12px; bottom:10px; color:var(--muted); font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.health-card.operational .health-state,.health-text.operational { color:var(--active); }
.health-card.degraded .health-state,.health-text.degraded { color:var(--development); }
.health-card.down .health-state,.health-text.down { color:var(--danger); }
.health-text.not_configured { color:var(--planned); }
.live-detail { display:grid; gap:5px; padding:12px; margin:14px 0; border:1px solid var(--line); background:#0c0c0c; }
.live-detail > span { color:var(--muted); font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; }
.live-detail strong { text-transform:uppercase; font-size:.8rem; }
.live-detail small,.muted-copy { color:var(--muted); }
.graph { min-height:640px; width:100%; overflow:hidden; background-image:radial-gradient(#242424 1px, transparent 1px); background-size:22px 22px; }
.graph svg { width:100%; height:640px; display:block; }
.lane-bg { fill:#0d0d0d; stroke:#242424; stroke-width:1px; }
.lane-title { fill:#777; font-size:10px; font-weight:800; letter-spacing:1.3px; }
.link { stroke:#464646; stroke-opacity:.62; stroke-width:1.2px; transition:opacity .18s ease, stroke .18s ease, stroke-width .18s ease; }
.link.related { stroke:var(--yellow); stroke-opacity:.95; stroke-width:2.2px; }
.link.unrelated { opacity:.12 !important; }
.link-label { fill:#777; font-size:9px; pointer-events:none; transition:opacity .18s ease, fill .18s ease; }
.link-label.related { fill:var(--yellow); opacity:1 !important; }
.link-label.unrelated { opacity:.08 !important; }
.node circle { stroke-width:2px; cursor:pointer; }
.node text { fill:#eee; font-size:11px; font-weight:700; pointer-events:none; paint-order:stroke; stroke:#090909; stroke-width:3px; }
.node.dimmed { opacity:.12; }
.node.selected circle { stroke:var(--yellow); stroke-width:4px; filter:drop-shadow(0 0 8px rgba(255,212,0,.5)); }
.detail-panel { padding:18px; }
.detail-panel h2 { font-size:1.45rem; margin-bottom:10px; }
.detail-panel p { color:#b2b2b2; line-height:1.55; }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:18px 0; }
.detail-grid div { padding:11px; border:1px solid var(--line); background:var(--panel-2); }
.detail-grid span { display:block; color:var(--muted); font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; }
.detail-grid strong { display:block; margin-top:5px; font-size:.86rem; }
.badge { display:inline-flex; align-items:center; gap:7px; padding:5px 8px; border:1px solid currentColor; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.badge::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.badge.active { color:var(--active); }
.badge.development { color:var(--development); }
.badge.planned { color:var(--planned); }
.inventory-panel { margin-top:12px; }
.table-wrap { overflow:auto; }
table { border-collapse:collapse; width:100%; min-width:720px; }
th,td { text-align:left; border-bottom:1px solid var(--line); padding:12px 18px; font-size:.78rem; }
th { color:var(--muted); font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; background:#0c0c0c; }
tbody tr { cursor:pointer; }
tbody tr:hover { background:#181818; }
.repo { color:var(--yellow); font-family:ui-monospace, SFMono-Regular, Menlo, monospace; }
footer { display:flex; justify-content:space-between; gap:20px; padding:20px clamp(18px,4vw,52px); border-top:1px solid var(--line); color:var(--muted); font-size:.72rem; }
@media (max-width:1100px) { .health-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:900px) {
  .summary,.health-summary { grid-template-columns:1fr 1fr; }
  .toolbar { grid-template-columns:1fr 1fr; }
  .workspace { grid-template-columns:1fr; }
  .graph { min-height:520px; }
  .graph svg { height:520px; }
}
@media (max-width:560px) {
  .topbar { align-items:flex-start; gap:15px; }
  .mode { font-size:.58rem; }
  .toolbar,.health-grid { grid-template-columns:1fr; }
  .toolbar button { width:100%; }
  .panel-heading,.live-actions { align-items:flex-start; flex-direction:column; }
  .live-actions button { width:100%; }
  footer { flex-direction:column; }
}