:root{
  --bg:#f4f6fb; --card:#ffffff; --text:#111827; --muted:#6b7280; --border:#e5e7eb;
  --brand:#2563eb; --ok:#16a34a; --warn:#f59e0b; --danger:#ef4444;
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.08);
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI; background:var(--bg); color:var(--text);}
.sidebar{position:fixed; left:0; top:0; bottom:0; width:260px; background:#0f172a; color:#e5e7eb; padding:22px 16px; box-shadow:var(--shadow)}
.brand{font-weight:700; font-size:20px; display:flex; gap:10px; align-items:center; margin-bottom:24px}
.nav a{display:flex; align-items:center; gap:12px; padding:12px 14px; margin:6px 0; border-radius:12px; color:#cbd5e1; text-decoration:none}
.nav a.active, .nav a:hover{background:#1f2937; color:#fff}
.main{margin-left:260px; padding:24px}
.topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px}
.title{font-weight:700; font-size:22px}
.tz{font-size:12px; color:var(--muted)}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:16px}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px}
.card-kpi .kpi-label{color:var(--muted); font-size:13px}
.card-kpi .kpi-value{font-size:36px; font-weight:700; margin:4px 0 6px}
.card-kpi .kpi-sub{font-size:12px; display:flex; align-items:center; gap:6px}
.card-kpi .kpi-sub i{font-size:8px}
.panel{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; margin-bottom:16px}
.panel-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.panel-header h3{margin:0; font-size:16px}
.panel-actions{display:flex; gap:10px; align-items:center}
.small{font-size:12px; color:var(--muted)}
.btn{background:var(--brand); border:none; color:#fff; border-radius:10px; padding:8px 12px; cursor:pointer}
.btn:hover{opacity:.95}
.table-wrap{overflow:auto}
.table{width:100%; border-collapse:separate; border-spacing:0; min-width:800px}
.table th,.table td{padding:10px 12px; border-bottom:1px solid var(--border); text-align:left; font-size:14px}
.table thead th{position:sticky; top:0; background:var(--card); z-index:1}
.table tr:hover td{background:#f8fafc}
.table.small th,.table.small td{font-size:13px}
.form{display:grid; gap:10px}
.form.grid-3{grid-template-columns:repeat(3,1fr); gap:12px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field{display:grid; gap:6px}
.field label{font-size:12px; color:var(--muted)}
.field input,.field select{padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:#fff}
.actions{margin-top:6px}
.list{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.list li{padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:#fff}
@media(max-width:1100px){.cards{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}.form.grid-3{grid-template-columns:1fr}}
.status-pill{display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:4px 8px; border-radius:999px}
.status-ok{background:rgba(22,163,74,.1); color:#166534}
.status-warn{background:rgba(245,158,11,.1); color:#92400e}
.status-bad{background:rgba(239,68,68,.1); color:#991b1b}