/* ============================================================
 * 灯塔志愿 · 专业人格测试独立页（墨绿 + 香槟金）
 * ============================================================ */

:root {
  --navy-950:#071a12; --navy-900:#0b2419; --navy-800:#113323; --navy-700:#17452f;
  --navy-600:#1d5c3e; --navy-500:#247350;
  --gold-500:#d4af6a; --gold-400:#e3c78d; --gold-300:#f0e0b6;
  --ink:#1a211d; --muted:#63716a; --line:#e3eae3; --bg:#f6f8f5; --bg-soft:#edf2ec;
  --shadow-sm:0 2px 10px rgba(11,36,25,.06);
  --shadow-md:0 10px 34px rgba(11,36,25,.10);
}

* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--navy-600); text-decoration:none; }
button { font-family:inherit; }

/* ---------- 顶栏 ---------- */
.p100-topbar {
  background:linear-gradient(135deg,var(--navy-950),var(--navy-700));
  color:#fff; padding:14px 28px; display:flex; align-items:center; gap:12px;
  position:sticky; top:0; z-index:20;
}
.p100-brand { font-size:17px; font-weight:700; letter-spacing:1px; }
.p100-brand .lamp { color:var(--gold-300); margin-right:6px; }
.p100-topbar .tb-sub { font-size:12.5px; opacity:.65; }
.p100-topbar .spacer { flex:1; }
.p100-topbar a.tb-home {
  font-size:13px; color:var(--gold-300); border:1px solid rgba(240,224,182,.4);
  padding:6px 14px; border-radius:999px; transition:all .2s;
}
.p100-topbar a.tb-home:hover { background:rgba(240,224,182,.12); }
/* 人格测试入口：当前页实心高亮（与首页导航同款胶囊） */
.p100-topbar a.tb-test {
  font-size:13px; font-weight:600; color:#1a3a28;
  background:var(--gold-400); border:1px solid var(--gold-400);
  padding:6px 14px; border-radius:999px; white-space:nowrap;
  transition:all .2s;
}
.p100-topbar a.tb-test:hover { background:var(--gold-300); border-color:var(--gold-300); }

.p100-wrap { max-width:860px; margin:0 auto; padding:36px 20px 80px; }

/* ---------- 阶段一：欢迎页 ---------- */
.stage { display:none; animation:fadeUp .45s ease both; }
.stage.active { display:block; }
@keyframes fadeUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }

.hero-card {
  background:linear-gradient(150deg,var(--navy-900) 0%,var(--navy-700) 60%,var(--navy-600) 100%);
  border-radius:24px; padding:48px 44px; color:#fff; text-align:center;
  box-shadow:var(--shadow-md); position:relative; overflow:hidden;
}
.hero-card::after {
  content:""; position:absolute; right:-70px; top:-70px; width:240px; height:240px;
  border-radius:50%; background:radial-gradient(circle,rgba(212,175,106,.28),transparent 70%);
}
.hero-badge {
  display:inline-block; font-size:12.5px; color:var(--gold-300);
  border:1px solid rgba(240,224,182,.45); border-radius:999px; padding:4px 16px; margin-bottom:18px;
  letter-spacing:2px;
}
.hero-card h1 { font-size:30px; font-weight:800; margin-bottom:14px; letter-spacing:1px; }
.hero-card h1 .gold { color:var(--gold-300); }
.hero-card p.lead { font-size:15px; color:rgba(255,255,255,.82); max-width:560px; margin:0 auto 26px; }
.hero-meta { display:flex; justify-content:center; gap:28px; flex-wrap:wrap; margin-bottom:30px; }
.hero-meta .m { text-align:center; }
.hero-meta .m .n { font-size:22px; font-weight:800; color:var(--gold-300); }
.hero-meta .m .l { font-size:12.5px; color:rgba(255,255,255,.7); }

.btn-gold {
  background:linear-gradient(135deg,#f0dfb0,#ddbd7e,#c9a45c); color:#3d2e10;
  border:none; border-radius:14px; padding:15px 44px; font-size:16px; font-weight:700;
  cursor:pointer; box-shadow:0 8px 22px rgba(201,164,92,.35); transition:all .2s;
}
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(201,164,92,.45); }
.btn-gold:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.btn-ghost {
  background:transparent; color:var(--navy-700); border:1.5px solid var(--navy-600);
  border-radius:12px; padding:12px 26px; font-size:14.5px; font-weight:600; cursor:pointer;
  transition:all .2s;
}
.btn-ghost:hover { background:var(--bg-soft); }
.btn-outline-light {
  background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.55);
  border-radius:12px; padding:12px 28px; font-size:14.5px; font-weight:600; cursor:pointer;
}
.btn-outline-light:hover { background:rgba(255,255,255,.1); }

.info-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px; }
.info-cell {
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px 20px;
  box-shadow:var(--shadow-sm);
}
.info-cell .ic { font-size:24px; margin-bottom:8px; }
.info-cell h4 { font-size:14.5px; color:var(--navy-900); margin-bottom:5px; }
.info-cell p { font-size:13px; color:var(--muted); line-height:1.7; }

.dim-preview { background:#fff; border:1px solid var(--line); border-radius:18px; padding:26px 28px; margin-top:20px; box-shadow:var(--shadow-sm); }
.dim-preview h4 { font-size:15px; color:var(--navy-900); margin-bottom:14px; }
.dim-chips { display:flex; flex-wrap:wrap; gap:10px; }
.dim-chip {
  font-size:13px; color:var(--navy-800); background:var(--bg-soft);
  border:1px solid var(--line); border-radius:999px; padding:6px 16px;
}
.dim-chip b { color:var(--navy-600); }

.resume-tip {
  margin-top:20px; background:#faf5e8; border:1px solid #f3e8cd; border-radius:14px;
  padding:16px 20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.resume-tip .rt-text { flex:1; min-width:200px; font-size:13.5px; color:#6b5320; }
.resume-tip .rt-text b { color:#8f6f2c; }

.welcome-foot { text-align:center; margin-top:28px; font-size:12.5px; color:var(--muted); }

/* ---------- 阶段二：答题 ---------- */
.quiz-head { margin-bottom:22px; }
.quiz-progress-line { display:flex; align-items:center; gap:14px; }
.quiz-progress-line .pq-count { font-size:14px; font-weight:700; color:var(--navy-800); white-space:nowrap; }
.quiz-progress-line .pq-count b { font-size:20px; color:var(--navy-600); }
.pq-track { flex:1; height:10px; background:var(--bg-soft); border-radius:999px; overflow:hidden; }
.pq-fill {
  height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,var(--navy-600),var(--gold-500));
  transition:width .35s ease;
}
.pq-percent { font-size:12.5px; color:var(--muted); width:42px; text-align:right; }
.pq-dim { margin-top:10px; font-size:12.5px; color:var(--muted); }
.pq-dim .dimtag {
  display:inline-block; background:#dcefe4; color:var(--navy-700);
  border-radius:999px; padding:2px 12px; font-weight:600; margin-right:8px;
}

.q-card {
  background:#fff; border:1px solid var(--line); border-radius:22px;
  padding:40px 36px; box-shadow:var(--shadow-md);
}
.q-stem { font-size:21px; font-weight:700; color:var(--navy-900); line-height:1.6; margin-bottom:28px; }
.q-stem .qno {
  display:inline-block; font-size:13px; color:var(--gold-500);
  border:1.5px solid var(--gold-500); border-radius:10px; padding:1px 10px;
  margin-right:10px; vertical-align:middle; font-weight:700;
}
.q-options { display:flex; flex-direction:column; gap:14px; }
.q-opt {
  display:flex; align-items:center; gap:14px; text-align:left;
  background:var(--bg); border:2px solid var(--line); border-radius:16px;
  padding:18px 22px; font-size:15.5px; color:var(--ink); line-height:1.6;
  cursor:pointer; transition:all .18s; width:100%;
}
.q-opt:hover { border-color:var(--navy-500); background:#fff; box-shadow:var(--shadow-sm); transform:translateX(4px); }
.q-opt .radio {
  flex-shrink:0; width:22px; height:22px; border-radius:50%; border:2px solid #c3d3c6;
  position:relative; transition:all .18s;
}
.q-opt:hover .radio { border-color:var(--navy-500); }
.q-opt.picked { border-color:var(--navy-600); background:#dcefe4; }
.q-opt.picked .radio { border-color:var(--navy-600); background:var(--navy-600); }
.q-opt.picked .radio::after {
  content:""; position:absolute; left:50%; top:50%; width:8px; height:8px;
  border-radius:50%; background:var(--gold-300); transform:translate(-50%,-50%);
}

.quiz-foot { display:flex; justify-content:space-between; align-items:center; margin-top:22px; }
.q-prev {
  background:transparent; border:none; color:var(--muted); font-size:14px;
  cursor:pointer; padding:8px 12px; border-radius:8px;
}
.q-prev:hover:not(:disabled) { color:var(--navy-700); background:var(--bg-soft); }
.q-prev:disabled { opacity:.35; cursor:not-allowed; }
.q-exit { background:transparent; border:none; color:var(--muted); font-size:13px; cursor:pointer; padding:8px 12px; }
.q-exit:hover { color:var(--rush, #e11d48); }
.q-tip { font-size:12.5px; color:var(--muted); text-align:center; margin-top:16px; }

/* ---------- 阶段三：结果页 ---------- */
.result-hero {
  background:linear-gradient(150deg,var(--navy-950),var(--navy-700));
  border-radius:24px; padding:40px; color:#fff; text-align:center; box-shadow:var(--shadow-md);
}
.result-hero .rh-emoji { font-size:40px; }
.result-hero .rh-code {
  font-size:56px; font-weight:800; letter-spacing:10px; color:var(--gold-300);
  margin:8px 0 6px; padding-left:10px;
}
.result-hero .rh-nick { font-size:19px; font-weight:700; margin-bottom:8px; }
.result-hero .rh-trait { font-size:14px; color:rgba(255,255,255,.82); max-width:580px; margin:0 auto; }

.sec-card {
  background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:28px 30px; margin-top:20px; box-shadow:var(--shadow-sm);
}
.sec-card h3 {
  font-size:17px; color:var(--navy-900); margin-bottom:18px;
  display:flex; align-items:center; gap:9px;
}
.sec-card h3::before {
  content:""; width:5px; height:18px; border-radius:3px;
  background:linear-gradient(180deg,var(--gold-500),var(--navy-600));
}

/* 维度条 */
.res-bars { display:flex; flex-direction:column; gap:20px; }
.res-bar-row .rb-head { display:flex; justify-content:space-between; font-size:13.5px; margin-bottom:7px; }
.rb-head .rb-pole { font-weight:700; color:var(--muted); }
.rb-head .rb-pole.win { color:var(--navy-700); }
.rb-head .rb-pole .pl { font-size:12px; font-weight:500; margin-right:5px; }
.rb-head .rb-pole.win .pl { color:var(--gold-500); }
.rb-track { height:14px; border-radius:999px; background:var(--bg-soft); position:relative; overflow:hidden; }
.rb-fill-l, .rb-fill-r { position:absolute; top:0; bottom:0; border-radius:999px; }
.rb-fill-l { left:0; background:linear-gradient(90deg,var(--navy-600),#2f8a63); }
.rb-fill-r { right:0; background:linear-gradient(270deg,var(--gold-500),#e3c78d); }
.rb-mid-label {
  text-align:center; font-size:11.5px; color:var(--muted); margin-top:5px;
}
.rb-strength { font-size:12px; color:#8f6f2c; background:#faf5e8; border-radius:999px; padding:1px 10px; margin-left:8px; }

/* 报告段落 */
.report-p { font-size:14.5px; color:var(--ink); margin-bottom:12px; }
.report-p:last-child { margin-bottom:0; }
.report-p .rp-label {
  display:inline-block; font-size:12.5px; font-weight:700; color:var(--navy-700);
  background:#dcefe4; border-radius:8px; padding:2px 10px; margin-right:8px;
}

.major-list { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.major-card {
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  background:var(--bg); border:1.5px solid var(--line); border-radius:14px;
  padding:15px 18px; cursor:pointer; transition:all .2s; text-align:left; width:100%;
}
.major-card:hover { border-color:var(--gold-500); background:#fff; box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.major-card .mc-name { font-size:14.5px; font-weight:700; color:var(--navy-800); }
.major-card .mc-go { font-size:12px; color:var(--muted); margin-top:2px; }
.major-card .mc-arrow { color:var(--gold-500); font-size:17px; font-weight:700; }

.result-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:28px; }
.result-note {
  margin-top:22px; background:#faf5e8; border-left:4px solid var(--gold-500);
  border-radius:0 12px 12px 0; padding:14px 18px; font-size:12.5px; line-height:1.9; color:#8f6f2c;
}

/* ---------- 弹层（退出/续测确认） ---------- */
.p100-modal-mask {
  position:fixed; inset:0; background:rgba(7,26,18,.55); z-index:100;
  display:none; align-items:center; justify-content:center; padding:20px;
}
.p100-modal-mask.show { display:flex; }
.p100-modal {
  background:#fff; border-radius:18px; padding:28px 30px; max-width:420px; width:100%;
  box-shadow:var(--shadow-md);
}
.p100-modal h4 { font-size:17px; color:var(--navy-900); margin-bottom:10px; }
.p100-modal p { font-size:14px; color:var(--muted); margin-bottom:22px; }
.p100-modal .mm-actions { display:flex; gap:12px; justify-content:flex-end; flex-wrap:wrap; }
.mm-actions .btn-gold { padding:10px 24px; font-size:14px; }
.mm-actions .btn-ghost { padding:10px 22px; font-size:14px; }

.toast {
  position:fixed; left:50%; bottom:34px; transform:translateX(-50%) translateY(20px);
  background:var(--navy-800); color:#fff; font-size:13.5px; padding:11px 22px;
  border-radius:999px; opacity:0; pointer-events:none; transition:all .3s; z-index:120;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

@media (max-width:680px) {
  .p100-topbar { padding:12px 16px; gap:8px; }
  .p100-topbar .tb-sub { display:none; }
  .hero-card { padding:36px 24px; }
  .hero-card h1 { font-size:24px; }
  .info-grid { grid-template-columns:1fr; }
  .major-list { grid-template-columns:1fr; }
  .q-card { padding:28px 22px; }
  .q-stem { font-size:18px; }
  .result-hero { padding:30px 20px; }
  .result-hero .rh-code { font-size:44px; letter-spacing:7px; }
  .sec-card { padding:22px 20px; }
}

/* ============================================================
 * 暗色模式：夜海手札（html[data-theme="dark"]）
 * ============================================================ */
html[data-theme="dark"] {
  --ink:#e7eee9; --muted:#8ea397; --line:#22382c;
  --bg:#0c1712; --bg-soft:#112019;
  --shadow-sm:0 2px 10px rgba(0,0,0,.35);
  --shadow-md:0 10px 34px rgba(0,0,0,.5);
  color-scheme:dark;
}
html[data-theme="dark"] body { background:var(--bg); color:var(--ink); }
html[data-theme="dark"] a { color:var(--gold-400); }

/* 顶栏主题按钮：灯塔图标（暗塔=暗色，亮塔=亮色） */
.theme-toggle {
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; flex-shrink:0; cursor:pointer; padding:0;
  transition:border-color .2s, background-color .2s, box-shadow .4s;
}
.theme-toggle .tt-moon,
.theme-toggle .tt-sun { display:none; }
.p100-topbar .theme-toggle {
  width:32px; height:32px;
  background-color:rgba(255,255,255,.08); border-color:rgba(240,224,182,.35);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.2 21h5.6l-.9-9.5h-3.8L9.2 21z' fill='%23a89058'/%3E%3Cpath d='M10.4 11.5h3.2l-.35-3h-2.5l-.35 3z' fill='%238f7a4d'/%3E%3Crect x='10.6' y='6.6' width='2.8' height='2.2' rx='.5' fill='%233a3320'/%3E%3Cpath d='M12 2.2l1.3 3.6h-2.6L12 2.2z' fill='%23c9a45c'/%3E%3C/svg%3E");
  background-size:20px 20px; background-repeat:no-repeat; background-position:center;
}
html[data-theme="light"] .p100-topbar .theme-toggle {
  border-color:var(--gold-400);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.2 21h5.6l-.9-9.5h-3.8L9.2 21z' fill='%23d4af6a'/%3E%3Cpath d='M10.4 11.5h3.2l-.35-3h-2.5l-.35 3z' fill='%23c9a45c'/%3E%3Crect x='10.6' y='6.6' width='2.8' height='2.2' rx='.5' fill='%23fff3c4'/%3E%3Cpath d='M12 2.2l1.3 3.6h-2.6L12 2.2z' fill='%23f0e0b6'/%3E%3Cpath d='M12.6 4.6h3.4M11.4 4.6H8' stroke='%23f0e0b6' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
  animation:lampGlow 4s ease-in-out infinite;
}
.p100-topbar .theme-toggle:hover { border-color:var(--gold-400); }

@keyframes lampGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(212,175,106,.24), 0 0 10px rgba(212,175,106,.32); }
  45%      { box-shadow: 0 0 0 1px rgba(212,175,106,.42), 0 0 18px rgba(212,175,106,.60); }
}

/* 欢迎页：信息卡 / 维度卡 / 续测提示 */
html[data-theme="dark"] .info-cell,
html[data-theme="dark"] .dim-preview { background:#101c15; border-color:#22382c; }
html[data-theme="dark"] .info-cell h4,
html[data-theme="dark"] .dim-preview h4 { color:#f2ead6; }
html[data-theme="dark"] .dim-chip { color:#c4d2c9; }
html[data-theme="dark"] .dim-chip b { color:var(--gold-400); }
html[data-theme="dark"] .resume-tip { background:rgba(212,175,106,.08); border-color:rgba(201,164,92,.3); }
html[data-theme="dark"] .resume-tip .rt-text { color:var(--gold-300); }
html[data-theme="dark"] .resume-tip .rt-text b { color:var(--gold-400); }

/* 答题页 */
html[data-theme="dark"] .quiz-progress-line .pq-count { color:#ecd9a8; }
html[data-theme="dark"] .quiz-progress-line .pq-count b { color:var(--gold-400); }
html[data-theme="dark"] .pq-dim .dimtag { background:#1d3126; color:var(--gold-300); }
html[data-theme="dark"] .q-card { background:#101c15; border-color:#22382c; }
html[data-theme="dark"] .q-stem { color:#f2ead6; }
html[data-theme="dark"] .q-opt { border-color:#2b4436; }
html[data-theme="dark"] .q-opt:hover { border-color:var(--gold-500); background:#16261d; }
html[data-theme="dark"] .q-opt .radio { border-color:#3a5a48; }
html[data-theme="dark"] .q-opt.picked { border-color:var(--gold-500); background:#1d3126; }
html[data-theme="dark"] .q-opt.picked .radio { border-color:var(--gold-500); background:var(--gold-500); }
html[data-theme="dark"] .q-prev:hover:not(:disabled) { color:var(--gold-400); background:var(--bg-soft); }

/* 结果页 */
html[data-theme="dark"] .sec-card { background:#101c15; border-color:#22382c; }
html[data-theme="dark"] .sec-card h3 { color:#f2ead6; }
html[data-theme="dark"] .rb-head .rb-pole.win { color:var(--gold-300); }
html[data-theme="dark"] .rb-strength { background:rgba(212,175,106,.12); color:var(--gold-400); }
html[data-theme="dark"] .report-p .rp-label { background:#1d3126; color:var(--gold-300); }
html[data-theme="dark"] .major-card:hover { background:#16261d; }
html[data-theme="dark"] .major-card .mc-name { color:#e7eee9; }
html[data-theme="dark"] .result-note { background:rgba(212,175,106,.08); color:var(--gold-400); }
html[data-theme="dark"] .btn-ghost { color:var(--gold-300); border-color:rgba(212,175,106,.5); }
html[data-theme="dark"] .btn-ghost:hover { background:#1d3126; }

/* 弹层 */
html[data-theme="dark"] .p100-modal { background:#101c15; }
html[data-theme="dark"] .p100-modal h4 { color:#f2ead6; }
html[data-theme="dark"] .p100-modal-mask { background:rgba(0,0,0,.62); }

/* 滚动条 */
html[data-theme="dark"] ::-webkit-scrollbar { width:10px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background:#0c1712; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background:#2b4436; border-radius:99px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background:#3a5a48; }