/* ===== Tema premium (dark, tipo Discord melhorado) ===== */
:root{
  --rail:#0c0d11; --sidebar:#141519; --panel:#191b21; --main:#1c1e24;
  --card:#24262e; --hover:#282b34; --active:#31343e; --line:rgba(255,255,255,.07);
  --txt:#e8eaf0; --txt2:#9aa1af; --txt3:#666d7c;
  --brand:#ff3b3b; --brand2:#c81e1e; --brandgrad:linear-gradient(135deg,#ff5a4d,#d10f1f);
  --green:#22c55e; --red:#ef4444; --live:#ff2d55; --yellow:#f5b301;
  --shadow:0 8px 30px rgba(0,0,0,.35); --radius:14px;
}
*{box-sizing:border-box; margin:0}
html,body{height:100%}
body{
  font-family:"Inter","Segoe UI",Roboto,system-ui,Arial,sans-serif;
  background:var(--main); color:var(--txt); overflow:hidden; font-size:15px;
  -webkit-tap-highlight-color:transparent; -webkit-font-smoothing:antialiased;
}
button{font-family:inherit; cursor:pointer; border:0; background:none; color:inherit}
svg{display:block; fill:currentColor}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.09);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.16)}
::-webkit-scrollbar-track{background:transparent}
input,select{font-family:inherit}

/* ===== Login ===== */
#login{position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  padding:20px; overflow:hidden; background:#0b0c10}
#login::before,#login::after{content:""; position:absolute; border-radius:50%; filter:blur(90px); opacity:.55; z-index:0}
#login::before{width:520px; height:520px; background:#ff3b3b; top:-160px; left:-120px; animation:float1 14s ease-in-out infinite}
#login::after{width:460px; height:460px; background:#b91c1c; bottom:-160px; right:-120px; animation:float2 16s ease-in-out infinite}
@keyframes float1{50%{transform:translate(80px,60px) scale(1.1)}}
@keyframes float2{50%{transform:translate(-70px,-50px) scale(1.15)}}
.login-card{position:relative; z-index:1; width:100%; max-width:400px; padding:34px 28px; text-align:center;
  background:rgba(23,25,31,.72); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.09);
  border-radius:22px; box-shadow:0 30px 80px rgba(0,0,0,.55)}
.login-card .logo{width:64px; height:64px; margin:0 auto 14px; border-radius:20px; background:var(--brandgrad);
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(255,59,59,.5)}
.login-card .logo svg{width:34px; height:34px; color:#fff}
.login-card h1{font-size:23px; font-weight:800; letter-spacing:-.3px; margin-bottom:6px}
.login-card p{color:var(--txt2); font-size:14px; margin-bottom:22px; line-height:1.5}
.login-card label{display:block; text-align:left; font-size:11px; font-weight:700; color:var(--txt2);
  text-transform:uppercase; letter-spacing:.6px; margin-bottom:8px}
.login-card input{width:100%; padding:13px 14px; background:rgba(0,0,0,.35); border:1px solid var(--line);
  color:var(--txt); border-radius:11px; font-size:16px; outline:none; transition:.15s}
.login-card input:focus{border-color:var(--brand); box-shadow:0 0 0 3px rgba(255,59,59,.25)}
.login-card button{width:100%; margin-top:20px; padding:13px; background:var(--brandgrad); color:#fff;
  border-radius:11px; font-size:15px; font-weight:700; letter-spacing:.2px; transition:.15s;
  box-shadow:0 8px 24px rgba(255,59,59,.4)}
.login-card button:hover{transform:translateY(-1px); box-shadow:0 12px 30px rgba(255,59,59,.55)}
.login-card button:active{transform:translateY(0)}

/* ===== Layout ===== */
#app{display:none; height:100%}
.shell{display:flex; height:100%}

/* barra de servidores */
.servers{width:72px; flex:0 0 72px; background:var(--rail); display:flex; flex-direction:column;
  align-items:center; padding:12px 0; gap:10px; overflow:auto}
.servers .pill{position:relative; width:48px; height:48px; border-radius:16px; display:flex; align-items:center;
  justify-content:center; font-weight:800; font-size:17px; color:#fff; cursor:pointer; transition:.18s}
.servers .pill.brand{background:var(--brandgrad); box-shadow:0 6px 18px rgba(255,59,59,.45)}
.servers .pill.home{background:var(--panel); color:var(--txt2)}
.servers .pill.home-btn{background:var(--panel); color:var(--txt)}
.servers .pill.home-btn:hover{background:var(--brandgrad); color:#fff; border-radius:14px}
.servers .pill.home-btn.active{background:var(--brandgrad); color:#fff; border-radius:16px}
.servers .pill.home-btn.active::before{content:""; position:absolute; left:-16px; width:8px; height:38px; background:#fff; border-radius:0 6px 6px 0}
.servers .pill svg{width:24px;height:24px}
.servers .pill:hover{border-radius:14px; transform:translateY(-1px)}
.servers .pill.active::before{content:""; position:absolute; left:-16px; width:8px; height:38px; background:#fff; border-radius:0 6px 6px 0}
.servers .pill.profile-btn{color:#fff; font-weight:800; font-size:18px}
.servers .pill.profile-btn .pill-dot{position:absolute; right:-2px; bottom:-2px; width:14px; height:14px;
  border-radius:50%; background:var(--green); border:3px solid var(--rail)}
.servers .sep{width:34px; height:2px; background:var(--line); border-radius:2px}
.servers .add{background:var(--panel); color:var(--green); font-size:26px}
.servers .add:hover{background:var(--green); color:#fff}

/* sidebar */
.sidebar{width:248px; flex:0 0 248px; background:var(--sidebar); display:flex; flex-direction:column; min-height:0}
.sb-head{height:52px; flex:0 0 52px; display:flex; align-items:center; padding:0 16px; font-weight:800; font-size:15px;
  letter-spacing:-.2px; border-bottom:1px solid var(--line); cursor:pointer; transition:.15s}
.sb-head:hover{background:var(--hover)}
.sb-head .chev{margin-left:auto; color:var(--txt2); font-size:11px}
.channels{flex:1; overflow-y:auto; padding:12px 8px}
/* Barra lateral da Início (Amigos + Mensagens diretas) */
.home-side{display:none; flex:1; min-height:0; overflow-y:auto; padding:12px 8px; flex-direction:column}
.home-side.on{display:flex}
.hs-nav{display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border-radius:8px; background:transparent;
  color:var(--txt); font-size:15px; font-weight:700; border:0; cursor:pointer; text-align:left}
.hs-nav svg{width:19px; height:19px}
.hs-nav:hover{background:var(--hover)}
.hs-dm-ttl{font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--txt3); padding:16px 12px 8px}
.hs-dms{display:flex; flex-direction:column; gap:1px}
.hs-empty{color:var(--txt3); font-size:12.5px; padding:6px 12px; line-height:1.4}
.hs-dm{display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border-radius:9px; background:transparent; border:0; cursor:pointer}
.hs-dm:hover{background:var(--hover)}
.hs-dm.on{background:var(--active)}
.hs-av{position:relative; width:34px; height:34px; flex:0 0 auto; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:14px}
.hs-nm{color:var(--txt); font-size:15px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cat{margin-top:16px}
.cat:first-child{margin-top:4px}
.cat-name{font-size:11px; font-weight:800; text-transform:uppercase; color:var(--txt3); letter-spacing:.5px;
  padding:4px 8px; cursor:pointer; user-select:none}
.cat-name:hover{color:var(--txt2)}
.chan{position:relative; display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; color:var(--txt2);
  font-size:15px; cursor:pointer; margin-top:2px; font-weight:500; transition:background .12s,color .12s}
.chan:hover{background:var(--hover); color:var(--txt)}
.chan.active{background:var(--active); color:#fff}
.chan.active::before{content:""; position:absolute; left:-8px; top:50%; transform:translateY(-50%); width:4px; height:20px;
  background:var(--brand); border-radius:0 4px 4px 0}
.chan .ico{width:20px; flex:0 0 20px; color:var(--txt3); display:flex; align-items:center; justify-content:center}
.chan .ico svg{width:20px;height:20px}
.chan.active .ico,.chan:hover .ico{color:var(--txt2)}
.chan .nm{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chan .badge{background:var(--red); color:#fff; font-size:11px; font-weight:800; border-radius:10px;
  min-width:18px; height:18px; padding:0 5px; display:flex; align-items:center; justify-content:center}

/* usuários na call */
.voice-users{margin:2px 0 4px}
.vu{display:flex; align-items:center; gap:9px; padding:5px 10px 5px 26px; border-radius:8px; color:var(--txt2); font-size:14px}
.vu:hover{background:var(--hover)}
.vu .av{position:relative; width:24px; height:24px; border-radius:50%; color:#fff; font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center; flex:0 0 24px}
.vu.speaking .av{box-shadow:0 0 0 2px var(--green)}
.vu .vname{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.vu.speaking .vname{color:var(--txt)}
.vu .st{display:flex; gap:4px; align-items:center; color:var(--txt3)}
.vu .st svg{width:15px;height:15px}
.vu .st .live{color:var(--live); font-weight:800; font-size:10px; letter-spacing:.4px}
.vu .st .muted{color:var(--red)}

/* userbar */
.userbar{background:var(--panel); padding:8px; display:flex; flex-direction:column; gap:8px; flex:0 0 auto;
  margin-top:auto; border-top:1px solid var(--line)}
.voice-conn{display:none; background:rgba(0,0,0,.28); border:1px solid var(--line); border-radius:12px; padding:10px}
.voice-conn.on{display:block}
.voice-conn .top{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.voice-conn .sig{color:var(--green); display:flex}
.voice-conn .sig svg{width:20px;height:20px}
.voice-conn .lbl{flex:1; min-width:0}
.voice-conn .lbl b{font-size:14px; color:var(--green); display:block; font-weight:800}
.voice-conn .lbl span{font-size:12px; color:var(--txt2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block}
.voice-conn .disc{color:var(--txt2); padding:6px; border-radius:8px; display:flex}
.voice-conn .disc svg{width:20px;height:20px}
.voice-conn .disc:hover{background:rgba(239,68,68,.15); color:var(--red)}
.voice-conn .btns{display:flex; gap:8px}
.voice-conn .vb{flex:1; background:var(--card); border-radius:10px; padding:10px; display:flex; align-items:center;
  justify-content:center; gap:8px; color:var(--txt); font-size:13px; font-weight:600; transition:.15s}
.voice-conn .vb svg{width:19px;height:19px}
.voice-conn .vb:hover{background:var(--active); transform:translateY(-1px)}
.voice-conn .vb.on{background:var(--brandgrad); color:#fff; box-shadow:0 4px 14px rgba(255,59,59,.4)}

.me-row{display:flex; align-items:center; gap:9px; padding:6px; border-radius:10px; transition:.12s}
.me-row:hover{background:var(--hover)}
.me-row .av{position:relative; width:34px; height:34px; border-radius:50%; color:#fff; font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center; flex:0 0 34px}
.me-row .av .online{position:absolute; right:-2px; bottom:-2px; width:12px; height:12px; border-radius:50%;
  background:var(--green); border:3px solid var(--panel)}
.me-row .who{flex:1; min-width:0}
.me-row .who b{font-size:14px; display:block; line-height:1.15; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700}
.me-row .who span{font-size:12px; color:var(--txt2)}
.me-ctrls{display:flex; gap:2px; flex:0 0 auto}
.me-ctrls .mc{position:relative; width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--txt2); transition:.12s}
.me-ctrls .mc svg{width:20px;height:20px}
.me-ctrls .mc:hover{background:var(--card); color:var(--txt)}
.me-ctrls .mc.caret{width:15px; font-size:11px; color:var(--txt3)}
.me-ctrls .mc.caret:hover{background:var(--card); color:var(--txt)}
/* Popovers de config rápida de mic/som (estilo Discord) */
.mic-pop{display:none; position:fixed; z-index:600; width:280px; max-width:calc(100vw - 16px);
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px; box-shadow:0 20px 50px rgba(0,0,0,.5)}
.mic-pop.on{display:block; animation:pop .13s ease}
.mic-pop .mp-sec{font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--txt3); margin:14px 0 7px}
.mic-pop .mp-sec:first-child{margin-top:0}
.mic-pop .mp-sel{width:100%; padding:9px 11px; background:var(--card); color:var(--txt); border:1px solid var(--line); border-radius:9px; font-size:13.5px; cursor:pointer}
.mic-pop .mp-sel:focus{border-color:var(--brand); outline:none}
.mic-pop .mp-range{width:100%; accent-color:var(--brand); cursor:pointer; margin:2px 0}
.mic-pop .mp-meter{height:9px; border-radius:5px; background:var(--rail); overflow:hidden}
.mic-pop .mp-meter span{display:block; height:100%; width:0; border-radius:5px;
  background:linear-gradient(90deg,var(--green),var(--yellow) 70%,var(--red)); transition:width .05s linear}
.mic-pop .mp-link{display:flex; align-items:center; gap:9px; width:100%; margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
  color:var(--txt2); font-size:14px; font-weight:600; background:transparent; border:0; cursor:pointer}
.mic-pop .mp-link svg{width:18px; height:18px}
.mic-pop .mp-link:hover{color:var(--txt)}
.me-ctrls .mc.muted{color:var(--red)}
/* risco diagonal limpo quando mudo (estilo Discord) */
.me-ctrls .mc.muted::after{content:''; position:absolute; left:50%; top:50%; width:26px; height:2.5px;
  background:currentColor; border-radius:2px; transform:translate(-50%,-50%) rotate(-45deg); box-shadow:0 0 0 2px var(--panel)}

/* popup config */
.settings-pop{display:none; background:rgba(0,0,0,.3); border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:2px}
.settings-pop.open{display:block; animation:pop .15s ease}
@keyframes pop{from{opacity:0; transform:translateY(6px)}}
.settings-pop .sp-title{font-size:11px; font-weight:800; color:var(--txt2); text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px; display:flex; align-items:center; gap:6px}
.settings-pop .sp-title svg{width:15px;height:15px}
.settings-pop select{width:100%; padding:10px 12px; background:var(--card); color:var(--txt); border:1px solid var(--line);
  border-radius:9px; font-size:14px; outline:none; cursor:pointer}
.settings-pop select:focus{border-color:var(--brand)}
.settings-pop .sp-hint{font-size:11px; color:var(--txt3); margin-top:9px; line-height:1.4}
.settings-pop .sp-toggle{display:flex; align-items:center; gap:9px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
  font-size:13px; font-weight:500; color:var(--txt); cursor:pointer; user-select:none}
.settings-pop .sp-toggle input{width:17px; height:17px; accent-color:var(--brand); cursor:pointer; flex:0 0 auto}
.settings-pop .sp-slider{margin-top:14px}
.settings-pop .sp-slabel{font-size:13px; font-weight:500; color:var(--txt); margin-bottom:8px; display:flex; justify-content:space-between}
.settings-pop .sp-slabel span{color:var(--brand); font-weight:700}
.settings-pop .sp-slider input[type=range]{width:100%; accent-color:var(--brand); cursor:pointer}

/* ===== conteúdo ===== */
.content{flex:1; display:flex; flex-direction:column; min-width:0; background:var(--main)}
.topbar{height:52px; flex:0 0 52px; display:flex; align-items:center; gap:10px; padding:0 18px; border-bottom:1px solid var(--line)}
.topbar .ico{color:var(--txt3); display:flex}
.topbar .ico svg{width:22px;height:22px}
.topbar .title{font-weight:800; font-size:16px; letter-spacing:-.2px}
.topbar .hamb{display:none; color:var(--txt2); padding:4px}
.topbar .hamb svg{width:24px;height:24px}

/* chat */
.textview{flex:1; display:flex; flex-direction:column; min-height:0}
.messages{flex:1; overflow-y:auto; padding:18px 18px 8px}
.msg{display:flex; gap:14px; padding:3px 8px; margin-top:14px; border-radius:8px}
.msg:hover{background:rgba(255,255,255,.02)}
.msg .av{width:42px;height:42px;border-radius:50%;color:#fff;font-weight:700;font-size:17px;
  display:flex;align-items:center;justify-content:center;flex:0 0 42px}
.msg .body{min-width:0}
.msg .body .head{display:flex; align-items:baseline; gap:8px}
.msg .body .nm{font-weight:700; color:#fff; font-size:15px}
.msg .body .time{font-size:11px; color:var(--txt3)}
.msg .body .txt{color:#d4d7de; line-height:1.5; word-break:break-word; white-space:pre-wrap}
.msg.compact{margin-top:2px}
.msg.compact .av{visibility:hidden; height:0; margin:0}
.chatbox{padding:0 18px 22px}
.chatbox .inp{background:var(--card); border-radius:12px; display:flex; align-items:center; padding:2px 8px 2px 16px; border:1px solid transparent; transition:.15s}
.chatbox .inp:focus-within{border-color:var(--line); background:var(--hover)}
.chatbox input{flex:1; background:none; border:0; outline:0; color:var(--txt); font-size:15px; padding:13px 0}
.chatbox input::placeholder{color:var(--txt3)}
.chatbox .send{color:var(--brand); padding:8px; border-radius:8px; display:flex}
.chatbox .send svg{width:22px;height:22px}
.chatbox .send:hover{background:rgba(255,59,59,.15)}
.empty-chat{color:var(--txt3); text-align:center; margin-top:36px; font-size:14px; line-height:1.6}

/* grade de vídeo */
.stage{flex:1; display:none; padding:18px; overflow:auto; align-content:center; justify-items:center; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); background:radial-gradient(1000px 500px at 50% 0,#202329,var(--main))}
.stage.on{display:grid}
.vtile{position:relative; width:100%; max-width:960px; aspect-ratio:16/9; background:#0e0f13; border-radius:16px;
  overflow:hidden; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); box-shadow:var(--shadow)}
.vtile video{width:100%; height:100%; object-fit:contain; background:#000}
.vtile .avatar{width:96px; height:96px; border-radius:50%; color:#fff; font-size:38px; font-weight:800;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(0,0,0,.4)}
.vtile .avatar svg{width:46px; height:46px}
.vtile .tag{position:absolute; left:12px; bottom:12px; background:rgba(0,0,0,.6); backdrop-filter:blur(6px);
  padding:5px 12px; border-radius:20px; font-size:13px; font-weight:700; display:flex; align-items:center; gap:6px}
.vtile .tag svg{width:14px;height:14px; color:var(--red)}
.vtile .liveb{position:absolute; right:12px; top:12px; background:var(--live); color:#fff; font-size:10px;
  font-weight:800; padding:4px 9px; border-radius:6px; letter-spacing:.6px; box-shadow:0 4px 12px rgba(244,63,94,.5); display:none}
.vtile.is-live .liveb,.vtile .liveb.show{display:block}
.vtile .tag .mtag{display:none; color:var(--red)}
.vtile.is-muted .tag .mtag{display:inline}
.vtile .tag .mtag svg{width:14px; height:14px; vertical-align:-2px; display:inline-block}
.vtile.speaking{border-color:var(--green); box-shadow:0 0 0 2px var(--green),var(--shadow)}
.vtile .fs{position:absolute; right:12px; bottom:12px; background:rgba(0,0,0,.6); color:#fff; width:36px; height:36px;
  border-radius:10px; display:flex; align-items:center; justify-content:center; opacity:0; transition:.15s}
.vtile .fs svg{width:18px;height:18px}
.vtile:hover .fs{opacity:1}
@media(hover:none){.vtile .fs{opacity:.9}}
.vtile .fs:hover{background:var(--brand)}
.vtile:fullscreen{width:100vw; height:100vh; max-width:none; border-radius:0; border:0}
.vtile:fullscreen video{width:100%; height:100%}
.stage-empty{color:var(--txt2); text-align:center; max-width:340px}
.stage-empty .big{width:88px; height:88px; margin:0 auto 16px; border-radius:26px; background:var(--card);
  display:flex; align-items:center; justify-content:center; color:var(--txt3)}
.stage-empty .big svg{width:44px;height:44px}
.stage-empty h3{font-size:18px; margin-bottom:6px; color:var(--txt)}
.stage-empty p{font-size:14px; line-height:1.5}

/* mobile */
.backdrop{display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:20; backdrop-filter:blur(2px)}
@media (max-width:820px){
  /* rail de servidores + lista de canais = uma gaveta só, estilo Discord mobile */
  .servers{display:flex; position:fixed; left:0; top:0; bottom:0; z-index:31;
    transform:translateX(-105%); transition:transform .22s ease}
  .sidebar{position:fixed; left:72px; top:0; bottom:0; width:calc(100vw - 112px); max-width:300px; z-index:30;
    transform:translateX(-130%); transition:transform .22s ease; box-shadow:12px 0 40px rgba(0,0,0,.5)}
  #app.drawer .servers, #app.drawer .sidebar{transform:none}
  #app.drawer .backdrop{display:block}
  .topbar .hamb{display:flex}
  .stage{grid-template-columns:1fr; padding:12px 12px 92px}
  /* barra de usuário embaixo um pouco maior no celular (mais fácil de tocar) */
  .me-row{padding:8px 6px}
  .me-row .av{width:38px; height:38px; flex-basis:38px}
  /* barra flutuante de controles da call (estilo Discord mobile) */
  .stage.on ~ .mcall{display:flex; position:fixed; left:50%; transform:translateX(-50%); bottom:16px; z-index:25;
    gap:12px; padding:10px 14px; background:rgba(20,21,26,.92); border:1px solid var(--line); border-radius:20px;
    box-shadow:0 14px 44px rgba(0,0,0,.55); backdrop-filter:blur(10px)}
}
.mcall{display:none}
.mcb{width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--card); color:var(--txt); transition:.12s}
.mcb svg{width:23px; height:23px}
.mcb:active{transform:scale(.92)}
.mcb.muted{background:rgba(239,68,68,.18); color:var(--red)}
.mcb.on{background:var(--brandgrad); color:#fff; box-shadow:0 4px 14px rgba(255,59,59,.4)}
.mcb.danger{background:var(--red); color:#fff}

/* ===== topbar ações ===== */
.topbar .tb-spacer{flex:1}
.topbar .tb-btn{color:var(--txt2); padding:6px; border-radius:8px; display:flex}
.topbar .tb-btn svg{width:22px;height:22px}
.topbar .tb-btn:hover,.topbar .tb-btn.on{color:var(--txt); background:var(--hover)}

/* ===== corpo: chat + membros ===== */
.cbody{flex:1; display:flex; min-height:0}
.cmain{flex:1; display:flex; flex-direction:column; min-width:0}

/* ===== lista de membros (direita) ===== */
.members{width:240px; flex:0 0 240px; background:var(--sidebar); border-left:1px solid var(--line); display:flex; flex-direction:column; min-height:0}
.members.hidden{display:none}
.mb-head{padding:16px 16px 8px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--txt3)}
.mb-list{flex:1; overflow-y:auto; padding:0 8px 12px}
.mb-item{display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:8px}
.mb-item:hover{background:var(--hover)}
.mb-item .av{position:relative; width:34px;height:34px;border-radius:50%;color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;flex:0 0 34px}
.mb-item .av .dot{position:absolute; right:-2px; bottom:-2px; width:12px;height:12px;border-radius:50%;background:var(--green);border:3px solid var(--sidebar)}
.mb-item.speaking .av{box-shadow:0 0 0 2px var(--green)}
.mb-item .info{min-width:0; flex:1}
.mb-item .nm{font-size:14px; font-weight:600; color:var(--txt); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; display:flex; align-items:center; gap:5px}
.mb-item .nm .crown{color:var(--yellow); width:13px;height:13px;flex:0 0 13px}
.mb-item .st{font-size:12px; color:var(--txt3); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; display:flex; align-items:center; gap:4px}
.mb-item .st svg{width:13px;height:13px}
.mb-item .st .live{color:var(--live); font-weight:800; font-size:10px}

/* ===== chatbox: emoji + imagem ===== */
.chatbox{position:relative}
.chatbox .cbtn{color:var(--txt2); padding:8px; border-radius:8px; display:flex; flex:0 0 auto}
.chatbox .cbtn svg{width:22px;height:22px}
.chatbox .cbtn:hover{color:var(--txt)}
.emoji-pop{display:none; position:absolute; bottom:64px; right:20px; width:290px; max-height:230px; overflow-y:auto;
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:10px; box-shadow:var(--shadow); z-index:20;
  grid-template-columns:repeat(7,1fr); gap:2px}
.emoji-pop.open{display:grid}
.emoji-pop button{font-size:22px; padding:5px 0; border-radius:8px; cursor:pointer; line-height:1}
.emoji-pop button:hover{background:var(--hover)}

/* imagem no chat */
.msg .img{margin-top:6px; max-width:min(420px,100%); max-height:320px; border-radius:12px; cursor:pointer; display:block; border:1px solid var(--line)}
.img-viewer{position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.85); display:none; align-items:center; justify-content:center; padding:24px}
.img-viewer.open{display:flex}
.img-viewer img{max-width:100%; max-height:100%; border-radius:8px}

/* AO VIVO pulsando */
@keyframes pulse-live{0%,100%{opacity:1}50%{opacity:.45}}
.vu .st .live, .vtile.is-live .liveb, .vtile .liveb.show, .mb-item .st .live{animation:pulse-live 1.4s ease-in-out infinite}

/* membros no mobile: escondido */
@media (max-width:1000px){ .members{display:none !important} .topbar #btn-members{display:none} }

/* menção (@nome) */
.msg.mention{background:rgba(255,59,59,.08); box-shadow:inset 3px 0 0 var(--brand)}
.msg .txt .ment{background:rgba(255,59,59,.2); color:#ff9a92; border-radius:4px; padding:0 3px; font-weight:600}

/* ===== gestão: criar canal, menus, coroa ===== */
.cat-name{display:flex; align-items:center; justify-content:space-between}
.cat-add{color:var(--txt3); font-size:18px; line-height:1; width:20px; height:20px; border-radius:5px; display:flex; align-items:center; justify-content:center}
.cat-add:hover{color:var(--txt); background:var(--hover)}
.vu .vname .crown{color:var(--yellow); width:12px; height:12px; display:inline-block; vertical-align:-1px; margin-right:3px}
.ctx-menu{position:fixed; z-index:300; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:6px; box-shadow:var(--shadow); min-width:180px; display:flex; flex-direction:column; gap:2px}
.ctx-menu button{display:flex; align-items:center; gap:10px; text-align:left; padding:9px 12px; border-radius:7px; font-size:14px; color:var(--txt); cursor:pointer}
.ctx-menu button svg{width:17px; height:17px; flex:0 0 auto; opacity:.85}
.ctx-menu button:hover{background:var(--hover)}
.ctx-menu button.danger{color:#ff6b6b}
.ctx-menu button.danger:hover{background:rgba(239,68,68,.15)}

/* ver/ocultar a própria tela */
.vtile .see-self{position:absolute; bottom:16px; left:50%; transform:translateX(-50%); background:var(--brandgrad); color:#fff;
  padding:9px 16px; border-radius:10px; font-size:14px; font-weight:700; box-shadow:0 6px 18px rgba(255,59,59,.45); cursor:pointer}
.vtile .see-self:hover{transform:translateX(-50%) translateY(-1px)}
.vtile .hide-self{position:absolute; left:12px; bottom:12px; background:rgba(0,0,0,.6); color:#fff; padding:6px 12px;
  border-radius:9px; font-size:13px; font-weight:600; cursor:pointer; opacity:0; transition:.15s}
.vtile:hover .hide-self{opacity:1}
@media(hover:none){.vtile .hide-self{opacity:.9}}
.vtile .hide-self:hover{background:var(--brand)}

/* setinhas voltar/avançar */
.topbar .nav-btn{color:var(--txt3); padding:5px; border-radius:7px; display:flex; flex:0 0 auto}
.topbar .nav-btn svg{width:20px;height:20px}
.topbar .nav-btn:hover{color:var(--txt); background:var(--hover)}
.topbar .nav-btn.off{opacity:.3; pointer-events:none}

/* ===== Modal (card) ===== */
.modal-ov{position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(0,0,0,.6); backdrop-filter:blur(4px); animation:pop .12s ease}
.modal-card{width:100%; max-width:420px; background:var(--panel); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.6); overflow:hidden}
.modal-h{display:flex; align-items:center; justify-content:space-between; padding:18px 20px 6px; font-size:19px; font-weight:800}
.modal-h .modal-x{color:var(--txt2); padding:4px; border-radius:8px; display:flex}
.modal-h .modal-x svg{width:20px;height:20px}
.modal-h .modal-x:hover{background:var(--hover); color:var(--txt)}
.modal-body{padding:6px 20px 8px}
.modal-l{display:block; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--txt2); margin:12px 0 8px}
.modal-i{width:100%; padding:12px 14px; background:var(--rail); border:1px solid var(--line); color:var(--txt); border-radius:10px; font-size:15px; outline:none}
.modal-i:focus{border-color:var(--brand); box-shadow:0 0 0 3px rgba(255,59,59,.2)}
.modal-tipo{display:flex; gap:10px}
.modal-tipo .mt{flex:1; padding:12px; background:var(--card); border:2px solid transparent; border-radius:10px; color:var(--txt); font-size:14px; font-weight:600; cursor:pointer}
.modal-tipo .mt:hover{background:var(--active)}
.modal-tipo .mt.on{border-color:var(--brand); background:rgba(255,59,59,.12)}
.modal-hint,.modal-p{font-size:13px; color:var(--txt2); margin-top:12px; line-height:1.5}
.modal-p{font-size:15px; color:var(--txt)}
.modal-foot{display:flex; justify-content:flex-end; gap:10px; padding:12px 20px 18px; margin-top:6px}
.modal-btn{padding:11px 18px; border-radius:10px; font-size:14px; font-weight:700; cursor:pointer; background:var(--card); color:var(--txt)}
.modal-btn:hover{background:var(--active)}
.modal-btn.primary{background:var(--brandgrad); color:#fff; box-shadow:0 6px 16px rgba(255,59,59,.35)}
.modal-btn.danger{background:var(--red); color:#fff}

/* ===== bolinhas de status (valem pra qualquer bolinha: painel de baixo, perfil, membros, topo) ===== */
.st-online{background:var(--green)!important}
.st-idle{background:#f5b301!important}
.st-dnd{background:var(--red)!important}
.st-invisible,.st-offline{background:#747f8d!important}

/* ===== Tela de Configurações ===== */
.settings{position:fixed; inset:0; z-index:500; display:none; background:var(--main)}
.settings.open{display:flex}
.set-side{flex:0 0 240px; background:var(--sidebar); display:flex; justify-content:flex-end; overflow-y:auto}
.set-side-in{width:200px; padding:50px 8px 40px}
.set-cat{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--txt3); padding:6px 10px}
.set-nav{width:100%; display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; color:var(--txt2); font-size:15px; font-weight:600; text-align:left; margin-top:2px; cursor:pointer}
.set-nav svg{width:18px;height:18px}
.set-nav:hover{background:var(--hover); color:var(--txt)}
.set-nav.on{background:var(--active); color:#fff}
.set-main{flex:1; position:relative; overflow-y:auto; padding:50px 40px 60px; max-width:760px}
.set-x{position:absolute; top:26px; right:32px; width:40px; height:40px; border-radius:50%; border:2px solid var(--txt3);
  color:var(--txt2); display:flex; align-items:center; justify-content:center; cursor:pointer}
.set-x svg{width:20px;height:20px}
.set-x:hover{background:var(--hover); color:var(--txt)}

/* ===== Explorar comunidades (diretório de servidores) ===== */
.explore{position:fixed; inset:0; z-index:520; display:none; overflow-y:auto;
  background:radial-gradient(1200px 600px at 50% -10%, #2a2350 0%, transparent 60%), var(--main)}
.explore.open{display:block}
.explore .ex-x{position:fixed; top:26px; right:32px; width:40px; height:40px; border-radius:50%; border:2px solid var(--txt3);
  color:var(--txt2); display:flex; align-items:center; justify-content:center; cursor:pointer; background:rgba(0,0,0,.25); z-index:2}
.explore .ex-x svg{width:20px;height:20px}
.explore .ex-x:hover{background:var(--hover); color:var(--txt)}
.rail-pill.explore-pill,.servers .explore-pill{background:var(--panel); color:#fff; font-size:22px}
.servers .explore-pill{background:var(--panel); color:#fff}
.servers .explore-pill svg{width:24px; height:24px}
.servers .explore-pill:hover{background:#248046; border-radius:16px; color:#fff}
.ex-rank{position:absolute; top:10px; right:10px; z-index:2; background:var(--brand); color:#fff; font-size:10px; font-weight:800;
  letter-spacing:.5px; padding:3px 8px; border-radius:20px; box-shadow:0 4px 12px rgba(255,59,59,.4)}
.ex-head{text-align:center; padding:54px 20px 8px}
.ex-head .ex-logo{width:52px; height:52px; border-radius:16px; margin:0 auto 16px; display:flex; align-items:center; justify-content:center;
  background:var(--brandgrad); box-shadow:0 8px 26px rgba(255,59,59,.35)}
.ex-head .ex-logo svg{width:28px; height:28px; color:#fff}
.ex-head h1{color:#fff; font-size:30px; font-weight:800; letter-spacing:-.5px}
.ex-head p{color:var(--txt2); font-size:15px; margin-top:8px}
.ex-grid{max-width:1120px; margin:26px auto 60px; padding:0 24px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px}
.ex-vazio{grid-column:1/-1; text-align:center; color:var(--txt2); padding:50px 20px; font-size:15px}
.ex-card{position:relative; background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  transition:transform .15s, box-shadow .15s}
.ex-card:hover{transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,.4); border-color:rgba(255,255,255,.14)}
.ex-cap{height:80px; width:100%}
.ex-av{position:absolute; top:52px; left:18px; width:56px; height:56px; border-radius:16px; display:flex; align-items:center;
  justify-content:center; color:#fff; font-weight:800; font-size:24px; border:5px solid var(--panel)}
.ex-body{padding:20px 18px 18px}
.ex-name{color:#fff; font-size:18px; font-weight:700; margin-top:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ex-online{display:flex; align-items:center; gap:7px; color:var(--txt2); font-size:13px; margin-top:8px}
.ex-online .ex-live{width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.ex-enter{width:100%; margin-top:16px; padding:11px; border-radius:10px; background:#4752c4; color:#fff; font-size:14px; font-weight:700; cursor:pointer; border:0; transition:background .15s}
.ex-enter:hover{background:#5865f2}
.ex-enter.atual{background:var(--card); color:var(--green); cursor:default}

/* ===== Início (Amigos + Comunidades) — inline na área central ===== */
.homeview{display:none; flex:1; min-height:0; flex-direction:column; background:var(--main)}
.homeview.on{display:flex}
.members.hidden-home{display:none}
.hv-tabs{display:flex; gap:6px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); flex:0 0 auto}
.hv-tab{display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:9px; background:transparent; color:var(--txt2);
  font-size:14px; font-weight:700; cursor:pointer; border:0}
.hv-tab:hover{background:var(--hover); color:var(--txt)}
.hv-tab.on{background:var(--active); color:#fff}
.hv-tab svg{width:18px; height:18px}
/* separação: no perfil aparece só "Amigos"; na bússola aparece só "Comunidades" */
.homeview.mode-com #hvt-amigos{display:none}
.homeview.mode-amigos #hvt-com{display:none}
@media (max-width:820px){
  .homeview.mode-com #hvt-amigos,
  .homeview.mode-amigos #hvt-com{display:inline-flex}
}
.fr-search span{display:flex; align-items:center; color:var(--txt3)}
.fr-search span svg{width:16px; height:16px}
.fr-btn svg{width:18px; height:18px}
/* card de "criar comunidade" na aba Comunidades */
.ex-card.ex-criar{display:flex; align-items:center; justify-content:center; min-height:190px; cursor:pointer;
  border:2px dashed var(--line); background:transparent}
.ex-card.ex-criar:hover{border-color:var(--brand); background:rgba(255,59,59,.05); transform:translateY(-3px)}
.ex-criar-in{text-align:center; color:var(--txt2); padding:20px}
.ex-criar-in svg{width:34px; height:34px; color:var(--brand)}
.ex-criar-t{font-size:16px; font-weight:800; color:var(--txt); margin-top:8px}
.ex-criar-s{font-size:12.5px; color:var(--txt3); margin-top:3px}
/* seletor Pública/Privada no modal de criar */
.ms-tipo{display:flex; flex-direction:column; gap:9px; margin-top:8px}
.ms-opt{text-align:left; padding:12px 14px; border-radius:11px; background:var(--card); border:2px solid transparent; cursor:pointer}
.ms-opt:hover{border-color:var(--line)}
.ms-opt.on{border-color:var(--brand); background:rgba(255,59,59,.1)}
.ms-opt-t{display:flex; align-items:center; gap:8px; color:var(--txt); font-size:15px; font-weight:700}
.ms-opt-t svg{width:18px; height:18px; color:var(--txt2)}
.ms-opt.on .ms-opt-t svg{color:var(--brand)}
.ms-opt-s{color:var(--txt3); font-size:12.5px; margin-top:4px; line-height:1.4}
.hv-scroll{flex:1; min-height:0; overflow-y:auto; padding:18px 16px 30px}
.hv-pane[hidden]{display:none}
.hv-add{display:flex; gap:10px; margin-bottom:22px}
.hv-add input{flex:1; min-width:0; padding:12px 14px; background:var(--card); border:1px solid var(--line); border-radius:10px; color:var(--txt); font-size:14px}
.hv-add input:focus{border-color:var(--brand); box-shadow:0 0 0 3px rgba(255,59,59,.18)}
.hv-add button{flex:0 0 auto; padding:12px 18px; border-radius:10px; background:var(--brand); color:#fff; font-size:14px; font-weight:700; border:0; cursor:pointer}
.hv-add button:hover{background:var(--brand2)}
/* sub-abas estilo Discord: Disponível / Todos / Adicionar amigo */
.fr-subtabs{display:flex; align-items:center; gap:8px; margin-bottom:18px}
.fr-stab{padding:7px 14px; border-radius:8px; background:transparent; color:var(--txt2); font-size:14px; font-weight:600; border:0; cursor:pointer}
.fr-stab:hover{background:var(--hover); color:var(--txt)}
.fr-stab.on{background:var(--active); color:#fff}
.fr-stab.add{background:var(--green); color:#0b2b17; font-weight:700}
.fr-stab.add:hover{filter:brightness(1.08)}
.fr-stab.add.on{background:var(--green); color:#0b2b17}
.fr-addbox[hidden],.fr-main[hidden]{display:none}
.fr-addbox{padding:4px 2px}
.fr-addttl{font-size:19px; font-weight:800; color:var(--txt); margin-bottom:4px}
.fr-addsub{font-size:13.5px; color:var(--txt2); margin-bottom:16px}
.fr-search{display:flex; align-items:center; gap:8px; background:var(--rail); border:1px solid var(--line); border-radius:9px; padding:0 12px; margin-bottom:16px}
.fr-search span{color:var(--txt3); font-size:13px}
.fr-search input{flex:1; min-width:0; background:transparent; border:0; color:var(--txt); font-size:14px; padding:11px 2px; outline:none}
.fr-count{font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--txt3); margin:2px 2px 8px}
.hv-sec{font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--txt3); margin:6px 2px 8px}
.hv-list{display:flex; flex-direction:column; margin-bottom:20px}
.fr-empty{color:var(--txt3); font-size:13.5px; padding:10px 2px 16px}
.fr-row{display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:11px; border-top:1px solid var(--line)}
.fr-row:first-child{border-top:0}
.fr-row:hover{background:var(--hover)}
.fr-av{position:relative; width:40px; height:40px; flex:0 0 auto; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:16px}
.fr-dot{position:absolute; right:-2px; bottom:-2px; width:13px; height:13px; border-radius:50%; border:3px solid var(--main); background:var(--txt3)}
.fr-dot.st-online{background:var(--green)} .fr-dot.st-idle{background:var(--yellow)} .fr-dot.st-dnd{background:var(--red)} .fr-dot.st-offline{background:#747d8c}
.fr-info{flex:1; min-width:0}
.fr-name{color:var(--txt); font-size:15px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fr-sub{color:var(--txt3); font-size:12.5px}
.fr-acts{display:flex; gap:8px; flex:0 0 auto}
.fr-btn{width:38px; height:38px; border-radius:50%; background:var(--card); border:0; color:var(--txt2); font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center}
.fr-btn:hover{background:var(--active); color:#fff}
.fr-btn.fr-chat:hover{color:var(--green)}
.fr-btn.fr-rm:hover{color:var(--red)}
/* DM (conversa 1:1) */
.dmview{flex:1; min-height:0; display:flex; flex-direction:column}
.dmview[hidden]{display:none}
.dm-head{display:flex; align-items:center; gap:11px; padding:12px 16px; border-bottom:1px solid var(--line); flex:0 0 auto}
.dm-back{width:34px; height:34px; border-radius:8px; background:transparent; border:0; color:var(--txt2); cursor:pointer; display:flex; align-items:center; justify-content:center}
.dm-back svg{width:18px; height:18px}
.dm-back:hover{background:var(--hover); color:var(--txt)}
.dm-av{width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:14px}
.dm-title{font-size:16px; font-weight:800; color:var(--txt)}
.dm-msgs{flex:1; min-height:0; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:8px}
.dm-msg{display:flex; max-width:74%}
.dm-msg.me{align-self:flex-end}
.dm-bubble{padding:9px 13px; border-radius:14px; background:var(--card); color:var(--txt); font-size:14.5px; line-height:1.4; word-break:break-word; white-space:pre-wrap}
.dm-msg.me .dm-bubble{background:var(--brand); color:#fff; border-bottom-right-radius:4px}
.dm-msg:not(.me) .dm-bubble{border-bottom-left-radius:4px}
.dm-inp{display:flex; gap:9px; padding:12px 16px; border-top:1px solid var(--line); flex:0 0 auto}
.dm-inp input{flex:1; min-width:0; padding:12px 14px; background:var(--card); border:1px solid var(--line); border-radius:12px; color:var(--txt); font-size:14.5px}
.dm-inp input:focus{border-color:var(--brand)}
.dm-send{flex:0 0 auto; width:46px; border-radius:12px; background:var(--brand); border:0; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center}
.dm-send svg{width:20px; height:20px}
.dm-send:hover{background:var(--brand2)}
.set-panel h2{font-size:20px; font-weight:800; margin-bottom:20px}
.set-l{display:block; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--txt2); margin:20px 0 8px}
.set-inp,.set-sel{width:100%; padding:11px 13px; background:var(--rail); border:1px solid var(--line); color:var(--txt); border-radius:9px; font-size:15px; outline:none}
.set-inp:focus,.set-sel:focus{border-color:var(--brand)}
.set-sel{cursor:pointer}
.set-row{display:flex; gap:10px}
.set-row .set-inp{flex:1}
.set-btn{padding:11px 18px; border-radius:9px; background:var(--card); color:var(--txt); font-size:14px; font-weight:700; cursor:pointer; white-space:nowrap}
.set-btn:hover{background:var(--active)}
.set-btn.primary{background:var(--brandgrad); color:#fff}
.set-profile{display:flex; align-items:center; gap:16px; background:var(--panel); border-radius:12px; padding:16px; border:1px solid var(--line)}
.set-av{width:70px; height:70px; border-radius:50%; color:#fff; font-weight:800; font-size:30px; display:flex; align-items:center; justify-content:center; flex:0 0 70px}
.set-name-big{font-size:20px; font-weight:800}
.set-sub{font-size:13px; color:var(--txt2); margin-top:2px}
.set-status{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.set-status .ss{display:flex; align-items:center; gap:10px; padding:13px; background:var(--card); border:2px solid transparent; border-radius:10px; color:var(--txt); font-size:15px; font-weight:600; cursor:pointer}
.set-status .ss:hover{background:var(--active)}
.set-status .ss.on{border-color:var(--brand)}
.set-status .ss .d{width:12px; height:12px; border-radius:50%; flex:0 0 12px}
.set-switch{display:flex; align-items:center; gap:11px; margin-top:16px; font-size:14px; color:var(--txt); cursor:pointer}
.set-switch input{width:18px; height:18px; accent-color:var(--brand); flex:0 0 auto; cursor:pointer}
.set-sepl{height:1px; background:var(--line); margin:22px 0}
.set-test{display:flex; align-items:center; gap:14px; margin-top:14px}
.set-meter{flex:1; height:12px; background:var(--rail); border-radius:8px; overflow:hidden}
.set-meter-fill{height:100%; width:0; background:linear-gradient(90deg,var(--green),#f5b301,var(--red)); transition:width .05s}
.set-ptt-row{margin-top:12px; font-size:14px; color:var(--txt2); display:flex; align-items:center; gap:10px}
.set-colors{display:flex; gap:12px; flex-wrap:wrap}
.set-colors .sc{width:52px; height:52px; border-radius:14px; cursor:pointer; border:3px solid transparent; position:relative}
.set-colors .sc.on{border-color:#fff}
.set-colors .sc.on::after{content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800}
@media(max-width:760px){
  /* configurações empilhadas: abas horizontais com rótulo no topo (estilo mobile) */
  .settings{flex-direction:column}
  .set-side{flex:0 0 auto; width:100%; justify-content:flex-start; overflow-x:auto; overflow-y:hidden; border-bottom:1px solid var(--line)}
  .set-side-in{width:100%; padding:54px 12px 10px; display:flex; flex-direction:row; gap:8px}
  .set-cat{display:none}
  .set-nav{width:auto; flex:0 0 auto; margin-top:0; white-space:nowrap; font-size:14px; padding:9px 14px; border-radius:20px; background:var(--card)}
  .set-nav svg{width:18px; height:18px}
  .set-nav.on{background:var(--active); color:#fff}
  .set-main{padding:20px 18px 70px}
}

/* ===== Configurações: colunas + sliders (estilo Discord) ===== */
.set-cols{display:grid; grid-template-columns:1fr 1fr; gap:24px}
@media(max-width:640px){ .set-cols{grid-template-columns:1fr} }
.set-range{width:100%; margin-top:6px; accent-color:var(--brand); cursor:pointer; height:6px}

/* ===== Barra de título customizada (só no exe) ===== */
.titlebar{display:none; position:fixed; top:0; left:0; right:0; height:32px; z-index:9999; background:var(--rail); align-items:center; user-select:none; border-bottom:1px solid var(--line)}
body.electron .titlebar{display:flex}
body.electron #login,body.electron #settings,body.electron #explore{top:32px}
body.electron #app{height:calc(100% - 32px); margin-top:32px}
body.electron .topbar .nav-btn{display:none}
.titlebar .tb-drag{flex:1; height:100%; display:flex; align-items:center; gap:8px; padding-left:12px; font-size:12px; font-weight:700; color:var(--txt2); -webkit-app-region:drag}
.titlebar .tb-ico{display:flex; color:var(--brand)}
.titlebar .tb-ico svg{width:16px; height:16px}
.titlebar .tb-nav{-webkit-app-region:no-drag; width:34px; height:100%; display:flex; align-items:center; justify-content:center; color:var(--txt3)}
.titlebar .tb-nav svg{width:18px; height:18px}
.titlebar .tb-nav:hover{color:var(--txt)}
.titlebar .tb-win{-webkit-app-region:no-drag; width:46px; height:100%; display:flex; align-items:center; justify-content:center; color:var(--txt2)}
.titlebar .tb-win svg{width:12px; height:12px}
.titlebar .tb-win:hover{background:var(--hover); color:var(--txt)}
.titlebar .tb-win.close:hover{background:#e11d1d; color:#fff}

/* ===== Cartão de PERFIL (ver o de alguém) ===== */
.perfil-ov{position:fixed; inset:0; z-index:650; display:none; align-items:center; justify-content:center; padding:20px;
  background:rgba(0,0,0,.6); backdrop-filter:blur(4px)}
.perfil-ov.open{display:flex; animation:pop .14s ease}
.perfil-card{position:relative; width:100%; max-width:400px; background:var(--panel); border:1px solid var(--line);
  border-radius:18px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.6)}
.perfil-x{position:absolute; top:12px; right:12px; z-index:3; width:32px; height:32px; border-radius:50%; background:rgba(0,0,0,.35);
  color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer}
.perfil-x svg{width:18px; height:18px}
.perfil-x:hover{background:rgba(0,0,0,.6)}
.perfil-banner{height:110px; width:100%}
.perfil-av{position:absolute; top:66px; left:20px; width:88px; height:88px; border-radius:50%; border:6px solid var(--panel);
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:36px; background-size:cover}
.perfil-dot{position:absolute; right:2px; bottom:2px; width:24px; height:24px; border-radius:50%;
  border:5px solid var(--panel); background:var(--green); box-sizing:border-box}
.perfil-body{padding:52px 20px 20px}
.perfil-name{font-size:22px; font-weight:800; color:var(--txt)}
.perfil-status{font-size:13px; color:var(--txt2); margin-top:2px}
.perfil-bio{margin-top:14px; padding-top:14px; border-top:1px solid var(--line); color:var(--txt); font-size:14px; line-height:1.5; white-space:pre-wrap; word-break:break-word}
.perfil-sec{margin-top:16px; font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--txt3)}
.perfil-socials{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.perfil-soc{display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border-radius:9px; background:var(--card);
  color:var(--txt); font-size:13px; font-weight:600; text-decoration:none}
.perfil-soc svg{width:15px; height:15px; color:var(--txt2)}
.perfil-soc:hover{background:var(--active); color:#fff}
.perfil-acts{display:flex; gap:10px; margin-top:18px}
.perfil-btn-a{flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px; border-radius:10px;
  background:var(--card); color:var(--txt); font-size:14px; font-weight:700; cursor:pointer}
.perfil-btn-a svg{width:17px; height:17px}
.perfil-btn-a:hover{background:var(--active)}
.perfil-btn-a.primary{background:var(--brand); color:#fff}
/* perfil em tela cheia no celular (estilo Discord mobile) */
@media (max-width:820px){
  .perfil-ov{padding:0; background:var(--main); backdrop-filter:none}
  .perfil-card{max-width:none; width:100%; height:100%; border-radius:0; border:0; box-shadow:none}
  .perfil-banner{height:150px}
  .perfil-av{width:96px; height:96px; top:100px; left:20px}
  .perfil-dot{width:26px; height:26px}
  .perfil-body{padding:88px 20px 28px}
  .perfil-name{font-size:26px}
  .perfil-x{top:16px; left:16px; right:auto; width:40px; height:40px; background:rgba(0,0,0,.45)}
  .perfil-acts{position:sticky; bottom:0; margin-top:24px}
}
.perfil-btn-a.primary:hover{background:var(--brand2)}

/* ===== Editar meu perfil (Configurações) ===== */
.pf-preview{position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--line); margin-bottom:44px}
.pf-banner{height:100px; width:100%; background:var(--brandgrad)}
.pf-av{position:absolute; left:16px; top:56px; width:80px; height:80px; border-radius:50%; border:5px solid var(--panel);
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:32px; background-size:cover; background-position:center}
.pf-imgbtns{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px}
.pf-cores{display:flex; gap:9px; flex-wrap:wrap; margin:4px 0 6px}
.pf-cor{width:30px; height:30px; border-radius:50%; border:3px solid transparent; cursor:pointer}
.pf-cor.on{border-color:#fff; box-shadow:0 0 0 2px var(--brand)}
.pf-soc{display:flex; align-items:center; gap:10px; margin-top:8px}
.pf-soc span{flex:0 0 82px; font-size:13px; color:var(--txt2); font-weight:600}
.pf-soc input{flex:1; min-width:0}
textarea.set-inp{resize:vertical; min-height:60px; font-family:inherit}

/* ===== Amigos: abas de pedido (Pendente/Enviados), Ativos agora, solicitações de mensagem ===== */
.fr-badge{display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; margin-left:3px;
  border-radius:9px; background:var(--red); color:#fff; font-size:11px; font-weight:800; line-height:1; vertical-align:middle}
.fr-badge[hidden]{display:none}   /* o display:inline-flex acima sozinho ignoraria o atributo hidden */
.fr-cols{display:flex; gap:22px; align-items:flex-start}
.fr-left{flex:1; min-width:0}
.fr-active{flex:0 0 300px; width:300px; border-left:1px solid var(--line); padding-left:22px; align-self:stretch}
.fa-ttl{font-size:16px; font-weight:800; color:var(--txt); margin:2px 0 14px}
.fa-list{display:flex; flex-direction:column; gap:3px}
.fa-card{display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:11px; cursor:pointer; background:transparent}
.fa-card:hover{background:var(--hover)}
.fa-av{position:relative; width:38px; height:38px; flex:0 0 auto; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:15px}
.fa-av .fr-dot{border-color:var(--main)}
.fa-info{min-width:0}
.fa-name{color:var(--txt); font-size:14.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fa-sub{color:var(--txt2); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fa-empty{background:var(--rail); border:1px solid var(--line); border-radius:12px; padding:16px 14px}
.fa-empty-t{font-size:14px; font-weight:800; color:var(--txt); margin-bottom:4px}
.fa-empty-s{font-size:12.5px; color:var(--txt3); line-height:1.5}
/* botões aceitar/recusar nas linhas de pedido */
.fr-btn.fr-ok:hover{color:var(--green)}
.fr-btn.fr-no:hover{color:var(--red)}
/* barra "aceitar/ignorar" da solicitação de mensagem no topo do DM */
.dm-banner{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 16px; background:var(--card); border-bottom:1px solid var(--line)}
.dm-banner span{flex:1; min-width:160px; color:var(--txt2); font-size:13.5px}
.dm-banner-acts{display:flex; gap:8px}
.dm-banner .db-ok{padding:8px 16px; border-radius:9px; background:var(--brand); color:#fff; font-weight:700; font-size:13px}
.dm-banner .db-ok:hover{background:var(--brand2)}
.dm-banner .db-no{padding:8px 16px; border-radius:9px; background:var(--card); border:1px solid var(--line); color:var(--txt2); font-weight:700; font-size:13px}
.dm-banner .db-no:hover{color:var(--txt); background:var(--hover)}
/* item na sidebar: "Solicitações de mensagens" */
.hs-nav[hidden]{display:none}   /* .hs-nav tem display:flex, que sozinho ignoraria o atributo hidden */
.hs-reqs{position:relative; justify-content:flex-start}
.hs-reqs .hs-reqs-lbl{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hs-reqs.on{background:var(--active); color:#fff}
.hs-badge{margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--red); color:#fff; font-size:11px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto}
.hs-av .fr-dot{border-color:var(--sidebar)}
/* modal de solicitações de mensagem */
.mreq-list{display:flex; flex-direction:column; gap:2px; max-height:min(60vh,420px); overflow-y:auto}
.mreq{display:flex; align-items:center; gap:12px; padding:9px 6px; border-top:1px solid var(--line)}
.mreq:first-child{border-top:0}
.mreq:hover{background:var(--hover)}
@media (max-width:820px){
  .fr-cols{flex-direction:column}
  .fr-active{flex:1 1 auto; width:100%; border-left:0; border-top:1px solid var(--line); padding-left:0; padding-top:16px; margin-top:6px}
}

/* ===== Popover do usuário (clicar no avatar/nome no canto), estilo Discord ===== */
.userbar{position:relative}
.me-row .who{cursor:pointer; border-radius:8px; padding:2px 4px; margin:-2px -4px}
.me-row .who:hover{background:var(--hover)}
.user-pop{position:absolute; left:8px; right:8px; bottom:66px; z-index:120; display:none;
  background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  box-shadow:0 18px 55px rgba(0,0,0,.6)}
.user-pop.on{display:block; animation:pop .13s ease}
.up-banner{height:54px; background:var(--brandgrad); background-size:cover; background-position:center}
.up-head{display:flex; align-items:flex-end; gap:12px; padding:0 14px; margin-top:-28px}
.up-av{position:relative; width:66px; height:66px; flex:0 0 auto; border-radius:50%; border:5px solid var(--panel);
  background:var(--brand); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:25px;
  background-size:cover; background-position:center}
.up-dot{position:absolute; right:0; bottom:2px; width:16px; height:16px; border-radius:50%; border:4px solid var(--panel); background:var(--txt3)}
.up-dot.st-online{background:var(--green)} .up-dot.st-idle{background:var(--yellow)} .up-dot.st-dnd{background:var(--red)} .up-dot.st-invisible{background:#747d8c}
.up-who{padding-bottom:7px; min-width:0}
.up-name{font-size:17px; font-weight:800; color:var(--txt); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.up-tag{font-size:12px; color:var(--txt3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.up-custom{display:flex; align-items:center; gap:8px; margin:12px 14px 4px; padding:0 10px; background:var(--rail); border:1px solid var(--line); border-radius:9px}
.up-cico{color:var(--txt3); display:flex} .up-cico svg{width:16px;height:16px}
.up-custom input{flex:1; min-width:0; background:transparent; border:0; color:var(--txt); font-size:13.5px; padding:10px 2px; outline:none}
.up-card{margin:8px 10px; background:var(--rail); border:1px solid var(--line); border-radius:10px; padding:6px}
.up-lbl{font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--txt3); padding:6px 8px 4px}
.up-item{display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border-radius:8px; background:transparent; color:var(--txt); font-size:14px; font-weight:600; text-align:left; cursor:pointer; border:0}
.up-item svg{width:18px;height:18px; color:var(--txt2); flex:0 0 auto}
.up-item:hover{background:var(--hover)}
.up-st{display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border-radius:8px; background:transparent; color:var(--txt); font-size:14px; font-weight:600; text-align:left; cursor:pointer; border:0}
.up-st:hover{background:var(--hover)}
.up-st.on{background:var(--active)}
.up-st .d{width:11px; height:11px; border-radius:50%; background:var(--txt3); flex:0 0 auto}
.up-st .d.st-online{background:var(--green)} .up-st .d.st-idle{background:var(--yellow)} .up-st .d.st-dnd{background:var(--red)} .up-st .d.st-invisible{background:#747d8c}
/* ===== bolinhas de status (regras específicas mescladas da sessão Config do Servidor) ===== */
.dot.st-online,.d.st-online{background:var(--green)!important}
.dot.st-idle,.d.st-idle{background:#f5b301!important}
.dot.st-dnd,.d.st-dnd{background:var(--red)!important}
.dot.st-invisible,.d.st-invisible{background:#747f8d!important}

/* ==================== POLIMENTO VISUAL "premium" (2026-08-29) — só estética, append-only, mantém o vermelho ==================== */
:root{
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow-pop:0 18px 50px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35);
  --glass:rgba(25,27,33,.82);
}

/* 1) transições suaves e consistentes onde faltava */
.chan,.mb-item,.hs-dm,.fr-row,.fa-card,.up-item,.up-st,.ss,.set-nav,.fr-stab,.hv-tab,
.modal-btn,.cbtn,.send,.dm-send,.mc,.vb,.tb-btn,.nav-btn,.fr-btn,.ex-enter,.ss{
  transition:background .16s var(--ease), color .16s var(--ease), transform .12s var(--ease),
             box-shadow .16s var(--ease), border-color .16s var(--ease), filter .16s var(--ease);
}

/* 2) animação de entrada elegante (fade + subir + leve zoom) nos menus/popovers/modais */
@keyframes rise{from{opacity:0; transform:translateY(10px) scale(.97)} to{opacity:1; transform:none}}
@keyframes fadein{from{opacity:0} to{opacity:1}}
.user-pop.on,.ctx-menu,.mic-pop.on,.spk-pop.on,.settings-pop.open,.emoji-pop.open,.modal-card{
  animation:rise .17s var(--ease);
}
.modal-ov{ animation:fadein .16s var(--ease) }

/* 3) vidro fosco + sombra profunda nos popovers/menus (cara de app premium) */
.user-pop,.ctx-menu,.mic-pop,.spk-pop,.modal-card{
  background:var(--glass); backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:var(--shadow-pop);
}

/* 4) profundidade entre as colunas */
.sidebar{ box-shadow:1px 0 0 var(--line) }
.members{ box-shadow:-1px 0 0 var(--line) }
.topbar{ box-shadow:0 1px 0 var(--line), 0 6px 16px rgba(0,0,0,.18); position:relative; z-index:5 }

/* 5) barra de servidores: leve gradiente + brilho no ativo */
.servers{ background:linear-gradient(180deg,#0e0f14,var(--rail) 60%) }
.servers .pill{ transition:border-radius .2s var(--ease), transform .12s var(--ease), box-shadow .2s var(--ease) }
.servers .pill:hover{ transform:translateY(-2px) }
.servers .pill.brand.active,.servers .pill.profile-btn.active{ box-shadow:0 8px 22px rgba(255,59,59,.4) }

/* 6) mensagens do chat realçam ao passar o mouse (igual Discord) */
.messages .msg{ border-radius:7px; transition:background .12s var(--ease) }
.messages .msg:hover{ background:rgba(255,255,255,.035) }
.messages .msg.mention{ background:rgba(255,59,59,.08) }

/* 7) avatares com aro sutil (dá acabamento) */
.mb-item .av,.messages .msg .av,.hs-av,.fr-av,.fa-av,.vu .av{ box-shadow:0 0 0 1px rgba(0,0,0,.3) }

/* 8) inputs com brilho de foco vermelho suave */
.chatbox .inp:focus-within{ box-shadow:0 0 0 3px rgba(255,59,59,.16); border-color:var(--brand) }

/* 9) botões principais sobem levemente no hover */
.modal-btn.primary:hover,.send:hover,.dm-send:hover,#btn-entrar:hover{ transform:translateY(-1px); filter:brightness(1.05) }
.fr-btn:hover{ transform:translateY(-1px) }

/* 10) rolagem mais fina e discreta (aparece no hover) */
::-webkit-scrollbar{ width:10px; height:10px }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.06); border:2px solid transparent; background-clip:padding-box; border-radius:10px }
:hover::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.16); background-clip:padding-box }

/* 11) seleção de texto vermelha + itens de canal com transição de indicador */
::selection{ background:rgba(255,59,59,.32); color:#fff }
.chan.active::before,.chan::before{ transition:height .16s var(--ease), opacity .16s var(--ease) }
/* mobile: abas de amigos deslizáveis (não cortam em telas estreitas) */
@media (max-width:820px){
  .fr-subtabs{overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none}
  .fr-subtabs::-webkit-scrollbar{display:none}
  .fr-subtabs .fr-stab{flex:0 0 auto}
}
/* ==================== ANIMAÇÃO EM TODOS OS BOTÕES (hover + feedback de clique) 2026-08-30 ==================== */
button{ transition:transform .1s var(--ease,ease), filter .14s ease, background .16s ease, color .16s ease, box-shadow .16s ease }
/* todo botão "afunda" ao ser clicado (feedback tátil, igual Discord) */
button:active{ transform:scale(.93) }
/* botões com fundo colorido: brilho no hover, afunda + escurece no clique */
#btn-entrar:hover,.modal-btn.primary:hover,.send:hover,.dm-send:hover,.hv-add button:hover,.ex-enter:hover,.db-ok:hover,.fr-stab.add:hover,.set-btn.primary:hover{ filter:brightness(1.08) }
#btn-entrar:active,.modal-btn:active,.send:active,.dm-send:active,.hv-add button:active,.ex-enter:active,.db-ok:active,.fr-stab.add:active{ transform:scale(.96); filter:brightness(.92) }
/* botões de ícone (mic, fone, engrenagem, enviar, voltar/avançar) dão um "pop" no hover */
.cbtn:hover,.mc:hover,.tb-btn:hover,.nav-btn:hover,.fr-btn:hover,.dm-back:hover,.set-x:hover,.ex-x:hover{ transform:translateY(-1px) }
.cbtn:active,.mc:active,.tb-btn:active,.nav-btn:active,.fr-btn:active{ transform:scale(.88) }
/* ⚙️ engrenagem "Configurações" gira ao passar o mouse (igual Discord) */
@keyframes girar-engrenagem{ from{transform:rotate(0)} to{transform:rotate(360deg)} }
#vc-gear svg{ transition:transform .3s var(--ease,ease); transform-origin:50% 50% }
#vc-gear:hover{ transform:none }            /* não levanta o botão; só a engrenagem gira */
#vc-gear:hover svg{ animation:girar-engrenagem 2s linear infinite }

/* ==================== EFEITOS DE PERFIL (cosméticos animados, grátis) 2026-08-30 ==================== */
/* chips de escolha no editor de perfil */
.pf-efeitos{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px}
.pf-fx{padding:8px 14px; border-radius:9px; background:var(--card); border:1px solid var(--line); color:var(--txt2); font-size:13px; font-weight:600; cursor:pointer}
.pf-fx:hover{background:var(--hover); color:var(--txt)}
.pf-fx.on{background:var(--brand); border-color:var(--brand); color:#fff}
/* containers que exibem efeito precisam recortar as partículas */
#pf-preview{position:relative; overflow:hidden}
.perfil-card{overflow:hidden}
.perfil-av,.perfil-body,.perfil-x{position:relative; z-index:6}
/* overlay de partículas */
.fx{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:5; border-radius:inherit}
.fx i{position:absolute; top:-12%; display:block; will-change:top,transform,opacity}
@keyframes fx-fall{ 0%{top:-12%; opacity:0} 8%{opacity:1} 92%{opacity:1} 100%{top:112%; opacity:0} }
@keyframes fx-rise{ 0%{top:112%; opacity:0} 8%{opacity:1} 92%{opacity:1} 100%{top:-12%; opacity:0} }
@keyframes fx-twinkle{ 0%,100%{opacity:0; transform:scale(.3)} 50%{opacity:1; transform:scale(1)} }
@keyframes fx-aurora{ 0%,100%{opacity:.5; transform:translateX(-4%)} 50%{opacity:.95; transform:translateX(4%)} }
.fx-petalas i{width:9px; height:9px; background:radial-gradient(circle at 30% 30%,#ffd1e8,#ff5aa0); border-radius:60% 0 60% 0; animation:fx-fall linear infinite}
.fx-neve i{width:6px; height:6px; background:#fff; border-radius:50%; box-shadow:0 0 6px rgba(255,255,255,.85); animation:fx-fall linear infinite}
.fx-confete i{width:7px; height:11px; border-radius:2px; animation:fx-fall linear infinite}
.fx-confete i:nth-child(3n){background:#ff5a4d} .fx-confete i:nth-child(3n+1){background:#ffd93b} .fx-confete i:nth-child(3n+2){background:#4dd4ff}
.fx-brasas i{width:6px; height:6px; border-radius:50%; background:radial-gradient(circle,#ffd27a,#ff5a1f); box-shadow:0 0 8px #ff7a1f; animation:fx-rise linear infinite}
.fx-bolhas i{width:12px; height:12px; border-radius:50%; background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.5),rgba(120,200,255,.12)); border:1px solid rgba(255,255,255,.22); animation:fx-rise linear infinite}
.fx-coracoes i{animation:fx-rise linear infinite}
.fx-coracoes i::before{content:"\2764"; position:absolute; font-size:13px; color:var(--brand); text-shadow:0 0 6px rgba(255,59,59,.6)}
.fx-brilhos i{width:5px; height:5px; border-radius:50%; background:#fff; box-shadow:0 0 8px #fff,0 0 16px var(--brand); animation:fx-twinkle ease-in-out infinite}
.fx-aurora{background:linear-gradient(120deg,rgba(45,224,200,.16),rgba(157,123,255,.16),rgba(255,111,216,.16)); animation:fx-aurora 7s ease-in-out infinite; mix-blend-mode:screen}