:root {
  color-scheme: dark;
  --bg: #07111c;
  --panel: rgba(16, 31, 47, 0.88);
  --panel-strong: #102236;
  --line: rgba(150, 190, 221, 0.18);
  --text: #ecf7ff;
  --muted: #9db3c4;
  --accent: #55d9d0;
  --accent-2: #89a8ff;
  --positive: #62e39a;
  --warning: #f7c86f;
  --critical: #ff7d8f;
  --shadow: 0 24px 72px rgba(0, 0, 0, 0.35);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top left, rgba(74, 129, 171, .24), transparent 38%), linear-gradient(135deg, #06111d, #091a29 55%, #07131e); color: var(--text); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 260px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 22px 16px; border-right: 1px solid var(--line); background: rgba(4, 13, 23, .72); backdrop-filter: blur(24px); }
.brand { display: flex; gap: 12px; align-items: center; padding: 4px 4px 18px; }
.brand-mark { width: 42px; height: 42px; border-radius: 15px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #07131f; font-weight: 900; box-shadow: 0 12px 32px rgba(85,217,208,.2); }
.brand h1 { margin: 0; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
.brand p, .sidebar p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.nav { display: grid; gap: 6px; margin-top: 14px; }
.nav button { text-align: left; border: 1px solid transparent; color: var(--muted); background: transparent; padding: 11px 12px; border-radius: 12px; transition: .2s; }
.nav button:hover, .nav button.active { color: var(--text); border-color: var(--line); background: rgba(86, 216, 208, .09); }
.nav small { display: block; margin-top: 3px; opacity: .72; }
.sidebar-footer { position: absolute; inset: auto 16px 18px; display: grid; gap: 8px; }
.main { padding: 28px; max-width: 1600px; width: 100%; margin: 0 auto; }
.topbar { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; margin-bottom: 20px; }
h2, h3, p { margin-top: 0; } h2 { font-size: clamp(24px, 3vw, 38px); margin-bottom: 6px; } h3 { font-size: 16px; }
.muted { color: var(--muted); } .eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .16em; font-size: 11px; font-weight: 800; }
.grid { display: grid; gap: 15px; } .grid.metrics { grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); } .grid.two { grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); }
.card { border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: var(--shadow); padding: 17px; backdrop-filter: blur(20px); }
.metric strong { display:block; margin-top: 7px; font-size: 27px; }.metric span { color: var(--muted); font-size: 12px; }
.toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:9px; }.stack { display:grid; gap:10px; }
.button { border: 1px solid rgba(99, 229, 219, .28); border-radius: 11px; padding: 9px 12px; color: #eaffff; background: rgba(65, 200, 190, .16); transition: .2s; }
.button:hover { transform: translateY(-1px); background: rgba(65, 200, 190, .25); }.button.secondary { color: var(--muted); border-color: var(--line); background: rgba(142, 172, 199, .08); }.button.danger { color:#ffe7eb; border-color:rgba(255,125,143,.35);background:rgba(255,125,143,.14); }
.input { width:100%; border:1px solid var(--line); border-radius:10px; padding:10px 11px; color:var(--text); background:rgba(0,0,0,.22); }.input:focus { outline:2px solid rgba(85,217,208,.35); border-color:transparent; }
label { display:grid; gap:5px; color:var(--muted); font-size:12px; }.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; }
.badge { display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line); border-radius:999px; padding:5px 8px; font-size:11px; color:var(--muted); background:rgba(255,255,255,.03); }.badge.ok { color:var(--positive);}.badge.warn{color:var(--warning)}.badge.critical{color:var(--critical)}
.table-wrap { overflow:auto; }.table { width:100%; border-collapse:collapse; font-size:13px; }.table th,.table td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left;vertical-align:top}.table th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}.table tr:last-child td{border-bottom:0}
pre { white-space:pre-wrap; word-break:break-word; margin:0; max-height:420px; overflow:auto; color:#c4d9e7; font-size:12px; line-height:1.55; }
.banner { border:1px solid rgba(247,200,111,.35); background:rgba(247,200,111,.08); padding:12px; border-radius:12px; color:#ffe6a6; font-size:13px; }
.login { max-width:680px; margin:8vh auto; padding:25px; }.login h2{font-size:32px}.login .banner{margin:14px 0}.login input{margin:8px 0 12px}
.activity { min-height:160px; }.activity-item{border-left:2px solid var(--accent);padding:4px 0 4px 11px;margin:10px 0}.activity-item small{display:block;color:var(--muted);margin-top:3px}
@media (max-width: 900px){.app-shell{display:block}.sidebar{position:relative;height:auto;border-right:0;border-bottom:1px solid var(--line)}.nav{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.sidebar-footer{position:static;margin-top:16px}.main{padding:18px}.topbar{display:block}.grid.two{grid-template-columns:1fr}}