/* ============================================================================
   SMART EXCHANGER CFD — DESIGN SYSTEM
   ----------------------------------------------------------------------------
   Camada de apresentação. Nenhuma regra aqui altera lógica, rota ou estado.

   Todos os tokens derivam do manual de identidade:
     verde primário  #2ECC71   verde secundário #16A34A
     neutro escuro   #0D0F12   branco           #FFFFFF
     tipografia      Montserrat

   Os nomes antigos (--bg-main, --bg-card, --border-color, --green-main...)
   continuam existindo como ALIASES no fim deste bloco. É o que permite que as
   ~1.230 linhas de CSS legado e os 310 atributos style="" inline herdem a nova
   paleta sem precisar ser reescritos um por um.
   ========================================================================= */
:root {
    color-scheme: dark;

    /* ---------- MARCA ---------------------------------------------------- */
    --brand-100: #d8f7e6;
    --brand-300: #6ee7a5;
    --brand-400: #4adb89;
    --brand-500: #2ecc71;
    /* primário oficial */
    --brand-600: #16a34a;
    /* secundário oficial */
    --brand-700: #0f7a38;

    --brand-a08: rgba(46, 204, 113, .08);
    --brand-a12: rgba(46, 204, 113, .12);
    --brand-a20: rgba(46, 204, 113, .20);
    --brand-a32: rgba(46, 204, 113, .32);

    /* ---------- SUPERFÍCIES ---------------------------------------------- */
    /* Escala de elevação derivada do #0D0F12 da marca. Profundidade vem da
       diferença entre superfícies, não de sombras pesadas. */
    --surface-canvas: #0a0c0f;
    --surface-1: #0d0f12;
    --surface-2: #12151a;
    --surface-3: #171b21;
    --surface-4: #1e232b;
    --surface-inset: #08090b;
    --surface-hover: rgba(255, 255, 255, .04);
    --surface-active: rgba(255, 255, 255, .07);

    /* ---------- BORDAS --------------------------------------------------- */
    /* Contraste medido. A borda antiga tinha 1.13:1 contra o card, ou seja,
       era invisível: os painéis não tinham limite perceptível. */
    --border-hairline: #232a34;
    /* 1.27:1 - grade interna de tabela */
    --border-default: #262e39;
    /* 1.33:1 - limite de painel  */
    --border-strong: #3a4453;
    /* 1.86:1 - ênfase / hover    */
    --border-control: #5c6675;
    /* 3.15:1 - contorno de input (WCAG 1.4.11) */

    /* ---------- TEXTO ---------------------------------------------------- */
    /* Todos verificados sobre surface-1..4. text-subtle é o único abaixo de
       4.5 e por isso só deve ser usado em ícone ou texto >= 18px. */
    --text-strong: #f7f9fb;
    /* 17.3:1 */
    --text-default: #e3e8ef;
    /* 14.9:1 */
    --text-muted: #9aa5b4;
    /*  7.3:1 */
    --text-subtle: #6d7887;
    /*  4.1:1 */
    --text-inverse: #0a0c0f;
    /* Tinta sobre preenchimento verde. NAO tem override no tema claro de
       proposito: branco sobre #16A34A mede 3.30:1 e reprova, enquanto esta
       tinta escura mede 5.94:1 no claro e 9.32:1 no escuro. */
    --on-brand: #0a0c0f;

    /* ---------- SEMÂNTICOS DE MERCADO ------------------------------------ */
    /* Verde é o da marca. O vermelho existe por necessidade funcional
       (venda / prejuízo) e é dessaturado de propósito, para o verde da marca
       continuar sendo a cor dominante da interface. */
    --pos: #2ecc71;
    --pos-strong: #4adb89;
    --pos-fill: #2ecc71;
    --pos-a12: rgba(46, 204, 113, .12);
    --neg: #e8455f;
    /* 4.75:1 - AA como texto */
    --neg-fill: #c9203a;
    /* preenchimento solido: branco sobre ele mede 5.60:1 */
    --neg-strong: #f2748a;
    --neg-a12: rgba(232, 69, 95, .12);
    --warn: #e9b949;
    --warn-a12: rgba(233, 185, 73, .12);
    --info: #5b9bd5;
    --info-a12: rgba(91, 155, 213, .12);

    /* ---------- TIPOGRAFIA ----------------------------------------------- */
    --font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-numeric: var(--font-sans);

    --fs-2xs: 10px;
    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-md: 13px;
    --fs-base: 14px;
    --fs-lg: 16px;
    --fs-xl: 20px;
    --fs-2xl: 24px;
    --fs-3xl: 32px;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 800;

    --lh-tight: 1.2;
    --lh-snug: 1.35;
    --lh-normal: 1.5;

    --tracking-wide: .04em;
    --tracking-caps: .08em;

    /* ---------- ESPAÇAMENTO (base 4px) ----------------------------------- */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* ---------- RAIO ----------------------------------------------------- */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;

    /* ---------- ELEVAÇÃO ------------------------------------------------- */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .32);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, .40);
    --shadow-3: 0 12px 32px rgba(0, 0, 0, .48);
    --shadow-focus: 0 0 0 3px var(--brand-a32);

    /* ---------- MOVIMENTO ----------------------------------------------- */
    --dur-instant: 90ms;
    --dur-fast: 140ms;
    --dur-base: 220ms;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);

    /* ---------- CAMADAS -------------------------------------------------- */
    --z-base: 1;
    --z-sticky: 10;
    --z-dropdown: 100;
    --z-overlay: 500;
    --z-modal: 1000;
    --z-toast: 1500;

    /* ---------- ALIASES LEGADOS ----------------------------------------- */
    /* Mantidos para compatibilidade com todo o CSS e os inline styles atuais */
    --bg-main: var(--surface-1);
    --bg-card: var(--surface-2);
    /* ---------- LARGURAS DO PAINEL LATERAL DIREITO ---------------------- */
    /* Usadas pelo wrapper .navigation-expanded, pela barra de icones e pelo
       recuo do conteudo. Ficam no :root porque o wrapper e ancestral do
       container e uma variavel declarada no filho nao sobe. */
    --menu-panel-w: 380px;
    --menu-nav-w: 60px;
    --trade-panel-w: 300px;

    /* --bg-body era usada em 5 lugares e nunca foi definida: onde havia fallback
       o fundo virava #131722 (fora da identidade) e onde não havia ficava
       transparente. Definir aqui corrige os cinco de uma vez. */
    --bg-body: var(--surface-1);
    --text-primary: var(--text-strong);
    --text-secondary: var(--text-muted);
    --border-color: var(--border-default);
    --green-main: var(--brand-500);
    --green-light: var(--brand-300);
    --red-main: var(--neg);
    --red-light: var(--neg-strong);
}

[data-theme="light"] {
    color-scheme: light;

    --surface-canvas: #f4f6f8;
    --surface-1: #ffffff;
    --surface-2: #ffffff;
    --surface-3: #f7f9fb;
    --surface-4: #eef1f5;
    --surface-inset: #f4f6f8;
    --surface-hover: rgba(13, 15, 18, .04);
    --surface-active: rgba(13, 15, 18, .07);

    --border-hairline: #e6e9ee;
    --border-default: #d9dee5;
    --border-strong: #b9c1cc;
    --border-control: #8b95a3;

    --text-strong: #0d0f12;
    --text-default: #1d232b;
    --text-muted: #5c6675;
    --text-subtle: #7c8695;
    --text-inverse: #ffffff;

    /* No claro, o verde da marca como TEXTO mede apenas 3.30:1 sobre branco.
       Por isso ha dois papeis separados:
         --brand-500 / --pos-fill  -> preenchimento (com --on-brand por cima)
         --pos / --brand-400       -> texto e icone, escurecidos para passar AA */
    --brand-500: #16a34a;
    --brand-400: #0f7a38;
    /* 5.44:1 sobre branco */
    --brand-300: #0d6b31;
    --pos: #0f7a38;
    /* 4.80:1 sobre surface-4 */
    --pos-strong: #0d6b31;
    --pos-fill: #16a34a;
    --neg: #c9203a;
    /* 4.94:1 sobre surface-4 */
    --neg-strong: #a81f33;
    --neg-fill: #b81c33;

    --shadow-1: 0 1px 2px rgba(13, 15, 18, .06);
    --shadow-2: 0 4px 12px rgba(13, 15, 18, .10);
    --shadow-3: 0 12px 32px rgba(13, 15, 18, .14);
}

/* Controle da Logo */
.logo-dark {
    display: block;
}

.logo-light {
    display: none;
}

[data-theme="light"] .logo-dark {
    display: none;
}

[data-theme="light"] .logo-light {
    display: block;
}

/* ============================================================================
   BASE GLOBAL
   O seletor universal de fonte foi trocado por herança a partir do html:
   um `* { font-family }` reaplica a fonte a cada nó da árvore e impede que
   qualquer componente use outra família (inclusive numérica) sem !important.
   ========================================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-family: var(--font-sans);
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: inherit;
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    background-color: var(--bg-main) !important;
    color: var(--text-primary) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    /* respeita a barra de endereço em mobile */
    transition: background var(--dur-base) var(--ease-in-out),
        color var(--dur-base) var(--ease-in-out);
}

/* O terminal é um shell de aplicação: preenche a viewport em vez de ficar
   centralizado como um card. As telas de autenticação seguem centralizadas. */
body.is-app-shell {
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
}

/* Números de mercado nunca devem "dançar" ao atualizar: largura fixa de dígito */
.tabular,
[class*="-display"],
.data-table td,
.market-ticker,
.stat-tile__value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ---------- Foco visível (era inexistente) ---------- */
:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* Remove o anel só de quem usa mouse, preservando teclado */
:focus:not(:focus-visible) {
    outline: none;
}

/* ---------- Barras de rolagem discretas ---------- */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--border-strong);
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--border-control);
}

/* ---------- Respeita quem pediu menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Ajuste da Logo Principal */
.main-logo {
    height: 60px;
    /* Altura ideal para uma barra de 60px */
    width: auto;
    /* Mantém a proporção original sem achatar */
    object-fit: contain;
    display: block;
    transition: filter 0.3s ease;
    /* Suaviza se precisar aplicar brilho no modo dark */
}

/* Centralização vertical no container da esquerda */
.nav-left {
    display: flex;
    align-items: center;
    height: 100%;
}

/* =========================================
   BARRA REDIMENSIONÁVEL (RESIZER) E SCROLL
========================================= */

/* 1. Previne que a tela quebre o limite vertical */
.main-layout .main-display {
    min-height: 0;
    /* Essencial para o scroll interno funcionar */
}

/* 2. Ajustes iniciais de altura do Gráfico */
.main-layout .container-chart {
    height: 60%;
    /* Altura inicial padrão */
    min-height: 20%;
    /* Impede que o gráfico suma ao arrastar */
    display: flex;
    flex-direction: column;
}

/* 3. A mágica para o scroll do portfólio funcionar */
.main-layout .container-portfolio {
    flex: 1;
    background-color: var(--bg-main);
    /* Ocupa todo o resto do espaço após o gráfico */
    min-height: 20%;
    /* Altura mínima da tabela */
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* CRÍTICO: Força a rolagem em vez de expandir a div */
    overflow: hidden;
    /* Oculta as sobras, forçando a tabela interna a rolar */
}

/* 4. Estilo visual da barra arrastável */
.layout-resizer {
    height: 8px;
    /* Altura da área de clique */
    background-color: var(--border-color);
    cursor: row-resize;
    /* Cursor de "seta para cima/baixo" */
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    user-select: none;
    /* Evita selecionar textos sem querer */
}

.layout-resizer:hover,
.layout-resizer.active {
    background-color: var(--brand-a32);
    /* Fica verde suave ao arrastar */
}

/* Um pequeno detalhe visual "pegador" no meio da barra */
.resizer-handle {
    width: 40px;
    height: 2px;
    background-color: var(--text-secondary);
    border-radius: 2px;
    transition: background 0.2s;
}

.layout-resizer:hover .resizer-handle,
.layout-resizer.active .resizer-handle {
    background-color: var(--green-main);
    ;
}

/* Classe que desativa cliques/seleções globais durante o arraste */
.is-resizing * {
    user-select: none !important;
}

/* Desativa ponteiro nos iframes (TradingView) durante o arraste para o mouse não agarrar lá dentro */
.is-resizing iframe {
    pointer-events: none !important;
}

/* Controles fixos no canto superior direito */
.auth-controls {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
    z-index: 1000;
}

.control-btn,
.control-select {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: 0.3s;
}

.control-btn:hover {
    color: var(--text-primary);
    border-color: var(--green-main);
}


/* Aplicando as variáveis nas áreas */
.nav-div {
    grid-area: nav;
    background: var(--panel-bg);
    border-bottom: 1px solid var(--border);
}

/* =========================================
   ESTILOS DO MENU DE USUÁRIO (SIDEBAR)
========================================= */
.user-profile-wrapper {
    position: relative;
    padding: 15px 0;
    display: flex;
    justify-content: center;
    border-top: 1px solid var(--border-default);
}

.user-avatar-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: transform 0.2s;
}

.user-avatar-btn:hover {
    transform: scale(1.05);
}

.avatar-container {
    position: relative;
    width: 38px;
    height: 38px;
}

.avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid transparent;
    /* Pode mudar a cor dependendo do nível do user */
}

.verified-badge {
    position: absolute;
    bottom: -2px;
    right: -4px;
    background: var(--bg-card, #ffffff);
    color: var(--green-main);
    /* Verde padrão de trade */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dropdown Flutuante */
.user-dropdown-menu {
    display: none;
    position: absolute;
    bottom: 10px;
    left: 100%;
    /* Abre para a direita da sidebar */
    margin-left: 15px;
    /* Espaço entre a sidebar e o menu */
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    width: 220px;
    z-index: var(--z-dropdown);
    flex-direction: column;
    overflow: hidden;
}

/* Seta apontando para a sidebar */
.user-dropdown-menu::before {
    content: '';
    position: absolute;
    bottom: 20px;
    left: -6px;
    width: 10px;
    height: 10px;
    background: var(--bg-card, #ffffff);
    border-left: 1px solid var(--border-default);
    border-bottom: 1px solid var(--border-default);
    transform: rotate(45deg);
}

.user-info-header {
    padding: 15px;
    border-bottom: 1px solid var(--border-default);
    display: flex;
    flex-direction: column;
}

.user-info-header strong {
    color: var(--text-strong);
    font-size: 14px;
}

.user-info-header span {
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 2px;
}

.status-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--green-main);
    margin-top: 8px;
    font-weight: 600;
}

.user-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.user-menu-list li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    color: var(--text-strong);
    text-decoration: none;
    font-size: 13px;
    transition: background 0.2s;
}

.user-menu-list li a:hover {
    background: var(--surface-hover);
}

.user-menu-list li a i {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
}

.logout-item {
    border-top: 1px solid var(--border-default);
}

.logout-item a {
    color: var(--neg) !important;
}

.logout-item a i {
    color: var(--neg) !important;
}

.prices-div {
    grid-area: prices;
    background: var(--accent);
    color: white;
}

.tools-div {
    grid-area: tools;
    background: var(--panel-bg);
    border-right: 1px solid var(--border);
}

.chart-div {
    grid-area: chart;
    background: var(--bg-body);
}

.portfolio-div {
    grid-area: portfolio;
    background: var(--panel-bg);
    border-top: 1px solid var(--border);
}

.trade-div {
    grid-area: trade;
    background: var(--panel-bg);
    border-left: 1px solid var(--border);
}

.menu-div {
    grid-area: menu;
    background: var(--panel-bg);
    border-top: 1px solid var(--border);
}


.btn-signin-blue {
    background: var(--brand-500);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
}

.btn-signin-outline {
    background: transparent;
    border: 2px solid var(--brand-500);
    color: var(--brand-500);
    padding: 10px 22px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
}


/* Card de Login */
.login-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 40px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.brand-header {
    text-align: center;
    margin-bottom: 30px;
}

.brand-header h2 {
    margin: 0;
    font-size: 24px;
    color: var(--text-primary);
}

.brand-header p {
    color: var(--text-secondary);
    font-size: 14px;
    margin-top: 5px;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    font-weight: 700;
}

.input-wrapper {
    display: flex;
    align-items: stretch;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.icon-box {
    background: var(--icon-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    border-right: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.form-control {
    flex: 1;
    background: transparent;
    border: none;
    padding: 12px 15px;
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
}

.btn-login {
    width: 100%;
    background: var(--green-main);
    color: white;
    border: none;
    padding: 14px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.btn-login:hover {
    opacity: 0.9;
}

.footer-links {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: var(--text-secondary);
}

.footer-links a {
    color: var(--green-main);
    text-decoration: none;
    font-weight: 600;
}

/* css do tela registro */
.btn-toggle-pass {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 10px;
    cursor: pointer;
}

.btn-register {
    width: 100%;
    padding: 12px;
    background: var(--green-main);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    margin-top: 10px;
}

.btn-register:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#strength-container {
    height: 4px;
    width: 100%;
    background: var(--bg-main);
    margin: 8px 0;
    border-radius: 2px;
}

#strength-bar {
    height: 100%;
    width: 0%;
    transition: width 0.3s, background 0.3s;
}

#hint-container {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 5px;
}

#match-feedback {
    display: none;
    font-size: 12px;
    margin-top: 5px;
    align-items: center;
    gap: 5px;
}

.auth-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 30px;
    width: 100%;
    max-width: 400px;
}


.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 70vh;
    gap: 20px;
}

.hero h1 {
    color: var(--text-primary);
}

.hero p {
    color: var(--text-secondary);
}

.actions {
    display: flex;
    gap: 15px;
}

/* --- Estilo Isolado para a Tela de Trade --- */

/* Forçamos o container a ocupar a tela toda e resetar o flex do body se necessário */
.main-layout {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    width: 100vw !important;
    position: fixed;
    /* Garante que ignore o centro do body global */
    top: 0;
    left: 0;
    background-color: var(--bg-main);
    overflow: hidden;
}

/* Menu de Navegação Superior */
/* Menu de Navegação Superior - Modo Dark (Padrão) */
.main-layout .nav-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 20px;

    /* MODIFICADO: Cor fixa mais escura para o modo dark */
    background-color: var(--bg-main);

    border-bottom: 1px solid var(--border-color);
    width: 100%;
    box-sizing: border-box;
}

/* Alteração exclusiva para o Menu Superior quando estiver no Modo Light */
[data-theme="light"] .main-layout .nav-menu {
    /* MODIFICADO: Cinza elegante apenas no topo quando o tema for claro */
    background-color: var(--surface-hover);
}

/* Alinhamento dos blocos do menu */
.main-layout .nav-left {
    flex: 1;
    display: flex;
    justify-content: flex-start;
}

.main-layout .nav-center {
    flex: 2;
    display: flex;
    justify-content: center;
    gap: 30px;
}

.main-layout .nav-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

/* Links do Centro */
.main-layout .nav-center a {
    text-decoration: none;
    /* O caixa-alta era escrito no HTML ("PAINEL"), o que impedia traduzir o
       item. Agora e apresentacao: o texto vem traduzido em caixa natural. */
    text-transform: uppercase;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s;
}

/* Faltava a vírgula: sem ela o seletor virava descendente
   (.nav-center a:hover .nav-center a.active) e não casava com nada,
   deixando hover e estado ativo sem efeito. */
.main-layout .nav-center a:hover,
.nav-center a.active {
    color: var(--green-main);
}

/* Fix para o componente de Idioma/Tema aparecer corretamente */
.main-layout .auth-controls {
    position: static !important;
    /* Remove o absolute apenas aqui dentro */
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Garante que o ícone do Lucide herde a cor correta */
.main-layout .control-btn {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
}

/* --- Organização do Corpo Principal --- */

.main-layout .app-body {
    display: flex;
    flex: 1;
    /* Ocupa todo o espaço vertical restante */
    width: 100%;
    overflow: hidden;
}

/* Ferramentas (Lado Esquerdo) */
.main-layout .sidebar-tools {
    width: 60px;
    /* Largura fixa para ícones */
    background-color: var(--bg-main);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10px;
}

/* Área Central (Gráfico + Portfolio) */
.main-layout .main-display {
    display: flex;
    flex-direction: column;
    flex: 1;
    /* Ocupa o máximo de espaço horizontal disponível */
    min-width: 0;
}

.main-layout .container-chart {
    flex: 2;
    /* Proporção maior para o gráfico */
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-main);
}


/* Painéis Laterais Direitos */

/* --rail-w e a largura ocupada pelo painel da direita no momento. O trade
   panel se ancora nela, entao acompanha o menu quando ele recolhe. A classe
   .menu-collapsed e espelhada no layout por JS (o menu e irmao POSTERIOR do
   trade panel no DOM, e CSS nao seleciona irmao anterior). */
.main-layout {
    --rail-w: var(--menu-panel-w);
}

.main-layout.menu-collapsed {
    --rail-w: var(--menu-nav-w);
}

.main-layout .trade-sidebar {
    position: fixed;
    right: var(--rail-w);
    top: 122px;
    bottom: 0;
    width: var(--trade-panel-w);
    background: var(--bg-card);
    border-left: 1px solid var(--border-color);
    z-index: 50;

    /* Recolhido: sai inteiro para a direita (largura propria + o recuo do
       trilho). Antes era translateX(300px), que apenas o escondia ATRAS do
       menu de 380px - com o menu em 60px ele ficaria a mostra. */
    transform: translateX(calc(100% + var(--rail-w)));
    transition: transform .4s cubic-bezier(.4, 0, .2, 1),
        right .4s cubic-bezier(.4, 0, .2, 1),
        background var(--dur-base) var(--ease-in-out);
    box-shadow: -5px 0 15px rgba(0, 0, 0, .1);
    overflow: visible;
}

.main-layout .navigation-expanded {
    width: var(--menu-panel-w);
    background-color: var(--bg-card);
    border-left: 1px solid var(--border-color);
    position: relative;
    z-index: 100;
    /* Garante que o painel de trade deslize por baixo dele */
    transition: width .4s cubic-bezier(.4, 0, .2, 1);
}

/* Recolhido: o wrapper encolhe ate a faixa da barra de icones e devolve a
   largura para o grafico. Sem isso o aside continuava com 380px fixos e
   sobrava uma area vazia a direita do trilho de icones. */
.main-layout .navigation-expanded.is-collapsed {
    width: var(--menu-nav-w);
}

.trade-sidebar.active {
    transform: translateX(0);
}

/* Centralizando sua classe original na tela */
.expand-trigger {
    position: absolute;
    /* Ele fica 24px para fora da lateral esquerda do painel */
    left: -24px;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--brand-500) !important;
    border: none;
    width: 24px;
    height: 60px;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Branco sobre o verde da marca mede 2.10:1; tinta escura mede 9.32:1 */
    color: var(--on-brand);
    z-index: 51;
    transition: transform .4s cubic-bezier(.4, 0, .2, 1),
        background-color var(--dur-fast) var(--ease-out);
}

.expand-trigger:hover {
    background-color: var(--brand-400) !important;
}

/* ALÇA SEMPRE VISÍVEL
   A alça vive dentro do #tradePanel, então saía da tela junto com ele: o que
   restava na borda ficava pintado ATRÁS do .navigation-expanded (z-index 100
   contra 50 do painel) e não havia como reabrir o painel por ela.
   Com o painel fechado, ela volta --rail-w para a esquerda e encosta na borda
   do trilho, onde fica visível e clicável. O onclick continua o mesmo. */
.main-layout .trade-sidebar:not(.active) .expand-trigger {
    transform: translateY(-50%) translateX(calc(-1 * var(--rail-w)));
}

#tradeIcon {
    transition: transform 0.3s ease;
}

/* .sidebar-tools */
/* Sidebar de Ferramentas - Estilo TradingView */
.sidebar-tools {
    width: 45px;
    /* Largura fixa e estreita */
    border-right: 1px solid var(--border-color);
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    align-items: center;

    /* O z-index sozinho nao resolvia: .main-display tem z-index auto e nao cria
       contexto de empilhamento, entao o cabecalho sticky da tabela (z-index 10)
       e o .layout-resizer (z-index 10) disputavam o MESMO contexto com este
       trilho, tambem em 10 - e o empate e decidido pela ordem no DOM, onde a
       carteira vem depois. Por isso o menu de perfil ficava por baixo dela. */
    position: relative;
    z-index: 200;
}

.drawing-toolbar {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-top: 10px;
}

.tool-btn {
    width: 34px;
    /* Tamanho quadrado perfeito */
    height: 34px;
    background: transparent;
    /* Remove o fundo branco da imagem */
    border: none;
    /* Remove bordas feias */
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    margin-bottom: 4px;
    transition: background 0.2s, color 0.2s;
    padding: 0;
}

.tool-btn i {
    width: 20px;
    height: 20px;
    stroke-width: 1.5px;
    /* Deixa o ícone mais fino e elegante */
}

/* Hover e Ativo */
.tool-btn:hover {
    background: var(--bg-body);
    color: var(--text-primary);
}

.tool-btn.active {
    background: var(--info-a12);
    /* Azul sutil de fundo */
    color: var(--green-main);
    ;
}

/* Separador elegante */
.tool-separator {
    width: 24px;
    height: 1px;
    background: var(--border-color);
    margin: 8px 0;
}

/* market_prices */
.market-ticker {
    width: 100%;
    height: 40px;
    /* Altura padrão do ticker */
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* Garante que o widget preencha a largura sem quebras */
.tradingview-widget-container {
    width: 100% !important;
}

/* Posicionamento do botão entre gráfico e portfólio */
.main-display {
    flex: 1;
    transition: margin-right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    margin-right: 0;
    /* Começa sem recuo */
    overflow: hidden;
}

.app-body:has(.trade-sidebar.active) .main-display {
    margin-right: var(--trade-panel-w);
}

.btn-new-order-floating {
    position: absolute;
    top: 50%;
    /* Centraliza na linha divisória */
    right: 20px;
    transform: translateY(-50%);
    z-index: 10;
    background-color: var(--green-main);
    ;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: opacity 0.2s;
}

.btn-new-order-floating:hover {
    opacity: 0.9;
}

/* Estilização básica do Modal (padrão MuiPaper) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    /* Escondido por padrão */
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.MuiPaper-root {
    background: var(--bg-card);
    color: var(--text-main);
    padding: 20px;
    border-radius: 8px;
    /* Era 350px fixo: estourava a viewport de 320px */
    width: min(350px, calc(100vw - 32px));
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Adicione aqui os estilos de grid/inputs que você já possui para o formulário */

/* Layout do Container */
.expanded-menu-container {
    display: flex;
    height: 100%;
    width: 100%;
}

/* Área de Conteúdo (Esquerda) */
.menu-content-display {
    flex: 1;
    /* Ocupa o resto do espaço */
    background-color: var(--bg-main);
    border-right: 1px solid var(--border-color);
    padding: 15px;
    overflow-y: auto;
}

/* Barra de Ícones (Direita) */
.menu-icon-nav {
    width: 60px;
    /* Mesma largura da sua sidebar_tools */
    background-color: var(--bg-main);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10px;
}

/* Controle de visibilidade das abas */
.menu-tab-content {
    display: none;
}

.menu-tab-content.active {
    display: block;
    animation: fadeIn 0.2s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Container dos botões na direita */
.vertical-text-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}

/* Esconder a barra de rolagem mas manter a funcionalidade */
.market-list-area {
    overflow-y: auto;
    flex: 1;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
}

.market-list-area::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari and Opera */
}

/* ---- Estrela de favorito na lista de mercados (desktop) ----
   Equivalente do .mstar do mobile, e usando a mesma cor (--warn) para a mesma
   coisa não ter dois amarelos diferentes entre as versões.

   Apagada, a estrela só aparece com o ponteiro na linha: são 252 ativos, e 252
   estrelas cinzas acesas ao mesmo tempo competiriam com o preço, que é o que a
   pessoa veio ler. Acesa, fica sempre visível — é ela que diz de relance o que
   já está na watchlist. */
.fav-star {
    margin-left: auto;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm, 4px);
    background: transparent;
    color: var(--text-subtle, var(--text-secondary));
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s ease, color .12s ease;
}

.fav-star svg {
    width: 14px;
    height: 14px;
}

.symbol-item:hover .fav-star,
.fav-star:focus-visible,
.fav-star.is-on {
    opacity: 1;
}

.fav-star:hover {
    color: var(--warn);
}

.fav-star.is-on {
    color: var(--warn);
}

/* Sem ponteiro (toque) não existe hover: ali a estrela fica sempre visível,
   senão não haveria como favoritar em tela sensível ao toque. */
@media (hover: none) {
    .fav-star {
        opacity: 1;
    }
}

/* Novo padrão de botão: Ícone + Texto */
.tool-btn-nav {
    width: 100%;
    min-height: 54px;
    /* Aumentado para dar mais respiro */
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 0;
    /* Espaçamento interno aumentado */
    margin-bottom: 8px;
    /* Espaçamento entre os botões, igual ao .tool-btn */
    transition: all 0.2s;
}

.tool-btn-nav i {
    width: 18px;
    /* Ícone levemente menor */
    height: 18px;
    margin-bottom: 2px;
}

.tool-btn-nav span {
    font-size: 9px;
    /* Texto pequeno para caber na largura de 45px */
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

/* Estados de Hover e Active */
.tool-btn-nav:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.tool-btn-nav.active {
    color: var(--green-light);
    background: var(--pos-a12);
    border-right: 2px solid var(--green-main);
    /* Destaque lateral */
}

/* Reaproveita os estilos de .tool-btn e .tool-separator que você já tem[cite: 8] */

/* Estilos Internos do Formulário de Trade */
.trade-inner-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--text-primary);
    background: var(--bg-main);
}

.trade-header {
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
}

.side-selector {
    display: flex;
    border-bottom: 1px solid var(--border-color);
}

.side-btn {
    flex: 1;
    padding: 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 3px solid transparent;
    transition: 0.2s;
}

.side-btn.active.buy {
    color: var(--pos);
    border-bottom-color: var(--pos);
}

.side-btn.active.sell {
    color: var(--neg);
    border-bottom-color: var(--neg);
}

.trade-form {
    padding: 16px;
}

.input-group {
    margin-bottom: 15px;
}

.input-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.trade-input-control {
    display: flex;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.trade-input-control input {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-primary);
    padding: 8px;
    text-align: center;
    outline: none;
}

.trade-input-control input:disabled {
    opacity: 0.3;
}

.btn-execute {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 4px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
}

/* Remove as setinhas (spinners) de campos número no Chrome, Safari, Edge e Firefox */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

/* Estilo do Seletor de Símbolo */
.symbol-selector-container {
    padding: 10px 15px;
    border-bottom: 1px solid var(--border-color);
}

.trade-select {
    width: 100%;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 8px;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
}


/* Estilo base para botões de ajuste */
.math-btn {
    width: 30px;
    height: 100%;
    border: none;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    transition: opacity 0.2s, background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Botão de Menos - Vermelho */
.math-btn.btn-minus {
    background-color: rgba(242, 54, 69, 0.1);
    /* Fundo sutil */
    color: var(--neg);
}

.math-btn.btn-minus:hover:not(:disabled) {
    background-color: var(--neg);
    color: white;
}

/* Botão de Mais - Verde */
.math-btn.btn-plus {
    background-color: var(--pos-a12);
    /* Fundo sutil */
    color: var(--pos);
}

.math-btn.btn-plus:hover:not(:disabled) {
    background-color: var(--green-main);
    ;
    color: white;
}

/* Estado Desativado */
.math-btn:disabled {
    background-color: var(--bg-main) !important;
    color: var(--text-secondary) !important;
    opacity: 0.3;
    cursor: not-allowed;
}

/* ============================================================================
   ============================================================================
   PRIMITIVOS DO DESIGN SYSTEM
   ----------------------------------------------------------------------------
   Classes reutilizaveis para substituir os atributos style="" inline.
   Nenhuma delas depende de JS, estado ou dado: sao puramente visuais.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. PAINEL - a moldura padrao de qualquer bloco de conteudo
   ------------------------------------------------------------------------ */
.panel {
    background: var(--surface-2);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.panel--flush {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
}

.panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-hairline);
    background: var(--surface-2);
    min-height: 48px;
}

.panel__title {
    margin: 0;
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
    letter-spacing: var(--tracking-wide);
}

.panel__body {
    padding: var(--space-4);
    min-height: 0;
    overflow: auto;
}

.panel__body--flush {
    padding: 0;
}

/* ---------------------------------------------------------------------------
   2. BOTOES
   O primario usa tinta escura sobre o verde da marca: #0A0C0F sobre #2ECC71
   mede 9.32:1, enquanto branco sobre o verde secundario mede apenas 3.30:1
   e reprovaria em texto pequeno.
   ------------------------------------------------------------------------ */
.btn {
    --btn-h: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--btn-h);
    padding: 0 var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-default);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: background var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out),
        transform var(--dur-instant) var(--ease-out);
}

.btn:active:not(:disabled) {
    transform: translateY(1px);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

.btn--sm {
    --btn-h: 30px;
    padding: 0 var(--space-3);
    font-size: var(--fs-sm);
}

.btn--lg {
    --btn-h: 44px;
    padding: 0 var(--space-6);
    font-size: var(--fs-base);
}

.btn--block {
    width: 100%;
}

.btn--primary {
    background: var(--brand-500);
    color: var(--on-brand);
    border-color: var(--brand-500);
}

.btn--primary:hover:not(:disabled) {
    background: var(--brand-400);
    border-color: var(--brand-400);
}

.btn--secondary {
    background: var(--surface-4);
    color: var(--text-strong);
    border-color: var(--border-strong);
}

.btn--secondary:hover:not(:disabled) {
    background: var(--surface-3);
    border-color: var(--border-control);
}

.btn--ghost {
    background: transparent;
    color: var(--text-muted);
}

.btn--ghost:hover:not(:disabled) {
    background: var(--surface-hover);
    color: var(--text-strong);
}

.btn--outline {
    background: transparent;
    color: var(--text-default);
    border-color: var(--border-strong);
}

.btn--outline:hover:not(:disabled) {
    border-color: var(--brand-500);
    color: var(--brand-400);
    background: var(--brand-a08);
}

.btn--buy {
    background: var(--pos-fill);
    color: var(--on-brand);
    border-color: var(--pos-fill);
}

.btn--buy:hover:not(:disabled) {
    background: var(--pos-strong);
    border-color: var(--pos-strong);
}

.btn--sell {
    background: var(--neg-fill);
    color: #fff;
    border-color: var(--neg-fill);
}

.btn--sell:hover:not(:disabled) {
    background: var(--neg-strong);
    border-color: var(--neg-strong);
}

/* Botao de icone: alvo de toque de 40px mesmo com icone de 16px (WCAG 2.5.8) */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out);
}

.icon-btn:hover {
    background: var(--surface-hover);
    color: var(--text-strong);
}

.icon-btn--sm {
    width: 32px;
    height: 32px;
}

.icon-btn--edit:hover {
    color: var(--warn);
    background: var(--warn-a12);
}

.icon-btn--close:hover {
    color: var(--neg);
    background: var(--neg-a12);
}

/* ---------------------------------------------------------------------------
   3. CAMPOS DE FORMULARIO
   O contorno usa --border-control (3.15:1), o minimo exigido pela WCAG 1.4.11
   para limites de componente de interface.
   ------------------------------------------------------------------------ */
.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.field__label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
}

.input,
.select {
    height: 38px;
    width: 100%;
    padding: 0 var(--space-3);
    background: var(--surface-inset);
    border: 1px solid var(--border-control);
    border-radius: var(--radius-sm);
    color: var(--text-strong);
    font-size: var(--fs-md);
    transition: border-color var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-fast) var(--ease-out);
}

.input::placeholder {
    color: var(--text-subtle);
}

.input:hover,
.select:hover {
    border-color: var(--border-strong);
}

.input:focus,
.select:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: var(--shadow-focus);
}

.input[aria-invalid="true"] {
    border-color: var(--neg);
}

.select {
    appearance: none;
    padding-right: var(--space-8);
    background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

/* ---------------------------------------------------------------------------
   4. BADGES E CHIPS
   ------------------------------------------------------------------------ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 20px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-xs);
    background: var(--surface-4);
    color: var(--text-muted);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    white-space: nowrap;
}

.badge--brand {
    background: var(--brand-a20);
    color: var(--brand-400);
}

.badge--pos {
    background: var(--pos-a12);
    color: var(--pos);
}

.badge--neg {
    background: var(--neg-a12);
    color: var(--neg);
}

.badge--warn {
    background: var(--warn-a12);
    color: var(--warn);
}

/* Ponto de direcao da ordem (compra/venda) */
.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: currentColor;
}

/* ---------------------------------------------------------------------------
   5. VALORES DE MERCADO
   ------------------------------------------------------------------------ */
.value-pos {
    color: var(--pos);
}

.value-neg {
    color: var(--neg);
}

.value-flat {
    color: var(--text-muted);
}

/* ---------------------------------------------------------------------------
   6. TABELA DE DADOS
   Cabecalho fixo, grade discreta, numeros alinhados a direita com largura de
   digito fixa e rolagem horizontal contida no proprio container.
   ------------------------------------------------------------------------ */
.table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fs-sm);
}

.data-table thead th {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-default);
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    white-space: nowrap;
}

.data-table tbody td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-hairline);
    color: var(--text-default);
    vertical-align: middle;
    white-space: nowrap;
}

.data-table tbody tr {
    transition: background var(--dur-fast) var(--ease-out);
}

.data-table tbody tr:hover td {
    background: var(--surface-hover);
}

.data-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.data-table .col-actions {
    text-align: center;
    width: 1%;
}

/* ---------------------------------------------------------------------------
   7. FAIXA DE INDICADORES (rodape do portfolio)
   Substitui doze <span> com style inline por uma grade responsiva.
   ------------------------------------------------------------------------ */
.stat-strip {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: var(--space-2) var(--space-4);
    background: var(--surface-1);
    border-top: 1px solid var(--border-default);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.stat-strip::-webkit-scrollbar {
    display: none;
}

.stat-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
    padding: var(--space-1) var(--space-4);
    border-right: 1px solid var(--border-hairline);
    min-width: max-content;
    flex: 0 0 auto;
}

.stat-tile:first-child {
    padding-left: 0;
}

.stat-tile:last-child {
    border-right: 0;
    padding-right: 0;
}

.stat-tile__label {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    line-height: var(--lh-tight);
}

.stat-tile__value {
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    color: var(--text-strong);
    line-height: var(--lh-tight);
    font-variant-numeric: tabular-nums;
}

/* Destaque para os indicadores que o operador olha primeiro */
.stat-tile--key .stat-tile__value {
    font-size: var(--fs-lg);
}

/* ---------------------------------------------------------------------------
   8. CARREGAMENTO E ESTADO VAZIO
   ------------------------------------------------------------------------ */
.skeleton {
    position: relative;
    overflow: hidden;
    background: var(--surface-3);
    border-radius: var(--radius-xs);
    color: transparent !important;
}

.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--surface-hover), transparent);
    animation: skeleton-sweep 1.4s var(--ease-in-out) infinite;
}

@keyframes skeleton-sweep {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}

.skeleton-line {
    height: 12px;
    margin: var(--space-1) 0;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-10) var(--space-6);
    text-align: center;
    color: var(--text-muted);
}

.empty-state__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--surface-3);
    border: 1px solid var(--border-default);
    color: var(--text-subtle);
}

.empty-state__title {
    margin: 0;
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--text-default);
}

.empty-state__text {
    margin: 0;
    font-size: var(--fs-md);
    max-width: 42ch;
}

/* ---------------------------------------------------------------------------
   9. UTILITARIOS
   ------------------------------------------------------------------------ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.row--between {
    justify-content: space-between;
}

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.divider-v {
    width: 1px;
    align-self: stretch;
    background: var(--border-hairline);
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
   10. RESPONSIVIDADE
   Nenhum breakpoint deve produzir rolagem horizontal na pagina: tabelas e
   faixas de indicadores rolam dentro do proprio container.
   ------------------------------------------------------------------------ */

/* Ultra wide: aproveita a largura sem esticar a tipografia */
@media (min-width: 1921px) {
    :root {
        --fs-base: 15px;
        --fs-md: 14px;
        --fs-sm: 13px;
    }

    .stat-tile__value {
        font-size: var(--fs-lg);
    }
}

/* Notebook */
@media (max-width: 1440px) {
    .stat-tile {
        padding-inline: var(--space-3);
    }
}

/* Tablet */
@media (max-width: 1024px) {
    .panel__body {
        padding: var(--space-3);
    }

    .data-table thead th,
    .data-table tbody td {
        padding: var(--space-2) var(--space-3);
    }

    .stat-strip {
        padding-inline: var(--space-3);
    }
}

/* Mobile: a faixa de indicadores vira grade de duas colunas em vez de rolagem */
@media (max-width: 720px) {
    .stat-strip {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-2);
        overflow: visible;
        padding: var(--space-3);
    }

    .stat-tile {
        padding: var(--space-2);
        border-right: 0;
        border-radius: var(--radius-sm);
        background: var(--surface-2);
        border: 1px solid var(--border-hairline);
        min-width: 0;
    }

    .stat-tile:first-child,
    .stat-tile:last-child {
        padding: var(--space-2);
    }

    .stat-tile__value {
        font-size: var(--fs-md);
    }

    .stat-tile--key .stat-tile__value {
        font-size: var(--fs-base);
    }

    .btn {
        --btn-h: 40px;
    }

    .icon-btn--sm {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 480px) {
    .panel__header {
        flex-wrap: wrap;
        min-height: 0;
        padding: var(--space-3);
    }
}


/* ---------------------------------------------------------------------------
   11. COMPLEMENTOS DE PRIMITIVOS
   ------------------------------------------------------------------------ */

/* Icone dentro de botao: tamanho travado para o Lucide nao "pular" ao trocar */
.btn__icon {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

/* Variante de acao positiva sem virar botao cheio */
.btn--accent {
    color: var(--brand-400);
    border-color: transparent;
}

.btn--accent:hover:not(:disabled) {
    color: var(--brand-300);
    background: var(--brand-a08);
    border-color: var(--brand-a20);
}

/* Link de enfase que funciona tanto em <a> quanto em <button> */
.link-accent {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--brand-400);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.link-accent:hover {
    color: var(--brand-300);
}

/* Ancora de dropdown */
.dropdown-anchor {
    position: relative;
}

/* ---------------------------------------------------------------------------
   12. PORTFOLIO (componente)
   ------------------------------------------------------------------------ */
.portfolio-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    position: relative;
    background: var(--surface-1);
    color: var(--text-default);
}

.portfolio-view {
    display: none;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* Seletor de carteira */
.wallet-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 28px;
    padding: 0 var(--space-2) 0 var(--space-1);
    background: var(--surface-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out),
        background var(--dur-fast) var(--ease-out);
}

.wallet-chip:hover {
    background: var(--surface-4);
    border-color: var(--border-strong);
}

.wallet-chip__number {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-default);
    font-variant-numeric: tabular-nums;
}

.wallet-chip__caret {
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    flex: 0 0 auto;
}

/* Menu de colunas */
.column-menu {
    display: none;
    padding: var(--space-3);
    min-width: 200px;
}

.column-menu__title {
    padding: 0 0 var(--space-2);
    margin-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-hairline);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
}

.column-menu__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    max-height: 260px;
    overflow-y: auto;
}

#columns-checkboxes label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-xs);
    font-size: var(--fs-md);
    color: var(--text-default);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
}

#columns-checkboxes label:hover {
    background: var(--surface-hover);
}

#columns-checkboxes input[type="checkbox"] {
    accent-color: var(--brand-500);
    width: 15px;
    height: 15px;
    cursor: pointer;
    flex: 0 0 auto;
}

/* Celulas da tabela de posicoes */
.data-table .cell-muted {
    color: var(--text-muted);
}

.data-table .cell-strong {
    font-weight: var(--fw-bold);
}

.data-table .cell-symbol {
    font-weight: var(--fw-bold);
    color: var(--text-strong);
    letter-spacing: var(--tracking-wide);
}

.data-table .cell-time {
    font-size: var(--fs-xs);
}

/* Direcao da ordem */
.side {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-caps);
}

/* Acoes da linha: sempre visiveis, mas discretas ate o hover da linha */
.row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
}

.row-actions .icon-btn {
    border-color: var(--border-default);
    background: var(--surface-3);
    opacity: .72;
    transition: opacity var(--dur-fast) var(--ease-out),
        background var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out);
}

.data-table tbody tr:hover .row-actions .icon-btn,
.row-actions .icon-btn:focus-visible {
    opacity: 1;
}

/* A celula de acao fica fixa a direita: precisa de fundo proprio, senao o
   conteudo da linha passa por baixo dela durante a rolagem horizontal. */
.data-table tbody td.col-sticky-end {
    background: var(--surface-1);
}

.data-table tbody tr:hover td.col-sticky-end {
    background: var(--surface-3);
}

.data-table thead th.col-sticky-end {
    background: var(--surface-2);
    z-index: calc(var(--z-sticky) + 1);
}

/* A linha de estado vazio nao deve ter grade nem hover */
.data-table .no-positions-td,
.data-table tbody tr:hover .no-positions-td {
    background: transparent;
    border-bottom: 0;
    padding: 0;
}


/* ---------------------------------------------------------------------------
   13. BARRA SUPERIOR (marca e navegacao)
   ------------------------------------------------------------------------ */
.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    border-radius: var(--radius-sm);
}

.brand-lockup__mark {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex: 0 0 auto;
}

.brand-lockup__text {
    display: flex;
    flex-direction: column;
    line-height: 1;
    gap: 3px;
}

.brand-lockup__name {
    font-size: var(--fs-lg);
    font-weight: var(--fw-black);
    letter-spacing: -.02em;
    color: var(--text-strong);
}

.brand-lockup__sub {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.brand-lockup__word {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    letter-spacing: var(--tracking-wide);
    color: var(--text-muted);
}

/* A tag CFD usa tinta escura sobre o verde da marca (9.32:1) */
.brand-lockup__tag {
    display: inline-block;
    padding: 2px var(--space-2);
    border-radius: var(--radius-xs);
    background: var(--brand-500);
    color: var(--on-brand);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-black);
    letter-spacing: var(--tracking-caps);
    line-height: 1.4;
}

/* Link de navegacao: o estado ativo ganha um indicador, nao apenas cor,
   para nao depender exclusivamente de cor (WCAG 1.4.1). */
.nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: var(--space-2) 0;
    color: var(--text-muted);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-wide);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease-out);
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    border-radius: var(--radius-pill);
    background: var(--brand-500);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--dur-base) var(--ease-out);
}

.nav-link:hover {
    color: var(--text-strong);
}

.nav-link.is-active {
    color: var(--brand-400);
}

.nav-link.is-active::after {
    transform: scaleX(1);
}

.global-clock {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

/* ---------------------------------------------------------------------------
   14. TICKER DE COTACOES
   O markup antigo declarava 'Roboto Mono', uma terceira familia que nunca era
   carregada; agora usa a fonte da marca com largura de digito fixa.
   ------------------------------------------------------------------------ */
.ticker {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border-default);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}

.ticker__track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    animation: ticker-move 40s linear infinite;
    will-change: transform;
}

@keyframes ticker-move {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track {
    animation-play-state: paused;
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 28px;
    margin: 0 var(--space-1);
    padding: 0 var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out);
}

.ticker-item:hover {
    background: var(--surface-hover);
    border-color: var(--border-hairline);
}

.ticker-item__symbol {
    font-weight: var(--fw-bold);
    color: var(--text-muted);
    letter-spacing: var(--tracking-wide);
}

.ticker-price {
    color: var(--text-strong);
    font-weight: var(--fw-semibold);
}

.ticker-item__delta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--fs-xs);
}

.ticker-icon-container {
    display: inline-flex;
    align-items: center;
}

.ticker-arrow {
    font-size: var(--fs-xs);
    line-height: 1;
}

/* Em telas pequenas o ticker some: informacao densa que nao cabe */
@media (max-width: 720px) {
    .ticker {
        display: none;
    }

    /* Esconde o texto da marca apenas na NAV DE DESKTOP comprimida, onde ele
       disputa espaço com o menu. A variante compacta do app (.brand-lockup--sm)
       é a marca principal daquela tela e precisa do texto — sem esta exceção a
       regra a apagava, porque o celular está sempre abaixo de 720px. */
    .brand-lockup:not(.brand-lockup--sm) .brand-lockup__text {
        display: none;
    }

    .nav-right {
        gap: var(--space-2);
    }
}


/* ---------------------------------------------------------------------------
   15. UTILITARIOS DE SUBSTITUICAO DE INLINE
   Cada classe abaixo existe para eliminar um padrao de style="" que se repetia
   no markup. Os valores foram escolhidos para cair na escala de espacamento
   sem alterar o layout de forma perceptivel (ex.: gap 5px -> 4px).
   ------------------------------------------------------------------------ */

/* Eixos ------------------------------------------------------------------ */
.row--tight {
    gap: var(--space-1);
}

.row--wide {
    gap: var(--space-3);
}

.row--top {
    align-items: flex-start;
}

.col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.col--between {
    justify-content: space-between;
}

.center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fill {
    width: 100%;
    height: 100%;
}

.grow {
    flex: 1;
    min-width: 0;
    min-height: 0;
}

.relative {
    position: relative;
}

/* Tamanhos de icone: o Lucide precisa de dimensao explicita, senao o SVG
   nasce com o tamanho do container e "pula" quando os icones sao criados. */
.ico-12 {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
}

.ico-14 {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.ico-16 {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.ico-18 {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.ico-20 {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

/* Icone de ativo (par de moedas / ticker) */
.sym-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.sym-icon--lg {
    width: 22px;
    height: 22px;
}

/* Par sobreposto de icones */
.sym-pair {
    position: relative;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
}

/* Texto ------------------------------------------------------------------ */
.text-muted {
    color: var(--text-muted);
}

.text-strong {
    color: var(--text-strong);
}

.text-brand {
    color: var(--brand-400);
}

.text-warn {
    color: var(--warn);
}

.text-info {
    color: var(--info);
}

.eyebrow {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
}

.section-title {
    margin: 0 0 var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-hairline);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Espacamento: apenas os degraus da escala, para nao voltarem os valores
   arbitrarios (15px, 25px, 40px) que existiam antes. */
.mb-0 {
    margin-bottom: 0;
}

.mb-2 {
    margin-bottom: var(--space-2);
}

.mb-3 {
    margin-bottom: var(--space-3);
}

.mb-4 {
    margin-bottom: var(--space-4);
}

.mb-5 {
    margin-bottom: var(--space-5);
}

.mb-6 {
    margin-bottom: var(--space-6);
}

.mt-0 {
    margin-top: 0;
}

.mt-4 {
    margin-top: var(--space-4);
}

.mt-6 {
    margin-top: var(--space-6);
}

/* ---------------------------------------------------------------------------
   16. COMPLEMENTOS DE LAYOUT (substituem inline de trade_view)
   ------------------------------------------------------------------------ */
.h-full {
    height: 100%;
}

/* O JS aplica transform inline neste icone; aqui fica apenas a transicao */
.spin-target {
    transition: transform var(--dur-base) var(--ease-out);
}

/* Par de icones sobrepostos do ativo */
.sym-pair__a,
.sym-pair__b {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--surface-2);
}

.sym-pair__a {
    top: 0;
    left: 0;
    z-index: 1;
}

.sym-pair__b {
    bottom: 0;
    right: 0;
    z-index: 2;
}

/* Grade Bid/Ask do card de simbolo */
.symbol-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-hairline);
    font-size: var(--fs-sm);
    text-align: left;
    color: var(--text-default);
}

/* ---------------------------------------------------------------------------
   17. PAINEL DE ORDEM (trade_panel)
   ------------------------------------------------------------------------ */
.side-selector--padded {
    padding: 0 var(--space-4);
}

.mb-1 {
    margin-bottom: var(--space-1);
}

/* O botao de executar tinha color:white fixo. Sobre o verde da marca isso
   mede 2.10:1; agora cada lado usa o par de cores que passa em AA. */
.btn-execute.is-buy {
    background-color: var(--pos-fill);
    color: var(--on-brand);
}

.btn-execute.is-sell {
    background-color: var(--neg-fill);
    color: #fff;
}

.trade-footnote {
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--border-hairline);
    background: var(--surface-1);
}

.trade-footnote__row {
    text-align: center;
    margin: var(--space-1) 0 var(--space-2);
}

.trade-footnote__text {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

/* Variacoes de tamanho do par de icones sobrepostos */
.panel-icon-container--26 {
    width: 26px;
    height: 26px;
}

.panel-icon-container--gap {
    margin-right: var(--space-2);
}

.sym-pair__a--16,
.sym-pair__b--16 {
    width: 16px;
    height: 16px;
}

.sym-pair__a--15,
.sym-pair__b--15 {
    width: 15px;
    height: 15px;
}

.option-symbol-title {
    margin-left: var(--space-2);
}

/* ---------------------------------------------------------------------------
   18. X. AI MANAGER (frame_quantum_ai)
   O container raiz declarava font-family 'Inter' inline e o componente
   importava Inter + JetBrains Mono. Agora herda a Montserrat do <html>.
   ------------------------------------------------------------------------ */
#neural-dashboard-root {
    position: relative;
    width: 100%;
    padding-bottom: var(--space-10);
    background: var(--surface-1);
    color: var(--text-default);
    transition: background var(--dur-base) var(--ease-in-out),
        color var(--dur-base) var(--ease-in-out);
}

/* Widgets do TradingView: altura menos a barra de abas do proprio widget */
.fill-below-bar {
    width: 100%;
    height: calc(100% - 32px);
}

/* ---------------------------------------------------------------------------
   19. MENU EXPANDIDO (watchlist + X. AI)
   ------------------------------------------------------------------------ */
.menu-panes {
    display: flex;
    height: 100%;
    min-height: 0;
    background: var(--surface-1);
    color: var(--text-default);
}

.menu-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.menu-pane--list {
    flex: 1;
    min-width: 280px;
    border-right: 1px solid var(--border-default);
    background: var(--surface-1);
}

/* O JS alterna display flex/none neste painel; o padrao fica oculto */
.menu-pane--detail {
    display: none;
    flex: 1;
    gap: var(--space-5);
    padding: var(--space-4);
    background: var(--surface-2);
    border-radius: var(--radius-lg);
    overflow-y: auto;
}

.menu-pane__toolbar {
    padding: var(--space-3);
    border-bottom: 1px solid var(--border-hairline);
    background: var(--surface-1);
}

.menu-detail__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-1);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.menu-detail__hint {
    display: block;
    margin-bottom: var(--space-3);
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-align: right;
}

/* Campo com botao acoplado (cupom, busca) */
.inline-form {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1);
    background: var(--surface-inset);
    border: 1px solid var(--border-control);
    border-radius: var(--radius-sm);
}

.inline-form:focus-within {
    border-color: var(--brand-500);
    box-shadow: var(--shadow-focus);
}

.inline-form__input {
    flex: 1;
    min-width: 0;
    padding-left: var(--space-2);
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-strong);
    font-size: var(--fs-md);
    font-variant-numeric: tabular-nums;
}

.stack--tight {
    gap: var(--space-1);
}

.ico-22 {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
}

.is-dim {
    opacity: .7;
}

/* Tabela compacta da watchlist */
.data-table--compact thead th,
.data-table--compact tbody td {
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-xs);
}

.data-table--fixed {
    table-layout: fixed;
}

.col-w-50 {
    width: 50%;
}

.col-w-25 {
    width: 25%;
}

/* ---------------------------------------------------------------------------
   20. SALA DE OPERACOES (trade_room)
   ------------------------------------------------------------------------ */

/* Estados de tabela: carregando, vazio e erro */
.table-empty {
    padding: var(--space-10) var(--space-6) !important;
    text-align: center;
    color: var(--text-muted);
    background: transparent !important;
    border-bottom: 0 !important;
}

.table-empty--error {
    color: var(--neg);
}

.pane-empty {
    padding-top: var(--space-12);
    text-align: center;
    color: var(--text-muted);
}

/* Aviso / alerta */
.alert {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--fs-base);
    border: 1px solid transparent;
}

.alert--warn {
    background: var(--warn-a12);
    border-color: rgba(233, 185, 73, .24);
    color: var(--warn);
}

/* Area de upload de documento */
.dropzone {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 150px;
    overflow: hidden;
    background: var(--surface-inset);
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-md);
    transition: border-color var(--dur-fast) var(--ease-out),
        background var(--dur-fast) var(--ease-out);
}

.dropzone:hover {
    border-color: var(--brand-500);
    background: var(--brand-a08);
}

.dropzone__preview {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    display: none;
    padding: var(--space-1);
}

.dropzone__hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-md);
    color: var(--text-muted);
}

/* Popover generico ancorado a direita */
.popover {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: var(--z-dropdown);
    width: 220px;
    max-height: 300px;
    margin-top: var(--space-1);
    padding: var(--space-3);
    overflow-y: auto;
    background: var(--surface-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
}

/* Linha de checkbox reutilizavel */
.check-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-xs);
    font-size: var(--fs-md);
    color: var(--text-default);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
}

.check-row:hover {
    background: var(--surface-hover);
}

.check-row__box {
    width: 15px;
    height: 15px;
    accent-color: var(--brand-500);
    cursor: pointer;
    flex: 0 0 auto;
}

/* Select em barra de filtro */
.select--filter {
    height: 34px;
    width: auto;
    min-width: 140px;
    background: var(--surface-3);
    font-size: var(--fs-md);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

/* Rodape de formulario */
.form-footer {
    margin-top: var(--space-8);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-hairline);
    text-align: right;
}

/* Divisores e caixas auxiliares */
.rule {
    border: 0;
    border-top: 1px solid var(--border-hairline);
    margin: var(--space-4) 0;
}

.row-divider {
    border-bottom: 1px solid var(--border-hairline);
}

.chart-box {
    position: relative;
    width: 100%;
    height: 250px;
}

/* Utilitarios pontuais */
.ico-32 {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
}

.is-disabled {
    opacity: .5;
    cursor: not-allowed;
}

.is-clickable {
    cursor: pointer;
}

.push-right {
    margin-left: auto;
}

.w-full {
    width: 100%;
}

.fs-md {
    font-size: var(--fs-md);
}

.fs-lg {
    font-size: var(--fs-lg);
}

.p-2 {
    padding: var(--space-2);
}

.p-4 {
    padding: var(--space-4);
}

.subtitle {
    display: block;
    margin-top: var(--space-1);
}

.link-accent--block {
    display: inline-block;
    margin-top: var(--space-5);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    text-decoration: none;
}

.link-accent--block:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   21. MENU EXPANDIDO: RECOLHER O CONTEUDO
   ----------------------------------------------------------------------------
   A barra de icones fica ANCORADA na direita e nunca se move. O conteudo sai
   do fluxo (position:absolute) e desliza para a direita, passando por baixo da
   barra - exatamente a ideia do #tradePanel, que tambem esta fora do fluxo.

   Colapsar a largura de um filho flex nao serve aqui: como a barra vem depois
   do conteudo no DOM, encolher o conteudo arrastava a barra junto para a
   esquerda em vez de deixa-la fixa.
   ------------------------------------------------------------------------ */
.expanded-menu-container {
    position: relative;
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
}

/* Barra de icones: sempre encostada na direita e acima do conteudo */
.expanded-menu-container .menu-icon-nav {
    flex: 0 0 var(--menu-nav-w);
    width: var(--menu-nav-w);
    margin-left: auto;
    position: relative;
    z-index: 2;
    border-left: 1px solid var(--border-default);
    background: var(--surface-1);
}

/* Conteudo: fora do fluxo, ocupando tudo menos a faixa da barra */
.expanded-menu-container .menu-content-display {
    position: absolute;
    top: 0;
    bottom: 0;
    right: var(--menu-nav-w);
    width: calc(var(--menu-panel-w) - var(--menu-nav-w));
    z-index: 1;
    /* A divisoria fica no border-left da barra de icones; manter as duas
       produzia 2px de traco quando o painel esta aberto. */
    border-right: 0;
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    transition: transform .4s cubic-bezier(.4, 0, .2, 1),
        opacity .25s var(--ease-out),
        visibility 0s;
    will-change: transform;
}

/* Recolhido: desliza a propria largura para a direita e desaparece sob a barra */
.expanded-menu-container.is-collapsed .menu-content-display {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    /* A visibilidade so muda DEPOIS do deslize: sem o atraso ela aplica no
       primeiro quadro e o painel sumiria de uma vez em vez de deslizar. */
    visibility: hidden;
    transition: transform .4s cubic-bezier(.4, 0, .2, 1),
        opacity .25s var(--ease-out),
        visibility 0s .4s;
}

/* Indicador de que aquele clique reabre o painel */
.menu-icon-nav .tool-btn-nav[aria-expanded="false"].active {
    opacity: .7;
}

@media (prefers-reduced-motion: reduce) {

    .expanded-menu-container .menu-content-display {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   22. AJUSTES FINAIS
   ------------------------------------------------------------------------ */

/* Acao principal da carteira: e a unica acao de negocio da barra, entao ganha
   preenchimento solido, um leve halo da marca e o icone com peso proprio.
   As outras duas (Relatorio, Colunas) ficam em ghost, criando hierarquia. */
.btn--cta {
    padding-inline: var(--space-4);
    box-shadow: 0 0 0 1px var(--brand-a32), 0 2px 10px -2px var(--brand-a32);
}

.btn--cta:hover:not(:disabled) {
    box-shadow: 0 0 0 1px var(--brand-a32), 0 4px 14px -2px var(--brand-a32);
}

.btn--cta .btn__icon {
    width: 16px;
    height: 16px;
    stroke-width: 2.4;
}

/* Cabecalho da carteira: respiro consistente e separacao entre o bloco de
   identificacao e o bloco de acoes */
.portfolio-header.panel__header {
    padding: var(--space-3) var(--space-4);
    gap: var(--space-4);
}

.portfolio-header .header-left-info {
    gap: var(--space-3);
    min-width: 0;
}

.portfolio-header .header-right-actions {
    gap: var(--space-1);
    flex: 0 0 auto;
}

/* Em telas estreitas o cabecalho quebra em duas linhas em vez de comprimir */
@media (max-width: 900px) {
    .portfolio-header.panel__header {
        flex-wrap: wrap;
        row-gap: var(--space-2);
    }

    .portfolio-header .header-right-actions {
        width: 100%;
        justify-content: flex-end;
    }
}


/* ---------------------------------------------------------------------------
   23. TELAS DE AUTENTICACAO (login e cadastro)
   Moldura compartilhada: marca a esquerda, formulario a direita.
   ------------------------------------------------------------------------ */
.auth-split {
    display: grid;
    grid-template-columns: minmax(0, 48%) minmax(0, 52%);
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--surface-canvas);
}

/* ---- Lado da marca ---- */
.auth-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-12);
    border-right: 1px solid var(--border-hairline);
    overflow: hidden;
}

/* Malha de mercado discreta ao fundo, em vez de fundo chapado */
.auth-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--border-hairline) 1px, transparent 1px),
        linear-gradient(90deg, var(--border-hairline) 1px, transparent 1px);
    background-size: 46px 46px;
    opacity: .5;
    mask-image: radial-gradient(120% 90% at 20% 30%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(120% 90% at 20% 30%, #000 30%, transparent 75%);
    pointer-events: none;
}

.auth-brand>* {
    position: relative;
}

.auth-brand__logo {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.auth-brand__headline {
    margin: 0 0 var(--space-5);
    font-size: clamp(28px, 3.2vw, 44px);
    font-weight: var(--fw-black);
    line-height: 1.12;
    letter-spacing: -.02em;
    color: var(--text-strong);
    max-width: 20ch;
}

.auth-brand__headline em {
    font-style: normal;
    color: var(--brand-500);
}

.auth-brand__sub {
    margin: 0;
    max-width: 46ch;
    font-size: var(--fs-lg);
    line-height: var(--lh-snug);
    color: var(--text-muted);
}

.auth-brand__list {
    list-style: none;
    margin: var(--space-8) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.auth-brand__list li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    color: var(--text-default);
}

.auth-check {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--brand-a20);
    color: var(--brand-400);
}

.auth-check svg {
    width: 13px;
    height: 13px;
}

.auth-brand__disclaimer {
    margin: 0;
    max-width: 62ch;
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    color: var(--text-subtle);
}

/* ---- Lado do formulario ---- */
.auth-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--space-6) var(--space-12) var(--space-10);
}

.auth-tabs {
    display: inline-flex;
    align-self: flex-end;
    padding: 3px;
    gap: 2px;
    background: var(--surface-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}

.auth-tab {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-sm);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out);
}

.auth-tab:hover {
    color: var(--text-strong);
}

.auth-tab.is-active {
    background: var(--brand-500);
    color: var(--on-brand);
}

.auth-form-wrap {
    width: 100%;
    max-width: 420px;
    margin-top: var(--space-10);
}

.auth-title {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    letter-spacing: -.01em;
    color: var(--text-strong);
}

.auth-subtitle {
    margin: 0 0 var(--space-8);
    font-size: var(--fs-base);
    color: var(--text-muted);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* Grade de dois campos por linha (nome/sobrenome, cpf/pais...) */
.field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.field__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.field__link {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--brand-400);
    text-decoration: none;
    white-space: nowrap;
}

.field__link:hover {
    text-decoration: underline;
}

/* Campo de senha com botao de revelar */
.input-reveal {
    position: relative;
}

.input-reveal .input {
    padding-right: 44px;
}

.input-reveal__btn {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.input-reveal__btn:hover {
    color: var(--text-strong);
    background: var(--surface-hover);
}

.input-reveal__btn svg {
    width: 16px;
    height: 16px;
}

/* Inputs desta tela sao um degrau mais altos que o padrao do terminal */
.auth-form .input,
.auth-form .select {
    height: 46px;
    font-size: var(--fs-base);
    background: var(--surface-2);
    border-color: var(--border-strong);
}

.auth-form .input:hover,
.auth-form .select:hover {
    border-color: var(--border-control);
}

.auth-form .input:focus,
.auth-form .select:focus {
    border-color: var(--brand-500);
    background: var(--surface-3);
}

/* ---- Caixa de verificacao anti-robo ---- */
.turnstile-box {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    min-height: 52px;
}

.turnstile-box__mark {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border-radius: var(--radius-xs);
    border: 1px solid var(--brand-500);
    background: var(--brand-a20);
    color: var(--brand-400);
}

.turnstile-box__mark svg {
    width: 14px;
    height: 14px;
}

.turnstile-box__label {
    flex: 1;
    min-width: 0;
    font-size: var(--fs-md);
    color: var(--text-default);
}

.turnstile-box__brand {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-caps);
    color: var(--text-subtle);
    text-transform: uppercase;
}

.turnstile-box.is-pending .turnstile-box__mark {
    border-color: var(--border-control);
    background: transparent;
    color: var(--text-subtle);
}

/* ---- Medidor de forca de senha ---- */
.strength {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: calc(var(--space-1) * -1);
}

.strength__track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2);
}

.strength__seg {
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--surface-4);
    transition: background var(--dur-base) var(--ease-out);
}

.strength[data-score="1"] .strength__seg:nth-child(-n+1),
.strength[data-score="2"] .strength__seg:nth-child(-n+2),
.strength[data-score="3"] .strength__seg:nth-child(-n+3),
.strength[data-score="4"] .strength__seg {
    background: var(--brand-500);
}

.strength[data-score="1"] .strength__seg:nth-child(-n+1) {
    background: var(--neg);
}

.strength[data-score="2"] .strength__seg:nth-child(-n+2) {
    background: var(--warn);
}

.strength__hint {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* ---- Consentimentos ---- */
.consent-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.consent {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
    cursor: pointer;
    font-size: var(--fs-md);
    line-height: var(--lh-snug);
    color: var(--text-default);
}

.consent input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--brand-500);
    cursor: pointer;
    flex: 0 0 auto;
}

.consent a {
    color: var(--brand-400);
    text-decoration: none;
}

.consent a:hover {
    text-decoration: underline;
}

.consent.is-invalid {
    color: var(--neg);
}

.auth-footnote {
    margin: var(--space-5) 0 0;
    text-align: center;
    font-size: var(--fs-md);
    color: var(--text-muted);
}

.auth-footnote a {
    color: var(--brand-400);
    font-weight: var(--fw-semibold);
    text-decoration: none;
}

.auth-footnote a:hover {
    text-decoration: underline;
}

.auth-error {
    display: none;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--neg-a12);
    border: 1px solid var(--neg);
    color: var(--neg-strong);
    font-size: var(--fs-md);
}

.auth-error.is-visible {
    display: block;
}

/* ---- Responsivo ---- */
@media (max-width: 1024px) {

    .auth-brand,
    .auth-panel {
        padding-inline: var(--space-8);
    }
}

/* Abaixo de 900px a coluna da marca sai: o formulario e a tarefa */
@media (max-width: 900px) {
    .auth-split {
        grid-template-columns: minmax(0, 1fr);
    }

    .auth-brand {
        display: none;
    }

    .auth-panel {
        padding: var(--space-5) var(--space-5) var(--space-8);
    }

    .auth-form-wrap {
        margin-top: var(--space-6);
        max-width: none;
    }
}

@media (max-width: 560px) {
    .field-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .auth-title {
        font-size: var(--fs-xl);
    }
}

/* ---- Toast das telas de autenticacao ---- */
.toast {
    position: fixed;
    top: var(--space-5);
    right: var(--space-5);
    z-index: var(--z-toast);
    max-width: 340px;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    border-left-width: 3px;
    background: var(--surface-3);
    color: var(--text-strong);
    font-size: var(--fs-md);
    box-shadow: var(--shadow-2);
    opacity: 0;
    transform: translateX(24px);
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out);
}

.toast.is-visible {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.toast--error {
    border-left-color: var(--neg);
}

.toast--success {
    border-left-color: var(--brand-500);
}


/* ============================================================================
   24. SHELL MOBILE (estilo aplicativo)
   ----------------------------------------------------------------------------
   Vale apenas para as views de views/mobile/, servidas quando IS_MOBILE.
   O <body> recebe .is-mobile-app, que desliga a centralizacao global.
   ========================================================================= */
body.is-mobile-app {
    display: block;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--surface-1) !important;
    /* Sem realce azul no toque e sem selecao acidental de rotulos */
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: contain;
}

/* Tela do app: ocupa a viewport inteira e respeita as areas seguras */
.mscreen {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
    background: var(--surface-1);
}

/* ---- Barra de topo ---- */
.mtopbar {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: var(--space-2);
    height: 56px;
    padding: 0 var(--space-2);
    flex: 0 0 auto;
}

.mtopbar__title {
    margin: 0;
    text-align: center;
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
}

/* Alvo de toque de 44px mesmo com icone de 20px */
.mtap {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.mtap:active {
    background: var(--surface-hover);
}

.mtap svg {
    width: 20px;
    height: 20px;
}

/* ---- Corpo rolavel ---- */
.mbody {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 var(--space-5) var(--space-6);
}

/* ---- Marca ---- */
.mbrand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) 0 var(--space-6);
}

.mbrand__logo {
    height: 44px;
    width: auto;
    object-fit: contain;
}

.mhero {
    margin: 0 0 var(--space-2);
    text-align: center;
    font-size: var(--fs-2xl);
    font-weight: var(--fw-black);
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--text-strong);
}

.mhero em {
    font-style: normal;
    color: var(--brand-500);
}

.msub {
    margin: 0;
    text-align: center;
    font-size: var(--fs-base);
    line-height: var(--lh-snug);
    color: var(--text-muted);
}

/* ---- Alternador Login / Cadastro ---- */
.msegment {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    padding: 3px;
    margin: 0 0 var(--space-6);
    background: var(--surface-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}

.msegment a {
    display: grid;
    place-items: center;
    height: 40px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out);
}

.msegment a.is-active {
    background: var(--brand-500);
    color: var(--on-brand);
}

/* ---- Formulario ---- */
.mform {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* 52px de altura: confortavel para o dedo e evita o zoom automatico do iOS,
   que dispara quando a fonte do campo e menor que 16px. */
.mform .input,
.mform .select {
    height: 52px;
    font-size: 16px;
    background: var(--surface-2);
    border-color: var(--border-strong);
    border-radius: var(--radius-md);
}

.mform .input:focus,
.mform .select:focus {
    border-color: var(--brand-500);
    background: var(--surface-3);
}

.mform .field__label {
    font-size: var(--fs-sm);
}

.mform .input-reveal__btn {
    width: 44px;
    height: 44px;
    right: 4px;
}

.mgrid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

/* ---- Acao fixa no rodape ---- */
.mfooter {
    position: sticky;
    bottom: 0;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5)
        calc(var(--space-4) + env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--surface-1) 70%, transparent);
    border-top: 1px solid var(--border-hairline);
}

.mbtn {
    display: grid;
    place-items: center;
    width: 100%;
    height: 54px;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--brand-500);
    color: var(--on-brand);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
        transform var(--dur-instant) var(--ease-out);
}

.mbtn:active:not(:disabled) {
    transform: scale(.985);
    background: var(--brand-600);
}

.mbtn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.mfootnote {
    margin: 0;
    text-align: center;
    font-size: var(--fs-base);
    color: var(--text-muted);
}

.mfootnote a {
    color: var(--brand-400);
    font-weight: var(--fw-semibold);
    text-decoration: none;
}

/* ---- Lista de vantagens compacta ---- */
.mlist {
    list-style: none;
    margin: var(--space-6) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.mlist li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--fs-md);
    color: var(--text-default);
}

/* ---- Aviso de risco recolhivel: o texto e longo e nao pode roubar a tela ---- */
.mdisclosure {
    margin-top: var(--space-6);
    border-top: 1px solid var(--border-hairline);
    padding-top: var(--space-4);
}

.mdisclosure summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    cursor: pointer;
    list-style: none;
}

.mdisclosure summary::-webkit-details-marker {
    display: none;
}

.mdisclosure summary::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--dur-base) var(--ease-out);
}

.mdisclosure[open] summary::after {
    transform: rotate(-135deg);
}

.mdisclosure p {
    margin: var(--space-2) 0 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    color: var(--text-subtle);
}

/* ---- Consentimentos com area de toque maior ---- */
.mconsent {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
    padding: var(--space-2) 0;
    font-size: var(--fs-md);
    line-height: var(--lh-snug);
    color: var(--text-default);
    cursor: pointer;
}

.mconsent input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--brand-500);
}

.mconsent a {
    color: var(--brand-400);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mconsent.is-invalid {
    color: var(--neg);
}

/* ---- Medidor de senha ---- */
.mstrength {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mstrength__track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2);
}

.mstrength__seg {
    height: 5px;
    border-radius: var(--radius-pill);
    background: var(--surface-4);
    transition: background var(--dur-base) var(--ease-out);
}

.mstrength[data-score="1"] .mstrength__seg:nth-child(-n+1) {
    background: var(--neg);
}

.mstrength[data-score="2"] .mstrength__seg:nth-child(-n+2) {
    background: var(--warn);
}

.mstrength[data-score="3"] .mstrength__seg:nth-child(-n+3) {
    background: var(--brand-500);
}

.mstrength[data-score="4"] .mstrength__seg {
    background: var(--brand-500);
}

.mstrength__hint {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* ---- Verificacao anti-robo ---- */
.mturnstile {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 56px;
    padding: var(--space-3) var(--space-4);
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
}

.mturnstile__mark {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    border-radius: var(--radius-xs);
    border: 1px solid var(--brand-500);
    background: var(--brand-a20);
    color: var(--brand-400);
}

.mturnstile__mark svg {
    width: 15px;
    height: 15px;
}

.mturnstile__label {
    flex: 1;
    min-width: 0;
    font-size: var(--fs-md);
    color: var(--text-default);
}

.mturnstile__brand {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-subtle);
}

/* ---- Erro ---- */
.merror {
    display: none;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--neg-a12);
    border: 1px solid var(--neg);
    color: var(--neg-strong);
    font-size: var(--fs-md);
}

.merror.is-visible {
    display: block;
}

/* Telas muito baixas (paisagem): a marca sai para o formulario caber */
@media (max-height: 520px) {
    .mbrand {
        display: none;
    }

    .mhero {
        font-size: var(--fs-xl);
    }
}

/* ---------------------------------------------------------------------------
   25. MOBILE: ESTILO DOS COMPONENTES COMPARTILHADOS
   Os campos vem de components/auth_register_fields.php com classes neutras
   (.field-grid, .strength, .consent, .auth-error). A casca mobile nao tem
   markup proprio para eles: apenas os reveste com dimensoes de toque.
   ------------------------------------------------------------------------ */

/* Duas colunas continuam duas colunas no celular (nome/sobrenome, cpf/pais),
   mas com respiro menor. Abaixo de 380px viram uma coluna. */
.mform .field-grid {
    gap: var(--space-3);
}

@media (max-width: 380px) {
    .mform .field-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Medidor de senha: barras mais grossas para leitura a distancia de braco */
.mform .strength__seg {
    height: 5px;
}

.mform .strength__hint {
    font-size: var(--fs-md);
}

/* Consentimentos: caixa de 22px e area de toque vertical maior */
.mform .consent {
    grid-template-columns: 22px minmax(0, 1fr);
    padding: var(--space-2) 0;
    font-size: var(--fs-md);
}

.mform .consent input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin: 0;
}

.mform .consent a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mform .consent-list {
    gap: var(--space-1);
}

/* Erro: raio maior, alinhado ao restante do app */
.mform .auth-error {
    border-radius: var(--radius-md);
    font-size: var(--fs-md);
}

/* O rotulo do campo no app fica um degrau maior que no terminal */
.mform .field__label {
    font-size: var(--fs-sm);
}


/* ============================================================================
   26. APP MOBILE: NAVEGACAO, PAINEIS E FOLHA DE ORDEM
   ========================================================================= */

/* A tela do terminal nao rola: cada painel rola por dentro. Sem isso o
   endereco do navegador aparece e desaparece a cada arrasto. */
.mapp {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
    padding-top: env(safe-area-inset-top);
    background: var(--surface-1);
}

/* ---- Cabecalho com ativo e preco ---- */
.mhead {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 0 0 auto;
    height: 56px;
    padding: 0 var(--space-4);
    border-bottom: 1px solid var(--border-hairline);
    background: var(--surface-1);
}

.msymbol {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-1) var(--space-2);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-strong);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    cursor: pointer;
}

.msymbol:active {
    background: var(--surface-hover);
}

.msymbol svg {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    flex: 0 0 auto;
}

.mprice {
    margin-left: auto;
    text-align: right;
    line-height: 1.15;
}

.mprice__value {
    display: block;
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

.mprice__delta {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
}

/* ---- Paineis trocados pelas abas ---- */
.mpanels {
    flex: 1;
    min-height: 0;
    position: relative;
}

.mpanel {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.mpanel.is-active {
    display: flex;
}

/* Conteudo rolavel do painel, com folga para nao ficar sob a barra de abas */
.mpanel__scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-4);
}

/* O grafico precisa de altura definida, senao o widget do TradingView nasce 0 */
.mchart {
    flex: 1;
    min-height: 0;
    background: var(--surface-2);
}

.mchart .widget-wrapper,
.mchart .tv-widget-container {
    height: 100% !important;
}

/* ---- Barra de abas inferior ---- */
.mtabbar {
    flex: 0 0 auto;
    display: grid;
    /* 5 colunas: Inicio, Mercados, Operar, Carteira e X. AI.
       A Conta nao esta aqui — vive na gaveta do hamburguer. */
    grid-template-columns: repeat(5, 1fr);
    align-items: stretch;
    border-top: 1px solid var(--border-default);
    background: var(--surface-2);
    padding-bottom: env(safe-area-inset-bottom);
}

.mtabbar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 56px;
    padding: var(--space-2) var(--space-1);
    color: var(--text-subtle);
    text-decoration: none;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    -webkit-tap-highlight-color: transparent;
}

.mtabbar__item svg {
    width: 22px;
    height: 22px;
}

.mtabbar__item:active {
    background: var(--surface-hover);
}

.mtabbar__item.is-active {
    color: var(--brand-400);
}

/* Acao de operar em destaque, como nos apps de corretora */
.mtabbar__item--cta {
    color: var(--brand-400);
}

.mtabbar__item--cta svg {
    width: 28px;
    height: 28px;
}

/* ---- Lista de mercados em cartoes (tabela nao cabe em 360px) ---- */
.mquote {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 0;
    border-bottom: 1px solid var(--border-hairline);
    background: transparent;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mquote:active {
    background: var(--surface-hover);
}

.mquote__name {
    display: block;
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    color: var(--text-strong);
}

.mquote__desc {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mquote__right {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.mquote__bid {
    display: block;
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
}

.mquote__var {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
}

/* Filtro de categoria por rolagem horizontal */
.mchips {
    display: flex;
    gap: var(--space-2);
    flex: 0 0 auto;
    padding: var(--space-3) var(--space-4);
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--border-hairline);
}

.mchips::-webkit-scrollbar {
    display: none;
}

.mchip {
    flex: 0 0 auto;
    height: 34px;
    padding: 0 var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    background: var(--surface-3);
    color: var(--text-muted);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mchip.is-active {
    background: var(--brand-a20);
    border-color: var(--brand-500);
    color: var(--brand-400);
}

/* Busca ativa: a lista passa a vir de TODAS as categorias, entao nenhum chip
   representa o que esta na tela. Deixar um aceso apontaria para o lugar errado
   — GOLD aparecendo com "Crypto" marcado pareceria defeito. Os chips seguem
   clicaveis: tocar em um limpa a busca e volta para a categoria. */
.mchips.is-searching .mchip.is-active {
    background: var(--surface-3);
    border-color: var(--border-default);
    color: var(--text-muted);
}

/* ---- Folha inferior (bottom sheet) para a ordem ---- */
.msheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background: rgba(0, 0, 0, .6);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-base) var(--ease-out), visibility 0s .22s;
}

.msheet-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur-base) var(--ease-out), visibility 0s;
}

.msheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column;
    max-height: 88dvh;
    background: var(--surface-2);
    border-top: 1px solid var(--border-default);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: var(--shadow-3);
    transform: translateY(100%);
    transition: transform var(--dur-base) var(--ease-out);
    padding-bottom: env(safe-area-inset-bottom);
}

.msheet.is-open {
    transform: translateY(0);
}

/* Alca de arraste: sinaliza que a folha e dispensavel */
.msheet__grip {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    height: 28px;
    cursor: grab;
}

.msheet__grip::before {
    content: "";
    width: 40px;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--border-control);
}

.msheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex: 0 0 auto;
    padding: 0 var(--space-4) var(--space-3);
    border-bottom: 1px solid var(--border-hairline);
}

.msheet__title {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--text-strong);
}

.msheet__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* O painel de ordem herda a largura da folha */
.msheet__body .trade-inner-content {
    max-height: none;
    height: auto;
    padding-bottom: var(--space-6);
}

.msheet__body .trade-form {
    padding: var(--space-4);
}

.msheet__body .trade-header {
    display: none;
}

/* ---- Estado vazio compacto ---- */
.mempty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-10) var(--space-6);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--fs-md);
}

/* ---- Carteira no app: tiles em duas colunas e tabela rolando por dentro ---- */
.mpanel .stat-strip {
    border-top: 0;
    border-bottom: 1px solid var(--border-hairline);
}

.mpanel .portfolio-header {
    padding: var(--space-3) var(--space-4);
}

/* A barra de acoes da carteira nao cabe: vira so o essencial */
.mpanel .header-right-actions .btn--ghost {
    display: none;
}

/* ---------------------------------------------------------------------------
   27. APP MOBILE: TELA DE CONTA
   ------------------------------------------------------------------------ */
.mprofile {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-4);
    border-bottom: 1px solid var(--border-hairline);
}

.mprofile__avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.mprofile__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mprofile__info strong {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--text-strong);
}

.mprofile__info span {
    font-size: var(--fs-md);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Lista de navegacao: substitui a barra de 6 abas do desktop, que nao cabe */
.mrows {
    margin: var(--space-5) 0 0;
    background: var(--surface-2);
    border-top: 1px solid var(--border-hairline);
    border-bottom: 1px solid var(--border-hairline);
}

.mrow {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
    min-height: 56px;
    padding: var(--space-3) var(--space-4);
    border: 0;
    border-bottom: 1px solid var(--border-hairline);
    background: transparent;
    color: var(--text-default);
    font-size: var(--fs-base);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mrow:last-child {
    border-bottom: 0;
}

.mrow:active {
    background: var(--surface-hover);
}

.mrow__icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: var(--text-muted);
}

.mrow__label {
    flex: 1;
    min-width: 0;
}

.mrow__chevron {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--text-subtle);
}

.mrow--danger,
.mrow--danger .mrow__icon {
    color: var(--neg);
}

.mdisclaimer {
    margin: var(--space-6) 0 0;
    padding: 0 var(--space-4);
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    color: var(--text-subtle);
}


/* ============================================================================
   28. DESIGN SYSTEM MOBILE
   ----------------------------------------------------------------------------
   Componentes proprios do app. Tudo escopado em body.is-mobile-app para o
   terminal de desktop manter sua densidade: 44px de alvo no desktop deixaria
   a interface inflada, e o requisito e mobile-first, nao mobile-only.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   28.1 ALVOS DE TOQUE
   Auditoria encontrou 7 controles interativos abaixo de 44px. Aqui eles sao
   elevados sem mexer no tamanho do icone: cresce a area, nao o desenho.
   ------------------------------------------------------------------------ */
body.is-mobile-app .icon-btn,
body.is-mobile-app .icon-btn--sm,
body.is-mobile-app .input-reveal__btn,
body.is-mobile-app .tool-btn,
body.is-mobile-app .tool-btn-nav {
    min-width: 44px;
    min-height: 44px;
    width: auto;
    height: auto;
}

body.is-mobile-app .auth-tab,
body.is-mobile-app .msegment a,
body.is-mobile-app .mchip {
    min-height: 44px;
}

body.is-mobile-app .wallet-chip {
    min-height: 44px;
    padding-inline: var(--space-2) var(--space-3);
}

/* Caixa de marcacao: o alvo e a linha inteira, nao o quadrado de 22px */
body.is-mobile-app .consent,
body.is-mobile-app .check-row {
    min-height: 44px;
    align-items: center;
}

/* ---------------------------------------------------------------------------
   28.2 SNACKBAR
   Mensagem transitoria acima da barra de abas, nunca por cima dela.
   ------------------------------------------------------------------------ */
.snackbar-host {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(56px + env(safe-area-inset-bottom));
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    pointer-events: none;
}

.snackbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-strong);
    border-left: 3px solid var(--text-muted);
    border-radius: var(--radius-md);
    background: var(--surface-4);
    color: var(--text-strong);
    font-size: var(--fs-md);
    box-shadow: var(--shadow-2);
    pointer-events: auto;
    transform: translateY(12px);
    opacity: 0;
    transition: transform var(--dur-base) var(--ease-out),
        opacity var(--dur-base) var(--ease-out);
}

.snackbar.is-visible {
    transform: translateY(0);
    opacity: 1;
}

.snackbar--pos {
    border-left-color: var(--brand-500);
}

.snackbar--neg {
    border-left-color: var(--neg);
}

.snackbar--warn {
    border-left-color: var(--warn);
}

.snackbar__icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.snackbar__text {
    flex: 1;
    min-width: 0;
}

.snackbar__action {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 0 var(--space-2);
    border: 0;
    background: transparent;
    color: var(--brand-400);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
   28.3 FAB
   Fica acima da barra de abas e do lado direito, no arco natural do polegar.
   ------------------------------------------------------------------------ */
.fab {
    position: fixed;
    right: var(--space-4);
    bottom: calc(56px + env(safe-area-inset-bottom) + var(--space-4));
    z-index: var(--z-dropdown);
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--brand-500);
    color: var(--on-brand);
    box-shadow: 0 6px 20px -4px var(--brand-a32), var(--shadow-2);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--dur-fast) var(--ease-out),
        background var(--dur-fast) var(--ease-out);
}

.fab:active {
    transform: scale(.94);
    background: var(--brand-600);
}

.fab svg {
    width: 26px;
    height: 26px;
}

.fab--left {
    right: auto;
    left: var(--space-4);
}

/* ---------------------------------------------------------------------------
   28.4 BUSCA
   ------------------------------------------------------------------------ */
.msearch {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.msearch__icon {
    position: absolute;
    left: var(--space-3);
    width: 18px;
    height: 18px;
    color: var(--text-subtle);
    pointer-events: none;
}

.msearch__input {
    width: 100%;
    height: 44px;
    padding: 0 44px 0 40px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--text-strong);
    /* 16px evita o zoom automatico do iOS ao focar */
    font-size: 16px;
}

.msearch__input::placeholder {
    color: var(--text-subtle);
}

.msearch__input:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: var(--shadow-focus);
}

.msearch__clear {
    position: absolute;
    right: 4px;
    display: none;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.msearch.has-value .msearch__clear {
    display: grid;
}

.msearch__clear svg {
    width: 16px;
    height: 16px;
}

/* ---------------------------------------------------------------------------
   28.5 SWITCH
   ------------------------------------------------------------------------ */
.mswitch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 52px;
    cursor: pointer;
    font-size: var(--fs-base);
    color: var(--text-default);
}

.mswitch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.mswitch__track {
    position: relative;
    flex: 0 0 auto;
    width: 50px;
    height: 30px;
    border-radius: var(--radius-pill);
    background: var(--surface-4);
    border: 1px solid var(--border-control);
    transition: background var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out);
}

.mswitch__track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: transform var(--dur-base) var(--ease-out),
        background var(--dur-fast) var(--ease-out);
}

.mswitch input:checked+.mswitch__track {
    background: var(--brand-a32);
    border-color: var(--brand-500);
}

.mswitch input:checked+.mswitch__track::after {
    transform: translateX(20px);
    background: var(--brand-500);
}

.mswitch input:focus-visible+.mswitch__track {
    box-shadow: var(--shadow-focus);
}

/* ---------------------------------------------------------------------------
   28.6 DROPDOWN / SELETOR EM FOLHA
   Em mobile o select nativo e ruim de ler: a escolha vira uma folha inferior.
   ------------------------------------------------------------------------ */
.mselect {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    min-height: 52px;
    padding: 0 var(--space-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--text-strong);
    font-size: 16px;
    text-align: left;
    cursor: pointer;
}

.mselect:active {
    background: var(--surface-3);
}

.mselect__caret {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--text-muted);
}

.moption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    min-height: 52px;
    padding: 0 var(--space-4);
    border: 0;
    border-bottom: 1px solid var(--border-hairline);
    background: transparent;
    color: var(--text-default);
    font-size: var(--fs-base);
    text-align: left;
    cursor: pointer;
}

.moption:active {
    background: var(--surface-hover);
}

.moption.is-selected {
    color: var(--brand-400);
    font-weight: var(--fw-semibold);
}

.moption__check {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    opacity: 0;
}

.moption.is-selected .moption__check {
    opacity: 1;
}

/* ---------------------------------------------------------------------------
   28.7 PULL TO REFRESH
   ------------------------------------------------------------------------ */
.mptr {
    position: relative;
}

.mptr__spinner {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-left: -16px;
    border-radius: 50%;
    background: var(--surface-3);
    border: 1px solid var(--border-default);
    color: var(--brand-400);
    opacity: 0;
    transform: translateY(-40px);
    transition: opacity var(--dur-fast) var(--ease-out);
    pointer-events: none;
}

.mptr__spinner svg {
    width: 16px;
    height: 16px;
}

.mptr.is-pulling .mptr__spinner {
    opacity: 1;
}

.mptr.is-refreshing .mptr__spinner {
    opacity: 1;
    transform: translateY(12px);
}

.mptr.is-refreshing .mptr__spinner svg {
    animation: mspin .7s linear infinite;
}

@keyframes mspin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------------------------------------------------------------------------
   28.8 SKELETON DE LISTA
   ------------------------------------------------------------------------ */
.mskel-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 84px;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-hairline);
}

.mskel-row__lines {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* ---------------------------------------------------------------------------
   28.9 RESPOSTA AO TOQUE
   Escala sutil no toque: confirma a acao antes de a rede responder.
   ------------------------------------------------------------------------ */
body.is-mobile-app .mquote:active,
body.is-mobile-app .mrow:active,
body.is-mobile-app .moption:active,
body.is-mobile-app .mchip:active {
    transform: scale(.99);
}

body.is-mobile-app .mbtn:active,
body.is-mobile-app .btn--primary:active {
    transform: scale(.985);
}

/* ---------------------------------------------------------------------------
   28.10 BREAKPOINTS DOS APARELHOS ALVO
   320 / 360 / 375 / 390 / 412 / 430 / 768
   ------------------------------------------------------------------------ */

/* 320-359px: o menor aparelho suportado. Nada pode ter largura fixa. */
@media (max-width: 359px) {

    .mtabbar__item {
        font-size: 9px;
    }

    .mtabbar__item svg {
        width: 20px;
        height: 20px;
    }

    .mhead {
        padding-inline: var(--space-3);
    }

    .mquote,
    .mrow,
    .mchips {
        padding-inline: var(--space-3);
    }

    .msymbol,
    .mprice__value {
        font-size: var(--fs-base);
    }

    /* Duas colunas em 320px deixam o campo com 140px: uma coluna e mais legivel */
    .mform .field-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* 412px+: sobra largura para respiro maior */
@media (min-width: 412px) {

    .mbody,
    .mpanel__scroll {
        padding-inline: var(--space-5);
    }

    .mquote,
    .mrow {
        padding-inline: var(--space-5);
    }
}

/* 768px (tablet retrato): o app centraliza em coluna, sem esticar a linha */
@media (min-width: 768px) {
    body.is-mobile-app .mscreen,
    body.is-mobile-app .mapp {
        max-width: 560px;
        margin-inline: auto;
        border-inline: 1px solid var(--border-hairline);
    }

    .snackbar-host,
    .fab {
        max-width: 560px;
        margin-inline: auto;
        left: 0;
        right: 0;
    }

    .fab {
        left: auto;
        right: calc(50% - 280px + var(--space-4));
    }
}

/* Movimento reduzido: o brief pede micro animacoes, o sistema pode recusa-las */
@media (prefers-reduced-motion: reduce) {

    .snackbar,
    .fab,
    .mswitch__track,
    .mswitch__track::after {
        transition: none;
    }

    .mptr.is-refreshing .mptr__spinner svg {
        animation: none;
    }
}

/* ============================================================================
   29. CAMADA DE CONFIANCA (nivel institucional)
   ----------------------------------------------------------------------------
   Tres regras que separam um terminal profissional de um painel qualquer:
     1. nenhum estado assincrono sem tratamento (carregando / vazio / erro)
     2. o numero nunca salta de largura nem de posicao ao atualizar
     3. dado velho e sinalizado, jamais exibido como se fosse ao vivo
   ========================================================================= */

/* ---------------------------------------------------------------------------
   29.1 POSICOES EM CARTAO NO MOBILE
   A tabela de posicoes tem 14 colunas. Em vez de trocar o markup - o que
   quebraria o seletor de colunas que usa [data-col] - a mesma tabela e
   reapresentada como cartao via CSS, lendo o rotulo de data-label.
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {

    body.is-mobile-app .mpanel .data-table,
    body.is-mobile-app .mpanel .data-table tbody,
    body.is-mobile-app .mpanel .data-table tr {
        display: block;
        width: 100%;
    }

    body.is-mobile-app .mpanel .data-table thead {
        display: none;
    }

    body.is-mobile-app .mpanel .data-table tbody tr {
        position: relative;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-2) var(--space-3);
        margin: 0 0 var(--space-2);
        padding: var(--space-3) var(--space-4);
        background: var(--surface-2);
        border: 1px solid var(--border-hairline);
        border-radius: var(--radius-md);
    }

    body.is-mobile-app .mpanel .data-table tbody td {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 0;
        border: 0;
        white-space: normal;
        text-align: left;
        font-size: var(--fs-md);
    }

    /* Rotulo acima do valor, no lugar do cabecalho que foi escondido */
    body.is-mobile-app .mpanel .data-table tbody td[data-label]::before {
        content: attr(data-label);
        font-size: var(--fs-2xs);
        font-weight: var(--fw-semibold);
        letter-spacing: var(--tracking-caps);
        text-transform: uppercase;
        color: var(--text-muted);
    }

    /* Ativo e resultado ocupam a linha inteira e ganham destaque */
    body.is-mobile-app .mpanel .data-table td[data-col="symbol"],
    body.is-mobile-app .mpanel .data-table td[data-col="variation"] {
        grid-column: span 2;
        font-size: var(--fs-lg);
        font-weight: var(--fw-bold);
    }

    body.is-mobile-app .mpanel .data-table td[data-col="symbol"] {
        padding-bottom: var(--space-2);
        border-bottom: 1px solid var(--border-hairline);
    }

    /* Numeros alinhados a esquerda no cartao: coluna estreita nao justifica */
    body.is-mobile-app .mpanel .data-table .num {
        text-align: left;
    }

    /* Acoes: barra propria no fim do cartao, com alvo de 44px */
    body.is-mobile-app .mpanel .data-table td[data-col="action"] {
        grid-column: span 2;
        position: static;
        background: transparent !important;
        padding-top: var(--space-2);
        border-top: 1px solid var(--border-hairline);
    }

    body.is-mobile-app .mpanel .data-table td[data-col="action"]::before {
        display: none;
    }

    body.is-mobile-app .mpanel .row-actions {
        justify-content: flex-end;
        gap: var(--space-2);
    }

    body.is-mobile-app .mpanel .row-actions .icon-btn {
        min-width: 44px;
        min-height: 44px;
        opacity: 1;
    }

    /* O cartao nao precisa de rolagem horizontal */
    body.is-mobile-app .mpanel .table-scroll {
        overflow-x: hidden;
        padding: var(--space-3) var(--space-3) 0;
    }

    /* Estado vazio ocupa o cartao inteiro */
    body.is-mobile-app .mpanel .data-table .no-positions-td {
        display: block;
        grid-column: span 2;
    }
}

/* ---------------------------------------------------------------------------
   29.2 SELO DE DADO DESATUALIZADO
   Se o fluxo de precos para, o numero para com ele. Exibir preco velho sem
   aviso e o pior defeito possivel num terminal.
   ------------------------------------------------------------------------ */
.mstale {
    display: none;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--warn-a12);
    border-bottom: 1px solid var(--warn);
    color: var(--warn);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
}

body.is-stale .mstale {
    display: flex;
}

/* Enquanto o dado esta velho, o preco perde a cor viva: nao finge estar ao vivo */
body.is-stale .mprice__value,
body.is-stale .mquote__bid {
    color: var(--text-muted);
}

.mstale__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
    animation: mpulse 1.6s var(--ease-in-out) infinite;
}

@keyframes mpulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .35;
    }
}

/* ---------------------------------------------------------------------------
   29.3 ESTABILIDADE DO NUMERO
   Sem isto, cada atualizacao muda a largura do digito e a linha "dança".
   ------------------------------------------------------------------------ */
.mquote__bid,
.mquote__var,
.mprice__value,
.mprice__delta,
body.is-mobile-app .data-table td {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Realce momentaneo na direcao do movimento, em vez de trocar o numero seco */
@keyframes mflash-up {
    from {
        background-color: var(--pos-a12);
    }

    to {
        background-color: transparent;
    }
}

@keyframes mflash-down {
    from {
        background-color: var(--neg-a12);
    }

    to {
        background-color: transparent;
    }
}

.is-up {
    animation: mflash-up .6s var(--ease-out);
}

.is-down {
    animation: mflash-down .6s var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {

    .is-up,
    .is-down,
    .mstale__dot {
        animation: none;
    }
}


/* ============================================================================
   30. DASHBOARD, FAVORITOS E BUSCA
   ----------------------------------------------------------------------------
   Arquitetura de app de corretora: a tela inicial resume a conta, os mercados
   ganham busca e favoritos, e o grafico e alcancado tocando o ativo.
   Sem rota nova: sao paineis do terminal, trocados pela barra inferior.
   ========================================================================= */

/* ---- Cartao de saldo: o primeiro dado que o operador procura ---- */
.mbalance {
    margin: var(--space-4);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(120% 140% at 100% 0%, var(--brand-a12), transparent 60%),
        var(--surface-2);
    border: 1px solid var(--border-default);
}

.mbalance__label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
}

.mbalance__value {
    display: block;
    margin: var(--space-2) 0 var(--space-1);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-black);
    letter-spacing: -.02em;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

.mbalance__sub {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
}

/* Ocultar saldo: privacidade em tela publica */
.mbalance__eye {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: -6px -6px -6px auto;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.mbalance__eye svg {
    width: 18px;
    height: 18px;
}

body.is-private .mbalance__value,
body.is-private .mbalance__sub,
body.is-private .mkpi__value {
    -webkit-text-security: disc;
    letter-spacing: .12em;
}

/* ---- Indicadores em grade ---- */
.mkpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0 var(--space-4) var(--space-5);
}

.mkpi {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    border: 1px solid var(--border-hairline);
}

.mkpi__label {
    display: block;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--text-muted);
}

.mkpi__value {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

/* ---- Acoes rapidas: menos toques para a tarefa principal ---- */
.mactions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
    margin: 0 var(--space-4) var(--space-6);
}

.maction {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    min-height: 76px;
    padding: var(--space-3) var(--space-1);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--text-default);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.maction:active {
    background: var(--surface-3);
}

.maction__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--brand-a12);
    color: var(--brand-400);
}

.maction__icon svg {
    width: 18px;
    height: 18px;
}

/* ---- Cabecalho de secao ---- */
.msection {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4) var(--space-2);
}

.msection__title {
    margin: 0;
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    color: var(--text-strong);
}

.msection__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: var(--space-2);
    margin-right: calc(var(--space-2) * -1);
    border: 0;
    background: none;
    color: var(--brand-400);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    cursor: pointer;
}

/* ---- Estrela de favorito no cartao de cotacao ---- */
.mquote--star {
    grid-template-columns: 40px minmax(0, 1fr) auto;
}

.mstar {
    display: grid;
    place-items: center;
    width: 40px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--text-subtle);
    cursor: pointer;
}

.mstar svg {
    width: 18px;
    height: 18px;
}

.mstar.is-on {
    color: var(--warn);
}

.mstar.is-on svg {
    fill: currentColor;
}

/* ---- Barra de busca do painel de mercados ---- */
.mtoolbar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-hairline);
}

.mchip--fav {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.mchip--fav svg {
    width: 15px;
    height: 15px;
}


/* ============================================================================
   31. CONTA NO MOBILE: DOMINANDO O LAYOUT DE DESKTOP
   ----------------------------------------------------------------------------
   As sub-telas (Perfil, Deposito, Saque, Historicos) vivem em
   views/pages/trade_room.php, junto do switchTab() que as alterna. Reescrever
   aquele arquivo duplicaria seis formularios e a logica de troca.
   A saida: manter o conteudo e substituir apenas a MOLDURA - a barra de abas
   de desktop, que estourava na horizontal, da lugar ao menu em chips do app.
   ========================================================================= */

body.is-mobile-app .room-main-content {
    display: block;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    padding: 0;
    background: var(--surface-1);
}

/* A barra de abas de desktop tinha padding de 40px e nao caber era garantido */
body.is-mobile-app .room-tabs-nav {
    display: none;
}

/* Cartoes ocupam a largura toda, sem margem lateral desperdicada */
body.is-mobile-app .profile-card,
body.is-mobile-app .room-tab-content>div {
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    padding: var(--space-4);
}

body.is-mobile-app .room-tab-content {
    padding: 0;
}

/* Grades de formulario de duas colunas viram uma */
body.is-mobile-app .room-main-content .form-row,
body.is-mobile-app .room-main-content .form-grid,
body.is-mobile-app .room-main-content [class*="grid-2"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--space-4) !important;
}

/* Campos com altura e fonte de toque; 16px evita o zoom automatico do iOS */
body.is-mobile-app .room-main-content .form-control,
body.is-mobile-app .room-main-content select,
body.is-mobile-app .room-main-content input[type="text"],
body.is-mobile-app .room-main-content input[type="email"],
body.is-mobile-app .room-main-content input[type="number"],
body.is-mobile-app .room-main-content input[type="tel"] {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
    box-sizing: border-box;
}

/* Menu lateral do Perfil: virava lista comprimida; agora rola na horizontal */
body.is-mobile-app .room-main-content .side-item {
    min-height: 48px;
}

/* Filtros que ficavam lado a lado e cortavam */
body.is-mobile-app .room-main-content .filter-group {
    width: 100%;
    min-width: 0;
}

/* Tabelas: a mesma transformacao em cartao usada na carteira */
@media (max-width: 767px) {

    body.is-mobile-app .room-main-content table {
        display: block;
        width: 100%;
    }

    body.is-mobile-app .room-main-content thead {
        display: none;
    }

    body.is-mobile-app .room-main-content tbody,
    body.is-mobile-app .room-main-content tbody tr {
        display: block;
        width: 100%;
    }

    body.is-mobile-app .room-main-content tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-2) var(--space-3);
        margin-bottom: var(--space-2);
        padding: var(--space-3);
        background: var(--surface-2);
        border: 1px solid var(--border-hairline);
        border-radius: var(--radius-md);
    }

    body.is-mobile-app .room-main-content tbody td {
        display: block;
        padding: 0;
        border: 0;
        white-space: normal;
        text-align: left;
        font-size: var(--fs-md);
    }

    /* O container da tabela nao rola mais na horizontal */
    body.is-mobile-app .room-main-content .table-scroll {
        overflow-x: hidden;
        padding: var(--space-3);
    }

    body.is-mobile-app .room-main-content .table-empty {
        grid-column: span 2;
    }
}

/* ---- Menu de secoes em chips: substitui a barra de abas de desktop ---- */
.mroom-menu {
    display: flex;
    gap: var(--space-2);
    flex: 0 0 auto;
    padding: var(--space-3) var(--space-4);
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--border-hairline);
    background: var(--surface-1);
}

.mroom-menu::-webkit-scrollbar {
    display: none;
}

.mroom-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    background: var(--surface-3);
    color: var(--text-muted);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mroom-chip svg {
    width: 16px;
    height: 16px;
}

.mroom-chip.is-active {
    background: var(--brand-a20);
    border-color: var(--brand-500);
    color: var(--brand-400);
}

/* ---------------------------------------------------------------------------
   31.1 NEUTRALIZAR O SHELL DE DESKTOP DENTRO DA CASCA DO APP
   ----------------------------------------------------------------------------
   views/pages/trade_room.php abre com <div class="main-layout">, que e
   position:fixed com 100vw/100vh e !important. Incluido dentro do .mapp, ele
   cobria a casca inteira: cabecalho, menu de chips e barra inferior sumiam, e
   sobrava a nav de desktop no topo. Aqui ele volta a ser conteudo em fluxo.
   ------------------------------------------------------------------------ */
body.is-mobile-app .mpanel__scroll .main-layout {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    display: block !important;
    background: transparent !important;
}

/* A nav de desktop e o ticker sao redundantes: a casca do app ja da o contexto
   pela barra de topo e pela barra inferior. */
body.is-mobile-app .mpanel__scroll .top-section,
body.is-mobile-app .mpanel__scroll .nav-menu,
body.is-mobile-app .mpanel__scroll .market-ticker,
body.is-mobile-app .mpanel__scroll .ticker {
    display: none !important;
}

/* O corpo interno tambem precisa sair do modelo de altura fixa */
body.is-mobile-app .mpanel__scroll .app-body,
body.is-mobile-app .mpanel__scroll .room-main-content {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    overflow: visible !important;
    flex: none !important;
}

/* Paineis laterais do terminal nao existem nesta tela */
body.is-mobile-app .mpanel__scroll .sidebar-tools,
body.is-mobile-app .mpanel__scroll .trade-sidebar,
body.is-mobile-app .mpanel__scroll .navigation-expanded {
    display: none !important;
}


/* ---------------------------------------------------------------------------
   31.2 ADAPTACAO DO CONTEUDO DAS SUB-TELAS
   ----------------------------------------------------------------------------
   Conter o layout nao basta: cada estrutura interna precisa refluir para uma
   coluna, com alvo de toque e leitura confortavel. Levantei as classes reais
   usadas dentro das seis abas e cobri todas.
   ------------------------------------------------------------------------ */

/* ---- Layout de duas colunas (Perfil: menu lateral + conteudo) ---- */
body.is-mobile-app .mpanel__scroll .operation-layout,
body.is-mobile-app .mpanel__scroll .profile-layout {
    display: block !important;
    width: 100% !important;
}

/* O menu lateral do Perfil vira trilha horizontal de chips */
body.is-mobile-app .mpanel__scroll .side-list {
    display: flex !important;
    gap: var(--space-2);
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 var(--space-4);
    padding: 0 0 var(--space-2);
    overflow-x: auto;
    scrollbar-width: none;
    border: 0 !important;
}

body.is-mobile-app .mpanel__scroll .side-list::-webkit-scrollbar {
    display: none;
}

body.is-mobile-app .mpanel__scroll .side-item {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 var(--space-4);
    margin: 0;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-pill) !important;
    background: var(--surface-3);
    white-space: nowrap;
    font-size: var(--fs-md);
}

body.is-mobile-app .mpanel__scroll .side-item.active {
    background: var(--brand-a20);
    border-color: var(--brand-500) !important;
    color: var(--brand-400);
}

/* ---- Cartoes de indicador (Painel) em duas colunas ---- */
body.is-mobile-app .mpanel__scroll .stat-card,
body.is-mobile-app .mpanel__scroll .perf-stat-item {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: var(--space-3) var(--space-4) !important;
    box-sizing: border-box;
}

/* Qualquer grade de cartoes do painel vira 2 colunas; 1 abaixo de 360px */
body.is-mobile-app .mpanel__scroll .dashboard-panel-card,
body.is-mobile-app .mpanel__scroll .main-detail-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 var(--space-3) !important;
    box-sizing: border-box;
}

/* ---- Linhas de carteira: rotulo em cima, valor embaixo ---- */
body.is-mobile-app .mpanel__scroll .wallet-list-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    min-height: 56px;
    padding: var(--space-3) 0 !important;
    border-bottom: 1px solid var(--border-hairline);
}

/* ---- Formularios: uma coluna, campo cheio, botao cheio ---- */
body.is-mobile-app .mpanel__scroll .form-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--space-4) !important;
}

body.is-mobile-app .mpanel__scroll .form-group {
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: var(--space-4);
}

body.is-mobile-app .mpanel__scroll .btn-action,
body.is-mobile-app .mpanel__scroll .form-footer .btn,
body.is-mobile-app .mpanel__scroll button[type="submit"] {
    width: 100% !important;
    min-height: 52px !important;
    justify-content: center;
}

body.is-mobile-app .mpanel__scroll .form-footer {
    text-align: center !important;
}

/* ---- Barra de filtros: empilha em vez de cortar ---- */
body.is-mobile-app .mpanel__scroll .filter-group {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 var(--space-3) !important;
}

body.is-mobile-app .mpanel__scroll .filter-select,
body.is-mobile-app .mpanel__scroll .select--filter {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px;
    font-size: 16px;
}

/* A barra de filtros inteira passa a ser coluna */
body.is-mobile-app .mpanel__scroll .row--between:has(.filter-group),
body.is-mobile-app .mpanel__scroll .row--wide:has(.filter-group) {
    display: block !important;
}

/* ---- Area de upload de documento ---- */
body.is-mobile-app .mpanel__scroll .dropzone {
    height: 132px !important;
}

body.is-mobile-app .mpanel__scroll input[type="file"] {
    width: 100% !important;
    min-height: 48px;
    box-sizing: border-box;
}

/* ---- Titulos de secao: menores e sem estourar ---- */
body.is-mobile-app .mpanel__scroll .section-title {
    font-size: var(--fs-base) !important;
    flex-wrap: wrap;
    margin-bottom: var(--space-4) !important;
    padding-bottom: var(--space-3) !important;
}

body.is-mobile-app .mpanel__scroll h3,
body.is-mobile-app .mpanel__scroll h4 {
    font-size: var(--fs-base) !important;
    line-height: var(--lh-snug);
}

/* ---- Subseções do perfil ---- */
body.is-mobile-app .mpanel__scroll .profile-sub-section {
    width: 100% !important;
    padding: 0 !important;
}

/* ---- Nada pode ultrapassar a largura da tela ---- */
body.is-mobile-app .mpanel__scroll * {
    max-width: 100%;
}

body.is-mobile-app .mpanel__scroll img,
body.is-mobile-app .mpanel__scroll canvas,
body.is-mobile-app .mpanel__scroll iframe {
    height: auto;
}

/* ---- Grafico de equity do painel: altura util no celular ---- */
body.is-mobile-app .mpanel__scroll .chart-box {
    height: 200px !important;
}

/* 320-359px: tudo em coluna unica */
@media (max-width: 359px) {

    body.is-mobile-app .mpanel__scroll .profile-card,
    body.is-mobile-app .mpanel__scroll .room-tab-content>div {
        padding: var(--space-3) !important;
    }

    body.is-mobile-app .room-main-content tbody tr {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------------------------------------------------------------------------
   32. MARGEM EXIGIDA NO PAINEL DE ORDEM
   Linha discreta sob o volume: informa sem competir com o campo nem com o
   botao de execucao. Numero tabular para nao "dançar" a cada digito.
   ------------------------------------------------------------------------ */
.margin-hint {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    margin: var(--space-1) 0 0;
    padding: 0 2px;
    /* Informacao de apoio: existe para ser consultada, nao para disputar
       atencao com o campo de volume nem com o botao de execucao. */
    font-size: var(--fs-2xs);
    line-height: 1.25;
}

.margin-hint__label {
    color: var(--text-subtle);
    font-weight: var(--fw-medium);
}

.margin-hint__value {
    color: var(--text-muted);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Sem saldo livre para a margem: sinaliza antes do envio, sem bloquear nada -
   a recusa continua sendo do backend. */
.margin-hint.is-insufficient .margin-hint__value {
    color: var(--neg);
}

/* No app ganha só um fio a mais de respiro; o tamanho continua o mesmo, para
   nao voltar a competir com o campo de volume. */
body.is-mobile-app .margin-hint {
    margin-top: var(--space-2);
}

/* ---------------------------------------------------------------------------
   33. PREVISAO DE RESULTADO (abaixo de TP e SL)
   Mesma discricao do campo de margem: informacao de apoio, nao chamariz.
   A cor aqui carrega significado - verde e o alvo, vermelho e o limite - entao
   ela fica, mas em peso baixo.
   ------------------------------------------------------------------------ */
.outcome-hint {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: var(--space-1) 0 0;
    padding: var(--space-2) 2px 0;
    border-top: 1px solid var(--border-hairline);
    font-size: var(--fs-2xs);
    line-height: 1.25;
}

.outcome-hint__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
}

/* Linha sem TP ou sem SL definido nao ocupa espaco */
.outcome-hint__row.is-idle {
    display: none;
}

/* Nenhum dos dois definido: o bloco inteiro sai */
.outcome-hint.is-empty {
    display: none;
}

.outcome-hint__label {
    color: var(--text-subtle);
    font-weight: var(--fw-medium);
}

.outcome-hint__value {
    color: var(--text-muted);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.outcome-hint__value.value-pos {
    color: var(--pos);
}

.outcome-hint__value.value-neg {
    color: var(--neg);
}

/* ---------------------------------------------------------------------------
   34. CABECALHO CONTEXTUAL DO APP
   O cabecalho de ativo (nome + preco) so aparece onde o ativo E o assunto.
   Na Home e em Mercados ele ocupava o topo sem prioridade, empurrando para
   baixo justamente a informacao que o trader abre o app para ver.
   ------------------------------------------------------------------------ */
/* OBSOLETA: esta regra escondia o cabecalho na Home e em Mercados, quando ele
   ainda mostrava o ativo fixado. Agora o cabecalho e a BARRA DE MARCA, que deve
   aparecer em todas as telas — e ela estava sumindo tambem na Conta, porque o
   mobile-app.js marcava mpanel="home" em qualquer pagina.
body[data-mpanel="home"] .mhead,
body[data-mpanel="markets"] .mhead {
    display: none;
} */

/* Sem o cabecalho, o conteudo encosta no topo seguro do aparelho */
body[data-mpanel="home"] .mpanel__scroll {
    padding-top: var(--space-2);
}

/* ---------------------------------------------------------------------------
   35. DASHBOARD DE PERFORMANCE (Home)
   Aparencia de relatorio executivo: curva, filtros de periodo e indicadores
   de risco. Os elementos graficos apoiam a leitura, nunca competem com ela.
   ------------------------------------------------------------------------ */
.mperf {
    margin: 0 var(--space-4) var(--space-6);
    padding: var(--space-2) 0 var(--space-4);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(140% 120% at 0% 0%, var(--brand-a08), transparent 55%),
        var(--surface-2);
    border: 1px solid var(--border-hairline);
    overflow: hidden;
}

.mperf .msection {
    padding: var(--space-3) var(--space-4) var(--space-2);
}

.mperf__net {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    color: var(--text-strong);
}

.mchips--flush {
    border-bottom: 0;
    padding: 0 var(--space-4) var(--space-3);
}

.mchips--flush .mchip {
    height: 34px;
    min-height: 34px;
    padding-inline: var(--space-3);
    font-size: var(--fs-sm);
}

/* ---- Curva ---- */
.mcurve {
    position: relative;
    height: 96px;
    margin: 0 var(--space-2);
}

.mcurve svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* Desenho progressivo ao abrir: o traco se constroi da esquerda para a direita */
.mcurve__line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: mdraw 1.1s var(--ease-out) forwards;
}

.mcurve__area {
    opacity: 0;
    animation: mfade .5s var(--ease-out) .5s forwards;
}

@keyframes mdraw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes mfade {
    to {
        opacity: 1;
    }
}

/* Curva negativa no periodo: o traco assume o vermelho */
.mcurve.is-negative .mcurve__line {
    stroke: var(--neg);
}

.mcurve__empty {
    position: absolute;
    inset: 0;
    display: none;
    place-items: center;
    font-size: var(--fs-sm);
    color: var(--text-subtle);
}

.mcurve.is-empty svg {
    visibility: hidden;
}

.mcurve.is-empty .mcurve__empty {
    display: grid;
}

/* ---- Indicadores ---- */
.mstats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: var(--space-4);
    background: var(--border-hairline);
    border-top: 1px solid var(--border-hairline);
}

.mstat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3) var(--space-2);
    background: var(--surface-2);
    text-align: center;
}

.mstat__label {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--text-subtle);
}

.mstat__value {
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

/* ---- Linha de resultado encerrado ---- */
.mresult {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-hairline);
}

.mresult__sym {
    display: block;
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    color: var(--text-strong);
}

.mresult__meta {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.mresult__pl {
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 359px) {
    .mstats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {

    .mcurve__line,
    .mcurve__area {
        animation: none;
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

/* ---------------------------------------------------------------------------
   36. CARTEIRA MOBILE
   A prioridade da tela e a lista de posicoes. O topo e uma faixa fina de 4
   metricas; tudo que nao for isso sai do caminho.
   ------------------------------------------------------------------------ */
.mwallet-head {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    flex: 0 0 auto;
    background: var(--border-hairline);
    border-bottom: 1px solid var(--border-default);
}

.mwallet-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3) var(--space-2);
    background: var(--surface-2);
    text-align: center;
    min-width: 0;
}

.mwallet-stat__label {
    font-size: 9px;
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--text-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mwallet-stat__value {
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* O componente de desktop segue no DOM (mantem o fetch e as funcoes de
   fechar/editar), mas nao ocupa espaco na casca do app. */
.mwallet-source {
    display: none;
}

/* ---- Cartao de posicao: so o essencial ---- */
.mpos {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 0;
    border-bottom: 1px solid var(--border-hairline);
    background: transparent;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mpos:active {
    background: var(--surface-hover);
}

.mpos__sym {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    color: var(--text-strong);
}

.mpos__side {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    padding: 1px var(--space-2);
    border-radius: var(--radius-xs);
}

.mpos__side--buy {
    background: var(--pos-a12);
    color: var(--pos);
}

.mpos__side--sell {
    background: var(--neg-a12);
    color: var(--neg);
}

.mpos__price {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.mpos__pl {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---- Folha de detalhe ---- */
.mpos-hero {
    padding: var(--space-5) var(--space-4) var(--space-4);
    text-align: center;
    border-bottom: 1px solid var(--border-hairline);
}

.mpos-hero__label {
    display: block;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--text-muted);
}

.mpos-hero__value {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-black);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

.mpos-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    background: var(--border-hairline);
}

.mpos-grid > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3) var(--space-4);
    background: var(--surface-2);
    min-width: 0;
}

.mpos-grid dt {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--text-subtle);
}

.mpos-grid dd {
    margin: 0;
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mpos-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    flex: 0 0 auto;
    padding: var(--space-4);
    border-top: 1px solid var(--border-hairline);
}

.mpos-btn {
    min-height: 50px;
    justify-content: center;
}

@media (max-width: 359px) {
    .mwallet-stat__value {
        font-size: var(--fs-sm);
    }
}

/* ---------------------------------------------------------------------------
   37. GRAFICO EM TELA CHEIA
   ----------------------------------------------------------------------------
   No painel de Grafico o cabecalho deixa de ocupar altura e passa a flutuar
   SOBRE o grafico. Sao 56px devolvidos a analise tecnica — em um aparelho de
   667px de altura util, isso e 8% da tela.
   O trilho inferior fica, porque e a navegacao; todo o resto sai.
   ------------------------------------------------------------------------ */
body[data-mpanel="chart"] .mapp {
    position: relative;
}

body[data-mpanel="chart"] .mhead {
    position: absolute;
    top: env(safe-area-inset-top);
    left: 0;
    right: 0;
    z-index: 3;
    height: 48px;
    border-bottom: 0;
    /* Fundo em gradiente: o preco continua legivel sobre qualquer vela sem
       precisar de uma barra opaca cobrindo o grafico */
    background: linear-gradient(to bottom,
            var(--surface-1) 30%,
            color-mix(in srgb, var(--surface-1) 70%, transparent) 70%,
            transparent);
    pointer-events: none;
}

/* Só os controles voltam a receber toque; o resto deixa passar para o grafico */
body[data-mpanel="chart"] .mhead .msymbol,
body[data-mpanel="chart"] .mhead .mprice {
    pointer-events: auto;
}

body[data-mpanel="chart"] .mprice__value {
    font-size: var(--fs-base);
}

body[data-mpanel="chart"] .mprice__delta {
    font-size: var(--fs-2xs);
}

/* O selo de cotacao pausada tambem flutua, em vez de empurrar o grafico */
body[data-mpanel="chart"] .mstale {
    position: absolute;
    top: calc(env(safe-area-inset-top) + 48px);
    left: 0;
    right: 0;
    z-index: 3;
    justify-content: center;
    border-bottom: 0;
}

/* O painel ocupa toda a altura disponivel */
body[data-mpanel="chart"] .mpanels {
    height: 100%;
}

body[data-mpanel="chart"] #mpanel-chart,
body[data-mpanel="chart"] .mchart {
    height: 100%;
    min-height: 0;
}

/* Em paisagem a barra inferior tambem sai: a tela toda vira grafico */
@media (orientation: landscape) and (max-height: 500px) {
    body[data-mpanel="chart"] .mtabbar {
        display: none;
    }

    body[data-mpanel="chart"] .mhead {
        height: 40px;
    }
}

/* ---------------------------------------------------------------------------
   38. MERCADOS: acoes da watchlist
   ------------------------------------------------------------------------ */
.mwatch-actions {
    display: flex;
    gap: var(--space-2);
    flex: 0 0 auto;
    padding: 0 var(--space-4) var(--space-3);
}

.mwatch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    flex: 1;
    min-height: 44px;
    padding: 0 var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-3);
    color: var(--text-default);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mwatch-btn:active {
    background: var(--surface-hover);
}

.mwatch-btn svg {
    width: 16px;
    height: 16px;
}

.mwatch-btn--primary {
    background: var(--brand-a20);
    border-color: var(--brand-500);
    color: var(--brand-400);
}

/* Modo de edicao: a estrela vira alvo de remocao */
.mquote--star.is-editing .mstar {
    color: var(--neg);
}

/* ---------------------------------------------------------------------------
   39. OPERAR: horarios de mercado
   A tabela e preenchida pelo app.js. Aqui so o enquadramento, para ela nao
   competir com o formulario de ordem que fica acima.
   ------------------------------------------------------------------------ */
.trade-footnote {
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4) var(--space-4);
    border-top: 1px solid var(--border-hairline);
}

.compact-schedule-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.compact-schedule-table tr {
    border-bottom: 1px solid var(--border-hairline);
}

.compact-schedule-table tr:last-child {
    border-bottom: 0;
}

.compact-schedule-table td {
    color: var(--text-muted);
}

.schedule-row.today-highlight {
    background: var(--brand-a08);
}

/* ---------------------------------------------------------------------------
   40. HISTORICO MOBILE
   Filtros no topo, resumo em grade e lista em cartoes. A tabela de 9 colunas
   do desktop nao cabe em 360px sem virar rolagem horizontal.
   ------------------------------------------------------------------------ */
.mstats--hist {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 0 var(--space-2);
    border-bottom: 1px solid var(--border-hairline);
}

/* Linha de operacao encerrada */
.mhist {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 0;
    border-bottom: 1px solid var(--border-hairline);
    background: transparent;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mhist:active {
    background: var(--surface-hover);
}

.mhist__sym {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    color: var(--text-strong);
}

.mhist__when {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.mhist__pl {
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Linha oculta pelo filtro de busca */
.mhist.is-hidden {
    display: none;
}

@media (max-width: 359px) {
    .mstats--hist {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ============================================================================
   41. CAMADA VISUAL INSTITUCIONAL
   ----------------------------------------------------------------------------
   Apoio visual, nunca protagonista. Tres regras que valem para tudo aqui:
     1. opacidade baixa - o dado sempre vence o ornamento;
     2. pointer-events: none - nada aqui intercepta toque;
     3. so tokens existentes - nenhuma cor nova entra pela porta dos fundos.
   Feito 100% em CSS (gradientes e SVG inline em data-uri): zero requisicao,
   zero imagem, zero JavaScript. O requisito de performance vale aqui tambem.
   ========================================================================= */

/* ---- Malha tecnologica de fundo ----
   Duas grades sobrepostas, a fina e a grossa, com mascara radial para o
   padrao se dissolver antes de alcancar o conteudo. */
body.is-mobile-app .mapp::before,
body.is-mobile-app .mscreen::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(var(--border-hairline) 1px, transparent 1px),
        linear-gradient(90deg, var(--border-hairline) 1px, transparent 1px),
        linear-gradient(var(--border-hairline) 1px, transparent 1px),
        linear-gradient(90deg, var(--border-hairline) 1px, transparent 1px);
    background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
    opacity: .55;
    mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 70%);
}

/* O conteudo sobe acima da malha */
body.is-mobile-app .mhead,
body.is-mobile-app .mpanels,
body.is-mobile-app .mtabbar,
body.is-mobile-app .mbody,
body.is-mobile-app .mfooter {
    position: relative;
    z-index: 1;
}

/* ---- Brilho da marca no topo ----
   Um halo verde muito baixo, que da profundidade sem pintar a tela. */
body.is-mobile-app .mapp::after {
    content: "";
    position: fixed;
    top: 0;
    left: 50%;
    width: 140vw;
    height: 220px;
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(60% 100% at 50% 0%, var(--brand-a08), transparent 70%);
}

/* ---- Curva de crescimento como marca d'agua no cartao de saldo ----
   SVG inline: nao gera requisicao e acompanha a cor da marca. */
.mbalance {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.mbalance::after {
    content: "";
    position: absolute;
    right: -8%;
    bottom: -10%;
    width: 62%;
    height: 78%;
    z-index: -1;
    pointer-events: none;
    opacity: .5;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60' fill='none'%3E%3Cpath d='M0 52 L18 44 L32 47 L48 30 L64 34 L82 18 L98 22 L120 4' stroke='%232ECC71' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' opacity='.30'/%3E%3Cpath d='M0 52 L18 44 L32 47 L48 30 L64 34 L82 18 L98 22 L120 4 L120 60 L0 60 Z' fill='%232ECC71' opacity='.07'/%3E%3C/svg%3E");
}

/* ---- Linhas de velocidade: acento fino no topo dos paineis ---- */
.mperf,
.mbalance,
.mkpi {
    position: relative;
}

.mperf::before,
.mbalance::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg,
            transparent, var(--brand-a32) 35%, var(--brand-a32) 65%, transparent);
}

/* ---- Profundidade e vidro leve ----
   Fio claro no topo simula luz incidindo na borda superior do cartao, que e o
   que da a sensacao de material em vez de retangulo pintado. */
body.is-mobile-app .mbalance,
body.is-mobile-app .mperf,
body.is-mobile-app .msheet,
body.is-mobile-app .mkpi,
body.is-mobile-app .maction {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .04),
        var(--shadow-1);
}

body.is-mobile-app .msheet {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        var(--shadow-3);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    background: color-mix(in srgb, var(--surface-2) 88%, transparent);
}

/* A barra inferior tambem ganha vidro: o conteudo passa por baixo dela */
body.is-mobile-app .mtabbar {
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    background: color-mix(in srgb, var(--surface-2) 86%, transparent);
}

/* ---- Mapa mundial pontilhado no rodape da Home ----
   Referencia ao alcance global da plataforma. Fica atras de tudo e some antes
   de tocar qualquer texto. */
#mpanel-home .mpanel__scroll::after {
    content: "";
    display: block;
    height: 132px;
    margin-top: var(--space-6);
    pointer-events: none;
    opacity: .16;
    background-repeat: repeat-x;
    background-position: center bottom;
    background-size: auto 100%;
    background-image: radial-gradient(circle, var(--brand-500) .9px, transparent 1px);
    background-size: 9px 9px;
    mask-image: radial-gradient(90% 130% at 50% 100%, #000 10%, transparent 72%);
    -webkit-mask-image: radial-gradient(90% 130% at 50% 100%, #000 10%, transparent 72%);
}

/* ---- Tema claro: a mesma linguagem, com o peso invertido ---- */
[data-theme="light"] body.is-mobile-app .mbalance,
[data-theme="light"] body.is-mobile-app .mperf,
[data-theme="light"] body.is-mobile-app .mkpi,
[data-theme="light"] body.is-mobile-app .maction {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        var(--shadow-1);
}

[data-theme="light"] body.is-mobile-app .mapp::before,
[data-theme="light"] body.is-mobile-app .mscreen::before {
    opacity: .75;
}

/* ---- Respeito a preferencia de movimento e a telas pequenas ---- */
@media (max-width: 359px) {

    body.is-mobile-app .mapp::before,
    body.is-mobile-app .mscreen::before {
        background-size: 72px 72px, 72px 72px, 18px 18px, 18px 18px;
    }

    #mpanel-home .mpanel__scroll::after {
        height: 96px;
    }
}

/* Sem suporte a color-mix o fundo cairia para transparente: o fallback opaco
   garante que a folha nunca fique ilegivel sobre o conteudo. */
@supports not (backdrop-filter: blur(1px)) {

    body.is-mobile-app .msheet,
    body.is-mobile-app .mtabbar {
        background: var(--surface-2);
    }
}

/* ---------------------------------------------------------------------------
   42. AJUSTES DE RETORNO
   ------------------------------------------------------------------------ */

/* ---- Logotipo no cabecalho de todas as telas do app ---- */
.mhead--brand {
    justify-content: center;
}

.mbrand-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    text-decoration: none;
}

.mbrand-logo {
    height: 30px;
    width: auto;
    object-fit: contain;
    display: block;
}

.mbrand-logo--sm {
    height: 24px;
    flex: 0 0 auto;
}

.mhead__title {
    flex: 1;
    text-align: left;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Barra do ativo, dentro do painel do grafico ---- */
.mchartbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 0 0 auto;
    height: 48px;
    padding: 0 var(--space-4);
    border-bottom: 1px solid var(--border-hairline);
    background: var(--surface-2);
}

/* Com a barra propria, o cabecalho global deixa de flutuar sobre o grafico */
body[data-mpanel="chart"] .mhead {
    position: static;
    height: 56px;
    background: var(--surface-1);
    pointer-events: auto;
}

body[data-mpanel="chart"] .mstale {
    position: static;
}

/* ---- Acao principal da Home: mesmo verde do desktop ---- */
.maction--cta {
    background: var(--brand-500);
    border-color: var(--brand-500);
    color: var(--on-brand);
    font-weight: var(--fw-bold);
}

.maction--cta:active {
    background: var(--brand-600);
}

.maction--cta .maction__icon {
    background: rgba(0, 0, 0, .16);
    color: var(--on-brand);
}

/* ---- Conta: grade 3x3 com icone em cada indicador ---- */
body.is-mobile-app .mpanel__scroll .dashboard-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1px !important;
    background: var(--border-hairline);
    margin: 0 0 var(--space-4) !important;
    padding: 0 !important;
}

body.is-mobile-app .mpanel__scroll .stat-card {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-height: 84px;
    padding: var(--space-3) var(--space-1) !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--surface-2);
    text-align: center;
}

body.is-mobile-app .mpanel__scroll .stat-card span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    font-size: 9px;
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--text-subtle);
    line-height: 1.2;
}

.stat-card__icon {
    width: 18px;
    height: 18px;
    color: var(--brand-400);
}

body.is-mobile-app .mpanel__scroll .stat-card strong {
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

@media (max-width: 359px) {
    body.is-mobile-app .mpanel__scroll .dashboard-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ---------------------------------------------------------------------------
   43. DEPOSITO E SAQUE NO APP
   O endereco da carteira tem 34+ caracteres e nao quebra em espacos: sem
   tratamento explicito ele empurra o botao COPIAR para fora da tela.
   ------------------------------------------------------------------------ */
body.is-mobile-app .mpanel__scroll .copy-box {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    max-width: 100%;
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
    box-sizing: border-box;
    background: var(--surface-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}

/* O endereco quebra em qualquer caractere e nunca estoura a coluna */
body.is-mobile-app .mpanel__scroll .copy-box span {
    min-width: 0;
    font-family: var(--font-numeric);
    font-size: var(--fs-sm);
    line-height: 1.35;
    color: var(--text-default);
    word-break: break-all;
    overflow-wrap: anywhere;
}

body.is-mobile-app .mpanel__scroll .copy-box button {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--brand-500);
    color: var(--on-brand);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-caps);
    white-space: nowrap;
    cursor: pointer;
}

body.is-mobile-app .mpanel__scroll .copy-box button:active {
    background: var(--brand-600);
}

/* Abaixo de 360px o botao vai para a linha de baixo, ocupando a largura */
@media (max-width: 359px) {
    body.is-mobile-app .mpanel__scroll .copy-box {
        grid-template-columns: minmax(0, 1fr);
    }

    body.is-mobile-app .mpanel__scroll .copy-box button {
        width: 100%;
    }
}

/* QR: centralizado e limitado, para nao dominar a tela */
body.is-mobile-app .mpanel__scroll .qr-container {
    display: flex;
    justify-content: center;
    margin: var(--space-4) 0;
}

body.is-mobile-app .mpanel__scroll .qr-container img {
    width: min(200px, 56vw);
    height: auto;
    border-radius: var(--radius-sm);
}

/* Alinhamento do texto das telas de deposito e saque */
body.is-mobile-app .mpanel__scroll #deposit-details,
body.is-mobile-app .mpanel__scroll #withdraw-details {
    padding: 0 var(--space-1);
}

body.is-mobile-app .mpanel__scroll #deposit-details h3,
body.is-mobile-app .mpanel__scroll #withdraw-details h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-lg);
    line-height: var(--lh-snug);
}

body.is-mobile-app .mpanel__scroll #deposit-details p,
body.is-mobile-app .mpanel__scroll #withdraw-details p {
    margin: 0 0 var(--space-4);
    font-size: var(--fs-md);
    line-height: var(--lh-normal);
}

/* Os metodos de pagamento em coluna, com alvo de toque adequado */
body.is-mobile-app .mpanel__scroll .payment-method-item,
body.is-mobile-app .mpanel__scroll [class*="method-option"] {
    width: 100% !important;
    min-height: 52px;
    box-sizing: border-box;
    margin: 0 0 var(--space-2) !important;
}

/* ---------------------------------------------------------------------------
   44. CORRECAO DE ESCOPO: .side-list serve a dois usos diferentes
   ----------------------------------------------------------------------------
   No Perfil ela e um menu lateral (vira trilha de chips no app). No Deposito e
   no Saque a MESMA classe lista os metodos de pagamento, que precisam ser
   cartoes verticais de largura total. O tratamento de chip aplicado a ambos
   transformava os metodos em pilulas ovais.
   ------------------------------------------------------------------------ */
body.is-mobile-app .mpanel__scroll #deposit-methods-list,
body.is-mobile-app .mpanel__scroll #withdraw-methods-list {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-2);
    overflow: visible !important;
    margin: 0 0 var(--space-5) !important;
    padding: 0 !important;
}

body.is-mobile-app .mpanel__scroll #deposit-methods-list .side-item,
body.is-mobile-app .mpanel__scroll #withdraw-methods-list .side-item {
    display: flex;
    align-items: center;
    width: 100%;
    flex: 0 0 auto;
    min-height: 56px;
    padding: var(--space-3) var(--space-4) !important;
    /* Cartao, nao pilula: raio do sistema */
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border-default) !important;
    background: var(--surface-2);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    text-align: left;
    white-space: normal;
}

body.is-mobile-app .mpanel__scroll #deposit-methods-list .side-item.active,
body.is-mobile-app .mpanel__scroll #withdraw-methods-list .side-item.active {
    background: var(--brand-a12);
    border-color: var(--brand-500) !important;
    color: var(--brand-400);
}

/* ---------------------------------------------------------------------------
   45. ALINHAMENTO E RESPIRO DOS CARTOES DAS SUB-TELAS
   Uma unica regra de padding para todos, em vez de cada bloco com o seu.
   ------------------------------------------------------------------------ */
body.is-mobile-app .mpanel__scroll .profile-card,
body.is-mobile-app .mpanel__scroll .main-detail-card,
body.is-mobile-app .mpanel__scroll .dashboard-panel-card {
    padding: var(--space-4) !important;
    margin: 0 0 var(--space-4) !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--border-hairline) !important;
}

/* Primeiro e ultimo filho nao devem duplicar o respiro do cartao */
body.is-mobile-app .mpanel__scroll .profile-card > *:first-child,
body.is-mobile-app .mpanel__scroll .main-detail-card > *:first-child {
    margin-top: 0 !important;
}

body.is-mobile-app .mpanel__scroll .profile-card > *:last-child,
body.is-mobile-app .mpanel__scroll .main-detail-card > *:last-child {
    margin-bottom: 0 !important;
}

/* O conteudo da aba encosta nas laterais com o mesmo respiro em toda parte */
body.is-mobile-app .mpanel__scroll .room-tab-content {
    padding: var(--space-4) !important;
}

/* Rotulos de formulario alinhados e com a mesma distancia do campo */
body.is-mobile-app .mpanel__scroll label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    line-height: var(--lh-snug);
}

/* Titulos de secao com respiro uniforme */
body.is-mobile-app .mpanel__scroll .section-title {
    margin: 0 0 var(--space-4) !important;
    padding: 0 0 var(--space-3) !important;
    border-bottom: 1px solid var(--border-hairline);
}

/* Botoes de acao com a mesma altura e alinhamento em todas as telas */
body.is-mobile-app .mpanel__scroll .btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 52px;
    border-radius: var(--radius-md);
}

/* ---- Lockup compacto: cabe na barra de 56px sem perder legibilidade ---- */
.brand-lockup--sm {
    gap: var(--space-2);
}

.brand-lockup--sm .brand-lockup__mark {
    height: 26px;
    width: auto;
}

.brand-lockup--sm .brand-lockup__name {
    font-size: var(--fs-base);
    line-height: 1;
}

.brand-lockup--sm .brand-lockup__sub {
    gap: 4px;
}

.brand-lockup--sm .brand-lockup__word {
    font-size: 9px;
    letter-spacing: .12em;
}

.brand-lockup--sm .brand-lockup__tag {
    font-size: 8px;
    padding: 1px 3px;
}

/* Na barra de marca do app o lockup fica centralizado */
.mhead--brand .brand-lockup {
    margin: 0 auto;
}

/* Na Conta o titulo fica a esquerda e a marca a direita */
.mhead .brand-lockup--sm {
    flex: 0 0 auto;
    margin: 0;
}

/* ---------------------------------------------------------------------------
   46. BARRA DE MARCA: logo a esquerda, conta a direita
   ----------------------------------------------------------------------------
   Composicao identica em todas as telas do app. O respiro lateral usa o mesmo
   --space-4 dos paineis, para a marca ficar alinhada com o conteudo abaixo em
   vez de "flutuar" com recuo proprio.
   ------------------------------------------------------------------------ */
.mhead--brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    height: 56px;
    padding: 0 var(--space-4);
    border-bottom: 1px solid var(--border-hairline);
    background: var(--surface-1);
}

/* Anula a centralizacao anterior */
.mhead--brand .brand-lockup {
    margin: 0;
    flex: 0 0 auto;
}

/* ---- Identificacao da conta, a direita ---- */
.mhead__wallet {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
    min-height: 32px;
    padding: 0 var(--space-2) 0 var(--space-1);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    background: var(--surface-3);
}

.mhead__wallet[hidden] {
    display: none;
}

.mhead__wallet .badge {
    font-size: 9px;
    padding: 2px var(--space-2);
}

.mhead__wallet-id {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--text-default);
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

/* ---- Subcabecalho da Conta: voltar + titulo ---- */
.msubhead {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
    min-height: 48px;
    padding: 0 var(--space-2) 0 0;
    border-bottom: 1px solid var(--border-hairline);
    background: var(--surface-1);
}

.msubhead__title {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Em 320px o rotulo da conta sai; o numero e o que identifica */
@media (max-width: 359px) {
    .mhead--brand {
        padding-inline: var(--space-3);
    }

    .mhead__wallet .badge {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   47. GRADE DE DESEMPENHO DA CONTA
   Os quatro indicadores (Resultado, Taxa de acerto, Fator de lucro, Operacoes)
   vinham numa linha unica: em 360px cada um ficava com 80px e o rotulo quebrava
   em tres linhas, colidindo com o valor. Duas colunas resolvem.
   ------------------------------------------------------------------------ */
body.is-mobile-app .mpanel__scroll .perf-stats-row,
body.is-mobile-app .mpanel__scroll [class*="perf-stat"]:not(.perf-stat-item) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1px !important;
    background: var(--border-hairline);
    padding: 0 !important;
}

body.is-mobile-app .mpanel__scroll .perf-stat-item {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-1);
    min-width: 0;
    min-height: 68px;
    padding: var(--space-3) var(--space-4) !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--surface-2);
    text-align: left !important;
}

body.is-mobile-app .mpanel__scroll .perf-stat-item span {
    font-size: 9px !important;
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--text-subtle);
    line-height: 1.25;
    /* Rotulo em uma linha so; se nao couber, corta com reticencia em vez de
       empilhar tres linhas por cima do valor */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

body.is-mobile-app .mpanel__scroll .perf-stat-item strong {
    font-size: var(--fs-lg) !important;
    font-weight: var(--fw-bold);
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    line-height: 1.15;
}

/* O grafico de equity precisa de altura util e nao pode encostar nas bordas */
body.is-mobile-app .mpanel__scroll .chart-box {
    height: 180px !important;
    margin: 0 0 var(--space-4);
}

body.is-mobile-app .mpanel__scroll .chart-box canvas {
    max-width: 100%;
}

/* ---------------------------------------------------------------------------
   48. GAVETA LATERAL (menu hamburguer)
   ----------------------------------------------------------------------------
   Reune o que so existia na tela de Conta e acrescenta idioma e tema, que no
   desktop ficam no canto superior direito e nao tinham lugar no app.
   Abre da esquerda, porque o hamburguer esta a esquerda: o movimento sai de
   onde o dedo tocou.
   ------------------------------------------------------------------------ */
.mhamburger {
    flex: 0 0 auto;
    margin-left: calc(var(--space-2) * -1);
}

.mdrawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background: rgba(0, 0, 0, .6);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
}

.mdrawer-backdrop[hidden] {
    display: none;
}

.mdrawer-backdrop.is-open {
    opacity: 1;
}

.mdrawer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column;
    width: min(310px, 84vw);
    background: var(--surface-2);
    border-right: 1px solid var(--border-default);
    box-shadow: var(--shadow-3);
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease-out);
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

.mdrawer.is-open {
    transform: translateX(0);
}

/* ---- Cabecalho: identificacao do usuario ---- */
.mdrawer__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 0 0 auto;
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-hairline);
}

.mdrawer__avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
}

.mdrawer__id {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.mdrawer__id strong {
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    color: var(--text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mdrawer__id span {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Corpo rolavel ---- */
.mdrawer__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mdrawer__sep {
    height: 1px;
    margin: var(--space-3) var(--space-4);
    background: var(--border-hairline);
}

/* Dentro da gaveta a linha nao tem fundo proprio */
.mdrawer .mrow {
    border-bottom: 0;
    min-height: 52px;
}

/* ---- Idioma e tema ---- */
.mdrawer__field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 56px;
    padding: var(--space-2) var(--space-4);
}

.mdrawer__label {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
    font-size: var(--fs-base);
    color: var(--text-default);
}

.mdrawer__select {
    flex: 0 0 auto;
    width: auto;
    min-width: 116px;
    height: 40px;
    font-size: var(--fs-md);
    background: var(--surface-3);
}

.mdrawer__theme {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-3);
    color: var(--text-default);
    cursor: pointer;
}

.mdrawer__theme:active {
    background: var(--surface-hover);
}

.mdrawer__theme svg {
    width: 18px;
    height: 18px;
}

.mdrawer__foot {
    flex: 0 0 auto;
    margin: 0;
    padding: var(--space-4);
    border-top: 1px solid var(--border-hairline);
    font-size: var(--fs-2xs);
    line-height: var(--lh-snug);
    color: var(--text-subtle);
}

@media (prefers-reduced-motion: reduce) {

    .mdrawer,
    .mdrawer-backdrop {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   49. GRAFICO COM FERRAMENTAS NO APP
   ----------------------------------------------------------------------------
   Com as barras do TradingView ligadas, o espaco vertical fica disputado:
   56px da marca + 48px da barra do ativo + 56px do trilho = 160px de moldura.
   Em um aparelho de 667px sobram ~507px, dos quais a barra de topo e a regua
   de periodos do proprio widget consomem mais ~70px. Estes ajustes devolvem o
   maximo possivel para as velas.
   ------------------------------------------------------------------------ */

/* A barra do ativo encolhe: o widget ja mostra o simbolo no proprio cabecalho.
   Mantemos a nossa porque ela traz o preco do NOSSO feed, nao o do TradingView. */
body.is-mobile-app .mchartbar {
    height: 40px;
    padding-inline: var(--space-3);
}

body.is-mobile-app .mchartbar .msymbol {
    font-size: var(--fs-base);
}

body.is-mobile-app .mchartbar .mprice__value {
    font-size: var(--fs-md);
}

body.is-mobile-app .mchartbar .mprice__delta {
    font-size: var(--fs-2xs);
}

/* O widget precisa de altura minima util: abaixo disto a barra de ferramentas
   cobre as velas e o grafico deixa de ser legivel. */
body.is-mobile-app .mchart {
    min-height: 320px;
}

/* Em telas baixas (paisagem) a barra da marca sai: a analise tecnica ganha a
   tela e a navegacao continua pelo trilho inferior. */
@media (orientation: landscape) and (max-height: 520px) {
    body[data-mpanel="chart"] .mhead--brand {
        display: none;
    }

    body.is-mobile-app .mchartbar {
        height: 34px;
    }
}

/* =============================================================================
   DEPÓSITO EM ETAPAS
   =============================================================================
   Forma → moeda → rede → valor → QR. Cada etapa só libera a seguinte, e o QR
   só nasce depois do valor — é o que impede o cliente de copiar o endereço e
   pagar um valor que ninguém sabe conciliar.
   ========================================================================== */

/* width:100% e nao so max-width.
   O pai (.room-tab-content.active) e display:flex, e um bloco ali dentro se
   ajusta ao CONTEUDO enquanto ele e curto — a coluna nascia com ~250px, com as
   opcoes empilhadas, e so alargava depois que algo maior entrava. Fixar a
   largura tira a variacao: a tela abre no tamanho final. */
.dep-wrap {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 8px 16px 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.dep-step {
    background: var(--bg-card, #14171C);
    border: 1px solid var(--border-color, #232830);
    border-radius: 10px;
    padding: 16px 18px;
    transition: opacity .2s;
}

/* Etapa bloqueada continua VISÍVEL, apenas apagada e sem cliques.
   Escondê-la faria a tela pular de altura a cada escolha, e o cliente perderia
   a noção de quantos passos ainda faltam. */
.dep-step.is-locked {
    opacity: .38;
    pointer-events: none;
}

.dep-step-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 12px;
}

.dep-step-num {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: var(--text-secondary, #8B939E);
}

.dep-step-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary, #fff);
}

.dep-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}

.dep-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 13px 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color, #2A303A);
    background: var(--bg-main, #0D0F12);
    color: var(--text-primary, #fff);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.dep-option:hover { border-color: var(--pos, #2ECC71); }

.dep-option.is-active {
    border-color: var(--pos, #2ECC71);
    background: rgba(46, 204, 113, .08);
}

.dep-option-label { font-size: 14px; font-weight: 700; }
.dep-option-sub   { font-size: 11.5px; color: var(--text-secondary, #8B939E); }

.dep-loading {
    font-size: 13px;
    color: var(--text-secondary, #8B939E);
    padding: 8px 0;
}

/* O aviso de rede errada é o texto mais importante da tela: enviar na rede
   errada é perda irreversível. Fica em amarelo, acima do campo de valor. */
.dep-warning {
    background: rgba(234, 179, 8, .08);
    border: 1px solid rgba(234, 179, 8, .35);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 16px;
}

.dep-warning strong {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    letter-spacing: .6px;
    color: #EAB308;
    margin-bottom: 6px;
}

.dep-warning p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-secondary, #A8B0BA);
}

.dep-label {
    display: block;
    font-size: 11.5px;
    color: var(--text-secondary, #8B939E);
    margin: 14px 0 6px;
}

.dep-input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid var(--border-color, #2A303A);
    background: var(--bg-main, #0D0F12);
    color: var(--text-primary, #fff);
    font: inherit;
    font-size: 15px;
}

.dep-input:focus { outline: none; border-color: var(--pos, #2ECC71); }

.dep-hint {
    margin: 6px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-secondary, #8B939E);
}

.dep-btn-primary {
    width: 100%;
    margin-top: 16px;
    padding: 14px;
    border: none;
    border-radius: 8px;
    background: var(--pos, #2ECC71);
    color: #0D0F12;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: filter .15s;
}

.dep-btn-primary:hover:not(:disabled) { filter: brightness(1.08); }

.dep-btn-primary:disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* ---- Resultado ---------------------------------------------------------- */

.dep-result {
    background: var(--bg-card, #14171C);
    border: 1px solid var(--border-color, #232830);
    border-radius: 10px;
    padding: 18px;
}

.dep-qr-row {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* Fundo branco fixo, independente do tema: um QR sobre fundo escuro não é lido
   por boa parte dos leitores. */
.dep-qr-box {
    background: #fff;
    border-radius: 8px;
    padding: 10px;
    flex: none;
}

.dep-qr-box img { display: block; width: 160px; height: 160px; }

.dep-qr-info { flex: 1; min-width: 220px; }

.dep-qr-net {
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--text-secondary, #8B939E);
    margin-bottom: 4px;
}

.dep-qr-amount {
    font-size: 21px;
    font-weight: 800;
    color: var(--pos, #2ECC71);
    line-height: 1.2;
}

.dep-qr-amount small {
    display: inline-block;
    margin-left: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .8px;
    color: var(--text-secondary, #8B939E);
    vertical-align: middle;
}

.dep-qr-asset {
    font-size: 13px;
    font-family: var(--font-numeric, monospace);
    color: var(--text-secondary, #A8B0BA);
    margin-top: 2px;
}

.dep-addr-label {
    font-size: 10.5px;
    letter-spacing: 1px;
    color: var(--text-secondary, #8B939E);
    margin: 14px 0 4px;
}

/* break-all: um endereço de 42 caracteres estoura a largura no celular. */
.dep-addr {
    font-family: var(--font-numeric, monospace);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-primary, #fff);
    word-break: break-all;
    line-height: 1.45;
}

.dep-btn-copy {
    margin-top: 8px;
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid var(--border-color, #2A303A);
    background: transparent;
    color: var(--pos, #2ECC71);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.dep-btn-copy:hover { border-color: var(--pos, #2ECC71); }

.dep-note {
    margin: 14px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary, #8B939E);
}

.dep-status {
    margin-top: 16px;
    padding: 13px 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color, #2A303A);
    background: var(--bg-main, #0D0F12);
}

.dep-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    letter-spacing: .8px;
    color: var(--text-secondary, #A8B0BA);
}

.dep-status-row + .dep-status-row { margin-top: 8px; }

.dep-status-row strong { color: #EAB308; }

.dep-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #EAB308;
    flex: none;
}

.dep-timer { margin-left: auto; }
.dep-timer b { color: var(--text-primary, #fff); font-family: var(--font-numeric, monospace); }

@media (max-width: 560px) {
    .dep-qr-row { justify-content: center; }
    .dep-qr-info { min-width: 100%; }
}

/* ---- Saque: saldo e resumo de tarifas ---------------------------------- */

.wd-balance {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid var(--border-color, #232830);
    background: var(--bg-card, #14171C);
    font-size: 12px;
    color: var(--text-secondary, #8B939E);
}

.wd-balance b {
    font-size: 17px;
    font-family: var(--font-numeric, monospace);
    color: var(--text-primary, #fff);
}

/* O resumo fica DENTRO do passo do valor, e não numa etapa própria: ele muda a
   cada tecla digitada, e uma etapa que aparece e some sozinha faria a página
   pular embaixo do cursor. */
.wd-quote {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid var(--border-color, #2A303A);
    background: var(--bg-main, #0D0F12);
}

.wd-quote-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 12.5px;
    color: var(--text-secondary, #A8B0BA);
    padding: 3px 0;
}

.wd-quote-row b {
    font-family: var(--font-numeric, monospace);
    color: var(--text-primary, #fff);
    white-space: nowrap;
}

.wd-quote-erro {
    font-size: 12.5px;
    color: var(--neg, #ef4444);
    padding: 2px 0;
}

.wd-quote-net {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color, #2A303A);
    font-size: 12.5px;
    color: var(--text-secondary, #8B939E);
}

.wd-quote-net b {
    font-size: 17px;
    font-weight: 800;
    font-family: var(--font-numeric, monospace);
    color: var(--pos, #2ECC71);
    text-align: right;
}

/* ===== Transferência entre plataformas (aba Transferir) =====================
   Reaproveita .dep-wrap / .dep-step / .dep-input / .dep-btn-primary do passo a
   passo de depósito: é a mesma linguagem visual, e criar um segundo conjunto de
   estilos para dois cartões faria as duas telas divergirem com o tempo. */

.tf-cards {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 22px;
}

.tf-card {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px solid var(--border-color, #2a2f3a);
    background: var(--card-bg, #171b24);
    transition: border-color .18s ease, background .18s ease;
}

.tf-card-label {
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted, #8b93a7);
}

.tf-card-value {
    font-size: 22px;
    font-weight: 700;
    /* Os dois valores ficam lado a lado e mudam juntos: sem largura fixa de
       dígito, trocar 900,00 por 1.000,00 empurra o cartão inteiro. */
    font-variant-numeric: tabular-nums;
    color: var(--text-primary, #e8ecf4);
}

/* A origem é destacada, o destino fica discreto. É o que responde "de onde sai"
   sem obrigar o cliente a interpretar a direção da seta. */
.tf-card--origem {
    border-color: var(--accent, #22c55e);
    background: color-mix(in srgb, var(--accent, #22c55e) 8%, transparent);
}

.tf-card--destino {
    opacity: .72;
}

.tf-swap {
    flex: 0 0 auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--border-color, #2a2f3a);
    background: var(--card-bg, #171b24);
    color: var(--text-primary, #e8ecf4);
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease;
}

.tf-swap:hover { border-color: var(--accent, #22c55e); transform: scale(1.06); }
.tf-swap:focus-visible { outline: 2px solid var(--accent, #22c55e); outline-offset: 2px; }
.tf-swap i { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
    .tf-card, .tf-swap { transition: none; }
    .tf-swap:hover { transform: none; }
}

/* Em telas estreitas os cartões empilham e a seta gira: lado a lado, cada um
   ficaria com menos de 140px e o valor quebraria em duas linhas. */
@media (max-width: 560px) {
    .tf-cards { flex-direction: column; }
    .tf-swap { transform: rotate(90deg); }
    .tf-swap:hover { transform: rotate(90deg) scale(1.06); }
}

/* Ordem pendente na tabela do portfólio.
   Contorno tracejado em vez de cor cheia: ela ainda não é uma posição, e pintá-la
   como as abertas faria o cliente contar risco que não existe. */
.side--pendente {
    opacity: .82;
    border: 1px dashed currentColor;
    border-radius: 999px;
    padding: 2px 9px;
}

.side--pendente .dot {
    /* O ponto cheio é o sinal de "posição viva"; vazado marca a espera. */
    background: transparent !important;
    box-shadow: inset 0 0 0 2px currentColor;
}

/* Seletor de conta no depósito e no saque.
   Fica acima do passo 1 porque é a primeira decisão: escolher a rede antes de
   saber em qual conta o dinheiro entra é decidir na ordem errada. */
.wal-pick {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 16px;
    margin-bottom: 18px;
    border-radius: 12px;
    border: 1px solid var(--border-color, #2a2f3a);
    background: var(--card-bg, #171b24);
}

.wal-pick-label {
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted, #8b93a7);
    white-space: nowrap;
}

.wal-pick-select {
    flex: 1 1 180px;
    min-width: 0;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color, #2a2f3a);
    background: var(--input-bg, #0f1319);
    color: var(--text-primary, #e8ecf4);
    font-size: 14px;
}

.wal-pick-select:focus-visible {
    outline: 2px solid var(--accent, #22c55e);
    outline-offset: 1px;
}

.wal-pick-saldo {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary, #e8ecf4);
    white-space: nowrap;
}

@media (max-width: 520px) {
    /* Empilha: lado a lado, o nome da conta some no select estreito. */
    .wal-pick { align-items: stretch; flex-direction: column; gap: 8px; }
    .wal-pick-saldo { align-self: flex-end; }
}