:root{
  --bg:#07070d; --bg2:#0d0d17; --panel:#12121e; --panel2:#191929; --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --text:#ececf5; --dim:#9a9ab3; --mute:#6c6c86;
  --acc:#6366f1; --acc2:#818cf8; --ok:#34d399; --warn:#fbbf24; --bad:#f43f5e;
  --r:16px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font:15px/1.45 'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;overflow:hidden}
button{font:inherit;color:inherit}
input,textarea,select,option{font:inherit;font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:inherit}
html.open,html.open body{background:var(--bg)}
button{cursor:pointer;border:0;background:none}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

#app{height:100%;position:relative}
.scr{position:absolute;inset:0;display:none}
.scr.on{display:flex;animation:fade .25s ease both}
@keyframes fade{from{opacity:0}to{opacity:1}}
#scr-boot{align-items:center;justify-content:center}
.spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--line2);border-top-color:var(--acc);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}


.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:42px;padding:0 18px;border-radius:12px;font-weight:700;font-size:14px;transition:background .15s,border-color .15s,transform .1s,opacity .15s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--acc);color:#fff}
.btn.primary:hover{background:#5558ea}
.btn.primary:disabled{opacity:.5;cursor:default}
.btn.ghost{border:1px solid var(--line2);color:var(--text)}
.btn.ghost:hover{border-color:var(--acc2);background:rgba(99,102,241,.08)}
.btn.big{height:50px;padding:0 24px;font-size:15px;border-radius:14px}
.btn.wide{width:100%}
.btn.small{height:32px;padding:0 12px;font-size:12.5px;border-radius:9px}
.link{color:var(--acc2);font-weight:700;font-size:12px}
.link:hover{text-decoration:underline}
.err{color:var(--bad);font-size:13px;min-height:18px;margin-top:10px}

.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.01em}
.brand.small{font-size:15px}
.logo{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--acc),#a855f7);position:relative;box-shadow:0 6px 18px rgba(99,102,241,.35)}
.brand.small .logo{width:24px;height:24px;border-radius:7px}
.logo::before{content:"";position:absolute;left:22%;top:31%;width:40%;height:38%;border-radius:3px;background:#fff}
.logo::after{content:"";position:absolute;right:16%;top:36%;border-left:8px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent;transform:scaleX(-1)}


#scr-home{align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(60% 50% at 50% 0%,rgba(99,102,241,.18),transparent 70%),var(--bg)}
.home{max-width:620px;width:100%}
.home h1{font-size:clamp(36px,6vw,56px);line-height:1.05;letter-spacing:-.03em;margin:34px 0 14px;font-weight:800}
.home h1 span{background:linear-gradient(90deg,var(--acc2),#c084fc);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{color:var(--dim);font-size:17px;max-width:460px}
.home-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.join-box{flex:1;min-width:260px;display:flex;align-items:center;gap:8px;height:50px;padding:0 5px 0 14px;border-radius:14px;
  background:var(--panel);border:1px solid var(--line2);color:var(--dim);transition:border-color .15s}
.join-box:focus-within{border-color:var(--acc)}
.join-box input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--text)}
.join-box .btn{height:40px}


#scr-pre{align-items:center;justify-content:center;padding:24px;overflow:auto}
.pre{display:flex;gap:40px;align-items:center;max-width:1040px;width:100%;flex-wrap:wrap;justify-content:center}
.pre-preview{position:relative;flex:1 1 520px;max-width:640px;aspect-ratio:16/10;border-radius:22px;overflow:hidden;background:var(--panel);border:1px solid var(--line)}
.pre-preview video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.pre-off{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--dim);background:var(--panel)}
.pre-off.on{display:flex}
.pre-ctrls{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:14px}
.pre-side{flex:0 1 340px;display:flex;flex-direction:column;gap:12px}
.pre-side h2{font-size:28px;letter-spacing:-.02em;margin-top:18px}
.pre-who{color:var(--dim);font-size:14px;margin-top:-6px}
.lbl{font-size:12px;font-weight:700;color:var(--dim);margin-top:8px}
.field{height:46px;padding:0 14px;border-radius:12px;background:var(--panel);border:1px solid var(--line2);outline:0;transition:border-color .15s}
.field:focus{border-color:var(--acc)}
.pre-link{display:flex;align-items:center;gap:10px;margin-top:6px;padding:10px 12px;border-radius:12px;background:var(--bg2);border:1px solid var(--line);font-size:12.5px;color:var(--dim)}
.pre-link span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


.round{position:relative;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--panel2);color:var(--text);border:1px solid var(--line);transition:background .15s,transform .1s,color .15s}
.round:hover{background:#23233a}
.round:active{transform:scale(.95)}
.round.off{background:var(--bad);border-color:var(--bad);color:#fff}
.round.off:hover{background:#e11d48}
.round.on{background:var(--acc);border-color:var(--acc);color:#fff}
.round.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.round.danger:hover{background:#e11d48}
.round.wide{width:64px;border-radius:24px}
.round.flat{background:transparent;border-color:transparent}
.round.flat:hover,.round.flat.on{background:var(--panel2);color:var(--acc2);border-color:transparent}
.round.small{width:38px;height:38px}
.round.small svg{width:17px;height:17px}
.pre-ctrls .round{background:rgba(20,20,32,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pre-ctrls .round.off{background:var(--bad)}
.badge{position:absolute;top:4px;right:4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--acc);color:#fff;font-size:10.5px;font-weight:800;display:none;place-items:center;line-height:17px}
.badge.on{display:grid}

.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;background:var(--c,#4f46e5);font-size:17px;flex:none}
.avatar.big{width:96px;height:96px;font-size:38px}


#scr-wait,#scr-end{align-items:center;justify-content:center;padding:24px}
.msg-card{max-width:420px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.msg-card h2{font-size:24px;letter-spacing:-.02em;margin-top:10px}
.msg-card p{color:var(--dim)}
.msg-card .row{display:flex;gap:10px;margin-top:10px}
.pulse-ring{position:relative;padding:10px}
.pulse-ring::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--acc);animation:ring 1.8s ease-out infinite}
@keyframes ring{from{transform:scale(.85);opacity:1}to{transform:scale(1.35);opacity:0}}


#scr-call{flex-direction:column}
.call{display:flex;flex-direction:column;height:100%;width:100%}
.stage{flex:1;min-height:0;display:flex;gap:12px;padding:12px 12px 0}

.grid{flex:1;min-width:0;position:relative}
.tile{position:absolute;border-radius:var(--r);overflow:hidden;background:var(--panel);cursor:zoom-in;
  border:2px solid transparent;animation:pop .28s cubic-bezier(.2,1.2,.4,1) both;
  transition:left .28s cubic-bezier(.2,.8,.2,1),top .28s cubic-bezier(.2,.8,.2,1),width .28s cubic-bezier(.2,.8,.2,1),height .28s cubic-bezier(.2,.8,.2,1),border-color .15s,box-shadow .15s}
.tile.big{cursor:zoom-out}
.tile.small{border-radius:10px}
.tile.small .nm{left:5px;bottom:5px;padding:2px 6px;font-size:10.5px;border-radius:6px}
.tile.small .tags,.tile.small .more{display:none!important}
.tile.small .ph .avatar{font-size:14px}
.pin-ic{position:absolute;left:10px;top:10px;display:none;padding:3px 8px;border-radius:8px;font-size:11px;font-weight:700;background:rgba(8,8,14,.6)}
.tile.big .pin-ic{display:block}
@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.tile.speaking{border-color:var(--acc2);box-shadow:0 0 0 3px rgba(129,140,248,.25)}
.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.tile.me video{transform:scaleX(-1)}
.tile.screen video,.tile.me.screen video{object-fit:contain;transform:none}
.tile .ph{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:var(--panel)}
.tile.nocam .ph{display:flex}
.tile.nocam video{visibility:hidden}
.tile .ph .avatar{width:clamp(48px,22%,110px);height:auto;aspect-ratio:1;font-size:clamp(18px,3vw,40px)}
.tile .nm{position:absolute;left:10px;bottom:10px;display:flex;align-items:center;gap:6px;max-width:calc(100% - 20px);
  padding:4px 10px;border-radius:9px;background:rgba(8,8,14,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-size:12.5px;font-weight:600}
.tile .nm span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile .nm svg{width:14px;height:14px}
.tile .mic-off{color:var(--bad);display:none}
.tile.muted .mic-off{display:block}
.tile .tags{position:absolute;right:10px;top:10px;display:flex;gap:6px}
.tag{padding:3px 8px;border-radius:8px;font-size:11px;font-weight:700;background:rgba(8,8,14,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.tag.mod{color:var(--warn)}
.tag.hand{background:var(--warn);color:#1a1a1a}
.tag.conn{color:var(--dim)}
.tag.weak{color:var(--warn)}
.tile .more{position:absolute;right:8px;bottom:8px;width:32px;height:32px;border-radius:50%;display:none;place-items:center;background:rgba(8,8,14,.6);color:#fff}
.tile:hover .more{display:grid}
@media (hover:none){.tile .more{display:grid}}

.panel{width:340px;flex:none;display:none;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.panel.on{display:flex;animation:slide .22s cubic-bezier(.2,.9,.3,1) both}
@keyframes slide{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.panel-h{display:flex;align-items:center;justify-content:space-between;padding:10px 10px 0 12px}
.tabs{display:flex;gap:4px}
.tab{padding:8px 12px;border-radius:10px;font-weight:700;font-size:13.5px;color:var(--dim);display:flex;align-items:center;gap:6px}
.tab.on{background:var(--panel2);color:var(--text)}
.count{font-size:11px;padding:1px 7px;border-radius:9px;background:var(--line2)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--acc2);display:none}
.dot.on{display:block}
.icon-x{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--dim)}
.icon-x:hover{background:var(--panel2);color:var(--text)}
.panel-b{flex:1;min-height:0;display:none;flex-direction:column;overflow:auto;padding:10px 12px 12px}
.panel-b.on{display:flex}
.sec-h{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:14px 4px 6px}
.mod-box{display:flex;flex-direction:column;gap:4px;padding:6px;border-radius:12px;background:var(--bg2);border:1px solid var(--line)}
.sw{display:flex;align-items:center;gap:12px;padding:8px;border-radius:9px;cursor:pointer}
.sw:hover{background:var(--panel2)}
.sw input{position:absolute;opacity:0;pointer-events:none}
.sw i{flex:none;width:36px;height:20px;border-radius:12px;background:var(--line2);position:relative;transition:background .15s}
.sw i::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s}
.sw input:checked + i{background:var(--acc)}
.sw input:checked + i::after{left:18px}
.sw span{display:flex;flex-direction:column}
.sw b{font-size:13.5px}
.sw em{font-style:normal;font-size:12px;color:var(--dim)}
.person{display:flex;align-items:center;gap:10px;padding:7px 6px;border-radius:10px}
.person:hover{background:var(--panel2)}
.person .avatar{width:34px;height:34px;font-size:14px}
.person .pn{flex:1;min-width:0}
.person .pn b{display:block;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.person .pn em{font-style:normal;font-size:11.5px;color:var(--dim)}
.person .ic{color:var(--mute);display:flex;gap:4px}
.person .ic svg{width:16px;height:16px}
.person .ic .red{color:var(--bad)}
.person .opts{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--dim)}
.person .opts:hover{background:var(--line2);color:var(--text)}
.person .opts svg{width:18px;height:18px}
.knock{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:10px;background:rgba(99,102,241,.08);margin-bottom:6px;animation:pop .25s both}
.knock .pn{flex:1;min-width:0;font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.knock .avatar{width:30px;height:30px;font-size:13px}

.chat-list{flex:1;display:flex;flex-direction:column;gap:12px;overflow:auto;padding:6px 4px}
.chat-empty{color:var(--mute);font-size:12.5px;text-align:center;margin:auto 10px}
.cm .cm-h{display:flex;gap:8px;align-items:baseline;font-size:12px}
.cm .cm-h b{font-size:13px}
.cm .cm-h span{color:var(--mute)}
.cm p{font-size:14px;color:var(--text);word-wrap:break-word;white-space:pre-wrap;margin-top:2px}
.cm.me .cm-h b{color:var(--acc2)}
.chat-in{display:flex;gap:8px;align-items:center;margin-top:8px;padding:5px 5px 5px 14px;border-radius:24px;background:var(--panel2);border:1px solid var(--line)}
.chat-in:focus-within{border-color:var(--acc)}
.chat-in input{flex:1;min-width:0;background:none;border:0;outline:0}
.chat-in .round{background:var(--acc);border-color:var(--acc);color:#fff}

.bar{display:flex;align-items:center;gap:12px;padding:12px 18px;flex:none}
.bar-l,.bar-r{flex:1;display:flex;align-items:center;gap:10px}
.bar-l{font-size:14px;color:var(--dim);font-weight:600;min-width:0;white-space:nowrap;overflow:hidden}
.bar-l .sep{color:var(--mute)}
.dur{font-variant-numeric:tabular-nums;color:var(--text)}
.bar-r{justify-content:flex-end;gap:4px}
.bar-c{display:flex;gap:10px}


.menu{position:fixed;z-index:60;min-width:200px;padding:6px;border-radius:12px;background:var(--panel2);border:1px solid var(--line2);
  box-shadow:0 18px 40px rgba(0,0,0,.5);display:none;animation:fade .12s both}
.menu.on{display:block}
.menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:8px;font-size:13.5px;text-align:left}
.menu button:hover{background:rgba(255,255,255,.06)}
.menu button.bad{color:var(--bad)}
.menu svg{width:17px;height:17px}
.toasts{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);z-index:70;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:12px;padding:10px 12px 10px 16px;border-radius:12px;background:#1f1f33;border:1px solid var(--line2);
  box-shadow:0 12px 30px rgba(0,0,0,.45);font-size:13.5px;animation:up .22s cubic-bezier(.2,1.1,.4,1) both;max-width:min(92vw,460px)}
.toast .btn{height:30px}
@keyframes up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (max-width:760px){
  .stage{padding:8px 8px 0}
  .panel{position:fixed;inset:0 0 76px 0;width:auto;border-radius:0;z-index:40}
  .bar{padding:10px;gap:6px}
  .bar-l{flex:none;font-size:12.5px}
  .bar-l #clock,.bar-l #room-code,.bar-l .sep{display:none}
  .bar-c{gap:6px}
  .round{width:44px;height:44px}
  .round.wide{width:56px}
  .bar-r{flex:none}
  #c-copy{display:none}
  .pre{gap:22px}
  .pre-side h2{margin-top:4px}
}



.pub{margin-top:40px;display:none}
.pub.on{display:block}
.pub .sec-h{margin:0 0 10px;justify-content:flex-start;gap:8px}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:live 1.8s ease-out infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(52,211,153,.6)}100%{box-shadow:0 0 0 8px rgba(52,211,153,0)}}
.pub-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.pub-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--panel);border:1px solid var(--line);text-align:left;transition:border-color .15s,transform .15s;animation:pop .25s both}
.pub-card:hover{border-color:var(--acc);transform:translateY(-2px)}
.pub-card .pc-t{flex:1;min-width:0}
.pub-card b{display:block;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pub-card em{font-style:normal;font-size:12.5px;color:var(--dim)}
.pub-card .faces{display:flex;padding-left:8px}
.pub-card .faces .avatar{width:28px;height:28px;font-size:12px;border:2px solid var(--panel);margin-left:-8px}
.field.small{height:36px;font-size:13px;margin:4px 8px 6px}
.tile.big video{object-fit:contain}
.tile.big.me video{transform:scaleX(-1)}


.mute-all{margin:4px 8px 6px;align-self:flex-start}
.mute-all svg{width:16px;height:16px}
.chat-to{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px;color:var(--dim)}
.chat-to select{flex:1;min-width:0;height:30px;border-radius:9px;background:var(--panel2);color:var(--text);border:1px solid var(--line);padding:0 8px;font:inherit;font-size:12.5px;outline:0}
.chat-to select:focus{border-color:var(--acc)}
.chat-to.pm select{border-color:#c084fc;color:#e9d5ff}
.cm.pm{padding:8px 10px;border-radius:10px;background:rgba(192,132,252,.09);border:1px solid rgba(192,132,252,.22)}
.cm .pm-tag{font-size:10.5px;font-weight:800;letter-spacing:.04em;color:#c084fc;text-transform:uppercase}
.person.banned .pn b{color:var(--dim)}
.tile.lmute .nm::after{content:"muted for you";font-size:10px;color:var(--warn);margin-left:4px}


.react-pop{position:fixed;z-index:65;display:none;gap:4px;padding:6px;border-radius:999px;background:var(--panel2);border:1px solid var(--line2);
  box-shadow:0 14px 36px rgba(0,0,0,.5);animation:up .16s both}
.react-pop.on{display:flex}
.react-pop button{width:42px;height:42px;border-radius:50%;font-size:24px;line-height:1;display:grid;place-items:center;transition:transform .12s,background .12s}
.react-pop button:hover{background:rgba(255,255,255,.08);transform:scale(1.18) translateY(-2px)}
.floats{position:fixed;inset:0;pointer-events:none;z-index:55;overflow:hidden}
.float{position:absolute;display:flex;flex-direction:column;align-items:center;gap:2px;will-change:transform,opacity;
  animation:floatUp 3.2s cubic-bezier(.2,.7,.3,1) forwards}
.float .fe{font-size:40px;line-height:1;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4));animation:wobble 1.1s ease-in-out infinite alternate}
.float .fn{font-size:11px;font-weight:700;padding:2px 7px;border-radius:8px;background:rgba(8,8,14,.65);white-space:nowrap}
@keyframes floatUp{0%{transform:translate(-50%,0) scale(.4);opacity:0}10%{transform:translate(-50%,-20px) scale(1.1);opacity:1}
  75%{opacity:1}100%{transform:translate(-50%,-300px) scale(1);opacity:0}}
@keyframes wobble{from{transform:translateX(-7px) rotate(-8deg)}to{transform:translateX(7px) rotate(8deg)}}
.modal{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(4,4,10,.66);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modal.on{display:flex;animation:fade .16s both}
.modal-card{width:100%;max-width:420px;padding:22px;border-radius:18px;background:var(--panel);border:1px solid var(--line2);box-shadow:0 24px 60px rgba(0,0,0,.55);
  display:flex;flex-direction:column;gap:10px;animation:pop .22s cubic-bezier(.2,1.2,.4,1) both}
.modal-card h3{font-size:19px;letter-spacing:-.01em}
.modal-card > p{color:var(--dim);font-size:13.5px;margin-bottom:4px}
.leave-opt{display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%;padding:12px;border-radius:12px;background:var(--bg2);border:1px solid var(--line);text-align:left}
.leave-opt .lo-t{flex:1;min-width:150px;display:flex;flex-direction:column}
.leave-opt b{font-size:14px}
.leave-opt em{font-style:normal;font-size:12px;color:var(--dim)}
.leave-opt select{height:32px;border-radius:9px;background:var(--panel2);color:var(--text);border:1px solid var(--line2);padding:0 8px;font:inherit;font-size:13px;outline:0;max-width:170px}
.btn-opt{cursor:pointer;transition:border-color .15s,background .15s}
.btn-opt:hover{border-color:var(--acc)}
.btn-opt.bad b{color:var(--bad)}
.btn-opt.bad:hover{border-color:var(--bad);background:rgba(244,63,94,.07)}


#cloak{position:fixed;inset:0;z-index:10000;background:#fff;color:#000;font:16px "Times New Roman",Times,serif;padding:8px;text-align:left;user-select:none;-webkit-user-select:none;overflow:auto}
#cloak h1{font:bold 2em "Times New Roman",Times,serif;margin:.67em 0}
#cloak center{display:block;text-align:center}
#cloak hr{border:0;border-top:1px solid #aaa;border-bottom:1px solid #eee;margin:8px 0}
#cloak-hint{display:none;margin-top:14px;text-align:center;font-size:13px;color:#999}
#cloak.gone{display:none}
html.cloaked #app,html.cloaked .toasts{display:none}


#scr-404{align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(50% 40% at 50% 30%,rgba(99,102,241,.14),transparent 70%),var(--bg)}
.nf{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:440px}
.nf-code{font-size:clamp(90px,20vw,150px);font-weight:800;letter-spacing:-.05em;line-height:.9;
  background:linear-gradient(180deg,var(--acc2),rgba(99,102,241,.15));-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:nfFloat 3s ease-in-out infinite alternate}
@keyframes nfFloat{from{transform:translateY(-4px)}to{transform:translateY(6px)}}
.nf h2{font-size:24px;letter-spacing:-.02em}
.nf p{color:var(--dim);font-size:14px}
.nf .row{display:flex;gap:10px;margin-top:8px}


.grid-wrap{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.grid-wrap .grid{flex:1;min-height:0}
.sub-bar{display:none;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 10px 8px 14px;border-radius:12px;
  background:linear-gradient(90deg,rgba(192,132,252,.16),rgba(99,102,241,.1));border:1px solid rgba(192,132,252,.3);font-size:13.5px;animation:up .2s both}
.sub-bar.on{display:flex}
.sub-bar .sb-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sub-bar .sb-t b{color:#e9d5ff}
.rooms-note{color:var(--dim);font-size:12.5px;margin:4px 4px 10px}
.room-row{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:var(--bg2);border:1px solid var(--line);margin-bottom:8px}
.room-row.here{border-color:rgba(129,140,248,.55);background:rgba(99,102,241,.08)}
.room-row .rr-t{flex:1;min-width:0}
.room-row b{display:block;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room-row em{font-style:normal;font-size:11.5px;color:var(--dim);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room-row .tagx{font-size:11px;color:var(--mute);font-weight:700}
.new-room{display:flex;gap:8px;margin-top:6px}
.new-room .field{flex:1;min-width:0;height:36px;font-size:13px}


.cm{position:relative}
.cm-copy{position:absolute;right:0;top:-2px;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--mute);opacity:0;transition:opacity .12s}
.cm:hover .cm-copy{opacity:1}
.cm-copy:hover{background:var(--panel2);color:var(--text)}
.cm-copy svg{width:14px;height:14px}
@media (hover:none){.cm-copy{opacity:.7}}

#cloak{transition:opacity .6s ease}



#c-ns.on,#pre-ns.on{background:var(--ok);border-color:var(--ok);color:#06281c}
@media (max-width:760px){#c-ns{display:none}}


.owner-link{display:block;margin:34px auto 0;color:var(--mute);font-weight:600}
.owner-link.is-owner{color:#fbbf24}
.tag.owner{background:linear-gradient(90deg,#f59e0b,#fbbf24);color:#1a1205}
.person .pn em .own{color:#fbbf24;font-weight:700}


.opanel{display:none;margin-top:34px;padding:14px;border-radius:16px;background:linear-gradient(180deg,rgba(251,191,36,.07),transparent 70%),var(--panel);border:1px solid rgba(251,191,36,.28)}
.opanel.on{display:block}
.opanel .sec-h{margin:0 0 10px;color:#fbbf24}
.op-n{color:var(--dim);font-weight:700;letter-spacing:0}
.op-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px;border-radius:12px;background:var(--bg2);border:1px solid var(--line);margin-bottom:8px}
.op-row.live{border-color:rgba(52,211,153,.35)}
.op-t{flex:1;min-width:180px}
.op-t b{display:block;font-size:13.5px;font-family:ui-monospace,Consolas,monospace}
.op-t em{font-style:normal;font-size:12px;color:var(--dim);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:360px}
.op-flags{display:flex;gap:5px;flex-wrap:wrap}
.op-flag{font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:7px;background:var(--panel2);color:var(--dim)}
.op-flag.lock{background:rgba(244,63,94,.15);color:#fb7185}
.op-flag.wait{background:rgba(251,191,36,.14);color:#fbbf24}
.op-flag.live{background:rgba(52,211,153,.14);color:#34d399}
.op-btns{display:flex;gap:6px;flex-wrap:wrap}
.pub-card .crown{font-size:14px;margin-left:4px}


.cm-report{position:absolute;right:28px;top:-2px;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--mute);opacity:0;transition:opacity .12s}
.cm:hover .cm-report{opacity:1}
.cm-report:hover{background:rgba(244,63,94,.12);color:#fb7185}
.cm-report svg{width:14px;height:14px}
@media (hover:none){.cm-report{opacity:.7}}
.pm-note{font-size:11px;color:var(--mute);margin:6px 2px 0}
.op-reports{margin-bottom:12px}
.op-rep{padding:10px;border-radius:12px;background:rgba(244,63,94,.07);border:1px solid rgba(244,63,94,.3);margin-bottom:8px}
.op-rep .rp-h{font-size:12px;color:var(--dim);margin-bottom:4px}
.op-rep .rp-t{font-size:14px;white-space:pre-wrap;word-wrap:break-word}
.op-rep .op-btns{margin-top:8px}
.wide-card{max-width:620px;max-height:84vh}
.cv-head{display:flex;align-items:center;justify-content:space-between}
.cv-list{overflow:auto;display:flex;flex-direction:column;gap:8px;padding-right:4px}
.cv-row{padding:8px 10px;border-radius:10px;background:var(--bg2);border:1px solid var(--line);font-size:13.5px}
.cv-row.pm{border-color:rgba(192,132,252,.3);background:rgba(192,132,252,.07)}
.cv-row .cv-h{font-size:11.5px;color:var(--dim);margin-bottom:2px}
.cv-row .cv-h b{color:var(--text)}
.cv-row p{white-space:pre-wrap;word-wrap:break-word}


.opanel{padding:0;margin-top:28px}
.op-head{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;font-weight:800;font-size:13px;color:#fbbf24;text-align:left}
.op-head .op-n{flex:1;font-size:12px}
.op-car{transition:transform .15s;color:var(--dim)}
.opanel.open .op-car{transform:rotate(180deg)}
.op-body{display:none;padding:0 12px 12px}
.opanel.open .op-body{display:block}
.op-bar{display:flex;align-items:center;justify-content:space-between;margin:4px 2px 6px}
.op-scroll{max-height:260px;overflow:auto;padding-right:2px}
.op-row{padding:6px 8px;gap:6px;margin-bottom:5px}
.op-t{min-width:0}
.op-t b{font-size:12px}
.op-t em{font-size:11px;max-width:none}
.op-flags{flex-wrap:nowrap}
.op-flag{font-size:9.5px;padding:1px 5px}
.op-btns .btn.small{height:26px;padding:0 8px;font-size:11.5px;border-radius:7px}
.op-reports{max-height:200px;overflow:auto;margin-bottom:8px}
.op-rep{padding:8px;margin-bottom:6px}
.op-rep .rp-t{font-size:13px}
@media (max-width:620px){.op-row{flex-wrap:wrap}.op-t em{white-space:normal}}

.op-kick{color:#fb7185!important;border-color:rgba(244,63,94,.35)!important}
.op-kick:hover{background:rgba(244,63,94,.1)!important}
.op-subs{flex:0 0 100%;padding:4px 0 2px;border-top:1px solid var(--line);margin-top:2px}
.op-sub{display:flex;align-items:center;gap:6px;padding:3px 0;flex-wrap:wrap}
.op-sub-t{font-size:12px;color:var(--dim);flex:1;min-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.cv-list{max-height:62vh;scroll-behavior:auto}


#c-afk.on{background:#6366f1;border-color:#6366f1;color:#fff}
.tile.afk video{filter:grayscale(1) brightness(.45)}
.tile.afk .ph{filter:grayscale(.6) brightness(.7)}
.afk-badge{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  padding:6px 14px;border-radius:999px;font-weight:800;font-size:15px;letter-spacing:.06em;
  background:rgba(15,15,30,.82);border:1px solid rgba(129,140,248,.55);color:#c7d2fe;box-shadow:0 8px 24px rgba(0,0,0,.45);pointer-events:none}
.tile.afk .afk-badge{display:block;animation:afkBob 2.4s ease-in-out infinite}
.tile.small .afk-badge{font-size:10px;padding:2px 7px}
@keyframes afkBob{50%{transform:translate(-50%,-58%)}}

.of-card{max-width:560px}
#of-slot .opanel{display:block;margin:0;border:0;background:none}
#of-slot .op-head{display:none}
#of-slot .op-body{display:block;padding:0}
#of-slot .op-scroll{max-height:46vh}
@media (max-width:760px){#c-afk{display:none}}

#pre-hear{font-size:18px}
#pre-hear.on{background:var(--acc);border-color:var(--acc)}


#c-music.on{background:#10b981;border-color:#10b981;color:#fff}
.music-bar{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:50;display:none;align-items:center;gap:10px;
  padding:7px 8px 7px 14px;border-radius:999px;background:#12281f;border:1px solid rgba(16,185,129,.45);box-shadow:0 10px 26px rgba(0,0,0,.4);font-size:13px;white-space:nowrap}
.music-bar.on{display:flex;animation:up .2s both}
.music-bar input{width:120px;accent-color:#10b981}
@media (max-width:760px){#c-music{display:none}}



.tag.rank{background:color-mix(in srgb,var(--bc) 30%,rgba(8,8,14,.7));color:#fff;border:1px solid color-mix(in srgb,var(--bc) 70%,transparent)}
.pbadge{display:inline-block;margin:2px 4px 0 0;padding:1px 7px;border-radius:7px;font-size:11px;font-weight:700;font-style:normal;color:#fff;
  background:color-mix(in srgb,var(--bc) 35%,transparent);border:1px solid color-mix(in srgb,var(--bc) 70%,transparent)}
.bd-row{display:flex;align-items:center;gap:8px;padding:6px 0}
.bd-row .pbadge{font-size:13px;padding:3px 10px}
.bd-row .link{margin-left:auto;color:var(--bad)}
.bd-new{display:flex;gap:8px}
.bd-emoji{width:64px;text-align:center;font-size:18px;padding:0}
.bd-colors{display:flex;gap:8px;flex-wrap:wrap}
.bd-colors button{width:28px;height:28px;border-radius:50%;border:2px solid transparent;background:var(--c)}
.bd-colors button.on{border-color:#fff;box-shadow:0 0 0 2px var(--c)}


.tile .tags{left:auto;max-width:72%;flex-wrap:wrap;justify-content:flex-end;row-gap:5px}
.tile .tags .tag{white-space:nowrap}
.tile.small .tags{display:flex!important;top:4px;right:4px;max-width:90%;gap:3px}
.tile.small .tags .tag{font-size:9px;padding:1px 5px}
.tile.small .tags .tag.conn,.tile.small .tags .tag.weak{display:none}
.pub-n{font-size:12px;color:var(--dim);font-weight:500}
.pub-empty{grid-column:1/-1;color:var(--dim);font-size:13.5px;padding:14px;border:1px dashed var(--line2);border-radius:14px;margin:0}
.sw b .beta{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:1px 6px;border-radius:5px;background:rgba(245,158,11,.18);color:#fbbf24;margin-left:6px;vertical-align:1px}
#pre-pub{margin:4px 0 2px;padding:8px 0}


#cloak.fading{animation:cloakMelt 1s cubic-bezier(.6,0,1,.6) forwards!important;pointer-events:none;overflow:hidden}
@keyframes cloakMelt{to{transform:translateY(130%) scaleY(1.6) skewX(6deg);filter:blur(3px)}}


:root{--glass:rgba(22,22,38,.52);--gline:rgba(255,255,255,.1);--gline2:rgba(255,255,255,.18);--blur:blur(20px) saturate(150%)}
html.open body{background:radial-gradient(70% 60% at 15% 0%,color-mix(in srgb,var(--acc) 22%,transparent),transparent 70%),
  radial-gradient(60% 60% at 100% 100%,color-mix(in srgb,var(--acc2) 14%,transparent),transparent 70%),var(--bg)}
#scr-home,#scr-404{background:none}
#scr-home::before{content:"";position:fixed;inset:-10%;z-index:-1;pointer-events:none;
  background:radial-gradient(40vmax 40vmax at 20% 15%,color-mix(in srgb,var(--acc) 35%,transparent),transparent 60%),
  radial-gradient(35vmax 35vmax at 85% 30%,rgba(168,85,247,.25),transparent 60%),
  radial-gradient(40vmax 40vmax at 50% 100%,color-mix(in srgb,var(--acc2) 22%,transparent),transparent 60%);
  animation:aurora 18s ease-in-out infinite alternate}
@keyframes aurora{from{transform:scale(1) translate(0,0)}to{transform:scale(1.15) translate(-3%,2%)}}
#scr-home{overflow:auto;align-items:flex-start;padding-top:max(24px,8vh)}


.home{max-width:720px;margin:0 auto;animation:rise .5s cubic-bezier(.2,.9,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.home-top{display:flex;align-items:center;justify-content:space-between}
.home-stat{display:inline-flex;align-items:center;gap:8px;margin-top:30px;padding:7px 14px 7px 12px;border-radius:999px;font-size:13px;color:var(--dim);
  background:var(--glass);border:1px solid var(--gline);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.home-stat b{color:var(--text)}
.home h1{margin-top:18px}
.join-box,.pub-card,.pub-empty,.opanel{background:var(--glass);border-color:var(--gline);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.pub-card{border-radius:16px;padding:14px 16px;transition:border-color .2s,transform .2s cubic-bezier(.2,1.3,.4,1),box-shadow .2s}
.pub-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px color-mix(in srgb,var(--acc) 25%,transparent)}
.pub-list .pub-card:nth-child(2){animation-delay:.05s}.pub-list .pub-card:nth-child(3){animation-delay:.1s}.pub-list .pub-card:nth-child(4){animation-delay:.15s}
.btn.primary{background:linear-gradient(135deg,var(--acc),color-mix(in srgb,var(--acc) 60%,#a855f7));box-shadow:0 8px 24px color-mix(in srgb,var(--acc) 40%,transparent);transition:transform .15s,box-shadow .2s,filter .15s}
.btn.primary:hover{background:linear-gradient(135deg,var(--acc),color-mix(in srgb,var(--acc) 60%,#a855f7));filter:brightness(1.1);transform:translateY(-1px)}
.btn.ghost{background:rgba(255,255,255,.04);border-color:var(--gline2)}
.btn.ghost:hover{background:color-mix(in srgb,var(--acc) 12%,transparent);border-color:var(--acc2)}
.logo{background:linear-gradient(135deg,var(--acc),#a855f7)}
.home h1 span{background:linear-gradient(90deg,var(--acc2),#c084fc,var(--acc2));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:-200% 0}}


.pre-preview{border-color:var(--gline);box-shadow:0 30px 70px rgba(0,0,0,.45)}
.pre-side{padding:22px;border-radius:22px;background:var(--glass);border:1px solid var(--gline);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.field,.pre-link{background:rgba(255,255,255,.04);border-color:var(--gline)}
.pre-ctrls .round{background:rgba(15,15,28,.45);border-color:var(--gline2);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}


.call{position:relative}
.stage{padding:14px 14px 92px}
.bar{position:absolute;left:0;right:0;bottom:0;padding:12px 16px 14px;pointer-events:none;transition:transform .35s cubic-bezier(.2,.9,.3,1),opacity .35s}
.bar>*{pointer-events:auto}
.bar-c{padding:7px;border-radius:999px;gap:8px;background:var(--glass);border:1px solid var(--gline);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:0 16px 40px rgba(0,0,0,.45)}
.bar-l,.bar-r{flex:1}
.bar-l>*{flex:none}
.bar-l{padding:0 4px}
.bar-r>*{flex:none}
.bar-r{gap:6px}
html.idle .bar{transform:translateY(24px);opacity:0}
html.idle .tile{cursor:none}
.round{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.06);transition:background .15s,transform .15s cubic-bezier(.2,1.4,.4,1),color .15s,box-shadow .2s}
.round:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
.round:active{transform:scale(.92)}
.round.on{background:var(--acc);border-color:var(--acc);box-shadow:0 6px 18px color-mix(in srgb,var(--acc) 45%,transparent)}
.round.off,.round.danger{box-shadow:0 6px 18px rgba(244,63,94,.35)}
.round.flat{background:var(--glass);border-color:var(--gline);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.round.flat:hover,.round.flat.on{background:rgba(255,255,255,.14);color:var(--acc2);box-shadow:none}
.round[title]:hover::after{content:attr(title);position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);white-space:nowrap;
  padding:5px 9px;border-radius:8px;font-size:11.5px;font-weight:600;color:var(--text);background:rgba(16,16,28,.9);border:1px solid var(--gline);pointer-events:none;animation:up .15s both;z-index:5}
@media (hover:none){.round[title]:hover::after{display:none}}
#home-theme[title]:hover::after{bottom:auto;top:calc(100% + 10px)}


.tile{border-radius:20px;background:#11111d;border:1px solid var(--gline);box-shadow:0 10px 30px rgba(0,0,0,.35);animation:pop .45s cubic-bezier(.2,1.3,.4,1) both}
@keyframes pop{from{opacity:0;transform:scale(.85) translateY(10px)}to{opacity:1;transform:none}}
.tile.speaking{border-color:var(--acc2);box-shadow:0 0 0 2px var(--acc2),0 0 30px color-mix(in srgb,var(--acc2) 45%,transparent)}
.tile .ph{background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--acc) 24%,#11111d),#0c0c16 75%)}
.tile .ph .avatar{position:relative;transform:scale(calc(1 + var(--lvl,0) * .14));transition:transform .12s ease-out;
  box-shadow:0 0 0 calc(var(--lvl,0) * 22px) color-mix(in srgb,var(--c,#4f46e5) 30%,transparent),0 0 calc(20px + var(--lvl,0) * 50px) color-mix(in srgb,var(--c,#4f46e5) 55%,transparent);
  background:linear-gradient(145deg,color-mix(in srgb,var(--c,#4f46e5) 75%,#fff),var(--c,#4f46e5))}
.tile .ph .avatar::before,.tile .ph .avatar::after{content:"";position:absolute;inset:-10%;border-radius:50%;border:2px solid color-mix(in srgb,var(--c,#4f46e5) 60%,transparent);opacity:0}
.tile.speaking .ph .avatar::before{animation:ripple 1.6s ease-out infinite}
.tile.speaking .ph .avatar::after{animation:ripple 1.6s ease-out .8s infinite}
@keyframes ripple{from{transform:scale(1);opacity:.8}to{transform:scale(1.7);opacity:0}}
.tile:not(.speaking) .ph .avatar{animation:breathe 4s ease-in-out infinite}
@keyframes breathe{50%{filter:brightness(1.15)}}
.tile .nm,.tag,.tile .more,.pin-ic{background:rgba(10,10,20,.5);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.tile .nm{border-radius:10px;font-weight:700}


.stage{gap:14px}
.panel{background:var(--glass);border-color:var(--gline);border-radius:22px;backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:0 20px 50px rgba(0,0,0,.4)}
.tabs{padding:3px;border-radius:12px;background:rgba(255,255,255,.05)}
.tab{border-radius:9px;transition:background .15s,color .15s}
.tab.on{background:rgba(255,255,255,.1)}
.mod-box{background:rgba(255,255,255,.035);border-color:var(--gline)}
.sw i::after{transition:left .25s cubic-bezier(.2,1.4,.4,1);box-shadow:0 1px 4px rgba(0,0,0,.35)}
.sw input:checked + i{background:var(--acc);box-shadow:0 0 12px color-mix(in srgb,var(--acc) 50%,transparent)}
.person{transition:background .15s}
.person:hover{background:rgba(255,255,255,.06)}
.cm{animation:up .22s cubic-bezier(.2,1.1,.4,1) both;padding:8px 11px;border-radius:14px 14px 14px 4px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.05);margin-right:24px}
.cm.me{align-self:flex-end;margin:0 0 0 24px;border-radius:14px 14px 4px 14px;background:color-mix(in srgb,var(--acc) 22%,transparent);border-color:color-mix(in srgb,var(--acc) 35%,transparent)}
.cm.pm{border-radius:14px}
.chat-in{background:rgba(255,255,255,.06);border-color:var(--gline)}
.chat-to select{background:rgba(255,255,255,.06);border-color:var(--gline)}


.menu,.react-pop,.toast,.modal-card,.theme-pop{background:rgba(24,24,40,.72);border-color:var(--gline2);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.menu{animation:menuIn .16s cubic-bezier(.2,1.2,.4,1) both;border-radius:14px}
@keyframes menuIn{from{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:none}}
.modal{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.leave-opt{background:rgba(255,255,255,.04)}
.toasts{bottom:100px}


.theme-pop{position:fixed;z-index:90;display:none;flex-direction:column;gap:10px;padding:14px;border-radius:16px;border:1px solid;box-shadow:0 20px 50px rgba(0,0,0,.5);width:232px}
.theme-pop.on{display:flex;animation:menuIn .18s cubic-bezier(.2,1.2,.4,1) both}
.theme-pop>b{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.th-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.th-sw{width:100%;aspect-ratio:1;border-radius:50%;background:var(--c);border:2px solid transparent;transition:transform .15s cubic-bezier(.2,1.4,.4,1)}
.th-sw:hover{transform:scale(1.12)}
.th-sw.on{border-color:#fff;box-shadow:0 0 0 2px var(--c),0 0 14px var(--c)}
.th-mode{width:100%}


html.light{--bg:#eef0f8;--bg2:#e6e8f3;--panel:#ffffff;--panel2:#f1f2f9;--line:rgba(20,20,60,.08);--line2:rgba(20,20,60,.14);--text:#16162a;--dim:#5b5b78;--mute:#8a8aa3;
  --glass:rgba(255,255,255,.6);--gline:rgba(20,20,60,.1);--gline2:rgba(20,20,60,.16)}
html.light .round:not(.on):not(.off):not(.danger){background:rgba(20,20,60,.06);border-color:rgba(20,20,60,.06)}
html.light .round:not(.on):not(.off):not(.danger):hover{background:rgba(20,20,60,.12)}
html.light .round.flat{background:var(--glass)}
html.light .menu,html.light .react-pop,html.light .toast,html.light .modal-card,html.light .theme-pop{background:rgba(255,255,255,.82)}
html.light .round[title]:hover::after{background:rgba(255,255,255,.95)}
html.light .tile{background:#d9dbea}
html.light .tile .ph{background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--acc) 22%,#fff),#dfe1ef 75%)}
html.light .tile .nm,html.light .tag{color:#fff}
html.light .cm,html.light .tabs,html.light .mod-box,html.light .field,html.light .pre-link,html.light .chat-in{background:rgba(20,20,60,.04)}
html.light .tab.on{background:#fff}
html.light .pre-preview{background:#dfe1ef}


@media (max-width:760px){
  .stage{padding:8px 8px 80px}
  .bar{padding:8px;gap:6px}
  .bar-l{display:none}
  .bar-c{flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;justify-content:flex-start;padding:5px;gap:6px}
  .bar-c::-webkit-scrollbar{display:none}
  .bar-c .round{flex:none}
  .bar-r{flex:none}
  .bar-r #c-theme{display:none}
  .panel{inset:auto 0 0 0;height:78vh;border-radius:24px 24px 0 0;z-index:45}
  .panel.on{animation:sheet .3s cubic-bezier(.2,.9,.3,1) both}
  .panel-h{position:relative;padding-top:16px}
  .panel-h::before{content:"";position:absolute;left:50%;top:6px;width:40px;height:4px;border-radius:2px;background:var(--gline2);transform:translateX(-50%)}
  .tile{border-radius:16px}
  .home h1{font-size:40px}
  .home-actions{flex-direction:column}
  .home-actions .btn.big{width:100%}
  .pre-side{padding:16px}
}
@keyframes sheet{from{transform:translateY(100%)}to{transform:none}}



#scr-home{--mx:.5;--my:.3}
#scr-home::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(28vmax 28vmax at calc(var(--mx) * 100%) calc(var(--my) * 100%),color-mix(in srgb,var(--acc2) 22%,transparent),transparent 65%);transition:background .2s}
#scr-home::before{translate:calc((var(--mx) - .5) * -40px) calc((var(--my) - .5) * -40px)}
.home h1{translate:calc((var(--mx) - .5) * 14px) calc((var(--my) - .5) * 10px);transition:translate .4s cubic-bezier(.2,.8,.2,1)}
.home .lede{translate:calc((var(--mx) - .5) * 8px) calc((var(--my) - .5) * 6px);transition:translate .5s cubic-bezier(.2,.8,.2,1)}
.pub-card,#btn-new,.join-box,.home-stat{transform:perspective(700px) rotateX(var(--rx,0)) rotateY(var(--ry,0));transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .2s,border-color .2s,filter .15s;position:relative}
.tilt{transition:transform .08s linear,box-shadow .2s,border-color .2s!important}
.pub-card.tilt,.join-box.tilt,.home-stat.tilt{background:radial-gradient(160px circle at var(--gx) var(--gy),color-mix(in srgb,var(--acc2) 18%,transparent),transparent 70%),var(--glass);border-color:color-mix(in srgb,var(--acc2) 45%,transparent)}
#btn-new.tilt{box-shadow:0 14px 34px color-mix(in srgb,var(--acc) 55%,transparent)}
.pub-card:hover{transform:perspective(700px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(-3px)}
@media (hover:none){#scr-home::after{display:none}}


.tile.small{opacity:.82;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.tile.small:hover{opacity:1}
.tile.small .ph .avatar{width:42%!important;font-size:13px}


.upd-bar{position:fixed;left:50%;top:16px;transform:translateX(-50%);z-index:95;display:flex;align-items:center;gap:12px;padding:8px 8px 8px 16px;border-radius:999px;font-size:13.5px;
  background:var(--glass);border:1px solid var(--gline2);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:0 14px 34px rgba(0,0,0,.4);animation:up .3s both}
.upd-bar b{font-variant-numeric:tabular-nums}
.upd-bar .btn{height:30px}


.cs{position:relative;flex:1;min-width:0;max-width:100%}
.cs>select{display:none!important}
.cs-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:32px;padding:0 8px 0 11px;border-radius:10px;font-size:12.5px;color:var(--text);text-align:left;
  background:rgba(255,255,255,.06);border:1px solid var(--gline);transition:border-color .15s,background .15s}
.cs-btn:hover,.cs.open .cs-btn{border-color:var(--acc2);background:color-mix(in srgb,var(--acc) 10%,transparent)}
.cs-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-btn svg{width:15px;height:15px;color:var(--dim);transition:transform .2s}
.cs.open .cs-btn svg{transform:rotate(180deg)}
.cs-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;display:none;flex-direction:column;gap:2px;padding:5px;max-height:260px;overflow:auto;border-radius:12px;
  background:rgba(24,24,40,.85);border:1px solid var(--gline2);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:0 16px 40px rgba(0,0,0,.45)}
.cs.up .cs-list{top:auto;bottom:calc(100% + 6px)}
.cs.open .cs-list{display:flex;animation:menuIn .15s cubic-bezier(.2,1.2,.4,1) both}
.cs-list button{padding:8px 10px;border-radius:8px;text-align:left;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-list button:hover{background:rgba(255,255,255,.08)}
.cs-list button.on{color:var(--acc2);background:color-mix(in srgb,var(--acc) 14%,transparent)}
html.light .cs-list{background:rgba(255,255,255,.92)}
html.light .cs-btn{background:rgba(20,20,60,.04)}
html.light .cs-list button:hover{background:rgba(20,20,60,.06)}
.leave-opt .cs{flex:0 1 170px}
.chat-to.pm .cs-btn{border-color:#c084fc;color:#e9d5ff}
html.light .chat-to.pm .cs-btn{color:#7e22ce}


.vol-row{display:flex;align-items:center;gap:10px;padding:8px 10px 10px;margin-top:2px;border-top:1px solid var(--gline)}
.vol-row .vi{font-size:15px;width:18px;text-align:center}
.vol-row b{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums;width:36px;text-align:right}
.vol-row input{flex:1;appearance:none;-webkit-appearance:none;height:6px;border-radius:3px;outline:0;cursor:pointer;
  background:linear-gradient(90deg,var(--acc) var(--p,100%),rgba(255,255,255,.14) var(--p,100%))}
.vol-row input::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--acc),0 2px 6px rgba(0,0,0,.4);transition:transform .12s}
.vol-row input::-webkit-slider-thumb:hover{transform:scale(1.15)}
.vol-row input::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--acc)}
html.light .vol-row input{background:linear-gradient(90deg,var(--acc) var(--p,100%),rgba(20,20,60,.12) var(--p,100%))}
.pub-card{animation-fill-mode:backwards}


.avatar.img{background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;color:transparent}
.avatar.emo{font-size:1.1em}
.tile .ph .avatar.emo{font-size:clamp(22px,4vw,52px)}
.home-tr{display:flex;align-items:center;gap:8px}
.acct-btn{display:flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 6px;border-radius:999px;font-weight:700;font-size:13.5px;
  background:var(--glass);border:1px solid var(--gline);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);transition:border-color .15s,transform .15s}
.acct-btn:not(.in){padding:0 16px}
.acct-btn:hover{border-color:var(--acc2);transform:translateY(-1px)}
.acct-btn .avatar{width:28px;height:28px;font-size:12px}
.pre-acct{align-self:flex-start;margin-top:-4px;font-weight:600}
.acct-card{max-width:400px}
.ac-tabs{align-self:flex-start}
.ac-form{display:flex;flex-direction:column;gap:10px}
.ac-form .err{margin:0;min-height:16px}
#ac-prof{display:flex;flex-direction:column;gap:8px}
.ac-me{display:flex;align-items:center;gap:14px;padding:6px 0 4px}
.ac-me .avatar.big{width:72px;height:72px;font-size:30px}
.ac-me b{display:block;font-size:17px}
.ac-me em{font-style:normal;color:var(--dim);font-size:13px}
.ac-pick{display:flex;gap:8px;flex-wrap:wrap}
.ac-crop{display:none;flex-direction:column;align-items:center;gap:8px;padding:10px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--gline)}
.ac-crop.on{display:flex;animation:up .2s both}
.ac-crop canvas{width:200px;height:200px;border-radius:50%;cursor:grab;touch-action:none;box-shadow:0 0 0 3px var(--acc),0 10px 30px rgba(0,0,0,.4);background:#000}
.ac-crop canvas:active{cursor:grabbing}
.ac-crop input{width:200px;accent-color:var(--acc)}
.ac-crop em{font-style:normal;font-size:11.5px;color:var(--dim)}
.ac-emo{display:none;flex-direction:column;gap:10px;padding:10px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--gline)}
.ac-emo.on{display:flex;animation:up .2s both}
.ac-emos{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.ac-emos button{aspect-ratio:1;border-radius:10px;font-size:20px;transition:transform .12s,background .12s}
.ac-emos button:hover{background:rgba(255,255,255,.08);transform:scale(1.12)}
.ac-emos button.on{background:color-mix(in srgb,var(--acc) 25%,transparent);box-shadow:inset 0 0 0 2px var(--acc)}
html.light .ac-crop,html.light .ac-emo{background:rgba(20,20,60,.04)}
.op-bans-btn{margin:0 0 10px}
.ban-row{display:flex;align-items:center;justify-content:space-between;gap:10px}

.tile.speaker{border-color:#fbbf24;box-shadow:0 0 0 2px #fbbf24,0 0 34px rgba(251,191,36,.4)}
.tile.speaker.speaking{box-shadow:0 0 0 3px #fbbf24,0 0 46px rgba(251,191,36,.65)}
.tag.spk{background:linear-gradient(90deg,#f59e0b,#fbbf24);color:#1a1205;border-color:transparent}
.spk-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;font-size:12.5px;color:var(--dim)}
.spk-row:empty{display:none}
.spk-row b{color:var(--text)}
.acct-card{max-height:92vh;overflow:auto}


.home-tr .round.flat{position:relative}

.menu{max-height:min(560px,86vh);overflow:auto;padding:8px;min-width:260px;max-width:300px}
.pm-card{display:flex;flex-direction:column;gap:8px}
.pm-head{display:flex;align-items:center;gap:11px;padding:4px 4px 2px;border-radius:12px}
.pm-head.link-ish{cursor:pointer}
.pm-head.link-ish:hover{background:rgba(255,255,255,.05)}
.pm-head .avatar{width:46px;height:46px;font-size:18px}
.pm-who{min-width:0;flex:1}
.pm-who b{display:block;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-who em{font-style:normal;font-size:11.5px;color:var(--dim)}
.pm-badges .pbadge{font-size:10px;padding:0 6px}
.pm-quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:6px}
.menu .pm-q{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px 7px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--gline);text-align:center;width:auto}
.menu .pm-q:hover{background:color-mix(in srgb,var(--acc) 16%,transparent);border-color:color-mix(in srgb,var(--acc) 40%,transparent)}
.menu .pm-q.on{color:var(--acc2);border-color:color-mix(in srgb,var(--acc) 45%,transparent)}
.pm-q span{font-size:18px;line-height:1}
.pm-q em{font-style:normal;font-size:11px;font-weight:600}
.pm-card .vol-row{border-top:0;margin:0;padding:6px 6px 4px;border-radius:10px;background:rgba(255,255,255,.035)}
.pm-sec{border-radius:12px;border:1px solid var(--gline);overflow:hidden}
.pm-sec summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:9px 11px;font-size:12.5px;font-weight:700;color:var(--dim)}
.pm-sec summary::-webkit-details-marker{display:none}
.pm-sec summary::after{content:"▾";transition:transform .2s;margin-left:8px}
.pm-sec[open] summary::after{transform:rotate(180deg)}
.pm-sec summary i{font-style:normal;font-size:10.5px;margin-left:auto;padding:1px 7px;border-radius:9px;background:rgba(255,255,255,.08)}
.pm-sec summary:hover{color:var(--text);background:rgba(255,255,255,.04)}
.pm-items{padding:2px 4px 6px;animation:up .18s both}
html.light .pm-q,html.light .pm-card .vol-row{background:rgba(20,20,60,.04)}

.drawer{position:fixed;top:12px;right:12px;bottom:12px;width:min(370px,calc(100vw - 24px));z-index:85;display:none;flex-direction:column;border-radius:22px;
  background:var(--glass);border:1px solid var(--gline2);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:0 24px 60px rgba(0,0,0,.5)}
html.light .drawer{background:rgba(255,255,255,.85)}
.drawer.on{display:flex;animation:slide .25s cubic-bezier(.2,.9,.3,1) both}
.dr-h{display:flex;align-items:center;justify-content:space-between;padding:14px 12px 6px 18px}
.dr-h h3{font-size:18px}
.dr-b{display:none;flex-direction:column;flex:1;min-height:0;overflow:auto;padding:4px 14px 14px}
.dr-b.on{display:flex}
.fr-add{display:flex;gap:8px}
.fr-add .field{flex:1;margin:0;height:38px}
.fr-add .btn{height:38px}
#fr-err{margin:6px 2px 0;min-height:0}
.fr-row{display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;cursor:pointer;transition:background .15s}
.fr-row:hover{background:rgba(255,255,255,.06)}
.fr-row .avatar{width:38px;height:38px;font-size:15px}
.fr-av{position:relative;flex:none}
.fr-av::after{content:"";position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;background:#64748b;border:2px solid #15152a}
.fr-av.on::after{background:var(--ok)}
.fr-av.incall::after{background:#f59e0b}
.fr-t{flex:1;min-width:0}
.fr-t b{display:flex;align-items:center;gap:6px;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr-t em{display:block;font-style:normal;font-size:12px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr-dot{width:8px;height:8px;border-radius:50%;background:var(--acc2);display:inline-block}
.fr-row .btn.small{height:28px;padding:0 10px}
.fr-row .round.small{width:32px;height:32px;font-size:14px}

.dm-top{display:flex;align-items:center;gap:10px;padding:2px 0 10px;border-bottom:1px solid var(--gline)}
.dm-who{flex:1;display:flex;align-items:center;gap:9px;min-width:0}
.dm-who .avatar{width:34px;height:34px;font-size:14px}
.dm-who b{display:block;font-size:14px}
.dm-who em{font-style:normal;font-size:11.5px;color:var(--dim)}
.dm-list{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:6px;padding:12px 2px}
.dm-m{align-self:flex-start;max-width:82%;padding:7px 11px 5px;border-radius:16px 16px 16px 5px;background:rgba(255,255,255,.07);animation:up .2s both}
.dm-m.me{align-self:flex-end;border-radius:16px 16px 5px 16px;background:color-mix(in srgb,var(--acc) 30%,transparent)}
.dm-m p{font-size:14px;white-space:pre-wrap;word-wrap:break-word}
.dm-m span{display:block;font-size:10px;color:var(--mute);text-align:right;margin-top:2px}
.dm-img{display:block;max-width:220px;max-height:240px;border-radius:12px;margin:2px 0 4px;cursor:zoom-in}
html.light .dm-m{background:rgba(20,20,60,.06)}

.prof-card{align-items:center;text-align:center;position:relative;max-width:340px;padding-top:28px}
.pf-x{position:absolute;right:10px;top:10px}
.prof-card .avatar.big{width:96px;height:96px;font-size:40px;box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 50%,transparent),0 14px 40px rgba(0,0,0,.4)}
.prof-card h3{margin-top:6px;font-size:22px}
.prof-card > em{font-style:normal;color:var(--dim);margin-top:-6px}
.pf-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.pf-status{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--dim)}
.pf-status:empty{display:none}
.pf-dot{width:9px;height:9px;border-radius:50%;background:#64748b}
.pf-dot.on{background:var(--ok)}
.pf-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:6px;width:100%}
.pf-acts .btn{flex:1 1 130px}
.pf-acts .pf-rm{flex:0 0 100%;color:var(--dim)}

.ring{position:fixed;left:50%;top:20px;transform:translateX(-50%);z-index:96;display:none;flex-direction:column;align-items:center;gap:6px;padding:22px 28px 18px;border-radius:26px;min-width:260px;
  background:var(--glass);border:1px solid var(--gline2);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:0 24px 60px rgba(0,0,0,.55)}
.ring.on{display:flex;animation:menuIn .3s cubic-bezier(.2,1.3,.4,1) both}
.ring-av{position:relative;padding:6px}
.ring-av::before,.ring-av::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--ok);animation:ring 1.6s ease-out infinite}
.ring-av::after{animation-delay:.8s}
.ring .avatar.big{width:76px;height:76px;font-size:30px}
.ring b{font-size:16px}
.ring > em{font-style:normal;font-size:12px;color:var(--dim)}
.ring-btns{display:flex;gap:28px;margin-top:8px}
.ring-btns .round{width:56px;height:56px;font-size:20px}
.round.ok{background:#10b981;border-color:#10b981;color:#fff;box-shadow:0 6px 18px rgba(16,185,129,.4);animation:wiggle 1s ease-in-out infinite}
@keyframes wiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-12deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-6deg)}}

.chat-in .round.flat{width:32px;height:32px;font-size:15px;flex:none;background:transparent;border:0}
.chat-in{padding-left:6px}
#tab-chat.drop{outline:2px dashed var(--acc2);outline-offset:-6px;border-radius:14px}
.fcard{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:4px;padding:8px;border-radius:12px;background:rgba(0,0,0,.18);border:1px solid var(--gline)}
.fc-thumb{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:20px;background:rgba(255,255,255,.07);cursor:pointer;flex:none}
.fc-t{flex:1;min-width:0}
.fc-t b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fc-t em{font-style:normal;font-size:11px;color:var(--dim)}
.fc-bar{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.1);margin-top:4px;overflow:hidden}
.fc-bar span{display:block;height:100%;width:0;background:var(--acc);transition:width .2s}
.fc-btn{flex:none}
.fc-img{flex:0 0 100%;max-width:100%;max-height:220px;object-fit:cover;border-radius:9px;cursor:zoom-in}
.fcard.has-img .fc-thumb{display:none}
html.light .fcard{background:rgba(20,20,60,.04)}

#viewer{padding:2vh 2vw}
.vw-card{width:100%;height:100%;max-width:1200px;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;
  background:rgba(12,12,22,.86);border:1px solid var(--gline2);box-shadow:0 30px 80px rgba(0,0,0,.6);animation:pop .25s cubic-bezier(.2,1.2,.4,1) both}
.vw-h{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 16px;border-bottom:1px solid var(--gline)}
.vw-h b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vw-zoom{display:flex;align-items:center;gap:4px}
.vw-zoom em{font-style:normal;font-size:12px;color:var(--dim);min-width:56px;text-align:center}
.vw-body{flex:1;min-height:0;overflow:auto;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;padding:12px}
.vw-body.img{overflow:hidden;cursor:grab;touch-action:none}
.vw-body.img img{max-width:100%;max-height:100%;transition:transform .08s;user-select:none}
.vw-body.pdf{justify-content:flex-start;background:#2a2a35}
.vw-body.pdf canvas{background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.4);max-width:100%}
.vw-body.media video{max-width:100%;max-height:100%;border-radius:10px}
.vw-body.media audio{width:min(480px,90%)}
.vw-body.code{align-items:stretch;justify-content:flex-start;padding:0}
.vw-body.code pre{margin:0;padding:14px 0;font:13px/1.55 ui-monospace,Consolas,monospace;counter-reset:ln;min-height:100%;white-space:pre}
.vw-body.code .ln{counter-increment:ln;display:inline-block;width:100%;padding-right:16px}
.vw-body.code .ln::before{content:counter(ln);display:inline-block;width:46px;padding-right:14px;text-align:right;color:#6b7280;user-select:none}
.vw-big{font-size:84px}
html.light .vw-card{background:rgba(255,255,255,.92)}

.poll{padding:12px;border-radius:14px;background:linear-gradient(160deg,color-mix(in srgb,var(--acc) 16%,transparent),rgba(255,255,255,.03));border:1px solid color-mix(in srgb,var(--acc) 35%,transparent);animation:up .25s both}
.poll-h{display:flex;justify-content:space-between;font-size:11.5px;color:var(--dim);font-weight:700}
.poll-q{display:block;font-size:15px;margin:6px 0 8px}
.poll-o{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;margin-top:6px;padding:9px 11px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid var(--gline);overflow:hidden;text-align:left;transition:border-color .15s}
.poll-o:hover:not(:disabled){border-color:var(--acc2)}
.poll-o i{position:absolute;left:0;top:0;bottom:0;background:color-mix(in srgb,var(--acc) 30%,transparent);transition:width .45s cubic-bezier(.2,.9,.3,1);z-index:0}
.poll-o span,.poll-o em{position:relative;z-index:1;font-size:13.5px}
.poll-o em{font-style:normal;font-size:12px;color:var(--dim);white-space:nowrap}
.poll-o.mine{border-color:var(--acc2)}
.poll-o.mine span::after{content:" ✓";color:var(--acc2)}
.poll-f{font-size:11px;color:var(--mute);margin-top:8px}
.pl-opts{display:flex;flex-direction:column;gap:6px}
.pl-opts .field.small{margin:0}

.bg-pop{width:300px}
.bg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.bg-grid button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 4px 8px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--gline);transition:border-color .15s,transform .15s}
.bg-grid button:hover{transform:translateY(-2px);border-color:var(--acc2)}
.bg-grid button.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 18%,transparent)}
.bg-grid span{font-size:22px}
.bg-grid em{font-style:normal;font-size:11px;font-weight:600}
#pre-bg.on,#c-bg.on{background:var(--acc);border-color:var(--acc);color:#fff}
@media (max-width:760px){#c-bg{display:none}.drawer{top:auto;left:0;right:0;bottom:0;width:auto;height:86vh;border-radius:24px 24px 0 0}}


.drawer{display:none!important}
.fr-wrap{position:fixed;inset:0;z-index:85;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(4,4,12,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.fr-wrap.on{display:flex;animation:fade .18s both}
.fr-card{position:relative;width:min(440px,100%);height:min(660px,100%);display:flex;flex-direction:column;overflow:hidden;border-radius:24px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 12%,rgba(20,20,36,.92)),rgba(16,16,30,.94) 40%);border:1px solid var(--gline2);box-shadow:0 30px 80px rgba(0,0,0,.6);animation:pop .28s cubic-bezier(.2,1.2,.4,1) both}
html.light .fr-card{background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 10%,#fff),#fff 40%)}
.fr-card .dr-b{padding:0;overflow:hidden}
#fr-home{padding:16px 16px 0}
.fr-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.fr-me{display:flex;align-items:center;gap:11px;min-width:0}
.fr-me .avatar{width:44px;height:44px;font-size:18px;box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 40%,transparent)}
.fr-me b{display:block;font-size:16px}
.fr-me em{font-style:normal;font-size:12px;color:var(--dim)}
.fr-add{display:flex;align-items:center;gap:8px;height:46px;padding:0 5px 0 13px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid var(--gline);transition:border-color .15s}
.fr-add:focus-within{border-color:var(--acc2)}
.fr-add>svg{width:17px;height:17px;color:var(--dim);flex:none}
.fr-add input{flex:1;min-width:0;height:100%;background:none;border:0;outline:0;color:var(--text);font-size:14px}
.fr-add .btn{height:36px;flex:none}
html.light .fr-add{background:rgba(20,20,60,.04)}
#fr-err{margin:6px 4px 0;min-height:0;font-size:12.5px}
.fr-tabs{display:flex;margin:14px 0 6px;width:100%}
.fr-tabs .tab{flex:1;justify-content:center}
.fr-tabs .count:empty{display:none}
.fr-tabs .count{font-style:normal;background:var(--acc);color:#fff}
.fr-pane{display:none;flex:1;min-height:0;overflow:auto;margin:0 -16px;padding:4px 10px 16px}
.fr-pane.on{display:block}
#fr-home{display:none;flex-direction:column;height:100%}
#fr-home.on{display:flex}
.fr-sub{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);padding:6px 8px}
.fr-sub:empty{display:none}
.fr-row{display:flex;align-items:center;gap:12px;padding:9px 8px;border-radius:14px;cursor:pointer;transition:background .15s}
.fr-row:hover{background:rgba(255,255,255,.06)}
html.light .fr-row:hover{background:rgba(20,20,60,.05)}
.fr-row>.avatar,.fr-av .avatar{width:42px;height:42px;font-size:16px}
.fr-av{position:relative;flex:none}
.fr-av::after{content:"";position:absolute;right:-1px;bottom:-1px;width:13px;height:13px;border-radius:50%;background:#5b5b70;border:2.5px solid #17172a}
html.light .fr-av::after{border-color:#fff}
.fr-av.on::after{background:var(--ok)}
.fr-av.incall::after{background:#f59e0b}
.fr-t{flex:1;min-width:0}
.fr-t b{display:flex;align-items:center;gap:6px;font-size:14.5px;font-weight:700;overflow:hidden;white-space:nowrap}
.fr-t em{display:block;font-style:normal;font-size:12.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.fr-t em.online{color:var(--ok)}
.fr-t em.incall{color:#fbbf24}
.fr-time{margin-left:auto;font-size:11px;font-weight:500;color:var(--mute)}
.fr-row.chat.unread .fr-t b,.fr-row.chat.unread .fr-t em{color:var(--text)}
.fr-acts{display:flex;gap:6px;flex:none}
.fr-ic{position:relative;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--text);background:rgba(255,255,255,.07);border:1px solid var(--gline);transition:background .15s,transform .15s,color .15s}
.fr-ic svg{width:17px;height:17px}
.fr-ic:hover{background:color-mix(in srgb,var(--acc) 30%,transparent);color:#fff;transform:translateY(-1px)}
.fr-ic.join{background:color-mix(in srgb,#f59e0b 22%,transparent);border-color:rgba(245,158,11,.45);color:#fbbf24}
.fr-ic.ok{background:var(--acc);border-color:var(--acc);color:#fff}
html.light .fr-ic{background:rgba(20,20,60,.05)}
.fr-dot{width:9px;height:9px;border-radius:50%;background:var(--acc2);display:inline-block;flex:none}
.fr-ic .fr-dot{position:absolute;top:-1px;right:-1px;border:2px solid #17172a}
.fr-dot.big{width:10px;height:10px}
.fr-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:42px 24px;color:var(--dim)}
.fr-empty span{font-size:40px;margin-bottom:6px}
.fr-empty b{color:var(--text);font-size:15px}
.fr-empty p{font-size:13px;max-width:260px}
.fr-pane .sec-h{margin:10px 8px 4px}

#fr-dm{display:none;flex-direction:column;height:100%}
#fr-dm.on{display:flex}
.dm-top{display:flex;align-items:center;gap:8px;padding:12px 12px 10px 8px;border-bottom:1px solid var(--gline)}
.dm-who{flex:1;display:flex;align-items:center;gap:10px;min-width:0;cursor:pointer;padding:4px;border-radius:12px}
.dm-who:hover{background:rgba(255,255,255,.05)}
.dm-who .fr-av .avatar{width:38px;height:38px;font-size:15px}
.dm-who b{display:block;font-size:15px}
.dm-who em{display:block;font-style:normal;font-size:12px;color:var(--dim)}
.dm-who em.online{color:var(--ok)}.dm-who em.incall{color:#fbbf24}
.dm-list{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:2px;padding:12px 14px}
.dm-day{align-self:center;font-size:11px;font-weight:700;color:var(--mute);padding:3px 10px;margin:10px 0 6px;border-radius:999px;background:rgba(255,255,255,.05)}
.dm-m{align-self:flex-start;max-width:78%;padding:8px 12px 5px;margin-top:6px;border-radius:18px 18px 18px 6px;background:rgba(255,255,255,.08);animation:up .2s both}
.dm-m.grp{margin-top:2px;border-top-left-radius:6px}
.dm-m.me{align-self:flex-end;border-radius:18px 18px 6px 18px;background:linear-gradient(135deg,var(--acc),color-mix(in srgb,var(--acc) 65%,#a855f7));color:#fff}
.dm-m.me.grp{border-top-right-radius:6px}
.dm-m p{font-size:14.5px;line-height:1.4;white-space:pre-wrap;word-wrap:break-word}
.dm-m span{display:block;font-size:10px;opacity:.6;text-align:right;margin-top:2px}
.dm-img{display:block;max-width:240px;max-height:260px;border-radius:12px;margin:2px -4px 4px;cursor:zoom-in}
html.light .dm-m:not(.me){background:rgba(20,20,60,.06)}
.dm-in{display:flex;align-items:center;gap:8px;padding:10px 12px 14px;border-top:1px solid var(--gline)}
.dm-in input{flex:1;min-width:0;height:44px;padding:0 16px;border-radius:22px;background:rgba(255,255,255,.07);border:1px solid var(--gline);outline:0;color:var(--text);font-size:14.5px}
.dm-in input:focus{border-color:var(--acc2)}
html.light .dm-in input{background:rgba(20,20,60,.05)}
.dm-send{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--acc);color:#fff;box-shadow:0 6px 18px color-mix(in srgb,var(--acc) 45%,transparent);transition:transform .15s}
.dm-send:hover{transform:scale(1.06)}
.dm-send svg{width:18px;height:18px}
@media (max-width:600px){.fr-wrap{padding:0;align-items:flex-end}.fr-card{width:100%;height:92vh;border-radius:24px 24px 0 0}}

#c-game{font-size:18px}
.game{position:fixed;left:50%;top:16px;transform:translateX(-50%);z-index:58;width:min(380px,calc(100vw - 24px));display:none;flex-direction:column;border-radius:22px;overflow:hidden;
  background:var(--glass);border:1px solid var(--gline2);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:0 24px 60px rgba(0,0,0,.5)}
html.light .game{background:rgba(255,255,255,.88)}
.game.on{display:flex;animation:menuIn .3s cubic-bezier(.2,1.3,.4,1) both}
.gm-h{display:flex;align-items:center;justify-content:space-between;padding:10px 8px 4px 16px;font-weight:800;font-size:14px}
.gm-b{padding:6px 16px 10px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.gm-f{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px 12px 16px;border-top:1px solid var(--gline);font-size:11.5px;color:var(--dim)}
.gm-who{display:flex;flex-direction:column;align-items:center;gap:6px}
.gm-who .avatar{width:56px;height:56px;font-size:22px;box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 50%,transparent);animation:pop .4s both}
.gm-who b{font-size:16px}
.gm-row{display:flex;align-items:stretch;justify-content:center;gap:10px;width:100%}
.gm-big{flex:1;padding:14px 10px;border-radius:16px;font-size:16px;font-weight:800;background:linear-gradient(135deg,#06b6d4,#6366f1);color:#fff;box-shadow:0 8px 22px rgba(99,102,241,.35);transition:transform .15s}
.gm-big.dare{background:linear-gradient(135deg,#f43f5e,#f59e0b);box-shadow:0 8px 22px rgba(244,63,94,.35)}
.gm-big.ghost{background:rgba(255,255,255,.08);color:var(--text);box-shadow:none;border:1px solid var(--gline)}
.gm-big.on{outline:3px solid #fff;outline-offset:-3px}
.gm-big:hover{transform:translateY(-2px) scale(1.02)}
.gm-card{width:100%;padding:16px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid var(--gline);animation:flipIn .45s cubic-bezier(.2,1.2,.4,1) both}
@keyframes flipIn{from{opacity:0;transform:perspective(600px) rotateX(-70deg)}to{opacity:1;transform:none}}
.gm-card em{display:block;font-style:normal;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.gm-card.truth{background:linear-gradient(135deg,rgba(6,182,212,.18),rgba(99,102,241,.14));border-color:rgba(99,102,241,.4)}
.gm-card.dare{background:linear-gradient(135deg,rgba(244,63,94,.18),rgba(245,158,11,.14));border-color:rgba(244,63,94,.4)}
.gm-card.hot{background:linear-gradient(135deg,rgba(244,63,94,.16),rgba(249,115,22,.12))}
.gm-card p{font-size:16.5px;font-weight:700;line-height:1.35}
.gm-q{font-size:13px;font-weight:700;color:var(--dim)}
.gm-wait{font-size:12.5px;color:var(--dim)}
.gm-or{align-self:center;font-size:12px;color:var(--mute)}
.gm-opt{position:relative;flex:1;min-height:96px;padding:12px 10px;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:rgba(255,255,255,.06);border:1px solid var(--gline);transition:border-color .15s,transform .15s}
.gm-opt:hover{border-color:var(--acc2);transform:translateY(-2px)}
.gm-opt.mine{border-color:var(--acc2);box-shadow:inset 0 0 0 1px var(--acc2)}
.gm-opt i{position:absolute;left:0;right:0;bottom:0;background:color-mix(in srgb,var(--acc) 32%,transparent);transition:height .5s cubic-bezier(.2,.9,.3,1)}
.gm-opt span{position:relative;font-size:14.5px;font-weight:700}
.gm-opt em{position:relative;font-style:normal;font-size:11.5px;color:var(--dim)}
.gm-result{font-size:22px;font-weight:800;opacity:0;animation:up .4s both}
.gm-wheel-wrap{position:relative;width:180px;height:180px;margin:4px 0}
.gm-pointer{position:absolute;left:50%;top:-6px;transform:translateX(-50%);z-index:2;border-left:10px solid transparent;border-right:10px solid transparent;border-top:18px solid #fff;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.gm-wheel{width:100%;height:100%;border-radius:50%;position:relative;border:4px solid rgba(255,255,255,.85);box-shadow:0 10px 30px rgba(0,0,0,.4);animation:wheel 3s cubic-bezier(.15,.8,.2,1) forwards}
.gm-wheel.done{animation-duration:0s}
@keyframes wheel{from{transform:rotate(0)}to{transform:rotate(var(--rot))}}
.gm-wheel span{position:absolute;left:50%;top:50%;width:70px;margin-left:-35px;margin-top:-8px;font-size:10.5px;font-weight:800;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gm-coin{position:relative;width:96px;height:96px;transform-style:preserve-3d;animation:coin 1.3s cubic-bezier(.2,.8,.3,1) forwards}
.gm-coin.tails{--end:1980deg}.gm-coin.heads{--end:1800deg}
.gm-coin.done{animation-duration:0s}
@keyframes coin{0%{transform:translateY(0) rotateY(0)}40%{transform:translateY(-60px) rotateY(calc(var(--end) * .5))}100%{transform:translateY(0) rotateY(var(--end))}}
.gm-coin b{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;font-size:36px;font-weight:900;color:#5b3a00;backface-visibility:hidden;
  background:radial-gradient(circle at 35% 30%,#fff2b3,#fbbf24 45%,#b45309);box-shadow:inset 0 0 0 5px rgba(180,83,9,.6)}
.gm-coin b:last-child{transform:rotateY(180deg)}
.gm-die{width:62px;height:62px;border-radius:14px;background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.35),inset 0 -4px 0 rgba(0,0,0,.12);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:9px;animation:roll .9s cubic-bezier(.2,.9,.3,1) both}
.gm-die.done{animation-duration:0s}
@keyframes roll{0%{transform:translateY(-40px) rotate(-200deg) scale(.6);opacity:0}60%{transform:translateY(6px) rotate(20deg)}100%{transform:none;opacity:1}}
.gm-die i{width:11px;height:11px;border-radius:50%;background:#1e1b4b;align-self:center;justify-self:center}
.gm-die.d1 i{grid-area:2/2}
.gm-die.d2 i:nth-child(1){grid-area:1/1}.gm-die.d2 i:nth-child(2){grid-area:3/3}
.gm-die.d3 i:nth-child(1){grid-area:1/1}.gm-die.d3 i:nth-child(2){grid-area:2/2}.gm-die.d3 i:nth-child(3){grid-area:3/3}
.gm-die.d4 i:nth-child(1){grid-area:1/1}.gm-die.d4 i:nth-child(2){grid-area:1/3}.gm-die.d4 i:nth-child(3){grid-area:3/1}.gm-die.d4 i:nth-child(4){grid-area:3/3}
.gm-die.d5 i:nth-child(1){grid-area:1/1}.gm-die.d5 i:nth-child(2){grid-area:1/3}.gm-die.d5 i:nth-child(3){grid-area:2/2}.gm-die.d5 i:nth-child(4){grid-area:3/1}.gm-die.d5 i:nth-child(5){grid-area:3/3}
.gm-die.d6 i:nth-child(1){grid-area:1/1}.gm-die.d6 i:nth-child(2){grid-area:2/1}.gm-die.d6 i:nth-child(3){grid-area:3/1}.gm-die.d6 i:nth-child(4){grid-area:1/3}.gm-die.d6 i:nth-child(5){grid-area:2/3}.gm-die.d6 i:nth-child(6){grid-area:3/3}
#game-pop .bg-grid{grid-template-columns:repeat(2,1fr)}
.game{left:0;right:0;margin:0 auto;transform:none}


img.emj{display:inline-block;width:1.2em;height:1.2em;vertical-align:-.22em;margin:0 .03em;object-fit:contain;pointer-events:none;user-select:none}
.react-pop button img.emj,.float .fe img.emj{width:1em;height:1em;vertical-align:middle}

:root{--fglass:rgba(16,16,28,.62);--fblur:blur(28px) saturate(180%);--fshadow:0 24px 60px -12px rgba(0,0,0,.75),0 2px 10px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.07)}
html.light{--fglass:rgba(255,255,255,.66);--fshadow:0 24px 60px -12px rgba(20,20,60,.25),0 2px 10px rgba(20,20,60,.12),inset 0 1px 0 rgba(255,255,255,.9)}

.ctop{position:absolute;top:12px;left:12px;z-index:30;display:flex;align-items:center;gap:10px;max-width:calc(100% - 24px);padding:6px 6px 6px 14px;border-radius:999px;
  background:var(--fglass);backdrop-filter:var(--fblur);-webkit-backdrop-filter:var(--fblur);border:1px solid rgba(255,255,255,.09);box-shadow:var(--fshadow);font-size:13px;user-select:none}
.ct-live{width:8px;height:8px;border-radius:50%;background:var(--bad);box-shadow:0 0 0 0 rgba(244,63,94,.6);animation:live 1.8s ease-out infinite;flex:none}
#ct-title{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-sep{width:1px;height:14px;background:rgba(255,255,255,.14)}
.ct-dur{font-variant-numeric:tabular-nums;color:var(--dim)}
.ct-n{color:var(--dim);white-space:nowrap}
.ct-btn{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--text);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.07);transition:background .15s,transform .15s}
.ct-btn:hover{background:rgba(255,255,255,.14);transform:scale(1.06)}
.ct-btn svg{width:16px;height:16px}
.bar-l{display:none!important}
.stage{padding-top:64px!important}

.bar-c{background:var(--fglass)!important;backdrop-filter:var(--fblur)!important;-webkit-backdrop-filter:var(--fblur)!important;border:1px solid rgba(255,255,255,.09)!important;box-shadow:var(--fshadow)!important;padding:8px 12px!important;gap:9px!important}
.bar-r{background:var(--fglass);backdrop-filter:var(--fblur);-webkit-backdrop-filter:var(--fblur);border:1px solid rgba(255,255,255,.09);border-radius:999px;box-shadow:var(--fshadow);padding:6px;flex:0 0 auto!important;margin-left:auto}
.bar-r .round.flat{background:transparent;border-color:transparent;backdrop-filter:none}
.bar{justify-content:center}
.bar::before{content:"";flex:1}
.bar .bar-c{flex:none}
.bar .bar-r{flex:1 1 0!important;justify-content:flex-end;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0}
.bar .bar-r>*{background:var(--fglass)!important;backdrop-filter:var(--fblur);-webkit-backdrop-filter:var(--fblur);border:1px solid rgba(255,255,255,.09)!important;box-shadow:var(--fshadow)}
.bar-c .round{width:46px;height:46px}
#c-leave{background:linear-gradient(135deg,#ef4444,#dc2626)!important;border:none!important;box-shadow:0 4px 14px rgba(220,38,38,.5)!important}
#c-leave:hover{background:linear-gradient(135deg,#f87171,#ef4444)!important}

.more-pop{width:236px;padding:8px;gap:2px}
.more-pop .round.mrow{display:flex;align-items:center;justify-content:flex-start;gap:12px;width:100%;height:auto;padding:10px 12px;border-radius:12px;background:transparent;border:0;box-shadow:none;transform:none;font-size:13.5px;font-weight:600}
.more-pop .round.mrow:hover{background:rgba(255,255,255,.07);transform:none}
.more-pop .round.mrow.on{background:color-mix(in srgb,var(--acc) 22%,transparent);color:var(--acc2)}
.more-pop .round.mrow svg{width:18px;height:18px}
.more-pop .round.mrow[title]:hover::after{display:none}
.more-pop .mlabel{flex:1;text-align:left}
.more-pop #c-game,.more-pop #c-bg,.more-pop #c-theme{font-size:16px}
html.light .more-pop .round.mrow:hover{background:rgba(20,20,60,.06)}
.round .mlabel{display:none}
.more-pop .round .mlabel{display:block}

.tile{border-radius:22px!important;border:1px solid rgba(255,255,255,.08)!important;box-shadow:0 18px 44px -14px rgba(0,0,0,.7),0 2px 8px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.07)!important;
  background:linear-gradient(160deg,rgba(28,28,46,.9),rgba(12,12,22,.95))!important}
.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(255,255,255,.03)}
.tile:not(.big):hover{transform:translateY(-2px);transition:transform .2s,left .28s cubic-bezier(.2,.8,.2,1),top .28s cubic-bezier(.2,.8,.2,1),width .28s cubic-bezier(.2,.8,.2,1),height .28s cubic-bezier(.2,.8,.2,1)}
.tile.speaking{border-color:var(--acc2)!important;box-shadow:0 0 0 2px var(--acc2),0 0 34px color-mix(in srgb,var(--acc2) 45%,transparent),0 18px 44px -14px rgba(0,0,0,.7)!important}
.tile.speaker{border-color:#fbbf24!important;box-shadow:0 0 0 2px #fbbf24,0 0 34px rgba(251,191,36,.4),0 18px 44px -14px rgba(0,0,0,.7)!important}
.tile .nm{background:rgba(10,10,20,.45)!important;backdrop-filter:blur(16px) saturate(160%);border:1px solid rgba(255,255,255,.09)!important;border-radius:999px!important;padding:5px 12px!important}
html.light .tile{background:linear-gradient(160deg,#e9eaf5,#d9dbea)!important;border-color:rgba(20,20,60,.08)!important;box-shadow:0 18px 44px -14px rgba(20,20,60,.3),inset 0 1px 0 rgba(255,255,255,.8)!important}
.panel{background:var(--fglass)!important;backdrop-filter:var(--fblur)!important;-webkit-backdrop-filter:var(--fblur)!important;box-shadow:var(--fshadow)!important;border-color:rgba(255,255,255,.09)!important;border-radius:24px!important}

html.mini #scr-call{position:fixed;inset:auto;width:360px;height:252px;z-index:80;display:flex;border-radius:24px;overflow:hidden;
  background:var(--fglass);backdrop-filter:var(--fblur);-webkit-backdrop-filter:var(--fblur);border:1px solid rgba(255,255,255,.1);box-shadow:var(--fshadow);animation:pop .3s cubic-bezier(.2,1.2,.4,1) both}
html.mini .ctop{position:relative;top:0;left:0;margin:6px;max-width:none;cursor:move;padding:4px 4px 4px 12px;box-shadow:none;font-size:12px}
html.mini #ct-title{max-width:120px}
html.mini .ct-n,html.mini #ct-copy,html.mini .ct-sep{display:none}
html.mini .stage{padding:0 8px 62px!important;gap:6px}
html.mini .panel,html.mini .bar-r,html.mini .grid-wrap .sub-bar{display:none!important}
html.mini .bar{padding:6px;transform:none!important;opacity:1!important}
html.mini .bar::before{display:none}
html.mini .bar-c{padding:5px 8px!important;gap:6px!important;margin:0 auto}
html.mini .bar-c .round{width:38px;height:38px}
html.mini .bar-c .round:not(#c-mic):not(#c-cam):not(#c-leave){display:none}
html.mini .tile{border-radius:14px!important}
html.mini .tile .tags,html.mini .tile .more{display:none!important}
html.mini #ct-mini svg rect:last-child{x:4px;y:6px;width:16px;height:12px}
html.mini .game{top:auto;bottom:20px}
@media (max-width:760px){
  .ctop{top:8px;left:8px;font-size:12px}.ct-n,.ct-sep{display:none}#ct-title{max-width:120px}
  .stage{padding-top:56px!important}
  .bar::before{display:none}
  html.mini #scr-call{width:calc(100vw - 16px);left:8px!important}
}
.game{top:68px!important}
.gm-status{margin:0 16px 2px;padding:7px 12px;border-radius:12px;text-align:center;font-size:12.5px;font-weight:700;color:var(--dim);background:rgba(255,255,255,.05);border:1px dashed var(--gline2)}
.gm-status.ok{color:var(--ok);border-style:solid;border-color:rgba(52,211,153,.35);background:rgba(52,211,153,.08)}
@media (max-width:760px){.game{top:56px!important}}
.more-pop .round.mrow{display:flex!important}
.more-pop #c-game,.more-pop #c-bg,.more-pop #c-theme{font-size:13.5px}
html.mini .game,html.mini #game-pop,html.mini #more-pop{display:none!important}


.round .fa-solid{font-size:17px}
.round.small .fa-solid{font-size:14px}
.fr-empty span .fa-solid{font-size:34px;color:var(--acc2)}
.pm-q span .fa-solid{font-size:17px}
.bg-grid span .fa-solid{font-size:20px}
.vol-row .vi .fa-solid{font-size:14px;color:var(--dim)}
.gm-h .fa-solid{color:var(--acc2);margin-right:4px}
.fc-thumb .fa-solid{font-size:18px;color:var(--acc2)}
.vw-big .fa-solid{font-size:72px;color:var(--acc2)}
.tag .fa-solid,.afk-badge .fa-solid{font-size:.9em;margin-right:3px}
.pm-sec summary .fa-solid{margin-right:6px}
.crown .fa-solid{color:#fbbf24}
#ring-yes,#ring-no{font-size:20px}
.mlabel{display:none!important}
@media (max-width:760px){#c-ns,#c-afk,#c-music,#c-bg,#c-game{display:grid!important}}


.ecall{position:fixed;top:24px;right:24px;width:400px;height:480px;min-width:260px;min-height:220px;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);z-index:92;display:none;flex-direction:column;overflow:hidden;
  background:rgba(13,13,22,.68);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);border:1px solid rgba(255,255,255,.09);border-radius:24px;
  box-shadow:0 24px 60px -12px rgba(0,0,0,.75),0 2px 10px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);transition:width .3s ease,height .3s ease}
.ecall.on{display:flex;animation:pop .3s cubic-bezier(.2,1.2,.4,1) both}
.ecall.drag{transition:none}
.ecall.max{top:12px!important;left:12px!important;right:12px!important;bottom:12px;width:auto!important;height:auto!important;max-width:none;max-height:none}
html.light .ecall{background:rgba(255,255,255,.75)}
.ec-head{display:flex;align-items:center;gap:8px;height:40px;padding:0 8px 0 14px;flex:none;cursor:move;user-select:none;border-bottom:1px solid rgba(255,255,255,.06)}
.ec-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}
.ec-head b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ec-time{font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums;margin-right:auto}
.ec-hb{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--dim);font-size:12px}
.ec-hb:hover{background:rgba(255,255,255,.08);color:var(--text)}
.ec-body{position:relative;flex:1;min-height:0;background:#06060c}
html.light .ec-body{background:#dfe1ef}
.ec-stage{position:absolute;inset:0}
.ec-tile{position:absolute;inset:0;overflow:hidden;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--acc) 22%,#0e0e1a),#08080f 75%)}
.ec-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ec-tile.self video{transform:scaleX(-1)}
.ec-ph{position:absolute;inset:0;display:none;align-items:center;justify-content:center}
.ec-tile.nocam .ec-ph{display:flex}
.ec-tile.nocam video{visibility:hidden}
.ec-ph .avatar{width:clamp(56px,26%,120px);height:auto;aspect-ratio:1;font-size:clamp(20px,4vw,44px);box-shadow:0 0 0 6px color-mix(in srgb,var(--acc) 25%,transparent),0 0 40px color-mix(in srgb,var(--acc) 40%,transparent)}
.ec-nm{position:absolute;left:10px;bottom:10px;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:700;background:rgba(10,10,20,.5);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.09);color:#fff}
.ec-nm .fa-solid{color:#fb7185;font-size:11px}
.ec-tile.connecting::after{content:"Connecting…";position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.55);font-weight:700;font-size:13px;color:#fff}

.ec-stage.one .ec-tile.self{inset:auto;top:12px;right:12px;width:92px;height:122px;border-radius:16px;border:1.5px solid rgba(255,255,255,.16);box-shadow:0 8px 24px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.1);z-index:3}
.ec-stage.one .ec-tile.self .ec-nm{display:none}
.ec-stage.one .ec-tile.self .ec-ph .avatar{width:44px;font-size:17px;box-shadow:none}

.ec-stage.grid{display:grid;gap:6px;padding:6px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));grid-auto-rows:1fr}
.ec-stage.grid .ec-tile{position:relative;inset:auto;border-radius:14px}

.ec-ring{position:absolute;inset:0;z-index:5;display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--acc) 30%,#0b0b16),#07070d 75%)}
.ec-ring.on{display:flex}
.ec-ring-av{position:relative;padding:8px}
.ec-ring-av::before,.ec-ring-av::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--acc2);animation:ring 1.8s ease-out infinite}
.ec-ring-av::after{animation-delay:.9s}
.ec-ring-av .avatar{width:84px;height:84px;font-size:34px}
.ec-ring b{font-size:16px}
.ec-ring em{font-style:normal;font-size:12px;color:var(--dim)}
.gav,.ec-gav{display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,color-mix(in srgb,var(--c) 70%,#fff),var(--c))!important}
.gav .fa-solid{font-size:.9em}

.ec-ctrls{flex:none;margin:8px 10px 10px;padding:7px 12px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;
  background:rgba(255,255,255,.05);backdrop-filter:blur(22px) saturate(180%);border:1px solid rgba(255,255,255,.09);box-shadow:0 10px 28px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.07)}
.ec-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:16px;color:#f2f2f7;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.07);transition:all .15s}
.ec-btn:hover{transform:scale(1.08)}
.ec-btn.off{background:rgba(239,68,68,.25);border-color:rgba(239,68,68,.4);color:#fca5a5}
.ec-btn.on{background:rgba(99,102,241,.28);border-color:rgba(99,102,241,.5);color:#c7d2fe}
.ec-btn.hang{background:linear-gradient(135deg,#ef4444,#dc2626);border:none;box-shadow:0 4px 14px rgba(220,38,38,.5);color:#fff}
html.light .ec-btn{color:#16162a;background:rgba(20,20,60,.06)}
html.light .ec-btn.hang{color:#fff}
.ec-resize{position:absolute;right:0;bottom:0;width:22px;height:22px;cursor:se-resize;z-index:6}
.ec-resize::after{content:"";position:absolute;right:7px;bottom:7px;width:9px;height:9px;border-right:2px solid #666688;border-bottom:2px solid #666688}
.ecall.max .ec-resize{display:none}
@media (max-width:600px){.ecall{top:8px!important;left:8px!important;right:8px!important;width:auto!important;height:62vh!important}}

.oncall-card{display:none;position:absolute;inset:0;z-index:4;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;
  background:radial-gradient(circle at 50% 40%,rgba(16,185,129,.28),rgba(8,8,15,.94) 70%);color:#fff}
.tile.oncall .oncall-card{display:flex}
.oncall-card .fa-solid{font-size:clamp(20px,4vw,40px);color:#34d399;animation:afkBob 2s ease-in-out infinite;margin-bottom:4px}
.oncall-card b{font-size:clamp(12px,1.6vw,17px)}
.oncall-card em{font-style:normal;font-size:12px;color:rgba(255,255,255,.6)}
.tile.small .oncall-card em{display:none}
.tag.deaf{color:#fca5a5}
#c-deaf.off{background:var(--bad);border-color:var(--bad);color:#fff}

.fr-notif{display:flex;align-items:center;gap:10px;margin:-4px 0 12px;padding:9px 8px 9px 12px;border-radius:14px;font-size:12.5px;
  background:color-mix(in srgb,var(--acc) 16%,transparent);border:1px solid color-mix(in srgb,var(--acc) 35%,transparent)}
.fr-notif>.fa-solid{color:var(--acc2)}
.fr-notif span{flex:1}
.fr-notif .icon-x{width:28px;height:28px}
.fr-newg{display:flex;align-items:center;justify-content:center;gap:8px;width:calc(100% - 12px);margin:4px 6px 8px;padding:10px;border-radius:14px;font-weight:700;font-size:13.5px;
  border:1px dashed var(--gline2);color:var(--acc2);transition:background .15s,border-color .15s}
.fr-newg:hover{background:color-mix(in srgb,var(--acc) 12%,transparent);border-color:var(--acc2)}
.fr-row>.gav{width:42px;height:42px;font-size:17px;flex:none}
.dm-who .gav{width:38px;height:38px;font-size:15px}
.dm-from{display:block;font-size:11px;color:var(--acc2);margin-bottom:2px}
.ng-icons{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.ng-icons button{aspect-ratio:1;border-radius:12px;font-size:16px;background:rgba(255,255,255,.06);border:1px solid var(--gline);color:var(--text);transition:all .15s}
.ng-icons button.on{background:var(--c);border-color:var(--c);color:#fff}
.ng-people{display:flex;flex-direction:column;gap:2px;max-height:220px;overflow:auto}
.ng-p{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:12px;cursor:pointer}
.ng-p:hover{background:rgba(255,255,255,.05)}
.ng-p .avatar{width:32px;height:32px;font-size:13px}
.ng-p span{flex:1;font-size:14px}
.ng-p input{display:none}
.ng-p i{width:20px;height:20px;border-radius:6px;border:2px solid var(--gline2);display:grid;place-items:center;transition:all .15s}
.ng-p input:checked + i{background:var(--acc);border-color:var(--acc)}
.ng-p input:checked + i::after{content:"✓";color:#fff;font-size:12px;font-style:normal;font-weight:800}
.gi-list{display:flex;flex-direction:column;gap:2px;max-height:200px;overflow:auto;padding:2px}
.gi-m{display:flex;align-items:center;gap:9px;padding:5px 6px;font-size:13px}
.gi-m .avatar{width:28px;height:28px;font-size:12px}
.tile.oncall .ph,.tile.oncall video,.tile.oncall .afk-badge{visibility:hidden}.oncall-card{z-index:6}
.oncall-card .fa-solid{animation:none!important}
@media (max-width:760px){.bar{justify-content:flex-start!important}.bar .bar-c{flex:1 1 auto!important;min-width:0;justify-content:flex-start}.bar .bar-r{flex:0 0 auto!important}}
.bar::before{flex:1 1 0;min-width:0}.bar .bar-c{flex:0 1 auto!important;min-width:0;overflow-x:auto;scrollbar-width:none}.bar .bar-c::-webkit-scrollbar{display:none}.bar .bar-c .round{flex:none}.bar .bar-r{flex:1 0 auto!important}
html.mini .tile .ph .avatar{width:34%!important;max-width:56px;font-size:14px}
html.mini .tile .nm{font-size:10px!important;padding:2px 7px!important;left:5px!important;bottom:5px!important}html.mini .tile .ph{align-items:flex-start;padding-top:8%}
#group-modal,#prof-modal,#viewer,#badge-modal{z-index:88}.menu{z-index:89}#toasts,.toasts{z-index:97}


.bgm-pill{position:absolute;top:12px;right:12px;z-index:31;display:none;align-items:center;gap:8px;max-width:min(460px,calc(100% - 24px));padding:6px 10px 6px 6px;border-radius:999px;
  background:var(--fglass);backdrop-filter:var(--fblur);-webkit-backdrop-filter:var(--fblur);border:1px solid rgba(255,255,255,.09);box-shadow:var(--fshadow)}
#scr-call .bgm-pill{position:fixed}
.bgm-pill.on{display:flex;animation:up .25s both}
.bgm-ic{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--acc),#a855f7);font-size:13px}
.bgm-t{min-width:0;flex:1 1 120px;line-height:1.15}
.bgm-t b{display:block;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bgm-t em{display:block;font-style:normal;font-size:10.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bgm-time{font-variant-numeric:tabular-nums}
.bgm-ctl{display:flex;gap:4px}
.bgm-pill .ct-btn{width:28px;height:28px;font-size:11px;flex:none}
#bgm-vol{width:84px;flex:none;appearance:none;-webkit-appearance:none;height:5px;border-radius:3px;outline:0;cursor:pointer;background:linear-gradient(90deg,var(--acc) var(--p,50%),rgba(255,255,255,.16) var(--p,50%))}
#bgm-vol::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--acc)}
#bgm-vol::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff}
html.mini .bgm-pill{display:none!important}
@media (max-width:760px){.bgm-pill{top:56px;left:8px;right:8px;max-width:none}#bgm-vol{width:64px}.bgm-ctl #bgm-open{display:none}}
.bm-card{max-width:440px}
.bm-list{display:flex;flex-direction:column;gap:4px;max-height:300px;overflow:auto;margin:2px 0}
.bm-row{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 4px;border-radius:12px;border:1px solid transparent}
.bm-row:hover{background:rgba(255,255,255,.05)}
.bm-row.cur{background:color-mix(in srgb,var(--acc) 14%,transparent);border-color:color-mix(in srgb,var(--acc) 35%,transparent)}
.bm-play{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:12px;color:var(--dim);background:rgba(255,255,255,.06)}
.bm-row.cur .bm-play{color:#fff;background:var(--acc)}
.bm-t{flex:1;min-width:0}
.bm-t b{display:block;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bm-t em{font-style:normal;font-size:11.5px;color:var(--dim)}
.bm-ctrls{display:flex;justify-content:center;align-items:center;gap:10px;padding:6px 0}
.bm-ctrls .ec-btn.big{width:52px;height:52px;font-size:19px;background:var(--acc);border-color:var(--acc);color:#fff}
.bm-ctrls .ec-btn.on{background:color-mix(in srgb,var(--acc) 30%,transparent);border-color:var(--acc2);color:var(--acc2)}
.bm-ctrls .ec-btn small{font-size:9px;font-weight:800;margin-left:1px}
html.light .bm-ctrls .ec-btn:not(.big){color:#16162a}
#btn-bgm{margin-top:2px}

.chat-list .cm{min-width:0;max-width:100%;overflow:hidden}
.cm .fcard{max-width:100%;min-width:0;overflow:hidden}
.fc-t{min-width:0;flex:1 1 0}
.fc-t b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm p{overflow-wrap:anywhere}
.cm .cm-h b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.cm .cm-h{min-width:0}
.bar .bar-c #c-leave{position:sticky;right:0;z-index:2;box-shadow:-10px 0 14px -4px rgba(10,10,20,.55),0 4px 14px rgba(220,38,38,.5)!important}
.bg-grid button.ph{background-size:cover;background-position:center;min-height:64px;justify-content:flex-end;padding:0 4px 6px;border-color:transparent;position:relative;overflow:hidden}.bg-grid button.ph::before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(0,0,0,.65))}.bg-grid button.ph em{position:relative;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}.bg-grid button.ph span{display:none}.bg-grid button.ph.on{box-shadow:0 0 0 2px var(--acc2)}.bg-pop{width:320px}
.chat-list>*{flex-shrink:0!important}.chat-list .cm{overflow:visible}


.home-extra{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.home-extra .btn i{margin-right:4px}
.tr-card{position:relative;width:min(960px,100%);aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.6);border:1px solid var(--gline2,rgba(255,255,255,.12))}
.tr-card video{width:100%;height:100%;display:block;background:#000}
.tr-card .icon-x{position:absolute;top:10px;right:10px;z-index:2;background:rgba(0,0,0,.55);border-radius:50%}
.sg-text{resize:vertical;min-height:110px;font:inherit;line-height:1.45}
.th-custom{position:relative;display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:12px;border:1px solid var(--gline2,rgba(255,255,255,.12));cursor:pointer;font-size:13px;font-weight:700}
.th-custom::before{content:"";width:22px;height:22px;flex:none;border-radius:50%;background:conic-gradient(red,#ff0,lime,cyan,blue,#f0f,red);box-shadow:inset 0 0 0 5px var(--c,transparent)}
.th-custom.on{border-color:var(--acc)}
.th-custom input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.th-custom i{margin-right:2px;opacity:.7}


@media (max-width:600px){
  #scr-call .bar{left:6px!important;right:6px!important;bottom:calc(6px + env(safe-area-inset-bottom))!important;padding:6px!important;
    display:flex!important;flex-wrap:wrap;justify-content:center!important;gap:6px!important;pointer-events:auto;border-radius:24px;
    background:var(--fglass,rgba(20,20,34,.86));border:1px solid rgba(255,255,255,.09);backdrop-filter:var(--fblur,blur(14px));-webkit-backdrop-filter:var(--fblur,blur(14px));box-shadow:0 14px 34px rgba(0,0,0,.5)}
  #scr-call .bar::before,#scr-call .bar-l{display:none!important}
  #scr-call .bar-c,#scr-call .bar-r{display:contents!important}
  #scr-call .bar .round{width:40px!important;height:40px!important;flex:none}
  #scr-call .bar .round svg,#scr-call .bar .round i{transform:scale(.92)}
  #scr-call .bar #c-leave{position:static!important;order:99;width:56px!important;box-shadow:0 4px 14px rgba(220,38,38,.45)!important}
  #scr-call .stage{padding-bottom:118px!important}
  html.idle #scr-call .bar{transform:none;opacity:1}
  .panel.on{background:rgba(14,14,24,.97)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  html.light .panel.on{background:rgba(250,250,255,.98)!important}
  .game{top:58px!important}
}
@media (max-width:600px){
  body:has(#scr-call.on) #react-pop,body:has(#scr-call.on) #game-pop,body:has(#scr-call.on) #bg-pop,body:has(#scr-call.on) #theme-pop{
    top:auto!important;bottom:calc(122px + env(safe-area-inset-bottom))!important;left:8px!important;right:8px!important;margin:0 auto;max-width:calc(100vw - 16px)}
}