@font-face{font-family:'DM Sans';font-weight:400 700;src:url(fonts/dmsans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+1E00-1E9F,U+20A0-20AB}
@font-face{font-family:'DM Sans';font-weight:400 700;src:url(fonts/dmsans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+2000-206F,U+20AC}
@font-face{font-family:'Space Grotesk';font-weight:500 700;src:url(fonts/space-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+1E00-1E9F,U+20A0-20AB}
@font-face{font-family:'Space Grotesk';font-weight:500 700;src:url(fonts/space-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+2000-206F,U+20AC}
:root{--acc:#E0B15A;--bg:#0A0A0A;--card:#171717;--line:#2E2E2E;--mut:#A3A3A3;--dim:#525252;--w:#fff;--sb:env(safe-area-inset-bottom,0px);--st:env(safe-area-inset-top,0px)}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;width:100%;position:fixed;inset:0;overflow:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%;touch-action:manipulation;background:var(--bg);color:var(--w);font:15px/1.45 'DM Sans',-apple-system,sans-serif}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:var(--w);background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 14px;width:100%;outline:0;font-size:16px}
input:focus,textarea:focus,select:focus{border-color:var(--w)}textarea{resize:none;min-height:96px}
input::placeholder,textarea::placeholder{color:var(--dim)}select{appearance:none}
h1,h2,h3,.sg{font-family:'Space Grotesk',sans-serif;font-weight:700}
#app{height:var(--vh,100dvh);display:flex}
.hide{display:none!important}
/* układ */
.side{display:none;width:240px;flex:none;border-right:1px solid var(--line);padding:28px 16px;flex-direction:column;gap:4px;overflow:auto}
.side .brand{display:flex;align-items:center;gap:10px;padding:0 10px 22px;font-family:'Space Grotesk';font-weight:700;letter-spacing:.04em;font-size:16px;line-height:1.15}
.side .brand img{width:34px;height:34px;border-radius:8px}
.side a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;color:var(--mut);font-weight:500}
.side a.on{background:var(--card);color:var(--w)}.side a:hover{color:var(--w)}
.side .sp{flex:1}.badge{background:var(--w);color:#000;border-radius:10px;font-size:11px;font-weight:700;padding:1px 7px;margin-left:auto}
.main{flex:1;min-width:0;display:flex;flex-direction:column;height:100%}
.view{flex:1;min-height:0;overflow:auto;padding:calc(var(--st) + 24px) 20px 24px;display:flex;flex-direction:column;gap:18px;-webkit-overflow-scrolling:touch}
.view>*{flex:none}.wrap{width:100%;max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.tabbar{flex:none;display:flex;border-top:1px solid var(--line);background:var(--bg);padding:5px 8px calc(var(--sb) * .3 + 3px)}.kb .tabbar{display:none}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding-top:4px;color:var(--mut);font-size:11px;position:relative}
.tabbar a.on{color:var(--w);font-weight:700}.tabbar .badge{position:absolute;top:0;left:56%;margin:0}
@media(min-width:900px){.side{display:flex}.tabbar{display:none}.view{padding:40px}}
svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* elementy */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.top h1{font-size:28px;line-height:1.1}.logo{font-family:'Space Grotesk';font-weight:700;font-size:19px;letter-spacing:.02em}
.circ{width:44px;height:44px;border-radius:22px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;position:relative;flex:none}
.circ .dot{position:absolute;top:9px;right:10px;width:9px;height:9px;border-radius:5px;background:var(--w)}
.mut{color:var(--mut)}.small{font-size:13px}.cap{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:14px}
.card.white{background:#fff;color:#0A0A0A;border-color:#fff}.card.white .cap,.card.white .mut{color:#525252}
.card.tap{cursor:pointer}.card.tap:hover{border-color:#555}
.row{display:flex;align-items:center;gap:12px}.row.sp{justify-content:space-between}.grow{flex:1;min-width:0}
.btn{height:48px;padding:0 22px;border-radius:24px;background:var(--w);color:#0A0A0A;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.btn.line{background:none;color:var(--w);border:1.5px solid var(--w)}.btn.dark{background:#0A0A0A;color:#fff}.btn.line.dk{color:#0A0A0A;border-color:#0A0A0A}
.btn.sm{height:38px;padding:0 16px;font-size:14px}.btn.full{width:100%}.btn[disabled]{opacity:.4;pointer-events:none}.btn.ghost{background:none;color:var(--mut);height:auto;padding:6px}
.btns{display:flex;gap:10px;flex-wrap:wrap}.btns>.btn{flex:1}
.chips{display:flex;gap:8px;overflow:auto;flex:none;padding-bottom:2px}.chip{height:36px;padding:0 16px;border-radius:18px;border:1px solid var(--line);display:inline-flex;align-items:center;white-space:nowrap;font-weight:500;flex:none;color:var(--mut)}
.chip.on{background:var(--w);color:#0A0A0A;border-color:var(--w);font-weight:700}
.tag{display:inline-flex;height:28px;padding:0 12px;border-radius:14px;border:1px solid var(--line);align-items:center;font-size:13px}
.av{width:46px;height:46px;border-radius:50%;background:#fff;color:#0A0A0A;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex:none;background-size:cover;background-position:center;position:relative}
.av.lg{width:96px;height:96px;font-size:30px}.av.sm{width:34px;height:34px;font-size:12px}.av.on::after{content:'';position:absolute;right:0;bottom:0;width:12px;height:12px;border-radius:6px;background:#fff;border:2px solid #0A0A0A}
.date{width:56px;height:60px;border-radius:14px;border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none}
.date b{font-family:'Space Grotesk';font-size:22px;line-height:1}.date span{font-size:11px;letter-spacing:.1em;color:var(--mut);font-weight:700}
.field{display:flex;flex-direction:column;gap:6px}.field label{font-size:13px;color:var(--mut);font-weight:500}
.err{color:#ff8a80;font-size:14px}.empty{color:var(--mut);text-align:center;padding:36px 12px;border:1px dashed var(--line);border-radius:20px}
.search{position:relative}.search input{padding-left:42px;border-radius:24px}.search svg{position:absolute;left:14px;top:13px;color:var(--mut)}
.list{display:flex;flex-direction:column}.list>*{border-bottom:1px solid var(--line)}.list>*:last-child{border:0}.item{display:flex;align-items:center;gap:14px;padding:14px 0}
.unread{font-weight:700}.sep{height:1px;background:var(--line)}
.live-dot{width:8px;height:8px;border-radius:4px;background:#fff;display:inline-block;animation:p 1.4s infinite}@keyframes p{50%{opacity:.25}}
.check{width:26px;height:26px;border-radius:13px;border:1.5px solid var(--mut);display:flex;align-items:center;justify-content:center;flex:none}.check.on{background:#fff;color:#000;border-color:#fff}
.sw{width:50px;height:30px;border-radius:15px;background:var(--line);position:relative;flex:none}.sw::after{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:12px;background:#fff;transition:.15s}.sw.on{background:#fff}.sw.on::after{left:23px;background:#000}
/* czat */
.chat{display:flex;flex-direction:column;height:100%}.chat .hd{flex:none;display:flex;align-items:center;gap:12px;padding:calc(var(--st) + 14px) 16px 14px;border-bottom:1px solid var(--line)}
.chat .log{flex:1;min-height:0;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:8px}
.msg{max-width:min(78%,520px);padding:10px 14px;border-radius:18px;background:var(--card);border:1px solid var(--line);align-self:flex-start;white-space:pre-wrap;word-wrap:break-word}
.msg.me{align-self:flex-end;background:#fff;color:#0A0A0A;border-color:#fff}.msg .who{font-size:12px;font-weight:700;color:var(--mut);margin-bottom:2px}.msg.me .who{display:none}
.msg .t{font-size:11px;color:var(--mut);margin-top:3px;text-align:right}.msg.me .t{color:#525252}.msg.ann{align-self:stretch;max-width:none;border-style:dashed}
.msg img{max-width:100%;border-radius:12px;display:block}.msg audio{max-width:100%;height:36px}.msg a.file{text-decoration:underline}
.day{align-self:center;font-size:12px;color:var(--mut);margin:6px 0}
.composer{flex:none;display:flex;gap:8px;align-items:flex-end;padding:10px 12px 10px;border-top:1px solid var(--line)}
.composer textarea{min-height:44px;max-height:120px;border-radius:22px;padding:11px 16px;font-size:16px}.composer .circ{background:var(--card)}.composer .circ.send{background:#fff;color:#000;border-color:#fff}.rec{color:#ff8a80!important;border-color:#ff8a80!important}
/* live */
.stage{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));flex:1;min-height:0;align-content:start}
.tile{position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;aspect-ratio:3/4;display:flex;align-items:center;justify-content:center}
.tile video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;background:#000}.tile .nm{position:absolute;left:10px;bottom:8px;font-size:13px;font-weight:700;background:#000a;padding:2px 10px;border-radius:12px}
.tile.speaking{border-color:#fff;border-width:2px}.ctl{display:flex;justify-content:center;gap:14px;padding:6px 0 calc(6px + var(--sb))}.ctl .circ{width:58px;height:58px;border-radius:29px;background:var(--card)}.ctl .circ.off{background:#fff;color:#000}.ctl .circ.end{background:#d33;border-color:#d33}
/* admin */
.table{width:100%;border-collapse:collapse}.table th{text-align:left;font-size:12px;letter-spacing:.1em;color:var(--mut);padding:10px 12px;border-bottom:1px solid var(--line);font-weight:700}
.table td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle}.scroll-x{overflow:auto}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px}.stat b{font-family:'Space Grotesk';font-size:34px;display:block;line-height:1.1}.stat span{color:var(--mut);font-size:13px}
.admin-wide .wrap{max-width:1100px}.cols{display:grid;gap:18px;grid-template-columns:1fr}@media(min-width:900px){.cols.two{grid-template-columns:1.4fr 1fr}}
/* modal i toast */
.modal{position:fixed;inset:0;background:#000c;z-index:50;display:flex;align-items:flex-end;justify-content:center}.modal>div{background:#111;border:1px solid var(--line);border-radius:24px 24px 0 0;width:100%;max-width:520px;max-height:92%;overflow:auto;padding:22px 20px calc(22px + var(--sb));display:flex;flex-direction:column;gap:14px}
@media(min-width:900px){.modal{align-items:center}.modal>div{border-radius:24px}}
#toast{position:fixed;left:50%;bottom:calc(100px + var(--sb));transform:translate(-50%,20px);background:#fff;color:#000;padding:12px 20px;border-radius:24px;font-weight:700;opacity:0;pointer-events:none;transition:.2s;z-index:99;max-width:90%;text-align:center}#toast.show{opacity:1;transform:translate(-50%,0)}
/* logowanie */
.auth{margin:auto;width:100%;max-width:420px;padding:32px 24px;display:flex;flex-direction:column;gap:16px}.auth img{width:120px;height:120px;border-radius:24px;margin:0 auto}
.auth h1{font-size:30px;text-align:center}.auth .sub{text-align:center;color:var(--mut)}.auth-scroll{flex:1;overflow:auto;display:flex;padding:calc(var(--st) + 12px) 0}
.cb{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--mut)}.cb input{width:22px;height:22px;flex:none;accent-color:#fff;margin-top:1px;padding:0}
.pill{display:inline-block;padding:3px 10px;border-radius:12px;background:#fff;color:#000;font-size:12px;font-weight:700}.pill.o{background:none;color:var(--mut);border:1px solid var(--line)}
.step{display:flex;gap:14px;align-items:center;padding:8px 0}
.bar{height:6px;background:var(--line);border-radius:3px;overflow:hidden}.bar i{display:block;height:100%;background:#fff}
.vid{width:100%;border-radius:16px;background:#000;max-height:60vh}
.tile .st{position:absolute;top:8px;left:10px;right:10px;font-size:12px;color:#fff;z-index:2}.tile .st:not(:empty){background:#000a;padding:3px 8px;border-radius:10px;width:fit-content}

/* kolor akcentu (złoto) */
.badge{background:var(--acc)}.tabbar a.on{color:var(--acc)}.side a.on svg{color:var(--acc)}.live-dot{background:var(--acc)}.pill{background:var(--acc)}.pill.o{background:none}
.check.on{background:var(--acc);border-color:var(--acc)}.sw.on{background:var(--acc)}.bar i{background:var(--acc)}.msg.me{background:var(--acc);border-color:var(--acc)}.msg.me .t{color:#5a4515}
.circ .dot{background:var(--acc)}.av.on::after{background:var(--acc)}.date span{color:var(--acc)}.card:not(.white) .cap{color:var(--acc)}.composer .circ.send{background:var(--acc);border-color:var(--acc)}
.card.white .cap{color:#8a6a1f}.stat b{color:var(--w)}.chip.on{box-shadow:0 0 0 1px var(--acc) inset}
/* wskaźnik pisania */
.typing{flex:none;display:flex;align-items:center;gap:8px;padding:2px 18px 8px;color:var(--mut);font-size:13px}.typing .bub{display:inline-flex;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:9px 12px}
.typing .bub i{width:6px;height:6px;border-radius:3px;background:var(--mut);animation:dot 1.2s infinite}.typing .bub i:nth-child(2){animation-delay:.2s}.typing .bub i:nth-child(3){animation-delay:.4s}@keyframes dot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
/* rozmowa: kafelki, hot seat */
.stage{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0}.grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-content:start}
.tile{position:relative;isolation:isolate}.tile video{z-index:1;border-radius:inherit;background:#000}.tile .av{position:relative;z-index:0}.tile .nm,.tile .st,.tile .hot-btn{z-index:3}
.tile.has-video:not(.novid) .av{display:none}.tile.novid video{visibility:hidden}.tile.muted .nm::after{content:' · wyciszony';color:var(--mut)}
.hot-btn{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:17px;background:#000a;display:flex;align-items:center;justify-content:center;color:#ff9a3d}
.hotbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border:1px solid #ff7a1a;border-radius:16px;color:#ffb066;font-weight:700}
.stage.hot #hot-slot .tile{aspect-ratio:4/3;width:100%;max-height:52vh}.stage.hot .grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));max-height:30vh;overflow-y:auto;flex:none;padding:6px 2px}
.stage.hot .grid .tile{aspect-ratio:1/1}.stage.hot .grid .av.lg{width:46px;height:46px;font-size:15px}
.tile.fire{overflow:visible;border:0;box-shadow:0 0 16px 3px rgba(255,120,20,.55),0 0 38px 8px rgba(255,60,0,.3);animation:flicker 1.1s infinite alternate}
.tile.fire::before{content:'';position:absolute;inset:-5px;padding:5px;border-radius:23px;z-index:2;pointer-events:none;background:linear-gradient(0deg,#ff3d00,#ff9800,#ffd54f,#ff9800,#ff3d00,#ff9800);background-size:100% 300%;animation:flame 1.4s linear infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.tile.fire video{border-radius:18px}.tile.fire{border-radius:18px}
@keyframes flame{to{background-position:0 300%}}@keyframes flicker{0%{box-shadow:0 0 14px 2px rgba(255,120,20,.5),0 0 30px 6px rgba(255,60,0,.25)}100%{box-shadow:0 0 22px 6px rgba(255,150,30,.7),0 0 50px 14px rgba(255,70,0,.4)}}

/* zdjęcia w spotkaniach: mały kafelek po prawej stronie karty */
.stackc{display:flex;flex-direction:column;gap:12px}
.evc{display:flex;align-items:center;gap:14px;padding:14px;border-radius:20px;background:var(--card);border:1px solid var(--line);min-height:96px}.evc:active{border-color:#555}
.thumb{width:76px;height:76px;flex:none;border-radius:16px;border:1px solid #4a1818;background:linear-gradient(rgba(70,8,10,.28),rgba(18,2,3,.38)),var(--img) var(--pos,center)/cover no-repeat}
.thumb.big{position:absolute;top:18px;right:18px}.card.hero{position:relative}.card.hero>div:nth-child(2){padding-right:92px;min-height:80px}.card.hero{background:var(--card);border:1px solid var(--line);color:#fff}.card.hero .cap{color:var(--acc)}.card.hero .mut{color:var(--mut)}
.chips{scrollbar-width:none}.chips::-webkit-scrollbar{display:none}

.avstack{display:flex;align-items:center}.avstack .av{margin-left:-10px;border:2px solid var(--card);width:30px;height:30px;font-size:11px}.avstack .av:first-child{margin-left:0}.avstack .av.more{background:var(--line);color:#fff}
.top #who .avstack .av{border-color:var(--bg)}
.tile .dg{position:absolute;left:8px;right:8px;top:30px;font-size:10px;line-height:1.3;color:#ffb3b3;z-index:3;word-break:break-word}

/* podniesiona ręka */
.handbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px 14px;border:1px solid var(--acc);border-radius:16px;color:var(--acc);font-weight:700}
.handbar .chip{height:30px;padding:0 12px;color:var(--w);font-size:13px}
.ctl .circ.on{background:var(--acc);border-color:var(--acc);color:#0A0A0A}
.tile.hand{outline:2px solid var(--acc);outline-offset:-2px}
.tile.hand::after{content:'\270B';position:absolute;top:8px;left:8px;z-index:4;width:34px;height:34px;border-radius:17px;background:var(--acc);display:flex;align-items:center;justify-content:center;font-size:18px;animation:wave 1s ease-in-out infinite alternate}
@keyframes wave{from{transform:rotate(-12deg) scale(1)}to{transform:rotate(12deg) scale(1.12)}}

/* reakcje emoji w rozmowie */
.ctl{gap:10px}.ctl .circ{width:54px;height:54px;border-radius:27px}
.tray{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;padding:8px;border:1px solid var(--line);border-radius:22px;background:var(--card)}.tray button{font-size:26px;width:44px;height:44px;border-radius:22px}.tray button:active{background:var(--line);transform:scale(1.15)}
.reacts{position:fixed;right:12px;bottom:calc(150px + var(--sb));width:90px;height:60vh;pointer-events:none;z-index:40}
.react{position:absolute;bottom:0;display:flex;flex-direction:column;align-items:center;animation:floatup 3.1s ease-out forwards}.react .em{font-size:38px;line-height:1}.react .who{font-size:11px;font-weight:700;background:#000b;border-radius:10px;padding:1px 8px;margin-top:2px}
@keyframes floatup{0%{transform:translate(0,0) scale(.5);opacity:0}12%{opacity:1;transform:translate(0,-30px) scale(1.1)}100%{transform:translate(var(--dx),-52vh) scale(1);opacity:0}}

/* emoji w czacie */
.msg.big{background:none!important;border:0!important;font-size:46px;line-height:1.1;padding:2px 6px}.msg.big .t{display:none}.msg.big .who{display:block}
.msg{cursor:pointer;position:relative}.msg .rx{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.rxc{height:26px;padding:0 9px;border-radius:13px;border:1px solid var(--line);background:#0a0a0a99;color:var(--w);font-size:13px;display:inline-flex;align-items:center;gap:4px}.msg.me .rxc{background:#0000001a;border-color:#00000030;color:#0A0A0A}
.rxc.mine{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset}
.rpick{position:fixed;z-index:60;display:flex;gap:2px;padding:6px 8px;border-radius:26px;background:#1d1d1d;border:1px solid var(--line);box-shadow:0 6px 24px #000a}.rpick button{font-size:24px;width:38px;height:38px;border-radius:19px}.rpick button:active{background:var(--line);transform:scale(1.2)}
.epanel{flex:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:2px;padding:8px 12px;max-height:190px;overflow:auto;border-top:1px solid var(--line);background:var(--bg)}.epanel button{font-size:25px;height:40px;border-radius:10px}.epanel button:active{background:var(--line)}
.composer .circ{width:40px;height:40px;flex:none}.composer{gap:6px}

/* animacja nagrywania głosu */
.bub.wave{gap:3px;align-items:center;height:30px}.bub.wave i{width:3px;height:8px;border-radius:2px;background:var(--acc);animation:eq .9s ease-in-out infinite}
.bub.wave i:nth-child(2){animation-delay:.15s}.bub.wave i:nth-child(3){animation-delay:.3s}.bub.wave i:nth-child(4){animation-delay:.45s}.bub.wave i:nth-child(5){animation-delay:.6s}
@keyframes eq{0%,100%{height:6px}50%{height:20px}}
.recbar{flex:none;display:flex;align-items:center;gap:10px;padding:8px 18px;color:#ff8a80;font-size:14px;border-top:1px solid var(--line)}.recbar .bub{background:none;border:0;padding:0}.recbar .bub i{background:#ff8a80}

/* ekran startowy: zwarty układ na telefonie */
.wrap>:empty{display:none}.view{scrollbar-width:none}.view::-webkit-scrollbar{display:none}
.greet h1{font-size:30px;line-height:1.05;margin-top:2px}
.nx{padding:16px;gap:12px}.nx h2{font-size:22px;margin:2px 0 4px}.nx .btn{height:42px;font-size:14px}.nx .thumb{width:64px;height:64px;border-radius:14px}
.hs{padding:14px 16px;gap:8px}.hs .hst{font-weight:700;font-size:16px;margin-top:2px}
.sc-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.sc{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border:1px solid var(--line);border-radius:16px;font-size:12px;font-weight:700;color:var(--w);background:var(--card)}.sc svg{color:var(--acc)}
.view>.wrap{gap:14px}

/* menu wiadomości: reakcje + edycja/usuwanie */
.rpick{flex-direction:column;border-radius:22px}.rpick .rrow{display:flex;gap:2px}
.rpick .ract{display:flex;gap:6px;margin-top:4px;padding-top:6px;border-top:1px solid var(--line)}.rpick .ract button{font-size:14px;font-weight:700;width:auto;height:34px;padding:0 16px;border-radius:17px;background:#2a2a2a;color:var(--w)}.rpick .ract button[data-a=del]{color:#ff8a80}
.msg .mb{white-space:pre-wrap;word-wrap:break-word}

.agm{font-family:'Space Grotesk';font-weight:700;font-size:20px;text-transform:capitalize;position:sticky;top:0;z-index:5;background:var(--bg);padding:12px 2px 8px;margin-top:6px}
.agw{font-size:13px;color:var(--mut);padding:6px 2px 0;font-weight:600}.agw span{color:var(--dim);font-weight:400;margin-left:6px}
.kind{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.12em;padding:3px 8px;border-radius:99px;margin-bottom:6px}
.kind.on{background:#fff;color:#0A0A0A}.kind.ph{background:var(--acc);color:#0A0A0A}
.evc.is-on{border-left:4px solid #fff}.evc.is-ph{border-left:4px solid var(--acc)}
.nextev{display:block;padding:14px;border-radius:16px;border:1px solid var(--acc);margin-bottom:10px}.nextev .cap{color:var(--acc);margin-bottom:4px}

.rcard{display:flex;gap:14px;align-items:center;padding:14px;border-radius:18px;background:var(--card);border:1px solid var(--line)}.rcard:active{border-color:#555}
.rcard .rico{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex:none}.rcard .rico svg{width:26px;height:26px}
.rcard.rvid .rico{background:#fff;color:#0A0A0A}.rcard.nt .rico{background:#2a2312;color:var(--acc);border:1px solid var(--acc)}

.annbox{display:flex;align-items:center;gap:14px;padding:14px;border-radius:18px;border:1px solid var(--acc);background:var(--card);margin-bottom:12px}.annic{width:46px;height:46px;border-radius:14px;background:var(--acc);color:#0A0A0A;display:flex;align-items:center;justify-content:center;flex:none}

[data-uid]{cursor:pointer}.plink{display:inline-block;margin:4px 6px 0;padding:6px 12px;border-radius:99px;border:1px solid var(--acc);color:var(--acc);font-size:14px;font-weight:600;word-break:break-all}
.plinks{display:flex;flex-wrap:wrap;justify-content:center}.days{margin-top:6px;padding:8px 16px;border-radius:99px;background:#2a2312;color:var(--acc);font-size:14px}.days b{font-size:18px}

#ring{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;text-align:center}.ringbox{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px}.ringbox .av.lg{animation:ringp 1.2s ease-in-out infinite}@keyframes ringp{50%{box-shadow:0 0 0 14px rgba(224,177,90,.25)}}

.tile .mi{position:absolute;top:8px;right:8px;z-index:5;width:30px;height:30px;border-radius:15px;background:#d33;color:#fff;display:none;align-items:center;justify-content:center}.tile .mi svg{width:18px;height:18px}.tile.muted .mi{display:flex}
.tile .cx{display:none;position:absolute;inset:0;z-index:2;background:#111;align-items:center;justify-content:center;color:var(--mut)}.tile .cx svg{width:44px;height:44px}.tile.novid .cx{display:flex}.tile.novid .av{display:none}
.tile.muted .nm::after{content:''}
.ctl .circ{touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer;position:relative;z-index:50}.ctl .circ.press{transform:scale(.88)}.ctl .circ svg{pointer-events:none}.ctl{position:relative;z-index:50}

.hclock{margin-left:auto;font-variant-numeric:tabular-nums;font-size:14px;white-space:nowrap}.hclock b{font-size:17px}.hclock span{color:var(--mut);margin-left:6px}.hclock.over,.hclock.over span{color:#ff6b4a}
.hotbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.hotbar select{background:var(--card);color:#fff;border:1px solid var(--line);border-radius:10px;padding:6px 8px;font-size:16px}
.tile.sharing video{object-fit:contain}

.quote{border-left:3px solid var(--acc);padding:2px 8px;margin-bottom:4px;font-size:13px;opacity:.85;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:240px}.quote b{margin-right:4px}
.msg.flash{animation:flashm 1.4s}@keyframes flashm{0%,60%{outline:2px solid var(--acc)}100%{outline:2px solid transparent}}
.pinbar{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--card);cursor:pointer}.pinbar svg{width:18px;height:18px;color:var(--acc);flex:none}.pinbar .cap{color:var(--acc);margin:0}.pinbar .pv2{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}

/* rakieta */
#rscene{position:fixed;left:0;right:0;top:0;bottom:calc(84px + var(--sb));z-index:40;overflow:hidden;background:#000}
#rscene .sky{position:absolute;inset:0;background:linear-gradient(#0b1d45,#2a4d96 55%,#f0a458);animation:skyout 5s linear forwards;animation-delay:calc(1.5s - var(--age))}
#rscene .space{position:absolute;inset:0;opacity:0;background:radial-gradient(1.5px 1.5px at 20px 30px,#fff,transparent),radial-gradient(1px 1px at 90px 80px,#fff,transparent),radial-gradient(2px 2px at 150px 20px,#ffd,transparent),radial-gradient(1px 1px at 60px 140px,#fff,transparent),radial-gradient(1.5px 1.5px at 190px 110px,#fff,transparent);background-size:220px 170px;animation:spacein 4s linear forwards,starsdrift 6s linear forwards;animation-delay:calc(2s - var(--age)),calc(1.5s - var(--age))}
@keyframes skyout{to{opacity:0}}@keyframes spacein{to{opacity:1}}@keyframes starsdrift{from{background-position:0 0}to{background-position:0 900px;}}
#rscene .moon{position:absolute;left:50%;bottom:-125vw;width:120vw;max-width:900px;height:120vw;max-height:900px;margin-left:calc(min(120vw,900px) / -2);border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff,#d9d9d9 35%,#9a9a9a 100%);box-shadow:0 0 60px rgba(255,255,255,.25);animation:moonup 4s ease-out forwards;animation-delay:calc(5s - var(--age))}
#rscene .moon::before{content:'';position:absolute;left:30%;top:14%;width:14%;height:14%;border-radius:50%;background:#bbb;box-shadow:inset 3px 3px 6px #888,60px 40px 0 -4px #c4c4c4,-40px 60px 0 -2px #b5b5b5}
@keyframes moonup{to{bottom:-85vw}}
#rscene .rkt{position:absolute;left:50%;width:150px;height:260px;margin-left:-75px;bottom:6vh;animation:rfly 9s cubic-bezier(.45,0,.55,1) forwards,rshake .12s linear 12;animation-delay:calc(0s - var(--age)),calc(0s - var(--age))}
@keyframes rfly{0%,14%{bottom:6vh;transform:scale(1)}58%{bottom:72vh;transform:scale(.9)}100%{bottom:calc(min(120vw,900px) * .35 - 82px);transform:scale(.85)}}
@keyframes rshake{50%{margin-left:-77px}}
#rscene .rbody{position:absolute;left:0;top:0;width:150px;height:215px}
#rscene .rwin{position:absolute;left:33px;top:55px;width:84px;height:84px;border-radius:50%;overflow:hidden;border:4px solid var(--acc);background:#111;box-shadow:0 0 0 3px #555}
#rscene .rwin .tile{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:50%;border:0;min-height:0}
#rscene .rwin .tile .nm,#rscene .rwin .tile .st,#rscene .rwin .tile .hot-btn,#rscene .rwin .tile .dg,#rscene .rwin .tile .mi,#rscene .rwin .tile::before,#rscene .rwin .tile::after{display:none}
#rscene .rwin .tile .av.lg{width:44px;height:44px;font-size:16px}
#rscene .flame{position:absolute;left:50%;top:205px;width:34px;height:70px;margin-left:-17px;border-radius:50% 50% 50% 50%/20% 20% 80% 80%;background:linear-gradient(#fff3a0,#ff9800 45%,#ff3d00);filter:blur(1px);transform-origin:top;animation:flick .12s ease-in-out infinite alternate,flameout .5s linear forwards;animation-delay:0s,calc(8s - var(--age))}
@keyframes flick{to{transform:scaleY(1.35) scaleX(.85)}}@keyframes flameout{to{opacity:0}}
#rscene .rcap{position:absolute;left:0;right:0;top:14px;text-align:center;font-weight:700;opacity:0;animation:capin 1s forwards;animation-delay:calc(9s - var(--age))}@keyframes capin{to{opacity:1}}
#rscene .rback{position:absolute;right:12px;top:12px}

/* rakieta v2: księżyc liczony od szerokości sceny (działa też na komputerze), słońce, kosmici */
#rscene{--mw:min(120vw,900px)}
#rscene .moon{width:var(--mw);height:var(--mw);max-width:none;max-height:none;margin-left:calc(var(--mw) / -2);bottom:calc(var(--mw) * -1.05);animation:moonup2 4s ease-out forwards;animation-delay:calc(5s - var(--age))}
@keyframes moonup2{to{bottom:calc(var(--mw) * -.65)}}
@keyframes rfly{0%,14%{bottom:6vh;transform:scale(1)}58%{bottom:72vh;transform:scale(.9)}100%{bottom:calc(var(--mw) * .35 - 82px);transform:scale(.85)}}
#rscene .sun{position:absolute;right:8%;top:9%;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle,#fff7c2 30%,#ffd23f 62%,rgba(255,170,0,0) 72%);box-shadow:0 0 50px 20px rgba(255,200,60,.55);animation:sunsway 9s ease-in-out forwards;animation-delay:calc(0s - var(--age))}
@keyframes sunsway{to{transform:scale(1.25)}}
#rscene .aliens{position:absolute;left:0;right:0;bottom:calc(var(--mw) * .35 - 30px);height:0}
#rscene .al{position:absolute;bottom:0;width:56px;height:66px;opacity:0;transform:translateY(60px) scale(.3);transform-origin:bottom;animation:alpop .5s cubic-bezier(.3,1.6,.5,1) forwards}
#rscene .al .alien{width:100%;height:100%;overflow:visible}
#rscene .a1{left:calc(50% - 150px);animation-delay:calc(9.2s - var(--age))}#rscene .a2{left:calc(50% + 100px);animation-delay:calc(9.5s - var(--age))}#rscene .a3{left:calc(50% + 40px);bottom:-16px;animation-delay:calc(9.8s - var(--age))}
@keyframes alpop{to{opacity:1;transform:none}}
#rscene .flagp{position:absolute;right:-6px;bottom:20px;width:3px;height:78px;background:#ddd}#rscene .flagp i{position:absolute;left:3px;top:0;width:38px;height:24px;background:#d33;animation:wave2 .8s ease-in-out infinite alternate;transform-origin:left}
@keyframes wave2{to{transform:skewY(-8deg) scaleX(.9)}}
#rscene .say{position:absolute;left:max(6px,calc(50% - 195px));bottom:92px;width:136px;padding:8px 10px;background:#fff;color:#111;border-radius:14px;font-weight:700;font-size:14px;text-align:center;opacity:0;animation:capin .4s forwards;animation-delay:calc(10.6s - var(--age))}
#rscene .say::after{content:'';position:absolute;right:20px;bottom:-8px;border:8px solid transparent;border-top-color:#fff;border-bottom:0}

/* komputer: mniej pustego miejsca u góry (telefon bez zmian) */
@media(min-width:900px){
  .view{padding:22px 32px 24px;gap:14px}
  .top h1{font-size:24px}.top{min-height:0}
  .side{padding:22px 14px}.side .brand{padding:0 10px 14px}
}
/* aplikacja Mac (Electron): wspólny układ przesunięty o 40 px w dół pod pasek okna; pasek 40 px służy do przeciągania */
#dragbar{position:fixed;top:0;left:0;right:0;height:40px;-webkit-app-region:drag;z-index:9999}
html.desk #app{margin-top:40px;height:calc(var(--vh,100dvh) - 40px)}
html.desk .side,html.desk .top,html.desk .tabbar,html.desk #dragbar{-webkit-user-select:none;user-select:none}
.side{scrollbar-width:none;-ms-overflow-style:none}.side::-webkit-scrollbar{display:none;width:0;height:0}
/* menu: logo na stałe u góry, lista pozycji przewija się pod nim w swoim obszarze (pasek niewidoczny), wyloguj na dole */
.side{overflow:hidden}.side .brand{flex:none}
.sidenav{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px;scrollbar-width:none;-ms-overflow-style:none}.sidenav::-webkit-scrollbar{display:none;width:0}
.sidenav a{flex:none}.sidelogout{flex:none;margin-top:6px}
/* komputer: kafelki rozmowy w proporcji 16:9, wideo bez rozciągania, układ nie rozlewa się na cały ekran (telefon bez zmian) */
@media(min-width:900px){
  .stage{max-width:1100px;width:100%;margin:0 auto}
  .grid{grid-template-columns:repeat(auto-fit,minmax(360px,1fr));justify-content:center}
  .grid:has(.tile:only-child){grid-template-columns:minmax(0,820px)}
  .tile{aspect-ratio:16/9}
  .tile video{object-fit:contain;background:#000}
  .stage.hot #hot-slot .tile{aspect-ratio:16/9;max-width:860px;max-height:none;margin:0 auto}
  .stage.hot .grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));max-height:none}
  .stage.hot .grid .tile{aspect-ratio:16/9}
}
/* komputer: kafelki rozmowy rosną razem z oknem (szerokość i wysokość okna), zawsze 16:9 */
@media(min-width:900px){
  .stage{max-width:none}
  .grid:has(.tile:only-child){grid-template-columns:minmax(0,1fr)}
  .grid:has(.tile:only-child) .tile{width:min(100%,calc((100vh - 250px) * 16 / 9));margin:0 auto}
  .stage.hot #hot-slot .tile{max-width:none;width:min(100%,calc((100vh - 360px) * 16 / 9))}
  .grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,clamp(300px,28vw,640px)),1fr))}
}
/* komputer: kafelki zawsze obok siebie (2 osoby = lewo i prawo), a przy większej liczbie ustawiają się w siatce */
@media(min-width:900px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch}
  .grid:has(.tile:nth-child(5)){grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid:has(.tile:nth-child(10)){grid-template-columns:repeat(4,minmax(0,1fr))}
  .grid:has(.tile:only-child){grid-template-columns:minmax(0,1fr)}
}
/* komputer: ekran rozmowy nie ma limitu szerokości (wcześniej 760 px), więc kafelki rosną razem z oknem */
@media(min-width:900px){.wrap:has(.stage){max-width:none}}

/* rozmowa: emoji i podniesiona ręka nie przesuwają układu, tylko unoszą się nad nim */
.tray{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(96px + var(--sb));z-index:60;max-width:94vw;box-shadow:0 8px 30px rgba(0,0,0,.6)}
.handbar{position:fixed;left:50%;transform:translateX(-50%);top:calc(var(--st) + 70px);z-index:60;max-width:94vw;background:var(--bg);box-shadow:0 8px 30px rgba(0,0,0,.6)}
html.desk .handbar{top:112px}
/* podpowiedź tylko dla Ciebie, gdy najedziesz na swój kafelek */
.tile .lgtip{display:none}
#tile-me:hover .lgtip{display:block;position:absolute;left:10px;bottom:38px;z-index:6;background:#000c;color:#fff;font-size:13px;font-weight:700;padding:4px 10px;border-radius:12px;pointer-events:none}

/* emoji pod paskiem przycisków: stałe miejsce na dole, żeby nic się nie przesuwało */
.ctl{padding-bottom:calc(60px + var(--sb))}
.tray{bottom:calc(8px + var(--sb));gap:2px;padding:6px}.tray button{width:38px;height:38px;font-size:23px}
/* v2: emoji tuż pod rzędem przycisków (w układzie, z zarezerwowanym miejscem, więc nic się nie przesuwa); podpowiedź w prawym górnym rogu */
.ctl{padding-bottom:6px;order:8}
.tray{position:static;transform:none;left:auto;bottom:auto;order:9;align-self:center;box-shadow:none;margin-bottom:calc(6px + var(--sb))}
.tray.hide{display:flex!important;visibility:hidden}
#tile-me:hover .lgtip{left:auto;bottom:auto;top:10px;right:10px}
#tile-me.muted:hover .lgtip{right:48px}
/* kamera wyłączona: zdjęcie profilowe (albo inicjały) zamiast przekreślonej kamery, a mała ikona kamery w rogu */
.tile.novid .av{display:flex}
.tile.novid .av.lg{width:clamp(72px,26%,220px);height:auto;aspect-ratio:1;font-size:clamp(24px,5vw,56px)}
.tile .cx{inset:auto;right:10px;bottom:8px;width:30px;height:30px;border-radius:15px;background:#000a;z-index:5}.tile .cx svg{width:18px;height:18px}
.tile.novid .cx{display:flex;color:#fff}

/* udostępniony ekran jako osobny kafelek (kamera zostaje), z przyciskiem powiększenia w lewym dolnym rogu */
.tile.screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;z-index:1}
.tile.screen .nm{top:8px;bottom:auto;left:10px}
.tile .pinb{position:absolute;left:8px;bottom:8px;z-index:6;width:34px;height:34px;border-radius:17px;background:#000b;color:#fff;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer}.tile .pinb svg{width:18px;height:18px}.tile .pinb.on{background:var(--acc);color:#000}
.grid .tile.pinned{grid-column:1/-1;order:-1}

/* udostępniony ekran = numer 1, przypięte osoby po prawej, reszta mniejsza pod spodem; przycisk w rogu = powiększ/pomniejsz (lokalnie) */
#scr-row{display:none}#scr-row.on{display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
#scr-slot,#pin-slot{display:flex;flex-direction:column;gap:8px;min-width:0}
#scr-slot:empty,#pin-slot:empty{display:none}
#scr-slot .tile,#pin-slot .tile{width:100%;aspect-ratio:16/9;margin:0;max-width:none}
#scr-row.has-pins:not(.has-screen) #pin-slot{flex-direction:row}#scr-row.has-pins:not(.has-screen) #pin-slot .tile{flex:1}
@media(min-width:900px){#scr-row.has-screen.has-pins{grid-template-columns:minmax(0,3fr) minmax(0,1fr)}#scr-row.has-screen #scr-slot .tile{max-height:calc(100vh - 330px);width:100%}}
.stage.big .grid,.stage.big .grid:has(.tile:nth-child(5)),.stage.big .grid:has(.tile:nth-child(10)),.stage.big .grid:has(.tile:only-child){grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.stage.big .grid .tile{width:auto;margin:0;aspect-ratio:16/9;max-height:none}
.pin-btn{position:absolute;top:8px;right:50px;z-index:5;width:34px;height:34px;border-radius:17px;background:#000a;border:0;display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;opacity:.55}.tile.ispin .pin-btn,.tile:hover .pin-btn{opacity:1}.tile.ispin .pin-btn{background:var(--acc)}
.tile.zoomed{position:fixed!important;inset:56px 0 92px 0;z-index:49;width:auto!important;height:auto!important;aspect-ratio:auto!important;max-width:none!important;max-height:none!important;border-radius:0;margin:0!important;background:#000}
html.desk .tile.zoomed{top:50px}

/* rakieta v3: niższy lot, najazd kamery na rakietę i odjazd przy lądowaniu, kosmici obok rakiety, spadające gwiazdy po lądowaniu */
@keyframes rfly{0%,14%{bottom:6vh;transform:scale(1)}40%{bottom:34vh;transform:scale(1.35)}58%{bottom:52vh;transform:scale(1.5)}72%{bottom:48vh;transform:scale(1.4)}100%{bottom:calc(var(--mw) * .35 - 82px);transform:scale(.85)}}
#rscene .al{width:46px;height:54px}
#rscene .a1{left:calc(50% - 175px)}#rscene .a2{left:calc(50% - 122px)}#rscene .a3{left:calc(50% + 80px);bottom:-6px}
#rscene .say{left:max(6px,calc(50% - 195px));width:120px;font-size:13px}
#rscene .shoot{position:absolute;top:var(--t);left:var(--l);width:120px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#fff 70%,#fff);box-shadow:0 0 8px #fff;opacity:0;transform:rotate(25deg);animation:shoot 4.6s linear infinite;animation-delay:calc(var(--d) - var(--age))}
@keyframes shoot{0%{opacity:0;transform:translate(0,0) rotate(25deg)}4%{opacity:1}22%{opacity:0;transform:translate(300px,140px) rotate(25deg)}100%{opacity:0;transform:translate(300px,140px) rotate(25deg)}}

/* przypomnienie o profilu: widoczna karta na górze strony startowej i kropka przy Profilu w menu */
.profban{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:18px;border:1px solid var(--acc);background:linear-gradient(135deg,#2a2312,var(--card))}
.profban .btn{align-self:flex-start}.pbar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}.pbar i{display:block;height:100%;background:var(--acc)}
.pdot{width:9px;height:9px;border-radius:50%;background:var(--acc);margin-left:auto;flex:none}.tabbar a{position:relative}.tabbar .pdot{position:absolute;top:6px;right:calc(50% - 16px);margin:0}

/* menu: Profil i Wyloguj na dole, w osobnych ramkach */
.sidebottom{flex:none;display:flex;flex-direction:column;gap:8px;margin-top:8px;padding-top:10px;border-top:1px solid var(--line)}
.side .sideprof{border:1px solid var(--line);border-radius:12px;padding:10px 12px;color:var(--w)}.side .sideprof.on{border-color:var(--acc);background:var(--card)}.side .sideprof:hover{border-color:#555}
.side .sidelogout{margin:0;border:1px solid #2a2a2a;border-radius:12px;padding:10px 12px;background:#1d1d1d;color:#bdbdbd;justify-content:center;font-weight:600}.side .sidelogout:hover{background:#262626;color:#fff}
/* bardzo delikatny gradient tła na każdej stronie (ledwo widoczny, ciepły złoty odcień w rogu) i na kartach */
.main{background:linear-gradient(155deg,#12100a 0%,#0b0a08 38%,#0a0a0a 62%,#0c0b09 100%)}
.card:not(.white):not(.hs){background:linear-gradient(145deg,#1b1913 0%,#171717 55%,#161616 100%)}
.side{background:linear-gradient(180deg,#0d0c09,#0a0a0a)}
/* gradient v2: bez przejść między prawie identycznymi kolorami (to dawało pasy i migotanie na niektórych monitorach). Teraz: statyczna, półprzezroczysta poświata + delikatny szum, który rozbija pasy na każdym monitorze */
.main{background:none}.card:not(.white):not(.hs){background:var(--card)}.side{background:none}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(900px 620px at 0% 0%,rgba(224,177,90,.05),transparent 70%),radial-gradient(760px 560px at 100% 100%,rgba(224,177,90,.03),transparent 70%)}
body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#app{position:relative;z-index:1}
.side .livepill .avstack .av.more{width:22px;height:22px;font-size:9px;margin-left:-7px}
.side a.islive,.side a.islive span,.tabbar a.islive,.tabbar a.islive span{color:#ff4d4d!important;font-weight:700}
.side a.islive svg,.tabbar a.islive svg{color:#ff4d4d}

/* rozmowa live jako osobne okno: na stronie Live pełne, na innych stronach małe podglądowe w rogu z przyciskami */
#callhost{position:fixed;z-index:30;background:var(--bg);overflow:auto}
#callhost.full{top:0;left:0;right:0;bottom:calc(64px + var(--sb))}
@media(min-width:900px){#callhost.full{left:240px;bottom:0}}
html.desk #callhost.full{top:40px}
#callhost .minibar{display:none}
#callhost.mini{right:16px;bottom:16px;left:auto;top:auto;width:340px;max-height:70vh;padding:8px;border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 40px #000c;z-index:45;gap:6px}
@media(max-width:899px){#callhost.mini{bottom:calc(76px + var(--sb));right:8px;width:min(88vw,320px)}}
#callhost.mini .minibar{display:flex;align-items:center;gap:8px;justify-content:space-between}#callhost.mini .minibar b{flex:1;font-size:13px}
#callhost.mini .top,#callhost.mini .hotbar,#callhost.mini .handbar,#callhost.mini .tray,#callhost.mini .reacts,#callhost.mini #rscene,#callhost.mini .pinb,#callhost.mini .pin-btn,#callhost.mini .hot-btn,#callhost.mini #b-react,#callhost.mini #b-hand{display:none!important}
#callhost.mini .wrap,#callhost.mini .stage{max-width:none;width:100%;gap:6px}
#callhost.mini .grid,#callhost.mini .stage.big .grid,#callhost.mini .grid:has(.tile:nth-child(5)),#callhost.mini .grid:has(.tile:only-child),#callhost.mini .stage.hot .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-height:none}
#callhost.mini .tile,#callhost.mini .stage.big .grid .tile{aspect-ratio:16/9!important;width:auto!important;max-height:none!important;margin:0!important}
#callhost.mini #scr-row.on{grid-template-columns:minmax(0,1fr)!important}
#callhost.mini #scr-slot .tile,#callhost.mini #pin-slot .tile,#callhost.mini #hot-slot .tile{width:100%!important;max-width:none!important}
#callhost.mini .ctl{padding:2px 0;gap:8px}#callhost.mini .ctl .circ{width:40px;height:40px;border-radius:20px}
#callhost.mini .tile .nm{font-size:10px;left:6px;bottom:4px}#callhost.mini .av.lg{width:36px;height:36px;font-size:12px}
#callhost.mini .grid:has(.tile:only-child){grid-template-columns:minmax(0,1fr)!important}

/* okienko poza aplikacją (Mac): małe okno zawsze na wierzchu w lewym dolnym rogu ekranu */
html.minimode #app{display:none}
html.minimode #callhost,html.minimode #callhost.mini{position:fixed;left:0;right:0;bottom:0;top:40px;width:auto;max-height:none;border:0;border-radius:0;box-shadow:none;padding:6px;overflow:auto}
html.minimode #callhost .minibar [data-outside]{display:none}
#callhost .top [data-outside]{white-space:nowrap}

/* okienko Picture-in-Picture: rozmowa wypełnia małe okno na wierzchu */
html.pipdoc #callhost,html.pipdoc #callhost.mini{position:fixed;inset:0;width:auto;max-height:none;border:0;border-radius:0;box-shadow:none;padding:6px;overflow:auto;background:#0A0A0A}
html.pipdoc #callhost .minibar [data-outside]{display:none}
html.pipdoc body::before,html.pipdoc body::after{display:none}

/* czat v2: awatary i grupowanie wiadomości, pasek akcji po najechaniu, czytelniejsze menu wiadomości, cytaty, przycisk "na dół" */
.chat .log{padding:16px 16px 16px 16px;gap:10px}
.msg.hasav{margin-left:36px}.msg .mav{position:absolute;left:-36px;top:0}.msg .mav .av{width:28px;height:28px;font-size:11px}
.msg.cont{margin-top:-7px}.msg:not(.me).cont{border-top-left-radius:6px}.msg.me.cont{border-top-right-radius:6px}
.msg:not(.me):not(.ann):not(.hasav):not(.big){margin-left:0}
.log.grp .msg:not(.me):not(.ann).cont:not(.hasav){margin-left:36px}
.msg{box-shadow:0 1px 0 rgba(0,0,0,.25)}
.msg .who{font-size:12px;margin-bottom:3px}
.msg .mact{position:absolute;top:-16px;display:none;gap:2px;padding:3px;border-radius:16px;background:#1d1d1d;border:1px solid var(--line);box-shadow:0 4px 14px #000a;z-index:5}.msg:not(.me) .mact{right:10px}.msg.me .mact{left:10px}
.msg .mact button{width:30px;height:28px;border-radius:14px;font-size:15px;color:var(--w)}.msg .mact button:hover{background:var(--line)}
@media(hover:hover){.msg:hover .mact{display:flex}}
.msg.big .mact,.msg.ann .mact{top:-16px}
.msg .quote{background:rgba(255,255,255,.06);border-left:3px solid var(--acc);border-radius:8px;padding:5px 9px;max-width:100%;margin-bottom:6px}.msg.me .quote{background:rgba(0,0,0,.12);border-left-color:#0A0A0A}
.rpick .ract{display:flex;flex-direction:column;gap:2px;margin-top:6px;padding-top:6px;border-top:1px solid var(--line);min-width:190px}
.rpick .ract button{width:100%;height:38px;justify-content:flex-start;text-align:left;display:flex;align-items:center;gap:10px;padding:0 14px;border-radius:12px;background:transparent;font-size:15px;font-weight:600}.rpick .ract button:hover{background:#2a2a2a}.rpick .ract button span{width:20px;text-align:center}.rpick .ract button[data-a=del]{color:#ff8a80}
.chat{position:relative}.tobottom{position:absolute;right:16px;bottom:84px;width:42px;height:42px;border-radius:21px;background:var(--card);border:1px solid var(--line);color:var(--w);font-size:22px;line-height:1;box-shadow:0 6px 20px #000a;z-index:6}.tobottom.hide{display:none}.tobottom[data-n]:not([data-n=""])::after{content:attr(data-n);position:absolute;top:-6px;right:-4px;min-width:20px;height:20px;border-radius:10px;background:var(--acc);color:#000;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px}
.composer{padding:10px 12px;background:var(--bg)}.composer textarea{background:var(--card);border:1px solid var(--line)}

/* czat v3: reakcje przypięte do wiadomości (lewy dolny róg), ukryte paski przewijania, mniejsze zdjęcia, nowy odtwarzacz wiadomości głosowych */
.msg .rx{position:absolute;left:8px;bottom:-15px;margin:0;gap:3px;z-index:2}
.msg:has(.rx){margin-bottom:16px}
.msg .rxc{height:24px;padding:0 8px;font-size:12px;background:#1d1d1d;border:1px solid var(--line);color:var(--w);box-shadow:0 2px 6px #0008}.msg.me .rxc{background:#1d1d1d;color:var(--w);border-color:var(--line)}.msg .rxc.mine{border-color:var(--acc)}
.chat .log,.chat{scrollbar-width:none;-ms-overflow-style:none;overflow-x:hidden}.chat .log::-webkit-scrollbar,.chat::-webkit-scrollbar{display:none;width:0;height:0}
.msg{overflow-wrap:anywhere;word-break:break-word}.chat .log{overflow-x:hidden}
.msg img{max-width:min(240px,100%);max-height:240px;width:auto;height:auto;object-fit:cover;border-radius:12px}
@media(hover:none){.msg{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}}
.vn{display:flex;align-items:center;gap:10px;min-width:210px;padding:2px 0}
.vnb{flex:none;width:36px;height:36px;border-radius:18px;background:#fff;color:#0A0A0A;font-size:13px;display:flex;align-items:center;justify-content:center;border:0;padding:0 0 0 2px}.vn.playing .vnb{padding:0}
.msg.me .vnb{background:#0A0A0A;color:var(--acc)}
.vnw{flex:1;display:flex;align-items:center;gap:2px;height:30px}.vnw i{flex:1;min-width:2px;border-radius:2px;background:rgba(255,255,255,.28)}.vnw i.on{background:var(--acc)}
.msg.me .vnw i{background:rgba(0,0,0,.28)}.msg.me .vnw i.on{background:#0A0A0A}
.vnt{flex:none;font-size:12px;font-variant-numeric:tabular-nums;color:var(--mut);min-width:30px;text-align:right}.msg.me .vnt{color:#5a4515}
.msg:has(.rx)+.msg.cont{margin-top:6px}

/* online = zielona kropka, offline = brak kropki; liczba dni w klubie jako ładna karta */
.av.on::after{background:#2ecc71!important;box-shadow:0 0 0 2px var(--bg)}

/* dni w klubie: premium karta z medalionem i rangą; trofea */
.daysbox{display:flex;align-items:center;gap:16px;width:100%;padding:16px 18px;border-radius:22px;text-align:left;border:1px solid rgba(224,177,90,.55);background:radial-gradient(120% 140% at 0% 0%,rgba(224,177,90,.22),transparent 55%),linear-gradient(145deg,#1d1a12,#141414);box-shadow:0 10px 30px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06)}
.dmed{flex:none;width:92px;height:92px;border-radius:50%;padding:5px;background:conic-gradient(var(--acc) calc(var(--p) * 1%),#2b2924 0);display:grid;place-items:center;box-shadow:0 0 24px rgba(224,177,90,.25)}
.dmi{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2a2415,#0f0f0f);display:flex;flex-direction:column;align-items:center;justify-content:center}
.dmi b{font:700 30px/1 'Space Grotesk',sans-serif;color:var(--acc)}.dmi span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-top:2px}
.daysbox .dl{min-width:0;display:flex;flex-direction:column;gap:3px}.dcap{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.dtier{font:700 22px/1.15 'Space Grotesk',sans-serif;background:linear-gradient(90deg,#f5d98f,#e0b15a 55%,#b98a35);-webkit-background-clip:text;background-clip:text;color:transparent}
.dnext{font-size:13px;color:var(--mut)}
.trgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-top:8px}
.troph{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:12px 8px;border-radius:16px;border:1px solid var(--line);background:#121212}
.troph .ti{font-size:30px;filter:grayscale(1);opacity:.35}.troph .tn{font-size:13px;font-weight:700;color:var(--mut)}.troph .td{font-size:11px;color:var(--dim)}
.troph.got{border-color:rgba(224,177,90,.6);background:linear-gradient(160deg,#241f13,#141414)}.troph.got .ti{filter:none;opacity:1}.troph.got .tn{color:var(--w)}.troph.got .td{color:var(--mut)}
.tp{width:70%;height:4px;border-radius:2px;background:var(--line);overflow:hidden}.tp i{display:block;height:100%;background:var(--acc)}

/* trofea jako rozwijane pudełko: tytuł, 1-3 ostatnie trofea po prawej i strzałka */
.trbox{padding:0;overflow:hidden}
.trhead{width:100%;display:flex;align-items:center;gap:12px;padding:16px 18px;background:none;border:0;color:var(--w);cursor:pointer;text-align:left}
.trtop{display:flex;gap:2px}.trmini{width:34px;height:34px;border-radius:17px;background:linear-gradient(145deg,#2a2415,#151515);border:1px solid rgba(224,177,90,.55);display:flex;align-items:center;justify-content:center;font-size:18px;margin-left:-8px;box-shadow:0 2px 8px #0009}.trmini:first-child{margin-left:0}
.trchev{width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--mut);transition:transform .2s}.trchev svg{width:20px;height:20px}.trbox.open .trchev{transform:rotate(180deg)}
.trbox .trgrid{padding:0 18px 18px;margin:0}

/* wywiady: nagrania i notatki jako pełne, czytelne karty z wyraźnym przyciskiem */
.rcard{display:flex;flex-direction:column;align-items:stretch;gap:12px;width:100%;padding:16px 18px;border-radius:20px;background:linear-gradient(150deg,#1b1913,#151515);border:1px solid var(--line);transition:border-color .15s,transform .1s}
.rcard:hover{border-color:rgba(224,177,90,.6)}.rcard:active{transform:scale(.995)}
.rcard .rtop{display:flex;align-items:center;gap:14px}.rcard .rtitle{font:700 18px/1.25 'Space Grotesk',sans-serif;margin:2px 0}
.rcard .rdesc{font-size:14px;line-height:1.5;color:#cfcfcf}.rcard .rdesc.mut{color:var(--mut)}
.rcard .rfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid var(--line)}
.rcta{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:99px;font-weight:700;font-size:14px;background:var(--acc);color:#0A0A0A}
.rcard.rvid .rcta{background:#fff}
.stackc .rcard{align-self:stretch}
.rcard,.rcard *{cursor:pointer;-webkit-user-select:none;user-select:none}.item[data-play],.item[data-p],.item[data-pe],a[data-play]{cursor:pointer}

/* biblioteka: karty z miniaturami (wideo, zdjęcie, YouTube albo ikona typu) */
.libgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.lcard{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:linear-gradient(150deg,#1b1913,#151515);border:1px solid var(--line);cursor:pointer;transition:border-color .15s,transform .1s}
.lcard,.lcard *{cursor:pointer;-webkit-user-select:none;user-select:none}.lcard:hover{border-color:rgba(224,177,90,.6)}.lcard:active{transform:scale(.99)}
.lth{position:relative;aspect-ratio:16/9;background:#101010;overflow:hidden;display:flex;align-items:center;justify-content:center}
.lth img,.lth video{width:100%;height:100%;object-fit:cover;display:block}
.lth.ph{background:linear-gradient(135deg,#2a2415,#141414)}.lth.ph.recording{background:linear-gradient(135deg,#232323,#0f0f0f)}.lth.ph.template{background:linear-gradient(135deg,#1c2430,#121212)}
.lico{font-size:46px;opacity:.9}
.lplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:24px;background:rgba(255,255,255,.92);color:#0A0A0A;display:flex;align-items:center;justify-content:center;font-size:16px;padding-left:3px;box-shadow:0 4px 18px #000a}
.lbadge{position:absolute;left:10px;top:10px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:99px;background:rgba(0,0,0,.65);color:var(--acc);border:1px solid rgba(224,177,90,.5)}
.lbody{display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px;flex:1}
.ltitle{font:700 16px/1.25 'Space Grotesk',sans-serif}.ldesc{font-size:13px;color:#cfcfcf;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lmeta{font-size:12px;color:var(--mut)}.lcta{align-self:flex-start;margin-top:auto;padding:7px 14px;border-radius:99px;background:var(--acc);color:#0A0A0A;font-weight:700;font-size:13px}
.side a.brand{color:var(--w);cursor:pointer;border-radius:12px}.side a.brand:hover{background:transparent;color:var(--acc)}
.side a.brand,.side a.brand *{transition:color .15s}
.side a.brand{color:var(--w)!important;outline:none}
.side a.brand:hover,.side a.brand:active{color:var(--acc)!important;background:transparent!important}
.side a.brand:active{transform:scale(.98)}
/* logo i napis w menu: zawsze białe, bez żadnej zmiany koloru */
.side a.brand,.side a.brand:hover,.side a.brand:active,.side a.brand:focus,.side a.brand:focus-visible,.side a.brand *{color:var(--w)!important;background:transparent!important;transform:none!important;outline:none}
.lth img{background:#101010}
.rcard .rico{display:none}.rcard .rsm{width:124px;flex:none;border-radius:12px;aspect-ratio:16/9}.rcard .rsm .lplay{width:30px;height:30px;font-size:11px;padding-left:2px}.rcard .rsm .lico{font-size:28px}
.lbadge.lwarn{left:auto;right:6px;top:auto;bottom:6px;color:#ffb199;border-color:#ffb19966;font-size:9px;text-transform:none;letter-spacing:0}
.kick-btn{position:absolute;top:8px;right:92px;z-index:5;width:34px;height:34px;border-radius:17px;background:#000a;border:0;display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;opacity:.55}.tile:hover .kick-btn{opacity:1}#callhost.mini .kick-btn{display:none!important}

/* kafelek rozmowy (admin): trzy kropki w lewym górnym rogu z menu; ikona wyciszenia w prawym dolnym rogu */
.tile .tdots{position:absolute;top:8px;left:8px;z-index:7;width:34px;height:34px;border-radius:17px;background:#000b;border:0;color:#fff;font-size:18px;line-height:1;display:none;align-items:center;justify-content:center;cursor:pointer}
.tile:hover .tdots,.tile .tmenu.open~.x,.tile .tdots:focus{display:flex}
@media(hover:none){.tile .tdots{display:flex}}
.tile .tmenu{position:absolute;top:46px;left:8px;z-index:8;display:none;flex-direction:column;min-width:190px;padding:5px;border-radius:14px;background:#1d1d1d;border:1px solid var(--line);box-shadow:0 8px 26px #000b}
.tile .tmenu.open{display:flex}.tile:has(.tmenu.open) .tdots{display:flex}
.tile .tmenu button{display:flex;align-items:center;gap:8px;width:100%;height:36px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:var(--w);font-size:14px;font-weight:600;text-align:left;cursor:pointer}.tile .tmenu button:hover{background:#2a2a2a}.tile .tmenu button.danger{color:#ff8a80}
.tile .hot-btn,.tile .pin-btn,.tile .kick-btn{display:none!important}
#callhost.adm .tile.hand::after{left:50px}#callhost.adm .tile .st{left:50px}
#callhost.mini .tdots,#callhost.mini .tmenu{display:none!important}
#rscene .rwin .tile .tdots,#rscene .rwin .tile .tmenu{display:none!important}
.tile .mi{top:auto;bottom:8px;right:8px}
.tile.muted .cx{right:48px}

/* v3 rozmowy: okienko w prawym dolnym rogu, podpowiedź zawsze przy prawym górnym rogu kafelka, ręka zawsze w lewym górnym rogu, komunikat o ręce na środku góry */
.pipbtn{position:absolute;right:16px;bottom:16px;z-index:20}
#callhost.mini .pipbtn,html.pipdoc .pipbtn,html.minimode .pipbtn{display:none}
#tile-me:hover .lgtip{display:block!important;position:absolute!important;left:auto!important;bottom:auto!important;top:8px!important;right:8px!important;z-index:9}
#tile-me.muted:hover .lgtip{right:8px!important}
#callhost.adm .tile.hand::after{left:8px}#callhost.adm .tile .st{left:10px}
.tile.hand .tdots{left:50px}.tile.hand .tmenu{left:50px}
.handbar{left:50%;top:calc(var(--st) + 16px)}
@media(min-width:900px){.handbar{left:calc(50% + 120px)}}
html.desk .handbar{top:52px}
/* trzy kropki i ręka: spokojna animacja. Bez myszki na kafelku ręka jest w rogu; po najechaniu kropki łagodnie się pojawiają, a ręka przesuwa się obok */
.tile .tdots{display:flex!important;opacity:0;transform:translateX(-8px);pointer-events:none;transition:opacity .45s ease,transform .45s ease}
.tile:hover .tdots,.tile:has(.tmenu.open) .tdots,.tile .tdots:focus{opacity:1;transform:none;pointer-events:auto}
.tile.hand .tdots,.tile.hand .tmenu{left:8px}
.tile.hand::after{transition:left .45s ease}
#callhost.adm .tile.hand:hover::after,#callhost.adm .tile.hand:has(.tmenu.open)::after{left:50px}
.tile .tmenu{left:8px}
@media(hover:none){.tile .tdots{opacity:1;transform:none;pointer-events:auto}#callhost.adm .tile.hand::after{left:50px}}

/* tryb mówcy (ciemnoniebieski przycisk nad okienkiem), duży kafelek mówcy, ogień gorącego krzesła */
.spkbtn{position:absolute;right:16px;bottom:60px;z-index:20;background:#12306b!important;color:#fff!important;border:1px solid #2a4f9e!important}.spkbtn.on{background:#1d4ed8!important;box-shadow:0 0 0 3px rgba(122,162,255,.35)}
#callhost.mini .spkbtn,html.pipdoc .spkbtn,html.minimode .spkbtn{display:none}
#scr-row.has-speaker #scr-slot .tile{max-height:calc(100vh - 330px);margin:0 auto}
@media(min-width:900px){#scr-row.has-speaker{grid-template-columns:minmax(0,1fr)}}
#hotfx{position:fixed;inset:0;z-index:150;pointer-events:none;overflow:hidden;animation:hfin .3s ease both}
#hotfx.out{animation:hfout .8s ease forwards}@keyframes hfin{from{opacity:0}to{opacity:1}}@keyframes hfout{to{opacity:0}}
#hotfx .hf-glow{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 110%,rgba(255,110,10,.85),rgba(255,60,0,.45) 40%,rgba(120,10,0,.25) 70%,transparent);animation:hfpulse .5s ease-in-out infinite alternate}
@keyframes hfpulse{from{opacity:.75}to{opacity:1}}
#hotfx .hf-flames i{position:absolute;bottom:-12vh;left:var(--x);width:var(--w);height:var(--h);border-radius:50% 50% 40% 40%/80% 80% 20% 20%;background:linear-gradient(0deg,#ff3d00,#ff9800 45%,#ffe082 80%,transparent);filter:blur(5px);transform-origin:bottom;animation:hfrise 1.9s var(--d) ease-out both,hfflick .18s var(--d) ease-in-out infinite alternate}
@keyframes hfrise{0%{transform:translateY(40%) scaleY(.2);opacity:0}25%{opacity:1}70%{transform:translateY(-6%) scaleY(1)}100%{transform:translateY(0) scaleY(1.05);opacity:.9}}
@keyframes hfflick{to{margin-left:-8px;filter:blur(7px) brightness(1.2)}}
#hotfx .hf-embers b{position:absolute;bottom:-10px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;background:#ffb347;box-shadow:0 0 10px 2px #ff7a1a;animation:hfember 2.4s var(--d) ease-in both}
@keyframes hfember{0%{transform:translate(0,0);opacity:0}15%{opacity:1}100%{transform:translate(40px,-95vh);opacity:0}}
#hotfx .hf-blast{position:absolute;width:0;height:0}
#hotfx .hf-blast u{position:absolute;left:0;top:0;width:60px;height:60px;margin:-30px;border-radius:50%;background:radial-gradient(circle,#fff,#ffd54f 35%,#ff6d00 65%,transparent 72%);animation:hfboom .9s ease-out both}
#hotfx .hf-blast u+u{animation-delay:.12s;background:radial-gradient(circle,transparent 55%,#ff9100 62%,transparent 72%)}
@keyframes hfboom{from{transform:scale(.3);opacity:1}to{transform:scale(11);opacity:0}}
#hotfx .hf-blast s{position:absolute;left:0;top:0;width:var(--z);height:var(--z);margin:calc(var(--z) / -2);border-radius:50%;background:#ffd54f;box-shadow:0 0 12px 3px #ff6d00;animation:hfspark .95s var(--d) cubic-bezier(.1,.7,.3,1) both}
@keyframes hfspark{from{transform:rotate(var(--a)) translateX(0);opacity:1}to{transform:rotate(var(--a)) translateX(var(--r));opacity:0}}
.spkbtn,.pipbtn{z-index:60!important}
/* mówiący: złota ramka z miękką poświatą (gradient) */
.tile{transition:box-shadow .18s ease,border-color .18s ease}
.tile.speaking:not(.fire){border-color:#e0b15a;border-width:2px;box-shadow:0 0 0 1px rgba(224,177,90,.95),0 0 10px 2px rgba(224,177,90,.55),0 0 22px 6px rgba(224,177,90,.28),0 0 40px 12px rgba(224,177,90,.12)}
/* tryb mówcy: na środku, trochę wyżej; złota poświata pojawia się i znika powoli */
.spkbtn{right:auto!important;left:50%!important;transform:translateX(-50%);bottom:92px!important}
.tile{transition:box-shadow 1.1s ease,border-color 1.1s ease}
.tile.speaking:not(.fire){transition:box-shadow .7s ease .15s,border-color .7s ease .15s}

/* v2: złota ramka mówiącego pojawia się powoli, ale nie znika przy krótkich przerwach w mowie; przyciski po prawej jeden nad drugim */
.tile.speaking:not(.fire){transition:box-shadow .5s ease,border-color .5s ease}
.spkbtn{left:auto!important;right:16px!important;transform:none!important;bottom:92px!important}

.spkbtn{bottom:71px!important}

/* menu urządzeń przy przyciskach mikrofonu i kamery */
.cbwrap{position:relative;display:inline-flex}
.cbarrow{position:absolute;right:-7px;top:-7px;z-index:6;width:22px;height:22px;border-radius:11px;background:#262626;color:#fff;border:1px solid var(--line);font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;cursor:pointer;padding:0}
.cbwrap:hover .cbarrow,.cbwrap:focus-within .cbarrow{opacity:1;pointer-events:auto}
@media(hover:none){.cbarrow{opacity:1;pointer-events:auto}}
.devmenu{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);z-index:70;width:300px;max-height:60vh;overflow:auto;padding:10px;border-radius:16px;background:#1d1d1d;border:1px solid var(--line);box-shadow:0 12px 40px #000c;display:flex;flex-direction:column;gap:6px;text-align:left;scrollbar-width:none}
.devmenu.hide{display:none!important}.devmenu::-webkit-scrollbar{display:none}
.dmt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-top:4px}.dmn{font-size:13px;color:var(--mut)}
.dmi,.dmb{width:100%;text-align:left;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:#151515;color:var(--w);font-size:13px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dmi.on{border-color:var(--acc);background:#241f13}.dmb{background:var(--acc);color:#0A0A0A;font-weight:700;text-align:center;border:0}
.dmchips{display:flex;flex-wrap:wrap;gap:6px}.dmc{padding:6px 11px;border-radius:99px;border:1px solid var(--line);background:#151515;color:var(--w);font-size:12px;cursor:pointer}.dmc.on{border-color:var(--acc);background:#241f13;color:var(--acc)}
.devmenu input[type=range]{width:100%;accent-color:var(--acc)}
.meter{padding:8px;border-radius:10px;background:#101010;border:1px solid var(--line)}.meter.hide{display:none}.mbars{display:flex;gap:3px;align-items:flex-end;height:30px}.mbars i{flex:1;height:100%;border-radius:2px;background:#2a2a2a;transition:background .08s}.mbars i.on{background:var(--acc)}.mbars i:nth-child(n+13).on{background:#ff7a4a}
.mlab{font-size:12px;color:var(--mut);margin-top:6px}
#callhost.mini .cbarrow,#callhost.mini .devmenu,html.pipdoc .cbarrow{display:none!important}

/* większe, wyraźniejsze strzałki; mikrofon odsuwa się, gdy otwarte są ustawienia kamery */
.cbarrow{width:30px!important;height:30px!important;right:-13px!important;top:-13px!important;border-radius:15px!important;font-size:19px!important;font-weight:700;background:var(--acc)!important;color:#0A0A0A!important;border:0!important;box-shadow:0 3px 10px #000b!important;opacity:0;transition:opacity .2s,transform .15s}
.cbwrap:hover .cbarrow,.cbarrow.open{opacity:1;pointer-events:auto}.cbarrow:hover{transform:scale(1.12)}.cbarrow.open{transform:rotate(180deg)}
.cbwrap.shifted{transform:translateX(-46px)}

/* gorące krzesło v2: długa zapowiedź (ok. 7 s): ciemność, ogień ze wszystkich stron, tytuł, imię, wybuch i pojawienie się kamery */
#hotfx .hf-dark{position:absolute;inset:0;background:radial-gradient(90% 80% at 50% 50%,rgba(0,0,0,.2),rgba(0,0,0,.82));animation:hfdark 6.5s ease both}
@keyframes hfdark{0%{opacity:0}12%{opacity:1}75%{opacity:1}100%{opacity:.25}}
#hotfx .hf-glow{background:radial-gradient(120% 90% at 50% 110%,rgba(255,110,10,.9),rgba(255,60,0,.5) 40%,rgba(120,10,0,.3) 70%,transparent),radial-gradient(60% 40% at 0% 50%,rgba(255,90,0,.45),transparent),radial-gradient(60% 40% at 100% 50%,rgba(255,90,0,.45),transparent)}
#hotfx .hf-flames{position:absolute;inset:0}
#hotfx .hf-flames.l i,#hotfx .hf-flames.r i{bottom:auto;top:var(--x);height:var(--w);width:var(--h);margin:0;border-radius:40% 80% 80% 40%/50% 50% 50% 50%;transform-origin:left;animation:hfriseX 2.2s var(--d) ease-out both,hfflick .18s var(--d) ease-in-out infinite alternate}
#hotfx .hf-flames.l i{left:-20px;background:linear-gradient(90deg,#ff3d00,#ff9800 45%,#ffe082 80%,transparent)}
#hotfx .hf-flames.r i{left:auto;right:-20px;transform-origin:right;border-radius:80% 40% 40% 80%/50% 50% 50% 50%;background:linear-gradient(270deg,#ff3d00,#ff9800 45%,#ffe082 80%,transparent);animation-name:hfriseXr,hfflick}
@keyframes hfriseX{0%{transform:translateX(-45%) scaleX(.2);opacity:0}25%{opacity:1}100%{transform:translateX(0) scaleX(1);opacity:.9}}
@keyframes hfriseXr{0%{transform:translateX(45%) scaleX(.2);opacity:0}25%{opacity:1}100%{transform:translateX(0) scaleX(1);opacity:.9}}
#hotfx .hf-flames.t i{bottom:auto;top:-10px;left:var(--x);height:var(--h);width:var(--w);border-radius:40% 40% 50% 50%/20% 20% 80% 80%;transform-origin:top;background:linear-gradient(180deg,#ff3d00,#ff9800 45%,#ffd54f 80%,transparent);animation:hfdrop 2.4s var(--d) ease-out both,hfflick .2s var(--d) ease-in-out infinite alternate}
@keyframes hfdrop{0%{transform:scaleY(.1);opacity:0}30%{opacity:1}100%{transform:scaleY(1);opacity:.85}}
#hotfx .hf-flames.b i{animation-duration:2.2s,.18s}
#hotfx .hf-embers b{animation-duration:3.6s;margin-left:0}
@keyframes hfember{0%{transform:translate(0,0);opacity:0}15%{opacity:1}100%{transform:translate(var(--dx,40px),-100vh);opacity:0}}
#hotfx .hf-title{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;padding:0 16px;pointer-events:none}
#hotfx .t1{font:800 clamp(26px,6vw,64px)/1.05 'Space Grotesk',sans-serif;letter-spacing:.04em;background:linear-gradient(180deg,#fff7c2,#ffb347 45%,#ff5a1a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgba(255,110,10,.9));opacity:0;animation:hft1 5.2s 1.1s ease both}
@keyframes hft1{0%{opacity:0;transform:scale(.4) translateY(40px)}12%{opacity:1;transform:scale(1.12)}20%{transform:scale(1)}78%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.25) translateY(-30px)}}
#hotfx .t2{font:800 clamp(34px,9vw,110px)/1 'Space Grotesk',sans-serif;margin-top:10px;color:#fff;text-shadow:0 0 30px #ff7a1a,0 0 60px #ff3d00;text-transform:uppercase;opacity:0;animation:hft2 3.6s 2.5s ease both}
@keyframes hft2{0%{opacity:0;transform:scale(2.4);filter:blur(12px)}14%{opacity:1;transform:scale(1);filter:blur(0)}22%{transform:scale(1.07)}30%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:scale(.9)}}
#hotfx.boom::after{content:'';position:absolute;inset:0;background:#fff;animation:hfflash .7s ease-out both}
@keyframes hfflash{0%{opacity:.95}100%{opacity:0}}
#hotfx .hf-blast u+u+u{animation-delay:.25s;background:radial-gradient(circle,transparent 58%,#ffd54f 64%,transparent 74%)}
#hotfx.out{animation:hfout 1s ease forwards}
#hotfx .t1,#hotfx .t2{text-shadow:0 2px 18px rgba(0,0,0,.85)}#hotfx .t2{text-shadow:0 0 30px #ff7a1a,0 4px 24px rgba(0,0,0,.9)}#hotfx .hf-flames{opacity:.88}

/* ustawienia kamery/mikrofonu: strzałka jako osobny przycisk po LEWEJ stronie (poza kółkiem); kreskówkowy bieg mikrofonu i dym */
.cbwrap{align-items:center;gap:3px}
.cbarrow{position:static!important;width:24px!important;height:40px!important;margin:0!important;border-radius:14px 5px 5px 14px!important;background:#242424!important;color:var(--acc)!important;border:1px solid var(--line)!important;font-size:17px!important;opacity:1!important;pointer-events:auto!important;box-shadow:none!important;transform:none!important;flex:none;order:-1}
.cbarrow:hover,.cbarrow.open{background:var(--acc)!important;color:#0A0A0A!important}.cbarrow.open{transform:none!important}
.cbarrow.open{font-weight:700}
/* przygotowanie do biegu: najechanie na strzałkę kamery, mikrofon odchyla się, a w prawym dolnym rogu kręci się dym */
.micwrap{transition:transform .35s cubic-bezier(.3,0,.2,1)}
.ctl:has(.camwrap .cbarrow:hover) .micwrap:not(.shifted){transform:translateX(5px) rotate(-17deg)}
.micwrap::after{content:'';position:absolute;right:-4px;bottom:-4px;width:9px;height:9px;border-radius:50%;background:#e8e8e8;box-shadow:13px 1px 0 -1px #cfcfcf,-12px 5px 0 -2px #bdbdbd,2px 13px 0 -1px #d8d8d8;opacity:0;pointer-events:none;transform-origin:center;filter:blur(.6px)}
.ctl:has(.camwrap .cbarrow:hover) .micwrap:not(.shifted)::after{opacity:.85;animation:smokespin .8s linear infinite}
@keyframes smokespin{to{transform:rotate(360deg)}}
.ctl .smk{position:absolute;z-index:3;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 35% 35%,#fff,#d8d8d8 60%,#9a9a9a);filter:blur(1.2px)}
.cbwrap.shifted{transform:translateX(-46px)}

/* v3: strzałki tylko po najechaniu na swój przycisk (miejsce zarezerwowane, nic nie skacze), gładsza animacja, nieprzezroczysty dym kręcący się w kółko pod przyciskiem */
.cbwrap{position:relative;padding-left:30px;display:inline-flex}
.cbarrow{position:absolute!important;left:0!important;top:50%!important;transform:translateY(-50%)!important;opacity:0!important;pointer-events:none!important;transition:opacity .28s ease,background .2s ease!important}
.cbwrap:hover .cbarrow,.cbarrow.open{opacity:1!important;pointer-events:auto!important}
@media(hover:none){.cbarrow{opacity:1!important;pointer-events:auto!important}}
.devmenu{left:calc(50% + 15px)}
.micwrap{will-change:transform;transition:transform .5s cubic-bezier(.25,.8,.25,1)}
.ctl:has(.camwrap .cbarrow:hover) .micwrap:not(.shifted){transform:translateX(5px) rotate(-17deg)}
.micwrap::after{content:'';position:absolute;right:6px;bottom:-26px;width:26px;height:26px;border-radius:50%;opacity:0;pointer-events:none;z-index:1;
  background:radial-gradient(circle at 28% 38%,#ececec 0 30%,transparent 32%),radial-gradient(circle at 70% 30%,#d9d9d9 0 28%,transparent 30%),radial-gradient(circle at 52% 72%,#c9c9c9 0 32%,transparent 34%),radial-gradient(circle,#bdbdbd 0 24%,transparent 26%);filter:blur(.7px);transition:opacity .4s ease}
.ctl:has(.camwrap .cbarrow:hover) .micwrap:not(.shifted)::after{opacity:1;animation:smokespin 1.1s linear infinite}
.ctl .smk{background:radial-gradient(circle at 35% 35%,#f4f4f4,#cfcfcf 62%,#a9a9a9);filter:blur(.8px);opacity:1}

/* uproszczenie: bez animacji mikrofonu i dymu. Strzałka ustawień po lewej stronie przycisku, widoczna tylko po najechaniu na ten przycisk */
.micwrap::after{display:none!important}
.ctl:has(.camwrap .cbarrow:hover) .micwrap:not(.shifted){transform:none!important}
.micwrap,.cbwrap.shifted{transition:none;transform:none!important;will-change:auto}

/* Fundek: maskotka na linii nad polem Profil w menu */
#mascot{flex:none;height:86px;margin:0 -14px;padding:0 14px;position:relative;overflow:hidden;pointer-events:none}
.mtrack{position:relative;height:100%;width:100%}
.mchar{position:absolute;left:0;bottom:0;width:48px;height:56px;will-change:transform}
.mflip{width:100%;height:100%;transform-origin:50% 100%}
.msvg{width:100%;height:100%;overflow:visible;--al:0deg;--ar:0deg;transform-origin:100% 100%}
.mchar.lie .msvg{transform:rotate(90deg)}
.msvg .mb{fill:#151515;stroke:#e0b15a;stroke-width:2}.msvg .mbl{stroke:#2e2819;stroke-width:1;fill:none}
.msvg .m-leg rect,.msvg .m-arm rect{fill:#e0b15a}
.m-arm,.m-leg,.m-body,.m-crown{transition:transform .22s ease}
.m-arm.l{transform-origin:6px 31px;transform:rotate(var(--al))}.m-arm.r{transform-origin:54px 31px;transform:rotate(var(--ar))}
.m-leg.l{transform-origin:21px 49px}.m-leg.r{transform-origin:39px 49px}
.m-eye{transform-box:fill-box;transform-origin:center;transition:transform .09s}
.m-pup{transition:transform .08s}
.m-body{transform-origin:30px 53px}.m-crown{transform-origin:30px 19px}
.walk .m-leg.l{animation:legA .44s ease-in-out infinite}.walk .m-leg.r{animation:legA .44s ease-in-out infinite reverse}
.walk .m-arm.l{animation:armA .44s ease-in-out infinite alternate}.walk .m-arm.r{animation:armA .44s ease-in-out infinite alternate-reverse}
.walk .m-body,.walk .m-crown{animation:bob .22s ease-in-out infinite alternate}
@keyframes legA{0%,100%{transform:rotate(-24deg)}50%{transform:rotate(24deg)}}
@keyframes armA{from{transform:rotate(-24deg)}to{transform:rotate(24deg)}}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-1.5px)}}
.wow .m-body{animation:wowb .22s ease-in-out 5 alternate}@keyframes wowb{from{transform:scale(1,1)}to{transform:scale(1.06,.95)}}
.dance .m-body{animation:dnc .5s ease-in-out infinite alternate}.dance .m-arm.l{animation:armUp .5s ease-in-out infinite alternate}.dance .m-arm.r{animation:armUp .5s ease-in-out infinite alternate-reverse}
@keyframes dnc{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}@keyframes armUp{from{transform:rotate(-20deg)}to{transform:rotate(-150deg)}}
.dance .m-leg.l{animation:legA .5s ease-in-out infinite}.dance .m-leg.r{animation:legA .5s ease-in-out infinite reverse}
.stretch .m-body{animation:str 1.6s ease-in-out}@keyframes str{50%{transform:scale(1.05,1.08)}}
.sleep .m-body{animation:brth 2.6s ease-in-out infinite}@keyframes brth{50%{transform:scale(1.03,1.05)}}
.hammer .m-arm.r{animation:ham .35s ease-in-out 2 alternate}@keyframes ham{from{transform:rotate(-155deg)}to{transform:rotate(15deg)}}
.jug .m-arm.l{animation:jarm .45s ease-in-out infinite alternate}.jug .m-arm.r{animation:jarm .45s ease-in-out infinite alternate-reverse}@keyframes jarm{from{transform:rotate(-120deg)}to{transform:rotate(-150deg)}}
.sn1 .m-body{animation:snb .9s ease forwards}@keyframes snb{to{transform:rotate(-9deg) scale(1.03)}}.sn2 .m-body{animation:snf .25s ease-out forwards}@keyframes snf{from{transform:rotate(-9deg)}to{transform:rotate(12deg)}}
.sn2 .m-crown{animation:crn .5s ease-out}@keyframes crn{40%{transform:translateY(-3px) rotate(-10deg)}}
.shake .m-arm.r{animation:shk .12s linear infinite alternate}@keyframes shk{from{transform:rotate(-125deg)}to{transform:rotate(-155deg)}}
.sip .m-arm.r{--ar:-140deg}
.mbub{position:absolute;left:30px;bottom:60px;font-size:15px;line-height:1;opacity:0;transition:opacity .2s;white-space:nowrap;background:#1d1d1d;border:1px solid #333;border-radius:10px;padding:3px 7px;color:#fff}
.mbub.on{opacity:1}.mbub.zzz{font-size:12px;color:var(--acc);letter-spacing:.1em;animation:zzz 2.4s ease-in-out infinite}.mchar.lie .mbub{left:74px;bottom:36px}
@keyframes zzz{50%{transform:translateY(-4px)}}
.mprop{position:absolute;left:12px;bottom:60px;font-size:22px;line-height:1;transition:transform .3s}.mprop.hold{bottom:26px;left:-4px}.mprop.hat{bottom:52px;left:10px}
.mprop.juggle{left:4px;bottom:20px;width:44px;height:44px}.mprop.juggle i{position:absolute;left:0;top:0;width:9px;height:9px;border-radius:50%;background:#e0b15a;box-shadow:0 0 6px #e0b15a;animation:jug .9s linear infinite}
.mprop.juggle i:nth-child(2){animation-delay:-.3s;background:#fff}.mprop.juggle i:nth-child(3){animation-delay:-.6s}
@keyframes jug{0%{transform:translate(2px,34px)}25%{transform:translate(18px,0)}50%{transform:translate(34px,34px)}75%{transform:translate(18px,0)}100%{transform:translate(2px,34px)}}
.mhouse{position:absolute;bottom:0;width:48px;height:44px}.mhouse.hide{display:none}.mhs{width:100%;height:100%}
.mhs g{opacity:0;transform-box:fill-box;transform-origin:center bottom}.mhs g.on{opacity:1;animation:hpop .38s cubic-bezier(.3,1.6,.5,1)}
@keyframes hpop{from{transform:scale(.3)}to{transform:scale(1)}}
#mascot{margin-bottom:-8px}.mchar{bottom:-2px}

/* czarny kot: leży/chodzi dokładnie na linii nad polem Profil, ogon może zwisać poza linię */
#mascot{flex:none;height:62px;margin:0 -14px -8px;padding:0 14px;position:relative;overflow:visible;pointer-events:none;z-index:6;clip-path:inset(-80px 0 -80px 0)}
.sidebottom{position:relative;z-index:1}
.mtrack{position:relative;height:100%;width:100%}
.mchar{position:absolute;left:0;bottom:-14px;width:110px;height:70px;will-change:transform}
.cat{display:block;overflow:visible}

/* kot: mniejszy; litery „z" unoszą się obok głowy w różne strony */
.cat{width:79px;height:50px}.mchar{width:79px;height:50px;bottom:-10px}
.mz{position:absolute;left:var(--x);top:var(--y);font:italic 600 var(--s)/1 Georgia,'Times New Roman',serif;color:#f3d089;opacity:0;pointer-events:none;animation:mz 3.4s ease-out forwards;text-shadow:0 0 6px rgba(224,177,90,.5)}
@keyframes mz{0%{opacity:0;transform:translate(0,0) scale(.6)}18%{opacity:.95}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.3) rotate(var(--r))}}

/* układ v2: wspólny pasek u góry (dzwonek + zdjęcie z menu konta), pogrupowane menu, akcje obok tytułu */
.main{position:relative}
.gbar{flex:none;display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:calc(var(--st) + 12px) 20px 0;position:relative;z-index:25}
.main.nobar .gbar{display:none}
.gbar .circ{position:relative}.gph{width:44px;height:44px;border-radius:22px;background:#fff;color:#000;border:0;padding:0;overflow:hidden;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center}.gph .av{border-radius:0}
.gmenu{position:absolute;right:20px;top:calc(var(--st) + 62px);z-index:40;min-width:220px;padding:6px;border-radius:16px;background:#1d1d1d;border:1px solid var(--line);box-shadow:0 12px 36px #000c;display:flex;flex-direction:column;gap:2px}
.gmenu.hide{display:none!important}.gmenu a,.gmenu button{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;border:0;background:transparent;color:var(--w);font-size:14px;font-weight:600;text-align:left;cursor:pointer}.gmenu a:hover,.gmenu button:hover{background:#2a2a2a}.gmenu a.on{background:#262626}
.gmenu button:last-child{color:#ff8a80;border-top:1px solid var(--line);border-radius:0 0 10px 10px;margin-top:4px;padding-top:12px}
.gmenu .badge{margin-left:auto}
.top{justify-content:flex-start;gap:14px}
.navgrp{display:flex;flex-direction:column;gap:4px}.navmore{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border-radius:12px;border:0;background:transparent;color:var(--mut);font-weight:500;font-size:15px;cursor:pointer;text-align:left}.navmore:hover{color:var(--w)}.navmore span{flex:1}.navmore svg{width:18px;height:18px;transition:transform .2s}.navmore.open svg{transform:rotate(180deg)}
.navsub{display:flex;flex-direction:column;gap:4px;padding-left:14px}.navsub.hide{display:none!important}
.phoneonly{display:flex}@media(min-width:900px){.phoneonly{display:none!important}}
/* pierścień fokusu tylko dla klawiatury */
a:focus,button:focus,input:focus{outline:none}a:focus-visible,button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.side a:focus,.side button:focus{outline:none}
@media(min-width:900px){.view{padding-top:6px}}

/* kafelki skrótów tylko na telefonie i na całą szerokość; treść wyrównana do lewej na komputerze */
.sc-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.sc-row .sc{width:auto}
@media(min-width:900px){.sc-row{display:none!important}.wrap{margin-left:0;margin-right:auto}}
.sidebottom{margin-top:8px;padding-top:0;min-height:6px}

/* czat na komputerze: lista po lewej, rozmowa po prawej */
.view.split{padding:0!important}.csplit{display:flex;height:100%;min-height:0}
.csplit .cl{width:360px;flex:none;border-right:1px solid var(--line);overflow:auto;padding:8px 16px 16px;scrollbar-width:none}.csplit .cl::-webkit-scrollbar{display:none}
.csplit .cl .wrap{max-width:none}.csplit .cr{flex:1;min-width:0;height:100%;display:flex;flex-direction:column}.csplit .cr .chat{height:100%}
.csplit .chat .hd>a.circ:first-child{display:none}
.csempty{flex:1;display:flex;align-items:center;justify-content:center}
.item.cactive{background:#241f13;border-color:rgba(224,177,90,.5)}
.csplit .cl .chips{flex-wrap:wrap}

/* gorące krzesło: stan „wysłane", zablokowane kroki z terminami, „Jak to działa" zwinięte */
.how{border:1px solid var(--line);border-radius:16px;padding:12px 16px;background:var(--card)}.how summary{cursor:pointer;font-weight:700}.how[open] summary{margin-bottom:10px}
.sentbar{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background:#1e2a1c;border:1px solid #2f4a2b;margin-bottom:10px}.sentbar b{color:#7bd88f}
.card.locked{opacity:.6}.actrow{gap:8px}.actrow input[type=text],.actrow input:not([type]){flex:1}.due{width:150px;flex:none;font-size:14px}
textarea:disabled,input:disabled{opacity:.7;cursor:not-allowed}

/* tagi „Szukam" i „Oferuję" */
.tagbox{display:flex;flex-wrap:wrap;gap:6px;padding:8px 10px;border-radius:14px;background:var(--card);border:1px solid var(--line);cursor:text}
.tagbox .tgi{flex:1;min-width:120px;border:0!important;background:transparent!important;padding:6px 4px!important;box-shadow:none!important}
.tg{display:inline-flex;align-items:center;gap:6px;padding:5px 6px 5px 11px;border-radius:99px;background:#241f13;border:1px solid rgba(224,177,90,.5);font-size:13px;font-weight:600}.tgx{border:0;background:transparent;color:var(--mut);font-size:16px;line-height:1;cursor:pointer;padding:0 4px}.tgx:hover{color:#fff}
.trip{display:flex;flex-direction:column;gap:12px}.tripmeta{display:flex;gap:16px;margin-top:8px;font-size:14px;color:#d8d8d8}

/* kot: sensowne miejsce: leży na „półce" (linii) u dołu menu, z odstępem od dolnej krawędzi okna */
.sidebottom{padding-bottom:20px;margin-bottom:4px;min-height:14px}

/* ===== iPhone / telefon: zoom, górny odstęp, dolny pasek, drobiazgi ===== */
*{-webkit-tap-highlight-color:transparent}
html,body{overflow-x:hidden;max-width:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}*,*::before,*::after{box-sizing:border-box}
a,button,[role=button],label,select{touch-action:manipulation}
/* iOS powiększa stronę po fokusie pola z czcionką mniejszą niż 16 px: wszystkie pola mają min. 16 px (wygląd ten sam, bo zmieniamy tylko rozmiar tekstu w polu) */
@media(pointer:coarse),(max-width:899px){input,textarea,select{font-size:16px!important}}
.view{overscroll-behavior:none}
.av.on::after{width:11px;height:11px;border-radius:50%!important;border:2px solid var(--bg)!important;box-shadow:none!important;right:0;bottom:0}
.av{background-size:cover;background-position:center;background-repeat:no-repeat}
.agm{background:transparent!important}
.evc{position:relative;overflow:hidden}.evc.is-on,.evc.is-ph{border-left:1px solid var(--line)!important}
.evc.is-on::before,.evc.is-ph::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--acc)}.evc.is-on::before{background:#fff}
.morerow{min-height:56px;gap:14px}.morerow:active{background:#242424}.morerow svg:last-child{transform:rotate(-90deg);color:var(--mut)}
@media(pointer:coarse),(max-width:899px){.btn,.btn.sm,.chip,.circ,.item,.tabbar a{min-height:44px}.btn.sm{height:44px}.chips{overflow-x:auto;padding-right:28px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}}
@media(max-width:899px){
  /* góra: strefa bezpieczna użyta raz; dzwonek i zdjęcie zaraz pod nią; tytuł 16 px niżej */
  .gbar{padding:var(--st) 16px 0;min-height:calc(var(--st) + 56px);align-items:center}
  .view{padding:16px 16px calc(64px + var(--sb) + 20px)}
  .view.split{padding:0!important}
  .gmenu{top:calc(var(--st) + 56px);right:16px}
  /* dół: pasek na stałe przy dolnej krawędzi, strefa bezpieczna raz w środku paska */
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;height:calc(60px + var(--sb));padding:6px 8px var(--sb);background:var(--bg)}
  .view:has(.chat){padding:0 0 calc(60px + var(--sb))!important}
  .chat .hd{padding-top:calc(var(--st) + 10px)}
  .kb .view:has(.chat){padding-bottom:0!important}
  #app{height:var(--vh,100dvh)}
  #callhost.full{bottom:calc(60px + var(--sb))}
}

/* poprawki po uwagach: przycisk „Oznacz wszystkie" w jednej linii pod tytułem (bez przewijania w bok), niższy dolny pasek na telefonie, zwarty układ w aplikacji Mac */
.top{flex-wrap:wrap;min-width:0}.top h1{min-width:0}
.allread{width:100%;white-space:normal;height:auto;min-height:44px;padding:10px 18px;text-align:center}
@media(max-width:899px){
  .tabbar{height:calc(56px + var(--sb) * .3);padding:6px 8px calc(var(--sb) * .3)}
  .view{padding-bottom:calc(56px + var(--sb) * .3 + 20px)}
  .view:has(.chat){padding-bottom:calc(56px + var(--sb) * .3)!important}
  #callhost.full{bottom:calc(56px + var(--sb) * .3)}
}
html.desk .gbar{position:absolute;top:10px;right:16px;padding:0;min-height:0;z-index:30}
html.desk .gmenu{top:64px;right:16px}
html.desk .view{padding-top:22px}

/* kącik kota: domek, poduszka, kłębek i myszka; kot śpi na poduszce */
.scene{position:absolute;left:0;bottom:0;width:100%;height:44px;pointer-events:none}
.mchar{transition:bottom .9s ease}.mchar.onbed{bottom:-4px!important}

/* domek 3D w połowie schowany za lewą krawędzią; spadająca myszka z nitką i splątaniem o pozycje menu */
.scene{left:-26px!important;width:calc(100% + 26px)!important}
.side{position:relative}
.mousefx{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden}.mousefx .thr{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.mousefx .thr path{filter:drop-shadow(0 0 2px rgba(224,177,90,.5))}
.fmouse{position:absolute;left:0;top:0;width:34px;height:20px;filter:drop-shadow(0 3px 3px rgba(0,0,0,.6))}.fmouse svg{display:block}
.coil{position:absolute;width:20px;height:20px;border:2px solid #e0b15a;border-radius:50% 50% 50% 8%;pointer-events:none;animation:coil 2.6s ease-out forwards}
@keyframes coil{0%{transform:scale(.3) rotate(0);opacity:1}60%{transform:scale(1.1) rotate(300deg);opacity:.9}100%{transform:scale(.9) rotate(540deg);opacity:0}}

/* ===== poprawki układu (Mac: wspólny układ, iPhone: przewijanie i dolny pasek, nagłówek) ===== */
:root{--tbp:max(0px,calc(var(--sb) - 14px));--tbh:calc(49px + var(--tbp))}
.main{min-height:0;height:100%}.view{min-height:0;-webkit-overflow-scrolling:touch}
/* komputer i aplikacja Mac: jeden wspólny układ: równe odstępy 36 px po bokach, treść wyśrodkowana do 960 px, pierwsza linia na wysokości logo */
@media(min-width:900px){
  .main .view:not(.split){padding:24px 36px 32px!important}
  .wrap{max-width:960px;margin-left:auto!important;margin-right:auto!important}.admin-wide .wrap{max-width:1100px}
}
html.desk .view:not(.split){padding-top:24px!important}
/* nagłówek: jeden dzwonek i jedno zdjęcie, bez nakładania na nagłówki stron; na komputerze zostawiamy miejsce po prawej */
html.desk .top{padding-right:124px}
@media(min-width:900px){.chat .hd .grow{flex:0 1 auto;min-width:0}.chat .hd{gap:12px}}
.view{touch-action:pan-y;overflow-y:auto}
.gbar{-webkit-app-region:no-drag}.gbar .circ{width:44px;height:44px;border:1px solid var(--line);background:transparent;box-shadow:none}.gbar .circ::before,.gbar .circ::after{content:none!important}
.gbar .circ .dot{position:absolute;top:2px;right:2px;margin:0}.gbar .circ svg{width:22px;height:22px}
.gph{border:1px solid var(--line);box-shadow:none}.gph .av{box-shadow:none;border:0;width:100%;height:100%;background-size:cover;background-position:center}
/* telefon: dolny pasek 49 pt + strefa bezpieczna raz; labele ok. 10-14 pt nad wskaźnikiem domu; strony mają dolny odstęp równy paskowi */
@media(max-width:899px){
  .tabbar{position:fixed;left:0;right:0;bottom:0;height:var(--tbh)!important;padding:0 8px var(--tbp)!important;align-items:stretch}
  .tabbar a{height:49px;min-height:0!important;padding:0;justify-content:center}
  .view{padding-bottom:calc(var(--tbh) + 20px)!important}
  .view:has(.chat){padding-bottom:var(--tbh)!important}
  #callhost.full{bottom:var(--tbh)}
  .view.split{padding-bottom:0!important}
}

/* kot leży bezpośrednio na linii (bez poduszki); mały domek widziany z boku */
.mchar.onbed{bottom:-10px!important}

/* ===== telefon: poprawki (tylko wąskie ekrany, komputer bez zmian) ===== */
@media(max-width:899px){
  .view{padding-left:20px!important;padding-right:20px!important;overflow-x:hidden}
  .view.split,.view:has(.chat){padding-left:0!important;padding-right:0!important}
  .view>*,.wrap,.evc,.card{max-width:100%;min-width:0}
  .view:not(.split):not(:has(.chat))::after{content:'';flex:none;display:block;height:1px}
  .view{padding-bottom:calc(var(--tbh) + 28px)!important}
  .av,.gph .av{background-size:cover!important;background-position:center!important;background-repeat:no-repeat}
  .gph{overflow:hidden;border-radius:50%}

  #callhost.full{top:0!important;bottom:0!important;left:0;right:0;z-index:40;padding:0!important;gap:0;overflow:hidden;display:flex;flex-direction:column}
  #callhost.full>.wrap{flex:1;min-height:0;max-width:none;width:100%;margin:0;gap:8px;padding:0 12px;display:flex;flex-direction:column}
  #callhost.full .top{flex:none;padding:calc(var(--st) + 10px) 0 0;gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-between}
  #callhost.full .top>.row:first-child{min-width:0;flex:1;gap:12px}
  #callhost.full .top h1{font-size:19px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #callhost.full .top .small{white-space:nowrap}
  #callhost.full .stage{flex:1;min-height:0;overflow:auto;scrollbar-width:none}
  #callhost.full .stage::-webkit-scrollbar{display:none}
  #callhost.full .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #callhost.full .grid{align-content:stretch}
  #callhost.full .grid:has(.tile:only-child){grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:100%}
  #callhost.full .top>.row:last-child{width:100%;justify-content:space-between}
  #callhost.full .grid:has(.tile:only-child) .tile{height:100%;aspect-ratio:auto;max-height:none}
  #callhost.full .tray.hide{display:none!important}
  #callhost.full .tray{order:7;position:static;transform:none;margin:0;align-self:center}
  #callhost.full .ctl{flex:none;order:8;display:flex;justify-content:space-between;gap:6px;padding:8px 0 calc(var(--sb) + 10px);width:100%;max-width:420px;margin:0 auto;position:relative;z-index:50}
  #callhost.full .ctl .circ{width:52px;height:52px;border-radius:26px;flex:none;min-height:0}
  #callhost.full .ctl .circ.end{background:#d33;border-color:#d33;color:#fff}
  #callhost.full .ctl .cbwrap{display:inline-flex;flex:none;padding:0!important;margin:0}
  #callhost.full .ctl .cbarrow,#callhost.full #b-screen{display:none!important}
  #callhost.full .ctl .circ.off{background:#fff;color:#000}
  #callhost.full .devmenu{position:fixed;left:12px;right:12px;width:auto;bottom:calc(var(--sb) + 86px);transform:none;max-height:50vh}
  #msheet{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end}
  #msheet:not(.open){display:none!important}
  #msheet .msh-bg{position:absolute;inset:0;background:#000a}
  #msheet .msh-box{position:relative;width:100%;background:#141414;border:1px solid var(--line);border-radius:22px 22px 0 0;padding:14px 16px calc(var(--sb) + 16px);display:flex;flex-direction:column;gap:10px}
  #msheet .msh-t{font:700 17px 'Space Grotesk',sans-serif;text-align:center;padding-bottom:4px}
  #msheet .btn,#msheet .spkbtn,#msheet .pipbtn{position:static!important;transform:none!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%;height:48px;justify-content:center;font-size:15px}
  #callhost.mini #b-more,#callhost.mini #msheet{display:none!important}
}
@media(min-width:900px){#b-more,#msheet .msh-bg,#msheet .msh-t,#msheet .shdev{display:none!important}#msheet,#msheet .msh-box{display:contents}}

/* status idle: pomarańczowa kropka */
.av.on.idle::after{background:#f59e0b!important}

/* tablica: kto czego szuka / co oferuje */
.tagrow{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:6px}.tagrow .tl{font-size:12px;color:var(--mut)}.tg2{font-size:12px;padding:2px 9px;border-radius:10px;border:1px solid var(--line);background:#151515}.tg2.n{border-color:rgba(224,177,90,.5);color:var(--acc)}

/* Aktywni w tym miesiącu */
.actc{padding:14px 16px}.actrow{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px}.actp{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;color:var(--mut);min-width:48px}

/* ankiety */
.popt{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;padding:12px 14px;margin-bottom:8px;border-radius:12px;border:1px solid var(--line);background:#151515;overflow:hidden;min-height:44px}.popt i{position:absolute;left:0;top:0;bottom:0;background:rgba(224,177,90,.18);transition:width .3s}.popt span,.popt b{position:relative}.popt.on{border-color:var(--acc)}.popt:disabled{opacity:.8;cursor:default}
.popt .vs{display:flex;align-items:center;gap:0}.popt .vs .av{width:24px;height:24px;font-size:9px;margin-left:-8px;border:2px solid #151515;flex:none}.popt .vs .av.on::after{display:none}.popt .vs em{font-style:normal;font-size:12px;color:var(--mut);margin-left:5px}.popt .vs b{margin-left:8px}

/* kalendarz aktywności (siatka dni jak na GitHubie) */
.hmwrap{overflow-x:auto;scrollbar-width:thin}.hmin{display:inline-block;min-width:100%}
.hmlab{display:flex;gap:3px;margin-left:30px;font-size:10px;color:var(--mut);height:14px}.hmlab span{width:11px;flex:none;overflow:visible;white-space:nowrap}
.hmbody{display:flex;gap:3px}.hdays{display:flex;flex-direction:column;gap:3px;width:27px;font-size:10px;color:var(--mut)}.hdays span{height:11px;line-height:11px}
.hcol{display:flex;flex-direction:column;gap:3px}.hc{display:block;width:11px;height:11px;border-radius:3px;background:#2a2a2a}.hc.none{background:transparent}
.hc.l1{background:#0e4429}.hc.l2{background:#006d32}.hc.l3{background:#26a641}.hc.l4{background:#39d353}.hleg{display:flex;align-items:center;gap:3px}
.hmwrap{scrollbar-color:#444 transparent}

/* ===== tryb jasny (opcjonalny; domyślnie ciemny; przełącznik w profilu → Wygląd). Rozmowa na żywo zostaje ciemna ===== */
html[data-theme=light]{color-scheme:light;--bg:#f5f3ee;--card:#fff;--line:#dedad0;--mut:#6a6a6a;--dim:#9a9a9a;--w:#141414;--acc:#b8862b}
html[data-theme=light] body::before{background:radial-gradient(900px 620px at 0% 0%,rgba(184,134,43,.07),transparent 70%)}
html[data-theme=light] body::after{opacity:.02}
html[data-theme=light] .side,html[data-theme=light] .tabbar,html[data-theme=light] .gmenu{background:var(--bg)}
html[data-theme=light] .side a.on{background:#fff}
html[data-theme=light] .btn,html[data-theme=light] .badge,html[data-theme=light] .msg.me,html[data-theme=light] .card.white,html[data-theme=light] .composer .circ.send,html[data-theme=light] #toast{background:#141414;color:#fff;border-color:#141414}
html[data-theme=light] .av,html[data-theme=light] .gph{background-color:#141414;color:#fff;border-color:#141414}
html[data-theme=light] .card.white .cap,html[data-theme=light] .card.white .mut,html[data-theme=light] .msg.me .t{color:#cfcfcf}
html[data-theme=light] .card.white .cap{color:#e0b15a}
html[data-theme=light] .btn.line,html[data-theme=light] .btn.ghost{background:transparent;color:var(--w);border:1px solid #cfcbc0}
html[data-theme=light] .btn.dark{background:#fff;color:#141414}
html[data-theme=light] .circ,html[data-theme=light] .chip,html[data-theme=light] .item,html[data-theme=light] .tg2,html[data-theme=light] .popt,html[data-theme=light] .devmenu,html[data-theme=light] .modal>div,html[data-theme=light] .msh-box{background:#fff;color:var(--w);border-color:var(--line)}
html[data-theme=light] .chip.on{background:#141414;color:#fff}
html[data-theme=light] .item:hover{background:#faf8f3}
html[data-theme=light] .modal{background:#0008}
html[data-theme=light] .pill{background:var(--acc);color:#fff}html[data-theme=light] .pill.o{background:none;color:var(--w)}
html[data-theme=light] input,html[data-theme=light] textarea,html[data-theme=light] select{background:#fff;color:var(--w);border-color:var(--line)}
html[data-theme=light] .msg{background:#fff;color:var(--w)}
html[data-theme=light] .lcard,html[data-theme=light] .rcard,html[data-theme=light] .evc,html[data-theme=light] .profban,html[data-theme=light] .stat{background:#fff;color:var(--w);border-color:var(--line)}
html[data-theme=light] .lth{background:#e8e4da}
html[data-theme=light] .av.on::after{border-color:var(--bg)}
html[data-theme=light] .hc{background:#e4e1d8}html[data-theme=light] .hc.l1{background:#9be9a8}html[data-theme=light] .hc.l2{background:#40c463}html[data-theme=light] .hc.l3{background:#30a14e}html[data-theme=light] .hc.l4{background:#216e39}
html[data-theme=light] .ldesc{color:#555}
html[data-theme=light] #callhost,html[data-theme=light] #rscene,html[data-theme=light] #hotfx,html[data-theme=light] #msheet .msh-box{--bg:#0A0A0A;--card:#171717;--line:#2E2E2E;--mut:#A3A3A3;--dim:#525252;--w:#fff;--acc:#E0B15A;color:#fff}
html[data-theme=light] #callhost .circ,html[data-theme=light] #callhost .btn,html[data-theme=light] #callhost .item{background:#171717;color:#fff;border-color:#2E2E2E}
html[data-theme=light] #callhost .circ.off{background:#fff;color:#000}html[data-theme=light] #callhost .circ.end{background:#d33;border-color:#d33}
html[data-theme=light] #msheet .btn{background:#171717;color:#fff;border:1px solid #2E2E2E}

/* profil: przełączniki po bokach przycisku zdjęcia (zapisują się od razu) */
.photorow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;width:100%;margin-top:4px}
.tgl{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;font-size:11px;line-height:1.2;color:var(--mut);text-align:center;min-width:0}
.tgl input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.tgl .sw{position:relative;width:44px;height:26px;border-radius:13px;background:#3a3a3a;transition:background .2s;flex:none}
.tgl .sw::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px #0006}
.tgl input:checked+.sw{background:var(--acc)}.tgl input:checked+.sw::after{transform:translateX(18px)}
.tgl input:focus-visible+.sw{outline:2px solid var(--acc);outline-offset:2px}
html[data-theme=light] .tgl .sw{background:#cfcbc0}

/* ===== pulpit / Mac (szerokie ekrany): poprawki układu czatu, nagłówka, paska bocznego. Telefon bez zmian ===== */
@media(min-width:900px){
  /* 1. pasek wiadomości bez ciemnej ramki */
  .composer{background:transparent!important;border-top:0!important;padding:16px 24px!important}
  /* 2. wiersze rozmów */
  .csplit .cl .item{border:1px solid transparent;border-radius:14px;padding:12px;background:transparent}
  .csplit .cl .item:hover{background:#1a1a1a}
  .csplit .cl .item.cactive{background:#1a1a1a;border-color:rgba(224,177,90,.6)}
  /* 3. lista szersza, chipy w jednym rzędzie, kompaktowe ogłoszenia, odstępy wątku */
  .csplit .cl{width:380px;min-width:340px;padding:8px 16px 16px}
  .csplit .cl .chips{flex-wrap:nowrap;overflow-x:auto;gap:6px}.csplit .cl .chip{height:34px;font-size:14px;padding:0 13px}
  .csplit .cl .annbox{padding:10px 12px;gap:10px;margin-bottom:10px}.csplit .cl .annbox .annic{width:34px;height:34px;flex:none}
  .csplit .cl .annbox .pv{display:block!important;-webkit-line-clamp:unset!important;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis}.csplit .cl .annbox .grow{min-width:0}
  .csplit .chat .hd{padding-left:24px;padding-right:24px}.csplit .chat .log{padding-left:24px;padding-right:24px}
  .csempty .empty{border:0!important;background:none!important;color:var(--mut);padding:0}
  /* pasek boczny zwija się do ikon, gdy otwarta jest rozmowa (rozwija się po najechaniu) */
  /* 4. nagłówek w tym samym kontenerze co treść */
  .main{position:relative}
  .gbar,html.desk .gbar{position:absolute;top:16px;left:0;right:0;margin:0 auto;max-width:1032px;padding:0 36px;min-height:0;justify-content:flex-end;pointer-events:none;z-index:30}
  .gbar>*{pointer-events:auto}
  .main:has(.csplit) .gbar{max-width:none;padding-right:24px}
  html.desk .gbar{top:10px}
  /* 5. domek w całości w pasku bocznym */
  .scene{left:16px!important;width:calc(100% - 16px)!important}
  /* 7. pasek na karcie wydarzenia: wewnątrz karty */
  .evc.is-on::before,.evc.is-ph::before{left:10px;top:14px;bottom:14px;width:3px;border-radius:3px}
}

/* ===== pulpit: jednolity nagłówek stron, menu Więcej, hot seat, wywiady, wyjazdy, biblioteka, czytelność ===== */
:root{--dim:#8f8f8f}
.emptyc{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;color:var(--mut);padding:56px 12px}.emptyc svg{width:34px;height:34px}
.how summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px}.how summary::-webkit-details-marker{display:none}
.how summary::after{content:'';width:8px;height:8px;border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);transform:rotate(45deg);transition:transform .2s;margin-right:4px}.how[open] summary::after{transform:rotate(-135deg)}
.sentbar{background:rgba(224,177,90,.08)!important;border:1px solid rgba(224,177,90,.55)!important}.sentbar b{color:var(--acc)!important;display:flex;align-items:center;gap:8px}.sentbar b svg{width:18px;height:18px}
.tripmeta span{display:inline-flex;align-items:center;gap:6px}.tripmeta svg{width:16px;height:16px;flex:none}
.tcancel{color:var(--mut)!important;border:0!important;background:transparent!important;flex:none!important;padding:0 14px}
.lplay::before,.lplay::after{content:none!important}.lplay{box-shadow:none!important;outline:0}
.actrow .due{width:140px;flex:none}
@media(min-width:900px){
  /* wspólny nagłówek strony: ta sama wysokość tytułu na każdej stronie */
  .top{align-items:flex-start;min-height:44px}.top h1{line-height:32px;min-height:32px}.top>.row{align-items:flex-start}
  .greet{display:flex;flex-direction:column}.greet h1{order:1;margin-top:0;line-height:32px}.greet>.small{order:2;margin-top:2px}
  .csplit .cl{padding-top:24px}
  /* menu Więcej: pozycje jak główne, ikony na jednej linii */
  .navsub{padding-left:0}.navsub a{padding:11px 12px;border-radius:12px;gap:12px}.navsub a span{margin-left:4px}
}
.small.mut svg.i{width:14px;height:14px;vertical-align:-2px}

/* ===== jasny motyw: czytelny tekst pomocniczy, tagi, kot i domek; zdjęcia bez żadnych filtrów ===== */
html[data-theme=light]{--mut:#555;--dim:#6b6b6b}
html[data-theme=light] img,html[data-theme=light] .av,html[data-theme=light] .gph .av,html[data-theme=light] video{filter:none!important;mix-blend-mode:normal!important}
html[data-theme=light] .tag,html[data-theme=light] .tg{background:#ece7da;color:#141414;border:1px solid #d6d0c0}
html[data-theme=light] .tg2{background:#ece7da;color:#141414}
html[data-theme=light] .pill.o{color:#141414;border-color:#bdb7a6}
html[data-theme=light] .small.mut,html[data-theme=light] .mut{color:var(--mut)}
html[data-theme=light] #mascot .cat{filter:brightness(1.9) contrast(.95) saturate(.8)}
html[data-theme=light] #mascot .scene .hut path[fill="#17171d"]{fill:#efe8d6}html[data-theme=light] #mascot .scene .hut path[fill="#1e1d25"]{fill:#d9cfb4}
html[data-theme=light] .card.white .cap{color:#e0b15a}
/* profil / ustawienia / powiadomienia */
.linkbtn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--acc);font-weight:600;font-size:14px;padding:6px 0;cursor:pointer;align-self:flex-start}.linkbtn svg{width:16px;height:16px}
.setrow{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.pwrap{position:relative}.pwrap input{padding-right:46px}.pwrap .eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--mut)}.eye svg{width:20px;height:20px}
.ncard{display:flex;flex-direction:row;align-items:center;gap:14px;position:relative}.ncard .nic{width:40px;height:40px;border-radius:12px;background:rgba(224,177,90,.12);color:var(--acc);display:flex;align-items:center;justify-content:center;flex:none}.ncard .nic svg{width:20px;height:20px}
.ncard .grow{min-width:0}.udot{width:9px;height:9px;border-radius:50%;background:var(--acc);flex:none}
.inv{font-size:14px;color:var(--mut)}
@media(min-width:900px){
  /* górny pasek: po przewinięciu pełne tło strony i cienka linia, treść chowa się pod nim czysto */
  .main::before{content:'';position:absolute;top:0;left:0;right:0;height:72px;background:var(--bg);z-index:20;opacity:0;pointer-events:none;border-bottom:1px solid var(--line);transition:opacity .15s}
  .main.scrolled::before{opacity:1}
}

/* ===== rozmowa na żywo (pulpit): rakieta na cały ekran, czysta karta imienia, przyciski w rogu, kompaktowy pasek hot seat ===== */
#hotfx .hf-card{display:flex;flex-direction:column;align-items:center;gap:8px;color:#fff;text-align:center}#hotfx .hf-card svg{width:44px;height:44px;color:#fff}
#hotfx .t1{font:600 18px 'DM Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#fff}#hotfx .t2{font:700 clamp(34px,6vw,72px)/1.1 'Space Grotesk',sans-serif;color:#fff}
.hotbar{display:flex;align-items:center;gap:14px;padding:8px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card);flex-wrap:nowrap}
.hotbar .hbn{display:flex;align-items:center;gap:8px;white-space:nowrap;min-width:0}.hotbar .hbn svg{width:18px;height:18px;color:var(--acc);flex:none}.hotbar .hbn b{overflow:hidden;text-overflow:ellipsis}
.hotbar .hclock{font:700 16px 'Space Grotesk',sans-serif;font-variant-numeric:tabular-nums}.hotbar .hclock.over{color:#ff8a80}
.hotbar .hprog{flex:1;height:3px;border-radius:2px;background:var(--line);overflow:hidden;min-width:60px}.hotbar .hprog i{display:block;height:100%;width:0;background:var(--acc)}
.hotbar select.sm{width:auto;min-width:78px;height:36px;padding:0 10px;border-radius:18px;font-size:14px}.hotbar .circ.sm{width:36px;height:36px;border-radius:18px;flex:none}.hotbar .circ.sm svg{width:18px;height:18px}
.tdots{width:40px!important;height:40px!important;border-radius:50%!important;display:flex;align-items:center;justify-content:center}.tdots svg{width:20px;height:20px}
.tmenu button{display:flex;align-items:center;gap:8px}.tmenu button svg{width:16px;height:16px;flex:none}
@media(min-width:900px){
  #rscene{bottom:0!important;z-index:60}
  html.rocket #mascot{display:none}
  html.rocket #callhost .ctl{position:fixed!important;left:50%;transform:translateX(-50%);bottom:32px;z-index:70;padding:10px 18px!important;background:rgba(10,10,10,.7);border-radius:40px;backdrop-filter:blur(8px);width:auto!important}
  html.rocket #callhost .top{position:fixed;top:24px;right:24px;z-index:70;padding:0}
  html.rocket #callhost .top>.row:first-child{display:none}
  /* sterowanie zawsze w całości widoczne: wideo kurczy się, pasek przycisków 24 px nad dolną krawędzią */
  #callhost.full{display:flex;flex-direction:column}#callhost.full>.wrap{flex:1;min-height:0;display:flex;flex-direction:column}
  #callhost.full .stage{flex:1;min-height:0;overflow:auto}#callhost.full .ctl{flex:none;padding-bottom:24px!important}
  #callhost.full .top{gap:16px;flex-wrap:nowrap;justify-content:space-between}#callhost.full .top>.row{gap:14px}
}
/* przyciski „Tryb mówcy” i „Okienko poza aplikacją”: jeden kontener w prawym dolnym rogu, 40 px, ten sam styl */
@media(min-width:1100px){
  #msheet{position:fixed!important;right:24px;bottom:24px;z-index:55;display:block!important}
  #msheet .msh-box{display:flex!important;gap:12px;background:none!important;border:0!important;padding:0!important}
  #msheet .spkbtn,#msheet .pipbtn{position:static!important;transform:none!important;height:40px!important;padding:0 16px!important;display:inline-flex;align-items:center;gap:8px;border-radius:20px;background:transparent!important;color:var(--w)!important;border:1px solid var(--line)!important;font-size:14px}
  #msheet .spkbtn.on{border-color:var(--acc)!important;color:var(--acc)!important;box-shadow:none!important}
  #msheet svg{width:16px;height:16px}
  #callhost.full .ctl{padding-bottom:72px!important}
}
@media(min-width:900px) and (max-width:1099px){
  #callhost.full #b-more{display:flex!important}
  #msheet{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end}#msheet:not(.open){display:none!important}
  #msheet .msh-bg{display:block!important;position:absolute;inset:0;background:#000a}
  #msheet .msh-box{display:flex!important;flex-direction:column;gap:10px;position:relative;width:min(420px,100%);margin:0 auto;background:#141414;border:1px solid var(--line);border-radius:22px 22px 0 0;padding:14px 16px 24px}
  #msheet .msh-t{display:block!important;font:700 17px 'Space Grotesk',sans-serif;text-align:center}
  #msheet .shdev{display:flex!important}
  #msheet .btn,#msheet .spkbtn,#msheet .pipbtn{position:static!important;transform:none!important;width:100%;height:44px;justify-content:center;font-size:14px;background:transparent!important;color:var(--w)!important;border:1px solid var(--line)!important}
}
@media(min-width:900px){
  html.rocket #callhost .top{display:none!important}
  #rscene .rback{position:absolute;top:24px;right:24px;z-index:5;background:rgba(10,10,10,.55)}
}

/* ===== pasek boczny (pulpit): jeden element, dwie szerokości (240 / 72 px), jedna animacja szerokości, bez nakładki ===== */
@media(min-width:900px){
  :root{--sbw:240px}html.sbcol{--sbw:72px}
  .side{width:var(--sbw)!important;flex:none;padding:28px 0!important;overflow:hidden;transition:width .24s cubic-bezier(.2,0,0,1);position:relative;contain:layout paint}
  html.sbanim .side{will-change:width}
  .side .brand{padding:0 0 22px 24px!important;gap:12px;white-space:nowrap;overflow:hidden;justify-content:flex-start}.side .brand img{flex:none}
  .side a:not(.brand),.side .navmore{margin:0 12px;padding:11px 12px!important;gap:12px;white-space:nowrap;overflow:hidden;width:auto}
  .side a svg.i,.side .navmore svg.i{width:24px;height:24px;flex:none}
  .side .navsub{padding-left:0}
  .side a span,.side .navmore span,.side .brand span{white-space:nowrap;overflow:hidden;opacity:1;transition:opacity .12s .06s}
  .side .badge,.side .livepill{transition:opacity .12s .06s}
  html.sbcol .side a span,html.sbcol .side .navmore span,html.sbcol .side .brand span{opacity:0;transition:opacity .08s}
  html.sbcol .side .badge{opacity:0}html.sbcol .side .navmore svg:last-child{opacity:0}
  #mascot{width:240px!important;flex:none;transition:opacity .2s}html.sbcol #mascot{opacity:0;pointer-events:none}
  .sbpin{position:absolute;left:24px;bottom:10px;width:24px;height:24px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--mut);z-index:8;opacity:.6}.sbpin:hover{opacity:1}.sbpin svg{width:16px;height:16px;transition:transform .24s}
  html.sbcol .sbpin svg{transform:rotate(180deg)}.sbpin.on{color:var(--acc);opacity:1}
  .csplit .cl,.csplit .cr{contain:layout}
  .csplit .cr{padding-right:0}
}
@media(prefers-reduced-motion:reduce){.side,.side *,#mascot{transition:none!important}}

#hotfx .hf-title .t1 svg{width:.9em;height:.9em;vertical-align:-.08em;display:inline-block}
@media(min-width:900px){
  /* rozmowa: bez przewijania, kafelki się zmniejszają */
  #callhost.full .stage{overflow:hidden!important;display:flex;flex-direction:column}
  #callhost.full .stage .grid{flex:1;min-height:0;grid-auto-rows:minmax(0,1fr);align-content:stretch}
  #callhost.full .stage .grid .tile,#callhost.full #hot-slot .tile,#callhost.full #scr-slot .tile,#callhost.full #pin-slot .tile{min-height:0;max-height:100%}
  #callhost.full .stage .grid:has(.tile:only-child) .tile{aspect-ratio:auto;height:100%}
  #callhost.full #hot-slot:not(:empty){flex:1;min-height:0}#callhost.full #hot-slot .tile{height:100%;aspect-ratio:auto}
}
@media(min-width:900px){#callhost.full .stage .grid:empty,#callhost.full #scr-row:not(.on){display:none}#callhost.full .stage.hot{gap:10px}}

/* płynne przejścia zamiast mignięcia przy zmianie rozmowy, filtrów, zakładek i stron */
@keyframes vin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.fxin{animation:vin .22s cubic-bezier(.2,0,0,1) both}
.list.fx{animation:vin .2s cubic-bezier(.2,0,0,1) both}
.csplit .cr>.chat{animation:vin .2s cubic-bezier(.2,0,0,1) both}
@media(prefers-reduced-motion:reduce){.fxin,.list.fx,.csplit .cr>.chat{animation:none}}

/* wejście po kolei */
@keyframes vup{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.stg{animation:vup .4s cubic-bezier(.2,0,0,1) both;animation-delay:calc(var(--i,0) * 45ms)}
@media(prefers-reduced-motion:reduce){.stg{animation:none}}
.sbpin{display:none!important}

/* ===== profil i ustawienia konta (pulpit): skala odstępów 8/16/24/32, szerokość do 880 px ===== */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:12px;padding:3px;gap:2px;background:var(--card)}.seg button{height:34px;padding:0 16px;border-radius:9px;font-weight:600;font-size:14px;color:var(--mut)}.seg button.on{background:#fff;color:#0A0A0A}
html[data-theme=light] .seg button.on{background:#141414;color:#fff}
.textlink{background:none;border:0;padding:0;color:var(--mut);font-weight:600;font-size:15px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;text-align:left}.textlink:hover{color:var(--w)}
.lrow{display:flex;align-items:center;gap:8px;margin-bottom:8px}.lrow input{flex:1}.lx{width:40px;height:40px;border-radius:10px;font-size:22px;color:var(--mut);flex:none}.lx:hover{color:var(--w);background:var(--card)}
.savebar{display:none;align-items:center;justify-content:flex-end;gap:16px;position:sticky;bottom:0;padding:16px 0 0;background:var(--card);border-top:1px solid var(--line)}.savebar.on{display:flex}.savebar .small{margin-right:auto;display:inline-flex;align-items:center;gap:6px}.savebar svg{width:16px;height:16px;color:var(--acc)}
.savebar .btn:not(.ghost){width:auto;min-width:160px;height:44px}.savebar .btn:disabled{background:rgba(255,255,255,.4);cursor:not-allowed}
.cnt{text-align:right;margin-top:8px}
.agroup{display:flex;flex-direction:column;gap:0}.glabel{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-bottom:8px}.how.acct{padding:0}.how.acct summary{padding:20px 24px}.how.acct>.agroup{padding:0 24px}.how.acct{padding-bottom:8px}
.how.acct>.agroup+.agroup{margin-top:32px}.how.acct[open]>.agroup:last-child{padding-bottom:16px}
.setrow .st{font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px}.setrow .st svg{width:20px;height:20px}.setrow .sd{font-size:14px;color:var(--mut);margin-top:4px}
.setrow.link{width:100%;text-align:left;color:var(--w)}.setrow.link>svg{width:20px;height:20px;color:var(--mut);transform:rotate(-90deg)}
.pwgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:560px}
@media(min-width:900px){
  .view>.wrap:has(.phead){max-width:880px}
  .phead{align-items:center;text-align:center;gap:16px;padding:24px}.phead .pname{font-size:24px;margin:0}
  .phead .daysbox{width:100%;text-align:left}
  .daysbox{display:flex;align-items:center;gap:24px;padding:24px}.daysbox .dmed{width:92px;height:92px;border-radius:50%;padding:4px!important;background:conic-gradient(var(--acc) calc(var(--p,0)*1%),rgba(255,255,255,.14) 0)!important;flex:none;display:flex;align-items:center;justify-content:center;overflow:visible!important;-webkit-mask:none!important;mask:none!important}
  .daysbox .dmed::before,.daysbox .dmed::after{content:none!important}
  .daysbox .dmi{width:100%;height:100%;border-radius:50%!important;background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;border:0!important;box-shadow:none!important}
  .daysbox .dl{flex:1;min-width:0;text-align:left}.daysbox .dnext,.daysbox .dcap{font-size:14px}
  .daysbox .dbar{width:180px;flex:none}.daysbox .dpb{height:6px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}.daysbox .dpb i{display:block;height:100%;background:var(--acc)}
  .trbox{padding:0}.trhead{min-height:72px;padding:0 24px;width:100%;display:flex;align-items:center;gap:16px}
  .trtop{display:flex;gap:8px}.trmini{width:40px;height:40px;border-radius:50%;border:1px solid var(--acc);color:var(--acc);display:flex;align-items:center;justify-content:center}.trmini svg{width:20px;height:20px}
  .trgrid{display:grid!important;grid-template-columns:repeat(4,1fr);gap:16px;padding:0 24px 24px}.trgrid.hide{display:none!important}
  .troph{border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;opacity:.55}.troph.got{opacity:1;border-color:rgba(224,177,90,.5)}
  .troph .ti{width:40px;height:40px;border-radius:50%;border:1px solid var(--acc);color:var(--acc);display:flex;align-items:center;justify-content:center}.troph .ti svg{width:20px;height:20px}.troph .tn{font-weight:700;font-size:14px}.troph .td{font-size:13px;color:var(--mut)}
  .pform{padding:24px;gap:16px}.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.pgrid .field:last-child{grid-column:1}
  .pform .field{display:flex;flex-direction:column;gap:8px}.pform .field>label,.pwgrid label{font-size:14px;color:var(--mut)}
  .pform input,.pform textarea{min-height:48px;height:48px;padding:0 16px}.pform textarea{height:auto;min-height:112px;padding:12px 16px}
  .tagbox{min-height:48px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 12px;border:1px solid var(--line);border-radius:14px;background:var(--card)}.tagbox .tg{height:32px;display:inline-flex;align-items:center;gap:6px;padding:0 6px 0 12px;border-radius:16px}.tagbox .tgx{width:24px;height:24px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center}.tagbox .tgi{flex:1;min-width:140px;height:32px!important;min-height:0!important;border:0!important;background:transparent!important;padding:0 4px!important}
  .tagbox:has(.tg) .tgi::placeholder{color:transparent}
  .setrow{min-height:64px;padding:20px 0;border-top:1px solid var(--line)}.pform>.setrow{margin-top:8px}
  *:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
}

html[data-theme=light] .tgl input:checked+.sw{background:var(--acc)}
.agroup>.btn,.agroup>#pw,.agroup>#outone{align-self:flex-start;width:auto!important}

/* zapis / wypis: mój awatar wskakuje do uczestników albo znika; karta z nazwą wydarzenia */
@keyframes joinpop{0%{transform:scale(0) rotate(-20deg);opacity:0}55%{transform:scale(1.35) rotate(6deg);opacity:1;box-shadow:0 0 0 0 rgba(224,177,90,.7)}100%{transform:none;box-shadow:0 0 0 14px rgba(224,177,90,0)}}
.avstack .av.join-pop{animation:joinpop .7s cubic-bezier(.2,.9,.25,1.2) both;z-index:3}
.avstack .av.leave-fade{transition:opacity .35s,transform .35s,margin .35s;opacity:0;transform:scale(.5)}
#rsvpfx{position:fixed;left:50%;bottom:calc(32px + var(--sb));transform:translateX(-50%);z-index:120;display:flex;align-items:center;gap:14px;padding:10px 22px 10px 10px;border-radius:40px;background:#fff;color:#0A0A0A;box-shadow:0 12px 40px rgba(0,0,0,.5);pointer-events:none;animation:rsvpin .5s cubic-bezier(.2,.9,.25,1.1) both}
#rsvpfx .rav .av{width:44px;height:44px;border:2px solid var(--acc);animation:joinpop .8s cubic-bezier(.2,.9,.25,1.2) .15s both}
#rsvpfx.out .rav .av{animation:none;transition:opacity .6s,transform .6s;opacity:.35;transform:scale(.85)}
#rsvpfx .r1{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#6b6b6b;font-weight:700}#rsvpfx .r2{font:700 16px 'Space Grotesk',sans-serif;max-width:46vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#rsvpfx.out .r2{text-decoration:line-through;text-decoration-color:rgba(0,0,0,.4)}
#rsvpfx>svg{width:22px;height:22px;color:#2e9e57}
#rsvpfx.bye{transition:opacity .4s,transform .4s;opacity:0;transform:translateX(-50%) translateY(10px)}
@keyframes rsvpin{from{opacity:0;transform:translateX(-50%) translateY(24px) scale(.9)}to{opacity:1;transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){#rsvpfx,#rsvpfx .rav .av,.avstack .av.join-pop{animation:none}}

/* ===== telefon: dolny pasek 49 pt + strefa bezpieczna raz, nagłówek z tłem, wspólna wysokość tytułów, zdjęcie, trofea, powiadomienia, wydarzenia ===== */
@media(max-width:899px){
  :root{--tbp:var(--sb);--tbh:calc(49px + var(--sb))}
  .tabbar{height:var(--tbh)!important;padding:0 8px var(--sb)!important;box-sizing:border-box}
  .tabbar a{height:49px!important}
  .gbar{background:var(--bg);position:relative;z-index:25}
  .top{min-height:44px;align-items:flex-start}.top h1{line-height:32px;min-height:32px}.top>.row{align-items:flex-start}
  .phead{align-items:center;text-align:center;gap:16px}.phead .av.lg{width:120px;height:120px;font-size:36px}.phead .pname{font-size:24px;margin:0}
  .trtop{display:flex;gap:6px}.trmini{width:34px;height:34px;border-radius:50%;border:1px solid var(--acc);color:var(--acc);display:flex;align-items:center;justify-content:center}.trmini svg{width:18px;height:18px}
  .troph .ti{width:40px;height:40px;border-radius:50%;border:1px solid var(--acc);color:var(--acc);display:flex;align-items:center;justify-content:center}.troph .ti svg{width:20px;height:20px}.troph:not(.got){opacity:.5}
  .ncard .small.mut{white-space:nowrap;flex:none}.ncard .row.sp{align-items:flex-start;gap:8px}.ncard .row.sp b{min-width:0;white-space:normal}
  .card.hero .thumb.big{position:relative;top:auto;right:auto;width:100%;height:auto;aspect-ratio:16/9;border-radius:16px}.card.hero>div:nth-child(2){padding-right:0!important}
  h1.evt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.evpl{display:flex;align-items:center;gap:6px}.evpl svg{width:16px;height:16px;flex:none}
  .evc.is-on::before,.evc.is-ph::before{left:10px;top:14px;bottom:14px;width:3px;border-radius:3px}.evc{padding-left:24px}
  .agm{font-size:20px!important;margin-top:16px!important;padding:8px 2px}
  .avstack .av{width:28px;height:28px;margin-left:-8px;border:2px solid var(--card);font-size:10px}.avstack .av:first-child{margin-left:0}
  .chips{padding-left:0;padding-right:28px}
}
@media(max-width:899px){.greet{display:flex;flex-direction:column}.greet h1{order:1;margin-top:0;line-height:32px}.greet>.small{order:2;margin-top:2px}}

/* telefon: bez animacji wejścia (bezpieczne przewijanie i obrazy w Safari), bez dodatkowego kontekstu nakładania w nagłówku */
@media(max-width:899px){
  .fxin,.list.fx,.stg,.csplit .cr>.chat{animation:none!important;opacity:1!important;transform:none!important}
  .gbar{position:static!important;z-index:auto!important}
  .view{-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}
  .thumb,.lth,.rsm,[style*="--img"]{background-repeat:no-repeat}
}

/* telefon: płynność. Bez nakładki z szumem na cały ekran i bez rozmycia tła (drogie dla Safari), mniej cieni */
@media(max-width:899px){
  body::before,body::after{display:none!important}
  *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .card,.lcard,.rcard,.evc{box-shadow:none!important}
}

/* Windows (Electron): przyciski okna po prawej w pasku 40 px, więc przeciąganie nie obejmuje ich */
html.win #dragbar{right:150px}

/* pasek aktualizacji (pojawia się tylko po opublikowaniu przez admina) */
#updbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--sb) + 24px);z-index:130;display:flex;align-items:center;gap:12px;padding:10px 12px 10px 18px;border-radius:40px;background:#fff;color:#0A0A0A;box-shadow:0 12px 40px rgba(0,0,0,.5);max-width:calc(100vw - 24px)}
#updbar .ut{display:flex;flex-direction:column;min-width:0}#updbar .ut b{font-size:14px}#updbar .ut span{font-size:12px;color:#555;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:36vw}
#updbar .btn{background:#0A0A0A;color:#fff;height:36px;flex:none}#updbar .btn.line{background:transparent;color:#0A0A0A;border:1px solid #bbb}#updbar .ux{width:32px;height:32px;font-size:22px;color:#555;flex:none}
@media(max-width:899px){#updbar{bottom:calc(var(--tbh) + 12px)}}