/*
 * 华测教育课程页 · 浅色主题
 * 品牌基线：工程纸 / 纸张白 / 华测墨蓝 / 测量蓝 / 校验红 / 成长黄
 * 本文件只覆盖视觉主题，页面结构、交互与响应式规则继续由 styles.css 管理。
 */

:root {
  color-scheme: light;
  --hc-ink-950: #061a33;
  --hc-ink-900: #092541;
  --hc-ink-700: #294761;
  --hc-ink-500: #60768a;
  --hc-blue-700: #066cae;
  --hc-blue-600: #0788c9;
  --hc-blue-400: #27addd;
  --hc-blue-100: #dff3fa;
  --hc-red-600: #d94d40;
  --hc-red-100: #f9e5e2;
  --hc-yellow-500: #f4c84b;
  --hc-yellow-100: #fff5cc;
  --hc-paper: #f4f1e9;
  --hc-paper-light: #fbfaf6;
  --hc-white: #ffffff;
  --hc-line: #cdd8df;

  --ink: var(--hc-ink-950);
  --paper: var(--hc-paper);
  --surface: var(--hc-paper-light);
  --surface-2: #edf4f7;
  --muted: var(--hc-ink-500);
  --line: rgba(6, 26, 51, .15);
  --orange: var(--hc-red-600);
  --green: var(--hc-yellow-500);
  --cyan: var(--hc-blue-600);
  --violet: var(--hc-blue-700);
  --dark: var(--hc-paper);
  --dark-2: var(--hc-paper-light);
  --shadow-card: 0 1px 2px rgba(6, 26, 51, .05), 0 12px 32px rgba(6, 26, 51, .09);
  --shadow-pop: 0 2px 4px rgba(6, 26, 51, .06), 0 24px 56px rgba(6, 26, 51, .14);
}

html {
  background: var(--hc-paper);
}

body {
  background:
    linear-gradient(90deg, rgba(6, 26, 51, .035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(6, 26, 51, .03) 1px, transparent 1px),
    var(--hc-paper);
  background-size: 72px 72px, 72px 72px, auto;
  color: var(--hc-ink-950);
}

body::before {
  background:
    linear-gradient(110deg, transparent 0 16%, rgba(7, 136, 201, .08) 16.1% 16.35%, transparent 16.45% 100%),
    linear-gradient(70deg, transparent 0 72%, rgba(217, 77, 64, .07) 72.1% 72.3%, transparent 72.4% 100%),
    linear-gradient(180deg, rgba(244, 200, 75, .07), transparent 34%, rgba(7, 136, 201, .04));
}

body::after {
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='230' viewBox='0 0 460 230'%3E%3Cg transform='translate(42 142) rotate(-22)' fill='%23061a33' font-family='Microsoft YaHei, PingFang SC, Arial, sans-serif' font-size='25' font-weight='900'%3E%3Ctext x='0' y='0'%3E%E5%8D%8E%E6%B5%8B%E6%95%99%E8%82%B2VIP-AI%E5%85%A8%E6%A0%88%E6%B5%8B%E8%AF%95%E4%B8%93%E5%AE%B6%3C/text%3E%3C/g%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.noise {
  opacity: .025;
  mix-blend-mode: multiply;
}

.topbar {
  border-bottom-color: rgba(6, 26, 51, .14);
  background: rgba(251, 250, 246, .92);
  box-shadow: 0 8px 28px rgba(6, 26, 51, .08);
}

.brand-logo {
  background: var(--hc-white);
  box-shadow: 0 0 0 1px rgba(6, 26, 51, .09), 0 8px 22px rgba(6, 26, 51, .11);
}

.brand-institution,
.brand-product {
  color: var(--hc-ink-950);
  text-shadow: none;
}

.brand-divider {
  color: var(--hc-red-600);
}

.brand-product {
  color: var(--hc-blue-600);
}

nav a {
  color: var(--hc-ink-700);
}

nav a:hover {
  color: var(--hc-ink-950);
  border-color: rgba(7, 136, 201, .26);
  background: var(--hc-blue-100);
}

nav a.is-active {
  color: var(--hc-white);
  border-color: var(--hc-ink-950);
  background: var(--hc-ink-950);
  box-shadow: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.official-site-link {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 15px;
  color: var(--hc-ink-950);
  border: 1px solid var(--hc-ink-950);
  border-radius: 6px;
  background: transparent;
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.official-site-link svg {
  width: 15px;
  height: 15px;
}

.official-site-link:hover {
  color: var(--hc-white);
  border-color: var(--hc-blue-700);
  background: var(--hc-blue-700);
  transform: translateY(-1px);
}

.online-classroom-link {
  color: var(--hc-white);
  border-color: var(--hc-blue-700);
  background: var(--hc-blue-700);
}

.online-classroom-link:hover {
  border-color: var(--hc-ink-950);
  background: var(--hc-ink-950);
}

.slide {
  opacity: .68;
}

.slide.is-active {
  opacity: 1;
}

.hero,
.projects,
.offer,
.recruitment,
.curriculum {
  background:
    linear-gradient(90deg, rgba(6, 26, 51, .04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(6, 26, 51, .032) 1px, transparent 1px),
    var(--hc-paper);
  background-size: 68px 68px, 68px 68px, auto;
}

.projects,
.offer {
  background-color: var(--hc-paper-light);
}

.hero::before,
.projects::before,
.offer::before,
.recruitment::before,
.curriculum::before {
  background:
    linear-gradient(120deg, transparent 0 18%, rgba(7, 136, 201, .08) 18.1% 18.3%, transparent 18.4% 100%),
    linear-gradient(60deg, transparent 0 78%, rgba(217, 77, 64, .07) 78.1% 78.3%, transparent 78.4% 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .34), transparent 30%);
}

h1 em {
  color: var(--hc-ink-950);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
}

h1 em::after {
  content: "";
  display: block;
  width: 1.6em;
  height: 7px;
  margin-top: 12px;
  background: linear-gradient(90deg, var(--hc-red-600) 0 36%, var(--hc-yellow-500) 36% 66%, var(--hc-blue-600) 66%);
}

.hero-title-sub,
.section-heading h2,
.matrix-grid strong,
.project-title,
.recruitment-thumb > strong,
.offer-stage-grid strong,
.case-quote,
.mock-screenshot,
.mock-screenshot .ms-summary,
.visual-node b,
.proof-row strong,
.aiqe-map-titlebar strong,
.offer-cases-head strong,
.project-visual-head strong,
.mock-screenshot .ms-company,
.mock-screenshot .ms-title,
.course-tab strong {
  color: var(--hc-ink-950);
}

.hero-lead,
.matrix-grid span,
.matrix-meta,
.proof-row span,
.section-note,
.project-summary,
.job-company,
.offer-stage-head p,
.offer-stage-grid span,
.case-tag,
.mock-screenshot .ms-summary,
.recruitment-note,
.content-meter span,
.course-status,
.mindmap-titlebar p,
.course-tab small,
.visual-node small,
.project-visual-type,
.project-chips span,
.job-facts i,
.job-tags i,
.mock-screenshot .ms-meta-line span,
.mock-screenshot .ms-tags span,
.aiqe-modal-titlebar span {
  color: var(--hc-ink-500);
}

.primary-button {
  color: var(--hc-white);
  border-color: var(--hc-ink-950);
  background: var(--hc-ink-950);
  box-shadow: 0 14px 30px rgba(6, 26, 51, .18);
}

.primary-button span {
  color: var(--hc-yellow-500);
}

.ghost-button {
  color: var(--hc-ink-950);
  border-color: var(--hc-ink-950);
  background: transparent;
  box-shadow: none;
}

.ghost-button:hover {
  color: var(--hc-white);
  background: var(--hc-blue-700);
  box-shadow: 0 14px 30px rgba(7, 136, 201, .16);
}

.hero-snapshot {
  border-top-color: rgba(6, 26, 51, .18);
}

.hero-snapshot .matrix-label,
.matrix-label {
  color: var(--hc-red-600);
}

.matrix-grid article,
.proof-row div,
.aiqe-map-card,
.mindmap-shell,
.offer-flow,
.offer-stage-block,
.offer-cases,
.projects-map-frame,
.projects-grid,
.project-card,
.recruitment-thumb,
.screenshot-frame,
.case-card {
  border-color: rgba(6, 26, 51, .17);
  background: rgba(251, 250, 246, .94);
  box-shadow: var(--shadow-card);
}

.hero-snapshot .matrix-meta {
  border-top-color: rgba(6, 26, 51, .12);
}

.aiqe-map-card {
  border-color: var(--hc-ink-950);
  background:
    linear-gradient(90deg, rgba(6, 26, 51, .045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(6, 26, 51, .04) 1px, transparent 1px),
    var(--hc-paper-light);
  background-size: 30px 30px, 30px 30px, auto;
  box-shadow: 16px 16px 0 var(--hc-ink-950);
}

.aiqe-map-titlebar,
.mindmap-titlebar,
.aiqe-modal-titlebar {
  color: var(--hc-ink-950);
  border-bottom-color: rgba(6, 26, 51, .16);
  background: rgba(251, 250, 246, .96);
}

.aiqe-map-frame,
.aiqe-modal-map,
.recruitment-lightbox-stage {
  background:
    linear-gradient(90deg, rgba(6, 26, 51, .045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(6, 26, 51, .04) 1px, transparent 1px),
    var(--hc-paper-light);
  background-size: 28px 28px, 28px 28px, auto;
}

.aiqe-map-image {
  filter: drop-shadow(0 16px 28px rgba(6, 26, 51, .14));
}

.aiqe-map-zoom,
.aiqe-modal-tool,
.aiqe-modal-close,
.mindmap-actions button,
.slide-controls button,
.recruitment-lightbox-close {
  color: var(--hc-ink-950);
  border-color: rgba(6, 26, 51, .25);
  background: var(--hc-white);
  box-shadow: none;
}

.aiqe-map-zoom:hover,
.aiqe-modal-tool:hover,
.aiqe-modal-close:hover,
.mindmap-actions button:hover,
.slide-controls button:hover,
.recruitment-lightbox-close:hover {
  color: var(--hc-white);
  border-color: var(--hc-blue-700);
  background: var(--hc-blue-700);
}

.ticker {
  color: var(--hc-ink-700);
  border-color: rgba(6, 26, 51, .16);
  background: var(--hc-paper-light);
}

.ticker i,
.case-number {
  color: var(--hc-red-600);
}

.content-meter > div {
  background: rgba(6, 26, 51, .12);
}

.content-meter i,
.reading-progress {
  background: linear-gradient(90deg, var(--hc-red-600), var(--hc-yellow-500), var(--hc-blue-600));
  box-shadow: none;
}

.mindmap-shell {
  background: var(--hc-paper-light);
}

.course-nav {
  border-right-color: rgba(6, 26, 51, .15);
  background: #f0ede5;
}

.course-tab {
  border-bottom-color: rgba(6, 26, 51, .11);
}

.course-tab:hover {
  background: rgba(7, 136, 201, .08);
}

.course-tab.active {
  background: linear-gradient(90deg, var(--hc-blue-100), rgba(255, 245, 204, .55));
  box-shadow: inset 4px 0 0 var(--hc-red-600);
}

.course-tab .tab-index {
  color: var(--hc-blue-700);
  border-color: rgba(7, 136, 201, .28);
  background: var(--hc-blue-100);
}

.mindmap-stage,
.mindmap-stage.is-fullscreen,
#mindmap {
  color: var(--hc-ink-950);
  background:
    linear-gradient(90deg, rgba(6, 26, 51, .045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(6, 26, 51, .04) 1px, transparent 1px),
    var(--hc-paper-light);
  background-size: 36px 36px, 36px 36px, auto;
}

.map-fallback {
  border-color: rgba(6, 26, 51, .16);
  background: var(--hc-paper-light);
}

#mindmap {
  --markmap-text-color: var(--hc-ink-950);
  --markmap-circle-open-bg: var(--hc-paper-light);
  --markmap-highlight-node-bg: rgba(244, 200, 75, .22);
}

#mindmap .fold-toggle-marker .fold-toggle-pill {
  fill: var(--hc-yellow-500);
  stroke: rgba(6, 26, 51, .58);
  filter: none;
}

#mindmap .fold-toggle-marker text {
  fill: var(--hc-ink-950);
}

#mindmap .markmap-foreign > div > div {
  color: var(--hc-ink-950);
  background: rgba(251, 250, 246, .96);
}

#mindmap .markmap-node.is-branch .markmap-foreign > div > div {
  box-shadow: inset 0 0 0 1px rgba(6, 26, 51, .18), 0 8px 22px rgba(6, 26, 51, .1);
}

#mindmap .markmap-node[data-depth="1"] .markmap-foreign > div > div {
  color: var(--hc-white);
  background: var(--hc-ink-950);
  box-shadow: 0 10px 24px rgba(6, 26, 51, .18);
}

#mindmap .markmap-node[data-depth="2"] .markmap-foreign > div > div {
  color: var(--hc-white);
  background: var(--hc-blue-700);
  box-shadow: 0 10px 24px rgba(7, 136, 201, .15);
}

#mindmap .markmap-node[data-depth="3"] .markmap-foreign > div > div {
  color: var(--hc-ink-950);
  background: var(--hc-blue-100);
  box-shadow: inset 0 0 0 1px rgba(7, 136, 201, .28), 0 8px 20px rgba(6, 26, 51, .08);
}

#mindmap .markmap-node.is-leaf .markmap-foreign > div > div {
  background: rgba(251, 250, 246, .94);
}

.offer-flow {
  background:
    linear-gradient(90deg, rgba(6, 26, 51, .045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(6, 26, 51, .04) 1px, transparent 1px),
    var(--hc-paper-light);
  background-size: 28px 28px, 28px 28px, auto;
}

.flow-arrow {
  color: var(--hc-blue-600);
}

.flow-spacer {
  border-top-color: rgba(7, 136, 201, .28);
  border-bottom-color: rgba(6, 26, 51, .10);
}

.offer-node {
  color: var(--hc-ink-950);
  border-color: rgba(6, 26, 51, .20);
  background: var(--hc-white);
}

.offer-node span {
  color: var(--hc-red-600);
}

.offer-node.is-active {
  color: var(--hc-white);
  border-color: var(--hc-ink-950);
  background: var(--hc-ink-950);
  box-shadow: 0 14px 32px rgba(6, 26, 51, .18);
}

.offer-node.is-active span {
  color: var(--hc-yellow-500);
}

.offer-stage-block {
  background:
    linear-gradient(135deg, rgba(223, 243, 250, .78), rgba(255, 245, 204, .42) 48%, rgba(251, 250, 246, .96)),
    var(--hc-paper-light);
}

.offer-stage-block.is-current {
  border-color: var(--hc-blue-600);
  outline-color: rgba(7, 136, 201, .10);
  box-shadow: 0 20px 48px rgba(6, 26, 51, .12);
}

.offer-stage-media {
  border-color: rgba(6, 26, 51, .16);
  background: var(--hc-white);
  box-shadow: 0 12px 30px rgba(6, 26, 51, .10);
}

.offer-stage-head,
.case-meta,
.offer-cases-head,
.project-visual-head {
  border-bottom-color: rgba(6, 26, 51, .15);
}

.offer-stage-grid article,
.visual-node {
  border-color: rgba(6, 26, 51, .14);
  background: rgba(255, 255, 255, .72);
}

.offer-cases-head a {
  color: var(--hc-white);
  border-color: var(--hc-ink-950);
  background: var(--hc-ink-950);
}

.offer-cases-head a:hover {
  color: var(--hc-white);
  background: var(--hc-blue-700);
  box-shadow: 0 12px 28px rgba(7, 136, 201, .16);
}

.projects-map-frame,
.projects-grid,
.recruitment-thumbs {
  scrollbar-color: rgba(7, 136, 201, .78) rgba(6, 26, 51, .08);
}

.project-real-evidence {
  border-color: rgba(6, 26, 51, .16);
  background: var(--hc-paper-light);
  box-shadow: inset 0 1px 0 var(--hc-white), 0 16px 36px rgba(6, 26, 51, .10);
}

.project-main-image {
  background:
    linear-gradient(90deg, rgba(6, 26, 51, .045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(6, 26, 51, .04) 1px, transparent 1px),
    #eef3f5;
  background-size: 28px 28px, 28px 28px, auto;
}

.project-gallery-strip {
  scrollbar-color: rgba(7, 136, 201, .72) rgba(6, 26, 51, .08);
}

.project-gallery-thumb {
  border-color: rgba(6, 26, 51, .18);
  background: var(--hc-white);
}

.project-gallery-thumb:hover,
.project-gallery-thumb.is-active {
  border-color: var(--hc-blue-600);
  box-shadow: 0 8px 20px rgba(6, 26, 51, .13);
}

.project-gallery-thumb span,
.project-image-counter {
  color: var(--hc-white);
  background: rgba(6, 26, 51, .84);
}

.project-image-nav,
.project-fullscreen-button {
  color: var(--hc-ink-950);
  border-color: rgba(6, 26, 51, .24);
  background: rgba(251, 250, 246, .90);
  box-shadow: 0 10px 24px rgba(6, 26, 51, .14);
}

.project-image-nav:hover,
.project-fullscreen-button:hover {
  color: var(--hc-white);
  border-color: var(--hc-blue-700);
  background: var(--hc-blue-700);
}

.project-real-source code,
.project-real-points article {
  color: var(--hc-ink-700);
  border-color: rgba(6, 26, 51, .14);
  background: rgba(255, 255, 255, .72);
}

.project-real-source code::before {
  color: var(--hc-red-600);
}

.project-real-points strong {
  color: var(--hc-ink-950);
}

.project-real-points p {
  color: var(--hc-ink-500);
}

.project-terminal {
  color: var(--hc-ink-950);
  border-color: rgba(6, 26, 51, .16);
  background: #eef3f5;
  box-shadow: none;
}

.project-terminal code {
  color: var(--hc-ink-700);
}

.project-card,
.recruitment-thumb {
  border-left-color: rgba(7, 136, 201, .48);
}

.project-card .project-title,
.project-card.is-active .project-title {
  color: var(--hc-ink-950);
}

.project-card.is-active,
.recruitment-thumb.is-active {
  border-left-color: var(--hc-red-600);
  background: var(--hc-blue-100);
  box-shadow: 0 0 0 1px rgba(7, 136, 201, .14), var(--shadow-card);
}

.project-visual-type,
.project-chips span,
.job-facts i,
.job-tags i,
.mock-screenshot .ms-meta-line span,
.mock-screenshot .ms-tags span {
  border-color: rgba(6, 26, 51, .14);
  background: rgba(255, 255, 255, .72);
}

.visual-node.is-core {
  color: var(--hc-white);
  background: var(--hc-blue-700);
}

.visual-node.is-core b,
.visual-node.is-core small {
  color: var(--hc-white);
}

.project-visual-diagram::before {
  border-top-color: rgba(7, 136, 201, .34);
}

.job-logo,
.mock-screenshot .ms-logo {
  color: var(--hc-white);
  background: var(--hc-blue-700);
}

.aiqe-map-modal,
.project-lightbox,
.recruitment-lightbox {
  color: var(--hc-ink-950);
  border-color: rgba(6, 26, 51, .18);
  background: var(--hc-paper-light);
  box-shadow: 0 36px 100px rgba(6, 26, 51, .28);
}

.aiqe-map-modal::backdrop,
.project-lightbox::backdrop,
.recruitment-lightbox::backdrop {
  background: rgba(6, 26, 51, .46);
}

.screenshot-frame.is-large {
  background: var(--hc-paper-light);
}

.mock-screenshot .ms-watermark {
  color: rgba(6, 26, 51, .20);
}

@media (max-width: 1180px) {
  .topbar {
    padding-right: 24px;
    padding-left: 24px;
  }

  .brand-text {
    gap: 7px;
  }

  .brand-institution,
  .brand-product {
    font-size: 18px;
  }

  .brand-divider {
    font-size: 24px;
  }

  .header-actions {
    gap: 8px;
  }

  nav a {
    padding-right: 8px;
    padding-left: 8px;
    font-size: 13px;
  }

  .official-site-link {
    padding-right: 10px;
    padding-left: 10px;
  }
}

@media (max-width: 620px) {
  body {
    background: var(--hc-paper);
  }

  .topbar {
    gap: 12px;
    padding-right: 12px;
    padding-left: 12px;
  }

  .header-actions {
    flex: 0 0 auto;
    gap: 8px;
  }

  .official-site-link {
    min-height: 36px;
    gap: 5px;
    padding: 0 11px;
    border-radius: 5px;
    font-size: 12px;
  }

  .official-site-link svg {
    width: 14px;
    height: 14px;
  }

  .project-lightbox-nav,
  .recruitment-lightbox-stage .rs-image-wrap {
    background: var(--hc-paper-light);
  }
}

@media (max-width: 380px) {
  .brand {
    gap: 0;
  }

  .brand-product {
    display: none;
  }

  .official-site-link {
    padding: 0 8px;
  }
}