
:root{
    --bg:#f4f7fb;
    --surface:#fff;
    --text:#182230;
    --muted:#667085;
    --line:#e5eaf1;
    --navy:#123b5d;
    --blue:#1769aa;
    --teal:#00a499;
    --orange:#ec7803;
    --green:#16865c;
    --red:#c84d4d;
    --shadow:0 14px 42px rgba(18,59,93,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input,select{font:inherit}
.app-shell{max-width:1520px;margin:0 auto;padding:26px}
.hero{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;padding:38px 42px;border-radius:26px;color:#fff;background:linear-gradient(135deg,#0e314f 0%,#13547e 58%,#008f88 100%);box-shadow:var(--shadow);position:relative;overflow:hidden}
.hero:before,.hero:after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.06)}
.hero:before{width:320px;height:320px;right:-90px;top:-190px}
.hero:after{width:190px;height:190px;right:170px;bottom:-140px}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:11px;font-weight:800;opacity:.72}
.hero h1{font-size:36px;letter-spacing:-.03em;line-height:1.08;margin:10px 0 11px;position:relative;z-index:1}
.hero p{max-width:870px;margin:0;color:rgba(255,255,255,.82);line-height:1.6;position:relative;z-index:1}
.hero-badge{white-space:nowrap;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.10);backdrop-filter:blur(8px);padding:10px 14px;border-radius:999px;font-size:12px;font-weight:700;position:relative;z-index:1}
.dot{display:inline-block;width:8px;height:8px;background:#59e0b4;border-radius:50%;margin-right:7px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}
.filters{padding:20px 22px;margin-top:20px}
.filter-head,.card-title,.table-title{display:flex;align-items:center;justify-content:space-between;gap:16px}
.filter-head h2,.card-title h2{font-size:17px;margin:0 0 4px}.filter-head p,.card-title p{margin:0;color:var(--muted);font-size:12px}
.filter-grid{display:grid;grid-template-columns:1.2fr .55fr .9fr;gap:14px;margin-top:16px}
label span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:800;color:#475467;margin-bottom:6px}
select,input{width:100%;border:1px solid #d9e0e8;border-radius:12px;padding:11px 12px;background:#fff;color:var(--text);outline:none}
select:focus,input:focus{border-color:#7aaed3;box-shadow:0 0 0 3px rgba(23,105,170,.10)}
.btn{border:0;background:var(--navy);color:#fff;border-radius:11px;padding:10px 14px;font-size:12px;font-weight:800;cursor:pointer}
.btn:hover{filter:brightness(1.06)}.btn-secondary{background:#eef3f7;color:#344054}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:18px 0}
.kpi{padding:20px;display:flex;gap:14px;align-items:center;min-height:124px}
.kpi-icon{display:grid;place-items:center;width:48px;height:48px;flex:0 0 48px;border-radius:14px;background:#edf4fa;font-size:19px;color:var(--blue);font-weight:900}
.kpi.accent{background:linear-gradient(145deg,#103b5c,#116a74);color:#fff;border:0}
.kpi.accent .kpi-icon{background:rgba(255,255,255,.12);color:#fff}.kpi.accent span,.kpi.accent small{color:rgba(255,255,255,.72)}
.kpi span{display:block;font-size:12px;color:#667085;font-weight:700}.kpi strong{display:block;font-size:31px;letter-spacing:-.035em;margin:3px 0}.kpi small{display:block;color:#7a8492;font-size:11px}
.coverage-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}
.coverage{padding:17px 18px}.coverage-top{display:flex;justify-content:space-between;align-items:center}.coverage-top span{font-size:12px;font-weight:800}.coverage-top strong{font-size:21px}.coverage small{color:var(--muted);font-size:11px}
.progress{height:7px;background:#edf1f5;border-radius:999px;overflow:hidden;margin:10px 0 7px}.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--teal));border-radius:999px;transition:width .35s ease}
.grid{display:grid;gap:18px;margin-bottom:18px}.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:1fr 1fr 1fr}
.chart-card{padding:20px}.chart-box{height:315px;position:relative;margin-top:14px}.chart-box.compact{height:300px}.chart-box.tall{height:390px}
.cross-card{padding:22px;margin-bottom:18px}.cross-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:17px}.cross-grid>div{padding:14px;border-radius:14px;background:#f7f9fc;border:1px solid #edf0f4}.cross-grid span{display:block;color:#667085;font-size:10px;font-weight:800;line-height:1.35;text-transform:uppercase;letter-spacing:.03em;min-height:29px}.cross-grid strong{display:block;font-size:23px;margin-top:5px}.cross-grid .cross-featured{background:#eef8f6;border-color:#ccebe5}.cross-featured strong{color:#08766f}
.narrative{padding:20px}.narrative-body{font-size:14px;line-height:1.75;color:#475467}.narrative-body strong{color:var(--text)}.narrative-stat{display:grid;grid-template-columns:1fr auto;gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}.narrative-stat:last-child{border-bottom:0}.narrative-stat b{color:var(--navy)}
.method-note{padding:15px 16px;border-radius:14px;background:#f7f9fc;margin-top:18px}.method-note strong{font-size:12px}.method-note p{font-size:11px;line-height:1.55;color:var(--muted);margin:5px 0 0}
.table-card{padding:20px;margin-bottom:18px}.table-scroll{overflow:auto;margin-top:15px;border:1px solid var(--line);border-radius:14px}table{border-collapse:collapse;width:100%;min-width:1180px;font-size:11px}th,td{padding:11px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}th{position:sticky;top:0;background:#f8fafc;color:#475467;text-transform:uppercase;letter-spacing:.03em;font-size:9px;z-index:1}th:nth-child(1),th:nth-child(2),td:nth-child(1),td:nth-child(2){text-align:left}td:nth-child(2){max-width:360px;overflow:hidden;text-overflow:ellipsis}tbody tr:hover{background:#f8fbfd}
.rate-good{font-weight:800;color:var(--green)}.rate-mid{font-weight:800;color:var(--orange)}.rate-low{font-weight:800;color:var(--red)}
footer{padding:8px 4px 22px;color:#7a8492;font-size:11px;line-height:1.55}
.loading{position:fixed;inset:0;background:rgba(244,247,251,.70);backdrop-filter:blur(2px);display:none;place-items:center;align-content:center;z-index:50}.loading.show{display:grid}.loading span{width:38px;height:38px;border:4px solid #dce6ee;border-top-color:var(--teal);border-radius:50%;animation:spin .7s linear infinite}.loading p{font-size:12px;color:#475467;font-weight:700}.toast{position:fixed;right:20px;bottom:20px;background:#182230;color:#fff;padding:12px 16px;border-radius:12px;font-size:12px;box-shadow:var(--shadow);opacity:0;transform:translateY(12px);transition:.25s;pointer-events:none}.toast.show{opacity:1;transform:translateY(0)}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:1180px){.kpi-grid,.coverage-grid{grid-template-columns:repeat(2,1fr)}.cross-grid{grid-template-columns:repeat(3,1fr)}.grid-3{grid-template-columns:1fr}.grid-3 .chart-box.compact{height:320px}}
@media(max-width:800px){.app-shell{padding:12px}.hero{padding:28px 22px;display:block}.hero h1{font-size:29px}.hero-badge{display:inline-block;margin-top:18px}.filter-grid,.grid-2{grid-template-columns:1fr}.kpi-grid,.coverage-grid{grid-template-columns:1fr}.cross-grid{grid-template-columns:1fr 1fr}.chart-box{height:280px}}
@media(max-width:520px){.cross-grid{grid-template-columns:1fr}.filter-head,.table-title{align-items:flex-start}.hero h1{font-size:25px}}
