:root{
  --primary:#1f3b57;
  --muted:#5b6b7a;
  --blue:#2b557a;
  --blue-light:#a8b7c8;
  --tan:#e7c8a9;
  --orange:#e67e22;
  --green:#3cb371;
}
*{box-sizing:border-box;}
body{margin:0;background:#f7f9fc;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#1b2b3a;}
.container{max-width:1400px;margin:18px auto;padding:0 16px;}

.filters{display:grid;grid-template-columns:repeat(3, 1fr);gap:12px;margin-bottom:10px;}
.pill{background:#fff;border:1px solid #d7dee7;border-radius:10px;padding:8px 12px;}
.pill label{display:block;font-size:.78rem;color:var(--muted);font-weight:700;margin-bottom:4px;text-transform:uppercase;}
.pill select{width:100%;border:0;outline:0;background:transparent;font-size:.95rem;color:#213a52;}

.title{text-align:center;margin:6px 0 12px 0;color:var(--primary);font-size:1.4rem;font-weight:800;}

.kpi-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:14px;}
.kpi{background:#fff;border:1px solid #e6ecf2;border-radius:12px;padding:14px 18px;height:220px;box-shadow:0 1px 0 rgba(0,0,0,.03);}
.kpi .lbl{color:var(--muted);font-size:.78rem;font-weight:700;text-transform:uppercase;}
.kpi .big{color:var(--primary);font-size:44px;line-height:42px;font-weight:900;margin-top:6px;}
.kpi .sub{color:var(--muted);font-size:.76rem;margin-top:6px;}
.kpi .sub span{display:block;}
.up{color:var(--green);font-weight:700;}
.up::before{content:"↑ ";}
.down{color:var(--orange);font-weight:700;}
.down::before{content:"↓ ";}


.legend{margin:6px 0 8px 6px;color:var(--muted);font-size:.85rem;}
.item{margin-right:16px;}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:middle;}
.blue{background:var(--blue);}
.blue-light{background:var(--blue-light);}
.tan{background:var(--tan);}
.dashed{border:1px dashed var(--orange);}
#chart{background:#fff;border:1px solid #e6ecf2;border-radius:12px;padding:6px;}