/* ============ Comunidade Diabetes Tipo 1 — estilos (visual Instagram) ============ */
:root{
  --azul:#1f6feb; --azul-esc:#1a5fca; --verde:#2ea043; --amarelo:#d29922;
  --vermelho:#ed4956;                 /* vermelho do coração do Instagram */
  --fundo:#fafafa; --card:#ffffff; --texto:#131313; --cinza:#8e8e8e;
  --borda:#dbdbdb; --sombra:0 1px 2px rgba(0,0,0,.04);
  --raio:12px;
  --grad-story:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  --topo-h:54px; --tab-h:52px;
  --max:614px;                        /* largura da coluna do feed no Instagram */
}
@media (prefers-color-scheme: dark){
  :root{ --fundo:#000000; --card:#000000; --texto:#f5f5f5; --cinza:#a8a8a8;
         --borda:#262626; --sombra:none; }
}
*{box-sizing:border-box;margin:0;padding:0}
/* O atributo hidden precisa vencer qualquer display: das regras abaixo
   (.auth, .form-linha etc. usam display:flex e anulariam o hidden). */
[hidden]{display:none!important}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
     background:var(--fundo);color:var(--texto);line-height:1.45;
     -webkit-tap-highlight-color:transparent;overflow-x:hidden}
input,select,textarea,button{font:inherit;color:inherit}
a{color:var(--azul);text-decoration:none}
img{max-width:100%}
svg.ic{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;
       stroke-linecap:round;stroke-linejoin:round;display:block}

/* ------------------------- Auth ------------------------- */
.auth{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:20px}
.auth-card{background:var(--card);border:1px solid var(--borda);border-radius:var(--raio);
           box-shadow:var(--sombra);padding:32px 28px;width:100%;max-width:380px}
.logo{font-size:1.7rem;line-height:1.15;text-align:center;margin-bottom:24px;color:var(--azul);font-weight:700}
.logo span{display:block;font-size:.95rem;color:var(--cinza);font-weight:500;margin-top:2px}
.auth-card h2{margin-bottom:16px;font-size:1.1rem}
.auth-card input,.auth-card select{width:100%;padding:12px;margin-bottom:10px;border:1px solid var(--borda);
           border-radius:8px;background:var(--fundo);font-size:.95rem}
.troca{margin-top:18px;text-align:center;color:var(--cinza);font-size:.88rem}

/* ------------------------- Botões ------------------------- */
.btn{width:100%;padding:11px;border:none;border-radius:8px;background:var(--borda);
     cursor:pointer;font-weight:600;font-size:.92rem}
.btn.primary{background:var(--azul);color:#fff}
.btn.primary:active{background:var(--azul-esc)}
.btn.primary:disabled{opacity:.5;cursor:not-allowed}
.btn.sec{background:transparent;border:1px solid var(--borda);width:auto;padding:9px 16px}
.btn.perigo{background:var(--vermelho);color:#fff;width:auto;padding:9px 16px}

/* ------------------------- App shell ------------------------- */
.topo{position:sticky;top:0;z-index:30;background:var(--card);border-bottom:1px solid var(--borda);
      display:flex;align-items:center;justify-content:space-between;gap:10px;
      height:calc(var(--topo-h) + env(safe-area-inset-top));
      padding:0 14px;padding-top:env(safe-area-inset-top)}
.topo strong{color:var(--texto);font-size:1.15rem;font-weight:700;letter-spacing:-.3px}
.topo-acoes{display:flex;align-items:center;gap:14px}
.icone-btn{background:none;border:none;color:var(--texto);cursor:pointer;display:flex;padding:2px}
.perfil-sel{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--cinza)}
.perfil-sel select{padding:5px 8px;border:1px solid var(--borda);border-radius:8px;
                   background:var(--fundo);max-width:130px}
.conteudo{max-width:var(--max);margin:0 auto;
          padding:12px 12px calc(var(--tab-h) + 28px + env(safe-area-inset-bottom))}

.tabbar{position:fixed;bottom:0;left:0;right:0;z-index:30;background:var(--card);
        border-top:1px solid var(--borda);display:flex;justify-content:space-around;
        height:calc(var(--tab-h) + env(safe-area-inset-bottom));
        padding-bottom:env(safe-area-inset-bottom)}
.tab{background:none;border:none;display:flex;flex-direction:column;align-items:center;
     justify-content:center;gap:3px;color:var(--cinza);cursor:pointer;flex:1;padding:0}
.tab span{font-size:.6rem;font-weight:500}
.tab.ativo{color:var(--texto)}
.tab.ativo .ic{stroke-width:2.4}

/* ------------------------- STORIES ------------------------- */
.stories-bar{display:flex;gap:14px;overflow-x:auto;padding:12px 12px 14px;margin:0 -12px 4px;
             background:var(--card);border-bottom:1px solid var(--borda);
             scrollbar-width:none;-webkit-overflow-scrolling:touch}
.stories-bar::-webkit-scrollbar{display:none}
.story-item{background:none;border:none;cursor:pointer;display:flex;flex-direction:column;
            align-items:center;gap:5px;flex:0 0 auto;width:70px}
.story-ring{width:64px;height:64px;border-radius:50%;padding:2.5px;background:var(--grad-story);
            display:flex;align-items:center;justify-content:center}
.story-ring.visto{background:var(--borda)}
.story-ring .avatar{width:100%;height:100%;border:2.5px solid var(--card);font-size:1.1rem}
.story-item .nome{font-size:.68rem;color:var(--texto);max-width:70px;overflow:hidden;
                  text-overflow:ellipsis;white-space:nowrap}
.story-add .story-ring{background:none;padding:0;position:relative;border:1px solid var(--borda)}
.story-add .mais{position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;
                 background:var(--azul);color:#fff;border:2.5px solid var(--card);
                 display:flex;align-items:center;justify-content:center;font-size:.95rem;
                 font-weight:700;line-height:1}

/* visualizador de story em tela cheia */
.story-viewer{position:fixed;inset:0;z-index:90;background:#000;display:flex;
              flex-direction:column;align-items:center;justify-content:center}
.story-viewer img{max-width:100%;max-height:100%;object-fit:contain}
.sv-topo{position:absolute;top:0;left:0;right:0;padding:14px;
         padding-top:calc(22px + env(safe-area-inset-top));
         display:flex;align-items:center;gap:10px;color:#fff;z-index:4;
         background:linear-gradient(rgba(0,0,0,.6),transparent)}
.sv-topo .avatar{width:32px;height:32px;font-size:.8rem}
.sv-nome{font-weight:600;font-size:.9rem}
.sv-quando{font-size:.78rem;opacity:.8}
.sv-fechar{margin-left:auto;background:none;border:none;color:#fff;cursor:pointer;display:flex}
.sv-barras{position:absolute;top:calc(8px + env(safe-area-inset-top));left:10px;right:10px;
           display:flex;gap:4px;z-index:5}
.sv-barras i{flex:1;height:2.5px;background:rgba(255,255,255,.35);border-radius:2px}
.sv-barras i.on{background:#fff}
.sv-legenda{position:absolute;bottom:0;left:0;right:0;padding:20px 16px;
            padding-bottom:calc(52px + env(safe-area-inset-bottom));color:#fff;font-size:.92rem;
            background:linear-gradient(transparent,rgba(0,0,0,.7));z-index:3}
.sv-nav{position:absolute;top:0;bottom:0;width:33%;z-index:2;background:none;border:none;cursor:pointer}
.sv-nav.ant{left:0}.sv-nav.prox{right:0}
.sv-views{position:absolute;bottom:calc(14px + env(safe-area-inset-bottom));left:16px;color:#fff;
          font-size:.82rem;display:flex;align-items:center;gap:6px;z-index:4;
          background:none;border:none;cursor:pointer}

/* ------------------------- Busca de usuários ------------------------- */
.busca-wrap{padding:10px 0 4px}
.busca-campo{display:flex;align-items:center;gap:8px;background:var(--fundo);
             border:1px solid var(--borda);border-radius:10px;padding:9px 12px}
.busca-campo input{flex:1;border:none;background:none;outline:none;font-size:.92rem}
.usuario-linha{display:flex;align-items:center;gap:12px;padding:9px 2px;cursor:pointer}
.usuario-linha .avatar{width:44px;height:44px}
.usuario-linha .nome{font-weight:600;font-size:.92rem}
.usuario-linha .sub{font-size:.8rem;color:var(--cinza)}

/* ------------------------- Cards / posts ------------------------- */
.card{background:var(--card);border:1px solid var(--borda);border-radius:var(--raio);
      box-shadow:var(--sombra);padding:14px;margin-bottom:12px}
/* post no formato do Instagram: cabeçalho, mídia sangrando, ações, texto */
.post{background:var(--card);border:1px solid var(--borda);border-radius:var(--raio);
      margin-bottom:14px;overflow:hidden}
.post-topo{display:flex;align-items:center;gap:10px;padding:10px 12px}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--azul);color:#fff;
        display:flex;align-items:center;justify-content:center;font-weight:700;
        overflow:hidden;flex:0 0 auto}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.post-autor{font-weight:600;font-size:.88rem}
.post-data{font-size:.74rem;color:var(--cinza)}
.post-menu{margin-left:auto;background:none;border:none;color:var(--texto);cursor:pointer;display:flex}
.post-midia{background:#000;display:flex;justify-content:center}
.post-midia img{width:100%;max-height:70vh;object-fit:contain;display:block}
.post-acoes{display:flex;gap:16px;padding:10px 12px 4px;color:var(--texto)}
.post-acoes button{background:none;border:none;color:inherit;cursor:pointer;display:flex;
                   align-items:center;gap:6px;font-size:.85rem}
.post-acoes .direita{margin-left:auto}
.post-acoes .curtido{color:var(--vermelho)}
.post-acoes .curtido .ic{fill:var(--vermelho);stroke:var(--vermelho)}
.post-curtidas{padding:2px 12px;font-weight:600;font-size:.85rem}
.post-texto{white-space:pre-wrap;word-break:break-word;padding:4px 12px 10px;font-size:.9rem}
.post-texto b{font-weight:600;margin-right:5px}
.link-preview{display:block;margin:0 12px 12px;border:1px solid var(--borda);border-radius:10px;
              padding:10px;font-size:.85rem;word-break:break-all}

/* comentários */
.comentarios{padding:6px 12px 12px;border-top:1px solid var(--borda)}
.coment{display:flex;gap:8px;margin-bottom:10px;font-size:.87rem}
.coment .avatar{width:28px;height:28px;font-size:.72rem}
.coment b{font-weight:600;margin-right:4px}
.coment-box{display:flex;gap:8px;margin-top:8px;align-items:center}
.coment-box input{flex:1;padding:9px 12px;border:1px solid var(--borda);border-radius:20px;
                  background:var(--fundo);font-size:.87rem}

/* FAB */
.fab{position:fixed;right:16px;bottom:calc(var(--tab-h) + 18px + env(safe-area-inset-bottom));
     width:54px;height:54px;border-radius:50%;background:var(--azul);color:#fff;font-size:1.7rem;
     border:none;box-shadow:0 4px 14px rgba(0,0,0,.28);cursor:pointer;z-index:25;
     display:flex;align-items:center;justify-content:center}

/* estados */
.vazio{text-align:center;color:var(--cinza);padding:50px 20px}
.vazio p{margin-bottom:14px}
.fim{text-align:center;color:var(--cinza);padding:16px;font-size:.82rem}
.carregando{text-align:center;color:var(--cinza);padding:16px;font-size:.88rem}

/* ------------------------- Insulina (mapa/lista) ------------------------- */
.secao-titulo{font-size:1rem;margin:6px 0 12px;font-weight:700}
.locais-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.local{border:1px solid var(--borda);border-radius:12px;padding:12px;background:var(--card);
       cursor:pointer;display:flex;flex-direction:column;gap:6px;text-align:left}
.local .nome{font-weight:600;font-size:.88rem}
.local .badge{display:inline-block;font-size:.7rem;padding:3px 8px;border-radius:20px;
              width:fit-content;font-weight:600}
.badge.disponivel{background:rgba(46,160,67,.15);color:var(--verde)}
.badge.em_uso{background:rgba(210,153,34,.15);color:var(--amarelo)}
.badge.quarentena{background:rgba(237,73,86,.15);color:var(--vermelho)}
.local.bloqueado{opacity:.55}
.barra{height:6px;background:var(--borda);border-radius:6px;overflow:hidden}
.barra i{display:block;height:100%;background:var(--amarelo)}

/* ------------------------- Formulários ------------------------- */
.form-linha{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.form-linha label{font-size:.8rem;color:var(--cinza);font-weight:600}
.form-linha input,.form-linha select,.form-linha textarea{padding:11px;border:1px solid var(--borda);
       border-radius:9px;background:var(--fundo);width:100%;font-size:.92rem}
.form-linha textarea{resize:vertical;min-height:70px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:360px){ .grid2{grid-template-columns:1fr} }

/* seletor de medida caseira (contagem de carboidrato) */
.medidas{display:flex;flex-direction:column;gap:6px;max-height:210px;overflow-y:auto;
         border:1px solid var(--borda);border-radius:10px;padding:8px;background:var(--fundo)}
.medida{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--borda);
        border-radius:9px;background:var(--card);cursor:pointer;text-align:left;width:100%}
.medida.sel{border-color:var(--azul);box-shadow:0 0 0 1px var(--azul)}
.medida .rot{font-weight:600;font-size:.86rem}
.medida .det{font-size:.74rem;color:var(--cinza)}
.medida .cho{margin-left:auto;font-weight:700;color:var(--azul);white-space:nowrap;font-size:.9rem}
.resultado-cho{background:var(--azul);color:#fff;border-radius:12px;padding:14px;text-align:center;
               margin:12px 0}
.resultado-cho b{display:block;font-size:1.9rem;line-height:1.1}
.resultado-cho span{font-size:.78rem;opacity:.9}

/* stats */
.stats{display:flex;gap:8px;margin-bottom:14px}
.stat{flex:1;background:var(--card);border:1px solid var(--borda);border-radius:12px;
      padding:12px 8px;text-align:center;min-width:0}
.stat b{display:block;font-size:1.35rem;color:var(--azul)}
.stat span{font-size:.7rem;color:var(--cinza)}

/* lista histórico */
.item{background:var(--card);border:1px solid var(--borda);border-radius:12px;padding:12px;
      margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.item .quando{font-size:.74rem;color:var(--cinza)}
.item .valor{font-weight:700;font-size:1.05rem;white-space:nowrap}

/* gráfico simples */
.grafico{display:flex;align-items:flex-end;gap:3px;height:140px;padding:10px;background:var(--card);
         border:1px solid var(--borda);border-radius:12px;margin-bottom:14px;overflow-x:auto}
.grafico .barra-v{flex:1;min-width:6px;background:var(--azul);border-radius:3px 3px 0 0}

/* ------------------------- MODAL (sempre centralizado) ------------------------- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;
       align-items:center;justify-content:center;z-index:60;padding:16px;overflow-y:auto}
.modal-conteudo{background:var(--card);border-radius:16px;width:100%;max-width:460px;
                padding:22px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);
                overflow-y:auto;box-shadow:0 12px 40px rgba(0,0,0,.3);margin:auto}
.modal h3{margin-bottom:16px;font-size:1.05rem}
.modal-acoes{display:flex;gap:10px;margin-top:12px}
.modal-acoes .btn{flex:1;width:auto}

.aviso{background:rgba(210,153,34,.12);border:1px solid var(--amarelo);color:var(--texto);
       border-radius:10px;padding:10px;font-size:.8rem;margin-bottom:12px}

/* toast */
.toast{position:fixed;bottom:calc(var(--tab-h) + 30px + env(safe-area-inset-bottom));left:50%;
       transform:translateX(-50%);background:#262626;color:#fff;padding:12px 18px;border-radius:22px;
       font-size:.88rem;z-index:100;max-width:90%;text-align:center;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.toast.erro{background:var(--vermelho)}
.toast.sucesso{background:var(--verde)}

/* ------------------------- RESPONSIVO ------------------------- */
/* Tablet e desktop: coluna central, cartões com cantos, FAB alinhado à coluna */
@media (min-width:700px){
  .conteudo{padding:18px 0 40px}
  .stories-bar{margin:0 0 16px;border:1px solid var(--borda);border-radius:var(--raio);padding:14px}
  .tabbar{max-width:var(--max);margin:0 auto;border:1px solid var(--borda);
          border-bottom:none;border-radius:var(--raio) var(--raio) 0 0}
  .fab{right:calc(50% - var(--max)/2 + 16px)}
  .modal-conteudo{max-width:520px}
}
@media (min-width:1000px){
  .topo{padding:0 28px}
  .topo strong{font-size:1.25rem}
}
/* Telas muito pequenas */
@media (max-width:340px){
  .story-ring{width:56px;height:56px}
  .story-item{width:62px}
  .stat b{font-size:1.15rem}
  .post-acoes{gap:12px}
}

/* ------------------------- Tela de Perfil ------------------------- */
.perfil-header{background:var(--card);border:1px solid var(--borda);border-radius:var(--raio);
               padding:22px 18px;margin-bottom:16px;text-align:center}
.perfil-foto{display:flex;justify-content:center;margin-bottom:12px}
.perfil-foto .avatar{width:88px;height:88px;font-size:1.9rem}
.perfil-nome{font-weight:700;font-size:1.15rem}
.perfil-sub{font-size:.8rem;color:var(--cinza);margin-top:2px}
.perfil-bio{margin-top:12px;font-size:.9rem;white-space:pre-wrap;word-break:break-word}
.perfil-bio.vazia{color:var(--cinza);font-style:italic}

/* editor de foto dentro do modal */
.foto-edit{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.foto-edit .avatar{width:70px;height:70px;font-size:1.5rem}

/* ------------------------- Campo de senha com visor ------------------------- */
.campo-senha{position:relative}
.campo-senha input{padding-right:46px}
.ver-senha{position:absolute;right:5px;top:0;bottom:10px;width:38px;display:flex;
           align-items:center;justify-content:center;background:none;border:none;
           color:var(--cinza);cursor:pointer;padding:0}
.ver-senha:hover{color:var(--texto)}
.ver-senha .ic{width:21px;height:21px}
/* dentro de modais o input não tem margem inferior */
.form-linha .campo-senha .ver-senha{bottom:0}

/* ------------------------- Aviso de e-mail não confirmado ------------------- */
.aviso-email{display:flex;align-items:flex-start;gap:10px;background:rgba(210,153,34,.12);
             border:1px solid var(--amarelo);border-radius:12px;padding:12px 14px;margin-bottom:14px}
.aviso-email .ic{flex:0 0 auto;color:var(--amarelo);margin-top:1px}
.aviso-email .txt{font-size:.83rem;line-height:1.45}
.aviso-email .txt b{display:block;margin-bottom:2px;font-size:.88rem}
.aviso-email button{background:none;border:none;color:var(--azul);font-weight:600;
                    cursor:pointer;padding:4px 0 0;font-size:.83rem}

/* ------------------------- Sino / notificações ------------------------- */
.icone-btn.sino{position:relative}
.badge-notif{position:absolute;top:-4px;right:-6px;min-width:17px;height:17px;padding:0 4px;
             background:var(--vermelho);color:#fff;border-radius:9px;font-size:.64rem;font-weight:700;
             display:flex;align-items:center;justify-content:center;line-height:1}
.notif{display:flex;align-items:center;gap:11px;padding:11px 4px;border-bottom:1px solid var(--borda);
       cursor:pointer}
.notif:last-child{border-bottom:none}
.notif.nao-lida{background:rgba(31,111,235,.07);border-radius:10px;padding-left:10px;padding-right:10px}
.notif .avatar{width:42px;height:42px;font-size:.95rem}
.notif .txt{flex:1;font-size:.86rem;line-height:1.4;min-width:0}
.notif .txt b{font-weight:600}
.notif .quando{font-size:.72rem;color:var(--cinza);margin-top:2px}
.notif .mini{width:42px;height:42px;border-radius:6px;object-fit:cover;flex:0 0 auto}
.notif .trecho{color:var(--cinza);font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ------------------------- Amigos ------------------------- */
.btn-amizade{background:var(--azul);color:#fff;border:none;border-radius:8px;padding:7px 14px;
             font-size:.8rem;font-weight:600;cursor:pointer;white-space:nowrap;flex:0 0 auto}
.btn-amizade.cinza{background:transparent;border:1px solid var(--borda);color:var(--texto)}
.btn-amizade.verde{background:var(--verde)}
.btn-amizade:disabled{opacity:.6;cursor:default}
.acoes-amizade{display:flex;gap:6px;flex:0 0 auto}
.abas{display:flex;gap:4px;margin-bottom:14px;border-bottom:1px solid var(--borda)}
.aba{flex:1;background:none;border:none;padding:10px 4px;font-size:.85rem;font-weight:600;
     color:var(--cinza);cursor:pointer;border-bottom:2px solid transparent}
.aba.ativa{color:var(--texto);border-bottom-color:var(--texto)}
.aba .cont{background:var(--vermelho);color:#fff;border-radius:9px;padding:1px 6px;font-size:.66rem;
           margin-left:4px}

/* marcação @usuario dentro dos textos */
.mencao{color:var(--azul);font-weight:600}

/* ------------------------- Prévia da publicação ------------------------- */
.previa{border:1px solid var(--borda);border-radius:12px;overflow:hidden;margin-bottom:12px;
        background:var(--card)}
.previa-rotulo{font-size:.72rem;color:var(--cinza);font-weight:600;text-transform:uppercase;
               letter-spacing:.4px;padding:8px 12px 0}
.previa img{width:100%;max-height:280px;object-fit:contain;background:#000;display:block;margin-top:8px}
.previa .post-topo{padding:10px 12px}
.previa .post-texto{padding:8px 12px 12px}

/* ------------------------- Vídeo (miniatura + player) ------------------------- */
.video-box{position:relative;background:#000;cursor:pointer;aspect-ratio:16/9;overflow:hidden;
           display:flex;align-items:center;justify-content:center}
.video-box img{width:100%;height:100%;object-fit:cover;display:block}
.video-box iframe{width:100%;height:100%;border:0;display:block}
.video-box.tocando{cursor:default;aspect-ratio:16/9}
.video-sem-thumb{color:#fff;font-weight:700;font-size:1.1rem;opacity:.7;letter-spacing:.5px}
.video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
            width:64px;height:64px;border-radius:50%;border:none;cursor:pointer;
            background:rgba(0,0,0,.62);color:#fff;display:flex;align-items:center;justify-content:center;
            transition:background .15s,transform .15s}
.video-box:hover .video-play{background:var(--vermelho);transform:translate(-50%,-50%) scale(1.06)}
.ic-play{width:30px;height:30px;fill:currentColor;stroke:none;margin-left:3px}
.video-fonte{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.7);color:#fff;
             font-size:.68rem;font-weight:600;padding:3px 8px;border-radius:5px;letter-spacing:.3px}

/* ------------------------- Cartão de link (notícia) ------------------------- */
.link-card{display:flex;align-items:center;gap:10px;margin:2px 12px 12px;padding:11px 12px;
           border:1px solid var(--borda);border-radius:10px;color:var(--texto);background:var(--fundo)}
.link-card .ic{flex:0 0 auto;color:var(--azul);width:20px;height:20px}
.link-txt{min-width:0;display:flex;flex-direction:column}
.link-dominio{font-weight:600;font-size:.85rem}
.link-url{font-size:.74rem;color:var(--cinza);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ------------------------- Foto ampliada ------------------------- */
.foto-viewer{position:fixed;inset:0;z-index:95;background:rgba(0,0,0,.94);display:flex;
             align-items:center;justify-content:center;padding:20px;cursor:zoom-out}
.foto-viewer img{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px}
.fv-topo{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;
         padding:16px;padding-top:calc(16px + env(safe-area-inset-top));color:#fff;
         background:linear-gradient(rgba(0,0,0,.55),transparent)}
.fv-autor{font-weight:600;font-size:.9rem}
.fv-fechar{margin-left:auto;background:none;border:none;color:#fff;cursor:pointer;display:flex}
.post-midia img{cursor:zoom-in}

/* ------------------------- Perfil público ------------------------- */
.perfil-topo{display:flex;align-items:center;gap:18px;padding:18px 14px;background:var(--card);
             border:1px solid var(--borda);border-radius:var(--raio);margin-bottom:12px}
.perfil-topo .avatar{width:82px;height:82px;font-size:1.8rem;flex:0 0 auto}
.perfil-info{min-width:0;flex:1}
.perfil-info .nome{font-weight:700;font-size:1.05rem}
.perfil-info .arroba{color:var(--cinza);font-size:.82rem}
.perfil-numeros{display:flex;gap:18px;margin-top:8px;font-size:.8rem}
.perfil-numeros b{display:block;font-size:1rem}
.etiqueta{display:inline-block;font-size:.7rem;font-weight:600;padding:3px 9px;border-radius:20px;
          background:rgba(31,111,235,.14);color:var(--azul);margin-top:6px}
.etiqueta.cuida{background:rgba(46,160,67,.14);color:var(--verde)}
.grade-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.grade-item{position:relative;aspect-ratio:1;background:var(--borda);cursor:pointer;overflow:hidden}
.grade-item img{width:100%;height:100%;object-fit:cover;display:block}
.grade-item .so-texto{padding:8px;font-size:.7rem;color:var(--texto);overflow:hidden;
                      display:flex;align-items:center;background:var(--card);height:100%}
.grade-item .marca{position:absolute;top:5px;right:5px;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.grade-item .marca .ic{width:17px;height:17px}

/* ------------------------- Layout com coluna lateral ------------------------- */
.layout{display:flex;align-items:flex-start;justify-content:center;gap:26px;
        max-width:calc(var(--max) + 320px);margin:0 auto}
.layout .conteudo{flex:1;min-width:0;max-width:var(--max)}

/* A lateral só aparece quando há espaço de sobra. No celular, some. */
.lateral{display:none}
@media (min-width:1080px){
  .lateral{display:block;width:290px;flex:0 0 290px;
           position:sticky;top:calc(var(--topo-h) + 20px);align-self:flex-start;
           padding-top:18px;max-height:calc(100vh - var(--topo-h) - 40px);overflow-y:auto}
  /* com a lateral em cena, o FAB acompanha a coluna do feed */
  .fab{right:calc(50% - (var(--max) + 320px)/2 + 16px)}
}
.lateral-bloco{background:var(--card);border:1px solid var(--borda);border-radius:var(--raio);
               padding:14px;margin-bottom:14px}
.lateral-titulo{display:flex;align-items:center;justify-content:space-between;gap:8px;
                font-size:.82rem;font-weight:700;color:var(--cinza);margin-bottom:10px}
.lateral-titulo .cont{color:var(--texto)}
.lateral .usuario-linha{padding:7px 0}
.lateral .usuario-linha .avatar{width:38px;height:38px;font-size:.85rem}
.lateral .usuario-linha .nome{font-size:.86rem}
.lateral .usuario-linha .sub{font-size:.75rem}
.lateral-vazio{text-align:center;color:var(--cinza);font-size:.82rem;padding:14px 6px;line-height:1.5}
.btn-lateral{width:100%;display:flex;align-items:center;justify-content:center;gap:7px;
             background:var(--azul);color:#fff;border:none;border-radius:9px;padding:10px;
             font-weight:600;font-size:.85rem;cursor:pointer;margin-top:8px}
.btn-lateral.sec{background:transparent;border:1px solid var(--borda);color:var(--texto)}
.btn-lateral .ic{width:18px;height:18px}
.lateral-eu{display:flex;align-items:center;gap:11px;cursor:pointer}
.lateral-eu .avatar{width:48px;height:48px}
.lateral-eu .nome{font-weight:700;font-size:.9rem}
.lateral-eu .arroba{font-size:.78rem;color:var(--cinza)}

/* ------------------------- Prévia do story (antes de publicar) ------------------------- */
.story-previa{margin-bottom:14px}
.story-previa-quadro{position:relative;background:#000;border-radius:12px;overflow:hidden;
                     max-height:320px;display:flex;align-items:center;justify-content:center;
                     border:1px solid var(--borda);margin-top:8px}
.story-previa-quadro img{max-width:100%;max-height:320px;width:auto;height:auto;
                         object-fit:contain;display:block}
.story-previa-legenda{position:absolute;left:0;right:0;bottom:0;padding:14px 12px;color:#fff;
                      font-size:.85rem;background:linear-gradient(transparent,rgba(0,0,0,.75));
                      word-break:break-word}

/* imagem do story em tela cheia — dimensões explícitas para não sumir */
.story-viewer .sv-img{max-width:100%;max-height:100vh;max-height:100dvh;width:auto;height:auto;
                      object-fit:contain;display:block}
.sv-erro{color:#fff;font-size:.9rem;text-align:center;padding:24px;opacity:.85;max-width:80%}

/* ------------------------- Bloco de sugestão ------------------------- */
.bloco-sugestao{background:linear-gradient(135deg,rgba(31,111,235,.10),rgba(31,111,235,.03));
                border:1px solid var(--azul);border-radius:var(--raio);
                padding:16px;margin-top:18px}
.bloco-sugestao .bs-titulo{display:flex;align-items:center;font-weight:700;font-size:.95rem;
                           margin-bottom:6px;color:var(--azul)}
.bloco-sugestao .bs-titulo .ic{width:20px;height:20px}
.bloco-sugestao p{font-size:.83rem;color:var(--cinza);line-height:1.5;margin-bottom:12px}
.bloco-sugestao .btn{width:100%}
.modal h3 .ic{width:20px;height:20px;display:inline-block;vertical-align:-4px}