:root{--bg:#07050f;--card:rgba(24,18,44,.72);--line:rgba(167,139,250,.14);--tx:#ece8ff;--mut:#8c84b0;--pri:#8b5cf6;--pri2:#c084fc}
*{box-sizing:border-box;margin:0}
body{background:radial-gradient(1200px 700px at 70% -10%,#1d1140,var(--bg));color:var(--tx);font:16px/1.4 "Segoe UI",Inter,system-ui,sans-serif;min-height:100vh}
#bg{position:fixed;inset:0;z-index:0;pointer-events:none}
.app{position:relative;z-index:1;display:flex;gap:32px;max-width:1100px;margin:0 auto;padding:20px}
aside{width:240px;position:sticky;top:20px;height:max-content}
.brand{display:flex;align-items:center;gap:10px;color:var(--tx);text-decoration:none;margin:0 0 20px 8px}
.brand img{width:46px;mix-blend-mode:screen}.brand b{font-size:21px;letter-spacing:.06em}
nav a{display:flex;align-items:center;gap:14px;padding:13px 18px;border-radius:22px;color:var(--mut);text-decoration:none;position:relative;transition:.2s}
nav a:hover{color:var(--tx)}nav a.on{background:var(--card);color:var(--tx);box-shadow:inset 0 0 0 1px var(--line)}
nav i{font-style:normal;font-size:19px}nav em{position:absolute;left:36px;top:4px;background:var(--pri2);color:#1a0b33;font:700 11px/1 sans-serif;padding:3px 6px;border-radius:9px}
main{flex:1;max-width:600px;min-width:0}
.card{background:var(--card);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:28px;padding:20px;margin-bottom:16px}
.tabs{display:flex;padding:5px;border-radius:26px}.tabs button{flex:1;padding:12px;border:0;border-radius:22px;background:none;color:var(--mut);font:inherit;cursor:pointer}
.tabs .on{background:rgba(139,92,246,.22);color:var(--tx)}
.av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--pri),var(--pri2));display:grid;place-items:center;flex:none;font-size:20px}
.row{display:flex;gap:14px}.grow{flex:1;min-width:0}
textarea,.msgbox input{width:100%;background:none;border:0;outline:0;color:var(--tx);font:inherit;resize:none}
.bar{display:flex;align-items:center;gap:18px;margin-top:12px;color:var(--mut);font-size:19px}
.btn{margin-left:auto;background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;border:0;border-radius:22px;padding:11px 26px;font:600 16px inherit;cursor:pointer}
.btn:disabled{opacity:.4;cursor:default}
.post small{color:var(--mut);margin-left:8px}.post p{margin:4px 0 12px}.act{display:flex;gap:24px;color:var(--mut)}
.act button{background:none;border:0;color:inherit;font:inherit;cursor:pointer}.act .liked{color:#f472b6}
.chat{display:flex;gap:16px;height:calc(100vh - 40px)}.list{width:230px;overflow:auto}
.ct{display:flex;gap:12px;align-items:center;padding:10px;border-radius:18px;cursor:pointer;color:var(--mut)}
.ct.on,.ct:hover{background:rgba(139,92,246,.16);color:var(--tx)}
.conv{flex:1;display:flex;flex-direction:column;margin:0;min-width:0}
.head{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line)}
.msgs{flex:1;overflow:auto;display:flex;flex-direction:column;gap:8px;padding:14px 0}
.m{max-width:75%;padding:10px 15px;border-radius:18px;background:rgba(255,255,255,.07);align-self:flex-start;word-wrap:break-word}
.m.me{align-self:flex-end;background:linear-gradient(135deg,var(--pri),#a855f7)}
.msgbox{display:flex;gap:10px;background:rgba(255,255,255,.06);border-radius:24px;padding:6px 6px 6px 18px}.msgbox .btn{padding:9px 20px}
.stub{text-align:center;color:var(--mut);padding:60px 20px}
@media(max-width:800px){aside{width:64px}.brand b,nav a span{display:none}.list{width:70px}.ct span{display:none}.app{gap:12px;padding:12px}}
.guest aside{display:none}.guest .app{justify-content:center}
.auth{max-width:380px;margin:10vh auto;display:flex;flex-direction:column;gap:12px;text-align:center}
.auth img{width:90px;margin:0 auto;mix-blend-mode:screen}
.auth input{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:16px;padding:13px 16px;color:var(--tx);font:inherit;outline:0}
.auth a{color:var(--pri2);font-size:14px}.err{color:#f87171;min-height:18px;font-size:14px}.auth .btn{margin:0}
.sq{width:100%;background:none;border:0;outline:0;color:var(--tx);font:inherit}
.btn.out{background:rgba(255,255,255,.1)}.dl{display:inline-block;text-decoration:none;margin:8px 0 0}
.ar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--line)}
.ar button{background:rgba(139,92,246,.2);color:var(--tx);border:0;border-radius:12px;padding:6px 12px;margin-left:6px;cursor:pointer}
.ib{background:none;border:0;font-size:20px;cursor:pointer;margin-left:6px}
#call{position:fixed;inset:0;z-index:50;background:rgba(7,5,15,.94);align-items:center;justify-content:center;display:none}
.cbox{text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center;position:relative}.cbox small{color:var(--mut)}
#rv{width:min(92vw,640px);max-height:60vh;border-radius:20px;background:#000}#lv{position:absolute;right:8px;bottom:70px;width:120px;border-radius:12px;background:#000}
.ic{width:28px;height:28px;display:block;object-fit:contain}.ib .ic{width:34px;height:34px}.av.ai{background:none}.av img{width:100%;height:100%;object-fit:contain}
.av.big{width:120px;height:120px;font-size:48px}.pulse{animation:pls 2s infinite}@keyframes pls{0%{box-shadow:0 0 0 0 rgba(168,85,247,.5)}100%{box-shadow:0 0 0 36px rgba(168,85,247,0)}}
.ib{color:var(--mut)}.ib:hover{color:var(--tx)}.ib svg,.cb svg,.av svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.av.big svg{width:48px;height:48px}
.cinfo{display:flex;flex-direction:column;gap:4px}.cinfo b{font-size:22px}.cbtns{display:flex;gap:18px}
.cb{width:64px;height:64px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(8px);font-size:24px}.cb svg{width:26px;height:26px}
.cb.off{background:#fff;color:#1a0b33}.cb.end{background:#ef4444}.cb.ok{background:#22c55e}
.cbox.vid{position:fixed;inset:0;justify-content:flex-end;padding-bottom:30px}.cbox.vid #rv{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;border-radius:0}
.cbox.vid #lv{top:20px;bottom:auto;right:20px;transform:scaleX(-1);z-index:1}.cbox.vid .cinfo,.cbox.vid .cbtns{position:relative;z-index:1;text-shadow:0 1px 6px #000}
.m.st{background:none;font-size:64px;line-height:1.1;padding:2px}.m.vc{background:none;padding:0}.m audio{max-width:240px;height:40px}
.circle{width:200px;height:200px;border-radius:50%;object-fit:cover;cursor:pointer;background:#000}
.rcirc{width:240px;height:240px;border-radius:50%;overflow:hidden;border:3px solid var(--pri2)}.rcirc video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.msgbox{align-items:center}.panel{max-height:220px;overflow:auto;border-top:1px solid var(--line);padding:8px 0}.pt{display:flex;gap:6px;margin-bottom:6px}
.pt button{background:rgba(255,255,255,.06);border:0;color:var(--mut);border-radius:12px;padding:6px 12px;cursor:pointer}.pt .on{color:var(--tx);background:rgba(139,92,246,.25)}
.pg{display:flex;flex-wrap:wrap;gap:4px}.pg button{background:none;border:0;font-size:24px;cursor:pointer;border-radius:10px;padding:4px}.pg .big{font-size:44px}
@keyframes bn{50%{transform:translateY(-10px)}}@keyframes pu{50%{transform:scale(1.2)}}@keyframes sp{to{transform:rotate(360deg)}}@keyframes sh{25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}@keyframes fl{50%{transform:translate(8px,-8px) rotate(8deg)}}@keyframes tw{50%{transform:scale(.7);opacity:.5}}
.an-bounce{animation:bn 1s infinite}.an-pulse{animation:pu 1.2s infinite}.an-spin{animation:sp 2s linear infinite}.an-shake{animation:sh .6s infinite}.an-wave{animation:sh 1s infinite;transform-origin:70% 70%}.an-fly{animation:fl 1.5s infinite}.an-twinkle{animation:tw 1.2s infinite}.an-float{animation:bn 2.5s ease-in-out infinite}