:root{
--bg:#0b141a; --panel:#111b21; --panel-2:#202c33; --panel-3:#2a3942;
--text:#e9edef; --text-2:#94a3ac; --line:#222d34; --on-accent:#111b21;
--accent:#00a884; --bubble-in:#202c33; --bubble-out:#005c4b;
--danger:#f15c6d; --gold:#e8b04b; --shadow:0 8px 30px rgba(0,0,0,.35);
--ease:cubic-bezier(.22,.61,.36,1);
--nav-h:62px;
}
[data-theme="light"]{
--bg:#eae6df; --panel:#ffffff; --panel-2:#f0f2f5; --panel-3:#e9edef;
--text:#111b21; --text-2:#586872; --line:#e4e8ea; --on-accent:#ffffff;
--accent:#008069; --bubble-in:#ffffff; --bubble-out:#d9fdd3; --shadow:0 8px 30px rgba(0,0,0,.12);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select,[contenteditable="true"],[contenteditable=""]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
img,svg,video{-webkit-user-drag:none}
:focus:not(:focus-visible){outline:none}
html,body{height:100%}
html{overflow:hidden;overscroll-behavior-x:none}
body{
margin:0;background:var(--bg);color:var(--text);
font-family:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',sans-serif;
overscroll-behavior:none;
position:fixed;inset:0;width:100%;
overflow:hidden;
overflow:clip;
}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:9px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
#auth{
position:fixed;inset:0;display:grid;place-items:center;padding:20px;z-index:60;
background:radial-gradient(1100px 620px at 12% -10%, #00a88433, transparent 60%),
radial-gradient(900px 560px at 100% 110%, #e8b04b26, transparent 60%), #0a1014;
overflow:auto;will-change:transform,opacity;transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
#auth.hide{opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(0,-3%,0) scale(.985)}
.auth-wrap{width:min(980px,100%);display:grid;grid-template-columns:1.05fr .95fr;
border-radius:26px;overflow:hidden;box-shadow:0 30px 80px #0009;background:#111b21}
.auth-hero{padding:44px 40px;background:linear-gradient(150deg,#075e54,#00a884 60%,#0c8a6f);
position:relative;display:flex;flex-direction:column;justify-content:center;gap:18px;overflow:hidden}
.auth-hero::after{content:"";position:absolute;inset:0;opacity:.16;
background-image:repeating-linear-gradient(45deg,#000 0 14px,transparent 14px 28px),
repeating-linear-gradient(-45deg,#fff 0 14px,transparent 14px 28px);background-size:56px 56px}
.auth-hero>*{position:relative;z-index:1}
.logo{display:flex;align-items:center;gap:12px}
.logo-mark{width:52px;height:52px;border-radius:16px;background:#ffffff1f;
display:grid;place-items:center;font-size:27px;border:1px solid #ffffff3d}
.logo h1{margin:0;font-size:33px;letter-spacing:-.6px;color:#fff}
.auth-hero p{margin:0;color:#eafff8cc;font-size:15px;line-height:1.6;max-width:38ch}
.hero-points{display:grid;gap:10px;margin-top:6px}
.hero-points div{display:flex;gap:10px;align-items:center;color:#effff9;font-size:14px}
.hero-points span{width:26px;height:26px;border-radius:8px;background:#ffffff26;display:grid;place-items:center;font-size:14px}
.auth-form{padding:40px 38px;display:flex;flex-direction:column;gap:14px;background:var(--panel)}
.auth-form h2{margin:0;font-size:23px}
.auth-form .sub{margin:-6px 0 6px;color:var(--text-2);font-size:13px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12px;color:var(--text-2);font-weight:600;letter-spacing:.3px;text-transform:uppercase}
.field input{background:var(--panel-2);border:1px solid transparent;border-radius:11px;padding:12px 14px;outline:none;
transition:border-color .18s var(--ease),background .18s var(--ease)}
.field input:focus{border-color:var(--accent);background:var(--panel-3)}
.pw-box{position:relative;display:flex}
.pw-box input{flex:1;min-width:0;width:100%;padding-right:50px}
.pw-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:42px;height:42px;padding:0;border:0;
border-radius:10px;background:transparent;color:var(--text-2);display:grid;place-items:center;cursor:pointer;
-webkit-tap-highlight-color:transparent}
.pw-eye:hover{color:var(--text);background:var(--panel-3)}
.pw-eye:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.pw-eye svg{width:22px;height:22px;display:block}
.pw-eye .off,.pw-eye[aria-pressed="true"] .on{display:none}
.pw-eye[aria-pressed="true"] .off{display:block}
.pw-eye[aria-pressed="true"]{color:var(--accent)}
.avatars{display:flex;flex-wrap:wrap;gap:7px}
.avatars button{width:40px;height:40px;border-radius:11px;background:var(--panel-2);font-size:20px;
display:grid;place-items:center;border:2px solid transparent;transition:transform .16s var(--ease),border-color .16s}
.avatars button:hover{transform:translateY(-2px)}
.avatars button.on{border-color:var(--accent);background:var(--panel-3)}
.btn{background:var(--accent);color:var(--on-accent);border-radius:11px;padding:12px 16px;font-weight:600;
transition:filter .16s var(--ease),transform .12s var(--ease)}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:scale(.98)}
.btn.ghost{background:var(--panel-2);color:var(--text)}
.link{color:var(--accent);font-weight:600;cursor:pointer}
.err{color:var(--danger);font-size:13px;min-height:17px}
.hint{font-size:12px;color:var(--text-2);background:var(--panel-2);padding:10px 12px;border-radius:10px;line-height:1.5}
.lang-toggle{display:flex;gap:6px;background:#ffffff1f;padding:4px;border-radius:12px;width:max-content}
.lang-toggle button{padding:6px 13px;border-radius:9px;font-size:13px;font-weight:600;color:#fff;opacity:.72;transition:.18s var(--ease)}
.lang-toggle button.on{background:#fff;color:#075e54;opacity:1}
#app{display:none;height:100dvh;grid-template-columns:minmax(320px,31%) 1fr;grid-template-rows:minmax(0,1fr)}
#app.on{display:grid;animation:appIn .42s var(--ease) both}
@keyframes appIn{from{opacity:0;transform:translate3d(0,2.4%,0) scale(.99)}to{opacity:1;transform:none}}
.side{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0;position:relative}
.side-head{padding:10px 14px;background:var(--panel-2);display:flex;align-items:center;gap:10px;min-height:60px;flex:none}
.me-av{width:40px;height:40px;border-radius:50%;background:var(--panel-3);display:grid;place-items:center;
font-size:21px;cursor:pointer;flex:none;transition:transform .16s var(--ease)}
.me-av:active{transform:scale(.93)}
.me-av{overflow:hidden}
.me-av img,.av img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.side-head .grow{flex:1;min-width:0}
.side-head .nm{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-head .st{font-size:12px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon-btn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--text-2);
font-size:18px;flex:none;transition:background .16s var(--ease),color .16s,transform .12s}
.icon-btn:hover{background:#ffffff14;color:var(--text)}
.icon-btn:active{transform:scale(.9)}
.searchbar{padding:8px 12px;flex:none}
.searchbar input{width:100%;background:var(--panel-2);border:1px solid transparent;border-radius:9px;
padding:9px 14px;outline:none;font-size:14px;transition:border-color .18s var(--ease)}
.searchbar input:focus{border-color:var(--accent)}
.pages{flex:1;position:relative;overflow:hidden}
.page{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;
opacity:0;visibility:hidden;transform:translate3d(0,0,0);will-change:transform,opacity;
transition:opacity .18s var(--ease),transform .2s var(--ease),visibility .2s}
.page.on{opacity:1;visibility:visible;transform:none;z-index:2}
.page.out-left{transform:translate3d(-32%,0,0);opacity:0}
.page.out-right{transform:translate3d(32%,0,0);opacity:0}
.page.in-right{transform:translate3d(100%,0,0)}
.page.in-left{transform:translate3d(-100%,0,0)}
.page-scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.sec-title{padding:12px 16px 6px;font-size:12px;font-weight:700;letter-spacing:.6px;
text-transform:uppercase;color:var(--text-2)}
.list{flex:1;overflow-y:auto;overflow-x:hidden}
.row{display:flex;gap:12px;padding:11px 14px;cursor:pointer;align-items:center;
border-bottom:1px solid var(--line);transition:background .16s var(--ease)}
.row:hover{background:var(--panel-2)}
.row.on{background:var(--panel-3)}
.row:active{background:var(--panel-3)}
.av{width:48px;height:48px;border-radius:50%;background:var(--panel-3);display:grid;place-items:center;
font-size:24px;flex:none;position:relative}
.dot{position:absolute;right:1px;bottom:1px;width:12px;height:12px;border-radius:50%;
background:#4ad66d;border:2.5px solid var(--panel)}
.row .mid{flex:1;min-width:0}
.row .t{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.row .t b{font-weight:500;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .t i{font-style:normal;font-size:11.5px;color:var(--text-2);flex:none}
.row .p{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-top:3px}
.row .p span{font-size:13.5px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .p .badge,.row .p .at-badge{color:var(--on-accent,#fff)}
.badge{background:var(--accent);color:var(--on-accent);border-radius:11px;min-width:20px;height:20px;padding:0 6px;
font-size:11.5px;font-weight:700;display:grid;place-items:center;flex:none}
.empty-list{padding:52px 26px;text-align:center;color:var(--text-2)}
.empty-list .big{font-size:44px;margin-bottom:12px;opacity:.85}
.empty-list .h{font-size:16px;color:var(--text);margin-bottom:6px}
.ring-av{position:relative;width:48px;height:48px;flex:none}
.ring-av .av{width:48px;height:48px}
.ring-av.unseen::before{content:"";position:absolute;inset:-3px;border-radius:50%;
background:conic-gradient(var(--accent),var(--gold),var(--accent));z-index:0}
.ring-av.unseen .av{position:relative;z-index:1;border:2.5px solid var(--panel)}
.add-badge{position:absolute;right:-2px;bottom:-2px;width:19px;height:19px;border-radius:50%;
background:var(--accent);color:#fff;font-size:13px;display:grid;place-items:center;
border:2px solid var(--panel);z-index:2}
.call-ic{font-size:13px;margin-right:4px}
.call-ic.in{color:#4ad66d}.call-ic.out{color:#53bdeb}.call-ic.miss{color:var(--danger)}
.row .acts{display:flex;gap:2px;flex:none}
.bottom-nav{display:flex;background:var(--panel-2);border-top:1px solid var(--line);flex:none;
padding-bottom:env(safe-area-inset-bottom)}
.bottom-nav button{flex:1;height:var(--nav-h);display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:3px;color:var(--text-2);font-size:10.5px;font-weight:600;position:relative;
transition:color .2s var(--ease)}
.bottom-nav button .ic{font-size:21px;line-height:1;transition:transform .22s var(--ease)}
.bottom-nav button.on{color:var(--accent)}
.bottom-nav button.on .ic{transform:translateY(-2px) scale(1.12)}
.bottom-nav button::after{content:"";position:absolute;top:0;left:50%;width:0;height:3px;border-radius:0 0 3px 3px;
background:var(--accent);transform:translateX(-50%);transition:width .24s var(--ease)}
.bottom-nav button.on::after{width:46%}
.nav-badge{position:absolute;top:7px;left:calc(50% + 8px);background:var(--danger);color:#fff;
font-size:10px;font-weight:700;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
display:grid;place-items:center}
.fab{position:absolute;right:18px;bottom:calc(var(--nav-h) + 18px);width:54px;height:54px;border-radius:50%;
background:var(--accent);color:#fff;font-size:23px;display:grid;place-items:center;box-shadow:var(--shadow);
z-index:5;transition:transform .18s var(--ease),filter .18s}
.fab:hover{filter:brightness(1.08)}
.fab:active{transform:scale(.92)}
.main{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative;background:var(--bg)}
.main::before{content:"";position:absolute;inset:0;opacity:.05;pointer-events:none;
background-image:radial-gradient(circle at 25% 25%,#fff 1.6px,transparent 1.6px),
radial-gradient(circle at 75% 75%,#fff 1.6px,transparent 1.6px);background-size:46px 46px}
.main[data-wp="kente"]::before{opacity:.07;background-image:
repeating-linear-gradient(45deg,#e8b04b 0 10px,transparent 10px 20px),
repeating-linear-gradient(-45deg,#00a884 0 10px,transparent 10px 24px);background-size:64px 64px}
.main[data-wp="uli"]::before{opacity:.08;background-image:
repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 26px),
repeating-linear-gradient(90deg,#fff 0 1px,transparent 1px 26px);background-size:26px 26px}
.main[data-wp="plain"]::before{opacity:0}
.chat-head{position:relative;z-index:2;background:var(--panel-2);padding:9px 14px;display:flex;
align-items:center;gap:12px;min-height:60px;flex:none}
.chat-head .mid{flex:1;min-width:0;cursor:pointer}
.chat-head .mid b{display:block;font-weight:500;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-head .mid span{font-size:12.5px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.chat-head .mid span.live{color:var(--accent)}
.msgs{flex:1;overflow-y:auto;padding:18px 6% 12px;position:relative;z-index:1;display:flex;flex-direction:column;gap:3px}
.daysep{align-self:center;background:var(--panel-2);color:var(--text-2);font-size:12px;padding:5px 13px;
border-radius:9px;margin:12px 0 8px;box-shadow:0 1px 2px #0003}
.sysmsg{align-self:center;background:var(--panel-2);color:var(--gold);font-size:12.5px;padding:6px 14px;
border-radius:9px;margin:6px 0;text-align:center}
.msg{max-width:min(70%,620px);display:flex;flex-direction:column;position:relative}
.msg.enter{animation:pop .24s var(--ease) both}
@keyframes pop{from{opacity:0;transform:translate3d(0,10px,0) scale(.98)}to{opacity:1;transform:none}}
.msg.out{align-self:flex-end}
.msg.in{align-self:flex-start}
.msg+.msg{margin-top:2px}
.msg.first{margin-top:10px}
.bub{background:var(--bubble-in);padding:7px 10px 6px;border-radius:9px;box-shadow:0 1px 1px #00000026;
position:relative;word-wrap:break-word;overflow-wrap:anywhere}
.msg.out .bub{background:var(--bubble-out)}
.msg.first.in .bub{border-top-left-radius:2px}
.msg.first.out .bub{border-top-right-radius:2px}
.bub .who{font-size:12.8px;font-weight:600;color:var(--gold);margin-bottom:2px}
.bub .tx{font-size:14.7px;line-height:1.42;white-space:pre-wrap}
.bub .tx.del{font-style:italic;color:var(--text-2);font-size:14px}
.bub .meta{float:right;margin:6px 0 -3px 9px;font-size:11px;color:var(--text-2);display:flex;gap:4px;align-items:center}
.tick{color:var(--text-2);font-size:12px;transition:color .3s var(--ease)}
.tick.read{color:#53bdeb}.tick.one{letter-spacing:0;padding-right:3px}
.tick.pend{display:inline-flex;vertical-align:-2px;opacity:.85}
.tick.fail{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;background:#e5484d;color:#fff;font-weight:800;font-size:10.5px}
.up-tag{font-size:11px;opacity:.8;margin-right:2px}
.msg.sending .bub img.photo{opacity:.75}
.msg-retry{display:flex;align-items:center;gap:8px;justify-content:flex-end;font-size:12px;color:#e5484d;margin:3px 4px 0}
.msg-retry button{border:0;background:transparent;color:var(--accent,#00a884);font:inherit;font-weight:700;padding:6px 4px;cursor:pointer}
.msg-retry button[data-discard]{color:var(--text-2)}
.bub img.photo{max-width:100%;border-radius:7px;display:block;margin-bottom:3px;cursor:pointer}
.bub audio{height:38px;margin:2px 0;width:250px;max-width:100%}
.quote{border-left:3px solid var(--gold);background:#ffffff14;border-radius:5px;padding:5px 8px;margin-bottom:4px;font-size:13px}
.quote b{color:var(--gold);display:block;font-size:12.5px}
.quote span{color:var(--text-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.reacts{display:flex;gap:4px;margin-top:-6px;margin-left:6px;flex-wrap:wrap;position:relative;z-index:2}
.msg.out .reacts{justify-content:flex-end;margin-right:6px}
.reacts button{background:var(--panel-2);border:1px solid var(--line);border-radius:11px;padding:2px 7px;
font-size:12px;box-shadow:0 1px 3px #0003;transition:transform .14s var(--ease)}
.reacts button:active{transform:scale(.9)}
.reacts button.mine{border-color:var(--accent)}
.mtools{position:absolute;top:-14px;display:flex;gap:2px;background:var(--panel-2);border-radius:20px;
padding:3px 5px;box-shadow:var(--shadow);z-index:5;
opacity:0;visibility:hidden;transform:translateY(4px);
transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s}
.msg.out .mtools{right:4px}
.msg.in .mtools{left:4px}
.msg:hover .mtools{opacity:1;visibility:visible;transform:none}
.mtools button{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;font-size:14px}
.mtools button:hover{background:#ffffff1f}
.composer{position:relative;z-index:2;background:var(--panel-2);padding:9px 14px calc(9px + env(safe-area-inset-bottom));display:flex;gap:9px;align-items:flex-end;flex:none}
.composer textarea{flex:1;background:var(--panel);border:none;border-radius:9px;padding:11px 14px;
resize:none;max-height:130px;outline:none;font-size:14.6px;line-height:1.4}
.send-btn{width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff;display:grid;
place-items:center;font-size:18px;flex:none;transition:transform .14s var(--ease),filter .16s}
.send-btn:active{transform:scale(.9)}
.send-btn[disabled]{opacity:.55;cursor:not-allowed}
.rec{background:var(--danger)!important;animation:pulse 1.1s infinite}
@keyframes pulse{50%{opacity:.55}}
.reply-strip{position:relative;z-index:2;background:var(--panel-2);padding:0 14px;flex:none;
max-height:0;overflow:hidden;transition:max-height .24s var(--ease),padding .24s var(--ease)}
.reply-strip.on{max-height:80px;padding:8px 14px 0}
.reply-strip .in{background:var(--panel);border-left:3px solid var(--accent);border-radius:7px;
padding:7px 10px;display:flex;gap:10px;align-items:center}
.reply-strip .in div{flex:1;min-width:0}
.reply-strip b{color:var(--accent);font-size:12.5px;display:block}
.reply-strip span{font-size:13px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.typing-line{position:relative;z-index:2;height:0}
.typing-pill{position:absolute;bottom:4px;left:6%;background:var(--panel-2);border-radius:12px;padding:5px 12px;
font-size:12.5px;color:var(--accent);box-shadow:var(--shadow);
opacity:0;transform:translateY(6px);transition:opacity .2s var(--ease),transform .2s var(--ease)}
.typing-pill.on{opacity:1;transform:none}
.emoji-bar{position:relative;z-index:3;background:var(--panel-2);padding:0 14px;display:flex;flex-wrap:wrap;
gap:4px;overflow-y:auto;border-top:1px solid var(--line);flex:none;
max-height:0;transition:max-height .26s var(--ease),padding .26s var(--ease)}
.emoji-bar.on{max-height:190px;padding:10px 14px}
.emoji-bar button{width:36px;height:36px;font-size:21px;border-radius:8px;transition:background .14s,transform .14s}
.emoji-bar button:hover{background:#ffffff14;transform:scale(1.15)}
.welcome{flex:1;display:grid;place-items:center;text-align:center;padding:40px;position:relative;z-index:1}
.welcome .in{max-width:440px}
.welcome .ring{width:120px;height:120px;border-radius:50%;background:var(--panel-2);display:grid;
place-items:center;font-size:56px;margin:0 auto 22px;box-shadow:var(--shadow)}
.welcome h2{margin:0 0 8px;font-weight:400;font-size:29px}
.welcome p{color:var(--text-2);line-height:1.6;font-size:14.5px}
.welcome .rule{height:1px;background:var(--line);margin:26px 0}
.scrim{position:fixed;inset:0;background:#000000a6;display:grid;place-items:center;z-index:80;padding:20px;
opacity:0;visibility:hidden;transition:opacity .16s var(--ease),visibility .16s}
.scrim.on{opacity:1;visibility:visible}
.modal{background:var(--panel);border-radius:16px;width:min(460px,100%);max-height:86vh;overflow:auto;
box-shadow:var(--shadow);transform:translate3d(0,42px,0) scale(.96);opacity:0;will-change:transform,opacity;
transition:transform .2s var(--ease),opacity .16s var(--ease)}
.scrim.on .modal{transform:none;opacity:1}
.modal header{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;
position:sticky;top:0;background:var(--panel);z-index:2}
.modal header b{flex:1;font-size:17px}
.modal .body{padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.modal footer{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end}
.pick{display:flex;gap:11px;align-items:center;padding:9px;border-radius:11px;cursor:pointer;transition:background .16s}
.pick:hover{background:var(--panel-2)}
.pick .mid{flex:1;min-width:0}
.pick .mid b{display:block;font-weight:500;font-size:15px}
.pick .mid span{font-size:12.5px;color:var(--text-2)}
.pick input{width:19px;height:19px;accent-color:var(--accent)}
.seg{display:flex;gap:6px;background:var(--panel-2);padding:4px;border-radius:11px}
.seg button{flex:1;padding:9px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--text-2);
transition:background .2s var(--ease),color .2s}
.seg button.on{background:var(--accent);color:var(--on-accent)}
.set-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.set-row .lbl{flex:1;font-size:14.5px}
.set-row .lbl small{display:block;color:var(--text-2);font-size:12.5px;margin-top:2px}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(80px);background:var(--panel-3);
padding:11px 20px;border-radius:11px;box-shadow:var(--shadow);z-index:90;opacity:0;font-size:14px;
transition:transform .3s var(--ease),opacity .3s var(--ease)}
.toast.on{transform:translateX(-50%);opacity:1}
#lightbox{position:fixed;inset:0;background:#000000e8;display:grid;place-items:center;z-index:95;padding:30px;
opacity:0;visibility:hidden;transition:opacity .24s var(--ease),visibility .24s}
#lightbox.on{opacity:1;visibility:visible}
#lightbox img{max-width:100%;max-height:100%;border-radius:10px}
#callView{position:fixed;inset:0;z-index:88;display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:18px;color:#fff;
background:linear-gradient(160deg,#0d2b25,#075e54 55%,#0b141a);
opacity:0;visibility:hidden;transform:translate3d(0,100%,0);will-change:transform;
transition:opacity .2s var(--ease),transform .22s var(--ease),visibility .22s}
#callView.on{opacity:1;visibility:visible;transform:none}
#callView .cav{width:132px;height:132px;border-radius:50%;background:#ffffff26;display:grid;place-items:center;
font-size:64px;animation:ripple 2s infinite}
@keyframes ripple{0%{box-shadow:0 0 0 0 #ffffff40}70%{box-shadow:0 0 0 28px #ffffff00}100%{box-shadow:0 0 0 0 #ffffff00}}
#callView h2{margin:0;font-size:26px;font-weight:500}
#callView .cst{color:#d7fff4;font-size:15px;min-height:22px}
#callView .cnote{color:#ffffff8c;font-size:12px}
.call-actions{display:flex;gap:10px;margin-top:18px;align-items:flex-start;justify-content:center;flex-wrap:wrap}
.call-actions button{width:76px;background:none;display:flex;flex-direction:column;align-items:center;gap:7px;
padding:0;color:#fff;transition:transform .16s var(--ease)}
.call-actions button .ci{width:60px;height:60px;border-radius:50%;background:#ffffff26;font-size:24px;
display:grid;place-items:center;font-style:normal;line-height:1;
transition:background .18s var(--ease),color .18s,box-shadow .18s,transform .16s var(--ease)}
.call-actions button .cl{font-size:11.5px;font-style:normal;line-height:1.25;text-align:center;
color:#ffffffdb;letter-spacing:.1px;text-shadow:0 1px 4px rgba(0,0,0,.55);
min-height:calc(2 * 1.25em);display:flex;align-items:flex-start;justify-content:center}
.call-actions button:hover .ci{background:#ffffff38}
.call-actions button:active{transform:scale(.94)}
.call-actions button.hang .ci{background:var(--danger);transform:rotate(135deg)}
.call-actions button.hang .cl{color:#fff}
.call-actions button.act .ci{background:#fff;color:#075e54;box-shadow:0 0 0 4px #ffffff2e}
.call-actions button:focus-visible .ci{outline:3px solid #fff;outline-offset:3px}
@media(max-width:900px){
.auth-wrap{grid-template-columns:1fr}
.auth-hero{padding:30px 26px}
.auth-hero p,.hero-points{display:none}
.auth-form{padding:26px 22px}
}
@media(max-width:780px){
#app.on{grid-template-columns:1fr}
.side{border-right:none}
.main{position:fixed;inset:0;z-index:40;transform:translate3d(100%,0,0);
transition:transform .18s var(--ease);will-change:transform}
#app.chatopen .main{transform:none}
#app.chatopen .side{transform:translate3d(-22%,0,0);transition:transform .18s var(--ease)}
.side{transition:transform .18s var(--ease)}
.msgs{padding:14px 12px 10px}
.msg{max-width:86%}
.typing-pill{left:12px}
}
.only-mobile{display:none}
@media(max-width:780px){.only-mobile{display:grid}}
.no-mobile{display:grid}
@media(max-width:780px){.no-mobile{display:none}}
#storyView{position:fixed;inset:0;z-index:92;background:#000;overflow:hidden;touch-action:none;overscroll-behavior:contain;
opacity:0;visibility:hidden;transform:translate3d(0,100%,0);will-change:transform;
transition:opacity .18s var(--ease),transform .22s var(--ease),visibility .22s}
#storyView.on{opacity:1;visibility:visible;transform:none}
#storyView.drag{transition:none}
.sv-frame{position:absolute;inset:0;will-change:transform}
.sv-frame.slide{transition:transform .2s cubic-bezier(.3,.7,.4,1),opacity .2s}
.sv-top{position:absolute;left:0;right:0;top:0;z-index:5;padding-top:env(safe-area-inset-top,0px);
background:linear-gradient(#000000a6,#00000040 70%,transparent);pointer-events:none}
.sv-top button{pointer-events:auto}
.sv-bottom{position:absolute;left:0;right:0;bottom:0;z-index:5;padding-bottom:env(safe-area-inset-bottom,0px);
background:linear-gradient(transparent,#00000080 35%,#000000c0)}
.sv-bars{display:flex;gap:4px;padding:10px 12px 6px}
.sv-bars i{flex:1;height:3px;background:#ffffff4d;border-radius:3px;overflow:hidden;position:relative}
.sv-bars i b{position:absolute;inset:0;width:0;background:#fff;border-radius:3px}
.sv-bars i.done b{width:100%}
.sv-bars i.live b{animation:svfill 6s linear forwards}
@keyframes svfill{from{width:0}to{width:100%}}
.sv-head{display:flex;align-items:center;gap:11px;padding:4px 14px 12px;color:#fff;text-shadow:0 1px 3px #0008}
.sv-head .av{width:38px;height:38px;font-size:19px;background:#ffffff26}
.sv-head .mid{flex:1;min-width:0}
.sv-head b{display:block;font-size:14.5px}
.sv-head span{font-size:11.5px;color:#ffffffc0}
.sv-stage{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;background:#000}
.sv-stage .sv-bgblur{position:absolute;inset:-40px;background-size:cover;background-position:center;
filter:blur(30px) brightness(.5);transform:scale(1.15)}
.sv-stage img,.sv-stage video{position:relative;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.sv-stage .textcard{padding:90px 26px 160px;text-align:center;font-size:clamp(22px,6vw,34px);line-height:1.45;color:#fff;
width:100%;height:100%;display:grid;place-items:center;word-break:break-word}
.sv-cap{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 150px);padding:12px 18px;
color:#fff;font-size:15.5px;text-align:center;text-shadow:0 1px 4px #000c;z-index:2}
.sv-tap{position:absolute;top:0;bottom:0;width:30%;z-index:3}
.sv-tap.l{left:0}.sv-tap.r{right:0}
.sv-foot{padding:8px 16px 6px;display:flex;align-items:center;gap:12px;color:#ffffffc0;font-size:12px}
.sv-foot .btn{padding:8px 14px;font-size:13px}
.sv-paused{position:absolute;left:50%;top:50%;z-index:4;transform:translate(-50%,-50%) scale(.8);width:64px;height:64px;border-radius:50%;
background:#0007;color:#fff;display:grid;place-items:center;font-size:20px;letter-spacing:-3px;opacity:0;transition:opacity .15s,transform .15s;pointer-events:none}
#storyView.paused .sv-paused{opacity:1;transform:translate(-50%,-50%) scale(1)}
#storyView.paused .sv-top,#storyView.paused .sv-bottom{opacity:.15;transition:opacity .2s}
@media(min-width:781px){.sv-stage img,.sv-stage video{max-width:min(100%,62vh)}}
.st-preview{border-radius:12px;overflow:hidden;background:var(--panel-2);display:grid;place-items:center;
min-height:170px;max-height:260px}
.st-preview img,.st-preview video{max-width:100%;max-height:260px;display:block}
.fwd{font-size:12px;font-style:italic;opacity:.7;margin-bottom:2px}.meta .star{margin-right:3px;font-size:11px}.st-stage{display:none}.st-rp{display:flex;align-items:center;gap:8px;font-size:13.5px}
.st-bgs{display:flex;gap:7px;flex-wrap:wrap}
.st-bgs button{width:38px;height:38px;border-radius:9px;border:2px solid transparent;transition:transform .15s var(--ease)}
.st-bgs button.on{border-color:var(--accent);transform:scale(1.08)}
.sec-card{background:var(--panel-2);border-radius:12px;padding:4px 14px}
.switch{position:relative;width:46px;height:26px;border-radius:14px;background:var(--panel-3);flex:none;
transition:background .22s var(--ease)}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
background:#fff;transition:transform .24s var(--ease)}
.switch.on{background:var(--accent)}
.switch.on::after{transform:translateX(20px)}
.sel{background:var(--panel-3);border:none;border-radius:9px;padding:8px 11px;outline:none;font-size:13.5px}
.blocked-row{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line)}
.blocked-row .mid{flex:1;min-width:0}
.pill-danger{background:#f15c6d1f;color:var(--danger);border-radius:9px;padding:7px 13px;font-size:13px;font-weight:600}
.sess-row{display:flex;gap:11px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.sess-row .mid{flex:1;min-width:0}
.sess-row small{display:block;color:var(--text-2);font-size:12px;margin-top:2px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag-now{background:var(--accent);color:var(--on-accent);font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:8px}
.dir-arrow{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;
font-size:11px;font-weight:700;margin-right:6px;vertical-align:-3px}
.dir-arrow.out{background:#53bdeb26;color:#53bdeb}
.dir-arrow.in{background:#4ad66d26;color:#4ad66d}
.dir-arrow.missed{background:#f15c6d26;color:var(--danger)}
#ringBanner{position:fixed;top:14px;left:50%;transform:translate(-50%,-160%);z-index:96;
background:var(--panel-2);border-radius:16px;box-shadow:var(--shadow);padding:12px 16px;
display:flex;align-items:center;gap:13px;min-width:min(400px,92vw);
transition:transform .4s var(--ease)}
#ringBanner.on{transform:translate(-50%,0)}
#ringBanner .mid{flex:1;min-width:0}
#ringBanner b{display:block;font-size:15px}
#ringBanner span{font-size:12.5px;color:var(--text-2)}
#ringBanner button{width:44px;height:44px;border-radius:50%;font-size:19px;display:grid;place-items:center;color:#fff}
#ringBanner .yes{background:var(--accent);animation:pulse 1.2s infinite}
#ringBanner .no{background:var(--danger)}
:root{
--d-lip:rgba(255,255,255,.16);
--d-edge:rgba(0,0,0,.44);
--d-amb:rgba(0,0,0,.32);
--d-rise:0 1px 0 var(--d-lip) inset, 0 -2px 0 rgba(0,0,0,.22) inset,
0 3px 0 -1px var(--d-edge), 0 6px 14px -4px var(--d-amb);
--d-rise-sm:0 1px 0 var(--d-lip) inset, 0 -1px 0 rgba(0,0,0,.2) inset,
0 2px 0 -1px var(--d-edge), 0 4px 9px -3px var(--d-amb);
--d-press:0 1px 0 var(--d-lip) inset, 0 2px 6px rgba(0,0,0,.36) inset;
--d-spring:cubic-bezier(.34,1.56,.64,1);
}
[data-theme="light"]{
--d-lip:rgba(255,255,255,.95);
--d-edge:rgba(0,0,0,.16);
--d-amb:rgba(16,32,40,.22);
}
.btn{
background-image:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 46%,rgba(0,0,0,.14));
box-shadow:var(--d-rise);
transform:translateZ(0);
transition:box-shadow .16s var(--ease),transform .13s var(--d-spring),filter .16s;
}
.btn:hover{transform:translateY(-1.5px);box-shadow:0 1px 0 var(--d-lip) inset,0 -2px 0 rgba(0,0,0,.22) inset,0 5px 0 -1px var(--d-edge),0 10px 20px -6px var(--d-amb)}
.btn:active{transform:translateY(2px) scale(.985);box-shadow:var(--d-press)}
.btn.ghost{background-image:linear-gradient(180deg,rgba(255,255,255,.1),rgba(0,0,0,.1))}
.icon-btn{
background-image:linear-gradient(180deg,rgba(255,255,255,.09),rgba(0,0,0,.1));
box-shadow:var(--d-rise-sm);
transition:box-shadow .16s var(--ease),transform .13s var(--d-spring),background .16s,color .16s;
}
.icon-btn:hover{background:#ffffff1c;transform:translateY(-1.5px);color:var(--text);
box-shadow:0 1px 0 var(--d-lip) inset,0 -1px 0 rgba(0,0,0,.2) inset,0 4px 0 -1px var(--d-edge),0 8px 16px -5px var(--d-amb)}
.icon-btn:active{transform:translateY(2px) scale(.94);box-shadow:var(--d-press)}
.send-btn{
background-image:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 48%,rgba(0,0,0,.2));
box-shadow:var(--d-rise),0 0 0 1px rgba(255,255,255,.06) inset;
transition:box-shadow .16s var(--ease),transform .13s var(--d-spring),filter .16s;
}
.send-btn:hover{transform:translateY(-2px) scale(1.04)}
.send-btn:active{transform:translateY(2px) scale(.93);box-shadow:var(--d-press)}
.send-btn[disabled]{transform:none;box-shadow:var(--d-press);filter:saturate(.6)}
.fab{
background-image:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 45%,rgba(0,0,0,.24));
box-shadow:0 2px 0 var(--d-lip) inset,0 -3px 0 rgba(0,0,0,.26) inset,
0 6px 0 -1px var(--d-edge),0 14px 26px -8px rgba(0,0,0,.55);
transition:box-shadow .18s var(--ease),transform .15s var(--d-spring),filter .18s;
}
.fab:hover{transform:translateY(-3px) scale(1.05)}
.fab:active{transform:translateY(3px) scale(.94);
box-shadow:0 1px 0 var(--d-lip) inset,0 3px 9px rgba(0,0,0,.4) inset}
.bottom-nav{
background-image:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.14));
box-shadow:0 -1px 0 var(--d-lip) inset,0 -8px 20px -12px rgba(0,0,0,.6);
}
.bottom-nav button .ic{
display:grid;place-items:center;width:34px;height:34px;border-radius:11px;
transition:transform .26s var(--d-spring),box-shadow .22s var(--ease),background .22s;
}
.bottom-nav button:active .ic{transform:translateY(2px) scale(.9)}
.bottom-nav button.on .ic{
transform:translateY(-3px) scale(1.06);
background-image:linear-gradient(180deg,rgba(0,168,132,.32),rgba(0,168,132,.08));
box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 3px 0 -1px rgba(0,0,0,.4),0 7px 14px -5px rgba(0,168,132,.55);
}
.av,.me-av{
background-image:radial-gradient(circle at 32% 26%,rgba(255,255,255,.22),rgba(255,255,255,0) 58%);
box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 -2px 4px rgba(0,0,0,.28) inset,
0 3px 8px -2px rgba(0,0,0,.45);
}
.me-av{transition:transform .15s var(--d-spring),box-shadow .16s}
.me-av:hover{transform:translateY(-2px)}
.me-av:active{transform:translateY(2px) scale(.94);box-shadow:var(--d-press)}
.ring-av.unseen .av{box-shadow:0 2px 10px -2px rgba(0,168,132,.6),0 1px 0 rgba(255,255,255,.16) inset}
.dot{box-shadow:0 0 0 2px rgba(0,0,0,.25),0 2px 5px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.5) inset}
.avatars button,.emoji-bar button,.st-bgs button{
box-shadow:var(--d-rise-sm);
background-image:linear-gradient(180deg,rgba(255,255,255,.1),rgba(0,0,0,.1));
transition:transform .15s var(--d-spring),box-shadow .16s var(--ease);
}
.avatars button:hover,.emoji-bar button:hover,.st-bgs button:hover{transform:translateY(-3px) scale(1.06)}
.avatars button:active,.emoji-bar button:active,.st-bgs button:active{transform:translateY(2px) scale(.92);box-shadow:var(--d-press)}
.avatars button.on,.st-bgs button.on{
box-shadow:0 0 0 2px var(--accent),0 1px 0 var(--d-lip) inset,0 4px 10px -3px var(--d-amb);
}
.seg,.lang-toggle{box-shadow:0 2px 7px rgba(0,0,0,.26) inset,0 1px 0 var(--d-lip)}
.seg button,.lang-toggle button{transition:transform .14s var(--d-spring),box-shadow .18s var(--ease),background .2s,color .2s}
.seg button.on,.lang-toggle button.on{
background-image:linear-gradient(180deg,rgba(255,255,255,.24),rgba(0,0,0,.14));
box-shadow:0 1px 0 var(--d-lip) inset,0 2px 0 -1px var(--d-edge),0 5px 12px -4px var(--d-amb);
transform:translateY(-1px);
}
.seg button:active,.lang-toggle button:active{transform:translateY(1.5px) scale(.97)}
.badge,.nav-badge{
background-image:linear-gradient(180deg,rgba(255,255,255,.3),rgba(0,0,0,.18));
box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 2px 5px -1px rgba(0,0,0,.5);
}
.reacts button,.mtools,.pill-danger,.tag-now{
box-shadow:0 1px 0 var(--d-lip) inset,0 2px 0 -1px var(--d-edge),0 5px 12px -4px var(--d-amb);
}
.reacts button{background-image:linear-gradient(180deg,rgba(255,255,255,.1),rgba(0,0,0,.08));
transition:transform .14s var(--d-spring),box-shadow .16s}
.reacts button:hover{transform:translateY(-2px)}
.reacts button:active{transform:translateY(2px) scale(.92);box-shadow:var(--d-press)}
.mtools button{transition:transform .13s var(--d-spring),background .16s}
.mtools button:active{transform:translateY(2px) scale(.9)}
.pill-danger{transition:transform .14s var(--d-spring)}
.pill-danger:active{transform:translateY(2px) scale(.96);box-shadow:var(--d-press)}
.call-actions button .ci{
background-image:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 46%,rgba(0,0,0,.22));
box-shadow:0 2px 0 rgba(255,255,255,.2) inset,0 -3px 0 rgba(0,0,0,.3) inset,
0 6px 0 -2px rgba(0,0,0,.45),0 14px 26px -8px rgba(0,0,0,.6);
}
.call-actions button:hover .ci{transform:translateY(-2px) scale(1.04)}
.call-actions button:active .ci{transform:translateY(4px) scale(.93);
box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 3px 9px rgba(0,0,0,.45) inset}
.call-actions button.hang:hover .ci{transform:translateY(-2px) scale(1.04) rotate(135deg)}
.call-actions button.hang:active .ci{transform:translateY(4px) scale(.93) rotate(135deg)}
#ringBanner{box-shadow:0 1px 0 var(--d-lip) inset,0 10px 30px -8px rgba(0,0,0,.6)}
#ringBanner button{
background-image:linear-gradient(180deg,rgba(255,255,255,.26),rgba(0,0,0,.2));
box-shadow:0 1px 0 rgba(255,255,255,.24) inset,0 3px 0 -1px rgba(0,0,0,.4),0 7px 14px -5px rgba(0,0,0,.5);
transition:transform .14s var(--d-spring)}
#ringBanner button:active{transform:translateY(3px) scale(.93)}
.switch{box-shadow:0 2px 6px rgba(0,0,0,.32) inset,0 1px 0 var(--d-lip)}
.switch::after{box-shadow:0 2px 4px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.9) inset}
.field input,.searchbar input,.sel,.composer textarea{
box-shadow:0 2px 5px rgba(0,0,0,.2) inset,0 1px 0 var(--d-lip);
}
.sec-card,.modal,.bub,.daysep,.sysmsg,.toast{box-shadow:0 1px 0 var(--d-lip) inset,0 8px 22px -8px var(--d-amb)}
.bub{box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 2px 5px -1px rgba(0,0,0,.32)}
.logo-mark{box-shadow:0 2px 0 rgba(255,255,255,.2) inset,0 -3px 0 rgba(0,0,0,.16) inset,0 8px 18px -6px rgba(0,0,0,.5)}
.dir-arrow{box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 2px 4px -1px rgba(0,0,0,.4)}
.add-badge{box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 2px 5px -1px rgba(0,0,0,.5)}
@media (prefers-reduced-motion:reduce){
.btn,.icon-btn,.send-btn,.fab,.call-actions button{transition:none!important}
}
.market-strip{
margin:0 12px 6px;padding:3px 10px 3px 7px;border-radius:999px;display:inline-flex;align-items:center;gap:5px;
cursor:pointer;color:#fff;font-size:12px;line-height:18px;max-width:calc(100% - 24px);width:max-content;align-self:flex-start;
box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 2px 6px -2px rgba(0,0,0,.5);transition:transform .15s var(--ease)}
.market-strip:active{transform:scale(.96)}
.market-strip .ms-ic{font-size:13px}
.market-strip b{font-weight:700}
.market-strip .ms-sub{opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.market-strip .ms-sub::before{content:"· "}
.cal-hero{margin:12px;border-radius:18px;padding:22px 18px;text-align:center;color:#fff;position:relative;overflow:hidden;
box-shadow:0 2px 0 rgba(255,255,255,.18) inset,0 6px 0 -2px rgba(0,0,0,.42),0 16px 30px -10px rgba(0,0,0,.62)}
.cal-hero::after{content:"";position:absolute;inset:0;opacity:.16;
background-image:repeating-linear-gradient(45deg,#000 0 12px,transparent 12px 24px),
repeating-linear-gradient(-45deg,#fff 0 12px,transparent 12px 24px);background-size:48px 48px}
.cal-hero>*{position:relative;z-index:1}
.cal-hero .big{font-size:52px;line-height:1;filter:drop-shadow(0 3px 5px rgba(0,0,0,.5))}
.cal-hero h2{margin:9px 0 2px;font-size:31px;letter-spacing:-.4px}
.cal-hero .sub{font-size:13px;opacity:.94}
.cal-hero .meta{margin-top:12px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.cal-hero .chip{background:rgba(0,0,0,.3);border-radius:10px;padding:5px 11px;font-size:11.5px}
.cal-nav{display:flex;align-items:center;gap:10px;padding:6px 14px 10px}
.cal-nav b{flex:1;text-align:center;font-size:15.5px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:0 12px 10px}
.cal-grid .hd{text-align:center;font-size:10.5px;font-weight:700;color:var(--text-2);padding:4px 0}
.cal-cell{aspect-ratio:1;border-radius:10px;display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:1px;background:var(--panel-2);cursor:pointer;position:relative;
box-shadow:0 1px 0 var(--d-lip) inset,0 2px 0 -1px var(--d-edge),0 4px 8px -4px var(--d-amb);
transition:transform .14s var(--d-spring),box-shadow .16s var(--ease)}
.cal-cell:hover{transform:translateY(-2px)}
.cal-cell:active{transform:translateY(2px) scale(.95);box-shadow:var(--d-press)}
.cal-cell.blank{background:transparent;box-shadow:none;cursor:default}
.cal-cell .n{font-size:13.5px;font-weight:600;line-height:1}
.cal-cell .m{font-size:8.5px;font-weight:700;letter-spacing:.2px;opacity:.95}
.cal-cell.today{outline:2.5px solid var(--accent);outline-offset:1px}
.cal-cell.sel{box-shadow:0 0 0 2px var(--gold),0 4px 10px -3px var(--d-amb)}
.md-list{padding:0 12px 14px;display:grid;gap:8px}
.md-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:13px;color:#fff;
box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 4px 0 -1px rgba(0,0,0,.4),0 9px 18px -8px rgba(0,0,0,.55)}
.md-card .e{font-size:26px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.md-card .mid{flex:1;min-width:0}
.md-card b{display:block;font-size:15.5px}
.md-card small{font-size:11.5px;opacity:.93;display:block;margin-top:2px}
.md-card .cd{font-size:10.5px;background:rgba(0,0,0,.32);padding:5px 10px;border-radius:9px;white-space:nowrap}
.up-row{display:flex;align-items:center;gap:11px;padding:9px 14px;border-bottom:1px solid var(--line)}
.up-row .pip{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:16px;color:#fff;flex:none;
box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 3px 6px -2px rgba(0,0,0,.5)}
.up-row .mid{flex:1;min-width:0}
.up-row b{font-size:14px;font-weight:600}
.up-row small{color:var(--text-2);font-size:12px;display:block}
.up-row .tag{font-size:10.5px;color:var(--accent);font-weight:700}
.photo-pick{position:relative;width:96px;margin:0 auto}
.photo-pick .me-av{overflow:hidden}
.photo-pick .me-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.cam-badge{position:absolute;right:-2px;bottom:-2px;width:32px;height:32px;border-radius:50%;
background:var(--accent);color:#fff;font-size:15px;display:grid;place-items:center;
border:3px solid var(--panel);
box-shadow:0 2px 0 -1px rgba(0,0,0,.4),0 5px 10px -3px rgba(0,0,0,.5);
transition:transform .15s var(--d-spring)}
.cam-badge:active{transform:translateY(2px) scale(.92)}
.bg-preview{height:120px;border-radius:12px;background:var(--panel-2);background-size:cover;background-position:center;
box-shadow:0 2px 6px rgba(0,0,0,.3) inset}
.main[data-wp="photo"]::before{opacity:0}
.main .bg-img{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;display:none}
.main[data-wp="photo"] .bg-img{display:block}
.main[data-wp="photo"] .bg-img::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.55)}
[data-mode="light"] .main[data-wp="photo"] .bg-img::after{background:rgba(255,255,255,.45)}
.av img,.ring-av .av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.av{overflow:hidden}
.av.st-on,.av.st-seen{box-shadow:0 0 0 2px var(--panel),0 0 0 4.5px var(--accent);cursor:pointer}
.av.st-seen{box-shadow:0 0 0 2px var(--panel),0 0 0 4px color-mix(in srgb,var(--text-2) 55%,transparent)}
.pc-av.st-on,.pc-av.st-seen{box-shadow:0 0 0 3px var(--panel),0 0 0 6px var(--accent)}
.pc-av.st-seen{box-shadow:0 0 0 3px var(--panel),0 0 0 5.5px color-mix(in srgb,var(--text-2) 55%,transparent)}
#calPage{padding-bottom:18px}
.bottom-nav{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.bottom-nav::-webkit-scrollbar{display:none}
.bottom-nav button{flex:0 0 auto;min-width:19%;padding:0 4px}
@media(max-width:520px){.bottom-nav button{min-width:23%}}
.composer-card{margin:12px;padding:12px 14px;border-radius:15px;background:var(--panel-2);
display:flex;align-items:center;gap:11px;cursor:pointer;
box-shadow:0 1px 0 var(--d-lip) inset,0 3px 0 -1px var(--d-edge),0 8px 16px -7px var(--d-amb);
transition:transform .15s var(--d-spring)}
.composer-card:active{transform:translateY(2px) scale(.99)}
.composer-card .ph{flex:1;color:var(--text-2);font-size:14px}
.post{margin:0 12px 12px;border-radius:15px;background:var(--panel);overflow:hidden;
box-shadow:0 1px 0 var(--d-lip) inset,0 3px 0 -1px var(--d-edge),0 10px 20px -9px var(--d-amb)}
.post-head{display:flex;align-items:center;gap:11px;padding:12px 14px 8px}
.post-head .mid{flex:1;min-width:0}
.post-head b{display:block;font-size:14.5px}
.post-head small{color:var(--text-2);font-size:11.5px}
.post-body{padding:0 14px 10px;font-size:14.8px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word}
.post-media{width:100%;display:block;max-height:420px;object-fit:cover;background:#000}
.post-stats{display:flex;gap:14px;padding:8px 14px;color:var(--text-2);font-size:12.5px;border-bottom:1px solid var(--line)}
.post-acts{display:flex}
.post-acts button{flex:1;padding:11px;display:flex;align-items:center;justify-content:center;gap:7px;
font-size:13.5px;font-weight:600;color:var(--text-2);transition:background .15s,color .15s,transform .12s var(--d-spring)}
.post-acts button:hover{background:#ffffff0f}
.post-acts button:active{transform:scale(.95)}
.post-acts button.on{color:var(--danger)}
.cm-row{display:flex;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line)}
.cm-row .mid{flex:1;min-width:0}
.cm-row b{font-size:13.5px;display:block}
.cm-row p{margin:2px 0 0;font-size:13.8px;line-height:1.45;word-wrap:break-word}
.cm-row small{color:var(--text-2);font-size:11px}
.ev-card{margin:0 12px 12px;border-radius:15px;overflow:hidden;background:var(--panel);
box-shadow:0 1px 0 var(--d-lip) inset,0 3px 0 -1px var(--d-edge),0 10px 20px -9px var(--d-amb)}
.ev-cover{height:132px;background-size:cover;background-position:center;position:relative;
display:grid;place-items:center;font-size:52px}
.ev-cover .when{position:absolute;left:12px;top:12px;background:rgba(0,0,0,.62);color:#fff;
border-radius:11px;padding:6px 11px;text-align:center;line-height:1.15}
.ev-cover .when b{display:block;font-size:19px}
.ev-cover .when span{font-size:10px;text-transform:uppercase;letter-spacing:.6px}
.ev-cover .mode{position:absolute;right:12px;top:12px;background:rgba(0,0,0,.62);color:#fff;
border-radius:9px;padding:5px 10px;font-size:11px;font-weight:700}
.ev-body{padding:12px 14px}
.ev-body h3{margin:0 0 4px;font-size:16.5px}
.ev-body .meta{color:var(--text-2);font-size:12.5px;display:flex;flex-wrap:wrap;gap:9px;margin-bottom:7px}
.ev-body p{margin:0 0 10px;font-size:13.8px;line-height:1.5;color:var(--text)}
.ev-rsvp{display:flex;gap:8px}
.ev-rsvp button{flex:1;padding:9px;border-radius:10px;font-size:13px;font-weight:600;
background:var(--panel-2);color:var(--text-2);
box-shadow:var(--d-rise-sm);transition:transform .13s var(--d-spring),box-shadow .16s}
.ev-rsvp button:active{transform:translateY(2px) scale(.97);box-shadow:var(--d-press)}
.ev-rsvp button.on{background:var(--accent);color:var(--on-accent)}
.ev-rsvp button.int.on{background:var(--gold);color:#3a2a00}
.ev-goers{display:flex;margin-top:10px;align-items:center;gap:7px}
.ev-goers .stack{display:flex}
.ev-goers .stack .av{width:26px;height:26px;font-size:13px;margin-left:-7px;border:2px solid var(--panel)}
.ev-goers .stack .av:first-child{margin-left:0}
.ev-goers small{color:var(--text-2);font-size:12px}
.mo-row{display:flex;gap:11px;align-items:center;padding:11px;border-radius:12px;background:var(--panel-2);
box-shadow:0 1px 0 var(--d-lip) inset,0 2px 6px -3px var(--d-amb)}
.mo-row.now{outline:2px solid var(--accent)}
.mo-row .num{width:32px;height:32px;border-radius:10px;background:var(--panel-3);display:grid;place-items:center;
font-size:13px;font-weight:700;flex:none}
.mo-row.now .num{background:var(--accent);color:var(--on-accent)}
.mo-row .mid{flex:1;min-width:0}
.mo-row b{display:block;font-size:14.5px}
.mo-row small{color:var(--text-2);font-size:11.5px;display:block}
.bottom-nav.five{overflow:visible}
.bottom-nav.five button{flex:1 1 0;min-width:0;padding:0 2px}
.story-rail{display:flex;gap:12px;padding:12px 12px 10px;overflow-x:auto;flex:none;
border-bottom:1px solid var(--line);scrollbar-width:none}
.story-rail::-webkit-scrollbar{display:none}
.st-cell{flex:0 0 auto;width:62px;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer}
.st-cell .ring{width:56px;height:56px;border-radius:50%;padding:2.5px;display:grid;place-items:center;
background:var(--panel-3);transition:transform .16s var(--d-spring)}
.st-cell:active .ring{transform:scale(.92)}
.st-cell.unseen .ring{background:conic-gradient(from 210deg,var(--accent),var(--gold),var(--accent))}
.st-cell.seen .ring{background:var(--line)}
.st-cell .inner{width:100%;height:100%;border-radius:50%;background:var(--panel);display:grid;place-items:center;
font-size:25px;overflow:hidden;position:relative}
.st-cell .inner img{width:100%;height:100%;object-fit:cover}
.st-cell .inner .st-th,.st-cell .inner .st-tx{position:absolute;inset:0;width:100%;height:100%;border-radius:50%}
.st-cell .inner .st-tx{display:grid;place-items:center;padding:7px;color:#fff;text-align:center;overflow:hidden}
.st-cell .inner .st-tx b{font-size:8.5px;line-height:1.15;max-height:3.45em;font-weight:700;word-break:break-word;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.st-cell .inner .st-ph{font-size:22px}
.st-cell .st-vid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;display:grid;place-items:center;font-size:9px;pointer-events:none}
.st-cell .st-vid .fa{width:9px;height:9px;fill:#fff!important}
.st-cell .plus{z-index:2}
.st-cell .plus{position:absolute;right:-1px;bottom:-1px;width:20px;height:20px;border-radius:50%;
background:var(--accent);color:#fff;font-size:14px;display:grid;place-items:center;border:2.5px solid var(--panel-2)}
.st-cell small{font-size:10.5px;color:var(--text-2);max-width:62px;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap;text-align:center}
.st-cell.mine small{color:var(--text)}
.chat-tabs{display:flex;gap:6px;padding:9px 12px;flex:none;border-bottom:1px solid var(--line)}
.chat-tabs button{flex:1;padding:8px 6px;border-radius:10px;font-size:12.8px;font-weight:600;
color:var(--text-2);background:var(--panel-2);display:flex;align-items:center;justify-content:center;gap:6px;
box-shadow:var(--d-rise-sm);transition:transform .13s var(--d-spring),background .18s,color .18s}
.chat-tabs button:active{transform:translateY(2px) scale(.97);box-shadow:var(--d-press)}
.chat-tabs button.on{background:var(--accent);color:var(--on-accent)}
.ct-count{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--panel-3);
color:var(--text-2);font-size:10.5px;font-weight:700;display:none;place-items:center}
.ct-count.show{display:grid}
.chat-tabs button.on .ct-count{background:color-mix(in srgb,currentColor 18%,transparent);color:inherit}
.ct-count.req.show{background:var(--danger);color:#fff}
.req-row{display:flex;gap:11px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line)}
.req-row .mid{flex:1;min-width:0}
.req-row b{display:block;font-size:14.6px}
.req-row small{color:var(--text-2);font-size:12px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.req-row .note{color:var(--text);font-size:12.8px;margin-top:3px;font-style:italic;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
.req-acts{display:flex;gap:7px;flex:none}
.req-acts button{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:16px;
background:var(--panel-2);box-shadow:var(--d-rise-sm);transition:transform .13s var(--d-spring)}
.req-acts button:active{transform:translateY(2px) scale(.92);box-shadow:var(--d-press)}
.req-acts button.yes{background:var(--accent);color:var(--on-accent)}
.req-acts button.no{color:var(--danger)}
.req-pill{font-size:11.5px;color:var(--text-2);background:var(--panel-2);padding:6px 11px;border-radius:9px}
.full-page{position:fixed;inset:0;z-index:75;background:var(--bg);
transform:translate3d(100%,0,0);visibility:hidden;will-change:transform;
pointer-events:none;
transition:transform .2s var(--ease),visibility .2s}
.full-page.on{transform:none;visibility:visible;pointer-events:auto}
.full-page:not(.on),.full-page:not(.on) *{pointer-events:none!important}
.fp-stack{position:relative;width:100%;height:100%;overflow:hidden;
max-width:520px;margin:0 auto;background:var(--panel);box-shadow:0 0 60px #0007}
.fp{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--panel);
transform:translate3d(100%,0,0);opacity:0;visibility:hidden;will-change:transform,opacity;
transition:transform .2s var(--ease),opacity .16s var(--ease),visibility .2s}
.fp.on{transform:none;opacity:1;visibility:visible;z-index:2}
.fp.out-left{transform:translate3d(-30%,0,0);opacity:0}
.fp-head{display:flex;align-items:center;gap:13px;padding:14px 16px;flex:none;
border-bottom:1px solid var(--line);background:var(--panel-2);
padding-top:calc(14px + env(safe-area-inset-top))}
.fp-head b{font-size:17.5px}
.fp-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:15px;
padding-bottom:calc(28px + env(safe-area-inset-bottom))}
.fp-body>*{flex:0 0 auto}
.set-hero{display:flex;align-items:center;gap:14px;padding:6px 4px 14px;border-bottom:1px solid var(--line)}
.set-hero-txt{flex:1;min-width:0}
.set-hero-txt b{display:block;font-size:18px;margin-bottom:2px}
.set-hero-txt small{display:block;color:var(--text-2);font-size:12.5px;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.set-group{display:flex;flex-direction:column;flex:none;background:var(--panel-2);border-radius:14px;overflow:hidden;
box-shadow:0 1px 0 var(--d-lip) inset,0 3px 0 -1px var(--d-edge),0 9px 18px -10px var(--d-amb)}
.set-item{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:12px;flex:none;
padding:14px 15px;text-align:left;border-bottom:1px solid var(--line);position:relative;
transition:background .16s}
.set-item:last-child{border-bottom:none}
.set-item:hover{background:#ffffff0d}
.set-item:active{background:#ffffff16}
.set-item i{font-size:19px;font-style:normal;width:34px;height:34px;border-radius:10px;
background:var(--panel-3);display:grid;place-items:center}
.set-item span{font-size:15px;font-weight:500}
.set-item em{font-style:normal;font-size:12px;color:var(--text-2);grid-column:2;grid-row:2;margin-top:-2px}
.set-item::after{content:"›";color:var(--text-2);font-size:20px;grid-column:3;grid-row:1/3}
.danger-btn{color:var(--danger);text-align:center}
.set-ver{text-align:center;color:var(--text-2);font-size:11.5px;padding:6px 0 2px}
.bubble-demo{background:var(--panel-3);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:8px}
.bd{max-width:78%;padding:8px 11px;font-size:14.5px;box-shadow:0 1px 1px #00000026}
.bd.in{align-self:flex-start;background:var(--bubble-in);border-radius:var(--bub-r,9px);
border-top-left-radius:var(--bub-tl,2px)}
.bd.out{align-self:flex-end;background:var(--bubble-out);border-radius:var(--bub-r,9px);
border-top-right-radius:var(--bub-tr,2px)}
.usr-row{display:flex;gap:12px;align-items:center;padding:11px 4px;border-bottom:1px solid var(--line)}
.usr-row .mid{flex:1;min-width:0}
.usr-row b{display:block;font-size:14.8px}
.usr-row small{color:var(--text-2);font-size:12.3px;display:block;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.usr-row .act{flex:none}
.usr-row .act .btn{padding:8px 14px;font-size:12.8px}
.tag{font-size:11px;font-weight:700;padding:4px 9px;border-radius:8px;background:var(--panel-2);color:var(--text-2)}
.tag.ok{background:#00a88426;color:var(--accent)}
.tag.wait{background:#e8b04b26;color:var(--gold)}
.find-search{display:flex;align-items:center;gap:9px;padding:11px 16px;flex:none;
border-bottom:1px solid var(--line);background:var(--panel-2)}
.find-search .at{color:var(--text-2);font-size:17px;font-weight:700}
.find-search input{flex:1;background:var(--panel);border:none;border-radius:11px;padding:12px 14px;
outline:none;font-size:15px;color:var(--text)}
.bar{height:9px;border-radius:5px;background:var(--panel-3);overflow:hidden;margin-top:7px}
.bar i{display:block;height:100%;background:var(--accent);border-radius:5px;
transition:width .5s var(--ease)}
[data-fs="sm"] .bub .tx{font-size:13.6px}
[data-fs="lg"] .bub .tx{font-size:16.4px}
@media(max-width:520px){
.fp-stack{max-width:100%}
.set-item{grid-template-columns:32px 1fr auto;padding:13px 13px}
}
.wa-phone{width:1em;height:1em;display:inline-block;vertical-align:-.125em;
transform:rotate(-8deg);flex:none}
#bottomNav .ic .wa-phone{width:22px;height:22px;transform:rotate(-8deg)}
.empty-list .big .wa-phone{width:44px;height:44px}
#fab .wa-phone{width:24px;height:24px}
.set-item i .wa-phone{width:19px;height:19px}
#ringYes .wa-phone{width:26px;height:26px}
.call-row .acts .wa-phone,.usr-row .wa-phone{width:19px;height:19px}
.call-row .p .wa-phone{width:12px;height:12px;opacity:.85}
.cal-cell .n{font-size:17px;font-weight:800;line-height:1.05;letter-spacing:-.2px;
text-shadow:0 1px 2px rgba(0,0,0,.28)}
.cal-cell .m{font-size:8px;font-weight:700;letter-spacing:.2px;opacity:.88;
text-transform:uppercase}
.cal-cell.today .n{font-size:18px}
@media(min-width:520px){.cal-cell .n{font-size:19px}.cal-cell .m{font-size:9px}}
.sv-react{flex:none;padding:0 12px 14px;display:flex;flex-direction:column;gap:10px}
.sv-emojis{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.sv-emo{position:relative;width:44px;height:44px;border-radius:50%;font-size:22px;
display:grid;place-items:center;background:rgba(255,255,255,.12);color:#fff;
backdrop-filter:blur(6px);transition:transform .16s var(--d-spring),background .16s var(--ease)}
.sv-emo:hover{transform:translateY(-3px) scale(1.08);background:rgba(255,255,255,.2)}
.sv-emo:active{transform:translateY(1px) scale(.94)}
.sv-emo.on{background:rgba(255,255,255,.28);box-shadow:0 0 0 2px var(--gold) inset}
.sv-emo i{position:absolute;bottom:-2px;right:-2px;font-style:normal;font-size:10px;font-weight:800;
min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--accent);color:var(--on-accent);
display:grid;place-items:center;box-shadow:0 2px 5px rgba(0,0,0,.45)}
@keyframes svPop{0%{transform:scale(1)}45%{transform:scale(1.45)}100%{transform:scale(1)}}
.sv-emo.pop{animation:svPop .38s var(--d-spring)}
.sv-reply{display:flex;align-items:center;gap:8px}
.sv-reply input{flex:1;min-width:0;height:44px;border-radius:22px;padding:0 16px;color:#fff;
background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);font-size:14.5px;
backdrop-filter:blur(6px)}
.sv-reply input::placeholder{color:#ffffff8c}
.sv-reply input:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.2)}
.sv-reply .icon-btn{width:44px;height:44px;flex:none;color:#fff;font-size:18px;
background:rgba(255,255,255,.13);border-radius:50%;backdrop-filter:blur(6px)}
.sv-reply .icon-btn:active{transform:scale(.92)}
#svCmtN{font-size:13px;font-weight:700;white-space:nowrap}
.sv-sheet{position:absolute;left:0;right:0;bottom:0;z-index:6;max-height:62%;
display:flex;flex-direction:column;background:var(--panel);color:var(--text);
border-radius:18px 18px 0 0;transform:translate3d(0,101%,0);visibility:hidden;
box-shadow:0 -10px 34px rgba(0,0,0,.5);
transition:transform .18s var(--ease),visibility .18s}
.sv-sheet.on{transform:none;visibility:visible}
.sv-sheet-head{flex:none;display:flex;align-items:center;gap:10px;padding:13px 14px 9px;
border-bottom:1px solid var(--line)}
.sv-sheet-head b{flex:1;font-size:15px}
.sv-sheet-body{flex:1;overflow-y:auto;padding:8px 12px 16px;display:flex;flex-direction:column;gap:4px}
.sv-cmt{flex:0 0 auto;display:flex;align-items:flex-start;gap:10px;padding:8px 6px;border-radius:11px}
.sv-cmt:hover{background:var(--panel-2)}
.sv-cmt .av{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
font-size:17px;background:var(--panel-2)}
.sv-cmt .mid{flex:1;min-width:0}
.sv-cmt .mid b{display:block;font-size:12.8px;color:var(--accent)}
.sv-cmt .mid p{margin:1px 0 0;font-size:14px;line-height:1.35;word-break:break-word}
.sv-cmt .t{flex:none;font-size:10.5px;color:var(--text-2)}
.sv-cmt .icon-btn.sm{width:28px;height:28px;font-size:13px;flex:none}
.req-acts.wide{gap:8px}
.req-acts.wide button.lbl{width:auto;height:36px;border-radius:18px;padding:0 14px;
font-size:12.8px;font-weight:700;gap:5px;display:inline-flex;align-items:center;white-space:nowrap}
.req-acts.wide button.no{background:var(--panel-2);color:var(--danger);
box-shadow:0 0 0 1px var(--line) inset,var(--d-rise-sm)}
@media(max-width:400px){
.req-acts.wide button.lbl span{display:none}
.req-acts.wide button.lbl{width:38px;padding:0;justify-content:center;border-radius:50%}
}
#rtcRemote,#rtcLocal{display:none;background:#000}
#rtcRemote{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
#rtcLocal{position:absolute;right:14px;top:calc(14px + env(safe-area-inset-top));
width:104px;height:150px;object-fit:cover;border-radius:14px;z-index:3;
box-shadow:0 8px 24px rgba(0,0,0,.5);border:1.5px solid #ffffff3d;background:#111}
#callView.video{background:#000}
#callView.video .call-body{position:relative;z-index:2}
#callView .call-body{display:flex;flex-direction:column;align-items:center;gap:14px}
#callView .call-actions{position:relative;z-index:4}
#callView.video .call-actions{position:absolute;left:0;right:0;
bottom:calc(26px + env(safe-area-inset-bottom));justify-content:center}
#callView.video::after{content:'';position:absolute;left:0;right:0;bottom:0;height:190px;z-index:1;
background:linear-gradient(to top,rgba(0,0,0,.68),transparent);pointer-events:none}
#callView.peer-muted .cav::before{content:'🔇';position:absolute;transform:translate(46px,-46px);font-size:26px}
.cnet{display:none;align-items:center;gap:7px;font-size:12.5px;color:#ffffffd9;
background:#ffffff1f;padding:6px 13px;border-radius:20px;backdrop-filter:blur(6px)}
.cnet .dot{width:8px;height:8px;border-radius:50%;background:#9aa;flex:none}
.cnet[data-q="lan"] .dot{background:#25d366;box-shadow:0 0 8px #25d366}
.cnet[data-q="net"] .dot{background:#f7c948}
.cnet[data-q="relay"] .dot{background:#ff9f43}
.cnet[data-q="bad"] .dot{background:var(--danger)}
.call-actions button[style*="none"]{display:none!important}
.cpaused{display:none}
.once-wrap{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:13px;
background:var(--panel-2);cursor:pointer;min-width:190px;
box-shadow:0 1px 0 var(--d-lip) inset,0 2px 0 -1px var(--d-edge)}
.once-wrap .ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
font-size:19px;background:var(--accent);color:#fff;flex:none}
.once-wrap .mid{flex:1;min-width:0}
.once-wrap b{display:block;font-size:13.6px}
.once-wrap small{color:var(--text-2);font-size:11.5px}
.once-wrap.spent{opacity:.6;cursor:default}
.once-wrap.spent .ic{background:var(--panel-3);color:var(--text-2)}
.msg .ttl-tag{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;opacity:.75;margin-left:6px}
.msg.system{align-self:center;max-width:82%}
.sys-note{text-align:center;font-size:12px;color:var(--text-2);background:var(--panel-2);
padding:7px 13px;border-radius:11px;box-shadow:0 1px 0 var(--d-lip) inset}
.lock-veil{position:absolute;inset:0;z-index:30;display:none;flex-direction:column;
align-items:center;justify-content:center;gap:16px;background:var(--bg);text-align:center;padding:26px}
.lock-veil.on{display:flex}
.lock-veil .big{font-size:56px}
.lock-veil h3{margin:0;font-size:19px}
.lock-veil p{margin:0;color:var(--text-2);font-size:13.5px;max-width:280px}
.pin-row{display:flex;gap:9px}
.pin-row input{width:52px;height:60px;text-align:center;font-size:26px;font-weight:700;
border-radius:13px;background:var(--panel-2);border:1.5px solid var(--line);color:var(--text)}
.pin-row input:focus{outline:none;border-color:var(--accent);background:var(--panel-3)}
.pin-row input.bad{border-color:var(--danger);animation:shake .32s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.pw-meter{height:6px;border-radius:4px;background:var(--panel-3);overflow:hidden;margin-top:8px}
.pw-meter i{display:block;height:100%;width:0;border-radius:4px;transition:width .25s var(--ease),background .25s}
.pw-meter[data-s=""] i,.pw-meter:not([data-s]) i{width:0}
.pw-meter[data-s="0"] i{width:12%;background:#e74c3c}
.pw-meter[data-s="1"] i{width:32%;background:#e67e22}
.pw-meter[data-s="2"] i{width:56%;background:#f7c948}
.pw-meter[data-s="3"] i{width:80%;background:#8bc34a}
.pw-meter[data-s="4"] i{width:100%;background:var(--accent)}
.pw-tips{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.pw-tips:empty{display:none;margin:0}
.pw-tips li{font-size:11.5px;padding:4px 9px;border-radius:8px;background:var(--panel-3);color:var(--text-2)}
.pw-tips li.bad{background:#e74c3c22;color:#ff8a75}
.qr-box{display:grid;place-items:center;padding:16px;background:#fff;border-radius:14px;margin:0 auto;width:max-content}
.qr-box svg{display:block;image-rendering:pixelated}
.secret-chip{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;letter-spacing:1.5px;
background:var(--panel-3);padding:10px 14px;border-radius:10px;word-break:break-all;text-align:center}
.rec-codes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.rec-codes span{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;
background:var(--panel-3);padding:9px;border-radius:9px;text-align:center;letter-spacing:.5px}
.sec-badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
padding:4px 10px;border-radius:20px}
.sec-badge.on{background:#25d36622;color:#25d366}
.sec-badge.off{background:#e74c3c22;color:#ff8a75}
.audit-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;
background:var(--panel-2);flex:none}
.audit-row .ev{flex:1;min-width:0;font-size:13px}
.audit-row .ev small{display:block;color:var(--text-2);font-size:11px}
.audit-row .t{font-size:11px;color:var(--text-2);white-space:nowrap}
#tfaSetup,#tfaCodes{display:flex;flex-direction:column;gap:12px}
#tfaSetup>*,#tfaCodes>*{flex:0 0 auto}
#tfaSetup .btn,#tfaCodes .btn{width:100%}
.sess-row{display:flex;align-items:center;gap:12px;padding:10px 2px;border-bottom:1px solid var(--line)}
.sess-row:last-child{border-bottom:0}
.sess-row .mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sess-row .mid b{font-size:14px}
.sess-row .mid small{font-size:11.5px;color:var(--text-2)}
.tag-now{font-size:11px;font-weight:700;color:var(--accent);background:#25d36618;padding:3px 9px;border-radius:20px}
.audit-row{display:flex;align-items:center;gap:10px;font-size:13px;padding:8px 2px;border-bottom:1px solid var(--line)}
.audit-row:last-child{border-bottom:0}
.audit-row .ev{flex:1;min-width:0}
.audit-row .at{color:var(--text-2);font-size:11.5px;white-space:nowrap}
.audit-broken{background:#e74c3c22;color:#ff8a75;padding:10px 12px;border-radius:10px;font-size:12.5px;line-height:1.5}
#callView.remote-video .call-body{position:absolute;top:calc(14px + env(safe-area-inset-top));
left:14px;right:132px;z-index:2;flex-direction:row;align-items:center;gap:10px;text-align:left}
#callView.remote-video .cav{width:38px;height:38px;font-size:19px;flex:0 0 auto;margin:0}
#callView.remote-video #callName{font-size:15px;margin:0}
#callView.remote-video .cst{font-size:12px;opacity:.85}
#callView.remote-video .cnet{margin-left:auto}
#callView.remote-video .call-body>*{text-shadow:0 1px 6px rgba(0,0,0,.8)}
#callView.remote-video::before{content:'';position:absolute;left:0;right:0;top:0;height:120px;z-index:1;
background:linear-gradient(to bottom,rgba(0,0,0,.6),transparent);pointer-events:none}
#callView.remote-video .cav{display:none}
#callView.remote-video .call-body{right:auto;max-width:calc(100% - 150px);gap:8px;padding:6px 12px 6px 10px;
background:#0000004d;border-radius:999px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#callView.remote-video .call-body>*{text-shadow:none}
#callView.remote-video #callName{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#callView.remote-video .cst{font-size:12px;white-space:nowrap}
#callView.remote-video .cnet{margin-left:0;padding:0;background:none}
#callView.remote-video .cnet span{display:none}
#callView.remote-video::before{height:84px;background:linear-gradient(to bottom,rgba(0,0,0,.35),transparent)}
#callView .call-body,#callView .call-actions,#callView .call-limit{transition:opacity .35s ease}
#callView.remote-video::before,#callView.video::after{transition:opacity .35s ease}
#callView.remote-video.idle .call-body,#callView.remote-video.idle .call-actions,
#callView.remote-video.idle .call-limit{opacity:0;pointer-events:none}
#callView.remote-video.idle::before,#callView.remote-video.idle::after{opacity:0}
.call-limit{display:none;align-items:center;gap:10px;margin-top:6px;
font-size:12.5px;color:#ffffffcc;background:#00000038;padding:7px 14px;border-radius:20px;
backdrop-filter:blur(6px);position:relative;z-index:4}
.call-limit.on{display:flex}
.call-limit i{display:block;width:76px;height:5px;border-radius:3px;background:#ffffff2e;overflow:hidden;flex:none}
.call-limit i::after{content:'';display:block;height:100%;width:calc(var(--p,1) * 100%);
background:#25d366;border-radius:3px;transition:width .25s linear,background .25s}
.call-limit.warn{color:#fff;background:#e74c3c33}
.call-limit.warn i::after{background:var(--danger)}
.call-limit.warn span{font-weight:700}
#callView.video .call-limit{position:absolute;left:0;right:0;bottom:calc(122px + env(safe-area-inset-bottom));
justify-content:center;width:max-content;margin:0 auto;background:#00000059}
#callView.video .call-actions{bottom:calc(18px + env(safe-area-inset-bottom))}
#callView.video::after{height:230px}
@media (max-width:420px){
.call-actions{gap:4px}
.call-actions button{width:66px}
.call-actions button .ci{width:54px;height:54px;font-size:22px}
.call-actions button .cl{font-size:10.5px}
}
.bottom-nav.five{
position:absolute; left:50%; right:auto; bottom:calc(10px + env(safe-area-inset-bottom));
transform:translateX(-50%);
width:min(440px, calc(100% - 24px));
border:1px solid var(--line);
border-radius:22px;
padding:0; overflow:visible;
background:var(--panel-2);
box-shadow:0 1px 0 rgba(255,255,255,.07) inset,
0 2px 6px rgba(0,0,0,.18),
0 14px 34px -10px rgba(0,0,0,.55);
z-index:6;
}
@supports (backdrop-filter:blur(18px)) or (-webkit-backdrop-filter:blur(18px)){
.bottom-nav.five{
background:color-mix(in srgb, var(--panel-2) 82%, transparent);
-webkit-backdrop-filter:blur(18px) saturate(1.5);
backdrop-filter:blur(18px) saturate(1.5);
}
}
[data-mode="light"] .bottom-nav.five{
box-shadow:0 1px 0 rgba(255,255,255,.9) inset,
0 2px 6px rgba(0,0,0,.06),
0 14px 30px -12px rgba(0,0,0,.28);
}
.bottom-nav.five button{height:58px;border-radius:20px;gap:2px;font-size:10px}
.bottom-nav.five button::after{display:none}
.bottom-nav .ic .ni{
width:23px; height:23px; display:block;
fill:none; stroke:currentColor; stroke-width:1.7;
stroke-linecap:round; stroke-linejoin:round;
}
.bottom-nav .ic .ni .nd{fill:currentColor; stroke:none}
.bottom-nav button.on .ic .ni{stroke-width:2}
.bottom-nav.five button .ic{
width:46px; height:30px; border-radius:15px;
transition:background .24s var(--ease), box-shadow .24s var(--ease), transform .26s var(--d-spring,var(--ease));
}
.bottom-nav.five button.on .ic{
transform:translateY(-1px) scale(1);
background:color-mix(in srgb, var(--accent) 22%, transparent);
box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 4px 12px -4px color-mix(in srgb, var(--accent) 60%, transparent);
}
.bottom-nav.five button:active .ic{transform:translateY(1px) scale(.93)}
.nav-badge{top:2px;left:calc(50% + 7px)}
.fab{bottom:calc(var(--nav-h) + 26px + env(safe-area-inset-bottom))}
.page-scroll, #listChats{padding-bottom:calc(var(--nav-h) + 20px)}
#btnCallMenu{position:relative}
#btnCallMenu .chev{
position:absolute;right:1px;bottom:4px;width:0;height:0;
border-left:3.5px solid transparent;border-right:3.5px solid transparent;
border-top:4px solid currentColor;opacity:.75;
}
.sheet-scrim{
position:fixed;inset:0;z-index:93;display:flex;align-items:flex-end;justify-content:center;
background:rgba(0,0,0,.5);opacity:0;visibility:hidden;
transition:opacity .26s var(--ease),visibility .26s;
-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.sheet-scrim.on{opacity:1;visibility:visible}
.sheet{
width:min(440px,100%);
background:var(--panel);border:1px solid var(--line);border-bottom:none;
border-radius:22px 22px 0 0;
padding:8px 12px calc(12px + env(safe-area-inset-bottom));
transform:translateY(102%);
transition:transform .18s var(--ease);
box-shadow:0 -12px 40px -8px rgba(0,0,0,.55);
max-height:86vh;overflow-y:auto;
}
@media(min-width:560px){
.sheet-scrim{align-items:center}
.sheet{border-radius:22px;border-bottom:1px solid var(--line);transform:translateY(14px) scale(.97)}
}
.sheet-scrim.on .sheet{transform:none}
.sheet .grip{width:38px;height:4px;border-radius:2px;background:var(--text-2);opacity:.35;margin:2px auto 12px}
.sheet-head{display:flex;align-items:center;gap:12px;padding:0 6px 12px}
.sheet-head .av{
width:46px;height:46px;border-radius:50%;background:var(--panel-3);flex:none;
display:grid;place-items:center;font-size:23px;overflow:hidden
}
.sheet-head .av img{width:100%;height:100%;object-fit:cover}
.sheet-head .mid{min-width:0}
.sheet-head .mid b{display:block;font-size:16.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet-head .mid span{font-size:12.5px;color:var(--text-2)}
.sheet-head .mid span.live{color:var(--accent)}
.sheet-list{display:flex;flex-direction:column;gap:2px}
.sheet-list button{
display:flex;align-items:center;gap:14px;width:100%;text-align:left;
padding:12px 12px;border-radius:14px;color:var(--text);
transition:background .16s var(--ease),transform .14s var(--ease);
}
.sheet-list button:hover{background:var(--panel-2)}
.sheet-list button:active{transform:scale(.985);background:var(--panel-3)}
.sheet-list .si{
width:42px;height:42px;border-radius:13px;flex:none;display:grid;place-items:center;
background:color-mix(in srgb, var(--accent) 16%, transparent);color:var(--accent);
}
.sheet-list .si .ni{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
.sheet-list .lb{display:flex;flex-direction:column;gap:2px;min-width:0}
.sheet-list .lb b{font-weight:600;font-size:15px}
.sheet-list .lb small{font-size:12.5px;color:var(--text-2)}
.sheet-sep{height:1px;background:var(--line);margin:6px 12px}
.sheet-note{font-size:12px;color:var(--text-2);text-align:center;padding:12px 16px 4px}
.sheet-cancel{
width:100%;margin-top:6px;padding:13px;border-radius:14px;
background:var(--panel-2);color:var(--text);font-weight:600;font-size:15px;
transition:background .16s var(--ease),transform .14s var(--ease);
}
.sheet-cancel:hover{background:var(--panel-3)}
.sheet-cancel:active{transform:scale(.985)}
.attach-strip{
position:relative;z-index:2;flex:none;
max-height:0;opacity:0;overflow:hidden;
visibility:hidden;
transition:max-height .26s var(--ease),opacity .2s var(--ease),visibility .26s;
}
.attach-strip.on{max-height:120px;opacity:1;visibility:visible}
.attach-strip .in{
display:flex;align-items:center;gap:11px;
margin:0 10px 6px;padding:9px 10px;border-radius:15px;
background:var(--panel-2);border:1px solid var(--line);
box-shadow:0 4px 14px -8px rgba(0,0,0,.5);
}
.attach-strip .thumb{
width:48px;height:48px;border-radius:11px;overflow:hidden;flex:none;
background:var(--panel-3);position:relative
}
.attach-strip .thumb img,.attach-strip .thumb video{width:100%;height:100%;object-fit:cover;display:block}
.attach-strip .thumb .pv{
position:absolute;inset:0;margin:auto;width:0;height:0;
border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;
filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));
}
.attach-strip .meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.attach-strip .meta b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attach-strip .meta span{font-size:11.5px;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35}
.once-toggle{
display:flex;align-items:center;gap:6px;flex:none;
padding:7px 11px;border-radius:11px;
background:var(--panel-3);color:var(--text-2);
border:1px solid transparent;
transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),transform .14s var(--ease);
}
.once-toggle .ni{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
.once-toggle .ni .slash{opacity:0;transition:opacity .18s var(--ease)}
.once-toggle .ol{font-style:normal;font-size:12px;font-weight:600;white-space:nowrap}
.once-toggle:active{transform:scale(.95)}
.once-toggle.act{
background:color-mix(in srgb, var(--accent) 20%, transparent);
color:var(--accent);border-color:color-mix(in srgb, var(--accent) 45%, transparent);
}
.once-toggle.act .ni .slash{opacity:1}
.attach-strip .at-x{flex:none;font-size:15px;color:var(--text-2)}
@media(max-width:340px){
.once-toggle .ol{display:none}
.once-toggle{padding:9px}
}
.main{background-color:var(--bg)}
.main::after{
content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
background:var(--wp-tint,transparent);
}
.main[data-wp="photo"]::after{background:transparent}
.main[data-wp="dots"]::before,.wp-sw[data-wp="dots"] .pv::before{opacity:.05;background-image:
radial-gradient(circle at 25% 25%,#fff 1.6px,transparent 1.6px),
radial-gradient(circle at 75% 75%,#fff 1.6px,transparent 1.6px);background-size:46px 46px}
.main[data-wp="kente"]::before,.wp-sw[data-wp="kente"] .pv::before{opacity:.07;background-image:
repeating-linear-gradient(45deg,#e8b04b 0 10px,transparent 10px 20px),
repeating-linear-gradient(-45deg,#00a884 0 10px,transparent 10px 24px);background-size:64px 64px}
.main[data-wp="uli"]::before,.wp-sw[data-wp="uli"] .pv::before{opacity:.08;background-image:
repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 26px),
repeating-linear-gradient(90deg,#fff 0 1px,transparent 1px 26px);background-size:26px 26px}
.main[data-wp="nsibidi"]::before,.wp-sw[data-wp="nsibidi"] .pv::before{opacity:.085;background-image:
repeating-linear-gradient(60deg,#e8b04b 0 1.4px,transparent 1.4px 15px),
repeating-linear-gradient(-60deg,#e8b04b 0 1.4px,transparent 1.4px 15px),
radial-gradient(circle at 50% 50%,#00a884 2.4px,transparent 2.6px);
background-size:52px 52px}
.main[data-wp="akwete"],.wp-sw[data-wp="akwete"] .pv{--wp-tint:linear-gradient(180deg,rgba(232,176,75,.05),transparent 60%)}
.main[data-wp="akwete"]::before,.wp-sw[data-wp="akwete"] .pv::before{opacity:.1;background-image:
repeating-linear-gradient(0deg,#e8b04b 0 2px,transparent 2px 9px),
repeating-linear-gradient(0deg,#00a884 0 1px,transparent 1px 27px),
repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 1px,transparent 1px 54px)}
.main[data-wp="isiagu"],.wp-sw[data-wp="isiagu"] .pv{--wp-tint:radial-gradient(900px 600px at 50% 0%,rgba(232,176,75,.07),transparent 70%)}
.main[data-wp="isiagu"]::before,.wp-sw[data-wp="isiagu"] .pv::before{opacity:.09;background-image:
radial-gradient(circle at 50% 50%,#e8b04b 4px,transparent 4.5px),
radial-gradient(circle at 0 0,#e8b04b 4px,transparent 4.5px),
radial-gradient(circle at 100% 100%,#e8b04b 4px,transparent 4.5px);
background-size:58px 58px}
.main[data-wp="ukwa"],.wp-sw[data-wp="ukwa"] .pv{--wp-tint:linear-gradient(160deg,rgba(0,168,132,.07),transparent 55%)}
.main[data-wp="ukwa"]::before,.wp-sw[data-wp="ukwa"] .pv::before{opacity:.1;background-image:
repeating-linear-gradient(35deg,#00a884 0 1.2px,transparent 1.2px 22px),
repeating-linear-gradient(-35deg,#00a884 0 1.2px,transparent 1.2px 22px)}
.main[data-wp="ube"],.wp-sw[data-wp="ube"] .pv{--wp-tint:linear-gradient(170deg,rgba(232,176,75,.13),rgba(241,92,109,.07) 55%,transparent)}
.main[data-wp="ube"]::before,.wp-sw[data-wp="ube"] .pv::before{opacity:0}
.main[data-wp="mmiri"],.wp-sw[data-wp="mmiri"] .pv{--wp-tint:linear-gradient(175deg,rgba(83,189,235,.14),rgba(0,168,132,.07) 60%,transparent)}
.main[data-wp="mmiri"]::before,.wp-sw[data-wp="mmiri"] .pv::before{opacity:0}
.main[data-wp="oji"],.wp-sw[data-wp="oji"] .pv{--wp-tint:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.6))}
.main[data-wp="oji"]::before,.wp-sw[data-wp="oji"] .pv::before{opacity:.05;background-image:
radial-gradient(circle at 30% 30%,#fff 1.2px,transparent 1.4px);background-size:34px 34px}
[data-mode="light"] .main[data-wp="oji"]{--wp-tint:linear-gradient(180deg,rgba(17,27,33,.06),rgba(17,27,33,.1))}
.main[data-wp="ugegbe"]::before,.wp-sw[data-wp="ugegbe"] .pv::before{opacity:.06;background-image:
repeating-linear-gradient(45deg,#fff 0 1px,transparent 1px 11px),
repeating-linear-gradient(-45deg,#fff 0 1px,transparent 1px 11px)}
.main[data-wp="plain"]::before,.wp-sw[data-wp="plain"] .pv::before{opacity:0}
.wp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:9px;margin-top:9px}
.wp-sw{
position:relative;aspect-ratio:1/1.12;border-radius:13px;overflow:hidden;
border:2px solid var(--line);background:var(--bg);
transition:border-color .18s var(--ease),transform .15s var(--ease);
}
.wp-sw:active{transform:scale(.95)}
.wp-sw.on{border-color:var(--accent)}
.wp-sw .pv{position:absolute;inset:0}
.wp-sw .pv::before,.wp-sw .pv::after{content:"";position:absolute;inset:0}
.wp-sw em{
position:absolute;left:0;right:0;bottom:0;padding:4px 5px;
font-style:normal;font-size:10px;font-weight:600;text-align:center;
color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.72));
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.wp-sw.on::after{
content:"✓";position:absolute;top:4px;right:5px;width:17px;height:17px;border-radius:50%;
background:var(--accent);color:#fff;font-size:11px;display:grid;place-items:center;font-weight:700;
}
.wp-sw .pv::after{background:var(--wp-tint,transparent)}
.wp-sw[data-wp="isiagu"] .pv::before{background-size:26px 26px}
.wp-sw[data-wp="kente"]  .pv::before{background-size:30px 30px}
.wp-sw[data-wp="nsibidi"] .pv::before{background-size:26px 26px}
.wp-sw[data-wp="dots"]   .pv::before{background-size:22px 22px;opacity:.14}
.wp-sw[data-wp="uli"]    .pv::before{background-size:14px 14px}
.wp-sw[data-wp="akwete"] .pv::before{opacity:.18}
.wp-sw[data-wp="ugegbe"] .pv::before{opacity:.12}
.wp-sw[data-wp="oji"]    .pv::before{background-size:18px 18px;opacity:.1}
.reg-av{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.reg-av .photo-pick{flex:none}
.reg-av-side{display:flex;flex-direction:column;gap:6px;align-items:flex-start;min-width:0}
.reg-av-side .btn{padding:7px 12px;font-size:13px}
.reg-av-side .hint{font-size:11.5px;color:var(--text-2)}
#regAv{overflow:hidden}
#regAv img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.hint.sub-note{
background:none;padding:0;border-radius:0;
font-size:11.5px;line-height:1.45;opacity:.85;
}
.fab-game{bottom:calc(var(--nav-h) + 18px + 66px);width:48px;height:48px;font-size:22px;
background:linear-gradient(160deg,var(--gold),#c98f2e)}
.fab-game.solo{bottom:calc(var(--nav-h) + 18px)}
@media (max-width:780px){.fab-game{bottom:calc(var(--nav-h) + 26px + 66px + env(safe-area-inset-bottom))}
.fab-game.solo{bottom:calc(var(--nav-h) + 26px + env(safe-area-inset-bottom))}}
.qz-wrap{background:var(--panel)}
.qz-view{display:flex;flex-direction:column;gap:14px;padding:16px;overflow-y:auto}
.qz-center{align-items:center;justify-content:center;text-align:center}
.qz-hero{text-align:center;padding:6px 0 2px}
.qz-hero-i{font-size:44px;display:block;line-height:1}
.qz-hero h2{margin:8px 0 4px;font-size:22px}
.qz-hero p{margin:0;color:var(--text-2);font-size:13.5px}
.qz-h{margin:6px 0 0;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-2)}
.qz-sub{margin:-8px 0 0;font-size:12.5px;color:var(--text-2)}
.qz-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.qz-stat{background:var(--panel-2);border-radius:12px;padding:10px 6px;text-align:center}
.qz-stat b{display:block;font-size:18px}
.qz-stat span{font-size:10.5px;color:var(--text-2);line-height:1.2;display:block}
.qz-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.qz-cat{background:var(--panel-2);border:2px solid transparent;border-radius:12px;padding:10px 4px;
color:var(--text);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;
font-family:inherit;transition:border-color .15s,background .15s}
.qz-cat.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,var(--panel-2))}
.qz-cat-i{font-size:19px}
.qz-cat-n{font-size:11.5px;font-weight:600;text-align:center;line-height:1.15}
.qz-cat-c{font-size:10px;color:var(--text-2)}
.qz-modes{display:flex;flex-direction:column;gap:9px}
.qz-mode{display:flex;align-items:center;gap:12px;background:var(--panel-2);border:0;border-radius:14px;
padding:13px;color:var(--text);cursor:pointer;font-family:inherit;text-align:left;width:100%}
.qz-mode:active{transform:scale(.985)}
.qz-mode-i{font-size:24px;flex:0 0 auto}
.qz-mode-t{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.qz-mode-t b{font-size:15px}
.qz-mode-t i{font-style:normal;font-size:12px;color:var(--text-2)}
.qz-mode-g{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
background:var(--panel-3);color:var(--text-2);padding:4px 8px;border-radius:999px;flex:0 0 auto}
.qz-mode-g.qz-live{background:color-mix(in srgb,var(--accent) 25%,transparent);color:var(--accent)}
.qz-opps{display:flex;flex-direction:column;gap:7px}
.qz-opp{display:flex;align-items:center;gap:10px;background:var(--panel-2);border:0;border-radius:12px;
padding:10px 12px;color:var(--text);cursor:pointer;font-family:inherit;text-align:left}
.qz-opp-av{font-size:20px}
.qz-opp-n{flex:1;font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px;min-width:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qz-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.qz-opp-go{font-size:11.5px;font-weight:700;color:var(--accent)}
.qz-empty{color:var(--text-2);font-size:13px;text-align:center;margin:4px 0}
.qz-pass{background:var(--panel-2);border-radius:14px;padding:13px;display:flex;flex-direction:column;gap:10px}
.qz-pass-t{display:flex;flex-direction:column;gap:2px}
.qz-pass-t b{font-size:15px}
.qz-pass-t i{font-style:normal;font-size:12px;color:var(--text-2)}
.qz-names{display:flex;align-items:center;gap:8px}
.qz-names input{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:10px;
padding:9px 10px;color:var(--text);font-family:inherit;font-size:13.5px}
.qz-names span{color:var(--text-2);font-size:12px}
.qz-levels{display:flex;flex-direction:column;gap:9px;width:100%}
.qz-level{background:var(--panel-2);border:0;border-radius:13px;padding:14px;color:var(--text);
cursor:pointer;font-family:inherit;text-align:left;display:flex;flex-direction:column;gap:3px}
.qz-level b{font-size:15.5px}
.qz-level i{font-style:normal;font-size:12px;color:var(--text-2)}
.qz-hud{display:flex;align-items:center;gap:8px;justify-content:space-between}
.qz-p{display:flex;align-items:center;gap:7px;background:var(--panel-2);border-radius:12px;
padding:8px 11px;flex:1;min-width:0;border:2px solid transparent}
.qz-p.turn{border-color:var(--accent)}
.qz-p-av{font-size:18px;flex:0 0 auto}
.qz-p-n{font-size:12.5px;font-weight:600;flex:1;min-width:0;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.qz-p-s{font-size:16px;font-variant-numeric:tabular-nums;transition:color .2s}
.qz-p-s.ok{color:var(--accent)}
.qz-p-s.no{color:var(--danger)}
.qz-p-s.locked{color:var(--gold)}
.qz-p-k{font-size:11px}
.qz-vs{font-size:11px;color:var(--text-2);flex:0 0 auto}
.qz-wait{color:var(--text-2);font-size:13px;text-align:center;width:100%;padding:10px}
.qz-time{position:relative;height:6px;background:var(--panel-3);border-radius:999px;overflow:hidden}
.qz-time-bar{height:100%;width:100%;background:var(--accent);border-radius:999px;
transition:width .1s linear,background .3s}
.qz-time-bar.low{background:var(--danger)}
.qz-secs{font-variant-numeric:tabular-nums;color:var(--text-2)}
.qz-secs b{color:var(--text);font-size:12.5px}
.qz-qmeta>span:first-child{flex:1}
.qz-qmeta>span:last-child{flex:1;text-align:right}
.qz-qmeta{display:flex;justify-content:space-between;font-size:11.5px;color:var(--text-2);
margin-top:10px}
.qz-q{margin:2px 0 6px;font-size:19px;line-height:1.35}
.qz-opts{display:flex;flex-direction:column;gap:9px}
.qz-opt{display:flex;align-items:center;gap:11px;background:var(--panel-2);border:2px solid transparent;
border-radius:13px;padding:13px;color:var(--text);cursor:pointer;font-family:inherit;
text-align:left;font-size:14.5px;transition:border-color .18s,background .18s,opacity .18s}
.qz-opt:active:not(:disabled){transform:scale(.99)}
.qz-opt:disabled{cursor:default}
.qz-opt-k{width:25px;height:25px;border-radius:50%;background:var(--panel-3);display:grid;
place-items:center;font-size:11.5px;font-weight:700;flex:0 0 auto}
.qz-opt-t{flex:1;min-width:0}
.qz-opt.picked{border-color:var(--text-2)}
.qz-opt.right{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 20%,var(--panel-2))}
.qz-opt.wrong{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 18%,var(--panel-2))}
.qz-feedback{display:none;flex-direction:column;gap:3px;border-radius:12px;padding:11px 13px;
font-size:13px;background:var(--panel-2)}
.qz-feedback.on{display:flex}
.qz-feedback b{font-size:14px}
.qz-feedback span{color:var(--text-2);line-height:1.4}
.qz-feedback.good b{color:var(--accent)}
.qz-feedback.bad b{color:var(--danger)}
.qz-hand-av{font-size:54px}
.qz-over-i{font-size:54px}
.qz-finals{display:flex;flex-direction:column;gap:8px;width:100%;max-width:330px}
.qz-final{display:flex;align-items:center;gap:10px;background:var(--panel-2);border-radius:12px;padding:11px 13px}
.qz-final b{font-size:19px;font-variant-numeric:tabular-nums}
.qz-final .qz-p-n{text-align:left}
.qz-p-c{font-size:11.5px;color:var(--text-2)}
#qzOver .btn{width:100%;max-width:330px}
.qz-invite{position:fixed;left:50%;transform:translateX(-50%) translateY(-130%);top:12px;z-index:94;
background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:13px 15px;
box-shadow:var(--shadow);display:flex;align-items:center;gap:11px;width:min(420px,calc(100% - 24px));
transition:transform .18s var(--ease)}
.qz-invite.on{transform:translateX(-50%) translateY(0)}
.qz-invite-i{font-size:24px}
.qz-invite b{flex:1;font-size:13.5px;font-weight:600;line-height:1.3}
.qz-invite-b{display:flex;gap:7px;flex:0 0 auto}
.qz-invite-b .btn{padding:8px 12px;font-size:12.5px}
@media (max-width:360px){
.qz-cats{grid-template-columns:repeat(2,1fr)}
.qz-q{font-size:17.5px}
.qz-invite{flex-wrap:wrap}
}
.gh-wrap,.gm-wrap{background:var(--panel)}
.gh-tabs-w{padding:10px 16px 0;flex:none}
.gh-body{gap:14px}
.gh-hero{display:flex;flex-direction:column;gap:3px;padding:2px 2px 0}
.gh-hero b{font-size:21px}
.gh-hero span{font-size:13px;color:var(--text-2)}
.gh-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.gh-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;
background:var(--panel-2);border-radius:16px;padding:13px 13px 12px;color:var(--text);cursor:pointer;
font-family:inherit;border:1px solid transparent;transition:transform .14s var(--ease),border-color .2s,background .2s;min-height:150px}
.gh-card:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.gh-card:active{transform:scale(.975)}
.gh-card b{font-size:15px;margin-top:4px}
.gh-card small{font-size:11.5px;color:var(--text-2);line-height:1.3}
.gh-ic{width:52px;height:52px;display:grid;place-items:center;border-radius:14px;background:var(--panel-3);flex:none}
.gh-ic svg{width:40px;height:40px}
.gh-pl{position:absolute;top:11px;right:11px;font-size:10.5px;color:var(--text-2);background:var(--panel-3);padding:3px 7px;border-radius:999px}
.gh-chips{display:flex;gap:7px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.gh-chips::-webkit-scrollbar{display:none}
.gh-chip{flex:none;background:var(--panel-2);color:var(--text-2);border-radius:999px;padding:7px 12px;font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;border:0}
.gh-chip.on{background:var(--accent);color:var(--on-accent)}
.lb-list{display:flex;flex-direction:column;gap:7px}
.lb-note{margin:0;font-size:12px;color:var(--text-2)}
.lb-local{font-size:12.5px;color:var(--text-2);background:var(--panel-2);border-radius:11px;padding:9px 12px;margin-top:8px}
.lb-row{display:flex;align-items:center;gap:11px;background:var(--panel-2);border-radius:13px;padding:10px 12px;border:2px solid transparent}
.lb-row.me{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.lb-rank{width:26px;text-align:center;font-weight:700;font-size:15px;color:var(--text-2);flex:none}
.lb-av{width:36px;height:36px;border-radius:50%;background:var(--panel-3);display:grid;place-items:center;font-size:19px;overflow:hidden;flex:none}
.lb-av img{width:100%;height:100%;object-fit:cover}
.lb-n{flex:1;min-width:0;display:flex;flex-direction:column}
.lb-n b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-n b i{font-style:normal;color:var(--text-2);font-weight:500}
.lb-n small{font-size:11.5px;color:var(--text-2)}
.lb-pts{display:flex;flex-direction:column;align-items:flex-end}
.lb-pts b{font-size:18px;font-variant-numeric:tabular-nums}
.lb-pts small{font-size:10px;color:var(--text-2)}
.gm-hero-i{display:grid;place-items:center;width:76px;height:76px;margin:0 auto;border-radius:22px;background:var(--panel-2)}
.gm-hero-i svg{width:58px;height:58px}
.gm-hero-i.pulse{animation:gmPulse 1.6s ease-in-out infinite}
@keyframes gmPulse{50%{transform:scale(1.07)}}
.gm-record{grid-template-columns:repeat(3,1fr)}
.gm-how{background:var(--panel-2);border-radius:12px;padding:10px 13px;font-size:13px}
.gm-how summary{cursor:pointer;font-weight:600}
.gm-how p{margin:8px 0 2px;color:var(--text-2);line-height:1.5;white-space:pre-line}
.gm-mode{background:var(--panel-2);border-radius:15px;padding:13px;display:flex;flex-direction:column;gap:9px}
.gm-mode-h{display:flex;align-items:center;gap:12px}
.gm-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-2);margin-bottom:-3px}
.gm-seg{background:var(--panel)}
.gm-seg button{padding:8px 6px;font-size:12.5px;font-family:inherit;border:0;cursor:pointer;background:transparent}
.gm-names{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.gm-name{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 10px;color:var(--text);font-family:inherit;font-size:13.5px}
.gm-name[hidden]{display:none}
.gm-go{margin-top:2px}
.gm-go:disabled{opacity:.45;cursor:default}
.gm-opp.on{outline:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--panel-2))}
.gm-opp.off .qz-opp-n{opacity:.6}
.gm-tick{width:22px;height:22px;border-radius:50%;border:2px solid var(--text-2);display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;flex:none}
.gm-opp.on .gm-tick{background:var(--accent);border-color:var(--accent)}
.gm-daily{display:flex;align-items:center;gap:12px;border:0;border-radius:15px;padding:14px;cursor:pointer;font-family:inherit;text-align:left;
color:var(--text);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 30%,var(--panel-2)),var(--panel-2))}
.gm-daily-i{font-size:26px}
.gm-streak{font-weight:700;font-size:13px;background:var(--panel);padding:5px 9px;border-radius:999px}
.gm-lobby{display:flex;flex-direction:column;gap:7px;width:100%;max-width:340px}
.gm-lob{display:flex;align-items:center;gap:10px;background:var(--panel-2);border-radius:12px;padding:10px 12px}
.gm-lob b{flex:1;text-align:left;font-size:14px}
.gm-lob.no{opacity:.55}
#gmWait .btn,#gmOver .btn,#gmHand .btn{width:100%;max-width:340px}
.gm-play{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;padding:10px 12px 12px;overflow:hidden}
.gm-hud{display:flex;gap:6px;flex:none;overflow-x:auto;scrollbar-width:none}
.gm-hud::-webkit-scrollbar{display:none}
.gm-seat{position:relative;display:flex;align-items:center;gap:6px;background:var(--panel-2);border-radius:12px;padding:7px 10px;flex:1;min-width:0;border:2px solid transparent;transition:border-color .2s,background .2s}
.gm-seat.turn{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--panel-2))}
.gm-seat.left{opacity:.6}
.gm-seat .qz-p-n{font-size:12.5px}
.gm-num{font-size:15px;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:2px}
.gm-num small{font-size:11px;opacity:.7}
.gm-clock{position:absolute;top:-8px;right:6px;font-style:normal;font-size:10.5px;font-weight:700;background:var(--accent);color:var(--on-accent);border-radius:999px;padding:1px 6px;font-variant-numeric:tabular-nums}
.gm-clock.low{background:var(--danger);animation:gmPulse .8s infinite}
.gm-status{flex:none;min-height:22px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;font-size:13px;text-align:center}
.gm-turn{color:var(--text-2);font-weight:600}
.gm-fx{background:color-mix(in srgb,var(--gold) 22%,transparent);color:var(--gold);font-weight:700;border-radius:999px;padding:3px 10px;font-size:12px;animation:gmIn .3s var(--ease)}
.gm-fx.hot{background:color-mix(in srgb,var(--danger) 22%,transparent);color:var(--danger)}
@keyframes gmIn{from{transform:translateY(-4px);opacity:0}}
.gm-board{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:auto}
.gm-actions{flex:none;display:flex;justify-content:center}
.gm-actions:empty{display:none}
.qz-final.win{border:2px solid var(--gold)}
.t3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(330px,86vw);aspect-ratio:1}
.t3c{background:var(--panel-2);border:0;border-radius:16px;display:grid;place-items:center;cursor:pointer;font-family:inherit;transition:background .15s,transform .1s}
.t3c:not(:disabled):hover{background:var(--panel-3)}
.t3c:not(:disabled):active{transform:scale(.96)}
.t3c:disabled{cursor:default}
.t3c.win{background:color-mix(in srgb,var(--accent) 30%,var(--panel-2))}
.mk{font-weight:800;font-size:clamp(40px,13vw,64px);line-height:1;animation:mkIn .25s var(--ease)}
.gm-seat .mk{font-size:15px;animation:none}
.mk.x{color:var(--accent)}
.mk.o{color:var(--gold)}
@keyframes mkIn{from{transform:scale(.4);opacity:0}}
.c4{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;background:#1e5bd8;padding:8px;border-radius:16px;width:min(380px,94vw);box-shadow:inset 0 -4px 0 rgba(0,0,0,.25)}
.c4col{display:grid;grid-template-rows:repeat(6,1fr);gap:4px;background:transparent;border:0;padding:0;cursor:pointer;border-radius:10px}
.c4col:not(:disabled):hover{background:rgba(255,255,255,.12)}
.c4col:disabled{cursor:default}
.c4s{aspect-ratio:1;border-radius:50%;background:#0d2b6b;display:grid;place-items:center;overflow:visible;box-shadow:inset 0 3px 4px rgba(0,0,0,.45)}
.disc{display:block;width:100%;height:100%;border-radius:50%;box-shadow:inset 0 -3px 0 rgba(0,0,0,.22)}
.disc.p0{background:#e53935}
.disc.p1{background:#fdd835}
.disc.drop{animation:c4drop .42s cubic-bezier(.3,0,.6,1.4)}
.disc.win{outline:3px solid #fff;outline-offset:-3px}
@keyframes c4drop{from{transform:translateY(calc(var(--r) * -112%))}}
.gm-seat .disc{width:15px;height:15px;flex:none}
.ok-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.ok-board{background:linear-gradient(180deg,#a8703a,#8d5a2b);border-radius:26px;padding:10px;width:min(440px,96vw);
box-shadow:inset 0 2px 0 rgba(255,255,255,.18),inset 0 -5px 0 rgba(0,0,0,.25),0 10px 30px -10px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:8px}
.ok-row{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;padding:4px;border-radius:18px;transition:background .2s}
.ok-row.on{background:rgba(255,255,255,.1)}
.ok-pit{position:relative;aspect-ratio:1;border-radius:50%;border:0;background:radial-gradient(circle at 50% 38%,#4a2b10,#6b4220 70%);
box-shadow:inset 0 4px 7px rgba(0,0,0,.55);cursor:default;padding:0;font-family:inherit}
.ok-pit.can{cursor:pointer;box-shadow:inset 0 4px 7px rgba(0,0,0,.55),0 0 0 3px var(--gold)}
.ok-pit.can:active{transform:scale(.95)}
.ok-pit.sown{animation:okSown .6s ease}
.ok-pit.cap{box-shadow:inset 0 4px 7px rgba(0,0,0,.55),0 0 0 3px var(--danger)}
.ok-pit.from{opacity:.85}
@keyframes okSown{40%{background:radial-gradient(circle at 50% 38%,#6d4317,#8a5a2a 70%)}}
.ok-pit .sd{position:absolute;width:15%;height:15%;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff7e2,#d9c08f);transform:translate(-50%,-50%);box-shadow:0 1px 1px rgba(0,0,0,.5)}
.ok-pit b{position:absolute;right:-2px;bottom:-4px;font-size:10.5px;background:rgba(0,0,0,.7);color:#fff;border-radius:999px;padding:0 5px;min-width:17px;font-variant-numeric:tabular-nums}
.ok-store{display:flex;align-items:center;gap:10px;background:var(--panel-2);border-radius:999px;padding:5px 7px 5px 14px;font-size:12.5px;color:var(--text-2)}
.ok-store b{background:#8d5a2b;color:#fff;border-radius:999px;min-width:34px;text-align:center;padding:4px 8px;font-size:15px}
.ok-hint{margin:0;font-size:11.5px;color:var(--text-2);text-align:center}
.ok-pit.hot{box-shadow:inset 0 4px 7px rgba(0,0,0,.55),0 0 0 3px #ffd54a,0 0 16px 2px #ffd54a99;transform:scale(1.07);z-index:2}
.ok-pit.lift{box-shadow:inset 0 4px 7px rgba(0,0,0,.55),0 0 0 3px #fff,0 0 18px 3px #ffffff88}
.ok-pit.hot b{background:#ffd54a;color:#3a2408;font-weight:800;animation:okCount .18s ease}
.ok-pit.flash{animation:okFour .55s ease}
.ok-pit{transition:transform .12s ease,box-shadow .12s ease}
.ok-hand{position:absolute;left:50%;top:-14px;transform:translateX(-50%);z-index:3;background:#fff;color:#3a2408;
font-size:11px;font-weight:800;border-radius:999px;padding:1px 6px;box-shadow:0 2px 6px rgba(0,0,0,.35);white-space:nowrap;pointer-events:none}
.ok-gain{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);z-index:4;font-weight:900;font-size:16px;color:#ffd54a;
text-shadow:0 2px 4px #000;pointer-events:none;animation:okGainT .55s ease forwards}
.ok-gain.sb{animation-name:okGainB}
.ok-store.pop b{animation:okStore .5s ease}
.ok-sowing{display:inline-flex;align-items:center;gap:6px;color:var(--gold,#e8b04b);font-weight:600}
.ok-dots{display:inline-flex;gap:3px}
.ok-dots b{width:5px;height:5px;border-radius:50%;background:currentColor;animation:okDot 1s infinite}
.ok-dots b:nth-child(2){animation-delay:.15s}.ok-dots b:nth-child(3){animation-delay:.3s}
@keyframes okCount{from{transform:scale(1.5)}to{transform:none}}
@keyframes okFour{0%{transform:scale(1.07)}35%{transform:scale(1.22);box-shadow:0 0 0 4px #ffd54a,0 0 26px 8px #ffd54acc}100%{transform:scale(1)}}
@keyframes okGainT{0%{opacity:0;transform:translate(-50%,-30%) scale(.7)}30%{opacity:1;transform:translate(-50%,-60%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-220%)}}
@keyframes okGainB{0%{opacity:0;transform:translate(-50%,-30%) scale(.7)}30%{opacity:1;transform:translate(-50%,-60%) scale(1.15)}100%{opacity:0;transform:translate(-50%,160%)}}
@keyframes okStore{0%{transform:scale(1)}40%{transform:scale(1.35);background:#ffd54a;color:#3a2408}100%{transform:scale(1)}}
@keyframes okDot{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.wh{display:flex;flex-direction:column;justify-content:space-between;gap:10px;width:100%;height:100%;position:relative}
.wh-opps{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.wh-opp{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11.5px;color:var(--text-2);padding:5px 8px;border-radius:12px;border:2px solid transparent}
.wh-opp.turn{border-color:var(--accent)}
.wh-fan{display:flex;height:42px}
.wh-fan .wc{margin-left:-17px}
.wh-fan .wc:first-child{margin-left:0}
.wh-mid{display:flex;align-items:center;justify-content:center;gap:22px}
.wh-market{display:flex;flex-direction:column;align-items:center;gap:5px;background:transparent;border:0;color:var(--text-2);font-size:11.5px;cursor:pointer;font-family:inherit}
.wh-market:disabled{cursor:default;opacity:.75}
.wh-market:not(:disabled) .wc{box-shadow:0 0 0 3px var(--gold),0 6px 14px rgba(0,0,0,.35)}
.wh-pile{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px}
.wh-need{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--gold)}
.wh-need svg{width:15px;height:15px;fill:var(--gold)}
.wh-hand{display:flex;justify-content:safe center;flex-wrap:nowrap;overflow-x:auto;padding:14px 8px 4px;gap:0;scrollbar-width:thin}
.wh-hand .wc{margin-left:var(--ov,-14px);cursor:pointer;transition:transform .15s var(--ease)}
.wh-hand .wc:first-child{margin-left:0}
.wh-hand.live .wc.ok{transform:translateY(-10px);box-shadow:0 0 0 2.5px var(--accent),0 8px 16px rgba(0,0,0,.35)}
.wh-hand .wc.dim{filter:saturate(.4) brightness(.8)}
.wc{flex:none;position:relative;width:64px;height:92px;border-radius:9px;background:#fffdf8;color:#8b1a1a;display:grid;place-items:center;
box-shadow:0 3px 9px rgba(0,0,0,.35);border:1px solid #e3d6c6;font-weight:800;user-select:none}
.wc em{position:absolute;top:4px;left:6px;font-style:normal;font-size:14px}
.wc em.r{top:auto;left:auto;bottom:4px;right:6px;transform:rotate(180deg)}
.wc svg.big{width:34px;height:34px;fill:#8b1a1a}
.wc.whot b{font-size:15px;letter-spacing:.04em}
.wc.back{background:repeating-linear-gradient(45deg,#8b1a1a 0 6px,#a62626 6px 12px);border-color:#5e1010}
.wc.back i{font-style:normal;color:#fff;font-size:11px;letter-spacing:.06em;background:#5e1010;padding:2px 5px;border-radius:5px}
.wc.mini{width:30px;height:42px;border-radius:5px}
.wc.mini i{font-size:0;padding:0}
.wc.top{width:76px;height:108px}
.wc.top svg.big{width:42px;height:42px}
.wc.fresh{animation:whIn .35s var(--ease)}
@keyframes whIn{from{transform:translateY(-30px) rotate(-8deg);opacity:0}}
.wh-ask{position:absolute;inset:auto 0 0 0;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow);z-index:3}
.wh-ask>div{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.wh-ask [data-ask]{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--panel-2);border:0;border-radius:12px;padding:10px 2px;color:var(--text);font-size:10.5px;cursor:pointer;font-family:inherit}
.wh-ask svg{width:26px;height:26px;fill:#c0392b}
.ludo{position:relative;width:min(400px,94vw,calc(100vh - 290px));aspect-ratio:1;min-width:260px}
.ludo-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(15,1fr);grid-template-rows:repeat(15,1fr);
background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 8px 26px -8px rgba(0,0,0,.6)}
.ludo-grid .lc{border:.5px solid #cfd8dc;display:grid;place-items:center;font-style:normal;font-size:clamp(8px,2.2vw,12px);color:#90a4ae}
.ludo-grid .lc.safe{color:#90a4ae}
.lb-base{display:grid;place-items:center;padding:14%}
.lb-base div{width:100%;height:100%;background:#fff;border-radius:18%}
.lb-goal{background:conic-gradient(from 225deg,#43a047 0 25%,#fdd835 0 50%,#1e88e5 0 75%,#e53935 0 100%)}
.ludo-toks{position:absolute;inset:0;pointer-events:none}
.ltok{position:absolute;width:5.4%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:2px solid #fff;padding:0;
background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--c) 55%,#fff),var(--c) 60%);box-shadow:0 2px 4px rgba(0,0,0,.5);
transition:left .32s var(--ease),top .32s var(--ease);pointer-events:auto;cursor:default}
.ltok.can{cursor:pointer;animation:luPulse .9s ease-in-out infinite;border-color:#111}
.ltok.last{outline:2px solid rgba(0,0,0,.55);outline-offset:1px}
@keyframes luPulse{50%{transform:translate(-50%,-50%) scale(1.28)}}
.gm-seat .lud{width:13px;height:13px;border-radius:50%;flex:none}
.lud.c0{background:#e53935}.lud.c1{background:#43a047}.lud.c2{background:#fdd835}.lud.c3{background:#1e88e5}
.lu-roll{display:flex;align-items:center;gap:12px;background:var(--panel-2);border:2px solid transparent;border-radius:16px;padding:9px 18px 9px 10px;color:var(--text);font-weight:700;font-size:15px;font-family:inherit;cursor:default}
.lu-roll.live{border-color:var(--c);cursor:pointer;animation:gmPulse 1.2s ease-in-out infinite}
.die{width:44px;height:44px;border-radius:10px;background:#fff;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:6px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.15),0 2px 6px rgba(0,0,0,.4)}
.die i{border-radius:50%;margin:1.5px}
.die i.on{background:#222}
.lu-roll.rolled .die{animation:luRoll .45s ease}
@keyframes luRoll{0%{transform:rotate(-200deg) scale(.6)}70%{transform:rotate(15deg) scale(1.08)}}
.dr{display:grid;grid-template-columns:repeat(var(--n),1fr);width:min(420px,96vw,calc(100vh - 250px));min-width:260px;aspect-ratio:1;border-radius:8px;overflow:hidden;
border:5px solid #5b3a1e;box-shadow:0 8px 26px -8px rgba(0,0,0,.6)}
.ds{background:#ecd9b0;border:0;padding:0;display:grid;place-items:center;position:relative}
.ds.dk{background:#8a5a33;cursor:default}
.ds.dk.can{cursor:pointer}
.ds.sel{background:#5f7d3a}
.ds.dest{cursor:pointer}
.ds.dest::after{content:'';width:32%;height:32%;border-radius:50%;background:rgba(232,176,75,.9)}
.ds.path{background:#7a6a3a}
.ds.last{box-shadow:inset 0 0 0 3px rgba(232,176,75,.65)}
.ds.gone::before{content:'';position:absolute;width:40%;height:40%;border-radius:50%;border:2px dashed rgba(255,255,255,.35)}
.drp{width:78%;height:78%;border-radius:50%;display:grid;place-items:center;position:relative}
.drp.lt{background:radial-gradient(circle at 40% 35%,#fffdf5,#e5d8bd);box-shadow:inset 0 -3px 0 #bba77f,0 2px 3px rgba(0,0,0,.5)}
.drp.dk{background:radial-gradient(circle at 40% 35%,#4a3526,#1d140d);box-shadow:inset 0 -3px 0 #000,0 2px 3px rgba(0,0,0,.5)}
.drp.king::after{content:'♛';font-size:clamp(11px,3.4vw,19px);color:#e8b04b;line-height:1}
.ds.can .drp{box-shadow:0 0 0 2px rgba(232,176,75,.85),0 2px 3px rgba(0,0,0,.5)}
.gm-seat .drp{width:14px;height:14px;flex:none}
.wl{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.wl-minis{display:flex;gap:12px;justify-content:center}
.wl-mini{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;color:var(--text-2)}
.wm{display:flex;gap:2px;margin-bottom:2px}
.wm i{width:8px;height:8px;border-radius:2px;background:var(--panel-3)}
.wm i.s2{background:var(--accent)}.wm i.s1{background:var(--gold)}.wm i.s0{background:#566670}
.wl-grid{display:flex;flex-direction:column;gap:5px}
.wr{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.wr.shake{animation:wlShake .35s}
@keyframes wlShake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.wt{width:min(54px,13vw,7.2vh);aspect-ratio:1;border:2px solid var(--panel-3);border-radius:8px;display:grid;place-items:center;
font-weight:800;font-size:clamp(14px,4.4vw,20px);text-transform:none}
.wt.typed{border-color:var(--text-2);animation:mkIn .12s}
.wt.s2{background:var(--accent);border-color:var(--accent);color:#fff}
.wt.s1{background:var(--gold);border-color:var(--gold);color:#2b1d05}
.wt.s0{background:#566670;border-color:#566670;color:#fff}
.wt.flip{animation:wlFlip .5s var(--d) both}
@keyframes wlFlip{0%{transform:rotateX(90deg)}100%{transform:none}}
.wl-hint{background:var(--panel-2);border:0;border-radius:999px;padding:7px 14px;color:var(--text);font-family:inherit;font-size:12.5px;cursor:pointer}
.wl-kb{display:flex;flex-direction:column;gap:5px;width:100%;max-width:480px}
.wl-kb>div{display:flex;gap:4px;justify-content:center}
.wk{flex:1;min-width:0;height:44px;border:0;border-radius:7px;background:var(--panel-3);color:var(--text);font-weight:700;font-size:13.5px;font-family:inherit;cursor:pointer;padding:0}
.wk.di{font-size:12px}
.wk.wide{flex:1.5;font-size:11.5px}
.wk.s2{background:var(--accent);color:#fff}.wk.s1{background:var(--gold);color:#2b1d05}.wk.s0{background:#3a4750;color:#8696a0}
.wk:active{transform:scale(.94)}
.wl-word{font-size:15px}
.wl-share{background:var(--panel-2);border-radius:12px;padding:10px 16px;font-size:18px;line-height:1.2;margin:0}
.gm-inv-ic svg{width:30px;height:30px}
.gs-body{display:flex;flex-direction:column;gap:9px;padding:0 4px 10px}
.gs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.gs-g{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--panel-2);border:0;border-radius:14px;padding:10px 4px;color:var(--text);font-family:inherit;cursor:pointer}
.gs-g .gh-ic{width:44px;height:44px;background:transparent}
.gs-g .gh-ic svg{width:36px;height:36px}
.gs-g b{font-size:11px;font-weight:600;text-align:center;line-height:1.2}
.gs-note{margin:0;font-size:12.5px;color:var(--text-2)}
.msg.gmsg{display:flex;max-width:100%}
.msg.gmsg.out{justify-content:flex-end}
.gcard{width:min(300px,82%);background:var(--bubble-in);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:8px;
border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);box-shadow:0 2px 6px rgba(0,0,0,.18)}
.msg.gmsg.out .gcard{background:var(--bubble-out)}
.gc-top{display:flex;align-items:center;gap:10px}
.gc-ic{width:42px;height:42px;border-radius:12px;background:rgba(0,0,0,.18);display:grid;place-items:center;flex:none}
.gc-ic svg{width:32px;height:32px}
.gc-t{display:flex;flex-direction:column;min-width:0}
.gc-t b{font-size:14.5px}
.gc-t small{font-size:12px;color:var(--text-2)}
.gc-st{font-size:13px;font-weight:600}
.gcard.s-live .gc-st{color:var(--accent)}
.gcard.s-declined .gc-st,.gcard.s-expired .gc-st,.gcard.s-cancelled .gc-st{color:var(--text-2)}
.gc-ticks{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--text-2)}
.gc-btns{display:flex;gap:7px}
.gc-btns .btn{flex:1;padding:8px 10px;font-size:13px}
.gc-time{font-size:10.5px;color:var(--text-2);text-align:right;margin-top:-4px}
@media (max-width:360px){
.gh-card{min-height:136px;padding:11px}
.wc{width:56px;height:80px}
.gs-grid{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:781px){ .gh-grid{grid-template-columns:repeat(3,1fr)} }
body:has(#gamePage.on) .toast{bottom:auto;top:64px;transform:translateX(-50%) translateY(-80px)}
body:has(#gmPage.on) .toast{bottom:auto;top:var(--gm-toast-top,64px);transform:translateX(-50%) translateY(-80px)}
body:has(#gmPage.on) .toast.on,body:has(#gamePage.on) .toast.on{transform:translateX(-50%)}
.wh-hand .wc em:not(.r){left:4px;font-size:13px;letter-spacing:-.5px}
.wc svg.pip{position:absolute;top:22px;left:5px;width:13px;height:13px;fill:currentColor}
.wc i.pip.w{position:absolute;top:22px;left:5px;font:800 11px/13px system-ui,sans-serif;font-style:normal;color:#8b1a1a}
.wc.mini svg.pip,.wc.mini i.pip,.wh-fan svg.pip,.wh-fan i.pip{display:none}
.gm-hud.many{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.gm-hud.many .gm-seat{padding:5px 9px}
@media (max-width:480px){
.chat-head{gap:6px;padding-left:8px;padding-right:8px}
.chat-head #btnInfo{display:none}
.chat-head .icon-btn{width:36px;height:36px}
}
body:has(#app.chatopen):not(:has(#gmPage.on)):not(:has(#gamePage.on)) .toast{bottom:84px}
.field label.pick{text-transform:none;letter-spacing:0;font-size:inherit;font-weight:inherit;color:inherit}
[data-theme="light"] .bottom-nav button.on{color:#00735e}
.toast{visibility:hidden;transition:transform .3s var(--ease),opacity .3s var(--ease),visibility 0s linear .3s}
.toast.on{visibility:visible;transition:transform .3s var(--ease),opacity .3s var(--ease),visibility 0s}
[role="button"][tabindex]:not(button):focus-visible,div.switch:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:10px}
.st-cell:focus-visible{outline-offset:2px}
@media (max-width:780px){body:not(:has(#app.chatopen)):not(:has(#gmPage.on)):not(:has(#gamePage.on)) .toast{bottom:calc(var(--nav-h) + 18px + env(safe-area-inset-bottom))}}
[hidden]{display:none!important}
.gm-help{margin-left:auto;font-weight:800;font-size:17px;width:36px;height:36px;border-radius:50%;background:var(--panel-2)}
.gm-howbtn{display:flex;align-items:center;gap:12px;width:100%;border:0;border-radius:15px;padding:12px 14px;cursor:pointer;font-family:inherit;text-align:left;color:var(--text);
background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 22%,var(--panel-2)),var(--panel-2))}
.gm-howbtn>span:nth-child(2){flex:1;display:flex;flex-direction:column;gap:2px}
.gm-howbtn small{color:var(--text-2);font-size:12px}
.gm-howbtn-i{font-size:24px}
.gm-howbtn>span:last-child{font-size:22px;color:var(--text-2)}
.gm-howbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gm-note{margin:-3px 0 0;font-size:12px;color:var(--text-2);text-align:center}
.gm-quick{font-size:15.5px;padding:13px 16px}
.gm-or{display:flex;align-items:center;gap:10px;color:var(--text-2);font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;margin:4px 0 0}
.gm-or::before,.gm-or::after{content:'';flex:1;height:1px;background:var(--line)}
.rm-code-in{display:flex;gap:8px}
.rm-input{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:10px 12px;color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
font-size:16px;letter-spacing:.18em;text-transform:uppercase}
.rm-input::placeholder{letter-spacing:.02em;text-transform:none;font-family:inherit;font-size:13.5px}
.rm-input:focus{outline:2px solid var(--accent);outline-offset:0}
.rm-code-in .btn{flex:none;padding:10px 16px}
.rm-code-in .btn:disabled{opacity:.5;cursor:default}
.gm-switch{display:flex;align-items:center;gap:10px;font-size:13.5px;cursor:pointer}
.gm-switch input{width:20px;height:20px;accent-color:var(--accent);flex:none}
.rm-h{margin-top:4px}
.rm-list{display:flex;flex-direction:column;gap:7px}
.rm-row{display:flex;align-items:center;gap:11px;background:var(--panel);border-radius:12px;padding:8px 10px}
.rm-ic{width:36px;height:36px;display:grid;place-items:center;font-size:22px;flex:none}
.rm-ic svg{width:34px;height:34px}
.rm-t{flex:1;min-width:0;display:flex;flex-direction:column}
.rm-t b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-t small{font-size:12px;color:var(--text-2)}
.rm-join{padding:8px 14px;flex:none}
.rm-empty{padding:6px 0}
.gh-join{background:var(--panel-2);border-radius:15px;padding:12px;display:flex;flex-direction:column;gap:8px}
.rm-lbl{font-weight:700;font-size:13.5px}
.gh-rooms{display:flex;flex-direction:column;gap:7px}
.gh-rooms .rm-row{background:var(--panel-2)}
.rm-codebox{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--panel-2);border-radius:18px;padding:14px 22px;width:100%;max-width:340px;
border:2px dashed color-mix(in srgb,var(--accent) 55%,transparent)}
.rm-codebox small{color:var(--text-2);font-size:12px;text-align:center}
.rm-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:34px;letter-spacing:.14em;color:var(--accent);user-select:none}
.rm-share{display:flex;gap:7px;width:100%;max-width:340px}
#gmWait .rm-share .btn{flex:1;min-width:0;padding:10px 6px;font-size:13px;text-align:center;text-decoration:none;width:auto}
.rm-wa{background:#25d366;color:#0b2e17}
.rm-seats{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:8px;width:100%;max-width:340px}
.rm-seat{display:flex;flex-direction:column;align-items:center;gap:3px;background:var(--panel-2);border-radius:14px;padding:10px 4px;border:1.5px dashed var(--text-2);opacity:.6;min-width:0}
.rm-seat.on{opacity:1;border:1.5px solid var(--accent);animation:rmIn .35s var(--ease)}
.rm-seat b{font-size:12.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rm-seat small{font-size:10.5px;color:var(--text-2)}
.rm-seat .qz-opp-av{font-size:24px}
@keyframes rmIn{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
.rm-radar{position:relative;width:120px;height:120px;display:grid;place-items:center;margin:4px auto}
.rm-radar i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent);opacity:0;animation:rmPing 2.4s ease-out infinite}
.rm-radar i:nth-child(2){animation-delay:.8s}
.rm-radar i:nth-child(3){animation-delay:1.6s}
.rm-radar span{width:54px;height:54px;border-radius:50%;background:var(--accent);display:grid;place-items:center;font-size:24px;box-shadow:0 0 24px color-mix(in srgb,var(--accent) 60%,transparent)}
@keyframes rmPing{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.15);opacity:0}}
.rm-elapsed{margin:0;font-variant-numeric:tabular-nums;color:var(--text-2);font-size:14px}
.gm-coins{margin:0;font-weight:800;color:var(--gold);font-size:16px;animation:rmIn .4s var(--ease)}
.gg-scrim{align-items:center;padding:12px}
.gg{width:min(420px,100%);background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:12px 14px 14px;display:flex;flex-direction:column;gap:10px;
transform:translateY(14px) scale(.97);transition:transform .18s var(--ease);box-shadow:var(--shadow);max-height:94vh}
.gg-scrim.on .gg{transform:none}
.gg-top{display:flex;align-items:center;gap:10px}
.gg-top b{flex:1;font-size:15px}
.gg-view{overflow:hidden;touch-action:pan-y;border-radius:16px}
.gg-track{display:flex;transition:transform .2s var(--ease);will-change:transform}
.gg-step{flex:0 0 100%;min-width:0;display:flex;flex-direction:column;gap:6px;padding:0 2px;user-select:none}
.gg-fig{background:var(--panel-2);border-radius:16px;padding:8px;color:var(--text)}
.gg-svg{display:block;width:100%;height:auto;max-height:36vh}
.gg-n{font-size:11.5px;font-weight:700;color:var(--accent);letter-spacing:.06em}
.gg-step h3{margin:0;font-size:18px}
.gg-step p{margin:0;color:var(--text-2);line-height:1.5;font-size:14px;min-height:4.5em}
.gg-dots{display:flex;justify-content:center;gap:7px}
.gg-dot{width:8px;height:8px;border-radius:999px;border:0;padding:0;background:var(--text-2);opacity:.35;cursor:pointer;transition:width .25s var(--ease),opacity .25s}
.gg-dot.on{width:22px;opacity:1;background:var(--accent)}
.gg-nav{display:flex;gap:8px}
.gg-nav .btn{flex:1}
.sh-body{gap:14px}
.sh-wallet{background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 26%,var(--panel-2)),var(--panel-2));border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:12px}
.sh-bal{display:flex;align-items:center;gap:12px}
.sh-coin{font-size:36px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.35))}
.sh-bal>span:nth-child(2){display:flex;flex-direction:column;flex:1}
.sh-bal b{font-size:30px;line-height:1;font-variant-numeric:tabular-nums}
.sh-bal small{color:var(--text-2);font-size:12.5px}
.sh-earn{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
.sh-earn-b{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--panel);border:0;border-radius:13px;padding:10px 6px;color:var(--text);font-family:inherit;cursor:pointer;text-align:center}
.sh-earn-b span{font-size:22px}
.sh-wact{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.sh-wact-b{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 8px;border:0;border-radius:13px;background:var(--panel);color:var(--text);font:inherit;font-weight:650;font-size:14px;cursor:pointer}
.sh-wact-b span{font-size:17px}
.sh-wact-b:active{transform:scale(.97)}
.sh-earn-b b{font-size:12.5px}
.sh-earn-b small{font-size:11px;color:var(--text-2)}
.sh-earn-b:disabled{opacity:.55;cursor:default}
.sh-earn-b:not(:disabled):not(.sh-earn-i):hover{outline:2px solid var(--gold)}
.sh-earn-i{cursor:default}
.plus-badge{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.04em;color:#2a1c05;background:linear-gradient(135deg,#f3d27a,#c99a2e);border-radius:999px;padding:1px 7px;vertical-align:middle;font-style:normal}
.plus-badge.big{font-size:13px;padding:4px 11px}
.sh-plus{border-radius:18px;padding:15px;display:flex;flex-direction:column;gap:10px;color:#f7ecd2;
background:radial-gradient(circle at 85% 0%,rgba(243,210,122,.35),transparent 55%),linear-gradient(135deg,#2a2213,#0f0c07);border:1px solid rgba(212,168,74,.5)}
.sh-plus-h{display:flex;align-items:center;gap:12px}
.sh-plus-h div{display:flex;flex-direction:column}
.sh-plus-h b{font-size:18px;color:#f3d27a}
.sh-plus-h small{color:#d9c9a3;font-size:12.5px}
.sh-plus-i{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:24px;color:#2a1c05;background:linear-gradient(135deg,#f3d27a,#c99a2e);flex:none}
.sh-perks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:5px 10px;font-size:12.5px}
.sh-plus-btns{display:flex;gap:8px;flex-wrap:wrap}
.sh-plus-btns .btn{flex:1;min-width:130px}
.sh-off{margin:4px 0 0;color:var(--text-2);font-size:13px}
.sh-plus-btns .btn.primary,.sh-plus .btn:first-child{background-color:#e2b44f;background:linear-gradient(180deg,#f3d27a,#c99a2e);color:#2a1c05}
.sh-plus-btns .btn:not(:first-child){background:rgba(255,255,255,.08);color:#f7ecd2;border:1px solid rgba(243,210,122,.4)}
.sh-plus-btns small{font-weight:500;opacity:.8;margin-left:1px}
.sh-save{display:inline-block;font-size:10.5px;background:#157a43;color:#fff;border-radius:999px;padding:1px 6px;margin-left:4px}
.sh-packs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.sh-pack{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--panel-2);border:1.5px solid transparent;border-radius:15px;padding:16px 8px 12px;cursor:pointer;color:var(--text);font-family:inherit;overflow:hidden}
.sh-pack:hover,.sh-pack:focus-visible{border-color:var(--gold)}
.sh-pack:disabled{opacity:.6}
.sh-pack-c{font-size:18px;font-weight:800}
.sh-pack b{font-size:14px;color:var(--accent)}
.sh-ribbon{position:absolute;top:8px;right:-24px;transform:rotate(35deg);background:#c42b44;color:#fff;font-size:10.5px;font-weight:800;padding:2px 26px}
.sh-slots button{padding:8px 6px;font-size:13px;font-family:inherit;border:0;cursor:pointer;background:transparent}
.sh-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}
.sh-item{display:flex;flex-direction:column;align-items:center;gap:5px;background:var(--panel-2);border:2px solid transparent;border-radius:15px;padding:10px 6px;cursor:pointer;color:var(--text);font-family:inherit}
.sh-item.eq{border-color:var(--accent)}
.sh-item b{font-size:12.5px;text-align:center}
.sh-tag{font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px;background:var(--panel);color:var(--text-2)}
.sh-tag.eq{background:var(--accent);color:var(--on-accent)}
.sh-tag.price{color:var(--gold)}
.sh-tag.plus{color:#2a1c05;background:linear-gradient(135deg,#f3d27a,#c99a2e)}
.sh-note{margin:-4px 0 0;font-size:12px;color:var(--text-2);text-align:center}
.sh-foot{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--text-2);text-align:center;padding-bottom:6px}
.sh-foot p{margin:0}
.sh-test{background:color-mix(in srgb,var(--gold) 18%,transparent);color:var(--text);border-radius:10px;padding:7px 10px}
.cz-prev{width:74px;height:52px;border-radius:10px;display:grid;place-items:center;overflow:hidden}
.cz-prev[data-slot="board"]{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:5px;padding:7px;background:var(--bz-board,linear-gradient(180deg,#a8703a,#8d5a2b))}
.cz-prev[data-slot="board"] i{border-radius:50%;width:100%;height:100%;background:var(--bz-pit,radial-gradient(circle at 50% 38%,#4a2b10,#6b4220 70%))}
.cz-prev[data-slot="cards"]{position:relative}
.cz-prev[data-slot="cards"] em{position:absolute;width:30px;height:44px;border-radius:5px;border:1.5px solid var(--cz-edge,#5e1010);background:var(--cz-back,repeating-linear-gradient(45deg,#8b1a1a 0 6px,#a62626 6px 12px))}
.cz-prev[data-slot="cards"] em:first-child{transform:translateX(-9px) rotate(-10deg)}
.cz-prev[data-slot="cards"] em:last-child{transform:translateX(9px) rotate(8deg)}
.cz-prev[data-slot="dice"] u{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:40px;height:40px;padding:5px;border-radius:9px;text-decoration:none;
background:var(--dz-face,#fff);box-shadow:inset 0 -3px 0 rgba(0,0,0,.15),0 2px 6px rgba(0,0,0,.35);border:var(--dz-border,0)}
.cz-prev[data-slot="dice"] s{border-radius:var(--dz-pip-r,50%);margin:1.5px;background:var(--dz-pip,#222)}
.cz-prev[data-slot="dice"] s:nth-child(1){grid-area:1/1}.cz-prev[data-slot="dice"] s:nth-child(2){grid-area:1/3}.cz-prev[data-slot="dice"] s:nth-child(3){grid-area:2/2}
.cz-prev[data-slot="dice"] s:nth-child(4){grid-area:3/1}.cz-prev[data-slot="dice"] s:nth-child(5){grid-area:3/3}
#gmPage[data-board="adire"],.cz-prev[data-slot="board"][data-v="adire"]{
--bz-board:radial-gradient(circle at 25% 25%,rgba(201,214,242,.35) 0 2px,transparent 3px) 0 0/14px 14px,linear-gradient(180deg,#2c4590,#1a2760);
--bz-pit:radial-gradient(circle at 50% 38%,#0e1640,#22357a 72%);--bz-c4:linear-gradient(180deg,#2c4590,#1a2760);--bz-hole:#0c1338;
--bz-light:#d4def4;--bz-dark:#2c4a9a;--bz-edge:#16224f;--bz-cell:#22357a;--bz-ink:#eef2fb}
#gmPage[data-board="uli"],.cz-prev[data-slot="board"][data-v="uli"]{
--bz-board:repeating-linear-gradient(45deg,transparent 0 9px,rgba(29,26,23,.22) 9px 10.5px),repeating-linear-gradient(-45deg,transparent 0 17px,rgba(29,26,23,.15) 17px 18px),#efe3c8;
--bz-pit:radial-gradient(circle at 50% 38%,#2b2119,#54412f 72%);--bz-c4:repeating-linear-gradient(45deg,#e9dcc0 0 9px,#d9c8a4 9px 10.5px);--bz-hole:#2b2119;
--bz-light:#f4ead6;--bz-dark:#3b3128;--bz-edge:#1d1a17;--bz-cell:#efe3c8;--bz-ink:#1d1a17}
#gmPage[data-board="akwete"],.cz-prev[data-slot="board"][data-v="akwete"]{
--bz-board:repeating-linear-gradient(90deg,#a3201f 0 14px,#e2a83a 14px 17px,#2f6b3a 17px 25px,#e2a83a 25px 28px);
--bz-pit:radial-gradient(circle at 50% 38%,#2d0908,#5a1514 72%);--bz-c4:repeating-linear-gradient(0deg,#a3201f 0 12px,#e2a83a 12px 14px,#2f6b3a 14px 20px,#e2a83a 20px 22px);--bz-hole:#2d0908;
--bz-light:#efcf8d;--bz-dark:#8e1d1c;--bz-edge:#2f6b3a;--bz-cell:#7d1a19;--bz-ink:#fff4dc}
#gmPage[data-board="gold"],.cz-prev[data-slot="board"][data-v="gold"]{
--bz-board:radial-gradient(circle at 80% 0%,rgba(243,210,122,.28),transparent 55%),linear-gradient(135deg,#2a2213,#0f0c07);
--bz-pit:radial-gradient(circle at 50% 38%,#000,#2a2213 70%);--bz-c4:linear-gradient(135deg,#2a2213,#0f0c07);--bz-hole:#000;
--bz-light:#ecd9a0;--bz-dark:#3a2e14;--bz-edge:#d4a84a;--bz-cell:#1b160c;--bz-ink:#f3d27a}
#gmPage[data-board] .ok-board{background:var(--bz-board)}
#gmPage[data-board] .ok-pit{background:var(--bz-pit)}
#gmPage[data-board] .ok-store b{background:var(--bz-dark)}
#gmPage[data-board] .c4{background:var(--bz-c4)}
#gmPage[data-board] .c4s{background:var(--bz-hole)}
#gmPage[data-board] .dr{border-color:var(--bz-edge)}
#gmPage[data-board] .ds{background:var(--bz-light)}
#gmPage[data-board] .ds.dk:not(.sel):not(.path){background:var(--bz-dark)}
#gmPage[data-board] .t3c:not(.win){background:var(--bz-cell);color:var(--bz-ink)}
#gmPage[data-board] .t3c:not(:disabled):hover{filter:brightness(1.12)}
#gmPage[data-board="gold"] .ok-board,#gmPage[data-board="gold"] .c4{box-shadow:inset 0 0 0 2px #d4a84a}
#gmPage[data-board="gold"] .t3c{box-shadow:inset 0 0 0 1.5px rgba(212,168,74,.45)}
#gmPage[data-cards="uli"],.cz-prev[data-slot="cards"][data-v="uli"]{--cz-back:repeating-radial-gradient(circle at 50% 50%,#f1e7d3 0 4px,#1d1a17 4px 5.5px);--cz-edge:#1d1a17}
#gmPage[data-cards="adire"],.cz-prev[data-slot="cards"][data-v="adire"]{--cz-back:radial-gradient(circle,#c9d6f2 0 2px,transparent 3px) 0 0/9px 9px,#24357d;--cz-edge:#101a45}
#gmPage[data-cards="akwete"],.cz-prev[data-slot="cards"][data-v="akwete"]{--cz-back:repeating-linear-gradient(0deg,#a3201f 0 6px,#e2a83a 6px 8px,#2f6b3a 8px 12px,#e2a83a 12px 14px);--cz-edge:#4a0d0d}
#gmPage[data-cards="gold"],.cz-prev[data-slot="cards"][data-v="gold"]{--cz-back:radial-gradient(circle at 50% 30%,rgba(243,210,122,.35),transparent 60%),linear-gradient(135deg,#2a2213,#0f0c07);--cz-edge:#d4a84a}
#gmPage[data-cards] .wc.back{background:var(--cz-back);border-color:var(--cz-edge)}
#gmPage[data-cards] .wc.back i{background:var(--cz-edge)}
#gmPage[data-cards="gold"] .wc.back i{color:#2a1c05}
#gmPage[data-dice="ebony"],.cz-prev[data-slot="dice"][data-v="ebony"]{--dz-face:linear-gradient(160deg,#4a3020,#1d120a);--dz-pip:#f3e6c8}
#gmPage[data-dice="naija"],.cz-prev[data-slot="dice"][data-v="naija"]{--dz-face:linear-gradient(90deg,#008751 0 33%,#fff 33% 67%,#008751 67%);--dz-pip:#0b3d26}
#gmPage[data-dice="cowrie"],.cz-prev[data-slot="dice"][data-v="cowrie"]{--dz-face:linear-gradient(160deg,#fbf3e1,#e8d6b0);--dz-pip:#7a4a1c;--dz-pip-r:50% 50% 45% 45% / 70% 70% 30% 30%;--dz-border:1.5px solid #b08850}
#gmPage[data-dice="gold"],.cz-prev[data-slot="dice"][data-v="gold"]{--dz-face:linear-gradient(160deg,#f6dc8c,#c4952a);--dz-pip:#2a1c05}
#gmPage[data-dice] .die{background:var(--dz-face);border:var(--dz-border,0)}
#gmPage[data-dice] .die i.on{background:var(--dz-pip);border-radius:var(--dz-pip-r,50%)}
.sh-adv{align-items:center;padding:16px;z-index:97}
.sh-ad{position:relative;width:min(380px,100%);background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:26px 18px 16px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;box-shadow:var(--shadow)}
.sh-ad-lbl{position:absolute;top:10px;left:12px;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-2);border:1px solid var(--line);border-radius:5px;padding:1px 6px}
.sh-ad-i{width:70px;height:70px;border-radius:22px;display:grid;place-items:center;font-size:36px;background:linear-gradient(135deg,#f3d27a,#c99a2e);color:#2a1c05}
.sh-ad h3{margin:0;font-size:19px}
.sh-ad p{margin:0;color:var(--text-2);font-size:14px;line-height:1.5}
.sh-ad-bar{width:100%;height:5px;border-radius:999px;background:var(--panel-2);overflow:hidden}
.sh-ad-bar i{display:block;height:100%;width:0;background:var(--gold)}
.sh-ad .btn{width:100%}
.sh-ad .btn:disabled{opacity:.6}
.sh-dash{width:min(560px,100%)}
.sh-dash-body{display:flex;flex-direction:column;gap:8px;padding:4px 4px 10px}
.sh-dash-body h4{margin:8px 0 0;font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-2)}
.sh-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.sh-kpi{background:var(--panel-2);border-radius:12px;padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.sh-kpi b{font-size:16px;font-variant-numeric:tabular-nums}
.sh-kpi small{font-size:11px;color:var(--text-2)}
.sh-chart{width:100%;height:auto;background:var(--panel-2);border-radius:12px;padding:6px}
.sh-tbl{display:flex;flex-direction:column;gap:4px}
.sh-tbl>div{display:flex;align-items:baseline;gap:8px;background:var(--panel-2);border-radius:10px;padding:8px 10px;font-size:13px}
.sh-tbl>div span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-tbl>div small{color:var(--text-2);font-size:11.5px}
.sh-recent small.st-paid{color:#3ecf7a}
[data-mode="light"] .sh-recent small.st-paid{color:#157a43}
.sh-recent small.st-pending{color:var(--gold)}
.sh-setup{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:13px}
.sh-setup li{background:var(--panel-2);border-radius:10px;padding:7px 10px;color:var(--text-2)}
.sh-setup li.ok{color:var(--text)}
@media (prefers-reduced-motion:reduce){.rm-radar i{animation:none;opacity:.4}.gg-track{transition:none}}
#hubShopTab{white-space:nowrap}
.sh-chip{display:inline-block;font-size:11px;font-weight:800;background:rgba(0,0,0,.18);border-radius:999px;padding:1px 6px;margin-left:2px;font-variant-numeric:tabular-nums}
.qm-tip{margin:12px auto 0;max-width:340px;font-size:13px;line-height:1.5;color:var(--text-2);background:var(--panel-2);border-radius:12px;padding:10px 12px;text-align:left}
.srv-down{border:1px solid #f15c6d66;background:#f15c6d14;border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.srv-down[hidden]{display:none}
.srv-down b{font-size:15px}
.srv-down p{margin:0;font-size:13px;line-height:1.5;color:var(--text)}
.srv-down .srv-owner{color:var(--text-2);font-size:12px}
.srv-down .btn{align-self:flex-start;margin-top:4px;padding:8px 14px}
a,button,[role="button"],label,.pick,.row,input[type="checkbox"],input[type="radio"]{touch-action:manipulation}
.is-busy{pointer-events:none;opacity:.8;cursor:progress}
.is-busy::before{content:"";display:inline-block;width:.95em;height:.95em;margin-right:.45em;vertical-align:-.14em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:nkSpin .7s linear infinite}
.pick.is-busy::before{position:absolute;right:16px;top:50%;margin:-.5em 0 0}
.pick.is-busy{position:relative}
@keyframes nkSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.is-busy::before{animation-duration:2s}}
#cmSend.is-busy,#svCmtSend.is-busy{font-size:0}
#cmSend.is-busy::before,#svCmtSend.is-busy::before{width:16px;height:16px;margin:0;vertical-align:middle}
.save-warn{position:fixed;z-index:89;top:calc(env(safe-area-inset-top,0px) + 8px);left:8px;right:8px;max-width:640px;margin:0 auto;display:flex;gap:10px;align-items:flex-start;
background:#3a1d22;border:1px solid #f15c6d88;color:#fde8ea;border-radius:14px;padding:11px 12px;box-shadow:0 10px 30px #0008}
.save-warn[hidden]{display:none}
.save-warn .sw-ic{font-size:20px;line-height:1.2}
.save-warn .sw-mid{flex:1;min-width:0}
.save-warn b{display:block;font-size:14px}
.save-warn p{margin:3px 0 0;font-size:12.5px;line-height:1.45;opacity:.92}
.save-warn .icon-btn{width:32px;height:32px;flex:none;color:#fde8ea}
.wake-bar{position:fixed;z-index:89;top:calc(env(safe-area-inset-top,0px) + 78px);left:50%;transform:translateX(-50%);
width:max-content;max-width:calc(100vw - 24px);display:flex;gap:9px;align-items:center;
background:#14232bee;border:1px solid #2f4a57;color:#e9edef;border-radius:999px;padding:6px 6px 6px 12px;
box-shadow:0 8px 22px #0007;backdrop-filter:blur(6px);animation:wkIn .25s ease}
@keyframes wkIn{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translateX(-50%)}}
.wake-bar[hidden]{display:none}
.wake-bar .wk-mid{min-width:0;display:flex;align-items:baseline;gap:6px;white-space:nowrap;overflow:hidden}
.wake-bar b{font-size:12.5px;font-weight:600}
.wake-bar p{margin:0;font-size:11.5px;color:#b7c4cb;overflow:hidden;text-overflow:ellipsis}
.wk-spin{flex:none;width:14px;height:14px;border-radius:50%;border:2px solid #00a88444;border-top-color:#00a884;animation:nkSpin .8s linear infinite}
.wk-x{flex:none;width:26px;height:26px;border-radius:50%;border:none;background:#ffffff14;color:#e9edef;font-size:12px;cursor:pointer;display:grid;place-items:center}
.wk-x:active{transform:scale(.92)}
@media (max-width:420px){.wake-bar p{display:none}}
.chat-tabs .cl-clear{flex:0 0 42px;font-size:15px}
#listCalls .row.cl-new{background:color-mix(in srgb,var(--danger) 7%,transparent)}
#listCalls .cl-del{opacity:.5;font-size:13px;width:32px;height:32px}
#listCalls .cl-del:hover,#listCalls .cl-del:focus-visible{opacity:1;color:var(--danger)}
.apk-link{display:flex;align-items:center;gap:12px;margin-top:6px;padding:11px 14px;border-radius:14px;
background:var(--panel-2);color:var(--text);text-decoration:none;border:1px solid var(--line);
transition:transform .12s ease,background .2s ease}
.apk-link[hidden]{display:none}
.apk-link:active{transform:scale(.98)}
.apk-link:hover{background:#ffffff12}
.apk-ico{font-size:24px;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
background:linear-gradient(150deg,#3ddc84,#00a884);flex:none}
.apk-txt{flex:1;display:flex;flex-direction:column;min-width:0}
.apk-txt b{font-size:14.5px}
.apk-txt small{font-size:12px;color:var(--text-2)}
.apk-arrow{font-size:18px;color:var(--accent);font-weight:700}
html.is-app .apk-link{display:none}
.bk-card{display:flex;gap:12px;align-items:flex-start;background:var(--panel-2);border-radius:14px;padding:13px 14px;margin-bottom:10px}
.bk-ico{font-size:22px;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;
background:color-mix(in srgb,var(--accent) 22%,transparent)}
.bk-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.bk-txt b{font-size:14.5px;line-height:1.35}
.bk-txt small{font-size:12.5px;color:var(--text-2);line-height:1.45}
.btn.bk-small{padding:7px 13px;font-size:13px;flex:none}
.bk-step{min-height:18px;font-size:12.5px;color:var(--text-2);text-align:center;margin:6px 0 2px}
.bk-err{font-size:13px;color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent);
border-radius:10px;padding:9px 12px;margin:8px 0}
#backupBody .btn{width:100%;margin-top:8px}
#backupBody .field{margin-top:12px}
.set-item.bk-update i{background:linear-gradient(150deg,#3ddc84,#00a884)}
.rs-ico{font-size:44px;text-align:center;margin:4px 0 2px}
.rs-body{font-size:14.5px;line-height:1.55;text-align:center;margin:0 0 10px}
#mRestore .btn{width:100%}
#gcView{position:fixed;inset:0;z-index:88;display:flex;flex-direction:column;color:#fff;
background:linear-gradient(160deg,#0d2b25,#075e54 55%,#0b141a);
opacity:0;visibility:hidden;transform:translate3d(0,100%,0);
transition:opacity .2s var(--ease),transform .22s var(--ease),visibility .22s}
#gcView.on{opacity:1;visibility:visible;transform:none}
#gcView.video{background:#05090b}
.gc-head{position:absolute;z-index:3;top:calc(10px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);
display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 14px;border-radius:999px;
background:#0000004d;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);max-width:calc(100% - 24px);text-align:center;transition:opacity .35s}
.gc-head b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70vw}
.gc-head span{font-size:12px;color:#d7fff4;font-variant-numeric:tabular-nums}
.gc-grid{flex:1;display:grid;gap:6px;padding:calc(64px + env(safe-area-inset-top)) 6px calc(116px + env(safe-area-inset-bottom));min-height:0;
grid-template-columns:1fr;grid-auto-rows:1fr}
.gc-grid[data-n="2"]{grid-template-rows:1fr 1fr}
.gc-grid[data-n="3"],.gc-grid[data-n="4"]{grid-template-columns:1fr 1fr}
.gc-grid[data-n="5"],.gc-grid[data-n="6"]{grid-template-columns:1fr 1fr}
.gc-grid[data-n="7"],.gc-grid[data-n="8"]{grid-template-columns:1fr 1fr}
.gc-grid[data-n="3"] .gc-tile:first-child{grid-column:span 2}
.gc-grid[data-n="5"] .gc-tile:first-child,.gc-grid[data-n="7"] .gc-tile:first-child{grid-column:span 2}
@media (min-width:760px){
.gc-grid[data-n="2"]{grid-template-rows:none;grid-template-columns:1fr 1fr}
.gc-grid[data-n="5"],.gc-grid[data-n="6"]{grid-template-columns:repeat(3,1fr)}
.gc-grid[data-n="7"],.gc-grid[data-n="8"]{grid-template-columns:repeat(4,1fr)}
.gc-grid[data-n="5"] .gc-tile:first-child,.gc-grid[data-n="7"] .gc-tile:first-child{grid-column:auto}
}
.gc-tile{position:relative;border-radius:16px;overflow:hidden;background:#ffffff14;min-height:0;display:grid;place-items:center}
.gc-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s}
.gc-tile.has-video video{opacity:1}
.gc-tile.me.mirror video{transform:scaleX(-1)}
.gc-av{width:min(96px,38%);aspect-ratio:1;border-radius:50%;background:#ffffff26;display:grid;place-items:center;font-size:clamp(26px,7vw,46px);overflow:hidden}
.gc-av img{width:100%;height:100%;object-fit:cover}
.gc-tile.has-video .gc-av{display:none}
.gc-tile.waiting .gc-av{animation:ripple 2s infinite}
.gc-name{position:absolute;left:8px;bottom:8px;display:flex;align-items:center;gap:5px;max-width:calc(100% - 16px);
font-size:12.5px;background:#00000066;padding:3px 9px;border-radius:999px;backdrop-filter:blur(6px)}
.gc-name span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-name em{font-style:normal;color:#ffd54a;font-size:11px;white-space:nowrap}
.gc-name em:empty{display:none}
.gc-mic{display:none}
.gc-tile.muted .gc-mic{display:inline;font-style:normal}
.gc-tile.muted .gc-mic::before{content:'🔇';font-size:11px}
.gc-actions{position:absolute;left:0;right:0;bottom:calc(18px + env(safe-area-inset-bottom));z-index:4;display:flex;justify-content:center;gap:14px;transition:opacity .35s}
.gc-actions button[hidden]{display:none}
.gc-actions button.off{opacity:.65}
#gcView.idle .gc-actions,#gcView.idle .gc-head{opacity:0;pointer-events:none}
.gc-join{display:flex;align-items:center;gap:10px;padding:8px 12px;background:linear-gradient(90deg,#00a88426,#00a8840d);
border-bottom:1px solid var(--line);font-size:13px}
.gc-join[hidden]{display:none}
.gc-join .gc-jt{flex:1;min-width:0;display:flex;flex-direction:column}
.gc-join .gc-jt small{color:var(--text-2);font-size:11.5px}
.gc-join .btn{padding:7px 16px;font-size:13px;width:auto;margin:0}
.gc-dot{width:10px;height:10px;border-radius:50%;background:#25d366;box-shadow:0 0 0 0 #25d36699;animation:gcPulse 1.6s infinite;flex:none}
@keyframes gcPulse{0%{box-shadow:0 0 0 0 #25d36699}70%{box-shadow:0 0 0 9px #25d36600}100%{box-shadow:0 0 0 0 #25d36600}}
.gc-join-mini{padding:5px 12px!important;font-size:12px!important;width:auto!important;margin:0!important}
#ringBanner.group .av{border-radius:14px}
#callSheet.group #csHistSub{display:none}
.gone-bar{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;color:var(--text-2);font-size:13px;
background:var(--panel);border-top:1px solid var(--line);text-align:center}
.gone-bar[hidden]{display:none}
.gone-bar.team-bar{color:var(--text);font-weight:600;gap:6px}
.app-item{text-decoration:none;color:inherit}
.app-item[hidden]{display:none}
.app-item.has-update em{color:#fff;background:var(--accent,#00a884);padding:2px 9px;border-radius:999px;font-style:normal}
.app-item.has-update i{animation:gcPulse 1.6s infinite;border-radius:50%}
.danger-zone{margin-top:26px;padding-top:6px;border-top:1px solid var(--line)}
.danger-zone .btn{width:100%}
.da-body{display:flex;flex-direction:column;gap:10px}
.da-ico{font-size:40px;text-align:center}
.da-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:5px;font-size:13.5px;color:var(--text-2)}
.da-sure{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.45;cursor:pointer}
.da-sure input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--danger)}
.da-err{color:var(--danger);font-size:13px;min-height:18px}
.btn.danger{background:var(--danger);color:#fff}
.btn.danger:disabled{opacity:.45}
.btn.busy{opacity:.6;pointer-events:none}
.rt-file{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;font-size:12.5px;color:var(--text-2)}
.rt-file #rtFileName{flex:1;min-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rt-file .btn{width:auto;margin:0}
.rt-file .btn[hidden]{display:none}
.upd-bar{position:fixed;z-index:89;top:calc(env(safe-area-inset-top,0px) + 70px);left:50%;transform:translateX(-50%);
width:min(440px,calc(100% - 20px));display:flex;align-items:center;gap:10px;padding:9px 8px 9px 12px;border-radius:16px;
background:var(--panel);color:var(--text);box-shadow:0 10px 30px rgba(0,0,0,.35);border:1px solid var(--line);
animation:updIn .35s var(--ease)}
.upd-bar[hidden]{display:none}
.upd-bar .ub-ic{font-size:22px}
.upd-bar .ub-mid{flex:1;min-width:0;display:flex;flex-direction:column}
.upd-bar .ub-mid b{font-size:13.5px}
.upd-bar .ub-mid small{font-size:11.5px;color:var(--text-2)}
.upd-bar .ub-go{width:auto;margin:0;padding:7px 14px;font-size:13px}
@keyframes updIn{from{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%,0)}}
.gc-actions{margin:0}
.share-item i{background:linear-gradient(135deg,#00a884,#128c7e);border-radius:10px}
.share-modal .body{display:flex;flex-direction:column;gap:14px}
.sh-hero{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;
background:linear-gradient(135deg,#00a88433,#075e5426);border:1px solid var(--line)}
.sh-logo{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:28px;flex:none;
background:linear-gradient(135deg,#25d366,#00a884 55%,#075e54);box-shadow:0 6px 18px #00a88455}
.sh-hero b{font-size:18px;display:block}
.sh-hero small{color:var(--text-2);font-size:12.5px;line-height:1.35}
.sh-lead{margin:0;font-size:13.5px;color:var(--text-2);line-height:1.5}
.sh-qr-wrap{display:flex;flex-direction:column;align-items:center;gap:6px}
.sh-qr{background:#fff;padding:10px;border-radius:14px;width:172px;height:172px;display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.sh-qr svg{width:100%;height:100%;display:block}
.sh-qr-wrap small{color:var(--text-2);font-size:12px}
.sh-link{display:flex;gap:8px;align-items:center}
.sh-link input{flex:1;min-width:0;padding:11px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel-2);
color:var(--text);font-size:12.5px;font-family:ui-monospace,Menlo,monospace}
.sh-link .btn{width:auto;margin:0;padding:10px 16px;font-size:13.5px;white-space:nowrap}
.sh-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 6px}
.sh-grid button{background:none;border:0;color:var(--text);display:flex;flex-direction:column;align-items:center;gap:6px;
font-size:11.5px;cursor:pointer;padding:4px 0;border-radius:12px}
.sh-grid button i{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:22px;
color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.25);transition:transform .15s var(--ease)}
.sh-grid button i svg{width:26px;height:26px}
.sh-grid button:active i{transform:scale(.9)}
.sh-grid button:focus-visible i{outline:3px solid var(--accent);outline-offset:2px}
.sh-grid button span{text-align:center;line-height:1.2}
.invite-banner{display:flex;gap:10px;align-items:center;padding:11px 13px;border-radius:14px;margin-bottom:6px;
background:linear-gradient(135deg,#00a88433,#075e5422);border:1px solid #00a88466;animation:invIn .35s var(--ease)}
@keyframes invIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.invite-banner[hidden]{display:none}
.invite-banner>span{font-size:24px}
.invite-banner b{display:block;font-size:14px}
.invite-banner small{color:var(--text-2);font-size:12px}
.find-invite{margin:14px auto 0;width:auto!important;padding:10px 18px!important}
#fabGame{display:none!important}
.bub video.photo.vid{width:280px;max-width:100%;max-height:360px;border-radius:7px;display:block;margin-bottom:3px;background:#000}
.bv{width:280px;max-width:100%;margin-bottom:3px}
.bv-pic{position:relative;border-radius:9px;overflow:hidden;background:#0d1418;max-height:380px;cursor:pointer}
.bv-pic img{width:100%;height:100%;object-fit:cover;display:block}
.bv-pic.nothumb{background:linear-gradient(135deg,#1d2b33,#0b141a)}
.bv-film{position:absolute;inset:0;display:grid;place-items:center;font-size:42px;font-style:normal;opacity:.55}
.bv-pic video{width:100%;height:100%;display:block;background:#000;object-fit:contain}
.bv-pic.playing{cursor:default}
.bv-ov{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.45))}
.bv-play,.bv-dl,.bv-prog{border:0;cursor:pointer;color:#fff;background:rgba(11,20,26,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
border-radius:999px;display:flex;align-items:center;justify-content:center;gap:7px;box-shadow:0 4px 18px rgba(0,0,0,.35);transition:transform .15s var(--ease)}
.bv-play{width:58px;height:58px;padding-left:4px}
.bv-play:active,.bv-dl:active,.bv-prog:active{transform:scale(.93)}
.bv-dl{height:46px;padding:0 16px 0 13px;font:inherit;font-size:13.5px}
.bv-dl b{font-weight:700}
.bv-dl.wait{width:46px;padding:0}
.bv-prog{width:54px;height:54px;position:relative;padding:0}
.bv-prog span{position:absolute;font-size:15px;font-weight:700}
.bv-ring{width:46px;height:46px;transform:rotate(-90deg)}
.bv-ring circle{fill:none;stroke-width:3.4}
.bv-ring .tr{stroke:rgba(255,255,255,.22)}
.bv-ring .pr{stroke:#25d366;stroke-linecap:round;transition:stroke-dashoffset .25s linear}
.bv-spin{width:20px;height:20px;border-radius:50%;border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;animation:bvspin .9s linear infinite}
@keyframes bvspin{to{transform:rotate(360deg)}}
.bv-ic{font-size:34px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.bv-tag{position:absolute;bottom:7px;font-size:11.5px;font-weight:600;color:#fff;background:rgba(0,0,0,.5);padding:2px 7px;border-radius:9px;pointer-events:none}
.bv-tag.l{left:7px}.bv-tag.r{right:7px}
.bv-pic.playing .bv-tag{display:none}
.bv-st{font-size:12.3px;color:var(--text-2);padding:6px 2px 1px;line-height:1.4}
.bv-st.have{color:var(--accent)}
.bv-st.gone,.bv-st.space,.bv-st.err{color:var(--danger)}
.bv-link{border:0;background:none;color:var(--accent);font:inherit;font-weight:700;padding:0 2px;cursor:pointer;text-decoration:underline}
.msg.out .bv-st{color:color-mix(in srgb,var(--text) 72%,transparent)}
.bvw-body{text-align:center;padding:22px 20px 26px}
.bvw-art{font-size:40px;display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:14px}
.bvw-art span{font-size:26px;animation:bvhop 1.6s var(--ease) infinite}
@keyframes bvhop{0%{transform:translateX(-26px);opacity:0}25%,75%{opacity:1}100%{transform:translateX(26px);opacity:0}}
.bvw-body p{line-height:1.55;color:var(--text-2);margin:0 0 18px}
.bvw-body .btn{display:inline-block;text-decoration:none;min-width:200px}
.vn{display:flex;align-items:center;gap:9px;width:260px;max-width:100%;padding:3px 0 1px;--p:0%}
.vn-btn{width:40px;height:40px;flex:none;border-radius:50%;border:0;cursor:pointer;background:var(--accent);color:#fff;display:grid;place-items:center;
box-shadow:0 2px 8px rgba(0,0,0,.22);transition:transform .15s var(--ease)}
.vn-btn:active{transform:scale(.92)}
.vn-btn .pa{display:none}.vn.playing .vn-btn .pa{display:inline}.vn.playing .vn-btn .pl{display:none}
.vn-wave{position:relative;flex:1;height:30px;cursor:pointer}
.vn-b{position:absolute;inset:0;display:flex;align-items:center;gap:2px}
.vn-b i{flex:1;min-width:2px;border-radius:2px;background:color-mix(in srgb,var(--text) 32%,transparent)}
.vn-b.on{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.vn-b.on i{background:var(--accent)}
.msg.out .vn-b.on i{background:#53bdeb}
.vn-side{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:38px}
.vn-t{font-size:11.5px;color:var(--text-2);font-variant-numeric:tabular-nums}
.vn-sp{border:0;background:color-mix(in srgb,var(--text) 14%,transparent);color:var(--text);font:inherit;font-size:10.5px;font-weight:700;
border-radius:9px;padding:1px 6px;cursor:pointer}
.vn audio{display:none}
.rec-bar{position:absolute;inset:0;display:flex;align-items:center;gap:10px;padding:0 14px;background:var(--panel-2);z-index:3;animation:recIn .18s var(--ease)}
.rec-bar[hidden]{display:none}
@keyframes recIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.rec-x{color:var(--danger)}
.rec-dot{width:11px;height:11px;border-radius:50%;background:var(--danger);animation:pulse 1.1s infinite;flex:none}
#recTime{font-variant-numeric:tabular-nums;font-size:15px;min-width:42px}
.rec-wave{flex:1;height:30px;display:flex;align-items:center;justify-content:flex-end;gap:2px;overflow:hidden}
.rec-wave i{width:3px;flex:none;border-radius:2px;background:var(--accent);transition:height .08s linear}
#recSend{background:var(--accent)}
.srv-body{padding:16px 18px 22px}
.srv-hero{display:flex;align-items:center;gap:13px;background:var(--panel-2);border-radius:14px;padding:14px 16px;margin-bottom:10px}
.srv-hero b{display:block;font-size:17px}
.srv-hero small{color:var(--text-2);font-size:12.5px}
.srv-dot{width:13px;height:13px;border-radius:50%;background:#25d366;box-shadow:0 0 0 0 rgba(37,211,102,.6);animation:srvPulse 2s infinite;flex:none}
@keyframes srvPulse{70%{box-shadow:0 0 0 10px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.srv-row{font-size:13.5px;padding:9px 4px;border-bottom:1px solid var(--line);line-height:1.45}
.srv-row.warn{color:var(--gold)}
.srv-row .ok{color:#25d366}.srv-row .bad{color:var(--danger)}
.srv-body h4{margin:16px 2px 6px;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-2)}
.srv-list{list-style:none;margin:0;padding:0}
.srv-list li{padding:9px 10px;border-radius:10px;margin-bottom:5px;background:var(--panel-2);border-left:3px solid var(--line)}
.srv-list li .t{font-size:14px;font-weight:600}
.srv-list li .m{font-size:12px;color:var(--text-2);margin-top:2px}
.srv-list li.r-sleep{border-left-color:var(--gold)}
.srv-list li.r-deploy{border-left-color:var(--accent)}
.srv-list li.r-killed,.srv-list li.r-error{border-left-color:var(--danger)}
.srv-note{font-size:12.5px;color:var(--text-2);line-height:1.55;margin:14px 2px 0}
.srv-mut{color:var(--text-2)}
.srv-err{color:var(--danger)}
.feed-wait .h{display:flex;align-items:center;justify-content:center;gap:9px}
.spin-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--text-2);border-top-color:var(--accent,#00a884);animation:spinDot .8s linear infinite;flex:none}
@keyframes spinDot{to{transform:rotate(360deg)}}
.bk-feed-note{margin:8px 2px 4px;font-size:12.5px}
.dl-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:min(240px,62vw);aspect-ratio:4/3;
border:0;border-radius:10px;cursor:pointer;color:var(--text);font:inherit;
background:repeating-linear-gradient(135deg,var(--panel-3) 0 12px,transparent 12px 24px),var(--panel-2)}
.dl-ph.post-media{width:100%;aspect-ratio:16/9;border-radius:0}
.dl-ph .dl-ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#0009;color:#fff;margin-bottom:2px;transition:transform .15s}
.dl-ph:hover .dl-ic{transform:scale(1.08)}
.dl-ph b{font-size:13.5px}
.dl-ph small{font-size:11.5px;color:var(--text-2)}
.adm-body{display:flex;flex-direction:column;gap:10px;min-height:min(70vh,560px)}
.adm-search input{width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:22px;padding:11px 16px;color:var(--text);font:inherit;outline:none}
.adm-search input:focus{border-color:var(--accent)}
.adm-count{font-size:12.5px;color:var(--text-2);padding:0 4px}
.adm-list{display:flex;flex-direction:column}
.adm-row{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line)}
.adm-row .av{width:42px;height:42px;font-size:20px;flex:none}
.adm-row .mid{flex:1;min-width:0}
.adm-row .mid b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-row .mid small{display:block;font-size:12px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-row .tag{font-size:11.5px;padding:4px 9px;border-radius:12px;background:var(--panel-3);color:var(--text-2)}
.adm-row .rm{border:0;border-radius:18px;padding:8px 14px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;
background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--danger)}
.adm-row .rm:hover{background:var(--danger);color:#fff}
.adm-row.gone{opacity:.45;pointer-events:none}
.adm-row .on-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:5px;vertical-align:1px}
.adm-who{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;background:var(--panel-2)}
.adm-who .av{width:48px;height:48px;font-size:24px}
.adm-who b{display:block}.adm-who small{color:var(--text-2)}
.side-head .net-st{display:flex;align-items:center;gap:6px;color:var(--accent)}
.side-head .net-st[hidden]{display:none}
.net-spin{width:10px;height:10px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;
display:inline-block;flex:none;animation:netspin .9s linear infinite}
@keyframes netspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.net-spin{animation:none;border-right-color:currentColor;opacity:.6}}
#cSub.net{color:var(--accent)}
button.pick.add-mem{width:100%;border:0;background:none;color:inherit;font:inherit;text-align:left;margin:2px 0 4px}
button.pick.add-mem b{color:var(--accent)}
#amGo:disabled{opacity:.5;cursor:default}
.lan-tag { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 8px; font-size: 11px; line-height: 17px;
background: rgba(0,168,132,.16); color: var(--accent, #00a884); vertical-align: 1px; }
#cSub.lan { color: var(--accent, #00a884); }
.lan-now { display: block; margin-top: 4px; color: var(--accent, #00a884) !important; }
.lan-now:empty { display: none; }
.bv-wifi { color: var(--accent, #00a884); font-weight: 600; white-space: nowrap; }
#bootSplash{display:none}
html.has-session #auth{display:none!important}
html.has-session:not(.booted) #bootSplash{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:14px;color:#e9edef;
background:radial-gradient(120% 70% at 50% 38%,#12322f 0%,#0b141a 62%)}
#bootSplash .bs-logo{width:84px;height:84px;border-radius:26px;display:grid;place-items:center;font-size:44px;
background:linear-gradient(135deg,#25d366,#00a884 55%,#075e54);box-shadow:0 14px 40px #00a88455,0 0 0 1px #ffffff1f inset;
animation:bsIn .5s cubic-bezier(.2,.8,.2,1) both}
#bootSplash .bs-name{font-size:22px;font-weight:600;letter-spacing:.3px;animation:bsIn .5s .08s cubic-bezier(.2,.8,.2,1) both}
#bootSplash .bs-dots{display:flex;gap:6px;margin-top:6px}
#bootSplash .bs-dots span{width:7px;height:7px;border-radius:50%;background:#00a884;animation:bsDot 1.1s infinite ease-in-out}
#bootSplash .bs-dots span:nth-child(2){animation-delay:.15s}
#bootSplash .bs-dots span:nth-child(3){animation-delay:.3s}
#bootSplash .bs-note{font-size:12.5px;color:#8696a0;opacity:0;animation:bsNote .4s 6s forwards}
@keyframes bsIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@keyframes bsDot{0%,80%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
@keyframes bsNote{to{opacity:1}}
#callView,#gcView{
background:
radial-gradient(90% 55% at 50% 34%,rgba(108,214,196,.22) 0%,rgba(108,214,196,0) 62%),
radial-gradient(140% 90% at 50% 30%,#245e5c 0%,#163f42 46%,#0b1d22 100%)}
#callView{gap:0;justify-content:flex-start;padding:calc(10vh + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom))}
#callView .call-body{gap:0}
#callView .c-rings{position:relative;width:min(320px,82vw);aspect-ratio:1;display:grid;place-items:center;margin-bottom:6px}
#callView .c-rings>i{position:absolute;inset:0;margin:auto;border-radius:50%;pointer-events:none;
border:1.5px solid rgba(255,255,255,.16);
box-shadow:0 0 22px rgba(140,240,222,.10) inset,0 0 18px rgba(140,240,222,.06);
animation:cRing 2.6s cubic-bezier(.25,.6,.3,1) infinite}
#callView .c-rings>i:nth-child(1){width:52%;height:52%;border-color:rgba(200,255,245,.55);animation-delay:0s}
#callView .c-rings>i:nth-child(2){width:63%;height:63%;border-color:rgba(200,255,245,.42);animation-delay:.25s}
#callView .c-rings>i:nth-child(3){width:75%;height:75%;border-color:rgba(200,255,245,.28);animation-delay:.5s}
#callView .c-rings>i:nth-child(4){width:87%;height:87%;border-color:rgba(200,255,245,.17);animation-delay:.75s}
#callView .c-rings>i:nth-child(5){width:100%;height:100%;border-color:rgba(200,255,245,.08);
background:radial-gradient(circle,rgba(255,255,255,.035),rgba(255,255,255,0) 70%);animation-delay:1s}
@keyframes cRing{0%{transform:scale(.94);opacity:.35}35%{opacity:1}100%{transform:scale(1.04);opacity:.55}}
#callView.live .c-rings>i{animation:cBreathe 5s ease-in-out infinite}
@keyframes cBreathe{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.015);opacity:1}}
#callView .cav{position:relative;width:42%;height:42%;font-size:clamp(54px,15vw,76px);animation:none;
background:radial-gradient(circle at 50% 40%,#b5f1e6 0%,#6fcabd 55%,#3e9c93 100%);
box-shadow:0 0 0 6px rgba(255,255,255,.08),0 0 40px rgba(126,231,213,.45),0 18px 40px rgba(0,0,0,.35);overflow:hidden}
#callView .cav img{width:100%;height:100%;object-fit:cover}
#callView h2{font-size:clamp(24px,7vw,31px);font-weight:600;letter-spacing:.2px;margin:0 0 8px;text-align:center;
text-shadow:0 2px 14px rgba(0,0,0,.35)}
#callView .cst{font-size:17px;color:#ffffffcc;font-variant-numeric:tabular-nums;margin-bottom:22px}
#callView .cnet{background:none;padding:0;font-size:13.5px;color:#ffffffa8;backdrop-filter:none;-webkit-backdrop-filter:none}
#callView .cnet .dot{width:6px;height:6px}
.call-dock{position:relative;display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-start;
gap:6px;padding:10px 12px 0;margin-top:34px}
.call-dock::before{content:'';position:absolute;left:0;right:0;top:0;height:76px;border-radius:999px;z-index:-1;
background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 44px rgba(0,0,0,.38),0 1px 0 rgba(255,255,255,.18) inset}
#callView .call-actions,#gcView .call-actions{z-index:4;isolation:isolate}
.call-dock button{width:64px;gap:14px}
.call-dock button .ci,
.call-dock button:hover .ci,
.call-dock button:active .ci{width:56px;height:56px;border-radius:50%;font-size:22px;color:#fff;transform:none;
background:rgba(255,255,255,.10);background-image:none;box-shadow:none;border:1px solid rgba(255,255,255,.08)}
.call-dock button:hover .ci{background:rgba(255,255,255,.18)}
.call-dock button:active .ci{transform:scale(.92);background:rgba(255,255,255,.22)}
.call-dock button .ci svg{width:25px;height:25px;display:block}
.call-dock button .cl{font-size:12px;color:#ffffffd0;text-shadow:0 1px 6px rgba(0,0,0,.45)}
.call-dock button.act .ci,.call-dock button.act:hover .ci{background:#fff;color:#0f3d3c;box-shadow:0 0 0 4px rgba(255,255,255,.12)}
.call-dock button.hang .ci,
.call-dock button.hang:hover .ci,
.call-dock button.hang:active .ci{transform:none;background:linear-gradient(180deg,#ff5468,#e0223b);border-color:rgba(255,255,255,.18);
box-shadow:0 8px 22px rgba(232,40,64,.45),0 1px 0 rgba(255,255,255,.3) inset}
.call-dock button.hang:active .ci{transform:scale(.92)}
.call-dock button.hang .ci svg{width:28px;height:28px}
#gcView .call-dock button.off .ci{background:#fff;color:#0f3d3c}
#callView.video{background:#000}
#callView.video .call-dock{position:absolute;left:50%;right:auto;transform:translateX(-50%);margin:0;
bottom:calc(22px + env(safe-area-inset-bottom))}
#callView.video .call-dock::before{background:linear-gradient(180deg,rgba(20,20,20,.42),rgba(20,20,20,.30));border-color:rgba(255,255,255,.12)}
#callView.video::after{height:150px;background:linear-gradient(to top,rgba(0,0,0,.45),transparent)}
#callView.video:not(.remote-video){padding-top:calc(8vh + env(safe-area-inset-top))}
#callView.video:not(.remote-video) .c-rings{width:min(220px,60vw)}
#callView.remote-video .c-rings{display:none}
#callView.remote-video{padding:0}
#callView.remote-video .call-body{gap:8px}
#callView.remote-video #callName{margin:0}
#callView.remote-video .cst{margin:0}
#gcView.video{background:#05090b}
#gcView .gc-actions.call-dock{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(22px + env(safe-area-inset-bottom));margin:0}
.gc-head{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.12);
backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%)}
#ringBanner{border-radius:24px;padding:12px 14px 12px 12px;gap:12px;color:#fff;
background:linear-gradient(180deg,rgba(38,92,90,.62),rgba(14,40,44,.62));
backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);
border:1px solid rgba(255,255,255,.16);box-shadow:0 20px 50px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.2) inset}
#ringBanner span{color:#ffffffb8}
#ringBanner .rb-av{position:relative;width:52px;height:52px;flex:none;display:grid;place-items:center}
#ringBanner .rb-av>i{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(200,255,245,.55);animation:rbRing 1.8s ease-out infinite}
#ringBanner .rb-av>i:nth-child(2){animation-delay:.9s}
@keyframes rbRing{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.55);opacity:0}}
#ringBanner .rb-av .av{position:relative;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:26px;overflow:hidden;
background:radial-gradient(circle at 50% 40%,#b5f1e6,#5fb9ad);box-shadow:0 0 18px rgba(126,231,213,.45)}
#ringBanner.group .rb-av .av{border-radius:14px}
#ringBanner button,#ringBanner button:active{width:48px;height:48px;background-image:none;border:1px solid rgba(255,255,255,.18)}
#ringBanner button svg{width:24px;height:24px}
#ringBanner .no{background:linear-gradient(180deg,#ff5468,#e0223b);box-shadow:0 8px 20px rgba(232,40,64,.45)}
#ringBanner .yes{background:linear-gradient(180deg,#2fe08f,#10b06a);box-shadow:0 8px 20px rgba(24,190,110,.45)}
#ringBanner .no svg{width:27px;height:27px}
@media (prefers-reduced-motion:reduce){
#callView .c-rings>i,#ringBanner .rb-av>i{animation:none}
}
.upd-bar{position:relative;top:auto;left:auto;transform:none;z-index:2;width:auto;margin:8px 12px 2px;
padding:11px 10px 11px 14px;border-radius:20px;gap:12px;color:#fff;animation:updIn2 .45s var(--ease);
background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.05));
backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
border:1px solid rgba(255,255,255,.14);box-shadow:0 14px 34px rgba(0,0,0,.30),0 1px 0 rgba(255,255,255,.16) inset}
.upd-bar .ub-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;font-size:0;
background:linear-gradient(135deg,#25d366,#00a884 60%,#075e54);box-shadow:0 6px 16px #00a88455}
.upd-bar .ub-ic::before{content:'';width:18px;height:18px;background:#fff;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5.5 11.5 12 5l6.5 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5.5 11.5 12 5l6.5 6.5'/%3E%3C/svg%3E") center/contain no-repeat}
.upd-bar .ub-mid b{font-size:14px;font-weight:600}
.upd-bar .ub-mid small{font-size:12px;color:#ffffffa8}
.upd-bar .ub-go{border-radius:999px;padding:8px 16px;font-weight:600;
background:linear-gradient(180deg,#25d07f,#00a884);box-shadow:0 6px 16px #00a88450,0 1px 0 rgba(255,255,255,.3) inset}
.upd-bar .ub-x{width:32px;height:32px;min-width:32px;border-radius:50%;font-size:13px;color:#ffffffb0;
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);box-shadow:none;background-image:none}
[data-mode="light"] .upd-bar{color:var(--text);background:linear-gradient(135deg,rgba(255,255,255,.85),rgba(255,255,255,.6));
border-color:rgba(0,0,0,.06);box-shadow:0 12px 30px rgba(0,0,0,.12)}
[data-mode="light"] .upd-bar .ub-mid small{color:var(--text-2)}
[data-mode="light"] .upd-bar .ub-x{color:var(--text-2);background:rgba(0,0,0,.05)}
@keyframes updIn2{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
#gcView .gc-grid{padding-bottom:calc(142px + env(safe-area-inset-bottom))}
#gcView .gc-tile{border-radius:22px}
html.lockcall body>:not(#callView):not(#gcView):not(.toast),html.lockcall body>:not(#callView):not(#gcView):not(.toast) *{visibility:hidden!important}
html.lockcall #callAdd,html.lockcall #callShare{display:none!important}
.lb-scope{display:flex;width:100%;gap:4px;padding:3px;margin-bottom:8px;border-radius:12px;background:var(--bg-3,rgba(127,127,127,.12))}
.lb-scope button{flex:1;border:0;border-radius:9px;padding:9px;font-family:inherit;font-size:14px;font-weight:600;color:var(--text-2);background:none;cursor:pointer}
.lb-scope button.on{background:var(--accent,#00a884);color:#fff}.lb-gap{text-align:center;color:var(--text-2);padding:2px}
.agree{display:block;margin:0;font-size:12.5px;line-height:1.5;color:var(--text-2);text-align:center}.agree a{color:var(--accent);font-weight:600}
.auth-links{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;margin-top:2px}.auth-links a{color:var(--text-2);text-decoration:none}.auth-links a:hover{color:var(--accent);text-decoration:underline}
.auth-forgot{align-self:flex-end;margin:-4px 2px 4px;padding:4px 2px;color:var(--accent);font-size:13.5px;font-weight:600}
.auth-forgot[hidden]{display:none}
.vb{display:inline-block;width:16px;height:16px;margin-left:4px;vertical-align:-3px;font-style:normal;flex:none;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%231877F2' d='M23.0 12.0L22.8 12.9L22.2 13.8L21.4 14.5L20.8 15.2L20.5 16.0L20.5 16.9L20.5 17.9L20.3 19.0L19.8 19.8L19.0 20.3L17.9 20.5L16.9 20.5L16.0 20.5L15.2 20.8L14.5 21.4L13.8 22.2L12.9 22.8L12.0 23.0L11.1 22.8L10.2 22.2L9.5 21.4L8.8 20.8L8.0 20.5L7.1 20.5L6.1 20.5L5.0 20.3L4.2 19.8L3.7 19.0L3.5 17.9L3.5 16.9L3.5 16.0L3.2 15.2L2.6 14.5L1.8 13.8L1.2 12.9L1.0 12.0L1.2 11.1L1.8 10.2L2.6 9.5L3.2 8.8L3.5 8.0L3.5 7.1L3.5 6.1L3.7 5.0L4.2 4.2L5.0 3.7L6.1 3.5L7.1 3.5L8.0 3.5L8.8 3.2L9.5 2.6L10.2 1.8L11.1 1.2L12.0 1.0L12.9 1.2L13.8 1.8L14.5 2.6L15.2 3.2L16.0 3.5L16.9 3.5L17.9 3.5L19.0 3.7L19.8 4.2L20.3 5.0L20.5 6.1L20.5 7.1L20.5 8.0L20.8 8.8L21.4 9.5L22.2 10.2L22.8 11.1Z'/><path fill='%23fff' d='M10.4 16.3L6.6 12.5l1.6-1.6 2.2 2.2 5.4-5.6 1.6 1.6z'/></svg>") center/contain no-repeat}
.vb.team{display:inline-grid;place-items:center;width:15px;height:15px;margin-left:5px;border-radius:50%;background:var(--accent);vertical-align:-2px}
.vb.team::after{content:"";width:7px;height:4px;border:solid #fff;border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg)}
[data-theme="graphite"]{
--bg:#121316; --panel:#121316; --panel-2:#1a1b20; --panel-3:#25262c; --field:#1d1e23;
--text:#ececef; --text-2:#9b9da6; --line:#212228; --on-accent:#0f1220; --accent:#8b9cff;
--bubble-in:#1f2026; --bubble-out:#2d3352; --bubble-out-solid:#2d3352; --out-text:#eef0ff; --out-border:transparent;
--meta-out:#aab3e6; --tick-read:#b4c0ff; --who:#c5ccff;
--head:rgba(26,27,32,.84); --hair:rgba(255,255,255,.07); --tab:rgba(22,23,27,.8);
--fab:#8b9cff; --fab-text:#10131f; --badge:#8b9cff; --badge-text:#10131f;
--chat-bg:radial-gradient(120% 60% at 100% 0%,#1b1d24 0%,transparent 60%),#121316;
--shadow:0 10px 30px rgba(0,0,0,.5);
}
[data-theme="gold"]{
--bg:#070b16; --panel:#080d19; --panel-2:#0f1626; --panel-3:#18223a; --field:#111a2d;
--text:#f3efe6; --text-2:#8f97a9; --line:#141d31; --on-accent:#1a1406; --accent:#d4af6a;
--bubble-in:#111a2d; --bubble-out:linear-gradient(160deg,#1f2d4f,#17233f); --bubble-out-solid:#18243f; --out-text:#f6f1e6; --out-border:rgba(212,175,106,.42);
--meta-out:#c9b48a; --tick-read:#f0d08f; --who:#e3c27f;
--head:rgba(10,16,32,.86); --hair:rgba(212,175,106,.3); --tab:rgba(9,14,28,.82);
--fab:linear-gradient(135deg,#e9cd8f,#c79a4e); --fab-text:#1a1406; --badge:linear-gradient(135deg,#e9cd8f,#c79a4e); --badge-text:#1a1406;
--chat-bg:radial-gradient(100% 55% at 85% 0%,#14203d 0%,transparent 62%),radial-gradient(80% 50% at 0% 100%,#0e1830 0%,transparent 60%),#070b16;
--shadow:0 10px 30px rgba(0,0,0,.55);
}
[data-theme="emerald"]{
--bg:#0a1713; --panel:#0b1915; --panel-2:#10221c; --panel-3:#173128; --field:#12261f;
--text:#f2eadb; --text-2:#9db1a6; --line:#132a22; --on-accent:#1b1006; --accent:#c8925a;
--bubble-in:#12261f; --bubble-out:#1c4335; --bubble-out-solid:#1c4335; --out-text:#f4eddf; --out-border:rgba(200,146,90,.28);
--meta-out:#b9c9b7; --tick-read:#f0c08a; --who:#e0b07c;
--head:rgba(12,32,25,.86); --hair:rgba(200,146,90,.28); --tab:rgba(10,26,20,.82);
--fab:#c8925a; --fab-text:#1b1006; --badge:#c8925a; --badge-text:#1b1006;
--chat-bg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' fill='none' stroke='%23d9a066' stroke-opacity='.11' stroke-width='1.6' stroke-linecap='round'%3E %3Cpath d='M40 40m-4 0a4 4 0 1 1 8 0a8 8 0 1 1-16 0a12 12 0 1 1 24 0a16 16 0 1 1-32 0'/%3E%3Cpath d='M100 20l10 14 10-14 10 14 10-14 10 14'/%3E %3Ccircle cx='135' cy='110' r='16' stroke-dasharray='2 5'/%3E%3Ccircle cx='135' cy='110' r='5'/%3E%3Cpath d='M20 130c12-14 24 14 36 0s24 14 36 0'/%3E %3Cpath d='M75 75c8 0 8 12 16 12s8-12 16-12'/%3E%3Ccircle cx='60' cy='165' r='1.6'/%3E%3Ccircle cx='70' cy='165' r='1.6'/%3E%3Ccircle cx='80' cy='165' r='1.6'/%3E%3C/svg%3E") 0 0/180px 180px,radial-gradient(100% 60% at 100% 0%,#123026 0%,transparent 60%),#0a1713;
--shadow:0 10px 30px rgba(0,0,0,.5);
}
[data-theme="onyx"]{
--bg:#000000; --panel:#000000; --panel-2:#0e0e10; --panel-3:#1a1a1d; --field:#141416;
--text:#ffffff; --text-2:#8e8e93; --line:#161618; --on-accent:#ffffff; --accent:#3d7bff;
--bubble-in:#17171a; --bubble-out:#3d7bff; --bubble-out-solid:#3d7bff; --out-text:#ffffff; --out-border:transparent;
--meta-out:rgba(255,255,255,.66); --tick-read:#b9f0ff; --who:#7fa7ff;
--head:rgba(0,0,0,.82); --hair:rgba(255,255,255,.09); --tab:rgba(10,10,12,.8);
--fab:#3d7bff; --fab-text:#ffffff; --badge:#3d7bff; --badge-text:#ffffff;
--chat-bg:#000000;
--shadow:0 10px 30px rgba(0,0,0,.7);
}
[data-theme="graphite"][data-mode="light"]{
--bg:#f4f5f7; --panel:#ffffff; --panel-2:#eef0f3; --panel-3:#e2e5ea; --field:#eceef2;
--text:#16171c; --text-2:#62666f; --line:#e4e6eb; --on-accent:#ffffff; --accent:#5566e8;
--bubble-in:#ffffff; --bubble-out:#e2e6ff; --bubble-out-solid:#e2e6ff; --out-text:#181d3a; --out-border:transparent;
--meta-out:#6670a8; --tick-read:#4458f0; --who:#4a58d8;
--head:rgba(255,255,255,.84); --hair:rgba(0,0,0,.08); --tab:rgba(255,255,255,.82);
--fab:#5566e8; --fab-text:#ffffff; --badge:#5566e8; --badge-text:#ffffff;
--chat-bg:radial-gradient(120% 60% at 100% 0%,#e9ebf3 0%,transparent 60%),#f1f2f5;
--shadow:0 10px 30px rgba(20,24,40,.12);
}
[data-theme="gold"][data-mode="light"]{
--bg:#f8f4ec; --panel:#fffdf8; --panel-2:#f2ecdf; --panel-3:#e8e0cd; --field:#f0e9da;
--text:#18203a; --text-2:#6c6f7b; --line:#ebe3d2; --on-accent:#ffffff; --accent:#a27b35;
--bubble-in:#ffffff; --bubble-out:linear-gradient(160deg,#22325a,#1a2747); --bubble-out-solid:#1d2a4b; --out-text:#f7f2e6; --out-border:rgba(212,175,106,.5);
--meta-out:#cdb88d; --tick-read:#f0d08f; --who:#93702e;
--head:rgba(255,252,245,.86); --hair:rgba(162,123,53,.3); --tab:rgba(255,252,245,.86);
--fab:linear-gradient(135deg,#e2c27e,#b98a3c); --fab-text:#1a1406; --badge:linear-gradient(135deg,#e2c27e,#b98a3c); --badge-text:#1a1406;
--chat-bg:radial-gradient(100% 55% at 85% 0%,#efe4cc 0%,transparent 62%),radial-gradient(80% 50% at 0% 100%,#f1ead9 0%,transparent 60%),#f7f2e7;
--shadow:0 10px 30px rgba(40,30,10,.12);
}
[data-theme="emerald"][data-mode="light"]{
--bg:#f4f1e7; --panel:#fbf9f2; --panel-2:#ede8d9; --panel-3:#e1dac6; --field:#ece6d6;
--text:#11251e; --text-2:#5b6b62; --line:#e3ddcc; --on-accent:#ffffff; --accent:#9a6a35;
--bubble-in:#ffffff; --bubble-out:#1f4a3a; --bubble-out-solid:#1f4a3a; --out-text:#f6efe1; --out-border:transparent;
--meta-out:#b9cbb8; --tick-read:#f0c08a; --who:#8a5a2b;
--head:rgba(251,249,242,.86); --hair:rgba(154,106,53,.24); --tab:rgba(251,249,242,.86);
--fab:#9a6a35; --fab-text:#ffffff; --badge:#1f4a3a; --badge-text:#f6efe1;
--chat-bg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' fill='none' stroke='%239a6a35' stroke-opacity='.14' stroke-width='1.6' stroke-linecap='round'%3E %3Cpath d='M40 40m-4 0a4 4 0 1 1 8 0a8 8 0 1 1-16 0a12 12 0 1 1 24 0a16 16 0 1 1-32 0'/%3E%3Cpath d='M100 20l10 14 10-14 10 14 10-14 10 14'/%3E %3Ccircle cx='135' cy='110' r='16' stroke-dasharray='2 5'/%3E%3Ccircle cx='135' cy='110' r='5'/%3E%3Cpath d='M20 130c12-14 24 14 36 0s24 14 36 0'/%3E %3Cpath d='M75 75c8 0 8 12 16 12s8-12 16-12'/%3E%3Ccircle cx='60' cy='165' r='1.6'/%3E%3Ccircle cx='70' cy='165' r='1.6'/%3E%3Ccircle cx='80' cy='165' r='1.6'/%3E%3C/svg%3E") 0 0/180px 180px,radial-gradient(100% 60% at 100% 0%,#e6efe6 0%,transparent 60%),#f2efe4;
--shadow:0 10px 30px rgba(20,40,30,.12);
}
[data-theme="onyx"][data-mode="light"]{
--bg:#ffffff; --panel:#ffffff; --panel-2:#f2f2f7; --panel-3:#e5e5ea; --field:#f0f0f4;
--text:#000000; --text-2:#6e6e73; --line:#ececf0; --on-accent:#ffffff; --accent:#2f6bff;
--bubble-in:#ececf0; --bubble-out:#2f6bff; --bubble-out-solid:#2f6bff; --out-text:#ffffff; --out-border:transparent;
--meta-out:rgba(255,255,255,.75); --tick-read:#d4f5ff; --who:#2f6bff;
--head:rgba(255,255,255,.86); --hair:rgba(0,0,0,.08); --tab:rgba(255,255,255,.86);
--fab:#2f6bff; --fab-text:#ffffff; --badge:#2f6bff; --badge-text:#ffffff;
--chat-bg:#ffffff;
--shadow:0 10px 30px rgba(0,0,0,.1);
}
[data-prem][data-mode="light"] .bub{box-shadow:0 1px 1.5px rgba(0,0,0,.08)}
[data-prem][data-mode="light"] .msg.out .bub{box-shadow:inset 0 0 0 1px var(--out-border),0 1px 1.5px rgba(0,0,0,.08)}
[data-prem][data-mode="light"] .fab{box-shadow:0 10px 22px -10px rgba(0,0,0,.35)!important}
[data-prem][data-mode="light"] .main[data-wp="photo"] .bg-img::after{background:rgba(255,255,255,.45)}
[data-prem]{--d-lip:transparent;--d-edge:transparent;--d-amb:transparent;--d-rise:none;--d-rise-sm:none;--d-press:none}
[data-prem] body{background:var(--bg)}
[data-prem] .btn{background-image:none;box-shadow:none}
[data-prem] .btn:hover{box-shadow:none;transform:none;filter:brightness(1.07)}
[data-prem] .btn:active{transform:scale(.98);box-shadow:none}
[data-prem] .icon-btn,[data-prem] .seg,[data-prem] .lang-toggle,[data-prem] .seg button.on,[data-prem] .lang-toggle button.on{box-shadow:none}
[data-prem] .sec-card{box-shadow:none;border:1px solid var(--line)}
[data-prem] .side-head,[data-prem] .chat-head,[data-prem] .fp-head{background:var(--head)!important;-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
border-bottom:1px solid var(--hair);box-shadow:none}
[data-prem] .side-head .icon-btn,[data-prem] .chat-head .icon-btn,[data-prem] .fp-head .icon-btn{background:transparent;color:var(--text)}
[data-prem] .chat-head .mid b,[data-prem] .side-head .nm{font-weight:700;letter-spacing:-.1px}
[data-prem] #meAv{box-shadow:0 0 0 2px var(--panel-2),0 0 0 3.5px var(--accent)}
[data-prem] .searchbar input{border-radius:12px;background:var(--field);box-shadow:none}
[data-prem] .chat-tabs button{border-radius:99px;background:var(--field);color:var(--text-2);box-shadow:none}
[data-prem] .chat-tabs button.on{background:var(--badge);color:var(--badge-text)}
[data-prem] .row{border-bottom:0;position:relative}
[data-prem] .row::after{content:"";position:absolute;left:74px;right:0;bottom:0;height:1px;background:var(--line);pointer-events:none}
[data-prem] .row .t b{font-weight:650}
[data-prem] .badge,[data-prem] .nav-badge{background-image:none;box-shadow:none}
[data-prem] .row .p .badge{background:var(--badge);color:var(--badge-text);font-weight:700}
[data-prem] .row .p .at-badge{background:var(--badge);color:var(--badge-text)}
[data-prem] .av{box-shadow:none;background-image:none}
[data-prem] .main{background:var(--chat-bg)}
[data-prem] .bub{box-shadow:0 1px 1.5px rgba(0,0,0,.3)}
[data-prem] .msg.out .bub{background:var(--bubble-out);color:var(--out-text);box-shadow:inset 0 0 0 1px var(--out-border),0 1px 1.5px rgba(0,0,0,.3)}
[data-prem] .msg.out .bub .meta,[data-prem] .msg.out .tick{color:var(--meta-out)}
[data-prem] .msg.out .tick.read{color:var(--tick-read)}
[data-prem] .bub .who{color:var(--who)}
[data-prem] .msg.out .poll .pfaces i{box-shadow:0 0 0 2px var(--bubble-out-solid)}
[data-prem] .daysep,[data-prem] .sysmsg{background:var(--field);color:var(--text-2);box-shadow:none}
[data-prem] .composer{background:var(--tab);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border-top:1px solid var(--hair);box-shadow:none}
[data-prem] .composer textarea{background:var(--field);border-radius:22px;box-shadow:none}
[data-prem] .composer .icon-btn,[data-prem] #btnMic{background:transparent!important;color:var(--text-2);box-shadow:none!important}
[data-prem] .send-btn{background:var(--fab);background-image:var(--fab);color:var(--fab-text);box-shadow:none!important}
[data-prem] #btnMic{background-image:none}
[data-prem] .bottom-nav.five{background:var(--tab)!important;border-color:var(--hair)}
[data-prem] .fab{border-radius:17px;background:var(--fab);background-image:var(--fab);color:var(--fab-text);box-shadow:0 10px 22px -8px rgba(0,0,0,.7)!important}
[data-prem] .fab:hover{transform:none}
[data-prem] .gh-card,[data-prem] .gs-g{box-shadow:none;border:1px solid var(--line)}
[data-prem] .toast{box-shadow:var(--shadow)}
[data-bc="square"] .bub{border-radius:3px}
[data-bc="square"] .msg.first.in .bub,[data-bc="square"] .msg.first.out .bub{border-radius:3px}
[data-bc="soft"] .bub{border-radius:20px;padding-left:13px;padding-right:13px}
[data-bc="soft"] .msg.in .bub{border-top-left-radius:7px;border-bottom-left-radius:7px}
[data-bc="soft"] .msg.out .bub{border-top-right-radius:7px;border-bottom-right-radius:7px}
[data-bc="soft"] .msg.in.first .bub{border-top-left-radius:20px}
[data-bc="soft"] .msg.out.first .bub{border-top-right-radius:20px}
[data-bc="soft"] .msg.in:not(:has(+ .msg.in:not(.first))) .bub{border-bottom-left-radius:20px}
[data-bc="soft"] .msg.out:not(:has(+ .msg.out:not(.first))) .bub{border-bottom-right-radius:20px}
[data-bc="tail"] .bub{border-radius:18px;padding-left:12px;padding-right:12px}
[data-bc="tail"] .msg.in:not(:has(+ .msg.in:not(.first))) .bub{border-bottom-left-radius:4px}
[data-bc="tail"] .msg.out:not(:has(+ .msg.out:not(.first))) .bub{border-bottom-right-radius:4px}
[data-bc="tail"] .msg.in:not(:has(+ .msg.in:not(.first))) .bub::before{content:"";position:absolute;left:-7px;bottom:0;width:9px;height:13px;pointer-events:none;
background:radial-gradient(circle at 0 0,transparent 8.5px,var(--bubble-in) 9px)}
[data-bc="tail"] .msg.out:not(:has(+ .msg.out:not(.first))) .bub::before{content:"";position:absolute;right:-7px;bottom:0;width:9px;height:13px;pointer-events:none;
background:radial-gradient(circle at 100% 0,transparent 8.5px,var(--bubble-out-solid,var(--bubble-out)) 9px)}
[data-bc="tail"] .bub{position:relative}
[data-bc="minimal"] .bub{border-radius:14px}
[data-bc="minimal"] .msg.in .bub{background:color-mix(in srgb,var(--bubble-in) 22%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 22%,transparent)}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-vietnamese-400-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/inter-vietnamese-700-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/inter-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/inter-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/manrope-vietnamese-400-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/manrope-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/manrope-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/manrope-vietnamese-700-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/manrope-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/manrope-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lora';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/lora-vietnamese-400-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Lora';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/lora-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Lora';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/lora-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lora';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/lora-vietnamese-700-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Lora';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/lora-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Lora';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/lora-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/nunito-vietnamese-400-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/nunito-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/nunito-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/nunito-vietnamese-700-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/nunito-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/nunito-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
[data-font="inter"]{--chat-font:'Inter',system-ui,sans-serif}
[data-font="manrope"]{--chat-font:'Manrope',system-ui,sans-serif}
[data-font="lora"]{--chat-font:'Lora',Georgia,serif}
[data-font="nunito"]{--chat-font:'Nunito',system-ui,sans-serif}
[data-font]:not([data-font="system"]) .bub,[data-font]:not([data-font="system"]) .composer textarea{font-family:var(--chat-font)}
[data-fontscope="app"][data-font]:not([data-font="system"]) body{font-family:var(--chat-font)}
.ff-system{font-family:system-ui,-apple-system,Roboto,sans-serif}.ff-inter{font-family:'Inter',sans-serif}.ff-manrope{font-family:'Manrope',sans-serif}
.ff-lora{font-family:'Lora',Georgia,serif}.ff-nunito{font-family:'Nunito',sans-serif}
.th-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 10px}
.th-cards button,.bs-cards button{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:0;border:0;background:none;color:var(--text-2);
font:inherit;font-size:12.5px;font-weight:600;line-height:1.25;text-align:center;cursor:pointer;transition:transform .15s var(--ease)}
.th-cards button:active,.bs-cards button:active{transform:scale(.95)}
.th-cards .thc-pv{position:relative;width:100%;aspect-ratio:4/5;border-radius:16px;overflow:hidden;border:2px solid var(--line);
display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:10px 9px;background:var(--pv-bg)}
.th-cards .thc-pv::before{content:"";position:absolute;left:0;right:0;top:0;height:18%;background:var(--pv-head);border-bottom:1px solid var(--pv-hair,transparent)}
.th-cards .thc-pv i{display:block;height:12px;border-radius:7px;background:var(--pv-in);width:58%}
.th-cards .thc-pv i+i{align-self:flex-end;width:62%;background:var(--pv-out);box-shadow:inset 0 0 0 1px var(--pv-outb,transparent)}
.th-cards button.on,.bs-cards button.on{color:var(--text)}
.th-cards button.on .thc-pv,.bs-cards button.on .bsc-pv{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)}
.th-cards button.on .thc-pv::after{content:"✓";position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;
display:grid;place-items:center;background:var(--accent);color:var(--on-accent);font-size:14px;font-weight:800}
.thc-plus{position:absolute;top:6px;right:6px;z-index:1;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-style:normal;
color:#1c1203;background:linear-gradient(135deg,#ffe08a,#e8b04b);box-shadow:0 1px 4px rgba(0,0,0,.3)}
.thc-dark,.thc-classic{--pv-bg:#0b141a;--pv-head:#202c33;--pv-in:#202c33;--pv-out:#005c4b}
.thc-light,[data-mode="light"] .thc-classic{--pv-bg:#eae6df;--pv-head:#f0f2f5;--pv-in:#ffffff;--pv-out:#d9fdd3}
.thc-graphite{--pv-bg:#121316;--pv-head:#1a1b20;--pv-hair:rgba(255,255,255,.08);--pv-in:#1f2026;--pv-out:#2d3352}
.thc-gold{--pv-bg:radial-gradient(100% 60% at 85% 0%,#14203d,transparent 62%),#070b16;--pv-head:#0d1427;--pv-hair:rgba(212,175,106,.45);--pv-in:#111a2d;--pv-out:#1c2a4a;--pv-outb:rgba(212,175,106,.55)}
.thc-emerald{--pv-bg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' fill='none' stroke='%23d9a066' stroke-opacity='.11' stroke-width='1.6' stroke-linecap='round'%3E %3Cpath d='M40 40m-4 0a4 4 0 1 1 8 0a8 8 0 1 1-16 0a12 12 0 1 1 24 0a16 16 0 1 1-32 0'/%3E%3Cpath d='M100 20l10 14 10-14 10 14 10-14 10 14'/%3E %3Ccircle cx='135' cy='110' r='16' stroke-dasharray='2 5'/%3E%3Ccircle cx='135' cy='110' r='5'/%3E%3Cpath d='M20 130c12-14 24 14 36 0s24 14 36 0'/%3E %3Cpath d='M75 75c8 0 8 12 16 12s8-12 16-12'/%3E%3Ccircle cx='60' cy='165' r='1.6'/%3E%3Ccircle cx='70' cy='165' r='1.6'/%3E%3Ccircle cx='80' cy='165' r='1.6'/%3E%3C/svg%3E") 0 0/120px 120px,#0a1713;--pv-head:#10221c;--pv-hair:rgba(200,146,90,.4);--pv-in:#12261f;--pv-out:#1c4335;--pv-outb:rgba(200,146,90,.35)}
.thc-onyx{--pv-bg:#000;--pv-head:#0e0e10;--pv-hair:rgba(255,255,255,.1);--pv-in:#17171a;--pv-out:#3d7bff}
[data-mode="light"] .thc-graphite{--pv-bg:#f1f2f5;--pv-head:#ffffff;--pv-hair:rgba(0,0,0,.08);--pv-in:#ffffff;--pv-out:#dfe3ff}
[data-mode="light"] .thc-gold{--pv-bg:radial-gradient(100% 60% at 85% 0%,#efe4cc,transparent 62%),#f7f2e7;--pv-head:#fffcf5;--pv-hair:rgba(162,123,53,.4);--pv-in:#ffffff;--pv-out:#1d2a4b;--pv-outb:rgba(212,175,106,.6)}
[data-mode="light"] .thc-emerald{--pv-bg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' fill='none' stroke='%239a6a35' stroke-opacity='.16' stroke-width='1.6' stroke-linecap='round'%3E %3Cpath d='M40 40m-4 0a4 4 0 1 1 8 0a8 8 0 1 1-16 0a12 12 0 1 1 24 0a16 16 0 1 1-32 0'/%3E%3Cpath d='M100 20l10 14 10-14 10 14 10-14 10 14'/%3E %3Ccircle cx='135' cy='110' r='16' stroke-dasharray='2 5'/%3E%3Ccircle cx='135' cy='110' r='5'/%3E%3Cpath d='M20 130c12-14 24 14 36 0s24 14 36 0'/%3E %3Cpath d='M75 75c8 0 8 12 16 12s8-12 16-12'/%3E%3Ccircle cx='60' cy='165' r='1.6'/%3E%3Ccircle cx='70' cy='165' r='1.6'/%3E%3Ccircle cx='80' cy='165' r='1.6'/%3E%3C/svg%3E") 0 0/120px 120px,#f2efe4;--pv-head:#fbf9f2;--pv-hair:rgba(154,106,53,.3);--pv-in:#ffffff;--pv-out:#1f4a3a;--pv-outb:transparent}
[data-mode="light"] .thc-onyx{--pv-bg:#ffffff;--pv-head:#f7f7f9;--pv-hair:rgba(0,0,0,.08);--pv-in:#ececf0;--pv-out:#2f6bff}
.th-mode{margin-top:14px}
.th-mode button{display:flex;align-items:center;justify-content:center;gap:6px}
.th-mode-note{margin:8px 2px 0;font-size:12.5px;color:var(--text-2)}
.bs-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:12px 10px}
.bsc-pv{position:relative;width:100%;height:84px;border-radius:14px;border:2px solid var(--line);background:var(--chat-bg,var(--bg));
display:flex;flex-direction:column;justify-content:center;gap:7px;padding:8px 10px}
.bsc-pv i{position:relative;display:block;height:16px;width:66%;background:var(--bubble-in);border-radius:9px 9px 9px 2px}
.bsc-pv i+i{align-self:flex-end;width:70%;background:var(--bubble-out);border-radius:9px 2px 9px 9px}
.bsc-square i,.bsc-square i+i{border-radius:3px}
.bsc-soft i{border-radius:10px 10px 10px 10px}.bsc-soft i+i{border-radius:10px}
.bsc-tail i{border-radius:9px 9px 9px 3px}.bsc-tail i+i{border-radius:9px 9px 3px 9px}
.bsc-tail i::before{content:"";position:absolute;left:-5px;bottom:0;width:7px;height:9px;background:radial-gradient(circle at 0 0,transparent 6.5px,var(--bubble-in) 7px)}
.bsc-tail i+i::before{left:auto;right:-5px;background:radial-gradient(circle at 100% 0,transparent 6.5px,var(--bubble-out-solid,var(--bubble-out)) 7px)}
.bsc-minimal i{border-radius:8px;background:transparent;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--text) 30%,transparent)}.bsc-minimal i+i{border-radius:8px;background:var(--bubble-out);box-shadow:none}
.bs-cards .thc-plus{top:5px;right:5px;width:19px;height:19px;font-size:10px}
.font-list{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--panel)}
.font-list button{display:flex;align-items:center;gap:12px;padding:11px 14px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--text);text-align:left;cursor:pointer}
.font-list button:last-child{border-bottom:0}
.font-list .fl-aa{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--panel-2);font-size:19px;font-weight:700}
.font-list span{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.font-list span b{font-size:15px;font-weight:700}
.font-list span small{color:var(--text-2);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.font-list em{font-style:normal;font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:99px;color:#1c1203;background:linear-gradient(135deg,#ffe08a,#e8b04b)}
.font-list em.free{color:var(--text-2);background:var(--panel-3)}
.font-list button.on{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.font-list button.on .fl-aa{background:var(--accent);color:var(--on-accent)}
#hubPage.page .fp-stack{max-width:none;box-shadow:none;background:transparent}
#hubPage.page .fp{background:transparent}
#hubPage.page .fp-head{display:none}
#hubPage.page .gh-tabs-w{padding-top:8px}
#hubPage.page .gh-body{padding-bottom:calc(var(--nav-h) + 24px)}
body[data-nav=games] .side .searchbar{display:none}
.bottom-nav.five{height:64px;padding:6px;gap:2px;align-items:center;border-radius:32px;width:min(460px,calc(100% - 24px));
bottom:calc(12px + env(safe-area-inset-bottom))}
.bottom-nav.five button{flex:1 1 0;height:52px;min-width:0;padding:0 6px;border-radius:26px;flex-direction:row;gap:7px;
font-size:13px;font-weight:650;letter-spacing:-.1px;color:var(--text-2);
transition:flex-grow .2s var(--ease),background-color .16s var(--ease),color .14s var(--ease)}
.bottom-nav.five button>span[data-t]{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;
transition:max-width .2s var(--ease),opacity .14s var(--ease)}
.bottom-nav.five button.on{flex-grow:2.3;color:color-mix(in srgb,var(--accent) 50%,var(--text));background:color-mix(in srgb,var(--accent) 17%,transparent)}
.bottom-nav.five button.on>span[data-t]{max-width:96px;opacity:1}
.bottom-nav.five button .ic,.bottom-nav.five button.on .ic{width:auto;height:auto;background:none!important;box-shadow:none!important;transform:none;border-radius:0}
.bottom-nav.five button:active .ic{transform:scale(.9)}
.bottom-nav.five button:not(.on):hover{color:var(--text)}
.bottom-nav.five .nav-badge{top:7px;left:calc(50% + 4px)}
.bottom-nav.five button.on .nav-badge{position:static;margin-left:-2px;transform:none}
[data-theme="light"] .bottom-nav.five button.on{color:#005c4b}
[data-prem] .bottom-nav.five button{color:var(--text-2)}
[data-prem] .bottom-nav.five button.on{color:color-mix(in srgb,var(--accent) 50%,var(--text));background:color-mix(in srgb,var(--accent) 18%,transparent)}
.fab{bottom:calc(64px + 26px + env(safe-area-inset-bottom))}
.page-scroll,#listChats{padding-bottom:calc(64px + 30px + env(safe-area-inset-bottom))}
@media (prefers-reduced-motion:reduce){.bottom-nav.five button,.bottom-nav.five button>span[data-t]{transition:none}}
.fa{display:inline-block;width:1.25em;height:1em;vertical-align:-.125em;fill:currentColor!important;stroke:none!important;flex:none;overflow:visible;pointer-events:none}
.fa-12{width:12px;height:12px}.fa-22{width:22px;height:22px}.fa-26{width:26px;height:26px}
.ci .fa{width:24px;height:24px}
.dl-ic .fa,.bv-dl .fa,#svSave .fa{width:22px;height:22px}
.bv-play .fa{width:26px;height:26px}
#callView:not(.on) *,#ringBanner:not(.on),#ringBanner:not(.on) *,.full-page:not(.on) *,
.scrim:not(.on) *,.sheet-scrim:not(.on) *{animation:none!important}
html.nk-gate body>*:not(#nkGate){display:none!important}
html.nk-gate,html.nk-gate body{background:#0b141a}