:root{--navy:#003366;--navy2:#064a78;--cyan:#00a699;--cyan2:#62d3ca;--coral:#c94d58;--gold:#99cc33;--ink:#17334c;--muted:#6c7f8f;--line:#d9e9ec;--bg:#eff9fa;--white:#fff;--good:#4d9e36;--bad:#c94d58;--shadow:0 18px 50px rgba(0,51,102,.12);--radius:22px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--ink);min-height:100vh}.dashboard{display:grid;grid-template-columns:248px 1fr;min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:linear-gradient(165deg,var(--navy),#132957 72%,#18335e);color:#fff;padding:26px 20px;display:flex;flex-direction:column;overflow:hidden}.sidebar:after{content:"";position:absolute;width:220px;height:220px;border:1px solid rgba(25,198,209,.25);border-radius:50%;right:-120px;bottom:-60px;box-shadow:0 0 0 35px rgba(25,198,209,.04),0 0 0 70px rgba(25,198,209,.025)}.brand{display:flex;align-items:center;gap:11px;position:relative;z-index:1}.brand-mark{width:38px;height:38px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:12px}.brand-mark svg{width:28px;height:28px}.brand strong{display:block;font-size:18px;letter-spacing:-.3px}.brand small{font-size:9px;letter-spacing:3px;color:#8fe8ec;font-weight:700}.nav-label{margin:38px 10px 12px;font-size:10px;letter-spacing:2px;color:#8294ba;text-transform:uppercase;font-weight:800}.nav-item{display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:12px;color:#aebbd3;text-decoration:none;font-size:13px;margin:3px 0;transition:.2s}.nav-item:before{content:"";width:7px;height:7px;border-radius:50%;background:#5d7199}.nav-item.active,.nav-item:hover{background:rgba(255,255,255,.08);color:#fff;transform:translateX(2px)}.nav-item.active:before{background:var(--cyan);box-shadow:0 0 0 5px rgba(25,198,209,.14)}.side-note{margin-top:auto;padding:15px;border:1px solid rgba(255,255,255,.09);border-radius:15px;background:rgba(255,255,255,.05);font-size:11px;line-height:1.55;color:#9faece;position:relative;z-index:1}.side-note b{color:#fff;display:block;margin-bottom:3px}.main{padding:28px clamp(20px,3vw,44px) 44px;min-width:0}.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:24px}.eyebrow{font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:#5d7189;font-weight:800;margin-bottom:8px}.topbar h1{margin:0;color:var(--navy);font-size:clamp(26px,3vw,40px);letter-spacing:-1.5px;line-height:1.05}.topbar p{margin:8px 0 0;color:var(--muted);font-size:13px}.status{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);padding:9px 13px;border-radius:999px;font-size:11px;color:#5f7188;white-space:nowrap;box-shadow:0 8px 24px rgba(11,23,57,.05)}.status i{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 0 4px rgba(25,169,116,.12)}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}.segmented{display:flex;gap:4px;background:#e9eef3;padding:4px;border-radius:12px}.segmented button{border:0;background:transparent;padding:8px 12px;border-radius:9px;color:#66778c;font-weight:700;font-size:11px;cursor:pointer;transition:.18s}.segmented button.active{background:#fff;color:var(--navy);box-shadow:0 4px 14px rgba(11,23,57,.08)}select{border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);padding:9px 34px 9px 12px;font-size:12px;font-weight:650;outline:none}.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px}.kpi,.panel{background:rgba(255,255,255,.93);border:1px solid rgba(219,228,237,.9);border-radius:var(--radius);box-shadow:0 10px 32px rgba(11,23,57,.055);position:relative;overflow:hidden}.kpi{padding:19px 19px 17px;min-height:128px;transition:transform .22s,box-shadow .22s}.kpi:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.kpi:after{content:"";position:absolute;width:80px;height:80px;border-radius:50%;right:-34px;top:-36px;background:var(--accent,#19c6d1);opacity:.1}.kpi-head{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase}.kpi-icon{width:28px;height:28px;border-radius:9px;background:color-mix(in srgb,var(--accent,#19c6d1) 12%,white);display:grid;place-items:center;color:var(--accent,#19c6d1);font-size:14px}.kpi-value{font-size:29px;font-weight:800;color:var(--navy);letter-spacing:-1px;margin:14px 0 7px}.kpi-foot{display:flex;gap:7px;align-items:center;color:var(--muted);font-size:11px}.delta{font-weight:800;color:var(--good);background:rgba(25,169,116,.09);padding:3px 7px;border-radius:999px}.delta.down{color:var(--bad);background:rgba(228,78,98,.09)}.grid{display:grid;grid-template-columns:1.65fr 1fr;gap:14px;margin-bottom:14px}.grid.equal{grid-template-columns:1fr 1fr}.panel{padding:21px}.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px}.panel h2{font-size:15px;margin:0;color:var(--navy);letter-spacing:-.2px}.panel-sub{font-size:10px;color:var(--muted);margin-top:4px}.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:10px;color:var(--muted)}.legend span{display:flex;align-items:center;gap:5px}.legend i{width:7px;height:7px;border-radius:50%;background:var(--c)}.chart{width:100%;height:250px;display:block;overflow:visible}.chart text{font-family:inherit;fill:#8190a2;font-size:9px}.chart .gridline{stroke:#e9eef3;stroke-width:1}.chart .area{opacity:.13}.chart .line{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.chart .dot{stroke:#fff;stroke-width:3;transition:r .15s}.chart .dot:hover{r:6}.bars{display:flex;flex-direction:column;gap:13px;padding-top:5px}.bar-row{display:grid;grid-template-columns:110px 1fr 56px;align-items:center;gap:12px;font-size:11px}.bar-row label{color:#53667e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar-track{height:9px;border-radius:999px;background:#edf2f6;overflow:hidden}.bar-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--cyan),#54dbe2);animation:grow .8s ease both;transform-origin:left}.bar-row b{text-align:right;color:var(--navy);font-size:11px}.donut-wrap{display:grid;grid-template-columns:180px 1fr;align-items:center;gap:18px}.donut{width:172px;height:172px;margin:auto}.donut-center{font-size:22px;font-weight:800;fill:var(--navy)!important}.donut-label{font-size:8px!important;text-transform:uppercase;letter-spacing:1px}.mix-list{display:flex;flex-direction:column;gap:10px}.mix-item{display:grid;grid-template-columns:9px 1fr auto;gap:8px;align-items:center;font-size:11px;color:#5f7188}.mix-item i{width:8px;height:8px;border-radius:3px;background:var(--c)}.mix-item b{color:var(--navy)}.insight{background:linear-gradient(135deg,var(--navy),#173665);color:#fff;border:0}.insight:before{content:"";position:absolute;right:-65px;top:-90px;width:220px;height:220px;border-radius:50%;border:1px solid rgba(25,198,209,.22);box-shadow:0 0 0 35px rgba(25,198,209,.035),0 0 0 70px rgba(25,198,209,.025)}.insight .panel-head,.insight h2{position:relative;color:#fff}.insight .panel-sub{color:#93a9c5}.insight-list{position:relative;display:grid;gap:12px}.insight-item{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;padding:11px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.07);border-radius:12px;font-size:11px;line-height:1.45;color:#c3cde0}.insight-item b{color:#fff}.rank-table{width:100%;border-collapse:collapse;font-size:11px}.rank-table th{text-align:left;color:#8795a5;font-size:9px;text-transform:uppercase;letter-spacing:.8px;padding:0 10px 10px;border-bottom:1px solid var(--line)}.rank-table td{padding:11px 10px;border-bottom:1px solid #edf1f5;color:#56697f}.rank-table td:first-child{color:var(--navy);font-weight:750}.rank-table td:last-child{text-align:right;font-weight:800;color:var(--navy)}.pill{display:inline-flex;padding:4px 8px;border-radius:999px;font-weight:750;font-size:9px;background:#edf4f6;color:#4d7180}.pill.warn{background:#fff3e3;color:#b36d00}.pill.risk{background:#feecef;color:#be4052}.footer{display:flex;justify-content:space-between;gap:12px;color:#8b98a8;font-size:10px;padding-top:4px}@keyframes grow{from{transform:scaleX(0)}}@keyframes fadeup{from{opacity:0;transform:translateY(8px)}}.kpi,.panel{animation:fadeup .5s ease both}.kpi:nth-child(2){animation-delay:.06s}.kpi:nth-child(3){animation-delay:.12s}.kpi:nth-child(4){animation-delay:.18s}
body{font-family:Poppins,"Segoe UI",Arial,sans-serif}.topbar h1,.panel h2,.kpi-value{font-family:Montserrat,"Segoe UI",Arial,sans-serif}.sidebar{background:linear-gradient(165deg,#003366,#064a78 72%,#006f78)}.brand-mark{width:42px;height:42px;background:#fff;border-radius:50%}.brand-mark img{width:38px;height:38px}.brand strong{font-family:Montserrat,"Segoe UI",Arial,sans-serif;font-size:15px}.brand small{color:#bceadf;letter-spacing:2.2px}.nav-item.active:before{background:#99cc33;box-shadow:0 0 0 5px rgba(153,204,51,.15)}.kpi,.panel{border-color:#d6e9eb;box-shadow:0 10px 32px rgba(0,51,102,.06)}.segmented{background:#dceced}.insight{background:linear-gradient(135deg,#003366,#07517b)}
@media(max-width:1100px){.dashboard{grid-template-columns:80px 1fr}.sidebar{padding:22px 14px}.brand span,.nav-label,.nav-item span,.side-note{display:none}.brand{justify-content:center}.nav-item{justify-content:center;height:42px}.kpis{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.dashboard{display:block}.sidebar{position:static;height:auto;flex-direction:row;align-items:center;padding:12px 16px}.sidebar nav,.side-note{display:none}.main{padding:20px 14px 36px}.topbar{align-items:center}.status{display:none}.kpis,.grid,.grid.equal{grid-template-columns:1fr}.donut-wrap{grid-template-columns:1fr}.chart{height:220px}.bar-row{grid-template-columns:88px 1fr 52px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.view-hidden{display:none!important}.grid.view-single,.grid.equal.view-single{grid-template-columns:minmax(0,1fr)}.main.view-transition>.kpis:not(.view-hidden),.main.view-transition>.grid:not(.view-hidden),.main.view-transition>.panel:not(.view-hidden){animation:viewChange .28s ease both}.back-home{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;margin:14px 0 0;padding:10px 12px;border:1px solid rgba(255,255,255,.16);border-radius:11px;color:#fff;text-decoration:none;font-size:11px;font-weight:700;background:rgba(255,255,255,.06);transition:.2s}.back-home:hover{background:rgba(255,255,255,.13);transform:translateY(-1px)}@keyframes viewChange{from{opacity:.25;transform:translateY(6px)}to{opacity:1;transform:none}}@media(max-width:1100px){.back-home{font-size:0;padding:10px}.back-home:before{content:'←';font-size:18px}}@media(max-width:760px){.back-home{margin:0 0 0 auto;width:42px;height:42px}}