/* ───────── 人格屏（五合一子标签） ───────── */
.persona-tabs{
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
  margin:0 auto 18px;max-width:820px;
}
.pt-tab{
  appearance:none;cursor:pointer;font-family:inherit;
  font-size:13px;font-weight:600;
  padding:9px 22px;border-radius:999px;
  color:#b9abd8;background:rgba(22,14,48,.62);
  border:1px solid rgba(150,120,255,.28);
  transition:.2s;white-space:nowrap;
  /* 每个子标签也是一小块星空 */
  background-image:
    radial-gradient(circle .9px at 24% 32%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(circle .7px at 70% 68%, rgba(201,182,255,.42) 0%, transparent 100%);
}
.pt-tab:hover{
  color:#fff;background-color:rgba(123,77,255,.3);
  border-color:rgba(150,120,255,.55);
}
.pt-tab.on{
  color:#fff;
  background-image:
    radial-gradient(circle .9px at 22% 34%, rgba(255,255,255,.7) 0%, transparent 100%),
    linear-gradient(135deg,#7b4dff,#a855f7);
  border-color:transparent;
  box-shadow:0 6px 20px rgba(123,77,255,.5);
  font-weight:700;
}
.persona-panel{display:none}
.persona-panel.on{display:block}

/* ── 人格屏：五套体系一页排满，不用子标签切换 ──
   用户要求「全部一页排满，内容不要分不同 tag」。
   改成两列网格，五块内容并排展开，滚动一次看完。
   子标签栏保留但隐藏（切换逻辑照旧，不影响旧代码取节点）。 */
#s-persona .persona-tabs{display:none}
#s-persona .persona-panel{display:block !important}
#s-persona .persona-panel + .persona-panel{margin-top:18px}
/* MBTI 块占满整行（内容最多），其余四块走两列 */
#s-persona .persona-panel[data-ppanel="mbti"]{grid-column:1 / -1}

/* ── 人格彩色框 + 标题栏 + 分享 ── */
.pcard{
  padding:18px 20px;border-radius:16px;
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb,var(--pc) 12%,transparent), transparent 46%),
    linear-gradient(165deg, rgba(20,12,44,.82), rgba(11,6,26,.88));
  border:1px solid color-mix(in srgb,var(--pc) 40%,transparent);
  box-shadow:
    0 12px 40px rgba(0,0,0,.42),
    inset 0 0 0 1px color-mix(in srgb,var(--pc) 12%,transparent);
  position:relative;overflow:hidden;
}
/* 框内星点 */
.pcard::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(circle 1px at 16% 20%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(circle .8px at 72% 44%, color-mix(in srgb,var(--pc) 70%,#fff) 0%, transparent 100%),
    radial-gradient(circle .9px at 38% 76%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(circle .8px at 88% 22%, rgba(180,220,255,.45) 0%, transparent 100%);
}
.pc-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:14px;padding-bottom:12px;
  border-bottom:1px solid color-mix(in srgb,var(--pc) 24%,transparent);
  position:relative;
}
.pc-title{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0}
.pc-dot{
  width:8px;height:8px;border-radius:50%;flex:none;
  background:var(--pc);
  box-shadow:0 0 10px color-mix(in srgb,var(--pc) 85%,transparent);
  animation:pcDot 2.4s ease-in-out infinite;
}
@keyframes pcDot{0%,100%{opacity:.55;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
.pc-title b{font-size:16.5px;font-weight:800;color:#f0e9ff;letter-spacing:.01em}
.pc-desc{font-size:11.5px;color:var(--ink-3);line-height:1.6}
.pc-share{
  appearance:none;cursor:pointer;flex:none;
  font-family:inherit;font-size:12px;font-weight:700;
  padding:7px 18px;border-radius:999px;color:#fff;
  background:linear-gradient(135deg, color-mix(in srgb,var(--pc) 70%,#0000), var(--pc));
  border:0;
  box-shadow:0 5px 16px color-mix(in srgb,var(--pc) 45%,transparent);
  transition:.18s;
}
.pc-share:hover{transform:translateY(-1px);box-shadow:0 8px 22px color-mix(in srgb,var(--pc) 60%,transparent)}
/* 无盘时的输入引导 */
.pc-empty{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:12px;padding:13px 16px;border-radius:12px;
  background:color-mix(in srgb,var(--pc) 10%,transparent);
  border:1px dashed color-mix(in srgb,var(--pc) 42%,transparent);
  font-size:12.5px;color:var(--ink-2);
}
.pc-input{
  appearance:none;cursor:pointer;flex:none;
  font-family:inherit;font-size:12.5px;font-weight:700;
  padding:9px 20px;border-radius:999px;color:#fff;
  background:linear-gradient(135deg,#7b4dff,#a855f7);
  border:0;box-shadow:0 5px 16px rgba(123,77,255,.45);
  transition:.18s;
}
.pc-input:hover{transform:translateY(-1px)}
@media (max-width:640px){ .pc-head{flex-direction:column} .pc-share{width:100%} }

/* ── 未排盘时的人格介绍卡 ── */
.pc-intro p{font-size:13px;line-height:1.9;color:var(--ink-2);margin:0 0 10px}
.pc-intro p b{color:#e0d4ff}
.pc-intro .pi-note{
  font-size:12px;color:var(--ink-3);margin-top:10px;padding-top:9px;
  border-top:1px dashed rgba(150,120,255,.2);
}
/* 整屏共用的输入入口 */
.persona-global{
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  margin:20px auto 4px;padding:18px 22px;max-width:720px;border-radius:14px;
  background:linear-gradient(120deg,rgba(123,77,255,.16),rgba(94,200,255,.08));
  border:1px solid rgba(150,120,255,.38);
}
.pg-txt{font-size:13px;line-height:1.7;color:#c4b8e4}
.pg-btn{
  appearance:none;cursor:pointer;flex:none;font-family:inherit;
  font-size:13.5px;font-weight:700;padding:11px 26px;border-radius:999px;color:#fff;
  background:linear-gradient(135deg,#7b4dff,#a855f7);border:0;
  box-shadow:0 6px 20px rgba(123,77,255,.45);transition:.18s;
}
.pg-btn:hover{transform:translateY(-1px);box-shadow:0 9px 26px rgba(123,77,255,.6)}
@media (max-width:640px){ .persona-global{flex-direction:column;text-align:center} }

/* ── 星盘标题旁的「切换命盘」按钮 ── */
.switch-chart-btn{
  appearance:none;cursor:pointer;flex:none;
  display:inline-flex;align-items:center;gap:5px;
  margin-left:auto;
  font-family:inherit;font-size:12px;font-weight:700;
  padding:6px 14px;border-radius:999px;color:#c9b6ff;
  background:rgba(123,77,255,.16);
  border:1px solid rgba(150,120,255,.42);
  transition:.18s;
}
.switch-chart-btn:hover{
  color:#fff;background:rgba(123,77,255,.4);
  border-color:rgba(169,125,255,.8);
  box-shadow:0 0 14px rgba(123,77,255,.45);
}

/* ── MBTI 左右两栏 ── */
.mbti-split{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:16px;align-items:start;
}
@media (max-width:980px){ .mbti-split{grid-template-columns:1fr} }

/* ───────── 人格屏顶部引导卡（星空玻璃 + 霓虹按钮） ───────── */
.ph-card{
  position:relative;overflow:hidden;
  max-width:760px;margin:6px auto 22px;
  padding:34px 30px 30px;border-radius:20px;
  text-align:center;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(123,77,255,.26), transparent 70%),
    linear-gradient(165deg, rgba(28,17,60,.92), rgba(12,7,30,.95));
  border:1px solid rgba(169,125,255,.42);
  box-shadow:
    0 20px 60px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.07),
    0 0 0 1px rgba(123,77,255,.10) inset;
  backdrop-filter:blur(18px) saturate(1.2);
}
/* 顶部一圈霓虹光晕 */
.ph-glow{
  position:absolute;left:50%;top:-70px;transform:translateX(-50%);
  width:340px;height:200px;pointer-events:none;
  background:radial-gradient(ellipse, rgba(168,85,247,.5), transparent 68%);
  filter:blur(28px);
  animation:phGlow 5s ease-in-out infinite;
}
@keyframes phGlow{0%,100%{opacity:.55}50%{opacity:.95}}
/* 内嵌星点 */
.ph-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background-image:
    radial-gradient(circle 1.1px at 14% 22%, rgba(255,255,255,.7) 0%, transparent 100%),
    radial-gradient(circle .9px at 82% 30%, rgba(201,182,255,.65) 0%, transparent 100%),
    radial-gradient(circle 1px at 36% 78%, rgba(255,255,255,.55) 0%, transparent 100%),
    radial-gradient(circle .9px at 68% 84%, rgba(180,220,255,.5) 0%, transparent 100%),
    radial-gradient(circle 1px at 92% 62%, rgba(255,255,255,.5) 0%, transparent 100%);
}
/* 星芒图标：圆形 + 霓虹外发光 */
.ph-ico{
  width:56px;height:56px;margin:0 auto 16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle, rgba(168,85,247,.42), rgba(123,77,255,.10) 70%);
  border:1px solid rgba(201,160,255,.6);
  box-shadow:
    0 0 26px rgba(168,85,247,.7),
    0 0 60px rgba(123,77,255,.4),
    inset 0 0 18px rgba(201,160,255,.28);
  position:relative;
}
.ph-ico span{
  font-size:24px;color:#f0e9ff;line-height:1;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.9));
  animation:phStar 3s ease-in-out infinite;
}
@keyframes phStar{0%,100%{opacity:.75;transform:scale(.94) rotate(0)}50%{opacity:1;transform:scale(1.08) rotate(12deg)}}
.ph-title{
  font-size:22px;font-weight:800;color:#ffffff;margin:0 0 10px;
  letter-spacing:.01em;line-height:1.4;position:relative;
}
.ph-sub{
  font-size:13.5px;line-height:1.85;color:#b9abd8;
  margin:0 auto 18px;max-width:560px;position:relative;
}
.ph-points{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  margin-bottom:22px;position:relative;
}
.ph-points span{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;color:#c4b8e4;
  padding:6px 13px;border-radius:999px;
  background:rgba(123,77,255,.13);
  border:1px solid rgba(150,120,255,.28);
}
.ph-points i{
  font-style:normal;font-size:10px;font-weight:800;
  color:#c9a0ff;
}
/* 主按钮：霓虹渐变 + 外发光 */
.ph-btn{
  appearance:none;cursor:pointer;position:relative;
  display:inline-flex;align-items:center;gap:8px;
  font-family:inherit;font-size:15px;font-weight:800;color:#fff;
  padding:14px 38px;border-radius:999px;border:0;
  background:linear-gradient(135deg,#8b5cf6,#a855f7 55%,#c026d3);
  box-shadow:
    0 10px 34px rgba(139,92,246,.62),
    0 0 0 1px rgba(201,160,255,.35) inset;
  transition:transform .2s ease, box-shadow .2s ease;
}
.ph-btn em{font-style:normal;font-size:16px;transform:translateY(-1px)}
.ph-btn:hover{
  /* 只提亮阴影，不位移（人格区禁止面积变化） */
  transform:none;
  box-shadow:
    0 16px 46px rgba(139,92,246,.82),
    0 0 0 1px rgba(220,200,255,.55) inset;
}
@media (max-width:640px){
  .ph-card{padding:26px 18px 22px;margin:4px auto 18px}
  .ph-title{font-size:18px}
  .ph-btn{width:100%;justify-content:center}
}


/* ═══════════════════════════════════════════════════════
   人格区：悬停只变背景，不改面积 / 不位移
   ───────────────────────────────────────────────────────
   问题（用户原话「鼠标移过去，面积放大了，只需要背景变化，不需要改变面积」）：
     · .persona-panel 用了 transition:all
     · .ph-card 也用了 transition:all
     transition:all 会把 transform / height / padding 等一切属性一起过渡，
     内部按钮 .ph-btn:hover 的 translateY(-2px) 会带动整块视觉位移，
     看起来就是「面积变大」。
     · .ph-glow 是 absolute + top:-70px + height:200px，
       hover 时它会参与卡片视觉边界，让卡片显得向上长高。

   本段做法：
     1. 所有人格卡片 transition 收窄到只过渡「颜色 / 阴影」，
        明确排除 transform、height、padding、margin、width。
     2. hover 只改背景（叠一层星云光）与边框亮度，绝不位移、绝不改尺寸。
     3. .ph-btn 保留自身悬停位移（按钮是独立元件），
        但通过 isolation 让它不影响父卡片感知。
   ═══════════════════════════════════════════════════════ */

/* ── 收窄过渡：只过渡可以「只变样子」的属性 ── */
.persona-panel,
.persona-panel.pcard,
.ph-card,
.ph-ico,
.pcard{
  transition-property:background, background-color, background-image,
                      border-color, box-shadow, color, opacity, filter;
  transition-duration:.26s;
  transition-timing-function:ease;
}

/* ── 悬停：只变背景，尺寸/位置一律不动 ──
   注意：这里绝不能写 width/height/max-width/padding/margin，
   任何一条都会让内部可用宽度变化，文字重新折行，卡片高度随之跳
   （实测 width:auto;height:auto 覆盖了 .ph-card 的 max-width:760px，
     内部宽度 698→758，高度 324→268）。 */
.persona-panel:hover,
.persona-panel.pcard:hover,
.ph-card:hover,
.pcard:hover{
  transform:none !important;
  /* 背景：叠一层圆形星云光（screen 混合，只提亮不遮挡） */
  background-image:
    radial-gradient(ellipse 62% 78% at 26% 22%, rgba(168,85,247,.26), transparent 70%),
    radial-gradient(ellipse 56% 72% at 78% 80%, rgba(94,200,255,.16), transparent 72%);
  border-color:rgba(190,160,255,.5);
}

/* ph-card 本来就有自己的渐变背景，hover 时在原有之上叠星云 */
.ph-card:hover{
  background-image:
    radial-gradient(ellipse 64% 80% at 28% 20%, rgba(168,85,247,.30), transparent 70%),
    radial-gradient(ellipse 58% 74% at 76% 82%, rgba(94,200,255,.18), transparent 72%),
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(123,77,255,.26), transparent 70%),
    linear-gradient(165deg, rgba(28,17,60,.92), rgba(12,7,30,.95));
}

/* ph-glow 绝对定位的影子层不参与边界：hover 时也不改它的 top/height */
.ph-card .ph-glow{
  top:-70px;
  height:200px;
}

/* 防止内部按钮位移带动整卡视觉（按钮自身仍可动） */
.ph-card{ isolation:isolate; }
.ph-btn{ isolation:isolate; }


/* ── 锁死尺寸：悬停绝不改变卡片盒子 ──
   实测 hover 时 .ph-card 高度 324→468、.persona-panel 223→195，
   说明有规则在改高度。这里一次性锁死，只允许颜色/背景变化。 */
.ph-card,
.ph-card:hover,
.persona-panel,
.persona-panel:hover,
.persona-panel.pcard,
.persona-panel.pcard:hover{
  transition-property:background-color, background-image, border-color,
                      box-shadow, color, opacity;
  transition-duration:.24s;
  transition-timing-function:ease;
}
/* 禁止任何尺寸/位移属性进入过渡 */
.ph-card:hover,
.persona-panel:hover,
.pcard:hover{
  transform:none !important;
  translate:none !important;
  scale:none !important;
  rotate:none !important;
  /* 不写 min-height/max-height/height —— 一旦覆盖，卡片会被压矮
     （实测写 min-height:inherit 后 .ph-card 高度从 324 掉到 268） */
}

/* ph-glow 是装饰性光斑，永远不参与布局
   ── 为什么加了这条还是撑高 ──
   .ph-glow 是 position:absolute + top:-70px + height:200px。
   它对父级本来不占流内空间，但当父级 .ph-card 有 overflow:hidden 时，
   绝对定位子元素仍会影响 scroll 高度计算（部分浏览器会把
   top:-70 到 height 200 的范围算进可滚动区域），进而让 offsetHeight 变大。
   彻底解决：把 top 改成正向偏移并用 transform 上移 —— transform 不参与布局。 */
.ph-card > .ph-glow{
  position:absolute;
  pointer-events:none;
  top:0 !important;
  height:200px !important;
  transform:translateY(-70px);
}