:root{
  --ag-cor-preto: #0A0A0B;
  --ag-cor-grafite: #26262A;
  --ag-cor-papel: #F7F5F0;
  --ag-cor-branco: #FFFFFF;
  --ag-cor-borda: #E7E4DC;
  --ag-cor-cinza-escuro: #6B6B70;
  --ag-cor-cinza-claro: #A1A1A6;
  --ag-cor-cinza-medio: #3F3F46;  /* contorno fixo (igual nos dois temas) */
  --ag-cor-lucro-sobre-escuro: #B8F03C;
  --ag-cor-lucro-sobre-claro: #4D7C0F;
  --ag-cor-perda-sobre-escuro: #FB7185;
  --ag-cor-perda-sobre-claro: #BE123C;
  --ag-cor-acao-botao: #FF5A1F;
  --ag-cor-acao-link-sobre-claro: #BA3D0B;
  --ag-plataforma-mercado-livre: #FFE600;  /* ponto de identificação da plataforma (igual nos dois temas) */
  --ag-plataforma-amazon: #FF9900;
  --ag-plataforma-magalu: #0086FF;
  --ag-plataforma-shopee: #EE4D2D;
  --ag-fonte-familia: 'Geist', system-ui, sans-serif;
  --ag-fonte-peso-texto: 400;
  --ag-fonte-peso-destaque: 500;
  --ag-fonte-peso-titulo: 600;
  --ag-tipo-1080-destaque: 150px;
  --ag-tipo-1080-titulo: 88px;
  --ag-tipo-1080-numero: 64px;
  --ag-tipo-1080-texto: 32px;
  --ag-tipo-1080-rotulo: 22px;
  --ag-area-segura-post-4x5-lateral: 84px;
  --ag-area-segura-post-4x5-topo: 96px;
  --ag-area-segura-post-4x5-base: 80px;
  --ag-area-segura-story-9x16-lateral: 84px;
  --ag-area-segura-story-9x16-topo: 250px;
  --ag-area-segura-story-9x16-base: 340px;
  --ag-area-segura-slide-16x9-lateral: 120px;
  --ag-area-segura-slide-16x9-topo: 100px;
  --ag-area-segura-slide-16x9-base: 100px;
  --ag-raio-card-escuro: 24px;
  --ag-raio-card-claro: 20px;
  --ag-raio-botao: 999px;
  --ag-raio-barra: 8px;
  --ag-grafismo-marcador-do-miolo-largura: 44px;
  --ag-grafismo-marcador-do-miolo-altura: 10px;
  --ag-grafismo-angulo-lamina: 40;
  --ag-movimento-assinatura: 6300ms;

  /* ---- interface (26/10/2026): tamanhos e medidas do app ---- */
  --ag-fonte-numeros: 'tnum';  /* números tabulares em tudo que tem número */
  --ag-tipo-manchete: 34px;  /* manchete da tela (computador) e título grande do celular */
  --ag-tipo-titulo-interno: 26px;  /* título de tela interna no celular */
  --ag-tipo-numero: 30px;  /* número de destaque em cartão (computador) */
  --ag-tipo-secao: 18px;  /* título de cartão e de seção */
  --ag-tipo-corpo: 15px;  /* texto do computador */
  --ag-tipo-corpo-celular: 17px;  /* texto de lista no celular */
  --ag-tipo-tabela: 14px;  /* células de tabela */
  --ag-tipo-apoio: 13px;  /* legenda e texto de apoio */
  --ag-tipo-rotulo: 12px;  /* rótulo em caixa alta, peso 600, espaçamento 0,14em */
  --ag-espaco-1: 4px;
  --ag-espaco-2: 8px;
  --ag-espaco-3: 12px;
  --ag-espaco-4: 16px;  /* espaço entre cartões */
  --ag-espaco-5: 20px;
  --ag-espaco-6: 24px;  /* margem interna de cartão */
  --ag-espaco-8: 32px;
  --ag-espaco-10: 40px;  /* margem lateral do conteúdo (computador) */
  --ag-raio-cartao: 20px;  /* cartões do app (claro e escuro) */
  --ag-raio-campo: 12px;  /* campos e busca */
  --ag-raio-folha: 24px;  /* folha lateral, diálogo, barra de lote */
  --ag-raio-pilula: 999px;  /* botões e pílulas */
  --ag-altura-botao: 40px;  /* botão no computador */
  --ag-altura-botao-celular: 50px;  /* botão no celular */
  --ag-toque-minimo: 44px;  /* área mínima de toque */
  --ag-menu-largura: 248px;  /* barra lateral do computador */
  --ag-vidro-desfoque: blur(24px) saturate(180%);  /* filtro do vidro */
  --ag-movimento-rapido: 160ms;  /* hover e foco */
  --ag-movimento-padrao: 240ms;  /* abrir folha, menu e diálogo */
  --ag-aviso-duracao: 6000ms;  /* confirmação rápida com Desfazer */

  /* ---- tema claro (padrão): use estes nas telas, não as cores cruas ---- */
  --ag-fundo: #F7F5F0;  /* fundo das telas (papel) */
  --ag-superficie: #FFFFFF;  /* cartões, tabelas, folhas e diálogos */
  --ag-superficie-2: #EFECE5;  /* trilho: selos, pílulas inativas, fundo de barra de progresso */
  --ag-linha: #E7E4DC;  /* bordas e divisórias */
  --ag-linha-suave: #F0EDE6;  /* divisória entre linhas de tabela */
  --ag-texto: #0A0A0B;  /* texto principal */
  --ag-texto-2: #6B6B70;  /* texto secundário sobre fundo e superfície (4,86:1 e 5,3:1) */
  --ag-texto-3: #3F3F46;  /* texto secundário sobre o trilho e corpo de explicação (9,6:1) */
  --ag-lucro: #4D7C0F;  /* lucro, ganho com +, conferido */
  --ag-lucro-barra: #C9D9B4;  /* barra do lucro por dia (a do dia em destaque usa --ag-lucro); igual às telas aprovadas */
  --ag-perda: #BE123C;  /* perda com −, erro, destrutivo */
  --ag-acao: #FF5A1F;  /* fundo do botão principal (um por tela), com texto preto */
  --ag-acao-texto: #0A0A0B;  /* texto sobre o botão principal */
  --ag-link: #BA3D0B;  /* texto clicável (links e "carregar mais"); era #C2410C, escurecido em 30/10/2026 para passar 4,5:1 também sobre o trilho */
  --ag-botao-escuro: #0A0A0B;  /* botão secundário cheio (Entrar, Aprovar compra) */
  --ag-botao-escuro-texto: #FFFFFF;  /* texto do botão secundário cheio */
  --ag-solido: #0A0A0B;  /* barra de lote e aviso rápido (fica escura nos dois modos) */
  --ag-vidro: rgba(255,255,255,.84);  /* navegação em vidro: barra lateral, topo, abas do celular */
  --ag-vidro-borda: rgba(255,255,255,.6);  /* borda do vidro */
  --ag-vidro-sombra: inset 0 1px 0 rgba(255,255,255,.9),0 1px 1px rgba(11,12,16,.04),0 8px 28px rgba(11,12,16,.10);  /* sombra do vidro (só no vidro; cartões não têm sombra) */
  --ag-selecao: rgba(10,10,11,.07);  /* item ativo do menu e da aba */
  --ag-alerta-fundo: #FFF4F2;  /* fundo de aviso de erro */
  --ag-alerta-linha: #F5D0CF;  /* borda de aviso de erro */
  --ag-lucro-fundo: #EEF4E6;  /* fundo de selo de conferido */
  --ag-sobre-perda: #FFFFFF;  /* texto sobre fundo carmim (botão destrutivo, faixa crítica, selo de número) */

  /* pares claro/escuro tirados dos quadros aprovados (29/10/2026), para os moldes */
  --ag-texto-apagado: #A1A1A6;  /* rótulo de seção do menu, seta de lista e contorno de caixa de seleção (mais apagado que texto-2) */
  --ag-luz-lucro: rgba(77,124,15,.06);  /* luz do fundo da tela, no canto de cima à esquerda */
  --ag-luz-neutra: rgba(38,38,42,.06);  /* luz do fundo da tela, no canto de cima à direita */
  --ag-pilula-fundo: rgba(10,10,11,.05);  /* pílulas do topo do computador: loja, período e busca */
  --ag-campo-fundo: rgba(10,10,11,.06);  /* fundo do campo de busca no celular */
  --ag-vidro-leve: rgba(255,255,255,.74);  /* vidro do topo do computador */
  --ag-vidro-divisoria: rgba(10,10,11,.08);  /* linha dentro do vidro (rodapé da barra lateral) */
  --ag-vidro-sombra-topo: inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(255,255,255,.55),0 1px 1px rgba(11,12,16,.04),0 8px 28px rgba(11,12,16,.10);  /* sombra do topo em vidro, com a linha de baixo */
  --ag-alerta-fundo-linha: #FFF8F4;  /* linha de tabela em destaque por perda ou alerta */
  --ag-trilho: #F2EFE8;  /* trilho de barra de progresso e de esqueleto no computador */
  --ag-segmento-trilho: #ECE9E2;  /* fundo do controle de segmentos (abas em pílula) */
  --ag-fundo-total: #FAF9F6;  /* linha de total da tabela */
  --ag-barra-neutra: #D4D0C6;  /* barra cinza do gráfico (vendas, sem lucro) */
  --ag-sombra-menu: 0 12px 40px rgba(0,0,0,.25);  /* menus, seletor de loja, período e busca abertos */
  --ag-sombra-folha: -20px 0 60px rgba(0,0,0,.18);  /* folha lateral (ficha, detalhe da ação) */
  --ag-sombra-segmento: 0 1px 2px rgba(0,0,0,.08);  /* segmento escolhido no controle de segmentos */
  --ag-sombra-barra-de-lote: 0 12px 40px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.06);  /* barra de lote flutuando no celular */
  --ag-veu: rgba(10,10,11,.28);  /* véu atrás da folha lateral */
  --ag-veu-forte: rgba(10,10,11,.32);  /* véu atrás da busca, do detalhe e do diálogo */
  --ag-veu-destrutivo: rgba(10,10,11,.40);  /* véu atrás do diálogo de encerrar conta */
  --ag-chave-desligada: #D9D5CC;  /* trilho da chave desligada (o escuro é proposta: nenhum quadro escuro tem a chave) */
  --ag-sombra-confirmacao: 0 24px 80px rgba(0,0,0,.30);  /* diálogo de confirmação */
  --ag-vidro-sombra-menu: inset 0 1px 0 rgba(255,255,255,.9),0 10px 30px rgba(11,12,16,.14),0 1px 3px rgba(11,12,16,.08);  /* sombra dos menus abertos em vidro */
  --ag-vidro-menu: rgba(255,255,255,.88);  /* vidro dos menus abertos (seletor de loja, período, menu ⋯, menu da conta) */
  --ag-sombra-dialogo: 0 24px 80px rgba(0,0,0,.25);  /* busca e diálogo abertos no meio da tela */
}

/* tema escuro: segue o aparelho, ou fixado em Sua conta › Aparência (data-tema="escuro" no <html>) */
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --ag-fundo: #0A0A0B;
    --ag-superficie: #151517;
    --ag-superficie-2: #26262A;
    --ag-linha: #2A2A2E;
    --ag-linha-suave: #2A2A2E;
    --ag-texto: #FFFFFF;
    --ag-texto-2: #A1A1A6;
    --ag-texto-3: #A1A1A6;
    --ag-lucro: #B8F03C;
    --ag-lucro-barra: #4D7C0F;
    --ag-perda: #FB7185;
    --ag-acao: #FF5A1F;
    --ag-acao-texto: #0A0A0B;
    --ag-link: #FF5A1F;
    --ag-botao-escuro: #FFFFFF;
    --ag-botao-escuro-texto: #0A0A0B;
    --ag-solido: #26262A;
    --ag-vidro: rgba(38,38,42,.80);
    --ag-vidro-borda: rgba(255,255,255,.10);
    --ag-vidro-sombra: inset 0 1px 0 rgba(255,255,255,.12),0 1px 1px rgba(0,0,0,.30),0 8px 28px rgba(0,0,0,.45);
    --ag-selecao: rgba(255,255,255,.10);
    --ag-alerta-fundo: rgba(251,113,133,.10);
    --ag-alerta-linha: rgba(251,113,133,.30);
    --ag-lucro-fundo: rgba(184,240,60,.12);
    --ag-sobre-perda: #0A0A0B;
    --ag-texto-apagado: #6B6B70;
    --ag-luz-lucro: rgba(184,240,60,.06);
    --ag-luz-neutra: rgba(255,255,255,.03);
    --ag-pilula-fundo: rgba(255,255,255,.07);
    --ag-campo-fundo: rgba(255,255,255,.08);
    --ag-vidro-leve: rgba(38,38,42,.70);
    --ag-vidro-divisoria: rgba(255,255,255,.10);
    --ag-vidro-sombra-topo: inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(255,255,255,.05),0 1px 1px rgba(0,0,0,.30),0 8px 28px rgba(0,0,0,.45);
    --ag-alerta-fundo-linha: rgba(251,113,133,.08);
    --ag-trilho: rgba(255,255,255,.06);
    --ag-segmento-trilho: rgba(255,255,255,.06);
    --ag-fundo-total: #151517;
    --ag-barra-neutra: #26262A;
    --ag-sombra-menu: 0 12px 40px rgba(0,0,0,.25);
    --ag-sombra-folha: -20px 0 60px rgba(0,0,0,.18);
    --ag-sombra-segmento: 0 1px 2px rgba(0,0,0,.08);
    --ag-sombra-barra-de-lote: 0 12px 40px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.06);
    --ag-veu: rgba(10,10,11,.28);
    --ag-veu-forte: rgba(10,10,11,.32);
    --ag-veu-destrutivo: rgba(10,10,11,.40);
    --ag-chave-desligada: #3A3A3E;
    --ag-sombra-confirmacao: 0 24px 80px rgba(0,0,0,.30);
    --ag-vidro-sombra-menu: inset 0 1px 0 rgba(245,246,248,.12),0 10px 30px rgba(0,0,0,.50),0 1px 3px rgba(0,0,0,.30);
    --ag-vidro-menu: rgba(34,34,38,.90);
    --ag-sombra-dialogo: 0 24px 80px rgba(0,0,0,.25);
  }
}
:root[data-tema="escuro"], [data-tema="escuro"]{  /* também vale para um trecho da página, como uma seção escura do site */
  --ag-fundo: #0A0A0B;
  --ag-superficie: #151517;
  --ag-superficie-2: #26262A;
  --ag-linha: #2A2A2E;
  --ag-linha-suave: #2A2A2E;
  --ag-texto: #FFFFFF;
  --ag-texto-2: #A1A1A6;
  --ag-texto-3: #A1A1A6;
  --ag-lucro: #B8F03C;
  --ag-lucro-barra: #4D7C0F;
  --ag-perda: #FB7185;
  --ag-acao: #FF5A1F;
  --ag-acao-texto: #0A0A0B;
  --ag-link: #FF5A1F;
  --ag-botao-escuro: #FFFFFF;
  --ag-botao-escuro-texto: #0A0A0B;
  --ag-solido: #26262A;
  --ag-vidro: rgba(38,38,42,.80);
  --ag-vidro-borda: rgba(255,255,255,.10);
  --ag-vidro-sombra: inset 0 1px 0 rgba(255,255,255,.12),0 1px 1px rgba(0,0,0,.30),0 8px 28px rgba(0,0,0,.45);
  --ag-selecao: rgba(255,255,255,.10);
  --ag-alerta-fundo: rgba(251,113,133,.10);
  --ag-alerta-linha: rgba(251,113,133,.30);
  --ag-lucro-fundo: rgba(184,240,60,.12);
  --ag-sobre-perda: #0A0A0B;
  --ag-texto-apagado: #6B6B70;
  --ag-luz-lucro: rgba(184,240,60,.06);
  --ag-luz-neutra: rgba(255,255,255,.03);
  --ag-pilula-fundo: rgba(255,255,255,.07);
  --ag-campo-fundo: rgba(255,255,255,.08);
  --ag-vidro-leve: rgba(38,38,42,.70);
  --ag-vidro-divisoria: rgba(255,255,255,.10);
  --ag-vidro-sombra-topo: inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(255,255,255,.05),0 1px 1px rgba(0,0,0,.30),0 8px 28px rgba(0,0,0,.45);
  --ag-alerta-fundo-linha: rgba(251,113,133,.08);
  --ag-trilho: rgba(255,255,255,.06);
  --ag-segmento-trilho: rgba(255,255,255,.06);
  --ag-fundo-total: #151517;
  --ag-barra-neutra: #26262A;
  --ag-sombra-menu: 0 12px 40px rgba(0,0,0,.25);
  --ag-sombra-folha: -20px 0 60px rgba(0,0,0,.18);
  --ag-sombra-segmento: 0 1px 2px rgba(0,0,0,.08);
  --ag-sombra-barra-de-lote: 0 12px 40px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.06);
  --ag-veu: rgba(10,10,11,.28);
  --ag-veu-forte: rgba(10,10,11,.32);
  --ag-veu-destrutivo: rgba(10,10,11,.40);
  --ag-chave-desligada: #3A3A3E;
  --ag-sombra-confirmacao: 0 24px 80px rgba(0,0,0,.30);
  --ag-vidro-sombra-menu: inset 0 1px 0 rgba(245,246,248,.12),0 10px 30px rgba(0,0,0,.50),0 1px 3px rgba(0,0,0,.30);
  --ag-vidro-menu: rgba(34,34,38,.90);
  --ag-sombra-dialogo: 0 24px 80px rgba(0,0,0,.25);
}

/* trecho claro dentro de uma página escura (ex.: cartão claro numa vitrine escura) */
[data-tema="claro"]{
  --ag-fundo: #F7F5F0;
  --ag-superficie: #FFFFFF;
  --ag-superficie-2: #EFECE5;
  --ag-linha: #E7E4DC;
  --ag-linha-suave: #F0EDE6;
  --ag-texto: #0A0A0B;
  --ag-texto-2: #6B6B70;
  --ag-texto-3: #3F3F46;
  --ag-lucro: #4D7C0F;
  --ag-lucro-barra: #C9D9B4;
  --ag-perda: #BE123C;
  --ag-acao: #FF5A1F;
  --ag-acao-texto: #0A0A0B;
  --ag-link: #BA3D0B;
  --ag-botao-escuro: #0A0A0B;
  --ag-botao-escuro-texto: #FFFFFF;
  --ag-solido: #0A0A0B;
  --ag-vidro: rgba(255,255,255,.84);
  --ag-vidro-borda: rgba(255,255,255,.6);
  --ag-vidro-sombra: inset 0 1px 0 rgba(255,255,255,.9),0 1px 1px rgba(11,12,16,.04),0 8px 28px rgba(11,12,16,.10);
  --ag-selecao: rgba(10,10,11,.07);
  --ag-alerta-fundo: #FFF4F2;
  --ag-alerta-linha: #F5D0CF;
  --ag-lucro-fundo: #EEF4E6;
  --ag-sobre-perda: #FFFFFF;
  --ag-texto-apagado: #A1A1A6;
  --ag-luz-lucro: rgba(77,124,15,.06);
  --ag-luz-neutra: rgba(38,38,42,.06);
  --ag-pilula-fundo: rgba(10,10,11,.05);
  --ag-campo-fundo: rgba(10,10,11,.06);
  --ag-vidro-leve: rgba(255,255,255,.74);
  --ag-vidro-divisoria: rgba(10,10,11,.08);
  --ag-vidro-sombra-topo: inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(255,255,255,.55),0 1px 1px rgba(11,12,16,.04),0 8px 28px rgba(11,12,16,.10);
  --ag-alerta-fundo-linha: #FFF8F4;
  --ag-trilho: #F2EFE8;
  --ag-segmento-trilho: #ECE9E2;
  --ag-fundo-total: #FAF9F6;
  --ag-barra-neutra: #D4D0C6;
  --ag-sombra-menu: 0 12px 40px rgba(0,0,0,.25);
  --ag-sombra-folha: -20px 0 60px rgba(0,0,0,.18);
  --ag-sombra-segmento: 0 1px 2px rgba(0,0,0,.08);
  --ag-sombra-barra-de-lote: 0 12px 40px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.06);
  --ag-veu: rgba(10,10,11,.28);
  --ag-veu-forte: rgba(10,10,11,.32);
  --ag-veu-destrutivo: rgba(10,10,11,.40);
  --ag-chave-desligada: #D9D5CC;
  --ag-sombra-confirmacao: 0 24px 80px rgba(0,0,0,.30);
  --ag-vidro-sombra-menu: inset 0 1px 0 rgba(255,255,255,.9),0 10px 30px rgba(11,12,16,.14),0 1px 3px rgba(11,12,16,.08);
  --ag-vidro-menu: rgba(255,255,255,.88);
  --ag-sombra-dialogo: 0 24px 80px rgba(0,0,0,.25);
}