/* ============================================================================
   v14.css —— 10 版主页面改版组件层（0912 定稿；锚 docs/迭代/2026-09-12-10主页面改版/）
   11 版（2026-09-23，锚 docs/迭代/2026-09-23-11版整体需求/ Part C，画布 docs/前端参考/2026-09-23-11主页面改版/）改骨架：
   主区 = 模块看板 3 列 × 2 行（卡 256 高）在上 + 资讯流通栏在下，同一滚动容器 #board-scroll；取消资讯抽屉与窄档入口行；
   列数按可用宽 W = 视口 − 边栏 380 − 32 定（≥1000 三列 / ≥640 两列 / 否则一列，§8）；客服入口移主区左下（§7）。
   精确值来源：定稿画布 Main.dc.html 实测（UI规格.md 表）。资讯流 / 美联储 / 黄金各自在
   v14-news.css / v14-fed.css / v14-gold.css。暗色差异在 theme-dark.css §16。
   注意：注释内禁止出现星杠闭合序列（坑①）；生成 HTML 禁写 style 属性（坑⓪）——
   动态几何走 data-* + util.applyDataStyles。
   ========================================================================== */

/* ============ 1 · 工作台骨架（覆盖 layout.css 的 384 + 1fr 双栏 grid） ============ */
.ws {
  display: flex; height: 100vh; position: relative;
  background: var(--page); overflow: hidden;
}

/* 主区（11 版）：纵向单列——内容列吃满；客服钮挂在主区左下（§7） */
.main-area {
  flex: 1; min-width: 0; height: 100%; position: relative;
  display: flex; flex-direction: column;
}
.content-col { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; }

/* 唯一滚动容器：看板 + 资讯流（顶内边距 0——资讯流日期头 sticky top:0 才能贴住滚动口上缘不留缝，看板自带 margin-top:16） */
.board-scroll {
  flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px 16px;
  display: flex; flex-direction: column; gap: 16px;
  scrollbar-width: none; -ms-overflow-style: none;   /* 滚动条隐藏（同 10 版看板；9px 实体条会吃掉列宽） */
}
.board-scroll::-webkit-scrollbar { display: none; }
.board-grid {
  flex: none; margin-top: 16px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 256px; gap: 16px; align-items: stretch;
}

/* 资讯流通栏容器卡（11 版：不再是独立滚动列；不设 overflow——否则成为滚动容器，日期头 sticky 失效） */
.news-col {
  flex: none; position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-card);
}

/* 对话边栏 380 */
.chat-aside {
  position: relative; width: 380px; flex: none; height: 100%;
  background: var(--rail); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; min-width: 0;
}
.chat-aside .sidebar-brand { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 16px; flex: none; }
.chat-aside .workspace { flex: 1; min-height: 0; height: auto; background: var(--rail); }
.chat-aside #panel-mine { flex: 1; min-height: 0; }
/* 边栏内覆盖层（无 opener 深链回退 / 覆盖态）关闭钮 */
.chat-close { order: 99; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--soft); color: var(--ink-2); display: none; place-items: center; }
.chat-aside.is-overlay .chat-close { display: grid; }

/* ============ 2 · 窄档入口（对话入口胶囊；11 版资讯入口行已退役） ============ */
.chat-entry {
  display: none; position: absolute; right: 20px; bottom: 66px; z-index: 60;
  height: 44px; padding: 0 18px 0 14px; border-radius: var(--r-pill);
  background: var(--green-solid); color: #fff; font-size: 13px; font-weight: 800;
  align-items: center; gap: 8px; box-shadow: var(--sh-cta);
}

/* ============ 3 · 模块卡（11 版统一 256 高：头 20 + 体 146 + 脚 40，无脚时体 196；10 版为 300 / 190 / 240） ============ */
.mod-card {
  height: 256px; min-width: 0; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 16px 16px 12px;
  display: flex; flex-direction: column; box-shadow: var(--sh-card); overflow: hidden;
}
.mod-card.is-click { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.mod-card.is-click:hover { border-color: var(--line-hover); box-shadow: var(--sh-card-lg); }

/* 头（复用 v3 的 h3-bar/h3-title/h3-dot/h3-time 色值与暗色规则，仅改几何） */
.mod-head { height: 20px; margin-bottom: 0; flex: none; }
.mod-head .h3-title { white-space: nowrap; }
.mod-head .h3-time { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* 体 */
.mod-body { margin-top: 10px; flex: none; height: 146px; position: relative; min-width: 0; }
.mod-body.is-tall { flex: 1; min-height: 0; height: auto; display: flex; flex-direction: column; }

/* 脚：标题两行 clamp（clamp 元素不带 padding，坑④）+ 14px 箭头，整脚可点 */
.mod-foot {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 40px;
  margin-top: 10px; flex: none; padding: 0; text-align: left;
  color: var(--t2); transition: color var(--t-fast);
}
.mod-foot-t {
  flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: -.13px;
}
.mod-foot:hover { color: var(--ink); }
.mod-foot-arw { flex: none; color: var(--arrow); }
.mod-err { font-size: 12px; color: var(--ink-3); display: grid; place-items: center; height: 100%; }

/* 更多模块占位（11 版：填网格第 6 格、随行高 256；只留图标 + 一句，二轮删两枚 chip） */
.mod-more {
  min-width: 0; border: 1px dashed var(--line-hover); border-radius: var(--r-xl); padding: 18px;
  background: transparent; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px;
}
.mod-more-ico { color: var(--ink-3); display: block; }
.mod-more-t { font-size: 13px; font-weight: 700; color: var(--ink-2); }

/* ============ 4 · 卡内：天天复盘轮播（复用 hj-*，此处只改几何） ============ */
.mod-body .hj-carousel {
  width: 100%; height: 100%; aspect-ratio: auto; border-radius: 12px;
  border: 1px solid var(--line); background: #131722; overflow: hidden; cursor: zoom-in;
}
.mod-body .hj-placeholder { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 12px; }
.mod-body .hj-cap {
  position: absolute; left: 10px; bottom: 8px; height: 22px; padding: 0 8px; border-radius: 7px;
  background: rgba(13, 17, 23, .55); color: rgba(255, 255, 255, .92);
  font-size: 11px; font-weight: 700; display: inline-flex; align-items: center;
  font-variant-numeric: tabular-nums; pointer-events: none;
}
.mod-body .hj-dots { left: auto; right: 10px; bottom: 16px; justify-content: flex-end; }

/* ============ 5 · 卡内：推特X日报 TOP5 表（复用 tt-*，改列宽与行高） ============ */
.mod-body .tt-table { height: 100%; border-radius: 12px; }
.mod-body .tt-row { grid-template-columns: 1fr 92px 52px; height: 24px; padding: 0 12px; }
.mod-body .tt-head { height: 26px; }
.mod-body .tt-head span { font-size: 11px; font-weight: 700; }
.mod-body .tt-tick, .mod-body .tt-mention, .mod-body .tt-authors { font-size: 12px; }
.mod-body .tt-tick { font-weight: 700; font-variant-numeric: tabular-nums; }
.mod-body .tt-delta { font-size: 11px; }
.mod-body .tt-new { font-size: 11px; padding: 1px 5px; }
.mod-body .tt-fallback { height: 100%; display: grid; place-items: center; padding: 0 12px; }

/* ============ 6 · 卡内：横向条带（大盘信号 / 黄金；两端渐隐 + 圆钮三态） ============ */
.mod-strip { position: relative; height: 100%; }
.mod-strip-row {
  display: flex; gap: 8px; height: 100%; overflow-x: auto; overflow-y: hidden;
  scroll-behavior: smooth; padding-right: 40px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.mod-strip-row::-webkit-scrollbar { display: none; }
.strip-fade { position: absolute; top: 0; bottom: 0; width: 40px; pointer-events: none; }
.strip-fade.is-r { right: 0; border-radius: 0 12px 12px 0; background: linear-gradient(90deg, var(--card-0), var(--card)); }
.strip-fade.is-l { left: 0; border-radius: 12px 0 0 12px; background: linear-gradient(270deg, var(--card-0), var(--card)); }
.strip-btn {
  position: absolute; top: 50%; transform: translateY(-50%); width: 28px; height: 28px;
  border-radius: 50%; background: var(--card); border: 1px solid var(--line);
  box-shadow: var(--sh-card-lg); display: grid; place-items: center; color: var(--ink-2); z-index: 2;
}
.strip-btn.is-r { right: -4px; }
.strip-btn.is-l { left: -4px; }
.strip-fade.is-off, .strip-btn.is-off { visibility: hidden; }

.strip-blk {
  flex: none; border: 1px solid var(--line); background: var(--soft-2); border-radius: 12px;
  padding: 10px 11px; display: flex; flex-direction: column; min-width: 0; text-align: left;
  transition: border-color .15s;
}
button.strip-blk { cursor: pointer; }
button.strip-blk:hover { border-color: var(--line-hover); }
.strip-blk.w176 { width: 176px; }
.strip-blk.w152 { width: 152px; justify-content: center; gap: 6px; }
.strip-blk.w120 { width: 120px; justify-content: center; gap: 6px; }
.strip-t { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.strip-t .arr { margin-left: auto; color: var(--ink-3); }
.strip-sub { font-size: 11px; color: var(--ink-3); }
.strip-val { font-size: 18px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.strip-mid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; }
.strip-gauge { display: block; width: 150px; margin: 0 auto; }
.strip-zone { display: block; text-align: center; margin-top: 6px; font-size: 13px; font-weight: 700; }
.strip-zone .v { font-size: 11px; font-weight: 600; color: var(--ink-3); margin-left: 6px; font-variant-numeric: tabular-nums; }
.strip-dev { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-3); }
.strip-dev::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--arrow); }

/* ============ 7 · 覆盖层重定位（阅读面板 / 批量任务：覆盖整个主区，对话边栏保持） ============ */
/* layout.css 里两者为 workspace 内的 inset:0；10 版提到 .ws 层，四边显式重写（坑：只设一边会残留） */
.ws > .scrim { position: absolute; top: 0; bottom: 0; left: 0; right: 380px; z-index: 25; }
.ws > .drawer {
  position: absolute; top: 0; bottom: 0; left: 0; right: 380px; z-index: 30;
  border-right: 1px solid var(--line);
  /* 11 版测试站反馈（2026-09-23）：改从主区左缘滑入。原关闭态 translateX(100%) 左缘正好落在对话边栏左缘，
     打开时自右向左扫过边栏（看起来边栏闪一下）；关闭态推到视口左外，开合全程不与边栏重叠。visibility 仍随开合收放（关闭态不可聚焦）。
     ≤720 全屏叠加层沿用自右推入，见 mobile.css */
  transform: translateX(-100%);
  visibility: hidden; transition: transform var(--t-base) var(--ease), visibility var(--t-base);
}
.ws > .drawer.is-open { transform: translateX(0); visibility: visible; }
.ws > .drawer .drawer-head { padding: 0 16px 0 22px; height: 56px; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.ws > .drawer .drawer-meta { max-width: none; margin: 0; flex: 1; min-width: 0; padding-right: 12px; }
.ws > .drawer .drawer-close { position: static; margin-left: auto; }


/* ============ 8 · 响应式（11 版）：看板列数按可用宽 W = 视口 − 边栏 380（覆盖层态不减）− 32 ============
   W ≥ 1000 三列（视口 ≥ 1412）/ W ≥ 640 两列（1052–1411；721–827 覆盖层态 W = 689–795 亦两列）/ 否则一列（828–1051）。
   资讯抽屉、入口行、资讯列最小宽已随 11 版退役；≤720 见 mobile.css。 */
@media (max-width: 1411px) {
  .board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 828px) and (max-width: 1051px) {
  .board-grid { grid-template-columns: minmax(0, 1fr); }
}
/* 对话边栏改右侧覆盖层 + 右下入口胶囊 */
@media (max-width: 827px) {
  .chat-aside { position: absolute; right: 0; top: 0; bottom: 0; z-index: 75; box-shadow: var(--sh-pop); display: none; }
  .chat-aside.is-open { display: flex; animation: mg-push .22s var(--ease) both; }
  .chat-entry { display: inline-flex; }
  .ws > .scrim, .ws > .drawer { right: 0; }
}

@keyframes mg-push { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }

/* ============ 9 · 页内模式（?page=…：无资讯列、无对话边栏，内容列吃满宽） ============ */
.ws.is-page .chat-aside, .ws.is-page .chat-entry { display: none; }
.ws.is-page .content-col { flex: 1; width: auto; }
.ws.is-page > .scrim, .ws.is-page > .drawer { right: 0; }
.ws.is-page > .scrim, .ws.is-page > .drawer { transition: none; }   /* 11 版测试站反馈：页内模式浮窗即整页，直接出现不滑入 */
.ws.is-page .support-root { display: none; }
.modpage { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* 条带里的罗盘：v3 的 172 宽在 176 块内会顶边 */
.strip-blk .sig-gauge { width: 150px; margin: 0 auto; }

/* ============ 10 · 模块页公共版式（美联储 / 黄金共用：页头固定 + 文本 Tab + 内容自滚） ============ */
.mp { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mp-head { flex: none; padding: 22px 28px 0; background: var(--page); }
.mp-head-in { max-width: 900px; margin: 0 auto; }
.mp-title-row { display: flex; align-items: center; gap: 10px; }
.mp-h1 { font-size: 18px; font-weight: 800; letter-spacing: -.2px; color: var(--ink); }
.mp-x { margin-left: auto; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--soft); color: var(--ink-2); display: grid; place-items: center; }
.mp-x:hover { background: var(--line); color: var(--ink); }
.mp-sub { margin-top: 4px; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* Tab 行：上有分割线，行下无整体分割线；选中 = 绿字 700 + 2px 与文字等宽的光标 */
.mp-tabs { margin-top: 14px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 28px; }
.mp-tab { position: relative; display: inline-flex; align-items: center; height: 42px; padding: 0; font-size: 13px; font-weight: 600; color: var(--ink-2); transition: color var(--t-fast); }
.mp-tab.is-on { color: var(--green-d); font-weight: 700; }
.mp-tab-bar { position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; border-radius: 2px; background: transparent; transition: background var(--t-fast); }
.mp-tab.is-on .mp-tab-bar { background: var(--green); }
.mp-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 28px 80px; }
.mp-body-in { max-width: 900px; margin: 0 auto; }
.mp-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px 26px 20px; box-shadow: var(--sh-card); }
.mp-card + .mp-card { margin-top: 12px; }
.mp-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 6px; }
.mp-card-t { font-size: 15px; font-weight: 800; letter-spacing: -.15px; color: var(--ink); }
.mp-card-s { font-size: 12px; color: var(--ink-3); }
.mp-select { margin-left: auto; height: 32px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 12px; font-weight: 600; }
.mp-seg { margin-top: 12px; display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--seg-bg); }
.mp-seg button { height: 26px; padding: 0 12px; border-radius: 7px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.mp-seg button.is-on { background: var(--ink); color: var(--card); font-weight: 700; }
.mp-note { margin-top: 14px; display: flex; flex-direction: column; gap: 2px; background: var(--soft-2); border-radius: var(--r-lg); padding: 12px 16px; font-size: 12px; line-height: 1.7; color: var(--ink-2); }
.mp-note strong { font-weight: 700; color: var(--ink); }
.mp-note-s { font-size: 11px; color: var(--ink-3); }
.mp-meta { margin-top: 8px; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mp-state { display: grid; place-items: center; padding: 60px 0; font-size: 12.5px; color: var(--ink-3); }
.tnum { font-variant-numeric: tabular-nums; }

/* 客服入口定位（11 版三轮）：主区左下 20 / 20；四边显式重写（v9 / v11 旧档位写过 right / bottom，坑⑧）。
   z 20：在看板与资讯流之上、阅读面板 / 批量任务覆盖层（scrim 25 / drawer 30）之下；外观见 v11.css「客服」段 */
.main-area > .support-root { position: absolute; left: 20px; right: auto; top: auto; bottom: 20px; z-index: 20; }

/* ============ 11 · 输入区类型行改单行横滑（边栏 380 宽；覆盖 v2/v3 的 flex-wrap 与 padding） ============ */
/* 12 版测试站二次反馈（用户 09-29「一个角会压在外沿」）：横滑可视区原先与输入框内边线等宽，被截的画图组与两端渐隐都是直角矩形，
   滑到一端时压在输入框底部 22 圆角的弧线上（离底 12–18px 处最上层是画图组 / 渐隐）。可视区左右各内收 12、行内边距 16 → 4：
   类型的停靠位置（距内边线 16）与可滚距离不变，截断处和渐隐离边框 12，碰不到圆角 */
.tp-wrap { position: relative; margin: 0 12px; }
.tp-wrap .tp-row {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 8px;
  padding: 2px 4px 11px; overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.tp-wrap .tp-row::-webkit-scrollbar { display: none; }
.tp-wrap .tp-chip, .tp-wrap .tp-drawbox { flex: none; }
/* 两端渐隐的显隐只由 .is-off 控制（app.js wireTypeRow 按 scrollLeft 切换）。12 版测试站反馈：原先 .is-l 基类写死 visibility:hidden，
   去掉 .is-off 也显示不出来，左渐隐从 10 版起从未出现过——行滑到右侧后看不出左边还有「技术分析 / 财报分析」 */
.tp-fade { position: absolute; top: 0; bottom: 11px; width: 44px; pointer-events: none; }
.tp-fade.is-l { left: 0; background: linear-gradient(270deg, var(--card-0), var(--bg) 70%); }
.tp-fade.is-r { right: 0; background: linear-gradient(90deg, var(--card-0), var(--bg) 70%); }
.tp-fade.is-off { visibility: hidden; }

/* 移动端看板导航 chips（锚点；桌面不显示，≤720 由 mobile.css 打开） */
.board-nav { display: none; align-items: center; gap: 8px; height: 44px; flex: none; overflow-x: auto; scrollbar-width: none; }
.board-nav::-webkit-scrollbar { display: none; }
.bn-chip { flex: none; height: 30px; padding: 0 12px; border-radius: 9px; background: var(--card); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.bn-chip:active { background: var(--soft); }

/* 观测数据部分缺失提示（meta.partial：缺失值置空，不补线） */
.mp-partial { margin-top: 12px; font-size: 12px; color: var(--amber); background: var(--amber-soft); border-radius: 10px; padding: 8px 12px; }

/* ============ 12 · 测试站环境态（锚 docs/迭代/2026-09-14-测试环境与发布流程/ §E；S.env 来自契约 §15 X-TA-Env） ============ */
/* 横幅在 #app 之外常驻顶部；body.is-staging 时各 100vh 骨架减去横幅高，生产无此类名 → 零差异 */
:root { --env-banner-h: 28px; }
.env-banner {
  height: var(--env-banner-h); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px;
  background: var(--amber-soft); color: var(--amber); font-size: var(--fs-xs); line-height: 1; border-bottom: 1px solid var(--line);
  white-space: nowrap; overflow: hidden;
}
.env-banner.u-hidden { display: none; }
.env-banner-tag { font-weight: var(--fw-bold); flex: none; }
.env-banner-t { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
body.is-staging #app, body.is-staging .view, body.is-staging .login-shell, body.is-staging .view-dashboard.is-active,
body.is-staging .workspace, body.is-staging .ws, body.is-staging .view-admin.is-active, body.is-staging .admin { height: calc(100vh - var(--env-banner-h)); }
/* 登录页提示（登录卡品牌下方一句） */
.env-note { margin: 0 0 var(--sp-7); padding: 8px 12px; border-radius: var(--r-md); background: var(--amber-soft); color: var(--amber); font-size: var(--fs-xs); line-height: 1.5; text-align: center; }
.env-note.u-hidden { display: none; }
/* 测试站离线 = 禁发（红），区别于生产离线排队（琥珀） */
.conn-banner.is-staging, [data-theme="dark"] .conn-banner.is-staging { color: var(--red); background: var(--red-soft); }   /* 暗色层 [data-theme] .conn-banner 同特异性且后载，须点名覆盖 */
.conn-banner.is-staging .dot { background: var(--red); }
@media (max-width: 720px) {
  /* 移动端骨架用 dvh（mobile.css）；.workspace 在移动端为 auto 高，不在此覆盖 */
  body.is-staging #app, body.is-staging .view, body.is-staging .ws, body.is-staging .login-shell, body.is-staging .admin { height: calc(100dvh - var(--env-banner-h)); }
  body.is-staging .m-topbar { top: var(--env-banner-h); }
  .env-banner { font-size: 11px; padding: 0 10px; }
}