/* =========================================================
   涨势猎手 · 功能页通用样式 (features/)
   复用 style.css 主题变量
   ========================================================= */
:root {
  /* 九紫离火运主题色 */
  --jz-purple: #7c3aed;
  --lh-red: #e0445b;
  --gold: #d4a574;
  --gold-light: #e8c9a0;
  --rose: #E8A0B4;
  --violet: #a78bfa;
  /* 背景层级 */
  --bg-0: #07040d;
  --bg-1: #0d0717;
  --bg-2: #140b22;
  --bg-3: #1b1030;
  --bg-4: #241542;
  /* 边框 */
  --border: rgba(167, 139, 250, 0.14);
  --border-strong: rgba(212, 165, 116, 0.32);
  --border-glow: rgba(124, 58, 237, 0.45);
  /* 文字 */
  --text-1: #f2ecfb;
  --text-2: #cbbfe0;
  --text-3: #8f83a8;
  /* 涨跌（A股红涨绿跌） */
  --up: #ff4d5e;
  --up-soft: rgba(255, 77, 94, 0.14);
  --down: #17c784;
  --down-soft: rgba(23, 199, 132, 0.12);
  --flat: #9a8fb0;
  /* 尺寸与特效 */
  --radius: 14px;
  --radius-lg: 20px;
  --glow-gold: 0 0 24px rgba(212, 165, 116, 0.28);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-1);
  color: var(--text-1);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
}

/* 顶部导航条 */
.f-topbar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 22px;
  background: rgba(13, 7, 23, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.f-back {
  color: var(--gold-light); text-decoration: none; font-size: 14px;
  padding: 6px 14px; border: 1px solid var(--border-strong); border-radius: 100px;
  white-space: nowrap;
}
.f-back:hover { background: rgba(212,165,116,0.1); }
.f-brand { font-size: 15px; font-weight: 700; color: var(--gold-light); white-space: nowrap; }
.f-title { font-size: 15px; color: var(--text-2); flex: 1; text-align: center; }

/* 内容容器 */
.f-container { max-width: 1100px; margin: 0 auto; padding: 26px 20px 60px; }
.f-hero { text-align: center; margin-bottom: 26px; }
.f-hero h1 { font-size: 30px; margin: 0 0 8px; font-weight: 800;
  background: linear-gradient(120deg, #fff 10%, var(--gold-light) 40%, var(--jz-purple) 70%, var(--rose) 90%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.f-hero p { color: var(--text-2); font-size: 14px; max-width: 680px; margin: 0 auto; }

/* 卡片 */
.f-card {
  background: linear-gradient(160deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--border); border-radius: 14px; padding: 18px;
  margin-bottom: 16px;
}
.f-card h3 { margin: 0 0 12px; font-size: 16px; color: var(--text-1); }
.f-card .sub { color: var(--text-3); font-size: 13px; }

/* 搜索框 + 按钮 */
.f-input {
  width: 100%; padding: 12px 14px; font-size: 14px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-1); color: var(--text-1); outline: none;
}
.f-input:focus { border-color: var(--border-strong); }
.f-btn {
  padding: 10px 22px; font-size: 14px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: 10px;
  background: rgba(212,165,116,0.08); color: var(--gold-light); transition: all .2s;
  white-space: nowrap;
}
.f-btn:hover { background: linear-gradient(135deg, var(--gold), #b0805a); color: #1a0f08; border-color: transparent; }
.f-btn.primary { background: linear-gradient(135deg, var(--gold), #b0805a); color: #1a0f08; border-color: transparent; font-weight: 700; }
.f-btn.ghost { background: transparent; color: var(--text-2); border-color: var(--border); }

/* 表格 */
.f-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.f-table th { text-align: left; color: var(--text-3); font-weight: 600; padding: 9px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.f-table td { padding: 9px 8px; border-bottom: 1px solid var(--border); }
.f-table tr:hover td { background: rgba(212,165,116,0.03); }
.up { color: #ff5b5b; }
.down { color: #2ecc71; }
.gold { color: var(--gold-light); }

/* 标签 */
.f-tag { display: inline-block; font-size: 12px; padding: 2px 9px; border-radius: 100px; border: 1px solid var(--border-strong); color: var(--gold-light); margin: 0 4px 4px 0; }
.f-tag.dim { color: var(--text-3); border-color: var(--border); }

/* 提示/免责 */
.f-note { font-size: 13px; color: var(--text-3); padding: 10px 14px; border-left: 3px solid var(--gold); background: rgba(212,165,116,0.05); border-radius: 0 10px 10px 0; margin: 14px 0; }

/* 数据来源标注（统一透明化） */
.f-src { display: flex; gap: 10px; align-items: flex-start; margin-top: 20px; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: 12px; background: linear-gradient(160deg, rgba(212,165,116,0.07), rgba(212,165,116,0.02)); }
.f-src .fs-ic { font-size: 16px; line-height: 1.5; flex: none; }
.f-src .fs-body { flex: 1; min-width: 0; }
.f-src .fs-line { font-size: 13px; color: var(--text-2); line-height: 1.6; }
.f-src .fs-line b { color: var(--gold-light); font-weight: 600; }
.f-src .fs-sub { font-size: 12px; color: var(--text-3); margin-top: 3px; line-height: 1.5; }
.f-src-outer { max-width: 1200px; margin: 20px auto; padding: 0 20px; }

.f-disclaimer { font-size: 13px; color: var(--text-3); line-height: 1.7; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,80,80,0.04); margin-top: 22px; }

/* 加载/空态 */
.f-loading { text-align: center; color: var(--text-3); padding: 30px; }
.f-empty { text-align: center; color: var(--text-3); padding: 24px; }

/* 网格布局 */
.f-grid { display: grid; gap: 14px; }
.f-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.f-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.f-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* 指标卡片 */
.f-stat { text-align: center; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-2); }
.f-stat .v { font-size: 22px; font-weight: 800; color: var(--gold-light); }
.f-stat .l { font-size: 13px; color: var(--text-3); margin-top: 4px; }

/* 响应式 */
@media (max-width: 760px) {
  .f-grid.cols-2, .f-grid.cols-3, .f-grid.cols-4 { grid-template-columns: 1fr; }
  .f-hero h1 { font-size: 24px; }
}

/* =========================================================
   实时感动效 · 全局统一 (从容慢速，华尔街终端质感)
   ========================================================= */

/* 实时心跳呼吸点 */
.live-dot { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #17c784; vertical-align: middle; margin-right: 7px; box-shadow: 0 0 8px rgba(23,199,132,.7); }
.live-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid rgba(23,199,132,.55); animation: live-ping 2.2s cubic-bezier(0,0,.2,1) infinite; }
@keyframes live-ping { 0% { transform: scale(.5); opacity: .9; } 70%,100% { transform: scale(2); opacity: 0; } }

/* 标题金色流光流动 */
.f-hero h1 { background-size: 240% auto; animation: flow-gold 8s linear infinite; }
@keyframes flow-gold { 0% { background-position: 0% center; } 100% { background-position: 240% center; } }

/* 卡片 hover 金色流光扫过 */
.tier-card, .factor-card, .flow-step { position: relative; overflow: hidden; }
.tier-card::after, .factor-card::after, .flow-step::after {
  content: ""; position: absolute; top: 0; left: -85%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(232,201,160,.10), transparent);
  transform: skewX(-18deg); transition: left .65s ease; pointer-events: none;
}
.tier-card:hover::after, .factor-card:hover::after, .flow-step:hover::after { left: 135%; }

/* =========================================================
   量化体系方法论 · 章节导航条
   ========================================================= */
.chapter-nav {
  margin-top: 26px; padding: 18px 20px;
  border: 1px solid var(--border-strong); border-radius: 14px;
  background: linear-gradient(160deg, var(--bg-3), var(--bg-2));
}
.cn-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
.cn-label { font-size: 15px; font-weight: 700; color: var(--gold-light); text-decoration: none; }
.cn-label:hover { text-decoration: underline; }
.cn-progress { font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.cn-dots { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.cn-dot {
  width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; text-decoration: none;
  border: 1px solid var(--border); color: var(--text-3); background: var(--bg-2);
  transition: all .2s;
}
.cn-dot:hover { border-color: var(--border-strong); color: var(--gold-light); transform: translateY(-2px); }
.cn-dot.active {
  background: linear-gradient(135deg, var(--gold), #b0805a);
  color: #1a0f08; border-color: transparent; box-shadow: var(--glow-gold);
}
.cn-dot.read:not(.active) { border-color: rgba(46,204,113,.5); color: #2ecc71; }
.cn-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cn-prev, .cn-next {
  font-size: 13px; color: var(--gold-light); text-decoration: none;
  border: 1px solid var(--border-strong); border-radius: 100px;
  padding: 8px 16px; transition: all .2s; white-space: nowrap;
}
.cn-prev:hover, .cn-next:hover { background: rgba(212,165,116,.12); }
.cn-prev.disabled, .cn-next.disabled { opacity: .35; pointer-events: none; }

/* =========================================================
   量化体系方法论 · 应用场景（本章在涨势猎手中的落地）
   ========================================================= */
.f-applied {
  margin-top: 26px; padding: 20px;
  border: 1px solid var(--border-strong); border-radius: 14px;
  background: linear-gradient(160deg, rgba(27,16,48,.55), rgba(20,11,34,.35));
}
.fa-head { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; flex-wrap: wrap; }
.fa-ic { width: 18px; height: 18px; color: var(--gold); flex-shrink: 0; }
.fa-title { font-size: 15px; font-weight: 700; color: var(--text-1); }
.fa-sub { font-size: 12px; color: var(--text-3); }
.fa-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.fa-item {
  display: flex; flex-direction: column; gap: 4px;
  padding: 13px 15px; text-decoration: none;
  background: rgba(13,7,23,.55); border: 1px solid var(--border); border-radius: 10px;
  transition: all .2s;
}
.fa-item:hover { border-color: var(--border-strong); background: rgba(212,165,116,.08); transform: translateY(-2px); }
.fa-name { font-size: 14px; font-weight: 700; color: var(--gold-light); display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.fa-name .fa-go { font-size: 13px; color: var(--gold); font-weight: 600; }
.fa-desc { font-size: 12px; color: var(--text-3); line-height: 1.55; }

/* =========================================================
   数据大屏 · 投屏模式（与首页一致，2026-09-16）
   ========================================================= */
.f-bigscreen-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 15px; font-size: 14px; font-weight: 600; cursor: pointer;
  color: var(--gold-light); background: rgba(212,165,116,0.08);
  border: 1px solid var(--border-strong); border-radius: 100px;
  transition: all .2s; white-space: nowrap; flex-shrink: 0;
}
.f-bigscreen-btn:hover { background: linear-gradient(135deg, rgba(124,58,237,.18), rgba(212,165,116,.10)); box-shadow: var(--glow-gold); }
.f-bigscreen-btn svg { width: 17px; height: 17px; flex-shrink: 0; }

/* 大屏态：隐藏干扰元素，放大关键信息 */
body.bigscreen .f-topbar { position: static; }
body.bigscreen .f-back { display: none; }
body.bigscreen .f-disclaimer { display: none; }
body.bigscreen .f-bigscreen-btn { color: #17c784; border-color: rgba(23,199,132,.5); }
body.bigscreen .f-container { max-width: none; padding: 22px 30px 48px; }
body.bigscreen .f-hero h1 { font-size: 46px; }
body.bigscreen .f-hero p { display: none; }
body.bigscreen .f-hero { margin-bottom: 18px; }
body.bigscreen .f-card h3 { font-size: 20px; }
body.bigscreen .f-card { padding: 24px; border-radius: 16px; }
body.bigscreen .f-table th { font-size: 15px; padding: 13px 11px; }
body.bigscreen .f-table td { font-size: 16px; padding: 13px 11px; }
body.bigscreen .f-table tbody tr:nth-child(even) td { background: rgba(212,165,116,0.04); }
body.bigscreen .f-table tbody tr:hover td { background: rgba(212,165,116,0.10); }
body.bigscreen .f-stat .v { font-size: 32px; }
body.bigscreen .f-stat .l { font-size: 14px; }
body.bigscreen .f-tag { font-size: 14px; }
body.bigscreen .f-note { font-size: 15px; }