/* ACHADDINHOS · painel — visual "Achaddinhos Dashboard" (Claude Design): azul, Manrope, cartões de 24, bordas finas.
   Tema claro por padrão; o escuro segue o sistema até a pessoa escolher no botão do menu. Os nomes antigos
   (--bg, --card, --ink, --line, --green…) continuam existindo como apelidos dos tokens novos. */
:root{
  /* superfícies e texto */
  --background:#F4F8FC;--background-secondary:#FFFFFF;--surface:#FFFFFF;--surface-hover:#F2F7FD;
  --foreground:#0B1A2E;--foreground-secondary:#23364F;--muted:#5B6B80;--muted-secondary:#617288;--disabled:#A9B6C6;--icon:#6B7C93;
  /* azul da marca */
  --primary:#1877FF;--primary-solid:#1570F0;--primary-hover:#1366E0;--primary-ink:#1366E0;--on-primary:#FFFFFF;
  --primary-bg:rgba(24,119,255,.08);--primary-border:rgba(24,119,255,.22);--primary-border-soft:rgba(24,119,255,.18);
  --primary-focus:rgba(24,119,255,.55);
  /* bordas */
  --border:rgba(11,26,46,.10);--border-soft:rgba(11,26,46,.08);--border-subtle:rgba(11,26,46,.06);--border-strong:rgba(11,26,46,.14);
  /* situação: sucesso é o próprio azul; aviso e perigo só para status (sempre com texto junto) */
  --warning:#C27C0E;--danger:#E03E3E;
  --warning-ink:#8A5300;--warning-bg:rgba(194,124,14,.12);--warning-border:rgba(194,124,14,.28);
  --danger-ink:#C42B2B;--danger-solid:#C42B2B;--on-danger:#FFFFFF;--danger-bg:rgba(224,62,62,.08);--danger-border:rgba(224,62,62,.24);
  --shopee-bg:#FFE9DE;--shopee-ink:#A8380C;
  /* vidro, gradientes e sombras */
  --surface-glass:rgba(11,26,46,.35);--surface-float:rgba(255,255,255,.97);--surface-nav:rgba(244,248,252,.82);
  --gradient-primary:linear-gradient(135deg,#22A6FF 0%,#1877FF 100%);
  --gradient-hero:linear-gradient(135deg,#EAF5FF 0%,#D6EDFF 55%,#F7FBFF 100%);
  --ach-strong:linear-gradient(135deg,#1877FF 0%,#1366E0 100%);--ach-strong-btn:#FFFFFF;
  --ach-ink:11,26,46;--ach-accent:24,119,255;
  --ring-focus:0 0 0 4px rgba(24,119,255,.10);--shadow-float:0 12px 36px rgba(11,26,46,.14);
  /* tipo, raios e movimento */
  --font-sans:'Manrope','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-card:24px;--r-card-lg:32px;--r-btn:14px;--r-input:16px;--r-well:12px;--r-modal:28px;
  --ease-out:cubic-bezier(.22,1,.36,1);
  /* apelidos dos nomes antigos que ainda têm leitor (o app.js lê --green, --bar2 e --c-*; o teste de tema pede --bg) */
  --bg:var(--background);--soft:rgba(var(--ach-ink),.04);--green:var(--primary);--bar2:rgba(var(--ach-ink),.10);
  /* fatias da rosca de motivos */
  --c-cupom:#E0A21C;--c-desconto:var(--primary);--c-achadinho:var(--muted-secondary);--c-manual:rgba(var(--ach-accent),.4);
  --mostra-lua:block;--mostra-sol:none;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --background:#000000;--background-secondary:#0A0A0A;--surface:#121212;--surface-hover:#1A1A1A;
  --foreground:#F5F5F5;--foreground-secondary:#E5E5E5;--muted:#A3A3A3;--muted-secondary:#8C8C8C;--disabled:#525252;--icon:#A3A3A3;
  --primary:#22A6FF;--primary-solid:#22A6FF;--primary-hover:#48B4FF;--primary-ink:#48B4FF;--on-primary:#000000;
  --primary-bg:rgba(34,166,255,.12);--primary-border:rgba(34,166,255,.24);--primary-border-soft:rgba(34,166,255,.20);
  --primary-focus:rgba(72,180,255,.60);
  --border:rgba(255,255,255,.10);--border-soft:rgba(255,255,255,.08);--border-subtle:rgba(255,255,255,.06);--border-strong:rgba(255,255,255,.14);
  --warning:#F5B942;--danger:#F05252;
  --warning-ink:#F5B942;--warning-bg:rgba(245,185,66,.10);--warning-border:rgba(245,185,66,.20);
  --danger-ink:#F05252;--danger-solid:#F05252;--on-danger:#1B0707;--danger-bg:rgba(240,82,82,.10);--danger-border:rgba(240,82,82,.20);
  --shopee-bg:rgba(255,154,112,.12);--shopee-ink:#FF9A70;
  --surface-glass:rgba(0,0,0,.75);--surface-float:rgba(26,26,26,.97);--surface-nav:rgba(0,0,0,.80);
  --gradient-primary:linear-gradient(135deg,#48B4FF 0%,#1877FF 100%);
  --gradient-hero:linear-gradient(135deg,#141414 0%,#0C0C0C 52%,#000000 100%);
  --ach-strong:linear-gradient(135deg,#48B4FF 0%,#22A6FF 100%);--ach-strong-btn:#000000;
  --ach-ink:255,255,255;--ach-accent:34,166,255;
  --ring-focus:0 0 0 4px rgba(34,166,255,.10);--shadow-float:0 12px 36px rgba(0,0,0,.35);
  --c-cupom:#F5B942;
  --mostra-lua:none;--mostra-sol:block;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --background:#000000;--background-secondary:#0A0A0A;--surface:#121212;--surface-hover:#1A1A1A;
    --foreground:#F5F5F5;--foreground-secondary:#E5E5E5;--muted:#A3A3A3;--muted-secondary:#8C8C8C;--disabled:#525252;--icon:#A3A3A3;
    --primary:#22A6FF;--primary-solid:#22A6FF;--primary-hover:#48B4FF;--primary-ink:#48B4FF;--on-primary:#000000;
    --primary-bg:rgba(34,166,255,.12);--primary-border:rgba(34,166,255,.24);--primary-border-soft:rgba(34,166,255,.20);
    --primary-focus:rgba(72,180,255,.60);
    --border:rgba(255,255,255,.10);--border-soft:rgba(255,255,255,.08);--border-subtle:rgba(255,255,255,.06);--border-strong:rgba(255,255,255,.14);
    --warning:#F5B942;--danger:#F05252;
    --warning-ink:#F5B942;--warning-bg:rgba(245,185,66,.10);--warning-border:rgba(245,185,66,.20);
    --danger-ink:#F05252;--danger-solid:#F05252;--on-danger:#1B0707;--danger-bg:rgba(240,82,82,.10);--danger-border:rgba(240,82,82,.20);
    --shopee-bg:rgba(255,154,112,.12);--shopee-ink:#FF9A70;
    --surface-glass:rgba(0,0,0,.75);--surface-float:rgba(26,26,26,.97);--surface-nav:rgba(0,0,0,.80);
    --gradient-primary:linear-gradient(135deg,#48B4FF 0%,#1877FF 100%);
    --gradient-hero:linear-gradient(135deg,#141414 0%,#0C0C0C 52%,#000000 100%);
    --ach-strong:linear-gradient(135deg,#48B4FF 0%,#22A6FF 100%);--ach-strong-btn:#000000;
    --ach-ink:255,255,255;--ach-accent:34,166,255;
    --ring-focus:0 0 0 4px rgba(34,166,255,.10);--shadow-float:0 12px 36px rgba(0,0,0,.35);
    --c-cupom:#F5B942;
    --mostra-lua:none;--mostra-sol:block;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-sans);background:var(--background);color:var(--foreground);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
button{font:inherit;color:inherit}
a{color:var(--primary-ink)}
code{font-family:var(--font-mono);font-size:.92em}
::selection{background:rgba(var(--ach-accent),.25)}
/* foco sempre visível: contorno azul cheio e o anel de 4px do design */
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;box-shadow:var(--ring-focus)}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(var(--ach-ink),.12);border-radius:8px}
@keyframes achOrb{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.85}}
@keyframes achPulse{0%{box-shadow:0 0 0 0 rgba(var(--ach-accent),.5)}100%{box-shadow:0 0 0 8px rgba(var(--ach-accent),0)}}

/* ---- estrutura ---- */
.app{display:flex;min-height:100vh}
.side{width:256px;flex:none;background:var(--background-secondary);border-right:1px solid var(--border-subtle);color:var(--foreground);padding:20px 14px 14px;display:flex;flex-direction:column;gap:8px;position:sticky;top:0;height:100vh;overflow:hidden;z-index:5}
.side-topo{display:flex;align-items:center;justify-content:space-between;gap:8px;height:48px;padding:0 6px;flex:none}
.brand{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.brand-nome{font-size:18px;font-weight:600;letter-spacing:-.03em;white-space:nowrap}
.brand-sub{font-size:11px;color:var(--muted-secondary);letter-spacing:.08em;text-transform:uppercase;font-weight:600;white-space:nowrap}
.ws{display:flex;align-items:center;gap:10px;border:1px solid var(--border-soft);background:var(--surface);border-radius:16px;padding:10px 12px;flex:none}
.avatar{width:36px;height:36px;border-radius:var(--r-well);background:var(--primary-bg);color:var(--primary-ink);display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.avatar.sm{width:32px;height:32px;font-size:12px}
.ws-txt{display:flex;flex-direction:column;min-width:0;font-size:13px;line-height:1.3}
.ws-txt b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-txt small{color:var(--muted-secondary);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- menu agrupado ---- */
.menu{display:flex;flex-direction:column;gap:4px;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;margin:-4px;padding:4px;scrollbar-width:thin}
.grupo-menu{display:flex;flex-direction:column;gap:2px}
.sec{font-size:11px;color:var(--muted-secondary);text-transform:uppercase;letter-spacing:.08em;padding:14px 12px 6px;font-weight:600;white-space:nowrap}
.nav{position:relative;height:42px;padding:0 12px;border-radius:14px;font-size:14px;font-weight:500;color:var(--muted);display:flex;justify-content:space-between;align-items:center;gap:12px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background 180ms var(--ease-out),color 180ms var(--ease-out)}
.nav span{display:flex;align-items:center;gap:12px;min-width:0}
.nav svg{color:inherit}
.nav:hover{color:var(--foreground)}
.nav.on{background:rgba(var(--ach-accent),.10);color:var(--primary-ink)}
.nav b{min-width:22px;height:20px;padding:0 6px;border-radius:999px;background:var(--primary-solid);color:var(--on-primary);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.grow{display:none}
.side-card{border-radius:20px;padding:14px 16px;background:var(--surface);border:1px solid var(--border-soft);font-size:13px;flex:none}
.side-card .k{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-ink);font-weight:600;display:flex;justify-content:space-between;gap:8px}
.side-card .k span{color:var(--muted-secondary);letter-spacing:0;text-transform:none;font-weight:500}
.side-card p{margin:8px 0 6px;font-weight:600;line-height:1.35}
.side-card small{color:var(--muted);font-size:12px}
.side-foot{display:flex;align-items:center;gap:8px;padding:12px 4px 0;border-top:1px solid var(--border-subtle);flex:none}
.side-foot .ws-txt{flex:1}
.ico-btn{border:1px solid var(--border);background:rgba(var(--ach-ink),.04);border-radius:14px;width:40px;height:40px;display:grid;place-items:center;cursor:pointer;color:var(--icon);flex:none;transition:background 180ms var(--ease-out),color 180ms var(--ease-out),border-color 180ms var(--ease-out)}
.ico-btn:hover{color:var(--foreground);background:rgba(var(--ach-ink),.08)}
.side .ico-btn{border-color:transparent;background:transparent}
.side .ico-btn:hover{background:rgba(var(--ach-ink),.06)}
.ico-lua{display:var(--mostra-lua)}
.ico-sol{display:var(--mostra-sol)}
#btn-sair:hover{color:var(--danger-ink)}
.side .so-celular{display:none}
.fundo-menu{display:none}
.barra-baixo{display:none}

/* ---- topo e área principal ---- */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:4;display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap;padding:20px max(32px,calc((100% - 1440px)/2 + 32px));background:var(--surface-nav);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border-subtle)}
.top-tit{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:4px}
.top h1{font-size:32px;line-height:1.15;margin:0;font-weight:500;letter-spacing:-.035em}
.top p{margin:0;color:var(--muted);font-size:14px}
.top-acoes{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-left:auto;flex-wrap:wrap;min-width:0}
.ao-vivo{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:999px;background:rgba(var(--ach-ink),.04);border:1px solid var(--border);font-size:13px;color:var(--muted);white-space:nowrap;flex:none;font-variant-numeric:tabular-nums}
.ponto-vivo{width:8px;height:8px;border-radius:50%;background:var(--primary);animation:achPulse 1.6s ease-out infinite;flex:none}
.ao-vivo.off .ponto-vivo,.robot .ponto-vivo.off{background:var(--muted-secondary);animation:none}
.status-pill{display:inline-flex;align-items:center;gap:10px;height:40px;max-width:280px;border:1px solid var(--border);background:rgba(var(--ach-ink),.04);border-radius:999px;padding:0 14px 0 8px;font-size:13px;font-weight:600;min-width:0}
.status-pill i{width:24px;height:24px;border-radius:50%;background:var(--primary-solid);display:grid;place-items:center;font-style:normal;color:var(--on-primary);font-size:11px;font-weight:700;flex:none}
.status-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.status-pill.parado{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger-ink)}
.status-pill.parado i{background:var(--danger-solid);color:var(--on-danger)}
.status-pill.pausado{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-ink)}
.status-pill.pausado i{background:var(--warning);color:#1B1100}
.top-filtros{flex:1 1 100%;display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.cta{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border-radius:var(--r-btn);background:var(--primary-solid);color:var(--on-primary);font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap;border:1px solid transparent;transition:background 200ms var(--ease-out),transform 150ms var(--ease-out)}
.cta:hover{background:var(--primary-hover);color:var(--on-primary);transform:translateY(-1px)}
.cta:active{transform:scale(.98)}
.cta svg{stroke-width:2.2}
.conteudo{width:100%;max-width:1440px;margin:0 auto;padding:8px 32px 64px;display:flex;flex-direction:column;gap:24px}
.tab{display:flex;flex-direction:column;gap:24px;min-width:0}
.aviso-rede{display:inline-block;color:var(--warning-ink);background:var(--warning-bg);border:1px solid var(--warning-border);border-radius:999px;padding:1px 10px;font-size:12px;margin-left:4px;font-weight:600}
.faixa-parado{display:flex;align-items:flex-start;gap:12px;background:var(--danger-bg);border:1px solid var(--danger-border);color:var(--danger-ink);font-weight:600;border-radius:20px;padding:14px 18px;font-size:14px}
.faixa-parado svg{margin-top:2px}
.seg{display:flex;gap:2px;background:rgba(var(--ach-ink),.04);border:1px solid var(--border);border-radius:999px;padding:3px}
.seg button{border:0;background:transparent;height:30px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:600;cursor:pointer;color:var(--muted);transition:background 180ms var(--ease-out),color 180ms var(--ease-out)}
.seg button:hover{color:var(--foreground)}
.seg button.on{background:var(--primary-solid);color:var(--on-primary)}
.seg.fraco{opacity:.5}
#nicho{flex-wrap:wrap;max-width:100%}
/* estado vazio: ícone azul e a frase, centrados */
.vazio{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px 24px;text-align:center;color:var(--muted)}
.vazio::before{content:'';width:32px;height:32px;background-color:var(--primary);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.9}
td .vazio,.row .vazio{padding:16px}
.vazio.carregando::before{display:none}

/* ---- destaques do topo do dashboard ---- */
.stat{position:relative;background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-card);padding:24px;min-width:0}
.stat .lbl{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--foreground-secondary);font-weight:600}
.ic{width:40px;height:40px;border-radius:var(--r-well);background:rgba(var(--ach-accent),.10);display:grid;place-items:center;color:var(--primary-ink);flex:none}
.stat .num{font-size:36px;font-weight:500;letter-spacing:-.04em;margin:16px 0 6px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;line-height:1.1;font-variant-numeric:tabular-nums}
.stat .num small{font-size:16px;color:var(--muted);font-weight:500;letter-spacing:0}
.stat .desc{color:var(--muted);font-size:14px}
/* o destaque principal é o bloco azul cheio (um por tela) */
.delta{font-style:normal;font-size:12px;font-weight:600;border-radius:999px;padding:3px 10px;background:var(--primary-bg);color:var(--primary-ink);letter-spacing:0;line-height:1.2}
.delta.bad{background:var(--danger-bg);color:var(--danger-ink)}
.titulo-sec{font-size:18px;font-weight:500;margin:8px 0 0;letter-spacing:-.02em}

/* ---- início: assistente, bloco azul e indicadores ---- */
.ini-topo{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px}
.ini-hero{position:relative;overflow:hidden;background:var(--gradient-hero);border:1px solid var(--border-soft);border-radius:var(--r-card-lg);padding:32px;display:flex;flex-direction:column;gap:20px;min-width:0}
.ini-hero::before{content:'';position:absolute;right:-120px;top:-120px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(var(--ach-accent),.20) 0%,rgba(var(--ach-accent),0) 70%);pointer-events:none}
.ini-hero>*{position:relative}
.ini-hero-cab{display:flex;align-items:center;gap:16px}
.orbe{width:64px;height:64px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 30%,#E8FFFF 0%,#9DD9FF 18%,#22A6FF 42%,#1877FF 68%,#0B2A55 100%);box-shadow:0 0 48px rgba(var(--ach-accent),.30);animation:achOrb 4s ease-in-out infinite}
.ini-hero-tit{display:flex;flex-direction:column;gap:2px;min-width:0}
.rotulo-pq{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-ink)}
.ini-saudacao{font-size:28px;font-weight:500;letter-spacing:-.035em;line-height:1.2}
.ini-resumo{margin:0;font-size:18px;line-height:1.55;color:var(--foreground-secondary);max-width:560px;text-wrap:pretty}
.ini-resumo strong{color:var(--foreground);font-weight:600}
.ini-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-atencao{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 16px;border-radius:999px;border:1px solid rgba(var(--ach-accent),.18);background:var(--surface);color:var(--foreground);font-size:14px;font-weight:500;text-decoration:none;transition:background 180ms var(--ease-out)}
.chip-atencao:hover{background:var(--surface-hover);color:var(--foreground)}
.chip-atencao .ic{width:auto;height:auto;background:none;color:var(--primary)}
.chip-atencao svg{width:16px;height:16px}
.ini-calmo{margin:0;display:flex;align-items:center;gap:10px;font-size:15px;color:var(--foreground-secondary)}
.ini-calmo .ic{width:28px;height:28px;border-radius:999px}
.ini-calmo svg{width:16px;height:16px}
.ini-forte{background:var(--ach-strong);color:var(--on-primary);border-radius:var(--r-card-lg);padding:28px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:220px;min-width:0}
.ini-forte-cab{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600}
.ini-forte-cab .ic{width:auto;height:auto;background:none;color:inherit}
.ini-forte-cab svg{width:20px;height:20px}
.ini-forte-meio{display:flex;flex-direction:column;gap:6px}
.ini-forte-num{font-size:44px;font-weight:500;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ini-forte-desc{font-size:14px;font-weight:500}
.ini-forte-btn{align-self:flex-start;display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;background:var(--ach-strong-btn);color:var(--primary-ink);font-size:13px;font-weight:600;text-decoration:none;transition:transform 150ms var(--ease-out)}
.ini-forte-btn:hover{color:var(--primary-ink);transform:translateY(-1px)}
.ini-indic{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:24px}
.indic{display:flex;flex-direction:column;gap:14px;background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-card);padding:24px;min-width:0;color:var(--foreground);text-decoration:none}
.indic-cab{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.indic .ic{width:36px;height:36px;background:rgba(var(--ach-ink),.06);color:var(--icon)}
.indic.link .ic{background:rgba(var(--ach-accent),.10);color:var(--primary-ink)}
.indic-corpo{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.indic-num{font-size:36px;font-weight:500;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.indic-num.bad{color:var(--danger-ink)}
.indic-desc{font-size:13px;color:var(--muted-secondary);display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.indic-desc em{margin-top:0}
.indic.link{transition:background 200ms var(--ease-out),border-color 200ms var(--ease-out),transform 200ms var(--ease-out)}
.indic.link:hover{background:var(--surface-hover);border-color:rgba(var(--ach-accent),.18);transform:translateY(-2px);color:var(--foreground)}
.indic.link .indic-desc{color:var(--primary-ink);font-weight:500}
.sparkline{width:120px;height:36px;flex:none;fill:none;stroke:var(--primary);stroke-width:2}

/* ---- grade e cartões ---- */
.grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr) minmax(0,1fr);gap:24px;align-items:start}
.span2{grid-column:span 2}
.card{background:var(--surface);border-radius:var(--r-card);padding:24px;border:1px solid var(--border-soft);min-width:0}
.card h3{margin:0 0 16px;font-size:18px;font-weight:500;letter-spacing:-.02em;line-height:1.25}
.card .sub{color:var(--muted);font-size:13px}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.card-head h3{margin-bottom:16px}
.muted{color:var(--muted)}
/* cartão do robô: gradiente do design quando ligado; alerta quando parado ou desligado */
.robot{background:var(--gradient-hero);border-color:var(--primary-border-soft)}
.robot.parado{background:var(--danger-bg);border-color:var(--danger-border)}
.robot.pausado{background:var(--warning-bg);border-color:var(--warning-border)}
.robot .rotulo{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.robot .big{font-size:32px;font-weight:500;letter-spacing:-.035em;margin:6px 0 14px;line-height:1.15}
.robot.parado .big{color:var(--danger-ink)}
.robot.pausado .big{color:var(--warning-ink)}
.pill{display:inline-block;background:rgba(var(--ach-ink),.06);border:1px solid var(--border-subtle);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:600;margin:2px 4px 2px 0}
.btns{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.btn{flex:1;text-align:center;height:44px;padding:0 18px;border-radius:var(--r-btn);font-size:14px;font-weight:600;background:rgba(var(--ach-ink),.06);color:var(--foreground);border:1px solid var(--border);cursor:pointer;transition:background 200ms var(--ease-out),transform 150ms var(--ease-out)}
.btn:hover{background:rgba(var(--ach-ink),.10)}
.btn:active{transform:scale(.98)}
.btn.dark{background:var(--primary-solid);color:var(--on-primary);border-color:transparent}
.btn.dark:hover{background:var(--primary-hover)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ---- números ---- */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.lojas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.loja{border:1px solid var(--border-subtle);border-radius:20px;padding:16px;min-width:0;background:var(--soft)}
.loja .kpis{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:12px}
.loja .kpi{background:var(--surface)}
.loja .kpi div{font-size:22px}
.kpi{border:1px solid var(--border-subtle);border-radius:var(--r-input);padding:14px 16px;min-width:0;background:var(--soft)}
.kpi small{color:var(--muted);font-size:12px;font-weight:500}
.kpi div{font-size:28px;font-weight:500;letter-spacing:-.04em;margin-top:4px;font-variant-numeric:tabular-nums;line-height:1.15}
.kpi em,.indic em{font-style:normal;font-size:11px;font-weight:600;background:var(--primary-bg);color:var(--primary-ink);border-radius:999px;padding:2px 9px;display:inline-block;margin-top:8px}
.kpi em.bad,.indic em.bad{background:var(--danger-bg);color:var(--danger-ink)}
.kpi em.neutro,.indic em.neutro{background:rgba(var(--ach-ink),.06);color:var(--muted)}
.mkt .val{font-size:36px;font-weight:500;letter-spacing:-.04em;margin:6px 0;font-variant-numeric:tabular-nums}.mkt small{color:var(--muted)}
.mkt p{margin:4px 0}
.bar{height:8px;border-radius:8px;background:var(--bar2);margin-top:14px;position:relative;overflow:hidden}
.bar span{position:absolute;left:0;top:0;bottom:0;background:var(--gradient-primary);border-radius:8px}
.bar-legenda{font-size:12px;color:var(--muted);margin-top:8px}
.bar-legenda i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:4px;vertical-align:-1px}

/* ---- gráfico por dia (azul = enviadas; cinza por cima = coletadas e não enviadas) ---- */
.chart{display:flex;align-items:flex-end;gap:10px;height:220px;padding-top:12px;overflow:hidden}
.col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:var(--muted-secondary)}
.stack{width:100%;max-width:90px;display:flex;flex-direction:column-reverse;justify-content:flex-start;gap:3px;height:160px}
.stack .a{background:var(--primary);border-radius:8px}
.stack .b{background:var(--bar2);border-radius:8px}
.stack .a[style*="height: 0px"],.stack .b[style*="height: 0px"]{display:none}
.col .dia{height:14px;white-space:nowrap}
.col .nums{height:14px;white-space:nowrap;font-size:10px;color:var(--foreground-secondary)}
.legend{display:flex;gap:14px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:0}

/* ---- tabelas: linhas soltas, cabeçalho em maiúsculas pequenas, hover arredondado ---- */
.tabela{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -8px;padding:0 8px}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
th{color:var(--muted-secondary);font-weight:600;text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.08em;padding:10px 12px;border-bottom:1px solid var(--border-subtle);white-space:nowrap}
td{padding:14px 12px;border-bottom:1px solid var(--border-subtle);vertical-align:top;overflow-wrap:anywhere;transition:background 150ms var(--ease-out)}
tbody tr:hover td{background:var(--surface-hover)}
tbody tr:hover td:first-child{border-radius:16px 0 0 16px}
tbody tr:hover td:last-child{border-radius:0 16px 16px 0}
td.num,th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
td.nowrap{white-space:nowrap}
td summary{white-space:nowrap;cursor:pointer}
tr:last-child td{border-bottom:0}
/* selo com ponto */
.tag{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:3px 10px;border-radius:999px;border:1px solid var(--primary-border-soft);background:var(--primary-bg);color:var(--primary-ink);font-size:12px;font-weight:600;line-height:1.2;vertical-align:middle}
.tag::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.tag.cup{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-ink)}
.tag.err{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger-ink)}
.tag.cinza{background:rgba(var(--ach-ink),.06);border-color:var(--border);color:var(--muted)}
.tag.ml{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-ink)}
.tag.shopee{background:var(--shopee-bg);border-color:transparent;color:var(--shopee-ink)}
.tag.prox{background:var(--primary-solid);border-color:transparent;color:var(--on-primary)}
.tag.ml,.tag.shopee,.tag.prox{white-space:nowrap}
/* o selo não se parte no meio da palavra; numa coluna "sem quebra" (situação da fila) ele pode ir para a linha de baixo */
td .tag{overflow-wrap:normal}
td.nowrap .tag:not(.prox){white-space:normal}

/* ---- rosca e linhas ---- */
.donut{width:160px;height:160px;border-radius:50%;margin:8px auto 16px;background:var(--bar2);display:grid;place-items:center}
.donut div{width:112px;height:112px;border-radius:50%;background:var(--surface);display:grid;place-items:center;text-align:center;font-weight:500;font-size:28px;align-content:center;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.donut small{display:block;font-size:11px;color:var(--muted);font-weight:500;letter-spacing:0}
.row{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:10px 0;align-items:flex-start;border-bottom:1px solid var(--border-subtle)}
.row:last-child{border-bottom:0}
.row b{font-weight:600;white-space:nowrap}
.row .esq{min-width:0;overflow-wrap:anywhere}
.row .sub{display:block;color:var(--muted);font-size:12px}
.cota-dia{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.chip{display:inline-block;border-radius:999px;padding:1px 8px;font-size:11px;margin-right:6px;color:var(--on-primary);background:var(--primary-solid);font-weight:600}

/* ---- listas, filtros, campos ---- */
.filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.filtros label{font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:center;min-width:0}
.filtros select{max-width:min(100%,320px)}
select,input:not([type="checkbox"]):not([type="radio"]),textarea{font:inherit;font-size:15px;height:48px;border:1px solid var(--border);border-radius:var(--r-input);padding:0 16px;background:var(--surface);color:var(--foreground);max-width:100%;transition:border-color 200ms var(--ease-out),box-shadow 200ms var(--ease-out)}
select{appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A8AA0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
input::placeholder,textarea::placeholder{color:var(--muted-secondary)}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--primary-focus);box-shadow:var(--ring-focus)}
select:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--primary);outline-offset:0}
select:disabled,input:disabled,textarea:disabled{opacity:.5;cursor:not-allowed}
textarea{width:100%;resize:vertical;min-height:96px;height:auto;padding:14px 16px;line-height:1.5}
/* botões: primário, secundário (mini) e fantasma */
.go{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;background:var(--primary-solid);color:var(--on-primary);border:1px solid transparent;border-radius:var(--r-btn);padding:0 22px;font-weight:600;font-size:14px;letter-spacing:-.005em;cursor:pointer;transition:background 200ms var(--ease-out),transform 150ms var(--ease-out)}
.go:hover{background:var(--primary-hover);transform:translateY(-1px)}
.go:active{transform:scale(.98)}
.go:disabled{background:rgba(var(--ach-ink),.06);color:var(--disabled);cursor:wait;transform:none}
.link-btn,.btn-mini{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;border:1px solid var(--border);background:rgba(var(--ach-ink),.04);color:var(--foreground);border-radius:var(--r-btn);padding:0 14px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background 200ms var(--ease-out),border-color 200ms var(--ease-out),color 200ms var(--ease-out),transform 150ms var(--ease-out)}
.link-btn:hover,.btn-mini:hover{background:rgba(var(--ach-ink),.08);border-color:var(--border-strong)}
.link-btn:active,.btn-mini:active{transform:scale(.98)}
.btn-mini.perigo:hover{color:var(--danger-ink);background:var(--danger-bg);border-color:var(--danger-border)}
.btn-mini.principal{background:var(--primary-solid);color:var(--on-primary);border-color:transparent}
.btn-mini.principal:hover{background:var(--primary-hover)}
.btn-mini:disabled{opacity:.5;cursor:wait;transform:none}
.msg-box{white-space:pre-wrap;background:var(--soft);border:1px solid var(--border-subtle);border-radius:var(--r-input);padding:14px 16px;margin:8px 0 0;font-size:13px;font-family:inherit}
.nota{background:var(--soft);border:1px dashed var(--border-strong);border-radius:20px;padding:14px 18px;color:var(--muted);font-size:13px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips span{background:rgba(var(--ach-ink),.06);border-radius:999px;padding:3px 12px;font-size:13px}
.pares{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px 20px;font-size:14px;margin:0}
.pares dt{color:var(--muted)}.pares dd{margin:0;overflow-wrap:anywhere}
.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.pilha{display:flex;flex-direction:column;gap:24px}

/* ---- ações e formulários ---- */
.btns-linha{display:flex;gap:8px;flex-wrap:wrap}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;align-items:start}
.form-grid .campo{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:500;color:var(--foreground-secondary);min-width:0}
.form-grid .campo input:not([type="checkbox"]),.form-grid .campo select{width:100%;color:var(--foreground)}
.form-grid .campo small{font-size:12px;font-weight:400;color:var(--muted-secondary)}
.form-grid .erro-form,.form-grid .acoes-form{grid-column:1/-1}
.erro-form{color:var(--danger-ink);background:var(--danger-bg);border:1px solid var(--danger-border);border-radius:var(--r-input);padding:12px 16px;font-size:14px;margin:0}
.lista-conferencia{margin:8px 0;padding-left:20px;font-size:14px}
.lista-conferencia li{margin:3px 0;overflow-wrap:anywhere}
.lista-conferencia .conf-vazia span{color:var(--danger-ink);font-weight:600}
.lista-conferencia .conf-incerta span{color:var(--warning-ink)}
.form-grid .resultado-import{grid-column:1/-1;display:flex;flex-direction:column;gap:8px}
.form-grid .campo textarea{color:var(--foreground)}
.lista-erros{margin:0;padding-left:18px;font-size:13px;color:var(--danger-ink)}
.id-grupo{display:block}
.sec-form{margin-top:16px;border-top:1px solid var(--border-subtle);padding-top:12px}
.sec-form summary{cursor:pointer;font-weight:600;font-size:14px;margin-bottom:8px}
/* aviso flutuante (fica por cima da janela do QR) */
.toast{position:fixed;right:24px;bottom:24px;max-width:min(420px,calc(100vw - 32px));display:flex;gap:12px;align-items:flex-start;background:var(--surface-float);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:var(--foreground);border:1px solid var(--border);border-radius:20px;padding:16px 18px;font-size:14px;font-weight:500;line-height:1.45;box-shadow:var(--shadow-float);z-index:60}
.toast::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--primary);margin-top:6px;flex:none}
.toast.erro{border-color:var(--danger-border)}
.toast.erro::before{background:var(--danger)}

/* ---- configurar: nichos (cartões, editor, etiquetas, tipos) ---- */
.barra-config{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.barra-config p{margin:0}
.grade-nichos{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;align-items:start}
/* Rotas: o que está ligado, por nicho → número → grupos */
.rota-chips{margin:4px 0 12px}
.rota-chips span.off{color:var(--muted-secondary);text-decoration:line-through}
.rota-numero{margin-top:8px;font-size:14px}
.rota-grupos{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.rota-grupos li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;min-width:0}
.rota-grupos li span{overflow-wrap:anywhere}
.form-grid .rota-item span{display:flex;flex-direction:column;gap:2px}
.form-grid .rota-item small{color:var(--muted)}
.recado-pendente{margin:8px 0 14px}
.editor-nicho .card-head .titulo-sec{margin:0}
.form-grid .largo{grid-column:1/-1}
/* chave liga/desliga (as caixas de marcar das configurações viram chaves) */
.form-grid .campo-check{flex-direction:row;align-items:flex-start;gap:12px;color:var(--foreground);font-size:15px;font-weight:400;cursor:pointer}
input[type="checkbox"]{appearance:none;-webkit-appearance:none;position:relative;width:44px;height:26px;margin:0;flex:none;padding:0;cursor:pointer;border-radius:99px;background:rgba(var(--ach-ink),.10);border:1px solid var(--border-strong);transition:background 200ms var(--ease-out),border-color 200ms var(--ease-out)}
input[type="checkbox"]::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:99px;background:var(--foreground);transition:left 200ms var(--ease-out),background 200ms var(--ease-out)}
input[type="checkbox"]:checked{background:var(--primary);border-color:var(--primary)}
input[type="checkbox"]:checked::after{left:20px;background:var(--on-primary)}
input[type="checkbox"]:disabled{opacity:.45;cursor:not-allowed}
input[type="radio"]{accent-color:var(--primary);width:18px;height:18px;margin:0}
.campo-etiquetas{display:flex;flex-direction:column;gap:4px}
.etiquetas{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border:1px solid var(--border);border-radius:var(--r-input);padding:6px 10px;background:var(--surface);cursor:text;min-height:48px;transition:border-color 200ms var(--ease-out),box-shadow 200ms var(--ease-out)}
.etiquetas:focus-within{border-color:var(--primary-focus);box-shadow:var(--ring-focus)}
.etiquetas-lista{display:contents}
.etiqueta{display:inline-flex;align-items:center;gap:2px;background:var(--primary-bg);color:var(--primary-ink);border:1px solid var(--primary-border-soft);border-radius:999px;padding:2px 4px 2px 12px;font-size:13px;font-weight:600;max-width:100%;overflow-wrap:anywhere}
.etiqueta-x{border:0;background:transparent;color:inherit;cursor:pointer;font-size:14px;line-height:1;width:22px;height:22px;border-radius:50%;padding:0;display:grid;place-items:center}
.etiqueta-x:hover{background:color-mix(in srgb,currentColor 15%,transparent)}
.form-grid .campo .etiquetas input{border:0;padding:4px;height:32px;flex:1 1 160px;width:auto;min-width:120px;background:transparent;box-shadow:none}
.form-grid .campo .etiquetas input:focus{outline:none;box-shadow:none}
.etiquetas-aviso{color:var(--warning-ink)}
.tipos{display:flex;flex-direction:column;gap:16px}
.tipo{border:1px solid var(--border-subtle);border-radius:20px;padding:18px;background:var(--soft)}
.tipo-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}

/* ---- configurar: números (QR code), grupos, configurações gerais e chaves ---- */
.cartao-numero .pares{margin-bottom:16px}
.cartao-numero .nota{margin:0 0 12px}
.acoes-numero{margin-bottom:6px}
.grupos-head{margin-top:20px;padding-top:16px;border-top:1px solid var(--border-subtle)}
.dica-check{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.par-campos{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.form-grid .campo .par-campos input{width:auto;flex:1 1 90px;min-width:0;max-width:150px}
.form-grid .campo .periodo input[type="text"]{max-width:none;flex:2 1 120px}
.periodos{display:flex;flex-direction:column;gap:8px}
.pilha-curta{display:flex;flex-direction:column;gap:8px}
.avisos-config{background:var(--warning-bg);border:1px solid var(--warning-border);color:var(--warning-ink);border-radius:20px;padding:14px 18px;font-size:14px}
.avisos-config ul{margin:6px 0 0;padding-left:18px}
.barra-salvar{position:sticky;bottom:16px;z-index:5;display:flex;flex-direction:column;gap:10px;background:var(--surface-float);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-soft);border-radius:20px;box-shadow:var(--shadow-float);padding:14px 20px}
.barra-salvar .btns-linha{align-items:center;gap:12px}
.passo-chave{border-top:1px solid var(--border-subtle);padding-top:16px;margin-top:16px}
.passo-chave h4{margin:0 0 4px;font-size:15px;font-weight:600}
.passo-chave .sub{margin:0 0 10px}
.link-autorizar{display:inline-block;text-decoration:none;overflow-wrap:anywhere}
.teste-api{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:14px;overflow-wrap:anywhere}
/* janela modal: vidro por trás, caixa de raio 28 */
.modal{position:fixed;inset:0;z-index:50;background:var(--surface-glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);display:grid;place-items:center;padding:16px;overflow-y:auto}
.modal-caixa{background:var(--surface);color:var(--foreground);border:1px solid var(--border);border-radius:var(--r-modal);padding:32px;width:min(480px,100%);box-shadow:var(--shadow-float)}
.modal-caixa h3{margin:0 0 8px;font-size:24px;font-weight:500;letter-spacing:-.02em;line-height:1.2}
.passos{margin:0 0 16px;padding-left:20px;font-size:14px;display:flex;flex-direction:column;gap:4px}
/* o QR precisa de fundo branco para ser lido, nos dois temas */
.qr-quadro{display:grid;place-items:center;min-height:240px;background:#fff;border-radius:20px;border:1px solid var(--border);padding:12px;margin-bottom:10px}
.qr-img{width:min(280px,100%);height:auto;display:block}
.qr-espera{color:#23364F;text-align:center;font-size:14px;margin:0;max-width:300px}

/* ---- perfil: cabeçalho com nível, períodos, recordes e medalhas ---- */
.perfil-topo{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.2fr);gap:16px 24px;align-items:center}
.perfil-avatar{width:64px;height:64px;border-radius:20px;font-size:24px;font-weight:600}
.perfil-quem{min-width:0}
.perfil-nome{font-size:26px;font-weight:500;letter-spacing:-.035em;line-height:1.15;margin:0;overflow-wrap:anywhere}
.perfil-quem .sub{margin:4px 0 0;overflow-wrap:anywhere}
.perfil-nivel{min-width:0}
.perfil-nivel-tit{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.perfil-nivel-tit b{font-size:20px;font-weight:500;letter-spacing:-.02em}
.perfil-nivel .bar{margin-top:8px}
.perfil-sem-vendas{display:flex;justify-content:space-between;align-items:center;gap:10px 16px;flex-wrap:wrap;margin:0}
.perfil-sem-vendas p{margin:0;flex:1 1 280px}
.perfil-kpi-sub{display:block;font-size:12px;margin-top:4px}
.perfil-subtit{margin:16px 0 4px;font-size:14px;font-weight:600;color:var(--foreground-secondary)}
.medalhas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.medalha{display:flex;align-items:center;gap:12px;border:1px dashed var(--border-strong);border-radius:20px;padding:12px 14px;color:var(--muted);min-width:0}
.medalha-selo{width:36px;height:36px;border-radius:var(--r-well);display:grid;place-items:center;flex:none;background:var(--soft);font-size:17px}
.medalha-txt{display:flex;flex-direction:column;min-width:0;font-size:13px}
.medalha-txt b{font-weight:600;overflow-wrap:anywhere}
.medalha-txt small{font-size:12px}
.medalha.ganha{border-style:solid;border-color:var(--primary-border-soft);background:var(--primary-bg);color:var(--foreground)}
.medalha.ganha .medalha-selo{background:var(--primary-solid);color:var(--on-primary)}
.medalha.ganha small{color:var(--primary-ink)}

/* ---- números: um cartão por número de WhatsApp ---- */
.numero-dica{margin:0 0 12px}

/* ---- entrada (login, entrar, extensão) ---- */
.login-body{position:relative;overflow-x:hidden;min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:var(--background)}
/* um brilho discreto do gradiente da marca atrás do cartão */
.login-body::before{content:'';position:absolute;top:-180px;left:50%;width:min(900px,160vw);height:560px;transform:translateX(-50%);border-radius:50%;background:var(--gradient-hero);filter:blur(70px);opacity:.85;pointer-events:none}
.login-wrap{position:relative;width:100%;max-width:420px;display:flex;flex-direction:column;gap:20px}
.login-marca{display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1.1;font-weight:600;font-size:22px;letter-spacing:-.03em}
.login-marca small{font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-weight:600;margin-top:4px}
.login-card{width:100%;padding:32px;border-radius:var(--r-modal);box-shadow:0 8px 30px rgba(var(--ach-ink),.06)}
.login-card h1{font-size:32px;margin:0 0 6px;font-weight:500;letter-spacing:-.035em;line-height:1.15}
.login-card form{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.login-card label{font-size:14px;color:var(--foreground-secondary);font-weight:500;margin-top:8px}
.login-card input:not([type="checkbox"]){width:100%;height:52px;font-size:16px}
.campo-senha{display:flex;gap:8px;align-items:stretch}
.campo-senha input{flex:1;min-width:0}
.mostrar-senha{border:1px solid var(--border);background:rgba(var(--ach-ink),.04);border-radius:var(--r-input);padding:0 16px;font-size:13px;font-weight:600;cursor:pointer;color:var(--foreground-secondary);flex:none}
.mostrar-senha:hover{color:var(--foreground);border-color:var(--border-strong)}
.erro-login{color:var(--danger-ink);background:var(--danger-bg);border:1px solid var(--danger-border);border-radius:var(--r-input);padding:12px 16px;font-size:14px;margin:8px 0 0}
.login-card .go{width:100%;margin-top:16px;height:52px;font-size:16px;border-radius:16px}
.login-card .go:focus-visible{outline:2px solid var(--primary);outline-offset:3px;box-shadow:var(--ring-focus)}
.login-card .link-btn{align-self:flex-start;margin-top:12px}
.login-card h2.login-dica{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-secondary);margin:24px 0 8px}
.login-dica{font-size:13px;color:var(--muted);margin:16px 0 0;line-height:1.5}
.login-dica code{font-size:12px;background:var(--soft);border-radius:8px;padding:2px 8px;color:var(--foreground-secondary)}

/* ---- entrada nova (login e entrar): formulário à esquerda e a cena azul à direita; no celular a cena vai para o topo
   e o formulário sobe numa folha de cantos redondos. A cena é só ilustração (aria-hidden) e fica azul nos dois temas. ---- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.login-body.entrada{display:block;place-items:normal;padding:0;min-height:100vh;min-height:100dvh;background:var(--background-secondary)}
.login-body.entrada::before{display:none}
.entrada-split{display:grid;width:100%;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh;min-height:100dvh}
.entrada-form{display:flex;align-items:center;justify-content:center;min-width:0;padding:48px 32px}
.entrada .login-wrap{max-width:360px;gap:40px;animation:entradaSobe 200ms var(--ease-out) both}
@keyframes entradaSobe{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
.entrada .login-marca{flex-direction:row;align-items:center;gap:10px;text-align:left;font-size:18px;font-weight:700}
.login-selo{width:36px;height:36px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--ach-strong);color:var(--ach-strong-btn);box-shadow:0 6px 16px rgba(var(--ach-accent),.28)}
.entrada .login-card{padding:0;background:none;border:0;border-radius:0;box-shadow:none}
.login-rotulo{margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-ink)}
.entrada .login-card h1{margin:0 0 8px;font-size:36px;font-weight:500;letter-spacing:-.035em;line-height:1.12}
.entrada .login-card h1+.muted{margin:0;color:var(--muted)}
.entrada .login-card form{gap:16px;margin-top:32px}
.campo-pilula{position:relative;display:block}
.entrada .campo-pilula input:not([type="checkbox"]){height:52px;border-radius:999px;padding:0 54px 0 22px;background:rgba(var(--ach-ink),.04);border:1px solid var(--border-soft)}
.entrada .campo-pilula input:hover{border-color:var(--border-strong)}
.entrada .campo-pilula input:focus{background:var(--surface);border-color:var(--primary);box-shadow:0 0 0 4px rgba(var(--ach-accent),.18)}
.entrada .campo-pilula input:focus-visible{outline:none}
/* erro: borda vermelha nos campos enquanto a mensagem estiver à vista (o JS só mostra/esconde a mensagem) */
.entrada form:has(> .erro-login:not([hidden])) .campo-pilula input{border-color:var(--danger-ink)}
.entrada form:has(> .erro-login:not([hidden])) .campo-pilula input:focus{box-shadow:0 0 0 4px var(--danger-bg)}
.campo-icone{position:absolute;right:17px;top:50%;transform:translateY(-50%);color:var(--icon);pointer-events:none}
.entrada .campo-senha{display:block}
.entrada .mostrar-senha{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:44px;height:44px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--icon);display:grid;place-items:center;transition:background 180ms var(--ease-out),color 180ms var(--ease-out)}
.entrada .mostrar-senha:hover{background:rgba(var(--ach-ink),.06);color:var(--foreground)}
.mostrar-senha .olho-fechado,.mostrar-senha[aria-pressed="true"] .olho-aberto{display:none}
.mostrar-senha[aria-pressed="true"] .olho-fechado{display:block}
.entrada .login-card .go{height:56px;margin-top:8px;border-radius:999px;box-shadow:0 12px 28px rgba(var(--ach-accent),.28)}
.entrada .login-card .go:active:not(:disabled){transform:scale(.98)}
/* entrando: o JS desliga o botão durante o pedido; aqui ele mantém o azul e troca o texto por "Entrando…" com um giro */
.entrada .login-card .go:disabled{background:var(--primary-solid);color:var(--on-primary);box-shadow:none;transform:none;cursor:wait}
.go-carregando{display:none;align-items:center;gap:10px}
.go:disabled .go-texto{display:none}
.go:disabled .go-carregando{display:inline-flex}
.go-giro{width:16px;height:16px;flex:none;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:goGiro 700ms linear infinite}
@keyframes goGiro{to{transform:rotate(360deg)}}
.entrada .erro-login{margin:0;border-radius:18px}
.entrada .login-dica{margin-top:24px}
html:has(> body.entrada){scroll-padding-bottom:96px}

/* a cena: painel azul arredondado, com margem por dentro da tela */
.cena{position:sticky;top:16px;align-self:start;height:calc(100vh - 32px);height:calc(100dvh - 32px);min-height:560px;margin:16px 16px 16px 0;border-radius:32px;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;padding:36px 40px 32px;color:#FFFFFF;background:radial-gradient(70% 55% at 88% 6%,rgba(34,166,255,.85) 0%,rgba(34,166,255,0) 70%),radial-gradient(60% 50% at 100% 100%,rgba(124,92,255,.45) 0%,rgba(124,92,255,0) 70%),linear-gradient(200deg,#22A6FF 0%,#1877FF 30%,#0B2A55 68%,#071326 100%);box-shadow:0 30px 80px rgba(7,19,38,.18);contain:layout paint}
.cena p{margin:0}
.cena-fundo{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.cena-fundo::after{content:'';position:absolute;left:0;right:0;top:0;height:42%;z-index:2;background:linear-gradient(180deg,rgba(7,19,38,.38) 0%,rgba(7,19,38,0) 100%)}
.cena svg.cena-ondas{position:absolute;left:-6%;top:-6%;width:112%;height:112%;stroke:none;z-index:0;animation:cenaOndas 36s ease-in-out infinite alternate;will-change:transform}
.cena-blob{position:absolute;z-index:1;border-radius:50%;aspect-ratio:1;will-change:transform;animation:cenaBlobA 24s ease-in-out infinite alternate}
.cena-blob-1{width:70%;left:-20%;top:-14%;background:radial-gradient(circle,rgba(72,180,255,.5) 0%,rgba(72,180,255,0) 65%)}
.cena-blob-2{width:62%;right:-22%;top:26%;background:radial-gradient(circle,rgba(124,92,255,.42) 0%,rgba(124,92,255,0) 65%);animation-name:cenaBlobB;animation-duration:30s}
.cena-blob-3{width:85%;left:6%;bottom:-42%;background:radial-gradient(circle,rgba(34,166,255,.42) 0%,rgba(34,166,255,0) 62%);animation-name:cenaBlobC;animation-duration:36s}
.cena-blob-4{width:58%;left:-20%;bottom:4%;background:radial-gradient(circle,rgba(5,12,30,.55) 0%,rgba(5,12,30,0) 65%);animation-name:cenaBlobB;animation-duration:42s;animation-direction:alternate-reverse}
@keyframes cenaOndas{from{transform:translate3d(-2%,1%,0) scale(1)}to{transform:translate3d(2%,-2%,0) scale(1.05)}}
@keyframes cenaBlobA{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(14%,10%,0) scale(1.15)}100%{transform:translate3d(4%,22%,0) scale(.95)}}
@keyframes cenaBlobB{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-12%,-8%,0) scale(1.1)}100%{transform:translate3d(-4%,12%,0) scale(.92)}}
@keyframes cenaBlobC{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(10%,-10%,0) scale(1.08)}100%{transform:translate3d(-8%,-4%,0) scale(1.14)}}
/* números de exemplo subindo: longe (pequeno e desfocado), meio e perto (pílula de vidro) */
.cena-numeros{position:absolute;inset:0;z-index:1;pointer-events:none}
.cena-num{position:absolute;white-space:nowrap;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:#FFFFFF;opacity:0;will-change:transform,opacity}
.cena-num.longe{font-size:13px;filter:blur(1.6px)}
.cena-num.meio{font-size:17px}
.cena-num.perto{font-size:18px;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);box-shadow:0 10px 30px rgba(3,10,25,.18)}
.cena-num.parado.longe{opacity:.32}
.cena-num.parado.meio{opacity:.6}
.cena-num.parado.perto{opacity:.95}
.cena-topo{position:relative;z-index:2}
.cena-marca{display:flex;flex-direction:column;font-size:20px;font-weight:700;letter-spacing:-.03em;line-height:1.1;color:#FFFFFF}
.cena-marca small{align-self:flex-start;margin-top:8px;padding:4px 10px;border-radius:999px;background:rgba(7,19,38,.38);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#FFFFFF}
.cena-palco{position:relative;z-index:2;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
.cena-contador,.cena-toasts{width:min(400px,100%)}
.cena-contador{padding:22px 24px 20px;border-radius:24px;background:rgba(7,19,38,.3);border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);box-shadow:0 24px 60px rgba(3,10,25,.32)}
.cena-contador-rotulo{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.cena-ao-vivo{position:relative;width:8px;height:8px;flex:none;border-radius:50%;background:#7FD0FF}
.cena-ao-vivo::after{content:'';position:absolute;inset:0;border-radius:50%;background:#7FD0FF;animation:cenaPulso 2s var(--ease-out) infinite}
@keyframes cenaPulso{from{transform:scale(1);opacity:.7}to{transform:scale(3);opacity:0}}
.cena-contador-linha{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px;margin-top:10px}
.cena-contador-valor{font-size:40px;font-weight:700;letter-spacing:-.035em;line-height:1.05;font-variant-numeric:tabular-nums;white-space:nowrap}
.cena-contador-delta{padding:3px 9px;border-radius:999px;background:rgba(127,208,255,.18);color:#CFEBFF;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.cena-barras{display:flex;align-items:flex-end;gap:5px;height:46px;margin-top:16px}
.cena-barra{flex:1;height:100%;border-radius:4px;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.16));transform-origin:50% 100%;transition:transform 900ms var(--ease-out);will-change:transform}
.cena-barra:last-child{background:linear-gradient(180deg,#9EDCFF,rgba(127,208,255,.25))}
/* avisos de exemplo: entram por cima, empilham até 3 e o mais velho sai */
.cena-toasts{--toast-h:68px;--toast-gap:10px;position:relative;height:calc(var(--toast-h)*3 + var(--toast-gap)*2)}
.cena-toast{position:absolute;left:0;right:0;top:0;z-index:1;height:var(--toast-h);display:flex;align-items:center;gap:12px;padding:0 16px 0 12px;border-radius:20px;background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.7);color:#0B1A2E;box-shadow:0 16px 40px rgba(3,12,30,.26);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);transform-origin:50% 0;transform:translate3d(0,calc(var(--i,0) * (var(--toast-h) + var(--toast-gap))),0) scale(calc(1 - var(--i,0) * .03));opacity:1;transition:transform 800ms var(--ease-out),opacity 600ms var(--ease-out);will-change:transform,opacity}
.cena-toast.entrando{transform:translate3d(0,-22px,0) scale(.96);opacity:0;transition:none}
.cena-toast.saindo{z-index:0;opacity:0;transform:translate3d(0,calc(var(--i,0) * (var(--toast-h) + var(--toast-gap)) + 10px),0) scale(.92)}
.cena-toast-icone{width:40px;height:40px;flex:none;border-radius:13px;display:grid;place-items:center;color:#FFFFFF;background:linear-gradient(135deg,#22A6FF,#1570F0);box-shadow:0 6px 14px rgba(21,112,240,.3)}
.cena-toast-cupom .cena-toast-icone{background:linear-gradient(135deg,#F5B942,#D9860B);box-shadow:0 6px 14px rgba(217,134,11,.3)}
.cena-toast-shopee .cena-toast-icone{background:linear-gradient(135deg,#FF8A4C,#EE4D2D);box-shadow:0 6px 14px rgba(238,77,45,.3)}
.cena-toast-economia .cena-toast-icone{background:linear-gradient(135deg,#8B6CFF,#1877FF);box-shadow:0 6px 14px rgba(124,92,255,.3)}
.cena-toast-texto{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.cena-toast-texto b{font-size:14px;font-weight:700;letter-spacing:-.01em}
.cena-toast-texto span{font-size:13px;color:#33445C;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cena-toast-hora{flex:none;align-self:flex-start;margin-top:14px;font-size:11px;font-weight:600;color:#45556B}
.cena-legenda{position:relative;z-index:2;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:#FFFFFF}
.cena-legenda::before{content:'';width:6px;height:6px;flex:none;border-radius:50%;background:rgba(255,255,255,.7)}
.cena-pausada .cena-blob,.cena-pausada .cena-ondas,.cena-pausada .cena-ao-vivo::after{animation-play-state:paused}
@media (min-width:768px) and (max-width:899.98px){
  .entrada-split{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .entrada-form{padding:40px 24px}
  .cena{top:12px;height:calc(100vh - 24px);height:calc(100dvh - 24px);margin:12px 12px 12px 0;padding:28px 24px 24px}
  .cena-contador{padding:18px 18px 16px}
  .cena-contador-valor{font-size:30px}
}
@media (min-width:768px) and (max-height:720px){
  .cena-palco{gap:12px}
  .cena-contador{padding:16px 20px}
  .cena-contador-valor{font-size:32px}
  .cena-barras{height:30px;margin-top:12px}
}
@media (max-width:767.98px){
  .entrada-split{display:flex;flex-direction:column}
  .cena{order:-1;position:relative;top:auto;align-self:stretch;flex:none;height:38vh;min-height:270px;max-height:380px;margin:0;border-radius:0;padding:24px 16px 56px;box-shadow:none}
  .cena-topo{text-align:center}
  .cena-marca{align-items:center;font-size:24px}
  .cena-marca small{align-self:center}
  .cena-contador{display:none}
  .cena-toasts{--toast-h:60px;width:min(340px,100%);height:var(--toast-h)}
  .cena-toast{border-radius:18px}
  .cena-legenda{position:absolute;left:16px;right:16px;bottom:48px;justify-content:center;font-size:12px}
  .entrada-form{position:relative;z-index:1;flex:1 0 auto;align-items:flex-start;margin-top:-32px;padding:32px 16px max(40px,env(safe-area-inset-bottom));border-radius:32px 32px 0 0;background:var(--background-secondary);box-shadow:0 -10px 30px rgba(7,19,38,.12)}
  .entrada .login-wrap{margin:0 auto;gap:0}
  .entrada .login-marca{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .entrada .login-card h1{font-size:32px}
  .entrada .login-card form{margin-top:24px}
}

/* ---- ofertas: fila em cartões ---- */
.grade-ofertas{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:20px}
.oferta{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-card);padding:20px;display:flex;flex-direction:column;gap:16px;min-width:0}
.oferta.proxima{border-color:var(--primary-border-soft)}
.oferta-topo{display:flex;align-items:center;gap:10px}
.oferta-topo .ic{background:rgba(var(--ach-ink),.06);color:var(--icon)}
.oferta-meta{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.oferta-nicho{font-size:12px;color:var(--muted);overflow-wrap:anywhere;line-height:1.3}
.oferta-situacao{display:flex;flex-wrap:wrap;gap:6px;margin-top:-4px}
.oferta-titulo{margin:0;font-size:16px;font-weight:500;line-height:1.35;letter-spacing:-.01em;overflow-wrap:anywhere}
.oferta-preco{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.oferta-valor{font-size:28px;font-weight:500;letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1.1}
.oferta-linhas{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--muted)}
.oferta-linha{display:flex;align-items:flex-start;gap:8px;min-width:0}
.oferta-linha>span:last-child{min-width:0;overflow-wrap:anywhere}
.oferta-linha .ic{width:16px;height:16px;border-radius:0;background:none;color:var(--primary);margin-top:3px}
.oferta-linha .ic svg{width:14px;height:14px}
.oferta-acoes{margin-top:auto}
.oferta-acoes .btns-linha .btn-mini{flex:1}

/* ---- cupons valendo: código em fonte de máquina, azul ---- */
.grade-cupons{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:16px}
.cupom{background:var(--soft);border:1px solid var(--border-subtle);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.codigo-cupom{font-family:var(--font-mono);font-size:24px;font-weight:500;letter-spacing:.02em;line-height:1.2;color:var(--primary-ink);overflow-wrap:anywhere}
.cupom-desc{font-size:14px;line-height:1.45;color:var(--foreground-secondary);overflow-wrap:anywhere}
.cupom-acoes{display:flex;gap:8px;margin-top:auto}

/* ---- vendas: bloco forte e cartões por loja ---- */
.vendas-topo{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr));gap:24px}
.vendas-topo .stat .num{font-size:28px}

/* ---- problemas: aviso com poço de ícone pela gravidade ---- */
.lista-problemas{display:flex;flex-direction:column;gap:12px;max-width:900px}
.problema{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-card);padding:20px 24px;display:flex;align-items:flex-start;gap:16px;min-width:0}
.problema>.ic{width:44px;height:44px;border-radius:14px}
.problema>.ic svg{width:20px;height:20px}
.problema.alta>.ic{background:var(--danger-bg);color:var(--danger-ink)}
.problema.media>.ic{background:var(--warning-bg);color:var(--warning-ink)}
.problema.baixa>.ic{background:var(--primary-bg);color:var(--primary-ink)}
.problema-corpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.problema-tit{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap}
.problema-nome{font-size:16px;font-weight:600;overflow-wrap:anywhere}
.selo-grav{display:inline-flex;align-items:center;min-height:22px;padding:2px 10px;border-radius:999px;border:1px solid transparent;font-size:12px;font-weight:600}
.selo-grav.alta{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger-ink)}
.selo-grav.media{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-ink)}
.selo-grav.baixa{background:var(--primary-bg);border-color:var(--primary-border-soft);color:var(--primary-ink)}
.problema-desc{margin:0;font-size:14px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.problema-meta{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;font-size:12px;color:var(--muted-secondary)}
/* estado vazio com destaque (cartão inteiro): ícone azul, título e frase */
.vazio-forte{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-card);padding:56px 24px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.vazio-forte .ic{width:auto;height:auto;background:none;color:var(--primary)}
.vazio-forte .ic svg{width:32px;height:32px}
.vazio-forte-tit{font-size:20px;font-weight:500;letter-spacing:-.02em}
.vazio-forte-txt{font-size:14px;color:var(--muted)}

/* ---- nichos, números, rotas, conexões e configurações ---- */
.secao-cab{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-bottom:16px;min-width:0}
.secao-cab .ic{background:rgba(var(--ach-ink),.06);color:var(--icon)}
.secao-cab h3,.card .secao-cab h3{margin:0;flex:1 1 140px;min-width:0;font-size:18px;font-weight:500;letter-spacing:-.02em;line-height:1.25;overflow-wrap:anywhere}
.secao-cab-extra{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-left:auto}
.secao-cab+.sub,.card .secao-cab+.sub{margin:-4px 0 20px}
.modal-caixa .secao-cab h3{font-size:22px}
.secao-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.barra-config .secao-txt{flex:1 1 320px}
.secao-txt p{margin:0}
.cartao-numero .tabela+.acoes-numero{margin-top:16px}
.secao-txt .titulo-sec{margin:0;font-size:22px;letter-spacing:-.03em}
/* nichos: bloco azul "Criar nicho com IA" (só embrulha o fluxo de sempre) */
.ia-hero{position:relative;overflow:hidden;background:var(--gradient-hero);border:1px solid var(--border-soft);border-radius:var(--r-card-lg);padding:32px;display:flex;flex-direction:column;gap:20px;min-width:0}
.ia-hero::before{content:'';position:absolute;right:-120px;top:-120px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(var(--ach-accent),.20) 0%,rgba(var(--ach-accent),0) 70%);pointer-events:none}
.ia-hero>*{position:relative}
.ia-hero-txt{display:flex;flex-direction:column;gap:6px;max-width:620px}
.ia-hero-tit{margin:0;font-size:28px;font-weight:500;letter-spacing:-.035em;line-height:1.2}
.ia-hero-sub{margin:0;font-size:15px;line-height:1.5;color:var(--foreground-secondary)}
.ia-hero-resta{font-size:13px;font-weight:600;color:var(--primary-ink)}
.ia-painel{background:var(--surface-float);border:1px solid var(--primary-border-soft);border-radius:var(--r-card);padding:24px;max-width:760px;min-width:0}
.ia-painel.pilha{gap:16px}
.ia-painel h3{margin:0;font-size:18px;font-weight:500;letter-spacing:-.02em}
.ia-painel p{margin:0}
.ia-painel .campo{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:500;color:var(--foreground-secondary)}
.ia-painel .campo input{width:100%;color:var(--foreground)}
.grade-prontos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:12px}
.pronto{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border-soft);border-radius:20px;padding:14px;min-width:0}
.pronto .ic{background:rgba(var(--ach-ink),.06);color:var(--icon)}
.pronto-nome{flex:1;min-width:0;font-size:14px;font-weight:600;overflow-wrap:anywhere}
/* cartão do nicho */
.cartao-nicho{display:flex;flex-direction:column;gap:16px}
.cartao-nicho .pares{margin:0;padding:14px 16px;border-radius:16px;background:var(--soft);font-size:13px}
.nicho-topo{display:flex;align-items:flex-start;gap:12px;min-width:0}
.nicho-topo .ic{background:rgba(var(--ach-ink),.06);color:var(--icon)}
.nicho-nome{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.nicho-nome h3,.card .nicho-nome h3{margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.3;overflow-wrap:anywhere}
.cartao-nicho.off .nicho-nome h3{color:var(--muted)}
.chave{position:relative;flex:none;width:44px;height:26px;margin-top:7px;padding:0;border-radius:99px;border:1px solid var(--border-strong);background:rgba(var(--ach-ink),.10);cursor:pointer;transition:background 200ms var(--ease-out),border-color 200ms var(--ease-out)}
.chave::before{content:'';position:absolute;inset:-9px -4px}
.chave::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:99px;background:var(--foreground);transition:left 200ms var(--ease-out),background 200ms var(--ease-out)}
.chave[aria-checked="true"]{background:var(--primary-solid);border-color:var(--primary-solid)}
.chave[aria-checked="true"]::after{left:20px;background:var(--on-primary)}
.chave:disabled{opacity:.45;cursor:wait}
/* números: ladrilhos, cartão tracejado */
.grade-numeros{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:20px}
.ladrilho-numero{text-align:left;background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-card);padding:24px;display:flex;flex-direction:column;gap:14px;min-width:0;cursor:pointer;transition:background 200ms var(--ease-out),border-color 200ms var(--ease-out),transform 200ms var(--ease-out)}
.ladrilho-numero:hover{background:var(--surface-hover);border-color:var(--primary-border-soft);transform:translateY(-2px)}
.ladrilho-topo{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ladrilho-topo .ic{background:rgba(var(--ach-ink),.06);color:var(--icon)}
.ladrilho-nome{font-size:20px;font-weight:500;letter-spacing:-.02em;overflow-wrap:anywhere}
.ladrilho-sub{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.novo-numero{background:transparent;border:1px dashed var(--border-strong);border-radius:var(--r-card);padding:24px;min-height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-size:14px;font-weight:500;cursor:pointer;transition:border-color 200ms var(--ease-out),color 200ms var(--ease-out),background 200ms var(--ease-out)}
.novo-numero .ic{width:auto;height:auto;background:none;color:inherit}
.novo-numero .ic svg{width:24px;height:24px}
.novo-numero:hover{border-color:var(--primary-border);color:var(--foreground);background:var(--primary-bg)}
.novo-numero:disabled{opacity:.5;cursor:wait}
.cartao-numero .secao-cab h3{display:flex;flex-direction:column}
/* robô e conexões */
.grade-conexoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:24px}
.grade-conexoes .btns .btn{flex:1;white-space:nowrap;justify-content:center}
.conexao{display:flex;flex-direction:column;gap:16px;padding:28px}
.conexao-topo{display:flex;justify-content:space-between;align-items:center;gap:8px}
.conexao-topo .ic{width:44px;height:44px;border-radius:14px;background:rgba(var(--ach-ink),.06);color:var(--icon)}
.conexao-txt h3{margin:0 0 4px}
.conexao-txt .sub{margin:0;font-size:14px;line-height:1.5}
.conexao-info{padding:14px 16px;border-radius:16px;background:var(--soft);margin-top:auto;grid-template-columns:minmax(0,1fr);gap:2px 0;font-size:13px}
.conexao-info dd{margin-bottom:8px}
.conexao-info dd:last-child{margin-bottom:0}
/* rotas, editor de nicho */
.rota-chips span.on{background:var(--primary-bg);color:var(--primary-ink);font-weight:600}
.editor-nicho>.card-head{align-items:center}
.editor-nicho>.card-head .titulo-sec{font-size:22px;letter-spacing:-.03em}
.conferencia-ia{border-color:var(--primary-border-soft)}

/* ---- computador: menu recolhido (só ícones, contador vira ponto) ---- */
@media (min-width:768px){
  .side{transition:none}
  body.anima-menu .side{transition:width 220ms var(--ease-out)}
  body.menu-recolhido .side{width:76px;padding-left:14px;padding-right:14px}
  body.menu-recolhido .side-topo{justify-content:center;padding:0}
  body.menu-recolhido .brand,body.menu-recolhido .ws,body.menu-recolhido .side-card,body.menu-recolhido .side-foot .ws-txt,body.menu-recolhido .side-foot .avatar,body.menu-recolhido .sec{display:none}
  body.menu-recolhido .grupo-menu + .grupo-menu{border-top:1px solid var(--border-subtle);margin-top:8px;padding-top:8px}
  body.menu-recolhido .nav{justify-content:center;width:44px;margin:0 auto;padding:0;gap:0}
  body.menu-recolhido .nav span{font-size:0;gap:0}
  body.menu-recolhido .nav b{position:absolute;top:9px;right:10px;min-width:0;width:8px;height:8px;padding:0;font-size:0}
  body.menu-recolhido .side-foot{flex-direction:column;padding:12px 0 0}
  body.menu-recolhido #btn-recolher-menu svg{transform:scaleX(-1)}
}
.so-desktop{display:grid}

/* ---- telas menores ---- */
@media (max-width:1200px){
  .vendas-topo{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vendas-topo .ini-forte{grid-column:1/-1;min-height:0}
}
@media (max-width:1100px){
  .ini-topo{grid-template-columns:minmax(0,1fr)}
  .grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .span2{grid-column:span 2}
  .cols2{grid-template-columns:minmax(0,1fr)}
  .conteudo{padding:8px 24px 48px}
  .top{padding:18px 24px}
}
/* celular: o menu lateral vira gaveta (abre por "Menu"), o topo deixa de grudar e a barra de atalhos flutua embaixo */
@media (max-width:767.98px){
  .app{display:block}
  .side{position:fixed;top:0;bottom:0;left:0;z-index:40;width:min(300px,86vw);height:auto;transform:translateX(-105%);visibility:hidden;transition:transform .22s var(--ease-out),visibility 0s linear .22s;box-shadow:var(--shadow-float);padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .menu-aberto .side{transform:none;visibility:visible;transition:transform .22s var(--ease-out)}
  .side .so-celular{display:grid}
  .so-desktop{display:none}
  .fundo-menu{display:block;position:fixed;inset:0;z-index:39;background:var(--surface-glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  /* pílula flutuante: só ícones, o item da aba aberta vira círculo azul */
  .barra-baixo{display:flex;justify-content:space-between;align-items:center;gap:4px;position:fixed;left:16px;right:16px;bottom:calc(12px + env(safe-area-inset-bottom));max-width:420px;margin:0 auto;z-index:30;padding:6px;border-radius:999px;background:var(--surface-float);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border);box-shadow:var(--shadow-float)}
  .baixo-item{display:flex;align-items:center;justify-content:center;width:52px;height:52px;flex:none;padding:0;border:0;background:transparent;border-radius:999px;color:var(--icon);font-size:0;text-decoration:none;cursor:pointer;transition:background 200ms var(--ease-out),color 200ms var(--ease-out)}
  .baixo-item svg{width:22px;height:22px}
  .baixo-item.on{background:var(--primary-solid);color:var(--on-primary)}
  .main{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
  .top{position:static;padding:20px 16px 8px;gap:12px;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0}
  .top-tit{flex-basis:100%}
  .top h1{font-size:26px}
  .top-acoes{width:100%;margin-left:0;justify-content:flex-start}
  .status-pill{max-width:100%;height:auto;min-height:40px;padding-top:6px;padding-bottom:6px}
  .status-txt{white-space:normal}
  /* cada seletor numa linha só (desliza para o lado dentro dele); o que não vale para a aba aberta some */
  .seg,#nicho{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%}
  .filtros label{flex:1 1 100%;flex-direction:column;align-items:stretch}
  .filtros select{width:100%;max-width:100%}
  .top-filtros{flex-basis:100%}
  .seg button{white-space:nowrap;flex:none}
  .seg.fraco{display:none}
  .conteudo{padding:8px 16px 32px;gap:16px}
  .tab{gap:16px}
  .toast{left:16px;right:16px;bottom:calc(96px + env(safe-area-inset-bottom));max-width:none}
  .barra-salvar{bottom:calc(88px + env(safe-area-inset-bottom));padding:12px 16px}
  .vendas-topo{grid-template-columns:minmax(0,1fr);gap:16px}
  .ini-topo,.ini-indic{gap:16px}
  .grade-ofertas{gap:16px}
  .oferta{padding:20px 16px}
  .problema{padding:16px;gap:12px}
  .vazio-forte{padding:40px 16px}
  .codigo-cupom{font-size:22px}
  .ini-hero{padding:24px 20px;border-radius:28px}
  .ini-saudacao{font-size:24px}
  .ini-resumo{font-size:16px}
  .ini-forte{padding:24px;min-height:0;border-radius:28px}
  .ini-forte-num{font-size:36px}
  .indic{padding:20px}
  .stat{padding:20px}
  .stat .num{font-size:32px}
  .grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .span2{grid-column:span 1}
  .card{padding:20px 16px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lojas{grid-template-columns:minmax(0,1fr)}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .grade-nichos{grid-template-columns:minmax(0,1fr)}
  .ia-hero{padding:24px 20px;border-radius:28px}
  .ia-hero-tit{font-size:24px}
  .ia-painel{padding:20px 16px}
  .conexao{padding:20px 16px}
  .ladrilho-numero{padding:20px}
  .pares{grid-template-columns:minmax(0,1fr);gap:2px 0}
  .perfil-topo{grid-template-columns:auto minmax(0,1fr)}
  .perfil-nivel{grid-column:1/-1}
  .perfil-avatar{width:52px;height:52px;font-size:20px;border-radius:16px}
  .perfil-nome{font-size:22px}
  .pares dd{margin-bottom:8px}
  .cols2,.pilha{gap:16px}
  /* tabelas largas rolam dentro do cartão, não a página */
  .tabela table{min-width:560px}
  select,input:not([type="checkbox"]):not([type="radio"]),textarea{font-size:16px}
  .modal-caixa{padding:24px}
  .login-card{padding:24px}
  .login-card h1{font-size:28px}
  .login-body::before{top:-220px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* tema escuro: preto de verdade na cena da entrada (o azul fica só no brilho de cima), sem o azul-marinho nem o violeta */
:root[data-theme="dark"] .cena{background:radial-gradient(70% 55% at 88% 6%,rgba(34,166,255,.75) 0%,rgba(34,166,255,0) 70%),linear-gradient(200deg,#1877FF 0%,#0E4FB8 26%,#0A0A0A 62%,#000000 100%);box-shadow:none;border:1px solid rgba(255,255,255,.08)}
:root[data-theme="dark"] .cena-blob-2{display:none}
:root[data-theme="dark"] #cena-g-funda stop{stop-color:#000000}
:root[data-theme="dark"] #cena-g-violeta stop{stop-color:#1877FF}
:root[data-theme="dark"] .cena-blob-4{background:radial-gradient(circle,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 65%)}
:root[data-theme="dark"] .cena-fundo::after{background:linear-gradient(180deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,0) 100%)}
:root[data-theme="dark"] .cena-marca small,:root[data-theme="dark"] .cena-contador{background:rgba(0,0,0,.4)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .cena{background:radial-gradient(70% 55% at 88% 6%,rgba(34,166,255,.75) 0%,rgba(34,166,255,0) 70%),linear-gradient(200deg,#1877FF 0%,#0E4FB8 26%,#0A0A0A 62%,#000000 100%);box-shadow:none;border:1px solid rgba(255,255,255,.08)}
  :root:not([data-theme="light"]) .cena-blob-2{display:none}
  :root:not([data-theme="light"]) #cena-g-funda stop{stop-color:#000000}
  :root:not([data-theme="light"]) #cena-g-violeta stop{stop-color:#1877FF}
  :root:not([data-theme="light"]) .cena-blob-4{background:radial-gradient(circle,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 65%)}
  :root:not([data-theme="light"]) .cena-fundo::after{background:linear-gradient(180deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,0) 100%)}
  :root:not([data-theme="light"]) .cena-marca small,:root:not([data-theme="light"]) .cena-contador{background:rgba(0,0,0,.4)}
}