:root{
  --bg:#0b0f17;--panel:#131a27;--panel2:#1a2233;--border:#26324a;
  --fg:#e6edf7;--muted:#9aa7bf;--accent:#4f8cff;--ok:#3dd68c;--warn:#f5b942;--bad:#ff5c6c;--unk:#6b7280;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;font-size:15px;line-height:1.45;-webkit-text-size-adjust:100%}
a{color:var(--accent);text-decoration:none}
.topbar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--panel);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:5;flex-wrap:wrap}
.topbar h1{margin:0;font-size:16px}
.topbar .meta{color:var(--muted);font-size:12px;margin-left:auto}
.layout{display:block;min-height:calc(100vh - 44px)}
.sidebar{display:none}
.content{padding:12px;padding-bottom:72px}
.grid{display:grid;gap:10px}
.grid-3,.grid-4{grid-template-columns:1fr}
.card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:12px}
.kpi{display:flex;flex-direction:column;gap:4px}
.kpi .val{font-size:22px;font-weight:700}
.kpi .lbl{color:var(--muted);font-size:13px}
.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600}
.badge.ok{background:rgba(61,214,140,.15);color:var(--ok)}
.badge.warn{background:rgba(245,185,66,.15);color:var(--warn)}
.badge.bad{background:rgba(255,92,108,.15);color:var(--bad)}
.badge.unk{background:rgba(107,114,128,.25);color:var(--unk)}
.fresh{font-size:12px;color:var(--muted)}
table{width:100%;border-collapse:collapse;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
th,td{padding:8px 10px;border-bottom:1px solid var(--border);text-align:left;font-size:13px;white-space:nowrap}
th{color:var(--muted);font-weight:600}
.canvas{background:var(--panel2);border:1px solid var(--border);border-radius:10px;height:260px;position:relative;overflow:hidden}
.node{position:absolute;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;border:2px solid}
.node.ok{border-color:var(--ok);background:rgba(61,214,140,.15)}
.node.idle{border-color:var(--warn);background:rgba(245,185,66,.15)}
.node.unk{border-color:var(--unk);background:rgba(107,114,128,.2)}
svg.edges{position:absolute;inset:0;pointer-events:none}
.row{padding:8px 10px;border-bottom:1px solid var(--border);display:block;font-size:13px}
.row span{display:block}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.filters select,.filters input{background:var(--panel2);color:var(--fg);border:1px solid var(--border);border-radius:6px;padding:8px 10px;font-size:14px;min-height:40px;flex:1 1 120px}
.drawer{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:12px;margin-top:10px}
.dag{display:flex;flex-direction:column;gap:8px}
.dagrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px}
.arrow{color:var(--muted)}
footer.note{color:var(--muted);font-size:11px;margin-top:16px}
.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:var(--panel);border-top:1px solid var(--border);display:flex;overflow-x:auto;z-index:10;padding:6px 4px;gap:2px}
.bottom-nav a{flex:1 0 auto;text-align:center;padding:8px 6px;border-radius:6px;color:var(--fg);font-size:11px;min-width:64px}
.bottom-nav a.active{background:var(--panel2);color:var(--accent)}

@media (min-width:768px){
  body{font-size:14px}
  .layout{display:grid;grid-template-columns:220px 1fr;min-height:calc(100vh - 44px)}
  .sidebar{display:block;background:var(--panel);border-right:1px solid var(--border);padding:12px}
  .sidebar nav a{display:block;padding:8px 10px;border-radius:6px;color:var(--fg);margin-bottom:4px}
  .sidebar nav a.active{background:var(--panel2);color:var(--accent)}
  .sidebar .section{color:var(--muted);font-size:11px;text-transform:uppercase;margin:12px 0 4px}
  .content{padding:16px;padding-bottom:16px}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
  .canvas{height:420px}
  .node{width:52px;height:52px}
  .row{display:grid;grid-template-columns:150px 120px 1fr 120px;gap:8px}
  .row span{display:inline}
  .drawer{width:300px;margin-top:0}
  .bottom-nav{display:none}
  table{display:table}
  th,td{white-space:normal}
}