/*
 * V141 · Acabamento do site do seller (painel 'seller').
 *
 * Carregado só no painel 'seller' pelo PanelChrome::acabamentoHead(), depois
 * de v138-vendas.css, v138-conta.css e v141-popup.css. Vale também para as
 * telas sem login do seller (entrar, cadastro, recuperar e nova senha), que
 * usam o mesmo painel. Toda regra começa por body.fi-panel-seller; as das
 * telas sem login, por body.fi-panel-seller:has(.throne-login).
 *
 * Por que CSS estático: o tema do site (theme.css) não pode ser recompilado
 * agora. Cada bloco corrige uma regra do tema compilado; o !important de
 * autor vence o estilo inline sem !important que o theme.js aplica.
 * O aplicativo (sellerapp) tem CSS próprio e não recebe este arquivo.
 */

/* ======================================================================
   1. Fonte mono que de fato carrega.
   O tema pede 'JetBrains Mono' em cerca de 40 regras, mas essa fonte nunca
   foi declarada: o navegador caía em Consolas ou Courier New. Apelido para
   o arquivo da Geist Mono, que já é servido pelo site.
   ====================================================================== */
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/fonts/geist/GeistMono-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ======================================================================
   2. Botões param de pular.
   O tema sobe o botão 1,5 px no hover com uma mola que passa do ponto e
   encolhe no clique. Com o cursor na borda de baixo o botão sai de baixo
   dele, perde o hover e volta: o "botão que mexe sozinho". O mesmo vale
   para o sino, para o rótulo do campo em foco e para o que segue o cursor
   (data-magnetic). Brilho, cor e sombra do hover continuam.
   ====================================================================== */
body.fi-panel-seller .fi-btn:is(:hover, :active):not([disabled]) {
    transform: none !important;
}

body.fi-panel-seller .fi-btn {
    transition-property: background-color, border-color, box-shadow, color, filter !important;
    transition-duration: 0.2s !important;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.fi-panel-seller [data-magnetic],
body.fi-panel-seller .fi-topbar-database-notifications-btn:hover,
body.fi-panel-seller .fi-fo-field-wrp:focus-within :is(.fi-fo-field-wrp-label, label),
body.fi-panel-seller .throne-balance-card__cta:is(*, :hover, :active) {
    transform: none !important;
}

/* ======================================================================
   3. Barra lateral abaixo da barra superior.
   No computador a lateral era sticky em top:0 com a mesma camada da barra
   superior: ao rolar a página ela passava por cima da logo e da busca.
   65 px = 64 da barra + 1 da borda do .fi-topbar-ctn.
   ====================================================================== */
@media (min-width: 1024px) {
    body.fi-panel-seller.fi-body-has-topbar .fi-main-sidebar {
        top: 65px !important;
        height: calc(100dvh - 65px) !important;
        max-height: calc(100dvh - 65px) !important;
        z-index: 20 !important;
    }
}

/* Gaveta do menu no celular e no tablet: começa abaixo da barra (que tem o
   X, o sino e o avatar) e não repete a logo. 100dvh mantém o último item
   acima da barra do navegador. */
@media (max-width: 1023.98px) {
    body.fi-panel-seller.fi-body-has-topbar .fi-sidebar {
        top: 65px !important;
        height: calc(100dvh - 65px) !important;
        max-height: calc(100dvh - 65px) !important;
    }

    body.fi-panel-seller.fi-body-has-topbar .fi-sidebar .fi-sidebar-header {
        display: none !important;
    }
}

/* ======================================================================
   4. Menu lateral: item ativo visível, títulos de grupo alinhados e
   legíveis, uma borda só.
   O tema mira classes do Filament 3 (.fi-sidebar-item-button) e o item
   ativo ficava igual aos outros.
   ====================================================================== */
body.fi-panel-seller .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.22) 0%, rgba(124, 58, 237, 0.08) 100%) !important;
}

body.fi-panel-seller .fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    transform: translateY(-50%) scaleY(1) !important;
}

body.fi-panel-seller .fi-sidebar-item > .fi-sidebar-item-btn {
    transition-property: background-color, color !important;
}

body.fi-panel-seller .fi-sidebar-group-btn .fi-sidebar-group-label {
    margin-top: 0 !important;
    padding: 0 !important;
}

body.fi-panel-seller .fi-sidebar-group-btn {
    padding-top: 1.25rem !important;
}

body.fi-panel-seller .fi-sidebar-group-label {
    color: rgba(181, 160, 224, 0.85) !important;
}

body.fi-panel-seller .fi-topbar {
    border-bottom: 0 !important;
}

body.fi-panel-seller .fi-sidebar-nav {
    border-right: 0 !important;
}

/* Barra superior com o vidro fosco que o build perdeu (o compilado só tem
   a forma -webkit-, que o Chrome ignora). Uma camada só: o tema pintava o
   mesmo fundo a 85% no .fi-topbar-ctn e no .fi-topbar de dentro (juntos,
   quase opacos) e o desfoque de dentro não tinha o que desfocar. O fundo
   fica no contêiner, um pouco mais claro, para o vidro aparecer. */
body.fi-panel-seller .fi-topbar-ctn {
    backdrop-filter: blur(12px) saturate(140%) !important;
    background: rgba(6, 4, 28, 0.75) !important;
}

body.fi-panel-seller .fi-topbar {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* ======================================================================
   5. Cartão de saldo do menu: dinheiro nunca cortado, cabeçalho numa linha.
   "Em saques" e "A liberar" viram linhas de rótulo e valor; o valor
   principal só quebra entre "R$" e o número acima de R$ 10 milhões.
   ====================================================================== */
body.fi-panel-seller .throne-balance-card {
    margin-left: 0.25rem !important;
    margin-right: 0.25rem !important;
}

body.fi-panel-seller .throne-balance-card__header {
    gap: 8px;
}

body.fi-panel-seller :is(.throne-balance-card__label, .throne-balance-card__pulse) {
    white-space: nowrap !important;
    letter-spacing: 0.16em !important;
}

body.fi-panel-seller .throne-balance-card__pulse {
    flex: none !important;
}

body.fi-panel-seller .throne-balance-card__primary-value {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

body.fi-panel-seller .throne-balance-card__secondary {
    grid-template-columns: 1fr !important;
    gap: 0.4rem !important;
}

body.fi-panel-seller .throne-balance-card__secondary-divider {
    display: none !important;
}

body.fi-panel-seller .throne-balance-card__secondary-item {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
}

body.fi-panel-seller .throne-balance-card__secondary-label {
    margin-bottom: 0 !important;
    white-space: nowrap !important;
}

body.fi-panel-seller .throne-balance-card__secondary-value {
    max-width: none !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* ======================================================================
   6. Aviso de cookies: opaco, compacto no celular e fora do menu aberto.
   ====================================================================== */
body.fi-panel-seller .throne-cookie-notice {
    backdrop-filter: blur(24px) saturate(180%) !important;
    background: linear-gradient(145deg, #1d1240 0%, #0f081f 100%) !important;
}

@media (max-width: 1023.98px) {
    body.fi-panel-seller:has(.fi-main-sidebar.fi-sidebar-open) .throne-cookie-notice {
        visibility: hidden !important;
    }
}

@media (max-width: 640px) {
    body.fi-panel-seller .throne-cookie-notice {
        padding: 0.625rem 0.75rem !important;
    }

    body.fi-panel-seller .throne-cookie-notice__body {
        flex-wrap: nowrap !important;
        gap: 0.625rem !important;
    }

    body.fi-panel-seller .throne-cookie-notice__text {
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
        flex: 1 1 auto !important;
    }

    body.fi-panel-seller .throne-cookie-notice__btn {
        padding: 0.5rem 0.75rem !important;
        white-space: nowrap;
    }

    /* o fim do formulário continua alcançável com o aviso na tela */
    body.fi-panel-seller:has(.throne-cookie-notice--visible) .fi-main {
        padding-bottom: 6rem !important;
    }
}

/* ======================================================================
   7. Conteúdo, títulos e subtítulos.
   ====================================================================== */

/* No celular o conteúdo fica alinhado ao título (o tema somava 12 px). */
@media (max-width: 480px) {
    body.fi-panel-seller .fi-page-content {
        padding-inline: 0 !important;
    }
}

/* Subtítulo da página em frase normal, sem caixa alta espaçada. */
body.fi-panel-seller .fi-header-subheading {
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Descrição de seção sem itálico. */
body.fi-panel-seller .fi-section-header-description {
    font-style: normal !important;
}

/* Suporte: títulos dos cartões em Geist (o título da página segue em
   KnightWish). */
body.fi-panel-seller .v138-conta--suporte .font-knightwish {
    font-family: 'Geist', ui-sans-serif, system-ui, sans-serif !important;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

body.fi-panel-seller .v138-conta--suporte h3.font-knightwish {
    font-size: 1.125rem;
}

body.fi-panel-seller .v138-conta--suporte h2.font-knightwish {
    font-size: 1.25rem;
}

/* Documentação da API: exemplos quebram linha em vez de esconder o fim. */
body.fi-panel-seller .v138-docs__cartao pre {
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
}

/* No celular quebrar partia o endereço, a chave e o JSON no meio e deixava
   "\" e "-d" sozinhos numa linha. O comando fica como foi escrito, com letra
   um pouco menor, e rola de lado com a mesma sombra lilás das tabelas na
   borda que ainda tem texto. O botão Copiar continua copiando tudo. */
@media (max-width: 640px) {
    body.fi-panel-seller .v138-docs__cartao pre {
        white-space: pre !important;
        overflow-wrap: normal !important;
        font-size: 12px !important;
        background:
            linear-gradient(90deg, #0e0a19 30%, rgba(14, 10, 25, 0)) left center / 32px 100% no-repeat local,
            linear-gradient(270deg, #0e0a19 30%, rgba(14, 10, 25, 0)) right center / 32px 100% no-repeat local,
            radial-gradient(farthest-side at 0 50%, rgba(138, 72, 245, 0.55), rgba(138, 72, 245, 0)) left center / 14px 100% no-repeat scroll,
            radial-gradient(farthest-side at 100% 50%, rgba(138, 72, 245, 0.55), rgba(138, 72, 245, 0)) right center / 14px 100% no-repeat scroll,
            #0e0a19 !important;
    }
}

/* ======================================================================
   8. Campos: uma caixa só e a seta de volta em todo select.
   A borda e o fundo ficam no invólucro (.fi-input-wrp); o tema desenhava
   uma segunda caixa no próprio campo e apagava a seta do select com o
   atalho "background".
   ====================================================================== */
body.fi-panel-seller .fi-input-wrp :is(input.fi-input, select.fi-select-input, textarea) {
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* sem a borda de dentro o campo perderia 2 px: a altura fica a mesma */
body.fi-panel-seller .fi-input-wrp :is(input.fi-input, select.fi-select-input) {
    min-height: 38px;
}

body.fi-panel-seller select.fi-select-input {
    padding-inline-end: 36px !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23b591f2' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='m6 8 4 4 4-4'/%3E%3C/svg%3E") !important;
    background-position: right 10px center !important;
    background-repeat: no-repeat !important;
    background-size: 18px 18px !important;
    cursor: pointer;
}

body.fi-panel-seller .fi-topbar .fi-global-search-field .fi-input {
    padding-left: 0.25rem !important;
}

/* Interruptor volta a ser pílula no celular (o tema força 44 px de altura
   em todo button). O ::after mantém a área de toque de 44 px. */
@media (max-width: 640px) {
    body.fi-panel-seller button.fi-toggle {
        min-height: 0 !important;
        min-width: 0 !important;
        height: 1.5rem !important;
        width: 2.75rem !important;
        position: relative;
    }

    body.fi-panel-seller button.fi-toggle::after {
        content: '';
        position: absolute;
        inset: -10px -4px;
    }
}

/* Botão principal do formulário em largura total no celular, como em
   Perfil e Notificações. */
@media (max-width: 639.98px) {
    body.fi-panel-seller .throne-cta {
        justify-content: stretch !important;
    }

    body.fi-panel-seller .throne-cta > .fi-btn {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }
}

/* Toques pequenos no celular. */
@media (max-width: 640px) {
    body.fi-panel-seller .pd-periodo__seta {
        width: 40px;
    }

    body.fi-panel-seller .fi-user-menu-trigger {
        min-width: 44px;
    }

    body.fi-panel-seller .fi-input-wrp :is(input.fi-input, select.fi-select-input) {
        min-height: 42px;
    }

    body.fi-panel-seller .throne-ultimas-vendas .fi-ta-header .fi-link {
        display: inline-block;
        padding-block: 12px;
    }
}

/* ======================================================================
   9. Tabelas.
   ====================================================================== */

/* 9.1 Painel de filtros não é cortado em tabela curta (o Filament só corta
   tabela sem cabeçalho; o tema cortava todas). */
body.fi-panel-seller .fi-ta:has(> .fi-ta-ctn-with-header),
body.fi-panel-seller .fi-ta-ctn.fi-ta-ctn-with-header {
    overflow: visible !important;
}

/* 9.2 Cabeçalho da coluna de ações sem o bloco cinza. */
body.fi-panel-seller .fi-ta-table > thead > tr {
    background: transparent !important;
}

body.fi-panel-seller .fi-ta-table > thead > tr > th:is(.fi-ta-actions-header-cell, .fi-ta-empty-header-cell, .fi-ta-selection-cell) {
    background: linear-gradient(180deg, #0c0a22 0%, #08061a 100%) !important;
    border-bottom: 1px solid rgba(91, 47, 203, 0.28) !important;
}

/* 9.3 Linhas das tabelas da conta na mesma altura das de dinheiro. */
@media (min-width: 640px) {
    body.fi-panel-seller :is(.v138-conta, .fi-resource-team-members) .fi-ta-table > tbody > tr > td.fi-ta-cell {
        padding-block: 0 !important;
    }

    body.fi-panel-seller :is(.v138-conta, .fi-resource-team-members) .fi-ta-table > tbody > tr > td.fi-ta-cell:has(> .fi-ta-actions) {
        padding-block: 10px !important;
    }
}

@media (max-width: 639px) {
    body.fi-panel-seller .fi-ta-table-stacked-on-mobile > tbody > tr > td.fi-ta-cell {
        padding-block: 6px !important;
    }

    body.fi-panel-seller .fi-ta-table-stacked-on-mobile > tbody > tr > td.fi-ta-cell:first-child {
        padding-top: 16px !important;
    }

    body.fi-panel-seller .fi-ta-table-stacked-on-mobile > tbody > tr > td.fi-ta-cell:last-child {
        padding-bottom: 16px !important;
    }
}

/* 9.4 Folga entre coluna de valor (à direita) e a coluna de texto seguinte. */
@media (min-width: 1280px) {
    body.fi-panel-seller .fi-ta.throne-antecip-tabela-filament .fi-ta-table > thead > tr > th.fi-ta-header-cell-paid-at.fi-ta-header-cell,
    body.fi-panel-seller .fi-ta.throne-antecip-tabela-filament .fi-ta-table > tbody > tr > td.fi-ta-cell-paid-at > .fi-ta-col > .fi-ta-text,
    body.fi-panel-seller .fi-ta.throne-extrato-tabela .fi-ta-table > thead > tr > th.fi-ta-header-cell-description.fi-ta-header-cell,
    body.fi-panel-seller .fi-ta.throne-extrato-tabela .fi-ta-table > tbody > tr > td.fi-ta-cell-description > .fi-ta-col > .fi-ta-text,
    body.fi-panel-seller .fi-ta.throne-vendas-lista .fi-ta-table > thead > tr > th.fi-ta-header-cell-display-status.fi-ta-header-cell,
    body.fi-panel-seller .fi-ta.throne-vendas-lista .fi-ta-table > tbody > tr > td.fi-ta-cell-display-status > .fi-ta-col > .fi-ta-text {
        padding-left: 32px !important;
    }
}

/* 9.5 Estado vazio das telas da conta no mesmo círculo roxo das listas de
   dinheiro. */
body.fi-panel-seller :is(.v138-conta, .fi-resource-team-members) .fi-ta-empty-state-icon-bg {
    background: rgba(138, 72, 245, 0.14) !important;
    box-shadow: inset 0 0 0 1px rgba(138, 72, 245, 0.30);
    color: #cdb6ff !important;
}

/* 9.6 Até 1279 px: a rolagem lateral tem sinal (sombra lilás na borda que
   ainda tem conteúdo). */
@media (max-width: 1279px) {
    body.fi-panel-seller .fi-ta-content-ctn {
        background:
            linear-gradient(90deg, #06041c 30%, rgba(6, 4, 28, 0)) left center / 40px 100% no-repeat local,
            linear-gradient(270deg, #06041c 30%, rgba(6, 4, 28, 0)) right center / 40px 100% no-repeat local,
            radial-gradient(farthest-side at 0 50%, rgba(138, 72, 245, 0.55), rgba(138, 72, 245, 0)) left center / 18px 100% no-repeat scroll,
            radial-gradient(farthest-side at 100% 50%, rgba(138, 72, 245, 0.55), rgba(138, 72, 245, 0)) right center / 18px 100% no-repeat scroll !important;
    }
}

/* 9.7 Vendas entre 640 e 1279 px: sem a coluna Método, respiro menor e
   cabeçalho mais justo (a tabela cabe em 1024). A data continua numa linha:
   quebrada em duas, cada linha da lista crescia de 53 para 77 px. */
@media (min-width: 640px) and (max-width: 1279px) {
    body.fi-panel-seller .fi-ta.throne-vendas-lista :is(.fi-ta-header-cell-payment-method, .fi-ta-cell-payment-method) {
        display: none !important;
    }

    body.fi-panel-seller .fi-ta.throne-vendas-lista .fi-ta-table > tbody > tr > td.fi-ta-cell > .fi-ta-col > .fi-ta-text {
        padding-inline: 8px !important;
    }

    body.fi-panel-seller .fi-ta.throne-vendas-lista .fi-ta-table > thead > tr > th.fi-ta-header-cell.fi-ta-header-cell {
        padding-inline: 8px !important;
        letter-spacing: 0.03em !important;
    }

    body.fi-panel-seller .fi-ta.throne-vendas-lista .fi-ta-table > thead > tr > th.fi-ta-header-cell.fi-ta-header-cell:first-child {
        padding-left: 16px !important;
    }

}

/* 9.8 Entre 640 e 1439 px as ações da linha (olho, menu) ficam à vista: a
   coluna gruda na direita e o resto rola por baixo.
   A célula é opaca e cobria a sombra lilás do 9.6 na borda direita: o sinal
   de rolagem passa para a borda esquerda dela, numa faixa (::before) porque
   a tabela usa bordas coladas e ali o navegador ignora box-shadow em
   célula. A faixa só aparece quando a tabela rola de fato e some no fim da
   rolagem: a animação segue a rolagem do próprio contêiner e, sem rolagem,
   fica inativa (vale a opacidade 0). Navegador sem esse recurso fica sem a
   faixa, como antes. No hover da linha a célula ganha o mesmo véu roxo das
   outras. */
@media (min-width: 640px) and (max-width: 1439.98px) {
    body.fi-panel-seller .fi-ta-table > tbody > tr > td.fi-ta-cell:has(> .fi-ta-actions),
    body.fi-panel-seller .fi-ta-table > thead > tr > th.fi-ta-actions-header-cell {
        position: sticky;
        right: 0;
        z-index: 1;
        background: #08061a !important;
    }

    body.fi-panel-seller .fi-ta-table > tbody > tr > td.fi-ta-cell:has(> .fi-ta-actions)::before,
    body.fi-panel-seller .fi-ta-table > thead > tr > th.fi-ta-actions-header-cell::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        right: 100%;
        width: 18px;
        pointer-events: none;
        background: linear-gradient(270deg, rgba(138, 72, 245, 0.34), rgba(138, 72, 245, 0));
        opacity: 0;
        animation-name: v141-acoes-sinal;
        animation-duration: 1ms;
        animation-timing-function: step-end;
        animation-fill-mode: both;
        animation-timeline: scroll(nearest inline);
    }

    body.fi-panel-seller .fi-ta-table > tbody > tr.fi-ta-row:hover > td.fi-ta-cell:has(> .fi-ta-actions) {
        background: linear-gradient(rgba(91, 47, 203, 0.08), rgba(91, 47, 203, 0.08)), #08061a !important;
    }
}

@keyframes v141-acoes-sinal {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* 9.8.1 Chaves de API entre 640 e 1439 px: respiro menor nas células e
   cabeçalho mais justo, como em Vendas. Assim Situação cabe inteira antes
   da coluna das ações em 1024 e a tabela não rola em 1280. */
@media (min-width: 640px) and (max-width: 1439.98px) {
    body.fi-panel-seller .v138-conta--chaves .fi-ta-table > tbody > tr > td.fi-ta-cell .fi-ta-col > .fi-ta-text {
        padding-inline: 6px !important;
    }

    body.fi-panel-seller .v138-conta--chaves .fi-ta-table > thead > tr > th.fi-ta-header-cell.fi-ta-header-cell {
        padding-inline: 10px !important;
        letter-spacing: 0.06em !important;
    }
}

/* 9.9 Até 768 px o tema forçava a tabela a ter a largura do texto inteiro
   numa linha (min-width:max-content).
   No extrato a descrição continua numa linha só: espremida, ela quebrava
   em 4 a 6 linhas e cada lançamento ficava 2 a 3 vezes mais alto. A tabela
   rola de lado, com a sombra lilás do 9.6. */
@media (max-width: 768px) {
    body.fi-panel-seller .fi-ta-table {
        min-width: 0 !important;
    }

    body.fi-panel-seller .fi-ta.throne-extrato-tabela td.fi-ta-cell-description .fi-ta-text-item {
        white-space: nowrap !important;
    }
}

/* 9.10 Celular: só as colunas que decidem. O resto segue no detalhe. */
@media (max-width: 639px) {
    body.fi-panel-seller .fi-ta.throne-vendas-lista :is(.fi-ta-header-cell-payment-method, .fi-ta-cell-payment-method, .fi-ta-header-cell-net-amount-cents, .fi-ta-cell-net-amount-cents, .fi-ta-header-cell-settlement-status, .fi-ta-cell-settlement-status) {
        display: none !important;
    }

    body.fi-panel-seller .fi-ta.throne-antecip-tabela-filament :is(.fi-ta-header-cell-native-amount-cents, .fi-ta-cell-native-amount-cents, .fi-ta-header-cell-paid-at, .fi-ta-cell-paid-at) {
        display: none !important;
    }

    body.fi-panel-seller .fi-ta.throne-extrato-tabela td.fi-ta-cell-created-at .fi-ta-text-item {
        white-space: normal !important;
        display: block;
        min-width: 10.5ch;
    }

    body.fi-panel-seller .fi-ta.throne-extrato-tabela td.fi-ta-cell-created-at > .fi-ta-col > .fi-ta-text {
        width: calc(10.5ch + 20px) !important;
    }

    body.fi-panel-seller .fi-ta.throne-extrato-tabela td.fi-ta-cell > .fi-ta-col > .fi-ta-text {
        padding-inline: 8px !important;
    }

    body.fi-panel-seller .fi-ta.throne-ultimas-vendas :is(.fi-ta-header-cell-payment-method, .fi-ta-cell-payment-method, .fi-ta-header-cell-public-id, .fi-ta-cell-public-id) {
        display: none !important;
    }
}

/* 9.11 Antecipações, abas Pedidos e Adiantadas: Status e Observação
   alcançáveis. No computador a tabela rola; no celular cada pedido vira um
   cartão em duas colunas, com o rótulo de cada valor (data-th). */
body.fi-panel-seller div:has(> table.throne-antecip-tabela) {
    overflow-x: auto !important;
}

body.fi-panel-seller table.throne-antecip-tabela th {
    white-space: nowrap;
}

@media (max-width: 767px) {
    body.fi-panel-seller .fi-page-main div:has(> table.throne-antecip-tabela) {
        overflow-x: visible !important;
    }

    body.fi-panel-seller .fi-page-main table.throne-antecip-tabela {
        min-width: 0 !important;
        display: block;
    }

    body.fi-panel-seller table.throne-antecip-tabela thead {
        display: none !important;
    }

    body.fi-panel-seller table.throne-antecip-tabela tbody {
        display: block;
    }

    body.fi-panel-seller table.throne-antecip-tabela tbody > tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 10px 12px;
        padding: 14px 16px;
        border-top: 1px solid rgba(138, 72, 245, 0.18);
    }

    body.fi-panel-seller table.throne-antecip-tabela tbody > tr:first-child {
        border-top: 0;
    }

    body.fi-panel-seller table.throne-antecip-tabela tbody > tr > td {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
        padding: 0 !important;
        text-align: left !important;
        min-width: 0;
    }

    body.fi-panel-seller table.throne-antecip-tabela tbody > tr > td[data-th]::before {
        content: attr(data-th);
        font: 600 10.5px/1.4 'Geist Mono', ui-monospace, monospace;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #9b86c4;
    }

    body.fi-panel-seller table.throne-antecip-tabela tbody > tr > td.throne-antecip-obs {
        grid-column: 1 / -1;
    }
}

/* 9.12 Abas de Vendas: contador pequeno (o tema aplicava o espaçamento do
   selo APROVADA e "33" virava "3 3") e as 4 abas à vista no celular. */
body.fi-panel-seller .fi-tabs-item .fi-badge {
    padding: 2px 8px !important;
    min-width: 22px;
    justify-content: center;
    letter-spacing: 0 !important;
    font-family: 'Geist Mono', ui-monospace, monospace !important;
    font-size: 0.72rem !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

body.fi-panel-seller .fi-tabs-item .fi-badge > * {
    letter-spacing: 0 !important;
}

@media (max-width: 639.98px) {
    body.fi-panel-seller .fi-resource-list-records-page.fi-resource-transactions nav.fi-tabs {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        overflow: visible !important;
        width: 100%;
    }

    body.fi-panel-seller .fi-resource-list-records-page.fi-resource-transactions nav.fi-tabs > .fi-tabs-item {
        justify-content: center;
    }
}

/* 9.13 Abas de Antecipações sem quebrar "A liberar" e dentro do cartão. */
body.fi-panel-seller .throne-antecip-abas > button {
    white-space: nowrap !important;
}

@media (max-width: 480px) {
    body.fi-panel-seller .throne-antecip-abas {
        width: 100% !important;
        max-width: 100%;
    }

    body.fi-panel-seller .throne-antecip-abas > button {
        flex: 1 1 auto;
        justify-content: center;
        padding-inline: 8px !important;
        gap: 6px !important;
    }
}

/* 9.14 Título "Últimas 10 vendas" no mesmo estilo de "Por método" e
   "Países". */
body.fi-panel-seller .throne-ultimas-vendas .fi-ta-header-heading {
    font-family: 'Geist', ui-sans-serif, system-ui, sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 650 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
}

body.fi-panel-seller .throne-ultimas-vendas .fi-ta-header .fi-link {
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* No celular "Ver todas" fica na linha do título (o Filament empilhava). */
@media (max-width: 639.98px) {
    body.fi-panel-seller .throne-ultimas-vendas .fi-ta-header {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    body.fi-panel-seller .throne-ultimas-vendas .fi-ta-header > :first-child {
        flex: 1 1 auto;
        min-width: 0;
    }

    body.fi-panel-seller .throne-ultimas-vendas .fi-ta-header > .fi-ta-actions {
        flex: none;
        width: auto;
    }
}

/* ======================================================================
   10. Detalhe da venda: data e câmbio inteiros.
   O !important vence o white-space:nowrap inline da página.
   ====================================================================== */
body.fi-panel-seller .fi-resource-view-record-page.fi-resource-transactions .fi-in-text-item.throne-num {
    overflow: visible !important;
    white-space: normal !important;
    word-break: keep-all;
}

@media (min-width: 1024px) and (max-width: 1279px) {
    body.fi-panel-seller .fi-resource-view-record-page.fi-resource-transactions .fi-section-content.fi-grid {
        --cols-lg: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ======================================================================
   11. Início: painel de desempenho, meta e taxas.
   Fica aqui e não em painel-desempenho.css para não mexer no aplicativo.
   ====================================================================== */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    body.fi-panel-seller .pd-filtros {
        flex-wrap: wrap;
    }

    body.fi-panel-seller .pd-periodo {
        flex: 1 1 100%;
    }

    body.fi-panel-seller .pd-metodo {
        margin-left: 0;
    }
}

@media (max-width: 479px) {
    body.fi-panel-seller .pd-contador {
        flex-direction: column !important;
        gap: 8px !important;
    }
}

body.fi-panel-seller .pd-sub {
    font-size: 0.75rem;
}

body.fi-panel-seller .pd-legenda__cor--antes {
    border-top: 0 !important;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(205, 188, 242, 0.55) 0 4px, transparent 4px 7px);
}

@media (min-width: 641px) and (max-width: 1023px) {
    body.fi-panel-seller .throne-goals-card > .relative.grid {
        grid-template-columns: minmax(0, 1fr) 200px;
        gap: 24px;
        padding: 32px;
    }

    body.fi-panel-seller .throne-goals-card .throne-placa-img {
        max-height: 260px !important;
    }
}

/* Taxas: valores na mesma altura nos cartões lado a lado. */
@media (min-width: 768px) {
    body.fi-panel-seller .throne-taxas-cab {
        min-height: 40px;
    }

    body.fi-panel-seller .throne-taxas-mini {
        grid-template-rows: auto auto 1fr;
        row-gap: 0 !important;
    }

    body.fi-panel-seller .throne-taxas-mini > div {
        display: grid;
        grid-row: span 3;
        grid-template-rows: subgrid;
        align-content: start;
    }
}

/* ======================================================================
   12. Seções sem camada de GPU permanente: o surgimento ao rolar deixava
   will-change ligado para sempre. A transição das seções fica como está:
   o surgimento depende dela. (O item do sino, .fi-no-notification, já fica
   parado no hover pelo próprio tema.)
   ====================================================================== */
body.fi-panel-seller :is(.fi-section, .fi-wi-stats-overview-stat, .fi-table-container) {
    will-change: auto !important;
}

/* ======================================================================
   13. Telas sem login (entrar, cadastro, recuperar e nova senha).
   ====================================================================== */

/* 13.1 Sem cursor próprio (ficava meio anel preso no canto) e sem botão ou
   logo seguindo o mouse. */
body.fi-panel-seller:has(.throne-login) .throne-cursor-dot,
body.fi-panel-seller:has(.throne-login) .throne-cursor-ring {
    display: none !important;
}

body.fi-panel-seller:has(.throne-login),
body.fi-panel-seller:has(.throne-login) .throne-login {
    cursor: auto !important;
}

body.fi-panel-seller:has(.throne-login) .throne-submit-btn {
    cursor: pointer !important;
}

body.fi-panel-seller:has(.throne-login) .throne-login [data-magnetic] {
    transform: none !important;
}

/* 13.2 Vidro no cartão e no aviso, sem a marca d'água deslocada e com as
   fontes que carregam. */
html:has(.throne-login),
body.fi-panel-seller:has(.throne-login) {
    background-color: #06030d !important;
}

body.fi-panel-seller:has(.throne-login) .throne-form-card {
    backdrop-filter: blur(24px) saturate(180%);
}

body.fi-panel-seller:has(.throne-login) .throne-cookie-notice {
    background: linear-gradient(145deg, #1c1236 0%, #0f081f 100%) !important;
    backdrop-filter: blur(24px) saturate(180%);
}

body.fi-panel-seller:has(.throne-login) .throne-hero-watermark {
    display: none !important;
}

body.fi-panel-seller:has(.throne-login) .throne-login :is(.throne-pre-title, .throne-footer-indicator, .throne-form-card .fi-fo-field-label:not(:has(input[type=checkbox])) .fi-fo-field-label-content),
body.fi-panel-seller:has(.throne-login) .throne-login [style*='JetBrains Mono'] {
    font-family: 'Geist Mono', ui-monospace, Consolas, monospace !important;
}

body.fi-panel-seller:has(.throne-login) .throne-login :is(.throne-hero-sub, .throne-submit-btn, .throne-form-card input),
body.fi-panel-seller:has(.throne-login) .throne-login [style*="'Inter'"] {
    font-family: 'Inter Variable', 'Inter', system-ui, sans-serif !important;
}

/* 13.3 Celular e tablet: aviso de cookies no fim da página, sem cobrir o
   botão de entrar. */
@media (max-width: 1023px) {
    body.fi-panel-seller:has(.throne-login) .throne-cookie-notice {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        max-width: 28rem !important;
        width: calc(100% - 32px);
        box-sizing: border-box;
        margin: 0 auto 24px !important;
        transform: none !important;
    }
}

@media (max-width: 640px) {
    body.fi-panel-seller:has(.throne-login) .throne-login .throne-form-card {
        padding-bottom: 1.25rem !important;
    }

    /* "Esqueceu sua senha?" na linha do rótulo Senha, com a área de toque */
    body.fi-panel-seller:has(.throne-login) .throne-form-card .fi-sc-text .fi-link {
        margin-block: -12px !important;
    }
}

/* 13.4 Colunas mais largas entre 1024 e 1279, herói alinhado ao cartão no
   tablet e selos do herói sem quebrar no meio. */
@media (min-width: 1024px) and (max-width: 1279px) {
    body.fi-panel-seller:has(.throne-login) .throne-login-grid {
        padding: 4rem 3rem !important;
        gap: 3rem !important;
    }

    body.fi-panel-seller:has(.throne-login) .throne-form-card {
        padding: 2rem !important;
    }
}

body.fi-panel-seller:has(.throne-login) .throne-footer-indicator {
    white-space: nowrap;
}

body.fi-panel-seller:has(.throne-login) .throne-login-hero > div:has(> .throne-footer-indicator) {
    flex-wrap: wrap;
    column-gap: 1rem !important;
    row-gap: 0.5rem;
}

@media (min-width: 641px) and (max-width: 1023px) {
    body.fi-panel-seller:has(.throne-login) .throne-login-hero {
        width: 100%;
        max-width: 28rem;
        margin: 0 auto;
    }
}