/*
 * V138 · acabamento das telas de conta, desenvolvedor e configuração do seller
 * (site /painel e aplicativo /app): Documentação da API, Chaves de API,
 * Webhooks, Histórico de webhooks, Integrações, Perfil da empresa, Suporte,
 * Meus dados (LGPD), Meus acessos, Preferências de notificação, Excluir conta,
 * Equipe e Notificações push.
 *
 * Fica fora do build: o bundle do site não é recompilado, então nada aqui
 * depende de classe utilitária nova do Tailwind. Carregado nos quatro painéis
 * por PanelChrome::acabamentoHead(); cada regra é escopada pelo painel
 * (body.fi-panel-seller ou body.fi-panel-sellerapp) e pelo invólucro
 * .v138-conta que as views desta frente passaram a usar. A tela de 2FA é a
 * única que também vale nos painéis da equipe (.v138-2fa, quatro painéis).
 */

/* ------------------------------------------------------------------ */
/* V147 · KnightWish com font-display: block nos quatro painéis.       */
/* Esta folha entra depois do tema do Vite, então estas declarações   */
/* (mesma família, mesmo peso, mesmo estilo) são as que valem, sem    */
/* depender de rebuild do tema. É fonte de título: um instante         */
/* invisível enquanto o arquivo chega é melhor do que o texto nascer   */
/* em Georgia e trocar de desenho na frente da pessoa. O arquivo é     */
/* pré-carregado e aquecido pelo PanelChrome::acabamentoHead, então o  */
/* instante é curto. O itálico (assinatura do Painel do admin e        */
/* destaque do título das telas de entrada) passa a existir também no  */
/* aplicativo do seller, que inclinava o regular à força.              */
/* ------------------------------------------------------------------ */
@font-face {
    font-family: 'KnightWish';
    src: url('/fonts/knightwish/KnightWish-Regular.otf') format('opentype'),
         url('/fonts/knightwish/KnightWish-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'KnightWish';
    src: url('/fonts/knightwish/KnightWish-Italic.otf') format('opentype'),
         url('/fonts/knightwish/KnightWish-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: block;
}

/* ------------------------------------------------------------------ */
/* V138 · paleta da frente. Nos aplicativos vem das variáveis do tema   */
/* (--ta-*); no site, que não tem essas variáveis, valem os padrões.   */
/* ------------------------------------------------------------------ */
body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) {
    --v138-superficie: var(--ta-superficie, rgba(16, 10, 28, 0.72));
    --v138-superficie-2: var(--ta-superficie-2, rgba(26, 16, 48, 0.72));
    --v138-linha: var(--ta-linha, rgba(138, 72, 245, 0.2));
    --v138-linha-forte: var(--ta-linha-forte, rgba(138, 72, 245, 0.36));
    --v138-texto: var(--ta-texto, #ece9f5);
    --v138-texto-2: var(--ta-texto-2, #cdb6ff);
    --v138-mudo: var(--ta-mudo, #a99fc4);
    --v138-roxo: var(--ta-roxo, #8a48f5);
    --v138-verde: var(--ta-verde, #7ef0c0);
    --v138-ouro: #e2c27a;
    --v138-vermelho: var(--ta-vermelho, #f28b82);
    --v138-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --v138-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --v138-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* ------------------------------------------------------------------ */
/* Ritmo vertical: o espaço entre blocos vem só do gap do invólucro.   */
/* ------------------------------------------------------------------ */
body.fi-panel-seller .v138-conta,
body.fi-panel-sellerapp .v138-conta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

body.fi-panel-seller .v138-conta { gap: 24px; }
body.fi-panel-sellerapp .v138-conta { gap: 14px; }

body.fi-panel-seller .v138-conta > *,
body.fi-panel-sellerapp .v138-conta > * {
    min-width: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Formulário + linha de botões com o mesmo ritmo. */
body.fi-panel-seller .v138-conta__form,
body.fi-panel-sellerapp .v138-conta__form {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

body.fi-panel-seller .v138-conta__form { gap: 24px; }
body.fi-panel-sellerapp .v138-conta__form { gap: 14px; }

/* ------------------------------------------------------------------ */
/* Linha de botões: à direita no computador, largura total no celular, */
/* rótulo sem quebrar em duas linhas.                                  */
/* ------------------------------------------------------------------ */
body.fi-panel-seller .v138-conta__acoes,
body.fi-panel-sellerapp .v138-conta__acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

body.fi-panel-seller .v138-conta__acoes .fi-btn,
body.fi-panel-sellerapp .v138-conta__acoes .fi-btn {
    min-height: 44px;
    white-space: nowrap;
}

body.fi-panel-seller .v138-conta__acoes--rodape,
body.fi-panel-sellerapp .v138-conta__acoes--rodape {
    justify-content: space-between;
}

@media (max-width: 639.98px) {
    body.fi-panel-seller .v138-conta__acoes,
    body.fi-panel-sellerapp .v138-conta__acoes {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    body.fi-panel-seller .v138-conta__acoes > *,
    body.fi-panel-sellerapp .v138-conta__acoes > * {
        width: 100%;
        justify-content: center;
    }
}

/* ------------------------------------------------------------------ */
/* Cartões que são links (Suporte): retorno ao toque em escala curta,  */
/* sem o hover:scale que grudava no iPhone.                           */
/* ------------------------------------------------------------------ */
body.fi-panel-seller .v138-conta__cartao,
body.fi-panel-sellerapp .v138-conta__cartao {
    display: block;
    min-width: 0;
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), border-color 220ms cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color: transparent;
}

body.fi-panel-seller .v138-conta__cartao:active,
body.fi-panel-sellerapp .v138-conta__cartao:active {
    transform: scale(0.98);
}

/* ------------------------------------------------------------------ */
/* V138 · peças comuns das telas da frente: painel, aviso, selo, valor */
/* em Geist Mono. Iguais no site e no aplicativo, sem depender de      */
/* classe do Tailwind que o bundle do site não tem.                    */
/* ------------------------------------------------------------------ */
body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-c-painel {
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--v138-linha);
    border-radius: 16px;
    background: var(--v138-superficie);
}

body.fi-panel-sellerapp .v138-c-painel {
    padding: 16px;
}

/* Aviso informativo (o âmbar ficava para alerta de verdade). */
body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-c-aviso {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid rgba(138, 72, 245, 0.28);
    border-radius: 14px;
    background: rgba(138, 72, 245, 0.07);
    color: var(--v138-texto);
    font-size: 0.875rem;
    line-height: 1.6;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-c-aviso > .v138-c-aviso__icone {
    display: inline-flex;
    flex: none;
    margin-top: 1px;
    color: #b591f2;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-c-aviso p {
    margin: 0;
    min-width: 0;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-c-aviso strong {
    color: #fff;
    font-weight: 600;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-c-aviso a {
    color: #cdb6ff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Selo de situação numa linha, sem quebrar. */
body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-c-selo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(169, 159, 196, 0.12);
    box-shadow: inset 0 0 0 1px rgba(169, 159, 196, 0.2);
    color: #c9c2db;
    font: 600 12px/1 var(--v138-sans);
    letter-spacing: 0;
    white-space: nowrap;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-c-selo--ok {
    background: rgba(126, 240, 192, 0.1);
    box-shadow: inset 0 0 0 1px rgba(126, 240, 192, 0.26);
    color: #7ef0c0;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-c-selo--ouro {
    background: rgba(226, 194, 122, 0.1);
    box-shadow: inset 0 0 0 1px rgba(226, 194, 122, 0.28);
    color: #e2c27a;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-c-selo--erro {
    background: rgba(242, 139, 130, 0.1);
    box-shadow: inset 0 0 0 1px rgba(242, 139, 130, 0.28);
    color: #f28b82;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-c-selo--roxo {
    background: rgba(138, 72, 245, 0.16);
    box-shadow: inset 0 0 0 1px rgba(138, 72, 245, 0.34);
    color: #cdb6ff;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-c-selo__ponto {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 999px;
    background: currentColor;
}

/* Valores, códigos e endereços em Geist Mono com algarismos tabulares. */
body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-c-mono {
    font-family: var(--v138-mono) !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

/* Campo de formulário que mostra valor (Perfil da empresa, Volume). */
body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-conta input.v138-c-valor {
    font-family: var(--v138-mono) !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0 !important;
}

/* V138 · campo de número curto (Volume de 0 a 100): no computador ele
   ocupava os 1.000px do cartão; no celular segue a largura toda. */
@media (min-width: 640px) {
    body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-conta .fi-input-wrp.v138-campo-curto {
        max-width: 200px;
    }
}

/* Barra de rolagem fina e na cor da marca (blocos de código e tabelas
   que rolam dentro do cartão); a nativa cinza com setas destoava. */
body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-conta :is(pre, .v138-c-rola) {
    scrollbar-width: thin;
    scrollbar-color: rgba(138, 72, 245, 0.5) transparent;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-conta :is(pre, .v138-c-rola)::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-conta :is(pre, .v138-c-rola)::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(138, 72, 245, 0.5);
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-conta :is(pre, .v138-c-rola)::-webkit-scrollbar-track {
    background: transparent;
}

/* ------------------------------------------------------------------ */
/* Documentação da API: nada estica a coluna.                          */
/* ------------------------------------------------------------------ */
body.fi-panel-seller .v138-conta--docs pre,
body.fi-panel-sellerapp .v138-conta--docs pre {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

body.fi-panel-seller .v138-conta--docs a,
body.fi-panel-sellerapp .v138-conta--docs a {
    -webkit-tap-highlight-color: transparent;
}

/* V138 · cartões da Documentação da API: 24px de respiro no site e 16px no
   aplicativo, iguais ao recuo das linhas de atalho. */
body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-docs__cartao {
    min-width: 0;
    padding: 20px 24px;
    border: 1px solid rgba(91, 47, 203, 0.35);
    border-radius: 16px;
    background: rgba(10, 6, 20, 0.6);
}

body.fi-panel-sellerapp .v138-docs__cartao {
    padding: 16px;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-docs__cartao--lista {
    padding-inline: 0 !important;
    padding-bottom: 4px !important;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-docs__titulo-atalhos {
    padding-inline: 24px;
}

body.fi-panel-sellerapp .v138-docs__titulo-atalhos {
    padding-inline: 16px;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-docs__cartao code {
    font-family: var(--v138-mono);
    font-size: 0.92em;
}

/* V138 · meio de pagamento: nome e rota numa coluna, guia à direita; no
   celular o guia desce para a linha de baixo nos dois meios (antes o Pix
   cabia numa linha e o cartão quebrava, cada um de um jeito). */
body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-docs__meio {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 16px;
    min-width: 0;
    padding: 12px 16px;
    border: 1px solid #2a2144;
    border-radius: 12px;
    text-decoration: none;
    transition: border-color 220ms var(--v138-ease), background-color 220ms var(--v138-ease);
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-docs__meio:hover {
    border-color: rgba(138, 72, 245, 0.45);
    background: rgba(138, 72, 245, 0.05);
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-docs__meio-texto {
    display: flex;
    flex: 1 1 220px;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-docs__meio-nome {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-docs__meio-rota {
    color: #a99fc4;
    font: 500 12px/1.5 var(--v138-mono);
    overflow-wrap: anywhere;
}

/* V138 · o guia usa a seta da família, como os atalhos (o sublinhado
   destoava do resto da tela). */
body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-docs__meio-guia {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 4px;
    color: #b591f2;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-docs__meio-guia > svg {
    flex: none;
    transition: transform 220ms var(--v138-ease);
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-docs__meio:hover .v138-docs__meio-guia > svg {
    transform: translateX(2px);
}

/* Atalhos: linhas de 48px alinhadas ao título do cartão. */
body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-docs__grupo {
    margin: 16px 0 0;
    padding: 0 24px 6px;
    color: #a99fc4;
    font: 500 11px/1.4 var(--v138-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-docs__linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 10px 24px;
    border-top: 1px solid #2a2144;
    color: #e7e2f5;
    font-size: 14px;
    text-decoration: none;
    transition: background-color 200ms var(--v138-ease);
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-docs__linha:hover {
    background: rgba(138, 72, 245, 0.06);
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-docs__linha > span:first-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-docs__linha > .v138-docs__seta {
    display: inline-flex;
    flex: none;
    color: #b591f2;
}

body.fi-panel-sellerapp .v138-docs__grupo,
body.fi-panel-sellerapp .v138-docs__linha {
    padding-inline: 16px;
}

/* ------------------------------------------------------------------ */
/* Aplicativo: títulos das telas do site (KnightWish não existe no     */
/* tema do app e caía em Geist fino) na mesma fonte e peso do app.     */
/* ------------------------------------------------------------------ */
body.fi-panel-sellerapp .v138-conta .font-knightwish {
    font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

body.fi-panel-sellerapp .v138-conta .font-knightwish.text-3xl,
body.fi-panel-sellerapp .v138-conta .font-knightwish.text-2xl {
    font-size: 1.2rem;
}

/* Notificações push: a situação é palavra, não número (a Geist Mono do
   .ta-valor fica para valores). */
body.fi-panel-sellerapp [data-throne-avisos] .ta-card--destaque > .ta-valor {
    font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* ------------------------------------------------------------------ */
/* Aplicativo: tabelas em cartão (o tema desenha a grade de 3 colunas).*/
/* Chave pública, endereço, motivo e aparelho ocupam a linha toda, em  */
/* vez de quebrar em três linhas de 11 caracteres.                     */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    body.fi-panel-sellerapp .v138-conta .fi-ta-table tbody > tr > td.fi-ta-cell.fi-ta-cell-public-key,
    body.fi-panel-sellerapp .v138-conta .fi-ta-table tbody > tr > td.fi-ta-cell.fi-ta-cell-url,
    body.fi-panel-sellerapp .v138-conta .fi-ta-table tbody > tr > td.fi-ta-cell.fi-ta-cell-webhook-url,
    body.fi-panel-sellerapp .v138-conta .fi-ta-table tbody > tr > td.fi-ta-cell.fi-ta-cell-motivo,
    body.fi-panel-sellerapp .v138-conta .fi-ta-table tbody > tr > td.fi-ta-cell.fi-ta-cell-error-message,
    body.fi-panel-sellerapp .v138-conta .fi-ta-table tbody > tr > td.fi-ta-cell.fi-ta-cell-events,
    body.fi-panel-sellerapp .v138-conta .fi-ta-table tbody > tr > td.fi-ta-cell[class*='-cell-properties'],
    body.fi-panel-sellerapp .fi-resource-team-members .fi-ta-table tbody > tr > td.fi-ta-cell.fi-ta-cell-email {
        grid-column: 1 / -1 !important;
    }

    /* Seletor de colunas não faz sentido no cartão do celular. */
    body.fi-panel-sellerapp .v138-conta .fi-ta-col-manager-dropdown {
        display: none !important;
    }
}

/* ------------------------------------------------------------------ */
/* Webhooks: o botão "Novo webhook" foi para o cabeçalho da página; no */
/* celular a barra da tabela ficava só com o seletor de colunas.       */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    body.fi-panel-seller .v138-conta--webhooks .fi-ta-header-ctn,
    body.fi-panel-sellerapp .v138-conta--webhooks .fi-ta-header-ctn {
        display: none !important;
    }
}

/* ------------------------------------------------------------------ */
/* Site no celular: tabelas empilhadas (stackedOnMobile) de Chaves de  */
/* API, Webhooks, Histórico de webhooks, Meus acessos e Equipe.        */
/* O tema do site força min-width:max-content nas tabelas; aqui a      */
/* tabela empilhada volta a caber na tela.                             */
/* ------------------------------------------------------------------ */
@media (max-width: 639.98px) {
    body.fi-panel-seller .fi-ta-table.fi-ta-table-stacked-on-mobile {
        min-width: 0 !important;
        width: 100% !important;
    }

    body.fi-panel-seller .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr {
        padding: 10px 0 12px;
        border-bottom: 1px solid rgba(138, 72, 245, 0.14);
    }

    body.fi-panel-seller .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell > .fi-ta-cell-label {
        padding-top: 6px;
        font-size: 11px;
        line-height: 1.4;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(169, 159, 196, 0.85);
    }

    body.fi-panel-seller .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell > .fi-ta-cell-content {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    body.fi-panel-seller .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-text-item.fi-font-mono {
        overflow-wrap: anywhere;
        word-break: break-all;
    }

    /* Ações do registro numa linha própria, com alvo de toque decente. */
    body.fi-panel-seller .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell .fi-ta-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px 16px;
        padding-top: 8px;
    }

    body.fi-panel-seller .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell .fi-ta-actions .fi-link,
    body.fi-panel-seller .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell .fi-ta-actions .fi-btn {
        min-height: 40px;
    }
}

/* ------------------------------------------------------------------ */
/* V138 · tabelas do site nas telas da frente (Chaves de API, Webhooks, */
/* Histórico de webhooks, Meus acessos e Equipe).                      */
/* ------------------------------------------------------------------ */

/* Chave, endereço e IP em Geist Mono: o tema do site punha Geist com
   !important no .fi-ta-text e o fontFamily('mono') das colunas sumia. */
body.fi-panel-seller :is(.v138-conta, .fi-resource-team-members) .fi-ta-text.fi-font-mono,
body.fi-panel-seller :is(.v138-conta, .fi-resource-team-members) .fi-ta-text-item.fi-font-mono {
    font-family: var(--v138-mono) !important;
    font-size: 0.84rem !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

@media (min-width: 640px) {
    /* O texto da célula ficava 12px à direita do título da coluna (16px
       da célula + 12px do texto, contra 16px do cabeçalho) e cada coluna
       somava 56px de folga: a tabela de Chaves de API ia até 2148px em
       1440px de tela. Com 4px na célula o texto alinha com o título e as
       colunas padrão cabem. */
    body.fi-panel-seller :is(.v138-conta, .fi-resource-team-members) .fi-ta-table > tbody > tr > td.fi-ta-cell {
        padding-inline: 4px !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-inline: 16px !important;
    }

    body.fi-panel-seller :is(.v138-conta, .fi-resource-team-members) .fi-ta-table > tbody > tr > td.fi-ta-cell .fi-ta-actions {
        gap: 8px;
    }

    /* Chaves de API: "Ver chave secreta" vira o botão do olho, do mesmo
       tamanho do botão de mais ações (o nome fica no tooltip e continua no
       HTML para leitor de tela). Abaixo de 640px, na lista empilhada, o
       rótulo volta a aparecer escrito. */
    body.fi-panel-seller .v138-conta--chaves .fi-ta-table > tbody > tr > td.fi-ta-cell .fi-ta-actions > .fi-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        width: 36px;
        height: 36px;
        padding: 0;
        border: 1px solid rgba(138, 72, 245, 0.34);
        border-radius: 10px;
        font-size: 0 !important;
        line-height: 0;
        transition: background-color 200ms var(--v138-ease), border-color 200ms var(--v138-ease);
    }

    body.fi-panel-seller .v138-conta--chaves .fi-ta-table > tbody > tr > td.fi-ta-cell .fi-ta-actions > .fi-link:hover {
        border-color: rgba(138, 72, 245, 0.6);
        background: rgba(138, 72, 245, 0.12);
    }

    body.fi-panel-seller .v138-conta--chaves .fi-ta-table > tbody > tr > td.fi-ta-cell .fi-ta-actions > .fi-link .fi-icon {
        width: 18px;
        height: 18px;
    }

    /* Endereço, nome e motivo quebram dentro de uma largura máxima em vez
       de esticar a tabela até o fim do texto. */
    body.fi-panel-seller .v138-conta .fi-ta-table > tbody > tr > td.fi-ta-cell:is(.fi-ta-cell-url, .fi-ta-cell-webhook-url) .fi-ta-text-item {
        display: block;
        max-width: 232px;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    body.fi-panel-seller .v138-conta--webhooks .fi-ta-table > tbody > tr > td.fi-ta-cell.fi-ta-cell-label .fi-ta-text-item {
        display: block;
        max-width: 168px;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    body.fi-panel-seller .v138-conta .fi-ta-table > tbody > tr > td.fi-ta-cell.fi-ta-cell-motivo .fi-ta-text-item {
        display: block;
        max-width: 220px;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* V138 · selos das tabelas do site no mesmo desenho das telas de vendas
   (v138-vendas.css): 24px de altura, Geist Mono, sem brilho. O tema dava a
   cada cor um tamanho, e o roxo de "Produção" saía maior e brilhando ao
   lado do verde de "Ativa". */
body.fi-panel-seller :is(.v138-conta, .fi-resource-team-members) td.fi-ta-cell .fi-badge {
    --selo-fundo: rgba(155, 134, 196, 0.08);
    --selo-borda: rgba(155, 134, 196, 0.30);
    --selo-texto: #c3b6e0;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 0 10px !important;
    border-radius: 8px !important;
    border: 1px solid var(--selo-borda) !important;
    background: var(--selo-fundo) !important;
    color: var(--selo-texto) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-family: 'Geist Mono', ui-monospace, monospace !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    white-space: nowrap;
    animation: none !important;
}

body.fi-panel-seller :is(.v138-conta, .fi-resource-team-members) td.fi-ta-cell .fi-badge > * {
    color: inherit !important;
}

body.fi-panel-seller :is(.v138-conta, .fi-resource-team-members) td.fi-ta-cell .fi-badge.fi-color-primary {
    --selo-fundo: rgba(138, 72, 245, 0.16);
    --selo-borda: rgba(168, 107, 255, 0.46);
    --selo-texto: #e4d6ff;
}

body.fi-panel-seller :is(.v138-conta, .fi-resource-team-members) td.fi-ta-cell .fi-badge.fi-color-warning {
    --selo-fundo: rgba(245, 192, 74, 0.10);
    --selo-borda: rgba(245, 192, 74, 0.40);
    --selo-texto: #f5c04a;
}

body.fi-panel-seller :is(.v138-conta, .fi-resource-team-members) td.fi-ta-cell .fi-badge.fi-color-success {
    --selo-fundo: rgba(126, 240, 192, 0.08);
    --selo-borda: rgba(126, 240, 192, 0.34);
    --selo-texto: #7ef0c0;
}

body.fi-panel-seller :is(.v138-conta, .fi-resource-team-members) td.fi-ta-cell .fi-badge.fi-color-danger {
    --selo-fundo: rgba(242, 139, 130, 0.08);
    --selo-borda: rgba(242, 139, 130, 0.36);
    --selo-texto: #f28b82;
}

/* Selo "0" no botão de filtros sem filtro nenhum: parecia aviso pendente
   e, sem a busca ao lado, saía cortado pela borda do cartão. A faixa
   "Filtros ativos" só existe quando há filtro aplicado, então o selo só
   aparece junto com ela. V138 · vale também no aplicativo: o tema de lá
   só esconde o selo zerado, e o filtro padrão de Chaves de API (que não
   conta como filtro aplicado) deixava o selo "1" no botão. */
body:is(.fi-panel-seller, .fi-panel-sellerapp) :is(.v138-conta, .fi-resource-team-members) .fi-ta-ctn:not(:has(.fi-ta-filter-indicators)) .fi-ta-filters-dropdown .fi-icon-btn-badge-ctn {
    display: none !important;
}

/* V138 · lista vazia: some a linha de títulos das colunas (não há coluna
   para ler) e, quando a barra não teria uso, some a barra também. A barra
   fica sempre que há filtro aplicado ou texto na busca, para a pessoa
   conseguir desfazer. Chaves de API mantém a barra (o filtro padrão esconde
   as revogadas e é por ali que elas aparecem). */
body:is(.fi-panel-seller, .fi-panel-sellerapp) :is(.v138-conta, .fi-resource-team-members) .fi-ta-ctn:has(.fi-ta-empty-state) .fi-ta-table {
    display: none !important;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-conta--webhooks .fi-ta-ctn:has(.fi-ta-empty-state) .fi-ta-header-ctn,
body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-conta--entregas .fi-ta-ctn:has(.fi-ta-empty-state):not(:has(.fi-ta-filter-indicators)) .fi-ta-header-ctn,
body:is(.fi-panel-seller, .fi-panel-sellerapp) .fi-resource-team-members .fi-ta-ctn:has(.fi-ta-empty-state):has(.fi-ta-search-field input:placeholder-shown) .fi-ta-header-ctn {
    display: none !important;
}

/* Meus acessos: o aviso fala "da lista"; com a lista vazia ele sobrava. */
body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-conta--acessos:has(.fi-ta-empty-state) > .v138-c-aviso {
    display: none !important;
}

/* Aplicativo, Equipe: só a busca na barra da tabela, e ela ficava com
   300px empurrada para a direita, desalinhada do cartão. */
body.fi-panel-sellerapp .fi-resource-team-members .fi-ta-header-toolbar > .fi-ta-actions:not(:has(*)) {
    display: none !important;
}

body.fi-panel-sellerapp .fi-resource-team-members .fi-ta-header-toolbar > div:not(.fi-ta-actions) {
    flex: 1 1 auto;
    min-width: 0;
}

body.fi-panel-sellerapp .fi-resource-team-members .fi-ta-header-toolbar .fi-ta-search-field {
    width: 100%;
    max-width: none;
}

/* ------------------------------------------------------------------ */
/* V138 · formulários das telas da frente.                             */
/* ------------------------------------------------------------------ */

/* Site: a seta do select sumia (o tema troca o fundo inteiro com
   !important e leva junto a imagem da seta do Filament). */
body.fi-panel-seller .v138-conta select.fi-select-input {
    padding-inline-end: 40px !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 12px center !important;
    background-repeat: no-repeat !important;
    background-size: 18px 18px !important;
    cursor: pointer;
}

/* Campo só de leitura parecia editável (mesma borda, mesmo fundo e o mesmo
   branco do texto). V138 · fundo e borda mais apagados e texto em lilás
   acinzentado, no site e no aplicativo. */
body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-conta .fi-input-wrp.fi-disabled {
    border: 1px dashed rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.02) !important;
    box-shadow: none !important;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-conta .fi-input-wrp.fi-disabled .fi-input {
    color: #8d84a6 !important;
    -webkit-text-fill-color: #8d84a6 !important;
    background: transparent !important;
    border: 0 !important;
    opacity: 1;
    cursor: default;
}

/* Perfil da empresa, taxas: são dados, não campos. Sem a caixa do campo,
   o valor fica em Geist Mono branca alinhada ao rótulo, como uma lista de
   rótulo e valor. */
body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-conta .v138-perfil-taxas .fi-input-wrp.fi-disabled {
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-conta .v138-perfil-taxas .fi-input-wrp.fi-disabled .fi-input {
    padding-inline: 0 !important;
    color: #f2eefb !important;
    -webkit-text-fill-color: #f2eefb !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    white-space: nowrap;
}

/* No celular, cada taxa numa linha só: rótulo à esquerda, valor à direita,
   com divisória (empilhadas, as três ocupavam quase uma tela). */
@media (max-width: 639.98px) {
    body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-conta .v138-perfil-taxas .fi-section-content {
        row-gap: 0 !important;
    }

    body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-conta .v138-perfil-taxas .fi-grid-col + .fi-grid-col {
        border-top: 1px solid rgba(138, 72, 245, 0.14);
    }

    body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-conta .v138-perfil-taxas .fi-fo-field {
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 48px;
    }

    body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-conta .v138-perfil-taxas .fi-fo-field-label-col {
        flex: 1 1 auto;
        min-width: 0;
    }

    body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-conta .v138-perfil-taxas .fi-fo-field-content-col {
        flex: 0 0 auto;
        max-width: 55%;
    }

    body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-conta .v138-perfil-taxas .fi-input-wrp.fi-disabled .fi-input {
        width: 12ch;
        text-align: right;
    }
}

/* Perfil da empresa: a tabela de chave e valor rolava de lado no
   celular, com a alça de reordenar sobrando. Agora as duas colunas
   dividem a largura e o lixo fica numa coluna fixa. */
body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-conta--perfil .fi-fo-key-value .fi-fo-key-value-table-ctn {
    overflow-x: visible !important;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-conta--perfil .fi-fo-key-value .fi-fo-key-value-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-conta--perfil .fi-fo-key-value .fi-fo-key-value-table :is(th, td).fi-has-action {
    width: 44px !important;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-conta--perfil .fi-fo-key-value .fi-fo-key-value-table td .fi-input {
    width: 100%;
    min-width: 0 !important;
}

/* Perfil do usuário: era a única tela sem cartão (campos soltos no fundo). */
body:is(.fi-panel-seller, .fi-panel-sellerapp) .fi-page[wire\:name="Filament\\Auth\\Pages\\EditProfile"] .fi-sc-form {
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--v138-linha);
    border-radius: 16px;
    background: var(--v138-superficie);
}

body.fi-panel-seller .fi-page[wire\:name="Filament\\Auth\\Pages\\EditProfile"] .fi-sc-form {
    max-width: 880px;
}

body.fi-panel-sellerapp .fi-page[wire\:name="Filament\\Auth\\Pages\\EditProfile"] .fi-sc-form {
    padding: 16px;
}

/* ------------------------------------------------------------------ */
/* V138 · Suporte: perguntas frequentes sem o triângulo do Safari e    */
/* com a seta girando ao abrir. Os dois bundles já têm o               */
/* group-open:rotate-180, que usa a propriedade rotate: aqui vai a     */
/* mesma propriedade (com transform os dois somavam 360° e a seta      */
/* aberta voltava a apontar para baixo).                               */
/* ------------------------------------------------------------------ */
body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-conta--suporte details > summary {
    list-style: none;
    min-height: 56px;
    -webkit-tap-highlight-color: transparent;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-conta--suporte details > summary::-webkit-details-marker {
    display: none;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-conta--suporte details > summary .fi-icon {
    transform: none;
    transition: rotate 320ms var(--v138-ease);
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-conta--suporte details[open] > summary .fi-icon {
    rotate: 180deg;
}

/* V138 · as perguntas viram uma lista com divisórias dentro do cartão: eram
   caixas com borda e fundo dentro de outra caixa, e no celular sobravam
   uns 200px para o texto de cada pergunta. */
body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-conta--suporte .v138-suporte__faq > h2 {
    margin-bottom: 8px !important;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-conta--suporte .v138-suporte__lista > * {
    margin-block: 0 !important;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-conta--suporte .v138-suporte__item {
    border: 0 !important;
    border-top: 1px solid rgba(138, 72, 245, 0.16) !important;
    border-radius: 0 !important;
    background: none !important;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-conta--suporte .v138-suporte__item:first-child {
    border-top: 0 !important;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-conta--suporte .v138-suporte__pergunta {
    padding: 16px 0 !important;
    background: none !important;
    line-height: 1.4;
    transition: color 200ms var(--v138-ease);
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-conta--suporte .v138-suporte__pergunta:hover {
    color: #cdb6ff !important;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-conta--suporte .v138-suporte__resposta {
    max-width: 72ch;
    padding: 0 32px 18px 0 !important;
}

body.fi-panel-sellerapp .v138-conta--suporte :is(.v138-suporte__cartao, .v138-suporte__faq) {
    padding: 16px !important;
}

body.fi-panel-sellerapp .v138-conta--suporte .v138-suporte__resposta {
    padding-right: 0 !important;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-conta--suporte .v138-suporte__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #cdb6ff;
    font-size: 14px;
    font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* V138 · Excluir conta: ícone e título na mesma linha e o texto na    */
/* largura toda (no celular a coluna do ícone deixava o texto com 230px*/
/* e cada item da lista em 4 linhas).                                  */
/* ------------------------------------------------------------------ */
body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-exclusao__cabeca {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-exclusao__icone {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(242, 139, 130, 0.12);
    box-shadow: inset 0 0 0 1px rgba(242, 139, 130, 0.24);
    color: #f28b82;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-exclusao__titulo {
    margin: 0;
    color: #fff;
    font: 600 1.15rem/1.3 var(--v138-sans);
    letter-spacing: -0.01em;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-exclusao__texto {
    margin: 16px 0 0;
    color: var(--v138-mudo);
    font-size: 0.875rem;
    line-height: 1.6;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-exclusao__lista {
    display: grid;
    gap: 8px;
    margin: 12px 0 0;
    padding-left: 20px;
    list-style: disc;
    color: var(--v138-texto);
    font-size: 0.875rem;
    line-height: 1.55;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-exclusao__lista li::marker {
    color: #b591f2;
}

/* ------------------------------------------------------------------ */
/* V138 · Integrações: cartões da mesma altura com o botão no pé, selo */
/* e números na paleta (no site o fundo do selo não existia no bundle).*/
/* ------------------------------------------------------------------ */
body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-integ__cartao {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    position: relative;
    overflow: hidden;
    padding: 24px;
    border: 1px solid var(--v138-linha);
    border-radius: 16px;
    background: var(--v138-superficie);
}

body.fi-panel-sellerapp .v138-integ__cartao {
    padding: 16px;
    gap: 16px;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-integ__cartao::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(138, 72, 245, 0.6), transparent);
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-integ__topo {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-integ__nome {
    margin: 0 0 8px;
    color: #fff;
    font: 600 1.15rem/1.25 var(--v138-sans);
    letter-spacing: -0.01em;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-integ__descricao {
    margin: 8px 0 0;
    color: var(--v138-mudo);
    font-size: 0.875rem;
    line-height: 1.5;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-integ__numeros {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-integ__numero {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--v138-linha);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-integ__valor {
    color: #fff;
    font: 600 1.05rem/1.2 var(--v138-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-integ__valor--erro {
    color: #f28b82;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-integ__rotulo {
    color: var(--v138-mudo);
    font: 500 10px/1.3 var(--v138-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-integ__falha {
    padding: 10px 12px;
    border: 1px solid rgba(242, 139, 130, 0.26);
    border-radius: 12px;
    background: rgba(242, 139, 130, 0.06);
    color: #f5c2bd;
    font-size: 0.8rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-integ__botao {
    margin-top: auto;
}

/* Tabela de envios recentes (HTML próprio, não é tabela do Filament). */
body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-integ__tabela-ctn {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--v138-linha);
    border-radius: 14px;
    background: var(--v138-superficie);
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-integ__tabela {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 0.875rem;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-integ__tabela th {
    padding: 12px 16px;
    border-bottom: 1px solid var(--v138-linha);
    color: var(--v138-mudo);
    font: 500 10.5px/1.3 var(--v138-mono);
    letter-spacing: 0.12em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-integ__tabela td {
    padding: 12px 16px;
    border-top: 1px solid rgba(138, 72, 245, 0.1);
    color: var(--v138-texto);
    white-space: nowrap;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-integ__tabela tbody tr:first-child td {
    border-top: 0;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-integ__tabela td.v138-integ__mudo {
    color: var(--v138-mudo);
}

/* ------------------------------------------------------------------ */
/* V147 · desafio do 2FA (quatro painéis): nada do painel aparece      */
/* antes do segundo fator. O <style> da rota (PanelChrome::desafioHead)*/
/* resolve a primeira pintura; esta regra, pelo gancho da própria view */
/* (.throne-2fa-desafio), cobre a navegação dentro do painel, em que o */
/* head pode não receber o <style> novo. O conteúdo não espera o       */
/* Alpine: o Filament o esconde até a barra lateral assentar, e aqui   */
/* não há barra.                                                       */
/* ------------------------------------------------------------------ */
body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp):has(.throne-2fa-desafio) :is(.fi-sidebar, .fi-topbar, nav.fi-topbar, .ta-abas, .fi-sidebar-close-overlay) {
    display: none !important;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp):has(.throne-2fa-desafio) :is(.fi-main-ctn, .fi-main) {
    margin-inline-start: 0 !important;
    padding-top: 24px;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp):has(.throne-2fa-desafio) .fi-main-ctn {
    opacity: 1 !important;
}

/* ------------------------------------------------------------------ */
/* V138 · Autenticação em 2 fatores (quatro painéis). A tela usava     */
/* degradê próprio, caixa alta, hover:scale, ícone pulsando, verde em  */
/* toda a borda e classes do Tailwind que nem todo bundle tem.         */
/* ------------------------------------------------------------------ */
body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
    color: var(--v138-texto);
    font-family: var(--v138-sans);
}

body:is(.fi-panel-sellerapp, .fi-panel-adminapp) .v138-2fa {
    gap: 14px;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__grade {
    display: grid;
    gap: inherit;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__cartao {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--v138-linha);
    border-radius: 16px;
    background: var(--v138-superficie);
}

body:is(.fi-panel-sellerapp, .fi-panel-adminapp) .v138-2fa__cartao {
    padding: 18px 16px;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__cartao--intro {
    align-items: center;
    gap: 16px;
    padding: 40px 24px;
    text-align: center;
}

body:is(.fi-panel-sellerapp, .fi-panel-adminapp) .v138-2fa__cartao--intro {
    padding: 28px 16px;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__icone {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(138, 72, 245, 0.14);
    box-shadow: inset 0 0 0 1px var(--v138-linha-forte);
    color: #c9adff;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__icone--ok {
    background: rgba(126, 240, 192, 0.1);
    box-shadow: inset 0 0 0 1px rgba(126, 240, 192, 0.26);
    color: var(--v138-verde);
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__cabeca {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__cabeca > div {
    min-width: 0;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__titulo {
    margin: 0;
    color: #fff;
    font: 600 1.25rem/1.25 var(--v138-sans);
    letter-spacing: -0.015em;
}

/* V138 · título "2FA ligado" com o selo verde pequeno ao lado: o verde
   fica só no selo, o ícone segue no tom da marca. */
body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__titulo-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    min-width: 0;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__selo {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(126, 240, 192, 0.08);
    box-shadow: inset 0 0 0 1px rgba(126, 240, 192, 0.24);
    color: #8fe3b0;
    font: 600 12px/1 var(--v138-sans);
    letter-spacing: 0;
    white-space: nowrap;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__selo-ponto {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 6px rgba(126, 240, 192, 0.55);
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__selo-data {
    font-family: var(--v138-mono);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__subtitulo {
    margin: 0;
    color: #fff;
    font: 600 1.02rem/1.35 var(--v138-sans);
    letter-spacing: -0.01em;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__texto {
    margin: 0;
    max-width: 62ch;
    color: var(--v138-mudo);
    font-size: 0.875rem;
    line-height: 1.6;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__cartao--intro .v138-2fa__texto {
    margin-inline: auto;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__etapa {
    margin: 0;
    color: #b591f2;
    font: 500 11px/1.3 var(--v138-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__passos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: passo2fa;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__passos li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    border: 1px solid var(--v138-linha);
    border-radius: 999px;
    color: var(--v138-texto);
    font-size: 0.8rem;
    counter-increment: passo2fa;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__passos li::before {
    content: counter(passo2fa);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(138, 72, 245, 0.18);
    color: #cdb6ff;
    font: 600 11px/1 var(--v138-mono);
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__qr {
    align-self: center;
    margin: 8px 0;
    padding: 14px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 40px -18px rgba(138, 72, 245, 0.55);
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__qr img {
    display: block;
    width: 208px;
    height: 208px;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__caixa {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--v138-linha);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__rotulo {
    margin: 0;
    color: var(--v138-mudo);
    font: 500 11px/1.3 var(--v138-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__segredo {
    color: #e7dcff;
    font: 500 0.9rem/1.6 var(--v138-mono);
    letter-spacing: 0.04em;
    overflow-wrap: anywhere;
    user-select: all;
    -webkit-user-select: all;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__codigos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__codigos code {
    display: block;
    padding: 8px 6px;
    border: 1px solid rgba(226, 194, 122, 0.24);
    border-radius: 10px;
    background: rgba(226, 194, 122, 0.06);
    color: #ecd9a8;
    font: 500 0.875rem/1.3 var(--v138-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    text-align: center;
    white-space: nowrap;
    user-select: all;
    -webkit-user-select: all;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__blocos {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    margin-top: 8px;
    padding-top: 20px;
    border-top: 1px solid var(--v138-linha);
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__bloco {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* Campo do código + botão: o campo ocupa o que sobra, o botão não quebra. */
body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__linha--centro {
    justify-content: center;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) input.v138-2fa__campo {
    flex: 1 1 160px;
    min-width: 0;
    max-width: 240px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--v138-linha-forte) !important;
    border-radius: 12px !important;
    background: rgba(0, 0, 0, 0.35) !important;
    color: #fff !important;
    font: 500 1rem/1 var(--v138-mono) !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.18em !important;
    text-align: center;
    outline: none;
    box-shadow: none;
    transition: border-color 200ms var(--v138-ease), box-shadow 200ms var(--v138-ease);
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) input.v138-2fa__campo--grande {
    max-width: 220px;
    height: 52px;
    font-size: 1.35rem !important;
    letter-spacing: 0.32em !important;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) input.v138-2fa__campo::placeholder {
    color: rgba(169, 159, 196, 0.38);
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) input.v138-2fa__campo:focus {
    border-color: rgba(138, 72, 245, 0.85) !important;
    box-shadow: 0 0 0 3px rgba(138, 72, 245, 0.22) !important;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__botao {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 16px;
    /* V138 · cinza neutro, como o botão gray do Filament (o roxo tingido
       parecia uma ação principal ao lado do campo). */
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--v138-texto);
    font: 600 0.875rem/1 var(--v138-sans);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 200ms var(--v138-ease), background-color 200ms var(--v138-ease), transform 200ms var(--v138-ease);
    -webkit-tap-highlight-color: transparent;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__botao:hover {
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.07);
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__botao:active {
    transform: scale(0.98);
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__botao[disabled] {
    opacity: 0.6;
    cursor: wait;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__botao--perigo {
    border-color: rgba(242, 139, 130, 0.38);
    background: rgba(242, 139, 130, 0.08);
    color: #f5b1aa;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__botao--perigo:hover {
    border-color: rgba(242, 139, 130, 0.65);
    background: rgba(242, 139, 130, 0.12);
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__botao--texto {
    min-height: 40px;
    padding: 0;
    border: 0;
    background: none;
    color: #cdb6ff;
    font-weight: 600;
}

body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__aviso {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid rgba(226, 194, 122, 0.26);
    border-radius: 12px;
    background: rgba(226, 194, 122, 0.06);
    color: #ecd9a8;
    font-size: 0.82rem;
    line-height: 1.5;
}

@media (max-width: 479.98px) {
    body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__cabeca {
        align-items: flex-start;
    }

    body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) input.v138-2fa__campo {
        max-width: none;
    }

    /* V138 · no celular o campo e o botão ficam um embaixo do outro nos dois
       blocos (antes "Gerar códigos novos" descia e "Desligar o 2FA" ficava ao
       lado do campo, cada bloco de um jeito). */
    body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__linha--acao {
        flex-direction: column;
        align-items: stretch;
    }

    body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__linha--acao > input.v138-2fa__campo {
        flex: none;
        width: 100%;
    }

    body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__linha--acao > .v138-2fa__botao {
        width: 100%;
    }

    body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) .v138-2fa__cartao--intro .fi-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:is(.fi-panel-seller, .fi-panel-sellerapp, .fi-panel-admin, .fi-panel-adminapp) :is(.v138-2fa__botao, input.v138-2fa__campo),
    body:is(.fi-panel-seller, .fi-panel-sellerapp) :is(.v138-docs__meio, .v138-docs__linha, .v138-docs__meio-guia > svg, .v138-suporte__pergunta),
    body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-conta--suporte details > summary .fi-icon {
        transition: none !important;
    }

    body:is(.fi-panel-seller, .fi-panel-sellerapp) .v138-docs__meio:hover .v138-docs__meio-guia > svg {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.fi-panel-seller .v138-conta__cartao,
    body.fi-panel-sellerapp .v138-conta__cartao {
        transition: none;
    }

    body.fi-panel-seller .v138-conta__cartao:active,
    body.fi-panel-sellerapp .v138-conta__cartao:active {
        transform: none;
    }
}