/* 形态训练台 —— 深色、克制的交易终端风格 */

:root {
  --bg: #080b11;
  --line: rgba(255, 255, 255, 0.075);
  --line-2: rgba(255, 255, 255, 0.14);
  --text: #e9eef6;
  --dim: #97a3b6;
  --faint: #5f6b81;
  --up: #2ed3a0;
  --down: #ff6b81;
  --gold: #e3b25c;
  /* 唯一能自己敲数字的地方（手数框）用它描边，和「下一天 / 快进」同色系 */
  --blue: #6ea8fe;
  /* 控件统一高度。和 iOS 同一条原则：**主次交给颜色，不靠大小**。
     之前动作条那一行里三个高度 —— 动作按钮 41、档位 chip 35、手数框 28 ——
     一行三档，看着就散，而档位（真正的常用操作）反而最小。 */
  --ctl-h: 35px;     /* 动作条：档位 chip / 手数框 / 动作按钮 */
  --ctl-h-sm: 31px;  /* 顶栏：品种 / 窗口 / 资金 / 那几个按钮 */
  --radius: 16px;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
    "Helvetica Neue", "Microsoft YaHei", sans-serif;
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1100px 560px at 16% -12%, rgba(227, 178, 92, 0.07), transparent 62%),
    radial-gradient(900px 520px at 88% 112%, rgba(46, 211, 160, 0.055), transparent 62%),
    var(--bg);
}

button,
input {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

button:focus,
input:focus {
  outline: none;
}

button:focus-visible {
  outline: 1px solid rgba(227, 178, 92, 0.45);
  outline-offset: 1px;
}

.app {
  height: 100vh;
  display: grid;
  grid-template-rows: 58px minmax(0, 1fr);
}

/* ---------------------------------------------------------------- 顶栏 */

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.032), transparent);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 4px;
}

.brand .mark {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: linear-gradient(140deg, #f2cd86, #a97c30);
  box-shadow:
    0 0 0 1px rgba(227, 178, 92, 0.35),
    0 8px 20px -8px rgba(227, 178, 92, 0.75);
}

.brand h1 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
}

/* 分段控件（.seg）在 2.13.0 全部删掉了：顶栏最后一段用它的是「窗口」，
   而窗口已经改成下拉（.pick-win）。留着死样式只会让人以为还有地方在用。 */

/* K 线周期在 2.15.0 也收成了下拉（.pick-per）—— 顶栏要腾宽度给「形态」，
   而四个档位一直铺开是顶栏里最大的一块。
   所以 .periods 这套分段控件的样式一并删掉：**不留死样式**，
   和上面 .seg 的处理一致。 */

/* 标的切换器。顶栏宽度是死的，分段控件的宽度却随标的数线性长 ——
   两个还行，到六七个就是一面墙。所以做成下拉：收起时只占一个 chip 宽，
   展开时每个选项还能带上数据区间和 K 线根数。后两样直接决定这个标的
   能练多少局，分段控件那点地方塞不下。
   层叠：6 —— 压得住图上的悬停卡（5），压不过结算单（40）。 */

.pick {
  position: relative;
}

.pick-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  /* 顶栏一整条统一到 --ctl-h-sm：品种 / 资金 / 那几个按钮一样高，
     不再有谁高谁矮（原来 29 / 26 / 31 三档）。 */
  min-height: var(--ctl-h-sm);
  padding: 0 11px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.032);
  color: var(--text);
  font-size: 12px;
  white-space: nowrap;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
}

.pick-btn:hover {
  border-color: var(--line-2);
  background: rgba(255, 255, 255, 0.06);
}

.pick-btn[aria-expanded="true"] {
  border-color: rgba(227, 178, 92, 0.42);
  background: rgba(227, 178, 92, 0.09);
}

/* 终局时锁死。变灰 + 去掉悬停反馈，别让人以为还能点 */
.pick-btn:disabled,
.pick-btn:disabled:hover {
  color: var(--faint);
  border-color: var(--line);
  background: transparent;
  cursor: not-allowed;
}

.pick-btn .pk-name {
  font-weight: 600;
  letter-spacing: 0.4px;
}

.pick-btn .pk-code {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--dim);
  letter-spacing: 0.2px;
}

.pick-btn[aria-expanded="true"] .pk-code {
  color: #f2d59a;
}

.pick-btn:disabled .pk-code {
  color: inherit;
}

.pk-caret {
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.55;
  transition: transform 0.18s, opacity 0.18s;
}

.pick-btn[aria-expanded="true"] .pk-caret {
  transform: rotate(180deg);
  opacity: 0.9;
}

.pick-panel {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  z-index: 6;
  min-width: 264px;
  max-height: 62vh;
  overflow-y: auto;
  padding: 5px;
  border-radius: 13px;
  border: 1px solid var(--line-2);
  background: rgba(11, 15, 21, 0.97);
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 56px -22px rgba(0, 0, 0, 0.95);
  scrollbar-width: thin;
  opacity: 0;
  transform: translateY(-5px) scale(0.985);
  transform-origin: top left;
  pointer-events: none;
  transition: opacity 0.16s, transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}

.pick-panel.show {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.pick-panel::-webkit-scrollbar {
  width: 7px;
}

.pick-panel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}

.pick-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 2px 14px;
  width: 100%;
  padding: 8px 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  text-align: left;
  transition: background 0.14s;
}

.pick-row:hover,
.pick-row.hot {
  background: rgba(255, 255, 255, 0.055);
}

.pick-row[aria-selected="true"] {
  background: rgba(227, 178, 92, 0.1);
}

.pick-row[aria-selected="true"]:hover,
.pick-row[aria-selected="true"].hot {
  background: rgba(227, 178, 92, 0.16);
}

.pick-row .pr-main {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}

.pick-row .pr-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.pick-row[aria-selected="true"] .pr-name {
  color: #f2d59a;
}

.pick-row .pr-code {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--dim);
  flex: 0 0 auto;
}

.pick-row .pr-days {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pick-row .pr-sub {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--faint);
  letter-spacing: 0.2px;
}

.topbar .spacer {
  flex: 1;
}

.capital {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  color: var(--faint);
  letter-spacing: 0.5px;
}

.capital input {
  width: 92px;
  height: var(--ctl-h-sm);
  padding: 0 9px;
  text-align: right;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.34);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.18s;
}

.capital input:hover {
  border-color: var(--line-2);
}

.capital input:focus {
  border-color: rgba(227, 178, 92, 0.45);
}

.capital em {
  font-style: normal;
  color: var(--faint);
}

.ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ctl-h-sm);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--dim);
  font-size: 12px;
  padding: 0 13px;
  border-radius: 9px;
  transition: 0.18s;
}

.ghost:hover {
  color: var(--text);
  border-color: var(--line-2);
  background: rgba(255, 255, 255, 0.06);
}

/* 「结束本局」是这一条里唯一的主动作，给一点金色 */
.ghost.go {
  color: #f2d59a;
  border-color: rgba(227, 178, 92, 0.34);
  background: rgba(227, 178, 92, 0.1);
}

.ghost.go:hover {
  color: #ffe9bd;
  border-color: rgba(227, 178, 92, 0.55);
  background: rgba(227, 178, 92, 0.18);
}

/* ---------------------------------------------------------------- 主区 */

.main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 344px;
  gap: 14px;
  padding: 14px 16px 16px;
  min-height: 0;
}

.col-left {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 0;
}

.strip {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 4px;
  min-height: 22px;
}

.strip .sym {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
}

.strip .spacer {
  flex: 1;
}

.strip-mid {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
}

/* 信息条右侧那格是「当前状态」，做成胶囊。
   原来四种状态都是一行 --faint 灰字（全站最暗的颜色），
   终局时和「判断下一天」长得一模一样，一局打完看不出已经结束了。 */

/* 高度写死 22px（= .strip 的 min-height），别让胶囊按字号算出来的 24px
   把信息条顶高 —— 那会让「回看时胶囊隐藏」变成一次 2px 的布局抖动。 */
.prompt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
  font-size: 11.5px;
  line-height: 1;
  color: var(--dim);
  letter-spacing: 0.3px;
}

/* 回看时这格清空，胶囊跟着收起来，别留一个空壳 */
.prompt:empty {
  display: none;
}

.prompt::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.8;
}

.prompt b {
  color: var(--gold);
  font-weight: 600;
}

/* 持仓中：绿色，和图上那条持仓虚线呼应 */
.prompt.hold {
  color: #9df0d6;
  border-color: rgba(46, 211, 160, 0.3);
  background: rgba(46, 211, 160, 0.09);
}

/* 已到数据末尾：这是「走不动了」，不是「进行中」，所以退回最轻的样式 */
.prompt.end {
  color: var(--faint);
  border-color: transparent;
  background: transparent;
  padding-left: 0;
}

.prompt.end::before {
  display: none;
}

/* 终局：金色实底，一眼能看出这一局已经收摊了 */
.prompt.done {
  color: #f2d59a;
  border-color: rgba(227, 178, 92, 0.4);
  background: rgba(227, 178, 92, 0.12);
}

/* 图表卡片 */

.chartcard {
  position: relative;
  min-height: 0;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008)),
    rgba(8, 11, 17, 0.5);
}

.chartcard::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(227, 178, 92, 0.5), transparent);
}

#chart {
  display: block;
  width: 100%;
  height: 100%;
}

/* 持仓 HUD */

.hud {
  position: absolute;
  top: 14px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 13px;
  border-radius: 11px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  background: rgba(10, 14, 20, 0.72);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(9px);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.22s, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.hud.show {
  opacity: 1;
  transform: none;
}

.hud .tag {
  font-weight: 600;
  letter-spacing: 0.4px;
}

.hud .sep {
  width: 1px;
  height: 12px;
  background: var(--line-2);
}

.hud .k {
  color: var(--faint);
  font-size: 10.5px;
  margin-right: 3px;
}

.hud .v {
  color: var(--text);
  font-family: var(--mono);
}

.hud .pnl {
  font-weight: 600;
  font-family: var(--mono);
}

/* 终局横幅。压在图左上角——那里平时是持仓 HUD 的位置，
   而结束本局 / 爆仓时仓位已经被平掉，两者不会同时出现。
   纯提示，不接受点击，所以 pointer-events: none，不挡下面的十字光标。 */

.donebanner {
  position: absolute;
  top: 14px;
  left: 16px;
  max-width: min(520px, calc(100% - 32px));
  padding: 11px 15px;
  border-radius: 12px;
  border: 1px solid rgba(227, 178, 92, 0.36);
  background: rgba(10, 14, 20, 0.84);
  backdrop-filter: blur(9px);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.92);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.22s, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 3;
}

.donebanner.show {
  opacity: 1;
  transform: none;
}

.donebanner .db-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #f2d59a;
}

.donebanner .db-days {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2px;
  color: rgba(242, 213, 154, 0.62);
}

.donebanner .db-sub {
  margin-top: 5px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--dim);
}

.donebanner .db-sub b {
  color: #f2d59a;
  font-weight: 600;
}

/* 爆仓收场：整块转红，和结算单里的爆仓横幅一个语言 */
.donebanner.bust {
  border-color: rgba(255, 107, 129, 0.44);
}

.donebanner.bust .db-head,
.donebanner.bust .db-sub b {
  color: #ffc3cb;
}

.donebanner.bust .db-days {
  color: rgba(255, 195, 203, 0.62);
}

/* 提示条 */

.toast {
  position: absolute;
  top: 14px;
  right: 86px;
  padding: 7px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
  opacity: 0;
  transform: translateY(-7px);
  transition: opacity 0.24s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 28px -14px rgba(0, 0, 0, 0.9);
}

.toast.show {
  opacity: 1;
  transform: none;
}

.toast.win {
  color: #9bf3d8;
  background: rgba(46, 211, 160, 0.18);
  border: 1px solid rgba(46, 211, 160, 0.42);
}

.toast.loss {
  color: #ffb3be;
  background: rgba(255, 107, 129, 0.18);
  border: 1px solid rgba(255, 107, 129, 0.42);
}

.toast.warn {
  color: #f2d59a;
  background: rgba(227, 178, 92, 0.16);
  border: 1px solid rgba(227, 178, 92, 0.4);
}

/* 操作条 */

.actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.actions .spacer {
  flex: 1;
}

.actset {
  display: flex;
  gap: 10px;
  align-items: center;
}

.sizer {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
}

.sizer .lead {
  font-size: 10.5px;
  color: var(--faint);
  letter-spacing: 0.8px;
  padding: 0 9px 0 7px;
}

.sizer button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 60px;
  min-height: var(--ctl-h);
  padding: 3px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--dim);
  transition: color 0.18s, background 0.18s, box-shadow 0.18s;
}

.sizer button .r {
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.sizer button .l {
  font-size: 9.5px;
  letter-spacing: 0.3px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.sizer button:hover:not(:disabled) {
  color: var(--text);
}

.sizer button[aria-selected="true"] {
  color: var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.05));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 3px 10px -4px rgba(0, 0, 0, 0.7);
}

.sizer button[aria-selected="true"] .l {
  color: var(--gold);
}

.sizer button:disabled {
  opacity: 0.34;
  cursor: default;
}

.sizer button:disabled .l {
  color: #4a5464;
}

.act {
  display: flex;
  align-items: center;
  gap: 9px;
  /* 高度和档位 chip 对齐（--ctl-h），纵向内边距交给 min-height 撑 ——
     靠 padding 凑出来的高度，改了字号就会跟着漂。 */
  min-height: var(--ctl-h);
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
  font-size: 13px;
  font-weight: 500;
  transition: transform 0.16s, background 0.18s, border-color 0.18s, box-shadow 0.18s;
}

.act:hover:not(:disabled) {
  transform: translateY(-1px);
}

.act:active:not(:disabled) {
  transform: translateY(0);
}

.act:disabled {
  opacity: 0.3;
  cursor: default;
}

.act.hidden {
  display: none;
}

.act.long {
  color: #9df0d6;
  border-color: rgba(46, 211, 160, 0.26);
  background: rgba(46, 211, 160, 0.07);
}

.act.long:hover:not(:disabled) {
  border-color: rgba(46, 211, 160, 0.5);
  background: rgba(46, 211, 160, 0.14);
  box-shadow: 0 10px 26px -12px rgba(46, 211, 160, 0.8);
}

.act.short {
  color: #ffb0bb;
  border-color: rgba(255, 107, 129, 0.26);
  background: rgba(255, 107, 129, 0.07);
}

.act.short:hover:not(:disabled) {
  border-color: rgba(255, 107, 129, 0.5);
  background: rgba(255, 107, 129, 0.14);
  box-shadow: 0 10px 26px -12px rgba(255, 107, 129, 0.8);
}

.act.close {
  color: #f2d59a;
  border-color: rgba(227, 178, 92, 0.3);
  background: rgba(227, 178, 92, 0.09);
}

.act.close:hover:not(:disabled) {
  border-color: rgba(227, 178, 92, 0.55);
  background: rgba(227, 178, 92, 0.16);
  box-shadow: 0 10px 26px -12px rgba(227, 178, 92, 0.8);
}

.act.step,
.act.fast {
  color: var(--dim);
}

.act.step:hover:not(:disabled),
.act.fast:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--line-2);
  background: rgba(255, 255, 255, 0.07);
}

kbd {
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 5px;
  color: var(--dim);
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.11);
}

/* ---------------------------------------------------------------- 侧栏 */

.panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  min-height: 0;
  padding-right: 4px;
  scrollbar-width: thin;
}

.panel::-webkit-scrollbar {
  width: 7px;
}

.panel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}

.card {
  flex: 0 0 auto;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
}

.card h3 {
  margin: 0 0 11px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--faint);
}

.hero {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ring {
  position: relative;
  width: 104px;
  height: 104px;
  flex: 0 0 auto;
}

.ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ring circle {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
}

.ring-bg {
  stroke: rgba(255, 255, 255, 0.07);
}

.ring-fg {
  stroke: url(#ringGrad);
  stroke-dasharray: 326.726;
  stroke-dashoffset: 326.726;
  transition: stroke-dashoffset 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ring-center b {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.8px;
  font-variant-numeric: tabular-nums;
}

.ring-center span {
  margin-top: 3px;
  font-size: 10px;
  letter-spacing: 1.2px;
  color: var(--faint);
}

.hero-figures {
  flex: 1;
  display: grid;
  gap: 9px;
  min-width: 0;
}

.hero-figures > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.hero-figures span {
  font-size: 11px;
  color: var(--faint);
  white-space: nowrap;
}

.hero-figures b {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
}

.up {
  color: var(--up);
}

.down {
  color: var(--down);
}

/* 持仓卡 */

.pos-empty {
  font-size: 11.5px;
  color: #3d4657;
}

.pos-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 11px;
}

.pos-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 7px;
  letter-spacing: 0.4px;
}

.pos-badge.long {
  color: #9df0d6;
  background: rgba(46, 211, 160, 0.14);
  border: 1px solid rgba(46, 211, 160, 0.3);
}

.pos-badge.short {
  color: #ffb0bb;
  background: rgba(255, 107, 129, 0.14);
  border: 1px solid rgba(255, 107, 129, 0.3);
}

.pos-head .lots {
  font-size: 11.5px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.pos-head .spacer {
  flex: 1;
}

.kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 12px;
  font-size: 11.5px;
}

.kv dt {
  color: var(--faint);
}

.kv dd {
  margin: 0;
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--dim);
}

/* 风险：浮亏吃掉占用保证金的两成起标红，六成起脉冲。
   颜色只往「亏」的方向加戏，赚钱的时候一切照旧。 */

#positionCard.risk {
  border-color: rgba(255, 107, 129, 0.42);
  background:
    linear-gradient(180deg, rgba(255, 107, 129, 0.085), rgba(255, 107, 129, 0.015)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
}

#positionCard.risk h3 {
  color: #ffb0bb;
}

#positionCard.risk-hot {
  animation: riskPulse 1.5s ease-in-out infinite;
}

@keyframes riskPulse {
  0%,
  100% {
    border-color: rgba(255, 107, 129, 0.42);
    box-shadow: 0 0 0 0 rgba(255, 107, 129, 0);
  }
  50% {
    border-color: rgba(255, 107, 129, 0.85);
    box-shadow: 0 0 16px 0 rgba(255, 107, 129, 0.24);
  }
}

.kv dd.risknum {
  color: var(--down);
  font-weight: 600;
}

/* 风险条：平时不占地方，亏到警戒线才压上来 */

.riskbar {
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 107, 129, 0.22);
}

.rk-top {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 10.5px;
  color: #ffb0bb;
}

.rk-top b {
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.rk-top em {
  margin-left: auto;
  font-style: normal;
  font-size: 10px;
  color: var(--faint);
}

.rk-track {
  margin-top: 6px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.rk-track i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #ff6b81, #ff3b57);
  transition: width 0.22s ease;
}

/* 图上的持仓条也跟着变红，视线在图上时也能感觉到 */

.hud.risk {
  border-color: rgba(255, 107, 129, 0.45);
}

.hud.risk-hot {
  border-color: rgba(255, 107, 129, 0.8);
  animation: riskPulse 1.5s ease-in-out infinite;
}

.hud .rk {
  font-size: 10.5px;
  color: #ffb0bb;
}

/* 战绩 */

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin-bottom: 12px;
}

.stat-grid .cell span {
  display: block;
  font-size: 10.5px;
  color: var(--faint);
  margin-bottom: 3px;
}

.stat-grid .cell b {
  font-size: 13px;
  font-weight: 600;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.split-row + .split-row {
  margin-top: 11px;
}

.split-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 5px;
  font-size: 11.5px;
}

.split-head .name {
  color: var(--dim);
}

.split-head .num {
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--dim);
}

.split-bar {
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.split-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 权益曲线 */

#equity {
  display: block;
  width: 100%;
  height: 88px;
}

/* 最近成交 */

.trow {
  display: grid;
  grid-template-columns: 50px 26px 30px minmax(0, 1fr) 72px;
  align-items: center;
  gap: 7px;
  padding: 5px 0;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}

.trow:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.trow .tdate {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 10.5px;
}

.trow .tside {
  font-size: 10.5px;
  font-weight: 600;
}

.trow .tlots {
  color: var(--faint);
  font-size: 10px;
  font-family: var(--mono);
}

.trow .tpx {
  color: var(--dim);
  font-family: var(--mono);
  font-size: 10.5px;
  text-align: right;
}

.trow .tpnl {
  text-align: right;
  font-weight: 600;
  font-family: var(--mono);
}

.empty-note {
  font-size: 11.5px;
  color: #3d4657;
  padding: 2px 0;
}

@media (max-width: 1240px) {
  .main {
    grid-template-columns: minmax(0, 1fr) 310px;
  }
  .capital span {
    display: none;
  }
}

/* --------------------------------------------------- v2.2 新增控件与浮层 */

/* 窗口下拉按钮里的「窗口 60 天」。手机上「窗口」两个字会被收掉（见移动端一节），
   只剩「60 天」—— 那个位置旁边就是品种，多两个字就是白占宽度。 */
.pick-btn .lead {
  display: flex;
  align-items: center;
  font-size: 10.5px;
  letter-spacing: 0.5px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* 手数输入框：空着 = 走档位（开仓）或全平（持仓） */
.lots {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  letter-spacing: 0.5px;
  color: var(--faint);
}

/* 宽度按「最宽的占位符」定：终局那个「已结束」量出来 30px，四位手数 24px，
   加左右各 9px 内边距 → 52px 刚好。原来是 62px，是为了塞下「档位 26」那个前缀，
   前缀去掉之后那 10px 就变成右侧一串没用的空白了。 */
.lots input {
  width: 52px;
  /* 和左边的档位 chip 同高 —— 之前它比 chip 矮 7px，
     一行里突然凹下去一块，既不像同一组控件，也把档位的重心抢走了。 */
  height: var(--ctl-h);
  padding: 0 9px;
  text-align: right;
  border-radius: 9px;
  /* 描边给一点蓝：这是全屏唯一能自己敲数字的地方，光靠灰底看不出「可以输入」。
     蓝色和「下一天 / 快进」同色系，跟红色的做多、绿色的做空区分开。
     （iOS 同款：0x6EA8FE / 45%） */
  border: 1px solid rgba(110, 168, 254, 0.45);
  background: rgba(0, 0, 0, 0.34);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.18s;
}

.lots input::placeholder {
  color: rgba(95, 107, 129, 0.8);
}

.lots input:hover {
  border-color: rgba(110, 168, 254, 0.7);
}

.lots input:focus {
  border-color: rgba(110, 168, 254, 0.95);
  outline: none;
}

.lots em {
  font-style: normal;
  color: var(--faint);
}

/* 回到最新 */
.act.live {
  color: var(--gold);
  border-color: rgba(227, 178, 92, 0.3);
  background: rgba(227, 178, 92, 0.09);
}

.act.live:hover:not(:disabled) {
  background: rgba(227, 178, 92, 0.16);
}

/* 均线图例：放在图表上方的信息条里，
   不要浮在图表左上角——那里是持仓 HUD 的位置，两者会叠在一起 */
.strip .legend {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 10.5px;
  font-family: var(--mono);
  color: var(--dim);
  pointer-events: none;
}

.strip .legend span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.strip .legend i {
  width: 11px;
  height: 2px;
  border-radius: 1px;
}

/* 回看中的角标。**可点** —— 手机上动作条那颗「回到最新」被收掉了，
   也没有 Esc，这颗角标就是退出回看的唯一出口（桌面版多一个入口不亏）。
   所以 pointer-events 是 auto 而不是 none：它会盖住图表右上角一小块，
   那块地方本来也不能做别的事。 */
.pannote {
  position: absolute;
  right: 14px;
  top: 12px;
  display: none;
  align-items: center;
  gap: 9px;
  padding: 5px 11px;
  border-radius: 8px;
  font-size: 11px;
  color: var(--gold);
  border: 1px solid rgba(227, 178, 92, 0.28);
  background: rgba(227, 178, 92, 0.1);
  pointer-events: auto;
  z-index: 4;
  transition: background 0.18s, border-color 0.18s;
}

.pannote:hover {
  border-color: rgba(227, 178, 92, 0.55);
  background: rgba(227, 178, 92, 0.18);
}

.pannote.show {
  display: flex;
}

.pannote .hint {
  color: rgba(227, 178, 92, 0.6);
  font-size: 10.5px;
}

canvas#chart {
  cursor: crosshair;
}

canvas#chart.grabbing {
  cursor: grabbing;
}

/* 悬停信息卡 */
.tip {
  position: absolute;
  display: none;
  min-width: 178px;
  padding: 9px 11px;
  border-radius: 11px;
  border: 1px solid var(--line-2);
  background: rgba(13, 17, 24, 0.96);
  box-shadow: 0 16px 38px -14px rgba(0, 0, 0, 0.9);
  font-size: 11.5px;
  pointer-events: none;
  z-index: 5;
  backdrop-filter: blur(8px);
}

.tip.show {
  display: block;
}

.tip-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 7px;
  font-family: var(--mono);
  font-size: 11px;
}

.tip-head .d {
  color: var(--text);
}

.tip-grid {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: 4px 8px;
  align-items: baseline;
}

.tip-grid span {
  color: var(--faint);
  font-size: 10.5px;
}

.tip-grid b {
  font-family: var(--mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.tip-sub {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--line);
  font-size: 10.5px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.tip-sub i {
  display: inline-block;
  width: 8px;
  height: 2px;
  border-radius: 1px;
  margin-right: 3px;
  vertical-align: middle;
}

.tip-entry {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11px;
  color: var(--dim);
}

.tip-entry .k {
  color: var(--faint);
  font-size: 10.5px;
}

.tip-entry b {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--gold);
}

.tip-entry .x {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 10.5px;
}

.tip-entry .side {
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 10px;
}

.tip-entry .side.long {
  color: var(--up);
  background: rgba(46, 211, 160, 0.13);
}

.tip-entry .side.short {
  color: var(--down);
  background: rgba(255, 107, 129, 0.13);
}

@media (max-width: 1240px) {
  .lots span {
    display: none;
  }
}

/* ------------------------------------------- v2.3 滚轮缩放 / 同向加仓 */

/* 顶栏「窗口 N 天」里那个实时数字：滚轮缩放时它一直在变，
   所以做成高亮等宽字，一眼能看出现在缩到了几天 */
.pick-btn .lead b.now {
  display: inline-block;
  min-width: 24px;
  margin: 0 3px;
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}

.pick-btn .lead .wunit {
  color: var(--dim);
}

/* 持仓时仓位条分成「加仓 | 平仓」两组，中间一条竖线隔开 */
.sizer .divider {
  align-self: stretch;
  width: 1px;
  margin: 3px 6px;
  background: var(--line-2);
}

/* 持仓时档位会变成 4 个加仓 + 3 个平仓，窄一点的屏允许换行 */
.sizer,
.actions {
  flex-wrap: wrap;
  row-gap: 8px;
}

/* 加仓次数的小角标 */
.hud .v .adds,
.pos-head .adds {
  margin-left: 5px;
  padding: 0 4px;
  border-radius: 4px;
  font-size: 10px;
  font-family: var(--mono);
  color: var(--gold);
  background: rgba(227, 178, 92, 0.14);
  border: 1px solid rgba(227, 178, 92, 0.28);
}

/* 悬停卡片里可能同时出现「首仓」和「均价」两行 */
.tip-entry {
  flex-wrap: wrap;
}

/* 回看角标和提示条都占右上角，回看时把提示条往下让一格 */
.chartcard.panned .toast {
  top: 54px;
}

/* ------------------------------------- v2.4 结束本局 / 结算单 / 通用化 */

/* 信息条上每一项都不要在中间断行，宁可整项被挤掉 */
.strip .sym,
.strip-mid,
.strip .prompt,
.strip .legend {
  white-space: nowrap;
}

.strip .sym {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

/* 结算单：盖住整页的浮层 */
.report {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(4, 7, 12, 0.66);
  backdrop-filter: blur(5px);
}

.report.show {
  display: flex;
  animation: reportIn 0.22s ease-out;
}

@keyframes reportIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.report-card {
  width: min(560px, 100%);
  max-height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, #141a24, #0e131b);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.95);
  transform: translateY(-8px);
  animation: reportCard 0.24s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes reportCard {
  to {
    transform: none;
  }
}

.report-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px 0;
}

.report-head h2 {
  flex: 1;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.6px;
}

.report-body {
  padding: 2px 20px 2px;
}

/* 结算单顶部的总收益 */
.rsum {
  margin: 10px 0 11px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.028);
}

.rbig {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.rbig b {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.4px;
}

.rbig span {
  font-size: 14px;
}

.rrange {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 7px;
  font-size: 11px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* 明细表挪到「结论 + 格言」之后，所以要自己带一点上边距 */
.rgrid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--line);
}

.rcell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 12px;
  background: #111721;
}

.rcell span {
  font-size: 10.5px;
  color: var(--faint);
  letter-spacing: 0.3px;
}

.rcell b {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.rcell b.up {
  color: var(--up);
}

.rcell b.down {
  color: var(--down);
}

.rsides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 11px;
}

.rsides > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.022);
}

.rsides .k {
  font-size: 10.5px;
  color: var(--faint);
}

.rsides .v {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

/* 结论块现在紧跟在顶部数字 / 爆仓横幅后面，上面那两个自带下边距，
   这里再留 10px 就变成 20px 的缝，所以外边距归零。 */
.rverdict {
  margin: 0;
  padding: 10px 13px;
  border-radius: 11px;
  border: 1px solid rgba(227, 178, 92, 0.24);
  background: rgba(227, 178, 92, 0.07);
  font-size: 11.5px;
  line-height: 1.7;
  color: #d9c49a;
}

/* 结算单底部的格言。上面那一段是事实（行情走了多少、你做出多少），
   下面是别人说过的话 —— 用一道竖线把两种东西分开，免得读成同一段。
   figure 自带 40px 的左右外边距，这里必须整个 margin 重写。 */
.rquote {
  margin: 9px 0 0;
  padding: 2px 0 2px 12px;
  border-left: 2px solid rgba(227, 178, 92, 0.34);
}

.rquote .rq-text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.72;
  color: #e4d5b6;
}

.rquote .rq-src {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 5px 0 0;
  font-size: 10.5px;
  color: var(--faint);
}

/* 英文原文塞在 title 里，鼠标停上去才出。得给个看得见的标记，
   否则没人知道这里还能悬停。 */
.rquote .rq-en {
  padding: 0 5px;
  border-radius: 5px;
  border: 1px solid var(--line-2);
  font-size: 9.5px;
  line-height: 15px;
  color: var(--dim);
  cursor: help;
  user-select: none;
}

/* 强平收场时的横幅，摆在顶部数字下面，先于所有统计被读到 */

.rbust {
  margin: 0 0 9px;
  padding: 8px 11px;
  border-radius: 11px;
  border: 1px solid rgba(255, 107, 129, 0.36);
  background: rgba(255, 107, 129, 0.11);
  font-size: 11.5px;
  line-height: 1.65;
  color: #ffc3cb;
}

/* 窗口矮的时候卡片内部会滚动，底部动作条要粘住，不然「再来一局」被裁掉 */
.report-foot {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px 13px;
  background: linear-gradient(180deg, rgba(14, 19, 27, 0), #0e131b 34%);
}

.report-foot .spacer {
  flex: 1;
}

.act.again {
  color: #06121a;
  border-color: transparent;
  background: linear-gradient(180deg, #7ff0cb, #2ed3a0);
  font-weight: 600;
}

.act.again:hover {
  background: linear-gradient(180deg, #96f5d6, #3adfab);
}

/* 历史战绩。复用结算单的浮层骨架，卡片放宽一点 —— 明细里要摆完整日期。 */

.report.hist .report-card {
  width: min(620px, 100%);
}

.hcount {
  font-size: 10.5px;
  color: var(--faint);
}

.hempty {
  padding: 22px 4px 26px;
  text-align: center;
  font-size: 11.5px;
  line-height: 2;
  color: var(--dim);
}

.hempty .hdim {
  font-size: 10.5px;
  color: var(--faint);
}

.hlist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hitem {
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.022);
  overflow: hidden;
}

.hitem.open {
  border-color: var(--line-2);
  background: rgba(255, 255, 255, 0.035);
}

.hrow {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 10px 13px 8px;
  border: 0;
  background: none;
  text-align: left;
}

.hrow:hover {
  background: rgba(255, 255, 255, 0.03);
}

.hrow b {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.hrow .hp {
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.hrow .spacer {
  flex: 1;
}

.hrow .hd {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--faint);
  white-space: nowrap;
}

.hflag {
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.hflag.bust {
  color: #ffb0bb;
  background: rgba(255, 107, 129, 0.16);
  border: 1px solid rgba(255, 107, 129, 0.34);
}

.hflag.open {
  color: #d9c49a;
  background: rgba(227, 178, 92, 0.12);
  border: 1px solid rgba(227, 178, 92, 0.28);
}

/* 「这一局练的是什么形态」。和上面两个不同：它不是状态标记，
   而是**这一局的出处**，所以用蓝色（和「切换为」那个值同一档），
   和「爆仓 / 未结算」在颜色上分开。 */
.hflag.pat {
  color: #a9c8f5;
  background: rgba(110, 168, 254, 0.13);
  border: 1px solid rgba(110, 168, 254, 0.3);
}

.hmeta {
  padding: 0 13px 10px;
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--faint);
}

/* 明细默认收起，点行头才展开 —— 一屏能多看几局 */

.hdet {
  display: none;
  padding: 0 13px 12px;
  border-top: 1px dashed var(--line);
}

/* ------------------------------------- v2.13.1 分享战绩卡（Web 专属） */

/* 浏览器有 Canvas，战绩卡是**画**出来的（不是 DOM 排版），
   所以这里只负责把那张 canvas 摆进浮层里 —— 卡片内容本身归 app.js 的
   buildShareCard() 管，改样式别在这儿找。
   卡片比结算单窄：里面只有一个固定比例的预览，560px 会显得空。 */
.report.sharecard .report-card {
  width: min(420px, 100%);
}

.share-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  overflow: auto;
}

.share-preview canvas {
  display: block;
  width: min(360px, 100%);
  height: auto;
  border-radius: 16px;
  box-shadow: 0 24px 56px -24px rgba(0, 0, 0, 0.9);
}

.hitem.open .hdet {
  display: block;
}

.hkv {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: 4px 10px;
  margin: 10px 0 0;
  font-size: 11px;
}

.hkv dt {
  color: var(--faint);
}

.hkv dd {
  margin: 0;
  padding-right: 12px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--dim);
}

.htrades {
  margin-top: 10px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.045);
}

/* 历史里要写完整日期，列宽跟着放宽、字号缩一点 */

.hist .trow {
  grid-template-columns: 62px 24px 28px minmax(0, 1fr) 70px;
  gap: 6px;
}

.hist .trow .tdate {
  font-size: 9.5px;
}

/* 清空历史是不可逆的，先变红、再要一次确认 */

.ghost.danger:hover {
  color: #ffb0bb;
  border-color: rgba(255, 107, 129, 0.4);
  background: rgba(255, 107, 129, 0.1);
}

.ghost.arm {
  color: #ffb0bb;
  border-color: rgba(255, 107, 129, 0.55);
  background: rgba(255, 107, 129, 0.14);
}

@media (max-width: 560px) {
  .rgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rsides {
    grid-template-columns: 1fr;
  }
  .hkv {
    grid-template-columns: auto 1fr;
  }
}

/* ---------------------------------------------------------------- 确认卡 */

/* 下单 / 平仓 / 结束本局都不可逆，执行前先过这一层。
   卡片比结算单窄、居中 —— 要看的东西只有五六行数字，摊开反而找不到重点。 */
.confirm {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(4, 7, 12, 0.62);
  backdrop-filter: blur(4px);
}

.confirm.show {
  display: flex;
  animation: reportIn 0.16s ease-out;
}

.confirm-card {
  width: min(360px, 100%);
  border-radius: 16px;
  border: 1px solid var(--line-2);
  background: #10151f;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

/* 头部整条用动作色，一眼分清是做多、做空、平仓还是收局 */
.confirm-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  font-size: 14px;
  border-bottom: 1px solid var(--line);
}

.confirm-head .cf-icon {
  font-size: 13px;
  line-height: 1;
}

.confirm-head .cf-lots {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text);
}

.confirm-card.tint-long .confirm-head { color: var(--up); }
.confirm-card.tint-short .confirm-head { color: var(--down); }
.confirm-card.tint-gold .confirm-head { color: var(--gold); }
.confirm-card.tint-neutral .confirm-head { color: var(--dim); }

.confirm-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
}

/* 预计盈亏顶在最上面：按确认键之前真正想先知道的就是这个数 */
.cf-pnl {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: var(--dim);
}

.cf-pnl b {
  font-family: var(--mono);
  font-size: 17px;
}

.cf-pnl b.up { color: var(--up); }
.cf-pnl b.down { color: var(--down); }

.cf-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--dim);
}

.cf-row b {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* 占用 / 释放保证金 → 金色：这笔钱是被锁住的，既不是花掉、也不是还能动用，
   必须和下面「剩下的钱」在颜色上拉开，否则两行金额看着一样重。 */
.cf-row b.amber { color: var(--gold); }

/* 下单后可用资金 / 平仓后权益 → 蓝色：这才是真正还能用的钱，
   是整张卡里最该先看一眼的数字。 */
.cf-row b.blue { color: var(--blue); }

.cf-row b.dim { color: var(--faint); }

.cf-warn {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(227, 178, 92, 0.9);
}

.confirm-foot {
  display: flex;
  gap: 10px;
  padding: 0 14px 14px;
}

.confirm-foot .ghost,
.confirm-foot .cf-ok {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  font-size: 13px;
}

.confirm-card.tint-long .cf-ok {
  color: var(--up);
  border-color: rgba(46, 211, 160, 0.55);
  background: rgba(46, 211, 160, 0.16);
}

.confirm-card.tint-short .cf-ok {
  color: var(--down);
  border-color: rgba(255, 107, 129, 0.55);
  background: rgba(255, 107, 129, 0.16);
}

.confirm-card.tint-gold .cf-ok {
  color: var(--gold);
  border-color: rgba(227, 178, 92, 0.55);
  background: rgba(227, 178, 92, 0.16);
}

.confirm-card.tint-neutral .cf-ok {
  color: var(--dim);
  border-color: rgba(151, 163, 182, 0.5);
  background: rgba(151, 163, 182, 0.14);
}

/* 平仓卡头部：手数输入框 + 比例快捷按钮组。
   两者是同一件事的两种入口（输入 vs 快捷档位），所以并排一行；
   拆两行会让人以为是两组无关的控件。 */
.cf-lotsbox {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  height: 26px;
  padding: 0 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.34);
  /* 蓝描边沿用外面那个手数框的约定 —— 全屏凡是能自己敲数字的地方都给一点蓝 */
  border: 1px solid rgba(110, 168, 254, 0.55);
  color: var(--text);
}

/* 输入无效：描边转红。确认按钮这时也是禁用的，绝不让「没解析出来」变成一次全平。 */
.cf-lotsbox.invalid {
  border-color: rgba(255, 107, 129, 0.7);
}

.cf-lotsbox input {
  width: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  text-align: right;
  outline: none;
}

.cf-lotsbox input::placeholder {
  color: rgba(95, 107, 129, 0.8);
}

.cf-lotsbox em {
  font-style: normal;
  font-size: 11px;
  color: var(--faint);
}

.cf-pct {
  display: flex;
  flex: 1;
  gap: 4px;
  margin-left: 6px;
}

.cf-pct button {
  flex: 1;
  min-height: 26px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--dim);
  font-size: 11px;
  font-weight: 600;
  transition: 0.18s;
}

.cf-pct button:hover {
  color: var(--text);
  border-color: var(--line-2);
}

/* 「全平」是最不可逆的一档，给一点 down 色提示 */
.cf-pct button.all {
  color: var(--down);
  border-color: rgba(255, 107, 129, 0.4);
  background: rgba(255, 107, 129, 0.13);
}

.cf-note {
  font-size: 11px;
  color: var(--faint);
}

.cf-invalid {
  font-size: 11.5px;
  color: var(--down);
}

.confirm-foot .cf-ok:disabled {
  opacity: 0.5;
  cursor: default;
}

/* =========================================== v2.13 顶栏下拉 / 图内信息 / 关于 */

/* 齿轮按钮：只有图标，横向内边距收到最小，别让一个图标撑出一个按钮的宽度 */
.pick-btn.icon {
  padding: 0 8px;
  color: var(--dim);
}

.pick-btn.icon:hover {
  color: var(--text);
}

.pick-btn.icon svg {
  display: block;
}

/* 齿轮菜单**只在手机上出现** —— 桌面版顶栏放得下「重开一局 / 历史」那两颗按钮，
   没必要再套一层菜单。用 display:none 而不是 visibility:hidden：
   它里面会被塞进「初始资金」输入框，隐藏的输入框不该留在 Tab 顺序里。 */
.pick-gear {
  display: none;
}

/* 单列菜单行。原来的 .pick-row 是「左边名字 + 右边数字」的两列网格，
   窗口预设和齿轮菜单都只有一行文字，套那个网格会平白多出一列空白。 */
.pick-row.flat {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
}

.pick-row .gr-name {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text);
  white-space: nowrap;
}

.pick-row[aria-selected="true"] .gr-name {
  color: #f2d59a;
}

/* 窗口预设下拉：宽度按内容走 */
.win-panel {
  min-width: 132px;
}

/* 齿轮下拉挂在顶栏最右，所以必须**右对齐**（.pick-panel 默认 left:0），
   否则 390px 上它会从按钮位置往右长、直接顶出屏幕。 */
.gear-panel {
  left: auto;
  right: 0;
  min-width: 188px;
  transform-origin: top right;
}

  /* 齿轮菜单里「初始资金」那一格。空的就整格收掉，不留一条缝 */
.gear-cap {
  padding: 6px 6px 2px;
}

.gear-cap:empty {
  display: none;
}

.gear-cap .capital {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 0 4px;
}

/* 桌面版 ≤1240px 把「初始资金」四个字藏了（顶栏没地方），
   菜单里地方是够的，放回来 —— 一个孤零零的输入框没人知道填的是什么。
   nowrap 是必须的：菜单宽 196px，不给它撑住就会被挤成「初始 / 资金」两行。 */
.gear-cap .capital span {
  display: inline;
  white-space: nowrap;
}

.gear-cap .capital input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  text-align: right;
}

/* 图内信息行（左上均线图例带数值 / 右上日期收盘涨跌）。
   桌面版信息条里已经有这些，这里不显示 —— 显示就是同一份数据写两遍。 */
.charthead {
  display: none;
}

/* 持仓卡头部那行权益。桌面版用的是上面那张「收益环」大卡，这里不显示。 */
.equityhead {
  display: none;
}

/* 「关于」浮层内容 */
.ab-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 14px;
}

.ab-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 11px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
}

.ab-cell span {
  font-size: 10.5px;
  letter-spacing: 0.5px;
  color: var(--faint);
}

.ab-cell b {
  font-family: var(--mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}

.ab-note {
  font-size: 12px;
  line-height: 1.75;
  color: var(--dim);
  padding-bottom: 4px;
}

.ab-note p {
  margin: 0 0 9px;
}

.ab-note p:last-child {
  margin-bottom: 0;
}

.ab-note b {
  color: var(--text);
  font-weight: 600;
}

.ab-warn {
  font-size: 11.5px;
  color: var(--faint);
}

/* ================================================================ 移动端 */
/*
 * 窄屏（≤900px）**整块换成 iOS 竖屏那套结构**，不是把桌面版压扁。
 *
 * 桌面版的骨架是「100vh 锁死不滚动 + 主区两栏（图表 / 344px 独立滚动的信息栏）」。
 * 这个骨架在手机上不成立，而且是**结构**层面的不成立，不是字号问题：
 *
 *   1. 信息栏固定 344px，390px 的屏上留给图表的只剩几十像素 —— 图上会直接
 *      压着「当前持仓 / 权益曲线」那些卡片，看着像画坏了；
 *   2. body 锁了 overflow:hidden，于是**够不着的内容永远够不着**，
 *      不是「要滑一下」，是压根没有入口。
 *
 * iOS 竖屏（RootView.swift 的 portraitLayout）的做法是：
 *   顶栏一行（品种 ▾ / 窗口 ▾ / 结束本局 / 齿轮）
 *   → 图表（约 48% 屏高）
 *   → 动作区（档位 + 手数一行，五个按钮一行）
 *   → 信息卡（持仓 / 权益曲线 / 战绩）
 * 而且它**没有信息条那一行**（2026-09-17 删的），因为三样东西各有更好的去处：
 *   持仓手数 → 持仓卡；权益 → 持仓卡头部；均线图例 → 图表左上角。
 * 这里逐条照做，只是把「日期 / 收盘 / 涨跌」也塞进图内右上角 ——
 * iOS 靠价格轴和十字线表达，web 的坐标轴没那么细，留个读数更稳。
 *
 * 断点取 900px —— 再宽一点图表还能有个 500px 上下，两栏就还撑得住。
 */

@media (max-width: 900px) {
  /* 页面恢复滚动。只放纵向，横向仍然锁死，免得任何一处算错宽度就整页左右晃 */
  body {
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* 高度从「铺满视口」改成「内容多高就多高」 */
  .app {
    height: auto;
    min-height: 100vh;
    grid-template-rows: auto auto;
  }

  /* ---- 顶栏：一行，和 iOS 的 topBar 一一对应 ----
     品牌去掉（iOS 顶栏没有 logo，页面标题在浏览器标签上已经有了），
     「重开一局 / 历史」收进齿轮菜单，「初始资金」也搬进去（DOM 由 JS 搬）。
     留下的正好是 iOS 那四件：品种 ▾ / 窗口 ▾ / 结束本局 / 齿轮。
     那个 spacer 留着 —— 它把后两件顶到右边，和 iOS 的 Spacer(minLength: 4) 同效。 */
  .topbar {
    position: relative;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 8px 12px;
  }

  .brand,
  #btnReset,
  #btnHist {
    display: none;
  }

  .pick-gear {
    display: block;
  }

  /* 品种和窗口是「看什么」，允许被压缩（品种名会省略号），
     结束本局和齿轮是「做什么」，宽度固定不给挤。 */
  .topbar .pick {
    flex: 0 1 auto;
    min-width: 0;
  }

  .topbar .ghost {
    flex: 0 0 auto;
  }

  .pick-btn {
    min-width: 0;
  }

  .pick-btn .pk-name {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 主区：一栏 */
  .main {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px 14px 22px;
    gap: 12px;
  }

  /* grid item 默认 min-width:auto —— 会被里面 white-space:nowrap 的内容
     撑破。上面那句 minmax(0,1fr) 只管轨道，管不住 item 自己：
     信息条实测把整列顶到 623px，于是动作网格跟着变成 3×202px 被切掉。 */
  .main > * {
    min-width: 0;
  }

  /* ---- 信息条整行收掉（iOS 2026-09-17 就是这么删的）----
     四样东西全都有更好的去处，留着它只是白占一行高度：
       · 标的名   → 顶栏那个品种 chip 上就是它
       · 均线图例 → 图内左上角，而且**带上数值**（见 .clegend）
       · 日期/收盘/涨跌 → 图内右上角（见 .cright）
       · 状态胶囊 → 持仓天数在持仓卡里、终局有图上横幅、回看有角标 */
  .strip {
    display: none;
  }

  /* 品种下拉：不再挂在那个窄 chip 上。它写死 min-width:264px，而 chip 本身
     在 360px 屏上已经靠到 x≈130，展开必然顶出屏幕右侧。
     改成挂在整条顶栏上、左右各留 12px，宽度跟着屏幕走。 */
  .topbar {
    position: relative;
  }

  #symbolSeg {
    position: static;
  }

  #symbolPickPanel {
    left: 12px;
    right: 12px;
    min-width: 0;
    width: auto;
    max-height: 52vh;
  }

  /* 窗口那四个短选项铺满整行太宽，挂回它自己那个 chip 上、靠左展开；
     齿轮在顶栏最右，必须右对齐，否则 390px 上会从按钮往右长出屏幕。 */
  .pick-win,
  .pick-per,
  .pick-pat,
  .pick-gear {
    position: relative;
  }

  .win-panel {
    left: 0;
    right: auto;
    width: 152px;
  }

  .gear-panel {
    left: auto;
    right: 0;
    width: 196px;
  }

  /* 两行：信息条收掉之后只剩「图表 / 动作区」 */
  .col-left {
    grid-template-rows: auto auto;
  }

  /* 图表高度。**必须给死高度** —— 页面能滚之后 `1fr` 就没有参照物了，
     而 canvas 的尺寸是从父元素量出来的（app.js 的 resize()），
     父元素没高度就什么都画不出来。
     比例照 iOS：max(240, 屏高 × 48%)；上限 430 是留给 768~900px 的宽屏 ——
     那会儿 48vh 能到 430 以上，图占满首屏反而看不到下面的卡片。 */
  .chartcard {
    height: clamp(240px, 46vh, 430px);
  }

  /* ---- 图内信息行 ----
     左上角均线图例（带数值），右上角当前那天的日期 / 收盘 / 涨跌。
     两者都压在 K 线上：图例靠文字阴影就够（它那一侧没有价格轴标签），
     右上角那块会和价格轴最上面一个标签撞上，所以给它垫一层半透明底。 */
  .charthead {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 10px 0;
    pointer-events: none;
  }

  .clegend {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    /* 和右边那个胶囊对齐：胶囊自带 2px 纵向内边距，这里补上同样的 */
    padding: 2px 0;
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--dim);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.78);
  }

  .clegend span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
  }

  .clegend i {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }

  .clegend b {
    color: var(--text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  .cright {
    margin-left: auto;
    min-width: 0;
    padding: 2px 7px;
    border-radius: 7px;
    background: rgba(8, 11, 17, 0.62);
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--dim);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.78);
  }

  /* 回看胶囊压在图内第一行，所以要把图例和日期往下让一格 ——
     iOS 的 overlay 也是这个顺序（胶囊在上、图例在下，间距 8）。
     `.panned` 是 renderPanNote() 打在 .chartcard 上的。 */
  .chartcard.panned .charthead {
    padding-top: 39px;
  }

  /* 持仓 HUD 本来也在左上角（top:14px），会和图例叠在一起，往下让一格 */
  .hud {
    top: 36px;
  }

  .chartcard.panned .hud {
    top: 68px;
  }

  /* 信息栏不再自己滚（里面套一层滚动条，外面还滚，手指会打架），跟着页面走 */
  .panel {
    overflow: visible;
    padding-right: 0;
  }

  /* ---- 收益环大卡整张收掉 ----
     环只是把「总收益」这个百分数画成一个圈，窄屏上占掉整整一行却只传达一个数。
     权益并进持仓卡头部（.equityhead）—— 「我有多少钱」和「我押着什么」
     本来就该挨着看，iOS 也是这么并的。 */
  .card.hero {
    display: none;
  }

  .equityhead {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding-bottom: 11px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--line);
  }

  .equityhead .eh-k {
    font-size: 10.5px;
    letter-spacing: 0.8px;
    color: var(--faint);
  }

  .equityhead .eh-v {
    font-family: var(--mono);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.2px;
    font-variant-numeric: tabular-nums;
  }

  .equityhead .eh-p {
    font-family: var(--mono);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid currentColor;
    opacity: 0.85;
  }

  /* 空的时候「战绩」和「最近成交」并成一张 —— 两行「还没有…」堆在一起，
     看着像页面没加载完。`.collapse` 由 renderPanel() 按 closed.length 打上，
     桌面版不受影响（这条规则只在这个媒体查询里）。 */
  .card.collapse {
    display: none;
  }

  /* ---- 动作区：档位 + 手数一行，动作按钮一行（iOS 的 ActionBar）----
     不包 div、也不用 grid：`.actset` 的 flex-basis 写 100% 就等于「另起一行」，
     前面两件自然留在第一行。少一层 DOM，也就少一处会对不齐的地方。 */
  .actions {
    flex-wrap: wrap;
    gap: 8px;
  }

  .actions .spacer {
    display: none;
  }

  .sizer {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* 四个档位平分档位条剩下的宽度（iOS 的 frame(maxWidth: .infinity)） */
  .sizer button {
    flex: 1 1 0;
    min-width: 0;
    padding: 3px 5px;
  }

  .sizer .lead {
    padding: 0 5px 0 4px;
    font-size: 10px;
    letter-spacing: 0.4px;
  }

  .sizer button .l {
    font-size: 9px;
  }

  .lots {
    flex: 0 0 auto;
  }

  /* 手数框在窄屏要能缩，不然 360px 上档位条会被它挤扁 */
  .lots input {
    width: 54px;
  }

  /* 动作按钮另起一行 */
  .actset {
    flex: 1 0 100%;
    display: flex;
    align-items: stretch;
    gap: 8px;
  }

  /* 图标在上、文字在下（iOS 竖屏的 stacked 模式）。一行五个按钮时
     横着并排塞不下「↑ 做多」这种两件套，竖着叠反而更宽裕。 */
  .act {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 5px 3px;
    font-size: 11.5px;
  }

  .act span {
    white-space: nowrap;
  }

  /* 手机上「回到最新」这颗收掉 —— 图上的回看角标就是它（见 .pannote）。
     剩下的正好是 iOS 那一行：做多 / 做空 / 平仓 / 下一天 / 快进 20。 */
  .actions .act.live {
    display: none;
  }

  /* 图上那枚持仓胶囊（多头 13 手 · 均 · 现 · 浮动盈亏）一行放不下，
     允许换行；宽度也留出左右各 16px，别顶到卡片边 */
  .hud {
    flex-wrap: wrap;
    row-gap: 3px;
    max-width: calc(100% - 32px);
  }

  /* 回看胶囊：挪到图表正中、做成 iOS 那种圆角胶囊。
     它是「回到最新」的按钮，摆在视觉中心比塞在角落更像一个能按的东西。
     「交易已暂停」那句提示在窄屏是多余的（按钮已经写着「回到最新」），收掉。 */
  .pannote {
    left: 50%;
    right: auto;
    top: 10px;
    transform: translateX(-50%);
    max-width: calc(100% - 24px);
    padding: 6px 13px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    color: #f2d59a;
    background: rgba(13, 17, 23, 0.86);
    border-color: rgba(227, 178, 92, 0.4);
  }

  .pannote .hint {
    display: none;
  }

  /* 弹层在窄屏少留点边距，把宽度让给内容 */
  .report,
  .confirm {
    padding: 12px;
  }

  .report-card,
  .confirm-card {
    max-height: calc(100vh - 24px);
  }
}

/* 手机（≤560px）再收一档。到这一步顶栏是「品种 ▾ / 窗口 ▾ / 结束本局 / 齿轮」
   四件东西挤一行，宽度全靠前两件让。 */
@media (max-width: 560px) {
  .topbar {
    gap: 6px;
    padding: 8px 10px;
  }

  /* 品种名后面那个代码（「沪金 AU0」里的 AU0）在这里是纯冗余：
     短名本身已经够区分，而顶栏 360px 上每一像素都要省。
     名字本身也允许省略号 —— 320px 上真的会不够。 */
  .pick-btn .pk-code {
    display: none;
  }

  /* 「窗口」两个字收掉，只留「60 天」—— 旁边就是品种 chip，谁都知道那是什么 */
  .pick-btn .wlab,
  .pick-btn .plab {
    display: none;
  }

  /* 「结束本局」是顶栏里唯一的主动作，内边距收一档让它别把齿轮挤出去 */
  .topbar .ghost {
    padding: 0 10px;
    font-size: 11.5px;
  }

  /* 动作按钮：360px 上五等分每格只有 ~62px，「快进 20」配着 kbd 会折行。
     字号收一档就装得下了（窄窗口的桌面浏览器仍保留 kbd 提示，
     所以这里不能靠 `pointer: coarse` 那条去解决）。 */
  .act {
    font-size: 11px;
    padding: 5px 2px;
  }

  .act kbd {
    font-size: 9.5px;
    padding: 2px 4px;
  }

  /* 档位条再收一档：「不足 1 手」是四个按钮里最宽的一个，9px 下也要 ~45px。
     「仓位 / 加仓」两个字留着 —— 它决定这排按钮算的是「能开多少」还是
     「能加多少」，两个口径下的数字完全不是一回事（加仓按可用资金算）。 */
  .sizer .lead {
    padding: 0 4px 0 3px;
    font-size: 9.5px;
    letter-spacing: 0.2px;
  }

  .sizer button {
    padding: 3px 3px;
  }

  .sizer button .r {
    font-size: 11.5px;
  }

  /* 图内信息行也各收一档。390px 上本来就是刚好放下，
     360px 上再各让半个字号，涨跌幅才不会先被省略号吃掉。 */
  .clegend {
    gap: 8px;
    font-size: 10px;
  }

  .cright {
    font-size: 10px;
  }

  .lots {
    font-size: 11px;
    gap: 5px;
  }

  /* 「手数」两个字在 ≤1240px 被桌面版藏了（顶栏没地方）。
     这里它单独占着动作区的右端，地方够，放回来比一个孤零零的输入框清楚。 */
  .lots span {
    display: inline;
  }

  .lots input {
    width: 48px;
  }

  /* 关于页两列在 360px 上每列只剩 ~150px，「数据区间」那种值会被折成两行 */
  .ab-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * 触屏专属（不按宽度判，按「有没有鼠标」判）。
 * 窄窗口的桌面浏览器仍然有键盘，键盘提示该留着；
 * 手机上那些 ↑ ↓ ⏎ → ⇥ esc 是纯噪音 —— 一个都按不了。
 */
@media (hover: none) and (pointer: coarse) {
  :root {
    /* 手指的命中区比鼠标大：控件统一抬到 44px（Apple HIG 的最小建议值）。
       改这两个变量，顶栏 / 档位 / 手数框 / 动作按钮会一起跟着长，
       不用逐个去补 min-height。 */
    --ctl-h: 44px;
    --ctl-h-sm: 40px;
  }

  .act kbd {
    display: none;
  }

  /* 图表上的手势分工：**纵向留给页面滚动，横向由脚本接管做平移**。
     写 `pan-y` 而不是 `none` 是刻意的 —— 写 none 的话手指在图上上下滑
     就再也翻不动页面了，而图占了首屏一大半，等于把页面锁死。
     双指捏合不在 pan-y 的允许列表里，所以缩放手势会原样送到脚本手上。 */
  #chart {
    touch-action: pan-y;
  }
}


/* ---------------------------------------------------------------- 加载态 */

/* 盖在图表上。旧周期的图压暗但保留 —— 比空屏好，用户能看出是「在换数据」，
   而不是「点坏了」。 */
.loading {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: rgba(8, 11, 17, 0.66);
}

.loading.show {
  display: flex;
  animation: loadingIn 0.18s ease-out;
}

@keyframes loadingIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 五根小蜡烛按波次起伏 —— 就是 K 线本身，比转圈更贴这个应用。
   金色单色，不用涨绿跌红：那两色在这套界面里是「涨/跌」的语义，
   拿来当装饰会让人以为在暗示方向。 */
.candles {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
}

.candles i {
  position: relative;
  display: block;
  width: 4px;
  height: 100%;
  border-radius: 2px;
  background: var(--gold);
  transform-origin: center;
  animation: candle 1.1s ease-in-out infinite;
}

/* 上下各探出一小截，做出「影线」—— 只有实体的话像柱状图，不像 K 线 */
.candles i::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -5px;
  bottom: -5px;
  width: 1px;
  margin-left: -0.5px;
  border-radius: 1px;
  background: var(--gold);
  opacity: 0.55;
}

/* 每根错开 0.1s，整体像一道从左往右扫过的波 */
.candles i:nth-child(1) { animation-delay: 0s; }
.candles i:nth-child(2) { animation-delay: 0.1s; }
.candles i:nth-child(3) { animation-delay: 0.2s; }
.candles i:nth-child(4) { animation-delay: 0.3s; }
.candles i:nth-child(5) { animation-delay: 0.4s; }

@keyframes candle {
  0%, 100% {
    transform: scaleY(0.34);
    opacity: 0.4;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}

/* 尊重系统的「减少动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
  .candles i {
    animation-duration: 2.2s;
  }
}

/* 加载中不让再点周期按钮 —— 否则连点几下会同时发起好几个几十 MB 的请求 */
.periods.busy button {
  pointer-events: none;
  opacity: 0.45;
}


/* ------------------------------------- v2.16.0 中英切换 */

/* 语言切换器。桌面在顶栏（「形态」右边），手机上整块搬进齿轮菜单 ——
   390px 顶栏已经排到第 7 格，再塞一个必然换行（见 app.js 的 syncLangSlot）。
   两个按钮的文字**刻意不翻译**：语言名永远用它自己的语言写。 */
.lang {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
}

.lang button {
  /* 和顶栏其它控件（--ctl-h-sm）同高：内层控件减掉外层 3px padding × 2 与 1px 边框 × 2 */
  min-height: calc(var(--ctl-h-sm) - 8px);
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--dim);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  transition: color 0.18s, background 0.18s;
}

.lang button:hover {
  color: var(--text);
}

/* 选中态用 aria-pressed，和「档位 chip」同一套高光 */
.lang button[aria-pressed="true"] {
  color: var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.05));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 3px 10px -4px rgba(0, 0, 0, 0.7);
}

/* 齿轮菜单里那一格。搬进来之后要占满一行、居中，和上面的「初始资金」对齐。 */
.gear-lang {
  padding: 6px 6px 2px;
}

/* 语言控件搬走之后这一格是空的，别留一道 6px 的空隙 */
.gear-lang:empty {
  display: none;
}

.gear-lang .lang {
  width: 100%;
  justify-content: center;
  padding: 2px;
  border: 0;
  background: transparent;
}

.gear-lang .lang button {
  flex: 1 1 0;
  min-height: var(--ctl-h-sm);
}