/* TDesign visual foundation for the public product, academy and utility pages.
   Scoped to existing page identities; shared navigation belongs to site-shell.css. */
body:not([data-company-page]) {
  --bg: var(--td-bg-container, var(--td-bg-color-container));
  --bg-soft: var(--td-bg-page, var(--td-bg-color-page));
  --bg-deep: var(--td-bg-color-secondarycontainer);
  --page: var(--bg);
  --surface: var(--bg);
  --surface-tint: var(--bg-soft);
  --surface-blue: var(--blue-pale);
  --card: var(--surface);
  --ink: var(--td-text-primary, var(--td-text-color-primary));
  --muted: var(--td-text-secondary, var(--td-text-color-secondary));
  --subtle: var(--muted);
  --line: var(--td-border, var(--td-component-stroke));
  --line-strong: var(--td-component-border, var(--line));
  --link: var(--td-brand, var(--td-brand-color));
  --link-hover: var(--td-readable-brand-hover, var(--link));
  --teal: var(--link);
  --teal-deep: var(--link-hover);
  --blue: var(--link);
  --blue-deep: var(--link-hover);
  --blue-pale: var(--td-brand-color-light);
  --mint: var(--link);
  --mint-pale: var(--blue-pale);
  --accent: var(--link);
  --accent-hover: var(--link-hover);
  --btn: var(--td-action, #0052d9);
  --btn-hover: var(--td-action-hover, #366ef4);
  --btn-active: var(--td-action-active, #003cab);
  --button-ink: #fff;
  --button-primary-ink: #fff;
  --button-secondary-bg: var(--surface);
  --button-secondary-ink: var(--ink);
  --button-secondary-border: var(--line-strong);
  --focus: var(--link);
  --radius: var(--td-radius-medium, 6px);
  --radius-card: var(--radius);
  --radius-control: var(--td-radius-medium, 6px);
  --visual-radius: var(--radius);
  --max: var(--td-content-width, 1200px);
  --page-gutter: var(--td-page-gutter, clamp(20px, 4vw, 40px));
  --font-sans: var(--td-font-family);
  --font-display: var(--font-sans);
  --sans: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.7;
}

body:not([data-company-page]) main :is(a, button):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}
body:not([data-company-page]) main :is(.btn, .button) {
  min-height: 48px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--td-radius-medium, 6px);
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  white-space: normal;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
body:not([data-company-page]) main :is(.btn.primary, .button-primary) {
  background: var(--btn);
  border-color: var(--btn);
  color: #fff;
}
body:not([data-company-page]) main :is(.btn.primary, .button-primary):hover {
  background: var(--btn-hover);
  border-color: var(--btn-hover);
  color: #fff;
  transform: none;
}
body:not([data-company-page]) main :is(.btn.ghost, .button-secondary) {
  background: var(--button-secondary-bg);
  border: 1px solid var(--button-secondary-border);
  color: var(--button-secondary-ink);
}
body:not([data-company-page]) main :is(.btn.ghost, .button-secondary):hover {
  color: var(--link);
  background: var(--blue-pale);
  border-color: var(--link);
  transform: none;
}
body:not([data-company-page]) main .text-link {
  color: var(--link);
  font-weight: 500;
}
body:not([data-company-page]) main :is(h1, h2, h3) {
  font-family: var(--font-display);
  letter-spacing: -.035em;
  overflow-wrap: break-word;
}

/* Academy: the same product language, with a course catalogue hierarchy. */
body[data-course-page] .page-shell {
  width: min(var(--max), calc(100% - 2 * var(--page-gutter)));
  margin-inline: auto;
  padding-inline: 0;
}
body[data-course-page] .course-local-nav {
  max-width: var(--max);
  gap: 8px 32px;
  padding-block: 12px;
}
body[data-course-page] .course-local-nav a {
  min-height: 36px;
  display: flex;
  align-items: center;
  padding: 4px 0;
  font-size: 14px;
}
body[data-course-page] .course-local-nav a[aria-current] {
  color: var(--link);
  text-decoration: none;
  box-shadow: inset 0 -2px var(--link);
}
body[data-course-page] .hero {
  min-height: 570px;
  padding-block: 76px 58px;
  padding-inline: 0;
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
body[data-course-page] .hero::before {
  background: linear-gradient(90deg, var(--bg-soft) 0%, var(--bg-soft) 31%, color-mix(in srgb, var(--bg-soft) 90%, transparent) 51%, color-mix(in srgb, var(--bg-soft) 16%, transparent) 88%), linear-gradient(0deg, var(--bg-soft), transparent 40%);
}
body[data-course-page] .hero-copy { max-width: 720px; }
body[data-course-page] .hero h1 {
  font-size: clamp(34px, 4.5vw, 64px);
  line-height: 1.24;
  font-weight: 600;
}
body[data-course-page] .hero h1 em { color: var(--link); }
body[data-course-page] .hero-lede {
  margin-top: 24px;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.9;
}
body[data-course-page] :is(.eyebrow, .section-kicker) {
  color: var(--link);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
}
body[data-course-page] .hero .stat-row {
  gap: 20px;
  margin-top: 36px;
  max-width: 620px;
}
body[data-course-page] .stat-row div { border-top-color: var(--line-strong); padding-top: 16px; }
body[data-course-page] .stat-row dt { font-size: 12px; }
body[data-course-page] .stat-row dd { font-size: 26px; color: var(--ink); }
body[data-course-page] .section { padding-block: 80px; }
body[data-course-page] :is(.section-head h2, .section h2) {
  font-size: clamp(28px, 3.2vw, 36px);
  font-weight: 600;
  line-height: 1.4;
}
body[data-course-page] .section-head > p:last-child { font-size: 14px; line-height: 1.75; }
body[data-course-page] .learning-paths { border: 0; display: grid; gap: 18px; }
body[data-course-page] .learning-path {
  grid-template-columns: 44px minmax(200px, .85fr) minmax(0, 1.15fr);
  gap: 28px;
  padding: 32px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--td-radius-medium, 6px);
  transition: border-color .18s;
}
body[data-course-page] .learning-path:focus-within { border-color: var(--link); }
body[data-course-page] .path-number {
  width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: var(--td-radius-medium, 6px);
  background: var(--blue-pale);
  color: var(--link);
  font-size: 13px;
}
body[data-course-page] .path-heading h3 { font-size: 24px; font-weight: 600; text-wrap: balance; }
body[data-course-page] .path-heading .path-kicker { color: var(--link); }
body[data-course-page] .path-heading .path-meta { margin-top: 16px; }
body[data-course-page] .path-detail > p { font-size: 14px; }
body[data-course-page] .path-detail > .path-status { font-size: 12px; }
body[data-course-page] .path-card .path-kicker { font-size: 12px; }
body[data-course-page] .path-card h3 { font-size: 24px; line-height: 1.4; font-weight: 600; }
body[data-course-page] :is(.path-status, .path-meta, .lesson-duration, .stage-card > span) { font-size: 12px; }
body[data-course-page] .stage-card strong { font-size: 20px; line-height: 1.4; font-weight: 600; }
body[data-course-page] .stage-card p { font-size: 14px; line-height: 1.75; }
body[data-course-page] .stage-card em { font-size: 12px; }
body[data-course-page] :is(.path-card, .stage-card, .day-card) {
  padding: 28px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--td-radius-medium, 6px);
  box-shadow: none;
}
body[data-course-page] :is(.path-card, .day-card, .lesson-card):hover {
  background: var(--card);
  border-color: var(--line-strong);
  transform: none;
}
body[data-course-page] #resources .path-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--link);
}
body[data-course-page] .principle-grid { gap: 24px; }
body[data-course-page] :is(.principle-grid article, .principle-grid > p) {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--td-radius-medium, 6px);
  background: var(--card);
}
body[data-course-page] .principle-grid strong { font-size: 20px; font-weight: 600; }
body[data-course-page] .principle-grid small { line-height: 1.85; font-size: 14px; }
body[data-course-page] .media-panel { border-radius: var(--td-radius-medium, 6px); border: 1px solid var(--line); }
body[data-course-page] .lesson-stage-head {
  padding: 16px 20px;
  margin-bottom: 0;
  background: var(--blue-pale);
  border: 1px solid var(--line);
  border-radius: var(--td-radius-medium, 6px) var(--td-radius-medium, 6px) 0 0;
}
body[data-course-page] .lesson-stage-head h3 { font-size: 18px; font-weight: 600; }
body[data-course-page] .lesson-stage-head > span { font-size: 12px; }
body[data-course-page] .lesson-stage-head h3 span { font-size: inherit; color: var(--ink); }
body[data-course-page] .lesson-list { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--td-radius-medium, 6px) var(--td-radius-medium, 6px); overflow: hidden; }
body[data-course-page] .lesson-card {
  padding: 24px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  font-size: 14px;
}
body[data-course-page] .lesson-card:last-child { border-bottom: 0; }
body[data-course-page] .lesson-num { font-size: 14px; color: var(--link); }
body[data-course-page] .lesson-card h4 { font-size: 16px; }
body[data-course-page] .lesson-output { font-size: 14px; }
body[data-course-page] .lesson-output .copy-unit { color: var(--ink); }
body[data-course-page] .day-header { gap: 24px; }
body[data-course-page] .day-header > p {
  background: var(--blue-pale);
  border-radius: var(--td-radius-medium, 6px);
  padding: 12px;
}
body[data-course-page] .day-header > p strong { font-size: 28px; font-weight: 500; }
body[data-course-page] .day-header small,
body[data-course-page] .day-outcome span { font-size: 12px; }
body[data-course-page] .day-outcome p { font-size: 14px; }
body[data-course-page] .day-header h3 { font-size: 24px; font-weight: 600; line-height: 1.5; }
body[data-course-page] .day-outcome {
  padding: 18px 20px;
  background: var(--bg-soft);
  border: 0;
  border-radius: var(--td-radius-medium, 6px);
}
body[data-course-page] .contact-plane {
  padding: 40px;
  border: 1px solid var(--line-strong);
  border-radius: var(--td-radius-medium, 6px);
  background: var(--blue-pale);
}
body[data-course-page] .contact-plane p { font-size: 14px; }

/* Cloud Ledger keeps the original product visuals and native content structure. */
body[data-share-route="internal-expense"] {
  --shell: min(var(--max), calc(100% - 2 * var(--page-gutter)));
  --leading-display: 1.25;
  --leading-heading: 1.35;
  --contact-bg: var(--blue-pale);
  --contact-ink: var(--ink);
  --contact-eyebrow-bg: var(--blue-pale);
  --contact-eyebrow-line: var(--line-strong);
  --contact-eyebrow-ink: var(--link);
  --contact-primary-bg: var(--btn);
  --contact-primary-ink: #fff;
  --contact-primary-hover: var(--btn-hover);
  --contact-secondary-line: var(--line-strong);
  --contact-secondary-hover: var(--surface);
}
body[data-share-route="internal-expense"] .hero {
  padding-block: 72px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
body[data-share-route="internal-expense"] h1 {
  max-width: 12em;
  font-size: clamp(36px, 4.1vw, 48px);
  font-weight: 600;
}
body[data-share-route="internal-expense"] :is(.story-copy h2, .open-intro h2, .contact-band h2) {
  font-size: clamp(28px, 3.2vw, 36px);
  font-weight: 600;
}
body[data-share-route="internal-expense"] .eyebrow {
  border-color: var(--line-strong);
  border-radius: var(--td-radius-default, 3px);
  background: var(--blue-pale);
  color: var(--link);
  font-size: 12px;
  font-weight: 500;
}
body[data-share-route="internal-expense"] .eyebrow span { color: var(--ink); }
body[data-share-route="internal-expense"] .product-support { font-weight: 500; font-size: 12px; }
body[data-share-route="internal-expense"] .boundary-kicker,
body[data-share-route="internal-expense"] .appstore-visual figcaption { font-size: 12px; }
body[data-share-route="internal-expense"] .hero-lede { font-size: 16px; font-weight: 400; line-height: 1.9; }
body[data-share-route="internal-expense"] .section { padding-block: 80px; }
body[data-share-route="internal-expense"] :is(.story-copy > p:not(.eyebrow), .open-intro > p:not(.eyebrow)) { font-size: 14px; }
body[data-share-route="internal-expense"] :is(.proof-grid strong, .detail-list dt) { font-weight: 600; }
body[data-share-route="internal-expense"] .appstore-visual,
body[data-share-route="internal-expense"] .appstore-visual:hover,
body[data-share-route="internal-expense"] .appstore-visual:hover img { transform: none; }
body[data-share-route="internal-expense"] .appstore-visual img { object-fit: contain; }
body[data-share-route="internal-expense"] .boundary-grid { gap: 20px; }
body[data-share-route="internal-expense"] .boundary-grid article {
  padding: 28px;
  background: var(--card);
  border-color: var(--line);
  border-radius: var(--td-radius-medium, 6px);
}
body[data-share-route="internal-expense"] .boundary-grid article:hover { transform: none; border-color: var(--line-strong); }
body[data-share-route="internal-expense"] .boundary-grid h3 { font-size: 18px; font-weight: 600; }
body[data-share-route="internal-expense"] .boundary-grid p { font-size: 14px; line-height: 1.8; }
body[data-share-route="internal-expense"] .contact-band { border-top: 1px solid var(--line); }

/* Contact, sitemap and 404 share the same semantic surfaces. */
body[data-share-route="wecom"] { background: var(--bg-soft); }
body[data-share-route="wecom"] main { min-height: 680px; padding: 56px var(--page-gutter); }
body[data-share-route="wecom"] .business-card {
  width: min(100%, 480px);
  padding: 36px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--btn);
  border-radius: var(--td-radius-medium, 6px);
  background: var(--surface);
  backdrop-filter: none;
  box-shadow: var(--td-shadow-1);
}
body[data-share-route="wecom"] .card-kicker { border-radius: var(--td-radius-default, 3px); font-weight: 500; font-size: 12px; }
body[data-share-route="wecom"] h1 { font-size: 28px; line-height: 1.4; font-weight: 600; }
body[data-share-route="wecom"] .qr-tile { border-radius: var(--td-radius-medium, 6px); padding: 8px; background: #fff; }
body[data-share-route="wecom"] .wechat-copy { font-size: 14px; }
body[data-share-route="wecom"] .card-actions { margin-top: 24px; }
body[data-share-route="sitemap"] .wrap {
  max-width: 1056px;
  padding-block: 72px 88px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
body[data-share-route="sitemap"] .wrap > :is(h1, .lede) { grid-column: 1 / -1; margin: 0; }
body[data-share-route="sitemap"] .wrap > h1 { font-size: 36px; font-weight: 600; }
body[data-share-route="sitemap"] .wrap > .lede { margin-bottom: 16px; font-size: 14px; }
body[data-share-route="sitemap"] .wrap section {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--td-radius-medium, 6px);
  background: var(--bg-soft);
}
body[data-share-route="sitemap"] .wrap h2 { color: var(--ink); font-size: 18px; margin-bottom: 16px; }
body[data-share-route="sitemap"] .wrap li { line-height: 1.9; font-size: 14px; }
body:not([data-company-page]) .error-stage {
  border-radius: var(--td-radius-medium, 6px);
  background: radial-gradient(ellipse at 76% 44%, var(--blue-pale) 0%, transparent 64%), var(--bg-soft);
}
body:not([data-company-page]) .error-vector { color: var(--link); }
body:not([data-company-page]) .error-home {
  border-radius: var(--td-radius-medium, 6px);
  background: var(--btn);
  color: #fff !important;
  font-size: 14px;
}
body:not([data-company-page]) .error-home:hover { background: var(--btn-hover); }
body:not([data-company-page]) .error-solutions { color: var(--link); }

@media (max-width: 960px) {
  body[data-course-page] .learning-path { grid-template-columns: 36px minmax(0, 1fr); gap: 20px; }
  body[data-course-page] .path-detail { grid-column: 2; }
  body[data-course-page] .hero { min-height: 500px; }
}
@media (max-width: 760px) {
  body[data-share-route="internal-expense"] .contact-band-inner { justify-content: stretch; }
  body[data-share-route="internal-expense"] .contact-band .contact-actions { width: 100%; }
}
@media (max-width: 720px) {
  body[data-course-page] .hero { min-height: 0; padding-block: 48px 40px; }
  body[data-course-page] .hero h1 { font-size: clamp(28px, 7.4vw, 48px); }
  body[data-course-page] .hero-lede { font-size: 14px; }
  body[data-course-page] .hero::before { background: color-mix(in srgb, var(--bg-soft) 88%, transparent); }
  body[data-course-page] .hero .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  body[data-course-page] .section { padding-block: 56px; }
  body[data-course-page] .learning-path { padding: 22px 18px; gap: 16px; }
  body[data-course-page] .path-heading h3 { font-size: 24px; }
  body[data-course-page] .path-detail { grid-column: 1 / -1; }
  body[data-course-page] :is(.path-card, .stage-card, .day-card, .principle-grid article, .principle-grid > p) { padding: 24px; }
  body[data-course-page] .lesson-card { grid-template-columns: 28px minmax(0, 1fr); padding: 20px 16px; gap: 12px; }
  body[data-course-page] .lesson-stage-head { padding: 16px; }
  body[data-course-page] .day-header { gap: 16px; }
  body[data-course-page] .day-header h3 { font-size: 20px; }
  body[data-course-page] .day-outcome { padding: 16px; }
  body[data-course-page] .contact-plane { padding: 28px 22px; }
  body[data-share-route="internal-expense"] .hero { padding-block: 48px; }
  body[data-share-route="internal-expense"] h1 { font-size: clamp(28px, 7.6vw, 48px); }
  body[data-share-route="internal-expense"] :is(.section, .contact-band) { padding-block: 56px; }
  body[data-share-route="internal-expense"] .boundary-grid article { padding: 24px; }
  body[data-share-route="internal-expense"] .copy-unit { white-space: normal; }
  body[data-share-route="wecom"] main { min-height: 0; padding-block: 36px; }
  body[data-share-route="wecom"] .business-card { padding: 28px 22px; }
  body[data-share-route="wecom"] h1 { font-size: 28px; }
  body[data-share-route="wecom"] :is(.copy-line, .copy-unit) { white-space: normal; }
  body[data-share-route="sitemap"] .wrap { grid-template-columns: minmax(0, 1fr); padding-block: 48px; gap: 16px; }
  body[data-share-route="sitemap"] .wrap > h1 { font-size: 28px; }
  body[data-share-route="sitemap"] .wrap section { padding: 24px; }
}
@media (max-width: 380px) {
  body[data-course-page] main :is(.btn, .button) { padding-inline: 16px; font-size: 14px; }
  body[data-course-page] .course-local-nav { gap: 6px 16px; }
  body[data-course-page] .day-header { gap: 12px; }
  body[data-course-page] .day-header > p { min-width: 48px; padding: 10px; }
  body[data-share-route="wecom"] .business-card { padding-inline: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  body:not([data-company-page]) main :is(.btn, .button, .learning-path) { transition: none; }
}

/* English phrases may wrap inside narrow multi-column cards at every breakpoint. */
html[lang="en"] body[data-share-route="internal-expense"] .copy-unit { white-space: normal; }

/* Dark surfaces share the site palette while keeping page, card and inset levels distinct.
   These selectors also outrank the older course, ledger and error-page theme rules. */
html[data-theme="dark"]:has(body:not([data-company-page])) {
  background: var(--td-bg-page, #0f141d);
}
html[data-theme="dark"] body:not([data-company-page]) {
  --bg: var(--td-bg-page, #0f141d);
  --bg-soft: var(--td-bg-container, #171e29);
  --bg-deep: var(--td-bg-color-secondarycontainer, #1e2836);
  --page: var(--bg);
  --surface: var(--bg-soft);
  --surface-tint: var(--bg-soft);
  --surface-blue: var(--td-brand-color-light, #1b293d);
  --card: var(--bg-deep);
  --ink: var(--td-text-primary, #eef3fa);
  --muted: var(--td-text-secondary, #b3becf);
  --subtle: var(--td-text-color-placeholder, #8d9bb0);
  --line: var(--td-border, #2d3b4e);
  --line-strong: var(--td-component-border, #43536a);
  --link: var(--td-readable-brand, #8ab4ff);
  --link-hover: var(--td-readable-brand-hover, #b8d2ff);
  --blue-pale: var(--surface-blue);
  --button-secondary-bg: var(--bg-deep);
  --button-secondary-ink: var(--ink);
  --button-secondary-border: var(--line-strong);
  color: var(--ink);
  background: var(--bg);
}
html[data-theme="dark"] body:not([data-company-page]) main :is(.btn.ghost, .button-secondary):hover {
  background: var(--td-bg-color-container-hover, #253244);
  border-color: var(--link);
  color: var(--link-hover);
}
html[data-theme="dark"] body:not([data-company-page]) main .text-link:hover {
  color: var(--link-hover);
}

/* The course hero keeps a dark reading surface over its artwork at every width. */
html[data-theme="dark"] body[data-course-page] img { opacity: 1; }
html[data-theme="dark"] body[data-course-page] .hero {
  background: var(--bg-soft);
  border-color: var(--line);
}
html[data-theme="dark"] body[data-course-page] .hero::before {
  background: linear-gradient(90deg, var(--bg-soft) 0%, var(--bg-soft) 31%, color-mix(in srgb, var(--bg-soft) 94%, transparent) 53%, color-mix(in srgb, var(--bg-soft) 24%, transparent) 90%), linear-gradient(0deg, var(--bg-soft), transparent 48%);
}
html[data-theme="dark"] body[data-course-page] .course-local-nav {
  border-bottom: 1px solid var(--line);
}
html[data-theme="dark"] body[data-course-page] .course-local-nav a:hover {
  color: var(--link-hover);
}
html[data-theme="dark"] body[data-course-page] :is(.learning-path, .path-card, .stage-card, .day-card, .lesson-card, .principle-grid article, .principle-grid > p) {
  background: var(--card);
  border-color: var(--line);
}
html[data-theme="dark"] body[data-course-page] :is(.path-card, .day-card, .lesson-card):hover {
  background: var(--td-bg-color-container-hover, #253244);
  border-color: var(--line-strong);
}
html[data-theme="dark"] body[data-course-page] #resources .path-card {
  background: var(--card);
  border-color: var(--line);
  border-top-color: var(--link);
}
html[data-theme="dark"] body[data-course-page] :is(.path-number, .lesson-stage-head, .day-header > p) {
  background: var(--blue-pale);
  color: var(--link);
}
html[data-theme="dark"] body[data-course-page] :is(.day-outcome, .media-panel) {
  background: var(--bg-soft);
  border-color: var(--line);
}
html[data-theme="dark"] body[data-course-page] .contact-plane {
  background: var(--blue-pale);
  border-color: var(--line-strong);
}

/* Ledger alternates the base and container surfaces; its feature cards sit above both. */
html[data-theme="dark"] body[data-share-route="internal-expense"] {
  --contact-bg: var(--blue-pale);
  --contact-ink: var(--ink);
  --contact-eyebrow-bg: var(--bg-deep);
  --contact-eyebrow-line: var(--line-strong);
  --contact-eyebrow-ink: var(--link);
  --contact-primary-bg: var(--btn);
  --contact-primary-ink: #fff;
  --contact-primary-hover: var(--btn-hover);
  --contact-secondary-line: var(--line-strong);
  --contact-secondary-hover: var(--bg-deep);
}
html[data-theme="dark"] body[data-share-route="internal-expense"] :is(.section-tint, .section-open) {
  background: var(--bg);
}
html[data-theme="dark"] body[data-share-route="internal-expense"] :is(.hero, .section-white) {
  background: var(--bg-soft);
}
html[data-theme="dark"] body[data-share-route="internal-expense"] .eyebrow {
  background: var(--blue-pale);
  border-color: var(--line-strong);
  color: var(--link);
}
html[data-theme="dark"] body[data-share-route="internal-expense"] .eyebrow span { color: var(--ink); }
html[data-theme="dark"] body[data-share-route="internal-expense"] .boundary-grid article {
  background: var(--card);
  border-color: var(--line);
}
html[data-theme="dark"] body[data-share-route="internal-expense"] .boundary-grid article:hover {
  border-color: var(--line-strong);
}
html[data-theme="dark"] body[data-share-route="internal-expense"] .contact-band {
  background: var(--contact-bg);
  border-color: var(--line-strong);
}

/* Utility pages use the same surfaces; the QR image retains its white scanning field. */
html[data-theme="dark"] body[data-share-route="wecom"] .business-card {
  background: var(--surface);
  border-color: var(--line);
  border-top-color: var(--btn);
  box-shadow: 0 20px 48px rgb(0 0 0 / 20%);
}
html[data-theme="dark"] body[data-share-route="wecom"] .card-kicker {
  background: var(--blue-pale);
  border-color: var(--line-strong);
  color: var(--link);
}
html[data-theme="dark"] body[data-share-route="wecom"] .qr-tile {
  background: #fff;
  border-color: #dce5f0;
}
html[data-theme="dark"] body[data-share-route="sitemap"] .wrap section {
  background: var(--surface);
  border-color: var(--line);
}
html[data-theme="dark"] body[data-share-route="sitemap"] .wrap a { color: var(--link); }
html[data-theme="dark"] body[data-share-route="sitemap"] .wrap a:hover { color: var(--link-hover); }
html[data-theme="dark"] body[data-site-error="404"] .error-stage {
  background: radial-gradient(ellipse at 76% 44%, var(--blue-pale) 0%, transparent 64%), var(--bg-soft);
  border-color: var(--line);
}
html[data-theme="dark"] body[data-site-error="404"] .error-solutions {
  background: var(--bg-deep);
  border-color: var(--line-strong);
  color: var(--link);
}
html[data-theme="dark"] body[data-site-error="404"] .error-solutions:hover {
  background: var(--td-bg-color-container-hover, #253244);
  border-color: var(--link);
  color: var(--link-hover);
}
@media (max-width: 720px) {
  html[data-theme="dark"] body[data-course-page] .hero::before {
    background: color-mix(in srgb, var(--bg-soft) 94%, transparent);
  }
}