/* ===================================================================
   DELTA ANALYTICS — Apple Design Language v7.0
   ---------------------------------------------------------------------
   Camada de refinamento sistêmico aplicada SOBRE style.css legado.
   Objetivo: reduzir ruído visual, fortalecer hierarquia da informação,
   abandonar estereótipos SaaS (gradientes, glow, glassmorphism,
   transformações de hover, fundos coloridos decorativos).
   ---------------------------------------------------------------------
   Filosofia: a elegância surge da organização da informação —
   nunca da decoração.

   FASES IMPLEMENTADAS:
   1. Token cleanup        — radii (3), shadows (2), easing (1), tipografia
   2. Componentes          — MetricCard, Badge, SectionHeader unificados
   3. De-decoration global — remover ::before/::after, hover transforms, gradientes
   4. Refactor por tela    — eliminar heros dark, prod-card tints, simplificar
   5. Navegação            — tabs underline, subabas neutras, modal backdrop
   =================================================================== */


/* ============================================================
   1. TOKENS UNIFICADOS (Apple-way)
   ============================================================ */
:root {
    /* --- Cor --- */
    /* Marca: usada APENAS em ação primária, links, item selecionado */
    --v7-brand:        #0133D2;
    --v7-brand-soft:   #E8EEFD;   /* fundo de seleção / hover muito leve */

    /* Estados semânticos (a única outra família autorizada de cor) */
    --v7-success:      #16A34A;
    --v7-success-soft: #ECFDF3;
    --v7-warning:      #B45309;
    --v7-warning-soft: #FEF3C7;
    --v7-danger:       #B91C1C;
    --v7-danger-soft:  #FEE2E2;
    --v7-info:         #1D4ED8;
    --v7-info-soft:    #DBEAFE;

    /* Neutros (mantém ink-* legado) — herdados de style.css */

    /* --- Radii (3 tiers apenas) --- */
    --v7-radius-sm: 8px;    /* badges, chips, inputs, ícones pequenos */
    --v7-radius-md: 12px;   /* cards padrão */
    --v7-radius-lg: 16px;   /* containers grandes, modais */

    /* --- Sombras (2 tiers apenas) --- */
    --v7-shadow-sm: 0 1px 2px rgba(10,13,24,0.04);
    --v7-shadow-md: 0 4px 12px rgba(10,13,24,0.06);

    /* --- Bordas --- */
    --v7-border:        rgba(15,18,32,0.08);
    --v7-border-strong: rgba(15,18,32,0.14);

    /* --- Easing (1 só) --- */
    --v7-ease: cubic-bezier(.2, .8, .2, 1);

    /* --- Tipografia (escala fixa) --- */
    --v7-display:    40px;  /* hero number — 1 por tela */
    --v7-h1:         26px;  /* título de aba */
    --v7-h2:         18px;  /* título de card */
    --v7-h3:         15px;  /* subtítulo */
    --v7-metric:     22px;  /* KPI value */
    --v7-metric-sm:  17px;  /* métrica secundária */
    --v7-body:       14px;  /* corpo */
    --v7-sm:         13px;  /* sub */
    --v7-xs:         11px;  /* metadados */
    --v7-micro:      10px;  /* eyebrow restrito */
}


/* ============================================================
   BASE — fundo neutro absoluto (sem radial-gradients de marca)
   ============================================================ */
body {
    background: var(--ink-50) !important;
}


/* ============================================================
   2. TIPOGRAFIA — utilitários sistêmicos
   ============================================================ */
.num,
.tabular-nums,
[class*="value"],
.kpi-value, .ops-value, .hero-stat-value, .hero-number,
.cmp-kpi-value, .daypart-value, .cb-stat-value,
.ranking-row .ranking-value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    letter-spacing: -0.01em;
}

/* Alinhamento numérico à direita — aplicar em colunas financeiras */
.num-right,
td.num,
.ranking-value {
    text-align: right;
}


/* ============================================================
   3. HEADER — logo monocromático, ações reduzidas
   ============================================================ */
header.print\:hidden {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(255,255,255,0.85);
    border-bottom: 1px solid var(--v7-border);
}
/* Logo monocromático */
header .w-10.h-10.rounded-2xl {
    background: var(--ink-900) !important;
    border-radius: var(--v7-radius-sm) !important;
    box-shadow: none !important;
}
/* Botão primário sem glow */
#btn-add-period {
    box-shadow: none !important;
    border-radius: var(--v7-radius-sm) !important;
}
#btn-add-period:hover {
    background: var(--ink-900) !important;
}
#btn-manage-periods {
    border-radius: var(--v7-radius-sm) !important;
}
/* Seletor de período mais discreto */
#period-selector-wrap {
    border-radius: var(--v7-radius-sm) !important;
}


/* ============================================================
   4. TABS — underline puro (sem decoração)
   ============================================================ */
.tab-btn {
    padding: 14px 12px !important;
    font-size: 13px;
    transition: color 0.15s var(--v7-ease), border-color 0.15s var(--v7-ease) !important;
}
.tab-btn:hover {
    color: var(--ink-900);
}
.tab-btn.active {
    color: var(--ink-900) !important;
    border-bottom-color: var(--ink-900) !important;
}

/* Subtabs — pílulas discretas */
.subtab-bar {
    background: var(--ink-100);
    border-radius: var(--v7-radius-sm) !important;
    padding: 3px !important;
}
.subtab-btn {
    font-size: 12.5px;
    border-radius: 6px !important;
    transition: background 0.15s var(--v7-ease), color 0.15s var(--v7-ease) !important;
}
.subtab-btn.active {
    background: #FFFFFF !important;
    color: var(--ink-900) !important;
    box-shadow: var(--v7-shadow-sm) !important;
}

/* Segmented control idem */
.seg-control {
    border-radius: var(--v7-radius-sm) !important;
}
.seg-btn.active {
    color: var(--ink-900) !important;
}


/* ============================================================
   5. SURFACES / CARDS — base unificada
   ============================================================ */
.surface,
.kpi-card, .ops-card, .cmp-kpi-card, .daypart-card,
.insight-slide, .insight-card,
.cross-card,
.prod-card-mix, .prod-card-subcat, .prod-card-graph,
.prod-card-recommend, .prod-card-pairs, .prod-card-network {
    background: #FFFFFF !important;
    color: var(--ink-900) !important;
    border: 1px solid var(--v7-border) !important;
    border-radius: var(--v7-radius-md) !important;
    box-shadow: var(--v7-shadow-sm) !important;
    overflow: hidden;
}

/* Hover: sem transform, apenas borda e shadow */
.surface-hover:hover,
.kpi-card:hover, .ops-card:hover, .cmp-kpi-card:hover,
.daypart-card:hover, .insight-slide:hover, .insight-card:hover,
.cross-card:hover {
    transform: none !important;
    border-color: var(--v7-border-strong) !important;
    box-shadow: var(--v7-shadow-md) !important;
}

/* Eliminar TODAS as decorações ::before/::after em cards */
.kpi-card::before, .kpi-card::after,
.ops-card::before, .ops-card::after,
.cmp-kpi-card::before, .cmp-kpi-card::after,
.cross-card::before, .cross-card::after,
.insight-slide::before, .insight-slide::after,
.insight-card::before, .insight-card::after,
.daypart-card::before, .daypart-card::after,
.prod-card-mix::before, .prod-card-mix::after,
.prod-card-subcat::before, .prod-card-subcat::after,
.prod-card-graph::before, .prod-card-graph::after,
.prod-card-recommend::before, .prod-card-recommend::after,
.prod-card-pairs::before, .prod-card-pairs::after,
.prod-card-network::before, .prod-card-network::after {
    display: none !important;
    content: none !important;
}

/* Texto branco do prod-card-network → reverter para ink */
.prod-card-network,
.prod-card-network *,
.prod-card-network h1, .prod-card-network h2, .prod-card-network h3,
.prod-card-network h4, .prod-card-network p, .prod-card-network span {
    color: var(--ink-900) !important;
}
.prod-card-network .text-white,
.prod-card-network [class*="text-white"] {
    color: var(--ink-900) !important;
}


/* ============================================================
   6. HERO PRINCIPAL — único hero do sistema, simplificado
   ------------------------------------------------------------
   Mantemos UM hero (Visão Geral) como ponto de ancoragem,
   mas plano: surface branca, número tabular grande, sem orbs.
   ============================================================ */
.hero-card {
    background: #FFFFFF !important;
    color: var(--ink-900) !important;
    border: 1px solid var(--v7-border) !important;
    border-radius: var(--v7-radius-lg) !important;
    padding: 28px 32px !important;
    box-shadow: var(--v7-shadow-sm) !important;
    overflow: hidden;
}
.hero-card::before,
.hero-card::after {
    display: none !important;
    content: none !important;
}

.hero-eyebrow {
    color: var(--ink-500) !important;
    font-size: var(--v7-micro);
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}
.hero-eyebrow .pulse {
    background: var(--v7-success) !important;
    animation: none !important;
    box-shadow: none !important;
}

.hero-number {
    font-size: clamp(32px, 4.5vw, var(--v7-display)) !important;
    font-weight: 600 !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    color: var(--ink-900) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.05 !important;
}

.hero-sub-line {
    color: var(--ink-500) !important;
    font-size: var(--v7-sm);
}

.hero-divider {
    background: var(--ink-200) !important;
    height: 1px !important;
    margin: 24px 0 20px !important;
}

.hero-mini-label {
    color: var(--ink-500) !important;
    font-size: var(--v7-micro);
    letter-spacing: 0.08em;
}

/* Trend chip — plano semântico */
.hero-trend-chip {
    background: var(--ink-100) !important;
    border: 1px solid var(--v7-border) !important;
    color: var(--ink-700) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    border-radius: var(--v7-radius-sm) !important;
    animation: none !important;
}
.hero-trend-chip:hover { transform: none !important; }
.hero-trend-chip.up {
    background: var(--v7-success-soft) !important;
    border-color: transparent !important;
    color: var(--v7-success) !important;
}
.hero-trend-chip.down {
    background: var(--v7-danger-soft) !important;
    border-color: transparent !important;
    color: var(--v7-danger) !important;
}
.hero-trend-chip.neutral {
    background: var(--ink-100) !important;
    color: var(--ink-600) !important;
}

/* Hero stats — flat, sem glassmorphism */
.hero-stat {
    background: var(--ink-50) !important;
    border: 1px solid var(--v7-border) !important;
    border-radius: var(--v7-radius-md) !important;
    padding: 16px 18px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible;
}
.hero-stat::before,
.hero-stat::after {
    display: none !important;
    content: none !important;
}
.hero-stat:hover {
    background: var(--ink-50) !important;
    border-color: var(--v7-border-strong) !important;
    transform: none !important;
}
.hero-stat-highlight {
    background: var(--v7-brand-soft) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.hero-stat-label {
    color: var(--ink-500) !important;
    font-size: var(--v7-micro);
    letter-spacing: 0.08em;
}
.hero-stat-value {
    font-size: var(--v7-metric) !important;
    font-weight: 600 !important;
    color: var(--ink-900) !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    letter-spacing: -0.015em !important;
}
.hero-stat-highlight .hero-stat-value {
    color: var(--v7-brand) !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
}
.hero-stat-sub {
    color: var(--ink-500) !important;
    font-size: var(--v7-xs);
}
.hero-stat-sub b { color: var(--ink-900) !important; font-weight: 600 !important; }


/* ============================================================
   7. SECTION-HEADER — eyebrow reduzido a uso restrito
   ============================================================ */
.section-header h3.card-title,
.card-title {
    font-size: var(--v7-h2) !important;
    font-weight: 600 !important;
    color: var(--ink-900) !important;
    letter-spacing: -0.015em !important;
}
.card-eyebrow {
    color: var(--ink-500) !important;
    font-weight: 600 !important;
    font-size: var(--v7-micro) !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 4px !important;
}
.section-header .card-eyebrow {
    color: var(--ink-500) !important;
    opacity: 1 !important;
}
.card-sub {
    color: var(--ink-500) !important;
    font-size: var(--v7-sm) !important;
}


/* ============================================================
   8. KPI / OPS / CMP-KPI / DAYPART — MetricCard unificado
   ============================================================ */
.kpi-card, .ops-card, .cmp-kpi-card, .daypart-card {
    padding: 20px !important;
}

/* Label uniforme */
.kpi-label, .ops-label, .cmp-kpi-label, .daypart-label {
    color: var(--ink-500) !important;
    font-size: var(--v7-micro) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 8px !important;
}

/* Value uniforme */
.kpi-value, .ops-value, .cmp-kpi-value, .daypart-value {
    font-size: var(--v7-metric) !important;
    font-weight: 600 !important;
    color: var(--ink-900) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
}

/* Sub uniforme */
.kpi-sub, .ops-sub, .cmp-kpi-sub, .daypart-sub {
    color: var(--ink-500) !important;
    font-size: var(--v7-xs) !important;
}

/* Ícones — monocromáticos outline */
.kpi-icon, .ops-icon {
    background: var(--ink-100) !important;
    color: var(--ink-700) !important;
    border-radius: var(--v7-radius-sm) !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
    box-shadow: none !important;
}
.kpi-icon.blue, .ops-icon-blue,
.kpi-icon.cyan, .ops-icon-cyan,
.kpi-icon.lime, .ops-icon-lime,
.kpi-icon.ink {
    background: var(--ink-100) !important;
    color: var(--ink-700) !important;
}
.ops-card:hover .ops-icon {
    transform: none !important;
}

/* Trends — chips semânticos */
.ops-trend, .kpi-trend {
    border-radius: var(--v7-radius-sm) !important;
    font-size: var(--v7-xs) !important;
    font-weight: 600 !important;
    padding: 2px 8px !important;
}
.ops-trend.up, .kpi-trend.up {
    background: var(--v7-success-soft) !important;
    color: var(--v7-success) !important;
}
.ops-trend.down, .kpi-trend.down {
    background: var(--v7-danger-soft) !important;
    color: var(--v7-danger) !important;
}
.ops-trend.neutral, .kpi-trend.neutral {
    background: var(--ink-100) !important;
    color: var(--ink-600) !important;
}


/* ============================================================
   9. DAYPART — ícones monocromáticos, barra neutra
   ============================================================ */
.daypart-card { padding: 18px !important; }
.dp-icon,
[class*="dp-icon-"] {
    background: var(--ink-100) !important;
    color: var(--ink-700) !important;
    border-radius: var(--v7-radius-sm) !important;
    box-shadow: none !important;
}
/* Barra preenchida por hora-do-dia: azul-marca (semântico = atividade)
   em vez de gradientes coloridos arbitrários (cyan/lime/azul-escuro)
   e em vez do ink-700 preto que estava em uso por engano. */
.dp-bar-fill,
[class*="dp-bar-fill-"],
.daypart-card.dp-madrugada .dp-bar-fill,
.daypart-card.dp-manha     .dp-bar-fill,
.daypart-card.dp-tarde     .dp-bar-fill,
.daypart-card.dp-noite     .dp-bar-fill {
    background: var(--v7-brand) !important;
    border-radius: 999px !important;
}
.dp-bar {
    background: var(--ink-100) !important;
    border-radius: 999px !important;
}


/* ============================================================
   10. RANKING — numeração tabular, sem medalhas
   ============================================================ */
.ranking-row {
    border: 1px solid transparent !important;
    border-bottom: 1px solid var(--ink-100) !important;
    background: transparent !important;
    border-radius: 0 !important;
    transition: background 0.15s var(--v7-ease) !important;
    padding: 12px 14px !important;
}
.ranking-row:hover {
    background: var(--ink-50) !important;
    transform: none !important;
    border-color: transparent !important;
    border-bottom-color: var(--ink-100) !important;
    box-shadow: none !important;
}
.ranking-pos,
.ranking-position,
.ranking-row .position,
.ranking-row > :first-child {
    background: transparent !important;
    color: var(--ink-500) !important;
    font-variant-numeric: tabular-nums !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    border: none !important;
}
/* Top 3 — sem medalhas, apenas peso visual mínimo */
.ranking-row.top-1 .ranking-pos,
.ranking-row.top-2 .ranking-pos,
.ranking-row.top-3 .ranking-pos,
.ranking-row[data-pos="1"] .ranking-pos,
.ranking-row[data-pos="2"] .ranking-pos,
.ranking-row[data-pos="3"] .ranking-pos {
    background: transparent !important;
    color: var(--ink-900) !important;
}
/* CORREÇÃO v7.2: o HTML usa <ranking-bar-wrap><ranking-bar>.
   wrap = track claro · bar = preenchimento da marca.
   Antes ambos estavam com mesma cor (ink-100), tornando a barra invisível. */
.ranking-bar-wrap {
    background: var(--ink-100) !important;
    border-radius: 999px !important;
    overflow: hidden;
}
.ranking-bar {
    background: var(--v7-brand) !important;
    border-radius: 999px !important;
    height: 100%;
}
/* Mantém compatibilidade caso outro local use .ranking-bar-fill */
.ranking-bar-fill {
    background: var(--v7-brand) !important;
    border-radius: 999px !important;
}


/* ============================================================
   11. INSIGHTS RAIL — lista vertical compacta
   ============================================================ */
.insight-slide,
.insight-card {
    padding: 18px 20px !important;
    border-left: 3px solid var(--ink-300) !important;
    border-radius: var(--v7-radius-md) !important;
    transition: background 0.15s var(--v7-ease), border-color 0.15s var(--v7-ease) !important;
}
.insight-slide:hover,
.insight-card:hover {
    transform: none !important;
}
/* Cor da borda esquerda por tom semântico */
.insight-slide[data-tone="info"],     .insight-card[data-tone="info"]     { border-left-color: var(--v7-info); }
.insight-slide[data-tone="success"],  .insight-card[data-tone="success"]  { border-left-color: var(--v7-success); }
.insight-slide[data-tone="warning"],  .insight-card[data-tone="warning"]  { border-left-color: var(--v7-warning); }
.insight-slide[data-tone="danger"],   .insight-card[data-tone="danger"]   { border-left-color: var(--v7-danger); }
.insight-slide[data-tone="neutral"],  .insight-card[data-tone="neutral"]  { border-left-color: var(--ink-400); }

/* Ícones do insight — monocromáticos */
.insight-slide .insight-icon,
.insight-card .insight-icon,
.insight-slide [class*="insight-icon"],
.insight-card [class*="insight-icon"] {
    background: var(--ink-100) !important;
    color: var(--ink-700) !important;
    border-radius: var(--v7-radius-sm) !important;
    box-shadow: none !important;
    transform: none !important;
}
.insight-slide:hover .insight-icon,
.insight-card:hover .insight-icon {
    transform: none !important;
}


/* ============================================================
   12. CASHBACK HERO — plano, branco, sem orbs
   ============================================================ */
/* Eliminar elementos decorativos do cb-hero (orbs blur + grid pattern) */
.cb-hero-bg,
.cb-hero-orb,
.cb-hero-orb-1,
.cb-hero-orb-2,
.cb-hero-grid {
    display: none !important;
}

.cb-hero {
    background: #FFFFFF !important;
    border: 1px solid var(--v7-border) !important;
    border-radius: var(--v7-radius-lg) !important;
    color: var(--ink-900) !important;
    box-shadow: var(--v7-shadow-sm) !important;
    padding: 28px 32px !important;
    overflow: hidden;
}
.cb-hero::before,
.cb-hero::after {
    display: none !important;
    content: none !important;
}
.cb-hero * {
    color: inherit;
}
.cb-hero h1, .cb-hero h2, .cb-hero h3,
.cb-hero .cb-hero-title,
.cb-hero .cb-title {
    color: var(--ink-900) !important;
    font-size: var(--v7-h1) !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
}
.cb-hero .cb-hero-sub,
.cb-hero .cb-sub,
.cb-hero p {
    color: var(--ink-500) !important;
}
.cb-hero .cb-hero-eyebrow,
.cb-hero .cb-eyebrow {
    color: var(--ink-500) !important;
    font-size: var(--v7-micro);
    letter-spacing: 0.08em;
}

/* Input box do cashback — sem glassmorphism */
.cb-hero-input-box,
.cb-hero .cb-input-box,
.cb-hero input[type="text"],
.cb-hero input[type="number"] {
    background: var(--ink-50) !important;
    border: 1px solid var(--v7-border) !important;
    border-radius: var(--v7-radius-md) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: var(--ink-900) !important;
    box-shadow: none !important;
}

/* Stats do cashback — flat */
.cb-stat,
.cb-hero .cb-stat {
    background: var(--ink-50) !important;
    border: 1px solid var(--v7-border) !important;
    border-radius: var(--v7-radius-md) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 14px 16px !important;
}
.cb-stat-label, .cb-hero .cb-stat-label {
    color: var(--ink-500) !important;
    font-size: var(--v7-micro) !important;
    letter-spacing: 0.08em !important;
}
.cb-stat-value, .cb-hero .cb-stat-value {
    color: var(--ink-900) !important;
    font-size: var(--v7-metric-sm) !important;
    font-weight: 600 !important;
}

/* Taxa em destaque */
.cb-hero .cb-rate,
.cb-hero .cb-taxa,
.cb-hero [class*="cb-rate"],
.cb-hero [class*="cb-taxa"] {
    color: var(--ink-900) !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    font-weight: 600 !important;
}

/* Barra de progresso — sutil */
.cb-progress,
.cb-hero .cb-progress {
    background: var(--ink-100) !important;
    height: 4px !important;
    border-radius: 999px !important;
}
.cb-progress-fill,
.cb-hero .cb-progress-fill {
    background: var(--v7-brand) !important;
}

/* v7.6 — Track e fills da barra de progresso do cashback.
   O CSS original (style.css L2952) tinha track quase transparente
   (rgba 0.06) e fill com gradient lime + glow. No hero achatado
   branco, ficava: barra "Utilizada" em gradient roxo/azul gritante,
   barra "Remanescente" invisível. */
.cb-hero .cb-progress-track {
    background: var(--ink-100) !important;
    border: 1px solid var(--v7-border) !important;
    height: 10px !important;
    border-radius: 999px !important;
}
.cb-hero .cb-progress-fill-used {
    background: var(--v7-brand) !important;
    box-shadow: none !important;
}
.cb-hero .cb-progress-fill-rest {
    background: var(--ink-200) !important;
}
.cb-hero .cb-progress-value {
    color: var(--ink-900) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
}
.cb-hero .cb-progress-label {
    color: var(--ink-500) !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
}
.cb-hero .cb-progress-legend {
    color: var(--ink-500) !important;
    font-size: 11.5px !important;
    margin-top: 10px !important;
}
.cb-hero .cb-progress-legend .cb-legend-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 999px;
    margin-right: 6px;
    vertical-align: middle;
}
.cb-hero .cb-progress-legend span:nth-of-type(1) .cb-legend-dot {
    background: var(--v7-brand) !important;
}
.cb-hero .cb-progress-legend span:nth-of-type(2) .cb-legend-dot {
    background: var(--ink-200) !important;
}


/* ============================================================
   13. AVALIAÇÕES / APP — heros dark eliminados
   ============================================================ */
.ratings-hero,
.app-hero,
.app-performance,
[class*="ratings-hero"],
[class*="app-hero"],
[class*="app-performance"] {
    background: #FFFFFF !important;
    color: var(--ink-900) !important;
    border: 1px solid var(--v7-border) !important;
    border-radius: var(--v7-radius-lg) !important;
    box-shadow: var(--v7-shadow-sm) !important;
    padding: 28px 32px !important;
}
.ratings-hero::before, .ratings-hero::after,
.app-hero::before, .app-hero::after,
.app-performance::before, .app-performance::after {
    display: none !important;
    content: none !important;
}
.ratings-hero *,
.app-hero *,
.app-performance * {
    color: inherit;
}
.ratings-hero h1, .ratings-hero h2, .ratings-hero h3,
.app-hero h1, .app-hero h2, .app-hero h3,
.app-performance h1, .app-performance h2, .app-performance h3 {
    color: var(--ink-900) !important;
}


/* ============================================================
   14. PRODUTOS — hero plano + prod-cards unificados (sem tints)
   ============================================================ */
.prod-hero,
[class*="prod-hero"],
#products .hero,
#products [class*="hero"] {
    background: #FFFFFF !important;
    color: var(--ink-900) !important;
    border: 1px solid var(--v7-border) !important;
    border-radius: var(--v7-radius-lg) !important;
    box-shadow: var(--v7-shadow-sm) !important;
}
.prod-hero::before, .prod-hero::after {
    display: none !important;
    content: none !important;
}

/* Todos os prod-cards: surface branca uniforme */
.prod-card-mix,
.prod-card-subcat,
.prod-card-graph,
.prod-card-recommend,
.prod-card-pairs,
.prod-card-network {
    background: #FFFFFF !important;
    color: var(--ink-900) !important;
}
/* Ícones dos prod-cards — monocromáticos */
.prod-card-mix [class*="icon"],
.prod-card-subcat [class*="icon"],
.prod-card-graph [class*="icon"],
.prod-card-recommend [class*="icon"],
.prod-card-pairs [class*="icon"],
.prod-card-network [class*="icon"] {
    background: var(--ink-100) !important;
    color: var(--ink-700) !important;
    box-shadow: none !important;
}

/* Categorias de produto: pills neutras */
.prod-cat-pill,
.prod-category {
    background: var(--ink-100) !important;
    color: var(--ink-700) !important;
    border: 1px solid var(--v7-border) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}
.prod-cat-pill.active,
.prod-cat-pill[aria-selected="true"] {
    background: var(--ink-900) !important;
    color: #FFFFFF !important;
    border-color: var(--ink-900) !important;
}


/* ============================================================
   15. CLIENTES — fraud banner plano, tabela limpa
   ------------------------------------------------------------
   v7.6 — FIX REAL do bug "(": o seletor `[class*="fraud-banner"]`
   capturava TODOS os filhos da v7.4 (-eyebrow, -title, -meta,
   -metric, -metric-value, -metric-info, -metric-denom,
   -metric-pct, -action), aplicando border-left vermelho de 3px
   a cada um — daí os parênteses antes de cada texto.
   Solução: seletor restrito ao container (#fraud-banner é o
   wrapper renderizado por renderFraudBanner em ui.js).
   ============================================================ */
#fraud-banner > .fraud-banner,
.fraud-banner.fraud-banner-risco {
    background: var(--v7-danger-soft) !important;
    border: 1px solid transparent !important;
    border-left: 3px solid var(--v7-danger) !important;
    border-radius: var(--v7-radius-md) !important;
    color: var(--ink-900) !important;
    box-shadow: none !important;
}
#fraud-banner > .fraud-banner::before,
#fraud-banner > .fraud-banner::after {
    display: none !important;
    content: none !important;
}

/* Risk-badge — mantém estados v6.0 mas reforça consistência */
.risk-badge {
    border-radius: var(--v7-radius-sm) !important;
    font-size: var(--v7-xs) !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    box-shadow: none !important;
}


/* ============================================================
   16. COMPARATIVO — cmp-row, mix-bar, cross-card
   ============================================================ */
.cross-card {
    background: #FFFFFF !important;
    border: 1px solid var(--v7-border) !important;
    color: var(--ink-900) !important;
}
.cross-card *,
.cross-card .cross-title,
.cross-card .cross-value {
    color: var(--ink-900) !important;
}
.cross-card .cross-sub {
    color: var(--ink-500) !important;
}

/* Variação table cells */
.cmp-row td,
.cmp-row th,
.variation-table td,
.variation-table th {
    font-variant-numeric: tabular-nums;
}
.cmp-row td.value,
.cmp-row td[data-type="number"],
.variation-table td.value {
    text-align: right;
}


/* ============================================================
   17. TABELAS — alinhamento numérico sistemático
   ============================================================ */
table th,
table td {
    font-size: var(--v7-sm);
}
table th {
    font-weight: 600;
    color: var(--ink-600);
    font-size: var(--v7-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
/* Colunas numéricas/financeiras alinhadas à direita */
table th.num, table td.num,
table th[data-type="number"], table td[data-type="number"],
table th[data-type="currency"], table td[data-type="currency"] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}


/* ============================================================
   18. INPUTS / SELECTS / FOCUS — sistema unificado
   ============================================================ */
input, select, textarea {
    border-radius: var(--v7-radius-sm) !important;
    transition: border-color 0.15s var(--v7-ease), box-shadow 0.15s var(--v7-ease) !important;
}
input:focus, select:focus, textarea:focus,
button:focus-visible {
    outline: none !important;
    border-color: var(--v7-brand) !important;
    box-shadow: 0 0 0 3px rgba(1,51,210,0.12) !important;
}


/* ============================================================
   19. MODAIS — backdrop reduzido, conteúdo plano
   ============================================================ */
.modal-backdrop,
[class*="modal-backdrop"],
.fixed.inset-0[class*="backdrop-blur"] {
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    background: rgba(10,13,24,0.40) !important;
}
.modal-content,
[role="dialog"] > div {
    border-radius: var(--v7-radius-lg) !important;
    box-shadow: var(--v7-shadow-md) !important;
}

/* Drawer de fraude — herda layout v6.0, garantir consistência */
.fraud-drawer {
    border-radius: var(--v7-radius-lg) !important;
    box-shadow: var(--v7-shadow-md) !important;
}


/* ============================================================
   20. BADGES & CHIPS — 2 famílias apenas
   ============================================================ */
.badge,
.chip,
[class*="-pill"],
[class*="-chip"] {
    border-radius: var(--v7-radius-sm) !important;
    font-size: var(--v7-xs) !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    box-shadow: none !important;
    border-width: 1px !important;
}


/* ============================================================
   21. HEATMAP / GRÁFICOS — paleta neutra
   ============================================================ */
.heatmap-cell {
    border-radius: 4px !important;
}


/* ============================================================
   22. ANIMAÇÕES — desligar pulses e shimmers gratuitos
   ============================================================ */
.pulse,
[class*="animate-pulse"]:not(.loading):not(#loading-screen *) {
    animation: none !important;
}
/* Manter spinner do loading */
#loading-screen .animate-spin { animation: spin 0.8s linear infinite !important; }

/* Hover transforms globais — neutralizar */
.kpi-mini:hover,
.cmp-kpi-card:hover,
.cross-card:hover,
.daypart-card:hover,
.ranking-row:hover,
.surface-hover:hover {
    transform: none !important;
}


/* ============================================================
   23. GLOWS / GRADIENTES TAILWIND INLINE — neutralizar
   ============================================================ */
.shadow-glow-blue,
.shadow-glow-cyan,
.shadow-glow-lime,
.shadow-premium-lg,
[class*="shadow-glow"] {
    box-shadow: var(--v7-shadow-sm) !important;
}

/* Gradientes from-...to-... aplicados em cards (não na marca) */
.bg-gradient-to-br.from-brand-blue.to-brand-bluedark:not(.w-10):not(.w-12),
.bg-gradient-to-br.from-ink-900,
.bg-gradient-to-r.from-brand-blue,
[class*="bg-gradient-to"][class*="brand-bluedark"]:not(header *) {
    background: #FFFFFF !important;
    color: var(--ink-900) !important;
}


/* ============================================================
   24. RESPONSIVO — preservar
   ============================================================ */
@media (max-width: 640px) {
    .hero-card { padding: 22px !important; }
    .hero-number { font-size: 28px !important; }
    .cb-hero { padding: 22px !important; }
    .ratings-hero, .app-hero, .app-performance { padding: 22px !important; }
}


/* ============================================================
   25. UTILITÁRIOS APPLE-WAY (opt-in)
   ============================================================ */
.v7-stack-1 > * + * { margin-top: 4px; }
.v7-stack-2 > * + * { margin-top: 8px; }
.v7-stack-3 > * + * { margin-top: 12px; }
.v7-stack-4 > * + * { margin-top: 16px; }
.v7-stack-6 > * + * { margin-top: 24px; }

.v7-eyebrow {
    font-size: var(--v7-micro);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-500);
}
.v7-title {
    font-size: var(--v7-h2);
    font-weight: 600;
    color: var(--ink-900);
    letter-spacing: -0.015em;
}
.v7-metric {
    font-size: var(--v7-metric);
    font-weight: 600;
    color: var(--ink-900);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.v7-label {
    font-size: var(--v7-xs);
    color: var(--ink-500);
}


/* ============================================================
   26. v7.2 — INSIGHTS EDITORIAIS (Pontos de atenção do mês)
   --------------------------------------------------------------
   Remover competição visual: substituir múltiplos badges/chips
   por UMA borda esquerda semântica + UM rótulo de categoria
   sutil em caixa-alta. Sem chip colorido, sem dot, sem pílula
   de prioridade. A prioridade vira apenas largura/peso da borda.
   ============================================================ */

/* As classes .tone-* eram aplicadas no JS, mas o CSS antigo
   esperava [data-tone]. Mapeamos a classe diretamente. */
.insight-slide.tone-info,    .insight-card.tone-info    { border-left-color: var(--v7-info)    !important; }
.insight-slide.tone-success, .insight-card.tone-success { border-left-color: var(--v7-success) !important; }
.insight-slide.tone-warning, .insight-card.tone-warning { border-left-color: var(--v7-warning) !important; }
.insight-slide.tone-danger,  .insight-card.tone-danger  { border-left-color: var(--v7-danger)  !important; }
.insight-slide.tone-primary, .insight-card.tone-primary { border-left-color: var(--v7-brand)   !important; }

/* Prioridade alta → borda mais espessa (sinal silencioso). */
.insight-slide[data-priority="high"] {
    border-left-width: 4px !important;
}
.insight-slide[data-priority="medium"] {
    border-left-width: 3px !important;
}
.insight-slide[data-priority="low"] {
    border-left-width: 2px !important;
}

/* Topbar do insight — agora apenas um label editorial em uppercase. */
.insight-slide-topbar {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}
.insight-category-label {
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
    color: var(--ink-500) !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

/* Badges legados — caso ainda apareçam por cache ou outras telas,
   neutralizar a competição visual. */
.insight-category-tag,
.insight-priority-chip,
.insight-priority-dot {
    display: none !important;
}

/* Ícone do insight — mantém estética monocromática já definida,
   mas reduz peso visual. */
.insight-slide .insight-slide-icon {
    background: var(--ink-100) !important;
    color: var(--ink-700) !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: var(--v7-radius-sm) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 10px !important;
    font-size: 13px !important;
}
.insight-slide-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--ink-900) !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 4px !important;
}
.insight-slide-text {
    font-size: 13px !important;
    color: var(--ink-600) !important;
    line-height: 1.5 !important;
}
.insight-slide-metric {
    margin-top: 12px !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--v7-border) !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
}
.insight-slide-metric-value {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--ink-900) !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: -0.015em !important;
}
.insight-slide-metric-label {
    font-size: 11px !important;
    color: var(--ink-500) !important;
    letter-spacing: 0.02em !important;
}


/* ============================================================
   27. v7.3/v7.4 — PRODUTOS: Cross-sell editorial + Mix tipográfico
   --------------------------------------------------------------
   v7.4 — Cross-sell promovido a HERO ANALÍTICO (substitui o
   antigo "Mix e cross-sell"). Composição em 2 colunas:
   narrativa (5/12) + métrica/decomposição (7/12).
   Mix abaixo em 40% / Subcat em 60%.
   ============================================================ */

/* ── HERO ANALÍTICO DE CROSS-SELL (substitui o hero genérico) ── */
.prod-crosssell-hero {
    background: #FFFFFF !important;
    color: var(--ink-900);
}
/* v7.9 — Header da coluna narrativa agora carrega apenas eyebrow + título.
   O lead descritivo e a nota interpretativa foram retirados (o número em
   56px ao lado já é autossuficiente como leitura executiva).
   Como o título ficou só, ele pode respirar verticalmente — alinhamos seu
   bloco ao centro vertical da coluna, casando com a baseline da métrica
   protagonista à direita. */
.prod-cs-hero-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
    gap: 8px;
}
.prod-cs-hero-title {
    font-size: 26px;
    font-weight: 600;
    color: var(--ink-900);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 4px 0 0;
    max-width: 22ch;
}
.prod-cs-hero-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Métrica principal em escala editorial.
   v7.6 — Refator: o flex baseline jogava o número gigante (56px) e
   o label (12px) numa mesma linha, quebrando feio em telas médias.
   Agora: número em bloco próprio + label logo abaixo, hierarquia
   editorial clara (tipo bloco de KPI editorial). */
.prod-cs-metric {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 0 18px 0;
    border-bottom: 1px solid var(--v7-border);
    margin-bottom: 18px;
}
.prod-cs-rate {
    font-size: 56px;
    font-weight: 600;
    line-height: 1;
    color: var(--ink-900);
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    display: block;
}
.prod-cs-rate-label {
    font-size: 12.5px;
    color: var(--ink-500);
    line-height: 1.45;
    max-width: 38ch;
    display: block;
}

/* Decomposição tabular.
   v7.6 — Reformulado: barra mais espessa (4px) e visivelmente em
   ink-200; row e barra agora pareadas como parágrafo + régua. */
.prod-cs-breakdown {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}
.prod-cs-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.prod-cs-row-label {
    font-size: 12.5px;
    color: var(--ink-600);
    line-height: 1.4;
}
.prod-cs-row.is-emphasis .prod-cs-row-label {
    color: var(--ink-900);
    font-weight: 600;
}
.prod-cs-row-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-900);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    white-space: nowrap;
}
.prod-cs-row-bar {
    height: 4px;
    background: var(--ink-100);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 6px;
}
.prod-cs-row-bar > span {
    display: block;
    height: 100%;
    background: var(--ink-300);
    border-radius: 999px;
    transition: width 0.4s var(--v7-ease);
}
/* v7.6 — A linha de emphasis (cross-sell efetivo) usa a marca.
   O seletor anterior (`.is-emphasis + .prod-cs-row-bar`) dependia
   da estrutura DOM ser row, bar, row, bar... e do markup do JS.
   Trocamos por agrupador `.prod-cs-row-group` no JS para tornar a
   ligação explícita. */
.prod-cs-row-group.is-emphasis .prod-cs-row-bar > span {
    background: var(--v7-brand);
    height: 100%;
}
.prod-cs-row-group.is-emphasis .prod-cs-row-bar {
    height: 5px;
}

/* v7.9 — .prod-cs-hero-lead e .prod-cs-note removidos (elementos
   eliminados do HTML). Mantemos defensivamente um display:none caso
   alguma versão em cache ainda renderize esses nós. */
.prod-cs-hero-lead,
.prod-cs-note {
    display: none !important;
}

/* ── Mix por categoria — legenda com hierarquia tipográfica ── */
.prod-mix-row {
    display: grid;
    grid-template-columns: 12px 1fr auto auto;
    align-items: baseline;
    column-gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--ink-100);
}
.prod-mix-row:last-child {
    border-bottom: none;
}
.prod-mix-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    align-self: center;
}
.prod-mix-label {
    font-size: 13px;
    color: var(--ink-700);
    font-weight: 500;
    letter-spacing: -0.005em;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
/* O percentual é o protagonista: escala maior, peso forte, ink-900 */
.prod-mix-pct {
    font-size: 20px;
    font-weight: 600;
    color: var(--ink-900);
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    min-width: 58px;
    text-align: right;
}
.prod-mix-pct-sym {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-500);
    margin-left: 1px;
}
/* O valor monetário é qualificador secundário, em cinza claro */
.prod-mix-value {
    font-size: 12px;
    color: var(--ink-500);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    min-width: 64px;
    text-align: right;
}


/* ============================================================
   28. [REMOVIDA na v7.8] — Cashback v7.4 (.cb-analytics, .cb-breakdown,
   primeira geração de .cb-rank-*). Substituída pela arquitetura
   v7.8 unificada na Section 33. Identificadores .cb-rank-* foram
   redefinidos com hierarquia minimalista naquela section.
   ============================================================ */


/* ============================================================
   29. v7.4 — HISTÓRICO/RANKING DE PERÍODOS — leitura editorial
   --------------------------------------------------------------
   Mantém toda a densidade analítica (8 colunas numéricas) mas
   ganha hierarquia: valor protagonista em ink-900 + variação
   percentual subalterna em pílula compacta abaixo. Coluna de
   período sem duplicidade.
   ============================================================ */
.hist-row {
    border-bottom: 1px solid var(--ink-100);
}
.hist-row:last-child { border-bottom: none; }
.hist-row:hover {
    background: var(--ink-50);
}

.hist-cell,
.hist-cell-period {
    padding: 14px 12px 14px 0;
    vertical-align: middle;
}
.hist-cell {
    text-align: right;
    white-space: nowrap;
}
.hist-cell-period {
    text-align: left;
    padding-right: 16px;
    min-width: 130px;
}
.hist-period-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-900);
    letter-spacing: -0.005em;
    line-height: 1.25;
}
.hist-period-sub {
    display: block;
    font-size: 11px;
    color: var(--ink-500);
    letter-spacing: 0.01em;
    margin-top: 2px;
    text-transform: capitalize;
}

/* Valor protagonista da célula */
.hist-val {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-900);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
.hist-val-dim {
    font-weight: 500;
    color: var(--ink-700);
}

/* Variação como linha secundária */
.hist-pct {
    display: block;
    margin-top: 3px;
    line-height: 1;
    font-size: 11px;
}
.hist-pct-empty {
    color: var(--ink-300);
    font-size: 11px;
}

/* Pílulas de variação dentro do histórico — compactas */
.hist-pct .var-badge,
.hist-pct [class*="badge"] {
    font-size: 10.5px !important;
    padding: 2px 6px !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}


/* ============================================================
   30. v7.4 — CLIENTES: refinamento do banner antifraude
   --------------------------------------------------------------
   Hierarquia editorial: eyebrow → título → meta + métrica
   destacada (escala numérica) + denominador contextual + CTA.
   Sem `<b>` espalhados na frase, sem ícone decorativo redundante.
   ============================================================ */
.fraud-banner.fraud-banner-risco {
    display: grid !important;
    grid-template-columns: 1fr auto auto !important;
    align-items: center !important;
    gap: 28px !important;
    padding: 22px 26px !important;
    background: var(--v7-danger-soft) !important;
    border: 1px solid transparent !important;
    border-left: 3px solid var(--v7-danger) !important;
    border-radius: var(--v7-radius-md) !important;
    color: var(--ink-900) !important;
    box-shadow: none !important;
}

.fraud-banner-main {
    min-width: 0;
}
.fraud-banner-eyebrow {
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
    color: var(--v7-danger) !important;
    margin: 0 0 6px !important;
}
.fraud-banner-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--ink-900) !important;
    letter-spacing: -0.01em !important;
    line-height: 1.25 !important;
    margin: 0 0 4px !important;
}
.fraud-banner-meta {
    font-size: 12px !important;
    color: var(--ink-500) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

/* Métrica em escala editorial — número + qualificadores.
   v7.5 — FIX D: o border-left vermelho renderizava como um "(" estranho
   antes do valor (artefato visual). Trocado por padding-left puro: o gap
   do grid (28px) já separa visualmente as colunas. Também garantimos
   white-space:nowrap no info-block para não quebrar "2,4% da base". */
.fraud-banner-metric {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-left: 4px;
    border-left: none;
}
.fraud-banner-metric-value {
    font-size: 36px;
    font-weight: 600;
    color: var(--v7-danger);
    letter-spacing: -0.025em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
.fraud-banner-metric-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.fraud-banner-metric-denom {
    font-size: 12px;
    color: var(--ink-700);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.fraud-banner-metric-pct {
    font-size: 11px;
    color: var(--ink-500);
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* CTA: ação primária da seção */
.fraud-banner-action {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    background: var(--ink-900) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: var(--v7-radius-sm) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em !important;
    cursor: pointer;
    transition: background 0.15s var(--v7-ease) !important;
    white-space: nowrap;
}
.fraud-banner-action:hover {
    background: var(--ink-700) !important;
}
.fraud-banner-action i {
    font-size: 12.5px !important;
}

/* Responsivo: empilhar em telas pequenas */
@media (max-width: 880px) {
    .fraud-banner.fraud-banner-risco {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .fraud-banner-metric {
        padding-left: 0;
        border-left: none;
        padding-top: 14px;
        border-top: 1px solid rgba(185, 28, 28, 0.14);
    }
}

/* ============================================================
   31. CASHBACK HERO — métrica achatada (v7.5)
   ------------------------------------------------------------
   Problema: o `.cb-hero-metric` original (style.css) tinha
   gradiente verde+ciano + texto branco/lime + formula bar em
   fundo escuro — desenhado para hero dark. Como o hero é
   branco, o box destoava do editorial.
   Solução: achatar (sem gradiente, sem backdrop filter), valor
   em ink-900, formula bar como nota tabular discreta abaixo.
   ============================================================ */
.cb-hero .cb-hero-metric {
    background: var(--ink-50) !important;
    border: 1px solid var(--v7-border) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: var(--v7-radius-md) !important;
    padding: 20px 22px !important;
    overflow: visible !important;
}
.cb-hero .cb-hero-metric::before,
.cb-hero .cb-hero-metric::after {
    display: none !important;
    content: none !important;
}
.cb-hero .cb-hero-metric-label {
    color: var(--ink-500) !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
}
.cb-hero .cb-hero-metric-value {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    color: var(--ink-900) !important;
    font-size: 44px !important;
    font-weight: 600 !important;
    letter-spacing: -0.025em !important;
    line-height: 1 !important;
    margin-bottom: 6px !important;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
.cb-hero .cb-hero-metric-sub {
    color: var(--ink-500) !important;
    font-size: 12px !important;
    margin-bottom: 10px !important;
}
/* Formula bar — minimalista, sem fundo escuro */
.cb-hero .cb-hero-metric-formula {
    background: transparent !important;
    border: none !important;
    border-top: 1px solid var(--v7-border) !important;
    border-radius: 0 !important;
    color: var(--ink-500) !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 8px 0 0 0 !important;
    letter-spacing: 0 !important;
    font-variant-numeric: tabular-nums;
}

/* v7.6 — Reequilíbrio do .cb-hero-main: a coluna narrativa (esquerda)
   só contém título + input minimal e ficava com 1.4fr de espaço,
   gerando ~50% de vazio. Trocamos para 1fr 1fr e centramos o
   conteúdo verticalmente para um par visualmente equilibrado. */
.cb-hero .cb-hero-main {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
    align-items: center !important;
    margin-bottom: 26px !important;
}
.cb-hero .cb-hero-narrative {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}
.cb-hero .cb-hero-title {
    color: var(--ink-900) !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
    margin: 0 !important;
}
.cb-hero .cb-hero-input-label {
    color: var(--ink-500) !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
}
.cb-hero .cb-hero-clear {
    color: var(--ink-500) !important;
    background: transparent !important;
    border: none !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: var(--v7-radius-sm);
    transition: color 0.15s var(--v7-ease), background 0.15s var(--v7-ease);
}
.cb-hero .cb-hero-clear:hover {
    color: var(--ink-900) !important;
    background: var(--ink-50) !important;
}
.cb-hero .cb-hero-autosave {
    color: var(--ink-500) !important;
    font-size: 11px !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.cb-hero .cb-hero-autosave i {
    color: var(--v7-brand) !important;
}
.cb-hero .cb-hero-input-prefix {
    color: var(--ink-500) !important;
    font-weight: 500 !important;
}
.cb-hero .cb-hero-input {
    color: var(--ink-900) !important;
    font-weight: 600 !important;
    background: transparent !important;
}

/* Responsivo: stack em telas médias-pequenas */
@media (max-width: 880px) {
    .cb-hero .cb-hero-main {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* ============================================================
   33. CASHBACK — Arquitetura Minimal (v7.8)
   ------------------------------------------------------------
   Reescrita após a crítica à v7.7: empilhamento de 7 cartões
   competindo era ruído visual, não sofisticação. v7.8 entrega
   a mesma profundidade em 3 blocos com composição editorial.
       1. Síntese (1 card grande): headline + narrativa + barra
          de fluxo + 3 métricas inline (sem cards aninhados).
       2. Rankings (2 cards lado a lado).
       3. Configuração operacional (recolhível).
   A sofisticação vem da hierarquia tipográfica + espaço, não
   da multiplicação de containers.
   ============================================================ */

/* Hero antiga (.cb-hero/.cb-hero-* / .cb-stats-row / etc.) neutralizada.
   Estrutura nova v7.8 usa apenas: #cb-synthesis, .cb-rank-grid, #cb-config. */
.cb-hero { display: none !important; }

/* Card base — único token de container da sub-aba. Branco, borda fina,
   raio grande. Não há "card sobre card": estruturas internas usam
   somente tipografia + espaço para hierarquizar. */
.cb-card {
    background: #FFFFFF;
    border: 1px solid var(--v7-border);
    border-radius: var(--v7-radius-lg);
    padding: 32px 36px;
}

/* Espaçamento entre blocos: respiro grande, sem margin: dirige o olho */
#cb-synthesis { margin-bottom: 20px; }
.cb-rank-grid { margin-bottom: 20px; }
#cb-config    { margin-bottom: 0;   }

/* Eyebrow editorial — usado UMA vez na síntese. Não se repete em rankings. */
.cb-eyebrow {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-500);
    margin: 0 0 8px;
}

/* ──────────────────────────────────────────────────────────────
   BLOCO 1 · SÍNTESE EDITORIAL
   Estrutura interna (sem cards aninhados):
       eyebrow → headline gigante → narrativa →
       barra de fluxo fina → 3 métricas inline
   Tudo dentro de um único .cb-card. Espaços generosos.
   ────────────────────────────────────────────────────────────── */
.cb-synthesis {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* — Lede (headline + narrativa) — */
.cb-synthesis-lede {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 80ch;
}
.cb-syn-headline {
    font-size: 44px;
    font-weight: 600;
    color: var(--ink-900);
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin: 0;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
/* v7.10 — Tail do headline e linha qualificadora (narrative) agora
   compartilham EXATAMENTE a mesma tipografia: tamanho 15px, peso 500,
   cor ink-500. O valor monetário dentro da narrative (`<b>`) entra em
   peso 600 — único elemento em negrito, mantendo a continuidade visual
   entre as duas linhas. */
.cb-syn-headline-tail {
    font-size: 15px;
    font-weight: 500;
    color: var(--ink-500);
    letter-spacing: -0.005em;
    margin-left: 8px;
    font-variant-numeric: normal;
}
.cb-syn-headline-empty {
    font-size: 32px;
    font-weight: 500;
    color: var(--ink-500);
    letter-spacing: -0.02em;
}
.cb-syn-narrative {
    font-size: 15px;
    font-weight: 500;
    color: var(--ink-500);
    letter-spacing: -0.005em;
    line-height: 1.5;
    margin: 0;
    max-width: 78ch;
}
.cb-syn-narrative b {
    font-weight: 600;
    color: var(--ink-500);
}

/* — Barra de fluxo — uma só, fina, editorial —
   Estrutura: head (label + percentual em destaque tipográfico) →
   barra fina → legenda mínima. O percentual de taxa de uso é a
   segunda âncora visual da síntese (depois do headline em R$). */
.cb-syn-flow {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cb-syn-flow:empty { display: none; }

/* Header da barra: percentual em escala display + label colado ao lado.
   v7.10 — O label "Taxa de uso" foi reaproximado do número: vive logo
   à direita do percentual, alinhado pela baseline, sem espaço residual
   ocioso entre os dois (antes havia space-between empurrando o label
   para a borda oposta da coluna). */
.cb-syn-flow-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 2px;
}
.cb-syn-flow-head-label {
    font-size: 12px;
    color: var(--ink-500);
    font-weight: 500;
    letter-spacing: 0.005em;
}
.cb-syn-flow-head-value {
    font-size: 24px;
    font-weight: 600;
    color: var(--ink-900);
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    display: inline-flex;
    align-items: baseline;
}
.cb-syn-flow-head-unit {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-500);
    margin-left: 2px;
    letter-spacing: 0;
}

.cb-syn-flow-bar {
    display: flex;
    height: 6px;
    width: 100%;
    border-radius: 999px;
    overflow: hidden;
    background: var(--ink-100);
}
.cb-syn-flow-seg {
    display: block;
    height: 100%;
    transition: width 0.6s var(--v7-ease);
}
.cb-syn-flow-seg-used { background: var(--v7-brand); }
.cb-syn-flow-seg-rest { background: var(--ink-200); }

.cb-syn-flow-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    font-size: 12px;
    color: var(--ink-500);
    align-items: center;
    margin-top: 2px;
}
.cb-syn-flow-legend b {
    color: var(--ink-900);
    font-weight: 600;
    margin-left: 6px;
}
.cb-syn-flow-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}
.cb-syn-flow-dot-used { background: var(--v7-brand); }
.cb-syn-flow-dot-rest { background: var(--ink-300); }

/* — Métricas inline — sem cards, sem borda. Apenas texto. — */
.cb-syn-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin: 0;
    padding-top: 24px;
    border-top: 1px solid var(--v7-border);
}
.cb-syn-metric {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.cb-syn-metric-label {
    font-size: 11px;
    color: var(--ink-500);
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.4;
    margin: 0;
}
.cb-syn-metric-value {
    font-size: 22px;
    font-weight: 600;
    color: var(--ink-900);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.cb-syn-metric-delta {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    font-variant-numeric: tabular-nums;
}
.cb-syn-metric-delta-up   { color: #047857; }   /* verde executivo */
.cb-syn-metric-delta-down { color: var(--v7-danger); }
.cb-syn-metric-delta-flat { color: var(--ink-400); font-weight: 500; }

/* Unidade discreta para métricas em % (ex.: "63.3%") — peso e cor
   reduzidos, mantém a baseline alinhada com o número. */
.cb-syn-metric-unit {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-500);
    margin-left: 1px;
    letter-spacing: 0;
}

/* — Adesão: par usaram × não-usaram —
   A métrica de adesão é a única que ganha leitura expandida.
   Decisão de design: o número grande (X%) responde "quantos usaram",
   e o complemento (barra + 2 linhas) responde "quem é o restante" —
   informação acionável que estava implícita antes. O peso visual
   permanece no usaram; o não-usaram entra como contraponto. */
.cb-syn-adesao-split {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}
.cb-syn-adesao-bar {
    height: 3px;
    width: 100%;
    background: var(--ink-100);
    border-radius: 999px;
    overflow: hidden;
}
.cb-syn-adesao-bar-used {
    display: block;
    height: 100%;
    background: var(--v7-brand);
    border-radius: 999px;
    transition: width 0.5s var(--v7-ease);
}
.cb-syn-adesao-pair {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
}
.cb-syn-adesao-pair-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
}
.cb-syn-adesao-pair-row dt {
    font-size: 11.5px;
    color: var(--ink-500);
    font-weight: 500;
    margin: 0;
    display: inline-flex;
    align-items: center;
}
.cb-syn-adesao-pair-row dd {
    font-size: 12px;
    color: var(--ink-700);
    font-weight: 600;
    margin: 0;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
.cb-syn-adesao-pair-row-used dd {
    color: var(--ink-900);
}
.cb-syn-adesao-pair-sub {
    color: var(--ink-400);
    font-weight: 500;
    margin-left: 2px;
}
.cb-syn-adesao-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    margin-right: 6px;
}
.cb-syn-adesao-dot-used   { background: var(--v7-brand); }
.cb-syn-adesao-dot-unused { background: var(--ink-300); }

/* No grid de 3 colunas, a métrica de adesão é a do meio. Ela tem
   mais altura por ter a barra + pair embaixo — o align-items do grid
   garante que os números fiquem alinhados na linha de base superior. */
.cb-syn-metric-adesao {
    align-self: start;
}

/* ──────────────────────────────────────────────────────────────
   BLOCO 2 · RANKINGS (refinados, sem eyebrows competindo)
   ────────────────────────────────────────────────────────────── */
.cb-rank-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.cb-rank-card {
    padding: 24px 26px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.cb-rank-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-900);
    letter-spacing: -0.005em;
    margin: 0;
    line-height: 1.4;
}
.cb-rank-body {
    display: flex;
    flex-direction: column;
    gap: 13px;
}
.cb-rank-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 80px auto;
    align-items: center;
    gap: 14px;
}
.cb-rank-name {
    font-size: 12.5px;
    color: var(--ink-900);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cb-rank-track {
    height: 3px;
    background: var(--ink-100);
    border-radius: 999px;
    overflow: hidden;
}
.cb-rank-track > span {
    display: block;
    height: 100%;
    background: var(--v7-brand);
    border-radius: 999px;
    transition: width 0.5s var(--v7-ease);
}
.cb-rank-value {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-900);
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.cb-rank-empty {
    font-size: 12.5px;
    color: var(--ink-500);
    font-style: italic;
    margin: 0;
    padding: 8px 0;
}

/* ──────────────────────────────────────────────────────────────
   BLOCO 3 · CONFIGURAÇÃO OPERACIONAL (input recolhível)
   Permanece intocada — único elemento aprovado da onda v7.7.
   ────────────────────────────────────────────────────────────── */
.cb-config {
    background: var(--ink-50);
    border: 1px solid var(--v7-border);
    border-radius: var(--v7-radius-md);
    padding: 14px 18px;
}

/* Estado COLAPSADO — linha discreta */
.cb-config-collapsed {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.cb-config-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid var(--v7-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-500);
    font-size: 12px;
    flex-shrink: 0;
}
.cb-config-text {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    flex: 1;
}
.cb-config-label {
    font-size: 11.5px;
    color: var(--ink-500);
    font-weight: 500;
    letter-spacing: 0.02em;
}
.cb-config-value {
    font-size: 14px;
    color: var(--ink-900);
    font-weight: 600;
    letter-spacing: -0.01em;
}
.cb-config-value-pending {
    color: var(--ink-400);
    font-weight: 500;
    font-style: italic;
}
.cb-config-btn {
    background: transparent;
    border: 1px solid var(--v7-border);
    color: var(--ink-700);
    font-size: 12px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: var(--v7-radius-sm);
    cursor: pointer;
    transition: background 0.15s var(--v7-ease), border-color 0.15s var(--v7-ease), color 0.15s var(--v7-ease);
}
.cb-config-btn:hover {
    background: #FFFFFF;
    border-color: var(--ink-300);
    color: var(--ink-900);
}

/* Estado EXPANDIDO — editor inline */
.cb-config-expanded {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cb-config-label-full {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ink-500);
    margin: 0;
}
.cb-config-help {
    display: block;
    font-size: 11.5px;
    color: var(--ink-500);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    margin-top: 4px;
    line-height: 1.4;
}
.cb-config-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.cb-config-input-box {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #FFFFFF;
    border: 1px solid var(--v7-border);
    border-radius: var(--v7-radius-sm);
    transition: border-color 0.15s var(--v7-ease);
    min-width: 200px;
}
.cb-config-input-box:focus-within {
    border-color: var(--ink-700);
}
.cb-config-input-prefix {
    color: var(--ink-500);
    font-size: 13px;
    font-weight: 500;
}
.cb-config-input {
    border: none;
    background: transparent;
    outline: none;
    color: var(--ink-900);
    font-size: 14px;
    font-weight: 600;
    flex: 1;
    min-width: 0;
    font-variant-numeric: tabular-nums;
}
.cb-config-action {
    background: transparent;
    border: 1px solid var(--v7-border);
    color: var(--ink-700);
    font-size: 12px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: var(--v7-radius-sm);
    cursor: pointer;
    transition: background 0.15s var(--v7-ease), border-color 0.15s var(--v7-ease), color 0.15s var(--v7-ease);
}
.cb-config-action:hover {
    border-color: var(--ink-300);
    color: var(--ink-900);
    background: #FFFFFF;
}
.cb-config-action-primary {
    background: var(--ink-900);
    border-color: var(--ink-900);
    color: #FFFFFF;
}
.cb-config-action-primary:hover {
    background: var(--ink-700);
    border-color: var(--ink-700);
    color: #FFFFFF;
}
.cb-config-action-danger {
    color: var(--v7-danger);
    margin-left: auto;
}
.cb-config-action-danger:hover {
    color: var(--v7-danger);
    background: var(--v7-danger-soft);
    border-color: rgba(185, 28, 28, 0.3);
}
.cb-config-autosave {
    font-size: 11px;
    color: var(--ink-500);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cb-config-autosave i {
    color: var(--v7-brand);
    font-size: 11px;
}

/* Responsivo — sub-aba Cashback (v7.8)
   Em telas estreitas: rankings empilham, métricas inline empilham,
   card de síntese recolhe padding lateral. */
@media (max-width: 880px) {
    .cb-rank-grid    { grid-template-columns: 1fr; }
    .cb-syn-metrics  { grid-template-columns: 1fr; gap: 22px; }
    .cb-card         { padding: 26px 22px; }
    .cb-syn-headline { font-size: 36px; }
}

/* ============================================================
   32. BUSY TOAST — feedback não-bloqueante (v7.6)
   ------------------------------------------------------------
   Substitui o uso indevido do `loading-screen` full-page para
   operações pontuais (ex.: exportar PDF). Aparece flutuando no
   canto inferior direito, com spinner e mensagem, sem esconder
   o dashboard. O usuário continua vendo o que estava fazendo.
   ============================================================ */
.busy-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: var(--ink-900);
    color: #FFFFFF;
    border-radius: var(--v7-radius-md);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.005em;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s var(--v7-ease), transform 0.2s var(--v7-ease);
    pointer-events: none;
}
.busy-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.busy-toast-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: busyToastSpin 0.8s linear infinite;
    flex-shrink: 0;
}
@keyframes busyToastSpin {
    to { transform: rotate(360deg); }
}