/* 企业找关系 —— 付费网关界面（登录/兑换码/查询/报告） */

/* ⚠️ 必须放在所有布局规则之前：hidden 属性靠 UA 样式表的 display:none 生效，
   而任何作者样式里的 display（比如 .auth-form 的 flex）优先级都比它高，
   于是 el.hidden = true 在视觉上完全失效。
   实际踩过：登录和注册两个表单曾经同时显示在页面上，用户以为是"字段重复"。
   这一条是兜底，给所有用 hidden 做显隐的元素上保险。 */
[hidden] {
  display: none !important;
}

:root {
  /* 强化 ease-out：UI 动效不用 ease-in（起步慢会显得迟钝） */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* 选中文字染品牌色——公司名是要被复制粘贴的，这个页面上选中动作很频繁 */
::selection {
  background: color-mix(in srgb, var(--brand) 22%, transparent);
  color: var(--text);
}

/* 用户在系统里关掉了动效就一律不动。不是把时长改短，是真的关掉。 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 本页 hero 只有文案一栏，取消 styles.css 的两栏布局，避免右侧留空 */
.hero-project {
  grid-template-columns: minmax(0, 1fr);
}

.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 24px;
  margin-bottom: 24px;
}

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.panel h2 {
  margin: 0 0 8px;
}

.panel h3 {
  margin: 28px 0 10px;
  font-size: 1rem;
  color: var(--brand-deep);
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
}

.subpanel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.subpanel-head h3 {
  flex: 1;
  margin-top: 18px;
}

.muted {
  color: var(--text-soft);
  font-size: 0.9rem;
  line-height: 1.6;
}

.disclaimer-banner {
  margin-top: 16px;
  padding: 12px 16px;
  border-left: 3px solid var(--gold);
  background: var(--card-soft);
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text-soft);
}

/* ---- 表单 ---- */

.inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.field-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
}

/* 输入框统一样式。
   这里必须【穷举所有用到的 type】——曾经只写了 password/number/textarea，
   漏掉 email 和 text，导致邮箱框拿浏览器默认的 inline 小方块（147px）、
   密码框却是 width:100%，同一个表单里高矮胖瘦全不一样。
   加新输入框时记得把 type 补进这个选择器，或者改用 class。 */
input[type="email"],
input[type="text"],
input[type="password"],
input[type="number"],
textarea {
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--card-soft);
  color: var(--text);
  width: 100%;
  /* 只动会变的属性，不写 transition: all */
  transition: border-color 140ms var(--ease-out, ease), box-shadow 140ms var(--ease-out, ease);
}

input[type="email"]::placeholder,
input[type="text"]::placeholder,
input[type="password"]::placeholder,
textarea::placeholder {
  color: var(--text-soft);
  opacity: 0.55;
}

/* 焦点环用品牌色，且只在键盘/程序化聚焦时出现（:focus-visible），
   鼠标点击不显示——避免每次点击都闪一圈蓝框。 */
input[type="email"]:focus-visible,
input[type="text"]:focus-visible,
input[type="password"]:focus-visible,
input[type="number"]:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}

/* 鼠标 hover 时给一点边框反馈，但只在真有指针设备的环境 */
@media (hover: hover) and (pointer: fine) {
  input[type="email"]:hover:not(:focus),
  input[type="text"]:hover:not(:focus),
  input[type="password"]:hover:not(:focus),
  textarea:hover:not(:focus) {
    border-color: color-mix(in srgb, var(--text) 22%, transparent);
  }
}

input[type="number"] {
  width: 130px;
}

textarea {
  resize: vertical;
  line-height: 1.7;
}

.btn-primary,
.btn-ghost,
.btn-secondary {
  font: inherit;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: var(--radius-md);
  cursor: pointer;
  border: 1px solid var(--brand);
  touch-action: manipulation;
  transition:
    background-color 140ms var(--ease-out),
    transform 90ms var(--ease-out),
    box-shadow 140ms var(--ease-out);
}

/* 按压反馈：50ms 内必须有视觉响应，否则在触屏上会感觉"没点上" */
.btn-primary:active:not(:disabled),
.btn-ghost:active:not(:disabled),
.btn-secondary:active:not(:disabled) {
  transform: scale(0.97);
}

.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.btn-secondary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--brand);
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover:not(:disabled) {
    background: var(--brand-bright);
  }
}

.btn-primary:disabled,
.btn-secondary:disabled {
  opacity: 0.5;
  cursor: progress;
}

.btn-secondary {
  background: var(--card-soft);
  color: var(--brand-deep);
  margin-right: 8px;
}

.btn-ghost {
  background: transparent;
  color: var(--brand-deep);
}

.btn-small {
  padding: 4px 12px;
  font-size: 0.82rem;
  margin-top: 8px;
}

.account-history {
  border-top: 1px solid var(--line);
  margin-top: 22px;
  padding-top: 4px;
}

.history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.history-item:last-child {
  border-bottom: 0;
}

.history-main {
  min-width: 0;
}

.history-companies {
  margin: 0 0 4px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-meta {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.8rem;
}

.history-status {
  flex: 0 0 auto;
  color: var(--text-soft);
  font-size: 0.82rem;
}

.report-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 14px;
  padding: 12px;
  background: var(--card-soft);
  border-radius: var(--radius-md);
}

.report-actions .btn-secondary {
  margin-right: 0;
}

/* 错误提示用 --danger（该变量在暗色模式下会自动换成更亮的红），
   不写死 #a3271c——写死的话暗底上对比度不够。 */
.form-error {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 26%, transparent);
  color: var(--danger);
  font-size: 0.86rem;
  line-height: 1.6;
}

.form-success {
  color: var(--olive);
  font-size: 0.88rem;
  margin-top: 8px;
}

/* ---- 账号卡片 ---- */

#account-summary strong {
  display: block;
  font-size: 1rem;
}

.points-balance {
  margin: 6px 0;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ---- 登录 / 注册 ----
   这是付费产品的转化点：未登录访客第一个要完成的动作。所以给它比普通 panel
   更收紧的版心和更明确的层级，而不是让它看起来像页面上又一段表单。 */

.auth-panel {
  /* 外层 panel 退成舞台，真正的卡片是里面的 .auth-card */
  background: transparent;
  border: 0;
  padding: 0;
}

.auth-card {
  max-width: 420px;
  /* 居中。这是未登录访客唯一要完成的动作，左对齐会让它在 1280px 宽的行里
     右侧空出 778px，看起来像个被遗忘的角落控件而不是转化点。 */
  margin: 0 auto;
  padding: 28px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  /* 双层染色阴影：一层贴边定形，一层向下扩散给重量。用品牌色染而不是纯黑，
     让卡片和站点的蓝色调是一家人。 */
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--brand) 8%, transparent),
    0 12px 32px -12px color-mix(in srgb, var(--brand) 18%, transparent);
}

/* 分段控件（segmented control）：整体一个胶囊槽，选中项是槽里的滑块。
   比两个独立药丸按钮更能表达"二选一"，也不会让未选中项看起来像被禁用。 */
.auth-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 22px;
  padding: 4px;
  background: var(--tint);
  border-radius: var(--radius-pill);
}

.auth-tab {
  flex: 1;
  font: inherit;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  border: 0;
  background: transparent;
  color: var(--text-soft);
  touch-action: manipulation;
  transition:
    background-color 160ms var(--ease-out, ease),
    color 160ms var(--ease-out, ease),
    box-shadow 160ms var(--ease-out, ease);
}

.auth-tab.is-active {
  background: var(--bg);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

@media (hover: hover) and (pointer: fine) {
  .auth-tab:not(.is-active):hover {
    color: var(--text);
  }
}

.auth-tab:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.field-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 8px;
}

/* 「至少 8 位」这类补充说明不该和字段名同等重量——降一级，靠色彩和字重区分，
   不靠括号堆在标签里 */
.field-hint {
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--text-soft);
}

.btn-block {
  width: 100%;
  /* 触控目标 ≥ 44px */
  min-height: 44px;
  margin-top: 2px;
}

/* 注册赠送额度：这是注册按钮之外最重要的说服力，给它一个能被记住的锚，
   而不是又一行灰色小字。文案由 JS 从后端下发的额度渲染。 */
.auth-bonus {
  margin: 0 0 18px;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 20%, transparent);
  color: var(--brand-deep);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.6;
}

.auth-note {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.82rem;
  line-height: 1.6;
}

/* 提交中：按钮变淡且不可点，文案由 JS 换成「登录中…」。
   不做转圈图标——一个 44px 的按钮上放 spinner 只会更吵。 */
.btn-primary[aria-busy="true"] {
  opacity: 0.6;
  cursor: progress;
}

@media (max-width: 480px) {
  .auth-card {
    padding: 22px 18px;
  }
}

/* ---- 查询表单 ---- */

.query-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  margin-top: 16px;
}

@media (max-width: 720px) {
  .query-grid {
    grid-template-columns: 1fr;
  }

  .history-item {
    align-items: flex-start;
  }
}

@media print {
  body {
    background: #fff;
    color: #111;
  }

  .site-header,
  #auth-panel,
  #app-panel,
  #query,
  #about,
  .report-actions {
    display: none !important;
  }

  .page-shell,
  .project-main {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  #report {
    display: block !important;
    border: 0;
    padding: 0;
    margin: 0;
  }

  .table-scroll {
    overflow: visible;
  }

  .table-scroll table {
    font-size: 9pt;
  }

  .table-scroll th,
  .table-scroll td {
    padding: 5px 6px;
  }
}

.query-grid select {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--card-soft);
  color: var(--text);
  width: 100%;
  margin-top: 4px;
}

/* ---- 风险等级 ---- */

.risk-badge {
  display: inline-block;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.92rem;
  color: #fff;
}

.risk-red {
  background: #a3271c;
}
.risk-orange {
  background: var(--gold);
}
.risk-yellow {
  background: #b8960c;
}
.risk-green {
  background: var(--olive);
}

/* ---- 价格提示（平价计费：¥1/家，随输入实时更新）---- */

.cost-preview {
  margin: 4px 0 12px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.cost-preview.over-limit {
  color: #a3271c;
}

/* ---- 数据覆盖说明：未查完的单位单独标出，和规则引擎的说明区分开 ---- */

.coverage-skip {
  color: var(--gold);
}

/* ---- 购买点数联系方式 ---- */

.contact-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-list li {
  font-size: 0.95rem;
}

.contact-list img {
  display: block;
  margin-top: 6px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  background: var(--card-soft);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ---- 表格 ---- */

.table-scroll {
  overflow-x: auto;
}

.table-scroll table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.table-scroll th,
.table-scroll td {
  border: 1px solid var(--line);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

.table-scroll th {
  background: var(--card-soft);
  font-weight: 600;
  white-space: nowrap;
}

.cell-detail {
  display: block;
  margin-top: 4px;
  color: var(--text-soft);
  font-size: 0.78rem;
  line-height: 1.5;
}

/* ---- 结论 / 关联组 ---- */

.conclusion {
  border-left: 3px solid var(--teal);
  background: var(--card-soft);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 12px;
}

.conclusion h4 {
  margin: 0 0 6px;
  font-size: 0.95rem;
}

.conclusion p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.88rem;
  line-height: 1.7;
}

/* ══════════════════════════════════════════════════════════════════
   报告：证据链、关系图、字段对比表
   ══════════════════════════════════════════════════════════════════ */

/* 四色风险提成变量，让 JS 能读同一套色给 ECharts——图和页面必须同色，
   否则同一份结论在图上和文字里是两种红。 */
:root {
  --risk-red: #a3271c;
  --risk-orange: #a07a1f;
  --risk-yellow: #b8960c;
  --risk-green: #6f7a30;
  --risk-gray: #8a8a8e;
}
@media (prefers-color-scheme: dark) {
  :root {
    /* 暗底上这几个哑光色太沉，节点和徽章都糊成一团，整体提亮 */
    --risk-red: #ff6a5e;
    --risk-orange: #e0a83c;
    --risk-yellow: #d8b431;
    --risk-green: #a3b455;
    --risk-gray: #98989d;
  }
}

.risk-red { background: var(--risk-red); }
.risk-orange { background: var(--risk-orange); }
.risk-yellow { background: var(--risk-yellow); }
.risk-green { background: var(--risk-green); }
@media (prefers-color-scheme: dark) {
  /* 提亮后的底色配白字对比度不够，改深色字 */
  .risk-badge { color: #1d1d1f; }
}

/* ---- KPI ---- */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  margin: 14px 0 4px;
}
.kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: var(--card-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.kpi-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}
.kpi-label {
  font-size: 0.8rem;
  color: var(--text-soft);
}

.reason-list {
  margin: 0;
  padding-left: 18px;
}
.reason-list li {
  margin-bottom: 4px;
  line-height: 1.6;
}

/* ---- 关系图 ---- */
#graph-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card-soft);
  padding: 8px;
}
#qiye-graph {
  width: 100%;
  height: 460px;
}
@media (max-width: 720px) {
  #qiye-graph { height: 340px; }
}

/* ---- 关联组 / 证据卡 ---- */
.group-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card-soft);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.group-members {
  font-weight: 700;
  font-size: 0.98rem;
}
.group-rules {
  font-size: 0.82rem;
  color: var(--text-soft);
}

.hit-card {
  padding: 14px 0 4px;
  border-bottom: 1px solid var(--line);
}
.hit-card:last-child { border-bottom: 0; }

.hit-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.hit-rule {
  font-weight: 700;
  font-size: 0.92rem;
}
.hit-strength,
.hit-state,
.evidence-tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font-size: 0.74rem;
  line-height: 1.6;
  white-space: nowrap;
}
.hit-strength { color: #fff; font-weight: 600; }
@media (prefers-color-scheme: dark) {
  .hit-strength { color: #1d1d1f; }
}
.hit-strength-red { background: var(--risk-red); }
.hit-strength-orange { background: var(--risk-orange); }
.hit-strength-yellow { background: var(--risk-yellow); }

.hit-state {
  border: 1px solid var(--line);
  color: var(--text-soft);
}
.hit-state-confirmed {
  border-color: color-mix(in srgb, var(--risk-green) 45%, transparent);
  color: var(--risk-green);
  background: color-mix(in srgb, var(--risk-green) 10%, transparent);
}
.evidence-tag {
  border: 1px solid var(--line);
  color: var(--text-soft);
  background: var(--tint);
}
.evidence-tag-warn {
  border-color: color-mix(in srgb, var(--risk-orange) 45%, transparent);
  color: var(--risk-orange);
  background: color-mix(in srgb, var(--risk-orange) 10%, transparent);
}

.hit-subject {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.hit-subject-type {
  font-size: 0.78rem;
  color: var(--text-soft);
  padding: 2px 8px;
  background: var(--tint);
  border-radius: var(--radius-md);
}
.hit-subject-name { font-size: 1rem; }

.hit-reason {
  margin: 0 0 10px;
  color: var(--text-soft);
  font-size: 0.86rem;
  line-height: 1.75;
}

.evidence-group {
  margin: 10px 0 0;
  padding: 10px 12px;
  background: var(--card);
  border-radius: var(--radius-md);
}
.evidence-target {
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 6px;
}
.evidence-path {
  padding: 6px 0 6px 10px;
  border-top: 1px solid var(--line);
}
.evidence-path:first-of-type { border-top: 0; }
.evidence-entity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.evidence-entity-name {
  font-size: 0.88rem;
  font-weight: 600;
}
.evidence-role {
  font-size: 0.85rem;
  color: var(--text-soft);
  line-height: 1.7;
  margin-top: 2px;
}

/* 股权链是全篇最有说服力的一段：把「为什么说他们有关系」
   从一句结论变成一条能逐段核对的路径。给它专门的视觉重量。 */
.evidence-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-top: 6px;
  padding: 7px 10px;
  background: var(--tint);
  border-radius: var(--radius-md);
  font-size: 0.83rem;
}
.evidence-chain-label {
  font-weight: 600;
  color: var(--text-soft);
  white-space: nowrap;
}
.evidence-chain-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
}
.evidence-chain-node { font-weight: 600; }
.evidence-chain-pct {
  color: var(--brand);
  font-weight: 700;
  padding: 0 2px;
}
.evidence-chain-arrow { color: var(--text-soft); }
.evidence-effective {
  color: var(--brand);
  font-size: 0.95rem;
}

/* ---- 尽调标记 ---- */
.dd-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--risk-red) 30%, var(--line));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--risk-red) 6%, transparent);
  margin-bottom: 8px;
}
.dd-name { font-weight: 600; font-size: 0.9rem; }
.dd-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.dd-tag {
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font-size: 0.76rem;
  background: var(--risk-red);
  color: #fff;
}
@media (prefers-color-scheme: dark) {
  .dd-tag { color: #1d1d1f; }
}

/* ---- 提示条 ---- */
.notice {
  margin: 0 0 8px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 0.86rem;
  line-height: 1.7;
  border: 1px solid var(--line);
  background: var(--card-soft);
}
.notice-info {
  border-color: color-mix(in srgb, var(--brand) 32%, transparent);
  background: color-mix(in srgb, var(--brand) 7%, transparent);
}
.notice-warn {
  border-color: color-mix(in srgb, var(--risk-orange) 40%, transparent);
  background: color-mix(in srgb, var(--risk-orange) 9%, transparent);
}

/* ---- 可折叠区块 ---- */
.report-fold {
  border-top: 1px solid var(--line);
  margin-top: 20px;
  padding-top: 4px;
}
.report-fold > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.report-fold > summary::-webkit-details-marker { display: none; }
.report-fold > summary::after {
  content: "展开";
  font-size: 0.8rem;
  color: var(--brand);
  font-weight: 600;
}
.report-fold[open] > summary::after { content: "收起"; }
.report-fold > summary h3 { display: inline; }
.report-fold > summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
  border-radius: var(--radius-md);
}

/* ---- 字段对比表：单位是列，窄屏必然溢出，首列固定 ---- */
.comparison-scroll { max-height: 70vh; overflow: auto; }
#comparison-table { min-width: max-content; }
#comparison-table th,
#comparison-table td { min-width: 190px; }
#comparison-table .cmp-field,
#comparison-table .cmp-field-head {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--card-soft);
  min-width: 120px;
  max-width: 140px;
  white-space: normal;
}
#comparison-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--card-soft);
}
#comparison-table .cmp-field-head { z-index: 4; }
.cmp-field {
  font-weight: 600;
  font-size: 0.84rem;
  text-align: left;
  vertical-align: top;
}
.cmp-rule {
  display: block;
  font-size: 0.72rem;
  color: var(--text-soft);
  font-weight: 400;
  margin-top: 2px;
}
.cmp-entity-name { font-weight: 700; font-size: 0.86rem; white-space: normal; }
.cmp-entity-meta { font-size: 0.74rem; color: var(--text-soft); font-weight: 400; margin-top: 2px; }
.cmp-target .cmp-entity-name { color: var(--brand); }
.cmp-list { margin: 0; padding-left: 16px; }
.cmp-list li { margin-bottom: 3px; line-height: 1.6; }
.cmp-shared {
  background: color-mix(in srgb, var(--risk-orange) 16%, transparent);
  border-radius: 4px;
  padding: 1px 4px;
}
.cmp-shared-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  background: var(--risk-orange);
  color: #fff;
}
@media (prefers-color-scheme: dark) {
  .cmp-shared-tag { color: #1d1d1f; }
}
/* 截断必须说明。尽调场景下把不完整名单当完整的用，比不显示更危险。 */
.cmp-truncated {
  margin: 6px 0 0;
  font-size: 0.74rem;
  color: var(--risk-orange);
  font-weight: 600;
}

/* ---- 打印 ---- */
@media print {
  /* 折叠区在打印时必须展开，否则导出的 PDF 缺两大块 */
  .report-fold > summary::after { content: ""; }
  details:not([open]) > *:not(summary) { display: revert !important; }
  .comparison-scroll { max-height: none; overflow: visible; }
  #graph-wrap { break-inside: avoid; }
  #qiye-graph { height: 380px; }
  .group-card,
  .hit-card,
  .dd-card,
  .notice { break-inside: avoid; }
  .kpi-row { grid-template-columns: repeat(6, 1fr); }
}

/* ---- 人机校验组件 ---- */
.turnstile-slot {
  margin-bottom: 4px;
  /* Turnstile 默认 300×65，窄屏上会顶出卡片。缩放而不是裁切，
     裁切会让复选框跑到可视区外，用户根本没法完成验证。 */
  max-width: 100%;
  overflow: hidden;
}
.turnstile-failed {
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 26%, transparent);
  color: var(--danger);
  font-size: 0.84rem;
  line-height: 1.6;
}
/* 正式 widget 固定 300px 宽。320px 的老手机上卡片可用宽只有约 264px，
   会撑破卡片；而 overflow:hidden 只是把它裁掉，裁掉等于用户点不到验证框。
   所以是缩放不是裁切：300 × 0.85 = 255，能塞进 264。 */
@media (max-width: 365px) {
  .turnstile-slot iframe {
    transform: scale(0.85);
    transform-origin: left top;
  }
  .turnstile-slot {
    height: 58px; /* 65 × 0.85，缩放不改变占位高度，不补的话下面会多出一条空隙 */
  }
}

/* ---- 邮箱验证状态条 ----
   做成常驻横幅而不是弹窗：用户很可能收不到验证信（尤其国内邮箱），
   得让重发按钮一直在视野里，而不是关掉弹窗就再也找不到入口。 */
.verify-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-width: 1px;
  border-style: solid;
}
.verify-text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.7;
  font-weight: 600;
}
.verify-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.verify-actions .btn-secondary {
  margin-right: 0;
  min-height: 40px;
}
.verify-info {
  border-color: color-mix(in srgb, var(--brand) 32%, transparent);
  background: color-mix(in srgb, var(--brand) 7%, transparent);
}
.verify-ok {
  border-color: color-mix(in srgb, var(--risk-green) 42%, transparent);
  background: color-mix(in srgb, var(--risk-green) 9%, transparent);
}
.verify-warn {
  border-color: color-mix(in srgb, var(--risk-orange) 42%, transparent);
  background: color-mix(in srgb, var(--risk-orange) 9%, transparent);
}
@media print {
  .verify-panel { display: none !important; }
}

/* ---- 关系图工具栏 / 图例 ---- */
.graph-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 4px 4px 10px;
}
.graph-toolbar .btn-small { margin-top: 0; }
#graph-tip { font-size: 0.8rem; }

#graph-wrap.is-fullscreen {
  background: var(--bg);
  padding: 16px;
  display: flex;
  flex-direction: column;
}
#graph-wrap.is-fullscreen #qiye-graph { flex: 1; height: auto; }

/* iOS Safari 的 <div> 不支持全屏 API，退化成本页放大 */
#graph-wrap.graph-tall #qiye-graph { height: 78vh; }

.graph-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 4px 2px;
  border-top: 1px solid var(--line);
  margin-top: 8px;
}
.legend-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}
.legend-title {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-soft);
  min-width: 74px;
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  color: var(--text-soft);
}
.legend-item i { flex: 0 0 auto; display: inline-block; }
.legend-dot { border-radius: 50%; }
.legend-dot-lg { width: 14px; height: 14px; }
.legend-dot-sm { width: 9px; height: 9px; }
/* 用 clip-path 画形状，避免为四个图例标记引入图片或字体图标 */
.legend-star {
  width: 13px;
  height: 13px;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.legend-diamond {
  width: 11px;
  height: 11px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.legend-line {
  width: 22px;
  height: 0;
  border-top: 2px solid currentColor;
}
.legend-line-dashed { border-top-style: dashed; }

@media (max-width: 560px) {
  .legend-title { min-width: 100%; }
}
@media print {
  .graph-toolbar { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   海外版（英文页）
   ══════════════════════════════════════════════════════════════════ */

/* 语言专属区块：国内 ¥1/家的查询与购买只在中文页出现，批次额度的核验与定价只在英文页出现。
   用 CSS 而不是 JS 切：app.js 登录后会把 #query 的 hidden 去掉，那时 CSS 仍然兜得住。 */
html[lang="en"] [data-lang-only="zh"],
html:not([lang="en"]) [data-lang-only="en"] {
  display: none !important;
}

html[lang="en"] .report-fold > summary::after { content: "Show"; }
html[lang="en"] .report-fold[open] > summary::after { content: "Hide"; }

.roman {
  margin-left: 6px;
  font-size: 0.82em;
  font-style: italic;
  font-weight: 400;
  color: var(--text-soft);
}

/* ---- 供应商逐行识别 ---- */
.sc-rows { display: grid; gap: 12px; margin-top: 16px; }

.sc-row {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  background: var(--card-soft);
}
.sc-row.is-confirmed {
  border-color: color-mix(in srgb, var(--risk-green, #6f7a30) 45%, var(--line));
  background: color-mix(in srgb, var(--risk-green, #6f7a30) 6%, var(--card-soft));
}

.sc-row-inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px auto auto auto;
  gap: 8px;
  align-items: center;
}
.sc-row-inputs input[type="text"],
.sc-row-inputs input[type="number"] {
  width: 100%;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text);
  font: inherit;
}
.sc-file { position: relative; overflow: hidden; }
.sc-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

@media (max-width: 720px) {
  .sc-row-inputs { grid-template-columns: minmax(0, 1fr) 90px; }
  .sc-row-inputs > .btn-ghost,
  .sc-row-inputs > .btn-secondary,
  .sc-row-inputs > .sc-file { grid-column: span 1; }
}

.sc-row-status { margin: 10px 0 0; font-size: 0.86rem; color: var(--text-soft); }
.sc-row-status.is-error { color: var(--danger); }

.sc-candidates { display: grid; gap: 8px; margin-top: 10px; }
.sc-candidate {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg);
  cursor: pointer;
}
.sc-candidate:has(input:checked) {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 20%, transparent);
}
.sc-candidate input { margin-top: 4px; }
.sc-cand-name { font-weight: 600; }
.sc-cand-meta { font-size: 0.8rem; color: var(--text-soft); margin-top: 2px; }
.sc-cand-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

.sc-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.sc-submit { margin-top: 20px; display: grid; gap: 8px; justify-items: start; }

.sc-ask { margin-top: 16px; }
.sc-ask > summary { cursor: pointer; color: var(--brand); font-weight: 600; }
.sc-template {
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 0.86rem;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--card);
  border: 1px solid var(--line);
}

/* ---- 定价 ---- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.price-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px;
  background: var(--card-soft);
}
.price-card h3 { margin: 0 0 4px; }
.price { font-size: 1.8rem; font-weight: 700; margin: 0 0 6px; }

/* ---- 迁址等灰色参考信息（不是风险证据，刻意不用红色） ---- */
.dd-card.dd-info {
  border-color: var(--line);
  background: var(--card-soft);
}
.dd-tag.dd-tag-info {
  background: var(--risk-gray, #8a8a8e);
}