/* ==========================================================================
   封号风险诊断 / Suspension risk diagnosis
   输入 → 预览 → 开锁 → 报告
   参考第三方案件诊断工具的流程结构，配色沿用站点橙色体系。
   ========================================================================== */

.rdx {
  margin: 0 0 14px;
  border: 1px solid var(--tro-line, #dfe6ee);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 7px rgba(19, 32, 51, .04);
  overflow: hidden;
}

/* ---------- 步骤条 ---------- */
.rdx-steps {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 14px 22px;
  list-style: none;
  border-bottom: 1px solid #eef1f5;
  background: #fbfcfe;
}

.rdx-step {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  color: var(--tro-muted-text);
  font-size: 12px;
  font-weight: 700;
}

.rdx-step:not(:last-child) { flex: 1 1 auto; }

.rdx-step:not(:last-child)::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  margin: 0 12px;
  background: #e2e8f0;
}

.rdx-step-no {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  flex: 0 0 22px;
  border: 1px solid #dfe6ee;
  border-radius: 6px;
  background: #fff;
  color: var(--tro-muted-text);
  font: 700 11px/1 'DM Sans', var(--poa-font-sans);
}

.rdx-step.active { color: #9f5e00; }
.rdx-step.active .rdx-step-no { border-color: #ffb95c; background: #fff3df; color: #9f5e00; }
.rdx-step.done { color: #2f7a54; }
.rdx-step.done .rdx-step-no { border-color: #cfe6d8; background: #eaf6ef; color: #2f7a54; }

/* ---------- 面板 ---------- */
.rdx-pane { padding: 20px 22px 22px; }
.rdx-pane[hidden] { display: none; }

.rdx-head { margin-bottom: 16px; }
/* 步骤标题沿用全站模块标题规格（共用 typography-system.css 的变量） */
.rdx-head h2 {
  margin: 0;
  color: var(--poa-module-title-color, #ff9900);
  font-size: var(--poa-module-title-size, clamp(24px, 2.1vw, 30px));
  font-weight: var(--poa-module-title-weight, 800);
  line-height: var(--poa-module-title-leading, 1.35);
  letter-spacing: var(--poa-module-title-tracking, .04em);
}
.rdx-lead {
  margin: 8px 0 0;
  color: var(--poa-module-copy-color, #41505f);
  font-size: var(--poa-module-copy-size, 13px);
  line-height: 1.8;
}

/* ---------- 上传区 ---------- */
.rdx-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 128px;
  padding: 20px;
  border: 1px dashed #efc58f;
  border-radius: 9px;
  background: #fffaf3;
  color: #41505f;
  cursor: pointer;
  transition: border-color .18s, background .18s;
}
.rdx-drop:hover,
.rdx-drop.is-dragging { border-color: #ff9900; background: #fff7e9; }
.rdx-drop.has-file { display: none; }

.rdx-drop-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
  border-radius: 10px;
  background: #fff0dc;
  color: #a05d05;
  font-size: 15px;
}
.rdx-drop strong { color: #46515d; font-size: 13px; font-weight: 700; }
.rdx-drop span:not(.rdx-drop-icon) { margin-top: 6px; color: #41505f; font-size: 11px; }
.rdx-drop em { margin-top: 4px; color: #7e6340; font-size: 11px; font-style: normal; }

.rdx-file-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #e4e9f0;
  border-radius: 9px;
  background: #fbfcfe;
}
.rdx-file-preview[hidden] { display: none; }
.rdx-file-preview img {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  object-fit: cover;
  border: 1px solid #e4e9f0;
  border-radius: 8px;
  background: #fff;
}
.rdx-file-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  flex: 0 0 54px;
  border: 1px solid #e4e9f0;
  border-radius: 8px;
  background: #fff;
  color: #a05d05;
  font-size: 18px;
}
.rdx-file-preview > div { min-width: 0; flex: 1; }
.rdx-file-preview strong { display: block; color: #22344a; font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rdx-file-preview span { display: block; margin-top: 4px; color: #6c7787; font-size: 11px; }
.rdx-file-remove {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  border-radius: 7px;
  color: var(--tro-muted-text);
  background: #f2f5f9;
  font-size: 12px;
}
.rdx-file-remove:hover { color: #b03a2e; background: #fdeceb; }

.rdx-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  color: var(--tro-muted-text);
  font-size: 11px;
}
.rdx-or::before,
.rdx-or::after { content: ""; height: 1px; flex: 1; background: #eef1f5; }

.rdx-textarea {
  width: 100%;
  min-height: 148px;
  resize: vertical;
  padding: 13px 14px;
  border: 1px solid #e3e4e2;
  border-radius: 9px;
  outline: 0;
  color: var(--ink, #18202a);
  background: #fcfdfe;
  font-size: 12px;
  line-height: 1.8;
}
.rdx-textarea:focus { border-color: #eeb76f; background: #fff; box-shadow: 0 0 0 3px #fff1dd; }

.rdx-progress { margin-top: 12px; }
.rdx-progress[hidden] { display: none; }
.rdx-progress span { display: block; color: #6c7787; font-size: 11px; }
.rdx-progress-bar {
  height: 5px;
  margin-top: 7px;
  border-radius: 99px;
  background: #f1ebe2;
  overflow: hidden;
}
.rdx-progress-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #ff7a2f, #ff9e2f);
  transition: width .25s ease;
}

/* ---------- 按钮 ---------- */
.rdx-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

.rdx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid #e2e7ee;
  border-radius: 8px;
  color: #3f4c5c;
  background: #fff;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: border-color .18s, background .18s, color .18s, transform .18s;
}
.rdx-btn:hover { border-color: #ffc076; background: #fffaf1; color: #9f5e00; }

.rdx-btn-primary {
  position: relative;
  flex: 0 0 auto;
  min-width: 168px;
  padding: 0 26px;
  border: 1px solid #ff8a21;
  color: var(--tro-btn-ink);
  background: linear-gradient(135deg, #ff7a2f, #ff9e2f);
  box-shadow: 0 8px 18px -8px rgba(255, 138, 33, .75);
  overflow: hidden;
}
.rdx-btn-primary:hover { color: var(--tro-btn-ink); background: linear-gradient(135deg, #ff6a19, #ff9418); transform: translateY(-1px); }
.rdx-btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .38) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform .6s ease;
}
.rdx-btn-primary:hover::before { transform: translateX(120%); }
/* ---------- 免费报告包含 ---------- */
.rdx-includes {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid #e9eef4;
  border-radius: 9px;
  background: #f8fafc;
}
.rdx-includes > strong { display: block; color: #22344a; font-size: 12px; font-weight: 800; }
.rdx-includes ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 14px;
  margin: 11px 0 0;
  padding: 0;
  list-style: none;
}
.rdx-includes li { display: flex; align-items: center; gap: 7px; color: #4d5b6b; font-size: 11px; }
.rdx-includes li i { color: #3f8a61; font-size: 11px; }

/* ---------- 预览 ---------- */
.rdx-detect { margin-bottom: 16px; }
.rdx-detect-label { display: block; margin-bottom: 8px; color: #6c7787; font-size: 11px; font-weight: 700; }
.rdx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rdx-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid #e4e9f0;
  border-radius: 99px;
  color: #4d5b6b;
  background: #fff;
  font-size: 11px;
  font-weight: 600;
}
.rdx-chip-type { border-color: #ffc98a; background: #fff5e8; color: #9f5e00; font-weight: 800; }
.rdx-chip-muted { color: var(--tro-muted-text); background: #f7f9fb; }

.rdx-dims { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.rdx-dim {
  padding: 13px 14px;
  border: 1px solid #e9eef4;
  border-radius: 9px;
  background: #fff;
}
.rdx-dim-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rdx-dim-head span { color: #22344a; font-size: 12px; font-weight: 800; }
.rdx-dim-head em { color: #98a3b1; font-size: 10px; font-style: normal; }
.rdx-dim select {
  width: 100%;
  height: 34px;
  margin-top: 9px;
  padding: 0 9px;
  border: 1px solid #e2e7ee;
  border-radius: 7px;
  color: #34495e;
  background: #fbfcfe;
  font-size: 11px;
  outline: 0;
}
.rdx-dim select:focus { border-color: #eeb76f; background: #fff; box-shadow: 0 0 0 3px #fff1dd; }
.rdx-dim-reason { margin: 8px 0 0; color: #7b8794; font-size: 11px; line-height: 1.7; }
.rdx-dim-probe { border-color: #ffdcb0; background: #fffaf3; }

/* ---------- 紧急程度 ---------- */
.rdx-band-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 16px;
  padding: 15px 18px;
  border: 1px solid #e9eef4;
  border-radius: 10px;
  background: #f8fafc;
}
.rdx-band-line > span { color: #6c7787; font-size: 11px; font-weight: 700; }
.rdx-band-line strong { color: #22344a; font: 800 30px/1 'DM Sans', var(--poa-font-sans); }
.rdx-band-line strong small { margin-left: 2px; color: #98a3b1; font-size: 12px; font-weight: 700; }
.rdx-band-line b {
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
}
.rdx-band-line em { color: #6c7787; font-size: 11px; font-style: normal; }

.rdx-blocker {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  padding: 11px 13px;
  border: 1px solid #f5cdc9;
  border-radius: 8px;
  background: #fdeceb;
  color: #a8332a;
  font-size: 11px;
  line-height: 1.7;
}
.rdx-blocker i { margin-top: 2px; }

/* 分层配色 */
.rdx-band-low { color: #2f7a54; }
.rdx-band-low b, b.rdx-band-low { background: #eaf6ef; border-color: #cfe6d8; }
.rdx-band-mid-low { color: #3672a6; }
.rdx-band-mid-low b, b.rdx-band-mid-low { background: #eef5fc; border-color: #d6e6f5; }
.rdx-band-mid-high { color: #a86a12; }
.rdx-band-mid-high b, b.rdx-band-mid-high { background: #fff6e6; border-color: #f3dfba; }
.rdx-band-high { color: #c25a1c; }
.rdx-band-high b, b.rdx-band-high { background: #fff0e6; border-color: #f6d5bd; }
.rdx-band-critical { color: #b03a2e; }
.rdx-band-critical b, b.rdx-band-critical { background: #fdeceb; border-color: #f5cdc9; }

/* ---------- 解锁表单 ---------- */
.rdx-teaser { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.rdx-teaser div {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 15px;
  border: 1px solid #e4e9f0;
  border-radius: 9px;
  color: #34495e;
  background: #fbfcfe;
  font-size: 12px;
  font-weight: 700;
}
.rdx-teaser i { color: #3f8a61; font-size: 12px; }

.rdx-field { margin-bottom: 14px; }
.rdx-field label { display: block; margin-bottom: 7px; color: #22344a; font-size: 12px; font-weight: 800; }
.rdx-field input {
  width: 100%;
  height: 42px;
  padding: 0 13px;
  border: 1px solid #e2e7ee;
  border-radius: 8px;
  color: #22344a;
  background: #fbfcfe;
  font-size: 12px;
  outline: 0;
}
.rdx-field input:focus { border-color: #eeb76f; background: #fff; box-shadow: 0 0 0 3px #fff1dd; }

.rdx-note { margin: 12px 0 0; color: #7b8794; font-size: 11px; text-align: center; }
.rdx-back {
  display: block;
  margin: 16px auto 0;
  color: #6c7787;
  font-size: 12px;
  font-weight: 700;
}
.rdx-back:hover { color: #9f5e00; }
/* ---------- 报告 ---------- */
.rdx-report { animation: rdx-rise .3s ease; }
@keyframes rdx-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.rdx-report-head { display: flex; align-items: center; gap: 13px; }
.rdx-report-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  border-radius: 12px;
  background: #fff3df;
  font-size: 18px;
}
.rdx-report-icon.rdx-band-low { background: #eaf6ef; }
.rdx-report-icon.rdx-band-mid-low { background: #eef5fc; }
.rdx-report-icon.rdx-band-mid-high { background: #fff6e6; }
.rdx-report-icon.rdx-band-high { background: #fff0e6; }
.rdx-report-icon.rdx-band-critical { background: #fdeceb; }

.rdx-report-head > div { min-width: 0; flex: 1; }
.rdx-report-head > div > span { color: #6c7787; font-size: 11px; }
.rdx-report-head h3 { margin: 4px 0 0; color: #122033; font-size: 19px; font-weight: 800; line-height: 1.3; }
.rdx-report-head small { display: block; margin-top: 4px; color: #7b8794; font-size: 11px; }
.rdx-badge {
  flex: 0 0 auto;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.rdx-score { margin: 20px 0 4px; padding-bottom: 18px; border-bottom: 1px solid #eef1f5; }
.rdx-score > span { color: #6c7787; font-size: 11px; font-weight: 700; }
.rdx-score strong { display: block; margin-top: 6px; color: #c25a1c; font: 800 40px/1 'DM Sans', var(--poa-font-sans); }
.rdx-score strong small { margin-left: 3px; color: #98a3b1; font-size: 13px; font-weight: 700; }
.rdx-score em { display: block; margin-top: 7px; color: #4d5b6b; font-size: 12px; font-style: normal; }
.rdx-score-bar { height: 6px; margin-top: 12px; border-radius: 99px; background: #f1ebe2; overflow: hidden; }
.rdx-score-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ffc46b, #ff7a2f); }

.rdx-section { padding: 18px 0; border-bottom: 1px solid #eef1f5; }
.rdx-section:last-child { border-bottom: 0; }
.rdx-section h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 11px;
  color: #122033;
  font-size: 14px;
  font-weight: 800;
}
.rdx-section h4 i { color: #e0851a; font-size: 13px; }
.rdx-section p { margin: 0 0 9px; color: var(--poa-module-copy-color, #41505f); font-size: 12px; line-height: 1.8; }
.rdx-section p:last-child { margin-bottom: 0; }
.rdx-section ul, .rdx-section ol { margin: 0; padding: 0; list-style: none; }
.rdx-section li { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 9px; color: #4d5b6b; font-size: 12px; line-height: 1.75; }
.rdx-section li:last-child { margin-bottom: 0; }
.rdx-section li i { margin-top: 4px; flex: 0 0 auto; color: #cf9a56; font-size: 9px; }
.rdx-section ol { counter-reset: rdx-step; }
.rdx-section ol li { counter-increment: rdx-step; }
.rdx-section ol li::before {
  content: counter(rdx-step);
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  flex: 0 0 19px;
  margin-top: 1px;
  border-radius: 6px;
  background: #fff3df;
  color: #9f5e00;
  font: 800 10px/1 'DM Sans', var(--poa-font-sans);
}
.rdx-docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px 16px; }
.rdx-docs li { margin-bottom: 0; }
.rdx-docs li::before {
  content: "";
  width: 13px;
  height: 13px;
  display: block;
  flex: 0 0 13px;
  margin-top: 4px;
  border: 1px solid #d5dde7;
  border-radius: 4px;
  background: #fff;
}
.rdx-hint { color: #7b8794 !important; font-size: 11px !important; }

.rdx-section-alert {
  margin-top: 4px;
  padding: 16px;
  border: 1px solid #f5cdc9;
  border-radius: 9px;
  background: #fdf3f2;
}
.rdx-section-alert h4, .rdx-section-alert h4 i { color: #b03a2e; }
.rdx-section-alert li { flex-direction: column; gap: 3px; }
.rdx-section-alert li strong { color: #a8332a; font-size: 12px; }

.rdx-table { border: 1px solid #e9eef4; border-radius: 9px; overflow: hidden; }
.rdx-table-row {
  display: grid;
  grid-template-columns: minmax(150px, .8fr) 2fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid #eef1f5;
  background: #fff;
}
.rdx-table-row:last-child { border-bottom: 0; }
.rdx-table-row span { color: #22344a; font-size: 12px; font-weight: 700; }
.rdx-table-row em { color: #7b8794; font-size: 11px; font-style: normal; line-height: 1.6; }
.rdx-table-row b { color: #c25a1c; font: 800 13px/1 'DM Sans', var(--poa-font-sans); white-space: nowrap; }
.rdx-table-total { background: #fbfcfe; }
.rdx-table-total span, .rdx-table-total b { font-weight: 800; }

.rdx-report-foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.rdx-report-foot .rdx-btn { flex: 1 1 auto; }

/* ---------- 响应式 ---------- */
@media (max-width: 760px) {
  .rdx-steps { padding: 12px 14px; }
  .rdx-step { font-size: 11px; }
  .rdx-step:not(:last-child)::after { margin: 0 8px; }
  .rdx-pane { padding: 16px 15px 18px; }
  .rdx-head h2 { font-size: 20px; }
  .rdx-dims { grid-template-columns: 1fr; }
  .rdx-teaser { grid-template-columns: 1fr; }
  .rdx-table-row { grid-template-columns: 1fr auto; }
  .rdx-table-row em { grid-column: 1 / -1; }
  .rdx-report-head { flex-wrap: wrap; }
  .rdx-report-head h3 { font-size: 17px; }
}

@media (max-width: 420px) {
  .rdx-step-label { display: none; }
  .rdx-step.active .rdx-step-label { display: inline; }
}