:root{--bg:#f4f5f7;--card:#fff;--fg:#1c2330;--muted:#566070;--line:#d5dae2;--accent:#0d6efd;--accent-fg:#fff;--warn:#8a5a00;--warnbg:#fff4d6;--bad:#b42318;--badbg:#fde8e7;--ok:#127a3e}
@media (prefers-color-scheme:dark){:root{--bg:#12151b;--card:#1b2029;--fg:#e8ebf0;--muted:#a7b0bf;--line:#333b49;--accent:#4c8dff;--warnbg:#3a2f12;--warn:#f1c76b;--badbg:#3d1d1b;--bad:#ff8a80;--ok:#5fd38d}}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
#app{min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:24px 16px}
.card{background:var(--card);border-radius:14px;box-shadow:0 2px 14px rgba(0,0,0,.08);padding:24px;width:100%;max-width:520px}
h1{font-size:1.35rem;margin:0 0 6px}h2{font-size:1.1rem;margin:0 0 8px}
p{margin:0 0 12px}.muted{color:var(--muted);font-size:.9rem}.small{font-size:.8rem;color:var(--muted)}
label{display:block;font-weight:600;margin:12px 0 6px}
input[type=text],input[type=password]{width:100%;padding:11px 12px;font-size:1rem;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg)}
button{display:block;width:100%;margin-top:10px;padding:12px;font-size:1rem;font-weight:600;border-radius:8px;cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--fg)}
button.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
button[disabled]{opacity:.6;cursor:default}
a{color:var(--accent)}
.row{display:flex;gap:10px;align-items:center}.row>*{flex:1}
.toggle{display:flex;align-items:center;gap:8px;margin:8px 0;font-weight:600}.toggle input{width:20px;height:20px}
.preview{position:relative;background:#000;border-radius:10px;overflow:hidden;aspect-ratio:16/9;margin:12px 0 6px}
.preview video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.meter{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin:6px 0}.meter>i{display:block;height:100%;width:0;background:var(--ok);transition:width .1s}
.note{padding:10px 12px;border-radius:8px;background:var(--warnbg);color:var(--warn);margin:10px 0;font-size:.95rem}
.error{padding:10px 12px;border-radius:8px;background:var(--badbg);color:var(--bad);margin:10px 0}
.steps{list-style:none;padding:0;margin:12px 0}.steps li{padding:4px 0;color:var(--muted)}.steps li.now{color:var(--fg);font-weight:600}.steps li.done{color:var(--ok)}
.big{font-size:1.25rem;font-weight:700;margin:8px 0}
.checks{list-style:none;padding:0;margin:12px 0}.checks li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line)}
.checks .ok{color:var(--ok)}.checks .fail{color:var(--bad)}.checks .skip{color:var(--muted)}
#call{position:fixed;inset:0;background:#000;display:flex;flex-direction:column;z-index:10}
#call .bar{display:flex;align-items:center;gap:12px;padding:6px 12px;background:#111;color:#eee;font-size:.9rem}
#call .bar b{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#call iframe{flex:1;border:0;width:100%}
details{margin-top:12px}summary{cursor:pointer;color:var(--muted)}
.card.wide{max-width:760px}
.head{align-items:center}.head h1{flex:2}.head .small{flex:2;text-align:right}
button.link{background:none;border:0;color:var(--accent);width:auto;margin:0;padding:4px}
.tabs button{margin-top:6px}
.confs{list-style:none;padding:0;margin:16px 0}.conf{border:1px solid var(--line);border-radius:10px;padding:12px;margin:10px 0}
.conf .row b{flex:3}.badge{flex:0 0 auto;font-size:.8rem;padding:2px 8px;border-radius:10px;background:var(--line)}
.badge.s-open{background:#d7f5e3;color:#0b5d2e}.badge.s-locked{background:var(--warnbg);color:var(--warn)}.badge.s-ended{opacity:.7}
.actions{flex-wrap:wrap}.actions>*{flex:1 1 140px}
a.btn{display:block;text-align:center;margin-top:10px;padding:12px;font-weight:600;border-radius:8px;border:1px solid var(--line);color:var(--fg);text-decoration:none}
a.btn.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.more summary{display:inline-block;padding:4px 10px}.more button{width:auto;display:inline-block;margin:6px 6px 0 0;padding:8px 12px}
button.danger{color:var(--bad);border-color:var(--bad)}
select,input[type=number],input[type=datetime-local]{width:100%;padding:10px;font-size:1rem;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg)}
.copybox{width:100%;font:inherit;padding:8px;border-radius:8px;border:1px solid var(--line)}
.ok{color:var(--ok)}
/* the control panel (К4) */
.card.control{max-width:900px}
.control .row.head h1{flex:3}
.control input[type=search]{flex:2 1 200px;padding:9px 10px;font-size:1rem;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg);margin-top:6px}
.control section{margin-top:16px}
.people{list-style:none;padding:0;margin:8px 0}
.people>li{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:8px 0}
.people>li .row{flex-wrap:wrap;gap:6px 10px}.people>li .row>*{flex:0 1 auto}
.people>li .row .name{flex:1 1 160px;overflow-wrap:anywhere}
.people>li.hand{border-color:var(--warn);background:var(--warnbg)}
.people>li.absent{opacity:.75}
.hand-mark{font-weight:700;color:var(--warn)}
.mic.m-on{color:var(--ok);font-weight:600}
.devices{list-style:none;padding:0;margin:4px 0 8px}.devices li{padding:4px 0;border-bottom:1px dashed var(--line)}
.warn{color:var(--warn)}
.people .actions button,.control .row.actions>button,.control .row.actions>a.btn{flex:1 1 auto;width:auto;margin-top:6px;padding:8px 12px;font-size:.95rem}
.rename input{flex:2 1 160px}
.col{display:flex;flex-direction:column;align-items:flex-start}
#c-undo{display:flex;gap:10px;align-items:center}#c-undo button{width:auto;margin:0;padding:6px 14px}
@media (max-width:600px){#app{padding:8px 8px calc(8px + env(safe-area-inset-bottom))}.card{padding:14px}.people>li{padding:8px}}
[hidden]{display:none!important}
#c-filters{flex-wrap:wrap}#c-filters button{flex:1 1 auto;width:auto;padding:8px 12px}#c-filters input[type=search]{flex:1 1 100%}
@media (min-width:700px){#c-filters input[type=search]{flex:2 1 200px}}
/* the wrapper in the call (К5) */
#call .bar{flex-wrap:wrap}
.wleft{color:#bbb;white-space:nowrap}.wbadge{background:#7a4b00;color:#fff;border-radius:8px;padding:1px 8px;font-size:.8rem}
.wwarn{background:#5a1d1a;color:#ffd7d3;border-radius:8px;padding:2px 8px;font-size:.85rem}
#call .bar button.wbtn{width:auto;margin:0;padding:4px 12px;background:#222;color:#eee;border-color:#444}
.wmenu{position:fixed;right:8px;top:44px;z-index:12;background:var(--card);color:var(--fg);border-radius:10px;padding:8px;box-shadow:0 4px 18px rgba(0,0,0,.35);min-width:220px;display:flex;flex-direction:column}
.wmenu button,.wmenu a.btn{margin:4px 0;padding:10px;font-size:.95rem}
#plaques{position:absolute;top:44px;left:50%;transform:translateX(-50%);z-index:11;display:flex;flex-direction:column;gap:6px;width:min(560px,calc(100% - 16px))}
.plaque{display:flex;align-items:center;gap:8px;background:#1f2633;color:#f2f4f8;border-radius:10px;padding:8px 10px;box-shadow:0 2px 10px rgba(0,0,0,.4);font-size:.92rem}
.plaque.warn{background:#4a3410}.plaque .ptext{flex:1}
.plaque button,.plaque a.pbtn{width:auto;margin:0;padding:6px 10px;font-size:.85rem;color:#fff;background:#2c3646;border:1px solid #445;border-radius:8px;text-decoration:none}
.plaque .pbtn.primary{background:var(--accent);border-color:var(--accent)}
.plaque .pclose{background:none;border:0;font-size:1.1rem;padding:2px 6px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:20;display:flex;align-items:flex-start;justify-content:center;padding:24px 12px;overflow:auto}
.modal textarea{width:100%;font:inherit;padding:8px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--fg)}
.q-good{color:var(--ok)}.q-fair{color:var(--warn)}.q-poor{color:var(--bad)}
.timeline{list-style:none;padding:0;margin:6px 0;font-size:.8rem;max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:8px}
.timeline li{padding:3px 8px;border-bottom:1px solid var(--line)}
@media (max-width:600px){#call .bar{font-size:.8rem;gap:6px;padding:4px 8px calc(4px)}#plaques{top:64px}}
/* К6: administration */
.admin label.check{display:flex;align-items:center;gap:6px;margin:4px 0;font-weight:normal}.admin label.check input{width:auto;margin:0}
.admin ul.warnings{list-style:none;padding:0;margin:8px 0}.admin ul.warnings li{padding:4px 0}
.admin table.limits{border-collapse:collapse;width:100%;font-size:.85rem}.admin table.limits td{padding:3px 6px;border-bottom:1px solid var(--line);word-break:break-all}
.admin pre.report{max-height:420px;overflow:auto;font-size:.75rem;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px;white-space:pre-wrap;word-break:break-all}
.admin ul.confs li.conf{padding:8px 0;border-bottom:1px solid var(--line)}
#call .bar button.wbtn.hands{background:#5a4a00;border-color:#c9a400;color:#fff}
.plist{list-style:none;margin:8px 0 12px;padding:0;max-height:60vh;overflow:auto}
.plist .pitem{padding:8px 4px;border-bottom:1px solid #8883;overflow-wrap:anywhere}
.plist .pitem.me b{text-decoration:underline}
.plist .badge{margin-left:6px}
.plist .pacts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.plist .pacts .pbtn{width:auto;margin:0;padding:4px 10px;font-size:.85rem}
.plist .pacts .pbtn.danger{color:#b00020;border-color:#b0002066}
/* UX 2026-11-12: buttons in the page font; «⋯ More» looks like a button; the waiting room in the call */
button,input,select{font-family:inherit}
.more>summary{display:inline-block;margin-top:6px;padding:6px 14px;border:1px solid var(--line);border-radius:8px;color:var(--fg);font-weight:600;font-size:.9rem;list-style:none}
.more>summary::-webkit-details-marker{display:none}
.more[open]>summary{background:var(--bg)}
a.waits{color:var(--warn);font-weight:700}
.plist .phead{font-weight:700;padding:6px 4px;color:var(--warn)}
.plist .pitem.wait{background:var(--warnbg)}
/* accounts on https://<domain>/ (2026-11-12) */
input[type=email]{width:100%;padding:11px 12px;font-size:1rem;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg)}
img.captcha{display:block;margin:6px 0;border-radius:8px;border:1px solid var(--line);background:#f3f4f6}