/*
 * 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.
 *
 * 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).
 */

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

@property --o3d-angulo {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

:root {
    --o3d-display: var(--serif-font-family), var(--font-family), system-ui, sans-serif;

    --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-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);
    --o3d-brilho: color-mix(in oklab, var(--primary-500) 12%, transparent);

    /* Luzes do fundo */
    --o3d-luz-quente: color-mix(in oklab, var(--primary-400) 22%, 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);
    --o3d-wa-rabisco: color-mix(in oklab, #111b21 6%, transparent);

    --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-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-brilho: color-mix(in oklab, var(--primary-400) 11%, transparent);

    --o3d-luz-quente: color-mix(in oklab, var(--primary-500) 30%, 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%;
    will-change: transform;
}

.o3d-aurora--quente {
    top: -35vmax;
    left: -20vmax;
    background: radial-gradient(closest-side, var(--o3d-luz-quente), transparent);
    animation: o3d-deriva-1 38s ease-in-out infinite alternate;
}

.o3d-aurora--fria {
    right: -30vmax;
    bottom: -40vmax;
    background: radial-gradient(closest-side, var(--o3d-luz-fria), transparent);
    animation: o3d-deriva-2 46s ease-in-out infinite alternate;
}

/* 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;
    animation: o3d-piso 12s linear infinite;
    will-change: transform;
}

.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");
}

@keyframes o3d-deriva-1 {
    to { transform: translate3d(14vmax, 10vmax, 0) scale(1.1); }
}

@keyframes o3d-deriva-2 {
    to { transform: translate3d(-12vmax, -8vmax, 0) scale(1.15); }
}

@keyframes o3d-piso {
    to { transform: translate3d(0, 48px, 0); }
}

/* ------------------------------------------------------------ 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;
}

/* 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;
    filter: drop-shadow(0 0 10px color-mix(in oklab, var(--primary-500) 55%, transparent));
}

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

/* 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);
}

.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, var(--primary-500) 26%, transparent), transparent),
            radial-gradient(50% 45% at 85% 75%, color-mix(in oklab, var(--frio-500) 22%, transparent), transparent),
            color-mix(in oklab, #000 55%, transparent);
        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;
    }

    .o3d-vitrine .o3d-marca {
        height: 2.5rem;
        color: var(--color-white);
    }

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

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

    .o3d-fluxo {
        align-self: center;
        width: min(100%, 22rem);
        height: auto;
        margin-block: auto 0;
        overflow: visible;
    }

    .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 {
        background: linear-gradient(90deg, var(--primary-300), var(--primary-500) 45%, var(--frio-300));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .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-family: var(--mono-font-family), ui-monospace, monospace;
        font-size: 0.75rem;
        color: var(--gray-500);
    }

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

/* Cena do login: ofertas chegando ao grupo enquanto o ganho sobe */
.o3d-fluxo {
    font-family: var(--font-family), system-ui, sans-serif;
}

.o3d-fluxo-stop-1 { stop-color: var(--frio-300); stop-opacity: 0.2; }
.o3d-fluxo-stop-2 { stop-color: var(--primary-400); }
.o3d-fluxo-stop-3 { stop-color: var(--primary-500); stop-opacity: 0.16; }
.o3d-fluxo-stop-4 { stop-color: var(--primary-500); stop-opacity: 0; }
.o3d-fluxo-stop-5 { stop-color: var(--primary-300); }
.o3d-fluxo-stop-6 { stop-color: var(--primary-700); }

.o3d-fluxo-area {
    fill: url(#o3d-fluxo-area);
}

.o3d-fluxo-linha {
    fill: none;
    stroke: url(#o3d-fluxo-linha);
    stroke-width: 2.5;
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px color-mix(in oklab, var(--primary-500) 70%, transparent));
}

.o3d-fluxo-no {
    fill: var(--gray-950);
    stroke: var(--primary-300);
    stroke-width: 2;
}

.o3d-fluxo-card-fundo {
    fill: color-mix(in oklab, var(--gray-900) 94%, transparent);
    stroke: color-mix(in oklab, var(--color-white) 12%, transparent);
}

.o3d-fluxo-foto {
    fill: url(#o3d-fluxo-foto);
}

.o3d-fluxo-titulo {
    fill: var(--gray-100);
    font-size: 11px;
    font-weight: 600;
}

.o3d-fluxo-preco {
    fill: var(--gray-400);
    font-size: 10px;
}

.o3d-fluxo-selo {
    fill: color-mix(in oklab, var(--success-500) 22%, transparent);
}

.o3d-fluxo-selo-texto {
    fill: var(--success-300);
    font-size: 9px;
    font-weight: 700;
}

.o3d-fluxo-link {
    fill: none;
    stroke: var(--frio-300);
    stroke-width: 1.5;
    stroke-linecap: round;
}

.o3d-fluxo-card {
    animation: o3d-chega 8s cubic-bezier(0.2, 0, 0, 1) infinite both;
    animation-delay: calc(var(--o3d-i, 0) * 0.5s);
}

@keyframes o3d-chega {
    0% { opacity: 0; transform: translateY(14px); }
    8%, 84% { opacity: 1; transform: none; }
    94%, 100% { opacity: 0; transform: translateY(-6px); }
}

/* --------------------------------------------------------------- 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): feixe de luz percorrendo a borda */
.fi-wi-stats-overview-stat.o3d-destaque::before {
    padding: 1.5px;
    background: conic-gradient(
        from var(--o3d-angulo),
        var(--o3d-borda) 0deg 250deg,
        var(--primary-400) 300deg,
        var(--frio-300) 330deg,
        var(--o3d-borda) 360deg
    );
    animation: o3d-feixe 6s linear infinite;
}

.o3d-destaque .fi-wi-stats-overview-stat-value {
    background: linear-gradient(100deg, var(--primary-300), var(--primary-500));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 18px color-mix(in oklab, var(--primary-500) 45%, transparent));
}

:root:not(.dark) .o3d-destaque .fi-wi-stats-overview-stat-value {
    background-image: linear-gradient(100deg, var(--primary-600), var(--primary-700));
}

@keyframes o3d-feixe {
    to { --o3d-angulo: 360deg; }
}

/* 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::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--o3d-pulso-cor);
    animation: o3d-pulso 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.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); }

@keyframes o3d-pulso {
    from { transform: scale(1); opacity: 0.7; }
    to { transform: scale(3); opacity: 0; }
}

.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);
    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);
    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;
}

/* Entrada escalonada dos cards e indicadores */
.fi-ta-content-grid > .fi-ta-record:nth-child(1) { --o3d-i: 0; }
.fi-ta-content-grid > .fi-ta-record:nth-child(2) { --o3d-i: 1; }
.fi-ta-content-grid > .fi-ta-record:nth-child(3) { --o3d-i: 2; }
.fi-ta-content-grid > .fi-ta-record:nth-child(4) { --o3d-i: 3; }
.fi-ta-content-grid > .fi-ta-record:nth-child(5) { --o3d-i: 4; }
.fi-ta-content-grid > .fi-ta-record:nth-child(6) { --o3d-i: 5; }
.fi-ta-content-grid > .fi-ta-record:nth-child(7) { --o3d-i: 6; }
.fi-ta-content-grid > .fi-ta-record:nth-child(8) { --o3d-i: 7; }
.fi-ta-content-grid > .fi-ta-record:nth-child(n + 9) { --o3d-i: 8; }

.fi-sc-component:has(> .fi-wi-stats-overview-stat) { --o3d-i: 0; }
.fi-grid-col:nth-child(2) > .fi-sc-component > .fi-wi-stats-overview-stat { --o3d-i: 1; }
.fi-grid-col:nth-child(3) > .fi-sc-component > .fi-wi-stats-overview-stat { --o3d-i: 2; }
.fi-grid-col:nth-child(4) > .fi-sc-component > .fi-wi-stats-overview-stat { --o3d-i: 3; }

.fi-ta-content-grid > .fi-ta-record:has(.o3d-card),
.fi-wi-stats-overview-stat {
    animation: o3d-surgir 520ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(var(--o3d-i, 0) * 50ms);
}

.fi-wi-stats-overview-stat.o3d-destaque {
    animation: o3d-surgir 520ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(var(--o3d-i, 0) * 50ms);
}

@keyframes o3d-surgir {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

/* 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);
    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;
    border-radius: 999px;
    background: var(--o3d-wa-avatar);
}

.o3d-wa-avatar {
    overflow: hidden;
}

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

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

.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-aurora,
    .o3d-grade::before,
    .o3d-fluxo-card,
    .o3d-pulso::after,
    .fi-wi-stats-overview-stat,
    .fi-wi-stats-overview-stat.o3d-destaque,
    .fi-wi-stats-overview-stat.o3d-destaque::before,
    .fi-ta-content-grid > .fi-ta-record:has(.o3d-card),
    .o3d-wa-balao,
    .fi-btn::after {
        animation: none;
    }

    .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); }

@media (prefers-reduced-motion: no-preference) {
    .o3d-selo-preco--menor_preco {
        animation: o3d-selo-pulso 2.6s ease-in-out infinite;
    }
}

@keyframes o3d-selo-pulso {
    0%, 100% { box-shadow: 0 0 0 1px var(--o3d-selo-borda), 0 0 12px color-mix(in oklab, var(--success-500) 40%, transparent); }
    50% { box-shadow: 0 0 0 1px var(--o3d-selo-borda), 0 0 22px color-mix(in oklab, var(--success-500) 70%, transparent); }
}

/* ------------------------------------------------------------------
   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: 1.05rem;
    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.8rem; 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.8rem; color: var(--o3d-acento-texto); text-decoration: underline; }

.o3d-conexao-alternativa summary { cursor: pointer; font-size: 0.85rem; color: var(--o3d-acento-texto); }
.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.8rem; color: var(--danger-600); }

.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.85rem; 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(--gray-500); 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);
    border-left: 3px solid var(--warning-500);
    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);
}

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