/* ============================================================
   design.css — 品牌版式层（20261015）
   只做"设计美工"，不碰颜色变量 / 背景 / 字体栈 / 数据逻辑。
   颜色一律复用现有 CSS 变量（--accent/--txt/--panel/--line 等），
   让它在暗色体系下自然呈现，配合 Clear Deck 的版式手法：
   巨型标题 + 大数字 + 大圆弧 + 分隔条 + 卡片 + 章节锚点。
   ============================================================ */

/* ---------- 巨型 hero 标题（800 字重 + accent 句点） ---------- */
.ds-hero {
  font-family: var(--display, var(--font));
  font-weight: 800;
  font-size: clamp(30px, 5.4vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--txt);
  margin: 0;
}
.ds-hero .ds-accent { color: var(--accent); }
.ds-hero .ds-dot { color: var(--accent); }
.ds-hero-sub {
  font-size: 14px;
  color: var(--muted);
  margin-top: 14px;
  max-width: 560px;
  line-height: 1.7;
}

/* ---------- 大数字海报（数据当元素，不进表格） ---------- */
.ds-num {
  font-family: var(--display, var(--font));
  font-weight: 800;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--txt);
  font-variant-numeric: tabular-nums;
}
.ds-num.accent { color: var(--accent); }
.ds-num-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 8px;
  font-weight: 500;
}
.ds-num-hint { font-size: 11px; color: var(--txt-3, var(--muted)); margin-top: 2px; }

/* ---------- 大数字卡（三张并排） ---------- */
.ds-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 26px;
}
@media (max-width: 720px) { .ds-stat-row { grid-template-columns: 1fr; } }
.ds-stat {
  position: relative;
  padding: 20px 22px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel2, #121b27), var(--panel, #0d141e));
  overflow: hidden;
}
/* 左上角 accent 小标点，仿 Clear 的"句点"语言 */
.ds-stat::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: linear-gradient(180deg, var(--accent), transparent);
  opacity: 0.7;
}
.ds-stat .ds-num-hint .dot { color: var(--accent); }

/* ---------- 背景大圆弧（破除深底平面感） ---------- */
.ds-hero-wrap {
  position: relative;
  padding: 48px 24px 40px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.ds-hero-wrap::before {
  content: "";
  position: absolute;
  top: -180px; right: -140px;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0) 68%);
  pointer-events: none;
}
.ds-hero-wrap::after {
  content: "";
  position: absolute;
  bottom: -260px; left: -100px;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(125,165,215, 0.12), rgba(125,165,215, 0) 70%);
  pointer-events: none;
}
.ds-hero-wrap > * { position: relative; z-index: 1; }

/* ---------- 章节分隔条（超大字浅色背景层，正文浮上） ---------- */
.ds-divider {
  position: relative;
  padding: 18px 24px;
  margin: 8px 0 0;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.ds-divider .ds-ghost {
  position: absolute;
  top: 50%; left: 24px;
  transform: translateY(-50%);
  font-family: var(--display, var(--font));
  font-weight: 800;
  font-size: clamp(40px, 7vw, 84px);
  letter-spacing: -0.03em;
  color: var(--txt);
  opacity: 0.05;
  pointer-events: none;
  white-space: nowrap;
}
.ds-divider .ds-title {
  position: relative;
  font-family: var(--display, var(--font));
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.01em;
  color: var(--txt);
  display: flex;
  align-items: center;
  gap: 10px;
}
.ds-divider .ds-title::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}
.ds-divider .ds-title .sub { font-weight: 400; font-size: 12px; color: var(--muted); }

/* ---------- 特性卡（图标 + 一句 + 灰注） ---------- */
.ds-card {
  position: relative;
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel2, #121b27), var(--panel, #0d141e));
  overflow: hidden;
}
.ds-card .ds-card-title {
  font-family: var(--display, var(--font));
  font-weight: 700;
  font-size: 15px;
  color: var(--txt);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ds-card .ds-card-title .ic {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); flex: none;
}
.ds-card .ds-card-body { font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.6; }

/* ---------- 长页左栏锚点导航（章节脊柱） ---------- */
.ds-rail {
  position: sticky;
  top: calc(var(--header-h, 51px) + 16px);
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ds-rail a {
  font-size: 12px;
  color: var(--muted);
  padding: 7px 12px;
  border-left: 2px solid var(--line);
  text-decoration: none;
  transition: color .15s, border-color .15s;
}
.ds-rail a:hover { color: var(--txt); }
.ds-rail a.on { color: var(--txt); border-left-color: var(--accent); font-weight: 600; }
.ds-rail .ds-rail-cap {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--txt-3, var(--muted));
  padding: 0 12px 8px;
  writing-mode: horizontal-tb;
}

/* ---------- 流程框（套利链路：深色实心框 + 白箭头） ---------- */
.ds-flow {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex-wrap: wrap;
}
.ds-flow .ds-step {
  flex: 1;
  min-width: 140px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--txt);
  text-align: center;
  position: relative;
}
.ds-flow .ds-step .k { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); font-weight: 700; display: block; margin-bottom: 6px; }
.ds-flow .ds-arrow {
  flex: none;
  width: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 18px;
}

/* ---------- 面板头版式（小号 hero：18px 800 字重 + accent 句点） ---------- */
.ds-panel-title {
  font-family: var(--display, var(--font));
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--txt);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.ds-panel-title .ds-dot { color: var(--accent); }

/* ============================================================
   统一页头（全站每个页面的"身份证"）：
   eyebrow 分类小标 + 大标题(800) + 副题 + 右侧 meta
   ============================================================ */
.ds-pagehead {
  position: relative;
  padding: 24px 24px 18px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.ds-pagehead::before {
  content: "";
  position: absolute;
  top: -120px; right: -80px;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.10), rgba(var(--accent-rgb), 0) 68%);
  pointer-events: none;
}
.ds-pagehead > * { position: relative; z-index: 1; }
.ds-pagehead .ds-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.ds-pagehead .ds-eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
.ds-pagehead .ds-eyebrow .live {
  color: var(--muted);
  letter-spacing: 0.08em;
  font-weight: 500;
}
.ds-pagehead .ds-title {
  font-family: var(--display, var(--font));
  font-weight: 800;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--txt);
  margin: 0;
}
.ds-pagehead .ds-title .ds-dot { color: var(--accent); }
.ds-pagehead .ds-sub {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.6;
  max-width: 720px;
}
.ds-pagehead .ds-headmeta {
  position: absolute;
  right: 24px; bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--txt-3, var(--muted));
  font-variant-numeric: tabular-nums;
}
.ds-pagehead--compact { padding: 18px 24px 14px; }
.ds-pagehead--compact .ds-title { font-size: clamp(20px, 2.4vw, 26px); }

/* ---------- KPI 带（页面头下的一条大数字，横向排布） ---------- */
.ds-kpis {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex-wrap: wrap;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0));
}
.ds-kpis .ds-kpi {
  padding: 2px 28px 2px 0;
  margin-right: 28px;
  border-right: 1px solid var(--line);
  min-width: 96px;
}
.ds-kpis .ds-kpi:last-child { border-right: none; margin-right: 0; }
.ds-kpis .ds-kpi .v {
  font-family: var(--display, var(--font));
  font-weight: 800;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--txt);
  font-variant-numeric: tabular-nums;
}
.ds-kpis .ds-kpi .v .u { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 3px; }
.ds-kpis .ds-kpi .v.up { color: var(--up, var(--accent)); }
.ds-kpis .ds-kpi .v.down { color: var(--down, var(--red)); }
.ds-kpis .ds-kpi .v.accent { color: var(--accent); }
.ds-kpis .ds-kpi .k {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
  font-weight: 500;
}
@media (max-width: 860px) {
  .ds-kpis .ds-kpi { border-right: none; margin-right: 18px; }
}

/* ---------- 统一空态 ---------- */
.ds-empty {
  text-align: center;
  padding: 56px 24px;
  color: var(--muted);
}
.ds-empty .ds-empty-ic {
  width: 44px; height: 44px;
  margin: 0 auto 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  font-size: 18px;
}
.ds-empty .t { font-weight: 700; font-size: 15px; color: var(--txt); }
.ds-empty .d { font-size: 12.5px; margin-top: 6px; }

/* ============================================================
   家族覆盖（写死到底层：让 5 套旧样式体系视觉统一）
   只调字重/字距/圆角/边框这些"版式属性"，不碰颜色变量。
   ============================================================ */
/* term 家族（funding/signals/report/faq...）页头 h1 统一 800 字重 */
.term-hd h1, .wrap .head h1 {
  font-family: var(--display, var(--font));
  font-weight: 800 !important;
  letter-spacing: -0.02em;
}
/* perpdex 家族（markets/arbitrage/monitor）表格头统一 */
.px-wrap thead th {
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* 各家族面板卡圆角统一 */
.px-card, .term-panel, .mon-panel, .rpt-panel { border-radius: 14px; }
/* exec 家族 KPI 数字统一 tabular */
.ex-kpi .v, .ex-stat .v { font-variant-numeric: tabular-nums; }

/* ---------- 登录弹窗统一皮肤（auth.js .modal.lw-login-modal）---------- */
.modal.lw-login-modal { border-top: 2px solid var(--accent); }
.modal.lw-login-modal h3,
.modal.lw-login-modal h2 {
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--txt);
}
.modal.lw-login-modal h3::after,
.modal.lw-login-modal h2::after {
  content: ".";
  color: var(--accent);
}
.modal.lw-login-modal input {
  border-radius: 9px;
}
.modal.lw-login-modal .btn {
  font-weight: 700;
  border-radius: 9px;
}

/* ---------- 可视化概览带（arbitrage 页 ar-viz） ---------- */
.viz-overview {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 12px;
  margin-bottom: 14px;
}
.viz-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  padding: 14px 16px;
}
.viz-card-hd {
  font-size: 12px;
  font-weight: 800;
  color: var(--txt);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.viz-card-hd::after { content: "."; color: var(--accent); }
.viz-card-sub {
  font-weight: 400;
  color: var(--muted);
  font-size: 11px;
  margin-left: 8px;
}
.viz-band {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel2);
  padding: 14px 16px;
}
@media (max-width: 760px) {
  .viz-overview { grid-template-columns: 1fr; }
}

/* ==================== 【20261015 Boros 质感升级】====================
 * 只抄"质感手法"，配色全复用现有令牌（黑蓝绿品牌色不动）。
 * 零 JS、零请求，纯 CSS/静态 SVG，不拖首屏。
 */

/* ---------- 胶囊徽章 .ds-chip（涨/跌/平 三态 + 中性） ---------- */
.ds-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; line-height: 1.5;
  letter-spacing: 0.01em; white-space: nowrap;
  border: 1px solid var(--line);
  background: var(--panel2, #121b27); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.ds-chip.up { color: var(--up); border-color: rgba(var(--accent-rgb), .35); background: rgba(var(--accent-rgb), .09); }
.ds-chip.down { color: var(--down); border-color: rgba(248, 113, 113, .32); background: rgba(248, 113, 113, .09); }
.ds-chip.flat { color: var(--muted); }
.ds-chip .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }

/* ---------- 迷你走势图 .ds-spark（大数字卡右上角） ---------- */
.ds-spark { display: inline-block; width: 72px; height: 22px; vertical-align: middle; }
.ds-spark polyline { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ds-spark.up polyline { stroke: var(--up); }
.ds-spark.down polyline { stroke: var(--down); }
.ds-spark.flat polyline { stroke: var(--muted); }
.ds-spark .fill { fill: rgba(var(--accent-rgb), .12); stroke: none; }

/* ---------- 双栏交易台布局 .ds-dual（左主 + 右辅） ---------- */
.ds-dual { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 14px; align-items: start; }
.ds-dual .ds-main, .ds-dual .ds-side { min-width: 0; }
@media (max-width: 980px) { .ds-dual { grid-template-columns: 1fr; } }

/* ---------- 玻璃态高光边 .ds-glass（卡片顶部 inset 高光） ---------- */
.ds-glass {
  position: relative;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel2, #121b27), var(--panel, #0d141e));
  border-radius: var(--radius-card, 16px);
  overflow: hidden;
}
.ds-glass::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  pointer-events: none;
}
/* 大数字卡叠加 sparkline 的布局容器 */
.ds-stat .ds-stat-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}