:root {
  color-scheme: dark;
  --bg: #080a14;
  --panel: #111425;
  --panel-2: #19182d;
  --line: rgba(187, 147, 92, .27);
  --gold: #cda467;
  --cream: #eee7dc;
  --muted: #9c9aad;
  --red: #693a78;
  --red-light: #a35c9f;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #04050a; font-family: "Microsoft YaHei", "PingFang SC", sans-serif; color: var(--cream); }
button, input { font: inherit; }
button { cursor: pointer; }
.app-shell { width: min(100%, 470px); min-height: 100vh; margin: 0 auto; overflow: hidden; background: var(--bg); border-inline: 1px solid rgba(255,255,255,.04); }
.topbar { height: 48px; position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 14px; background: rgba(7,8,18,.94); backdrop-filter: blur(14px); }
.topbar strong { font-size: 17px; }
.icon-button { justify-self: start; border: 0; color: white; background: none; font-size: 36px; line-height: 1; padding: 0 10px 4px 0; }
.menu-pill { justify-self: end; border: 1px solid #666; border-radius: 18px; padding: 5px 10px; color: #eee; font-size: 13px; }
.view { display: none; padding: 18px; min-height: calc(100vh - 48px); }
.view.active { display: block; }
.hero { position: relative; min-height: 550px; padding-top: 10px; text-align: center; overflow: hidden; background: radial-gradient(circle at 50% 42%, rgba(111,60,132,.30), transparent 24%), linear-gradient(115deg, transparent 35%, rgba(129,111,197,.08) 49%, transparent 52%); }
.hero::before, .hero::after { content: ""; position: absolute; width: 320px; height: 320px; border: 1px solid rgba(190,145,68,.11); border-radius: 50%; left: 50%; top: 210px; transform: translateX(-50%); }
.hero::after { width: 430px; height: 430px; top: 155px; }
.eyebrow { color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: 2px; }
.chapter { display: flex; justify-content: space-between; color: var(--gold); font-family: Georgia, serif; font-size: 12px; margin-top: -5px; }
.chapter span { border: 1px solid var(--line); transform: rotate(45deg); padding: 8px; }
.chapter span::first-line { transform: rotate(-45deg); }
.gold-kicker { color: var(--gold); font-size: 13px; font-weight: 700; }
h1 { margin: 4px 0 6px; font-family: Georgia, "Songti SC", serif; font-size: 40px; }
.intro { max-width: 320px; margin: 0 auto; color: #c8baaa; font-size: 13px; line-height: 1.65; }
.sigil { width: 220px; height: 220px; position: relative; margin: 25px auto 0; border: 1px solid rgba(201,157,79,.45); border-radius: 50%; z-index: 1; }
.sigil::before { content: ""; position: absolute; width: 70px; height: 70px; left: 74px; top: 74px; transform: rotate(45deg); background: linear-gradient(135deg, #78508e, #252039); border: 1px solid #a56ca5; box-shadow: 0 0 30px rgba(116,69,142,.48); }
.sigil > span:not(.center-mark) { --angle: calc(var(--i) * 51.43deg - 90deg); position: absolute; width: 62px; height: 62px; left: 78px; top: 78px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #695027; background: rgba(9,7,8,.9); color: var(--cream); font-weight: 700; font-size: 12px; transform: rotate(var(--angle)) translateY(-102px) rotate(calc(-1 * var(--angle))); }
.center-mark { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; font: bold 28px Georgia; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); margin-bottom: 8px; }
.stats div { padding: 9px; text-align: center; border-right: 1px solid var(--line); }
.stats div:last-child { border: 0; }
.stats b, .stats small { display: block; }
.stats small { color: var(--muted); font-size: 11px; margin-top: 2px; }
.mode-card { display: grid; gap: 4px; border: 1px solid var(--red-light); border-radius: 8px; padding: 12px; background: linear-gradient(110deg, rgba(91,54,113,.42), transparent); margin: 8px 0; }
.mode-card small { color: var(--muted); }
.badge { width: fit-content; padding: 2px 8px; border: 1px solid #9c6ca7; border-radius: 12px; font-size: 11px; }
.primary-button, .secondary-button, .blue-button { width: 100%; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; padding: 14px; color: white; font-weight: 800; margin-top: 8px; }
.primary-button { background: linear-gradient(135deg, #58356c, #95568e); }
.secondary-button { background: linear-gradient(135deg, #171528, #090a13); border-color: var(--line); }
.blue-button { background: linear-gradient(135deg, #4d7ef6, #3858ef); }
.disclaimer { color: #756d67; font-size: 10px; text-align: center; line-height: 1.5; }
.quiz-heading { display: flex; justify-content: space-between; color: var(--gold); font-weight: 700; }
.text-button { border: 0; color: var(--muted); background: transparent; }
.progress-track { height: 3px; margin: 14px 0 40px; background: #241719; }
.progress-track span { display: block; width: 0; height: 100%; transition: width .3s; background: linear-gradient(90deg, var(--gold), var(--red-light)); }
.question-card { padding: 25px 8px; }
.question-card h2 { min-height: 116px; font-family: Georgia, "Songti SC", serif; font-size: 23px; line-height: 1.55; }
.options { display: grid; gap: 11px; }
.option-button { width: 100%; padding: 15px; border-radius: 9px; border: 1px solid var(--line); color: var(--cream); text-align: left; background: linear-gradient(110deg, #18172c, #0a0b15); transition: .18s; }
.option-button:hover, .option-button:focus { transform: translateY(-1px); border-color: var(--red-light); background: #2d2040; }
.loading-view.active { display: grid; place-content: center; text-align: center; }
.seal { width: 150px; height: 150px; margin: 0 auto 24px; display: grid; place-content: center; border-radius: 50%; border: 1px solid var(--gold); box-shadow: inset 0 0 30px #302142, 0 0 45px rgba(119,71,143,.25); font: 52px Georgia; animation: pulse 1.5s infinite alternate; }
.seal small { display: block; font: 9px sans-serif; letter-spacing: 2px; color: var(--gold); }
@keyframes pulse { to { transform: scale(1.04); box-shadow: inset 0 0 45px #513160, 0 0 55px rgba(119,71,143,.42); } }
.report-card { border: 1px solid var(--line); border-radius: 10px; padding: 16px 11px; background: radial-gradient(circle at 50% 5%, rgba(110,69,135,.24), transparent 17%), #0b0c16; }
.report-card > h1, .report-card > p { text-align: center; }
.result-seal { width: 100px; height: 100px; margin: 16px auto; display: grid; place-items: center; border: 1px solid var(--gold); border-radius: 50%; font: bold 36px Georgia; background: radial-gradient(circle, #51325f, #090a14 68%); }
.result-subtitle { font: bold 18px/1.6 Georgia, "Songti SC", serif; }
.report-section { margin-top: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: rgba(20,20,38,.82); }
.report-section h3 { margin: 0 0 10px; color: var(--cream); font-family: Georgia, "Songti SC", serif; }
.report-section p { color: #c6b8aa; font-size: 13px; line-height: 1.8; }
#radarCanvas { display: block; width: 100%; height: auto; }
.score-row { display: grid; grid-template-columns: 42px 1fr 42px; gap: 8px; align-items: center; margin: 8px 0; font-size: 12px; }
.score-track { height: 5px; background: #29283a; border-radius: 5px; overflow: hidden; }
.score-track i { display: block; height: 100%; background: linear-gradient(90deg, #8b693d, #a75ca2); }
.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.two-column > div:first-child { border-right: 1px solid var(--line); padding-right: 10px; }
.trigger-item { padding: 10px 0; border-bottom: 1px solid rgba(201,157,79,.14); }
.trigger-item:last-child { border: 0; }
.trigger-item b { display: block; font-size: 13px; }
.dots { color: #b969ae; letter-spacing: 3px; }
.advice-list { padding-left: 32px; }
.advice-list li { padding: 8px 4px; color: #c6b8aa; line-height: 1.55; }
.combo-card { background: linear-gradient(135deg, rgba(80,48,102,.36), rgba(19,18,35,.9)); }
blockquote { margin: 22px 0 8px; padding: 16px 10px; text-align: center; border-block: 1px solid var(--line); color: var(--cream); font-family: Georgia, "Songti SC", serif; }
.page-title { font-size: 28px; margin: 12px 0 24px; }
.history-item { border: 1px solid var(--line); padding: 14px; border-radius: 8px; margin-bottom: 10px; background: var(--panel); }
.history-item b, .history-item span { display: block; }
.history-item span { color: var(--muted); font-size: 12px; margin-top: 5px; }
.empty { color: var(--muted); text-align: center; padding: 70px 0; }
.modal { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(5,8,18,.86); backdrop-filter: blur(6px); }
.modal.hidden { display: none; }
.modal-card { position: relative; width: min(100%, 520px); padding: 36px 26px 28px; border-radius: 19px; color: #1a2949; text-align: center; background: #f8f9fd; }
.modal-card h2 { margin: 8px 0; }
.modal-card p { color: #74809a; font-size: 14px; }
.modal-close { position: absolute; right: 18px; top: 12px; border: 0; background: none; color: #74809a; font-size: 24px; }
.key-icon { font-size: 40px; }
.modal-card input { width: 100%; border: 1px solid #4e77fa; border-radius: 11px; padding: 14px; margin-top: 12px; color: #17233c; background: white; outline: 3px solid rgba(79,119,250,.14); }
.error-text { min-height: 18px; color: #bd2737 !important; }

@media (max-width: 380px) {
  .view { padding: 14px; }
  h1 { font-size: 34px; }
  .sigil { transform: scale(.9); margin-top: 10px; }
  .hero { min-height: 500px; }
  .two-column { grid-template-columns: 1fr; }
  .two-column > div:first-child { border-right: 0; border-bottom: 1px solid var(--line); }
}

@media print {
  body { background: white; }
  .topbar, #saveButton, #restartButton { display: none !important; }
  .app-shell, .view { width: 100%; border: 0; }
}

/* 多测试平台首页 */
.catalog-shell { background: radial-gradient(circle at 50% 16%, rgba(111,74,146,.19), transparent 25%), var(--bg); }
.catalog-topbar { position: relative; }
.catalog-hero { min-height: 330px; padding: 68px 26px 30px; text-align: center; position: relative; overflow: hidden; }
.catalog-hero::before, .catalog-hero::after { content: ""; position: absolute; border: 1px solid rgba(205,164,103,.12); border-radius: 50%; width: 310px; height: 310px; left: 50%; top: 5px; transform: translateX(-50%); }
.catalog-hero::after { width: 220px; height: 220px; top: 50px; }
.catalog-hero h1 { position: relative; z-index: 1; margin-top: 22px; font-size: 31px; }
.catalog-hero > p:not(.eyebrow) { position: relative; z-index: 1; max-width: 340px; margin: 15px auto; color: var(--muted); font-size: 13px; line-height: 1.8; }
.catalog-count { position: relative; z-index: 1; width: fit-content; margin: 28px auto 0; display: flex; align-items: baseline; gap: 8px; color: var(--gold); }
.catalog-count b { font: 38px Georgia, serif; }
.catalog-count span { font-size: 12px; }
.catalog-content { padding: 0 18px 35px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; margin: 0 2px 14px; }
.section-heading h2 { margin: 0; font-size: 18px; }
.section-heading span { color: var(--muted); font-size: 11px; }
.test-tile { position: relative; min-height: 184px; display: grid; grid-template-columns: 82px 1fr 26px; align-items: center; gap: 12px; margin-bottom: 14px; padding: 22px 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; color: var(--cream); text-decoration: none; transition: transform .2s, border-color .2s; }
.test-tile:hover { transform: translateY(-2px); border-color: var(--gold); }
.test-tile::after { content: ""; position: absolute; width: 180px; height: 180px; border: 1px solid rgba(205,164,103,.13); border-radius: 50%; left: -50px; top: 2px; }
.seven-tile { background: radial-gradient(circle at 20% 50%, rgba(110,61,135,.38), transparent 38%), linear-gradient(135deg, #151529, #090a13); }
.love-tile { background: radial-gradient(circle at 20% 50%, rgba(178,82,114,.35), transparent 38%), linear-gradient(135deg, #241522, #0b0c17); }
.tile-number { position: absolute; right: 12px; top: 10px; color: rgba(238,231,220,.25); font: 13px Georgia; }
.tile-symbol { position: relative; z-index: 1; width: 72px; height: 72px; display: grid; place-items: center; border: 1px solid var(--gold); border-radius: 50%; font: bold 25px Georgia; background: rgba(7,8,16,.55); box-shadow: 0 0 30px rgba(134,83,151,.2); }
.love-tile .tile-symbol { border-color: #c48699; color: #f0c3d0; font-size: 37px; box-shadow: 0 0 30px rgba(190,92,122,.22); }
.tile-copy { position: relative; z-index: 1; }
.tile-copy small { color: var(--gold); letter-spacing: 2px; }
.love-tile .tile-copy small { color: #d49aad; }
.tile-copy h2 { margin: 8px 0; font: bold 21px Georgia, "Songti SC", serif; }
.tile-copy p { margin: 0; color: var(--muted); font-size: 11px; }
.tile-arrow { font-size: 25px; color: var(--gold); }
.coming-soon { padding: 18px; text-align: center; border: 1px dashed rgba(205,164,103,.19); border-radius: 10px; color: #77758a; font-size: 12px; }

/* 恋爱依恋测试的暮蓝玫瑰主题 */
.love-theme { --gold: #d5a4b3; --red: #744a78; --red-light: #bd708c; --line: rgba(206,143,165,.27); }
.love-theme .hero { background: radial-gradient(circle at 50% 42%, rgba(179,72,110,.26), transparent 24%), linear-gradient(115deg, transparent 35%, rgba(110,116,186,.09) 49%, transparent 52%); }
.love-theme .sigil::before { background: linear-gradient(135deg, #9c5772, #31243f); border-color: #c57e98; box-shadow: 0 0 30px rgba(180,77,112,.4); }
.love-theme .sigil > span:not(.center-mark) { border-color: #7f4f66; }
.love-theme .primary-button { background: linear-gradient(135deg, #744262, #b55f7c); }
.love-theme .report-card { background: radial-gradient(circle at 50% 5%, rgba(177,79,113,.22), transparent 17%), #0d0c17; }
.love-theme .result-seal { background: radial-gradient(circle, #75405d, #0a0a15 68%); }
.love-theme .score-track i { background: linear-gradient(90deg, #6e6ca9, #c46f8d); }
.love-theme .dots { color: #d07494; }