* { margin:0; padding:0; box-sizing:border-box; }
:root { --red:#c92c2c; --dark:#2b2b2b; --gray:#777; --bg:#eef1f6; }
html,body { background:var(--bg); color:var(--dark); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; }
body { min-height:100vh; padding-bottom:40px; }
.hidden { display:none !important; }

.topbar { background:var(--red); color:#fff; }
.topbar-inner { max-width:520px; margin:0 auto; display:flex; align-items:center; gap:10px; padding:10px 16px; }
.cross { font-size:26px; }
.topbar-text strong { font-size:16px; display:block; }
.topbar-text small { font-size:11px; opacity:.85; letter-spacing:.5px; }

main { max-width:520px; margin:0 auto; padding:20px 14px; }
.card { background:#fff; border-radius:14px; box-shadow:0 2px 12px rgba(0,0,0,.06); padding:24px 20px; margin-bottom:16px; }

.hero { text-align:center; padding-top:34px; padding-bottom:30px; }
.hero h1 { font-size:32px; line-height:1.35; color:var(--red); letter-spacing:2px; }
.hero .sub { color:var(--gray); margin:12px 0 22px; font-size:14px; }
.name-row input { width:100%; padding:12px 14px; border:1px solid #d9dee6; border-radius:10px; font-size:15px; outline:none; text-align:center; }
.name-row input:focus { border-color:var(--red); }

.btn-primary { display:block; width:100%; margin-top:16px; padding:14px; border:none; border-radius:12px; background:var(--red); color:#fff; font-size:17px; font-weight:600; letter-spacing:4px; cursor:pointer; }
.btn-primary:active { transform:scale(.98); }
.counter { margin-top:16px; color:var(--gray); font-size:13px; }
.counter b { color:var(--red); }
.disclaimer { margin-top:8px; color:#aaa; font-size:12px; }

.quiz-top { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
#progress-text { font-size:13px; color:var(--gray); white-space:nowrap; }
.progress-bar { flex:1; height:8px; background:#eceff4; border-radius:4px; overflow:hidden; }
.progress-bar i { display:block; height:100%; background:var(--red); border-radius:4px; transition:width .3s; }
#question-text { font-size:21px; line-height:1.5; margin-bottom:20px; }
.options { display:flex; flex-direction:column; gap:12px; }
.option { padding:15px 14px; border:1.5px solid #dde3ea; background:#fafbfd; border-radius:12px; font-size:15px; line-height:1.5; text-align:left; color:var(--dark); cursor:pointer; transition:all .15s; }
.option:active { border-color:var(--red); background:#fff3f3; transform:scale(.99); }

.report { font-family:"KaiTi","STKaiti","Kaiti SC","Noto Serif SC","Songti SC",serif; padding:26px 20px; }
.report-head { text-align:center; }
.report-logo { width:52px; height:52px; margin:0 auto 8px; background:var(--red); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:28px; font-family:sans-serif; }
.report-title { font-size:22px; font-weight:700; letter-spacing:2px; }
.report-title-en { font-size:10px; color:var(--gray); margin-top:2px; letter-spacing:.5px; }
.report-name { text-align:center; color:var(--red); font-size:24px; font-weight:700; letter-spacing:6px; margin:16px 0 6px; }
.meta { width:100%; border-collapse:collapse; font-size:12.5px; color:#444; }
.meta td { padding:4px 2px; }
.meta td:nth-child(odd) { color:var(--gray); width:70px; white-space:nowrap; }
.sec { display:flex; align-items:center; gap:8px; margin:18px 0 10px; color:var(--red); font-size:15px; font-weight:700; }
.sec::before { content:''; width:5px; height:16px; background:var(--red); border-radius:2px; }
.metric { margin-bottom:14px; }
.metric-top { display:flex; justify-content:space-between; font-size:13.5px; margin-bottom:6px; }
.metric-top b { color:var(--red); }
.bar { height:12px; background:#eceff4; border-radius:6px; overflow:hidden; }
.bar i { display:block; height:100%; background:linear-gradient(90deg,#e06a6a,var(--red)); border-radius:6px; }
.diag-name { text-align:center; color:var(--red); font-size:22px; font-weight:700; letter-spacing:2px; }
.diag-en { text-align:center; color:var(--gray); font-size:11px; margin:4px 0 10px; }
.diag-desc { font-size:14px; line-height:1.7; color:#333; }
.advice { margin-left:18px; font-size:14px; line-height:1.8; color:#333; }
.report-foot { margin-top:18px; text-align:center; color:#aaa; font-size:11.5px; }

.image-card { padding:12px; text-align:center; }
.image-card-head { font-size:13px; color:var(--gray); margin-bottom:10px; }
#report-img { width:100%; border-radius:8px; opacity:0; transition:opacity .4s; }
#report-img.loaded { opacity:1; }

.actions { display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.btn-ghost { width:100%; padding:13px; border:1.5px solid #d9dee6; background:#fff; border-radius:12px; font-size:15px; color:var(--dark); cursor:pointer; }
.btn-ghost:active { background:#f5f7fa; }

.site-footer { text-align:center; color:#b0b6c0; font-size:12px; padding:0 20px; line-height:1.7; }
.site-footer .fun-line { margin-bottom:6px; }
.app-footer { display:flex; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 16px; border-top:1px solid #dde2ea; background:#f7f9fc; margin:24px -14px -40px; font-size:12px; color:#b0b6c0; }
.app-footer a { color:#b0b6c0; text-decoration:none; }
.app-footer a:hover { color:var(--red); }
.app-footer span.sep { color:#d5dae2; }

/* ---- 赛博算命 ---- */
.btn-gold { background:linear-gradient(135deg,#e8c86a,#c9a227); color:#3a2e08; margin-top:12px; }
.btn-gold:active { transform:scale(.98); }
.fortune-shake { text-align:center; padding:44px 20px; }
.fortune-tube { font-size:88px; display:inline-block; }
.fortune-tube.shake { animation:shaketube .45s ease-in-out 2; }
@keyframes shaketube { 0%,100%{transform:rotate(0)} 20%{transform:rotate(-10deg)} 40%{transform:rotate(10deg)} 60%{transform:rotate(-7deg)} 80%{transform:rotate(7deg)} }
.fortune-hint { color:var(--gray); font-size:14px; margin:16px 0 6px; }
.fortune-card { background:linear-gradient(160deg,#1b1d3a 0%,#2a2350 60%,#3a2b55 100%); color:#f0e6c8; text-align:center; border:1px solid #4a3f6e; }
.f-head { color:#e8c86a; font-size:15px; letter-spacing:4px; margin-bottom:10px; }
.f-level { font-size:34px; color:#ffd76e; font-weight:700; letter-spacing:6px; font-family:"KaiTi","STKaiti",serif; margin:6px 0; }
.f-poem { font-family:"KaiTi","STKaiti","Songti SC",serif; font-size:18px; line-height:1.9; color:#f5ecc9; margin:12px 0 6px; }
.f-luck { margin:14px auto 0; max-width:340px; }
.f-luck-row { display:flex; justify-content:space-between; font-size:14px; padding:5px 0; border-bottom:1px dashed #4a3f6e; }
.f-luck-row b { color:#ffd76e; letter-spacing:2px; font-weight:600; }
.f-meta { margin:14px auto 0; max-width:390px; font-size:13px; }
.f-meta td { padding:4px 6px; text-align:left; color:#cbbd92; }
.f-meta td:first-child { color:#8d82b8; white-space:nowrap; }
.f-yiji { margin:14px 0 4px; font-size:14px; }
.f-yiji .yi { color:#9ad69a; }
.f-yiji .ji { color:#e08a8a; }
.f-tip { font-size:13px; color:#cbbd92; line-height:1.7; margin-top:10px; }
.f-foot { margin-top:14px; color:#6f6691; font-size:11.5px; }