@import url("https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");

/* Shared Gemini-inspired foundation: bright blue surfaces, rounded geometry and soft spectral light. */
:root {
  color-scheme: light;
  --core-font: "Bai Jamjuree", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --heading-font: "Bai Jamjuree", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --base-font-size: 16px;
  --body-weight: 400;
  --heading-weight: 700;
  --body-line-height: 1.5;
  --heading-letter-spacing: -0.03em;
  --site-hero-title-size: clamp(2.25rem, 4vw, 50px);
  --bg: #f7f9ff;
  --surface: #ffffff;
  --surface-2: #eef3ff;
  --surface-muted: #eef3ff;
  --paper: #ffffff;
  --text: #17213d;
  --ink: #17213d;
  --muted: #62708c;
  --line: #dbe4f5;
  --accent: #1a73e8;
  --accent-strong: #0b57d0;
  --accent-dark: #0b57d0;
  --accent-soft: #dce8ff;
  --primary: #1a73e8;
  --navy: #17213d;
  --navy2: #24365e;
  --navy-2: #24365e;
  --navy-soft: #e6edff;
  --teal: #1a73e8;
  --teal2: #0b57d0;
  --teal-soft: #dce8ff;
  --cyan: #4cc9f0;
  --cyan2: #20bce8;
  --grid: rgba(26, 115, 232, .055);
  --shadow: 0 22px 65px rgba(45, 78, 153, .12);
  --core-glow-a: rgba(26, 115, 232, .14);
  --core-glow-b: rgba(124, 77, 255, .10);
  --core-focus: rgba(26, 115, 232, .19);
  --core-title-gradient: linear-gradient(105deg, #1a73e8 0%, #4f6ff8 42%, #7c4dff 78%, #9b5cff 100%);
  --inverse-surface: #14213b;
  --inverse-surface-2: #203252;
  --inverse-text: #f7f9ff;
  --inverse-muted: #bdc9dd;
  --header-height: 64px;
}

/* Dark mode preserves contrast while keeping the same blue-violet product identity. */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a1020;
  --surface: #111a30;
  --surface-2: #17233e;
  --surface-muted: #17233e;
  --paper: #111a30;
  --text: #f2f6ff;
  --ink: #f2f6ff;
  --muted: #aab8d2;
  --line: #293958;
  --accent: #8ab4f8;
  --accent-strong: #a8c7fa;
  --accent-dark: #a8c7fa;
  --accent-soft: #1b3158;
  --primary: #8ab4f8;
  --navy: #f2f6ff;
  --navy2: #d8e5ff;
  --navy-2: #d8e5ff;
  --navy-soft: #1c2c4d;
  --teal: #8ab4f8;
  --teal2: #a8c7fa;
  --teal-soft: #1b3158;
  --cyan: #77d6f7;
  --cyan2: #4cc9f0;
  --grid: rgba(138, 180, 248, .055);
  --shadow: 0 26px 75px rgba(0, 0, 0, .34);
  --core-glow-a: rgba(66, 133, 244, .18);
  --core-glow-b: rgba(174, 123, 255, .12);
  --core-focus: rgba(138, 180, 248, .22);
  --core-title-gradient: linear-gradient(105deg, #8ab4f8 0%, #9b91ff 48%, #c29cff 100%);
  --inverse-surface: #17233e;
  --inverse-surface-2: #223354;
  --inverse-text: #f7f9ff;
  --inverse-muted: #bdc9dd;
}

/* Bai Jamjuree is the default UI typeface. CAD drawing text stays on Arial Narrow. */
html, body, button, input, select, textarea {
  font-family: var(--core-font);
  font-weight: var(--body-weight);
}

html { font-size: var(--base-font-size); }
html, body { margin: 0; }
body { line-height: var(--body-line-height); }
h1, h2, h3, h4 {
  font-family: var(--heading-font);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-letter-spacing);
}

@media screen {
  /* Standard public-page title: reuse this class on all future informational pages. */
  .site-hero-title {
    font-family: var(--heading-font) !important;
    font-weight: 650 !important;
    font-size: var(--site-hero-title-size) !important;
    line-height: 1;
    letter-spacing: -.05em !important;
    color: var(--ink);
    text-wrap: balance;
  }

  .site-hero-title em {
    font-style: normal;
    font-weight: 700;
    color: #1a73e8;
    background-image: var(--core-title-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /*
   * Display titles are the only text elements that use the blue-to-purple identity.
   * The list deliberately excludes card, form, report and modal headings so compact
   * interface labels remain solid blue or inherit the normal text colour.
   */
  :is(
    .section-heading h2,
    .library-section > div > h2,
    .about-section > div > h2,
    .contact-section > div > h2,
    .donate-section > div > h2,
    .library-intro h2,
    .blog-hero h1,
    .article-hero h1,
    .studio > h1
  ) {
    font-family: var(--heading-font) !important;
    font-weight: var(--heading-weight) !important;
    font-size: clamp(2.25rem, 4vw, 50px) !important;
    line-height: 1.04;
    letter-spacing: var(--heading-letter-spacing) !important;
    background-image: var(--core-title-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
  }

  /*
   * Split-phrase heroes keep high-contrast ink on the body copy and reserve the
   * Gemini blue-to-purple spectrum for the emphasised line.
   */
  :is(
    .home-hero .hero-copy h1,
    .search-hero .hero-copy h1,
    .library-hero h1,
    .lc-hero h1,
    .wc-hero h1,
    .st-hero h1,
    .st-side h1,
    .cad-hero h1,
    .lisp-hero h1,
    .lisp-side h1,
    .uc-side h1,
    .panel-title h1,
    main > .hero > h1,
    main > .hero > div > h1
  ) {
    font-family: var(--heading-font) !important;
    font-weight: var(--heading-weight) !important;
    font-size: clamp(2.25rem, 4vw, 50px) !important;
    line-height: 1.04;
    letter-spacing: var(--heading-letter-spacing) !important;
    color: var(--ink);
    background-image: none;
    -webkit-text-fill-color: unset;
  }

  .home-hero .hero-copy h1 {
    font-size: clamp(2.45rem, 5.3vw, 4.69rem) !important;
    line-height: 1.05;
    letter-spacing: -0.04em !important;
    font-weight: 650 !important;
    text-wrap: balance;
  }

  :is(
    .home-hero .hero-copy h1,
    .search-hero .hero-copy h1,
    .library-hero h1,
    .lc-hero h1,
    .wc-hero h1,
    .st-hero h1,
    .st-side h1,
    .cad-hero h1,
    .lisp-hero h1,
    .lisp-side h1,
    .uc-side h1,
    .panel-title h1,
    main > .hero > h1,
    main > .hero > div > h1
  ) em {
    font-style: normal;
    font-weight: 700;
    color: var(--accent);
    background-image: var(--core-title-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* StruSheets formerly retained its landing-page presentation gap; applications now begin together. */
  main.library-shell {
    padding-top: 4px !important;
  }
  main.library-shell .library-hero {
    min-height: 0 !important;
    padding: 18px 0 14px !important;
  }

  @media (forced-colors: active) {
    :is(
      .home-hero .hero-copy h1,
      .search-hero .hero-copy h1,
      .library-hero h1,
      .lc-hero h1,
      .wc-hero h1,
      .st-hero h1,
      .st-side h1,
      .cad-hero h1,
      .lisp-hero h1,
      .lisp-side h1,
      .uc-side h1,
      .panel-title h1,
      main > .hero > h1,
      main > .hero > div > h1
    ) em {
      background-image: none;
      -webkit-text-fill-color: unset;
      color: Highlight;
    }
  }

  /* The restrained Gemini glow gives large workspaces depth without reducing drawing legibility. */
  html {
    background:
      radial-gradient(65rem 40rem at 8% -10%, var(--core-glow-a), transparent 64%),
      radial-gradient(55rem 35rem at 100% 8%, var(--core-glow-b), transparent 68%),
      var(--bg);
    background-attachment: fixed;
  }

  /* Every application receives the homepage engineering grid over the shared blue-violet glow. */
  body::before {
    position: fixed;
    inset: 0;
    z-index: -1;
    content: "";
    pointer-events: none;
    background-image:
      linear-gradient(var(--grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: linear-gradient(to bottom, #000, transparent 58%);
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 58%);
  }
  body { color: var(--text); background-color: transparent; }

  html { scroll-padding-top: var(--header-height); scrollbar-gutter: stable; }
  body { background-image: none !important; background-color: transparent !important; }
  body:has(> .global-header) { padding-top: var(--header-height); }

  /* Every route uses this one persistent top menu, flush to the viewport and kept above page content. */
  .global-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    width: 100%;
    box-sizing: border-box;
    min-height: var(--header-height);
    margin: 0;
    padding: 0 clamp(16px, 3vw, 48px);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(12px, 2vw, 28px);
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    box-shadow: 0 8px 30px rgba(35, 61, 120, .06);
    backdrop-filter: blur(22px) saturate(150%);
    transition: box-shadow .25s ease, background-color .25s ease;
  }
  .global-header.is-scrolled { box-shadow: 0 12px 36px rgba(23, 33, 61, .12); }
  .global-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-weight: 780; letter-spacing: -.025em; white-space: nowrap; }
  .global-brand-mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(145deg, #0b57d0, #4285f4 62%, #8b6df6); color: #fff; box-shadow: 0 8px 20px rgba(26,115,232,.22); }
  .global-nav { min-width: 0; display: flex; justify-content: center; align-items: center; gap: clamp(6px, 1.2vw, 18px); }
  .global-nav > a, .global-menu-trigger {
    padding: 21px 8px 18px; border-bottom: 2px solid transparent; color: var(--muted); text-decoration: none;
    font-size: .84rem; font-weight: 650; white-space: nowrap;
    transition: color .15s ease; transform: none;
  }
  .global-header .global-nav > a,
  .global-header .global-menu-trigger,
  .global-header .global-nav > a:hover,
  .global-header .global-nav > a.active,
  .global-header .global-nav > a[aria-current="page"],
  .global-header .global-menu.is-current > .global-menu-trigger,
  .global-header .global-menu-trigger:hover {
    border: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
    text-decoration: none !important;
  }
  .global-nav > a:hover, .global-nav > a[aria-current="page"], .global-menu.is-current > .global-menu-trigger, .global-menu-trigger:hover { color: var(--text); }
  .global-menu { position: relative; display: flex; align-items: stretch; }
  .global-submenu {
    position: absolute; top: 100%; left: 0; z-index: 30; min-width: 220px; padding: 8px;
    display: none; flex-direction: column; border: 1px solid var(--line); border-radius: 14px;
    background: var(--surface); box-shadow: var(--shadow);
  }
  .global-submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
  .global-submenu a { padding: 10px 12px; border: 0; border-radius: 10px; color: var(--text); font-size: .86rem; font-weight: 650; text-decoration: none !important; transition: background-color .15s ease, color .15s ease; transform: none; }
  .global-submenu a:hover { background: var(--accent-soft); color: var(--accent-strong); }
  .global-menu:hover > .global-submenu, .global-menu:focus-within > .global-submenu { display: flex; }
  .global-submenu-branch { position: relative; }
  .global-submenu-parent { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
  .global-submenu-parent > span { color: var(--muted); font-size: 1rem; line-height: 1; }
  .global-submenu.global-submenu-nested { top: -8px; left: calc(100% - 2px); max-height: min(620px, calc(100vh - var(--header-height) - 24px)); display: none; overflow-y: auto; }
  .global-submenu.global-submenu-nested::before { inset: 0 auto 0 -2px; width: 2px; height: auto; }
  .global-submenu-branch:hover > .global-submenu-nested,
  .global-submenu-branch:focus-within > .global-submenu-nested { display: flex; }

  /*
   * Shared navigation ownership contract. The corridor and JS grace period let the pointer
   * travel naturally into every child level; important geometry prevents application CSS from
   * clipping, covering or disconnecting these site-wide menus.
   */
  @media screen and (min-width: 1321px) {
    .global-header { z-index: 10000 !important; overflow: visible !important; }
    .global-header .global-nav,
    .global-header .global-menu,
    .global-header .global-submenu-branch { overflow: visible !important; }
    .global-header .global-submenu { pointer-events: auto !important; }
    .global-header .global-menu.is-navigation-open > .global-submenu,
    .global-header .global-submenu-branch.is-navigation-open > .global-submenu-nested { display: flex !important; }
    .global-header .global-submenu-branch::after {
      content: "";
      position: absolute;
      top: -5px;
      right: -18px;
      z-index: 1;
      width: 20px;
      height: calc(100% + 10px);
      background: transparent;
    }
    .global-header .global-submenu.global-submenu-nested {
      left: calc(100% - 4px) !important;
      z-index: 31 !important;
    }
  }
  .global-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
  .global-menu-toggle {
    display: none; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 12px;
    background: var(--surface); align-items: center; justify-content: center; gap: 5px; flex-direction: column;
  }
  .global-menu-toggle span { width: 16px; height: 2px; border-radius: 99px; background: var(--text); }
  body.nav-locked { overflow: hidden; }
  .global-page-action { min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--accent-strong); font-size: .8rem; font-weight: 720; white-space: nowrap; }
  .global-page-action.primary { border-color: transparent; background: linear-gradient(135deg, #0b57d0, #1a73e8); color: #fff; }
  .admin-only { display: none !important; }
  html.is-admin .admin-only { display: inline-flex !important; }
  html.is-admin a.admin-only { display: inline !important; }
  .admin-export-only { display: none !important; }
  html.is-admin-exporter .admin-export-only { display: inline-flex !important; }
  .admin-export-unavailable,
  html.is-admin-exporter .admin-export-unavailable { display: none !important; }
  .admin-export-button {
    border-color: color-mix(in srgb, var(--accent) 32%, var(--line)) !important;
    background: color-mix(in srgb, var(--accent) 9%, var(--surface)) !important;
    color: var(--accent-strong) !important;
  }
  .admin-header-btn {
    min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px;
    background: var(--surface-2); color: var(--accent-strong); font-size: .78rem; font-weight: 650; text-decoration: none;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .admin-header-btn.logout { background: color-mix(in srgb, #b4233c 10%, var(--surface)); color: #b4233c; border-color: transparent; }
  .admin-header-btn i, .issue-dialog h2 i, .issue-dialog button i { font-size: .82em; opacity: .9; }
  .global-page-action, .lisp-table button, .lisp-buy, .hero-page-actions button, .search-button, .cad-download,
  .button, .primary-button, .secondary-button, .primary-action, .text-button, .quiet-button, .print-pdf-button,
  .checkout-button, .back-link, .load-more, .donation-trigger, .filter-title button, .filter-actions button,
  .review-tools button, .workspace-actions button, .file-button, .card-link {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  }
  .global-page-action i, .lisp-table button i, .lisp-buy i, .hero-page-actions button i, .search-button i, .cad-download i, .detail-heading button i,
  .button i, .primary-button i, .secondary-button i, .primary-action i, .text-button i, .quiet-button i, .print-pdf-button i,
  .checkout-button i, .back-link i, .load-more i, .donation-trigger i, .filter-title button i, .filter-actions button i,
  .review-tools button i, .workspace-actions button i, .file-button i, .card-link i, .tool-row em i, .st-grid a i {
    font-size: .82em; opacity: .92;
  }

  /* Common interaction polish is shared while application-specific layouts remain untouched. */
  a, button, input, select, textarea, summary {
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease;
  }
  button:not(:disabled) { cursor: pointer; }
  button:not(:disabled):active { transform: translateY(1px) scale(.99); }
  input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible, summary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--core-focus);
  }

  .topbar, .site-header, .sheet-header, .section-header, .app-bar, .app-header {
    backdrop-filter: blur(20px) saturate(145%);
  }
  .workspace-card, .program-card, .engineering-panel, .discipline-card, .search-console,
  .results-shell, .preview-card, .plane-list-card, .project-card, .input-card {
    box-shadow: var(--shadow);
  }
  .program-card, .discipline-card, .blog-card, .workspace-card, .engineering-panel {
    transition: transform .22s ease, box-shadow .22s ease;
  }
  .program-card:hover, .discipline-card:hover, .blog-card:hover {
    transform: translateY(-4px);
  }
  .primary-button, .button.primary, .primary-action, .save-button, .export-menu > button {
    background: linear-gradient(135deg, #0b57d0, #1a73e8);
    color: #fff;
    box-shadow: 0 10px 25px rgba(26, 115, 232, .24);
  }
  .primary-button:hover, .button.primary:hover, .primary-action:hover, .save-button:hover, .export-menu > button:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
  }
  .button, .primary-button, .secondary-button, .primary-action, .card-link, .tool-row {
    font-size: .88rem;
  }
  .program-card h3 { font-size: 1.32rem; }
  .program-card p, .section-heading p, .library-section p { font-size: .94rem; }
  .faq-grid summary { font-size: .92rem; }
  .faq-grid p { font-size: .86rem; }
  html[data-theme="dark"] .primary-button,
  html[data-theme="dark"] .button.primary,
  html[data-theme="dark"] .primary-action,
  html[data-theme="dark"] .save-button,
  html[data-theme="dark"] .export-menu > button {
    background: linear-gradient(135deg, #8ab4f8, #669df6);
    color: #071020;
  }
  .icon-button, .theme-control, .brand-mark, .site-mark i { border-radius: 999px; }
  .core-theme-toggle {
    width: 38px;
    height: 38px;
    padding: 0 !important;
    display: grid;
    place-items: center;
    border: 1px solid var(--line) !important;
    border-radius: 50% !important;
    background: var(--surface) !important;
    color: var(--text) !important;
  }

  /* Shared application surfaces and controls keep the same hierarchy in both themes. */
  .filter-panel, .results-panel, .detail-panel, .discipline-card, .search-console,
  .project-card, .input-card, .workspace-card, .engineering-panel {
    background-color: var(--surface);
    color: var(--text);
    border-color: var(--line);
  }
  input, select, textarea {
    min-height: 42px;
    background-color: var(--surface);
    color: var(--text);
    border-color: var(--line);
    font-size: .875rem;
  }
  input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 78%, transparent); }

  /* Section Properties uses legible engineering-density type without rebuilding its compact layout. */
  .search-hero { background: radial-gradient(circle at 9% 0, rgba(66,133,244,.24), transparent 25rem), var(--inverse-surface); color: var(--inverse-text); }
  .search-hero .hero-copy p { color: var(--inverse-muted); }
  .search-console { background: var(--surface); color: var(--text); }
  .search-modes { background: var(--surface-2); }
  .search-modes button { min-height: 40px; color: var(--muted); font-size: .82rem; }
  .search-modes button.active { background: var(--surface); color: var(--accent-strong); }
  .search-mode-panel > label, .strength-grid label { font-size: .78rem; }
  .search-mode-panel p { font-size: .75rem; color: var(--muted); }
  .smart-search { min-height: 48px; background: var(--surface); border-color: var(--line); }
  .smart-search input { min-height: 46px; background: transparent; color: var(--text); font-size: .94rem; }
  .section-workspace { grid-template-columns: 280px minmax(520px,.95fr) minmax(440px,.8fr); background: var(--surface); }
  .filter-panel { background: var(--surface-2); }
  .filter-title span, .results-heading span, .detail-heading span, .alternatives header span, .source-note span { font-size: .68rem; }
  .filter-title strong { font-size: 1rem; }
  .filter-title button, .filter-panel > label, .filter-panel details label, .results-heading label { font-size: .75rem; }
  .filter-panel select, .filter-panel input, .results-heading select { min-height: 42px; background: var(--surface); color: var(--text); border-color: var(--line); font-size: .82rem; }
  .filter-panel summary { color: var(--text); font-size: .8rem; }
  .source-note { background: var(--inverse-surface); color: var(--inverse-text); }
  .source-note p { color: var(--inverse-muted); font-size: .76rem; }
  .category-crumb { min-height: 36px; background: var(--surface); color: var(--muted); border-color: var(--line); font-size: .72rem; }
  .category-crumb b { font-size: .68rem; }
  .category-crumb:hover, .category-crumb.active { background: var(--accent-soft); color: var(--text); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
  .section-row { min-height: 78px; background: var(--surface); color: var(--text); border-color: var(--line); }
  .section-row:hover, .section-row.active { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
  .section-row h3 { font-size: .98rem; }
  .section-row .row-meta { font-size: .72rem; }
  .row-property span { font-size: .67rem; }
  .row-property strong { font-size: .82rem; }
  .result-list { transition: opacity .14s ease; }
  .result-list.is-updating { opacity: .68; pointer-events: none; }
  .detail-heading h2 { font-size: 1.85rem; }
  .detail-heading p { font-size: .78rem; }
  .detail-heading button { min-height: 38px; font-size: .75rem; }
  .section-visual { background: linear-gradient(145deg, var(--inverse-surface), var(--inverse-surface-2)); }
  .dimension-item span { color: #a9c7dc; font-size: .68rem; }
  .dimension-item strong { font-size: .82rem; }
  .property-card span { font-size: .7rem; }
  .property-card strong { font-size: 1rem; }
  .advanced-properties summary { color: var(--text); font-size: .82rem; }
  #advancedProperties { grid-template-columns: 1fr; }
  .advanced-row { min-height: 40px; padding: 9px 10px; display: grid; grid-template-columns: minmax(130px,1fr) minmax(90px,.8fr) auto; gap: 10px; align-items: center; background: var(--surface-2); color: var(--text); font-size: .76rem; }
  .advanced-row b { margin: 0; }
  .advanced-row .advanced-value { text-align: right; overflow-wrap: anywhere; }
  .advanced-row small { min-width: 58px; color: var(--muted); text-align: right; font-size: .69rem; }
  .alternatives h3 { font-size: .96rem; }
  .alternatives header small, .alternative-card span { font-size: .7rem; }
  .alternative-card b, .alternative-card strong { font-size: .8rem; }

  /* StruSheets cards use a stable inverse report sample and readable catalogue text. */
  .hero-report { background: var(--inverse-surface); color: var(--inverse-text); }
  .hero-report small { color: #9bcac7; font-size: .75rem; }
  .hero-report strong { color: var(--inverse-text); }
  .hero-report div span { color: var(--inverse-text); font-size: .8rem; }
  .hero-report p { color: var(--inverse-muted); font-size: .94rem; }
  .library-intro h2, .discipline-card h2 { color: var(--text); }
  .library-intro p, .discipline-card header small, .tool-row.available small { color: var(--muted); }
  .discipline-card header small { font-size: .78rem; }
  .discipline-card li, .tool-row { color: var(--text); font-size: .94rem; }
  .discipline-card li em, .tool-row em { font-size: .7rem; }
  .tool-row.available { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); }

  /* DonationPopup is a reusable product component with a structural-frame motif. */
  .donation-trigger { min-height: 46px; padding: 0 18px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #ffdd00, #ffb800); color: #171100; font-size: .85rem; font-weight: 800; box-shadow: 0 10px 24px rgba(255,184,0,.2); }
  .donation-popup { width: min(820px, calc(100% - 32px)); max-width: none; padding: 0; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); border-radius: 28px; background: var(--surface); color: var(--text); box-shadow: 0 35px 100px rgba(7, 16, 38, .34); overflow: hidden; }
  .donation-popup::backdrop { background: rgba(7, 13, 29, .68); backdrop-filter: blur(10px) saturate(120%); }
  .donation-popup-shell { position: relative; display: grid; grid-template-columns: 270px 1fr; min-height: 440px; }
  .donation-popup-close { position: absolute; z-index: 2; right: 18px; top: 16px; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: color-mix(in srgb, var(--surface) 82%, transparent); color: var(--muted); font-size: 1.3rem; }
  .donation-popup-visual { position: relative; min-height: 100%; overflow: hidden; background: radial-gradient(circle at 25% 18%, rgba(138,180,248,.34), transparent 13rem), linear-gradient(150deg, #0b57d0, #183a78 58%, #6f67f5 130%); color: #fff; }
  .donation-popup-visual::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(to bottom, #000, transparent 92%); }
  .donation-mood { position: absolute; z-index: 4; left: 50%; top: 46%; display: grid; place-items: center; width: 94px; height: 94px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: rgba(5,22,64,.24); font-size: 3.7rem; line-height: 1; translate: -50% -50%; box-shadow: 0 18px 45px rgba(2,12,35,.24); backdrop-filter: blur(8px); transition: transform .22s ease, background-color .22s ease; }
  .donation-mood.is-sad { transform: scale(.92) rotate(-5deg); background: rgba(5,22,64,.4); }
  .donation-popup-visual b { position: absolute; z-index: 1; left: 28px; bottom: 30px; font-size: 2.4rem; line-height: .9; letter-spacing: -.055em; }
  .donation-node { position: absolute; z-index: 2; width: 13px; height: 13px; border: 3px solid #fff; border-radius: 50%; background: #77d6f7; box-shadow: 0 0 0 6px rgba(255,255,255,.1); }
  .donation-node.node-a { left: 43px; top: 90px; }.donation-node.node-b { right: 43px; top: 62px; }.donation-node.node-c { left: 112px; top: 228px; }
  .donation-beam { position: absolute; z-index: 1; height: 5px; border-radius: 999px; background: rgba(255,255,255,.88); transform-origin: left center; box-shadow: 0 0 18px rgba(119,214,247,.35); }
  .donation-beam.beam-a { width: 172px; left: 49px; top: 95px; transform: rotate(-10deg); }.donation-beam.beam-b { width: 157px; left: 49px; top: 99px; transform: rotate(58deg); }.donation-beam.beam-c { width: 158px; left: 118px; top: 232px; transform: rotate(-66deg); }
  .donation-popup-content { padding: 58px 54px 42px; display: flex; flex-direction: column; justify-content: center; }
  .donation-kicker { color: var(--accent-strong); font-size: .72rem; font-weight: 800; letter-spacing: .16em; }
  .donation-popup-content h2 { max-width: 470px; margin: 12px 0 16px; color: var(--text); font-size: clamp(1.8rem, 3.4vw, 2.65rem); line-height: 1.04; letter-spacing: -.045em; }
  .donation-popup-content p { margin: 0; color: var(--muted); font-size: .97rem; line-height: 1.7; }
  .donation-impact { margin: 24px 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .donation-impact span { padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: .72rem; font-weight: 700; }
  .donation-popup-actions { display: flex; align-items: center; gap: 10px; }
  .donation-popup-actions a { min-height: 46px; padding: 0 18px; display: inline-flex; align-items: center; gap: 20px; border-radius: 12px; background: linear-gradient(135deg, #ffdd00, #ffb800); color: #171100; text-decoration: none; font-weight: 800; box-shadow: 0 12px 26px rgba(255,184,0,.2); }
  .donation-popup-actions button { min-height: 46px; padding: 0 14px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font-weight: 700; }
  .donation-popup-actions button:hover, .donation-popup-actions button:focus-visible { background: var(--surface-2); color: var(--text); }
  .donation-popup-content > small { margin-top: 18px; color: var(--muted); font-size: .7rem; }

  @media (max-width: 700px) {
    .donation-popup-shell { grid-template-columns: 1fr; }
    .donation-popup-visual { min-height: 150px; }
    .donation-popup-visual b { font-size: 2rem; }
    .donation-node.node-c, .donation-beam.beam-b, .donation-beam.beam-c { display: none; }
    .donation-popup-content { padding: 34px 24px 28px; }
    .donation-popup-actions { align-items: stretch; flex-direction: column; }
    .donation-popup-actions a, .donation-popup-actions button { justify-content: center; width: 100%; }
  }

  /* Legacy hard-coded application surfaces are normalized so every workspace has a complete dark mode. */
  html[data-theme="dark"] .sheet-header,
  html[data-theme="dark"] .section-header,
  html[data-theme="dark"] .app-bar,
  html[data-theme="dark"] .control-panel,
  html[data-theme="dark"] .input-panel,
  html[data-theme="dark"] .project-card,
  html[data-theme="dark"] .input-card,
  html[data-theme="dark"] .discipline-card,
  html[data-theme="dark"] .search-console,
  html[data-theme="dark"] .section-workspace,
  html[data-theme="dark"] .filter-panel,
  html[data-theme="dark"] .results-panel,
  html[data-theme="dark"] .detail-panel,
  html[data-theme="dark"] .section-row,
  html[data-theme="dark"] .category-crumb,
  html[data-theme="dark"] .alternative-card,
  html[data-theme="dark"] dialog,
  html[data-theme="dark"] #sectionForm > footer,
  html[data-theme="dark"] .opening-card,
  html[data-theme="dark"] .opening-title,
  html[data-theme="dark"] .export-options,
  html[data-theme="dark"] .export-options button,
  html[data-theme="dark"] .quiet-button,
  html[data-theme="dark"] .add-opening,
  html[data-theme="dark"] .action-dock,
  html[data-theme="dark"] .sheet-footer {
    background: var(--surface);
    color: var(--text);
    border-color: var(--line);
  }
  html[data-theme="dark"] .action-dock { background: color-mix(in srgb, var(--surface) 94%, transparent); }
  html[data-theme="dark"] input,
  html[data-theme="dark"] select,
  html[data-theme="dark"] textarea,
  html[data-theme="dark"] .smart-search {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--line);
  }
  html[data-theme="dark"] .tool-row.available,
  html[data-theme="dark"] .section-row:hover,
  html[data-theme="dark"] .section-row.active,
  html[data-theme="dark"] .category-crumb:hover,
  html[data-theme="dark"] .category-crumb.active {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  }
  html[data-theme="dark"] .report-page,
  html[data-theme="dark"] .print-report {
    --paper: #fff;
    --ink: #17213d;
    --text: #17213d;
    --muted: #62708c;
    --line: #dbe1e8;
    --navy: #17213d;
    --teal: #0b57d0;
    background: #fff;
    color: #17213d;
  }
}

@media screen and (max-width: 1320px) {
  .global-header { grid-template-columns: 1fr auto; gap: 0 12px; padding: 10px 16px; }
  .global-menu-toggle { display: flex; }
  .global-nav {
    display: none;
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 8px 0 16px;
  }
  .global-header.nav-open .global-nav { display: flex; }
  .global-nav > a, .global-menu-trigger { padding: 12px 10px; border-bottom: 0; border-radius: 10px; }
  .global-nav > a[aria-current="page"], .global-menu.is-current > .global-menu-trigger { background: var(--accent-soft); }
  .global-menu { flex-direction: column; }
  .global-submenu { position: static; display: flex; min-width: 0; transform: none; box-shadow: none; background: transparent; border: 0; padding: 0 0 8px 12px; }
  .global-submenu.global-submenu-nested { max-height: none; display: flex; padding: 0 0 4px 14px; overflow: visible; }
  .global-submenu-parent > span { transform: rotate(90deg); }
  .global-page-action:not(.primary) { display: none; }
}

@media screen and (max-width: 1250px) {
  .section-workspace { grid-template-columns: 240px minmax(420px, 1fr); }
  .section-workspace .detail-panel { grid-column: 1 / -1; position: static; max-height: none; border-top: 1px solid var(--line); }
}

@media screen and (min-width: 981px) {
  .global-header + .app-shell .control-panel { top: var(--header-height); height: calc(100vh - var(--header-height)); }
  .global-header + .calculator-shell { height: calc(100vh - var(--header-height)); }
  .global-header + main .detail-panel { top: var(--header-height); max-height: calc(100vh - var(--header-height)); }
}

@media screen and (max-width: 560px) {
  .global-brand-wordmark { max-width: 118px; }
}

/* Reports remain neutral paper documents even when the surrounding application uses dark mode. */
@media print {
  :root, html[data-theme="dark"] { color-scheme: light; }
  html, body { background: #fff !important; }
  .global-header,
  .global-site-footer,
  .issue-launcher,
  .issue-coach,
  .issue-dialog,
  .no-print { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Admin catalogue visibility must win over component layout rules such as
   display:flex/grid. Keep this shared so hidden applications cannot reappear
   in cards, lists, navigation, or future application hubs. */
[data-admin-visibility-hidden="true"] {
  display: none !important;
}

/* Common iOS-style on/off controls for drawing settings across StruTools. */
.switch-row > input[type="checkbox"] {
  appearance: none !important;
  flex: 0 0 auto;
  width: 44px !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--muted) 42%, var(--line)) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--muted) 58%, var(--surface-2)) !important;
  position: relative;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.switch-row > input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .28);
  transition: translate .18s ease;
}
.switch-row > input[type="checkbox"]:checked { border-color: var(--accent) !important; background: var(--accent) !important; }
.switch-row > input[type="checkbox"]:checked::after { translate: 18px 0; }
.switch-row > input[type="checkbox"]:focus-visible { outline: 0; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.onoff-switch i { width: 44px !important; height: 26px !important; border-radius: 999px !important; }
.onoff-switch i::after { width: 18px !important; height: 18px !important; top: 4px !important; left: 4px !important; box-shadow: 0 2px 5px rgba(0,0,0,.28); }
.onoff-switch input:checked + i::after { transform: translateX(18px) !important; }

/* Shared process indicator: the StruTools logo remains still while the Gemini-blue/purple orbit
   communicates activity. This is the compact loader established by the MBS to PEB generator. */
.strutools-logo-spinner {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto;
}
.strutools-logo-spinner img {
  position: relative;
  z-index: 1;
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.strutools-logo-spinner::after {
  content: "";
  position: absolute;
  inset: 1px;
  border: 2px solid transparent;
  border-top-color: var(--accent, #1768e8);
  border-right-color: #7658ef;
  border-radius: 50%;
  animation: strutools-logo-orbit 1s linear infinite;
}
@keyframes strutools-logo-orbit { to { transform: rotate(360deg); } }

/* Shared application-processing loader. Applications provide copy through the custom element API only. */
strutools-processing-loader {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: color-mix(in srgb, #07101f 68%, transparent);
  backdrop-filter: blur(9px);
}
strutools-processing-loader[hidden] { display: none !important; }
.strutools-processing-loader-card {
  width: min(430px, calc(100vw - 36px));
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 28px 26px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 22px;
  color: var(--text);
  text-align: center;
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 96%, var(--accent)), color-mix(in srgb, var(--surface) 94%, #7658ef));
  box-shadow: 0 28px 85px rgba(0, 0, 0, .32);
}
.strutools-processing-loader-card b { min-height: 3em; display: grid; place-items: center; width: 100%; margin-top: 2px; font-size: 1.02rem; overflow-wrap: anywhere; }
.strutools-processing-loader-card small { min-height: 4.6em; display: grid; place-items: start center; width: 100%; max-width: 380px; color: var(--muted); line-height: 1.5; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .strutools-logo-spinner::after { animation: none; } }

/* StruSheets and the section catalogue inherit the same homepage canvas even when
   their legacy page styles define a higher-specificity background on :root. */
@media screen {
  /* Reusable split-phrase application heading for every current and future tool. */
  .app-hero-title {
    font-family: var(--heading-font) !important;
    font-weight: var(--heading-weight) !important;
    font-size: clamp(2.25rem, 4vw, 50px) !important;
    line-height: 1.04;
    letter-spacing: var(--heading-letter-spacing) !important;
    color: var(--ink);
    background-image: none;
    -webkit-text-fill-color: unset;
  }

  .app-hero-title em {
    font-style: normal;
    font-weight: 700;
    color: #1a73e8;
    background-image: var(--core-title-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  html:has(body .library-shell),
  html:has(body .app-shell),
  html:has(body .calculator-shell),
  html:has(body .section-app) {
    background:
      radial-gradient(65rem 40rem at 8% -10%, var(--core-glow-a), transparent 64%),
      radial-gradient(55rem 35rem at 100% 8%, var(--core-glow-b), transparent 68%),
      var(--bg) !important;
    background-attachment: fixed !important;
  }
  body:has(.library-shell),
  body:has(.app-shell),
  body:has(.calculator-shell),
  body:has(.section-app),
  .preview-stage,
  .report-workspace { background: transparent !important; }
}

/* Symmetric outer columns keep the shared menu centred even when page-specific actions change. */
@media (min-width: 1321px) {
  .global-header { grid-template-columns: minmax(178px, 1fr) auto minmax(178px, 1fr); }
  .global-brand { justify-self: start; }
  .global-actions { justify-self: end; }
}

/* The homepage search has one focus surface. Global form styling must not draw an inner box. */
html[data-theme="dark"] .hero-tool-search .tool-search-shell input,
html[data-theme="dark"] .hero-tool-search .tool-search-shell input:focus,
html[data-theme="dark"] .hero-tool-search .tool-search-shell input:focus-visible {
  min-height: 0;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  appearance: none;
}

/* Shared, action-triggered ad-block request used by free applications. */
.stru-adblock-dialog {
  width: min(560px, calc(100% - 32px)); max-width: none; padding: 0; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); border-radius: 24px;
  background: var(--surface); color: var(--text); box-shadow: 0 34px 100px rgba(7, 16, 38, .38);
}
.stru-adblock-dialog::backdrop { background: rgba(7, 13, 29, .66); backdrop-filter: blur(9px); }
.stru-adblock-shell { position: relative; padding: clamp(28px, 5vw, 46px); display: grid; gap: 14px; }
.stru-adblock-shell::before { position: absolute; inset: 0 0 auto; height: 4px; content: ""; background: var(--core-title-gradient); }
.stru-adblock-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; background: linear-gradient(145deg, rgba(26,115,232,.14), rgba(124,77,255,.16)); color: var(--accent-strong); font-size: 1.2rem; }
.stru-adblock-kicker { color: var(--accent-strong); font-size: .68rem; font-weight: 850; letter-spacing: .14em; }
.stru-adblock-shell h2 { margin: 0; color: var(--text); font-size: clamp(1.65rem, 4vw, 2.35rem); line-height: 1.05; letter-spacing: -.04em; }
.stru-adblock-shell > p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.7; }
.stru-adblock-help { margin-top: 4px; padding: 17px 18px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-2); }
.stru-adblock-help strong { font-size: .8rem; }
.stru-adblock-help ol { margin: 10px 0 0; padding-left: 20px; color: var(--muted); font-size: .78rem; line-height: 1.7; }
.stru-adblock-actions { margin-top: 6px; display: flex; justify-content: flex-end; gap: 9px; }
.stru-adblock-actions button { min-height: 43px; padding: 0 16px; border-radius: 11px; }
.stru-adblock-shell > small { color: var(--muted); font-size: .67rem; line-height: 1.5; }