/* ============================================================
   系统子页 · 样式
   ============================================================ */
.breadcrumb {
  background: #fff; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted);
}
.breadcrumb .wrap { display: flex; align-items: center; gap: 8px; height: 46px; }
.breadcrumb a { color: var(--muted); transition: .2s; }
.breadcrumb a:hover { color: var(--c-red); }
.breadcrumb .sep { color: var(--line); }
.breadcrumb b { color: var(--ink); }

/* 子页 Hero */
.spage-hero {
  position: relative; overflow: hidden; color: #fff; padding: 54px 0 60px;
  background:
    radial-gradient(900px 460px at 85% -20%, rgba(200,16,46,.38), transparent 60%),
    radial-gradient(700px 420px at 0% 30%, rgba(30,111,184,.30), transparent 55%),
    linear-gradient(160deg, #081631, #0B1F3A 50%, #0E1A33);
}
.spage-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(800px 420px at 75% 0%, #000 25%, transparent 75%);
  -webkit-mask-image: radial-gradient(800px 420px at 75% 0%, #000 25%, transparent 75%);
}
.spage-hero .wrap { position: relative; z-index: 2; }
.spage-hero .badge {
  display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; letter-spacing: 1.5px;
  padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18); color: #E4CE9B; margin-bottom: 16px;
}
.spage-hero h1 { font-size: clamp(26px, 3.6vw, 40px); font-weight: 800; letter-spacing: .5px; }
.spage-hero .en { font-size: 12px; letter-spacing: 3px; color: #9FB0D0; text-transform: uppercase; margin-top: 4px; }
.spage-hero p { color: #C7D2E8; max-width: 720px; margin-top: 14px; font-size: 15px; }

/* KPI */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: -34px; position: relative; z-index: 3; }
.kpi {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px;
  box-shadow: var(--sh-md); position: relative; overflow: hidden;
}
.kpi::before { content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 100%; background: var(--accent, var(--c-blue)); }
.kpi .v { font-family: var(--font-num); font-size: 30px; font-weight: 800; color: var(--ink); }
.kpi .v .u { font-size: 14px; color: var(--muted); margin-left: 3px; font-family: var(--font-sans); font-weight: 600; }
.kpi .l { font-size: 13px; color: var(--muted); margin-top: 4px; }
.kpi .trend { font-size: 12px; margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; }
.kpi .trend.up { color: #1E9E5A; }
.kpi .trend.down { color: var(--c-red); }

/* 区块 */
.block { padding: 56px 0; }
.block.alt { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec-head.c { justify-content: center; text-align: center; }
.sec-head.c .l { justify-content: center; }

/* 模块网格 */
.mod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mod {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px;
  box-shadow: var(--sh-sm); transition: .3s; position: relative; overflow: hidden;
}
.mod:hover { transform: translateY(-6px); box-shadow: var(--sh-md); border-color: transparent; }
.mod .ic {
  width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 14px;
  background: var(--accent-soft, rgba(30,111,184,.12)); color: var(--accent, var(--c-blue)); transition: .3s;
}
.mod:hover .ic { background: var(--accent, var(--c-blue)); color: #fff; }
.mod .ic svg { width: 24px; height: 24px; }
.mod h4 { font-size: 16.5px; font-weight: 700; }
.mod p { font-size: 13.2px; color: var(--muted); margin-top: 7px; }
.mod .go { margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--accent, var(--c-blue)); display: inline-flex; gap: 6px; align-items: center; }
.mod .go svg { width: 15px; height: 15px; }

/* 流程步骤 */
.flow { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding: 6px 2px 14px; }
.step { flex: 1; min-width: 130px; position: relative; padding: 0 14px; text-align: center; }
.step .dot {
  width: 40px; height: 40px; border-radius: 50%; margin: 0 auto 12px; display: grid; place-items: center;
  background: #fff; border: 2px solid var(--accent, var(--c-blue)); color: var(--accent, var(--c-blue));
  font-weight: 800; font-family: var(--font-num); position: relative; z-index: 2;
}
.step .dot svg { width: 20px; height: 20px; }
.step::before {
  content: ""; position: absolute; top: 20px; left: 50%; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--accent, var(--c-blue)), var(--accent-soft, #cdd)); z-index: 1;
}
.step:last-child::before { display: none; }
.step .t { font-size: 14px; font-weight: 700; color: var(--ink); }
.step .d { font-size: 12px; color: var(--muted); margin-top: 3px; }

/* 分析面板 */
.panel {
  background: linear-gradient(160deg, #0B1F3A, #11294D); border-radius: var(--radius); color: #fff;
  padding: 28px 28px; box-shadow: var(--sh-lg); position: relative; overflow: hidden;
}
.panel::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(200,16,46,.35), transparent 70%); border-radius: 50%; }
.panel h3 { font-size: 18px; font-weight: 800; position: relative; z-index: 2; }
.panel .sub { color: #9FB0D0; font-size: 13px; margin-top: 4px; position: relative; z-index: 2; }
.bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 24px; position: relative; z-index: 2; }
.bar { text-align: center; }
.bar .col {
  height: 120px; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(255,255,255,.06); border-radius: 8px 8px 0 0; overflow: hidden; position: relative;
}
.bar .col i {
  display: block; width: 60%; border-radius: 8px 8px 0 0;
  background: linear-gradient(var(--c-gold-soft), var(--c-red)); transition: height 1.1s cubic-bezier(.2,.8,.2,1);
}
.bar .lab { font-size: 12px; color: #B9C4DC; margin-top: 8px; }
.bar .val { font-size: 13px; font-weight: 800; font-family: var(--font-num); margin-top: 2px; }

/* 子页响应式 */
@media (max-width: 1024px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .mod-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .kpi-row, .mod-grid { grid-template-columns: 1fr; }
  .bars { grid-template-columns: repeat(3, 1fr); }
}