.onboarding-entry { position:relative; margin: 14px 16px; padding: 18px 56px 18px 20px; border: 1px solid var(--hair); border-radius: 14px; background: #f4f8fc; display:flex; align-items:center; gap:16px; }
.onboarding-entry div {flex:1;min-width:0;}.onboarding-entry h2 {font-size:17px;margin:0 0 5px;}.onboarding-entry p {margin:0;color:#536275;line-height:1.6;}
.onboarding {width:min(1080px,calc(100vw - 32px));height:min(840px,calc(100dvh - 32px));background:#fff;border-radius:18px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 16px 80px #0003;color:#1c2a3a;}
.onboarding-header {display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid #e2e7ed;flex-shrink:0;}.onboarding-header strong{font-size:19px;}
.onboarding-status {padding:10px 22px;background:#f5f8fb;font-size:12px;line-height:1.6;color:#526273;flex-shrink:0;}.onboarding-status.is-error{background:#fff2ec;color:#9a3412;}
.onboarding-layout {display:grid;grid-template-columns:225px minmax(0,1fr);min-height:0;flex:1;overflow:hidden;}
.onboarding-nav {padding:12px;overflow:auto;border-right:1px solid #e2e7ed;}
.onboarding-chapter {display:block;width:100%;border:0;background:transparent;text-align:left;padding:13px 12px;border-radius:9px;font:inherit;font-size:14px;line-height:1.5;cursor:pointer;color:inherit;}
.onboarding-chapter[aria-current="step"] {background:#e9f1fb;color:#1758a1;}.onboarding-chapter:hover {background:#f0f4f8;}
.onboarding-reader {overflow:auto;padding:28px 34px;overscroll-behavior:contain;min-width:0;line-height:1.8;font-size:15px;}
.onboarding-reader h2 {font-size:24px;margin:4px 0 8px;}.onboarding-reader h3 {font-size:18px;}.onboarding-reader p {margin:8px 0 14px;}
.onboarding-description{color:#526273;}.onboarding-kicker {font-size:12px;color:#66788b;}.onboarding-reader .essay>h1{display:none;}.onboarding-reader .essay{font-size:15px;line-height:1.9;}
.onboarding-reader .essay table{font-size:13px;}.onboarding-reader .essay th,.onboarding-reader .essay td{overflow-wrap:anywhere;}
.onboarding-actions {display:flex;justify-content:space-between;gap:12px;padding:12px 22px;border-top:1px solid #e2e7ed;flex-shrink:0;}
.onboarding-field {border:1px solid #dfe5ec;border-radius:10px;margin:12px 0;padding:12px 16px;}.onboarding-field summary {font-size:15px;cursor:pointer;}.onboarding-field h4 {font-size:14px;margin:18px 0 6px;}
.onboarding-check,.onboarding-result {border:1px solid #cbdceb;background:#f3f8fd;padding:18px;border-radius:12px;margin-top:26px;}
.onboarding-quiz fieldset {min-width:0;border:0;border-bottom:1px solid #e4e9ef;padding:20px 0;margin:0;}.onboarding-quiz legend{font-size:16px;line-height:1.7;max-width:100%;padding:0;font-weight:600;}
.onboarding-option {display:flex;align-items:flex-start;gap:10px;padding:8px 4px;font-size:14px;line-height:1.8;cursor:pointer;}.onboarding-option input{flex-shrink:0;margin-top:6px;accent-color:#2369b4;}
.onboarding-quiz>.btn {margin-top:20px;}.onboarding :focus-visible{outline:2px solid #2376c7;outline-offset:3px;}
@media(max-width:700px){.onboarding{width:100vw;height:100dvh;border-radius:0;}.onboarding-layout{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);}.onboarding-nav{display:flex;border-right:0;border-bottom:1px solid #e2e7ed;gap:4px;padding:8px;max-height:64px;}.onboarding-chapter{white-space:nowrap;width:auto;flex-shrink:0;padding:10px;}.onboarding-reader{padding:20px;}.onboarding-status{font-size:12px;padding:8px 14px;}.onboarding-header,.onboarding-actions{padding:12px 14px;}.onboarding-entry{align-items:flex-start;flex-direction:column;}.onboarding-actions .btn{white-space:normal;}}

/* A non-modal companion: page controls remain interactive, including upload dialogs. */
.onboarding-practice {position:fixed;left:16px;bottom:20px;width:280px;max-width:calc(100vw - 32px);z-index:350;max-height:calc(100dvh - 110px);display:flex;flex-direction:column;background:#fff;color:#243448;border:1px solid #bfd0e2;border-radius:14px;box-shadow:0 8px 36px #122d4930;font-size:13px;line-height:1.7;}
.onboarding-practice-header {display:flex;align-items:center;gap:4px;padding:10px;border-bottom:1px solid #dce5ee;flex-shrink:0;}
.onboarding-practice-title {flex:1;border:0;background:none;font:inherit;font-weight:600;text-align:left;cursor:pointer;color:inherit;}
.onboarding-practice-body {padding:14px;overflow:auto;min-height:0;}.onboarding-practice-body .select{width:100%;font-size:13px;}.onboarding-practice-body p{margin:10px 0;}.onboarding-practice-role{color:#526579;}.onboarding-practice-feedback{padding:8px;background:#eef5fb;border-radius:8px;}
.onboarding-practice-buttons{display:flex;flex-wrap:wrap;gap:8px;}.onboarding-practice .btn{white-space:normal;}.onboarding-practice.is-collapsed .onboarding-practice-body{display:none;}.onboarding-practice.is-collapsed .onboarding-practice-header{border-bottom:0;}
.onboarding-target {outline:3px solid #2876c9 !important;outline-offset:4px;scroll-margin-top:110px;}
@media(max-width:700px){.onboarding-practice{bottom:auto;top:76px;left:8px;width:calc(100vw - 16px);max-width:none;max-height:45dvh;}.onboarding-practice-header{padding:8px 12px;}.onboarding-practice-body{padding:12px;}.onboarding-practice .btn{min-height:36px;}}

.onboarding-entry-close {position:absolute;top:10px;right:10px;}

/* 示范角色：每一步的成品截图 + 去做按钮 */
.onboarding-goto {margin:4px 8px 18px 0;}
.onboarding-demo {margin:6px 0 22px;border:1px solid #dfe5ec;border-radius:12px;overflow:hidden;background:#f6f8fb;}
.onboarding-demo a {display:block;line-height:0;}
.onboarding-demo img {display:block;width:100%;height:auto;max-height:520px;object-fit:contain;object-position:top center;background:#fff;}
.onboarding-demo figcaption {padding:10px 14px;font-size:13px;line-height:1.7;color:#435468;border-top:1px solid #e2e7ed;}
.onboarding-reader .essay pre {white-space:pre-wrap;font-size:13px;background:#f5f7fa;border-radius:8px;padding:10px 12px;}
.onboarding-reader h3.onboarding-good-title {font-size:16px;margin:20px 0 4px;}
.onboarding-check {padding:12px 16px;margin-top:22px;}.onboarding-check p{margin:0 0 6px;}
.onboarding-feedback {display:flex;flex-direction:column;gap:10px;margin:8px 0 24px;}
.onboarding-feedback .select {max-width:320px;}.onboarding-feedback .btn {align-self:flex-start;}
.onboarding-feedback-note {margin:0;font-size:13px;color:#41566d;}
.onboarding-feedback-item {border-top:1px solid #e2e7ed;padding:10px 0;}.onboarding-feedback-item p{margin:2px 0 0;white-space:pre-wrap;}
.onboarding-feedback-meta,.onboarding-feedback-empty {font-size:12px;color:#66788b;}
/* 关掉入门或练习后左下角的「继续」小条：不挡页面，点了回到刚才那一步 */
.onboarding-resume {position:fixed;left:16px;bottom:20px;z-index:270;max-width:calc(100vw - 32px);display:flex;align-items:center;border:1px solid #bfd0e2;border-radius:999px;background:#fff;box-shadow:0 4px 18px #122d4922;overflow:hidden;}
.onboarding-resume button {border:0;background:none;font:inherit;cursor:pointer;}
.onboarding-resume-go {padding:8px 6px 8px 14px;color:#1758a1;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.onboarding-resume-go:hover {color:#0d4785;}
.onboarding-resume-hide {padding:6px 11px 6px 4px;color:#a3afbc;font-size:15px;line-height:1;}
.onboarding-resume-hide:hover {color:#5f6f80;}
.onboarding-resume.hidden {display:none;}
.onboarding-tips {margin:22px 0 0;padding:12px 0 0;border-top:1px dashed #dfe5ec;color:#8a97a6;font-size:12.5px;line-height:1.75;}
.onboarding-tips-title {font-size:12px;color:#8a97a6;margin-bottom:2px;}
.onboarding-tips ul {margin:0;padding-left:18px;}.onboarding-tips li {margin:2px 0;}