:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #f7fbff; color: #3c2c1d; }
body { min-height: 100dvh; }
button, input { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.view { min-height: 100dvh; }
.artboard { position: relative; width: 100%; overflow: hidden; }
.art-image { display: block; width: 100%; height: auto; }
/* 首页完整显示 750x1334 设计图不裁切；图片贴顶，屏幕更高时余量放在底部，用图片底边的米色纸面延伸（底边近乎纯色，衔接无痕） */
.cover-page { cursor: pointer; display: flex; align-items: flex-start; justify-content: center; height: 100vh; height: 100dvh; overflow: hidden; background: #f6eddf; }
.cover-art { flex: none; width: min(100vw, 100vh * 750 / 1334); width: min(100vw, 100dvh * 750 / 1334); aspect-ratio: 750 / 1334; }
.cover-image { height: 100%; }
.hotspot { position: absolute; z-index: 2; border: 0; padding: 0; background: transparent; color: transparent; }
/* 切图按钮：坐标与 scripts/slice.py 一致，底图上画有同款按钮，按压只改亮度不改几何 */
.slice-button { -webkit-tap-highlight-color: transparent; transition: filter .15s; }
.slice-button img { display: block; width: 100%; height: 100%; pointer-events: none; }
.slice-button:active { filter: brightness(.88); }
.cover-cta { left: 34.4%; top: 32.684%; width: 29.867%; height: 6.297%; }
.cover-cta img { animation: cta-glow 2.4s ease-in-out infinite; }
@keyframes cta-glow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 238, 200, 0)); } 50% { filter: drop-shadow(0 0 8px rgba(255, 238, 200, .95)); } }
.auth-page { display: grid; place-items: center; padding: 32px 20px; background: linear-gradient(160deg, #dff1ff, #fffaf1 68%); }
.auth-card { width: min(100%, 430px); padding: 34px 24px 24px; border: 1px solid #e2cda9; border-radius: 20px; background: rgba(255, 251, 242, .96); box-shadow: 0 16px 40px rgba(75, 119, 156, .18); }
.auth-brand, .auth-card h1, .auth-desc { text-align: center; }
.auth-brand { margin: 0; color: #2c6fa6; font-size: 14px; letter-spacing: 2px; }
.auth-card h1 { margin: 20px 0 12px; color: #53351c; font: 700 28px/1.35 serif; }
.auth-desc { margin: 0 8px 24px; color: #8b745b; font-size: 14px; line-height: 1.7; }
.auth-card input:not([type="checkbox"]) { width: 100%; height: 46px; border: 1px solid #77b6e8; border-radius: 24px; padding: 0 18px; outline: none; text-align: center; background: #fff; }
.agreement { display: flex; align-items: center; gap: 6px; margin: 18px 0 6px; color: #806c55; font-size: 13px; }
.agreement input { accent-color: #548fc9; }
/* 小程序 web-view 内只保留「微信手机号一键授权」，同意由微信授权弹窗完成；调起失败时才回退到手动填写 */
.mp-auth:not(.manual) .manual-only { display: none; }
.error { min-height: 20px; margin: 6px 0; color: #b7473d; font-size: 13px; text-align: center; }
.button { width: 100%; min-height: 44px; margin-top: 10px; border: 0; border-radius: 24px; padding: 0 14px; font-size: 15px; }
.button.primary { color: #fff; background: linear-gradient(90deg, #4f9ad8, #b98a4c); }
.button.secondary { color: #754315; background: #f7e6c7; border: 1px solid #c18a4f; }
.button.quiet { color: #8e775d; background: #fffaf3; border: 1px solid #d5c1a8; }
.quiz-page { background: #eaf6ff; }
.quiz-art, .welfare-art { aspect-ratio: 750 / 1334; background: #eaf6ff; }
.quiz-art .art-image, .welfare-art .art-image { position: absolute; inset: 0; height: 100%; object-fit: cover; }
/* 选项卡切图（750x1334 中 x64/390、y537/881，304x335），底图已抹掉原卡片 */
.option { width: 40.533%; height: 25.112%; border-radius: 12px; -webkit-tap-highlight-color: transparent; transition: transform .2s, opacity .2s, box-shadow .2s; }
.option-image { display: block; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; }
.option-0 { left: 8.533%; top: 40.255%; }
.option-1 { left: 52%; top: 40.255%; }
.option-2 { left: 8.533%; top: 66.042%; }
.option-3 { left: 52%; top: 66.042%; }
.option:active { transform: scale(.97); }
.option.selected { transform: scale(1.03); box-shadow: 0 0 0 3px #548fc9, 0 8px 18px rgba(44, 92, 139, .25); }
.quiz-art.answered .option:not(.selected) { opacity: .5; }
.option-check { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; color: #fff; background: #548fc9; font-size: 13px; line-height: 22px; text-align: center; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .2s; }
.option.selected .option-check { opacity: 1; transform: scale(1); }
.quiz-art.enter .option { animation: option-in .36s ease-out backwards; }
.quiz-art.enter .option-1 { animation-delay: .06s; }
.quiz-art.enter .option-2 { animation-delay: .12s; }
.quiz-art.enter .option-3 { animation-delay: .18s; }
@keyframes option-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.quiz-footer { padding: 12px 18px calc(16px + env(safe-area-inset-bottom)); color: #6f89a0; font-size: 12px; background: #eaf6ff; }
.quiz-footer > div:first-child { display: flex; justify-content: space-between; gap: 8px; }
.progress-track { height: 6px; margin-top: 10px; border-radius: 99px; overflow: hidden; background: #cfe8fa; }
.progress-value { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #74b8ee, #d5a34d); transition: width .3s ease; }
.transition-page { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 30px 24px calc(60px + env(safe-area-inset-bottom)); background: #f8fbff; }
.transition-image { width: min(100%, 360px); }
.transition-page p { margin: 14px 0 0; color: #5b3f20; font: 18px serif; }
.transition-page .progress-track { width: min(76%, 300px); }
.result-page { padding-bottom: 90px; background: #f5eadb; }
.long-scroll { height: calc(100dvh - 90px); overflow-y: auto; }
.long-image { display: block; width: 100%; max-width: 750px; height: auto; margin: 0 auto; }
.action-bar { position: fixed; z-index: 5; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 250, 243, .96); box-shadow: 0 -3px 14px rgba(91, 63, 32, .12); }
.action-bar .button { flex: 1; min-width: 0; margin: 0; padding: 0 8px; font-size: 13px; }
.welfare-page { padding-bottom: 64px; background: #eaf6ff; }
/* 输入框盖住底图输入框内部（x200-605、y1066-1117），保留原图边框和手机图标 */
.welfare-input { position: absolute; z-index: 2; left: 26.667%; top: 79.91%; width: 54%; height: 3.823%; border: 0; border-radius: 0; padding: 0 2px; outline: none; color: #583b20; background: #fff; font-size: 15px; }
.welfare-input::placeholder { color: #b4b7be; }
.welfare-submit { left: 30.667%; top: 85.832%; width: 38.667%; height: 7.496%; }
.welfare-agreement { position: absolute; z-index: 3; left: 50%; top: 94%; margin: 0; padding: 3px 10px; border-radius: 99px; color: #76583d; background: rgba(255, 250, 243, .88); font-size: 12px; white-space: nowrap; transform: translateX(-50%); }
.form-error { position: absolute; z-index: 4; left: 15%; top: 76.4%; width: 70%; min-height: 0; margin: 0; padding: 2px 0; border-radius: 10px; }
.form-error:not(:empty) { background: rgba(255, 247, 240, .92); }
.saved-panel { position: absolute; z-index: 4; left: 15%; top: 71%; width: 70%; padding: 16px; border-radius: 12px; color: #6f451f; background: rgba(255, 247, 229, .95); font-size: 16px; text-align: center; box-shadow: 0 8px 28px rgba(77, 48, 20, .15); }
.saved-panel small { font-size: 12px; }
.welfare-back { width: calc(100% - 48px); margin: 12px 24px 0; }
.toast { position: fixed; z-index: 20; left: 50%; bottom: 110px; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; max-width: calc(100% - 40px); padding: 10px 14px; border-radius: 8px; color: #fff; background: rgba(35, 35, 35, .9); font-size: 13px; transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .cover-cta img, .quiz-art.enter .option { animation: none; } .option, .option-check { transition: none; } }
@media (min-width: 700px) { .view { max-width: 750px; margin: 0 auto; box-shadow: 0 0 30px rgba(35, 83, 120, .08); } body { background: #dbeeff; } .action-bar { max-width: 750px; left: 50%; right: auto; width: 100%; transform: translateX(-50%); } }