/* ── Design tokens ─────────────────────────────────────────────────────────── */
:root {
  --bg:#F7F5F0;--surface:#FFFFFF;--surface2:#F0EDE6;--border:#E2DDD6;
  --text:#1A1814;--text2:#6B665E;--text3:#7A766D;
  --nav-bg:#000000;--nav-text:rgba(255,255,255,.9);--nav-text-dim:rgba(255,255,255,.65);--nav-separator:rgba(255,255,255,.2);--nav-border:rgba(255,255,255,.1);
  --accent:#2D5BE3;--accent-light:#EEF2FD;--accent-dark:#1A3A9E;
  --success:#1A7A4A;--success-light:#E8F5EE;--success-dark:#156b3f;
  --facilitate:#C2684A;--facilitate-dark:#A3553A;
  --warn:#B85C00;--warn-light:#FEF3E8;
  --danger:#C02020;--danger-light:#FDEDED;
  --radius:12px;--radius-sm:8px;
  --shadow:0 1px 3px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.04);
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
body{font-family:system-ui,-apple-system,sans-serif;background:#000;color:var(--text);min-height:100vh;font-size:15px;line-height:1.6}

/* ── Text colour tiers ─────────────────────────────────────────────────────── */
.modal-close,.stat-modal-row span,.result-score,.field label,
.vote-item p,.budget-label,.icon-btn,.card-title,
.modal p,.modal-desc,.thanks p,.tab-btn,.landing-label{color:var(--text2)}

.modal-label,.modal-nodesc,.stat-label,.session-label,
#phase-card-hint,.inline-stat span,.field-hint,.vote-item small,.idea-card small,
.char-hint,.error-msg,.empty,.field-desc,
.modal-author,.connecting,.landing-prev-item small{color:var(--text3)}

/* ── Navigation ────────────────────────────────────────────────────────────── */
.nav{padding:0 1.5rem;background:var(--nav-bg);color:var(--nav-text);border-bottom:1px solid var(--nav-border);display:flex;align-items:center;justify-content:space-between;height:56px;position:sticky;top:0;z-index:100}
.nav-brand{font-family:ui-monospace,monospace;font-size:14px;font-weight:500;letter-spacing:-.02em;display:flex;align-items:center;gap:9px;color:inherit;text-decoration:none}
.nav-right{display:flex;align-items:center;gap:10px}
.nav-sep{color:var(--nav-separator)}
.nav-mono{display:flex;align-items:center;gap:6px;font-family:ui-monospace,monospace;font-size:12px;color:var(--nav-text-dim)}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--text3);transition:background .3s;flex-shrink:0}
.status-dot.live{background:var(--success);box-shadow:0 0 0 3px var(--success-light)}
.nav-stat{display:flex;align-items:center;gap:4px}
.nav-stat-val{font-weight:500;color:#fff}

/* ── Page layout ───────────────────────────────────────────────────────────── */
.page{padding:2rem 1.5rem;max-width:780px;margin:0 auto}

/* ── Connecting / spinner ──────────────────────────────────────────────────── */
.connecting{display:flex;align-items:center;justify-content:center;min-height:60vh;flex-direction:column;gap:12px;font-size:14px}
.spinner{width:24px;height:24px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn{padding:9px 18px;border-radius:var(--radius-sm);font-family:system-ui,-apple-system,sans-serif;font-size:13px;font-weight:500;cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--text);transition:all .15s;white-space:nowrap}
.btn:hover{background:var(--surface2)}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--accent);color:white;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-dark)}
.btn-danger{background:var(--danger-light);color:var(--danger);border-color:#F5BEBE}
.btn-danger:hover{background:#FAD5D5}
.btn-success{background:var(--success);color:white;border-color:var(--success)}
.btn-success:hover{background:var(--success-dark)}
.btn-facilitate{background:var(--facilitate);color:white;border-color:var(--facilitate)}
.btn-facilitate:hover{background:var(--facilitate-dark)}
.btn-warn{background:var(--warn-light);color:var(--warn);border-color:#F5C8A0}
.btn-warn:hover{background:#FDDEC0}
.btn-sm{padding:5px 12px;font-size:12px}

/* ── Modal ─────────────────────────────────────────────────────────────────── */
.modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;align-items:center;justify-content:center;padding:1rem}
.modal-backdrop.open{display:flex}
.modal{background:var(--surface);border-radius:var(--radius);padding:1.5rem;width:100%;box-shadow:0 8px 40px rgba(0,0,0,.2);animation:modalIn .2s ease}
.modal-sm{max-width:400px}
.modal-md{max-width:420px}
.modal.modal-share{max-width:640px;text-align:center}
@keyframes modalIn{from{opacity:0;transform:scale(.96) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem}
.modal-close{width:28px;height:28px;border-radius:50%;border:1px solid var(--border);background:var(--surface2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all .15s;flex-shrink:0}
.modal-close:hover{background:var(--border)}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:1.25rem}
.modal-label{font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.04em}
.modal-nodesc{font-size:14px;font-style:italic}
.modal-desc{font-size:14px;background:var(--bg);border-radius:var(--radius-sm);padding:.875rem 1rem}
#idm-idea-title{font-size:17px;font-weight:600;margin-bottom:4px}
.modal-footer{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.modal h3{font-size:16px;font-weight:600;margin-bottom:8px}
.modal p{font-size:13px;margin-bottom:.75rem}
.modal-section{margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--border)}
.modal-section-title{font-size:13px;font-weight:600;margin-bottom:4px}
#session-mgmt-modal .btn{width:100%}
#stats-modal-title{font-size:15px}
.stat-modal-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-top:1px solid var(--border)}
.stat-modal-row span{font-size:13px}
.stat-modal-row strong{font-family:ui-monospace,monospace;font-size:15px;font-weight:600;color:var(--text)}

/* ── Stats grid (shared) ───────────────────────────────────────────────────── */
.stats-row{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:.75rem 0 1rem}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;text-align:center;box-shadow:var(--shadow)}
.stat-value{font-size:1.75rem;font-weight:600;font-family:ui-monospace,monospace;line-height:1.2}
.stat-label{font-size:12px;margin-top:2px;text-transform:capitalize}

/* ── Result bars (shared) ───────────────────────────────────────────────────── */
.result-item{margin-bottom:14px}
.result-item.clickable{cursor:pointer;padding:8px;border-radius:var(--radius-sm);transition:background .15s}
.result-item.clickable:hover{background:var(--surface2)}
.result-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
.result-text{font-size:14px;font-weight:500}
.result-text.winner::before{content:'🥇 '}
.result-score{font-family:ui-monospace,monospace;font-size:13px}
.result-track{height:8px;background:var(--surface2);border-radius:4px;overflow:hidden}
.result-fill{height:100%;border-radius:4px;background:var(--accent);transition:width .6s cubic-bezier(.4,0,.2,1)}

/* ── Card ──────────────────────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem 1.5rem;margin-bottom:1rem;box-shadow:var(--shadow)}
.session-card{padding:.875rem 1.25rem;display:flex;justify-content:space-between;align-items:center}
.session-label{font-size:11px;margin-bottom:1px;text-transform:uppercase;letter-spacing:.04em}
.session-name{font-weight:600}
.session-actions{display:flex;gap:6px;align-items:center;flex-shrink:0}
.card-title{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;margin-bottom:1rem}
.field-desc{font-size:12px;margin-bottom:8px;line-height:1.4}
.card a{color:var(--accent)}

/* ── Phase card (shared) ───────────────────────────────────────────────────── */
.phase-card{padding:1rem 1.5rem}
.phase-card-row{display:flex;justify-content:space-between;align-items:center}
#phase-card-label{font-size:15px;font-weight:600}
#phase-card-hint{font-size:12px;margin-top:8px;line-height:1.5}
#phase-card-stats{display:flex;gap:16px;align-items:center}
.inline-stat{display:flex;flex-direction:column;align-items:center}
.inline-stat strong{font-family:ui-monospace,monospace;font-size:22px;font-weight:600;color:var(--text);line-height:1}
.inline-stat span{font-size:11px;margin-top:2px}
.stat-divider{width:1px;height:32px;background:var(--border)}

/* ── Big action buttons ────────────────────────────────────────────────────── */
.big-btn{width:100%;padding:16px;border-radius:var(--radius);font-family:system-ui,-apple-system,sans-serif;font-size:16px;font-weight:600;cursor:pointer;border:none;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .15s;margin-top:1rem;margin-bottom:1rem}
.big-btn:active{transform:scale(.98)}
.big-btn-success{background:var(--success);color:white;box-shadow:0 2px 8px rgba(26,122,74,.25)}
.big-btn-success:hover{background:var(--success-dark);box-shadow:0 4px 16px rgba(26,122,74,.35)}
.big-btn-facilitate{background:var(--facilitate);color:white;box-shadow:0 2px 8px rgba(194,104,74,.25)}
.big-btn-facilitate:hover{background:var(--facilitate-dark);box-shadow:0 4px 16px rgba(194,104,74,.35)}
.big-btn-accent{background:var(--accent);color:white;box-shadow:0 2px 8px rgba(45,91,227,.25)}
.big-btn-accent:hover{background:var(--accent-dark)}

/* ── Form inputs ───────────────────────────────────────────────────────────── */
input[type=text],textarea{width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:system-ui,-apple-system,sans-serif;font-size:14px;background:var(--surface);color:var(--text);outline:none;transition:border-color .15s,box-shadow .15s}
input[type=text]:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(45,91,227,.12)}
textarea{resize:vertical;min-height:65px}
input[type=range]{flex:1;height:4px;accent-color:var(--accent);cursor:pointer}

/* ── Form fields (shared) ──────────────────────────────────────────────────── */
.field{margin-bottom:1rem}
.field label{display:block;font-size:13px;margin-bottom:6px;font-weight:500}
.field-hint{font-weight:400}
.required-star{color:var(--danger);margin-left:2px}
.field-error{font-size:11px;color:var(--danger);margin-top:4px}
input[type=text].invalid,textarea.invalid{border-color:var(--danger);box-shadow:0 0 0 3px rgba(192,32,32,.12)}

/* ── Vote items (shared) ───────────────────────────────────────────────────── */
.vote-item{padding:1rem 1.25rem;margin-bottom:10px;transition:border-color .2s}
.vote-item.has-votes{border-color:var(--accent)}
.vote-item strong{display:block;font-size:14px;font-weight:600;margin-bottom:2px}
.vote-item p{display:block;font-size:12px;margin-bottom:2px;line-height:1.4}
.vote-item small{display:block;font-size:11px;margin-bottom:10px}
.slider-row{display:flex;align-items:center;gap:12px}
.slider-amount{font-family:ui-monospace,monospace;font-size:14px;font-weight:500;min-width:44px;text-align:right;color:var(--accent)}

/* ── Budget widget (shared) ────────────────────────────────────────────────── */
.budget-widget{padding:1rem 1.25rem;margin-bottom:1.25rem}
.budget-widget-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.budget-label{font-size:13px}
.budget-amount{font-family:ui-monospace,monospace;font-size:22px;font-weight:500}
.budget-amount.low{color:var(--danger)}
.budget-track{height:6px;background:var(--surface2);border-radius:3px;overflow:hidden}
.budget-fill{height:100%;border-radius:3px;background:var(--accent);transition:width .3s,background .3s}
.budget-fill.low{background:var(--danger)}

/* ── Voted banner (shared) ─────────────────────────────────────────────────── */
.voted-banner{background:var(--success-light);border:1px solid #9FE1CB;border-radius:var(--radius);padding:1rem 1.25rem;margin-bottom:1rem;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--success)}

/* ── Add-idea button (shared) ──────────────────────────────────────────────── */
.add-idea-btn{padding:13px;font-size:15px;margin-top:0;margin-bottom:1rem}
.add-idea-btn:hover{box-shadow:0 4px 16px rgba(45,91,227,.35)}

/* ── Masonry grid (shared) ─────────────────────────────────────────────────── */
.masonry{columns:3;column-gap:8px}
.masonry .empty{column-span:all}
@media(max-width:500px){.masonry{columns:2}}

/* ── Idea cards (shared) ───────────────────────────────────────────────────── */
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.idea-card{break-inside:avoid;padding:.75rem;margin-bottom:8px;cursor:pointer;transition:border-color .15s,box-shadow .15s;animation:fadeIn .3s ease;position:relative}
.idea-card:hover{border-color:#b8c8f5;box-shadow:0 2px 12px rgba(45,91,227,.1)}
.idea-card.mine{border-left:3px solid var(--accent)}
.idea-card strong{display:block;font-size:13px;font-weight:600;line-height:1.35}
.idea-card small{display:block;font-size:11px;margin-top:5px}
.idea-has-desc{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--text3);margin-left:4px;vertical-align:middle;flex-shrink:0}
.idea-mine-actions{display:flex;gap:4px;margin-top:7px}
.icon-btn{padding:3px 8px;border-radius:6px;border:1px solid var(--border);background:var(--surface2);font-size:11px;font-weight:500;cursor:pointer;transition:all .12s}
.icon-btn:hover{background:var(--border)}
.icon-btn.del:hover{background:var(--danger-light);color:var(--danger);border-color:#F5BEBE}

/* ── Form char hint (shared) ───────────────────────────────────────────────── */
.char-hint{font-size:11px;margin-top:4px}

/* ── Utilities ─────────────────────────────────────────────────────────────── */
.error-msg{text-align:center}
.empty{text-align:center;padding:2rem 1rem;background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius);font-size:14px}
.toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%) translateY(10px);background:var(--text);color:white;padding:9px 20px;border-radius:99px;font-size:13px;font-weight:500;opacity:0;transition:all .25s;pointer-events:none;z-index:300;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── Share modal (shared) ──────────────────────────────────────────────────── */
.share-qr-wrap{display:flex;justify-content:center;margin-bottom:1.25rem}
#qr-generated{display:flex;justify-content:center}
#qr-generated img{max-width:100%;height:auto}
.url-big{font-family:ui-monospace,monospace;font-size:22px;font-weight:600;color:var(--accent);letter-spacing:-.02em;margin-bottom:1rem;word-break:break-all}
.launch-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media(max-width:540px){
  .page{padding:1.25rem 1rem}
  .session-actions .btn{padding:7px 10px;font-size:12px}
  .stat-value{font-size:1.375rem}
  .url-big{font-size:16px}
}