/* =============================================================================
   意图驱动研判 · 剧情演示（#reasoning） v5「品牌蓝白控制台」
   - 蓝白品牌色，白底卡片 + 品牌蓝点缀：一句话 → 工具调用流 → 证据链图 → 带校准置信度与 ATT&CK 的结论 → 人工审批闸
   - 全部使用 .rd- 前缀；动画由 reasoning-demo.js 切换 .is-in 驱动；无 JS 时直接显示终态
   ============================================================================= */

.rd {
  --rd-panel: #fff;
  --rd-panel2: #f7f9ff;
  --rd-line: #e3eaf6;
  --rd-text: #0c1929;
  --rd-sub: #334155;
  --rd-muted: #64748b;
  --rd-blue: #003fec;
  --rd-blue-soft: #e6eefd;
  --rd-blue-line: #c9d9ff;
  --rd-ok: #059669;
  --rd-bad: #dc2626;
  --rd-warn: #b45309;
  --rd-mono: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  position: relative;
  z-index: 1;
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(3.5rem, 7vw, 6rem);
  scroll-margin-top: var(--nav-h, 72px);
  color: var(--rd-text);
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(0, 63, 236, 0.09), transparent 70%),
    linear-gradient(180deg, #f3f6ff 0%, #fbfcff 60%, #fff 100%);
  overflow: hidden;
}

/* 细网格，向下渐隐 */
.rd::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 63, 236, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 63, 236, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 75%);
  mask-image: linear-gradient(180deg, #000, transparent 75%);
  pointer-events: none;
}

.rd-wrap {
  position: relative;
  width: 100%;
  max-width: var(--container, 1120px);
  margin: 0 auto;
  padding: 0 clamp(1.1rem, 4vw, 2rem);
}

/* ---------- 标题区 ---------- */
.rd-head {
  max-width: 48rem;
  margin: 0 auto clamp(1.75rem, 3.5vw, 2.75rem);
  text-align: center;
}

.rd-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0.4rem 1.1rem;
  border-radius: 999px;
  border: 0;
  background: var(--rd-blue-soft);
  color: var(--rd-blue);
  font-size: clamp(0.74rem, 1.1vw, 0.84rem);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.rd-kicker::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rd-blue);
}

.rd-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: 0.005em;
  color: var(--rd-text);
}

.rd-desc {
  max-width: 38rem;
  margin: 1rem auto 0;
  font-size: clamp(0.92rem, 1.4vw, 1.05rem);
  line-height: 1.65;
  color: var(--rd-muted);
}

/* ---------- 窗口 ---------- */
.rd-window {
  overflow: hidden;
  border: 1px solid rgba(0, 63, 236, 0.14);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(0, 63, 236, 0.12), 0 2px 10px rgba(15, 23, 42, 0.05);
}

.rd-chrome {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1.1rem;
  border-bottom: 1px solid var(--rd-line);
  background: #fafcff;
}

.rd-dots { display: inline-flex; gap: 6px; }
.rd-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(15, 23, 42, 0.13); }

.rd-chrome-title { font-size: 0.82rem; font-weight: 650; color: var(--rd-text); }

.rd-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 700 0.62rem/1 var(--rd-mono);
  letter-spacing: 0.1em;
  color: var(--rd-ok);
}
.rd-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--rd-ok); animation: rd-pulse 1.6s ease-in-out infinite; }

.rd-chrome-tag {
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--rd-line);
  font-size: 0.68rem;
  color: var(--rd-muted);
}

.rd-controls { margin-left: auto; display: inline-flex; gap: 0.5rem; }

.rd-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 28px;
  padding: 0 0.75rem;
  border: 1px solid var(--rd-line);
  border-radius: 999px;
  background: #fff;
  color: var(--rd-sub);
  font: inherit;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.rd-btn:hover { background: var(--rd-blue-soft); border-color: var(--rd-blue-line); color: var(--rd-blue); }
.rd-btn:focus-visible { outline: 2px solid var(--rd-blue); outline-offset: 2px; }
.rd-btn svg { width: 13px; height: 13px; }
.rd-ic-play { display: none; }
.rd-btn[aria-pressed="true"] .rd-ic-pause { display: none; }
.rd-btn[aria-pressed="true"] .rd-ic-play { display: inline; }

/* ---------- 舞台 ---------- */
.rd-stage { padding: 1.3rem 1.5rem 0; }

.rd-prompt {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border: 1px solid #bfd2fd;
  border-radius: 14px;
  background: linear-gradient(180deg, #f3f7ff, #e9f0ff);
  box-shadow: 0 0 0 4px rgba(0, 63, 236, 0.05), 0 10px 28px rgba(0, 63, 236, 0.1);
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--rd-text);
}
.rd-prompt-g { flex: none; font-family: var(--rd-mono); font-weight: 800; color: var(--rd-blue); }

.rd-caret {
  display: none;
  width: 2px;
  height: 1.15em;
  margin-left: 2px;
  align-self: center;
  background: var(--rd-blue);
  animation: rd-blink 0.9s steps(1) infinite;
}
.rd-stage.is-typing .rd-caret { display: inline-block; }

.rd-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 1.25rem;
  margin-top: 1.25rem;
  align-items: start;
}
.rd-col { min-width: 0; }

.rd-col-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0 0 0.7rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--rd-muted);
}
.rd-working-dot { width: 7px; height: 7px; border-radius: 50%; background: #cbd5e1; }
.rd-stage.is-working .rd-working-dot { background: var(--rd-blue); box-shadow: 0 0 0 4px rgba(0, 63, 236, 0.15); animation: rd-pulse 1.1s ease-in-out infinite; }
.rd-stage.is-done .rd-working-dot { background: var(--rd-ok); }

/* 思考 */
.rd-think {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid #d7e3fb;
  border-radius: 12px;
  background: linear-gradient(135deg, #f3f7ff, #fff);
}
.rd-think-k { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; color: var(--rd-blue); }
.rd-think-k svg { width: 13px; height: 13px; fill: currentColor; }
.rd-think-v { font-size: 0.86rem; line-height: 1.55; color: var(--rd-sub); }

/* 工具调用 */
.rd-tools { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }

.rd-tool {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: start;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--rd-line);
  border-radius: 12px;
  background: var(--rd-panel);
}

.rd-tool-ix {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: 8px;
  border: 1px solid var(--rd-blue-line);
  background: var(--rd-blue-soft);
}
.rd-tool-ix b { font: 700 0.74rem/1 var(--rd-mono); color: var(--rd-blue); }
.rd-spin {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(0, 63, 236, 0.18);
  border-top-color: var(--rd-blue);
  animation: rd-spin 0.7s linear infinite;
  opacity: 0;
}

.rd-tool-bd { min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.rd-tool-name { font: 600 0.82rem/1.4 var(--rd-mono); color: var(--rd-text); overflow-wrap: anywhere; }
.rd-tool-name span { font-weight: 400; color: var(--rd-muted); }
.rd-tool-res { font-size: 0.84rem; line-height: 1.5; color: var(--rd-sub); overflow-wrap: anywhere; }
.rd-ms { font: 600 0.74rem/1.6 var(--rd-mono); color: var(--rd-muted); font-variant-numeric: tabular-nums; }

/* ---------- 证据链 ---------- */
.rd-graph {
  padding: 0.95rem 1.1rem 1.15rem;
  border: 1px solid var(--rd-line);
  border-radius: 14px;
  background:
    radial-gradient(rgba(0, 63, 236, 0.13) 1px, transparent 1.2px) 0 0 / 16px 16px,
    #f8faff;
}

.rd-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--rd-line);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--rd-sub);
  white-space: nowrap;
}
.rd-pill code { font: 600 0.72rem var(--rd-mono); color: var(--rd-text); }
.rd-pill--soft { background: var(--rd-blue-soft); border-color: var(--rd-blue-line); color: var(--rd-blue); }
.rd-pill--host { background: #fff; }
.rd-pill--warn { background: #fff7e6; border-color: #f3d18a; color: var(--rd-warn); }
.rd-pill--danger { background: #fff0f0; border-color: #f5b5b5; color: #c62828; }

.rd-hostrow { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }

.rd-chain { display: flex; align-items: center; }

.rd-node {
  flex: 0 1 auto;
  min-width: 0;
  padding: 0.5rem 0.6rem;
  border: 1px solid #b9cdfb;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 63, 236, 0.08);
  text-align: center;
}
.rd-node b { display: block; font: 700 0.84rem/1.3 var(--rd-mono); color: var(--rd-text); overflow-wrap: anywhere; }
.rd-node span { display: block; margin-top: 2px; font-size: 0.66rem; line-height: 1.35; color: var(--rd-muted); overflow-wrap: anywhere; }
.rd-node--c2 {
  border-color: #ef8d8d;
  background: #fff1f1;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.12);
}
.rd-node--c2 span { color: #c62828; }

.rd-link {
  position: relative;
  flex: 1 1 14px;
  min-width: 14px;
  height: 2px;
  background: #b9cdfb;
  overflow: hidden;
}
.rd-link::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  transform: translateX(-100%);
  will-change: transform;
  background: linear-gradient(90deg, transparent, var(--rd-blue), transparent);
  opacity: 0;
}
.rd-link.is-in::after, .rd-stage:not(.is-js) .rd-link::after { opacity: 1; animation: rd-flow 1.5s linear infinite; }
.rd-link--bad { background: #f3a3a3; }
.rd-link--bad::after { background: linear-gradient(90deg, transparent, var(--rd-bad), transparent); }

/* ---------- 结论 ---------- */
.rd-verdict {
  margin-top: 0.9rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid #f6c4c4;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff5f5, #fff);
  box-shadow: 0 14px 36px rgba(220, 38, 38, 0.08);
}

.rd-verdict-hd { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.9rem; }

.rd-ring { position: relative; flex: none; width: 72px; height: 72px; }
.rd-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rd-ring circle { fill: none; stroke-width: 6; }
.rd-ring-bg { stroke: #f1dcdc; }
.rd-ring-fg { stroke: var(--rd-bad); stroke-linecap: round; stroke-dasharray: 201.1; stroke-dashoffset: 14.1; filter: drop-shadow(0 0 4px rgba(220, 38, 38, 0.3)); }
.rd-ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 1.15rem/1 var(--rd-mono); color: var(--rd-text); font-variant-numeric: tabular-nums; }

.rd-verdict-t { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; min-width: 0; }
.rd-badge {
  padding: 0.25rem 0.85rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 750;
}
.rd-badge--risk { background: #fee2e2; border: 1px solid #f5b5b5; color: #b91c1c; }
.rd-conf { font-size: 0.8rem; color: var(--rd-muted); }

.rd-evidence { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; list-style: none; font-size: 0.92rem; line-height: 1.55; color: #1e293b; }
.rd-evidence li { display: grid; grid-template-columns: 3.4em minmax(0, 1fr) auto; gap: 0.5rem; align-items: baseline; }
.rd-evidence b { font: 700 0.76rem var(--rd-mono); color: #b91c1c; }
.rd-ref {
  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 5px;
  background: var(--rd-blue-soft);
  border: 1px solid var(--rd-blue-line);
  font: 700 0.62rem/1 var(--rd-mono);
  color: var(--rd-blue);
  vertical-align: baseline;
}

.rd-ttps { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.9rem 0 0; padding-top: 0.8rem; border-top: 1px dashed #efcaca; }
.rd-ttps em { font-style: normal; margin-right: 0.2rem; font: 700 0.64rem var(--rd-mono); letter-spacing: 0.08em; color: var(--rd-muted); text-transform: uppercase; }
.rd-ttp { display: inline-flex; align-items: baseline; gap: 0.4rem; padding: 0.18rem 0.55rem; border-radius: 6px; background: #f1f5fb; font-size: 0.68rem; color: var(--rd-sub); }
.rd-ttp b { font: 700 0.68rem var(--rd-mono); color: var(--rd-blue); }

/* ---------- 处置闸门 ---------- */
.rd-gate { margin-top: 1.4rem; }
.rd-gate-hd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 1rem; margin-bottom: 0.7rem; }
.rd-gate-hd .rd-col-hd { margin: 0; color: var(--rd-blue); }
.rd-gate-s { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.8rem; color: var(--rd-muted); }
.rd-gate-s svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--rd-warn); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.rd-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }

.rd-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.95rem 1rem 1rem;
  border: 1px solid var(--rd-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
  cursor: default;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s, transform 0.2s;
}
.rd-stage.is-in .rd-chip, .rd-stage[data-now="8"] .rd-chip, .rd-stage[data-now="9"] .rd-chip { cursor: pointer; }
.rd-chip:hover { transform: translateY(-1px); border-color: var(--rd-blue-line); box-shadow: 0 8px 22px rgba(0, 63, 236, 0.1); }
.rd-chip:focus-visible { outline: 2px solid var(--rd-blue); outline-offset: 2px; }

.rd-act-hd { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; }
.rd-act-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--rd-blue-soft); border: 1px solid var(--rd-blue-line); }
.rd-act-ic svg { width: 17px; height: 17px; fill: none; stroke: var(--rd-blue); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rd-chip-t { font-size: 0.96rem; font-weight: 700; line-height: 1.3; color: var(--rd-text); overflow-wrap: anywhere; }
.rd-act-call { display: block; padding: 0.35rem 0.55rem; border-radius: 7px; background: #f3f6fb; font: 500 0.72rem/1.4 var(--rd-mono); color: #475569; overflow-wrap: anywhere; }
.rd-act-d { margin: 0; font-size: 0.8rem; line-height: 1.5; color: var(--rd-muted); }

.rd-pend { position: relative; display: grid; font-style: normal; border-radius: 999px; background: #fff4dc; border: 1px solid #f3d18a; color: #a15c07; font-size: 0.68rem; font-weight: 700; padding: 0.15rem 0.55rem; transition: background 0.3s, color 0.3s, border-color 0.3s; }
.rd-pend > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; transition: opacity 0.25s; }
.rd-pend-b { opacity: 0; }
.rd-pend-b svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.rd-chip.is-approved { border-color: #86d9a8; background: linear-gradient(180deg, #f0fdf6, #fff); box-shadow: 0 10px 28px rgba(5, 150, 105, 0.14); }
.rd-chip.is-approved .rd-pend { background: #d1fae5; border-color: #86d9a8; color: #047857; }
.rd-chip.is-approved .rd-pend-a { opacity: 0; }
.rd-chip.is-approved .rd-pend-b { opacity: 1; }

/* ---------- 底栏：状态 + CTA ---------- */
.rd-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem 1.5rem;
  margin: 1.4rem -1.5rem 0;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--rd-line);
  background: #f5f8ff;
}

.rd-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.1rem; margin: 0; font-size: 0.82rem; color: var(--rd-muted); }
.rd-working, .rd-done { display: none; align-items: center; gap: 0.4rem; font-weight: 650; }
.rd-working { color: var(--rd-blue); }
.rd-working i { width: 7px; height: 7px; border-radius: 50%; background: var(--rd-blue); animation: rd-pulse 1.1s ease-in-out infinite; }
.rd-done { color: #047857; }
.rd-done svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rd-stage:not(.is-js) .rd-done, .rd-stage.is-done .rd-done, .rd-stage.is-working .rd-working { display: inline-flex; }
.rd-took { font-variant-numeric: tabular-nums; }
.rd-took b { display: inline-block; min-width: 2.2em; text-align: right; font: 700 0.9rem var(--rd-mono); color: var(--rd-text); }
.rd-stage.is-done .rd-took b { color: var(--rd-blue); }
.rd-calls { color: var(--rd-muted); }

.rd-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.1rem; }
.rd-cta-t { min-width: 0; font-size: 0.98rem; font-weight: 650; color: var(--rd-text); }
.rd-cta-btn.btn {
  flex: none;
  min-height: 0;
  height: 42px;
  padding: 0 1.5rem;
  border: 0;
  border-radius: 999px;
  background: #003fec;
  box-shadow: 0 8px 22px rgba(0, 63, 236, 0.28);
  color: #fff;
  font-size: 0.94rem;
  font-weight: 650;
  white-space: nowrap;
}
.rd-cta-btn.btn:hover { background: #0036cc; transform: translateY(-1px); }

/* ---------- 动效（JS 开启时的初始态） ---------- */
.rd-stage.is-js [data-at] { opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.4s ease, filter 0.5s ease; }
.rd-stage.is-js [data-at].is-in { opacity: 1; transform: none; }

/* 预占位：结构先露出来，信息随步骤“显影” */
.rd-stage.is-js .rd-node[data-at], .rd-stage.is-js .rd-link[data-at] { opacity: 0.25; transform: none; }
.rd-stage.is-js .rd-node[data-at] { border-style: dashed; }
.rd-stage.is-js .rd-node[data-at].is-in, .rd-stage.is-js .rd-link[data-at].is-in { opacity: 1; }
.rd-stage.is-js .rd-node[data-at].is-in { border-style: solid; animation: rd-node-in 0.5s ease both; animation-delay: calc(var(--k, 0) * 120ms); }
.rd-stage.is-js .rd-node--c2.is-in { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); animation: rd-node-in 0.5s ease both, rd-c2 1.8s ease-out 0.6s infinite; }

.rd-stage.is-js .rd-verdict[data-at], .rd-stage.is-js .rd-acts[data-at] { opacity: 0.5; transform: none; filter: blur(5px); }
.rd-stage.is-js .rd-verdict[data-at].is-in, .rd-stage.is-js .rd-acts[data-at].is-in { opacity: 1; filter: none; }

.rd-stage.is-js .rd-ring-fg { stroke-dashoffset: 201.1; }
.rd-stage.is-js .rd-verdict.is-in .rd-ring-fg { stroke-dashoffset: 14.1; transition: stroke-dashoffset 1s cubic-bezier(0.3, 0.7, 0.2, 1) 0.2s; }
.rd-stage.is-js .rd-verdict.is-in .rd-badge { animation: rd-pop 0.5s 0.15s both; }
.rd-stage.is-js .rd-evidence li, .rd-stage.is-js .rd-ttp { opacity: 0; transform: translateX(-8px); }
.rd-stage.is-js .rd-verdict.is-in .rd-evidence li, .rd-stage.is-js .rd-verdict.is-in .rd-ttp { opacity: 1; transform: none; transition: opacity 0.4s ease, transform 0.4s ease; }
.rd-stage.is-js .rd-verdict.is-in .rd-evidence li:nth-child(1) { transition-delay: 0.35s; }
.rd-stage.is-js .rd-verdict.is-in .rd-evidence li:nth-child(2) { transition-delay: 0.7s; }
.rd-stage.is-js .rd-verdict.is-in .rd-evidence li:nth-child(3) { transition-delay: 1.05s; }
.rd-stage.is-js .rd-verdict.is-in .rd-ttp:nth-of-type(1) { transition-delay: 1.25s; }
.rd-stage.is-js .rd-verdict.is-in .rd-ttp:nth-of-type(2) { transition-delay: 1.4s; }
.rd-stage.is-js .rd-verdict.is-in .rd-ttp:nth-of-type(3) { transition-delay: 1.55s; }

/* 工具行：转圈 → 编号，结果文字随后出现 */
.rd-stage.is-js .rd-tool .rd-tool-ix { border-color: #d7e3fb; background: #f3f7ff; }
.rd-stage.is-js .rd-tool .rd-tool-ix b { opacity: 0; }
.rd-stage.is-js .rd-tool .rd-spin { opacity: 1; }
.rd-stage.is-js .rd-tool .rd-tool-res, .rd-stage.is-js .rd-tool .rd-ms { opacity: 0; }
.rd-stage.is-js .rd-tool.is-in .rd-tool-ix { border-color: var(--rd-blue-line); background: var(--rd-blue-soft); transition: border-color 0.3s 0.7s, background 0.3s 0.7s; }
.rd-stage.is-js .rd-tool.is-in .rd-tool-ix b { opacity: 1; transition: opacity 0.25s 0.7s; }
.rd-stage.is-js .rd-tool.is-in .rd-spin { opacity: 0; transition: opacity 0.2s 0.7s; }
.rd-stage.is-js .rd-tool.is-in .rd-tool-res, .rd-stage.is-js .rd-tool.is-in .rd-ms { opacity: 1; transition: opacity 0.4s 0.7s; }
.rd-stage.is-js .rd-tool.is-in { border-color: #d7e3fb; }

.rd-stage.is-js .rd-took { opacity: 0; transition: opacity 0.3s; }
.rd-stage.is-js.is-working .rd-took, .rd-stage.is-js.is-done .rd-took { opacity: 1; }
.rd-stage.is-js .rd-cta.is-in .rd-cta-btn { animation: rd-cta-glow 2.4s ease-in-out 0.5s 2; }

@keyframes rd-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@keyframes rd-spin { to { transform: rotate(360deg); } }
@keyframes rd-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } }
@keyframes rd-flow { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@keyframes rd-pop { 0% { transform: scale(0.8); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes rd-node-in { from { transform: translateY(6px) scale(0.94); } to { transform: none; } }
@keyframes rd-c2 { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); } 100% { box-shadow: 0 0 0 12px rgba(220, 38, 38, 0); } }
@keyframes rd-cta-glow { 0%, 100% { box-shadow: 0 8px 22px rgba(0, 63, 236, 0.28), 0 0 0 0 rgba(0, 63, 236, 0); } 50% { box-shadow: 0 8px 22px rgba(0, 63, 236, 0.28), 0 0 0 9px rgba(0, 63, 236, 0.14); } }

/* ---------- 窄屏 ---------- */
@media (max-width: 860px) {
  .rd-stage { padding: 1rem 1rem 0; }
  .rd-cols { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .rd-acts { grid-template-columns: minmax(0, 1fr); }
  .rd-foot { margin: 1.25rem -1rem 0; padding: 1rem; }
  .rd-cta { width: 100%; justify-content: space-between; }
  .rd-chrome { flex-wrap: wrap; row-gap: 0.4rem; }
  .rd-controls { margin-left: 0; width: 100%; }
}

@media (max-width: 520px) {
  .rd-chrome-tag { display: none; }
  .rd-tool { grid-template-columns: 26px minmax(0, 1fr); }
  .rd-ms { grid-column: 2; margin-top: -0.2rem; }
  .rd-verdict { padding: 1rem; }
  .rd-ring { width: 60px; height: 60px; }
  .rd-ring b { font-size: 1rem; }
  .rd-badge { font-size: 0.92rem; }
  .rd-evidence li { grid-template-columns: 3em minmax(0, 1fr) auto; font-size: 0.88rem; }
  .rd-node { padding: 0.4rem 0.35rem; }
  .rd-node b { font-size: 0.7rem; }
  .rd-node span { font-size: 0.6rem; }
  .rd-link { flex-basis: 8px; min-width: 8px; }
  .rd-cta-t { width: 100%; }
  .rd-cta-btn.btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .rd-caret, .rd-spin, .rd-link::after, .rd-live i, .rd-working-dot, .rd-working i { animation: none !important; }
  .rd-stage .rd-node, .rd-stage .rd-cta-btn { animation: none !important; }
  .rd-stage.is-js [data-at], .rd-stage.is-js .rd-evidence li, .rd-stage.is-js .rd-ttp { transition: none !important; }
}

.rd-node span span { display: inline; margin: 0; font-size: inherit; color: inherit; }
.rd-node--c2 span { white-space: nowrap; }