/* 无界指纹浏览器 · 定制开发页与功能反馈页专用皮肤
   依赖 feature-pages-unb2.css（基础版式与 --fp-* 变量）+ feature-pages-light-unb2.css（浅色首屏文字）
   只被 /product/custom-development.html 与 /feedback.html 引用，不进 _chrome/sync.py 的公共样式清单 */

/* ========== 两页统一蓝色主题 ========== */
body.fp-custom,
body.fp-feedback {
  --fp-accent: #2f5bff;
  --fp-accent-2: #6f95ff;
  --fp-accent-soft: #eef3ff;
  --fp-glow: rgba(47, 91, 255, 0.16);
  --pd-blue: #2f5bff;
  --pd-blue-2: #4b77ff;
  --pd-blue-deep: #1e3fcc;
}

/* ========== 浅蓝首屏 ========== */
.fp-custom .pd-hero-bg {
  background:
    radial-gradient(980px 620px at 84% -14%, rgba(78, 124, 255, 0.18), transparent 62%),
    radial-gradient(720px 500px at 0% 16%, rgba(0, 190, 255, 0.1), transparent 58%),
    linear-gradient(170deg, #f9fbff 0%, #eef4ff 56%, #e3ecff 100%);
}
.fp-feedback .pd-hero-bg {
  background:
    radial-gradient(920px 600px at 16% -12%, rgba(78, 124, 255, 0.2), transparent 60%),
    radial-gradient(680px 480px at 96% 18%, rgba(0, 190, 255, 0.1), transparent 58%),
    linear-gradient(170deg, #f9fcff 0%, #eff4ff 56%, #e2ebff 100%);
}
.fp-custom .pd-section-alt,
.fp-feedback .pd-section-alt { background: #f6f9ff; border-color: #e6eefc; }
.fp-custom .pd-metrics,
.fp-feedback .pd-metrics { background: #f8faff; border-color: #e7effc; }
/* 首屏要点改为逐行排列，避免三项卡在白色信息卡下面被截断 */
.fp-custom .pd-hero-points,
.fp-feedback .pd-hero-points { display: grid; gap: 10px; margin-top: 28px; }
.fp-custom .pd-hero-points li,
.fp-feedback .pd-hero-points li { align-items: flex-start; line-height: 1.7; }
.fp-custom .fp-cap.is-key,
.fp-feedback .fp-cap.is-key {
  background: linear-gradient(165deg, #f4f8ff, #ffffff 62%);
  border-color: #cfdcff;
}
/* is-key 由深底改成浅底后，文字必须跟着回退，否则白字落白底 */
.fp-custom .fp-cap.is-key h3,
.fp-feedback .fp-cap.is-key h3 { color: #16233f; }
.fp-custom .fp-cap.is-key p,
.fp-feedback .fp-cap.is-key p { color: #4d5f7d; }
.fp-custom .fp-cap.is-key > i,
.fp-feedback .fp-cap.is-key > i { color: #2f5bff; }
.fp-custom .fp-usecase,
.fp-feedback .fp-usecase { background: linear-gradient(165deg, #ffffff, #f8fbff); border-color: #e3ecfb; }

/* ========== 首屏右侧信息卡（评估单 / 状态流转） ========== */
.cd-card {
  position: relative;
  padding: 26px 26px 20px;
  border: 1px solid #dbe5f4;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 28px 64px rgba(16, 36, 80, 0.12), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.cd-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid #eaf0fa;
}
.cd-card-head b { font-size: 13px; color: var(--fp-ink); letter-spacing: -0.1px; }
.cd-card-head span { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #9aa8c0; }
.cd-card-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px dashed #eaf0fa;
}
.cd-card-row:last-of-type { border-bottom: 0; }
.cd-card-row > i {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #eef3ff;
  color: #2f5bff;
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
}
.cd-card-row b { display: block; font-size: 13px; font-weight: 500; color: #1c2a42; }
.cd-card-row em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 11.5px;
  line-height: 1.5;
  color: #8a97ad;
}
.cd-card-row > span {
  padding: 4px 9px;
  border: 1px solid #dbe6fb;
  border-radius: 999px;
  background: #f2f6ff;
  font-size: 11.5px;
  color: #3f5f9c;
  white-space: nowrap;
}
.cd-card-row > span.is-ok { border-color: #cbe8d8; background: #f3fbf7; color: #17784a; }
.cd-card-row > span.is-wait { border-color: #e6e9f0; background: #f7f8fb; color: #7a89a3; }
.cd-card-foot {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #eaf0fa;
  font-size: 12px;
  line-height: 1.6;
  color: #7a89a3;
}
.cd-card-foot b { color: #33415c; font-weight: 600; }

/* ========== 交付流程时间轴 ========== */
.cd-steps {
  display: grid;
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.cd-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 18px;
  padding: 22px 24px;
  border: 1px solid var(--fp-line);
  border-radius: 16px;
  background: #fff;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.cd-steps li:hover { border-color: #cfdcff; box-shadow: 0 20px 44px rgba(17, 37, 84, 0.07); }
.cd-steps li:before {
  content: "";
  position: absolute;
  left: 45px;
  top: 68px;
  bottom: -17px;
  width: 1px;
  background: #dbe5f4;
}
.cd-steps li:last-child:before { display: none; }
.cd-step-num {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dce6f6;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 10px 24px rgba(20, 45, 100, 0.08);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--fp-accent);
}
.cd-steps h3 { margin: 2px 0 7px; font-size: 16px; color: var(--fp-ink); letter-spacing: -0.2px; }
.cd-steps p { margin: 0; font-size: 13px; line-height: 1.85; color: #52617c; }
.cd-step-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cd-step-meta span {
  padding: 4px 10px;
  border: 1px solid #dbe6fb;
  border-radius: 999px;
  background: #f2f6ff;
  font-size: 11.5px;
  color: #3f5f9c;
}

/* ========== 适合谁来做：两列卡片 ========== */
.cd-fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.cd-fit article {
  padding: 26px;
  border: 1px solid var(--fp-line);
  border-radius: 18px;
  background: #fff;
}
.cd-fit i { display: block; margin-bottom: 14px; font-style: normal; font-size: 11px; letter-spacing: 0.14em; color: #a7b5cc; }
.cd-fit h3 { margin: 0 0 10px; font-size: 18px; color: var(--fp-ink); letter-spacing: -0.2px; }
.cd-fit p { margin: 0; font-size: 13px; line-height: 1.85; color: var(--fp-body); }
.cd-fit ul { display: grid; gap: 9px; margin: 16px 0 0; padding: 0; list-style: none; }
.cd-fit li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 9px; font-size: 12.5px; line-height: 1.75; color: #52617c; }
.cd-fit li:before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--fp-accent-soft);
  box-shadow: inset 0 0 0 1px #c9d8ff;
}

/* ========== 提交表单 ========== */
.fd-form-wrap { max-width: 820px; margin: 0 auto; }
.fd-form {
  display: grid;
  gap: 18px;
  padding: 30px;
  border: 1px solid var(--fp-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 58px rgba(16, 36, 80, 0.08);
}
.fd-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fd-field { display: grid; gap: 8px; }
.fd-label { font-size: 12.5px; font-weight: 600; color: #33415c; }
.fd-label em { font-style: normal; margin-left: 2px; color: #c0392b; }
.fd-label span { margin-left: 6px; font-weight: 400; color: #9aa8c0; }
.fd-input,
.fd-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #fbfcfe;
  font-family: inherit;
  font-size: 13.5px;
  color: #111827;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.fd-input:focus,
.fd-textarea:focus {
  outline: none;
  border-color: #8fb0ff;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(47, 91, 255, 0.12);
}
.fd-textarea { min-height: 168px; resize: vertical; line-height: 1.75; }
.fd-hint { font-size: 12px; line-height: 1.7; color: #8a97ad; }
.fd-kinds { display: flex; flex-wrap: wrap; gap: 10px; }
.fd-kind { position: relative; }
.fd-kind input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.fd-kind span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid #dbe3ef;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  color: #42506b;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.fd-kind span:hover { border-color: #b9cdf0; }
.fd-kind input:checked + span {
  border-color: #8fb0ff;
  background: #f2f6ff;
  color: #1e3fcc;
  font-weight: 600;
  box-shadow: 0 0 0 3px rgba(47, 91, 255, 0.1);
}
.fd-kind input:focus-visible + span { box-shadow: 0 0 0 3px rgba(47, 91, 255, 0.22); }
.fd-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.fd-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #4b77ff 0%, #2447e0 65%, #1e3fcc 100%);
  box-shadow: 0 14px 32px rgba(47, 91, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.24);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fd-submit:hover { transform: translateY(-1px); box-shadow: 0 18px 38px rgba(47, 91, 255, 0.34); }
.fd-submit[disabled] { transform: none; opacity: 0.62; cursor: not-allowed; box-shadow: none; }
.fd-state { font-size: 12.5px; line-height: 1.7; color: #8a97ad; }
.fd-state.is-ok { color: #17784a; }
.fd-state.is-err { color: #b42318; }
.fd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* 表单与成功块自身是 display:grid，会盖掉 hidden 属性的默认 display:none */
.fd-form[hidden],
.fd-done[hidden] { display: none !important; }
.fd-done {
  display: grid;
  gap: 12px;
  padding: 28px;
  border: 1px solid #cfe9db;
  border-radius: 18px;
  background: #f4fbf7;
}
.fd-done b { font-size: 16px; color: #12643c; }
.fd-done p { margin: 0; font-size: 13px; line-height: 1.85; color: #2f6b4c; }
.fd-done .fd-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: #17784a;
}
.fd-done .fd-again {
  justify-self: start;
  padding: 9px 18px;
  border: 1px solid #b9dcc8;
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  color: #17784a;
  cursor: pointer;
}

/* ========== 窄屏 ========== */
@media (max-width: 1023px) {
  .cd-card { padding: 20px 20px 16px; }
  .cd-fit { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .fd-row { grid-template-columns: 1fr; }
  .fd-form { padding: 20px; gap: 16px; }
  .cd-steps li { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 18px; }
  .cd-steps li:before { left: 37px; top: 60px; }
  .cd-step-num { width: 38px; height: 38px; font-size: 11px; }
  .cd-card-row { grid-template-columns: 26px minmax(0, 1fr); }
  .cd-card-row > span { grid-column: 2; justify-self: start; }
  .fd-foot { align-items: flex-start; flex-direction: column; }
  .fd-submit { width: 100%; justify-content: center; }
}