/* static/css/ui.css — design tokens ported from gbrain-dashboard */
:root {
  --bg: #0a0a0a; --bg2: #111; --card: #1a1a1a; --border: #2a2a2a; --border2: #333;
  --text: #e0e0e0; --muted: #888; --dim: #555;
  --green: #22c55e; --amber: #f59e0b; --red: #ef4444; --grey: #6b7280;
  --blue: #3b82f6; --cyan: #06b6d4; --purple: #a855f7; --pink: #ec4899; --r: 10px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; line-height:1.5; min-height:100vh; }
.topbar { display:flex; align-items:center; gap:14px; padding:12px 20px; background:var(--bg2); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; }
.topbar h1 { font-size:1.2rem; font-weight:700; white-space:nowrap; }
.topbar .dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.dot-ok { background:var(--green); box-shadow:0 0 6px var(--green); }
.dot-warn { background:var(--amber); box-shadow:0 0 6px var(--amber); }
.dot-fail { background:var(--red); box-shadow:0 0 6px var(--red); }
.dot-unknown { background:var(--grey); }
.topbar .ver { font-size:0.72rem; color:var(--muted); background:var(--card); padding:2px 8px; border-radius:10px; border:1px solid var(--border); }
.topbar .ts { font-size:0.78rem; color:var(--muted); margin-left:auto; }
.topbar .refresh-btn { background:var(--card); border:1px solid var(--border2); color:var(--text); padding:4px 10px; border-radius:6px; cursor:pointer; font-size:0.8rem; }
.tabs { display:flex; gap:0; padding:0 20px; background:var(--bg2); border-bottom:1px solid var(--border); overflow-x:auto; }
.tab { padding:8px 16px; cursor:pointer; font-size:0.85rem; color:var(--muted); border-bottom:2px solid transparent; transition:all 0.15s; white-space:nowrap; text-decoration:none; }
.tab:hover { color:var(--text); }
.tab.active { color:var(--blue); border-bottom-color:var(--blue); }
.content { padding:20px; max-width:1400px; margin:0 auto; }
.card { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:14px; }
.card-title { font-size:0.82rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:10px; }
.grid { display:grid; gap:12px; }
.grid-auto { grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
.grid-kpi { grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); }