:root{--wine:#ed3030;--wine-dark:#a91616;--red:#ed3030;--pink:#fbdada;--ink:#221b20;--muted:#6c6268;--line:#f0d6d6;--paper:#fff;--wash:#fff8f8}
*{box-sizing:border-box}
html{font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:transparent}
body{margin:0;background:var(--wash)}
button{font:inherit}
.shell{max-width:1280px;margin:auto;padding:clamp(16px,3vw,36px)}
.topbar{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:22px}
.eyebrow{margin:0 0 5px;color:var(--wine);font-size:.82rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
h1{max-width:780px;margin:0;color:var(--wine);font-size:clamp(1.65rem,3vw,2.6rem);line-height:1.05;letter-spacing:-.035em}
.status{flex:none;border:1px solid #f1b1b1;border-radius:999px;padding:8px 12px;background:#fff;font-size:.86rem;font-weight:700;color:var(--wine-dark)}
.status span{display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:#e69a19}
.workspace{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,.75fr);gap:18px;align-items:stretch}
.map-card,.panel{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--paper);box-shadow:0 12px 35px rgba(68,19,39,.08)}
.map-toolbar{position:absolute;z-index:4;left:16px;right:16px;top:14px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.map-toolbar p{margin:0;padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.93);box-shadow:0 3px 14px rgba(38,12,24,.12);font-size:.84rem;font-weight:700;color:var(--wine-dark)}
.map-toolbar button{pointer-events:auto;border:0;border-radius:999px;padding:8px 11px;color:#fff;background:var(--wine);cursor:pointer}
.map{height:min(73vh,760px);min-height:520px;padding:48px 22px 50px;display:grid;place-items:center}
.map svg{display:block;width:100%;height:100%;max-height:660px;overflow:visible}
.map svg g[id]{cursor:pointer;outline:none;transform-box:fill-box;transform-origin:center;transition:transform .24s cubic-bezier(.2,.75,.25,1)}
.map svg g[id] path{transition:fill .16s ease,filter .16s ease,opacity .16s ease;stroke:var(--wine-dark);stroke-width:1.35px;vector-effect:non-scaling-stroke}
.map svg:hover g[id]:not(:hover) path{opacity:.72}
.map svg:hover g.is-selected:not(:hover) path{opacity:1}
.map svg g[id]:hover path,.map svg g[id]:focus path{filter:brightness(.91);stroke:#6f0f0f;stroke-width:2.2px}
.map svg g.is-selected{transform:scale(1.16)}
.map svg g.is-selected path{fill:#ed3030!important;filter:drop-shadow(0 5px 7px rgba(73,8,8,.38));stroke:#fff;stroke-width:3px}
.map svg .centre-trigger{fill:transparent;pointer-events:all;cursor:zoom-in}
.tooltip{position:fixed;z-index:20;max-width:260px;padding:9px 11px;border-radius:10px;background:var(--wine-dark);color:#fff;box-shadow:0 8px 25px rgba(0,0,0,.28);font-size:.85rem;line-height:1.35;pointer-events:none}
.tooltip strong{display:block;font-size:.94rem}.tooltip span{color:#fbdada}
.legend{position:absolute;left:20px;bottom:16px;right:20px;display:flex;align-items:center;justify-content:center;gap:5px;color:var(--muted);font-size:.72rem}
.legend i{width:27px;height:10px;border-radius:2px}.legend i:nth-of-type(1){background:#fbdada}.legend i:nth-of-type(2){background:#f7a6a6}.legend i:nth-of-type(3){background:#f27171}.legend i:nth-of-type(4){background:#ed3030}.legend i:nth-of-type(5){background:#a91616}
.panel{min-height:520px;padding:clamp(22px,3vw,34px);display:flex;flex-direction:column}
.panel-empty{margin:auto 0}.v-mark{display:grid;place-items:center;width:54px;height:54px;border-radius:14px;background:var(--wine);color:#fff;font-size:1.8rem;font-weight:900}
.panel h2{margin:18px 0 7px;color:var(--wine);font-size:clamp(1.35rem,2vw,1.85rem);line-height:1.1}.panel p{color:var(--muted);line-height:1.5}
.result-hero{padding-bottom:22px;border-bottom:1px solid var(--line)}
.district-code{margin:0 0 7px!important;color:var(--wine)!important;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.big-number{display:flex;align-items:baseline;gap:7px;margin-top:18px;color:var(--wine)}.big-number strong{font-size:clamp(2.8rem,5vw,4.6rem);letter-spacing:-.06em}.big-number span{font-size:1.2rem;font-weight:800}
.votes{margin:0!important;color:var(--ink)!important;font-weight:700}
.comparison{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}
.metric{padding:14px;border-radius:12px;background:var(--wash)}.metric span{display:block;color:var(--muted);font-size:.76rem;font-weight:700;text-transform:uppercase}.metric strong{display:block;margin-top:5px;font-size:1.3rem}
.change{padding:14px;border-radius:12px;background:#f4e8ed}.change.positive strong{color:#8c1649}.change.negative strong{color:#555}.change strong{display:block;margin-top:4px;font-size:1.35rem}
.note{margin-top:auto!important;padding-top:20px;font-size:.8rem}
footer{display:flex;justify-content:space-between;gap:24px;margin-top:15px;color:var(--muted);font-size:.75rem;line-height:1.4}footer p{margin:0;max-width:600px}
@media(max-width:760px){.shell{padding:12px}.topbar{align-items:flex-start;flex-direction:column}.workspace{grid-template-columns:1fr}.map{height:62vh;min-height:460px;padding-inline:10px}.panel{min-height:0}.panel-empty{margin:5px 0 12px}.tooltip{display:none!important}footer{flex-direction:column;gap:5px}.legend span{font-size:.65rem}}
@media(prefers-reduced-motion:reduce){.map svg g[id],.map svg g[id] path{transition:none}}