/* ==========================================================================
   KKmatch · AI Relationship Intelligence — 页面样式
   --------------------------------------------------------------------------
   命名空间说明
   ------------
   本文件里**所有**选择器都以 `.rel-` 开头（或作用在 `#rel*` 容器内）。
   为什么强制命名空间：
     站点已有的 `kkos.css` / `kk-cards.css` / `mirror-render.css` 是被多个
     线上页面共享的。任何"顺手加一条通用规则"（比如裸 `button{}`）都会
     改到别人的页面 —— 本轮约束明确要求 **KKOS 模块与首页 UI 不动**，
     所以这里不碰任何共享文件，只新增一份自己的。
   主题
   ----
   取值与 mirror.html 页族保持一致（同一个产品，同一套暗色令牌）。
   本文件只**读取**这些变量，不覆盖 `:root` 里已有的同名变量。
   ========================================================================== */

.rel-root{
  --rel-bg:#0b0e17;
  --rel-panel:#141a2b;
  --rel-panel2:#1b2236;
  --rel-line:#26304a;
  --rel-txt:#e8ecf6;
  --rel-muted:#9aa6c2;
  --rel-vio:#8b5cf6;
  --rel-pink:#ec4899;
  --rel-grn:#34d399;
  --rel-amber:#fbbf24;
  --rel-red:#f87171;
  --rel-radius:14px;
  background:var(--rel-bg);
  color:var(--rel-txt);
  min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.rel-root *{box-sizing:border-box}
.rel-wrap{max-width:1040px;margin:0 auto;padding:22px 18px 90px}

/* ---------- 顶部导航（独立一份，不改 index.html 的 .nav） ---------- */
.rel-nav{position:sticky;top:0;z-index:60;background:rgba(11,14,23,.82);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--rel-line)}
.rel-nav-in{max-width:1040px;margin:0 auto;padding:12px 18px;display:flex;
  align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.rel-brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15.5px;
  letter-spacing:.2px;text-decoration:none;color:var(--rel-txt)}
.rel-brand-dot{width:24px;height:24px;border-radius:8px;
  background:linear-gradient(135deg,var(--rel-vio),var(--rel-pink));
  box-shadow:0 4px 14px rgba(139,92,246,.42)}
.rel-nav-links{display:flex;gap:20px;font-size:13.5px;color:var(--rel-muted);flex-wrap:wrap}
.rel-nav-links a{color:inherit;text-decoration:none;transition:color .18s}
.rel-nav-links a:hover{color:var(--rel-txt)}
.rel-nav-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  justify-content:flex-end;min-width:0}
.rel-lang{display:flex;padding:3px;border-radius:9px;border:1px solid var(--rel-line);
  background:var(--rel-panel);gap:2px}
.rel-lang button{border:0;background:transparent;color:var(--rel-muted);
  font:inherit;font-size:12px;font-weight:600;padding:4px 9px;border-radius:7px;cursor:pointer}
.rel-lang button.on{background:linear-gradient(135deg,var(--rel-vio),var(--rel-pink));color:#fff}
/* 身份标签可能是一个很长的邮箱 —— 必须允许收缩 + 截断。
   ⚠️ text-overflow 对 inline 元素**无效**，所以这里必须给 inline-block。
   实测：加了「Signed in as」标签之后，390px 下导航栏溢出 25px。 */
.rel-who{font-size:12.5px;color:var(--rel-muted);display:inline-block;
  vertical-align:middle;max-width:180px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}

/* ---------- 通用 ---------- */
.rel-h1{font-size:34px;line-height:1.22;margin:0 0 12px;letter-spacing:-.4px}
.rel-h2{font-size:21px;margin:0 0 10px;letter-spacing:-.2px}
.rel-h3{font-size:16px;margin:0 0 6px}
.rel-lead{color:var(--rel-muted);font-size:16.5px;margin:0 0 18px}
.rel-muted{color:var(--rel-muted)}
.rel-small{font-size:12.5px;line-height:1.6}
.rel-hide{display:none !important}
.rel-card{background:var(--rel-panel);border:1px solid var(--rel-line);
  border-radius:var(--rel-radius);padding:18px 20px;margin:14px 0}
.rel-panel2{background:var(--rel-panel2)}
.rel-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.rel-sp{flex:1}
.rel-btn{cursor:pointer;border:0;border-radius:12px;padding:12px 20px;font-weight:650;
  font-size:15px;font-family:inherit;
  background:linear-gradient(90deg,var(--rel-vio),var(--rel-pink));color:#fff;
  transition:opacity .18s,transform .18s}
.rel-btn:hover{opacity:.93}
.rel-btn:disabled{opacity:.45;cursor:not-allowed}
.rel-btn-sm{padding:8px 14px;font-size:13px;border-radius:10px}
.rel-btn-ghost{background:transparent;border:1px solid var(--rel-line);color:var(--rel-txt)}
.rel-btn-quiet{background:var(--rel-panel2);border:1px solid var(--rel-line);color:var(--rel-txt)}
.rel-input,.rel-select{width:100%;background:#0e1320;border:1px solid var(--rel-line);
  border-radius:10px;color:var(--rel-txt);padding:11px 13px;font:inherit;font-size:14.5px}
.rel-input:focus,.rel-select:focus{outline:0;border-color:var(--rel-vio)}
.rel-label{display:block;font-size:12.5px;color:var(--rel-muted);margin:0 0 6px;
  letter-spacing:.02em}
.rel-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:720px){.rel-grid2{grid-template-columns:1fr}.rel-h1{font-size:27px}
  .rel-who{max-width:104px}.rel-nav-links{gap:13px;font-size:13px}}

/* ---------- 徽标 ---------- */
.rel-badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;
  padding:3px 9px;border-radius:999px;border:1px solid var(--rel-line);
  background:var(--rel-panel2);color:var(--rel-muted);letter-spacing:.03em}
.rel-badge-real{color:var(--rel-grn);border-color:rgba(52,211,153,.4)}
.rel-badge-partial{color:var(--rel-amber);border-color:rgba(251,191,36,.4)}
.rel-badge-mock{color:var(--rel-amber);border-color:rgba(251,191,36,.4);
  background:rgba(251,191,36,.09)}
.rel-badge-unavailable{color:var(--rel-red);border-color:rgba(248,113,113,.4)}

/* 维度状态：只改文字与左侧色条，**不做进度条**（进度条会暗示这是个分数） */
.rel-dim{background:var(--rel-panel);border:1px solid var(--rel-line);
  border-left:3px solid var(--rel-line);border-radius:var(--rel-radius);
  padding:15px 17px;margin:11px 0}
.rel-dim-strong{border-left-color:var(--rel-grn)}
.rel-dim-mixed{border-left-color:var(--rel-amber)}
.rel-dim-needs_attention{border-left-color:var(--rel-red)}
.rel-dim-emerging{border-left-color:var(--rel-vio)}
.rel-dim-unclear{border-left-color:#4b5570}
.rel-dim-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rel-dim-name{font-weight:700;font-size:16px}
.rel-dim-q{font-size:12.5px;color:var(--rel-muted);font-style:italic}
.rel-dim-sum{margin:9px 0 0;font-size:14.8px}
.rel-dim-conf{font-size:12px;color:var(--rel-muted)}

/* 证据：用 chips 表示，明确标注为「证据条数」，不是分数 */
.rel-chips{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 0}
.rel-chip{font-size:11.5px;padding:3px 9px;border-radius:999px;border:1px solid var(--rel-line);
  background:#0e1320;color:var(--rel-muted);max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.rel-chip-up{color:var(--rel-grn);border-color:rgba(52,211,153,.32)}
.rel-chip-down{color:var(--rel-amber);border-color:rgba(251,191,36,.32)}
.rel-chips-note{font-size:11.5px;color:var(--rel-muted);margin:7px 0 0}

/* ---------- 红线声明条 ---------- */
.rel-redline{border:1px solid rgba(139,92,246,.42);background:rgba(139,92,246,.09);
  border-radius:var(--rel-radius);padding:13px 16px;margin:14px 0;
  font-size:13.2px;color:var(--rel-txt)}
.rel-redline b{color:#c4b5fd}

/* ---------- 动态八维图谱与东西方联合总结 ---------- */
.rel-map-card{overflow:hidden;background:
  radial-gradient(circle at 82% 5%,rgba(125,211,252,.09),transparent 28%),
  radial-gradient(circle at 15% 100%,rgba(139,92,246,.12),transparent 34%),var(--rel-panel)}
.rel-map-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.rel-map-head .rel-h3{font-size:19px;margin:2px 0 4px}
.rel-coverage{flex:0 0 auto;min-width:112px;text-align:right;padding:8px 10px}
.rel-coverage strong{font-size:34px;line-height:1;color:#c4b5fd;letter-spacing:-1px}
.rel-coverage span{font-size:13px;color:var(--rel-muted)}
.rel-coverage small{display:block;font-size:10.5px;color:var(--rel-muted);text-transform:uppercase;
  letter-spacing:.08em;margin-top:4px}
.rel-radar{max-width:680px;margin:4px auto -8px}
.rel-radar svg{width:100%;height:auto;display:block;overflow:visible}
.rel-radar-ring,.rel-radar-axis{fill:none;stroke:rgba(154,166,194,.27);stroke-width:1}
.rel-radar-data{fill:url(#relRadarFill);fill-opacity:.24;stroke:#a78bfa;stroke-width:3;
  stroke-linejoin:round;filter:drop-shadow(0 8px 18px rgba(139,92,246,.22))}
.rel-radar-dot{fill:#fff;stroke:#8b5cf6;stroke-width:3}
.rel-radar-label{fill:var(--rel-muted);font-size:12px;font-weight:600}
.rel-score-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:10px 0 14px}
.rel-score-card{border:1px solid var(--rel-line);background:rgba(14,19,32,.74);border-radius:12px;
  padding:11px 12px;min-width:0}
.rel-score-card span{display:block;color:var(--rel-muted);font-size:11.5px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.rel-score-card strong{display:block;font-size:23px;line-height:1.2;color:var(--rel-txt);margin:4px 0 1px}
.rel-score-card small{display:block;color:var(--rel-muted);font-size:10.5px}
.rel-synthesis-card{border-color:rgba(125,211,252,.26);background:
  linear-gradient(135deg,rgba(125,211,252,.06),rgba(139,92,246,.08)),var(--rel-panel)}
.rel-synthesis-summary{font-size:16px;line-height:1.7;margin:12px 0 16px;max-width:820px}
.rel-synthesis-line{display:grid;grid-template-columns:180px 1fr;gap:14px;padding:8px 0;
  border-top:1px solid var(--rel-line);font-size:13.5px}
.rel-synthesis-line b{color:var(--rel-muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.rel-source-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.rel-source-grid>div{display:flex;align-items:center;gap:9px;border:1px solid var(--rel-line);
  border-radius:11px;background:rgba(14,19,32,.72);padding:10px 12px}
.rel-source-grid small{color:var(--rel-muted);margin-left:auto}
.rel-v2-card{border-color:rgba(167,139,250,.3);background:
  linear-gradient(145deg,rgba(125,211,252,.055),rgba(139,92,246,.09)),var(--rel-panel)}
.rel-v2-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.rel-v2-group{border:1px solid var(--rel-line);border-radius:13px;padding:13px;background:rgba(14,19,32,.68)}
.rel-v2-group h4{margin:0 0 9px;font-size:13px;color:#c4b5fd;letter-spacing:.04em}
.rel-v2-item{padding:8px 0;border-top:1px solid rgba(154,166,194,.14)}
.rel-v2-item:first-of-type{border-top:0;padding-top:0}.rel-v2-item strong{display:block;font-size:14px}
.rel-v2-item p{margin:3px 0 0;color:var(--rel-muted);font-size:12.5px;line-height:1.55}
.rel-v2-evidence{display:inline-block;margin-top:5px;font-size:10.5px;color:#7dd3fc}
.rel-v2-empty{font-size:12.5px;color:var(--rel-muted);margin:0}
.rel-v2-uncertainty{margin-top:12px;padding-top:11px;border-top:1px solid var(--rel-line);font-size:12px;color:var(--rel-muted)}
@media (max-width:720px){
  .rel-map-head{align-items:center}.rel-coverage{min-width:88px}.rel-coverage strong{font-size:28px}
  .rel-radar{margin:0 -8px}.rel-radar-label{font-size:10px}
  .rel-score-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rel-synthesis-line{grid-template-columns:1fr;gap:3px}.rel-source-grid{grid-template-columns:1fr}
  .rel-v2-grid{grid-template-columns:1fr}
}

/* ---------- 反馈（Yes / Partly / No） ---------- */
.rel-fb{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:11px 0 0}
.rel-fb button{border:1px solid var(--rel-line);background:#0e1320;color:var(--rel-muted);
  font:inherit;font-size:12.5px;padding:5px 12px;border-radius:9px;cursor:pointer}
.rel-fb button:hover{color:var(--rel-txt)}
.rel-fb button.pick{color:#fff;background:linear-gradient(135deg,var(--rel-vio),var(--rel-pink));
  border-color:transparent}

/* ---------- Four Perspectives ---------- */
.rel-tabs{display:flex;gap:7px;flex-wrap:wrap;margin:4px 0 14px}
.rel-tab{border:1px solid var(--rel-line);background:var(--rel-panel);color:var(--rel-muted);
  font:inherit;font-size:13.5px;font-weight:600;padding:8px 15px;border-radius:10px;cursor:pointer}
.rel-tab.on{color:var(--rel-txt);border-color:var(--rel-vio);background:rgba(139,92,246,.14)}
.rel-pane{display:none}
.rel-pane.on{display:block}

/* ---------- 六段式回答 ---------- */
.rel-ans-sec{border-top:1px solid var(--rel-line);padding:12px 0}
.rel-ans-sec:first-child{border-top:0;padding-top:0}
.rel-ans-key{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--rel-muted);margin:0 0 5px;font-weight:700}
.rel-ans-val{font-size:14.8px;margin:0}
.rel-ans-list{margin:0;padding-left:19px;font-size:14.5px}
.rel-ans-list li{margin:3px 0}

/* ---------- 分享卡 ---------- */
.rel-share-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
@media (max-width:820px){.rel-share-wrap{grid-template-columns:1fr}}
#relShareCanvas{width:100%;max-width:420px;height:auto;border-radius:var(--rel-radius);
  border:1px solid var(--rel-line);display:block;background:#0e1320}

/* ---------- 时间线 ---------- */
.rel-tl{margin:6px 0 0;padding:0;list-style:none}
.rel-tl li{border-left:2px solid var(--rel-line);padding:0 0 13px 15px;position:relative}
.rel-tl li::before{content:'';position:absolute;left:-5px;top:6px;width:8px;height:8px;
  border-radius:50%;background:var(--rel-vio)}
.rel-tl .t{font-size:11.5px;color:var(--rel-muted)}
.rel-tl .v{font-size:14.2px}

/* ---------- 提示 ---------- */
.rel-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  background:var(--rel-panel2);border:1px solid var(--rel-line);color:var(--rel-txt);
  padding:11px 18px;border-radius:12px;font-size:13.5px;z-index:200;opacity:0;
  pointer-events:none;transition:opacity .22s;max-width:88vw}
.rel-toast.on{opacity:1}
.rel-err{color:var(--rel-red);font-size:13px;margin-top:8px}
.rel-spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.28);
  border-top-color:#fff;border-radius:50%;animation:relspin .8s linear infinite;vertical-align:-2px}
@keyframes relspin{to{transform:rotate(360deg)}}
.rel-steps{margin:10px 0 0;padding:0;list-style:none;font-size:14px;color:var(--rel-muted)}
.rel-steps li{margin:5px 0}
.rel-steps li.on{color:var(--rel-txt)}
.rel-steps li.ok{color:var(--rel-grn)}
.rel-foot{margin-top:44px;padding-top:18px;border-top:1px solid var(--rel-line);
  color:var(--rel-muted);font-size:12.5px}
.rel-foot a{color:var(--rel-muted);margin-right:13px}
.rel-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}