:root{--b:rgba(255,255,255,.16);--m:rgba(255,255,255,.6)}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html{background:#000}
body{background:#000;color:#fff;font:800 15px/1.45 Manrope,system-ui,sans-serif;min-height:100vh;overflow-x:hidden}
body::before,body::after{content:"";position:fixed;width:55vmax;height:55vmax;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.2),transparent 65%);filter:blur(30px);z-index:-1;animation:fl 22s ease-in-out infinite alternate}
body::before{top:-20vmax;left:-15vmax}
body::after{bottom:-25vmax;right:-15vmax;animation-delay:-11s;opacity:.7}
@keyframes fl{to{transform:translate(14vmax,10vmax) scale(1.2)}}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98);filter:blur(6px)}}
.pop{animation:pop .5s cubic-bezier(.2,.8,.2,1) both}
.glass{background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.04));backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);border:1px solid var(--b);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(255,255,255,.04),0 12px 40px rgba(0,0,0,.55);border-radius:26px}
.i{width:22px;height:22px;flex:none}
.muted,small{color:var(--m)}small{font-size:12px;display:block}
h1{font-size:44px;letter-spacing:-2px}h2{font-size:28px;margin:6px 0 16px;letter-spacing:-1px}h3{margin:22px 0 10px}
.c{text-align:center;padding:30px}
#app{display:flex;min-height:100vh}
main{flex:1;max-width:660px;margin:0 auto;padding:28px 16px 40px;width:100%}
.nav{position:sticky;top:16px;margin:16px;height:calc(100vh - 32px);width:210px;padding:16px;display:flex;flex-direction:column;gap:6px;flex:none}
.nav h1{font-size:30px;margin:8px 10px 18px}
.nav button{display:flex;align-items:center;gap:12px;padding:13px 16px;border:0;border-radius:18px;background:none;color:var(--m);font:inherit;cursor:pointer;transition:.25s}
.nav button:hover{background:rgba(255,255,255,.08);color:#fff;transform:translateX(4px)}
.nav button.on{background:#fff;color:#000}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border:0;border-radius:999px;background:#fff;color:#000;font:inherit;cursor:pointer;transition:transform .2s,box-shadow .3s;box-shadow:0 0 0 rgba(255,255,255,0)}
.btn:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 8px 30px rgba(255,255,255,.3)}.btn:active{transform:scale(.95)}
.btn.sm{padding:8px 14px}.btn.ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid var(--b)}
.ib{display:inline-grid;place-items:center;width:42px;height:42px;flex:none;border:1px solid var(--b);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font:inherit;cursor:pointer;transition:.2s}
.ib:hover{background:#fff;color:#000;transform:scale(1.1)}.ib.rec{background:#fff;color:#000;animation:rec 1s infinite}
@keyframes rec{50%{box-shadow:0 0 0 12px rgba(255,255,255,.15)}}
.link{background:none;border:0;color:var(--m);font:inherit;cursor:pointer;margin-top:10px}.link:hover{color:#fff}
input:not([type=file]),textarea{width:100%;padding:14px 18px;border-radius:18px;border:1px solid var(--b);background:rgba(255,255,255,.07);color:#fff;font:inherit;outline:0;resize:none;transition:.25s}
input:focus,textarea:focus{border-color:#fff;background:rgba(255,255,255,.12)}::placeholder{color:rgba(255,255,255,.4)}
.card{padding:18px;margin-bottom:14px}
.row{display:flex;align-items:center;gap:10px}.sp,.grow{flex:1}.grow{display:flex;align-items:center;gap:12px;cursor:pointer;min-width:0}
.row2{display:flex;align-items:center;gap:12px;padding:12px 16px}
.av{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;display:inline-grid;place-items:center;background:#fff;color:#000;font-size:18px}
.av.xl{width:96px;height:96px;font-size:40px}
.auth{width:min(400px,92vw);margin:auto;padding:34px 28px;display:flex;flex-direction:column;gap:12px;text-align:center}
.or{color:var(--m);font-size:12px}
.tb{display:flex;gap:6px;margin-bottom:8px}.tb button{width:34px;height:34px;border-radius:12px;border:0;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;display:grid;place-items:center;transition:.2s}.tb button:hover{background:#fff;color:#000}.tb .i{width:17px;height:17px}
.comp textarea{min-height:84px;margin-bottom:10px}
.post header{display:flex;align-items:center;gap:12px;margin-bottom:12px;cursor:pointer}
.post header>div{flex:1}
.pimg{width:100%;max-height:520px;object-fit:cover;border-radius:20px;margin-top:12px;display:block}
code{background:rgba(255,255,255,.15);padding:1px 6px;border-radius:8px}
.srch{display:flex;align-items:center;gap:10px;padding:6px 16px}.srch input{border:0;background:none}
.chat{display:flex;flex-direction:column;height:calc(100vh - 56px)}
.ch{display:flex;align-items:center;gap:12px;padding:10px 14px;margin-bottom:10px}
#msgs{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:6px 2px}
.m{max-width:78%;padding:10px 14px;border-radius:22px 22px 22px 6px;background:rgba(255,255,255,.1);border:1px solid var(--b);align-self:flex-start;word-break:break-word}
.m.me{align-self:flex-end;background:#fff;color:#000;border-radius:22px 22px 6px 22px}.m.me small{color:rgba(0,0,0,.5)}.m.me code{background:rgba(0,0,0,.12)}
.m img{max-width:100%;border-radius:14px;display:block}.m audio{max-width:100%;height:36px}
.k-sticker{background:none!important;border:0;padding:0}.stk{width:110px;height:110px}
.composer{padding:12px;margin-top:10px}.composer .row{align-items:flex-end}.composer textarea{height:44px;padding:11px 16px}
#pick{display:flex;gap:6px;padding-bottom:10px;overflow-x:auto}#pick[hidden]{display:none}#pick button{background:none;border:0;cursor:pointer;transition:.2s}#pick button:hover{transform:scale(1.2) rotate(-6deg)}#pick .stk{width:56px;height:56px}
.spin{width:30px;height:30px;margin:40px auto;border:3px solid var(--b);border-top-color:#fff;border-radius:50%;animation:s .8s linear infinite}@keyframes s{to{rotate:360deg}}
#toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,30px);padding:12px 20px;border-radius:999px;background:#fff;color:#000;opacity:0;pointer-events:none;transition:.35s;z-index:9;max-width:90vw}#toast.on{opacity:1;transform:translate(-50%,0)}
@media(max-width:800px){
 .nav{position:fixed;top:auto;bottom:max(10px,env(safe-area-inset-bottom));left:10px;right:10px;margin:0;width:auto;height:auto;flex-direction:row;justify-content:space-around;padding:8px;z-index:5;border-radius:30px}
 .nav h1{display:none}.nav button{flex-direction:column;gap:2px;padding:8px 14px;font-size:11px;flex:1;align-items:center}.nav button:hover{transform:none}
 main{padding:max(18px,env(safe-area-inset-top)) 12px 110px}.chat{height:calc(100vh - 130px)}h1{font-size:38px}
}
@media(prefers-reduced-motion:reduce){*,::before,::after{animation:none!important;transition:none!important}}