:root {
  --bg: #f4f2ec;
  --card: #ffffff;
  --ink: #20201d;
  --muted: #8a8a82;
  --line: #e5e2d8;
  --field: #f6f5f1;
  --blue: #2563eb;
  --blue-soft: #eaf1fe;
  --gold: #e8b53a;
  --gold-dark: #9c7210;
  --green: #1a7f37;
  --red: #c0392b;
  --radius: 14px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Heebo", "Noto Sans Hebrew", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  padding-bottom: 96px;
}
.hidden { display: none !important; }

/* header */
.site-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 16px 10px;
}
.logo { width: 44px; height: 44px; border-radius: 10px; }
.site-header h1 { font-size: 1.25rem; }
.tagline { font-size: .82rem; color: var(--muted); }

/* deadline bar */
.deadline-bar {
  background: var(--gold); color: #4a3605;
  font-size: .82rem; font-weight: 700; text-align: center;
  padding: 8px 12px; margin: 0 12px; border-radius: 10px;
}
.deadline-bar.locked { background: #efe9d8; color: var(--muted); }

/* tabs */
.tabs {
  display: flex; gap: 6px; padding: 12px;
  position: sticky; top: 0; z-index: 20; background: var(--bg);
}
.tab {
  flex: 1; padding: 9px 4px; border: none; border-radius: 10px;
  background: #e9e6dd; color: #55534a; font-weight: 700; font-size: .88rem;
  font-family: inherit; cursor: pointer;
}
.tab.active { background: var(--ink); color: #fff; }
.pill {
  display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--blue); color: #fff; font-size: .72rem; line-height: 18px;
}
.tab.active .pill { background: rgba(255,255,255,.25); }

main { padding: 0 12px; }

.lock-notice {
  background: #fdecea; color: var(--red); border-radius: 10px;
  padding: 10px 12px; font-size: .88rem; font-weight: 700; margin-bottom: 10px;
}

/* questionnaire card (reference-video style) */
.qcard {
  background: var(--card); border-radius: var(--radius);
  padding: 16px 14px 18px;
}
.qlabel { display: block; font-size: .82rem; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.qcard input[type="text"], .qselect {
  width: 100%; font-size: 1rem; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--field); font-family: inherit; color: var(--ink);
}
.qcard input[type="text"]:focus, .qselect:focus, .pg-cell input:focus {
  outline: none; border-color: var(--blue); background: #fff;
}
.qtitle { font-size: 1rem; font-weight: 800; margin: 22px 0 10px; }
.qnote { font-weight: 400; font-size: .8rem; color: var(--muted); }

/* Q1 party grid */
.party-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pg-cell {
  background: var(--field); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 10px;
}
.pg-name { font-size: .85rem; font-weight: 700; margin-bottom: 6px; }
.pg-cell input {
  width: 100%; font-size: 1rem; padding: 7px 8px; text-align: center;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  font-family: inherit; color: var(--ink);
}
.pg-cell.has-seats { border-color: var(--blue); background: var(--blue-soft); }
.more-parties-btn {
  width: 100%; margin: 10px 0 0; padding: 11px; border: 1px dashed #cfcbc0;
  border-radius: 10px; background: transparent; color: var(--muted);
  font-weight: 700; font-size: .9rem; font-family: inherit; cursor: pointer;
}
.sumline { margin-top: 10px; font-size: .92rem; color: var(--ink); }
.sumline b.over { color: var(--red); }
.sumline b.ok { color: var(--green); }

/* Q2 bloc assignment */
.bloc-card { }
.card-hint { font-size: .85rem; color: var(--muted); padding: 2px 0; }
.bloc-assign-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid var(--line);
}
.bloc-assign-row:last-child { border-bottom: none; }
.bloc-party-name { font-size: .88rem; font-weight: 700; }
.bloc-seats { color: var(--muted); font-weight: 400; }
.bloc-chips { display: flex; gap: 5px; }
.bloc-chip {
  border: 1px solid var(--line); background: var(--field); color: var(--ink);
  border-radius: 999px; padding: 5px 11px; font-size: .8rem; font-weight: 700;
  font-family: inherit; cursor: pointer;
}
.bloc-chip.selected { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Q4 radio rows */
.radio-list { display: flex; flex-direction: column; gap: 8px; }
.radio-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: start;
  border: 1px solid var(--line); background: var(--field); border-radius: 10px;
  padding: 12px; font-size: .92rem; font-weight: 600; color: var(--ink);
  font-family: inherit; cursor: pointer;
}
.radio-circle {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #c8c4b8; background: #fff;
}
.radio-row.selected { border-color: var(--blue); background: var(--blue-soft); }
.radio-row.selected .radio-circle { border-color: var(--blue); background: var(--blue); box-shadow: inset 0 0 0 3px #fff; }

/* Q6 checkbox grid */
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.check-cell {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: var(--field); border-radius: 10px;
  padding: 10px; font-size: .85rem; font-weight: 600; color: var(--ink);
  font-family: inherit; cursor: pointer; text-align: start;
}
.check-box {
  flex: none; width: 17px; height: 17px; border-radius: 5px;
  border: 2px solid #c8c4b8; background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .7rem; color: #fff; line-height: 1;
}
.check-cell.selected { border-color: var(--blue); background: var(--blue-soft); }
.check-cell.selected .check-box { border-color: var(--blue); background: var(--blue); }
.check-cell.selected .check-box::after { content: "✓"; }
.coalition-total { margin-top: 8px; font-size: .9rem; font-weight: 700; color: var(--ink); }
.coalition-total.maj { color: var(--green); }

/* bottom bar */
.bottom-bar {
  position: fixed; bottom: 0; inset-inline: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border-top: 1px solid var(--line);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
}
.remaining { text-align: center; min-width: 74px; }
.remaining span:first-child, #remainingNum { font-size: 1.3rem; font-weight: 800; display: block; line-height: 1.1; }
#remainingNum.ok { color: var(--green); }
#remainingNum.over { color: var(--red); }
.remaining-label { font-size: .68rem; color: var(--muted); display: block; }
.save-btn {
  flex: 1; padding: 13px; border: none; border-radius: 12px;
  background: var(--gold); color: #4a3605;
  font-size: 1.02rem; font-weight: 800; font-family: inherit; cursor: pointer;
}
.save-btn:disabled { background: #e9e6dd; color: var(--muted); cursor: default; }

/* participants */
.participants, .consensus { display: flex; flex-direction: column; gap: 10px; }
.p-card, .c-card {
  background: var(--card); border-radius: var(--radius); padding: 14px;
}
.p-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.p-name { font-weight: 800; font-size: 1rem; }
.you { color: var(--blue); font-size: .8rem; }
.diff-badge { background: var(--blue-soft); color: var(--blue); border-radius: 999px; padding: 2px 8px; font-size: .75rem; font-weight: 700; }
.p-time { font-size: .72rem; color: var(--muted); }
.bloc-totals { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.bloc-total-chip {
  background: var(--field); border: 1px solid var(--line); color: var(--ink);
  border-radius: 999px; padding: 3px 10px; font-size: .78rem; font-weight: 700;
}
.bloc-total-chip.maj { background: #e6f4ea; border-color: #bfe3c9; color: var(--green); }
.p-answers { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; font-size: .85rem; }
.p-answer { color: #55534a; }
.p-answer b { color: var(--ink); }
.p-bars { display: flex; flex-direction: column; gap: 5px; }
.p-bar-row { display: flex; align-items: center; gap: 8px; }
.p-bar-name { width: 118px; font-size: .8rem; text-align: start; flex: none; }
.p-bar-track { flex: 1; height: 8px; background: var(--field); border-radius: 999px; overflow: hidden; }
.p-bar-fill { height: 100%; background: var(--blue); border-radius: 999px; }
.p-bar-val { width: 34px; font-size: .8rem; font-weight: 700; text-align: end; flex: none; }

/* consensus */
.c-card h3 { font-size: .95rem; margin-bottom: 10px; }
.bloc-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.bloc-name { width: 118px; font-size: .82rem; flex: none; }
.bloc-track { flex: 1; height: 10px; background: var(--field); border-radius: 999px; overflow: hidden; }
.bloc-fill { height: 100%; background: var(--gold); border-radius: 999px; }
.bloc-val { width: 34px; font-size: .82rem; font-weight: 700; text-align: end; flex: none; }
.rank-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.rank-row:last-child { border-bottom: none; }
.rank-pos { width: 22px; height: 22px; border-radius: 50%; background: var(--field); display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 800; flex: none; }
.empty-state { background: var(--card); border-radius: var(--radius); padding: 22px; text-align: center; color: var(--muted); font-size: .9rem; }

/* footer + toast */
.site-footer { padding: 18px 16px 8px; font-size: .72rem; color: var(--muted); text-align: center; }
.site-footer p { margin-bottom: 4px; }
#toast {
  position: fixed; bottom: 92px; inset-inline: 12px; z-index: 40;
  background: var(--ink); color: #fff; border-radius: 10px;
  padding: 11px 14px; font-size: .9rem; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
#toast.show { opacity: 1; }

@media (min-width: 640px) {
  main { max-width: 560px; margin: 0 auto; }
  .site-header { max-width: 560px; margin: 0 auto; }
  .tabs, .deadline-bar { max-width: 584px; margin-inline: auto; }
  .bottom-bar { max-width: 560px; margin-inline: auto; border-radius: 14px 14px 0 0; }
}

/* confirm modal + disabled states */
.modal-back { position: fixed; inset: 0; background: rgba(20,20,16,.45); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-card { background: var(--card); border-radius: var(--radius); padding: 20px; max-width: 340px; width: 100%; box-shadow: 0 12px 40px rgba(0,0,0,.2); }
.modal-text { font-size: .92rem; line-height: 1.55; margin-bottom: 16px; }
.modal-btns { display: flex; gap: 10px; }
.ghost-btn { flex: 1; border: 1.5px solid var(--line); background: transparent; border-radius: 10px; padding: 11px; font-size: .92rem; font-weight: 700; color: var(--ink); cursor: pointer; font-family: inherit; }
.check-grid.disabled { opacity: .45; pointer-events: none; }
.qinput:disabled { opacity: .6; background: var(--field); }
.field-label { font-size: .8rem; font-weight: 700; color: var(--muted); margin-bottom: 4px; }

/* polls (reference) */
.polls-title { font-size: .85rem; font-weight: 800; color: var(--muted); margin: 4px 2px 10px; }

.rules-note { font-size: .8rem; color: var(--muted); margin: 2px 2px 10px; background: var(--card, #fff); border-radius: 10px; padding: 8px 10px; }
.rules-note summary { cursor: pointer; font-weight: 700; color: var(--ink); }

.bench-bar { display: flex; gap: 6px; margin: 6px 2px 10px; }
.bench-bar button { flex: 1; padding: 9px 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-weight: 700; font-size: .8rem; cursor: pointer; font-family: inherit; }
.bench-bar button.active { background: var(--ink); color: var(--card); }
.lb-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--card); border-radius: 10px; margin-bottom: 6px; }
.lb-rank { min-width: 34px; font-weight: 800; color: var(--muted); font-size: .85rem; }
.lb-name { flex: 1; font-weight: 700; }
.lb-sub { font-size: .72rem; color: var(--muted); font-weight: 400; }
.lb-pts { font-weight: 800; font-size: 1.05rem; }
.rules-note .rn-body { margin-top: 6px; line-height: 1.5; }
.poll-card { margin-bottom: 14px; }
.poll-badge { font-size: .68rem; background: var(--field); border-radius: 999px; padding: 2px 8px; font-weight: 700; color: var(--muted); }
.poll-meta { font-size: .75rem; color: var(--muted); margin-bottom: 10px; }
.poll-below { font-size: .75rem; color: var(--muted); margin-top: 10px; line-height: 1.5; }
.poll-src { display: inline-block; margin-top: 8px; font-size: .78rem; font-weight: 700; color: var(--blue); text-decoration: none; }