/* dc — wygląd D „Szkło”: szklane panele na gradiencie (morski / śliwka / pomarańcz), Sora, brzoskwiniowy akcent */
:root{
  --tx:#f6f2fb; --mu:rgba(246,242,251,.64); --mu2:rgba(246,242,251,.42);
  --gl:rgba(255,255,255,.075); --gl2:rgba(255,255,255,.13); --gl3:rgba(255,255,255,.2); --gb:rgba(255,255,255,.15);
  --dk:rgba(10,6,24,.28); --dk2:rgba(10,6,24,.5); --solid:#241c3b;
  --ac:#ffb98f; --ac2:#e8708f; --acg:linear-gradient(135deg,#ffb98f,#e8708f); --acx:#2a1630;
  --ok:#6fe3a5; --idle:#f2c45a; --dnd:#ff6b81; --off:#8b8599; --danger:#ff6b81;
  --r:22px; --f:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:var(--f);font-size:14.5px;line-height:1.45;color:var(--tx);background:#1b1531;overflow:hidden;-webkit-tap-highlight-color:transparent}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:
  radial-gradient(55% 75% at 8% 8%,#1d6b74 0%,transparent 62%),
  radial-gradient(50% 70% at 92% 14%,#6b2d7c 0%,transparent 62%),
  radial-gradient(60% 60% at 70% 105%,#c6653f 0%,transparent 60%),#1b1531}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:#9fdcff}
img{max-width:100%}
[hidden]{display:none!important}
.i{width:var(--z,20px);height:var(--z,20px);stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}
.glass{background:var(--gl);border:1px solid var(--gb);-webkit-backdrop-filter:blur(18px) saturate(125%);backdrop-filter:blur(18px) saturate(125%);border-radius:var(--r)}
body.lite .glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(36,28,59,.86)}
.scroll{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.scroll::-webkit-scrollbar{width:8px}.scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:8px}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.ib{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;color:var(--mu);flex:none}
.ib:hover{background:var(--gl2);color:var(--tx)}
.ib.on{color:var(--ac)}
.ib.red{color:var(--danger)}

/* ===== układ ===== */
#app{height:100%;display:flex;gap:12px;padding:12px;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));padding-bottom:max(12px,env(safe-area-inset-bottom))}
#nav{display:flex;gap:12px;flex:none}
#rail{width:68px;display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 0;overflow-y:auto;scrollbar-width:none}
#rail::-webkit-scrollbar{display:none}
#side{width:248px;display:flex;flex-direction:column;min-height:0}
#main{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}
#members{width:224px;flex:none;padding:8px 10px}
#app.nomem #members{display:none}
#scrim{position:fixed;inset:0;background:rgba(8,4,20,.5);z-index:40;opacity:0;pointer-events:none;transition:opacity .2s}

/* ===== pasek serwerów ===== */
.srv{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;font-weight:700;font-size:14px;position:relative;background:var(--gl2);flex:none;transition:transform .15s,border-radius .15s;color:var(--tx);overflow:visible}
.srv img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.srv:hover{transform:translateY(-1px);background:var(--gl3)}
.srv.on{background:var(--acg);color:var(--acx);box-shadow:0 6px 18px -6px var(--ac2)}
.srv.on img{box-shadow:0 0 0 2px var(--ac)}
.srv .pip{position:absolute;left:-12px;top:50%;width:5px;height:8px;margin-top:-4px;border-radius:0 4px 4px 0;background:var(--tx);transition:height .15s}
.srv.on .pip{height:30px;margin-top:-15px}
.srv .bdg{position:absolute;right:-5px;bottom:-5px}
.srv.add{color:var(--ok);background:var(--gl)}
.srv.add:hover{background:var(--ok);color:#10261b}
.rsep{width:28px;height:1px;background:var(--gb);flex:none}
.bdg{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--dnd);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;font-style:normal;line-height:1;box-shadow:0 0 0 3px #2a2140}

/* ===== lewy panel ===== */
#sidehdr{display:flex;align-items:center;gap:6px;padding:14px 12px 8px 18px;min-height:56px}
#sidehdr .ttl{flex:1;font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;display:flex;align-items:center;gap:6px;border-radius:10px;padding:4px 0}
#sidehdr button.ttl:hover{color:var(--ac)}
#sidelist{flex:1;padding:2px 10px 10px;min-height:0}
.cat{display:flex;align-items:center;justify-content:space-between;margin:14px 6px 4px 8px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mu);font-weight:600}
.cat .ib{width:24px;height:24px;border-radius:8px;--z:16px}
.ch{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:12px;color:var(--mu);width:100%;text-align:left;position:relative}
.ch:hover{background:var(--gl);color:var(--tx)}
.ch.on{background:var(--gl3);color:var(--tx)}
.ch.un{color:var(--tx);font-weight:600}
.ch .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch .dot{width:7px;height:7px;border-radius:50%;background:var(--ac);flex:none}
.ch .gear{opacity:0;--z:15px;color:var(--mu)}
.ch:hover .gear,.ch.on .gear{opacity:1}
.ch .gear:hover{color:var(--tx)}
.vus{display:flex;flex-direction:column;gap:1px;margin:0 0 4px}
.vu{display:flex;align-items:center;gap:8px;padding:3px 10px 3px 34px;color:var(--mu);font-size:12.5px;border-radius:10px}
.vu .av{width:22px;height:22px;font-size:10px;border-radius:8px;transition:box-shadow .12s}
.vu.talk .av,.tile.talk .av{box-shadow:0 0 0 2px var(--ok)}
.vu .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vu .i{--z:13px;color:var(--danger)}
.dmrow{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:14px;width:100%;text-align:left;color:var(--mu)}
.dmrow:hover{background:var(--gl);color:var(--tx)}
.dmrow.on{background:var(--gl3);color:var(--tx)}
.dmrow.un{color:var(--tx);font-weight:600}
.dmrow .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dmrow small{display:block;color:var(--mu2);font-size:11px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.homebtn{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;width:100%;color:var(--mu);margin-top:4px}
.homebtn:hover{background:var(--gl);color:var(--tx)}

#voicebar{margin:0 10px;padding:10px 10px 10px 14px;border-radius:16px;background:rgba(111,227,165,.1);border:1px solid rgba(111,227,165,.25);display:flex;align-items:center;gap:8px}
#voicebar .vt{flex:1;min-width:0;line-height:1.25}
#voicebar b{color:var(--ok);font-size:13px;display:block}
#voicebar small{color:var(--mu);font-size:11.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#voicebar.bad b{color:var(--idle)}
#mebar{display:flex;align-items:center;gap:4px;margin:10px;padding:8px;border-radius:16px;background:var(--dk)}
#mebar .who{flex:1;min-width:0;display:flex;align-items:center;gap:10px;text-align:left;border-radius:12px;padding:2px}
#mebar .who:hover{background:var(--gl)}
#mebar .who div{min-width:0;line-height:1.25}
#mebar b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mebar small{display:block;color:var(--mu);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mebar .ib{width:32px;height:32px;--z:18px}

/* ===== awatary ===== */
.av{width:40px;height:40px;border-radius:14px;background:var(--uc,#6b5fa8);color:#fff;display:grid;place-items:center;font-weight:700;flex:none;font-size:15px;object-fit:cover;box-shadow:0 0 0 2px rgba(255,255,255,.14);text-transform:uppercase;user-select:none}
.av.s{width:32px;height:32px;font-size:13px;border-radius:11px}
.av.xs{width:16px;height:16px;font-size:8px;border-radius:5px;box-shadow:none}
.av.l{width:80px;height:80px;font-size:30px;border-radius:26px}
.avw{position:relative;display:inline-flex;flex:none}
.sd{position:absolute;right:-3px;bottom:-3px;width:13px;height:13px;border-radius:50%;border:3px solid var(--solid);background:var(--off)}
.sd.online{background:var(--ok)}.sd.idle{background:var(--idle)}.sd.dnd{background:var(--dnd)}
.av.l+.sd{width:20px;height:20px;border-width:4px;right:-2px;bottom:-2px}

/* ===== główny panel ===== */
#mainhdr{display:flex;align-items:center;gap:8px;padding:12px 12px 10px 18px;min-height:58px;border-bottom:1px solid rgba(255,255,255,.07);flex:none}
#mainhdr .ttl{display:flex;align-items:center;gap:6px;min-width:0;font-weight:700;font-size:16px;white-space:nowrap}
#mainhdr .ttl .i{color:var(--mu)}
#mainhdr .topic{color:var(--mu);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1;margin-left:6px}
#mainhdr .tools{margin-left:auto;display:flex;gap:2px}
#mainhdr .mobonly{display:none}
#view{flex:1;display:flex;flex-direction:column;min-height:0;position:relative}
#conn{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:5;padding:5px 14px;border-radius:999px;background:var(--dk2);border:1px solid var(--gb);font-size:12px;color:var(--idle)}

/* ===== wiadomości ===== */
#msgs{flex:1;min-height:0;padding:8px 0 6px}
#msgtop{padding:24px 22px 10px}
#msgtop h2{margin:8px 0 4px;font-size:26px;line-height:1.15}
#msgtop p{margin:0;color:var(--mu)}
#msgtop .big{width:64px;height:64px;border-radius:22px;display:grid;place-items:center;background:var(--gl2);--z:34px}
.loadmore{padding:14px 22px;color:var(--mu);font-size:12.5px}
.daysep{display:flex;align-items:center;gap:12px;margin:14px 20px 6px;color:var(--mu2);font-size:11.5px;font-weight:600}
.daysep::before,.daysep::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.1)}
.msg{position:relative;padding:6px 20px 4px;margin-top:8px}
.msg.grp{margin-top:0;padding-top:2px}
.msg:hover{background:rgba(255,255,255,.035)}
.msg.mentioned{background:rgba(255,185,143,.08);box-shadow:inset 3px 0 0 var(--ac)}
.msg.hl{background:rgba(255,185,143,.14);transition:background 1.2s}
.mrow{display:flex;gap:14px}
.mrow>.av,.mrow>.gt{cursor:pointer}
.gt{width:40px;flex:none;font-size:10.5px;color:var(--mu2);text-align:right;padding-top:3px;opacity:0;cursor:default!important;white-space:nowrap}
.msg:hover .gt{opacity:1}
.mb{min-width:0;flex:1}
.mh{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.mh .nm{font-weight:600;cursor:pointer}
.mh .nm:hover{text-decoration:underline}
.mh time{font-size:11px;color:var(--mu)}
.mc{margin-top:1px;overflow-wrap:anywhere;white-space:normal}
.mc.big{font-size:38px;line-height:1.15}
.mc .ed{font-size:10.5px;color:var(--mu2);margin-left:4px}
.mc code{font-family:var(--mono);font-size:.9em;background:var(--dk2);padding:1px 5px;border-radius:6px}
.mc pre{margin:6px 0;background:var(--dk2);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px 12px;overflow-x:auto;max-width:100%}
.mc pre code{background:none;padding:0;font-size:12.5px;white-space:pre}
.mc blockquote{margin:2px 0;padding-left:10px;border-left:3px solid var(--gl3);color:var(--mu)}
.mc .spoiler{background:#0d0a18;color:transparent;border-radius:4px;cursor:pointer;padding:0 2px}
.mc .spoiler.open{background:var(--gl2);color:inherit}
.men{background:rgba(255,185,143,.18);color:var(--ac);border-radius:6px;padding:0 3px;font-weight:600;cursor:pointer}
.rep{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mu);margin:0 0 3px 30px;white-space:nowrap;overflow:hidden;cursor:pointer;position:relative}
.rep::before{content:"";position:absolute;left:-12px;top:50%;width:26px;height:12px;border:2px solid rgba(255,255,255,.18);border-right:0;border-bottom:0;border-top-left-radius:8px;transform:translate(-50%,0)}
.rep b{font-weight:600}
.rep span{overflow:hidden;text-overflow:ellipsis}
.rep:hover span{color:var(--tx)}
.sysm{display:flex;align-items:center;gap:10px;color:var(--mu);padding:6px 20px;font-size:13.5px;margin-top:6px}
.sysm .i{color:var(--ok);--z:18px;margin:0 11px}
.sysm b{color:var(--tx);cursor:pointer}
.sysm time{font-size:11px;color:var(--mu2)}
.atts{display:flex;flex-direction:column;gap:6px;margin-top:6px;align-items:flex-start}
.att-img{border-radius:14px;overflow:hidden;cursor:zoom-in;background:var(--dk);display:block;max-width:min(400px,100%)}
.att-img img{display:block;width:100%;height:100%;object-fit:cover}
.att-file{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;background:var(--dk);border:1px solid rgba(255,255,255,.08);max-width:min(400px,100%);text-decoration:none;color:var(--tx)}
.att-file .i{--z:28px;color:var(--ac)}
.att-file div{min-width:0}
.att-file b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;color:#9fdcff}
.att-file small{color:var(--mu)}
.atts video{max-width:min(420px,100%);max-height:320px;border-radius:14px;background:#000}
.atts audio{max-width:100%}
.rx{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}
.rx button{font-size:13px;padding:2px 9px;border-radius:999px;background:var(--gl);border:1px solid transparent;display:flex;gap:5px;align-items:center;line-height:1.5}
.rx button:hover{border-color:var(--gb)}
.rx button.me{border-color:var(--ac);background:rgba(255,185,143,.14)}
.rx button b{font-size:12px;font-weight:600}
.rx .add{color:var(--mu);opacity:0}
.msg:hover .rx .add{opacity:1}
.mact{position:absolute;right:16px;top:-14px;display:none;gap:2px;padding:3px;border-radius:12px;background:var(--solid);border:1px solid var(--gb);box-shadow:0 8px 20px -8px rgba(0,0,0,.6);z-index:3}
.msg:hover .mact,.msg.actv .mact{display:flex}
.mact button{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--mu);font-size:16px}
.mact button:hover{background:var(--gl2);color:var(--tx)}
.mact .i{--z:17px}
.mact .del:hover{color:var(--danger)}
.editbox textarea{width:100%;background:var(--dk2);border:1px solid var(--gb);border-radius:12px;padding:8px 12px;resize:none;outline:none;max-height:40vh}
.editbox small{color:var(--mu);font-size:11.5px}
.editbox small a{cursor:pointer}

/* ===== pole pisania ===== */
#composer{flex:none;padding:0 14px 10px;position:relative}
#replybar,#uploads{margin:0 4px;padding:8px 12px;border-radius:14px 14px 0 0;background:var(--dk);font-size:12.5px;color:var(--mu);display:flex;align-items:center;gap:8px}
#replybar b{color:var(--tx)}
#replybar span{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#uploads{flex-wrap:wrap;gap:8px}
.up{position:relative;width:92px;border-radius:12px;background:var(--gl);padding:6px;font-size:11px;color:var(--mu)}
.up .th{height:60px;border-radius:8px;background:var(--dk2) center/cover;display:grid;place-items:center;margin-bottom:4px;color:var(--ac)}
.up .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.up .bar{height:3px;border-radius:2px;background:var(--gl2);margin-top:3px;overflow:hidden}
.up .bar i{display:block;height:100%;background:var(--ac);width:0}
.up.err{color:var(--danger)}
.up .x{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;background:var(--solid);border:1px solid var(--gb);display:grid;place-items:center;--z:12px}
.inp{display:flex;align-items:flex-end;gap:4px;background:var(--dk);border:1px solid var(--gb);border-radius:18px;padding:6px 6px 6px 6px}
.inp textarea{flex:1;min-width:0;background:none;border:0;outline:none;resize:none;padding:8px 6px;max-height:40vh;line-height:1.4;min-height:38px}
.inp textarea::placeholder{color:var(--mu2)}
.inp .ib{width:38px;height:38px}
.send{width:38px;height:38px;border-radius:13px;background:var(--acg);color:var(--acx);display:grid;place-items:center;flex:none}
.send:disabled{opacity:.35;cursor:default}
#typing{height:20px;font-size:12px;color:var(--mu);padding:3px 8px 0;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden}
#typing b{color:var(--tx);font-weight:600}
.dots{display:inline-flex;gap:3px}.dots i{width:5px;height:5px;border-radius:50%;background:currentColor;animation:bl 1.2s infinite}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes bl{0%,60%,100%{opacity:.25}30%{opacity:1}}
#mentionbox{position:absolute;left:18px;right:18px;bottom:calc(100% - 4px);padding:6px;border-radius:16px;background:var(--solid);border:1px solid var(--gb);box-shadow:0 12px 30px -10px rgba(0,0,0,.6);z-index:6;max-height:260px;overflow-y:auto}
#mentionbox .cat{margin:4px 8px 6px}
.mopt{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:10px;width:100%;text-align:left}
.mopt.on,.mopt:hover{background:var(--gl2)}
.mopt small{color:var(--mu);margin-left:auto}
.dropzone{position:absolute;inset:8px;border:2px dashed var(--ac);border-radius:18px;background:rgba(27,21,49,.8);display:grid;place-items:center;z-index:9;font-size:18px;font-weight:600;color:var(--ac);pointer-events:none}

/* ===== ekran powitalny / głos ===== */
.home{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:30px;text-align:center}
.home h1{margin:0;font-size:clamp(24px,4vw,34px);line-height:1.15;text-wrap:balance}
.home p{margin:0;color:var(--mu);max-width:440px}
.home .row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.stage{flex:1;display:flex;flex-direction:column;min-height:0;padding:18px}
.tiles{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;align-content:center;overflow-y:auto}
.tile{aspect-ratio:4/3;border-radius:20px;background:var(--dk);border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;position:relative;max-width:100%}
.tile .av{width:72px;height:72px;font-size:28px;border-radius:24px;transition:box-shadow .12s}
.tile.talk{border-color:var(--ok)}
.tile.talk .av{box-shadow:0 0 0 3px var(--ok),0 0 26px -4px var(--ok)}
.tile b{font-size:13.5px}
.tile .flags{position:absolute;right:10px;bottom:10px;display:flex;gap:4px;color:var(--danger)}
.tile .flags .i{--z:16px}
.tile.self b::after{content:" (ty)";color:var(--mu);font-weight:400}
.stage .ctl{display:flex;justify-content:center;gap:10px;padding-top:16px;flex-wrap:wrap}
.cbtn{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:var(--gl2);border:1px solid var(--gb)}
.cbtn:hover{background:var(--gl3)}
.cbtn.off{background:rgba(255,107,129,.22);color:var(--danger);border-color:rgba(255,107,129,.4)}
.cbtn.hang{background:var(--danger);color:#fff;border-color:transparent;width:70px}
.empty{color:var(--mu);text-align:center;padding:30px}

/* ===== lista osób ===== */
#members .cat{margin-top:12px}
.mu{display:flex;align-items:center;gap:10px;padding:5px 6px;border-radius:12px;width:100%;text-align:left}
.mu:hover{background:var(--gl)}
.mu.offl{opacity:.45}
.mu div{min-width:0;line-height:1.25}
.mu b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mu small{display:block;color:var(--mu);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crown{color:var(--idle);--z:13px;display:inline-block;vertical-align:-1px;margin-left:4px}

/* ===== przyciski i formularze ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border-radius:14px;background:var(--acg);color:var(--acx);font-weight:700;white-space:nowrap}
.btn:hover{filter:brightness(1.06)}
.btn:disabled{opacity:.5;cursor:default}
.btn.ghost{background:var(--gl2);color:var(--tx);font-weight:600}
.btn.ghost:hover{background:var(--gl3)}
.btn.danger{background:var(--danger);color:#fff}
.btn.sm{height:34px;padding:0 12px;border-radius:11px;font-size:13px}
.btn.w{width:100%}
.field{display:flex;flex-direction:column;gap:6px}
.field>span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mu);font-weight:600}
.field small{color:var(--mu2);font-size:12px}
.in{width:100%;height:44px;border-radius:14px;background:var(--dk2);border:1px solid var(--gb);padding:0 14px;outline:none}
textarea.in{height:auto;padding:10px 14px;resize:vertical;min-height:70px}
.in:focus{border-color:var(--ac)}
select.in{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mu) 50%),linear-gradient(135deg,var(--mu) 50%,transparent 50%);background-position:calc(100% - 20px) 19px,calc(100% - 15px) 19px;background-size:5px 5px;background-repeat:no-repeat}
select.in option{background:var(--solid)}
.err{color:var(--danger);font-size:13px;min-height:1em;margin:0}
.seg{display:flex;gap:6px;background:var(--dk2);border-radius:14px;padding:4px}
.seg button{flex:1;height:36px;border-radius:11px;color:var(--mu);font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px}
.seg button.on{background:var(--gl3);color:var(--tx)}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatches button{width:30px;height:30px;border-radius:10px;background:var(--c);box-shadow:inset 0 0 0 2px rgba(255,255,255,.15)}
.swatches button.on{box-shadow:0 0 0 2px var(--tx)}
.tog{display:flex;align-items:center;gap:12px;cursor:pointer}
.tog input{appearance:none;width:42px;height:24px;border-radius:12px;background:var(--gl2);position:relative;flex:none;cursor:pointer;transition:background .15s;margin:0}
.tog input::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s}
.tog input:checked{background:var(--ok)}
.tog input:checked::after{transform:translateX(18px)}
.tog span{flex:1}
.tog small{display:block;color:var(--mu2);font-size:12px}

/* ===== okna, wyskakujące ===== */
#layer>*{z-index:60}
.modalbg{position:fixed;inset:0;background:rgba(8,4,20,.55);display:grid;place-items:center;padding:16px;z-index:60;animation:fi .15s}
.modal{width:min(460px,100%);max-height:calc(100dvh - 32px);display:flex;flex-direction:column;background:rgba(40,31,64,.94);border:1px solid var(--gb);border-radius:24px;box-shadow:0 30px 60px -20px rgba(0,0,0,.7);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);animation:pop .18s}
.modal.wide{width:min(560px,100%)}
.modal>header{display:flex;align-items:center;gap:10px;padding:18px 18px 6px 22px}
.modal>header h3{margin:0;flex:1;font-size:18px}
.modal .mbody{padding:10px 22px 18px;display:flex;flex-direction:column;gap:16px;overflow-y:auto}
.modal .mbody>p{margin:0;color:var(--mu)}
.modal>footer{display:flex;gap:10px;justify-content:flex-end;padding:14px 22px 20px;border-top:1px solid rgba(255,255,255,.07);flex-wrap:wrap}
.modal hr{border:0;border-top:1px solid rgba(255,255,255,.08);margin:2px 0;width:100%}
@keyframes fi{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}}
.pop{position:fixed;z-index:70;background:var(--solid);border:1px solid var(--gb);border-radius:18px;box-shadow:0 20px 40px -14px rgba(0,0,0,.7);padding:6px;animation:pop .12s;max-width:calc(100vw - 16px)}
.menu{min-width:220px}
.menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:12px;text-align:left;color:var(--tx)}
.menu button:hover{background:var(--gl2)}
.menu button .i{--z:18px;color:var(--mu)}
.menu button.red{color:var(--danger)}.menu button.red .i{color:var(--danger)}
.menu hr{border:0;border-top:1px solid rgba(255,255,255,.08);margin:4px 6px}
.emo{width:300px;padding:8px}
.emo .grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;max-height:240px;overflow-y:auto}
.emo .grid button{height:34px;border-radius:9px;font-size:20px;display:grid;place-items:center}
.emo .grid button:hover{background:var(--gl2)}
.emo .cat{margin:4px 4px 6px}
.prof{width:300px;padding:0;overflow:hidden}
.prof .ban{height:70px;background:var(--uc,#6b5fa8);opacity:.85}
.prof .pb{padding:0 18px 18px;margin-top:-40px;display:flex;flex-direction:column;gap:10px}
.prof .avw .av{box-shadow:0 0 0 6px var(--solid)}
.prof .avw .sd{border-color:var(--solid)}
.prof h3{margin:4px 0 0;font-size:19px}
.prof .un{color:var(--mu);font-size:13px}
.prof .cs{padding:10px 12px;border-radius:12px;background:var(--dk2);font-size:13px}
.prof .meta{color:var(--mu2);font-size:12px}
.prof .row{display:flex;gap:8px;flex-wrap:wrap}
.sheet .quick{display:flex;justify-content:space-between;padding:6px 8px 10px;gap:4px}
.sheet .quick button{width:44px;height:44px;border-radius:14px;background:var(--gl);font-size:22px;display:grid;place-items:center}
#lightbox{position:fixed;inset:0;z-index:80;background:rgba(5,3,12,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;animation:fi .15s}
#lightbox img{max-width:100%;max-height:calc(100dvh - 90px);border-radius:12px;object-fit:contain}
#lightbox a{color:var(--mu);font-size:13px}
#toasts{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:max-content;max-width:calc(100vw - 32px)}
.toast{padding:10px 18px;border-radius:14px;background:var(--solid);border:1px solid var(--gb);box-shadow:0 10px 30px -10px rgba(0,0,0,.7);animation:pop .15s;font-size:13.5px}
.toast.bad{border-color:rgba(255,107,129,.5);color:#ffc1cb}
.copyrow{display:flex;gap:8px}
.copyrow .in{flex:1;min-width:0;font-family:var(--mono);font-size:13px}
.inv-card{display:flex;align-items:center;gap:14px;padding:14px;border-radius:18px;background:var(--dk2)}
.inv-card .srv{width:56px;height:56px;border-radius:18px;font-size:18px}
.inv-card b{display:block;font-size:17px}
.inv-card small{color:var(--mu)}
.iconpick{display:flex;align-items:center;gap:14px}
.iconpick .srv{width:64px;height:64px;border-radius:20px;font-size:20px}

/* ===== logowanie ===== */
#auth{height:100%;overflow-y:auto;display:flex;align-items:center;justify-content:center;padding:24px max(16px,env(safe-area-inset-right)) 24px max(16px,env(safe-area-inset-left))}
#auth .box{width:min(420px,100%);padding:28px;display:flex;flex-direction:column;gap:16px}
#auth .logo{display:flex;align-items:center;gap:12px;margin-bottom:4px}
#auth .logo span{width:48px;height:48px;border-radius:16px;background:var(--acg);color:var(--acx);display:grid;place-items:center;font-weight:800;font-size:18px}
#auth .logo em{font-style:normal;background:var(--acg);-webkit-background-clip:text;background-clip:text;color:transparent}
#root{height:100%}
#auth .logo b{font-size:22px}
#auth .logo small{display:block;color:var(--mu);font-weight:400;font-size:12.5px}
#auth form{display:flex;flex-direction:column;gap:14px}
#auth .alt{color:var(--mu);font-size:13px;text-align:center}
#auth .alt button{color:var(--ac);font-weight:600}
.splash{height:100%;display:grid;place-items:center;color:var(--mu)}

/* ===== telefon ===== */
@media (max-width:860px){
  #app{padding:8px;padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right));padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom));gap:0}
  #nav{position:fixed;left:0;top:0;bottom:0;z-index:50;padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));gap:8px;transform:translateX(-105%);transition:transform .22s ease;width:min(340px,92vw)}
  #nav #side{flex:1;width:auto}
  #nav .glass{background:rgba(36,28,59,.9)}
  #members{position:fixed;right:0;top:0;bottom:0;z-index:50;width:min(280px,85vw);border-radius:22px 0 0 22px;transform:translateX(105%);transition:transform .22s ease;padding-top:max(14px,env(safe-area-inset-top));background:rgba(36,28,59,.94)}
  #app.nomem #members{display:block}
  body.navopen #nav{transform:none}
  body.memopen #members{transform:none}
  body.navopen #scrim,body.memopen #scrim{opacity:1;pointer-events:auto}
  #mainhdr{padding:8px 8px 8px 6px;min-height:52px}
  #mainhdr .mobonly{display:grid}
  #mainhdr .topic{display:none}
  .msg{padding-left:12px;padding-right:12px}
  .mrow{gap:10px}
  .av{width:36px;height:36px;font-size:14px}
  .gt{width:36px}
  .rep{margin-left:24px}
  #composer{padding:0 8px 6px}
  .mact{right:8px}
  .tile .av{width:56px;height:56px;font-size:22px}
  .tiles{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .modalbg{align-items:end;padding:0}
  .modal{width:100%;border-radius:24px 24px 0 0;max-height:92dvh;padding-bottom:env(safe-area-inset-bottom)}
}
@media (hover:none){
  .msg:hover{background:none}
  .msg:hover .mact{display:none}
  .msg.actv .mact{display:none}
  .rx .add{opacity:1}
  .ch .gear{opacity:1}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== dopiski ===== */
#app{height:var(--vvh,100%)}
[data-user]{cursor:pointer}
#app.nomemctx #members{display:none}
.homebtn.on{background:var(--gl3);color:var(--tx)}
.ch .bdg,.dmrow .bdg{box-shadow:none;flex:none}
#mainhdr .ttl>span{overflow:hidden;text-overflow:ellipsis}
#mainhdr .ttl .avw .av{width:22px;height:22px;font-size:10px;border-radius:8px}
#mainhdr .ttl .avw .sd{width:10px;height:10px;border-width:2px}
@media (hover:none){.msg{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}}
.prof .avw{align-self:flex-start}

/* ===================== GibCord 2.0 — nowe elementy ===================== */
.fcol{display:flex;flex-direction:column;gap:14px}
.row2{display:flex;gap:8px;flex-wrap:wrap}
.row2>.btn{flex:1}
.hint{color:var(--mu2);font-size:12.5px;margin:0}
.hint code,.srch code{font-family:var(--mono);font-size:11.5px;background:var(--dk2);padding:1px 5px;border-radius:5px;color:var(--tx)}
.prn{color:var(--mu);font-weight:400;font-size:.88em}
.live{display:inline-flex;align-items:center;gap:4px;background:#ff3b5c;color:#fff;font-size:10px;font-weight:800;letter-spacing:.06em;padding:1px 7px;border-radius:6px;text-transform:uppercase;line-height:16px;flex:none;font-style:normal}
.live .i{--z:11px}
.bdg.livedot{min-width:12px;height:12px;padding:0;background:#ff3b5c}
.red{color:var(--danger)}
.callon{color:var(--ok);display:grid;place-items:center}
.ch .lim{font-size:11px;color:var(--mu2);font-variant-numeric:tabular-nums}
.vu .live{margin-left:auto;font-size:9px;padding:0 5px;line-height:14px}
.vu .i{--z:13px}
.vu .red .i{color:var(--danger)}
.vu{cursor:pointer}
.vu:hover{background:var(--gl)}
/* pasek głosu */
#voicebar{flex-direction:column;align-items:stretch;gap:8px}
#voicebar .vrow{display:flex;align-items:center;gap:8px}
#voicebar .vbtns{display:flex;gap:6px}
#voicebar .vbtns button{flex:1;height:32px;border-radius:10px;background:var(--gl);display:grid;place-items:center;color:var(--tx)}
#voicebar .vbtns button:hover{background:var(--gl2)}
#voicebar .vbtns button.on{background:rgba(111,227,165,.2);color:var(--ok)}
/* nagłówek: szukaj, tryb powolny */
.hsearch{display:flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:10px;background:var(--dk2);color:var(--mu);margin:0 4px;width:170px;transition:width .2s}
.hsearch:focus-within{width:240px;color:var(--tx)}
.hsearch input{flex:1;min-width:0;background:none;border:0;outline:none;font-size:13px}
.slowtag{display:inline-flex;align-items:center;gap:3px;color:var(--idle)}
/* przypięte, szukanie */
.pins{width:min(420px,calc(100vw - 24px));max-height:min(70vh,520px);overflow-y:auto;padding:4px}
.res{display:flex;gap:10px;width:100%;text-align:left;padding:10px;border-radius:14px;align-items:flex-start}
.res:hover{background:var(--gl)}
.res>div{min-width:0;flex:1}
.res .rh{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:12.5px}
.res .rh span{color:var(--mu)}
.res .rh time{color:var(--mu2);font-size:11px;margin-left:auto}
.res .rt{font-size:13.5px;overflow-wrap:anywhere}
.res small{color:var(--mu);font-size:11.5px;display:flex;gap:4px;align-items:center;margin-top:3px}
.res mark{background:rgba(255,185,143,.3);color:var(--tx);border-radius:3px;padding:0 1px}
.srch{display:flex;flex-direction:column;gap:10px;padding:6px 2px}
.srh{display:flex;align-items:center;justify-content:space-between;padding-left:6px}
.seg.sm button{height:30px;font-size:12.5px}
.rlist{display:flex;flex-direction:column;gap:2px}
.pg{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--mu)}
#members .srch .res .av.s{width:30px;height:30px}
.pinmark{color:var(--ac);display:inline-grid;place-items:center}
.msg.pinned .mh .pinmark .i{--z:13px}
.mact button.on{color:var(--ac)}
.sysm a{color:var(--ac);cursor:pointer;text-decoration:none}
.sysm a:hover{text-decoration:underline}
.sysm.call .i{color:var(--ok)}
#tolatest{position:absolute;left:50%;transform:translateX(-50%);bottom:96px;z-index:4;padding:6px 14px;border-radius:999px;background:var(--solid);border:1px solid var(--gb);font-size:12.5px;display:flex;gap:6px;align-items:center;box-shadow:0 10px 24px -10px rgba(0,0,0,.6)}
#blocked{margin:0 4px;padding:14px 16px;border-radius:16px;background:var(--dk);border:1px solid var(--gb);color:var(--mu);display:flex;gap:8px;align-items:center;font-size:13.5px}
#typing[data-slow]{color:var(--idle)}
/* wiadomości głosowe, YouTube */
.inp.rec{align-items:center;padding:6px 6px 6px 16px;gap:10px}
.recdot{width:10px;height:10px;border-radius:50%;background:var(--danger);animation:bl 1.2s infinite;flex:none}
#rectime{font-variant-numeric:tabular-nums;font-weight:600}
.rech{flex:1;color:var(--mu);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vmsg{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:999px;background:var(--dk);border:1px solid rgba(255,255,255,.08);width:min(300px,100%)}
.vplay{width:34px;height:34px;border-radius:50%;background:var(--acg);color:var(--acx);display:grid;place-items:center;flex:none}
.vtrack{flex:1;height:4px;border-radius:2px;background:var(--gl2);overflow:hidden}
.vtrack i{display:block;height:100%;width:0;background:var(--ac)}
.vtime{font-size:12px;color:var(--mu);font-variant-numeric:tabular-nums;min-width:32px;text-align:right;display:flex;justify-content:flex-end}
.yt{position:relative;width:min(400px,100%);aspect-ratio:16/9;border-radius:14px;background:#000 center/cover;cursor:pointer;overflow:hidden}
.yt .ytp{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:46px;border-radius:14px;background:rgba(255,0,0,.88);color:#fff;display:grid;place-items:center}
.yt .ytp .i{fill:#fff;stroke:none}
.yt .ytl{position:absolute;left:10px;bottom:8px;font-size:11px;background:rgba(0,0,0,.6);padding:1px 7px;border-radius:6px;color:#fff}
.ytv{width:min(480px,100%);aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000}
.ytv iframe{width:100%;height:100%;border:0;display:block}
/* scena głosowa, transmisje, kamery */
.stage.hasbig{gap:0}
.sbig{flex:1;display:flex;align-items:center;justify-content:center;min-height:0}
.streamv{position:relative;border-radius:18px;overflow:hidden;background:#000;aspect-ratio:16/9;max-width:100%;max-height:100%;width:100%}
.sbig .streamv{height:auto;width:min(100%,calc((100dvh - 330px) * 16 / 9))}
.streamv video,.streamv .scr{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.streamv:fullscreen{border-radius:0;max-height:none;width:100%;height:100%}
.streamv .tl{position:absolute;left:12px;top:12px;display:flex;gap:8px;align-items:center}
.streamv .chip{background:rgba(0,0,0,.6);padding:3px 10px;border-radius:10px;font-size:12.5px;display:flex;gap:6px;align-items:center;color:#fff}
.streamv .tr{position:absolute;right:12px;top:12px}
.streamv .br{position:absolute;right:12px;bottom:12px;display:flex;gap:6px}
.streamv .br>button{min-width:34px;height:34px;border-radius:10px;background:rgba(0,0,0,.6);display:grid;place-items:center;color:#fff}
.streamv .br>button.chip{display:flex;padding:0 12px}
.streamv .watch{position:absolute;inset:0}
.lives{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;width:100%}
.watch{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:26px;min-width:240px;flex:1;max-width:460px;aspect-ratio:16/9;background:radial-gradient(circle at 50% 40%,rgba(255,59,92,.18),transparent 60%),#0b0716;border-radius:18px;border:1px solid rgba(255,255,255,.08);text-align:center}
.watch b{font-size:15px}
.watch small{color:var(--mu)}
.spin{width:28px;height:28px;border-radius:50%;border:3px solid var(--gl2);border-top-color:var(--ac);animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.strip{display:flex;gap:10px;justify-content:center;padding-top:12px;flex:none;overflow-x:auto;scrollbar-width:none}
.strip .tile{width:150px;aspect-ratio:16/10;gap:6px;flex:none}
.strip .tile .av{width:44px;height:44px;font-size:18px;border-radius:15px}
.strip .tile b{font-size:12px}
.tile{overflow:hidden;cursor:pointer}
.tile.hascam{padding:0}
.tile .tvid,.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.tile video.mirror{transform:scaleX(-1)}
.tile.hascam b{position:absolute;left:10px;bottom:8px;background:rgba(0,0,0,.55);padding:1px 8px;border-radius:8px;font-size:12px;z-index:1}
.tile.hascam .flags{z-index:1}
.tile .tl2{position:absolute;left:10px;top:10px;z-index:1;cursor:pointer}
.tile.talk.hascam{box-shadow:inset 0 0 0 3px var(--ok)}
.tile.calling{opacity:.7;border-style:dashed}
.tile.calling .av{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.07)}}
.cbtn.on{background:rgba(111,227,165,.2);color:var(--ok);border-color:rgba(111,227,165,.4)}
.cbtn.ptt{width:110px;flex-direction:column;gap:0;display:flex;align-items:center;justify-content:center}
.cbtn.ptt small{font-size:11px;font-weight:600}
.cbtn.ptt.on{background:var(--ok);color:#10261b}
#callpanel{flex:none;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(10,6,24,.35);max-height:55%;display:flex}
.stage.call{padding:14px;flex:1;min-height:0}
.stage.call .tiles{grid-template-columns:repeat(auto-fit,minmax(150px,220px));justify-content:center;flex:none}
.stage.call .ctl{padding-top:12px}
.stage.call .sbig .streamv{width:min(100%,calc((55dvh - 200px) * 16 / 9))}
/* menu osoby w głosie */
.vmenu{width:270px;padding:12px;display:flex;flex-direction:column;gap:10px}
.vmh{display:flex;gap:10px;align-items:center}
.vmh div{line-height:1.25;min-width:0}
.vmh small{display:block;color:var(--mu);font-size:12px}
.vmenu hr{border:0;border-top:1px solid rgba(255,255,255,.08);margin:0}
.vmenu .cat{margin:0}
input[type=range]{width:100%;accent-color:var(--ac);height:22px;margin:0;background:transparent}
.ticks{display:flex;justify-content:space-between;font-size:11px;color:var(--mu2);margin-top:-2px}
.meter{position:relative;height:12px;border-radius:6px;background:var(--dk2);overflow:hidden;flex:1}
.meter i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#6fe3a5,#f2c45a 75%,#ff6b81);transition:width .08s}
.meter b{position:absolute;top:0;bottom:0;width:3px;background:#fff;border-radius:2px;left:40%}
.mtest{display:flex;gap:10px;align-items:center}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.two{grid-template-columns:1fr}}
.kbd{display:inline-grid;place-items:center;min-width:54px;height:38px;padding:0 12px;border-radius:10px;background:var(--dk2);border:1px solid var(--gb);border-bottom-width:3px;font-weight:700}
.kbd.on{border-color:var(--ac);color:var(--ac)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.chips button{padding:5px 12px;border-radius:999px;background:var(--gl);border:1px solid var(--gb);font-size:12.5px}
.chips button.on{background:rgba(255,185,143,.16);border-color:var(--ac);color:var(--ac)}
/* dzwonek */
.ring{position:fixed;top:calc(16px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:85;display:flex;align-items:center;gap:16px;padding:14px 16px 14px 14px;border-radius:24px;background:rgba(40,31,64,.96);border:1px solid var(--gb);box-shadow:0 24px 60px -16px rgba(0,0,0,.8);animation:pop .2s;max-width:calc(100vw - 24px);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.ringav .av{width:56px;height:56px;font-size:22px;border-radius:18px;animation:pulse 1.2s ease-in-out infinite}
.ringt{line-height:1.3;min-width:0}
.ringt b{display:block;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ringt small{color:var(--mu)}
.ringb{display:flex;gap:8px}
.rbtn{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff}
.rbtn.ok{background:#2fbf71}.rbtn.no{background:var(--danger)}.rbtn.cam{background:var(--gl3)}
/* znajomi */
.ftabs{display:flex;gap:6px;margin-left:14px;flex-wrap:wrap}
.ftabs.mob{margin:10px 12px 0}
.ftabs button{height:30px;padding:0 12px;border-radius:10px;color:var(--mu);font-weight:600;font-size:13px;display:flex;align-items:center;gap:6px}
.ftabs button:hover{background:var(--gl);color:var(--tx)}
.ftabs button.on{background:var(--gl3);color:var(--tx)}
.ftabs button.add{background:rgba(111,227,165,.18);color:var(--ok)}
.ftabs button.add.on{background:var(--ok);color:#10261b}
.ftabs .bdg{box-shadow:none}
.fbody{flex:1;min-height:0;padding:16px 20px;display:flex;flex-direction:column;gap:6px}
.fh{margin:4px 0 0;font-size:18px}
.fp{margin:0 0 6px;color:var(--mu);font-size:13.5px}
.fsub{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mu);font-weight:600;margin:10px 0 4px}
.frow{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;border-top:1px solid rgba(255,255,255,.06);cursor:pointer}
.frow:hover{background:var(--gl)}
.frow>div{flex:1;min-width:0;line-height:1.3}
.frow b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frow small{color:var(--mu);font-size:12px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frow .acts{display:flex;gap:6px;flex:none}
.frow .acts button{width:36px;height:36px;border-radius:50%;background:var(--dk2);display:grid;place-items:center;color:var(--mu)}
.frow .acts button:hover{color:var(--tx);background:var(--gl3)}
.frow .acts .ok{color:var(--ok)}.frow .acts .no{color:var(--danger)}
.addf{display:flex;gap:8px;padding:6px 6px 6px 16px;border-radius:16px;background:var(--dk2);border:1px solid var(--gb);align-items:center}
.addf:focus-within{border-color:var(--ac)}
.addf input{flex:1;min-width:0;background:none;border:0;outline:none;height:36px}
.now{padding:8px 4px}
.now h4{margin:4px 4px 12px;font-size:16px}
.nowempty{color:var(--mu2);font-size:13px;margin:6px 4px}
.ncard{width:100%;text-align:left;padding:12px;border-radius:16px;background:var(--dk);display:flex;flex-direction:column;gap:8px;margin-bottom:10px;border:1px solid transparent}
.ncard:hover{border-color:var(--gb)}
.ncard .top{display:flex;gap:10px;align-items:center}
.ncard .top div{min-width:0;flex:1;line-height:1.3}
.ncard small{color:var(--mu);font-size:12px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ncard .stack{display:flex;gap:4px;flex-wrap:wrap}
/* role, członkowie, okna z zakładkami */
.modal.tall{height:min(760px,calc(100dvh - 32px))}
.mtabs{display:flex;gap:4px;background:var(--dk2);border-radius:14px;padding:4px;overflow-x:auto;scrollbar-width:none;flex:none}
.mtabs button{flex:1;height:34px;padding:0 12px;border-radius:11px;color:var(--mu);font-weight:600;white-space:nowrap;font-size:13.5px}
.mtabs button.on{background:var(--gl3);color:var(--tx)}
.rrow{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--dk);width:100%;text-align:left}
.rrow>div{flex:1;min-width:0;line-height:1.3}
.rrow small{display:block;color:var(--mu);font-size:12px}
.rrow.locked{opacity:.6}
.rrow .lk{color:var(--mu2)}
.rrow .ib{width:30px;height:30px}
.rrow .ib:disabled{opacity:.25;cursor:default}
.rrow.base{border:1px dashed var(--gb)}
.rdot{width:14px;height:14px;border-radius:50%;flex:none}
.back{display:inline-flex;align-items:center;gap:4px;color:var(--mu);font-size:13px;align-self:flex-start}
.back .i{transform:rotate(90deg)}
.ph{margin:0;font-size:17px}
.perms{display:flex;flex-direction:column;gap:12px}
.perms input:disabled+span{opacity:.5}
.tog input:disabled{opacity:.4;cursor:default}
.rolechips{display:flex;gap:6px;flex-wrap:wrap}
.rchip{display:inline-flex;cursor:pointer}
.rchip input{display:none}
.rchip span{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:999px;background:var(--dk2);border:1px solid var(--gb);font-size:12px;line-height:1.4}
.rchip span::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--rc,#8b8599)}
.rchip input:checked+span{border-color:var(--rc,#8b8599);background:color-mix(in srgb,var(--rc,#8b8599) 18%,transparent)}
.rchip input:disabled+span{opacity:.45;cursor:default}
.mlist{display:flex;flex-direction:column;gap:4px;max-height:min(52vh,460px);overflow-y:auto}
.mrow2{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;width:100%;text-align:left}
.mrow2:hover{background:var(--gl)}
.mrow2>div{flex:1;min-width:0;line-height:1.3;display:flex;flex-direction:column;gap:3px}
.mrow2 small{color:var(--mu);font-size:12px}
.prof .bio{font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.prof .sec{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mu);font-weight:600;margin-bottom:-4px}
.prof .rolechips .rchip{cursor:default}
.prof .row .btn.sm{padding:0 10px}
@media (max-width:860px){
  .strip .tile{width:110px}
  .sbig .streamv{width:100%}
  .fbody{padding:12px}
  .frow{padding:10px 8px}
  .ring{left:12px;right:12px;transform:none;flex-wrap:wrap;justify-content:center}
  .ringt{flex:1}
  .modal.tall{height:92dvh}
  #tolatest{bottom:84px}
  .stage{padding:12px}
}
/* GIF-y */
.gifbtn{font-size:11px;font-weight:800;letter-spacing:.04em;width:auto!important;padding:0 8px;border:1.5px solid currentColor;height:24px!important;border-radius:7px;margin:7px 2px}
.gifw{position:relative;display:block;max-width:min(320px,100%);border-radius:14px;overflow:hidden;background:var(--dk)}
.gifw.img{max-width:min(400px,100%)}
.gifw img,.gifw video{width:100%;height:100%;object-fit:cover;display:block}
.gifw .gtag{position:absolute;left:8px;bottom:6px;font-size:10px;font-weight:800;background:rgba(0,0,0,.55);color:#fff;padding:0 6px;border-radius:5px;line-height:16px}
.gstar{position:absolute;right:6px;top:6px;width:30px;height:30px;border-radius:10px;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;opacity:0;transition:opacity .15s}
.gifw:hover .gstar,.gstar.on{opacity:1}
.gstar.on{color:#ffd166}
.gstar.on .i{fill:#ffd166}
@media (hover:none){.gstar{opacity:1}}
.gifp{width:min(400px,calc(100vw - 24px));display:flex;flex-direction:column;gap:8px;padding:6px}
.gifh{display:flex;gap:6px;align-items:center}
.gifh .hsearch{flex:1;width:auto;margin:0}
.gifh .hsearch:focus-within{width:auto}
.gifgrid{columns:2;column-gap:6px;height:360px;overflow-y:auto}
.gifgrid .nowempty{column-span:all}
.gpi{position:relative;display:block;width:100%;margin-bottom:6px;break-inside:avoid;border-radius:10px;overflow:hidden;background:var(--dk2)}
.gpi img{width:100%;height:100%;object-fit:cover;display:block}
.gpi .gstar{width:26px;height:26px;border-radius:8px}
.gpi:hover .gstar{opacity:1}
.gifpow{font-size:10.5px;color:var(--mu2);text-align:right;letter-spacing:.06em}
.gifsheet .gifp{width:100%;padding:0}
.gifsheet .gifgrid{height:52dvh}
.banpick{height:90px;border-radius:16px;background:var(--uc,#6b5fa8) center/cover;border:1px solid var(--gb)}
.prof .ban{background-size:cover;background-position:center;height:90px}
.prof .pb{margin-top:-40px}
.copyrow select.in{font-family:inherit;font-size:14px}
@media (max-width:860px){
  .stage.call .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stage.call .tile{aspect-ratio:1/1}
  .inp [data-act=emoji-ins]{display:none}
  .inp .ib{width:34px}
}