/*
 * M4-B-R2-C — Main 主力动向 Light 专项（Desktop / Mobile / Embed）
 * Scope: html[data-theme="light"] only · series / 业务色冻结 · 不改 Dark
 */
html[data-theme="light"] .mainFlowCard,
html[data-theme="light"] body.watch-chart-embed .card,
html[data-theme="light"] body.v4-mobile .mainFlowCard {
  background: var(--color-bg-panel);
  border-color: var(--color-border-card);
  box-shadow: var(--shadow-panel);
}

/* 主图：浅蓝灰画布，与白 Panel 分层 */
html[data-theme="light"] #chart {
  background: var(--chart-bg, #eef3f8);
  border: 1px solid var(--color-border-card);
}
/* 下方趋势/结构外层：白 Panel，避免与主图画布融成一片 */
html[data-theme="light"] .v4MarketTrend,
html[data-theme="light"] .v4StructureChartCard {
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border-card);
  box-shadow: var(--shadow-panel);
}

html[data-theme="light"] .v4ModuleTitle,
html[data-theme="light"] .v4ModuleTitle--hot,
html[data-theme="light"] .v4ChartLabel {
  color: var(--color-text-primary);
}

html[data-theme="light"] .hint,
html[data-theme="light"] .mainFlowCard .hint,
html[data-theme="light"] .v4TabHint,
html[data-theme="light"] .sectorLocalSaveHint,
html[data-theme="light"] .localSaveStatus,
html[data-theme="light"] .sidePanelSub {
  color: var(--color-text-muted);
  opacity: 1;
}

/* 右榜层级 */
html[data-theme="light"] .sidePanel {
  background: var(--color-bg-side-panel);
  border-color: var(--color-border-card);
  box-shadow: var(--shadow-panel);
}
html[data-theme="light"] .sidePanelHead {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-border-subtle);
  background: linear-gradient(180deg, var(--color-bg-elevated-soft), var(--color-bg-panel-2));
}
html[data-theme="light"] .sideName {
  color: var(--color-text-primary);
  font-weight: 700;
}
html[data-theme="light"] .sideVal {
  color: var(--color-text-body);
  font-weight: 750;
}
html[data-theme="light"] .sideRow:hover {
  background: rgba(37, 99, 235, 0.05);
}
html[data-theme="light"] .sideRow.isHighlighted {
  background: rgba(37, 99, 235, 0.1);
  box-shadow: inset 3px 0 0 #2563eb;
}

/* V4 Tab：Selected 一眼可见 */
html[data-theme="light"] .v4TabBtn {
  background: var(--color-bg-control);
  border-color: var(--color-border-control);
  color: var(--color-text-secondary);
  font-weight: 700;
}
html[data-theme="light"] .v4TabBtn:hover {
  background: rgba(37, 99, 235, 0.1);
  color: var(--color-text-primary);
  border-color: var(--color-border-selected);
}
html[data-theme="light"] .v4TabBtn.is-active,
html[data-theme="light"] .v4TabBtn.active {
  background: rgba(37, 99, 235, 0.2);
  border-color: #2563eb;
  color: #1e3a8a;
  font-weight: 800;
  box-shadow: inset 0 -2px 0 #2563eb;
}

/* 下方结构 / 四档 / 趋势模块 */
html[data-theme="light"] .v4MarketTrendRank,
html[data-theme="light"] .v4SectorRankBoard,
html[data-theme="light"] .v4TrackCard,
html[data-theme="light"] .v4StructureChartCard {
  background: var(--color-bg-panel);
  border-color: var(--color-border-card);
  color: var(--color-text-body);
}
html[data-theme="light"] .v4TrackRank {
  background: var(--color-bg-control);
  border-color: var(--color-border-control);
  color: var(--color-text-secondary);
}
html[data-theme="light"] .v4TrackRank.is-active,
html[data-theme="light"] .v4TrackRank.active {
  background: rgba(37, 99, 235, 0.16);
  border-color: rgba(37, 99, 235, 0.5);
  color: #1e3a8a;
  font-weight: 800;
}

/* 资金画像 / 板块轨迹：板块名称 Light 高对比（勿用 muted/soft 灰） */
html[data-theme="light"] .v4SectorRankRow .nm,
html[data-theme="light"] .v4TrackCardName,
html[data-theme="light"] body.has-desktop-shell .v4SectorRankRow .nm,
html[data-theme="light"] body.has-desktop-shell .v4TrackCardName,
html[data-theme="light"] body.v4-mobile .v4SectorRankRow .nm,
html[data-theme="light"] body.watch-mobile-embed.v4-mobile .v4SectorRankRow .nm,
html[data-theme="light"] body.v4-mobile .v4TrackCardName,
html[data-theme="light"] body.watch-mobile-embed.v4-mobile .v4TrackCardName,
html[data-theme="light"] body.watch-chart-embed .v4SectorRankRow .nm,
html[data-theme="light"] body.watch-chart-embed .v4TrackCardName,
html[data-theme="light"] .mainFlowCard .v4SectorRankRow .nm,
html[data-theme="light"] .mainFlowCard .v4TrackCardName {
  color: var(--color-text-primary) !important;
  opacity: 1 !important;
  font-weight: 800;
}

/* Replay / 时间戳 */
html[data-theme="light"] .unifiedReplayAction {
  opacity: 1;
  background: var(--color-bg-control);
  border-color: var(--color-border-control);
  color: var(--color-text-primary);
}
html[data-theme="light"] .unifiedReplayAction:disabled {
  opacity: 1;
  color: var(--color-text-disabled);
  background: #e8eef4;
}
html[data-theme="light"] .unifiedReplayCustomLabel,
html[data-theme="light"] .playbackStatusMain,
html[data-theme="light"] .toolbarTinyStatus {
  color: var(--color-text-secondary);
  opacity: 1;
}

/* Mobile chrome */
html[data-theme="light"] body.v4-mobile,
html[data-theme="light"] body.watch-mobile-embed {
  color: var(--color-text-body);
}
html[data-theme="light"] body.v4-mobile .mobile-watch-shell,
html[data-theme="light"] .mobile-watch-shell {
  background: var(--color-bg-mobile-chrome, var(--color-bg-page));
}
html[data-theme="light"] body.v4-mobile .v4HotRankToggle,
html[data-theme="light"] body.watch-mobile-embed .v4HotRankToggle {
  background: var(--color-bg-control);
  border-color: var(--color-border-control);
  color: var(--color-text-primary);
}

/* Picker / dropdown panels in Main */
html[data-theme="light"] .sectorPicker,
html[data-theme="light"] .sectorPickerBlock,
html[data-theme="light"] .pickerPanel,
html[data-theme="light"] .desktopSectorPickerBlock {
  background: var(--color-bg-picker);
  border-color: var(--color-border-card);
  color: var(--color-text-primary);
}

/* Toolbar / actions — ensure Main 顶栏不依赖 Dark 默认 */
html[data-theme="light"] .toolbarBtn,
html[data-theme="light"] .toolbarGrid .chartActionBtn,
html[data-theme="light"] .chartActionBtn {
  background: var(--color-bg-control);
  border: 1px solid var(--color-border-control);
  color: var(--color-text-primary);
  opacity: 1;
}
html[data-theme="light"] .toolbarBtn:hover:not(:disabled),
html[data-theme="light"] .chartActionBtn:hover:not(:disabled) {
  background: rgba(37, 99, 235, 0.12);
  border-color: var(--color-border-selected);
  color: var(--color-text-primary);
}
html[data-theme="light"] .toolbarBtn.is-active,
html[data-theme="light"] .chartActionBtn.active {
  background: rgba(37, 99, 235, 0.2);
  border-color: #2563eb;
  color: #1e3a8a;
  font-weight: 800;
}
html[data-theme="light"] .toolbarBtn:disabled,
html[data-theme="light"] .chartActionBtn:disabled {
  opacity: 1;
  color: var(--color-text-disabled);
  background: #e8eef4;
  border-color: var(--color-border-subtle);
}

/* 时间戳 / 快照脚注 */
html[data-theme="light"] .snapshotMeta,
html[data-theme="light"] .pageRefreshMeta,
html[data-theme="light"] .chartFooterMeta,
html[data-theme="light"] .sidePanelFoot,
html[data-theme="light"] .watchMetaLine {
  color: var(--color-text-secondary);
  opacity: 1;
}

/* Embed / Mobile：展开榜单按钮 */
html[data-theme="light"] .v4HotRankToggle,
html[data-theme="light"] .sidePanelToggle,
html[data-theme="light"] .rankDrawerToggle {
  background: var(--color-bg-control);
  border-color: var(--color-border-control);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-floating);
}

/* 返回实时：保留业务绿语义，加深文字 */
html[data-theme="light"] .backToLiveBtn,
html[data-theme="light"] button.backToLive,
html[data-theme="light"] .liveReturnBtn,
html[data-theme="light"] #btnReturnLive,
html[data-theme="light"] #btnPlaybackReturnLive {
  color: #0f766e;
  border-color: rgba(13, 148, 136, 0.45);
  background: rgba(13, 148, 136, 0.14);
  opacity: 1;
  font-weight: 800;
}

/* Picker 无缓存选项：Light 下勿用过低 opacity */
html[data-theme="light"] .sectorOptionNoCache {
  opacity: 1;
  color: var(--color-text-secondary);
}
html[data-theme="light"] .sectorOptionNoCacheMark {
  color: var(--color-text-muted);
  opacity: 1;
}

/* 右榜金额列 / 单位脚注 */
html[data-theme="light"] .sideUnit,
html[data-theme="light"] .sidePanel .unit,
html[data-theme="light"] .sideMeta {
  color: var(--color-text-muted);
  opacity: 1;
}

/* 主图画布与下方模块标题分隔更清晰 */
html[data-theme="light"] #chart + .v4MarketTrend,
html[data-theme="light"] .mainChartWrap + .v4LowerModule {
  margin-top: 8px;
}

/* 下方模块标题 / 四档脚注 */
html[data-theme="light"] .v4LowerModule,
html[data-theme="light"] .v4MarketStructure,
html[data-theme="light"] .marketStructureBar {
  background: var(--color-bg-panel);
  border-top: 1px solid var(--color-border-card);
  color: var(--color-text-primary);
}
html[data-theme="light"] .v4LowerModule .title,
html[data-theme="light"] .marketStructureTitle {
  color: var(--color-text-primary);
  font-weight: 800;
}