:root{
  --ink:#161d2b; --muted:#5c6779; --line:#e2e6ed; --bg:#f5f6f8; --card:#fff;
  --blue:#15558d; --blue-bg:#eef4fb; --teal:#0d7a6f; --teal-bg:#eaf6f4;
  --amber:#8a5a00; --amber-bg:#fdf5e4; --red:#a3261c; --red-bg:#fdeceb;
  --green:#2f6b2a; --green-bg:#eaf3e7;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:960px;margin:0 auto;padding:24px 20px 70px}
.wide{max-width:1240px}

h1{font-size:22px;margin:0 0 4px;letter-spacing:-.01em}
h2{font-size:15px;margin:0 0 10px}
.eyebrow{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:700}
.muted{color:var(--muted)}
.small{font-size:13px}

.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px;margin-bottom:14px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

label{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 5px}
input[type=text],input[type=number],select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:7px;font:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid #b9d3ee;border-color:var(--blue)}
textarea{min-height:78px;resize:vertical}

button{font:inherit;border-radius:7px;border:1px solid var(--line);background:#fff;color:var(--ink);
  padding:9px 15px;cursor:pointer;font-weight:550;transition:background .12s,border-color .12s}
button:hover{background:#f4f6f9;border-color:#cfd6e0}
button:disabled{opacity:.45;cursor:not-allowed}
button.primary{background:var(--blue);border-color:var(--blue);color:#fff}
button.primary:hover{background:#114777}
button.good{background:var(--teal);border-color:var(--teal);color:#fff}
button.good:hover{background:#0a6259}
button.warn{background:var(--amber-bg);border-color:#e8d3a3;color:var(--amber)}
button.ghost{background:transparent}
button.big{font-size:16px;padding:13px 22px}
button.sm{padding:5px 10px;font-size:13px}

.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;font-size:30px;font-weight:700}

.pill{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 8px;border-radius:20px}
.p-core{background:var(--blue-bg);color:var(--blue)}
.p-overflow{background:var(--amber-bg);color:var(--amber)}
.p-live{background:var(--green-bg);color:var(--green)}
.p-closed{background:var(--red-bg);color:var(--red)}
.p-wait{background:var(--amber-bg);color:var(--amber)}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* activity list (setup) */
.act{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border:1px solid var(--line);
  border-radius:8px;margin-bottom:7px;background:#fff}
.act.off{opacity:.45}
.act .num{font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;min-width:20px;padding-top:2px}
.act .body{flex:1;min-width:0}
.act .t{font-weight:600}
.act .m{font-size:12.5px;color:var(--muted);margin-top:2px}
.act .ctl{display:flex;gap:5px;flex-direction:column}

/* participant answer UI */
.opt{display:block;border:1px solid var(--line);border-radius:9px;padding:13px 15px;margin-bottom:9px;
  cursor:pointer;background:#fff;text-align:left;width:100%;font:inherit;transition:all .12s}
.opt:hover{border-color:#9db9d8;background:#f7fafd}
.opt.on{border-color:var(--blue);background:var(--blue-bg);box-shadow:inset 0 0 0 1px var(--blue)}
.opt.correct{border-color:var(--teal);background:var(--teal-bg)}
.opt.wrong{border-color:var(--red);background:var(--red-bg)}

.sortzone{border:1.5px dashed #c3cbd8;border-radius:9px;padding:10px;margin-bottom:10px;background:#fbfcfd;min-height:60px}
.sortzone h4{margin:0 0 8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.chip{display:inline-block;border:1px solid var(--line);background:#fff;border-radius:20px;padding:7px 13px;
  margin:0 6px 6px 0;cursor:grab;font-size:13.5px;user-select:none}
.chip:active{cursor:grabbing}
.chip.on{background:var(--blue-bg);border-color:var(--blue)}

.rankitem{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;margin-bottom:7px;background:#fff}
.rankitem .pos{width:24px;height:24px;border-radius:50%;background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none}
.rankitem .tx{flex:1}

/* host results */
.bar{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.bar .lb{width:38%;font-size:13.5px;text-align:right;color:var(--ink)}
.bar .tr{flex:1;background:#f0f2f6;border-radius:5px;height:26px;overflow:hidden}
.bar .fl{height:100%;background:var(--blue);border-radius:5px;transition:width .3s}
.bar .ct{width:56px;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.bar.right .fl{background:var(--teal)}

.cloud{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline;justify-content:center;padding:18px 8px}
.cloud span{line-height:1.25}

.answers{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:9px}
.ans{border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:#fbfcfd;font-size:13.5px}
.ans .who{font-size:11px;color:var(--muted);margin-bottom:3px;font-weight:600}

.grid-sort{width:100%;font-size:13px}
.grid-sort th{border-bottom:1px solid var(--line)}
.grid-sort td{border-bottom:1px solid var(--line);text-align:center;font-variant-numeric:tabular-nums}
.grid-sort td.it{text-align:left}
td.best{background:var(--teal-bg);font-weight:700;color:var(--teal)}

.timer{font-variant-numeric:tabular-nums;font-size:26px;font-weight:700}
.note{background:var(--amber-bg);border:1px solid #f0e0bb;border-radius:7px;padding:11px 13px;font-size:13.5px}
.key{background:var(--teal-bg);border:1px solid #cfe6e2;border-radius:7px;padding:11px 13px;font-size:13.5px}
.hidden{display:none!important}
.divider{height:1px;background:var(--line);margin:16px 0}

.joinhero{text-align:center;padding:48px 20px}
.joinhero .code{font-size:52px}