/* 亮/暗双皮肤：由 <html data-theme="light|dark"> 驱动。
   默认(:root)=亮色；[data-theme=dark]=暗色。
   themes.js 负责：跟随系统 → 时间兜底 → 手动切换（按钮右下角）。 */
:root{
  --bg:#f5f6fb; --bg2:#eceef7; --card:#ffffff; --card2:#f2f3fa;
  --fg:#1b1d2e; --muted:#5f6480; --line:#dfe2ee;
  --p1:#6d4bff; --p2:#0a9db8; --accent:#e0479e; --ok:#12a06b;
  --radius:16px;
}
[data-theme="dark"]{
  --bg:#0f1226; --bg2:#171a35; --card:#1e2142; --card2:#262a52;
  --fg:#eef0ff; --muted:#a8adcf; --line:#33386b;
  --p1:#7c5cff; --p2:#22d3ee; --accent:#ff7ac6; --ok:#3ddc97;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:radial-gradient(1200px 700px at 85% -10%,color-mix(in srgb,var(--p1) 22%,transparent) 0%,transparent 60%),
             radial-gradient(900px 600px at -10% 10%,color-mix(in srgb,var(--p2) 18%,transparent) 0%,transparent 55%),
             var(--bg);
  color:var(--fg); line-height:1.75; -webkit-font-smoothing:antialiased;
}
a{color:var(--p2);text-decoration:none}
a.plainlink{color:var(--muted)}
a.plainlink:hover{color:var(--p1)}
a.plainlink b{color:var(--p2)}
a:hover{text-decoration:underline}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}
header.site{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);
  background:color-mix(in srgb,var(--bg) 82%,transparent);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:14px;height:60px;flex-wrap:wrap}
.logo{font-weight:800;font-size:19px;letter-spacing:.5px;color:var(--fg);white-space:nowrap}
.logo em{font-style:normal;color:var(--accent)}
header.site nav{margin-left:auto;display:flex;gap:16px;font-size:14px;flex-wrap:wrap}
header.site nav a{color:var(--muted)}
header.site nav a:hover{color:var(--p1)}
.hero{padding:52px 0 34px;text-align:center}
.hero h1{font-size:clamp(26px,6vw,46px);line-height:1.25;margin:0 0 14px;font-weight:800}
.grad{background:linear-gradient(92deg,var(--p1),var(--p2) 55%,var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{color:var(--muted);font-size:clamp(14px,3.4vw,17px);max-width:680px;margin:0 auto 26px}
.btn{display:inline-block;border:none;cursor:pointer;font-family:inherit;
  background:linear-gradient(92deg,var(--p1),var(--p2));color:#0b0d1c;font-weight:800;
  padding:15px 34px;border-radius:999px;font-size:17px;box-shadow:0 10px 30px rgba(124,92,255,.4);
  transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(124,92,255,.55);text-decoration:none}
.btn.ghost{background:transparent;border:1.5px solid var(--line);color:var(--fg);box-shadow:none}
.btn.sm{padding:9px 18px;font-size:14px}
.pageactions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:34px 0 8px}
.pageactions .btn{min-width:150px;text-align:center}
@media(max-width:520px){.pageactions .btn{flex:1 1 100%;min-width:0}}
.badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
.badge{background:rgba(61,220,151,.12);border:1px solid rgba(61,220,151,.5);color:var(--ok);
  padding:6px 14px;border-radius:999px;font-size:13px;font-weight:700}
.badge.alt{background:rgba(34,211,238,.1);border-color:rgba(34,211,238,.45);color:var(--p2)}
@media(max-width:520px){
  .badges{gap:6px;flex-wrap:nowrap}
  .badge{padding:5px 9px;font-size:11.5px;white-space:nowrap}
}
section{padding:34px 0}
h2.sec{font-size:clamp(20px,4.4vw,28px);margin:0 0 6px;font-weight:800}
h2.sec .n{color:var(--p2);font-size:.8em;margin-right:8px}
p.sub{color:var(--muted);margin:0 0 22px;font-size:14.5px}
/* 四维度卡片：桌面 2 列 × 2 行；手机 1 列 × 4 行（每张卡内两性格横向对比） */
.dimgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:620px){.dimgrid{grid-template-columns:1fr}}
.dimcard{display:flex;flex-direction:column;background:linear-gradient(180deg,var(--card),var(--bg2));
  border:1px solid var(--line);border-radius:var(--radius);padding:16px}
/* 无标题的四维度卡片：两性格小卡片并排 */
.dimcard .vs2{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start;margin-top:2px}
@media(max-width:400px){.dimcard .vs2{grid-template-columns:1fr}}
.pole{border-radius:10px;padding:9px 11px;font-size:12.5px;margin-bottom:8px;flex:1 0 auto;
  border-left:3px solid var(--p1);background:rgba(124,92,255,.08)}
.pole.b{border-left-color:var(--p2);background:rgba(34,211,238,.07)}
.pole b{display:block;margin-bottom:3px;font-size:13.5px}
.pole ul{margin:3px 0 0;padding-left:16px;color:var(--muted)}
.pole ul li{margin-bottom:2px;line-height:1.45}
/* 详情页：长文默认折叠 */
.clamp{position:relative;max-height:340px;overflow:hidden;transition:max-height .3s}
.clamp:after{content:'';position:absolute;left:0;right:0;bottom:0;height:70px;
  background:linear-gradient(transparent,var(--card))}
.clamp.open{max-height:none}
.clamp.open:after{display:none}
.expandbtn{display:block;width:100%;margin-top:10px;background:var(--bg2);color:var(--p2);
  border:1px solid var(--line);border-radius:10px;padding:9px;font-size:13.5px;font-weight:700;cursor:pointer}
.expandbtn:hover{border-color:var(--p1)}
.tablebox{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
th,td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--bg2);color:var(--muted);font-size:12.5px;letter-spacing:.4px;
  position:sticky;top:0;text-transform:uppercase}
tr.rowlink{cursor:pointer;transition:background .12s}
tr.rowlink:hover{background:var(--card2)}
tr.rowlink td:first-child{font-weight:800;color:var(--p2);white-space:nowrap;font-size:15px}
tr.rowlink .who{white-space:nowrap}
tr.rowlink .who .em{font-size:20px;margin-right:6px}
tr.rowlink .nick{color:var(--accent);font-weight:700}
tr.rowlink .one{color:var(--muted)}
.card{background:linear-gradient(180deg,var(--card),var(--bg2));border:1px solid var(--line);
  border-radius:var(--radius);padding:22px;margin-bottom:18px}
.card h3{margin:0 0 10px;font-size:19px}
.card h3 .em{font-size:22px;margin-right:6px}
/* 卡片内的次级小标题（如「优点 与 缺点」「给 XX 的建议」） */
h4.subtle{margin:20px 0 8px;font-size:16px;font-weight:800;color:var(--p2);
  padding-top:16px;border-top:1px dashed var(--line)}
.note{background:rgba(255,122,198,.09);border:1px solid rgba(255,122,198,.4);
  border-radius:12px;padding:14px 16px;font-size:13.5px;color:color-mix(in srgb,var(--accent) 55%,var(--fg))}
.note b{color:var(--fg)}
.muted{color:var(--muted)}
.center{text-align:center}
footer.site{border-top:1px solid var(--line);margin-top:40px;padding:26px 0 40px;
  color:var(--muted);font-size:13px;text-align:center}
/* quiz */
#progressWrap{position:sticky;top:60px;z-index:40;background:color-mix(in srgb,var(--bg) 92%,transparent);
  padding:12px 0 14px;border-bottom:1px solid var(--line);margin-bottom:20px}
#progressWrap .row{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--muted);margin-bottom:8px}
#qcount{font-weight:800;color:var(--p2)}
.bar{height:9px;border-radius:999px;background:var(--card2);overflow:hidden}
.bar>i{display:block;height:100%;width:0%;border-radius:999px;
  background:linear-gradient(92deg,var(--p1),var(--p2));transition:width .3s ease}
.qcard{background:linear-gradient(180deg,var(--card),var(--bg2));border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 20px}
.qcard .qtag{font-size:12px;color:var(--muted);letter-spacing:.6px;margin-bottom:6px}
.qcard .qtext{font-size:clamp(17px,4.4vw,21px);font-weight:700;margin-bottom:18px;line-height:1.55}
.choice{display:block;width:100%;text-align:left;font-family:inherit;font-size:15.5px;
  background:var(--card2);color:var(--fg);border:1.5px solid var(--line);border-radius:12px;
  padding:15px 16px;margin-bottom:11px;cursor:pointer;transition:all .13s;display:flex;gap:12px}
.choice:hover{border-color:var(--p1);background:var(--card2)}
.choice .key{flex:0 0 26px;height:26px;border-radius:8px;background:rgba(124,92,255,.25);
  color:var(--p2);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:13px}
/* 多选题：词平铺为「非互斥勾选」（方形 ✓），不限制同组互斥 */
.qcard.multi .hint{margin:-10px 0 14px;font-size:13px;display:flex;justify-content:space-between;
  gap:10px;flex-wrap:wrap}
.qcard.multi .hint #pickCount{color:var(--p2);font-weight:700}
.wordgroups{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.wbtn{flex:1 1 calc(50% - 5px);min-width:calc(50% - 5px);font-family:inherit;font-size:15px;
  color:var(--fg);background:var(--card2);
  border:1.5px solid var(--line);border-radius:12px;padding:13px 14px;cursor:pointer;
  display:flex;align-items:center;gap:10px;text-align:left;transition:all .13s}
.wbtn:hover{border-color:var(--p1)}
/* 方形勾选框：未选空心直角方框，选中填充 ✓ */
.wbtn .tick{flex:0 0 18px;height:18px;border-radius:4px;border:2px solid var(--line);
  background:transparent;transition:all .13s;position:relative}
.wbtn .wtxt{flex:1 1 auto;line-height:1.4}
.wbtn.on{border-color:var(--p1);background:rgba(124,92,255,.16);font-weight:700}
.wbtn.on .tick{border-color:var(--p1);background:var(--p1)}
.wbtn.on .tick::after{content:'';position:absolute;left:4.5px;top:1px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
/* 题目头行：题号标签与「上一题」小按钮同一行，按钮居右对齐 */
.qhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.qhead .qtag{margin-bottom:0}
/* 小按钮：题号行内的「上一题」，无悬浮感/无光晕 */
.btn.mini{font-size:12.5px;padding:5px 10px;border-radius:8px;background:transparent;
  color:var(--muted);border:1px solid var(--line);font-weight:600;box-shadow:none;
  line-height:1.3;white-space:nowrap;-webkit-tap-highlight-color:transparent;
  transition:border-color .13s,color .13s}
.btn.mini:hover{border-color:var(--muted);color:var(--fg);box-shadow:none}
.btn.mini:active{background:transparent;transform:none}
.btn.mini:disabled{opacity:.35;cursor:not-allowed}
/* 下一题：大按钮，独占一行 */
.qcard .btn.next{width:100%;margin:0}
/* 已测过：顶部展示上次结果 */
.prevcard{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:linear-gradient(180deg,var(--card),var(--bg2));border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;margin-bottom:20px}
.prevcard .prev-em{font-size:40px;line-height:1}
.prevcard .prev-body{flex:1 1 240px;min-width:0}
.prevcard .prev-label{font-size:12.5px;color:var(--muted);letter-spacing:.3px}
.prevcard .prev-type{margin:2px 0 2px}
.prevcard .prev-type b{font-size:26px;font-weight:900;letter-spacing:1px}
.prevcard .prev-nick{font-weight:700;color:var(--accent);font-size:14px}
.prevcard .prev-one{margin:2px 0 0;font-size:13.5px}
.prevcard .prev-acts{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto}
.prevcard .prev-acts .btn{margin:0;width:auto;display:inline-block}
@media(max-width:560px){.prevcard .prev-acts{width:100%;margin-left:0}
  .prevcard .prev-acts .btn{flex:1 1 0;text-align:center}}
/* 详情页顶部卡片的返回主页按钮 */
.card.typetop{position:relative}
.homebtn{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:19px;color:var(--muted);
  background:var(--card2);border:1.5px solid var(--line);transition:all .13s;z-index:2}
.homebtn:hover{color:var(--p1);border-color:var(--p1);text-decoration:none;transform:translateY(-1px)}
/* 详情页右下角悬浮「返回顶部」图标 */
.fabtop{position:fixed;right:18px;bottom:22px;width:46px;height:46px;border-radius:50%;
  background:linear-gradient(135deg,var(--p1),var(--p2));color:#fff;border:none;cursor:pointer;
  font-size:20px;font-weight:800;line-height:1;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.35);opacity:0;visibility:hidden;transition:all .2s;z-index:60}
.fabtop.show{opacity:1;visibility:visible}
.fabtop:active{transform:scale(.94)}
/* 顶部右上角主题切换 icon */
.themebtn{margin-left:auto;width:38px;height:38px;border-radius:50%;background:var(--card2);
  border:1.5px solid var(--line);color:var(--muted);font-size:18px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
  -webkit-tap-highlight-color:transparent;transition:all .13s}
.themebtn svg{display:block;width:18px;height:18px}
.themebtn:hover{color:var(--fg)}
.themebtn:hover{border-color:var(--p1);transform:translateY(-1px)}
.themebtn:active{transform:scale(.94)}
header.site .logo{text-decoration:none}
header.site a.logo:hover{text-decoration:none}
.btn.next{width:100%;text-align:center;justify-content:center;margin-top:2px}
.btn.next:disabled{opacity:.45;cursor:not-allowed}
.btn{display:inline-block;text-decoration:none;border:none;font-family:inherit;font-size:15px;
  font-weight:700;border-radius:12px;padding:13px 18px;cursor:pointer;transition:all .13s}
.btn.primary{background:linear-gradient(92deg,var(--p1),var(--p2));color:#fff;display:block;width:100%;
  text-align:center;box-sizing:border-box;margin-bottom:10px}
.btn.ghost{background:var(--card2);color:var(--muted);border:1.5px solid var(--line);
  display:block;width:100%;text-align:center;box-sizing:border-box}
.result{text-align:center;padding:14px 0}
.result .big{font-size:clamp(38px,13vw,64px);font-weight:900;letter-spacing:2px}
.result .em{font-size:56px}
/* 候选类型网格（不确定维度 → 多类型并列，样式同首页 16 型列表） */
.candgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:10px;margin:18px 0 6px;text-align:left}
.cand{display:flex;align-items:center;gap:12px;background:var(--card2);
  border:1px solid var(--line);border-radius:14px;padding:12px 14px;
  text-decoration:none;transition:all .14s}
.cand:hover{border-color:var(--p1);transform:translateY(-2px);text-decoration:none}
.cand .cand-em{font-size:26px;line-height:1}
.cand .cand-body{display:flex;flex-direction:column;min-width:0}
.cand .cand-t{font-weight:900;font-size:18px;color:var(--p2);letter-spacing:.5px}
.cand .cand-nick{font-size:12.5px;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.meter{display:flex;gap:8px;margin:20px 0;flex-wrap:wrap;justify-content:center}
.meter .m{background:var(--card2);border:1px solid var(--line);border-radius:12px;
  padding:10px 14px;min-width:150px;flex:1 1 150px}
.meter .m .lab{font-size:12px;color:var(--muted);display:flex;justify-content:space-between}
.meter .m .b{height:8px;border-radius:999px;background:var(--bg);overflow:hidden;margin-top:6px}
.meter .m .b>i{display:block;height:100%;background:linear-gradient(92deg,var(--p1),var(--p2))}
.split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.split{grid-template-columns:1fr}}
ul.clean{padding-left:20px;margin:8px 0}
ul.clean li{margin-bottom:7px}
.typehd{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.typehd .icon{font-size:64px;line-height:1}
.typehd h1{margin:0;font-size:clamp(30px,8vw,46px);font-weight:900;letter-spacing:1px}
.typehd .meta{font-size:15px;color:var(--muted)}
.pill{display:inline-block;background:rgba(124,92,255,.18);border:1px solid var(--line);
  border-radius:999px;padding:5px 13px;font-size:12.5px;margin:4px 6px 0 0;color:var(--fg)}
.prose{font-size:15px}
.prose h3{color:var(--p2);font-size:17px;margin:20px 0 8px}
.prose p{margin:10px 0;color:color-mix(in srgb,var(--fg) 88%,var(--muted))}
.typegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.typecard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;
  cursor:pointer;transition:all .14s}
.typecard:hover{border-color:var(--p1);transform:translateY(-3px)}
.typecard .t{font-weight:900;font-size:19px;color:var(--p2)}
.typecard .nk{color:var(--accent);font-weight:700;font-size:13.5px}
.typecard .of{font-size:12.5px;color:var(--muted)}
.typecard .em{font-size:26px;float:right}
/* ===== 配对关系梯度表 ===== */
.legend{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.legend .lg{padding:6px 13px;border-radius:999px;font-size:12.5px;font-weight:700;border:1px solid var(--line)}
.legend .lg1{background:rgba(224,71,158,.12);border-color:rgba(224,71,158,.5);color:var(--accent)}
.legend .lg2{background:rgba(124,92,255,.12);border-color:rgba(124,92,255,.5);color:var(--p1)}
.legend .lg3{background:rgba(34,211,238,.10);border-color:rgba(34,211,238,.45);color:var(--p2)}
table.pairtable{min-width:760px}
table.pairtable th{text-transform:none;font-size:12.5px}
table.pairtable th.th1{color:var(--accent)}
table.pairtable th.th2{color:var(--p1)}
table.pairtable th.th3{color:var(--p2)}
tr[data-t] .pt-type{font-weight:900;color:var(--p2);font-size:15px;white-space:nowrap}
td.t1{background:linear-gradient(90deg,rgba(224,71,158,.10),transparent)}
td.t2{background:linear-gradient(90deg,rgba(124,92,255,.08),transparent)}
td.t3{background:linear-gradient(90deg,rgba(34,211,238,.07),transparent)}
.pairlink{display:inline-block;margin:2px 6px 2px 0;padding:3px 9px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);white-space:nowrap;font-size:12.5px;transition:all .13s}
.pairlink:hover{text-decoration:none;transform:translateY(-1px)}
.pairlink .pc-t{font-weight:800}
.pairlink.t1{border-color:rgba(224,71,158,.55)}
.pairlink.t1 .pc-t{color:var(--accent)}
.pairlink.t2{border-color:rgba(124,92,255,.55)}
.pairlink.t2 .pc-t{color:var(--p1)}
.pairlink.t3{border-color:rgba(34,211,238,.5)}
.pairlink.t3 .pc-t{color:var(--p2)}
.pairlink .pc-n{color:var(--muted);font-size:11.5px}
.pairlink:hover .pc-n{color:var(--fg)}
.pt-star{white-space:nowrap;text-align:center}
.starline{letter-spacing:1px;font-size:13px}
.starline .dim{opacity:.22}
.starline.s5{color:var(--accent)}
.starline.s4{color:var(--p1)}
.starline.s3{color:var(--p2)}