:root{
  --bg:#0b1220; --panel:#111827; --card:#0f172a; --muted:#94a3b8; --text:#e5e7eb;
  --accent:#22c55e; --danger:#ef4444; --warn:#f59e0b; --border:#1f2937;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial; background:var(--bg); color:var(--text)}
.container{display:flex; min-height:100vh}
.sidebar{width:260px; background:var(--panel); border-right:1px solid var(--border); padding:16px; position:sticky; top:0; height:100vh}
.brand{font-weight:800; font-size:18px; margin-bottom:12px}
.small{color:var(--muted); font-size:12px}
.nav{margin-top:12px; display:flex; flex-direction:column; gap:8px}
.nav button{background:transparent; border:1px solid var(--border); color:var(--text); padding:10px 12px; border-radius:12px; text-align:left; cursor:pointer}
.nav button.active{border-color:var(--accent)}
.main{flex:1; padding:18px; max-width:1200px}
.topbar{display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:14px}
.search{flex:1; min-width:220px}
input, select, textarea{width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:#0b1325; color:var(--text)}
textarea{min-height:90px; resize:vertical}
.row{display:grid; grid-template-columns:repeat(12,1fr); gap:12px}
.card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:14px}
.card h3{margin:0 0 10px 0; font-size:16px}
.actions{display:flex; gap:8px; flex-wrap:wrap}
.btn{padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:#0b1325; color:var(--text); cursor:pointer}
.btn.primary{border-color:var(--accent)}
.btn.danger{border-color:var(--danger)}
.badge{display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px; border:1px solid var(--border); font-size:12px; color:var(--muted)}
.table{width:100%; border-collapse:separate; border-spacing:0 10px}
.table th{font-size:12px; color:var(--muted); font-weight:600; text-align:left; padding:0 10px}
.table td{background:#0b1325; border:1px solid var(--border); padding:10px; vertical-align:top}
.table tr td:first-child{border-top-left-radius:12px; border-bottom-left-radius:12px}
.table tr td:last-child{border-top-right-radius:12px; border-bottom-right-radius:12px}
.kpi{display:flex; flex-direction:column; gap:6px}
.kpi .v{font-size:22px; font-weight:800}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media (max-width: 900px){
  .sidebar{width:92px}
  .brand span{display:none}
  .nav button{font-size:12px; padding:10px}
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
}