/* Companion visual system for the AI assessment: navy, cobalt, white, restrained orange. */
:root { --navy: #06265b; --blue: #0d47a1; --orange: #ff8c00; --ink: #10274b; --muted: #60738f; --line: #d8e3f1; --pale: #f3f7fc; }
body { background: #f3f7fc; }
.site-head { border-bottom: 1px solid #dce6f2; box-shadow: 0 3px 15px #103d7508; }
.button-blue { background: var(--blue); border-radius: 8px; box-shadow: 0 10px 24px #0d47a11c; }
.button-blue:hover:not(:disabled) { background: #083b91; }
.button-quiet { border: 1px solid #bed1e8; border-radius: 8px; background: #fff; }
.stepper { padding: 16px 0; gap: clamp(18px, 5vw, 60px); }

/* Assessment workspace follows the generated question mockup, using real sections and data. */
.question-page { width: min(1290px, 94vw); }
.question-shell { display: grid; grid-template-columns: 265px minmax(0, 1fr); gap: 18px; margin: 22px 0 48px; border: 0; border-radius: 0; min-height: 560px; background: transparent; box-shadow: none; overflow: visible; }
.question-rail, .question-main { border: 1px solid #dce6f2; border-radius: 17px; background: #fff; box-shadow: 0 12px 32px #0d47a10a; }
.question-rail { color: var(--ink); padding: 23px 18px 18px; }
.rail-head { padding: 0 9px 16px; border-bottom: 1px solid var(--line); }
.rail-head .eyebrow { color: var(--blue); font-size: 10px; letter-spacing: .12em; }
.question-rail h1 { display: block; margin: 7px 0 3px; color: var(--ink); font-size: 21px; line-height: 1.35; }
.question-rail .rail-head p { margin: 0; color: #758aa5; font-size: 12px; }
.section-current { display: none; }
.question-rail .section-list { gap: 1px; margin: 12px 0; }
.question-rail .section-list div { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 9px; align-items: center; min-height: 38px; padding: 6px 9px; color: #566f90; border: 0; border-radius: 7px; }
.question-rail .section-list div.active { padding: 6px 9px; background: #eaf2fd; color: var(--blue); font-weight: 750; }
.question-rail .section-list div.complete:not(.active) { color: #234974; }
.question-rail .section-list i { color: #849ab5; font-size: 11px; }
.question-rail .section-list .active i { color: var(--orange); }
.question-rail .section-list span { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.question-rail .section-list small { color: #91a3b9; font-size: 11px; font-weight: 500; }
.question-rail .section-list .active small { color: var(--blue); }
.question-rail .rail-note { margin-top: auto; padding: 15px 9px 0; border-top: 1px solid var(--line); color: #6b819d; font-size: 11px; line-height: 1.6; }
.question-main { padding: 31px clamp(25px, 3.6vw, 50px); min-height: 560px; }
.question-page-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; padding-bottom: 20px; margin-bottom: 23px; border-bottom: 1px solid var(--line); }
.question-page-heading strong { color: var(--ink); font-size: 19px; line-height: 1.4; }
.question-page-heading span { color: #7289a6; font-size: 12px; white-space: nowrap; }
.question-topline { color: var(--blue); font-size: 13px; letter-spacing: 0; }
.question-topline span:last-child { color: #758aa5; }
.question-main .progress-track { height: 5px; margin: 14px 0 31px; background: #e4ebf4; }
.question-main .progress-track i { background: var(--blue); }
.question-main h2 { max-width: 860px; margin: 0 0 22px; color: var(--ink); font-size: clamp(22px, 2.1vw, 27px); line-height: 1.5; letter-spacing: -.02em; }
.question-main .question-guidance { margin: -7px 0 19px; }
.question-main .answer-grid { grid-template-columns: 1fr; gap: 9px; max-width: 900px; }
.question-main .answer-option { min-height: 58px; padding: 13px 17px; border-color: #d4e0ee; border-radius: 9px; }
.question-main .answer-option span { color: #234064; font-size: 15px; }
.question-main .answer-option i { width: 22px; height: 22px; border: 1.5px solid #a5bad3; border-radius: 50%; background: #fff; font-size: 0; }
.question-main .answer-option:has(input[type="checkbox"]) i { border-radius: 5px; }
.question-main .answer-option.selected { background: #f0f6ff; border-color: #3175c9; box-shadow: 0 0 0 1px #3175c930; }
.question-main .answer-option.selected i { border: 6px solid var(--blue); background: #fff; }
.question-main .answer-option.selected:has(input[type="checkbox"]) i { border-width: 2px; background: var(--blue); }
.question-main .answer-option.selected:has(input[type="checkbox"]) i::after { content: "✓"; color: #fff; font-size: 14px; line-height: 18px; }
.question-main .scale-option { border-radius: 8px; }
.question-main .scale-option.selected { background: #eef5ff; border-color: var(--blue); }
.question-actions { border-top: 1px solid var(--line); padding-top: 20px; margin-top: auto; }
.question-actions .text-button { text-decoration: none; }

/* Web report: same navy banner / white reading surface as the AI assessment. */
.report-page { width: min(1290px, 94vw); }
.report-hero { min-height: 295px; margin-top: 20px; padding: 35px clamp(27px, 4vw, 54px); border-radius: 13px; background: linear-gradient(90deg, #061e48f5 0%, #072c63e4 53%, #0b397591 100%), url('./career-hero-v5.png') center 55% / cover; }
.report-hero::after { display: none; }
.report-hero .eyebrow { color: #ffb557; }
.report-hero > p { margin: 9px 0; color: #e0ebf8; font-size: 14px; }
.report-hero h1.interest-title { max-width: 930px; margin: 14px 0 16px; color: #fff; font-size: clamp(25px, 3vw, 38px); letter-spacing: -.02em; }
.report-hero .code-meaning span { border: 1px solid #ffffff45; background: #ffffff1c; color: #e7f0ff; }
.report-hero .report-lede { margin-top: 14px; color: #fff; font-size: 14px; }
.report-hero .share-button { color: #fff; border-color: #ffffff87; background: #ffffff17; }
.report-preview { margin: 18px 0 0; padding: 27px clamp(22px, 3.4vw, 44px); border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.report-preview .section-heading h2 { margin-top: 6px; color: var(--ink); font-size: 23px; }
.report-preview .direction-item { padding-inline: 7px; }
.report-preview .finding-strip { border: 1px solid var(--line); background: var(--line); }
.report-preview .finding-strip > div { background: #f5f8fc; }
.campus-preview { width: 100%; margin: 16px 0 0; padding: 27px clamp(22px, 3.4vw, 44px); border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.campus-preview .section-heading h2 { font-size: 23px; }
.report-details { margin-top: 17px; }
.report-details > summary { border-radius: 9px; background: #eaf1fa; }
.report-tools { padding: 14px 0 18px; }
.report-workspace { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 18px; align-items: start; }
.report-index { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; padding: 18px 12px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.report-index > strong { display: block; padding: 0 8px 11px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 14px; }
.report-index a { display: flex; gap: 9px; align-items: center; min-height: 34px; padding: 5px 8px; color: #546e8d; font-size: 12px; text-decoration: none; border-radius: 6px; }
.report-index a:hover, .report-index a:focus-visible { background: #edf4ff; color: var(--blue); }
.report-index i { font-style: normal; color: var(--orange); font-size: 10px; }
.report-document { min-width: 0; }
.report-document .report-chapter { margin: 0 0 13px; padding: 28px clamp(22px, 3.3vw, 42px); border-color: var(--line); border-radius: 11px; min-height: 0; box-shadow: 0 8px 26px #0d47a107; scroll-margin-top: 16px; }
.report-document .report-chapter h2 { margin: 9px 0 16px; color: var(--ink); font-size: clamp(21px, 2vw, 27px); }
.report-document .report-chapter > p { margin-block: 10px; font-size: 14px; line-height: 1.75; }
.report-document .report-chapter .eyebrow { color: var(--orange); letter-spacing: .09em; }
.report-document .print-cover { min-height: 385px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; background: linear-gradient(90deg, #051b42f8 0%, #082f68e8 65%, #0b397596 100%), url('./career-hero-v5.png') center 58% / cover; }
.print-cover-photo { display: none; }
.print-cover-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #d9e8fa; font-size: 12px; }
.print-cover-top img { display: block; width: 145px; height: auto; }
.print-cover-body { padding: 34px 0 20px; }
.report-document .print-cover h2 { color: #fff; margin: 11px 0 4px; font-size: clamp(28px, 3.8vw, 44px); line-height: 1.3; }
.print-cover .cover-subtitle { margin: 0; color: #e3ecf8; font-size: 19px; }
.cover-rule { width: 40px; height: 3px; margin: 20px 0 16px; background: var(--orange); }
.print-cover .cover-intro { color: #e0ebf8; font-size: 13px; }
.cover-meta { display: flex; flex-wrap: wrap; gap: 14px 32px; margin: 24px 0 0; }
.cover-meta div { display: flex; gap: 9px; align-items: baseline; }
.cover-meta dt { color: #a9c3e1; font-size: 11px; }
.cover-meta dd { margin: 0; color: #fff; font-size: 13px; font-weight: 700; }
.print-cover-foot { padding-top: 10px; border-top: 1px solid #ffffff55; color: #b4cce8; font-size: 11px; }
.report-document .report-ending { color: #fff; background: #0a316c; }
.report-document .report-ending h2 { color: #fff; }
.report-document .report-ending > p { color: #e0eaf7; }

@media (max-width: 900px) {
  .question-shell { grid-template-columns: 1fr; }
  .question-rail { padding: 14px 20px; }
  .rail-head, .question-rail .section-list, .question-rail .rail-note { display: none; }
  .section-current { display: block; color: var(--blue); font-size: 13px; font-weight: 750; }
  .question-main { min-height: 510px; }
  .report-workspace { grid-template-columns: 1fr; }
  .report-index { position: static; display: flex; gap: 3px; overflow-x: auto; max-height: none; padding: 8px; white-space: nowrap; }
  .report-index > strong { display: none; }
  .report-index a { flex: 0 0 auto; }
}
@media (max-width: 620px) {
  .stepper { padding: 12px 0; }
  .question-shell { gap: 9px; margin: 13px 0 32px; }
  .question-rail { padding: 12px 16px; }
  .question-main { min-height: 0; padding: 21px 18px 18px; }
  .question-page-heading { padding-bottom: 14px; margin-bottom: 19px; }
  .question-page-heading strong { font-size: 15px; }
  .question-page-heading span { display: none; }
  .question-topline { font-size: 11px; }
  .question-main .progress-track { margin: 12px 0 27px; }
  .question-main h2 { font-size: 20px; }
  .question-main .answer-option { min-height: 59px; padding: 11px 12px; }
  .question-main .answer-option span { font-size: 15px; }
  .question-actions { flex-wrap: wrap; gap: 7px; }
  .question-actions > span { order: 3; margin-left: auto; }
  .question-actions .text-button { order: 4; width: 100%; text-align: center; }
  .report-hero { min-height: 260px; padding: 29px 22px; background-position: 67% center; }
  .report-hero h1.interest-title { font-size: 26px; }
  .report-preview, .campus-preview { margin-top: 10px; padding: 23px 18px; }
  .report-preview .section-heading h2, .campus-preview .section-heading h2 { font-size: 21px; }
  .report-document .report-chapter { padding: 22px 18px; }
  .report-document .print-cover { min-height: 340px; }
  .print-cover-body { padding-block: 24px 18px; }
  .report-document .print-cover h2 { font-size: 30px; }
  .cover-meta { gap: 9px 20px; }
}
@media print {
  @page { size: A4; margin: 14mm 15mm; }
  @page :first { margin: 0; }
  html, body { width: 100%; background: #fff !important; color: #10274b; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .site-head, .stepper, .report-hero, .report-preview, .campus-preview, .report-details > summary, .report-tools, .report-index, .report-bottom, .share-button { display: none !important; }
  .report-page, .report-details, .full-report, .report-workspace, .report-document { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: #fff !important; }
  .report-document .report-chapter { display: block; width: 100%; min-height: 0; margin: 0; padding: 6mm 0 7mm; border: 0; border-bottom: 1px solid #d8e3f1; border-radius: 0; box-shadow: none; break-after: auto; page-break-after: auto; break-inside: auto; }
  .report-document .report-chapter:not(.print-cover)::before { content: "百年前程  /  大学生未来职业发展测评"; display: block; padding-bottom: 3mm; margin-bottom: 6mm; border-bottom: 1px solid #0d47a1; color: #0d47a1; font-size: 9px; letter-spacing: .04em; }
  .report-document .report-chapter h2 { font-size: 19px; margin: 3mm 0 4mm; }
  .report-document .report-chapter > p { font-size: 11px; line-height: 1.65; }
  .report-document .print-cover { position: relative; isolation: isolate; width: 210mm; height: 297mm; min-height: 297mm; padding: 21mm 19mm 17mm; break-after: page; page-break-after: always; border: 0; color: #fff; background: #0a2d63 !important; }
  .report-document .print-cover::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #061c42b8, #082c6457); }
  .report-document .print-cover .print-cover-photo { display: block; position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
  .print-cover-top, .print-cover-body, .print-cover-foot { position: relative; z-index: 2; }
  .print-cover-top img { width: 44mm; }
  .report-document .print-cover h2 { color: #fff; font-size: 31px; }
  .print-cover .cover-subtitle { font-size: 20px; }
  .print-cover-body { padding-top: 0; padding-bottom: 28mm; }
  .cover-meta { margin-top: 18mm; }
  .report-document .print-cover::before { display: none; }
  .report-document .report-ending { display: flex; flex-direction: column; justify-content: center; min-height: 269mm; padding: 19mm; margin: 0; border: 0; background: linear-gradient(90deg, #061c42ee, #0a316cda), url('./career-hero-v5.png') center / cover !important; color: #fff !important; break-before: page; page-break-before: always; break-inside: avoid; }
  .report-document .report-chapter.report-ending::before { content: "百年前程 / 大学生未来职业发展测评"; border-color: #ffffff70; color: #e2edfb; }
  .report-document .report-ending h2 { font-size: 30px; }
  .report-document .report-ending h2, .report-document .report-ending p { color: #fff !important; }
  .score-list, .direction-item, .answer-evidence > div, .path-detail, .campus-detail, .campus-habits > div, .action-list > div, .style-list > div { break-inside: avoid; }
  .campus-detail { padding: 3mm 0; }
  .campus-habits > div { padding: 1.5mm 0; }
  .answer-evidence { gap: 2mm; margin: 4mm 0; }
  .answer-evidence > div { padding: 2.5mm; }
  .direction-item { padding: 3mm 1mm; }
  .report-document a.inline-link { display: none; }
}