/* 详情弹框样式（深空版） */
.modal-root{position:fixed;inset:0;z-index:200;display:none}
.modal-root.open{display:block}

.modal-mask{
  position:absolute;inset:0;background:rgba(4,2,12,.72);
  backdrop-filter:blur(6px);
  animation:fadeIn .22s ease-out;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.modal{
  --accent-c: #7b4dff;
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(880px, calc(100vw - 40px));
  max-height:min(86vh, 980px);
  display:flex;flex-direction:column;
  background:linear-gradient(180deg, rgba(20,12,44,.985), rgba(14,8,34,.99));
  border:1px solid rgba(150,120,255,.34);
  border-radius:20px;
  box-shadow:0 40px 120px rgba(0,0,0,.72), 0 0 0 1px rgba(169,125,255,.14) inset;
  animation:popIn .26s cubic-bezier(.2,.9,.25,1);
  overflow:hidden;
}
.modal.wide{width:min(1160px, calc(100vw - 40px))}
@keyframes popIn{
  from{opacity:0;transform:translate(-50%,-46%) scale(.965)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}

/* 操作条 */
.modal-bar{
  display:flex;align-items:center;gap:8px;
  padding:11px 14px;flex:none;
  background:linear-gradient(90deg, rgba(123,77,255,.26), rgba(55,214,200,.12));
  border-bottom:1px solid var(--edge);
}
.modal-kind{
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#dfd4ff;font-weight:700;
}
.modal-spacer{flex:1}
.modal-act{
  height:30px;min-height:0;padding:0 12px;font-size:12.5px;
  border-radius:8px;border:1px solid rgba(255,222,150,.34);
  background:rgba(255,255,255,.07);color:#e8e2ff;
}
.modal-act:hover{background:rgba(123,77,255,.22);border-color:rgba(255,222,150,.62)}
/* 「分享」是主动作：紫渐变实心，和「复制」（次要灰框）明显区分
   原来两者同款灰框，用户看不出哪个是主按钮（实测被点名） */
#modal-share{
  background:linear-gradient(135deg,#7b4dff,#a855f7);
  border-color:transparent;color:#fff;font-weight:700;
  box-shadow:0 4px 14px rgba(123,77,255,.45);
  padding:0 16px;
}
#modal-share:hover{
  background:linear-gradient(135deg,#8a5cff,#b56bff);
  border-color:transparent;
  box-shadow:0 6px 20px rgba(123,77,255,.62);
}
#modal-share:active{transform:translateY(1px)}
/* 分享按钮前加一个小图标（纯 CSS 三角/箭头，不引资源） */
#modal-share::before{
  content:"↗";margin-right:5px;font-size:12.5px;opacity:.95;
}
.modal-x{
  width:30px;height:30px;min-height:0;padding:0;border-radius:8px;font-size:17px;
  border:1px solid rgba(255,222,150,.28);background:rgba(123,77,255,.14);color:#fff;
}
.modal-x:hover{background:rgba(255,90,90,.32);border-color:rgba(255,120,120,.6)}

/* 内容 */
.modal-scroll{overflow-y:auto;padding:22px 26px 26px;scrollbar-width:thin;
  scrollbar-color:rgba(150,120,255,.5) transparent}
.modal-scroll::-webkit-scrollbar{width:7px}
.modal-scroll::-webkit-scrollbar-thumb{background:rgba(150,120,255,.45);border-radius:99px}

.modal-head{border-bottom:1px solid var(--edge);padding-bottom:16px;margin-bottom:18px}
.modal-head h2{
  font-size:clamp(19px,2.4vw,26px);margin:0 0 12px;line-height:1.28;
  background:linear-gradient(96deg,#fff,#c9b3ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.modal-meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:12.5px;color:var(--ink-2)}
.modal-meta span{display:inline-flex;gap:6px;align-items:baseline}
.modal-meta em{font-style:normal;color:var(--ink-3);font-size:11.5px}
.modal-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.modal-tags span{
  font-size:11.5px;padding:3px 10px;border-radius:999px;
  background:rgba(123,77,255,.18);border:1px solid var(--edge-2);color:#cfc3f5;
}

.modal,.modal *{
  /* 弹框内符号必须有符号字体兜底，否则 ♊ 这类码位显示成白方块（实测） */
  font-family:var(--font), "Segoe UI Symbol","Noto Sans Symbols 2","Noto Sans Symbols","DejaVu Sans",sans-serif;
}
.modal-body{font-size:14.5px;line-height:1.82;color:var(--ink-2)}
.modal-body h3{
  font-size:16px;color:var(--ink);margin:22px 0 9px;
  padding-left:10px;border-left:3px solid var(--accent-c);
}
.modal-body h3:first-child{margin-top:0}
.modal-body p{margin:0 0 11px}
.modal-body b,.modal-body strong{color:var(--ink)}
.modal-body ul{margin:0 0 12px;padding-left:20px}
.modal-body li{margin-bottom:6px}
.modal-body .kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:9px;margin:12px 0}
.modal-body .kv div{background:rgba(30,20,62,.6);border:1px solid var(--edge);
  border-radius:11px;padding:9px 11px;font-size:12.5px}
.modal-body .kv b{display:block;font-size:15px;color:var(--accent-c);font-weight:700}
.modal-body .basis{margin-top:10px;padding-top:10px;border-top:0;
  font-size:12px;color:var(--ink-3)}
.modal-body .big-score{
  display:flex;align-items:baseline;gap:10px;margin:4px 0 14px;
}
.modal-body .big-score em{font-style:normal;font-size:44px;font-weight:800;line-height:1;
  color:var(--accent-c)}
.modal-body .big-score span{font-size:13px;color:var(--ink-3)}
.modal-body .bar{height:7px;border-radius:99px;background:rgba(123,77,255,.18);
  overflow:hidden;margin:8px 0 14px}
.modal-body .bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--accent-c),#37d6c8)}

/* 弹窗打开时锁住整页滚动：本站滚动发生在 .screen（overflow-y:auto）上，
   只锁 body 无效 —— 在弹窗里滚一下，背后的分屏会跟着滚（实测） */
body.modal-open{overflow:hidden}
body.modal-open .screen{overflow:hidden !important}
body.modal-open #stage{overflow:hidden}

@media(max-width:700px){
  .modal{width:calc(100vw - 20px);max-height:90vh;border-radius:15px}
  .modal-scroll{padding:16px 15px 20px}
  .modal-bar{padding:9px 10px;gap:6px}
  .modal-act{padding:0 9px;font-size:11.5px}
}

/* ───────── 星座符号（维度徽标）─────────
   原来绝对定位 right:12px/top:11px，正好压在右上角的分数上（实测「65分」被图标遮住）。
   改为随标题行进流排布：图标 + 维度名，分数独占右侧，互不重叠。 */
.sign-badge{
  flex:none;
  width:22px;height:22px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;line-height:1;
  background:rgba(123,77,255,.16);border:1px solid var(--edge-2);
  color:#cbb9ff;pointer-events:none;
  margin-right:2px;
}
.dimcard{position:relative}
.dimcard .sign-badge{opacity:.95}
/* 维度名过长时压缩名字，不挤分数 */
.dimhead .dimname{min-width:0}
.dimhead .dimname{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.dimhead .dimscore{flex:none;white-space:nowrap}

/* 可点提示 */
.dimcard[data-clickable="1"],.signtile,.tl-row[data-clickable="1"]{cursor:pointer}
.dimcard[data-clickable="1"]:hover{
  border-color:var(--edge-2);
  box-shadow:0 10px 26px rgba(123,77,255,.22);
}
.dimcard[data-clickable="1"]:after{
  content:"点击查看详情";position:absolute;right:12px;bottom:9px;
  font-size:10.5px;color:var(--ink-3);opacity:0;transition:.16s;
}
.dimcard[data-clickable="1"]:hover:after{opacity:1}
/* 「已按 MBTI 加权」说明标记（不是按钮，故无 hover 手型） */
.adj-note{
  font-size:10.5px;color:#b79bff;font-weight:600;
  border:1px solid rgba(150,120,255,.45);border-radius:999px;
  padding:1px 7px;vertical-align:middle;cursor:help;
  background:rgba(123,77,255,.12);white-space:nowrap;
}