@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap');

:root { --ink:#18202b; --muted:#6c7480; --line:#e3e7ed; --soft:#f7f8fa; --accent:#3459d4; --accent-soft:#edf1ff; }
* { box-sizing:border-box; }
body { margin:0; background:#f5f6f8; color:var(--ink); font-family:'DM Sans','Noto Sans SC',sans-serif; }
button { font:inherit; }
.page-shell { width:min(680px, calc(100% - 40px)); margin:0 auto; padding:56px 0 36px; }
.hero { margin-bottom:30px; }
.eyebrow,.result-kicker { color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.14em; }
.eyebrow span { color:#b0b6c0; margin:0 5px; }
h1 { margin:12px 0 10px; font-size:clamp(32px, 5vw, 46px); letter-spacing:-.03em; line-height:1.1; }
.hero p { max-width:540px; margin:0; color:var(--muted); font-size:14px; line-height:1.8; }
.progress-wrap { margin-top:28px; position:sticky; top:0; z-index:20; padding:12px 0; background:#f5f6f8; }
.progress-meta { display:flex; justify-content:space-between; color:var(--muted); font-size:12px; margin-bottom:8px; }
.progress-track { height:5px; border-radius:10px; background:#e2e5ea; overflow:hidden; }
.progress-bar { width:0; height:100%; background:var(--accent); transition:width .35s ease; }
.stage { border-top:1px solid var(--line); }
.stage:last-child { border-bottom:1px solid var(--line); }
.stage-head { width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; border:0; padding:20px 0; background:transparent; color:var(--ink); text-align:left; cursor:pointer; }
.stage-head:disabled { cursor:default; }
.stage-index { display:inline-flex; width:28px; height:28px; align-items:center; justify-content:center; border-radius:50%; background:#e9ecf1; color:#707987; font-size:12px; font-weight:700; margin-right:12px; }
.stage.active .stage-index { background:var(--accent); color:#fff; }
.stage.done .stage-index { background:#dcefe5; color:#23754a; }
.stage-title-row { display:flex; align-items:center; gap:14px; flex:1; }
.stage-name { display:flex; align-items:baseline; flex-wrap:wrap; font-size:16px; font-weight:600; }
.stage-subtitle { margin-left:8px; color:var(--muted); font-size:13px; font-weight:400; }
.stage-verdict { margin-left:auto; display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:20px; background:#dcefe5; color:#23754a; font-size:12px; font-weight:500; white-space:nowrap; }
.stage-verdict strong { font-size:14px; font-weight:700; letter-spacing:.02em; }
.stage-chevron { color:#8c95a2; transition:transform .2s; }
.stage.active .stage-chevron { transform:rotate(180deg); }
.stage-body { max-height:0; overflow:hidden; transition:max-height .5s cubic-bezier(.4,0,.2,1); }
.stage-body-inner { padding:2px 0 24px 40px; opacity:0; transform:translateY(-6px); transition:opacity .4s ease .08s, transform .4s ease .08s; }
.stage.active .stage-body-inner { opacity:1; transform:translateY(0); }
.question { padding:18px 0; border-top:1px solid #edf0f3; }
.question:first-child { border-top:0; padding-top:0; }
.question-title { margin:0 0 13px; font-size:14px; line-height:1.6; }
.slider-wrap { padding:4px 2px 0; }
.slider-ends { display:flex; justify-content:space-between; gap:16px; margin-bottom:10px; color:#3d4651; font-size:13px; line-height:1.5; }
.slider-ends span:first-child { text-align:left; }
.slider-ends span:last-child { text-align:right; }
.slider { -webkit-appearance:none; appearance:none; width:100%; height:5px; border-radius:10px; background:linear-gradient(to right,#c9d3f2,#e2e5ea 50%,#c9d3f2); outline:none; cursor:pointer; }
.slider.untouched { background:#e2e5ea; }
.slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%; background:#fff; border:2px solid var(--accent); box-shadow:0 1px 4px rgba(52,89,212,.3); cursor:pointer; transition:transform .12s ease; }
.slider.untouched::-webkit-slider-thumb { border-color:#b6bdc9; box-shadow:none; }
.slider::-webkit-slider-thumb:active { transform:scale(1.15); }
.slider::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:#fff; border:2px solid var(--accent); box-shadow:0 1px 4px rgba(52,89,212,.3); cursor:pointer; }
.slider.untouched::-moz-range-thumb { border-color:#b6bdc9; box-shadow:none; }
.final-result { margin-top:48px; }
.result-card { padding:30px; border-radius:10px; background:#18202b; color:#fff; }
.final-result .result-kicker { color:#aebfff; }
.result-card-brand { margin-top:24px; padding-top:16px; border-top:1px solid #2c3646; color:#7f8a9c; font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.result-type { margin:10px 0 2px; color:#c6d2ff; font-size:clamp(46px, 10vw, 72px); font-weight:700; letter-spacing:.04em; line-height:1; }
.final-result h2 { margin:0 0 14px; font-size:22px; }
.final-result p { max-width:560px; margin:0; color:#cad0da; font-size:14px; line-height:1.9; }
.result-traits { display:flex; flex-direction:column; gap:16px; margin:22px 0 26px; }
.trait-bar-head { display:flex; justify-content:space-between; gap:12px; margin-bottom:7px; color:#9aa3b2; font-size:12px; }
.trait-bar-head .lead { color:#fff; font-weight:600; }
.trait-track { height:6px; border-radius:10px; background:#3d4757; overflow:hidden; }
.trait-fill { height:100%; border-radius:10px; background:linear-gradient(to right,#8ea6ff,#c6d2ff); }
.trait-fill.fill-right { margin-left:auto; background:linear-gradient(to left,#8ea6ff,#c6d2ff); }
.result-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.restart { border:1px solid var(--line); border-radius:6px; padding:11px 15px; background:#fff; color:var(--ink); cursor:pointer; font-weight:600; transition:.2s ease; }
.restart:hover { border-color:#b6bdc9; background:#f7f8fa; }
.restart span { margin-left:7px; }
.save-img { border:1px solid var(--line); border-radius:6px; padding:11px 15px; background:#fff; color:var(--ink); cursor:pointer; font-weight:600; transition:.2s ease; }
.save-img:hover { border-color:#b6bdc9; background:#f7f8fa; }
.save-img:disabled { opacity:.6; cursor:default; }
.save-img span { margin-left:7px; color:var(--accent); }
.advice { border:0; border-radius:6px; padding:11px 15px; background:var(--accent); color:#fff; cursor:pointer; font-weight:600; transition:.2s ease; }
.advice:hover { background:#2c4bb8; }
.advice span { margin-left:7px; }
footer { padding-top:24px; text-align:center; color:#939aa5; font-size:11px; }
.img-modal { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(12,16,24,.72); }
.img-modal[hidden] { display:none; }
.img-modal-box { width:min(360px,100%); max-height:90vh; overflow:auto; padding:20px; border-radius:12px; background:#fff; text-align:center; }
.img-modal-tip { margin:0 0 14px; color:var(--muted); font-size:13px; }
.img-modal-box img { width:100%; border-radius:8px; box-shadow:0 4px 20px rgba(0,0,0,.15); }
.img-modal-actions { display:flex; gap:10px; margin-top:16px; }
.img-dl { flex:1; padding:11px; border-radius:6px; background:var(--accent); color:#fff; text-decoration:none; font-weight:600; font-size:14px; }
.img-close { flex:1; padding:11px; border-radius:6px; border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; font-weight:600; font-size:14px; }
/* —— 专属建议页 —— */
.advice-empty { padding:40px 0; color:var(--muted); font-size:15px; }
.advice-empty p { margin:0 0 18px; }
.advice-primary { display:inline-flex; align-items:center; border:0; border-radius:6px; padding:11px 18px; background:var(--accent); color:#fff; text-decoration:none; cursor:pointer; font-weight:600; font-size:14px; transition:.2s ease; }
.advice-primary:hover { background:#2c4bb8; }
.advice-primary span { margin-left:7px; }
.advice-topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.advice-card { margin-top:20px; padding:30px; border-radius:10px; background:#18202b; color:#fff; }
.advice-card .result-kicker { color:#aebfff; }
.advice-card h2 { margin:0 0 14px; font-size:22px; }
.advice-card p { margin:0; color:#cad0da; font-size:14px; line-height:1.9; }
.qa-block { padding:24px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.qa-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.qa-head h3 { margin:0; font-size:17px; }
.qa-quota { color:var(--accent); font-size:13px; font-weight:600; }
.qa-tip { margin:8px 0 16px; color:var(--muted); font-size:13px; line-height:1.6; }
.qa-list { display:flex; flex-direction:column; gap:12px; margin-bottom:16px; }
.qa-msg { max-width:85%; padding:11px 14px; border-radius:12px; font-size:14px; line-height:1.7; white-space:pre-wrap; }
.qa-user { align-self:flex-end; background:var(--accent-soft); color:#2345b6; border-bottom-right-radius:3px; }
.qa-ai { align-self:flex-start; background:var(--soft); color:var(--ink); border-bottom-left-radius:3px; }
.qa-thinking { color:var(--muted); }
.qa-md p { margin:0 0 8px; }
.qa-md p:last-child { margin-bottom:0; }
.qa-md ul, .qa-md ol { margin:6px 0; padding-left:20px; }
.qa-md li { margin:3px 0; }
.qa-md strong { font-weight:700; }
.qa-md h1, .qa-md h2, .qa-md h3, .qa-md h4 { margin:8px 0 6px; font-size:15px; }
.qa-md code { padding:1px 5px; border-radius:4px; background:rgba(0,0,0,.06); font-size:13px; }
.qa-md pre { margin:6px 0; padding:10px 12px; border-radius:6px; background:rgba(0,0,0,.06); overflow-x:auto; }
.qa-md pre code { padding:0; background:none; }
.qa-system { align-self:center; background:#fdf3f0; color:#a4522f; font-size:13px; }
.qa-input { display:flex; gap:10px; align-items:flex-end; }
.qa-input textarea { flex:1; resize:none; border:1px solid var(--line); border-radius:8px; padding:11px 12px; font:inherit; font-size:14px; line-height:1.5; color:var(--ink); }
.qa-input textarea:focus { outline:none; border-color:#9eafe8; }
.qa-input .advice-primary { white-space:nowrap; }
.qa-input .advice-primary:disabled { opacity:.6; cursor:default; }
.advice-ghost { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:6px; padding:8px 13px; background:#fff; color:var(--ink); text-decoration:none; cursor:pointer; font-weight:600; font-size:13px; white-space:nowrap; transition:.2s ease; }
.advice-ghost:hover { border-color:#b6bdc9; background:#f7f8fa; }
.advice-ghost span { margin-left:6px; color:var(--accent); }
/* 详细建议模块 */
.detail-block { margin-top:28px; }
.detail-title { margin:0 0 16px; font-size:18px; }
.detail-section { padding:20px 22px; margin-bottom:14px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.detail-section:last-child { margin-bottom:0; }
.detail-section-head { display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:15px; font-weight:600; color:var(--ink); }
.detail-icon { font-size:18px; }
.detail-section-body { color:#3d4651; font-size:14px; line-height:1.85; }

@media (max-width:560px) { .page-shell { width:min(100% - 28px, 680px); padding:34px 0 28px; } .stage-body-inner { padding-left:0; } .final-result { margin-top:34px; padding:24px 20px; } .advice-card { padding:24px 20px; } .qa-block { padding:20px 16px; } .qa-msg { max-width:92%; } }