:root {
  --bg: #0b1220;
  --panel: #101a2e;
  --panel-2: #17233d;
  --text: #edf2ff;
  --muted: #98a6c4;
  --line: rgba(255,255,255,.08);
  --accent: #4da3ff;
  --accent-2: #6be0c1;
}
* { box-sizing: border-box; }
body { margin: 0; background: linear-gradient(180deg, #09111f 0%, #0e1728 100%); color: var(--text); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
a { text-decoration: none; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 280px; background: rgba(8, 14, 25, .92); border-right: 1px solid var(--line); padding: 24px 18px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; }
.brand-wrap { display: flex; align-items: center; gap: 14px; }
.brand-mark { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; font-size: 1.4rem; background: linear-gradient(135deg, var(--accent), #7c8cff); box-shadow: 0 10px 30px rgba(77,163,255,.35); }
.brand-title { font-size: 1.1rem; font-weight: 700; }
.brand-subtitle { color: var(--muted); font-size: .9rem; }
.sidebar .nav-link { color: #d9e6ff; border-radius: 14px; padding: 12px 14px; font-weight: 500; display: flex; align-items: center; gap: 10px; }
.sidebar .nav-link:hover, .sidebar .nav-link.active { background: linear-gradient(90deg, rgba(77,163,255,.16), rgba(107,224,193,.08)); color: white; }
.sidebar-footer { margin-top: 22px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.03); }
.main-content { flex: 1; padding: 28px; }
.page-title { font-size: 1.55rem; font-weight: 800; }
.page-subtitle, .footer-note, .text-secondary { color: var(--muted) !important; }
.card { background: linear-gradient(180deg, rgba(19,31,53,.95), rgba(15,24,41,.95)); border: 1px solid var(--line) !important; box-shadow: 0 12px 40px rgba(0,0,0,.18); color: var(--text); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-border-color: var(--line); }
.table thead th { color: #bad2ff; font-weight: 600; }
.form-control, .form-select, textarea { background: rgba(255,255,255,.04) !important; color: var(--text) !important; border-color: var(--line) !important; }
.form-control::placeholder { color: #7d8aa8; }
.form-control:focus, .form-select:focus { box-shadow: 0 0 0 .25rem rgba(77,163,255,.15) !important; }
.btn-primary { background: linear-gradient(135deg, var(--accent), #5b7cff); border: 0; }
.btn-outline-secondary, .btn-outline-primary, .btn-outline-light, .btn-outline-danger { border-color: var(--line); color: #dfe8ff; }
.kpi-card .icon { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: rgba(77,163,255,.16); color: #a9ceff; font-size: 1.2rem; }
.kpi-value { font-size: 1.8rem; font-weight: 800; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; font-weight: 600; font-size: .92rem; }
.status-pill.ok { background: rgba(46, 204, 113, .15); color: #87f0b4; }
.status-pill.bad { background: rgba(255, 99, 132, .15); color: #ffb3c4; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.url-box, pre.api-box, .soft-box { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 14px; color: #dce8ff; }
video.video-preview { width: 100%; max-height: 320px; border-radius: 16px; background: #000; }
.empty-state { border: 1px dashed var(--line); border-radius: 20px; padding: 32px; text-align: center; color: var(--muted); }
.badge.text-bg-light { background: rgba(255,255,255,.08)!important; color: #e6eeff !important; }
.server-select { min-width: 220px; }
.list-inline-meta { display:flex; gap:12px; flex-wrap:wrap; }
@media (max-width: 991px) { .app-shell { display: block; } .sidebar { position: relative; height: auto; width: 100%; } .main-content { padding: 18px; } .server-select { min-width: 0; width: 180px; } }