/* 大明王朝1566 人物测试 - 优化版 */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

:root {
  /* 原版主题 */
  --bg: #0d0600;
  --surface: #160b02;
  --card: #1e0f04;
  --gold: #c9a84c;
  --gold2: #e8c97a;
  --gold3: #f5dfa0;
  --red: #8b1a1a;
  --red2: #b52020;
  --red3: #d63031;
  --ink: #e0c98a;
  --ink2: #a8935a;
  --ink3: #6b5c38;
  --border: #3a2008;
  --border2: #5a3510;
  --serif: 'Noto Serif SC', 'STSong', 'SimSun', serif;
  --sans: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  min-height: 100vh;
  overflow-x: hidden;
  transition: background .5s, color .5s;
}

::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: var(--border2);
  border-radius: 2px;
}

/* ===== 封面 ===== */
#cover {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 36px 24px;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, #2a0d04 0%, #0d0600 70%);
}

#cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    repeating-linear-gradient(0deg, transparent 0px, transparent 59px, rgba(120,60,0,0.06) 59px, rgba(120,60,0,0.06) 60px),
    repeating-linear-gradient(90deg, transparent 0px, transparent 59px, rgba(120,60,0,0.04) 59px, rgba(120,60,0,0.04) 60px);
  pointer-events: none;
}

#cover::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to right, transparent 0%, var(--gold) 30%, var(--gold2) 50%, var(--gold) 70%, transparent 100%);
}

/* 装饰角框 */
.cc {
  position: absolute;
  width: 80px;
  height: 80px;
  border-color: var(--gold);
  border-style: solid;
  opacity: .4;
  animation: cornerFade 2s ease-out;
}
.cc.tl { top: 20px; left: 20px; border-width: 2px 0 0 2px; }
.cc.tr { top: 20px; right: 20px; border-width: 2px 2px 0 0; }
.cc.bl { bottom: 20px; left: 20px; border-width: 0 0 2px 2px; }
.cc.br { bottom: 20px; right: 20px; border-width: 0 2px 2px 0; }

@keyframes cornerFade {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: .4; transform: scale(1); }
}

.eyebrow {
  font-size: 12px;
  letter-spacing: 6px;
  color: var(--ink3);
  margin-bottom: 14px;
  animation: fadeup .6s .1s both;
}

.eyebrow span {
  display: inline-block;
  padding: 0 16px;
  position: relative;
}

.eyebrow span::before,
.eyebrow span::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40px;
  height: 1px;
  background: var(--ink3);
}

.eyebrow span::before {
  right: 100%;
  margin-right: -16px;
}

.eyebrow span::after {
  left: 100%;
  margin-left: -16px;
}

.cover-title {
  font-size: clamp(48px, 12vw, 96px);
  font-weight: 700;
  letter-spacing: 16px;
  line-height: 1.1;
  color: var(--gold);
  text-shadow: 0 0 60px rgba(201,168,76,0.4), 0 2px 0 rgba(0,0,0,0.5);
  margin-bottom: 6px;
  animation: fadeup .6s .2s both;
}

.cover-year {
  font-size: clamp(16px, 4.5vw, 36px);
  letter-spacing: clamp(4px, 2.5vw, 20px);
  color: var(--red2);
  margin-bottom: 4px;
  font-weight: 300;
  white-space: nowrap;
  animation: fadeup .6s .25s both;
}

.cover-sub {
  font-size: clamp(16px, 3.5vw, 26px);
  letter-spacing: 8px;
  color: var(--ink2);
  margin-bottom: 20px;
  font-weight: 300;
  animation: fadeup .6s .3s both;
}

.ornament {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 auto 16px;
  width: min(400px, 80vw);
  animation: fadeup .6s .35s both;
}

.ornament::before,
.ornament::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold));
}

.ornament::after {
  background: linear-gradient(to left, transparent, var(--gold));
}

.ornament span {
  font-size: 18px;
  color: var(--gold);
  line-height: 1;
}

.cover-quote {
  font-size: clamp(13px, 3.2vw, 16px);
  color: var(--ink2);
  font-style: italic;
  line-height: 1.8;
  margin: 0 auto 16px;
  max-width: 520px;
  padding: 0 20px;
  position: relative;
  animation: fadeup .6s .4s both;
}

.cover-quote::before {
  content: '"';
  position: absolute;
  left: -8px;
  top: -4px;
  font-size: 28px;
  color: var(--gold);
  opacity: .4;
}

.cover-quote::after {
  content: '"';
  position: absolute;
  right: -8px;
  bottom: -12px;
  font-size: 28px;
  color: var(--gold);
  opacity: .4;
}

.quote-author {
  display: block;
  text-align: right;
  font-size: 12px;
  color: var(--ink3);
  margin-top: 6px;
  font-style: normal;
}

.cover-info {
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink2);
  margin-bottom: 16px;
  max-width: 460px;
  animation: fadeup .6s .45s both;
}

.cover-info em {
  font-style: normal;
  color: var(--gold);
}

/* 版本切换器 */
.mode-switcher {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  background: rgba(255,255,255,.06);
  border-radius: 28px;
  padding: 4px;
  border: 1px solid var(--border);
  animation: fadeup .6s .5s both;
}

.mode-btn {
  padding: 10px 28px;
  font-size: 14px;
  font-family: inherit;
  letter-spacing: 3px;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--ink2);
  border-radius: 24px;
  transition: all .3s;
  white-space: nowrap;
}

.mode-btn.active {
  background: linear-gradient(135deg, var(--red) 0%, var(--red2) 100%);
  color: var(--gold2);
  box-shadow: 0 2px 12px rgba(139,26,26,.4);
}

.mode-btn:hover:not(.active) {
  color: var(--ink);
}

#btn-start {
  display: inline-block;
  background: linear-gradient(135deg, var(--red) 0%, var(--red2) 50%, var(--red3) 100%);
  color: var(--gold2);
  border: 1px solid var(--gold);
  padding: 16px 64px;
  font-size: 18px;
  font-family: inherit;
  letter-spacing: 8px;
  cursor: pointer;
  border-radius: 2px;
  transition: all .3s;
  box-shadow: 0 0 30px rgba(139,26,26,.5), inset 0 1px 0 rgba(255,255,255,.1);
  margin-bottom: 20px;
  animation: fadeup .6s .55s both;
}

#btn-start:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 40px rgba(182,32,32,.6), 0 0 0 1px var(--gold2);
  color: var(--gold3);
}

.cover-chars {
  font-size: 12px;
  color: var(--ink3);
  letter-spacing: 3px;
  line-height: 2.4;
  animation: fadeup .6s .6s both;
}

/* 登录栏 */
#auth-bar {
  margin-top: 20px;
  animation: fadeup .6s .65s both;
}

.cover-footer {
  margin-top: 30px;
  animation: fadeup .6s .7s both;
}

.social-links {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 16px;
}

.social-link {
  color: var(--ink2);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 1px;
  transition: color .2s;
}

.social-link:hover {
  color: var(--gold);
}

.copyright {
  font-size: 11px;
  color: var(--ink3);
  letter-spacing: .5px;
  line-height: 1.8;
}

.copyright.small {
  font-size: 10px;
}

/* ===== 动画 ===== */
@keyframes fadeup {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

@keyframes popin {
  from { transform: scale(.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ===== MBTI模式覆盖 ===== */
body.mode-mbti {
  --bg: #f7f4ed;
  --surface: #ffffff;
  --card: #ffffff;
  --gold: #6b4f10;
  --gold2: #3d2e08;
  --gold3: #1c1606;
  --red: #8b6914;
  --red2: #7a5c12;
  --red3: #6b4f10;
  --ink: #1c2a21;
  --ink2: #5c6b62;
  --ink3: #9aaa9f;
  --border: #dde5d9;
  --border2: #c8d4c2;
  font-family: var(--sans);
}

body.mode-mbti #cover {
  background: radial-gradient(circle at top left, #faf8f2 0%, #f7f4ed 36%, #f0ede4 100%);
}

body.mode-mbti #cover::before {
  opacity: 0;
}

body.mode-mbti #cover::after {
  height: 0;
}

body.mode-mbti .cc {
  opacity: 0;
}

body.mode-mbti .cover-title {
  color: #1c2a21;
  text-shadow: none;
  font-family: var(--sans);
  letter-spacing: -0.04em;
}

body.mode-mbti .cover-year {
  color: #8b6914;
  font-weight: 700;
}

body.mode-mbti .cover-sub {
  color: #5c6b62;
  font-weight: 500;
  letter-spacing: 4px;
}

body.mode-mbti .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid #dde5d9;
  background: #f0f5ef;
  border-radius: 999px;
  color: #3f5b45;
  font-weight: 800;
  letter-spacing: 0.14em;
}

body.mode-mbti .eyebrow span::before,
body.mode-mbti .eyebrow span::after {
  display: none;
}

body.mode-mbti .ornament {
  display: none;
}

body.mode-mbti .cover-quote {
  color: #5c6b62;
  font-style: normal;
}

body.mode-mbti .cover-quote::before,
body.mode-mbti .cover-quote::after {
  display: none;
}

body.mode-mbti .mode-switcher {
  background: #fff;
  border-color: #dde5d9;
  box-shadow: 0 2px 8px rgba(35,58,42,.06);
  border-radius: 999px;
}

body.mode-mbti .mode-btn {
  color: #5c6b62;
  font-weight: 800;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.06em;
}

body.mode-mbti .mode-btn.active {
  background: #3f5b45;
  color: #fff;
  box-shadow: 0 12px 30px rgba(63,91,69,.18);
}

body.mode-mbti #btn-start {
  background: #3f5b45;
  color: #fff;
  border: none;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(63,91,69,.18);
  letter-spacing: 4px;
  font-weight: 800;
}

body.mode-mbti #btn-start:hover {
  background: #365040;
}

/* ===== 答题页 ===== */
#quiz {
  display: none;
  height: 100vh;
  flex-direction: column;
  position: relative;
}

.qsticky {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(13,6,0,.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border2);
  padding: 14px 0;
}

.qsticky-inner {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.qhead-lbl {
  font-size: 14px;
  letter-spacing: 3px;
  color: var(--gold);
  white-space: nowrap;
}

.prog-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  max-width: 260px;
}

.prog-track {
  flex: 1;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.prog-fill {
  height: 100%;
  background: linear-gradient(to right, var(--red2), var(--gold));
  transition: width .4s;
}

.prog-lbl {
  font-size: 12px;
  color: var(--ink2);
  white-space: nowrap;
}

.prog-lbl b {
  color: var(--gold);
}

#q-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
}

#q-card {
  width: 100%;
  max-width: 720px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 36px 28px 28px;
  position: relative;
  animation: cardIn .3s ease;
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cardOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-6px); }
}

#q-card.is-leaving {
  animation: cardOut .05s ease forwards;
  pointer-events: none;
}

.qnum-badge {
  font-size: 11px;
  color: var(--gold);
  background: rgba(201,168,76,.08);
  border: 1px solid rgba(201,168,76,.2);
  padding: 3px 10px;
  border-radius: 2px;
  display: inline-block;
  margin-bottom: 16px;
}

.qtext {
  font-size: clamp(16px, 4.5vw, 20px);
  line-height: 1.9;
  color: var(--ink);
  margin-bottom: 28px;
  min-height: 80px;
}

.opts {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.opt {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  transition: all .15s;
  user-select: none;
}

.opt:hover {
  border-color: var(--ink3);
  background: rgba(255,255,255,.03);
}

.opt.sel {
  border-color: var(--gold);
  background: rgba(201,168,76,.08);
}

.opt input {
  display: none;
}

.opt-dot {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border: 1px solid var(--ink3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--ink3);
  transition: all .15s;
  margin-top: 1px;
}

.opt.sel .opt-dot {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg);
  font-weight: 700;
}

.opt-txt {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink2);
}

.opt.sel .opt-txt {
  color: var(--ink);
}

.q-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.q-nav-btn {
  background: transparent;
  color: var(--ink2);
  border: 1px solid var(--border2);
  padding: 10px 28px;
  font-size: 14px;
  font-family: inherit;
  letter-spacing: 2px;
  cursor: pointer;
  border-radius: 2px;
  transition: all .2s;
}

.q-nav-btn:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--gold);
}

.q-nav-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.q-nav-btn.primary {
  background: linear-gradient(135deg, var(--red) 0%, var(--red2) 100%);
  color: var(--gold2);
  border-color: var(--gold);
}

.q-nav-btn.primary:hover:not(:disabled) {
  box-shadow: 0 4px 20px rgba(182,32,32,.5);
  transform: translateY(-1px);
}

/* MBTI 答题页 */
body.mode-mbti .qsticky {
  background: rgba(247,244,237,.88);
  border-bottom-color: rgba(221,229,217,.8);
}

body.mode-mbti .qhead-lbl {
  color: #1c2a21;
  font-weight: 800;
}

body.mode-mbti .prog-track {
  height: 10px;
  background: #e8f0ea;
  border-radius: 999px;
}

body.mode-mbti .prog-fill {
  background: linear-gradient(90deg, #98b59d, #55745c);
  border-radius: 999px;
}

body.mode-mbti .prog-lbl {
  color: #5c6b62;
}

body.mode-mbti .prog-lbl b {
  color: #3f5b45;
}

body.mode-mbti #q-card {
  background: #fff;
  border: 1px solid #dde5d9;
  border-radius: 24px;
  box-shadow: 0 16px 48px rgba(35,58,42,.08);
  padding: 28px 24px 24px;
}

body.mode-mbti .qnum-badge {
  color: #3f5b45;
  background: #f0f5ef;
  border-color: #dde5d9;
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 800;
}

body.mode-mbti .qtext {
  font-family: var(--sans);
  line-height: 1.8;
  color: #1c2a21;
}

body.mode-mbti .opt {
  background: #fff;
  border: 1px solid #dde5d9;
  border-radius: 14px;
  padding: 14px;
}

body.mode-mbti .opt:hover {
  background: #f8fcf9;
  border-color: #c0d3c5;
}

body.mode-mbti .opt.sel {
  border-color: #aac0b0;
  background: linear-gradient(180deg, #f7fcf8, #eef6f0);
}

body.mode-mbti .opt.sel .opt-dot {
  background: #3f5b45;
  border-color: #3f5b45;
  color: #fff;
}

body.mode-mbti .opt-dot {
  border-color: #9aaa9f;
}

body.mode-mbti .opt-txt {
  font-family: var(--sans);
  color: #5c6b62;
}

body.mode-mbti .opt.sel .opt-txt {
  color: #1c2a21;
}

body.mode-mbti .q-nav {
  border-top-color: #dde5d9;
}

body.mode-mbti .q-nav-btn {
  border-radius: 14px;
  border-color: #dde5d9;
  color: #5c6b62;
  font-weight: 800;
}

body.mode-mbti .q-nav-btn:hover:not(:disabled) {
  border-color: #3f5b45;
  color: #3f5b45;
}

body.mode-mbti .q-nav-btn.primary {
  background: #3f5b45;
  color: #fff;
  border-color: transparent;
  box-shadow: 0 12px 30px rgba(63,91,69,.18);
}

/* ===== 结果页 - 原版 ===== */
#result {
  display: none;
  max-width: 720px;
  margin: 0 auto;
  padding: 60px 20px 100px;
  text-align: center;
}

.res-ey {
  font-size: 12px;
  letter-spacing: 6px;
  color: var(--ink3);
  margin-bottom: 10px;
}

.res-hl {
  font-size: 18px;
  letter-spacing: 4px;
  color: var(--gold);
  margin-bottom: 40px;
}

.res-card {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 44px 28px 36px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  animation: fadeup .6s both;
}

.res-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to right, transparent 0%, var(--gold) 40%, var(--gold) 60%, transparent 100%);
}

.res-emoji {
  font-size: 60px;
  display: block;
  margin-bottom: 16px;
  animation: popin .5s .2s both cubic-bezier(.175,.885,.32,1.275);
}

.res-title {
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--ink2);
  margin-bottom: 8px;
}

.res-name {
  font-size: clamp(40px, 10vw, 72px);
  font-weight: 700;
  letter-spacing: 12px;
  line-height: 1.1;
  margin-bottom: 28px;
  animation: fadeup .6s .3s both;
}

.res-quote {
  font-size: clamp(14px, 3.5vw, 17px);
  color: var(--gold2);
  font-style: italic;
  margin-bottom: 16px;
  letter-spacing: 1px;
  line-height: 1.7;
  animation: fadeup .6s .25s both;
}

.res-desc {
  font-size: 15px;
  line-height: 2.4;
  color: var(--ink2);
  text-align: left;
  animation: fadeup .6s .5s both;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 28px;
  animation: fadeup .6s .4s both;
}

.tag {
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 12px;
  letter-spacing: 2px;
  border: 1px solid;
}

.res-div {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border2), transparent);
  margin: 24px 0;
}

/* 雷达图 */
.radar-wrap {
  margin: 28px 0;
  animation: fadeup .6s .45s both;
}

.radar-title {
  font-size: 12px;
  letter-spacing: 4px;
  color: var(--ink3);
  margin-bottom: 16px;
}

#radar-canvas {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

/* 相似人物 */
.also-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 24px;
  margin-bottom: 24px;
  animation: fadeup .6s .6s both;
}

.also-title {
  font-size: 12px;
  letter-spacing: 4px;
  color: var(--ink3);
  margin-bottom: 18px;
}

.also-list {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.also-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
  min-width: 90px;
  cursor: pointer;
  transition: all .2s;
}

.also-item:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}

.also-emoji {
  font-size: 22px;
}

.also-name {
  font-size: 14px;
  color: var(--ink);
}

.also-pct {
  font-size: 12px;
  color: var(--ink3);
}

/* 按钮 */
.action-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  animation: fadeup .6s .7s both;
}

.action-btns button {
  padding: 12px 32px;
  font-size: 14px;
  font-family: inherit;
  letter-spacing: 4px;
  cursor: pointer;
  border-radius: 2px;
  transition: all .3s;
  border: 1px solid;
}

#btn-share {
  background: linear-gradient(135deg, var(--red) 0%, var(--red2) 100%);
  color: var(--gold2);
  border-color: var(--gold);
}

#btn-share:hover {
  box-shadow: 0 4px 30px rgba(182,32,32,.6);
  transform: translateY(-2px);
}

#btn-retry {
  background: transparent;
  color: var(--ink2);
  border-color: var(--border2);
}

#btn-retry:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* ===== 海报弹窗 ===== */
#poster-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0,0,0,.92);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20px;
}

#poster-modal.active {
  display: flex;
}

#poster-canvas {
  display: block;
  max-width: min(100%, 400px);
  max-height: 72vh;
  border: none;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,.8);
}

.poster-tip {
  color: #aaa;
  font-size: 13px;
  margin-top: 16px;
  letter-spacing: 1px;
}

.poster-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.poster-close:hover {
  border-color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.2);
}

/* ===== 响应式 ===== */
@media (max-width: 480px) {
  .qsticky-inner {
    padding: 0 16px;
  }

  #q-card {
    padding: 28px 20px 22px;
  }

  .res-card {
    padding: 36px 20px 28px;
  }

  .also-item {
    min-width: 80px;
    padding: 10px 14px;
  }

  .mode-btn {
    padding: 8px 18px;
    font-size: 13px;
    letter-spacing: 2px;
  }
}

/* MBTI 结果页样式 */
.mbti-result {
  display: none;
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 20px 100px;
  text-align: center;
}

.mbti-result-header {
  font-size: 12px;
  letter-spacing: 6px;
  color: #9aaa9f;
  margin-bottom: 30px;
}

.mbti-main-card {
  background: linear-gradient(180deg, #f7fcf8, #eef6f0);
  border: 1px solid #dde5d9;
  border-radius: 16px;
  padding: 40px 24px 32px;
  margin-bottom: 24px;
}

.mbti-type-label {
  font-size: 13px;
  color: #6b7c6e;
  margin-bottom: 12px;
}

.mbti-type-name {
  font-size: clamp(32px, 8vw, 48px);
  font-weight: 700;
  margin-bottom: 8px;
}

.mbti-type-code {
  font-size: 18px;
  color: #3f5b45;
  margin-bottom: 20px;
  font-family: monospace;
}

.mbti-quote {
  font-size: 15px;
  color: #5a6b5d;
  font-style: italic;
  line-height: 1.6;
}

.mbti-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 30px;
}

.mbti-tag {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
}

.mbti-desc {
  background: #fff;
  border: 1px solid #e5ebe5;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  text-align: left;
}

.mbti-desc h3 {
  color: #3f5b45;
  font-size: 16px;
  margin-bottom: 12px;
}

.mbti-desc p {
  color: #5a6b5d;
  line-height: 1.8;
  font-size: 15px;
}

.mbti-also-box {
  background: #f7fcf8;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
}

.mbti-also-title {
  font-size: 14px;
  color: #6b7c6e;
  margin-bottom: 16px;
}

.mbti-also-list {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.mbti-also-item {
  background: #fff;
  border: 1px solid #dde5d9;
  border-radius: 12px;
  padding: 16px 20px;
  text-align: center;
  min-width: 80px;
}

.mbti-also-emoji {
  font-size: 28px;
  margin-bottom: 8px;
}

.mbti-also-name {
  font-size: 14px;
  color: #3f5b45;
  font-weight: 600;
}

.mbti-also-type {
  font-size: 12px;
  color: #9aaa9f;
  margin-top: 4px;
}

.mbti-action-btns {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.mbti-btn-share, .mbti-btn-retry {
  padding: 14px 28px;
  border-radius: 25px;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.mbti-btn-share {
  background: #3f5b45;
  color: #fff;
  border: none;
}

.mbti-btn-retry {
  background: #fff;
  color: #3f5b45;
  border: 1px solid #3f5b45;
}

/* SEO: 结构化数据 */
.schema-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* AI 评价区域 */
.ai-section {
  display: none;
  margin: 30px auto;
  max-width: 600px;
  padding: 24px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 16px;
  text-align: left;
}

.ai-section.show {
  display: block;
  animation: fadeup .5s both;
}

.ai-section h4 {
  color: #c9a84c;
  font-size: 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-text {
  color: #e8e8e8;
  font-size: 15px;
  line-height: 1.8;
  min-height: 60px;
}

.ai-text.loading {
  color: #888;
  font-style: italic;
}

.ai-btn {
  margin-top: 16px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #c9a84c 0%, #a68b3d 100%);
  color: #1a1a2e;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: transform .2s;
}

.ai-btn:hover {
  transform: scale(1.02);
}

.ai-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

#btn-ai {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border-color: #667eea;
}