/* Painel Looks & Achadinhos: celular primeiro (390 px), mesma tela no computador. */
:root{
  --creme:#F6EFE6;--superficie:#FFFBF5;--vinho:#6B2234;--vinho-esc:#4A1624;--dourado:#B8913A;--dourado-txt:#8A6A2A;
  --texto:#2A1A1E;--sec:#6E5A5E;--borda:#D9C9B6;--linha:#E3D6C6;--verde:#2F6B5E;--creme-esc:#EFE3CF;--claro:#FFF8EE;
  --titulo:'Playfair Display',Georgia,serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
body{background:#E9DFD2;color:var(--texto);font-family:'DM Sans',system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
button{font-family:inherit;cursor:pointer}
button:disabled{cursor:default;opacity:.45}
a{color:var(--vinho)}
h1,h2,h3{font-family:var(--titulo);color:var(--vinho-esc);margin:0}
[hidden]{display:none!important}
.app{max-width:480px;margin:0 auto;height:100vh;height:100dvh;background:var(--creme);display:flex;flex-direction:column;position:relative;overflow:hidden;padding-top:env(safe-area-inset-top)}
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rotulo{font-size:12px;letter-spacing:1.5px;font-weight:700;color:var(--dourado-txt)}
.sec{color:var(--sec)}

/* login */
.login{flex-grow:1;display:flex;flex-direction:column;justify-content:center;padding:40px 32px;gap:28px}
.marca{display:flex;flex-direction:column;align-items:center;gap:10px}
.marca .mini{font-size:12px;letter-spacing:3px;color:var(--sec);font-weight:600}
.marca h1{font-size:36px;line-height:1.1;text-align:center}
.marca .fio{width:56px;height:3px;background:var(--dourado);border-radius:2px}
.campo{display:flex;flex-direction:column;gap:8px}
.campo label{font-size:14px;font-weight:600;color:var(--vinho-esc)}
.campo input[type=password],.campo input[type=url]{height:52px;border:1.5px solid var(--borda);border-radius:14px;padding:0 16px;font-size:16px;background:var(--superficie);color:var(--texto)}
.lembrar{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--sec);margin-top:6px}
.lembrar input{width:18px;height:18px;accent-color:var(--vinho)}
.erro{padding:12px 14px;border-radius:12px;background:#F3E3E3;color:var(--vinho);font-size:14px;line-height:1.4}
.botao{height:54px;border:none;border-radius:27px;background:var(--vinho);color:var(--claro);font-size:16px;font-weight:600;padding:0 22px}
.botao.claro{background:var(--superficie);color:var(--vinho-esc);border:1.5px solid var(--dourado)}
.botao.texto{height:44px;background:none;color:var(--vinho);text-decoration:underline;font-size:15px}
.botao.texto.sec{color:var(--sec);text-decoration:none;font-size:14px}

/* topo e perfis */
.cabecalho{height:50px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--linha);background:var(--superficie);position:relative;z-index:5}
.cabecalho .perfil{display:flex;align-items:center;gap:10px;border:none;background:none;padding:4px 0;height:44px}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--vinho);color:#F3D9A0;font-family:var(--titulo);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cabecalho .nome{font-size:15px;font-weight:700;color:var(--vinho-esc)}
.cabecalho .arroba{font-size:12px;color:var(--sec)}
.perfis{position:absolute;top:50px;left:0;right:0;bottom:0;z-index:20;background:rgba(42,26,30,.35)}
.perfis .lista{background:var(--superficie);border-radius:0 0 18px 18px;padding:8px 16px 16px;display:flex;flex-direction:column;gap:6px;box-shadow:0 10px 24px rgba(42,26,30,.18)}
.perfis .lista .rotulo{padding:8px 0}
.perfis .item{min-height:56px;display:flex;align-items:center;gap:12px;border:1.5px solid var(--borda);border-radius:14px;background:none;padding:8px 12px;text-align:left;text-decoration:none;color:inherit}
.perfis .item.atual{border-color:var(--vinho);background:var(--creme)}
.perfis .item .avatar{width:36px;height:36px;font-size:14px}
.perfis .item .txt{display:flex;flex-direction:column;flex-grow:1}
.perfis .item b{font-size:15px;color:var(--vinho-esc)}
.perfis .item small{font-size:12px;color:var(--sec)}
.perfis .novo{border-style:dashed;color:var(--sec);font-size:15px;font-weight:600}
.perfis .fechar{position:absolute;left:0;right:0;bottom:0;height:45%;border:none;background:none}
.perfis .sair{border:none;background:none;color:var(--sec);font-size:14px;height:40px;align-self:flex-end}

/* conteúdo */
/* telas de cartas: ocupam a altura que sobra, sem rolar; a carta encolhe/cresce com a tela */
.conteudo{flex:1 1 0;display:flex;flex-direction:column;padding:14px 16px 0;gap:12px;min-height:0;overflow:hidden}
.conteudo.rolavel{overflow-y:auto;-webkit-overflow-scrolling:touch}
.cab-post{display:flex;align-items:center;gap:12px}
.capa-mini{width:44px;height:55px;border-radius:8px;object-fit:cover;box-shadow:0 1px 4px rgba(74,22,36,.18);background:var(--creme-esc);flex-shrink:0}
.cab-post .tema{display:flex;align-items:center;gap:8px}
.bolinha{width:10px;height:10px;border-radius:50%;flex-shrink:0;display:inline-block}
.tema-nome{font-family:var(--titulo);font-size:19px;font-weight:700;color:var(--vinho-esc)}
.cab-post .sub{font-size:13px;color:var(--sec)}
.segs{display:flex;gap:4px}
.segs i{flex-grow:1;height:4px;border-radius:2px;background:var(--linha)}
.segs i.ok{background:var(--verde)}
.segs i.atual{background:var(--dourado)}

/* cartas */
.pilha{position:relative;flex:1 1 0;min-height:160px;max-height:calc((min(100vw,480px) - 32px) * 1.25 + 90px)}
.carta{position:absolute;inset:0;border-radius:22px;background:var(--superficie);box-shadow:0 6px 22px rgba(74,22,36,.16);overflow:hidden;display:flex;flex-direction:column}
.carta.atras{inset:10px 8px 0;transform:scale(.96);opacity:.7;box-shadow:0 2px 10px rgba(74,22,36,.10)}
.carta.topo{touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.carta img{width:100%;flex-grow:1;min-height:0;object-fit:contain;display:block;pointer-events:none;background:#EFE7DC}
.carta .info{padding:12px 16px;display:flex;flex-direction:column;gap:6px;flex-shrink:0}
.carta .nome{font-size:15px;font-weight:600;line-height:1.35}
.carta .linha{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--sec);gap:8px}
.preco{color:var(--vinho);font-weight:700}
.carimbo{position:absolute;top:22px;padding:6px 14px;border:3px solid;border-radius:10px;background:rgba(255,251,245,.85);font-weight:700;font-size:20px;letter-spacing:2px;opacity:0;pointer-events:none}
.carimbo.sim{left:18px;color:var(--verde);transform:rotate(-12deg)}
.carimbo.nao{right:18px;color:var(--vinho);transform:rotate(12deg)}
.trocar-tema{height:32px;padding:0 12px;border-radius:16px;border:1.5px dashed var(--dourado);background:var(--superficie);color:var(--vinho-esc);font-size:13px;font-weight:600;white-space:nowrap}
.vazio{position:absolute;inset:0;border-radius:22px;border:2px dashed var(--borda);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:24px}
.vazio h3{font-size:22px}

/* controles */
.controles{display:flex;align-items:center;justify-content:center;gap:18px;padding-top:4px;flex-shrink:0;margin-top:auto}
.redondo{border-radius:50%;display:flex;align-items:center;justify-content:center}
.redondo.peq{width:48px;height:48px;border:1.5px solid var(--borda);background:var(--superficie)}
.redondo.grande{width:64px;height:64px;border:none}
.redondo.nao{background:var(--vinho);box-shadow:0 4px 12px rgba(107,34,52,.3)}
.redondo.sim{background:var(--verde);box-shadow:0 4px 12px rgba(47,107,94,.3)}
.legendas{display:flex;justify-content:center;gap:46px;font-size:11px;color:var(--sec);margin-top:-6px;padding-bottom:12px;flex-shrink:0}
.legendas span.vago{width:40px}

/* resumo e telas de fim */
.resumo{gap:14px;padding-top:18px}
.resumo h2{font-size:26px}
.carrossel{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;flex-shrink:0}
.carrossel img{height:clamp(110px,24dvh,200px);width:auto;aspect-ratio:4/5;flex-shrink:0;border-radius:12px;object-fit:cover;background:var(--creme-esc)}
.acoes{display:flex;flex-direction:column;gap:10px;margin-top:4px;padding-bottom:16px}
.fim{flex-grow:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:32px;text-align:center}
.fim .icone{width:72px;height:72px;border-radius:50%;background:var(--creme-esc);display:flex;align-items:center;justify-content:center}
.fim h2{font-size:24px}
.fim p{font-size:15px;color:var(--sec);line-height:1.5;margin:0}

/* produtos */
.titulo-aba{display:flex;justify-content:space-between;align-items:center}
.titulo-aba h2{font-size:24px}
.mais-link{height:44px;padding:0 16px 0 12px;border-radius:22px;border:none;background:var(--vinho);color:var(--claro);font-size:15px;font-weight:600;display:flex;align-items:center;gap:6px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{height:36px;padding:0 14px;border-radius:18px;border:1.5px solid var(--borda);background:var(--superficie);color:var(--vinho-esc);font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.chip.sel{border-color:var(--vinho);background:var(--vinho);color:var(--claro)}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips.linha-unica{flex-wrap:nowrap;overflow-x:auto;flex-shrink:0;scrollbar-width:none;margin:0 -16px;padding:0 16px}
.chips.linha-unica::-webkit-scrollbar{display:none}
.chips.linha-unica .chip{flex-shrink:0}
select.trocar-tema{max-width:55%;appearance:none;-webkit-appearance:none;text-overflow:ellipsis;padding-right:26px;
  background:var(--superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E5A5E' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center}
.campo-select{height:50px;border:1.5px solid var(--borda);border-radius:14px;padding:0 14px;font-size:16px;background:var(--creme);color:var(--texto);font-family:inherit}
.chips input:checked+.chip{border-color:var(--vinho);background:var(--vinho);color:var(--claro)}

/* cartões (status, anúncios) */
.cartao{background:var(--superficie);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.cartao .lin{display:flex;justify-content:space-between;gap:10px;font-size:15px}
.cartao .alerta{font-size:13px;line-height:1.45;border-top:1px solid var(--linha);padding-top:8px}
.cartao .alerta small{color:var(--sec);display:block}
.falta{color:var(--vinho);font-weight:600}
.ok-txt{color:var(--verde);font-weight:600}

/* barra inferior */
.abas{height:calc(66px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);flex-shrink:0;display:flex;border-top:1px solid var(--linha);background:var(--superficie)}
.abas a{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--vinho-esc);font-size:15px;font-weight:600;text-decoration:none}
.abas a i{width:28px;height:4px;border-radius:2px;background:transparent}
.abas a.ativa{color:var(--vinho)}
.abas a.ativa i{background:var(--dourado)}
.abas a small{font-size:11px;font-weight:500;color:var(--sec)}

/* folha do link e aviso */
.folha{position:absolute;inset:0;z-index:30;background:rgba(42,26,30,.45);display:flex;flex-direction:column;justify-content:flex-end}
.folha .fora{flex-grow:1;border:none;background:none}
.folha form{background:var(--superficie);border-radius:22px 22px 0 0;padding:20px 16px 28px;display:flex;flex-direction:column;gap:14px}
.folha h3{font-size:21px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:80px;width:min(448px,calc(100% - 32px));padding:12px 16px;border-radius:14px;background:var(--texto);color:var(--claro);font-size:14px;line-height:1.4;box-shadow:0 6px 18px rgba(0,0,0,.25);z-index:50}

/* telas baixas (iPhone SE, navegador com barras): tudo mais compacto para caber sem rolar */
@media (max-height:720px){
  .conteudo{padding-top:10px;gap:8px}
  .capa-mini{width:36px;height:45px}
  .tema-nome{font-size:17px}
  .cab-post .sub{font-size:12px}
  .carta .info{padding:8px 14px;gap:4px}
  .redondo.grande{width:56px;height:56px}
  .redondo.peq{width:44px;height:44px}
  .legendas{padding-bottom:8px}
  .resumo{gap:10px;padding-top:12px}
  .resumo h2{font-size:22px}
  .acoes{gap:6px}
  .botao{height:48px}
  .botao.texto{height:38px}
  .abas{height:calc(58px + env(safe-area-inset-bottom))}
}
@media (max-height:600px){
  .legendas{display:none}
  .controles{padding-bottom:8px}
}