/* ============================================================================
   TEMA XPROJECT — a cópia fiel do design system do analyzer de referência.
   ============================================================================

   Catálogo e doutrina: `app/Libraries/TemaVisual.php`.
   Ativo só quando o `<html>` tem `data-tema="xproject"` (o dono escolheu no admin).

   ── DE ONDE VEM CADA NÚMERO ────────────────────────────────────────────────
   Nada aqui foi estimado a olho. Os tokens saíram do CSS servido pela própria
   plataforma de referência (medido em 12/10/2026, `assets/index-BVWuPkdR.css`),
   que declara o design system dela em variáveis:

       --color-accent: 212 167 44        → #d4a72c   (o dourado da marca)
       --color-accent-light: 227 198 118 → #e3c676
       --color-accent-dark: 138 109 29   → #8a6d1d
       --color-canvas: 4 9 15            → #04090f   (o fundo — azul-petróleo, NÃO preto puro)
       --color-canvas-dark: 5 6 9        → #050609
       --color-card: 7 16 26             → #07101a
       --color-body: 10 11 14            → #0a0b0e
       .bg-panel     → rgb(18 20 26)     → #12141a
       .bg-panel-alt → rgb(26 29 36)     → #1a1d24

   E a escala de tintas (`.text-ink-*`), que é o que dá a hierarquia de leitura:
       ink-900 #f2f3f5 · ink-600 #c5cad3 · ink-400 #8b93a1 · ink-300 #6b7280
       ink-200 #5b6272 · ink-100 #454b57 · ink-50 #3a3f49

   🔎 O achado que um olho desatento erraria: o fundo NÃO é `#000`. É `#04090f`,
   um azul-petróleo quase preto. Preto puro chapa a tela; esse azul dá a
   profundidade que faz o dourado parecer quente. Copiar "preto" teria produzido
   uma imitação pior que o original.

   ── A DIFERENÇA PARA O `onix` ──────────────────────────────────────────────
   O `onix` é a leitura AUTORAL dessa linguagem (preto com calor, ouro imperial).
   Este é a CÓPIA, com os valores do original. Os dois convivem no catálogo
   porque servem a decisões diferentes: parecer-se com o líder do nicho, ou ter
   cara própria no mesmo idioma.

   ── O QUE ESTE ARQUIVO PODE E NÃO PODE ─────────────────────────────────────
   PODE: redefinir superfície, texto, borda, acento, raio e sombra — as variáveis
   que a casca já consome (`--flow-*`, `--nx-*`), mais as peças estruturais que
   nasceram com cor cravada.

   🔒 NÃO PODE tocar nos tokens de SINAL — `--nx-green*`, `--nx-red*`,
   `--nx-amber*` e os `*-rgb` deles. Ganho é verde, perda é vermelha, atenção é
   âmbar, em todo tema. `tests/TemaVisualTest.php` reprova quem tentar.

   🪤 E não estraga plataforma sem tema: tudo aqui está sob `[data-tema="xproject"]`,
   então a ausência do atributo devolve a cara de hoje byte a byte.
   ============================================================================ */

/* ── 1. A PALETA (os valores MEDIDOS no original) ─────────────────────────── */
[data-tema="xproject"] {
    --xp-canvas:      #04090f;   /* o fundo da página */
    --xp-canvas-dark: #050609;   /* o degrau mais fundo */
    --xp-body:        #0a0b0e;
    --xp-card:        #07101a;   /* o cartão */
    --xp-panel:       #12141a;   /* painel */
    --xp-panel-alt:   #1a1d24;   /* painel elevado / cabeçalho de tabela */

    --xp-ouro:        #d4a72c;
    --xp-ouro-claro:  #e3c676;
    --xp-ouro-fundo:  #8a6d1d;
    --xp-ouro-rgb:    212, 167, 44;

    /* A escala de tintas do original — é ela que dá a hierarquia de leitura. */
    --xp-ink-900: #f2f3f5;
    --xp-ink-600: #c5cad3;
    --xp-ink-400: #8b93a1;
    --xp-ink-300: #6b7280;
    --xp-ink-200: #5b6272;
    --xp-ink-100: #454b57;
    --xp-ink-50:  #3a3f49;

    --xp-borda:       rgba(212, 167, 44, 0.22);
    --xp-borda-forte: rgba(212, 167, 44, 0.45);
    --xp-linha:       rgba(255, 255, 255, 0.08);

    /* Raio medido no original: 0.75rem é o comum; 1rem nos blocos maiores. */
    --xp-raio:       0.75rem;
    --xp-raio-grande:1rem;
}

/* ── 2. A CASCA (as variáveis que TODAS as telas já consomem) ─────────────── */
html[data-tema="xproject"] {
    --flow-primary:      var(--xp-ouro);
    --flow-primary-rgb:  var(--xp-ouro-rgb);
    --flow-secondary:    var(--xp-ouro-claro);
    --flow-secondary-rgb:227, 198, 118;
    --flow-hover:        var(--xp-ouro-claro);
    --flow-hover-rgb:    var(--xp-ouro-rgb);

    --flow-bg-page:      var(--xp-canvas);
    --flow-bg-panel:     var(--xp-panel);
    --flow-bg-card:      var(--xp-card);
    --flow-bg-card-rgb:  7, 16, 26;

    --flow-text-main:    var(--xp-ink-900);
    --flow-text-muted:   var(--xp-ink-400);
    --flow-border:       var(--xp-borda);
    --flow-glow:         rgba(var(--xp-ouro-rgb), 0.22);

    /* Tokens do SPA (trader/IA). Os de SINAL ficam de fora de propósito. */
    --nx-bg-deep:   var(--xp-canvas-dark);
    --nx-bg-panel:  var(--xp-panel);
    --nx-bg-card:   var(--xp-card);
    --nx-border:    var(--xp-borda);
    --nx-text:      var(--xp-ink-900);
    --nx-text-muted:var(--xp-ink-400);
    --nx-cyan:      var(--xp-ouro);
    --nx-cyan-soft: var(--xp-ouro-claro);
    --nx-cyan-pale: #f6e8c4;
    --nx-cyan-deep: var(--xp-ouro-fundo);
    --nx-cyan-rgb:  var(--xp-ouro-rgb);
    --nx-magenta:   var(--xp-ouro-claro);
    --nx-purple:    var(--xp-ouro-claro);
    --nx-slate:     var(--xp-ink-300);
    --nx-gold:      var(--xp-ouro);

    /* 🔑 AS VARIÁVEIS DE MARCA QUE SÓ A CASCA TINHA (medido 12/10/2026).
       `app/Views/nexus/index.php` emite `--color1..6` a partir do config, mas as views
       STANDALONE do SPA (`digitos_app.php`, `trader_nexus_app.php`) são documentos próprios e
       não herdam nada dela. Como o bundle declara `--nx-cyan: var(--color1, #00f2ff)` e usa
       `var(--color1)`/`var(--color1-rgb)` em 12 regras, ali tudo caía no FALLBACK ciano — era
       exatamente a "cara de xprobots" que sobrava no miolo do trader depois do tema aplicado.
       Defini-las aqui cura todas as telas de uma vez e não toca em PHP nenhum.

       🔒 Só as de MARCA. As de SINAL do bundle (`--color-error`, `--color-success`,
       `--color-warning` e os `-rgb` delas) ficam de fora: ganho é verde, perda é vermelha. */
    --color1:     var(--xp-ouro);
    --color1-rgb: var(--xp-ouro-rgb);
    --color2:     var(--xp-ouro-claro);
    --color2-rgb: 227, 198, 118;
    --color-accent:     var(--xp-ouro);
    --color-accent-rgb: var(--xp-ouro-rgb);

    /* 🎨 AS VARIÁVEIS DE ACCENT DO APP-THEME (13/10/2026). O MANUAL-TRADER (/trader) não usa
       `--color1` — ele veste `--accent-color` e família, que o app-theme `default` do bundle
       define em CIANO (#00f2ff). O tema PHP e o app-theme coexistem no mesmo <html> do iframe
       (data-tema=xproject + data-theme=default), e sem isto o trader ficava com o underline, os
       botões e os glows TEAL mesmo com a plataforma dourada — a "cara de xprobots" que sobrava.
       Medido ao vivo na darkbotfree logado: era a única tela de SPA que o tema não alcançava.
       🔒 Só as de ACCENT (destaque dourado). As de SINAL do trader (verde/vermelho de ganho e
       perda, nos botões PAR/ÍMPAR e nos payouts) NÃO entram — mesma regra das de cima. */
    --accent-color:      var(--xp-ouro);
    --accent-glow:       rgba(var(--xp-ouro-rgb), 0.3);
    --accent-bg-low:     rgba(var(--xp-ouro-rgb), 0.05);
    --accent-bg-med:     rgba(var(--xp-ouro-rgb), 0.1);
    --accent-glow-soft:  0 0 10px rgba(var(--xp-ouro-rgb), 0.3);
    --accent-glow-intense: 0 0 25px rgba(var(--xp-ouro-rgb), 0.5);
}

/* ── 3. O FUNDO ────────────────────────────────────────────────────────────
   O original põe um brilho dourado difuso no alto da página sobre o canvas
   azul-petróleo. É o que dá o ar de vitrine sem usar cor chapada.
   (`!important` é a única chave desta porta: a view estampa o fundo antigo com
   `!important` inline — medido em 28/09/2026, no tema royal.) */
[data-tema="xproject"] html,
[data-tema="xproject"] body,
[data-tema="xproject"] .flow-bg,
[data-tema="xproject"] .nx-app {
    background-color: var(--xp-canvas) !important;
    background-image:
        radial-gradient(1200px 540px at 50% -12%, rgba(var(--xp-ouro-rgb), 0.10), transparent 62%),
        radial-gradient(700px 380px at 90% 8%, rgba(var(--xp-ouro-rgb), 0.05), transparent 58%);
    background-attachment: fixed;
    color: var(--xp-ink-900);
}
html[data-tema="xproject"] {
    background-color: var(--xp-canvas) !important;
}

/* ── 4. SUPERFÍCIES ───────────────────────────────────────────────────────
   A assinatura do original: cartão escuro com moldura dourada fina e cantos de
   raio 0.75rem. O fio de luz no topo é o detalhe que o olho registra como
   "caro" sem saber por quê. */
[data-tema="xproject"] .nx-card,
[data-tema="xproject"] .flow-card,
[data-tema="xproject"] .flow-stat-card,
[data-tema="xproject"] .card {
    background: linear-gradient(180deg, var(--xp-card), var(--xp-canvas-dark));
    border: 1px solid var(--xp-borda);
    border-radius: var(--xp-raio);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.58);
    position: relative;
    overflow: hidden;
}
[data-tema="xproject"] .nx-card::before,
[data-tema="xproject"] .flow-card::before,
[data-tema="xproject"] .flow-stat-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--xp-ouro-rgb), 0.6), transparent);
    pointer-events: none;
}
[data-tema="xproject"] .nx-card-header,
[data-tema="xproject"] .nx-card-footer {
    background: transparent;
    border-color: var(--xp-linha);
}
[data-tema="xproject"] .nx-card-title,
[data-tema="xproject"] .flow-title {
    color: var(--xp-ink-900);
    letter-spacing: 0.01em;
}

/* ── 5. CABEÇALHO E RODAPÉ ────────────────────────────────────────────────
   Barra superior em painel escuro com a linha dourada embaixo, como no original. */
[data-tema="xproject"] .nx-header {
    background: linear-gradient(180deg, rgba(18, 20, 26, 0.97), rgba(4, 9, 15, 0.94));
    border-bottom: 1px solid var(--xp-borda);
    backdrop-filter: blur(9px);
}
[data-tema="xproject"] .nx-header::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--xp-ouro-rgb), 0.55), transparent);
}
[data-tema="xproject"] .nx-header-brand,
[data-tema="xproject"] .nx-header-brand-logo {
    color: var(--xp-ouro-claro);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* ── 5.1 O TOPO EM DUAS LINHAS ────────────────────────────────────────────
   A assinatura do original, e a diferença que mais se vê de longe: a marca
   ocupa uma faixa ALTA à esquerda, as ações ficam na mesma linha à direita, e
   o menu desce para uma SEGUNDA linha, centralizado — letreiro de cinema, não
   barra de painel.

   🔒 Tudo aqui é CSS de TEMA, e isso é o ponto: o `nexus_header.php` é o mesmo
   arquivo das 10 plataformas desta skin. Fazer o arranjo no HTML mudaria o topo
   de todas elas; feito aqui, só quem escolheu `tema_visual = xproject` vê. É a
   ordem dele de 12/10/2026 — *"não podemos ficar preso em uma estrutura assim
   que mude tudo em outras plataformas"* — resolvida com `flex-wrap` em vez de
   com uma skin nova.

   `flex-wrap` + `order` bastam porque o cabeçalho já é flex com três filhos na
   ordem certa (marca · menu · ações): só o menu vai para o fim da fila e ganha
   a linha inteira. Zero HTML novo. */
@media (min-width: 992px) {
    [data-tema="xproject"] .nx-header {
        height: auto;
        flex-wrap: wrap;
        align-items: center;
        padding: 0 clamp(1rem, 3vw, 2rem);
        row-gap: 0;
    }
    /* A marca e as ações dividem a 1ª linha; o menu fica com a 2ª inteira. */
    [data-tema="xproject"] .nx-header > div:first-child { order: 1; min-height: 86px; }
    [data-tema="xproject"] .nx-header-right { order: 2; margin-left: auto; min-height: 86px; }
    [data-tema="xproject"] .nx-header-nav {
        order: 3;
        flex: 0 0 100%;
        justify-content: center;
        gap: clamp(0.1rem, 1vw, 0.9rem);
        padding-bottom: 0.45rem;
    }
    /* A logo manda na altura da faixa — é ela que dá o peso da marca no original. */
    [data-tema="xproject"] .nx-header-brand-logo {
        height: clamp(52px, 5.4vw, 72px);
        max-width: 230px;
    }
}

/* A FAIXA DIAGONAL atrás da marca — as lâminas douradas em ângulo do original.
   🪤 `overflow: hidden` + `clip-path`: sem os dois, a lâmina vaza por cima do
   conteúdo da página na primeira rolagem. E o `z-index` nos filhos é
   obrigatório: pseudo-elemento POSICIONADO pinta depois de irmão NÃO
   posicionado, então sem isto a faixa cobriria a própria logo. */
[data-tema="xproject"] .nx-header { overflow: hidden; }
[data-tema="xproject"] .nx-header > * { position: relative; z-index: 1; }
[data-tema="xproject"] .nx-header::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 0;
    width: min(52%, 620px);
    pointer-events: none;
    background:
        linear-gradient(100deg, transparent 0 62%, rgba(var(--xp-ouro-rgb), 0.5) 62% 62.4%, transparent 62.4%),
        linear-gradient(100deg, transparent 0 72%, rgba(var(--xp-ouro-rgb), 0.22) 72% 72.3%, transparent 72.3%),
        linear-gradient(100deg, rgba(var(--xp-ouro-rgb), 0.05) 0 58%, transparent 58%),
        linear-gradient(90deg, rgba(var(--xp-ouro-rgb), 0.07), transparent 88%);
    clip-path: polygon(0 0, 100% 0, calc(100% - 54px) 100%, 0 100%);
}

/* ── 5.2 O MENU DO PC ─────────────────────────────────────────────────────
   🩹 Buraco MEDIDO em 12/10/2026: NENHUM dos 6 temas cobria `.nx-header-link`
   — só `.nx-nav-item`/`.flow-nav-item`, que são outras barras. O item ativo do
   menu do PC ficava com o roxo `rgba(124,77,255,.15)` cravado no
   `nexus-shell.css`, em TODOS os temas, inclusive nos dourados. Era o retângulo
   que ele viu no "INÍCIO".
   Aqui o ativo vira dourado com um traço embaixo, como no original. Os outros
   cinco temas seguem com o roxo: curar lá é mudar a cara de plataforma no ar
   que ninguém pediu — está REPORTADO, não feito. */
[data-tema="xproject"] .nx-header-link {
    color: var(--xp-ink-400);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.74rem;
    font-weight: 600;
    padding: 0.55rem 0.8rem;
    border-radius: 0;
    background: transparent;
}
[data-tema="xproject"] .nx-header-link:hover {
    color: var(--xp-ink-900);
    background: transparent;
}
[data-tema="xproject"] .nx-header-link.is-active {
    color: var(--xp-ouro);
    background: transparent;
    box-shadow: inset 0 -2px 0 var(--xp-ouro);
}

/* ── 5.3 O CANTO DA CONTA ─────────────────────────────────────────────────
   O "Olá, NOME" existe no HTML das 10 plataformas e nasce ESCONDIDO (ver
   `.nx-user-nome` no <style> do `nexus_header.php`). Este tema é o único que o
   acende — por isso o botão redondo de 34px precisa virar pílula aqui. */
[data-tema="xproject"] .nx-user-toggle {
    width: auto;
    height: auto;
    gap: 0.55rem;
    padding: 0.3rem 0.85rem 0.3rem 0.3rem;
    border-radius: 999px;
    line-height: 1.2;
    color: var(--xp-ink-900);
    background: rgba(var(--xp-ouro-rgb), 0.06);
    border-color: rgba(var(--xp-ouro-rgb), 0.3);
    box-shadow: none;
}
[data-tema="xproject"] .nx-user-toggle:hover,
[data-tema="xproject"] .nx-user-toggle:focus,
[data-tema="xproject"] .nx-user.show .nx-user-toggle {
    color: var(--xp-ink-900);
    border-color: rgba(var(--xp-ouro-rgb), 0.6);
    box-shadow: 0 0 14px rgba(var(--xp-ouro-rgb), 0.18);
}
[data-tema="xproject"] .nx-user-nome {
    display: none;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--xp-ink-600);
    white-space: nowrap;
}
[data-tema="xproject"] .nx-user-nome strong {
    color: var(--xp-ink-900);
    font-weight: 700;
    text-transform: uppercase;
}
/* 🪤 Só a partir de 992px: no celular o topo é UMA linha apertada, e um nome
   ali empurraria o sino e o avatar para fora da tela — foi o mesmo cuidado do
   encaixe mobile que ele validou em 12/10. */
@media (min-width: 992px) {
    [data-tema="xproject"] .nx-user-nome { display: inline-flex; align-items: center; gap: 0.3rem; }
}

[data-tema="xproject"] .nx-badge-pro {
    background: linear-gradient(135deg, var(--xp-ouro-claro), var(--xp-ouro) 60%, var(--xp-ouro-fundo));
    color: #1d1403;
    font-weight: 700;
    letter-spacing: 0.08em;
}
[data-tema="xproject"] .nx-badge-online { color: var(--xp-ink-400); }
/* O ponto do "online" é o único verde deste tema, de propósito: ele não é marca, é
   SEMÁFORO — e semáforo dourado não lê como "ligado". Por isso o hex direto, sem
   token: um `--xp-verde` no topo convidaria a espalhar verde pela paleta. */
[data-tema="xproject"] .nx-badge-online strong { color: #3ed9a8; }
[data-tema="xproject"] .nx-footer,
[data-tema="xproject"] .nx-content {
    background: transparent;
    border-color: var(--xp-linha);
}
[data-tema="xproject"] .nx-footer-label { color: var(--xp-ink-300); }
[data-tema="xproject"] .nx-footer-value { color: var(--xp-ink-600); }

/* ── 6. NAVEGAÇÃO ─────────────────────────────────────────────────────────
   O menu do original é caixa alta, espaçado, com o item ativo em dourado e um
   traço embaixo — letreiro, não aba de painel. */
[data-tema="xproject"] .nx-nav-item,
[data-tema="xproject"] .flow-nav-item {
    color: var(--xp-ink-400);
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-size: 0.85em;
    font-weight: 600;
}
[data-tema="xproject"] .nx-nav-item:hover,
[data-tema="xproject"] .flow-nav-item:hover {
    color: var(--xp-ink-900);
    background: rgba(var(--xp-ouro-rgb), 0.07);
}
[data-tema="xproject"] .nx-nav-item.active,
[data-tema="xproject"] .flow-nav-item.active {
    color: var(--xp-ouro);
    background: transparent;
    box-shadow: inset 0 -2px 0 var(--xp-ouro);
}

/* ── 7. BOTÕES ────────────────────────────────────────────────────────────
   O botão principal do original é dourado cheio em degradê, texto escuro,
   caixa alta. É o destino óbvio da tela. */
[data-tema="xproject"] .flow-button,
[data-tema="xproject"] .btn-primary,
[data-tema="xproject"] .nx-btn-primary {
    background: linear-gradient(135deg, var(--xp-ouro-claro), var(--xp-ouro) 58%, var(--xp-ouro-fundo));
    border: none;
    color: #1d1403;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: var(--xp-raio);
    box-shadow: 0 6px 22px rgba(var(--xp-ouro-rgb), 0.28);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
[data-tema="xproject"] .flow-button:hover,
[data-tema="xproject"] .btn-primary:hover,
[data-tema="xproject"] .nx-btn-primary:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(var(--xp-ouro-rgb), 0.38);
    color: #1d1403;
}
[data-tema="xproject"] .btn-outline-primary,
[data-tema="xproject"] .flow-button--ghost {
    border: 1px solid var(--xp-borda-forte);
    color: var(--xp-ouro-claro);
    background: transparent;
    border-radius: var(--xp-raio);
}
[data-tema="xproject"] .btn-outline-primary:hover,
[data-tema="xproject"] .flow-button--ghost:hover {
    background: rgba(var(--xp-ouro-rgb), 0.10);
    color: var(--xp-ouro-claro);
}
/* 🔒 Botões de SINAL seguem o significado, nunca a marca — ver a lei no topo. */
[data-tema="xproject"] .btn-success { background: #1e9e55; border-color: #1e9e55; color: #fff; }
[data-tema="xproject"] .btn-danger  { background: #d13b3b; border-color: #d13b3b; color: #fff; }

/* ── 8. CAMPOS ──────────────────────────────────────────────────────────── */
[data-tema="xproject"] .form-control,
[data-tema="xproject"] .form-select,
[data-tema="xproject"] input[type="text"],
[data-tema="xproject"] input[type="email"],
[data-tema="xproject"] input[type="password"],
[data-tema="xproject"] input[type="number"],
[data-tema="xproject"] select,
[data-tema="xproject"] textarea {
    background: rgba(5, 6, 9, 0.78);
    border: 1px solid var(--xp-linha);
    color: var(--xp-ink-900);
    border-radius: 0.5rem;
}
[data-tema="xproject"] .form-control:focus,
[data-tema="xproject"] .form-select:focus,
[data-tema="xproject"] input:focus,
[data-tema="xproject"] select:focus,
[data-tema="xproject"] textarea:focus {
    background: rgba(5, 6, 9, 0.94);
    border-color: var(--xp-borda-forte);
    box-shadow: 0 0 0 3px rgba(var(--xp-ouro-rgb), 0.15);
    color: var(--xp-ink-900);
    outline: none;
}
[data-tema="xproject"] .form-control::placeholder,
[data-tema="xproject"] textarea::placeholder { color: var(--xp-ink-200); }
[data-tema="xproject"] .form-label,
[data-tema="xproject"] label { color: var(--xp-ink-400); }

/* ── 9. SELOS E NÚMEROS ───────────────────────────────────────────────────
   O original escreve número em IBM Plex Mono — é o que dá o ar de terminal de
   mercado. A família já é carregada pela casca; aqui só a aplicamos onde o
   número importa, com `tabular-nums` para o valor não "tremer" a cada tick. */
[data-tema="xproject"] .flow-badge,
[data-tema="xproject"] .nx-badge-pro,
[data-tema="xproject"] .badge {
    background: rgba(var(--xp-ouro-rgb), 0.12);
    color: var(--xp-ouro-claro);
    border: 1px solid var(--xp-borda);
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.06em;
}
[data-tema="xproject"] .nx-badge-online {
    background: rgba(34, 197, 94, 0.14);   /* SINAL: online é verde, sempre */
    color: #34d17a;
    border: 1px solid rgba(34, 197, 94, 0.32);
}
[data-tema="xproject"] .flow-stat-value,
[data-tema="xproject"] .nx-balance-row,
[data-tema="xproject"] .nx-footer-value {
    font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
}
[data-tema="xproject"] .flow-stat-value { color: var(--xp-ouro-claro); }
[data-tema="xproject"] .flow-stat-label {
    color: var(--xp-ink-300);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.72em;
}

/* ── 10. TIPOGRAFIA ─────────────────────────────────────────────────────── */
[data-tema="xproject"] h1,
[data-tema="xproject"] h2,
[data-tema="xproject"] .flow-title {
    font-weight: 700;
    letter-spacing: -0.01em;
    text-wrap: balance;
}
[data-tema="xproject"] .flow-subtitle,
[data-tema="xproject"] .flow-text-muted { color: var(--xp-ink-400); }
[data-tema="xproject"] .flow-text-main  { color: var(--xp-ink-900); }
[data-tema="xproject"] a { color: var(--xp-ouro-claro); }
[data-tema="xproject"] a:hover { color: var(--xp-ouro); }

/* ── 11. TABELAS E MODAIS ─────────────────────────────────────────────────
   Cabeçalho de tabela no `panel-alt` do original (#1a1d24), com rótulo em
   caixa alta pequena — a fita de cotação do nicho. */
[data-tema="xproject"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--xp-ink-900);
    --bs-table-border-color: var(--xp-linha);
}
[data-tema="xproject"] .table thead th {
    background: var(--xp-panel-alt);
    color: var(--xp-ink-300);
    border-bottom: 1px solid var(--xp-borda);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.7em;
}
[data-tema="xproject"] .modal-content,
[data-tema="xproject"] .flow-termo-modal,
[data-tema="xproject"] .offcanvas,
[data-tema="xproject"] .dropdown-menu {
    background: linear-gradient(180deg, var(--xp-panel), var(--xp-canvas));
    border: 1px solid var(--xp-borda);
    color: var(--xp-ink-900);
    border-radius: var(--xp-raio-grande);
}
[data-tema="xproject"] .modal-header,
[data-tema="xproject"] .modal-footer { border-color: var(--xp-linha); }
[data-tema="xproject"] .dropdown-item { color: var(--xp-ink-400); }
[data-tema="xproject"] .dropdown-item:hover {
    background: rgba(var(--xp-ouro-rgb), 0.10);
    color: var(--xp-ouro-claro);
}

/* ── 12. A PORTA DE ENTRADA (as telas de login) ───────────────────────────
   🎨 O botão "Entrar com a Deriv" fica de fora de propósito: vermelho é a marca
   DA CORRETORA, e repintá-lo de dourado tiraria o reconhecimento instantâneo —
   a mesma razão por que ninguém repinta o botão do Google. */
[data-tema="xproject"] .login-card-container,
[data-tema="xproject"] .lgt2-card,
[data-tema="xproject"] .lgt4-vidro,
[data-tema="xproject"] .lgt5-moldura,
[data-tema="xproject"] .form-host,
[data-tema="xproject"] .lgt-form-host {
    background: linear-gradient(180deg, rgba(18, 20, 26, 0.94), rgba(4, 9, 15, 0.97));
    border: 1px solid var(--xp-borda);
    border-radius: var(--xp-raio-grande);
    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.66);
    backdrop-filter: blur(10px);
}
/* `!important`: a view escreve a cor no style="" do elemento — só folha !important
   alcança. No subtítulo é ACESSIBILIDADE: o cinza cravado da view não lê aqui. */
[data-tema="xproject"] .form-title,
[data-tema="xproject"] .lgt4-marca-titulo {
    color: var(--xp-ink-900) !important;
    font-weight: 700;
    letter-spacing: -0.01em;
}
[data-tema="xproject"] .form-subtitle,
[data-tema="xproject"] .lgt4-marca-texto,
[data-tema="xproject"] .lgt5-mercados-rotulo {
    color: var(--xp-ink-400) !important;
}
/* 🪤 O NOME DA PLATAFORMA NÃO SE PINTA COM `color` (medido 12/10/2026, no ar).
   `.logo-fallback-text` usa o truque do gradiente recortado —
   `background: linear-gradient(135deg,#fff,#2f80ed)` + `-webkit-text-fill-color: transparent` —
   então o `color` do tema é calculado e IGNORADO: quem pinta é o fundo. Era por isso que o nome
   seguia azul numa tela já inteira dourada. Quem troca a cor aqui é o `background-image`. */
[data-tema="xproject"] .logo-fallback-text {
    background-image: linear-gradient(135deg, var(--xp-ouro-claro) 0%, var(--xp-ouro) 55%, var(--xp-ouro-fundo) 100%) !important;
    -webkit-text-fill-color: transparent;
    color: var(--xp-ouro-claro);
    letter-spacing: 0.18em;
    font-weight: 700;
    text-transform: uppercase;
}
[data-tema="xproject"] .btn-modern-link {
    border: 1px solid var(--xp-borda-forte) !important;
    color: var(--xp-ouro-claro) !important;
    background: transparent;
}
[data-tema="xproject"] .btn-modern-link:hover {
    background: rgba(var(--xp-ouro-rgb), 0.10) !important;
    color: var(--xp-ouro-claro) !important;
}
[data-tema="xproject"] .flow-login-lang-link,
[data-tema="xproject"] .flow-nav-lang-link {
    border-color: var(--xp-borda) !important;
    background: rgba(var(--xp-ouro-rgb), 0.07) !important;
    color: var(--xp-ink-400) !important;
}
[data-tema="xproject"] .flow-login-lang-link.is-active,
[data-tema="xproject"] .flow-nav-lang-link.is-active {
    border-color: var(--xp-borda-forte) !important;
    background: rgba(var(--xp-ouro-rgb), 0.17) !important;
    color: var(--xp-ouro-claro) !important;
}
[data-tema="xproject"] .lgt6-anel,
[data-tema="xproject"] .lgt5-ponto,
[data-tema="xproject"] .lgt3-palco {
    border-color: rgba(var(--xp-ouro-rgb), 0.24);
}
[data-tema="xproject"] .lgt6-miolo,
[data-tema="xproject"] .lgt10-miolo {
    background: radial-gradient(circle at 35% 30%, rgba(var(--xp-ouro-rgb), 0.20), transparent 65%);
}
/* 🔒 O aviso de risco é LEI, não decoração: legível e sóbrio, nunca dourado. */
[data-tema="xproject"] .risk-disclaimer-box,
[data-tema="xproject"] .risk-disclaimer-popup,
[data-tema="xproject"] .lgt5-risco {
    background: rgba(5, 6, 9, 0.86);
    border: 1px solid var(--xp-linha);
    color: var(--xp-ink-400);
    border-radius: 0.5rem;
}

/* ── 13. O TRADER (SPA) — só o que é MARCA, nunca o que é informação ──────
   Mesma régua do royal e do onix: LED de atividade, ícone de marca, controles
   de painel e seletor de unidade. Dígito frio/quente, vereditos e tudo que a
   Lei do Sinal cobre ficam de fora — ali a cor diz coisa, não enfeita. */
html[data-tema="xproject"] .nx-ai-signal-led.is-active {
    background: var(--xp-ouro);
    box-shadow: 0 0 6px rgba(var(--xp-ouro-rgb), 0.7);
}
html[data-tema="xproject"] .nx-radar__brand-icon,
html[data-tema="xproject"] .nx-trader__collapse-btn,
html[data-tema="xproject"] .nx-trader__collapse-label,
html[data-tema="xproject"] .nx-radar__msai-digit-pct {
    color: var(--xp-ouro-claro);
    border-color: rgba(var(--xp-ouro-rgb), 0.45);
}
html[data-tema="xproject"] .nx-trader__side.is-collapsed,
html[data-tema="xproject"] .nx-trader__side--left {
    border-color: var(--xp-borda);
}
html[data-tema="xproject"] .nx-form__unit-btn.is-active {
    background: rgba(var(--xp-ouro-rgb), 0.18);
    color: var(--xp-ouro-claro);
}
html[data-tema="xproject"] .nx-radar__msai-gauge-led.is-on.is-cyan {
    background: var(--xp-ouro);
}

/* ── 14. ACESSIBILIDADE ─────────────────────────────────────────────────── */
[data-tema="xproject"] :focus-visible {
    outline: 2px solid var(--xp-ouro);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    [data-tema="xproject"] .flow-button,
    [data-tema="xproject"] .btn-primary,
    [data-tema="xproject"] .nx-btn-primary { transition: none; }
    [data-tema="xproject"] .flow-button:hover,
    [data-tema="xproject"] .btn-primary:hover { transform: none; }
}