/* ── Theme tokens ────────────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;
  --bg:          #0d0d1a;
  --surface:     #1a1a2e;
  --surface-2:   #21213a;
  --surface-3:   #1e1e36;
  --surface-alt: #252542;
  --input-bg:    #1c1c32;
  --border:      #2e2e50;
  --border-light:#252545;
  --text:        #e6e6f0;
  --text-2:      #b8b8cc;
  --text-3:      #a0a0bc;
  --text-4:      #8888a8;
  --text-5:      #707090;
  --code-bg:     #252540;
  --primary:     #4338ca;
  --primary-fg:  #fff;
  --primary-hover: #3730a3;
  --accent:      #6366f1;
  --link:        #818cf8;
  --primary-text: #818cf8;
  --success-text: #4ade80;
  --success-bg:   #14532d;
  --info-bg:      #1e2840;
  --info-border:  #2a3a5e;
  --warning-bg:   #2d2008;
  --warning-border: #4d3800;
  --warning-text: #fcd34d;
  --error-bg:     rgba(239,68,68,.12);
}

[data-theme="light"] {
  color-scheme: light;
  --bg:          #f5f5f5;
  --surface:     #fff;
  --surface-2:   #fafafa;
  --surface-3:   #f9f9fb;
  --surface-alt: #f3f4f6;
  --input-bg:    #fafafa;
  --border:      #ddd;
  --border-light:#eee;
  --text:        #1a1a1a;
  --text-2:      #333;
  --text-3:      #555;
  --text-4:      #888;
  --text-5:      #aaa;
  --code-bg:     #f3f4f6;
  --primary:     #1a1a2e;
  --primary-fg:  #fff;
  --primary-hover: #2d2d4e;
  --accent:      #6366f1;
  --link:        #6366f1;
  --primary-text: #4338ca;
  --success-text: #155724;
  --success-bg:   #d4edda;
  --info-bg:      #f0f4ff;
  --info-border:  #c5d3ff;
  --warning-bg:   #fffbe6;
  --warning-border: #ffe58f;
  --warning-text: #614700;
  --error-bg:     #fff0f0;
}

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

body {
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* ── Layout ── */
nav {
  background: linear-gradient(to right, #c14a3e, #1a1a2e);
  color: #fff;
  padding: 0 2rem;
  height: 56px;
  display: flex;
  align-items: center;
}
.nav-logo-wrap { position: relative; display: inline-flex; align-items: center; }
.nav-logo { height: 48px; width: auto; display: block; }
.nav-version {
  position: absolute;
  bottom: 2px;
  right: 0;
  font-size: .55rem;
  color: rgba(255,255,255,.7);
  background: rgba(0,0,0,.35);
  border-radius: 3px;
  padding: 0 .25rem;
  line-height: 1.4;
  pointer-events: none;
}
.nav-source-link {
  color: rgba(255,255,255,.75);
  font-size: .8rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-left: .75rem;
}
.nav-source-link:hover { color: #fff; }

/* ── 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); }

.theme-toggle {
  background: rgba(255,255,255,.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 6px;
  padding: .3rem .6rem;
  font-size: 1rem;
  cursor: pointer;
  margin-left: .5rem;
  line-height: 1;
}
.theme-toggle:hover { background: rgba(255,255,255,.2); }

.key-manager-panel {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  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-copy-btn { margin-bottom: .75rem; }

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

.key-name-row { margin-bottom: .75rem; }
.key-name-row-inner { display: flex; gap: .5rem; align-items: center; }
.key-name-input { flex: 1; padding: .35rem .5rem; border: 1px solid var(--border); border-radius: 4px; font-size: .85rem; box-sizing: border-box; }

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

.key-feedback { font-size: .8rem; margin-top: .4rem; }
.key-feedback.ok  { color: var(--success-text); }
.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; }

.tz-label { font-size: .75rem; color: var(--text-4); margin-left: .35rem; }
.form-tz-hint { font-size: .8rem; color: var(--text-4); margin-top: -.5rem; margin-bottom: 1rem; }

.list-search-row { margin-bottom: 1.25rem; }
.list-search-input {
  width: 100%;
  padding: .5rem .75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: .95rem;
  background: var(--surface);
}
.list-search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(99,102,241,.15); }

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

.card {
  background: var(--surface);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.card--clickable { cursor: pointer; transition: box-shadow .15s, transform .15s; }
.card--clickable:hover { box-shadow: 0 4px 16px rgba(192,57,43,.25); transform: translateY(-2px); }
.card-head {
  padding: .75rem 1rem;
  background: linear-gradient(to right, #c0392b, #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 var(--border-light); }

/* ── Detail ── */
.detail { background: var(--surface); 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: var(--text-3); 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: var(--text-4); }
.detail-row span { font-size: .9rem; }
.candidate-list { list-style: none; }
.candidate-list li { padding: .5rem 0; border-bottom: 1px solid var(--border-light); 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 var(--border-light);
  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: var(--text-5); }
.organizer-key code { font-size: .75rem; background: var(--code-bg); padding: .1rem .35rem; border-radius: 4px; }
.organizer-sig { display: flex; align-items: center; }

/* ── Form ── */
.form-card { background: var(--surface); 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 var(--border);
  border-radius: 6px;
  font-size: .9rem;
  font-family: inherit;
  background: var(--input-bg);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.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; }
.party-cand-rank { font-size: .8rem; color: var(--text-4); min-width: 1.5rem; text-align: right; }

.party-section {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .75rem 1rem;
  margin-bottom: .75rem;
  background: var(--surface-2);
}
.party-header {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin-bottom: .6rem;
}
.party-header input { flex: 1; font-weight: 600; }
.party-candidates { padding-left: .5rem; }
/* ── Party group — election detail ── */
.party-list-detail { display: flex; flex-direction: column; gap: .75rem; }
.party-group {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.party-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem .75rem;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
}
.party-group-header strong { font-size: .9rem; }
.party-group-count { font-size: .75rem; color: var(--text-4); }
.party-candidate-list {
  list-style: decimal;
  margin: 0;
  padding: .5rem .75rem .5rem 2rem;
}
.party-candidate-list li {
  padding: .2rem 0;
  font-size: .875rem;
}

/* ── Party section — form ── */
.party-cands-label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-4);
  margin-bottom: .4rem;
}

.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 var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: .875rem;
  cursor: pointer;
  transition: background .15s;
}
.btn:hover { background: var(--surface-alt); }
.btn-primary { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-danger { color: #c00; border-color: #fcc; }
.btn-danger:hover { background: var(--error-bg); }
.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-landed   { background: #d0e8ff; color: #004085; }
.badge-open     { background: #d4edda; color: #155724; }
.badge-closing  { background: #fff3cd; color: #856404; }
.badge-closed   { background: #f8d7da; color: #721c24; }
.badge-tallied  { background: #cce5ff; color: #004085; }
.badge-cancelled { background: #fff3cd; color: #856404; }

.voter-list-panel {
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}
.voter-list-textarea {
  width: 100%;
  font-family: monospace;
  font-size: .85rem;
  resize: vertical;
  box-sizing: border-box;
}
.voter-list-count { font-size: .8rem; color: #6c63ff; font-weight: 600; }

.invite-panel {
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-radius: 10px;
}
.invite-panel-actions { display: flex; gap: .75rem; align-items: center; margin-top: .75rem; flex-wrap: wrap; }

.next-step-banner {
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.next-step-banner strong { font-size: .9rem; color: var(--warning-text); }
.next-step-banner p { margin: 0; font-size: .85rem; color: var(--warning-text); }
.results-lock-bar { height: 6px; border-radius: 3px; background: var(--warning-border); overflow: hidden; }
.results-lock-bar-fill { height: 100%; border-radius: 3px; background: #faad14; transition: width .3s; }

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

.chain-meta {
  display: flex;
  gap: 1.5rem;
  font-size: .8rem;
  color: var(--text-3);
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.chain-meta label { color: var(--text-4); margin-right: .25rem; }

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

.chain-scroller {
  height: 500px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  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: var(--primary);
  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: var(--surface-3);
  border: 1px solid var(--border);
  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: var(--primary-text); }
.block-ts    { font-size: .75rem; color: var(--text-4); 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: var(--text-5); width: 2.5rem; flex-shrink: 0; }
.hash-row code  { font-size: .75rem; color: var(--text-2); background: var(--code-bg); 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: var(--info-bg);
  border: 1px solid var(--info-border);
  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: var(--primary-text);
  font-weight: 600;
}
.voter-identity-uid { font-weight: 500; color: var(--primary-text); }
.voter-identity-fp  { font-size: .68rem; color: var(--text-4); word-break: break-all; }

/* ── Vote Form ── */
.vote-form-wrap {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.vote-form-title {
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-3);
  margin-bottom: 1rem;
}
.vote-label {
  display: block;
  font-size: .8rem;
  font-weight: 500;
  color: var(--text-2);
  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 var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  background: var(--input-bg);
  font-size: .875rem;
}
.vote-option-card:hover { border-color: var(--primary); background: var(--surface-2); }
.vote-option-card.selected { border-color: var(--primary); background: var(--surface-alt); }
.vote-option-card input[type="radio"],
.vote-option-card input[type="checkbox"] { accent-color: var(--accent); }
.vote-option-name { font-weight: 500; flex: 1; }
.vote-option-desc { font-size: .75rem; color: var(--text-4); }

.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 var(--border-light);
  border-radius: 8px;
  background: var(--input-bg);
  font-size: .875rem;
}
.vote-numeric-row .vote-option-name { flex: 1; }
.vote-numeric-label { font-size: .75rem; color: var(--text-4); }
.vote-numeric-input { width: 4.5rem; padding: .3rem .5rem; border: 1px solid var(--border); 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 var(--border-light);
  border-radius: 8px;
  background: var(--input-bg);
  margin-bottom: .4rem;
}
.vote-pair-label { font-size: .8rem; font-weight: 500; color: var(--text-2); }
.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: var(--primary); background: var(--surface-alt); border-radius: 99px; padding: .2rem .65rem; }
.vote-budget-zero { color: #c0392b; background: var(--error-bg); }

.vote-hint { font-size: .8rem; color: var(--text-4); margin: -.2rem 0 .6rem; line-height: 1.4; }

.vote-score-row { display: flex; align-items: center; gap: .75rem; padding: .45rem .75rem; background: var(--input-bg); 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: var(--accent); cursor: pointer; }
.vote-score-val { min-width: 1.5rem; text-align: center; font-weight: 700; font-size: .95rem; color: var(--primary-text); }

.vote-stepper-row { display: flex; align-items: center; gap: .5rem; padding: .45rem .75rem; background: var(--input-bg); 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: var(--text-4); }
.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: var(--text-4); 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: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-3);
  font-size: .875rem;
  text-align: center;
}

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

/* ── Private badge & form hint ── */
.badge-private { background: #6b7280; color: #fff; }
.form-hint { font-size: .75rem; color: var(--text-4); 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: var(--link); 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: var(--surface-alt); border-radius: 6px; }

.block-toggle {
  margin-left: auto;
  font-size: .75rem;
  color: var(--text-5);
}

.block-card--open {
  border-color: var(--accent);
}

.block-expanded {
  margin-top: .75rem;
  border-top: 1px solid var(--border-light);
  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: var(--text-4);
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.hash-full {
  font-size: .7rem;
  word-break: break-all;
  background: var(--code-bg);
  padding: .15rem .35rem;
  border-radius: 4px;
}

.block-payload-label {
  color: var(--text-4);
  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: var(--primary-text); }
.doc-content h2 { font-size: 1.15rem; font-weight: 600; margin: 1.75rem 0 .6rem; color: var(--primary-text); border-bottom: 1px solid var(--border); padding-bottom: .3rem; }
.doc-content h3 { font-size: 1rem; font-weight: 600; margin: 1.25rem 0 .4rem; }
.doc-content p  { margin-bottom: .85rem; color: var(--text-2); }
.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: var(--code-bg); 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 var(--border); margin: 1.5rem 0; }
.doc-content table  { width: 100%; border-collapse: collapse; margin-bottom: 1rem; font-size: .9rem; }
.doc-content th     { background: var(--code-bg); font-weight: 600; text-align: left; padding: .5rem .75rem; border: 1px solid var(--border); }
.doc-content td     { padding: .45rem .75rem; border: 1px solid var(--border); }
.doc-content tr:nth-child(even) td { background: var(--surface-2); }
.doc-content a      { color: var(--link); text-decoration: none; }
.doc-content a:hover { text-decoration: underline; }
.doc-content blockquote { border-left: 3px solid var(--accent); padding-left: 1rem; color: var(--text-3); 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 var(--border); border-radius: 6px; padding: 4px; background: var(--surface); }

/* ── Advanced verifier card ───────────────────────────────────────────────── */
.verifier-card {
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  margin-top: 1.5rem;
  overflow: hidden;
  background: var(--surface-2);
}
.verifier-card--open { border-color: var(--accent); }

.verifier-card-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem 1rem;
  cursor: pointer;
  user-select: none;
  background: var(--surface-3);
}
.verifier-card-header:hover { background: var(--surface-alt); }
.verifier-card-icon  { font-size: 1rem; }
.verifier-card-title { font-weight: 600; color: var(--primary-text); font-size: .9rem; flex: 1; }
.verifier-card-toggle { font-size: .75rem; color: var(--accent); }

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

/* ── Inner section cards ──────────────────────────────────────────────────── */
.verifier-section {
  background: var(--surface);
  border: 1px solid var(--border);
  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: var(--surface-3); }
.verifier-section-icon  { font-size: .9rem; }
.verifier-section-title { font-weight: 600; color: var(--primary-text); font-size: .85rem; flex: 1; }
.verifier-toggle        { font-size: .7rem; color: var(--text-5); }

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

/* ── Verifier content helpers ─────────────────────────────────────────────── */
.verifier-hint { font-size: .8rem; color: var(--text-3); margin: 0; line-height: 1.5; }

.verifier-result { font-size: .85rem; padding: .5rem .75rem; border-radius: 6px; }
.verifier-result--found   { background: var(--success-bg); color: var(--success-text); }
.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 var(--border);
  border-radius: 8px;
  background: var(--input-bg);
  cursor: pointer;
  user-select: none;
  transition: border-color .15s, background .15s;
}
.option-card:hover { background: var(--surface-alt); 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: var(--primary-text); }
.option-card-desc  { font-size: .775rem; color: var(--text-3); line-height: 1.4; }
.option-card--on .option-card-title { color: var(--primary-text); }

/* ── 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: var(--accent); }

.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: var(--surface);
  border-radius: 8px;
  border: 1px solid var(--border);
  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: var(--surface-3);
  border-bottom: 1px solid var(--border-light);
}

.results-total {
  font-size: .8rem;
  color: var(--text-3);
  background: var(--surface-alt);
  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: var(--text-3);
  background: var(--surface-alt);
  border-radius: 6px;
  padding: .35rem .7rem;
  margin-bottom: .25rem;
  line-height: 1.4;
}

.results-note {
  font-size: .8rem;
  color: var(--text-3);
  margin: 0;
}
.results-note--highlight {
  color: var(--success-text);
  background: var(--success-bg);
  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: var(--text-4);
  margin: .5rem 0 .25rem;
}

/* ── PR elected candidates list ── */
.results-elected-list {
  list-style: none;
  margin: .25rem 0 .5rem 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.results-elected-item {
  font-size: .82rem;
  font-weight: 600;
  color: var(--success-text);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.results-cand-item {
  font-size: .82rem;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.results-cand-bar-wrap {
  flex: 1;
  height: 6px;
  background: var(--code-bg);
  border-radius: 3px;
  overflow: hidden;
  max-width: 8rem;
}
.results-cand-bar {
  display: block;
  height: 100%;
  background: #6c757d;
  border-radius: 3px;
}
.results-elected-item .results-cand-bar { background: #28a745; }
.results-cand-note { font-size: .75rem; color: var(--text-4); white-space: nowrap; }

/* ── 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: var(--primary-text); }

.result-label {
  font-size: .85rem;
  color: var(--text-2);
  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: var(--surface-alt);
  border-radius: 99px;
  overflow: hidden;
}

.result-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
  transition: width .4s ease;
  min-width: 2px;
}

.result-row--winner .result-bar-fill { background: var(--primary); }

.result-note-col {
  font-size: .78rem;
  color: var(--text-3);
  text-align: right;
  white-space: nowrap;
}

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

.results-round-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .85rem;
  background: var(--surface-3);
  border-bottom: 1px solid var(--border-light);
}

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

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

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

/* ── Utilities ────────────────────────────────────────────────────────────── */
.mt-sm  { margin-top: .5rem; }
.mt-md  { margin-top: .75rem; }
.mt-lg  { margin-top: 1rem; }
.mt-xl  { margin-top: 1.5rem; }
.mb-lg  { margin-bottom: 1rem; }
.my-xs  { margin: .25rem 0 0 1rem; }
.my-sm  { margin: .25rem 0; }

.text-secondary { color: var(--text-3); }
.text-muted     { color: var(--text-3); }
.text-hint      { color: var(--text-4); font-size: .75rem; }
.text-danger    { color: #dc3545; }

.flex-gap-sm  { display: flex; gap: .5rem; }
.flex-gap-md  { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.flex-between { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }

.textarea-code    { font-family: monospace; font-size: .75rem; resize: vertical; }
.textarea-code-lg { font-family: monospace; font-size: .78rem; resize: vertical; width: 100%; box-sizing: border-box; }

.pre-scrollable { max-height: 12rem; overflow: auto; }
.badge-push     { margin-left: auto; margin-right: .5rem; }
.loading-center { text-align: center; padding: .75rem 0; }

/* Width percentage utilities (0–100) for progress/result bars — avoids inline styles */
.w-0 { width: 0%; }
.w-1 { width: 1%; }
.w-2 { width: 2%; }
.w-3 { width: 3%; }
.w-4 { width: 4%; }
.w-5 { width: 5%; }
.w-6 { width: 6%; }
.w-7 { width: 7%; }
.w-8 { width: 8%; }
.w-9 { width: 9%; }
.w-10 { width: 10%; }
.w-11 { width: 11%; }
.w-12 { width: 12%; }
.w-13 { width: 13%; }
.w-14 { width: 14%; }
.w-15 { width: 15%; }
.w-16 { width: 16%; }
.w-17 { width: 17%; }
.w-18 { width: 18%; }
.w-19 { width: 19%; }
.w-20 { width: 20%; }
.w-21 { width: 21%; }
.w-22 { width: 22%; }
.w-23 { width: 23%; }
.w-24 { width: 24%; }
.w-25 { width: 25%; }
.w-26 { width: 26%; }
.w-27 { width: 27%; }
.w-28 { width: 28%; }
.w-29 { width: 29%; }
.w-30 { width: 30%; }
.w-31 { width: 31%; }
.w-32 { width: 32%; }
.w-33 { width: 33%; }
.w-34 { width: 34%; }
.w-35 { width: 35%; }
.w-36 { width: 36%; }
.w-37 { width: 37%; }
.w-38 { width: 38%; }
.w-39 { width: 39%; }
.w-40 { width: 40%; }
.w-41 { width: 41%; }
.w-42 { width: 42%; }
.w-43 { width: 43%; }
.w-44 { width: 44%; }
.w-45 { width: 45%; }
.w-46 { width: 46%; }
.w-47 { width: 47%; }
.w-48 { width: 48%; }
.w-49 { width: 49%; }
.w-50 { width: 50%; }
.w-51 { width: 51%; }
.w-52 { width: 52%; }
.w-53 { width: 53%; }
.w-54 { width: 54%; }
.w-55 { width: 55%; }
.w-56 { width: 56%; }
.w-57 { width: 57%; }
.w-58 { width: 58%; }
.w-59 { width: 59%; }
.w-60 { width: 60%; }
.w-61 { width: 61%; }
.w-62 { width: 62%; }
.w-63 { width: 63%; }
.w-64 { width: 64%; }
.w-65 { width: 65%; }
.w-66 { width: 66%; }
.w-67 { width: 67%; }
.w-68 { width: 68%; }
.w-69 { width: 69%; }
.w-70 { width: 70%; }
.w-71 { width: 71%; }
.w-72 { width: 72%; }
.w-73 { width: 73%; }
.w-74 { width: 74%; }
.w-75 { width: 75%; }
.w-76 { width: 76%; }
.w-77 { width: 77%; }
.w-78 { width: 78%; }
.w-79 { width: 79%; }
.w-80 { width: 80%; }
.w-81 { width: 81%; }
.w-82 { width: 82%; }
.w-83 { width: 83%; }
.w-84 { width: 84%; }
.w-85 { width: 85%; }
.w-86 { width: 86%; }
.w-87 { width: 87%; }
.w-88 { width: 88%; }
.w-89 { width: 89%; }
.w-90 { width: 90%; }
.w-91 { width: 91%; }
.w-92 { width: 92%; }
.w-93 { width: 93%; }
.w-94 { width: 94%; }
.w-95 { width: 95%; }
.w-96 { width: 96%; }
.w-97 { width: 97%; }
.w-98 { width: 98%; }
.w-99 { width: 99%; }
.w-100 { width: 100%; }

/* Table alignment (pulldown-cmark outputs style="" — we replace with these classes) */
.align-left   { text-align: left; }
.align-center { text-align: center; }
.align-right  { text-align: right; }