/* css/app.css
 * 默认 glass：圆角玻璃与柔光；html[data-style="geometric"]：几何硬边；
 * html[data-style="terminal"]：Developer Terminal，明暗自适应、等宽字符与纯色细边。
 * 各风格支持浅色、深色与跟随系统，共享布局与移动安全区。
 * 金融语义保持上涨红、下跌绿；资产分类色独立于涨跌色。
 * 默认中文使用系统 UI 字体；终端使用 mono 字体栈，金额/净值保持 tabular 数字。
 */

:root {
  /* 告诉浏览器「深色我自己会处理」，不这么做 Android Chrome 的强制深色
     会把白卡反相、文字仍是深色，出现「黑底黑字」。这行比后面的变量更关键。 */
  color-scheme: light;

  /* 表面层级：底 → 卡 → 卡内嵌层，逐级提亮，避免同色叠同色糊成一片 */
  --bg: #eef0f5;
  --card: #ffffff;
  --card-2: #f4f4f6;
  --fill: #eef0f4;         /* chip / 分段控件未选中底色 */
  --ink: #141418;          /* 主色：近黑，同时是主按钮 / hero 底色 */
  --ink-invert: #ffffff;   /* 主按钮文字色 */
  --text: #141418;
  --text-2: #61616a;       /* 次要文字 */
  --text-3: #97979f;
  --sep: rgba(20, 20, 28, 0.075);
  --up: #d8382c;
  --down: #14803f;
  --asset-cash: #5b8def;
  --asset-deposit: #8b78c6;
  --asset-fund: #529eab;
  --asset-gold: #c99a46;

  /* iOS 26（Liquid Glass）圆角：半径整体放大一档，配合下方 .card / .hero 上的
     corner-shape: squircle 做「连续曲率」——圆角不再是圆的一段弧，
     而是从直边平滑过渡的超椭圆，跟系统卡片一个手感。
     xl 给整屏面板，lg 给卡片与 hero，md 给卡内嵌块（输入框 / 分段控件底座）。 */
  --radius-xl: 32px;
  --radius-lg: 26px;
  --radius-md: 18px;

  /* 玻璃拟态：卡片从「贴上去的白色矩形」变成「一层薄玻璃」。
     - 半透明底 + backdrop-filter 让背景光斑透上来，浅色也有深色那种通透感
     - 1px 亮边（内白边）是玻璃的关键，没有它半透明看起来只是「发灰」
     - 阴影分两层：贴地 1px 定边界，大扩散定高度 */
  --glass-bg: rgba(255, 255, 255, 0.66);
  --glass-brd: rgba(255, 255, 255, 0.9);
  --glass-strong: rgba(252, 252, 254, 0.9);   /* 弹层：比卡片实一点，压住背后的内容 */
  --seg-on: #ffffff;
  --focus-ring: rgba(20, 20, 24, 0.38);                          /* 分段控件选中态底色（深色下要提亮才浮得起来） */
  --glass-blur: 26px;
  --glass-sat: 180%;
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(16, 16, 24, 0.04),
    0 14px 34px -20px rgba(16, 16, 24, 0.22);

  /* 背景光斑：玻璃要有东西可透才成立。浅色用两组低饱和冷色，
     饱和度压到 0.5 以下，只作为「空气感」，不抢内容 */
  --glow-1: radial-gradient(ellipse at 10% 0%, rgba(166, 190, 240, 0.34), transparent 60%);
  --glow-2: radial-gradient(ellipse at 100% 35%, rgba(196, 180, 228, 0.26), transparent 58%);
  --glow-3: radial-gradient(ellipse at 25% 100%, rgba(166, 211, 220, 0.22), transparent 62%);

  --shadow-card: 0 1px 2px rgba(16, 16, 24, 0.045), 0 10px 30px -18px rgba(16, 16, 24, 0.14);
  --shadow-float: 0 8px 24px -10px rgba(16, 16, 24, 0.28);
  --font: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
          "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", sans-serif;
  --font-num: "SF Pro Display", -apple-system, "Segoe UI Variable Display", "Segoe UI",
              system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* ---------- 深色 ----------
 * 两处定义：媒体查询（跟随系统）+ [data-theme="dark"]（手动选）。
 * 手动选浅色时用 :not([data-theme="light"]) 挡住媒体查询，否则系统深色会盖掉手动选择。
 * 改颜色时两边必须同步，别只改一处。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #000000;
    --card: #1a1a1d;
    --card-2: #252528;
    --fill: #26262a;
    --ink: #f5f5f7;
    --ink-invert: #0a0a0a;
    --text: #f5f5f7;
    --text-2: #a8a8b0;
    --text-3: #7c7c85;
    --sep: rgba(255, 255, 255, 0.1);
    --up: #ff453a;
    --down: #32d74b;
    --glass-bg: rgba(30, 30, 35, 0.6);
    --glass-strong: rgba(28, 28, 32, 0.88);
  --seg-on: #3a3a3e;
  --focus-ring: rgba(255, 255, 255, 0.45);
    --glass-brd: rgba(255, 255, 255, 0.1);
    --glass-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.07),
      0 1px 2px rgba(0, 0, 0, 0.5),
      0 14px 34px -20px rgba(0, 0, 0, 0.8);
    --glow-1: radial-gradient(ellipse at 0% 0%, rgba(65, 83, 145, 0.3), transparent 60%);
    --glow-2: radial-gradient(ellipse at 100% 40%, rgba(104, 65, 129, 0.22), transparent 58%);
    --glow-3: radial-gradient(ellipse at 25% 100%, rgba(42, 103, 116, 0.18), transparent 62%);
    --asset-cash: #80aaff;
    --asset-deposit: #b09ae6;
    --asset-fund: #75bac5;
    --asset-gold: #e4b65f;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 30px -18px rgba(0, 0, 0, 0.7);
    --shadow-float: 0 8px 24px -10px rgba(0, 0, 0, 0.8);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --card: #1a1a1d;
  --card-2: #252528;
  --fill: #26262a;
  --ink: #f5f5f7;
  --ink-invert: #0a0a0a;
  --text: #f5f5f7;
  --text-2: #a8a8b0;
  --text-3: #7c7c85;
  --sep: rgba(255, 255, 255, 0.1);
  --up: #ff453a;
  --down: #32d74b;
  --glass-bg: rgba(30, 30, 35, 0.6);
  --glass-brd: rgba(255, 255, 255, 0.1);
  --glass-strong: rgba(28, 28, 32, 0.88);
  --seg-on: #3a3a3e;
  --focus-ring: rgba(255, 255, 255, 0.45);
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 14px 34px -20px rgba(0, 0, 0, 0.8);
  --glow-1: radial-gradient(ellipse at 0% 0%, rgba(65, 83, 145, 0.3), transparent 60%);
  --glow-2: radial-gradient(ellipse at 100% 40%, rgba(104, 65, 129, 0.22), transparent 58%);
  --glow-3: radial-gradient(ellipse at 25% 100%, rgba(42, 103, 116, 0.18), transparent 62%);
  --asset-cash: #80aaff;
  --asset-deposit: #b09ae6;
  --asset-fund: #75bac5;
  --asset-gold: #e4b65f;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 30px -18px rgba(0, 0, 0, 0.7);
  --shadow-float: 0 8px 24px -10px rgba(0, 0, 0, 0.8);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  text-size-adjust: 100%;
  /* 双击不再放大。viewport 里的 user-scalable=no 安卓 Chrome 常常无视，
     touch-action 是唯一被所有移动内核认可的双击缩放开关；
     manipulation 只吃掉「双击缩放」这一种手势，滚动和点击照常。 */
  touch-action: manipulation;
}

html { background: var(--bg); }

/* 底色 = 三层柔光 + 实色。
 * 以前用 background-attachment: fixed 让光斑固定在视口，
 * 但移动端内核对它支持很差（整层渐变直接不渲染，页头 banner 区域露出一片空白底色）。
 * 改成独立 fixed 伪元素当背景层：视觉一样是「滚动时不动」，兼容性稳。 */
body {
  min-height: 100vh;
  background-color: var(--bg);
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--bg);
  background-image: var(--glow-1), var(--glow-2), var(--glow-3);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

#app {
  max-width: 520px;
  margin: 0 auto;
  /* tabbar 高约 73 + 距底 14，留 148 保证滚到底时最后一行内容不被胶囊压住 */
  padding-bottom: calc(148px + env(safe-area-inset-bottom));
}

/* 弹层打开时锁住背景滚动，否则手指一滑弹层就跟着跑掉了 */
body.sheet-open {
  overflow: hidden;
  touch-action: none;
}

/* 页面入场：只动 opacity / transform，切页不再"啪"地换屏。
   不挂 will-change：200ms 的小动画用不着它，常驻反而会让元素一直停留在合成层，
   在 iOS 上既费内存，叠在合成层上的 fixed 弹层也偶发定位异常。 */
@keyframes pageIn {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to { opacity: 1; transform: none; }
}
#page-content.page-enter {
  animation: pageIn 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  #page-content.page-enter { animation: none; }
}

/* ---------- 首屏骨架（模块加载期间占位，防止白屏） ---------- */
.boot-skeleton { padding: calc(env(safe-area-inset-top) + 44px) 20px 0; }
.sk-line {
  height: 13px;
  border-radius: 7px;
  background: var(--card-2);
  margin-bottom: 10px;
}
.sk-w40 { width: 38%; }
.sk-w70 { width: 62%; height: 26px; margin-bottom: 26px; }
.sk-block {
  height: 168px;
  border-radius: var(--radius-lg);
  background: var(--card-2);
  margin: 0 -4px 16px;
}
.sk-block.sk-sm { height: 116px; }

/* ---------- 页头：小标签 + 超大标题（设计稿核心特征） ---------- */
.page-head {
  padding: calc(env(safe-area-inset-top) + 28px) 20px 18px;
}
.eyebrow {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0.06em;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.page-title {
  font-size: 33px;
  font-weight: 650;
  letter-spacing: -0.032em;
  line-height: 1.12;
}

/* ---------- 卡片 ----------
 * 左右一律 20px，和页头 / 分节标题同一条竖线。
 * 旧版 card 是 16px、标题是 20px，卡片边缘比文字外扩 4px，
 * 单看不明显，整页扫下来就是「不齐」，这是廉价感的主要来源。 */
.card {
  position: relative;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius-lg);
  /* 连续曲率（iOS 26 Liquid Glass）。不支持的浏览器直接忽略这一行，
     退化成普通圆角，不影响任何布局与命中区域。 */
  corner-shape: squircle;
  padding: 20px;
  margin: 0 20px 12px;
  box-shadow: var(--glass-shadow);
}
/* 不支持 backdrop-filter 的浏览器（老安卓 WebView）：
   半透明底会透出光斑、字看不清，退回不透明底，宁可不玻璃也别糊。 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card { background: var(--card); }
}
.card-flush { padding: 0; overflow: hidden; }
.card-tight { padding: 16px 18px; }
.card-calc { padding: 16px 18px 14px; }

/* 分节标题行 */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 26px 20px 10px;
}
.section-title { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.section-more {
  font-size: 13px;
  color: var(--text-2);
  background: none;
  border: none;
  font-family: var(--font);
  cursor: pointer;
  padding: 0;
  letter-spacing: 0;
  -webkit-appearance: none;
}
/* 只有真正可点的 section-more 才撑热区。
 * 纯文字标签（如「累计口径」「Au99.99 现货」）用的是 span，
 * 给它们加负 margin 会在 baseline 对齐下往上飘。 */
button.section-more {
  padding: 10px 0 10px 14px;
  margin: -10px 0;
}
button.section-more:active { opacity: 0.5; }

/* ---------- Hero（净资产大卡） ---------- */
/* 深色玻璃：浅色底上一块半透明黑，背后的光斑隐约透上来。
   hero 是「主视觉」，这里不跟着主题改底色 —— 浅色深色都用黑玻璃，
   和参考图里的黑色圆形图标块同一个语言。 */
.hero {
  position: relative;
  border-radius: var(--radius-lg);
  corner-shape: squircle;
  padding: 22px 20px 18px;
  margin: 0 20px 10px;
  overflow: hidden;
  background: rgba(20, 20, 26, 0.9);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 1px 2px rgba(16, 16, 24, 0.1),
    0 20px 44px -26px rgba(16, 16, 24, 0.7);
}
/* 斜向柔光 + 顶部 1px 内高光：纯色块看着像贴纸，这两层让它有实体感 */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.14), transparent 52%),
              radial-gradient(ellipse at 100% 0%, rgba(140, 158, 218, 0.18), transparent 65%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
.hero > * { position: relative; }
.hero-label { font-size: 12.5px; opacity: 0.6; letter-spacing: 0.04em; }
.hero-value {
  font-family: var(--font-num);
  font-size: clamp(32px, 9vw, 44px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.06;
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.hero-note { font-size: 12px; opacity: 0.58; margin-top: 10px; line-height: 1.6; }
.hero-split {
  display: flex;
  gap: 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.hero-split-item { flex: 1; min-width: 0; }
.hero-split-label { font-size: 11.5px; opacity: 0.58; letter-spacing: 0.02em; }
.hero-split-value {
  font-family: var(--font-num);
  /* 三列并排，数字要比两列时小一档，否则 ¥121,804.07 会换行 */
  font-size: 16px;
  font-weight: 600;
  margin-top: 5px;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* hero 是深底，红绿要提亮才压得住。
   而且这里必须写死白色系 —— 之前用的是 var(--ink-invert)，
   深色模式下它等于近黑，就变成了「黑底黑字」，也就是深色模式看不清的那个 bug。 */
.hero .up { color: #ff6b60; }
.hero .down { color: #4cd964; }
.hero .text-secondary { color: rgba(255, 255, 255, 0.6); }

/* hero 可点：按压时整卡轻微收缩，松手展开成明细面板——
   收缩这一下就是「这张卡有反应了」的触觉暗示 */
.hero-tappable {
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
  -webkit-tap-highlight-color: transparent;
}
.hero-tappable:active { transform: scale(0.975); }
.hero-tappable:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 3px;
}

/* ---------- 卡片展开弹层（FLIP：从触发的卡片放大铺开，关闭缩回） ---------- */
.card-expand-mask {
  position: fixed;
  inset: 0;
  /* 必须压过 tabbar(100)：弹层是全屏面板，底部的动作按钮
     会被悬浮胶囊导航盖住，手机上正好压在「看全部记录」上 */
  z-index: 200;
  padding: 10px;
  background: rgba(12, 12, 18, 0.42);
  opacity: 0;
  transition: opacity 0.26s ease;
}
.card-expand-mask.open { opacity: 1; }
.card-sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-xl);
  corner-shape: squircle;
  overflow: hidden;
  overflow-y: auto;
  /* 实色底 + 玻璃描边：展开面板要长篇阅读，半透明玻璃叠在内容页上
     会把后面的黑卡透出来显脏，弹层该比页面「实」一档 */
  background: var(--card);
  border: 1px solid var(--glass-brd);
  box-shadow: 0 24px 60px -24px rgba(10, 10, 18, 0.55);
  /* FLIP 起止都由 JS 写内联 transform，这里只负责过渡本身 */
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0.24, 1), opacity 0.26s ease;
}
.card-sheet-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 18px 12px;
  position: sticky;
  top: 0;
  background: var(--card);
  border-bottom: 0.5px solid var(--sep);
  z-index: 1;
}
.card-sheet-head-text { flex: 1; min-width: 0; }
.card-sheet-title {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.card-sheet-sub { font-size: 12px; color: var(--text-3); margin-top: 3px; }
/* 面板内容在 FLIP 前半程保持透明：横向/纵向缩放比不同会把文字拉变形，
   等面板接近全屏再淡入，变形就看不见了 */
.card-sheet-body {
  padding: 14px 16px calc(22px + env(safe-area-inset-bottom));
  opacity: 1;
  transition: opacity 0.2s ease 0.08s;
}
.card-expand-mask:not(.open) .card-sheet-body { opacity: 0; transition-delay: 0s; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero {
    background: rgba(30, 30, 34, 0.78);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.09),
      0 1px 2px rgba(0, 0, 0, 0.6),
      0 20px 44px -26px rgba(0, 0, 0, 0.95);
  }
}
:root[data-theme="dark"] .hero {
  background: rgba(30, 30, 34, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 1px 2px rgba(0, 0, 0, 0.6),
    0 20px 44px -26px rgba(0, 0, 0, 0.95);
}

/* ---------- 文本色 ---------- */
.text-secondary { color: var(--text-2); }
.text-tertiary { color: var(--text-3); }
.up { color: var(--up); }
.down { color: var(--down); }
.danger { color: var(--up); }
.money {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- 按钮：黑色胶囊（设计稿主按钮） ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ink);
  color: var(--ink-invert);
  border: none;
  border-radius: 999px;
  padding: 17px 26px;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.btn:active { opacity: 0.86; transform: scale(0.985); }
.btn:disabled { opacity: 0.4; }
.btn-block { display: flex; width: 100%; }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--sep);
}

/* ---------- 悬浮胶囊 tabbar（设计稿核心特征） ---------- */
/* tabbar 是整套视觉里唯一的「黑玻璃」：浅色深色都不换色，
   它是导航锚点，也跟着主题变色就失去参照。深色下只把透明度调高一点。 */
.tabbar {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  background: rgba(20, 20, 24, 0.86);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 10px 30px -10px rgba(16, 16, 24, 0.5);
  z-index: 100;
}
.tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 0;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.46);
  font-size: 10.5px;
  font-family: var(--font);
  letter-spacing: 0.01em;
  cursor: pointer;
  -webkit-appearance: none;
  transition: color 0.15s ease;
}
.tabbar-item.active { color: #ffffff; }
.tabbar-item .icon {
  font-size: 17px;
  line-height: 1;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.18s ease, color 0.18s ease;
}
/* 选中：白色圆底 + 黑色图标（设计稿特征） */
.tabbar-item.active .icon { background: #ffffff; color: #111111; }
.tabbar-item:active .icon { background: rgba(255, 255, 255, 0.14); }
.tabbar-item.active:active .icon { background: #ffffff; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tabbar { background: rgba(30, 30, 34, 0.8); }
  .tabbar-item.active .icon { background: #ffffff; }
}
:root[data-theme="dark"] .tabbar { background: rgba(30, 30, 34, 0.8); }

/* ---------- 输入 ---------- */
.input {
  width: 100%;
  padding: 15px 16px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  font-size: 16px;
  font-family: var(--font);
  color: var(--text);
  background: var(--fill);
  outline: none;
  -webkit-appearance: none;
  transition: background 0.15s ease, border-color 0.15s ease;
  text-align: left;
}
.input:focus {
  background: var(--card);
  border-color: var(--ink);
}
.input::placeholder { color: var(--text-3); }

/* 大号金额输入：¥ 符号独立，数字用等宽族，避免输入时左右跳动 */
.money-field {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--fill);
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  padding: 12px 16px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.money-field:focus-within { background: var(--card); border-color: var(--ink); }
.money-symbol {
  font-family: var(--font-num);
  font-size: 22px;
  font-weight: 500;
  color: var(--text-3);
  flex-shrink: 0;
}
.input-amount {
  flex: 1;
  min-width: 0;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--font-num);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.input-amount:focus { background: none; border: none; }

/* 旧页面的等宽大号金额输入（定存 / 基金 / 黄金页仍在用这个类名） */
.input-money {
  font-family: var(--font-num);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  padding: 16px;
}

/* 带单位后缀的输入（利率 %、克数、元/克） */
.suffix-field {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--fill);
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  padding: 0 16px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.suffix-field:focus-within { background: var(--card); border-color: var(--ink); }
.suffix-field.is-off { opacity: 0.45; }
.suffix-field .input {
  background: none;
  border: none;
  padding: 15px 0;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: 600;
}
.suffix-field .input:focus { background: none; border: none; }
.suffix {
  font-size: 13px;
  color: var(--text-3);
  flex-shrink: 0;
  white-space: nowrap;
}

/* 时间输入（工时反推）：材质同 suffix-field，
   把 input[type=time] 的原生外观（清除键 / 上下箭头）收掉，只留时钟图标 */
.time-field {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  background: var(--fill);
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  padding: 0 16px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.time-field:focus-within { background: var(--card); border-color: var(--ink); }
.time-field input[type="time"] {
  flex: 1;
  min-width: 0;
  width: 100%;
  background: none;
  border: none;
  outline: none;
  padding: 14px 0;
  font-family: var(--font-num);
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  -webkit-appearance: none;
  appearance: none;
}
.time-field input[type="time"]::-webkit-datetime-edit { padding: 0; }
.time-field input[type="time"]::-webkit-clear-button,
.time-field input[type="time"]::-webkit-inner-spin-button { display: none; }
.time-field input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 0.32;
  cursor: pointer;
}

/* 上班 / 下班：竖排两行。
   并排两列时，「上午 09:00」+ 时钟图标的最小宽度会把每列压到裁掉分钟
   （390px 屏上会显示成「上午 09:」），竖排一行一个才放得下。 */
.wt-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.wt-row + .wt-row { margin-top: 10px; }
.wt-row-label {
  flex: none;
  width: 34px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
}
.wt-row .time-field { flex: 1; min-width: 0; }

/* 算出来的日工时，放卡片底当一个结论块 */
.wt-daylen {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--fill);
  border-radius: var(--radius-md);
}
.wt-daylen-value {
  font-family: var(--font-num);
  font-size: 21px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.wt-daylen-note {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.wt-daylen-empty { font-size: 13px; color: var(--text-3); }

/* 时薪要跟「¥12,345.67」同框，44px 的 hero 字在窄屏会顶出卡片 */
.hero-value.wt-value {
  font-size: clamp(26px, 7.4vw, 34px);
  letter-spacing: -0.02em;
}

/* 工时反推：换休息制度的四行，整行可点，当前那行反白 */
.wt-cmp-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wt-cmp {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 16px;
  background: var(--fill);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font);
  text-align: left;
  color: var(--text);
  transition: background 0.15s ease, color 0.15s ease;
}
.wt-cmp:active { opacity: 0.85; }
.wt-cmp-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.wt-cmp-name {
  font-size: 15px;
  font-weight: 600;
}
.wt-cmp-meta {
  font-size: 12px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.wt-cmp-pay {
  flex: none;
  font-family: var(--font-num);
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.wt-cmp.is-on {
  background: var(--ink);
  color: var(--ink-invert);
}
.wt-cmp.is-on .wt-cmp-meta { color: var(--ink-invert); opacity: 0.62; }

/* 搜索框（设计稿胶囊搜索） */
.search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border-radius: 999px;
  padding: 13px 18px;
  margin: 0 20px 12px;
  color: var(--text-3);
  font-size: 15px;
}

.field-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  letter-spacing: 0.01em;
  margin-bottom: 9px;
}

/* ---------- 分段控件（选资产类别 / 买入方式） ----------
 * 比 chips 更"重"，用在一层只有 2~4 个互斥选项、且是主决策的场合。 */
.seg {
  display: flex;
  gap: 4px;
  background: var(--fill);
  border-radius: var(--radius-md);
  padding: 4px;
}
.seg-item {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  border-radius: 14px;
  padding: 11px 4px;
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  -webkit-appearance: none;
  white-space: nowrap;
}
.seg-item.active {
  background: var(--seg-on);
  color: var(--text);
  font-weight: 620;
  box-shadow: 0 1px 3px rgba(16, 16, 24, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.seg-item:active { opacity: 0.75; }

/* 页面级分段切换（现金流页的「到账日历 / 存钱计划」）。
   原来用的是一层通栏浅灰底、没有任何外边距，夹在页头与白卡之间像贴了条胶带；
   现在跟卡片同一套玻璃材质 + 20px 对齐，选中态用主色黑块，和全站的黑色按钮呼应。 */
.seg-page {
  margin: 0 20px 16px;
  gap: 5px;
  padding: 5px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius-lg);
  corner-shape: squircle;
  box-shadow: var(--glass-shadow);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .seg-page { background: var(--card); }
}
.seg-page .seg-item {
  border-radius: calc(var(--radius-lg) - 5px);
  padding: 12px 6px;
  font-size: 14.5px;
  font-weight: 550;
  letter-spacing: -0.01em;
  color: var(--text-2);
}
.seg-page .seg-item.active {
  background: var(--ink);
  color: var(--ink-invert);
  font-weight: 620;
  box-shadow: 0 2px 10px -2px rgba(16, 16, 24, 0.32);
}
.seg-page .seg-item:active { opacity: 0.9; }

/* 切换两栏时内容轻淡入一下：整块 DOM 是重建的，没有过渡会显得「闪」 */
.cal-body { animation: calFade 0.18s ease-out; }
@keyframes calFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cal-body { animation: none; }
}
.seg-hint {
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.5;
  margin-top: 12px;
  text-align: center;
}

/* ---------- chips：选中黑实心（设计稿特征） ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* 横向滚动版：类型多时一行滑到底，不换行 */
.chips-scroll {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin: 0 -20px;
  padding: 2px 20px;
}
.chips-scroll::-webkit-scrollbar { display: none; }
.chip {
  padding: 9px 16px;
  border-radius: 999px;
  border: none;
  background: var(--fill);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0;
  -webkit-appearance: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.chip.active {
  background: var(--ink);
  color: var(--ink-invert);
  font-weight: 600;
}
.chip:active { opacity: 0.8; }

/* ---------- 列表行 ---------- */
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.row + .row { border-top: 0.5px solid var(--sep); }
.row-left { min-width: 0; flex: 1; }
.row-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.row-sub {
  font-size: 13px;
  color: var(--text-2);
  margin-top: 4px;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row-amount {
  font-family: var(--font-num);
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
/* 明细类副标题：内容较长时允许折行，不做省略号截断 */
.row-sub-wrap { white-space: normal; overflow: visible; text-overflow: clip; }
/* 副标题上的涨跌色：同优先级要写在 .row-sub 之后才能盖过默认灰 */
.row-sub.up { color: var(--up); }
.row-sub.down { color: var(--down); }
/* 可点行统一用真实 <button>：
 * 键盘 Tab 能到、读屏会念、触摸反馈原生，不用再靠 role/tabindex 打补丁。
 * 视觉上仍然是列表行，所以把 button 的默认外观全部抹平。 */
button.row {
  width: 100%;
  background: none;
  border: none;
  font-family: var(--font);
  color: inherit;
  text-align: left;
  -webkit-appearance: none;
  cursor: pointer;
}
.row-tap { cursor: pointer; }
button.row:active, .row-tap:active { opacity: 0.55; }
.chev { color: var(--text-3); font-size: 20px; line-height: 1; }
.card > .row { padding: 15px 0; }
.card > .row:first-child { padding-top: 2px; }
.card > .row:last-child { padding-bottom: 2px; }

/* ---------- 图标圆 ---------- */
.ico-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--card-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2);
  flex-shrink: 0;
}

/* ---------- 分组标题 ---------- */
.group-title {
  font-size: 13px;
  color: var(--text-2);
  margin: 20px 22px 8px;
}

/* ---------- 结构条 ----------
 * 段与段之间留 2px 缝、各自独立圆角：灰阶差本来就不大，
 * 连成一整条时比例读不出来，断开之后一眼能看出四段的相对宽度。 */
.bar {
  display: flex;
  gap: 2px;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--card-2);
}
.bar-seg {
  height: 100%;
  border-radius: 999px;
  min-width: 4px;
}
.legend {
  margin-top: 9px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-2);
}
.legend i {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: middle;
}

/* ---------- 表单提示 ---------- */
.form-msg { font-size: 13px; margin-top: 14px; min-height: 18px; text-align: center; }
.form-msg.err { color: var(--up); }
.form-msg.ok { color: var(--down); }

/* ---------- 轻提示 ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(120px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(8px);
  background: rgba(10, 10, 10, 0.9);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 999;
  white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 登录页 ---------- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 24px;
}
.login-mark {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: var(--ink);
  color: var(--ink-invert);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 22px;
}
.login-title {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.18;
}
.login-sub { color: var(--text-2); font-size: 15px; margin-top: 10px; margin-bottom: 34px; }

/* 密码框右侧挂「显示/隐藏」，独立模式下手打密码时能自己核对 */
.pw-field { position: relative; margin-top: 12px; }
.pw-field .input { width: 100%; padding-right: 62px; }
.pw-eye {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  padding: 8px 12px;
  border: none;
  background: none;
  color: var(--text-3);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pw-eye.on { color: var(--text); }

/* 登录失败时的自查行：实际提交的邮箱 + 密码位数 */
.login-diag {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-3);
  text-align: center;
  word-break: break-all;
}

/* 底部的「注册 / 忘记密码」两个入口竖排，别挤成一行 */
.login-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 8px;
}

/* 新版本提示：浮在 tabbar 上方，点一下才刷新，不打断手上正在做的事 */
.update-bar {
  position: fixed;
  left: 50%;
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 300;
  padding: 11px 20px;
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ink-invert);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: updateBarIn 0.26s ease both;
}
@keyframes updateBarIn {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- 空态 ---------- */
.empty {
  padding: 44px 0;
  text-align: center;
  color: var(--text-3);
  font-size: 14px;
  line-height: 1.7;
}
.hidden { display: none !important; }

/* ---------- 表单底部操作区 ----------
 * 曾经这里是 fixed 的圆形悬浮按钮（.fab），固定压在右下角，
 * 会盖住页面最后一行内容，点上去像「点了没反应」。记一笔本来就在 tabbar 里，
 * 这个按钮纯属重复，已删除。 */
.form-actions {
  padding: 8px 20px 4px;
}
.link-more {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 12px 0;
  background: none;
  border: none;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-2);
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
}
.link-more:active { opacity: 0.55; }

/* ---------- 基金：代码输入行 ---------- */
.code-row { display: flex; gap: 10px; align-items: stretch; }
.code-row .input { flex: 1; }
.btn-sm {
  width: auto;
  flex-shrink: 0;
  padding: 0 18px;
  font-size: 14px;
  border-radius: var(--radius-md);
}

/* ---------- 基金：行情卡 ---------- */
.quote-line {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.6;
}
.quote-card {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--card-2);
}
.quote-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
}
.quote-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-2);
}
.quote-meta b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.quote-stamp {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.5;
}

/* ---------- 基金：计算结果 ---------- */
.calc-box {
  margin-top: 20px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--card-2);
}
.calc-empty {
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  padding: 22px 16px;
}
.calc-box .kv, .card-calc .kv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  color: var(--text-2);
  padding: 6px 0;
}
.calc-box .kv b, .card-calc .kv b {
  font-family: var(--font-num);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.calc-box .kv b.up, .card-calc .kv b.up { color: var(--up); }
.calc-box .kv b.down, .card-calc .kv b.down { color: var(--down); }
/* 明细最后一行（工时计算器的「应发合计」）：压一条分隔线，和上面的分项拉开 */
.card-calc .kv.kv-total {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 0.5px solid var(--sep);
}
.card-calc .kv.kv-total b { font-size: 18px; }
.calc-note {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 0.5px solid var(--sep);
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.6;
}

/* ---------- 存钱计划（日历页） ---------- */
/* 黑卡下面那颗主按钮：左右跟卡片同一条 20px 竖线。
   以前这里写死 16px，按钮比卡片外扩 4px，整页扫下来就是「没对齐」。 */
.plan-cta {
  padding: 0 20px;
  margin-bottom: 4px;
}
/* 已开启时「计划设置」卡内的分区线（目标 / 存法 / 起点） */
.plan-divider {
  height: 1px;
  background: var(--sep);
  margin: 20px 0;
}
.plan-pmt {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 6px;
  border-bottom: 0.5px solid var(--sep);
}
.plan-pmt-label {
  font-size: 12.5px;
  color: var(--text-3);
  letter-spacing: 0.01em;
}
.plan-pmt-value {
  font-family: var(--font-num);
  font-size: 30px;
  font-weight: 650;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1.1;
}
.plan-row { gap: 12px; }

/* hero 里的进度条：白条压在深底上，比彩色更贴这套黑白语言 */
.plan-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  margin-top: 14px;
  overflow: hidden;
}
.plan-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: #fff;
  transition: width 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 本月该存：金额大字在右上，下面一条金额输入 + 主按钮 */
.plan-next-card { padding: 18px 20px 16px; }
.plan-next-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.plan-next-left { min-width: 0; }
.plan-next-eyebrow {
  font-size: 12px;
  color: var(--text-3);
  letter-spacing: 0.02em;
}
.plan-next-title {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.plan-next-amount {
  flex: none;
  font-family: var(--font-num);
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* 存完了的收尾卡 */
.plan-finish-card { text-align: center; padding: 26px 20px 18px; }
.plan-finish-ico {
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ink-invert);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
}
.plan-finish-title { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.plan-finish-sub { margin-top: 6px; font-size: 12.5px; color: var(--text-3); line-height: 1.6; }

/* 打卡表的一行：左边圆点（期号 / ✓），中间月份与累计，右边金额 */
.plan-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  padding: 13px 20px;
  border: none;
  border-top: 0.5px solid var(--sep);
  background: none;
  font-family: var(--font);
  text-align: left;
  color: var(--text);
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
}
.plan-item:first-child { border-top: none; }
button.plan-item { cursor: pointer; }
button.plan-item:active { background: var(--card-2); }
.plan-item.is-next { background: var(--card-2); }

.plan-check {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1.5px solid var(--sep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.plan-item.is-next .plan-check { border-color: var(--ink); color: var(--text); }
.plan-item.is-done .plan-check {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ink-invert);
}

.plan-item-main { flex: 1; min-width: 0; display: block; }
.plan-item-title {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.plan-item-sub {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plan-item-amt {
  flex: none;
  font-family: var(--font-num);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.plan-item.is-done .plan-item-title { color: var(--text-2); }
.plan-item.is-done .plan-item-amt { color: var(--text-3); }

/* 「本期」小标签 */
.plan-tag {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ink-invert);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
  vertical-align: 1.5px;
}

/* 计划表单的两列（月数 / 利率；工时页是上班 / 下班） */
.plan-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}
/* grid 子项默认 min-width:auto，里面的 input[type=time] 最小内容宽
   （「上午 09:00」+ 时钟图标）会把整列撑破，卡片右侧就溢出了 */
.plan-2col > * { min-width: 0; }

/* 开启后的设置区：起点锁定的说明 + 两个按钮 */
.plan-lock-note {
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: 12px;
  background: var(--card-2);
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.6;
}
.plan-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.plan-actions .btn {
  flex: 1;
  padding: 15px 12px;
  font-size: 15px;
}

/* 计划页的两个开关行：整行可点，左边标题+说明，右边开关 */
.plan-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 10px;
  padding: 13px 15px;
  border-radius: var(--radius-md);
  border: 1px solid var(--sep);
  background: var(--card-2);
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  transition: opacity 0.15s ease, transform 0.12s ease, border-color 0.15s ease;
}
.plan-toggle:active { transform: scale(0.99); }
.plan-toggle.on { border-color: var(--ink); }
.plan-toggle.is-off { opacity: 0.45; }
/* 已开启计划后起点锁定：不能再改，但开关本身还是「开」的状态，
   所以只压一点透明度，不能像 is-off 那样降到 0.45 —— 那样黑开关会变灰，
   看起来像被关掉了，跟「起点已经算进去了」的事实相反。 */
.plan-toggle.is-locked { opacity: 0.72; }
.plan-toggle:disabled { cursor: default; }
.plan-toggle:disabled:active { transform: none; }
.plan-toggle-main { flex: 1; min-width: 0; display: block; }
.plan-toggle-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.plan-toggle-sub {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.5;
  white-space: normal;
}

/* ---------- 正负号输入 ---------- */
.sign-field { display: flex; gap: 10px; align-items: stretch; }
.sign-field .input { flex: 1; }
.sign-btn {
  width: 62px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--sep);
  background: var(--card-2);
  font-family: var(--font);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sign-btn.is-up { background: var(--up); border-color: var(--up); color: #fff; }
.sign-btn.is-down { background: var(--down); border-color: var(--down); color: #fff; }
.sign-btn:active { opacity: 0.75; }
.field-hint {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.5;
}

/* ---------- 列表右侧 ---------- */
.row-right { text-align: right; flex-shrink: 0; }

/* ---------- 页头返回按钮 ---------- */
.page-head-row { display: flex; align-items: center; gap: 10px; }
.back-btn {
  border: none;
  background: var(--card-2);
  color: var(--text);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.back-btn:active { opacity: 0.6; }

/* ---------- 曲线图 ---------- */
.chart {
  display: block;
  width: 100%;
  height: auto;
  margin: 6px 0 2px;
  overflow: visible;
}
.chart-empty {
  padding: 26px 0;
  text-align: center;
  font-size: 13px;
  color: var(--text-3);
}
.chart-head { margin-bottom: 4px; }
.chart-value {
  font-family: var(--font-num);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.chart-sub {
  font-size: 13px;
  color: var(--text-2);
  margin-top: 4px;
}
.chart-axis {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-3);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.chart-range { margin-bottom: 14px; }

/* 区间收益小结：曲线下方两格，明确给出「这段时间赚了多少 / 收益率多少」 */
.range-stat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 0.5px solid var(--sep);
}
.range-stat-item { min-width: 0; }
.range-stat-label {
  font-size: 11.5px;
  color: var(--text-3);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
.range-stat-value {
  font-family: var(--font-num);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

/* ---------- 收益总览 ---------- */
.profit-total { padding-bottom: 16px; }
.profit-total-label { font-size: 13px; color: var(--text-2); }
.profit-total-value {
  font-family: var(--font-num);
  font-size: clamp(26px, 6.6vw, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  margin-top: 5px;
}
.profit-total-sub { font-size: 12.5px; color: var(--text-2); margin-top: 7px; line-height: 1.6; }
.profit-split {
  display: flex;
  gap: 20px;
  padding-top: 16px;
  border-top: 0.5px solid var(--sep);
}
.profit-split-item { flex: 1; min-width: 0; }
.profit-split-label { font-size: 12.5px; color: var(--text-2); }
.profit-split-value {
  font-family: var(--font-num);
  font-size: 17px;
  font-weight: 600;
  margin-top: 3px;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.profit-split-note { font-size: 11.5px; color: var(--text-3); margin-top: 3px; }

/* ---------- 明细网格 ---------- */
.kv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 12px;
}
.kv-label { font-size: 12.5px; color: var(--text-2); }
.kv-value {
  font-family: var(--font-num);
  font-size: 15.5px;
  font-weight: 600;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.kv-value.up { color: var(--up); }
.kv-value.down { color: var(--down); }

/* ---------- 录入日命中净值 ---------- */
.quote-hit {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 0.5px solid var(--sep);
  font-size: 13px;
  color: var(--text-2);
}
.quote-hit b { color: var(--text); font-weight: 700; }

/* ---------- 说明列表 ---------- */
.note-list p {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: 8px;
}
.note-list p:last-child { margin-bottom: 0; }

/* ============================================================
   定存 / 黄金 / 流水 / 隐私锁 —— 本轮新增组件
   仍然遵守两条硬规则：中文不套重字重与大负字距；金额走 tabular 数字族。
   ============================================================ */

/* ---------- 竖向卡片（定存 / 黄金的持仓块） ---------- */
.stack-card { padding: 16px 18px 12px; }
.stack-card .row { align-items: flex-start; }
.progress {
  height: 4px;
  border-radius: 999px;
  background: var(--card-2);
  overflow: hidden;
  margin: 14px 0 2px;
}
.progress i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--ink);
  transition: width 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.stack-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  justify-content: space-between;
  font-size: 11.5px;
  margin-top: 12px;
  line-height: 1.5;
}
.stack-actions {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 0.5px solid var(--sep);
}

/* 持仓卡里的小走势图（黄金每笔「买入以来收益走势」） */
.spark-wrap {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 0.5px solid var(--sep);
}
.spark-title {
  font-size: 11.5px;
  color: var(--text-3);
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}
.spark-empty {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.6;
  padding: 4px 0 6px;
}
.spark-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}
.spark-foot-label {
  font-size: 11.5px;
  color: var(--text-3);
  letter-spacing: 0.02em;
}
.spark-foot-value {
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.link-btn {
  background: none;
  border: none;
  /* padding:0 的 13px 小字热区只有 26×18，手机上基本点不中，统一撑到 40px 高 */
  padding: 10px 8px;
  margin: -10px -8px;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  -webkit-appearance: none;
  border-radius: 8px;
}
.link-btn.danger { color: var(--up); }
.link-btn:active { opacity: 0.5; }

/* ---------- 开关 ---------- */
.switch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  cursor: pointer;
  position: relative;
}
.switch-label { font-size: 13.5px; color: var(--text-2); flex: 1; }
.switch {
  width: 46px;
  height: 28px;
  border-radius: 999px;
  background: var(--card-2);
  border: 1px solid var(--sep);
  position: relative;
  flex-shrink: 0;
  transition: background 0.18s;
}
.switch i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.switch.on { background: var(--ink); border-color: var(--ink); }
.switch.on i { transform: translateX(18px); }
.switch-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* ---------- 黄金：金价块 ---------- */
.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.price-value {
  font-family: var(--font-num);
  font-size: clamp(26px, 6.4vw, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.price-unit {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  letter-spacing: 0;
  margin-left: 6px;
}
.price-sub { font-size: 12.5px; color: var(--text-2); margin-top: 5px; font-variant-numeric: tabular-nums; }

/* ---------- 流水行（带改 / 删操作） ---------- */
.tx-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
}
.tx-row + .tx-row { border-top: 0.5px solid var(--sep); }
.tx-row:first-child { padding-top: 2px; }
.tx-row:last-child { padding-bottom: 2px; }
.tx-ops {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 4px;
}
.stat-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: baseline;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 0.5px solid var(--sep);
  font-size: 12.5px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

/* ---------- 日历：临期标记 ---------- */
.ico-urgent {
  background: rgba(216, 56, 44, 0.12);
  color: var(--up);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ico-urgent { background: rgba(255, 69, 58, 0.16); }
}
:root[data-theme="dark"] .ico-urgent { background: rgba(255, 69, 58, 0.16); }

/* ---------- 隐私锁 ---------- */
.lock-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px calc(40px + env(safe-area-inset-bottom));
}
.lock-title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 6px;
}
.lock-sub {
  font-size: 12.5px;
  color: var(--text-3);
  margin-top: 8px;
  text-align: center;
  line-height: 1.6;
  max-width: 260px;
}
.lock-dots {
  display: flex;
  gap: 16px;
  margin: 30px 0 6px;
}
.lock-dots i {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1.5px solid var(--text-3);
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.lock-dots i.filled {
  background: var(--text);
  border-color: var(--text);
  transform: scale(1.08);
}
.lock-err {
  min-height: 20px;
  font-size: 12.5px;
  color: var(--up);
  margin-top: 6px;
}
.keypad {
  display: grid;
  grid-template-columns: repeat(3, 74px);
  gap: 14px;
  justify-content: center;
  margin-top: 22px;
}
.key {
  height: 62px;
  border-radius: 50%;
  border: none;
  background: var(--card);
  color: var(--text);
  font-family: var(--font-num);
  font-size: 24px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, transform 0.12s;
}
.key:active { background: var(--card-2); transform: scale(0.96); }

/* ---------- 焦点态 ----------
 * 浏览器默认给 button 套一个 2px 黑色方框，圆角元素上特别丑。
 * 改成 :focus-visible：鼠标和触摸点不出现，只有键盘 Tab 过来才显示细环。
 * 不能直接 outline:none —— 那样键盘用户就彻底看不见自己在哪了。 */
button:focus,
.seg-item:focus,
.chip:focus,
.tabbar-item:focus {
  outline: none;
}
button:focus-visible,
.seg-item:focus-visible,
.chip:focus-visible,
.tabbar-item:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
/* 输入框的聚焦已经用描边表达，不要再叠一圈 outline */
.input:focus-visible,
.input-amount:focus-visible,
.money-field .input:focus-visible {
  outline: none;
}

/* ---------- 底部弹层（确认 / 设密码） ----------
   为什么不用原生 confirm / prompt：微信内置浏览器会直接屏蔽原生对话框，
   屏蔽后 confirm 返回 false、prompt 返回 null，删除和设密码就变成死键。
   所以关键交互全部走页面内弹层。 */
.sheet-mask {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0);
  transition: background 0.18s ease;
}
.sheet-mask.open { background: rgba(0, 0, 0, 0.42); }
.sheet {
  /* 弹层用 fixed 贴底，高度由内容决定。
     早前试过 flex 贴底 + max-height，Chrome 会把高度算成「可用空间的一部分」，
     结果只长出半屏、下半截内容被裁；fixed + max-height + 内部滚动没有这个问题。 */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  width: min(520px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* 弹层也走玻璃：背后的内容被模糊成一层色晕，
     比纯色面板更有「浮起来」的感觉，和卡片是同一套材质。 */
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(34px) saturate(180%);
  backdrop-filter: blur(34px) saturate(180%);
  border-top: 1px solid var(--glass-brd);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  corner-shape: squircle;
  padding: 24px 20px calc(18px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
  box-shadow: 0 -8px 40px -12px rgba(16, 16, 24, 0.3);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sheet { background: var(--card); }
}
.sheet-mask.open .sheet { transform: translateY(0); }
.sheet-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
}
.sheet-sub {
  font-size: 12.5px;
  color: var(--text-3);
  text-align: center;
  margin-top: 8px;
  line-height: 1.6;
}
.sheet-message {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.75;
  margin-top: 12px;
  text-align: center;
}
.sheet-actions {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}
.sheet-btn {
  height: 50px;
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ink-invert);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.sheet-btn.danger { background: var(--up); color: #fff; }
.sheet-btn:active { opacity: 0.82; }
.sheet-cancel {
  width: 100%;
  height: 46px;
  margin-top: 8px;
  border: none;
  background: transparent;
  color: var(--text-2);
  font-family: var(--font);
  font-size: 15px;
  cursor: pointer;
}
.sheet-cancel:active { opacity: 0.6; }
.sheet .lock-dots { margin: 22px 0 4px; }
.sheet .keypad { margin-top: 14px; }
.sheet .key { background: var(--card-2); }

/* ---------- 详情弹层（点一行，一屏看完） ----------
   主页只放精选摘要，详情全在弹层里。
   弹层自己不产生整页滚动：标题与关闭键固定，只有内容区可滚，
   而且内容短时高度随内容收缩，不硬撑满屏。 */
.sheet-lg {
  padding: 0 0 calc(14px + env(safe-area-inset-bottom));
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.sheet-grip {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: var(--sep);
  margin: 8px auto 0;
  flex: none;
}
.sheet-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 20px 10px;
  flex: none;
}
.sheet-head-text { flex: 1; min-width: 0; }
.sheet-h1 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.sheet-hsub {
  font-size: 12.5px;
  color: var(--text-3);
  margin-top: 3px;
  line-height: 1.5;
}
.sheet-x {
  flex: none;
  width: 30px;
  height: 30px;
  margin-top: -2px;
  border: none;
  border-radius: 50%;
  background: var(--card-2);
  color: var(--text-2);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
}
.sheet-x:active { opacity: 0.6; }
.sheet-body {
  padding: 0 20px 4px;
}
.sheet-foot {
  flex: none;
  display: grid;
  gap: 10px;
  padding: 12px 20px 0;
}
.sheet-foot .sheet-btn { height: 48px; }
.sheet-note {
  flex: none;
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.6;
  padding: 10px 20px 0;
}

/* 弹层内的一行：图标 + 名称/说明 + 右侧金额 */
.drow {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 0;
  border: none;
  border-top: 1px solid var(--sep);
  background: none;
  text-align: left;
  font-family: var(--font);
  color: var(--text);
  -webkit-appearance: none;
}
.drow:first-child { border-top: none; }
.drow-tap { cursor: pointer; }
.drow-tap:active { opacity: 0.55; }
.drow-mark {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--card-2);
  color: var(--text-2);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.drow-left { flex: 1; min-width: 0; display: block; }
.drow-title {
  display: block;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drow-sub {
  display: block;
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.45;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drow-right { flex: none; text-align: right; }
.drow-value {
  display: block;
  font-family: var(--font-num);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.drow-note {
  display: block;
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* ---------- 页面精选卡：整块可点，右侧带箭头 ---------- */
.pick {
  display: flex;
  align-items: center;
  gap: 14px;
  /* button 即使 display:flex，宽度仍是 fit-content；要显式撑满。
     用 calc 减掉左右 margin，配合 border-box 才和卡片同宽（width:100% 会溢出 40px）。 */
  width: calc(100% - 40px);
  box-sizing: border-box;
  padding: 13px 18px;
  background: var(--card);
  border: none;
  border-radius: var(--radius-lg);
  margin: 0 20px 10px;
  box-shadow: var(--shadow-card);
  text-align: left;
  font-family: var(--font);
  color: var(--text);
  cursor: pointer;
  -webkit-appearance: none;
  transition: transform 0.15s ease;
}
.pick:active { transform: scale(0.985); }
.pick-mark {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--card-2);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pick-main { flex: 1; min-width: 0; }
.pick-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.pick-share {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.pick-sub {
  display: block;
  font-size: 12px;
  color: var(--text-3);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pick-right { flex: none; text-align: right; }
.pick-value {
  font-family: var(--font-num);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.pick-note {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.pick-chev { flex: none; color: var(--text-3); font-size: 19px; line-height: 1; }

/* 迷你占比条：贴在精选卡底部，一眼看出这类占多少 */
.pick-bar {
  height: 3px;
  border-radius: 999px;
  background: var(--card-2);
  overflow: hidden;
  margin-top: 9px;
}
.pick-bar > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--ink);
}

/* ---------- 首页资产行：一类一行，点开看全部 ---------- */
.asset-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 0;
  border: none;
  border-top: 1px solid var(--sep);
  background: none;
  text-align: left;
  font-family: var(--font);
  color: var(--text);
  cursor: pointer;
  -webkit-appearance: none;
}
.asset-row:first-child { border-top: none; padding-top: 2px; }
.asset-row:last-child { padding-bottom: 2px; }
.asset-row:active { opacity: 0.55; }
.asset-main { flex: 1; min-width: 0; display: block; }
.asset-top { display: flex; align-items: baseline; gap: 7px; }
.asset-name { font-size: 14.5px; font-weight: 500; }
.asset-pct {
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--text-3);
  background: var(--card-2);
  padding: 0 6px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
/* 占比改成名称旁的小徽标：原来是一条满宽进度条，浅色下看着像行分隔线 */
/* 持仓页用文字说明替代占比条（没有条时也要有第二行，行高才一致） */
.asset-sub {
  display: block;
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.asset-right { flex: none; text-align: right; }
.asset-value {
  display: block;
  font-family: var(--font-num);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.asset-note {
  display: block;
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.list-foot {
  font-size: 11.5px;
  color: var(--text-3);
  text-align: center;
  margin: -2px 0 14px;
}

.skeleton-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 22px 20px;
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--text-3);
  text-align: center;
}

/* ---------- 弹层内的汇总块 ---------- */
.dsum { text-align: center; padding: 0 0 12px; }
.dsum-value {
  font-family: var(--font-num);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.dsum-sub {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 5px;
  line-height: 1.5;
}
.dsplit { display: flex; gap: 8px; padding-bottom: 14px; }
.dsplit > div {
  flex: 1;
  min-width: 0;
  background: var(--card-2);
  border-radius: 13px;
  padding: 10px 11px;
}
.dsplit span { display: block; font-size: 11px; color: var(--text-3); }
.dsplit b {
  display: block;
  font-family: var(--font-num);
  font-size: 15px;
  font-weight: 600;
  margin-top: 3px;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dsection {
  font-size: 11.5px;
  color: var(--text-3);
  letter-spacing: 0.02em;
  padding: 10px 0 4px;
  border-top: 1px solid var(--sep);
  margin-top: 4px;
}

/* 资产结构环形图（净资产明细弹层） */
.donut-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 8px 0 4px;
}
.donut-ring { position: relative; width: 132px; height: 132px; }
.donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.donut-center-label { font-size: 11px; color: var(--text-3); letter-spacing: 0.03em; }
.donut-center-value {
  font-family: var(--font-num);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.donut-legend { width: 100%; }
.donut-legend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 2px;
  border-top: 0.5px solid var(--sep);
  font-size: 13.5px;
}
.donut-legend-row:first-child { border-top: none; }
.donut-legend .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.donut-legend .name { color: var(--text-2); flex: 1; min-width: 0; }
.donut-legend .pct {
  font-family: var(--font-num);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  width: 58px;
  text-align: right;
}
.donut-legend .amt {
  font-family: var(--font-num);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* 弹层里的金价条 */
.price-strip {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 12px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: var(--card-2);
  font-size: 12px;
  color: var(--text-2);
}
.price-strip-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.price-strip-value {
  font-family: var(--font-num);
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.price-strip-chg { font-variant-numeric: tabular-nums; }
.price-strip-date { color: var(--text-3); font-variant-numeric: tabular-nums; }

/* .asset-note / .drow-note 自带 text-3 灰色，会盖掉全局 .up/.down（同特异度、后写者胜），
   这里补回涨红跌绿，否则「+¥934.50」和「+¥0.00」看起来一个色。 */
.asset-note.up, .drow-note.up { color: var(--up); }
.asset-note.down, .drow-note.down { color: var(--down); }

/* 收益归因：两列网格。四行竖排要 176px，四条数据不值得占这么高 */
.dgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 2px;
}
.dgrid > div {
  background: var(--card-2);
  border-radius: 12px;
  padding: 9px 11px;
  min-width: 0;
}
.dgrid span {
  display: block;
  font-size: 11px;
  color: var(--text-3);
}
.dgrid b {
  display: block;
  font-family: var(--font-num);
  font-size: 14px;
  font-weight: 600;
  margin-top: 2px;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dgrid b.up { color: var(--up); }
.dgrid b.down { color: var(--down); }

/* ==========================================================================
   记一笔：全屏录入面板
   --------------------------------------------------------------------------
   形态参照主流记账 App：上面选、下面输。
   · 顶部一行：关闭 + 资产分段 + 管理入口
   · 中间可滚：圆形图标网格（选项都是「一块圆形 + 两个字」，扫一眼就点）
   · 底部固定：金额 + 备注 + 数字键盘，拇指够得到
   面板挂 body（不在 #page-content 里），因为页面入场动画的 transform
   会让内部的 position:fixed 失效。
   ========================================================================== */

/* 面板打开时锁住背景，手指滑动不会把下面那页带着跑。
   同时把 tabbar 和页头藏起来：面板是全屏录入态，底下露着导航会被误点，
   视觉上也会和面板自己的顶部栏打架。 */
body.rec-open { overflow: hidden; }
body.rec-open .tabbar,
body.rec-open .page-head {
  opacity: 0;
  pointer-events: none;
}
.tabbar, .page-head { transition: opacity 0.16s ease; }

.rec {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  flex-direction: column;
  /* 纯底色，不带背景光斑：主 app 的光斑被卡片压着几乎看不出，
     这层全屏铺开（中间还是大片空白）就会显得一片彩色，和别处不像一套。
     宽屏上也要铺满整屏，不然左右会露出底下一层的总览页。 */
  background: var(--bg);
  animation: recIn 0.24s cubic-bezier(0.32, 0.72, 0.24, 1);
}
.rec-top, .rec-scroll, .rec-foot {
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
@keyframes recIn {
  from { opacity: 0; transform: translateY(14px) scale(0.994); }
  to   { opacity: 1; transform: none; }
}
.rec.is-closing {
  animation: recOut 0.18s ease forwards;
  pointer-events: none;
}
@keyframes recOut {
  to { opacity: 0; transform: translateY(10px); }
}
@media (prefers-reduced-motion: reduce) {
  .rec, .rec.is-closing { animation: none; }
}

/* ---------- 顶部 ---------- */
.rec-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(env(safe-area-inset-top) + 12px) 14px 10px;
  flex: none;
}
.rec-x {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--glass-brd);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: var(--text);
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-appearance: none;
  transition: transform 0.12s ease;
}
.rec-x:active { transform: scale(0.92); }
.rec-seg { flex: 1; min-width: 0; }
.rec-seg .seg-item { padding: 9px 2px; font-size: 13.5px; }
.rec-side {
  flex: none;
  border: none;
  background: none;
  color: var(--text-2);
  font-family: var(--font);
  font-size: 13px;
  padding: 8px 2px 8px 8px;
  cursor: pointer;
  -webkit-appearance: none;
}
.rec-side:active { opacity: 0.5; }

/* ---------- 中间滚动区 ---------- */
.rec-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* 左右 20px：和主 app 卡片 / 页头同一条竖线 */
  padding: 4px 20px 16px;
}

/* 对齐主 app 的 .field-label */
.rec-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  letter-spacing: 0.01em;
  margin: 18px 2px 9px;
}
.rec-label:first-child { margin-top: 4px; }

/* ---------- 圆形图标网格（参考图的核心语言） ---------- */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px 4px;
}
.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  border: none;
  background: none;
  font-family: var(--font);
  color: var(--text-2);
  cursor: pointer;
  -webkit-appearance: none;
}
.tile-ico {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--glass-brd);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 1px 3px rgba(16, 16, 24, 0.07),
    0 5px 14px -8px rgba(16, 16, 24, 0.28);
  color: var(--text);
  transition: transform 0.16s cubic-bezier(0.22, 0.61, 0.36, 1),
              background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
.tile:active .tile-ico { transform: scale(0.92); }
.tile-lb {
  font-size: 11.5px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* 选中：实心圆。这就是参考图里「餐饮」那个高亮块 */
.tile.is-on .tile-ico {
  background: var(--ink);
  color: var(--ink-invert);
  border-color: transparent;
  box-shadow:
    0 6px 18px -8px rgba(16, 16, 24, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.tile.is-on { color: var(--text); font-weight: 600; }
.tile-sub {
  font-size: 9.5px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  margin-top: -3px;
  letter-spacing: -0.02em;
}

/* 文本输入行（记一笔·定期：银行名自己写）
   风格对齐主 app 的 .input：实色填充、无边框，聚焦黑描边 */
.rec-input {
  display: block;
  width: 100%;
  padding: 15px 16px;
  margin-bottom: 8px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  background: var(--fill);
  font-family: var(--font);
  /* 必须 ≥16px：小字号输入框在 iOS 聚焦时会自动放大整页 */
  font-size: 16px;
  color: var(--text);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.rec-input::placeholder { color: var(--text-3); }
.rec-input:focus {
  background: var(--card);
  border-color: var(--ink);
}

/* ---------- 小 chips（期限 / 利率 / 日期）：直接继承全局 .chip，只调间距 ---------- */
.rec-chips { gap: 8px; }

/* 可点的日期 chip：里面铺一个完全透明、铺满整块的 input[type=date]。
 * 点哪都算点它 → 直接弹系统日期选择器（手机上就是原生滚轮，能选到任意年月日）。
 * 不自己画日历：自绘的日历在 4 寸屏上要么溢屏要么挤成一团，还得多维护一套逻辑。 */
.rec-chips .chip-date {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}
.chip-date-v { line-height: 1; letter-spacing: -0.01em; }
.chip-date-ico { display: flex; flex: none; opacity: 0.7; }
.chip-date-ico svg { width: 13px; height: 13px; }
.chip-date input[type="date"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  /* 16px 是 iOS 的底线：字号小于 16px 的输入框聚焦时 Safari 会自动放大整页 */
  font-size: 16px;
  color: transparent;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

/* 一行说明文字 */
.rec-fact {
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.6;
  margin: 10px 4px 0;
}

/* ---------- 可点的数值行（单价 / 代码 / 市值 / 收益）：实色填充，聚焦黑描边 ---------- */
.rec-line {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 8px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  background: var(--fill);
  font-family: var(--font);
  color: var(--text);
  cursor: pointer;
  -webkit-appearance: none;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.rec-line:active { opacity: 0.8; }
/* 当前键盘在输的那一行：描边点亮，避免「改了数不知道改的是哪个」 */
.rec-line.is-focus {
  background: var(--card);
  border-color: var(--ink);
}
.rec-line-lb { font-size: 13.5px; color: var(--text-2); flex: none; }
.rec-line-v {
  flex: 1;
  text-align: right;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rec-line-v.mono { font-family: var(--font-num); letter-spacing: 0.06em; }
.rec-line-v.up { color: var(--up); }
.rec-line-v.down { color: var(--down); }
.rec-line svg { color: var(--text-3); flex: none; width: 17px; height: 17px; }
.rec-sign {
  flex: none;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(216, 56, 44, 0.12);
  color: var(--up);
  font-weight: 600;
}
.rec-sign.is-neg { background: rgba(20, 128, 63, 0.12); color: var(--down); }

/* 基金行情条 */
.rec-quote {
  margin: 2px 0 4px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--fill);
}
.rec-quote-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.rec-quote-meta {
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: var(--text-2);
  margin-top: 7px;
  font-variant-numeric: tabular-nums;
}
.rec-quote-meta b { color: var(--text); font-weight: 600; }

/* 测算结果 */
.rec-calc {
  margin-top: 14px;
  padding: 4px 16px 10px;
  border-radius: var(--radius-md);
  background: var(--fill);
}
.rec-kv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  font-size: 13px;
  color: var(--text-2);
}
.rec-kv + .rec-kv { border-top: 0.5px solid var(--sep); }
.rec-kv b {
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}
.rec-kv b.up { color: var(--up); }
.rec-kv b.down { color: var(--down); }

/* ==========================================================================
   底部：金额 + 备注 + 数字键盘
   ========================================================================== */
.rec-foot {
  flex: none;
  padding: 8px 20px calc(10px + env(safe-area-inset-bottom));
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  border-top: 1px solid var(--glass-brd);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -10px 34px -18px rgba(16, 16, 24, 0.3);
}

/* 输入目标切换（基金有三项，其他类只有一项就不显示） */
.rec-focus {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
.rec-focus-item {
  border: none;
  background: var(--fill);
  color: var(--text-2);
  font-family: var(--font);
  font-size: 12.5px;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  -webkit-appearance: none;
}
.rec-focus-item.is-on { background: var(--ink); color: var(--ink-invert); font-weight: 600; }

.rec-amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 4px 6px;
  min-height: 44px;
}
.rec-cur {
  font-size: 15px;
  color: var(--text-3);
  font-weight: 500;
  flex: none;
}
.rec-num {
  font-family: var(--font-num);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rec-note-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 13px;
  background: var(--fill);
  margin-bottom: 9px;
}
.rec-note-ico { display: flex; color: var(--text-3); flex: none; }
.rec-note-ico svg { width: 14px; height: 14px; }
.rec-note-date {
  font-size: 12px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.rec-note-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  outline: none;
  font-family: var(--font);
  /* 同上：16px 以下 iOS 会放大整页；行高收一点抵消视觉变大 */
  font-size: 16px;
  line-height: 1.25;
  color: var(--text);
  padding: 0;
}
.rec-note-input::placeholder { color: var(--text-3); }

/* 键盘：4 列，最后一列是功能键。实色按键，与主 app 输入件同一语言 */
.rec-pad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.rec-key {
  height: 48px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--card-2);
  color: var(--text);
  font-family: var(--font-num);
  font-size: 21px;
  font-weight: 500;
  cursor: pointer;
  -webkit-appearance: none;
  transition: transform 0.1s ease, background 0.1s ease;
}
.rec-key:active { transform: scale(0.96); background: var(--fill); }
.rec-key.fn { font-family: var(--font); font-size: 13px; font-weight: 600; }
.rec-key.sub { color: var(--text-2); font-size: 14px; }
.rec-key.strong { background: var(--fill); }
/* 主按钮：完成。深浅色都不换色，和 hero / tabbar 同一块黑 */
.rec-key.primary {
  background: var(--ink);
  color: var(--ink-invert);
  border-color: transparent;
  font-weight: 700;
  box-shadow: 0 6px 16px -8px rgba(16, 16, 24, 0.5);
}

/* 窄屏（iPhone SE 一类 320~360）压缩一档，别让键盘顶到内容 */
@media (max-width: 360px) {
  .tile-ico { width: 42px; height: 42px; }
  .tile-lb { font-size: 10.5px; }
  .rec-key { height: 44px; font-size: 19px; }
  .rec-num { font-size: 32px; }
}
/* 矮屏（横屏或小屏）把中间区再压一点 */
@media (max-height: 700px) {
  .tile-grid { gap: 9px 4px; }
  .tile-ico { width: 42px; height: 42px; }
  .rec-key { height: 42px; }
  .rec-num { font-size: 30px; }
}

/* ================= 大盘指数（js/pages/indices.js） ================= */

/* hero 里的涨跌行：点位是主角，涨跌额和涨跌幅跟在后面当注脚 */
.idx-chg {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 10px;
  font-family: var(--font-num);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.idx-chg-pct { font-size: 15.5px; opacity: 0.9; }
/* hero 是深底，中性态不能用 --text-3（深色模式下会糊成一片） */
.idx-chg.flat {
  color: rgba(255, 255, 255, 0.62);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
}

/* 开 / 昨收 / 高 / 低 四格：两行两列。
   硬塞成一行四列时，390px 屏每格只剩 78px，「3,675.72」会被省略号截掉 */
.idx-split2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}

/* 指数切换条：12 个指数的横向滚动。
   不能直接用 .chips-scroll —— 那个的负边距是给带 20px 内边距的容器准备的，
   而 #page-content 没有内边距（间距都靠 .card 自己的 margin），套上去会顶出屏幕。 */
.idx-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin: 18px 0 0;
  padding: 0 20px 2px;
}
.idx-chips::-webkit-scrollbar { display: none; }

/* 分时卡 */
.idx-trend-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.idx-trend-title { font-size: 13px; font-weight: 600; color: var(--text-2); }
.idx-trend-leg {
  font-size: 11.5px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.idx-trend-svg { display: block; width: 100%; height: 148px; }
.idx-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* 指数列表：名称 | 点位 | 涨跌幅胶囊 */
.idx-row {
  display: grid;
  grid-template-columns: 1fr auto 82px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 20px;
  background: none;
  border: none;
  border-top: 0.5px solid var(--sep);
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
}
.idx-row:first-child { border-top: none; }
.idx-row:active { background: var(--fill); }

.idx-row-l { min-width: 0; }
.idx-row-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
}
.idx-row.on .idx-row-name { font-weight: 700; }
.idx-row-code {
  font-size: 10.5px;
  color: var(--text-3);
  margin-top: 3px;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
}
.idx-row-price {
  font-family: var(--font-num);
  font-size: 15.5px;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* 涨跌幅做成品红 / 绿的实心胶囊，扫一眼就能看出方向，
   不用再去读数字前面的正负号。深色模式下也用同一组实色，白字才压得住 */
.idx-pct {
  padding: 5px 0;
  border-radius: 8px;
  background: var(--fill);
  color: var(--text-3);
  font-family: var(--font-num);
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.idx-pct.up { background: var(--up); color: #fff; }
.idx-pct.down { background: var(--down); color: #fff; }

@media (max-width: 360px) {
  .idx-row { grid-template-columns: 1fr auto 74px; gap: 10px; padding: 12px 16px; }
  .idx-trend-svg { height: 132px; }
  .idx-chg { font-size: 17px; }
}

/* =====================================================================
   GEOMETRIC BOLD — 全站视觉改版
   纯黑 / 白为底，A 股语义红涨绿跌；硬边、方角、无阴影、无渐变。
   ===================================================================== */

html[data-style="geometric"]:root {
  color-scheme: light;
  --bg: #ffffff;
  --card: #ffffff;
  --card-2: #ffffff;
  --fill: #ffffff;
  --ink: #000000;
  --ink-invert: #ffffff;
  --text: #000000;
  --text-2: #111111;
  --text-3: #333333;
  --sep: #000000;
  /* 中文金融习惯：上涨红、下跌绿。用深色文字值保证白底 AA 对比度。 */
  --up: #c00000;
  --down: #006b2b;
  --radius-xl: 0px;
  --radius-lg: 0px;
  --radius-md: 0px;
  --glass-bg: #ffffff;
  --glass-brd: #000000;
  --glass-strong: #ffffff;
  --seg-on: #000000;
  --focus-ring: #c00000;
  --glass-blur: 0px;
  --glass-sat: 100%;
  --glass-shadow: none;
  --glow-1: none;
  --glow-2: none;
  --glow-3: none;
  --shadow-card: none;
  --shadow-float: none;
  --asset-cash: #000000;
  --asset-deposit: #404040;
  --asset-fund: #858585;
  --asset-gold: #c8c8c8;
}

@media (prefers-color-scheme: dark) {
  html[data-style="geometric"]:root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #000000;
    --card: #000000;
    --card-2: #000000;
    --fill: #000000;
    --ink: #ffffff;
    --ink-invert: #000000;
    --text: #ffffff;
    --text-2: #ffffff;
    --text-3: #e6e6e6;
    --sep: #ffffff;
    --up: #ff3b30;
    --down: #35c759;
    --glass-bg: #000000;
    --glass-brd: #ffffff;
    --glass-strong: #000000;
    --seg-on: #ffffff;
    --focus-ring: #ff3b30;
  }
}
html[data-style="geometric"]:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --card: #000000;
  --card-2: #000000;
  --fill: #000000;
  --ink: #ffffff;
  --ink-invert: #000000;
  --text: #ffffff;
  --text-2: #ffffff;
  --text-3: #e6e6e6;
  --sep: #ffffff;
  --up: #ff3b30;
  --down: #35c759;
  --glass-bg: #000000;
  --glass-brd: #ffffff;
  --glass-strong: #000000;
  --seg-on: #ffffff;
  --focus-ring: #ff3b30;
}

html[data-style="geometric"],
html[data-style="geometric"]::before,
html[data-style="geometric"]::after,
html[data-style="geometric"] *,
html[data-style="geometric"] *::before,
html[data-style="geometric"] *::after {
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition-duration: 100ms !important;
  transition-timing-function: linear !important;
}
html[data-style="geometric"] * { background-image: none !important; }
html[data-style="geometric"] *:focus-visible { outline: 3px solid var(--focus-ring) !important; outline-offset: 3px; }
html[data-style="geometric"],
html[data-style="geometric"] body { background: var(--bg) !important; color: var(--text) !important; }
html[data-style="geometric"] body::before { display: none !important; }

/* 标题：压缩装饰、放大字重，形成强烈的版面层级。 */
html[data-style="geometric"] .page-head { padding-bottom: 14px; }
html[data-style="geometric"] .eyebrow {
  color: var(--text) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3em !important;
  margin-bottom: 4px !important;
}
html[data-style="geometric"] .page-title {
  color: var(--text) !important;
  font-size: clamp(34px, 9vw, 46px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.045em !important;
  line-height: 0.98 !important;
}
html[data-style="geometric"] .section-head { align-items: center; margin-top: 30px; }
html[data-style="geometric"] .section-title {
  color: var(--text) !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  text-transform: none;
}
html[data-style="geometric"] .section-head::before {
  content: '';
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  margin-right: 2px;
  background: #ff0000;
  transform: rotate(12deg);
}
html[data-style="geometric"] .section-more { color: var(--text-2) !important; font-weight: 700; }

/* 黑底主视觉 + 红色几何装饰，替代旧玻璃与柔光。 */
html[data-style="geometric"] .hero {
  position: relative;
  border: 4px solid #000000 !important;
  border-radius: 0 !important;
  corner-shape: initial !important;
  background: #000000 !important;
  color: #ffffff !important;
  overflow: hidden;
}
html[data-style="geometric"] .hero::before {
  content: '';
  position: absolute;
  inset: -31px -20px auto auto;
  width: 78px;
  height: 78px;
  background: #c00000 !important;
  border: 0 !important;
  border-radius: 50% !important;
  transform: rotate(18deg);
  pointer-events: none;
}
html[data-style="geometric"] .hero::after {
  content: '';
  position: absolute;
  inset: auto 24px 17px auto;
  width: 18px;
  height: 18px;
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: rotate(45deg);
  pointer-events: none;
}
html[data-style="geometric"] .hero > * { position: relative; z-index: 1; }
html[data-style="geometric"] .hero-label { color: #ffffff !important; opacity: 1 !important; font-weight: 800; letter-spacing: 0.22em; }
html[data-style="geometric"] .hero-value {
  color: #ffffff !important;
  font-size: clamp(36px, 10vw, 58px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.055em !important;
  line-height: 0.98 !important;
}
html[data-style="geometric"] .hero-note,
html[data-style="geometric"] .hero-split-label { color: #ffffff !important; opacity: 0.9 !important; }
html[data-style="geometric"] .hero-split { border-top: 2px solid #ffffff !important; }
html[data-style="geometric"] .hero .hero-split-value { color: #ffffff; font-weight: 800; }
html[data-style="geometric"] .hero .up { color: #ff3b30 !important; }
html[data-style="geometric"] .hero .down { color: #35c759 !important; }
html[data-style="geometric"] .hero .text-secondary { color: #ffffff !important; opacity: 0.8; }

/* 卡片与容器：粗黑框、纯色、方角，不使用玻璃/投影。 */
html[data-style="geometric"] .card,
html[data-style="geometric"] .card-sheet,
html[data-style="geometric"] .card-expand-mask,
html[data-style="geometric"] .tile,
html[data-style="geometric"] .sum-block,
html[data-style="geometric"] .calc-box,
html[data-style="geometric"] .detail-card {
  color: var(--text) !important;
  background: var(--card) !important;
  border: 3px solid var(--text) !important;
  border-radius: 0 !important;
  corner-shape: initial !important;
}
html[data-style="geometric"] .card { padding: 20px; }
html[data-style="geometric"] .card-flush { padding: 0; }
html[data-style="geometric"] .card-sheet { overflow: auto; }
html[data-style="geometric"] .card-expand-mask { background: rgba(0, 0, 0, 0.82) !important; }
html[data-style="geometric"] .card-sheet-head { background: var(--card) !important; border-bottom: 3px solid var(--text) !important; }
html[data-style="geometric"] .card-sheet-title,
html[data-style="geometric"] .sheet-h1 { font-weight: 900 !important; }
html[data-style="geometric"] .card-tight,
html[data-style="geometric"] .card-calc { border-width: 3px !important; }

/* 按钮：方角黑白硬切，按下位移，不做软缩放。 */
html[data-style="geometric"] .btn,
html[data-style="geometric"] .sheet-btn,
html[data-style="geometric"] .sheet-cancel,
html[data-style="geometric"] .back-btn,
html[data-style="geometric"] .sheet-x,
html[data-style="geometric"] button.row,
html[data-style="geometric"] .row-tap,
html[data-style="geometric"] .link-btn {
  border-radius: 0 !important;
  box-shadow: none !important;
}
html[data-style="geometric"] .back-btn,
html[data-style="geometric"] .sheet-x { min-width: 44px; min-height: 44px; }
html[data-style="geometric"] .btn,
html[data-style="geometric"] .sheet-btn {
  min-height: 46px;
  background: #000000 !important;
  color: #ffffff !important;
  border: 3px solid #000000 !important;
  border-radius: 0 !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
}
html[data-style="geometric"] .btn:hover,
html[data-style="geometric"] .sheet-btn:hover { background: #c00000 !important; border-color: #c00000 !important; color: #ffffff !important; }
html[data-style="geometric"] .btn:active,
html[data-style="geometric"] .sheet-btn:active { transform: translateY(3px) !important; opacity: 1 !important; }
html[data-style="geometric"] .btn-ghost,
html[data-style="geometric"] .sheet-cancel {
  background: #ffffff !important;
  color: #000000 !important;
  border: 3px solid #000000 !important;
}
html[data-style="geometric"] .btn-ghost:hover,
html[data-style="geometric"] .sheet-cancel:hover { background: #c00000 !important; color: #ffffff !important; border-color: #c00000 !important; }
html[data-style="geometric"] .link-btn { color: var(--text) !important; font-weight: 800 !important; text-decoration: underline; text-underline-offset: 3px; }
html[data-style="geometric"] .link-btn:hover { color: var(--up) !important; }
html[data-style="geometric"] .row-tap:hover,
html[data-style="geometric"] .idx-row:hover { background: #c00000 !important; color: #ffffff !important; }
html[data-style="geometric"] .row-tap:active,
html[data-style="geometric"] .idx-row:active { transform: translateY(2px); }
html[data-style="geometric"] .danger,
html[data-style="geometric"] .link-btn.danger { color: var(--up) !important; }

/* 导航变为底部黑色方框；当前页用白底黑字，其余白字。 */
html[data-style="geometric"] .tabbar {
  background: #000000 !important;
  border: 3px solid #000000 !important;
  border-radius: 0 !important;
  padding: 4px !important;
  gap: 3px;
  bottom: calc(10px + env(safe-area-inset-bottom));
}
html[data-style="geometric"] .tabbar-item {
  min-height: 52px;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 0 !important;
}
html[data-style="geometric"] .tabbar-item.active { background: #ffffff !important; color: #000000 !important; }
html[data-style="geometric"] .tabbar-item .icon { border-radius: 0 !important; background: transparent !important; color: inherit !important; }
html[data-style="geometric"] .tabbar-item.active .icon { background: transparent !important; color: inherit !important; }
html[data-style="geometric"] .tabbar-item:active { background: #c00000 !important; color: #ffffff !important; }
html[data-style="geometric"] .tabbar-item:active .icon { background: transparent !important; }

/* 筛选、切换与选择器：粗框 chip，活动态黑块，触摸态红块。 */
html[data-style="geometric"] .seg,
html[data-style="geometric"] .seg-page {
  background: var(--card) !important;
  border: 3px solid var(--text) !important;
  border-radius: 0 !important;
  padding: 3px !important;
  box-shadow: none !important;
}
html[data-style="geometric"] .seg-item,
html[data-style="geometric"] .seg-page .seg-item,
html[data-style="geometric"] .chip {
  min-height: 44px;
  border: 2px solid var(--text) !important;
  border-radius: 0 !important;
  background: var(--card) !important;
  color: var(--text) !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
}
html[data-style="geometric"] .seg-item.active,
html[data-style="geometric"] .seg-page .seg-item.active,
html[data-style="geometric"] .chip.active {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}
html[data-style="geometric"] .chip:hover,
html[data-style="geometric"] .seg-item:hover,
html[data-style="geometric"] .seg-page .seg-item:hover { background: #c00000 !important; color: #ffffff !important; border-color: #c00000 !important; }
html[data-style="geometric"] .chip:active,
html[data-style="geometric"] .seg-item:active,
html[data-style="geometric"] .seg-page .seg-item:active { transform: translateY(2px); }
html[data-style="geometric"] .idx-pct { border: 2px solid currentColor !important; border-radius: 0 !important; font-weight: 900 !important; }
html[data-style="geometric"] .idx-pct.up { background: #c00000 !important; color: #ffffff !important; border-color: #c00000 !important; }
html[data-style="geometric"] .idx-pct.down { background: #006b2b !important; color: #ffffff !important; border-color: #006b2b !important; }
html[data-style="geometric"] .idx-row { border-top: 2px solid var(--sep) !important; }
html[data-style="geometric"] .idx-row.on { background: var(--fill) !important; border-left: 8px solid #c00000 !important; padding-left: 12px; }
html[data-style="geometric"] .idx-row:active { background: #c00000 !important; color: #ffffff !important; }

/* 输入：白底黑粗框，焦点红色外框。复合金额/单位输入只留外层黑框。 */
html[data-style="geometric"] .input,
html[data-style="geometric"] select,
html[data-style="geometric"] textarea,
html[data-style="geometric"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="time"]):not(.input-amount) {
  background: #ffffff !important;
  color: #000000 !important;
  border: 3px solid #000000 !important;
  border-radius: 0 !important;
  font-weight: 600;
}
html[data-style="geometric"] .input::placeholder,
html[data-style="geometric"] input::placeholder,
html[data-style="geometric"] textarea::placeholder { color: #333333 !important; opacity: 1; }
html[data-style="geometric"] .input:focus,
html[data-style="geometric"] select:focus,
html[data-style="geometric"] textarea:focus,
html[data-style="geometric"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus {
  background: #ffffff !important;
  border-color: #000000 !important;
  outline: 3px solid #c00000 !important;
  outline-offset: 2px;
}
html[data-style="geometric"] .money-field,
html[data-style="geometric"] .suffix-field,
html[data-style="geometric"] .time-field,
html[data-style="geometric"] .code-row {
  background: #ffffff !important;
  border: 3px solid #000000 !important;
  border-radius: 0 !important;
}
html[data-style="geometric"] .money-field:focus-within,
html[data-style="geometric"] .suffix-field:focus-within,
html[data-style="geometric"] .time-field:focus-within {
  outline: 3px solid #c00000 !important;
  outline-offset: 2px;
}
html[data-style="geometric"] .money-field .input,
html[data-style="geometric"] .suffix-field .input,
html[data-style="geometric"] .time-field input,
html[data-style="geometric"] .input-amount,
html[data-style="geometric"] .money-field input:focus,
html[data-style="geometric"] .suffix-field input:focus {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
}
html[data-style="geometric"] .suffix-field .suffix,
html[data-style="geometric"] .money-symbol { color: #111111 !important; font-weight: 800; }
html[data-style="geometric"] .wt-daylen,
html[data-style="geometric"] .calc-box,
html[data-style="geometric"] .range-stat,
html[data-style="geometric"] .kv-cell { border-radius: 0 !important; }

/* 列表和状态：以黑色实线分组，减少灰色弱对比文字。 */
html[data-style="geometric"] .row + .row,
html[data-style="geometric"] .idx-row { border-color: var(--sep) !important; }
html[data-style="geometric"] .row-title,
html[data-style="geometric"] .row-amount,
html[data-style="geometric"] .row-sub,
html[data-style="geometric"] .row-sub-wrap,
html[data-style="geometric"] .kv-label,
html[data-style="geometric"] .kv-value,
html[data-style="geometric"] .field-label,
html[data-style="geometric"] .field-hint,
html[data-style="geometric"] .note-list,
html[data-style="geometric"] .section-more { color: var(--text) !important; }
html[data-style="geometric"] .row-sub,
html[data-style="geometric"] .field-hint,
html[data-style="geometric"] .note-list p,
html[data-style="geometric"] .kv-label { font-weight: 600; }
html[data-style="geometric"] .text-secondary,
html[data-style="geometric"] .text-tertiary { color: var(--text-2) !important; }
html[data-style="geometric"] .ico-circle,
html[data-style="geometric"] .tile-ico,
html[data-style="geometric"] .login-mark {
  border: 3px solid #000000 !important;
  border-radius: 50% !important;
  background: #000000 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
}
html[data-style="geometric"] .donut-legend .dot { border: 0 !important; border-radius: 50% !important; }
html[data-style="geometric"] .icon,
html[data-style="geometric"] .chev { color: inherit !important; }

/* 几何硬边的辅助控件：弹层、提示、日历项、键盘、开关、搜索框。 */
html[data-style="geometric"] .sheet,
html[data-style="geometric"] .sheet-lg,
html[data-style="geometric"] .sheet-head,
html[data-style="geometric"] .sheet-body,
html[data-style="geometric"] .sheet-foot,
html[data-style="geometric"] .card-expand-mask,
html[data-style="geometric"] .sheet-x,
html[data-style="geometric"] .sheet-grip,
html[data-style="geometric"] .keypad,
html[data-style="geometric"] .key,
html[data-style="geometric"] .rec,
html[data-style="geometric"] .rec-panel,
html[data-style="geometric"] .rec-key,
html[data-style="geometric"] .rec-num,
html[data-style="geometric"] .rec-row,
html[data-style="geometric"] .update-bar,
html[data-style="geometric"] .toast,
html[data-style="geometric"] .lock-dots span,
html[data-style="geometric"] .pin-dot,
html[data-style="geometric"] .plan-progress,
html[data-style="geometric"] .plan-progress-fill,
html[data-style="geometric"] .plan-item,
html[data-style="geometric"] .plan-card,
html[data-style="geometric"] .plan-cta,
html[data-style="geometric"] .plan-divider,
html[data-style="geometric"] .plan-toggle,
html[data-style="geometric"] .calendar-day,
html[data-style="geometric"] .calendar-cell,
html[data-style="geometric"] .day-cell,
html[data-style="geometric"] .search-wrap,
html[data-style="geometric"] .search-field {
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-style="geometric"] .sheet,
html[data-style="geometric"] .sheet-lg,
html[data-style="geometric"] .update-bar,
html[data-style="geometric"] .toast,
html[data-style="geometric"] .rec {
  background: var(--card) !important;
  border: 3px solid var(--text) !important;
  color: var(--text) !important;
}
html[data-style="geometric"] .card-expand-mask { background: rgba(0, 0, 0, 0.82) !important; border: 0 !important; }
html[data-style="geometric"] .rec { border: 0 !important; }
html[data-style="geometric"] .sheet-grip { display: none !important; }
html[data-style="geometric"] .sheet-mask.open { background: rgba(0, 0, 0, 0.82) !important; }
html[data-style="geometric"] .sheet-title,
html[data-style="geometric"] .sheet-h1,
html[data-style="geometric"] .login-title { font-weight: 900 !important; color: var(--text) !important; }
html[data-style="geometric"] .plan-progress { border: 2px solid #ffffff !important; background: #000000 !important; }
html[data-style="geometric"] .plan-progress-fill { background: #c00000 !important; }
html[data-style="geometric"] .plan-toggle.is-on,
html[data-style="geometric"] .plan-toggle.active { border-color: #000000 !important; }
html[data-style="geometric"] .update-bar { background: #c00000 !important; color: #ffffff !important; }
html[data-style="geometric"] .toast { background: #000000 !important; color: #ffffff !important; border-color: #000000 !important; }

/* 记一笔全屏录入与首页资产图表也收敛为纯色几何块。 */
html[data-style="geometric"] .rec { background: var(--bg) !important; }
html[data-style="geometric"] .rec-key,
html[data-style="geometric"] .key { background: #ffffff !important; border: 3px solid #000000 !important; color: #000000 !important; }
html[data-style="geometric"] .rec-key:active,
html[data-style="geometric"] .key:active { background: #c00000 !important; color: #ffffff !important; transform: translateY(2px); }
html[data-style="geometric"] .rec-num { color: var(--text) !important; font-weight: 900 !important; }
html[data-style="geometric"] .rec-line,
html[data-style="geometric"] .rec-input,
html[data-style="geometric"] .rec-quote,
html[data-style="geometric"] .rec-calc { background: #ffffff !important; border: 3px solid #000000 !important; }
html[data-style="geometric"] .chart,
html[data-style="geometric"] .idx-trend-svg { filter: none !important; }
html[data-style="geometric"] .chart-empty { color: var(--text-2) !important; font-weight: 700; }
html[data-style="geometric"] .chart-axis,
html[data-style="geometric"] .chart-sub,
html[data-style="geometric"] .range-stat-label { color: var(--text-2) !important; }

@media (prefers-reduced-motion: reduce) {
  html[data-style="geometric"] *,
  html[data-style="geometric"] *::before,
  html[data-style="geometric"] *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; }
}
@media (max-width: 360px) {
  html[data-style="geometric"] .page-title { font-size: 32px !important; }
  html[data-style="geometric"] .hero { padding: 18px 16px 16px; }
  html[data-style="geometric"] .hero-value { font-size: clamp(32px, 9vw, 42px) !important; }
  html[data-style="geometric"] .card { padding: 16px; }
  html[data-style="geometric"] .tabbar { left: 8px; right: 8px; }
}

@media (prefers-color-scheme: dark) {
  html[data-style="geometric"]:root:not([data-theme="light"]) .hero { border-color: #ffffff !important; }
  html[data-style="geometric"]:root:not([data-theme="light"]) .btn,
  html[data-style="geometric"]:root:not([data-theme="light"]) .sheet-btn {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #ffffff !important;
  }
  html[data-style="geometric"]:root:not([data-theme="light"]) .btn:hover,
  html[data-style="geometric"]:root:not([data-theme="light"]) .sheet-btn:hover { background: #c00000 !important; color: #ffffff !important; border-color: #c00000 !important; }
  html[data-style="geometric"]:root:not([data-theme="light"]) .seg-item.active,
  html[data-style="geometric"]:root:not([data-theme="light"]) .seg-page .seg-item.active,
  html[data-style="geometric"]:root:not([data-theme="light"]) .chip.active { background: #ffffff !important; color: #000000 !important; border-color: #ffffff !important; }
  html[data-style="geometric"]:root:not([data-theme="light"]) .ico-circle,
  html[data-style="geometric"]:root:not([data-theme="light"]) .tile-ico,
  html[data-style="geometric"]:root:not([data-theme="light"]) .login-mark { background: #ffffff !important; color: #000000 !important; border-color: #ffffff !important; }
}
html[data-style="geometric"]:root[data-theme="dark"] .hero { border-color: #ffffff !important; }
html[data-style="geometric"]:root[data-theme="dark"] .btn,
html[data-style="geometric"]:root[data-theme="dark"] .sheet-btn {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
}
html[data-style="geometric"]:root[data-theme="dark"] .btn:hover,
html[data-style="geometric"]:root[data-theme="dark"] .sheet-btn:hover { background: #c00000 !important; color: #ffffff !important; border-color: #c00000 !important; }
html[data-style="geometric"]:root[data-theme="dark"] .seg-item.active,
html[data-style="geometric"]:root[data-theme="dark"] .seg-page .seg-item.active,
html[data-style="geometric"]:root[data-theme="dark"] .chip.active { background: #ffffff !important; color: #000000 !important; border-color: #ffffff !important; }
html[data-style="geometric"]:root[data-theme="dark"] .ico-circle,
html[data-style="geometric"]:root[data-theme="dark"] .tile-ico,
html[data-style="geometric"]:root[data-theme="dark"] .login-mark { background: #ffffff !important; color: #000000 !important; border-color: #ffffff !important; }
@media (prefers-color-scheme: dark) {
  html[data-style="geometric"]:root:not([data-theme="light"]) {
    --asset-cash: #ffffff;
    --asset-deposit: #dddddd;
    --asset-fund: #888888;
    --asset-gold: #444444;
  }
}
html[data-style="geometric"]:root[data-theme="dark"] {
  --asset-cash: #ffffff;
  --asset-deposit: #dddddd;
  --asset-fund: #888888;
  --asset-gold: #444444;
}
html[data-style="geometric"] .money-field .input,
html[data-style="geometric"] .suffix-field .input,
html[data-style="geometric"] .time-field input { color: #000000 !important; }

html[data-style="geometric"] .hero-value.wt-value {
  font-size: clamp(26px, 7.4vw, 34px) !important;
}
@media (max-width: 360px) {
  html[data-style="geometric"] .card-flush { padding: 0; }
}

/* =====================================================================
   DEVELOPER TERMINAL — 明暗自适应、mono 输出、纯色细边与 tmux 导航。
   所有覆盖限定 terminal；保留原深色基础，支持浅色/跟随系统，与 glass/geometric 隔离。
   伪元素只提供命令提示符、注释符、光标和已有明确消息状态的前缀；
   不推断连接/同步/交易状态，不生成金额、行情、收益或其他金融数据。
   ===================================================================== */
html[data-style="terminal"]:root {
  color-scheme: dark;
  --bg: #0A0E12;
  --card: #0D141B;
  --card-2: #0A0E12;
  --fill: #0A0E12;
  --ink: #4AF626;
  --ink-invert: #0A0E12;
  --text: #DCE5ED;
  --text-2: #A9B8CA;
  --text-3: #8F9FBC;
  --sep: #344258;
  --up: #FF6B6B;
  --down: #4AF626;
  --asset-cash: #8BE9FD;
  --asset-deposit: #6272A4;
  --asset-fund: #FF79C6;
  --asset-gold: #FFB86C;
  --term-cyan: #8BE9FD;
  --term-magenta: #FF79C6;
  --term-amber: #FFB86C;
  --term-slate: #6272A4;
  --radius-xl: 4px;
  --radius-lg: 4px;
  --radius-md: 3px;
  --glass-bg: var(--card);
  --glass-brd: var(--sep);
  --glass-strong: var(--card);
  --seg-on: var(--ink);
  --focus-ring: var(--term-cyan);
  --glass-blur: 0px;
  --glass-sat: 100%;
  --glass-shadow: none;
  --shadow-card: none;
  --shadow-float: none;
  --glow-1: none;
  --glow-2: none;
  --glow-3: none;
  --font: "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono",
          "Noto Sans Mono CJK SC", "Microsoft YaHei", monospace;
  --font-num: var(--font);
}

/* 浅色只覆盖配色 token；原深色仍作基础，显式 dark 不受系统浅色影响。
   系统浅色与手动 light 两处同步，语法色使用深色值以保持浅底文本对比。 */
@media (prefers-color-scheme: light) {
  html[data-style="terminal"]:root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #F5F7FA;
    --card: #FFFFFF;
    --card-2: #EDF1F5;
    --fill: #EDF1F5;
    --ink: #176B28;
    --ink-invert: #FFFFFF;
    --text: #17212B;
    --text-2: #43536A;
    --text-3: #53647A;
    --sep: #C5CED8;
    --up: #B4232D;
    --down: #176B28;
    --asset-cash: #00677A;
    --asset-deposit: #526489;
    --asset-fund: #A51F6B;
    --asset-gold: #8A4B08;
    --term-cyan: #00677A;
    --term-magenta: #A51F6B;
    --term-amber: #8A4B08;
    --term-slate: #526489;
  }
}
html[data-style="terminal"]:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F5F7FA;
  --card: #FFFFFF;
  --card-2: #EDF1F5;
  --fill: #EDF1F5;
  --ink: #176B28;
  --ink-invert: #FFFFFF;
  --text: #17212B;
  --text-2: #43536A;
  --text-3: #53647A;
  --sep: #C5CED8;
  --up: #B4232D;
  --down: #176B28;
  --asset-cash: #00677A;
  --asset-deposit: #526489;
  --asset-fund: #A51F6B;
  --asset-gold: #8A4B08;
  --term-cyan: #00677A;
  --term-magenta: #A51F6B;
  --term-amber: #8A4B08;
  --term-slate: #526489;
}

/* 清除共享样式及 JS 内联 FLIP 变换；仅允许 150ms 颜色过渡。
   不对 SVG 的金融方向色、路径、比例或真实输出内容做重写。 */
html[data-style="terminal"],
html[data-style="terminal"] *,
html[data-style="terminal"] *::before,
html[data-style="terminal"] *::after {
  border-radius: 3px !important;
  border-width: 1px !important;
  corner-shape: initial !important;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  animation: none !important;
  transition-property: color, background-color, border-color, outline-color, fill, stroke !important;
  transition-duration: 150ms !important;
  transition-delay: 0ms !important;
  transition-timing-function: linear !important;
  scroll-behavior: auto !important;
}
/* SVG 的静态 transform 是图表几何数据的一部分，不能随交互动效一起清除。 */
html[data-style="terminal"],
html[data-style="terminal"] :not(svg, svg *) {
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: none !important;
}
html[data-style="terminal"],
html[data-style="terminal"] body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
html[data-style="terminal"] body::before,
html[data-style="terminal"] .hero::before,
html[data-style="terminal"] .hero::after { content: none; }
html[data-style="terminal"] :is(button, input, select, textarea, pre, code, kbd, samp, svg text) {
  font-family: var(--font) !important;
}
html[data-style="terminal"] :is(button, input, select, textarea) {
  min-width: 0;
  max-width: 100%;
  accent-color: var(--ink);
  caret-color: var(--ink);
}
html[data-style="terminal"] ::selection { background: var(--ink); color: var(--ink-invert); }
html[data-style="terminal"] :focus-visible {
  outline: 2px solid var(--focus-ring) !important;
  outline-offset: 2px;
}
html[data-style="terminal"] :is(.money-field, .suffix-field, .time-field,
  .rec-note-row, .chip-date, .switch-row):focus-within {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* 标题直接复用真实章节文字，提示符和注释只作排版标记。 */
html[data-style="terminal"] .page-head { padding-bottom: 16px; }
html[data-style="terminal"] :is(.page-head-row, .section-head, .idx-trend-head) { flex-wrap: wrap; }
html[data-style="terminal"] :is(.page-title, .login-title, .lock-title) {
  color: var(--ink);
  font-size: clamp(23px, 6vw, 30px);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
}
html[data-style="terminal"] :is(.page-title, .section-title, .dsection,
  .sheet-title, .sheet-h1, .card-sheet-title)::before {
  content: '> ';
  color: var(--ink);
}
html[data-style="terminal"] :is(.section-title, .sheet-title, .sheet-h1, .card-sheet-title) {
  color: var(--term-cyan);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-align: left;
}
html[data-style="terminal"] :is(.eyebrow, .group-title, .rec-label, .dsection) {
  color: var(--term-slate);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}
html[data-style="terminal"] :is(.eyebrow, .group-title, .rec-label,
  .hero-note, .calc-note, .rec-fact)::before {
  content: '# ';
  color: var(--term-slate);
}
html[data-style="terminal"] .page-title::after {
  content: '';
  display: inline-block;
  width: 0.55em;
  height: 1em;
  margin-left: 0.3em;
  vertical-align: -0.1em;
  background: var(--ink);
  animation: terminalBlockCursor 1.2s steps(1, end) infinite !important;
}
@keyframes terminalBlockCursor {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* 面板、真实字符输出及内嵌汇总：无玻璃、渐变、装饰图片或投影。 */
html[data-style="terminal"] :is(.card, .hero, .pick, .sheet, .card-sheet,
  .skeleton-card, .search, .seg, .seg-page, .rec-foot, .appearance-option) {
  background: var(--card) !important;
  color: var(--text);
  border: 1px solid var(--sep);
}
html[data-style="terminal"] :is(.quote-card, .calc-box, .wt-daylen,
  .plan-lock-note, .plan-toggle, .price-strip, .rec-quote, .rec-calc,
  .rec-note-row, .dsplit > div, .dgrid > div) {
  background: var(--bg);
  border: 1px solid var(--sep);
}
html[data-style="terminal"] :is(.hero-label, .hero-note, .hero-split-label) {
  color: var(--text-2);
  opacity: 1;
}
html[data-style="terminal"] .hero-split { border-top-color: var(--sep); }
html[data-style="terminal"] .hero .text-secondary { color: var(--text-2); }
html[data-style="terminal"] .hero-value {
  color: var(--term-cyan);
  font-size: clamp(25px, 7vw, 36px);
  letter-spacing: 0;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
html[data-style="terminal"] .hero-value.wt-value { font-size: clamp(23px, 6.4vw, 30px); }
html[data-style="terminal"] :is(.hero-split-value, .row-amount, .kv-value,
  .range-stat-value, .profit-split-value, .plan-item-amt, .pick-value,
  .asset-value, .drow-value, .dsum-value, .chart-value, .price-value,
  .plan-next-amount, .plan-pmt-value, .profit-total-value) {
  letter-spacing: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 0;
}
html[data-style="terminal"] :is(.hero-split-value, .dsplit b, .dgrid b) {
  font-size: 14px;
  white-space: normal;
  overflow: visible;
}
html[data-style="terminal"] :is(.row-title, .quote-name, .rec-quote-name,
  .idx-row-name, .pick-title, .plan-item-title) { letter-spacing: 0; }
html[data-style="terminal"] :is(.row-sub, .asset-sub, .drow-sub, .pick-sub, .plan-item-sub) {
  white-space: normal;
  overflow-wrap: anywhere;
}
html[data-style="terminal"] :is(.section-more, .link-more, .link-btn, .rec-side, a) { color: var(--term-cyan); }
html[data-style="terminal"] .field-label { color: var(--term-magenta); }
html[data-style="terminal"] .idx-chg.flat { color: var(--text-2); }
html[data-style="terminal"] :is(.ico-circle, .pick-mark, .drow-mark, .tile-ico,
  .back-btn, .sheet-x, .rec-x) {
  color: var(--term-cyan);
  background: var(--bg);
  border: 1px solid var(--sep);
}
html[data-style="terminal"] :is(.back-btn, .sheet-x, .rec-x) { min-width: 40px; min-height: 40px; }
html[data-style="terminal"] :is(.asset-pct, .plan-tag) {
  color: var(--term-amber);
  background: var(--bg);
  border: 1px solid var(--sep);
}

/* tmux 风格状态栏：只显示真实导航标签，窗口编号不是业务状态。 */
html[data-style="terminal"] #app { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
html[data-style="terminal"] .tabbar {
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 520px;
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
  border-radius: 0 !important;
  background: var(--card) !important;
  border: 1px solid var(--term-slate);
  gap: 2px;
  counter-reset: terminal-window -1;
}
html[data-style="terminal"] .tabbar-item {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  min-width: 0;
  min-height: 44px;
  padding: 6px 2px;
  gap: 3px;
  color: var(--text-2);
  font-size: 11px;
  letter-spacing: 0;
  counter-increment: terminal-window;
}
html[data-style="terminal"] .tabbar-item::before { content: '[' counter(terminal-window) ']'; }
html[data-style="terminal"] .tabbar-item .icon { display: none; }
html[data-style="terminal"] .tabbar-item.active { background: var(--ink); color: var(--ink-invert); }

/* 输入控件继承当前明暗主题，保留原生日期/时间选择、透明点击层与自动填充可读性。 */
html[data-style="terminal"] :is(input, select, textarea) { color-scheme: inherit; }
html[data-style="terminal"] :is(.input, .rec-input, select, textarea) {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--sep);
  font-size: 16px;
}
html[data-style="terminal"] :is(.money-field, .suffix-field, .time-field, .rec-line) {
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--sep);
}
html[data-style="terminal"] :is(.money-field, .suffix-field, .time-field) input {
  min-width: 0;
  width: 100%;
  background: transparent;
  color: var(--text);
  border: 0;
}
html[data-style="terminal"] .suffix-field .input { padding-inline: 0; }
html[data-style="terminal"] :is(.input:focus, .rec-input:focus, select:focus,
  textarea:focus, .money-field:focus-within, .suffix-field:focus-within,
  .time-field:focus-within, .rec-line.is-focus, .rec-note-row:focus-within) {
  background-color: var(--bg);
  border-color: var(--ink);
}
html[data-style="terminal"] :is(input, textarea)::placeholder { color: var(--text-3); opacity: 1; }
html[data-style="terminal"] input:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--ink);
  /* 原生自动填充底色用瞬时背景裁切处理，不添加内阴影。 */
  background-clip: text !important;
}
html[data-style="terminal"] :is(.code-row, .sign-field) > .input { min-width: 0; width: 0; }
html[data-style="terminal"] .pw-eye { top: 0; bottom: 0; height: 40px; margin-block: auto; color: var(--term-cyan); }
html[data-style="terminal"] :is(input[type="checkbox"], input[type="radio"], input[type="range"]) { accent-color: var(--ink); }
html[data-style="terminal"] .time-field input::-webkit-calendar-picker-indicator { opacity: 0.8; }
html[data-style="terminal"] .chip-date:focus-within { border-color: var(--term-cyan); }

/* 实色按钮与选择态；正负、危险操作在最后单独保留中文市场方向色。 */
html[data-style="terminal"] :is(.btn, .sheet-btn, .rec-key.primary) {
  background: var(--ink);
  color: var(--ink-invert);
  border: 1px solid var(--ink);
  font-weight: 600;
}
html[data-style="terminal"] :is(.btn, .sheet-btn, .chip, .seg-item,
  .sheet-cancel, .rec-focus-item, .rec-key, .key, .wt-cmp, .appearance-option) {
  min-height: 44px;
}
html[data-style="terminal"] :is(.btn-ghost, .sheet-cancel, .seg-item, .chip,
  .rec-focus-item, .rec-key:not(.primary), .key, .wt-cmp, .sign-btn) {
  background: var(--bg);
  color: var(--text-2);
  border: 1px solid var(--sep);
}
html[data-style="terminal"] :is(.seg-item.active, .seg-page .seg-item.active,
  .chip.active, .rec-focus-item.is-on, .wt-cmp.is-on, .tile.is-on .tile-ico) {
  background: var(--ink);
  color: var(--ink-invert);
  border-color: var(--ink);
}
html[data-style="terminal"] .wt-cmp.is-on .wt-cmp-meta { color: var(--ink-invert); opacity: 1; }
html[data-style="terminal"] :is(.seg-item, .seg-page .seg-item) { white-space: normal; overflow-wrap: anywhere; }
html[data-style="terminal"] :is(.seg, .seg-page) { padding: 4px; gap: 4px; }
html[data-style="terminal"] :is(.seg-item, .seg-page .seg-item) { font-size: 13px; padding: 10px 4px; }
html[data-style="terminal"] :is(.chip, .rec-focus-item) { padding: 8px 10px; font-size: 12px; }
html[data-style="terminal"] :is(.btn, .sheet-btn, .chip, .seg-item, .key,
  .rec-key, .row-tap, .hero-tappable, .tile, .plan-toggle, .appearance-option):active {
  opacity: 1;
  border-color: var(--term-cyan);
}
@media (hover: hover) {
  html[data-style="terminal"] :is(button, a):not(:disabled):hover { color: var(--term-cyan); }
  html[data-style="terminal"] :is(.btn:not(.btn-ghost), .sheet-btn,
    .rec-key.primary, .tabbar-item.active, .seg-item.active,
    .seg-page .seg-item.active, .chip.active, .rec-focus-item.is-on,
    .wt-cmp.is-on):not(:disabled):hover {
    background-color: var(--term-cyan);
    color: var(--ink-invert);
    border-color: var(--term-cyan);
  }
}
html[data-style="terminal"] :is(button:disabled, input:disabled, select:disabled, textarea:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 显示 JS 已赋予的非空消息类型，不给空错误框、toast 或同步提示假造状态。 */
html[data-style="terminal"] .form-msg { text-align: left; overflow-wrap: anywhere; }
html[data-style="terminal"] .form-msg.ok { color: var(--ink); }
html[data-style="terminal"] .form-msg.err { color: var(--up); }
html[data-style="terminal"] .form-msg.ok:not(:empty)::before { content: '[0] OK '; }
html[data-style="terminal"] .form-msg.err:not(:empty)::before { content: '[1] ERR '; }

/* 弹层不再位移/缩放；用真实 open 类隐藏关闭态，避免遮罩拦截页面。 */
html[data-style="terminal"] :is(.sheet-mask, .card-expand-mask) {
  background: var(--bg);
  opacity: 1;
}
html[data-style="terminal"] :is(.sheet-mask, .card-expand-mask):not(.open) {
  /* JS 在下一帧加 open 前就把焦点移入弹层，不能用 visibility:hidden 阻止聚焦。 */
  opacity: 0;
  pointer-events: none;
}
html[data-style="terminal"] :is(.sheet, .card-sheet) {
  max-width: 100%;
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
html[data-style="terminal"] .card-sheet { max-height: 100%; }
html[data-style="terminal"] .card-sheet-body { opacity: 1; }
html[data-style="terminal"] :is(.sheet-head, .card-sheet-head) {
  background: var(--card);
  border-bottom: 1px solid var(--sep);
}
html[data-style="terminal"] .sheet-grip { background: var(--term-slate); height: 2px; }
html[data-style="terminal"] :is(.sheet-message, .sheet-sub, .sheet-hsub) { text-align: left; }
html[data-style="terminal"] :is(.toast, .update-bar) {
  left: 12px;
  right: 12px;
  width: fit-content;
  max-width: min(496px, calc(100% - 24px));
  margin-inline: auto;
  background: var(--card);
  color: var(--term-amber);
  border: 1px solid var(--term-amber);
  white-space: normal;
  overflow-wrap: anywhere;
}
html[data-style="terminal"] .toast { bottom: calc(80px + env(safe-area-inset-bottom)); }
html[data-style="terminal"] .update-bar { bottom: calc(64px + env(safe-area-inset-bottom)); }
html[data-style="terminal"] .rec { background: var(--bg); height: 100%; height: 100dvh; }
html[data-style="terminal"] .rec.is-closing { opacity: 0; pointer-events: none; }
html[data-style="terminal"] .rec-top { border-bottom: 1px solid var(--sep); }
html[data-style="terminal"] .rec-foot { border-radius: 0 !important; }
html[data-style="terminal"] :is(.rec-focus, .rec-quote-meta) { flex-wrap: wrap; }
html[data-style="terminal"] :is(.tile, .tile-sub, .rec-num, .rec-line-v) { min-width: 0; }
html[data-style="terminal"] .tile-sub { max-width: 100%; overflow-wrap: anywhere; letter-spacing: 0; }
html[data-style="terminal"] .rec-num { color: var(--term-cyan); letter-spacing: 0; }
html[data-style="terminal"] .rec-note-row { padding-inline: 8px; }
html[data-style="terminal"] .rec-note-input { background: transparent; color: var(--text); }
html[data-style="terminal"] .rec-pad { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html[data-style="terminal"] .tile-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
html[data-style="terminal"] .keypad { grid-template-columns: repeat(3, minmax(0, 74px)); }

/* 开关保持真实 on 类；方形滑块静态换位，不执行位移动画。 */
html[data-style="terminal"] .switch { background: var(--bg); border-color: var(--term-slate); }
html[data-style="terminal"] .switch i { background: var(--term-slate); }
html[data-style="terminal"] .switch.on { background: var(--ink); border-color: var(--ink); }
html[data-style="terminal"] .switch.on i { left: 21px; background: var(--ink-invert); }
html[data-style="terminal"] .lock-dots i { border-color: var(--term-slate); }
html[data-style="terminal"] .lock-dots i.filled { background: var(--ink); border-color: var(--ink); }
html[data-style="terminal"] :is(.plan-bar, .progress, .pick-bar, .bar) { background: var(--bg); }
html[data-style="terminal"] :is(.plan-bar-fill, .progress i, .pick-bar > i) { background: var(--ink); }

/* 图表保留真实 SVG 路径、方向色和结构比例，只移除渐变面积及圆点装饰。 */
html[data-style="terminal"] .chart { max-width: 100%; color: var(--term-slate); }
html[data-style="terminal"] :is(.chart-fill, .chart-end-circle) { display: none; }
html[data-style="terminal"] .chart-end-square { display: initial; }
html[data-style="terminal"]:root .chart path[fill="none"] { stroke-linecap: square; stroke-linejoin: miter; }
html[data-style="terminal"] .donut-ring { max-width: 100%; flex: none; }
html[data-style="terminal"] .donut-ring svg { display: block; max-width: 100%; }
html[data-style="terminal"] :is(.chart-axis, .idx-axis, .legend,
  .price-strip, .idx-trend-head, .spark-foot, .stack-actions) { flex-wrap: wrap; }
html[data-style="terminal"] :is(.chart-axis, .idx-axis) { gap: 6px; }
html[data-style="terminal"] .donut-legend-row { flex-wrap: wrap; }
html[data-style="terminal"] .donut-legend .amt { max-width: 100%; overflow-wrap: anywhere; }
html[data-style="terminal"] .idx-row { grid-template-columns: minmax(0, 1fr) auto 76px; gap: 8px; color: var(--text); }
html[data-style="terminal"] .idx-row.on { background: var(--bg); border-left: 1px solid var(--term-cyan); }
html[data-style="terminal"] .idx-pct { background: var(--bg); border: 1px solid var(--sep); }

/* 仅覆盖终端中的金融方向文本，避免青/品红的语法色覆盖红涨绿跌。
   实心方向按钮使用主题反色文字，不能把 ERR 红误改成上涨主按钮或相反。 */
html[data-style="terminal"] .up,
html[data-style="terminal"] .hero .up,
html[data-style="terminal"] .danger,
html[data-style="terminal"] .link-btn.danger { color: var(--up) !important; }
html[data-style="terminal"] .down,
html[data-style="terminal"] .hero .down { color: var(--down) !important; }
html[data-style="terminal"] :is(.idx-pct.up, .sign-btn.is-up, .sheet-btn.danger) {
  background: var(--up) !important;
  border-color: var(--up) !important;
  color: var(--ink-invert) !important;
}
html[data-style="terminal"] :is(.idx-pct.down, .sign-btn.is-down) {
  background: var(--down) !important;
  border-color: var(--down) !important;
  color: var(--ink-invert) !important;
}
html[data-style="terminal"] :is(.rec-sign, .ico-urgent) { background: var(--bg); color: var(--up); border: 1px solid var(--up); }
html[data-style="terminal"] .rec-sign.is-neg { color: var(--down); border-color: var(--down); }
html[data-style="terminal"]:root .ico-urgent { background: var(--bg); color: var(--up); }

/* 外观预览使用真实 terminal 类；不改其他风格的预览或主题规则。 */
html[data-style="terminal"] .appearance-option { gap: 8px; padding: 10px; }
html[data-style="terminal"] .appearance-option > :nth-child(2) { min-width: 0; }
html[data-style="terminal"] .appearance-option.active { border-color: var(--ink); outline: 1px solid var(--ink); }
html[data-style="terminal"] .appearance-check { color: var(--ink); }
html[data-style="terminal"] .appearance-swatch { width: 46px; padding: 5px; }

/* 不隐藏整页横向溢出来掩盖布局问题；长金额换行，窄屏行/网格可重排。 */
html[data-style="terminal"] :is(.row, .tx-row, .asset-row, .pick, .drow,
  .plan-item, .price-row, .plan-pmt, .plan-next-head, .profit-split, .dsplit, .wt-cmp) { min-width: 0; }
html[data-style="terminal"] :is(.row-right, .asset-right, .pick-right, .drow-right) { min-width: 0; max-width: 52%; flex-shrink: 1; }
html[data-style="terminal"] :is(.plan-2col, .range-stat, .kv-grid, .dgrid, .idx-split2) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
html[data-style="terminal"] :is(.plan-2col, .range-stat, .kv-grid, .dgrid) > * { min-width: 0; }
html[data-style="terminal"] :is(.calc-box .kv, .card-calc .kv, .rec-kv) { flex-wrap: wrap; }
html[data-style="terminal"] :is(.calc-box .kv b, .card-calc .kv b, .rec-kv b) { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
html[data-style="terminal"] :is(.plan-actions, .plan-next-head, .price-row, .plan-pmt, .wt-cmp) { flex-wrap: wrap; }
html[data-style="terminal"] :is(.plan-next-amount, .plan-pmt-value, .wt-cmp-pay, .plan-item-amt) { max-width: 100%; overflow-wrap: anywhere; }
html[data-style="terminal"] .plan-item-amt { flex: 0 1 auto; min-width: 0; max-width: 55%; }
html[data-style="terminal"] .chips-scroll { margin-inline: 0; padding-inline: 0; max-width: 100%; }
html[data-style="terminal"] :is(.idx-chips, .chips-scroll) { overscroll-behavior-x: contain; }
html[data-style="terminal"] pre { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 400px) {
  html[data-style="terminal"] :is(.card, .hero, .pick, .search, .seg-page) { margin-inline: 12px; }
  html[data-style="terminal"] .pick { width: calc(100% - 24px); gap: 8px; }
  html[data-style="terminal"] :is(.card, .hero) { padding: 16px 12px; }
  html[data-style="terminal"] .card-flush { padding: 0; }
  html[data-style="terminal"] .page-head { padding-inline: 12px; }
  html[data-style="terminal"] .section-head { margin-inline: 12px; gap: 8px; }
  html[data-style="terminal"] :is(.plan-cta, .form-actions, .sheet-body,
    .sheet-head, .sheet-foot, .sheet-note, .card-sheet-body, .rec-scroll, .rec-foot) { padding-inline: 12px; }
  html[data-style="terminal"] .sheet:not(.sheet-lg) { padding-inline: 12px; }
  html[data-style="terminal"] .rec-top { gap: 6px; padding-inline: 10px; }
  html[data-style="terminal"] .rec-seg .seg-item { font-size: 12px; padding-inline: 2px; }
  html[data-style="terminal"] .rec-side { font-size: 12px; padding-inline: 2px; }
  html[data-style="terminal"] .hero-split:not(.idx-split2) { flex-wrap: wrap; gap: 12px; }
  html[data-style="terminal"] .hero-split-item { flex-basis: 120px; }
  html[data-style="terminal"] :is(.row, .tx-row, .drow, .asset-row, .plan-item) { gap: 8px; }
  html[data-style="terminal"] .idx-row { grid-template-columns: minmax(0, 1fr) auto 70px; padding-inline: 12px; gap: 6px; }
  html[data-style="terminal"] :is(.idx-row-name, .idx-row-price) { font-size: 13px; }
  html[data-style="terminal"] .plan-2col { grid-template-columns: minmax(0, 1fr); }
  html[data-style="terminal"] .plan-actions { flex-direction: column; }
  html[data-style="terminal"] .rec-note-date { font-size: 10px; }
  html[data-style="terminal"] .rec-num { font-size: 28px; }
  html[data-style="terminal"] .appearance-option small { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-style="terminal"],
  html[data-style="terminal"] *,
  html[data-style="terminal"] *::before,
  html[data-style="terminal"] *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  html[data-style="terminal"] .page-title::after { animation: none !important; opacity: 1; }
}

/* 风格选择：真实按钮，无需重载页面；明暗偏好独立保存，三种风格均支持明暗/跟随系统。 */
.appearance-options { display: grid; gap: 10px; }
.appearance-option {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 76px;
  padding: 12px; text-align: left; font-family: var(--font);
  color: var(--text); background: var(--card); border: 1px solid var(--sep);
  border-radius: 16px; cursor: pointer;
}
.appearance-option.active { border-color: var(--ink); outline: 2px solid var(--ink); outline-offset: -2px; }
.appearance-option strong { display: block; font-size: 15px; }
.appearance-option small { display: block; margin-top: 4px; font-size: 12px; color: var(--text-2); }
.appearance-check { margin-left: auto; visibility: hidden; font-weight: 800; }
.appearance-option.active .appearance-check { visibility: visible; }
.appearance-option:hover { transform: translateY(-1px); }
.appearance-option:active { transform: translateY(1px); }
.appearance-option:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.appearance-swatch { width: 60px; height: 48px; padding: 7px; flex: none; display: flex; gap: 4px; align-items: flex-end; border-radius: 10px; }
.appearance-swatch i { display: block; width: 12px; height: 20px; border-radius: 3px; }
.appearance-swatch i:nth-child(2) { height: 31px; }
.appearance-swatch i:nth-child(3) { height: 25px; }
.swatch-glass { background: #e5e7ed; }
.swatch-glass i { background: #333338; border-radius: 6px; }
.swatch-geometric { background: #000; border-radius: 0; }
.swatch-geometric i { background: #fff; border-radius: 0; }
.swatch-geometric i:nth-child(2) { background: #c00000; }
/* 终端预览保留独立的原深色色样，不继承当前风格或明暗主题 token。 */
.swatch-terminal { background: #0A0E12; border: 1px solid #6272A4; }
.swatch-terminal i { background: #4AF626; }
.swatch-terminal i:nth-child(2) { background: #8BE9FD; }
.swatch-terminal i:nth-child(3) { background: #FF79C6; }
html[data-style="geometric"] .appearance-option { border: 2px solid var(--text); }
html[data-style="geometric"] .appearance-option.active { border-left: 8px solid #c00000; }
.chart-end-square { display: none; }
html[data-style="geometric"] .chart-fill, html[data-style="geometric"] .chart-end-circle { display: none; }
html[data-style="geometric"] .chart-end-square { display: initial; }
html:not([data-style="geometric"]) .chart path[fill="none"] { stroke-linecap: round; stroke-linejoin: round; }

/* 透明日期输入、复合输入与隐藏开关需要把焦点显示在可见容器上。 */
:where(html:not([data-style="geometric"])) :is(.money-field, .suffix-field, .time-field, .rec-note-row, .chip-date, .switch-row):focus-within {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  :where(html:not([data-style="geometric"])) *,
  :where(html:not([data-style="geometric"])) *::before,
  :where(html:not([data-style="geometric"])) *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}