:root {
  --navy: #072c4c;
  --blue: #007bbd;
  --ink: #102536;
  --muted: #455d6c;
  --paper: #f5f8fa;
  --line: #dce5ea;
  --leader-left: rgba(222, 45, 45, .42);
  --leader-right: rgba(25, 112, 190, .44);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  isolation: isolate;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse 75% 50% at 50% -8%, rgba(0,123,189,.17), transparent 72%);
}
body[data-leading-bloc="left"]::before {
  opacity: 1;
  background: radial-gradient(ellipse 105% 82% at 8% -2%, var(--leader-left), rgba(222,45,45,.16) 43%, transparent 76%);
}
body[data-leading-bloc="right"]::before {
  opacity: 1;
  background: radial-gradient(ellipse 105% 82% at 92% -2%, var(--leader-right), rgba(25,112,190,.17) 43%, transparent 76%);
}
body[data-leading-bloc="tie"]::before { opacity: .65; }
main { position: relative; max-width: 930px; margin: auto; padding: 4rem 2rem 2.5rem; }
header { border-bottom: 1px solid var(--line); padding-bottom: 2rem; }
.eyebrow { margin: 0 0 .65rem; color: var(--blue); font-weight: 800; font-size: .76rem; letter-spacing: .11em; }
.headline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.display-controls { display: flex; align-items: center; gap: .55rem; }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(2.3rem, 7vw, 4.5rem); line-height: 1; color: var(--navy); letter-spacing: -.055em; }
h1 span { color: var(--blue); }
.live { border-radius: 999px; background: #dceff9; color: #006ba5; padding: .35rem .75rem; font-size: .75rem; font-weight: 800; letter-spacing: .08em; }
.theme-toggle {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  padding: .4rem .75rem;
  font: inherit;
  font-size: .78rem;
  font-weight: 750;
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--blue); }
.progress-wrap { margin-top: 2rem; }
.progress-label, .section-heading p, footer { color: var(--muted); font-size: .88rem; }
.progress-label {
  display: inline-block;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: .45rem;
  padding: .34rem .58rem;
  font-weight: 750;
}
.track { height: 7px; margin-top: .65rem; background: #dce5ea; border-radius: 10px; overflow: hidden; }
.track i { display: block; height: 100%; width: 0; background: var(--blue); }
.blocs, .results { margin-top: 2.7rem; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 2px solid var(--navy); padding-bottom: .7rem; }
.section-heading h2 { font-size: 1.1rem; letter-spacing: .01em; }
.bloc-labels { display: flex; justify-content: space-between; margin: .9rem 0 .5rem; }
.bloc-labels div { display: flex; align-items: baseline; gap: .55rem; }
.bloc-labels div:last-child { flex-direction: row-reverse; }
.bloc-labels small { color: var(--muted); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.bloc-labels strong { font-size: 1.7rem; letter-spacing: -.04em; }
.bloc-labels span { color: var(--muted); font-size: .88rem; font-weight: 700; }
.bloc-meter { display: flex; position: relative; height: 24px; border-radius: 4px; overflow: hidden; background: #dce5ea; }
.bloc-meter i { display: block; height: 100%; }
.bloc-meter #left-meter { background: #d94242; }
.bloc-meter #right-meter { background: #2476b8; }
.bloc-meter .middle { position: absolute; left: 50%; top: -3px; height: 30px; border-left: 2px solid white; }
.bloc-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: .65rem; }
.bloc-parties > div { display: flex; align-items: center; gap: .65rem; }
.bloc-parties > div:last-child { justify-content: flex-end; }
.bloc-parties span { display: inline-flex; align-items: center; gap: .3rem; color: var(--ink); font-size: .82rem; font-weight: 850; }
.bloc-parties span i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--chip-color); }
.bloc-parties span.below-threshold { opacity: .45; text-decoration: line-through; cursor: help; }
.party-slices { display: flex; width: 100%; height: 1.25rem; margin-top: .55rem; overflow: hidden; border-radius: 999px; background: var(--line); }
.party-slices > i { display: flex; align-items: center; justify-content: center; min-width: 2px; overflow: hidden; border-right: 2px solid var(--paper); font-style: normal; }
.party-slices > i:last-child { border-right: 0; }
.party-slices span { color: white; font-size: .62rem; font-weight: 900; line-height: 1; text-shadow: 0 1px 3px rgba(0,0,0,.72); }
.party {
  display: grid;
  grid-template-columns: 3rem minmax(13.5rem, 1.35fr) minmax(8rem, 1fr) minmax(9.5rem, auto);
  align-items: center;
  gap: .8rem;
  border-bottom: 1px solid var(--line);
  padding: 1rem .15rem;
}
.party-id { font-weight: 850; font-size: 1.45rem; color: var(--party-color, var(--navy)); }
.party-name { font-weight: 650; }
.party-name small { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; color: var(--muted); font-size: .78rem; font-weight: 500; margin-top: .3rem; }
.bar { height: 13px; position: relative; border-radius: 2px; background: #e0e8ed; overflow: visible; }
.bar i { display: block; width: var(--party); height: 100%; background: var(--party-color, var(--blue)); }
.threshold { position: absolute; left: 4%; top: -3px; height: 19px; border-left: 1px dashed #587080; }
.percent { display: flex; justify-content: flex-end; align-items: center; gap: .45rem; white-space: nowrap; font-weight: 850; font-size: 1.35rem; letter-spacing: -.04em; }
.percent small { font-size: .8rem; margin-left: 1px; }
.change-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: .16rem .48rem;
  font-size: .72rem;
  line-height: 1.15;
  font-weight: 850;
}
.change-badge.up { color: #126634; background: #d9f2e2; }
.change-badge.down { color: #9b2020; background: #f9dddd; }
.change-badge.flat { color: var(--muted); background: var(--line); }
.empty { padding: 2rem 0; color: var(--muted); }
footer { border-top: 1px solid var(--line); margin-top: 3.5rem; padding-top: 1rem; }

body[data-theme="dark"] {
  --navy: #e4f1fa;
  --blue: #42b5ef;
  --ink: #edf4f8;
  --muted: #b4c4ce;
  --paper: #07131e;
  --line: #29404f;
  color-scheme: dark;
}
body[data-theme="dark"]::before { opacity: .9; }
body[data-theme="dark"][data-leading-bloc="left"]::before {
  background: radial-gradient(ellipse 105% 82% at 8% -2%, rgba(198,39,52,.38), rgba(126,27,38,.18) 45%, transparent 76%);
}
body[data-theme="dark"][data-leading-bloc="right"]::before {
  background: radial-gradient(ellipse 105% 82% at 92% -2%, rgba(24,108,184,.42), rgba(17,72,120,.2) 45%, transparent 76%);
}
body[data-theme="dark"] .track,
body[data-theme="dark"] .bar { background: #1b2d39; }
body[data-theme="dark"] .live { background: #12364b; color: #7fd3fb; }
body[data-theme="dark"] .theme-toggle { background: #0a1b28; }
body[data-theme="dark"] .progress-label { background: #07131e; }
body[data-theme="dark"] .change-badge.up { color: #9be9b7; background: #123e27; }
body[data-theme="dark"] .change-badge.down { color: #ffadad; background: #4b2025; }

@media (max-width: 620px) {
  main { padding: 2.4rem 1rem; }
  .display-controls { width: 100%; justify-content: space-between; }
  .headline { align-items: flex-start; flex-direction: column; }
  .party { grid-template-columns: 2.2rem minmax(0, 1fr) minmax(8.5rem, auto); gap: .7rem; }
  .bar { grid-column: 2 / 4; grid-row: 2; }
  .section-heading { gap: 1rem; }
  .section-heading p { text-align: right; }
  .bloc-labels strong { font-size: 1.35rem; }
  .bloc-labels div { flex-wrap: wrap; }
  .bloc-labels small { flex-basis: 100%; font-size: .72rem; }
  .bloc-labels div:last-child small { text-align: right; }
  .bloc-parties > div { gap: .4rem; }
  .bloc-parties span { font-size: .72rem; }
  .bloc-parties span i { width: .42rem; height: .42rem; }
  .party-slices span { font-size: .55rem; }
}