/* R25 — market-board.css 行情页样式（1:1 复刻 Surf AI 美股页）
 *
 * 视觉标准：Surf AI 美股行情页实拍（2026-09-25，PIL 像素测量）
 * 色值（实测）：页底 #FCFCFC / 卡 #FFFFFF（无边框无阴影）/ 财务表体 #F4F4F4
 *   涨文字 #80BA02 / 跌文字 #D50024 / sparkline 青 #30B0A0 / 红 #D50024
 *   搜索框底 #F3F4F6 / 新功能玫红点 #EC4899
 * 布局（实测逻辑 px）：ETF 卡 4 列 gap 10 / 双栏（左主 + gap 13 + 右 176）
 *   / Kalshi meta 竖 3 行 / 焦点股票价格+涨跌同行 / 副标题在 ETF 卡下方 footer
 */

:root {
  --mb-bg: #FCFCFC;
  --mb-card: #FFFFFF;
  --mb-gray: #F4F4F4;
  --mb-ink: #111827;
  --mb-ink-2: #374151;
  --mb-muted: #6B7280;
  --mb-faint: #9CA3AF;
  --mb-up: #80BA02;
  --mb-down: #D50024;
  --mb-flat: #9CA3AF;
  --mb-brand: #7c3aed;
}

/* ── 视图容器：内容块留白 + 限宽（原版「窄内容+大留白」，不贴侧栏） ── */
.view-market-board { max-width: none; width: auto; margin: 0; background: var(--mb-bg); min-height: 100%; container: market-content / inline-size; }
.mb-wrap { display: flex; flex-direction: column; background: var(--mb-bg); padding: 4px 48px 64px; max-width: 1096px; }

/* ═══════════ 页头：美股大标题 + 时间戳（Surf 1:1） ═══════════ */
.mb-page-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; padding: 28px 0 20px; }
.mb-page-title { font-size: var(--type-page-size); font-weight: 600;  color: var(--mb-ink); letter-spacing: -0.01em; margin: 0;  line-height: var(--type-page-line); }
.mb-page-time { font-size: var(--type-caption-size);  color: var(--mb-faint); font-variant-numeric: tabular-nums;  line-height: var(--type-caption-line); }

/* ═══════════ 搜索框：圆角矩形 + 放大镜（Surf 1:1，纯视觉） ═══════════ */
.mb-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--mb-card);
  border: 1px solid #D8D4E0;
  border-radius: 10px;
  padding: 0 14px;
  height: 38px;
  margin-bottom: 14px;
}
.mb-search:focus-within { border-color: var(--mb-brand); background: var(--mb-card); }
.mb-search-icon { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--mb-faint); stroke-width: 2; stroke-linecap: round; }
.mb-search-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: var(--type-body-size);  color: var(--mb-ink); user-select: text;  line-height: var(--type-body-line); }
.mb-search-input::placeholder { color: var(--mb-faint); }

/* ═══════════ 三 Tab：概览（选中下划线）/ 代币化股票 / 新功能（玫红点） ═══════════ */
.mb-subtabs { display: flex; align-items: center; gap: 24px; border-bottom: 1px solid var(--mb-divider); overflow-x: auto; }
.mb-subtab { font-size: var(--type-body-size); font-weight: 500;  color: var(--mb-muted); padding: 6px 0 12px; white-space: nowrap; position: relative; transition: color .15s;  line-height: var(--type-body-line); }
.mb-subtab.mb-active { color: var(--mb-ink); font-weight: 600; }
.mb-subtab.mb-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 1px; background: var(--mb-ink); }
.mb-new-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #EC4899; margin-left: 5px; position: relative; top: -6px; }

/* ═══════════ 区块（无分隔线，靠留白） ═══════════ */
.mb-section { padding: 24px 0 8px; }
.mb-sec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.mb-sec-head-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mb-sec-title { font-size: var(--type-section-size); font-weight: 600; color: var(--mb-ink);   line-height: var(--type-section-line); }
.mb-sec-sub { font-size: var(--type-caption-size); font-weight: 400; color: var(--mb-muted);  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  line-height: var(--type-caption-line); }
.mb-sec-time { flex: none; font-size: var(--type-caption-size); color: var(--mb-faint); font-variant-numeric: tabular-nums; padding-top: 2px; white-space: nowrap;  line-height: var(--type-caption-line); }
.mb-sec-footer { font-size: var(--type-caption-size); color: var(--mb-muted); margin-top: 10px;  line-height: var(--type-caption-line); }

/* ═══════════ A 热门资产：4 ETF 白卡（无边框无阴影） ═══════════ */
.mb-hot-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mb-etf { display: flex; flex-direction: column; background: var(--mb-card); padding: 14px 16px 16px; }
.mb-etf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.mb-etf-name { font-size: var(--type-body-size); font-weight: 500;  color: var(--mb-ink); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;  line-height: var(--type-body-line); }
.mb-etf-chg { font-size: var(--type-caption-size); font-weight: 500; font-variant-numeric: tabular-nums; flex: none; white-space: nowrap;  line-height: var(--type-caption-line); }
.mb-etf-chg.mb-up { color: var(--mb-up); background: none; }
.mb-etf-chg.mb-down { color: var(--mb-down); background: none; }
.mb-etf-chg.mb-flat { color: var(--mb-flat); }
.mb-etf-code { font-size: var(--type-caption-size);  color: var(--mb-muted); font-variant-numeric: tabular-nums; margin-top: 2px;  line-height: var(--type-caption-line); }
.mb-etf-price { font-size: var(--type-page-size); font-weight: 400;  color: var(--mb-ink); letter-spacing: -0.01em; margin-top: 8px; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;  line-height: var(--type-page-line); }
.mb-etf-spark { margin-top: 8px; }
.mb-etf-spark .mb-spark { display: block; width: 100%; height: auto; }
/* Reserve the same title rows when cards wrap in the three-pane workspace. */
@container market-content (max-width: 560px) {
  .with-ai-side .mb-etf-head { display:grid; grid-template-columns:1fr; grid-template-rows:48px 18px; gap:6px; align-items:start; }
}

/* ═══════════ 双栏：左主 + 右侧栏（原版右栏 ≈ 内容区 26%） ═══════════ */
.mb-columns { display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 27%, 320px); gap: 13px; align-items: start; }
.mb-col-main { min-width: 0; }
.mb-col-side { min-width: 0; display: flex; flex-direction: column; }
.mb-col-side .mb-section { padding: 24px 0 4px; }
.mb-col-side .mb-sec-title { font-size: var(--type-body-size);  line-height: var(--type-body-line); }
.mb-col-side .mb-sec-head { margin-bottom: 10px; }

/* ═══════════ B 焦点股票：白面板 4 列（价格+涨跌同行） ═══════════ */
.mb-focus-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--mb-card); }
.mb-focus-cell { display: flex; flex-direction: column; padding: 14px 14px 16px; cursor: pointer; }
.mb-focus-cell + .mb-focus-cell { border-left: 1px solid #F0F0F0; }
.mb-focus-ticker { font-size: var(--type-section-size); font-weight: 600;  color: var(--mb-ink); letter-spacing: -0.01em;  line-height: var(--type-section-line); }
.mb-focus-cell:hover .mb-focus-ticker { color: var(--mb-brand); }
.mb-focus-co { font-size: var(--type-caption-size);  color: var(--mb-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  line-height: var(--type-caption-line); }
.mb-focus-quote { display: flex; align-items: baseline; gap: 6px; margin-top: 10px; white-space: nowrap; }
.mb-focus-price { font-size: var(--type-body-size); font-weight: 500; color: var(--mb-ink); font-variant-numeric: tabular-nums;  line-height: var(--type-body-line); }
.mb-focus-chg { font-size: var(--type-caption-size); font-weight: 500; font-variant-numeric: tabular-nums;  line-height: var(--type-caption-line); }
.mb-focus-chg.mb-up { color: var(--mb-up); }
.mb-focus-chg.mb-down { color: var(--mb-down); }

/* ═══════════ C/E 表格：财务表体灰底（PIL 实测 #F4F4F4） ═══════════ */
.mb-table-wrap { overflow-x: auto; }
.mb-table { width: 100%; border-collapse: collapse; font-size: var(--type-caption-size); background: var(--mb-card);  line-height: var(--type-caption-line); }
.mb-table th { text-align: left; padding: 8px 10px; font-size: var(--type-caption-size); font-weight: 500; color: var(--mb-muted); border-bottom: 1px solid #E5E7EB; white-space: nowrap; vertical-align: bottom; background: var(--mb-card);  line-height: var(--type-caption-line); }
.mb-table td { padding: 7px 10px; line-height: 18px; border-bottom: 1px solid rgba(0,0,0,0.04); color: var(--mb-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mb-table tbody tr:last-child td { border-bottom: none; }
.mb-table.mb-fin { background: var(--mb-gray); }
.mb-table.mb-fin td { background: var(--mb-gray); }
.mb-table .mb-metric { color: var(--mb-muted); }
.mb-sec-sym { display: block; font-size: var(--type-caption-size); font-weight: 600; color: var(--mb-ink);  line-height: var(--type-caption-line); }
.mb-table .mb-co { display: block; font-size: var(--type-caption-size); font-weight: 400; color: var(--mb-muted); margin-top: 1px;  line-height: var(--type-caption-line); }
.mb-table .mb-muted { color: var(--mb-muted); }
.mb-table.mb-sec-tbl th, .mb-table.mb-sec-tbl td { padding: 7px 6px; }
.mb-table.mb-sec-tbl th { font-size: var(--type-caption-size);  line-height: var(--type-caption-line); }
.mb-table.mb-sec-tbl td { font-size: var(--type-caption-size);  line-height: var(--type-caption-line); }
.mb-table.mb-sec-tbl .mb-sec-sym { font-size: var(--type-caption-size);  line-height: var(--type-caption-line); }
.mb-table.mb-sec-tbl .mb-co { font-size: var(--type-caption-size);  line-height: var(--type-caption-line); }

/* ═══════════ D Kalshi 卡（右栏竖排，meta 竖 3 行） ═══════════ */
.mb-kalshi-grid { display: flex; flex-direction: column; gap: 10px; }
.mb-kalshi-card { display: flex; flex-direction: column; background: var(--mb-card); padding: 14px 16px 16px; }
.mb-kalshi-brand { font-size: var(--type-caption-size); font-weight: 600;  color: var(--mb-ink); letter-spacing: .02em; margin-bottom: 6px;  line-height: var(--type-caption-line); }
.mb-kalshi-q { font-size: var(--type-caption-size); font-weight: 500;  color: var(--mb-ink);  line-height: var(--type-caption-line); }
.mb-kalshi-labels { display: flex; justify-content: space-between; gap: 8px; font-size: var(--type-caption-size); font-weight: 600; margin-top: 10px; font-variant-numeric: tabular-nums; white-space: nowrap;  line-height: var(--type-caption-line); }
.mb-kalshi-bar { display: flex; height: 6px; margin-top: 6px; overflow: hidden; background: var(--mb-gray); border-radius: 3px; }
.mb-kalshi-yes { background: var(--mb-up); }
.mb-kalshi-no { background: var(--mb-down); }
.mb-kalshi-meta { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.mb-k-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.mb-k-label { font-size: var(--type-caption-size); color: var(--mb-muted); white-space: nowrap;  line-height: var(--type-caption-line); }
.mb-k-val { font-size: var(--type-caption-size); font-weight: 500; color: var(--mb-ink); font-variant-numeric: tabular-nums; white-space: nowrap;  line-height: var(--type-caption-line); }

/* ═══════════ F 代币化股票（右栏，主行+副行） ═══════════ */
.mb-tok-list { display: flex; flex-direction: column; background: var(--mb-card); }
.mb-tok-row { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-bottom: 1px solid rgba(0,0,0,0.04); cursor: pointer; }
.mb-tok-row:last-child { border-bottom: none; }
.mb-tok-row:hover { background: rgba(124, 58, 237, 0.04); }
.mb-tok-row:hover .mb-tok-name { color: var(--mb-brand); }
.mb-tok-main { display: flex; align-items: baseline; gap: 6px; line-height: 20px; }
.mb-tok-sym { flex: none; font-size: var(--type-caption-size); font-weight: 600; color: var(--mb-ink); font-variant-numeric: tabular-nums;  line-height: var(--type-caption-line); }
.mb-tok-name { flex: 1; min-width: 0; font-size: var(--type-caption-size); color: var(--mb-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s;  line-height: var(--type-caption-line); }
.mb-tok-price { flex: none; font-size: var(--type-caption-size); font-weight: 500; color: var(--mb-ink); font-variant-numeric: tabular-nums;  line-height: var(--type-caption-line); }
.mb-tok-chg { flex: none; font-size: var(--type-caption-size); font-weight: 500; font-variant-numeric: tabular-nums;  line-height: var(--type-caption-line); }
.mb-tok-sub { display: flex; flex-direction: column; gap: 1px; line-height: 15px; }
.mb-tok-under { font-size: var(--type-caption-size); color: var(--mb-faint); white-space: normal;  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;  line-height: var(--type-caption-line); }
.mb-tok-mcap { font-size: var(--type-caption-size); font-weight: 500; color: var(--mb-muted); font-variant-numeric: tabular-nums;  line-height: var(--type-caption-line); }

/* ═══════════ 涨跌语义 ═══════════ */
.mb-up   { color: var(--mb-up); }
.mb-down { color: var(--mb-down); }
.mb-flat { color: var(--mb-flat); }

/* ═══════════ 焦点环 ═══════════ */
.mb-openable:focus-visible { outline: 2px solid var(--mb-brand); outline-offset: -2px; }

/* ═══════════ AI 面板（菜单栏右侧）开启时的密度适配（内容区 ≈650px） ═══════════ */
.main.with-ai-side .view-market-board .mb-wrap { padding: 4px 28px 48px; max-width: none; }
.main.with-ai-side .mb-hot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.main.with-ai-side .mb-etf-head { flex-wrap: wrap; }
.main.with-ai-side .mb-etf-name { white-space: normal; display: block; -webkit-line-clamp: unset; overflow: visible; }
.main.with-ai-side .mb-focus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.main.with-ai-side .mb-focus-cell + .mb-focus-cell { border-left: none; }
.main.with-ai-side .mb-focus-cell:nth-child(even) { border-left: 1px solid #F0F0F0; }
.main.with-ai-side .mb-kalshi-grid { grid-template-columns: 1fr; }

/* ═══════════ 响应式 ═══════════ */
@media (max-width: 1080px) {
  .mb-columns { grid-template-columns: 1fr; }
  .mb-col-side { flex-direction: row; flex-wrap: wrap; gap: 13px; }
  .mb-col-side .mb-section { flex: 1 1 280px; }
}
@media (max-width: 900px) {
  .mb-hot-grid, .mb-focus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mb-focus-cell + .mb-focus-cell { border-left: none; }
}
@media (max-width: 600px) {
  .mb-hot-grid, .mb-focus-grid { grid-template-columns: 1fr; }
}