/* Page families following the approved home-harmony direction.
 * Screen-only: existing print layouts, code geometry and custom public accents
 * keep their own contracts. Shared navigation belongs to harmony-shell.css.
 * Load after the existing family styles. No markup or interaction hooks change.
 */
@media screen {
  body #root :is(.seo-page, .utility-app, .workspace-screen, .vn-qr-screen,
    .cabinet, .legal-document, .page-studio-route, .saved-public-page,
    .public-catalog, .public-qr-page:not(.public-qr-page--night), .passport-page, .place-guide,
    .object-private-page, .catalog-loading) {
    --ink: #172036;
    --muted: #667183;
    --paper: #fff;
    --bright: #fff;
    --soft: #f5f6f8;
    --orange: #e95a24;
    --harmony-action: #ca441a;
    --lime: #bad85f;
    --yellow: #edf2df;
    --line: #e4e8ef;
    --shadow: 0 10px 30px #17203608;
    --harmony-blue: #2146a8;
    --harmony-radius: 22px;
    font-family: Onest, sans-serif;
  }

  /* Readable page structure, with an immediate route into the working area. */
  body #root :is(.seo-page, .utility-app, .workspace-screen, .vn-qr-screen,
    .legal-document, .saved-public-page, .passport-page, .place-guide,
    .object-private-page, .catalog-loading) {
    background: #fff;
    color: var(--ink);
  }
  body #root :is(.seo-page, .utility-app, .workspace-screen, .vn-qr-screen,
    .cabinet, .legal-document, .page-studio-route, .saved-public-page,
    .passport-page, .place-guide, .object-private-page)
    :is(main, section, article, form, fieldset, .seo-hero-copy) {
    min-width: 0;
  }
  body #root :is(.seo-page, .utility-app, .workspace-screen, .vn-qr-screen,
    .cabinet, .legal-document, .page-studio-route, .saved-public-page,
    .passport-page, .place-guide, .object-private-page)
    :is(input, select, textarea, button) {
    font-family: Onest, sans-serif;
  }
  body #root :is(.seo-page, .utility-app, .workspace-screen, .vn-qr-screen,
    .cabinet, .legal-document, .page-studio-route, .saved-public-page,
    .passport-page, .place-guide, .object-private-page)
    :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]), select, textarea) {
    border-radius: 10px;
    border-color: var(--line);
  }
  body #root :is(.seo-page, .utility-app, .workspace-screen, .vn-qr-screen,
    .cabinet, .legal-document, .page-studio-route, .saved-public-page,
    .passport-page, .place-guide, .object-private-page) :focus-visible {
    outline: 3px solid var(--harmony-blue);
    outline-offset: 4px;
  }

  body #root .seo-page .seo-content {
    max-width: 1280px;
    padding: 0 40px 48px;
  }
  body #root .seo-page .breadcrumbs {
    margin: 24px 0 16px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
  }
  body #root .seo-page .breadcrumbs a { color: var(--muted); }
  body #root .seo-page .breadcrumbs [aria-current] { color: var(--ink); }
  body #root .seo-page .seo-hero {
    padding: 14px 0 28px;
    gap: 32px;
    background: #fff;
    border: 0;
  }
  body #root .seo-page .seo-hero h1 {
    max-width: 940px;
    color: var(--ink);
    font: 600 clamp(30px, 3.1vw, 43px)/1.25 Unbounded, sans-serif;
    letter-spacing: -.055em;
    overflow-wrap: anywhere;
  }
  body #root .seo-page :is(.seo-lead, .page-work-intro, .scanner-intro) {
    max-width: 78ch;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.7;
  }
  body #root .seo-page :is(.seo-kicker, .eyebrow) { color: var(--muted); }
  body #root .seo-page .hero-actions { gap: 12px 24px; }
  body #root .seo-page .hero-actions .primary-action {
    min-height: 46px;
    padding: 11px 19px;
    border: 0;
    border-radius: 13px;
    background: var(--harmony-action);
    color: #fff;
    box-shadow: none;
    text-decoration: none;
    font: 600 14px/1.4 Onest, sans-serif;
    white-space: normal;
  }
  body #root .seo-page .hero-actions .paper-action {
    background: none;
    color: var(--harmony-blue);
    border: 0;
    box-shadow: none;
    text-decoration: underline;
    text-underline-offset: 5px;
  }
  body #root .seo-page .qr-result-jump {
    border: 0;
    border-radius: 13px;
    background: var(--harmony-action);
    color: #fff;
    box-shadow: none;
  }
  body #root .seo-page :is(.page-local-nav, .scanner-page-nav) {
    gap: 4px 24px;
    margin-bottom: 24px;
    border-color: var(--line);
  }
  body #root .seo-page :is(.page-local-nav, .scanner-page-nav) a {
    color: var(--harmony-blue);
    font-size: 13px;
    min-height: 44px;
  }
  body #root .seo-page :is(.page-local-nav, .scanner-page-nav) a[aria-current] {
    color: var(--ink);
  }
  body #root .seo-page :is(.seo-tool, .seo-tool--camera) {
    padding: 28px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--harmony-radius);
    box-shadow: none;
  }
  body #root .seo-page .seo-tool-head h2 {
    color: var(--ink);
    font: 600 24px/1.35 Onest, sans-serif;
    letter-spacing: -.025em;
  }
  body #root .seo-page .tool-actions :is(button, a, label) {
    border-radius: 11px;
    box-shadow: none;
    min-height: 44px;
  }
  body #root .seo-page .tool-actions .text-action {
    background: none;
    color: var(--harmony-blue);
  }
  body #root .seo-page :is(.tool-note, .page-work-limit, .scanner-input-limit) {
    color: var(--muted);
    line-height: 1.7;
  }
  body #root .seo-page :is(.tool-verdict, .tool-note, .seo-tool-example) {
    border-radius: 12px;
    box-shadow: none;
  }

  /* Existing disclosure rows remain rows; the material is not rebuilt as tiles. */
  body #root .seo-page :is(.page-disclosure, .page-directory-group,
    .scanner-disclosure, .page-ref-card) {
    border-color: var(--line);
    border-radius: 17px;
    background: #fff;
    box-shadow: none;
  }
  body #root .seo-page :is(.page-chapter, .scanner-chapter) {
    border-color: var(--line);
    background: #fff;
  }
  body #root .seo-page :is(.page-chapter, .page-disclosure,
    .page-directory-group, .scanner-disclosure, .scanner-chapter, .page-ref-card)
    > summary {
    color: var(--ink);
    border-color: var(--line);
  }
  body #root .seo-page :is(.page-chapter, .page-disclosure,
    .page-directory-group, .scanner-disclosure, .scanner-chapter, .page-ref-card)
    > summary :is(h2, b) {
    color: var(--ink);
    font-family: Onest, sans-serif;
    font-weight: 600;
    letter-spacing: -.015em;
  }
  body #root .seo-page :is(.page-disclosure, .page-directory-group,
    .scanner-disclosure)[open] > summary {
    background: var(--soft);
    border-radius: 16px 16px 0 0;
  }
  body #root .seo-page :is(.page-chapter, .scanner-chapter)[open] > summary {
    background: var(--soft);
  }
  body #root .seo-page :is(.page-chapter, .page-disclosure,
    .page-directory-group, .scanner-disclosure, .scanner-chapter)
    > summary > i { color: var(--harmony-blue); }
  body #root .seo-page :is(.seo-chapter-main, .page-disclosure-body,
    .scanner-disclosure-body) :is(p, li) {
    font-size: 16px;
    line-height: 1.8;
  }
  body #root .seo-page :is(.page-section-heading, .scanner-section-heading,
    .seo-chapter-title, .seo-faq-rail) h2 {
    color: var(--ink);
    font: 600 clamp(22px, 2.1vw, 28px)/1.35 Unbounded, sans-serif;
    letter-spacing: -.045em;
  }
  body #root .seo-page :is(.seo-pull, .seo-case, .seo-educational,
    .seo-steps, .seo-checks, .seo-calc) {
    border-radius: 15px;
    box-shadow: none;
  }
  body #root .seo-page .seo-pull {
    background: #f4f7ed;
    border-left-color: #a5bd66;
    color: var(--ink);
  }
  body #root .seo-page :is(.seo-table, .ref-table) th {
    background: var(--soft);
    color: var(--ink);
  }
  body #root .seo-page :is(.seo-table, .ref-table) :is(th, td) {
    border-color: var(--line);
  }
  body #root .seo-page :is(.seo-table-wrap, .ref-table-wrap) {
    border-radius: 12px;
  }
  body #root .seo-page :is(.seo-related, .seo-next, .seo-proof, .seo-sources) {
    border-color: var(--line);
  }
  body #root .seo-page :is(.seo-proof, .seo-sources) {
    background: var(--soft);
    color: var(--ink);
    border-radius: 18px;
  }
  body #root .seo-page :is(.seo-proof, .seo-sources) a {
    color: var(--harmony-blue);
  }
  body #root .seo-page :is(.seo-proof, .seo-sources) :is(p, span) {
    color: var(--muted);
  }
  body #root .seo-page :is(.page-route-card, .tool-directory-card) {
    border-color: var(--line);
    box-shadow: none;
  }
  body #root .seo-page .page-route-card > a {
    color: var(--ink);
    background: none;
  }
  body #root .seo-page :is(.page-route-card-note, .tool-directory-meta,
    .tool-directory-updated) { color: var(--muted); }

  /* Directory: keep the existing useful editorial rows and search behavior. */
  body #root .seo-page--directory .tool-directory-heading {
    align-items: center;
    gap: 24px;
    margin: 16px 0 28px;
  }
  body #root .seo-page--directory .tool-directory-heading h1 {
    color: var(--ink);
    font: 600 38px/1.25 Unbounded, sans-serif;
    letter-spacing: -.055em;
  }
  body #root .seo-page--directory .tool-directory-heading > a {
    color: var(--harmony-blue);
    border-radius: 12px;
  }
  body #root .seo-page--directory .tool-directory-search {
    background: var(--soft);
    border-color: var(--line);
    border-radius: 14px;
    box-shadow: none;
  }
  body #root .seo-page--directory .tool-directory-search input {
    color: var(--ink);
    background: transparent;
  }
  body #root .seo-page--directory :is(.tool-directory-routes,
    .tool-directory-view) button { border-radius: 11px; }
  body #root .seo-page--directory .tool-directory-routes button[aria-pressed="true"] {
    color: var(--harmony-blue);
    background: #edf1fb;
  }
  body #root .seo-page--directory .tool-directory-card h3 {
    color: var(--ink);
    font: 600 16px/1.45 Onest, sans-serif;
    letter-spacing: -.025em;
  }
  body #root .seo-page--directory .tool-directory-card p {
    color: var(--muted);
    font-size: 13px;
  }
  body #root .seo-page--directory .tool-directory-favorite {
    color: var(--muted);
    border-radius: 10px;
  }

  /* Camera/photo work: shapes change; scan targets and evidence geometry do not. */
  body #root .scanner-page[data-scanner-page].seo-page .seo-tool--camera {
    padding: 24px;
    border-color: var(--line);
    border-radius: 24px;
    box-shadow: none;
  }
  body #root .seo-page .scan-profile-router nav a {
    border-color: var(--line);
    border-radius: 14px;
    color: var(--ink);
  }
  body #root .seo-page .scan-profile-router nav a.is-active {
    background: #f1f5e7;
    color: var(--ink);
    border-color: #b7c790;
    box-shadow: none;
  }
  body #root .seo-page :is(.scan-phone, .scan-stage, .scan-paste) {
    border-radius: 18px;
    box-shadow: none;
  }
  body #root .seo-page .scan-start {
    min-height: 48px;
    border-radius: 13px;
    background: var(--harmony-action);
    color: #fff;
    box-shadow: none;
  }
  body #root .seo-page :is(.scan-hit, .scan-photo-batch, .scan-history,
    .scan-local-work, .scan-pdf, .scan-photo-summary) {
    border-radius: 16px;
    border-color: var(--line);
    box-shadow: none;
  }
  body #root .seo-page .scan-hit-actions :is(a, button) { border-radius: 10px; }
  body #root .seo-page .scanner-guide-number {
    border-radius: 10px;
    background: #edf2df;
    color: #536a2a;
  }

  /* Existing studios keep their editing levels, tables and live previews. */
  body #root :is(.workspace-screen, .vn-qr-screen) .vn-work-return {
    color: var(--muted);
    border-color: var(--line);
  }
  body #root .workspace-screen .studio-section--compact {
    max-width: 1360px;
    padding-top: 28px;
  }
  body #root :is(.workspace-screen, .vn-qr-screen)
    :is(.studio-heading, .qr-generator-heading, .collection-heading) :is(h1, h2) {
    color: var(--ink);
    font: 600 clamp(27px, 2.5vw, 35px)/1.3 Unbounded, sans-serif;
    letter-spacing: -.05em;
  }
  body #root :is(.workspace-screen, .vn-qr-screen)
    :is(.studio-kicker, .studio-heading p, .qr-generator-heading p,
      .studio-data-heading p, .catalog-compose-heading p, .manager-address) {
    color: var(--muted);
  }
  body #root :is(.workspace-screen, .vn-qr-screen)
    :is(.studio-tabs, .qr-main-tabs, .manager-tabs) { border-color: var(--line); }
  body #root :is(.workspace-screen, .vn-qr-screen)
    :is(.studio-tabs, .qr-main-tabs, .manager-tabs) button {
    color: var(--muted);
    font-family: Onest, sans-serif;
    border-radius: 10px 10px 0 0;
  }
  body #root :is(.workspace-screen, .vn-qr-screen)
    :is(.studio-tabs, .qr-main-tabs, .manager-tabs) button.active {
    color: var(--harmony-blue);
    border-bottom-color: var(--orange);
    background: #f4f6fb;
  }
  body #root :is(.workspace-screen, .vn-qr-screen, .page-studio-route)
    :is(.primary-action, .collection-create, .studio-import-action) {
    border-radius: 13px;
    box-shadow: none;
  }
  body #root :is(.workspace-screen, .vn-qr-screen, .page-studio-route) .primary-action {
    background: var(--harmony-action);
    color: #fff;
    border: 0;
  }
  body #root :is(.workspace-screen, .vn-qr-screen, .page-studio-route)
    :is(.paper-action, .studio-import-options, .studio-product-fields,
      .qr-style-panel, .qr-extra-editor, .catalog-compose-section,
      .studio-copy-library, .collection-catalog, .manager-live-preview) {
    border-radius: 16px;
    border-color: var(--line);
    box-shadow: none;
  }
  body #root .workspace-screen :is(.studio-data, .catalog-compose,
    .manager-edit-surface) { color: var(--ink); background: #fff; }
  body #root .workspace-screen :is(.studio-import-bar, .studio-draft-bar,
    .studio-products-toolbar, .catalog-settings) {
    background: var(--soft);
    border-color: var(--line);
    border-radius: 14px;
  }
  body #root .workspace-screen :is(.studio-product-line, .studio-product-row,
    .studio-product-columns, .manager-product-line) { border-color: var(--line); }
  body #root .workspace-screen .print-selection {
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 14px;
  }
  body #root .workspace-screen .print-selection > div {
    background: var(--soft);
    color: var(--ink);
  }
  body #root .workspace-screen .print-selection > div button {
    color: var(--harmony-blue);
  }
  body #root .workspace-screen .print-selection > label {
    background: #fff;
    border-color: var(--line);
  }
  body #root .workspace-screen :is(.studio-product-line, .manager-product-line)
    input:not([type="checkbox"]):not([type="file"]) {
    background: #fff;
    color: var(--ink);
  }
  body #root .workspace-screen :is(.label-preview, .phone-preview,
    .catalog-compose-preview) {
    border-radius: 24px;
    background: var(--soft);
    box-shadow: none;
  }
  body #root :is(.vn-qr-screen, .seo-tool--generator, .page-studio-route)
    :is(.qr-editor, .qr-preview-panel) {
    color: var(--ink);
    border-radius: 22px;
    border-color: var(--line);
    box-shadow: none;
  }
  body #root :is(.vn-qr-screen, .seo-tool--generator, .page-studio-route)
    :is(.qr-output-actions button, .qr-type-grid button, .qr-page-types button) {
    border-radius: 11px;
    box-shadow: none;
  }
  body #root :is(.vn-qr-screen, .seo-tool--generator) .qr-type-grid button.active {
    background: #edf1fb;
    color: var(--harmony-blue);
  }
  body #root :is(.vn-qr-screen, .seo-tool--generator) .qr-artwork-empty {
    border-radius: 16px;
    background: var(--soft);
    color: var(--muted);
  }

  /* Utilities: keep source pages, OCR coordinates and semantic warnings intact. */
  html:has(#root .utility-app), body:has(#root .utility-app) { min-width: 0; }
  body #root .utility-app .utility-main {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
  }
  body #root .utility-app .utility-hero.utility-entry {
    padding-top: 36px;
    padding-bottom: 36px;
    gap: 40px;
  }
  body #root .utility-app .utility-entry h1 {
    color: var(--ink);
    font: 600 clamp(30px, 3vw, 40px)/1.25 Unbounded, sans-serif;
    letter-spacing: -.05em;
  }
  body #root .utility-app .utility-entry .utility-hero-copy > p:not(.eyebrow) {
    color: var(--muted);
    line-height: 1.7;
  }
  body #root .utility-app .utility-actions button {
    min-height: 48px;
    border-radius: 13px;
    box-shadow: none;
  }
  body #root .utility-app :is(.utility-file-action, .utility-camera-action) {
    background: var(--harmony-action);
    color: #fff;
  }
  body #root .utility-app .utility-camera-action { gap: 10px; padding-inline: 14px; }
  body #root .utility-app :is(.utility-source-panel, .utility-result-panel,
    .utility-analysis-chapter, .utility-profile, .utility-compare,
    .utility-archive, .utility-source-links, .utility-taxonomy-grid article) {
    border-radius: 19px;
    border-color: var(--line);
    box-shadow: none;
  }
  body #root .utility-app :is(.utility-source-caption, .utility-legal-note,
    .utility-analysis-boundary, .utility-legal-boundary) {
    color: var(--muted);
    line-height: 1.7;
  }
  body #root .utility-app :is(.utility-field input, .utility-compare-control select,
    .utility-service-editor input) { border-radius: 10px; }
  body #root .utility-app :is(.utility-save, .utility-confirm,
    .utility-case-actions button) { border-radius: 11px; box-shadow: none; }
  body #root .utility-app :is(.utility-section-head, .utility-analysis-head,
    .utility-block-title, .utility-knowledge-head) :is(h2, h3) {
    color: var(--ink);
    letter-spacing: -.035em;
  }
  body #root .utility-app :is(.utility-profile, .utility-analysis-head,
    .utility-analysis-boundary, .utility-service-editor, .utility-compare) {
    background: var(--soft);
  }
  body #root .utility-app :is(.utility-work-grid, .utility-result-panel,
    .utility-fields, .utility-field, .utility-analysis-scoreboard article,
    .utility-analysis-chapter, .utility-profile-proof, .utility-analysis-boundary) {
    border-color: var(--line);
  }
  body #root .utility-app :is(.utility-field.is-active, .utility-field:hover,
    .utility-services-list button.is-active, .utility-services-list button:hover,
    .utility-code-list button.is-active, .utility-code-list button:hover) {
    background: #f0f3fc;
  }
  body #root .utility-app :is(.utility-save, .utility-compare-control > button,
    .utility-service-editor > footer button) {
    background: var(--harmony-blue);
    color: #fff;
    border-radius: 11px;
  }
  body #root .utility-app .utility-analysis-story {
    border-top: 4px solid var(--harmony-blue);
    border-radius: 22px;
    box-shadow: var(--shadow);
  }
  body #root .utility-app .utility-analysis-head {
    gap: 32px;
    padding: 32px;
  }
  body #root .utility-app .utility-analysis-head h2 {
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.25;
  }
  body #root .utility-app .utility-analysis-head > div > p:last-child {
    color: var(--muted);
    line-height: 1.7;
  }
  body #root .utility-app .utility-analysis-head label {
    border-radius: 13px;
    border-left-color: var(--harmony-action);
  }
  body #root .utility-app .utility-analysis-head select {
    min-height: 44px;
    padding-inline: 8px;
    font-size: 14px;
  }
  body #root .utility-app .utility-compare-control > button { font-size: 13px; }
  body #root .utility-app .utility-compare-control > small { font-size: 12px; }
  body #root .utility-app .utility-analysis-scoreboard article { padding: 22px; }
  body #root .utility-app .utility-analysis-scoreboard article:first-child {
    background: var(--harmony-blue);
    color: #fff;
  }
  body #root .utility-app .utility-analysis-scoreboard article:first-child strong {
    color: #e1eead;
  }
  body #root .utility-app .utility-analysis-scoreboard article:first-child small {
    color: #e3eaff;
  }
  body #root .utility-app .utility-analysis-scoreboard :is(span, small) {
    font-size: 12px;
  }
  body #root .utility-app .utility-analysis-story:is(.has-danger, .has-warning)
    .utility-analysis-scoreboard article:last-child strong { color: #a93b24; }
  body #root .utility-app .utility-analysis-story.is-clear
    .utility-analysis-scoreboard article:last-child strong { color: #45632d; }
  body #root .utility-app .utility-analysis-verdict {
    background: var(--harmony-blue);
    color: #fff;
  }
  body #root .utility-app .utility-analysis-verdict > div { padding: 32px; }
  body #root .utility-app .utility-analysis-verdict > div > span { color: #e1eead; }
  body #root .utility-app .utility-analysis-verdict h3 {
    font-size: clamp(24px, 2.5vw, 34px);
    line-height: 1.3;
  }
  body #root .utility-app .utility-analysis-verdict > div > p { color: #e3eaff; }
  body #root .utility-app .utility-analysis-verdict aside {
    padding: 28px;
    background: #fff2e9;
    color: var(--ink);
  }
  body #root .utility-app .utility-analysis-verdict aside::before {
    background: var(--harmony-action);
  }
  body #root .utility-app .utility-analysis-verdict aside button {
    min-height: 44px;
    border-color: #e6c7b5;
    background: #fff;
    color: #a13816;
    font-size: 13px;
  }
  body #root .utility-app .utility-case-actions button:first-child {
    background: var(--harmony-action);
    color: #fff;
    border-color: var(--harmony-action);
  }
  body #root .utility-app .utility-analysis-verdict aside button:is(:hover, :focus-visible) {
    background: #fbe0cf;
    color: #853012;
  }
  body #root .utility-app .utility-case-actions button:first-child:is(:hover, :focus-visible) {
    background: #a13816;
    color: #fff;
  }
  body #root .utility-app .utility-case-status {
    border-color: #e6c7b5;
    border-radius: 10px;
    background: #fff;
  }
  body #root .utility-app .utility-case-status :is(span, select) { color: var(--ink); }
  body #root .utility-app .utility-case-status select { min-height: 32px; }
  body #root .utility-app .utility-analysis-boundary { font-size: 12px; }
  body #root .utility-app .utility-analysis-chapter--changes .utility-total-diff {
    background: var(--soft);
  }
  body #root .utility-app .is-up { color: #a93b24 !important; }
  body #root .utility-app .is-down { color: #45632d !important; }
  body #root .utility-app :is(.utility-comparison-guard > div > span,
    .utility-service-editor > header span) { color: #a13816; }
  body #root .utility-app :is(.utility-analysis-verdict span,
    .utility-analysis-chapter header span) { font-size: 11px; }
  @media (max-width: 680px) {
    body #root .utility-app .utility-analysis-head { padding: 24px 18px; gap: 20px; }
    body #root .utility-app .utility-analysis-scoreboard article { padding: 18px 14px; }
    body #root .utility-app .utility-analysis-scoreboard strong { line-height: 1.3; }
    body #root .utility-app .utility-analysis-verdict > div,
    body #root .utility-app .utility-analysis-verdict aside { padding: 24px 18px; }
    body #root .utility-app .utility-analysis-verdict h3 { font-size: 24px; }
  }

  /* Quiet legal and account screens retain prose and form structure. */
  body #root .legal-document .legal-main {
    max-width: 960px;
    padding-top: 36px;
    color: var(--ink);
  }
  body #root .legal-document .legal-main h1 {
    color: var(--ink);
    letter-spacing: -.05em;
  }
  body #root .legal-document .legal-main h2 {
    color: var(--ink);
    font: 600 24px/1.4 Unbounded, sans-serif;
    letter-spacing: -.035em;
  }
  body #root .legal-document .legal-main :is(p, li) {
    font-size: 16px;
    line-height: 1.85;
  }
  body #root .legal-document .legal-main a { color: var(--harmony-blue); }
  body #root .legal-document :is(.legal-toc, .legal-main section) {
    border-color: var(--line);
  }
  body #root .cabinet {
    background: #fff;
    color: var(--ink);
  }
  body #root .cabinet :is(.cabinet-head h2, .cabinet-section h2) {
    color: var(--ink);
    font-family: Unbounded, sans-serif;
    letter-spacing: -.05em;
  }
  body #root .cabinet :is(.cabinet-panel, .cabinet-summary,
    .account-summary, .account-form, .cabinet-item) {
    border-color: var(--line);
    border-radius: 19px;
    box-shadow: none;
  }
  body #root .cabinet .primary-action {
    border-radius: 13px;
    background: var(--harmony-action);
    color: #fff;
    box-shadow: none;
  }

  /* Public content keeps the seller's accent and chosen QR-page theme. */
  body #root .public-catalog { color: var(--ink); }
  body #root .public-catalog .catalog-public-hero h1 {
    color: var(--ink);
    font: 600 clamp(28px, 3vw, 39px)/1.3 Unbounded, sans-serif;
    letter-spacing: -.05em;
  }
  body #root .public-catalog :is(.catalog-description, .catalog-result-count) {
    color: var(--muted);
  }
  body #root .public-catalog :is(.catalog-search-row input,
    .catalog-category-tabs button, .catalog-refine, .catalog-shared-selection) {
    border-radius: 12px;
    border-color: var(--line);
  }
  body #root .public-catalog .catalog-product-visual { border-radius: 17px; }
  body #root .public-catalog :is(.catalog-selection-bar, .cart-bar,
    .order-modal, .order-success, .catalog-repeat-review) {
    border-radius: 18px;
    box-shadow: none;
  }
  body #root .public-catalog :is(.catalog-products button, .cart-bar button,
    .cart-bar a, .order-modal .primary-action) { border-radius: 11px; }
  body #root .public-qr-page .qr-page-sheet {
    border-radius: 24px;
    box-shadow: 0 10px 32px #1720360a;
    border: 1px solid var(--line);
  }
  body #root .public-qr-page .qr-page-title {
    font-family: Unbounded, sans-serif;
    letter-spacing: -.05em;
  }
  body #root .public-qr-page:not(.public-qr-page--night)
    :is(.qr-page-sheet, .qr-page-title) { color: var(--ink); }
  body #root .public-qr-page--night .qr-page-sheet {
    border-color: #ffffff26;
  }
  body #root .public-qr-page :is(.qr-page-links a, .qr-page-vcard,
    .qr-page-send, .qr-page-form) { border-radius: 13px; box-shadow: none; }
  body #root .public-qr-page .qr-page-text { line-height: 1.8; }
  body #root :is(.passport-page, .place-guide) :is(h1, h2) {
    color: var(--ink);
    font-family: Unbounded, sans-serif;
    letter-spacing: -.045em;
  }
  body #root :is(.passport-page, .place-guide)
    :is(.passport-product, .passport-information, .passport-notebook-entry,
      .item-instructions, .place-object) {
    border-radius: 20px;
    border-color: var(--line);
    box-shadow: none;
  }
  body #root .passport-page .passport-actions :is(button, a) { border-radius: 11px; }
  body #root .saved-public-page .saved-public-intro h1 {
    color: var(--ink);
    font-family: Unbounded, sans-serif;
    letter-spacing: -.05em;
  }
  body #root .saved-public-page :is(.saved-public-card, .saved-public-empty) {
    border-radius: 19px;
    border-color: var(--line);
    box-shadow: none;
  }

  /* Standalone Mini App and embeds: no site navigation inside the work surface. */
  :root:not([data-theme="dark"]) .entry-app {
    --entry-paper: #fff;
    --entry-ink: #172036;
    --entry-muted: #667183;
    --entry-line: #e4e8ef;
    --entry-surface: #f5f6f8;
    --entry-orange: #e95a24;
    --entry-lime: #bad85f;
    --entry-cobalt: #2146a8;
  }
  .entry-app :is(.entry-form, .entry-task, .entry-scan, .entry-roll-result) {
    border-radius: 19px;
    box-shadow: none;
  }
  .entry-app :is(.entry-primary, .entry-field input, .entry-field textarea,
    .entry-form .code-download button) { border-radius: 11px; }
  :root:not([data-theme="dark"]) .entry-app .entry-primary {
    background: #ca441a;
  }
  :root:not([data-theme="dark"]) main:is([data-tool="qr-embed"],
    [data-tool="label-roll-embed"]) {
    --line: #e4e8ef;
    --field: #fff;
    --muted: #667183;
    --card: #f1f5e7;
    color: #172036;
    background: #fff;
  }
  main:is([data-tool="qr-embed"], [data-tool="label-roll-embed"])
    :is(input, select, button, .result) { border-radius: 11px; }
  :root:not([data-theme="dark"]) main:is([data-tool="qr-embed"],
    [data-tool="label-roll-embed"]) button {
    background: #ca441a;
    color: #fff;
    box-shadow: none;
  }
}

@media screen and (max-width: 900px) {
  body #root .seo-page .seo-content { padding-inline: 28px; }
  body #root .seo-page .seo-hero { gap: 24px; }
  body #root .seo-page .seo-hero h1 { font-size: 33px; }
  body #root .workspace-screen .manager-work-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  body #root .workspace-screen .manager-live-preview { position: static; }
}

@media screen and (max-width: 620px) {
  body #root .seo-page .seo-content { padding: 0 18px 32px; }
  body #root .seo-page .breadcrumbs { margin: 14px 0 12px; font-size: 11px; }
  body #root .seo-page .seo-hero {
    display: block;
    padding: 6px 0 20px;
  }
  body #root .seo-page .seo-hero h1 {
    font-size: 27px;
    line-height: 1.3;
    letter-spacing: -.045em;
  }
  body #root .seo-page :is(.seo-lead, .page-work-intro, .scanner-intro) {
    font-size: 14px;
    line-height: 1.65;
    margin-top: 12px;
  }
  body #root .seo-page[data-tool-page] .seo-hero-illustration { display: none; }
  body #root .seo-page .hero-actions { margin-top: 16px; gap: 8px 16px; }
  body #root .seo-page .acquisition-actions {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 20px;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 6px;
  }
  body #root .seo-page .acquisition-actions a:is(.primary-action, .paper-action) {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 10px 0;
    background: transparent;
    color: var(--harmony-blue);
    font-size: 12px;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 5px;
    box-shadow: none;
  }
  body #root .seo-page .hero-actions .primary-action {
    max-width: 100%;
    min-height: 46px;
    font-size: 13px;
  }
  body #root .seo-page :is(.page-local-nav, .scanner-page-nav) {
    gap: 0 16px;
    margin-bottom: 18px;
  }
  body #root .seo-page :is(.page-local-nav, .scanner-page-nav) a { font-size: 12px; }
  body #root .seo-page :is(.seo-tool, .seo-tool--camera) {
    padding: 18px;
    border-radius: 20px;
  }
  body #root .seo-page .seo-tool-head h2 { font-size: 21px; }
  body #root .seo-page :is(.page-disclosure-body, .scanner-disclosure-body) {
    padding: 18px 14px;
  }
  body #root .seo-page :is(.seo-chapter-main, .page-disclosure-body,
    .scanner-disclosure-body) :is(p, li) { font-size: 15px; line-height: 1.75; }
  body #root .seo-page :is(.page-section-heading, .scanner-section-heading,
    .seo-chapter-title, .seo-faq-rail) h2 { font-size: 22px; }
  body #root .seo-page--directory .tool-directory-heading { gap: 14px; margin: 10px 0 22px; }
  body #root .seo-page--directory .tool-directory-heading h1 { font-size: 28px; }
  body #root .seo-page--directory .tool-directory-card h3 { font-size: 15px; }
  body #root .scanner-page[data-scanner-page].seo-page .seo-tool--camera {
    padding: 14px;
    border-radius: 20px;
  }
  body #root .seo-page .scan-profile-router nav a {
    min-height: 76px;
    border-radius: 12px;
  }
  body #root .seo-page .scan-start { width: 100%; font-size: 15px; }
  body #root .scanner-page[data-scanner-page] .scan-actions .text-action {
    min-height: 44px;
    font-size: 13px;
  }
  body #root .workspace-screen .studio-section--compact { padding-top: 18px; }
  body #root :is(.workspace-screen, .vn-qr-screen)
    :is(.studio-heading, .qr-generator-heading, .collection-heading) :is(h1, h2) {
    font-size: 25px;
    line-height: 1.35;
  }
  body #root :is(.workspace-screen, .vn-qr-screen, .seo-tool--generator)
    :is(.qr-generator-grid, .tool-panel) {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  body #root :is(.workspace-screen, .vn-qr-screen, .page-studio-route)
    :is(.primary-action, .collection-create) { min-height: 46px; }
  body #root .workspace-screen :is(.label-preview, .phone-preview,
    .catalog-compose-preview) { border-radius: 19px; }
  body #root .utility-app .utility-hero.utility-entry {
    padding: 22px 18px 28px;
    gap: 24px;
  }
  body #root .utility-app .utility-entry h1 { font-size: 27px; line-height: 1.3; }
  body #root .utility-app .utility-entry .utility-hero-copy > p:not(.eyebrow) {
    font-size: 15px;
  }
  body #root .utility-app .utility-actions { gap: 10px; }
  body #root .utility-app .utility-actions button { min-height: 48px; font-size: 14px; }
  body #root .legal-document .legal-main { padding: 22px 18px 44px; }
  body #root .legal-document .legal-main h1 { font-size: 26px; line-height: 1.35; }
  body #root .legal-document .legal-main h2 { font-size: 21px; line-height: 1.45; }
  body #root .legal-document .legal-main :is(p, li) { font-size: 15px; line-height: 1.8; }
  body #root .public-catalog .catalog-public-hero h1 { font-size: 27px; }
  body #root .public-qr-page .qr-page-sheet { border-radius: 20px; }
  body #root :is(.seo-page, .utility-app, .workspace-screen, .vn-qr-screen,
    .cabinet, .page-studio-route, .saved-public-page, .passport-page)
    :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]), select, textarea) {
    font-size: 16px;
  }
}

@media screen and (max-width: 360px) {
  body #root .seo-page .seo-content { padding-inline: 14px; }
  body #root .seo-page .seo-hero h1 { font-size: 24px; }
  body #root .seo-page :is(.seo-tool, .seo-tool--camera) { padding: 14px; }
  body #root .seo-page--directory .tool-directory-heading h1 { font-size: 25px; }
  body #root .utility-app .utility-entry h1 { font-size: 24px; }
}

/* Section entrances: a useful first choice followed by the complete material. */
@media screen {
  body #root .seo-page .seo-hero h1 { hyphens: none; }
  body #root .sh-section-start { margin: 24px 0 48px; }
  body #root .sh-section-start-head { margin-bottom: 20px; }
  body #root .sh-section-start-head h2 {
    margin: 7px 0 10px;
    font: 600 clamp(22px, 2.2vw, 30px)/1.35 Unbounded, sans-serif;
    letter-spacing: -.045em;
    color: #172036;
  }
  body #root .sh-section-start-head p:last-child { color: #667183; line-height: 1.65; }
  body #root :is(.sh-task-grid, .sh-section-paths) { display: grid; gap: 16px; }
  body #root .sh-task-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body #root .sh-section-paths { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body #root .sh-task-card {
    position: relative; display: flex; flex-direction: column; gap: 22px;
    min-width: 0; min-height: 210px; padding: 22px;
    color: #172036; background: #f2f5fa; border: 1px solid transparent;
    border-radius: 24px; text-decoration: none;
    transition: background .18s ease, border-color .18s ease;
  }
  body #root .sh-task-card:hover { background: #ecf0f8; border-color: #c9d5ee; }
  body #root .sh-task-art { width: 90px; height: 80px; display: block; }
  body #root .sh-task-art svg { display: block; width: 100%; height: 100%; }
  body #root .sh-task-copy { display: grid; gap: 8px; margin-top: auto; }
  body #root .sh-task-copy b { font-size: 17px; line-height: 1.4; font-weight: 600; }
  body #root .sh-task-copy > span { color: #667183; font-size: 14px; line-height: 1.55; }
  body #root .sh-task-arrow { position: absolute; top: 22px; right: 22px; color: #8490a6; }
  body #root .seo-page .sh-section-visual { background: #f2f5fa; border-radius: 28px; }
  body #root .seo-page .sh-section-visual > svg { width: min(230px, 90%); height: 180px; }
  body #root .seo-page .sh-section-visual > span { color: #667183; font-size: 13px; line-height: 1.5; }
  body #root .seo-page--directory .tool-directory-heading { align-items: center; }
  body #root .seo-page--directory .sh-directory-intro { max-width: 68ch; color: #667183; line-height: 1.65; }
  body #root .sh-directory-start { grid-column: 1 / -1; margin: 18px 0 28px; }
  body #root .seo-page--directory .tool-directory-camera .camera-entry-link { border-radius: 12px; background: #2146a8; }
  body #root .seo-page--directory .tool-directory-routes button { border-radius: 24px; min-height: 44px; }
  body #root .seo-page--directory .tool-directory-routes button.is-active { background: #172036; color: white; border-color: #172036; }
  body #root [data-directory-filtered="true"] .sh-directory-start { display: none; }
  body #root .is-work-directory .sh-directory-intro { display: none; }
  body #root .seo-page--directory .tool-directory-group-heading {
    display: grid; grid-template-columns: 76px minmax(0, 1fr) auto 24px;
    align-items: center; gap: 20px; padding: 20px 8px;
  }
  body #root .sh-group-art { width: 76px; height: 70px; display: block; }
  body #root .sh-group-art svg { width: 100%; height: 100%; display: block; }
  body #root .sh-group-copy { display: grid; gap: 7px; }
  body #root .sh-group-copy > span { font-size: 14px; color: #667183; line-height: 1.5; }
  body #root .sh-group-count { color: #2146a8; background: #edf1fa; border-radius: 20px; min-width: 34px; padding: 7px; text-align: center; font-size: 13px; }
  body #root .seo-page .sh-hub-featured { gap: 18px; margin-bottom: 32px; }
  body #root .seo-page .sh-hub-featured-card { padding: 18px; background: #f2f5fa; border-radius: 24px; }
  body #root .seo-page .sh-hub-featured-card a { padding: 0; background: transparent; }
  body #root .seo-page .sh-hub-featured-card .page-route-card-note { margin: 12px 0 0; color: #667183; line-height: 1.6; font-size: 14px; }
  body #root .seo-page .sh-hub-section { margin: 14px 0; }
  body #root .seo-page .ready-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  body #root .seo-page .ready-grid > article { background: #f5f6f8; border-radius: 26px; border: 0; overflow: hidden; }
  body #root .seo-page .ready-art { background: #edf1fa; border: 0; }
  body #root .seo-page .ready-copy { padding: 24px; }
  body #root .seo-page .ready-copy h3 { font: 600 20px/1.45 Unbounded, sans-serif; letter-spacing: -.045em; }
  body #root .seo-page .ready-primary { min-height: 46px; padding: 14px 18px; background: #ca441a; color: white; border-radius: 12px; }
  body #root .seo-page .ready-task-nav a { min-height: 44px; padding: 12px 18px; border-radius: 28px; background: #f5f6f8; }

  /* Local collections distinguish authoring, publication and saved public links. */
  body #root .hw-collection-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; margin-bottom: 26px; }
  body #root .hw-kicker { color: #2146a8; font-size: 11px; line-height: 1.65; letter-spacing: .08em; text-transform: uppercase; }
  body #root .hw-intro { max-width: 64ch; color: #667183; font-size: 15px; line-height: 1.7; margin: 12px 0 0; }
  body #root .hw-collection-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-top: 18px; }
  body #root .hw-collection-actions > a { color: #2146a8; line-height: 1.55; min-height: 44px; display: inline-flex; align-items: center; gap: 12px; }
  body #root .hw-empty-state { display: flex; align-items: center; gap: 32px; padding: 32px; border: 0; border-radius: 26px; background: #f2f5fa; text-align: left; }
  body #root .hw-empty-art { flex: 0 0 120px; width: 120px; height: 96px; position: static; margin: 0; padding: 0; background: transparent; transform: none; }
  body #root .hw-empty-art svg { width: 100%; height: 100%; display: block; }
  body #root .hw-empty-copy { min-width: 0; max-width: 64ch; }
  body #root .saved-public-empty .hw-empty-copy { display: block; }
  body #root .hw-empty-copy > :is(b, h2) { display: block; font: 600 22px/1.4 Unbounded, sans-serif; letter-spacing: -.045em; margin: 0 0 12px; }
  body #root .hw-empty-copy p { color: #667183; font-size: 15px; line-height: 1.75; }
  body #root .hw-empty-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 20px; }
  body #root .hw-empty-actions a { color: #2146a8; line-height: 1.5; min-height: 44px; display: inline-flex; align-items: center; }
  body #root .saved-public-empty .hw-empty-actions a { background: #2146a8; color: white; border-radius: 12px; }
  body #root .hw-restore-box { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: min(380px, 100%); flex-shrink: 0; padding: 20px; border: 0; background: #f5f6f8; border-radius: 20px; }
  body #root .hw-restore-box label { display: grid; gap: 6px; min-width: 0; font-size: 13px; color: #667183; }
  body #root .hw-restore-box input { width: 100%; min-width: 0; min-height: 44px; }
  body #root .hw-library-intro { color: #667183; max-width: 72ch; line-height: 1.7; margin-bottom: 24px; }
  body #root .hw-library-intro nav { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 12px; }
  body #root .hw-library-intro a { color: #2146a8; min-height: 44px; display: inline-flex; align-items: center; }
  body #root .hw-library-empty { display: flex; align-items: center; gap: 24px; padding: 26px; border-radius: 22px; background: #f2f5fa; margin-top: 20px; }
  body #root .hw-library-empty[hidden] { display: none; }
  body #root .hw-library-empty-mark { display: block; width: 96px; flex: 0 0 96px; }
  body #root .hw-library-empty-mark svg { width: 100%; display: block; }
  body #root .hw-library-empty p { color: #667183; line-height: 1.65; }

  /* This dialog is mounted beside #root, so it needs the same screen palette. */
  body > .work-overview { color: #172036; background: white; border: 1px solid #e4e8ef; border-radius: 24px; padding: 26px; width: min(720px, calc(100% - 24px)); font-family: Onest, sans-serif; }
  body > .work-overview h2 { font: 600 26px/1.4 Unbounded, sans-serif; letter-spacing: -.045em; }
  body > .work-overview :is(button, input, select, textarea) { font-family: Onest, sans-serif; min-height: 44px; border-radius: 10px; }
  body > .work-overview :focus-visible { outline: 3px solid #2146a8; outline-offset: 3px; }
}
@media screen and (max-width: 900px) {
  body #root .sh-task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body #root .hw-collection-intro { flex-wrap: wrap; gap: 20px; }
  body #root .hw-restore-box { width: 100%; }
}
@media screen and (max-width: 650px) {
  body #root .sh-section-start { margin: 18px 0 32px; }
  body #root .sh-section-paths { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  body #root .sh-section-paths .sh-task-card { min-height: 100px; display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 14px; align-items: center; padding: 18px; }
  body #root .sh-section-paths .sh-task-art { width: 64px; height: 64px; }
  body #root .sh-section-paths .sh-task-copy { padding-right: 15px; margin: 0; }
  body #root .sh-task-grid { gap: 12px; }
  body #root .sh-task-grid .sh-task-card { padding: 16px; min-height: 208px; gap: 18px; border-radius: 20px; }
  body #root .sh-task-copy b { font-size: 15px; }
  body #root .sh-task-copy > span { font-size: 13px; }
  body #root .sh-task-arrow { top: 16px; right: 16px; }
  body #root .seo-page--directory .tool-directory-group-heading { grid-template-columns: 50px minmax(0, 1fr) auto 18px; gap: 10px; padding: 17px 0; }
  body #root .sh-group-art { width: 50px; height: 54px; }
  body #root .sh-group-copy h2 { font-size: 17px; }
  body #root .sh-group-copy > span { font-size: 12px; }
  body #root .sh-group-count { min-width: 28px; font-size: 12px; padding: 5px; }
  body #root .seo-page .ready-grid { grid-template-columns: minmax(0, 1fr); }
  body #root .seo-page .ready-copy { padding: 20px; }
  body #root .seo-page .ready-copy h3 { font-size: 19px; }
  body #root .hw-collection-intro { gap: 12px; margin-bottom: 20px; }
  body #root .hw-intro { font-size: 14px; line-height: 1.65; }
  body #root .hw-empty-state { padding: 22px 18px; gap: 18px; align-items: flex-start; flex-direction: column; }
  body #root .hw-empty-art { width: 86px; height: 68px; flex-basis: auto; }
  body #root .hw-empty-copy > :is(b, h2) { font-size: 20px; }
  body #root .hw-empty-actions { align-items: stretch; flex-direction: column; gap: 10px; margin-top: 16px; }
  body #root .hw-library-empty { padding: 20px; gap: 16px; flex-direction: column; align-items: flex-start; }
  body #root .hw-library-empty-mark { flex-basis: auto; width: 72px; }
  body > .work-overview { padding: 20px 16px; }
  body > .work-overview h2 { font-size: 22px; }
  body > .work-overview :is(input, select, textarea) { font-size: 16px; }
}