:root { --bg:#0f1221; --card:#171a2b; --muted:#9aa3b2; --text:#e7ebf3; --accent:#7c5cff; --danger:#ff4d6d; }
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit}
.container{max-width:1100px;margin:0 auto;padding:24px}
.topbar{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:20px}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:var(--text);padding:10px 12px;border-radius:12px;text-decoration:none;cursor:pointer}
.btn:hover{background:rgba(255,255,255,.10)}
.btn.primary{background:var(--accent);border-color:transparent}
.btn.primary:hover{filter:brightness(1.05)}
.btn.danger{background:transparent;border-color:rgba(255,77,109,.6);color:#ffd1d9}
.btn.danger:hover{background:rgba(255,77,109,.12)}
.card{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width: 900px){.grid2{grid-template-columns:1fr}}
.muted{color:var(--muted)}
h1,h2,h3{margin:0 0 12px}
hr{border:none;border-top:1px solid rgba(255,255,255,.08);margin:16px 0}
.option{display:flex;align-items:flex-start;gap:10px;padding:10px;border-radius:12px}
.option:hover{background:rgba(255,255,255,.04)}
.voters{margin-left:28px;margin-top:6px;display:flex;flex-wrap:wrap;gap:6px}
.pill{font-size:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);padding:4px 8px;border-radius:999px}
.flash{margin:0 0 14px;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06)}
.flash.error{border-color:rgba(255,77,109,.6);background:rgba(255,77,109,.12)}
.suggestion{display:grid;grid-template-columns:180px 1fr;gap:16px;align-items:start}
.suggestion img{width:100%;height:120px;object-fit:cover;border-radius:14px;border:1px solid rgba(255,255,255,.08)}
@media (max-width: 700px){.suggestion{grid-template-columns:1fr}.suggestion img{height:180px}}
.bullets{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:10px}
.btable{width:100%;border-collapse:separate;border-spacing:0 6px}
.btable td:first-child{color:var(--muted);padding-right:10px;white-space:nowrap}
.btable td{vertical-align:top}
.small{font-size:12px}
input[type=text],textarea,select{width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:var(--text)}
textarea{min-height:120px;resize:vertical}
label{display:block;font-size:13px;color:var(--muted);margin:12px 0 6px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}


/* ----- prettier poll options (custom checkbox + clickable row) ----- */
.opt{
  display:flex;
  gap:12px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  cursor:pointer;
  user-select:none;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
  margin:8px 0;
}
.opt:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); }
.opt:active{ transform: translateY(1px); }

.opt__input{
  position:absolute;
  opacity:0;
  pointer-events:none;
  width:1px;
  height:1px;
}

.opt__box{
  width:22px;
  height:22px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.18);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  margin-top:2px;
}

.opt__input:focus-visible + .opt__box{
  outline:2px solid rgba(124,92,255,.65);
  outline-offset:3px;
}

.opt__input:checked + .opt__box{
  background:var(--accent);
  border-color:transparent;
  box-shadow: 0 8px 18px rgba(124,92,255,.25);
}
.opt__input:checked + .opt__box::after{
  content:"✓";
  font-weight:800;
  font-size:14px;
  line-height:1;
}

.opt.is-checked{
  background:rgba(124,92,255,.10);
  border-color:rgba(124,92,255,.25);
}

.opt__main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.opt__row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.opt__title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.opt__count{
  font-size:12px;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:var(--muted);
  flex:0 0 auto;
}

.avatars{ display:flex; flex-wrap:wrap; gap:6px; }
.avatar{
  width:26px;
  height:26px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  object-fit:cover;
}