*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#f7f9fc;color:#1f2937}
.layout{display:flex;min-height:100vh}
.sidebar{width:240px;background:#ffffff;border-right:1px solid #e5e7eb;padding:16px;position:sticky;top:0;height:100vh}
.brand{font-weight:700;margin-bottom:16px;color:#1e3a8a;font-size:18px}
.nav-item{display:block;color:#374151;text-decoration:none;padding:12px 10px;border-radius:8px;margin-bottom:6px}
.nav-item:hover{background:#eef2ff;color:#1e3a8a}
.nav-item.active{background:#eef2ff;color:#1e3a8a;font-weight:600;border:1px solid #e5e7eb}
.nav-section{margin:12px 0 6px}
.nav-section-title{font-weight:600;color:#6b7280;margin:8px 10px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px;border-radius:8px}
.nav-section-title::after{content:'▸';color:#6b7280}
.nav-section.open .nav-section-title{background:#f3f4f6;color:#1e3a8a}
.nav-section.open .nav-section-title::after{content:'▾';color:#1e3a8a}
.nav-section-body{display:none}
.nav-section.open .nav-section-body{display:block}
.nav-subitem{display:block;color:#4b5563;text-decoration:none;padding:10px 10px 10px 22px;border-radius:8px;margin-bottom:4px;font-size:14px}
.nav-subitem:hover{background:#f3f4f6;color:#1e3a8a}
.nav-subitem.active{background:#eaf2ff;color:#1e3a8a;font-weight:600}
.content{flex:1;padding:28px}
.grid{display:grid;gap:16px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.card{background:#ffffff;border:1px solid #e5e7eb;border-radius:12px;padding:16px;box-shadow:0 4px 12px rgba(17,24,39,0.06)}
.card h3{margin:0 0 10px 0;font-size:16px;color:#111827}
.kpi{display:flex;align-items:center;justify-content:space-between}
.table{width:100%;border-collapse:collapse;background:#ffffff}
.table th,.table td{border-bottom:1px solid #e5e7eb;padding:12px;text-align:left}
.toolbar{display:flex;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.btn{background:#2563eb;color:#fff;border:none;border-radius:10px;padding:9px 14px;cursor:pointer}
.btn.secondary{background:#f3f4f6;color:#111827;border:1px solid #e5e7eb}
.input{background:#ffffff;border:1px solid #d1d5db;border-radius:10px;padding:9px;color:#111827;min-width:220px}
.chart{height:220px;background:linear-gradient(180deg,#ffffff,#f1f5f9);border:1px solid #e5e7eb;border-radius:12px}
.status{display:inline-block;padding:6px 10px;border-radius:999px;font-size:12px;border:1px solid transparent}
.status.red{background:#fee2e2;color:#b91c1c;border-color:#fecaca}
.status.orange{background:#fff7ed;color:#c2410c;border-color:#fed7aa}
.status.green{background:#dcfce7;color:#15803d;border-color:#bbf7d0}
.status-group{display:flex;gap:6px;flex-wrap:wrap}