/* Unified HSK 1–9 pathway. Original learner exercises, not an official exam. */
.hp-root{--hp-ink:#233c36;--hp-muted:#526c62;--hp-border:#d6e7dd;--hp-soft:#eff7f0;--hp-card:#fff;--hp-main:#14654c;margin:0 auto;max-width:1460px;min-width:0}
.hp-hero{background:radial-gradient(circle at 85% 15%,#3b9b74 0,transparent 40%),linear-gradient(122deg,#083a31,#1d6048);border-radius:24px;color:#fff;padding:34px 39px;display:flex;gap:28px;justify-content:space-between;align-items:center}
.hp-hero>div:first-child{max-width:790px}.hp-kicker{font-size:11px;letter-spacing:.1em;font-weight:850;color:#2b9876}.hp-hero .hp-kicker{color:#b1ecc9}
.hp-hero h1{font-size:clamp(30px,4vw,50px);line-height:1.22;letter-spacing:-1.3px;margin:13px 0 17px}.hp-hero h1 em{font-style:normal;color:#e9dbab}
.hp-hero p{font-size:14px;line-height:1.8;color:#d9f4e4}.hp-hero a{color:#bcead5;text-underline-offset:5px;font-size:12px;font-weight:700}
.hp-hero-count{min-width:207px;display:flex;flex-direction:column;align-items:center;gap:7px;background:#ffffff18;border:1px solid #ffffff45;padding:25px 20px;border-radius:20px;text-align:center}
.hp-hero-count strong{font-size:49px;letter-spacing:-2px}.hp-hero-count span{font-size:12px;line-height:1.6}.hp-hero-count b{font-size:11px;color:#e6dcae}
.hp-disclaimer{padding:15px 18px;border:1px solid #e4d9b8;background:#fcf9ef;color:#675738;border-radius:13px;font-size:12px;line-height:1.75;margin:20px 0}
.hp-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:19px 0 25px}
.hp-metrics>div{border:1px solid var(--hp-border);border-radius:14px;background:var(--hp-card);padding:16px;display:flex;flex-direction:column;gap:7px}
.hp-metrics b{font-size:24px;color:var(--hp-main)}.hp-metrics span{font-size:11px;color:var(--hp-muted)}
.hp-section-title{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;margin:22px 0 15px}
.hp-section-title h2{margin:6px 0 0;color:var(--hp-ink);font-size:22px}.hp-section-title button{font-size:12px}
.hp-level-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hp-level{display:flex;flex-direction:column;align-items:stretch;gap:10px;border:1px solid var(--hp-border);border-radius:15px;background:var(--hp-card);padding:16px;min-width:0;min-height:166px;text-align:left;cursor:pointer;color:var(--hp-ink)}
.hp-level:hover,.hp-level.active{border-color:#2ca178}.hp-level.active{box-shadow:0 0 0 3px #2ca17819;border-width:2px}
.hp-level-top{display:flex;justify-content:space-between;align-items:center;color:#25815f;font-size:12px}
.hp-level-top small{color:var(--hp-muted);font-weight:650}
.hp-level>strong{font-size:15px;line-height:1.4}.hp-level>span:nth-child(3){font-size:12px;line-height:1.55;color:var(--hp-muted);flex:1}
.hp-bar{height:7px;border-radius:99px;background:#e1ede4;overflow:hidden}.hp-bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#218660,#a5d3a1)}
.hp-level-heading{display:flex;gap:16px;justify-content:space-between;align-items:center;margin:27px 0 15px}
.hp-level-heading h2{margin:4px 0;color:var(--hp-ink);font-size:24px}
.hp-level-heading p{font-size:12.5px;line-height:1.7;color:var(--hp-muted);margin:6px 0}
.hp-level-heading>span{background:var(--hp-soft);border-radius:12px;padding:10px 13px;color:var(--hp-main);font-size:11px;font-weight:750;white-space:nowrap}
.hp-layout{display:grid;grid-template-columns:minmax(220px,270px) minmax(0,1fr);gap:18px;align-items:start}
.hp-catalog,.hp-workspace{background:var(--hp-card);border:1px solid var(--hp-border);border-radius:18px}
.hp-catalog{padding:18px}.hp-catalog h3{margin:0 0 6px;font-size:16px;color:var(--hp-ink)}
.hp-catalog>p{margin:0 0 16px;font-size:12px;line-height:1.7;color:var(--hp-muted)}
.hp-lesson-list{display:grid;gap:9px}
.hp-lesson{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;padding:12px;border:1px solid var(--hp-border);border-radius:12px;background:var(--hp-card);text-align:left;cursor:pointer;color:var(--hp-ink)}
.hp-lesson.active,.hp-lesson:hover{background:var(--hp-soft);border-color:#5db08b}
.hp-lesson>span{display:grid;place-items:center;height:29px;border-radius:8px;background:#dfefe5;font-size:11px;font-weight:850;color:#277253}
.hp-lesson>div{min-width:0;display:grid;gap:5px}.hp-lesson strong{font-size:12px;line-height:1.5}.hp-lesson small{font-size:11px;color:var(--hp-muted)}
.hp-study-hint{margin-top:17px;padding:14px;border-radius:12px;background:var(--hp-soft);color:var(--hp-ink)}
.hp-study-hint b{font-size:12px}.hp-study-hint p,.hp-study-hint a{font-size:11px;line-height:1.85;color:var(--hp-muted)}.hp-study-hint a{font-weight:750;color:var(--hp-main)}
.hp-workspace{padding:24px;min-width:0;color:var(--hp-ink)}
.hp-workspace-head{display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap;align-items:center}
.hp-workspace-head>span:last-child{font-size:11px;color:var(--hp-muted)}
.hp-workspace h2{font-size:clamp(20px,2.4vw,30px);letter-spacing:-.5px;margin:11px 0 22px;color:var(--hp-ink)}
.hp-step{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:21px 0;border-top:1px solid var(--hp-border)}
.hp-step>div{min-width:0}.hp-step-number{width:33px;height:33px;border-radius:11px;background:#dff1e6;display:grid;place-items:center;color:#187854;font-size:13px;font-weight:850}
.hp-step h3{margin:3px 0 14px;color:var(--hp-ink);font-size:16px}
.hp-step p{font-size:12.5px;line-height:1.9;color:var(--hp-muted)}
.hp-formula{font:700 19px/1.7 "Microsoft YaHei",sans-serif!important;color:#1a7152!important;border-left:3px solid #3f9970;padding:11px 15px;background:var(--hp-soft);border-radius:8px}
.hp-hanzi{font:650 clamp(20px,2.5vw,27px)/1.9 "Microsoft YaHei","PingFang SC",sans-serif!important;color:var(--hp-ink)!important;overflow-wrap:anywhere}
.hp-pinyin{color:#35785b!important;font-size:14px!important}.hp-translation{background:var(--hp-soft);padding:12px 15px;color:var(--hp-ink)!important;border-radius:10px}
.hp-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}.hp-tools .btn,.hp-jump .btn{font-size:11px;padding:10px 12px}
.hp-question{font-size:14px!important;color:var(--hp-ink)!important;font-weight:750}
.hp-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin:14px 0}
.hp-choice{min-height:65px;padding:12px 15px;border:1px solid #c4ddce;border-radius:11px;background:#f7fbf8;text-align:left;font-size:12.5px;line-height:1.7;color:#204d37;font-weight:650;cursor:pointer}
.hp-choice:hover:not(:disabled){border-color:#259068}.hp-choice:disabled{opacity:1;cursor:default}
.hp-choice.correct{background:#def6e7;border:2px solid #1b995a;color:#1e5636}
.hp-choice.wrong{background:#ffe3e7;border:2px solid #c63a53;color:#852139}
.hp-feedback{padding:13px 16px;border-radius:12px;margin-top:15px;font-size:12px;line-height:1.8}
.hp-feedback p{margin:5px 0;color:inherit}.hp-feedback.good{background:#e5f7eb;color:#1e603d}.hp-feedback.bad{background:#fce8ec;color:#832c3f}
.hp-hint{font-size:11px!important;line-height:1.75;color:var(--hp-muted)}
.hp-step label{display:block;font-size:12px;font-weight:750;margin-bottom:7px}
.hp-step textarea{width:100%;min-height:105px;resize:vertical;border:1px solid #b7d1c0;border-radius:10px;background:var(--hp-card);color:var(--hp-ink);padding:14px;font:14px/1.85 "Microsoft YaHei","Segoe UI",sans-serif}
.hp-notes{margin:14px 0 0;background:var(--hp-soft);color:var(--hp-muted);padding:14px;border-radius:12px;font-size:12px;line-height:1.8}
.hp-jump{display:flex;flex-wrap:wrap;gap:9px;padding-top:19px;border-top:1px solid var(--hp-border)}
.hp-foot{margin:20px 0 0;border:1px solid var(--hp-border);background:var(--hp-soft);padding:17px 20px;border-radius:13px;color:var(--hp-ink);font-size:12px;line-height:1.9}
.hp-foot p{color:var(--hp-muted);margin:9px 0 0}
.hp-root :is(button,textarea,a):focus-visible{outline:3px solid #2c9472;outline-offset:3px}
body.dark .hp-root{--hp-ink:#e0f4e7;--hp-muted:#aec9bb;--hp-border:#435e4d;--hp-soft:#253f2e;--hp-card:#1e3025;--hp-main:#a8e9c4}
body.dark .hp-disclaimer{background:#413727;color:#efddb5;border-color:#726141}
body.dark .hp-level-top{color:#a2dfbd}
body.dark .hp-step-number,body.dark .hp-lesson>span{background:#355a40;color:#ceefdb}
body.dark .hp-formula{color:#afe6c6!important}
body.dark .hp-choice{background:#293d30;color:#e2f8e9;border-color:#58745f}
body.dark .hp-choice.correct{background:#194831;border-color:#63e1a0;color:#dbffed}
body.dark .hp-choice.wrong{background:#4c2631;border-color:#ff98ac;color:#ffe1e6}
body.dark .hp-feedback.good{background:#26503a;color:#d1f5e1}
body.dark .hp-feedback.bad{background:#552935;color:#ffd7df}
body.dark .hp-pinyin{color:#c2e8cb!important}
@media(max-width:1000px){.hp-level-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hp-layout{grid-template-columns:220px minmax(0,1fr)}}
@media(max-width:740px){.hp-hero{padding:25px 20px;flex-direction:column;align-items:stretch}.hp-hero-count{min-width:0}.hp-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.hp-layout{grid-template-columns:1fr}.hp-level-heading{align-items:start;flex-direction:column}.hp-choices{grid-template-columns:1fr}.hp-workspace{padding:16px}.hp-catalog{padding:15px}}
@media(max-width:480px){.hp-level-grid{grid-template-columns:1fr}.hp-level{min-height:0}.hp-step{grid-template-columns:28px minmax(0,1fr);gap:8px}.hp-step-number{width:27px;height:27px}.hp-hero h1{font-size:31px}.hp-workspace-head>span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){.hp-level,.hp-choice{transition:none}}

.hp-home-action{display:flex;align-items:center;justify-content:space-between;gap:19px;padding:20px 22px;border-radius:17px;background:linear-gradient(115deg,#e2f3e8,#fbf7e9);border:1px solid #c1e0cf;margin:14px 0 18px}
.hp-home-action>div{display:grid;gap:5px;flex:1;min-width:0}.hp-home-action strong{font-size:17px;color:#20563f}.hp-home-action small{font-size:12px;line-height:1.65;color:#486e59}.hp-home-action .btn{white-space:nowrap}
body.dark .hp-home-action{background:linear-gradient(120deg,#273d2f,#3a382d);border-color:#506a56}
body.dark .hp-home-action strong{color:#d0efdc}
body.dark .hp-home-action small{color:#b9d7c3}
@media(max-width:640px){.hp-home-action{flex-wrap:wrap;padding:16px}.hp-home-action .btn{width:100%;text-align:center}}