/* Zahren 0.17.7 · configurable visual contract
   This layer never changes geometry between themes. It only maps the
   persisted semantic palette to stable CSS variables and shared components. */

:root,
html[data-theme="light"] {
  --zv-background: #f4f7f9;
  --zv-surface: #ffffff;
  --zv-card: #ffffff;
  --zv-card-alt: #edf3f6;
  --zv-text: #132637;
  --zv-muted: #607486;
  --zv-border: #d3dee6;
  --zv-accent: #d6192e;
  --zv-hover: #e8f0f4;
  --zv-success: #008f5a;
  --zv-warning: #d98500;
  --zv-danger: #e32439;
  --zv-info: #086fe8;
  --zv-status-picking: #d61932;
  --zv-status-waiting-parts: #e08a00;
  --zv-status-programming: #086fe8;
  --zv-status-finalized: #008f5a;
  --zv-status-production: #245edb;
  --zv-status-hygiene: #008e9c;
  --zv-status-removed: #c43a52;
  --zv-status-other: #607d9e;
  --zv-occurrence-repaired: #008f5a;
  --zv-occurrence-returned: #6e46d9;
  --zv-occurrence-no-repair: #d98500;
  --zv-occurrence-divergence: #e32439;
  --zv-occurrence-doa: #8050d1;
  --zv-occurrence-exchange-new: #008e9c;
  --zv-occurrence-missing-product: #c85c24;
  --zv-occurrence-rejected: #b91c3c;
  --zv-occurrence-other: #607d9e;
  --zv-primary-card-background: #ffffff;
  --zv-primary-card-title: #17364b;
  --zv-primary-card-text: #536a78;
  --zv-primary-card-value: #132637;
  --zv-primary-card-icon: #086fe8;
  --zv-primary-card-border: #cbd8e0;
  --zv-primary-card-hover: #dceeff;
  --zv-primary-card-selected: #e7f1ff;
  --zv-secondary-card-background: #f9fbfc;
  --zv-secondary-card-title: #244556;
  --zv-secondary-card-text: #607486;
  --zv-secondary-card-value: #17364b;
  --zv-secondary-card-icon: #008e9c;
  --zv-secondary-card-border: #d7e1e7;
  --zv-secondary-card-hover: #e4f4f5;
  --zv-secondary-card-selected: #e7f7f1;
  --zv-focus-ring: #086fe8;
  --zv-locked-background: #eef2f5;
  --zv-locked-border: #607d9e;
  --zv-locked-text: #405766;
  --zv-button-primary-bg: #d6192e;
  --zv-button-primary-text: #ffffff;
  --zv-button-secondary-bg: #086fe8;
  --zv-button-secondary-text: #ffffff;
  --zv-button-excel-bg: #008f5a;
  --zv-button-excel-text: #ffffff;
  --zv-tag-background: #f5f8fa;
  --zv-tag-text: #17364b;
  --zv-tag-border: #cbd8e0;
  --zv-drawer-background: #ffffff;
  --zv-drawer-panel: #f8fafb;
  --zv-drawer-title: #064fba;
  --zv-drawer-text: #17364b;
  --zv-drawer-border: #cbd8e0;
  --zv-drawer-tab-active: #d6192e;
  --zv-chart-1: #e32439;
  --zv-chart-2: #086fe8;
  --zv-chart-3: #008f5a;
  --zv-chart-4: #d98500;
  --zv-chart-5: #6e46d9;
  --zv-chart-6: #008e9c;
  --zv-chart-7: #607d9e;
  --zv-chart-8: #c86a2c;
  --zv-chart-grid: #d8e2e8;
  --zv-chart-label: #607486;
  --zv-donut-center: #ffffff;
  --zv-donut-center-text: #132637;
}

/* 0.18.1 · fechamento operacional: seleção em massa, contadores uniformes,
   identidade escura preservada e tags totalmente configuráveis. */
@media screen {
  html[data-theme] body #page .pendency-mass-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto auto auto;
    gap: 9px;
    align-items: center;
    margin: 12px 0;
    border: 1px solid var(--zv-border);
    border-left: 3px solid var(--zv-info);
    border-radius: 10px;
    background: var(--zv-surface);
    padding: 11px 13px;
  }
  html[data-theme] body #page .pendency-mass-toolbar > div {
    display: grid;
    gap: 2px;
  }
  html[data-theme] body #page .pendency-mass-toolbar > div span {
    color: var(--zv-muted);
    font-size: 10px;
  }
  html[data-theme] body #page .pendency-mass-toolbar.active {
    border-left-color: var(--zv-status-programming);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--zv-status-programming) 12%, transparent);
  }
  html[data-theme] body #page .pendency-table .check-cell {
    width: 42px;
    text-align: center;
  }

  html[data-theme] body #page .batch-status-counts {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(64px, 1fr)) !important;
    width: 100% !important;
    gap: 6px !important;
  }
  html[data-theme] body #page .batch-status-counts > span {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 18px 11px !important;
    align-content: center !important;
    justify-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    padding: 5px 7px !important;
  }
  html[data-theme] body #page .batch-status-counts > span b {
    font-size: 14px !important;
    line-height: 18px !important;
  }
  html[data-theme] body #page .batch-status-counts > span em {
    overflow: hidden !important;
    width: 100% !important;
    font-size: 8px !important;
    line-height: 11px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body .auth-brand .brand-mark img {
    width: 112% !important;
    height: 112% !important;
    max-width: none !important;
    object-fit: contain !important;
    transform: translate(-6%, -6%) !important;
  }

  html[data-theme] body #page .ptn-indicator-grid > button {
    --card-tone: var(--zv-info) !important;
  }
  html[data-theme] body #page .ptn-indicator-grid > button.tone-red {
    --card-tone: var(--zv-status-picking) !important;
  }
  html[data-theme] body #page .ptn-indicator-grid > button.tone-amber,
  html[data-theme] body #page .ptn-indicator-grid > button.tone-orange {
    --card-tone: var(--zv-status-waiting-parts) !important;
  }
  html[data-theme] body #page .ptn-indicator-grid > button.tone-purple {
    --card-tone: var(--zv-occurrence-returned) !important;
  }
  html[data-theme] body #page .ptn-indicator-grid > button.tone-teal {
    --card-tone: var(--zv-status-hygiene) !important;
  }
  html[data-theme] body #page .ptn-indicator-grid > button.tone-green {
    --card-tone: var(--zv-status-finalized) !important;
  }
  html[data-theme="dark"] body #page .ptn-indicator-grid > button {
    border-color: color-mix(in srgb, var(--card-tone) 66%, var(--zv-border)) !important;
    border-left-color: var(--card-tone) !important;
    background: linear-gradient(128deg,
      color-mix(in srgb, var(--card-tone) 27%, var(--zv-card)) 0%,
      color-mix(in srgb, var(--card-tone) 12%, var(--zv-card)) 44%,
      var(--zv-card) 100%) !important;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--card-tone) 17%, transparent) !important;
  }

  html[data-theme] body [data-visual-semantic="status_picking"] { --semantic-tag-bg: var(--zv-status-picking-tag-background); --semantic-tag-text: var(--zv-status-picking-tag-text); --semantic-tag-border: var(--zv-status-picking-tag-border); --semantic-tag-size: var(--zv-status-picking-tag-font-size); }
  html[data-theme] body [data-visual-semantic="status_waiting_parts"] { --semantic-tag-bg: var(--zv-status-waiting-parts-tag-background); --semantic-tag-text: var(--zv-status-waiting-parts-tag-text); --semantic-tag-border: var(--zv-status-waiting-parts-tag-border); --semantic-tag-size: var(--zv-status-waiting-parts-tag-font-size); }
  html[data-theme] body [data-visual-semantic="status_programming"] { --semantic-tag-bg: var(--zv-status-programming-tag-background); --semantic-tag-text: var(--zv-status-programming-tag-text); --semantic-tag-border: var(--zv-status-programming-tag-border); --semantic-tag-size: var(--zv-status-programming-tag-font-size); }
  html[data-theme] body [data-visual-semantic="status_finalized"] { --semantic-tag-bg: var(--zv-status-finalized-tag-background); --semantic-tag-text: var(--zv-status-finalized-tag-text); --semantic-tag-border: var(--zv-status-finalized-tag-border); --semantic-tag-size: var(--zv-status-finalized-tag-font-size); }
  html[data-theme] body [data-visual-semantic="status_production"] { --semantic-tag-bg: var(--zv-status-production-tag-background); --semantic-tag-text: var(--zv-status-production-tag-text); --semantic-tag-border: var(--zv-status-production-tag-border); --semantic-tag-size: var(--zv-status-production-tag-font-size); }
  html[data-theme] body [data-visual-semantic="status_hygiene"] { --semantic-tag-bg: var(--zv-status-hygiene-tag-background); --semantic-tag-text: var(--zv-status-hygiene-tag-text); --semantic-tag-border: var(--zv-status-hygiene-tag-border); --semantic-tag-size: var(--zv-status-hygiene-tag-font-size); }
  html[data-theme] body [data-visual-semantic="status_removed"] { --semantic-tag-bg: var(--zv-status-removed-tag-background); --semantic-tag-text: var(--zv-status-removed-tag-text); --semantic-tag-border: var(--zv-status-removed-tag-border); --semantic-tag-size: var(--zv-status-removed-tag-font-size); }
  html[data-theme] body [data-visual-semantic="status_other"] { --semantic-tag-bg: var(--zv-status-other-tag-background); --semantic-tag-text: var(--zv-status-other-tag-text); --semantic-tag-border: var(--zv-status-other-tag-border); --semantic-tag-size: var(--zv-status-other-tag-font-size); }
  html[data-theme] body [data-visual-semantic="occurrence_repaired"] { --semantic-tag-bg: var(--zv-occurrence-repaired-tag-background); --semantic-tag-text: var(--zv-occurrence-repaired-tag-text); --semantic-tag-border: var(--zv-occurrence-repaired-tag-border); --semantic-tag-size: var(--zv-occurrence-repaired-tag-font-size); }
  html[data-theme] body [data-visual-semantic="occurrence_returned"] { --semantic-tag-bg: var(--zv-occurrence-returned-tag-background); --semantic-tag-text: var(--zv-occurrence-returned-tag-text); --semantic-tag-border: var(--zv-occurrence-returned-tag-border); --semantic-tag-size: var(--zv-occurrence-returned-tag-font-size); }
  html[data-theme] body [data-visual-semantic="occurrence_no_repair"] { --semantic-tag-bg: var(--zv-occurrence-no-repair-tag-background); --semantic-tag-text: var(--zv-occurrence-no-repair-tag-text); --semantic-tag-border: var(--zv-occurrence-no-repair-tag-border); --semantic-tag-size: var(--zv-occurrence-no-repair-tag-font-size); }
  html[data-theme] body [data-visual-semantic="occurrence_divergence"] { --semantic-tag-bg: var(--zv-occurrence-divergence-tag-background); --semantic-tag-text: var(--zv-occurrence-divergence-tag-text); --semantic-tag-border: var(--zv-occurrence-divergence-tag-border); --semantic-tag-size: var(--zv-occurrence-divergence-tag-font-size); }
  html[data-theme] body [data-visual-semantic="occurrence_doa"] { --semantic-tag-bg: var(--zv-occurrence-doa-tag-background); --semantic-tag-text: var(--zv-occurrence-doa-tag-text); --semantic-tag-border: var(--zv-occurrence-doa-tag-border); --semantic-tag-size: var(--zv-occurrence-doa-tag-font-size); }
  html[data-theme] body [data-visual-semantic="occurrence_exchange_new"] { --semantic-tag-bg: var(--zv-occurrence-exchange-new-tag-background); --semantic-tag-text: var(--zv-occurrence-exchange-new-tag-text); --semantic-tag-border: var(--zv-occurrence-exchange-new-tag-border); --semantic-tag-size: var(--zv-occurrence-exchange-new-tag-font-size); }
  html[data-theme] body [data-visual-semantic="occurrence_missing_product"] { --semantic-tag-bg: var(--zv-occurrence-missing-product-tag-background); --semantic-tag-text: var(--zv-occurrence-missing-product-tag-text); --semantic-tag-border: var(--zv-occurrence-missing-product-tag-border); --semantic-tag-size: var(--zv-occurrence-missing-product-tag-font-size); }
  html[data-theme] body [data-visual-semantic="occurrence_rejected"] { --semantic-tag-bg: var(--zv-occurrence-rejected-tag-background); --semantic-tag-text: var(--zv-occurrence-rejected-tag-text); --semantic-tag-border: var(--zv-occurrence-rejected-tag-border); --semantic-tag-size: var(--zv-occurrence-rejected-tag-font-size); }
  html[data-theme] body [data-visual-semantic="occurrence_other"] { --semantic-tag-bg: var(--zv-occurrence-other-tag-background); --semantic-tag-text: var(--zv-occurrence-other-tag-text); --semantic-tag-border: var(--zv-occurrence-other-tag-border); --semantic-tag-size: var(--zv-occurrence-other-tag-font-size); }
  html[data-theme] body .tag[data-visual-semantic] {
    border-color: var(--semantic-tag-border) !important;
    background: var(--semantic-tag-bg) !important;
    color: var(--semantic-tag-text) !important;
    font-size: var(--semantic-tag-size, 10px) !important;
  }
}

@media (max-width: 980px) {
  html[data-theme] body #page .pendency-mass-toolbar {
    grid-template-columns: 1fr 1fr;
  }
  html[data-theme] body #page .pendency-mass-toolbar > div {
    grid-column: 1 / -1;
  }
}

/* 0.18.1 · acabamento executivo final: login, cards escuros e geometria comum. */
@media screen {
  html[data-theme] body #page .ptn-indicator-grid > button {
    --card-tone: var(--zv-blue);
    color: var(--zv-text) !important;
  }
  html[data-theme] body #page .ptn-indicator-grid > button.tone-red { --card-tone: var(--zv-red); }
  html[data-theme] body #page .ptn-indicator-grid > button.tone-amber,
  html[data-theme] body #page .ptn-indicator-grid > button.tone-orange { --card-tone: var(--zv-amber); }
  html[data-theme] body #page .ptn-indicator-grid > button.tone-purple { --card-tone: var(--zv-purple); }
  html[data-theme] body #page .ptn-indicator-grid > button.tone-teal { --card-tone: var(--zv-teal); }
  html[data-theme] body #page .ptn-indicator-grid > button.tone-green { --card-tone: var(--zv-green); }
  html[data-theme="light"] body #page .ptn-indicator-grid > button {
    border-color: color-mix(in srgb, var(--card-tone) 52%, var(--zv-border)) !important;
    background: linear-gradient(112deg, color-mix(in srgb, var(--card-tone) 8%, #fff), #fff 62%) !important;
  }
  html[data-theme="dark"] body #page .ptn-indicator-grid > button {
    border-color: color-mix(in srgb, var(--card-tone) 58%, var(--zv-border)) !important;
    background: linear-gradient(112deg, color-mix(in srgb, var(--card-tone) 22%, var(--zv-card)), var(--zv-card) 70%) !important;
  }
  html[data-theme] body #page .ptn-indicator-grid > button :is(span, em) {
    color: var(--card-tone) !important;
  }
  html[data-theme] body #page .ptn-indicator-grid > button :is(strong, small) {
    color: var(--zv-text) !important;
  }
  html[data-theme] body #page .ptn-indicator-icon {
    border-color: color-mix(in srgb, var(--card-tone) 54%, var(--zv-border)) !important;
    background: color-mix(in srgb, var(--card-tone) 10%, transparent) !important;
    color: var(--card-tone) !important;
  }
  html[data-theme] body #page .ptn-indicator-icon :is(svg, path, circle, rect, line, polyline) {
    color: inherit !important;
    stroke: currentColor !important;
  }
  html[data-theme] body #page :is(.program-status-grid-primary, .program-occurrence-grid) {
    gap: 10px !important;
  }
  html[data-theme] body #page .program-status-counter {
    overflow: hidden !important;
  }
  html[data-theme] body #page .program-status-counter > div {
    padding-right: 4px !important;
  }
  html[data-theme] body #page .program-status-counter span {
    display: block !important;
    white-space: normal !important;
  }
  html[data-theme] body #page .program-status-counter > strong {
    max-width: 45% !important;
    font-variant-numeric: tabular-nums;
  }
}

@media screen {
  html body .auth-screen {
    padding: 28px !important;
    background:
      radial-gradient(circle at 72% 14%, rgb(225 29 52 / .22), transparent 28%),
      radial-gradient(circle at 18% 74%, rgb(23 105 243 / .26), transparent 34%),
      linear-gradient(135deg, #020817 0%, #08142b 45%, #140711 100%) !important;
  }
  html body .auth-card {
    display: grid !important;
    grid-template-columns: minmax(250px, .9fr) minmax(330px, 1.1fr) !important;
    width: min(790px, 100%) !important;
    min-height: 500px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgb(105 148 218 / .28) !important;
    border-radius: 22px !important;
    background: #080e1b !important;
    background-image: none !important;
    color: #f6f8ff !important;
    box-shadow: 0 32px 95px rgb(0 0 0 / .58), 0 0 70px rgb(225 29 52 / .10) !important;
  }
  html body .auth-visual {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: center;
    min-width: 0;
    padding: 42px 28px;
    overflow: hidden;
    background:
      radial-gradient(circle at 14% 22%, rgb(33 126 255 / .24), transparent 26%),
      linear-gradient(145deg, #06152f 0%, #07111f 58%, #0b0d19 100%);
  }
  html body .auth-visual::after {
    content: "Z";
    position: absolute;
    inset: auto auto 18px -8px;
    color: rgb(35 111 224 / .055);
    font-size: 230px;
    font-weight: 950;
    line-height: .8;
    transform: skewX(-9deg);
  }
  html body .auth-visual-glow {
    position: absolute;
    z-index: 0;
    top: -12%;
    right: -27px;
    width: 60px;
    height: 124%;
    border-radius: 50%;
    background: #147cff;
    box-shadow: 0 0 16px #1c8fff, 0 0 42px rgb(28 143 255 / .82), 0 0 80px rgb(28 143 255 / .4);
    filter: blur(1px);
  }
  html body .auth-visual-glow::after {
    content: "";
    position: absolute;
    inset: 10% -30px;
    border-radius: 50%;
    background: rgb(234 28 48 / .22);
    box-shadow: 0 0 70px #e31c37;
    filter: blur(18px);
  }
  html body .auth-brand {
    position: relative;
    z-index: 1;
    display: grid !important;
    justify-items: center;
    gap: 14px !important;
    text-align: center;
  }
  html body .auth-brand .brand-mark {
    width: 88px !important;
    height: 88px !important;
    padding: 12px !important;
    border: 1px solid rgb(255 255 255 / .25) !important;
    border-radius: 20px !important;
    background: rgb(255 255 255 / .94) !important;
    box-shadow: 0 0 28px rgb(39 130 255 / .45) !important;
  }
  html body .auth-brand strong { color: #fff !important; font-size: 27px !important; }
  html body .auth-brand span { color: #93a8c9 !important; letter-spacing: .16em; text-transform: uppercase; }
  html body .auth-developer {
    position: absolute;
    z-index: 1;
    right: 24px;
    bottom: 27px;
    left: 24px;
    display: grid;
    gap: 2px;
    color: #8ca3c9;
    font-size: 11px;
  }
  html body .auth-developer strong { color: #e9effc; font-size: 13px; }
  html body .auth-access {
    display: grid;
    align-content: center;
    padding: 52px 48px;
    background:
      radial-gradient(circle at 100% 0%, rgb(225 29 52 / .12), transparent 31%),
      linear-gradient(145deg, #0d1423, #090d16) !important;
  }
  html body .auth-access .eyebrow { color: #ff3349 !important; }
  html body .auth-access h1 { margin: 9px 0 7px !important; color: #fff !important; font-size: 29px !important; }
  html body .auth-access p { color: #93a0b6 !important; }
  html body .auth-form { margin-top: 25px !important; gap: 16px !important; }
  html body .auth-form label { color: #c3cbe0 !important; }
  html body .auth-form input {
    height: 44px !important;
    border-color: #26334c !important;
    background: #111827 !important;
    color: #fff !important;
  }
  html body .auth-form input:focus {
    border-color: #1f79ff !important;
    box-shadow: 0 0 0 3px rgb(31 121 255 / .18) !important;
  }
  html body .auth-form .btn-primary {
    width: 100% !important;
    min-height: 44px !important;
    margin-top: 8px !important;
    color: #fff !important;
    background: linear-gradient(100deg, #e2102d, #ff2942) !important;
    box-shadow: 0 10px 25px rgb(226 16 45 / .28) !important;
  }
  html body .auth-error { color: #ff5b6d !important; }
}
@media (max-width: 700px) {
  html body .auth-screen { padding: 14px !important; }
  html body .auth-card { grid-template-columns: 1fr !important; }
  html body .auth-visual { min-height: 190px; padding: 28px 20px 52px; }
  html body .auth-visual-glow { top: auto; right: -8%; bottom: -25px; width: 115%; height: 40px; }
  html body .auth-brand { grid-template-columns: auto 1fr; justify-items: start; text-align: left; }
  html body .auth-brand .brand-mark { width: 58px !important; height: 58px !important; }
  html body .auth-developer { bottom: 13px; }
  html body .auth-access { padding: 34px 24px 40px; }
}

/* 0.17.9 · ações compactas de Picking e remoção dos filtros globais
   duplicados. Busca e Linha vivem somente no cabeçalho superior. */
@media screen {
  html[data-theme] body #page .ptn-specific-filters {
    grid-template-columns: minmax(230px, 1fr) minmax(230px, 1fr) minmax(180px, .7fr) !important;
    align-items: end !important;
  }

  html[data-theme] body .picking-profile-modal {
    position: fixed !important;
    z-index: 1600 !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    overflow: auto !important;
    padding: 28px !important;
    background: color-mix(in srgb, #07131d 72%, transparent) !important;
    backdrop-filter: blur(9px) !important;
  }
  html[data-theme] body .picking-profile-modal > section {
    width: min(940px, 100%) !important;
    max-height: min(820px, calc(100vh - 56px)) !important;
    overflow: auto !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 16px !important;
    background: var(--zv-surface) !important;
    background-image: none !important;
    color: var(--zv-text) !important;
    box-shadow: 0 26px 80px color-mix(in srgb, #07131d 40%, transparent) !important;
  }
  html[data-theme] body .picking-profile-head {
    position: sticky !important;
    z-index: 2 !important;
    top: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 20px !important;
    border-bottom: 1px solid var(--zv-border) !important;
    padding: 22px 24px 18px !important;
    background: var(--zv-surface) !important;
  }
  html[data-theme] body .picking-profile-head h2 {
    margin: 4px 0 5px !important;
    color: var(--zv-text) !important;
    font-size: 22px !important;
  }
  html[data-theme] body .picking-profile-head p {
    margin: 0 !important;
    color: var(--zv-muted) !important;
  }
  html[data-theme] body .picking-profile-head > button {
    display: grid !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    place-items: center !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 10px !important;
    background: var(--zv-card) !important;
    color: var(--zv-text) !important;
    font-size: 24px !important;
    cursor: pointer !important;
  }
  html[data-theme] body .picking-profile-modal form {
    display: grid !important;
    gap: 20px !important;
    padding: 22px 24px 24px !important;
  }
  html[data-theme] body .picking-profile-modal form > div > h3 {
    margin: 0 0 12px !important;
    color: var(--zv-text) !important;
    font-size: 14px !important;
  }
  html[data-theme] body .picking-profile-modal .permission-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }
  html[data-theme] body .picking-profile-modal .permission-grid label {
    display: flex !important;
    min-height: 42px !important;
    align-items: center !important;
    gap: 9px !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 9px !important;
    padding: 9px 11px !important;
    background: var(--zv-card) !important;
    color: var(--zv-text) !important;
    font-weight: 750 !important;
  }
  html[data-theme] body .picking-profile-modal .fixed-columns-note {
    display: grid !important;
    gap: 5px !important;
    border-left: 4px solid var(--zv-accent) !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    background: color-mix(in srgb, var(--zv-accent) 7%, var(--zv-card)) !important;
  }
  html[data-theme] body .picking-profile-modal .fixed-columns-note span {
    color: var(--zv-muted) !important;
  }
  html[data-theme] body .picking-profile-actions {
    position: sticky !important;
    bottom: -24px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    border-top: 1px solid var(--zv-border) !important;
    margin: 0 -24px -24px !important;
    padding: 16px 24px !important;
    background: var(--zv-surface) !important;
  }

  /* A carteira sempre conserva rolagem horizontal para acessar todos os cards. */
  html[data-theme] body #page .picking-client-summary {
    overflow: hidden !important;
  }
  html[data-theme] body #page .client-picking-cards {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    padding: 6px 5px 13px !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: auto !important;
    scrollbar-color: color-mix(in srgb, var(--zv-accent) 58%, var(--zv-muted)) var(--zv-border) !important;
  }
  html[data-theme] body #page .client-picking-cards > button {
    flex: 0 0 clamp(250px, 23vw, 330px) !important;
    scroll-snap-align: start !important;
  }
  html[data-theme] body #page .client-picking-cards::-webkit-scrollbar { height: 10px !important; }
  html[data-theme] body #page .client-picking-cards::-webkit-scrollbar-track {
    border-radius: 999px !important;
    background: var(--zv-border) !important;
  }
  html[data-theme] body #page .client-picking-cards::-webkit-scrollbar-thumb {
    border: 2px solid var(--zv-border) !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--zv-accent) 68%, var(--zv-muted)) !important;
  }
}

@media (max-width: 760px) {
  html[data-theme] body #page .ptn-specific-filters,
  html[data-theme] body .picking-profile-modal .permission-grid {
    grid-template-columns: 1fr !important;
  }
  html[data-theme] body .picking-profile-modal { padding: 10px !important; }
  html[data-theme] body .picking-profile-modal > section { max-height: calc(100vh - 20px) !important; }
  html[data-theme] body .picking-profile-actions { flex-direction: column-reverse !important; }
  html[data-theme] body .picking-profile-actions .btn { width: 100% !important; }
}

/* 0.17.8 · acabamento dos filtros cumulativos e dos lotes de programação.
   Esta regra fica por último de propósito: neutraliza somente os cartões de
   lote e mantém o espelho semântico em hover/seleção nos demais cartões. */
@media screen {
  html[data-theme] body #page :is(
    .snapshot-cards, .client-picking-cards, .ptn-indicator-grid,
    .program-summary-primary, .program-status-grid, .batch-grid
  ) {
    gap: 9px !important;
    padding: 4px !important;
  }

  html[data-theme] body #page .locked-filter-card[aria-pressed="true"] {
    border-color: var(--card-tone) !important;
    outline: 2px solid color-mix(in srgb, var(--card-tone) 76%, transparent) !important;
    outline-offset: 1px !important;
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--card-tone) 58%, transparent),
      0 12px 28px color-mix(in srgb, var(--card-tone) 24%, transparent),
      inset 0 0 0 1px color-mix(in srgb, var(--card-tone) 38%, transparent) !important;
  }

  html[data-theme] body #page :is(.program-counter, .program-status-counter) {
    border-color: color-mix(in srgb, var(--card-tone) 48%, var(--zv-border)) !important;
    background:
      linear-gradient(135deg,
        color-mix(in srgb, var(--card-tone) 24%, var(--zv-card)) 0%,
        color-mix(in srgb, var(--card-tone) 10%, var(--zv-card)) 48%,
        var(--zv-card) 100%) !important;
  }
  html[data-theme] body #page .program-status-lines {
    display: block;
    margin-top: 2px;
    color: var(--zv-muted) !important;
    font-size: 8px !important;
    font-weight: 750;
    white-space: nowrap;
  }

  html[data-theme] body #page .batch-grid {
    grid-template-columns: repeat(3, minmax(285px, 1fr)) !important;
    align-items: stretch;
  }
  html[data-theme] body #page .batch-card,
  html[data-theme] body #page .batch-card.is-running,
  html[data-theme] body #page .batch-card.draft {
    min-height: 0 !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 10px !important;
    background: var(--zv-card) !important;
    background-image: none !important;
    box-shadow: 0 5px 14px color-mix(in srgb, var(--zv-text) 7%, transparent) !important;
    padding: 13px 14px !important;
  }
  html[data-theme] body #page .batch-card:is(:hover, :focus-within) {
    border: 2px solid var(--card-tone) !important;
    background:
      linear-gradient(107deg,
        transparent 0 18%,
        color-mix(in srgb, var(--card-tone) 16%, transparent) 31%,
        color-mix(in srgb, #fff 96%, var(--card-tone)) 48%,
        transparent 73% 100%),
      var(--zv-card) !important;
    box-shadow: 0 15px 30px color-mix(in srgb, var(--card-tone) 24%, transparent) !important;
  }
  html[data-theme] body #page .batch-card-copy h2 {
    overflow: hidden;
    max-width: 100%;
    margin: 7px 0 2px !important;
    font-size: 17px !important;
    line-height: 1.18 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html[data-theme] body #page .batch-card-copy p {
    overflow: hidden;
    color: var(--zv-muted) !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html[data-theme] body #page .batch-meta {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 7px 12px !important;
    align-items: center !important;
    border-top: 1px solid var(--zv-border);
    padding-top: 9px;
  }
  html[data-theme] body #page .batch-meta > strong {
    display: grid;
    min-width: 76px;
    gap: 1px;
  }
  html[data-theme] body #page .batch-meta > strong > b {
    color: var(--zv-text) !important;
    font-size: 24px;
    line-height: 1;
  }
  html[data-theme] body #page .batch-meta > strong > span {
    color: var(--zv-muted) !important;
    font-size: 8px;
    font-weight: 750;
    text-transform: uppercase;
  }
  html[data-theme] body #page .batch-status-counts {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
    gap: 5px !important;
  }
  html[data-theme] body #page .batch-status-counts > span {
    display: grid !important;
    min-width: 0;
    gap: 1px !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 7px !important;
    background: color-mix(in srgb, var(--card-tone) 6%, var(--zv-card));
    padding: 4px 6px !important;
  }
  html[data-theme] body #page .batch-status-counts > span b {
    color: var(--zv-text) !important;
    font-size: 15px;
    line-height: 1;
  }
  html[data-theme] body #page .batch-status-counts > span em {
    overflow: hidden;
    color: var(--zv-muted) !important;
    font-size: 7px;
    font-style: normal;
    font-weight: 750;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }
  html[data-theme] body #page .batch-owner {
    display: grid;
    grid-column: 1 / 3;
    min-width: 0;
  }
  html[data-theme] body #page .batch-owner > span,
  html[data-theme] body #page .batch-owner > small {
    overflow: hidden;
    color: var(--zv-muted) !important;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html[data-theme] body #page .batch-actions {
    padding-top: 2px;
  }
}

@media (max-width: 1080px) {
  html[data-theme] body #page .batch-grid { grid-template-columns: repeat(2, minmax(285px, 1fr)) !important; }
}

@media (max-width: 700px) {
  html[data-theme] body #page .batch-grid { grid-template-columns: 1fr !important; }
}

html[data-theme="dark"] {
  --zv-background: #07141e;
  --zv-surface: #0b1d29;
  --zv-card: #0e2532;
  --zv-card-alt: #132f3d;
  --zv-text: #f3f7fa;
  --zv-muted: #93a9b8;
  --zv-border: #284453;
  --zv-accent: #ef3340;
  --zv-hover: #173746;
  --zv-success: #2fd080;
  --zv-warning: #ffb21c;
  --zv-danger: #ff4054;
  --zv-info: #3894ff;
  --zv-status-picking: #ff4054;
  --zv-status-waiting-parts: #ffb21c;
  --zv-status-programming: #3894ff;
  --zv-status-finalized: #2fd080;
  --zv-status-production: #6b8fff;
  --zv-status-hygiene: #20bec8;
  --zv-status-removed: #f05a79;
  --zv-status-other: #8da7ba;
  --zv-occurrence-repaired: #2fd080;
  --zv-occurrence-returned: #9a71ff;
  --zv-occurrence-no-repair: #ffb21c;
  --zv-occurrence-divergence: #ff4054;
  --zv-occurrence-doa: #ad7dff;
  --zv-occurrence-exchange-new: #20bec8;
  --zv-occurrence-missing-product: #f28c52;
  --zv-occurrence-rejected: #ff6680;
  --zv-occurrence-other: #8da7ba;
  --zv-primary-card-background: #0e2532;
  --zv-primary-card-title: #f3f7fa;
  --zv-primary-card-text: #a9bbc7;
  --zv-primary-card-value: #ffffff;
  --zv-primary-card-icon: #65aaff;
  --zv-primary-card-border: #315063;
  --zv-primary-card-hover: #1d4960;
  --zv-primary-card-selected: #183e55;
  --zv-secondary-card-background: #122c3a;
  --zv-secondary-card-title: #e8f1f5;
  --zv-secondary-card-text: #93a9b8;
  --zv-secondary-card-value: #f3f7fa;
  --zv-secondary-card-icon: #36cad2;
  --zv-secondary-card-border: #294858;
  --zv-secondary-card-hover: #1c4855;
  --zv-secondary-card-selected: #173f37;
  --zv-focus-ring: #65aaff;
  --zv-locked-background: #1a303c;
  --zv-locked-border: #7ea0bd;
  --zv-locked-text: #c5d4dd;
  --zv-button-primary-bg: #ef3340;
  --zv-button-primary-text: #ffffff;
  --zv-button-secondary-bg: #3894ff;
  --zv-button-secondary-text: #ffffff;
  --zv-button-excel-bg: #20b96f;
  --zv-button-excel-text: #ffffff;
  --zv-tag-background: #122c3a;
  --zv-tag-text: #e8f1f5;
  --zv-tag-border: #315063;
  --zv-drawer-background: #0b1d29;
  --zv-drawer-panel: #0e2532;
  --zv-drawer-title: #65aaff;
  --zv-drawer-text: #f3f7fa;
  --zv-drawer-border: #315063;
  --zv-drawer-tab-active: #ff4054;
  --zv-chart-1: #ff4054;
  --zv-chart-2: #3894ff;
  --zv-chart-3: #2fd080;
  --zv-chart-4: #ffb21c;
  --zv-chart-5: #9a71ff;
  --zv-chart-6: #20bec8;
  --zv-chart-7: #7ea0bd;
  --zv-chart-8: #e28c52;
  --zv-chart-grid: #284453;
  --zv-chart-label: #93a9b8;
  --zv-donut-center: #0b1d29;
  --zv-donut-center-text: #f3f7fa;
}

html[data-theme] {
  /* Compatibility aliases used throughout v20-v22. */
  --x-red: var(--zv-danger);
  --x-red-dark: color-mix(in srgb, var(--zv-danger) 76%, #000);
  --x-blue: var(--zv-info);
  --x-blue-dark: color-mix(in srgb, var(--zv-info) 76%, #000);
  --x-sky: var(--zv-chart-2);
  --x-teal: var(--zv-chart-6);
  --x-teal-dark: color-mix(in srgb, var(--zv-chart-6) 74%, #000);
  --x-green: var(--zv-success);
  --x-green-dark: color-mix(in srgb, var(--zv-success) 74%, #000);
  --x-amber: var(--zv-warning);
  --x-amber-dark: color-mix(in srgb, var(--zv-warning) 72%, #000);
  --x-orange: var(--zv-chart-4);
  --x-orange-dark: color-mix(in srgb, var(--zv-chart-4) 72%, #000);
  --x-purple: var(--zv-chart-5);
  --x-purple-dark: color-mix(in srgb, var(--zv-chart-5) 72%, #000);
  --x-ink: var(--zv-text);
  --x-copy: color-mix(in srgb, var(--zv-text) 82%, var(--zv-muted));
  --x-muted: var(--zv-muted);
  --x-line: var(--zv-border);
  --x-line-soft: color-mix(in srgb, var(--zv-border) 55%, transparent);
  --x-canvas: var(--zv-background);
  --x-white: var(--zv-surface);

  --accent: var(--zv-accent);
  --accent-dark: color-mix(in srgb, var(--zv-accent) 74%, #000);
  --chart-series-1: var(--zv-chart-1);
  --chart-series-2: var(--zv-chart-2);
  --chart-series-3: var(--zv-chart-3);
  --chart-series-4: var(--zv-chart-4);
  --chart-series-5: var(--zv-chart-5);
  --chart-series-6: var(--zv-chart-6);
  --chart-series-7: var(--zv-chart-7);
  --chart-series-8: var(--zv-chart-8);
  --chart-red: var(--zv-chart-1);
  --chart-blue: var(--zv-chart-2);
  --chart-green: var(--zv-chart-3);
  --chart-amber: var(--zv-chart-4);
  --chart-purple: var(--zv-chart-5);
  --chart-teal: var(--zv-chart-6);
  --chart-slate: var(--zv-chart-7);
  --chart-orange: var(--zv-chart-8);
  color-scheme: light;
}

html[data-theme="dark"] { color-scheme: dark; }

@media screen {
  html[data-theme] body {
    background: var(--zv-background) !important;
    color: var(--zv-text) !important;
  }

  html[data-theme] body :is(.app-shell, .main, .page) {
    color: var(--zv-text) !important;
  }

  html[data-theme] body :is(.top-navigation, .topbar, .sidebar, .nav-submenu) {
    background-color: var(--zv-surface) !important;
    border-color: var(--zv-border) !important;
    color: var(--zv-text) !important;
  }

  html[data-theme] body :is(.nav-menu-trigger, .nav-item, .icon-btn, .btn-ghost) {
    color: var(--zv-text);
  }

  html[data-theme] body :is(.nav-menu-trigger, .nav-item, .icon-btn, .btn-ghost):hover {
    background-color: var(--zv-hover) !important;
  }

  html[data-theme] body :is(input, select, textarea) {
    background-color: var(--zv-surface) !important;
    border-color: var(--zv-border) !important;
    color: var(--zv-text) !important;
  }

  html[data-theme] body :is(input, select, textarea)::placeholder {
    color: var(--zv-muted) !important;
  }

  html[data-theme] body .btn-primary {
    background-color: var(--zv-accent) !important;
    border-color: var(--zv-accent) !important;
    color: #fff !important;
  }

  html[data-theme] body .btn-primary:hover {
    background-color: color-mix(in srgb, var(--zv-accent) 82%, #000) !important;
  }

  html[data-theme] body .btn-secondary {
    background-color: var(--zv-card-alt) !important;
    border-color: var(--zv-border) !important;
    color: var(--zv-text) !important;
  }

  html[data-theme] body #page :is(
    .page-heading, .panel, .card, .table-card, .chart-card, .chart-panel,
    .analytics-panel, .decision-panel, .alert-panel, .program-batch,
    .program-card, .program-type-card, .shortage-card, .purchase-card,
    .aging-card, .batch-card, .product-card, .report-model-card,
    .setting-card, .settings-card, .summary-card, .sync-card,
    .report-model-builder, .program-type-manager, .program-confirm-panel,
    .program-archive, .phase-registration, .phase-client-filter,
    .phase-saved-panel, .phase-details-panel, .settings-section,
    .settings-side, .settings-form, .user-access, .scenario-panel,
    .activity-builder, .workforce-flow-panel, .mega-source-panel,
    .personal-mega-form, .export-favorites, .picking-client-summary,
    .people-category-panel, .people-category, .ignored-rules,
    .ignored-client-form, .ignored-audit, .help-step, .help-notice,
    .danger-zone, .staging-refresh-card, .decision-command-bar,
    .decision-list, .status-bars, .insight-card, .audit-explainer,
    .program-tab-note, .report-runner, .saved-report-models
  ) {
    background-color: var(--zv-surface) !important;
    border-color: var(--zv-border) !important;
    color: var(--zv-text) !important;
  }

  html[data-theme] body #page :is(.page-heading, .panel, .card) :is(p, small, .muted) {
    color: var(--zv-muted) !important;
  }

  html[data-theme] body #page :is(.data-table, .mini-table, .table-card) {
    --table-line: var(--zv-border);
    color: var(--zv-text);
  }

  html[data-theme] body #page :is(.data-table, .mini-table) :is(th, td) {
    border-color: color-mix(in srgb, var(--zv-border) 70%, transparent) !important;
  }

  html[data-theme] body #page :is(.data-table, .mini-table) tbody tr:hover {
    background-color: var(--zv-hover) !important;
  }

  html[data-theme] body #page :is(.missing-info, .sem-info, [data-missing="true"]) {
    color: var(--zv-danger) !important;
  }

  html[data-theme] body #page :is(.tag-green, .tag-success) { color: var(--zv-success) !important; }
  html[data-theme] body #page :is(.tag-amber, .tag-warning) { color: var(--zv-warning) !important; }
  html[data-theme] body #page :is(.tag-red, .tag-danger) { color: var(--zv-danger) !important; }
  html[data-theme] body #page :is(.tag-blue, .tag-info) { color: var(--zv-info) !important; }

  /* SVG/CSS charts consume the persisted series without changing layout. */
  html[data-theme] body .chart-line.entries { stroke: var(--zv-chart-1) !important; }
  html[data-theme] body .chart-line.finished { stroke: var(--zv-chart-2) !important; }
  html[data-theme] body .chart-line.programmed { stroke: var(--zv-chart-3) !important; }
  html[data-theme] body .chart-grid-line { stroke: color-mix(in srgb, var(--zv-border) 66%, transparent) !important; }
  html[data-theme] body .chart-legend { color: var(--zv-muted) !important; }
  html[data-theme] body :is(.trend-chart, .chart-panel, .chart-card) svg text { fill: var(--zv-muted) !important; }
  html[data-theme] body .single-line svg polyline:nth-of-type(1) { stroke: var(--zv-chart-6) !important; }
  html[data-theme] body .single-line svg polyline:nth-of-type(2) { stroke: var(--zv-chart-2) !important; }
  html[data-theme] body .single-line svg polyline:nth-of-type(3) { stroke: var(--zv-chart-4) !important; }
  html[data-theme] body .single-line #finalizedGradient stop:first-child { stop-color: var(--zv-chart-6) !important; }
  html[data-theme] body .chart-series-legend .total::before { background: var(--zv-chart-6) !important; }
  html[data-theme] body .chart-series-legend .white::before { background: var(--zv-chart-2) !important; }
  html[data-theme] body .chart-series-legend .portable::before { background: var(--zv-chart-4) !important; }
  html[data-theme] body .metric-bars.teal u { background: var(--zv-chart-6) !important; }
  html[data-theme] body .metric-bars.blue u { background: var(--zv-chart-2) !important; }
  html[data-theme] body .metric-bars.green u { background: var(--zv-chart-3) !important; }
  html[data-theme] body .metric-bars.amber u { background: var(--zv-chart-4) !important; }
  html[data-theme] body .metric-bars.orange u { background: var(--zv-chart-8) !important; }
  html[data-theme] body .metric-bars.red u { background: var(--zv-chart-1) !important; }
  html[data-theme] body .metric-bars.purple u { background: var(--zv-chart-5) !important; }

  /* ==============================================================
     Administrative visual editor
     ============================================================== */
  html[data-theme] body .visual-config-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .55fr);
    gap: 16px;
    align-items: start;
  }

  html[data-theme] body .visual-config-form,
  html[data-theme] body .visual-preview-panel {
    background: var(--zv-surface);
    border: 1px solid var(--zv-border);
    border-radius: 12px;
    color: var(--zv-text);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--zv-text) 7%, transparent);
  }

  html[data-theme] body .visual-config-form { padding: 16px; }
  html[data-theme] body .visual-preview-panel { padding: 15px; position: sticky; top: 126px; }

  html[data-theme] body .visual-theme-switch {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 14px;
    border: 1px solid var(--zv-border);
    border-radius: 9px;
    background: var(--zv-card-alt);
  }

  html[data-theme] body .visual-theme-switch button {
    min-height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--zv-muted);
    font: inherit;
    font-weight: 750;
    cursor: pointer;
  }

  html[data-theme] body .visual-theme-switch button.active {
    background: var(--zv-surface);
    color: var(--zv-text);
    box-shadow: 0 2px 7px color-mix(in srgb, var(--zv-text) 12%, transparent);
  }

  html[data-theme] body .visual-palette-group + .visual-palette-group {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--zv-border);
  }

  html[data-theme] body .visual-palette-group > header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }

  html[data-theme] body .visual-palette-group > header h3 { margin: 0; font-size: 15px; }
  html[data-theme] body .visual-palette-group > header p { margin: 3px 0 0; color: var(--zv-muted); font-size: 12px; }

  html[data-theme] body .visual-palette-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  html[data-theme] body .visual-color-field {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 78px;
    align-items: center;
    gap: 9px;
    min-width: 0;
    min-height: 58px;
    padding: 8px;
    border: 1px solid var(--zv-border);
    border-radius: 9px;
    background: color-mix(in srgb, var(--zv-card) 78%, var(--zv-card-alt));
  }

  html[data-theme] body .visual-color-field input[type="color"] {
    width: 42px !important;
    height: 38px !important;
    padding: 2px !important;
    border-radius: 7px;
    cursor: pointer;
  }

  html[data-theme] body .visual-color-field span { min-width: 0; font-size: 12px; font-weight: 750; }
  html[data-theme] body .visual-color-field output { color: var(--zv-muted); font: 700 11px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; text-align: right; }

  html[data-theme] body .visual-config-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--zv-border);
  }

  html[data-theme] body .visual-preview {
    --preview-background: var(--zv-background);
    --preview-surface: var(--zv-surface);
    --preview-card: var(--zv-card);
    --preview-card-alt: var(--zv-card-alt);
    --preview-text: var(--zv-text);
    --preview-muted: var(--zv-muted);
    --preview-border: var(--zv-border);
    --preview-accent: var(--zv-accent);
    --preview-hover: var(--zv-hover);
    --preview-success: var(--zv-success);
    --preview-warning: var(--zv-warning);
    --preview-danger: var(--zv-danger);
    --preview-info: var(--zv-info);
    --preview-status-picking: var(--zv-status-picking);
    --preview-status-waiting-parts: var(--zv-status-waiting-parts);
    --preview-status-programming: var(--zv-status-programming);
    --preview-status-finalized: var(--zv-status-finalized);
    --preview-status-production: var(--zv-status-production);
    --preview-status-hygiene: var(--zv-status-hygiene);
    --preview-status-removed: var(--zv-status-removed);
    --preview-status-other: var(--zv-status-other);
    --preview-primary-card-background: var(--zv-primary-card-background);
    --preview-primary-card-title: var(--zv-primary-card-title);
    --preview-primary-card-text: var(--zv-primary-card-text);
    --preview-primary-card-value: var(--zv-primary-card-value);
    --preview-primary-card-icon: var(--zv-primary-card-icon);
    --preview-primary-card-border: var(--zv-primary-card-border);
    --preview-primary-card-selected: var(--zv-primary-card-selected);
    --preview-secondary-card-background: var(--zv-secondary-card-background);
    --preview-secondary-card-title: var(--zv-secondary-card-title);
    --preview-secondary-card-text: var(--zv-secondary-card-text);
    --preview-secondary-card-value: var(--zv-secondary-card-value);
    --preview-secondary-card-icon: var(--zv-secondary-card-icon);
    --preview-secondary-card-border: var(--zv-secondary-card-border);
    --preview-focus-ring: var(--zv-focus-ring);
    --preview-locked-background: var(--zv-locked-background);
    --preview-locked-border: var(--zv-locked-border);
    --preview-locked-text: var(--zv-locked-text);
    min-height: 460px;
    padding: 12px;
    border-radius: 10px;
    background: var(--preview-background);
    color: var(--preview-text);
    overflow: hidden;
  }

  html[data-theme] body .visual-preview-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid var(--preview-border);
    border-radius: 8px;
    background: var(--preview-surface);
  }

  html[data-theme] body .visual-preview-nav strong { color: var(--preview-accent); }
  html[data-theme] body .visual-preview-nav span { color: var(--preview-muted); font-size: 10px; }

  html[data-theme] body .visual-preview-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 9px;
  }

  html[data-theme] body .visual-preview-kpis article {
    min-height: 104px;
    padding: 10px;
    border: 1px solid var(--preview-border);
    border-left: 3px solid var(--preview-tone);
    border-radius: 8px;
    background: linear-gradient(135deg, var(--preview-card) 18%, color-mix(in srgb, var(--preview-tone) 18%, var(--preview-card-alt)) 100%);
  }

  html[data-theme] body .visual-preview-kpis article:nth-child(1) { --preview-tone: var(--preview-danger); }
  html[data-theme] body .visual-preview-kpis article:nth-child(2) { --preview-tone: var(--preview-info); }
  html[data-theme] body .visual-preview-kpis article:nth-child(3) { --preview-tone: var(--preview-success); }
  html[data-theme] body .visual-preview-kpis article:nth-child(4) { --preview-tone: var(--preview-warning); }
  html[data-theme] body .visual-preview-kpis span { display: block; color: var(--preview-tone); font-size: 10px; font-weight: 800; text-transform: uppercase; }
  html[data-theme] body .visual-preview-kpis strong { display: block; margin: 7px 0 3px; color: var(--preview-text); font-size: 24px; }
  html[data-theme] body .visual-preview-kpis small { color: var(--preview-muted); }

  html[data-theme] body .visual-preview-chart {
    display: flex;
    align-items: end;
    gap: 6px;
    height: 112px;
    margin-top: 9px;
    padding: 13px 12px 10px;
    border: 1px solid var(--preview-border);
    border-radius: 8px;
    background: var(--preview-surface);
  }

  html[data-theme] body .visual-preview-chart i {
    flex: 1;
    min-height: 14%;
    border-radius: 4px 4px 1px 1px;
    background: var(--preview-series);
  }

  html[data-theme] body .visual-preview-chart i:nth-child(1) { height: 38%; --preview-series: var(--preview-chart-1); }
  html[data-theme] body .visual-preview-chart i:nth-child(2) { height: 72%; --preview-series: var(--preview-chart-2); }
  html[data-theme] body .visual-preview-chart i:nth-child(3) { height: 54%; --preview-series: var(--preview-chart-3); }
  html[data-theme] body .visual-preview-chart i:nth-child(4) { height: 88%; --preview-series: var(--preview-chart-4); }
  html[data-theme] body .visual-preview-chart i:nth-child(5) { height: 62%; --preview-series: var(--preview-chart-5); }
  html[data-theme] body .visual-preview-chart i:nth-child(6) { height: 96%; --preview-series: var(--preview-chart-6); }
  html[data-theme] body .visual-preview-chart i:nth-child(7) { height: 48%; --preview-series: var(--preview-chart-7); }
  html[data-theme] body .visual-preview-chart i:nth-child(8) { height: 78%; --preview-series: var(--preview-chart-8); }

  html[data-theme] body .visual-preview-actions { display: flex; gap: 7px; margin-top: 9px; }
  html[data-theme] body .visual-preview-actions button {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--preview-border);
    border-radius: 7px;
    background: var(--preview-accent);
    color: #fff;
    font-weight: 750;
  }
  html[data-theme] body .visual-preview-actions button + button { background: var(--preview-hover); color: var(--preview-text); }

  @media (max-width: 1060px) {
    html[data-theme] body .visual-config-shell { grid-template-columns: 1fr; }
    html[data-theme] body .visual-preview-panel { position: static; }
  }

  @media (max-width: 680px) {
    html[data-theme] body .visual-palette-grid { grid-template-columns: 1fr; }
    html[data-theme] body .visual-config-actions { flex-direction: column-reverse; }
    html[data-theme] body .visual-config-actions .btn { width: 100% !important; }
  }
}

/* ================================================================
   Granular operational palette + complete interactive-card contract
   Geometry is theme-neutral; only custom-property values differ.
   ================================================================ */
@media screen {
  html[data-theme="light"] { --zv-mirror-glint: rgba(255, 255, 255, .98); }
  html[data-theme="dark"] { --zv-mirror-glint: rgba(255, 255, 255, .38); }

  /* Generic tone classes remain configurable; explicit operational data wins below. */
  html[data-theme] body :where(.red, .critical, .danger, .tone-red, .is-error) { --visual-tone: var(--zv-danger); }
  html[data-theme] body :where(.green, .healthy, .positive, .success, .tone-green) { --visual-tone: var(--zv-success); }
  html[data-theme] body :where(.amber, .yellow, .attention, .warning, .tone-amber, .tone-yellow) { --visual-tone: var(--zv-warning); }
  html[data-theme] body :where(.blue, .neutral, .tone-blue) { --visual-tone: var(--zv-info); }
  html[data-theme] body :where(.teal, .tone-teal) { --visual-tone: var(--zv-chart-6); }
  html[data-theme] body :where(.purple, .violet, .tone-purple, .tone-violet) { --visual-tone: var(--zv-chart-5); }
  html[data-theme] body :where(.orange, .tone-orange) { --visual-tone: var(--zv-chart-8); }

  html[data-theme] body [data-visual-semantic="status_picking"] { --visual-tone: var(--zv-status-picking); }
  html[data-theme] body [data-visual-semantic="status_waiting_parts"] { --visual-tone: var(--zv-status-waiting-parts); }
  html[data-theme] body [data-visual-semantic="status_programming"] { --visual-tone: var(--zv-status-programming); }
  html[data-theme] body [data-visual-semantic="status_finalized"] { --visual-tone: var(--zv-status-finalized); }
  html[data-theme] body [data-visual-semantic="status_production"] { --visual-tone: var(--zv-status-production); }
  html[data-theme] body [data-visual-semantic="status_hygiene"] { --visual-tone: var(--zv-status-hygiene); }
  html[data-theme] body [data-visual-semantic="status_removed"] { --visual-tone: var(--zv-status-removed); }
  html[data-theme] body [data-visual-semantic="status_other"] { --visual-tone: var(--zv-status-other); }
  html[data-theme] body [data-visual-semantic="occurrence_repaired"] { --visual-tone: var(--zv-occurrence-repaired); }
  html[data-theme] body [data-visual-semantic="occurrence_returned"] { --visual-tone: var(--zv-occurrence-returned); }
  html[data-theme] body [data-visual-semantic="occurrence_no_repair"] { --visual-tone: var(--zv-occurrence-no-repair); }
  html[data-theme] body [data-visual-semantic="occurrence_divergence"] { --visual-tone: var(--zv-occurrence-divergence); }
  html[data-theme] body [data-visual-semantic="occurrence_doa"] { --visual-tone: var(--zv-occurrence-doa); }
  html[data-theme] body [data-visual-semantic="occurrence_exchange_new"] { --visual-tone: var(--zv-occurrence-exchange-new); }
  html[data-theme] body [data-visual-semantic="occurrence_missing_product"] { --visual-tone: var(--zv-occurrence-missing-product); }
  html[data-theme] body [data-visual-semantic="occurrence_rejected"] { --visual-tone: var(--zv-occurrence-rejected); }
  html[data-theme] body [data-visual-semantic="occurrence_other"] { --visual-tone: var(--zv-occurrence-other); }

  /* Per-card autonomy: accent, surface, text and value size are independent. */
  html[data-theme] body [data-visual-semantic="status_picking"] { --semantic-card-bg: var(--zv-status-picking-card, var(--card-role-bg)); --semantic-card-text: var(--zv-status-picking-text, var(--zv-text)); --semantic-value-size: var(--zv-status-picking-font-size, 28px); }
  html[data-theme] body [data-visual-semantic="status_waiting_parts"] { --semantic-card-bg: var(--zv-status-waiting-parts-card, var(--card-role-bg)); --semantic-card-text: var(--zv-status-waiting-parts-text, var(--zv-text)); --semantic-value-size: var(--zv-status-waiting-parts-font-size, 28px); }
  html[data-theme] body [data-visual-semantic="status_programming"] { --semantic-card-bg: var(--zv-status-programming-card, var(--card-role-bg)); --semantic-card-text: var(--zv-status-programming-text, var(--zv-text)); --semantic-value-size: var(--zv-status-programming-font-size, 28px); }
  html[data-theme] body [data-visual-semantic="status_finalized"] { --semantic-card-bg: var(--zv-status-finalized-card, var(--card-role-bg)); --semantic-card-text: var(--zv-status-finalized-text, var(--zv-text)); --semantic-value-size: var(--zv-status-finalized-font-size, 28px); }
  html[data-theme] body [data-visual-semantic="status_production"] { --semantic-card-bg: var(--zv-status-production-card, var(--card-role-bg)); --semantic-card-text: var(--zv-status-production-text, var(--zv-text)); --semantic-value-size: var(--zv-status-production-font-size, 28px); }
  html[data-theme] body [data-visual-semantic="status_hygiene"] { --semantic-card-bg: var(--zv-status-hygiene-card, var(--card-role-bg)); --semantic-card-text: var(--zv-status-hygiene-text, var(--zv-text)); --semantic-value-size: var(--zv-status-hygiene-font-size, 28px); }
  html[data-theme] body [data-visual-semantic="status_removed"] { --semantic-card-bg: var(--zv-status-removed-card, var(--card-role-bg)); --semantic-card-text: var(--zv-status-removed-text, var(--zv-text)); --semantic-value-size: var(--zv-status-removed-font-size, 28px); }
  html[data-theme] body [data-visual-semantic="status_other"] { --semantic-card-bg: var(--zv-status-other-card, var(--card-role-bg)); --semantic-card-text: var(--zv-status-other-text, var(--zv-text)); --semantic-value-size: var(--zv-status-other-font-size, 28px); }

  html[data-theme] body [data-visual-semantic="aging_under_10"] { --visual-tone: var(--zv-aging-under-10); --semantic-card-bg: var(--zv-aging-under-10-card, var(--card-role-bg)); --semantic-card-text: var(--zv-aging-under-10-text, var(--zv-text)); --semantic-value-size: var(--zv-aging-under-10-font-size, 24px); }
  html[data-theme] body [data-visual-semantic="aging_10_19"] { --visual-tone: var(--zv-aging-10-19); --semantic-card-bg: var(--zv-aging-10-19-card, var(--card-role-bg)); --semantic-card-text: var(--zv-aging-10-19-text, var(--zv-text)); --semantic-value-size: var(--zv-aging-10-19-font-size, 24px); }
  html[data-theme] body [data-visual-semantic="aging_20_24"] { --visual-tone: var(--zv-aging-20-24); --semantic-card-bg: var(--zv-aging-20-24-card, var(--card-role-bg)); --semantic-card-text: var(--zv-aging-20-24-text, var(--zv-text)); --semantic-value-size: var(--zv-aging-20-24-font-size, 24px); }
  html[data-theme] body [data-visual-semantic="aging_25_29"] { --visual-tone: var(--zv-aging-25-29); --semantic-card-bg: var(--zv-aging-25-29-card, var(--card-role-bg)); --semantic-card-text: var(--zv-aging-25-29-text, var(--zv-text)); --semantic-value-size: var(--zv-aging-25-29-font-size, 24px); }
  html[data-theme] body [data-visual-semantic="aging_30_plus"] { --visual-tone: var(--zv-aging-30-plus); --semantic-card-bg: var(--zv-aging-30-plus-card, var(--card-role-bg)); --semantic-card-text: var(--zv-aging-30-plus-text, var(--zv-text)); --semantic-value-size: var(--zv-aging-30-plus-font-size, 24px); }

  html[data-theme] body [data-visual-semantic="supply_received_full"] { --visual-tone: var(--zv-supply-received-full); --semantic-card-bg: var(--zv-supply-received-full-card, var(--card-role-bg)); --semantic-card-text: var(--zv-supply-received-full-text, var(--zv-text)); --semantic-value-size: var(--zv-supply-received-full-font-size, 24px); }
  html[data-theme] body [data-visual-semantic="supply_received_partial"] { --visual-tone: var(--zv-supply-received-partial); --semantic-card-bg: var(--zv-supply-received-partial-card, var(--card-role-bg)); --semantic-card-text: var(--zv-supply-received-partial-text, var(--zv-text)); --semantic-value-size: var(--zv-supply-received-partial-font-size, 24px); }
  html[data-theme] body [data-visual-semantic="supply_unpurchased"] { --visual-tone: var(--zv-supply-unpurchased); --semantic-card-bg: var(--zv-supply-unpurchased-card, var(--card-role-bg)); --semantic-card-text: var(--zv-supply-unpurchased-text, var(--zv-text)); --semantic-value-size: var(--zv-supply-unpurchased-font-size, 24px); }
  html[data-theme] body [data-visual-semantic="supply_waiting"] { --visual-tone: var(--zv-supply-waiting); --semantic-card-bg: var(--zv-supply-waiting-card, var(--card-role-bg)); --semantic-card-text: var(--zv-supply-waiting-text, var(--zv-text)); --semantic-value-size: var(--zv-supply-waiting-font-size, 24px); }
  html[data-theme] body [data-visual-semantic="supply_no_detail"] { --visual-tone: var(--zv-supply-no-detail); --semantic-card-bg: var(--zv-supply-no-detail-card, var(--card-role-bg)); --semantic-card-text: var(--zv-supply-no-detail-text, var(--zv-text)); --semantic-value-size: var(--zv-supply-no-detail-font-size, 24px); }
  html[data-theme] body [data-visual-semantic="purchase_full"] { --visual-tone: var(--zv-purchase-full); --semantic-card-bg: var(--zv-purchase-full-card, var(--card-role-bg)); --semantic-card-text: var(--zv-purchase-full-text, var(--zv-text)); --semantic-value-size: var(--zv-purchase-full-font-size, 24px); }
  html[data-theme] body [data-visual-semantic="purchase_partial"] { --visual-tone: var(--zv-purchase-partial); --semantic-card-bg: var(--zv-purchase-partial-card, var(--card-role-bg)); --semantic-card-text: var(--zv-purchase-partial-text, var(--zv-text)); --semantic-value-size: var(--zv-purchase-partial-font-size, 24px); }
  html[data-theme] body [data-visual-semantic="purchase_none"] { --visual-tone: var(--zv-purchase-none); --semantic-card-bg: var(--zv-purchase-none-card, var(--card-role-bg)); --semantic-card-text: var(--zv-purchase-none-text, var(--zv-text)); --semantic-value-size: var(--zv-purchase-none-font-size, 24px); }

  html[data-theme] body [data-visual-semantic="occurrence_repaired"] { --semantic-card-bg: var(--zv-occurrence-repaired-card, var(--card-role-bg)); --semantic-card-text: var(--zv-occurrence-repaired-text, var(--zv-text)); --semantic-value-size: var(--zv-occurrence-repaired-font-size, 24px); }
  html[data-theme] body [data-visual-semantic="occurrence_returned"] { --semantic-card-bg: var(--zv-occurrence-returned-card, var(--card-role-bg)); --semantic-card-text: var(--zv-occurrence-returned-text, var(--zv-text)); --semantic-value-size: var(--zv-occurrence-returned-font-size, 24px); }
  html[data-theme] body [data-visual-semantic="occurrence_no_repair"] { --semantic-card-bg: var(--zv-occurrence-no-repair-card, var(--card-role-bg)); --semantic-card-text: var(--zv-occurrence-no-repair-text, var(--zv-text)); --semantic-value-size: var(--zv-occurrence-no-repair-font-size, 24px); }
  html[data-theme] body [data-visual-semantic="occurrence_divergence"] { --semantic-card-bg: var(--zv-occurrence-divergence-card, var(--card-role-bg)); --semantic-card-text: var(--zv-occurrence-divergence-text, var(--zv-text)); --semantic-value-size: var(--zv-occurrence-divergence-font-size, 24px); }
  html[data-theme] body [data-visual-semantic="occurrence_doa"] { --semantic-card-bg: var(--zv-occurrence-doa-card, var(--card-role-bg)); --semantic-card-text: var(--zv-occurrence-doa-text, var(--zv-text)); --semantic-value-size: var(--zv-occurrence-doa-font-size, 24px); }
  html[data-theme] body [data-visual-semantic="occurrence_exchange_new"] { --semantic-card-bg: var(--zv-occurrence-exchange-new-card, var(--card-role-bg)); --semantic-card-text: var(--zv-occurrence-exchange-new-text, var(--zv-text)); --semantic-value-size: var(--zv-occurrence-exchange-new-font-size, 24px); }
  html[data-theme] body [data-visual-semantic="occurrence_missing_product"] { --semantic-card-bg: var(--zv-occurrence-missing-product-card, var(--card-role-bg)); --semantic-card-text: var(--zv-occurrence-missing-product-text, var(--zv-text)); --semantic-value-size: var(--zv-occurrence-missing-product-font-size, 24px); }
  html[data-theme] body [data-visual-semantic="occurrence_rejected"] { --semantic-card-bg: var(--zv-occurrence-rejected-card, var(--card-role-bg)); --semantic-card-text: var(--zv-occurrence-rejected-text, var(--zv-text)); --semantic-value-size: var(--zv-occurrence-rejected-font-size, 24px); }
  html[data-theme] body [data-visual-semantic="occurrence_other"] { --semantic-card-bg: var(--zv-occurrence-other-card, var(--card-role-bg)); --semantic-card-text: var(--zv-occurrence-other-text, var(--zv-text)); --semantic-value-size: var(--zv-occurrence-other-font-size, 24px); }

  /* Tags expose every operational and finalization semantic without changing size. */
  html[data-theme] body .tag[data-visual-semantic] {
    border-color: color-mix(in srgb, var(--visual-tone) 58%, var(--zv-border)) !important;
    background: color-mix(in srgb, var(--visual-tone) 12%, var(--zv-surface)) !important;
    color: color-mix(in srgb, var(--visual-tone) 84%, var(--zv-text)) !important;
  }

  /* Explicit component roles are also used by non-clickable counters. */
  html[data-theme] body #page [data-visual-card="primary"] {
    --card-role-bg: var(--zv-primary-card-background);
    --card-role-title: var(--zv-primary-card-title);
    --card-role-text: var(--zv-primary-card-text);
    --card-role-value: var(--zv-primary-card-value);
    --card-role-icon: var(--zv-primary-card-icon);
    --card-role-border: var(--zv-primary-card-border);
    --card-role-hover: var(--zv-primary-card-hover);
    --card-role-selected: var(--zv-primary-card-selected);
    background-color: var(--card-role-bg) !important;
    border-color: color-mix(in srgb, var(--visual-tone, var(--card-role-border)) 26%, var(--card-role-border)) !important;
  }
  html[data-theme] body #page [data-visual-card="secondary"] {
    --card-role-bg: var(--zv-secondary-card-background);
    --card-role-title: var(--zv-secondary-card-title);
    --card-role-text: var(--zv-secondary-card-text);
    --card-role-value: var(--zv-secondary-card-value);
    --card-role-icon: var(--zv-secondary-card-icon);
    --card-role-border: var(--zv-secondary-card-border);
    --card-role-hover: var(--zv-secondary-card-hover);
    --card-role-selected: var(--zv-secondary-card-selected);
    background-color: var(--card-role-bg) !important;
    border-color: color-mix(in srgb, var(--visual-tone, var(--card-role-border)) 26%, var(--card-role-border)) !important;
  }
  html[data-theme] body #page [data-visual-card][data-visual-semantic] {
    background-color: var(--semantic-card-bg, var(--card-role-bg)) !important;
  }
  html[data-theme] body #page [data-visual-card][data-visual-semantic] :is(
    .kpi-title, .client-card-name > span, .decision-main h2,
    .batch-card-copy h2, .people-category-name > strong
  ),
  html[data-theme] body #page [data-visual-card][data-visual-semantic] > :is(span, small) {
    color: var(--semantic-card-text, var(--card-role-text)) !important;
  }
  html[data-theme] body #page [data-visual-card][data-visual-semantic] :is(
    .kpi-number, .decision-main > strong, .people-category-total
  ),
  html[data-theme] body #page [data-visual-card][data-visual-semantic] > strong,
  html[data-theme] body #page [data-visual-card][data-visual-semantic] > div > strong {
    color: var(--semantic-card-text, var(--card-role-value)) !important;
    font-size: var(--semantic-value-size, inherit) !important;
  }
  html[data-theme] body #page [data-visual-card] :is(
    .kpi-title, .client-card-name > span, .decision-main h2,
    .batch-card-copy h2, .people-category-name > strong
  ),
  html[data-theme] body #page [data-visual-card] > span {
    color: var(--card-role-title) !important;
  }
  html[data-theme] body #page [data-visual-card] :is(
    .kpi-breakdown, .client-card-name small, .decision-main p,
    .batch-card-copy p, .people-category-name > small
  ),
  html[data-theme] body #page [data-visual-card] > small {
    color: var(--card-role-text) !important;
    opacity: 1 !important;
  }
  html[data-theme] body #page [data-visual-card] :is(
    .kpi-number, .decision-main > strong, .people-category-total
  ),
  html[data-theme] body #page [data-visual-card] > strong {
    color: var(--card-role-value) !important;
  }
  html[data-theme] body #page [data-visual-card] :is(
    .kpi-symbol, .snapshot-icon, .ptn-indicator-icon, .client-rank,
    .decision-tile-head, .kpi-link
  ) {
    color: var(--visual-tone, var(--card-role-icon)) !important;
  }

  /*
   * Complete active inventory. Graph panels, tables and informational cards
   * are intentionally absent; their data colours remain stable on pointer use.
   */
  html[data-theme] body :is(
    #page button.metric-card-button,
    #page .ptn-indicator-grid > button,
    #page .snapshot-cards > button,
    #page .program-pulse > button,
    #page .client-picking-cards > button,
    #page .decision-item,
    #page .decision-tile,
    #page .schedule-card,
    #page .navigation-view-grid > label,
    #page .permission-grid label,
    #page .export-field-grid label,
    #page .model-field-grid label,
    #page .report-columns label,
    #page .switch-row,
    #page .checkbox-row,
    #page .visual-color-field,
    #page .batch-card,
    #page .phase-saved-card,
    #page .saved-report-models > article:has(button),
    #page .saved-types > article:has(button),
    #page .activity-list > article:has(button),
    #page .management-programs > div:has(button),
    #page .staging-refresh-card.panel:has(button),
    #page .user-access,
    #page .print-profile,
    #page .program-type-manager,
    #page .audit-failures,
    #ptnDrawer .drawer-profile,
    #ptnDrawer .drawer-profile-grid label
  ) {
    --card-role-bg: var(--zv-primary-card-background);
    --card-role-title: var(--zv-primary-card-title);
    --card-role-text: var(--zv-primary-card-text);
    --card-role-value: var(--zv-primary-card-value);
    --card-role-icon: var(--zv-primary-card-icon);
    --card-role-border: var(--zv-primary-card-border);
    --card-role-hover: var(--zv-primary-card-hover);
    --card-role-selected: var(--zv-primary-card-selected);
    --card-tone: var(--visual-tone, var(--card-role-icon));
    box-sizing: border-box !important;
    min-width: 0;
    border-width: 2px !important;
    border-style: solid !important;
    border-color: color-mix(in srgb, var(--card-tone) 22%, var(--card-role-border)) !important;
    background-color: var(--card-role-bg) !important;
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease !important;
  }

  html[data-theme] body :is(
    #page .snapshot-cards > button,
    #page .program-pulse > button,
    #page .decision-item,
    #page .finalized-mini-card,
    #page .people-category-person,
    #page .navigation-view-grid > label,
    #page .permission-grid label,
    #page .export-field-grid label,
    #page .model-field-grid label,
    #page .report-columns label,
    #page .switch-row,
    #page .checkbox-row,
    #page .visual-color-field,
    #ptnDrawer .drawer-profile-grid label
  ) {
    --card-role-bg: var(--zv-secondary-card-background);
    --card-role-title: var(--zv-secondary-card-title);
    --card-role-text: var(--zv-secondary-card-text);
    --card-role-value: var(--zv-secondary-card-value);
    --card-role-icon: var(--zv-secondary-card-icon);
    --card-role-border: var(--zv-secondary-card-border);
    --card-role-hover: var(--zv-secondary-card-hover);
    --card-role-selected: var(--zv-secondary-card-selected);
    --card-tone: var(--visual-tone, var(--card-role-icon));
  }

  /* Strong executive mirror; width is already 2px before hover, so no reflow. */
  html[data-theme] body :is(
    #page button.metric-card-button,
    #page .ptn-indicator-grid > button,
    #page .snapshot-cards > button,
    #page .program-pulse > button,
    #page .client-picking-cards > button,
    #page .decision-item,
    #page .decision-tile,
    #page .schedule-card,
    #page .navigation-view-grid > label,
    #page .permission-grid label,
    #page .export-field-grid label,
    #page .model-field-grid label,
    #page .report-columns label,
    #page .switch-row,
    #page .checkbox-row,
    #page .visual-color-field,
    #page .batch-card,
    #page .phase-saved-card,
    #page .saved-report-models > article:has(button),
    #page .saved-types > article:has(button),
    #page .activity-list > article:has(button),
    #page .management-programs > div:has(button),
    #page .staging-refresh-card.panel:has(button),
    #page .user-access,
    #page .print-profile,
    #page .program-type-manager,
    #page .audit-failures,
    #ptnDrawer .drawer-profile,
    #ptnDrawer .drawer-profile-grid label
  ):is(:hover, :focus-visible, :focus-within) {
    border-color: var(--card-tone) !important;
    background:
      linear-gradient(
        107deg,
        transparent 0%,
        transparent 20%,
        color-mix(in srgb, var(--card-role-hover) 34%, transparent) 32%,
        color-mix(in srgb, var(--zv-mirror-glint) 88%, var(--card-role-hover)) 45%,
        var(--zv-mirror-glint) 50%,
        color-mix(in srgb, var(--card-tone) 24%, var(--zv-mirror-glint)) 57%,
        transparent 73%,
        transparent 100%
      ),
      linear-gradient(180deg, color-mix(in srgb, var(--card-tone) 9%, var(--card-role-bg)), var(--card-role-bg) 74%) !important;
    box-shadow:
      0 17px 36px color-mix(in srgb, var(--card-tone) 23%, transparent),
      0 5px 13px color-mix(in srgb, var(--zv-text) 13%, transparent),
      inset 0 1px 0 var(--zv-mirror-glint),
      inset 0 -2px 0 color-mix(in srgb, var(--zv-accent) 18%, transparent) !important;
    transform: translateY(-2px) !important;
  }

  html[data-theme] body :is(
    #page button.metric-card-button,
    #page .ptn-indicator-grid > button,
    #page .snapshot-cards > button,
    #page .program-pulse > button,
    #page .client-picking-cards > button,
    #page .decision-item,
    #page .decision-tile,
    #page .schedule-card,
    #page .navigation-view-grid > label,
    #page .permission-grid label,
    #page .export-field-grid label,
    #page .model-field-grid label,
    #page .report-columns label,
    #page .switch-row,
    #page .checkbox-row,
    #page .visual-color-field,
    #page .batch-card,
    #page .phase-saved-card,
    #page .saved-report-models > article:has(button),
    #page .saved-types > article:has(button),
    #page .activity-list > article:has(button),
    #page .management-programs > div:has(button),
    #page .staging-refresh-card.panel:has(button),
    #page .user-access,
    #page .print-profile,
    #page .program-type-manager,
    #page .audit-failures,
    #ptnDrawer .drawer-profile,
    #ptnDrawer .drawer-profile-grid label
  ):is(:focus-visible, :focus-within) {
    outline: 2px solid var(--zv-focus-ring) !important;
    outline-offset: 3px !important;
  }

  /* Selected/open/active states persist after the pointer leaves. */
  html[data-theme] body :is(
    #page .snapshot-cards > button.selected,
    #page .snapshot-cards > button[aria-pressed="true"],
    #page button.metric-card-button.selected,
    #page .batch-card.active,
    #page .phase-saved-card.active,
    #page .navigation-view-grid > label:has(input:checked),
    #page .permission-grid label:has(input:checked),
    #page .export-field-grid label:has(input:checked),
    #page .model-field-grid label:has(input:checked),
    #page .report-columns label:has(input:checked),
    #page .switch-row:has(input:checked),
    #page .checkbox-row:has(input:checked),
    #page details.user-access[open],
    #page details.print-profile[open],
    #page details.audit-failures[open],
    #ptnDrawer details.drawer-profile[open],
    #ptnDrawer .drawer-profile-grid label:has(input:checked)
  ) {
    border-color: var(--card-tone, var(--zv-focus-ring)) !important;
    background:
      linear-gradient(132deg, color-mix(in srgb, var(--card-tone, var(--zv-focus-ring)) 18%, var(--card-role-selected)) 0%, var(--card-role-selected) 56%, color-mix(in srgb, var(--card-tone, var(--zv-focus-ring)) 8%, var(--card-role-selected)) 100%) !important;
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--card-tone, var(--zv-focus-ring)) 46%, transparent),
      0 9px 22px color-mix(in srgb, var(--card-tone, var(--zv-focus-ring)) 14%, transparent) !important;
  }

  /* Locked/reserved is persistent in cards, guards and program table rows. */
  html[data-theme] body #page :is(.locked, .is-locked, [data-locked="true"]):not(tr),
  html[data-theme] body #page .program-guard {
    border-color: var(--zv-locked-border) !important;
    background: var(--zv-locked-background) !important;
    color: var(--zv-locked-text) !important;
    box-shadow: inset 4px 0 0 var(--zv-locked-border) !important;
  }
  html[data-theme] body #page tr.program-item-row.is-locked > td {
    background: var(--zv-locked-background) !important;
    color: var(--zv-locked-text) !important;
  }
  html[data-theme] body #page tr.program-item-row.is-locked > td:first-child {
    box-shadow: inset 4px 0 0 var(--zv-locked-border);
  }
  html[data-theme] body #page tr.program-item-row.is-released > td {
    background: color-mix(in srgb, var(--zv-status-removed) 8%, var(--zv-surface)) !important;
  }

  /* Filled action buttons always retain accessible white content. */
  html[data-theme] body :is(
    .btn-primary, .btn-success, .btn-danger, .btn-excel,
    .btn-red, .btn-green, .btn-blue,
    #ptnDrawer .btn-secondary
  ) {
    color: #fff !important;
  }
  html[data-theme] body :is(
    .btn-primary, .btn-success, .btn-danger, .btn-excel,
    .btn-red, .btn-green, .btn-blue,
    #ptnDrawer .btn-secondary
  ) :is(span, strong, small, i, em) { color: #fff !important; }
  html[data-theme] body :is(
    .btn-primary, .btn-success, .btn-danger, .btn-excel,
    .btn-red, .btn-green, .btn-blue,
    #ptnDrawer .btn-secondary
  ) svg { stroke: currentColor !important; fill: none; }

  /* Decision Center: every column and child can shrink without clipping. */
  html[data-theme] body #page .decision-command-bar {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    overflow: hidden;
  }
  html[data-theme] body #page .decision-command-bar > div { min-width: 0; max-width: 100%; }
  html[data-theme] body #page .command-legend { min-width: 0; max-width: 100%; }
  html[data-theme] body #page .decision-quadrants {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 100%;
  }
  html[data-theme] body #page .decision-tile,
  html[data-theme] body #page .decision-tile > *,
  html[data-theme] body #page .decision-main > div,
  html[data-theme] body #page .decision-metrics > span { min-width: 0; max-width: 100%; }
  html[data-theme] body #page .decision-main {
    grid-template-columns: minmax(58px, auto) minmax(0, 1fr);
  }
  html[data-theme] body #page .decision-main > strong {
    max-width: 100%;
    font-size: clamp(27px, 2.35vw, 35px);
    overflow-wrap: anywhere;
  }
  html[data-theme] body #page :is(.decision-main h2, .decision-main p, .decision-metrics small, .decision-tile > em) {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* Clean donut ring: the conic paint sits 3px inside and cannot be clipped. */
  html[data-theme] body .donut-wrap {
    min-width: 0;
    overflow: visible !important;
    padding: 18px !important;
  }
  html[data-theme] body .donut-chart {
    position: relative;
    isolation: isolate;
    box-sizing: border-box !important;
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    height: 140px !important;
    padding: 0 !important;
    flex: 0 0 140px;
    overflow: visible !important;
    background: transparent !important;
    filter: none !important;
  }
  html[data-theme] body .donut-chart::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 3px;
    border-radius: 50%;
    background: conic-gradient(from -90deg, var(--donut));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--zv-border) 58%, transparent);
  }
  html[data-theme] body .donut-chart::after {
    z-index: 1;
    inset: 31px !important;
    background: var(--zv-surface) !important;
    box-shadow: inset 0 0 0 1px var(--zv-border) !important;
  }
  html[data-theme] body .donut-chart strong { z-index: 2; color: var(--zv-text) !important; }
  html[data-theme] body .donut-legend i { filter: none !important; }

  /* Numeric lateral axes and exact persisted line colours. */
  html[data-theme] body .chart-axis-line {
    stroke: color-mix(in srgb, var(--zv-border) 88%, var(--zv-muted)) !important;
    stroke-width: 1;
  }
  html[data-theme] body :is(.chart-axis-label, .chart-x-label) {
    fill: var(--zv-muted) !important;
    font-size: 9px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  html[data-theme] body .trend-chart svg { overflow: visible; }
  html[data-theme] body .single-line .chart-line { stroke: var(--series-tone) !important; }
  html[data-theme] body .chart-series-legend span::before { background: var(--legend-tone) !important; }
  html[data-theme] body .single-line #finalizedGradient stop:first-child { stop-color: var(--zv-status-finalized) !important; }
  html[data-theme] body .metric-bars > div > i > u { background: var(--metric-row-tone) !important; }

  /* Granular editor: descriptions and examples stay readable at 58 fields. */
  html[data-theme] body .visual-palette-group > header > b {
    align-self: start;
    min-width: max-content;
    border: 1px solid var(--zv-border);
    border-radius: 999px;
    padding: 4px 8px;
    color: var(--zv-muted);
    font-size: 10px;
  }
  html[data-theme] body .visual-color-field {
    min-height: 92px;
    align-items: start;
    padding: 10px;
  }
  html[data-theme] body .visual-color-field > span {
    display: grid;
    gap: 3px;
    min-width: 0;
    font-weight: 400;
  }
  html[data-theme] body .visual-color-field > span > strong {
    color: var(--zv-text);
    font-size: 12px;
    line-height: 1.25;
  }
  html[data-theme] body .visual-color-field > span > small {
    color: var(--zv-muted);
    font-size: 10px;
    line-height: 1.35;
  }
  html[data-theme] body .visual-color-field > span > em {
    color: color-mix(in srgb, var(--zv-info) 72%, var(--zv-muted));
    font-size: 9px;
    font-style: normal;
    line-height: 1.3;
  }

  html[data-theme] body .visual-preview-kpis .preview-card-primary {
    border-color: var(--preview-primary-card-border);
    background: var(--preview-primary-card-background);
    color: var(--preview-primary-card-title);
  }
  html[data-theme] body .visual-preview-kpis .preview-card-secondary {
    border-color: var(--preview-secondary-card-border);
    background: var(--preview-secondary-card-background);
    color: var(--preview-secondary-card-title);
  }
  html[data-theme] body .visual-preview-kpis article > i {
    justify-self: end;
    color: var(--preview-primary-card-icon);
    font-style: normal;
  }
  html[data-theme] body .visual-preview-kpis .preview-card-secondary > i { color: var(--preview-secondary-card-icon); }
  html[data-theme] body .visual-preview-kpis .preview-card-primary > strong { color: var(--preview-primary-card-value); }
  html[data-theme] body .visual-preview-kpis .preview-card-primary > small { color: var(--preview-primary-card-text); }
  html[data-theme] body .visual-preview-kpis .preview-card-secondary > strong { color: var(--preview-secondary-card-value); }
  html[data-theme] body .visual-preview-kpis .preview-card-secondary > small { color: var(--preview-secondary-card-text); }
  html[data-theme] body .visual-preview-kpis article.selected {
    border-color: var(--preview-focus-ring);
    background: var(--preview-primary-card-selected);
  }
  html[data-theme] body .visual-preview-kpis article.locked {
    border-color: var(--preview-locked-border);
    background: var(--preview-locked-background);
    color: var(--preview-locked-text);
  }
  html[data-theme] body .visual-preview-named-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 6px;
  }
  html[data-theme] body .visual-preview-named-cards > article {
    min-width: 0;
    border: 2px solid color-mix(in srgb, var(--preview-tone) 36%, var(--preview-border));
    border-radius: 9px;
    background: var(--preview-bg);
    color: var(--preview-copy);
    padding: 9px;
  }
  html[data-theme] body .visual-preview-named-cards span {
    display: block;
    color: var(--preview-tone);
    font-size: 8px;
    font-weight: 900;
    text-transform: uppercase;
  }
  html[data-theme] body .visual-preview-named-cards strong {
    display: block;
    margin-top: 5px;
    color: var(--preview-copy);
    font-size: var(--preview-size);
    line-height: 1;
  }
  html[data-theme] body :is(.visual-preview-statuses, .visual-preview-occurrences) {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 9px;
  }
  html[data-theme] body .visual-preview-occurrences { margin-top: 5px; }
  html[data-theme] body .visual-preview-section-label {
    display: block;
    margin-top: 10px;
    color: var(--preview-muted);
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  html[data-theme] body :is(.visual-preview-statuses, .visual-preview-occurrences) > span {
    border: 1px solid color-mix(in srgb, var(--preview-status) 62%, var(--preview-border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--preview-status) 12%, var(--preview-surface));
    color: var(--preview-status);
    padding: 4px 7px;
    font-size: 8px;
    font-weight: 800;
  }

  /* Abrir PTN modelo 2 stays flat: reflection comes from light/shadow, never a fill gradient. */
  html[data-theme] body #ptnDrawer :is(
    .drawer-profile,
    .drawer-profile-grid label
  ):is(:hover, :focus-visible, :focus-within) {
    background: color-mix(in srgb, var(--card-tone) 5%, var(--card-role-bg)) !important;
    box-shadow:
      0 16px 32px color-mix(in srgb, var(--card-tone) 18%, transparent),
      0 5px 12px color-mix(in srgb, var(--zv-text) 10%, transparent),
      inset 0 2px 0 color-mix(in srgb, #fff 84%, transparent),
      inset 0 -1px 0 color-mix(in srgb, var(--card-tone) 20%, transparent) !important;
  }
  html[data-theme] body #ptnDrawer :is(
    details.drawer-profile[open],
    .drawer-profile-grid label:has(input:checked)
  ) {
    background: color-mix(in srgb, var(--card-tone, var(--zv-focus-ring)) 8%, var(--card-role-selected)) !important;
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--card-tone, var(--zv-focus-ring)) 44%, transparent),
      inset 0 2px 0 color-mix(in srgb, #fff 78%, transparent),
      0 9px 22px color-mix(in srgb, var(--card-tone, var(--zv-focus-ring)) 14%, transparent) !important;
  }

  /*
   * FINAL CARD CONTRACT — one geometry for both themes and every screen.
   * The complete outline is always reserved, becomes vivid on hover and
   * remains vivid after selection.  No underline is used as interaction state.
   */
  html[data-theme] body #page [data-visual-card] {
    --card-tone: var(--visual-tone, var(--card-role-icon, var(--zv-info)));
    box-sizing: border-box !important;
    border: 2px solid color-mix(in srgb, var(--card-tone) 25%, var(--card-role-border, var(--zv-border))) !important;
    outline: 2px solid transparent !important;
    outline-offset: 1px !important;
    background-color: var(--semantic-card-bg, var(--card-role-bg, var(--zv-card))) !important;
    transition: border-color 150ms ease, outline-color 150ms ease, background 190ms ease, box-shadow 190ms ease, transform 150ms ease !important;
  }
  html[data-theme] body #page [data-visual-card]:is(:hover, :focus-visible, :focus-within) {
    border-color: var(--card-tone) !important;
    outline-color: color-mix(in srgb, var(--card-tone) 72%, transparent) !important;
    background:
      linear-gradient(112deg,
        transparent 0 13%,
        color-mix(in srgb, var(--card-tone) 8%, transparent) 22%,
        color-mix(in srgb, #fff 94%, var(--card-tone)) 43%,
        color-mix(in srgb, #fff 99%, transparent) 50%,
        color-mix(in srgb, var(--card-tone) 20%, transparent) 63%,
        transparent 82% 100%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--card-tone) 14%, var(--semantic-card-bg, var(--card-role-bg, var(--zv-card)))) 0%,
        var(--semantic-card-bg, var(--card-role-bg, var(--zv-card))) 76%) !important;
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--card-tone) 46%, transparent),
      0 15px 34px color-mix(in srgb, var(--card-tone) 28%, transparent),
      inset 0 2px 0 color-mix(in srgb, #fff 96%, transparent),
      inset 0 -2px 0 color-mix(in srgb, var(--card-tone) 42%, transparent) !important;
    transform: translateY(-2px) !important;
  }
  html[data-theme] body #page [data-visual-card]:is(
    .selected, .active, [aria-pressed="true"], [data-selected="true"]
  ) {
    border-color: var(--card-tone) !important;
    outline-color: color-mix(in srgb, var(--card-tone) 82%, transparent) !important;
    background:
      linear-gradient(128deg,
        color-mix(in srgb, var(--card-tone) 19%, var(--semantic-card-bg, var(--card-role-selected, var(--zv-card)))) 0%,
        var(--semantic-card-bg, var(--card-role-selected, var(--zv-card))) 52%,
        color-mix(in srgb, var(--card-tone) 10%, var(--semantic-card-bg, var(--card-role-selected, var(--zv-card)))) 100%) !important;
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--card-tone) 55%, transparent),
      0 10px 25px color-mix(in srgb, var(--card-tone) 21%, transparent),
      inset 0 0 0 1px color-mix(in srgb, var(--card-tone) 34%, transparent) !important;
  }

  /* Every filled action has the same high-contrast content contract. */
  html[data-theme] body :is(.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-excel, .btn-blue, .btn-green, .btn-red) {
    color: #fff !important;
  }
  html[data-theme] body .btn-secondary {
    border-color: color-mix(in srgb, var(--zv-info) 78%, #000) !important;
    background: var(--zv-info) !important;
  }
  html[data-theme] body :is(.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-excel, .btn-blue, .btn-green, .btn-red) :is(span, strong, small, i, em) {
    color: #fff !important;
  }

  /* Configuration editor: clear business subgroups and size controls. */
  html[data-theme] body .visual-palette-grouped { align-items: stretch; }
  html[data-theme] body .visual-subgroup-title {
    grid-column: 1 / -1;
    margin: 12px 0 0;
    border-left: 4px solid var(--zv-accent);
    border-bottom: 1px solid var(--zv-border);
    padding: 7px 10px;
    color: var(--zv-text);
    font-size: 13px;
    letter-spacing: .02em;
  }
  html[data-theme] body .visual-color-field > input[type="number"] {
    width: 58px;
    height: 38px;
    border: 1px solid var(--zv-border);
    border-radius: 8px;
    background: var(--zv-surface);
    color: var(--zv-text);
    padding: 0 6px;
    font-weight: 800;
  }

  /* Abrir PTN: Programado and its date occupy separate, contained lines. */
  html[data-theme] body #ptnDrawer .drawer-identity-summary > div:nth-child(2) {
    min-width: 0;
    overflow: hidden;
  }
  html[data-theme] body #ptnDrawer .drawer-identity-summary > div:nth-child(2) .tag {
    display: inline-flex !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
  }
  html[data-theme] body #ptnDrawer .drawer-programmed-tag {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: start !important;
    gap: 2px !important;
  }
  html[data-theme] body #ptnDrawer .drawer-programmed-tag :is(strong, small) {
    display: block;
    max-width: 100%;
    color: inherit !important;
    font-size: inherit;
    white-space: normal;
  }

  html[data-theme] body #page .program-occurrence-title {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin: 14px 0 8px;
    border-top: 1px solid var(--zv-border);
    padding-top: 11px;
  }
  html[data-theme] body #page .program-occurrence-title > span {
    color: var(--zv-status-finalized);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .1em;
  }
  html[data-theme] body #page .program-occurrence-title > small {
    color: var(--zv-muted);
    font-size: 10px;
  }
}

@media (max-width: 1180px) {
  html[data-theme] body #page .decision-quadrants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  html[data-theme] body #page .decision-quadrants { grid-template-columns: 1fr; }
  html[data-theme] body .donut-wrap { grid-template-columns: 1fr !important; justify-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] body :is(
    #page button.metric-card-button,
    #page .ptn-indicator-grid > button,
    #page .snapshot-cards > button,
    #page .program-pulse > button,
    #page .client-picking-cards > button,
    #page .decision-item,
    #page .decision-tile,
    #page .schedule-card,
    #page .batch-card,
    #page .phase-saved-card,
    #page .user-access,
    #page .print-profile,
    #page .program-type-manager,
    #page .audit-failures,
    #ptnDrawer .drawer-profile
  ) { transition: none !important; }
}

@media print {
  /* The editor must never leak into operational printouts. */
  .visual-config-shell { display: none !important; }
}

/* 0.17.7 — uniformidade final: mesma geometria nos dois temas. */
@media screen {
  html[data-theme] body #page [data-visual-card] {
    overflow: visible !important;
    outline: 0 !important;
    background:
      linear-gradient(138deg,
        color-mix(in srgb, var(--card-tone) 13%, var(--semantic-card-bg, var(--card-role-bg, var(--zv-card)))) 0%,
        var(--semantic-card-bg, var(--card-role-bg, var(--zv-card))) 57%,
        color-mix(in srgb, var(--card-tone) 7%, var(--semantic-card-bg, var(--card-role-bg, var(--zv-card)))) 100%) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--card-tone) 10%, transparent) !important;
  }
  html[data-theme="dark"] body #page [data-visual-card] {
    background:
      linear-gradient(138deg,
        color-mix(in srgb, var(--card-tone) 15%, var(--semantic-card-bg, var(--card-role-bg, var(--zv-card)))) 0%,
        var(--semantic-card-bg, var(--card-role-bg, var(--zv-card))) 58%,
        color-mix(in srgb, var(--card-tone) 9%, var(--semantic-card-bg, var(--card-role-bg, var(--zv-card)))) 100%) !important;
  }
  html[data-theme] body #page [data-visual-card]:is(:hover, :focus-visible, :focus-within) {
    border: 2px solid var(--card-tone) !important;
    outline: 0 !important;
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--card-tone) 80%, transparent),
      0 16px 34px color-mix(in srgb, var(--card-tone) 28%, transparent),
      inset 0 2px 0 color-mix(in srgb, #fff 96%, transparent),
      inset 0 -2px 0 color-mix(in srgb, var(--card-tone) 42%, transparent) !important;
  }
  html[data-theme] body #page [data-visual-card]:is(.selected, .active, [aria-pressed="true"], [data-selected="true"]) {
    border: 2px solid var(--card-tone) !important;
    outline: 0 !important;
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--card-tone) 84%, transparent),
      0 10px 25px color-mix(in srgb, var(--card-tone) 22%, transparent),
      inset 0 0 0 1px color-mix(in srgb, var(--card-tone) 36%, transparent) !important;
  }
  html[data-theme] body #page :is(
    .snapshot-cards, .ptn-indicator-grid, .client-picking-cards,
    .kpi-grid, .program-summary-primary, .program-status-grid,
    .finalized-secondary-kpis, .batch-grid
  ) {
    box-sizing: border-box;
    padding: 3px !important;
    overflow: visible !important;
  }

  /* Programação: retângulos compactos, linha principal maior e ocorrências menores. */
  html[data-theme] body #page .program-status-grid-primary {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }
  html[data-theme] body #page .program-occurrence-grid {
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)) !important;
  }
  html[data-theme] body #page .program-occurrence-grid .program-status-counter {
    min-height: 52px !important;
    padding: 7px 8px !important;
  }
  html[data-theme] body #page .program-occurrence-grid .program-status-counter > strong {
    font-size: clamp(18px, 1.4vw, 22px) !important;
  }
  html[data-theme] body #page .batch-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  html[data-theme] body #page .batch-card {
    display: grid !important;
    min-height: 176px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    gap: 9px !important;
    align-content: start !important;
    border-radius: 10px !important;
    background: var(--zv-surface) !important;
    padding: 15px !important;
  }
  html[data-theme] body #page .batch-card.active {
    background: var(--zv-surface) !important;
    border: 1px solid var(--zv-border) !important;
    box-shadow: none !important;
  }
  html[data-theme] body #page .batch-card-copy h2 {
    margin: 7px 0 3px !important;
    font-size: clamp(16px, 1.25vw, 20px) !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere;
  }
  html[data-theme] body #page .batch-card-copy p {
    margin: 0 !important;
    min-height: 0 !important;
    font-size: 11px !important;
  }
  html[data-theme] body #page .batch-meta {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 6px 10px !important;
    align-items: center !important;
  }
  html[data-theme] body #page .batch-meta > strong {
    font-size: 19px !important;
    line-height: 1.05 !important;
  }
  html[data-theme] body #page .batch-status-counts {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  html[data-theme] body #page .batch-status-counts > span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 999px !important;
    padding: 3px 7px !important;
    font-size: 9px !important;
  }
  html[data-theme] body #page .batch-actions {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
  }
  html[data-theme] body #page .program-filter-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(155px, 220px)) auto auto 1fr;
    gap: 9px;
    align-items: end;
    border: 1px solid var(--zv-border);
    border-radius: 10px;
    background: var(--zv-surface);
    margin: 10px 0;
    padding: 11px;
  }
  html[data-theme] body #page .program-filter-bar label {
    display: grid;
    gap: 4px;
    color: var(--zv-muted);
    font-size: 10px;
    font-weight: 800;
  }
  html[data-theme] body #page .program-filter-bar > strong {
    justify-self: end;
    align-self: center;
    color: var(--zv-accent);
    font-size: 12px;
  }

  /* Menu administrativo realmente dinâmico. */
  html[data-theme] body #page .navigation-group-labels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
  }
  html[data-theme] body #page .navigation-group-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 8px;
    align-items: end;
    border: 1px solid var(--zv-border);
    border-radius: 9px;
    background: var(--zv-surface);
    padding: 9px;
  }
  html[data-theme] body #page .navigation-group-editor > span {
    grid-column: 1 / -1;
    color: var(--zv-muted);
    font-size: 9px;
    font-weight: 850;
    text-transform: uppercase;
  }
  html[data-theme] body #page .panel-head-actions {
    display: flex;
    gap: 7px;
    align-items: center;
    flex-wrap: wrap;
  }

  /* Visão geral 3: heatmap executivo e rankings. */
  html[data-theme] body #page .overview3-executive-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(320px, .7fr);
    gap: 12px;
    margin: 10px 0 12px;
  }
  html[data-theme] body #page .overview3-ranking-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  html[data-theme] body #page .executive-heatmap {
    display: grid;
    gap: 5px;
    padding: 12px;
  }
  html[data-theme] body #page :is(.heatmap-head, .heatmap-row) {
    display: grid;
    grid-template-columns: minmax(130px, 1.1fr) repeat(6, minmax(50px, 1fr));
    gap: 5px;
    min-width: 0;
  }
  html[data-theme] body #page .heatmap-head strong {
    overflow: hidden;
    color: var(--zv-muted);
    font-size: 8px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html[data-theme] body #page .heatmap-row > strong {
    overflow: hidden;
    align-self: center;
    color: var(--zv-text);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html[data-theme] body #page .heatmap-cell {
    min-height: 35px;
    border: 1px solid color-mix(in srgb, var(--zv-accent) calc(var(--heat-strength) * 70%), var(--zv-border));
    border-radius: 6px;
    background: color-mix(in srgb, var(--zv-accent) calc(var(--heat-strength) * 38%), var(--zv-surface));
    color: var(--zv-text);
    cursor: pointer;
  }

  /* Autorização operacional: senha obrigatoriamente antes do motivo. */
  html[data-theme] body .operational-auth-backdrop {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(4, 13, 20, .72);
    backdrop-filter: blur(8px);
    padding: 18px;
  }
  html[data-theme] body .operational-auth-card {
    position: relative;
    display: grid;
    width: min(440px, 100%);
    gap: 12px;
    border: 1px solid var(--zv-border);
    border-top: 4px solid var(--zv-accent);
    border-radius: 12px;
    background: var(--zv-surface);
    color: var(--zv-text);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .35);
    padding: 24px;
  }
  html[data-theme] body .operational-auth-card h2,
  html[data-theme] body .operational-auth-card p { margin: 0; }
  html[data-theme] body .operational-auth-card label { display: grid; gap: 5px; font-weight: 800; }
  html[data-theme] body .operational-auth-card > div { display: flex; justify-content: flex-end; gap: 8px; }
  html[data-theme] body .operational-auth-close {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 32px;
    height: 32px;
    border: 1px solid var(--zv-border);
    border-radius: 8px;
    background: transparent;
    color: var(--zv-danger);
    font-size: 20px;
  }
  html[data-theme] body #page .action-authorization-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr)) auto;
    gap: 10px;
    align-items: end;
  }
  html[data-theme] body #page .action-authorization-fields label { display: grid; gap: 5px; }

  html[data-theme] body #page .metric-drilldown { margin-top: 14px; scroll-margin-top: 120px; }
}

@media (max-width: 1180px) {
  html[data-theme] body #page .batch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html[data-theme] body #page .program-status-grid-primary { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  html[data-theme] body #page .program-occurrence-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  html[data-theme] body #page .overview3-executive-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  html[data-theme] body #page .batch-grid,
  html[data-theme] body #page .program-status-grid-primary,
  html[data-theme] body #page .program-occurrence-grid,
  html[data-theme] body #page .overview3-ranking-grid { grid-template-columns: 1fr !important; }
  html[data-theme] body #page .program-filter-bar,
  html[data-theme] body #page .action-authorization-fields { grid-template-columns: 1fr; }
  html[data-theme] body #page .program-filter-bar > strong { justify-self: start; }
  html[data-theme] body #page .overview3-heatmap { overflow-x: auto; }
  html[data-theme] body #page .executive-heatmap { min-width: 720px; }
}

/* 0.17.7 · acabamento executivo configurável. Esta é a trava final da
   cascata: mesma geometria nos dois temas, variando somente a paleta. */
@media screen {
  html[data-theme] body .btn-primary {
    border-color: var(--zv-button-primary-bg) !important;
    background: var(--zv-button-primary-bg) !important;
    color: var(--zv-button-primary-text) !important;
  }
  html[data-theme] body :is(.btn-secondary, .btn-blue) {
    border-color: var(--zv-button-secondary-bg) !important;
    background: var(--zv-button-secondary-bg) !important;
    color: var(--zv-button-secondary-text) !important;
  }
  html[data-theme] body :is(.btn-excel, .btn-green) {
    border-color: var(--zv-button-excel-bg) !important;
    background: var(--zv-button-excel-bg) !important;
    color: var(--zv-button-excel-text) !important;
  }
  html[data-theme] body :is(.btn-primary, .btn-secondary, .btn-blue, .btn-excel, .btn-green) :is(span, strong, small, i, em) {
    color: inherit !important;
  }

  html[data-theme] body .tag {
    border-color: var(--zv-tag-border) !important;
    background-color: var(--zv-tag-background) !important;
    color: var(--zv-tag-text) !important;
  }
  html[data-theme] body .tag[data-visual-semantic] {
    border-color: color-mix(in srgb, var(--visual-tone) 58%, var(--zv-tag-border)) !important;
    background: color-mix(in srgb, var(--visual-tone) 12%, var(--zv-tag-background)) !important;
    color: color-mix(in srgb, var(--visual-tone) 84%, var(--zv-tag-text)) !important;
  }

  /* A coloração normal é suave e borrada; o espelho forte só surge no hover.
     O mesmo contrato vale para claro e escuro. */
  html[data-theme] body #page [data-visual-card] {
    background:
      linear-gradient(132deg,
        color-mix(in srgb, var(--card-tone) 30%, var(--semantic-card-bg, var(--card-role-bg, var(--zv-card)))) 0%,
        color-mix(in srgb, var(--card-tone) 13%, var(--semantic-card-bg, var(--card-role-bg, var(--zv-card)))) 35%,
        var(--semantic-card-bg, var(--card-role-bg, var(--zv-card))) 68%,
        color-mix(in srgb, var(--card-tone) 10%, var(--semantic-card-bg, var(--card-role-bg, var(--zv-card)))) 100%) !important;
  }
  html[data-theme] body #page [data-visual-card]:is(:hover, :focus-visible, :focus-within) {
    border-color: var(--card-tone) !important;
    outline: 2px solid color-mix(in srgb, var(--card-tone) 76%, transparent) !important;
    outline-offset: 1px !important;
    background:
      linear-gradient(107deg,
        transparent 0 15%,
        color-mix(in srgb, var(--card-tone) 18%, transparent) 27%,
        color-mix(in srgb, #fff 94%, var(--card-tone)) 43%,
        color-mix(in srgb, #fff 99%, transparent) 50%,
        color-mix(in srgb, var(--card-tone) 28%, transparent) 61%,
        transparent 78% 100%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--card-tone) 21%, var(--semantic-card-bg, var(--card-role-bg, var(--zv-card)))) 0%,
        var(--semantic-card-bg, var(--card-role-bg, var(--zv-card))) 78%) !important;
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--card-tone) 58%, transparent),
      0 17px 38px color-mix(in srgb, var(--card-tone) 32%, transparent),
      inset 0 2px 0 color-mix(in srgb, #fff 96%, transparent),
      inset 0 -2px 0 color-mix(in srgb, var(--card-tone) 44%, transparent) !important;
  }

  /* Abrir PTN nunca recebe o degradê dos cards externos. */
  html[data-theme] body #ptnDrawer,
  html[data-theme] body #ptnDrawer :is(.drawer-head, .drawer-content, .drawer-actions, .drawer-identity-header, .drawer-tab-panel) {
    background: var(--zv-drawer-background) !important;
    background-image: none !important;
    color: var(--zv-drawer-text) !important;
  }
  html[data-theme] body #ptnDrawer :is(.drawer-section, .drawer-profile, .drawer-summary > div, .detail-box, .drawer-trace-summary > article, .mini-table, .timeline > div) {
    border-color: var(--zv-drawer-border) !important;
    background: var(--zv-drawer-panel) !important;
    background-image: none !important;
    color: var(--zv-drawer-text) !important;
  }
  html[data-theme] body #ptnDrawer :is(.drawer-identity-copy h3, .section-title h4, .drawer-tab.active, .drawer-profile summary strong) {
    color: var(--zv-drawer-title) !important;
  }
  html[data-theme] body #ptnDrawer .drawer-tab.active {
    border-bottom-color: var(--zv-drawer-tab-active) !important;
    color: var(--zv-drawer-tab-active) !important;
  }
  html[data-theme] body #ptnDrawer :is(.mini-table > div, .history-list > div) {
    border-color: color-mix(in srgb, var(--zv-drawer-border) 70%, transparent) !important;
    background: var(--zv-drawer-panel) !important;
    background-image: none !important;
  }

  html[data-theme] body .chart-grid-line { stroke: var(--zv-chart-grid) !important; }
  html[data-theme] body :is(.trend-chart, .chart-panel, .chart-card) svg text { fill: var(--zv-chart-label) !important; }
  html[data-theme] body .donut-chart::after {
    background: var(--zv-donut-center) !important;
  }
  html[data-theme] body .donut-chart strong { color: var(--zv-donut-center-text) !important; }

  html[data-theme] body .visual-preview-actions .preview-action-primary {
    background: var(--preview-button-primary-bg) !important;
    color: var(--preview-button-primary-text) !important;
  }
  html[data-theme] body .visual-preview-actions .preview-action-secondary {
    background: var(--preview-button-secondary-bg) !important;
    color: var(--preview-button-secondary-text) !important;
  }
  html[data-theme] body .visual-preview-actions .preview-action-excel {
    background: var(--preview-button-excel-bg) !important;
    color: var(--preview-button-excel-text) !important;
  }
  html[data-theme] body .visual-preview-drawer {
    display: grid;
    gap: 4px;
    margin-top: 9px;
    border: 1px solid var(--preview-drawer-border);
    border-radius: 8px;
    background: var(--preview-drawer-background);
    color: var(--preview-drawer-text);
    padding: 10px;
  }
  html[data-theme] body .visual-preview-drawer strong { color: var(--preview-drawer-title); }
  html[data-theme] body .visual-preview-drawer i { color: var(--preview-drawer-tab-active); font-style: normal; font-weight: 850; }

  html[data-theme] body #page .heatmap-cell {
    border-color: color-mix(in srgb, var(--zv-accent) var(--heat-alpha), var(--zv-border));
    background: color-mix(in srgb, var(--zv-accent) var(--heat-alpha), var(--zv-surface));
  }
}

/* 0.17.8 · trava final solicitada: seleção cumulativa visível, respiro
   uniforme e cartões de programação neutros até receberem interação. */
@media screen {
  html[data-theme] body #page :is(
    .snapshot-cards, .client-picking-cards, .ptn-indicator-grid,
    .kpi-grid, .program-summary-primary, .program-status-grid,
    .finalized-secondary-kpis, .batch-grid
  ) {
    gap: 10px !important;
    padding: 5px !important;
  }

  html[data-theme] body #page .locked-filter-card[aria-pressed="true"] {
    border: 2px solid var(--card-tone) !important;
    outline: 2px solid color-mix(in srgb, var(--card-tone) 82%, transparent) !important;
    outline-offset: 2px !important;
    background:
      linear-gradient(107deg,
        color-mix(in srgb, var(--card-tone) 8%, transparent) 0 16%,
        color-mix(in srgb, var(--card-tone) 26%, transparent) 30%,
        color-mix(in srgb, #fff 94%, var(--card-tone)) 46%,
        color-mix(in srgb, var(--card-tone) 30%, transparent) 63%,
        color-mix(in srgb, var(--card-tone) 9%, transparent) 82% 100%),
      var(--semantic-card-bg, var(--card-role-bg, var(--zv-card))) !important;
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--card-tone) 62%, transparent),
      0 15px 32px color-mix(in srgb, var(--card-tone) 28%, transparent),
      inset 0 2px 0 color-mix(in srgb, #fff 94%, transparent),
      inset 0 -2px 0 color-mix(in srgb, var(--card-tone) 42%, transparent) !important;
  }

  html[data-theme] body #page .batch-card,
  html[data-theme] body #page .batch-card.is-running,
  html[data-theme] body #page .batch-card.draft {
    min-height: 188px !important;
    border: 1px solid var(--zv-border) !important;
    background: var(--zv-surface) !important;
    background-image: none !important;
    box-shadow: 0 5px 16px color-mix(in srgb, var(--zv-text) 8%, transparent) !important;
  }
  html[data-theme] body #page .batch-card:is(:hover, :focus-within) {
    border: 2px solid var(--card-tone) !important;
    background:
      linear-gradient(107deg,
        transparent 0 17%,
        color-mix(in srgb, var(--card-tone) 19%, transparent) 31%,
        color-mix(in srgb, #fff 95%, var(--card-tone)) 48%,
        color-mix(in srgb, var(--card-tone) 22%, transparent) 64%,
        transparent 80% 100%),
      var(--zv-surface) !important;
    box-shadow: 0 15px 30px color-mix(in srgb, var(--card-tone) 24%, transparent) !important;
  }
  html[data-theme] body #page .batch-meta {
    grid-template-columns: minmax(92px, auto) minmax(0, 1fr) !important;
    grid-template-areas:
      "total states"
      "owner owner"
      "tag tag" !important;
    gap: 7px 12px !important;
    align-items: center !important;
  }
  html[data-theme] body #page .batch-meta > strong { grid-area: total; }
  html[data-theme] body #page .batch-status-counts {
    grid-area: states;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    min-width: 0 !important;
  }
  html[data-theme] body #page .batch-status-counts > span {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px !important;
    min-width: 0 !important;
    border-radius: 7px !important;
    padding: 5px 6px !important;
  }
  html[data-theme] body #page .batch-status-counts > span em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html[data-theme] body #page .batch-owner {
    grid-area: owner !important;
    display: flex !important;
    gap: 7px;
    min-width: 0;
  }
  html[data-theme] body #page .batch-owner > span {
    overflow: hidden;
    max-width: 55%;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html[data-theme] body #page .batch-owner > small {
    overflow: hidden;
    color: var(--zv-muted) !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html[data-theme] body #page .batch-meta > .tag {
    grid-area: tag !important;
    justify-self: start !important;
  }
  html[data-theme] body #page .batch-card-copy h2,
  html[data-theme] body #page .batch-card-copy p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* 0.17.9-test.1 — trava de cascata carregada por último */
@media screen {
  html[data-theme] body #page .ptn-specific-filters {
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(190px, .72fr) !important;
    gap: 10px !important;
    align-items: end !important;
  }
  html[data-theme] body #page .picking-client-summary {
    min-width: 0 !important;
    overflow: hidden !important;
  }
  html[data-theme] body #page .client-picking-cards {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 4px 4px 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-gutter: stable;
  }
  html[data-theme] body #page .client-picking-cards > button {
    flex: 0 0 clamp(250px, 23vw, 330px) !important;
    width: auto !important;
    min-width: 250px !important;
    scroll-snap-align: start;
  }
  html[data-theme] body #page .client-picking-cards::-webkit-scrollbar { height: 10px !important; }
  html[data-theme] body #page .client-picking-cards::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--zv-border) 62%, transparent) !important;
    border-radius: 999px !important;
  }
  html[data-theme] body #page .client-picking-cards::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--zv-blue) 58%, var(--zv-border)) !important;
    border-radius: 999px !important;
  }
  html[data-theme] body .picking-profile-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 5000 !important;
    display: grid !important;
    place-items: center !important;
    padding: 24px !important;
    overflow: auto !important;
    background: rgb(6 15 24 / .66) !important;
    backdrop-filter: blur(8px) !important;
  }
  html[data-theme] body .picking-profile-modal > section {
    width: min(920px, 100%) !important;
    max-height: calc(100vh - 48px) !important;
    overflow: auto !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 18px !important;
    background: var(--zv-surface) !important;
    background-image: none !important;
    box-shadow: 0 28px 80px rgb(0 0 0 / .32) !important;
  }
}
@media (max-width: 760px) {
  html[data-theme] body #page .ptn-specific-filters { grid-template-columns: 1fr !important; }
  html[data-theme] body #page .client-picking-cards > button {
    flex-basis: min(82vw, 310px) !important;
    min-width: min(82vw, 310px) !important;
  }
  html[data-theme] body .picking-profile-modal { padding: 10px !important; }
  html[data-theme] body .picking-profile-modal > section { max-height: calc(100vh - 20px) !important; }
}

/* 0.18.0 · Programação executiva: cor semântica já em repouso, mesma
   geometria nos temas e lotes compactos/retangulares. */
@media screen {
  html[data-theme="light"] body #page .program-status-counter {
    border: 1px solid color-mix(in srgb, var(--card-tone) 58%, var(--zv-border)) !important;
    background:
      linear-gradient(112deg,
        color-mix(in srgb, var(--card-tone) 22%, #fff) 0%,
        color-mix(in srgb, var(--card-tone) 10%, #fff) 38%,
        #fff 76%) !important;
    box-shadow:
      inset 4px 0 0 var(--card-tone),
      0 5px 14px color-mix(in srgb, var(--card-tone) 12%, transparent) !important;
  }
  html[data-theme="dark"] body #page .program-status-counter {
    border: 1px solid color-mix(in srgb, var(--card-tone) 58%, var(--zv-border)) !important;
    background:
      linear-gradient(112deg,
        color-mix(in srgb, var(--card-tone) 24%, var(--zv-card)) 0%,
        color-mix(in srgb, var(--card-tone) 12%, var(--zv-card)) 42%,
        var(--zv-card) 80%) !important;
    box-shadow:
      inset 4px 0 0 var(--card-tone),
      0 5px 14px color-mix(in srgb, var(--card-tone) 15%, transparent) !important;
  }
  html[data-theme] body #page .program-status-counter > div {
    min-width: 0 !important;
  }
  html[data-theme] body #page .program-status-counter :is(span, small) {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  html[data-theme] body #page .program-status-counter > strong {
    flex: 0 0 auto !important;
    margin-left: 7px !important;
  }
  html[data-theme] body #page .program-occurrence-grid .program-status-counter {
    min-height: 66px !important;
  }

  html[data-theme] body #page .batch-card,
  html[data-theme] body #page .batch-card.is-running,
  html[data-theme] body #page .batch-card.draft {
    min-height: 158px !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 11px !important;
    background: var(--zv-surface) !important;
    background-image: none !important;
    padding: 13px 14px !important;
  }
  html[data-theme] body #page .batch-card-copy h2 {
    margin: 5px 0 2px !important;
    font-size: clamp(15px, 1.08vw, 18px) !important;
  }
  html[data-theme] body #page .batch-card-copy p {
    font-size: 10px !important;
  }
  html[data-theme] body #page .batch-meta {
    grid-template-columns: minmax(82px, .55fr) minmax(190px, 1.45fr) !important;
    grid-template-areas:
      "total states"
      "owner owner"
      "tag tag" !important;
    gap: 6px 10px !important;
  }
  html[data-theme] body #page .batch-meta > strong {
    display: grid !important;
    align-content: center !important;
    min-width: 0 !important;
  }
  html[data-theme] body #page .batch-meta > strong > b {
    font-size: 22px !important;
    line-height: 1 !important;
  }
  html[data-theme] body #page .batch-meta > strong > span {
    font-size: 9px !important;
    white-space: normal !important;
  }
  html[data-theme] body #page .batch-status-counts > span {
    grid-template-columns: 1fr !important;
    gap: 1px !important;
    align-content: center !important;
    min-height: 39px !important;
    padding: 4px 6px !important;
  }
  html[data-theme] body #page .batch-status-counts > span b {
    font-size: 14px !important;
    line-height: 1 !important;
  }
  html[data-theme] body #page .batch-status-counts > span em {
    overflow: visible !important;
    font-size: 8px !important;
    line-height: 1.1 !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }
  html[data-theme] body #page .batch-owner {
    justify-content: space-between !important;
    border-top: 1px solid var(--zv-border) !important;
    padding-top: 5px !important;
  }
  html[data-theme] body #page .batch-owner > span {
    max-width: 48% !important;
  }
  html[data-theme] body #page .batch-actions {
    margin-top: auto !important;
  }
}

/* 0.18.0 · trava final dos indicadores de Todos os PTNs.
   Mantém a mesma geometria nos dois temas; somente a superfície muda. */
@media screen {
  html[data-theme] body #page .ptn-indicator-grid > button {
    --card-tone: var(--zv-blue);
    border: 1px solid color-mix(in srgb, var(--card-tone) 62%, var(--zv-border)) !important;
    border-left: 3px solid var(--card-tone) !important;
    color: var(--zv-text) !important;
  }
  html[data-theme] body #page .ptn-indicator-grid > button.tone-red { --card-tone: var(--zv-red); }
  html[data-theme] body #page .ptn-indicator-grid > button.tone-amber,
  html[data-theme] body #page .ptn-indicator-grid > button.tone-orange { --card-tone: var(--zv-amber); }
  html[data-theme] body #page .ptn-indicator-grid > button.tone-purple { --card-tone: var(--zv-purple); }
  html[data-theme] body #page .ptn-indicator-grid > button.tone-teal { --card-tone: var(--zv-teal); }
  html[data-theme] body #page .ptn-indicator-grid > button.tone-green { --card-tone: var(--zv-green); }
  html[data-theme="light"] body #page .ptn-indicator-grid > button {
    background: linear-gradient(128deg, color-mix(in srgb, var(--card-tone) 8%, #fff) 0%, #fff 72%) !important;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--card-tone) 9%, transparent) !important;
  }
  html[data-theme="dark"] body #page .ptn-indicator-grid > button {
    background: linear-gradient(128deg, color-mix(in srgb, var(--card-tone) 20%, #102535) 0%, #102535 74%) !important;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--card-tone) 14%, transparent) !important;
  }
  html[data-theme] body #page .ptn-indicator-grid > button :is(span, em) {
    color: var(--card-tone) !important;
  }
  html[data-theme] body #page .ptn-indicator-grid > button :is(strong, small) {
    color: var(--zv-text) !important;
  }
  html[data-theme] body #page .ptn-indicator-icon {
    border-color: color-mix(in srgb, var(--card-tone) 54%, var(--zv-border)) !important;
    background: color-mix(in srgb, var(--card-tone) 10%, transparent) !important;
    color: var(--card-tone) !important;
  }
  html[data-theme] body #page .ptn-indicator-icon :is(svg, path, circle, rect, line, polyline) {
    color: inherit !important;
    fill: none !important;
    stroke: currentColor !important;
  }
}

/* 0.18.1 · trava final do fechamento operacional.
   Este bloco fica deliberadamente no fim para não ser sobrescrito por
   contratos visuais legados ainda carregados por compatibilidade. */
@media screen {
  html[data-theme] body #page .pendency-mass-toolbar {
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) auto auto auto auto !important;
    gap: 9px !important;
    align-items: center !important;
    margin: 12px 0 !important;
    border: 1px solid var(--zv-border) !important;
    border-left: 3px solid var(--zv-info) !important;
    border-radius: 10px !important;
    background: var(--zv-surface) !important;
    padding: 11px 13px !important;
  }
  html[data-theme] body #page .pendency-mass-toolbar > div {
    display: grid !important;
    gap: 2px !important;
  }
  html[data-theme] body #page .pendency-mass-toolbar > div span {
    color: var(--zv-muted) !important;
    font-size: 10px !important;
  }
  html[data-theme] body #page .pendency-mass-toolbar.active {
    border-left-color: var(--zv-status-programming) !important;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--zv-status-programming) 12%, transparent) !important;
  }
  html[data-theme] body #page .pendency-table .check-cell {
    width: 42px !important;
    text-align: center !important;
  }

  html[data-theme] body #page .batch-status-counts {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(62px, 1fr)) !important;
    width: 100% !important;
    gap: 6px !important;
  }
  html[data-theme] body #page .batch-status-counts > span {
    display: grid !important;
    grid-template: 18px 11px / 1fr !important;
    align-content: center !important;
    justify-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    box-sizing: border-box !important;
    gap: 1px !important;
    padding: 5px 7px !important;
  }
  html[data-theme] body #page .batch-status-counts > span b {
    font-size: 14px !important;
    line-height: 18px !important;
  }
  html[data-theme] body #page .batch-status-counts > span em {
    overflow: hidden !important;
    width: 100% !important;
    font-size: 8px !important;
    line-height: 11px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body .auth-brand .brand-mark img {
    width: 118% !important;
    height: 118% !important;
    max-width: none !important;
    object-fit: contain !important;
    transform: translate(-7.5%, -7.5%) !important;
  }

  html[data-theme] body #page .ptn-indicator-grid > button {
    --card-tone: var(--zv-info) !important;
    border-color: color-mix(in srgb, var(--card-tone) 64%, var(--zv-border)) !important;
    border-left-color: var(--card-tone) !important;
  }
  html[data-theme] body #page .ptn-indicator-grid > button.tone-red { --card-tone: var(--zv-status-picking) !important; }
  html[data-theme] body #page .ptn-indicator-grid > button.tone-amber,
  html[data-theme] body #page .ptn-indicator-grid > button.tone-orange { --card-tone: var(--zv-status-waiting-parts) !important; }
  html[data-theme] body #page .ptn-indicator-grid > button.tone-purple { --card-tone: var(--zv-occurrence-returned) !important; }
  html[data-theme] body #page .ptn-indicator-grid > button.tone-teal { --card-tone: var(--zv-status-hygiene) !important; }
  html[data-theme] body #page .ptn-indicator-grid > button.tone-green { --card-tone: var(--zv-status-finalized) !important; }
  html[data-theme="light"] body #page .ptn-indicator-grid > button {
    background: linear-gradient(128deg, color-mix(in srgb, var(--card-tone) 8%, #fff) 0%, #fff 72%) !important;
  }
  html[data-theme="dark"] body #page .ptn-indicator-grid > button {
    background: linear-gradient(128deg,
      color-mix(in srgb, var(--card-tone) 27%, var(--zv-card)) 0%,
      color-mix(in srgb, var(--card-tone) 12%, var(--zv-card)) 44%,
      var(--zv-card) 100%) !important;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--card-tone) 17%, transparent) !important;
  }

  html[data-theme] body [data-visual-semantic="status_picking"] { --semantic-tag-bg: var(--zv-status-picking-tag-background, var(--zv-tag-background)); --semantic-tag-text: var(--zv-status-picking-tag-text, var(--zv-status-picking)); --semantic-tag-border: var(--zv-status-picking-tag-border, var(--zv-status-picking)); --semantic-tag-size: var(--zv-status-picking-tag-font-size, 10px); }
  html[data-theme] body [data-visual-semantic="status_waiting_parts"] { --semantic-tag-bg: var(--zv-status-waiting-parts-tag-background, var(--zv-tag-background)); --semantic-tag-text: var(--zv-status-waiting-parts-tag-text, var(--zv-status-waiting-parts)); --semantic-tag-border: var(--zv-status-waiting-parts-tag-border, var(--zv-status-waiting-parts)); --semantic-tag-size: var(--zv-status-waiting-parts-tag-font-size, 10px); }
  html[data-theme] body [data-visual-semantic="status_programming"] { --semantic-tag-bg: var(--zv-status-programming-tag-background, var(--zv-tag-background)); --semantic-tag-text: var(--zv-status-programming-tag-text, var(--zv-status-programming)); --semantic-tag-border: var(--zv-status-programming-tag-border, var(--zv-status-programming)); --semantic-tag-size: var(--zv-status-programming-tag-font-size, 10px); }
  html[data-theme] body [data-visual-semantic="status_finalized"] { --semantic-tag-bg: var(--zv-status-finalized-tag-background, var(--zv-tag-background)); --semantic-tag-text: var(--zv-status-finalized-tag-text, var(--zv-status-finalized)); --semantic-tag-border: var(--zv-status-finalized-tag-border, var(--zv-status-finalized)); --semantic-tag-size: var(--zv-status-finalized-tag-font-size, 10px); }
  html[data-theme] body [data-visual-semantic="status_production"] { --semantic-tag-bg: var(--zv-status-production-tag-background, var(--zv-tag-background)); --semantic-tag-text: var(--zv-status-production-tag-text, var(--zv-status-production)); --semantic-tag-border: var(--zv-status-production-tag-border, var(--zv-status-production)); --semantic-tag-size: var(--zv-status-production-tag-font-size, 10px); }
  html[data-theme] body [data-visual-semantic="status_hygiene"] { --semantic-tag-bg: var(--zv-status-hygiene-tag-background, var(--zv-tag-background)); --semantic-tag-text: var(--zv-status-hygiene-tag-text, var(--zv-status-hygiene)); --semantic-tag-border: var(--zv-status-hygiene-tag-border, var(--zv-status-hygiene)); --semantic-tag-size: var(--zv-status-hygiene-tag-font-size, 10px); }
  html[data-theme] body [data-visual-semantic="status_removed"] { --semantic-tag-bg: var(--zv-status-removed-tag-background, var(--zv-tag-background)); --semantic-tag-text: var(--zv-status-removed-tag-text, var(--zv-status-removed)); --semantic-tag-border: var(--zv-status-removed-tag-border, var(--zv-status-removed)); --semantic-tag-size: var(--zv-status-removed-tag-font-size, 10px); }
  html[data-theme] body [data-visual-semantic="status_other"] { --semantic-tag-bg: var(--zv-status-other-tag-background, var(--zv-tag-background)); --semantic-tag-text: var(--zv-status-other-tag-text, var(--zv-status-other)); --semantic-tag-border: var(--zv-status-other-tag-border, var(--zv-status-other)); --semantic-tag-size: var(--zv-status-other-tag-font-size, 10px); }
  html[data-theme] body [data-visual-semantic="occurrence_repaired"] { --semantic-tag-bg: var(--zv-occurrence-repaired-tag-background, var(--zv-tag-background)); --semantic-tag-text: var(--zv-occurrence-repaired-tag-text, var(--zv-occurrence-repaired)); --semantic-tag-border: var(--zv-occurrence-repaired-tag-border, var(--zv-occurrence-repaired)); --semantic-tag-size: var(--zv-occurrence-repaired-tag-font-size, 10px); }
  html[data-theme] body [data-visual-semantic="occurrence_returned"] { --semantic-tag-bg: var(--zv-occurrence-returned-tag-background, var(--zv-tag-background)); --semantic-tag-text: var(--zv-occurrence-returned-tag-text, var(--zv-occurrence-returned)); --semantic-tag-border: var(--zv-occurrence-returned-tag-border, var(--zv-occurrence-returned)); --semantic-tag-size: var(--zv-occurrence-returned-tag-font-size, 10px); }
  html[data-theme] body [data-visual-semantic="occurrence_no_repair"] { --semantic-tag-bg: var(--zv-occurrence-no-repair-tag-background, var(--zv-tag-background)); --semantic-tag-text: var(--zv-occurrence-no-repair-tag-text, var(--zv-occurrence-no-repair)); --semantic-tag-border: var(--zv-occurrence-no-repair-tag-border, var(--zv-occurrence-no-repair)); --semantic-tag-size: var(--zv-occurrence-no-repair-tag-font-size, 10px); }
  html[data-theme] body [data-visual-semantic="occurrence_divergence"] { --semantic-tag-bg: var(--zv-occurrence-divergence-tag-background, var(--zv-tag-background)); --semantic-tag-text: var(--zv-occurrence-divergence-tag-text, var(--zv-occurrence-divergence)); --semantic-tag-border: var(--zv-occurrence-divergence-tag-border, var(--zv-occurrence-divergence)); --semantic-tag-size: var(--zv-occurrence-divergence-tag-font-size, 10px); }
  html[data-theme] body [data-visual-semantic="occurrence_doa"] { --semantic-tag-bg: var(--zv-occurrence-doa-tag-background, var(--zv-tag-background)); --semantic-tag-text: var(--zv-occurrence-doa-tag-text, var(--zv-occurrence-doa)); --semantic-tag-border: var(--zv-occurrence-doa-tag-border, var(--zv-occurrence-doa)); --semantic-tag-size: var(--zv-occurrence-doa-tag-font-size, 10px); }
  html[data-theme] body [data-visual-semantic="occurrence_exchange_new"] { --semantic-tag-bg: var(--zv-occurrence-exchange-new-tag-background, var(--zv-tag-background)); --semantic-tag-text: var(--zv-occurrence-exchange-new-tag-text, var(--zv-occurrence-exchange-new)); --semantic-tag-border: var(--zv-occurrence-exchange-new-tag-border, var(--zv-occurrence-exchange-new)); --semantic-tag-size: var(--zv-occurrence-exchange-new-tag-font-size, 10px); }
  html[data-theme] body [data-visual-semantic="occurrence_missing_product"] { --semantic-tag-bg: var(--zv-occurrence-missing-product-tag-background, var(--zv-tag-background)); --semantic-tag-text: var(--zv-occurrence-missing-product-tag-text, var(--zv-occurrence-missing-product)); --semantic-tag-border: var(--zv-occurrence-missing-product-tag-border, var(--zv-occurrence-missing-product)); --semantic-tag-size: var(--zv-occurrence-missing-product-tag-font-size, 10px); }
  html[data-theme] body [data-visual-semantic="occurrence_rejected"] { --semantic-tag-bg: var(--zv-occurrence-rejected-tag-background, var(--zv-tag-background)); --semantic-tag-text: var(--zv-occurrence-rejected-tag-text, var(--zv-occurrence-rejected)); --semantic-tag-border: var(--zv-occurrence-rejected-tag-border, var(--zv-occurrence-rejected)); --semantic-tag-size: var(--zv-occurrence-rejected-tag-font-size, 10px); }
  html[data-theme] body [data-visual-semantic="occurrence_other"] { --semantic-tag-bg: var(--zv-occurrence-other-tag-background, var(--zv-tag-background)); --semantic-tag-text: var(--zv-occurrence-other-tag-text, var(--zv-occurrence-other)); --semantic-tag-border: var(--zv-occurrence-other-tag-border, var(--zv-occurrence-other)); --semantic-tag-size: var(--zv-occurrence-other-tag-font-size, 10px); }
  html[data-theme] body .tag[data-visual-semantic] {
    border-color: var(--semantic-tag-border) !important;
    background: var(--semantic-tag-bg) !important;
    color: var(--semantic-tag-text) !important;
    font-size: var(--semantic-tag-size) !important;
  }

  html[data-theme] body .visual-tag-groups {
    display: grid;
    gap: 9px;
  }
  html[data-theme] body .visual-tag-group {
    overflow: hidden;
    border: 1px solid var(--zv-border);
    border-radius: 10px;
    background: var(--zv-surface);
  }
  html[data-theme] body .visual-tag-group > summary {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    cursor: pointer;
    padding: 11px 13px;
  }
  html[data-theme] body .visual-tag-group > summary span {
    color: var(--zv-muted);
    font-size: 10px;
  }
  html[data-theme] body .visual-tag-group[open] > summary {
    border-bottom: 1px solid var(--zv-border);
    color: var(--zv-accent);
  }
  html[data-theme] body .visual-tag-group > .visual-palette-grid {
    padding: 10px;
  }
  html[data-theme] body .visual-preview-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  html[data-theme] body .visual-preview-tags > span {
    border: 1px solid var(--preview-tag-border);
    border-radius: 999px;
    background: var(--preview-tag-bg);
    color: var(--preview-tag-text);
    font-size: var(--preview-tag-size, 10px);
    font-weight: 800;
    padding: 4px 7px;
  }
}

@media (max-width: 980px) {
  html[data-theme] body #page .pendency-mass-toolbar {
    grid-template-columns: 1fr 1fr !important;
  }
  html[data-theme] body #page .pendency-mass-toolbar > div {
    grid-column: 1 / -1 !important;
  }
}