/* ============ Sirius 期货作战室 - 公共样式 ============ */
/* 抽取自 9 个页面的 <style id="theme-vars"> + 辅助样式 + 组件样式 */
/* 每个 HTML 页面 head 内仅需 <link rel="stylesheet" href="../shared/styles.css"> */
/* Tailwind 4 的 <style type="text/tailwindcss">@theme inline {...} 仍保留在 HTML 内（本文件不接管它）。
   ⚠ 本行刻意不写出「该 style 标签的闭合串」：本文件若被内联进页面的 <style> 里（做自包含预览、
     或临时排查），字面闭合串会让 HTML 解析器**在此提前结束 style 元素**，其后整份 CSS 会被当成
     正文文本处理 —— 浏览器 cssRules 里查不到后续规则，排查时极易误判"CSS 没生效"（已踩过一次）。 */

/* ============ Claude Design System - CSS 变量 ============ */
:root {
  /* Font Families */
  --font-display: 'Newsreader', Georgia, ui-serif, serif;
  --font-sans: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Lora', Georgia, ui-serif, serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;

  /* Brand Colors */
  --color-brand-50: #3a2a22;
  --color-brand-100: #4d3528;
  --color-brand-200: #6b4533;
  --color-brand-300: #8a5740;
  --color-brand-400: #b0683f;
  --color-brand-500: #d97757;
  --color-brand-600: #e08d6f;
  --color-brand-700: #e8a98f;
  --color-brand-800: #f0c6b3;
  --color-brand-900: #f8e3d8;

  /* Surface Colors */
  --color-surface-base: #1b1b19;
  --color-surface-dim: #262624;
  --color-surface: #2c2c2b;
  --color-surface-elevated: #30302e;
  --color-surface-hover: #3e3e38;
  --color-surface-muted: #4a4a43;

  /* Ink (Text) Colors */
  --color-ink: #faf9f5;
  --color-ink-secondary: #d8d6cd;
  --color-ink-muted: #b7b5a9;
  --color-ink-dim: #908e84;
  --color-ink-faint: #6e6d68;
  --color-ink-label: #46443b;

  /* Edge (Border) Colors */
  --color-edge: #4a4a43;
  --color-edge-subtle: #3e3e38;
  --color-edge-faint: #343430;
  --color-edge-divider: #2c2c2b;
  --color-edge-primary: #908e84;

  /* Semantic Colors */
  --color-success: #8ca06f;
  --color-success-bg: #232a1c;
  --color-success-border: #556640;
  --color-error: #ef4444;
  --color-error-bg: #3a1f1f;
  --color-error-border: #93302f;
  --color-chart-risk: #b56b61;
  --color-warning: #fdd835;

  /* Chart Colors */
  --color-chart-1: #b05730;
  --color-chart-2: #9c87f5;
  --color-chart-3: #1a1915;
  --color-chart-4: #2f2b48;
  --color-chart-5: #b4552d;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 3px 0 rgba(0,0,0,0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
  --shadow-md: 0 1px 3px 0 rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.1);
  --shadow-lg: 0 1px 3px 0 rgba(0,0,0,0.1), 0 4px 6px -1px rgba(0,0,0,0.1);
  --shadow-xl: 0 1px 3px 0 rgba(0,0,0,0.1), 0 8px 10px -1px rgba(0,0,0,0.1);

  /* Legacy aliases for JS compatibility */
  --bg: #1b1b19;
  --bg2: #2c2c2b;
  --bg3: #30302e;
  --text: #faf9f5;
  --text2: #b7b5a9;
  --border: #4a4a43;
  --accent: #d97757;
  --green: #8ca06f;
  --yellow: #fdd835;
  --red: #ef4444;
}

/* ============ 辅助样式 ============ */
/* 背景/文字立即生效（不依赖 Tailwind 运行时编译）：
   消除页面切换时的白屏/深色闪屏——浅色模式 FOUC 根因是 html.light 由 JS 延迟应用。 */
body { background: var(--bg); color: var(--text); transition: background-color 0.3s ease, color 0.3s ease; }
html.light body { background: #f8f6f1; color: #1a1915; }
/* 页面切换淡出（ui-core 导航拦截时挂到 <html>） */
html.page-leaving, html.page-leaving body { opacity: 0; transition: opacity 0.15s ease-out; }
@media (prefers-reduced-motion: reduce) {
  html.page-leaving, html.page-leaving body { transition: none; }
}
/* 折叠面板平滑展开/收起（设置页 Gist 冷备份和仪表盘分项明细） */
.collapse-panel,
.dash-breakdown-details {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: hidden;
  max-height: 0;
  transform: translateY(-4px);
  transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.32s ease, opacity 0.24s ease, transform 0.32s ease;
}
.collapse-panel.open,
.dash-breakdown-details.open { grid-template-rows: 1fr; max-height: 1200px; opacity: 1; transform: translateY(0); }
.collapse-panel > .collapse-panel-inner,
.dash-breakdown-details > * { overflow: hidden; min-height: 0; }
.dash-breakdown-card { transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.24s ease; }
.dash-breakdown-card:focus-visible { outline: 2px solid var(--color-brand-500); outline-offset: 2px; }
.dash-breakdown-card::after { content: '›'; float: right; color: var(--color-ink-faint); transition: transform 0.28s ease; }
.dash-breakdown-card[aria-expanded="true"]::after { transform: rotate(90deg); color: var(--color-brand-500); }
@media (prefers-reduced-motion: reduce) {
  .collapse-panel, .dash-breakdown-details, .dash-breakdown-card::after { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .collapse-panel { transition: none; }
}
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
[data-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: currentColor;
}
/* Page enter transition - 消除切换闪烁 */
.page-enter { animation: pageEnter 0.3s cubic-bezier(0.4,0,0.2,1); }
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .page-enter { animation: none; }
}

/* ============ 组件样式 ============ */
.toast{position:fixed;top:20px;right:20px;background:var(--color-brand-500);color:var(--color-brand-50);padding:10px 20px;border-radius:var(--radius-sm);font-size:13px;z-index:2000;display:none;animation:fadeIn .3s;font-family:var(--font-sans);max-width:min(420px,calc(100vw - 32px));word-break:break-word;box-shadow:var(--shadow-lg)}
.toast.show{display:block}
.toast.success{background:var(--color-success);color:var(--color-brand-50)}
.toast.error{background:var(--color-error);color:#fff}
.toast.warn{background:var(--color-warning);color:#1a1915}
/* 视觉 Toast 与读屏播报分离：后者不随 2.5 秒提示消失，且不会占用版面。 */
.app-live-region{position:fixed;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
@keyframes fadeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.58);z-index:1000;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px)}
.modal-overlay.show{display:flex}
.modal{background:var(--color-surface-elevated);border:1px solid var(--color-edge);border-radius:var(--radius-md);padding:20px;max-width:500px;width:100%;max-height:calc(100vh - 32px);overflow-y:auto;box-shadow:var(--shadow-xl)}
.modal:focus{outline:2px solid var(--color-brand-500);outline-offset:3px}
.modal h3{margin-bottom:12px;color:#d97757;font-family:Lora,Georgia,ui-serif,serif}
.form-group{margin-bottom:10px}
.form-group label{display:block;font-size:13px;font-weight:500;margin-bottom:4px;color:#b7b5a9}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:6px 10px;background:#1b1b19;border:1px solid #3e3e38;border-radius:8px;color:#faf9f5;font-size:13px;font-family:Poppins,ui-sans-serif,system-ui,sans-serif;transition:border-color .2s}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#d97757;box-shadow:0 0 0 3px rgba(217,119,87,0.15)}
.form-group input:read-only,.form-group select:disabled{background:#262624;color:#908e84;cursor:not-allowed}
.form-group textarea{resize:vertical;min-height:40px}
.form-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.form-help{font-size:12px;color:#908e84;margin-top:4px}
.signal-light{display:inline-block;width:20px;height:20px;border-radius:50%;margin:0 2px;vertical-align:middle}
/* v0.34.12：信号灯外层固定 22×22 inline-flex 容器，灯始终水平/垂直居中，
   修复信号矩阵第 3 列（估值灯）等因行高不同出现的灯圈错位（歪歪扭扭） */
.signal-light-cell{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;vertical-align:middle;line-height:0}
/* 信号矩阵：行高统一 84px（用户反馈行高太窄拥挤；用 tr height 生效——min-height 对 table-row 无效，
   内容天然钳制在 2 行详情内，所有行等高，信号灯纵列保持对齐） */
#signalBody tr { height: 84px; }
#signalBody td { padding: 10px 10px; vertical-align: middle; border-bottom: 1px solid var(--color-edge-faint); }
#signalBody tr:last-child td { border-bottom-color: transparent; }
html.light #signalBody td { border-bottom-color: #e7e4dd; }
html.light #signalBody tr:last-child td { border-bottom-color: transparent; }
html.light .progress-bar { background: #f0ede6 !important; border-color: #e0ddd5 !important; }
html.light .progress-fill { background: #c45d3a !important; }
html.light .progress-fill span { color: #fff !important; }
.signal-detail{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35;max-height:38px}
.signal-green{background:#8ca06f;box-shadow:0 0 6px #8ca06f}
.signal-yellow{background:#e08d6f;box-shadow:0 0 6px #e08d6f}
.signal-red{background:#ef4444;box-shadow:0 0 6px #ef4444}
/* v0.34.34：信号动作按钮——克制化描边三态（开/加仓·减仓·止损），替代高饱和实底；评级红字同源克制 */
.signal-rate-red{color:#c0675a}
.action-btn-open{color:#e0a98f;background:rgba(107,69,51,.28);border:1px solid #6b4533}
.action-btn-reduce{color:#b3a37a;background:rgba(90,82,63,.28);border:1px solid #5a523f}
.action-btn-close{color:#c07a6c;background:rgba(107,58,51,.28);border:1px solid #6b3a33}
.action-btn-open:hover,.action-btn-reduce:hover,.action-btn-close:hover{filter:brightness(1.12)}
html.light .signal-rate-red{color:#a05a4e !important}
html.light .action-btn-open{color:#8a5a3e;background:#f3ece6;border-color:#d9c2ae}
html.light .action-btn-reduce{color:#7d6f4a;background:#f4f0e6;border-color:#dccfa9}
html.light .action-btn-close{color:#95483c;background:#f6ece9;border-color:#ddb8ae}
html.light .action-btn-open:hover,html.light .action-btn-reduce:hover,html.light .action-btn-close:hover{filter:brightness(.97)}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:middle}
.status-dot.online{background:#8ca06f;box-shadow:0 0 4px #8ca06f}
.status-dot.offline{background:#ef4444}
.status-dot.loading{background:#fdd835;animation:pulse 1s infinite}
.switch{position:relative;display:inline-block;width:36px;height:20px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;inset:0;background:#30302e;border-radius:20px;transition:.3s;border:1px solid #4a4a43}
.slider:before{content:'';position:absolute;height:14px;width:14px;left:2px;bottom:2px;background:#908e84;border-radius:50%;transition:.3s}
input:checked+.slider{background:#d97757;border-color:#d97757}
input:checked+.slider:before{transform:translateX(16px);background:#faf9f5}
.alert-box{background:rgba(239,68,68,0.1);border:1px solid #ef4444;border-radius:8px;padding:12px;margin:8px 0;color:#ef4444;font-weight:500;font-size:13px}
.info-box{background:rgba(217,119,87,0.08);border:1px solid #d97757;border-radius:8px;padding:12px;margin:8px 0;color:#d97757;font-size:13px}
.progress-bar{background:var(--color-surface-hover);border:1px solid var(--color-edge-faint);border-radius:var(--radius-full);height:12px;overflow:hidden;margin:8px 0;position:relative}
.progress-fill{height:100%;min-width:42px;background:var(--color-brand-500);border-radius:var(--radius-full);transition:width .5s ease;display:flex;align-items:center;justify-content:flex-start;color:var(--color-brand-50);font:500 10px/1 var(--font-mono);padding-left:8px}
.empty-state{text-align:center;padding:40px;color:#908e84;font-family:Lora,Georgia,ui-serif,serif;font-style:italic}
canvas{width:100%!important;max-height:300px}

/* ============ Sirius 新增:云同步状态条 + 账户切换器 ============ */
.sync-bar {
  font-family: var(--font-sans);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
/* 顶部工具区在小屏折行而非推宽页面；兼容既有页面中失效的 Tailwind `flex-wrap:wrap`。 */
.auto-refresh-bar { flex-wrap:wrap; }
.app-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; min-width:0; }
.app-toolbar > * { min-width:0; }
.app-toolbar .app-toolbar-group { display:flex; align-items:center; gap:12px; flex-wrap:wrap; min-width:0; }
.app-toolbar span { overflow-wrap:anywhere; }

@media (max-width: 640px) {
  .auto-refresh-bar { align-items:flex-start; }
  .auto-refresh-bar > .app-toolbar-group { width:100%; gap:8px; }
  .app-toolbar > button { width:100%; }
  .sync-bar { align-items:flex-start; }
  .sync-bar > * { min-width:0; }
  .modal-overlay { align-items:flex-end; padding:8px; }
  .modal { max-height:calc(100vh - 16px); padding:16px; }
  /* 高频操作在手机上达到 44px 触控基线；表格内容仍可横向滚动以保留信息密度。 */
  button, select, input[type="button"], input[type="submit"], input[type="reset"] { min-height:44px; }
  .switch, .switch .slider { min-height:0; }
  .form-actions { flex-direction:column-reverse; }
  .form-actions > button { width:100%; }
}
.account-switcher {
  display: inline-flex;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-edge);
  overflow: hidden;
}
.account-switcher button {
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
  border: none;
  outline: none;
  padding: 2px 12px;
  font-size: 12px;
  font-family: var(--font-sans);
}
.account-switcher button.active {
  background: var(--color-brand-500);
  color: var(--color-brand-50);
}
.account-switcher button:not(.active) {
  background: var(--color-surface-base);
  color: var(--color-ink-muted);
}
.account-switcher button:not(.active):hover {
  background: var(--color-surface-hover);
}

/* 实盘页面的固定边界提示：风险来自真实事实记录，不等同于自动下单。 */
.real-account-warning { display:flex; align-items:flex-start; gap:8px; padding:10px 12px; border:1px solid var(--color-error-border); border-left:4px solid var(--color-error); border-radius:var(--radius-sm); background:var(--color-error-bg); color:var(--color-ink-secondary); font-size:12px; }
.real-account-warning strong { color:var(--color-error); white-space:nowrap; }
.record-mode-fieldset { min-width:0; border:1px solid var(--color-edge-subtle); border-radius:var(--radius-sm); padding:10px 12px; }
.record-mode-fieldset legend { padding:0 4px; color:var(--color-ink-muted); font-size:13px; font-weight:500; }
.record-mode-options { display:flex; align-items:center; flex-wrap:nowrap; gap:16px; min-width:max-content; }
.record-mode-options label { display:inline-flex; align-items:center; gap:6px; min-height:36px; color:var(--color-ink-secondary); font-size:13px; cursor:pointer; white-space:nowrap; }
.record-mode-options input { accent-color:var(--color-brand-500); flex:0 0 auto; }
.contract-role-badge { display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:17px; padding:0 3px; border-radius:4px; font:600 10px/1 var(--font-sans); white-space:nowrap; flex:0 0 auto; }
.cost-source-badge { display:inline-flex; align-items:center; justify-content:center; margin-left:3px; color:var(--color-ink-faint); font:500 10px/1 var(--font-sans); }
.contract-main-badge { color:var(--color-brand-700); background:var(--color-brand-100); border:1px solid var(--color-brand-300); }
.contract-sub-badge { color:var(--color-ink-muted); background:var(--color-surface-hover); border:1px solid var(--color-edge-subtle); }
.contract-near-badge { color:var(--color-warning); background:rgba(253,216,53,.10); border:1px solid rgba(253,216,53,.35); }
.journal-day-group { margin:0 0 10px; border-bottom:1px solid var(--color-edge-faint); }
.journal-day-group > summary { display:flex; align-items:center; gap:8px; padding:8px 0; color:var(--color-ink-secondary); font:500 12px/1.4 var(--font-sans); cursor:pointer; list-style:none; min-width:0; }
.journal-day-group > summary::-webkit-details-marker,
.journal-entry-summary > summary::-webkit-details-marker { display:none; }
.journal-day-group > summary::before { content:'›'; margin-right:2px; color:var(--color-ink-faint); transition:transform .24s ease; flex:0 0 auto; }
.journal-day-group[open] > summary::before { transform:rotate(90deg); }
/* 未展开时日行展示前 1-2 条摘要，占满整行（用户反馈：折叠时仅日期太单薄） */
.journal-day-preview { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--color-ink-faint); font:400 11px/1.4 var(--font-sans); padding:0 8px; }
.journal-day-group[open] > summary .journal-day-preview { display:none; }
.journal-day-count { flex:0 0 auto; color:var(--color-ink-faint); font:400 11px/1.4 var(--font-mono); }
/* 日分组内容：grid-rows 平滑展开/收起（Claude 规范样式） */
.journal-day-content { display:grid; grid-template-rows:0fr; opacity:0; overflow:hidden; transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1), opacity .22s ease; }
.journal-day-content-inner { min-height:0; overflow:hidden; }
.journal-day-group[open] > .journal-day-content { grid-template-rows:1fr; opacity:1; }
.journal-entry-summary { margin:0 0 4px 14px; border:1px solid transparent; border-radius:var(--radius-sm); transition:background-color .2s ease,border-color .2s ease; }
.journal-entry-summary[open] { background:var(--color-surface-dim); border-color:var(--color-edge-faint); }
.journal-entry-summary > summary { display:flex; align-items:center; gap:8px; padding:7px 8px; cursor:pointer; list-style:none; min-width:0; }
.journal-entry-summary > summary::before { content:'›'; flex:0 0 auto; color:var(--color-ink-faint); font-size:12px; transition:transform .24s ease; }
.journal-entry-summary[open] > summary::before { transform:rotate(90deg); }
.journal-entry-meta { flex:0 0 auto; color:var(--color-ink-muted); font-size:11px; }
/* 折叠时标题最多 2 行占满行宽（用户反馈：单行截断省略号导致信息不全） */
.journal-entry-title { flex:1 1 auto; min-width:0; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:break-all; color:var(--color-ink-secondary); font-size:12px; line-height:1.45; }
.journal-auto-badge { flex:0 0 auto; padding:1px 5px; border:1px solid var(--color-edge-subtle); border-radius:4px; color:var(--color-ink-faint); font-size:10px; }
/* 条目详情：grid-rows 平滑展开/收起 */
.journal-entry-detail { display:grid; grid-template-rows:0fr; opacity:0; overflow:hidden; transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1), opacity .22s ease; }
.journal-entry-detail-inner { min-height:0; overflow:hidden; padding:0 10px 10px; color:var(--color-ink-muted); }
.journal-entry-summary[open] > .journal-entry-detail { grid-template-rows:1fr; opacity:1; }
.journal-entry-actions { display:flex; justify-content:flex-end; gap:8px; margin-bottom:6px; }
.journal-load-more { display:block; width:100%; margin:12px 0; padding:8px; border:1px solid var(--color-edge-subtle); border-radius:var(--radius-sm); background:var(--color-surface-elevated); color:var(--color-ink-muted); font-size:12px; cursor:pointer; }
.journal-load-more:hover { background:var(--color-surface-hover); color:var(--color-ink); }
@media (prefers-reduced-motion: reduce) {
  .journal-day-content, .journal-entry-detail { transition:none; }
  .journal-day-group > summary::before, .journal-entry-summary > summary::before { transition:none; }
}
/* 信号页合约单元格：仅主力合约静态展示 + 角色徽标（v0.34.34 移除次主力下拉） */
.signal-contract-cell { display:inline-flex; align-items:center; justify-content:center; gap:4px; white-space:nowrap; }
.signal-contract-static { font-size:12px; }
html.light .contract-main-badge { color:#775546; background:#f5eee9; border-color:#dec9bd; }
html.light .contract-sub-badge { color:#5a6673; background:#f0f2f5; border-color:#e0e3e8; }
html.light .contract-near-badge { color:#8a6800; background:#fff8df; border-color:#ead99c; }
@media (max-width:640px) { .real-account-warning { flex-direction:column; gap:4px; } .record-mode-options { gap:10px; } .record-mode-options label { font-size:12px; } .record-mode-fieldset { overflow-x:auto; } }

/* ============ Sirius 新增:实盘录入交易类型按钮 ============ */
.trade-type-btn {
  padding: 6px 14px;
  border: 1px solid var(--color-edge);
  background: var(--color-surface-base);
  color: var(--color-ink-muted);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: var(--font-sans);
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s;
}
.trade-type-btn:hover {
  background: var(--color-surface-hover);
  color: var(--color-ink);
}
.trade-type-btn.active {
  background: var(--color-brand-500);
  color: var(--color-brand-50);
  border-color: var(--color-brand-500);
}
.trade-type-btn[data-type$="_open"].active { background: var(--color-success); border-color: var(--color-success); color: #faf9f5; }
.trade-type-btn[data-type$="_close"].active { background: var(--color-error); border-color: var(--color-error); color: #fff; }
.trade-type-btn[data-type$="_add"].active { background: var(--color-warning); border-color: var(--color-warning); color: #1a1915; }

/* ============ Sirius 新增:仪表盘账户总览卡片 ============ */
.metric-card {
  background: var(--color-surface);
  border: 1px solid var(--color-edge-subtle);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  transition: border-color 0.2s, transform 0.2s;
}
.metric-card:hover {
  border-color: var(--color-edge);
  transform: translateY(-1px);
}
.metric-label {
  font-size: 12px;
  color: var(--color-ink-dim);
  margin-bottom: 6px;
  font-family: var(--font-sans);
}
.metric-value {
  font-size: 22px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--color-ink);
}
.metric-value.positive { color: var(--color-success); }
.metric-value.negative { color: var(--color-error); }
.metric-sub {
  font-size: 11px;
  color: var(--color-ink-faint);
  margin-top: 4px;
}

/* ============ Sirius 新增:归因柱状图 ============ */
.attribution-bar-container {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px;
  background: var(--color-surface-base);
  border: 1px solid var(--color-edge-faint);
  border-radius: var(--radius-sm);
  min-height: 160px;
}
.attribution-bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.attribution-bar {
  width: 100%;
  min-height: 4px;
  border-radius: 4px 4px 0 0;
  transition: height 0.3s;
}
.attribution-bar.positive { background: var(--color-success); }
.attribution-bar.negative { background: var(--color-error); }
.attribution-label {
  font-size: 10px;
  color: var(--color-ink-faint);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ============ Sirius 新增:外部基本面信号摘录 <pre> 块 ============ */
.fund-excerpt-pre {
  white-space: pre-wrap;
  background: var(--color-surface-dim);
  border: 1px solid var(--color-edge-faint);
  border-radius: 8px;
  padding: 10px;
  font-size: 11px;
  color: var(--color-ink-dim);
  font-family: 'Geist Mono', monospace;
  max-height: 260px;
  overflow: auto;
  margin-top: 6px;
}.light .fund-excerpt-pre {
  background: #f0ede6 !important;
  border-color: #d0cdc5 !important;
  color: #4a4a43 !important;
}

/* 通用状态副标签（观察池/交易页到期徽标、信号页可信度标签等，P2-7/P1-6） */
.status-sub {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 9999px;
  font-size: 10px;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid;
  cursor: pointer;
  font-weight: 500;
}
/* 观察池行内到期徽标（P2-7）：与 .status-sub 同尺寸，防继承表格大字号 */
.rollover-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 9999px;
  font-size: 10px;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid;
  cursor: pointer;
  font-weight: 500;
  vertical-align: middle;
  margin-left: 6px;
}

/* ============ Sirius 新增:信号引擎极端低位徽章 ============ */
.extreme-low-badge {
  background: rgba(253, 216, 53, 0.12);
  border: 1px solid #fdd835;
  color: #fdd835;
}.light .extreme-low-badge {
  background: rgba(204, 150, 0, 0.18) !important;
  border: 1px solid #c49600 !important;
  color: #8a6800 !important;
}.light .text-warning { color: #8a6800 !important; }

/* ============ Sirius 新增:统一所有页面表头字体大小 13px,与观察池 .pool-th 一致 ============ */ thead th { font-size: 13px !important; }

/* ============ Sirius 新增:外部基本面信号摘录 <pre> 块 ============ */
.fund-excerpt-pre {
  white-space: pre-wrap;
  background: var(--color-surface-dim);
  border: 1px solid var(--color-edge-faint);
  border-radius: 8px;
  padding: 10px;
  font-size: 11px;
  color: var(--color-ink-dim);
  font-family: 'Geist Mono', monospace;
  max-height: 260px;
  overflow: auto;
  margin-top: 6px;
}
html.light .fund-excerpt-pre {
  background: #f0ede6 !important;
  border-color: #d0cdc5 !important;
  color: #4a4a43 !important;
}

/* ============ Sirius 新增:信号引擎极端低位徽章 ============ */
.extreme-low-badge {
  background: rgba(253, 216, 53, 0.12);
  border: 1px solid #fdd835;
  color: #fdd835;
}
html.light .extreme-low-badge {
  background: rgba(204, 150, 0, 0.18) !important;
  border: 1px solid #c49600 !important;
  color: #8a6800 !important;
}
html.light .text-warning { color: #8a6800 !important; }

/* ============ Sirius 新增:统一所有页面表头字体大小 13px（与观察池 .pool-th 一致） ============ */
table thead th { font-size: 13px !important; }
/* ============ 阶段 2.3：信号页「为什么 + 何时失效」说明块（SignalInterpret 三件套）============
   与「供需诊断」块同风格（虚线 + 半透明底）：标为**补充说明**，不抢主表信息。
   候选人/可执行用徽标区分（红线 8 的视觉分区）。 */
.interp-block { margin-top: 4px; padding: 5px 7px; border-radius: 6px; font-size: 11px; line-height: 1.55;
  background: rgba(255,255,255,0.04); border: 1px dashed rgba(144,142,132,0.35); color: #b7b5a9; }
.interp-badge { display: inline-block; margin-right: 5px; padding: 0 5px; border-radius: 4px; font-weight: 600; }
.interp-candidate { background: rgba(176,148,90,0.22); color: #d7b877; border: 1px solid rgba(176,148,90,0.45); }
.interp-executable { background: rgba(140,160,111,0.22); color: #a9c48c; border: 1px solid rgba(140,160,111,0.45); }
.interp-list { margin: 1px 0 3px 14px; padding: 0; list-style: disc; }
.interp-list li { margin: 0; }
.interp-support li { color: #a9c48c; }
.interp-conflict li { color: #e08d6f; }
.interp-inval li { color: #d7b877; }
.interp-none { opacity: 0.6; }
.interp-test { opacity: 0.7; font-size: 10px; }
.interp-unavailable { opacity: 0.85; }
html.light .interp-block { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.15); color: #4a4842; }
html.light .interp-support li { color: #4f6b2f; }
html.light .interp-conflict li { color: #a5452a; }
html.light .interp-inval li { color: #7a5c14; }
html.light .interp-candidate { background: rgba(176,148,90,0.18); color: #6b5312; }
html.light .interp-executable { background: rgba(90,120,60,0.18); color: #3d5a1f; }
.interp-src-missing { background: rgba(144,142,132,0.22); color: #cfcdc2; border: 1px solid rgba(144,142,132,0.45); }
html.light .interp-src-missing { background: rgba(0,0,0,0.06); color: #55534c; }

/* ============ 详情列「研究概述」折叠（默认收起 / 点击展开）============
   背景：详情列内容长（支持证据 + 反向证据 + 何时失效 + 判据 + 判定结论 + 降级原因 + 口径），
   一行就能把表格撑到一屏高。故默认只留一行结论摘要（徽标 +「为什么 + 方向/强度」）。
   动画机制：`grid-template-rows: 0fr → 1fr` —— 这是无 JS 参与的真实高度过渡
   （不猜 max-height、不在 JS 里量 scrollHeight）⇒ 不会因测高产生重排抖动/闪屏；
   内容另做 opacity + 3px 上移淡入，让「盒子先从容张开、文字随后浮现」。
   时长刻意放慢到 520ms + 收尾缓动（cubic-bezier .22,1,.36,1），观感稳、不慌张。 */
.interp-fold { padding: 0; overflow: hidden; }
.interp-fold-head { display: flex; align-items: flex-start; gap: 6px; width: 100%;
  margin: 0; padding: 5px 7px; border: 0; border-radius: 6px; background: transparent;
  font: inherit; font-size: 11px; line-height: 1.55; color: inherit; text-align: left;
  cursor: pointer; transition: background-color 240ms ease; }
.interp-fold-head:hover { background: rgba(255,255,255,0.07); }
.interp-fold-head:focus-visible { outline: 2px solid rgba(176,148,90,0.6); outline-offset: -2px; }
.interp-fold-sum { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.interp-fold-cue { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 2px; opacity: 0.5;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 420ms cubic-bezier(0.22,1,0.36,1), opacity 240ms ease; }
.interp-fold-cue::before { content: ''; width: 5px; height: 5px; margin-top: -3px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); }
.interp-fold-head:hover .interp-fold-cue { opacity: 0.85; }
.interp-fold.is-open .interp-fold-cue { transform: rotate(180deg); opacity: 0.8; }
/* —— 拉幕（curtain）三件套，同一时长(520ms)同一缓出曲线，合成"一道幕布整体落下"——
   ① 裁切层：grid-template-rows 0fr → 1fr，幕布自下沿一路落下；
   ② 内容**整体不平移、不淡入**（那读起来是"点亮"，不是"拉开"）⇒ 内容保持原位，只被裁切逐步露出；
   ③ 分节自上而下依次显影（延迟递增 26ms），形成"帷幕掠过、内容逐段浮现"的层次；
   ④ 下沿柔化：可过渡的 --fold-curtain 让幕布下边缘由虚变实，落定后归 0（完全清晰）。
   ⚠ 内容容器的 padding 是**不可压缩**的：若把底部留白写在 .interp-fold-inner 上，
   即便 grid 行高为 0fr，那 6px 也会把行高撑成 6px（实测 grid-template-rows 计算值 = 6px，
   收起后块下多出一条空隙）。故底部留白改由动画层承载体承担，并与高度同步过渡（都是长度值，
   可同曲线插值）⇒ 收起态严格为 0，展开态留白自然长出来，且全程无跳变。 */
@property --fold-curtain { syntax: '<percentage>'; initial-value: 0%; inherits: false; }
.interp-fold-body { display: grid; grid-template-rows: 0fr; overflow: hidden; padding-bottom: 0;
  transition: grid-template-rows 520ms cubic-bezier(0.22,1,0.36,1),
              padding-bottom 520ms cubic-bezier(0.22,1,0.36,1); }
.interp-fold.is-open .interp-fold-body { grid-template-rows: 1fr; padding-bottom: 6px; }
.interp-fold-inner { overflow: hidden; min-height: 0; padding: 0 7px;
  --fold-curtain: 16%;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fold-curtain)), rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fold-curtain)), rgba(0,0,0,0) 100%);
  transition: --fold-curtain 520ms cubic-bezier(0.22,1,0.36,1); }
.interp-fold.is-open .interp-fold-inner { --fold-curtain: 0%; }
/* 分节：收起时隐去；展开时自上而下依次显影（末节延迟 ≈202ms，仍在 520ms 内落定完） */
.interp-sec { opacity: 0; transition: opacity 180ms ease; }
.interp-sec + .interp-sec { margin-top: 8px; }
.interp-fold.is-open .interp-sec { opacity: 1; transition: opacity 320ms ease; }
.interp-fold.is-open .interp-sec:nth-child(1) { transition-delay: 20ms; }
.interp-fold.is-open .interp-sec:nth-child(2) { transition-delay: 46ms; }
.interp-fold.is-open .interp-sec:nth-child(3) { transition-delay: 72ms; }
.interp-fold.is-open .interp-sec:nth-child(4) { transition-delay: 98ms; }
.interp-fold.is-open .interp-sec:nth-child(5) { transition-delay: 124ms; }
.interp-fold.is-open .interp-sec:nth-child(6) { transition-delay: 150ms; }
.interp-fold.is-open .interp-sec:nth-child(7) { transition-delay: 176ms; }
.interp-fold.is-open .interp-sec:nth-child(8) { transition-delay: 202ms; }
html.light .interp-fold-head:hover { background: rgba(0,0,0,0.05); }
/* 兜底：不支持 fr 行高动画的浏览器 —— 直接显隐（功能完整，只是不播放动画） */
@supports not (grid-template-rows: 0fr) {
  .interp-fold-body { display: none; }
  .interp-fold.is-open .interp-fold-body { display: block; }
  .interp-fold.is-open .interp-fold-inner { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .interp-fold-head, .interp-fold-cue, .interp-fold-body, .interp-fold-inner, .interp-sec { transition: none; }
  /* 关掉动效后必须保证"内容可见"：幕布软边归零、分节不透明（否则会因初始 opacity:0 而白屏式缺失） */
  .interp-fold-inner { --fold-curtain: 0%; }
  .interp-sec { opacity: 1; }
}
