*{box-sizing:border-box}body{margin:0;background:#f4f5f7;font-family:Arial,Helvetica,sans-serif;color:#202833}.app{display:flex;min-height:100vh}.sidebar{width:220px;background:#fff3bf;border-right:1px solid #dccb85;padding:12px}.logo{font-size:22px;font-weight:800;color:#d71920;margin:8px}.logo span{font-size:16px;color:#333}nav a{display:block;padding:11px 12px;border-radius:6px;margin:3px 0;color:#30343b;text-decoration:none;font-size:14px}nav a.active,nav a:hover{background:#fff8dc;border:1px solid #eadb98}.content{flex:1;padding:16px 18px 8px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.topbar h1{margin:0;color:#1b376d;font-size:25px}.topbar p{margin:4px 0 0;color:#667}.filters{display:flex;gap:8px;align-items:center}.filters label{font-size:12px;color:#667}.filters input{height:32px;border:1px solid #ccd4dc;border-radius:5px;padding:0 8px}.filters button{height:34px;border:1px solid #c3c9d1;background:#fff;border-radius:5px;padding:0 14px;cursor:pointer}.filters .green{background:#e8f6ed;color:#0a7f35;border-color:#9bd3ad;font-weight:700}.error{display:none;background:#fff1f1;border:1px solid #ffb7b7;color:#9d1515;border-radius:8px;padding:10px 12px;margin-bottom:10px;font-size:13px;white-space:pre-wrap}.kpi{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;margin-bottom:12px}.kpi-card{background:#fff;border:1px solid #d7dce3;border-radius:8px;padding:12px;box-shadow:0 1px 3px rgba(0,0,0,.06);min-height:92px}.kpi-card.good{background:linear-gradient(180deg,#f7fff8,#fff)}.kpi-card.bad{background:linear-gradient(180deg,#fff4f4,#fff)}.kpi-title{font-size:14px;font-weight:700;color:#0b6a2d}.kpi-card.bad .kpi-title{color:#b51c1c}.kpi-value{font-size:24px;font-weight:800;margin:10px 0;color:#07712e}.kpi-card.bad .kpi-value{color:#c52525}.kpi-sub{font-size:12px;color:#667}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:10px;margin-bottom:10px}.span3{grid-column:span 3}.span4{grid-column:span 4}.span5{grid-column:span 5}.card{background:#fff;border:1px solid #d7dce3;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.06);padding:10px;min-height:245px}.card-title{font-size:16px;font-weight:800;color:#173a75;margin-bottom:8px}.table-wrap{overflow:auto;max-height:220px}table{width:100%;border-collapse:collapse;font-size:12px}th{background:#f1f4f8;color:#173a75;text-align:left;padding:6px;border:1px solid #dde3ea}td{padding:6px;border:1px solid #e4e8ee}tr:nth-child(even) td{background:#fafbfc}.good-cell{background:#dff5e5!important;color:#0b7a31;font-weight:700}.bad-cell{background:#ffe1e1!important;color:#bf1d1d;font-weight:700}.warn-cell{background:#fff2c5!important;color:#946200;font-weight:700}.total{text-align:right;font-weight:700;margin-top:4px}.danger .metric{display:flex;justify-content:space-between;border-bottom:1px solid #eee;padding:8px 0}.danger .metric strong{color:#d31c1c}canvas{width:100%!important;height:190px!important}footer{display:flex;justify-content:space-between;border-top:1px solid #ddd;padding:10px 2px;color:#667;font-size:12px}@media(max-width:1300px){.kpi{grid-template-columns:repeat(4,1fr)}.span3,.span4,.span5{grid-column:span 6}.sidebar{display:none}}