/* ===== Setup v2 ===== */
body.mode-setup{background:var(--bg-setup)}
body.mode-setup #acts{justify-content:flex-end;padding:12px 28px;border-bottom:1px solid var(--line)}
.sh{display:flex;align-items:center;gap:12px;width:100%;justify-content:flex-end}
.saved{margin-right:auto;font-size:13px;color:var(--faint)}.saved::before{content:"● ";color:var(--lime)}
.start{height:40px;padding:0 20px;background:var(--lime);color:var(--ink);font-weight:700;font-size:14px}
.start:hover{filter:brightness(1.06)}.start.big{height:56px;width:100%;font-size:17px;margin-top:8px}
/* steps sidebar */
.steps{padding:14px 10px;display:flex;flex-direction:column;gap:2px}
.stp-i{display:flex;align-items:center;gap:12px;padding:10px 10px;border-radius:2px;color:var(--dim);width:100%}
.stp-i:hover{background:var(--p);color:var(--text)}
.stp-i.on{background:var(--p2);color:var(--text)}
.si{width:26px;height:26px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;font-size:12px;flex:none;color:var(--dim)}
.stp-i.ok .si{border-color:transparent;background:var(--limedim2);color:var(--lime)}
.stp-i.warn .si{border-color:var(--orange);color:var(--orange)}
.stp-i.on .si{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.stp-i .nl b{display:block;font-size:14px;font-weight:600}
.stp-i .nl em{display:block;font-style:normal;font-size:12px;color:var(--faint);margin-top:1px}
.stp-i.warn .nl em{color:var(--orange)}
body.sb-closed .steps{padding:10px 0}body.sb-closed .stp-i{justify-content:center;padding:10px 0}
/* page */
.su-page{max-width:820px;margin:0 auto;padding:18px 0 40px;display:flex;flex-direction:column;gap:28px;width:100%}
.su-page.wide{max-width:1320px}
.su-h span{font-size:13px;color:var(--faint)}
.su-h h1{margin:4px 0 6px;font-size:32px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.su-h p{margin:0;font-size:15px;color:var(--dim)}
.su-nav{display:flex;justify-content:space-between;padding-top:20px;border-top:1px solid var(--line)}
.su-nav .btn{height:42px;padding:0 18px;font-size:14px}
.btn.ghost{border-color:transparent;color:var(--dim)}.btn.ghost:hover{color:var(--text);border-color:var(--line2)}
.btn.danger{color:var(--red);border-color:var(--red)}.btn.danger:disabled{opacity:.4;cursor:not-allowed}
.delname{display:block;padding:8px 10px;background:var(--bg);border:1px solid var(--line2);border-radius:3px;color:var(--text);user-select:all;overflow-wrap:anywhere}
.sgroup{display:flex;flex-direction:column;gap:10px}
.sgh{display:flex;justify-content:space-between;align-items:center}
.sgh h2{margin:0;font-size:17px;font-weight:600}.sgh h2 em{font-style:normal;font-size:13px;font-weight:500;margin-left:10px}.sgh h2 em.ok{color:var(--lime)}.sgh h2 em.warn{color:var(--orange)}
.sg{background:var(--p);border:1px solid var(--line);border-radius:4px}
.srow{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:16px 20px;border-top:1px solid var(--line);min-height:64px}
.sg>.srow:first-child,.sg>:first-child{border-top:0}
.sl b{display:block;font-size:15px;font-weight:500}
.sl span{display:block;font-size:13px;color:var(--faint);margin-top:2px;max-width:380px}
.sctl{display:flex;align-items:center;gap:10px;flex:none}
.sin{height:40px;background:var(--bg);border:1px solid var(--line2);border-radius:3px;color:var(--text);padding:0 12px;font-size:14px;font-family:var(--f)}
.sin:focus{outline:none;border-color:var(--lime)}
select.sin{min-width:220px}
.sin.ta{width:100%;height:84px;padding:10px 12px;resize:vertical}
.sseg{display:inline-flex;background:var(--bg);border:1px solid var(--line2);border-radius:3px;padding:3px;gap:2px}
.sseg button{padding:7px 14px;font-size:13.5px;color:var(--dim);border-radius:2px}
.sseg button.on{background:var(--p3);color:var(--text);box-shadow:inset 0 -2px 0 var(--lime)}
.sseg.sm button{padding:6px 11px;font-size:12.5px}
.stp{display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:3px;background:var(--bg)}
.stp button{width:38px;height:38px;font-size:18px;color:var(--dim)}.stp button:hover{color:var(--text)}
.stp b{min-width:40px;text-align:center;font-size:15px;line-height:38px;border:0}
.stp.mini button{width:30px;height:30px}.stp.mini b{line-height:30px;min-width:26px}
.unit{font-size:13px;color:var(--faint)}
.tcol{display:flex;gap:2px;width:160px;height:8px}.tcol i{display:block}.tcol .g{background:var(--lime)}.tcol .o{background:var(--orange)}.tcol .r{background:var(--red)}
/* the night */
.tline{display:flex;gap:3px;align-items:stretch;position:relative}
.tline>div[data-ac]{min-width:0;padding:10px 12px 12px;background:var(--p);border-top:3px solid var(--line2);cursor:pointer}
.tline>div[data-ac]:hover{background:var(--p2)}.tline>div.on{border-top-color:var(--lime);background:var(--p2)}
.tline span{display:block;font-size:12px;color:var(--faint)}.tline b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tend{align-self:flex-end;font-size:12px;color:var(--faint);padding:0 0 12px 8px}
.tsum{font-size:13px;color:var(--faint);margin-top:-16px}
.acc{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:4px;background:var(--p)}
.ac+.ac{border-top:1px solid var(--line)}
.ac-h{display:grid;grid-template-columns:60px 170px 1fr 24px;align-items:center;gap:12px;width:100%;padding:18px 20px;text-align:left}
.ac-h:hover{background:var(--p2)}
.ac-h span{font-size:13px;color:var(--faint)}.ac-h b{font-size:15px;font-weight:600}.ac-h em{font-style:normal;color:var(--dim);font-size:14px}.ac-h i{font-style:normal;color:var(--faint);font-size:18px;text-align:right}
.ac.open .ac-h{background:var(--p2)}.ac.open .ac-h b{color:var(--lime)}
.ac-b{border-top:1px solid var(--line);background:var(--bg)}
.ac-b .srow{padding-left:92px}
/* matching */
.qwrap{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px;align-items:start}
.qrow{display:grid;grid-template-columns:28px 1fr 28px;gap:12px;align-items:center;padding:12px 16px 12px 20px;border-top:1px solid var(--line);cursor:pointer}
.sg>.qrow:first-child{border-top:0}
.qrow:hover{background:var(--p2)}.qrow.on{background:var(--p2);box-shadow:inset 3px 0 0 var(--lime)}
.qn{font-size:12px;color:var(--faint)}.qrow b{display:block;font-weight:500;font-size:14.5px}.qrow span{font-size:12px;color:var(--faint)}
.x{width:28px;height:28px;color:var(--faint);font-size:18px}.x:hover{color:var(--red)}
.phone{border:1px solid var(--line2);border-radius:30px;padding:9px;background:var(--p);position:sticky;top:90px}
.ph-in{background:#f6f6f2;color:#111;border-radius:22px;padding:22px 16px;min-height:400px;display:flex;flex-direction:column;gap:8px}
.ph-k{font:600 11px var(--f);color:#888}.ph-q{font-size:18px;font-weight:600;line-height:1.25;margin-bottom:10px}
.ph-o{border:1.5px solid #e2e2dc;border-radius:12px;padding:12px 14px;font-size:14px}.ph-o.on{border-color:#111;background:#d9fd64}
.ph-n{margin-top:auto;background:#8864fd;color:#fff;text-align:center;border-radius:12px;padding:12px;font-weight:600}
.ph-cap{text-align:center;font-size:12px;color:var(--faint);margin-top:10px}
/* content lists */
.tabs2{display:flex;gap:24px;border-bottom:1px solid var(--line)}
.tabs2 button{padding:0 0 12px;font-size:15px;font-weight:600;color:var(--faint);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs2 button.on{color:var(--text);border-color:var(--lime)}
.lrow{display:grid;grid-template-columns:110px 1fr auto 20px;gap:16px;align-items:center;padding:16px 20px;border-top:1px solid var(--line);cursor:pointer;width:100%;text-align:left}
.sg>.lrow:first-child{border-top:0}
.lrow:hover{background:var(--p2)}
.lrow b{display:block;font-size:15px;font-weight:500}.lrow span{font-size:13px;color:var(--faint)}
.lrow .use{font-size:13px;color:var(--dim)}.chev{color:var(--faint);font-size:18px}
.lrow.add{display:block;color:var(--lime);font-weight:600;font-size:14px}
.gt{font:600 10.5px var(--m);letter-spacing:.1em;text-transform:uppercase;color:var(--purple-t)!important}
/* venue + review */
.vbar{display:flex;justify-content:space-between;font-size:14px;color:var(--dim)}.vbar b{color:var(--text)}
.note{font-size:13px;color:var(--faint);margin:0}
.rv{display:flex;flex-direction:column;gap:28px}
.rv-qr{display:flex;gap:24px;align-items:center;padding:20px}.rv-qr .qr{width:150px;height:150px}
.rv-qr b{font-size:34px;display:block;line-height:1}.rv-qr span{color:var(--dim);font-size:14px}.rv-qr code{display:block;margin-top:10px;font:500 13px var(--m);color:var(--dim)}
/* slide-over */
.so{position:fixed;inset:0;z-index:65;pointer-events:none}
.so.open{pointer-events:auto;background:rgba(0,0,0,.5)}
.so-p{position:absolute;top:0;right:0;bottom:0;width:560px;max-width:100%;background:var(--p);border-left:1px solid var(--line2);overflow:auto;padding:24px 0}
.so-h{display:flex;justify-content:space-between;align-items:center;padding:0 24px 16px;border-bottom:1px solid var(--line)}
.so-h h2{margin:0;font-size:22px;font-weight:600}
.so-p>p{padding:14px 24px 0;margin:0}
.so-p .srow{padding:14px 24px}
.so-blk{padding:16px 24px;border-top:1px solid var(--line)}.so-blk>b{display:block;font-weight:500;margin-bottom:10px}
.so-f{display:flex;justify-content:space-between;padding:20px 24px;border-top:1px solid var(--line)}
.chips{display:flex;flex-wrap:wrap;gap:6px}.chips span{padding:7px 10px;border:1px solid var(--line2);border-radius:3px;font-size:13px}.chips span i{font-style:normal;color:var(--faint);margin-left:8px}
.chip-add{padding:7px 10px;border:1px dashed var(--line2);border-radius:3px;color:var(--lime);font-size:13px}
.modal .mb{width:520px;padding:26px}.modal .mb h2{margin:0 0 6px;font-size:22px}.modal .mb>p{margin:0 0 18px;font-size:14px}
.modal .mb .srow{padding:12px 16px;min-height:0}
.mb-f{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
/* ===== designer ===== */
.dz{display:grid;grid-template-columns:180px minmax(0,1fr) 270px;gap:20px;align-items:start}
.dz-h{font-size:12px;font-weight:600;color:var(--faint);margin:0 0 10px}
.dz-sc{display:flex;flex-direction:column;gap:10px}
.dz-sc>button{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500;color:var(--dim);text-align:left}
.dz-sc>button .scr{border-radius:2px;pointer-events:none}
.dz-sc>button.on{color:var(--text)}.dz-sc>button.on .scr{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime)}
.dz-note{font-size:12px;color:var(--faint);margin:6px 0 0}
.dz-tb{display:flex;align-items:center;gap:14px;margin-bottom:12px;flex-wrap:wrap}.dz-tb b{font-size:16px;margin-right:auto}
.swc{display:flex;gap:6px;align-items:center}
.swc button{width:24px;height:24px;border-radius:50%;border:2px solid var(--line2)}
.swc button.on{border-color:var(--text);box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--text)}
.swc .img{width:auto;border-radius:3px;padding:0 9px;font-size:12px;color:var(--dim);border:1px solid var(--line2);height:24px}
.canvas{position:relative;aspect-ratio:16/9;container-type:inline-size;border:1px solid var(--line2);overflow:hidden;touch-action:none;user-select:none}
.canvas.grid::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:5% 8.888%}
#dzfocus{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.dz-hint{font-size:12.5px;color:var(--faint);margin:10px 0 0}
.lay{position:absolute;inset:0}
.el{position:absolute;overflow:hidden;line-height:1.15;color:#f3f3ef;font-family:var(--f)}
.el-timer,.el-clock{font-family:var(--m);line-height:.9;letter-spacing:-.04em}
.el-qr svg{height:100%;width:auto;display:block}
.e-tbl{display:grid;grid-template-columns:repeat(4,1fr);gap:.35em 1.2em;color:#d0d0d4}.e-tbl b{color:#d9fd64;font-family:var(--m);margin-right:.5em}
.e-vote div{display:grid;grid-template-columns:8em 1fr 2em;gap:.6em;align-items:center;margin:.35em 0}.e-vote i{display:block;height:.7em;background:#d9fd64}.e-vote b{font-family:var(--m)}
.e-logo{width:100%;height:100%;border:1px dashed currentColor;display:grid;place-items:center;font-size:.8em;opacity:.6}
.canvas .el{cursor:move;outline:1px dashed transparent}
.canvas .el:hover{outline-color:rgba(217,253,100,.45)}
.canvas .el.sel{outline:2px solid #d9fd64;overflow:visible}
.rh{display:none;position:absolute;right:-6px;bottom:-6px;width:12px;height:12px;background:#d9fd64;border:2px solid #000;cursor:nwse-resize}
.canvas .el.sel .rh{display:block}
.dz-i{background:var(--p);border:1px solid var(--line);padding:16px;position:sticky;top:90px}
.pal{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:22px}
.pal button{padding:9px 10px;border:1px solid var(--line2);border-radius:3px;font-size:13px;text-align:left}
.pal button:hover{border-color:var(--lime);color:var(--lime)}
.dz-empty{font-size:13px;color:var(--faint);margin:0}
.dz-f{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;font-size:13px;color:var(--dim)}
.dz-f>span{display:flex;justify-content:space-between}
.dz-f textarea{background:var(--bg);border:1px solid var(--line2);border-radius:3px;color:var(--text);padding:8px 10px;font:inherit;resize:vertical}
.dz-f input[type=range]{accent-color:var(--lime);width:100%}
.dz-row{display:flex;gap:6px;flex-wrap:wrap}
/* console monitors render designed layouts */
.scr .scr-in>.lay{inset:0}
@media (max-width:1250px){.dz{grid-template-columns:1fr}.dz-sc{flex-direction:row;overflow-x:auto}.dz-sc>button{flex:0 0 150px}.dz-i{position:static}.qwrap{grid-template-columns:1fr}.phone{position:static;max-width:300px}}

/* Users page */
.ulist{display:flex;flex-direction:column}
.urow{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:12px 20px;align-items:center;padding:14px 20px;border-top:1px solid var(--line)}
.ulist>.urow:first-child{border-top:0}
.urow.off .uwho b{color:var(--faint)}
.uwho b{display:block;font-size:15px;font-weight:500;overflow-wrap:anywhere}
.uwho span{display:block;font-size:13px;color:var(--faint);overflow-wrap:anywhere}
.umeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.uact{display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:flex-end}
.uact select.sin{min-width:0;width:130px;height:34px}
.unotice{margin:0;padding:12px 16px;border:1px solid var(--lime);color:var(--lime);font-size:14px;overflow-wrap:anywhere}
.su-page .srow .sin{max-width:100%}
@media (max-width:900px){.urow{grid-template-columns:minmax(0,1fr)}.uact{justify-content:flex-start}}
@media (max-width:640px){.su-page .srow{flex-direction:column;align-items:stretch;gap:10px}.su-page .sctl{flex-wrap:wrap}.su-page .sl span{max-width:none}}
/* designer: bilingual text, lock, snap guides, preview, aspect, colours, save status */
.el .bi-zh{display:block;font-size:.8em;opacity:.85}
.el .lk{position:absolute;right:2px;top:2px;width:1.1em;height:1.1em;font-size:clamp(10px,1.1cqw,16px);color:#000;background:#d9fd64;border-radius:2px;display:grid;place-items:center;pointer-events:none;font-style:normal;line-height:1}
.canvas .el.locked{cursor:not-allowed}
.canvas .el.sel .lk{display:grid}
#dzguides{position:absolute;inset:0;pointer-events:none;z-index:5}
.gd{position:absolute;background:#ff4fd8}.gd.v{top:0;bottom:0;width:1px}.gd.h{left:0;right:0;height:1px}
.canvas.pv .el{overflow:visible}
.canvas.pv .el.ovf{outline:2px solid #ff5a43}
.cvwrap.a43{aspect-ratio:4/3;background:#000;display:grid;place-items:center;border:1px solid var(--line2)}
.cvwrap.a43 .canvas{width:100%;border:0}
.dz-save{font-size:12.5px;color:var(--dim)}.dz-save[data-state=ok]{color:var(--lime)}.dz-save[data-state=bad]{color:var(--red)}
.swc.cust{margin-top:8px}.swc.rec{margin-top:8px;flex-wrap:wrap}.swc.rec .dim{font-size:12px}
.cpick{width:34px;height:28px;padding:0;border:1px solid var(--line2);background:none}
.hexin{width:96px;font-family:var(--m)}
.pos{display:grid;grid-template-columns:1fr 1fr;gap:8px}.pos label{display:flex;flex-direction:column;gap:4px;font-size:12px}.pos input{width:100%}
.btn.on{background:var(--p3);box-shadow:inset 0 -2px 0 var(--lime)}

/* Fun facts editor rows */
.lrow.ffrow{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.ffrow .num{flex:0 0 22px}
.ffrow .ffin{flex:1 1 auto;display:flex;gap:8px;min-width:0}
.ffrow .ffin .sin{flex:1 1 0;min-width:0;width:auto}
.ffrow>.dim{flex:0 0 74px;text-align:right;white-space:nowrap}
.ffrow>.btn{flex:0 0 auto;width:auto;min-width:0;white-space:nowrap}

/* Events list: a Delete button beside each event */
.lirow{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line)}.lirow>.li{flex:1;min-width:0;border-top:0;text-align:left}.lirow>.btn{flex:none}
.list>.lirow:first-child{border-top:0}
.vmeta{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:12.5px}
.vrow .uwho span:empty{display:none}