/* Piloto — identidade visual do painel (estilo shadcn: zinco, fonte Geist). */
@font-face { font-family: "Geist"; src: url("/public/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --font: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bg: #ffffff; --side: #fafafa; --card: #ffffff; --ink: #09090b; --muted: #71717a; --line: #e4e4e7;
  --acc: #18181b; --acc-ink: #fafafa; --soft: #f4f4f5; --ring: #a1a1aa; --overlay: rgba(0, 0, 0, .45);
  --ok: #15803d; --ok-bg: #f0fdf4; --err: #dc2626; --err-bg: #fef2f2; --warn: #a16207; --warn-bg: #fefce8;
  --b-laranja: #ea580c; --b-laranja-bg: #fff7ed; --b-roxo: #7c3aed; --b-roxo-bg: #f5f3ff;
  --b-azul: #1f5fd1; --b-azul-bg: #eff6ff; --b-verde: #16a34a; --b-verde-bg: #f0fdf4;
  --evento: #ea580c; --evento-ink: #fff;
  --zap-fundo: #e5ddd5; --zap-bolha: #dcf8c6;
  --danger-bg: #dc2626; --danger-ink: #fff;
  --lixeira-ink: #3b1d24;
  --topo-bg: #09090b; --topo-ink: #fafafa; --topo-muted: #a1a1aa; --topo-line: #27272a; --topo-hover: #27272a;
  --r: 8px; --r-sm: 6px; --r-card: 12px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #09090b; --side: #0c0c0e; --card: #09090b; --ink: #fafafa; --muted: #a1a1aa; --line: #27272a;
    --acc: #fafafa; --acc-ink: #18181b; --soft: #27272a; --ring: #52525b; --overlay: rgba(0, 0, 0, .7);
    --ok: #4ade80; --ok-bg: #052e16; --err: #f87171; --err-bg: #2a0f0f; --warn: #facc15; --warn-bg: #2a2205;
    --b-laranja: #fb923c; --b-laranja-bg: #2a1608; --b-roxo: #a78bfa; --b-roxo-bg: #1e1638;
    --b-azul: #60a5fa; --b-azul-bg: #0f1e3d; --b-verde: #4ade80; --b-verde-bg: #0a2414;
    --evento: #f97316; --evento-ink: #fff;
    --danger-bg: #b91c1c; --danger-ink: #fff;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #09090b; --side: #0c0c0e; --card: #09090b; --ink: #fafafa; --muted: #a1a1aa; --line: #27272a;
  --acc: #fafafa; --acc-ink: #18181b; --soft: #27272a; --ring: #52525b; --overlay: rgba(0, 0, 0, .7);
  --ok: #4ade80; --ok-bg: #052e16; --err: #f87171; --err-bg: #2a0f0f; --warn: #facc15; --warn-bg: #2a2205;
  --b-laranja: #fb923c; --b-laranja-bg: #2a1608; --b-roxo: #a78bfa; --b-roxo-bg: #1e1638;
  --b-azul: #60a5fa; --b-azul-bg: #0f1e3d; --b-verde: #4ade80; --b-verde-bg: #0a2414;
  --evento: #f97316; --evento-ink: #fff;
  --danger-bg: #b91c1c; --danger-ink: #fff;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; display: flex; min-height: 100vh; background: var(--bg); color: var(--ink); font: 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--ink); }
h1 { margin: 0 0 18px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
h1.sub { margin-top: 28px; font-size: 18px; }
main h2 { font-size: 16px; margin: 0; font-weight: 600; }

/* Ícones de traço fino */
svg.ic { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Marca */
.brand { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px; color: var(--ink); }
.mark { width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--acc); color: var(--acc-ink); display: grid; place-items: center; flex: none; }
.mark svg.ic { width: 15px; height: 15px; }

/* Menu lateral */
.side { width: 212px; flex: none; position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--side); border-right: 1px solid var(--line); padding: 16px 10px; display: flex; flex-direction: column; gap: 2px; }
.side .brand { margin: 0 8px 18px; }
.side a, .side .link { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r-sm); color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; }
.side a:hover, .side .link:hover { background: var(--soft); color: var(--ink); }
.side a.on { background: var(--soft); color: var(--ink); font-weight: 600; }
.side form { margin: 0; }
.side .link { width: 100%; }
.sep { height: 1px; background: var(--line); margin: 10px 6px; flex: none; }
.link { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 8px 0; font: inherit; text-align: left; }

/* Área principal e barra do topo */
.main { flex: 1; min-width: 0; }
header.top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 22px; background: var(--topo-bg); border-bottom: 1px solid var(--topo-line); }
header.top .crumb { color: var(--topo-muted); }
header.top .crumb b { color: var(--topo-ink); }
header.top .brand { color: var(--topo-ink); }
header.top .mark { background: var(--topo-ink); color: var(--topo-bg); }
header.top .btn.tema { background: transparent; border-color: var(--topo-line); color: var(--topo-ink); }
header.top .btn.tema:hover { background: var(--topo-hover); }
header.top .brand.mobile { display: none; }
.crumb { color: var(--muted); font-size: 13px; margin-right: auto; }
.crumb b { color: var(--ink); font-weight: 500; }
.btn.tema { width: 34px; height: 34px; padding: 0; }
.tema .i-sol { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tema .i-lua { display: none; } :root:not([data-theme="light"]) .tema .i-sol { display: block; } }
:root[data-theme="dark"] .tema .i-lua { display: none; }
:root[data-theme="dark"] .tema .i-sol { display: block; }
main { padding: 24px 28px; }

/* Selinho (pill) e estado do WhatsApp */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); white-space: nowrap; }
.pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.wa-on { color: var(--ink); }
.wa-on i { background: var(--ok); }
.wa-espera { color: var(--warn); background: var(--warn-bg); border-color: var(--line); }
.wa-off { color: var(--muted); background: var(--bg); border-color: var(--line); }

/* Abas (ex.: período) */
.tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--soft); border-radius: var(--r); margin-bottom: 16px; }
.tabs a { padding: 5px 12px; border-radius: var(--r-sm); color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 500; }
.tabs a.on { background: var(--bg); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
a.on { font-weight: 600; }

/* Cartões e grade */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r); background: var(--soft); }
.card h2 { font-size: 14px; margin: 2px 0; font-weight: 600; }
.card form { margin: 0; }
.card label.cupom { display: flex; flex-direction: row; align-items: center; gap: 6px; font-weight: 400; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.card label.cupom svg.ic { width: 14px; height: 14px; }
.card label.cupom select { flex: 1; min-width: 0; height: 28px; font-size: 12px; padding: 0 6px; color: var(--ink); }
.card .btn.primary { width: 100%; }
/* Cartão de oferta (Aprovar) */
.card.oferta { gap: 9px; padding: 12px; }
.card.oferta .foto { position: relative; }
.card.oferta .foto img { border-radius: var(--r); }
.card.oferta .foto .off { position: absolute; top: 8px; left: 8px; background: var(--acc); color: var(--acc-ink); font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; }
.card.oferta .foto .extra { position: absolute; top: 8px; right: 8px; background: var(--bg); color: var(--ink); font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); }
.card.oferta h2 { font-size: 13.5px; font-weight: 500; line-height: 1.35; margin: 0; }
.card.oferta h2.nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card.oferta .price { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.card.oferta .price s { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 6px; }
.card.oferta .origem { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.card.oferta .origem .selo { background: var(--bg); border: 1px solid var(--line); font-weight: 500; font-size: 11px; }
.card.oferta .origem .meta { font-size: 12px; overflow-wrap: anywhere; }
.stats { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; background: var(--bg); border: 1px solid var(--line); padding: 4px 8px; border-radius: var(--r); color: var(--muted); }
.chip svg.ic { width: 13px; height: 13px; }
.chip.money { background: var(--ok-bg); border-color: transparent; color: var(--ok); font-weight: 500; }
.lbl { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.card.oferta textarea { font-size: 12px; margin-bottom: 8px; }
.acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.acts form { margin: 0; }
.acts .btn { width: 100%; font-size: 12.5px; height: 32px; }
.acts .btn.ghost.danger { background: var(--bg); border-color: var(--line); color: var(--ink); }
.acts .btn.ghost.danger:hover { background: var(--soft); color: var(--ink); }
.card.oferta > .btn.secondary { width: 100%; height: 32px; font-size: 12.5px; color: var(--muted); border-color: transparent; background: transparent; }
.card.oferta > .btn.secondary:hover { background: var(--soft); color: var(--ink); }
.erro-card { max-width: 520px; }
.erro-card h1 { margin: 0; }
.erro-card p { margin: 0; }

/* Textos de apoio */
.price { margin: 0; font-size: 20px; font-weight: 600; color: var(--ink); letter-spacing: -.02em; }
.off { font-size: 12px; font-weight: 600; color: var(--ink); background: var(--soft); padding: 2px 7px; border-radius: var(--r-sm); }
.meta { margin: 0; color: var(--muted); font-size: 13px; }
.badge { background: var(--warn-bg); color: var(--warn); font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; }
.selo { background: var(--soft); color: var(--ink); font-weight: 600; font-size: 12px; padding: 2px 9px; border-radius: 999px; }
.vazio, .muted { color: var(--muted); }
.vazio { background: var(--card); border: 1px dashed var(--line); border-radius: var(--r-card); padding: 20px; text-align: center; }
.status { margin: 0 0 16px; color: var(--muted); }
.secao { margin: 28px 0 12px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.row form { margin: 0; }

/* Mensagens */
.ok, .aviso, .erro { margin: 0 0 12px; font-size: 14px; }
.ok { color: var(--ok); background: var(--ok-bg); border: 1px solid var(--line); padding: 9px 13px; border-radius: var(--r); }
.aviso { color: var(--warn); background: var(--warn-bg); border: 1px solid var(--line); padding: 9px 13px; border-radius: var(--r); }
.erro { color: var(--err); }
p.erro { background: var(--err-bg); border: 1px solid var(--line); padding: 9px 13px; border-radius: var(--r); }

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: var(--r-sm); padding: 0 14px; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, opacity .15s; }
.btn:hover { background: var(--soft); }
.btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 55%, transparent); }
.btn.primary { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.btn.primary:hover { background: var(--acc); opacity: .9; }
.btn.secondary, .btn.outline { background: var(--bg); border-color: var(--line); color: var(--ink); }
.btn.secondary:hover, .btn.outline:hover { background: var(--soft); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--soft); color: var(--ink); }
.btn.ghost.danger:hover { background: var(--err-bg); color: var(--err); }
.btn.small { height: 32px; padding: 0 10px; font-size: 12.5px; }
.btn svg.ic { width: 16px; height: 16px; }

/* Campos */
input:not([type=checkbox]):not([type=radio]), select, textarea { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); font: inherit; padding: 8px 10px; }
input:not([type=checkbox]):not([type=radio]), select { height: 36px; padding-block: 0; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 40%, transparent); }
textarea { width: 100%; resize: vertical; margin-bottom: 8px; }
input[type=checkbox], input[type=radio] { accent-color: var(--acc); }

/* Formulários */
.form { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 20px; max-width: 560px; margin-bottom: 24px; display: flex; flex-direction: column; gap: 14px; }
.form label { display: flex; flex-direction: column; gap: 5px; font-weight: 500; font-size: 14px; }
.form label.check { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 400; }
.form small { font-weight: 400; color: var(--muted); flex-basis: 100%; font-size: 12.5px; }
.form fieldset { border: 1px solid var(--line); border-radius: var(--r); display: flex; gap: 12px; flex-wrap: wrap; padding: 10px 14px; }
.form fieldset legend { color: var(--muted); font-size: 13px; padding: 0 4px; }
.form h2 { font-size: 16px; margin: 0; }
.form textarea { margin-bottom: 0; }
.inline { display: flex; gap: 6px; margin: 0; flex-wrap: wrap; }
.inline input { min-width: 260px; flex: 1; }
.check { display: inline-flex; align-items: center; gap: 6px; }

/* Listas (fila, enviadas, CTAs, log) */
.fila { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); overflow: hidden; }
.item { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 12px; }
.fila .item { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 12px 16px; background: transparent; }
.fila .item:last-child { border-bottom: 0; }
.fila .pos { width: 22px; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: right; flex: none; }
.item img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r); background: var(--soft); }
.fila .item img { width: 52px; height: 52px; border: 1px solid var(--line); flex: none; }
.item .info { flex: 1; min-width: 180px; }
.item h2 { font-size: 14px; margin: 0 0 4px; font-weight: 600; }
.item .price { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.etq { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); }
.card img.previa, .item img.previa { width: 120px; height: 120px; aspect-ratio: 1; }
.acoes { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.acoes form { margin: 0; }
.ctas { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ctas li { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 12px; }
.log { list-style: none; padding: 0; margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.log li { padding: 7px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.log li:last-child { border-bottom: 0; }
.log-erro { color: var(--err); }

/* Tabelas */
.tabela { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; margin-bottom: 24px; font-size: 14px; }
.tabela th, .tabela td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.tabela th { color: var(--muted); font-size: 13px; font-weight: 500; background: var(--bg); }
.tabela tr:last-child td { border-bottom: 0; }

/* Prévia da mensagem e QR */
.previa { background: var(--zap-bolha); color: #111; padding: 16px; border-radius: var(--r-card); white-space: pre-wrap; max-width: 480px; font: inherit; }
.qr { display: block; margin: 12px 0; border-radius: var(--r-card); border: 1px solid var(--line); background: #fff; }

/* Login */
.login-page { justify-content: center; align-items: center; padding: 16px; position: relative; }
.login-page .btn.tema { position: absolute; top: 16px; right: 16px; }
.login-box { background: var(--card); padding: 30px 28px; border-radius: var(--r-card); border: 1px solid var(--line); box-shadow: var(--shadow); width: min(360px, 100%); display: flex; flex-direction: column; gap: 10px; }
.login-box .brand { font-size: 18px; margin-bottom: 8px; }
.login-box h1 { font-size: 16px; margin: 0 0 6px; color: var(--muted); font-weight: 500; }
.login-box label { font-weight: 500; font-size: 14px; }
.login-box .btn.primary { width: 100%; margin-top: 6px; }

/* Barra de baixo do celular */
.tabbar { display: none; }
.tabbar summary { list-style: none; cursor: pointer; }
.tabbar summary::-webkit-details-marker { display: none; }

@media (max-width: 760px) {
  body { display: block; padding-bottom: 76px; }
  .side { display: none; }
  header.top { padding: 10px 16px; }
  header.top .brand.mobile { display: flex; font-size: 15px; margin-right: auto; }
  header.top .brand.mobile .mark { width: 24px; height: 24px; }
  .crumb { display: none; }
  main { padding: 18px 16px; }
  .grid { grid-template-columns: 1fr; }
  .form { max-width: none; }
  .inline input { min-width: 0; }
  .btn { height: 40px; }
  .btn.small { height: 36px; }
  .btn.tema { height: 34px; }
  .tabela { display: block; overflow-x: auto; }
  .fila .acoes .txt { display: none; }
  .fila .acoes { flex-basis: 100%; justify-content: flex-end; }

  .tabbar { display: flex; justify-content: space-around; position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--bg); border-top: 1px solid var(--line); padding: 6px 4px 10px; }
  .tabbar > a, .tabbar summary { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 58px; padding: 4px 6px; font-size: 11px; color: var(--muted); text-decoration: none; }
  .tabbar svg.ic { width: 21px; height: 21px; }
  .tabbar > a.on, .tabbar .mais.on > summary, .tabbar .mais[open] > summary { color: var(--ink); font-weight: 600; }
  .mais-menu { position: fixed; right: 10px; bottom: 72px; width: min(240px, calc(100vw - 20px)); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: 0 8px 24px rgba(0, 0, 0, .14); padding: 6px; display: flex; flex-direction: column; }
  .mais-menu a, .mais-menu .link { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; font-size: 15px; width: 100%; }
  .mais-menu a.on { background: var(--soft); color: var(--ink); font-weight: 600; }
  .mais-menu form { margin: 0; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
}

/* Tela Início */
.inicio-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.inicio-topo h1 { margin: 0; }
.inicio-topo h1 small { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; font-weight: 400; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.card.stat { text-decoration: none; color: var(--ink); gap: 0; }
.card.stat:hover { border-color: var(--muted); }
.card.stat .h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 500; color: var(--muted); }
.card.stat .h svg.ic { width: 16px; height: 16px; }
.card.stat .n { font-size: 26px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin: 10px 0 4px; }
.card.stat .n.money { color: var(--ok); }
.card.stat .n em { font-style: normal; font-size: 14px; font-weight: 400; color: var(--muted); margin-left: 6px; letter-spacing: 0; }
.cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px 16px; font-size: 14px; }
.cta b { color: var(--ink); font-weight: 600; }
.cta .btn svg.ic { width: 15px; height: 15px; }
.cta.ok-strip { color: var(--ok); background: var(--ok-bg); border-color: var(--line); justify-content: flex-start; }
.cta.ok-strip svg.ic { vertical-align: -4px; }
@media (max-width: 760px) {
  .cards { grid-template-columns: 1fr; }
}

/* Tela Cupons */
.cupons { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.cupons .form { max-width: none; margin: 0; }
.novo-cupom .btn.primary { width: 100%; }
.dica { margin: 0; font-size: 12.5px; }
.form fieldset.como { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border: 0; padding: 0; }
.form fieldset.como legend { color: var(--ink); font-weight: 600; font-size: 14px; padding: 0; margin-bottom: 5px; }
.opcao, .gchip { position: relative; }
.opcao input, .gchip input { position: absolute; opacity: 0; pointer-events: none; }
.form label.opcao { display: block; cursor: pointer; }
.opcao > span { display: block; height: 100%; border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; font-weight: 400; }
.opcao b { display: block; font-size: 14px; margin-bottom: 2px; }
.opcao small { font-size: 12px; }
.opcao input:checked + span { border-color: var(--ink); background: var(--soft); }
.opcao input:checked + span b { color: var(--ink); }
.opcao input:focus-visible + span, .gchip input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 2px; }
.avancado summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; color: var(--ink); font-weight: 600; font-size: 14px; }
.avancado summary::-webkit-details-marker { display: none; }
.avancado summary svg.ic { width: 16px; height: 16px; transition: transform .15s; }
.avancado[open] summary svg.ic { transform: rotate(90deg); }
.avancado-campos { display: flex; flex-direction: column; gap: 14px; border-top: 1px dashed var(--line); margin-top: 12px; padding-top: 14px; }
.form fieldset.grupos { border: 0; padding: 0; gap: 6px; }
.form fieldset.grupos legend { color: var(--ink); font-weight: 600; font-size: 14px; padding: 0; margin-bottom: 5px; }
.form label.gchip { display: inline-flex; flex-direction: row; cursor: pointer; font-weight: 500; }
.gchip > span { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; color: var(--muted); }
.gchip > span svg.ic { width: 14px; height: 14px; display: none; }
.gchip em { font-style: normal; font-size: 12px; }
.gchip input:checked + span { border-color: var(--ink); background: var(--soft); color: var(--ink); }
.gchip input:checked + span svg.ic { display: inline; }
.dois { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.abas { position: relative; gap: 0; }
.abas > input { position: absolute; opacity: 0; pointer-events: none; }
.abas .tabs { display: flex; margin-bottom: 12px; }
.abas .tabs label { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 4px; border-radius: 8px; color: var(--muted); font-size: 13.5px; cursor: pointer; }
.abas .tabs .n { background: var(--acc); color: var(--acc-ink); font-size: 11px; font-weight: 600; padding: 0 6px; border-radius: 999px; }
#aba-ativos:checked ~ .tabs [for=aba-ativos], #aba-shopee:checked ~ .tabs [for=aba-shopee], #aba-historico:checked ~ .tabs [for=aba-historico] { background: var(--bg); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }
#aba-ativos:focus-visible ~ .tabs [for=aba-ativos], #aba-shopee:focus-visible ~ .tabs [for=aba-shopee], #aba-historico:focus-visible ~ .tabs [for=aba-historico] { outline: 2px solid var(--ring); }
.painel { display: none; }
#aba-ativos:checked ~ #painel-ativos, #aba-shopee:checked ~ #painel-shopee, #aba-historico:checked ~ #painel-historico { display: block; }
.painel .dica { margin-bottom: 4px; }
.painel .vazio { margin: 8px 0 0; padding: 16px; font-size: 14px; }
.cp { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cp:last-child { border-bottom: 0; }
.cp form { margin: 0; }
.cp .tk { width: 38px; height: 38px; border-radius: 10px; background: var(--soft); color: var(--ink); display: grid; place-items: center; flex: none; }
.cp .t { flex: 1; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.cp .t code { font-family: ui-monospace, monospace; font-weight: 700; background: var(--bg); border: 1px dashed var(--line); padding: 1px 6px; border-radius: 6px; }
.cp .t small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.cp.promo { align-items: flex-start; }
.cp.promo img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; background: var(--soft); flex: none; }
.cp.promo .acoes { margin-top: 8px; }
.gtags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.gtag { font-size: 11.5px; font-weight: 500; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.cp .pill { font-size: 11.5px; padding: 2px 9px; }
.pill.st-sent { color: var(--ok); background: var(--ok-bg); border-color: var(--line); }
.link-padrao { margin-top: 12px; font-size: 13px; color: var(--muted); }
.link-padrao > p { display: flex; align-items: center; gap: 6px; margin: 0; flex-wrap: wrap; }
.link-padrao > p svg.ic { width: 16px; height: 16px; }
.link-padrao b { color: var(--ink); font-weight: 500; word-break: break-all; }
.link-padrao summary { list-style: none; color: var(--ink); margin-top: 4px; }
.link-padrao summary::-webkit-details-marker { display: none; }
.link-padrao .form { margin-top: 8px; }
@media (max-width: 1000px) {
  .cupons { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .form fieldset.como, .dois { grid-template-columns: 1fr; }
}

/* Faixa da busca na Início */
.busca-faixa { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px 16px; margin: 0 0 16px; }
.busca-faixa .num { font-size: 32px; font-weight: 600; letter-spacing: -.03em; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.busca-faixa .t { flex: 1; min-width: 180px; font-size: 14px; }
.busca-faixa .t small { display: block; color: var(--muted); font-size: 12.5px; }
.busca-faixa .t small.aviso { display: inline-block; margin: 6px 0 0; padding: 3px 9px; font-size: 12px; }
.busca-faixa .btn:disabled { opacity: .6; cursor: default; }

/* Página Meus grupos */
.gs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.card.grupo { gap: 10px; }
.card.grupo.pausado { opacity: .6; }
.card.grupo .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card.grupo .nome { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.card.grupo .wa { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.card.grupo p { margin: 0; font-size: 13px; }
.mem { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.mem .tot { font-size: 26px; font-weight: 700; line-height: 1; }
.mem .tot small { font-size: 12px; color: var(--muted); font-weight: 400; }
.mem svg { flex: none; max-width: 45%; height: auto; }
.spark { color: var(--ink); }
.spark.pausada { color: var(--muted); }
.mov { display: flex; gap: 6px; flex-wrap: wrap; }
.chip.up { color: var(--ok); }
.chip.dn { color: var(--err); }
.chip.s { font-weight: 700; }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.kv > div { background: var(--soft); border-radius: 9px; padding: 7px 9px; font-size: 12px; color: var(--muted); }
.kv b { display: block; color: var(--ink); font-size: 15px; }
.kv a { font-size: 11px; }
.card.grupo .rodape { display: flex; justify-content: flex-end; }
.voltar { display: inline-block; margin-bottom: 10px; font-size: 14px; }

/* Eventos */
.side a .new, .tabbar a .new, .mais-menu a .new { margin-left: auto; font-size: 10px; font-style: normal; background: var(--evento); color: var(--evento-ink); border-radius: 999px; padding: 1px 6px; font-weight: 700; }
h1 small { font-size: 13px; font-weight: 400; margin-left: 8px; }
.ev-novo { max-width: 560px; }
.ev-lista { max-width: 760px; gap: 0; }
.ev-lista h2 { margin-bottom: 6px; }
.ev-item { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.ev-lista h2 + .ev-item { border-top: 0; }
.ev-item .t { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; }
.ev-item .t b { font-size: 15px; }
.ev-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--soft); color: var(--ink); flex: none; }
.ev-ico.hot { background: var(--evento); color: var(--evento-ink); }
.ev-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.ev-cab h1 { margin: 0; display: flex; align-items: center; gap: 8px; }
.ev-cab h1 svg.ic { width: 24px; height: 24px; color: var(--evento); }
.ev-cab-acoes { display: flex; gap: 8px; align-items: center; }
.ev-cab-acoes form { margin: 0; }
.ev-duas { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; align-items: start; }
.ev-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; margin: 0; }
.ev-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
label.f { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
label.f input, label.f select { width: 100%; }
label.f small { font-weight: 400; }
.ev-liga { display: flex; align-items: flex-start; gap: 10px; }
.ev-liga span { display: flex; flex-direction: column; }
.ev-liga small { font-size: 12.5px; }
.ev-zap { background: var(--zap-fundo); border-radius: 12px; padding: 12px; }
.ev-bolha { background: var(--zap-bolha); color: #111; border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13.5px; max-width: 340px; margin: 0; white-space: pre-wrap; word-break: break-word; }
.ev-linha { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.ev-linha form { margin: 0; }
.ev-edit, .ev-aviso { display: flex; gap: 6px; flex: 1; min-width: 0; margin: 0; }
.ev-edit input, .ev-aviso input[name=text] { flex: 1; min-width: 0; }
.ev-novo-item { margin-top: 8px; }
@media (max-width: 820px) {
  .ev-duas { grid-template-columns: 1fr; }
  .ev-aviso { flex-wrap: wrap; }
  .ev-aviso input[type=datetime-local] { flex: 1 1 100%; }
  .ev-aviso input[name=text] { flex: 1 1 60%; }
}

/* Faixa do evento ligado, na Início */
.evento-faixa { display: block; background: var(--evento); color: var(--evento-ink); border-radius: var(--r-card); padding: 14px 16px; margin: 0 0 16px; text-decoration: none; }
.evento-faixa .top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.evento-faixa .big { font-size: 17px; font-weight: 700; }
.evento-faixa .fim { font-size: 13px; }
.evento-faixa .stats { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; opacity: .95; }
.evento-faixa .stats b { font-size: 16px; display: block; }

/* Afiliações */
.wa-err { color: var(--err); background: var(--err-bg); border-color: var(--line); }
.af-conta .row h2 { margin: 0; }
.af-conta textarea { margin-bottom: 0; font-family: ui-monospace, monospace; font-size: 12px; }
.af-outras { max-width: 560px; margin-bottom: 24px; }
.af-grupo { max-width: 560px; margin-bottom: 10px; }
.af-grupo > form:first-child { display: flex; flex-direction: column; gap: 10px; }
.af-lojas { display: flex; flex-wrap: wrap; gap: 6px; }
.af-lojas .chip { cursor: pointer; font-size: 13px; }
.af-lojas .chip:has(input:checked) { background: var(--soft); border-color: var(--ink); color: var(--ink); font-weight: 600; }
.af-destino { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.af-novo { margin-top: 14px; }
.af-novo h2 { margin: 0; font-size: 15px; }

/* Relatório */
.b-dir { fill: var(--ink); }
.b-ind { fill: var(--muted); }
.b-out { fill: var(--ring); }
.rel-periodo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 4px; }
.rel-periodo .tabs { margin-bottom: 0; }
.rel-datas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 14px; }
.rel-datas input[type=date] { padding: 5px 8px; font-size: 14px; }
.rel-datas.on .muted { color: var(--ink); font-weight: 600; }
.rel-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 6px; }
.rel-kpis .card.stat .n { font-size: 26px; margin: 8px 0 0; overflow-wrap: anywhere; }
.rel-outro { margin: 0 0 12px; font-size: 13px; }
.rel-box { margin-bottom: 14px; min-width: 0; }
.rel-box h2 { font-size: 15px; }
.rel-box > p.muted { margin: 0; font-size: 14px; }
.rel-grafico svg { display: block; width: 100%; height: auto; color: var(--ink); }
.rel-grafico svg text { fill: var(--muted); }
.rel-grafico svg text.t { fill: var(--ink); font-weight: 600; }
.rel-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--muted); }
.rel-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.l-dir { background: var(--ink); }
.l-ind { background: var(--muted); }
.l-out { background: var(--ring); }
.s-ok { background: var(--ok); }
.s-pend { background: var(--warn); }
.s-canc { background: var(--err); }
.rel-status { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--line); }
.rel-dois { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.rel-dois .rel-box { margin-bottom: 0; }
.rel-dois { margin-bottom: 14px; }
.rel-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; margin-bottom: 14px; }
.rel-tres .rel-box { margin-bottom: 0; }
.rel-top, .rel-quebra { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; }
.rel-top li { display: flex; align-items: center; gap: 10px; }
.rel-top img, .rel-sem-foto { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; background: var(--soft); flex: none; }
.rel-top .nome, .rel-quebra .nome { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rel-top .nome small { display: block; font-size: 12px; }
.rel-top b, .rel-quebra b { white-space: nowrap; }
.rel-quebra small { font-size: 12px; }
.rel-barra { height: 6px; border-radius: 3px; background: var(--soft); margin: 4px 0 3px; overflow: hidden; }
.rel-barra i { display: block; height: 100%; background: var(--ink); border-radius: 3px; }
.rel-tabela { overflow-x: auto; margin-bottom: 12px; border-radius: var(--r-card); }
.rel-tabela .tabela { margin-bottom: 0; font-size: 13.5px; }
.tabela.vendas td { vertical-align: middle; }
.tabela.vendas .nowrap { white-space: nowrap; }
.tabela.vendas .produto { display: flex; align-items: center; gap: 8px; min-width: 220px; max-width: 360px; }
.tabela.vendas .produto img { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; flex: none; background: var(--soft); }
.tabela.vendas tr.cancelada td { color: var(--muted); }
.rel-paginas { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; font-size: 13.5px; }
@media (max-width: 1000px) {
  .rel-tres { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .rel-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rel-kpis .card.stat .n { font-size: 20px; }
  .rel-dois, .rel-tres { grid-template-columns: 1fr; }
  .rel-periodo .tabs { display: flex; width: 100%; }
  .rel-periodo .tabs a { flex: 1; text-align: center; padding: 6px 4px; }
  .rel-datas input[type=date] { flex: 1 1 120px; min-width: 0; }
  .rel-tabela .tabela { display: table; }
  .rel-grafico svg text { font-size: 20px; }
}

/* Número de itens na Fila, ao lado do menu (discreto) */
.contador { font-style: normal; font-weight: 700; font-size: 11px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; line-height: 1; background: var(--line); color: var(--ink); }
.contador[hidden] { display: none; }
.side a .contador, .mais-menu a .contador { margin-left: auto; }
.side a.on .contador { background: var(--card); color: var(--ink); }
.tabbar > a { position: relative; }
.tabbar > a .contador { position: absolute; top: -2px; left: calc(50% + 6px); min-width: 18px; height: 18px; font-size: 10px; padding: 0 5px; border: 2px solid var(--card); box-sizing: content-box; }

/* Aprovar: cartão aprovado sobe verde; descartado cai na lixeira com carinha */
.grid.ofertas { position: relative; }

.mais-ofertas { display: flex; width: 100%; max-width: 320px; margin: 20px auto 0; }
.card.oferta { transition: background .15s, border-color .15s; }
.card.oferta.saindo { position: relative; z-index: 3; }
.card.oferta.aprovada { background: var(--ok-bg); border-color: var(--ok); }
.card.oferta.descartada { background: var(--err-bg); border-color: var(--err); }
.lixeira { position: absolute; width: 68px; height: 68px; z-index: 4; pointer-events: none; color: var(--lixeira-ink); filter: drop-shadow(0 4px 8px rgb(0 0 0 / .15)); }
.lixeira svg { width: 100%; height: 100%; overflow: visible; }
.lixeira .tampa { transform-box: fill-box; transform-origin: left bottom; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.lixeira.aberta .tampa { transform: rotate(-40deg) translate(-2px, -4px); }
.lixeira .boca-aberta { opacity: 0; transition: opacity .15s; }
.lixeira.aberta .boca-aberta { opacity: 1; }
.lixeira.aberta .boca-fechada { opacity: 0; }

/* Agendamento: resumo e linhas com ícone */
.agenda { max-width: 640px; }
.agenda-resumo { background: var(--soft); color: var(--ink); border: 0; border-radius: var(--r-card); padding: 18px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 10px; }
.agenda-resumo .m { display: block; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.agenda-resumo b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.agenda-resumo .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.agenda-resumo .chips span { display: inline-flex; align-items: center; gap: 6px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-size: 12.5px; }
.agenda-resumo .chips em { font-style: normal; }
.agenda-resumo svg.ic { width: 14px; height: 14px; color: var(--muted); }
.agenda-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 0; margin-bottom: 18px; overflow: hidden; }
.agenda-box h2 { margin: 0; padding: 16px 18px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 600; color: var(--ink); }
.agenda-box > p.muted { margin: 0; padding: 10px 18px 0; font-size: 13px; }
.agenda-box .ln { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border: 0; border-bottom: 1px solid var(--line); margin: 0; min-width: 0; }
.agenda-box .rodape { display: flex; justify-content: flex-end; padding: 14px 18px; background: var(--side); }
.agenda .bub { width: 34px; height: 34px; border-radius: var(--r); display: grid; place-items: center; flex: none; }
.agenda .bub.azul { background: var(--b-azul-bg); color: var(--b-azul); }
.agenda .bub.laranja { background: var(--b-laranja-bg); color: var(--b-laranja); }
.agenda .bub.roxo { background: var(--b-roxo-bg); color: var(--b-roxo); }
.agenda .bub.verde { background: var(--b-verde-bg); color: var(--b-verde); }
.agenda .tx { flex: 1; min-width: 0; }
.agenda .tx b { display: block; font-size: 14.5px; }
.agenda .tx small { display: block; color: var(--muted); font-size: 12.5px; }
.agenda input[type=time] { font-weight: 600; }
.agenda .passo { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.agenda .passo input { width: 58px; text-align: center; font-weight: 600; }
.agenda .passo .btn { width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 18px; }
.agenda .passo .btn:hover { background: var(--soft); }
.agenda .passo small { color: var(--muted); font-size: 12.5px; min-width: 22px; }
.agenda .dias { display: flex; flex-wrap: wrap; gap: 6px; }
.agenda .dias label { cursor: pointer; }
.agenda .dias input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.agenda .dias span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); color: var(--muted); font-size: 12.5px; font-weight: 500; background: var(--bg); }
.agenda .dias input:checked + span { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.agenda .dias input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 520px) {
  .agenda-box .ln { flex-wrap: wrap; }
  .agenda-box .ln .tx { flex-basis: calc(100% - 48px); }
  .agenda-box .ln > input[type=time], .agenda-box .ln > .passo, .agenda-box .ln > .dias { margin-left: 48px; }
  .agenda-box .rodape .btn.primary { width: 100%; }
}

/* Janela de confirmação (dialog nativo) */
.dlg { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: calc(var(--r) + 4px); padding: 22px; width: min(420px, calc(100% - 32px)); box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.dlg[open] { display: flex; flex-direction: column; gap: 8px; }
.dlg::backdrop { background: var(--overlay); }
.dlg h4 { margin: 0; font-size: 17px; font-weight: 600; }
.dlg p { margin: 0; color: var(--muted); line-height: 1.5; }
.dlg .bts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.btn.danger:not(.ghost) { background: var(--danger-bg); border-color: var(--danger-bg); color: var(--danger-ink); }
.btn.danger:not(.ghost):hover { filter: brightness(.92); }