/* ============================================================
   TimeSeek Workstation — 核心主题 + 外壳布局
   基于 test 原型: timeseek_futures_panorama_fullwidth_footer_v10.html
   ============================================================ */

/* ---- CSS 变量 (暗色交易工作台) ---- */
:root {
  --primary: #2D9CDB;
  --primary-light: #6BC4FF;
  --primary-dark: #0F6B9C;
  --success: #00D68F;
  --warn: #FFAA3A;
  --danger: #FF4D4F;
  --text: #EFF6FF;
  --muted: #B9D9F5;
  --subtle: #7EA8C9;
  --bg: #0e1621;
  --panel: #07223e;
  --panel-2: #0f233c;
  --line: rgba(45,156,219,.28);
  --glow: 0 0 14px rgba(45,156,219,.26);
  --shadow: 0 14px 34px rgba(0,0,0,.28);

  /* 向后兼容 portal.css 的变量名 */
  --primary-color: var(--primary);
  --primary-light-color: var(--primary-light);
  --success-color: var(--success);
  --warning-color: var(--warn);
  --error-color: var(--danger);
  --text-primary: var(--text);
  --text-secondary: var(--muted);
  --text-tertiary: var(--subtle);
  --border-color: var(--line);
  --border-light: rgba(45,156,219,.18);
  --surface-bg: var(--panel);
  --main-bg: var(--bg);
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-y:scroll}
html,body{height:100%}
body{
  margin:0;
  font-family:"Segoe UI","Microsoft YaHei",Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#07111d 0%,#0b1827 34%,#0e1621 100%);
  font-size:13px;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";
  position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(circle at 12% 0,rgba(45,156,219,.22),transparent 34%),
    radial-gradient(circle at 88% 12%,rgba(0,214,143,.08),transparent 28%),
    linear-gradient(180deg,rgba(7,34,62,.35),rgba(7,17,29,.15));
  pointer-events:none;
}
a{text-decoration:none;color:inherit}
button,input,select{font:inherit}
ul,ol{list-style:none;margin:0;padding:0}

/* ---- 滚动条 ---- */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:rgba(255,255,255,.04)}
::-webkit-scrollbar-thumb{background:rgba(45,156,219,.25);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(45,156,219,.45)}

/* ---- 统一下拉框样式 ---- */
select,
.form-select,
.ps-select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  padding-right:30px;
  border:1px solid #d0d5dd;
  color:#1a1a1a;
  border-radius:8px;
  padding:8px 30px 8px 10px;
  font-size:13px;
  outline:none;
  cursor:pointer;
  transition:border-color .2s, box-shadow .2s;
}
select:focus,
.form-select:focus,
.ps-select:focus{
  border-color:#2d9cdb;
  box-shadow:0 0 0 2px rgba(45,156,219,.2);
}
select option,
.form-select option,
.ps-select option{
  background:#fff;
  color:#1a1a1a;
}
select:hover,
.form-select:hover,
.ps-select:hover{
  border-color:#9ca3af;
  background-color:#f9fafb;
}

/* ============================================================
   外壳布局 .app
   grid-template-rows: top(64px) subnav(42px) main(1fr) footer(auto)
   ============================================================ */
.app{
  min-height:100vh;
  display:grid;
  grid-template-rows:64px 42px 1fr auto;
}
.app.no-subnav{
  grid-template-rows:64px 1fr auto;
}

/* ---- 一级导航 .top ---- */
.top{
  background:var(--panel);
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:200px minmax(0,1fr) auto auto;
  align-items:center;
  gap:10px;
  padding:0 18px;
  box-shadow:0 8px 20px rgba(0,0,0,.2);
  position:sticky;
  top:0;
  z-index:30;
}
.brand{
  height:52px;
  display:flex;
  align-items:center;
  min-width:0;
}
/* ── 文字 Logo（替换图片 logo.jpg）── */
/* 使用 .brand a.text-logo 提高特异性，防止 a{display:block} 或 Tailwind preflight 覆盖 */
.brand a.text-logo{
  display:inline-flex !important;
  flex-direction:column !important;
  align-items:flex-start;
  justify-content:center;
  line-height:1;
  text-decoration:none !important;
  user-select:none;
}
/* 子元素样式不依赖 .brand 父级，Footer(.text-logo--footer) 和 AuthModal(:deep(.text-logo)) 都能匹配 */
.text-logo .text-logo-en{
  display:inline-flex !important;
  align-items:baseline !important;
  font-family:"Georgia","Times New Roman",Times,serif !important;
  font-size:27px !important;
  font-weight:500 !important;
  line-height:1 !important;
  letter-spacing:-1.89px !important;
}
.tl-sep{
  display:inline-block !important;
  width:3px !important;
  flex-shrink:0 !important;
}
.tl-time{color:#F4EFE5 !important}
.tl-seek{color:#D1A05E !important}
.text-logo .text-logo-cn{
  font-family:"Microsoft YaHei","微软雅黑",sans-serif !important;
  font-size:14px !important;
  font-weight:400 !important;
  color:#D1A05E !important;
  letter-spacing:5.7px !important;
  margin-top:3px !important;
  line-height:1 !important;
  padding-left:0 !important;
  display:block !important;
}
/* 页脚版：强制保持 flex-direction:column（被 .footer a{display:block} 干扰） */
.text-logo--footer{
  display:inline-flex !important;
  flex-direction:column !important;
  padding:1px 0;
  height:auto;
}
.text-logo--footer .text-logo-en{
  font-size:27px;        /* 保持与 header 同规格 */
}
.text-logo--footer .text-logo-cn{
  font-size:14px;
}
/* 旧图片 logo 样式保留但不再生效（class 已不存在） */
.brand-logo-img{
  display:block;
  height:36px;
  width:auto;
  object-fit:contain;
  object-position:left center;
}

/* 一级导航项 */
.topnav{
  display:flex;
  gap:2px;
  align-items:center;
  justify-content:center;
  overflow:auto;
  min-width:0;
}
.topnav a{
  height:34px;
  border:1px solid transparent;
  background:transparent;
  color:var(--muted);
  padding:0 8px;
  border-radius:8px;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:5px;
  font-size:12px;
  transition:all .18s;
}
.topnav a svg{
  width:15px;height:15px;
  flex:0 0 15px;
}
.topnav a.active{
  background:var(--warn);
  border-color:rgba(255,170,58,.85);
  color:#17202a;
  font-weight:900;
  box-shadow:0 8px 18px rgba(255,170,58,.24);
}
.topnav a:not(.active):hover{
  background:rgba(255,170,58,.14);
  border-color:rgba(255,170,58,.34);
  color:#fff;
}

/* 状态指示器 */
.status-pill{
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--muted);
  padding:8px 14px;
  border-radius:8px;
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  font-size:12px;
}
.dot{
  width:8px;height:8px;
  border-radius:99px;
  background:var(--success);
  box-shadow:0 0 10px var(--success);
}
.dot.offline{background:var(--subtle);box-shadow:none}

/* 用户区 */
.user-area{display:flex;align-items:center}
.user-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px 6px 6px;
  border-radius:28px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  color:var(--muted);
  font-size:13px;
  transition:all .2s;
}
.user-btn:hover{
  background:rgba(238,187,77,.08);
  border-color:rgba(238,187,77,.35);
  color:#fff;
}
.user-avatar{
  width:30px;height:30px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  color:#94a3b8;font-size:14px;
}
.user-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.user-name{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- 二级导航 .subnav ---- */
.subnav{
  background:rgba(7,34,62,.86);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(45,156,219,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  position:sticky;
  top:64px;
  z-index:20;
}
.subnav-inner{
  width:100%;
  max-width:1380px;
  padding:0 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.quick{
  display:flex;
  gap:8px;
  overflow:auto;
}
.quick a{
  height:30px;
  display:flex;
  align-items:center;
  color:var(--subtle);
  padding:0 10px;
  border-radius:8px;
  border:1px solid transparent;
  white-space:nowrap;
  background:transparent;
  font-size:12px;
  transition:all .18s;
}
.quick a.active{
  color:#fff;
  background:rgba(45,156,219,.28);
  border-color:var(--line);
  /* 修改点：去掉下边框 —— 让 active tab 的底边与 subnav 容器的 border-bottom 共享同一条线，
     避免 active tab 自己的 1px 下边框叠加在 subnav 的 1px 下边框上产生"错位/双线"视觉问题。
     同时把 border-bottom-radius 改为 0，让 tab 底部与 subnav 底边完美齐平 */
  border-bottom-color:transparent;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  font-weight:900;
  box-shadow:var(--glow);
}
.quick a:not(.active):hover{
  color:#fff;
  background:rgba(45,156,219,.18);
  border-color:var(--line);
}
.source{
  display:flex;
  gap:10px;
  align-items:center;
  color:var(--subtle);
  font-size:12px;
  white-space:nowrap;
}
.source b{color:var(--success)}

/* ---- 内容区 .main ---- */
/* FIX2: padding 硬编码 → 令牌引用，统一调用 global.css 里的 --ts-page-gutter-* 设计令牌
   规范来源：文档/index.html §07 — 桌面 top:20px / x:24px / bottom:36px */
.main{
  padding: var(--ts-page-gutter-top) var(--ts-page-gutter-x) var(--ts-page-gutter-bottom);
  min-width:0;
  width:100%;
  max-width:1720px;
  margin:0 auto;
}
/* 顶格：吃掉各页面 scoped 里遗留的 margin-top，覆盖到 .view-host 下两层页面根容器 */
.main > *:first-child,
.main > *:first-child > *:first-child,
.main > *:first-child > *:first-child > *:first-child { margin-top: 0 !important; }
/* FIX1 修正：.main-full 恢复令牌 padding — 单层页面（news/options/social 等）也用 .main-full，
   一刀切归零会让这些页面边距消失。改用 :has() 精确覆盖，只对两栏页面生效。 */
.main.main-full{
  max-width:none;
  margin:0;
  padding: var(--ts-page-gutter-top) var(--ts-page-gutter-x) var(--ts-page-gutter-bottom);
}
/* FIX1-ONLY: 仅当 .main-full 内部包含两栏页面根容器时，才归零 padding 消除叠加
   条件：根容器 scoped style 里自己声明了完整 padding: var(--ts-page-gutter-top) var(--page-padding) var(--ts-page-gutter-bottom)
   外层 main-full 默认有 padding，叠加会导致上下左右翻倍变成 40px/48px/72px
   
   排除项（自己不带 padding，靠外层提供，归零会让页面没边距）：
   - trading 板块四个页面（Cost/PositionSheet/Plan/RiskPosition 已统一成 DragonTiger/Warehouse 模式）
   
   DOM 注意：中间隔了 .view-host > div 两层，用 :has(.xxx) 后代选择器，不是 :has(> .xxx) */
.main.main-full:has(.vol-page),
.main.main-full:has(.mh-app),
.main.main-full:has(.cap-page),
.main.main-full:has(.term-app),
.main.main-full:has(.si-page),
.main.main-full:has(.bond-page),
.main.main-full:has(.dc-app),
.main.main-full:has(.cs-app),
.main.main-full:has(.cm-app),
.main.main-full:has(.cv-app),
.main.main-full:has(.arb-app),
.main.main-full:has(.pp-workspace-shell),
.main.main-full:has(.seasonality-workspace),
/* 修改点：Momentum/Structure/SectorIndex 删除 .workspace 中间层后根容器为 .app-shell，
   原 :has(.workspace) 失效导致内外 padding 叠加（顶部 20+20=40px），改为匹配 .app-shell */
.main.main-full:has(.app-shell),
/* FIX-ADD: DragonTiger(.evidence-app)/Warehouse(.inv-app) 自己声明了完整 padding，
   之前误删导致叠加 → 边距翻倍太宽 */
.main.main-full:has(.evidence-app),
.main.main-full:has(.inv-app),
/* FIX-ADD-COCKPIT: 新闻终端(Index.vue) 的 .cockpit 根容器声明了完整 padding */
/* FIX-REMOVE-RP: RiskPosition(.rp-body) 已不再自己声明 padding，
   归零会导致页面左右边距丢失，移除让外层 main-full 默认 padding 生效 */
.main.main-full:has(.cockpit),
/* FIX-TS-SHELL: 全局容器类——所有迁移到 .ts-rail-shell / .ts-page-shell 的页面
   根容器自带 padding，外层 main-full 必须归零消除叠加 */
.main.main-full:has(.ts-rail-shell),
.main.main-full:has(.ts-page-shell) { padding: 0; }

.main.main-full > *:first-child,
.main.main-full > *:first-child > *:first-child,
.main.main-full > *:first-child > *:first-child > *:first-child { margin-top: 0 !important; }

/* FIX-TRADING: Cost/PositionSheet 的根容器(.tc-app/.wb-app)下嵌了 .page-layout 中间层，
   .page-layout 全局定义 padding: var(--ts-page-gutter-x, 24px)，
   与外层 main-full 的 padding: var(--ts-page-gutter-top) 叠加 → 实际上边距 20+24=44px 太宽！
   归零中间层 padding，让外层 main-full 成为唯一来源，保持 20px 统一。
   注意：Plan.vue/.rp-layout 没嵌 .page-layout，不需要此规则。
   注意：不能全局改 .page-layout padding，因为 workspace/Index.vue 自己就是 .page-layout 做根容器 */
.tc-app > .page-layout,
.wb-app > .page-layout { padding: 0 !important; }

/* FIX3 修正：移动端 — .main-full 恢复令牌 padding，:has() 覆盖规则同样生效 */
@media (max-width:760px){
  .main,
  .main.main-full{ padding: var(--ts-page-gutter-top) var(--ts-page-gutter-x) var(--ts-page-gutter-bottom); }
}

/* ---- 页脚 .footer ---- */
.footer{
  background:var(--panel);
  border-top:1px solid var(--line);
  box-shadow:0 -8px 20px rgba(0,0,0,.16);
  padding:28px 44px 14px;
}
.footer-inner{
  display:grid;
  grid-template-columns:minmax(240px,1.5fr) repeat(4,minmax(110px,.7fr));
  gap:8px;
  align-items:start;
  max-width:1380px;
  margin:0 auto;
}
/* 旧图片 logo 样式保留但不再生效（class 已不存在） */
.footer-logo{
  width:160px;
  max-width:100%;
  height:auto;
  display:block;
  margin-bottom:8px;
}
/* 页脚文字 Logo 间距调整：替换原 .footer-logo 的 margin-bottom:8px */
.footer-brand .text-logo--footer{
  margin-bottom:8px;
}
.footer-desc{
  color:var(--muted);
  line-height:1.45;
  max-width:320px;
  font-size:12px;
}
.brand-line{
  width:42px;height:2px;
  background:linear-gradient(90deg,var(--primary),transparent);
  margin:8px 0;
}
.footer h4{
  margin:0 0 10px;
  color:#fff;
  font-size:13.5px;
  letter-spacing:.02em;
}
.footer a,.footer p{
  display:block;
  margin:0 0 7px;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.65;
  transition:color .2s;
}
.footer a:hover{color:var(--primary-light)}
.footer-col{padding:0 3px}
.footer-wechat{text-align:center}
.footer-wechat h4{text-align:center}
.footer-qrcode{width:80px;height:80px;border-radius:12px;overflow:hidden;background:#fff;margin:0 auto 6px}
.footer-company{color:#e0eef3;font-weight:600}
.footer-bottom{
  margin-top:12px;
  padding-top:8px;
  border-top:1px solid rgba(45,156,219,.18);
  display:flex;
  justify-content:center;
  gap:16px;
  color:var(--subtle);
  font-size:11px;
}
.footer-qrcode img{width:100%;height:100%;object-fit:cover}
.wechat-tip{font-size:11px;color:var(--subtle);text-align:center}

/* ---- 页面头部 ---- */
.page-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin-bottom:12px;
}
.page-head h1{font-size:24px;margin:0 0 5px;color:#fff}
.page-head .desc{color:var(--subtle);line-height:1.6;max-width:800px}
.page-head .actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}


.layout{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) 420px;
  gap:10px;
  margin-bottom:10px;
}
.layout-equal{grid-template-columns:1fr 1fr}
.layout-wide{grid-template-columns:minmax(0,1fr) 380px}


/* ---- 指标卡栅格 ---- */
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
.metric{background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);padding:10px 14px}
.metric label{display:block;color:var(--subtle);font-size:12px}
.metric strong{display:block;font-size:20px;margin-top:3px;font-family:Consolas,monospace}
.metric small{color:var(--muted);display:block;margin-top:2px;font-size:11px}

/* ---- 面板 ---- */
/* A3: border-radius 8px → 9px，对齐规范 05 · 统一组件外观 */
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:9px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
/* A4: padding 12px 16px → 12px 14px，对齐规范 05 · 面板标题 */
.panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  background:rgba(15,35,60,.75);
}
.panel-head h2{font-size:16px;margin:0;color:#fff}
.panel-head span{color:var(--subtle);font-size:12px}
.panel-head p{color:var(--primary-light);font-size:12px;margin:0}
/* 修改点：侧边栏数字徽章不换行——增加 display:inline-flex / white-space:nowrap / flex-shrink:0 / line-height:1，
   参考 UniRail 的 .uni-count，确保所有页面计数数字显示在一行不被挤压换行 */
.count{
  font-size:10px;
  border:1px solid rgba(45,156,219,.35);
  background:rgba(45,156,219,.12);
  color:var(--primary-light);
  padding:2px 7px;
  border-radius:99px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  flex-shrink:0;
  line-height:1;
}

/* ---- 工具栏 ---- */
/* A5: padding 14px → 10px 12px，对齐规范 05 · 工具条 */
.toolbar{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  background:rgba(15,35,60,.75);
}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---- 空状态 ---- */
.empty-state{
  text-align:center;
  padding:60px 20px;
  color:var(--subtle);
}
.empty-state i{font-size:48px;margin-bottom:16px;opacity:.4}
.empty-state h3{color:var(--muted);margin:0 0 8px}
.empty-state p{margin:0;font-size:13px}

/* ---- 数据表格 ---- */
.table-wrap{overflow:auto}
.table-wrap table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:680px;
}
/* A6: padding 6px 7px → 8px 9px，对齐规范 05 · 表格单元格 */
.table-wrap th,.table-wrap td{
  border-bottom:1px solid rgba(45,156,219,.14);
  padding:8px 9px;
  text-align:right;
  white-space:nowrap;
}
.table-wrap th{
  position:sticky;top:0;
  background:#0d2b4d;
  color:var(--muted);
  font-weight:600;
  font-size:11px;
  z-index:3;
  text-align:center;
}
.table-wrap td{
  font-family:Consolas,"Microsoft YaHei",monospace;
  color:#e8f4ff;
  font-size:12px;
}
.table-wrap td.left{text-align:left}
.table-wrap tr:hover td{background:rgba(45,156,219,.08)}
.table-wrap .code{color:var(--primary-light);font-weight:800}
.table-bar{min-width:80px}
.table-bar b{display:block;font-size:11px;color:inherit}

/* ---- 排行列表 ---- */
.rank-list{padding:10px 14px;display:grid;gap:8px}
.rank-item{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  border-bottom:1px solid rgba(45,156,219,.14);
  padding-bottom:8px;
}
.rank-item:last-child{border-bottom:0;padding-bottom:0}
.rank-no{
  width:30px;height:30px;
  border-radius:8px;
  background:#0b1b2f;
  display:grid;place-items:center;
  color:var(--primary-light);
  font-weight:800;
  font-size:13px;
}
.rank-name{
  font-weight:800;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.rank-sub{color:var(--subtle);font-size:12px;margin-top:3px}
.rank-val{font-family:Consolas,monospace;font-weight:800;font-size:14px}

/* ---- 事件列表 ---- */
.event{
  display:grid;
  grid-template-columns:54px minmax(0,1fr) 54px;
  gap:10px;
  align-items:center;
  border-bottom:1px solid rgba(45,156,219,.14);
  padding:8px 0;
}
.event:last-child{border-bottom:0}
.event time{color:var(--warn);font-family:Consolas,monospace;font-size:12px}
.event p{margin:0;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.event em{font-style:normal;color:var(--subtle);text-align:right;font-size:12px}

/* ---- 颜色辅助 ---- */
.up{color:var(--success)}
.down{color:var(--danger)}
.warn{color:var(--warn)}

/* ============================================================
   响应式
   ============================================================ */


@media(max-width:1220px){
  .top{grid-template-columns:180px minmax(0,1fr) auto auto}
  .brand-logo-img{height:32px}
  .topnav{max-width:620px;justify-content:flex-start}
  .subnav-inner{align-items:flex-start;flex-direction:column;padding:8px 0}
  .subnav{height:auto}
  .app{grid-template-rows:64px auto 1fr auto}
  .app.no-subnav{grid-template-rows:64px 1fr auto}
  .footer-inner{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-brand{grid-column:1/-1}
}



@media(max-width:820px){
  .top{height:auto;min-height:64px;align-items:flex-start;grid-template-columns:1fr;padding:10px 14px}
  .brand{height:auto}
  .brand-logo-img{height:auto;max-height:36px;max-width:100%}
  .topnav{width:100%;max-width:none;flex-wrap:wrap}
  .status-pill{align-self:flex-start}
  .user-area{align-self:flex-start}
  /* A7: 删除 .main / .main-full padding — 与默认值完全一致，冗余；≤760px 断点才会改变 */
  .page-head,.toolbar{flex-direction:column;align-items:stretch}
  .source{white-space:normal}
  .footer{padding:16px 16px 12px}
  .footer-inner{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center;gap:8px}
  /* 驾驶舱磁贴 */
  .cockpit-map{grid-template-columns:repeat(2,1fr)}
  .modules-grid{grid-template-columns:repeat(2,1fr)}
  .features-grid{grid-template-columns:1fr}
  .home-hero{flex-direction:column;text-align:center}
  .hero-stats{justify-content:center}
}



/* ════════════════════════════════════════════════════════════════
   uni-rail — 全局侧边栏规范（final-04 独立面板设计）

   独立圆角面板：16px 圆角、全边框、阴影、外边距
   颜色令牌：petrol 背景 + 青/金/绿三色强调
   结构：品牌标题(82px) + 摘要卡(70px) + 树滚动区 + 底部栏(52px)

   完整结构：
     <aside class="uni-rail">
       <div class="uni-rail-head">
         <div class="uni-brand-title"><small>TimeSeek</small><i></i><strong>品种与板块</strong></div>
       </div>
       <div class="uni-rail-summary">
         <div class="uni-summary-card group"><span>大类板块</span><hr><div class="uni-summary-value"><b>大金属</b></div></div>
         <div class="uni-summary-card board"><span>细分板块</span><hr><div class="uni-summary-value"><b>贵金属</b></div></div>
         <div class="uni-summary-card product"><span>品种</span><hr><div class="uni-summary-value"><b>白银</b><em>AG</em></div></div>
       </div>
       <div class="uni-rail-scroll">
         <button class="uni-root"><i class="fas fa-layer-group"></i><b>全部板块</b><span class="uni-count">77</span></button>
         <div class="uni-group">
           <button class="uni-group-row"><i class="fas fa-layer-group"></i><b>大金属</b><span class="uni-count">13</span><i class="fas fa-angle-right uni-chevron"></i></button>
           <div class="uni-sheet"><div class="uni-sheet-inner">
             <div class="uni-sheet-head"><span>细分板块</span><span>数量</span></div>
             <button class="uni-board-row"><b>贵金属</b><span>4</span></button>
             <div class="uni-sheet-head product-head"><span>具体品种</span><span>合约代码</span></div>
             <button class="uni-product-row"><b>白银</b><span><small>合约</small>AG</span></button>
           </div></div>
         </div>
       </div>
       <div class="uni-rail-footer"><i></i><span>行情参数已同步</span><b>43 个合约</b></div>
     </aside>
   ════════════════════════════════════════════════════════════════ */

/* ── 全局两栏布局：side rail + 主内容区
   对齐 LAYOUT TOKENS：两栏间距/页面边界均走 ts-* 令牌，统一规范 ── */
.page-layout {
  display: grid;
  grid-template-columns: var(--uni-rail-w, 250px) minmax(0, 1fr);
  gap: var(--ts-rail-gap, 14px);          /* A1: 18px 硬编码 → 令牌，与模块间距统一 */
  padding: var(--ts-page-gutter-x, 24px); /* A2: 24px 硬编码 → 令牌，响应式自动跟随 */
  width: 100%;
  min-width: 0;
  min-height: 0;
  align-items: start;
}
@media (max-width: 760px) {
  .page-layout { grid-template-columns: 1fr; padding: 12px; gap: 12px; }
}

/* ── 容器：独立圆角面板
   对齐 .page-layout padding:24px → top: CSS 变量 --uni-rail-sticky-top / height: calc(100vh - 变量)
   变量定义：
   - 默认 106px = header(64px) + subnav(42px)
   - .app-workspace 覆盖为 84px = header(64) + main-padding-top(20)，
     因为工作台没有 subnav，但 main-content 有 20px padding-top
   变量在 global.css 末尾通过 .app-workspace { --uni-rail-sticky-top: 84px } 注入 */
.uni-rail {
  width: var(--uni-rail-w, 250px);
  height: calc(100vh - var(--uni-rail-sticky-top, 106px));
  display: grid;
  grid-template-rows: 82px 70px minmax(0, 1fr) 52px;
  overflow: hidden;
  border: 1px solid var(--uni-rail-border, #294657);
  border-radius: var(--uni-rail-radius, 16px);
  /* 修改点：fallback 从绿色调 #071f2d 改为蓝色调 #07223E */
  background: var(--uni-rail-bg, #07223E);
  box-shadow: var(--uni-rail-shadow, 0 18px 50px rgba(0,0,0,.42));
  position: sticky;
  top: var(--uni-rail-sticky-top, 106px);
  z-index: 10;
  box-sizing: border-box;
  color: var(--uni-rail-text, #dceaf2);
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
}
/* 修改点：.ws-rail（工作台侧边栏）只有 scroll + footer 两个子元素，
   原 4 行 grid (82px header + 70px summary + 1fr scroll + 52px footer)
   前两行没 DOM 内容 → 变成空白。覆盖为 2 行：scroll 自适应 + footer 52px */
.ws-rail { grid-template-rows: minmax(0, 1fr) 52px; }
.uni-rail * { box-sizing: border-box; }
.uni-rail button { font: inherit; cursor: pointer; }

/* ── 品牌标题（82px）── */
.uni-rail-head {
  position: relative;
  display: flex; align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid #2c7d89;
  flex-shrink: 0;
}
.uni-brand-title {
  display: flex; align-items: center; gap: 11px;
}
.uni-brand-title small {
  margin: 0; font-size: calc(21px * var(--uni-rail-scale, 1)); font-weight: 800; line-height: 1;
  color: var(--uni-rail-gold, #f0b43c);
  font-family: "Segoe UI", "Microsoft YaHei UI", sans-serif;
  letter-spacing: -.02em;
}
.uni-brand-title i {
  width: 1px; height: 22px; background: rgba(113,167,184,.48);
}
.uni-brand-title strong {
  margin: 0; font-size: calc(21px * var(--uni-rail-scale, 1)); font-weight: 800; line-height: 1;
  color: var(--uni-rail-text, #dceaf2);
}
.uni-rail-head::after {
  content: ""; position: absolute; left: 20px; bottom: 10px;
  width: 34px; height: 3px; border-radius: 3px;
  background: var(--uni-rail-cyan, #41c9dc);
}

/* ── 摘要卡（70px · 三列横排）── */
.uni-rail-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding: 9px 14px 10px;
  border-bottom: 1px solid var(--uni-rail-line, #22485b);
  /* 修改点：fallback 从绿色调 #0a222e/#081e2a 改为蓝色调 #0d2b4d/#061c36 */
  background: linear-gradient(180deg, var(--uni-rail-bg-raised, #0d2b4d), #061c36);
  flex-shrink: 0;
}
.uni-summary-card {
  min-width: 0; height: 50px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 5px 7px;
  border: 1px solid rgba(80,127,146,.27);
  border-radius: 9px;
  background: rgba(12,43,57,.66);
  text-align: center;
}
.uni-summary-card > span {
  max-width: 100%; overflow: hidden;
  color: var(--uni-rail-muted, #7393a5); font-size: calc(9px * var(--uni-rail-scale, 1)); line-height: 1;
  white-space: nowrap; text-overflow: ellipsis;
}
.uni-summary-card > hr {
  width: 28px; margin: 4px auto; border: 0;
  border-top: 1px solid rgba(113,151,166,.35);
}
.uni-summary-value {
  max-width: 100%; display: flex; align-items: center; justify-content: center; gap: 5px;
}
.uni-summary-card > .uni-summary-value > b {
  overflow: hidden; font-size: calc(11px * var(--uni-rail-scale, 1)); line-height: 1.1;
  white-space: nowrap; text-overflow: ellipsis;
}
.uni-summary-card > .uni-summary-value > em {
  color: var(--uni-rail-cyan, #41c9dc); font: 700 calc(9px * var(--uni-rail-scale, 1))/1 Consolas, monospace; font-style: normal;
}
.uni-summary-card.group { border-color: rgba(240,180,60,.3); background: rgba(240,180,60,.055); }
.uni-summary-card.group > hr { border-color: rgba(240,180,60,.38); }
.uni-summary-card.group > .uni-summary-value > b { color: #f2bd55; }
.uni-summary-card.board { border-color: rgba(83,214,196,.3); background: rgba(83,214,196,.055); }
.uni-summary-card.board > hr { border-color: rgba(83,214,196,.36); }
.uni-summary-card.board > .uni-summary-value > b { color: #69d9c8; }
.uni-summary-card.product > .uni-summary-value > b { color: #f0b94c; }

/* ── 树滚动区 ── */
.uni-rail-scroll {
  min-height: 0; overflow-y: auto;
  padding: 9px 12px 20px 22px;
  scrollbar-width: thin;
  scrollbar-color: #2d6c87 transparent;
}

/* ── 根行（全部板块）49px ── */
/* 修改点：一级标签框内容居中——增加 justify-content:center / justify-items:center，
   使图标、文字、数字徽章在标签框内均匀分布、视觉居中 */
.uni-root,
.uni-group-row {
  width: 100%; height: 49px;
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr) auto 15px;
  align-items: center; justify-content: center; justify-items: center;
  gap: 9px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-bottom-color: var(--uni-rail-line, #22485b);
  border-radius: 8px;
  background: transparent;
  color: var(--uni-rail-row, #b9d0dd);
  text-align: left;
}
.uni-root { grid-template-columns: 29px minmax(0, 1fr) auto; }
.uni-root > i,
.uni-group-row > i:first-child { color: #8bb0c1; text-align: center; }
.uni-root > b,
.uni-group-row > b { font-size: calc(13px * var(--uni-rail-scale, 1)); font-weight: 750; }
/* 修改点：数字徽章不换行——增加 white-space:nowrap / flex-shrink:0 / line-height:1，
   确保所有板块和子板块的计数数字显示在一行，不被挤压换行 */
.uni-count {
  min-width: 31px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 7px; border-radius: 999px;
  background: var(--uni-rail-pill, #0d3a54);
  color: #b5ced9; font: 650 calc(11px * var(--uni-rail-scale, 1)) Consolas, monospace;
  white-space: nowrap; flex-shrink: 0; line-height: 1;
}
.uni-chevron { color: #77a2b4; font-size: calc(11px * var(--uni-rail-scale, 1)); transition: transform .18s; }
/* 改动原因：添加 chevron 展开旋转规则，供所有页面统一调用（替代页面内联 style） */
.uni-chevron.open { transform: rotate(90deg); }
.uni-root:hover,
.uni-group-row:hover { background: rgba(45,109,137,.12); color: #fff; }
.uni-root.active,
.uni-group-row.active {
  border-color: rgba(240,180,60,.58);
  background: rgba(240,180,60,.08);
  color: #f0b94c;
  box-shadow: inset 3px 0 0 #f0b94c;
}
.uni-group-row.active > i:first-child { color: #f0b94c; }

/* 旧变量兼容：uni-root > span / uni-group-row > span 映射到 .uni-count（同样不换行） */
.uni-root > span:not(.uni-count),
.uni-group-row > span:not(.uni-count) {
  min-width: 31px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 7px; border-radius: 999px;
  background: var(--uni-rail-pill, #0d3a54);
  color: #b5ced9; font: 650 calc(11px * var(--uni-rail-scale, 1)) Consolas, monospace;
  white-space: nowrap; flex-shrink: 0; line-height: 1;
}

/* ── 折叠面板 ── */
.uni-sheet {
  display: grid; grid-template-rows: 0fr;
  margin: 0 0 2px 28px;
  border-left: 1px solid #28617a;
  opacity: 0;
  transition: grid-template-rows .28s cubic-bezier(.22,.72,.18,1), opacity .18s;
}
.uni-sheet.is-open { grid-template-rows: 1fr; opacity: 1; }
.uni-sheet-inner { min-height: 0; overflow: hidden; padding-left: 15px; }

/* sheet-head 小标题 */
.uni-sheet-head {
  height: 31px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 11px; color: #7191a2; font-size: calc(10px * var(--uni-rail-scale, 1)); letter-spacing: .04em;
}
.uni-sheet-head.product-head {
  margin: 5px 0 0 12px; border-top: 1px solid rgba(61,114,139,.28);
}

/* ── board 细分板块 39px ── */
.uni-board-row {
  width: 100%; height: 39px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 11px;
  border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: #b6cbd5;
  text-align: left;
}
.uni-board-row > b { font-size: calc(13px * var(--uni-rail-scale, 1)); }
.uni-board-row > span { color: #83a8b9; font: calc(11px * var(--uni-rail-scale, 1)) Consolas, monospace; }
.uni-board-row:hover { background: rgba(45,109,137,.12); color: #fff; }
/* 修改点：细分板块选中态 — 青绿改蓝色，引用 --uni-rail-green（已全局调为 #6BC4FF） */
.uni-board-row.active {
  border-color: rgba(107,196,255,.48);
  background: rgba(107,196,255,.1);
  color: var(--uni-rail-green);
  box-shadow: inset 3px 0 0 var(--uni-rail-green);
}

/* ── product 具体品种 39px ── */
.uni-product-row {
  width: 100%; height: 39px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 11px 0 28px;
  border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: #b6cbd5;
  text-align: left;
}
.uni-product-row > b { font-size: calc(13px * var(--uni-rail-scale, 1)); }
.uni-product-row > span {
  display: flex; gap: 6px; color: #4fc4e0; font: 700 calc(11px * var(--uni-rail-scale, 1)) Consolas, monospace;
}
.uni-product-row > span > small { color: #718e9d; font: 500 calc(9px * var(--uni-rail-scale, 1)) "Microsoft YaHei", sans-serif; }
.uni-product-row:hover { background: rgba(45,109,137,.12); color: #fff; }
/* 改动原因：三级标签选中态改为只字体变金色，去掉金色边框/背景/左侧条 */
.uni-product-row.active {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.uni-product-row.active > b { color: #f2bc58; }
.uni-product-row.active > span { color: #f0b94c; }

/* ── 底部状态栏 52px ── */
.uni-rail-footer {
  height: 52px;
  display: grid; grid-template-columns: 14px 1fr auto;
  align-items: center; gap: 9px;
  padding: 0 20px;
  border-top: 1px solid var(--uni-rail-line, #22485b);
  background: #0b222d;
  color: #7995a4; font-size: calc(11px * var(--uni-rail-scale, 1));
  flex-shrink: 0;
}
.uni-rail-footer > i {
  width: 9px; height: 9px; border-radius: 50%;
  background: #38d4a9; box-shadow: 0 0 10px rgba(56,212,169,.5);
}
.uni-rail-footer > b { color: #54c6e0; font: 700 calc(11px * var(--uni-rail-scale, 1)) Consolas, monospace; }

/* 多行摘要页脚变体 — 供需要显示多行统计数据的页面统一调用（替代页面自定义 !important 覆盖） */
.uni-rail-footer.multi {
  height: auto !important;
  display: block !important;
  grid-template-columns: none !important;
  padding: 0 !important;
}
.uni-rail-footer.multi > div { padding: 8px 14px; }
.uni-rail-footer.multi > div > div {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 3px 0;
  color: #6f9bb1; font-size: 10px;
}
.uni-rail-footer.multi > div > div > b {
  max-width: 148px; color: #eaf4fb; text-align: right; font-size: 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600;
}
.uni-rail-footer.multi > div > div > b.up { color: #ff5a5f; }
.uni-rail-footer.multi > div > div > b.down { color: #12b981; }

/* ── 旧路径面包屑（兼容保留，新页面用摘要卡替代）── */
.uni-rail-path {
  min-height: 62px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 10px 12px; border-bottom: 1px solid var(--uni-rail-line, #22485b);
  /* 修改点：fallback 从绿色调 #0a222e 改为蓝色调 #0d2b4d */
  background: var(--uni-rail-bg-raised, #0d2b4d); flex-shrink: 0;
}
.uni-rail-path > i { color: #547f94; font-size: 9px; }
.uni-path-chip {
  height: 32px; display: inline-flex; align-items: center; gap: 5px; padding: 0 10px;
  border-radius: 999px; border: 1px solid rgba(76,201,232,.48);
  background: rgba(76,201,232,.07); color: #eaf7fb; font-size: 11px; font-weight: 700;
}
.uni-path-chip.gold { border-color: rgba(229,173,75,.58); background: rgba(229,173,75,.09); color: #f0c36e; }
.uni-path-chip.green { border-color: rgba(85,203,184,.52); background: rgba(85,203,184,.08); color: #7ddbc9; }
.uni-path-chip em { font: 600 10px Consolas, monospace; font-style: normal; color: #4cc9e8; margin-left: 3px; }

/* 标签头 */
.uni-label { font-size: 9px; letter-spacing: .05em; color: #668797; padding: 12px 10px 4px; }

/* 旧 tsi 图标全局样式（兼容） */
aside button > i.tsi,
[class*="sidebar"] button > i.tsi,
[class*="-rail"] button > i.tsi,
[class*="-side"] button > i.tsi {
  width: 29px; text-align: center; font-size: 14px;
  color: #8bb0c1; flex-shrink: 0; transition: color .15s;
}
aside button.active > i.tsi,
[class*="sidebar"] button.active > i.tsi { color: #4cc9e8; }

/* ════════════════════════════════════════════════════════════════
   A8: 补回缺失的 /* 开头，原注释块被截断
   uni-live-dot — 全局后端连接状态灯（对标 TimeSeekTerminal）
   三态：connected=绿 / connecting=金脉冲 / disconnected=红（默认）
   用法：<i class="uni-live-dot"></i>  由 App.vue 全局检测器动态切换 class
   ════════════════════════════════════════════════════════════════ */
.uni-live-dot {
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: #ef4444 !important;
  box-shadow: 0 0 6px #ef4444 !important;
  transition: background .3s, box-shadow .3s;
  flex-shrink: 0;
}
.uni-live-dot.uni-api-connected {
  background: #22c55e !important;
  box-shadow: 0 0 8px #22c55e !important;
}
.uni-live-dot.uni-api-connecting {
  background: #f59e0b !important;
  box-shadow: 0 0 8px #f59e0b !important;
  animation: uniDotPulse 1.2s ease-in-out infinite;
}
.uni-live-dot.uni-api-disconnected {
  background: #ef4444 !important;
  box-shadow: 0 0 6px #ef4444 !important;
}
@keyframes uniDotPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}