/**
 * THE COMPOSITE MAN 198 — UNIFIED DESIGN SYSTEM
 * Canonical Design System extracted and harmonized from estruturas-opcoes-v2.html
 * 
 * Design Philosophy:
 * - Editorial Elegance + Financial Precision
 * - Serif titles (Lora 700) for authoritative hierarchy
 * - Modern sans-serif (DM Sans) for readable UI controls and text
 * - Monospace (JetBrains Mono) with tabular-nums for financial metrics, tickers, and strikes
 * - Refined neutral surfaces (#F2F5F7 page bg, #FFFFFF cards, #DDE3E8 rules)
 * - Tactile pill controls (border-radius: 999px) for segmented filters and selectors
 */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,600;0,700;1,600;1,700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
    /* ── PALETA CANÔNICA DE CORES (ESTRUTURAS-V2) ── */
    --tcm-bg: #F2F5F7;
    --tcm-bg-soft: #EEF2F4;
    --tcm-bg-card: #FFFFFF;
    --tcm-bg-dark: #0F1117;

    --tcm-ink: #111218;
    --tcm-ink-mid: #3D4354;
    --tcm-ink-light: #6B7280;
    --tcm-ink-muted: #9CA3AF;

    --tcm-rule: #DDE3E8;
    --tcm-rule-soft: #E8ECEF;

    --tcm-blue: #3B5BDB;
    --tcm-blue-soft: #E8EEFF;
    --tcm-heat: 59, 91, 219;

    --tcm-call: #047857;
    --tcm-call-bg: rgba(4, 120, 87, 0.08);
    --tcm-call-border: rgba(4, 120, 87, 0.22);

    --tcm-put: #DC2626;
    --tcm-put-texto: #B91C1C;
    --tcm-put-bg: rgba(220, 38, 38, 0.08);
    --tcm-put-border: rgba(220, 38, 38, 0.22);

    --tcm-t0: #B45309;
    --tcm-yellow: #F59E0B;
    --tcm-green: #10B981;

    /* ── SOMBRAS & RADII ── */
    --tcm-shadow: 0 1px 2px rgba(17, 18, 24, 0.04), 0 8px 24px -12px rgba(17, 18, 24, 0.12);
    --tcm-shadow-elevated: 0 4px 6px -1px rgba(17, 18, 24, 0.06), 0 12px 32px -4px rgba(17, 18, 24, 0.14);
    --tcm-shadow-sm: 0 1px 3px rgba(17, 18, 24, 0.05);

    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 16px;
    --r-pill: 999px;

    /* ── TIPOGRAFIA ── */
    --tcm-font-serif: 'Lora', 'Georgia', 'Times New Roman', serif;
    --tcm-font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --tcm-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

    /* ── ESPAÇAMENTOS ── */
    --s1: 4px;
    --s2: 8px;
    --s3: 16px;
    --s4: 24px;
    --s5: 32px;
    --s6: 48px;

    /* Retrocompatibilidade com tokens existentes (--dw-*) */
    --dw-bg: var(--tcm-bg);
    --dw-bg-soft: var(--tcm-bg-soft);
    --dw-bg-card: var(--tcm-bg-card);
    --dw-ink: var(--tcm-ink);
    --dw-ink-mid: var(--tcm-ink-mid);
    --dw-ink-light: var(--tcm-ink-light);
    --dw-ink-muted: var(--tcm-ink-muted);
    --dw-rule: var(--tcm-rule);
    --dw-rule-soft: var(--tcm-rule-soft);
    --dw-blue: var(--tcm-blue);
    --dw-font-serif: var(--tcm-font-serif);
    --dw-font-sans: var(--tcm-font-sans);
    --dw-font-mono: var(--tcm-font-mono);
}

/* ── BASE & RESET GENTIL ── */
body {
    background-color: var(--tcm-bg);
    color: var(--tcm-ink);
    font-family: var(--tcm-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── CONTAINERS DE PÁGINA PADRONIZADOS ── */
.tcm-page,
.main-content,
.eo,
.so,
.mb-container,
.gx-container,
.pcr-container,
.volatility-container,
.correlation-page-container,
.investors-container,
.screening-container {
    background: var(--tcm-bg);
    color: var(--tcm-ink);
    font-family: var(--tcm-font-sans);
}

.tcm-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: var(--s4) var(--s6) var(--s6);
}

@media (max-width: 768px) {
    .tcm-container {
        padding: var(--s3) var(--s3) var(--s5);
    }
}

/* ── MASTHEAD DE PÁGINA (PADRÃO ESTRUTURAS-V2) ── */
.tcm-masthead,
.eo-masthead,
.so-masthead,
.mb-header,
.gx-header,
.pcr-header,
.volatility-header,
.correlation-header,
.investors-header,
.screening-header,
.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s3);
    flex-wrap: wrap;
    padding-bottom: var(--s3);
    margin-bottom: var(--s4);
    border-bottom: 1px solid var(--tcm-rule);
}

.tcm-eyebrow,
.eo-eyebrow,
.so-eyebrow,
.ap-eyebrow,
.page-eyebrow,
.section-eyebrow {
    display: none !important;
}


.tcm-title,
.eo-title,
.so-title,
.mb-title,
.gx-title,
.pcr-title,
.volatility-title,
.correlation-title,
.investors-title,
.screening-title,
.page-title,
h1.title {
    margin: 0;
    font: 700 32px/1.15 var(--tcm-font-serif);
    color: var(--tcm-ink);
    letter-spacing: -0.015em;
}

@media (max-width: 768px) {
    .tcm-title,
    .eo-title,
    .so-title,
    .mb-title,
    .gx-title,
    .pcr-title,
    .volatility-title,
    .correlation-title,
    .investors-title,
    .screening-title,
    .page-title {
        font-size: 26px;
    }
}

.tcm-note,
.eo-note,
.so-note,
.mb-subtitle,
.gx-subtitle,
.pcr-subtitle,
.volatility-subtitle,
.correlation-subtitle,
.investors-subtitle,
.screening-subtitle,
.page-subtitle {
    margin: var(--s1) 0 0;
    font: 400 14px/1.5 var(--tcm-font-sans);
    color: var(--tcm-ink-mid);
    max-width: 860px;
}

/* Badges de cabeçalho */
.tcm-badges,
.eo-badges,
.so-badges,
.header-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.tcm-badge,
.eo-badge,
.so-badge,
.status-pill,
.header-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--tcm-rule);
    border-radius: var(--r-pill);
    background: var(--tcm-bg-card);
    font: 500 12px var(--tcm-font-mono);
    color: var(--tcm-ink-mid);
    white-space: nowrap;
}

.tcm-badge .dot,
.eo-badge .dot,
.so-badge .dot,
.status-pill .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tcm-green);
    display: inline-block;
}

.tcm-badge .dot.warn { background: var(--tcm-yellow); }
.tcm-badge .dot.alert { background: var(--tcm-put); }

/* ── CAIXA DE AVISO / NOTA INFORMATIVA (.eo-aviso) ── */
.tcm-aviso,
.eo-aviso,
.so-aviso,
.alert-banner,
.info-callout {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0 0 var(--s3);
    padding: 12px 16px;
    border: 1px solid var(--tcm-rule);
    background: var(--tcm-bg-card);
    border-radius: var(--r-md);
    font: 400 13px/1.55 var(--tcm-font-sans);
    color: var(--tcm-ink-mid);
}

.tcm-aviso i,
.eo-aviso i,
.info-callout i {
    margin-top: 2px;
    color: var(--tcm-ink-muted);
    font-size: 14px;
}

.tcm-aviso strong,
.eo-aviso strong,
.info-callout strong {
    color: var(--tcm-ink);
    font-weight: 600;
}

/* ── PAINÉIS E CARDS (.eo-panel) ── */
.tcm-panel,
.eo-panel,
.so-panel,
.card,
.dashboard-card,
.data-card,
.panel,
.kpi-card,
.chart-card,
.pcr-card,
.universo-card,
.mb-card,
.gx-card,
.screening-card {
    background: var(--tcm-bg-card);
    border: 1px solid var(--tcm-rule);
    border-radius: var(--r-lg);
    box-shadow: var(--tcm-shadow);
    overflow: hidden;
    margin-bottom: var(--s4);
}

.tcm-panel-header,
.card-header,
.mb-card-header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--tcm-rule);
    background: var(--tcm-bg-card);
}

.tcm-panel-title,
.card-title,
.chart-title {
    margin: 0;
    font: 700 18px var(--tcm-font-serif);
    color: var(--tcm-ink);
}

.tcm-panel-body,
.card-body {
    padding: var(--s4);
}

/* ── TOOLBAR DE FILTROS & CONTROLES (.eo-toolbar) ── */
.tcm-toolbar,
.eo-toolbar,
.so-toolbar,
.controls-bar,
.filter-bar,
.filters-container,
.gx-toolbar,
.mb-controls,
.pcr-filters,
.volatility-toolbar {
    display: flex;
    align-items: center;
    gap: 12px 16px;
    flex-wrap: wrap;
    padding: 10px var(--s4);
    border-bottom: 1px solid var(--tcm-rule);
    background: var(--tcm-bg-soft);
}

/* Botões segmentados e Tabs estilo pílula canônica (.so-seg, .eo-seg) */
.tcm-seg,
.eo-seg,
.so-seg,
.segmented-control,
.segmented-switcher,
.timeframe-group,
.timeframe-selector,
.period-selector,
.mb-main-tabs-nav,
.vol-tabs-container,
.sector-tabs-container,
.page-navigation-tabs,
.indicator-tabs-container,
.period-tabs-wrapper,
.quick-chips {
    display: inline-flex !important;
    align-items: center !important;
    padding: 3px !important;
    gap: 2px !important;
    border: 1px solid var(--tcm-rule) !important;
    border-radius: var(--r-pill) !important;
    background: var(--tcm-bg-soft) !important;
    width: fit-content !important;
    box-sizing: border-box !important;
}

.tcm-seg button,
.eo-seg button,
.so-seg button,
.segmented-control button,
.btn-group-pill button,
.mb-main-tab-btn,
.vol-tab-btn,
.sector-tab-btn,
.page-nav-btn,
.indicator-tab-btn,
.period-tab-btn,
.switcher-btn,
.tf-btn,
.chip-btn,
.tcm-seg a,
.segmented-control a {
    min-height: 34px !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: var(--r-pill) !important;
    background: transparent !important;
    font: 600 13px/1.2 var(--tcm-font-sans) !important;
    color: var(--tcm-ink-mid) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease !important;
    white-space: nowrap !important;
}

.tcm-seg button:hover,
.eo-seg button:hover,
.so-seg button:hover,
.segmented-control button:hover,
.mb-main-tab-btn:hover,
.vol-tab-btn:hover,
.sector-tab-btn:hover,
.page-nav-btn:hover,
.indicator-tab-btn:hover,
.period-tab-btn:hover,
.switcher-btn:hover,
.tf-btn:hover,
.chip-btn:hover,
.tcm-seg a:hover {
    color: var(--tcm-ink) !important;
    background: rgba(0, 0, 0, 0.04) !important;
}

.tcm-seg button[aria-pressed="true"],
.tcm-seg button.active,
.eo-seg button[aria-pressed="true"],
.so-seg button[aria-pressed="true"],
.segmented-control button.active,
.btn-group-pill button.active,
.mb-main-tab-btn.active,
.vol-tab-btn.active,
.sector-tab-btn.active,
.page-nav-btn.active,
.indicator-tab-btn.active,
.period-tab-btn.active,
.switcher-btn.active,
.tf-btn.active,
.chip-btn.active,
.tcm-seg a.active {
    background: var(--tcm-ink) !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}

.mb-main-tab-btn.active .mb-tab-badge,
.tcm-seg button.active .badge,
.indicator-tab-btn.active .badge {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
}

/* Selects arredondados com chevron customizado (.eo-select) */
.tcm-select,
.eo-select,
.so-select,
select.form-select,
.filter-select,
.gx-field select,
.volatility-select {
    min-height: 38px;
    padding: 0 32px 0 14px;
    border: 1px solid var(--tcm-rule);
    border-radius: var(--r-pill);
    background: var(--tcm-bg-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236B7280' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center;
    font: 600 12px var(--tcm-font-sans);
    color: var(--tcm-ink-mid);
    appearance: none;
    cursor: pointer;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.tcm-select:focus,
.eo-select:focus,
.so-select:focus,
select.form-select:focus,
.filter-select:focus,
.tcm-input:focus {
    outline: none;
    border-color: var(--tcm-blue);
    box-shadow: 0 0 0 3px var(--tcm-blue-soft);
}

.tcm-input,
input.form-control,
.gx-field input {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--tcm-rule);
    border-radius: var(--r-pill);
    background: var(--tcm-bg-card);
    font: 500 13px var(--tcm-font-mono);
    color: var(--tcm-ink);
    transition: border-color 150ms ease;
}

/* ── BOTÕES PRIMÁRIOS (PRETO CANÔNICO) E SECUNDÁRIOS ── */
.tcm-btn,
.pcr-button,
.btn-primary,
.btn-calc,
.btn-save,
.tracking-btn-save,
.screening-btn-retry,
.toast-retry-btn,
.base-input-btn,
.auth-btn,
.tcm-tm-btn-primary,
.asm-btn-primary,
button.btn-primary,
a.btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 38px !important;
    padding: 0 18px !important;
    border-radius: var(--r-pill) !important;
    background: var(--tcm-ink) !important;
    color: #FFFFFF !important;
    font: 600 13px/1.2 var(--tcm-font-sans) !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
    transition: background 150ms ease, transform 100ms ease !important;
}

.tcm-btn:hover,
.pcr-button:hover,
.btn-primary:hover,
.btn-calc:hover,
.btn-save:hover,
.tracking-btn-save:hover,
.screening-btn-retry:hover,
.toast-retry-btn:hover,
.base-input-btn:hover,
.auth-btn:hover,
.tcm-tm-btn-primary:hover,
.asm-btn-primary:hover {
    background: #27272A !important;
    color: #FFFFFF !important;
}

.tcm-btn-secondary,
.btn-secondary,
.tracking-btn-cancel,
.tracking-btn-secondary,
.tcm-tm-btn-secondary,
.asm-btn-secondary,
.sf-btn-cancel {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 38px !important;
    padding: 0 16px !important;
    border-radius: var(--r-pill) !important;
    background: var(--tcm-bg-card) !important;
    color: var(--tcm-ink) !important;
    font: 600 13px/1.2 var(--tcm-font-sans) !important;
    border: 1px solid var(--tcm-rule) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: background 150ms ease, border-color 150ms ease !important;
}

.tcm-btn-secondary:hover,
.btn-secondary:hover,
.tracking-btn-cancel:hover,
.tracking-btn-secondary:hover,
.tcm-tm-btn-secondary:hover,
.asm-btn-secondary:hover {
    background: var(--tcm-bg-soft) !important;
    border-color: var(--tcm-ink-muted) !important;
}

/* ── TABELAS DE DADOS (.tcm-table, .so-rank, .eo-table) ── */
.tcm-table-scroll,
.tcm-table-container,
.eo-scroll,
.so-rank,
.table-responsive,
.sectors-table-wrap,
.screening-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--tcm-bg-card);
    border: 1px solid var(--tcm-rule);
    border-radius: var(--r-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.tcm-table,
.eo-table,
.so-table,
.table,
.data-table,
.pcr-table,
.screening-table,
.sectors-data-table,
.so-rank table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.tcm-table thead th,
.eo-table thead th,
.so-table thead th,
.table thead th,
.data-table thead th,
.pcr-table thead th,
.screening-table thead th,
.sectors-table thead th,
.sectors-data-table th,
.mb-sectors-table th,
.signals-table thead th,
.so-rank th {
    padding: 8px 10px !important;
    border-top: 1px solid var(--tcm-rule-soft) !important;
    border-bottom: 1px solid var(--tcm-rule) !important;
    background: var(--tcm-bg-card) !important;
    font: 600 10px/1.3 var(--tcm-font-mono) !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
    color: var(--tcm-ink-light) !important;
    text-align: right;
    white-space: nowrap !important;
}

.tcm-table td,
.tcm-table tbody th,
.eo-table td,
.eo-table tbody th,
.so-table td,
.so-table tbody th,
.table tbody td,
.data-table tbody td,
.pcr-table tbody td,
.screening-table tbody td,
.sectors-table tbody td,
.sectors-data-table td,
.mb-sectors-table td,
.signals-table tbody td,
.so-rank td {
    padding: 8px 10px !important;
    border-bottom: 1px solid var(--tcm-rule-soft) !important;
    font: 400 13px var(--tcm-font-mono) !important;
    font-variant-numeric: tabular-nums !important;
    color: var(--tcm-ink) !important;
    text-align: right;
    vertical-align: middle;
    white-space: nowrap;
}

.tcm-table tbody tr:hover,
.eo-table tbody tr:hover,
.so-table tbody tr:hover,
.table tbody tr:hover,
.data-table tbody tr:hover,
.pcr-table tbody tr:hover,
.screening-table tbody tr:hover,
.sectors-table tbody tr:hover,
.sectors-data-table tbody tr:hover,
.mb-sectors-table tbody tr:hover,
.signals-table tbody tr:hover,
.so-rank tbody tr:hover {
    background-color: var(--tcm-bg-soft) !important;
}

/* Links dentro de tabelas (tickers, códigos de ativos) sempre escuros/neutros */
.tcm-table td a,
.eo-table td a,
.so-table td a,
.table tbody td a,
.data-table tbody td a,
.pcr-table tbody td a,
.screening-table tbody td a,
.sectors-table tbody td a,
.sectors-data-table td a,
.mb-sectors-table td a,
.signals-table tbody td a,
.ticker-link,
td .ticker-link {
    color: var(--tcm-ink) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    font-family: var(--tcm-font-mono) !important;
}

.tcm-table td a:hover,
.screening-table tbody td a:hover,
.ticker-link:hover,
td .ticker-link:hover {
    color: #000000 !important;
    text-decoration: underline !important;
}

.tcm-table .l, .table .text-left, .eo-table .l, .so-table .l, .so-rank th.l, .so-rank td.l { text-align: left !important; }
.tcm-table .c, .table .text-center, .eo-table .c, .so-table .c { text-align: center !important; }
.tcm-table .r, .table .text-right, .eo-table .r, .so-table .r { text-align: right !important; }

/* ── TAGS SEMÂNTICAS DE OPÇÕES (CALL / PUT) ── */
.tcm-tag-call,
.eo-st-call,
.tag-call,
.badge-call {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--tcm-call-border);
    border-radius: var(--r-pill);
    background: var(--tcm-call-bg);
    color: var(--tcm-call);
    font: 600 11px var(--tcm-font-mono);
    letter-spacing: 0.05em;
}

.tcm-tag-put,
.eo-st-put,
.tag-put,
.badge-put {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--tcm-put-border);
    border-radius: var(--r-pill);
    background: var(--tcm-put-bg);
    color: var(--tcm-put-texto);
    font: 600 11px var(--tcm-font-mono);
    letter-spacing: 0.05em;
}

.tcm-ticker,
.ticker-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: var(--r-sm);
    background: var(--tcm-bg-soft);
    color: var(--tcm-ink);
    font: 600 12px var(--tcm-font-mono);
    letter-spacing: 0.02em;
}

/* ── GRUPOS DE CONTEÚDO E SEÇÕES ── */
.tcm-section-title,
.eo-grupo-titulo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s2);
    margin: var(--s4) 0 var(--s2);
    font: 700 20px var(--tcm-font-serif);
    color: var(--tcm-ink);
}

.tcm-section-title span,
.eo-grupo-titulo span {
    font: 500 12px var(--tcm-font-mono);
    color: var(--tcm-ink-light);
}

/* ── MODAIS E POPUPS HARMONIZADOS (ESTILO TCM CANÔNICO) ── */
dialog.tcm-modal,
.tcm-tm-dialog,
.asm-dialog,
.asm-chart-dialog,
.sf-modal,
.tracking-modal,
.eo-modal,
.modal-content {
    border: 1px solid var(--tcm-rule) !important;
    border-radius: var(--r-xl) !important;
    background: var(--tcm-bg-card) !important;
    box-shadow: 0 20px 60px -12px rgba(17, 18, 24, 0.22), 0 4px 16px rgba(0, 0, 0, 0.06) !important;
    color: var(--tcm-ink) !important;
    overflow: hidden;
}

dialog.tcm-modal::backdrop,
.tcm-tm-overlay,
.asm-overlay,
.asm-chart-backdrop,
.sf-modal-backdrop,
.tracking-modal-backdrop,
.eo-modal::backdrop,
.modal-backdrop {
    background: rgba(17, 18, 24, 0.45) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

.tcm-tm-title,
.asm-title-info h3,
.asm-chart-title,
.sf-modal-title,
.tracking-modal-title,
.eo-modal-title {
    font-family: var(--tcm-font-serif) !important;
    font-weight: 700 !important;
    color: var(--tcm-ink) !important;
    letter-spacing: -0.015em !important;
}

.tcm-tm-close,
.asm-close-btn,
.asm-btn-close,
.sf-modal-close-btn,
.tracking-modal-close {
    background: var(--tcm-bg-soft) !important;
    border: 1px solid var(--tcm-rule-soft) !important;
    color: var(--tcm-ink) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: background 150ms ease !important;
}

.tcm-tm-close:hover,
.asm-close-btn:hover,
.asm-btn-close:hover,
.sf-modal-close-btn:hover,
.tracking-modal-close:hover {
    background: var(--tcm-rule) !important;
}

/* Badges e Pílulas dentro dos modais */
.asm-ticker-badge {
    background: var(--tcm-ink) !important;
    color: #FFFFFF !important;
    border-radius: var(--r-pill) !important;
    font-family: var(--tcm-font-mono) !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

/* Botões primários e de ação nos modais (sempre pretos canônicos) */
.tcm-tm-btn-primary,
.asm-btn-primary,
.asm-btn-detail,
.tracking-btn-save,
#confirm-nav-btn-chart,
.sf-modal-btn-confirm,
#signals-chart-btn-close,
#signals-ops-btn-close {
    background: var(--tcm-ink) !important;
    color: #FFFFFF !important;
    border-radius: var(--r-pill) !important;
    border: 1px solid transparent !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

.tcm-tm-btn-primary:hover,
.asm-btn-primary:hover,
.asm-btn-detail:hover,
.tracking-btn-save:hover,
#confirm-nav-btn-chart:hover,
.sf-modal-btn-confirm:hover,
#signals-chart-btn-close:hover,
#signals-ops-btn-close:hover {
    background: #27272A !important;
    color: #FFFFFF !important;
    transform: none !important;
}

/* Botões secundários e cancelar nos modais */
.tcm-tm-btn-secondary,
.asm-btn-secondary,
.asm-btn-close-modal,
.asm-btn-close-chart,
.tracking-modal-cancel,
.tracking-btn-cancel,
.tracking-btn-secondary,
.sf-modal-btn-cancel {
    background: var(--tcm-bg-card) !important;
    color: var(--tcm-ink) !important;
    border: 1px solid var(--tcm-rule) !important;
    border-radius: var(--r-pill) !important;
    font-weight: 600 !important;
}

.tcm-tm-btn-secondary:hover,
.asm-btn-secondary:hover,
.asm-btn-close-modal:hover,
.asm-btn-close-chart:hover,
.tracking-modal-cancel:hover,
.tracking-btn-cancel:hover,
.tracking-btn-secondary:hover,
.sf-modal-btn-cancel:hover {
    background: var(--tcm-bg-soft) !important;
}

/* Controles de Timeframe e Ferramentas em Gráficos de Modais */
.asm-tf-btn,
.chart-btn,
.asm-ruler-btn {
    background: var(--tcm-bg-soft) !important;
    border: 1px solid var(--tcm-rule-soft) !important;
    color: var(--tcm-ink-mid) !important;
    transition: all 150ms ease !important;
}

.asm-tf-btn:hover:not(.active),
.chart-btn:hover:not(.active),
.asm-ruler-btn:hover:not(.active) {
    background: var(--tcm-rule) !important;
    color: var(--tcm-ink) !important;
}

.asm-tf-btn.active,
.chart-btn.active,
.asm-ruler-btn.active {
    background: var(--tcm-ink) !important;
    border-color: var(--tcm-ink) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

.asm-spinner {
    border: 3px solid rgba(24, 24, 27, 0.15) !important;
    border-top-color: var(--tcm-ink) !important;
}

/* Subtítulos e tipografia em modais */
.tcm-tm-subtitle,
.asm-col-subtitle,
.asm-chart-subtitle,
.tracking-modal-subtitle,
.sf-modal-subtitle {
    font: 500 12px var(--tcm-font-sans) !important;
    color: var(--tcm-ink-light) !important;
}

/* Inputs e autocomplete dentro de modais */
.tcm-tm-search-input:focus,
.tcm-tm-textarea:focus,
.sf-modal input:focus {
    border-color: var(--tcm-ink) !important;
    box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.08) !important;
}

.tcm-tm-suggestion-item:hover {
    background: var(--tcm-bg-soft) !important;
}

.tcm-tm-sug-ticker {
    color: var(--tcm-ink) !important;
}