/* QD回测 · 站点样式（深色金融主题） */
:root {
  --bg: #0d1117;
  --bg2: #131a24;
  --panel: #161e29;
  --panel2: #1c2534;
  --border: #263042;
  --text: #dbe2ee;
  --muted: #8a94a7;
  --accent: #4f8cff;
  --accent2: #7aa8ff;
  --up: #e05252;      /* A股红涨 */
  --down: #2ea36b;    /* 绿跌 */
  --gold: #e8b339;
  --radius: 10px;
  font-size: 15px;
  /* 全站深色主题：日期输入的分段文字/日历弹层、下拉弹层、滚动条这些原生控件
     按 dark 方案渲染——否则 date 输入的值是浅色主题的深字，压在深底上看不清 */
  color-scheme: dark;
}
* { box-sizing: border-box; }
/* hidden 属性必须永远赢过任何作者 display 规则：抽屉遮罩曾因 .side-backdrop{display:block}
   把 [hidden] 的 UA 样式压掉，整层盖住页面导致全站点不了（10-02 实测）。 */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  line-height: 1.6;
}
a { color: var(--accent2); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: Consolas, "JetBrains Mono", monospace; }

/* 顶栏 */
.nav {
  display: flex; align-items: center; gap: 18px;
  padding: 0 22px; height: 58px;
  background: var(--bg2); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}
.nav .logo { font-weight: 700; font-size: 18px; color: var(--text); letter-spacing: 1px; }
.nav .logo span { color: var(--accent); }
.nav a.item { color: var(--muted); padding: 4px 2px; }
.nav a.item:hover, .nav a.item.active { color: var(--text); }
.nav .spacer { flex: 1; }
.nav .who { color: var(--muted); font-size: 13px; }
/* 顶栏文案任何时候都整词展示：中档宽度（700~900px）塞得紧，
   不加 nowrap 时"回测台"这类词会被竖着折成两行（768px 实测） */
.nav .logo, .nav a.item, .nav .who { white-space: nowrap; }
/* 窄屏：整条换行而不是把每个词竖着折断，行高交给 wrap 处理 */
@media (max-width: 700px) {
  .nav { height: auto; flex-wrap: wrap; gap: 4px 10px; padding: 9px 12px; }
  .nav #nav-auth { gap: 10px !important; flex-wrap: wrap; }
  .nav .who .badge { display: none; }
}
.badge {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 12px; border: 1px solid var(--border); color: var(--muted);
}
.badge.pro { color: var(--gold); border-color: rgba(232,179,57,.45); }

/* 布局 */
.wrap { max-width: 1180px; margin: 0 auto; padding: 26px 22px; }
.hero { padding: 72px 0 46px; text-align: center; }
.hero h1 { font-size: 40px; margin: 0 0 14px; letter-spacing: 2px; }
.hero h1 em { color: var(--accent); font-style: normal; }
.hero p.sub { color: var(--muted); font-size: 17px; margin: 0 auto 30px; max-width: 640px; }
.btn {
  display: inline-block; border: 1px solid var(--accent); background: var(--accent);
  color: #fff; padding: 10px 26px; border-radius: 8px; font-size: 15px; cursor: pointer;
}
.btn:hover { background: var(--accent2); text-decoration: none; }
.btn.ghost { background: transparent; color: var(--accent2); }
.btn.small { padding: 6px 14px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.grid { display: grid; gap: 16px; }
.grid.cols3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .grid.cols3, .grid.cols2 { grid-template-columns: 1fr; } }

/* hero 按钮行：320px 这类窄屏下两个按钮放不下一行，换行而不是撑出横向滚动 */
.hero-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* 首页内嵌回测台（仅游客可见，page-home.js 控制）：iframe 高度由 JS 跟内容对齐 */
.home-demo { margin-top: -6px; }
.home-demo iframe {
  display: block; width: 100%; height: 760px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color-scheme: dark;
}

.card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
}
.card h3 { margin: 0 0 8px; font-size: 16px; }
.card p { margin: 6px 0; color: var(--muted); font-size: 14px; }

/* 表单 */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 5px; }
.field input, .field select {
  width: 100%; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg2); color: var(--text);
  font-size: 14px; outline: none;
}
.field input:focus, .field select:focus { border-color: var(--accent); }
.form-narrow { max-width: 400px; margin: 60px auto; }
/* 通知/偏好这类"一行一个开关"的排版（admin.css 里的 .switch 不随站点页加载） */
.opt-row { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin: 8px 0; cursor: pointer; }
.opt-row input { width: auto; margin-top: 3px; flex: 0 0 auto; }
.opt-row .badge { flex: 0 0 auto; }
.msg { padding: 10px 14px; border-radius: 8px; margin: 12px 0; font-size: 14px; display: none; }
.msg.err { background: rgba(224,82,82,.12); border: 1px solid rgba(224,82,82,.4); color: #ff9c9c; display: block; }
.msg.ok { background: rgba(46,163,107,.12); border: 1px solid rgba(46,163,107,.4); color: #7fd8ae; display: block; }

/* 密码输入行（眼睛切换） */
.pw-row { position: relative; }
.pw-row input { padding-right: 42px; }
.pw-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; font-size: 15px;
  color: var(--muted); padding: 4px 6px; line-height: 1;
}
.pw-eye:hover { color: var(--text); }

/* 邀请码：注册页的即时预检提示 + 账户页的码与用量行 */
.inv-tip { font-size: 12.5px; color: var(--muted); margin-top: 5px; min-height: 16px; }
.inv-tip.ok { color: #7fd8ae; }
.inv-tip.bad { color: #ff9c9c; }
.inv-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.inv-code {
  font-family: ui-monospace, Consolas, monospace; font-size: 18px; letter-spacing: 2px;
  padding: 6px 12px; border: 1px dashed var(--border); border-radius: 8px;
  background: var(--bg2); color: var(--gold); user-select: all;
}
.inv-used { font-size: 13px; color: var(--muted); }
.inv-item { display: flex; gap: 8px; font-size: 13px; color: var(--muted); padding: 3px 0; flex-wrap: wrap; }
.inv-item b { color: var(--text); font-weight: 600; }

/* 到期提醒角标（导航会员旁） */
.badge.warn { color: #ffb45e; border-color: rgba(255,180,94,.45); }

/* 站内提醒铃铛（导航右侧，登录后可见；有未读才亮） */
.nav-bell { position: relative; font-size: 17px; line-height: 1; text-decoration: none; }
.nav-bell:hover { text-decoration: none; transform: scale(1.08); }
.bell-n {
  position: absolute; top: -7px; right: -11px;
  background: var(--up); color: #fff; font-size: 10px; line-height: 1;
  padding: 2px 5px; border-radius: 999px; font-family: Consolas, monospace;
}

/* 表格 */
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
table.tbl th, table.tbl td { padding: 7px 10px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
table.tbl th { color: var(--muted); font-weight: 500; }
table.tbl th:first-child, table.tbl td:first-child { text-align: left; }
table.tbl tr:hover td { background: rgba(255,255,255,.02); }
.up { color: var(--up); }
.down { color: var(--down); }

/* 回测工作台 */
.work { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .work { grid-template-columns: 1fr; } }
.side .card { margin-bottom: 14px; }
.controls .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
@media (max-width: 900px) { .metrics { grid-template-columns: repeat(2, 1fr); } }
.metric { background: var(--panel2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; }
.metric .k { color: var(--muted); font-size: 12px; }
.metric .v { font-size: 19px; font-weight: 600; margin-top: 2px; }
.metric .s { color: var(--muted); font-size: 12px; }
.chart { width: 100%; height: 380px; }
.chart.small { height: 300px; }
.sec-title { font-size: 15px; font-weight: 600; margin: 20px 0 8px; color: var(--text); }
.searchbox { position: relative; }
.searchbox .results {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
  background: var(--panel2); border: 1px solid var(--border); border-radius: 8px;
  max-height: 300px; overflow: auto; display: none;
}
.searchbox .results.show { display: block; }
.searchbox .results div { padding: 8px 12px; cursor: pointer; font-size: 14px; }
.searchbox .results div:hover { background: rgba(255,255,255,.05); }
.searchbox .results .sub { color: var(--muted); font-size: 12px; }

/* 权益/明细切换 */
.tabs { display: flex; gap: 4px; margin: 18px 0 10px; border-bottom: 1px solid var(--border); }
.tabs button {
  background: none; border: none; color: var(--muted); padding: 8px 16px;
  cursor: pointer; font-size: 14px; border-bottom: 2px solid transparent;
}
.tabs button.active { color: var(--text); border-bottom-color: var(--accent); }
.scrollbox { max-height: 420px; overflow: auto; }

/* 文档 */
.docs h2 { border-left: 3px solid var(--accent); padding-left: 12px; margin-top: 40px; }
/* 战法速览卡（docs 顶部） */
.qk-card h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qk-stats { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin: 8px 0; }
.qk-stats b { color: var(--text); font-variant-numeric: tabular-nums; }
.qk-more { font-size: 12.5px; }
.docs pre {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
  padding: 14px; overflow: auto; font-size: 13px; color: #b8c4d8;
}
.docs table.tbl td, .docs table.tbl th { text-align: left; }
.notice {
  background: rgba(232,179,57,.08); border: 1px solid rgba(232,179,57,.35);
  border-radius: 8px; padding: 12px 16px; color: #e8cf9a; font-size: 14px; margin: 16px 0;
}
footer { border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; padding: 22px; text-align: center; margin-top: 60px; }
/* 页脚备案行：管理后台配置 site.icp / site.police 后由 api.js 注入；
   没有原生 footer 的页面（回测台/信号/登录注册）自己补一条 icp-foot */
footer .icp-line { margin-top: 8px; font-size: 12px; }
footer .icp-line a { color: var(--muted); text-decoration: none; }
footer .icp-line a:hover { color: var(--text); }
footer.icp-foot { border-top: 0; padding-top: 0; margin-top: 30px; }

/* ---------- 会员页：在线支付与订单 ---------- */
.msg.info { background: rgba(79,140,255,.12); border: 1px solid rgba(79,140,255,.4); color: var(--accent2); display: block; }
.tier-list { display: grid; gap: 10px; margin-top: 12px; }
.tier {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--panel2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px;
}
.tier-l { display: flex; align-items: baseline; gap: 10px; min-width: 140px; }
.tier-name { font-size: 15px; font-weight: 600; }
.tier-days { color: var(--muted); font-size: 12px; font-weight: 400; }
.tier-price { color: var(--gold); font-size: 18px; font-weight: 700; }
.tier-r { display: flex; gap: 8px; flex-wrap: wrap; }
.payform { display: inline; margin: 0; }
.orders-h { color: var(--muted); font-size: 13px; margin: 18px 0 6px; }
.orders-empty { color: var(--muted); font-size: 13px; margin-top: 14px; }
.order { border-top: 1px solid var(--border); padding: 9px 2px; }
.order-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.order-name { font-weight: 600; }
.order-type { color: var(--muted); font-size: 12px; }
.order-left { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.order-status { font-size: 12px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }
.order-status.s-paid { color: #7fd8ae; border-color: rgba(46,163,107,.45); }
.order-status.s-pending { color: #ffb45e; border-color: rgba(255,180,94,.45); }
.order-status.s-mismatch, .order-status.s-refunded { color: #ff9c9c; border-color: rgba(224,82,82,.45); }
.order-sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 12px; margin-top: 3px; }
.order-sub .mono { font-size: 12px; }
.mini {
  background: none; border: 1px solid var(--border); color: var(--muted);
  border-radius: 6px; padding: 2px 10px; cursor: pointer; font-size: 12px;
}
.mini:hover { color: var(--text); border-color: var(--accent); }
.mini.danger:hover { color: #ff9c9c; border-color: rgba(224,82,82,.5); }
.mini:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 560px) {
  .tier { padding: 12px; }
  .tier-r { width: 100%; }
  .tier-r .btn { flex: 1; }
}

/* ---------- 手机端整体适配（≤640px，覆盖所有站点页） ---------- */
@media (max-width: 640px) {
  /* 首屏文案与大按钮：40px 标题在 360px 下每行只放得下 7 个字，
     用 clamp 随视口收缩；内边距收窄给数据卡片让位 */
  .hero { padding: 44px 0 30px; }
  .hero h1 { font-size: clamp(28px, 7.4vw, 40px); }
  .hero p.sub { font-size: 15.5px; }
  .wrap { padding: 18px 14px; }

  /* iOS Safari 会在输入框字号 <16px 时聚焦自动放大整页，回弹很打断操作；
     手机端把可输入控件统一提到 16px（勾选框不受影响，页面缩放无法触发） */
  input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]),
  select { font-size: 16px; }

  /* 手机端主要点击对象是表格行和页签：触控目标按 44px 一档放宽 */
  .btn { padding: 11px 22px; }
  .tabs button { padding: 10px 14px; }
  .list-tabs button { padding: 8px 12px; }
  /* 文档页的锚点表和账户页的窄表本来不进 scrollbox，允许表头换行防溢出 */
  .docs table.tbl th, .docs table.tbl td { white-space: normal; }
}

/* 两步验证的二维码。三件事必须钉住，少一件就是"看着有图、扫不出来"：
   实底白（本站深色主题，透明底或跟随主题的深色会把点阵糊平）、
   固定边长（SVG 本身按 4 单位/模块画的，缩放交 CSS，别用 % 让它在窄屏被压小）、
   crispEdges 在 SVG 里给（缩放到非整数倍时边缘不糊）。窄屏 flex-wrap 自动换到密钥上方。 */
.totp-qr { flex: 0 0 auto; margin: 0; background: #fff; border-radius: 8px; padding: 8px; }
.totp-qr svg { display: block; width: 200px; height: 200px; }
.totp-qr figcaption { margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }