/* 复盘大师（PSE）— 全局样式
   需求 5.2：Jinja2 模板 + 原生 HTML/CSS/JS，无需构建工具 */

:root {
  --bg: #f5f6f8;
  --panel: #ffffff;
  --ink: #1c2027;
  --ink-soft: #5b6472;
  --ink-dim: #8a93a2;
  --line: #e3e6ec;
  --brand: #2b5cff;
  --brand-soft: #eef2ff;
  --good: #10893e;
  --good-soft: #e6f6ec;
  --fair: #b06d00;
  --fair-soft: #fdf3e2;
  --poor: #c02b2b;
  --poor-soft: #fdecec;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(20, 28, 45, .06), 0 6px 20px rgba(20, 28, 45, .06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: #eef0f4; padding: 1px 5px; border-radius: 4px; font-size: .92em; }
.dim { color: var(--ink-dim); }
.small { font-size: 12px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 20px 20px 60px; }
.mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, Consolas, monospace; }

/* ---------- 顶栏 ---------- */
.topbar { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
/* flex-wrap：窄屏时让导航整体落到第二行，而不是把品牌挤成三行、导航又溢出被截断 */
.topbar-inner { display: flex; align-items: center; gap: 14px 24px; padding: 10px 20px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 650; flex: 0 0 auto; }
.brand:hover { text-decoration: none; }
/* 品牌标识：整轮圆环 + 上行箭头（几何见 templates/_brand_logo.html）。
   用 --brand 着色——标记承载品牌色，文字保持中性，是常见的「彩色标 + 素字」组合。 */
.brand-logo {
  width: 22px; height: 22px; flex: 0 0 auto;
  color: var(--brand);
  display: block;
}
/* 品牌名保持一行：它是标识，折成三行既难看又白占高度 */
.brand-text { font-size: 15px; white-space: nowrap; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.nav a {
  color: var(--ink-soft); padding: 5px 10px; border-radius: 6px; font-size: 13px;
}
.nav a:hover { background: #f0f2f6; text-decoration: none; }
.nav a.on { background: var(--brand-soft); color: var(--brand); font-weight: 600; }

/* ---------- 横幅 ---------- */
.banners { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0 6px; }
@media (max-width: 860px) { .banners { grid-template-columns: 1fr; } }
.banner { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.banner-open { border-left: 4px solid var(--good); }
.banner-closed { border-left: 4px solid var(--poor); }
.banner-market { border-left: 4px solid var(--brand); }
.banner-title { font-size: 12px; color: var(--ink-dim); margin-bottom: 6px; letter-spacing: .2px; }
.banner-body { font-size: 15px; }
.banner-sub { font-size: 12px; color: var(--ink-soft); margin-top: 6px; }
.chip {
  display: inline-block; background: #f2f4f8; border-radius: 20px;
  padding: 1px 9px; margin: 2px 4px 0 0; font-size: 11px; color: var(--ink-soft);
}

/* ---------- 卡片 / 版面 ---------- */
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px; margin-top: 16px; box-shadow: var(--shadow);
}
.card > h2 { margin: 0 0 4px; font-size: 16px; }
.card > h2 + .hint { margin: 0 0 14px; color: var(--ink-dim); font-size: 12px; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }
.mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; }

/* ---------- 表格 ---------- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); font-size: 13px; }
th { color: var(--ink-dim); font-weight: 500; font-size: 12px; background: #fafbfc; }
tbody tr:hover { background: #fafbfd; }
/* 数值列不换行：窄屏下「0 / 2」会被挤成两行、「1.4 万亿」会被拆成「1.4 万 / 亿」。
   数值本来就是「看一格」，折行后既难读又对不齐。 */
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 指标名（指数趋势 / 涨跌家数比 …）也不该折行——短标签折行纯属挤出来的 */
td.nowrap, th.nowrap { white-space: nowrap; }
/* 窄屏放不下时让表格横向滚动，而不是把每列都压到折行 */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 「判定依据」是长句。窄屏上四列并排会把它挤成一条 40px 宽的竖条（折成十几行），
   前三列又都是 nowrap 不肯让。所以窄屏直接去掉这一列，把说明挪到维度名下方。 */
.detail-inline { display: none; }
@media (max-width: 620px) {
  .market-table .col-detail { display: none; }
  .detail-inline {
    display: block; white-space: normal; font-weight: 400;
    font-size: 12px; color: var(--ink-dim); margin-top: 4px; line-height: 1.45;
  }
  /* 维度列此时要能换行容纳说明（只作用于当日面板那一格，
     历史表的「交易日/状态」仍保持单行） */
  .market-table td.dim-cell { white-space: normal; }
}

@media (max-width: 560px) {
  th, td { padding: 8px 7px; font-size: 12.5px; }
}
/* 窄屏兜底：任何一处溢出都会把右侧内容顶出屏幕。只在小屏生效，
   桌面端保留横向滚动以便发现布局问题。宽表格由 .table-scroll 自己滚。 */
@media (max-width: 860px) {
  html, body { overflow-x: hidden; }
}

/* ---------- 身份识别（登录 / 注册 / 顶栏用户）---------- */
.who { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: 0 0 auto; }
.who-id {
  font-size: 13px; color: var(--ink-soft); max-width: 160px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.who-out { margin: 0; }
.btn-link {
  background: none; border: 0; padding: 4px 8px; cursor: pointer;
  color: var(--brand); font-size: 13px; border-radius: 6px; font-family: inherit;
}
.btn-link:hover { background: var(--brand-soft); }

.auth-wrap { display: flex; justify-content: center; padding: 8vh 0 0; }
.auth-card { width: 100%; max-width: 380px; margin: 0; }
.auth-card h2 { margin-bottom: 4px; }
.auth-form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field > span { font-size: 12px; color: var(--ink-dim); }
.field input {
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 14px; font-family: inherit; background: #fff;
}
.field input:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.field select {
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 14px; font-family: inherit; background: #fff;
}
.field select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
/* 认证类表单（登录/注册/找回/联系）的字段布局。
 *
 * **必须显式写这两条**，否则会被下面「预测录入表单」那节的
 * `label.field { display: block }` 覆盖（它 0,1,1 高于 `.field` 的 0,1,0）：
 *   · display:block 让 <span> 与 <input> 变成行内同级 → 标签和输入框挤在一行
 *   · 且全局 width:100% 的列表里**没有 email / password**，
 *     这两个输入框就只剩 UA 默认宽度（约 170px）
 * 症状：登录页的邮箱/密码短成一截，而「登录」按钮是满宽，明显不对齐。
 * 用 `.auth-form .field` 提高优先级，只修认证表单，不动预测录入表单。 */
.auth-form .field > span { display: block; margin-bottom: 5px; }
.auth-form .field input { width: 100%; }
.btn-block { width: 100%; justify-content: center; }
.auth-alt { margin-top: 14px; font-size: 13px; color: var(--ink-soft); text-align: center; }
.auth-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 0 12px; color: var(--ink-dim); font-size: 12px;
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.auth-note { margin-top: 8px; text-align: center; line-height: 1.5; }
.notice-err { background: #fdeceb; border: 1px solid #f3c9c5; color: #8a2c22; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-danger-soft { background: #fdeceb; color: var(--poor); border: 1px solid #f3c9c5; }
.btn-danger-soft:hover { background: #fbdedb; }
body.bare .foot { margin-top: 40px; text-align: center; }

/* ---------- 补采进度 ---------- */
/* 全量补采要跑几十秒到几分钟，必须有「正在跑」的可见信号，
   否则用户只会觉得按钮点了没反应。 */
.sync-running {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #fff8e6; border: 1px solid #f0dda6; border-radius: 8px;
  padding: 8px 14px; font-size: 13px; color: #6b5200;
}
.spinner {
  width: 13px; height: 13px; flex: 0 0 13px;
  border: 2px solid #e2cf95; border-top-color: #b8860b;
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 微信扫码登录 ---------- */
/* 微信品牌绿，让入口一眼可辨（用户找的就是这个按钮） */
.btn-wechat {
  background: #07c160; color: #fff; border: 1px solid #06ad56;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; font-weight: 600;
}
.btn-wechat:hover { background: #06ad56; color: #fff; text-decoration: none; }

/* ---------- 消息面（公告）---------- */
.news-block {
  margin-top: 10px; padding-top: 9px;
  border-top: 1px dashed var(--line);
}
.news-head { font-weight: 600; margin-bottom: 5px; }
.news-list { margin: 0; padding-left: 18px; line-height: 1.75; }
.news-list li { margin-bottom: 2px; }
.news-type {
  display: inline-block; padding: 0 5px; border-radius: 4px;
  font-size: 11px; background: var(--brand-soft); color: var(--brand);
  vertical-align: 1px;
}

/* ---------- 邀请码 ---------- */
/* 默认遮罩：管理页可能被人看到屏幕，而邀请码等于注册通行证 */
.invite-code {
  letter-spacing: 1.5px; font-weight: 600; cursor: default;
  user-select: all;              /* 点一下能整段选中，方便复制 */
}
.invite-code.masked { color: #aab2c0; letter-spacing: 2px; }
.btn-sm { padding: 3px 10px; font-size: 12px; }

/* ============================================================
   落地页（未登录时的 /）
   沿用应用已有的配色与圆角变量，保证从落地页进系统不跳戏。
   ============================================================ */
body.landing { background: #fff; }
.lp-inner { max-width: 1060px; margin: 0 auto; padding: 0 22px; }

/* ---- 顶栏 ---- */
.lp-nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.lp-nav-row {
  display: flex; align-items: center; justify-content: space-between;
  height: 60px;
}
.lp-brand {
  display: flex; align-items: center; gap: 9px;
  font-size: 17px; font-weight: 700; letter-spacing: .5px;
  color: var(--ink); text-decoration: none;
}
/* 落地页顶栏的标识比内部页面稍大一点：首屏品牌要立得住 */
.lp-brand .brand-logo { width: 26px; height: 26px; }
.lp-brand:hover { text-decoration: none; }
.lp-nav-actions { display: flex; gap: 9px; align-items: center; }
.lp-nav-actions .btn { padding: 6px 16px; font-size: 14px; text-decoration: none; }

/* ---- 主视觉 ---- */
.lp-hero {
  position: relative;          /* 背景装饰环的定位基准 */
  overflow: hidden;            /* 环放大后超出部分裁掉，避免横向滚动条 */
  padding: 84px 0 74px;
  background:
    radial-gradient(900px 380px at 50% -10%, var(--brand-soft), transparent 70%),
    #fff;
  text-align: center;
}

/* 背景装饰：品牌标识的圆环几何放大成几道大弧，缓慢反向旋转。
 *
 * 只用 transform 做动画（GPU 合成，不触发布局重排）。
 * 透明度压到 .05 是**调出来的**：.09 时那些圆弧会读成「页面上的蓝圈」，
 * 而不是氛围；再低就完全看不见了。
 * 周期 60~110s：快到能察觉在动，慢到不分散注意力。 */
.lp-rings {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;        /* 绝不挡住下面的按钮 */
  color: var(--brand);
  opacity: .05;
}
/* 放大到超出视口：这样看到的是**扫过画面的弧**，
   而不是几个完整的圆圈——后者更像水印。 */
.lp-rings svg { width: min(1180px, 165vw); height: min(1180px, 165vw); }
.lp-rings .ring { transform-origin: 12px 12px; }
.ring-1 { animation: lp-spin 110s linear infinite; }
.ring-2 { animation: lp-spin 78s linear infinite reverse; }
.ring-3 { animation: lp-spin 60s linear infinite; }
@keyframes lp-spin { to { transform: rotate(360deg); } }

/* 入场：主视觉元素依次上浮。一次性，不循环——
   循环的入场动画会让人觉得页面一直没加载完。
   --d 由模板按顺序给出延迟。 */
.lp-rise {
  animation: lp-rise-in .55s cubic-bezier(.2, .7, .3, 1) both;
  animation-delay: var(--d, 0ms);
}
@keyframes lp-rise-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.lp-kicker {
  display: inline-block; margin: 0 0 20px; padding: 5px 14px;
  border-radius: 999px; background: var(--brand-soft); color: var(--brand);
  font-size: 13px; font-weight: 600; letter-spacing: .4px;
}
.lp-slogan {
  margin: 0; font-size: clamp(30px, 5.2vw, 54px); line-height: 1.16;
  letter-spacing: -1px; font-weight: 800; color: var(--ink);
}
.lp-sub {
  margin: 18px auto 0; max-width: 620px;
  font-size: clamp(15px, 2.1vw, 19px); color: var(--ink-soft); line-height: 1.7;
}
.lp-cta {
  margin-top: 30px; display: flex; gap: 12px;
  justify-content: center; flex-wrap: wrap;
}
.lp-cta .btn { text-decoration: none; }
.btn-lg { padding: 11px 26px; font-size: 15px; border-radius: 9px; }
.lp-note { margin: 16px 0 0; font-size: 13px; color: var(--ink-dim); }

/* ---- 区块 ---- */
.lp-section { padding: 66px 0; }
.lp-alt { background: var(--bg); }
.lp-h2 {
  margin: 0 0 10px; font-size: clamp(21px, 2.8vw, 29px);
  letter-spacing: -.3px; color: var(--ink);
}
.lp-lead {
  margin: 0 0 30px; max-width: 720px;
  color: var(--ink-soft); font-size: 15px; line-height: 1.75;
}

/* ---- 卡片 ---- */
.lp-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
.lp-grid-3 { grid-template-columns: repeat(3, 1fr); }
.lp-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 22px;
}
.lp-alt .lp-card { background: #fff; }
.lp-card h3 { margin: 0 0 9px; font-size: 16px; color: var(--ink); }
.lp-card p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.78; }
.lp-card ul { margin: 0; padding-left: 18px; color: var(--ink-soft);
              font-size: 14px; line-height: 1.9; }
.lp-card li { margin-bottom: 4px; }

/* ---- 它做什么 / 不做什么 ---- */
.lp-split { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
.lp-yes { border-left: 3px solid var(--good); }
.lp-no { border-left: 3px solid var(--ink-dim); }
.lp-yes h3 { color: var(--good); }
.lp-warn {
  margin: 22px 0 0; padding: 14px 18px; border-radius: var(--radius);
  background: var(--fair-soft); border: 1px solid #f0dcb8;
  color: #7a4c00; font-size: 14px; line-height: 1.75;
}

/* ---- 四步闭环 ---- */
/* 闭环动效：1→2→3→4 的序号依次点亮，走完回到 1。
 *
 * 为什么不做「一条光点横穿四张卡」：试过了，两个问题——
 * ① 线画在卡片**上方**，并没有真的「连接」四步，视觉上悬空；
 * ② 那种细线为了不抢眼必然很淡，于是几乎看不见，
 *    一个承载光点的「隐形轨道」没有意义。
 * 改成序号依次点亮 + 卡片间短虚线，链路关系和「循环」都更直白。
 * 周期 8s，四步各占 1/4：2s 一个，衔接处有 0.4s 的余量避免拖影。 */
.lp-step-n { animation: lp-step-pulse 8s ease-in-out infinite; }
.lp-steps li:nth-child(1) .lp-step-n { animation-delay: 0s; }
.lp-steps li:nth-child(2) .lp-step-n { animation-delay: 2s; }
.lp-steps li:nth-child(3) .lp-step-n { animation-delay: 4s; }
.lp-steps li:nth-child(4) .lp-step-n { animation-delay: 6s; }
@keyframes lp-step-pulse {
  0%, 12%   { background: var(--brand); color: #fff; transform: scale(1.12); }
  20%, 100% { background: var(--brand-soft); color: var(--brand); transform: scale(1); }
}

/* 卡片之间的短虚线：补上「这是一条链」的关系。
   宽度等于 grid 的 gap（16px），所以刚好铺满缝隙。 */
.lp-steps li:not(:last-child)::after {
  content: "";
  position: absolute; top: 33px; left: 100%;
  width: 16px; height: 2px;
  background: repeating-linear-gradient(90deg,
    var(--line) 0 4px, transparent 4px 8px);
}

.lp-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr);
  counter-reset: none;
}
.lp-steps li {
  position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 20px 18px;
  /* 悬停反馈只用 transform + 颜色，不动布局属性 */
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.lp-steps li:hover {
  transform: translateY(-3px);
  border-color: var(--brand);
  box-shadow: var(--shadow);
}
.lp-step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; margin-bottom: 11px;
  background: var(--brand-soft); color: var(--brand);
  font-size: 14px; font-weight: 700;
}
.lp-steps h3 { margin: 0 0 8px; font-size: 15px; color: var(--ink); }
.lp-steps p { margin: 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.78; }

/* ---- 收尾 ---- */
.lp-final { background: var(--brand-soft); }
.lp-final-inner { text-align: center; }
.lp-final .lp-lead { margin-left: auto; margin-right: auto; }

/* ---- 页脚 ---- */
.lp-foot {
  padding: 30px 0 42px; border-top: 1px solid var(--line); background: #fff;
}
/* 备案号按要求放在「主页底部的中央位置」（见 landing.html 页脚注释） */
.lp-foot .lp-inner { text-align: center; }
.lp-foot-line { margin: 0 0 8px; font-size: 13.5px; color: var(--ink-soft); }
.lp-foot-bn { margin: 0 0 10px; font-size: 12.5px; }
.lp-foot-dim { margin: 0; font-size: 12.5px; color: var(--ink-dim); line-height: 1.8; }

/* 联系方式：可点、可整段选中复制（选不干净会让人放弃写邮件） */
.contact { color: var(--ink-soft); text-decoration: none; user-select: all; }
.contact:hover { color: var(--brand); text-decoration: underline; }

/* ---------- 联系表单 ---------- */
/* 蜜罐字段：移出可视区而不是 display:none。
   部分机器人会跳过显式隐藏的字段，但对「在 DOM 里、只是跑到屏幕外」的照样填。
   真人看不到也 Tab 不到（模板里另有 tabindex=-1）。 */
.hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.auth-form select,
.auth-form textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  color: var(--ink);
  background: #fff;
}
.auth-form textarea { resize: vertical; line-height: 1.7; }
.auth-form select:focus,
.auth-form textarea:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }

/* ---------- 管理页：联系消息 ---------- */
.msg-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
  background: #fff;
}
.msg-card.msg-done { border-left-color: var(--line); opacity: .72; }
.msg-body {
  margin: 10px 0;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: 8px;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink);
  /* 正文可能很长，保留换行但**允许折行**，不要让长串撑破布局 */
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---- 备案号 ---- */
/* 样式刻意克制：这是合规信息，不该抢视觉焦点，但要清晰可读、可点击核验。 */
.beian {
  color: var(--ink-dim); text-decoration: none;
  border-bottom: 1px dotted var(--line);
}
.beian:hover { color: var(--brand); border-bottom-color: var(--brand); }
.dot-sep { margin: 0 5px; color: var(--line); }

/* ---- 窄屏 ---- */
@media (max-width: 880px) {
  .lp-grid, .lp-split { grid-template-columns: 1fr; }
  .lp-grid-3 { grid-template-columns: 1fr; }
  .lp-steps { grid-template-columns: repeat(2, 1fr); }
  .lp-hero { padding: 56px 0 48px; }
  .lp-section { padding: 46px 0; }
  /* 两列时第 2 张卡右边没有下一张，「横穿的虚线」会指向空白——收掉 */
  .lp-steps li:nth-child(2n)::after,
  .lp-steps li:last-child::after { display: none; }
}
@media (max-width: 520px) {
  .lp-steps { grid-template-columns: 1fr; }
  .lp-steps li::after { display: none; }   /* 单列，横向虚线无意义 */
  .lp-nav-row { height: 54px; }
  .lp-nav-actions .btn { padding: 5px 12px; font-size: 13px; }
  .lp-cta .btn { width: 100%; text-align: center; }
}

/* ---- 无障碍：系统里关了动画的人，不该被动画打扰 ----
 *
 * 必须放在最后（同优先级下后写的生效）。
 * 处理方式不是「让它动得快一点」——前庭功能敏感的人对快速动画同样不适，
 * 所以是**直接停掉**：旋转变静止、序号不再闪、入场不再位移。
 * 信息一点没少：文字、颜色、图标、虚线全在，只是不动。 */
@media (prefers-reduced-motion: reduce) {
  .lp-rings .ring,
  .lp-rise,
  .lp-step-n { animation: none !important; }
  .lp-rise { opacity: 1; }
  .lp-steps li { transition: none; }
  .lp-steps li:hover { transform: none; }
}

/* ---------- 徽标 ---------- */
.pill { display: inline-block; padding: 1px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.pill-strong, .pill-good { background: var(--good-soft); color: var(--good); }
.pill-neutral, .pill-fair { background: var(--fair-soft); color: var(--fair); }
.pill-weak, .pill-poor { background: var(--poor-soft); color: var(--poor); }
.pill-muted { background: #eef0f4; color: var(--ink-soft); }
/* 演示源写入的历史记录：名称/行业是虚构的，必须一眼可辨 */
.pill-demo { background: #fff8e6; border: 1px solid #f0dda6; color: #6b5200; font-weight: 600; }
/* 下拉底部「共 N 条匹配」提示：拼音首字母碰撞时告诉用户还有更多 */
.suggest-more { padding: 6px 12px; font-size: 12px; border-top: 1px solid var(--line);
                background: #fafbfc; border-radius: 0 0 8px 8px; }

/* 市场状态：指数趋势用符号 + 颜色，其余维度显示实际数值 */
.chip-sym { font-size: 15px; font-weight: 700; margin-right: 1px; }
.chip-up { color: #c0392b; }      /* A 股习惯：涨红 */
.chip-down { color: #1e874b; }    /* 跌绿 */
.chip-sideways { color: #8a93a2; }
/* 盘中：当日数据未定，标注清楚以免把上一交易日的数字当成今日 */
.chip-live { background: #fff8e6; border: 1px solid #f0dda6; color: #6b5200; font-weight: 600; }
.pill-up { background: var(--poor-soft); color: var(--poor); }
.pill-down { background: var(--good-soft); color: var(--good); }
.pill-sideways { background: #eef0f4; color: var(--ink-soft); }

/* ---------- 表单 ---------- */
label.field { display: block; margin-bottom: 4px; font-size: 13px; color: var(--ink-soft); }
input[type=text], input[type=number], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 8px; font: inherit; background: #fff; color: var(--ink);
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }
.form-row { margin-bottom: 14px; }
.btn {
  display: inline-block; background: var(--brand); color: #fff; border: 0;
  border-radius: 8px; padding: 9px 18px; font: inherit; font-weight: 600; cursor: pointer;
}
.btn:hover { background: #1f4ce0; text-decoration: none; }
.btn-ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { background: #f4f6f9; }
.btn:disabled { background: #c6cbd6; cursor: not-allowed; }
.radio-group { display: flex; gap: 8px; flex-wrap: wrap; }
.radio-group label {
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px;
  cursor: pointer; font-size: 13px; background: #fff;
}
.radio-group input { display: none; }
.radio-group input:checked + span { color: var(--brand); font-weight: 600; }
.radio-group label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.hidden { display: none !important; }

/* ---------- 分步表单（兼容旧样式；新建/修改预测已改用紧凑排版） ---------- */
.step {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 14px; background: #fdfefe;
}
.step:focus-within { border-color: #b9c8ff; background: #fff; box-shadow: 0 0 0 3px var(--brand-soft); }
.step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.step-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: 13px; font-weight: 700; flex: 0 0 auto;
}
.step-title { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: .2px; }
.step-title .req { color: var(--poor); font-weight: 700; margin-left: 2px; }
.step-note { font-size: 12px; color: var(--ink-dim); font-weight: 400; margin-left: auto; }
.step-help { font-size: 12px; color: var(--ink-soft); margin-top: 8px; }

/* ---------- 必填操作项的高亮标识 ---------- */
.field-req {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: .2px;
}
.field-req::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand);
  margin-right: 7px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.req-mark { color: var(--poor); font-weight: 700; margin-left: 3px; }

/* ---------- 从属面板 ----------
   「涨跌幅档位」（从属于预测方向）与「震荡判定区间」共用这一套样式：
   整块带背景色，一眼看出它是某个主操作项的下级内容，而不是并列的必填项。 */
.sub-panel {
  margin-top: 12px;
  border: 1px solid #cdd8ff;
  background: var(--brand-soft);
  border-radius: 8px;
  padding: 12px 14px;
}
.sub-panel > h4 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: #1e3a9e;
  letter-spacing: .2px;
}
.sub-panel > h4::before {
  content: '↳ ';
  font-weight: 700;
}
.sub-panel .step-help { color: #3b52a8; }
.sub-panel table { width: auto; min-width: 260px; }
.sub-panel th, .sub-panel td {
  background: transparent;
  border-bottom: 1px solid #d7e0ff;
  padding: 5px 12px 5px 0;
}
.sub-panel tr.on td { font-weight: 700; color: var(--brand); }

/* 档位选项排成两列，放进半宽栏也放得下 */
#magnitude-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
#magnitude-group label.tier-option { min-width: 0; width: 100%; }

/* 兼容旧类名（历史模板/脚本可能仍在引用） */
.sideways-panel { margin-top: 12px; border: 1px solid #cdd8ff; background: var(--brand-soft);
  border-radius: 8px; padding: 12px 14px; }
.sideways-panel h4 { margin: 0 0 8px; font-size: 13px; color: #1e3a9e; }

/* ---------- 档位选项（含明确区间） ----------
   需求方 2026-10-03：用户真正关心的是「预测的涨跌幅比例」，
   所以区间百分比要**比档位名更大更醒目**——档位名只是分类标签，百分比才是下注内容。 */
.radio-group label.tier-option {
  padding: 9px 14px; min-width: 132px; text-align: left; line-height: 1.3;
}
.tier-option-body { display: flex; flex-direction: column; gap: 3px; }
.tier-option-body b {
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
}
.tier-range {
  font-size: 16px;            /* 11.5px → 16px：字号加大 + 加粗 + 用主文字色 */
  font-weight: 700;
  color: var(--ink);
  font-family: ui-monospace, Consolas, monospace;
  letter-spacing: -.3px;
  font-variant-numeric: tabular-nums;
}
.radio-group label.tier-option:has(input:checked) .tier-range { color: var(--brand); }
.pill-brand { background: var(--brand-soft); color: var(--brand); }

/* KPI 数值位置上的 pill 跟随该 KPI 的字号。
   .pill 自身写死 12px，用在 .kpi .v 里会比同排的其它数值（18px）明显小一号——
   需求方 2026-10-03：预测方向下方的文字要与时间窗口下方的一致。
   用 inherit 而不是写死 18px，这样以后调整 KPI 字号时会自动跟随。 */
.kpi .v .pill { font-size: inherit; padding: 2px 14px; }

/* ---------- 股票代码搜索下拉（参考新浪财经首页输入框） ---------- */
.suggest-wrap { position: relative; flex: 1; min-width: 0; }
.suggest-wrap > input { width: 100%; }
.suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 40;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
}
.suggest-item {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  align-items: baseline;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.suggest-item:hover, .suggest-item.on { background: var(--brand-soft); }
.suggest-item .suggest-code { color: var(--ink-soft); }
.suggest-item .suggest-name { font-weight: 600; }
.suggest-item b { color: var(--brand); font-weight: 700; }
.suggest-item .suggest-meta { font-size: 11.5px; text-align: right; }
.suggest-item .suggest-pinyin {
  font-size: 11px; color: var(--brand); margin-left: 4px;
  font-family: ui-monospace, Consolas, monospace;
}
.suggest-empty { padding: 10px 12px; font-size: 13px; color: var(--ink-dim); }

/* ---------- 提示 ---------- */
.notice { border-radius: var(--radius); padding: 11px 14px; margin-top: 14px; font-size: 13px; }
.notice-demo { background: #fff8e6; border: 1px solid #f0dda6; color: #6b5200; }
.notice-error { background: var(--poor-soft); border: 1px solid #f2c4c4; color: var(--poor); }
.notice-info { background: var(--brand-soft); border: 1px solid #cdd8ff; color: #1e3a9e; }

/* ---------- 个性化选股 ---------- */
.page-sub { margin: 0 0 18px; color: var(--ink-dim); font-size: 13px;
  line-height: 1.75; max-width: 780px; }
.tight { margin: 6px 0 0; padding-left: 20px; }
.tight li { margin: 3px 0; }

.screen-form { display: flex; flex-direction: column; gap: 14px; }
.screen-form textarea {
  width: 100%; box-sizing: border-box; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 8px;
  font-family: inherit; font-size: 13px; line-height: 1.6; resize: vertical;
}
.screen-rows { display: flex; flex-direction: column; gap: 10px; }
.screen-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 13px; }
/* 左侧勾选项定宽，右边几个数值输入才能对齐成一列，扫一眼可比 */
.screen-row .chk { display: inline-flex; align-items: center; gap: 6px;
  min-width: 118px; font-weight: 600; }
.screen-row select { padding: 5px 8px; border: 1px solid var(--line);
  border-radius: 7px; font-size: 13px; max-width: 460px; }
.inline-num { color: var(--ink-dim); }
.inline-num input { width: 74px; padding: 5px 8px; border: 1px solid var(--line);
  border-radius: 7px; font-size: 13px; text-align: right; }
.screen-actions { display: flex; align-items: center; gap: 12px; }

/* 逐条证据：这是选股器「可复核」的落点，所以要能一眼看出中的/没中的 */
.evid { list-style: none; margin: 0; padding: 0; font-size: 12px;
  line-height: 1.7; }
.evid li { padding: 1px 0; }
.evid-mark { display: inline-block; width: 14px; font-weight: 700; }
.evid li.ok .evid-mark { color: var(--good); }
.evid li.no { color: var(--ink-dim); }
.evid-detail, .evid-note { display: block; padding-left: 14px;
  color: var(--ink-dim); font-size: 11px; }

.tag-ok, .tag-no { display: inline-block; padding: 1px 7px; margin: 1px 3px 1px 0;
  border-radius: 5px; font-size: 11px; }
.tag-ok { background: var(--brand-soft); color: var(--brand); }
.tag-no { background: #f2f4f7; color: var(--ink-dim); }

@media (max-width: 720px) {
  /* 窄屏时勾选项独占一行，否则「过去 30 个交易日」会被挤成两截 */
  .screen-row .chk { min-width: 100%; }
}


/* ---------- 得分 ---------- */
.score-big { font-size: 34px; font-weight: 700; line-height: 1.1; }
.score-good { color: var(--good); } .score-fair { color: var(--fair); }
.score-poor { color: var(--poor); } .score-muted { color: var(--ink-dim); }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.kpi .k { font-size: 12px; color: var(--ink-dim); }
.kpi .v { font-size: 24px; font-weight: 700; margin-top: 2px; }

/* ---------- 进度条 ---------- */
.bar { background: #eef0f4; border-radius: 20px; height: 8px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--brand); }
.bar.g > i { background: var(--good); } .bar.f > i { background: var(--fair); }
.bar.p > i { background: var(--poor); }

/* ---------- 报告 ---------- */
.report-section { border-top: 1px dashed var(--line); padding-top: 16px; margin-top: 16px; }
.report-section:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.report-section h3 { font-size: 14px; margin: 0 0 10px; }
.report-section h3 .idx { color: var(--ink-dim); font-weight: 400; margin-right: 6px; }
ul.clean { margin: 6px 0; padding-left: 20px; }
ul.clean li { margin: 4px 0; }
.factor { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.factor .name { font-weight: 600; }
.factor.hit { border-left: 3px solid var(--good); }
.factor.miss { border-left: 3px solid var(--poor); }
.factor.unknown { border-left: 3px solid #c9ced8; }

/* ---------- 结论文案 ---------- */
.advice { background: #fbfcfe; border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; }
.advice h3 { margin: 0 0 8px; font-size: 14px; }
.advice pre { white-space: pre-wrap; font: inherit; margin: 0; }

/* ---------- 页脚 ---------- */
.footer { margin-top: 34px; border-top: 1px solid var(--line); padding-top: 14px; color: var(--ink-soft); font-size: 12px; }

/* ---------- 空状态 ---------- */
.empty { text-align: center; color: var(--ink-dim); padding: 30px 10px; }
.empty .big { font-size: 28px; margin-bottom: 6px; }

/* ---------- 分页 ---------- */
.pager { display: flex; gap: 6px; align-items: center; margin-top: 14px; }
.pager a, .pager span {
  border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px;
  font-size: 13px; background: #fff; color: var(--ink-soft);
}
.pager .on { background: var(--brand-soft); color: var(--brand); border-color: #cdd8ff; font-weight: 600; }