@charset "UTF-8";
/* ==========================================================================
   metals-portal · 设计稿共享样式（design-system.css）
   用途：design/prototype/pages/*.html 统一引用，保证 24 个页面视觉口径一致。
   取值来源：uni-app/uni.scss（赤铜暖橙金主题），1 设计 px = 2rpx，设计宽 375。
   目标用户：40-60 岁废金属从业者（大字、大热区、无省略号、对比度 AA）。
   ========================================================================== */

/* ---------- 1. Design Tokens ---------- */
:root {
  /* 品牌（赤铜暖橙金） */
  --primary: #C8741E;          /* 主色：按钮 / 选中态 / 关键操作 */
  --primary-dark: #9A4E12;     /* 深铜金：按下态 / VIP 字 / 选中文字（白底 6.04:1） */
  --primary-light: #FBEEDD;    /* 浅铜金底：图标圆底 / 标签底 */
  --primary-gradient: linear-gradient(135deg, #E08A2E 0%, #B4530A 100%);
  --primary-gradient-soft: linear-gradient(135deg, #E2944A 0%, #C8741E 100%);
  --gradient-deep: linear-gradient(135deg, #B07C4E 0%, #855A33 100%);
  --border-brand: #F0D9BE;

  /* 语义涨跌（红涨绿跌 · 中国习惯） */
  --up: #E24B4A;               /* 原色：图形 / ≥20px 粗体数字 */
  --down: #16A34A;
  --flat: #9CA3AF;             /* ⚠ 仅装饰，承载信息须用 --flat-ink */
  --up-ink: #C62828;           /* ≤16px 文字（5.62:1） */
  --down-ink: #15803D;         /* 5.02:1 */
  --flat-ink: #6B7280;         /* 4.83:1 */
  --up-soft: #FDECEC;          /* 涨徽标浅底 */
  --down-soft: #E8F6EC;        /* 跌徽标浅底 */
  --flat-line: #E3E0DA;        /* 平徽标描边（描边式，禁实心红底白字） */

  /* 中性（暖灰阶） */
  --text: #1F2937;             /* 主文字 */
  --text-sub: #6B7280;         /* 次级文字 */
  --text-hint: #6B7280;        /* 占位 / 提示 */
  --bg: #F7F5F2;               /* 页面底（暖白） */
  --card: #FFFFFF;
  --card-press: #FCFAF8;       /* 按下态 */
  --border: #EDE7E0;
  --border-light: #F1ECE4;
  --arrow: #CBD5E1;            /* 箭头 / 次要图标 */
  --fill-gray: #F2F3F5;        /* 搜索框 / 输入框底 */
  --placeholder: #9AA0A6;
  --badge: #E53935;            /* 未读红点 */
  --bell: #E8A33D;
  --fill-warm: #FFF3E8;

  /* 行情专用 */
  --chip-bg: #F4F1EC;          /* 未选中筛选 chip 底 */
  --head-bg: #FCFAF8;          /* 表头底 */
  --datebar-bg: #FFFDFB;
  --row-alt: #FDFCFB;          /* 斑马纹 */
  --ov-bar-bg: #F0ECE6;        /* 占比条底槽 */
  --ov-bar-flat: #D8CFC4;

  /* 兜底态（今日未更新） */
  --warn-bg: #FFF8EE;
  --warn-line: #F2DFC2;
  --warn-text: #8A5A0B;
  --warn-bar: #D98A0B;
  --stale-bg: #FFF3E0;

  /* 快讯时间流 */
  --tl-line: #E7E0D6;
  --tl-node: #DCD3C7;
  --dategroup-bg: #F2EEE8;
  --dategroup-line: #E2DBD0;
  --detail-head-bg: #F5F1EB;

  /* 厂家报价（调价公告） */
  --notice-hl-bg: #FFFCF7;
  --notice-flag-text: #8A5A0B;
  --notice-flag-bg: #FFF4E2;
  --tomorrow-text: #B3362C;
  --tomorrow-bg: #FDEAE9;
  --add-entry-line: #E0D3C4;

  /* 骨架屏 */
  --skeleton-1: #F1EDE7;
  --skeleton-2: #F8F5F0;

  /* 圆角 / 阴影 / 动效 */
  --r-card: 14px;
  --r-sm: 8px;
  --r-xs: 6px;
  --r-pill: 999px;
  --shadow-card: 0 1px 2px rgba(31, 17, 4, .04);
  --shadow-sheet: 0 -16px 60px rgba(31, 17, 4, .18);
  --shadow-brand: 0 4px 14px rgba(180, 83, 10, .26);
  --ease: cubic-bezier(.4, 0, .2, 1);

  /* 手机常量 */
  --phone-w: 375px;
  --phone-h: 812px;
  --status-h: 44px;
  --nav-h: 44px;
  --tab-h: 62px;
  --safe-h: 34px;
}

/* ---------- 2. 文档底板 ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding: 0;
  background: #F2EFEA;
  color: var(--text);
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.doc-head {
  max-width: 1240px;
  margin: 0 auto;
  padding: 32px 32px 20px;
}
.doc-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.3px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.doc-path {
  font-size: 13px;
  font-weight: 500;
  color: var(--primary-dark);
  background: var(--primary-light);
  border-radius: var(--r-xs);
  padding: 3px 9px;
  font-family: "SFMono-Regular", Consolas, monospace;
}
.doc-sub { margin-top: 8px; color: var(--text-sub); font-size: 14px; max-width: 900px; }

/* ---------- 3. 双栏布局：手机 + 说明 ---------- */
.board {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px 80px;
  display: grid;
  grid-template-columns: 375px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.phone-col { position: sticky; top: 24px; }

/* ---------- 4. 手机壳 ---------- */
.phone {
  position: relative;
  width: var(--phone-w);
  height: var(--phone-h);
  background: var(--bg);
  border-radius: 40px;
  border: 10px solid #221B13;
  box-shadow: 0 24px 60px rgba(31, 17, 4, .24), 0 0 0 1px rgba(255, 255, 255, .5) inset;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: none;
}
/* 内容滚动区（超出可下滑查看） */
.phone-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.phone-body::-webkit-scrollbar { width: 4px; }
.phone-body::-webkit-scrollbar-thumb { background: rgba(31, 17, 4, .18); border-radius: 2px; }

/* 刘海 */
.notch {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 150px; height: 26px;
  background: #221B13;
  border-radius: 0 0 16px 16px;
  z-index: 40;
}

/* ---------- 5. 状态栏 ---------- */
.status-bar {
  height: var(--status-h);
  flex: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 20px 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: var(--card);
}
.status-bar.dark { color: #fff; background: transparent; }
.sb-time { letter-spacing: .2px; }
.sb-icons { display: flex; align-items: center; gap: 4px; }
.sb-icons i {
  display: block;
  background: currentColor;
  border-radius: 1px;
}
.sb-signal { width: 16px; height: 10px; clip-path: polygon(0 70%, 22% 70%, 22% 100%, 0 100%, 0 70%, 39% 45%, 61% 45%, 61% 100%, 39% 100%, 78% 18%, 100% 18%, 100% 100%, 78% 100%); }
.sb-wifi { width: 14px; height: 11px; clip-path: polygon(50% 0, 100% 38%, 82% 56%, 50% 26%, 18% 56%, 0 38%); }
.sb-batt { width: 22px; height: 11px; border: 1px solid currentColor; border-radius: 2px; background: none; position: relative; }
.sb-batt::after { content: ""; position: absolute; inset: 2px; right: 6px; background: currentColor; border-radius: 1px; }

/* ---------- 6. 导航栏 ---------- */
.navbar {
  height: var(--nav-h);
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--card);
  border-bottom: 1px solid var(--border-light);
  position: relative;
}
.navbar.brand { background: var(--primary-gradient); border-bottom: none; }
.navbar.brand .nav-title, .navbar.brand .nav-btn { color: #fff; }
.nav-left, .nav-right { min-width: 60px; display: flex; align-items: center; gap: 4px; }
.nav-right { justify-content: flex-end; }
.nav-center {
  flex: 1;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-center.is-left { text-align: left; padding-left: 4px; }
.nav-title-sm { font-size: 15px; }
.nav-btn {
  font-size: 14px;
  color: var(--primary);
  background: none;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  font-weight: 500;
}

/* 返回箭头 / 图标（纯 CSS 图形，避免依赖字体图标） */
.i-chev-left {
  width: 11px; height: 11px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  color: var(--text);
  flex: none;
}
.navbar.brand .i-chev-left { color: #fff; }
.i-chev-right {
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--arrow);
  border-top: 1.5px solid var(--arrow);
  transform: rotate(45deg);
  flex: none;
}
.icon-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text);
  position: relative;
  flex: none;
}
.icon-btn:active { background: rgba(31, 17, 4, .06); }
.icon-round { background: var(--fill-gray); }
.icon-round-warm { background: var(--fill-warm); color: var(--bell); }
.i-search { width: 15px; height: 15px; border: 2px solid currentColor; border-radius: 50%; position: relative; }
.i-search::after { content: ""; position: absolute; width: 7px; height: 2px; background: currentColor; right: -6px; bottom: -2px; transform: rotate(45deg); border-radius: 1px; }
.i-bell { width: 14px; height: 14px; border: 2px solid currentColor; border-bottom: none; border-radius: 7px 7px 0 0; position: relative; }
.i-bell::after { content: ""; position: absolute; left: -3px; right: -3px; bottom: -3px; height: 2px; background: currentColor; border-radius: 1px; }
.i-cal { width: 15px; height: 14px; border: 2px solid currentColor; border-radius: 3px; position: relative; }
.i-cal::before { content: ""; position: absolute; top: -4px; left: 3px; width: 2px; height: 4px; background: currentColor; }
.i-cal::after { content: ""; position: absolute; top: -4px; right: 3px; width: 2px; height: 4px; background: currentColor; }
.i-plus { width: 15px; height: 15px; position: relative; }
.i-plus::before, .i-plus::after { content: ""; position: absolute; background: currentColor; border-radius: 1px; }
.i-plus::before { left: 0; right: 0; top: 6.5px; height: 2px; }
.i-plus::after { top: 0; bottom: 0; left: 6.5px; width: 2px; }
.i-more { display: flex; gap: 3px; }
.i-more i { width: 3.5px; height: 3.5px; border-radius: 50%; background: currentColor; }
.i-filter { width: 14px; height: 12px; position: relative; }
.i-filter::before { content: ""; position: absolute; inset: 0; border: 2px solid currentColor; border-radius: 2px; }
.i-filter::after { content: ""; position: absolute; left: 3px; right: 3px; top: 4px; height: 2px; background: currentColor; }
.i-share { width: 14px; height: 14px; border: 2px solid currentColor; border-radius: 3px; position: relative; }
.i-share::after { content: ""; position: absolute; left: 3px; top: -5px; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(-45deg); }
.i-star { width: 15px; height: 15px; background: currentColor; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.i-star-o { width: 15px; height: 15px; border: 2px solid currentColor; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

/* 未读红点 */
.dot-badge {
  position: absolute;
  top: 3px; right: 3px;
  width: 8px; height: 8px;
  background: var(--badge);
  border: 1.5px solid #fff;
  border-radius: 50%;
}
.count-badge {
  position: absolute;
  top: -2px; right: -4px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  background: var(--badge);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  border-radius: 8px;
  border: 1.5px solid #fff;
}

/* ---------- 7. 页面内容通用 ---------- */
.screen { min-height: 100%; padding-bottom: 12px; }
.section { margin-top: 10px; }
.card {
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.card + .card { margin-top: 10px; }
.card-pad { padding: 14px; }
.muted { color: var(--text-sub); }
.hint { color: var(--text-hint); }

/* 区块小标题 */
.sec-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px;
  font-size: 13px;
  color: var(--text-sub);
  font-weight: 600;
}
.sec-title .more { color: var(--primary); font-weight: 500; display: flex; align-items: center; gap: 3px; }

/* ---------- 8. 列表行 ---------- */
.row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 14px;
  background: var(--card);
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
}
.row:last-child { border-bottom: none; }
.row:active { background: var(--card-press); }
.row-main { flex: 1; min-width: 0; }
.row-title { font-size: 15px; font-weight: 500; color: var(--text); line-height: 1.4; }
.row-sub { font-size: 12px; color: var(--text-sub); margin-top: 2px; line-height: 1.4; }
.row-val { font-size: 14px; color: var(--text-sub); flex: none; }

/* 设置分组 */
.group { margin-top: 10px; background: var(--card); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-card); }

/* ---------- 9. 行情表 ---------- */
.q-head {
  display: flex;
  align-items: center;
  padding: 9px 14px;
  background: var(--head-bg);
  border-bottom: 1px solid var(--border-light);
  font-size: 12px;
  color: var(--text-sub);
  font-weight: 600;
}
.q-row {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  background: var(--card);
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
}
.q-row:active { background: var(--card-press); }
.q-row.alt { background: var(--row-alt); }
.c-name { flex: 1.4; min-width: 0; }
.c-price { flex: 1; text-align: right; }
.c-chg { flex: 1.15; text-align: right; }
.q-name { font-size: 16px; font-weight: 500; color: var(--text); line-height: 1.3; }
.q-area { font-size: 12px; color: var(--text-sub); margin-top: 2px; }
.q-price { font-size: 20px; font-weight: 700; line-height: 1.1; letter-spacing: -.2px; }
.q-unit { font-size: 12px; color: var(--text-sub); margin-left: 2px; font-weight: 400; }
.q-range { font-size: 12px; color: var(--text-sub); margin-top: 3px; }

/* 涨跌值 */
.chg { font-size: 15px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.chg-pct { font-size: 12px; margin-top: 2px; font-weight: 500; }
.up { color: var(--up-ink); }
.up .q-price, .q-price.up { color: var(--up-ink); }
.down { color: var(--down-ink); }
.down .q-price, .q-price.down { color: var(--down-ink); }
.flat { color: var(--flat-ink); }

/* 涨跌徽标（pill） */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--chip-bg);
  color: var(--flat-ink);
}
.pill.up { background: var(--up-soft); color: var(--up-ink); }
.pill.down { background: var(--down-soft); color: var(--down-ink); }
.pill.flat { background: transparent; color: var(--flat-ink); border: 1px solid var(--flat-line); }
.pill.brand { background: var(--primary-light); color: var(--primary-dark); }
.pill.flag { background: var(--notice-flag-bg); color: var(--notice-flag-text); }
.pill.tmr { background: var(--tomorrow-bg); color: var(--tomorrow-text); }

/* 三角箭头 */
.tri { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; }
.tri.up { border-bottom: 6px solid currentColor; }
.tri.down { border-top: 6px solid currentColor; }

/* ---------- 10. 筛选 chip ---------- */
.chip-bar {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  overflow-x: auto;
  background: var(--card);
  border-bottom: 1px solid var(--border-light);
  scrollbar-width: none;
}
.chip-bar::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--chip-bg);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
}
.chip.on {
  background: var(--primary-light);
  color: var(--primary-dark);
  font-weight: 600;
  border-color: var(--border-brand);
}
.chip.plain { background: transparent; border-color: var(--border); }

/* 分段控件 */
.seg {
  display: flex;
  background: var(--chip-bg);
  border-radius: var(--r-pill);
  padding: 3px;
  gap: 2px;
}
.seg-item {
  flex: 1;
  text-align: center;
  padding: 6px 10px;
  font-size: 14px;
  color: var(--text-sub);
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  font-weight: 500;
}
.seg-item.on {
  background: var(--card);
  color: var(--primary-dark);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(31, 17, 4, .1);
}

/* 顶部 tab（下划线式） */
.tabs {
  display: flex;
  background: var(--card);
  border-bottom: 1px solid var(--border-light);
  padding: 0 8px;
}
.tab {
  flex: 1;
  text-align: center;
  padding: 10px 4px;
  font-size: 15px;
  color: var(--text-sub);
  cursor: pointer;
  position: relative;
  font-weight: 500;
}
.tab.on { color: var(--primary-dark); font-weight: 700; }
.tab.on::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 24px; height: 3px;
  background: var(--primary);
  border-radius: 2px;
}

/* ---------- 11. 搜索框 ---------- */
.searchbar { padding: 8px 14px 10px; background: var(--card); }
.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  background: var(--fill-gray);
  border-radius: var(--r-pill);
  color: var(--placeholder);
  font-size: 14px;
}

/* ---------- 12. 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 46px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  font-size: 16px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.btn-primary { background: var(--primary-gradient); color: #fff; box-shadow: var(--shadow-brand); }
.btn-primary:active { filter: brightness(.94); }
.btn-ghost { background: var(--card); color: var(--primary-dark); border: 1px solid var(--border-brand); }
.btn-gray { background: var(--fill-gray); color: var(--text-sub); }
.btn-block { display: flex; width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-sm { height: 34px; padding: 0 14px; font-size: 14px; }

/* ---------- 13. 空态 ---------- */
.empty {
  padding: 70px 40px;
  text-align: center;
  color: var(--text-sub);
}
.empty-ico {
  width: 64px; height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--fill-gray);
  display: flex;
  align-items: center;
  justify-content: center;
}
.empty-t { font-size: 15px; color: var(--text); font-weight: 500; }
.empty-d { font-size: 13px; margin-top: 6px; }

/* ---------- 14. 骨架屏 ---------- */
.sk {
  background: linear-gradient(90deg, var(--skeleton-1) 25%, var(--skeleton-2) 37%, var(--skeleton-1) 63%);
  background-size: 400% 100%;
  animation: sk 1.4s ease infinite;
  border-radius: var(--r-xs);
}
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.sk-line { height: 14px; margin-bottom: 8px; }
.sk-line.w60 { width: 60%; }
.sk-line.w40 { width: 40%; }

/* ---------- 15. 底部安全区 ---------- */
.safe-area { height: var(--safe-h); flex: none; background: var(--bg); }

/* ---------- 16. 底部 Tab Bar ---------- */
.tabbar {
  height: var(--tab-h);
  flex: none;
  display: flex;
  align-items: center;
  padding-bottom: 10px;
  background: var(--card);
  border-top: 1px solid var(--border);
}
.tb-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  color: var(--text-sub);
}
.tb-item.on { color: var(--primary); }
.tb-ico { width: 23px; height: 23px; display: flex; align-items: center; justify-content: center; }
.tb-label { font-size: 11px; font-weight: 700; color: var(--text-sub); }
.tb-item.on .tb-label { color: var(--primary-dark); }
/* Tab 图标（CSS 图形，24 个页面共用） */
.tb-house { width: 20px; height: 18px; background: currentColor; clip-path: polygon(50% 0, 100% 38%, 88% 38%, 88% 100%, 12% 100%, 12% 38%, 0 38%); }
.tb-chart { width: 18px; height: 18px; position: relative; }
.tb-chart::before { content: ""; position: absolute; left: 0; bottom: 0; width: 4px; height: 9px; background: currentColor; border-radius: 1px; }
.tb-chart::after { content: ""; position: absolute; right: 3px; bottom: 0; width: 4px; height: 18px; background: currentColor; border-radius: 1px; box-shadow: -7px -6px 0 -1px currentColor; }
.tb-brief { width: 19px; height: 17px; border: 2px solid currentColor; border-radius: 3px; position: relative; }
.tb-brief::after { content: ""; position: absolute; left: 2px; right: 2px; top: -4px; height: 6px; border: 2px solid currentColor; border-bottom: none; border-radius: 3px 3px 0 0; }
.tb-user { position: relative; width: 19px; height: 19px; }
.tb-user::before { content: ""; position: absolute; top: 0; left: 4.5px; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.tb-user::after { content: ""; position: absolute; bottom: 0; left: 0; width: 19px; height: 8px; border-radius: 9px 9px 0 0; background: currentColor; }
/* 名片 tab 图标：名片形（矩形卡 + 头像圆点 + 两行文字），库原无此类图标（2026-09-16 v3 新增） */
.tb-card {
  width: 20px; height: 14px;
  border: 2px solid currentColor;
  border-radius: 2px;
  position: relative;
}
.tb-card::before { content: ""; position: absolute; left: 2px; top: 2px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tb-card::after { content: ""; position: absolute; left: 11px; top: 3px; width: 5px; height: 2px; background: currentColor; box-shadow: 0 4px 0 currentColor; }

/* ---------- 17. 标注角标（设计稿 ↔ 说明对照） ---------- */
.anchor-tag {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(180, 83, 10, .4);
  z-index: 30;
  font-family: "SFMono-Regular", Consolas, monospace;
}
.anchor-wrap { position: relative; }
/* 标注辅助线（虚线框） */
.anchor-box { outline: 1.5px dashed var(--primary); outline-offset: 2px; position: relative; }

/* ---------- 18. 说明区（右侧） ---------- */
.spec { max-width: 780px; padding-top: 2px; }
.spec h2 {
  font-size: 19px;
  margin: 0 0 6px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border);
}
.spec-lead { color: var(--text-sub); font-size: 13px; margin: 0 0 20px; }
.spec-block {
  background: var(--card);
  border-radius: var(--r-card);
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-card);
  border-left: 3px solid var(--primary);
  scroll-margin-top: 16px;
}
.spec-block h3 {
  margin: 0 0 12px;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.spec-num {
  width: 22px; height: 22px;
  flex: none;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "SFMono-Regular", Consolas, monospace;
}
.spec-block ul { margin: 0; padding-left: 18px; }
.spec-block li { margin-bottom: 7px; font-size: 13.5px; line-height: 1.65; }
.spec-block li:last-child { margin-bottom: 0; }
.spec-block p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.65; }
.spec-block p:last-child { margin-bottom: 0; }
code {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12.5px;
  background: var(--fill-gray);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--primary-dark);
}
.kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-size: 12px;
  background: #fff;
  color: var(--text);
}
/* 状态表格 */
.spec-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px; }
.spec-table th, .spec-table td {
  text-align: left;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: top;
}
.spec-table th {
  background: var(--head-bg);
  color: var(--text-sub);
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
}
.spec-table tr:last-child td { border-bottom: none; }
/* 提示条 */
.note {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: 13px;
  line-height: 1.6;
  margin-top: 10px;
}
.note-warn { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-text); }
.note-info { background: #F6F8FB; border: 1px solid #E3EBF3; color: #3A5673; }
.note-ok { background: var(--down-soft); border: 1px solid #CDE9D6; color: var(--down-ink); }
.note b { font-weight: 700; }
/* 窄容器 / 纯文字的 note：必须显式改块级。
   .note 是 flex（说明区配图标用），若直接塞裸文本 + <b>，浏览器会把每段文字包成
   anonymous flex item 并压缩到最小内容宽度 → 窄屏下文字逐字竖排（已踩：card-ta 掩码提示条）。 */
.note-block { display: block; }

/* 状态徽标（说明区用） */
.st {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--r-xs);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.st-done { background: var(--down-soft); color: var(--down-ink); }
.st-todo { background: var(--warn-bg); color: var(--warn-text); border: 1px solid var(--warn-line); }
.st-info { background: var(--primary-light); color: var(--primary-dark); }
.st-removed { background: #ececec; color: #9ca3af; }

/* ---------- 18.5 行情页专用（报价 / 自选 / 快讯 / 走势图 共用） ---------- */

/* 品牌渐变头（含分段导航，替代标准 navbar） */
.hdr { flex: none; background: var(--primary-gradient); }
.hdr-status { height: var(--status-h); }
.hdr-main {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
}
.hdr-main .seg { flex: 1; background: rgba(255, 255, 255, .22); }
.hdr-main .seg-item { color: rgba(255, 255, 255, .82); font-size: 15px; }
.hdr-main .seg-item.on { background: #fff; color: var(--primary-dark); }
.hdr-ico {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  cursor: pointer;
  flex: none;
}

/* 三级筛选栏容器（每行 = 横滚 chip + 右侧固定入口） */
.ctx-bar { background: var(--card); padding-bottom: 8px; border-bottom: 1px solid var(--border-light); }
.ctx-row { display: flex; align-items: center; gap: 6px; padding: 0 12px; }
.ctx-row + .ctx-row { margin-top: 8px; }
.ctx-scroll {
  flex: 1;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0;
  scrollbar-width: none;
  min-width: 0;
}
.ctx-scroll::-webkit-scrollbar { display: none; }
.ctx-entry {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px 8px;
  border-radius: var(--r-pill);
  background: var(--primary-light);
  color: var(--primary-dark);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.ctx-entry.gray { background: var(--fill-gray); color: var(--text-sub); }
/* 品种行（换行 chip，固定宽 68px） */
.chip-wrap { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 12px 0; }
.chip.fixed { width: 68px; text-align: center; padding: 6px 0; font-size: 13px; }

/* 日期条 */
.datebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--datebar-bg);
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
}
.db-bar { width: 3px; height: 14px; background: var(--primary); border-radius: 2px; flex: none; }
.db-lbl { color: var(--text-sub); }
.db-date { font-weight: 700; color: var(--text); }
.db-count { color: var(--text-sub); font-size: 12px; }
.db-time { margin-left: auto; color: var(--text-sub); font-size: 12px; }
.datebar.warn {
  background: var(--warn-bg);
  border-bottom-color: var(--warn-line);
  color: var(--warn-text);
}
.datebar.warn .db-bar { background: var(--warn-bar); }
.warn-ico {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--warn-bar);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}

/* 列表表头 */
.lhead {
  display: flex;
  align-items: center;
  padding: 8px 14px;
  background: var(--head-bg);
  border-bottom: 1px solid var(--border-light);
  font-size: 12px;
  color: var(--text-sub);
  font-weight: 600;
}
.lh-name { flex: 1.4; }
.lh-price { flex: 1; text-align: right; }
.lh-chg { flex: 1.15; text-align: right; }

/* 报价行（行情三页共用） */
.qrow {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  background: var(--card);
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
}
.qrow.alt { background: var(--row-alt); }
.qrow:active { background: var(--card-press); }
.q-main { flex: 1.4; min-width: 0; }
.q-line1 { display: flex; align-items: baseline; }
.q-name { font-size: 16px; font-weight: 500; color: var(--text); line-height: 1.3; }
.q-range-row { margin-top: 3px; display: flex; align-items: baseline; gap: 2px; }
.q-range { font-size: 12px; color: var(--text-sub); }
.q-unit { font-size: 12px; color: var(--text-sub); font-weight: 400; }
.q-price-col { flex: 1; text-align: right; }
.q-price { font-size: 20px; font-weight: 700; line-height: 1.1; letter-spacing: -.2px; }
.q-chg-col { flex: 1.15; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--chip-bg);
  color: var(--flat-ink);
}
.badge.up { background: var(--up-soft); color: var(--up-ink); }
.badge.down { background: var(--down-soft); color: var(--down-ink); }
.badge.flat { background: transparent; color: var(--flat-ink); border: 1px solid var(--flat-line); }
.badge-arrow { font-size: 11px; line-height: 1; }
.q-pct { font-size: 12px; font-weight: 500; }

/* 列表收尾 / 加载 / 空态行 */
.tail { padding: 16px 0 8px; text-align: center; font-size: 12px; color: var(--text-sub); }
.loading-hint { padding: 14px 0; text-align: center; font-size: 12.5px; color: var(--text-sub); }
.empty-hint { padding: 48px 0; text-align: center; font-size: 13.5px; color: var(--text-sub); }
.load-error { padding: 60px 24px; text-align: center; }
.load-error-title { font-size: 14px; color: var(--text); display: block; }
.load-error-detail { font-size: 12px; color: var(--text-sub); display: block; margin-top: 6px; word-break: break-all; }
.retry-btn {
  display: inline-block;
  margin-top: 14px;
  padding: 8px 22px;
  border-radius: var(--r-pill);
  background: var(--primary-light);
  color: var(--primary-dark);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* 底部悬浮主按钮 */
.fab {
  position: absolute;
  right: 16px;
  bottom: 96px;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--primary-gradient);
  color: #fff;
  box-shadow: var(--shadow-brand);
  display: flex; align-items: center; justify-content: center;
  z-index: 35;
  cursor: pointer;
}

/* 底部面板（地区 / 栏目等选项面板） */
.mask { position: absolute; inset: 0; background: var(--color-mask, rgba(28, 18, 6, .42)); z-index: 50; }
.sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--card);
  border-radius: 20px 20px 0 0;
  box-shadow: var(--shadow-sheet);
  z-index: 51;
  padding-bottom: var(--safe-h);
  max-height: 60%;
  display: flex;
  flex-direction: column;
}
.sheet-grab { width: 36px; height: 4px; border-radius: 2px; background: var(--add-entry-line); margin: 8px auto 4px; }
.sheet-title { text-align: center; font-size: 15px; font-weight: 700; padding: 6px 0 10px; border-bottom: 1px solid var(--border-light); }
.sheet-body { overflow-y: auto; }

/* ---------- 18.6 库存分组表（报价页 · 金属库存栏目） ----------
   与 .qrow（三列行情行）的区别：库存是多列横排对比表，且列数随交易所不同
   （LME 6 列 / SHFE·COMEX 3 列），所以按「市场分组 + 组内独立表头」组织，
   不强行统一列数——统一 6 列会让 SHFE 三列全「—」，是纯噪音。 */
.stk-group { background: var(--card); border-bottom: 6px solid var(--bg); }
.stk-ghead {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px 9px;
  background: var(--head-bg);
  border-bottom: 1px solid var(--border-light);
}
.stk-gname { font-size: 14px; font-weight: 700; color: var(--text); }
.stk-gtag {
  padding: 1px 6px; border-radius: var(--r-pill);
  background: var(--primary-light); color: var(--primary-dark);
  font-size: 11px; font-weight: 600;
}
.stk-gmeta { margin-left: auto; font-size: 12px; color: var(--text-sub); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stk-row {
  display: flex; align-items: center;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-light);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.stk-row:last-child { border-bottom: none; }
.stk-row.alt { background: var(--row-alt); }
.stk-row:active { background: var(--card-press); }
.stk-row.on { background: var(--fill-warm); }
.stk-th { padding: 7px 14px; background: #F8F6F3; cursor: default; }
.stk-td { flex: 1; min-width: 0; font-size: 14px; color: var(--text); }
.stk-td.r { text-align: right; }
.stk-th .stk-td { font-size: 12px; color: var(--text-sub); font-weight: 600; }
.stk-v { flex: .9; font-size: 15px; font-weight: 600; }        /* 品种 */
.stk-k { flex: 1.35; font-size: 16px; font-weight: 700; }       /* 库存主值 */
.stk-c { flex: .95; font-size: 14px; font-weight: 600; }        /* 增减（染色） */
.stk-w { flex: 1.2; }                                           /* 注销仓单 */
.stk-wc { flex: 1; font-weight: 600; }                          /* 注销增减（染色） */
.stk-p { flex: .75; color: var(--text-sub); }                   /* 占比 */
.stk-na { color: var(--flat-ink); font-weight: 400; }           /* 无数据「—」 */
.stk-tip { padding: 10px 14px 16px; background: var(--card); font-size: 12px; color: var(--flat-ink); line-height: 1.65; }
.stk-exp { padding: 10px 14px; background: var(--fill-warm); border-bottom: 1px solid var(--border-light); }
.stk-exp-t { font-size: 12px; font-weight: 600; color: var(--text-sub); margin-bottom: 6px; }
.stk-exp-r { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.stk-exp-d { width: 58px; color: var(--text-sub); }
.stk-exp-v { width: 78px; text-align: right; font-weight: 700; }
.stk-exp-c { font-weight: 600; }

/* ---------- 19. 响应式（窄屏改为上下） ---------- */
@media (max-width: 1100px) {
  .board { grid-template-columns: 1fr; gap: 32px; }
  .phone-col { position: static; display: flex; justify-content: center; }
  .spec { max-width: 100%; }
}
@media print {
  body { background: #fff; }
  .phone { box-shadow: none; }
}