:root { --bg:#071321; --bg-soft:#0c1d30; --panel:#10263e; --panel-2:#122c47; --line:#25425e; --text:#eef5ff; --muted:#8fa7bd; --blue:#438cf5; --blue-soft:#77adff; --gold:#ffcf36; --mint:#3bd0ae; --red:#ff8090; }
:root[data-theme="light"] { --bg:#eef3f8; --bg-soft:#f7f9fc; --panel:#ffffff; --panel-2:#f4f7fb; --line:#cbd8e5; --text:#17283a; --muted:#61758a; --blue:#1769d5; --blue-soft:#1769d5; --gold:#c38c00; --mint:#168d75; --red:#c83f50; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; min-width:320px; color:var(--text); background:radial-gradient(circle at 12% -4%,#153d68 0,transparent 31rem),radial-gradient(circle at 100% 28%,#132e4b 0,transparent 27rem),var(--bg); font-family:'DM Sans',sans-serif; }
.shell { width:min(1240px,calc(100% - 42px)); margin:0 auto; padding:28px 0 34px; }.app-header { display:flex; justify-content:space-between; align-items:center; padding:0 7px 34px; }.brand { display:flex; align-items:center; gap:16px; }.hdz-logo { width:84px; height:84px; display:block; object-fit:contain; border-radius:12px; box-shadow:0 4px 18px rgba(255,207,54,.16); }.brand-kicker { margin:0 0 2px; color:var(--gold); font-size:10px; text-transform:uppercase; letter-spacing:.16em; font-weight:700; }.app-header h1 { margin:0; font:700 18px Manrope; letter-spacing:-.035em; }.header-tools { display:flex; align-items:center; gap:17px; }.theme-toggle { display:inline-flex; align-items:center; gap:7px; min-height:32px; padding:0 10px; border:1px solid var(--line); border-radius:7px; color:var(--muted); background:transparent; cursor:pointer; font:600 11px 'DM Sans'; }.theme-toggle:hover { color:var(--text); border-color:var(--blue); }.header-meta { color:var(--muted); font-size:12px; }.status-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:7px; background:var(--mint); box-shadow:0 0 0 5px rgba(59,208,174,.1); }.slash { color:#45617c; margin:0 7px; }
.hero { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; padding:25px 8px 42px; }.hero h2 { margin:0; font:800 clamp(38px,6vw,70px)/1 Manrope; letter-spacing:-.065em; }.hero p:not(.eyebrow) { max-width:570px; margin:17px 0 0; color:var(--muted); font-size:16px; line-height:1.6; }.eyebrow { margin:0 0 10px; color:var(--blue-soft); text-transform:uppercase; letter-spacing:.16em; font-size:10px; font-weight:700; }.hero-years { display:flex; gap:8px; padding-bottom:7px; }.hero-years span { padding:9px 10px; border:1px solid var(--line); border-radius:7px; color:#aac5df; font:600 11px Manrope; }.hero-years span:nth-child(3) { color:var(--gold); border-color:rgba(255,207,54,.5); }
.panel { border:1px solid rgba(54,88,119,.65); border-radius:16px; background:linear-gradient(145deg,rgba(18,44,71,.94),rgba(12,31,51,.96)); box-shadow:0 18px 50px rgba(0,0,0,.15); }.filters { padding:25px; margin-bottom:17px; }.section-title,.panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; }.section-title { margin-bottom:20px; }.section-title h2,.panel-head h2 { margin:0; font:700 20px Manrope; letter-spacing:-.04em; }.text-button { border:0; color:var(--blue-soft); background:none; padding:7px 0; cursor:pointer; font:600 12px 'DM Sans'; }.text-button:hover { color:#fff; }.filter-grid { display:grid; grid-template-columns:1fr 1fr 1.35fr; gap:13px; }.field { display:grid; gap:8px; color:var(--muted); font-size:11px; font-weight:700; }.control { width:100%; min-height:45px; border:1px solid var(--line); border-radius:9px; outline:none; padding:0 13px; color:var(--text); background:var(--panel-2); font:500 13px 'DM Sans'; }.control:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(67,140,245,.16); }.control option { color:#122038; background:#fff; }.filter-foot { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-top:17px; color:var(--muted); font-size:11px; }.filter-actions { display:flex; align-items:center; gap:10px; }.secondary-button { display:inline-flex; align-items:center; min-height:37px; border:1px solid rgba(119,173,255,.45); border-radius:8px; padding:0 13px; color:#c5ddff; background:rgba(67,140,245,.08); font:700 12px 'DM Sans'; text-decoration:none; }.secondary-button:hover { background:rgba(67,140,245,.18); border-color:var(--blue); }.ai-button { border:1px solid rgba(255,207,54,.65); border-radius:8px; padding:10px 14px; color:#141e2c; background:var(--gold); font:700 12px 'DM Sans'; cursor:pointer; box-shadow:0 4px 16px rgba(255,207,54,.1); }.ai-button:hover { background:#ffdc64; transform:translateY(-1px); }.scope-line { display:flex; align-items:center; gap:9px; min-height:38px; padding:0 8px; color:var(--text); font:600 13px Manrope; }.scope-marker { width:8px; height:8px; border-radius:50%; background:var(--mint); }.scope-detail { color:var(--muted); font:400 12px 'DM Sans'; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin:0 0 18px; }.stat-card { min-height:125px; padding:20px; border:1px solid rgba(54,88,119,.65); border-radius:14px; background:rgba(16,38,62,.78); }.stat-card.accent { border-color:rgba(67,140,245,.7); background:linear-gradient(145deg,#1a5bad,#123d75); }.stat-label { display:block; color:var(--muted); font-size:11px; font-weight:700; }.accent .stat-label { color:#c8e0ff; }.stat-card strong { display:block; margin-top:14px; font:800 clamp(23px,3vw,31px) Manrope; letter-spacing:-.05em; }.stat-card small { display:block; margin-top:7px; color:var(--muted); font-size:10px; }.accent small { color:#c8e0ff; }
.chart-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:17px; margin-bottom:18px; }.chart-panel { min-width:0; padding:22px; }.chart-panel.wide { grid-column:span 2; }.chart-label { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.12em; }.chart-wrap { position:relative; height:290px; margin-top:21px; }.chart-wrap.tall { height:360px; }.results-panel { padding:23px; margin-bottom:18px; }.table-scroll { overflow-x:auto; margin-top:19px; } table { width:100%; border-collapse:collapse; font-size:12px; } th { padding:0 12px 12px; color:var(--muted); text-align:left; text-transform:uppercase; letter-spacing:.09em; font-size:9px; white-space:nowrap; } td { padding:13px 12px; border-top:1px solid rgba(42,70,94,.65); vertical-align:middle; } td:first-child { min-width:360px; max-width:590px; white-space:normal; line-height:1.4; } td:not(:first-child) { white-space:nowrap; font-variant-numeric:tabular-nums; }.results-table-row--focus { background:rgba(255,207,54,.05); }.badge { display:inline-flex; padding:5px 7px; border-radius:5px; color:#bcebdd; background:rgba(59,208,174,.1); font-size:10px; font-weight:700; }.badge.hdz { color:#ffe789; background:rgba(255,207,54,.12); }.badge.none { color:var(--muted); background:rgba(143,167,189,.1); }
.glossary { padding:19px 23px; margin-bottom:17px; }.glossary summary { display:flex; justify-content:space-between; align-items:center; list-style:none; cursor:pointer; }.glossary summary::-webkit-details-marker { display:none; }.glossary summary strong { font:700 16px Manrope; }.plus { color:var(--blue-soft); font-size:22px; }.glossary-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin-top:23px; padding-top:20px; border-top:1px solid var(--line); }.glossary-grid div { display:grid; gap:5px; }.glossary-grid b { color:#dfeeff; font:600 12px ui-monospace,monospace; }.glossary-grid span { color:var(--muted); font-size:11px; line-height:1.45; } footer { display:flex; justify-content:space-between; padding:4px 8px; color:#6e879f; font-size:10px; }
.modal-backdrop { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:20px; background:rgba(3,10,18,.75); backdrop-filter:blur(8px); }.analysis-modal { position:relative; width:min(650px,100%); max-height:min(720px,90vh); overflow:auto; padding:31px; border:1px solid rgba(67,140,245,.55); border-radius:18px; background:linear-gradient(155deg,#153555,#0c2035); box-shadow:0 25px 80px rgba(0,0,0,.4); }.analysis-modal h2 { margin:0; font:800 30px Manrope; letter-spacing:-.05em; }.modal-scope { margin:9px 0 25px; color:var(--muted); font-size:12px; }.close-button { position:absolute; top:14px; right:17px; border:0; color:var(--muted); background:none; font-size:28px; cursor:pointer; }.analysis-body { color:#d9e8f7; line-height:1.7; font-size:14px; }.analysis-body .analysis-point { padding:14px 0; border-top:1px solid rgba(70,105,136,.5); }.analysis-body b { color:#fff; }.modal-close { margin-top:23px; } [hidden] { display:none !important; }
@media (max-width:850px) { .shell { width:min(100% - 24px,650px); }.hero { display:block; }.hero-years { margin-top:24px; }.filter-grid,.stats { grid-template-columns:1fr 1fr; }.list-field { grid-column:1/-1; }.chart-grid { grid-template-columns:1fr; }.chart-panel.wide { grid-column:auto; }.glossary-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:520px) { .shell { padding-top:18px; }.app-header { padding-bottom:20px; }.hdz-logo { width:64px; height:64px; }.brand { gap:10px; }.header-meta { display:none; }.hero { padding:18px 5px 31px; }.hero h2 { font-size:40px; }.filters,.chart-panel,.results-panel { padding:18px; }.filter-grid,.stats { grid-template-columns:1fr; }.list-field { grid-column:auto; }.filter-foot,.panel-head,footer { display:block; }.filter-actions { flex-wrap:wrap; margin-top:13px; }.chart-wrap { height:250px; }.chart-wrap.tall { height:330px; }.glossary-grid { grid-template-columns:1fr; }.scope-detail { display:block; margin-left:17px; margin-top:4px; }.scope-line { display:block; padding:10px 8px; }.scope-marker { display:inline-block; margin-right:5px; }.stat-card { min-height:112px; } }
.simulator-hero { padding-bottom:31px; }.simulator-controls { padding:24px; margin-bottom:8px; }.simulator-info { display:flex; align-items:center; gap:8px; align-self:end; min-height:45px; color:var(--muted); font-size:12px; }.simulation-summary { display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px 24px; padding:24px; margin:17px 0; border-color:rgba(255,207,54,.35); }.simulation-summary h2 { margin:0; font:700 22px Manrope; }.hdz-gap { color:var(--gold); font:800 30px Manrope; letter-spacing:-.05em; text-align:right; }.summary-note { grid-column:1/-1; margin:0; color:var(--muted); font-size:12px; }.sim-table td:first-child { min-width:380px; }.sim-table small { color:var(--muted); text-transform:none; letter-spacing:0; font-size:9px; }.vote-input { width:120px; min-height:35px; border:1px solid var(--line); border-radius:7px; padding:0 9px; color:var(--text); background:#091b2d; font:600 12px 'DM Sans'; }.vote-input:focus { border-color:var(--blue); outline:none; box-shadow:0 0 0 3px rgba(67,140,245,.15); }.party-swatch { display:inline-block; width:8px; height:8px; margin-right:7px; border-radius:50%; vertical-align:middle; }.delta { color:var(--muted); }.delta.positive { color:var(--mint); font-weight:700; }.delta.negative { color:var(--red); font-weight:700; }.dhondt-explain { padding:19px 23px; }.dhondt-explain summary { display:flex; justify-content:space-between; align-items:center; list-style:none; cursor:pointer; }.dhondt-explain summary::-webkit-details-marker { display:none; }.dhondt-explain summary strong { font:700 16px Manrope; }.dhondt-explain p { max-width:800px; margin:20px 0 0; color:var(--muted); font-size:12px; line-height:1.65; }
.vote-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 24px; margin-top:18px; padding-top:16px; border-top:1px solid rgba(42,70,94,.65); }.vote-detail { display:grid; grid-template-columns:22px 8px minmax(0,1fr) auto; align-items:center; gap:7px; min-width:0; color:#d9e8f7; font-size:12px; }.vote-detail strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.vote-rank { color:var(--muted); font:700 12px Manrope; }.vote-detail-value { color:#fff; font:700 13px Manrope; white-space:nowrap; }
:root[data-theme="light"] body { background:radial-gradient(circle at 12% -4%,#d7e8fa 0,transparent 31rem),#eef3f8; }.theme-toggle span:first-child { color:var(--gold); font-size:15px; }.theme-toggle[aria-pressed="true"] span:first-child { color:var(--blue); }.secondary-button { color:var(--blue-soft); }
:root[data-theme="light"] .panel { border-color:#cbd8e5; background:linear-gradient(145deg,#ffffff,#f7faff); box-shadow:0 15px 40px rgba(35,67,98,.10); }
:root[data-theme="light"] .stat-card { border-color:#cbd8e5; background:#ffffff; }.stat-card.accent { border-color:#1769d5; background:linear-gradient(145deg,#2f7de1,#1656ad); }.stat-card.accent .stat-label,.stat-card.accent small { color:#d9ebff; }
:root[data-theme="light"] .control,:root[data-theme="light"] .vote-input { color:#17283a; background:#ffffff; border-color:#b9cada; }.control::placeholder { color:#8295a8; }
:root[data-theme="light"] .secondary-button { color:#1769d5; background:#eef5ff; border-color:#a9c7ed; }
:root[data-theme="light"] .table-scroll tr:hover { background:#eef5ff; }.results-table-row--focus { background:rgba(255,207,54,.08); }
:root[data-theme="light"] .analysis-modal { border-color:#a9c7ed; background:linear-gradient(155deg,#ffffff,#f2f7fd); box-shadow:0 25px 80px rgba(35,67,98,.28); }.analysis-modal .analysis-body { color:#304b63; }.analysis-modal .analysis-body b { color:#17283a; }
:root[data-theme="light"] .vote-detail { color:#203448; }.vote-detail-value { color:var(--text); }