/* ==========================================================================
   VulnSentry Web 控制台样式表
   浅色主题 / 无构建 / 零外部依赖
   ========================================================================== */

:root {
  --bg: #f3f5f9;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --border: #e3e8ef;
  --border-strong: #cbd5e1;
  --text: #1f2937;
  --text-2: #4b5563;
  --muted: #6b7280;
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-soft: #e8f0fe;
  --success: #12a150;
  --success-soft: #e6f6ed;
  --warn: #d97706;
  --warn-soft: #fdf3e3;
  --danger: #dc2626;
  --danger-soft: #fdeaea;
  --info: #0891b2;
  --info-soft: #e4f5f9;

  --sev-critical: #b91c1c;
  --sev-critical-bg: #fdeaea;
  --sev-high: #ea580c;
  --sev-high-bg: #fef0e6;
  --sev-medium: #d97706;
  --sev-medium-bg: #fdf5e5;
  --sev-low: #0891b2;
  --sev-low-bg: #e4f5f9;
  --sev-info: #64748b;
  --sev-info-bg: #eef1f5;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
  --shadow-lg: 0 10px 30px rgba(16, 24, 40, .12);
  --sidebar-w: 218px;
  --header-h: 56px;
  --font: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Segoe UI", Roboto, system-ui, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Mono", Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 14px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* 键盘可达性：仅键盘聚焦时显示清晰焦点环（鼠标点击不显示） */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}
.inp:focus-visible, .sel:focus-visible, .txa:focus-visible { outline: none; }

/* 尊重用户的「减少动态效果」系统偏好（无障碍） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #cfd6e2; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #b6c0d0; }
::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------------------ 启动屏 */
.boot-screen {
  height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; color: var(--muted);
}
.boot-logo {
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid var(--primary-soft); border-top-color: var(--primary);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ 登录页 */
.login-page {
  min-height: 100vh; display: grid; grid-template-columns: 1fr 460px;
  background: var(--surface);
}
.login-hero {
  position: relative; overflow: hidden; padding: 60px 56px;
  background: linear-gradient(140deg, #1e3a8a 0%, #2563eb 52%, #0ea5e9 100%);
  color: #fff; display: flex; flex-direction: column; justify-content: space-between;
}
.login-hero::after {
  content: ""; position: absolute; right: -140px; bottom: -160px;
  width: 460px; height: 460px; border-radius: 50%;
  background: rgba(255, 255, 255, .08);
}
.login-hero h1 { font-size: 32px; margin: 0 0 10px; letter-spacing: .5px; }
.login-hero .sub { font-size: 15px; opacity: .88; max-width: 420px; }
.hero-points { list-style: none; padding: 0; margin: 34px 0 0; position: relative; z-index: 1; }
.hero-points li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 0; font-size: 14px; opacity: .95;
}
.hero-points b { display: block; font-weight: 600; }
.hero-points span { opacity: .8; font-size: 13px; }
.hero-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #7dd3fc;
  margin-top: 7px; flex: none;
}
.login-foot { font-size: 12px; opacity: .7; position: relative; z-index: 1; }

.login-panel { padding: 64px 52px; display: flex; flex-direction: column; justify-content: center; overflow-y: auto; max-height: 100vh; }
.login-panel h2 { margin: 0 0 6px; font-size: 22px; }
.login-panel .tip { color: var(--muted); font-size: 13px; margin: 0 0 26px; }

/* ------------------------------------------------------------------ 布局 */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w); flex: none; background: #0f172a; color: #cbd5e1;
  display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; z-index: 40;
}
.sidebar-brand {
  height: var(--header-h); display: flex; align-items: center; gap: 10px;
  padding: 0 18px; border-bottom: 1px solid rgba(255, 255, 255, .07); flex: none;
}
.sidebar-brand svg { flex: none; }
.sidebar-brand b { color: #fff; font-size: 15.5px; letter-spacing: .4px; }
.sidebar-brand small { display: block; font-size: 10.5px; color: #64748b; letter-spacing: 1.2px; }

.nav { flex: 1; overflow-y: auto; padding: 10px 0 20px; }
.nav::-webkit-scrollbar-thumb { background: #334155; }
.nav-group { padding: 14px 18px 6px; font-size: 11px; color: #56637a; letter-spacing: 1px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 18px;
  color: #cbd5e1; cursor: pointer; font-size: 13.5px; border-left: 3px solid transparent;
  transition: background .15s, color .15s;
}
.nav-item:hover { background: rgba(255, 255, 255, .05); color: #fff; text-decoration: none; }
.nav-item.active { background: rgba(37, 99, 235, .18); color: #fff; border-left-color: var(--primary); }
.nav-item .ico { width: 16px; text-align: center; flex: none; opacity: .9; }
.nav-badge {
  margin-left: auto; background: var(--danger); color: #fff; border-radius: 9px;
  font-size: 10.5px; padding: 0 6px; line-height: 16px; min-width: 17px; text-align: center;
}
.sidebar-foot {
  flex: none; padding: 10px 18px; border-top: 1px solid rgba(255, 255, 255, .07);
  font-size: 11.5px; color: #64748b; display: flex; align-items: center; gap: 7px;
}
.ws-dot { width: 7px; height: 7px; border-radius: 50%; background: #64748b; flex: none; }
.ws-dot.on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
.ws-dot.off { background: #ef4444; }

.main { flex: 1; margin-left: var(--sidebar-w); min-width: 0; display: flex; flex-direction: column; }

.header {
  height: var(--header-h); flex: none; background: var(--surface);
  border-bottom: 1px solid var(--border); display: flex; align-items: center;
  gap: 14px; padding: 0 22px; -webkit-position: sticky; position: sticky; top: 0; z-index: 30;
}
.header h1 { font-size: 16px; margin: 0; font-weight: 600; }
.header .spacer { flex: 1; }
.header-btn {
  position: relative; width: 32px; height: 32px; border-radius: var(--radius-sm);
  display: grid; place-items: center; cursor: pointer; color: var(--text-2);
  border: 1px solid transparent;
}
.header-btn:hover { background: var(--surface-2); border-color: var(--border); }
.header-btn .dot {
  position: absolute; top: 4px; right: 4px; min-width: 15px; height: 15px;
  border-radius: 8px; background: var(--danger); color: #fff; font-size: 10px;
  line-height: 15px; text-align: center; padding: 0 3px;
}
.user-chip {
  display: flex; align-items: center; gap: 9px; padding: 4px 10px 4px 4px;
  border-radius: 20px; cursor: pointer; border: 1px solid var(--border);
}
.user-chip:hover { background: var(--surface-2); }
.avatar {
  width: 26px; height: 26px; border-radius: 50%; background: var(--primary);
  color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: none;
}
.user-chip .name { font-size: 13px; }
.user-chip .role { font-size: 11px; color: var(--muted); }

.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 190px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 6px; z-index: 50;
}
.dropdown-menu .mi {
  padding: 8px 11px; border-radius: var(--radius-sm); cursor: pointer;
  font-size: 13px; display: flex; align-items: center; gap: 8px; color: var(--text-2);
}
.dropdown-menu .mi:hover { background: var(--surface-2); color: var(--text); }
.dropdown-menu .mi.danger { color: var(--danger); }
.dropdown-menu .sep { height: 1px; background: var(--border); margin: 5px 2px; }
.dropdown-menu .hd { padding: 8px 11px 4px; font-size: 11px; color: var(--muted); }

.content { padding: 20px 22px 52px; flex: 1; }

/* ------------------------------------------------------------------ 卡片 */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.card + .card { margin-top: 16px; }
.card-hd {
  display: flex; align-items: center; gap: 10px; padding: 13px 16px;
  border-bottom: 1px solid var(--border);
}
.card-hd h3 { margin: 0; font-size: 14.5px; font-weight: 600; }
.card-hd .sub { font-size: 12px; color: var(--muted); }
.card-hd .spacer { flex: 1; }
.card-bd { padding: 16px; }
.card-bd.tight { padding: 0; }

.grid { display: grid; gap: 16px; grid-gap: 16px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.g-2-1 { grid-template-columns: 2fr 1fr; }
.g-1-2 { grid-template-columns: 1fr 2fr; }

/* ------------------------------------------------------------------ 指标卡 */
.kpi {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.kpi .lb { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.kpi .vl { font-size: 26px; font-weight: 650; margin-top: 6px; letter-spacing: -.5px; line-height: 1.2; }
.kpi .ft { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.kpi .bar-line { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--primary); }
.kpi.crit .bar-line { background: var(--sev-critical); }
.kpi.crit .vl { color: var(--sev-critical); }
.kpi.warn .bar-line { background: var(--warn); }
.kpi.ok .bar-line { background: var(--success); }
.kpi.ok .vl { color: var(--success); }

.risk-gauge { display: flex; align-items: center; gap: 14px; }
.risk-ring {
  width: 76px; height: 76px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 700; font-size: 20px;
}
.risk-ring span { background: var(--surface); width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; }

/* ------------------------------------------------------------------ 表格 */
.table-wrap { width: 100%; overflow-x: auto; }
table.tb { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tb th {
  text-align: left; font-weight: 600; color: var(--text-2); background: var(--surface-2);
  padding: 9px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; font-size: 12.5px;
}
table.tb td { padding: 10px 12px; border-bottom: 1px solid #eef1f6; vertical-align: middle; }
table.tb tbody tr:hover { background: #f9fbfe; }
table.tb tbody tr:last-child td { border-bottom: none; }
table.tb td.num { font-family: var(--mono); font-size: 12.5px; }
table.tb .nowrap { white-space: nowrap; }
table.tb .ellip { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-link { cursor: pointer; }
.checkcol { width: 34px; }

/* ------------------------------------------------------------------ 标签 */
.tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px;
  border-radius: 20px; font-size: 11.5px; line-height: 18px; white-space: nowrap;
  border: 1px solid transparent; font-weight: 500;
}
.tag.sev-critical { background: var(--sev-critical-bg); color: var(--sev-critical); border-color: #f6cccc; }
.tag.sev-high { background: var(--sev-high-bg); color: var(--sev-high); border-color: #f9d9c2; }
.tag.sev-medium { background: var(--sev-medium-bg); color: var(--sev-medium); border-color: #f5e0b8; }
.tag.sev-low { background: var(--sev-low-bg); color: var(--sev-low); border-color: #c5e6ef; }
.tag.sev-info { background: var(--sev-info-bg); color: var(--sev-info); border-color: #dde3ea; }
.tag.ok { background: var(--success-soft); color: var(--success); border-color: #c3e9d3; }
.tag.warn { background: var(--warn-soft); color: var(--warn); border-color: #f3e0bd; }
.tag.err { background: var(--danger-soft); color: var(--danger); border-color: #f6cccc; }
.tag.info { background: var(--info-soft); color: var(--info); border-color: #c5e6ef; }
.tag.plain { background: var(--surface-2); color: var(--text-2); border-color: var(--border); }
.tag.pri { background: var(--primary-soft); color: var(--primary-dark); border-color: #c9dcfb; }
.tag.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tag.lg { font-size: 12.5px; padding: 3px 10px; }

.sev-bar { display: flex; height: 6px; border-radius: 4px; overflow: hidden; background: #eef1f6; min-width: 90px; }
.sev-bar i { display: block; height: 100%; }

/* ------------------------------------------------------------------ 表单 */
.field { margin-bottom: 14px; }
.field > label { display: block; font-size: 12.5px; color: var(--text-2); margin-bottom: 5px; font-weight: 500; }
.field > label .req { color: var(--danger); margin-left: 2px; }
.field .hint { font-size: 11.5px; color: var(--muted); margin-top: 4px; }

.inp, .sel, .txa {
  width: 100%; padding: 7px 11px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); font-family: inherit; font-size: 13px;
  background: var(--surface); color: var(--text); outline: none; transition: border-color .15s, box-shadow .15s;
}
.inp:focus, .sel:focus, .txa:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.inp:disabled, .sel:disabled { background: var(--surface-2); color: var(--muted); }
.txa { resize: vertical; min-height: 74px; font-family: var(--mono); font-size: 12.5px; }
.inp.mono { font-family: var(--mono); }
.inp.sm, .sel.sm { padding: 5px 9px; font-size: 12.5px; }

.filters {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2);
  border-radius: var(--radius) var(--radius) 0 0;
}
.filters .inp, .filters .sel { width: auto; min-width: 130px; }
.filters .grow { flex: 1; min-width: 180px; }

.btn {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  padding: 7px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); font-size: 13px; font-family: inherit;
  cursor: pointer; white-space: nowrap; transition: all .15s;
}
.btn:hover { background: var(--surface-2); border-color: var(--muted); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger:hover { filter: brightness(.94); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--surface-2); }
.btn.sm { padding: 4px 10px; font-size: 12.5px; }
.btn.xs { padding: 2px 8px; font-size: 12px; }
.btn.block { width: 100%; }
.btn.lg { padding: 10px 18px; font-size: 14px; }

.btn-link {
  background: none; border: none; color: var(--primary); cursor: pointer;
  padding: 0; font-size: 12.5px; font-family: inherit;
}
.btn-link:hover { text-decoration: underline; }
.btn-link.danger { color: var(--danger); }
.btn-link + .btn-link { margin-left: 10px; }

.seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.seg button {
  padding: 5px 12px; border: none; background: var(--surface); cursor: pointer;
  font-size: 12.5px; font-family: inherit; color: var(--text-2);
}
.seg button + button { border-left: 1px solid var(--border); }
.seg button.on { background: var(--primary); color: #fff; }

.chk { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; }
.chk input { accent-color: var(--primary); width: 14px; height: 14px; cursor: pointer; }

.switch { position: relative; display: inline-block; width: 38px; height: 21px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch i {
  position: absolute; inset: 0; background: #cbd5e1; border-radius: 20px;
  transition: .2s; cursor: pointer;
}
.switch i::before {
  content: ""; position: absolute; width: 15px; height: 15px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: .2s;
}
.switch input:checked + i { background: var(--primary); }
.switch input:checked + i::before { transform: translateX(17px); }

.plugin-picker {
  max-height: 260px; overflow-y: auto; border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 4px;
}
.plugin-row {
  display: flex; gap: 10px; align-items: flex-start; padding: 7px 9px;
  border-radius: var(--radius-sm); cursor: pointer;
}
.plugin-row:hover { background: var(--surface-2); }
.plugin-row input { margin-top: 3px; accent-color: var(--primary); }
.plugin-row .pn { font-size: 13px; font-weight: 500; }
.plugin-row .pd { font-size: 11.5px; color: var(--muted); }

/* ------------------------------------------------------------------ 分页 */
.pager {
  display: flex; align-items: center; gap: 8px; padding: 11px 16px;
  border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-2);
}
.pager .spacer { flex: 1; }
.pager button {
  min-width: 28px; height: 28px; padding: 0 8px; border: 1px solid var(--border-strong);
  background: var(--surface); border-radius: var(--radius-sm); cursor: pointer;
  font-size: 12.5px; font-family: inherit; color: var(--text-2);
}
.pager button:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.pager button:disabled { opacity: .45; cursor: not-allowed; }
.pager button.on { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ------------------------------------------------------------------ 空态 / 加载 */
.empty { padding: 46px 20px; text-align: center; color: var(--muted); font-size: 13px; }
.empty .ei { font-size: 30px; opacity: .35; margin-bottom: 8px; }
.loading { padding: 40px; text-align: center; color: var(--muted); font-size: 13px; }
.spinner {
  display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: 7px;
  border: 2px solid var(--border-strong); border-top-color: var(--primary);
  border-radius: 50%; animation: spin .7s linear infinite;
}
.skeleton { background: linear-gradient(90deg, #eef1f6 25%, #f7f9fc 50%, #eef1f6 75%); background-size: 400% 100%; animation: sk 1.2s infinite; border-radius: 4px; }
@keyframes sk { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ------------------------------------------------------------------ 弹窗 */
.mask {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 100;
  display: flex; align-items: flex-start; justify-content: center; padding: 60px 20px 40px;
  overflow-y: auto; -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
}
.modal {
  background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-lg);
  width: 100%; max-width: 560px; animation: pop .16s ease-out;
}
.modal.wide { max-width: 860px; }
.modal.xwide { max-width: 1080px; }
@keyframes pop { from { transform: translateY(-10px); opacity: 0; } }
.modal-hd { padding: 15px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; }
.modal-hd h3 { margin: 0; font-size: 15.5px; }
.modal-hd .x { margin-left: auto; cursor: pointer; color: var(--muted); font-size: 20px; line-height: 1; padding: 0 4px; }
.modal-hd .x:hover { color: var(--text); }
.modal-bd { padding: 20px; max-height: calc(100vh - 230px); overflow-y: auto; }
.modal-ft { padding: 13px 20px; border-top: 1px solid var(--border); display: flex; gap: 9px; justify-content: flex-end; }

/* ------------------------------------------------------------------ Toast */
.toasts { position: fixed; top: 16px; right: 16px; z-index: 200; display: flex; flex-direction: column; gap: 9px; }
.toast {
  min-width: 250px; max-width: 400px; padding: 11px 14px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  display: flex; gap: 10px; align-items: flex-start; font-size: 13px;
  animation: slidein .2s ease-out; border-left: 3px solid var(--primary);
}
@keyframes slidein { from { transform: translateX(20px); opacity: 0; } }
.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--danger); }
.toast.warn { border-left-color: var(--warn); }
.toast .tt { font-weight: 600; margin-bottom: 2px; }
.toast .tm { color: var(--text-2); font-size: 12.5px; word-break: break-word; }
.toast .tx { margin-left: auto; cursor: pointer; color: var(--muted); }

/* ------------------------------------------------------------------ 详情页 */
.detail-hd {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); margin-bottom: 16px;
}
.detail-hd h2 { margin: 0 0 6px; font-size: 18px; }
.detail-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12.5px; color: var(--muted); }
.detail-meta b { color: var(--text-2); font-weight: 500; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); padding: 0 16px; }
.tabs button {
  padding: 10px 14px; border: none; background: none; cursor: pointer;
  font-size: 13.5px; font-family: inherit; color: var(--text-2);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs button:hover { color: var(--text); }
.tabs button.on { color: var(--primary); border-bottom-color: var(--primary); font-weight: 500; }

.progress { height: 7px; background: #eef1f6; border-radius: 5px; overflow: hidden; min-width: 80px; }
.progress i { display: block; height: 100%; background: var(--primary); transition: width .4s ease; border-radius: 5px; }
.progress.done i { background: var(--success); }
.progress.fail i { background: var(--danger); }
.progress.stripe i {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .25) 25%, transparent 25%,
    transparent 50%, rgba(255, 255, 255, .25) 50%, rgba(255, 255, 255, .25) 75%, transparent 75%);
  background-size: 14px 14px; animation: stripe .8s linear infinite;
}
@keyframes stripe { to { background-position: 14px 0; } }

.kv { display: grid; grid-template-columns: 108px 1fr; gap: 9px 14px; grid-gap: 9px 14px; font-size: 13px; }
.kv dt { color: var(--muted); font-size: 12.5px; }
.kv dd { margin: 0; word-break: break-word; }

.logbox {
  background: #0f172a; color: #cbd5e1; font-family: var(--mono); font-size: 12px;
  padding: 12px 14px; border-radius: var(--radius-sm); max-height: 420px; overflow-y: auto;
  line-height: 1.7;
}
.logbox::-webkit-scrollbar-thumb { background: #334155; }
.logbox .ln { display: flex; gap: 10px; }
.logbox .ts { color: #64748b; flex: none; }
.logbox .st { color: #38bdf8; flex: none; min-width: 74px; }
.logbox .msg { word-break: break-word; }
.logbox .lv-error .msg { color: #fca5a5; }
.logbox .lv-warn .msg { color: #fcd34d; }
.logbox .lv-success .msg { color: #86efac; }

.code {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; font-family: var(--mono); font-size: 12px; white-space: pre-wrap;
  word-break: break-all; max-height: 260px; overflow-y: auto; color: var(--text-2);
}

.live-feed { max-height: 320px; overflow-y: auto; }
.live-item {
  display: flex; gap: 10px; padding: 8px 4px; border-bottom: 1px dashed var(--border); font-size: 12.5px;
}
.live-item:last-child { border-bottom: none; }
.live-item .lt { color: var(--muted); font-family: var(--mono); font-size: 11.5px; flex: none; }

.diff-col { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.diff-col .dh { padding: 8px 12px; font-size: 12.5px; font-weight: 600; border-bottom: 1px solid var(--border); }
.diff-col .dh.new { background: var(--danger-soft); color: var(--danger); }
.diff-col .dh.fixed { background: var(--success-soft); color: var(--success); }
.diff-col .dh.same { background: var(--surface-2); color: var(--text-2); }
.diff-col .dh.chg { background: var(--warn-soft); color: var(--warn); }
.diff-col .dl { max-height: 300px; overflow-y: auto; }
.diff-col .di { padding: 7px 12px; border-bottom: 1px solid #eef1f6; font-size: 12.5px; }
.diff-col .di:last-child { border-bottom: none; }

.pill-list { display: flex; flex-wrap: wrap; gap: 5px; }

.helpbar {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 13px;
  background: var(--primary-soft); border: 1px solid #c9dcfb; border-radius: var(--radius-sm);
  font-size: 12.5px; color: #1e40af; margin-bottom: 14px;
}
.helpbar.warn { background: var(--warn-soft); border-color: #f3e0bd; color: #92400e; }
.helpbar.danger { background: var(--danger-soft); border-color: #f6cccc; color: #991b1b; }

.mt0 { margin-top: 0; } .mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; }
.mb0 { margin-bottom: 0; } .mb8 { margin-bottom: 8px; } .mb12 { margin-bottom: 12px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.mono { font-family: var(--mono); }
.right { text-align: right; }
.center { text-align: center; }
.flex { display: flex; align-items: center; gap: 8px; }
.flex-wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.strong { font-weight: 600; }
.break { word-break: break-all; }
.nowrap { white-space: nowrap; }

/* ------------------------------------------------------------------ 通知中心 */
.notif-list { padding: 4px 6px; }
.notif-item {
  display: flex; gap: 12px; padding: 13px 12px;
  border-bottom: 1px solid #eef1f6;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: #f9fbfe; }
.notif-item.unread { background: #fbfcfe; }
.notif-item.unread .notif-title { font-weight: 650; }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex: none; }
.notif-title { cursor: pointer; font-size: 13.5px; font-weight: 500; }
.notif-title:hover { color: var(--primary); text-decoration: underline; }

/* ------------------------------------------------------------------ 杂项补充 */
code.mono, .hint code, .helpbar code {
  background: rgba(15, 23, 42, .06); border-radius: 3px;
  padding: 0 4px; font-size: 12px; font-family: var(--mono);
}
.dropdown-menu .mi.on { background: var(--primary-soft); color: var(--primary-dark); }
.dropdown-menu .mi .spacer { flex: 1; }
.sidebar-mask { display: none; }
.mobile-only { display: none !important; }

/* ------------------------------------------------------------------ 响应式 */
@media (max-width: 1380px) {
  .g-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-2-1, .g-1-2, .g-3 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  :root { --sidebar-w: 0px; }
  .sidebar { transform: translateX(-100%); transition: transform .2s; width: 218px; }
  .sidebar.open { transform: none; box-shadow: var(--shadow-lg); }
  .main { margin-left: 0; }
  .login-page { grid-template-columns: 1fr; }
  .login-hero { display: none; }
  .g-2, .g-4, .g-6 { grid-template-columns: 1fr; }
  .content { padding: 14px 14px 44px; }
  .mobile-only { display: grid !important; }
  .hide-sm { display: none !important; }
  .sidebar-mask { display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, .4); z-index: 35; }
  .modal-bd { max-height: calc(100vh - 200px); }
  .filters .inp, .filters .sel { min-width: 110px; }
}

/* ==========================================================================
   富文本编辑器（vs-rich-editor，封装 Quill 1.3.7）
   与 src 风格一致：浅色极简、扁平按钮、聚焦边框
   ========================================================================== */
.vs-editor {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .12s, box-shadow .12s;
}
.vs-editor:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-soft);
}
.vs-editor.disabled {
  background: var(--surface-2);
  pointer-events: none;
  opacity: .82;
}
.vs-editor .ql-toolbar {
  border: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  padding: 6px 8px;
}
.vs-editor .ql-toolbar .ql-formats {
  margin-right: 14px;
}
.vs-editor .ql-toolbar .ql-formats:last-child { margin-right: 0; }
.vs-editor .ql-toolbar button {
  width: 30px; height: 28px; padding: 0;
  border-radius: var(--radius-sm);
}
.vs-editor .ql-toolbar button:hover {
  background: var(--primary-soft);
  color: var(--primary);
}
.vs-editor .ql-toolbar button.ql-active {
  background: var(--primary-soft);
  color: var(--primary);
}
.vs-editor .ql-toolbar .ql-picker-label {
  padding-left: 6px; padding-right: 6px;
}
.vs-editor .ql-container {
  border: 0;
  font-family: inherit;
  font-size: 13.5px;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}
.vs-editor .ql-editor {
  min-height: 160px;
  padding: 12px 14px;
  color: var(--text);
  line-height: 1.7;
}
.vs-editor .ql-editor.ql-blank::before {
  font-style: normal;
  color: var(--muted);
  left: 14px;
  right: 14px;
}
.vs-editor .ql-editor h2 { font-size: 16px; margin: 12px 0 8px; }
.vs-editor .ql-editor h3 { font-size: 14px; margin: 10px 0 6px; }
.vs-editor .ql-editor blockquote {
  border-left: 3px solid var(--primary);
  background: var(--surface-2);
  padding: 6px 12px;
  color: var(--text-2);
  margin: 8px 0;
}
.vs-editor .ql-editor pre,
.vs-editor .ql-editor code {
  font-family: ui-monospace, Consolas, "Courier New", monospace;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
}
.vs-editor .ql-editor pre {
  display: block;
  padding: 10px 12px;
  background: #f1f5f9;
  white-space: pre-wrap;
  word-break: break-all;
}
.vs-editor .ql-editor img {
  max-width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  display: block;
  margin: 8px 0;
}
.vs-editor .ql-editor a {
  color: var(--primary);
  text-decoration: underline;
  word-break: break-all;
}
.vs-editor-warn {
  margin-top: 4px;
  color: var(--warn);
}
.vs-editor-fallback { padding: 0; }
.vs-editor-fallback .txa { min-height: 160px; }
.vs-editor-fallback { display: none; }
.vs-editor:not(.loaded) .vs-editor-fallback { display: block; }
.vs-editor:not(.loaded) > .vs-editor-mount { display: none; }

/* 富文本编辑器在表单中的整体宽度控制 */
.field .vs-editor { width: 100%; }

/* ===== 面包屑导航 ===== */
.title-zone { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.4; color: var(--muted); margin-top: 1px; }
.breadcrumb .bc-item { display: inline-flex; align-items: center; gap: 6px; }
.breadcrumb .bc-item a { color: var(--primary); }
.breadcrumb .bc-item a:hover { text-decoration: underline; }
.breadcrumb .bc-sep { color: var(--border-strong); }

/* ===== 暗色主题（仅覆盖 CSS 变量，组件样式无需改动） ===== */
[data-theme="dark"] {
  --bg: #0f172a;
  --surface: #1e293b;
  --surface-2: #16203a;
  --border: #334155;
  --border-strong: #475569;
  --text: #e2e8f0;
  --text-2: #cbd5e1;
  --muted: #94a3b8;
  --primary: #3b82f6;
  --primary-dark: #60a5fa;
  --primary-soft: #1d3354;
  --success: #34d399;
  --success-soft: #10321f;
  --warn: #fbbf24;
  --warn-soft: #3a2c0c;
  --danger: #f87171;
  --danger-soft: #3a1717;
  --info: #38bdf8;
  --info-soft: #0c2e3a;
  --sev-critical: #f87171;
  --sev-critical-bg: #3a1717;
  --sev-high: #fb923c;
  --sev-high-bg: #3a2410;
  --sev-medium: #fbbf24;
  --sev-medium-bg: #3a2c0c;
  --sev-low: #38bdf8;
  --sev-low-bg: #0c2e3a;
  --sev-info: #94a3b8;
  --sev-info-bg: #1e293b;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.5);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.55);
}

/* ===== 控制台页脚 / ICP 备案号 ===== */
.app-foot {
  position: fixed;
  bottom: 0;
  left: var(--sidebar-w);
  right: 0;
  height: 28px;
  display: flex;
  align-items: center;
  padding: 0 22px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  z-index: 20;
}
.app-foot a {
  color: var(--muted);
  text-decoration: none;
}
.app-foot a:hover {
  color: var(--primary);
  text-decoration: underline;
}
/* 落地页页脚备案号 */
.foot-beian {
  color: var(--muted);
  text-decoration: none;
  margin-left: 4px;
}
.foot-beian:hover {
  color: var(--primary);
  text-decoration: underline;
}
/* 公安备案号盾形图标：内联 SVG，不引外链图片、无 style 属性，符合严格 CSP */
.ga-icon {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  margin-right: 3px;
  opacity: .85;
}
@media (max-width: 640px) {
  .ga-icon { width: 11px; height: 11px; margin-right: 2px; }
}

/* ===== 全站常驻备案号条（落地页，任意位置常驻可见） ===== */
.beian-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 22px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  z-index: 50;
}
.beian-bar .spacer { flex: 1; }
.beian-bar .beian-warn { opacity: .8; }
/* 预留底部空间，避免内容被常驻条遮挡 */
body.lp { padding-bottom: 30px; }
@media (max-width: 640px) {
  /* 备案号条移动端改为可换行、居中两行，禁用 spacer 防止它在窄屏独占一行 */
  .beian-bar {
    height: auto;
    min-height: 32px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 14px;
    padding: 6px 12px;
    font-size: 11px;
    line-height: 1.7;
  }
  .beian-bar .spacer { display: none; }
  .beian-bar .beian-warn { display: none; }
  /* 常驻条可能换行成两行，预留足够底部空间避免遮挡最后一行内容 */
  body.lp { padding-bottom: 56px; }
}

/* ===== 全站"联系我们"常驻入口 + 弹窗 ===== */
/* 常驻条内的"联系我们"链接：与备案号同处一栏，任意页面常驻可见 */
.beian-bar .beian-link,
.app-foot .beian-link {
  color: var(--muted);
  text-decoration: none;
}
.beian-bar .beian-link { margin-left: 16px; }
.app-foot .beian-link { margin-left: 18px; }
.beian-bar .beian-link:hover,
.app-foot .beian-link:hover { color: var(--primary); text-decoration: underline; }

/* 弹窗遮罩与对话框（原生注入，沿用主题变量以适配明暗主题） */
.contact-overlay {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .5);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 20px;
}
.contact-overlay[hidden] { display: none; }
.contact-dialog {
  width: 100%; max-width: 440px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35); max-height: 90vh; overflow-y: auto;
}
.contact-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--border);
}
.contact-head h3 { margin: 0; font-size: 17px; color: var(--text); }
.contact-sub { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.contact-close {
  border: 0; background: transparent; color: var(--muted);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.contact-close:hover { color: var(--primary); }
.contact-body { padding: 18px 20px 22px; }
.contact-info {
  background: rgba(37, 99, 235, .08);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 16px;
}
.ci-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; font-size: 13px; color: var(--text); }
.ci-k { color: var(--muted); width: 64px; flex: none; }
.ci-v { display: flex; align-items: center; gap: 8px; }
.ci-copy {
  border: 1px solid var(--border); background: var(--surface);
  color: var(--primary); font-size: 12px; padding: 2px 8px; border-radius: 6px; cursor: pointer;
}
.ci-copy:hover { border-color: var(--primary); }
.contact-form label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.contact-form input, .contact-form textarea {
  display: block; width: 100%; margin-top: 5px; padding: 9px 11px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font: inherit; font-size: 13px; resize: vertical;
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--primary); }
.contact-form .btn { width: 100%; margin-top: 4px; }
.contact-note { margin: 10px 0 0; font-size: 11px; color: var(--muted); opacity: .85; }
.contact-chatwrap { padding: 16px 20px 0; }
.contact-chat {
  width: 100%; height: 420px; border: 0; border-radius: 10px;
  background: var(--bg); display: block;
}
.contact-chat--empty {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 160px; padding: 0 20px; color: var(--muted);
  font-size: 13px; line-height: 1.6; border: 1px dashed var(--border); border-radius: 10px;
}
.contact-divider { height: 1px; background: var(--border); margin: 16px 0 0; }
@media (max-width: 520px) {
  .contact-chat { height: 360px; }
}
body.modal-open { overflow: hidden; }
/* ---------------------------------------------------------------------
   landing.css — 产品落地页（/）专用样式
   设计令牌复用 style.css（--bg/--surface/--primary 等），
   本文件仅补充落地页专属组件样式，满足 CSP style-src 不含 unsafe-inline。
   --------------------------------------------------------------------- */
:root {
  --text: #0f172a;
  --sky: #0ea5e9;
  --ink: #0f172a;
  --grad-a: linear-gradient(140deg, #1e3a8a 0%, #2563eb 52%, #0ea5e9 100%);
  --grad-b: linear-gradient(140deg, #312e81 0%, #4f46e5 55%, #7c3aed 100%);
  --grad-c: linear-gradient(140deg, #0f172a 0%, #1e3a8a 100%);
  --grad-soft: linear-gradient(180deg, #f8fafc 0%, #eef4ff 100%);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font); color: var(--text); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; }

/* ---------- 按钮（基础样式在 style.css，这里只补变体） ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; font-weight: 600; cursor: pointer; border-radius: 8px; transition: background .18s, border-color .18s, transform .12s; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--primary); border: 1px solid var(--primary); color: #fff; padding: 10px 18px; font-size: 14px; }
.btn.primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn.outline { background: transparent; border: 1px solid rgba(255,255,255,.6); color: #fff; padding: 10px 18px; font-size: 14px; }
.btn.outline:hover { background: rgba(255,255,255,.12); border-color: #fff; }
/* 亮色背景上的描边按钮：用于 .onboard-cta 等浅色区（.btn.outline 为深色 hero 准备，不能混用） */
.btn.outline-light { background: var(--surface); border: 1px solid var(--border-strong); color: var(--primary); }
.btn.outline-light:hover { border-color: var(--primary); background: var(--primary-soft); }
.btn.white { background: #fff; border: 1px solid #fff; color: var(--primary); padding: 12px 22px; font-size: 15px; border-radius: 8px; }
.btn.white:hover { background: #eef4ff; border-color: #eef4ff; }
.btn.lg { padding: 12px 22px; font-size: 15px; }
.btn.sm { padding: 7px 14px; font-size: 13px; }

/* ===================== 顶部导航 ===================== */
.lp-nav { -webkit-position: sticky; position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); box-shadow: 0 1px 0 rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06); }
.lp-nav-in { max-width: 1180px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 14px; }
.lp-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; color: var(--text); }
.lp-brand svg { width: 30px; height: 30px; }

.nav-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.nav-burger { display: none; margin-left: auto; width: 40px; height: 40px; border-radius: 8px; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.nav-burger span { display: block; width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: .2s; }

.nav-links { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.nav-links .nav-a { color: var(--text-2); font-size: 14.5px; padding: 8px 12px; border-radius: 8px; transition: color .15s, background .15s; }
.nav-links .nav-a:hover { color: var(--primary); background: var(--primary-soft); }
.nav-links .nav-cta-login { margin-left: 6px; }
.nav-links .nav-cta-reg { margin-left: 6px; }

/* ===================== 轮播横幅 ===================== */
.hero-carousel { position: relative; overflow: hidden; }
.slide-input { position: absolute; opacity: 0; pointer-events: none; }
.slides { display: flex; transition: transform .55s cubic-bezier(.4,0,.2,1); }
.slide { flex: 0 0 100%; min-height: 470px; display: flex; align-items: center; color: #fff; }
.slide-1 { background: var(--grad-a); }
.slide-2 { background: var(--grad-b); }
.slide-3 { background: var(--grad-c); }
.slide-in { max-width: 1180px; margin: 0 auto; padding: 84px 24px; width: 100%; position: relative; z-index: 1; }
.slide::after { content: ""; position: absolute; right: -120px; top: -150px; width: 460px; height: 460px; border-radius: 50%; background: rgba(255,255,255,.07); }

#slide-1:checked ~ .slides { transform: translateX(0); }
#slide-2:checked ~ .slides { transform: translateX(-100%); }
#slide-3:checked ~ .slides { transform: translateX(-200%); }

.lp-badge { display: inline-block; padding: 5px 13px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; font-size: 12.5px; letter-spacing: .5px; opacity: .92; margin-bottom: 22px; }
.slide h1 { font-size: 42px; line-height: 1.2; margin: 0 0 16px; font-weight: 800; letter-spacing: .5px; }
.slide p.lp-sub { font-size: 17px; max-width: 660px; opacity: .92; margin: 0 0 30px; }
.slide .lp-cta { display: flex; gap: 14px; flex-wrap: wrap; }

.carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.12); color: #fff; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.carousel-arrow:hover { background: rgba(255,255,255,.24); }
.carousel-arrow.prev { left: 18px; }
.carousel-arrow.next { right: 18px; }

.carousel-dots { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; gap: 10px; }
.carousel-dots .dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.45); cursor: pointer; transition: background .2s, width .2s; }
#slide-1:checked ~ .carousel-dots label[for="slide-1"],
#slide-2:checked ~ .carousel-dots label[for="slide-2"],
#slide-3:checked ~ .carousel-dots label[for="slide-3"] { background: #fff; width: 26px; border-radius: 6px; }

/* ===================== 信任数据条 ===================== */
.lp-stats { background: var(--surface); border-bottom: 1px solid var(--border); }
.lp-stats-in { max-width: 1180px; margin: 0 auto; padding: 26px 24px; display: flex; gap: 48px; flex-wrap: wrap; justify-content: center; text-align: center; }
.lp-stat .n { font-size: 28px; font-weight: 800; color: var(--primary); }
.lp-stat .t { font-size: 13px; color: var(--muted); }

/* ===================== 通用区块 ===================== */
.lp-section { max-width: 1180px; margin: 0 auto; padding: 76px 24px; }
.lp-section-alt { max-width: none; background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.lp-section-alt > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.lp-section-soft { max-width: none; background: var(--grad-soft); }
.lp-section-soft > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.lp-eyebrow { display: block; text-align: center; color: var(--primary); font-weight: 700; font-size: 13px; letter-spacing: 1.5px; margin-bottom: 14px; position: relative; padding-top: 20px; }
.lp-eyebrow::before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 6px; height: 16px; border-radius: 3px; background: var(--primary); }
.lp-section h2 { font-size: 28px; margin: 0 0 8px; text-align: center; }
.lp-section .lp-lead { text-align: center; color: var(--muted); margin: 0 auto 40px; max-width: 660px; }

/* ===================== 特色功能 ===================== */
.lp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; grid-gap: 18px; }
/* 特性卡片：CSS Grid 让图标与标题同行、描述在下；图标去方块、改用变体描边色 */
.lp-feat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); transition: transform .18s, box-shadow .18s, border-color .18s; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ic title" "sp desc"; column-gap: 12px; row-gap: 6px; }
.lp-feat:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.lp-feat .ic { grid-area: ic; align-self: center; display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; border-radius: 0; background: none; color: var(--primary); transition: transform .18s; }
.lp-feat .ic svg { width: 24px; height: 24px; }
.lp-feat:hover .ic { transform: translateX(2px); }
/* 八种图标描边色变体：之前 ic-* 的 background 渐变被 .lp-feat .ic 压死，改为 color 真正生效 */
.lp-feat .ic.ic-blue { color: #2563eb; }
.lp-feat .ic.ic-cyan { color: #0891b2; }
.lp-feat .ic.ic-violet { color: #7c3aed; }
.lp-feat .ic.ic-green { color: #059669; }
.lp-feat .ic.ic-amber { color: #d97706; }
.lp-feat .ic.ic-rose { color: #e11d48; }
.lp-feat .ic.ic-sky { color: #0284c7; }
.lp-feat .ic.ic-indigo { color: #4f46e5; }
.lp-feat h3 { grid-area: title; margin: 0 0 4px; font-size: 16.5px; }
.lp-feat p { grid-area: desc; margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.65; }

/* ===================== 产品动态 ===================== */
.lp-news { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; grid-gap: 18px; }
.news-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform .18s, box-shadow .18s, border-color .18s; }
.news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.news-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.news-tag { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.tag-new { background: #e0edff; color: #1d4ed8; }
.tag-sec { background: #fde8ef; color: #be123c; }
.tag-perf { background: #e7f8ef; color: #047857; }
.tag-tip { background: #fff2e0; color: #b45309; }
.news-card time { font-size: 12.5px; color: var(--muted); }
.news-card h3 { font-size: 16.5px; margin: 0 0 8px; }
.news-card p { color: var(--text-2); font-size: 14px; margin: 0 0 14px; flex: 1; }
.news-more { color: var(--primary); font-size: 13.5px; font-weight: 600; }
.news-more:hover { text-decoration: underline; }

/* ===================== 用户引导 ===================== */
.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; grid-gap: 20px; }
.lp-step { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 24px 24px; box-shadow: var(--shadow); transition: transform .18s, box-shadow .18s, border-color .18s; }
.lp-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.lp-step .num { width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; margin-bottom: 14px; }
.lp-step h3 { margin: 0 0 8px; font-size: 16.5px; line-height: 1.45; min-height: 24px; }
.lp-step p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.65; min-height: 46px; overflow-wrap: anywhere; word-break: break-word; text-wrap: pretty; }
.onboard-cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 34px; }

/* ===================== 底部 CTA ===================== */
.lp-cta-band { background: var(--grad-c); color: #fff; }
.lp-cta-in { max-width: 1180px; margin: 0 auto; padding: 60px 24px; text-align: center; }
.lp-cta-in h2 { font-size: 28px; margin: 0 0 10px; }
.lp-cta-in p { opacity: .85; margin: 0 0 26px; }

/* ===================== 页脚 ===================== */
.lp-foot { background: var(--surface); border-top: 1px solid var(--border); }
.lp-foot-in { max-width: 1180px; margin: 0 auto; padding: 48px 24px 30px; display: flex; gap: 40px; flex-wrap: wrap; }
.foot-brand { max-width: 320px; }
.foot-brand .lp-brand { margin-bottom: 12px; }
.foot-desc { color: var(--muted); font-size: 13.5px; margin: 0; }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-left: auto; }
.foot-col h4 { font-size: 14px; margin: 0 0 14px; color: var(--text); }
.foot-col a { display: block; color: var(--text-2); font-size: 13.5px; padding: 5px 0; }
.foot-col a:hover { color: var(--primary); }
.lp-foot-bot { max-width: 1180px; margin: 0 auto; padding: 16px 24px; border-top: 1px solid var(--border); display: flex; gap: 12px; align-items: center; color: var(--muted); font-size: 12.5px; flex-wrap: wrap; }
.lp-foot-bot .spacer { flex: 1; }
.foot-warn { color: var(--muted); }

/* ===================== 响应式 ===================== */
@media (max-width: 1040px) {
  .lp-grid, .lp-news { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .nav-burger { display: flex; }
  .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 4px; background: #fff; border-bottom: 1px solid var(--border); padding: 12px 16px; box-shadow: var(--shadow-lg); }
  .nav-toggle:checked ~ .nav-links { display: flex; }
  .nav-links .nav-a { padding: 12px; }
  .nav-links .nav-cta-login, .nav-links .nav-cta-reg { margin-left: 0; }
  .slide h1 { font-size: 31px; }
  .slide { min-height: 420px; }
  .lp-foot-in { flex-direction: column; gap: 24px; }
  .foot-cols { margin-left: 0; grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .lp-grid, .lp-news, .lp-steps { grid-template-columns: 1fr; }
  .slide h1 { font-size: 26px; }
  .slide p.lp-sub { font-size: 15px; }
  .slide-in { padding: 60px 18px 70px; }
  .slide { min-height: 380px; }
  .lp-section { padding: 52px 18px; }
  .lp-section h2 { font-size: 23px; }
  .lp-stats-in { gap: 22px; }
  .lp-stat .n { font-size: 23px; }
  .carousel-arrow { display: none; }
  .foot-cols { grid-template-columns: repeat(2, 1fr); }
}
/* ---------------------------------------------------------------------
   utilities.css — 原子工具类（由 tools/csp_inline_style_codemod.py 生成）

   用途：替代模板中的静态 style="..." 行内样式，使 CSP 的 style-src
   可以去掉 'unsafe-inline'，阻断基于样式注入的 XSS/UI 欺骗向量。

   为何带 !important：行内样式原本在层叠中优先级最高，若不加 !important，
   特异性更高的既有选择器会反向覆盖，造成视觉回归。加上后与原行为严格等价。

   请勿手工编辑，重新生成请执行：
       python tools/csp_inline_style_codemod.py --apply
   --------------------------------------------------------------------- */
.u-bd-0_p-0_bg-transparent{border:0 !important;padding:0 !important;background:transparent !important;}
.u-bg-0891b2{background:#0891b2 !important;}
.u-bg-12a150{background:#12a150 !important;}
.u-bg-4b5563{background:#4b5563 !important;}
.u-bg-64748b{background:#64748b !important;}
.u-bg-danger-soft_bdc-danger_c-danger{background:var(--danger-soft) !important;border-color:var(--danger) !important;color:var(--danger) !important;}
.u-bg-ea580c{background:#ea580c !important;}
.u-bg-success-soft_bdc-success_c-0a6b3a{background:var(--success-soft) !important;border-color:var(--success) !important;color:#0a6b3a !important;}
.u-bg-surface-2_fw-600_fs-12-5px{background:var(--surface-2) !important;font-weight:600 !important;font-size:12.5px !important;}
.u-bg-surface-2_p-10px_br-8px_maxh-420px_ov-auto_c99544{background:var(--surface-2) !important;padding:10px !important;border-radius:8px !important;max-height:420px !important;overflow:auto !important;white-space:pre-wrap !important;font-size:12px !important;line-height:1.6 !important;margin:12px 0 0 !important;border:1px solid var(--border) !important;}
.u-c-64748b{color:#64748b !important;}
.u-c-8a94a6_p-8px-9px-3px{color:#8a94a6 !important;padding:8px 9px 3px !important;}
.u-c-danger{color:var(--danger) !important;}
.u-c-dc2626{color:#dc2626 !important;}
.u-c-ea580c{color:#ea580c !important;}
.u-c-text-2{color:var(--text-2) !important;}
.u-c-text-2_ws-pre-wrap{color:var(--text-2) !important;white-space:pre-wrap !important;}
.u-cur-pointer{cursor:pointer !important;}
.u-d-inline-block_maxw-150px_va-bottom{display:inline-block !important;max-width:150px !important;vertical-align:bottom !important;}
.u-d-inline-flex{display:inline-flex !important;}
.u-d-none{display:none !important;}
.u-ff-inherit{font-family:inherit !important;}
.u-flex-1{flex:1 !important;}
.u-flex-1_minw-0{flex:1 !important;min-width:0 !important;}
.u-flex-none{flex:none !important;}
.u-fs-11-5px{font-size:11.5px !important;}
.u-fs-11px{font-size:11px !important;}
.u-fs-11px_op-7_ls-2px{font-size:11px !important;opacity:.7 !important;letter-spacing:2px !important;}
.u-fs-12-5px{font-size:12.5px !important;}
.u-fs-13-5px{font-size:13.5px !important;}
.u-fs-13px{font-size:13px !important;}
.u-fs-14px{font-size:14px !important;}
.u-fs-15px{font-size:15px !important;}
.u-fs-16px_fw-600_ls-1px{font-size:16px !important;font-weight:600 !important;letter-spacing:1px !important;}
.u-fs-18px{font-size:18px !important;}
.u-fs-19px{font-size:19px !important;}
.u-fs-22px_fw-600{font-size:22px !important;font-weight:600 !important;}
.u-fs-22px_fw-600_c-2563eb{font-size:22px !important;font-weight:600 !important;color:#2563eb !important;}
.u-fs-22px_fw-650{font-size:22px !important;font-weight:650 !important;}
.u-gap-0-12px{gap:0 12px !important;}
.u-gap-0-14px{gap:0 14px !important;}
.u-gap-0-16px{gap:0 16px !important;}
.u-gap-10px{gap:10px !important;}
.u-gap-10px_mb-26px{gap:10px !important;margin-bottom:26px !important;}
.u-gap-10px_ta-center{gap:10px !important;text-align:center !important;}
.u-gap-12px{gap:12px !important;}
.u-gap-14px{gap:14px !important;}
.u-gap-16px{gap:16px !important;}
.u-gap-20px{gap:20px !important;}
.u-gap-22px{gap:22px !important;}
.u-gap-24px{gap:24px !important;}
.u-gap-4px{gap:4px !important;}
.u-gap-5px_d-inline-flex{gap:5px !important;display:inline-flex !important;}
.u-gap-6px{gap:6px !important;}
.u-gap-7px{gap:7px !important;}
.u-gap-8px{gap:8px !important;}
.u-gap-8px_ai-center_fwrap-wrap{gap:8px !important;align-items:center !important;flex-wrap:wrap !important;}
.u-gap-8px_flex-none{gap:8px !important;flex:none !important;}
.u-gap-8px_jc-flex-end{gap:8px !important;justify-content:flex-end !important;}
.u-gap-8px_minw-120px{gap:8px !important;min-width:120px !important;}
.u-gap-9px{gap:9px !important;}
.u-gap-9px_ai-center{gap:9px !important;align-items:center !important;}
.u-lh-1-7{line-height:1.7 !important;}
.u-m-0{margin:0 !important;}
.u-m-0_fs-15-5px_flex-1{margin:0 !important;font-size:15.5px !important;flex:1 !important;}
.u-m-0_fs-16px_flex-1{margin:0 !important;font-size:16px !important;flex:1 !important;}
.u-m-0_fs-17px{margin:0 !important;font-size:17px !important;}
.u-m-0_pl-18px{margin:0 !important;padding-left:18px !important;}
.u-m-2px-0-14px{margin:2px 0 14px !important;}
.u-m-3px-6px-3px-0_d-inline-flex_ai-center_gap-6px{margin:3px 6px 3px 0 !important;display:inline-flex !important;align-items:center !important;gap:6px !important;}
.u-m-6px-0-0-18px_p-0{margin:6px 0 0 18px !important;padding:0 !important;}
.u-maxw-140px{max-width:140px !important;}
.u-maxw-190px{max-width:190px !important;}
.u-maxw-200px{max-width:200px !important;}
.u-maxw-320px{max-width:320px !important;}
.u-maxw-420px{max-width:420px !important;}
.u-maxw-440px{max-width:440px !important;}
.u-maxw-460px{max-width:460px !important;}
.u-maxw-520px{max-width:520px !important;}
.u-minh-140px_p-0{min-height:140px !important;padding:0 !important;}
.u-ml-4px{margin-left:4px !important;}
.u-ml-5px{margin-left:5px !important;}
.u-ml-6px{margin-left:6px !important;}
.u-mr-4px{margin-right:4px !important;}
.u-mr-6px{margin-right:6px !important;}
.u-mr-8px{margin-right:8px !important;}
.u-p-0_h-100_d-flex_fd-column_ai-center_jc-center{padding:0 !important;height:100% !important;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;}
.u-p-10px-13px{padding:10px 13px !important;}
.u-p-12px-16px-0{padding:12px 16px 0 !important;}
.u-p-20px{padding:20px !important;}
.u-p-22px-20px_lh-1-75{padding:22px 20px !important;line-height:1.75 !important;}
.u-p-26px-0{padding:26px 0 !important;}
.u-p-6px{padding:6px !important;}
.u-p-6px-0_bb-1px-dashed-border{padding:6px 0 !important;border-bottom:1px dashed var(--border) !important;}
.u-p-8px-13px-12px{padding:8px 13px 12px !important;}
.u-p-9px-16px_bb-1px-solid-border_gap-6px{padding:9px 16px !important;border-bottom:1px solid var(--border) !important;gap:6px !important;}
.u-pos-sticky_top-78px{-webkit-position:sticky !important;position:sticky !important;top:78px !important;}
.u-pt-0{padding-top:0 !important;}
.u-shadow-none{box-shadow:none !important;}
.u-w-100_h-100{width:100% !important;height:100% !important;}
.u-w-100px{width:100px !important;}
.u-w-104px{width:104px !important;}
.u-w-110px{width:110px !important;}
.u-w-118px{width:118px !important;}
.u-w-120px{width:120px !important;}
.u-w-126px{width:126px !important;}
.u-w-130px{width:130px !important;}
.u-w-140px{width:140px !important;}
.u-w-150px{width:150px !important;}
.u-w-160px{width:160px !important;}
.u-w-170px{width:170px !important;}
.u-w-180px{width:180px !important;}
.u-w-190px{width:190px !important;}
.u-w-196px{width:196px !important;}
.u-w-200px{width:200px !important;}
.u-w-220px{width:220px !important;}
.u-w-22px_h-22px_fs-11px{width:22px !important;height:22px !important;font-size:11px !important;}
.u-w-230px{width:230px !important;}
.u-w-240px{width:240px !important;}
.u-w-52px{width:52px !important;}
.u-w-56px{width:56px !important;}
.u-w-60px{width:60px !important;}
.u-w-64px{width:64px !important;}
.u-w-66px{width:66px !important;}
.u-w-70px{width:70px !important;}
.u-w-74px{width:74px !important;}
.u-w-76px{width:76px !important;}
.u-w-78px{width:78px !important;}
.u-w-80px{width:80px !important;}
.u-w-82px{width:82px !important;}
.u-w-84px{width:84px !important;}
.u-w-88px{width:88px !important;}
.u-w-90px{width:90px !important;}
.u-w-96px{width:96px !important;}
.u-w-auto{width:auto !important;}
.u-wb-break-word{word-break:break-word !important;}
/* ==========================================================================
 * compat.css — 跨浏览器降级层（由 tools/_gen_compat_css.mjs 生成，勿手改）
 * 仅在不支持 flex gap 的极旧浏览器（如 Safari < 14.1）下生效，
 * 用「容器负 margin + 子元素正 margin」等价还原间距，避免布局贴死。
 * 现代浏览器（gap 受支持）不会进入 @supports 分支，零影响。
 * 另含 .vs-legacy-notice 降级提示样式（compatibility.js 也会内联兜底）。
 * ========================================================================== */

@supports not (gap: 1px) {
  .kpi .lb { margin: -3px -3px; }
  .kpi .lb > * { margin: 3px 3px; }
  .risk-gauge { margin: -7px -7px; }
  .risk-gauge > * { margin: 7px 7px; }
  .chk { margin: -3px -3px; }
  .chk > * { margin: 3px 3px; }
  .modal-ft { margin: -4.5px -4.5px; }
  .modal-ft > * { margin: 4.5px 4.5px; }
  .toasts { margin: -4.5px -4.5px; }
  .toasts > * { margin: 4.5px 4.5px; }
  .detail-meta { margin: -4px -9px; }
  .detail-meta > * { margin: 4px 9px; }
  .tabs { margin: -1px -1px; }
  .tabs > * { margin: 1px 1px; }
  .logbox .ln { margin: -5px -5px; }
  .logbox .ln > * { margin: 5px 5px; }
  .pill-list { margin: -2.5px -2.5px; }
  .pill-list > * { margin: 2.5px 2.5px; }
  .flex { margin: -4px -4px; }
  .flex > * { margin: 4px 4px; }
  .u-gap-0-12px { margin: 0px -6px; }
  .u-gap-0-12px > * { margin: 0px 6px; }
  .u-gap-0-14px { margin: 0px -7px; }
  .u-gap-0-14px > * { margin: 0px 7px; }
  .u-gap-0-16px { margin: 0px -8px; }
  .u-gap-0-16px > * { margin: 0px 8px; }
  .u-gap-10px { margin: -5px -5px; }
  .u-gap-10px > * { margin: 5px 5px; }
  .u-gap-10px_mb-26px { margin: -5px -5px; }
  .u-gap-10px_mb-26px > * { margin: 5px 5px; }
  .u-gap-10px_ta-center { margin: -5px -5px; }
  .u-gap-10px_ta-center > * { margin: 5px 5px; }
  .u-gap-12px { margin: -6px -6px; }
  .u-gap-12px > * { margin: 6px 6px; }
  .u-gap-14px { margin: -7px -7px; }
  .u-gap-14px > * { margin: 7px 7px; }
  .u-gap-16px { margin: -8px -8px; }
  .u-gap-16px > * { margin: 8px 8px; }
  .u-gap-20px { margin: -10px -10px; }
  .u-gap-20px > * { margin: 10px 10px; }
  .u-gap-22px { margin: -11px -11px; }
  .u-gap-22px > * { margin: 11px 11px; }
  .u-gap-24px { margin: -12px -12px; }
  .u-gap-24px > * { margin: 12px 12px; }
  .u-gap-4px { margin: -2px -2px; }
  .u-gap-4px > * { margin: 2px 2px; }
  .u-gap-5px_d-inline-flex { margin: -2.5px -2.5px; }
  .u-gap-5px_d-inline-flex > * { margin: 2.5px 2.5px; }
  .u-gap-6px { margin: -3px -3px; }
  .u-gap-6px > * { margin: 3px 3px; }
  .u-gap-7px { margin: -3.5px -3.5px; }
  .u-gap-7px > * { margin: 3.5px 3.5px; }
  .u-gap-8px { margin: -4px -4px; }
  .u-gap-8px > * { margin: 4px 4px; }
  .u-gap-8px_ai-center_fwrap-wrap { margin: -4px -4px; }
  .u-gap-8px_ai-center_fwrap-wrap > * { margin: 4px 4px; }
  .u-gap-8px_flex-none { margin: -4px -4px; }
  .u-gap-8px_flex-none > * { margin: 4px 4px; }
  .u-gap-8px_jc-flex-end { margin: -4px -4px; }
  .u-gap-8px_jc-flex-end > * { margin: 4px 4px; }
  .u-gap-8px_minw-120px { margin: -4px -4px; }
  .u-gap-8px_minw-120px > * { margin: 4px 4px; }
  .u-gap-9px { margin: -4.5px -4.5px; }
  .u-gap-9px > * { margin: 4.5px 4.5px; }
  .u-gap-9px_ai-center { margin: -4.5px -4.5px; }
  .u-gap-9px_ai-center > * { margin: 4.5px 4.5px; }
  .u-p-9px-16px_bb-1px-solid-border_gap-6px { margin: -3px -3px; }
  .u-p-9px-16px_bb-1px-solid-border_gap-6px > * { margin: 3px 3px; }
}

/* 降级提示（与 compatibility.js 内联样式保持一致，便于统一调整） */
.vs-legacy-notice { min-height: 100vh; display: flex; align-items: center;
  justify-content: center; font-family: -apple-system, BlinkMacSystemFont,
  'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: #f1f5f9; color: #0f172a; padding: 24px; text-align: center;
  line-height: 1.7; }
.vs-legacy-notice .box { max-width: 440px; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 12px; padding: 32px 28px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, .08); }
.vs-legacy-notice h1 { font-size: 19px; margin: 0 0 10px; }
.vs-legacy-notice p { font-size: 14px; color: #475569; margin: 0 0 16px; }

/* [UX] 键盘焦点环 + 颜色方案跟随（P0-2 / P1-8） */
.nav-toggle:focus-visible + .nav-burger { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 8px; }
:root { color-scheme: light; }

/* 轮播键盘焦点环（#246：移动端键盘 / 读屏用户友好） */
.hero-carousel:focus-visible {
  outline: 3px solid rgba(255, 255, 255, .9);
  outline-offset: -3px;
}
.carousel-arrow:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
.doc-h3 { font-size: 16px; margin: 22px 0 4px; }
.doc-h3.tight { margin-top: 18px; }
.lp-cta-band { margin-top: 40px; border-radius: 16px; }

/* ===== 视觉精修覆盖层 20260831b（与 landing.css 同源，后定义优先） ===== */
html { scroll-behavior: smooth; }
.lp-section { padding: 84px 24px; scroll-margin-top: 84px; }
.lp-section h2 { font-size: 30px; margin: 0 0 12px; letter-spacing: .3px; }
.lp-section .lp-lead { margin: 0 auto 44px; max-width: 680px; }
/* 注：原此处有 .lp-feat .ic / :hover .ic / h3 三条覆写层，已删除——它们会与上面新布局冲突（把裸图标又压回方块底色） */
.lp-grid, .lp-news { gap: 20px; grid-gap: 20px; }
.lp-stats-in { gap: 40px; padding: 28px 24px; }

/* ===== hover 体系覆盖层 20260831c（与 landing.css 同源） ===== */
.lp-brand { transition: opacity .15s ease; }
.lp-brand:hover { opacity: .82; }
.foot-col a { transition: color .15s ease; }
.news-more { transition: color .15s ease; }
.news-more:hover { color: var(--primary); }
.carousel-dots .dot:hover { width: 14px; background: rgba(255,255,255,.85); }

/* ===== 水平对齐覆盖层 20260831d（与 landing.css 同源） ===== */
.lp-nav-in { gap: 16px; }
.nav-links { gap: 2px; align-items: center; }
.nav-links .nav-a { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 12px; line-height: 1; }
.nav-links .btn { min-height: 38px; font-size: 14.5px; line-height: 1; }
.nav-links .btn.sm { padding: 0 16px; }
.nav-cta-login { margin-left: 14px; }
.nav-cta-reg { margin-left: 8px; }
.lp-foot-in { align-items: flex-start; }
.foot-brand { flex: 0 1 320px; }
.foot-cols { flex: 0 1 560px; max-width: 660px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-left: auto; }
.foot-col { min-width: 0; }
.foot-col a { line-height: 1.5; }
@media (max-width: 860px) {
  .nav-links { gap: 4px; }
  .nav-links .nav-a { justify-content: flex-start; min-height: 44px; padding: 0 12px; }
  .nav-links .btn { min-height: 44px; width: 100%; }
  .nav-cta-login, .nav-cta-reg { margin-left: 0; }
  .foot-brand { flex: 0 1 auto; }
  .foot-cols { flex: 1 1 auto; max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 480px) {
  .foot-cols { grid-template-columns: 1fr; }
}

/* ===== 夜间模式覆盖层 20260831e（与 landing.css 同源，必须置于文件末尾） ===== */
[data-theme="dark"] {
  color-scheme: dark;
  --text: #e2e8f0; --text-2: #cbd5e1; --muted: #94a3b8;
  --bg: #0f172a; --surface: #1e293b; --surface-2: #16203a;
  --border: #334155; --border-strong: #475569;
  --sky: #38bdf8; --ink: #e2e8f0;
  --grad-soft: linear-gradient(180deg, #0f172a 0%, #16203a 100%);
}
[data-theme="dark"] .lp-nav { background: rgba(15,23,42,.94); border-bottom-color: var(--border); box-shadow: 0 1px 0 rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35); }
.nav-theme {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 38px; padding: 0 12px; margin-left: 8px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text-2);
  font-family: inherit; font-size: 14.5px; line-height: 1; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.nav-theme:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.nav-theme:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.nav-theme-ic { font-size: 13px; }
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color .28s ease, border-color .28s ease, color .28s ease, fill .28s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after,
  html.theme-transition, html.theme-transition *,
  html.theme-transition *::before, html.theme-transition *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
}
@media (max-width: 860px) {
  [data-theme="dark"] .nav-links { background: #1e293b; }
  .nav-theme { min-height: 44px; width: 100%; justify-content: flex-start; margin-left: 0; }
}

/* 视觉精修覆盖层 20260831h —— 焦点可达 / 按压反馈 / 层次阴影 / 选择高亮 / 平滑滚动 / 表单对比度 */
:where(a, button, .btn, .nav-a, .tag, .tab-label, .seg button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.btn:active { transform: translateY(1px); }
.btn.primary { box-shadow: 0 1px 2px rgba(16, 24, 40, .18); }
.btn.primary:hover { box-shadow: 0 4px 14px rgba(37, 99, 235, .28); }
.btn.white { box-shadow: 0 6px 18px rgba(15, 23, 42, .20); }
.btn.white:hover { box-shadow: 0 10px 26px rgba(15, 23, 42, .28); }
::selection { background: var(--primary); color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
.contact-form label { color: var(--text-2); }

/* ===================== 产品介绍页（about.html）统一组件 =====================
   原 about.css 合并进落地页统一包；组件升级为与 .lp-feat / .news-card / .lp-step
   一致的视觉语言：--radius 圆角、--shadow 投影、平滑过渡、悬停抬升、暗色自适应。 */
.about-hero {
  position: relative;
  padding: 72px 24px 56px;
  text-align: center;
  background:
    radial-gradient(1200px 400px at 50% -10%, rgba(37,99,235,.10), transparent 70%),
    var(--surface);
  border-bottom: 1px solid var(--border);
}
.about-hero .lp-badge { margin-bottom: 18px; }
.about-hero h1 {
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.25;
  margin: 0 auto 14px;
  max-width: 880px;
  letter-spacing: -.5px;
}
.about-hero .about-pos {
  font-size: 16px;
  color: var(--text-2);
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.7;
}

.about-wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

.about-section { padding: 52px 0; border-bottom: 1px solid var(--border); }
.about-section:last-of-type { border-bottom: none; }
.about-section h2 { font-size: clamp(20px, 2.4vw, 26px); margin: 6px 0 10px; }
.about-section .lp-lead { margin-bottom: 28px; }

/* 核心目标要点：与落地页卡片一致的圆角 / 投影 / 悬停抬升 */
.goal-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.goal-list li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); box-shadow: var(--shadow);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.goal-list li:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.goal-list .gk {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
  color: #fff; background: var(--primary);
}
.goal-list b { display: block; margin-bottom: 2px; }
.goal-list span { color: var(--text-2); font-size: 14px; line-height: 1.6; }

/* 通用两列定义卡：统一圆角 / 投影 / 悬停 */
.def-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.def-col {
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.def-col:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.def-col h3 {
  margin: 0; padding: 14px 18px; font-size: 15px;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--border);
}
.def-col.in h3 { color: #15803d; background: rgba(22,163,74,.06); }
.def-col.out h3 { color: #b45309; background: rgba(180,83,9,.06); }
.def-col ul { margin: 0; padding: 14px 18px 16px 36px; }
.def-col li { margin: 7px 0; line-height: 1.6; font-size: 14px; }
.def-col.out li { color: #92400e; }

/* 合规边界 callout：统一圆角 / 投影 */
.constraint-box {
  margin-top: 22px; padding: 16px 18px; border-radius: var(--radius);
  border: 1px solid rgba(37,99,235,.25); background: rgba(37,99,235,.06);
  color: #1e3a8a; font-size: 14px; line-height: 1.7;
}
.constraint-box b { color: #1d4ed8; }

/* 输出格式：schema 表：统一圆角 / 投影 */
.schema-table {
  width: 100%; border-collapse: collapse; margin-top: 8px;
  font-size: 14px; overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--border); box-shadow: var(--shadow);
}
.schema-table th, .schema-table td {
  text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.schema-table thead th { background: var(--bg); font-weight: 600; }
.schema-table tr:last-child td { border-bottom: none; }
.schema-table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; background: rgba(37,99,235,.08); color: #1d4ed8;
  padding: 1px 6px; border-radius: 5px;
}
.schema-table td small { color: var(--text-2); }

/* 风险等级图例：统一边框 / 投影 */
.cvss-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.cvss-legend .lv {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border);
  box-shadow: var(--shadow); transition: border-color .15s, color .15s;
}
.cvss-legend .dot { width: 10px; height: 10px; border-radius: 50%; }
.lv-crit .dot { background: #b91c1c; } .lv-crit { color: #b91c1c; }
.lv-high .dot { background: #ea580c; } .lv-high { color: #c2410c; }
.lv-med  .dot { background: #ca8a04; } .lv-med  { color: #a16207; }
.lv-low  .dot { background: #16a34a; } .lv-low  { color: #15803d; }

/* 人物卡片（目标用户）复用 .lp-grid */
.persona .role { font-weight: 600; color: var(--primary); font-size: 13px; }

@media (max-width: 760px) {
  .def-grid { grid-template-columns: 1fr; }
  .about-section { padding: 40px 0; }
}
.sol-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1240px;
  margin: 0 auto;
}
.sol-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 22px 22px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .18s, box-shadow .18s, border-color .18s;
  overflow: hidden;
}
.sol-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
}
.sol-card.sol-a::before { background: linear-gradient(135deg,#1e3a8a,#2563eb); }
.sol-card.sol-b::before { background: linear-gradient(135deg,#312e81,#7c3aed); }
.sol-card.sol-c::before { background: linear-gradient(135deg,#0f172a,#1e3a8a); }
.sol-card.sol-d::before { background: linear-gradient(135deg,#0e7490,#0891b2); }
.sol-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.sol-tag {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 700;
  padding: 5px 12px; border-radius: 999px;
  align-self: flex-start;
  letter-spacing: .3px;
}
.sol-tag.sol-a { background: rgba(37,99,235,.10); color: #1d4ed8; }
.sol-tag.sol-b { background: rgba(124,58,237,.12); color: #6d28d9; }
.sol-tag.sol-c { background: rgba(79,70,229,.12); color: #3730a3; }
.sol-tag.sol-d { background: rgba(8,145,178,.12); color: #155e75; }
[data-theme="dark"] .sol-tag.sol-a { background: rgba(96,165,250,.18); color: #93c5fd; }
[data-theme="dark"] .sol-tag.sol-b { background: rgba(167,139,250,.18); color: #c4b5fd; }
[data-theme="dark"] .sol-tag.sol-c { background: rgba(129,140,248,.18); color: #a5b4fc; }
[data-theme="dark"] .sol-tag.sol-d { background: rgba(34,211,238,.18); color: #67e8f9; }
.sol-card h3 { font-size: 17px; margin: 0; line-height: 1.45; color: var(--text); font-weight: 700; }
.sol-card p { font-size: 13.5px; color: var(--text-2); margin: 0; line-height: 1.65; }
.sol-list { list-style: none; padding: 0; margin: 2px 0 0; }
.sol-list li { position: relative; padding: 5px 0 5px 22px; font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.sol-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 14px; height: 14px; border-radius: 50%; background: var(--primary-soft); }
.sol-list li::after { content: ""; position: absolute; left: 5px; top: 13px; width: 5px; height: 2.5px; border-left: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: rotate(-45deg); }
.sol-cta {
  margin-top: 6px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 600;
  color: var(--primary); text-decoration: none;
  padding: 6px 0;
  align-self: flex-start;
}
.sol-cta::after { content: "\2192"; transition: transform .15s; font-weight: 700; }
.sol-cta:hover { color: var(--primary); }
.sol-cta:hover::after { transform: translateX(3px); }

@media (max-width: 1023px) {
  .sol-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 639px) {
  .sol-grid { grid-template-columns: 1fr; }
  .sol-card { padding: 26px 22px 22px; }
}

/* ===== 文本对齐与排版统一加固（round 12，2026-08-31） =====
   跨页面、跨断点下文本位置/对齐统一修复：
   1) h2 平衡换行（text-wrap: balance），避免末行孤词
   2) 网格子项 min-width:0，防御 CJK/长串撑破列宽
   3) 卡片文本元素 overflow-wrap 守卫
   4) 段落 pretty 换行
   ============================================================ */
.lp-section h2,
.about-section h2 { text-wrap: balance; }
.lp-grid > *,
.lp-steps > *,
.sol-grid > *,
.lp-news > * { min-width: 0; }
.sol-card h3, .sol-card p,
.lp-feat h3, .lp-feat p,
.news-card h3, .news-card p {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.slide-in { min-width: 0; }
.lp-lead,
.lp-cta-in p { text-wrap: pretty; }

/* ============================================================
   R15 · 文本统一居中对齐（2026-08-31）
   审计结论：section intro（eyebrow/h2/CTA）已居中；卡片内标题/正文/
   标签/列表/序号此前一律左对齐，与"整体居中"诉求不一致；且 .lp-lead
   仅在 .lp-section 内才居中，about 等页出现 9 处左对齐的 MIXED 错位。
   本块统一居中，仅调整对齐与内部排布，不改配色/圆角/间距 token。
   ============================================================ */

/* 0) 所有 lp-lead 强制居中（消除 .lp-section 限定的 MIXED 状态） */
.lp-lead { text-align: center; }

/* 1) 卡片标题与描述居中 */
.lp-feat h3, .lp-feat p,
.sol-card h3, .sol-card p,
.news-card h3, .news-card p,
.lp-step h3, .lp-step p,
.def-col h3, .def-col li,
.constraint-box { text-align: center; }

/* 2) 卡片内部整体水平居中（flex 列布局） */
.lp-feat, .sol-card, .news-card, .lp-step { align-items: center; }

/* 3) 标签 / CTA / 序号水平居中 */
.sol-card .sol-tag, .news-card .news-tag,
.sol-card .sol-cta, .news-card .news-more,
.lp-step .num { margin-left: auto; margin-right: auto; }

/* 4) 列表项居中（标记内置，居中排布，避免错位） */
.sol-list, .def-col ul {
  list-style-position: inside;
  padding-left: 0;
  text-align: center;
}
.sol-list li, .def-col li { text-align: center; }

/* 5) 产品能力卡片：图标置顶 + 内容竖向居中（原为左图标右文网格） */
.lp-feat {
  display: flex; flex-direction: column;
  grid-template-columns: none; grid-template-areas: none;
  text-align: center;
}
.lp-feat .ic { grid-area: auto; align-self: center; margin-bottom: 10px; }
.lp-feat:hover .ic { transform: translateY(-2px); }

/* 6) 产品介绍卡片标题（含图标）水平居中 */
.def-col h3 { justify-content: center; }

/* 7) 产品动态卡片顶部行（标签 + 日期）整体居中 */
.news-top { justify-content: center; gap: 10px; }

/* 8) 合规边界 / 备案号条 文本居中 */
.constraint-box, .beian-bar { text-align: center; }
.beian-bar { justify-content: center; }
.beian-bar .spacer { display: none; }

/* ==========================================================================
   R19 · 移动端自适应 / 微信内置浏览器兼容（2026-08-31）
   --------------------------------------------------------------------------
   1) viewport-fit=cover + env(safe-area-inset-*) 避让刘海 / 灵动岛 / Home 条；
   2) 微信（iOS=WKWebView / Android=X5）触控与排版优化。
   （落地页无整屏 100vh 布局，故仅需安全区与触控优化）
   ========================================================================== */
.beian-bar { padding-bottom: env(safe-area-inset-bottom, 0px); }
body.lp { padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px)); }
.lp-nav-in { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.lp { -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: transparent; }
img, svg, video { max-width: 100%; }
a, button, .btn, label, input, select, textarea { touch-action: manipulation; }
@media (max-width: 900px) {
  input, select, textarea, .inp, .sel, .txa { font-size: 16px; }
}
@media (max-width: 640px) {
  .beian-bar { gap: 8px; padding: 0 12px calc(env(safe-area-inset-bottom, 0px)); font-size: 11px; }
  .lp-nav-in { padding: calc(10px + env(safe-area-inset-top, 0px)) 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
}