:root{
  --bg:#f4f6f8;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --primary:#0b3a67;
  --danger:#b91c1c;
  --warn:#b45309;
  --ok:#047857;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; background:var(--bg); color:var(--text);}
a{color:inherit;text-decoration:none}
.app{display:flex; min-height:100vh}
.side{width:260px; background:#0f172a; color:#e5e7eb; display:flex; flex-direction:column; border-right:1px solid rgba(255,255,255,.06)}
.brand{padding:18px 16px; font-weight:700; letter-spacing:.4px}
.nav{display:flex; flex-direction:column; gap:4px; padding:0 10px 10px}
.nav a{padding:10px 12px; border-radius:10px; color:#cbd5e1}
.nav a.on, .nav a:hover{background:rgba(255,255,255,.08); color:#fff}
.side-footer{margin-top:auto; padding:12px 14px; border-top:1px solid rgba(255,255,255,.06)}
.side-footer .user{font-size:12px; color:#94a3b8; margin-bottom:10px}
.side-footer .logout{display:block; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.08); text-align:center}
.main{flex:1; display:flex; flex-direction:column}
.topbar{display:flex; align-items:center; justify-content:space-between; padding:16px 18px; background:var(--card); border-bottom:1px solid var(--border)}
.top-title{font-weight:700}
.search input{width:320px; max-width:48vw; padding:10px 12px; border:1px solid var(--border); border-radius:12px; outline:none; background:#fbfbfb}
.content{padding:18px}
.flash{padding:12px 14px; margin:16px 18px 0; border-radius:12px; border:1px solid var(--border); background:var(--card)}
.flash.ok{border-color:rgba(4,120,87,.25)}
.flash.err{border-color:rgba(185,28,28,.25)}
.flash.warn{border-color:rgba(180,83,9,.25)}

.grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:14px}
.kpi{font-size:12px; color:var(--muted)}
.kv{font-size:22px; font-weight:800; margin-top:6px}

.table{width:100%; border-collapse:separate; border-spacing:0; background:var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden}
.table th, .table td{padding:10px 10px; border-bottom:1px solid var(--border); font-size:13px; vertical-align:top}
.table th{background:#fafafa; text-align:left; color:#374151; font-weight:700}
.table tr:last-child td{border-bottom:none}
.badge{display:inline-block; padding:3px 8px; border-radius:999px; font-size:12px; border:1px solid var(--border); color:#111}
.badge.ok{border-color:rgba(4,120,87,.25); color:var(--ok)}
.badge.warn{border-color:rgba(180,83,9,.25); color:var(--warn)}
.badge.danger{border-color:rgba(185,28,28,.25); color:var(--danger)}
.btn{display:inline-block; padding:9px 12px; border-radius:12px; border:1px solid var(--border); background:#fff; cursor:pointer; font-size:13px}
.btn.primary{background:var(--primary); color:#fff; border-color:rgba(255,255,255,.15)}
.btn.danger{background:var(--danger); color:#fff; border-color:rgba(255,255,255,.15)}
.btn:disabled{opacity:.6; cursor:not-allowed}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.input, select, textarea{padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:#fff; outline:none; font-size:13px}
textarea{min-height:140px; width:100%}
.form{max-width:980px}
.help{font-size:12px; color:var(--muted); margin-top:6px}
.split{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width: 980px){
  .side{display:none}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:1fr}
  .search input{width:220px}
}