/* 1. Definição das Variáveis de Tema */
:root {
    /* Padrão Dark */
    --bg-main: #131722;
    --bg-card: #1e222d;
    --text-primary: #ffffff;
    --text-secondary: #848e9c;
    --accent-blue: #089981;
    --border-color: #2a2e39;
}

[data-theme="light"] {
    --bg-main: #f0f2f5;
    --bg-card: #ffffff;
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --border-color: #d1d5db;
}

/* 2. Reset Básico */
/* body {
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-family: sans-serif;
    transition: 0.3s;
} */
body {
    margin: 0;
    background-color: var(--bg-main);
    font-family: -apple-system, BlinkMacSystemFont, "Trebuchet MS", Roboto, sans-serif;
    color: var(--text-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    transition: background 0.3s, color 0.3s;
}

/* 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; /* 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: rgba(8, 153, 129, 0.4); /* 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: #089981;
}

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


/* 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-color, #e0e3eb);
}

.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: #0ecb81;
    /* 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-color, #e0e3eb);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    width: 220px;
    z-index: 9999;
    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-color, #e0e3eb);
    border-bottom: 1px solid var(--border-color, #e0e3eb);
    transform: rotate(45deg);
}

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

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

.user-info-header span {
    color: var(--text-secondary, #787b86);
    font-size: 12px;
    margin-top: 2px;
}

.status-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #0ecb81;
    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-primary, #131722);
    text-decoration: none;
    font-size: 13px;
    transition: background 0.2s;
}

.user-menu-list li a:hover {
    background: var(--icon-bg, #f0f3f6);
}

.user-menu-list li a i {
    width: 16px;
    height: 16px;
    color: var(--text-secondary, #787b86);
}

.logout-item {
    border-top: 1px solid var(--border-color, #e0e3eb);
}

.logout-item a {
    color: #f6465d !important;
}

.logout-item a i {
    color: #f6465d !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: #3b82f6;
    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 #3b82f6;
    color: #3b82f6;
    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(--accent-blue);
    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(--accent-blue);
    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(--accent-blue);
    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: #161a25;

    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: #f7f7f7;
}

/* 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;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s;
}

.main-layout .nav-center a:hover {
    color: var(--accent-blue);
}

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

.main-layout .container-portfolio {
    flex: 1;
    /* Proporção menor para o portfolio */
    background-color: var(--bg-card);
}

/* Painéis Laterais Direitos */
.main-layout .trade-sidebar {
    position: fixed;
    right: 380px;
    top: 122px;
    bottom: 0;
    width: 300px;
    /* Substituído #1e222d por variável */
    background: var(--bg-card);
    border-left: 1px solid var(--border-color);
    z-index: 50;

    transform: translateX(300px);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    overflow: visible;
}

.main-layout .navigation-expanded {
    width: 380px;
    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 */
}

.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: #089981 !important;
    border: none;
    width: 24px;
    height: 60px;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    z-index: 51;
}

/* Quando o painel abre, o botão acompanha o slide */
.trade-sidebar.active .expand-trigger {
    right: 645px;
}

#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;
    z-index: 10;
}

.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: rgba(59, 127, 235, 0.1);
    /* Azul sutil de fundo */
    color: #089981;
}

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

/* market_prices */
.market-ticker {
    width: 100%;
    height: 60px;
    /* 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: 300px;
}

.btn-new-order-floating {
    position: absolute;
    top: 50%;
    /* Centraliza na linha divisória */
    right: 20px;
    transform: translateY(-50%);
    z-index: 10;
    background-color: #089981;
    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;
    width: 350px;
    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-card);
    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-card);
    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 */
}

/* 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: #089981;
    background: rgba(8, 153, 129, 0.1);
    border-right: 2px solid #089981;
    /* 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);
}

.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: #089981;
    border-bottom-color: #089981;
}

.side-btn.active.sell {
    color: #f23645;
    border-bottom-color: #f23645;
}

.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-main);
    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: #f23645;
}

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

/* Botão de Mais - Verde */
.math-btn.btn-plus {
    background-color: rgba(8, 153, 129, 0.1);
    /* Fundo sutil */
    color: #089981;
}

.math-btn.btn-plus:hover:not(:disabled) {
    background-color: #089981;
    color: white;
}

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