@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Source+Sans+3:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* Tema único, sempre claro no CONTEÚDO (padrão do usuário — nunca escuro de
   propósito global). Nada de @media (prefers-color-scheme: dark) aqui.
   Paleta laranja + preto (pedido explícito do usuário) — o preto vive na
   sidebar do dashboard (--preto/--creme), o conteúdo continua claro. */
:root{
  color-scheme: light;
  --ink:#1A1613;
  --muted:#7A6F63;
  --paper:#FAF7F3;
  --card:#FFFFFF;
  --surface-2:#F1E9DE;
  --ac:#FF6A1A;          /* laranja — ação primária */
  --ac-forte:#D94E0A;
  --amber:#FFB020;
  --err:#D64545;
  --linha:rgba(26,22,19,0.12);
  --linha-suave:rgba(26,22,19,0.06);
  --sombra: 0 1px 2px rgba(26,22,19,0.06), 0 20px 45px -22px rgba(217,78,10,0.35);
  --gradiente: linear-gradient(135deg, var(--ac), var(--ac-forte));
  --tx: var(--ink);      /* aliases pro modal.js padrão, que lê --tx/--tx2 */
  --tx2: var(--muted);

  /* sidebar do dashboard — preto quente, não #000 puro */
  --preto:#15110D;
  --preto-2:#221B14;
  --creme:#F5EFE6;
  --creme-muted:#B4A895;
}

*{box-sizing:border-box;}
[hidden]{ display:none !important; }
/* NUNCA height:100% aqui — quebra o header sticky pela metade da página
   (ver PROJETO.md § Visual: html/body com altura fixa em 100vh corta o
   "espaço" do position:sticky assim que o conteúdo passa da viewport). */
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Source Sans 3', ui-sans-serif, system-ui, sans-serif;
  font-size:16px;
  line-height:1.6;
}
h1,h2,h3{ font-family:'Fraunces', Georgia, serif; text-wrap:balance; margin:0; }
a{ color:var(--ac-forte); }
.mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; }

.wrap{ max-width:720px; margin:0 auto; padding:48px 20px; }
.centro{ min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:24px; }

.marca{ font-family:'Fraunces', serif; font-weight:700; font-size:1.4rem; letter-spacing:-0.01em; color:var(--ink); text-decoration:none; }
.marca-linha{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); }
.marca-linha img{ width:56px; height:56px; border-radius:12px; }
.marca-linha span{
  font-family:'Fraunces', serif; font-weight:700; font-size:1.4rem; letter-spacing:-0.01em;
  background:var(--gradiente); -webkit-background-clip:text; background-clip:text; color:transparent;
}

.marca-hero{ width:220px; height:220px; border-radius:34px; box-shadow:var(--sombra); }

.selo-wrap{ display:flex; justify-content:center; margin-bottom:-120px; position:relative; z-index:1; }
.selo{
  width:220px; height:220px; border-radius:50%; object-fit:cover;
  border:8px solid var(--paper); box-shadow:var(--sombra); background:var(--card);
}

.card{
  background:var(--card); border:1px solid var(--linha); border-radius:18px;
  padding:32px; box-shadow:var(--sombra);
}

.botao{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Source Sans 3', sans-serif; font-weight:600; font-size:0.98rem;
  padding:11px 20px; border-radius:10px; border:1px solid transparent; cursor:pointer;
  text-decoration:none; width:100%; transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.botao.primario{ background:var(--gradiente); color:#fff; }
.botao.primario:hover{ filter:brightness(1.08); transform:translateY(-1px); box-shadow:0 14px 28px -14px color-mix(in srgb, var(--ac) 55%, transparent); }
.botao.secundario{ background:transparent; border-color:var(--linha); color:var(--ink); }
.botao.secundario:hover{ background:var(--surface-2); }

.botao-linha{ width:auto; padding:11px 22px; }
.acoes-flex{ display:flex; gap:12px; flex-wrap:wrap; }
@media (max-width:480px){
  .botao-linha{ width:100%; }
  .acoes-flex{ flex-direction:column; }
}

.campo{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.campo label{ font-size:0.85rem; color:var(--muted); font-weight:600; }
.campo input{
  font:inherit; padding:10px 12px; border-radius:8px; border:1px solid var(--linha);
  background:var(--paper); color:var(--ink);
}
.campo input:focus{ outline:2px solid var(--ac); outline-offset:1px; }
.campo input[name=nome], .campo input[data-upper]{ text-transform:uppercase; }
input[name=link], [data-lower]{ text-transform:lowercase; }

.erro-form{
  background:color-mix(in srgb, var(--err) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--err) 35%, transparent);
  color:var(--err); padding:10px 14px; border-radius:8px; font-size:0.9rem; margin-bottom:16px;
}

.separador{ display:flex; align-items:center; gap:12px; color:var(--muted); font-size:0.85rem; margin:18px 0; }
.separador::before, .separador::after{ content:''; flex:1; height:1px; background:var(--linha); }

.badge{
  display:inline-flex; align-items:center; gap:5px; font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:0.04em; text-transform:uppercase; padding:3px 9px; border-radius:100px;
}
.badge.master{ background:color-mix(in srgb, var(--ac) 16%, transparent); color:var(--ac-forte); }
.badge.gestor{ background:color-mix(in srgb, var(--amber) 16%, transparent); color:var(--amber); }

.topo{
  position:sticky; top:0; z-index:30; background:var(--paper);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 16px;
  padding:16px 24px; border-bottom:1px solid var(--linha);
}
.topo .marca-linha{ min-width:0; }
.topo .marca-linha span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topo-nav{ display:flex; align-items:center; gap:18px; }
.topo-nav form{ margin:0; }
.topo-nav button{ background:none; border:none; color:var(--muted); font:inherit; cursor:pointer; padding:0; }
.topo-nav button:hover{ color:var(--ink); }
.topo-nav a{ font-size:0.9rem; color:var(--muted); text-decoration:none; }
.topo-nav a:hover{ color:var(--ink); }

.hamburguer{
  display:none; background:none; border:1px solid var(--linha); border-radius:8px;
  width:40px; height:40px; align-items:center; justify-content:center; cursor:pointer; color:var(--ink);
}
.hamburguer span, .hamburguer span::before, .hamburguer span::after{
  content:''; display:block; width:18px; height:2px; background:var(--ink); position:relative;
  transition:transform .15s ease, opacity .15s ease;
}
.hamburguer span::before{ position:absolute; top:-6px; }
.hamburguer span::after{ position:absolute; top:6px; }
.hamburguer[aria-expanded="true"] span{ background:transparent; }
.hamburguer[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.hamburguer[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

@media (max-width:640px){
  .hamburguer{ display:flex; }
  .topo-nav{
    display:none; position:absolute; top:100%; left:0; right:0; z-index:20;
    flex-direction:column; align-items:stretch; gap:0; padding:8px 0;
    background:var(--card); border-bottom:1px solid var(--linha); box-shadow:var(--sombra);
  }
  .topo-nav.aberto{ display:flex; }
  .topo-nav a{ padding:14px 22px; }
  .topo-nav form{ padding:6px 22px 14px; }
  .topo-nav form button{ width:100%; text-align:left; }
}

.painel-hero{
  background:
    radial-gradient(600px circle at 12% -20%, color-mix(in srgb, var(--ac) 20%, transparent), transparent 60%),
    radial-gradient(520px circle at 100% -10%, color-mix(in srgb, var(--amber) 18%, transparent), transparent 55%),
    var(--paper);
  border-bottom:1px solid var(--linha); padding:40px 24px 32px; overflow:hidden;
}
.painel-hero h1{
  font-family:'Fraunces', serif; font-weight:700; letter-spacing:-0.01em;
  font-size:clamp(1.5rem, 4vw, 2rem); color:var(--ink); text-wrap:balance; margin:0 0 6px;
}
.painel-hero p{ color:var(--muted); margin:0; }
.painel-stats{ display:flex; gap:28px; margin-top:20px; flex-wrap:wrap; }
.painel-stats .item .num{
  font-family:'IBM Plex Mono', monospace; font-variant-numeric:tabular-nums;
  font-size:1.5rem; font-weight:600; color:var(--ac-forte); line-height:1.1;
}
.painel-stats .item .rotulo{ color:var(--muted); font-size:0.8rem; margin-top:2px; }

.grade-lojas{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:18px; margin-top:24px; }
.loja-card{
  position:relative; overflow:hidden;
  background:var(--card); border:1px solid var(--linha); border-radius:18px; padding:22px;
  box-shadow:var(--sombra); display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
}
.loja-card::before{
  content:''; position:absolute; inset:0 0 auto 0; height:3px; background:var(--gradiente);
  opacity:0; transition:opacity .18s ease;
}
.loja-card:hover{ transform:translateY(-3px); box-shadow:0 1px 2px rgba(27,18,48,.06), 0 26px 48px -22px color-mix(in srgb, var(--ac) 48%, transparent); }
.loja-card:hover::before{ opacity:1; }
.loja-card-topo{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.loja-card-logo{ width:44px; height:44px; border-radius:10px; object-fit:cover; flex-shrink:0; }
.loja-card-monograma{
  width:44px; height:44px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, color-mix(in srgb, var(--ac) 22%, var(--card)), color-mix(in srgb, var(--amber) 16%, var(--card)));
  font-family:'Fraunces', serif; font-weight:700; color:var(--ac-forte); font-size:1.1rem;
}
.loja-card h3{ font-size:1.1rem; margin:0; line-height:1.25; }
.loja-card .sub{ color:var(--muted); font-size:0.82rem; }
.loja-card .stats-linha{
  display:flex; gap:16px; padding:12px 0; margin:6px 0 14px; border-top:1px solid var(--linha-suave); border-bottom:1px solid var(--linha-suave);
}
.loja-card .stats-linha .item{ text-align:left; }
.loja-card .stats-linha .num{ font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; font-weight:600; font-size:1rem; color:var(--ink); }
.loja-card .stats-linha .rotulo{ color:var(--muted); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.03em; }
.loja-card .meta{ display:flex; align-items:center; justify-content:space-between; font-size:0.85rem; color:var(--muted); margin-bottom:auto; }

.loja-card-nova{
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:10px;
  border:2px dashed var(--linha); border-radius:14px; padding:32px 20px; background:transparent; min-height:100%;
}
.loja-card-nova .icone{
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--ac) 14%, transparent); color:var(--ac-forte); font-size:1.4rem;
}
.loja-card-nova input{
  width:100%; font:inherit; padding:10px 12px; border-radius:8px; border:1px solid var(--linha);
  background:var(--paper); color:var(--ink); text-align:center;
}

.vazio{ text-align:center; padding:64px 20px; color:var(--muted); }

/* ---- cards de admin (CRUD) — mesma base do .loja-card público, mas
   maiores/mais espaçosos (tem campo editável dentro, não só leitura), com
   as ações no rodapé do card ---- */
.grade-admin{ display:grid; grid-template-columns:repeat(auto-fill, minmax(380px,1fr)); gap:22px; margin-top:24px; }
@media (max-width:480px){ .grade-admin{ grid-template-columns:1fr; } }

.admin-card{ padding:26px; }
.admin-card .loja-card-topo{ align-items:flex-start; margin-bottom:18px; }
.admin-card .loja-card-logo, .admin-card .loja-card-monograma{ width:60px; height:60px; border-radius:14px; font-size:1.3rem; }
.admin-card-logo{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; flex-shrink:0; }
.admin-card-logo input[type=file]{ font-size:10px; max-width:120px; }
.admin-card .campo{ margin-bottom:14px; }
.admin-card input[name=nome]{ font-family:'Fraunces', serif; font-weight:700; font-size:1.15rem; padding:8px 12px; border-color:transparent; background:transparent; }
.admin-card input[name=nome]:hover, .admin-card input[name=nome]:focus{ background:var(--paper); border-color:var(--linha); }
.admin-card-linha{ display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap; }
.admin-card-rodape{
  display:flex; align-items:center; justify-content:space-between; gap:10px 14px; flex-wrap:wrap;
  padding-top:16px; margin-top:auto; border-top:1px solid var(--linha-suave);
}
.admin-card-rodape .sub{ color:var(--muted); font-size:0.78rem; }

/* ---- Vitrine pública da loja (o que o cliente final vê) ---- */

/* Navbar utilitária — barra fina e fixa, separada do banner de marca */
.loja-nav{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 24px; border-bottom:1px solid var(--linha); background:var(--card);
  position:sticky; top:0; z-index:20;
}
.loja-nav-marca{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); min-width:0; overflow:hidden; }
.loja-nav-marca img{ width:36px; height:36px; border-radius:9px; flex-shrink:0; object-fit:cover; }
.loja-nav-marca .mono{
  width:36px; height:36px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif; font-weight:700; color:var(--ac-forte);
  background:linear-gradient(135deg, color-mix(in srgb, var(--ac) 26%, var(--card)), color-mix(in srgb, var(--ac) 8%, var(--card)));
}
.loja-nav-marca span{
  font-family:'Fraunces', serif; font-weight:700; font-size:1.05rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.loja-nav-acoes{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.loja-nav-entrar{
  font-size:0.85rem; font-weight:600; color:var(--muted); text-decoration:none; padding:9px 16px;
  border-radius:100px; border:1px solid var(--linha); transition:color .15s ease, background .15s ease;
  white-space:nowrap;
}
.loja-nav-entrar:hover{ color:var(--ink); background:var(--paper); }
.loja-nav-carrinho{
  display:inline-flex; align-items:center; gap:7px; background:var(--ac); color:#fff; border-radius:100px;
  padding:9px 18px; text-decoration:none; font-size:0.85rem; font-weight:600;
  transition:transform .15s ease, box-shadow .15s ease; white-space:nowrap;
}
.loja-nav-carrinho:hover{ transform:translateY(-1px); box-shadow:var(--sombra); }
.loja-nav-carrinho .qtd{
  background:rgba(255,255,255,.3); border-radius:100px; min-width:20px; height:20px; padding:0 6px;
  display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-family:'IBM Plex Mono',monospace;
}
@media (max-width:480px){
  .loja-nav{ padding:12px 16px; }
  .loja-nav-marca span{ display:none; }
  .loja-nav-entrar{ padding:9px 12px; }
  .loja-nav-carrinho{ padding:9px 14px; }
}

.loja-topo{
  background: linear-gradient(180deg, color-mix(in srgb, var(--ac) 9%, var(--paper)), var(--paper));
  border-bottom:1px solid var(--linha);
  padding:48px 20px 44px;
  text-align:center;
}
.loja-topo h1{
  font-family:'Fraunces', serif; font-weight:700; letter-spacing:-0.01em;
  font-size:clamp(1.8rem, 5vw, 2.6rem); color:var(--ink); text-wrap:balance; margin:0;
}
.loja-topo p{ color:var(--muted); margin-top:8px; font-size:0.95rem; }
.loja-topo-logo{
  width:88px; height:88px; border-radius:20px; object-fit:cover;
  margin:0 auto 16px; display:block; box-shadow:var(--sombra); background:var(--card);
}
.loja-topo-monograma{
  width:88px; height:88px; border-radius:20px; margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, color-mix(in srgb, var(--ac) 26%, var(--card)), color-mix(in srgb, var(--amber) 16%, var(--card)));
  font-family:'Fraunces', serif; font-size:2.2rem; font-weight:700; color:var(--ac-forte);
  box-shadow:var(--sombra);
}

/* CTA de conversão no rodapé — o momento de "eu quero uma loja assim" */
.cta-plataforma-wrap{ text-align:center; padding:52px 20px 44px; }
.cta-plataforma{
  display:inline-flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--linha);
  border-radius:100px; padding:14px 26px; text-decoration:none; color:var(--ink); font-size:0.95rem; font-weight:600;
  box-shadow:var(--sombra); transition:transform .15s ease, box-shadow .15s ease;
}
.cta-plataforma:hover{ transform:translateY(-2px); box-shadow:0 16px 32px -16px color-mix(in srgb, var(--ac) 45%, transparent); }
.cta-plataforma b{ color:var(--ac-forte); }
.cta-plataforma-nota{ display:block; margin-top:12px; color:var(--muted); font-size:0.78rem; }

.produto-grade{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:22px;
  padding:40px 0 8px;
}
.produto-card{
  display:flex; flex-direction:column; background:var(--card); border:1px solid var(--linha);
  border-radius:16px; overflow:hidden; text-decoration:none; color:inherit;
  box-shadow:var(--sombra); transition:transform .15s ease, box-shadow .15s ease;
}
.produto-card:hover{ transform:translateY(-4px); }
.produto-imagem{
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, color-mix(in srgb, var(--ac) 22%, var(--card)), color-mix(in srgb, var(--ac) 5%, var(--card)));
  font-family:'Fraunces', serif; font-size:2.6rem; font-weight:700; color:var(--ac-forte);
  overflow:hidden;
}
.produto-imagem img{ width:100%; height:100%; object-fit:cover; }
.produto-info{ padding:16px 18px 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.produto-nome{ font-weight:600; font-size:1rem; line-height:1.35; }
.produto-preco{
  font-family:'IBM Plex Mono', monospace; font-variant-numeric:tabular-nums;
  font-size:1.2rem; font-weight:600; color:var(--ac-forte); margin-top:auto;
}
.badge-estoque{
  display:inline-flex; align-self:flex-start; font-family:'IBM Plex Mono', monospace;
  font-size:10.5px; text-transform:uppercase; letter-spacing:0.05em;
  padding:3px 10px; border-radius:100px;
}
.badge-estoque.disponivel{ background:color-mix(in srgb, var(--ac) 15%, transparent); color:var(--ac-forte); }
.badge-estoque.esgotado{ background:color-mix(in srgb, var(--err) 14%, transparent); color:var(--err); }

.voltar-loja{
  display:inline-flex; align-items:center; gap:6px; font-size:0.88rem; color:var(--muted);
  text-decoration:none; margin-bottom:24px;
}
.voltar-loja:hover{ color:var(--ink); }

.produto-hero{ display:grid; grid-template-columns:1fr; gap:32px; align-items:start; }
@media (min-width:640px){ .produto-hero{ grid-template-columns:260px 1fr; } }
.produto-imagem-grande{
  aspect-ratio:1/1; border-radius:20px; overflow:hidden;
  background:linear-gradient(135deg, color-mix(in srgb, var(--ac) 24%, var(--card)), color-mix(in srgb, var(--ac) 6%, var(--card)));
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif; font-size:4.2rem; font-weight:700; color:var(--ac-forte);
  box-shadow:var(--sombra);
}
.produto-imagem-grande img{ width:100%; height:100%; object-fit:cover; }
.produto-titulo{ font-family:'Fraunces', serif; font-weight:700; font-size:1.7rem; letter-spacing:-0.01em; text-wrap:balance; margin-bottom:14px; }
.produto-preco-grande{
  font-family:'IBM Plex Mono', monospace; font-variant-numeric:tabular-nums;
  font-size:2rem; font-weight:600; color:var(--ac-forte); margin-bottom:16px;
}

.form-adicionar-carrinho{ display:flex; gap:10px; align-items:center; margin-top:20px; }
.form-adicionar-carrinho input[type=number]{
  width:72px; font:inherit; font-variant-numeric:tabular-nums; padding:10px 12px;
  border-radius:9px; border:1px solid var(--linha); background:var(--paper); color:var(--ink); text-align:center;
}

.linha-carrinho{
  display:grid; grid-template-columns:64px 1fr auto auto; gap:16px; align-items:center;
  padding:16px 0; border-bottom:1px solid var(--linha-suave);
}
.linha-carrinho .produto-imagem{ width:64px; height:64px; border-radius:10px; font-size:1.3rem; }
.linha-carrinho .nome{ font-weight:600; }
.linha-carrinho .preco-unit{ color:var(--muted); font-size:0.85rem; font-family:'IBM Plex Mono',monospace; }
.linha-carrinho form{ display:flex; align-items:center; gap:6px; }
.linha-carrinho input[type=number]{
  width:56px; font:inherit; font-variant-numeric:tabular-nums; padding:7px 8px; text-align:center;
  border-radius:7px; border:1px solid var(--linha); background:var(--paper); color:var(--ink);
}
.linha-carrinho .subtotal{ font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; }
@media (max-width:560px){
  .linha-carrinho{ grid-template-columns:52px 1fr; grid-template-areas:"img nome" "img acoes"; }
  .linha-carrinho .produto-imagem{ grid-area:img; }
  .linha-carrinho .nome-bloco{ grid-area:nome; }
  .linha-carrinho .acoes-bloco{ grid-area:acoes; display:flex; align-items:center; justify-content:space-between; margin-top:6px; }
}

.carrinho-total{
  display:flex; align-items:center; justify-content:space-between; padding:20px 0 4px;
  font-size:1.2rem; font-weight:600;
}
.carrinho-total .valor{ font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; color:var(--ac-forte); }

.confirmacao-pedido{ text-align:center; padding:40px 20px; }
.confirmacao-pedido .icone{ font-size:2.8rem; margin-bottom:16px; }
.confirmacao-pedido .numero{ font-family:'IBM Plex Mono',monospace; color:var(--muted); font-size:0.9rem; margin-bottom:6px; }

.rodape-publico{
  text-align:center; color:var(--muted); font-size:0.82rem;
  padding:32px 20px 40px; max-width:60ch; margin:0 auto;
}

.campo input[type=color]{ width:100%; padding:4px; height:44px; cursor:pointer; }

.tabela-wrap{ overflow-x:auto; border:1px solid var(--linha); border-radius:12px; background:var(--card); }
table.tabela{ border-collapse:collapse; width:100%; min-width:560px; font-size:0.92rem; }
table.tabela thead th{
  text-align:left; font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.05em;
  text-transform:uppercase; color:var(--muted); font-weight:500; padding:12px 16px;
  border-bottom:1px solid var(--linha); background:var(--surface-2);
}
table.tabela tbody td{ padding:13px 16px; border-bottom:1px solid var(--linha-suave); vertical-align:middle; }
table.tabela tbody tr:last-child td{ border-bottom:none; }
table.tabela input[type=text], table.tabela input[type=number]{
  width:100%; min-width:80px; font:inherit; font-variant-numeric:tabular-nums;
  padding:7px 9px; border-radius:7px; border:1px solid var(--linha); background:var(--paper); color:var(--ink);
}
table.tabela .acoes-linha{ display:flex; gap:6px; flex-wrap:wrap; }
table.tabela .inativo td{ opacity:0.55; }

.plano-form-row{ display:grid; grid-template-columns:1fr 140px; gap:16px; align-items:center; padding:16px 0; border-bottom:1px solid var(--linha-suave); }
.plano-form-row:last-of-type{ border-bottom:none; }
.plano-form-row .info b{ display:block; }
.plano-form-row .info span{ color:var(--muted); font-size:0.85rem; }
.plano-form-row .valor-input{ display:flex; align-items:center; gap:6px; }
.plano-form-row .valor-input span{ color:var(--muted); }
.plano-form-row input{ font:inherit; font-variant-numeric:tabular-nums; padding:9px 10px; border-radius:8px; border:1px solid var(--linha); background:var(--paper); color:var(--ink); width:100%; }

.stat-grade{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; margin-bottom:28px; }
.stat-card{ background:var(--card); border:1px solid var(--linha); border-radius:12px; padding:16px 18px; }
.stat-card .num{ font-family:'IBM Plex Mono',monospace; font-size:1.7rem; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink); line-height:1.2; }
.stat-card .rotulo{ color:var(--muted); font-size:0.8rem; margin-top:2px; }

.busca-admin{ margin-bottom:16px; }
.busca-admin input{ width:100%; max-width:320px; font:inherit; padding:9px 12px; border-radius:8px; border:1px solid var(--linha); background:var(--card); color:var(--ink); }

.botao-mini{ font-size:0.8rem; padding:6px 12px; border-radius:7px; border:1px solid var(--linha); background:transparent; color:var(--ink); cursor:pointer; white-space:nowrap; }
.botao-mini:hover{ background:var(--surface-2); }
.botao-mini.perigo{ color:var(--err); border-color:color-mix(in srgb, var(--err) 40%, transparent); }
.botao-mini.perigo:hover{ background:color-mix(in srgb, var(--err) 10%, transparent); }

.admin-tabs{ display:flex; gap:4px; padding:0 24px; border-bottom:1px solid var(--linha); overflow-x:auto; }
.admin-tabs a{
  display:inline-block; padding:12px 16px; font-size:0.9rem; color:var(--muted); text-decoration:none;
  border-bottom:2px solid transparent; white-space:nowrap;
}
.admin-tabs a:hover{ color:var(--ink); }
.admin-tabs a.ativo{ color:var(--ac-forte); border-bottom-color:var(--ac); font-weight:600; }

/* ---- dashboard: sidebar preta fixa à esquerda + conteúdo claro à direita ---- */
.dash{ display:flex; min-height:100dvh; align-items:stretch; }
.dash-sidebar{
  width:308px; flex-shrink:0; background:var(--preto); color:var(--creme);
  display:flex; flex-direction:column; position:sticky; top:0; height:100dvh; overflow-y:auto;
  padding:36px 20px 24px;
}
.dash-marca{ display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; margin-bottom:40px; text-decoration:none; }
.dash-marca img{ width:180px; height:180px; border-radius:36px; object-fit:cover; box-shadow:0 24px 48px -14px rgba(0,0,0,.7); }
.dash-marca .dash-monograma{
  width:180px; height:180px; border-radius:36px; display:flex; align-items:center; justify-content:center;
  background:var(--gradiente); font-family:'Fraunces',serif; font-weight:700; font-size:3.6rem; color:#fff;
  box-shadow:0 24px 48px -14px rgba(0,0,0,.7);
}
.dash-marca span{ font-family:'Fraunces', serif; font-weight:700; font-size:1.4rem; color:var(--creme); text-wrap:balance; line-height:1.25; }

.dash-nav{ display:flex; flex-direction:column; gap:3px; flex:1; }
.dash-nav a{
  display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:10px;
  color:var(--creme-muted); text-decoration:none; font-size:0.95rem; font-weight:500;
  transition:background .15s ease, color .15s ease;
}
.dash-nav a:hover{ background:rgba(255,255,255,.07); color:var(--creme); }
.dash-nav a.ativo{ background:var(--gradiente); color:#fff; font-weight:600; box-shadow:0 8px 20px -8px rgba(255,106,26,.55); }
.dash-nav-sep{ height:1px; background:rgba(255,255,255,.1); margin:16px 6px; }
.dash-nav-email{ padding:10px 16px 4px; color:var(--creme-muted); font-size:0.78rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.dash-conteudo{ flex:1; min-width:0; padding:44px 44px 60px; }

/* mobile: sidebar vira barra superior sticky + dropdown (mesmo mecanismo do .hamburguer/nav.js) */
.dash .hamburguer{ display:none; }
@media (max-width:900px){
  .dash{ flex-direction:column; }
  .dash-sidebar{
    width:100%; height:auto; position:sticky; top:0; z-index:30; overflow:visible;
    flex-direction:row; align-items:center; justify-content:space-between; padding:14px 18px;
  }
  .dash-marca{ flex-direction:row; align-items:center; gap:12px; margin-bottom:0; text-align:left; }
  .dash-marca img, .dash-marca .dash-monograma{ width:44px; height:44px; border-radius:11px; font-size:1.1rem; box-shadow:none; }
  .dash-marca span{ font-size:1.05rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .dash .hamburguer{
    display:flex; border-color:rgba(255,255,255,.25); flex-shrink:0;
  }
  .dash .hamburguer span, .dash .hamburguer span::before, .dash .hamburguer span::after{ background:var(--creme); }
  .dash-nav{
    display:none; position:absolute; top:100%; left:0; right:0; z-index:25;
    background:var(--preto-2); flex-direction:column; padding:10px; gap:2px;
    box-shadow:0 24px 48px -16px rgba(0,0,0,.6);
  }
  .dash-nav.aberto{ display:flex; }
  .dash-conteudo{ padding:28px 18px 44px; }
}

.logo-preview{
  display:flex; align-items:center; gap:20px; padding:20px; border:1px solid var(--linha);
  border-radius:12px; background:var(--surface-2); margin-bottom:20px;
}
.logo-preview img{ width:88px; height:88px; border-radius:16px; box-shadow:var(--sombra); background:var(--card); }
.upload-area{
  border:2px dashed var(--linha); border-radius:12px; padding:24px; text-align:center; color:var(--muted);
}
.upload-area input[type=file]{ margin-top:10px; }

.aviso-sucesso{
  background:color-mix(in srgb, var(--ac) 14%, transparent); border:1px solid color-mix(in srgb, var(--ac) 35%, transparent);
  color:var(--ac-forte); padding:10px 14px; border-radius:8px; font-size:0.9rem; margin-bottom:20px;
}

@media (max-width:768px){
  table.tabela thead{ display:none; }
  table.tabela, table.tabela tbody, table.tabela tr, table.tabela td{ display:block; width:100%; min-width:0; }
  .tabela-wrap{ overflow-x:hidden; }
  table.tabela tr{ border-bottom:1px solid var(--linha); padding:12px 16px; }
  table.tabela td{ border:none; padding:4px 0; }
  table.tabela td::before{ content:attr(data-label); display:block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:0.04em; color:var(--muted); }
  .plano-form-row{ grid-template-columns:1fr; }
}

@media (max-width:560px){
  .wrap{ padding:32px 16px; }
  .card{ padding:24px; }
  .logo-preview{ flex-direction:column; text-align:center; }
}

/* ---- botão flutuante "voltar ao topo" — padrão em toda página com scroll ---- */
.botao-topo{
  position:fixed; right:22px; bottom:22px; z-index:40;
  width:46px; height:46px; border-radius:50%; border:none; cursor:pointer;
  background:var(--gradiente); color:#fff; font-size:1.2rem; line-height:1;
  box-shadow:var(--sombra); display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease, filter .15s ease;
}
.botao-topo.show{ opacity:1; pointer-events:auto; transform:none; }
.botao-topo:hover{ filter:brightness(1.1); }
@media (max-width:480px){
  .botao-topo{ right:16px; bottom:16px; width:44px; height:44px; }
}

/* ---- corpo do .md renderizado (detalhe do projeto) ---- */
.markdown-corpo{ line-height:1.7; }
.markdown-corpo h1, .markdown-corpo h2, .markdown-corpo h3{
  font-family:'Fraunces', serif; font-weight:700; color:var(--ink);
  margin:1.4em 0 0.5em; text-wrap:balance;
}
.markdown-corpo h1{ font-size:1.5rem; }
.markdown-corpo h2{ font-size:1.25rem; }
.markdown-corpo h3{ font-size:1.05rem; }
.markdown-corpo > *:first-child{ margin-top:0; }
.markdown-corpo p{ margin:0.8em 0; }
.markdown-corpo a{ color:var(--ac-forte); }
.markdown-corpo ul, .markdown-corpo ol{ padding-left:1.4em; margin:0.8em 0; }
.markdown-corpo li{ margin:0.3em 0; }
.markdown-corpo li > ul, .markdown-corpo li > ol{ margin:0.3em 0; }
.markdown-corpo code{
  font-family:'IBM Plex Mono', monospace; font-size:0.88em;
  background:var(--surface-2); padding:2px 6px; border-radius:5px;
}
.markdown-corpo pre{
  background:var(--surface-2); border:1px solid var(--linha); border-radius:10px;
  padding:14px 16px; overflow-x:auto; margin:1em 0;
}
.markdown-corpo pre code{ background:none; padding:0; }
.markdown-corpo blockquote{
  border-left:3px solid var(--ac); margin:1em 0; padding:2px 0 2px 16px;
  color:var(--muted);
}
.markdown-corpo hr{ border:none; border-top:1px solid var(--linha); margin:1.6em 0; }
/* table{width:100%} sozinho não impede overflow: célula com código/texto
   longo força a tabela a estourar o container (medido: 826px vs 359px do
   pai). display:block + overflow-x:auto no próprio <table> faz ele rolar
   como unidade, sem precisar de wrapper extra (goldmark não gera um). */
.markdown-corpo table{ display:block; overflow-x:auto; border-collapse:collapse; width:100%; margin:1em 0; font-size:0.92rem; }
.markdown-corpo tbody, .markdown-corpo thead{ display:table; width:100%; }
.markdown-corpo th, .markdown-corpo td{ border:1px solid var(--linha); padding:8px 12px; text-align:left; }
.markdown-corpo th{ background:var(--surface-2); font-weight:600; }
.markdown-corpo img{ max-width:100%; border-radius:8px; }

/* ---- /login — painel dividido escuro (mesmo visual de call.ichat.app.br/login,
   medido ao vivo: hsl(240 10% 4%) de fundo, card hsl(240 9% 7%)/80% + blur,
   CTA hsl(22 100% 52%)). Escopado só nessa página — nunca vaza pro resto do
   app, que continua sempre claro. ---- */
.auth-pagina{
  --auth-bg: hsl(240 10% 4%);
  --auth-painel: hsl(240 7% 8%);
  --auth-card: hsl(240 9% 7%);
  --auth-borda: hsl(240 4% 16%);
  --auth-texto: hsl(0 0% 98%);
  --auth-mudo: hsl(240 5% 65%);
  --auth-cta: hsl(22 100% 52%);
  --auth-cta-hover: hsl(22 100% 46%);
  min-height:100dvh; background:var(--auth-bg); color:var(--auth-texto);
  display:grid; grid-template-columns:1fr; place-items:center; gap:28px; padding:24px;
}
@media (min-width:1024px){
  .auth-pagina{ grid-template-columns:minmax(0,560px) minmax(0,460px); gap:32px; max-width:1080px; margin:0 auto; }
}

/* logo grande some no painel .auth-lado (hidden < 1024px) — sem isso o
   celular/tablet ficava só com o cartão, sem marca nenhuma na tela. */
.auth-marca-mobile{ display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; }
.auth-marca-mobile img, .auth-marca-mobile .auth-marca-grande-mono{
  width:200px; height:200px; border-radius:36px; object-fit:cover;
  box-shadow:0 24px 48px -14px rgba(0,0,0,.65);
}
.auth-marca-mobile .auth-marca-grande-mono{ display:grid; place-items:center; font-size:4rem; }
.auth-marca-mobile p{ font-family:'Fraunces', serif; font-weight:700; font-size:1.4rem; margin:0; }
@media (min-width:1024px){ .auth-marca-mobile{ display:none; } }
@media (max-width:420px){
  .auth-marca-mobile img, .auth-marca-mobile .auth-marca-grande-mono{ width:160px; height:160px; }
}
.auth-lado{
  display:none; position:relative; overflow:hidden; border-radius:24px; border:1px solid rgba(255,255,255,.1);
  background:
    radial-gradient(560px circle at 20% 15%, color-mix(in srgb, var(--auth-cta) 35%, transparent), transparent 60%),
    radial-gradient(480px circle at 90% 85%, color-mix(in srgb, var(--auth-cta) 22%, transparent), transparent 55%),
    var(--auth-painel);
  padding:40px; height:640px; flex-direction:column; justify-content:space-between; box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
}
@media (min-width:1024px){ .auth-lado{ display:flex; } }
.auth-marca-grande{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; text-align:center; padding:12px 0;
}
.auth-marca-grande img{
  width:260px; height:260px; border-radius:40px; object-fit:cover;
  box-shadow:0 30px 60px -18px rgba(0,0,0,.7);
}
.auth-marca-grande-mono{
  width:260px; height:260px; border-radius:40px; display:grid; place-items:center;
  background:rgba(255,255,255,.14); backdrop-filter:blur(6px);
  font-family:'Fraunces',serif; font-weight:700; color:#fff; font-size:5rem;
  box-shadow:0 30px 60px -18px rgba(0,0,0,.7);
}
.auth-marca-grande p{ font-family:'Fraunces', serif; font-weight:700; font-size:1.4rem; letter-spacing:-0.01em; margin:8px 0 0; }
.auth-marca-grande-sub{ font-family:'Source Sans 3', sans-serif !important; font-weight:400 !important; font-size:0.85rem !important; opacity:.75; margin:0 !important; }
@media (max-width:1180px){
  .auth-marca-grande img, .auth-marca-grande-mono{ width:180px; height:180px; }
}
.auth-headline{ font-family:'Fraunces', serif; font-size:1.7rem; font-weight:700; line-height:1.25; letter-spacing:-0.01em; margin:0 0 18px; text-wrap:balance; }
.auth-headline span{ color:var(--auth-cta); }
.auth-lista{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; font-size:0.88rem; }
.auth-lista li{ display:flex; align-items:flex-start; gap:10px; opacity:.92; }
.auth-lista li::before{ content:'•'; color:var(--auth-cta); font-size:1.2rem; line-height:1; }

.auth-card{
  width:100%; max-width:420px; background:color-mix(in srgb, var(--auth-card) 80%, transparent);
  border:1px solid var(--auth-borda); border-radius:16px; padding:32px;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.65); backdrop-filter:blur(20px);
}
.auth-card h1{ font-size:1.4rem; margin:0 0 6px; color:var(--auth-texto); }
.auth-card .auth-sub{ color:var(--auth-mudo); font-size:0.88rem; margin:0 0 26px; }
.auth-cta-btn{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  background:var(--auth-cta); color:#fff; font-weight:600; font-size:0.95rem;
  padding:12px 20px; border-radius:10px; border:none; text-decoration:none; cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.auth-cta-btn:hover{ background:var(--auth-cta-hover); transform:translateY(-1px); }
.auth-nota{ color:var(--auth-mudo); font-size:0.78rem; text-align:center; margin-top:18px; line-height:1.5; }
.auth-voltar{ display:block; text-align:center; margin-top:16px; color:var(--auth-mudo); font-size:0.85rem; text-decoration:none; }
.auth-voltar:hover{ color:var(--auth-texto); }
.auth-erro{
  background:hsl(0 72% 51% / .12); border:1px solid hsl(0 72% 51% / .35); color:hsl(0 85% 72%);
  padding:10px 14px; border-radius:10px; font-size:0.85rem; margin-bottom:20px;
}