*{box-sizing:border-box}
body{margin:0;font-family:'Segoe UI',system-ui,sans-serif;background:#0b1120;color:#e2e8f0;
  background-image:radial-gradient(ellipse at top,#13243a 0%,#0b1120 55%);min-height:100vh}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;
  background:rgba(11,17,32,.94);border-bottom:1px solid #1f2b41;position:sticky;top:0;z-index:80;backdrop-filter:blur(8px)}
.brand{display:flex;align-items:center;gap:9px;font-size:16px}
.brand .logo{font-size:22px}
.brand .tag{font-size:10px;background:#16233a;border:1px solid #1f2b41;color:#7dd3fc;padding:2px 8px;border-radius:99px;font-weight:700}
.user{font-size:13px;color:#94a3b8;display:flex;align-items:center;gap:8px}
.user .role{font-size:10px;background:#1f2b41;padding:2px 8px;border-radius:99px}
.logout{color:#f87171;text-decoration:none;font-weight:600;margin-left:8px}
.layout{display:flex;gap:18px;align-items:flex-start;max-width:1240px;margin:0 auto;padding:18px}
.sidebar{flex:0 0 232px;position:sticky;top:70px;background:#111c2e;border:1px solid #1f2b41;border-radius:16px;padding:12px 10px;max-height:calc(100vh - 92px);overflow:auto}
.side-title{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:#64748b;font-weight:700;padding:6px 10px}
.side-meta{font-size:11px;color:#64748b;padding:6px 10px;line-height:1.7}
.nav-i{display:block;padding:10px 12px;border-radius:11px;color:#94a3b8;text-decoration:none;font-size:13px;font-weight:600;margin-bottom:3px;transition:.12s}
.nav-i:hover{background:#16233a;color:#e2e8f0}
.nav-i.on{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}
.main{flex:1;min-width:0}
.card{background:#111c2e;border:1px solid #1f2b41;border-radius:16px;padding:18px 20px;margin-bottom:16px;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.card h2{font-size:14px;color:#cbd5e1;margin:0 0 14px;font-weight:700}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:16px}
.k{background:linear-gradient(160deg,#12203a,#0f1a2c);border:1px solid #1f2b41;border-radius:16px;padding:15px 17px}
.k .v{font-size:21px;font-weight:800;color:#fff}
.k .t{font-size:11px;color:#8195b5;text-transform:uppercase;letter-spacing:.5px;margin-top:3px}
.k.teal .v{color:#5eead4}.k.gold .v{color:#fcd34d}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th,td{padding:9px 10px;border-bottom:1px solid #1e293b;text-align:left}
th{background:#16233a;color:#94a3b8;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
tr:hover td{background:#0f172a55}
input,select,textarea{background:#0b1120;border:1.5px solid #2a3a55;color:#e2e8f0;padding:9px 13px;border-radius:9px;margin:4px 0;font-size:13px;outline:none;width:100%}
input:focus,select:focus{border-color:#3b82f6}
button{background:linear-gradient(135deg,#3b82f6,#2563eb);border:0;color:#fff;padding:10px 18px;border-radius:9px;cursor:pointer;font-weight:700;font-size:13px}
button:hover{filter:brightness(1.1)}
.btn-sm{padding:6px 12px;font-size:12px}
.badge{padding:3px 10px;border-radius:99px;font-size:10.5px;font-weight:700;display:inline-block;background:#1f2b41;color:#cbd5e1}
.badge.ok{background:#059669;color:#fff}.badge.bad{background:#dc2626;color:#fff}.badge.warn{background:#d97706;color:#fff}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.msg{padding:11px 14px;border-radius:10px;font-size:13px;margin-bottom:14px}
.msg.g{background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.4);color:#34d399}
.msg.r{background:rgba(220,38,38,.12);border:1px solid rgba(220,38,38,.5);color:#f87171}
.red{color:#f87171}.green{color:#34d399}
pre{background:#0b1120;border:1px solid #1f2b41;padding:14px;border-radius:10px;font-size:12px;overflow:auto;line-height:1.6}
.tblwrap{overflow-x:auto}
.side-toggle{display:none}
.backdrop{display:none}
@media(max-width:820px){
  .layout{display:block;padding:12px}
  .side-toggle{display:inline-flex;width:auto;margin:10px 12px;padding:8px 14px;background:#16233a;border:1px solid #1f2b41}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:270px;border-radius:0;transform:translateX(-105%);transition:.2s;z-index:200;background:#0d1626;max-height:none}
  .sidebar.open{transform:none;box-shadow:0 0 40px rgba(0,0,0,.6)}
  .backdrop{position:fixed;inset:0;background:rgba(3,7,18,.6);z-index:150}
  .backdrop.show{display:block}
  .kpi{grid-template-columns:repeat(2,1fr)}
  .card{padding:15px 13px;overflow-x:auto}
}