/* 人格体系切换 + 大五 + 16PF */

/* tab */
.pt-tabs{
  display:flex;gap:7px;justify-content:center;margin-bottom:16px;flex-wrap:wrap;
}
.pt-tab{
  height:38px;min-height:0;padding:0 20px;border-radius:999px;font-size:13.5px;font-weight:600;
  border:1px solid var(--edge-2);background:rgba(22,14,48,.6);color:var(--ink-2);
  cursor:pointer;transition:.18s;
}
.pt-tab:hover{background:rgba(123,77,255,.18);color:#fff}
.pt-tab.on{
  background:linear-gradient(96deg,#7b4dff,#a97dff);color:#fff;border-color:transparent;
  box-shadow:0 8px 22px rgba(123,77,255,.42);
}
.pt-pane{display:none}
.pt-pane.on{display:block}

/* 大五 */
.big5-layout{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.92fr);
  gap:18px;align-items:start;max-width:1080px;margin:0 auto;
}
.big5-bars{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.b5-row{
  padding:11px 13px;border-radius:12px;cursor:pointer;
  background:rgba(30,20,62,.52);border:1px solid var(--edge);transition:.16s;
}
.b5-row:hover{border-color:var(--edge-2);background:rgba(44,28,86,.7)}
.b5-top{display:flex;align-items:baseline;gap:9px;margin-bottom:6px}
.b5-top b{font-size:14px;color:#fff}
.b5-top .sub{font-size:11px}
.b5-score{margin-left:auto;font-size:19px;font-weight:800}
.b5-track{height:8px;border-radius:99px;background:rgba(123,77,255,.16);overflow:hidden}
.b5-track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#8f6bff,#37d6c8)}
.b5-band{font-size:12px;color:var(--ink-3);margin-top:6px;line-height:1.6}

/* 16PF */
.pf16-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pf-row{
  display:grid;grid-template-columns:32px 1fr 34px 1.1fr;
  gap:8px;align-items:center;
  padding:8px 11px;border-radius:10px;cursor:pointer;
  background:rgba(30,20,62,.5);border:1px solid var(--edge);transition:.15s;
  font-size:12.5px;
}
.pf-row:hover{border-color:var(--edge-2);background:rgba(44,28,86,.7)}
.pf-code{
  font-size:11px;font-weight:800;color:#37d6c8;
  border:1px solid rgba(55,214,200,.4);border-radius:5px;
  text-align:center;padding:1px 0;
}
.pf-name{color:#dcd0ff;font-weight:600}
.pf-scale{font-size:15px;font-weight:800;color:#fff;text-align:right}
.pf-lean{color:var(--ink-3);font-size:11.5px;text-align:right;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.pf16-sec{display:flex;flex-direction:column;gap:8px}
.sec-row{
  display:grid;grid-template-columns:120px 50px 1fr;gap:10px;align-items:center;
  padding:9px 12px;border-radius:10px;
  background:rgba(30,20,62,.5);border:1px solid var(--edge);font-size:12.5px;
}
.sec-row b{color:#dcd0ff}
.sec-v{font-size:15px;font-weight:800;color:#37d6c8;text-align:right}
.sec-note{color:var(--ink-3);font-size:11.5px}

@media(max-width:1000px){
  .big5-layout{grid-template-columns:1fr}
  .pf16-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  .pt-tab{padding:0 14px;font-size:12.5px;height:34px}
  .pf-row{grid-template-columns:28px 1fr 30px;font-size:12px}
  .pf-lean{display:none}
  .sec-row{grid-template-columns:1fr 40px;gap:6px}
  .sec-note{grid-column:1/-1;font-size:11px}
}