@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600;700&display=swap');

:root,
:root[data-theme='clear'] {
    --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
    --font-display: var(--font-body);
    --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

    --bg-body: #111819;
    --bg-surface: #172123;
    --bg-panel: #1c292b;
    --bg-panel-strong: #223235;
    --bg-card: #26383c;
    --bg-elevated: #30474c;
    --bg-input: #10191b;

    --bg-primary: var(--bg-body);
    --bg-secondary: var(--bg-surface);
    --bg-tertiary: var(--bg-card);
    --bg-hover: rgba(110, 168, 254, 0.1);

    --border: rgba(174, 196, 198, 0.22);
    --border-strong: rgba(190, 214, 218, 0.38);
    --border-color: var(--border);
    --border-light: rgba(174, 196, 198, 0.13);

    --text-primary: #f4f8f8;
    --text-secondary: #cad7d8;
    --text-muted: #a2b4b6;
    --text-inverse: #0c1214;

    --accent-primary: #f2b84b;
    --accent-secondary: #6ea8fe;
    --accent-positive: #45d987;
    --accent-negative: #ff6b7f;
    --accent-warning: #f0a53d;
    --accent-neutral: #b2c4c6;
    --chart-yoy-ntm: #f2c14e;
    --chart-yoy-ttm: #a78bfa;
    --chart-yoy-price: #5bd4ff;

    --accent-blue: var(--accent-secondary);
    --accent-green: var(--accent-positive);
    --accent-red: var(--accent-negative);
    --accent-orange: var(--accent-primary);
    --accent-purple: var(--accent-secondary);
    --accent-teal: var(--accent-secondary);

    --surface-base: var(--bg-panel);
    --focus-ring: rgba(110, 168, 254, 0.64);
    --shadow-panel: 0 1px 0 rgba(255, 255, 255, 0.035);
    --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.03);

    --radius-panel: 8px;
    --radius-card: 8px;
    --radius-control: 8px;
    --radius-pill: 999px;

    --duration-fast: 150ms;
    --duration-base: 190ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --z-dropdown: 50;
    --z-sticky: 70;
    --z-modal-backdrop: 100;
    --z-modal: 110;
    --z-toast: 120;
    --z-tooltip: 130;
}

:root[data-theme='dark'] {
    --bg-body: #080d10;
    --bg-surface: #0d1417;
    --bg-panel: #121c20;
    --bg-panel-strong: #17242a;
    --bg-card: #1d2d33;
    --bg-elevated: #263b42;
    --bg-input: #080f12;

    --bg-primary: var(--bg-body);
    --bg-secondary: var(--bg-surface);
    --bg-tertiary: var(--bg-card);
    --bg-hover: rgba(91, 212, 255, 0.08);

    --border: rgba(154, 181, 189, 0.2);
    --border-strong: rgba(172, 204, 214, 0.34);
    --border-color: var(--border);
    --border-light: rgba(154, 181, 189, 0.12);

    --text-primary: #f2f7f8;
    --text-secondary: #c5d3d6;
    --text-muted: #95a9ad;
    --text-inverse: #071013;

    --accent-primary: #e6b35a;
    --accent-secondary: #5bd4ff;
    --accent-positive: #4cdb8a;
    --accent-negative: #ff6b83;
    --accent-warning: #eca646;
    --accent-neutral: #a9bdc2;
    --chart-yoy-ntm: #e6b35a;
    --chart-yoy-ttm: #b39cff;
    --chart-yoy-price: #5bd4ff;

    --accent-blue: var(--accent-secondary);
    --accent-green: var(--accent-positive);
    --accent-red: var(--accent-negative);
    --accent-orange: var(--accent-primary);
    --accent-purple: var(--chart-yoy-ttm);
    --accent-teal: var(--accent-secondary);

    --surface-base: var(--bg-panel);
    --focus-ring: rgba(91, 212, 255, 0.62);
    --shadow-panel: 0 1px 0 rgba(255, 255, 255, 0.03);
    --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.025);
}

:root[data-theme='light'] {
    --bg-body: #f3f6f7;
    --bg-surface: #ffffff;
    --bg-panel: #ffffff;
    --bg-panel-strong: #eef3f5;
    --bg-card: #e8f0f2;
    --bg-elevated: #dce9ed;
    --bg-input: #fbfdfd;

    --bg-primary: var(--bg-body);
    --bg-secondary: var(--bg-surface);
    --bg-tertiary: var(--bg-card);
    --bg-hover: rgba(30, 99, 182, 0.08);

    --border: rgba(51, 74, 82, 0.2);
    --border-strong: rgba(51, 74, 82, 0.34);
    --border-color: var(--border);
    --border-light: rgba(51, 74, 82, 0.12);

    --text-primary: #142022;
    --text-secondary: #405156;
    --text-muted: #62767c;
    --text-inverse: #ffffff;

    --accent-primary: #8b610d;
    --accent-secondary: #1e63b6;
    --accent-positive: #0f7f50;
    --accent-negative: #c93650;
    --accent-warning: #a86205;
    --accent-neutral: #596b70;
    --chart-yoy-ntm: #8b610d;
    --chart-yoy-ttm: #6b4ab6;
    --chart-yoy-price: #0b6f8a;

    --accent-blue: var(--accent-secondary);
    --accent-green: var(--accent-positive);
    --accent-red: var(--accent-negative);
    --accent-orange: var(--accent-primary);
    --accent-purple: var(--chart-yoy-ttm);
    --accent-teal: var(--accent-secondary);

    --focus-ring: rgba(30, 99, 182, 0.48);
    --shadow-panel: 0 1px 0 rgba(20, 32, 34, 0.05);
    --shadow-soft: 0 1px 0 rgba(20, 32, 34, 0.04);
}

html {
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    color: var(--text-primary);
    background: var(--bg-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3 {
    color: var(--text-primary);
    font-family: var(--font-body);
    letter-spacing: 0;
    text-wrap: balance;
}

p,
li {
    text-wrap: pretty;
}

:where(button, a, input, select, summary, [role='button']):focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.strategy-shell {
    width: min(1760px, calc(100vw - 28px));
    padding: 12px 0 32px;
}

.strategy-main {
    gap: 12px;
}

.strategy-header,
.header {
    background: var(--bg-surface) !important;
    border-color: var(--border) !important;
    border-radius: var(--radius-panel) !important;
    box-shadow: var(--shadow-panel) !important;
}

.strategy-header {
    top: 8px;
    padding: 12px 16px;
    z-index: var(--z-sticky);
}

.header {
    min-height: 48px;
    padding: 0 14px;
}

.brand-mark,
.logo-icon {
    border-radius: var(--radius-control) !important;
    background: var(--accent-primary) !important;
    color: var(--text-inverse) !important;
    box-shadow: none !important;
    font-family: var(--font-body) !important;
}

.brand-mark {
    width: 40px;
    height: 40px;
}

.brand-title,
.logo-text {
    font-family: var(--font-body) !important;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
}

.brand-subtitle,
.logo-subtitle {
    color: var(--text-secondary);
}

.strategy-view-nav,
.view-nav {
    gap: 4px;
}

.strategy-view-link,
.view-link,
.symbol-btn,
.tf-btn,
.time-btn,
.range-btn,
.toolbar-btn,
.secondary-btn,
.theme-toggle,
.refresh-btn,
.theme-btn,
.primary-btn,
.sentiment-chart-range-btn {
    border-radius: var(--radius-control) !important;
    box-shadow: none !important;
    transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out) !important;
}

.strategy-view-link:hover,
.view-link:hover,
.symbol-btn:hover,
.tf-btn:hover,
.time-btn:hover,
.range-btn:hover,
.toolbar-btn:hover,
.secondary-btn:hover,
.theme-toggle:hover,
.refresh-btn:hover,
.theme-btn:hover,
.primary-btn:hover,
.etf-switch-card:hover,
.help-trigger:hover {
    transform: none !important;
}

.strategy-view-link.active,
.view-link.active,
.symbol-btn.active,
.tf-btn.active,
.time-btn.active,
.range-btn.active,
.toolbar-btn.active,
.sentiment-chart-range-btn.active {
    background: rgba(242, 184, 75, 0.16) !important;
    border-color: rgba(242, 184, 75, 0.38) !important;
    color: var(--text-primary) !important;
}

.primary-btn {
    background: var(--accent-primary) !important;
    color: var(--text-inverse) !important;
    font-weight: 750;
}

.secondary-btn,
.theme-toggle,
.range-btn,
.toolbar-btn,
.refresh-btn,
.theme-btn,
.sentiment-chart-range-btn {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text-secondary) !important;
}

.secondary-btn:hover,
.theme-toggle:hover,
.range-btn:hover,
.toolbar-btn:hover,
.refresh-btn:hover,
.theme-btn:hover,
.sentiment-chart-range-btn:hover {
    background: var(--bg-elevated) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-primary) !important;
}

.header-refresh-btn {
    width: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
}

.header-refresh-btn .refresh-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: inherit;
    font-size: 18px;
    line-height: 1;
}

.toolbar-label {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.yoy-mode-group {
    padding-right: 4px;
}

.panel,
.hero-card,
.control-card,
.feature-panel,
.signal-card,
.metrics-panel,
.table-panel,
.chart-box,
.source-card,
.sentiment-source-card,
.etf-switch-card,
.field-group,
.control-summary-chip,
.metric-card,
.signal-item,
.meta-pill,
.notice-banner,
.form-note,
.fundamentals-weight-summary,
.weight-control-strip,
.source-cadence-note,
.source-methodology-block,
.source-metric,
.sentiment-metric,
.signal-source-panel {
    border-radius: var(--radius-card) !important;
    box-shadow: none !important;
}

.panel,
.hero-card,
.control-card,
.feature-panel,
.signal-card,
.metrics-panel,
.table-panel {
    background: var(--bg-panel) !important;
    border: 1px solid var(--border) !important;
    padding: 18px;
}

.hero-card {
    gap: 14px;
}

.hero-copy {
    max-width: 820px;
}

.hero-copy h1 {
    margin-bottom: 10px;
    font-size: 30px;
    line-height: 1.18;
    font-weight: 760;
}

.hero-copy p,
.section-head p,
.field-group-head p,
.form-note,
.notice-banner,
.metric-hint,
.source-note,
.source-section-head p,
.sentiment-source-copy p,
.sentiment-source-note,
.weight-control-strip-head p {
    color: var(--text-secondary) !important;
    line-height: 1.62;
}

.section-head {
    gap: 12px;
    margin-bottom: 14px;
}

.section-head h2,
.control-summary-copy h2,
.field-group-head h3,
.weight-control-strip-head h3,
.source-section-head h3 {
    font-family: var(--font-body) !important;
    font-weight: 700;
}

.section-head h2,
.control-summary-copy h2 {
    font-size: 19px;
}

.field-group-head h3,
.weight-control-strip-head h3,
.source-section-head h3 {
    font-size: 15px;
}

.meta-pill,
.control-summary-chip,
.field-group,
.metric-card,
.signal-item,
.source-card,
.etf-switch-card,
.sentiment-source-card,
.fundamentals-weight-summary,
.weight-control-strip,
.source-methodology-block,
.source-metric,
.sentiment-metric,
.signal-source-panel {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
}

.chart-box,
.fundamentals-chart,
.sentiment-metric-chart-target {
    background: var(--bg-panel-strong) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-card) !important;
}

.chart-panel {
    background: var(--bg-body);
    border-bottom-color: var(--border) !important;
}

.chart-panel:hover {
    background: rgba(103, 213, 173, 0.025);
}

.chart-label-text,
.chart-label-price,
.legend-value,
.meta-value,
.metric-value,
.signal-item-value,
.control-chip-value,
.readonly-badge,
td,
th {
    font-variant-numeric: tabular-nums;
}

.metric-value,
.signal-item-value,
.meta-value,
.control-chip-value,
.readonly-badge,
.footer-stat-value,
.legend-value,
.chart-label-price {
    font-family: var(--font-mono) !important;
}

.metric-label,
.signal-item-label,
.meta-label,
.field-label,
.field-label-row,
.control-chip-label,
.source-card-label,
.source-metric-label,
.sentiment-metric-label,
.sentiment-source-updated,
.weight-summary-label,
.setting-label {
    color: var(--text-muted) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.field input,
.field select,
.form-input,
.readonly-badge {
    min-height: 44px !important;
    border-radius: var(--radius-control) !important;
    background: var(--bg-input) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}

.field input::placeholder,
.form-input::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

.field input:focus,
.field select:focus,
.form-input:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 3px rgba(242, 184, 75, 0.14) !important;
}

.status-chip,
.live-badge,
.trade-status,
.sentiment-badge,
.source-badge,
.metric-observation,
.company-ticker,
.banner-segment,
.control-summary-action,
.metric-reference-period {
    border-radius: var(--radius-pill) !important;
    box-shadow: none !important;
}

.status-chip {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text-secondary) !important;
}

.status-chip[data-state='ready'],
.live-badge {
    background: rgba(69, 217, 135, 0.12) !important;
    border-color: rgba(69, 217, 135, 0.28) !important;
    color: var(--accent-positive) !important;
}

.status-chip[data-state='error'] {
    background: rgba(255, 113, 135, 0.12) !important;
    border-color: rgba(255, 113, 135, 0.3) !important;
    color: var(--accent-negative) !important;
}

.notice-neutral {
    background: var(--bg-card) !important;
    color: var(--text-secondary) !important;
}

.notice-positive {
    background: rgba(69, 217, 135, 0.12) !important;
    border-color: rgba(69, 217, 135, 0.3) !important;
    color: var(--text-primary) !important;
}

.notice-negative {
    background: rgba(255, 113, 135, 0.12) !important;
    border-color: rgba(255, 113, 135, 0.3) !important;
    color: var(--text-primary) !important;
}

.notice-emphasis {
    background: rgba(242, 184, 75, 0.13) !important;
    border-color: rgba(242, 184, 75, 0.34) !important;
    color: var(--text-primary) !important;
}

.signal-item-value.positive,
.value-positive,
.table-value-positive,
.heatmap-table td.heat-pos-soft,
.heatmap-table td.heat-pos-strong,
.tone-cool {
    color: var(--accent-positive) !important;
}

.signal-item-value.negative,
.value-negative,
.table-value-negative,
.heatmap-table td.heat-neg-soft,
.heatmap-table td.heat-neg-strong,
.tone-hot {
    color: var(--accent-negative) !important;
}

.signal-item-value.emphasis,
.metric-card[data-tone='emphasis'] .metric-value,
.tone-warm,
.tone-warning {
    color: var(--accent-primary) !important;
}

.metric-card[data-tone='positive'] .metric-value {
    color: var(--accent-positive) !important;
}

.metric-card[data-tone='negative'] .metric-value {
    color: var(--accent-negative) !important;
}

.table-scroll {
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--bg-panel-strong);
}

table {
    border-collapse: separate;
    border-spacing: 0;
}

th,
td {
    border-bottom-color: rgba(150, 190, 164, 0.12) !important;
}

th {
    background: var(--bg-card) !important;
    color: var(--text-secondary) !important;
}

tbody tr:nth-child(even) {
    background: rgba(103, 213, 173, 0.035) !important;
}

tbody tr:hover {
    background: rgba(242, 184, 75, 0.07) !important;
}

.table-panel table th:first-child,
.table-panel table td:first-child {
    background: var(--bg-card) !important;
}

.sentiment-category-head {
    border-left: 0 !important;
    padding-left: 0 !important;
}

.sentiment-category-head h3 {
    font-size: 16px;
}

.sentiment-source-card {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
}

.sentiment-metric.expanded {
    background: rgba(242, 184, 75, 0.1) !important;
    border-color: rgba(242, 184, 75, 0.34) !important;
}

.sentiment-source-summary,
.sentiment-source-body {
    background: transparent !important;
}

.sentiment-source-preview-chip,
.sentiment-source-preview-more,
.sentiment-source-preview-empty {
    background: var(--bg-panel-strong) !important;
    border-color: var(--border) !important;
    color: var(--text-secondary) !important;
}

.sentiment-metric-chart-wrap,
.sentiment-source-footer,
.sentiment-source-link-row {
    border-top-color: rgba(150, 190, 164, 0.16) !important;
    border-top-style: solid !important;
}

.sentiment-metric-chart-target {
    height: 420px !important;
}

.pct-bar {
    background: rgba(240, 247, 241, 0.09) !important;
}

.pct-cell {
    grid-template-columns: 20px minmax(0, 1fr) 48px !important;
}

.pct-bar-fill {
    background: rgba(103, 213, 173, 0.72) !important;
}

.pct-bar-hot .pct-bar-fill,
.pct-bar-warning .pct-bar-fill,
.pct-bar-warm .pct-bar-fill,
.pct-bar-cool .pct-bar-fill {
    background: rgba(242, 184, 75, 0.74) !important;
}

.pct-bar-hot .pct-bar-marker {
    background: var(--accent-negative) !important;
}

.pct-bar-warning .pct-bar-marker,
.pct-bar-warm .pct-bar-marker {
    background: var(--accent-primary) !important;
}

.pct-bar-cool .pct-bar-marker,
.pct-bar-marker {
    background: var(--accent-secondary) !important;
    box-shadow: 0 0 0 2px var(--bg-card) !important;
}

.etf-switch-card.active {
    background: rgba(242, 184, 75, 0.1) !important;
    border-color: rgba(242, 184, 75, 0.42) !important;
}

.ranking-track {
    background: rgba(240, 247, 241, 0.08) !important;
}

.ranking-track::before {
    background: rgba(240, 247, 241, 0.24) !important;
}

.ranking-fill.pos {
    background: rgba(69, 217, 135, 0.66) !important;
}

.ranking-fill.neg {
    background: rgba(255, 113, 135, 0.66) !important;
}

.help-modal {
    z-index: var(--z-modal);
}

.help-modal-backdrop {
    background: rgba(5, 14, 10, 0.72) !important;
    backdrop-filter: none !important;
}

.help-modal-card {
    border-radius: var(--radius-panel) !important;
    background: var(--bg-panel) !important;
    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.28) !important;
}

.footer-bar {
    background: var(--bg-surface) !important;
    border-top-color: var(--border) !important;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: rgba(148, 169, 155, 0.32) !important;
    border-radius: var(--radius-pill) !important;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 169, 155, 0.46) !important;
}

@media (max-width: 1180px) {
    .strategy-view-nav,
    .view-nav {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .strategy-view-link,
    .view-link {
        flex: 0 0 auto;
    }
}

@media (max-width: 900px) {
    .strategy-header,
    .header,
    .panel {
        border-radius: var(--radius-panel) !important;
    }

    .strategy-header {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .brand-group,
    .header-actions {
        min-width: 0;
        width: 100%;
    }

    .header-actions {
        justify-content: flex-start !important;
    }

    .status-chip {
        max-width: 100%;
        min-width: 0;
    }

    .status-chip span:last-child {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hero-main {
        flex-direction: column;
    }

    .hero-meta {
        grid-template-columns: 1fr !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .meta-pill {
        min-height: 0;
        min-width: 0;
    }

    .hero-copy h1 {
        font-size: 25px;
    }

    .section-head {
        flex-direction: column;
        align-items: stretch;
    }

    .panel-side-actions,
    .toolbar-actions {
        justify-content: flex-start !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}