*{box-sizing:border-box}
:root{
  --bg:#0f1420; --card:#161d2c; --line:#243046; --fg:#e8edf7;
  --muted:#93a1bd; --acc:#3d7dff; --acc2:#2be0c8; --err:#ff6b6b;
  --radius:14px;
}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1200px 600px at 50% -10%,#1b2440 0%,transparent 60%),var(--bg);
  color:var(--fg);
  font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:760px;margin:0 auto;padding:28px 18px 120px}
.wrap.wide{max-width:1100px}
.wrap.narrow{max-width:520px}
.hero{padding:18px 4px 26px;text-align:center}
.hero.tight{padding:10px 4px 18px;text-align:left}
.hero h1{
  margin:0 0 10px;font-size:26px;line-height:1.35;letter-spacing:.2px;
  background:linear-gradient(96deg,#fff 10%,#a9c6ff 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sub{margin:0;color:var(--muted);font-size:15px}
.privacy{
  margin:14px auto 0;max-width:560px;font-size:12.5px;color:#7d8cab;
  border:1px dashed var(--line);border-radius:10px;padding:8px 12px;
}
.joined{
  display:inline-block;margin:12px 0 0;padding:5px 14px;border-radius:99px;
  font-size:13px;color:#bcd2ff;background:rgba(61,125,255,.14);
  border:1px solid rgba(61,125,255,.3);
}
.joined b{color:#fff;font-size:15px;font-weight:700;margin:0 2px}
.done-no{
  margin:10px 0 6px;font-size:15px;color:#bcd2ff;
}
.done-no b{
  color:#fff;font-size:26px;font-weight:800;margin:0 4px;
  letter-spacing:.5px;
}
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 20px 8px;margin:0 0 18px;
}
.sec{margin:0 0 6px;font-size:15px;color:#c8d5ee;font-weight:600}
.muted{color:var(--muted);font-weight:400}
.muted.sm{font-size:12.5px}
.q{padding:16px 0;border-top:1px solid rgba(255,255,255,.05)}
.card .q:first-of-type{border-top:0}
.q-title{margin:0 0 12px;font-size:16px;font-weight:600;line-height:1.5}
.num{
  display:inline-grid;place-items:center;width:22px;height:22px;margin-right:8px;
  border-radius:7px;background:rgba(61,125,255,.16);color:#8fb4ff;
  font-size:12px;font-weight:700;vertical-align:1px;
}
.req{color:var(--acc2);margin-left:2px}
.opt{color:var(--muted);font-size:12px;font-weight:400;margin-left:4px}
.hint{margin:-6px 0 12px;font-size:12.5px;color:#7d8cab}
.opts{display:grid;gap:8px}
.opt-row{
  display:flex;align-items:flex-start;gap:10px;cursor:pointer;
  border:1px solid var(--line);border-radius:11px;padding:11px 13px;
  background:rgba(255,255,255,.015);transition:border-color .15s,background .15s;
}
.opt-row:hover{border-color:#33456b;background:rgba(61,125,255,.06)}
.opt-row input{position:absolute;opacity:0;pointer-events:none}
.box{
  flex:0 0 auto;width:17px;height:17px;margin-top:4px;border-radius:50%;
  border:1.5px solid #44557b;position:relative;transition:border-color .15s;
}
.opt-row input:checked~.box{border-color:var(--acc)}
.opt-row input:checked~.box::after{
  content:"";position:absolute;inset:3.5px;border-radius:50%;background:var(--acc);
}
.opt-row:has(input:checked){border-color:var(--acc);background:rgba(61,125,255,.12)}
.opt-row input:focus-visible~.box{outline:2px solid var(--acc2);outline-offset:2px}
.txt-l{flex:1;font-size:14.5px;line-height:1.55}
.txt{
  width:100%;padding:11px 13px;border-radius:11px;
  border:1px solid var(--line);background:rgba(255,255,255,.02);
  color:var(--fg);font-size:14.5px;font-family:inherit;
}
.txt:focus{outline:none;border-color:var(--acc)}
.err{color:var(--err);font-size:13px;margin:10px 0 0}
.err.top{text-align:center;margin:12px 0 0}
.q.bad .opt-row,.q.bad .txt{border-color:rgba(255,107,107,.5)}
.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:9;
  display:flex;align-items:center;gap:12px;
  padding:12px max(18px,calc(50% - 362px));
  background:rgba(15,20,32,.92);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
}
.prog{flex:1;height:6px;border-radius:99px;background:#1e2740;overflow:hidden}
.prog i{
  display:block;height:100%;width:0%;border-radius:99px;
  background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .25s;
}
.btn{
  appearance:none;border:0;cursor:pointer;white-space:nowrap;
  padding:11px 20px;border-radius:11px;font-size:14.5px;font-weight:600;
  font-family:inherit;color:#fff;
  background:linear-gradient(96deg,var(--acc),#2f6be0);
}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--fg)}
.btn.sm{padding:8px 14px;font-size:13px;text-decoration:none;display:inline-block}
.done h2{margin:6px 0 8px;font-size:20px}
@media (max-width:560px){
  .hero h1{font-size:21px}
  .wrap{padding:18px 14px 110px}
  .card{padding:16px 15px 6px}
  .bar{padding:10px 14px}
}

/* ---- admin ---- */
body.admin .wrap{padding-bottom:40px}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.acts{display:flex;gap:8px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:0 0 18px}
.kpi{border:1px solid var(--line);border-radius:var(--radius);padding:16px 16px 14px;
  background:linear-gradient(180deg,rgba(61,125,255,.08),rgba(255,255,255,0))}
.kv{font-size:26px;font-weight:700;line-height:1.2;color:#fff}
.kl{font-size:13px;color:var(--muted);margin-top:2px}
.ks{margin-top:4px;font-size:12px;line-height:1.4}
.bars{display:grid;gap:9px;padding-bottom:14px}
.brow{display:grid;grid-template-columns:minmax(120px,34%) 1fr 92px;align-items:center;gap:10px}
.blab{font-size:13px;line-height:1.45;color:#cbd7ee}
.btrack{height:9px;border-radius:99px;background:#1e2740;overflow:hidden}
.btrack i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--acc),var(--acc2))}
.bval{font-size:13px;text-align:right;color:#e8edf7;white-space:nowrap}
.tbl-wrap{overflow-x:auto;padding-bottom:16px}
table{border-collapse:collapse;width:100%;font-size:12.5px}
th,td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;white-space:nowrap}
th{color:var(--muted);font-weight:600;position:sticky;top:0;background:#141b28}
td.ans{max-width:220px;overflow:hidden;text-overflow:ellipsis}
@media (max-width:560px){
  .brow{grid-template-columns:1fr;gap:4px}
  .bval{text-align:left}
}