/* 无界指纹浏览器 · 自定义导航页 */

/* ---------- 首屏 ---------- */
.cn-hero .pd-hero-bg {
  background:
    radial-gradient(960px 620px at 82% -14%, rgba(78, 124, 255, 0.2), transparent 62%),
    radial-gradient(760px 520px at 0% 16%, rgba(0, 190, 255, 0.1), transparent 60%),
    linear-gradient(168deg, #fbfdff 0%, #f0f5ff 56%, #e2ebff 100%);
}
.cn-visual { width: 100%; }

.cn-browser {
  position: relative;
  border: 1px solid #dbe6f7;
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 30px 72px rgba(20, 44, 96, 0.14), 0 2px 0 rgba(255, 255, 255, 0.9) inset;
}
.cn-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  height: 46px;
  background: #f7faff;
  border-bottom: 1px solid #e8effb;
}
.cn-dots { display: inline-flex; gap: 5px; margin-right: 4px; }
.cn-dots i { width: 8px; height: 8px; border-radius: 50%; background: #d7e2f2; }
.cn-tab {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 10.5px;
  color: #8a97ad;
}
.cn-tab.is-on {
  background: #fff;
  color: #25324b;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(20, 44, 96, 0.08), inset 0 0 0 1px #e6eefb;
}
.cn-url {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  height: 24px;
  padding: 0 12px;
  border-radius: 999px;
  background: #eef3ff;
  color: #4b77ff;
  font-size: 9.5px;
  letter-spacing: 0.02em;
}
.cn-url i { width: 5px; height: 5px; border-radius: 50%; background: #2f5bff; box-shadow: 0 0 0 3px rgba(47, 91, 255, 0.12); }

.cn-page {
  padding: 20px 20px 16px;
  background-image: radial-gradient(#e9effb 1px, transparent 1px);
  background-size: 18px 18px;
}
.cn-greet { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.cn-greet b { font-size: 14.5px; color: #16233f; letter-spacing: -0.2px; }
.cn-greet span { font-size: 10.5px; color: #8a97ad; }

.cn-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.cn-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 11px 10px 10px;
  border: 1px solid #e6eefb;
  border-radius: 12px;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.cn-tile.is-on {
  border-color: #bcd0ff;
  background: #f7faff;
  box-shadow: 0 10px 22px rgba(47, 91, 255, 0.12);
}
.cn-tile-ico {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: var(--c, #2f5bff);
  letter-spacing: 0;
}
.cn-tile b { font-size: 10.5px; color: #25324b; font-weight: 600; letter-spacing: -0.1px; }
.cn-tile em { font-style: normal; font-size: 9px; color: #8a97ad; }
.cn-tile .cn-pin {
  position: absolute;
  top: 7px;
  right: 7px;
  padding: 1px 5px;
  border-radius: 999px;
  background: #2f5bff;
  color: #fff;
  font-size: 7.5px;
  letter-spacing: 0.02em;
}

.cn-page-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #e2eafa;
}
.cn-chip {
  padding: 3px 9px;
  border-radius: 999px;
  background: #f2f6fd;
  color: #6a7a94;
  font-size: 9px;
}
.cn-chip.is-on { background: #eef3ff; color: #2f5bff; font-weight: 600; }
.cn-hint { margin-left: auto; font-size: 8.5px; color: #9aa8bd; }

.cn-float {
  right: -10px;
  bottom: -18px;
  animation: pdFloat 6.5s ease-in-out infinite;
}

/* ---------- 指标条 ---------- */
.cn-metrics .pd-metric-grid strong { font-size: 21px; letter-spacing: -0.4px; }

/* ---------- 痛点 ---------- */
.cn-pains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cn-pain {
  position: relative;
  padding: 28px 26px 26px;
  border: 1px solid #e3ecfb;
  border-radius: 16px;
  background: #fff;
}
.cn-pain:before {
  content: "";
  position: absolute;
  left: 26px;
  top: 0;
  width: 28px;
  height: 2px;
  background: #2f5bff;
}
.cn-pain span { display: block; font-size: 10.5px; letter-spacing: 0.14em; color: #9aa8bd; margin-bottom: 14px; }
.cn-pain h3 { margin: 0 0 10px; font-size: 17px; color: #16233f; letter-spacing: -0.3px; }
.cn-pain p { margin: 0; font-size: 13px; line-height: 1.85; color: #5a6b85; }

/* ---------- 编辑器式配置 ---------- */
.cn-editor { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 44px; align-items: start; }
.cn-settings {
  border: 1px solid #e3ecfb;
  border-radius: 18px;
  background: #fff;
  padding: 6px 24px;
  box-shadow: 0 18px 44px rgba(20, 44, 96, 0.06);
}
.cn-set {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid #eef3fb;
}
.cn-set:last-child { border-bottom: 0; }
.cn-set-label b { display: block; font-size: 13.5px; color: #25324b; font-weight: 600; }
.cn-set-label span { display: block; margin-top: 4px; font-size: 11px; color: #8a97ad; }
.cn-input,
.cn-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid #dbe6f7;
  border-radius: 8px;
  background: #f9fbff;
  font-size: 11px;
  color: #43536f;
  white-space: nowrap;
}
.cn-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.cn-select i { font-style: normal; font-size: 8px; color: #9aa8bd; }
.cn-seg {
  display: inline-flex;
  padding: 3px;
  border-radius: 9px;
  background: #f2f6fd;
  gap: 2px;
}
.cn-seg span { padding: 4px 9px; border-radius: 7px; font-size: 10.5px; color: #6a7a94; white-space: nowrap; }
.cn-seg span.is-on { background: #fff; color: #2f5bff; font-weight: 600; box-shadow: 0 1px 2px rgba(20, 44, 96, 0.08); }

.cn-preview-wrap { position: relative; }
.cn-preview {
  position: sticky;
  top: 104px;
  border: 1px solid #e3ecfb;
  border-radius: 18px;
  background: #fff;
  padding: 18px;
  box-shadow: 0 24px 60px rgba(20, 44, 96, 0.1);
}
.cn-preview-bar { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 12px; }
.cn-preview-bar span { font-size: 10.5px; letter-spacing: 0.14em; color: #9aa8bd; }
.cn-preview-bar em { font-style: normal; font-size: 10px; color: #2f5bff; }
.cn-mini {
  border: 1px solid #e8effb;
  border-radius: 12px;
  padding: 14px;
  background: linear-gradient(170deg, #fbfdff, #f6f9ff);
}
.cn-mini-url {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  background: #eef3ff;
  color: #2f5bff;
  font-size: 8.5px;
  margin-bottom: 12px;
}
.cn-mini-greet { font-size: 12px; color: #25324b; font-weight: 600; margin-bottom: 10px; }
.cn-mini-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.cn-mini-tile {
  height: 40px;
  border: 1px solid #e6eefb;
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: #6a7a94;
}
.cn-mini-tile.is-on { border-color: #bcd0ff; background: #f2f6ff; color: #2f5bff; }
.cn-mini-chips { display: flex; gap: 5px; }
.cn-mini-chips span { padding: 2px 7px; border-radius: 999px; background: #eef3ff; color: #2f5bff; font-size: 7.5px; }
.cn-preview-note { margin: 14px 2px 0; font-size: 10.5px; line-height: 1.7; color: #8a97ad; }

/* ---------- 场景 ---------- */
.cn-scenes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cn-scene {
  padding: 26px;
  border: 1px solid #e3ecfb;
  border-radius: 16px;
  background: linear-gradient(170deg, #fff, #f9fbff);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.cn-scene:hover { transform: translateY(-4px); border-color: #c9daf8; box-shadow: 0 20px 44px rgba(20, 44, 96, 0.1); }
.cn-scene > span { display: block; font-size: 22px; font-weight: 700; color: #dbe6fb; letter-spacing: -1px; margin-bottom: 14px; }
.cn-scene h3 { margin: 0 0 10px; font-size: 17px; color: #16233f; letter-spacing: -0.3px; }
.cn-scene p { margin: 0 0 14px; font-size: 13px; line-height: 1.85; color: #5a6b85; }
.cn-scene em {
  font-style: normal;
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: #eef3ff;
  color: #2f5bff;
  font-size: 10px;
}

/* ---------- 配置项 ---------- */
.cn-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
.cn-spec { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; padding: 18px 0; border-top: 1px solid #e4edfb; }
.cn-spec b { font-size: 13.5px; color: #25324b; font-weight: 600; }
.cn-spec p { margin: 0; font-size: 12.5px; line-height: 1.75; color: #5a6b85; }

/* ---------- FAQ 相关链接 ---------- */
.cn-main .fp-related { margin-top: 10px; }

/* ---------- 浅色 CTA ---------- */
.cn-cta { background: #f4f7ff; }
.cn-cta:before { background: linear-gradient(160deg, #f7faff 0%, #eaf1ff 60%, #dfe9ff 100%); }

/* ---------- 响应式 ---------- */
@media (max-width: 1100px) {
  .cn-editor { grid-template-columns: 1fr; gap: 28px; }
  .cn-preview { position: static; }
}
@media (max-width: 960px) {
  .cn-pains,
  .cn-scenes { grid-template-columns: 1fr; }
  .cn-spec { grid-template-columns: 128px minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .cn-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cn-specs { grid-template-columns: 1fr; column-gap: 0; }
  .cn-spec { grid-template-columns: 110px minmax(0, 1fr); }
  .cn-chrome { gap: 6px; padding: 0 10px; }
  .cn-tab { padding: 0 9px; }
  .cn-page { padding: 16px 14px 14px; }
  .cn-set { grid-template-columns: 1fr; gap: 10px; }
  .cn-set-label span { margin-top: 2px; }
  .cn-preview { padding: 14px; }
  .cn-float { right: 8px; bottom: -16px; padding: 11px 14px; }
  .cn-float strong { font-size: 11.5px; }
  .cn-float em { font-size: 9.5px; }
}
@media (max-width: 420px) {
  .cn-tab:not(.is-on) { display: none; }
  .cn-url { font-size: 8.5px; padding: 0 9px; }
  .cn-page { padding: 14px 12px; }
  .cn-greet b { font-size: 13px; }
  .cn-hint { display: none; }
  .cn-spec { grid-template-columns: 1fr; gap: 4px; }
}