/* ───────── MBTI 交互面板 + 雷达图样式 ───────── */

.panel-bridge{
  font-size:13px;color:#d2c9e8;line-height:1.75;
  background:rgba(55,214,200,.09);
  border:1px solid rgba(55,179,164,.34);border-radius:12px;
  padding:11px 14px;margin-bottom:16px;
}
.panel-bridge b{color:#7ef0dd}

.mbti-panel{
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.mbti-panel:before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,#6d4aff,#a97dff 55%,#37b3a4);
}
.mbti-eyebrow{
  font-size:11.5px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;margin-bottom:6px;
}
/* 结论：四个大字，字母本身可点 */
.mbti-big{
  display:flex;gap:6px;margin:2px 0 8px;user-select:none;
}
.mbti-big .lt{
  font-size:clamp(44px,7vw,62px);font-weight:800;line-height:1;letter-spacing:-.02em;
  /* 兜底顺序：先给实色，再用渐变裁切。若裁切失效仍能看见字（实测有环境算出 rgba(0,0,0,0)） */
  color:#dcd0ff;
  background-image:linear-gradient(160deg,#ffffff 6%,#c9b3ff 52%,#8f6bff 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  cursor:pointer;padding:2px 6px;border-radius:10px;transition:transform .16s;
}
.mbti-big .lt:hover{
  transform:translateY(-3px) scale(1.06);
  background:linear-gradient(160deg,#6d4aff,#37b3a4);
  -webkit-background-clip:text;background-clip:text;
}
.mbti-big .lt.on{
  background-image:linear-gradient(160deg,#ffb0b0,#ff5a5a 60%,#ff8181);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  box-shadow:0 0 0 2px rgba(255,90,90,.22) inset;
}
.mbti-big .lt.on:after{
  content:"";position:absolute;
}
.mbti-nick{
  font-size:15px;font-weight:700;color:var(--purple-deep);margin-bottom:6px;
}
.mbti-core{
  /* 深空版：原来是浅底(#f6f2ff)+浅字(--ink2=#c5bce0)，导致看不清。
     统一改深底玻璃卡 + 浅字（实测白底上浅紫字几乎读不出） */
  font-size:14px;color:#dcd4f2;line-height:1.75;
  padding:11px 14px;border-radius:12px;
  background:rgba(123,77,255,.12);
  border:1px solid var(--edge-2);margin-bottom:16px;
}

.mbti-axes{margin-top:2px}
.axis-row{
  margin-bottom:11px;cursor:pointer;padding:7px 9px;border-radius:11px;
  border:1px solid transparent;transition:.14s;
}
.axis-row:hover{background:rgba(123,77,255,.14);border-color:var(--edge-2)}
.axis-row.on{background:rgba(226,58,58,.12);border-color:rgba(255,120,120,.5);box-shadow:0 0 0 2px rgba(226,58,58,.12) inset}
.axis-top{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;margin-bottom:5px}
.axis-name{font-weight:700;color:var(--purple-deep)}
.axis-name em{font-style:normal;color:#e23a3a;margin-left:4px}
.axis-pct{color:var(--muted);font-size:11.5px}
.axis-bar{display:flex;height:9px;border-radius:999px;overflow:hidden;background:rgba(123,77,255,.20)}
.axis-bar i:first-child{background:linear-gradient(90deg,#8f6bff,#6d4aff)}
.axis-bar i:last-child{background:rgba(123,77,255,.20);flex:1}
.axis-row.on .axis-bar i:first-child{background:linear-gradient(90deg,#ff8080,#e23a3a)}
.axis-ends{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);margin-top:3px}

.mbti-detail{
  margin-top:12px;padding:13px 15px;border-radius:12px;
  background:rgba(10,6,32,.62);border:1px dashed var(--edge-2);
  font-size:13px;color:#d2c9e8;line-height:1.75;
  min-height:66px;
}
.mbti-detail b{color:#e8e2ff;font-weight:700}
.mbti-detail .k{color:#ff9b9b;font-weight:800}
.mbti-detail-hint{color:#9a90b8;font-size:12.5px}

.mbti-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.mbti-chips .chip{
  font-size:11.5px;padding:4px 10px;border-radius:999px;background:rgba(123,77,255,.16);
  border:1px solid var(--line2);color:var(--purple-deep);
}

/* 雷达 */
.radar-box{position:relative;max-width:460px;margin:0 auto}
.radar-box svg{width:100%;height:auto;display:block}
.radar-box .rd-node{cursor:pointer}
.radar-box .rd-node:hover text{fill:#e23a3a}
.radar-box .rd-node:hover rect{fill:rgba(226,58,58,.06)}
.radar-legend{
  display:flex;gap:14px;flex-wrap:wrap;justify-content:center;
  font-size:11.5px;color:var(--muted);margin-top:4px;
}
.radar-legend span{display:inline-flex;align-items:center;gap:5px}
.sw{width:14px;height:3px;border-radius:2px;display:inline-block}
.sw-red{background:#e23a3a}
.sw-teal{background:linear-gradient(90deg,#0f6b70,#8fd9c4);height:9px;border-radius:3px}
.sw-dash{background:repeating-linear-gradient(90deg,#0f6b70 0 4px,transparent 4px 8px)}
.radar-tip{
  text-align:center;font-size:11.5px;color:var(--muted);margin-top:6px;min-height:16px;
}
.radar-tip.hit{color:#e23a3a;font-weight:600}

@media(max-width:620px){
  .mbti-big .lt{font-size:42px;padding:2px 4px}
  .mbti-panel{padding:16px}
  .radar-box{max-width:330px}
}