/* 主题选择弹窗：屏幕居中的卡片 + 半透明变暗遮罩。
   刻意不使用 backdrop-filter —— 本机 GPU 不可用（纯软件渲染，见 electron/main.cjs 的
   CQUANT_DISABLE_GPU 说明），全屏高斯模糊由 CPU 逐像素计算，是此前卡顿的根源。
   当前结构分三层，各司其职：
   1. .theme-modal        全屏定位容器，只负责可见性与遮罩层级的建立，不做视觉动画
                          （仅 .is-closing 保留一个两端 opacity 均为 1 的信号动画，供 JS 判定关闭完成）。
   2. .theme-modal-backdrop  铺满的变暗遮罩，同时是“点击空白处关闭”的判定目标。
   3. .theme-modal-panel     居中卡片，瞬时出现，不做任何 opacity/transform 动画
                             —— 软件渲染下对整屏卡片做透明度动画会出现白帧。 */
.theme-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  isolation: isolate;
  contain: layout paint;
  backface-visibility: hidden;
}

/* 关闭态刻意不用 display: none：那会把元素移出渲染树，重新打开时整层都要重建。
   visibility 保留渲染对象，开关更轻。 */
.theme-modal.open { visibility: visible; pointer-events: auto; opacity: 1; }
/* 关闭完成信号：JS 依赖父层的 theme-modal-out animationend，两端均为 opacity 1，
   不产生视觉变化，无逐帧重算代价。 */
.theme-modal.is-closing { visibility: visible; pointer-events: auto; opacity: 1; animation: theme-modal-out .24s ease forwards; }
/* 屏幕居中的弹窗卡片：绝对定位 + inset: 0 + margin: auto 实现双向居中（不必让父层做 flex），
   高度不超过视口、内部纵向滚动。背景必须不透明——卡片之外页面内容仍隐约可见，
   半透明会透出底层文字。
   这里刻意不给卡片做 opacity/transform 入场动画，也不写 will-change：本机全程软件渲染
   （GPU 被整体禁用），而 opacity 动画会让父层子树逐帧重新光栅化；卡片是整屏尺寸、
   带 --shadow-dialog 大阴影，动画期间会出现一整块白色。卡片改为瞬时出现。 */
.theme-modal-panel { position: absolute; inset: 0; z-index: 1; display: flex; width: min(560px, calc(100vw - 48px)); height: fit-content; max-height: calc(100vh - 64px); margin: auto; overflow: auto; flex-direction: column; padding: 26px 30px 30px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-dialog); backface-visibility: hidden; }
.theme-modal-title { margin: 0 34px 20px 0; color: var(--orange); font-size: 17px; font-weight: 500; letter-spacing: .2px; }
.theme-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.theme-option { min-width: 0; min-height: 0; padding: 10px; border: 1px solid var(--line-soft); border-radius: 10px; color: var(--ink); background: var(--surface-subtle); text-align: left; font: inherit; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.theme-option:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-soft); }
.theme-option.is-selected { border: 2px solid var(--orange); }
.theme-option.pending { cursor: default; opacity: .48; }
.theme-option.pending:hover { transform: none; box-shadow: none; border-color: var(--line-soft); }
/* 色块承载该主题的侧边栏渐变（theme-menu.js 以 background-image 内联给出）。
   未定主题没有配色，用 surface-muted 兜底，避免空 background-image 完全不可见。 */
.theme-swatch { display: block; height: auto; aspect-ratio: 1.8 / 1; margin-bottom: 9px; border: 1px solid var(--line-soft); border-radius: 6px; background-color: var(--surface-muted); background-position: center; background-size: cover; background-repeat: no-repeat; }
.theme-name { font-size: 13px; }
.theme-modal-close { position: absolute; top: 12px; right: 13px; display: grid; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 50%; color: var(--muted); background: transparent; font-size: 21px; line-height: 1; cursor: pointer; }
.theme-modal-close:hover { color: var(--ink); background: var(--surface-muted); }

/* 遮罩保持可点击：关闭判定依赖“点在遮罩上”，因此这里不能设 pointer-events: none。 */
.theme-modal-backdrop { position: absolute; inset: 0; z-index: 0; background: var(--modal-backdrop); }
/* 打开阶段刻意不给 backdrop 加动画：它一变 opacity 就要重新合成整层遮罩，
   而可见的淡入由卡片自身承担已足够。关闭阶段才做一次淡出。 */

/* 卡片背景已由基础规则设为不透明的 var(--panel)，暗色主题会通过该变量自动变深，
   因此这里不再覆盖 background——透明会让半透明遮罩透上来，把卡片染成灰色。 */
:root[data-theme-choice="dark"] .theme-modal-title,
:root[data-theme-choice="dark"] .theme-option { color: var(--ink); }
:root[data-theme-choice="dark"] .theme-option.is-selected { border-color: var(--orange); }
:root[data-theme-choice="dark"] .theme-option .theme-swatch { border-color: var(--line); }

:root[data-theme-choice="dark"] .sidebar { background: linear-gradient(170deg, var(--navy-2), var(--navy)); }
:root[data-theme-choice="dark"] .main-content-safe-bar { background: var(--canvas); }
:root[data-theme-choice="dark"] .main-content-safe-bar::after { background: var(--line); }
:root[data-theme-choice="dark"] .main-content-safe-bar .mode-pill { border-color: var(--line); color: var(--muted); background: var(--panel); }
:root[data-theme-choice="dark"] .panel,
:root[data-theme-choice="dark"] .stat-card,
:root[data-theme-choice="dark"] .holding-card,
:root[data-theme-choice="dark"] .rule-box,
:root[data-theme-choice="dark"] .research-detail,
:root[data-theme-choice="dark"] .minute-account-strip div,
:root[data-theme-choice="dark"] .tick-quote-strip div,
:root[data-theme-choice="dark"] .minute-package-detail,
:root[data-theme-choice="dark"] .data-package-operation-status { border-color: var(--line); background: var(--panel); }
:root[data-theme-choice="dark"] .primary-stat { border-color: var(--line); background: linear-gradient(140deg, var(--panel-strong), var(--panel)); }
:root[data-theme-choice="dark"] .panel-badge,
:root[data-theme-choice="dark"] .soft-tag { color: var(--muted); background: var(--accent-soft); }
:root[data-theme-choice="dark"] .market-status,
:root[data-theme-choice="dark"] .ghost-button,
:root[data-theme-choice="dark"] .secondary-button,
:root[data-theme-choice="dark"] input,
:root[data-theme-choice="dark"] select,
:root[data-theme-choice="dark"] textarea { border-color: var(--line); color: var(--ink); background: var(--panel-strong); }
:root[data-theme-choice="dark"] .ghost-button:hover,
:root[data-theme-choice="dark"] .secondary-button:hover { border-color: var(--accent); background: var(--accent-soft); }
:root[data-theme-choice="dark"] .primary-button { color: var(--canvas); background: linear-gradient(110deg, var(--accent), var(--orange)); }
:root[data-theme-choice="dark"] .allocation-bar,
:root[data-theme-choice="dark"] .meter-track { background: var(--line); }
:root[data-theme-choice="dark"] td,
:root[data-theme-choice="dark"] .log-item { border-top-color: var(--line); }
:root[data-theme-choice="dark"] td,
:root[data-theme-choice="dark"] .log-item p,
:root[data-theme-choice="dark"] .form-stack label { color: var(--muted); }
:root[data-theme-choice="dark"] tbody tr:hover { background: var(--panel-strong); }
:root[data-theme-choice="dark"] .segmented-control { border-color: var(--line); background: var(--canvas); }
:root[data-theme-choice="dark"] .segmented-control button.is-active { color: var(--ink); background: var(--line); }
:root[data-theme-choice="dark"] .drop-zone,
:root[data-theme-choice="dark"] .market-search-candidates,
:root[data-theme-choice="dark"] .market-search-candidate,
:root[data-theme-choice="dark"] .data-package-drop-zone,
:root[data-theme-choice="dark"] .data-package-row,
:root[data-theme-choice="dark"] .strategy-lifecycle span,
:root[data-theme-choice="dark"] .strategy-list-item:hover,
:root[data-theme-choice="dark"] .runtime-run-item:hover,
:root[data-theme-choice="dark"] .runtime-run-item.is-selected,
:root[data-theme-choice="dark"] .holding-card-metrics div { border-color: var(--line); background: var(--panel); }
:root[data-theme-choice="dark"] .market-search-candidate:hover { background: var(--accent-soft); }
:root[data-theme-choice="dark"] .user-profile-popover,
:root[data-theme-choice="dark"] .user-auth-dialog-card,
:root[data-theme-choice="dark"] .auth-provider-button { border-color: var(--line); color: var(--ink); background: var(--panel-strong); }

:root[data-theme-choice="dark"] .market-search-candidates,
:root[data-theme-choice="dark"] .market-search-candidate,
:root[data-theme-choice="dark"] .market-item,
:root[data-theme-choice="dark"] .market-date-pane,
:root[data-theme-choice="dark"] .market-date-indicator-card,
:root[data-theme-choice="dark"] .market-indicator-tab,
:root[data-theme-choice="dark"] .runtime-status-item,
:root[data-theme-choice="dark"] .provider-picker,
:root[data-theme-choice="dark"] .provider-result,
:root[data-theme-choice="dark"] .kernel-output,
:root[data-theme-choice="dark"] .platform-list-row,
:root[data-theme-choice="dark"] .platform-metric-grid span,
:root[data-theme-choice="dark"] .runtime-run-meta-grid > div,
:root[data-theme-choice="dark"] .live-order-row,
:root[data-theme-choice="dark"] .live-json-output { border-color: var(--line); color: var(--ink); background: var(--panel); }
:root[data-theme-choice="dark"] .market-item.active,
:root[data-theme-choice="dark"] .market-date-pane.active,
:root[data-theme-choice="dark"] .market-indicator-tab.active { border-color: var(--accent); color: var(--ink); background: var(--accent-soft); }
:root[data-theme-choice="dark"] .market-search-candidate:hover,
:root[data-theme-choice="dark"] .market-item:hover { border-color: var(--accent); background: var(--accent-soft); }
:root[data-theme-choice="dark"] .stock-avatar { color: var(--accent); background: var(--accent-soft); }
:root[data-theme-choice="dark"] .watchlist-remove:hover { color: var(--red); background: var(--red-soft); }
:root[data-theme-choice="dark"] .runtime-status-chip { color: var(--muted); background: var(--panel-strong); }
:root[data-theme-choice="dark"] .runtime-status-completed { color: var(--green); background: var(--green-soft); }
:root[data-theme-choice="dark"] .runtime-status-running,
:root[data-theme-choice="dark"] .runtime-status-queued,
:root[data-theme-choice="dark"] .runtime-status-paused { color: var(--accent); background: var(--accent-soft); }
:root[data-theme-choice="dark"] .runtime-status-failed,
:root[data-theme-choice="dark"] .runtime-status-error { color: var(--red); background: var(--red-soft); }
:root[data-theme-choice="dark"] .runtime-status-cancelled,
:root[data-theme-choice="dark"] .runtime-status-reset { color: var(--orange); background: var(--orange-soft); }
:root[data-theme-choice="dark"] .sidebar .nav-item { color: var(--muted); }
:root[data-theme-choice="dark"] .sidebar .nav-item:hover { color: var(--ink); background: var(--panel); }
:root[data-theme-choice="dark"] .sidebar .nav-item.active { color: var(--ink); background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
:root[data-theme-choice="dark"] .sidebar .nav-icon { color: var(--muted); }
:root[data-theme-choice="dark"] .sidebar .nav-item.active .nav-icon { color: var(--orange); }
:root[data-theme-choice="dark"] .sidebar-user-button { color: var(--ink); }
:root[data-theme-choice="dark"] .sidebar-user-button:hover,
:root[data-theme-choice="dark"] .sidebar-user-button[aria-expanded="true"] { border-color: var(--line); background: var(--panel); }
:root[data-theme-choice="dark"] .sidebar-theme-button[aria-expanded="true"] { color: var(--ink); background: var(--accent-soft); }
:root[data-theme-choice="dark"] .sidebar-user-avatar { border-color: var(--line); color: var(--accent); background: var(--accent-soft); }
/* 原先针对原生标题栏窗口按钮的暗色覆盖已删除：那些类名是同期遗留的死规则
   （HTML 中不存在 .window-control / [data-window-control]），
   且自绘按钮改用 token 后无需按主题特判。 */

/* theme-panel-in / theme-panel-out / theme-backdrop-out 已移除：它们的本质是对整屏
   卡片和遮罩做 opacity 动画，在本机软件渲染下会产生白帧（详见 .theme-modal-panel 注释）。
   只保留下面这个关闭完成信号——它由 JS 的 animationend 判定，两端 opacity 均为 1，
   不产生任何视觉变化，也不触发逐帧重算。 */
@keyframes theme-modal-out { from { opacity: 1; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .theme-modal.is-closing { animation-duration: .01ms; }
}

@media (max-width: 600px) {
  .theme-modal-panel { width: calc(100vw - 24px); max-height: calc(100vh - 32px); padding: 22px 18px 20px; }
  .theme-options { gap: 10px; }
  .theme-option { padding: 8px; }
  .theme-name { font-size: 12px; }
}