:root{--bg:#000;--tx:#F5F5F5;--sub:#A8A8A8;--linha:#262626;--btn:#262626;--azul:#0095F6;--ouro:#EACB7D;--verm:#FF3040;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;background:#0b0f14;color:var(--tx);font:14px/1.35 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--azul);outline-offset:2px;border-radius:6px}
img{display:block}
[tabindex="-1"]:focus{outline:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pular{position:absolute;left:-999px;top:8px;background:#fff;color:#000;padding:8px 12px;border-radius:8px;z-index:20}.pular:focus{left:8px}
.ic{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ic.sm{width:18px;height:18px}

/* palco: celular no desktop, tela cheia no celular */
.palco{min-height:100vh;display:flex;gap:56px;align-items:flex-start;justify-content:center;padding:40px 16px}
.cel{width:400px;height:860px;max-height:calc(100vh - 80px);background:var(--bg);border-radius:46px;border:10px solid #1c1c1e;box-shadow:0 30px 90px rgba(0,0,0,.6);overflow:hidden;position:relative;display:flex;flex-direction:column;flex:none}
@media (max-width:820px){
  .palco{padding:0;display:block}
  .cel{width:100%;height:100vh;height:100dvh;max-height:none;border:0;border-radius:0;box-shadow:none}
  .notas{max-height:none;overflow:visible;padding:28px 16px calc(40px + env(safe-area-inset-bottom));max-width:none}
  .alt-itens img{width:calc((100vw - 52px) / 3);height:auto;aspect-ratio:4/5}
}
.rola{overflow-y:auto;flex:1;scrollbar-width:none;overscroll-behavior:contain;padding-top:env(safe-area-inset-top)}.rola::-webkit-scrollbar{display:none}
.topo{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 6px}
.topo h1{margin:0;font-size:20px;display:flex;align-items:center;gap:4px}.topo-acoes{display:flex;gap:20px}
.cab{display:flex;align-items:center;gap:22px;padding:8px 16px}
.av{width:86px;height:86px;border-radius:50%;padding:3px;background:conic-gradient(#F9CE34,#EE2A7B,#6228D7,#F9CE34);flex:none}
.av.visto{background:#3a3a3a}
.av img{width:100%;height:100%;border-radius:50%;border:3px solid #000;object-fit:cover}
.num{display:flex;flex:1;justify-content:space-around;text-align:center;margin:0}
.num div{display:flex;flex-direction:column-reverse}.num dt{font-size:13px}.num dd{margin:0;font-weight:700;font-size:17px;font-variant-numeric:tabular-nums}
.bio{padding:6px 16px 0}.bio h2{font-size:14px;margin:0}.bio p{margin:2px 0;white-space:pre-line;overflow-wrap:anywhere}
.link-bio{color:#E0F1FF;text-decoration:none;font-weight:600}.link-bio:hover{text-decoration:underline}
.seg{color:var(--sub);font-size:12.5px;margin-top:8px!important}.seg b{color:var(--tx);font-weight:600}
.btns{display:flex;gap:6px;padding:12px 16px}
.btn{flex:1;background:var(--btn);border-radius:8px;text-align:center;padding:8px 0;font-weight:600;transition:background-color .15s,filter .15s}
.btn:hover{filter:brightness(1.15)}.btn.azul{background:var(--azul)}.btn.azul[aria-pressed=true]{background:var(--btn)}
.dest{display:flex;gap:16px;overflow-x:auto;padding:8px 16px 14px;scrollbar-width:none;overscroll-behavior-x:contain}.dest::-webkit-scrollbar{display:none}
.dest button{flex:none;width:68px;text-align:center;font-size:12px;display:flex;flex-direction:column;align-items:center;gap:5px}
.dest img{width:66px;height:66px;border-radius:50%;object-fit:cover;border:2px solid #3a3a3a;padding:2px;background:#000;transition:transform .15s}
.dest button:hover img{transform:scale(1.04)}
.abas{display:flex;border-top:1px solid var(--linha)}
.abas button{flex:1;display:flex;justify-content:center;padding:10px 0;opacity:.45;border-top:1px solid transparent;margin-top:-1px}
.abas button[aria-selected=true]{opacity:1;border-top-color:#fff}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;min-height:240px}
.grid button{position:relative;aspect-ratio:4/5;background:#111;overflow:hidden}
.grid img{width:100%;height:100%;object-fit:cover;transition:opacity .15s}.grid button:hover img{opacity:.85}
.grid svg{position:absolute;top:7px;right:7px;width:18px;height:18px;fill:#fff;filter:drop-shadow(0 0 3px rgba(0,0,0,.6))}
.grid svg.fix{left:7px;right:auto}
.vazio{grid-column:1/-1;text-align:center;color:var(--sub);padding:48px 24px}.vazio b{display:block;color:var(--tx);font-size:20px;margin-bottom:6px}
.barra{display:flex;justify-content:space-around;align-items:center;padding:12px 0 calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--linha);background:#000}
.barra img{border-radius:50%;border:2px solid #fff}

/* post */
.tela{position:absolute;inset:0;background:#000;display:flex;flex-direction:column;z-index:5;overscroll-behavior:contain}
.tela[hidden],.folha[hidden],.story[hidden]{display:none}
.mtopo{display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 12px 10px;border-bottom:1px solid var(--linha)}
.mtopo img{border-radius:50%}.voltar{padding:4px}
.post-rola{overflow-y:auto;flex:1;scrollbar-width:none}.post-rola::-webkit-scrollbar{display:none}
.car{position:relative;aspect-ratio:4/5;background:#111;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.trilho{display:flex;height:100%;transition:transform .32s cubic-bezier(.2,.8,.2,1);will-change:transform}
.trilho.arrastando{transition:none}
.trilho img{width:100%;height:100%;flex:none;object-fit:cover;-webkit-user-drag:none;pointer-events:none}
.cont{position:absolute;top:12px;right:12px;background:rgba(0,0,0,.65);border-radius:12px;padding:3px 9px;font-size:12px;font-variant-numeric:tabular-nums}
.seta{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.88);color:#000;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;line-height:1;transition:opacity .15s}
.seta:hover{background:#fff}.seta.e{left:10px}.seta.d{right:10px}.seta[hidden]{display:none}
@media (pointer:coarse){.seta{opacity:.75}}
.coracao-grande{position:absolute;left:50%;top:50%;width:110px;height:110px;margin:-55px 0 0 -55px;fill:#fff;opacity:0;transform:scale(.4);pointer-events:none;filter:drop-shadow(0 4px 18px rgba(0,0,0,.4))}
.coracao-grande.anima{animation:pulso .8s ease-out}
@keyframes pulso{0%{opacity:0;transform:scale(.4)}15%{opacity:.95;transform:scale(1.15)}30%{transform:scale(.95)}45%{transform:scale(1)}80%{opacity:.95}100%{opacity:0;transform:scale(1)}}
.acoes{display:flex;align-items:center;gap:14px;padding:10px 14px 4px;position:relative}
.acao svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linejoin:round;stroke-linecap:round;transition:transform .15s}
.acao:hover svg{opacity:.7}.acao:active svg{transform:scale(.88)}
#a-curtir[aria-pressed=true] svg{fill:var(--verm);stroke:var(--verm)}
#a-curtir.bate svg{animation:bate .35s ease-out}
@keyframes bate{40%{transform:scale(1.25)}100%{transform:scale(1)}}
.salvar{margin-left:auto}.salvar[aria-pressed=true] svg{fill:#fff}
.pontos{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:4px}
.pontos i{width:6px;height:6px;border-radius:50%;background:#555;transition:background-color .15s}.pontos i.on{background:var(--azul)}
.curtidas{margin:4px 14px;font-weight:600;min-height:19px}
.leg{margin:2px 14px 6px;white-space:pre-line;overflow-wrap:anywhere}.leg.curta #leg{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.leg.curta{display:block}.mais{color:var(--sub)}.mais[hidden]{display:none}
.ver-com{color:var(--sub);margin:2px 14px 24px;text-align:left}

/* comentários */
.folha{position:absolute;inset:0;z-index:7;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;overscroll-behavior:contain}
.folha-in{width:100%;max-height:75%;background:#262626;border-radius:16px 16px 0 0;display:flex;flex-direction:column;animation:sobe .25s ease-out}
@keyframes sobe{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.pega{width:40px;height:4px;border-radius:2px;background:#555;margin:8px auto 0}
.folha header{display:flex;align-items:center;justify-content:center;position:relative;padding:10px 16px;border-bottom:1px solid #363636}
.folha h3{margin:0;font-size:15px}.fechar-x{position:absolute;right:12px;font-size:26px;line-height:1;padding:0 6px}
.lista{list-style:none;margin:0;padding:8px 16px;overflow-y:auto;flex:1;min-height:120px}
.lista li{display:flex;gap:10px;padding:8px 0}.lista img{width:32px;height:32px;border-radius:50%;flex:none}
.lista .txt{flex:1;min-width:0;overflow-wrap:anywhere}.lista small{display:block;color:var(--sub);margin-top:2px}
.lista .rem{color:var(--sub);font-size:12px;margin-left:8px}.lista .rem:hover{color:var(--tx)}
.lista .vazio-c{color:var(--sub);text-align:center;padding:30px 0;display:block}
.novo{display:flex;align-items:center;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));border-top:1px solid #363636}
.novo img{border-radius:50%}
.novo input{flex:1;min-width:0;background:transparent;border:1px solid #444;border-radius:22px;padding:10px 14px;color:var(--tx);font-size:16px}
.novo button{color:var(--azul);font-weight:600}.novo button:disabled{opacity:.4;cursor:default}

/* stories */
.story{position:absolute;inset:0;background:#000;z-index:9;overscroll-behavior:contain;touch-action:none}
.sf{width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.barras{position:absolute;top:calc(10px + env(safe-area-inset-top));left:10px;right:10px;display:flex;gap:4px;z-index:2}
.barras i{flex:1;height:2.5px;background:rgba(255,255,255,.35);border-radius:2px;overflow:hidden}.barras i b{display:block;height:100%;width:0;background:#fff}
.sinfo{position:absolute;top:calc(22px + env(safe-area-inset-top));left:12px;right:8px;display:flex;align-items:center;gap:8px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.6);z-index:3}
.sinfo img{border-radius:50%}.sinfo small{color:#ddd;font-weight:400}.sinfo #pausa{margin-left:auto}
.sbtn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:28px;line-height:1}
.sbtn svg{width:20px;height:20px;fill:#fff}
.toque{position:absolute;top:70px;bottom:0;width:35%;z-index:1}.toque.e{left:0}.toque.d{right:0;width:65%}
.toque:focus-visible{outline-offset:-4px}

.toast{position:absolute;left:50%;top:calc(64px + env(safe-area-inset-top));transform:translate(-50%,-12px);background:#fff;color:#000;padding:10px 16px;border-radius:10px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:12;white-space:nowrap}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* notas no desktop */
.notas{max-width:420px;color:#c9ccd1;padding-top:8px}
.notas .selo{color:var(--ouro);font-size:13px;margin:0}
.notas h2{font:400 34px/1.1 Georgia,"Times New Roman",serif;color:var(--ouro);margin:8px 0 14px;text-wrap:balance}
.notas h3{font-size:15px;color:#fff;margin:22px 0 6px}.notas p,.notas li{font-size:14px;line-height:1.55}.notas ul{padding-left:18px;margin:6px 0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

.av-voce{width:32px;height:32px;border-radius:50%;flex:none;background:#3a3a3a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a8a8a8'%3E%3Ccircle cx='12' cy='9' r='4'/%3E%3Cpath d='M4 21c1-5 4.5-7 8-7s7 2 8 7z'/%3E%3C/svg%3E") center/70% no-repeat}

@media (max-width:820px) and (min-aspect-ratio:10/16){.sf{object-fit:contain}}

/* comentário em áudio */
.mic,.g-lixo,.g-enviar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;transition:background-color .15s,transform .15s}
.mic svg,.g-lixo svg,.g-enviar svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mic:hover,.g-lixo:hover{background:#363636}.mic:active,.g-enviar:active{transform:scale(.92)}
.mic[hidden],#publicar[hidden],.novo[hidden]{display:none}
.gravando{display:flex;align-items:center;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));border-top:1px solid #363636;background:#262626}
.gravando[hidden]{display:none}
.g-ponto{width:10px;height:10px;border-radius:50%;background:var(--verm);flex:none;animation:pisca 1s infinite}
@keyframes pisca{50%{opacity:.25}}
.g-tempo{font-variant-numeric:tabular-nums;min-width:38px;flex:none}
.g-onda{flex:1;min-width:0;height:36px}
.g-enviar{background:var(--azul)}.g-enviar:hover{filter:brightness(1.1)}
.audio{display:flex;align-items:center;gap:10px;margin-top:6px;background:#363636;border-radius:20px;padding:6px 12px 6px 6px;max-width:260px}
.audio button{width:30px;height:30px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.audio button svg{width:14px;height:14px;fill:#000}
.audio .trilha{flex:1;height:3px;border-radius:2px;background:#555;position:relative;overflow:hidden;cursor:pointer}
.audio .trilha i{position:absolute;inset:0 auto 0 0;width:0;background:#fff}
.audio small{margin:0!important;font-variant-numeric:tabular-nums;color:#ddd!important}

/* dica de primeira visita: comentar e gravar áudio */
.post-rola{position:relative}
.dica{position:absolute;left:12px;right:12px;z-index:4;background:#fff;color:#111;border-radius:14px;padding:14px 14px 12px;box-shadow:0 12px 40px rgba(0,0,0,.55);animation:dicaEntra .28s ease-out;transform-origin:52px 100%}
.dica[hidden]{display:none}
.dica::after{content:"";position:absolute;bottom:-7px;left:var(--seta,46px);width:14px;height:14px;background:#fff;transform:rotate(45deg);border-radius:2px}
.dica-tit{margin:0 0 4px;font-weight:700;font-size:15px}
.dica-txt{margin:0;color:#444;line-height:1.4}
.dica-bts{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.dica-bts button{padding:8px 14px;border-radius:8px;font-weight:600;color:#111;background:#efefef;transition:filter .15s}
.dica-bts button:hover{filter:brightness(.95)}.dica-bts .azul{background:var(--azul);color:#fff}
.dica-bts button:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
#a-comentar.realce svg{animation:realce 1.4s ease-in-out infinite}
@keyframes dicaEntra{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@keyframes realce{50%{transform:scale(1.18)}}

/* capas alternativas no painel */
.alt-linha{margin:14px 0 4px}.alt-linha p{margin:0 0 8px;font-size:13px}
.alt-itens{display:flex;gap:10px}
.alt-itens a{display:flex;flex-direction:column;align-items:center;gap:6px;color:#c9ccd1;text-decoration:none;font-size:12px}
.alt-itens img{width:108px;height:135px;object-fit:cover;border-radius:8px;border:1px solid #2a2f36;transition:transform .15s,border-color .15s}
.alt-itens a:hover img{transform:translateY(-2px);border-color:var(--ouro)}
.notas{max-height:calc(100vh - 80px);overflow-y:auto;scrollbar-width:thin}