:root { --green:#176b57; --green-dark:#105345; --mint:#e9f5f0; --coral:#d9674e; --amber:#b66a21; --ink:#17232b; --muted:#61717b; --line:#dce5e8; --paper:#fff; --bg:#f4f7f6; --radius:8px; font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif; color:var(--ink); background:var(--bg); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:linear-gradient(90deg,rgba(23,107,87,.025) 1px,transparent 1px),linear-gradient(rgba(23,107,87,.025) 1px,transparent 1px),var(--bg); background-size:28px 28px; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
.topbar { height:72px; padding:0 max(28px,calc((100% - 1180px)/2)); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(255,255,255,.93); position:sticky; top:0; z-index:10; backdrop-filter:blur(12px); }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:800; font-size:19px; }
.brand small { display:block; color:var(--muted); font-weight:500; font-size:10px; margin-top:2px; }
.brand-mark { width:36px; height:36px; display:grid; place-items:center; color:#fff; background:var(--green); border-radius:7px; }
.brand-mark svg { width:21px; }
.account { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:13px; }
.icon-button { border:1px solid var(--line); background:#fff; width:38px; height:38px; display:grid; place-items:center; border-radius:7px; color:var(--muted); cursor:pointer; }
.icon-button:hover { color:var(--green); border-color:#9cc8bb; }
.icon-button svg { width:18px; }
.main { min-height:calc(100vh - 122px); max-width:1180px; margin:auto; padding:clamp(36px,6vw,80px) 28px; }
.main.compact { padding-top:36px; }
footer { min-height:50px; display:grid; place-items:center; padding:14px 24px; border-top:1px solid var(--line); color:#7a878f; font-size:12px; background:#fff; text-align:center; }
.login-layout { display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:clamp(50px,8vw,110px); min-height:570px; }
.login-copy { position:relative; padding:40px 0; }
.login-copy:before { content:""; position:absolute; width:90px; height:5px; background:var(--coral); left:0; top:0; }
.eyebrow { display:block; color:var(--green); font-size:12px; font-weight:800; letter-spacing:0; margin-bottom:12px; }
.login-copy h1 { font-size:clamp(40px,5vw,66px); line-height:1.16; margin:0 0 22px; letter-spacing:0; }
.login-copy h1 em { color:var(--green); font-style:normal; }
.login-copy > p { max-width:570px; color:var(--muted); font-size:17px; line-height:1.9; }
.privacy-note { margin-top:40px; display:flex; gap:13px; align-items:center; color:var(--muted); font-size:13px; }
.privacy-note svg { width:38px; height:38px; padding:8px; background:var(--mint); color:var(--green); border-radius:50%; }
.privacy-note strong { color:var(--ink); display:block; margin-bottom:3px; }
.login-panel { background:#fff; border:1px solid var(--line); border-top:4px solid var(--green); border-radius:var(--radius); padding:34px; box-shadow:0 22px 60px rgba(31,50,45,.09); }
.panel-heading { display:flex; justify-content:space-between; align-items:center; font-size:22px; font-weight:800; margin-bottom:30px; }
.panel-heading svg { color:var(--coral); }
.login-panel label { display:block; margin-bottom:20px; font-size:13px; font-weight:700; }
.input-wrap { margin-top:8px; position:relative; display:flex; align-items:center; }
.input-wrap > svg { position:absolute; left:13px; width:18px; color:#91a0a8; }
.input-wrap input { width:100%; height:48px; border:1px solid #cfdadd; border-radius:6px; padding:0 44px; outline:none; background:#fbfcfc; }
.input-wrap input:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(23,107,87,.1); background:#fff; }
.input-action { position:absolute; right:5px; width:38px; height:38px; border:0; background:transparent; display:grid; place-items:center; color:var(--muted); cursor:pointer; }
.input-action svg { width:18px; }
.button { min-height:44px; border-radius:6px; border:1px solid transparent; padding:0 18px; display:inline-flex; justify-content:center; align-items:center; gap:9px; text-decoration:none; font-weight:700; font-size:14px; cursor:pointer; }
.button svg { width:18px; }
.button.primary { background:var(--green); color:#fff; }
.button.primary:hover { background:var(--green-dark); }
.button.secondary { background:#fff; color:var(--ink); border-color:var(--line); }
.button.secondary:hover { border-color:#9eb6b0; color:var(--green); }
.button:disabled { opacity:.45; cursor:not-allowed; }
.button.wide { width:100%; }
.form-error { min-height:20px; color:#b42318; font-size:12px; margin:-7px 0 8px; }
.login-help { margin-top:18px; display:flex; align-items:center; gap:7px; justify-content:center; color:#7d8b92; font-size:11px; }
.login-help svg { width:14px; }
.test-head,.report-head { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; margin-bottom:28px; }
.test-head h1,.report-head h1 { font-size:30px; margin:0 0 8px; }
.test-head p,.report-head p { color:var(--muted); margin:0; }
.completion { min-width:100px; text-align:right; color:var(--muted); font-size:12px; }
.completion strong { display:block; color:var(--green); font-size:32px; }
.completion small { color:var(--muted); font-size:14px; }
.progress-block { background:#fff; border:1px solid var(--line); padding:17px 20px; border-radius:var(--radius); margin-bottom:18px; }
.progress-meta { display:flex; justify-content:space-between; font-size:12px; font-weight:700; margin-bottom:11px; }
.progress-meta span:last-child { display:flex; align-items:center; gap:5px; color:var(--green); font-weight:500; }
.progress-meta svg { width:15px; }
.progress { height:6px; background:#e7eded; overflow:hidden; border-radius:6px; }
.progress span { display:block; height:100%; background:var(--green); transition:width .3s; }
.question-list { background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.question { margin:0; border:0; border-bottom:1px solid var(--line); padding:25px 28px; transition:background .2s; }
.question:last-child { border-bottom:0; }
.question.answered { background:#fcfefd; }
.question.needs-answer { background:#fff6f3; box-shadow:inset 4px 0 var(--coral); }
.question legend { width:100%; display:flex; align-items:flex-start; gap:12px; font-weight:700; line-height:1.55; padding:0; }
.question legend span { flex:0 0 28px; height:24px; display:grid; place-items:center; background:#eef3f2; color:var(--green); font-size:11px; border-radius:4px; }
.options { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin:18px 0 0 40px; }
.options label { cursor:pointer; }
.options input { position:absolute; opacity:0; pointer-events:none; }
.options span { height:40px; display:grid; place-items:center; border:1px solid #d7e0e2; border-radius:5px; color:var(--muted); font-size:13px; background:#fff; transition:.15s; }
.options input:checked + span { border-color:var(--green); color:var(--green); background:var(--mint); font-weight:800; box-shadow:inset 0 0 0 1px var(--green); }
.options label:hover span { border-color:#8db6aa; }
.test-nav { min-height:82px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; }
.test-nav .button:last-child { justify-self:end; }
.test-nav > span { color:var(--muted); font-size:12px; }
dialog { width:min(460px,calc(100% - 32px)); border:0; border-radius:8px; padding:34px; text-align:center; box-shadow:0 28px 90px rgba(0,0,0,.24); }
dialog::backdrop { background:rgba(16,35,32,.58); backdrop-filter:blur(2px); }
.dialog-close { position:absolute; top:13px; right:13px; }
.dialog-icon { width:54px; height:54px; display:grid; place-items:center; border-radius:50%; background:var(--mint); color:var(--green); margin:0 auto 18px; }
dialog h2 { margin:0 0 9px; }
dialog p { color:var(--muted); line-height:1.7; }
.dialog-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:24px; }
.report-head .button { flex:0 0 auto; }
.crisis { display:flex; gap:16px; background:#fff0ed; border:1px solid #f1c2b8; border-left:4px solid var(--coral); padding:20px; margin-bottom:20px; border-radius:6px; }
.crisis svg { flex:0 0 25px; color:var(--coral); }
.crisis p { margin:6px 0 0; color:#71483f; line-height:1.7; font-size:13px; }
.score-band { display:grid; grid-template-columns:170px 1fr 210px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:40px; }
.score-main { padding:28px; color:#fff; background:var(--green); display:flex; flex-direction:column; }
.score-main.attention { background:var(--amber); }.score-main.severe { background:#a63d35; }
.score-main span { font-size:12px; opacity:.85; }.score-main strong { font-size:50px; line-height:1.1; margin:10px 0; }.score-main b { font-size:15px; }
.score-explain { padding:28px 32px; border-right:1px solid var(--line); }
.score-explain h2 { margin:0 0 10px; font-size:18px; }.score-explain p { margin:0; color:var(--muted); line-height:1.7; font-size:13px; }
.score-explain .recommendation { display:flex; gap:7px; color:var(--ink); margin-top:12px; }.recommendation svg { color:var(--coral); flex:0 0 17px; }
.score-stats { display:grid; grid-template-rows:1fr 1fr; padding:16px 24px; }
.score-stats div { display:flex; flex-direction:column; justify-content:center; }.score-stats div:first-child { border-bottom:1px solid var(--line); }
.score-stats strong { font-size:22px; }.score-stats span { color:var(--muted); font-size:11px; margin-top:3px; }
.section-title { display:flex; justify-content:space-between; align-items:end; margin-bottom:18px; }.section-title h2 { margin:0; font-size:24px; }
.scale-key { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:10px; }.scale-key div { width:80px; height:5px; background:linear-gradient(90deg,#8bc1b3,#e6aa72,#cf6558); border-radius:5px; }
.factor-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.factor { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px; }
.factor header { display:flex; align-items:center; justify-content:space-between; }.factor header > div { display:flex; align-items:center; gap:9px; }.factor header span { color:#91a0a8; font-size:10px; }.factor h3 { margin:0; font-size:15px; }.factor header b { color:var(--green); font-size:19px; }
.factor-bar { height:5px; background:#edf1f1; margin:15px 0 10px; border-radius:4px; overflow:hidden; }.factor-bar span { display:block; height:100%; background:var(--green); }
.factor-status { display:flex; justify-content:space-between; font-size:11px; }.factor-status span { font-weight:700; color:var(--green); }.factor-status small { color:var(--muted); }
.factor p { color:var(--muted); font-size:12px; line-height:1.65; margin:15px 0 0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.report-note { display:flex; align-items:center; gap:15px; border-top:1px solid var(--line); margin-top:36px; padding-top:26px; }.report-note > svg { color:var(--green); flex:0 0 22px; }.report-note p { color:var(--muted); font-size:12px; line-height:1.6; flex:1; }.report-note .button { flex:0 0 auto; }
.toast { position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px); background:#17312b; color:#fff; padding:11px 17px; border-radius:6px; opacity:0; pointer-events:none; transition:.2s; z-index:100; box-shadow:0 8px 30px rgba(0,0,0,.18); font-size:13px; }.toast.show { opacity:1; transform:translate(-50%,0); }.toast.warning { background:#8d3f31; }
.loading-screen { min-height:100vh; display:grid; place-content:center; gap:12px; color:var(--muted); text-align:center; }.spinner { margin:auto; width:32px; height:32px; border:3px solid #dbe7e3; border-top-color:var(--green); border-radius:50%; animation:spin .8s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:800px) { .topbar { height:62px; padding:0 16px; }.account span { display:none; }.main,.main.compact { padding:28px 16px; }.login-layout { grid-template-columns:1fr; gap:20px; min-height:0; }.login-copy { padding:20px 0 0; }.login-copy h1 { font-size:37px; }.login-copy > p { font-size:14px; }.privacy-note { margin-top:22px; }.login-panel { padding:25px 20px; }.test-head,.report-head { align-items:flex-start; }.test-head h1,.report-head h1 { font-size:24px; }.score-band { grid-template-columns:120px 1fr; }.score-main { padding:22px; }.score-explain { border-right:0; padding:22px; }.score-stats { grid-column:1 / -1; grid-template-columns:1fr 1fr; grid-template-rows:auto; border-top:1px solid var(--line); }.score-stats div { padding:8px; }.score-stats div:first-child { border-bottom:0; border-right:1px solid var(--line); }.factor-grid { grid-template-columns:1fr; } }
@media (max-width:560px) { .main,.main.compact { padding:22px 12px; }.login-copy h1 { font-size:32px; }.login-copy br { display:none; }.question { padding:22px 16px; }.options { grid-template-columns:repeat(5,minmax(50px,1fr)); overflow-x:auto; margin-left:0; padding-bottom:4px; }.options span { min-width:50px; font-size:12px; }.test-head { align-items:flex-start; }.test-head p { font-size:13px; line-height:1.6; }.completion { min-width:68px; }.test-nav { grid-template-columns:1fr 1fr; }.test-nav > span { grid-row:1; grid-column:1 / -1; text-align:center; }.test-nav .button { grid-row:2; }.report-head { display:block; }.report-head .button { margin-top:18px; width:100%; }.score-band { grid-template-columns:1fr; }.score-main { flex-direction:row; align-items:center; gap:16px; }.score-main strong { font-size:38px; }.score-explain { border-top:1px solid var(--line); }.score-stats { grid-column:auto; }.report-note { align-items:flex-start; flex-wrap:wrap; }.report-note p { margin-top:0; }.report-note .button { width:100%; }.dialog-actions { grid-template-columns:1fr; } }