:root { --ink:#27452d; --muted:#73846d; --green:#4d8736; --lime:#9bc34a; --pale:#eff8e3; --bg:#e9f5d9; --line:#d8e4c9; --gold:#fff7d9; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); font:15px/1.75 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; background:linear-gradient(90deg,#e8f4d8 0%,#f5faea 50%,#e8f4d8 100%); }
button { font:inherit; cursor:pointer; }
.app-shell { width:min(100%,620px); margin:0 auto; padding:22px 14px 40px; }
.card { background:rgba(255,255,255,.96); border-radius:27px; box-shadow:0 18px 55px rgba(70,105,47,.14); overflow:hidden; }
.landing { min-height:680px; padding:50px 42px 40px; text-align:center; display:flex; flex-direction:column; justify-content:center; }
.brand { letter-spacing:.08em; color:#5d8b48; font-weight:700; margin-bottom:48px; }
h1,h2,h3,h4,p { margin-top:0; }
.landing h1 { font-size:40px; line-height:1.25; letter-spacing:.03em; margin-bottom:22px; }
.landing h1 span { color:#4b8b31; }
.lead { text-align:left; color:#607263; margin:0 auto 42px; max-width:500px; }
.lead strong { color:#4c8337; }
.stat-row { display:flex; justify-content:space-around; margin-bottom:38px; }
.stat-row div { display:flex; flex-direction:column; gap:2px; }.stat-row b { font-size:32px; line-height:1; color:#59913a; }.stat-row span { color:#7d8a78; font-size:13px; }
.primary { border:0; color:white; font-weight:700; background:linear-gradient(100deg,#4f8733,#88c83d); border-radius:13px; min-height:50px; box-shadow:0 10px 22px rgba(86,145,46,.25); }
.start-btn { width:min(100%,360px); margin:0 auto; font-size:17px; }.hint,.footer-note { color:#9aa494; font-size:12px; margin:13px 0 0; }
.quiz { padding:27px 30px 30px; min-height:660px; }.quiz-top { display:flex; justify-content:space-between; color:#6b8068; font-weight:700; }.progress { height:6px; background:#edf1ea; border-radius:10px; overflow:hidden; margin:12px 0 68px; }.progress i { display:block; height:100%; background:linear-gradient(90deg,#70ac48,#afd35e); border-radius:10px; transition:width .25s; }.quiz h2 { font-size:29px; line-height:1.35; margin-bottom:26px; }
.options { display:grid; gap:12px; }.option { display:flex; align-items:center; gap:14px; text-align:left; border:1px solid var(--line); border-radius:16px; background:#fbfdf8; padding:15px 17px; color:var(--ink); transition:.15s; }.option:hover,.option.selected { border-color:#8bbb57; background:#f0f8e6; transform:translateY(-1px); }.option b { color:#77a34f; font-size:18px; min-width:24px; }.option span { flex:1; }.quiz-actions { display:flex; justify-content:space-between; align-items:center; margin-top:45px; }.next-btn,.text-btn,.link-btn { border:0; background:transparent; color:#5b9736; font-weight:700; }.next-btn[disabled] { color:#aab5a8; cursor:not-allowed; }
.result { padding:30px 24px 24px; }.result-hero { text-align:center; }.result-hero p { color:#71836d; font-size:13px; }.type-icon { width:74px; height:74px; margin:14px auto 5px; border-radius:24px; display:grid; place-items:center; background:#eaf7db; color:#477a37; font-size:42px; }.result-hero h1 { font-size:30px; margin:0 0 20px; }.fit-ring { width:118px; height:118px; margin:0 auto 12px; border-radius:50%; border:9px solid #eaf1e6; border-right-color:#4f8c35; display:flex; flex-direction:column; justify-content:center; align-items:center; }.fit-ring b { font-size:27px; }.fit-ring span { font-size:12px; color:#71836d; }.tagline { display:inline-block; border-radius:99px; background:#5a943c; color:#fff; padding:3px 12px; font-size:13px; }
.top-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:16px 0; }.top-card { text-align:center; border:1px solid #d5e3c9; border-radius:13px; padding:8px 3px; background:#f4faeb; }.top-card b { display:block; font-size:13px; }.top-card span { font-size:18px; font-weight:800; }.top-card small { display:block; color:#789172; font-size:11px; }.summary,.short-box,.quote,.tip-box { background:#f0f8e3; border-radius:13px; padding:15px; color:#526653; }.section-title { margin:28px 0 12px; font-size:17px; display:flex; align-items:center; gap:8px; }.section-title::before { content:""; width:5px; height:18px; border-radius:5px; background:#74aa48; }.radar { width:100%; max-height:330px; }.radar-grid polygon,.radar-grid line { fill:none; stroke:#dfe7dc; stroke-width:1; }.radar-grid text { fill:#69806a; font-size:11px; }.radar-value { fill:rgba(117,175,63,.38); stroke:#72ad45; stroke-width:2; }.scores { display:grid; gap:9px; }.score-row { display:grid; grid-template-columns:35px 1fr 38px 55px; align-items:center; gap:7px; font-size:12px; }.score-row i,.job-bar { display:block; height:9px; border-radius:10px; background:#edf1ed; overflow:hidden; }.score-row i b,.job-bar i { display:block; height:100%; border-radius:10px; background:linear-gradient(90deg,#6d9f4b,#c6df79); }.score-row strong { text-align:right; }.score-row em { font-style:normal; color:#78906e; font-size:10px; background:#f0f6e9; border-radius:9px; padding:1px 4px; text-align:center; }
.method-box { margin:12px 0; padding:13px 15px; border:1px dashed #b9cfaa; border-radius:13px; background:#fbfdf8; color:#5c6c5d; }.method-box b { color:#4b8137; }.method-box p { margin:4px 0 0; font-size:13px; }.experiments { margin:0; padding-left:24px; display:grid; gap:8px; }.experiments li { background:#f1f8e7; border:1px solid #d8e5ce; border-radius:12px; padding:8px 12px; color:#526653; }
.jobs { display:grid; gap:12px; }.job { background:#f1f8e7; border:1px solid #d8e5ce; border-radius:17px; padding:15px; }.job header { display:flex; justify-content:space-between; align-items:center; }.job h4 { margin:0; font-size:19px; }.job header b { font-size:19px; }.job p { margin:10px 0 4px; }.job small { color:#5b8051; }.chips,.tags { display:flex; gap:6px; flex-wrap:wrap; margin:8px 0; }.chips span,.tags span { padding:1px 8px; border:1px solid #d8e8cc; border-radius:99px; background:#fff; font-size:11px; }.link-btn { display:block; margin:16px auto; }.tags span { color:#fff; background:#5b963d; border-color:#5b963d; }.reading { color:#536754; }.two-col { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.two-col > div { background:#f3f8ef; border:1px solid #dbe8d4; border-radius:14px; padding:13px; }.two-col h4 { margin:0 0 5px; }.two-col p { margin:0; font-size:13px; }.cautions { display:grid; gap:10px; }.cautions > div { background:var(--gold); border:1px solid #f0e4af; border-radius:14px; padding:13px; }.cautions b { font-size:16px; }.cautions p { margin:3px 0 0; }.actions { padding-left:0; list-style:none; counter-reset:item; display:grid; gap:8px; }.actions li { counter-increment:item; background:#f1f8e7; border:1px solid #d8e5ce; border-radius:12px; padding:8px 12px 8px 43px; position:relative; }.actions li::before { content:counter(item); position:absolute; left:10px; top:7px; width:24px; height:24px; border-radius:50%; color:#fff; background:#6c9f4e; text-align:center; line-height:24px; font-weight:700; }.second { display:flex; flex-direction:column; gap:3px; background:#f0f8e5; border:1px solid #d8e5ce; border-radius:14px; padding:15px; }.second span { font-size:13px; color:#697c6c; }.quote { border:1px dashed #b5cda4; text-align:center; }.restart { width:100%; margin-top:15px; }.footer-note { text-align:center; }
@media (max-width:520px) { .landing { padding:38px 24px; min-height:650px; }.landing h1 { font-size:32px; }.quiz { padding:22px 18px; }.quiz h2 { font-size:25px; }.result { padding:25px 16px; }.score-row { grid-template-columns:33px 1fr 35px 48px; }.two-col { grid-template-columns:1fr; } }