/* 公开操作与排错指南共用首页的色彩、留白和正文宽度。 */
.help-hero { position: relative; overflow: hidden; padding: 42px 0 70px; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 80% 35%, #e8edff 0, transparent 38%), var(--paper); }
.help-hero::after { content: ""; position: absolute; width: 390px; height: 390px; top: 22px; right: 5%; border: 1px solid #dce5fb; border-radius: 50%; pointer-events: none; }
.help-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); align-items: center; gap: 65px; }
.help-hero h1 { margin-top: 22px; font-size: clamp(38px, 4.3vw, 60px); font-weight: 550; letter-spacing: -2px; line-height: 1.28; }
.help-hero h1 em { color: var(--brand); font: 600 1em/1.28 var(--serif); }
.help-lead { max-width: 670px; margin-top: 24px; font-size: 15px; line-height: 1.95; }
.help-overview { padding: 31px; border: 1px solid #d9e3f7; border-radius: 12px; background: #fffefa; box-shadow: 0 20px 44px -32px #526cab80; }
.help-overview strong { display: block; margin-bottom: 16px; font-size: 21px; font-weight: 550; }
.help-overview ol { margin: 0; padding: 0; list-style: none; }
.help-overview li { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid #e8ebf4; font-size: 13px; }
.help-overview li span, .help-steps li > span { display: grid; place-items: center; width: 29px; height: 29px; flex: none; border: 1px solid #d0daf9; border-radius: 50%; color: var(--brand); font: 11px var(--serif); }

/* 症状卡和排查步骤让读者按页面提示找到对应处理方法。 */
.help-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 32px; }
.help-cards article { display: flex; flex-direction: column; padding: 27px; border: 1px solid var(--line); border-radius: 10px; background: #fffefa; }
.help-cards article:nth-child(2) { background: #edf1fb; }
.help-cards h3 { font-size: 20px; }
.help-cards p { margin-top: 11px; font-size: 13px; line-height: 1.9; }
.help-cards a { margin-top: auto; padding-top: 15px; font-size: 12px; font-weight: 600; }
.help-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 31px 0 0; padding: 0; list-style: none; }
.help-steps li { display: flex; gap: 17px; padding: 25px; border: 1px solid #dfe5f5; border-radius: 10px; background: #fffefa; }
.help-steps h3 { font-size: 18px; }
.help-steps p { margin-top: 10px; font-size: 13px; line-height: 1.85; }
.help-example { margin-top: 30px; padding: 28px; border: 1px solid #dfe5f5; border-radius: 10px; background: #f0f3fd; }
.help-example h3 { margin-bottom: 10px; }
.help-example p { font-size: 13px; }
.help-example pre { overflow-x: auto; margin: 19px 0 0; padding: 18px; border: 1px solid #dce3f3; border-radius: 7px; background: #fffefa; color: #34405d; font: 12px/1.8 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.help-note { margin-top: 17px; font-size: 12px; }
.help-check { display: grid; grid-template-columns: .8fr 1.2fr; align-items: start; gap: 48px; padding: 39px; border: 1px solid #dfe5f5; border-radius: 12px; background: #f0f3fd; }
.help-check h2 { margin-top: 16px; }
.help-check ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.help-check li { padding: 12px 15px; border: 1px solid #e4e9f5; border-radius: 7px; background: #fffefa; font-size: 13px; }
.help-check li::before { content: "✓"; margin-right: 11px; color: var(--brand); font-weight: 700; }

/* 试卷码表单沿用在线考试指南的清晰输入样式。 */
.help-code-form { display: grid; gap: 10px; margin-top: 22px; }
.help-code-form label { color: #344571; font-size: 12px; font-weight: 600; }
.help-code-form input { width: 100%; min-height: 49px; padding: 11px 13px; border: 1px solid #cbd6ef; border-radius: 6px; background: #fff; font-size: 14px; }
.help-code-form input:focus { outline: 3px solid #5677fc40; outline-offset: 2px; }
.help-code-form .button { width: 100%; }
.help-cta { position: relative; overflow: hidden; margin-top: 72px; margin-bottom: 72px; padding: 54px; border-radius: 12px; background: #2a3559; text-align: center; }
.help-cta::after { content: ""; position: absolute; width: 300px; height: 300px; top: -150px; right: -70px; border: 1px solid #ffffff19; border-radius: 50%; pointer-events: none; }
.help-cta h2, .help-cta p { position: relative; z-index: 1; color: #f4f6ff; }
.help-cta h2 { font: 400 34px/1.5 var(--serif); }
.help-cta p { margin-top: 12px; color: #b9c6e6; }
.help-cta .actions { position: relative; z-index: 1; justify-content: center; }

@media (max-width: 800px) { .help-hero { padding: 34px 0 60px; } .help-hero-grid, .help-check { grid-template-columns: 1fr; gap: 30px; } .help-hero h1 { font-size: 43px; } .help-overview { max-width: 520px; } }
@media (max-width: 650px) { .help-cards, .help-steps { grid-template-columns: 1fr; } .help-check { padding: 25px; } }
@media (max-width: 480px) { .help-hero { padding: 26px 0 49px; } .help-hero h1 { font-size: 34px; } .help-lead { font-size: 14px; } .help-overview, .help-cards article, .help-steps li { padding: 23px; } .help-example { padding: 20px; } .help-cta { margin-top: 54px; margin-bottom: 54px; padding: 38px 24px; } .help-cta h2 { font-size: 27px; } }