:root {
  --ink: #1d2d29;
  --muted: #65736c;
  --line: #e1e8e2;
  --paper: #fff;
  --canvas: #f5f7f2;
  --green: #2e684e;
  --green-dark: #214e39;
  --lime: #d9f278;
  --soft-green: #edf5e8;
  --amber: #875310;
  --soft-amber: #fff5df;
  --red: #ab3a36;
  --shadow: 0 20px 50px rgba(37, 55, 42, .055);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 15px/1.5 "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif; }
button, input { font: inherit; }
.topbar { height: 70px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.82); display:flex; justify-content:space-between; align-items:center; padding:0 max(24px, calc((100% - 1120px)/2)); }
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); font:800 16px "Manrope", sans-serif; letter-spacing:-.04em; }
.brand-mark { width:30px; height:30px; display:grid; place-items:center; border-radius:10px 10px 10px 3px; background:var(--green); color:white; font:800 13px "Manrope",sans-serif; letter-spacing:-.08em; }
.top-meta { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; font-weight:600; }
.live-dot { width:8px; height:8px; border-radius:50%; background:#c9d0c9; }
.live-dot.ready { background:#2c9e66; box-shadow:0 0 0 3px #2c9e661b; }
.live-dot.missing { background:#d48a19; box-shadow:0 0 0 3px #d48a191a; }
.layout { width:min(1120px, calc(100% - 36px)); margin:48px auto 30px; display:grid; grid-template-columns:.86fr 1.14fr; gap:24px; align-items:start; }
.intro { padding:24px 0 0 10px; }
.eyebrow { color:var(--green); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.14em; }
h1,h2,p { margin-top:0; }
h1 { margin:13px 0 15px; font:800 clamp(37px,5vw,56px)/1.04 "Manrope",sans-serif; letter-spacing:-.065em; }
h1 span { color:var(--green); }
.intro > p { color:var(--muted); max-width:440px; font-size:16px; line-height:1.7; }
.callout { display:flex; align-items:flex-start; gap:11px; max-width:455px; margin-top:15px; padding:14px; border-radius:13px; font-size:12px; line-height:1.55; }
.callout strong { font-weight:800; }
.callout.warning { color:#6e4b12; background:var(--soft-amber); border:1px solid #f1dfb5; }
.callout.privacy { color:#52615b; background:#edf1ea; border:1px solid #e2e8de; }
.callout-icon { flex:none; width:19px; height:19px; display:grid; place-items:center; border:1px solid currentColor; border-radius:50%; font-size:11px; font-weight:800; }
.panel { border:1px solid var(--line); border-radius:19px; background:var(--paper); box-shadow:var(--shadow); }
.form-panel { padding:24px; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
h2 { margin:3px 0 0; font:800 23px "Manrope",sans-serif; letter-spacing:-.045em; }
.count-badge { display:inline-grid; place-items:center; height:28px; min-width:48px; padding:0 9px; border:1px solid #dde8db; border-radius:99px; background:#f4f8f0; color:var(--green); font-size:11px; font-weight:800; }
.field-label { display:block; margin:0 0 7px; font-size:12px; font-weight:800; }
.text-input { width:100%; height:45px; border:1px solid #cfd9d1; border-radius:10px; padding:0 12px; color:var(--ink); background:white; outline:none; }
.text-input:focus { border-color:#6a9b76; box-shadow:0 0 0 3px #74a67d20; }
.field-note { color:var(--muted); font-size:11px; line-height:1.5; margin:6px 0 0; }
.member-list { display:grid; gap:11px; margin-top:17px; }
.member-row { border:1px solid var(--line); border-radius:12px; background:#fcfdfa; padding:12px; }
.member-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.member-label { color:#36453d; font-size:11px; font-weight:800; }
.remove-member { border:0; background:none; color:#849087; cursor:pointer; font-size:17px; line-height:1; padding:1px 4px; }
.remove-member:hover { color:var(--red); }
.member-row .text-input { height:41px; font-size:13px; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:10px; border:0; border-radius:10px; cursor:pointer; font-size:12px; font-weight:800; transition:transform .14s ease, background .14s ease, opacity .14s ease; }
.button:active { transform:translateY(1px); }
.button:disabled { opacity:.5; cursor:not-allowed; }
.button-primary { min-height:46px; padding:0 18px; background:var(--green); color:white; box-shadow:0 5px 12px #2e684e22; }
.button-primary:hover:not(:disabled) { background:var(--green-dark); }
.button-primary span { font-size:15px; }
.button-quiet { min-height:34px; padding:0 11px; background:transparent; color:var(--green); }
.button-quiet:hover:not(:disabled) { background:var(--soft-green); }
.button-quiet span { font-size:15px; }
#add-member { margin-top:9px; }
.privacy-note { margin-top:5px; }
.form-actions { margin-top:20px; }
.status { min-height:20px; margin-top:9px; color:var(--muted); font-size:11px; }
.status.error { color:var(--red); }
.status.success { color:var(--green); }
.steps-mini { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:15px; padding-top:15px; border-top:1px solid #eef1ed; color:#6d7971; font-size:10px; font-weight:700; }
.steps-mini i { width:18px; height:1px; background:#cdd8cc; }
.results-panel { grid-column:2; padding:24px; }
.results-heading { margin-bottom:14px; }
.result-notice { margin-bottom:14px; border-radius:11px; padding:11px 13px; background:var(--soft-amber); color:#77520e; font-size:11px; line-height:1.55; }
.candidate-list { display:grid; gap:10px; }
.empty-state { margin:0; padding:16px; border:1px dashed #cfd9d1; border-radius:12px; color:var(--muted); font-size:12px; }
.candidate { display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:12px; align-items:start; padding:14px; border:1px solid var(--line); border-radius:13px; background:#fff; }
.candidate-rank { width:30px; height:30px; display:grid; place-items:center; border-radius:10px; background:#eef4e9; color:var(--green); font-size:11px; font-weight:800; }
.candidate h3 { margin:0; font:800 15px "Manrope",sans-serif; letter-spacing:-.02em; }
.candidate-meta { margin-top:4px; color:var(--muted); font-size:11px; }
.candidate-score { color:var(--green); font:800 15px "Manrope",sans-serif; text-align:right; white-space:nowrap; }
.candidate-score small { display:block; margin-top:1px; color:var(--muted); font:600 9px "DM Sans",sans-serif; }
.member-ranks { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.member-rank { padding:4px 7px; border-radius:99px; background:#f0f3ef; color:#4e5d53; font-size:9px; font-weight:700; }
.veto-button { grid-column:2 / 4; justify-self:start; min-height:29px; padding:0 9px; border:1px solid #e1d6c6; border-radius:8px; background:#fffaf1; color:#7b5723; font-size:10px; font-weight:800; cursor:pointer; }
.veto-button:hover:not(:disabled) { background:#fff1d3; }
.veto-button:disabled { opacity:.5; cursor:not-allowed; }
.trace-panel { margin-top:18px; border-top:1px solid var(--line); padding-top:14px; }
.trace-panel summary { cursor:pointer; color:#43564a; font-size:12px; font-weight:800; }
.trace-list { display:grid; gap:8px; margin-top:12px; }
.trace-item { padding:10px; border:1px solid #edf0ec; border-radius:9px; background:#fbfcfa; }
.trace-item strong { display:block; font-size:10px; }
.trace-item code { display:block; margin-top:3px; color:#376448; font:600 10px ui-monospace,monospace; overflow-wrap:anywhere; }
.trace-item p { margin:4px 0 0; color:var(--muted); font-size:10px; overflow-wrap:anywhere; }
.trace-note { margin:10px 0 0; color:var(--muted); font-size:10px; }
.footnote { grid-column:1 / -1; display:flex; justify-content:space-between; gap:20px; padding:5px 10px; color:#7a867e; font-size:10px; }
[hidden] { display:none !important; }

@media (max-width:820px) {
  .layout { grid-template-columns:1fr; width:min(640px,calc(100% - 28px)); margin:28px auto; gap:18px; }
  .intro { padding:0 3px; }
  h1 { font-size:42px; }
  .results-panel { grid-column:1; }
  .callout { max-width:none; }
}
@media (max-width:480px) {
  .topbar { height:60px; padding:0 16px; }
  .top-meta { font-size:10px; }
  .form-panel,.results-panel { padding:17px; border-radius:15px; }
  .footnote { flex-direction:column; gap:5px; }
  .candidate { grid-template-columns:30px minmax(0,1fr) auto; padding:11px; gap:8px; }
}