:root{--bg:#0a0f1a;--panel:#0f1524;--text:#e5e7eb;--muted:#93a3b8;--accent:#38bdf8;--ok:#22c55e;--warn:#f59e0b;--bad:#ef4444;--badge:#334155;--card:#0b1220;--shadow:0 10px 25px rgba(0,0,0,.35)}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;color:var(--text);background: radial-gradient(1200px 600px at 10% 0%, #0b1220 0%, #070b15 40%, #05070f 100%);}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.sidebar{background:linear-gradient(180deg,var(--panel) 0%,#0b0f19 100%);border-right:1px solid rgba(255,255,255,.06);padding:20px 14px;position:sticky;top:0;height:100vh}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.5px;margin-bottom:24px;font-size:18px}
.logo__mark{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#38bdf8,#22d3ee);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 6px 20px rgba(34,211,238,.25)}
.nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:#cbd5e1}
.nav a.active,.nav a:hover{background:rgba(56,189,248,.12);color:#e2e8f0}
.content{padding:24px 28px}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:10px;flex-wrap:wrap}
.h1{font-size:22px;font-weight:700}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{background:#0d1627;border:1px solid rgba(255,255,255,.08);color:#e2e8f0;padding:10px 14px;border-radius:10px;cursor:pointer}
.btn.primary{background:linear-gradient(135deg,#38bdf8 0%, #22d3ee 100%);color:#041018;border:none}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.12)}
.btn.ok{background:linear-gradient(135deg,#22c55e,#16a34a);border:none;color:#041018}
.btn.bad{background:linear-gradient(135deg,#ef4444,#dc2626);border:none;color:#fff}
.btn.warn{background:linear-gradient(135deg,#f59e0b,#d97706);border:none;color:#041018}
.select, .input, select, textarea{width:100%;padding:10px 12px;background:#0b1426;color:#e2e8f0;border:1px solid rgba(255,255,255,.08);border-radius:10px;outline:none}
.grid{display:grid;gap:16px;grid-template-columns:repeat(12,1fr)}
.card{grid-column:span 12;background:linear-gradient(180deg,#0b1220,#0a1322);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.card.sm{grid-column:span 6}.card.xs{grid-column:span 3}.card.md{grid-column:span 8}.card.lg{grid-column:span 12}
.card .title{font-size:14px;opacity:.8;margin-bottom:6px}.card .metric{font-size:22px;font-weight:700}
.table{width:100%;border-collapse:separate;border-spacing:0 10px}.table th{text-align:left;font-size:12px;opacity:.75;padding:8px 10px}
.table td{background:linear-gradient(0deg,#0b1324,#0b1528);padding:12px 10px;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.table tr td:first-child{border-left:1px solid rgba(255,255,255,.06);border-radius:12px 0 0 12px}
.table tr td:last-child{border-right:1px solid rgba(255,255,255,.06);border-radius:0 12px 12px 0}
.badge{padding:6px 10px;border-radius:20px;background:var(--badge);font-size:12px;display:inline-block}
.badge.ok{background:rgba(34,197,94,.15);color:#86efac}.badge.warn{background:rgba(245,158,11,.15);color:#fbbf24}.badge.bad{background:rgba(239,68,68,.15);color:#fca5a5}.badge.info{background:rgba(56,189,248,.15);color:#7dd3fc}
.row{display:grid;gap:12px;grid-template-columns:repeat(12,1fr)}.col-12{grid-column:span 12}.col-8{grid-column:span 8}.col-6{grid-column:span 6}.col-4{grid-column:span 4}.col-3{grid-column:span 3}
.tabs{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}.tab{padding:10px 12px;border:1px solid rgba(255,255,255,.1);border-radius:10px;cursor:pointer;background:#0a1424}.tab.active{background:rgba(56,189,248,.15);border-color:rgba(56,189,248,.4)}
.tabpanel{display:none}.tabpanel.active{display:block}
.kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;padding:2px 6px;border-radius:6px;background:#0d172a;border:1px solid rgba(255,255,255,.1)}
.footer-note{opacity:.6;font-size:12px;margin-top:18px}
.toast{position:fixed;right:20px;bottom:20px;background:#0b1220;border:1px solid rgba(255,255,255,.12);padding:12px 14px;border-radius:12px;display:none}
.readonly{opacity:.75;pointer-events:none;filter:saturate(.5)}
.tag{display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);margin:2px}
.timeline{position:relative;padding-left:20px}.timeline:before{content:'';position:absolute;left:8px;top:0;bottom:0;width:2px;background:rgba(255,255,255,.08)}
.timeline .item{position:relative;margin:8px 0;padding-left:8px}.timeline .item:before{content:'';position:absolute;left:-14px;top:8px;width:10px;height:10px;border-radius:50%;background:#38bdf8;box-shadow:0 0 0 3px rgba(56,189,248,.2)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;padding:20px;z-index:40}
.modal .box{background:#0b1220;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:18px;max-width:720px;width:100%}
.hide{display:none}