/*
 * M4-B-R2-E — ETF Desktop / Mobile / Embed Light 专项
 * Scope: html[data-theme="light"] · ETF body/html classes only
 * 冻结：ETF Series identity · 涨跌 · Mobile 粉/白/绿图纸人格 · Change .up/.down
 * 不改 Dark · 不改 Adapter · 不改 Global 正文字 token
 *
 * !important：仅 1 处，用于压过 R2-C 全局 #chart 浅蓝灰，恢复 Mobile 图纸人格。
 */

/* ========== Desktop / embed/flow (body.etf-flow-embed) ========== */
html[data-theme="light"] body.etf-flow-embed .mainFlowCard {
  background: var(--color-bg-panel);
  border-color: var(--color-border-card);
  box-shadow: var(--shadow-panel);
}

/* 主图：浅蓝灰金融终端画布（禁止纯白） */
html[data-theme="light"] body.etf-flow-embed .mainFlowCard #chart,
html[data-theme="light"] body.etf-flow-embed #chart {
  background: var(--chart-bg, #eef3f8);
  border: 1px solid var(--color-border-card);
  box-shadow: var(--shadow-panel);
}

html[data-theme="light"] body.etf-flow-embed .sidePanel {
  background: var(--color-bg-side-panel, var(--color-bg-panel));
  border-color: var(--color-border-card);
  box-shadow: var(--shadow-panel);
}
html[data-theme="light"] body.etf-flow-embed .sidePanelHead,
html[data-theme="light"] body.etf-flow-embed .sidePanelHead #sidePanelTitle {
  color: var(--color-text-primary);
  background: linear-gradient(180deg, var(--color-bg-elevated-soft), var(--color-bg-panel-2));
  border-bottom-color: var(--color-border-subtle);
}
html[data-theme="light"] body.etf-flow-embed .sideName {
  color: var(--color-text-primary);
  font-weight: 700;
  opacity: 1;
}
html[data-theme="light"] body.etf-flow-embed .sideCode,
html[data-theme="light"] body.etf-flow-embed .sideIdentity .code {
  color: var(--color-text-secondary);
  opacity: 1;
}
html[data-theme="light"] body.etf-flow-embed .sideVal {
  color: var(--color-text-body);
  font-weight: 750;
  opacity: 1;
}
html[data-theme="light"] body.etf-flow-embed .sidePanelSub,
html[data-theme="light"] body.etf-flow-embed .sideMeta,
html[data-theme="light"] body.etf-flow-embed .hint,
html[data-theme="light"] body.etf-flow-embed .sub,
html[data-theme="light"] body.etf-flow-embed .status,
html[data-theme="light"] body.etf-flow-embed .toolbarTinyStatus,
html[data-theme="light"] body.etf-flow-embed .toolbarTinyStatus .playbackStatusMain,
html[data-theme="light"] body.etf-flow-embed .sectorPickerCount,
html[data-theme="light"] body.etf-flow-embed .emptyState,
html[data-theme="light"] body.etf-flow-embed .sideEmpty,
html[data-theme="light"] body.etf-flow-embed .localSaveStatus {
  color: var(--color-text-muted);
  opacity: 1;
}
/* 页面 Dark 规则带 !important；Light 必须同级压过 */
html[data-theme="light"] body.etf-flow-embed .hint {
  color: var(--color-text-muted) !important;
}
html[data-theme="light"] body.etf-flow-embed .hint a,
html[data-theme="light"] body.etf-flow-embed .hint code {
  color: var(--color-text-link);
}
html[data-theme="light"] body.etf-flow-embed .sectorLocalSaveHint {
  color: var(--color-text-secondary) !important;
  opacity: 1;
}
/* 暂无曲线：Secondary 可读，禁止 opacity 冲淡 */
html[data-theme="light"] body.etf-flow-embed .sideRow--weak {
  opacity: 1;
}
html[data-theme="light"] body.etf-flow-embed .sideRow--weak .sideName {
  color: var(--color-text-secondary);
  opacity: 1;
}
html[data-theme="light"] body.etf-flow-embed .sideRow:hover {
  background: rgba(37, 99, 235, 0.05);
}
html[data-theme="light"] body.etf-flow-embed .sideRow.isHighlighted,
html[data-theme="light"] body.etf-flow-embed .sideRow.focused {
  background: rgba(37, 99, 235, 0.1);
  box-shadow: inset 3px 0 0 #2563eb;
}

/* Toolbar / Tab / Chip */
html[data-theme="light"] body.etf-flow-embed .toolbarBtn,
html[data-theme="light"] body.etf-flow-embed .chip,
html[data-theme="light"] body.etf-flow-embed .segBtn,
html[data-theme="light"] body.etf-flow-embed .toolbar button,
html[data-theme="light"] body.etf-flow-embed .chartActionBtn,
html[data-theme="light"] body.etf-flow-embed .toolbarGrid button {
  color: var(--color-text-primary);
  background: var(--color-bg-control);
  border-color: var(--color-border-control);
}
html[data-theme="light"] body.etf-flow-embed .toolbarBtn:hover:not(:disabled),
html[data-theme="light"] body.etf-flow-embed .chip:hover,
html[data-theme="light"] body.etf-flow-embed .segBtn:hover,
html[data-theme="light"] body.etf-flow-embed .chartActionBtn:hover,
html[data-theme="light"] body.etf-flow-embed .toolbarGrid button:hover:not(:disabled) {
  background: rgba(37, 99, 235, 0.1);
  border-color: var(--color-border-selected);
  color: var(--color-text-primary);
}
html[data-theme="light"] body.etf-flow-embed .toolbarBtnActive,
html[data-theme="light"] body.etf-flow-embed .chip.active,
html[data-theme="light"] body.etf-flow-embed .segBtn.active,
html[data-theme="light"] body.etf-flow-embed .chartActionBtn.active,
html[data-theme="light"] body.etf-flow-embed .toolbarBtn.active {
  color: #1e3a8a;
  background: rgba(37, 99, 235, 0.16);
  border-color: #2563eb;
  font-weight: 800;
}
html[data-theme="light"] body.etf-flow-embed .toolbarBtn:disabled,
html[data-theme="light"] body.etf-flow-embed .toolbar button:disabled,
html[data-theme="light"] body.etf-flow-embed .toolbarGrid button:disabled {
  opacity: 1;
  color: var(--color-text-disabled);
  background: var(--color-bg-elevated-soft);
  border-color: var(--color-border-subtle);
  filter: none;
}

html[data-theme="light"] body.etf-flow-embed .sectorPickerBlock {
  background: var(--color-bg-elevated-soft);
  border-color: var(--color-border-subtle);
}
html[data-theme="light"] body.etf-flow-embed .unifiedReplayPanelCard {
  background: var(--color-bg-modal, var(--color-bg-panel));
  border-color: var(--color-border-strong);
  color: var(--color-text-body);
}
html[data-theme="light"] body.etf-flow-embed .unifiedReplayPanelHead {
  color: var(--color-text-primary);
}
html[data-theme="light"] body.etf-flow-embed .chartHead strong {
  color: var(--color-text-primary);
}
html[data-theme="light"] body.etf-flow-embed .chartHead span {
  color: var(--color-text-muted);
  opacity: 1;
}

/* ========== Shell tabs (/etf-tracker · /etf-tracker/mobile) ========== */
html[data-theme="light"] .etf-main-tabs button,
html[data-theme="light"] .tabs button {
  color: var(--color-text-secondary);
  background: var(--color-bg-control);
  border-color: var(--color-border-control);
  opacity: 1;
}
html[data-theme="light"] .etf-main-tabs button:hover,
html[data-theme="light"] .tabs button:hover {
  background: rgba(37, 99, 235, 0.1);
  color: var(--color-text-primary);
}
html[data-theme="light"] .etf-main-tabs button.active,
html[data-theme="light"] .tabs button.active {
  color: #1e3a8a;
  background: rgba(37, 99, 235, 0.16);
  border-color: #2563eb;
  font-weight: 800;
}
html[data-theme="light"] .etfShellHead,
html[data-theme="light"] .etfShellBack,
html[data-theme="light"] .etf-shell-title,
html[data-theme="light"] .etfMobileHead {
  color: var(--color-text-primary);
}
html[data-theme="light"] .etf-shell-sub,
html[data-theme="light"] .etfShellSub {
  color: var(--color-text-muted);
  opacity: 1;
}

/* ========== Mobile embed (html.etf-flow-embed-mobile) ========== */
/* 恢复粉/白/绿图纸人格 — 必须压过 R2-C 全局 #chart #eef3f8 */
html.etf-flow-embed-mobile[data-theme="light"] #chart {
  background:
    linear-gradient(
      180deg,
      #ffe2e2 0%,
      #fff0f0 32%,
      #ffffff 49%,
      #ffffff 52%,
      #effff4 68%,
      #ddfae8 100%
    ) !important; /* sole !important: beat R2-C #chart; protect Mobile paper identity */
  border: 1px solid var(--color-border-subtle, #e1e7f0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

html.etf-flow-embed-mobile[data-theme="light"] .sidePanel {
  background: var(--color-bg-panel);
  border-color: var(--color-border-card);
}
html.etf-flow-embed-mobile[data-theme="light"] .sidePanelHead {
  color: var(--color-text-primary);
  background: linear-gradient(180deg, var(--color-bg-elevated-soft), var(--color-bg-panel-2));
}
html.etf-flow-embed-mobile[data-theme="light"] .sideName {
  color: var(--color-text-primary);
  font-weight: 750;
  opacity: 1;
}
html.etf-flow-embed-mobile[data-theme="light"] .sideCode {
  color: var(--color-text-secondary);
  opacity: 1;
}
html.etf-flow-embed-mobile[data-theme="light"] .sideVal {
  color: var(--color-text-body);
  opacity: 1;
}
html.etf-flow-embed-mobile[data-theme="light"] .sideRow--weak {
  opacity: 1;
}
html.etf-flow-embed-mobile[data-theme="light"] .sideRow--weak .sideName {
  color: var(--color-text-secondary);
  opacity: 1;
}
html.etf-flow-embed-mobile[data-theme="light"] .sidePanelSub,
html.etf-flow-embed-mobile[data-theme="light"] .status,
html.etf-flow-embed-mobile[data-theme="light"] .hint,
html.etf-flow-embed-mobile[data-theme="light"] .sectorPickerCount {
  color: var(--color-text-muted);
  opacity: 1;
}
/* 去掉硬编码灰冲淡；Light 用 token */
html.etf-flow-embed-mobile[data-theme="light"] .sectorLocalSaveHint {
  color: var(--color-text-secondary) !important; /* page CSS uses !important gray */
  opacity: 1;
}
html.etf-flow-embed-mobile[data-theme="light"] .sideVal.zero {
  color: var(--color-text-muted);
  opacity: 1;
}

html.etf-flow-embed-mobile[data-theme="light"] .toolbarBtn,
html.etf-flow-embed-mobile[data-theme="light"] .chip,
html.etf-flow-embed-mobile[data-theme="light"] .toolbar button,
html.etf-flow-embed-mobile[data-theme="light"] .chartActionBtn {
  color: var(--color-text-primary);
  background: var(--color-bg-control);
  border-color: var(--color-border-control);
  opacity: 1;
}
html.etf-flow-embed-mobile[data-theme="light"] .toolbarBtn:hover:not(:disabled),
html.etf-flow-embed-mobile[data-theme="light"] .chip:hover,
html.etf-flow-embed-mobile[data-theme="light"] .chartActionBtn:hover {
  background: rgba(37, 99, 235, 0.1);
  border-color: var(--color-border-selected);
}
html.etf-flow-embed-mobile[data-theme="light"] .toolbarBtnActive,
html.etf-flow-embed-mobile[data-theme="light"] .chip.active,
html.etf-flow-embed-mobile[data-theme="light"] .chartActionBtn.active {
  color: #1e3a8a;
  background: rgba(37, 99, 235, 0.16);
  border-color: #2563eb;
  font-weight: 800;
}
html.etf-flow-embed-mobile[data-theme="light"] .toolbarBtn:disabled {
  opacity: 1;
  color: var(--color-text-disabled);
  background: var(--color-bg-elevated-soft);
}

/* ========== Change embed：仅结构可读性；涨跌 .up/.down 故意不覆盖 ========== */
html[data-theme="light"] body.etf-embed .empty,
html[data-theme="light"] body.etf-embed .tip,
html[data-theme="light"] body.etf-embed .loading,
html[data-theme="light"] body.etf-embed .desc,
html[data-theme="light"] body.etf-embed .meta,
html[data-theme="light"] body.etf-embed .stat-label {
  color: var(--color-text-muted);
  opacity: 1;
}
html[data-theme="light"] body.etf-embed .name {
  color: var(--color-text-primary);
}