:root {
    --dashboard-font-display: "Space Grotesk", "IBM Plex Sans", sans-serif;
    --dashboard-font-body: "IBM Plex Sans", "Helvetica Neue", sans-serif;
    --dashboard-font-mono: "IBM Plex Mono", Consolas, monospace;
    --dashboard-bg: #0b1016;
    --dashboard-bg-alt: #0d131b;
    --dashboard-surface: #121923;
    --dashboard-surface-muted: #0f1620;
    --dashboard-surface-strong: #17202b;
    --dashboard-surface-soft: rgba(18, 25, 35, 0.92);
    --dashboard-border: rgba(255, 255, 255, 0.08);
    --dashboard-border-strong: rgba(255, 255, 255, 0.14);
    --dashboard-grid: rgba(255, 255, 255, 0.09);
    --dashboard-text: #f3f5f8;
    --dashboard-text-secondary: #b6beca;
    --dashboard-text-muted: #848e9f;
    --dashboard-accent: #2f76d5;
    --dashboard-accent-strong: #4387e3;
    --dashboard-accent-soft: rgba(47, 118, 213, 0.16);
    --dashboard-market: #d7aa2f;
    --dashboard-market-soft: rgba(215, 170, 47, 0.16);
    --dashboard-success: #3aa675;
    --dashboard-success-soft: rgba(58, 166, 117, 0.16);
    --dashboard-danger: #d66874;
    --dashboard-danger-soft: rgba(214, 104, 116, 0.16);
    --dashboard-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
    --dashboard-focus-ring: 0 0 0 3px rgba(47, 118, 213, 0.18);
}

body {
    font-family: var(--dashboard-font-body);
    color: var(--dashboard-text);
    background:
        radial-gradient(circle at top left, rgba(47, 118, 213, 0.1), transparent 20%),
        radial-gradient(circle at top right, rgba(215, 170, 47, 0.08), transparent 18%),
        linear-gradient(180deg, var(--dashboard-bg-alt) 0%, var(--dashboard-bg) 32rem, var(--dashboard-bg) 100%);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--dashboard-font-display);
}

code,
pre,
.stack-item,
.powered-by-nav,
.stat-label,
.kpi-label,
.kpi-subtitle,
.file-type,
.header-date,
.toggle-text,
.forecast-meta,
th,
thead,
[class*="mono"] {
    font-family: var(--dashboard-font-mono);
}

::selection {
    background: rgba(67, 135, 227, 0.28);
    color: #f8fbff;
}

.loader-overlay,
.modal-overlay {
    background: rgba(7, 10, 15, 0.82) !important;
}

.loader-content,
.modal-content,
.chart-card,
.kpi-card,
.filters-sidebar,
.dashboard-sidebar,
.view-controls,
.controls-row,
.dashboard-info-card,
.comparison-bar,
.comparison-panel,
.floating-header,
.sidebar,
.sidebar-tip,
.filter-section,
.plot-container,
.info-box,
.app-wrapper,
.results-section,
.input-section,
.explanation,
.sidebar-header,
.legend-panel,
.zoom-control,
.chart-container-wrapper,
.treemap-selection-panel,
.header-date,
.selection-panel,
.region-selector,
.control-group {
    background: var(--dashboard-surface-soft) !important;
    border-color: var(--dashboard-border) !important;
    box-shadow: var(--dashboard-shadow) !important;
}

.retail-hero,
.section,
header.reveal-up,
.intro-section {
    background: transparent !important;
}

.chart-container,
.plotly-chart-container,
.gauge-container,
.table-container,
.data-table-wrapper,
#results-table,
.forecast-figure,
.forecast-image-frame {
    background: rgba(8, 12, 18, 0.52) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.retail-hero p,
.subtitle,
p,
li,
.placeholder-text,
.loader-text,
.filter-helper,
.filter-hint,
.sku-meta,
.section-copy,
.intro-copy,
.page-subtitle,
.plot-container p,
.explanation p,
.explanation li,
.region-cards-loading,
.chart-note,
.helper-copy,
small,
[style*="color: #666"],
[style*="color:#666"],
[style*="color: #999"],
[style*="color:#999"] {
    color: var(--dashboard-text-secondary) !important;
}

.stat-label,
.kpi-label,
.kpi-subtitle,
.filter-label,
.filter-sublabel,
.section-label,
.table-hint,
.header-date,
th,
.toggle-text,
[style*="color: #e5e7eb"],
[style*="color:#e5e7eb"] {
    color: var(--dashboard-text-muted) !important;
}

.btn,
.button,
.btn-primary,
.btn-download,
.btn-run,
.action-button,
.primary-action {
    background: var(--dashboard-accent) !important;
    border-color: rgba(67, 135, 227, 0.38) !important;
    color: #f8fbff !important;
}

.btn:hover,
.button:hover,
.btn-primary:hover,
.btn-download:hover,
.btn-run:hover,
.action-button:hover,
.primary-action:hover {
    background: var(--dashboard-accent-strong) !important;
}

.btn-secondary,
.btn-outline,
.btn-clear,
.secondary-action,
.toggle-btn,
.sidebar-toggle-btn,
.btn-view,
.btn-toggle-chart,
.empresa-mode-btn,
.estructura-mode-btn,
.zoom-btn {
    background: var(--dashboard-surface-muted) !important;
    color: var(--dashboard-text) !important;
    border-color: var(--dashboard-border) !important;
}

.btn-secondary:hover,
.btn-outline:hover,
.btn-clear:hover,
.toggle-btn:hover,
.sidebar-toggle-btn:hover,
.btn-view:hover,
.btn-toggle-chart:hover,
.empresa-mode-btn:hover,
.estructura-mode-btn:hover,
.zoom-btn:hover {
    background: var(--dashboard-accent-soft) !important;
    border-color: rgba(67, 135, 227, 0.34) !important;
}

.btn-view.active,
.btn-toggle-chart.active,
.toggle-btn.is-active,
.empresa-mode-btn.is-active,
.estructura-mode-btn.is-active,
.sidebar-toggle-btn.collapsed {
    background: var(--dashboard-accent-soft) !important;
    border-color: rgba(67, 135, 227, 0.38) !important;
    color: var(--dashboard-text) !important;
}

.chart-card h3 i,
.chart-card h4 i,
.retail-hero h1 i,
.sidebar-header i,
.selection-type-badge,
.logo-icon,
[style*="color: #E30613"],
[style*="color:#E30613"],
[style*="color: #004A99"],
[style*="color:#004A99"] {
    color: var(--dashboard-accent) !important;
}

.logo-icon,
.retail-logo {
    border-color: rgba(67, 135, 227, 0.28) !important;
}

.tabs-nav,
.card-header,
.sku-header,
.section-header,
.modal-header,
.chart-header-row,
.queue-header,
.dashboard-sidebar h3,
.filters-sidebar h3,
.section__head::after,
footer,
.retail-footer,
.Empresa-footer {
    border-color: var(--dashboard-border) !important;
}

input,
select,
textarea,
.date-input,
.filter-dropdown,
.choices__inner,
.choices__list--dropdown,
.choices__list[aria-expanded],
.empresa-search-input {
    font-family: var(--dashboard-font-body) !important;
    color: var(--dashboard-text) !important;
    background: var(--dashboard-surface-muted) !important;
    border-color: var(--dashboard-border-strong) !important;
}

input:focus,
select:focus,
textarea:focus,
.date-input:focus,
.filter-dropdown:focus,
.empresa-search-input:focus,
.choices__inner:focus-within {
    box-shadow: var(--dashboard-focus-ring) !important;
}

textarea,
#news-input {
    min-height: 180px;
}

.radio-custom,
.checkbox-custom,
.toggle-switch {
    background: var(--dashboard-surface-muted) !important;
    border-color: var(--dashboard-border-strong) !important;
}

.styled-radio:checked ~ .radio-custom,
.styled-checkbox:checked ~ .checkbox-custom,
input[type="checkbox"]:checked + .toggle-switch {
    border-color: rgba(67, 135, 227, 0.52) !important;
    background: var(--dashboard-accent) !important;
}

.kpi-delta.positive,
.classification-positive,
[style*="color: #22c55e"],
[style*="color:#22c55e"] {
    color: var(--dashboard-success) !important;
}

.kpi-delta.negative,
.classification-negative,
[style*="color: #ef4444"],
[style*="color:#ef4444"] {
    color: var(--dashboard-danger) !important;
}

[style*="color: #f59e0b"],
[style*="color:#f59e0b"],
[style*="color: #f97316"],
[style*="color:#f97316"],
[style*="background: #f0f9ff"],
[style*="background:#f0f9ff"] {
    color: var(--dashboard-market) !important;
}

[style*="background: linear-gradient(135deg, #E30613 0%, #b3040f 100%)"],
[style*="background:linear-gradient(135deg, #E30613 0%, #b3040f 100%)"] {
    background: linear-gradient(180deg, rgba(67, 135, 227, 0.18), rgba(23, 32, 43, 0.95)) !important;
    border: 1px solid rgba(67, 135, 227, 0.25) !important;
}

.plotly .modebar {
    background: rgba(15, 22, 32, 0.78) !important;
    border: 1px solid var(--dashboard-border) !important;
    border-radius: 8px !important;
}

.plotly .modebar-btn path {
    fill: var(--dashboard-text-secondary) !important;
}

.forecast-shell,
.sentiment-shell {
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto;
}

.forecast-lead,
.sentiment-lead {
    color: var(--dashboard-text-secondary);
    font-size: 1.08rem;
    max-width: 820px;
}

.section-title {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    letter-spacing: -0.05em;
}

@media (max-width: 720px) {
    .forecast-shell,
    .sentiment-shell {
        width: calc(100% - 24px);
    }
}