:root {
  color-scheme: dark;
  --bg:#0f0f0f; --panel:#171717; --panel-2:#1f1f1f; --panel-3:#242424;
  --border:#2e2e2e; --border-strong:#393939; --text:#fafafa; --muted:#9ca3af;
  --accent:#3ecf8e; --accent-2:#00c573; --warn:#f0b429; --danger:#ff6b6b; --ok:#4ade80;
  --font-ui: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--text); font-family:var(--font-ui); line-height:1.5; }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
code, pre, .mono { font-family:var(--font-mono); }
pre { background:#0b0d10; border:1px solid var(--border); border-radius:12px; padding:1rem; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; }
input, select, textarea, button { font:inherit; color:var(--text); }
input, select, textarea { background:#0b0d10; border:1px solid var(--border); border-radius:10px; padding:.55rem .7rem; }
button, .button { border:1px solid var(--border-strong); background:var(--panel-2); color:var(--text); border-radius:999px; padding:.55rem .9rem; cursor:pointer; display:inline-flex; align-items:center; gap:.35rem; }
button.primary, .button.primary { background:var(--accent); color:#07110c; border-color:rgba(62,207,142,.6); font-weight:600; }
button.link { background:transparent; border:0; color:var(--accent); text-decoration:none; padding:0; cursor:pointer; }
.auth-body { display:grid; place-items:center; padding:3rem 1rem; }
.auth-card { width:min(440px, 100%); border:1px solid var(--border); border-radius:22px; background:linear-gradient(180deg, #171717, #111); padding:2rem; }
.auth-card h1 { margin:0 0 .5rem; font-size:1.65rem; }
.auth-card label { display:grid; gap:.4rem; margin:1.25rem 0; }
.error { color:#fecaca; background:rgba(255,107,107,.12); border:1px solid rgba(255,107,107,.35); padding:.75rem; border-radius:10px; }
.workbench-shell { min-height:100vh; display:grid; grid-template-columns:280px minmax(0,1fr); grid-template-rows:58px 1fr; }
.topbar { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 1rem; border-bottom:1px solid var(--border); background:rgba(15,15,15,.94); position:sticky; top:0; z-index:10; }
.brand { display:flex; align-items:center; gap:.65rem; font-weight:650; letter-spacing:-.02em; }
.brand-mark { width:14px; height:14px; border-radius:50%; background:var(--accent); box-shadow:0 0 28px rgba(62,207,142,.55); }
.command { flex:1; max-width:560px; } .command input { width:100%; }
.top-actions { display:flex; gap:.75rem; align-items:center; }
.sidebar { grid-row:2; border-right:1px solid var(--border); background:var(--panel); padding:1rem; overflow:auto; }
.side-section { margin-bottom:1.4rem; } .side-title { color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; margin:.2rem 0 .55rem; }
.side-link { display:flex; justify-content:space-between; align-items:center; gap:.5rem; padding:.48rem .6rem; border-radius:10px; color:var(--text); }
.side-link:hover, .side-link.active { background:var(--panel-2); text-decoration:none; }
.content { min-width:0; padding:1.35rem; }
.hero { border:1px solid var(--border); border-radius:20px; padding:1.25rem; background:linear-gradient(135deg, rgba(62,207,142,.12), rgba(122,162,255,.06) 45%, rgba(23,23,23,1)); margin-bottom:1rem; }
h1 { margin:.1rem 0 .35rem; letter-spacing:-.03em; } h2 { margin:1.35rem 0 .65rem; }
.muted { color:var(--muted); }.small { font-size:.88rem; }.mono { font-family:var(--font-mono); }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:1rem; }
.card { border:1px solid var(--border); background:var(--panel); border-radius:16px; padding:1rem; }
.metric { font-size:1.6rem; font-weight:650; }.toolbar { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; align-items:end; margin:1rem 0; }
.badge { display:inline-flex; align-items:center; gap:.25rem; border:1px solid var(--border-strong); border-radius:999px; padding:.15rem .5rem; font-size:.78rem; color:var(--muted); }
.badge.ok { color:#bbf7d0; border-color:rgba(74,222,128,.35); background:rgba(74,222,128,.08); }
.badge.warn { color:#fde68a; border-color:rgba(240,180,41,.35); background:rgba(240,180,41,.1); }
.badge.danger { color:#fecaca; border-color:rgba(255,107,107,.35); background:rgba(255,107,107,.1); }
.tabs { display:flex; gap:.45rem; flex-wrap:wrap; border-bottom:1px solid var(--border); margin:1rem 0; }
.tab { padding:.7rem .85rem; border:1px solid transparent; border-bottom:0; border-radius:10px 10px 0 0; color:var(--muted); }
.tab.active { color:var(--text); background:var(--panel); border-color:var(--border); }
.table-wrap { overflow:auto; border:1px solid var(--border); border-radius:14px; background:#111; }
table { border-collapse:separate; border-spacing:0; width:100%; min-width:760px; }
th, td { border-bottom:1px solid var(--border); padding:.6rem .7rem; vertical-align:top; text-align:left; }
th { color:#d1d5db; background:#161a1f; position:sticky; top:0; z-index:1; font-size:.82rem; }
tr:hover td { background:rgba(62,207,142,.035); }.cell { max-width:360px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.filters { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:.7rem; margin:.75rem 0; }
.filters label { display:grid; gap:.25rem; color:var(--muted); font-size:.85rem; }
details.filter-panel { border:1px solid var(--border); background:var(--panel); border-radius:14px; padding:.85rem; margin:1rem 0; }
details.filter-panel summary { cursor:pointer; font-weight:600; }.pager { display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; margin:1rem 0; }
.empty { border:1px dashed var(--border-strong); border-radius:14px; padding:1.2rem; color:var(--muted); background:rgba(255,255,255,.02); }
@media (max-width: 860px) { .workbench-shell { display:block; } .topbar { position:static; } .sidebar { border-right:0; border-bottom:1px solid var(--border); } .content { padding:1rem; } }

.mt-4 { margin-top:1rem; }
.flush { margin:0; }