*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, sans-serif;
  background: #f5f5f5;
  color: #1a1a1a;
  min-height: 100vh;
}

/* ── Layout ── */
nav {
  background: #1a1a2e;
  color: #fff;
  padding: 0 2rem;
  height: 56px;
  display: flex;
  align-items: center;
}
nav h1 { font-size: 1.25rem; letter-spacing: 1px; }

/* ── Key manager (nav) ── */
.key-manager { margin-left: auto; position: relative; }

.key-manager-toggle {
  background: rgba(255,255,255,.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 6px;
  padding: .3rem .75rem;
  font-size: .8rem;
  cursor: pointer;
}
.key-manager-toggle:hover { background: rgba(255,255,255,.2); }

.key-manager-panel {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  background: #fff;
  color: #1a1a1a;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
  width: 360px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  z-index: 100;
}

.key-fingerprint {
  font-size: .75rem;
  margin-bottom: .75rem;
  word-break: break-all;
}
.key-fp-label { font-weight: 600; margin-right: .25rem; }

.key-import-label { font-size: .85rem; font-weight: 600; display: block; margin-bottom: .4rem; }

.key-manager-panel textarea {
  width: 100%;
  font-family: monospace;
  font-size: .72rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: .4rem;
  resize: vertical;
}

.key-feedback { font-size: .8rem; margin-top: .4rem; }
.key-feedback.ok  { color: #1a7a1a; }
.key-feedback.err { color: #c00; }

.page { max-width: 900px; margin: 2rem auto; padding: 0 1rem; }

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.page-header h2 { font-size: 1.5rem; }

/* ── Cards ── */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1rem;
}

.card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.card-head {
  padding: .75rem 1rem;
  background: #1a1a2e;
  color: #fff;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.card-head h3 { font-size: 1rem; flex: 1; }
.card-body { padding: 1rem; flex: 1; font-size: .875rem; line-height: 1.6; }
.card-body p { margin-bottom: .25rem; }
.card-actions { padding: .75rem 1rem; display: flex; gap: .5rem; border-top: 1px solid #eee; }

/* ── Detail ── */
.detail { background: #fff; border-radius: 8px; padding: 2rem; box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.detail h2 { margin-bottom: 1rem; }
.detail-section { margin-top: 1.5rem; }
.detail-section h3 { font-size: 1rem; margin-bottom: .75rem; color: #555; text-transform: uppercase; letter-spacing: .05em; font-size: .75rem; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1.5rem; }
.detail-row { display: flex; flex-direction: column; }
.detail-row label { font-size: .75rem; color: #888; }
.detail-row span { font-size: .9rem; }
.candidate-list { list-style: none; }
.candidate-list li { padding: .5rem 0; border-bottom: 1px solid #eee; font-size: .875rem; }
.candidate-list li:last-child { border-bottom: none; }

.organizer-list { list-style: none; }
.organizer-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .5rem 0;
  border-bottom: 1px solid #eee;
  font-size: .875rem;
  flex-wrap: wrap;
}
.organizer-item:last-child { border-bottom: none; }
.organizer-name { font-weight: 600; min-width: 8rem; }
.organizer-key { display: flex; align-items: center; gap: .3rem; flex: 1; }
.organizer-key label { font-size: .7rem; color: #aaa; }
.organizer-key code { font-size: .75rem; background: #eee; padding: .1rem .35rem; border-radius: 4px; }
.organizer-sig { display: flex; align-items: center; }

/* ── Form ── */
.form-card { background: #fff; border-radius: 8px; padding: 2rem; box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.form-card h2 { margin-bottom: 1.5rem; }
.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; font-size: .875rem; font-weight: 500; margin-bottom: .35rem; }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: .5rem .75rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: .9rem;
  font-family: inherit;
  background: #fafafa;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline: none; border-color: #1a1a2e; background: #fff; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.candidate-input {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin-bottom: .5rem;
}
.candidate-input input { flex: 1; }

.form-actions { display: flex; gap: .75rem; margin-top: 1.5rem; }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .9rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  font-size: .875rem;
  cursor: pointer;
  transition: background .15s;
}
.btn:hover { background: #f0f0f0; }
.btn-primary { background: #1a1a2e; color: #fff; border-color: #1a1a2e; }
.btn-primary:hover { background: #2d2d4e; }
.btn-danger { color: #c00; border-color: #fcc; }
.btn-danger:hover { background: #fff0f0; }
.btn-sm { padding: .3rem .6rem; font-size: .8rem; }

/* ── Badges ── */
.badge {
  padding: .2rem .55rem;
  border-radius: 12px;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
}
.badge-draft    { background: #e9e9e9; color: #555; }
.badge-open     { background: #d4edda; color: #155724; }
.badge-closed   { background: #f8d7da; color: #721c24; }
.badge-tallied  { background: #cce5ff; color: #004085; }
.badge-cancelled { background: #fff3cd; color: #856404; }

/* ── Vote Chain ── */
.section-title {
  font-size: .75rem;
  color: #555;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
}

.chain-meta {
  display: flex;
  gap: 1.5rem;
  font-size: .8rem;
  color: #555;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.chain-meta label { color: #888; margin-right: .25rem; }

.block-chain { display: flex; flex-direction: column; gap: 0; }

.chain-scroller {
  height: 500px;
  overflow-y: auto;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  background: #fafafa;
  padding: .5rem .75rem;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}
.chain-scroller::-webkit-scrollbar { width: 6px; }
.chain-scroller::-webkit-scrollbar-track { background: transparent; }
.chain-scroller::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
.chain-scroller::-webkit-scrollbar-thumb:hover { background: #aaa; }

.block-item {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
}

.block-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 16px;
  flex-shrink: 0;
  padding-top: .9rem;
}
.block-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #1a1a2e;
  flex-shrink: 0;
  z-index: 1;
}
.block-line {
  width: 2px;
  flex: 1;
  min-height: 20px;
  background: #ccc;
  order: -1;
}

.block-card {
  flex: 1;
  min-width: 0;
  background: #f9f9fb;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: .75rem 1rem;
  margin-bottom: .75rem;
  font-size: .85rem;
}
.block-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .5rem;
}
.block-index { font-weight: 600; color: #1a1a2e; }
.block-ts    { font-size: .75rem; color: #888; margin-left: auto; }

.block-hashes { display: flex; flex-direction: column; gap: .2rem; }
.hash-row { display: flex; gap: .5rem; align-items: center; }
.hash-row label { font-size: .7rem; color: #aaa; width: 2.5rem; flex-shrink: 0; }
.hash-row code  { font-size: .75rem; color: #444; background: #eee; padding: .1rem .35rem; border-radius: 4px; }

.badge-genesis { background: #e8d5f5; color: #5b1a8e; }

/* ── Voter identity card ── */
.voter-identity-card {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  background: #f0f4ff;
  border: 1px solid #c5d3f5;
  border-radius: 6px;
  padding: .6rem .85rem;
  margin-bottom: .75rem;
  font-size: .85rem;
}
.voter-identity-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #5566aa;
  font-weight: 600;
}
.voter-identity-uid { font-weight: 500; color: #1a1a2e; }
.voter-identity-fp  { font-size: .68rem; color: #778; word-break: break-all; }

/* ── Vote Form ── */
.vote-form-wrap {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e5e5e5;
}
.vote-form-title {
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #555;
  margin-bottom: 1rem;
}
.vote-label {
  display: block;
  font-size: .8rem;
  font-weight: 500;
  color: #444;
  margin-bottom: .5rem;
}
.vote-options { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .75rem; }

.vote-option-card {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem .85rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  background: #fafafa;
  font-size: .875rem;
}
.vote-option-card:hover { border-color: #1a1a2e; background: #f3f3fa; }
.vote-option-card.selected { border-color: #1a1a2e; background: #eef0f8; }
.vote-option-card input[type="radio"],
.vote-option-card input[type="checkbox"] { accent-color: #1a1a2e; }
.vote-option-name { font-weight: 500; flex: 1; }
.vote-option-desc { font-size: .75rem; color: #888; }

.vote-binary-row { display: flex; gap: .75rem; }
.vote-binary-btn { flex: 1; justify-content: center; padding: .65rem; font-size: .9rem; }

.vote-numeric-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem .85rem;
  border: 1px solid #eee;
  border-radius: 8px;
  background: #fafafa;
  font-size: .875rem;
}
.vote-numeric-row .vote-option-name { flex: 1; }
.vote-numeric-label { font-size: .75rem; color: #888; }
.vote-numeric-input { width: 4.5rem; padding: .3rem .5rem; border: 1px solid #ccc; border-radius: 6px; font-size: .875rem; text-align: center; }

.vote-pairwise-row {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .6rem .85rem;
  border: 1px solid #eee;
  border-radius: 8px;
  background: #fafafa;
  margin-bottom: .4rem;
}
.vote-pair-label { font-size: .8rem; font-weight: 500; color: #444; }
.vote-pair-options { display: flex; gap: .5rem; }

.vote-check { display: flex; align-items: center; gap: .4rem; font-size: .875rem; cursor: pointer; }

.vote-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.vote-budget-tracker { font-size: .8rem; font-weight: 600; color: #1a1a2e; background: #eef0f8; border-radius: 99px; padding: .2rem .65rem; }
.vote-budget-zero { color: #c0392b; background: #fdf0ee; }

.vote-hint { font-size: .8rem; color: #888; margin: -.2rem 0 .6rem; line-height: 1.4; }

.vote-score-row { display: flex; align-items: center; gap: .75rem; padding: .45rem .75rem; background: #fafafa; border: 1px solid #e8e8e8; border-radius: 8px; margin-bottom: .3rem; }
.vote-score-row .vote-option-name { flex: 1; }
.vote-score-slider { flex: 2; accent-color: #1a1a2e; cursor: pointer; }
.vote-score-val { min-width: 1.5rem; text-align: center; font-weight: 700; font-size: .95rem; color: #1a1a2e; }

.vote-stepper-row { display: flex; align-items: center; gap: .5rem; padding: .45rem .75rem; background: #fafafa; border: 1px solid #e8e8e8; border-radius: 8px; margin-bottom: .3rem; }
.vote-stepper-row .vote-option-name { flex: 1; }
.vote-stepper-row .vote-option-desc { font-size: .75rem; color: #888; }
.vote-stepper { display: flex; align-items: center; gap: .4rem; }
.vote-stepper-val { min-width: 1.75rem; text-align: center; font-weight: 700; font-size: .95rem; }

.vote-party-group { margin-bottom: .9rem; }
.vote-party-header { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #888; margin-bottom: .35rem; padding: 0 .25rem; }

.vote-option-disabled { opacity: .45; cursor: not-allowed; }

.vote-closed-notice {
  margin-top: 1.25rem;
  padding: .75rem 1rem;
  border-radius: 8px;
  background: #f8f8f8;
  border: 1px solid #e0e0e0;
  color: #666;
  font-size: .875rem;
  text-align: center;
}

/* ── Misc ── */
.empty { color: #888; margin-top: 2rem; text-align: center; }
.error { color: #c00; background: #fff0f0; padding: .75rem 1rem; border-radius: 6px; margin-bottom: 1rem; }
.loading { color: #888; }

/* ── Private badge & form hint ── */
.badge-private { background: #6b7280; color: #fff; }
.form-hint { font-size: .75rem; color: #888; margin: .25rem 0 0; }
.form-label-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .35rem; }
.form-label-row label { margin-bottom: 0; }
.form-doc-link { font-size: .75rem; color: #6366f1; text-decoration: none; white-space: nowrap; }
.form-doc-link:hover { text-decoration: underline; }

/* ── Expandable block card ── */
.block-header--clickable {
  cursor: pointer;
  user-select: none;
}
.block-header--clickable:hover { background: #f5f5f5; border-radius: 6px; }

.block-toggle {
  margin-left: auto;
  font-size: .75rem;
  color: #999;
}

.block-card--open {
  border-color: #6366f1;
}

.block-expanded {
  margin-top: .75rem;
  border-top: 1px solid #eee;
  padding-top: .75rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.block-expanded-group {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.block-expanded-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: baseline;
  gap: .5rem;
  font-size: .8rem;
  overflow: hidden;
}
.block-expanded-row label {
  color: #888;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.hash-full {
  font-size: .7rem;
  word-break: break-all;
  background: #f3f4f6;
  padding: .15rem .35rem;
  border-radius: 4px;
}

.block-payload-label {
  color: #888;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  display: block;
  margin-bottom: .25rem;
}

.block-payload {
  background: #1e1e2e;
  color: #cdd6f4;
  font-size: .72rem;
  line-height: 1.5;
  padding: .75rem 1rem;
  border-radius: 6px;
  overflow-x: auto;
  margin: 0;
  white-space: pre;
}

/* ── Doc viewer ── */
.doc-viewer {
  max-width: 760px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.doc-content { line-height: 1.7; }
.doc-content h1 { font-size: 1.6rem; margin-bottom: 1.25rem; color: #1a1a2e; }
.doc-content h2 { font-size: 1.15rem; font-weight: 600; margin: 1.75rem 0 .6rem; color: #1a1a2e; border-bottom: 1px solid #e5e5e5; padding-bottom: .3rem; }
.doc-content h3 { font-size: 1rem; font-weight: 600; margin: 1.25rem 0 .4rem; }
.doc-content p  { margin-bottom: .85rem; color: #333; }
.doc-content ul, .doc-content ol { margin: .5rem 0 .85rem 1.5rem; }
.doc-content li { margin-bottom: .3rem; }
.doc-content strong { font-weight: 600; }
.doc-content em     { font-style: italic; }
.doc-content code   { background: #f3f4f6; padding: .1rem .35rem; border-radius: 4px; font-size: .85em; }
.doc-content pre    { background: #1e1e2e; color: #cdd6f4; padding: .75rem 1rem; border-radius: 6px; overflow-x: auto; margin-bottom: .85rem; }
.doc-content pre code { background: none; padding: 0; }
.doc-content hr     { border: none; border-top: 1px solid #e5e5e5; margin: 1.5rem 0; }
.doc-content table  { width: 100%; border-collapse: collapse; margin-bottom: 1rem; font-size: .9rem; }
.doc-content th     { background: #f3f4f6; font-weight: 600; text-align: left; padding: .5rem .75rem; border: 1px solid #e5e5e5; }
.doc-content td     { padding: .45rem .75rem; border: 1px solid #e5e5e5; }
.doc-content tr:nth-child(even) td { background: #fafafa; }
.doc-content a      { color: #6366f1; text-decoration: none; }
.doc-content a:hover { text-decoration: underline; }
.doc-content blockquote { border-left: 3px solid #6366f1; padding-left: 1rem; color: #555; margin-bottom: .85rem; }

/* ── Certificate verification banner ─────────────────────────────────────── */
.cert-result { padding: 1rem 1.25rem; border-radius: .5rem; border: 2px solid; margin-bottom: 1.5rem; display: flex; flex-direction: column; gap: .6rem; }
.cert-result--valid   { background: #d4edda; border-color: #28a745; }
.cert-result--invalid { background: #f8d7da; border-color: #dc3545; }
.cert-result-header { display: flex; align-items: center; gap: .75rem; }
.cert-result-header h3 { margin: 0; font-size: 1rem; }
.cert-result-details { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; font-size: .82rem; align-items: baseline; }
.cert-result-details label { font-weight: 600; white-space: nowrap; }
.cert-result-details code  { font-size: .8rem; word-break: break-all; }

/* ── QR code ──────────────────────────────────────────────────────────────── */
.cert-qr { display: flex; justify-content: center; }
.cert-qr svg { width: 220px; height: 220px; border: 1px solid #e5e5e5; border-radius: 6px; padding: 4px; background: #fff; }

/* ── Advanced verifier card ───────────────────────────────────────────────── */
.verifier-card {
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  margin-top: 1.5rem;
  overflow: hidden;
  background: #fafafe;
}
.verifier-card--open { border-color: #6366f1; }

.verifier-card-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem 1rem;
  cursor: pointer;
  user-select: none;
  background: #f5f3ff;
}
.verifier-card-header:hover { background: #ede9fe; }
.verifier-card-icon  { font-size: 1rem; }
.verifier-card-title { font-weight: 600; color: #4338ca; font-size: .9rem; flex: 1; }
.verifier-card-toggle { font-size: .75rem; color: #6366f1; }

.verifier-card-body {
  padding: .75rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

/* ── Inner section cards ──────────────────────────────────────────────────── */
.verifier-section {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  overflow: hidden;
}
.verifier-section--open { border-color: #a5b4fc; }

.verifier-section-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem .85rem;
  cursor: pointer;
  user-select: none;
}
.verifier-section-header:hover { background: #f9f9fb; }
.verifier-section-icon  { font-size: .9rem; }
.verifier-section-title { font-weight: 600; color: #1a1a2e; font-size: .85rem; flex: 1; }
.verifier-toggle        { font-size: .7rem; color: #999; }

.verifier-section-body {
  padding: .75rem .85rem .9rem;
  border-top: 1px solid #eee;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

/* ── Verifier content helpers ─────────────────────────────────────────────── */
.verifier-hint { font-size: .8rem; color: #666; margin: 0; line-height: 1.5; }

.verifier-result { font-size: .85rem; padding: .5rem .75rem; border-radius: 6px; }
.verifier-result--found   { background: #d4edda; color: #155724; }
.verifier-result--missing { background: #f8d7da; color: #721c24; }

.verifier-cert-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* ── Option toggle cards ──────────────────────────────────────────────────── */
.option-cards {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1.25rem;
}

.option-card {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .75rem 1rem;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  background: #fafafa;
  cursor: pointer;
  user-select: none;
  transition: border-color .15s, background .15s;
}
.option-card:hover { background: #f3f4f6; border-color: #c7d2fe; }
.option-card--on   { background: #f5f3ff; border-color: #a5b4fc; }
.option-card--on:hover { background: #ede9fe; }

.option-card-icon  { font-size: 1.15rem; flex-shrink: 0; }

.option-card-text  {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}
.option-card-title { font-size: .875rem; font-weight: 600; color: #1a1a2e; }
.option-card-desc  { font-size: .775rem; color: #666; line-height: 1.4; }
.option-card--on .option-card-title { color: #4338ca; }

/* ── Toggle pill ──────────────────────────────────────────────────────────── */
.toggle-pill {
  width: 2.75rem;
  height: 1.5rem;
  border-radius: 1rem;
  background: #d1d5db;
  position: relative;
  flex-shrink: 0;
  transition: background .2s;
}
.toggle-pill--on { background: #6366f1; }

.toggle-knob {
  position: absolute;
  width: 1.125rem;
  height: 1.125rem;
  background: #fff;
  border-radius: 50%;
  top: .1875rem;
  left: .1875rem;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.toggle-pill--on .toggle-knob { transform: translateX(1.25rem); }

/* ── Election Results ─────────────────────────────────────────────────────── */
.results-card {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e5e5e5;
  margin-top: 1.5rem;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1.25rem;
  background: #f9f9fb;
  border-bottom: 1px solid #eee;
}

.results-total {
  font-size: .8rem;
  color: #555;
  background: #eef0f8;
  padding: .2rem .65rem;
  border-radius: 99px;
}

.results-body {
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.results-method {
  font-size: .78rem;
  color: #666;
  background: #f5f5f5;
  border-radius: 6px;
  padding: .35rem .7rem;
  margin-bottom: .25rem;
  line-height: 1.4;
}

.results-note {
  font-size: .8rem;
  color: #777;
  margin: 0;
}
.results-note--highlight {
  color: #155724;
  background: #d4edda;
  border-radius: 6px;
  padding: .35rem .75rem;
  font-weight: 600;
}

.results-section-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #888;
  margin: .5rem 0 .25rem;
}

/* ── Bar chart rows ── */
.result-row {
  display: grid;
  grid-template-columns: 9rem 1fr 8rem;
  align-items: center;
  gap: .6rem;
  padding: .35rem 0;
}
@media (max-width: 560px) {
  .result-row { grid-template-columns: 1fr; gap: .2rem; }
}

.result-row--winner .result-label { font-weight: 600; color: #1a1a2e; }

.result-label {
  font-size: .85rem;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: .35rem;
}

.result-winner-badge {
  font-size: .65rem;
  padding: .1rem .4rem;
  border-radius: 99px;
  flex-shrink: 0;
}

.result-bar-track {
  height: 14px;
  background: #f0f0f0;
  border-radius: 99px;
  overflow: hidden;
}

.result-bar-fill {
  height: 100%;
  background: #6366f1;
  border-radius: 99px;
  transition: width .4s ease;
  min-width: 2px;
}

.result-row--winner .result-bar-fill { background: #1a1a2e; }

.result-note-col {
  font-size: .78rem;
  color: #555;
  text-align: right;
  white-space: nowrap;
}

/* ── IRV round containers ── */
.results-round {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  margin-top: .5rem;
}

.results-round-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .85rem;
  background: #f9f9fb;
  border-bottom: 1px solid #eee;
}

.results-round-label {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #555;
  flex: 1;
}

.results-round .results-body {
  padding: .6rem .85rem;
  gap: .3rem;
}

.results-round .result-row {
  grid-template-columns: 8rem 1fr 7rem;
}