/* WysMy - host-facing pages. Fun & playful, on the brand palette (see theme.css). */
* { box-sizing:border-box; }
html, body { margin:0; }
body {
  font-family:var(--font); color:var(--ink); line-height:1.45; font-weight:500;
  background:var(--bg);
}
a { color:var(--hl); font-weight:700; }
button, input, select, textarea { font:inherit; color:inherit; }
h1, h2, h3, .btn, .tab, .pill, label.l { font-family:var(--font-head); }
.hide { display:none !important; }
.sp { flex:1; }
.dim { color:var(--dim); }
:focus-visible { outline:3px solid var(--pop2); outline-offset:2px; }

/* ---------- brand ---------- */
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.brand img { transition:transform .3s cubic-bezier(.3,1.8,.5,1); }
.brand:hover img { transform:rotate(-12deg) scale(1.12); }
.wordmark { font-size:25px; }

/* ---------- top bar (Deep Slate) ---------- */
.topbar { background:var(--nav-bg); color:var(--nav-ink); border-bottom:4px solid var(--brand); padding:9px 22px; display:flex; align-items:center; gap:16px; position:sticky; top:0; z-index:20; flex-wrap:wrap; }
.topbar .brand, .topbar .wordmark { color:var(--nav-ink); }
.nav { display:flex; gap:4px; flex-wrap:wrap; }
.nav a { padding:7px 14px; border-radius:99px; text-decoration:none; color:var(--nav-dim); font-family:var(--font-head); font-weight:600; font-size:16px; }
.nav a:hover { background:rgba(255,255,255,.1); color:#fff; }
.nav a.on { background:var(--brand); color:var(--on-brand); box-shadow:0 3px 0 var(--brand-d); }
.who { color:var(--nav-dim); font-size:14px; font-weight:700; }
.badge { font-family:var(--font-head); font-weight:600; font-size:13px; padding:4px 12px; border-radius:99px; background:rgba(255,255,255,.12); color:var(--nav-ink); text-decoration:none; white-space:nowrap; }
.badge:hover { background:rgba(255,255,255,.2); }
.badge.pro { background:var(--pop2); color:#3a2a00; }
.badge.warn { background:var(--pop1); color:#3a0a0a; }
.langsw { display:inline-flex; background:rgba(255,255,255,.12); border-radius:99px; padding:3px; gap:2px; }
.langsw a { font-family:var(--font-head); font-weight:700; font-size:13px; padding:3px 11px; border-radius:99px; text-decoration:none; color:var(--nav-dim); }
.langsw a.on { background:var(--brand); color:var(--on-brand); }
.themebtn { border:0; background:rgba(255,255,255,.12); color:var(--nav-ink); width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:16px; line-height:1; transition:transform .25s cubic-bezier(.3,1.8,.5,1); }
.themebtn:hover { background:rgba(255,255,255,.22); transform:rotate(20deg) scale(1.1); }
.topbar .btn { background:transparent; color:var(--nav-ink); border-color:rgba(255,255,255,.3); box-shadow:none; }
.topbar .btn:hover { background:rgba(255,255,255,.12); }

main.wrap { max-width:1180px; margin:0 auto; padding:28px 24px 70px; }
h1.pg { font-size:32px; margin:0 0 4px; letter-spacing:-.01em; }
.sub { color:var(--dim); margin:0 0 22px; font-size:17px; }

/* ---------- buttons: chunky, press down ---------- */
.btn { border:2px solid var(--line); background:var(--card); padding:8px 16px; border-radius:14px; cursor:pointer; font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:7px; color:var(--ink); box-shadow:0 3px 0 var(--line); transition:transform .08s, box-shadow .08s, background .15s; font-size:15px; }
.btn:hover { background:var(--soft); transform:translateY(-1px); box-shadow:0 4px 0 var(--line); }
.btn:active { transform:translateY(3px); box-shadow:0 0 0 var(--line); }
.btn.pri, .btn.go { background:var(--brand); border-color:var(--brand-d); color:var(--on-brand); box-shadow:0 4px 0 var(--brand-d); }
.btn.pri:hover, .btn.go:hover { background:#3ccfc5; box-shadow:0 5px 0 var(--brand-d); }
.btn.pri:active, .btn.go:active { box-shadow:0 0 0 var(--brand-d); }
.btn.fun { background:var(--pop1); border-color:#d94b4b; color:#3a0a0a; box-shadow:0 4px 0 #d94b4b; }
.btn.fun:hover { background:#ff8282; }
.btn.fun:active { box-shadow:0 0 0 #d94b4b; }
.btn.sun { background:var(--pop2); border-color:#d9a000; color:#3a2a00; box-shadow:0 4px 0 #d9a000; }
.btn.danger { color:var(--bad); }
.btn.sm { padding:4px 11px; font-size:13px; border-radius:11px; box-shadow:0 2px 0 var(--line); }
.btn.sm.pri, .btn.sm.go { box-shadow:0 2px 0 var(--brand-d); }
.btn.lg { padding:13px 26px; font-size:19px; border-radius:18px; }
.btn:disabled { opacity:.5; cursor:default; transform:none; }

/* ---------- cards ---------- */
.card { background:var(--card); border:2px solid var(--line); border-radius:22px; padding:20px; box-shadow:0 6px 0 var(--line); }
.cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:20px; }
.pcard { display:flex; flex-direction:column; gap:10px; position:relative; overflow:hidden; padding-top:26px; transition:transform .2s cubic-bezier(.3,1.6,.5,1); }
.pcard:hover { transform:translateY(-3px) rotate(-.4deg); }
.pcard::before { content:''; position:absolute; left:0; right:0; top:0; height:10px; background:var(--stripe, var(--brand)); }
.pcard h3 { margin:0; font-size:21px; line-height:1.2; }
.pcard .meta { color:var(--dim); font-size:14px; display:flex; flex-wrap:wrap; gap:4px 14px; font-weight:700; }
.pcard .acts { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:8px; }
.tiles { display:flex; gap:6px; flex-wrap:wrap; }
.ticon { background:var(--soft); border-radius:10px; padding:2px 8px; font-size:14px; }
.banner { background:var(--tint2); border:2px solid rgba(255,197,61,.55); border-radius:18px; padding:14px 18px; margin-bottom:20px; display:flex; flex-direction:column; gap:10px; }
.banner.info { background:var(--soft); border-color:rgba(34,187,177,.45); }
.banner.bad { background:var(--tint1); border-color:rgba(255,107,107,.55); }
.banner.ok { background:var(--soft); border-color:rgba(34,187,177,.55); }
.banner .row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.empty { text-align:center; padding:56px 20px; color:var(--dim); }
.empty .big { font-size:62px; display:inline-block; animation:wobble 2.4s ease-in-out infinite; }
@keyframes wobble { 0%,100% { transform:rotate(-8deg); } 50% { transform:rotate(8deg) scale(1.08); } }

/* ---------- forms ---------- */
label.l { display:block; font-size:13px; font-weight:600; letter-spacing:.03em; color:var(--dim); margin:0 0 5px; }
input[type=text], input[type=email], input[type=password], input[type=number], textarea, select {
  width:100%; padding:10px 13px; border:2px solid var(--line); border-radius:14px; background:var(--input); outline:none; font-weight:600; }
input:focus, textarea:focus, select:focus { border-color:var(--brand); box-shadow:0 0 0 4px rgba(34,187,177,.2); }
textarea { resize:vertical; min-height:70px; }
.field { margin-bottom:14px; }
.row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.msg { font-size:14px; color:var(--dim); font-weight:600; }
.msg.er { color:var(--bad); } .msg.ok { color:var(--good); }
.seg { display:inline-flex; background:var(--soft); border-radius:14px; padding:4px; gap:3px; flex-wrap:wrap; }
.seg label { cursor:pointer; padding:6px 13px; border-radius:11px; font-family:var(--font-head); font-weight:600; font-size:14px; color:var(--dim); }
.seg input { display:none; }
.seg label:has(input:checked) { background:var(--card); color:var(--hl); box-shadow:0 2px 0 var(--line); }

/* ---------- modal & toast ---------- */
.modal-bg { position:fixed; inset:0; background:rgba(15,23,42,.6); display:flex; align-items:center; justify-content:center; z-index:50; padding:16px; backdrop-filter:blur(2px); }
.modal { background:var(--card); border-radius:26px; padding:24px; width:min(560px,100%); max-height:90vh; overflow:auto; border:3px solid var(--line); box-shadow:0 10px 0 var(--line); animation:pop .28s cubic-bezier(.3,1.7,.5,1); }
.modal h2 { margin:0 0 14px; }
@keyframes pop { from { transform:scale(.85); opacity:0; } }
#toast { position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px); background:var(--slate); color:#fff; padding:12px 22px; border-radius:99px; opacity:0; pointer-events:none; transition:.25s cubic-bezier(.3,1.6,.5,1); z-index:99; max-width:90vw; font-weight:700; border:2px solid var(--brand); }
#toast.show { opacity:1; transform:translate(-50%,0); }
#toast.bad { background:var(--bad); border-color:var(--bad); color:#fff; }

/* ---------- login / landing ---------- */
body.auth { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; position:relative; }
.authbox { width:min(430px,100%); }
.authbox .logo { text-align:center; margin-bottom:22px; }
.authbox .logo .wordmark { font-size:42px; }
.authbox .logo img { width:84px; height:84px; display:block; margin:0 auto 6px; animation:bob 3s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform:translateY(0) rotate(-3deg); } 50% { transform:translateY(-7px) rotate(3deg); } }
.corner { position:fixed; top:14px; right:16px; z-index:5; display:flex; gap:8px; align-items:center; }
.corner .langsw { background:var(--card); border:2px solid var(--line); }
.corner .langsw a { color:var(--dim); }
.corner .themebtn { background:var(--card); border:2px solid var(--line); color:var(--ink); }
.tabs { display:flex; background:var(--soft); border-radius:16px; padding:4px; margin-bottom:18px; }
.tabs button { flex:1; border:0; background:none; padding:9px; border-radius:12px; font-family:var(--font-head); font-weight:600; font-size:16px; color:var(--dim); cursor:pointer; }
.tabs button.on { background:var(--card); color:var(--hl); box-shadow:0 2px 0 var(--line); }
.codein { font-family:var(--font-head); font-size:34px; text-align:center; letter-spacing:.3em; text-transform:uppercase; font-weight:700; padding:14px 10px 14px 24px; }

/* ---------- editor ---------- */
body.editor { height:100vh; overflow:hidden; display:flex; flex-direction:column; }
.edbar { background:var(--card); border-bottom:3px solid var(--line); padding:9px 18px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.edbar .title { max-width:340px; font-family:var(--font-head); font-weight:600; font-size:18px; }
.edmain { flex:1; min-height:0; display:grid; grid-template-columns:300px 1fr; }
.rail { background:var(--card); border-right:3px solid var(--line); display:flex; flex-direction:column; min-height:0; }
.rail .list { flex:1; overflow:auto; padding:10px; }
.rail .add { padding:12px; border-top:3px solid var(--line); position:relative; }
.qitem { display:flex; gap:10px; align-items:flex-start; padding:9px 10px; border-radius:16px; cursor:pointer; border:2px solid transparent; }
.qitem:hover { background:var(--soft); }
.qitem.on { background:var(--soft); border-color:rgba(34,187,177,.6); }
.qitem .n { width:26px; height:26px; border-radius:9px; background:var(--soft); color:var(--hl); font-family:var(--font-head); font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; flex:none; }
.qitem.on .n { background:var(--brand); color:var(--on-brand); }
.qitem .t { font-size:14px; line-height:1.3; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:break-word; font-weight:700; }
.qitem .k { font-size:12px; color:var(--dim); font-weight:600; }
.qitem.bad .n { background:var(--bad); color:#fff; }
.typemenu { position:absolute; left:12px; right:12px; bottom:66px; background:var(--card); border:3px solid var(--line); border-radius:20px; box-shadow:0 12px 30px var(--shadow); padding:6px; z-index:10; max-height:70vh; overflow:auto; }
.typemenu button { display:flex; gap:11px; align-items:center; width:100%; text-align:left; border:0; background:none; padding:9px 10px; border-radius:13px; cursor:pointer; }
.typemenu button:hover { background:var(--soft); }
.typemenu .ic { font-size:24px; width:32px; text-align:center; }
.typemenu small { display:block; color:var(--dim); font-size:12px; font-weight:600; }
.canvas { overflow:auto; padding:24px; }
.qedit { max-width:840px; margin:0 auto; display:flex; flex-direction:column; gap:18px; }
.typepick { display:flex; flex-wrap:wrap; gap:8px; }
.typepick button { border:2px solid var(--line); background:var(--card); border-radius:14px; padding:7px 13px; cursor:pointer; font-family:var(--font-head); font-weight:600; display:flex; gap:7px; align-items:center; box-shadow:0 2px 0 var(--line); }
.typepick button.on { border-color:var(--brand); background:var(--soft); color:var(--hl); box-shadow:0 2px 0 var(--brand); }
.opt { display:flex; align-items:center; gap:9px; margin-bottom:8px; }
.opt .k { width:30px; height:30px; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; font-family:var(--font-head); font-weight:700; flex:none; }
.opt input[type=radio] { flex:none; width:22px; height:22px; accent-color:var(--brand); }
.tfpick { display:flex; gap:12px; }
.tfpick label { flex:1; border:3px solid var(--line); border-radius:18px; padding:18px; text-align:center; font-size:22px; font-family:var(--font-head); font-weight:700; cursor:pointer; }
.tfpick input { display:none; }
.tfpick label:has(input:checked) { border-color:var(--brand); background:var(--soft); color:var(--hl); }
.imgdrop { border:3px dashed var(--grey); border-radius:18px; padding:18px; text-align:center; color:var(--dim); cursor:pointer; font-weight:700; }
.imgdrop.over { border-color:var(--brand); background:var(--soft); }
.imgprev { display:flex; gap:14px; align-items:center; }
.imgprev img { max-width:220px; max-height:140px; border-radius:14px; border:2px solid var(--line); object-fit:contain; background:var(--soft); }
.pill { display:inline-block; background:var(--soft); color:var(--hl); border-radius:99px; padding:2px 11px; font-size:13px; font-weight:600; }
.pill.gold { background:var(--tint2); color:#8a6100; } .pill.pink { background:var(--tint1); color:#c23c3c; } .pill.teal { background:var(--soft); color:var(--hl); }
:root[data-theme="dark"] .pill.gold { color:var(--pop2); } :root[data-theme="dark"] .pill.pink { color:var(--pop1); }
.secs { display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.secs input { width:84px; }
.dirty { display:inline-flex; align-items:center; gap:8px; color:var(--dim); font-weight:700; font-size:13px; white-space:nowrap; }
.dirty i { width:10px; height:10px; border-radius:50%; background:var(--pop2); box-shadow:0 0 0 4px rgba(255,197,61,.28); animation:dirtyPulse 1.8s ease-in-out infinite; }
@keyframes dirtyPulse { 50% { box-shadow:0 0 0 7px rgba(255,197,61,.05); } }
@media (prefers-reduced-motion:reduce) { .dirty i { animation:none; } }
.ptsbox { background:var(--soft); border:2px solid rgba(34,187,177,.5); border-radius:18px; padding:14px 16px; }
.ptsrow { display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; }
.ptsrow > div { flex:1; min-width:80px; }

/* ---------- console ---------- */
.console { display:grid; grid-template-columns:1fr 340px; gap:20px; align-items:start; }
@media (max-width:900px) { .console { grid-template-columns:1fr; } }
.codebig { font-family:var(--font-head); font-size:52px; font-weight:700; letter-spacing:.14em; color:var(--hl); line-height:1; }
.ro { display:flex; gap:10px; align-items:center; padding:9px 14px; border-radius:14px; margin-bottom:6px; color:#fff; font-weight:700; position:relative; overflow:hidden; }
.ro .f { position:absolute; left:0; top:0; bottom:0; background:rgba(255,255,255,.24); }
.ro > span { position:relative; }
.ro .n { margin-left:auto; font-family:var(--font-head); font-weight:700; }
.ro.dim { opacity:.4; } .ro.right { outline:4px solid var(--good); outline-offset:1px; }
.chip { display:inline-flex; align-items:center; gap:6px; background:var(--soft); border-radius:99px; padding:3px 6px 3px 12px; font-size:14px; margin:0 6px 6px 0; font-weight:700; }
.chip button { border:0; background:none; cursor:pointer; color:var(--dim); font-size:15px; line-height:1; padding:0 4px; }
.chip button:hover { color:var(--bad); }
.bigtimer { font-family:var(--font-head); font-size:50px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--pop1); }
.ocard { border:2px solid var(--line); border-radius:14px; padding:8px 12px; margin-bottom:6px; display:flex; gap:10px; align-items:flex-start; }
.ocard small { color:var(--dim); display:block; }
.ocard button { margin-left:auto; border:0; background:none; cursor:pointer; color:var(--dim); }
.ribbon { background:repeating-linear-gradient(45deg,var(--pop2),var(--pop2) 14px,#ffd466 14px,#ffd466 28px); color:#3a2a00; font-family:var(--font-head); font-weight:700; text-align:center; padding:7px 14px; letter-spacing:.04em; }
.pickctl { border:3px dashed var(--grey); border-radius:20px; padding:14px 16px; margin-top:16px; background:var(--soft); }
.pickctl h3 { margin:0 0 8px; font-size:18px; }
.pickres { background:var(--tint2); border-radius:16px; padding:10px 14px; margin:8px 0; font-family:var(--font-head); font-weight:600; font-size:20px; }

/* ---------- tables ---------- */
table.t { width:100%; border-collapse:collapse; }
table.t th { text-align:left; font-family:var(--font-head); font-weight:600; font-size:13px; letter-spacing:.04em; color:var(--dim); padding:10px 12px; border-bottom:3px solid var(--line); }
table.t td { padding:12px; border-bottom:2px solid var(--line); vertical-align:middle; }
table.t tr:last-child td { border-bottom:0; }
table.t tr:hover td { background:var(--soft); }

/* ---------- plans & billing ---------- */
.plans { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:18px; margin:22px 0 8px; }
.plan { position:relative; text-align:center; display:flex; flex-direction:column; gap:6px; }
.plan h3 { margin:0; font-size:22px; }
.plan .price { font-family:var(--font-head); font-size:44px; font-weight:700; line-height:1.05; }
.plan .price small { font-size:16px; color:var(--dim); font-weight:600; }
.plan ul { list-style:none; margin:8px 0 14px; padding:0; text-align:left; font-weight:700; font-size:15px; }
.plan li { padding:3px 0 3px 26px; position:relative; }
.plan li::before { content:'\2713'; position:absolute; left:2px; color:var(--brand); font-weight:800; }
.plan .btn { justify-content:center; margin-top:auto; }
.plan.best { border-color:var(--brand); box-shadow:0 6px 0 var(--brand-d); transform:translateY(-6px); }
.plan .tag { position:absolute; top:-14px; left:50%; transform:translateX(-50%) rotate(-3deg); background:var(--pop2); color:#3a2a00; font-family:var(--font-head); font-weight:700; font-size:13px; padding:3px 14px; border-radius:99px; white-space:nowrap; }
.plan.free { border-style:dashed; box-shadow:none; }
.meter { height:14px; border-radius:99px; background:var(--soft); overflow:hidden; }
.meter > i { display:block; height:100%; background:linear-gradient(90deg,var(--brand),var(--pop2)); border-radius:99px; }
.status { display:inline-block; padding:2px 12px; border-radius:99px; font-family:var(--font-head); font-weight:600; font-size:13px; }
.status.paid { background:var(--soft); color:var(--hl); } .status.pending { background:var(--tint2); color:#8a6100; } .status.cancelled { background:rgba(148,163,184,.25); color:var(--dim); }
:root[data-theme="dark"] .status.pending { color:var(--pop2); }

@media (max-width:760px) {
  .topbar { padding:8px 12px; gap:10px; }
  .edmain { grid-template-columns:1fr; grid-template-rows:auto 1fr; }
  .rail { border-right:0; border-bottom:3px solid var(--line); max-height:34vh; }
  main.wrap { padding:18px 14px 50px; }
  .plan.best { transform:none; }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }
@media (max-width:1500px) { .topbar .who { display:none; } }

/* join-screen preview in the editor */
.jprev { background:var(--navy); color:#fff; border-radius:18px; padding:18px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:6px; }
.jprev img { max-height:64px; max-width:60%; object-fit:contain; border-radius:10px; }
.jprev b { font-family:var(--font-head); font-size:22px; line-height:1.15; }
.jprev .d { opacity:.75; font-weight:700; }
.jprev .qr { width:70px; height:70px; background:#fff; border-radius:10px; margin-top:6px; background-image:linear-gradient(45deg,#213547 25%,transparent 25%,transparent 75%,#213547 75%),linear-gradient(45deg,#213547 25%,transparent 25%,transparent 75%,#213547 75%); background-size:14px 14px; background-position:0 0,7px 7px; }

/* the plan this account is on right now */
.plan.current { border-color:var(--brand); background:linear-gradient(180deg, var(--soft), var(--card) 55%); box-shadow:0 0 0 4px rgba(34,187,177,.28), 0 6px 0 var(--brand-d); }
.plan .tag.cur { background:var(--brand); color:var(--on-brand); }
.plan.current.free { box-shadow:0 0 0 4px rgba(34,187,177,.28); border-style:solid; }
.couponbox { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.couponbox input { max-width:260px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; }

/* dashboard search */
.searchbar { display:flex; align-items:center; gap:10px; background:var(--card); border:2px solid var(--line); border-radius:99px; padding:4px 16px; margin-top:18px; max-width:520px; box-shadow:0 3px 0 var(--line); }
.searchbar:focus-within { border-color:var(--brand); box-shadow:0 3px 0 var(--brand-d); }
.searchbar input { border:0; box-shadow:none !important; background:transparent; padding:9px 4px; }
.searchbar input:focus { border:0; box-shadow:none; }
.searchbar .mag { font-size:18px; opacity:.7; }

/* pricing page: "no contracts" promise */
.nocontract { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin:0 auto 26px; max-width:960px; }
.nocontract div { background:var(--soft); border:2px solid var(--brand); border-radius:18px; padding:14px 18px; display:flex; flex-direction:column; gap:4px; box-shadow:0 4px 0 var(--brand); }
.nocontract b { font-family:var(--font-head); font-size:19px; }
.nocontract span { color:var(--dim); font-size:14px; }

/* report viewer: menu on top, the report fills the rest */
body.repframe { height:100vh; display:flex; flex-direction:column; overflow:hidden; }
.repview { flex:1; min-height:0; width:100%; border:0; background:#eef2f6; }

/* editor question list: cards with a typed tile, heading and hover preview */
.qitem { align-items:center; gap:12px; padding:9px 10px; margin-bottom:6px; border:2px solid var(--line); background:var(--card); border-radius:16px; transition:transform .12s, box-shadow .12s, border-color .12s; }
.qitem:hover { background:var(--soft); transform:translateX(3px); box-shadow:0 3px 0 var(--line); }
.qitem.on { background:var(--soft); border-color:var(--brand); box-shadow:0 3px 0 var(--brand); }
.qitem .n { position:relative; width:42px; height:42px; border-radius:13px; background:var(--tint,var(--brand)); color:#213547; display:flex; align-items:center; justify-content:center; flex:none; }
.qitem .n b { position:absolute; top:-7px; left:-7px; min-width:20px; height:20px; padding:0 4px; border-radius:99px; background:var(--card); color:var(--ink); border:2px solid var(--tint,var(--brand)); font:700 11px var(--font-head); display:flex; align-items:center; justify-content:center; }
.qitem .n i { font-style:normal; font-size:20px; }
.qitem.on .n, .qitem.bad .n { background:var(--tint,var(--brand)); color:#213547; }
.qitem .qb { min-width:0; }
.qitem .t { font-family:var(--font-head); font-size:15px; font-weight:600; }
.qitem .warn { font-size:12px; font-weight:700; color:var(--bad); }
.qitem.bad { border-color:var(--bad); }
.qtip { position:fixed; z-index:60; width:340px; max-width:calc(100vw - 340px); background:var(--card); color:var(--ink); border:3px solid var(--brand); border-radius:18px; box-shadow:0 8px 0 rgba(0,0,0,.12), 0 18px 40px rgba(0,0,0,.18); padding:14px 16px; pointer-events:none; animation:pop .16s cubic-bezier(.3,1.7,.5,1); }
.qtip-h { display:flex; justify-content:space-between; gap:8px; margin-bottom:8px; font:700 12px var(--font-head); letter-spacing:.04em; text-transform:uppercase; color:var(--dim); }
.qtip-t { color:var(--brand-d); }
:root[data-theme="dark"] .qtip-t { color:var(--brand); }
.qtip img { width:100%; max-height:150px; object-fit:cover; border-radius:12px; margin-bottom:8px; display:block; }
.qtip-q { font:600 17px/1.3 var(--font-head); margin-bottom:8px; white-space:pre-wrap; word-break:break-word; }
.qtip-o { display:flex; flex-direction:column; gap:4px; font-size:14px; font-weight:700; }
.qtip-o div { padding:4px 10px; border-radius:10px; background:var(--soft); }
.qtip-o div.ok { background:var(--brand); color:#213547; }
.qtip-f { margin-top:10px; font-size:12px; font-weight:700; color:var(--dim); }
@media (max-width:760px) { .qtip { display:none; } }

/* test mode: console + phone + presentation side by side */
main.wrap.wide { max-width:none; }
.testgrid { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; align-items:start; }
.testgrid .console { grid-template-columns:1fr; }
.tc-label { font:700 15px var(--font-head); margin:0 0 8px; }
.tc-label small { font:600 13px var(--font); color:var(--dim); margin-left:6px; }
.fbox { position:relative; width:100%; border-radius:18px; border:3px solid var(--line); background:var(--card); overflow:hidden; box-shadow:0 6px 0 var(--line); }
.fbox iframe { position:absolute; left:0; top:0; border:0; transform-origin:0 0; background:var(--bg); }
.tc-phone .fbox { max-width:300px; border-radius:30px; border-width:6px; border-color:var(--ink); box-shadow:0 8px 0 rgba(0,0,0,.15); margin:0 auto; }
.tc-phone .tc-label { max-width:300px; margin-left:auto; margin-right:auto; }
@media (min-width:1280px) { .testgrid { grid-template-columns:minmax(360px,1fr) 300px minmax(380px,1.35fr); } }

/* editor: scoring switch + colour picker */
.switchrow { display:flex; gap:10px; align-items:center; font:600 17px var(--font-head); margin-bottom:10px; cursor:pointer; }
.switchrow input { width:22px; height:22px; accent-color:var(--brand); }
.palprev { display:flex; gap:8px; margin:14px 0; }
.palprev span { flex:1; height:46px; border-radius:12px; color:#fff; font:700 16px var(--font-head); display:flex; align-items:center; justify-content:center; box-shadow:0 3px 0 rgba(0,0,0,.2); }
.palcustom { display:flex; flex-wrap:wrap; gap:10px; }
.colpick { display:flex; align-items:center; gap:6px; font:700 13px var(--font-head); }
.colpick input { width:44px; height:34px; padding:0; border:2px solid var(--line); border-radius:8px; background:none; cursor:pointer; }

/* test mode: each screen on its own brand tint (console navy, presentation teal, phone grey) */
.tc-console, .tc-pres, .tc-phone { border-radius:24px; padding:14px; border:2px solid transparent; }
.tc-console { background:rgba(33,53,71,.10); border-color:rgba(33,53,71,.28); }
.tc-pres { background:rgba(34,187,177,.14); border-color:rgba(34,187,177,.45); }
.tc-phone { background:rgba(148,163,184,.20); border-color:rgba(148,163,184,.55); }
:root[data-theme="dark"] .tc-console { background:rgba(33,53,71,.55); border-color:rgba(148,163,184,.3); }
:root[data-theme="dark"] .tc-pres { background:rgba(34,187,177,.16); }
:root[data-theme="dark"] .tc-phone { background:rgba(148,163,184,.16); }
@media (min-width:1280px) { .testgrid { grid-template-columns:minmax(360px,1fr) minmax(380px,1.35fr) 340px; } }

/* console: shortcuts card */
.hotkeys { border:3px solid var(--line); border-radius:20px; padding:14px 16px; margin-top:16px; background:var(--card); }
.hotkeys h3 { margin:0 0 4px; }
.krow { display:flex; gap:14px; align-items:center; padding:7px 0; border-top:2px solid var(--line); }
.krow span { flex:none; min-width:170px; }
.krow b { font-weight:600; font-size:14px; }
kbd { display:inline-block; min-width:30px; text-align:center; padding:3px 9px; border-radius:8px; border:2px solid var(--line); border-bottom-width:4px; background:var(--soft); font:700 13px var(--font-head); }

/* presentations search: clean pill, the field fills the whole bar */
.searchbar { max-width:560px; width:100%; padding:2px 18px 2px 16px; gap:12px; background:var(--card); border:2px solid var(--line); box-shadow:0 2px 10px rgba(33,53,71,.08); transition:border-color .15s, box-shadow .15s; }
.searchbar:focus-within { border-color:var(--brand); box-shadow:0 0 0 4px rgba(34,187,177,.22); }
.searchbar .mag { flex:none; display:inline-block; width:20px; height:20px; font-size:0; opacity:.55; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E") center/contain no-repeat; }
.searchbar:focus-within .mag { opacity:1; color:var(--brand-d); }
.searchbar input { flex:1 1 auto; width:auto; min-width:0; border:0 !important; outline:0 !important; box-shadow:none !important; background:transparent !important; padding:12px 0; font-size:16px; -webkit-appearance:none; appearance:none; }
.searchbar input::-webkit-search-cancel-button { -webkit-appearance:none; }
.searchbar .msg { flex:none; font-size:13px; font-weight:700; }

/* editor: join slide, palette list, settings dialog */
.joinitem { border-style:dashed; }
.pallist { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.palrow { display:flex; align-items:center; gap:10px; padding:7px 10px; border:2px solid var(--line); border-radius:14px; cursor:pointer; }
.palrow.on { border-color:var(--brand); background:var(--soft); }
.palrow input { accent-color:var(--brand); }
.palrow b { flex:none; min-width:112px; font:600 15px var(--font-head); }
.palrow .sw { flex:1; display:flex; gap:4px; }
.palrow .sw i { flex:1; height:22px; border-radius:7px; }
.palcustom { margin-top:10px; }
.setsecs h3 { margin:0 0 6px; }
.setsecs hr { border:0; border-top:2px solid var(--line); margin:18px 0; }

/* editor list: move / delete buttons on each question */
.qitem { position:relative; }
.qitem .qact { position:absolute; right:6px; bottom:5px; display:none; gap:3px; }
.qitem:hover .qact, .qitem.on .qact { display:flex; }
.qact button { width:26px; height:24px; padding:0; border-radius:8px; border:2px solid var(--line); background:var(--card); color:var(--ink); font:700 13px var(--font-head); cursor:pointer; line-height:1; }
.qact button:hover:not(:disabled) { border-color:var(--brand); background:var(--soft); }
.qact button.del:hover { border-color:var(--bad); background:rgba(229,72,77,.12); }
.qact button:disabled { opacity:.35; cursor:default; }

/* "presenting now" pill in the top bar */
.livepill { display:inline-flex; align-items:center; gap:8px; padding:5px 14px; border-radius:99px; background:#e5484d; color:#fff !important; font:700 14px var(--font-head); text-decoration:none; white-space:nowrap; animation:liveGlow 1.8s ease-in-out infinite; }
.livepill i { width:9px; height:9px; border-radius:50%; background:#fff; animation:liveDot 1.1s ease-in-out infinite; }
.livepill.test { background:#FFC53D; color:#3a2a00 !important; animation-name:liveGlowGold; }
.livepill.test i { background:#3a2a00; }
.livepill:hover { filter:brightness(1.08); transform:translateY(-1px); }
@keyframes liveGlow { 0%,100% { box-shadow:0 0 0 0 rgba(229,72,77,.65), 0 0 10px 2px rgba(229,72,77,.45); } 50% { box-shadow:0 0 0 7px rgba(229,72,77,0), 0 0 20px 6px rgba(229,72,77,.7); } }
@keyframes liveGlowGold { 0%,100% { box-shadow:0 0 0 0 rgba(255,197,61,.65), 0 0 10px 2px rgba(255,197,61,.45); } 50% { box-shadow:0 0 0 7px rgba(255,197,61,0), 0 0 20px 6px rgba(255,197,61,.7); } }
@keyframes liveDot { 50% { opacity:.35; } }

/* gallery of draws and ice breaker games */
.gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:14px; }
.gcard { text-align:left; padding:0; border:3px solid var(--line); border-radius:20px; background:var(--card); color:var(--ink); cursor:pointer; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 5px 0 var(--line); transition:transform .12s, box-shadow .12s, border-color .12s; font:inherit; }
.gcard:hover { transform:translateY(-3px); border-color:var(--brand); box-shadow:0 8px 0 var(--brand-d); }
.gcard.on { border-color:var(--brand); box-shadow:0 5px 0 var(--brand-d); background:var(--soft); }
.gprev { position:relative; aspect-ratio:16/9; background:var(--soft); overflow:hidden; }
.gprev canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.gprev.gmix { display:flex; align-items:center; justify-content:space-around; font-size:34px; }
.gbody { padding:10px 14px 6px; display:flex; flex-direction:column; gap:4px; }
.gbody b { font:700 17px var(--font-head); }
.gtext { font-size:13.5px; line-height:1.35; color:var(--dim); font-weight:600; }
.gtag { margin:6px 14px 12px; align-self:flex-start; font:700 12px var(--font-head); padding:3px 10px; border-radius:99px; background:var(--soft); color:var(--hl); border:2px solid var(--line); }
.gcard.on .gtag { background:var(--brand); color:#213547; border-color:var(--brand); }

/* password checklist, one-time-code box */
.pwrules { list-style:none; margin:6px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:2px 12px; font-size:12.5px; color:var(--dim); }
.pwrules li.ok { color:var(--ok, #17a673); font-weight:600; }
input.otp { font-family:var(--font-head); font-size:30px; letter-spacing:.35em; text-align:center; padding:12px 6px; }
.authbox .linkrow { display:flex; justify-content:space-between; align-items:center; margin:-4px 0 12px; font-size:13px; }
/* the lettered circle of a multiple choice answer is also its "correct" switch */
.opt button.k { border:0; padding:0; cursor:pointer; transition:transform .12s, box-shadow .12s; }
.opt button.k:hover { transform:scale(1.1); }
.opt button.k:focus-visible { outline:3px solid rgba(34,187,177,.5); outline-offset:2px; }
.opt .k.right { background:var(--brand); color:#fff; font-size:17px; box-shadow:0 0 0 4px rgba(34,187,177,.28); }
/* narrower screens: the unsaved indicator shrinks to its dot (the text stays as a tooltip) so the toolbar keeps one row */
@media (max-width:1380px) { .dirty .dt { display:none; } }

/* small uppercase headings that separate the groups of controls in the question editor */
.sect { font-family:var(--font-head); font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--hl); margin:26px 0 10px; padding-top:14px; border-top:2px solid var(--line); }

/* ---- question editor: two columns (content | preview + settings) ---- */
body.editor .bgfx { display:none; }                       /* no decoration behind the form */
.edgrid { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:26px; align-items:start; max-width:1240px; margin:0 auto; }
.edgrid .qedit { max-width:none; margin:0; }
.edside { position:sticky; top:0; display:flex; flex-direction:column; gap:14px; }
.sidecard { background:var(--card); border:2px solid var(--line); border-radius:18px; padding:14px 16px; }
.sidecard .sc-t { font-family:var(--font-head); font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--hl); margin:0 0 9px; }
.sidecard .ptsbox { background:none; border:0; padding:0; border-radius:0; }
.sidecard .seg { max-width:100%; }
.pvcard { padding-bottom:16px; }
.pv-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.pv-head .sc-t { margin:0; }
.pv-head .seg label { padding:4px 10px; font-size:12px; }
.pv-screen { aspect-ratio:16/10; background:var(--bg); border:3px solid var(--logo-a); border-radius:14px; padding:9px 10px; display:flex; flex-direction:column; gap:6px; overflow:hidden; }
.pv-top { display:flex; justify-content:space-between; gap:6px; }
.pv-chip { font-size:9.5px; font-weight:700; font-family:var(--font-head); background:var(--soft); color:var(--hl); border-radius:99px; padding:1px 8px; }
.pv-q { font-family:var(--font-head); font-weight:700; font-size:14px; line-height:1.2; text-align:center; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.pv-q.dim, .pv-opt .dim { opacity:.55; font-weight:600; }
.pv-img { max-height:46px; align-self:center; border-radius:6px; }
.pv-opts { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-top:auto; }
.pv-opt { display:flex; align-items:center; gap:6px; color:#fff; border-radius:8px; padding:5px 7px; font-size:10.5px; font-weight:700; min-width:0; }
.pv-opt i { font-style:normal; background:rgba(255,255,255,.28); border-radius:50%; width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; flex:none; font-size:9.5px; }
.pv-opt span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pv-opt.tf { justify-content:center; font-size:13px; padding:9px; }
.pv-big { font-size:26px; text-align:center; margin-top:auto; letter-spacing:.1em; color:var(--pop2); }
.pv-note { font-size:10.5px; text-align:center; color:var(--dim); margin-bottom:auto; }
.pv-phonewrap { display:flex; justify-content:center; }
.pv-phone { width:164px; aspect-ratio:9/16; border:4px solid var(--logo-a); border-radius:22px; padding:16px 9px 10px; display:flex; flex-direction:column; gap:7px; background:var(--bg); }
.pv-phone .pv-opts { margin-top:0; flex:1; grid-auto-rows:1fr; }
.pv-phone .pv-opt { justify-content:center; font-size:20px; }
.pv-phone .pv-opt i { width:auto; height:auto; background:none; font-size:20px; }
.pv-rate { display:flex; gap:5px; justify-content:center; margin:auto 0; }
.pv-rate span { width:24px; height:24px; border-radius:50%; background:var(--pop2); color:#213547; font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; }
.pv-input { border:2px solid var(--line); border-radius:9px; padding:8px; font-size:11px; color:var(--dim); margin-top:auto; }
.pv-send { background:var(--brand); color:#213547; font-weight:700; text-align:center; border-radius:9px; padding:7px; font-size:12px; margin-bottom:auto; }
@media (max-width:1180px) { .edgrid { grid-template-columns:1fr; } .edside { position:static; } }
/* ---- PowerPoint-style editor: slide thumbnails | slide stage | settings panel ---- */
.edmain { grid-template-columns:236px minmax(0,1fr) 392px; }
.rail .list { padding:12px 8px 12px 6px; }
.thitem { display:flex; gap:6px; align-items:flex-start; padding:5px 4px; border-radius:10px; cursor:pointer; margin-bottom:4px; }
.thitem:hover { background:var(--soft); }
.thitem.on { background:var(--soft); }
.thn { width:22px; flex:none; text-align:right; font:700 12px var(--font-head); color:var(--dim); padding-top:3px; }
.thitem.on .thn { color:var(--hl); }
.thumb { position:relative; width:176px; height:99px; border:2px solid var(--line); border-radius:6px; overflow:hidden; flex:none; background:var(--bg); box-sizing:content-box; }
.thitem.on .thumb { border-color:var(--brand); box-shadow:0 0 0 2px var(--brand); }
.thitem.bad .thumb { border-color:var(--bad); }
.thumb * { pointer-events:none; }
.thwarn { position:absolute; top:3px; right:3px; width:18px; height:18px; border-radius:50%; background:var(--bad); color:#fff; font:800 12px/18px var(--font-head); text-align:center; z-index:5; }
.ctxmenu { position:fixed; z-index:80; min-width:210px; background:var(--card); border:2px solid var(--line); border-radius:14px; box-shadow:0 12px 30px var(--shadow); padding:6px; }
.ctxmenu button { display:block; width:100%; text-align:left; border:0; background:none; padding:8px 12px; border-radius:9px; cursor:pointer; font:600 14px var(--font-body); color:var(--ink); }
.ctxmenu button:hover:not(:disabled) { background:var(--soft); }
.ctxmenu button:disabled { opacity:.4; cursor:default; }
.ctxmenu button.danger { color:var(--bad); }
.ctxmenu hr { border:0; border-top:2px solid var(--line); margin:5px 2px; }

.edmain .canvas { display:flex; flex-direction:column; overflow:hidden; padding:12px 18px 18px; gap:10px; min-width:0; }
.stagebar { display:flex; align-items:center; gap:8px; flex:none; flex-wrap:wrap; }
.stagebar .sp { flex:1; }
.stagebar .seg label { padding:4px 11px; font-size:13px; }
.stagebox { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; background:var(--soft); border-radius:16px; padding:4px; overflow:hidden; }
.slidewrap { position:relative; flex:none; box-shadow:0 6px 24px var(--shadow); border-radius:4px; overflow:hidden; }
.slide { position:absolute; left:0; top:0; width:960px; height:540px; transform-origin:0 0; background:var(--bg); color:var(--ink); overflow:hidden; font-family:var(--font-body); }
.thumb .slide { position:absolute; }
.sl-bgimg { position:absolute; inset:0; background-size:cover; background-position:center; }
.sl-dim { position:absolute; inset:0; background:#000; }
.sl-core { position:absolute; inset:0; padding:34px 48px 40px; display:flex; flex-direction:column; gap:18px; }
.sl-core.click { cursor:pointer; }
.sl-top { display:flex; justify-content:space-between; }
.sl-chip { font:700 15px var(--font-head); background:var(--soft); color:var(--hl); border-radius:99px; padding:4px 16px; }
.sl-q { font:700 44px/1.18 var(--font-head); text-align:center; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word; }
.sl-q.dim, .sl-opt .dim { opacity:.55; font-weight:600; }
.sl-fill { flex:1; }
.sl-img { flex:1 1 0; min-height:0; max-width:100%; object-fit:contain; align-self:center; border-radius:12px; }
.sl-opts { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.sl-opt { display:flex; align-items:center; gap:14px; color:#fff; border-radius:16px; padding:18px 20px; font:700 28px var(--font-head); min-width:0; }
.sl-opt i { font-style:normal; background:rgba(255,255,255,.28); border-radius:50%; width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; flex:none; font-size:24px; }
.sl-opt span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sl-opt.tf { justify-content:center; font-size:36px; padding:34px; }
.sl-big { font-size:90px; text-align:center; letter-spacing:.1em; color:var(--pop2); flex:1; display:flex; align-items:center; justify-content:center; }
.sl-note { font:600 24px var(--font-body); text-align:center; color:var(--dim); margin-top:-6px; }
.sl-join { flex-direction:row; align-items:center; gap:40px; padding:60px; }
.sl-jl { flex:1; display:flex; flex-direction:column; gap:14px; align-items:flex-start; min-width:0; }
.sl-jl img { max-height:120px; max-width:60%; object-fit:contain; border-radius:12px; }
.sl-jt { font:700 56px/1.1 var(--font-head); }
.sl-jd { font:700 26px var(--font-head); color:var(--dim); }
.sl-jr { display:flex; flex-direction:column; align-items:center; gap:14px; }
.sl-qr { width:230px; height:230px; border-radius:16px; background:#fff; border:10px solid #fff; background-image:linear-gradient(45deg,#213547 25%,transparent 25%,transparent 75%,#213547 75%),linear-gradient(45deg,#213547 25%,transparent 25%,transparent 75%,#213547 75%); background-size:34px 34px; background-position:0 0,17px 17px; }
.sl-code { font:800 54px var(--font-head); letter-spacing:.08em; }
.sl-deco { position:absolute; inset:0; pointer-events:none; }
.dn { position:absolute; line-height:1.15; white-space:pre-wrap; word-break:break-word; font-family:var(--font-head); }
.dn-image { background-repeat:no-repeat; background-position:center; }
.slide.live .dn { pointer-events:auto; cursor:move; touch-action:none; }
.dn.sel { outline:3px solid var(--brand); outline-offset:3px; }
.hdl { display:none; position:absolute; right:-14px; bottom:-14px; width:20px; height:20px; border-radius:50%; background:var(--brand); border:3px solid #fff; cursor:nwse-resize; }
.dn.sel .hdl { display:block; }
.stagebox .pv-phone { width:260px; }

.edmain .panel { background:var(--card); border-left:3px solid var(--line); display:flex; flex-direction:column; min-height:0; min-width:0; }
.ptabs { display:flex; gap:4px; padding:10px 12px 0; border-bottom:3px solid var(--line); flex:none; }
.ptabs button { border:0; background:none; padding:9px 16px; font:700 14px var(--font-head); color:var(--dim); cursor:pointer; border-radius:10px 10px 0 0; margin-bottom:-3px; border-bottom:3px solid transparent; }
.ptabs button:hover { color:var(--ink); }
.ptabs button.on { color:var(--hl); border-bottom-color:var(--brand); }
.pbody { flex:1; overflow:auto; padding:16px; }
.panel .qedit { max-width:none; margin:0; }
.dpane { display:flex; flex-direction:column; gap:14px; }
.dpane .sidecard { padding:12px 14px; }
.itemcard { border-color:var(--brand); }
.bgcol { width:44px; height:34px; padding:2px; border-radius:9px; border:2px solid var(--line); background:var(--card); cursor:pointer; }
.panel .row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.panel .row .l { margin:0; min-width:64px; }
.btn.tg.on { background:var(--brand); color:var(--on-brand); }
.layers { display:flex; flex-direction:column; gap:4px; }
.layers button { text-align:left; border:2px solid transparent; background:var(--soft); border-radius:9px; padding:6px 10px; font:600 13px var(--font-body); color:var(--ink); cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.layers button.on { border-color:var(--brand); }
@media (max-width:1180px) { .edmain { grid-template-columns:236px minmax(0,1fr) 330px; } }.sl-join { flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:24px; text-align:center; }
.sl-join img { max-height:70px; max-width:50%; object-fit:contain; border-radius:10px; }
.sl-jt { font-size:44px; }
.sl-jd { font-size:22px; }
.sl-qr { width:190px; height:190px; border-width:8px; background-size:28px 28px; background-position:0 0,14px 14px; }
.sl-code { font-size:50px; color:var(--hl); }
/* ---- live Q&A on the host console ---- */
.qa-host { background:var(--card); border:2px solid var(--line); border-radius:14px; padding:10px 12px; margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.qa-host.done { border-color:#17a673; }
.qa-host .qa-top { display:flex; gap:8px; align-items:center; } .qa-host .qa-top b { flex:1; } .qa-host .v { color:var(--hl); font-weight:700; }
/* ---- editor: the extra question types ---- */
.sl-plot { flex:1; min-height:0; display:flex; justify-content:center; } .sl-plot svg { width:100%; height:100%; }
.sl-plot svg text.lb { fill:var(--ink); font:700 25px var(--font-head); } .sl-plot .dot { fill:var(--brand); opacity:.85; } .sl-plot .axl { stroke:var(--dim); stroke-width:3; }
.sl-plot .rg, .sl-plot .ax { fill:none; stroke:var(--line); stroke-width:2; } .sl-plot .pl { fill:rgba(34,187,177,.35); stroke:var(--brand); stroke-width:5; } .sl-plot .dt { fill:var(--brand); }
.sl-sort { display:grid; grid-template-columns:1fr 1fr; gap:24px; flex:1; } .sl-sortcol { border:5px dashed; border-radius:20px; display:flex; justify-content:center; padding:18px; font:700 34px var(--font-head); }
.sl-chips { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; } .sl-chips span { background:var(--soft); border-radius:99px; padding:8px 22px; font:700 26px var(--font-head); }
.sl-pairs { display:grid; grid-template-columns:1fr 60px 1fr; gap:14px 8px; align-items:center; flex:1; } .sl-pairs span { background:var(--brand); color:#213547; border-radius:14px; padding:12px; text-align:center; font:700 28px var(--font-head); } .sl-pairs span.alt { background:var(--pop2,#ffc53d); } .sl-pairs b { text-align:center; font-size:30px; color:var(--dim); }
.pinbox.edpin { cursor:crosshair; max-width:100%; } .pinbox.edpin img { max-width:100%; max-height:260px; }
.pinbox { position:relative; display:inline-block; line-height:0; border-radius:10px; overflow:hidden; border:3px solid var(--line); }
.pinlayer { position:absolute; inset:0; pointer-events:none; }
.pintgt { position:absolute; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; background:#17a673; border:3px solid #fff; }
.pinzone { position:absolute; border-radius:50%; border:3px dashed #17a673; background:rgba(23,166,115,.14); }
/* ---- settings: theme row and the theme dialog ---- */
.themerow { display:flex; align-items:center; gap:12px; }
.themerow .sw { display:flex; gap:3px; width:150px; flex:none; } .themerow .sw i { flex:1; height:26px; border-radius:7px; }
.themerow > div { flex:1; min-width:0; }
.themebox { max-height:68vh; overflow:auto; padding-right:4px; }
.fontlist { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.fontrow { display:flex; align-items:center; gap:12px; padding:8px 12px; border:2px solid var(--line); border-radius:14px; cursor:pointer; }
.fontrow.on { border-color:var(--brand); background:var(--soft); } .fontrow input { accent-color:var(--brand); }
.fontrow b { flex:none; min-width:150px; font-size:16px; } .fontrow em { color:var(--dim); font-style:normal; font-size:16px; }
/* ---- slide picker dialog, rail drag lines, slim scrollbars ---- */
.modal.wide { width:min(940px,94vw); max-width:none; }
.pickgrid { max-height:68vh; overflow:auto; padding-right:6px; }
.pickgrid h3 { margin:16px 0 8px; font:700 12px var(--font-head); letter-spacing:.12em; text-transform:uppercase; color:var(--hl); } .pickgrid h3:first-child { margin-top:0; }
.pickcards { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; }
.pickcard { display:grid; grid-template-columns:44px 1fr; grid-template-rows:auto 1fr; column-gap:10px; align-items:start; text-align:left; padding:12px; background:var(--card); border:2px solid var(--line); border-radius:16px; cursor:pointer; color:var(--ink); transition:transform .12s, border-color .12s, box-shadow .12s; }
.pickcard:hover { border-color:var(--brand); transform:translateY(-2px); box-shadow:0 4px 0 var(--brand); }
.pickcard .ic { grid-row:1 / span 2; font-size:30px; text-align:center; }
.pickcard b { font:700 15px var(--font-head); } .pickcard small { color:var(--dim); font-size:12px; line-height:1.3; margin-top:3px; }
.thitem.dragging { opacity:.35; }
.thitem.dropbefore { box-shadow:0 -4px 0 -1px var(--brand); border-radius:0; } .thitem.dropafter { box-shadow:0 4px 0 -1px var(--brand); border-radius:0; }
.rail .list { overflow-x:hidden; }
.rail .list, .pbody, .edmain .canvas, .themebox, .pickgrid, .modal { scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.rail .list::-webkit-scrollbar, .pbody::-webkit-scrollbar, .themebox::-webkit-scrollbar, .pickgrid::-webkit-scrollbar { width:8px; }
.rail .list::-webkit-scrollbar-track, .pbody::-webkit-scrollbar-track, .themebox::-webkit-scrollbar-track, .pickgrid::-webkit-scrollbar-track { background:transparent; }
.rail .list::-webkit-scrollbar-thumb, .pbody::-webkit-scrollbar-thumb, .themebox::-webkit-scrollbar-thumb, .pickgrid::-webkit-scrollbar-thumb { background:var(--line); border-radius:99px; border:2px solid transparent; background-clip:padding-box; }
.rail .list::-webkit-scrollbar-thumb:hover, .pbody::-webkit-scrollbar-thumb:hover { background:var(--grey); background-clip:padding-box; border:2px solid transparent; }
/* ---- editing on the slide ---- */
.ied { outline:none; cursor:text; border-radius:8px; transition:background .12s, box-shadow .12s; }
.ied:empty::before { content:attr(data-ph); opacity:.45; font-weight:600; }
.slide.live .ied:hover { background:rgba(34,187,177,.13); }
.slide.live .ied:focus, .dn.editing { background:rgba(34,187,177,.2); box-shadow:0 0 0 3px var(--brand); }
.dn.editing { cursor:text; user-select:text; }
.sl-q.ied { display:block; max-height:none; -webkit-line-clamp:unset; overflow:visible; min-height:1.2em; }
.sl-opt .ied { flex:1; min-width:0; } .sl-opt { position:relative; }
.sl-opt i.pick { cursor:pointer; transition:transform .1s; } .sl-opt i.pick:hover { transform:scale(1.15); background:rgba(255,255,255,.5); }
.sl-opt.tf.pick { cursor:pointer; } .sl-opt.tf.right { box-shadow:0 0 0 6px var(--ink); }
.sl-x { position:absolute; top:-10px; right:-10px; width:34px; height:34px; border-radius:50%; border:3px solid var(--card); background:var(--bad); color:#fff; font:800 16px/1 var(--font-head); cursor:pointer; display:none; }
.sl-opt:hover .sl-x { display:block; }
.sl-add { border:4px dashed var(--line); background:transparent; color:var(--dim); border-radius:16px; font:700 26px var(--font-head); cursor:pointer; padding:18px; } .sl-add:hover { border-color:var(--brand); color:var(--hl); }
.sl-lohi { display:flex; gap:14px; justify-content:center; align-items:center; }
.slide.live img.sl-img { cursor:grab; }
.dn-image { cursor:move; }
/* ---- slide type card (the type is shown; "Change" opens the picker) ---- */
.typecard { display:flex; align-items:center; gap:12px; padding:10px 12px; border:2px solid var(--line); border-radius:16px; background:var(--soft); }
.typecard .ic { font-size:30px; } .typecard > div { flex:1; min-width:0; } .typecard b { display:block; font:700 15px var(--font-head); } .typecard small { color:var(--dim); font-size:12px; line-height:1.3; display:block; }
.pickcard.cur { border-color:var(--brand); background:var(--soft); }
.pted { display:flex; flex-direction:column; gap:10px; margin-top:8px; }
/* ---- movable parts of a slide, the simulated join screen, and the small inline controls ---- */
.lbx { position:relative; min-width:0; }
.lbx.abs { position:absolute; z-index:3; margin:0; }
.lbx.t { flex:none; } .lbx.b { flex:1; min-height:0; display:flex; flex-direction:column; justify-content:flex-end; gap:12px; }
.lbx.abs.t .sl-q { display:block; overflow:visible; -webkit-line-clamp:unset; max-height:none; }
.lbx.abs.b { justify-content:center; }
.lbx > .grip, .lbx > .lhdl { display:none; position:absolute; z-index:6; }
.lbx > .grip { left:-14px; top:-14px; width:28px; height:28px; border-radius:50%; background:var(--brand); color:#fff; border:3px solid #fff; align-items:center; justify-content:center; font-size:15px; cursor:move; box-shadow:0 2px 6px rgba(0,0,0,.3); }
.lbx > .lhdl { right:-12px; bottom:-12px; width:22px; height:22px; border-radius:50%; background:var(--brand); border:3px solid #fff; cursor:nwse-resize; box-shadow:0 2px 6px rgba(0,0,0,.3); }
.slide.live .lbx:hover > .grip, .slide.live .lbx.sel > .grip { display:flex; } .slide.live .lbx:hover > .lhdl, .slide.live .lbx.sel > .lhdl { display:block; }
.slide.live .lbx:hover { outline:2px dashed rgba(34,187,177,.75); outline-offset:4px; } .slide.live .lbx.sel { outline:3px solid var(--brand); outline-offset:4px; }
.sl-jleft { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; min-width:0; }
.sl-join { flex-direction:row; align-items:stretch; padding:30px 40px; gap:30px; }
.lbx.h, .lbx.q { display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
.sl-qrbox { width:190px; height:190px; border-radius:16px; background:#fff; padding:9px; border:6px solid var(--brand); box-shadow:0 8px 0 rgba(33,53,71,.25); transform:rotate(-1.5deg); flex:0 1 auto; max-width:100%; max-height:100%; box-sizing:border-box; }
.sl-qrbox svg { width:100%; height:100%; display:block; }
.lbx.abs.q .sl-qrbox { width:auto; height:auto; aspect-ratio:1; flex:1 1 0; min-height:0; }
.sl-codeline { font:600 18px var(--font-body); color:var(--dim); } .lbx.q .sl-code { font-size:56px; line-height:1; }
.lbx.p { padding-top:30px; text-align:left; }
.sl-pc { font:800 30px var(--font-head); color:var(--hl); margin-bottom:12px; }
.sl-pchips { display:flex; flex-wrap:wrap; gap:8px; } .sl-pchips span { background:var(--soft); border-radius:99px; padding:6px 16px; font:600 20px var(--font-head); }
.sl-dateinp { font:700 22px var(--font-head); border:2px dashed var(--line); background:transparent; border-radius:10px; padding:2px 8px; color:var(--dim); }
.sl-add.small { font-size:18px; padding:8px 18px; border-width:3px; }
.sl-x.lg { position:absolute; top:-6px; right:calc(50% - 90px); }
.sl-meta { display:flex; flex-wrap:wrap; gap:6px 22px; justify-content:center; align-items:center; font:600 22px var(--font-body); color:var(--dim); }
.sl-fld { display:inline-flex; gap:8px; align-items:baseline; } .sl-fld em { font-style:normal; font-size:17px; }
.ied.num, .num.ied { min-width:1.4em; display:inline-block; border-bottom:2px dashed var(--line); color:var(--ink); text-align:center; padding:0 6px; }
.sl-chip .ied.num { color:inherit; }
.sl-chip.pick { cursor:pointer; } .sl-chip.pick:hover { background:var(--brand); color:var(--on-brand); }
.sl-chip2 { display:inline-flex; align-items:center; gap:6px; background:var(--soft); border-radius:99px; padding:6px 10px 6px 18px; font:600 24px var(--font-head); }
.sl-mini { border:0; background:rgba(33,53,71,.12); color:var(--ink); border-radius:99px; min-width:28px; height:28px; padding:0 8px; font:700 15px var(--font-head); cursor:pointer; } .sl-mini:hover { background:var(--brand); color:#fff; } .sl-mini.wide { padding:0 14px; height:36px; font-size:17px; }
.sl-sortcol { flex-direction:column; align-items:stretch; gap:10px; } .sl-sortcol > b, .sl-sortcol > .ied { text-align:center; }
.sl-sortcol .sl-chips { justify-content:center; }
.sl-pairs { grid-template-columns:1fr 60px 1fr auto; }
.sl-note.url { word-break:break-all; }
.pinbox.edpin img { max-height:300px; }
.posgrid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0; }
/* join screen columns: the players take a fixed share, the join block the rest */
.sl-jleft { flex:1 1 56%; min-width:0; }
.lbx.p { flex:0 0 38%; max-width:38%; min-width:0; box-sizing:border-box; }
.lbx.h, .lbx.q { max-width:100%; }
.lbx.abs.h, .lbx.abs.q, .lbx.abs.p { max-width:none; flex:none; }
.lbx.h .sl-jt { max-width:100%; overflow-wrap:anywhere; }
.sl-codeline { max-width:100%; overflow-wrap:anywhere; }

/* a pin question: the picture's box is exactly the picture (shrink-wrapped, never stretched), so a pin's % lines up with what you see */
.pinbox { width:fit-content; max-width:100%; align-self:center; flex:none; }
.pinbox img, .pinimg { display:block; width:auto; height:auto; }
.pinimg { max-width:100%; max-height:300px; }
.pinbox.edpin img { max-width:100%; }

/* ---- live preview: the real big-screen and phone pages side by side ---- */
.simroot { display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; height:100%; justify-content:center; }
.simbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; flex:none; }
.simbar .seg label { padding:4px 12px; font-size:13px; } .simbar .msg { font-size:12px; max-width:420px; text-align:left; }
.simfit { position:relative; flex:none; }
.simrow { position:absolute; left:0; top:0; width:1680px; height:720px; transform-origin:0 0; display:flex; gap:28px; align-items:flex-start; }
.simbig { width:1280px; height:720px; flex:none; border-radius:10px; overflow:hidden; box-shadow:0 6px 24px var(--shadow); background:#fff; }
.simphone { width:372px; height:720px; flex:none; border-radius:38px; border:8px solid #213547; overflow:hidden; box-shadow:0 6px 24px var(--shadow); background:#fff; box-sizing:border-box; }
.simbig iframe { width:1280px; height:720px; border:0; display:block; } .simphone iframe { width:356px; height:704px; border:0; display:block; }
/* ---- editing aids never change the slide: they float over it on hover, or sit under it ---- */
.stagestrip { display:flex; flex-wrap:wrap; gap:8px 18px; align-items:flex-end; padding:8px 14px 10px; background:var(--card); border:2px solid var(--line); border-radius:14px; flex:none; }
.stagestrip .sl-fld { display:inline-flex; flex-direction:column; align-items:flex-start; gap:2px; } .stagestrip .sl-fld em { font:700 11px var(--font-head); letter-spacing:.05em; text-transform:uppercase; color:var(--hl); }
.stagestrip input[type=number] { width:100px; } .stagestrip input, .stagestrip select { padding:5px 9px; border-radius:10px; font-size:14px; }
.stripchips { display:flex; gap:8px; flex-wrap:wrap; } .stripchip { display:inline-flex; align-items:center; gap:4px; } .stripchip input { width:130px; }
.ctxmenu .ctxh { padding:4px 12px 2px; font:700 11px var(--font-head); letter-spacing:.1em; text-transform:uppercase; color:var(--hl); }
.slide.live .dn.sel, .slide.live .lbx.sel { z-index:9; }
.sl-chip2 { position:relative; }
.ovbtns { position:absolute; right:-6px; top:-14px; display:none; gap:3px; z-index:6; }
.sl-chip2:hover .ovbtns { display:flex; }
.sl-pcell { position:relative; display:flex; } .sl-pcell > .ied { flex:1; }
.sl-pcell:hover .sl-x { display:block; }
.sl-pairs { grid-template-columns:1fr 60px 1fr; }
.sl-imgdrop { border:4px dashed var(--line); background:transparent; color:var(--dim); border-radius:20px; padding:30px; font:700 28px var(--font-head); cursor:pointer; flex:1; } .sl-imgdrop:hover { border-color:var(--brand); color:var(--hl); }
/* guess the number: density plot */
.qx-guess .dens { stroke:none; } .qx-guess .denl { fill:none; stroke:var(--brand); stroke-width:5; stroke-linejoin:round; stroke-linecap:round; }
.qx-guess .rug { stroke:var(--hl); stroke-width:3; opacity:.8; stroke-linecap:round; } .qx-guess .band { fill:rgba(23,166,115,.14); stroke:#17a673; stroke-width:2; stroke-dasharray:8 6; }
.sl-plot .dens { stroke:none; } .sl-plot .denl { fill:none; stroke:var(--brand); stroke-width:5; stroke-linejoin:round; } .sl-plot .rug { stroke:var(--hl); stroke-width:3; opacity:.8; } .sl-plot .band { fill:rgba(23,166,115,.14); stroke:#17a673; stroke-width:2; stroke-dasharray:8 6; }

/* ---- handles inside the frame, constant on-screen size (--inv = 1 / stage zoom), selected parts only ---- */
.ctl { display:none; position:absolute; z-index:8; touch-action:none; }
.slide.live .sel > .ctl { display:flex; }
.ctl.hgrip { left:50%; top:4px; width:34px; height:26px; margin-left:-17px; border-radius:99px; background:var(--brand); color:#fff; border:2px solid #fff; align-items:center; justify-content:center; font-size:15px; cursor:move; box-shadow:0 2px 6px rgba(0,0,0,.35); transform:scale(var(--inv,1)); transform-origin:50% 0; }
.ctl.rh { width:16px; height:16px; background:#fff; border:3px solid var(--brand); border-radius:4px; box-shadow:0 1px 4px rgba(0,0,0,.35); }
.ctl.rh.nw { left:2px; top:2px; cursor:nwse-resize; transform:scale(var(--inv,1)); transform-origin:0 0; }
.ctl.rh.ne { right:2px; top:2px; cursor:nesw-resize; transform:scale(var(--inv,1)); transform-origin:100% 0; }
.ctl.rh.sw { left:2px; bottom:2px; cursor:nesw-resize; transform:scale(var(--inv,1)); transform-origin:0 100%; }
.ctl.rh.se { right:2px; bottom:2px; cursor:nwse-resize; transform:scale(var(--inv,1)); transform-origin:100% 100%; }
.ctl.rh.w { left:2px; top:50%; margin-top:-8px; cursor:ew-resize; transform:scale(var(--inv,1)); transform-origin:0 50%; }
.ctl.rh.e { right:2px; top:50%; margin-top:-8px; cursor:ew-resize; transform:scale(var(--inv,1)); transform-origin:100% 50%; }
.slide.live .lbx:hover { outline:2px dashed rgba(34,187,177,.75); outline-offset:-3px; } .slide.live .lbx.sel { outline:3px solid var(--brand); outline-offset:-3px; }
.slide.live .dn:hover { outline:2px dashed rgba(34,187,177,.75); outline-offset:-2px; } .slide.live .dn.sel { outline:3px solid var(--brand); outline-offset:-3px; }
.slide.live .hl { outline:4px solid #f4b942 !important; outline-offset:-4px !important; background-color:rgba(244,185,66,.16); }
.slide.live .dn.locked { pointer-events:none; } .slide.live .dn.locked > .ctl { pointer-events:auto; }
.dn.sel { overflow:visible; }
.stagetray { display:flex; align-items:center; gap:6px; flex-wrap:wrap; flex:none; min-height:0; }
.traylab { font:700 11px var(--font-head); letter-spacing:.1em; text-transform:uppercase; color:var(--hl); margin-right:2px; }
.traychip { display:inline-flex; align-items:stretch; background:var(--card); border:2px solid var(--line); border-radius:99px; overflow:hidden; }
.traychip > button { border:0; background:none; padding:3px 11px; font:600 12px var(--font-body); color:var(--ink); cursor:pointer; max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.traychip > button.lk { padding:3px 7px 3px 2px; font-size:12px; }
.traychip:hover { border-color:#f4b942; } .traychip.on { border-color:var(--brand); background:var(--soft); } .traychip.locked { opacity:.8; border-style:dashed; }
/* ---- the selection frame, hover outline and the interaction model (click = select, drag = move, second click = type) ---- */
.slidewrap { overflow:visible; } .stagebox { overflow:hidden; }
.slidewrap > .slide { border-radius:4px; }
.slide.live [data-id] { cursor:move; }
.slide.live .sel .ied:not(.editing) { cursor:text; } .ied.editing, .dn.editing { cursor:text !important; }
.slide.live .ied:hover { background:none; }
.slide.live .ied.editing, .dn.editing { background:rgba(34,187,177,.16); box-shadow:0 0 0 2px var(--brand); border-radius:6px; }
.slide.live .lbx:hover, .slide.live .lbx.sel, .slide.live .dn:hover, .slide.live .dn.sel { outline:none; }
.sl-chip .ied.num, .sl-top .ied { cursor:text; }
.selfx { position:absolute; pointer-events:none; border:2px solid var(--brand); box-sizing:border-box; z-index:20; border-radius:2px; }
.sfh { position:absolute; width:12px; height:12px; background:#fff; border:2px solid var(--brand); border-radius:3px; pointer-events:auto; box-sizing:border-box; touch-action:none; }
.sfh::after { content:''; position:absolute; inset:-8px; }
.sfh.nw { left:-7px; top:-7px; cursor:nwse-resize; } .sfh.n { left:50%; top:-7px; margin-left:-6px; cursor:ns-resize; } .sfh.ne { right:-7px; top:-7px; cursor:nesw-resize; }
.sfh.e { right:-7px; top:50%; margin-top:-6px; cursor:ew-resize; } .sfh.se { right:-7px; bottom:-7px; cursor:nwse-resize; } .sfh.s { left:50%; bottom:-7px; margin-left:-6px; cursor:ns-resize; }
.sfh.sw { left:-7px; bottom:-7px; cursor:nesw-resize; } .sfh.w { left:-7px; top:50%; margin-top:-6px; cursor:ew-resize; }
.sfbar { position:absolute; left:50%; top:-46px; transform:translateX(-50%); display:flex; gap:3px; align-items:center; pointer-events:auto; background:var(--card); border:2px solid var(--line); border-radius:12px; padding:3px; box-shadow:0 4px 14px rgba(0,0,0,.2); white-space:nowrap; }
.selfx.flip .sfbar { top:auto; bottom:-46px; }
.sfbar button { border:0; background:none; border-radius:8px; min-width:30px; height:28px; padding:0 8px; font:700 14px var(--font-body); color:var(--ink); cursor:pointer; } .sfbar button:hover { background:var(--soft); } .sfbar button.danger:hover { background:var(--bad); color:#fff; }
.sfhint { font:600 12px var(--font-body); color:var(--dim); padding:0 10px; }
.hoverfx { position:absolute; pointer-events:none; border:2px dashed rgba(34,187,177,.85); box-sizing:border-box; z-index:19; border-radius:2px; }
/* ---- the slide's top row / round timer / logo (same arrangement as the big screen) ---- */
.sl-core { padding-bottom:92px; }
.sl-top { align-items:center; gap:14px; }
.sl-top .sp { flex:1; }
.sl-qn, .sl-ans { font:700 17px var(--font-head); color:var(--dim); }
.sl-tbar { height:10px; border-radius:99px; background:var(--line); overflow:hidden; flex:none; margin-top:-8px; }
.sl-tbar i { display:block; height:100%; width:64%; background:linear-gradient(90deg,var(--brand),var(--pop2,#f4b942)); border-radius:99px; }
.sl-timer { position:absolute; right:34px; bottom:22px; width:78px; height:78px; border-radius:50%; border:4px solid var(--brand); background:var(--card); display:flex; align-items:center; justify-content:center; font:700 34px var(--font-head); z-index:2; }
.sl-timer .ied { font-size:34px; }
.sl-brand { position:absolute; left:34px; bottom:28px; display:flex; align-items:center; gap:8px; font:700 26px var(--font-head); color:var(--ink); pointer-events:none; z-index:2; } .sl-brand img { height:30px; width:auto; }
/* ---- the inspector under the slide ---- */
.stagestrip.insp { display:block; max-height:38vh; overflow:auto; }
.insphd { font:700 11px var(--font-head); letter-spacing:.12em; text-transform:uppercase; color:var(--hl); margin-bottom:6px; }
.insprow { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:flex-end; margin-top:8px; }
.insplist { display:flex; flex-direction:column; gap:6px; } .insprow2 { display:flex; align-items:center; gap:8px; } .insprow2 input[type=text] { flex:1; min-width:120px; }
.ik { width:34px; height:34px; border-radius:50%; border:0; color:#fff; font:700 15px var(--font-head); flex:none; display:inline-flex; align-items:center; justify-content:center; } button.ik { cursor:pointer; } .ik.right { box-shadow:0 0 0 3px var(--ink); } .ik.eq { background:var(--soft); color:var(--dim); width:28px; height:28px; }
.stagestrip.insp textarea { min-height:60px; }
.stagestrip.insp .sidecard { margin-top:0; }
/* ---- hiding the side panel ---- */
.edmain.nopanel { grid-template-columns:236px minmax(0,1fr) 0; } .edmain.nopanel .panel { display:none; }
/* inspector: compact, several columns, so the slide keeps most of the height */
.stagestrip.insp { max-height:30vh; padding:8px 12px 10px; }
.stagestrip.insp .sidecard { border:0; padding:0; background:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:6px 14px; align-items:end; }
.stagestrip.insp .sidecard > .sc-t, .stagestrip.insp .sidecard > textarea, .stagestrip.insp .sidecard > .msg { grid-column:1 / -1; }
.stagestrip.insp .sidecard textarea { min-height:44px; max-height:80px; }
.stagestrip.insp .posgrid { grid-column:1 / -1; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:0; }
.stagestrip.insp .sidecard .row { margin:0; } .stagestrip.insp .sidecard .seg { max-width:100%; }
.stagestrip.insp textarea { min-height:44px; }

/* ---- slide components that are movable parts of the layout ---- */
.lbx.i { display:flex; align-items:center; justify-content:space-between; gap:14px; flex:none; }
.lbx.r { flex:none; height:10px; border-radius:99px; background:var(--line); overflow:hidden; margin-top:-8px; } .lbx.r i { display:block; height:100%; width:64%; background:linear-gradient(90deg,var(--brand),var(--pop2,#f4b942)); border-radius:99px; }
.lbx.m { position:absolute; right:34px; bottom:22px; width:78px; height:78px; border-radius:50%; border:4px solid var(--brand); background:var(--card); display:flex; align-items:center; justify-content:center; font:700 34px var(--font-head); z-index:2; box-sizing:border-box; }
.lbx.g { position:absolute; left:34px; bottom:28px; z-index:2; }
.lbx.abs.m, .lbx.abs.g { right:auto; bottom:auto; }
.lbx.abs.m { height:auto; }
.lbx.abs.i { flex:none; } .lbx.abs.r { margin-top:0; }
.lbx.ghost { opacity:.35; outline:2px dashed var(--dim); }
.sl-brand { position:static; }
.sl-timer { position:static; }
/* ---- the type of the slide floats above it ---- */
.typetag { position:absolute; left:0; bottom:calc(100% + 8px); border:0; background:var(--card); color:var(--hl); border-radius:99px; padding:5px 14px; font:700 13px var(--font-head); box-shadow:0 2px 8px rgba(0,0,0,.18); white-space:nowrap; z-index:21; }
button.typetag { cursor:pointer; } button.typetag:hover { background:var(--brand); color:var(--on-brand,#213547); }
/* ---- the slides list and the side panel fold away smoothly ---- */
.edmain { position:relative; --rail:236px; --panel:392px; grid-template-columns:var(--rail) minmax(0,1fr) var(--panel); transition:grid-template-columns .3s cubic-bezier(.4,0,.2,1); }
@media (max-width:1180px) { .edmain { --panel:330px; } }
.edmain.norail { --rail:0px; } .edmain.nopanel { --panel:0px; }
.edmain .rail, .edmain .panel { overflow:hidden; min-width:0; transition:opacity .2s ease, border-width .3s ease; }
.edmain.norail .rail { opacity:0; pointer-events:none; border-right-width:0; } .edmain.nopanel .panel { display:flex; opacity:0; pointer-events:none; border-left-width:0; }
.edgetag { position:absolute; top:50%; transform:translateY(-50%); z-index:40; width:22px; min-height:74px; padding:6px 0; border:2px solid var(--line); background:var(--card); color:var(--hl); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; font:700 15px var(--font-head); box-shadow:0 2px 8px rgba(0,0,0,.15); transition:left .3s cubic-bezier(.4,0,.2,1), right .3s cubic-bezier(.4,0,.2,1), background .15s; }
.edgetag:hover { background:var(--brand); color:var(--on-brand,#213547); }
.edgetag .lab { display:none; writing-mode:vertical-rl; font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.edgetag.closed { width:26px; } .edgetag.closed .lab { display:block; }
#tagRail { left:calc(var(--rail) - 1px); border-radius:0 12px 12px 0; border-left:0; } #tagRail .chev::before { content:'\2039'; } #tagRail.closed .chev::before { content:'\203A'; }
#tagPanel { right:calc(var(--panel) - 1px); border-radius:12px 0 0 12px; border-right:0; } #tagPanel .chev::before { content:'\203A'; } #tagPanel.closed .chev::before { content:'\2039'; }
/* ---- the inspector inside the side panel ---- */
.pbody .stagestrip.insp { max-height:none; overflow:visible; border:0; background:none; padding:0; display:block; }
.pbody .stagestrip.insp .sidecard { display:flex; flex-direction:column; gap:8px; }
.pbody .stagestrip.insp .posgrid { display:grid; grid-template-columns:1fr 1fr; }
.edmain.nopanel, .edmain.norail { grid-template-columns:var(--rail) minmax(0,1fr) var(--panel); }

/* the Parts bar stays on one line (scrolls sideways) so it never takes stage height */
.stagetray { flex-wrap:nowrap; overflow-x:auto; padding-bottom:3px; scrollbar-width:thin; } .stagetray .traychip { flex:none; }

/* ---- the logo as a watermark, the overlap chooser, text style controls ---- */
.sl-watermark { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:16px; opacity:.07; pointer-events:none; z-index:-1; font:800 130px var(--font-head); color:var(--ink); }
.sl-watermark img { height:130px; width:auto; }
.ovmenu .cur { background:var(--soft); font-weight:700; }
.tsc { display:flex; flex-direction:column; gap:8px; }
.tsc select { width:100%; }
/* ---- the Design view: the floating items (still) and the free-mode logo ---- */
.slide .bgfx { position:absolute; inset:0; z-index:-1; display:block !important; overflow:hidden; pointer-events:none; }
.slide .bgfx .bgs, .slide .bgfx .bgs * { animation:none !important; }
.sl-free { position:absolute; left:16px; bottom:12px; z-index:50; display:flex; flex-direction:column; align-items:flex-start; gap:2px; pointer-events:none; }
.sl-freerow { display:flex; align-items:center; gap:6px; font:700 19px var(--font-head); color:var(--ink); } .sl-freerow img { height:21px; width:auto; }
.sl-freetag { font:700 10px var(--font-head); letter-spacing:.06em; text-transform:uppercase; padding:2px 9px; border-radius:99px; background:var(--soft); color:var(--hl); }
.sl-watermark { display:none; }
/* ---- pin on a picture: the picture sits in a holder and is sized to its own shape; the right-spot zone is a true circle ---- */
.pinhold { flex:1; align-self:stretch; min-width:0; min-height:0; width:100%; display:flex; align-items:center; justify-content:center; }
.pinhold .pinbox { width:0; height:0; max-width:none; align-self:auto; flex:none; border:0; border-radius:12px; box-shadow:0 0 0 4px var(--line); }
.pinhold .pinbox img { width:100%; height:100%; max-width:none; max-height:none; object-fit:fill; }
.pinbox.spotting { cursor:crosshair; touch-action:none; outline:3px dashed #17a673; outline-offset:5px; }
.pinzone { aspect-ratio:1/1; height:auto !important; transform:translate(-50%,-50%); box-sizing:border-box; }

/* ---- word cloud: packed layout ---- */
.cloud.pack { display:block; position:relative; overflow:hidden; }
.cloud.pack .cw { position:absolute; margin:0; line-height:1; transform:rotate(var(--rot,0deg)); transition:left .8s cubic-bezier(.3,.9,.3,1), top .8s cubic-bezier(.3,.9,.3,1), font-size .8s; }
.sl-cloudprev { flex:1; min-height:0; width:100%; }

/* ---- open text: answer cards ---- */
.slide .cards { display:flex; flex-wrap:wrap; min-width:0; min-height:0; overflow:hidden; align-content:center; justify-content:center; gap:.9em 1.1em; padding:.5em; }
.slide .cards .card { --acc:#2f6feb; position:relative; border:0; border-radius:.6em; padding:.65em 1em .65em 1.35em; max-width:32%; font-weight:700; line-height:1.2; box-shadow:0 .12em 0 rgba(0,0,0,.1), 0 .5em 1.1em rgba(0,0,0,.13); transform:rotate(var(--tilt,0deg)); animation:cardin .6s cubic-bezier(.3,1.5,.5,1) both; background:var(--cardbg,#fff); background:color-mix(in srgb, var(--acc) 14%, var(--cardbg,#fff)); }
.slide .cards .card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:.45em; border-radius:.6em 0 0 .6em; background:var(--acc); }
.slide .cards .card .qm { position:absolute; right:.3em; top:-.12em; font:900 2.4em/1 Georgia,serif; color:var(--acc); opacity:.3; pointer-events:none; }
.slide .cards .card .ct { display:block; position:relative; }
.slide .cards .card.c0 { --acc:#e5484d; } .slide .cards .card.c1 { --acc:#d98e04; } .slide .cards .card.c2 { --acc:#17a673; } .slide .cards .card.c3 { --acc:#2f6feb; } .slide .cards .card.c4 { --acc:#8b5cf6; }
@keyframes cardin { from { transform:translateY(1.2em) rotate(calc(var(--tilt,0deg) * 3)) scale(.7); opacity:0; } }
.slide .sl-cardsprev { flex:1; font-size:20px; }.cloud { flex:1; min-width:0; min-height:0; overflow:hidden; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; gap:.4em .8em; line-height:1.1; font-family:var(--font-head); font-weight:700; }
.cw { white-space:nowrap; padding:.1em .28em; }
.slide .cards { --cardbg:var(--card); }
/* ---- round 12: working pages get a plain background; page header on one line; presentation cards; user menu ---- */
body:has(> .topbar) > .bgfx { display:none; }
.pghead { display:flex; align-items:center; gap:14px 18px; flex-wrap:wrap; margin-bottom:6px; }
.pghead .pgt { flex:1 1 300px; min-width:0; }
.pgtools { display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex:1 1 auto; justify-content:flex-end; }
.pgtools .searchbar { margin-top:0; flex:1 1 220px; min-width:200px; max-width:380px; }
.pgtools .btn { margin:0; }
.sortsel { width:auto; min-width:0; border-radius:99px; border:2px solid var(--line); background:var(--card); color:var(--ink); padding:11px 14px; font:600 14px var(--font-head); cursor:pointer; }
.sortsel:focus-visible { border-color:var(--brand); outline:0; box-shadow:0 0 0 4px rgba(34,187,177,.22); }
.pcard { overflow:visible; }
.pcard::before { border-top-left-radius:inherit; border-top-right-radius:inherit; }
.pcard.menuopen { z-index:8; transform:none; }
.pcard .acts { flex-wrap:nowrap; align-items:center; margin-top:auto; padding-top:10px; }
.pcard .acts .btn { white-space:nowrap; }
.pcard .foot { display:flex; flex-wrap:wrap; gap:2px 14px; border-top:2px solid var(--line); padding-top:10px; margin-top:4px; color:var(--dim); font-size:13px; font-weight:700; }
.ticon.more { background:transparent; border:2px dashed var(--line); color:var(--dim); font-weight:700; }
.kebab { position:relative; margin-left:auto; }
.kbtn { width:38px; padding-left:0; padding-right:0; font-size:20px; line-height:1; font-weight:800; }
.kmenu { display:none; position:absolute; right:0; bottom:calc(100% + 8px); min-width:190px; background:var(--card); color:var(--ink); border:2px solid var(--line); border-radius:14px; box-shadow:0 10px 28px rgba(33,53,71,.22); padding:6px; z-index:30; }
.kebab.open .kmenu { display:block; }
.kmenu > a, .kmenu > button { display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:none; border:0; border-radius:9px; padding:9px 12px; font:600 15px var(--font-head); color:inherit; text-decoration:none; cursor:pointer; }
.kmenu > a:hover, .kmenu > button:hover:not(:disabled), .kmenu > a:focus-visible, .kmenu > button:focus-visible { background:var(--soft); outline:0; }
.kmenu > button:disabled { opacity:.45; cursor:not-allowed; }
.kmenu hr { border:0; border-top:2px solid var(--line); margin:6px 4px; }
.kmenu .kdel { color:var(--bad); font-weight:700; }
.kmenu .kdel:hover { background:rgba(229,72,77,.12) !important; }

.nav a { color:#d3dde8; }
.nav a.on { color:var(--on-brand); font-weight:800; box-shadow:0 3px 0 var(--brand-d), inset 0 0 0 2px #fff; }
.nav a:focus-visible, .ubtn:focus-visible, .langsw a:focus-visible { outline:3px solid #fff; outline-offset:2px; }
.usermenu { position:relative; }
.ubtn { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.12); color:var(--nav-ink); border:0; border-radius:99px; padding:4px 12px 4px 4px; cursor:pointer; font:700 14px var(--font-head); }
.ubtn:hover { background:rgba(255,255,255,.22); }
.uav { width:30px; height:30px; border-radius:50%; background:var(--brand); color:var(--on-brand); display:grid; place-items:center; font-weight:800; }
.uname { max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ucar { opacity:.7; font-size:12px; }
.umenu { display:none; position:absolute; right:0; top:calc(100% + 10px); min-width:230px; background:var(--card); color:var(--ink); border:2px solid var(--line); border-radius:14px; box-shadow:0 12px 30px rgba(0,0,0,.28); padding:8px; z-index:60; }
.umenu.open { display:block; }
.uhead { display:flex; flex-direction:column; padding:6px 10px 10px; border-bottom:2px solid var(--line); margin-bottom:6px; }
.uhead small { color:var(--dim); font-weight:600; overflow:hidden; text-overflow:ellipsis; }
.umrow { display:flex; align-items:center; justify-content:space-between; padding:6px 10px; font:600 15px var(--font-head); }
.umenu .themebtn { background:var(--soft); color:var(--ink); }
.uout { display:block; width:100%; text-align:left; background:none; border:0; border-radius:9px; padding:9px 10px; font:700 15px var(--font-head); color:var(--bad); cursor:pointer; }
.uout:hover { background:rgba(229,72,77,.12); }
@media (max-width:760px) { .uname, .ucar { display:none; } .ubtn { padding:4px; } .pgtools { justify-content:flex-start; } }
/* ---- round 14: slide thumbnails, the "create another" card, one look for the toolbar controls ---- */
.pthumb { position:relative; display:block; aspect-ratio:16/9; overflow:hidden; border-radius:12px; border:2px solid var(--line); background:var(--card); margin:0 0 2px; text-decoration:none; color:inherit; }
.th-slide { position:absolute; left:0; top:0; width:960px; height:540px; transform-origin:0 0; padding:44px 60px; box-sizing:border-box; display:flex; flex-direction:column; gap:26px; background:var(--card); color:var(--ink); font-family:var(--font-body); }
.th-slide.in { animation:thin .28s ease-out; }
@keyframes thin { from { opacity:0; } }
.th-q { font:800 52px/1.15 var(--font-head); text-align:center; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; flex:none; }
.th-opts { flex:1; min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:20px; align-content:end; }
.th-opt { display:flex; align-items:center; gap:16px; border-radius:20px; padding:16px 22px; color:#fff; font:700 34px var(--font-head); min-width:0; }
.th-opt b { flex:none; width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.25); display:grid; place-items:center; font-size:30px; }
.th-opt span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.th-big { flex:1; display:grid; place-items:center; font-size:170px; line-height:1; letter-spacing:.1em; color:var(--hl); }
.th-img { flex:1; min-height:0; width:100%; object-fit:contain; border-radius:14px; }
.th-img.sm { flex:none; height:130px; }
.th-empty { position:absolute; inset:0; display:grid; place-items:center; color:var(--dim); font:700 18px var(--font-head); }
.th-count { position:absolute; right:8px; bottom:8px; z-index:2; padding:2px 10px; border-radius:99px; background:rgba(33,53,71,.78); color:#fff; font:700 12px var(--font-head); opacity:0; transition:opacity .15s; pointer-events:none; }
.th-count.on { opacity:1; }
.pnew { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:260px; border:3px dashed var(--line); background:transparent; box-shadow:none; color:var(--dim); text-decoration:none; font:700 17px var(--font-head); text-align:center; transition:border-color .15s, color .15s, background .15s; }
.pnew:hover, .pnew:focus-visible { border-color:var(--brand); color:var(--hl); background:var(--soft); outline:0; transform:none; }
.pnew .plus { width:52px; height:52px; border-radius:50%; border:3px dashed currentColor; display:grid; place-items:center; font-size:30px; line-height:1; }
.pgtools .searchbar, .pgtools .sortsel, .pgtools .btn { box-sizing:border-box; height:46px; border:2px solid var(--line); border-radius:99px; box-shadow:none; margin:0; font:600 15px var(--font-head); }
.pgtools .searchbar { padding:0 16px; }
.pgtools .searchbar input { padding:0; height:100%; font-size:15px; }
.pgtools .sortsel { padding:0 16px; }
.pgtools .btn { padding:0 20px; justify-content:center; transform:none; }
.pgtools .btn:hover { transform:none; box-shadow:none; }
.pgtools .btn.pri { border-color:var(--brand-d); }
/* ---- round 15: the remote-control card in the console, and the tablet remote page ---- */
.rightcol { display:flex; flex-direction:column; gap:18px; min-width:0; }
.remotecard { overflow:hidden; }
.rc-art { margin:-6px -6px 6px; padding:8px 10px 0; border-radius:14px; background:linear-gradient(135deg, var(--soft), transparent 70%); }
.rc-art svg { display:block; width:100%; max-width:340px; height:auto; margin:0 auto; }
.rg-frame { fill:var(--card); stroke:var(--line); stroke-width:4; } .rg-bar { fill:var(--brand); } .rg-stand { fill:var(--line); } .rg-tab { fill:var(--soft); }
.rg-waves path { stroke:var(--brand); opacity:.25; animation:rgwave 2.2s ease-in-out infinite; }
.rg-waves .w2 { animation-delay:.25s; } .rg-waves .w3 { animation-delay:.5s; }
@keyframes rgwave { 0%, 100% { opacity:.2; } 50% { opacity:1; } }
.remotecard h3 { margin:6px 0 4px; }
.rc-row { display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-top:10px; }
.rc-qr { line-height:0; padding:8px; background:#fff; border:2px solid var(--line); border-radius:14px; }
.rc-side { display:flex; flex-direction:column; gap:8px; align-items:flex-start; flex:1 1 150px; min-width:0; }
.rc-warn { font-size:12.5px; margin:2px 0 0; }

body.remote > .bgfx { display:none; }
.rm { max-width:760px; margin:0 auto; padding:18px 18px 40px; display:flex; flex-direction:column; gap:18px; min-height:100vh; box-sizing:border-box; }
.rm-top { display:flex; align-items:center; gap:10px; font-family:var(--font-head); }
.rm-live { margin-left:auto; display:inline-flex; align-items:center; gap:8px; padding:5px 14px; border-radius:99px; background:var(--soft); color:var(--hl); font:700 14px var(--font-head); }
.rm-live i { width:10px; height:10px; border-radius:50%; background:#17a673; box-shadow:0 0 0 0 rgba(23,166,115,.6); animation:rmpulse 1.6s infinite; }
.rm-live.off { background:rgba(229,72,77,.14); color:var(--bad); } .rm-live.off i { background:var(--bad); animation:none; }
@keyframes rmpulse { 70% { box-shadow:0 0 0 9px rgba(23,166,115,0); } 100% { box-shadow:0 0 0 0 rgba(23,166,115,0); } }
.rm-card { background:var(--card); border:2px solid var(--line); border-radius:24px; padding:22px 24px 18px; box-shadow:0 6px 0 var(--line); }
.rm-meta { color:var(--dim); font:700 15px var(--font-head); }
.rm-title { margin:6px 0 14px; font-size:clamp(24px,5vw,40px); line-height:1.15; overflow-wrap:anywhere; }
.rm-stats { display:flex; justify-content:space-between; align-items:baseline; gap:12px; font:700 18px var(--font-head); color:var(--dim); }
.rm-timer { font-size:34px; color:var(--hl); }
.rm-bar { height:12px; border-radius:99px; background:var(--soft); overflow:hidden; margin-top:10px; }
.rm-bar i { display:block; height:100%; width:0; background:linear-gradient(90deg, var(--brand), var(--pop2)); border-radius:99px; transition:width .25s linear; }
.rm-ctl { display:grid; grid-template-columns:1fr 2.4fr 1fr; gap:14px; }
.rm-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:min(34vh,230px); border:3px solid var(--line); border-radius:26px; background:var(--card); color:var(--ink); font-family:var(--font-head); font-weight:800; cursor:pointer; box-shadow:0 6px 0 var(--line); touch-action:manipulation; -webkit-tap-highlight-color:transparent; padding:10px; text-align:center; }
.rm-btn b { font-size:clamp(34px,7vw,64px); line-height:1; } .rm-btn span { font-size:clamp(15px,2.6vw,22px); line-height:1.2; }
.rm-btn:active:not(:disabled) { transform:translateY(5px); box-shadow:0 1px 0 var(--line); }
.rm-btn:disabled { opacity:.4; cursor:not-allowed; }
.rm-btn.next { background:var(--brand); border-color:var(--brand-d); color:var(--on-brand); box-shadow:0 6px 0 var(--brand-d); } .rm-btn.next b { font-size:clamp(46px,10vw,96px); }
.rm-btn.next:active:not(:disabled) { box-shadow:0 1px 0 var(--brand-d); }
.rm-btn.extra { background:var(--pop2); border-color:#d9a000; color:#3a2a00; box-shadow:0 6px 0 #d9a000; }
.rm-end { align-self:center; background:none; border:2px solid var(--line); border-radius:99px; padding:12px 26px; font:700 16px var(--font-head); color:var(--bad); cursor:pointer; }
.rm-foot { text-align:center; margin:0; }
.rm-dead { text-align:center; margin-top:14vh; } .rm-big { font-size:64px; }
.rm-ctl.noextra { grid-template-columns:1fr 2.4fr; }
@media (max-width:560px) { .rm-ctl { grid-template-columns:1fr 1fr; } .rm-btn.next { grid-column:1 / -1; order:-1; min-height:150px; } }
/* pin question: numbered spots in the designer */
.pintgt { display:grid; place-items:center; color:#fff; font:800 11px var(--font-head); }
.pinno { flex:none; width:24px; height:24px; border-radius:50%; background:#17a673; color:#fff; display:grid; place-items:center; font:800 13px var(--font-head); }
.insprow2 .msg { flex:1; margin:0; }

/* ---- round 24: console layout - controls on the left, connecting devices on the right (a row underneath in a test run) ---- */
.console { grid-template-columns:minmax(0,1fr) 370px; }
@media (max-width:1000px) { .console { grid-template-columns:1fr; } }
.cons-main { min-width:0; }
.consoleside { display:flex; flex-direction:column; gap:16px; min-width:0; }
.testside { margin-top:20px; }
.testside .consoleside { display:grid; grid-template-columns:repeat(auto-fit, minmax(330px, 1fr)); align-items:start; }
.ctlbar { display:flex; gap:10px; align-items:stretch; flex-wrap:wrap; }
.ctlbar .btn { justify-content:center; }
.ctlbar #advance { flex:1 1 220px; }
.ctlfoot { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px; }
.ctlfoot .msg { margin:0; }
.ctltip { margin:8px 0 0; font-size:13px; }

.joincard h3, .remotecard h3 { margin:0; }
.jc-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.jc-head .cap::first-letter { text-transform:uppercase; }
.jc-count { min-width:34px; height:34px; padding:0 10px; border-radius:99px; background:var(--soft); color:var(--hl); display:grid; place-items:center; font:800 18px var(--font-head); box-sizing:border-box; }
.jc-row { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.jc-qr { flex:none; line-height:0; padding:7px; background:#fff; border:2px solid var(--line); border-radius:14px; }
.jc-info { flex:1 1 130px; min-width:0; }
.jc-info .codebig { font-size:34px; line-height:1.1; margin:2px 0 4px; }
.jc-info #joinurl { word-break:break-all; font-size:12.5px; }
#testjoinnote { margin-top:10px; font-size:13px; }
.jc-names { margin-top:12px; max-height:170px; overflow:auto; }
.jc-names:empty { display:none; }

.rc-top { display:flex; gap:12px; align-items:center; }
.rc-top .rc-art { flex:none; width:118px; margin:0; padding:4px; border-radius:14px; }
.rc-title { min-width:0; } .rc-title .msg { margin:4px 0 0; font-size:13px; }
.rc-row { margin-top:12px; }
.rc-qr { padding:6px; }
.hotkeys { margin-top:0; padding:12px 16px; }
.hotkeys summary { cursor:pointer; font:700 17px var(--font-head); list-style-position:inside; }
.hotkeys[open] summary { margin-bottom:2px; }main.wrap:not(.wide) .tc-console { background:none; border-color:transparent; padding:0; }      /* the tinted panels belong to the three-panel test view only */

/* ---- round 25: settings with categories (Account | Scoring | Subscription) ---- */
.setlayout { display:grid; grid-template-columns:210px minmax(0,1fr); gap:26px; align-items:start; margin-top:8px; }
.setnav { position:sticky; top:88px; display:flex; flex-direction:column; gap:4px; }
.setnav a { display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:14px; text-decoration:none; color:var(--ink); font:600 16px var(--font-head); border:2px solid transparent; }
.setnav a span { width:24px; text-align:center; }
.setnav a:hover { background:var(--soft); }
.setnav a.on { background:var(--card); border-color:var(--brand); box-shadow:0 3px 0 var(--brand-d); color:var(--hl); }
.setnav a:focus-visible { outline:3px solid var(--brand); outline-offset:2px; }
.setsec { display:none; } .setsec.on { display:block; }
.setsec > .card, .setsec .card { margin-bottom:0; }
.sethd { margin:26px 0 10px; font-size:19px; }
.subtop { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:18px; align-items:stretch; }
.planbox h2 { margin:2px 0 6px; font-size:26px; }
.planbox .btn { display:inline-flex; }
.couponcard .couponbox { display:flex; gap:8px; flex-wrap:wrap; }
.couponcard .couponbox input { flex:1 1 140px; min-width:0; text-transform:uppercase; letter-spacing:.06em; }
.setsave { display:flex; align-items:center; gap:14px; margin-top:24px; padding-top:18px; border-top:2px solid var(--line); }
@media (max-width:860px) {
  .setlayout { grid-template-columns:1fr; gap:14px; }
  .setnav { position:static; flex-direction:row; overflow-x:auto; gap:6px; padding-bottom:4px; }
  .setnav a { flex:none; padding:9px 14px; }
  .subtop { grid-template-columns:1fr; }
}
/* ---- round 26: event pass start choice, free-plan slide counter ---- */
.passwhen { display:flex; flex-direction:column; gap:7px; text-align:left; margin:2px 0 6px; padding:10px 12px; border:2px dashed var(--line); border-radius:14px; background:var(--soft); }
.passwhen label { display:flex; align-items:center; gap:8px; font-weight:600; cursor:pointer; }
.passwhen input[type=date] { width:100%; }
.passwhen small { font-size:12.5px; line-height:1.35; }
.capnote { margin-top:8px; text-align:center; font:700 13px var(--font-head); color:var(--dim); }
.capnote.full { color:var(--bad); }
/* ---- round 27: pricing page benefits + questions ---- */
.benefits { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; margin:6px auto 28px; max-width:1060px; }
.benefits > div { background:var(--card); border:2px solid var(--line); border-radius:20px; padding:18px 20px; display:flex; flex-direction:column; gap:6px; box-shadow:0 4px 0 var(--line); }
.benefits i { font-style:normal; font-size:30px; line-height:1; }
.benefits b { font:700 19px var(--font-head); }
.benefits span { color:var(--dim); font-size:14.5px; line-height:1.45; }
.faq { max-width:760px; margin:30px auto 0; }
.faq h2 { text-align:center; }
.faq details { background:var(--card); border:2px solid var(--line); border-radius:14px; padding:12px 18px; margin:10px 0; }
.faq summary { cursor:pointer; font:700 16px var(--font-head); }
.faq details[open] { border-color:var(--brand); }
.faq p { margin:8px 0 2px; color:var(--dim); }.benefits { grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width:900px) { .benefits { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px) { .benefits { grid-template-columns:1fr; } }

/* ---- round 30: the slide carries its own look (font, light / dark, background), gradients, company logo ---- */
.slide { font-family:var(--font); }
.slide[data-theme="dark"] { color-scheme:dark; --bg:#0F172A; --card:#1a2a3d; --ink:#F8FAFC; --dim:#94A3B8; --line:rgba(148,163,184,.28); --soft:rgba(34,187,177,.15); --input:#142236; --hl:#3fd6cb; --good:#34d399; --bad:#ff7a7f; --shadow:rgba(0,0,0,.45); --tint1:rgba(255,107,107,.22); --tint2:rgba(255,197,61,.2); --tint3:rgba(139,92,246,.24); --tint4:rgba(34,187,177,.24); --logo-a:#F8FAFC; color:var(--ink); }
.slide[data-theme="light"] { color-scheme:light; --bg:#F8FAFC; --card:#FFFFFF; --ink:#213547; --dim:#5f7287; --line:#d8e1ea; --soft:#E6F7F5; --input:#FFFFFF; --hl:#14867f; --good:#13a07a; --bad:#e5484d; --shadow:rgba(33,53,71,.14); --tint1:rgba(255,107,107,.16); --tint2:rgba(255,197,61,.22); --tint3:rgba(139,92,246,.14); --tint4:rgba(34,187,177,.16); --logo-a:#213547; color:var(--ink); }
.mgrad { animation:mgmove var(--mgd,16s) ease-in-out infinite; }
@keyframes mgmove { 0% { background-position:0% 50%; } 50% { background-position:100% 50%; } 100% { background-position:0% 50%; } }
.sl-grad { position:absolute; inset:0; }
.rail .sl-grad, .rail .mgrad { animation:none; }
.gradprev { height:34px; border-radius:10px; margin:8px 0; border:2px solid var(--line); }
.gradedit .row { align-items:center; }
.sl-colog { position:absolute; left:16px; bottom:12px; z-index:50; pointer-events:none; }
.sl-colog img { display:block; max-height:40px; max-width:150px; object-fit:contain; }
.umenu .langsw { background:var(--soft); }
.umenu .langsw a { color:var(--dim); }
.umenu .langsw a.on { background:var(--brand); color:var(--on-brand); }
.logorow { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.logoprev { width:180px; height:90px; border:2px dashed var(--line); border-radius:14px; display:grid; place-items:center; background:var(--soft); overflow:hidden; }
.logoprev img { max-width:100%; max-height:100%; object-fit:contain; }