/* InvestAI · 投研面板样式
   Design Contract v2 · apple-dark / 精密产品页
   参照苹果官网深色产品页的语言：近黑底色 + 大字号紧字距标题 + 毛玻璃层级 +
   药丸按钮 + iOS 分段控件 + 卡片顶部高光。零外部依赖：不使用任何 CDN 字体或图标库。
   间距取 4 的倍数（4/8/12/16/24/32/40/48/64），字号取自 12/13/14/16/17/20/22/28/32/40。
   可读性基线：正文级文字对所在底色至少 4.5:1，说明文字至少 4:1（v1 的
   --text-dim #5D6B7A 在卡片上只有约 2.9:1，是「看不清」的根源，v2 整体提亮两档）。 */

:root {
  /* ---- 颜色：3 个色族（琥珀 / 涨跌对 / 中性） ---- */
  --bg: #05070B;
  --surface: #10151D;
  --surface-2: #171F29;
  --surface-3: #1F2937;
  --border: #2B3A4D;
  --hairline: rgba(255, 255, 255, 0.10);
  --text: #F5F7FA;
  --text-sub: #B9C4D0;
  --text-dim: #94A3B6;

  --accent: #E8A33D;
  --accent-dim: rgba(232, 163, 61, 0.12);
  --accent-line: rgba(232, 163, 61, 0.55);

  --up: #35C08E;
  --down: #D9564E;
  --up-dim: rgba(53, 192, 142, 0.14);
  --down-dim: rgba(217, 86, 78, 0.14);

  --grid: rgba(255, 255, 255, 0.06);

  /* ---- 字体：SF Pro 优先，Windows 落到 Segoe UI Variable ---- */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "Segoe UI Variable Display", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI Variable Text", "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "SF Mono", "Cascadia Mono", Consolas, ui-monospace,
    "SFMono-Regular", Menlo, monospace;

  /* ---- 尺寸 ---- */
  --sidebar-w: 236px;
  --topbar-h: 56px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ---- 动效：expo-out 是苹果页面进场的主缓动，按压用短促的 scale ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.4);
  --shadow-panel: 0 24px 64px rgba(0, 0, 0, 0.55);
  /* 卡片的玻璃顶光：1px 内描边模拟材质边缘受光 */
  --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.07);

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
html { scrollbar-color: #2B3A4D transparent; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}

/* 背景气氛：苹果式柔和光晕（琥珀主光 + 冷蓝辅光 + 底部微绿），
   不再用网格纹理——密集网格是「仪表盘」语言，产品页语言是干净的大面积渐变。 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1100px 520px at 18% -12%, rgba(232, 163, 61, 0.10), transparent 62%),
    radial-gradient(900px 460px at 97% 0%, rgba(100, 168, 255, 0.07), transparent 58%),
    radial-gradient(1200px 640px at 50% 118%, rgba(53, 192, 142, 0.05), transparent 60%);
}

::selection { background: rgba(232, 163, 61, 0.32); color: #FFFFFF; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.24); }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
code, .mono { font-family: var(--font-mono); }

/* ============ App Shell ============ */
.app { position: relative; z-index: 1; min-height: 100vh; }

/* 侧栏：毛玻璃材质，让背景光晕透上来，而不是一块死色 */
.sidebar {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--sidebar-w);
  padding: var(--sp-6) var(--sp-4);
  background: rgba(10, 14, 20, 0.72);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-right: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.brand { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-2); }
/* 品牌标：琥珀渐变的「应用图标」，深色图形浮在亮面上 */
.brand__mark {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 9px;
  background: linear-gradient(135deg, #F6BC55, #D9862A);
  color: #14100A;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 14px rgba(232, 163, 61, 0.28);
}
.brand__text { display: flex; flex-direction: column; line-height: 1.3; }
.brand__name {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 700;
  letter-spacing: -0.01em;
}
.brand__sub { font-size: 12px; color: var(--text-dim); letter-spacing: 0.02em; }

.nav { display: flex; flex-direction: column; gap: var(--sp-1); }
.nav__label {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dim); padding: 0 var(--sp-2) var(--sp-2);
}
.nav__item {
  display: flex; align-items: center; gap: var(--sp-3);
  height: 38px; padding: 0 var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--text-sub);
  font-size: 14px; font-weight: 500;
  transition: background 160ms var(--ease-smooth), color 160ms var(--ease-smooth);
}
.nav__item svg { flex: none; opacity: 0.9; }
a.nav__item:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }
.nav__item.is-soon { color: var(--text-dim); cursor: not-allowed; }
.nav__item.is-soon svg { opacity: 0.55; }
.nav__soon {
  margin-left: auto;
  font-size: 12px; color: var(--text-dim);
  border: 1px solid var(--hairline); border-radius: 999px;
  padding: 0 var(--sp-1); line-height: 16px;
}

/* 唯一的激活态机制：由 body[data-page] 与 data-nav 对齐，页面无需手改类名。
   激活态从「左侧竖线」换成整颗药丸（iOS 侧栏选中语言），扫视更清楚。
   七个页面都要列全，少一个那一页就没有高亮——先前 scan / review / brief 就漏了。 */
body[data-page="research"] .nav__item[data-nav="research"],
body[data-page="agents"] .nav__item[data-nav="agents"],
body[data-page="scan"] .nav__item[data-nav="scan"],
body[data-page="portfolio"] .nav__item[data-nav="portfolio"],
body[data-page="risk"] .nav__item[data-nav="risk"],
body[data-page="review"] .nav__item[data-nav="review"],
body[data-page="brief"] .nav__item[data-nav="brief"],
body[data-page="method"] .nav__item[data-nav="method"] {
  background: var(--accent-dim);
  color: var(--accent);
  font-weight: 600;
}

.sidebar__foot {
  margin-top: auto;
  font-size: 12px; color: var(--text-dim);
  border-top: 1px solid var(--hairline);
  padding-top: var(--sp-4);
  line-height: 1.7;
}
.sidebar__foot strong { color: var(--text-sub); font-weight: 500; }

.main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }

/* 吸顶栏：苹果导航栏的毛玻璃（blur + saturate 提饱和） */
.topbar {
  position: sticky; top: 0; z-index: 5;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 var(--sp-8);
  background: rgba(5, 7, 11, 0.68);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--hairline);
}
.topbar__title {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--text);
}
.topbar__spacer { margin-left: auto; }

.content {
  width: 100%; max-width: 1360px;
  padding: var(--sp-10) var(--sp-8) var(--sp-12);
  display: flex; flex-direction: column; gap: var(--sp-6);
}

/* ============ 通用元件 ============ */
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  height: 24px; padding: 0 var(--sp-3);
  border-radius: 999px;
  font-size: 12px; letter-spacing: 0.02em; font-weight: 500;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--text-sub);
  white-space: nowrap;
}
.chip svg { width: 14px; height: 14px; }
.chip--accent { color: var(--accent); border-color: var(--accent-line); background: var(--accent-dim); }
.chip--up { color: var(--up); border-color: rgba(53, 192, 142, 0.35); background: var(--up-dim); }
.chip--down { color: var(--down); border-color: rgba(217, 86, 78, 0.35); background: var(--down-dim); }
.chip--mute { color: var(--text-dim); }

/* 药丸按钮：玻璃面 + 悬停琥珀描边 + 按压回缩（苹果按钮手感） */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
  height: 34px; padding: 0 var(--sp-4);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text);
  font-size: 13px; font-weight: 500;
  transition: border-color 180ms var(--ease-smooth), color 180ms var(--ease-smooth),
    background 180ms var(--ease-smooth), transform 120ms var(--ease-smooth);
}
.btn svg { width: 16px; height: 16px; }
.btn:hover {
  border-color: rgba(232, 163, 61, 0.6);
  color: var(--accent);
  background: linear-gradient(180deg, rgba(232, 163, 61, 0.14), rgba(232, 163, 61, 0.05));
}
.btn:active { transform: scale(0.96); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 主行动按钮：一屏只该有一个（生成决策卡 / 保存测评），用琥珀实底把主动作挑出来 */
.btn--accent {
  background: linear-gradient(180deg, rgba(232, 163, 61, 0.30), rgba(232, 163, 61, 0.16));
  border-color: var(--accent-line);
  color: var(--accent);
}
.btn--accent:hover {
  background: linear-gradient(180deg, rgba(232, 163, 61, 0.42), rgba(232, 163, 61, 0.24));
  color: #FFE0AE;
}

/* iOS 分段控件：内凹轨道 + 浮起的选中片 */
.segmented {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px; height: 36px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--r-sm);
}
.segmented__btn {
  height: 30px; padding: 0 var(--sp-3);
  border-radius: 7px;
  font-size: 13px; font-weight: 500; color: var(--text-dim);
  transition: background 160ms var(--ease-smooth), color 160ms var(--ease-smooth);
}
.segmented__btn:hover { color: var(--text-sub); }
.segmented__btn.is-on {
  background: linear-gradient(180deg, #2A3648, #1D2735);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

/* 卡片：材质顶光 + 悬停描边提亮（不做位移，数据面板要稳） */
.card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 42%),
    var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: var(--r-lg);
  box-shadow: var(--edge-light), 0 8px 28px rgba(0, 0, 0, 0.28);
  transition: border-color 240ms var(--ease-smooth), box-shadow 240ms var(--ease-smooth);
}
.card:hover {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: var(--edge-light), 0 10px 32px rgba(0, 0, 0, 0.34);
}
.card__head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-4) 0;
}
.card__title {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-sub); font-weight: 600;
  display: inline-flex; align-items: center; gap: var(--sp-1);
}
.card__title svg { width: 15px; height: 15px; color: var(--text-dim); }
.card__body { padding: var(--sp-4); }

/* ============ 页头 ============ */
/* 页头必须自己参与定位层：选择器面板是绝对定位元素，它的 z-index 只能在本层排序；
   页头若不在定位层，后面的卡片（静态流、DOM 在后）会按顺序盖住面板——实测就是这样。
   取 4：高于卡片与图表浮层（.tooltip 为 3），低于吸顶栏（5），
   这样内容滚入吸顶栏下方时仍是吸顶栏在上。 */
.pagehead {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-4) var(--sp-6);
  position: relative; z-index: 4;
}
/* min-width:0 让标题与工具区都能收缩：否则内部内容的最小宽度会顶宽整行，页头被撑变形 */
.pagehead__main { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1 1 340px; min-width: 0; }
/* 大标题：苹果产品页的 hero 标题——大字号、紧字距、银灰纵向渐变（钛金属质感） */
.pagehead__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 2.6vw, 40px);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.12;
  background: linear-gradient(180deg, #FFFFFF 22%, #A9B6C4 96%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pagehead__desc { margin: 0; color: var(--text-sub); font-size: 14px; max-width: 68ch; }
.pagehead__tools {
  margin-left: auto; display: flex; align-items: center; gap: var(--sp-2);
  flex-wrap: wrap; justify-content: flex-end; min-width: 0;
}

/* ============ 行情条 ============ */
/* 同一页里同宽的三张行情卡（实时层 / 行情条 / 结论条）上下叠着，各自的竖分隔线
   必须落在同一处。实时层早先用四等分（repeat(4, 1fr)），行情条与结论条用首格加权的
   1.2fr + 3×1fr，两者分隔线差 40 / 27 / 13px——同宽的卡片上下摞着却各画各的线，
   看起来就是「没对齐」。统一成同一套栅格：首格放最长的内容（32px 现价、行情源说明），
   加权给它；三张卡的换列断点也一并统一，窄屏才一起变成两列 / 一列。 */
.quote,
.quote--live {
  display: grid;
  grid-template-columns: minmax(240px, 1.2fr) repeat(3, minmax(150px, 1fr));
  overflow: hidden;
}
.quote__cell {
  padding: var(--sp-4);
  border-right: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: var(--sp-2);
  min-width: 0;
}
.quote__cell:last-child { border-right: 0; }
.quote__label {
  font-size: 12px; color: var(--text-dim); letter-spacing: 0.06em; font-weight: 500;
  display: inline-flex; align-items: center; gap: var(--sp-1);
}
.quote__label svg { width: 14px; height: 14px; }
/* 主价：hero 数字——display 字体 + 紧字距，苹果参数页的大数字语言 */
.quote__price {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 700; line-height: 1.05;
  letter-spacing: -0.02em;
}
.quote__unit { font-size: 12px; color: var(--text-dim); font-family: var(--font-body); margin-left: var(--sp-1); }
.quote__value {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 600; letter-spacing: -0.012em;
}
.quote__note { font-size: 12px; color: var(--text-sub); }
/* chip 之间留 8px：4px 时四个状态 chip 会连成一片，读不出是四个独立信号 */
.quote__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ============ 图表 ============ */
.chartcard { display: flex; flex-direction: column; }
.chartcard__head {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--hairline);
}
.chartcard__legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
.legend-item { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: 12px; color: var(--text-sub); }
.legend-swatch { width: 14px; height: 10px; border-radius: 3px; flex: none; }
.legend-swatch--buy { background: rgba(232, 163, 61, 0.22); border: 1px solid var(--accent); }
.legend-swatch--sell { background: rgba(232, 163, 61, 0.09); border: 1px dashed var(--accent); }
.legend-line { width: 16px; height: 0; border-top: 2px solid var(--text-sub); flex: none; }
.legend-line--dash { border-top-style: dashed; }
.legend-swatch--up { background: var(--up); }
.legend-swatch--down { background: var(--down); }

.chartcard__tools { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }

/* 合约情绪参考：K 线图上方的独立横条。
   刻意不做成卡片、不与价格带同族配色，避免被读成策略输出的一部分；
   它只是情绪面读数（资金费率 / 未平仓量 / 多空比 / 合约-指数基差）。 */
.csent {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: 12px; line-height: 1.5; min-height: 32px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* display:flex 会盖掉 [hidden] 的 display:none，必须显式关掉，否则未加载时也占一条空框 */
.csent[hidden] { display: none; }
/* 跨整行：与 K 线图卡同处一个网格节，自动排到图表上方且不改变左右列等高 */
.csent--row { grid-column: 1 / -1; margin: 0; }
.csent__tag {
  color: var(--text-sub); font-weight: 600;
  padding-right: var(--sp-3); border-right: 1px solid var(--hairline);
}
.csent__pair { display: inline-flex; align-items: baseline; gap: 6px; }
.csent__k { color: var(--text-dim); }
.csent__v { color: var(--text); font-family: var(--font-mono); }
.csent__v--up { color: var(--up); }
.csent__v--down { color: var(--down); }
.csent__note { color: var(--text-sub); }
.csent__hint { margin-left: auto; color: var(--text-dim); font-size: 11px; }
.csent__retry {
  height: 22px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-sub); font: inherit; font-size: 11px; cursor: pointer;
  transition: color 140ms var(--ease-smooth), border-color 140ms var(--ease-smooth);
}
.csent__retry:hover { color: var(--text); border-color: var(--text-dim); }
.csent__retry:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* 空态改成绝对定位后不再撑高容器，图表区没有 svg 时会塌成 0——
   给一个与窄屏档位一致的最小高度，加载态才有地方放骨架条。 */
.chartwrap { position: relative; min-height: 300px; padding: var(--sp-2) var(--sp-2) 0; }
.chartwrap svg { display: block; width: 100%; }
/* 图表空态 / 错误态浮在图上，而不是插进流里把卡片撑高——错误时下方仍显示回退的日线图，
   两段内容叠起来会明显跳版。背景取卡片底色，盖住下面的图。 */
.chart-empty {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center;
  /* 底色必须与卡片完全一致（含顶部那道受光渐变），否则浮层会显出一块色差 */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 42%),
    var(--surface);
  border-radius: var(--r-md);
}
.chart-empty[hidden] { display: none; }

.tooltip {
  position: absolute; z-index: 3;
  min-width: 176px;
  padding: var(--sp-3);
  background: rgba(16, 21, 29, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  font-size: 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 100ms ease-out;
}
.tooltip.is-on { opacity: 1; }
.tooltip__time { color: var(--text-sub); margin-bottom: var(--sp-2); letter-spacing: 0.02em; }
.tooltip__row { display: flex; justify-content: space-between; gap: var(--sp-4); }
.tooltip__row dt { color: var(--text-dim); }
.tooltip__row dd { margin: 0; font-family: var(--font-mono); }
.tooltip__sep { height: 1px; background: var(--hairline); margin: var(--sp-2) 0; }

.chartfoot {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--hairline);
  font-size: 12px; color: var(--text-dim);
}
.chartfoot__item { display: inline-flex; align-items: center; gap: var(--sp-1); }

/* ============ 网格布局 ============ */
/* 两列等高：K 线图卡与甜点价格卡同处一行，两者高度本就接近（宽屏实测 492 / 477），
   用 stretch 让矮的一侧补到等高，行末就不会留出一块空白。 */
.grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr);
  gap: var(--sp-6);
  align-items: stretch;
}
.col { display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; }
/* 列内只有一张卡时让它吃满列高、与对侧齐平；多张卡时仍按内容高度自然排列 */
.col > .card:only-child { flex: 1; }

/* ============ 甜点价格卡 ============ */
/* 与计算指标卡共用同一套「行」语言：相同的水平间距、相同的垂直内边距、相同的实线
   发丝分隔线。分隔线画在行与行之间而不是每行下边——原先用 .band:last-of-type 去尾线，
   但 :last-of-type 数的是同类兄弟，卡内最后一个 div 是图形条而非 .band，规则从未命中，
   卖出带行下面多出一条虚线与图形条贴在一起。 */
.band {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) 0;
}
.band + .band { border-top: 1px solid var(--hairline); }
.band__key { display: flex; flex-direction: column; gap: var(--sp-1); }
.band__name { font-size: 13px; color: var(--text); font-weight: 500; }
.band__hint { font-size: 12px; color: var(--text-dim); }
.band__val { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.band__val--buy { color: var(--accent); }
.band__val--sell { color: var(--text); }

.bandbar { margin-top: var(--sp-2); }
.bandbar__track {
  position: relative; height: 44px;
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.bandbar__zone { position: absolute; top: 0; bottom: 0; }
.bandbar__zone--buy {
  background: rgba(232, 163, 61, 0.18);
  border-left: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
}
.bandbar__zone--sell {
  background: rgba(232, 163, 61, 0.08);
  border-left: 1px dashed var(--accent);
  border-right: 1px dashed var(--accent);
}
/* 现价指针：琥珀细线 + 柔光，一眼定位「你在哪」 */
.bandbar__now {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(232, 163, 61, 0.55);
}
.bandbar__now::after {
  content: attr(data-label);
  position: absolute; top: -1px; left: var(--sp-1);
  font-size: 12px; font-family: var(--font-mono); font-weight: 600;
  color: var(--accent); white-space: nowrap;
}
.bandbar__now--end::after { left: auto; right: var(--sp-1); }
.bandbar__scale {
  display: flex; justify-content: space-between;
  margin-top: var(--sp-2);
  font-size: 12px; color: var(--text-dim);
  font-family: var(--font-mono);
}

/* ============ 指标表 ============ */
.kv { display: flex; flex-direction: column; }
/* 垂直内边距与甜点价格行一致（同 sp-3）：两卡上下相邻，行距节奏不同会让「标签 → 值」
   的扫视在卡片交界处断掉。 */
.kv__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--hairline);
}
.kv__row:last-child { border-bottom: 0; }
.kv__k { color: var(--text-sub); font-size: 13px; }
/* 值比标签大一级，与甜点价格的值（16px）构成同一个「值列」语言：两卡相邻时
   值的字重不该一张卡比标签重、另一张卡与标签同号。 */
.kv__v { font-family: var(--font-mono); font-size: 14px; }
/* 值内联口径备注：区间宽度的「长样本基准 · 新浪美股日线（不复权…）」全文近 40 字，
   原样塞进值列会折成三行、还把「回溯」一词从中间拆开。缩成小字单行放值尾，
   全文进 title 悬浮。窄屏物理放不下时独立成一小行，而不是在词中间断开。 */
.kv__note { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
@media (max-width: 768px) {
  .kv__note { display: block; margin-top: 2px; }
}
/* 分位参考：五个数值一行放不进右侧，退化为「标签行 + 数值行」。用类而不是内联样式，
   并与上方键值行共用同一套边距与发丝线，避免一卡之内出现两种行语言。 */
.kv--sub { margin-top: var(--sp-3); border-top: 1px solid var(--hairline); }
.kv--sub .kv__row { justify-content: flex-start; }
.kv--sub .kv__v { color: var(--text-sub); }
/* 指标表在整行卡片里排两列：8–9 行单列铺在 1100px 宽的卡片上，标签与值之间会空出
   六七百像素，扫视成本反而更高。窄屏（≤1180）维持单列。 */
@media (min-width: 1181px) {
  .kv:not(.kv--sub) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-8);
  }
  /* 两列后「末行」变成每列各自的最后一行：先恢复 :last-child 的底线，再去掉末尾两项
     的线（这两项正是两列各自的收尾行）。 */
  .kv:not(.kv--sub) .kv__row:last-child { border-bottom: 1px solid var(--hairline); }
  .kv:not(.kv--sub) .kv__row:nth-last-child(-n+2) { border-bottom: 0; }
}

/* ============ 依据说明 ============ */
.evidence {
  font-size: 13px; color: var(--text); line-height: 1.75;
  margin: var(--sp-4) 0 0; padding-top: var(--sp-3);
  border-top: 1px solid var(--hairline);
}
.rulelist { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.rule {
  display: flex; gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--accent-line);
  border-radius: var(--r-sm);
  font-size: 13px; color: var(--text-sub);
}
.rule--mute { border-left-color: var(--border); }
.rule__tag {
  flex: none; font-family: var(--font-mono); font-size: 12px;
  color: var(--accent); letter-spacing: 0.04em;
}
.rule--mute .rule__tag { color: var(--text-dim); }

.caveat {
  display: flex; gap: var(--sp-2);
  padding: var(--sp-3);
  margin-top: var(--sp-3);
  background: var(--down-dim);
  border: 1px solid rgba(217, 86, 78, 0.3);
  border-radius: var(--r-sm);
  font-size: 13px; color: #F5C6C0;
}
.caveat svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--down); }

.askai { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.askai__row { display: flex; gap: var(--sp-2); }
.askai__reply {
  padding: var(--sp-3);
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  font-size: 13px; color: var(--text-sub); line-height: 1.75;
}
/* 来源标注：模型生成 / 本地规则复述是两回事，必须在视觉上分开，
   否则用户会把兜底回复当成模型输出。 */
.askai__src {
  display: inline-block; margin-bottom: var(--sp-2);
  padding: 1px 8px; border-radius: 999px;
  font-size: 11px; letter-spacing: 0.02em;
  background: var(--surface-3);
  border: 1px solid var(--border); color: var(--text-dim);
}
.askai__src--model { border-color: var(--accent-line); color: var(--accent); }
.askai__note { font-size: 12px; color: var(--text-dim); }

/* ============ 免责声明 ============ */
.disclaimer {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.disclaimer__summary {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-4);
  font-size: 13px; color: var(--text-sub);
  cursor: pointer; list-style: none;
}
.disclaimer__summary::-webkit-details-marker { display: none; }
.disclaimer__summary svg { width: 16px; height: 16px; color: var(--text-dim); flex: none; }
.disclaimer__chev { margin-left: auto; display: inline-flex; transition: transform 160ms var(--ease-smooth); }
.disclaimer[open] .disclaimer__chev { transform: rotate(180deg); }
.disclaimer__body {
  padding: 0 var(--sp-4) var(--sp-4);
  font-size: 13px; color: var(--text-dim); line-height: 1.85;
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.disclaimer__body b { color: var(--text-sub); font-weight: 500; }

/* ============ 加载 / 空态 / toast ============ */
/* 骨架屏：surface-2 底 + 1.4s 呼吸。内容只做 visibility 隐藏，占位块绝对定位铺满，
   所以容器高度不变、取数回来时不会跳版。grid 容器改用块状占位，更像磁贴。 */
.is-skeleton { position: relative; color: transparent; }
.is-skeleton > *:not(.skel) { visibility: hidden; }
.skel {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.skel--grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-3); align-content: start;
}
.skel__bar {
  flex: 1 1 0; min-height: 24px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  animation: skelBreath 1.4s ease-in-out infinite;
}
.skel--grid .skel__bar { flex: none; min-height: 76px; }
@keyframes skelBreath {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  .skel__bar { animation: none; opacity: 0.7; }
}

/* 空态 / 错误态：居中图标 + 一句说明 + 一个动作按钮 */
.empty {
  padding: var(--sp-12) var(--sp-4);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  text-align: center; color: var(--text-dim); font-size: 13px;
  white-space: normal;
}
.empty__icon { display: flex; color: var(--text-dim); }
.empty__text { margin: 0; max-width: 44ch; line-height: 1.6; }
.empty__action { margin-top: var(--sp-1); }

.toast-host {
  position: fixed; right: var(--sp-6); bottom: var(--sp-6); z-index: 40;
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.toast {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(16, 21, 29, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 2px solid var(--accent);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-panel);
  font-size: 13px;
  animation: toastin 220ms var(--ease-out);
}
.toast svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
@keyframes toastin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ============ 首屏进场 ============ */
/* expo-out：苹果页面的进场曲线——起步快、收尾极慢，元素「滑入后稳稳停住」 */
.reveal { animation: reveal 640ms var(--ease-out) both; }
@keyframes reveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.reveal-1 { animation-delay: 50ms; }
.reveal-2 { animation-delay: 110ms; }
.reveal-3 { animation-delay: 170ms; }
.reveal-4 { animation-delay: 230ms; }
.reveal-5 { animation-delay: 290ms; }
.reveal-6 { animation-delay: 350ms; }
.reveal-7 { animation-delay: 410ms; }
.reveal-8 { animation-delay: 460ms; }
.reveal-9 { animation-delay: 510ms; }
.reveal-10 { animation-delay: 560ms; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ============ 响应式 ============ */
@media (max-width: 1180px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
}

/* ≤1024：侧栏改为顶部横向导航（不引入抽屉与汉堡图标，保持零外部依赖） */
@media (max-width: 1024px) {
  :root { --sidebar-w: 0px; }
  .app { display: flex; flex-direction: column; }
  .sidebar {
    position: static;
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: var(--sp-6);
    padding: var(--sp-3) var(--sp-4);
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
    overflow-x: auto;
  }
  .sidebar__foot { display: none; }
  .nav { flex-direction: row; align-items: center; gap: var(--sp-1); }
  .nav__label { display: none; }
  .nav__item {
    height: 34px;
    padding: 0 var(--sp-3);
    white-space: nowrap;
  }
  .main { margin-left: 0; }
  .content { padding: var(--sp-4); }
  .topbar { padding: 0 var(--sp-4); }
  .brand__sub { display: none; }
}

@media (max-width: 768px) {
  .quote { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .quote__cell { border-bottom: 1px solid var(--hairline); }
  .pagehead__tools { margin-left: 0; width: 100%; justify-content: flex-start; }
  .pagehead__title { font-size: 26px; }
  .quote__price { font-size: 24px; }
}

@media (max-width: 520px) {
  .quote { grid-template-columns: minmax(0, 1fr); }
  .quote__cell { border-right: 0; }
  .chartcard__tools { margin-left: 0; }
}

/* ============================================================
   以下为组合策略 / 风控监控 / 方法说明三页新增元件
   ============================================================ */

/* ---- 指标磁贴 ---- */
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; }
.stat {
  padding: var(--sp-4);
  border-right: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: var(--sp-2);
  min-width: 0;
}
.stat:last-child { border-right: 0; }
.stat__label {
  font-size: 12px; color: var(--text-dim); letter-spacing: 0.06em; font-weight: 500;
  display: inline-flex; align-items: center; gap: var(--sp-1);
}
.stat__label svg { width: 14px; height: 14px; }
.stat__value {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 600; letter-spacing: -0.012em;
}
.stat__note { font-size: 12px; color: var(--text-sub); }

/* ---- 文字色工具类（供数据驱动着色使用，避免内联样式） ---- */
.t-up { color: var(--up); }
.t-down { color: var(--down); }
.t-accent { color: var(--accent); }
/* 标记里一直在用 t-mute，但样式表里从未定义，导致「未采集 / 不适用」这类说明文字
   与正文同色、失去弱化层级。补上即可让估值卡与扫描页的弱化标记恢复原意。 */
.t-mute { color: var(--text-dim); }
.t-sub { color: var(--text-sub); }

/* ---- 权重条 ---- */
.wlist { display: flex; flex-direction: column; gap: var(--sp-4); }
.wrow__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-2);
}
.wrow__name { font-size: 13px; color: var(--text); font-weight: 500; }
.wrow__val { font-family: var(--font-mono); font-size: 13px; color: var(--accent); }
.wrow__track {
  height: 10px;
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  overflow: hidden;
}
.wrow__fill {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, rgba(232, 163, 61, 0.5), var(--accent));
  box-shadow: 0 0 8px rgba(232, 163, 61, 0.35);
}
.wrow__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  margin-top: var(--sp-2); font-size: 12px; color: var(--text-sub);
}

/* ---- 数据表 ---- */
.tablewrap { overflow-x: auto; }
.dtable { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 13px; }
/* 数据单元格一律不折行：扫描页 10 列共处一表时，「市场」列会被挤到一字一行竖排
   （th 本就有 nowrap，td 漏了）。放不下交给 .tablewrap 横向滚动，而不是把「美股」
   拆成两行。唯一的例外是空态说明（.empty 自己声明了 white-space: normal）。 */
.dtable th, .dtable td {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--hairline);
  text-align: left; vertical-align: middle;
  white-space: nowrap;
}
.dtable thead th {
  font-size: 12px; color: var(--text-sub); font-weight: 600;
  letter-spacing: 0.06em; white-space: nowrap;
}
/* 数值列表头与数据同侧右对齐：表头靠左而数字靠右时，整列在视觉上是拧的
   （.dtable .num 对 thead th 同样生效）。表头是中文文案，不跟等宽字体。 */
.dtable thead th.num { text-align: right; font-family: var(--font-body); }
.dtable tbody th { font-weight: 500; color: var(--text); white-space: nowrap; }
.dtable tbody tr { transition: background 140ms var(--ease-smooth); }
.dtable tbody tr:hover { background: rgba(255, 255, 255, 0.04); }
.dtable .num { font-family: var(--font-mono); text-align: right; white-space: nowrap; }
.dtable .hl { color: var(--accent); font-family: var(--font-mono); }
.dtable tfoot td { color: var(--text-sub); }

/* ---- 告警 ---- */
.alerts { display: flex; flex-direction: column; gap: var(--sp-2); }
.alert {
  display: flex; gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--border);
  border-radius: var(--r-sm);
}
.alert svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--text-dim); }
.alert__body { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.alert__title {
  font-size: 13px; color: var(--text); font-weight: 500;
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
}
.alert__detail { font-size: 12px; color: var(--text-sub); line-height: 1.7; }
.alert--high { border-left-color: var(--down); background: var(--down-dim); }
.alert--high svg { color: var(--down); }
.alert--warn { border-left-color: var(--accent); background: var(--accent-dim); }
.alert--warn svg { color: var(--accent); }
.alert--ok { border-left-color: var(--up); }
.alert--ok svg { color: var(--up); }

/* ---- 数据管道 ---- */
.pipe { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pipe__step {
  flex: 1 1 152px; min-width: 0;
  padding: var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  display: flex; flex-direction: column; gap: var(--sp-1);
}
.pipe__step--core { background: var(--accent-dim); border-color: var(--accent-line); }
.pipe__idx { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); }
.pipe__step--core .pipe__idx { color: var(--accent); }
.pipe__name { font-size: 13px; color: var(--text); font-weight: 500; }
.pipe__desc { font-size: 12px; color: var(--text-sub); line-height: 1.7; }

/* ---- 参数规格 ---- */
.spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-6); }
.spec__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4); padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--hairline);
}
.spec__k { font-size: 13px; color: var(--text-sub); min-width: 0; }
.spec__v { font-family: var(--font-mono); font-size: 13px; color: var(--text); white-space: nowrap; }

/* ---- 实现边界 ---- */
.boolgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
.boolcard__head {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 13px; color: var(--text); font-weight: 500; margin-bottom: var(--sp-3);
}
.boolcard__head svg { width: 16px; height: 16px; }
.boolcard--yes .boolcard__head svg { color: var(--up); }
.boolcard--no .boolcard__head svg { color: var(--text-dim); }
.boolist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.boolist li { display: flex; gap: var(--sp-2); font-size: 13px; color: var(--text-sub); line-height: 1.75; }
.boolist li::before {
  content: ""; flex: none;
  width: 6px; height: 6px; margin-top: 8px;
  border-radius: 50%; background: var(--text-dim);
}
.boolcard--yes .boolist li::before { background: var(--up); }

/* ---- 说明块 ---- */
.note {
  display: flex; gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  font-size: 13px; color: var(--text-sub); line-height: 1.75;
}
.note svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--text-dim); }
.note strong { color: var(--text); font-weight: 500; }

/* ---- 小节标题 ---- */
.h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: var(--sp-2);
}
.h3 svg { width: 16px; height: 16px; color: var(--text-dim); }
.h3__sub { margin: 0; font-size: 13px; color: var(--text-sub); }
.stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.ml-auto { margin-left: auto; }

/* ---- 代码块 ---- */
.code {
  display: block;
  padding: var(--sp-3);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.9;
  color: var(--text-sub);
  white-space: pre;
  overflow-x: auto;
}

@media (max-width: 1024px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .boolgrid { grid-template-columns: minmax(0, 1fr); }
  .spec { grid-template-columns: minmax(0, 1fr); }
  .pipe__step { flex: 1 1 100%; }
}

@media (max-width: 520px) {
  .stat-grid { grid-template-columns: minmax(0, 1fr); }
  .stat { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .stat:last-child { border-bottom: 0; }
}

/* ---- 实时层行情条 ----
   栅格与 .quote 合并在上面：三张同宽卡片必须共用一套列宽，分隔线才对得齐。
   扫描页的 #scanBar 另有加权栅格（「触发统计」格要放 4 个状态 chip），见宽屏断点。 */
/* 扫描页的「触发统计」格要放 4 个状态 chip（实测需要 335px），等宽列在 1300px 内容宽下
   只有 325px，会折成两行并把整条 bar 撑高、与相邻格不齐（实测 139px 对 100px）。只给
   这一页加权：投研面板的行情条首格是较长的行情源说明，压窄它反而会折行。
   必须收在宽屏断点里——id 选择器特异性高于下面窄屏媒体查询里的类选择器，
   不收起来会把「≤768 两列 / ≤520 单列」的规则一并压掉。 */
@media (min-width: 1181px) {
  #scanBar { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---- 标的选择器：55 只标的平铺成药丸行既难选也会把页头撑变形 ----
   面板绝对定位在按钮下方，跨市场检索并按市场分组；宽度对齐按钮并限制在视口内。 */
.picker { position: relative; }
.picker__btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: 36px; padding: 0 var(--sp-3) 0 var(--sp-4);
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  color: var(--text);
  font-size: 13px; font-weight: 500; max-width: min(320px, 60vw);
  transition: border-color 160ms var(--ease-smooth), transform 120ms var(--ease-smooth);
}
.picker__btn:hover { border-color: rgba(232, 163, 61, 0.6); }
.picker__btn:active { transform: scale(0.97); }
.picker__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.picker__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker__meta {
  flex: none; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim);
  padding-left: var(--sp-2); border-left: 1px solid var(--hairline);
}
.picker__caret { flex: none; color: var(--text-dim); transition: transform 200ms var(--ease-out); }
.picker__btn[aria-expanded="true"] .picker__caret { transform: rotate(180deg); }
/* 面板：苹果菜单式重毛玻璃 + 大圆角 + 深投影 */
.picker__panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  width: min(380px, calc(100vw - 2 * var(--sp-4)));
  background: rgba(18, 24, 33, 0.92);
  backdrop-filter: blur(28px) saturate(170%);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
  animation: panelin 260ms var(--ease-out);
}
@keyframes panelin { from { opacity: 0; transform: translateY(-6px) scale(0.985); } to { opacity: 1; transform: none; } }
/* 按钮贴近屏幕底部时向上展开（由 app.js 的 placePicker 判断） */
.picker__panel--up { top: auto; bottom: calc(100% + 8px); }
.picker__search {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--hairline);
  color: var(--text-dim);
}
.picker__search input {
  flex: 1; min-width: 0; height: 30px; background: transparent;
  border: 0; outline: none; color: var(--text); font-size: 13px;
}
.picker__search input::placeholder { color: var(--text-dim); }
.picker__list { max-height: min(300px, 50vh); overflow-y: auto; scrollbar-width: thin; }
/* 分组头不吸顶：吸顶的标题会在滚动时钉在列表顶部，下面却已经换成另一个市场的
   标的，读起来就像「加密」组里混进了美股。标题跟自己的行一起滚，分组才对得上。 */
.picker__group {
  padding: 6px var(--sp-3);
  font-size: 11px; letter-spacing: 0.08em; color: var(--text-dim);
  background: rgba(18, 24, 33, 0.96); border-bottom: 1px solid var(--hairline);
}
.picker__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center; gap: var(--sp-2);
  padding: 7px var(--sp-3); cursor: pointer;
  transition: background 120ms var(--ease-smooth);
}
.picker__row:hover, .picker__row.is-focus { background: rgba(255, 255, 255, 0.06); }
.picker__row.is-cur { background: var(--accent-dim); color: var(--accent); }
.picker__row.is-cur .picker__code, .picker__row.is-cur .picker__px { color: var(--accent); }
.picker__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.picker__code {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-sub);
  min-width: 46px; text-align: right;
}
.picker__px { font-family: var(--font-mono); font-size: 12px; min-width: 62px; text-align: right; }
.picker__chg {
  font-family: var(--font-mono); font-size: 11px;
  min-width: 52px; text-align: right;
}
.picker__empty { padding: var(--sp-4); font-size: 12px; color: var(--text-dim); }
.picker__hint {
  padding: 6px var(--sp-3); border-top: 1px solid var(--hairline);
  font-size: 11px; color: var(--text-dim);
}

@media (max-width: 520px) {
  .picker__btn { max-width: 100%; }
  .picker__panel { width: calc(100vw - 2 * var(--sp-4)); }
}

/* ---- 可点击行（标的扫描） ---- */
.dtable tbody tr.is-clickable { cursor: pointer; }
.dtable tbody tr.is-clickable:hover { background: rgba(232, 163, 61, 0.07); }
.dtable tbody tr.is-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---- 区间历史证据（嵌在甜点价格卡内） ---- */
.evidence__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); margin-bottom: var(--sp-3); flex-wrap: wrap;
}
.evidence__title { font-size: 12px; color: var(--text-dim); letter-spacing: 0.06em; }
.evidence__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.evidence__grid span {
  display: flex; flex-direction: column; gap: var(--sp-1);
  font-size: 12px; color: var(--text-sub);
}
.evidence__grid b {
  font-family: var(--font-mono); font-size: 16px; font-weight: 500; color: var(--text);
}
.evidence__note { margin-top: var(--sp-3); font-size: 12px; line-height: 1.6; color: var(--text-sub); }
.evidence__note b { font-weight: 500; }

/* ---- 估值情景（EPS × PE）：整行横栏，聚焦单标的的三档卡 ---- */
/* 横栏宽屏分两栏：左栏三档卡（把多出来的宽度给卡片本身，而不是把三张卡拉到 400px
   宽），右栏放采集元信息与口径声明；明细、来源与告警跨栏收尾。窄屏退回单列，
   见文件末尾的媒体查询，DOM 结构不变。 */
.val {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(248px, 1fr);
  gap: var(--sp-4) var(--sp-6);
  align-items: start;
}
.val__cards, .val__facts {
  display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0;
}
.val__foot { grid-column: 1 / -1; min-width: 0; }
/* 右栏的采集元信息由横排改竖排，避免在窄栏里折成难读的多行碎片 */
.val__facts .valmeta { flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 0; }
/* 无可用区间 / 不适用时注入的是整段说明，限制行宽避免在 1200px 横栏里拉成一行 */
#valBody > .valnote { max-width: 92ch; }
/* 刷新预期按钮行：左右与 card__body 对齐，贴住卡片底部 */
.valfoot {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: 0 var(--sp-4) var(--sp-4);
}
.valfy-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.valfy-tab {
  height: 26px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: 12px; font-family: var(--font-mono); color: var(--text-sub);
  transition: border-color 140ms var(--ease-smooth), color 140ms var(--ease-smooth),
    background 140ms var(--ease-smooth);
}
.valfy-tab:hover:not(:disabled) { border-color: var(--accent-line); color: var(--text); }
.valfy-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.valfy-tab[aria-pressed="true"] {
  background: var(--accent-dim); border-color: var(--accent-line); color: var(--accent);
}
.valfy-tab:disabled { opacity: 0.45; cursor: not-allowed; }

/* 三档卡：悲观（跌色）/ 中性（琥珀）/ 乐观（涨色），价格字号随容器收缩。
   苹果参数页的三卡语言：更大的数字、顶光材质、选中档位发光描边。 */
.valscn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.valscn--single { grid-template-columns: 1fr; }
.valscn__card {
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0) 55%),
    var(--surface-2);
  box-shadow: var(--edge-light);
  padding: var(--sp-3);
  transition: border-color 200ms var(--ease-smooth), box-shadow 200ms var(--ease-smooth);
}
.valscn__card.is-near {
  border-color: var(--accent-line);
  box-shadow: var(--edge-light), inset 0 0 0 1px var(--accent-line),
    0 0 24px rgba(232, 163, 61, 0.12);
}
.valscn__label { font-size: 12px; letter-spacing: 0.08em; color: var(--text-sub); }
.valscn__price {
  font-family: var(--font-display); font-weight: 700; line-height: 1.2;
  font-size: clamp(20px, 2.4vw, 28px); font-variant-numeric: tabular-nums;
  letter-spacing: -0.018em;
}
.valscn__card--low .valscn__price { color: var(--down); }
.valscn__card--mid .valscn__price { color: var(--accent); }
.valscn__card--high .valscn__price { color: var(--up); }
.valscn__dist { font-size: 12px; font-family: var(--font-mono); }
.valscn__basis { font-size: 11px; font-family: var(--font-mono); color: var(--text-dim); }
.valfy { border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--sp-3); }
.valfy__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); margin-bottom: var(--sp-2);
}
.valfy__fy { font-size: 13px; letter-spacing: 0.04em; color: var(--text); }
/* 估值表只有 2–4 列，不需要扫描页那种 560px 下限；下限过大时会把卡片栏撑破。
   宽度交给 .tablewrap 兜底：真挤不下就横向滚动，而不是撑坏布局。 */
.dtable--val { min-width: 0; }
.dtable--val th, .dtable--val td { padding: 6px 8px; font-size: 12px; text-align: right; }
.dtable--val th:first-child, .dtable--val td:first-child {
  text-align: left; color: var(--text-dim); font-weight: 400;
}
.dtable--val tbody th { font-family: var(--font-mono); color: var(--text-sub); }
.dtable--val td.is-mid { background: rgba(232, 163, 61, 0.10); color: var(--text); }
.dtable--val td.is-near {
  outline: 1px solid var(--accent); outline-offset: -1px; color: var(--accent);
}
.valmeta {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-3); font-size: 12px; color: var(--text-sub);
}
.valsrc { margin-top: var(--sp-2); font-size: 12px; line-height: 1.8; color: var(--text-sub); }
.valsrc a { color: var(--text-sub); text-decoration: underline; text-underline-offset: 2px; }
.valsrc a:hover { color: var(--accent); }
.valnote { margin-top: var(--sp-2); font-size: 12px; line-height: 1.6; color: var(--text-dim); }
.valwarn { margin: 6px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.65; color: var(--text-dim); }
.valwarn li { margin-bottom: 4px; }
.valdetails { margin-top: var(--sp-2); font-size: 12px; color: var(--text-dim); }
.valdetails summary {
  cursor: pointer; color: var(--text-sub); padding: 4px 0;
}
.valdetails summary:hover { color: var(--accent); }

@media (max-width: 520px) {
  .evidence__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 估值横栏的窄屏回退：必须排在 .val 主定义之后。同特异性下后出现者胜，写在前面的
   媒体查询会被主定义的两栏覆盖，实测窄视口下左栏只剩 149px、三档卡挤成一列数字。 */
@media (max-width: 1180px) {
  .val { grid-template-columns: minmax(0, 1fr); }
  .val__facts .valmeta {
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  }
}

/* ============================================================
   决策支持元件（v3）：决策清单 / 决策卡 / 反方观点 / 数据溯源 /
   多轮追问 / 持仓体检 / 决策简报 / 风险偏好测评
   —— 一律复用上面的色板与间距，不引入新的魔法值
   ============================================================ */

/* ---- 通用输入控件（此前只有 picker 内的搜索框，这里补一个通用款） ---- */
.input {
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.input:focus { outline: none; border-color: var(--accent-line); }
.input::placeholder { color: var(--text-dim); }
select.input { appearance: none; padding-right: 30px; cursor: pointer; }
.input-wrap { position: relative; display: block; }
.input-wrap svg {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--text-dim); pointer-events: none;
}

/* ---- 卡片头部的次要动作区 ---- */
.card__tools { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }

/* ---- 决策助手整体：左右两栏，窄屏落成一栏 ---- */
.decide { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--sp-6); }
@media (max-width: 1180px) { .decide { grid-template-columns: minmax(0, 1fr); } }

/* ---- 决策清单：五步判定 ---- */
.steps { display: flex; flex-direction: column; gap: var(--sp-2); }
.step {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--surface-2);
  border-left: 3px solid var(--border);
}
.step--pass { border-left-color: var(--up); }
.step--watch { border-left-color: var(--accent); }
.step--fail { border-left-color: var(--down); }
.step__idx {
  flex: none; width: 22px; height: 22px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px;
  background: var(--surface-3); color: var(--text-sub);
}
.step--pass .step__idx { background: var(--up-dim); color: var(--up); }
.step--watch .step__idx { background: var(--accent-dim); color: var(--accent); }
.step--fail .step__idx { background: var(--down-dim); color: var(--down); }
.step__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.step__label { font-size: 13px; font-weight: 500; color: var(--text); display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.step__value { font-family: var(--font-mono); font-size: 12px; color: var(--text-sub); }
.step__note { font-size: 12px; color: var(--text-dim); line-height: 1.65; }
.step__status { flex: none; }
.steps__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); }

/* ---- 决策卡 ---- */
.dcard {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  box-shadow: var(--edge-light);
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.dcard__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.dcard__verdict { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.dcard__sub { font-size: 12px; color: var(--text-dim); }
.dcard__rows { display: flex; flex-direction: column; }
.dcard__row {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--hairline);
  font-size: 13px;
}
.dcard__row:last-child { border-bottom: 0; }
.dcard__k { color: var(--text-sub); min-width: 0; }
.dcard__v { font-family: var(--font-mono); color: var(--text); white-space: nowrap; }
.dcard__note { font-size: 12px; color: var(--text-sub); line-height: 1.7; }
.dcard__foot { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

/* ---- 反方观点（红队） ---- */
.rt { display: flex; flex-direction: column; gap: var(--sp-2); }
.rt__item {
  display: flex; gap: var(--sp-3); padding: var(--sp-3);
  border-radius: var(--r-md); background: var(--surface-2);
}
.rt__tag {
  flex: none; align-self: flex-start; white-space: nowrap;
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text-dim);
}
.rt__item--high .rt__tag { color: var(--down); border-color: rgba(217, 86, 78, 0.35); background: var(--down-dim); }
.rt__item--warn .rt__tag { color: var(--accent); border-color: var(--accent-line); background: var(--accent-dim); }
.rt__item--info .rt__tag { color: var(--text-sub); }
.rt__item--ok .rt__tag { color: var(--up); border-color: rgba(53, 192, 142, 0.35); background: var(--up-dim); }
.rt__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rt__title { font-size: 13px; color: var(--text); }
.rt__detail { font-size: 12px; color: var(--text-sub); line-height: 1.7; }

/* ---- 数据溯源 ---- */
.trace tbody tr.is-hit { background: var(--accent-dim); }
.trace__src { color: var(--text-sub); }
.trace__src b { color: var(--text); font-weight: 500; }
.trace-note { margin-top: var(--sp-3); font-size: 12px; color: var(--text-dim); line-height: 1.7; }

/* ---- 多轮追问 ---- */
.chat { display: flex; flex-direction: column; gap: var(--sp-3); }
.chat__thread {
  display: flex; flex-direction: column; gap: var(--sp-2);
  max-height: 340px; overflow-y: auto; padding-right: var(--sp-1);
}
.chat__msg {
  padding: var(--sp-3); border-radius: var(--r-md);
  font-size: 13px; line-height: 1.75; max-width: 94%;
  white-space: pre-wrap;
}
.chat__msg--me { align-self: flex-end; background: var(--accent-dim); border: 1px solid var(--accent-line); }
.chat__msg--ai { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--hairline); }
.chat__msg--err { align-self: flex-start; background: var(--down-dim); border: 1px solid rgba(217, 86, 78, 0.35); color: var(--text); }
.chat__meta { display: block; font-size: 11px; color: var(--text-dim); margin-bottom: var(--sp-1); }
.chat__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chat__chip {
  font-size: 12px; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text-sub); background: var(--surface-2);
}
.chat__chip:hover { color: var(--accent); border-color: var(--accent-line); }
.chat__chip:disabled { opacity: 0.45; cursor: not-allowed; }
.chat__form { display: flex; gap: var(--sp-2); align-items: center; }
.chat__form .btn { flex: none; }

/* ---- 风险画像测评 ---- */
.quiz { display: flex; flex-direction: column; gap: var(--sp-6); }
.quiz__q { display: flex; flex-direction: column; gap: var(--sp-2); }
.quiz__label { font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.65; }
.quiz__label .chip { margin-left: var(--sp-1); vertical-align: 1px; }
.quiz__hint { font-size: 12px; color: var(--text-dim); line-height: 1.65; }
/* 选项在宽卡片里三列并排：把四题从「竖排 12 个按钮」压成四行，明显减少密度 */
.quiz__opts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2); margin-top: var(--sp-1);
}
@media (max-width: 1024px) { .quiz__opts { grid-template-columns: minmax(0, 1fr); } }
.quiz__opt {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-2); font-size: 13px; line-height: 1.5;
  color: var(--text-sub); text-align: left;
}
.quiz__opt:hover { border-color: var(--accent-line); color: var(--text); }
.quiz__opt.is-on { border-color: var(--accent); background: var(--accent-dim); color: var(--text); }
.quiz__dot {
  flex: none; width: 14px; height: 14px; border-radius: 999px;
  border: 1.5px solid var(--border);
}
.quiz__opt.is-on .quiz__dot { border-color: var(--accent); background: var(--accent); }
/* 操作区与题目之间用分隔线断开：按钮不与选项挤在一起，说明另起一行 */
.quiz__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-6); padding-top: var(--sp-4);
  border-top: 1px solid var(--hairline);
}
.quiz__note { margin-top: var(--sp-3); }
#quizResult:not(:empty) { margin-top: var(--sp-6); }
.quiz__result {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-4); border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border);
}
.quiz__rlabel { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.quiz__rsum { font-size: 13px; color: var(--text-sub); line-height: 1.7; }
.quiz__thr { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ---- 持仓体检 ---- */
.hc { display: flex; flex-direction: column; gap: var(--sp-4); }
.hc__rows { display: flex; flex-direction: column; gap: var(--sp-2); }
.hc__row { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.9fr) auto; gap: var(--sp-2); align-items: center; }
.hc__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.hc__sum { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2); font-size: 12px; color: var(--text-sub); }
.hc__sum b { color: var(--text); font-family: var(--font-mono); font-weight: 500; }
.hc__empty { font-size: 12px; color: var(--text-dim); }
.hc__name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hc__title { font-size: 13px; color: var(--text); font-weight: 500; }
.hc__meta { font-size: 12px; color: var(--text-dim); }
.hc__del { flex: none; color: var(--text-dim); padding: 4px; border-radius: var(--r-sm); }
.hc__del:hover { color: var(--down); }
.hc__pool { width: auto; min-width: 150px; }
@media (max-width: 520px) { .hc__row { grid-template-columns: minmax(0, 1fr) auto; } }

/* ---- 决策简报页 ---- */
.brief { display: flex; flex-direction: column; gap: var(--sp-3); }
.brief__ghead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: 13px; color: var(--text-sub); }
.brow {
  display: grid; grid-template-columns: minmax(0, 1.5fr) auto;
  gap: var(--sp-2) var(--sp-4); align-items: center;
  padding: var(--sp-3); border-radius: var(--r-md);
  background: var(--surface-2); border-left: 3px solid var(--border);
  cursor: pointer; transition: background 140ms var(--ease-smooth);
}
.brow:hover { background: var(--surface-3); }
.brow--buy { border-left-color: var(--accent); }
.brow--risk { border-left-color: var(--down); }
.brow--ok { border-left-color: var(--up); }
.brow--mute { border-left-color: var(--border); }
.brow__main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.brow__name { font-size: 13px; font-weight: 500; color: var(--text); }
.brow__note { font-size: 12px; color: var(--text-dim); line-height: 1.6; }
.brow__val { font-family: var(--font-mono); font-size: 12px; color: var(--text-sub); white-space: nowrap; }

/* ---- 每日简报：与上一份基线对比 ---- */
.dbrief__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.dbrief__sum {
  margin: var(--sp-3) 0 var(--sp-4);
  font-size: 13px; color: var(--text-sub); line-height: 1.75;
}
.dbrief__stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-2); margin-bottom: var(--sp-4);
}
.dstat {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-2);
}
.dstat__label { font-size: 12px; color: var(--text-dim); }
.dstat__value {
  font-family: var(--font-display); font-size: 18px; font-weight: 600;
  letter-spacing: -0.012em;
}
.dstat__note { font-size: 12px; color: var(--text-sub); line-height: 1.5; }
@media (max-width: 760px) { .dbrief__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- 风险画像：四维条 ---- */
.pdim { display: flex; flex-direction: column; gap: var(--sp-2); }
.pdim__row {
  display: grid; grid-template-columns: 68px minmax(0, 1fr) auto;
  align-items: center; gap: var(--sp-3);
}
.pdim__label { font-size: 12px; color: var(--text-sub); }
.pdim__track {
  height: 6px; border-radius: 999px; overflow: hidden;
  background: var(--surface-3); border: 1px solid var(--hairline);
}
.pdim__fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.pdim__val { font-family: var(--font-mono); font-size: 12px; color: var(--text-sub); white-space: nowrap; }
.quiz__adjust {
  font-size: 12px; color: var(--text-sub); line-height: 1.7;
  padding-top: var(--sp-2); border-top: 1px solid var(--hairline);
}

/* ---- 决策日志 ---- */
.log { display: flex; flex-direction: column; gap: var(--sp-2); }
.log__item {
  display: flex; gap: var(--sp-3); padding: var(--sp-3);
  border-radius: var(--r-md); background: var(--surface-2);
  border-left: 3px solid var(--border);
}
.log__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.log__title { font-size: 13px; color: var(--text); }
.log__meta { font-size: 12px; color: var(--text-dim); }
.log__del { flex: none; color: var(--text-dim); padding: 4px; border-radius: var(--r-sm); }
.log__del:hover { color: var(--down); }

/* ---- 顶部风险偏好小胶囊（可点，跳到简报页测评） ---- */
.profile-chip { cursor: pointer; }
.profile-chip:hover { color: var(--text); }

/* ---- 通用小标记 ---- */
.mini-note { font-size: 12px; color: var(--text-dim); line-height: 1.7; }
.split-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
@media (max-width: 1180px) { .split-2 { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   AI 多角色研判（agents.html）
   一条竖排流水线：四张角色卡依次出场。状态靠卡片左侧色条区分，
   不靠文字颜色——驳回与通过要一眼看出来，而不是读一遍才知道。
   ============================================================ */

/* ---- 输入区 ---- */
/* 用 flex 排，不用等分栅格：站内的分段控件与选择器都是按内容宽度排的
   （见 .hc__pool 的 width:auto + min-width）。把它们拉满一列会变成
   两三个字撑满 150px 的宽条，看着就是不对。各控件保持本来大小，
   「补充说明」吃掉该行剩余宽度，右边缘自然齐。 */
.ag-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-4);
  /* 整表单收一个宽度上限：不然超宽屏下「补充说明」会把剩余宽度全吃掉 */
  max-width: 900px;
}
.ag-field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
/* 标的是一个按内容宽度的药丸选择器（与投研面板页头同款），不参与拉伸 */
.ag-field--sym { flex: 0 1 auto; min-width: 0; }
.ag-field--pos { flex: 0 0 110px; }
.ag-field--wide { flex: 1 1 240px; }
.ag-field__label { font-size: 12px; color: var(--text-dim); font-weight: 500; letter-spacing: 0.04em; }

.ag-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-4);
}
/* 说明压到两行以内：模型调用次数与口径是必须说的，额度上限顶栏已经有一个胶囊了 */
.ag-note { margin-top: var(--sp-3); max-width: 72ch; }

/* 输入控件一律用站内通用款 .input（成交复核 / 组合体检同款），
   这里只补百分比单位的位置，不再另起一套输入框样式 */
.input-wrap .input { padding-right: var(--sp-8); }
.ag-unit {
  position: absolute; right: var(--sp-3); top: 50%; transform: translateY(-50%);
  font-size: 12px; color: var(--text-dim); pointer-events: none;
}

/* 标的直接用投研面板（index）那套 picker，控件本身一字不改：
   药丸按钮保持站内原本的紧凑尺寸，毛玻璃面板 / 行布局 / 间距全部复用同一套样式，
   不在这里撑宽、不另起尺寸——先前把按钮拉满字段宽度，才显得跟站内不是一套东西。
   唯一的区别是面板锚点：页头的 picker 贴右缘、面板向左展开；表单里的 picker 靠左，
   面板改从左缘展开，否则 380px 宽的面板在窄屏下会溢出视口左边。 */
.ag-field--sym .picker__panel { left: 0; right: auto; }

/* 面板要真的浮在文本之上：卡片带 .reveal 进场动画，动画算出来的 transform 不是 none，
   卡片因此自成层叠上下文——面板的 z-index:40 只能在这一层里排序，管不到外面的
   .pagehead(z-index:4)。实测结果就是页头大标题压在面板上、文字穿透面板。
   给卡片自己一个与页头同级、靠 DOM 顺序（卡片在后）胜出的层级即可；
   不能取 5，否则滚动时卡片会盖住吸顶导航（.topbar 为 5）。 */
.card--picker { position: relative; z-index: 4; }

/* ---- 流水线：四张角色卡 ---- */
.ag-flow { display: flex; flex-direction: column; gap: var(--sp-3); }

.turn {
  position: relative;
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  padding-left: calc(var(--sp-4) + 3px);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  transition: border-color 200ms var(--ease-smooth), background 200ms var(--ease-smooth);
}
/* 左侧色条就是状态位：等待=中性，进行中=琥珀，通过=绿，驳回/失败=红 */
.turn::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
  border-radius: 0 3px 3px 0; background: rgba(255, 255, 255, 0.10);
  transition: background 200ms var(--ease-smooth);
}
.turn[data-state="running"] { border-color: var(--accent-line); }
.turn[data-state="running"]::before { background: var(--accent); }
.turn[data-state="pass"]::before { background: var(--up); }
.turn[data-state="reject"]::before, .turn[data-state="failed"]::before { background: var(--down); }
.turn[data-state="reject"], .turn[data-state="failed"] { border-color: rgba(217, 86, 78, 0.30); }
.turn[data-state="skipped"] { background: rgba(255, 255, 255, 0.015); border-style: dashed; }
.turn[data-state="idle"] .turn__name,
.turn[data-state="skipped"] .turn__name { color: var(--text-dim); }

.turn__head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.turn__idx {
  flex: none; width: 20px; height: 20px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-family: var(--font-mono); font-weight: 600;
  background: rgba(255, 255, 255, 0.06); color: var(--text-dim);
}
.turn__name { font-size: 14px; font-weight: 600; color: var(--text); }
.turn__short { font-size: 12px; color: var(--text-dim); }
.turn__body { margin-top: var(--sp-3); }
.turn__foot {
  margin-top: var(--sp-3); padding-top: var(--sp-2);
  border-top: 1px solid var(--hairline);
  font-size: 11px; color: var(--text-dim); font-family: var(--font-mono);
  min-height: 1px;
}
.turn__foot:empty { display: none; }

/* ---- 轮次内容 ---- */
.ag-text { font-size: 13px; color: var(--text-sub); line-height: 1.75; white-space: pre-line; }

.ag-rows {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-3); margin: 0 0 var(--sp-3);
}
.ag-rows dt { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.ag-rows dd { margin: 0; font-size: 13px; color: var(--text); line-height: 1.7; }

.ag-block { margin-bottom: var(--sp-3); }
.ag-block__title {
  font-size: 12px; color: var(--text-dim); font-weight: 500;
  letter-spacing: 0.04em; margin-bottom: var(--sp-2);
}
.ag-list { margin: 0; padding-left: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); }
.ag-list li { font-size: 13px; color: var(--text-sub); line-height: 1.7; }

.ag-warn {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--down-dim);
  border: 1px solid rgba(217, 86, 78, 0.30);
  color: var(--down); font-size: 12px; line-height: 1.6;
}
.ag-warn svg { flex: none; margin-top: 2px; }
.ag-warn--calm {
  background: var(--accent-dim);
  border-color: var(--accent-line);
  color: var(--accent);
}

/* 审查结论横幅：通过与驳回用色块区分，不靠读文字 */
.ag-verdict {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  margin-bottom: var(--sp-3);
  font-size: 13px; font-weight: 600;
}
.ag-verdict svg { flex: none; }
.ag-verdict.is-pass { background: var(--up-dim); border: 1px solid rgba(53, 192, 142, 0.35); color: var(--up); }
.ag-verdict.is-reject { background: var(--down-dim); border: 1px solid rgba(217, 86, 78, 0.35); color: var(--down); }
.ag-verdict__note { font-weight: 400; font-size: 12px; opacity: 0.85; }

.ag-gates { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.ag-gate {
  display: grid; grid-template-columns: 96px auto minmax(0, 1fr);
  gap: var(--sp-3); align-items: center;
  padding: var(--sp-2) var(--sp-3);
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
}
.ag-gate__name { font-size: 13px; color: var(--text); }
.ag-gate__note { font-size: 12px; color: var(--text-dim); line-height: 1.6; }

.ag-next {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
  background: var(--accent-dim);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-sm);
  font-size: 13px; color: var(--text); line-height: 1.7;
}
.ag-next svg { flex: none; margin-top: 3px; color: var(--accent); }

@media (max-width: 760px) {
  .ag-gate { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
  .ag-rows { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
  .ag-rows dt { margin-top: var(--sp-2); }
}

/* ---- 角色定义原文 ---- */
.ag-defs { display: flex; flex-direction: column; gap: var(--sp-2); }
.ag-def {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.ag-def[open] { border-color: rgba(255, 255, 255, 0.16); }
.ag-def__summary {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer; list-style: none;
  font-size: 13px; color: var(--text);
}
.ag-def__summary::-webkit-details-marker { display: none; }
.ag-def__summary svg { flex: none; color: var(--text-dim); transition: transform 200ms var(--ease-smooth); }
.ag-def[open] .ag-def__summary svg { transform: rotate(180deg); }
.ag-def__name { font-weight: 600; }
.ag-def__short { color: var(--text-dim); font-size: 12px; }
.ag-def__file {
  margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim);
}
.ag-def__body {
  margin: 0; padding: 0 var(--sp-4) var(--sp-4);
  font-family: var(--font-mono); font-size: 11px; line-height: 1.75;
  color: var(--text-dim); white-space: pre-wrap; word-break: break-word;
}