* { box-sizing: border-box; }
/* ★ 4.32（用户："为什么手机浏览器打开比微信浏览器更大，不整齐，很多换行，
   微信浏览器的比较美观"）——
   手机浏览器（安卓 Chrome 的"字体放大"/iOS 的文本自动调整）会把页面里的字**再放大**，
   于是原来一行放得下的标签全折成两行；微信内置浏览器不做这件事，所以微信里更好看。
   `text-size-adjust: 100%` 就是"别替我放大"的开关，两边就一致了。 */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  /* 用清晰的无衬线中文字体：宋体的「已/己」几乎一样、小字号还会发虚（用户反馈过"像素很差"） */
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "微软雅黑", "PingFang SC",
               "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  background: #fbf6ea;
  color: #222222;
}
nav { background: #1f1f1f; color: #ffffff; }
.nav-inner {
  max-width: 1080px; margin: 0 auto; padding: 12px 16px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.brand { font-weight: bold; font-size: 18px; margin-right: 12px; }
/* v3.97：导航最左边那个 logo（圆形，跟登录页同一个图） */
.nav-brand { display: flex; align-items: center; margin-right: 8px; padding: 0; }
.nav-brand img {
  width: 26px; height: 26px; border-radius: 50%; display: block;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18);
}
nav a { color: #e8d9b0; text-decoration: none; padding: 6px 8px; border-radius: 6px; }
nav a:hover { background: #1f1f1f; color: #ffffff; }
/* v3.99：按用户"100% 时字太贴屏幕边、但长条又太空"的反馈先试一版：
   内容区 1320 → **1240**（大屏不再那么空），左右留白 16 → **24**（小屏不贴边） */
/* ★ 4.10（用户："左侧空白和我的申请记录右侧空白可以再利用两厘米，宽一些"）：
   主画幅 1240 → 1400（约 +4cm），左右内边距 24 → 20，页面两边留白更少、表格列能铺开。 */
/* ★ 4.14（用户："画幅再加宽一点，左边持仓表就不用滚轴了"）：1560 → 1700 */
/* ★ 4.14（用户：画幅不能再加宽一点吗）—— 返回键改成小圆点后右侧不再被挡，画幅再放到 1780px */
main { max-width: 1780px; margin: 20px auto; padding: 0 12px; }
/* 下单页用满可用宽度：右边的分时图就能贴到沟通栏边上 */
main.wide { max-width: none; margin: 16px 8px 24px 16px; padding: 0; }
/* ★ 4.25（用户："下单确认页左侧卡片缩短三四厘米让左侧留白多一些，连带着下单确认这整个左侧往右移动"）
   只有"下单确认"这一页用 main.wide，所以这条规则只影响它。
   做法：给它加**左内边距** —— 标题「下单确认」、顶部那张摘要条、左栏（交易参数 + 确认要点）
   一起往右挪，左边自然留白；左栏宽度（flex 自动伸缩）因此少掉同样的像素，
   也就是用户要的"卡片缩短三四厘米"；右边的分时图**位置不动**（还是贴着沟通栏）。
   留白随屏宽平滑变化：≤1400px 不加（窄屏不挤），1920 屏正好加满 145px（≈3.8cm）。 */
main.wide { padding-left: clamp(0px, calc((100vw - 1400px) * 0.3), 145px); }
h1 { font-size: 24px; }
/* ★ 4.18（用户："每一页的主题如『我的订单』左边都放一个对应 icon，美化一下"） */
.h1-ico { width: 23px; height: 23px; vertical-align: -3px; margin-right: 8px; color: #a5760a; }
h1 { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
h1 .btn, h1 .hint, h1 .badge { margin-left: 8px; }
h2 { font-size: 19px; margin-top: 32px; border-bottom: 2px solid #e8d9b0; padding-bottom: 6px; }
.hint { color: #6f6f6f; font-size: 13px; }
.req-summary { font-size: 13px; color: #1f1f1f; cursor: pointer; }
.card {
  background: #ffffff; border: 1px solid #e8d9b0; border-radius: 10px;
  padding: 20px; margin: 16px 0;
}
.form-row { margin-bottom: 14px; }

/* ============================================================================
   ★ 4.18 客户询价页重排（用户："有一大半画幅是空的、字太贴左边、缩中间两边又太空"）
   做法：
   1) 表单卡本身**限宽居中**（max-width 1180）→ 有明确边界，视觉中心回到页面中间；
   2) 卡片内部改成**两栏**（左：标的/方向/规模/特殊需求；右：期限/结构）→ 把宽度用起来，不再一边空；
   3) 栏内控件**撑满本栏**（不再卡在 520px）→ 输入框看起来跟栏同宽，不"缩在左半"；
   4) 窄屏（≤900px）自动变回一栏，手机不受影响。
   ============================================================================ */
/* ★ 4.19（用户："询价页回到上一版；两侧留白增加一些；只有询价页画幅窄一点可以吗"）——
   4.18 那套"主表单 + 右侧说明栏"撤掉，回到原来中间居中的一张表单卡；
   但**只给询价页**一个更窄的画幅（`body.enq-page` 由 index.html 的 main_class 挂上），
   这样其它页照旧用满宽度，询价页两侧留白更从容。 */
/* ★ 4.21（用户："改回之前的版本…窄一点即可"）：询价页再收窄一点（1240 → 1120）
   ★ 4.24（用户："做错了，回复上一个版本"）：4.23 那次"标题文字跟卡片边框对齐、图标挂外侧"
     撤掉 —— 回到 4.22 的样子（图标和标题都在常规位置）。 */
main.enq-main { max-width: 1120px; }
form.enq-form { max-width: 1180px; margin: 16px auto 24px; padding: 22px 26px 18px; }
/* ★ 4.26（用户："注释右移动到与卡片左对齐"）：
   表单卡是 `max-width:1180px; margin:auto`（居中），而标题「新建询价」和上面几行注释是
   普通块级元素、**贴在最左边**（1920 屏实测：卡片 x=140、标题 x=26，差 114px，看着就是"没对齐"）。
   给它们同样的 `max-width:1180px + 左右 auto` —— 等于跟卡片用同一把尺子居中，
   任何屏宽下左边缘都自动和卡片对齐（不用写死 padding，窗口拉宽拉窄都不会错位）。
   `>` 限定只作用于 main 的直接子元素，表单里的注释不受影响。 */
main.enq-main > h1,
main.enq-main > p.hint { max-width: 1180px; margin-left: auto; margin-right: auto; }
.enq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; align-items: start; }
.enq-col { min-width: 0; }
form.enq-form input[type=text], form.enq-form input[type=number],
form.enq-form select, form.enq-form textarea { max-width: none; }
.enq-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 6px; padding-top: 14px; border-top: 1px dashed #fbf6ea; }
.enq-foot .btn { margin-left: auto; min-width: 160px; }
@media (max-width: 900px) {
  .enq-grid { grid-template-columns: 1fr; gap: 0; }
  .enq-foot .btn { margin-left: 0; width: 100%; }
}
.form-row label { display: block; font-weight: 600; margin-bottom: 5px; }
input[type=text], input[type=password], input[type=email], input[type=number], input[type=file], select {
  width: 100%; max-width: 520px; padding: 9px 10px;
  border: 1px solid #e8d9b0; border-radius: 8px; font-size: 15px;
  font-family: inherit;
  /* ★ 4.12（用户："设置页的框框全部错位了"）：
     input/textarea/select 默认是**行内元素** —— 画幅从 1240 加宽到 1560 之后，
     一个 520px 的输入框和 680px 的文本域就能挤在同一行里，页面看着就"全部错位"。
     统一改成块级：每个控件自己占一行；放在 flex 容器里（.inline/.stepper/.oa-row/聊天框）不受影响。 */
  display: block; box-sizing: border-box;
}
textarea {
  width: 100%; max-width: 680px; padding: 9px 10px;
  border: 1px solid #e8d9b0; border-radius: 8px; font-size: 13px; font-family: inherit;
  display: block; box-sizing: border-box;
}
.chips { margin-top: 8px; }
.check-chip {
  display: inline-block; border: 1px solid #d8b45c; background: #fbf6ea;
  border-radius: 8px; padding: 7px 12px; margin: 4px 6px 4px 0; cursor: pointer; font-size: 13px;
}
.check-chip input { margin-right: 5px; }
.chip {
  border: 1px solid #d8b45c; background: #fbf6ea; border-radius: 999px;
  padding: 5px 14px; margin-right: 6px; cursor: pointer; font-size: 13px;
}
.chip.active { background: #1f1f1f; color: #ffffff; border-color: #1f1f1f; }
.chip.selected { background: #d9d9d9; color: #333333; border-color: #9a958c; }
.stock-tags { margin-bottom: 6px; }
.stock-tags .chip { display: inline-flex; margin: 2px 6px 2px 0; }
.stock-input-wrap { position: relative; }

/* ★ 4.1：纠正一下 3.112 —— 客户说的"首页输入框白得很突兀"指的是**登录页**（不是询价页），
   所以我 3.112 加在询价页上的那条规则已经撤掉，改到下面 .auth-field 去处理。 */
.stock-suggest {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 120;
  background: #ffffff; border: 1px solid #e8d9b0; border-radius: 8px; max-height: 260px; overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.sug-item { padding: 8px 12px; cursor: pointer; font-size: 14px; }
.sug-item:hover { background: #fbf6ea; }
.sug-item.active { background: #e8d9b0; }
.sug-empty { color: #8a6400; font-size: 13px; cursor: default; }
.btn {
  display: inline-block; border: 1px solid #d8b45c; background: #ffffff;
  border-radius: 8px; padding: 10px 18px; cursor: pointer;
  text-decoration: none; color: #222222; font-size: 15px; margin: 4px 6px 4px 0;
  font-family: inherit;
}
.btn.primary { background: #1f1f1f; color: #ffffff; border-color: #1f1f1f; }
.btn.ok { background: #e4f4e6; border-color: #79b98a; color: #1d6b2f; }
.btn.bad { background: #fbe8e8; border-color: #d98a8a; color: #9c1f1f; }
.btn.small { padding: 6px 12px; font-size: 13px; }
.btn.lg { padding: 9px 18px; font-size: 15px; }
.btn.btn-strong { font-weight: 800; letter-spacing: .5px; }
.actions { margin: 18px 0; }
.table {
  width: 100%; border-collapse: collapse; background: #ffffff;
  border: 1px solid #e8d9b0; border-radius: 10px; overflow: hidden;
  font-size: 14px;
}
.table th, .table td {
  border-bottom: 1px solid #fbf6ea; padding: 10px 12px; text-align: left; vertical-align: top;
}
.table th { background: #fbf6ea; font-weight: 600; }
.table tr.quoted { background: #f6fbf7; }
.table tr.manual { background: #fffaf0; }
/* 我的订单列宽：标的列留足宽度；只有"交易台"这类英文列允许断词，避免挤窄其它列 */
.orders-table td:nth-child(1) { min-width: 150px; }
.orders-table th:nth-child(1) { min-width: 150px; }
.orders-table td:nth-child(3) { overflow-wrap: anywhere; }
/* ★ 4.18：画幅变宽后这几列被"状态/时间"挤到只剩一个字符宽（YH102 竖着排、100万 折行）。
   给它们保底宽度 + 不换行；状态那列内容长，仍然允许折行。 */
.orders-table th:nth-child(3), .orders-table td:nth-child(3) { min-width: 88px; white-space: nowrap; }
.orders-table th:nth-child(4), .orders-table td:nth-child(4) { min-width: 60px; white-space: nowrap; }
.orders-table th:nth-child(5), .orders-table td:nth-child(5) { min-width: 60px; white-space: nowrap; }
.orders-table th:nth-child(6), .orders-table td:nth-child(6) { min-width: 64px; white-space: nowrap; }
.orders-table th:nth-child(7), .orders-table td:nth-child(7) { min-width: 60px; white-space: nowrap; }
.orders-table th:nth-child(8), .orders-table td:nth-child(8) { min-width: 56px; white-space: nowrap; }
.quote-table th:nth-child(1), .quote-table td:nth-child(1) { min-width: 110px; white-space: nowrap; }
.quote-table th:nth-child(2), .quote-table td:nth-child(2) { min-width: 100px; }
.quote-table th:nth-child(3), .quote-table td:nth-child(3) { min-width: 80px; }
.quote-table th:nth-child(4), .quote-table td:nth-child(4) { min-width: 100px; }
.quote-table th:nth-child(5), .quote-table td:nth-child(5) { min-width: 200px; }
.quote-table td[rowspan] { vertical-align: middle; text-align: center; }
.merge-cell { vertical-align: middle !important; text-align: center; }
.request-card { padding: 12px 14px; }
.req-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-bottom: 8px; flex-wrap: wrap;
}
.req-actions { margin-top: 8px; text-align: right; }
/* 今日/历史询价卡片：结构 / 期限 / 报价 / 敲出规则 / 最早行权日 / 分红派息规则 / 参考到期日 / 参考额度 */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* ★ 4.39（用户："报价页栏目对齐；分红列宽 1.5 个中文字符；参考额度和下单键之间的空缩窄对齐其他列空；
   画幅变窄、左侧多一点留白"）——
   整表缩到 830（省下来的宽度给两侧留白），列宽同步收：分红 -20px、更新时间 -16px。 */
/* ★ 4.41（用户："里面不同标的卡片还是没对齐列"）——
   根因：表格是 `table-layout:auto` + `width:100%`，**每张卡按自己的内容重新分配列宽**，
   所以 A 标的卡片和 B 标的卡片的列不在一条线上。改成 `table-layout:fixed`：
   列宽只听下面 nth-child 那套（每张卡都一样），列与列就跨卡片对齐了。 */
.request-table { min-width: 830px; table-layout: fixed; }
/* ★ 4.41（用户："行头一行，不要换行"）：表头文字不折行 */
.request-table thead th { white-space: nowrap; font-size: 13px; }
/* ★ 4.41（用户："参考额度与下单按钮之间太宽了"）：动作列收窄，下单键贴着额度列 */
.request-table th:last-child, .request-table td:last-child { width: 96px; }
.request-table td .quote-act { gap: 4px; }
.request-table th:nth-child(1), .request-table td:nth-child(1) { width: 30px; }   /* 勾选 */
.request-table th:nth-child(2), .request-table td:nth-child(2) { width: 56px; }   /* 结构 */
.request-table th:nth-child(3), .request-table td:nth-child(3) { width: 66px; }   /* 期限 */
.request-table th:nth-child(4), .request-table td:nth-child(4) { width: 92px; }   /* 报价 + 标注 */
.request-table th:nth-child(5), .request-table td:nth-child(5) { width: 216px; }  /* 敲出规则（v5.12 +2 中文字） */
.request-table th:nth-child(6), .request-table td:nth-child(6) { width: 118px; }  /* 最早行权日 */
.request-table th:nth-child(7), .request-table td:nth-child(7) { width: 189px; }  /* 分红派息规则（4.40：再宽一个字） */
.request-table th:nth-child(8), .request-table td:nth-child(8) { width: 88px; }   /* 参考到期日 */
.request-table th:nth-child(9), .request-table td:nth-child(9) { width: 62px; }   /* 参考额度（v5.12 -2 中文字；表头会跟着窄） */
.request-table th:nth-child(10), .request-table td:nth-child(10) { width: 88px; } /* 更新时间（4.39：-16，跟下单键挨近些） */
.request-table th:nth-child(11), .request-table td:nth-child(11) { width: 62px; } /* 下单 + 复制 */
.request-table td.nowrap, .request-table th.nowrap { white-space: nowrap; }
.request-table td.blk-merge {
  vertical-align: middle; text-align: center; white-space: nowrap;
  font-size: 15px; font-weight: 600; color: #1f1f1f; background: #fbf6ea;
}
.request-table .rate { font-size: 15px; }
.request-table .best-cell { font-weight: 700; }
@keyframes goldFlash {
  0%   { background: transparent; box-shadow: none; }
  20%  { background: #ffe9a8; box-shadow: 0 0 12px 3px rgba(255,196,40,.95); }
  45%  { background: transparent; box-shadow: none; }
  70%  { background: #ffe9a8; box-shadow: 0 0 12px 3px rgba(255,196,40,.95); }
  100% { background: transparent; box-shadow: none; }
}
.flash-gold {
  animation: goldFlash 2.4s ease-in-out 1;
  border-radius: 6px;
}
.request-table td.rule { font-size: 12px; color: #3a3a3a; line-height: 1.35; }
.row-tags { margin-top: 3px; }
/* ★ 4.84（用户："暂无报价和最佳报价气泡大小一样、字体大小一样、不要加粗"）——
   报价表里这两枚标签统一成同一规格（12px / 3px 10px / 常规字重）。
   ⚠️ 只作用于报价表的标签，别动订单页的"交易成功"（那是 `.badge.ok`，要加粗）。 */
.row-tags .badge {
  font-size: 12px; font-weight: 400; padding: 3px 10px; margin: 1px 2px 0 0; display: inline-block;
}
.request-table .badge.bad, .request-table .badge.wait, .mobile-card .badge.bad, .mobile-card .badge.wait {
  font-size: 12px; font-weight: 400; padding: 3px 10px;
}
/* ★ 4.92（用户："最佳报价不用加粗，这几个标签小一点、高度短一点"）——
   报价相关的标签统一：11.5px / 常规字重 / 高度更矮（1px 8px），"最佳报价"也不加粗。 */
.row-tags .badge, .request-table .badge, .quote-mobile .badge, .mobile-card .badge {
  font-size: 11.5px !important; font-weight: 400 !important;
  padding: 1px 8px !important; line-height: 1.6 !important;
}
.quote-key, .best-badge { font-weight: 400 !important; }
.row-actions-v { display: flex; flex-direction: column; align-items: center; gap: 4px; }
/* 下单按钮要明显：深蓝底白字、比复制图标大一圈 */
a.order-go {
  display: inline-block; white-space: nowrap;
  background: #1f1f1f; color: #ffffff; border: 1px solid #1f1f1f; border-radius: 6px;
  padding: 5px 12px; font-size: 13px; font-weight: 700; text-decoration: none;
}
a.order-go:hover { background: #1f1f1f; }
.request-table td.blk {
  vertical-align: middle; text-align: center; white-space: nowrap;
  color: #1f1f1f; background: #fbf6ea;
}
.request-table tr.blk-start > td { border-top: 2px solid #e8d9b0; }
.pending-hint { margin: 8px 2px 0; color: #8a6400; }
.orders-table .stock-code { font-weight: 600; white-space: nowrap; }
.orders-table .stock-name { color: #222222; }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.empty { text-align: center; color: #9a958c; padding: 24px !important; }
.orders-mobile, .quote-mobile { display: none; }
.link-copy { display: flex; gap: 8px; margin: 10px auto; max-width: 640px; align-items: center; }
.link-copy input { flex: 1; font-size: 12px; min-width: 0; }
.link-copy .join-link {
  flex: 1; min-width: 0; font-size: 12px; color: #1f1f1f;
  overflow-wrap: anywhere; text-decoration: underline;
}
.copy-icon {
  background: none; border: none; color: #1f1f1f; cursor: pointer;
  padding: 4px 6px; vertical-align: middle; border-radius: 6px;
}
.copy-icon:hover { background: #fbf6ea; }
/* 询价等待动画 */
.loading-pill {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 600; display: flex; align-items: center; gap: 3px;
  padding: 9px 18px; border-radius: 999px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(255,193,90,.75);
  box-shadow: 0 8px 26px rgba(120,80,0,.22), 0 0 0 4px rgba(255,205,110,.16);
}
.loading-pill .lbl { font-size: 14px; color: #8a6400; letter-spacing: 1px; margin-right: 6px; }
.loading-pill .arrow {
  font-size: 15px; font-weight: 800; line-height: 1;
  background: linear-gradient(180deg, #ffd479, #ff9d2e 70%, #ff7a00);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: arrow-rise 1.3s ease-in-out infinite;
}
.loading-pill .arrow:nth-child(2) { animation-delay: .08s; }
.loading-pill .arrow:nth-child(3) { animation-delay: .16s; }
.loading-pill .arrow:nth-child(4) { animation-delay: .24s; }
.loading-pill .arrow:nth-child(5) { animation-delay: .32s; }
.loading-pill .arrow:nth-child(6) { animation-delay: .40s; }
.loading-pill .arrow:nth-child(7) { animation-delay: .48s; }
@keyframes arrow-rise {
  0%, 70%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-7px); opacity: 1; }
}
.badge { border-radius: 999px; padding: 3px 10px; font-size: 12px; white-space: nowrap; }
.badge.ok { background: #e4f4e6; color: #1d6b2f; }
.badge.wait { background: #fff3d6; color: #8a6400; }
/* v3.57：「接单」按钮要跟「待接单」那个状态**一样的黄色**（用户要求）——
   直接取 .badge.wait 的配色（#fff3d6 底 + #8a6400 字），加个边框和加粗，看起来还是按钮。 */
.btn.yellow { background: #fff3d6; border-color: #e3c470; color: #8a6400; font-weight: 700; }
.btn.yellow:hover { background: #ffeec2; border-color: #d9b65a; }
.badge.bad { background: #fbe8e8; color: #9c1f1f; }

/* "还有 N 家"：只是一个很细的小三角，占位越小越好，靠左 */
.request-table td.extra-cell { padding: 1px 0 3px 2px; border: none; background: transparent; }
.request-table tr.extra-toggle-row td.extra-cell::before { content: ""; margin: 0; }
.extra-btn {
  display: inline-block; text-align: left; cursor: pointer;
  font: inherit; font-size: 11.5px; line-height: 1.3;
  padding: 1px 8px 1px 6px; border-radius: 999px;
  background: transparent; border: 1px dashed #e8d9b0; color: #6f6f6f;
}
.extra-btn:hover { background: #fbf6ea; border-color: #d8b45c; color: #1f1f1f; }
.flash { border-radius: 8px; padding: 12px 16px; margin: 10px 0; }
.flash.ok { background: #e4f4e6; color: #1d6b2f; }
.flash.error { background: #fbe8e8; color: #9c1f1f; }
.warn { color: #9c5c00; background: #fff6e3; padding: 10px 12px; border-radius: 8px; }
.inline { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.inline input { width: 110px; padding: 6px 8px; }
.inline input[type=text] { width: 180px; }
.terms summary { cursor: pointer; color: #1f1f1f; font-size: 12px; }
.terms pre, .terms-pre, .message-pre {
  white-space: pre-wrap; background: #fbf6ea; border: 1px solid #e8d9b0;
  border-radius: 8px; padding: 10px; font-size: 13px; line-height: 1.6;
}
.hidden-msg {
  position: absolute; left: -9999px; width: 1px; height: 1px;
}

/* 下单页双栏布局 */
/* 左右两块等高（平仓页点"时间均价/限价"以后左边长高，右边要跟着一样长，不然一高一矮很难看） */
.layout-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
@media (max-width: 900px) { .layout-2 { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .nav-inner { gap: 8px; padding: 8px; }
  nav a { padding: 5px 7px; font-size: 13px; }
  .nav-user { display: none; }        /* 手机上不显示"用户名（客户）"，nav 短一点 */
  /* 手机导航就一行：只隐藏「退出」（浏览器自带返回就够了），**保留「密码」**，铃声靠最右 */
  .nav-logout { display: none; }
  .nav-inner { flex-wrap: nowrap; overflow-x: auto; gap: 4px; }
  .nav-inner::-webkit-scrollbar { display: none; }
  .bell-wrap { margin-left: auto; }
  main { max-width: 100%; margin: 10px auto; padding: 0 8px; }
  h1 { font-size: 20px; }
  .card { padding: 12px; margin: 10px 0; }
  .table th, .table td { padding: 8px 6px; font-size: 13px; }
  .check-chip { padding: 6px 10px; font-size: 13px; }
  .chat-input { flex-direction: column; align-items: stretch; }
  .msg-text { max-width: 95%; }
  #spot-chart { width: 100% !important; height: auto !important; }
  .actions { display: flex; flex-wrap: wrap; }
}

/* ★ 4.29（用户："手机侧点logo可以有退出键"）：手机点顶栏 logo 弹出的「退出登录」小菜单
   （只在手机上有这个入口：手机导航为了一行放得下把「退出」藏了，改藏到 logo 后面） */
.nav-logo-menu {
  position: fixed; z-index: 340; min-width: 132px;
  background: #ffffff; border: 1px solid #e8d9b0; border-radius: 10px;
  box-shadow: 0 12px 28px rgba(20, 40, 70, .2); overflow: hidden;
  animation: msgMenuIn .13s ease-out;
}
.nav-logo-menu a {
  display: block; padding: 11px 16px; font-size: 15px; color: #b3261e;
  text-decoration: none; white-space: nowrap;
}
/* ★ 4.31：菜单第一行显示"账号：xxxx"（本人核对用），第二行才是退出登录 */
.nav-logo-menu .nl-user {
  padding: 9px 16px 7px; font-size: 12.5px; color: #6f6f6f;
  border-bottom: 1px solid #fbf6ea; white-space: nowrap;
}
.nav-logo-menu .nl-ver { margin-left: 8px; font-style: normal; color: #9a958c; font-size: 11.5px; }
.nav-logo-menu a:active { background: #fbf6ea; }

/* ============================================================================
   ★ 4.36（taste-pm 六步法第④步：按产品定性选布局骨架）

   客户的手机端是"交易型"产品 —— 标准骨架不是"顶栏塞一排字"，而是**底部 5 Tab**：
     询价（核心动作，默认落地）/ 报价 / 订单 / 资金 / 消息
   拇指可达、≤5 个、消息中枢放最右、"账号/退出"不占 Tab（收在 logo 菜单里）。
   顶栏在手机端只留 logo + 铃铛 + 密码那一行（原来是 6 个入口横着滚，拇指够不到）。
   电脑端**完全不动**（那里有右侧沟通栏 + 顶栏，够用）。
   ============================================================================ */
.tabbar { display: none; }          /* 电脑端不出现 */

@media (max-width: 760px) {
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 65;
    background: #ffffff; border-top: 1px solid #e8d9b0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -2px 10px rgba(20, 40, 70, .06);
  }
  .tabbar .tb-item {
    flex: 1 1 0; min-width: 0; position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 0; padding: 7px 2px 5px; border: 0; background: transparent;
    color: #9a958c; font-size: 11px; line-height: 1.1; text-decoration: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .tabbar .tb-item .h1-ico { width: 21px; height: 21px; margin: 0; vertical-align: 0; }
  .tabbar .tb-item.on { color: #1f1f1f; font-weight: 700; }
  .tabbar .tb-item.on .h1-ico { color: #1f1f1f; width: 22px; height: 22px; }
  .tabbar .tb-item:active { background: #fbf6ea; }
  .tb-badge {
    position: absolute; top: 3px; left: 50%; margin-left: 3px;
    min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px;
    background: #e8452c; color: #ffffff; border-radius: 999px; font-style: normal;
    font-size: 10.5px; font-weight: 700; text-align: center;
  }
  /* 底栏占位：内容别被最后一行盖住 */
  main { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  /* 这 5 个入口已经在底栏里了，顶栏不再重复（手机顶栏就一行：logo + 铃铛 + 密码） */
  nav .nav-page { display: none; }
  /* 消息入口已经在底栏，右下角那个 💬 浮标手机上撤掉（少一个浮动遮挡） */
  .rail-toggle { display: none !important; }
  /* 版本号那行**不再霸占底栏上方**（飘在内容上很难看）：手机上收进 logo 菜单的第一行
     （"账号：A010001  v4.36"）。登录页的版本号仍然贴在页面最底部（auth-dark 那套规则）。 */
  body:not(.auth-dark) .footer { display: none; }
}

/* ============================================================================
   ★ 4.37（taste-pm 第④步）：交易员**电脑端** = 左侧边栏 + 内容区
   中后台型的标准骨架（飞书/扣子工作空间那套）：导航固定在左边、内容区占满剩下的宽度。
   只在 ≥1100px 生效；手机/平板仍是底部 Tab。右上角「‹」可以把左栏收成图标栏（记在本地）。
   ============================================================================ */
/* ★ 4.38（用户："电脑回归之前没有边栏的版本"）：4.37 那套左侧边栏**整块撤掉**，
   交易员电脑端回到"顶栏一排 + 内容区居中限宽"的旧版式（相关模板/JS 也一起删了）。 */

@media (max-width: 760px) {
  .orders-desktop, .quote-desktop { display: none; }
  .orders-mobile, .quote-mobile { display: block; }
  /* 今日/历史询价：手机上不做左右滑动的表格，直接变成一张张卡片 */
  .table-scroll { overflow-x: visible; }
  .request-table { min-width: 0; width: 100%; border: none; }
  .request-table thead { display: none; }
  .request-table, .request-table tbody, .request-table tr, .request-table td { display: block; width: auto; }
  .request-table tr:not(.extra-toggle-row) {
    border: 1px solid #e8d9b0; border-radius: 10px; background: #ffffff;
    padding: 8px 12px; margin: 8px 0;
  }
  .request-table tr:not(.extra-toggle-row)::before {
    content: attr(data-block); display: block; font-weight: 700; color: #1f1f1f;
    font-size: 15px; margin-bottom: 4px;
  }
  .request-table td { border: none !important; padding: 2px 0; text-align: left !important; }
  .request-table td.num { text-align: left !important; }
  .request-table td::before { content: attr(data-label); color: #6f6f6f; font-size: 12px; margin-right: 6px; }
  .request-table td.blk-merge { display: none; }         /* 结构/期限 已写在卡片标题 */
  .request-table td:first-child::before,
  .request-table td:last-child::before { content: ""; margin: 0; }
  .request-table td:last-child { padding-top: 6px; }
  .request-table .row-actions-v { flex-direction: row; justify-content: flex-start; gap: 8px; }
  .request-table .rate { font-size: 18px; }
  .request-table tr.extra-toggle-row { border: none; padding: 0; margin: 0; }
  /* 手机上"今日/历史询价"用"我的订单"同款卡片，桌面表格藏起来 */
  .quote-mobile .mobile-card { margin: 10px 0; }
  .quote-mobile .mc-rule { font-weight: 400; font-size: 12px; color: #3a3a3a; }
  .quote-mobile .extra-toggle-row { margin: 2px 0 6px 2px; }
  .quote-mobile .extra-btn { font-size: 12px; }
  .quote-mobile .mc-actions .order-go { padding: 6px 16px; font-size: 14px; }
  .mobile-card {
    background: #ffffff; border: 1px solid #e8d9b0; border-radius: 10px;
    padding: 12px 14px; margin: 10px 0;
  }
  .mc-title { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
  .orders-mobile .mc-title { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
  .mc-code { font-size: 13px; font-weight: 400; color: #6f6f6f; }
  .mc-row {
    display: flex; justify-content: space-between; align-items: center;
    gap: 10px; margin: 7px 0; font-size: 14px;
  }
  .mc-row > span { color: #6f6f6f; flex: 0 0 auto; }
  .mc-row > b { text-align: right; }
  .mc-tags { margin: 6px 0; }
  .mc-note { color: #8a6400; font-size: 13px; margin-top: 6px; }
  .mc-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
  /* 报价结果：保留勾选、期限、结构、费率、规模、状态，其余折叠 */
  .results-table th:nth-child(2),  .results-table td:nth-child(2),
  .results-table th:nth-child(7),  .results-table td:nth-child(7),
  .results-table th:nth-child(8),  .results-table td:nth-child(8),
  .results-table th:nth-child(9),  .results-table td:nth-child(9) { display: none; }

  /* 今日/历史询价：规则明细折叠，保留 期限/结构/规模/报价/标注/下单 */
  .quote-table th:nth-child(5), .quote-table td:nth-child(5),
  .quote-table th:nth-child(6), .quote-table td:nth-child(6),
  .quote-table th:nth-child(7), .quote-table td:nth-child(7),
  .quote-table th:nth-child(8), .quote-table td:nth-child(8) { display: none; }

  /* 交易员工作台：砍掉次要列，动作区换行。
     v3.58：费率/规模拆成两列后列号整体后移一位 → 移动端藏 1/2/4/7/8/9/10/11
     （留 3 标的、5 期限、6 结构、12 状态、13 处理） */
  .trader-open th:nth-child(1), .trader-open td:nth-child(1),
  .trader-open th:nth-child(2), .trader-open td:nth-child(2),
  .trader-open th:nth-child(4), .trader-open td:nth-child(4),
  .trader-open th:nth-child(7), .trader-open td:nth-child(7),
  .trader-open th:nth-child(8), .trader-open td:nth-child(8),
  .trader-open th:nth-child(9), .trader-open td:nth-child(9),
  .trader-open th:nth-child(10), .trader-open td:nth-child(10),
  .trader-open th:nth-child(11), .trader-open td:nth-child(11) { display: none; }

  .trader-close th:nth-child(1), .trader-close td:nth-child(1),
  .trader-close th:nth-child(2), .trader-close td:nth-child(2),
  .trader-close th:nth-child(6), .trader-close td:nth-child(6),
  .trader-close th:nth-child(7), .trader-close td:nth-child(7) { display: none; }

  .trader-noquote th:nth-child(1), .trader-noquote td:nth-child(1),
  .trader-noquote th:nth-child(5), .trader-noquote td:nth-child(5),
  .trader-noquote th:nth-child(6), .trader-noquote td:nth-child(6),
  .trader-noquote th:nth-child(8), .trader-noquote td:nth-child(8) { display: none; }

  .trader-update th:nth-child(1), .trader-update td:nth-child(1),
  .trader-update th:nth-child(5), .trader-update td:nth-child(5) { display: none; }

  .trader-open .order-actions, .trader-close .order-actions,
  .trader-noquote form, .trader-update form { min-width: 0; width: auto; }
  .oa-row input[type=number], .oa-row input[type=text], .oa-row select { width: 88px; }
  .inline select { max-width: 180px; }
}
.panel { background: #ffffff; border: 1px solid #e8d9b0; border-radius: 10px; padding: 18px; }
.panel h3 { margin-top: 0; }
.stepper { display: inline-flex; align-items: center; gap: 6px; }
.stepper button { min-width: 30px; height: 30px; padding: 0 8px; border-radius: 6px; border: 1px solid #d8b45c; background: #fbf6ea; cursor: pointer; font-size: 15px; line-height: 1; white-space: nowrap; }
.stepper input { width: 90px; text-align: center; }

/* 首页询价表："其它期限"折叠区 + 特殊需求里的参与度小板块 */
.fold-chips { margin-top: 6px; }
.fold-chips > summary {
  cursor: pointer; font-size: 12px; color: #6f6f6f; display: inline-block;
  padding: 2px 10px; border: 1px dashed #e8d9b0; border-radius: 999px; background: #fbf6ea;
}
.fold-chips > summary:hover { background: #fbf6ea; color: #1f1f1f; }
.fold-chips[open] > summary { margin-bottom: 2px; }
.sub-block { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #e8d9b0; }
.sub-block label { display: block; font-size: 13px; color: #3a3a3a; margin-bottom: 6px; }
/* ★ 4.32（用户："新建询价页所有框左右对齐（有两个就差一点点）"）：
   特殊需求原来是个"卡片套卡片"，里面的输入框被内层卡片的左右内边距挤窄了 15px。
   改成"一条虚线分隔的折叠区"：section 本身没有左右内边距，里面每个框左右边都和上面的框齐平。 */
form.enq-form details.req-fold {
  border: none; background: transparent; padding: 0;
  margin-top: 10px; border-top: 1px dashed #fbf6ea; padding-top: 10px;
}
form.enq-form details.req-fold > summary { cursor: pointer; font-weight: 700; color: #1f1f1f; font-size: 14px; }
form.enq-form details.req-fold[open] > summary { margin-bottom: 8px; }
/* 勾选块（.check-chip）左右也跟输入框对齐：整行铺满、去掉右边那 6px 的间距 */
form.enq-form .chips { display: flex; flex-wrap: wrap; gap: 6px; }
form.enq-form .chips > .check-chip { flex: 1 1 100%; margin: 0; }

/* ★ 4.37：询价页顶部那条"最近一笔询价"状态条**已撤掉**（用户："删去，占地方"）——
   需要"报价回来没有"就看手机上底栏"报价"Tab 的红点 / 电脑右侧沟通栏，不再占一条版面。 */
.mode-btns { display: flex; gap: 8px; margin: 8px 0; }
.mode-btn { border: 1px solid #d8b45c; background: #ffffff; border-radius: 8px; padding: 8px 14px; cursor: pointer; font-size: 14px; }
.mode-btn.active { background: #1f1f1f; color: #ffffff; border-color: #1f1f1f; }
.mode-note { color: #8a6400; font-size: 13px; }
.confirm-box { background: #fbf6ea; border: 1px solid #e8d9b0; border-radius: 10px; padding: 14px; }
.fee-big { font-size: 24px; font-weight: bold; color: #8a6a1f; }
.tag { display: inline-block; background: #fbf6ea; color: #1f1f1f; border-radius: 6px; padding: 4px 10px; font-size: 12px; margin: 3px 4px 0 0; }
.term-check { margin-top: 14px; font-size: 13px; }

/* 交易员订单处理表单 */
.order-actions { display: flex; flex-direction: column; gap: 6px; min-width: 300px; }

/* 交易员工作台：居中、宽度刚好够到"沟通"按钮；每列比上一版窄一个中文字左右 */
/* v3.58：费率/规模拆两列 + 订单编号变长 + 客户/标的/交易台各加宽 2 个中文字 →
   整表约多 170px，所以上限从 1520 放到 1680；对外层再套 .table-scroll-nox 兜底，
   屏幕不够宽时只在表格里横滚，不会把整页顶宽。 */
main.trader-main { max-width: 1680px; margin: 16px auto; padding: 0 12px; }
.trader-open th, .trader-open td,
.trader-close th, .trader-close td,
.trader-noquote th, .trader-noquote td,
.trader-update th, .trader-update td { padding-left: 6px; padding-right: 6px; }
/* v3.60：费率/规模拆列后列号后移 —— 期限5 / 结构6 / 方向8 / 费率9 / 规模10 / 起始到期11 都要不换行
   （起始到期那列现在是"起始日<br>到期日"两行，也不该被折成更碎） */
.trader-open td:nth-child(5), .trader-open td:nth-child(6), .trader-open td:nth-child(8),
.trader-open td:nth-child(9), .trader-open td:nth-child(10), .trader-open td:nth-child(11),
.trader-close td:nth-child(4), .trader-close td:nth-child(5),
.trader-close td:nth-child(6) { white-space: nowrap; }
.trader-open .order-actions, .trader-close .order-actions { min-width: 360px; }
/* v3.60：第一行（价格 + 成交 + 部分成交 + 提交 + 接单）**不许换行** ——
   以前宽度不够时"接单"会被挤到第二行去（用户："接单放回部分成交右边不要另起一行"）。 */
.order-actions .oa-row:first-child { flex-wrap: nowrap; }
.order-actions .oa-row:first-child input[type=number] { width: 92px; }
.trader-open td:nth-child(1) { white-space: nowrap; }   /* 订单号那一列别换行 */
/* v3.58：订单编号 = 客户编号-下单日期-历史第几单（比较长）→ 给它更宽、不换行；
   客户 / 标的 / 交易台 各加宽 2 个中文字符（≈2em）。 */
/* v3.59：订单编号 / 客户 这两列各收窄 1 个中文字符（用户要求） */
.trader-open th:nth-child(1), .trader-open td:nth-child(1),
.trader-close th:nth-child(1), .trader-close td:nth-child(1) { min-width: 12.5em; }
.trader-open th:nth-child(2), .trader-open td:nth-child(2),
.trader-close th:nth-child(2), .trader-close td:nth-child(2) { min-width: 5em; white-space: nowrap; }
.trader-open th:nth-child(3), .trader-open td:nth-child(3),
.trader-close th:nth-child(3), .trader-close td:nth-child(3) { min-width: 10.5em; }
.trader-open th:nth-child(4), .trader-open td:nth-child(4) { min-width: 6em; white-space: nowrap; }
/* 平仓处理：现在只有"平仓名义"一列（不再显示比例） */
.trader-close td:nth-child(6) { white-space: nowrap; }
/* 加点的灰色小字，如 "7.69% (30bps)" 里的 (30bps) */
.mk-gray { color: #9a958c; font-size: 12px; }
.tier-editor { display: flex; flex-direction: column; gap: 4px; max-width: 460px; }
.tier-line { display: flex; align-items: center; gap: 4px; }
.tier-line input { width: 76px; }
.oa-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.oa-row input[type=number], .oa-row input[type=text] { width: 100px; padding: 6px 8px; }
.oa-row select { width: auto; padding: 6px 8px; }

/* 标签页 */
.tabs { display: flex; gap: 8px; margin: 12px 0; }
.tab { border: 1px solid #d8b45c; background: #ffffff; border-radius: 8px; padding: 8px 18px; cursor: pointer; font-size: 14px; }
.tab.active { background: #1f1f1f; color: #ffffff; border-color: #1f1f1f; }

/* 聊天 */
.chat-box { background: #ffffff; border: 1px solid #e8d9b0; border-radius: 10px; padding: 14px; max-height: 460px; overflow-y: auto; }
.msg { margin-bottom: 12px; }
.msg-who { font-size: 12px; color: #9a958c; display: block; }   /* 昵称+时间单独一行，气泡文字另起一行 */
.msg-text { background: #fbf6ea; border-radius: 8px; padding: 8px 12px; margin-top: 4px; display: inline-block; max-width: 80%; white-space: pre-wrap; }

/* 消息气泡上的小工具：鼠标移上去才出现，**紧贴着气泡**
   自己发的（右侧气泡）→ 两个小圆钮在气泡左边；对方发的（左侧气泡）→ 在气泡右边
   上面一个是 ↩（引用），下面一个是 ×（撤回，只有自己发的才有，且限 1 分钟内） */
.msg-text { position: relative; }
/* 改密码页：登记邮箱挖空成"填空格子" */
.close-info { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 12px; }
.close-info .ci { border-radius: 8px; padding: 8px 10px; background: #fbf6ea; min-width: 0; }
.close-info .ci:nth-child(4n+2) { background: #fbf6ea; }
.close-info .ci:nth-child(4n+3) { background: #f1faf5; }
.close-info .ci:nth-child(4n+4) { background: #fff8ef; }
.close-info .ci-k { display: block; font-size: 12px; color: #9a958c; }
.close-info .ci b { font-size: 14px; color: #1f1f1f; word-break: break-word; }
@media (max-width: 760px) {
  .close-info { grid-template-columns: 1fr 1fr; }   /* 手机：两栏，看得清 */
}

.email-fill { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; font-size: 14px; }
.email-fill .ef-text { color: #1f1f1f; letter-spacing: .5px; }
.email-fill .ef-box {
  width: 22px; height: 28px; text-align: center; padding: 0; font-size: 14px;
  border: 1px solid #d8b45c; border-radius: 6px; background: #ffffff; text-transform: none;
}
.email-fill .ef-box:focus { outline: none; border-color: #a5760a; box-shadow: 0 0 0 3px rgba(74, 134, 200, .2); }
.msg-tool-quote, .msg-tool-recall {
  position: absolute; display: none; align-items: center; gap: 3px;
  height: 22px; padding: 0 8px; border-radius: 11px; white-space: nowrap;
  border: 1px solid #e8d9b0; background: #ffffff; cursor: pointer;
  font-size: 11px; line-height: 1; color: #1f1f1f; box-shadow: 0 1px 4px rgba(20, 40, 70, .14);
  z-index: 3;
}
.msg-tool-quote .mt-icon, .msg-tool-recall .mt-icon { font-size: 13px; line-height: 1; }
.msg-tool-recall { color: #b3261e; }
/* 对方发的：只有一个 ↩，正好放在气泡**垂直中间**
   自己发的：↩ 和 × 两个，整组居中（↩ 在上、× 在下） */
/* 谁的视角看：自己的在右侧、对方的在左侧（客户看沟通栏 / 交易员看客户沟通页都对） */
/* ★ 4.16（用户："交易员回复沟通聊天换行不要右对齐"）——
   气泡本身仍在右边，但**气泡里的文字改成左对齐**，这样多行消息不会左右参差。 */
.msg.mine { text-align: right; }
.msg.mine .msg-text { text-align: left; }
.msg.theirs { text-align: left; }
/* 文字标签固定写在图标**左边**：引用 ↩ / 撤回 × ；整组贴在气泡外侧，图标位置和以前一样 */
.msg.theirs .msg-tool-quote { left: calc(100% + 30px); top: 50%; transform: translateY(-50%); }
.msg.mine .msg-tool-quote { right: calc(100% + 30px); top: calc(50% - 25px); }
.msg.mine .msg-tool-recall { right: calc(100% + 30px); top: calc(50% + 1px); }
.msg:hover .msg-tool-quote, .msg:hover .msg-tool-recall { display: inline-flex; }
/* 手机：不要浮在气泡上（会压字、还会叠在一起），改成**气泡下面排一行**「引用 / 撤回」 */
@media (max-width: 760px) {
  .msg.mine .msg-tool-quote { right: 0; left: auto; top: calc(100% + 6px); transform: none; }
  .msg.mine .msg-tool-recall { right: 66px; left: auto; top: calc(100% + 6px); transform: none; }
  .msg.theirs .msg-tool-quote { left: 0; right: auto; top: calc(100% + 6px); transform: none; }
  .msg.theirs .msg-tool-recall { left: 66px; right: auto; top: calc(100% + 6px); transform: none; }
  /* 手机上做成圆头的胶囊（不再椭圆、不再叠在一起），图标也放大一点 */
  .msg-tool-quote, .msg-tool-recall { border-radius: 999px; font-size: 12px; padding: 0 12px; gap: 4px; }
  .msg-tool-quote .mt-icon, .msg-tool-recall .mt-icon { font-size: 16px; }
  .msg.tools-on .msg-tool-quote, .msg.tools-on .msg-tool-recall { display: inline-flex; }
  /* ★ 4.28：手机上长按会弹系统菜单（复制/搜索…）—— 用我们自己的面板，所以关掉系统的 */
  .msg-text { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  /* 引用条上的 ✕ 手指点得准一点（以前太小，点一次常常落空，要再点一次） */
  .quote-strip button { min-width: 30px; min-height: 30px; font-size: 16px; line-height: 1; }
}
/* ★ 4.28：手机长按消息弹出的操作面板（引用 / 复制 / 撤回）—— 参考微信那条深灰菜单
   （图标在上、文字在下；"撤回"超过 1 分钟就不渲染这一项）
   ★ 4.30（用户："按钮面板可以改为现在的 2/3 大"）：整体缩到约 2/3
   ★ 4.30（用户："右下方的消息长按应该由消息中间朝上伸出这个面板，像个提示气泡面板；
             左上方的消息是消息居中向下伸出"）：多了个**小尖角**指向被长按的那条消息
             —— 自己发的（右下）面板在上、尖角朝下；对方发的（左上）面板在下、尖角朝上。 */
.msg-menu {
  position: fixed; z-index: 320; display: flex; align-items: stretch;
  background: #4c4c4c; border-radius: 8px; padding: 5px 3px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .32);
  animation: msgMenuIn .13s ease-out;
}
.msg-menu button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 42px; padding: 3px 5px; border: 0; background: transparent;
  color: #ffffff; font-size: 11px; font-family: inherit; cursor: pointer;
}
.msg-menu button + button { border-left: 1px solid rgba(255, 255, 255, .16); }
.msg-menu button:active { background: rgba(255, 255, 255, .14); border-radius: 6px; }
.msg-menu svg { width: 15px; height: 15px; display: block; }
/* 提示气泡的小尖角（45° 方块露一半）—— left 由 JS 按"被长按那条消息的中心"算 */
.msg-menu-tail {
  position: absolute; width: 9px; height: 9px; background: #4c4c4c;
  transform: rotate(45deg); border-radius: 1px;
}
.msg-menu.up .msg-menu-tail { bottom: -4px; }
.msg-menu.down .msg-menu-tail { top: -4px; }
@keyframes msgMenuIn { from { opacity: 0; transform: translateY(4px) scale(.96); } to { opacity: 1; transform: none; } }
/* 被长按的那条：给它描一圈，让人知道菜单是针对哪一条的 */
.msg.menu-on .msg-text { box-shadow: 0 0 0 2px rgba(22, 50, 79, .22); }
.msg-text.recalled { color: #9a958c; font-style: italic; background: #f6f3ec; }
/* 引用回复：被引用的那条放在**气泡外面、下面**，灰底略透明的小气泡；
   只显示 2 行（多余的用…），点一下跳到被引用的原消息 */
.msg-quoted {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; max-width: 80%; margin-top: 4px;
  font-size: 12px; color: #9a958c; line-height: 1.4; text-align: left;
  white-space: pre-wrap; word-break: break-word; cursor: pointer;
  background: rgba(20, 40, 70, .06); border-radius: 6px; padding: 3px 7px;
}
.msg-quoted:hover { background: rgba(20, 40, 70, .1); }
/* 引用块跟着气泡的方向：自己发的靠右、对方发的靠左（以前块是满宽的，看着像贴在左边） */
.msg.mine .msg-quoted { margin-left: auto; }
.msg.theirs .msg-quoted { margin-right: auto; }
/* 跳到原消息时闪一下，好让人知道跳到哪了 */
@keyframes jumpFlash { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 0 3px rgba(255, 196, 40, .95); } }
.msg.jump-flash .msg-text { animation: jumpFlash 1.2s ease-in-out 1; }

/* 客户沟通列表：整行可点 + 红圈数字 */
.chat-row:hover { background: #fbf6ea; }
.dot-badge {
  display: inline-block; min-width: 18px; height: 18px; line-height: 17px;
  padding: 0 5px; background: #e8452c; color: #ffffff; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; text-align: center;
}

/* 交易员「客户沟通」页：引用/撤回两个小按钮放到气泡**下面**，不再占左右、挤压聊天宽度 */
.chat-box.chat-page .msg-tool-quote, .chat-box.chat-page .msg-tool-recall { position: absolute; }
.chat-box.chat-page .msg.mine .msg-tool-quote { right: auto; left: 0; top: calc(100% + 4px); }
.chat-box.chat-page .msg.mine .msg-tool-recall { right: auto; left: 60px; top: calc(100% + 4px); }
.chat-box.chat-page .msg.theirs .msg-tool-quote { left: auto; right: 0; top: calc(100% + 4px); }
.chat-box.chat-page .msg.theirs .msg-tool-recall { left: auto; right: 60px; top: calc(100% + 4px); }
.chat-box.chat-page .msg { margin-bottom: 18px; }

/* 引用条：显示在输入框上面 */
.quote-strip {
  display: flex; align-items: center; gap: 8px;
  background: #fbf6ea; border-left: 3px solid #d8b45c; border-radius: 6px;
  padding: 5px 8px; margin-bottom: 6px; font-size: 12px; color: #3a3a3a;
}
.quote-strip span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quote-strip button { border: none; background: transparent; cursor: pointer; color: #6f6f6f; }


/* 开仓记录 = 粉色，平仓记录 = 蓝色（系统消息也一样） */
.msg.rec-open .msg-text { background: #fde8f1; border: 1px solid #f5c2da; color: #8c2f5b; }
.msg.rec-close .msg-text { background: #fbf6ea; border: 1px solid #e8d9b0; color: #1f1f1f; }
.msg.rec-ask .msg-text { background: #fff8e8; border: 1px solid #f0d9a8; color: #7a5a12; font-size: 12.5px; }

/* 订单咨询卡片：一句话 + 一张（或两张）带花边的资料卡
   买（开仓）= 粉色，卖（平仓）= 蓝色，两种长得不一样 */
.msg-text.msg-ask { background: transparent; border: none; padding: 0; max-width: 96%; }
.ask-title { font-size: 12px; color: #6f6f6f; margin: 2px 0 6px; }
.ask-card {
  border-radius: 10px; padding: 8px 10px; margin-bottom: 6px;
  border: 1px solid #e8d9b0; background: #ffffff; text-align: left;
  box-shadow: 0 1px 4px rgba(20, 40, 70, .06);
}
/* ★ 4.79（用户："买卖单颜色可以修改成金色深浅试试"）——
   买卖两张咨询卡不用红/蓝，改成**同一族金色的深浅**：买 = 深金、卖 = 浅金。 */
.ask-card.buy { border-color: #f0dfc4; background: #fffaf0; border-left: 4px solid #c9a227; }
.ask-card.sell { border-color: #f2e7d2; background: #fffcf5; border-left: 4px solid #e8cf92; }
.ask-card .ac-title { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.ask-card.buy .ac-title { color: #8a6400; }
.ask-card.sell .ac-title { color: #a5760a; }
.ask-card .ac-row { display: flex; gap: 6px; font-size: 12px; line-height: 1.5; }
.ask-card .ac-k { color: #9a958c; min-width: 62px; flex: 0 0 auto; }
.ask-card .ac-v { color: #1f1f1f; flex: 1; word-break: break-all; }
/* ★ 4.79（用户："对话框文本要黑色；气泡是图一的蓝灰，但不要和背景同色，
   不然看不清气泡了"）——
   背景是 #f6f3ec（沟通栏底），所以气泡必须**比背景明显深一点的蓝灰**：
     对方 #e8d9b0、自己 #e8d9b0（同一蓝灰系，只差一档），文字一律近黑 #3a3a3a。 */
.msg-text { color: #3a3a3a; }
.msg.theirs .msg-text { background: #e8d9b0; }      /* 对方的：蓝灰 */
.msg.mine .msg-text { background: #e8d9b0; }        /* 自己的：深一档的蓝灰 */
.chat-input { display: flex; gap: 8px; }
.chat-input input, .chat-input textarea { flex: 1; max-width: none; }
/* 导航里"客户沟通"后面的未读数字泡泡 */
.nav-bubble {
  display: inline-block; margin-left: 5px; padding: 0 6px;
  background: #e8452c; color: #ffffff; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 16px; vertical-align: top;
}

/* ===== 右侧全局沟通栏（客户）：宽屏占位、窄屏抽屉 ===== */
.chat-rail {
  position: fixed; top: 0; right: 0; bottom: 0; width: 460px;
  background: #fbf6ea; border-left: 1px solid #e8d9b0;
  box-shadow: -8px 0 26px rgba(20, 40, 70, .08);
  display: flex; flex-direction: column; z-index: 70;
  transform: translateX(105%);
  transition: transform .28s cubic-bezier(.22, .61, .36, 1);
  /* 注意：不要写 will-change: transform —— 它会把这个面板放到 GPU 图层上，
     Windows 上文字会变得发糊（用户反馈"像素很差"就是这个原因）。 */
  /* 鼠标在沟通栏里滚，只滚沟通栏，不要"穿透"去滚后面的主页面 */
  overscroll-behavior: contain;
  backface-visibility: visible;
}
body.rail-open .chat-rail { transform: none; }
/* v3.67/3.68：页面加载那一瞬间不做任何过渡（否则右侧沟通栏会"滑进来/闪一下"）；
   状态摆好后 base.html 会把 html.booting 去掉，之后点浮标开合的动画不受影响。 */
html.booting .chat-rail, html.booting .trader-rail, html.booting .rail-toggle,
html.booting .back-fab, html.booting .chat-rail-wrap { transition: none !important; }
.rail-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid #e8d9b0; background: #ffffff;
}
.rail-head-actions { display: flex; align-items: center; gap: 6px; }
.rail-x {
  border: 1px solid #e8d9b0; background: #ffffff; border-radius: 6px;
  padding: 3px 10px; line-height: 1.2; font-size: 12px; cursor: pointer; color: #6f6f6f;
}
.rail-head-title { font-size: 15px; }
.rail-wechat {
  font-size: 12px; color: #8a6a1f; text-decoration: none;
  border: 1px solid #e8d9b0; background: #fbf6ea; border-radius: 6px; padding: 3px 10px;
}
.rail-wechat:hover { background: #fbf6ea; }
.rail-bubbles {
  display: block; max-height: 360px; overflow-y: auto; padding: 10px 12px 6px;
  scrollbar-width: thin; border-bottom: 1px solid #fbf6ea;
  overscroll-behavior: contain;
}
.rail-bubble {
  flex: 0 0 auto; max-width: 240px; text-align: left; cursor: pointer;
  background: #ffffff; border: 1px solid #e8d9b0; border-radius: 14px;
  padding: 6px 12px; box-shadow: 0 2px 6px rgba(20, 40, 70, .06);
  display: flex; flex-direction: column; gap: 2px; font: inherit;
}
.rail-bubble:hover { border-color: #d8b45c; }
.rail-bubble b { font-size: 13px; color: #1f1f1f; white-space: nowrap; }
.rail-bubble span { font-size: 11px; color: #6f6f6f; white-space: nowrap; }
/* v3.54：订单泡泡**没有"未读"这回事**了（红点/金光全去掉）——
   它只表示这笔订单的状态（待接单 / 已接单待成交 / 交易成功 / 已挂单…）。
   未读只有两个地方：客户侧 💬 浮标（交易员发来的总消息）、
   交易员侧通讯录每行的红圈（该客户发来的条数）。 */
.rail-new { font-size: 10px; color: #b26a00; font-style: normal; font-weight: 700; }
@keyframes bubbleGlow {
  0%, 100% { box-shadow: 0 0 0 2px rgba(240,180,41,.10); }
  50% { box-shadow: 0 0 0 4px rgba(240,180,41,.30); }
}
.rail-title { font-size: 12px; color: #6f6f6f; padding: 8px 14px 4px; }

/* 订单信息泡泡卡片（进订单沟通时先展示这一单是什么） */
.rail-card {
  background: #ffffff; border: 1px solid #e8d9b0; border-radius: 12px;
  padding: 10px 12px; margin: 6px 0 10px; box-shadow: 0 1px 4px rgba(20, 40, 70, .05);
}
.rail-card-ask { font-size: 12px; color: #8a6400; margin-bottom: 4px; }
.rail-card-line { font-size: 14px; font-weight: 700; color: #1f1f1f; }
.rail-card-meta { font-size: 11.5px; color: #6f6f6f; margin-top: 2px; }
.rail-box { flex: 1; overflow-y: auto; padding: 0 14px 10px; scroll-behavior: auto; overscroll-behavior: contain; }
/* ★ 5.5/5.6：沟通栏默认**一条都不显示**，只有中间一行金色小字「查看历史消息」；
   点了就地把对话铺开（数据早就拿到了，不用等）。
   ⚠️ 类名特意用 rail-history（不能用 .rail-more）—— `.rail-more` 已经被
   "全部 N 单"那个展开小三角占用了，两条规则会互相盖（踩过：字色变成深灰 11px）。 */
.rail-history {
  display: block; margin: 10px auto 6px; padding: 4px 10px;
  font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: .5px;
  color: #c9920f;                       /* 金色（跟其它页面的金一致） */
  background: none; border: 0; cursor: pointer; text-align: center;
}
.rail-history:hover { color: #a9770a; text-decoration: underline; }
/* ★ 5.13：历史报价的分页器 —— 一行、紧凑、**绝不换行**（用户：错行了、按钮小巧、
   往下移动别占太多位置）。元素只留四个：上一页 / 页码 / 下一页 / 置顶，右边一行小字「清空历史记录」。 */
.hist-pager {
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: center;
  gap: 6px; margin: 22px 0 6px; font-size: 12px; color: #6f6f6f; white-space: nowrap;
}
.hist-pager .pg-btn {
  width: 26px; height: 26px; flex: 0 0 auto; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #e8d9b0; border-radius: 7px;
  color: #6f6f6f; cursor: pointer; transition: border-color .18s, color .18s, background .18s;
}
.hist-pager .pg-btn:hover:not(:disabled) { border-color: #c9920f; color: #a9770a; background: #fffdf7; }
.hist-pager .pg-btn:disabled { opacity: .35; cursor: default; }
.hist-pager .pg-top { margin-left: 8px; }
.hist-pager .pg-no { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.hist-pager .pg-no input {
  width: 36px; height: 24px; padding: 0 2px; text-align: center;
  border: 1px solid #e8d9b0; border-radius: 6px; background: #fff;
  font: inherit; font-size: 12px; color: #1f1f1f;
}
.hist-pager .pg-no input:focus { outline: none; border-color: #c9920f; }
.hist-pager .pg-no b { color: #1f1f1f; font-weight: 600; }
.hist-pager .pg-slash { color: #b6b6b6; }
.hist-pager .pg-clear {
  margin-left: 10px; font-size: 11.5px; color: #8a8a8a;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.hist-pager .pg-clear:hover { color: #a9770a; }
/* 切页面时右侧沟通栏要"安静"：消息一律不做入场动画（以前整栏重画会让每条都滑一下），
   也不做平滑滚动；只有自己发消息时才滚到最新一条。 */
.rail-box .msg { animation: none; }
.rail-box.rail-rebuild .msg { animation: none; }
.rail-input { display: block; padding: 8px 14px 14px; border-top: 1px solid #e8d9b0; background: #ffffff; }
.rail-input textarea {
  width: 100%; resize: none; font: inherit; font-size: 14px; line-height: 1.45;
  padding: 10px 12px; min-height: 118px; border: 1px solid #e8d9b0; border-radius: 10px;
}
.rail-input textarea:focus { outline: none; border-color: #d8b45c; box-shadow: 0 0 0 3px rgba(185, 203, 228, .25); }
.rail-input-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.rail-input-row .hint { flex: 1; }
/* 交易员右侧沟通栏：跟客户那套样式一样，就是默认收起、上面多一个"选联系人"的下拉 */
.trader-rail .rail-title { display: flex; align-items: center; gap: 8px; padding: 6px 12px 0; }
.trader-rail .t-rail-top { flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 12px 8px; }
.trader-rail .t-rail-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* 顶栏：左边「◀ + 其他客户新消息的金色圈」、中间客户昵称居中、右边收起 */
.trader-rail .rail-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; }
.trader-rail .rail-head-left { display: flex; align-items: center; gap: 6px; justify-self: start; }
.trader-rail .rail-head-actions { justify-self: end; }
.trader-rail .rail-head-title { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* v3.55：返回箭头**不要方框**（用户说"三角形箭头不要方框，很突兀"）——
   就是一个干净的 ◀，鼠标移上去变色。 */
.trader-rail .t-rail-back {
  border: none; background: transparent; border-radius: 4px; cursor: pointer;
  padding: 2px 4px; font-size: 17px; line-height: 1; color: #1f1f1f;
}
.trader-rail .t-rail-back:hover { color: #8a6a1f; background: #fbf6ea; }
.trader-rail .t-rail-other { cursor: pointer; }
.trader-rail .t-rail-other {
  display: inline-block; min-width: 20px; height: 20px; line-height: 19px; text-align: center;
  padding: 0 6px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: #f0b429; color: #4a3400; box-shadow: 0 0 0 2px rgba(240, 180, 41, .25);
}
.trader-rail .t-rail-contacts { flex: 1; overflow-y: auto; padding: 2px 8px 12px; }
.trader-rail .t-rail-contact {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer; background: #ffffff; margin-bottom: 5px;
  border: 1px solid #fbf6ea;
}
.trader-rail .t-rail-contact:hover { background: #fbf6ea; border-color: #e8d9b0; }
.trader-rail .t-rail-contact.has-unread { border-color: #f6cdc4; background: #fff7f5; }
.trader-rail .trc-main { min-width: 0; }
.trader-rail .trc-name { display: block; font-size: 14px; font-weight: 600; color: #1f1f1f; }
.trader-rail .trc-last { display: block; font-size: 12px; color: #9a958c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trader-rail .trc-code { font-size: 11.5px; color: #9a958c; }
/* 交易员「客户沟通」页：这个客户的订单表 —— 不出现横向滚动条（页面只留一条上下滚动） */
.chat-orders { width: 100%; table-layout: auto; font-size: 13px; }
.chat-orders th, .chat-orders td { padding: 6px 8px; white-space: nowrap; }
.chat-orders td:nth-child(2) { white-space: normal; }   /* 只有"标的"允许折行 */
/* 资金 / 盘中授信 */
/* ★ 4.13（用户："左侧加宽 + 右侧卡片行距窄一点"）：左右各半（左列要放 7 列的持仓表，需要更宽） */
.funds-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
/* 右侧"申请盘中授信"这张卡：整卡内边距和行距都收一点，看着更紧凑 */
#credit-apply { padding: 14px 16px; }
#credit-apply .credit-declare { padding: 10px 12px; line-height: 1.5; margin: 8px 0; }
#credit-apply .credit-declare li { margin: 2px 0; }
#credit-apply .form-row { margin-bottom: 10px; }
#credit-apply .max-power { padding: 8px 12px; margin: 6px 0; }
#credit-apply h3 { margin: 14px 0 6px; }
@media (max-width: 900px) { .funds-layout { grid-template-columns: 1fr; } }
/* v3.62：左列两张卡（资金状况 + 持仓情况）—— 紧贴着排，最下面跟右边那张"申请授信"对齐 */
.funds-col { display: flex; flex-direction: column; min-width: 0; }
.funds-col > .card { margin: 0; }
.funds-col > .card + .card { margin-top: 8px; }
.funds-col > .card:last-child { flex: 1 1 auto; }
/* 右边那张"申请授信"也要把 .card 自带的 16px 上下外边距归零，
   否则它的边框盒比左列矮 32px，"底面对齐"会对不上（实测差 16px） */
/* ★ 4.9：网格列必须允许收缩（默认 min-width:auto 会让里面的宽表格把整列顶大，
   结果左边那列被挤成一条，标题竖着排）。给这两类都加 min-width:0，宽表格就在自己的
   .table-scroll-nox 里横向滚动，不会再把整页布局顶歪。 */
.funds-layout > .card, .funds-layout .funds-col { margin: 0; min-width: 0; }
/* ★ 4.6（用户："为什么盘中授信额度图就是不能放在右边呢和环形图对半开"、"卡片四边细边框"）：
   资金卡改成**两个各占一半的卡片**，每个都有四边细边框 —— 左：环形图+图例；右：盘中授信额度。 */
.fund-card { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; }
/* ★ 4.8（用户："客户侧两个卡片乱码不对齐"）：
   ⚠️ 教训：把 `min-width` 收到 200px 后，客户资金页那一列只有 ~490px 宽，
   两张卡被强行并排 → 每张只剩 ~215px → 图例里的字**一个字一行**，看着像乱码。
   正确做法：**给足最小宽度**（300px），窄列放不下就自动换行、上下堆叠；宽屏才是左右各半。 */
.fc-col { flex: 1 1 46%; min-width: 300px; box-sizing: border-box;
  border: 1px solid #e8d9b0; border-radius: 10px; padding: 12px 14px; background: #ffffff; }
.fc-left { display: flex; align-items: center; gap: 12px; }
.fc-right { display: flex; align-items: center; justify-content: center; min-height: 120px; }
.fund-card .donut { width: 108px; height: 108px; flex: 0 0 auto; }
/* ★ 4.6：让"盘中授信额度条"真的能站到环形图右边、跟左边对半开
   （以前给了 max-width:360 + margin-left:auto，容器一窄就被挤到下一行，用户看到的永远是"跑到下面"） */
.fund-legend { flex: 1 1 auto; min-width: 0; }
.fund-legend .fl-row { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #3a3a3a; padding: 4px 6px 4px 0; }
.fund-legend .fl-row b { margin-left: auto; font-size: 14px; color: #1f1f1f; }
.fund-legend .fl-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
/* 盘中授信的"交易员调整"小控件 */
.credit-adjust {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 10px 0 4px; padding: 10px 12px; border-radius: 10px; background: #fffaf0; border: 1px solid #f3e2bd;
}
.credit-adjust .ca-sign, .credit-adjust .ca-eq {
  min-width: 34px; height: 30px; border-radius: 8px; border: 1px solid #d9c79a;
  background: #ffffff; cursor: pointer; font-size: 15px; color: #7a5a12;
}
.credit-adjust input[type=number] { width: 130px; height: 30px; }
.credit-adjust b { font-size: 16px; color: #1f1f1f; }

/* ★ 4.5：盘中授信额度条改成卡片的**第三栏**，靠右摆（用户："放在环形图右边，好像分两栏一样"） */
/* ★ 4.6：额度条 = 右边那一半（flex-basis 42%，不再限制 max-width） */
/* 4.6：额度条跟环形图对半开 */
.fund-credit-bar { width: 100%; min-width: 0; max-width: none; margin: 0; }

/* ★ 4.5：交易员的授信申请表 —— 通过/拒绝就放在"获批金额"那一格；输入是元、整千 */
/* ★ 4.10（用户："我的申请记录不要用轴滚，画幅增宽、列宽缩小以铺开"）：
   去掉 min-width（不要横向滚动条），改成"每列自己缩"—— 6 列在加宽后的画幅里正好铺开。 */
.credit-table { min-width: 0; table-layout: auto; }
.credit-table th, .credit-table td { padding-left: 6px; padding-right: 6px; }
/* "剩余可申请授信"这列给宽一点，表头允许两行 */
.credit-table th:nth-child(4), .credit-table td:nth-child(4) { min-width: 96px; }
/* ★ 4.10（用户："2026/09/28 14:07 时间不要换行"）：申请时间那列强制一行 */
.credit-table td.nowrap, .credit-table th:first-child { white-space: nowrap; }
/* 备注列窄一点（提示词就是"备注"两个字） */
.credit-table .ci-note { width: 120px; height: 30px; font-size: 12.5px; }
.credit-table td { vertical-align: middle; }
.credit-table tr.row-pending { background: #fffdf5; }
.credit-approve { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.credit-approve .ci-in { width: 108px; height: 30px; text-align: right; }
.credit-approve .ci-note { width: 190px; height: 30px; font-size: 12.5px; }
.credit-approve .btn { padding: 5px 10px; font-size: 12.5px; }
.credit-table b.ok-num { color: #1f8a4c; }
/* ★ 4.7（用户："盘中授信图字体/样式/排列/布局和左侧相似一点，字变大，图例换行"）：
   右栏标题和图例都按左栏（.fl-head2 / .fl-row）那套字号和排版来。 */
.cb-title { display: flex; align-items: baseline; font-size: 15px; font-weight: 600; color: #1f1f1f;
  margin-bottom: 10px; border-bottom: 1px dashed #fbf6ea; padding-bottom: 7px; }
/* ★ 4.8（用户）：交易员侧在这张图右上角写"总计"，跟下面两列金额同一右边界；客户侧不写 */
/* ★ 4.10（用户："总计和最大购买力相同格式字体，加一个可编辑"）：总计 = 输入框 + 确认，
   字号跟左边"最大购买力 ≈"那一行一致（15px），靠右。 */
/* ★ 4.12：默认只显示金额 + 一支"笔"；点笔才出输入框（￥前缀）+ 打勾确认。框做小一点。 */
/* ★ 4.12（用户："现有持仓宽一点，名义本金、状态宽一个中文字符；标的、到期日宽两个中文字符"）——
   一个中文字符 ≈ 14px，所以 +1 字 ≈ +14px、+2 字 ≈ +28px（用 min-width 顶住，别让它们折行） */
.positions-table { font-size: 13px; }
.positions-table th:nth-child(1), .positions-table td:nth-child(1) { min-width: 112px; }  /* 标的 */
.positions-table th:nth-child(3), .positions-table td:nth-child(3) { min-width: 74px; }   /* 名义本金 */
.positions-table th:nth-child(4), .positions-table td:nth-child(4) { min-width: 74px; }   /* 浮动收益 */
.positions-table th:nth-child(5), .positions-table td:nth-child(5) { min-width: 88px; }   /* 可平仓收益 */
.positions-table th:nth-child(6), .positions-table td:nth-child(6) { min-width: 86px; }   /* 到期日 */
.positions-table th:nth-child(7), .positions-table td:nth-child(7) { min-width: 58px; }   /* 状态 */
.positions-table th, .positions-table td { padding-left: 6px; padding-right: 6px; white-space: nowrap; }
/* ★ 4.159（用户："申请盘中授信页为什么要左右滑动了，是（剩余xx那行的问题吗"）
   ——"剩余可申请…"那一行已经删掉（改成"申请金额（上限：xx CNY）"），
   但这一页**还有一处会左右滑**：现有持仓是 7 列表格、要 534px，而左边那张卡通常只有 ~370px
   （右边还挂着沟通栏），于是表格在卡片里横着滑。
   办法：**卡片自己窄的时候就换成"每行一条、带字段名"的叠排**（数据一条不少），
   卡片够宽（大屏 / 宽卡片）仍是原来的表格。
   用容器查询（container query）是因为——桌面 1440 视口下这张卡也可能只有 370px，
   按"屏幕宽度"判断是判断不准的，得按**卡片自己的宽度**判断。 */
#open-positions { container-type: inline-size; }
@container (max-width: 560px) {
  #open-positions .table-scroll-nox { overflow-x: visible; }
  #open-positions .positions-table { font-size: 13px; width: 100%; }
  #open-positions .positions-table thead { display: none; }
  #open-positions .positions-table tbody { display: block; }
  #open-positions .positions-table tr {
    display: block; padding: 7px 0; border-bottom: 1px solid #f3e6c8;
  }
  #open-positions .positions-table tr:last-child { border-bottom: 0; }
  #open-positions .positions-table td {
    display: flex; justify-content: space-between; gap: 12px;
    border: 0; padding: 1px 2px; white-space: normal; min-width: 0;
    text-align: right;
  }
  #open-positions .positions-table td::before {
    content: attr(data-label); color: #6f6f6f; font-weight: 400; text-align: left;
  }
  /* 第一行（标的）当小标题：加粗、不加"标的"两个字，看起来像一张卡的头 */
  #open-positions .positions-table td:nth-child(1) {
    font-weight: 700; font-size: 14px; color: #1f1f1f; padding-bottom: 3px;
  }
  #open-positions .positions-table td:nth-child(1)::before { content: none; }
}
.cb-total-view { margin-left: auto; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.cb-total-num { font-size: 15px; font-weight: 700; color: #8a6a1f; }
.cb-pen { border: 1px solid #e8d9b0; background: #ffffff; border-radius: 6px; cursor: pointer;
  width: 26px; height: 26px; line-height: 1; font-size: 13px; color: #1f1f1f; padding: 0; }
.cb-pen:hover { background: #fbf6ea; border-color: #d8b45c; }
.cb-total-form { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.cb-cny { font-size: 13px; color: #6f6f6f; }
.cb-total-in { width: 96px; height: 28px; text-align: right; font-size: 14px; font-weight: 700;
  color: #8a6a1f; border: 1px solid #e8d9b0; border-radius: 6px; padding: 0 6px; }
.cb-ok { border: 1px solid #1f8a4c; background: #1f8a4c; color: #ffffff; border-radius: 6px;
  width: 28px; height: 28px; cursor: pointer; font-size: 13px; line-height: 1; padding: 0; }
.cb-cancel { border: 1px solid #e8d9b0; background: #ffffff; color: #9a958c; border-radius: 6px;
  width: 28px; height: 28px; cursor: pointer; font-size: 12px; line-height: 1; padding: 0; }
.cb-total { margin-left: auto; font-size: 13px; font-weight: 600; color: #1f1f1f; white-space: nowrap; }
.cb-title > span:first-child { font-size: 15px; }
.cb-title .hint { font-weight: 400; }
.cb-bar { display: flex; height: 18px; border-radius: 9px; overflow: hidden; background: #fbf6ea; }
.cb-bar .cb-seg { background: #e6a817;   /* ★ 4.6（用户）：已获批 = 金色 */ border-right: 1px solid rgba(255, 255, 255, .6); }
.cb-bar .cb-left { background: #d9534f; }  /* 剩余可申请 = 红色 */
.cb-legend { margin-top: 8px; }
.cb-row { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #3a3a3a; padding: 4px 0; }
.cb-row b { margin-left: auto; font-size: 14px; color: #1f1f1f; }
.cb-dot { width: 10px; height: 10px; border-radius: 3px; background: #e6a817; display: inline-block; }
.cb-dot.left { background: #d9534f; }
/* ★ 4.71（用户："盘中授信额度 0 那个图要不要也展示一下，只是灰掉写 0"）——
   没额度时这张卡照旧在（跟左边环形图左右对称），整块变灰、金额写 ￥0.00。 */
.fc-right.is-zero .cb-title { color: #9a958c; border-bottom-color: #fbf6ea; }
.fc-right.is-zero .cb-title > span:first-child { color: #9a958c; }
.fc-right.is-zero .cb-bar { background: #fbf6ea; }
.fc-right.is-zero .cb-bar .cb-empty {
  background: repeating-linear-gradient(135deg, #e8d9b0 0 6px, #fbf6ea 6px 12px);
}
.fc-right.is-zero .cb-row { color: #9a958c; }
.fc-right.is-zero .cb-row b { color: #9a958c; font-weight: 600; }
.fc-right.is-zero .cb-dot { background: #e8d9b0; }
.fc-right.is-zero .cb-dot.left { background: #e8d9b0; }
.fc-right.is-zero .cb-total-num { color: #9a958c; }
.cb-note { margin: 8px 0 0; }

/* ★ 4.2：交易员在"饼图下面"直接处理授信申请（申请 → 获批），不用翻到最下面 */
.credit-inline { margin-top: 12px; padding: 12px 14px; border-radius: 10px;
  background: #fffaf0; border: 1px solid #f3e2bd; }
.credit-inline .ci-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 0; font-size: 13.5px; color: #3a3a3a; }
.credit-inline .ci-row + .ci-row { border-top: 1px dashed #f0e2c4; }
.credit-inline .ci-k { color: #8b7a55; font-size: 12.5px; }
.credit-inline .ci-row b { color: #1f1f1f; font-size: 16px; }
.credit-inline .ci-row b.ok { color: #1f8a4c; }
.credit-inline .ci-in { width: 120px; height: 32px; text-align: right; }
/* 鼠标移上去看小字说明 */
.tip { cursor: help; color: #8a6a1f; border-bottom: 1px dashed #d8b45c; }
.table-scroll-nox { overflow-x: auto; }
/* 各币种资产（港币/美元/人民币）+ 汇率换算 */
.fx-box { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: #fbf6ea; border: 1px solid #e8d9b0; }
.fx-title { font-size: 13px; font-weight: 700; color: #1f1f1f; margin-bottom: 6px; }
.fx-rows { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13px; color: #3a3a3a; }
.fx-rows b { color: #1f1f1f; }
.fx-rows .fx-total { font-weight: 700; color: #8a6a1f; }
/* v3.45：各币种现金明细表（港币/美元/人民币 的 可用、冻结） */
.fx-table { margin-top: 2px; }
.fx-table th, .fx-table td { padding: 5px 10px; font-size: 13px; }
.fx-table td.num, .fx-table th:nth-child(n+2) { text-align: right; }
.fx-table .fx-total-row td { border-top: 2px solid #e8d9b0; font-weight: 700; color: #8a6a1f; }
.fx-box .hint { margin: 6px 0 0; }
/* v3.46：环形图中心文字 + 分段图例 */
.fund-card .donut .donut-cap { font-size: 3.4px; fill: #9a958c; }
.fund-card .donut .donut-val { font-size: 5px; fill: #1f1f1f; font-weight: 700; }
.fund-legend .fl-head { border-bottom: 1px dashed #fbf6ea; padding-bottom: 7px; margin-bottom: 3px; }
.fund-legend .fl-head b { font-size: 17px; color: #8a6a1f; }
.fund-legend .fl-pct { font-size: 12px; color: #9a958c; margin-left: 4px; }
.fund-legend .fl-total { border-top: 1px solid #fbf6ea; margin-top: 4px; padding-top: 7px; }
/* v3.61：多种货币时，"现金购买力"下面那行"币种：金额 ×汇率" */
.fund-legend .fl-cur-line { font-size: 12.5px; color: #1f1f1f; line-height: 1.7; margin: 2px 0 4px; }
/* v3.65：图例改版 —— 第一行是"最大购买力 ≈ ￥xx"，下面两行是 现金购买力 / 盘中授信额度 */
.fund-legend .fl-head2 { font-size: 15px; color: #1f1f1f; border-bottom: 1px dashed #fbf6ea;
  padding-bottom: 7px; margin-bottom: 4px; }
/* ★ 5.19（用户定稿选 B）：电脑端与手机统一成「最大购买力　￥xxx」——
   去掉等号、金额靠右；放不下时整串金额折到第二行，不再被卡片裁掉。
   模板里的 .fl-eq 保留不删，这里隐藏，方便以后想恢复"= ￥"的写法。 */
.fund-legend .fl-head2 { display: flex; align-items: baseline; gap: 6px;
  white-space: normal; flex-wrap: wrap; row-gap: 2px; }
.fund-legend .fl-head2 .fl-eq { display: none; }
/* ★ 4.109（用户华为截图："下面的数字 33 超出框了"）——
   这行"最大购买力 = ￥120,406.33"是 nowrap，手机屏幕窄的时候金额顶出卡片，
   最后两位数字露在框外。手机上允许换行：一行放不下就把金额折到第二行，**永不溢出**。 */
@media (max-width: 760px) {
  .fund-legend .fl-head2 { white-space: normal; flex-wrap: wrap; row-gap: 2px; }
  .fund-legend .fl-head2 b { font-size: 16px; }
  /* 环缩小一点，把宽度让给右边那行"最大购买力 = ￥xxx"，尽量一行放完（放不下才换行） */
  .fund-card .donut { width: 96px; height: 96px; }
}

/* ★ 4.10：左列收窄后，5 列的"现金余额明细"要小一号才铺得下（否则最后一列会被切掉） */
.fx-table { font-size: 12px; }
.fx-table th, .fx-table td { padding-left: 4px; padding-right: 4px; }
.fx-table td.num { white-space: nowrap; }
.fund-legend .fl-head2 b { margin-left: auto; font-size: 17px; color: #8a6a1f; white-space: nowrap; }
/* v3.76：去掉那个"问号"鼠标（cursor:help）—— 用户看到问号会以为哪里出错了；
   提示还在（title 属性），只是鼠标变成普通箭头。 */
.fund-legend .fl-cash { cursor: default; }
.fund-legend .fl-cur-line { padding-left: 16px; margin: 0 0 4px; }   /* 缩进，表示属于"现金购买力" */
.fund-legend .fl-cur-item { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #1f1f1f; }
.fund-legend .fl-dot.sm { width: 8px; height: 8px; border-radius: 2px; }
/* v3.67/3.68：更小的一档说明文字（资金页刷新按钮旁边那两句） */
.hint.xs { font-size: 11px; }
/* v3.69：刷新按钮旁边那行"刷新时间：2026-09-22 14:05:31"（具体到秒，字很小） */
.hint.refresh-at { font-size: 11px; color: #9a958c; margin-left: 6px; white-space: nowrap; }
/* v3.70：沟通栏里的"搜聊天记录"输入框 + 命中结果列表 */
.rail-searchbar { padding: 6px 12px 0; }
.rail-searchbar input {
  width: 100%; font: inherit; font-size: 12.5px; padding: 5px 8px;
  border: 1px solid #e8d9b0; border-radius: 8px; background: #ffffff;
}
.trader-rail .rail-searchbar { padding: 6px 8px 0; }
.rail-hits { max-height: 320px; overflow-y: auto; padding: 6px 12px 8px; border-bottom: 1px solid #fbf6ea; }
.trader-rail .rail-hits { padding: 6px 8px 8px; }
.rail-hit {
  display: block; width: 100%; text-align: left; cursor: pointer; font: inherit;
  background: #ffffff; border: 1px solid #e8d9b0; border-radius: 8px; padding: 6px 9px; margin-bottom: 4px;
}
.rail-hit:hover { border-color: #d8b45c; background: #fbf6ea; }
.rail-hit .rh-who { display: block; font-size: 12.5px; color: #1f1f1f; }
.rail-hit .rh-name { font-size: 11px; color: #8a6a1f; margin-right: 6px; }
.rail-hit .rh-at { font-size: 11px; color: #9a958c; }
.rail-hit-none { font-size: 12px; color: #9a958c; padding: 4px 2px; }
/* 申请金额右边那个单位 */
.stepper .unit-cny { margin-left: 6px; font-size: 13px; color: #6f6f6f; }
/* ★ 4.159 申请金额右边的"（上限：120,000 CNY）"——
   以前那句"（剩余可申请盘中授信额度：120000 CNY）"太长，把这一行顶宽、整张卡能左右滑；
   现在是一个轻量小标签：不算粗（label 默认 600，会显得很重）、不换行、字号小一号。 */
.apply-cap { font-weight: 400; font-size: 12px; white-space: nowrap; margin-left: 4px; }
/* 盘中授信：声明 + 勾选 */
.credit-declare { margin: 10px 0; padding: 12px 14px; border-radius: 10px;
  background: #fff8f0; border: 1px solid #f0d9bb; font-size: 13px; color: #4a3a28; line-height: 1.75; }
.credit-declare .cd-title { font-weight: 700; color: #8a4b12; margin-bottom: 4px; }
.credit-declare ol { margin: 4px 0 0 18px; padding: 0; }
.credit-declare li { margin: 3px 0; }
.credit-agree { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0; font-size: 13px; color: #1f1f1f; }
.credit-agree input { margin-top: 3px; }
.max-power { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 8px 0; padding: 10px 14px; border-radius: 10px; background: #fbf6ea; border: 1px solid #e8d9b0; }
.max-power .mp-label { font-size: 13px; color: #1f1f1f; }
.max-power .mp-val { font-size: 22px; font-weight: 700; color: #8a6a1f; }
/* 交易员侧：一眼看懂的合计条（名义/存续/浮动/50%可平仓/结算中） */
.agg-strip { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 6px; }
/* ★ 4.6（用户："卡片四边边框或者都不要边框好一点"）—— 四个小格**一律不要边框**，
   只留淡底色 + 一点阴影；颜色靠底色区分（名义=淡蓝 / 存续=淡绿 / 浮动=淡金 / 50%=淡紫） */
.agg-strip .agg-cell { flex: 1 1 150px; min-width: 130px; padding: 9px 13px; border-radius: 10px;
  background: #fbf6ea; border: 0;
  box-shadow: 0 1px 4px rgba(22, 50, 79, .07); }
.agg-strip .agg-cell:nth-child(1) { background: #fbf6ea; }
.agg-strip .agg-cell:nth-child(2) { background: #f3faf6; }
.agg-strip .agg-cell:nth-child(3) { background: #fdf9f0; }
/* ★ 4.7（用户："名义本金那四个卡片的标题可以是卡片颜色的加粗"） */
.agg-strip .agg-cell:nth-child(1) span { color: #8a6a1f; }
.agg-strip .agg-cell:nth-child(2) span { color: #2f8a5f; }
.agg-strip .agg-cell:nth-child(3) span { color: #b3821f; }
.agg-strip .agg-cell.hl span { color: #8a6a1f; }
/* ★ 4.7（用户："名义本金那四个卡片的标题可以是卡片颜色的加粗"） */
.agg-strip .agg-cell span { display: block; font-size: 12.5px; font-weight: 700; color: #6f6f6f; }
.agg-strip .agg-cell b { font-size: 17px; color: #1f1f1f; }
.agg-strip .agg-cell i { font-style: normal; font-size: 12px; color: #9a958c; margin-left: 4px; }
.agg-strip .agg-cell.hl { background: #fbf6ea; border: 0; }
.agg-strip .agg-cell.hl b { color: #8a6a1f; }
.agg-strip .agg-cell b.pos { color: #1f8a4c; }
.agg-strip .agg-cell b.neg { color: #c0392b; }
.chat-orders td.num.pos { color: #1f8a4c; }
.chat-orders td.num.neg { color: #c0392b; }
.trader-rail .t-rail-search {
  width: 100%; font: inherit; font-size: 13px; padding: 6px 8px;
  border: 1px solid #e8d9b0; border-radius: 8px; background: #ffffff;
}
.trader-rail .t-rail-search:focus { outline: none; border-color: #d8b45c; box-shadow: 0 0 0 3px rgba(185, 203, 228, .25); }
.trader-rail select {
  flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 6px 8px;
  border: 1px solid #e8d9b0; border-radius: 8px; background: #ffffff; color: #1f1f1f;
}
.trader-rail .t-rail-now { font-size: 12px; color: #9a958c; }
.trader-rail .rail-input textarea { min-height: 80px; }
/* 交易群页：订单块（点开就地聊天） */
.order-block { padding: 0; overflow: hidden; }
.order-block > summary {
  cursor: pointer; padding: 12px 14px; display: flex; flex-wrap: wrap;
  align-items: baseline; gap: 8px 12px; list-style: none;
}
.order-block > summary::-webkit-details-marker { display: none; }
.order-block > summary::before { content: '▸'; color: #1f1f1f; margin-right: 2px; }
.order-block[open] > summary::before { content: '▾'; }
.order-block > summary:hover { background: #fbf6ea; }
.ob-title { font-size: 15px; color: #1f1f1f; }
.ob-meta { font-size: 13px; color: #3a3a3a; }
.ob-last { flex-basis: 100%; }
.order-chat { padding: 0 14px 12px; }
.order-chat .chat-box { max-height: 300px; }
/* 订单块里的一行信息：方向 / 标的 / 期限结构 / 费率规模 / 时间 / 状态 / 行权 */
.ob-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; flex: 1; }
.ob-time { font-size: 12px; color: #6f6f6f; white-space: nowrap; }
/* v3.72：客户「我的订单」里，方向/状态的字号跟"建仓"那些普通文字一样大（原来徽章是 11/12px，偏小） */
.orders-table .dir-badge, .orders-table .badge { font-size: 14px; }
.orders-table td .ob-time { display: inline-block; margin-top: 3px; }
/* v3.73：最右边的「备注」折叠块（默认收起；只有交易员手动写过的备注才有内容） */
.note-fold { display: inline-block; }
.note-fold > summary {
  cursor: pointer; font-size: 12px; color: #6f6f6f; list-style: none;
  border: 1px solid #e8d9b0; border-radius: 6px; padding: 1px 8px; display: inline-block;
}
.note-fold > summary::-webkit-details-marker { display: none; }
.note-fold > summary:hover { color: #1f1f1f; border-color: #d8b45c; }
.note-fold[open] > summary { background: #fbf6ea; border-color: #d8b45c; color: #8a6a1f; }
.note-fold .note-body {
  margin-top: 5px; font-size: 12.5px; color: #3a3a3a; max-width: 220px; white-space: pre-wrap;
}
/* v3.74：询价表 —— 参考额度那列别换行；更新时间改成下单按钮右边的灰色小字 */
.quote-table th:nth-child(9), .quote-table td:nth-child(9) { white-space: nowrap; min-width: 5.2em; }
/* ★ 4.86（用户："报价页每一行的复制 icon 在时间右边同一行"）——
   原来这里是一列（时间在上、复制在下），现在改成一行：`[下单] 时间 ⧉` */
.quote-act { display: flex; align-items: center; gap: 6px; }
.quote-act-right { display: flex; flex-direction: row; align-items: center; gap: 4px; }
.quote-act-right .quote-at { order: 1; }
.quote-act-right .copy-icon { order: 2; }
.mc-actions .quote-act-right { align-items: flex-start; }
.quote-at { font-size: 11px; color: #9a958c; white-space: nowrap; }
.mc-actions .quote-at { margin-left: 6px; }
.ob-status { margin-left: auto; }
.ob-act { white-space: nowrap; }
.dir-badge {
  font-size: 11px; font-weight: 700; border-radius: 6px; padding: 1px 6px;
  border: 1px solid transparent; white-space: nowrap;
}
/* 中国市场习惯：买=红，卖=蓝（用户口径） */
/* ★ 4.79：方向标签也统一成金色深浅（买涨=深金实心、买跌=浅金、卖出/平仓=灰） */
.dir-badge.dir-buy { background: #c9a227; color: #ffffff; border-color: #c9a227; }
.dir-badge.dir-sell { background: #f6f3ec; color: #6f6f6f; border-color: #e8e3d9; }

/* 未读数：红色圆圈里一个数字（替代以前的绿色「新 N」标签） */
.dot-count {
  background: #e8452c; color: #ffffff; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 16px;
  min-width: 16px; height: 16px; padding: 0 5px;
  display: inline-block; text-align: center; vertical-align: middle;
}

/* 客户"我的订单"里的平仓/卖出那一行：蓝色系，跟买入（红）区分开 */
.orders-table tr.sell-row { background: #fffcf5; }
.orders-table tr.sell-row td:first-child { border-left: 3px solid #e8cf92; }
.orders-table tr.sell-record-row { background: #fffdf8; }

/* 我的订单最上面那一栏"今日到期"（只有当天到期才出现） */
/* 顶部摘要：五项横排，自动换行，中间不留大片空白 */
.order-sum { display: flex; align-items: baseline; gap: 10px 30px; flex-wrap: wrap; padding: 12px 16px; }
.os-pair { display: contents; }          /* 电脑上跟原来一样是独立两块 */
.chart-col-m { display: none; }          /* 手机专用的卡片内分时图，电脑上不显示 */
.only-m { display: none; }               /* 只在手机显示的短标签（额度） */
/* 询价页标题右边那两个按钮：行高一样、对齐 */
.hdr-btn { display: inline-flex; align-items: center; justify-content: center;
  height: 30px; line-height: 1; padding: 0 12px; vertical-align: middle; }

@media (max-width: 760px) {
  /* 期权费率 + 额度 并成同一行，标签只写"额度" */
  .os-pair { display: flex; flex: 1 1 100%; gap: 18px; align-items: baseline; }
  .only-pc { display: none; }
  .only-m { display: inline; }
  /* 卡片最后一行：可展开的分时图（不再做悬浮窗） */
  .chart-col-m { display: block; flex: 1 1 100%; margin-top: 10px; border-top: 1px solid #fbf6ea; padding-top: 8px; }
  .chart-col-m > summary { cursor: pointer; font-weight: 700; color: #1f1f1f; font-size: 14px; }
  .chart-col-m .big-chart { display: block; width: 100%; height: 300px; margin: 6px 0 4px;
    border: 1px solid #fbf6ea; border-radius: 8px; background: #fbf6ea; }
  /* 手机上那个"复制勾选行"没用了（勾选框只在电脑表格里有） */
  .req-actions { display: none; }
  /* 手机不用右边那张悬浮大图（改到卡片里的 .chart-col-m） */
  .chart-col-desktop { display: none !important; }
}
.order-sum .os-item { display: flex; align-items: baseline; gap: 8px; }
.order-sum .os-k { color: #9a958c; font-size: 12px; }
.order-sum .os-item b { color: #1f1f1f; font-size: 14px; font-weight: 600; }
.order-sum .os-name b { font-size: 17px; font-weight: 700; }
.order-sum .fee-big { font-size: 20px; color: #b3261e; }

/* 标准条款：直接写出来，勾选紧跟其下 */
.terms-block { margin: 12px 0 10px; border: 1px solid #e8d9b0; border-radius: 10px; padding: 10px 12px; background: #fbf6ea; }
.terms-title { font-weight: 700; font-size: 14px; color: #1f1f1f; margin-bottom: 6px; }
.terms-block .terms-pre { max-height: 190px; overflow-y: auto; margin: 0 0 8px; }
.terms-block .term-check { margin-top: 2px; }

/* 北向跟量规则：只写名词，鼠标移过去或点一下才展开完整解释 */
/* 下单页版式：左边参数/确认，右边大分时图（可折叠），把画面用满 */
.order-layout { display: flex; gap: 16px; align-items: flex-start; }

/* 今日/历史询价：左边卡片、右边大分时图（图紧挨右边的沟通栏） */
/* ★ v3.83：登录卡片**居中 + 放大**，并且**一次只显示一张**
   （以前是 flex 并排两张，"忘记密码"那张一出来就跟第一张挤在一起/重叠）。 */
.login-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; flex-wrap: nowrap; }
.login-wrap .card {
  flex: 0 1 auto; width: 100%; max-width: 560px;
  padding: 26px 28px; margin: 0 auto;
  box-shadow: 0 8px 28px rgba(22, 50, 79, .08);
}
.login-wrap .card h3 { font-size: 19px; }
.login-wrap .card input { font-size: 16px; }
/* 手机上别顶到边 */
@media (max-width: 760px) {
  .login-wrap .card { padding: 18px 16px; max-width: 100%; }
}
.quotes-layout { display: flex; gap: 14px; align-items: flex-start; }
.quotes-main { flex: 1 1 auto; min-width: 0; }
.quotes-chart { flex: 0 0 460px; max-width: 460px; }
.quotes-chart .big-chart {
  display: block; width: 100%; height: 520px; object-fit: contain; margin: 8px 0 6px;
  border: 1px solid #fbf6ea; border-radius: 8px; background: #fbf6ea;
}
.qc-list { display: flex; flex-wrap: wrap; gap: 4px; }
.qc-btn {
  border: 1px solid #e8d9b0; background: #ffffff; border-radius: 999px;
  padding: 2px 10px; font-size: 12px; cursor: pointer; color: #3a3a3a;
}
.qc-btn.active { background: #1f1f1f; color: #ffffff; border-color: #1f1f1f; }
@media (max-width: 1200px) {
  .quotes-layout { flex-direction: column; }
  .quotes-chart { flex: 1 1 auto; max-width: none; width: 100%; position: static; }
  .quotes-chart .big-chart { height: 320px; }
}
.order-main { flex: 1 1 auto; min-width: 0; }
.chart-col {
  /* v5.10：沟通栏开着时 main 上限 1320px，右边本来会剩一条空白 —— 把图加宽 70px 吃掉它 */
  flex: 0 0 630px; max-width: 630px; position: sticky; top: 10px;
  background: #ffffff; border: 1px solid #e8d9b0; border-radius: 12px; padding: 10px 12px;
}
.chart-col > summary { cursor: pointer; font-weight: 700; color: #1f1f1f; font-size: 14px; }
/* 浮动的分时图窗口：可以拖动、可以放大 */
.chart-col.cw-floating {
  position: fixed; z-index: 220; box-shadow: 0 12px 34px rgba(20, 40, 70, .28);
  background: #ffffff; resize: both; overflow: auto;
}
.cw-bar {
  display: flex; align-items: center; gap: 6px; margin: 6px 0 4px;
  cursor: move; user-select: none;
}
.cw-title { flex: 1; font-size: 11.5px; color: #9a958c; }
.cw-btn {
  border: 1px solid #e8d9b0; background: #ffffff; border-radius: 6px;
  font-size: 11.5px; padding: 1px 8px; cursor: pointer; color: #1f1f1f;
}
.cw-btn:hover { background: #fbf6ea; }
.chart-col .big-chart {
  display: block; width: 100%; height: 300px; margin: 6px 0 4px;
  border: 1px solid #fbf6ea; border-radius: 8px; background: #fbf6ea;
}
.chart-head { font-size: 14px; margin: 4px 0 2px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.chart-head b { font-size: 18px; color: #1f1f1f; }
.chart-head span { font-size: 13px; }
@media (max-width: 1100px) {
  .order-layout { flex-direction: column; }
  .chart-col { flex: 1 1 auto; max-width: none; width: 100%; position: static; }
  .chart-col .big-chart { height: 320px; }
}

.kw {
  position: relative; font-weight: 700; color: #8a6a1f; cursor: help;
  border-bottom: 1px dashed #d8b45c; padding-bottom: 1px;
}
.kw .kw-pop {
  display: none; position: absolute; left: 0; top: 22px; z-index: 30;
  width: min(360px, 78vw); background: #1f1f1f; color: #ffffff;
  font-weight: 400; font-size: 12.5px; line-height: 1.6;
  padding: 10px 12px; border-radius: 10px; box-shadow: 0 8px 22px rgba(20, 40, 70, .28);
}
.kw:hover .kw-pop { display: block; }
.confirm-list { list-style: none; margin: 0 0 6px; padding: 0; }
.confirm-list li { display: flex; gap: 10px; padding: 5px 0; border-bottom: 1px dashed #fbf6ea; font-size: 13.5px; }
.confirm-list li:last-child { border-bottom: none; }
.confirm-list li > span { color: #9a958c; min-width: 108px; }
.confirm-list li > b { color: #1f1f1f; font-weight: 600; }
.confirm-list .fee-mid { font-size: 17px; color: #b3261e; }

/* 按钮：禁用的显示"禁止"光标变灰；同一行里的按钮宽度一致（行权/咨询对齐） */
.btn:disabled, .btn[disabled] { cursor: not-allowed; opacity: .55; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.row-actions .btn, .row-actions .order-go { min-width: 64px; text-align: center; }
.terms-fold { margin: 10px 0; }
.terms-fold > summary { cursor: pointer; font-size: 12px; color: #6f6f6f; }
.terms-fold > summary:hover { color: #1f1f1f; }
.expire-box {
  border: 1px solid #f0c36d; background: #fffaf0; border-radius: 10px;
  padding: 10px 14px 4px; margin-bottom: 16px;
}
.expire-title { margin: 0 0 8px; font-size: 16px; color: #8a5a00; }
.expire-row { background: #fff8e6 !important; }
.expire-row td:first-child { border-left: 3px solid #e0a437; }
.badge.expire-badge { background: #f6c65b; color: #5b3a00; font-weight: 700; }
.badge.sell-wait { background: #fbf6ea; color: #1f1f1f; border: 1px solid #e8d9b0; }
.badge.sell-ok { background: #8a6a1f; color: #ffffff; }
/* v3.51：用户说"待接单/接单"不要金黄色 —— 就统一用普通样式（跟"已接单，待成交"同一套）。
   .badge.gold / .btn.gold 已删除，需要金黄再自己加回来。 */
/* 成交按钮 = 更浓的绿 + 加粗，尺寸跟其他按钮一样（加了 small） */
.btn.ok.btn-strong { background: #1f8a4c; border-color: #1f8a4c; color: #ffffff; font-weight: 800; }
/* 未成交/已拒绝订单的折叠区（客户「我的订单」最下面） */
/* ★ 4.99（用户："未成交订单不要小一圈…只是底色变了呀；把'未成交订单'这一行字挪到背景外面；
   未成交订单大一点字号，'点击查看'小一点、浅一点；手机电脑都改"）——
   ① 底色/描边从 `<details>` 挪到里面那层 `.failed-body` → 标题行落在背景**外面**；
   ② `.failed-body` 的左右内边距跟 `.card` 一样（电脑 20px / 手机 12px），
      里面的表格/卡片就跟上面「我的订单」**同宽同大小**，只有底色不同；
   ③ 标题字号 +1，"点开查看"更小更浅。 */
.failed-orders { margin: 14px 0 4px; border: 0; background: none; }
.failed-orders > summary {
  padding: 8px 2px; cursor: pointer; font-weight: 700; font-size: 15.5px;
  color: #1f1f1f; background: none; list-style: none;
}
.failed-orders > summary::-webkit-details-marker { display: none; }
/* ★ 4.101（用户："未成交订单前面的三角形 icon 改成 fail 的相关 icon（手机也同步）"）——
   用 **✕**（打叉 = 未成交/被拒）代替原来的 ▸/▾；展开时颜色加深一点表示"已打开"。 */
.failed-orders > summary::before { content: '✕'; font-size: 13px; font-weight: 700; color: #b04a3f; margin-right: 5px; }
.failed-orders[open] > summary::before { color: #8c3b31; }
.failed-orders > summary .hint { font-weight: 400; font-size: 11.5px; color: #b3aa9c; margin-left: 8px; }
/* ★ 4.103（用户："'点开查看'改为'点击查看 - 点击收起'，手机+电脑同步"） */
.failed-orders > summary .hint::after { content: '点击查看'; }
.failed-orders[open] > summary .hint::after { content: '点击收起'; }
/* ★ 4.99b（用户："未成交订单不要小一圈…只是底色变了呀"）——
   实测：主表在 `.orders-desktop`（左右内边距 0）里，而未成交那张表被我加了 20px 内边距 + 1px 边框
   → 比主表窄 42px、还右移 21px（手机卡片同理小一圈）。
   现在**左右内边距和边框全部去掉**，只留**底色**（+圆角、裁掉溢出）→
   表格/卡片跟上面完全同宽同位置，只有底色不同。 */
/* ★ 4.101（用户："电脑的未成交订单表格不用背景浅金色了，但表头的灰色底改成浅金"）——
   整块底色去掉（跟主表一样白底），只把**表头那一行**刷成浅金，用来区分"这一块是未成交"。 */
.failed-orders .failed-body {
  padding: 0 0 12px; border: 0; border-radius: 10px; overflow: hidden; background: none;
}
.failed-orders .failed-body thead th { background: #fdf3d9; }
/* ★ 4.102（用户："电脑未成交的咨询键和订单的咨询键要一样"）——
   未成交表里的按钮不在 `.row-actions` 里，拿不到 4.94 那条统一规格 → 这里补一条一样的。 */
.failed-body .orders-table td .btn {
  height: 28px; min-height: 28px; min-width: 64px; padding: 0 12px;
  border-radius: 6px; font-size: 14px; font-weight: 600; line-height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
}
/* ★ 4.99c（用户："电脑为对齐每一列大小的表格"）——
   两张订单表虽然同宽，但 `table-layout:auto` 会按内容分配剩余宽度（"状态"列一张宽一张窄）。
   改成**固定布局 + 每列写死宽度**（两张表共用同一套，所以列完全对齐）；
   旧的 nth-child `min-width` 全部让位（一张表只能有一个宽度来源）。 */
/* ★ 4.101（用户："指令列加宽到"限价这条"完整露出不换行，缩短列宽，尽量都不换行"）——
   用**百分比**（不是写死 px）：这样两张表在任何画幅下都按同一比例分列、永远对得齐、也不会溢出；
   同时把"指令/状态/时间/操作"这四列给足（限价、交易成功（开仓价）、接单 26-09-29 14:38、两个按钮都不折行），
   其余短列尽量压缩。 */
.orders-table { table-layout: fixed; width: 100%; }
.orders-table th, .orders-table td { min-width: 0 !important; }
.orders-table th:nth-child(1),  .orders-table td:nth-child(1)  { width: 11%; }
.orders-table th:nth-child(2),  .orders-table td:nth-child(2)  { width: 7%; }
.orders-table th:nth-child(3),  .orders-table td:nth-child(3)  { width: 6.5%; }
.orders-table th:nth-child(4),  .orders-table td:nth-child(4)  { width: 4.5%; }
.orders-table th:nth-child(5),  .orders-table td:nth-child(5)  { width: 4.5%; }
.orders-table th:nth-child(6),  .orders-table td:nth-child(6)  { width: 5%; }
.orders-table th:nth-child(7),  .orders-table td:nth-child(7)  { width: 4.5%; }
.orders-table th:nth-child(8),  .orders-table td:nth-child(8)  { width: 10%; }   /* 指令：限价（xx）要一行 */
.orders-table th:nth-child(9),  .orders-table td:nth-child(9)  { width: 15%; }   /* 状态 */
.orders-table th:nth-child(10), .orders-table td:nth-child(10) { width: 12%; }   /* 时间 */
.orders-table th:nth-child(11), .orders-table td:nth-child(11) { width: 15.5%; } /* 操作：两个按钮一行 */
.orders-table th:nth-child(12), .orders-table td:nth-child(12) { width: 4.5%; }  /* 备注 */
/* 沟通栏里的订单行（一个订单一行） */
.rail-order {
  display: block; width: 100%;
  background: #ffffff; border: 1px solid #e8d9b0; border-radius: 12px;
  padding: 8px 10px; margin: 6px 0; cursor: pointer; font: inherit; text-align: left;
  box-shadow: 0 1px 4px rgba(20, 40, 70, .05);
}
.rail-order:hover { border-color: #d8b45c; background: #fbf6ea; }
.rail-order b { font-size: 13px; color: #1f1f1f; }
.rail-order .ro-top { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.rail-order .ro-status { margin-left: auto; font-size: 11px; color: #8a6400; white-space: nowrap; }
.rail-order .ro-status.ro-rejected { color: #b3261e; font-weight: 700; }
.rail-order .ro-meta { font-size: 11px; color: #6f6f6f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* v3.54：这里原来有个"未读红圆点"的样式，现在订单泡泡不参与未读，已删掉 */
/* "← 回到总对话"放在消息最下面、靠右 */
.rail-backwrap { display: flex; justify-content: flex-end; padding: 8px 0 2px; }
.rail-back { font-size: 12px; }
.rail-order .ro-bottom {
  display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 3px;
  font-size: 11px; color: #6f6f6f;
}
.rail-order-list { max-height: none; }
.rail-order-list.open { max-height: 300px; overflow-y: auto; padding-right: 2px; }
/* "一条线 + 中间小三角"：平时只占一行高度，点三角展开全部订单 */
.rail-expand {
  display: flex; align-items: center; gap: 8px; margin: 6px 0 2px;
}
.rail-expand::before, .rail-expand::after {
  content: ''; flex: 1; height: 1px; background: #e8d9b0;
}
.rail-more {
  border: none; background: transparent; color: #1f1f1f; cursor: pointer;
  font-size: 11px; padding: 0 6px; white-space: nowrap;
}
.rail-more:hover { color: #1f1f1f; text-decoration: underline; }
.rail-ask {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #fff8e6; border: 1px solid #f0d9a0; border-radius: 10px;
  padding: 8px 10px; margin-bottom: 8px; font-size: 12px; color: #7a5a00;
}
.rail-toggle {
  position: fixed; right: 18px; bottom: 18px; z-index: 71;
  min-width: 52px; height: 52px; padding: 0 16px 0 14px; border-radius: 26px; cursor: pointer;
  background: #1f1f1f; color: #ffffff; border: none; font-size: 20px;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 6px 16px rgba(20, 40, 70, .28);
}
.rail-toggle-text { font-size: 14px; font-weight: 600; letter-spacing: .5px; }
body.rail-open .rail-toggle { display: none; }
.rail-badge {
  position: absolute; top: -4px; right: -4px; background: #e8452c; color: #ffffff;
  border-radius: 999px; font-size: 11px; font-weight: 700; padding: 1px 6px;
}

/* ===== UI/UX 打磨（按 ui-ux-pro-max 的交付前检查表，v4.4） =====
   1) 键盘可见焦点（可访问性：不能删 focus ring）
   2) 所有可点的东西 cursor:pointer + 150~300ms 过渡
   3) 次要文字对比度提到 4.5:1
   4) 尊重"减少动态效果"（prefers-reduced-motion）
   5) 手机端按钮/输入框做到 44px 触摸目标
*/
:root {
  --muted-ink: #6f6f6f;      /* 原来的 #9a958c 只有约 3.2:1，偏浅 */
}

/* 1) 焦点可见：键盘 Tab 时清楚看到在哪 */
.btn:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible, .tab:focus-visible, .chip:focus-visible, .mode-btn:focus-visible {
  outline: 2px solid #8a6a1f; outline-offset: 2px; border-radius: 6px;
}

/* 2) 可点击元素：手型光标 + 平滑过渡 */
.btn, button, .tab, .chip, .mode-btn, .check-chip, .copy-icon, .order-go,
summary, .rail-order, .rail-toggle, .bell-btn, .qc-btn, .extra-btn, .cw-btn {
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.btn:active, button:active, .tab:active { transform: translateY(1px); }

/* 3) 次要文字用更深的灰（对比度 ≥4.5:1） */
.hint, .msg-who, .rail-title, .ro-meta, .rail-card-meta, .ac-k, .cw-title,
.rail-bubble span, .row-tags .badge.wait { color: var(--muted-ink); }

/* 4) 用户系统设了"减少动态效果"就别做动画 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 5) 手机：触摸目标至少 44px 高 */
@media (max-width: 760px) {
  .btn, button, .order-go, .tab, .mode-btn { min-height: 40px; }
  input[type=text], input[type=password], input[type=number], input[type=email],
  select, textarea { min-height: 40px; font-size: 16px; }   /* 16px 还能防 iOS 自动放大 */
}

/* 复制成功等小提示：右下角浮一个，2 秒自己消失 */
.app-toast {
  position: fixed; right: 22px; bottom: 84px; z-index: 99;
  background: #1f1f1f; color: #ffffff; font-size: 13px;
  padding: 8px 16px; border-radius: 999px; box-shadow: 0 6px 18px rgba(20, 40, 70, .3);
  opacity: 0; transform: translateY(8px); transition: opacity .18s, transform .18s;
  pointer-events: none;
}
.app-toast.show { opacity: 1; transform: none; }


/* 撤回确认框：跟着右侧对话栏走，显示在对话栏里居中偏下 */
.confirm-overlay {
  position: fixed; inset: 0; background: rgba(15, 30, 50, .45);
  z-index: 300; display: flex; align-items: center; justify-content: center;
}
.confirm-box {
  background: #ffffff; border-radius: 14px; padding: 18px 20px;
  width: min(460px, 92vw); max-height: 86vh; overflow-y: auto;
  box-shadow: 0 18px 44px rgba(20, 40, 70, .3);
}
.confirm-box .confirm-list { margin-bottom: 8px; }
.chat-confirm {
  position: fixed; z-index: 120; display: none;
  background: #ffffff; border: 1px solid #e8d9b0; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(20, 40, 70, .22); padding: 14px 16px;
}
.chat-confirm .cc-text { font-size: 14px; color: #1f1f1f; margin-bottom: 10px; }
.chat-confirm .cc-actions { display: flex; justify-content: flex-end; gap: 8px; }
/* 宽屏：沟通栏占位；主内容仍居中，只比原来（1400）宽一点，避免视觉重心偏左 */
@media (min-width: 1250px) {
  body.rail-open { padding-right: 460px; }
  /* ★ 4.15（用户："右侧卡片距离右边沟通框有好多空隙，删减至左右两张卡片之间的宽度"）
     —— 沟通栏开着时，主内容**铺满**它左边的空间，左右各留 14px（= 两张卡片之间的间隙 14px）。
     这样左侧那列的持仓表也能拿到全部剩余宽度，横向滚动条才会消失。 */
  body.rail-open main { max-width: none; margin: 20px 14px; }
  /* 沟通栏开着时，"返回"按钮贴在主页面右侧（= 沟通栏左边），不再挡在左下角 */
  body.rail-open .back-fab { right: 478px; bottom: 18px; }
}
/* 窄屏：当成抽屉盖上来 */
@media (max-width: 1249px) {
  .chat-rail { width: min(460px, 94vw); }
}
/* 手机：沟通栏 = 全屏消息页；手机自带返回，所以不要浮动返回键 */
@media (max-width: 760px) {
  /* 手机上键盘弹出来会盖住发送键：用"可见区域高度"（dvh）+ JS 跟着 visualViewport 调，
     不再用固定 100vh（有的手机 100vh 是键盘弹起前的高度，发送键就被顶到键盘后面了） */
  .chat-rail { width: 100%; max-width: 100%; border-left: none; height: 100vh; height: 100dvh; }
  .rail-input { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .back-fab { display: none; }
  /* 手机消息页头部再收窄一点 */
  .rail-head { padding: 6px 10px; }
  .rail-head-title { font-size: 15px; }
  .rail-x, .rail-wechat { font-size: 12px; padding: 3px 9px; }
  .rail-bubbles { padding: 6px 10px 2px; }
  .rail-title { padding: 4px 10px 2px; }
  .rail-box { padding: 0 10px 8px; }
  .rail-input { padding: 6px 10px 10px; }
  /* 发送键永远在最右 */
  .rail-input-row .btn.primary { margin-left: auto; }
  /* 手机上输入框不点进去时只有一半高（原来被 rows="5" 撑到 92px），点进去打字才变大 */
  .rail-input textarea { height: 46px; min-height: 46px; font-size: 14px; line-height: 1.45; padding: 10px; }
  .rail-input textarea:focus { height: 112px; min-height: 112px; }
  .rail-input-row .hint { display: none; }
}
/* ★ 4.20（用户："置于底部电脑居中，而不是卡片居中"）——
   页脚原来是跟着内容流走的（所以是"按卡片居中"）。改成**固定在窗口底部**：
   fixed 定位是相对**视口**的，body 上那 460px 的沟通栏留白不会影响它，
   于是它永远是"电脑屏幕的底部、屏幕的水平居中"。
   底部垫一层浅色渐变，滚到最下面时文字也看得清；`pointer-events:none` 不挡点击。 */
.footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  text-align: center; color: #9a958c; font-size: 12px;
  padding: 6px 0 8px; pointer-events: none;
  background: linear-gradient(to top, rgba(244, 246, 249, .96) 55%, rgba(244, 246, 249, 0));
}
/* 给固定在底部的页脚留出空间，免得盖住最后一行内容 */
main { padding-bottom: 34px; }
.bell-wrap { position: relative; margin-left: auto; }
.bell-btn { background: none; border: none; font-size: 18px; cursor: pointer; color: #ffffff; position: relative; }
.bell-count {
  position: absolute; top: -6px; right: -8px; background: #e34d4d; color: #ffffff;
  border-radius: 999px; font-size: 11px; padding: 1px 6px; min-width: 18px; text-align: center;
}
.bell-drop {
  position: absolute; right: 0; top: 30px; width: 320px; max-height: 420px; overflow-y: auto;
  background: #ffffff; border: 1px solid #e8d9b0; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.15);
  z-index: 200;
}
.bell-item { display: block; padding: 10px 12px; border-bottom: 1px solid #fbf6ea; text-decoration: none; color: #222222; }
.bell-item:hover { background: #fbf6ea; }
.bell-title { font-size: 13px; font-weight: 600; }
.bell-body { font-size: 12px; color: #6f6f6f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bell-time { font-size: 11px; color: #9a958c; margin-top: 2px; }
/* ★ 4.108（用户："这个未读的黑色文字消息，已读之后要变灰字的吧"）——
   未读 = 近黑加粗；已读 = 灰字、不加粗（电脑/手机、客户/交易员共用这一处）。 */
.bell-item.is-unread .bell-title { color: #1b1b1b; font-weight: 700; }
.bell-item.is-read .bell-title { color: #9a958c; font-weight: 500; }
.bell-item.is-read .bell-body { color: #b3aea4; }
.bell-item.is-unread .bell-title::before {
  content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px;
  border-radius: 50%; background: #e34d4d; vertical-align: 1px;
}
.bell-empty { padding: 16px; text-align: center; color: #9a958c; font-size: 13px; }
/* ★ 4.14（用户："返回键太宽挡住了，改成只有一个 enter 返回箭头的 icon"）——
   从"← 返回"长条改成**圆形小图标**（↵），宽度从 ~90px 收到 38px，不再挡内容、也不占右边的画幅。 */
.back-fab {
  position: fixed; right: 16px; bottom: 84px; z-index: 99;
  background: #1f1f1f; color: #ffffff; border: none; border-radius: 50%;
  width: 38px; height: 38px; padding: 0; cursor: pointer;
  font-size: 17px; line-height: 1; box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.back-fab:hover { background: #1f1f1f; }

/* 手机端"我的订单"：表格变成一单一张卡片，左右标签+内容，不再竖排挤压 */
@media (max-width: 760px) {
  .orders-table thead { display: none; }
  .orders-table, .orders-table tbody, .orders-table tr { display: block; width: 100%; }
  .orders-table tr {
    background: #ffffff;
    border: 1px solid #e8d9b0;
    border-radius: 12px;
    margin: 12px 0;
    padding: 4px 0;
  }
  .orders-table td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    border: none;
    padding: 7px 12px;
    min-width: 0;
    text-align: left;
  }
  .orders-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #6f6f6f;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .orders-table td .stock-id { text-align: right; }
  .orders-table td .stock-code { display: block; }
  .orders-table td .stock-name { display: block; margin-top: 2px; }
  .orders-table tr.record-row { background: #fbf6ea; }
  .orders-table tr.record-row td { display: block; }
  .orders-table tr.record-row td::before { content: none; }
  .orders-table .badge { white-space: nowrap; }
}

/* 手机：消息铃下拉贴着屏幕（放在文件最后，保证覆盖前面的 .bell-drop 基准规则） */
@media (max-width: 760px) {
  .bell-drop {
    position: fixed; left: 8px; right: 8px; top: 54px; width: auto;
    max-height: 60vh; overflow-y: auto;
  }
  .bell-item { padding: 12px; }
  .bell-title { font-size: 14px; }
  .bell-body { font-size: 13px; }
}

/* ============================================================
   ★ v3.83 手机端三处（用户报的）—— **必须在文件最末尾**：
   前面的 `.rail-input textarea{font-size:14px}` 等规则跟这里同优先级，
   CSS 是"同优先级比谁在后面"，所以放前面会被它盖掉（踩过一次）。
   ============================================================ */

/* ① 手机询价卡片的头：补一行"询价规模 ｜ 询价 时间"（时间定格，跟电脑版一致） */
.mc-sub { display: block; font-size: 12.5px; font-weight: 400; color: #6f6f6f; margin-top: 2px; }

@media (max-width: 760px) {
  /* ② 手机询价卡片底部：**一行放完** —— 下单（小的）→ 复制 icon → 时间。
        以前下单按钮被"触摸目标 ≥40px"那条规则撑得很高，时间/复制还是上下两行。 */
  .quote-mobile .mc-actions {
    flex-wrap: nowrap; align-items: center; gap: 10px; margin-top: 8px;
  }
  .quote-mobile .mc-actions a.order-go {
    min-height: 0; height: auto; padding: 4px 12px; font-size: 13px; line-height: 1.5;
  }
  .quote-mobile .mc-actions .copy-icon { min-height: 0; padding: 2px 6px; font-size: 17px; line-height: 1; }
  .quote-mobile .mc-actions .quote-at { margin-left: auto; }

  /* ③ iOS：**任何 <16px 的输入框一聚焦，Safari 会把整页放大** ——
        用户报的就是"一进入对话框，整个界面就放大太大"。
        沟通栏的 textarea 原来是 14px、搜索框 12.5px，这里全部拉到 16px。 */
  input[type=text], input[type=password], input[type=email], input[type=number],
  input[type=search], input[type=file], textarea, select,
  .rail-input textarea, .rail-searchbar input, .trader-rail .t-rail-search,
  .trader-rail select, .link-copy input, .chat-input input, .chat-input textarea {
    font-size: 16px;
  }
  .rail-searchbar input { padding: 7px 9px; }
  .link-copy input { font-size: 16px; }

  /* ★ 4.108：交易员侧沟通框跟客户侧一样 —— 不点进去 46px，点进去才变大到 112px。
     以前 `.trader-rail .rail-input textarea{min-height:80px}` 的优先级更高，
     交易员侧一进对话输入框就是 80px 高，两边不一致。这里统一压过来。 */
  .trader-rail .rail-input textarea { height: 46px; min-height: 46px; }
  .trader-rail .rail-input textarea:focus { height: 112px; min-height: 112px; }
}

/* ============================================================
   ★ v3.84 登录页（整页重做）：暗底 + 居中卡片 + 金色品牌感
   —— 参考用户给的 Gemini 那个后台登录页的调性；金色取自我们的 logo（日照金山＋飞鸟）。
   放在文件最末尾：要盖掉前面 .card / main / input 那些浅色规则（同优先级比谁在后面）。
   ============================================================ */
/* v3.86：**一页放得下、不出竖向滚动条** —— 把 body 变成"上中下"三段：
   中间（main）自动占满剩余高度并把卡片竖直居中，页脚永远贴在底部。 */
body.auth-dark {
  /* 4.104: back to the navy login page (black-gold only for the app pages). */
  background: #0c1626; color: #e7eef7;
  min-height: 100vh; display: flex; flex-direction: column;
}
body.auth-dark main {
  flex: 1 1 auto; max-width: none; margin: 0; padding: 18px 16px;
  display: flex; flex-direction: column; justify-content: center;
}
body.auth-dark .footer { flex: 0 0 auto; margin: 0; padding: 8px 0 12px;
  color: rgba(255, 255, 255, .3); background: transparent; }
/* ★ 4.30（用户："手机登录页『大西部衍生品』那行版本号小字一直在页面最底部就行，
   不要我一写输入框就抬起来了"）——
   `.footer` 是 `position: fixed`（跟着**视觉视口**走），手机键盘一弹就把它顶到键盘上面去。
   登录页改成 `absolute`：贴着**页面**底部，键盘弹不弹都不动（body 用 100dvh，
   这样它刚好在屏幕最下面，又不用滚动）。只改手机，电脑端还是 fixed。 */
@media (max-width: 760px) {
  body.auth-dark { position: relative; min-height: 100dvh; }
  body.auth-dark .footer { position: absolute; left: 0; right: 0; bottom: 0; }
}

/* 背景：顶部一颗金色光晕 + 底部两层山脊（纯 CSS/SVG，不加载图片，秒开） */
.auth-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.auth-bg .auth-glow {
  position: absolute; left: 50%; top: -300px; width: 1180px; height: 760px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side,
              rgba(240, 196, 100, .30), rgba(240, 196, 100, .07) 58%, rgba(240, 196, 100, 0) 74%);
}
.auth-ridges { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 40vh; }
/* v3.95：右上角 = 用户给的那张**双鹰白描图**（做成"白线 + 透明底"的 PNG）。
   单独一层，不会被山脊的 preserveAspectRatio="none" 拉扁。 */
.auth-birds {
  position: absolute; top: 4%; right: 3%; width: min(330px, 27vw); height: auto;
  /* ★ 4.104（用户："可以把老鹰换成金棕色"）——
     原来是白色线稿；用 CSS 滤镜把白线染成**金棕色**（不换图、不改 PNG）：
     sepia 先把白推向暖黄，再 saturate 加深成棕金，最后稍微压一点亮度。 */
  filter: sepia(1) saturate(3.4) hue-rotate(-6deg) brightness(.72) contrast(1.05);
  opacity: .95;
  pointer-events: none;
  /* ★ 4.29（用户："首页的两只鸟向右上方移动"）——
     原来这里挂着 v3.97 那次"往左 2cm、往下 2cm"的位移，现在把那 2cm 还回去：
     top 6%→4%、right 4%→3%（约再往上/往右 2.5cm），位移整个去掉。 */
}

.auth-page {
  position: relative; z-index: 1;
  display: flex; justify-content: center; align-items: center;
  padding: 0;
}
.auth-card {
  width: 100%; max-width: 578px;          /* v3.97：再宽一点（用户："卡片可以再宽一点点"） */
  background: linear-gradient(180deg, rgba(255,255,255,.078), rgba(255,255,255,.032));
  border: 1px solid rgba(255, 255, 255, .11);
  /* v3.89：卡片边到输入框边的留白**四边都翻倍**（用户："四边留宽现在的两倍"）——
     36/38/28 → 72/76/56；同时把卡片加宽同样的量（470 → 546），
     这样"留白翻倍"的同时**输入框不会变窄**。 */
  border-radius: 22px; padding: 72px 76px 56px;
  max-width: 546px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .07);
}

/* 品牌区 */
.auth-brand { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
/* v3.85：小图标换成真的 logo 图片 —— 图已裁成正圆，这里再加圆角裁一次，保证没有白边 */
.auth-emblem {
  width: 58px; height: 58px; flex: 0 0 auto;
  border-radius: 50%; object-fit: cover; display: block;
  box-shadow: 0 8px 22px rgba(232, 189, 92, .32), 0 0 0 1px rgba(255, 255, 255, .08);
}
/* v3.92：品牌组合 = 中文名 / 英文简写（两行）+ 竖线 + 产品名
   · 英文简写跟「大西部财富」**等宽** —— 靠 letter-spacing 撑开（下条注释说明取值来由）
   · 竖线的高度 = 上面两行加起来（.auth-lock 用 align-self: stretch） */
.auth-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* 左边两行 / 右边竖线+产品名：**竖线高度**由这一层决定（= 左边两行的高度） */
/* v3.97：公司名 + 产品名合成一句标题：**粗体 + 25px**（"用前者的字体加粗、后者的字号"），
   竖线和间隔都去掉 */
.auth-name {
  font-size: 25px; font-weight: 800; letter-spacing: .5px;
  color: #fbf6ea; white-space: nowrap;
}
.auth-card-title { font-size: 16px; font-weight: 600; color: #cfe0f0; margin-bottom: 17px; }

/* 输入行：左边小标签 + 右边输入（跟参考图一样的一条深色横条） */
.auth-field {
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px; margin-bottom: 13px;
  background: rgba(8, 17, 28, .62);
  border: 1px solid rgba(255, 255, 255, .10); border-radius: 12px;
  /* v3.86：每一行**等高**（用户："这些输入框等高好看一点"）——
     v3.88：整体放大到 52px，验证码图片 36px 放进同一行也撑不高 */
  min-height: 52px; height: 52px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.auth-field:focus-within {
  border-color: rgba(238, 199, 109, .62);
  box-shadow: 0 0 0 3px rgba(238, 199, 109, .12);
}
.af-label { flex: 0 0 54px; font-size: 13.5px; color: #a5760a; }
.auth-field input {
  flex: 1; min-width: 0; max-width: none; padding: 0;
  background: none; border: none; outline: none;
  color: #fbf6ea; font-size: 16px; font-family: inherit;
}
.auth-field input::placeholder { color: #6f6f6f; }
/* ★ 4.1：**登录页用户名/密码的"白框"是 Chrome 自动填充刷出来的**
   （我们有存过密码，浏览器一进这个页面就把 input 刷成白底 + 黑字，深色卡片上特别突兀）。
   Chrome 不允许直接改 autofill 的 background，只能用一层超大的 inset 阴影盖住它，
   同时把文字和光标颜色改回浅色。 */
.auth-page input:-webkit-autofill,
.auth-page input:-webkit-autofill:hover,
.auth-page input:-webkit-autofill:focus,
.auth-page input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px rgba(8, 17, 28, .92) inset !important;
  -webkit-text-fill-color: #fbf6ea !important;
  caret-color: #fbf6ea;
  transition: background-color 9999s ease-in-out 0s;
}
.af-captcha {
  flex: 0 0 auto; width: 112px; height: 36px; border-radius: 8px;
  background: #fbf6ea; cursor: pointer;
}

/* 保持登录 */
.auth-remember {
  display: flex; align-items: center; gap: 9px;
  margin: 6px 0 18px; font-size: 13.5px; color: #d8b45c; cursor: pointer;
}
.auth-remember input { width: 16px; height: 16px; accent-color: #e8bd5c; flex: 0 0 auto; }
.auth-remember em { font-style: normal; color: #6f8299; }

/* 主按钮（金色渐变，跟 logo 一套） */
.auth-btn {
  width: 100%; padding: 13px 16px; border: none; border-radius: 12px; cursor: pointer;
  background: linear-gradient(135deg, #f8e2aa, #e2a937);
  color: #2b1d03; font-size: 16px; font-weight: 700; letter-spacing: 2px;
  transition: filter .18s ease, transform .18s ease;
}
.auth-btn:hover { filter: brightness(1.05); }
.auth-btn:active { transform: translateY(1px); }
.auth-btn:disabled { opacity: .5; cursor: default; filter: none; }
.auth-btn.ghost {
  background: rgba(255, 255, 255, .07); color: #e8d9b0;
  border: 1px solid rgba(255, 255, 255, .14); font-weight: 600;
  letter-spacing: 0; margin-bottom: 10px;
}
.auth-btn.ghost:hover { background: rgba(255, 255, 255, .12); filter: none; }
/* v3.97：发送验证码的倒计时状态 —— 透明一点，文案是"N 秒后重试" */
.auth-btn.counting { opacity: .5; }
/* v3.97：邮箱对不上的错误行（叉号 + 一句话），就在邮箱框下面 */
.auth-err-line {
  display: flex; align-items: center; gap: 8px;
  margin: -6px 0 12px; font-size: 13px; color: #ffb3b3;
}
.auth-err-line .at-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%; flex: 0 0 auto;
  background: rgba(226, 84, 84, .9); color: #ffffff; font-size: 11px; font-weight: 700;
}

.auth-links { text-align: center; margin-top: 15px; font-size: 13.5px; }
.auth-links a { color: #a9c3de; text-decoration: none;
  border-bottom: 1px dashed rgba(169, 195, 222, .45); }
.auth-tip { font-size: 13px; color: #93a7bd; line-height: 1.75; margin: 0 0 17px; }
.auth-hint { font-size: 12.5px; color: #7d90a6; margin: -2px 0 14px; }
.auth-hint.bad { color: #ff9d9d; }
/* v3.87：错误提示 = **浮现的小弹窗**（带叉叉图标，比输入框高一点点，压住框下沿），4 秒后淡出。
   做成绝对定位 + 负 bottom，所以它**不占版面高度**，也就不会把页面顶高出一屏。 */
.auth-field-wrap { position: relative; }
.auth-btn-wrap { margin-bottom: 0; }
.auth-toast {
  position: absolute; left: 50%; bottom: -26px;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px;                  /* 比输入框(48px)略矮一行，但比一行小字高 */
  background: rgba(46, 16, 20, .97);
  border: 1px solid rgba(226, 84, 84, .55);
  border-radius: 11px; color: #ffc2c2;
  font-size: 13.5px; letter-spacing: .3px; white-space: nowrap;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .5);
  z-index: 6; cursor: pointer;
  animation: authToastIn .2s ease-out;
}
.auth-toast.hide { opacity: 0; transition: opacity .5s ease; }
.auth-toast .at-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%;
  background: rgba(226, 84, 84, .9); color: #ffffff;
  font-size: 11px; font-weight: 700; line-height: 1;
}
@keyframes authToastIn {
  from { opacity: 0; transform: translate(-50%, 7px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
/* 密码错的弹窗浮在登录按钮上方一点（压住按钮上沿） */
.auth-btn-wrap .auth-toast { bottom: auto; top: -18px; }
.auth-note {
  margin-top: 20px; padding-top: 14px; text-align: center;
  border-top: 1px solid rgba(255, 255, 255, .07);
  font-size: 12px; color: #9a958c; line-height: 1.8;
}
.auth-note b { color: #c9d8e6; font-weight: 600; }
/* v3.90：下单页里"期权费超过最大购买力"的提示条 */
.pp-warn {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: #fff7e6; border: 1px solid #f0d9a8; border-radius: 8px;
  padding: 9px 12px; margin: 6px 0; color: #8a6400; font-size: 13px;
}
.pp-warn .btn { margin-left: auto; }
/* v3.92：连"最大购买力"都不够 —— 这时申请授信也解决不了，要入金 */
.pp-bad {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: #fdecec; border: 1px solid #f2bdbd; border-radius: 8px;
  padding: 9px 12px; margin: 6px 0; color: #9c1f1f; font-size: 13px;
}
.pp-bad .btn { margin-left: auto; }
/* v3.97：条款里要"红色加粗"的地方（超出购买力的部分 / 17:00 前入金） */
.red-b { color: #c0392b; font-weight: 700; }
/* ★ 3.100：下单页那枚**金色气泡**（超过最大购买力时）—— 用户要求"要有包边"
   ★ 4.26（用户："去资金黄色气泡可以全包线吗不要只包单侧"）——
   原来选择器写的是 `.pp-gold`（特异性 0,1,0），而这条气泡是 `<li>`，
   `.confirm-list li`（特异性 0,1,1，1172 行）会**盖掉它的下边框**（变成 1px 浅灰虚线，
   看着就是"只包了上/左/右三边、下面漏了"），顺带把内边距压成 `5px 0`。
   改成 `li.pp-gold`：特异性与 `.confirm-list li` 相同、又排在后面 → 四条边 + 内边距全部生效。 */
li.pp-gold {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  background: #fff8e6;
  border: 1.5px solid #e8bd5c;
  border-radius: 10px;
  padding: 10px 14px; margin: 6px 0;
  color: #8a6400; font-size: 13px;
  box-shadow: 0 4px 14px rgba(232, 189, 92, .22);
}
/* ★ 4.82：下单页那条"预估期权费超最大购买力"的亮金气泡 —— 保留它的亮金，
   正好跟新的亮金主题是一套（这是用户点名说好看的那个金色）。 */
.pp-gold .btn { margin-left: auto; background: var(--gold-bright); border-color: var(--gold); color: var(--gold-ink); font-weight: 700; }
/* ★ 4.27：下单页"剩余可申请…｜已获批…（当日累计）｜数据时间…"这行小字比较长，窄栏里会折行。
   `.nb` 里的内容不许在中间断开（要不"已获批"会被拆成"已获/批"、日期被拆成两行）。 */
.nb, #pp-detail b { white-space: nowrap; }
/* 这行是纯文字说明：`.confirm-list li` 是 `display:flex`（一行排开、不换行），
   里面又有若干 `nowrap` 的小段 —— 挤在窄栏里就会**横向溢出**（实测 1920 屏 721px > 603px）。
   给它改回普通块级流，文字才会正常折行。 */
#pp-detail { display: block; }

/* 6 格验证码 */
.auth-code-line { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.code-boxes { display: flex; gap: 7px; flex: 1; min-width: 0; }
.code-box {
  width: 100%; max-width: 46px; aspect-ratio: 1 / 1; padding: 0; text-align: center;
  font-size: 20px; font-weight: 700; color: #fbf6ea;
  background: rgba(8, 17, 28, .62);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.code-box:focus {
  border-color: rgba(238, 199, 109, .62);
  box-shadow: 0 0 0 3px rgba(238, 199, 109, .12);
}

/* 暗底上的提示条（flash）也要换成深色版 */
body.auth-dark .flash { border: 1px solid transparent; font-size: 13px; }
body.auth-dark .flash.ok { background: rgba(60, 190, 110, .14); color: #8ee0ac;
  border-color: rgba(60, 190, 110, .3); }
body.auth-dark .flash.error { background: rgba(230, 90, 90, .14); color: #ff9d9d;
  border-color: rgba(230, 90, 90, .32); }
body.auth-dark .auth-page .flash { max-width: 428px; margin: 0 auto 14px; }

@media (max-width: 760px) {
  /* 手机上也要"一页放得下"：卡片内边距收一点，尽量不出现竖向滚动 */
  body.auth-dark main { padding: 12px 12px; }
  /* v3.88：手机上比原来宽松一点（也加宽、字号+0.5~1px），但不能撑出一屏 */
  /* v3.89：手机上留白也翻倍（22/18/16 → 44/36/32）；
     但手机屏就这么宽，卡片已经顶满，所以横向留白按"能接受"的 30px 收一点，
     保证输入框还有足够宽度（不然验证码那行会挤在一起） */
  .auth-card { padding: 44px 30px 32px; border-radius: 18px; }
  body.auth-dark main { padding: 6px 6px; }   /* 页面留白也让给卡片 */
  .auth-emblem { width: 46px; height: 46px; }
  /* v3.97：标题合并后手机端也要够大（12 个字 ×19px + logo 46 ≈ 286px，卡片内容宽约 306px，放得下） */
  /* v3.98：用户说手机端允许换行（免得挤成一条） */
  .auth-name { font-size: 19px; letter-spacing: .2px; white-space: normal; line-height: 1.32; }
  /* 手机上字号小一档，字距跟着缩小，仍然跟中文名等宽（比例一致） */
  .auth-en { font-size: 9px; letter-spacing: 1.15px; }
  .auth-lockup { gap: 10px; }
  .auth-lock { padding-left: 10px; }
  .auth-lock span { font-size: 20px; letter-spacing: .5px; }
  .af-label { flex-basis: 46px; font-size: 13px; }
  .af-captcha { width: 98px; height: 34px; }
  .auth-field { min-height: 50px; height: 50px; padding: 0 13px; margin-bottom: 11px; }
  .code-boxes { gap: 6px; }
  .code-box { max-width: 42px; font-size: 18px; }
  .auth-brand { margin-bottom: 18px; gap: 12px; }
  .auth-btn { padding: 12px 16px; font-size: 15.5px; }
  /* 手机上品牌那行整体缩一点，保证「大西部财富 | 询价下单系统」仍然一行放得下 */
  .auth-brand { gap: 11px; }
  .auth-emblem { width: 46px; height: 46px; }
  .auth-titles { gap: 7px; }
  .auth-birds { top: 3%; right: 3%; width: 44vw; opacity: .85; }
  /* ★ 手机上登录/验证码框也必须 ≥16px，否则 iOS 一聚焦还是会把整页放大
     （这条比上面 .auth-field input{15px} 更靠后，同优先级所以盖得住） */
  .auth-field input, .auth-field input[type=text], .auth-field input[type=password],
  .auth-field input[type=email] { font-size: 16px; }
}

/* ============================================================================
   ★ 4.30 手机沟通页"顶部信息条"压缩（用户："最顶部的消息栏小一点窄一点压缩到现在一半"、
   "搜聊天记录可以窄一点吗"、"全部 6 单的排版收紧一点，不然手机页面聊天看不了多少"、
   "和交易员的总对话这行字删去"、"删掉之前的两个气泡设置（撤回和引用）"）

   ⚠️ 这一段必须放在**文件最后**：前面 1357 行那条"手机触摸目标 ≥40px"的
   `.btn, button ... { min-height: 40px }`、以及 1534 行的 `.rail-searchbar input{padding}`，
   按"后来居上"的规则会把我前面写的尺寸又顶回去（实测：写成 padding 4px 也只有 40px 高）。
   ============================================================================ */
@media (max-width: 760px) {
  /* 顶栏那一行：里面的小按钮不再占 40px，跟着文字自然变矮（约 45px → 24px，差不多一半） */
  .rail-head { padding: 1px 10px; }
  .rail-head-title { font-size: 13px; line-height: 1.3; }
  .rail-head .rail-x, .rail-head .rail-wechat { min-height: 0; height: 20px; line-height: 18px; padding: 0 8px; font-size: 11px; }
  /* 搜聊天记录：矮一点（字号必须保持 16px，否则 iOS 一聚焦就把整页放大） */
  .rail-searchbar { padding: 4px 10px 0; }
  .rail-searchbar input { min-height: 0; height: 32px; padding: 2px 9px; }
  /* "全部 N 单"那行：一行小字，不要 40px */
  .rail-bubbles { padding: 4px 10px 0; }
  .rail-expand { margin: 2px 0 0; }
  .rail-more { min-height: 0; height: 20px; font-size: 11px; padding: 0 4px; }
  /* "和交易员的总对话"这行标题：手机上不显示 */
  .rail-title { display: none; }
  /* 手机上不再用"点一下气泡弹出引用/撤回两个小胶囊"，改成长按面板（引用/复制/撤回） */
  .msg-tool-quote, .msg-tool-recall { display: none !important; }
}

/* ============================================================================
   ★ 4.31 手机卡片版式（用户一次报的一串）：
   · "询价页面卡片头：询价时间和复制按钮一起换行放在第二行小字即可"
   · "所有卡片右上角像买入看跌一样写标签 买入看涨"
   · "我的订单买入看涨可以写在右边吗对齐标的即可节省一行"
   · "行权和咨询有的按钮没对齐可以窄一丁点"
   · "为什么未成交订单展开有两个外框"
   同样放在文件最后，避免被前面的移动端规则按回去。
   ============================================================================ */
/* ★ 4.33（用户："电脑侧不要改呀，时间和标的还是同一行，买入看涨的标签紧跟着询价规模吧；
   电脑侧标的明显一点，然后隔开询价规模不要混在一起"）——
   电脑：卡片头**一行**读完 —— 标的（加粗放大）+ 代码 ｜ 竖线 ｜ 询价规模 ｜ 方向标签 ｜ 其它标签 ｜ 询价时间。 */
.req-head .rh-line1 { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.req-head .rh-stock { font-size: 17px; font-weight: 800; color: #1f1f1f; letter-spacing: .2px; }
.req-head .rh-stock .mc-code { font-size: 13px; font-weight: 400; color: #6f6f6f; margin-left: 4px; letter-spacing: 0; }
.req-head .rh-sep { width: 1px; height: 15px; background: #e8d9b0; flex: 0 0 auto; }
.req-head .rh-size { font-size: 14px; color: #3a3a3a; }
.req-head .rh-size b { color: #1f1f1f; font-weight: 700; }
.req-head .rh-dir { position: static; }        /* 电脑上标签**紧跟询价规模**，不飘到最右 */
.req-head .rh-time { white-space: nowrap; }
.req-head-m { display: none; }                                    /* 手机上才出现的第二行 */

@media (max-width: 760px) {
  /* ① 询价卡片头：第一行只留"标的 + 规模"，第二行小字 = 询价时间 + 复制整张卡片 */
  .req-head { align-items: flex-start; margin-bottom: 2px; }
  .req-head > div { flex: 1 1 auto; min-width: 0; }
  .req-head .rh-line1 { position: relative; padding-right: 86px; }   /* 右上角给方向标签留位 */
  .req-head .rh-dir { position: absolute; right: 0; top: 0; }        /* 手机上标签在卡片右上角 */
  .req-head .rh-stock { font-size: 16px; }
  .req-head .rh-sep { display: none; }
  .req-head > .copy-icon { display: none; }
  .req-head-m {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin: 2px 0 8px;
  }
  .req-head-m .rh-time { font-size: 12px; color: #6f6f6f; }
  .req-head-m .copy-icon { width: 26px; height: 26px; }
  /* ② 每张卡片头：标的（左）+ 方向标签（右上） */
  .quote-mobile .mc-title,
  .orders-mobile .mc-title {
    display: flex; flex-direction: row; align-items: center; justify-content: space-between;
    gap: 8px; font-size: 16px;
  }
  .mc-title .mc-name { min-width: 0; }
  .mc-title .dir-badge { flex: 0 0 auto; }
  /* ★ 4.34（用户："手机侧我的订单卡片可以窄一点，两侧留白一点"）——
     卡片左右各让出 8px（整张比原来窄 16px），不再顶到屏幕边；只动"我的订单"这一页。 */
  .orders-mobile .mobile-card { margin: 10px 8px; }
  /* ③ "我的订单"里行权 / 咨询 两个按钮：等宽、居中、比默认窄一点 */
  .orders-mobile .mc-actions .btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 0; padding: 0 10px;
  }
  /* ④ 未成交订单一展开"两个外框"：里面那张表每行又画了一个框 —— 只留外面那个 */
  .failed-orders .orders-table tr {
    border: none; border-radius: 0; margin: 0; padding: 0; background: transparent;
  }
  .failed-orders .orders-table tr + tr { border-top: 1px dashed #e8d9b0; }
}

/* ★ 4.34（用户："手机测我的订单卡片可以窄一点，两侧留白一点"）——
   实测：订单卡左右各只有 8px 留白（贴到屏幕边），而"今日询价"里那些卡片是左右各 21px，
   所以看着更挤。这里给订单页的卡片和"未成交订单"盒子补 13px 外边距（8 + 13 = 21），
   跟询价页的留白对齐；到期那一栏（`.expire-box`）也是同一套。 */
@media (max-width: 760px) {
  .orders-mobile .mobile-card,
  .expire-box { margin-left: 13px; margin-right: 13px; }
  /* ★ 4.99b（用户："手机未成交订单不要小一圈"）——
     这里原来连 `.failed-orders` 也加了 13px，而它**里面的卡片自己又加了 13px** →
     未成交的卡片比上面的订单卡再窄 26px。现在只给卡片加，外层盒子不缩。 */
  .failed-orders { margin-left: 0; margin-right: 0; }
}
/* ★ 4.37 用户四条小修（电脑+手机）： */
/* ① 报价卡片头：手机上"询价时间"在第二行（配复制键）；**电脑上让它靠右、紧贴复制键左边** */
.req-head .rh-line1 { }
@media (min-width: 761px) {
  .req-head .rh-time { margin-left: auto; }
}
/* ② 买入看跌用**另一种颜色**的标签（买涨红、买跌绿），一眼分得清方向 */
.dir-badge.dir-buy-put { background: #fdf5e3; color: #8a6400; border-color: #e8cf92; }
/* ③ 报价表里"结构/期限"合并格**左对齐**（原来居中，跟右边的报价列不齐；只有一行、没勾选框时尤其明显） */
.request-table td.blk-merge, .request-table th:nth-child(2), .request-table th:nth-child(3) { text-align: left; }
/* ★ 4.39（用户："报价页栏目对齐（没有报价的，在下单键对应位置空着就行，其他列照样对齐）"）——
   原来报价列（费率 / 暂无报价 / 询价中）是**居中**的，跟"报价（%）"表头的左边缘对不齐；
   统一改成左对齐：有报价的行、没报价的行、空着的行，每一列的左边都是同一条竖线。 */
.request-table td.num { text-align: left; }
.request-table td.num > strong, .request-table td.num > .badge { display: inline-block; }
/* ★ 4.40（用户："各列对齐，内容有空格"）——"暂无报价"这种徽章自带 6px 左右内边距，
   所以它的**文字**比表头往右缩了 6px。把徽章整体左移 6px，文字就正好落在表头的同一条竖线上。 */
.request-table td.num > .badge { margin-left: -6px; }
.request-table td.num > strong { margin-left: 0; }
.request-table td .row-tags { text-align: left; justify-content: flex-start; }
/* 下单 + 更新时间 + 复制：这一格也不再居中（它空着时才跟别的列对得上） */
.request-table td .quote-act { justify-content: flex-start; }
/* ④ 顶栏压缩：手机 34px、电脑 40px（用户："有点占地方"） */
nav { }
@media (max-width: 760px) {
  /* ★ 4.38（用户："手机不要顶栏"）：手机顶栏整条撤掉 ——
     导航在底部 Tab、账号/退出/版本在 logo 菜单里；只把"系统通知铃铛"挪到右下角浮标旁。 */
  nav .nav-inner { display: none !important; }
  nav { display: none; }
  .nav-page { display: none !important; }
  .nav-inner { padding: 4px 8px !important; min-height: 0; }
  .nav-brand img { width: 22px; height: 22px; }
  .bell-btn { font-size: 15px; }
  .nav-account { font-size: 12px; }
}
@media (min-width: 1100px) {
  .nav-inner { padding-top: 6px !important; padding-bottom: 6px !important; }
  .nav-brand img { width: 26px; height: 26px; }
}
/* ★ 4.40（用户："手机端 logo 图巨大，出 bug 了"）——
   上一轮把 logo 从左上角挪进标题行后，`.m-corners .mc-brand img { width:24px }` 这条选择器
   就失效了（按钮已经不在 .m-corners 里）→ 图片按原图尺寸显示，所以巨大。
   这里把尺寸写成**不依赖父容器**的，挪到哪都还是 24px。 */
.mc-brand img { width: 24px; height: 24px; border-radius: 999px; display: block; }
/* ★ 4.40（用户："想象中是：公司 logo / 分页 title / 铃铛，一行"）——
   手机顶栏恢复成**一行**：logo + 页面标题（base.html 用 self.title() 输出）+ 铃铛；
   页面里那个 h1 的文字在手机上隐藏（保留它里面的按钮，比如"+ 新建询价"）。 */
@media (max-width: 760px) {
  nav { display: block; }
  nav .nav-inner { display: flex !important; padding: 5px 8px !important; gap: 8px; min-height: 0; }
  .nav-title { font-size: 15px; font-weight: 700; color: #ffffff; flex: 1 1 auto; min-width: 0;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  main h1 { font-size: 0; margin: 4px 0 8px; }
  main h1 .btn, main h1 a { font-size: 13px; }
  .m-corners { display: none !important; }   /* 两枚小圆按钮不再需要（logo/铃铛都回到那一行） */
  main { padding-top: 0; }
}
/* ★ 4.38：手机顶栏撤掉后，左上"账号/退出"、右上"通知"改成两枚小圆按钮（不占一条栏） */
/* ★ 4.39：铃铛下拉挪到 body 之后要贴右上角；手机端也一样看得到 */
.bell-drop-body { position: fixed; top: 42px; right: 8px; left: auto; z-index: 300; }
@media (max-width: 760px) {
  .bell-drop-body { width: min(92vw, 340px); }
}
/* ★ 4.40（用户："电脑侧的按钮大小为什么改动了，还原之前的版本"）——
   4.39 那套"按钮统一尺寸"**只在手机端生效**（手机上确实需要统一），电脑端恢复原来的尺寸
   （`.btn.small { padding: 6px 12px }` 等基础规则照旧，不再被覆盖）。 */
@media (max-width: 760px) {
  .btn.small, .tab, .mode-btn, .copy-icon, .order-go { min-height: 26px; padding-top: 0; padding-bottom: 0; }
  .btn.small { padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; }
  .tab { padding: 0 12px; display: inline-flex; align-items: center; }
  .row-actions .btn, .mc-actions .btn, .orders-mobile .mc-actions .btn {
    min-width: 76px; height: 24px; min-height: 24px; padding: 0 8px;
  }
  .order-go { min-width: 76px; height: 26px; }
}
/* ★ 4.40（用户："电脑侧顶栏左边左移，logo 左对齐新建询价页的卡片左侧"）——
   顶栏内容区改成**跟询价卡片同一条中线**（卡片 max-width 1180 居中）：
   量出来 logo 的左边缘就落在卡片左边缘上（1920 屏 ≈140px）。 */
@media (min-width: 761px) {
  /* ★ 4.41（用户："询价页画幅比 logo 左边宽 1cm"）——
     main 自己有 `padding: 0 12px`，所以卡片左边缘 = 140+12 = 152，而 logo 在 140 →
     视觉上差 1cm。这里给顶栏补同样的 12px 内边距，logo 正好落在卡片边框上。 */
  .nav-inner { max-width: 1180px; padding-left: 12px; padding-right: 12px; }
}
.m-corners { display: none; }
@media (max-width: 760px) {
  .m-corners {
    display: flex; align-items: center; justify-content: space-between;
    position: fixed; left: 0; right: 0; top: 0; z-index: 64; padding: 5px 8px;
    pointer-events: none;
  }
  .m-corners .mc-brand, .m-corners .mc-bell {
    pointer-events: auto; min-height: 0; border: 0; padding: 0;
    width: 30px; height: 30px; border-radius: 999px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(22, 50, 79, .06);
  }
  .m-corners .mc-brand img { width: 24px; height: 24px; border-radius: 999px; display: block; }
  .m-corners .mc-bell { font-size: 15px; background: rgba(22, 50, 79, .06); position: relative; }
  .m-corners .bell-count { position: absolute; top: -3px; right: -4px; }
  /* 内容给这两枚小按钮留出一点顶部空白 */
  main { padding-top: 34px; }
}
/* ★ 4.39（用户："这个消息和返回键占一小栏目的设计我不满意"）——
   手机上沟通栏头部再瘦：只留"交易员协助" + 一枚小圆 ◀（不写字），高度 23px 不变但视觉更轻。 */
@media (max-width: 760px) {
  .chat-rail .rail-x {
    width: 26px; height: 26px; min-height: 0; padding: 0; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; color: #1f1f1f;
  }
  .chat-rail .rail-head-title { font-size: 13.5px; }
  /* 手机端：logo 挪进标题那一行，紧跟标题右边（原来是左上角一枚固定小圆） */
  .m-corners .mc-brand.in-h1 {
    width: 26px; height: 26px; margin-left: 8px; background: transparent;
  }
  .m-corners .mc-brand.in-h1 img { width: 24px; height: 24px; }
}
/* ★ 4.39（用户："画幅变窄左侧多一点留白"）：报价页给它一个更窄的画幅（居中→两侧留白更多） */
/* ★ 4.41（用户："询价页面卡片与新建报价页面画幅一样、左侧留白一样；现在太窄了"）——
   报价页画幅 = **跟新建询价页同一把尺子**（1180 居中），左右留白自然就一样了；
   4.40 那次额外加的"整块往右挪"撤掉（那是让它变窄的原因）。 */
main.quotes-main { max-width: 1180px; }
body.rail-open main.quotes-main { max-width: 1180px; margin: 20px auto; }
/* ★ 4.87（用户："整个画面要不要改为和报价页一样宽度试试"）——
   **试过了，不行**：订单表有 12 列，沟通栏开着时内容区只有约 940px（1440 - 460），
   1180 的画幅装不下 → 状态列跟时间列叠在一起、备注列被挤出屏幕。所以宽度**保持原来的宽画幅**，
   只把最后两列（操作 / 备注）收窄，右边缘就不会再空一大片。
   ⚠️ 教训：报价页只有 10 列才能用 1180；订单页列多，别硬套同一把尺子。 */
/* ★ 4.87：试过 colgroup + `table-layout: fixed`，**不行** ——
   沟通栏开着时内容区只有 ~940px（1440 屏），12 列写死宽度会把"操作/备注"顶出屏幕
   （状态列还会跟时间列叠在一起）。退回**自动布局**，只把最后两列收窄：
   "操作"放得下两个按钮、"备注"放得下一个按钮，右边就不再空一大片。
   两张表的表头/内容一致，自动布局算出来的列宽也基本一致（够对齐）。 */
/* ★ 4.89（用户："我的订单缩短列宽、不要换行、行权咨询同一行"）——
   给每列一个更紧的**首选宽度**（自动布局仍可在窄屏收缩），并且**一律不换行**；
   "操作"列加宽到 152px → 行权 + 咨询 两个按钮并排一行（原来 104px 装不下，会折成两行）。 */
.orders-table { width: 100%; }
/* ★ 4.90（用户："行宽列宽都可以再紧凑一点，这个页面两侧留白多一点"）——
   每列再收 4~8px、单元格内边距从 10/12 收到 8/9；整页给一个更窄的画幅，两侧就留出白。 */
.orders-table th, .orders-table td { white-space: nowrap; padding: 8px 9px; }
/* ★ 4.101：删掉这批写死的 px 列宽（124/76/70/…/84）——
   现在**列宽唯一来源 = 上面 4.99c 的百分比**（两张表按同一比例分列，永远对齐）。 */
/* 画幅收窄 → 两侧留白（沟通栏开着时自动以可用宽度为准，不会挤坏列） */
main.orders-main, body.rail-open main.orders-main { max-width: 1320px; margin: 20px auto; }

/* ★ 4.90（用户："平仓开仓恢复原来的三角小折叠键呀，小一点、不要单独占一行"）——
   回到最初那种**小三角 + 灰色小字**（`.terms-fold` 的样式），不要胶囊、不要底色，
   行高压到最小，看起来就是订单之间的一条细线。 */
.orders-table tr.record-row, .orders-table tr.sell-record-row,
.orders-table tr.record-row > td, .orders-table tr.sell-record-row > td { background: transparent; }
.orders-table tr.record-row > td, .orders-table tr.sell-record-row > td { padding: 1px 0 5px 6px; }
.orders-table tr.record-row .terms, .orders-table tr.sell-record-row .terms { display: inline; }
.orders-table tr.record-row summary, .orders-table tr.sell-record-row summary {
  display: inline-block; padding: 0; border: 0; background: none;
  font-size: 12px; color: #8a8378; line-height: 1.4; list-style: none; cursor: pointer;
}
/* ★ 4.92（用户："开仓记录的小三角 icon 不见了"）——
   4.90 把 summary 改成 `display:inline`，把浏览器原生的 ▸ 标记弄没了。
   现在自己画一个：`::before` 出三角，展开时转成 ▾。 */
.orders-table tr.record-row summary::-webkit-details-marker,
.orders-table tr.sell-record-row summary::-webkit-details-marker { display: none; }
.orders-table tr.record-row summary::before,
.orders-table tr.sell-record-row summary::before {
  content: '▸'; font-size: 10px; color: #b9ac96; margin-right: 3px;
}
.orders-table tr.record-row[open] summary::before,
.orders-table tr.sell-record-row[open] summary::before { content: '▾'; }
.orders-table tr.record-row summary:hover, .orders-table tr.sell-record-row summary:hover { color: #1f1f1f; }
/* ★ 4.92（用户："展开后气泡底色只需要覆盖文字"）：展开的记录用行内块，底色跟着文字走 */
.orders-table tr.record-row .message-pre, .orders-table tr.sell-record-row .message-pre {
  display: inline-block; max-width: 100%; margin: 6px 0 10px;
}
/* ★ 4.93（用户："电脑点平仓记录时左边会有一条竖线描边表格，其他就不会"）——
   那是"平仓单整行"留下的 3px 金色左边线（老设计：卖单整行染色）。现在平仓已经有徽章标记，
   这条线在展开记录时会变成贴着内容的一条竖线很难看 → **去掉**。 */
.orders-table tr.sell-row td:first-child { border-left: 0; }
/* ★ 4.93（用户："三角形 icon 大一点"）：10px → 13px */
.orders-table tr.record-row summary::before,
.orders-table tr.sell-record-row summary::before { font-size: 13px; }

/* ★ 4.94（用户："报价还有一家的三角形 icon 也 13px"）—— "▸ 还有 N 家"那个小三角 */
.extra-btn .tri { font-size: 13px; line-height: 1; }
/* ★ 4.94（用户："下单按钮和行权按钮大小格式一样，和已接单一个字号"）——
   报价页"下单"和订单页"行权/咨询"统一成同一规格：高 26px、12px 字（跟已接单徽章同字号）。 */
/* （"已接单"徽章在订单页实测是 14px —— 见 `.orders-table .badge{font-size:14px}`，所以按钮也 14px；
   具体尺寸统一写在下面 `.orders-table .row-actions .btn` 那条里，避免两处打架） */
a.order-go {
  height: 28px; min-width: 64px; padding: 0 12px; border-radius: 6px;
  font-size: 14px; font-weight: 600; line-height: 26px; text-align: center;
  display: inline-flex; align-items: center; justify-content: center;
}
/* ★ 4.94/4.98（用户："每行字对齐，所以应该全部列都要居中在行中间？"）——
   对，**所有列都垂直居中**最整齐（有的格子两行、有的一行，靠 top 对齐就会一高一低）。
   同时把行高压矮一点：单元格上下内边距 10px → 6px。 */
.orders-table td, .orders-table th { vertical-align: middle; }
.orders-table td { padding-top: 6px; padding-bottom: 6px; }
.orders-table td:nth-child(11) .row-actions { flex-wrap: nowrap; }

/* ============================================================================
   ★ 4.95 三件事：行权/下单/咨询统一规格、最佳报价改浅金、报价数字靠右标签在左
   ============================================================================ */
/* ① 用户："行权/下单/咨询样式大小一样（颜色不变），你设计一下怎样统一好看"
   → 形状与尺寸**完全一致**（高 28px / 圆角 6px / 14px 字 / 内边距一致 / 1px 边），
     只有"主次"不同：下单·行权 = 深色实心（主操作）；咨询 = 白底细边（次操作）。
     这样一排按钮像一个体系，也不会没人看见主按钮。 */
a.order-go, .orders-table .row-actions .btn, .close-go, .quote-mobile .mc-actions .order-go {
  height: 28px; min-width: 64px; padding: 0 12px; border-radius: 6px;
  font-size: 14px; font-weight: 600; line-height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
}
.orders-table .row-actions .btn { border-width: 1px; }
.orders-table .row-actions .btn.primary { border-color: #1f1f1f; }

/* ② 用户："最佳报价改为浅金色"（只作用于报价页的小标签，别动订单页的"交易成功"）
   ★ 4.97（用户："电脑**只需要改最佳报价标签的底色**呀"）——
   这一条**只改底色**，文字颜色/字重/内边距全部沿用原样（4.95 顺手改过文字色，已撤掉）。 */
.row-tags .badge.ok, .request-table .badge.ok, .quote-mobile .badge.ok {
  background: #fdf3d9;
}
/* ★ 4.96/4.98（用户："手机最佳报价**字体亮金色加粗**"）——
   电脑端只改底色（浅金），手机端这一枚 = **亮金底 + 深金字 + 加粗**。 */
.quote-mobile .badge.ok, .mobile-card .badge.ok {
  background: #ffc53d !important; color: #7a4e00 !important; font-weight: 700 !important;
}
/* ★ 4.92（用户："行权/咨询键大小一样、高度小一点"） */
.orders-table .row-actions .btn {
  /* ★ 4.94（用户："下单按钮和行权按钮大小格式一样，和已接单一个字号"）——
     行权 / 咨询跟报价页的"下单"同一规格：高 28px、14px 字（= 已接单徽章的字号） */
  min-width: 64px; height: 28px; padding: 0 12px; border-radius: 6px;
  font-size: 14px; font-weight: 600; line-height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
}
/* ============================================================================
   ★ 4.97（用户："手机没实现行权 / 下单 / 咨询 统一规格"）——
   电脑端 4.95 已经统一了，但**手机端有三条更靠后的旧规则**把它顶掉了：
     · `.quote-mobile .mc-actions .order-go { height:auto; padding:4px 12px; font-size:13px }`（≈1670 行）
     · `.quote-mobile .mc-actions .order-go { padding:6px 16px; font-size:14px }`（≈480 行）
     · `.row-actions .btn, .mc-actions .btn, .orders-mobile .mc-actions .btn { height:24px; min-width:76px }`（≈2160 行）
   所以在文件最后（媒体查询里）再压一次：手机端三个按钮也用**同一套 28px / 14px / 圆角6**，
   只有主次色不同（下单·行权 = 深色实心；咨询 = 白底细边）。
   ============================================================================ */
@media (max-width: 760px) {
  .quote-mobile .mc-actions a.order-go,
  .orders-mobile .mc-actions .btn,
  .mc-actions .row-actions .btn,
  .mc-actions .btn {
    height: 28px; min-height: 28px; min-width: 68px; padding: 0 12px;
    border-radius: 6px; font-size: 14px; font-weight: 600; line-height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* ★ 4.98：手机端"未成交订单"改用卡片（跟上面订单卡一样），表格藏起来 */
  .failed-body > .orders-table { display: none; }
  /* ★ 4.102（用户："手机端的未成交订单需要刚刚的底色呀"）——
     手机上这一块没有表头（是卡片），所以要靠**底色**区分 → 浅金底回来。 */
  .failed-orders .failed-body { background: #fbf6ea; }
  /* ★ 4.102：手机上"未成交订单"的咨询按钮也跟订单卡里的一样 */
  .failed-body .mobile-card .btn {
    height: 28px; min-height: 28px; min-width: 68px; padding: 0 12px;
    border-radius: 6px; font-size: 14px; font-weight: 600; line-height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
  }
}
/* ★ 4.42（用户："为什么最前面多了一列变化的标签字，删掉啊"）——
   上一轮我把"页面标题"加进了顶栏（那是**手机**要的），电脑端没关掉 → 顶栏最左边多出一个
   会随页面变的标题（"今日询价"）。这里默认隐藏，只在手机那一行显示。 */
.nav-title { display: none; }
/* ★ 4.42（用户："询价页画幅宽一点，现在有几列重叠了"）——
   `table-layout:fixed` 之后，列宽是死的，"T+1起可行权（9月30日）"这种长内容又带 nowrap，
   就会溢出到隔壁列（看着像重叠）。两处修：① 画幅放宽 ② 长内容允许换行、不再叠。
   ③ 最早行权日列 +32px（它是最挤的那列）。 */
main.quotes-main, body.rail-open main.quotes-main { max-width: 1500px; }
/* ★ 4.42b（用户："迈信林 那几张卡片格式不对，很短；华测检测是对的"）——
   上一版我把**所有**单元格都放开换行，于是"2026/10/28""100万"被折成两行（日期和金额断开了），
   整张卡片看着又挤又短。正确做法：**只有两列长文案允许换行**，其余短列一律不折行。 */
.request-table th:nth-child(6), .request-table td:nth-child(6) { width: 176px; }  /* 最早行权日 */
.request-table th:nth-child(8), .request-table td:nth-child(8) { width: 104px; }   /* 参考到期日 */
.request-table th:nth-child(9), .request-table td:nth-child(9) { width: 72px; }   /* 参考额度 */
.request-table td:nth-child(2), .request-table td:nth-child(3), .request-table td:nth-child(4),
.request-table td:nth-child(8), .request-table td:nth-child(9),
.request-table td.nowrap { white-space: nowrap; }
.request-table td:nth-child(5), .request-table td:nth-child(6),
.request-table td:nth-child(7) { white-space: normal; overflow-wrap: anywhere; }
/* ★ 4.45（用户："回到上一个版本"）：4.44 那套编辑级排版（字号阶梯/22px 章节间距/悬停抬起/overflow 硬规则）整块撤掉。 */

/* ★ 4.45（用户："下单右侧的时间只显示了日期没有时刻，要显示全"）——
   动作列只有 78px，装不下 '26-09-28 14:57'；这条时间**不折行、允许溢出到卡片右边**，
   并把它对齐到卡片右侧外沿，日期和时刻都能看全。 */
.request-table td .quote-at { white-space: nowrap; }
.request-table td:last-child { overflow: visible; }
.request-table .quote-act, .request-table .quote-act-right { overflow: visible; }
.request-table td .quote-act-right { align-items: flex-end; }

/* ★ 4.45b（用户："时间你甚至可以整个都写到同行卡片右边阴影地方"）——
   更新时间不再挤在 78px 的按钮格里：它**不折行**、允许溢出到表格右侧（卡片右边的留白/阴影区），
   所以 '26-09-28 14:57' 的日期和时刻都能看全。 */
.request-table td .quote-at { white-space: nowrap; overflow: visible; }
.request-table .quote-act-right { min-width: 0; align-items: flex-end; }

/* ★ 4.47（用户截图反馈三条） */
/* ① 每行更新时间：挪到「下单」按钮**下方**并右对齐（原来溢出到按钮上，被压住了） */
.request-table .quote-act { flex-direction: column; align-items: flex-start; gap: 6px; }
.request-table .quote-act-right { align-items: flex-end; }
.request-table td .quote-at { display: block; }
/* ② 卡片头的询价时间：靠右贴着总复制按钮（电脑端） */
@media (min-width: 761px) {
  .req-head > div { flex: 1 1 auto; min-width: 0; }
  .req-head .rh-time { margin-left: auto; white-space: nowrap; }
}
/* ③ 顶栏左边跟内容左边缘对齐（整块左移）：顶栏用跟 main 同一条中线 */
.nav-inner { max-width: 1780px; padding: 12px; margin: 0 auto; }
main.quotes-main, body.rail-open main.quotes-main { max-width: none; margin: 20px 8px; }

/* ★ 4.48（用户："不行啊太左了，恢复刚才那版"）——
   4.47 把顶栏和报价页画幅都放得太靠左了，这里**恢复 4.46 的版式**：
   顶栏回到 1180 居中 + 12px 内边距；报价页回到 1500 画幅。 */
.nav-inner { max-width: 1180px; padding: 12px; margin: 0 auto; }
main.quotes-main, body.rail-open main.quotes-main { max-width: 1500px; margin: 20px auto; }

/* ★ 4.49（用户："26-09-29 17:27 能不能显示在下单按钮右侧同一行"）——
   动作列改回**一行**：[下单] [更新时间 / 复制] —— 时间在按钮右侧、同一水平线；
   列宽也从 110 提到 150，保证按钮 + 完整时间（含时刻）一行放得下。 */
.request-table .quote-act { flex-direction: row; align-items: center; gap: 8px; }
.request-table .quote-act-right { align-items: flex-start; }
.request-table td .quote-at { white-space: nowrap; }

/* 4.50：让每行更新时间跟【下单】按钮同一水平线（量出来原来高 7px）——
   动作块顶对齐 + 时间给 28px 行高（= 按钮高度）；复制图标仍在时间下面。 */
.request-table .quote-act { align-items: flex-start; }
.request-table td .quote-at { line-height: 28px; }

/* 4.51：手机端版式回到 v4.38（用户：只改手机端，回到 v4.38 的排版）——
   v4.38 的手机样子 = 没有顶栏；左上角一枚小圆 logo（点开账号/退出/版本）、
   右上角一枚铃铛；页面标题照常显示在内容里；导航全在底部 5 Tab。 */
@media (max-width: 760px) {
  nav:not(.tabbar) { display: none !important; }   /* 只关顶部那条，别把底栏 Tab 也关掉 */
  .nav-title { display: none !important; }
  main h1 { font-size: 20px; margin: 0 0 8px; }
  .m-corners { display: flex !important; }
  main { padding-top: 34px; }
}

/* 4.52（用户手机端四条 + 电脑一条）*/
@media (max-width: 760px) {
  /* 黄 logo 最左、铃铛最右（都悬浮） */
  .m-corners { justify-content: space-between; padding: 5px 10px; }
  /* 标题从第一行开始：删掉头顶那条空白，左侧给黄 logo + 空格留位 */
  main { padding-top: 0; }
  main h1 { padding-left: 38px; margin-top: 2px; }
  /* 今日询价 / 历史询价 / 新建询价 三个按钮一样大 */
  .tab, main h1 .btn { height: 30px; min-height: 30px; padding: 0 14px; font-size: 13px;
                       display: inline-flex; align-items: center; justify-content: center; }
  /* 下单按钮：短一点、字样居中 */
  .quote-mobile .mc-actions .order-go, .order-go { min-width: 0; padding: 0 14px; height: 28px;
                                                   justify-content: center; }
}
/* 电脑端：铃铛下拉不再贴到聊天栏上（还原成挂在铃铛下方、靠左展开） */
@media (min-width: 761px) {
  .bell-drop { right: auto; left: auto; }
  .bell-wrap .bell-drop { position: absolute; right: 0; top: 34px; }
}

/* 4.53（用户两条）*/
/* ① 电脑端：铃铛消息**向右**展开（锚在铃铛左边，向右铺），并限宽以免碰到右侧聊天栏 */
@media (min-width: 761px) {
  .bell-wrap .bell-drop { left: 0; right: auto; top: 34px; max-width: 300px; }
}
/* ② 手机端：把标题上面那条空行彻底去掉（标题文字顶到最上面，跟左上黄 logo 同一水平带） */
@media (max-width: 760px) {
  main { padding-top: 0 !important; margin-top: 0 !important; }
  main h1 { margin: 0 0 6px !important; padding: 4px 0 0 38px; line-height: 1.15; min-height: 0; }
  main h1 .h1-ico { width: 20px; height: 20px; }
}

/* 4.55（用户四条）*/
@media (max-width: 760px) {
  /* 每个页面的标题行都跟报价页一样：上面留一点空隙，下面收紧一点（标签行顺势上移） */
  main h1 { padding: 8px 0 4px 38px !important; margin: 0 0 2px !important; line-height: 1.15; }
  .tabs { margin-top: -2px; }
}

/* 4.56（用户：报价页那行标题因为带"+ 新建询价"按钮所以高一点、很好看，其他页也做成这个高度）——
   手机端所有页面的标题行统一 50px 高（跟报价页一致），标题文字默认垂直居中；
   这样页面与页面之间切换时，标题带的高度不再一高一矮。 */
@media (max-width: 760px) {
  main h1 { min-height: 50px; display: flex; align-items: center; }
}
/* ★ 4.57（用户："资金页的资金标题后面加 LXX（客户账号），手机和电脑"）——
   标题右边那个客户编号：比标题小一号、灰色、和标题基线对齐（不要喧宾夺主）。 */
.h1-sub {
  margin-left: 8px; font-size: 14px; font-weight: 600; color: #9a958c;
  letter-spacing: .3px;
}
@media (max-width: 760px) { .h1-sub { font-size: 13px; } }

/* 4.58（用户：手机端交易员协助页右侧按钮要明显一点的返回键 + "返回"两个字）——
   原来是个 26px 的小圆只画一个 ◀，太小太淡；现在改成带边框的胶囊按钮：◀ 返回。 */
@media (max-width: 760px) {
  .chat-rail .rail-x {
    width: auto; height: 26px; min-height: 26px; padding: 0 9px; border-radius: 8px;
    font-size: 12.5px; font-weight: 500; color: #1f1f1f; background: #ffffff;
    border: 1px solid #e8d9b0; gap: 2px;
  }
  .chat-rail .rail-x:active { background: #fbf6ea; }
}

/* 4.60（用户："平仓下单页怎么变成这样了，之前没有这么多彩色格子"）——
   平仓页那张信息卡原来是**四色格子**（蓝/紫/绿/橙轮着来，4n+1..4n+4），太花；
   现在统一成浅灰底 + 细边框，信息还是那 8 项，但整体安静了。 */

/* 4.64（用户："删去浮层设计"）：4.62/4.63 那套浮层（iframe + 遮罩 + 关闭按钮）整块撤掉，
   行权/平仓恢复成整页跳转，入金/申请授信回到资金页。 */

/* 4.65：平仓页信息卡恢复成 8 格 + 四色（v3.37~4.59 的样子），且只出现一次。 */

/* 4.66 手机端：标题往上一点，跟第一张卡片的距离收紧并统一（每页一样） */
@media (max-width: 760px) {
  main h1 { min-height: 46px !important; padding: 4px 0 2px 38px !important; margin: 0 !important; }
  main .card, main form.card { margin-top: 6px !important; }
}
/* ============================================================================
   ★ 4.67 资金页美工（用户：产品经理说资金账户像灰色小字、不像资产号；参考亚丁的"资金编号 + 钱包"）
   1) 资金编号 = 钱包样式的胶囊（图标 + 资金编号 + 号码 + "本账户"小标）
   2) 入金 = 默认折叠的一条，点开才是完整"入金指引"（币种 + 4 条规则 + 美元提醒）
   ============================================================================ */
.acct-chip {
  display: inline-flex; align-items: center; gap: 8px;
  /* ★ 4.69（用户："资金账户号看看要不要靠右对齐卡片右边，放到资金标题同一行"）——
     胶囊现在长在 h1 里：`margin-left:auto` 把它顶到标题行最右边；
     margin-top/bottom 归零，免得把标题行撑高（手机端标题行固定 46px）。 */
  margin: 0 0 0 auto; padding: 7px 14px 7px 12px;
  background: linear-gradient(135deg, #1f1f1f, #1f1f1f);
  color: #ffffff; border-radius: 999px; box-shadow: 0 6px 16px rgba(22, 50, 79, .18);
}
.acct-chip svg { width: 19px; height: 19px; color: #f0c464; flex: 0 0 auto; }
.acct-chip .ac-k { font-size: 12.5px; color: #d8b45c; }
.acct-chip .ac-no { font-size: 16px; font-weight: 800; letter-spacing: 1.2px; }
.acct-chip .ac-tag {
  font-size: 11px; padding: 1px 8px; border-radius: 999px;
  background: rgba(240, 196, 100, .18); color: #f0c464; border: 1px solid rgba(240, 196, 100, .38);
}
/* ★ 4.70：`<details class="deposit-box">`那套（标题下面那条折叠入金）已经删了 ——
   入金改成右栏的一行 .side-opt + 弹窗 .modal-card（见文件后面 4.70 那一段）。
   这里只留下弹窗内容要用的 .dp-* 排版规则。 */
.dp-cur { border: 1px solid #fbf6ea; border-radius: 10px; padding: 10px 12px; background: #fbf6ea; }
.dp-cur > b { font-size: 15px; color: #1f1f1f; }
.dp-cur > .hint { display: block; margin-top: 2px; }
.dp-cur ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dp-cur li {
  flex: 1 1 200px; display: flex; align-items: center; gap: 9px;
  border: 1px solid #fbf6ea; border-radius: 10px; padding: 10px 12px;
  background: #ffffff; font-size: 14.5px; color: #1f1f1f; font-weight: 600;
}
.dp-flag { width: 26px; height: 18px; border-radius: 3px; flex: 0 0 auto; display: inline-block; }
.dp-flag.hk { background: linear-gradient(180deg, #de2910 0 100%); position: relative; }
.dp-flag.hk::after { content: ''; position: absolute; inset: 5px 9px; background: #ffffff; border-radius: 50% 50% 50% 50%; }
.dp-flag.us { background: repeating-linear-gradient(180deg, #b22234 0 2px, #ffffff 2px 4px); }
.dp-flag.cn { background: #de2910; position: relative; }
.dp-flag.cn::after { content: ''; position: absolute; left: 4px; top: 4px; width: 6px; height: 6px; background: #ffde00; border-radius: 50%; }
.dp-list { margin: 12px 0 0; padding-left: 20px; color: #3a3a3a; font-size: 14px; line-height: 1.75; }
.dp-list b { color: #1f1f1f; }
.dp-note {
  margin: 10px 0 0; padding: 9px 12px; border-radius: 8px;
  background: #fff8ef; border: 1px solid #f0dfc4; color: #8a6400; font-size: 13px; line-height: 1.7;
}
@media (max-width: 760px) {
  .acct-chip { padding: 7px 12px; gap: 7px; }
  .acct-chip .ac-no { font-size: 15px; }
  /* ★ 4.72（用户："手机端资金账户号另起一行放在资金题目下面"）——
     h1 本身是 flex + wrap：给胶囊 `flex-basis:100%` 就把它挤到第二行，
     再取消 `margin-left:auto`（不然它会顶在最右边），让它跟标题左对齐。 */
  main h1 .acct-chip { flex: 0 0 100%; margin: 6px 0 0; }
  .dp-cur li { flex: 1 1 100%; }
}

/* 4.67：资金页的客户编号已改成 .acct-chip 钱包胶囊，旧的 .h1-sub 不再使用。 */
/* ★ 4.70 "我的钱包"四张卡（港币 / 美元 / 人民币 / 合计 · 折人民币）
   用户："直接排列四个卡片钱包一样的、还有对应币种/国旗暗纹的漂亮钱包"。
   一张卡 = 小国旗 + 币种 + 占比 / 大字原币可用 / 小字汇率与折人民币 / 占比条
            + 右下一枚低透明度的**国旗暗纹**（钞票水印那种感觉）。
   位置：客户资金页在"资金"标题正下方整页宽；交易员客户详情页在"资金状况"卡里。 */
.wallet-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 12px 0 2px; }
.wallet-card {
  position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid #e8d9b0; border-radius: 14px; padding: 12px 14px 13px;
  background: linear-gradient(160deg, #ffffff 0%, #fbf6ea 55%, #fbf6ea 100%);
  box-shadow: 0 2px 8px rgba(22, 50, 79, .05);
  --wc-accent: #a5760a;
}
/* 卡片顶上一条"币种色"的细线：四张排一排时一眼分得清 */
.wallet-card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 1;
  background: linear-gradient(90deg, var(--wc-accent), rgba(255, 255, 255, 0));
}
.wallet-card .wc-wm {
  position: absolute; right: -10px; bottom: -12px; width: 104px; height: 70px;
  opacity: .13; transform: rotate(-8deg); z-index: 0; pointer-events: none;
  border-radius: 6px; overflow: hidden;
}
.wallet-card .wc-wm svg { width: 100%; height: 100%; display: block; }
.wallet-card > *:not(.wc-wm) { position: relative; z-index: 1; }
.wallet-card.zero { background: linear-gradient(160deg, #ffffff, #fbf6ea); border-style: dashed; }
.wallet-card.zero .wc-amt { color: #c6c0b4; }
.wallet-card.zero .wc-wm { opacity: .07; }
/* 合计那张：同一个骨架，换成金色，暗纹换成钱包图标 */
.wallet-card.total {
  --wc-accent: #e6a817;
  background: linear-gradient(160deg, #fffdf6 0%, #fdf6e6 55%, #f8edd4 100%);
  border-color: #efe0bd;
}
.wallet-card.total .wc-wm { opacity: .16; color: #c9920f; }
.wc-head { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #6f6f6f; }
.wc-flag { width: 20px; height: 13.4px; border-radius: 3px; overflow: hidden; flex: 0 0 auto;
           box-shadow: 0 0 0 1px rgba(22, 50, 79, .12); }
.wc-flag svg { width: 100%; height: 100%; display: block; }
.wc-cur { font-weight: 700; color: #1f1f1f; display: inline-flex; align-items: baseline; gap: 5px; }
.wc-cur i { font-style: normal; font-weight: 500; font-size: 11px; color: #9a958c; letter-spacing: .4px; }
.wc-pct { margin-left: auto; color: #9a958c; font-variant-numeric: tabular-nums; }
.wc-amt { margin-top: 7px; font-size: 21px; font-weight: 800; color: #1f1f1f; letter-spacing: .2px;
          font-variant-numeric: tabular-nums; white-space: nowrap; }
.wallet-card.total .wc-amt { color: #a5760a; }
.wc-sub { margin-top: 3px; font-size: 11.5px; color: #9a958c; display: flex; flex-wrap: wrap; gap: 2px 8px; }
.wc-sub .wc-cny { color: #9a958c; }
.wc-bar { margin-top: 9px; height: 4px; border-radius: 999px; background: #fbf6ea; overflow: hidden; }
.wc-bar i { display: block; height: 100%; border-radius: 999px; background: var(--wc-accent); }
.wallet-card.total .wc-bar i { background: linear-gradient(90deg, #e6a817, #f3d68a); }
.wallet-hint { margin: 6px 0 0; }
/* ★ 4.74：手机端钱包底部的**拉链**（桌面端不显示 —— 桌面四张卡一直是摊开的）
   一条齿状线 + 一个小拉头 + "详情"两个字。点一下拉链才把三张币种卡摊开；
   摊开时拉头滑到另一头、齿线变成"拉开"的样子。 */
.case-zip {
  display: none; width: max-content; margin: 9px auto 0; padding: 3px 0 0;
  background: none; border: 0; font: inherit; cursor: pointer;
  align-items: center; justify-content: center; gap: 8px;
}
.case-zip .zip-band { position: relative; flex: 0 0 auto; width: 46px; height: 13px; display: block; }
.case-zip .zip-teeth {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px;
  border-radius: 1px;
  background: repeating-linear-gradient(90deg,
              rgba(240, 196, 100, .90) 0 3px, rgba(240, 196, 100, .20) 3px 6px);
  transition: background .18s;
}
.case-zip .zip-pull {
  position: absolute; top: 50%; left: 0; width: 10px; height: 13px; margin-top: -6.5px;
  border-radius: 3px; background: linear-gradient(180deg, #ffe7ad, #e2a336);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .55);
  transition: left .22s ease;
}
.case-zip .zip-pull::after {
  content: ''; position: absolute; left: 3.5px; top: 3px; width: 3px; height: 3px;
  border-radius: 50%; background: rgba(70, 45, 0, .55);
}
.case-zip .wt-label {
  flex: 0 0 auto; font-size: 11px; font-weight: 600; letter-spacing: 2px;
  /* ★ 4.95（用户："手机详情和拉链同色"）：整条拉链 + "详情"都用**亮金** */
  color: #f0c464; text-shadow: 0 1px 0 rgba(0, 0, 0, .45);
}
.case-zip[aria-expanded="true"] .zip-pull { left: calc(100% - 10px); }
.case-zip[aria-expanded="true"] .zip-teeth {
  background: repeating-linear-gradient(90deg,
              rgba(240, 196, 100, .45) 0 3px, rgba(240, 196, 100, .10) 3px 6px);
}
/* "只在手机显示 / 只在电脑显示"两个小工具类（同一个文案的两套排法用） */
.only-m { display: none !important; }
/* ★ 4.74：牛皮钱包外壳（只有手机端画壳；电脑端就是个普通容器，四张卡照样一排） */
.wallet-case { display: block; }
.case-head { display: none; }
.case-body { display: block; }
@media (max-width: 1100px) { .wallet-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  /* ==========================================================================
     ★ 4.75 手机端"我的钱包" = 老钱风牛皮钱包（old money）
     用户："如果统一成一个牛皮/金色卡包就紧凑简洁一点，不用白色卡片底色了吧，
     或者协调一下色调；蓝色很丑；拉链紧凑一点；风格大气一点、有设计感、老钱风。"
     做法：
       ① 外壳 = 深栗色小牛皮（不是浅棕），一圈**烫金缝线**，顶部一道柔和高光；
       ② 账户号 = 压在皮面上的**烫金名牌**（衬线体 + 宽字距）；
       ③ 卡片 = **象牙色卡纸**（不是白）+ 烫金细边；主卡（现金余额）是**烫金卡面**；
       ④ 币种色全部换成暖色系：铜 / 橄榄 / 酒红（蓝一律不用）；
       ⑤ 数字与标题用衬线体（Georgia / 宋体）—— 私人银行那种味道；
       ⑥ 拉链缩到 58px 宽、居中，只有两个字"详情"。
     ========================================================================== */
  .wallet-case {
    /* ★ 4.82（用户："皮夹子的黑可以，金色要亮一点"）——
       皮还是黑的，金换成**亮金**（Radix amber）：深金 → 主金 → 亮金三级。 */
    --leather-d: #131313; --leather-m: #262626; --leather-l: #333333;
    --gold: #e2a336; --gold-l: #ffc53d; --ivory: #fff8e6; --ivory-2: #f3d673;
    --ink: #fff8e6; --ink-2: #f3d673;
    position: relative; margin: 10px 0 4px; padding: 11px 11px 7px; border-radius: 16px;
    /* ★ 4.109（用户 iPhone 截图：黑金卡上多出一块浅灰方块，华为上正常）——
       `background-color` 是**最后兜底的一层**：即使上面两层渐变在某个机型上没画出来，
       这块牌子也一定是**不透明的深色**，绝不会露出后面的白底（那个"白块"就是这么来的）。
       同时把 `repeating-linear-gradient` 的皮纹去掉 —— iOS 上这种小周期的重复渐变
       跟 border-radius/isolation 一起时容易整块渲染失败，换成一整块线性渐变最稳。 */
    background-color: #1d1d1d;
    background:
      radial-gradient(130% 70% at 50% -18%, rgba(255, 197, 61, .16), rgba(255, 255, 255, 0) 62%),
      linear-gradient(170deg, var(--leather-l) 0%, var(--leather-m) 44%, var(--leather-d) 100%);
    border: 1px solid #0d0d0d;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 197, 61, .22);
    /* 手机上禁止 iOS 的"文字自动放大"（Apple 的 text autosizing 会把大字放大到很怪，
       还会连带把行高/基线弄乱 —— 用户说"数字不对齐、字体很奇怪"有它一份） */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  .wallet-case::after {          /* 亮金缝线 */
    content: ''; position: absolute; inset: 4px; border-radius: 13px;
    border: 1px dashed rgba(255, 197, 61, .55); pointer-events: none;
  }
  .case-head { display: flex; align-items: center; padding: 1px 2px 9px; position: relative; z-index: 1; }
  .case-head .case-chip {
    width: 100%; margin: 0; justify-content: center; gap: 7px; padding: 6px 10px;
    /* ★ 4.93（用户："本账户的描边金棕色吧不要灰色"）：这里原来残留了一圈蓝灰描边 →
       现在整块名牌都走**金棕**（底、描边、字） */
    background: rgba(240, 196, 100, .10); border: 1px solid rgba(196, 152, 74, .62);
    box-shadow: inset 0 0 0 1px rgba(240, 196, 100, .10); color: #fbf6ea;
  }
  .case-head .case-chip svg { color: #e8d9b0; }
  .case-head .case-chip .ac-k { color: rgba(234, 243, 252, .72); font-size: 11.5px; letter-spacing: 1px; }
  .case-head .case-chip .ac-no {
    /* ★ 4.109：账户号也去掉 Georgia —— 同上，iOS 上会渲染成高低不齐的老式数字 */
    font-family: var(--font-sans);
    font-variant-numeric: tabular-nums lining-nums;
    font-size: 15px; letter-spacing: 1.6px; color: #fbf6ea;
  }
  .case-head .case-chip .ac-tag {
    font-size: 10px; letter-spacing: 1px; padding: 0 6px;
    background: none; border-color: rgba(196, 152, 74, .62); color: #f0c464;
  }
  /* 卡位：不灌深色，只留一圈烫金细线（简洁、大气） */
  .case-body { position: relative; z-index: 1; padding: 0; background: none; box-shadow: none;
               border-radius: 11px; }
  .wallet-row { display: flex; flex-direction: column; gap: 0; margin: 0; }
  .wallet-row .wallet-card.total { order: -1; margin-bottom: 7px; }

  /* ---- 全部改成**皮面上烫金的行**（不再是一张张白/象牙色卡片）----
     用户要的是"统一成一个牛皮/金色卡包、紧凑简洁、不用白色卡底" ——
     所以卡片底色全部去掉，靠**金色发丝线**分格、**烫金字**写数字，像皮具上的压印。 */
  .wallet-row .wallet-card,
  .wallet-row .wallet-card.zero,
  .wallet-row .wallet-card.total {
    background: none; border: 0; border-radius: 0; box-shadow: none;
    padding: 9px 2px 10px; color: #f7f3e8;
    /* ★ 4.109：卡片自己不再建"独立图层"（iOS 上隔离图层 + 祖先渐变 = 那块白块）；
       卡里的每一层也显式声明"透明"，任何机型都不会多画一块底。 */
    isolation: auto;
    background-color: transparent;
  }
  .wallet-row .wallet-card .wc-head,
  .wallet-row .wallet-card .wc-amt,
  .wallet-row .wallet-card .wc-sub,
  .wallet-row .wallet-card .wc-cur,
  .wallet-row .wallet-card .wc-pct,
  .wallet-row .wallet-card .wc-cny,
  .wallet-row .wallet-card .wc-rate,
  .wallet-row .wallet-card .wc-flag,
  .wallet-row .wallet-card .wc-wm { background: none; box-shadow: none; }
  .wallet-row .wallet-card + .wallet-card,
  .wallet-row .wallet-card.total { border-top: 1px solid rgba(240, 196, 100, .22); }
  .wallet-row .wallet-card.total { padding-top: 2px; border-top: 0; }
  .wallet-row .wallet-card .wc-wm { display: none; }          /* 颜色太杂的水印在手机上去掉 */
  .wallet-row .wallet-card .wc-flag {
    filter: sepia(.45) saturate(.75) contrast(.95) brightness(.98);
    /* ★ 4.90（用户："国旗不要灰色描边呀，可以金色描边或者不描边"）→ **金色细描边** */
    box-shadow: 0 0 0 1px rgba(240, 196, 100, .55);
  }
  .wallet-row .wallet-card .wc-amt,
  .wallet-row .wallet-card.zero .wc-amt {
    /* ★ 4.109（用户 iPhone 截图："上面数字不对齐、字体很奇怪"）——
       这里原来是 Georgia 衬线体，**Georgia 用的是老式数字（old-style figures）**：
       0/1/2 是x高、4/6/3 带升部/降部，所以 "120,406.33" 看起来高低不齐、像字体坏了。
       华为上没装 Georgia，回退到 Times（现代数字）反而正常 —— 两台手机就不一样。
       现在跟全站统一用 --font-sans（无衬线）+ 表格数字，所有手机一模一样。 */
    font-family: var(--font-sans);
    font-variant-numeric: tabular-nums lining-nums;
    font-size: 18px; font-weight: 700; letter-spacing: .4px;
    color: #fbf7ec; text-shadow: 0 1px 0 rgba(0, 0, 0, .55);
  }
  /* ★ 4.90（用户："现金余额 / 合计的数值改为电脑黑金卡那个金色、亮的好看"）——
     金额统一用**黑金卡上的那支亮金 `#f0c464`**；其余小字从"灰"改成**金棕**调。 */
  .wallet-row .wallet-card .wc-amt { color: #f5d68f; }          /* 币种金额：亮金（偏奶） */
  /* ★ 4.93（用户："现金余额/合计折人民币改成资金账户号的颜色；￥总计的颜色换回白色"）——
     主卡（现金余额）那张：两个小标签 = 资金账户号那支象牙白 `#fbf6ea`；
     ￥ 总计数字 = **纯白**。（人民币那张卡的颜色不动） */
  .wallet-row .wallet-card.total .wc-amt { font-size: 26px; color: #ffffff; }
  .wallet-row .wallet-card.total .wc-cur,
  .wallet-row .wallet-card.total .wc-cur i,
  .wallet-row .wallet-card.total .wc-pct,
  .wallet-row .wallet-card.total .wc-sub { color: #fbf6ea; }
  .wallet-row .wallet-card .wc-cur { font-weight: 600; color: #f0dcb4; letter-spacing: .6px; }
  .wallet-row .wallet-card .wc-cur i { color: rgba(214, 178, 116, .78); font-size: 10px; letter-spacing: 1px; }
  .wallet-row .wallet-card .wc-pct { color: rgba(214, 178, 116, .82); font-size: 11px; }
  .wallet-row .wallet-card .wc-sub { font-size: 11px; color: rgba(214, 178, 116, .86); gap: 2px 6px; }
  .wallet-row .wallet-card .wc-bar {
    height: 2px; margin-top: 6px; background: rgba(240, 196, 100, .20);
  }
  .wallet-row .wallet-card .wc-bar i { background: var(--wc-accent); }
  /* 余额为 0 的行压暗（皮具上"没压字"的地方） */
  .wallet-row .wallet-card.zero .wc-amt { color: rgba(190, 160, 105, .60); text-shadow: none; }
  .wallet-row .wallet-card.zero .wc-cur { color: rgba(190, 160, 105, .72); }
  /* ★ 4.82：币种色 = 黑皮上的一套**亮金**（深金 → 主金 → 亮金） */
  .wallet-row .wallet-card:nth-child(1) { --wc-accent: #ab6400; }
  .wallet-row .wallet-card:nth-child(2) { --wc-accent: #e2a336; }
  .wallet-row .wallet-card:nth-child(3) { --wc-accent: #ffc53d; }
  .wallet-row .wallet-card.total { --wc-accent: #ffc53d; }
  .wallet-row .wallet-card::before { display: none; }   /* 皮面上不需要那条卡顶细线 */

  /* ---- 折叠态：三行同宽（左右对齐）、贴在一起，只露"名字 + 金额" ---- */
  .wallet-row:not(.expanded) .wallet-card:not(.total) {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 2px 7px 9px;
    border-left: 2px solid var(--wc-accent);
  }
  .wallet-row:not(.expanded) .wallet-card:not(.total) .wc-head { flex: 1 1 auto; min-width: 0; }
  .wallet-row:not(.expanded) .wallet-card:not(.total) .wc-pct,
  .wallet-row:not(.expanded) .wallet-card:not(.total) .wc-sub,
  .wallet-row:not(.expanded) .wallet-card:not(.total) .wc-bar { display: none; }
  .wallet-row:not(.expanded) .wallet-card:not(.total) .wc-amt {
    margin: 0; font-size: 14px; letter-spacing: .2px;
  }

  /* ★ 4.73（用户："可以保留必要地方的汇率显示"）——
     只在**真的有外币、需要换算**的卡上留那行小字；余额 0 的卡和主卡不显示。 */
  .wallet-row .wallet-card.zero .wc-sub,
  .wallet-row .wallet-card.total .wc-sub { display: none; }
  .wallet-hint.rate { display: none; }
  .only-m { display: inline-flex !important; }
  .only-d { display: none !important; }
  .case-zip { display: flex; }
}

/* ★ 4.71（用户："入金这个 logo 不好看而且跟『申请盘中授信』的标题格式不一样，
   我们要显得对称是两个选项"；"只在右边卡片宽度原地打开，不遮住右边沟通、
   上面钱包、左边资金/持仓"）——
   入金 = 一张和"申请盘中授信"**同款**的卡（同样的 h2 标题、同样的 .card 内边距），
   里面一行说明 + 一个按钮；点按钮**就地展开**指引（把下面那张卡往下推）。
   ⚠️ 不用全屏遮罩：全屏遮罩要锁 body 滚动条，一锁滚动条整页会横移几个像素（用户看到"背景往右挪"）。 */
#deposit-card { padding: 14px 16px; margin-bottom: 12px; }
#deposit-card h2 { border-bottom: 2px solid #e8d9b0; padding-bottom: 6px; margin: 0 0 10px; }
/* ★ 4.73（用户："入金卡片一行即可，右边蓝色小字展开指引"）——
   h2 自己做 flex：左边"入金"、右边蓝色小字"展开指引"；h2 是块级元素，
   下面那条通栏下划线照样在（跟"申请盘中授信"的标题格式完全一致）。 */
#deposit-card h2.deposit-h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.deposit-more {
  flex: 0 0 auto; border: 0; background: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; color: #a5760a;
}
.deposit-more:hover { text-decoration: underline; }
.deposit-more::after { content: ' ▾'; font-size: 11px; }
.deposit-more[aria-expanded="true"]::after { content: ' ▴'; }
.deposit-panel { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #fbf6ea;
                 animation: depositIn .16s ease-out; }
.deposit-panel[hidden] { display: none; }
@keyframes depositIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* 4.68 入金操作路径（App → 交易 → 存入资金） */
.dp-path { border: 1px solid #fbf6ea; border-radius: 10px; padding: 11px 13px; background: #fbf6ea; }
.dp-path > b { font-size: 15px; color: #1f1f1f; }
.dp-steps { margin: 8px 0 6px; padding-left: 20px; color: #3a3a3a; font-size: 14px; line-height: 1.8; }
.dp-steps b { color: #1f1f1f; }

/* ============================================================================
   ★ 4.80/4.81 设计令牌（shadcn/ui 命名法）+ **黑金主题**

   色值一律取自 Radix Colors（`app/static/radix-colors.css`，来自 npm 包
   `@radix-ui/colors@3.0.0`），这一节里**不再出现手写十六进制**。

   关于 shadcn/ui：它是 React + Tailwind 的组件库，我们这个 Flask + Jinja 的页面
   装不了（没有构建步骤、没有 React）。但它真正的价值是**一套与框架无关的语义令牌**
   （background / foreground / primary / muted / border / ring / radius…），
   所以这里把它的命名法整套搬过来 —— 以后真要迁到 React/Tailwind，这套变量能直接用。
   ============================================================================ */
:root {
  /* ---- shadcn 语义令牌 ----（4.81：主色改近黑 = 黑金；4.82：金换成**亮金**） */
  --background: var(--sand-1);
  --foreground: var(--gray-12);          /* 正文近黑（#202020）—— 系统消息也是这个色 */
  --card: #ffffff;
  --card-foreground: var(--gray-12);
  --muted: var(--sand-3);
  --muted-foreground: var(--gray-11);
  --border: var(--sand-6);
  --input: var(--sand-7);
  /* ★ 4.82（用户："现在的有点偏棕色了…金色要亮一点，参考时尚美学"）——
     金从 Radix 的 gold（偏棕的哑光金）换成 **amber**（明亮时尚金），并且**分层**用：
       bright 亮金 = amber-9  #ffc53d  → 大色块/徽章（配深色字）
       gold   主金 = amber-8  #e2a336  → 按钮、进度条、环图主段
       deep   深金 = amber-11 #ab6400  → 白底上的金色文字（对比度够）
       line   金线 = amber-6  #f3d673  → 细线、边框
       soft   浅金 = amber-2  #fefbe9  → 金色浅底（授信条款、"预估"卡片）
       ink   金底上的深字 = amber-12 #4f3422 */
  --gold-bright: var(--amber-9);
  --gold: var(--amber-8);
  --gold-deep: var(--amber-11);
  --gold-line: var(--amber-6);
  --gold-soft: var(--amber-2);
  --gold-ink: var(--amber-12);
  --ring: var(--amber-7);
  --primary: var(--gray-12);             /* 主色：近黑（顶栏、主按钮） */
  --primary-hover: color-mix(in srgb, var(--gray-12) 82%, #ffffff);
  --primary-foreground: var(--sand-1);
  --accent: var(--amber-11);             /* 交互色 = 深金（链接、选中 Tab） */
  --accent-soft: var(--amber-2);
  --accent-line: var(--amber-6);
  --gold-strong: var(--amber-11);
  --success: var(--green-11);
  --success-soft: var(--green-3);
  --warn: var(--amber-11);
  --warn-soft: var(--amber-3);
  --danger: var(--red-11);
  --danger-soft: var(--red-3);
  --radius: 10px;
  --radius-lg: 14px;

  /* ---- 字体：全站只有这一套 ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC",
               system-ui, sans-serif;
  --fs-xs: 12px;  --fs-sm: 13px;  --fs-base: 14px;
  --fs-lg: 16px;  --fs-xl: 19px;  --fs-2xl: 24px;
  --lh-tight: 1.25; --lh-base: 1.55; --lh-loose: 1.8;
  --fw-normal: 400; --fw-medium: 600; --fw-bold: 800;
}

/* ---------- 1. 底色 / 文字 / 字体（全站统一） ---------- */
body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}
/* ★ 统一字体格式：原先钱包数字用了 Georgia 衬线，跟正文两套字体 —— 现在全站一套 */
.wallet-card .wc-amt,
.wallet-case .wc-amt,
.acct-chip .ac-no,
.donut text, .donut .donut-val, .donut .donut-cap { font-family: var(--font-sans); }
input, button, select, textarea, table, .btn, h1, h2, h3 { font-family: var(--font-sans); }
/* 数字统一等宽，表格/金额不再跳字 */
.table td.num, .wc-amt, .ac-no, .cb-total-num, .mp-val, .donut-val, .ob-time,
.msg-who, .refresh-at { font-variant-numeric: tabular-nums; }
h1 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: var(--lh-tight);
     border-bottom-color: var(--border); }
h3 { font-size: var(--fs-lg); font-weight: var(--fw-medium); }
.hint, .hint.xs, .msg-who { color: var(--muted-foreground); }
a { color: var(--accent); }

/* ---------- 2. 顶栏 / 底部 Tab ---------- */
.nav, nav.nav { background: var(--primary); }
.nav a, .nav .nav-brand, .nav .nav-user { color: var(--sand-2); }
.nav a:hover, .nav a.on { color: #ffffff; }
.nav-brand .logo, .nav-brand img { box-shadow: 0 0 0 1px var(--gold-line); }
.tabbar { background: #ffffff; border-top: 1px solid var(--border); }
.tb-item { color: var(--muted-foreground); }
.tb-item.on { color: var(--gold-strong); }        /* 选中的 Tab 用金 */
.tb-badge, .nav-badge { background: var(--danger); color: #ffffff; }

/* ---------- 3. 按钮 / 输入 / 徽章 ---------- */
.btn {
  background: var(--card); color: var(--foreground);
  border: 1px solid var(--input); border-radius: var(--radius);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
}
.btn:hover { background: var(--muted); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
/* ★ 4.160（用户："过时间了手机和电脑点确认下单的时候，显示禁止的 icon 也要提醒文字"）——
   "非交易时间/非询价时间"的按钮：**看着是灰的，但点得动**（点了会弹一句 🚫 + 原因）。
   注意：这里只是"长得像禁用"，**不能**用 `disabled` —— 那样按钮收不到点击，用户只看到"点了没反应"。
   放在 `.btn.primary` 之后，保证灰色样式盖得住。 */
.btn.is-off, .btn.is-off:hover {
  background: #e9e5dc; border-color: #ded7c9; color: #9a958c;
  cursor: not-allowed; box-shadow: none;
}
.btn.is-off:active { background: #e3ded4; }
/* ★ 4.161：部分成交/部分平仓展开后，那个"≈ 30 万"的换算小字 —— 浅灰、不抢眼、不换行 */
.fill-calc { color: #8a6a1f; font-size: 12px; white-space: nowrap; margin-left: 2px; }
.btn.ok { background: var(--success-soft); border-color: var(--green-7); color: var(--success); }
.btn.bad { background: var(--danger-soft); border-color: var(--red-7); color: var(--danger); }
.btn.ok.btn-strong { background: var(--success); border-color: var(--success); color: #ffffff; }
.extra-btn { border-color: var(--input); color: var(--muted-foreground); }
.extra-btn:hover { background: var(--muted); border-color: var(--ring); color: var(--accent); }
input, select, textarea {
  background: var(--card); color: var(--foreground);
  border: 1px solid var(--input); border-radius: var(--radius);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 35%, transparent); }
.badge { border-radius: 999px; font-size: var(--fs-xs); }
.badge.ok { background: var(--success-soft); color: var(--success); }
.badge.wait { background: var(--muted); color: var(--warn); }
.badge.bad { background: var(--danger-soft); color: var(--danger); }
.badge.sell-ok { background: var(--primary); color: #ffffff; }
.badge.sell-wait { background: var(--accent-soft); color: var(--primary); border: 1px solid var(--accent-line); }
.badge.expire-badge { background: var(--gold-soft); color: var(--gold-strong); }
.warn { background: var(--warn-soft); color: var(--warn); }
.flash.ok { background: var(--success-soft); color: var(--success); }
.flash.error { background: var(--danger-soft); color: var(--danger); }

/* ---------- 4. 卡片 / 表格 / 标签页 ---------- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.table th, .table td { border-bottom-color: var(--border); }
.table th { background: var(--muted); color: var(--foreground); }
.table tr.manual { background: var(--gold-soft); }
.table tr.quoted { background: var(--success-soft); }
.tab { border: 1px solid var(--input); color: var(--foreground); background: var(--card); }
.tab.on { background: var(--primary); border-color: var(--primary); color: #ffffff; }
.request-card, .quote-card { border-color: var(--border); }
.best-badge, .badge.best { background: var(--gold-soft); color: var(--gold-strong);
  border: 1px solid var(--gold-line); }

/* ---------- 5. 聊天：气泡 + 系统消息（都当普通消息） ---------- */
.chat-rail, .rail-box, .chat-box { background: #ffffff; }
.chat-box { border-color: var(--border); }
.msg-text { color: var(--foreground); }         /* ★ 一律近黑 */
/* ★ 4.81（用户："刚刚对话框气泡双方颜色不够接近，蓝的太突兀"）——
   两边都是**同一明度的浅色**，只差一点点冷暖：对方中性浅灰、自己极淡香槟金。
   不再用蓝色，所以不会有"一块蓝跳出来"的感觉。 */
.msg.theirs .msg-text,
.msg.theirs.rec-open .msg-text, .msg.theirs.rec-close .msg-text, .msg.theirs.rec-ask .msg-text {
  background: var(--gray-3); border: 0;            /* 对方：中性浅灰 #f0f0f0 */
}
.msg.mine .msg-text,
.msg.mine.rec-open .msg-text, .msg.mine.rec-close .msg-text, .msg.mine.rec-ask .msg-text {
  background: var(--gold-3); border: 0;            /* 自己：极淡香槟 #f2f0e7 */
}
/* ★ 4.80（用户："对话框系统消息等文本都应该是黑色字体呀，当成正常的消息发送"）——
   开仓/平仓/询价记录**不再做成彩色卡片**，跟普通消息长得一样，只是文字里带【…】标记。 */
.msg.rec-open .msg-text, .msg.rec-close .msg-text, .msg.rec-ask .msg-text {
  border-left: 0; color: var(--foreground); font-size: inherit;
}
.msg.rec-recalled, .msg-text.recalled { background: var(--muted); color: var(--muted-foreground); }
.ask-card { border-color: var(--border); background: var(--card); }
.ask-card.buy { border-left: 3px solid var(--gold); }
.ask-card.sell { border-left: 3px solid var(--gold-line); }
.ask-card.buy .ac-title { color: var(--gold-strong); }
.ask-card.sell .ac-title { color: var(--gold-strong); }
.ask-card .ac-k { color: var(--muted-foreground); }
.ask-card .ac-v { color: var(--foreground); }
.rail-new, .rail-card-ask { color: var(--gold-strong); }
.rail-input { background: #ffffff; border-top-color: var(--border); }

/* ---------- 6. 资金页：环形图 / 额度条 / 钱包 ---------- */
.fund-legend .fl-head2 b, .donut-val { color: var(--primary); }
/* 钱包卡上的字回到近黑（4.75 那时候写的是深蓝 #1f1f1f，跟黑金主题不搭） */
.wallet-card .wc-amt { color: var(--gray-12); }
.wallet-card .wc-cur { color: var(--foreground); }
.wallet-card .wc-cur i, .wallet-card .wc-pct, .wallet-card .wc-sub { color: var(--muted-foreground); }
.wallet-card.total .wc-amt, .wallet-disc .wc-amt { color: var(--gold-strong); }
.fc-col { border-color: var(--border); }
.cb-bar { background: var(--muted); }
.cb-bar .cb-seg { background: var(--gold); }        /* 已获批 = 金 */
.cb-bar .cb-left { background: var(--gold-line); }  /* 剩余可申请 = 浅金 */
/* ★ 4.88（用户："#c9920f 已申请用这个"）—— 授信卡里"已申请/已获批"那个点也换成 #c9920f，
   跟环形图图例里的"已申请"是同一个色；"剩余可申请"保持浅金。 */
.cb-dot { background: #c9920f; }
.cb-dot.left { background: var(--gold-line); }
.mp-val, .max-power .mp-val { color: var(--primary); }
#credit-apply .credit-declare { background: var(--gold-soft); border-color: var(--gold-line); }
.credit-declare .cd-title { color: var(--gold-strong); }

/* ---------- 7. 手机钱包：黑金（黑皮甲 + 金缝线） ---------- */
@media (max-width: 760px) {
  .wallet-case {
    --leather-l: #2e2e2e; --leather-m: var(--gray-12); --leather-d: #131313;
  }
  .wallet-case { border-color: #0d0d0d;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .35),
                inset 0 1px 0 color-mix(in srgb, var(--gold-3) 22%, transparent); }
  .wallet-case::after { border-color: var(--gold-line); }        /* 金缝线 */
  .case-head .case-chip { background: color-mix(in srgb, var(--gold-2) 10%, transparent);
    border-color: var(--gold-line); color: var(--gold-3); }
  /* ★ 4.82：黑皮上的金一律换**亮金**（amber），不再用偏棕的 gold 色阶 */
  .case-head .case-chip svg, .case-head .case-chip .ac-tag { color: var(--gold-bright); }
  .case-head .case-chip .ac-k { color: color-mix(in srgb, var(--gold-line) 80%, transparent); }
  .case-head .case-chip .ac-no { color: #fff8e6; }
  .case-zip .wt-label { color: var(--gold-bright); }
  .wallet-row .wallet-card .wc-accent, .wallet-row .wallet-card { --wc-accent: var(--gold); }
  .wallet-row .wallet-card:nth-child(1) { --wc-accent: var(--gold-8); }
  .wallet-row .wallet-card:nth-child(2) { --wc-accent: var(--gold-7); }
  .wallet-row .wallet-card:nth-child(3) { --wc-accent: var(--gold-6); }
}

/* ---------- 8. 交易员工作台 / 表格颜色 ---------- */
.orders-table tr.sell-row { background: var(--gold-2); }
.orders-table tr.sell-row td:first-child { border-left-color: var(--gold-7); }
.ob-title { color: var(--foreground); }
.ob-status, .ob-time { color: var(--muted-foreground); }
/* ★ 4.82：亮金实心要配**深色字**（amber-9 #ffc53d 上放白字看不清，Radix 也是这么规定的） */
.dir-badge.dir-buy { background: var(--gold-bright); border-color: var(--gold); color: var(--gold-ink); }
.dir-badge.dir-buy-put { background: var(--gold-soft); border-color: var(--gold-line); color: var(--gold-strong); }
.dir-badge.dir-sell { background: var(--muted); border-color: var(--border); color: var(--muted-foreground); }
.agg-strip .agg-cell { background: var(--muted); }
.agg-strip .agg-cell.hl { background: var(--gold-soft); }
.agg-strip .agg-cell.hl b { color: var(--gold-strong); }
.agg-strip .agg-cell b.pos, .chat-orders td.num.pos { color: var(--success); }
.agg-strip .agg-cell b.neg, .chat-orders td.num.neg { color: var(--danger); }
.credit-table b.ok-num, .credit-inline .ci-row b.ok { color: var(--success); }

/* ============================================================================
   ★ 4.83 用户点名的一批微调（标签 / 气泡 / 资金页 / 零额度态）
   ============================================================================ */
/* ① 手机点 logo 的菜单：账号 和 退出登录 **同一个字号**（原来 12.5 / 15） */
.nav-logo-menu .nl-user { font-size: 15px; color: var(--muted-foreground); }
.nav-logo-menu a { font-size: 15px; }

/* ② 自己的气泡别再"又灰又黄"：换成**暖棕灰**（Radix gold-4），明显比对方深一档但不发黄 */
.msg.mine .msg-text,
.msg.mine.rec-open .msg-text, .msg.mine.rec-close .msg-text, .msg.mine.rec-ask .msg-text {
  background: var(--gold-4);
}

/* ③④（4.84 用户："申请盘中授信的两种气泡改为入金的两种气泡一一对应"）——
   入金指引里就两种气泡：
     · 说明面板  = `.dp-path` （米白底 + 同色细边）
     · 提醒便签  = `.dp-note` （暖金底 + 金边 + 深金字）
   现在"申请盘中授信"里的两块**一一对应**照搬：
     · 「盘中授信条款」= 说明面板（米白底），标题和正文都近黑
     · 「预估申请获批后最大购买力」= 提醒便签（暖金底 + 深金字） */
.credit-declare, #credit-apply .credit-declare {
  background: #fbf6ea; border: 1px solid #f0e8d8; border-radius: 10px;
  color: var(--foreground); padding: 11px 13px;
}
.credit-declare .cd-title, #credit-apply .credit-declare .cd-title {
  color: var(--foreground); font-weight: 700;
}
.max-power {
  background: #fff8ef; border: 1px solid #f0dfc4; border-radius: 8px;
  color: #8a6400;
}
.max-power .mp-label { color: #8a6400; }
.max-power .mp-val, .mp-val { color: #7a5a00; }

/* ⑤ 盘中授信额度"没额度"时要比现在更灰更暗（回到原来那种"整块灰掉"） */
.fc-right.is-zero .cb-title { color: #a9a49b; border-bottom-color: #eceae4; }
.fc-right.is-zero .cb-bar { background: #efece6; }
.fc-right.is-zero .cb-bar .cb-empty {
  background: repeating-linear-gradient(135deg, #e3e0d9 0 6px, #efece6 6px 12px);
}
.fc-right.is-zero .cb-row { color: #a9a49b; }
.fc-right.is-zero .cb-row b { color: #a9a49b; }
.fc-right.is-zero .cb-dot, .fc-right.is-zero .cb-dot.left { background: #cfcac1; }
.fc-right.is-zero .cb-note { color: #a9a49b; }

/* ⑥ 电脑端四张钱包卡：**合计卡做成实心金卡**（重点突出），三个币种卡走中性白 */
.wallet-card.total {
  background: linear-gradient(150deg, #f7d788 0%, #e2a336 55%, #cf9418 100%);
  border-color: #c9920f;
}
.wallet-card.total .wc-amt { color: var(--gold-ink); }
.wallet-card.total .wc-cur, .wallet-card.total .wc-cur i,
.wallet-card.total .wc-pct, .wallet-card.total .wc-sub { color: color-mix(in srgb, var(--gold-ink) 82%, transparent); }
.wallet-card.total .wc-bar { background: color-mix(in srgb, var(--gold-ink) 22%, transparent); }
.wallet-card.total .wc-bar i { background: var(--gold-ink); }

/* ⑦（4.84 用户："买入看涨还是不好看，logo 色可以吗"）——
   直接从 logo.png 取的品牌金（香槟金 `#f0d97e`，实测它是 logo 里占比最高的暖色）：
   买入看涨 = 香槟金底 + 深字；买入看跌 = 米白底 + 金边 + 深金字；平仓 = 暖灰。 */
.dir-badge.dir-buy { background: #f0d97e; border-color: #dcc063; color: #3d3213; }
.dir-badge.dir-buy-put { background: #fffdf6; border-color: #e3cd8e; color: #8a6400; }
.dir-badge.dir-sell { background: #e8e3d9; border-color: #cfc7b8; color: #3a3a3a; }

/* ⑧ 状态标签按"同一族金色由浅到深"排生命周期，拒绝用红棕（不再花乱）：
      待接单/已接单 = 浅金底 + 深金字；交易成功 = **亮金实心 + 深字**（最醒目）；
      部分成交/修改中 = 中金底；已拒绝 = 浅红棕底 + 红棕字。 */
.badge.wait { background: #fdf3d9; color: #8a5a00; }
.badge.ok { background: var(--gold-bright); color: var(--gold-ink); font-weight: 700; }
.badge.bad { background: #f6e7e3; color: #8c4436; }
.badge.sell-wait { background: #f7e3b0; color: #7a4e00; border-color: #e3c477; }
/* ★ 4.84（用户："平仓的交易成功颜色也改为订单的交易成功颜色"）：
   平仓成交跟开仓成交用**同一套**亮金实心 + 深字 */
.badge.sell-ok { background: var(--gold-bright); color: var(--gold-ink); font-weight: 700; }
.badge.expire-badge { background: #fdf3d9; color: #8a5a00; border: 1px solid var(--gold-line); }
.credit-table b.ok-num { color: var(--gold-strong); }

/* ============================================================================
   ★ 4.86 资金页四张钱包卡（**只作用电脑端**）
   4.85 曾把前三张做成浅金，但没加媒体查询 → 连手机的黑皮钱包一起改了（用户要求"改回"）。
   现在：手机端保持 4.81/4.82 那套**黑皮 + 亮金**不动；电脑端前三张回到**中性白卡 + 金点缀**，
   只有"合计"是实心金卡（第一/二次黑金版本的样子）。
   ============================================================================ */
@media (min-width: 761px) {
  .wallet-row .wallet-card,
  .wallet-row .wallet-card.zero {
    background: linear-gradient(168deg, #ffffff 0%, #fdf8ee 100%);
    border-color: #ece3d2;
  }
  .wallet-row .wallet-card.zero { border-style: dashed; }
  /* ★ 4.89（用户："卡片人民币数额再浅色一点点"）：从 #57503f 再提亮一档 */
  .wallet-row .wallet-card .wc-amt,
  .wallet-row .wallet-card.zero .wc-amt { color: #6f6757; }
  /* ★ 4.87（用户："HK0 US0 之前是灰掉了的"）：余额为 0 的卡回到**灰掉**的样子 */
  .wallet-row .wallet-card.zero .wc-amt { color: #bdb6a6; }
  .wallet-row .wallet-card.zero .wc-cur,
  .wallet-row .wallet-card.zero .wc-cur i,
  .wallet-row .wallet-card.zero .wc-pct,
  .wallet-row .wallet-card.zero .wc-sub { color: #bdb6a6; }
  .wallet-row .wallet-card .wc-cur { color: #3a352c; }
  .wallet-row .wallet-card .wc-cur i,
  .wallet-row .wallet-card .wc-pct,
  .wallet-row .wallet-card .wc-sub,
  .wallet-row .wallet-card .wc-sub .wc-cny { color: #9a958c; }
  .wallet-row .wallet-card .wc-bar { background: #f4efe4; }

  /* ★ 4.90（用户："恢复黑金卡吧"）—— 合计卡回到**黑卡 + 亮金字**（4.85 那一版）：
     跟三张浅色币种卡拉满对比，"合计/现金余额"一眼是主角。 */
  .wallet-row .wallet-card.total {
    background: linear-gradient(150deg, #2e2e2e 0%, #1a1a1a 60%, #0f0f0f 100%);
    border: 1px solid var(--gold);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  }
  .wallet-row .wallet-card.total .wc-amt { color: #f0c464; }
  .wallet-row .wallet-card.total .wc-cur,
  .wallet-row .wallet-card.total .wc-cur i,
  .wallet-row .wallet-card.total .wc-pct,
  .wallet-row .wallet-card.total .wc-sub { color: color-mix(in srgb, #f0c464 68%, #ffffff); }
  .wallet-row .wallet-card.total .wc-bar { background: rgba(240, 196, 100, .25); }
  .wallet-row .wallet-card.total .wc-bar i { background: #f0c464; }
  .wallet-row .wallet-card.total .wc-wm { opacity: .18; }
}

/* ★ 4.87（用户："入金的两个框框颜色和字体要和申请盘中的两个框框颜色和字体一样呀；
   把行距和气泡底色再改到和入金一样"）——
   干脆让两对**共用同一套规则**：
     说明面板 = `.dp-path`  →  「盘中授信条款」
     提醒便签 = `.dp-note`  →  「预估申请获批后最大购买力」
   底色/边框/字号/行距/内边距全部照抄入金那边，只保留条款标题加粗。 */
.credit-declare, #credit-apply .credit-declare {
  background: #fbf6ea; border: 1px solid #fbf6ea; border-radius: 10px;
  padding: 11px 13px; margin: 10px 0;
  font-size: 14px; line-height: 1.8; color: #1f1f1f;
}
.credit-declare ol { line-height: 1.8; }
.credit-declare .cd-title, #credit-apply .credit-declare .cd-title { color: #1f1f1f; }

.max-power, #credit-apply .max-power {
  background: #fff8ef; border: 1px solid #f0dfc4; border-radius: 8px;
  padding: 9px 12px; margin: 10px 0;
  font-size: 13px; line-height: 1.7; color: #8a6400;
}
.max-power .mp-label { color: #8a6400; }
.max-power .mp-val, .mp-val { color: #8a6a1f; }

/* ★ 4.87：买单标签 = **现金余额那支亮金**（跟环形图/图例一模一样）；亮金上用深字 */
.dir-badge.dir-buy { background: #ffc53d; border-color: #ffc53d; color: #3d3213; }

/* ---------- 9. 登录页 ----------
   登录页本来就是"深蓝底 + 金色 logo/按钮"的设计（4.x 那几轮专门调过），
   跟新的蓝金主题是一家人，所以**这里不覆盖它**，免得把它的暗底渐变和山峦图弄脏。 */

/* ============================================================================
   ★ 4.106（用户："重新设计登录页，从几十版之前的深蓝色版本（不是金色老鹰等）开始改，
   改的有**黑白金**配色即可，比如山是白灰的可以保留"）——
   设计计划：
     · 底：中性黑（不带任何色偏）——顶部一点点提亮的暗角，其余交给留白
     · 山：**白灰剪影**（保留用户认可的那层），两层深浅拉开景深
     · 老鹰：回到**白色线稿**（去掉上一版的金棕滤镜）
     · 金：只出现在四处 —— **卡片顶端一道金线、logo、登录按钮、忘记密码链接**
     · 卡片：黑玻璃 + 白色发丝边（白）+ 顶部金线（金）= 黑白金一眼成立
   原则：**金是点缀，不是底色**；白灰负责层次，黑负责气场。
   ============================================================================ */
body.auth-dark {
  background:
    radial-gradient(125% 85% at 50% -12%, #1b1b1b 0%, #0e0e0e 46%, #050505 100%);
  color: #f2f2f2;
}
.auth-bg .auth-glow { background: none; }        /* 不要任何彩色光晕 */

/* 山脊 = 白灰剪影（远浅近深，靠透明度拉景深） */
.auth-ridges #rgFar stop { stop-color: #ffffff; }
.auth-ridges #rgFar stop:nth-of-type(1) { stop-opacity: .055; }
.auth-ridges #rgFar stop:nth-of-type(2) { stop-opacity: .018; }
.auth-ridges #rgFar stop:nth-of-type(3) { stop-opacity: 0; }
.auth-ridges #rgNear stop { stop-color: #ffffff; }
.auth-ridges #rgNear stop:nth-of-type(1) { stop-opacity: .10; }
.auth-ridges #rgNear stop:nth-of-type(2) { stop-opacity: .03; }
.auth-ridges #rgNear stop:nth-of-type(3) { stop-opacity: 0; }
.auth-ridges path { stroke: none; }              /* 白色剪影不要描边 */

/* 老鹰：白线稿（把 4.104/4.105 的金棕滤镜去掉） */
.auth-birds { filter: none; opacity: .88; }

/* 卡片：黑玻璃 + 白发丝边 + **顶端一道金线** */
.auth-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, .052), rgba(255, 255, 255, .018));
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .66), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.auth-card::before {
  content: ''; position: absolute; left: 18%; right: 18%; top: -1px; height: 1px;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0), rgba(226, 200, 122, .95), rgba(212, 175, 55, 0));
}

/* 输入行：中性黑 + 白发丝边；聚焦才亮金 */
.auth-field { background: rgba(255, 255, 255, .035); border-color: rgba(255, 255, 255, .10); }
.af-label { color: #b9b9b9; }
.auth-field input { color: #f7f7f7; }
.auth-field input::placeholder { color: #7d7d7d; }

/* 文字：白 / 中性灰（不再偏蓝） */
.auth-name { color: #fbfbfb; }
.auth-card-title { color: #a8a8a8; font-weight: 600; letter-spacing: .3px; }
.auth-remember em, .auth-hint { color: #8f8f8f; }
.auth-tip { color: #9a9a9a; }

/* 金：按钮（金属金渐变 + 黑字）与"忘记密码"链接 */
.auth-btn {
  background: linear-gradient(135deg, #f7e7b8 0%, #dcbc63 52%, #c9920f 100%);
  color: #1a1508; font-weight: 700;
  box-shadow: 0 10px 26px rgba(201, 146, 15, .22);
}
.auth-links a { color: #d4af37; }
.auth-note b { color: #e0c98a; }
.auth-emblem { box-shadow: 0 8px 22px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .12); }

/* ★ 4.113：登录页的鹰**已还原**成用户原来上传的那两只白描鹰（`eagles.png` 就是原图），
   4.112 为"一只大剪影（1:1）"加的那条窄屏收小规则一并撤掉 —— 回到 4.109 的版式。 */

/* ============================================================================
   ★ 4.111 资金页 / 交易员客户页 配色收口（用户 2026-10-07）：
     "**存续规模 SUM** 不要绿色呀卡片和文字 黑金棕色调；
      **50% 可平仓收益** 重点突出这个卡片，其他三个可以差不多或者渐变到这里最强调；
      港币美元人民币卡片网页为什么卡片下部都有灰色一条长线，可以删去吗还是有什么用你告诉我。"

   ① 四个合计格 = **一条米金→亮金的明度链**（不再出现绿色）：
        名义（最浅）→ 存续 → 浮动（最深）→ 50% 可平仓收益（**实心亮金**，一眼是重点）
   ② 盈利/亏损的数字也不再借绿色：盈利 = 深金 `#ab6400`，亏损 = 红棕 `#8c4436`
      （中文圈习惯"红涨绿跌"，本来就没人用绿色表示赚，这里统一收进黑金棕）
   ③ 卡片底部那条"灰色长线" = `.wc-bar`（币种占现金余额的比例条）。
      百分比在卡片右上角已经写成文字了，它是**重复信息** → 电脑端隐藏（手机端本来就只在展开时露 2px）。

   ⚠️ 这一节必须放在**文件最末尾**：上面 4.80 的令牌层里还有
      `.agg-strip .agg-cell { background: var(--muted) }` 和 `b.pos { color: var(--success) }`，
      同优先级、谁在后面谁赢。
   ============================================================================ */
.agg-strip .agg-cell { background: #fdfaf2; border: 1px solid #f3ead8; }
.agg-strip .agg-cell:nth-child(2) { background: #faf3e2; }   /* 存续：去掉原来的淡绿底 */
.agg-strip .agg-cell:nth-child(3) { background: #f7ecd4; }   /* 浮动：再深一档 */
.agg-strip .agg-cell span { color: #a2906f; }
.agg-strip .agg-cell:nth-child(2) span { color: #9a8558; }   /* 存续：绿字 → 金棕 */
.agg-strip .agg-cell:nth-child(3) span { color: #8f7231; }

.agg-strip .agg-cell.hl {
  background: linear-gradient(150deg, #ffe08f 0%, #f4bc48 52%, #dd9a1c 100%);
  border: 1px solid #e2b45a;
  box-shadow: 0 5px 16px rgba(226, 163, 54, .30);
}
.agg-strip .agg-cell.hl span { color: #5c4213; }
.agg-strip .agg-cell.hl b { color: #4f3422; }
.agg-strip .agg-cell.hl i { color: rgba(79, 52, 34, .72); }

/* 盈利 = 深金、亏损 = 红棕（都不再用绿色） */
.agg-strip .agg-cell b.pos, .chat-orders td.num.pos { color: #ab6400; }
.agg-strip .agg-cell b.neg, .chat-orders td.num.neg { color: #8c4436; }

/* 钱包卡底下那条比例条：电脑端隐藏（信息重复，且看着像一条莫名其妙的灰线） */
@media (min-width: 761px) {
  .wallet-row .wallet-card .wc-bar { display: none; }
}

/* 环形图"什么都没有"时，中心那两行字也一起压灰（跟右边的 0 额度卡同一套灰）
   —— 圈是虚灰线、字还是黑粗体的话，反而像"有数据但画不出来"。 */
.donut.is-zero .donut-val { fill: #a9a49b; }
.donut.is-zero .donut-cap { fill: #b8b3a9; }

/* ============================================================================
   ★ 4.117（用户："试一下沟通页和其他页一样吧"）——
   手机上的沟通页**不再做成"贴在屏幕上的浮层"**，而是**跟其它页面一样：就是一张普通页面**。
     · 打开沟通页时，这一页只剩沟通栏（正文 / 底部 Tab / 页脚 / 左上角小圆按钮都收起来）；
     · 沟通栏从 `position: fixed` 改回 `position: static`（回到文档流，不再"贴"在屏幕上）；
     · 键盘弹起时，由**浏览器自己**把输入框滚/推进可见区 —— 这正是其它页面的处理方式。

   好处：不用再去猜"可见视口 / 布局视口"（4.108~4.116 那套探针 + 像素高度全部删掉），
        也就不会再出现"顶上映出一条后面的页面（资金页）"那种事。
   代价：① 打开时没有"从右边滑出来"的动画，就是一次翻页；
        ② 打字时页头（含"返回"）可能被顶到屏幕上方 —— 普通网页就是这样，键盘收起来就回来。

   ⚠️ 只作用于手机（≤760px）；电脑端右侧那条沟通栏还是 sidebar，完全不动。
   ============================================================================ */
@media (max-width: 760px) {
  body.rail-open main,
  body.rail-open nav.tabbar,
  body.rail-open .footer,
  body.rail-open .m-corners { display: none !important; }

  body.rail-open .chat-rail {
    position: static;            /* ← 关键：不再是浮层，就是普通页面内容 */
    transform: none;
    width: auto; max-width: none;
    height: 100vh; height: 100dvh;
    border-left: 0; box-shadow: none; transition: none;
  }

  /* ★ 4.117：沟通页正好只有一屏高、页面滚不动 —— 而浏览器"把输入框滚进可见区"这个动作
     需要页面**有可滚的余地**。所以**打字期间**（`body.kb-room`，由 JS 在输入框聚焦时挂上）
     在页面末尾临时垫一块，给浏览器留出把输入框送上来的空间；键盘一收就撤掉，平时完全看不到。 */
  body.rail-open.kb-room::after { content: ''; display: block; height: 50dvh; }
}

/* ============================================================================
   ★ 4.119（用户："不要大卡，和订单一样，一个一张完整的"）——
   4.118 那版是"留外面那张大卡、把里面降级成分区"；用户不要那样，要的是
   **外层的"大卡"整个去掉，每个"期限 / 结构"块各自就是一张完整的卡片**，
   跟"我的订单"一模一样（白底 + 金边 + 圆角 + 自带标题）。

   所以：`.card.request-card` 退化成**纯包裹层**（没有底色/边框/圆角/内边距），
   下面的 `.mobile-card`（= 原来的内层）恢复成完整卡片；询价头留成"这一组的标题行"。
   ============================================================================ */
@media (max-width: 760px) {
  /* 外层大卡 → 纯包裹层 */
  .card.request-card {
    background: none; border: 0; border-radius: 0; box-shadow: none;
    padding: 0; margin: 0 0 2px;
  }
  /* 询价头 → 这一组的标题行（左右 8px，跟下面卡片对齐） */
  .request-card .req-head { padding: 0 8px; margin: 0 0 2px; }
  /* 每个"期限 / 结构"块 = 一张完整的卡片（跟"我的订单"同一套样式） */
  .quote-mobile .mobile-card {
    background: #ffffff; border: 1px solid #e8d9b0; border-radius: 10px;
    padding: 12px 14px; margin: 10px 8px;
  }
  /* 卡里恢复"标的 + 代码"：每张卡自带标题，才算"一张完整的" */
  .quote-mobile .mobile-card .mc-title { display: flex; }
  /* "复制勾选行"按钮 / 自动询价提示行也留出同样的边距 */
  .request-card .req-actions, .request-card .pending-hint { margin-left: 8px; margin-right: 8px; }
}

/* ============================================================================
   ★ 4.120（用户："手机端做的很差…有的表格凸出来了…有些标签页点进去底部就五个变两个了很奇怪"）
   体检（`测试工具\手机端体检.py`，390×844 逐页量）发现**根因**：
   交易员有 3 个页面的表格把**整个文档**撑宽了 ——
     /chats/<客户> 621px、/import 528px、/login-log 612px。
   而手机浏览器遇到"文档比视口宽"时会把**布局视口一起放大**（实测 390 → 621），
   于是整页像被缩小过、底部 Tab 被推到屏幕外 —— 用户看到的"很奇怪"就是这个，
   不是 Tab 少了，是**整页被撑变形**了。
   修法：
     ① 每张卡自己横向滚动（模板里那几张宽表已各自套上 `overflow-x:auto` 的容器）；
     ② 两张日志表在手机上各收掉最占地方的一列，尽量连横向滚动都免了。
   ============================================================================ */
@media (max-width: 760px) {
  .card { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .loginlog-table th:nth-child(6), .loginlog-table td:nth-child(6) { display: none; }   /* 浏览器 UA */
  .importlog-table th:nth-child(4), .importlog-table td:nth-child(4) { display: none; } /* 写入条数 */

  /* ★ 4.120：交易员右下角那个"客户沟通"浮标，手机上原来被 `.rail-toggle{display:none}` 一起藏掉了。
     可交易员的底栏里**没有"对话"入口**（工作台/客户/导入/记录/设置）——
     于是他就彻底找不到"跟某一个客户单独说话"的地方（用户："找不到与个人对话的页面"）。
     这里放出来，并抬到底栏上方一点，免得压住 Tab。 */
  /* ★ 4.121（用户："手机侧把这个浮标改成底部一栏固定吧，可以正常打开标签页一样独立打开"）——
     交易员侧不再用右下角浮标，改成**底栏上的"沟通"入口**（见 base.html 的 tabbar）。
     所以手机端浮标继续隐藏（那条 `.rail-toggle{display:none}` 保持生效）。 */

  /* ★ 4.121（用户："报价页只保留每个卡片像订单页一样，现在还是有大卡的文字不好看，
     表格之外的文字重复了，都不要"）—— 手机上把"询价头"（标的/规模/方向/时间/复制）**整条收掉**，
     卡片里自己写全（方向标签 + 询价规模都进卡片，见 quotes_table.html）。 */
  .request-card .req-head { display: none; }
  /* ★ 4.132（用户："手机端报价页把询价时间单独那行删去，电脑端不变"）——
     那行是 `.req-head-m`（手机上的第二行：询价时间 + 整单复制），它**不在** `.req-head` 里面，
     所以 4.121 只藏了头、这行还留着。现在一起收掉；卡片里的报价时间照旧显示（在下单按钮右边）。 */
  .request-card .req-head-m { display: none !important; }
}

/* ★ 4.127：铃铛底部那个"全部已读"小字（用户："除非在消息铃加个小字'全部已读'"） */
.bell-allread { text-align: center; color: #9a958c; font-size: 12px; padding: 8px 12px; }
.bell-allread:hover { color: #8a6a1f; background: #fbf6ea; }

/* ★ 4.128（用户："询价中手机端三个字换行了为什么"）——
   手机窄栏里那枚小标签被挤成两行。标签是一整个短词，任何屏宽下都不该折行。 */
.badge, .mobile-card .badge, .request-table .badge, .quote-mobile .badge,
.orders-mobile .badge, .row-tags .badge { white-space: nowrap; flex: 0 0 auto; }

/* ★ 4.132（用户："手机端最大购买力经常换行不好看，变成标签删去等号？"）——
   手机上把那行做成"标签 … 金额靠右"的一行（去掉 ≈/=），跟下面两行图例对齐；电脑端不动。 */
@media (max-width: 760px) {
  .fund-legend .fl-head2 { display: flex; align-items: baseline; gap: 6px; }
  .fund-legend .fl-head2 .fl-eq { display: none; }
  .fund-legend .fl-head2 b { margin-left: auto; font-size: 16px; white-space: nowrap; }
}

/* ★ 4.140：从铃铛点进来定位到的那张报价卡，闪两下提示（2.6 秒后自己消失） */
@keyframes cardFlash { 0%,100% { box-shadow: 0 0 0 0 rgba(226,163,54,0); }
                       35% { box-shadow: 0 0 0 3px rgba(226,163,54,.55); } }
.request-card.focus-flash { animation: cardFlash .9s ease-in-out 2; }

/* ★ 4.140（用户："（剩余可申请xx）那个括号应该在申请金额右边"）——
   手机端让"申请金额"那一行整行放得下：输入框收窄、括号用小一号字、都不换行。 */
@media (max-width: 760px) {
  .stepper { flex-wrap: nowrap; align-items: center; gap: 5px; }
  .stepper input[type=number] { width: 84px; min-width: 0; }
  .stepper .unit-cny { margin-left: 2px; }
  /* ★ 4.159：这一行里那串"（剩余可申请…）"删掉后腾出了宽度 → 输入框加宽一点，
     不然 500000 这种六位数会被截成"50000"看不见最后一位。 */
  #credit-apply .stepper input[type=number] { width: 104px; }
  .stepper .hint { flex: 0 1 auto; min-width: 0; white-space: nowrap; font-size: 11px; margin-left: 2px; }
}

/* ★ 4.144（用户："点击订单消息后跳转电脑的订单在屏幕最上方不好看"）——
   锚点跳过来的那张订单/记录，别紧贴屏幕最上沿（留一点呼吸），并闪一下提示是哪一条。 */
#o1, tr[id^="o"], .mobile-card[id^="o"], .request-card {
  scroll-margin-top: 184px;
}
tr[id^="o"]:target, .mobile-card[id^="o"]:target {
  animation: cardFlash .9s ease-in-out 2;
}
/* 锚点高亮：整行淡金底，几秒后自动消失（配合上面的动画） */
@keyframes rowFlash { 0%,100% { background-color: transparent; }
                      35% { background-color: rgba(226, 163, 54, .18); } }
tr[id^="o"]:target td { animation: rowFlash .9s ease-in-out 2; }

/* ★ 4.145（用户："所有铃铛都要加全部已读的小字，我还是没找到"）——
   原来它在列表**最下面**，铃铛一屏放不下就得滚到底才看得见 → 改成**钉在铃铛底部**，
   不论滚到哪儿都在（客户/交易员共用同一个铃铛，所以两边都有）。 */
.bell-allread {
  position: sticky; bottom: 0; z-index: 2;
  display: block; text-align: center;
  background: #ffffff; border-top: 1px solid #f0e6cf;
  color: #8a6a1f; font-size: 12.5px; font-weight: 600; padding: 9px 12px;
}
.bell-allread:hover { background: #fbf6ea; }

/* 4.146: no unread -> dim but still visible */
.bell-allread.dim { color: #c5bfb4; font-weight: 500; }

/* ★ 4.156：未成交订单的锚点（#f<订单id>）—— 跳过来留白 + 闪一下，跟订单卡一致 */
tr[id^="f"], .mobile-card[id^="f"] { scroll-margin-top: 184px; }
tr[id^="f"]:target td { animation: rowFlash .9s ease-in-out 2; }
.mobile-card[id^="f"]:target { animation: cardFlash .9s ease-in-out 2; }