/*
 * ════════════════════════════════════════════════════════════
 *  LRS TQQQ 策略研究 — Design System & Typography Rules v2
 * ════════════════════════════════════════════════════════════
 *
 *  TYPOGRAPHY SCALE
 *  ┌──────────────────────────────────────────────────────────┐
 *  │ 元素                  │ Size    │ Weight │ Color        │
 *  ├──────────────────────────────────────────────────────────┤
 *  │ 页面主标题             │ 2.4rem  │ 900    │ #0F172A      │
 *  │ 卡片/面板标题 (H2)     │ 1.05rem │ 700    │ #1E293B      │
 *  │ 编号徽章 (ch-num)      │ 0.58rem │ 800    │ 主题色       │
 *  │ 正文 / 要点            │ 0.95rem │ 400    │ #475569      │
 *  │ 重点结论 (hi)          │ 0.95rem │ 700    │ #B45309 琥珀 │
 *  │ 注释 / 斜体            │ 0.78rem │ 400    │ #64748B      │
 *  │ 数字英雄 (big-num)     │ 3.4rem  │ 900    │ 主题色       │
 *  │ 指标卡大数字 (mc-value)│ 1.6rem  │ 900    │ 主题色       │
 *  └──────────────────────────────────────────────────────────┘
 *
 *  SEMANTIC COLORS
 *    绿色 #16A34A → 正收益、盈利、策略优势、"是"分支
 *    红色 #DC2626 → 亏损、风险、"否"分支
 *    琥珀 #D97706 → 最重要结论（每卡片 ≤2 条）
 *    靛蓝 #4F46E5 → 主强调（标签/数字/链接）
 *    紫色 #7C3AED → 辅助强调
 *    加粗 → 章节标题、关键数字、关键结论
 *    斜体 → 注释、脚注、补充说明
 * ════════════════════════════════════════════════════════════
 */

/* ── Reset ─────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

/* Base: at 1280px → ~19px */
html { font-size: clamp(15px, 1.5vw, 20px); }

body {
  background: #F1F5F9;
  min-height: 100vh;
  font-family: 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', system-ui, sans-serif;
  color: #1E293B;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
}

/* ── Top Nav ───────────────────────────────────── */
.top-nav {
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 1.6rem;
  background: #FFFFFF;
  border-bottom: 1.5px solid #E2E8F0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  flex-shrink: 0;
  gap: 0.8rem;
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-brand {
  font-size: 0.78rem; font-weight: 700; color: #4F46E5;
  letter-spacing: 0.03em; text-decoration: none; flex-shrink: 0;
}
.nav-brand:hover { color: #3730A3; }
.nav-divider { width: 1px; height: 18px; background: #E2E8F0; flex-shrink: 0; }
.nav-chapter {
  font-size: 0.76rem; font-weight: 600; color: #1E293B;
  flex: 1; letter-spacing: 0.01em;
}
.nav-btn {
  padding: 0.28rem 0.9rem;
  background: #F8FAFC; border: 1.5px solid #E2E8F0;
  color: #64748B; border-radius: 6px; cursor: pointer;
  font-size: 0.72rem; font-family: inherit; font-weight: 600;
  letter-spacing: 0.03em; text-decoration: none; transition: all .18s; flex-shrink: 0;
}
.nav-btn:hover { background: #EEF2FF; border-color: #A5B4FC; color: #4338CA; }
.nav-counter {
  font-size: 0.68rem; color: #94A3B8;
  font-family: 'Inter', sans-serif; font-weight: 600;
  letter-spacing: 0.08em; flex-shrink: 0;
}

/* ── Main canvas ────────────────────────────────── */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.5% 2.2% 1.2%;
  height: calc(100vh - 44px);
  min-height: 0;
}

/* ── Page Header ─────────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.2%;
  padding-bottom: 1%;
  border-bottom: 1.5px solid #E2E8F0;
  flex-shrink: 0;
}
.page-num {
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: #4F46E5;
  background: #EEF2FF; border: 1px solid #C7D2FE;
  padding: 0.22rem 0.65rem; border-radius: 5px;
  font-family: 'Inter', sans-serif;
}
/* ① 页面主标题 */
.page-title {
  font-family: 'Inter', 'Noto Sans SC', sans-serif;
  font-size: 2.4rem; font-weight: 900; color: #0F172A;
  letter-spacing: -0.04em; line-height: 1;
}
.page-sub {
  font-size: 0.72rem; color: #94A3B8; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em; margin-left: auto;
}

/* ── Grids ──────────────────────────────────────── */
.g3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2%; flex: 1; min-height: 0; }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2%; flex: 1; min-height: 0; }
.g21 { display: grid; grid-template-columns: 1.45fr 1fr; gap: 1.2%; flex: 1; min-height: 0; }

/* ── Card / Panel ────────────────────────────────── */
.card, .panel {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  transition: border-color .2s, box-shadow .2s;
  min-height: 0;
}
.card:hover, .panel:hover {
  border-color: #C7D2FE;
  box-shadow: 0 4px 20px rgba(99,102,241,0.10);
}

/* Accent strip — 4px top */
.strip { height: 4px; flex-shrink: 0; }
.strip-amber  { background: linear-gradient(90deg, #D97706, #F59E0B, #D97706); }
.strip-indigo { background: linear-gradient(90deg, #4F46E5, #818CF8, #4F46E5); }
.strip-violet { background: linear-gradient(90deg, #7C3AED, #A78BFA, #7C3AED); }
.strip-green  { background: linear-gradient(90deg, #059669, #34D399, #059669); }

/* ─── Card Header ── 统一高度 & 中性底色 ──────────
   编号徽章 (ch-num) 保持主题色；标题 (ch-title) 统一深色
   所有 label-* 变体仅影响 ch-num，不影响 header 底色
*/
.card-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0 1.05rem;
  height: 2.8rem;           /* 固定高度：所有卡片标题行等高 */
  background: #F8FAFC;      /* 统一中性底色 */
  border-bottom: 1px solid #F1F5F9;
  flex-shrink: 0;
}

/* ③ 编号徽章 */
.ch-num {
  font-family: 'Inter', sans-serif;
  font-size: 0.58rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  flex-shrink: 0;
  padding: 0.14rem 0.46rem;
  border-radius: 4px;
  border: 1.5px solid currentColor;
  line-height: 1.6;
}
/* 各主题色 — 仅作用于 ch-num */
.label-amber  .ch-num { color: #B45309; background: #FFFBEB; }
.label-indigo .ch-num { color: #4338CA; background: #EEF2FF; }
.label-violet .ch-num { color: #6D28D9; background: #F5F3FF; }
.label-green  .ch-num { color: #166534; background: #F0FDF4; }

/* ② 卡片标题 */
.ch-title {
  font-size: 1.05rem; font-weight: 700; color: #1E293B; line-height: 1.3;
}

/* ─── Panel Header (02/03 用) ────────────────────── */
.panel-header {
  padding: 0 1.05rem;
  height: 2.8rem;           /* 与 card-header 等高 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid #F1F5F9;
  background: #F8FAFC;
  flex-shrink: 0;
}
/* 标题+编号并排行 */
.ph-title-row {
  display: flex; align-items: center; gap: 0.6rem;
}
/* panel 编号徽章 */
.ph-num {
  font-family: 'Inter', sans-serif;
  font-size: 0.58rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: #4F46E5; background: #EEF2FF; border: 1.5px solid #C7D2FE;
  padding: 0.14rem 0.46rem; border-radius: 4px; line-height: 1.6; flex-shrink: 0;
}
.panel-header h3 { font-size: 1.05rem; font-weight: 700; color: #1E293B; line-height: 1.25; }
.ph-sub { font-size: 0.64rem; color: #94A3B8; margin-top: 0.12rem; letter-spacing: 0.02em; }

/* panel header 有副标题时需要更高 */
.panel-header.has-sub { height: 3.6rem; }

/* ── Card / Panel Body ───────────────────────────── */
.card-body, .panel-body {
  padding: 0.9rem 1.05rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ⑩ 大数字 */
.big-num {
  font-family: 'Inter', sans-serif;
  font-size: 3.4rem; font-weight: 900;
  line-height: 1; letter-spacing: -0.05em;
}
.num-amber  { color: #D97706; }
.num-green  { color: #16A34A; }
.num-red    { color: #DC2626; }
.num-indigo { color: #4F46E5; }

.big-cap {
  font-size: 0.82rem; color: #64748B; margin-top: 0.4rem; line-height: 1.55;
}

.sep { height: 1px; background: #F1F5F9; margin: 0.65rem 0; flex-shrink: 0; }

/* ─── Section mini-heading ───────────────────────── */
.sec-h {
  font-size: 0.88rem; font-weight: 700; color: #334155;
  text-align: center; margin-bottom: 0.6rem;
  padding: 0.3rem 0;
  border-bottom: 1px dashed #E2E8F0;
}

/* ── ④ Bullet list ───────────────────────────────── */
ul.bl { list-style: none; flex: 1; }
ul.bl li {
  font-size: 0.95rem; color: #475569;
  padding: 0.28rem 0 0 1.1rem;
  position: relative; line-height: 1.6;
}
ul.bl li + li { margin-top: 0.06rem; }
ul.bl li::before {
  content: ''; position: absolute; left: 0; top: 0.65em;
  width: 5px; height: 5px; border-radius: 50%; background: #C7D2FE;
}
/* ⑤ 重点 — 琥珀加粗 */
ul.bl li.hi  { color: #B45309; font-weight: 700; }
ul.bl li.hi::before { background: #F59E0B; }

/* ⑥⑦ 语义色 */
.pos { color: #16A34A; font-weight: 600; }
.neg { color: #DC2626; font-weight: 600; }
/* ⑧ 注释斜体 */
.note { font-size: 0.78rem; font-style: italic; color: #64748B; }

/* ── Math comparison (01.html) ───────────────────── */
.mpair {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;
}
.mbox { border-radius: 9px; padding: 0.8rem 0.55rem; text-align: center; }
.mbox-g { background: #F0FDF4; border: 1.5px solid #86EFAC; }
.mbox-r { background: #FFF1F2; border: 1.5px solid #FDA4AF; }
.mbox .tk {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem; font-weight: 800; letter-spacing: 0.08em; margin-bottom: 0.28rem;
}
.mbox-g .tk { color: #166534; }
.mbox-r .tk { color: #9F1239; }
.mbox .eq { font-size: 0.75rem; color: #94A3B8; line-height: 1.55; }
.mbox .rs {
  font-family: 'Inter', sans-serif;
  font-size: 1.28rem; font-weight: 900; margin-top: 0.26rem;
}
.mbox-g .rs { color: #16A34A; }
.mbox-r .rs { color: #DC2626; }
.mvs { font-size: 0.62rem; font-weight: 700; color: #CBD5E1; text-align: center; }
.mnote {
  font-size: 0.80rem; color: #B45309; text-align: center;
  font-style: italic; font-weight: 600;
  background: #FFFBEB; border-radius: 6px; padding: 0.3rem 0.5rem; margin-bottom: 0.5rem;
}

/* ── Flow boxes (01.html) ────────────────────────── */
.flow { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.6rem; }
.fbox {
  flex: 1; border-radius: 8px; padding: 0.7rem 0.55rem;
  text-align: center; font-size: 0.9rem; font-weight: 600; line-height: 1.45;
}
.fp { background: #FFF1F2; border: 1px solid #FDA4AF; color: #BE123C; }
.fs { background: #F0FDF4; border: 1px solid #86EFAC; color: #15803D; }
.fa { font-size: 1.4rem; color: #6366F1; flex-shrink: 0; }

/* ── Flowchart (02.html) ─────────────────────────── */
.fc { display: flex; flex-direction: column; align-items: center; flex: 1; }
.fc-node {
  width: 90%; border-radius: 9px; text-align: center;
  font-size: 0.9rem; font-weight: 600; padding: 0.65rem 0.9rem;
}
.fc-start { background: #F8F8FF; border: 1.5px solid #C7D2FE; color: #3730A3; }
.fc-dec   { background: #F8F8FF; border: 2px solid #6366F1; color: #1E1B4B; font-size: 0.9rem; padding: 0.72rem 0.9rem; }
.fc-dec .hl { color: #16A34A; font-weight: 900; }
.fc-arr { color: #CBD5E1; font-size: 0.88rem; padding: 0.22rem 0; }
.fc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 5%; width: 100%; margin-top: 0.36rem; }
.fc-side  { display: flex; flex-direction: column; align-items: center; gap: 0.26rem; }
.fc-lbl   { font-size: 0.76rem; font-weight: 700; }
.fc-lbl.y { color: #16A34A; }
.fc-lbl.n { color: #DC2626; }
.fc-out {
  width: 100%; border-radius: 9px; text-align: center;
  font-size: 0.85rem; padding: 0.65rem 0.45rem;
}
.fc-out .fmain { font-weight: 700; font-size: 0.9rem; }
.fc-out .fsub  { font-size: 0.78em; margin-top: 0.28rem; opacity: 0.88; }
.fc-buy  { background: #F0FDF4; border: 1.5px solid #86EFAC; color: #166534; }
.fc-sell { background: #FFF1F2; border: 1.5px solid #FDA4AF; color: #9F1239; }
.fc-foot { margin-top: 0.5rem; font-size: 0.68rem; color: #94A3B8; text-align: center; line-height: 1.6; }

/* ── Right stacked panels ────────────────────────── */
.rstack { display: flex; flex-direction: column; gap: 1.2%; }
.rstack .panel { flex: 1; }

/* ── Assumption rows (02.html) ───────────────────── */
.ar { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.58rem 0; border-bottom: 1px solid #F8FAFC; }
.ar:last-child { border-bottom: none; }
.badge {
  width: 1.55rem; height: 1.55rem; border-radius: 50%; flex-shrink: 0;
  background: #EEF2FF; border: 1px solid #C7D2FE;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; font-weight: 700; color: #4338CA;
  font-family: 'Inter', sans-serif;
}
.al { font-size: 0.95rem; font-weight: 700; color: #1E293B; line-height: 1.3; }
.ad { font-size: 0.82rem; color: #64748B; margin-top: 0.18rem; line-height: 1.5; }

/* ── Comparison table (02.html) ──────────────────── */
.cmp-tbl {
  width: 100%; border-collapse: separate; border-spacing: 0;
  border-radius: 9px; overflow: hidden; border: 1px solid #E2E8F0;
}
.cmp-tbl th { padding: 0.62rem; font-size: 0.82rem; font-weight: 700; text-align: center; }
.cmp-tbl th.rh { background: #FFF1F2; border-right: 1px solid #E2E8F0; color: #BE123C; }
.cmp-tbl th.gh { background: #F0FDF4; color: #166534; }
.cmp-tbl td {
  padding: 0.56rem 0.68rem; font-size: 0.88rem;
  text-align: center; border-top: 1px solid #F1F5F9;
}
.cmp-tbl tr:nth-child(odd)  td { background: #FAFAFA; }
.cmp-tbl tr:nth-child(even) td { background: #FFFFFF; }
.cmp-tbl td.rc { color: #DC2626; font-weight: 500; }
.cmp-tbl td.gc { color: #16A34A; font-weight: 500; }

/* ── Metric card (03.html) ───────────────────────── */
.metric-card {
  background: #FFFFFF; border: 1.5px solid #E2E8F0; border-radius: 11px;
  padding: 0.72rem 1rem 0.8rem;
  display: flex; flex-direction: column;
}
/* 标签在上 */
.mc-label {
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: #94A3B8;
  margin-bottom: 0.3rem;
}
/* 数字居中对齐，Inter 字体 */
.mc-value {
  font-family: 'Inter', sans-serif;
  font-size: 1.65rem; font-weight: 900;
  letter-spacing: -0.03em; line-height: 1;
  margin-bottom: 0.28rem;
}
.mc-sub { font-size: 0.7rem; color: #94A3B8; }

/* 强调型指标卡 (带背景) */
.metric-card.accent-indigo { background: #F5F3FF; border-color: #C7D2FE; }
.metric-card.accent-red    { background: #FFF1F2; border-color: #FECDD3; }

.c-green  { color: #16A34A; }
.c-red    { color: #DC2626; }
.c-indigo { color: #4F46E5; }
.c-amber  { color: #D97706; }

/* ── Bar comparison (03.html) ────────────────────── */
.vs-bar { display: flex; flex-direction: column; gap: 0.82rem; }
.vs-label-row {
  display: flex; justify-content: space-between;
  font-size: 0.76rem; font-weight: 600; margin-bottom: 0.24rem;
}
.vs-track { height: 10px; background: #F1F5F9; border-radius: 5px; overflow: hidden; }
.vs-fill  { height: 100%; border-radius: 5px; }
.vs-fill-lrs { background: linear-gradient(90deg, #6366F1, #818CF8); }
.vs-fill-qqq { background: linear-gradient(90deg, #A78BFA, #C4B5FD); }

/* ── Backtest trade table (03.html) ──────────────── */
.bt-tbl {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 0.88rem; border-radius: 9px; overflow: hidden; border: 1px solid #E2E8F0;
}
.bt-tbl thead th {
  padding: 0.58rem 0.7rem; background: #F8FAFC; font-weight: 700;
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: #64748B; border-bottom: 1px solid #E2E8F0; text-align: center; white-space: nowrap;
}
.bt-tbl tbody td {
  padding: 0.46rem 0.7rem; border-bottom: 1px solid #F1F5F9; text-align: center; color: #374151;
}
.bt-tbl tbody tr:hover td { background: #F8FAFF; }
.bt-tbl .win  { color: #16A34A; font-weight: 700; }
.bt-tbl .loss { color: #DC2626; font-weight: 700; }

/* ── Chart image embed (03.html) ─────────────────── */
.chart-img-wrap {
  flex: 1; min-height: 0; overflow: hidden; border-radius: 10px;
  background: #0f172a;
  display: flex; align-items: center; justify-content: center;
}
.chart-img-wrap img {
  width: 100%; height: 100%; object-fit: contain;
}