:root{
  --header-bg:#4f7df7;
  --sidebar-bg:#f5f7fb;
  --card-bg:#ffffff;
  --muted:#6b7280;
}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial; margin:0; background:#f3f6fb; color:#0f172a;}
.site-header{background:var(--header-bg); color:#fff; padding:20px 24px; font-weight:600; font-size:20px}
.app{display:flex; min-height:calc(100vh - 140px)}
.sidebar{width:220px;background:var(--sidebar-bg); padding:20px; border-right:1px solid #e6e9ef}
.sidebar .nav-link{color:#374151; padding:10px 12px; border-radius:8px; margin-bottom:6px; display:block; text-decoration:none}
.sidebar .nav-link:hover, .sidebar .nav-link.active{background:#eaf2ff; color:var(--header-bg); font-weight:600}
.main-content{flex:1; padding:32px}
.card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px}
.card-panel{background:var(--card-bg); padding:18px; border-radius:12px; box-shadow:0 6px 18px rgba(16,24,40,0.06); display:flex; align-items:center; gap:12px}
.kpi-icon{width:56px;height:56px;border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:22px}
.kpi-blue{background:linear-gradient(135deg,#e8f0ff,#dbe9ff); color:#2563eb}
.kpi-green{background:linear-gradient(135deg,#ecfff5,#d9f7ea); color:#059669}
.kpi-purple{background:linear-gradient(135deg,#f3eaff,#efe2ff); color:#6d28d9}
.kpi-orange{background:linear-gradient(135deg,#fff7ed,#fff2dd); color:#b45309}
.title-1{font-size:28px; font-weight:700; margin-bottom:16px}
.site-footer{padding:18px 24px; text-align:center; color:var(--muted); background:#fff; border-top:1px solid #eef2f7; position:relative; margin-top:24px}
.table-responsive{background:transparent}
.form-inline .row>.col{display:flex; gap:8px}
@media(max-width:800px){ .sidebar{display:none} }