/* Casca de app da área do cliente (/dna e /posts): menu lateral no computador,
   barra de topo + abas embaixo no celular, sem barra de rolagem aparente. Usa os tokens de estilo.css. */
.ic { width: 20px; height: 20px; flex: 0 0 20px; }

body.app { background: var(--suave); }
.app-casca { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }

/* menu lateral */
.app-lateral { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 24px; padding: 20px 16px; background: var(--branco); border-right: 1px solid var(--linha-suave); }
.app-lateral .marca { padding: 4px 8px; }
.app-perfil { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 16px; background: var(--suave); min-width: 0; }
.app-avatar { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--branco); background: var(--marinho); transition: background .3s ease; }
.app-perfil div { display: flex; flex-direction: column; min-width: 0; }
.app-perfil strong { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-perfil div span { font-size: 11px; color: #595959; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-nav { display: flex; flex-direction: column; gap: 4px; }
.app-nav a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: 12px; text-decoration: none; font-size: 15px; font-weight: 480; color: var(--preto); transition: background-color .15s ease; }
.app-nav a:hover { background: var(--suave); }
.app-nav a[aria-current="page"] { background: var(--preto); color: var(--branco); }
.app-nav a[aria-disabled="true"] { color: #8a8a8a; pointer-events: none; }
.app-nav .feito { margin-left: auto; color: var(--verde); }
.app-nav a[aria-current="page"] .feito { color: var(--lima); }
.app-ajuda { margin-top: auto; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.4; }
.app-ajuda strong { font-size: 15px; }
.app-ajuda a { font-weight: 480; }

/* conteúdo */
.app-principal { min-width: 0; }
.app-topo { display: none; }
.app-principal > main { max-width: 1040px; margin: 0 auto; padding: clamp(28px, 4vw, 48px) clamp(16px, 4vw, 48px) 96px; }
.app .cartao, .app .post, .app .ig-barra { background: var(--branco); border-color: var(--linha-suave); }

/* abas embaixo (só celular) */
.app-abas { display: none; }

@media (max-width: 860px) {
  /* ar de app: sem barra de rolagem, sem "puxar" a página além do fim */
  html:has(body.app) { scrollbar-width: none; overscroll-behavior-y: none; }
  html:has(body.app)::-webkit-scrollbar { display: none; }
  body.app { -webkit-tap-highlight-color: transparent; }
  .app-casca { display: block; }
  .app-lateral { display: none; }
  .app-topo { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 6; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--linha-suave); }
  .app-topo .marca { font-size: 22px; }
  .app-topo .app-perfil { margin-left: auto; padding: 4px 12px 4px 4px; border-radius: 50px; background: var(--suave); max-width: 55%; }
  .app-topo .app-avatar { width: 28px; height: 28px; flex-basis: 28px; font-size: 13px; }
  .app-topo .app-perfil div span { display: none; }
  .app-topo .app-perfil strong { font-size: 14px; }
  .app-principal > main { padding: 20px 16px calc(96px + env(safe-area-inset-bottom)); }

  .app-abas { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--linha-suave); }
  .app-abas a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; border-radius: 14px; text-decoration: none; font-size: 11px; font-weight: 550; color: #6b6b6b; transition: color .15s ease, transform .15s ease; }
  .app-abas a .ic { width: 22px; height: 22px; padding: 0; }
  .app-abas a[aria-current="page"] { color: var(--preto); }
  .app-abas a[aria-current="page"] .ic-fundo { background: var(--lima); }
  .app-abas .ic-fundo { display: inline-flex; padding: 4px 16px; border-radius: 50px; transition: background-color .2s ease; }
  .app-abas a:active { transform: scale(.94); }
  .app-abas a[aria-disabled="true"] { opacity: .4; pointer-events: none; }

  /* listas horizontais deslizam sem barra */
  .app .faixa-slides { scrollbar-width: none; }
  .app .faixa-slides::-webkit-scrollbar { display: none; }
  .app h1 { font-size: clamp(30px, 8.5vw, 40px); }
}

/* entrada suave das telas */
@media (prefers-reduced-motion: no-preference) {
  .app-principal > main { animation: tela-entra .35s cubic-bezier(.2, .7, .2, 1) backwards; } /* backwards: sem transform preso, senão o position: fixed de dentro gruda no main */
  @keyframes tela-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* progresso do começo (4 passos) */
.app-progresso { border: 1px solid var(--linha-suave); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.app-progresso .mono { font-size: 11px; color: #595959; }
.prog-barra { display: block; height: 6px; border-radius: 50px; background: var(--linha-suave); overflow: hidden; }
.prog-barra i { display: block; height: 100%; width: 25%; border-radius: inherit; background: var(--preto); transition: width .6s cubic-bezier(.2, .7, .2, 1); }
.completo .prog-barra i { background: var(--verde); }
.prog-passos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #6b6b6b; }
.prog-passos li { display: flex; align-items: center; gap: 8px; }
.prog-passos li::before { content: ""; width: 14px; height: 14px; flex: 0 0 14px; border-radius: 50%; border: 1.5px solid #c4c4c4; box-sizing: border-box; }
.prog-passos li.feito { color: var(--preto); text-decoration: line-through; text-decoration-color: #bdbdbd; }
.prog-passos li.feito::before { border: 0; background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2l2 2 4-4.4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.prog-passos li.agora { color: var(--preto); font-weight: 600; }
.prog-passos li.agora::before { border-color: var(--preto); box-shadow: inset 0 0 0 3px var(--branco), inset 0 0 0 7px var(--magenta); }
.prog-prox { font-size: 13px; font-weight: 600; text-decoration: none; padding: 8px 12px; border-radius: 50px; background: var(--lima); align-self: flex-start; }
.prog-prox:hover { background: #cfe69a; }
.app-progresso-m { display: none; }
@media (max-width: 860px) {
  .app-topo { flex-wrap: wrap; }
  .app-progresso-m:not([hidden]) { display: flex; align-items: center; gap: 10px; flex: 1 0 100%; margin: 2px -16px -10px; padding: 8px 16px; border-top: 1px solid var(--linha-suave); text-decoration: none; font-size: 12px; font-weight: 550; }
  .app-progresso-m .prog-barra { flex: 0 0 64px; height: 5px; }
  .app-progresso-m .prog-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .app-progresso-m::after { content: "›"; margin-left: auto; font-size: 18px; line-height: 1; }
  .app-abas a.pendente .ic-fundo { position: relative; }
  .app-abas a.pendente .ic-fundo::after { content: ""; position: absolute; top: 2px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--magenta); box-shadow: 0 0 0 2px var(--branco); }
}

.app-lateral::-webkit-scrollbar { display: none; }
/* itens que ainda não existem: visíveis, mas sem link (não prometer o que não abre) */
.app-nav-breve { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: 12px; font-size: 15px; font-weight: 480; color: #8a8a8a; cursor: default; }
.app-nav-breve em { margin-left: auto; white-space: nowrap; font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: .5px; text-transform: uppercase; padding: 3px 8px; border-radius: 50px; background: var(--suave); color: #595959; }
/* janelas baixas: menu mais compacto */
@media (max-height: 820px) and (min-width: 861px) {
  .app-lateral { gap: 14px; padding-top: 14px; padding-bottom: 14px; }
  .app-nav a, .app-nav-breve { min-height: 38px; padding-top: 7px; padding-bottom: 7px; }
  .prog-passos { display: none; }
  .app-ajuda p { display: none; }
}

/* "Usar em outro aparelho" */
.app-aparelho { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; border: 1px dashed var(--linha); border-radius: 12px; background: transparent; font: inherit; font-size: 14px; font-weight: 480; cursor: pointer; text-align: left; margin-top: auto; }
.app-aparelho:hover { background: var(--suave); border-style: solid; }
.app-aparelho + .app-ajuda { margin-top: 0; }
.app-topo .app-perfil[role="button"] { cursor: pointer; }
.dlg-acesso { border: 0; border-radius: 24px; padding: 28px; width: min(440px, calc(100vw - 32px)); display: none; flex-direction: column; gap: 14px; }
.dlg-acesso[open] { display: flex; animation: dlg-entra .35s cubic-bezier(.2, .8, .2, 1); }
.dlg-acesso::backdrop { background: rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.dlg-acesso h2 { font-size: 26px; line-height: 1.15; letter-spacing: -.02em; font-weight: 700; }
.dlg-x { position: absolute; top: 12px; right: 12px; }
.dlg-x .pill { min-height: 36px; padding: 6px 12px; }
.dlg-form { display: flex; flex-direction: column; gap: 12px; }
.dlg-form .campo-entrar { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 480; }
.dlg-form input { font: inherit; font-size: 17px; font-weight: 400; padding: 14px 16px; border: 1px solid var(--linha); border-radius: 14px; }
.dlg-form input:focus { border-color: var(--preto); outline: none; box-shadow: 0 0 0 4px var(--lima); }
.dlg-form .aviso:empty { display: none; }
.dlg-form .aviso { font-size: 14px; padding: 10px 14px; border-radius: 12px; background: var(--rosa); }
.dlg-ok { padding: 14px; border-radius: 14px; background: var(--menta); }
@keyframes dlg-entra { from { opacity: 0; transform: translateY(16px) scale(.98); } }

/* Avisos da Pluzy (painel admin → cliente) */
.avisos-pluzy { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.aviso-pluzy { background: var(--lilas); border-radius: 20px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; animation: aviso-entra .4s cubic-bezier(.2, .8, .2, 1) backwards; transition: opacity .25s ease, transform .25s ease; }
.aviso-pluzy .mono { font-size: 11px; color: rgba(0, 0, 0, .65); }
.aviso-pluzy strong { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.aviso-pluzy p { font-size: 15px; line-height: 1.5; white-space: pre-line; margin: 0; }
.aviso-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.aviso-acoes .pill { min-height: 40px; padding: 8px 16px; font-size: 14px; }
.aviso-pluzy.saindo { opacity: 0; transform: translateY(-6px); }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .aviso-pluzy { animation: none; transition: none; } }
.creditos-info { font-size: 14px; padding: 10px 14px; border-radius: 12px; background: var(--lima); margin: 0; }
.creditos-info.zerado { background: var(--rosa); }
/* atalho para o Kit da marca (só celular, na página Marca) */
.atalho-kit { display: none; }
@media (max-width: 860px) {
  .atalho-kit { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 14px 16px; border-radius: 16px; background: var(--branco); border: 1px solid var(--linha-suave); text-decoration: none; }
  .atalho-kit > span { display: flex; flex-direction: column; font-size: 13px; color: #595959; }
  .atalho-kit strong { font-size: 15px; color: var(--preto); }
  .atalho-kit::after { content: "›"; margin-left: auto; font-size: 22px; line-height: 1; }
}
/* Sair deste aparelho */
.app-aparelho + .app-sair { margin-top: -18px; }
.app-sair { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 12px; background: transparent; font: inherit; font-size: 14px; color: #595959; cursor: pointer; text-align: left; }
.app-sair:hover { background: var(--suave); color: var(--preto); }
.dlg-sair { border-top: 1px solid var(--linha-suave); padding-top: 14px; margin-top: 4px; }
.dlg-sair .pill { min-height: 40px; padding: 8px 16px; font-size: 14px; }

/* Conta (22/10): cartão da conta no menu, menu de marcas e Google */
.app-conta { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 12px; border: 1px solid var(--linha-suave); border-radius: 14px; background: var(--branco); font: inherit; cursor: pointer; text-align: left; margin-top: auto; min-width: 0; }
.app-conta:hover { background: var(--suave); }
.app-conta > span:last-child { display: flex; flex-direction: column; min-width: 0; font-size: 12px; color: #595959; }
.app-conta strong { font-size: 14px; color: var(--preto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-conta > span:last-child span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-conta.conta-nova { background: var(--lima); border-color: transparent; }
.app-conta.conta-nova:hover { background: #cfe69a; }
.conta-av { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: var(--lilas); display: grid; place-items: center; font-weight: 700; overflow: hidden; }
.conta-av img { width: 100%; height: 100%; object-fit: cover; }
.app-conta + .app-sair { margin-top: -18px; }
.app-sair + .app-ajuda, .app-conta + .app-ajuda { margin-top: 0; }
.app-lateral .app-perfil[role="button"] { cursor: pointer; }
.app-lateral .app-perfil[role="button"]:hover { background: #eeeee8; }
.dlg-google { gap: 10px; justify-content: center; }
.dlg-ou { text-align: center; }
.dlg-ja { font-size: 14px; }
.lista-marcas { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.item-marca { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--suave); text-decoration: none; }
.item-marca:hover { background: #ececE6; }
.item-marca.atual { background: var(--lilas); }
.item-marca > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; font-size: 13px; color: #4a4a4a; }
.item-marca strong { font-size: 15px; color: var(--preto); }
.item-marca em { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: 10px; text-transform: uppercase; }
.dlg-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.dlg-acoes .pill { min-height: 40px; padding: 8px 16px; font-size: 14px; }