:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #090b10;
  color: #eef1f7;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; grid-template-columns: 260px 1fr; background: radial-gradient(circle at 70% 0%, #17203a 0, #090b10 35%); }
button, input, select { font: inherit; }
button { cursor: pointer; }
.sidebar { min-height: 100vh; padding: 24px 18px; border-right: 1px solid #242a36; background: rgba(10,12,18,.92); display: flex; flex-direction: column; gap: 28px; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-mark { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; font-weight:900; font-size:20px; background:linear-gradient(145deg,#8190ff,#4b5bd1); box-shadow:0 10px 30px rgba(101,119,243,.25); }
.brand strong { display:block; font-size:18px; }
.brand small { color:#7f8899; display:block; margin-top:2px; }
nav { display:grid; gap:8px; }
.nav { border:0; text-align:left; padding:12px 14px; border-radius:10px; background:transparent; color:#929bad; }
.nav:hover,.nav.active { background:#171b25; color:#fff; }
.auth { margin-top:auto; display:grid; gap:8px; }
.auth label { font-size:12px; color:#7f8899; }
input,select { border:1px solid #293040; background:#10141d; color:#fff; border-radius:10px; padding:11px 12px; outline:none; }
input:focus,select:focus { border-color:#6978ef; }
button:not(.nav) { border:1px solid #30384b; color:#fff; background:#171d2a; border-radius:10px; padding:10px 14px; }
button:not(.nav):hover { background:#20283a; }
main { padding:30px 38px 60px; max-width:1600px; width:100%; }
header { display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; }
h1 { margin:2px 0 0; font-size:30px; }
h2 { margin:0; font-size:17px; }
.eyebrow { margin:0; color:#7180ef; font-size:11px; font-weight:800; letter-spacing:.16em; }
.state { padding:8px 12px; border:1px solid #31394a; border-radius:999px; color:#929bad; font-size:13px; }
.state.ok { color:#87e0a2; border-color:#285c39; background:#102619; }
.view { display:none; }
.view.active { display:block; }
.cards { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }
.cards article,.panel { border:1px solid #242b39; background:rgba(15,18,26,.86); border-radius:16px; }
.cards article { padding:20px; }
.cards span { display:block; color:#8790a2; font-size:13px; }
.cards strong { display:block; margin-top:8px; font-size:28px; }
.panel { padding:18px; margin-bottom:16px; }
.panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.filters,.watch-form { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.filters input,.watch-form input { flex:1; min-width:180px; }
.timeline { display:grid; gap:8px; }
.event { display:grid; grid-template-columns:115px 150px 180px 1fr; gap:12px; align-items:start; padding:11px 12px; background:#10141c; border:1px solid #202634; border-radius:11px; font-size:13px; }
.event time,.muted { color:#778195; }
.event .type { color:#aab4ff; font-weight:700; }
.event code { white-space:pre-wrap; word-break:break-word; color:#aab2c0; }
.row { display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr auto; gap:12px; align-items:center; padding:12px; border-bottom:1px solid #202633; }
.row:last-child { border-bottom:0; }
.badge { display:inline-block; padding:4px 8px; border-radius:999px; background:#20273a; font-size:11px; }
.badge.online { color:#8ee7a9; background:#14301d; }
.badge.offline { color:#9ca3b2; }
.secret { background:#0a0d13; padding:14px; border-radius:10px; border:1px solid #273047; white-space:pre-wrap; word-break:break-all; }
.hidden { display:none; }
.error { color:#ff9b9b; }
@media(max-width:900px) {
  body { grid-template-columns:1fr; }
  .sidebar { min-height:auto; border-right:0; border-bottom:1px solid #242a36; }
  nav { grid-template-columns:repeat(2,1fr); }
  .auth { margin-top:0; }
  main { padding:22px 16px 50px; }
  .cards { grid-template-columns:repeat(2,1fr); }
  .event { grid-template-columns:1fr; }
  .row { grid-template-columns:1fr; }
}