/* ============================================================
   心理测试平台 · PHP+JSON 版样式
   设计语言对齐原 React/Tailwind 版本：
   深灰主色 + 紫罗兰强调色 + 薄荷绿(MBTI) + 天空蓝(抑郁)
   ============================================================ */

:root {
  --primary: #2D3436;
  --secondary: #636E72;
  --accent: #6C5CE7;
  --accent-2: #a29bfe;
  --bg: #FAFAFA;
  --card: #FFFFFF;
  --mbti: #00B894;
  --depression: #74B9FF;
  --border: #EDF0F2;
  --gray-100: #f1f3f5;
  --gray-200: #e9ecef;
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
  --shadow-lg: 0 10px 30px rgba(108,92,231,.18);
  --radius: 20px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: var(--bg);
  color: var(--primary);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* ---------- 通用组件 ---------- */
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px;
  transition: box-shadow .3s ease, transform .3s ease;
}
.card:hover { box-shadow: var(--shadow-lg); }

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 30px;
  background: var(--accent); color: #fff;
  border: none; border-radius: 999px;
  font-weight: 600; font-size: 15px;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.btn-primary:active { transform: scale(.97); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 30px;
  background: transparent; color: var(--primary);
  border: 2px solid var(--primary); border-radius: 999px;
  font-weight: 600; font-size: 15px;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.btn-secondary:hover { background: var(--primary); color: #fff; }

.btn-block { width: 100%; }

.progress-bar { height: 6px; background: var(--gray-200); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .5s ease; }

.muted { color: var(--secondary); }
.text-center { text-align: center; }

/* ---------- 导航栏 ---------- */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.navbar .container { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.nav-logo { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; }
.nav-logo svg { color: var(--accent); }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--secondary);
  transition: background .2s ease, color .2s ease;
}
.nav-links a:hover { background: var(--gray-100); color: var(--primary); }
.nav-links a.active { background: var(--accent); color: #fff; }

.nav-auth { display: flex; align-items: center; gap: 12px; }
.nav-auth .link-login { padding: 8px 18px; font-size: 14px; font-weight: 500; color: var(--primary); }
.nav-auth .link-login:hover { color: var(--accent); }
.nav-user { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--secondary); }
.nav-user button { background: none; border: none; color: var(--secondary); display: inline-flex; align-items: center; gap: 4px; font-size: 14px; }
.nav-user button:hover { color: #e74c3c; }

.nav-toggle { display: none; background: none; border: none; padding: 8px; border-radius: 10px; }
.nav-toggle:hover { background: var(--gray-100); }

main { padding-top: 64px; min-height: 100vh; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--accent) 0%, #8e7cf0 45%, #fd79a8 100%);
  color: #fff;
}
.hero::before {
  content: ""; position: absolute; inset: 0; opacity: .12;
  background:
    radial-gradient(280px 280px at 12% 22%, #fff, transparent 70%),
    radial-gradient(360px 360px at 88% 78%, #fff, transparent 70%);
}
.hero .container { position: relative; padding: 96px 20px 120px; text-align: center; }
.hero h1 { font-size: 44px; font-weight: 800; margin-bottom: 20px; letter-spacing: -.5px; }
.hero p.sub { font-size: 18px; color: rgba(255,255,255,.85); max-width: 680px; margin: 0 auto 36px; }
.hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.hero-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 16px 32px; border-radius: 999px; font-size: 17px; font-weight: 700;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.hero-btn.primary { background: #fff; color: var(--accent); }
.hero-btn.primary:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 18px 40px rgba(0,0,0,.2); }
.hero-btn.ghost { background: rgba(255,255,255,.2); color: #fff; backdrop-filter: blur(6px); }
.hero-btn.ghost:hover { background: rgba(255,255,255,.32); }

/* ---------- 测试卡片 ---------- */
.test-cards { margin-top: -56px; position: relative; z-index: 10; }
.test-cards .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.test-card {
  display: block; border: 2px solid transparent; transition: border-color .25s ease, transform .25s ease;
}
.test-card:hover { transform: translateY(-3px); }
.test-card.mbti:hover { border-color: var(--mbti); }
.test-card.dep:hover { border-color: var(--depression); }
.test-card .tag { display: inline-block; font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 999px; }
.test-card.mbti .tag { color: var(--mbti); background: rgba(0,184,148,.1); }
.test-card.dep .tag { color: #2f80ed; background: rgba(116,185,255,.16); }
.test-card h3 { font-size: 22px; font-weight: 700; margin: 12px 0 8px; }
.test-card .tc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.test-card .desc { color: var(--secondary); font-size: 14px; margin-bottom: 18px; }
.test-card .go { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; }
.test-card.mbti .go { color: var(--mbti); }
.test-card.dep .go { color: #2f80ed; }
.test-card .icon-box { padding: 14px; border-radius: 18px; }
.test-card.mbti .icon-box { background: rgba(0,184,148,.1); color: var(--mbti); }
.test-card.dep .icon-box { background: rgba(116,185,255,.16); color: #2f80ed; }

/* ---------- 特性区 ---------- */
.section { padding: 80px 0; }
.section-title { text-align: center; margin-bottom: 48px; }
.section-title h2 { font-size: 30px; font-weight: 800; margin-bottom: 10px; }
.feature-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.feature { text-align: center; }
.feature .ficon { width: 48px; height: 48px; border-radius: 14px; background: rgba(108,92,231,.1); color: var(--accent); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.feature h3 { font-weight: 600; margin-bottom: 8px; }
.feature p { font-size: 14px; color: var(--secondary); }

/* ---------- 页脚 ---------- */
.footer { background: var(--primary); color: rgba(255,255,255,.6); padding: 32px 0; text-align: center; }
.footer p { font-size: 14px; }
.footer .fine { font-size: 12px; margin-top: 8px; opacity: .7; }

/* ---------- 测试答题 ---------- */
.test-wrap { max-width: 680px; margin: 0 auto; padding: 48px 20px; }
.test-wrap .meta-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; margin-bottom: 24px; }
.test-wrap .meta-card h1 { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.progress-head { display: flex; justify-content: space-between; font-size: 14px; color: var(--secondary); margin-bottom: 8px; }
.q-card .dim { font-size: 13px; font-weight: 600; color: var(--accent); margin-bottom: 12px; }
.q-card h2 { font-size: 20px; font-weight: 600; margin-bottom: 28px; }
.opt {
  display: flex; align-items: flex-start; gap: 12px; width: 100%;
  padding: 18px 20px; border: 2px solid var(--gray-200); border-radius: 16px;
  background: #fff; text-align: left; font-size: 15px; color: var(--primary);
  transition: border-color .2s ease, background .2s ease, transform .15s ease;
  margin-bottom: 16px;
}
.opt:hover { border-color: rgba(108,92,231,.5); }
.opt.selected { border-color: var(--accent); background: rgba(108,92,231,.05); color: var(--accent); }
.opt .badge {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; background: var(--gray-100); color: var(--secondary);
}
.opt.selected .badge { background: var(--accent); color: #fff; }
.opt .opt-desc { font-size: 12px; color: var(--secondary); margin-top: 4px; }

.nav-row { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; }
.nav-row .ghost-btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; color: var(--secondary); font-size: 15px; }
.nav-row .ghost-btn:hover { color: var(--primary); }
.nav-row .ghost-btn:disabled { opacity: .3; cursor: not-allowed; }

.dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 28px; }
.dots button { width: 10px; height: 10px; border-radius: 999px; border: none; background: var(--gray-200); transition: all .2s ease; }
.dots button.cur { background: var(--accent); transform: scale(1.3); }
.dots button.done { background: rgba(108,92,231,.4); }

/* ---------- 结果页 ---------- */
.result-wrap { max-width: 760px; margin: 0 auto; padding: 48px 20px; }
.result-head { text-align: center; margin-bottom: 28px; }
.result-head .type-badge {
  width: 96px; height: 96px; border-radius: 26px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;
  background: rgba(0,184,148,.1); color: var(--mbti);
}
.result-head h2 { font-size: 48px; font-weight: 800; color: var(--mbti); letter-spacing: 1px; }
.result-head h3 { font-size: 26px; font-weight: 700; margin: 8px 0 12px; }
.result-head p { color: var(--secondary); max-width: 560px; margin: 0 auto; }

.dim-row { margin-bottom: 18px; }
.dim-row .dim-head { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; }
.dim-row .dim-bar { height: 12px; background: var(--gray-100); border-radius: 999px; overflow: hidden; display: flex; }
.dim-row .dim-bar .l { background: var(--accent); height: 100%; border-radius: 999px 0 0 999px; transition: width 1s ease; }
.dim-row .dim-bar .r { background: var(--gray-300, #cfd4da); height: 100%; border-radius: 0 999px 999px 0; transition: width 1s ease; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { padding: 8px 16px; background: rgba(108,92,231,.1); color: var(--accent); border-radius: 999px; font-size: 14px; font-weight: 500; }

.block-title { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 600; margin-bottom: 16px; }

.score-pill { font-size: 44px; font-weight: 800; }
.score-bar-track { position: relative; height: 24px; background: var(--gray-100); border-radius: 999px; overflow: hidden; margin-bottom: 12px; }
.score-bar-fill { height: 100%; border-radius: 999px; transition: width 1.4s ease; }
.score-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--secondary); }

.perq { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); }
.perq:last-child { border-bottom: none; }
.perq .pq-dots { display: flex; gap: 4px; }
.perq .pq-dots i { width: 24px; height: 24px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; font-style: normal; background: var(--gray-100); color: #b2b8c0; }
.perq .pq-dots i.on { color: #fff; }

.advice ul { list-style: none; }
.advice li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--secondary); margin-bottom: 8px; }
.advice li .dash { color: var(--accent); flex: 0 0 auto; }

.alert-box { background: #fdecea; border: 2px solid #f5b7b1; border-radius: var(--radius); padding: 24px; margin-bottom: 24px; }
.alert-box h4 { color: #c0392b; font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.alert-box p { color: #d9544d; font-size: 14px; }

.hotline { background: var(--gray-100); border-radius: 16px; padding: 16px; margin-bottom: 12px; }
.hotline .hl-name { font-weight: 600; font-size: 14px; }
.hotline .hl-num { font-size: 24px; font-weight: 800; color: var(--accent); }
.hotline .hl-note { font-size: 12px; color: var(--secondary); }

.fine-note { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--secondary); opacity: .8; margin: 24px 0; padding: 0 16px; }

/* ---------- 雷达图 ---------- */
.radar-wrap { display: flex; justify-content: center; margin: 8px 0 4px; }
.radar-wrap canvas { max-width: 100%; }

/* ---------- 历史记录 ---------- */
.history-wrap { max-width: 760px; margin: 0 auto; padding: 48px 20px; }
.history-wrap h1 { font-size: 30px; font-weight: 800; margin-bottom: 6px; }
.timeline { position: relative; margin-top: 28px; }
.hist-item { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 16px; overflow: hidden; }
.hist-head { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; background: none; border: none; text-align: left; }
.hist-head .left { display: flex; align-items: center; gap: 16px; }
.hist-head .ic { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.hist-head .ic.mbti { background: rgba(0,184,148,.1); color: var(--mbti); }
.hist-head .ic.dep { background: rgba(116,185,255,.16); color: #2f80ed; }
.hist-head .tt { display: flex; align-items: center; gap: 8px; }
.hist-head .tt h3 { font-size: 16px; font-weight: 600; }
.hist-head .pill { font-size: 12px; padding: 2px 10px; border-radius: 999px; font-weight: 600; }
.hist-head .pill.mbti { background: rgba(0,184,148,.1); color: var(--mbti); }
.hist-head .pill.dep { background: rgba(116,185,255,.16); color: #2f80ed; }
.hist-head .date { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--secondary); margin-top: 4px; }
.hist-head .right { display: flex; align-items: center; gap: 12px; }
.hist-head .big { font-size: 20px; font-weight: 800; }
.hist-body { padding: 0 20px 20px; border-top: 1px solid var(--border); margin-top: 0; }
.hist-body .dim-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 14px; }
.hist-body .dim-cell { background: var(--gray-100); border-radius: 12px; padding: 8px; text-align: center; }
.hist-body .dim-cell .lab { font-size: 12px; color: var(--secondary); }
.hist-body .dim-cell .val { font-weight: 800; }
.hist-body .career-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.hist-body .career-chips span { font-size: 12px; padding: 4px 10px; background: rgba(108,92,231,.1); color: var(--accent); border-radius: 999px; }
.empty-state { text-align: center; padding: 80px 20px; }
.empty-state .ic { width: 80px; height: 80px; border-radius: 999px; background: var(--gray-100); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: #ced4da; }

/* ---------- 表单（登录/注册） ---------- */
.auth-wrap { min-height: calc(100vh - 64px); display: flex; align-items: center; justify-content: center; padding: 48px 20px; }
.auth-card { width: 100%; max-width: 420px; padding: 40px; }
.auth-card .ac-icon { width: 64px; height: 64px; border-radius: 18px; background: rgba(108,92,231,.1); color: var(--accent); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.auth-card h1 { text-align: center; font-size: 24px; font-weight: 800; }
.auth-card .ac-sub { text-align: center; color: var(--secondary); margin: 8px 0 24px; }
.form-error { background: #fdecea; color: #c0392b; padding: 12px 16px; border-radius: 14px; margin-bottom: 20px; font-size: 14px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 8px; }
.field input {
  width: 100%; padding: 13px 16px; border: 1px solid var(--gray-200); border-radius: 14px; font-size: 15px; color: var(--primary);
  outline: none; transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(108,92,231,.15); }
.field .pw-wrap { position: relative; }
.field .pw-wrap input { padding-right: 46px; }
.field .pw-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #adb5bd; padding: 4px; }
.field .pw-toggle:hover { color: var(--secondary); }
.auth-switch { text-align: center; font-size: 14px; color: var(--secondary); margin-top: 20px; }
.auth-switch a { color: var(--accent); font-weight: 600; }
.auth-switch a:hover { text-decoration: underline; }

/* ---------- 关于页 ---------- */
.about-wrap { max-width: 860px; margin: 0 auto; padding: 56px 20px; }
.about-wrap .ab-head { text-align: center; margin-bottom: 40px; }
.about-wrap .ab-head h1 { font-size: 32px; font-weight: 800; margin-bottom: 10px; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.about-grid .mini { background: var(--gray-100); border-radius: 16px; padding: 16px; }
.about-grid .mini h3 { font-weight: 600; margin-bottom: 8px; }
.about-grid .mini ul { list-style: none; }
.about-grid .mini li { font-size: 13px; color: var(--secondary); margin-bottom: 4px; }
.about-grid .mini li b { color: var(--accent); }
.disclaimer { background: #fff8e1; border: 1px solid #ffe082; border-radius: var(--radius); padding: 24px; margin-top: 24px; }
.disclaimer h3 { color: #b8860b; font-weight: 700; margin-bottom: 8px; }
.disclaimer p { font-size: 14px; color: #8a6d1a; line-height: 1.7; }

/* ---------- 加载 / 错误状态 ---------- */
.boot-loader { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: var(--secondary); }
.spinner { width: 44px; height: 44px; border: 4px solid rgba(108,92,231,.2); border-top-color: var(--accent); border-radius: 999px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.error-state { min-height: calc(100vh - 64px); display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.error-state .es-inner { text-align: center; max-width: 420px; }
.error-state .es-ic { width: 80px; height: 80px; border-radius: 999px; background: #fdecea; color: #e74c3c; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }

.fade-in { animation: fadeIn .4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- 响应式 ---------- */
@media (max-width: 860px) {
  .feature-grid { grid-template-columns: repeat(2,1fr); }
  .about-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .nav-links, .nav-auth { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-mobile { background: #fff; border-top: 1px solid var(--border); box-shadow: 0 12px 30px rgba(0,0,0,.08); }
  .nav-mobile a, .nav-mobile button { display: flex; align-items: center; gap: 12px; padding: 12px 20px; font-size: 14px; font-weight: 500; color: var(--secondary); width: 100%; text-align: left; border: none; background: none; }
  .nav-mobile a.active { background: rgba(108,92,231,.1); color: var(--accent); }
  .nav-mobile .nm-auth { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 12px; }
  .hero h1 { font-size: 32px; }
  .hero p.sub { font-size: 16px; }
  .test-cards .grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .hist-body .dim-grid { grid-template-columns: repeat(2,1fr); }
  .card { padding: 22px; }
  .result-head h2 { font-size: 38px; }
}
.nav-mobile { display: none; }

/* ---------- 人格浏览 / 详情 ---------- */
/* 分组配色：分析家=紫 外交家=粉 守护者=青 探险家=蓝 */
.g-analysts  { --g: #6C5CE7; --g-soft: rgba(108,92,231,.12); }
.g-diplomats { --g: #e84393; --g-soft: rgba(232,67,147,.12); }
.g-sentinels { --g: #00B894; --g-soft: rgba(0,184,148,.12); }
.g-explorers { --g: #0984e3; --g-soft: rgba(9,132,227,.12); }

.types-wrap { max-width: 1120px; margin: 0 auto; padding: 56px 20px; }
.types-wrap .ab-head { text-align: center; margin-bottom: 28px; }
.types-wrap .ab-head h1 { font-size: 32px; font-weight: 800; margin-bottom: 8px; }

.type-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 32px; }
.tf-btn {
  padding: 9px 20px; border-radius: 999px; border: 2px solid var(--gray-200);
  background: #fff; color: var(--secondary); font-size: 14px; font-weight: 600;
  transition: all .2s ease;
}
.tf-btn:hover { border-color: var(--accent); color: var(--accent); }
.tf-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.types-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.type-grid-card {
  display: block; border: 2px solid transparent; border-radius: 18px;
  background: var(--card); box-shadow: var(--shadow); padding: 22px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.type-grid-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--g, var(--accent)); }
.tgc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.tgc-code { font-size: 26px; font-weight: 800; letter-spacing: 1px; color: var(--g, var(--accent)); }
.tgc-group {
  font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  background: var(--g-soft, rgba(108,92,231,.12));
  color: var(--g, var(--accent));
}
.tgc-name { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.tgc-tag { font-size: 13px; color: var(--secondary); line-height: 1.6; min-height: 42px; }
.tgc-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--g, var(--accent)); }
.type-grid-card:hover .tgc-go { gap: 10px; }

/* 详情页 */
.type-detail-wrap { max-width: 760px; margin: 0 auto; padding: 48px 20px; }
.td-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; gap: 12px; }
.td-pager { display: flex; gap: 10px; }
.ghost-btn {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 2px solid var(--gray-200);
  border-radius: 999px; padding: 9px 16px; color: var(--secondary); font-size: 14px; font-weight: 600;
  transition: all .2s ease;
}
.ghost-btn:hover { border-color: var(--accent); color: var(--accent); }
.hide-sm { display: inline; }

.td-head { text-align: center; margin-bottom: 28px; }
.type-code-pill {
  display: inline-block; padding: 6px 18px; border-radius: 999px; font-weight: 800; letter-spacing: 2px;
  background: rgba(0,184,148,.12); color: var(--mbti); font-size: 18px; margin-bottom: 14px;
}
.type-code-pill.big { font-size: 40px; padding: 8px 26px; letter-spacing: 4px; }
.tagline { color: var(--secondary); font-size: 16px; margin-bottom: 12px; font-style: italic; }
.group-badge {
  display: inline-block; margin-top: 6px; padding: 5px 16px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--g-soft, rgba(108,92,231,.14)); color: var(--g, var(--accent));
}

.dim-row .dim-name { font-size: 13px; color: var(--secondary); margin-bottom: 4px; }

/* 优势 / 成长 列表 */
.sw-list { list-style: none; }
.sw-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--primary); margin-bottom: 10px; line-height: 1.6; }
.sw-list .dot {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; margin-top: 1px;
}
.sw-list .dot.ok { background: rgba(0,184,148,.15); color: #00B894; }
.sw-list .dot.up { background: rgba(232,67,147,.15); color: #e84393; }

.chip-soft { padding: 8px 16px; background: var(--gray-100); color: var(--secondary); border-radius: 999px; font-size: 14px; font-weight: 500; }

@media (max-width: 980px) { .types-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .types-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .hide-sm { display: none; }
  .types-grid { grid-template-columns: 1fr; }
}

/* ---------- 首页：量表库入口横幅 ---------- */
.scale-lib-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(108,92,231,.08), rgba(0,184,148,.08));
  border: 1px solid var(--border);
}
.scale-lib-banner .slb-text h2 { font-size: 24px; font-weight: 800; margin-bottom: 8px; }
.scale-lib-banner .slb-text p { max-width: 620px; }

/* ---------- 量表库列表 ---------- */
.scales-wrap { max-width: 1120px; margin: 0 auto; padding: 56px 20px; }
.scales-wrap .ab-head { text-align: center; margin-bottom: 28px; }
.scales-wrap .ab-head h1 { font-size: 32px; font-weight: 800; margin-bottom: 8px; }

.scale-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 24px; }

.search-wrap { max-width: 520px; margin: 0 auto 32px; }
.search-wrap input {
  width: 100%; padding: 14px 18px; border: 1px solid var(--gray-200); border-radius: 999px;
  font-size: 15px; color: var(--primary); outline: none; background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.search-wrap input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(108,92,231,.12); }

.scale-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .scale-list { grid-template-columns: 1fr; } }

.scale-card { padding: 22px; }
.scale-card .sc-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.scale-card .sc-info { flex: 1; min-width: 0; }
.scale-card .sc-head { display: flex; align-items: center; gap: 8px; }
.scale-card .sc-head h3 { font-size: 18px; font-weight: 700; }
.scale-card .sc-crisis { color: #e74c3c; display: inline-flex; }
.scale-card .sc-desc { color: var(--secondary); font-size: 13px; line-height: 1.6; margin: 6px 0 10px; }
.scale-card .sc-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--secondary); }
.scale-card .sc-meta svg { opacity: .8; }
.scale-card .sc-grp { padding: 3px 10px; border-radius: 999px; background: rgba(108,92,231,.1); color: var(--accent); font-weight: 600; }
.scale-card .sc-start { flex: 0 0 auto; padding: 12px 18px; font-size: 14px; white-space: nowrap; }
@media (max-width: 520px) { .scale-card .sc-top { flex-direction: column; align-items: stretch; } .scale-card .sc-start { width: 100%; } }

/* ---------- 分数结果（score 型） ---------- */
.level-badge {
  display: inline-block; padding: 6px 18px; border-radius: 999px;
  font-size: 15px; font-weight: 700; border: 1px solid; margin: 14px 0 6px;
}

/* ---------- 子量表结果（subscale 型） ---------- */
.subscale-row { margin-bottom: 20px; }
.subscale-row .sub-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.subscale-row .sub-head span:first-child { font-weight: 600; }
.subscale-row .sub-badge { font-size: 12px; padding: 2px 10px; border-radius: 999px; font-weight: 600; border: 1px solid; }
.subscale-row .sub-score { font-size: 14px; color: var(--secondary); margin-bottom: 6px; }
.subscale-row .sub-score b { font-size: 22px; color: var(--primary); }
.subscale-row .sub-max { font-size: 14px; }

/* ---------- 历史：量表记录 ---------- */
.hist-head .pill.scale { background: rgba(108,92,231,.1); color: var(--accent); }
.hist-head .ic.scale { background: rgba(108,92,231,.1); color: var(--accent); }
.subscale-mini { margin-top: 14px; }
.subscale-mini .sm-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--gray-100); border-radius: 12px; margin-bottom: 8px; font-size: 14px; }

/* ---------- 通用测试：未登录保存提示 ---------- */
.form-tip { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--secondary); background: rgba(108,92,231,.08); border-radius: 14px; padding: 12px 16px; }
.form-tip svg { color: var(--accent); flex: 0 0 auto; }

/* ---------- 测试前引导页（intro） ---------- */
.test-intro { max-width: 680px; margin: 40px auto; padding: 0 20px; }
.intro-card { text-align: center; padding: 44px 36px; }
.intro-icon {
  width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 22px;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: var(--accent); box-shadow: var(--shadow-lg);
}
.intro-icon svg { width: 38px; height: 38px; }
.intro-icon.mbti-accent { background: var(--mbti); }
.intro-icon.dep-accent { background: var(--depression); }
.intro-icon.scale-accent { background: var(--accent); }
.intro-card h1 { font-size: 28px; margin-bottom: 10px; }
.intro-desc { max-width: 520px; margin: 0 auto; }
.intro-stats { display: flex; justify-content: center; gap: 36px; margin: 22px 0 6px; }
.intro-stats .is { display: flex; flex-direction: column; align-items: center; }
.intro-stats .is-n { font-size: 26px; font-weight: 800; color: var(--primary); }
.intro-stats .is-l { font-size: 13px; color: var(--secondary); }
.intro-features { list-style: none; text-align: left; max-width: 460px; margin: 18px auto 0; }
.intro-features li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; font-size: 15px; color: var(--secondary); }
.intro-features li svg { color: var(--mbti); flex: 0 0 auto; margin-top: 3px; }
.intro-features li b { color: var(--primary); margin-right: 4px; }
.intro-features li i { font-style: normal; font-size: 13px; }

/* 登录提醒（引导页内） */
.login-state {
  display: flex; align-items: center; gap: 14px; text-align: left;
  border-radius: 16px; padding: 16px 18px; margin: 24px 0 8px;
}
.login-state.ok { background: rgba(0,184,148,.1); color: #00896b; font-size: 14px; }
.login-state.ok svg { flex: 0 0 auto; }
.login-state.ok b { color: #006b53; }
.login-state.warn { background: #FFF8E6; border: 1px solid #FFE2A8; color: #8a6d1a; flex-wrap: wrap; }
.login-state.warn .ls-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: #ffecc2; color: #b8860b; display: flex; align-items: center; justify-content: center; }
.login-state.warn .ls-ic svg { width: 20px; height: 20px; }
.login-state.warn .ls-main { flex: 1; min-width: 200px; }
.login-state.warn .ls-main b { display: block; color: #6b520f; margin-bottom: 2px; }
.login-state.warn .ls-main span { font-size: 13px; line-height: 1.5; }
.login-state.warn .ls-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.login-state.warn .ls-actions .btn-text { color: #8a6d1a; }
.btn-primary.sm, .btn-text.sm { padding: 9px 16px; font-size: 13px; }

.intro-actions { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 22px; flex-wrap: wrap; }
.intro-actions .btn-primary { padding: 14px 40px; }

/* 结果页：未保存提示（游客） */
.guest-note {
  display: flex; align-items: center; gap: 8px; font-size: 14px; color: #8a6d1a;
  background: #FFF8E6; border: 1px solid #FFE2A8; border-radius: 16px;
  padding: 12px 16px; margin-bottom: 20px;
}
.guest-note svg { color: #b8860b; flex: 0 0 auto; }
.guest-note a { color: var(--accent); font-weight: 700; margin: 0 2px; }

@media (max-width: 560px) {
  .intro-card { padding: 32px 20px; }
  .login-state.warn .ls-actions { width: 100%; }
  .login-state.warn .ls-actions a { flex: 1; justify-content: center; }
}

/* ---------- 专业测试库横幅 ---------- */
.login-banner {
  display: flex; align-items: center; gap: 10px; font-size: 14px;
  padding: 14px 18px; border-radius: 14px; margin-bottom: 22px;
}
.login-banner svg { flex: 0 0 auto; }
.login-banner a { color: var(--accent); font-weight: 700; margin-left: 6px; }
.login-banner.ok { background: rgba(0,184,148,.10); color: #00805a; }
.login-banner.warn { background: rgba(108,92,231,.10); color: #4a3eb1; }
.login-banner.off { background: #FFF1F0; color: #c0392b; border: 1px solid #FBC9C4; }

/* ---------- 专业测试门禁页 ---------- */
.test-gate { max-width: 560px; margin: 40px auto; padding: 0 20px; }
.gate-card { text-align: center; padding: 44px 28px; }
.gate-card.lock { border-top: 4px solid var(--accent); }
.gate-card.off  { border-top: 4px solid #c0392b; }
.gate-ic { display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(108,92,231,.10); color: var(--accent); margin-bottom: 18px; }
.gate-card.off .gate-ic { background: #FFF1F0; color: #c0392b; }
.gate-card h1 { font-size: 22px; margin-bottom: 8px; }
.gate-card .muted { font-size: 14px; line-height: 1.7; margin-bottom: 22px; }
.gate-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- 注册页：支付步骤 ---------- */
.auth-wide { max-width: 720px; }
.pay-step { margin: 8px 0 22px; padding: 18px; border-radius: 16px; background: #F7F8FC; border: 1px solid var(--border); }
.step-title { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--primary); margin-bottom: 12px; }
.step-no { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; }
.qr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.qr-card { background: #fff; border-radius: 14px; padding: 14px; border: 1px solid var(--border); text-align: center; }
.qr-head { display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 700; font-size: 14px; padding: 8px; border-radius: 10px; margin-bottom: 10px; }
.qr-head.wechat { background: #07C160; color: #fff; }
.qr-head.alipay { background: #1677FF; color: #fff; }
.qr-card img { width: 100%; max-width: 220px; height: auto; display: block; margin: 0 auto; border-radius: 8px; }
.qr-name { font-size: 13px; color: var(--primary); font-weight: 600; margin-top: 10px; }
.qr-tip { font-size: 12px; color: var(--secondary); margin-top: 4px; }
.pay-tip { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px 14px; background: #FFF8E6; border-radius: 10px; color: #6b520f; font-size: 13px; line-height: 1.6; }
.pay-tip svg { flex: 0 0 auto; color: #b8860b; margin-top: 2px; }
.field-hint { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; color: var(--secondary); margin-top: 6px; line-height: 1.5; }
.field-hint svg { flex: 0 0 auto; color: var(--secondary); margin-top: 1px; }

@media (max-width: 560px) {
  .qr-row { grid-template-columns: 1fr; }
  .auth-wide { max-width: 100%; }
}

/* ---------- 管理员后台 ---------- */
.admin-page { max-width: 1100px; margin: 30px auto; padding: 0 20px; }
.ap-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.ap-head h1 { display: flex; align-items: center; gap: 10px; font-size: 22px; color: var(--primary); }
.ap-head h1 svg { color: var(--accent); }
.ap-stat { background: rgba(108,92,231,.10); color: var(--accent); padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.ap-table { padding: 4px; overflow-x: auto; }
.ap-tbl { width: 100%; border-collapse: collapse; min-width: 720px; }
.ap-tbl th, .ap-tbl td { padding: 14px 16px; text-align: left; font-size: 14px; vertical-align: middle; }
.ap-tbl thead th { font-size: 13px; font-weight: 700; color: var(--secondary); border-bottom: 1px solid var(--border); }
.ap-tbl tbody tr { border-bottom: 1px solid var(--border); }
.ap-tbl tbody tr:last-child { border-bottom: 0; }
.ap-tbl tbody tr:hover { background: #F7F8FC; }
.admin-pill { display: inline-block; margin-left: 8px; background: rgba(108,92,231,.15); color: var(--accent); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; vertical-align: middle; }
.code-pw, .code-tx { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; background: #F7F8FC; padding: 4px 10px; border-radius: 6px; color: var(--primary); }
.code-pw { color: #c0392b; font-weight: 600; }
.st-ok { color: #00B894; font-weight: 700; font-size: 13px; }
.st-off { color: #c0392b; font-weight: 700; font-size: 13px; }
.btn-toggle { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--border); background: #fff; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--primary); transition: all .15s; }
.btn-toggle:hover { background: #F7F8FC; }
.btn-toggle.is-on { background: rgba(0,184,148,.12); color: #00805a; border-color: rgba(0,184,148,.3); }
.btn-toggle.is-on:hover { background: rgba(0,184,148,.2); }
.btn-toggle:disabled { opacity: .5; cursor: not-allowed; }