/* Runtime theme rules. Canonical light and dark variables live in shared/tokens.css. */ /* Theme changes are captured as one page-level transition. Descendant effects are suppressed briefly so tables and cards cannot repaint on separate timelines. */ :root.theme-switching *, :root.theme-switching *::before, :root.theme-switching *::after { animation: none !important; transition: none !important; } ::view-transition-old(root) { animation: theme-fade-out var(--motion-medium) ease both; } ::view-transition-new(root) { animation: theme-fade-in var(--motion-medium) ease both; } @keyframes theme-fade-out { to { opacity: 0; } } @keyframes theme-fade-in { from { opacity: 0; } } :root[data-theme="dark"] :is(html, body, .main, .app-main) { background: var(--canvas); color: var(--text-primary); } :root[data-theme="dark"] :is(.sidebar, .module-nav, .topbar, .app-header, .overview-strip, .statusbar, .status-bar) { border-color: var(--border); background: var(--surface); color: var(--text-primary); box-shadow: none; } :root[data-theme="dark"] .app-header { background: color-mix(in srgb, var(--surface) 96%, transparent); } :root[data-theme="dark"] :is(.sidebar-brand, .sidebar .brand, .nav-group, .sidebar-collapse-button, .header-date-group) { border-color: var(--line-soft); background-color: var(--surface); } :root[data-theme="dark"] :is(.module-tab, .sidebar-collapse-button, .nav-group-label) { color: var(--text-secondary); } :root[data-theme="dark"] .module-tab:hover { background: var(--surface-muted); color: var(--text-primary); } :root[data-theme="dark"] .module-tab.active { background: var(--action-soft); color: var(--action); } :root[data-theme="dark"] :is(.icon-button, .button, .btn, .tbtn, .date-input, .datepick, .search, .sidebar-collapse-button, input, textarea, select) { border-color: var(--border); background-color: var(--surface); color: var(--text-primary); } :root[data-theme="dark"] :is(input, textarea, select)::placeholder { color: var(--text-tertiary); } :root[data-theme="dark"] :is(.icon-button, .button, .btn, .tbtn):hover:not(:disabled) { border-color: var(--blue-line); background-color: var(--surface-muted); color: var(--action); } :root[data-theme="dark"] :is(.button.primary, .btn.primary, .tbtn.primary) { border-color: var(--action); background: var(--action); color: var(--on-action); } :root[data-theme="dark"] :is(.button.primary, .btn.primary, .tbtn.primary):hover:not(:disabled) { border-color: var(--action-hover); background: var(--action-hover); color: var(--on-action); } :root[data-theme="dark"] .theme-toggle { color: var(--text-secondary); } :root[data-theme="dark"] .theme-toggle[aria-pressed="true"] { border-color: var(--warning-line); background: var(--warning-soft); color: var(--warning-color); } :root[data-theme="dark"] :is(.header-command-group, .account-dropdown) { border-color: var(--border); background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow); } :root[data-theme="dark"] :is(.account-dropdown-head, .account-dropdown-separator) { border-color: var(--line-soft); } :root[data-theme="dark"] :is(.account-role-badge, #maxHeight, .pool-state-tag) { border-color: var(--border); background: var(--surface-subtle); color: var(--text-secondary); } :root[data-theme="dark"] :is(.account-role-badge.vip-role-badge, .pool-state-tag.one-word) { border-color: var(--warning-line); background: var(--warning-soft); color: var(--warning-color); } :root[data-theme="dark"] .account-role-badge.admin-role-badge { border-color: var(--blue-line); background: var(--action-soft); color: var(--action); } :root[data-theme="dark"] :is(.overview-strip[data-overview-expanded="true"], .overview-strip[data-overview-expanded="true"] .metric, .overview-strip[data-overview-expanded="true"] .sentiment-block) { border-color: var(--line-soft); background: var(--surface); } :root[data-theme="dark"] :is(.workspace-view.page:not(#heavenView), .page) { background: transparent; color: var(--text-primary); } :root[data-theme="dark"] :is( .card, .panel, .metric-card, .sentiment-panel, .sentiment-stage-guide, .sentiment-history-card, .pool-card, .performance-stage-card, .breadth-card, .market-ladder-tier, .market-ladder-insight-card, .rotation-trajectory-card, .rotation-detail-card, .auction-primary-card, .auction-side-card, .theme-directory-card-v2, .theme-market-card-v2, .theme-members-card-v2, .popularity-table-card-v2, .dragon-trader-detail, .screener-workspace-card, .curated-strategy-card, .quant-factor-card, .mentor-sidebar, .mentor-chat-panel, .review-panel, .review-card ) { border-color: var(--border); background-color: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-soft); } /* Several migrated pages use id-scoped white shells with stronger selectors. */ :root[data-theme="dark"] :is( #limitPool, #brokenView, #downView, #yesterdayView, #performanceView, #sentimentCycleView, #ladderView, #rotationView, #auctionView, #themeLibraryView, #popularityView, #dragonView, #screenerView, #mentorView, #reviewWorkspaceView ) :is(.table-frame, .tbl-wrap, .redesigned-card, .panel, .card) { border-color: var(--border); background-color: var(--surface); color: var(--text-primary); } :root[data-theme="dark"] :is( .card-h, .panel-header, .sentiment-panel-header, .pool-card-header, .performance-stage-card header, .rotation-card-head, .auction-card-head-v2, .theme-card-head-v2, .popularity-card-head-v2, .dragon-detail-header, .screener-card-head, .mentor-page-header, .review-section-heading ) { border-color: var(--line-soft); background-color: transparent; color: var(--text-primary); } :root[data-theme="dark"] :is(.sub, .muted, .dtag, .table-muted, small, .empty-state, .empty-box, .auxiliary-copy) { color: var(--text-secondary); } :root[data-theme="dark"] :is(.dtag, .tag.neu, .screener-soft-label) { border-color: var(--border); background: var(--surface-muted); color: var(--text-secondary); } :root[data-theme="dark"] :is(.seg, .segmented, .filter-segment, .market-feature-segments) { border-color: var(--border); background: var(--surface-muted); } :root[data-theme="dark"] :is(.seg button.on, .seg button.active, .segment.active, .filter-segment button.active) { background: var(--surface-subtle); color: var(--text-primary); box-shadow: var(--control-shadow); } :root[data-theme="dark"] :is(table, .data-table, .tbl) { color: var(--text-primary); } :root[data-theme="dark"] :is(table thead th, .data-table thead th, .tbl thead th) { border-color: var(--border); background: var(--surface-muted); color: var(--text-secondary); } :root[data-theme="dark"] :is(table tbody td, .data-table tbody td, .tbl tbody td) { border-color: var(--line-soft); background-color: transparent; } :root[data-theme="dark"] :is(table tbody tr:hover td, .data-table tbody tr:hover td, .tbl tbody tr:hover td) { background: var(--action-soft); } :root[data-theme="dark"] :is(dialog, .stock-dialog, .settings-dialog, .global-search-dialog, .curated-detail-dialog, .strategy-drawer) { border-color: var(--border-strong); background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow); } :root[data-theme="dark"] dialog::backdrop { background: var(--dialog-backdrop); } :root[data-theme="dark"] dialog kbd { border-color: var(--border); background: var(--surface-subtle); color: var(--text-secondary); } :root[data-theme="dark"] .settings-dialog :is(.dialog-header h2, .settings-section-heading h3) { color: var(--text-primary); } :root[data-theme="dark"] .settings-dialog :is( .form-field > span, .settings-section-heading > span, .form-hint, .dialog-eyebrow ) { color: var(--text-secondary); } :root[data-theme="dark"] .settings-dialog .connection-status.connected { border-color: var(--market-down); background: var(--market-down-soft); color: var(--market-down); } :root[data-theme="dark"] .settings-dialog .dialog-header .icon-button { color: var(--text-secondary); } :root[data-theme="dark"] :is(.dialog-header, .global-search-head, .settings-section, .detail-section, .stock-chart-section) { border-color: var(--line-soft); background-color: var(--surface); } :root[data-theme="dark"] :is(.global-search-results, .assistant-messages, .trade-log-form, .alerts-toolbar, .admin-section-picker) { border-color: var(--line-soft); background: var(--surface-muted); } :root[data-theme="dark"] :is(.global-search-result:hover, .global-search-result.is-active) { background: var(--action-soft); color: var(--action); } :root[data-theme="dark"] :is(.global-search-result-icon, .membership-status-grid > div, .model-row) { border-color: var(--border); background: var(--surface-subtle); } /* Market cycle and pool pages. */ :root[data-theme="dark"] :is(.sentiment-cycle-toolbar, .sentiment-history-toolbar, .pool-toolbar, .tbl-tools) { border-color: var(--line-soft); background: var(--surface); } :root[data-theme="dark"] :is(.sentiment-current-card, .sentiment-score-card, .sentiment-stage-guide-grid article) { border-color: var(--border); background: var(--surface-subtle); } :root[data-theme="dark"] .sentiment-stage-guide-grid article.current { border-color: var(--warning-color); background: var(--warning-soft); } :root[data-theme="dark"] :is(.sentiment-warning, .screener-warning, .auction-phase-notice) { border-color: var(--warning-line-strong); background: var(--warning-soft); color: var(--warning-color); } :root[data-theme="dark"] :is(.res-sum, .res-sum .cell, .pool-summary-card, .performance-card) { border-color: var(--line-soft); background: var(--surface); } :root[data-theme="dark"] .res-sum .cell:hover, :root[data-theme="dark"] .res-sum .cell.on { background: var(--action-soft); } /* Ladder, rotation and auction retain distinct semantic levels without bright paper blocks. */ :root[data-theme="dark"] .market-ladder-tier:nth-child(1) { background: var(--ladder-level-1); } :root[data-theme="dark"] .market-ladder-tier:nth-child(2) { background: var(--ladder-level-2); } :root[data-theme="dark"] .market-ladder-tier:nth-child(3) { background: var(--ladder-level-3); } :root[data-theme="dark"] .market-ladder-tier:nth-child(4) { background: var(--ladder-level-4); } :root[data-theme="dark"] .market-ladder-tier:nth-child(5) { background: var(--ladder-level-5); } :root[data-theme="dark"] :is(.market-ladder-stock, .rotation-day, .rotation-table-frame, .auction-table-frame-v2) { border-color: var(--border); background: var(--surface-subtle); } :root[data-theme="dark"] .rotation-sector-chip.heat-strong { background: var(--heat-strong-bg); color: var(--heat-strong-ink); } :root[data-theme="dark"] .rotation-sector-chip.heat-warm { background: var(--heat-warm-bg); color: var(--heat-warm-ink); } :root[data-theme="dark"] .rotation-sector-chip.heat-mild { background: var(--heat-mild-bg); color: var(--heat-mild-ink); } :root[data-theme="dark"] :is(.auction-tabs-v2, .auction-summary-v2, .auction-theme-row, .auction-amount-day, .auction-news-entry) { border-color: var(--line-soft); background: var(--surface); } :root[data-theme="dark"] :is(.auction-dataset-button.active, .auction-expectation-controls button.active) { background: var(--surface-subtle); color: var(--action); } /* Theme library, popularity and dragon-tiger. */ :root[data-theme="dark"] :is(.theme-summary-v2, .theme-directory-labels-v2, .theme-detail-metrics-v2) { border-color: var(--line-soft); background: var(--surface-muted); } :root[data-theme="dark"] .theme-directory-item-v2:hover, :root[data-theme="dark"] .theme-directory-item-v2.active { background: var(--action-soft); } :root[data-theme="dark"] #popularityView .popularity-glance-v2 { background: var(--canvas); } :root[data-theme="dark"] #popularityView .popularity-glance-v2 article { border-color: var(--border); background: var(--surface); } :root[data-theme="dark"] .dragon-trader-card { border-color: color-mix(in srgb, var(--card-accent) 54%, var(--border)); background: linear-gradient(155deg, var(--surface-subtle), color-mix(in srgb, var(--card-accent) 13%, var(--surface))); color: var(--text-primary); } :root[data-theme="dark"] :is(.dragon-card-copy strong, .dragon-card-copy q, .dragon-card-stats small) { color: var(--text-secondary); } /* Screener, mentor and review workspaces. */ :root[data-theme="dark"] :is(.screener-tabs, .screener-progress, .screener-result-frame, .screener-pipeline, .screener-backtest-strip) { border-color: var(--line-soft); background: var(--surface); } :root[data-theme="dark"] :is(.curated-strategy-card:hover, .curated-strategy-card.selected, .quant-factor-row:hover) { border-color: var(--blue-line); background: var(--action-soft); } :root[data-theme="dark"] #screenerView .curated-detail-pane { background: var(--surface); color: var(--text-primary); } :root[data-theme="dark"] #screenerView :is(.curated-detail-header, .curated-execution-bar) { border-color: var(--line-soft); } :root[data-theme="dark"] #screenerView :is( .curated-detail-header h3, .mini-section-heading h4, .curated-rule-row strong, .curated-score-row strong, .curated-data-status strong ) { color: var(--text-primary); } :root[data-theme="dark"] #screenerView :is( .curated-detail-header > div > span, .curated-detail-header p, .mini-section-heading > span, .curated-rule-row span, .curated-score-row > span:first-child, .curated-data-status small ) { color: var(--text-secondary); } :root[data-theme="dark"] #screenerView .curated-rule-row { border-color: var(--line-soft); } :root[data-theme="dark"] #screenerView .curated-score-track { background: var(--surface-muted); } :root[data-theme="dark"] #screenerView .curated-strategy-badges span { background: var(--surface-muted); color: var(--text-secondary); } :root[data-theme="dark"] #screenerView .curated-strategy-badges span:first-child { background: var(--action-soft); color: var(--action); } :root[data-theme="dark"] :is(.strategy-drawer-sidebar, .strategy-sidebar, .strategy-drawer-content) { border-color: var(--line-soft); background: var(--surface-muted); } :root[data-theme="dark"] :is(.mentor-option, .mentor-message-content, .assistant-message-content, .review-watchlist-card, .daily-review-form) { border-color: var(--border); background: var(--surface-subtle); color: var(--text-primary); } :root[data-theme="dark"] .mentor-option:hover, :root[data-theme="dark"] .mentor-option.active { background: var(--action-soft); } :root[data-theme="dark"] :is(.mentor-composer, .assistant-form, .review-form, .trade-log-summary) { border-color: var(--line-soft); background: var(--surface); } /* Question-to-Heaven keeps its visual identity while following the selected luminance. */ :root[data-theme="dark"] #heavenView, :root[data-theme="dark"] #heavenView .heaven-panel, :root[data-theme="dark"] #heavenView .heart-stage, :root[data-theme="dark"] .heaven-reading-dialog { border-color: var(--heaven-rule); background-color: var(--heaven-paper); color: var(--heaven-ink); } :root[data-theme="dark"] #heavenView :is(.heaven-subnav, .heaven-card, .heaven-calibration-panel, .heart-ritual-card) { border-color: var(--heaven-rule); background-color: var(--heaven-paper-soft); color: var(--heaven-ink); } :root[data-theme="dark"] #heavenView :is(input, select, textarea, .heaven-field-control) { border-color: var(--heaven-rule); background: var(--heaven-field-bg); color: var(--heaven-ink); } :root[data-theme="dark"] :is(.price-chart, .stock-preview-chart, .entity-detail-chart) { border-color: var(--border); background: var(--chart-background); } /* Page-level controls that still carry prototype-local light fills. */ :root[data-theme="dark"] :is(#auctionView, #screenerView) { --action: #6ca8e8; --action-hover: #8bbcf0; --action-soft: #23364a; --border: #343a40; --border-strong: #474f57; --line: var(--border); --line-strong: var(--border-strong); --surface-muted: #202428; border-color: var(--border); background: var(--canvas); color: var(--text-primary); } :root[data-theme="dark"] #sentimentCycleView :is( .sentiment-current-tag, .sentiment-auto-tag, .sentiment-stage-guide-head, .sentiment-detail-toolbar, .section-toolbar ) { border-color: var(--border); background: var(--surface-muted); color: var(--text-secondary); } :root[data-theme="dark"] #sentimentCycleView .sentiment-component-track { background: var(--surface-subtle); } :root[data-theme="dark"] #sentimentCycleView .sentiment-phase-badge.phase-ice, :root[data-theme="dark"] #sentimentCycleView .sentiment-phase-badge.phase-repair { background: var(--action-soft); color: var(--action); } :root[data-theme="dark"] #sentimentCycleView .sentiment-phase-badge.phase-fermentation { background: var(--market-down-soft); color: var(--market-down); } :root[data-theme="dark"] #sentimentCycleView .sentiment-phase-badge.phase-climax { background: var(--market-up-soft); color: var(--market-up); } :root[data-theme="dark"] #sentimentCycleView .sentiment-phase-badge.phase-divergence { background: var(--warning-soft); color: var(--warning-color); } :root[data-theme="dark"] #sentimentCycleView .sentiment-phase-badge.phase-retreat { background: var(--surface-subtle); color: var(--text-secondary); } /* Keep the final history row clear of the frame's horizontal scrollbar. */ #sentimentCycleView .sentiment-history-frame { margin-bottom: var(--card-gap); padding-bottom: var(--card-gap); } :root[data-theme="dark"] :is( #brokenView .pool-search-field, #downView .pool-search-field, #yesterdayView .pool-search-field ) { border-color: var(--border); background: var(--surface); } :root[data-theme="dark"] :is( #brokenView .pool-search-field input, #downView .pool-search-field input, #yesterdayView .pool-search-field input ) { background: transparent; color: var(--text-primary); } :root[data-theme="dark"] #yesterdayView :is(.yesterday-table-card, .yesterday-summary-cell) { border-color: var(--border); background: var(--surface); color: var(--text-primary); } :root[data-theme="dark"] #yesterdayView .yesterday-summary-cell:hover, :root[data-theme="dark"] #yesterdayView .yesterday-summary-cell.active { background: var(--action-soft); } :root[data-theme="dark"] #yesterdayView .yesterday-outcome-tag.fail { border-color: var(--border); background: var(--surface-muted); color: var(--text-secondary); } :root[data-theme="dark"] #performanceView :is( .performance-status-tag.is-neutral, .performance-date-tag, .performance-stage-track, .performance-width-bar ) { border-color: var(--border); background: var(--surface-muted); color: var(--text-secondary); } :root[data-theme="dark"] #performanceView :is( .performance-empty-state, .performance-panel-card, .market-breadth-panel ) { border-color: var(--border); background: var(--surface); color: var(--text-primary); } :root[data-theme="dark"] #ladderView :is(.ladder-sort-segment, .market-ladder-board) { border-color: var(--border); background: var(--surface); color: var(--text-primary); } :root[data-theme="dark"] #ladderView .ladder-sort-segment { background: var(--surface-muted); } :root[data-theme="dark"] #ladderView .ladder-sort-segment button.active { background: var(--surface-subtle); color: var(--text-primary); box-shadow: var(--control-shadow); } :root[data-theme="dark"] #ladderView .market-ladder-label { border-color: var(--line-soft); background: color-mix(in srgb, var(--tier-color) 12%, var(--surface-subtle)); } :root[data-theme="dark"] #ladderView .market-ladder-tier.is-gap .market-ladder-label { background: var(--surface-muted); } :root[data-theme="dark"] #ladderView :is( .market-ladder-insight-card > header span, .market-ladder-pyramid-row > i, .market-ladder-rate-list > div > i ) { background: var(--surface-muted); color: var(--text-secondary); } :root[data-theme="dark"] #rotationView :is( .rotation-order-control, .rotation-export-button, .rotation-top-tag, .rotation-trajectory-card, .rotation-detail-card, .rotation-day, .rotation-day > header, .rotation-day-sectors ) { border-color: var(--border); background: var(--surface); color: var(--text-primary); } :root[data-theme="dark"] #rotationView :is(.rotation-order-control, .rotation-day > header, .rotation-top-tag) { background: var(--surface-muted); color: var(--text-secondary); } :root[data-theme="dark"] #rotationView .rotation-day-sectors { background: var(--surface-subtle); } :root[data-theme="dark"] #rotationView .rotation-order-control button.active { background: var(--surface-subtle); color: var(--text-primary); box-shadow: var(--control-shadow); } :root[data-theme="dark"] #rotationView .rotation-sector-chip.heat-strong { border-color: var(--blue-line); background: var(--heat-strong-bg); color: var(--heat-strong-ink); } :root[data-theme="dark"] #rotationView .rotation-sector-chip.heat-warm { border-color: var(--border-strong); background: var(--heat-warm-bg); color: var(--heat-warm-ink); } :root[data-theme="dark"] #rotationView .rotation-sector-chip.heat-mild { border-color: var(--border); background: var(--heat-mild-bg); color: var(--heat-mild-ink); } :root[data-theme="dark"] #rotationView :is( .rotation-rank, .rotation-table thead th, .trend-flat ) { border-color: var(--border); background: var(--surface-muted); color: var(--text-secondary); } :root[data-theme="dark"] #rotationView .rotation-table tbody tr:hover td { background: var(--action-soft); } :root[data-theme="dark"] #rotationView :is( .rotation-swatch.warm, .trend-tag.trend-cool ) { border-color: var(--blue-line); background: var(--action-soft); color: var(--action); } :root[data-theme="dark"] #rotationView :is( .rotation-swatch.mild, .strength-cell ) { border-color: var(--border); background: var(--surface-muted); } :root[data-theme="dark"] #auctionView :is( .auction-phase-notice-v2, .auction-export-button, .auction-refresh-button, .auction-filter-segments, .auction-table-v2 thead th ) { border-color: var(--border); background: var(--surface-muted); color: var(--text-secondary); } :root[data-theme="dark"] #auctionView .auction-phase-notice-v2[data-phase="selection"] { border-color: var(--warning-line); background: var(--warning-soft); } :root[data-theme="dark"] #auctionView .auction-phase-notice-v2[data-phase="finalized"] { border-color: var(--market-down-soft); background: var(--market-down-soft); } :root[data-theme="dark"] #auctionView :is(.auction-filter-segments button.active, .auction-source-tags-v2 b) { background: var(--surface-subtle); color: var(--text-primary); } :root[data-theme="dark"] #auctionView .auction-source-tags-v2 b:nth-child(n + 2) { background: var(--action-soft); color: var(--action); } :root[data-theme="dark"] #auctionView .auction-table-v2 tbody tr:hover td { background: var(--action-soft); } :root[data-theme="dark"] #auctionView :is(.auction-expectation.matched, .auction-card-tag) { background: var(--surface-subtle); color: var(--text-secondary); } :root[data-theme="dark"] #auctionView :is(.auction-theme-status.steady, .auction-theme-status.strong) { background: var(--action-soft); color: var(--action); } :root[data-theme="dark"] #auctionView .auction-amount-trend-v2 small { background: var(--surface); color: var(--text-secondary); } :root[data-theme="dark"] #themeLibraryView :is( .theme-search-v2, .theme-summary-v2, .theme-detail-empty-v2, #themeResultCount, #themeDetailCode ) { border-color: var(--border); background: var(--surface-muted); color: var(--text-secondary); } :root[data-theme="dark"] #popularityView .popularity-source-tabs-v2, :root[data-theme="dark"] #dragonView :is(.dragon-view-tabs-v2, .dragon-segments-v2) { border-color: var(--border); background: var(--surface-muted); } :root[data-theme="dark"] #popularityView .popularity-source-tabs-v2 button.active, :root[data-theme="dark"] #dragonView :is(.dragon-view-tabs-v2 button.active, .dragon-filter-v2.active) { background: var(--surface-subtle); color: var(--text-primary); box-shadow: var(--control-shadow); } :root[data-theme="dark"] #dragonView :is( .dragon-summary-v2, .dragon-filterbar-v2, .dragon-stage-heading-v2, .dragon-empty-state-v2, .dragon-table-v2 thead th ) { border-color: var(--border); background: var(--surface); color: var(--text-primary); } :root[data-theme="dark"] #dragonView .dragon-table-v2 thead th { background: var(--surface-muted); color: var(--text-secondary); } :root[data-theme="dark"] #dragonView thead th { border-color: var(--border); background: var(--surface-muted) !important; color: var(--text-secondary); } :root[data-theme="dark"] #screenerView :is( .screener-mode-tabs, .screener-stepper, .regime-selector, .regime-option, .screener-runbar, .screener-results-view, .result-toolbar ) { border-color: var(--border); background: var(--surface); color: var(--text-primary); } :root[data-theme="dark"] #screenerView :is(.screener-soft-label, .neutral) { background: var(--surface-muted); color: var(--text-secondary); } :root[data-theme="dark"] #screenerView :is(.regime-summary, .regime-option.active) { border-color: var(--market-up-soft); background: var(--market-up-soft); color: var(--market-up); } :root[data-theme="dark"] #screenerView :is(.regime-advice, .screener-backtest-strip) { border-color: var(--warning-line); background: var(--warning-soft); color: var(--warning-color); } :root[data-theme="dark"] #screenerView .screener-tracking-entry { border-color: var(--blue-line); background: var(--action-soft); color: var(--action); } :root[data-theme="dark"] #screenerView :is(.count-badge, .screener-result-source, b.neutral) { background: var(--surface-muted); color: var(--text-secondary); } :root[data-theme="dark"] #screenerView .screener-strategy-title b:not(.neutral) { background: var(--market-up-soft) !important; color: var(--market-up) !important; } :root[data-theme="dark"] #screenerView .screener-strategy-title b.neutral { background: var(--surface-muted) !important; color: var(--text-secondary) !important; } :root[data-theme="dark"] #screenerView .screener-card-heading h3 > span { color: var(--action); } :root[data-theme="dark"] #screenerView :is(.regime-evidence-line, .reason-column) { color: var(--text-secondary); } :root[data-theme="dark"] #screenerView .risk-cell { color: var(--warning-color); } :root[data-theme="dark"] #screenerView .table-action { color: var(--action); } :root[data-theme="dark"] #screenerView #regimeLabel { color: var(--market-up); } :root[data-theme="dark"] #screenerView :is(thead th, tbody td) { border-color: var(--line-soft); background-color: transparent !important; } :root[data-theme="dark"] #screenerView thead th { background-color: var(--surface-muted) !important; color: var(--text-secondary); } :root[data-theme="dark"] #screenerView :is( .curated-library-pane, .curated-library-heading, .curated-library-controls, .curated-search, .curated-category-select select, .curated-strategy-card, .curated-strategy-rank, .curated-card-tags em, .curated-card-actions button, .quant-builder-pane, .quant-summary-pane, .quant-panel-heading, .quant-rule-row, .quant-weight-control, .quant-weight-status, .quant-summary-block ) { border-color: var(--border); background: var(--surface); color: var(--text-primary); } :root[data-theme="dark"] #screenerView :is( .curated-strategy-card.active, .curated-card-tags em, .curated-strategy-rank, .quant-weight-status ) { background: var(--surface-muted); } :root[data-theme="dark"] #screenerView .curated-strategy-card:hover { border-color: var(--blue-line); background: var(--surface-subtle); } :root[data-theme="dark"] #screenerView .curated-strategy-card.active { border-color: var(--blue-line); background: var(--action-soft); } :root[data-theme="dark"] #screenerView :is(.curated-health-grid, .curated-execution-bar) { border-color: var(--line-soft); background: var(--surface-muted); } :root[data-theme="dark"] #screenerView .curated-health-grid > div { border-color: var(--line-soft); } :root[data-theme="dark"] #screenerView .curated-search input { background: transparent; color: var(--text-primary); } :root[data-theme="dark"] #screenerView :is( .quant-rule-row select, .quant-rule-row input, .quant-universe-grid input, .quant-universe-grid select ) { border-color: var(--border); background: var(--surface-subtle); color: var(--text-primary); } :root[data-theme="dark"] #screenerView :is( #curatedStrategyCount, .quant-panel-heading .button, .quant-summary-pane > header, .quant-summary-pane > header .button, .quant-weight-status > div ) { border-color: var(--border); background: var(--surface-muted); color: var(--text-secondary); } :root[data-theme="dark"] #mentorView { --mentor-blue: var(--action); --mentor-blue-dark: var(--action-hover); --mentor-blue-soft: var(--action-soft); --mentor-blue-line: var(--blue-line); --mentor-line: var(--border); --mentor-line-soft: var(--line-soft); --mentor-ink: var(--text-primary); --mentor-sub: var(--text-secondary); --mentor-faint: var(--text-tertiary); } :root[data-theme="dark"] #mentorView :is( .mentor-evidence-filters, .mentor-directory-content, .mentor-directory-heading, .mentor-search-field, .mentor-chat-panel, .mentor-composer, .mentor-option ) { border-color: var(--border); background: var(--surface); color: var(--text-primary); } :root[data-theme="dark"] #mentorView :is(.mentor-evidence-filters button.active, .mentor-option.active) { background: var(--action-soft); color: var(--action); } :root[data-theme="dark"] #mentorView :is(.mentor-badge.quality, .mentor-badge.private, .mentor-pin-button) { background: var(--surface-muted); color: var(--text-secondary); } :root[data-theme="dark"] #mentorView .mentor-badge.grade-a { background: var(--market-down-soft); color: var(--market-down); } :root[data-theme="dark"] #mentorView .mentor-badge.grade-b { background: var(--action-soft); color: var(--action); } :root[data-theme="dark"] #mentorView .mentor-badge.grade-c { background: var(--warning-soft); color: var(--warning-color); } :root[data-theme="dark"] #mentorView :is( .mentor-chat-header, .mentor-messages, .mentor-quick-prompts, .mentor-chat-form, .mentor-disclaimer, .mentor-quick-prompts button, #mentorQuestion ) { border-color: var(--border); background: var(--surface); color: var(--text-primary); } :root[data-theme="dark"] #mentorView :is(.mentor-messages, .mentor-empty-mark) { background: var(--surface-muted); } :root[data-theme="dark"] #mentorView .mentor-message { border-color: var(--line-soft); background: var(--surface-subtle); box-shadow: none; } :root[data-theme="dark"] #mentorView .mentor-message.user { border-color: var(--blue-line); background: var(--action-soft); } :root[data-theme="dark"] #mentorView :is( .mentor-message-content, .mentor-answer-heading, .loading-message p ) { color: var(--text-primary); } :root[data-theme="dark"] #mentorView .mentor-answer-quote { color: var(--text-secondary); } :root[data-theme="dark"] #mentorView :is(.mentor-message-label, .mentor-message small) { color: var(--text-tertiary); } :root[data-theme="dark"] #reviewWorkspaceView { --review-blue: var(--action); --review-blue-dark: var(--action-hover); --review-blue-soft: var(--action-soft); --review-blue-line: var(--blue-line); --review-line: var(--border); --review-line-soft: var(--line-soft); --review-ink: var(--text-primary); --review-sub: var(--text-secondary); --review-faint: var(--text-tertiary); } :root[data-theme="dark"] #reviewWorkspaceView :is( .review-history-toggle, .review-card-heading, .review-count-tag, .review-add-watch, .trade-log-summary, .workspace-table-frame thead th ) { border-color: var(--border); background: var(--surface-muted); color: var(--text-secondary); } :root[data-theme="dark"] #reviewWorkspaceView .review-add-watch { border-color: var(--blue-line); background: var(--action-soft); color: var(--action); } :root[data-theme="dark"] #reviewWorkspaceView :is(thead th, tbody td) { border-color: var(--line-soft); background-color: transparent !important; } :root[data-theme="dark"] #reviewWorkspaceView thead th { background-color: var(--surface-muted) !important; color: var(--text-secondary); } :root[data-theme="dark"] #reviewWorkspaceView :is( .journal-form, .journal-form input, .journal-form textarea, #journalDate ) { border-color: var(--border); background: var(--surface); color: var(--text-primary); } :root[data-theme="dark"] #reviewWorkspaceView :is(.notes-history-section, .notes-history) { border-color: var(--border); background: var(--surface); color: var(--text-primary); } :root[data-theme="dark"] :is( .watchlist-search-control, .watchlist-search-results, .watchlist-search-results button, .watchlist-selection ) { border-color: var(--border); background: var(--surface); color: var(--text-primary); } :root[data-theme="dark"] .watchlist-search-control:focus-within { border-color: var(--blue-line); box-shadow: var(--control-shadow); } :root[data-theme="dark"] .watchlist-search-results button:hover { background: var(--action-soft); } :root[data-theme="dark"] .account-settings-dialog :is( .membership-comparison, .membership-comparison > div, .membership-comparison-head ) { border-color: var(--border); background: var(--surface); color: var(--text-primary); } :root[data-theme="dark"] .account-settings-dialog .membership-comparison > .membership-comparison-head { background: var(--surface-muted); color: var(--text-secondary); } /* High-specificity dark surfaces for workspaces with later light-theme hover rules. */ :root[data-theme="dark"] #screenerView .curated-library-heading h3 { color: var(--text-primary); } :root[data-theme="dark"] #screenerView :is(.curated-view-toggle, .curated-school-filters) { border-color: var(--border); background: var(--surface); color: var(--text-primary); } :root[data-theme="dark"] #screenerView :is(.curated-view-toggle button, .curated-school-filters button) { color: var(--text-secondary); } :root[data-theme="dark"] #screenerView :is(.curated-view-toggle button, .curated-school-filters button):is(:hover, .active) { border-color: var(--blue-line); background: var(--action-soft); color: var(--action); } :root[data-theme="dark"] #screenerView .curated-strategy-list.is-grid .curated-strategy-icon { background: var(--action-soft); color: var(--action); } :root[data-theme="dark"] #screenerView .screener-result-frame tbody tr:hover td, :root[data-theme="dark"] #screenerView .screener-result-frame tbody tr:hover td:last-child, :root[data-theme="dark"] #reviewWorkspaceView .data-table tbody tr:hover, :root[data-theme="dark"] #reviewWorkspaceView .data-table tbody tr:hover td { background: var(--action-soft) !important; color: var(--text-primary); } :root[data-theme="dark"] #reviewWorkspaceView .data-table tbody td { color: var(--text-primary); } /* Wentian v2 owns its complete palette in wentian-v2.css. Keeping the former paper-theme overrides here would repaint its controls and ritual stages. */ :root[data-theme="dark"] :is(.loading-overlay, .auth-gate) { background: color-mix(in srgb, var(--canvas) 92%, transparent); } :root[data-theme="dark"] :is(.loading-card, .auth-shell) { border-color: var(--border-strong); background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow); } @media (prefers-reduced-motion: reduce) { .theme-toggle svg { transition: none; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }