/* Ezee Club — conceito Uber: branco + verde Enerzee em degradê nas áreas fortes (onde o Uber usa preto), alto contraste, títulos grandes e fortes, botões pretos,
   chips e blocos cinza, cartões sem sombra com borda fina. Verde só como destaque de dinheiro/sucesso.
   Celular: barra inferior branca. Computador (≥ 860 px): barra superior preta, conteúdo centralizado. */
:root {
  color-scheme: light;
  --preto: #000; --branco: #fff;
  --texto: #000; --texto-2: #5e5e5e; --texto-3: #8a8a8a;
  --cinza: #f3f3f3; --cinza-2: #eeeeee; --cinza-3: #e2e2e2; --linha: #e8e8e8;
  --verde: #06c167; --verde-esc: #05944f; --verde-suave: #e6f9ef;
  --amarelo: #ffc043; --amarelo-esc: #996f00; --amarelo-suave: #fff6e0;
  --vermelho: #e11900; --vermelho-suave: #ffefed;
  --azul: #276ef1; --azul-suave: #eef3fe;
  /* Verde em degradê no lugar do preto do Uber */
  --verde-forte: #2e6b24; --verde-claro: #77e173;
  --grad: linear-gradient(115deg, #56b54a 0%, #43942f 35%, #2e6b24 70%, #245a1d 100%);
  --grad-hover: linear-gradient(115deg, #4fa843 0%, #3c8729 35%, #285f1f 70%, #1f4f19 100%);
  --r: 12px; --r-sm: 8px; --r-pill: 999px;
  --fonte: "Uber Move", "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --nav-h: 64px; --topo-h: 64px;
  --font-mono: var(--mono);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--branco); color: var(--texto); font: 15px/1.45 var(--fonte); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
body { min-height: 100dvh; }
img { max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; letter-spacing: -.02em; }
.mono { font-family: var(--mono); }
.num { font-variant-numeric: tabular-nums; }

/* ================= Estrutura ================= */
.shell__conteudo { min-height: 100dvh; padding-bottom: calc(var(--nav-h) + 28px + env(safe-area-inset-bottom)); }
.corpo { display: flex; flex-direction: column; gap: 16px; padding: 4px 16px 24px; max-width: 1120px; margin: 0 auto; width: 100%; }

/* Topo: voltar + título pequeno (no celular) */
.topo { display: flex; align-items: center; gap: 12px; padding: calc(12px + env(safe-area-inset-top)) 16px 8px; max-width: 1120px; margin: 0 auto; min-height: 56px; }
.topo__icone { display: none; }
.topo__voltar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--cinza); flex: none; }
.topo__voltar svg { width: 22px; height: 22px; }
.topo__voltar:hover { background: var(--cinza-2); }
.topo__titulo { font-size: 28px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; flex: 1; }
.topo__voltar + .topo__titulo { font-size: 20px; }
.topo__dir { display: flex; gap: 8px; }
.topo__simbolo { width: 34px; height: 34px; display: grid; place-items: center; color: var(--verde-forte); flex: none; }
.topo__simbolo svg { width: 26px; height: 26px; }

/* "Capa" no conceito Uber: cabeçalho branco com título grande e indicadores em blocos cinza */
.shell__conteudo--capa .topo__titulo { visibility: hidden; }
@media (min-width: 860px) { .shell__conteudo--capa .topo { display: none; } .shell__conteudo--capa .capa { padding-top: 28px; } }
.capa { max-width: 1120px; margin: 0 auto; }
.capa__corpo { padding: 0 16px 8px; }
.capa__ola { font-size: 15px; color: var(--texto-2); font-weight: 500; }
.capa__nome { font-size: 30px; font-weight: 700; letter-spacing: -.035em; line-height: 1.08; margin-top: 2px; }
.capa__kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.capa__kpi { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r); background: var(--cinza); min-width: 0; }
.capa__kpi > span:last-child { min-width: 0; }
.capa__kpi-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--branco); display: grid; place-items: center; flex: none; }
.capa__kpi-ic svg { width: 20px; height: 20px; }
.capa__kpi-rot { display: block; font-size: 12.5px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.capa__kpi b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.capa__logo--club { display: none; }

/* ================= Navegação ================= */
/* Celular: barra inferior branca, ícone e texto pretos no ativo */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: stretch; background: var(--branco); border-top: 1px solid var(--linha); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); height: calc(var(--nav-h) + env(safe-area-inset-bottom)); }
.tabbar__item { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: var(--texto-3); font-size: 11px; font-weight: 500; border-radius: var(--r-sm); }
.tabbar__item svg { width: 24px; height: 24px; }
.tabbar__item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tabbar__item--on { color: var(--verde-forte); font-weight: 700; }
.tabbar__grupo, .tabbar__conta, .tabbar__marca { display: none; }

/* Computador: barra superior preta (site do Uber) */
@media (min-width: 860px) {
  .tabbar { top: 0; bottom: auto; height: var(--topo-h); padding: 0 max(24px, calc((100vw - 1120px) / 2)); background: var(--grad); border: 0; gap: 4px; align-items: center; }
  .tabbar__marca { display: flex; order: -1; align-items: center; margin-right: 22px; height: 100%; color: transparent; text-decoration: none; }
  .tabbar__marca svg { display: none; }
  .tabbar__marca::before { content: ""; width: 120px; height: 26px; background: url("/img/zee-club-branco.png") left center / contain no-repeat; }
  .tabbar__item { flex: none; flex-direction: row; gap: 8px; height: 40px; padding: 0 14px; border-radius: var(--r-pill); color: #fff; font-size: 14px; font-weight: 500; }
  .tabbar__item svg { width: 18px; height: 18px; display: none; }
  .tabbar__item:hover { background: rgb(255 255 255 / .16); }
  .tabbar__item--on { background: #fff; color: var(--verde-forte); font-weight: 600; }
  .tabbar__item--on:hover { background: #fff; }
  .tabbar__conta { display: flex; align-items: center; gap: 10px; margin-left: auto; color: #fff; }
  .tabbar__conta-av { width: 36px; height: 36px; border-radius: 50%; background: rgb(255 255 255 / .22); display: grid; place-items: center; font-size: 13px; font-weight: 700; }
  .tabbar__conta-txt { display: grid; line-height: 1.2; text-align: right; order: -1; }
  .tabbar__conta-txt b { font-size: 13.5px; font-weight: 600; }
  .tabbar__conta-txt small { font-size: 11.5px; color: rgb(255 255 255 / .75); }
  .tabbar__sair { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
  .tabbar__sair:hover { background: rgb(255 255 255 / .16); }
  .tabbar__sair svg { width: 18px; height: 18px; }
  .tabbar__sair span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .shell__conteudo { padding-top: var(--topo-h); padding-bottom: 48px; }
  .topo { padding: 28px 24px 8px; }
  .topo__simbolo { display: none; }
  .topo__titulo { font-size: 36px; }
  .topo__voltar + .topo__titulo { font-size: 28px; }
  .shell__conteudo--capa .topo { padding-top: 24px; min-height: 0; }
  .capa__corpo { padding: 0 24px 8px; }
  .capa__nome { font-size: 44px; letter-spacing: -.04em; }
  .capa__kpis { grid-template-columns: repeat(2, minmax(0, 260px)); }
  .corpo { padding: 8px 24px 32px; gap: 20px; }
}
.tabbar__sair span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ================= Componentes ================= */
.secao { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; }
.secao__acao { font-size: 14px; font-weight: 600; color: var(--texto); text-decoration: none; background: var(--cinza); border-radius: var(--r-pill); padding: 6px 12px; letter-spacing: 0; }
.secao__acao:hover { background: var(--cinza-2); }
span.secao__acao { background: none; color: var(--texto-3); font-weight: 500; padding: 0; }
.cartao { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r); padding: 18px; min-width: 0; }
.cartao > * + * { margin-top: 12px; }
.cartao__topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cartao__titulo { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.sub-txt { font-size: 14px; color: var(--texto-2); margin: 0; }
.vazio { text-align: center; padding: 28px 16px; color: var(--texto-2); font-size: 14px; background: var(--cinza); border-radius: var(--r); }
.vazio b { display: block; color: var(--texto); font-size: 15px; margin-bottom: 2px; }

/* Nota */
.nota { border-radius: var(--r); padding: 14px 16px; background: var(--cinza); font-size: 14px; }
.nota__titulo { font-weight: 700; margin-bottom: 2px; }
.nota__corpo { color: var(--texto-2); }
.nota__corpo a { color: var(--texto); font-weight: 600; }
.nota--alerta { background: var(--amarelo-suave); }
.nota--alerta .nota__corpo { color: #6b4e00; }
.nota--erro { background: var(--vermelho-suave); }
.nota--erro .nota__titulo { color: var(--vermelho); }

/* Selos */
.pill { display: inline-flex; align-items: center; gap: 4px; border-radius: var(--r-pill); padding: 3px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--cinza); color: var(--texto); }
.pill--verde { background: var(--verde-suave); color: var(--verde-esc); }
.pill--amarelo { background: var(--amarelo-suave); color: var(--amarelo-esc); }
.pill--vermelho { background: var(--vermelho-suave); color: var(--vermelho); }
.pill--info, .pill--cinza { background: var(--cinza); color: var(--texto); }
.pill--ecash { background: var(--grad); color: #fff; }
.pill--capa { background: var(--cinza); color: var(--texto); text-decoration: none; }

/* Botões: pretos, retos (raio 8) */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; padding: 0 18px; border-radius: var(--r-sm); font-size: 16px; font-weight: 600; text-decoration: none; text-align: center; background: var(--cinza); color: var(--texto); border: 0; cursor: pointer; transition: background .15s, transform .08s; }
.btn:active:not(:disabled) { transform: scale(.985); }
.btn:disabled { opacity: .35; cursor: default; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--primario, .btn--entrar, .btn--lima, .btn--ecash { background: var(--grad); color: #fff; }
.btn--primario:hover, .btn--entrar:hover, .btn--lima:hover, .btn--ecash:hover { background: var(--grad-hover); }
.btn--fantasma { background: var(--cinza); color: var(--texto); }
.btn--fantasma:hover { background: var(--cinza-2); }
.btn--perigo { background: var(--vermelho-suave); color: var(--vermelho); }
.btn--whats { background: #25d366; color: #fff; }
.btn--branco { background: #fff; color: var(--verde-forte); }
.btn--branco:hover { background: var(--cinza-2); }
.btn--vidro { background: rgb(255 255 255 / .18); color: #fff; }
.btn--vidro:hover { background: rgb(255 255 255 / .28); }
.btn--mini { width: auto; min-height: 36px; padding: 0 14px; font-size: 14px; display: inline-flex; border-radius: var(--r-pill); }
.acoes-lin { display: flex; gap: 10px; flex-wrap: wrap; }
.acoes-lin > .btn { flex: 1; width: auto; min-width: 140px; }
.acoes { display: grid; gap: 12px; }
.link-txt { color: var(--texto); font-weight: 600; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; padding: 2px 0; }

/* Campos: fundo cinza, sem borda; foco com borda preta */
.campo { display: block; background: var(--cinza); border-radius: var(--r-sm); padding: 9px 14px 8px; border: 2px solid transparent; transition: border-color .12s; }
.campo:focus-within { border-color: var(--verde-forte); background: var(--branco); }
.campo__rotulo { display: block; font-size: 12.5px; color: var(--texto-2); font-weight: 500; }
.campo__input { display: block; width: 100%; border: 0; background: none; padding: 2px 0 0; font-size: 16px; font-weight: 500; outline: none; min-height: 26px; appearance: none; -webkit-appearance: none; }
select.campo__input { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right center / 18px no-repeat; padding-right: 24px; cursor: pointer; }
.campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.campo + .campo, .campos-2 + .campo, .campo + .campos-2, .campos-2 + .campos-2 { margin-top: 12px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--texto-2); cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--verde-forte); flex: none; margin: 0; }
.erro-form { color: var(--vermelho); font-size: 14px; font-weight: 600; }
.erro-form:empty { display: none; }

/* Linhas de lista (estilo "Activity" do Uber) */
.lista-grid { display: grid; gap: 0; }
@media (min-width: 900px) { .lista-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
.painel-grid .lista-grid, .pagar .lista-grid, .menu-criar .lista-grid, .landing .lista-grid { grid-template-columns: minmax(0, 1fr); }
.row { display: flex; align-items: center; gap: 14px; padding: 14px 4px; width: 100%; text-align: left; text-decoration: none; color: inherit; border-bottom: 1px solid var(--linha); min-width: 0; }
.row--clicavel { cursor: pointer; border-radius: 0; transition: background .12s; }
.row--clicavel:hover { background: #fafafa; }
.row--atenuado { opacity: .5; }
.row__av { width: 44px; height: 44px; border-radius: 50%; background: var(--cinza); color: var(--texto); display: grid; place-items: center; flex: none; font-weight: 700; font-size: 14px; }
.row__av svg { width: 21px; height: 21px; }
.row__av--verde { background: var(--verde-suave); color: var(--verde-esc); }
.row__av--amarelo { background: var(--amarelo-suave); color: var(--amarelo-esc); }
.row__av--vermelho { background: var(--vermelho-suave); color: var(--vermelho); }
.row__av--marca, .row__av--ecash { background: var(--grad); color: #fff; }
.row__av--emoji { font-size: 20px; border-radius: var(--r-sm); }
.row__meio { flex: 1; min-width: 0; }
.row__titulo { display: block; font-size: 16px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row__sub { display: block; font-size: 13.5px; color: var(--texto-2); margin-top: 2px; line-height: 1.3; }
.row__dir { text-align: right; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.row__valor { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.row__valorsub { font-size: 12.5px; color: var(--texto-3); }
.row__chevron { width: 18px; height: 18px; flex: none; color: var(--texto-3); }
.row .mais { color: var(--verde-esc); }
.row .riscado { text-decoration: line-through; color: var(--texto-3); }
.row.nova { animation: brilho 1.6s ease; }
@keyframes brilho { 0% { background: var(--verde-suave); } 100% { background: transparent; } }

/* Indicadores */
.resumo-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { .resumo-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .resumo-kpis--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .resumo-kpis--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tile { background: var(--cinza); border-radius: var(--r); padding: 16px; min-width: 0; }
.tile__rotulo { font-size: 13px; color: var(--texto-2); font-weight: 500; }
.tile__valor { font-size: 24px; font-weight: 700; letter-spacing: -.03em; margin-top: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile__detalhe { font-size: 12.5px; color: var(--texto-2); margin-top: 2px; }
.tile--destaque { background: var(--grad); color: #fff; }
.tile--destaque .tile__rotulo, .tile--destaque .tile__detalhe { color: rgb(255 255 255 / .8); }

/* Filtros: busca no estilo "Para onde?" e chips cinza */
.filtros { display: grid; gap: 12px; }
.filtros__busca { display: flex; align-items: center; gap: 12px; background: var(--cinza); border-radius: var(--r-pill); padding: 0 18px; height: 52px; border: 2px solid transparent; }
.filtros__busca:focus-within { border-color: var(--verde-forte); background: #fff; }
.filtros__busca svg { width: 20px; height: 20px; flex: none; }
.filtros__busca input { flex: 1; min-width: 0; border: 0; background: none; font-size: 16px; font-weight: 500; outline: none; height: 100%; }
.filtros__busca input::placeholder { color: var(--texto-2); }
.filtros__pills { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.filtros__pills::-webkit-scrollbar { display: none; }
.filtros__pill { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: var(--r-pill); font-size: 14px; font-weight: 600; background: var(--cinza); color: var(--texto); white-space: nowrap; }
.filtros__pill:hover { background: var(--cinza-2); }
.filtros__pill b { font-weight: 600; color: var(--texto-3); }
.filtros__pill--on, .filtros__pill--on:hover { background: var(--grad); color: #fff; }
.filtros__pill--on b { color: rgb(255 255 255 / .75); }
.seg { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.seg__op { flex: none; padding: 10px 18px; border-radius: var(--r-pill); font-size: 15px; font-weight: 600; background: var(--cinza); text-decoration: none; }
.seg__op--on { background: var(--grad); color: #fff; }

/* "Precisa de você" */
.pv { display: grid; gap: 4px; }
.pv__topo { display: flex; align-items: center; gap: 8px; font-size: 20px; letter-spacing: -.02em; margin-bottom: 6px; }
.pv__n { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: var(--grad); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; letter-spacing: 0; }
.pv__item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r); background: var(--cinza); text-decoration: none; color: inherit; transition: background .12s; }
.pv__item:hover { background: var(--cinza-2); }
.pv__ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--texto-3); flex: none; }
.pv__item--alerta .pv__ponto { background: var(--vermelho); }
.pv__item--info .pv__ponto { background: var(--azul); }
.pv__txt { flex: 1; min-width: 0; }
.pv__txt b { display: block; font-size: 15.5px; font-weight: 600; }
.pv__txt small { display: block; font-size: 13.5px; color: var(--texto-2); }
.pv__ok { padding: 14px 16px; border-radius: var(--r); background: var(--cinza); color: var(--texto-2); }
@media (min-width: 900px) { .pv { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .pv__topo { grid-column: 1 / -1; } }

/* Grade do painel */
.painel-grid { display: grid; gap: 20px; }
@media (min-width: 900px) { .painel-grid--2 { grid-template-columns: 1.3fr 1fr; align-items: start; gap: 32px; } }
.coluna { display: grid; gap: 10px; align-content: start; min-width: 0; }

/* ================= Folha (bottom sheet) ================= */
.menu-criar { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; }
.menu-criar__fundo { position: absolute; inset: 0; background: rgb(0 0 0 / .5); animation: some .15s ease; }
.menu-criar__folha { position: relative; width: 100%; max-width: 560px; max-height: 92dvh; display: flex; flex-direction: column; background: #fff; border-radius: 16px 16px 0 0; padding: 8px 18px calc(18px + env(safe-area-inset-bottom)); animation: sobe .22s ease; }
.menu-criar__alca { width: 44px; height: 5px; border-radius: 99px; background: var(--cinza-3); margin: 4px auto 10px; flex: none; }
.menu-criar__cab { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex: none; }
.menu-criar__cab h2 { font-size: 22px; font-weight: 700; flex: 1; }
.menu-criar__x { width: 36px; height: 36px; border-radius: 50%; background: var(--cinza); font-size: 22px; line-height: 1; display: grid; place-items: center; }
.menu-criar__conteudo { display: grid; gap: 12px; overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px 2px; }
@media (min-width: 860px) { .menu-criar { align-items: center; } .menu-criar__folha { border-radius: 16px; padding-bottom: 18px; } .menu-criar__alca { display: none; } }
@keyframes sobe { from { transform: translateY(40px); opacity: 0; } }
@keyframes some { from { opacity: 0; } }

.toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + 20px + env(safe-area-inset-bottom)); transform: translate(-50%, 16px); opacity: 0; pointer-events: none; background: var(--grad); color: #fff; border-radius: var(--r-sm); padding: 12px 18px; font-size: 14.5px; font-weight: 600; transition: .2s ease; z-index: 100; max-width: calc(100vw - 32px); text-align: center; }
.toast--on { opacity: 1; transform: translate(-50%, 0); }
.toast--erro { background: var(--vermelho); }
@media (min-width: 860px) { .toast { bottom: 28px; } }

/* ================= Telas próprias do Club ================= */
/* Carteira: como o "Uber Cash" — cartão preto */
.carteira { position: relative; overflow: hidden; border-radius: var(--r); padding: 20px; color: #fff; background: var(--grad); }
.carteira__rot { font-size: 14px; color: rgb(255 255 255 / .85); font-weight: 500; display: flex; justify-content: space-between; align-items: center; }
.carteira__rot img { height: 16px; width: auto; opacity: .9; }
.carteira__saldo { font-size: 44px; font-weight: 700; letter-spacing: -.04em; margin: 6px 0 14px; font-variant-numeric: tabular-nums; line-height: 1; }
.carteira__saldo span { font-size: 22px; font-weight: 600; margin-right: 4px; color: rgb(255 255 255 / .8); }
.carteira__linha { display: flex; gap: 24px; font-size: 13px; color: rgb(255 255 255 / .78); }
.carteira__linha b { display: block; font-size: 15px; color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.carteira__acoes { display: flex; gap: 10px; margin-top: 18px; }
.carteira__acoes .btn { flex: 1; }
@media (min-width: 860px) { .carteira { padding: 28px; } .carteira__saldo { font-size: 56px; } .carteira__acoes { max-width: 420px; } }

/* Atalhos (as "Sugestões" do app do Uber) */
.atalhos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.atalho { display: grid; justify-items: center; gap: 6px; padding: 14px 6px 12px; border-radius: var(--r); background: var(--cinza); text-decoration: none; font-size: 13px; font-weight: 600; text-align: center; transition: background .12s; position: relative; }
.atalho:hover { background: var(--cinza-2); }
.atalho svg { width: 30px; height: 30px; }
.atalho small { position: absolute; top: 6px; right: 6px; background: var(--verde); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 99px; }
@media (min-width: 860px) { .atalhos { grid-template-columns: repeat(4, minmax(0, 160px)); } .atalho { padding: 18px 8px 14px; } }

/* Categorias (Uber Eats) */
.categorias { display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.categorias::-webkit-scrollbar { display: none; }
.categoria { display: grid; justify-items: center; gap: 6px; flex: none; font-size: 13px; font-weight: 600; width: 72px; text-align: center; }
.categoria i { width: 64px; height: 64px; border-radius: 50%; background: var(--cinza); display: grid; place-items: center; font-style: normal; font-size: 28px; transition: background .12s; }
.categoria:hover i { background: var(--cinza-2); }
.categoria--on i { background: var(--grad); }

/* Assistente de cadastro (fatura) */
.wizard { display: grid; gap: 16px; max-width: 640px; width: 100%; }
.passos { display: flex; gap: 6px; }
.passos i { flex: 1; height: 4px; border-radius: 4px; background: var(--cinza-3); }
.passos i.on { background: var(--grad); }
.upload { display: grid; place-items: center; text-align: center; gap: 8px; padding: 36px 18px; border-radius: var(--r); border: 2px dashed var(--cinza-3); background: var(--cinza); cursor: pointer; }
.upload:hover { border-color: var(--verde-forte); }
.upload svg { width: 40px; height: 40px; }
.upload b { font-size: 17px; }
.upload small { color: var(--texto-2); font-size: 13.5px; }
.upload input { display: none; }
.lendo { display: grid; place-items: center; gap: 12px; padding: 48px 16px; text-align: center; color: var(--texto-2); }
.giro { width: 36px; height: 36px; border-radius: 50%; border: 4px solid var(--cinza-2); border-top-color: var(--verde-forte); animation: giro .8s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }
.resultado { border-radius: var(--r); padding: 22px; }
.resultado--ok { background: var(--grad); color: #fff; }
.resultado--fora { background: var(--amarelo-suave); color: #4d3800; }
.resultado__rot { font-size: 13.5px; font-weight: 500; opacity: .8; }
.resultado__val { font-size: 40px; font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; margin-top: 6px; color: #fff; }
.resultado__val small { font-size: 16px; color: #fff; opacity: .8; font-weight: 600; letter-spacing: 0; }
.resultado dl { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin: 16px 0 0; font-size: 14px; padding-top: 14px; border-top: 1px solid rgb(255 255 255 / .25); }
.resultado dt { opacity: .7; }
.resultado dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.como { counter-reset: p; display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.como li { display: flex; gap: 14px; align-items: flex-start; font-size: 14.5px; color: var(--texto-2); }
.como li::before { counter-increment: p; content: counter(p); flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 13px; }
.como b { display: block; color: var(--texto); font-size: 15.5px; }

/* Pagamento */
.pagar { display: grid; gap: 14px; max-width: 460px; width: 100%; margin: 0 auto; }
.valor-grande { font-size: 52px; font-weight: 700; letter-spacing: -.04em; text-align: center; font-variant-numeric: tabular-nums; padding: 6px 0; }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.teclado button { min-height: 58px; border-radius: var(--r-sm); background: var(--cinza); font-size: 24px; font-weight: 600; }
.teclado button:hover { background: var(--cinza-2); }
.teclado button:active { background: var(--cinza-3); }
.comprovante { text-align: center; padding: 22px 12px; display: grid; justify-items: center; gap: 4px; }
.comprovante h2 { font-size: 22px; }
.comprovante__ok { width: 72px; height: 72px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; margin-bottom: 10px; animation: pulo .4s ease both; }
.comprovante__ok svg { width: 38px; height: 38px; }
@keyframes pulo { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }
.comprovante__val { font-size: 44px; font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.codigo { display: inline-block; font-family: var(--mono); font-size: 22px; font-weight: 700; letter-spacing: .14em; background: var(--cinza); padding: 10px 16px; border-radius: var(--r-sm); margin: 10px 0 4px; }
.scanner { position: relative; border-radius: var(--r); overflow: hidden; background: #000; aspect-ratio: 1; }
.scanner video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scanner::after { content: ""; position: absolute; inset: 18%; border: 3px solid #fff; border-radius: 18px; box-shadow: 0 0 0 999px rgb(0 0 0 / .4); }
.codigo-form { display: flex; gap: 8px; }
.codigo-form .filtros__busca { flex: 1; }
.codigo-form .btn { width: auto; padding: 0 24px; border-radius: var(--r-pill); }
.txt-ecash { color: var(--texto) !important; font-weight: 700; }

/* Lojista */
.qr-card { text-align: center; display: grid; justify-items: center; gap: 4px; }
.qr-card img { width: min(260px, 70vw); height: auto; display: block; margin: 6px auto; }
.placa { display: none; }

/* Admin */
.barras { display: flex; align-items: flex-end; gap: 12px; height: 170px; padding: 8px 4px 0; }
.barras__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; min-width: 0; }
.barras__par { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.barras__par i { display: block; width: min(18px, 40%); border-radius: 4px 4px 0 0; min-height: 2px; }
.barras__par i:first-child { background: var(--grad); }
.barras__par i:last-child { background: var(--verde-claro); }
.barras__rot { font-size: 12px; color: var(--texto-2); }
.legenda-ez { display: flex; gap: 16px; font-size: 13px; color: var(--texto-2); }
.legenda-ez i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.barra-fina { height: 6px; background: var(--cinza-2); border-radius: 6px; margin-top: 6px; }
.barra-fina i { display: block; height: 100%; background: var(--grad); border-radius: 6px; }
.tabela-caixa { overflow-x: auto; padding: 4px 8px !important; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; font-size: 12.5px; color: var(--texto-2); font-weight: 600; padding: 12px 10px; border-bottom: 1px solid var(--cinza-3); }
.tabela td { padding: 14px 10px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tr:hover td { background: #fafafa; }
.tabela .dir { text-align: right; font-variant-numeric: tabular-nums; }
.tabela .btn { width: auto; display: inline-flex; }
.tabela .sub-txt { font-size: 12.5px; }
.link-caixa { font-family: var(--mono); font-size: 12px; word-break: break-all; background: var(--cinza); border-radius: var(--r-sm); padding: 12px; user-select: all; }
.topo-acoes { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.topo-acoes .btn { width: auto; border-radius: var(--r-pill); }
.ficha { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; font-size: 14.5px; margin: 0; }
.ficha dt { color: var(--texto-2); }
.ficha dd { margin: 0; font-weight: 600; text-align: right; word-break: break-word; }

/* ================= Público: página inicial e entrada ================= */
.landing__topo { background: var(--grad); color: #fff; }
.landing__barra { max-width: 1120px; margin: 0 auto; height: var(--topo-h); display: flex; align-items: center; gap: 10px; padding: 0 16px; }
.landing__barra img { height: 24px; width: auto; }
.landing__barra .btn { width: auto; min-height: 38px; padding: 0 16px; border-radius: var(--r-pill); font-size: 14px; }
.landing__barra .btn:first-of-type { margin-left: auto; }
.landing__hero { max-width: 1120px; margin: 0 auto; padding: 28px 16px 40px; display: grid; gap: 24px; }
.landing__hero h1 { font-size: 40px; line-height: 1.05; letter-spacing: -.045em; font-weight: 700; }
.landing__hero p { color: rgb(255 255 255 / .85); font-size: 16px; margin: 12px 0 0; max-width: 520px; }
.calc { background: #fff; color: var(--texto); border-radius: var(--r); padding: 20px; display: grid; gap: 12px; }
.calc h2 { font-size: 22px; }
.calc__res { border-radius: var(--r-sm); background: var(--cinza); padding: 14px 16px; }
.calc__res b { display: block; font-size: 30px; letter-spacing: -.03em; color: var(--verde-esc); font-variant-numeric: tabular-nums; }
.calc__res span { font-size: 13.5px; color: var(--texto-2); }
.landing__corpo { max-width: 1120px; margin: 0 auto; padding: 32px 16px 48px; display: grid; gap: 28px; }
.landing__corpo h2 { font-size: 28px; letter-spacing: -.035em; }
.landing__grade { display: grid; gap: 28px; }
.landing__rodape { border-top: 1px solid var(--linha); padding: 24px 16px 40px; text-align: center; color: var(--texto-2); font-size: 13.5px; }
@media (min-width: 860px) {
  .landing__barra { padding: 0 24px; }
  .landing__hero { grid-template-columns: 1.1fr 1fr; align-items: center; padding: 64px 24px 72px; gap: 56px; }
  .landing__hero h1 { font-size: 60px; }
  .landing__corpo { padding: 56px 24px 64px; }
  .landing__grade { grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
  .calc { padding: 28px; }
}

/* Entrar (como a tela de login do Uber: branca, simples) */
.entrar { min-height: 100dvh; display: flex; flex-direction: column; }
.entrar__foto { display: none; }
.entrar__barra { background: var(--grad); height: var(--topo-h); display: flex; align-items: center; padding: 0 16px; }
.entrar__barra img { height: 24px; }
.entrar__painel { width: 100%; max-width: 440px; margin: 0 auto; padding: 40px 16px; display: grid; gap: 16px; }
.entrar__topo { display: grid; gap: 6px; margin-bottom: 4px; }
.entrar__logo, .entrar__nome { display: none; }
.entrar__titulo { font-size: 26px; font-weight: 700; letter-spacing: -.03em; }
.entrar__sub { font-size: 15px; color: var(--texto-2); margin: 0; }

@media print {
  body * { visibility: hidden; }
  .placa, .placa * { visibility: visible; }
  .placa { display: block; position: fixed; inset: 0; text-align: center; padding-top: 40px; background: #fff; }
  .placa img { width: 340px; }
}

/* Ajustes finos no celular */
@media (max-width: 859px) {
  .capa__kpi { padding: 12px; gap: 10px; }
  .capa__kpi-ic { width: 32px; height: 32px; }
  .capa__kpi-ic svg { width: 17px; height: 17px; }
  .capa__kpi b { font-size: 17px; }
}
.row__av--ecash { background: var(--cinza); color: var(--texto); }
.filtros { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.corpo > * { min-width: 0; }
@media (max-width: 859px) { .tile { padding: 14px; } .tile__valor { font-size: 19px; } }

/* Ícones de categoria: só traço, em verde */
.row__av--cat { background: var(--verde-suave); color: var(--verde-forte); border-radius: var(--r-sm); }
.row__av--cat svg { width: 22px; height: 22px; stroke-width: 1.7; }
.categoria i { color: var(--verde-forte); }
.categoria i svg { width: 28px; height: 28px; stroke-width: 1.7; }
.categoria--on i { color: #fff; }
.tab-cat { display: inline-flex; align-items: center; gap: 8px; }
.tab-cat svg { width: 18px; height: 18px; color: var(--verde-forte); stroke-width: 1.8; flex: none; }

/* Celular: menu em cápsula flutuante, transparente com desfoque (estilo Instagram) */
@media (max-width: 859px) {
  .tabbar {
    left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); height: 64px; padding: 6px;
    border-radius: 999px; border: 1px solid rgb(255 255 255 / .55);
    background: rgb(255 255 255 / .62);
    -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8);
    box-shadow: 0 10px 30px rgb(0 0 0 / .14), 0 1px 0 rgb(255 255 255 / .7) inset;
    gap: 2px;
  }
  .tabbar__item { border-radius: 999px; color: var(--texto-2); font-size: 10.5px; gap: 2px; transition: background .15s, color .15s; }
  .tabbar__item svg { width: 22px; height: 22px; }
  .tabbar__item--on { background: var(--grad); color: #fff; font-weight: 600; box-shadow: 0 4px 12px rgb(46 107 36 / .35); }
  .shell__conteudo { padding-bottom: calc(64px + 36px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(64px + 28px + env(safe-area-inset-bottom)); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 859px) { .tabbar { background: rgb(255 255 255 / .96); } }
}

/* ================= Vitrine do cliente (conceito iFood) ================= */
.ifood { display: grid; gap: 18px; min-width: 0; }
.ifood__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ifood__ola { font-size: 14px; color: var(--texto-2); }
.ifood__tit { font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
@media (min-width: 860px) { .ifood__tit { font-size: 36px; } .ifood { padding-top: 12px; } }
.chip-saldo { display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; background: var(--grad); color: #fff; text-decoration: none; flex: none; box-shadow: 0 6px 16px -8px rgb(46 107 36 / .6); }
.chip-saldo svg { width: 20px; height: 20px; }
.chip-saldo small { display: block; font-size: 10.5px; opacity: .85; line-height: 1; }
.chip-saldo b { display: block; font-size: 15px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.busca-falsa { color: var(--texto-2); font-size: 16px; font-weight: 500; }

/* Banners em carrossel */
.carrossel { min-width: 0; }
.carrossel__trilho { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--r); }
.carrossel__trilho::-webkit-scrollbar { display: none; }
.banner { position: relative; flex: 0 0 100%; scroll-snap-align: start; min-height: 150px; border-radius: var(--r); padding: 20px; color: #fff; text-decoration: none; display: flex; align-items: flex-end; overflow: hidden; background: var(--grad); background-size: cover; background-position: center; }
.banner--c1 { background: linear-gradient(120deg, #245a1d, #43942f 60%, #77e173); }
.banner--c2 { background: linear-gradient(120deg, #0f3d2e, #1f9b68 70%, #5fd3a0); }
.banner--c3 { background: linear-gradient(120deg, #1f4f19, #2e6b24 45%, #56b54a); }
.banner--img { background-size: cover !important; background-position: center !important; }
.banner--img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgb(0 0 0 / .55)); }
.banner__txt { position: relative; z-index: 1; display: grid; gap: 4px; max-width: 78%; }
.banner__txt b { font-size: 22px; line-height: 1.1; letter-spacing: -.02em; }
.banner__txt small { font-size: 14px; opacity: .92; }
.banner__ic { position: absolute; right: -10px; top: -10px; width: 140px; height: 140px; opacity: .18; }
.banner__ic svg { width: 100%; height: 100%; stroke-width: 1.2; }
.carrossel__pontos { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.carrossel__pontos i { width: 6px; height: 6px; border-radius: 99px; background: var(--cinza-3); transition: width .2s, background .2s; }
.carrossel__pontos i.on { width: 18px; background: var(--verde-forte); }
@media (min-width: 860px) { .banner { flex-basis: calc(50% - 6px); min-height: 190px; padding: 26px; } .banner__txt b { font-size: 26px; } }

/* Fileiras horizontais (vitrines) */
.fileira { min-width: 0; display: grid; gap: 10px; }
.fileira__topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.fileira__topo h2 { font-size: 20px; letter-spacing: -.02em; }
.fileira__topo p { margin: 2px 0 0; font-size: 13.5px; color: var(--texto-2); }
.fileira__trilho { display: grid; grid-auto-flow: column; grid-auto-columns: 156px; gap: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; scroll-snap-type: x proximity; }
.fileira__trilho::-webkit-scrollbar { display: none; }
@media (min-width: 860px) { .fileira__trilho { grid-auto-columns: 200px; scrollbar-width: thin; } }

/* Cartão de loja */
.card-loja { position: relative; display: grid; gap: 4px; text-decoration: none; color: inherit; scroll-snap-align: start; min-width: 0; text-align: left; }
.card-loja:hover .capa-loja { filter: brightness(.96); }
.capa-loja { aspect-ratio: 16 / 10; border-radius: var(--r); background: var(--verde-suave) center / cover no-repeat; display: grid; place-items: center; color: var(--verde-forte); transition: filter .15s; }
.capa-loja__ic svg { width: 42px; height: 42px; stroke-width: 1.4; }
.capa-loja--grande { aspect-ratio: 21 / 8; }
.capa-loja--grande .capa-loja__ic svg { width: 64px; height: 64px; }
.card-loja__promo { position: absolute; top: 8px; left: 8px; background: var(--grad); color: #fff; font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px; box-shadow: 0 4px 10px rgb(0 0 0 / .18); max-width: calc(100% - 16px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-loja__nome { font-size: 15px; font-weight: 600; line-height: 1.25; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card-loja__sub { font-size: 12.5px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grade-lojas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
@media (min-width: 700px) { .grade-lojas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grade-lojas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.selo-promo { display: inline-block; background: var(--verde-suave); color: var(--verde-esc); font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; vertical-align: 1px; }

/* Cartão de promoção */
.card-promo { position: relative; display: grid; align-content: start; gap: 4px; padding: 14px; border-radius: var(--r); background: var(--cinza); text-decoration: none; color: inherit; min-height: 150px; overflow: hidden; scroll-snap-align: start; }
.card-promo:hover { background: var(--cinza-2); }
.card-promo--destaque { background: var(--grad); color: #fff; }
.card-promo--destaque:hover { background: var(--grad-hover); }
.card-promo__img { height: 70px; margin: -14px -14px 6px; background: center / cover no-repeat; }
.card-promo__rotulo { font-size: 22px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: var(--verde-forte); }
.card-promo--destaque .card-promo__rotulo { color: #fff; }
.card-promo__tit { font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.card-promo__loja { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; margin-top: auto; padding-top: 6px; min-width: 0; }
.card-promo__loja svg { width: 14px; height: 14px; flex: none; }
.card-promo__regra { font-size: 11.5px; opacity: .75; }
.fileira__trilho:has(.card-promo) { grid-auto-columns: 220px; }
.secao__acao { white-space: nowrap; flex: none; }
.grade-promos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }

/* Página da loja */
.loja-pag { display: grid; gap: 14px; max-width: 760px; width: 100%; }
.loja-pag__cab { display: flex; align-items: center; gap: 14px; }
.loja-pag__cab .row__av { width: 56px; height: 56px; }
.loja-pag__cab h1 { font-size: 24px; letter-spacing: -.03em; }
.loja-pag__cab p { margin: 2px 0 0; color: var(--texto-2); font-size: 14px; }
.loja-pag__pagar { position: sticky; bottom: calc(64px + 24px + env(safe-area-inset-bottom)); z-index: 5; }
@media (min-width: 860px) { .loja-pag__pagar { bottom: 20px; max-width: 360px; } }
.promo-linha { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: var(--r); background: var(--cinza); }
.promo-linha__rot { flex: none; min-width: 74px; text-align: center; background: var(--grad); color: #fff; font-weight: 800; font-size: 14px; padding: 10px 8px; border-radius: 10px; line-height: 1.1; }
.promo-linha b { font-size: 15.5px; }
.promo-linha p { margin: 2px 0; font-size: 13.5px; color: var(--texto-2); }
.promo-linha small { font-size: 12.5px; color: var(--texto-2); }

/* Cálculo no pagamento */
.calc-pag { display: grid; gap: 6px; margin: 10px 0 6px; font-size: 14px; text-align: left; }
.calc-pag:empty { display: none; }
.calc-pag > div { display: flex; justify-content: space-between; gap: 10px; }
.calc-pag b { font-variant-numeric: tabular-nums; }
.calc-pag .mais { color: var(--verde-esc); }
.calc-pag__promo { justify-content: flex-start !important; align-items: center; gap: 8px !important; background: var(--verde-suave); color: var(--verde-esc); padding: 8px 10px; border-radius: 10px; }
.calc-pag__promo svg { width: 18px; height: 18px; flex: none; }

/* Admin/lojista: formulários da vitrine */
.campo-img { display: flex; gap: 14px; align-items: center; background: var(--cinza); border-radius: var(--r-sm); padding: 12px; }
.campo-img__prev { width: 96px; height: 60px; border-radius: 8px; background: var(--cinza-2) center / cover no-repeat; display: grid; place-items: center; color: var(--texto-3); flex: none; }
.campo-img__prev svg { width: 26px; height: 26px; }
.campo-img .acoes-lin { margin-top: 6px; }
.campo-img .acoes-lin .btn { min-width: 0; flex: none; }
.tipos-promo { display: grid; gap: 8px; }
.tipo-promo { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-sm); background: var(--cinza); cursor: pointer; border: 2px solid transparent; }
.tipo-promo:has(input:checked) { border-color: var(--verde-forte); background: var(--verde-suave); }
.tipo-promo input { accent-color: var(--verde-forte); margin-top: 3px; }
.tipo-promo b { display: block; font-size: 15px; }
.tipo-promo small { font-size: 13px; color: var(--texto-2); }
@media (min-width: 700px) { .tipos-promo { grid-template-columns: repeat(3, 1fr); } }
.grade-banners { display: grid; gap: 16px; }
@media (min-width: 900px) { .grade-banners { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.banner-adm { display: grid; gap: 8px; }
.banner-adm .banner { min-height: 130px; }
.banner-adm--off { opacity: .45; }
.banner-adm__info { display: grid; gap: 6px; }
.banner-adm__info .acoes-lin .btn { min-width: 0; flex: none; }
.chips-esc { display: flex; flex-wrap: wrap; gap: 6px; }
#sug { display: flex; flex-wrap: wrap; gap: 6px; }
.row__dir .acoes-lin .btn { min-width: 0; }
@media (max-width: 859px) { .tabbar__item--web { display: none; } }
.topo-vazio { height: calc(14px + env(safe-area-inset-top)); }
.card-promo > * { min-width: 0; overflow-wrap: anywhere; }
.card-promo__tit { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-promo__regra { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }