/* ==========================================================
   Snapix — estilos globais (v2)
   Incrementa ?v=N no link do style.css sempre que mudares isto.
   ========================================================== */
:root{
  --yellow:#FEDA77; --orange:#F58529; --magenta:#DD2A7B; --purple:#8134AF; --blue:#515BD4;
  --bg:#F7F4F8; --card:#FFFFFF; --ink:#2A2233; --ink-soft:#8C8496; --line:#EFE9F1;
  --shadow:0 10px 28px rgba(129,52,175,.10);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:"Nunito",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--bg);display:flex;justify-content:center}
.app{width:100%;max-width:460px;min-height:100dvh;background:var(--bg);position:relative;display:flex;flex-direction:column}
a{color:inherit}
.grad{background:linear-gradient(140deg,var(--orange),var(--magenta) 52%,var(--purple))}

/* ---------- Barra de topo ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:calc(16px + env(safe-area-inset-top)) 22px 0}
.burger{background:none;border:none;font-size:22px;color:var(--ink);cursor:pointer;padding:8px;text-decoration:none}
.avatar{width:50px;height:50px;border-radius:50%;padding:2.5px;background:linear-gradient(140deg,var(--yellow),var(--magenta),var(--purple));cursor:pointer;text-decoration:none;display:block}
.avatar .ph{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;background:#EED9E9;color:var(--purple);font-weight:900;font-size:18px;border:2.5px solid #fff;overflow:hidden}
.avatar .ph img{width:100%;height:100%;object-fit:cover;border-radius:50%}

/* Logótipo da homepage (imagem) */
.logo-home{display:flex;justify-content:center;padding:6px 20px 0}
.logo-home img{width:min(72%,300px);height:auto}

/* ---------- Botão + grande ---------- */
.plusWrap{display:flex;flex-direction:column;align-items:center;gap:14px;padding:10px 0 26px}
.plus{width:132px;height:132px;border-radius:50%;border:none;cursor:pointer;color:#fff;font-size:52px;display:grid;place-items:center;text-decoration:none;
  box-shadow:0 0 0 9px rgba(221,42,123,.10), 0 16px 34px rgba(221,42,123,.4);transition:transform .2s ease}
.plus:hover{transform:scale(1.04)}
.plusWrap .lbl{font-size:22px;font-weight:900}

/* ---------- Secções e momentos ---------- */
.section{padding:0 20px;flex:1}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.section-head h3{font-size:20px;font-weight:900}
.section-head a{color:var(--purple);font-weight:800;font-size:15px;text-decoration:none;display:flex;align-items:center;gap:5px}
.moment{background:var(--card);border-radius:20px;padding:12px;box-shadow:var(--shadow);display:flex;gap:14px;margin-bottom:16px;position:relative;text-decoration:none;color:var(--ink)}
.moment .thumb{min-width:96px;width:96px;height:96px;border-radius:14px;overflow:hidden;position:relative;display:grid;place-items:center;color:#fff;font-size:26px;background:linear-gradient(150deg,var(--orange),var(--magenta))}
.moment .thumb img{width:100%;height:100%;object-fit:cover}
.moment .info{flex:1;padding-top:4px;min-width:0}
.moment .info h4{font-size:18px;font-weight:900;line-height:1.2;word-break:break-word}
.meta{display:flex;align-items:center;gap:14px;color:var(--ink-soft);font-weight:700;font-size:14px;margin-top:10px;flex-wrap:wrap}
.meta span{display:flex;align-items:center;gap:6px}
.date{display:flex;align-items:center;gap:7px;color:var(--ink-soft);font-weight:700;font-size:14px;margin-top:8px}
.dots{position:absolute;top:14px;right:14px;color:#B9AEC6;font-size:18px;padding:4px;text-decoration:none}
.vazio{background:var(--card);border-radius:20px;padding:32px 22px;text-align:center;box-shadow:var(--shadow);color:var(--ink-soft);font-weight:700}
.vazio i{font-size:34px;color:var(--magenta);display:block;margin-bottom:10px}

/* ---------- Rodapé ---------- */
.nav{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);
  border-top-left-radius:24px;border-top-right-radius:24px;box-shadow:0 -8px 24px rgba(129,52,175,.08);
  display:flex;justify-content:space-around;align-items:center;padding:12px 12px calc(12px + env(safe-area-inset-bottom));margin-top:8px}
.nav .item{background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;color:#B0A6BC;font-weight:800;font-size:11.5px;text-decoration:none}
.nav .item i{font-size:21px}
.nav .item.active{color:var(--purple)}
.nav .item.gallery.active i{width:44px;height:44px;border:2px solid var(--purple);border-radius:12px;display:grid;place-items:center}

/* ---------- Cabeçalho de página interna ---------- */
.pagehead{display:flex;align-items:center;gap:14px;padding:calc(16px + env(safe-area-inset-top)) 20px 6px}
.pagehead a.voltar{color:var(--ink);font-size:20px;text-decoration:none;padding:6px}
.pagehead h1{font-size:22px;font-weight:900}

/* ---------- Autenticação ---------- */
.auth{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding:28px 26px calc(28px + env(safe-area-inset-bottom))}
.auth .logo{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:26px}
.auth .logo img{width:200px;height:auto}
.auth h1{font-size:22px;font-weight:900;margin-bottom:4px}
.auth p.sub{color:var(--ink-soft);font-weight:700;margin-bottom:22px}
.campo{margin-bottom:14px}
.campo label{display:block;font-weight:800;font-size:14px;margin-bottom:6px}
.campo input,.campo textarea{width:100%;padding:15px 16px;border:1.5px solid var(--line);border-radius:14px;font-size:16px;font-family:inherit;font-weight:600;background:#fff}
.campo textarea{min-height:110px;resize:vertical}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--magenta)}
.campo-senha{position:relative}
.campo-senha input{padding-right:52px}
.ver-senha{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--ink-soft);font-size:18px;cursor:pointer;padding:8px}
.aceite{display:flex;align-items:flex-start;gap:10px;font-weight:700;font-size:14px;color:var(--ink-soft);margin:6px 0 16px}
.aceite input{width:20px;height:20px;margin-top:2px;accent-color:var(--magenta)}
.aceite a{color:var(--purple);font-weight:900;text-decoration:none}
.btn{display:block;width:100%;border:none;border-radius:14px;padding:16px;color:#fff;font-size:17px;font-weight:900;cursor:pointer;margin-top:6px;text-align:center;text-decoration:none}
.btn.sec{background:#F0EAF3;color:var(--purple)}
.link-linha{text-align:center;margin-top:18px;color:var(--ink-soft);font-weight:700}
.link-linha a{color:var(--purple);font-weight:900;text-decoration:none}
.erro{background:#FDE8EF;color:#B4245C;border-radius:12px;padding:12px 14px;font-weight:800;font-size:14px;margin-bottom:16px}
.ok{background:#E7F7EE;color:#1E7F4C;border-radius:12px;padding:12px 14px;font-weight:800;font-size:14px;margin-bottom:16px}

/* ---------- Formulário genérico dentro da app ---------- */
.wrap{padding:16px 20px 24px}

/* ---------- Galeria / grelha de media ---------- */
.grelha{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:12px 14px}
.grelha .cel{aspect-ratio:1;border-radius:10px;overflow:hidden;background:#EEE6F0;position:relative;display:block}
.grelha .cel img{width:100%;height:100%;object-fit:cover}
.grelha .cel .tag{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.45);color:#fff;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px}
.grelha .cel.audio{display:grid;place-items:center;color:var(--purple);font-size:26px}

/* ---------- Momento (detalhe) ---------- */
.mediaitem{margin:0 14px 12px;border-radius:16px;overflow:hidden;background:#000;box-shadow:var(--shadow)}
.mediaitem img,.mediaitem video{width:100%;display:block}
.mediaitem.audio{background:var(--card);padding:14px}
.mediaitem.audio audio{width:100%}

/* ---------- Lista simples (menu, perfil, partilhas) ---------- */
.lista{background:var(--card);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;margin:0 20px 16px}
.lista a,.lista .row{display:flex;align-items:center;gap:14px;padding:16px 18px;text-decoration:none;color:var(--ink);font-weight:800;border-bottom:1px solid var(--line)}
.lista a:last-child,.lista .row:last-child{border-bottom:none}
.lista i.ic{width:26px;text-align:center;color:var(--magenta);font-size:18px}
.lista .chev{margin-left:auto;color:#C7B8D0}
.lista .val{margin-left:auto;color:var(--ink-soft);font-weight:800}

/* Barra de armazenamento */
.armaz{margin:0 20px 16px;background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:16px 18px}
.armaz .barra{height:10px;border-radius:6px;background:#EEE6F0;overflow:hidden;margin-top:10px}
.armaz .barra span{display:block;height:100%;border-radius:6px}
.armaz .txt{display:flex;justify-content:space-between;font-weight:800;font-size:13px;color:var(--ink-soft);margin-top:8px}

/* Conteúdo de texto (termos, privacidade) */
.texto{padding:6px 22px 26px;line-height:1.6}
.texto h2{font-size:17px;font-weight:900;margin:20px 0 8px}
.texto p{margin-bottom:10px;color:#4A4257;font-weight:600}
.texto .aviso{background:#FFF6E9;border:1px solid #F5D9A8;border-radius:12px;padding:12px 14px;font-weight:700;color:#8A5A12;font-size:14px}

.pill{display:inline-flex;align-items:center;gap:8px;background:#F0EAF3;color:var(--purple);font-weight:900;border-radius:999px;padding:6px 14px;font-size:13px}
.copiar{display:flex;gap:8px;margin-top:10px}
.copiar input{flex:1;padding:12px;border:1.5px solid var(--line);border-radius:12px;font-weight:700;font-size:13px}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- Novo momento: origens + pré-visualização (v3) ---------- */
.origens{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 0 14px}
.origem{background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:14px 6px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;font-weight:800;font-size:13px;color:var(--ink)}
.origem i{font-size:22px;color:var(--magenta)}
.origem:active{transform:scale(.97)}
.previa{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pcel{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#EEE6F0}
.pcel img{width:100%;height:100%;object-fit:cover}
.pcel .pic{width:100%;height:100%;display:grid;place-items:center;color:var(--purple);font-size:22px}
.premove{position:absolute;top:4px;right:4px;width:24px;height:24px;border:none;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;display:grid;place-items:center;font-size:12px}
.contador{margin-top:10px;color:var(--ink-soft);font-weight:800;font-size:13px}

/* Apagar dentro do momento */
.mediaitem{position:relative}
.apagar-media{position:absolute;top:10px;right:10px;margin:0}
.apagar-media button{width:38px;height:38px;border:none;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;cursor:pointer;font-size:15px}
.mediaitem.audio .apagar-media button{background:#F0EAF3;color:#B4245C}
.btn.danger{background:#F9DCE4;color:#B4245C}

/* ---------- Barra de instalação (v4) ---------- */
.instalar-bar{position:fixed;top:0;left:0;right:0;margin:0 auto;max-width:460px;z-index:60;display:flex;align-items:center;gap:12px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 6px 20px rgba(129,52,175,.14);padding:calc(10px + env(safe-area-inset-top)) 14px 10px}
.instalar-bar img{width:40px;height:40px;border-radius:11px}
.instalar-bar .ib-txt{flex:1;line-height:1.25;min-width:0}
.instalar-bar .ib-txt strong{display:block;font-size:14px}
.instalar-bar .ib-txt span{font-size:12px;color:var(--ink-soft);font-weight:700}
.instalar-bar .ib-btn{border:none;border-radius:12px;padding:10px 16px;font-weight:900;color:#fff;cursor:pointer;background:linear-gradient(140deg,var(--orange),var(--magenta))}
.instalar-bar .ib-x{border:none;background:none;font-size:24px;color:var(--ink-soft);cursor:pointer;padding:0 4px;line-height:1}

/* ---------- Avatar no perfil ---------- */
.perfil-topo{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px 20px 4px}
.perfil-av{width:104px;height:104px;border-radius:50%;padding:3px;background:linear-gradient(140deg,var(--yellow),var(--magenta),var(--purple))}
.perfil-av img,.perfil-av span{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;object-fit:cover;background:#EED9E9;color:var(--purple);font-weight:900;font-size:34px;border:3px solid #fff}

/* ---------- Ajustes mobile: compacto e sem scroll horizontal (v5) ---------- */
html,body{overflow-x:hidden}
.logo-home{padding:4px 20px 0}
.logo-home img{width:auto;max-height:130px}
.plusWrap{padding:6px 0 20px;gap:12px}
.plus{width:120px;height:120px;font-size:48px}
.plusWrap .lbl{font-size:20px}
.topbar{padding-top:calc(14px + env(safe-area-inset-top))}
.app.tem-instalar{padding-top:64px}

/* Corrige o ✕ da barra de instalação: garante que 'hidden' esconde mesmo (v6) */
.instalar-bar[hidden]{display:none !important}