:root { --bg:#0b1220; --card:#0f1a33; --muted:#94a3b8; --text:#e2e8f0; --accent:#6c63ff; --border:#1f2a44; }
*{ box-sizing:border-box; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; }
body{ margin:0; background:linear-gradient(180deg,var(--bg),#050a14); color:var(--text); }
a{ color:inherit; text-decoration:none; }
.container{ max-width:1200px; margin:0 auto; padding:18px; }
.topbar{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border); position:sticky; top:0; background:rgba(11,18,32,.9); backdrop-filter: blur(10px); }
.brand{ font-weight:800; letter-spacing:.3px; }
.nav{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.nav a{ padding:8px 12px; border:1px solid transparent; border-radius:12px; color:var(--muted); }
.nav a.active{ border-color:var(--border); background:rgba(108,99,255,.08); color:var(--text); }
.card{ background:rgba(15,26,51,.85); border:1px solid var(--border); border-radius:18px; padding:16px; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.grid{ display:grid; gap:14px; grid-template-columns: repeat(12, 1fr); }
.col-3{ grid-column: span 3; }
.col-4{ grid-column: span 4; }
.col-6{ grid-column: span 6; }
.col-12{ grid-column: span 12; }
h1,h2{ margin:0 0 10px 0; }
small{ color:var(--muted); }
table{ width:100%; border-collapse:collapse; overflow:hidden; border-radius:14px; }
th,td{ padding:10px 10px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; font-size:14px; }
th{ color:#cbd5e1; font-weight:700; }
.badge{ display:inline-block; padding:4px 10px; border:1px solid var(--border); border-radius:999px; font-size:12px; color:var(--muted); }
.badge.ok{ border-color:rgba(34,197,94,.35); color:#86efac; }
.badge.warn{ border-color:rgba(245,158,11,.35); color:#fde68a; }
.badge.bad{ border-color:rgba(239,68,68,.35); color:#fecaca; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 12px; border-radius:14px; border:1px solid var(--border); background:rgba(108,99,255,.12); color:var(--text); cursor:pointer; }
.btn.danger{ background:rgba(239,68,68,.12); }
.input{ width:100%; padding:12px 12px; border-radius:14px; border:1px solid var(--border); background:rgba(2,6,23,.55); color:var(--text); }
.row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.pager{ display:flex; gap:10px; align-items:center; justify-content:flex-end; margin-top:12px; }
hr{ border:0; border-top:1px solid var(--border); margin:14px 0; }
@media (max-width: 920px){
  .col-3,.col-4,.col-6{ grid-column: span 12; }
  th,td{ font-size:13px; }
}