/* Bricolage Grotesque 700 (latin), servida daqui: só o nome da marca, a mesma do site. */
@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/bricolage/bricolage-grotesque-latin-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Camada visual do painel Filament (nome do produto: config('app.name')).
 * CSS puro (sem build). Carregado depois do CSS do Filament, que vive em @layer,
 * então estas regras vencem sem !important.
 *
 * Direção: sala de controle noturna. Tema escuro como padrão, luz laranja
 * (ofertas, dinheiro) e ciano (automação, sinal) vindo do fundo, piso em
 * perspectiva, superfícies de vidro com bordas luminosas.
 * O conteúdo continua em superfícies de alto contraste: o efeito fica nas bordas
 * e no fundo, nunca atrás do texto. O fundo é parado: aqui se trabalha, então
 * movimento só para estado (carregando, enviado, conectado).
 *
 * Espaço: múltiplos de 4px. Tipografia: 12 / 14 / 16 / 20 / 24 / 32 / 48.
 * Fontes: Manrope (texto), Space Grotesk (títulos e números), JetBrains Mono (dados).
 * O nome da marca usa a Bricolage Grotesque 700 (a mesma do site), carregada pelo painel.
 */

/* ------------------------------------------------------------------ tokens */

:root {
    --o3d-display: var(--serif-font-family), var(--font-family), system-ui, sans-serif;
    --o3d-marca-fonte: 'Bricolage Grotesque', var(--o3d-display);   /* só no nome da marca */

    --o3d-raio-card: 0.875rem;
    --o3d-raio-controle: 0.5rem;
    --o3d-raio-chip: 0.375rem;

    --o3d-fundo: var(--gray-50);
    --o3d-vidro: color-mix(in oklab, var(--color-white) 74%, transparent);
    --o3d-vidro-forte: color-mix(in oklab, var(--color-white) 90%, transparent);
    --o3d-poco: var(--gray-100);
    --o3d-poco-foto: var(--gray-100);
    --o3d-borda: color-mix(in oklab, var(--gray-950) 9%, transparent);
    --o3d-borda-forte: color-mix(in oklab, var(--gray-950) 18%, transparent);
    --o3d-borda-luz: linear-gradient(
        150deg,
        color-mix(in oklab, var(--primary-500) 45%, transparent),
        var(--o3d-borda) 28%,
        var(--o3d-borda) 72%,
        color-mix(in oklab, var(--frio-500) 40%, transparent)
    );
    --o3d-sombra: 0 1px 2px color-mix(in oklab, var(--gray-950) 6%, transparent),
        0 12px 32px -16px color-mix(in oklab, var(--gray-950) 18%, transparent);

    --o3d-texto: var(--gray-950);
    --o3d-texto-2: var(--gray-600);
    --o3d-texto-3: var(--gray-500);

    --o3d-acento: var(--primary-600);
    --o3d-acento-texto: var(--primary-700);
    /* Marca AfiFlow: cores fixas, fora da paleta do Filament (ver DESIGN.md) */
    --o3d-marca-verde-dia: #007751;
    --o3d-marca-verde-noite: #0A8A5F;
    --o3d-marca-flow-noite: rgb(255 255 255 / 0.6);
    --o3d-marca-verde: var(--o3d-marca-verde-dia);
    --o3d-marca-flow: var(--o3d-marca-verde-dia);
    --o3d-brilho: color-mix(in oklab, var(--primary-500) 12%, transparent);
    --o3d-esqueleto: color-mix(in oklab, var(--gray-500) 16%, transparent);

    /* Luzes do fundo (a principal é o verde escuro da marca, não o laranja do primary) */
    --o3d-luz-quente: color-mix(in oklab, #005C3E 20%, transparent);
    --o3d-luz-fria: color-mix(in oklab, var(--frio-400) 18%, transparent);
    --o3d-linha-grade: color-mix(in oklab, var(--gray-950) 7%, transparent);
    --o3d-ruido-opacidade: 0.035;

    /* Lojas: cores de marca, só nos selos */
    --o3d-ml-fundo: #ffe600;
    --o3d-ml-texto: #2d3277;
    --o3d-shopee-fundo: #ee4d2d;
    --o3d-shopee-texto: #ffffff;

    /* WhatsApp (tema claro do app) */
    --o3d-wa-fundo: #efeae2;
    --o3d-wa-topo: #f0f2f5;
    --o3d-wa-balao: #d9fdd3;
    --o3d-wa-texto: #111b21;
    --o3d-wa-meta: #667781;
    --o3d-wa-link: #027eb5;
    --o3d-wa-lido: #53bdeb;
    --o3d-wa-avatar: var(--primary-600);             /* avatar de exemplo (grupo do cliente) */
    --o3d-wa-rabisco: color-mix(in oklab, #111b21 6%, transparent);

    /* WhatsApp (tema escuro do app): só na cena do login, que é sempre escura */
    --o3d-wa-noite-fundo: #0b141a;
    --o3d-wa-noite-topo: #202c33;
    --o3d-wa-noite-balao: #005c4b;
    --o3d-wa-noite-texto: #e9edef;
    --o3d-wa-noite-meta: color-mix(in oklab, #e9edef 64%, transparent);
    --o3d-wa-noite-link: #53bdeb;

    --o3d-transicao: 180ms cubic-bezier(0.2, 0, 0, 1);
}

:root.dark {
    --o3d-fundo: var(--gray-950);
    --o3d-vidro: color-mix(in oklab, var(--gray-900) 66%, transparent);
    --o3d-vidro-forte: color-mix(in oklab, var(--gray-900) 90%, transparent);
    --o3d-poco: var(--gray-800);
    --o3d-poco-foto: var(--gray-200);
    --o3d-borda: color-mix(in oklab, var(--color-white) 8%, transparent);
    --o3d-borda-forte: color-mix(in oklab, var(--color-white) 18%, transparent);
    --o3d-borda-luz: linear-gradient(
        150deg,
        color-mix(in oklab, var(--primary-400) 55%, transparent),
        var(--o3d-borda) 30%,
        var(--o3d-borda) 70%,
        color-mix(in oklab, var(--frio-400) 45%, transparent)
    );
    --o3d-sombra: 0 1px 0 color-mix(in oklab, var(--color-white) 4%, transparent) inset,
        0 24px 48px -24px color-mix(in oklab, #000 70%, transparent);

    --o3d-texto: var(--color-white);
    --o3d-texto-2: var(--gray-300);
    --o3d-texto-3: var(--gray-400);

    --o3d-acento: var(--primary-400);
    --o3d-acento-texto: var(--primary-400);
    --o3d-marca-verde: var(--o3d-marca-verde-noite);
    --o3d-marca-flow: var(--o3d-marca-flow-noite);
    --o3d-brilho: color-mix(in oklab, var(--primary-400) 11%, transparent);
    --o3d-esqueleto: color-mix(in oklab, var(--color-white) 9%, transparent);

    --o3d-luz-quente: color-mix(in oklab, #005C3E 55%, transparent);
    --o3d-luz-fria: color-mix(in oklab, var(--frio-500) 24%, transparent);
    --o3d-linha-grade: color-mix(in oklab, var(--frio-300) 11%, transparent);
    --o3d-ruido-opacidade: 0.05;

    --o3d-wa-fundo: #0b141a;
    --o3d-wa-topo: #202c33;
    --o3d-wa-balao: #005c4b;
    --o3d-wa-texto: #e9edef;
    --o3d-wa-meta: color-mix(in oklab, #e9edef 62%, transparent);
    --o3d-wa-link: #53bdeb;
    --o3d-wa-rabisco: color-mix(in oklab, #e9edef 5%, transparent);
}

/* ------------------------------------------------------- cena de fundo */

.fi-body {
    background-color: var(--o3d-fundo);
    font-feature-settings: 'ss01', 'cv11';
    text-rendering: optimizeLegibility;
}

.fi-layout,
.fi-simple-layout {
    position: relative;
    z-index: 1;
}

.o3d-cena {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Luzes: gradientes radiais (sem filter: blur, que pesa na GPU) */
.o3d-aurora {
    position: absolute;
    width: 70vmax;
    height: 70vmax;
    border-radius: 50%;
}

.o3d-aurora--quente {
    top: -35vmax;
    left: -20vmax;
    background: radial-gradient(closest-side, var(--o3d-luz-quente), transparent);
}

.o3d-aurora--fria {
    right: -30vmax;
    bottom: -40vmax;
    background: radial-gradient(closest-side, var(--o3d-luz-fria), transparent);
}

/* Piso em perspectiva */
.o3d-grade {
    position: absolute;
    left: -50%;
    right: -50%;
    bottom: 0;
    height: 55vh;
    transform: perspective(700px) rotateX(62deg);
    transform-origin: bottom center;
    mask-image: linear-gradient(to top, #000 0%, transparent 85%);
    overflow: hidden;
}

.o3d-grade::before {
    content: '';
    position: absolute;
    inset: -48px 0 0;
    background-image:
        linear-gradient(to right, var(--o3d-linha-grade) 1px, transparent 1px),
        linear-gradient(to bottom, var(--o3d-linha-grade) 1px, transparent 1px);
    background-size: 48px 48px;
}

.o3d-ruido {
    position: absolute;
    inset: 0;
    opacity: var(--o3d-ruido-opacidade);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------ vidro */

.fi-topbar {
    background-color: var(--o3d-vidro);
    box-shadow: 0 1px 0 0 var(--o3d-borda);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
}

.fi-sidebar.fi-main-sidebar {
    background-color: var(--o3d-vidro-forte);
    box-shadow: 1px 0 0 0 var(--o3d-borda);
}

@media (min-width: 1024px) {
    .fi-sidebar.fi-main-sidebar {
        background-color: color-mix(in oklab, var(--o3d-fundo) 55%, transparent);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
}

/* Superfícies: vidro + borda luminosa (pseudo-elemento com máscara) + holofote no cursor */
.fi-section:not(.fi-section-not-contained):not(.fi-aside),
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-ta-content-grid .fi-ta-record:has(.o3d-card) {
    position: relative;
    border-radius: var(--o3d-raio-card);
    background-color: var(--o3d-vidro);
    background-image: radial-gradient(
        520px circle at var(--o3d-mx, -1000px) var(--o3d-my, -1000px),
        var(--o3d-brilho),
        transparent 45%
    );
    box-shadow: var(--o3d-sombra);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.fi-section:not(.fi-section-not-contained):not(.fi-aside)::before,
.fi-ta-ctn::before,
.fi-wi-stats-overview-stat::before,
.fi-ta-content-grid .fi-ta-record:has(.o3d-card)::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    padding: 1px;
    border-radius: inherit;
    background: var(--o3d-borda-luz);
    pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    transition: opacity var(--o3d-transicao);
}

.fi-ta-ctn {
    overflow: hidden;
}

.fi-ta-ctn::before {
    z-index: 5;
}

/* Widget carregando (lazy): esqueleto de linhas em vez de uma caixa vazia */
.fi-section.fi-loading-section::after {
    content: '';
    position: absolute;
    inset: 1.5rem;
    background:
        linear-gradient(var(--o3d-esqueleto) 0 0) 0 0 / 32% 0.75rem no-repeat,
        linear-gradient(var(--o3d-esqueleto) 0 0) 0 1.75rem / 64% 0.625rem no-repeat,
        linear-gradient(var(--o3d-esqueleto) 0 0) 0 3.125rem / 48% 0.625rem no-repeat;
    animation: o3d-esqueleto 1.2s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes o3d-esqueleto {
    from { opacity: 0.45; }
    to { opacity: 1; }
}

/* Modais, menus e notificações: vidro mais denso para leitura */
.fi-modal-window,
.fi-dropdown-panel,
.fi-no-notification {
    background-color: var(--o3d-vidro-forte);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    box-shadow: 0 0 0 1px var(--o3d-borda), 0 24px 64px -16px color-mix(in oklab, #000 45%, transparent);
}

.fi-modal-close-overlay {
    background-color: color-mix(in oklab, var(--gray-950) 60%, transparent);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Celular: sem desfoque nas superfícies (desempenho), vidro quase opaco */
@media (max-width: 767px) {
    .fi-section:not(.fi-section-not-contained):not(.fi-aside),
    .fi-ta-ctn,
    .fi-wi-stats-overview-stat,
    .fi-ta-content-grid .fi-ta-record:has(.o3d-card) {
        background-color: var(--o3d-vidro-forte);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .o3d-grade {
        height: 35vh;
    }
}

/* ------------------------------------------------------ tipografia */

.fi-header-heading {
    font-family: var(--o3d-display);
    font-weight: 700;
    letter-spacing: -0.03em;
}

.fi-header-subheading {
    max-width: 65ch;
    color: var(--o3d-texto-3);
}

.fi-section-header-heading,
.fi-ta-header-heading {
    font-family: var(--o3d-display);
    letter-spacing: -0.01em;
}

.fi-wi-stats-overview-stat-value,
.fi-ta-text.fi-numeric,
.o3d-card-preco,
.o3d-detalhe-preco {
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------- botões e foco */

.fi-btn {
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--o3d-transicao), background-color var(--o3d-transicao), color var(--o3d-transicao);
}

.fi-btn.fi-color-primary:not(.fi-outlined):not(:disabled) {
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary-400) 40%, transparent),
        0 6px 20px -8px color-mix(in oklab, var(--primary-500) 70%, transparent);
}

.fi-btn.fi-color-primary:not(.fi-outlined):not(:disabled):hover {
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary-300) 60%, transparent),
        0 8px 28px -6px color-mix(in oklab, var(--primary-500) 85%, transparent);
}

/* Barra de progresso enquanto o botão espera o servidor (ex.: "Buscar ofertas agora") */
.fi-btn:has(.fi-loading-indicator[style*='display']:not([style*='none']))::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40%;
    height: 2px;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    animation: o3d-progresso 1.1s ease-in-out infinite;
}

@keyframes o3d-progresso {
    from { transform: translateX(-100%); }
    to { transform: translateX(260%); }
}

.fi-input-wrp {
    transition: box-shadow var(--o3d-transicao);
}

.fi-input-wrp:focus-within {
    box-shadow: 0 0 0 1px var(--primary-500), 0 0 0 4px color-mix(in oklab, var(--primary-500) 22%, transparent),
        0 0 24px -4px color-mix(in oklab, var(--primary-500) 45%, transparent);
}

/* Barra lateral: item ativo com barra de luz */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    position: relative;
    background: linear-gradient(90deg, color-mix(in oklab, var(--primary-500) 16%, transparent), transparent 90%);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    content: '';
    position: absolute;
    inset-block: 0.5rem;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 999px;
    background: var(--primary-500);
    box-shadow: 0 0 12px var(--primary-500);
}

/* ------------------------------------------------------------------ marca */

.o3d-marca {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    height: 100%;
    color: var(--o3d-texto);
    white-space: nowrap;
}

.o3d-marca-selo {
    height: 100%;
    width: auto;
    aspect-ratio: 1;
    flex-shrink: 0;
}

/* Brilho só no escuro (sala de controle); no claro ele suja a borda do balão */
:root.dark .o3d-marca-selo,
.o3d-vitrine .o3d-marca-selo {
    filter: drop-shadow(0 0 12px color-mix(in oklab, var(--o3d-marca-verde-noite) 40%, transparent));
}

.o3d-marca .marca-selo-fundo {
    fill: var(--o3d-marca-verde);
}

/* Nome em duas linhas (a última palavra embaixo), na altura do selo: cabe na sidebar */
.o3d-marca-nome {
    font-family: var(--o3d-display);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
}

.o3d-marca-destaque {
    display: block;
    color: var(--o3d-acento);
    text-shadow: 0 0 16px color-mix(in oklab, var(--primary-500) 60%, transparent);
}

/* Nome de uma palavra só ("AfiFlow"): uma linha, Bricolage 700, com "Flow" na cor da marca.
   Tamanho casado com o selo: 32px -> 20px (sidebar), 40px -> 24px (vitrine do login). */
.o3d-marca-nome:has(.marca-junto) {
    font-family: var(--o3d-marca-fonte);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}

.o3d-marca-destaque.marca-junto {
    display: inline;
    color: var(--o3d-marca-flow);
    text-shadow: none;
}

.fi-sidebar:not(.fi-sidebar-open) .o3d-marca-nome {
    display: none;
}

/* ------------------------------------------------------------------ login */

.o3d-vitrine {
    display: none;
}

.fi-simple-layout:has(> .o3d-vitrine) .fi-simple-main {
    position: relative;
    background-color: var(--o3d-vidro);
    box-shadow: var(--o3d-sombra);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.fi-simple-layout:has(> .o3d-vitrine) .fi-simple-main::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: var(--o3d-borda-luz);
    pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.fi-simple-layout:has(> .o3d-vitrine) .fi-simple-header-heading {
    font-family: var(--o3d-display);
    font-weight: 700;
    letter-spacing: -0.03em;
}

@media (min-width: 1024px) {
    .fi-simple-layout:has(> .o3d-vitrine) {
        display: grid;
        grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
        align-items: stretch;
    }

    .o3d-vitrine {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 3rem;
        overflow: hidden;
        color: var(--gray-100);
        background:
            radial-gradient(60% 50% at 30% 20%, color-mix(in oklab, #005C3E 50%, transparent), transparent),
            radial-gradient(50% 45% at 85% 75%, color-mix(in oklab, var(--frio-500) 22%, transparent), transparent),
            var(--gray-950);
        border-inline-end: 1px solid color-mix(in oklab, var(--color-white) 8%, transparent);
    }

    .o3d-vitrine > * {
        position: relative;
    }

    .o3d-vitrine-piso {
        position: absolute;
        inset: auto -40% 0;
        height: 60%;
        transform: perspective(600px) rotateX(64deg);
        transform-origin: bottom center;
        mask-image: linear-gradient(to top, #000, transparent 90%);
        background-image:
            linear-gradient(to right, color-mix(in oklab, var(--frio-300) 22%, transparent) 1px, transparent 1px),
            linear-gradient(to bottom, color-mix(in oklab, var(--frio-300) 22%, transparent) 1px, transparent 1px);
        background-size: 40px 40px;
    }

    /* A vitrine é sempre escura: marca com as cores do tema escuro, mesmo no claro */
    .o3d-vitrine .o3d-marca {
        height: 2.5rem;
        gap: 0.75rem;
        color: var(--color-white);
    }

    .o3d-vitrine .o3d-marca-nome {
        font-size: 1.125rem;
    }

    .o3d-vitrine .o3d-marca-nome:has(.marca-junto) {
        font-size: 1.5rem;
    }

    .o3d-vitrine .o3d-marca-destaque {
        color: var(--primary-400);
    }

    .o3d-vitrine .o3d-marca-destaque.marca-junto {
        color: var(--o3d-marca-flow-noite);
    }

    .o3d-vitrine .o3d-marca .marca-selo-fundo {
        fill: var(--o3d-marca-verde-noite);
    }

    .o3d-vitrine-conteudo {
        display: flex;
        flex-direction: column;
        gap: 1.75rem;
        max-width: 30rem;
    }

    .o3d-vitrine-titulo {
        font-family: var(--o3d-display);
        font-size: 3rem;
        line-height: 1.02;
        font-weight: 700;
        letter-spacing: -0.04em;
        color: var(--color-white);
        text-wrap: balance;
    }

    .o3d-vitrine-titulo span {
        color: var(--primary-400);
    }

    .o3d-vitrine-lista {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .o3d-vitrine-lista li {
        display: grid;
        grid-template-columns: 2.25rem minmax(0, 1fr);
        gap: 0.75rem;
        align-items: start;
    }

    .o3d-vitrine-lista li > span:last-child {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
        font-size: 0.875rem;
        color: var(--gray-400);
    }

    .o3d-vitrine-lista strong {
        font-weight: 600;
        color: var(--gray-100);
    }

    .o3d-vitrine-icone {
        display: grid;
        place-items: center;
        width: 2.25rem;
        height: 2.25rem;
        border-radius: var(--o3d-raio-controle);
        color: var(--primary-300);
        background: color-mix(in oklab, var(--primary-500) 14%, transparent);
        box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary-400) 30%, transparent),
            0 0 18px -6px var(--primary-500);
    }

    .o3d-vitrine-icone .fi-icon {
        width: 1.25rem;
        height: 1.25rem;
    }

    .o3d-vitrine-rodape {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--gray-400);
    }

    .fi-simple-layout:has(> .o3d-vitrine) .fi-simple-main .fi-logo {
        display: none;
    }
}

/*
 * Cena do login (ilustrativa, decorativa): a oferta chega, o preço cai abaixo
 * do menor preço do histórico, ganha o selo e é publicada no grupo.
 * O estado padrão (sem data-etapa de transição) é o fim da cena: é o que aparece
 * sem JS e com movimento reduzido. O JS (public/js/ofertas.js) só troca
 * data-etapa e recicla os balões. Anima apenas transform e opacity.
 */
.o3d-palco {
    --o3d-palco-curva: cubic-bezier(0.16, 1, 0.3, 1);

    display: grid;
    grid-template-columns: minmax(0, 1fr) 2rem 11.5rem;
    align-items: stretch;
    width: 100%;
    max-width: 36rem;
    margin-block: auto 0;
    font-family: var(--font-family), system-ui, sans-serif;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--gray-300);
    pointer-events: none;
    user-select: none;
}

.o3d-palco svg {
    display: block;
    overflow: visible;
}

/* Oferta encontrada */
.o3d-palco-oferta {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    padding: 1rem;
    border-radius: var(--o3d-raio-card);
    background: color-mix(in oklab, var(--gray-900) 88%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-white) 10%, transparent);
}

.o3d-palco-produto {
    display: grid;
    justify-items: start;
    gap: 0.25rem;
    min-width: 0;
    transition: opacity 280ms var(--o3d-palco-curva), transform 420ms var(--o3d-palco-curva);
}

.o3d-palco-loja {
    padding-inline: 0.5rem;
    border-radius: 999px;
    font-weight: 700;
    line-height: 1.25rem;
    color: var(--o3d-ml-texto);
    background: var(--o3d-ml-fundo);
}

.o3d-palco-loja[data-loja='shopee'] {
    color: var(--o3d-shopee-texto);
    background: var(--o3d-shopee-fundo);
}

.o3d-palco-nome {
    max-width: 100%;
    margin-top: 0.25rem;
    overflow: hidden;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: var(--gray-50);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.o3d-palco-precos {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-variant-numeric: tabular-nums;
}

.o3d-palco-precos s {
    color: var(--gray-400);
}

.o3d-palco-precos b {
    font-family: var(--o3d-display);
    font-size: 1rem;
    line-height: 1.25rem;
    font-weight: 700;
    color: var(--color-white);
}

.o3d-palco-desconto {
    padding-inline: 0.375rem;
    border-radius: 999px;
    font-weight: 700;
    color: var(--success-300);
    background: color-mix(in oklab, var(--success-500) 16%, transparent);
}

/* Histórico de preço (degraus: preço muda aos saltos) */
.o3d-palco-grafico {
    position: relative;
    height: 4.5rem;
}

.o3d-palco-grafico > svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.o3d-palco-grafico path {
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.o3d-palco-historico {
    stroke: var(--gray-500);
}

.o3d-palco-piso {
    stroke: color-mix(in oklab, var(--gray-400) 50%, transparent);
    stroke-dasharray: 3 4;
}

.o3d-palco-desce,
.o3d-palco-cauda {
    stroke: var(--success-400);
}

.o3d-palco-desce {
    transform-box: fill-box;
    transform-origin: top;
    transition: transform 640ms var(--o3d-palco-curva);
}

.o3d-palco-cauda {
    transition: opacity 240ms var(--o3d-palco-curva) 560ms;
}

/* Preço atual: x = 196/240 do gráfico, y = 54px (depois da queda) */
.o3d-palco-ponto {
    position: absolute;
    top: 3.375rem;
    left: calc(196 / 240 * 100%);
    width: 0.625rem;
    height: 0.625rem;
    margin: -0.3125rem 0 0 -0.3125rem;
    border-radius: 50%;
    background: var(--gray-300);
    box-shadow: 0 0 0 3px var(--gray-900);
    transition: transform 640ms var(--o3d-palco-curva), opacity 240ms var(--o3d-palco-curva);
}

.o3d-palco-ponto::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--success-400);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--success-400) 24%, transparent);
    transition: opacity 200ms var(--o3d-palco-curva) 420ms;
}

.o3d-palco-menor {
    position: absolute;
    top: 3.375rem;
    left: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0 0.5rem 0 0.375rem;
    border-radius: 999px;
    font-weight: 700;
    line-height: 1.25rem;
    white-space: nowrap;
    color: var(--success-300);
    background: color-mix(in oklab, var(--success-500) 16%, var(--gray-900));
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--success-400) 32%, transparent);
    transform: translateY(-50%);
    transform-origin: left center;
    transition: opacity 280ms var(--o3d-palco-curva) 520ms, transform 420ms var(--o3d-palco-curva) 520ms;
}

.o3d-palco-menor svg {
    width: 0.75rem;
    height: 0.75rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.o3d-palco-legenda {
    color: var(--gray-400);
}

/* Envio: um pulso atravessa a ponte até o grupo */
.o3d-palco-ponte {
    position: relative;
    align-self: center;
    height: 1px;
    margin-inline: 0.25rem;
    background: linear-gradient(
        to right,
        color-mix(in oklab, var(--success-400) 70%, transparent),
        color-mix(in oklab, var(--frio-300) 70%, transparent)
    );
}

.o3d-palco-pulso {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.o3d-palco-pulso::before {
    content: '';
    position: absolute;
    top: -0.1875rem;
    left: 0;
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: var(--frio-300);
}

/* Grupo do WhatsApp */
.o3d-palco-grupo {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--o3d-raio-card);
    color: var(--o3d-wa-noite-texto);
    background: var(--o3d-wa-noite-fundo);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-white) 8%, transparent);
}

.o3d-palco-grupo-topo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--o3d-wa-noite-topo);
}

.o3d-palco-avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    font-weight: 700;
    color: var(--color-white);
    background: var(--o3d-wa-avatar);
}

.o3d-palco-grupo-nome {
    display: flex;
    flex-direction: column;
    min-width: 0;
    white-space: nowrap;
}

.o3d-palco-grupo-nome strong {
    font-weight: 600;
}

.o3d-palco-grupo-nome > span {
    color: var(--o3d-wa-noite-meta);
}

.o3d-palco-conta {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

.o3d-palco-conta--sobe {
    animation: o3d-palco-conta 420ms var(--o3d-palco-curva);
}

@keyframes o3d-palco-conta {
    from { opacity: 0; transform: translateY(0.5rem); }
}

.o3d-palco-conversa {
    position: relative;
    flex: 1;
    min-height: 9.5rem;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, transparent, #000 1.5rem);
}

/* Balões empilhados de baixo para cima: --o3d-idade 0 é o mais novo */
.o3d-palco-balao {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.375rem 0.5rem 0.25rem;
    border-radius: 0.5rem 0 0.5rem 0.5rem;
    background: var(--o3d-wa-noite-balao);
    transform: translateY(calc(var(--o3d-idade, 0) * (-100% - 0.5rem)));
    transform-origin: bottom right;
    transition: transform 520ms var(--o3d-palco-curva), opacity 360ms var(--o3d-palco-curva);
}

.o3d-palco-balao--novo {
    opacity: 0;
    transform: translateY(0.75rem) scale(0.96);
    transition: none;
}

.o3d-palco-balao--velho {
    opacity: 0;
}

.o3d-palco-balao strong {
    overflow: hidden;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.o3d-palco-balao-preco {
    font-variant-numeric: tabular-nums;
}

.o3d-palco-balao-preco s {
    color: var(--o3d-wa-noite-meta);
}

.o3d-palco-balao-preco b {
    font-weight: 700;
}

.o3d-palco-balao-rodape {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--o3d-wa-noite-meta);
    font-variant-numeric: tabular-nums;
}

.o3d-palco-balao-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-inline-end: auto;
    color: var(--o3d-wa-noite-link);
}

.o3d-palco-balao-link svg {
    width: 0.75rem;
    height: 0.75rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
}

.o3d-palco-lido {
    width: 1rem;
    height: 0.75rem;
}

.o3d-palco-lido path {
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.o3d-palco-lido-cinza {
    stroke: var(--o3d-wa-noite-meta);
}

.o3d-palco-lido-azul {
    stroke: var(--o3d-wa-noite-link);
    transition: opacity 240ms var(--o3d-palco-curva) 1200ms;
}

.o3d-palco-balao--novo .o3d-palco-lido-azul {
    opacity: 0;
}

/* Etapas. trocando: a oferta anterior sai; chegou: a nova aparece, preço ainda não conferido */
.o3d-palco[data-etapa='trocando'] .o3d-palco-produto {
    opacity: 0;
    transform: translateY(-0.25rem);
    transition-duration: 200ms;
}

.o3d-palco[data-etapa='chegou'] .o3d-palco-produto {
    animation: o3d-palco-chega 420ms var(--o3d-palco-curva);
}

@keyframes o3d-palco-chega {
    from { opacity: 0; transform: translateY(0.5rem); }
}

.o3d-palco:is([data-etapa='trocando'], [data-etapa='chegou']) .o3d-palco-ponto {
    transform: translateY(-1.875rem);
}

.o3d-palco:is([data-etapa='trocando'], [data-etapa='chegou']) .o3d-palco-ponto::after,
.o3d-palco:is([data-etapa='trocando'], [data-etapa='chegou']) .o3d-palco-cauda {
    opacity: 0;
    transition: opacity 160ms linear;
}

.o3d-palco:is([data-etapa='trocando'], [data-etapa='chegou']) .o3d-palco-desce {
    transform: scaleY(0);
    transition: transform 0s;
}

.o3d-palco:is([data-etapa='trocando'], [data-etapa='chegou']) .o3d-palco-menor {
    opacity: 0;
    transform: translateY(-50%) scale(0.92);
    transition: opacity 160ms linear, transform 0s 160ms;
}

.o3d-palco[data-etapa='trocando'] .o3d-palco-ponto {
    opacity: 0;
    transition: opacity 160ms linear, transform 0s 160ms;
}

.o3d-palco[data-etapa='enviando'] .o3d-palco-pulso {
    animation: o3d-palco-pulso 600ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes o3d-palco-pulso {
    0% { opacity: 0; transform: translateX(0); }
    20%, 80% { opacity: 1; }
    100% { opacity: 0; transform: translateX(calc(100% - 0.4375rem)); }
}

/* --------------------------------------------------------------- dashboard */

.fi-wi-stats-overview-stat-label {
    font-weight: 500;
    color: var(--o3d-texto-2);
}

.fi-wi-stats-overview-stat .fi-icon {
    color: var(--o3d-acento);
    filter: drop-shadow(0 0 6px color-mix(in oklab, var(--primary-500) 50%, transparent));
}

.fi-wi-stats-overview-stat-value {
    font-family: var(--o3d-display);
    font-size: clamp(2rem, 1.25rem + 1.6vw, 3rem);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.04em;
}

.fi-wi-stats-overview-stat-description {
    font-size: 0.75rem;
}

/* Valores em texto ("há 5 minutos") num tamanho menor, para não quebrar */
.o3d-stat-texto .fi-wi-stats-overview-stat-value {
    font-size: 2rem;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.fi-wi-stats-overview-stat-chart canvas {
    filter: drop-shadow(0 0 6px color-mix(in oklab, var(--primary-500) 45%, transparent));
}

/* Destaque (maior desconto): borda de luz mais forte, parada */
.fi-wi-stats-overview-stat.o3d-destaque::before {
    padding: 1.5px;
    background: linear-gradient(
        150deg,
        var(--primary-400),
        var(--o3d-borda) 45%,
        var(--o3d-borda) 70%,
        var(--frio-300)
    );
}

.o3d-destaque .fi-wi-stats-overview-stat-value {
    color: var(--o3d-acento-texto);
}

/* Integrações */
.o3d-integracoes,
.o3d-integracoes > .fi-section {
    height: 100%;
}

.o3d-integracoes-lista {
    display: flex;
    flex-direction: column;
    margin-block: -0.5rem;
}

.o3d-integracao {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding-block: 0.75rem;
    border-bottom: 1px solid var(--o3d-borda);
}

.o3d-integracao:last-child {
    border-bottom: 0;
}

.o3d-integracao-icone {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--o3d-raio-controle);
    color: var(--o3d-texto-2);
    background: color-mix(in oklab, var(--gray-500) 12%, transparent);
    box-shadow: inset 0 0 0 1px var(--o3d-borda);
}

.o3d-integracao-icone .fi-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.o3d-integracao-texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.o3d-integracao-nome {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--o3d-texto);
}

.o3d-integracao-detalhe {
    font-size: 0.75rem;
    color: var(--o3d-texto-3);
    overflow-wrap: anywhere;
}

.o3d-integracao-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Pulso de status */
.o3d-pulso {
    position: relative;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--o3d-pulso-cor);
    box-shadow: 0 0 8px var(--o3d-pulso-cor);
}

.o3d-pulso--success { --o3d-pulso-cor: var(--success-500); }
.o3d-pulso--warning { --o3d-pulso-cor: var(--warning-500); }
.o3d-pulso--danger { --o3d-pulso-cor: var(--danger-500); }

.o3d-integracoes-dica {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--o3d-borda);
    font-size: 0.75rem;
    color: var(--o3d-texto-3);
}

.o3d-integracoes-dica code,
.o3d-quebra-link {
    font-family: var(--mono-font-family), ui-monospace, monospace;
}

.o3d-integracoes-dica code {
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    background: color-mix(in oklab, var(--gray-500) 14%, transparent);
    color: var(--o3d-texto-2);
}

/* Ranking */
.o3d-posicao {
    font-family: var(--mono-font-family), ui-monospace, monospace;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.o3d-miniatura {
    border-radius: var(--o3d-raio-controle);
    background: var(--o3d-poco-foto);
    object-fit: contain;
    mix-blend-mode: multiply;
}

.fi-ta-image:has(.o3d-miniatura) {
    isolation: isolate;
}

/* ------------------------------------------------------------ preço riscado */

.o3d-riscado {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in oklab, currentColor 70%, transparent);
}

/* ------------------------------------------------ lista de ofertas em cards */

.fi-ta-content-grid .fi-ta-record:has(.o3d-card) {
    align-items: stretch;
    padding: 0;
    overflow: hidden;
    transition: box-shadow var(--o3d-transicao), transform var(--o3d-transicao);
}

.fi-ta-content-grid .fi-ta-record.fi-clickable:has(.o3d-card):hover {
    background-color: var(--o3d-vidro);
    box-shadow: var(--o3d-sombra), 0 0 0 1px color-mix(in oklab, var(--primary-500) 35%, transparent),
        0 18px 40px -18px color-mix(in oklab, var(--primary-500) 45%, transparent);
    transform: translateY(-2px);
}

.fi-ta-content-grid .fi-ta-record.fi-selected:has(.o3d-card) {
    box-shadow: 0 0 0 2px var(--o3d-acento), 0 0 24px -6px var(--primary-500);
}

.fi-ta-record:has(.o3d-card) .fi-ta-record-content-ctn {
    position: relative;
    z-index: 1;
    padding-block: 0;
    row-gap: 0;
}

.fi-ta-record:has(.o3d-card) .fi-ta-record-content-ctn > :first-child {
    display: flex;
}

.fi-ta-content-grid .fi-ta-record:has(.o3d-card) .fi-ta-record-content {
    display: flex;
    flex-direction: column;
    padding: 0;
}

.fi-ta-record:has(.o3d-card) > .fi-ta-record-checkbox {
    position: absolute;
    z-index: 2;
    top: 0.75rem;
    inset-inline-start: 0.75rem;
    margin: 0;
}

.fi-ta-content-grid .fi-ta-record.fi-ta-record-with-content-prefix:has(.o3d-card) {
    padding-inline-start: 0;
}

.o3d-card {
    height: 100%;
}

.o3d-card-midia {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    margin: 0.5rem 0.5rem 0;
    overflow: hidden;
    border-radius: var(--o3d-raio-controle);
    background: var(--o3d-poco-foto);
    isolation: isolate;
}

.o3d-card-midia img {
    width: 100%;
    height: 100%;
    padding: 1rem;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform 400ms cubic-bezier(0.2, 0, 0, 1);
}

.fi-ta-record.fi-clickable:hover .o3d-card-midia img {
    transform: scale(1.04);
}

.o3d-card-sem-foto {
    color: var(--gray-400);
}

.o3d-card-sem-foto .fi-icon {
    width: 2rem;
    height: 2rem;
}

.o3d-loja {
    position: absolute;
    bottom: 0.5rem;
    inset-inline-start: 0.5rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--o3d-raio-chip);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.25rem;
    letter-spacing: -0.005em;
}

.o3d-loja--mercadolivre {
    color: var(--o3d-ml-texto);
    background: var(--o3d-ml-fundo);
}

.o3d-loja--shopee {
    color: var(--o3d-shopee-texto);
    background: var(--o3d-shopee-fundo);
}

.o3d-card-enviada {
    position: absolute;
    top: 0.5rem;
    inset-inline-end: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem 0.125rem 0.375rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25rem;
    color: var(--success-700);
    background: color-mix(in oklab, var(--color-white) 90%, transparent);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--success-600) 25%, transparent);
}

.o3d-card-enviada .fi-icon {
    width: 1rem;
    height: 1rem;
    color: var(--success-600);
}

.o3d-card-corpo {
    padding: 1rem 1rem 0.75rem;
}

.o3d-card-titulo .fi-ta-text-item {
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--o3d-texto);
    min-height: calc(2 * 1.35em);
    transition: color var(--o3d-transicao);
}

.fi-ta-record.fi-clickable:hover .o3d-card-titulo .fi-ta-text-item {
    color: var(--o3d-acento-texto);
}

.o3d-card-precos {
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 0.5rem;
    row-gap: 0.25rem;
}

.o3d-card-precos .fi-ta-col.fi-align-end {
    align-self: center;
}

.o3d-card-preco.fi-ta-text-item,
.o3d-card-preco {
    font-family: var(--o3d-display);
    font-size: 1.25rem;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--o3d-texto);
}

.o3d-card-precos .o3d-riscado {
    font-size: 0.75rem;
}

.o3d-card-meta {
    font-size: 0.75rem;
}

.fi-ta-record:has(.o3d-card) .fi-ta-actions {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding: 0.625rem 1rem 0.75rem;
    border-top: 1px solid var(--o3d-borda);
    justify-content: flex-start;
    gap: 1rem;
}

.fi-ta-content-grid .fi-ta-record:has(.o3d-card) .fi-ta-actions {
    padding-inline: 1rem;
}

/* Celular: card horizontal, foto quadrada à esquerda */
@media (max-width: 639px) {
    .o3d-card {
        display: grid;
        grid-template-columns: 7rem minmax(0, 1fr);
        align-items: start;
    }

    .o3d-card-midia {
        aspect-ratio: 1;
        margin: 0.75rem 0 0 0.75rem;
    }

    .o3d-card-midia img {
        padding: 0.5rem;
    }

    .o3d-card-enviada {
        top: 0.25rem;
        inset-inline-end: 0.25rem;
        padding: 0.125rem;
        font-size: 0;
        gap: 0;
    }

    .o3d-loja {
        bottom: 0.25rem;
        inset-inline-start: 0.25rem;
        padding-inline: 0.375rem;
        font-size: 0.6875rem;
    }

    .o3d-card-corpo {
        padding: 0.75rem;
    }

    .o3d-card-titulo .fi-ta-text-item {
        min-height: 0;
    }

    .o3d-card-preco.fi-ta-text-item,
    .o3d-card-preco {
        font-size: 1rem;
    }
}

/* ------------------------------------------------------ detalhe da oferta */

.o3d-detalhe-foto {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--o3d-raio-controle);
    background: var(--o3d-poco-foto);
    isolation: isolate;
}

.o3d-detalhe-foto img {
    padding: 1.5rem;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.o3d-detalhe-titulo .fi-in-text-item {
    font-family: var(--o3d-display);
    font-size: 1.5rem;
    line-height: 1.2;
    letter-spacing: -0.025em;
    text-wrap: pretty;
}

.o3d-detalhe-precos {
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 0.75rem;
    row-gap: 0.25rem;
}

.o3d-detalhe-preco.fi-in-text-item,
.o3d-detalhe-preco {
    font-family: var(--o3d-display);
    font-size: 3rem;
    line-height: 1;
    letter-spacing: -0.045em;
    color: var(--o3d-texto);
}

.o3d-detalhe-precos .o3d-riscado {
    font-size: 1rem;
}

.o3d-quebra-link .fi-in-text-item {
    overflow-wrap: anywhere;
}

@media (max-width: 639px) {
    .o3d-detalhe-titulo .fi-in-text-item {
        font-size: 1.25rem;
    }

    .o3d-detalhe-preco.fi-in-text-item,
    .o3d-detalhe-preco {
        font-size: 2rem;
    }
}

@media (min-width: 1024px) {
    .o3d-detalhe-previa {
        position: sticky;
        top: 5rem;
    }
}

/* -------------------------------------------------- prévia do WhatsApp */

.o3d-wa {
    overflow: hidden;
    border-radius: var(--o3d-raio-controle);
    box-shadow: 0 0 0 1px var(--o3d-borda), 0 0 40px -12px color-mix(in oklab, var(--success-500) 35%, transparent);
    background: var(--o3d-wa-fundo);
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.o3d-wa-topo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    background: var(--o3d-wa-topo);
}

.o3d-wa-avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--o3d-marca-verde-dia);   /* foto do grupo = selo da marca: cor fixa, sem franja na borda */
}

.o3d-wa-avatar svg {
    width: 100%;
    height: 100%;
}

.o3d-wa-avatar .marca-selo-fundo {
    fill: var(--o3d-marca-verde-dia);
}

.o3d-wa-grupo {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.o3d-wa-grupo strong {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--o3d-wa-texto);
}

.o3d-wa-grupo span {
    font-size: 0.75rem;
    color: var(--o3d-wa-meta);
}

.o3d-wa-conversa {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 1.25rem 1.25rem 1rem;
    background-image: radial-gradient(var(--o3d-wa-rabisco) 1px, transparent 1px);
    background-size: 16px 16px;
}

.o3d-wa-balao {
    position: relative;
    width: min(100%, 22rem);
    padding: 0.25rem 0.25rem 0.375rem;
    border-radius: 0.5rem 0 0.5rem 0.5rem;
    color: var(--o3d-wa-texto);
    background: var(--o3d-wa-balao);
    box-shadow: 0 1px 0.5px color-mix(in oklab, #0b141a 13%, transparent);
    animation: o3d-balao 480ms cubic-bezier(0.2, 0.7, 0.2, 1) 200ms both;
    transform-origin: top right;
}

.o3d-wa-balao::after {
    content: '';
    position: absolute;
    top: 0;
    right: -0.5rem;
    width: 0.5rem;
    height: 0.8125rem;
    background: var(--o3d-wa-balao);
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

@keyframes o3d-balao {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to { opacity: 1; transform: none; }
}

.o3d-wa-foto {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: 0.375rem;
    background: #ffffff;
}

.o3d-wa-texto {
    padding: 0.375rem 0.5rem 0;
    font-size: 0.875rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.o3d-wa-texto a {
    color: var(--o3d-wa-link);
    text-decoration: none;
}

.o3d-wa-texto a:hover {
    text-decoration: underline;
}

.o3d-wa-texto a:focus-visible {
    outline: 2px solid var(--o3d-wa-link);
    outline-offset: 2px;
    border-radius: 2px;
}

.o3d-wa-hora {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem 0;
    font-size: 0.75rem;
    color: var(--o3d-wa-meta);
}

.o3d-wa-lido {
    width: 1rem;
    height: 0.6875rem;
    fill: var(--o3d-wa-lido);
}

.o3d-wa-legenda {
    padding: 0.625rem 1rem;
    border-top: 1px solid var(--o3d-borda);
    font-size: 0.75rem;
    color: var(--o3d-wa-meta);
    background: var(--o3d-wa-topo);
}

/* -------------------------------------------------------- acessibilidade */

@media (prefers-reduced-motion: reduce) {
    .o3d-palco-pulso,
    .o3d-palco-conta,
    .o3d-palco-produto,
    .o3d-wa-balao,
    .fi-btn::after,
    .fi-loading-section {
        animation: none;
    }

    .o3d-palco-produto,
    .o3d-palco-ponto,
    .o3d-palco-ponto::after,
    .o3d-palco-desce,
    .o3d-palco-cauda,
    .o3d-palco-menor,
    .o3d-palco-balao,
    .o3d-palco-lido-azul,
    .fi-ta-content-grid .fi-ta-record,
    .o3d-card-midia img,
    .o3d-card-titulo .fi-ta-text-item,
    .fi-btn,
    .fi-input-wrp {
        transition: none;
    }

    .fi-ta-content-grid .fi-ta-record.fi-clickable:has(.o3d-card):hover,
    .fi-ta-record.fi-clickable:hover .o3d-card-midia img {
        transform: none;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .fi-topbar,
    .fi-sidebar.fi-main-sidebar,
    .fi-section:not(.fi-section-not-contained):not(.fi-aside),
    .fi-ta-ctn,
    .fi-wi-stats-overview-stat,
    .fi-ta-content-grid .fi-ta-record:has(.o3d-card),
    .fi-modal-window,
    .fi-dropdown-panel {
        background-color: var(--o3d-vidro-forte);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* ------------------------------------------------------------------
   Selo de preço comparado ao histórico interno (cards de oferta)
   ------------------------------------------------------------------ */
.o3d-selo-preco {
    position: absolute;
    top: 0.5rem;
    inset-inline-start: 0.5rem;
    z-index: 1;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.25rem;
    background: color-mix(in oklab, var(--color-white) 90%, transparent);
    box-shadow: 0 0 0 1px var(--o3d-selo-borda, transparent);
    color: var(--o3d-selo-texto, var(--gray-700));
}

.o3d-selo-preco--menor_preco {
    --o3d-selo-texto: var(--color-white);
    --o3d-selo-borda: color-mix(in oklab, var(--success-400) 60%, transparent);
    background: linear-gradient(135deg, var(--success-600), var(--success-500));
    box-shadow: 0 0 0 1px var(--o3d-selo-borda), 0 0 18px color-mix(in oklab, var(--success-500) 55%, transparent);
}

.o3d-selo-preco--bom_preco {
    --o3d-selo-texto: var(--info-700);
    --o3d-selo-borda: color-mix(in oklab, var(--info-600) 30%, transparent);
}

.o3d-selo-preco--acima {
    --o3d-selo-texto: var(--warning-700);
    --o3d-selo-borda: color-mix(in oklab, var(--warning-600) 30%, transparent);
}

.dark .o3d-selo-preco:not(.o3d-selo-preco--menor_preco) {
    background: color-mix(in oklab, var(--gray-950) 78%, transparent);
}

.dark .o3d-selo-preco--bom_preco { --o3d-selo-texto: var(--info-300); }
.dark .o3d-selo-preco--acima { --o3d-selo-texto: var(--warning-300); }

/* ------------------------------------------------------------------
   WhatsApp: janela de conexão (QR code, código, passkey)
   ------------------------------------------------------------------ */
.o3d-conexao {
    display: grid;
    gap: 1rem;
    color: var(--o3d-texto);
}

.o3d-conexao-titulo {
    font-family: var(--o3d-display);
    font-size: 1rem;
    font-weight: 700;
}

.o3d-conexao-texto { font-size: 0.875rem; line-height: 1.5; color: var(--o3d-texto-2); }
.o3d-conexao-texto a { color: var(--o3d-acento-texto); text-decoration: underline; }
.o3d-conexao-dica { font-size: 0.75rem; line-height: 1.45; color: var(--o3d-texto-3); text-align: center; }

.o3d-conexao-passos {
    display: grid;
    gap: 0.25rem;
    padding-inline-start: 1.25rem;
    list-style: decimal;
    font-size: 0.875rem;
    color: var(--o3d-texto-2);
}

.o3d-conexao-qr {
    display: grid;
    place-items: center;
    min-height: 18rem;
    padding: 1rem;
    border-radius: var(--o3d-raio-card);
    background: var(--color-white);
    box-shadow: 0 0 0 1px var(--o3d-borda), 0 0 40px color-mix(in oklab, var(--primary-500) 25%, transparent);
}

.o3d-conexao-qr img { width: 16.5rem; height: 16.5rem; image-rendering: pixelated; }
.o3d-conexao-carregando { font-size: 0.875rem; color: var(--gray-500); }

.o3d-conexao-ok { display: grid; justify-items: center; gap: 0.25rem; padding: 1.5rem 0; text-align: center; }
.o3d-conexao-ok-icone .fi-icon { width: 3.5rem; height: 3.5rem; color: var(--success-500); filter: drop-shadow(0 0 14px color-mix(in oklab, var(--success-500) 60%, transparent)); }

.o3d-conexao-codigo { display: grid; justify-items: center; gap: 0.75rem; text-align: center; }
.o3d-conexao-codigo-valor {
    font-family: var(--mono-font-family, ui-monospace), monospace;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    padding: 0.5rem 1rem;
    border-radius: var(--o3d-raio-controle);
    background: var(--o3d-poco);
    color: var(--o3d-texto);
}

.o3d-conexao-link { font-size: 0.75rem; font-weight: 600; color: var(--o3d-acento-texto); text-decoration: underline; text-underline-offset: 2px; border-radius: 0.25rem; }
.o3d-conexao-link:disabled { opacity: 0.6; cursor: progress; }

.o3d-conexao-alternativa summary { cursor: pointer; font-size: 0.875rem; font-weight: 600; color: var(--o3d-acento-texto); border-radius: 0.25rem; }
.o3d-conexao-form { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.5rem; }
.o3d-conexao-form > :first-child { flex: 1; }
.o3d-conexao-erro-campo { margin-top: 0.25rem; font-size: 0.75rem; font-weight: 600; color: var(--danger-600); }
.dark .o3d-conexao-erro-campo { color: var(--danger-400); }

.o3d-conexao-aviso {
    display: grid;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border-radius: var(--o3d-raio-controle);
    font-size: 0.875rem;
}

.o3d-conexao-aviso--erro { background: color-mix(in oklab, var(--danger-500) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--danger-500) 30%, transparent); }
.o3d-conexao-aviso--atencao { background: color-mix(in oklab, var(--warning-500) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--warning-500) 30%, transparent); }

/* WhatsApp: link de convite */
.o3d-convite { display: grid; gap: 0.75rem; }
.o3d-convite-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
    border-radius: var(--o3d-raio-controle);
    background: var(--o3d-poco);
}
.o3d-convite-link code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 0.875rem; color: var(--o3d-texto); }

/* ---- Painel do parceiro: link de indicação ---------------------------- */
.o3d-parceiro-link-corpo { display: grid; gap: 1rem; }
.o3d-parceiro-link-linha { display: flex; flex-direction: column; gap: .5rem; }
.o3d-parceiro-link-campo { flex: 1; min-width: 0; }
.o3d-parceiro-link-dica { font-size: .875rem; color: var(--o3d-texto-3); overflow-wrap: anywhere; }
.o3d-parceiro-link-dica strong,
.o3d-parceiro-link-dica code { font-family: var(--mono-font-family, ui-monospace, monospace); }
@media (min-width: 640px) {
    .o3d-parceiro-link-linha { flex-direction: row; align-items: center; }
}

/* ---- Conta do cliente ------------------------------------------------- */

.o3d-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Aviso de pagamento pendente (topo do conteúdo) */
.o3d-aviso-pagamento {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    border-radius: var(--o3d-raio-controle);
    background: color-mix(in oklab, var(--warning-500) 10%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--warning-500) 28%, transparent);
    font-size: 0.875rem;
    color: var(--o3d-texto-2);
}

.o3d-aviso-pagamento-icone {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--o3d-raio-chip);
    color: var(--warning-700);
    background: color-mix(in oklab, var(--warning-500) 18%, transparent);
}

.dark .o3d-aviso-pagamento-icone { color: var(--warning-400); }

.o3d-aviso-pagamento-icone .fi-icon { width: 1.25rem; height: 1.25rem; }

.o3d-aviso-pagamento-texto { margin: 0; text-wrap: pretty; }
.o3d-aviso-pagamento-texto strong { font-weight: 600; color: var(--o3d-texto); }

.o3d-aviso-pagamento-acoes {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .o3d-aviso-pagamento { grid-template-columns: 2rem minmax(0, 1fr) auto; }
    .o3d-aviso-pagamento-acoes { grid-column: auto; flex-wrap: nowrap; }
}

/* Primeiros passos (Dashboard do cliente) */
.o3d-passos-contagem {
    font-family: var(--o3d-display);
    font-size: 0.875rem;
    color: var(--o3d-texto-3);
    font-variant-numeric: tabular-nums;
}

.o3d-passos-contagem strong { font-size: 1.25rem; font-weight: 600; color: var(--o3d-texto); }

.o3d-passos-barra {
    height: 0.375rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--gray-500) 16%, transparent);
    overflow: hidden;
}

.o3d-passos-barra-preenchida {
    display: block;
    height: 100%;
    min-width: 0.375rem;
    border-radius: inherit;
    background: var(--o3d-acento);
    transition: width 400ms cubic-bezier(0.2, 0, 0, 1);
}

.o3d-passos-barra--completa .o3d-passos-barra-preenchida { background: var(--success-500); }

.o3d-passos-lista {
    display: flex;
    flex-direction: column;
    margin: 0.5rem 0 -0.5rem;
    padding: 0;
    list-style: none;
}

.o3d-passo {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    padding-block: 1rem;
    border-bottom: 1px solid var(--o3d-borda);
}

.o3d-passo:last-child { border-bottom: 0; }

.o3d-passo-marca {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    font-family: var(--o3d-display);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--o3d-texto-2);
    box-shadow: inset 0 0 0 1px var(--o3d-borda-forte);
}

.o3d-passo--proximo .o3d-passo-marca {
    color: var(--o3d-acento-texto);
    background: var(--o3d-brilho);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary-500) 45%, transparent);
}

.o3d-passo--feito .o3d-passo-marca {
    color: var(--color-white);
    background: var(--success-600);
    box-shadow: none;
}

.o3d-passo-marca .fi-icon { width: 1rem; height: 1rem; }

.o3d-passo-texto {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    padding-top: 0.25rem;
}

.o3d-passo-titulo { font-size: 0.875rem; font-weight: 600; color: var(--o3d-texto); }
.o3d-passo-descricao { font-size: 0.875rem; color: var(--o3d-texto-3); text-wrap: pretty; }

.o3d-passo--feito .o3d-passo-titulo {
    color: var(--o3d-texto-3);
    text-decoration: line-through;
    text-decoration-color: var(--o3d-borda-forte);
}

.o3d-passo-acao { grid-column: 2; }

@media (min-width: 640px) {
    .o3d-passo { grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; }
    .o3d-passo-texto { padding-top: 0; }
    .o3d-passo-acao { grid-column: auto; }
}

/* Minhas integrações: ajuda */
.o3d-ajuda { margin-bottom: 1.5rem; }

.o3d-ajuda-grade {
    display: grid;
    gap: 1rem;
}

@media (min-width: 1024px) {
    .o3d-ajuda-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.o3d-ajuda-loja {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--o3d-raio-controle);
    box-shadow: inset 0 0 0 1px var(--o3d-borda);
    background: color-mix(in oklab, var(--gray-500) 5%, transparent);
}

.o3d-ajuda-loja-topo { display: flex; align-items: center; gap: 0.75rem; }

.o3d-ajuda-loja-nome {
    margin: 0;
    font-family: var(--o3d-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--o3d-texto);
}

.o3d-ajuda-selo {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--o3d-raio-chip);
    font-family: var(--o3d-display);
    font-size: 0.75rem;
    font-weight: 700;
}

.o3d-ajuda-selo--ml { color: var(--o3d-ml-texto); background: var(--o3d-ml-fundo); }
.o3d-ajuda-selo--shopee { color: var(--o3d-shopee-texto); background: var(--o3d-shopee-fundo); }

.o3d-ajuda-passos {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: o3d-ajuda;
    font-size: 0.875rem;
    color: var(--o3d-texto-2);
}

.o3d-ajuda-passos li {
    position: relative;
    min-height: 1.5rem;
    padding-left: 2rem;
    counter-increment: o3d-ajuda;
}

.o3d-ajuda-passos li::before {
    content: counter(o3d-ajuda);
    position: absolute;
    top: -0.0625rem;
    left: 0;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    font-family: var(--o3d-display);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--o3d-acento-texto);
    background: var(--o3d-brilho);
}

.o3d-ajuda-passos strong { font-weight: 600; color: var(--o3d-texto); }

.o3d-ajuda-passos code,
.o3d-ajuda-nota code {
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-family: var(--mono-font-family), ui-monospace, monospace;
    font-size: 0.8125rem;
    color: var(--o3d-texto);
    background: color-mix(in oklab, var(--gray-500) 14%, transparent);
    overflow-wrap: anywhere;
}

.o3d-ajuda-nota {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin: auto 0 0;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--o3d-borda);
    font-size: 0.75rem;
    color: var(--o3d-texto-3);
}

.o3d-ajuda-nota > .fi-icon { flex-shrink: 0; width: 1rem; height: 1rem; }

.o3d-ajuda-nota strong { font-weight: 600; color: var(--o3d-texto-2); }

.o3d-ajuda-nota mark {
    padding: 0 0.125rem;
    border-radius: 0.125rem;
    color: inherit;
    background: var(--o3d-brilho);
    box-shadow: inset 0 -2px 0 var(--o3d-acento);
}

/* Aviso da Shopee: o acesso à Open API é liberado manualmente */
.o3d-ajuda-aviso {
    display: grid;
    gap: 0.25rem;
    padding: 0.75rem;
    border-radius: var(--o3d-raio-controle);
    background: color-mix(in oklab, var(--warning-500) 10%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--warning-500) 28%, transparent);
    font-size: 0.875rem;
    line-height: 1.5;
}

.o3d-ajuda-aviso p { margin: 0; }

.o3d-ajuda-aviso-titulo {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    font-weight: 500;
    color: var(--o3d-texto);
}

.o3d-ajuda-aviso-titulo strong { font-weight: 600; white-space: nowrap; }

.o3d-ajuda-aviso-titulo > .fi-icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-top: 0.125rem;
    color: var(--warning-600);
}

.dark .o3d-ajuda-aviso-titulo > .fi-icon { color: var(--warning-400); }

.o3d-ajuda-aviso-texto {
    padding-left: 1.5rem;
    font-size: 0.75rem;
    color: var(--o3d-texto-2);
}

.o3d-ajuda-aviso-texto strong { font-weight: 600; color: var(--o3d-texto); }

@media (prefers-reduced-motion: reduce) {
    .o3d-passos-barra-preenchida { transition: none; }
}

/* Link dentro de dicas pequenas acompanha o tamanho do texto */
.o3d-integracoes-dica .fi-link {
    font-size: inherit;
}

/* ---- Minhas integrações: Meta ------------------------------------------ */
.o3d-meta {
    display: grid;
    gap: 1rem;
}

.o3d-meta-vazio {
    display: grid;
    gap: 0.75rem;
    max-width: 65ch;
}

.o3d-meta-texto {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--o3d-texto-2);
}

.o3d-meta-texto strong {
    font-weight: 600;
    color: var(--o3d-texto);
}

.o3d-meta-nota {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--o3d-texto-3);
}

.o3d-meta-nota-icone {
    flex: none;
    width: 1rem;
    height: 1rem;
    margin-top: 0.125rem;
    color: var(--o3d-texto-3);
}

.o3d-meta-lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.5rem;
}

.o3d-meta-item {
    display: grid;
    align-content: start;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.75rem 1rem;
    border-radius: var(--o3d-raio-controle);
    background: color-mix(in oklab, var(--o3d-poco) 60%, transparent);
    box-shadow: inset 0 0 0 1px var(--o3d-borda);
}

.o3d-meta-item dt {
    font-size: 0.75rem;
    color: var(--o3d-texto-3);
}

.o3d-meta-item dd {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--o3d-texto);
    overflow-wrap: anywhere;
}

.o3d-meta-item .o3d-pulso {
    flex: none;
}

.o3d-meta-item--falta {
    background: color-mix(in oklab, var(--warning-500) 8%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--warning-500) 40%, transparent);
}

.o3d-meta-falta {
    font-weight: 500;
    color: var(--warning-700);
}

.dark .o3d-meta-falta {
    color: var(--warning-400);
}

.o3d-meta-data {
    font-family: var(--mono-font-family), ui-monospace, monospace;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.o3d-meta-item--expirado dd {
    color: var(--danger-700);
}

.dark .o3d-meta-item--expirado dd {
    color: var(--danger-400);
}

/* ---- Anúncios (Meta) ---------------------------------------------------- */
.o3d-ads {
    display: grid;
    gap: 1.5rem;
}

/* Linhas de apoio (cobrança, origem dos números) */
.o3d-ads-nota {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    max-width: 75ch;
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--o3d-texto-3);
    text-wrap: pretty;
}

.o3d-ads-nota-icone {
    flex: none;
    width: 1rem;
    height: 1rem;
    margin-top: 0.125rem;
}

/* Conta de anúncios */
.o3d-ads-conta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.5rem;
}

.o3d-ads-item {
    display: grid;
    align-content: start;
    gap: 0.375rem;
    min-width: 0;
    padding: 0.75rem 1rem;
    border-radius: var(--o3d-raio-controle);
    background: color-mix(in oklab, var(--o3d-poco) 60%, transparent);
    box-shadow: inset 0 0 0 1px var(--o3d-borda);
}

.o3d-ads-item dt {
    font-size: 0.75rem;
    color: var(--o3d-texto-3);
}

.o3d-ads-item dd {
    display: flex;
    align-items: center;
    min-height: 1.5rem;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--o3d-texto);
    overflow-wrap: anywhere;
}

.o3d-ads-dinheiro {
    font-variant-numeric: tabular-nums;
}

.o3d-ads-vago {
    font-weight: 500;
    color: var(--o3d-texto-3);
}

/* Resultados: indicadores */
.o3d-ads-numeros {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    transition: opacity var(--o3d-transicao);
}

.o3d-ads-numeros--carregando {
    opacity: 0.5;
}

.o3d-ads-kpi {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    padding: 1rem;
    border-radius: var(--o3d-raio-controle);
    box-shadow: inset 0 0 0 1px var(--o3d-borda);
}

.o3d-ads-kpi dt {
    font-size: 0.75rem;
    color: var(--o3d-texto-3);
}

.o3d-ads-kpi dd {
    font-family: var(--o3d-display);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--o3d-texto);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.o3d-ads-kpi--destaque {
    grid-column: 1 / -1;
    background: var(--o3d-brilho);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--o3d-acento) 32%, transparent);
}

.o3d-ads-kpi--destaque dd {
    font-size: 2rem;
}

@media (min-width: 640px) {
    .o3d-ads-numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
    .o3d-ads-numeros { grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); }
    .o3d-ads-kpi--destaque { grid-column: auto; }
}

/* Faixa final: lembrete de que tudo começa pausado + atalhos */
.o3d-ads-proximo {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: var(--o3d-raio-controle);
    box-shadow: inset 0 0 0 1px var(--o3d-borda);
    font-size: 0.875rem;
    color: var(--o3d-texto-2);
}

.o3d-ads-proximo-icone {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--o3d-raio-chip);
    color: var(--o3d-acento-texto);
    background: var(--o3d-brilho);
}

.o3d-ads-proximo-icone .fi-icon { width: 1.25rem; height: 1.25rem; }

.o3d-ads-proximo-texto { margin: 0; text-wrap: pretty; }
.o3d-ads-proximo-texto strong { font-weight: 600; color: var(--o3d-texto); }

.o3d-ads-proximo-acoes {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .o3d-ads-proximo { grid-template-columns: 2rem minmax(0, 1fr) auto; }
    .o3d-ads-proximo-acoes { grid-column: auto; flex-wrap: nowrap; }
}

/* Sem conexão com a Meta */
.o3d-ads-vazio {
    display: grid;
    justify-items: start;
    gap: 1.25rem;
    max-width: 40rem;
    padding: 0.5rem 0;
}

.o3d-ads-vazio-icone {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--o3d-raio-controle);
    color: var(--o3d-acento-texto);
    background: var(--o3d-brilho);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--o3d-acento) 28%, transparent);
}

.o3d-ads-vazio-icone .fi-icon { width: 1.25rem; height: 1.25rem; }

.o3d-ads-vazio-texto {
    display: grid;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--o3d-texto-2);
    text-wrap: pretty;
}

.o3d-ads-vazio-titulo {
    font-family: var(--o3d-display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--o3d-texto);
}

.o3d-ads-passos {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--o3d-texto-2);
}

.o3d-ads-passos li {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
}

.o3d-ads-passos strong { font-weight: 600; color: var(--o3d-texto); }

.o3d-ads-passo-num {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    font-family: var(--o3d-display);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--o3d-texto-2);
    box-shadow: inset 0 0 0 1px var(--o3d-borda-forte);
    font-variant-numeric: tabular-nums;
}

.o3d-ads-vazio-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
    .o3d-ads-numeros { transition: none; }
}