/* Overview and everyday utility views share one material and readable type scale. */
@media screen {
  /* Only the expanded story carries the stronger mint/lilac material. */
  html[data-theme] {
    --erp-stack-closed:var(--erp-mesh-quiet);
    --erp-stack-open:radial-gradient(ellipse at 5% 25%,color-mix(in srgb,var(--erp-chart-lilac) 18%,transparent),transparent 68%),radial-gradient(ellipse at 95% 100%,color-mix(in srgb,var(--erp-chart-mint) 10%,transparent),transparent 62%),var(--erp-mesh-card);
    --erp-stack-open-line:color-mix(in srgb,var(--erp-chart-lilac) 28%,var(--erp-line));
    --erp-plot-selection:linear-gradient(180deg,transparent,color-mix(in srgb,var(--erp-chart-lilac) 4%,transparent) 35%,color-mix(in srgb,var(--erp-chart-mint) 12%,transparent));
  }
  html[data-theme] .management-overview {
    --mo-ink:var(--erp-ink);
    --mo-muted:var(--erp-muted);
    --mo-line:var(--erp-line);
    --mo-surface:var(--erp-soft);
    --mo-card:var(--erp-surface);
    --mo-tint:var(--erp-accent);
    --mo-warning:var(--erp-warning);
    --mo-shadow:var(--erp-shadow);
    font-family:var(--erp-font);
  }
  html[data-theme] .management-overview :is(.mo-panel,.mo-metric,.mo-management) {
    --mo-ink:var(--erp-ink);
    --mo-muted:var(--erp-muted);
    --mo-warning:var(--erp-warning);
    --mo-line:var(--erp-line);
    border-color:var(--erp-line);
    background:var(--erp-mesh-card);
    color:var(--erp-ink);
    box-shadow:var(--erp-shadow);
  }
  html[data-theme] .mo-dashboard :is(.mo-panel,.mo-metric)::after {display:none}
  html[data-theme] .management-overview .mo-management {background:var(--erp-mesh-quiet)}
  html[data-theme] .management-overview .mo-management-link {
    border-color:var(--erp-line);
    background:var(--erp-surface);
  }
  html[data-theme] .management-overview :is(.mo-metric-icon,.mo-management-icon) {
    background:var(--erp-soft);
    color:var(--erp-ink);
    box-shadow:none;
  }
  html[data-theme] .management-overview .mo-warehouse-tag {background:var(--erp-soft)}
  html[data-theme] .management-overview .mo-metric h2 {font-size:18px}
  html[data-theme] .management-overview .mo-metric .mo-metric-action {
    border-color:transparent;
    background:var(--erp-primary);
    color:var(--erp-primary-ink);
  }
  html[data-theme] .management-overview .mo-invoice-card {
    background:var(--erp-mesh-hero);
    border-color:var(--erp-line);
    color:var(--erp-ink);
    box-shadow:var(--erp-shadow);
  }
  html[data-theme] .mo-dashboard .mo-invoice-card::after {display:none}
  html[data-theme] .management-overview .mo-invoice-badge {
    background:var(--erp-soft);
    color:var(--erp-ink);
  }
  html[data-theme] .management-overview .mo-invoice-badge svg {
    fill:var(--erp-surface);
    stroke:var(--erp-ink);
  }
  /* The pastel expense hero remains the overview's focal point in both themes. */
  html[data-theme] .management-overview .mo-hero-flow dt {font-size:14px;line-height:1.4}
  html[data-theme] .management-overview .oi-stack {
    --oi-mint:var(--erp-chart-mint);
    --oi-lilac:var(--erp-chart-lilac);
    --oi-border:var(--erp-line);
    --oi-row:var(--erp-soft);
    --oi-panel:var(--erp-surface);
    --oi-plot:var(--erp-chart-mint);
  }
  html[data-theme] .management-overview .oi-stack .oi-panel {
    background:var(--erp-stack-closed);
    border-color:var(--erp-line);
    box-shadow:var(--erp-shadow);
  }
  html[data-theme] .management-overview .oi-stack .oi-panel[data-open="true"] {
    background:var(--erp-stack-open);
    border-color:var(--erp-stack-open-line);
  }
  /* Keep the whole column clickable without painting empty months as filled slots. */
  html[data-theme] .management-overview .oi-stack .oi-point-track::before {
    inset:0;
    border-radius:8px 8px 0 0;
    background:var(--erp-plot-selection);
    opacity:0;
  }
  html[data-theme] .management-overview .oi-stack .oi-point[data-active="true"] .oi-point-track::before {opacity:1}
  html[data-theme] .management-overview .oi-stack .oi-point[data-active="true"] .oi-point-track i {filter:none}
  html[data-theme] .management-overview .oi-panel-trigger:hover {background:var(--erp-soft)}
  html[data-theme] .management-overview .oi-cabinet-row {
    background:var(--erp-surface);
    border-color:var(--erp-line);
  }
  html[data-theme] .management-overview .oi-cabinet-row:hover {
    background:var(--erp-soft);
    border-color:var(--erp-control-line);
  }
  html[data-theme] .management-overview .oi-cabinet-name strong {font-size:16px;line-height:1.4}
  html[data-theme] .management-overview :is(.oi-panel-heading small,.oi-cabinet-name small,.oi-panel-footer>span,.oi-history-controls label,.oi-point-date,.oi-chart-readout small,.oi-chart-scroll-hint,.oi-chart-legend,.oi-recent-copy small,.oi-recent-copy time,.oi-recent-amount small,.oi-recent-note) {
    font-size:14px;
    line-height:1.45;
    letter-spacing:0;
  }
  html[data-theme] .management-overview .oi-history-controls select {min-height:44px;font-size:14px}
  html[data-theme] .management-overview .oi-chart {margin-top:10px;padding-bottom:26px}
  html[data-theme] .management-overview .oi-chart-dense {padding-bottom:32px}
  html[data-theme] .management-overview :is(.oi-point-label,.oi-chart-baseline span) {font-size:12px;line-height:1.3}
  html[data-theme] .management-overview .oi-chart-legend {gap:8px 14px}
  html[data-theme] .management-overview .oi-recent-copy>strong {font-size:16px;line-height:1.4}
  html[data-theme] .management-overview .oi-recent-row {padding-block:12px}
  html[data-theme] .management-overview .oi-recent-amount strong {font-size:16px}
  html[data-theme] .management-overview .oi-text-button {min-height:44px}
  html[data-theme] .management-overview .mo-cabinet-dialog {
    --mo-card:var(--erp-surface);
    --mo-surface:var(--erp-soft);
    --mo-muted:var(--erp-muted);
    --mo-line:var(--erp-line);
    --room-panel:var(--erp-surface);
    --room-glass:var(--erp-soft);
  }
  html[data-theme] .management-overview .mo-cabinet-dialog .mo-dialog-heading {background:var(--erp-mesh-quiet)}
  html[data-theme] .management-overview .mo-cabinet-dialog :is(.mo-cabinet-spotlight,.mo-cabinet-history) {background:var(--erp-mesh-card)}
  html[data-theme] .management-overview .mo-cabinet-dialog :is(.mo-cabinet-material-count,.mo-cabinet-flow dt,.mo-category summary small,.mo-month-name small,.mo-month-value small) {font-size:14px;line-height:1.45}

  /* Staff home uses the same mint, lilac and peach palette as the overview. */
  html[data-theme] .employee-home {color:var(--erp-ink)}
  html[data-theme] .employee-home-eyebrow {font-size:12px;line-height:1.45;letter-spacing:.09em}
  html[data-theme] .employee-home-heading p {font-size:16px;line-height:1.5}
  html[data-theme] .employee-home-scan {
    border:1px solid var(--erp-line);
    background:var(--erp-mesh-hero);
    color:var(--erp-ink);
    box-shadow:var(--erp-shadow);
  }
  html[data-theme] .employee-home-scan p {font-size:16px;line-height:1.5;color:var(--erp-muted)}
  html[data-theme] .employee-home-scan-mark {
    border-color:var(--erp-line);
    border-radius:50%;
    background:var(--erp-surface);
    color:var(--erp-accent-ink);
  }
  html[data-theme] .employee-home-primary {
    background:var(--erp-primary);
    color:var(--erp-primary-ink);
    font-size:16px;
    font-weight:500;
  }
  html[data-theme] .employee-home-manual {color:var(--erp-ink);font-size:14px;line-height:1.45}
  html[data-theme] .employee-home :is(.employee-home-search,.employee-home-context,.employee-home-shortcuts>a) {
    border-color:var(--erp-line);
    background:var(--erp-mesh-quiet);
    box-shadow:var(--erp-shadow);
  }
  html[data-theme] .employee-home :is(.employee-home-search button,.employee-home-context-icon,.employee-home-shortcuts>a>span) {
    border-radius:50%;
    background:var(--erp-accent);
    color:var(--erp-accent-ink);
  }
  html[data-theme] .employee-home :is(.employee-home-context-copy>span,.employee-home-shortcuts>a>small) {font-size:14px;line-height:1.45}
  html[data-theme] .employee-home-context-copy>strong {font-size:16px}
  html[data-theme] .employee-home .employee-home-search {gap:12px}
  html[data-theme] .employee-home .employee-home-search input {
    flex:1;
    width:0;
    min-width:0;
    margin:0;
    padding:8px 0;
    border:0;
    border-radius:0;
    background:transparent;
    color:var(--erp-ink);
    box-shadow:none;
  }
  html[data-theme] .employee-home .employee-home-search input:focus-visible {outline:none;box-shadow:none}
  html[data-theme] .employee-home .employee-home-search:focus-within {
    border-color:var(--erp-focus);
    outline:2px solid var(--erp-focus-ring);
    outline-offset:3px;
  }
  html[data-theme] .employee-home-scan :is(a,button):focus-visible {outline-color:var(--erp-focus)}

  /* Notification meaning is carried by labels and markers, never by low opacity. */
  html[data-theme] :is(.notifications-page,.settings-page,.help-page) {color:var(--erp-ink);font-family:var(--erp-font)}
  html[data-theme] :is(.notification-heading,.settings-heading,.help-hero) p {font-size:16px;line-height:1.55;color:var(--erp-muted)}
  html[data-theme] .notifications-page .notification-heading {flex-direction:row;align-items:flex-start;gap:16px;margin-bottom:24px}
  html[data-theme] .notification-heading>div {min-width:0}
  html[data-theme] .notifications-page .notification-heading p {margin-top:8px;font-size:14px;line-height:1.45}
  html[data-theme] .notifications-page .notification-settings {flex:none;width:auto;min-width:44px;min-height:44px;justify-content:center}
  html[data-theme] .notification-toolbar {align-items:center;flex-wrap:wrap;gap:12px 20px;margin-bottom:16px}
  html[data-theme] .notification-toolbar-meta {display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}
  html[data-theme] .notification-critical-count {display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border-radius:999px;background:var(--erp-soft);color:var(--erp-muted);font-size:13px;line-height:1.4}
  html[data-theme] .notification-critical-count strong {font-size:14px;font-weight:500;font-variant-numeric:tabular-nums}
  html[data-theme] .notification-critical-count.has-critical {background:var(--erp-danger-surface);color:var(--erp-danger)}
  html[data-theme] .notification-read-all {min-height:44px;margin:0;color:var(--erp-ink);font-size:13px}
  html[data-theme] .notification-read-all:disabled {color:var(--erp-muted)}
  html[data-theme] .notification-filters button {
    min-height:44px;
    border-color:var(--erp-line);
    background:var(--erp-surface);
    color:var(--erp-ink);
    font-size:14px;
    line-height:1.4;
  }
  html[data-theme] .notification-filters button strong {min-width:26px;height:26px;font-size:13px;background:var(--erp-soft);color:var(--erp-ink)}
  html[data-theme] .notification-filters button[aria-pressed="true"] {border-color:var(--erp-control-line);background:var(--erp-accent);color:var(--erp-accent-ink)}
  html[data-theme] .notification-item {
    border-color:var(--erp-line);
    background:var(--erp-surface);
    opacity:1;
    box-shadow:var(--erp-shadow);
  }
  html[data-theme] .notification-item.is-unread {border-color:var(--erp-control-line);background:var(--erp-mesh-card)}
  html[data-theme] .notification-item.severity-critical.is-unread {border-color:var(--erp-danger-line);background:var(--erp-danger-surface)}
  html[data-theme] .notification-item-marker {border-radius:50%;background:var(--erp-accent);color:var(--erp-accent-ink)}
  html[data-theme] .notification-item.severity-critical .notification-item-marker,
  html[data-theme] .notifications-page .severity-critical .notification-severity {background:var(--erp-danger-surface);color:var(--erp-danger)}
  html[data-theme] .notification-item.severity-warning .notification-item-marker,
  html[data-theme] .notifications-page .severity-warning .notification-severity {background:var(--erp-warning-surface);color:var(--erp-warning)}
  html[data-theme] .notification-severity {background:var(--erp-soft);color:var(--erp-muted);font-weight:500}
  html[data-theme] .notifications-page .notification-active-label {background:var(--erp-warning-surface);color:var(--erp-warning);font-weight:500}
  html[data-theme] .notifications-page .severity-critical .notification-active-label {background:var(--erp-danger-surface);color:var(--erp-danger)}
  html[data-theme] .notification-item-copy h2 {font-size:18px;font-weight:500;line-height:1.4}
  html[data-theme] .notification-item-copy>p {font-size:16px;line-height:1.5;color:var(--erp-muted)}
  html[data-theme] :is(.notification-item-meta,.notification-item-context) {font-size:14px;line-height:1.45;letter-spacing:0;text-transform:none}
  html[data-theme] .notification-item-context svg {width:16px;height:16px;flex:none}
  html[data-theme] .notification-item-actions {gap:10px}
  html[data-theme] .notification-delivery-note {margin-top:16px;color:var(--erp-muted);font-size:13px;line-height:1.5}
  html[data-theme] .notification-delivery-note summary {width:fit-content;min-height:44px;padding-block:12px;cursor:pointer}
  html[data-theme] .notification-delivery-note summary:focus-visible {outline:2px solid var(--erp-focus);outline-offset:3px;border-radius:8px}
  html[data-theme] .notification-delivery-note p {max-width:660px;margin:0 0 12px}

  /* Settings: a calm main surface, distinct status colors, and generous controls. */
  html[data-theme] .settings-page {gap:16px}
  html[data-theme] .settings-page .settings-heading {align-items:center;gap:16px;margin-bottom:0}
  html[data-theme] .settings-page .settings-heading h1 {font-size:clamp(32px,3.6vw,44px);font-weight:400;line-height:1.15;letter-spacing:-1.4px}
  html[data-theme] .settings-page .settings-heading p {margin-top:8px;font-size:14px;line-height:1.45}
  html[data-theme] .settings-page .settings-section {min-width:0;padding:20px;border-color:var(--erp-line);border-radius:28px;background:var(--erp-surface);box-shadow:var(--erp-shadow)}
  html[data-theme] .settings-page .settings-section>.section-label {margin-bottom:14px}
  html[data-theme] .settings-page .settings-section>.section-label h2 {margin:0;font-size:24px;font-weight:400;line-height:1.2;letter-spacing:-.5px}
  html[data-theme] .settings-page .settings-push {background:var(--erp-mesh-quiet)}
  html[data-theme] .settings-page .settings-layout {grid-template-columns:minmax(0,1fr)}
  html[data-theme] .settings-page .settings-side {grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  html[data-theme] .settings-page .settings-device-actions {display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:12px}
  html[data-theme] .settings-page .settings-device-actions .settings-test-push {min-height:44px;margin:0}
  html[data-theme] .settings-page .settings-status-pill {font-size:13px;line-height:1.4;font-weight:500;text-transform:none;letter-spacing:0;background:var(--erp-warning-surface);color:var(--erp-warning)}
  html[data-theme] .settings-page .settings-status-pill[data-state="ok"] {background:var(--erp-success-surface);color:var(--erp-success)}
  html[data-theme] .push-connection-state {grid-template-columns:44px minmax(0,1fr) auto;gap:12px;padding:0;border:0;background:transparent}
  html[data-theme] .push-connection-state h3 {margin:0;font-size:16px;font-weight:500;line-height:1.4}
  html[data-theme] .push-connection-state p {margin-top:4px;font-size:14px;line-height:1.5;color:var(--erp-muted)}
  html[data-theme] .push-connection-mark {width:44px;height:44px;border-radius:50%;background:var(--erp-accent);color:var(--erp-accent-ink)}
  html[data-theme] .settings-page .push-connection-state>.button {min-height:44px}
  html[data-theme] .push-connection-state[data-state="connected"] .push-connection-mark {background:var(--erp-success-surface);color:var(--erp-success)}
  html[data-theme] .push-connection-state:is([data-state="denied"],[data-state="server-off"]) .push-connection-mark {background:var(--erp-warning-surface);color:var(--erp-warning)}
  html[data-theme] .settings-page :is(.settings-delivery-note,.settings-integration-note) {font-size:14px;line-height:1.55;background:var(--erp-soft);color:var(--erp-muted)}
  html[data-theme] .settings-page .settings-preferences legend {font-size:16px;font-weight:500}
  html[data-theme] .settings-page .settings-rules {padding:0;background:var(--erp-mesh-quiet)}
  html[data-theme] .settings-page .settings-rules>summary {display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:88px;padding:20px;list-style:none;cursor:pointer;border-radius:inherit}
  html[data-theme] .settings-page .settings-rules>summary::-webkit-details-marker {display:none}
  html[data-theme] .settings-page .settings-rules>summary>span {display:grid;gap:6px;min-width:0}
  html[data-theme] .settings-page .settings-rules>summary strong {font-size:24px;font-weight:400;line-height:1.2;letter-spacing:-.5px}
  html[data-theme] .settings-page .settings-rules>summary small {font-size:13px;line-height:1.5;color:var(--erp-muted);overflow-wrap:anywhere}
  html[data-theme] .settings-page .settings-rules>summary>svg {flex:none;width:20px;height:20px;color:var(--erp-muted);transition:transform .18s ease}
  html[data-theme] .settings-page .settings-rules[open]>summary>svg {transform:rotate(180deg)}
  html[data-theme] .settings-page .settings-rules>summary:focus-visible {outline:2px solid var(--erp-focus);outline-offset:3px}
  html[data-theme] .settings-page .settings-rules-content {padding:4px 20px 20px}
  html[data-theme] .settings-page .settings-preferences>.button {justify-self:start;min-height:44px}
  html[data-theme] .settings-page .settings-switch {min-height:72px;padding-block:12px}
  html[data-theme] .settings-page .settings-switch strong {font-size:16px;line-height:1.4;font-weight:500}
  html[data-theme] .settings-page .settings-switch small {font-size:14px;line-height:1.5}
  html[data-theme] .settings-page .settings-switch>i {border-color:var(--erp-control-line);background:var(--erp-soft)}
  html[data-theme] .settings-page .settings-switch input:checked+i {border-color:var(--erp-focus);background:var(--erp-focus)}
  html[data-theme] .settings-page .settings-switch>i::after {background:var(--erp-surface)}
  html[data-theme] .settings-page :is(.expiry-warning-fields label,.quiet-hours-fields label,.field-hint,.section-label small,.app-status dt,.app-status dd) {font-size:14px;line-height:1.5}
  html[data-theme] .settings-page .push-device {border-color:var(--erp-line);background:var(--erp-soft)}
  html[data-theme] .settings-page .push-device.is-disabled {opacity:1}
  html[data-theme] .settings-page .push-device-icon {background:var(--erp-surface);color:var(--erp-accent-ink);border-radius:50%}
  html[data-theme] .settings-page .push-device strong {font-size:16px;line-height:1.4;white-space:normal;overflow-wrap:anywhere}
  html[data-theme] .settings-page .push-device :is(span,small) {font-size:14px;line-height:1.45}
  html[data-theme] .settings-page .app-status .status-ok {color:var(--erp-success)}
  html[data-theme] .settings-page .app-status .status-attention {color:var(--erp-warning)}
  html[data-theme] .settings-page .settings-management>nav {gap:8px}
  html[data-theme] .settings-management>nav>a {min-height:68px;grid-template-columns:30px minmax(0,1fr) 16px;gap:8px;border-color:var(--erp-line);background:var(--erp-mesh-quiet);color:var(--erp-ink)}
  html[data-theme] .settings-management>nav>a>svg:first-child {color:var(--erp-accent-ink)}
  html[data-theme] .settings-management>nav strong {font-size:16px;line-height:1.4;font-weight:500}
  html[data-theme] .settings-management>nav small {font-size:14px;line-height:1.45}

  /* Help is part of the product rather than a separate blue document skin. */
  html[data-theme] .help-page .help-hero {background:var(--erp-mesh-hero);border-color:var(--erp-line);box-shadow:var(--erp-shadow)}
  html[data-theme] .help-page .help-hero::after {display:none}
  html[data-theme] .help-page :is(.help-step,.help-section,.help-toc) {border-color:var(--erp-line);background:var(--erp-surface);box-shadow:var(--erp-shadow)}
  html[data-theme] .help-page .help-step {background:var(--erp-mesh-card)}
  html[data-theme] .help-page :is(.help-role-badge,.step-number,.help-section-index,.help-role-mark) {background:var(--erp-accent);border-color:var(--erp-line);color:var(--erp-accent-ink);box-shadow:none;font-size:14px;line-height:1.4}
  html[data-theme] .help-page :is(.help-route-link,.help-to-top) {font-size:14px;line-height:1.45;color:var(--erp-accent-ink);text-decoration-color:currentColor}
  html[data-theme] .help-page :is(.help-step p,.help-section p,.help-section li) {font-size:16px;line-height:1.6;color:var(--erp-muted)}
  html[data-theme] .help-page .help-step h2 {font-size:22px;line-height:1.3;font-weight:500}
  html[data-theme] .help-page .help-toc-link {min-height:44px;font-size:14px;line-height:1.4;color:var(--erp-muted);font-weight:400}
  html[data-theme] .help-page .help-toc-link:hover {background:var(--erp-soft);color:var(--erp-ink)}
  html[data-theme] .help-page .help-toc-link[aria-current="location"] {background:var(--erp-accent);color:var(--erp-accent-ink);box-shadow:inset 3px 0 var(--erp-focus)}
  html[data-theme] .help-page .help-section-heading {border-color:var(--erp-line)}
  html[data-theme] .help-page .help-section-heading .eyebrow {color:var(--erp-muted)}
  html[data-theme] .help-page .help-section li::marker {color:var(--erp-accent-ink)}
  html[data-theme] .help-page :is(.help-role-card,.help-callout,.help-admin-note,.help-install,.help-backup-note,.help-example-primary,.help-export-card,.help-vat-grid>article,.help-priority-grid>article,.help-limit-grid>article,.help-calculations li) {border-color:var(--erp-line);background:var(--erp-mesh-quiet)}
  html[data-theme] .help-page :is(.help-role-card h3,.help-admin-note h3,.help-install h3,.help-backup-note h3,.help-vat-grid h3,.help-priority-grid h3,.help-limit-grid h3,.help-export-card h3) {font-size:18px;line-height:1.4;font-weight:500}
  html[data-theme] .help-page :is(.help-callout>strong,.help-calculations strong,.help-calculations span,.help-equation,.help-example-label) {font-size:14px;line-height:1.5}
  html[data-theme] .help-page .help-example-label {color:var(--erp-muted);letter-spacing:.04em}
  html[data-theme] .help-page .help-equation {background:var(--erp-surface);color:var(--erp-muted)}
  html[data-theme] .help-page .help-equation strong {color:var(--erp-ink)}
  html[data-theme] .help-page .help-equation b {color:var(--erp-muted)}
  html[data-theme] .help-page .help-priority-grid>article>span {background:var(--erp-accent);color:var(--erp-accent-ink);font-size:13px;letter-spacing:0;line-height:1.4}
  html[data-theme] .help-page .help-table-scroll {background:var(--erp-surface);border-color:var(--erp-line)}
  html[data-theme] .help-page .help-table caption {font-size:13px;line-height:1.4;color:var(--erp-muted)}
  html[data-theme] .help-page .help-table :is(th,td) {border-color:var(--erp-line);font-size:14px;line-height:1.5}
  html[data-theme] .help-page .help-table th {background:var(--erp-soft);color:var(--erp-ink)}

  /* Keep the character preview artwork, but use the product's type and surfaces. */
  html[data-theme] .character-editor-dialog {font-family:var(--erp-font)}
  html[data-theme] .character-preview-panel {background:var(--erp-mesh-hero)}
  html[data-theme] .character-editor-dialog :is(.character-editor-heading p,.character-preview-caption p,.character-section-heading p,.character-option-note,.character-photo-note p,.character-editor-status,.character-editor-error,.character-editor-confirm p,.character-editor-footer>span) {font-size:14px;line-height:1.5}
  html[data-theme] .character-editor-dialog :is(.character-eyebrow,.character-choice-label) {font-size:13px;line-height:1.4}
  html[data-theme] .character-editor-dialog :is(.character-mode label>span,.character-tabs button,.character-options>legend,.character-reload,.character-save,.character-confirm-secondary) {font-size:14px;line-height:1.4}
  html[data-theme] .character-editor-dialog .character-options-colors .character-option-grid {grid-template-columns:repeat(auto-fit,minmax(76px,1fr))}
  html[data-theme] .character-editor-dialog .character-choice-check {background:var(--erp-accent-ink);color:var(--erp-surface)}
}

@media screen and (hover:hover) and (pointer:fine) {
  html[data-theme] .management-overview .mo-management-link:hover,
  html[data-theme] .employee-home-shortcuts>a:hover,
  html[data-theme] .employee-home-context-action:hover {background:var(--erp-soft);color:var(--erp-ink)}
  html[data-theme] .employee-home-primary:hover {background:var(--erp-primary);color:var(--erp-primary-ink);filter:brightness(.96)}
}

@media screen and (max-width:900px) {
  html[data-theme] .help-page .help-layout {grid-template-columns:minmax(0,1fr)}
  html[data-theme] .help-page .help-toc {position:static;max-height:none;display:flex;flex-wrap:wrap;gap:6px}
  html[data-theme] .help-page .help-toc>.eyebrow {flex-basis:100%}
  html[data-theme] .help-page .help-toc-link {flex:1 1 170px}
  html[data-theme] .settings-page .push-connection-state {grid-template-columns:48px minmax(0,1fr)}
  html[data-theme] .settings-page .push-connection-state>.button {grid-column:1/-1;width:100%;white-space:normal}
}

@media screen and (max-width:700px) {
  html[data-theme] .settings-page .settings-heading {align-items:stretch}
  html[data-theme] .notifications-page .notification-heading {gap:10px;margin-bottom:18px}
  html[data-theme] .notifications-page .notification-settings {width:44px;height:44px;padding:10px}
  html[data-theme] .notification-settings span {display:none}
  html[data-theme] .notification-toolbar {align-items:stretch;gap:8px}
  html[data-theme] .notification-toolbar-meta {gap:8px}
  html[data-theme] .notifications-page .notification-filters {display:flex;flex-wrap:wrap;gap:8px}
  html[data-theme] .notification-filters button {flex:1 1 auto;padding-inline:12px}
  html[data-theme] .notification-filters button span {white-space:normal;overflow:visible;text-overflow:clip}
  html[data-theme] .notification-item-actions {grid-column:1/-1}
  html[data-theme] .notification-item-actions .button {min-height:44px;white-space:normal}
  html[data-theme] .settings-page .settings-section>.section-label {flex-wrap:wrap;gap:12px}
  html[data-theme] .settings-page .settings-section {padding:16px;border-radius:24px}
  html[data-theme] .settings-page .settings-management>nav {grid-template-columns:repeat(2,minmax(0,1fr))}
  html[data-theme] .settings-page .settings-management>nav>a {grid-template-columns:24px minmax(0,1fr);min-height:72px;padding:10px}
  html[data-theme] .settings-page .settings-management>nav>a>svg:last-child {display:none}
  html[data-theme] .settings-page .settings-management>nav strong {font-size:14px;line-height:1.4}
  html[data-theme] .settings-page .settings-management>nav small {display:none}
  html[data-theme] .settings-page .settings-side {grid-template-columns:minmax(0,1fr)}
  html[data-theme] .settings-page .settings-rules {padding:0}
  html[data-theme] .settings-page .settings-rules>summary {padding:16px;gap:12px}
  html[data-theme] .settings-page .settings-rules>summary strong {font-size:22px}
  html[data-theme] .settings-page .settings-rules-content {padding:0 16px 16px}
  html[data-theme] .settings-page .expiry-warning-fields {grid-template-columns:minmax(0,1fr)}
  html[data-theme] .settings-page .settings-test-push {width:100%;white-space:normal}
  html[data-theme] .help-page :is(.help-role-grid,.help-vat-grid,.help-priority-grid,.help-limit-grid,.help-calculations) {grid-template-columns:minmax(0,1fr)}
  html[data-theme] .help-page .help-export-card {align-items:stretch;flex-direction:column}
  html[data-theme] .help-page .help-hero {padding:24px}
  html[data-theme] .help-page .help-step {padding:20px;gap:12px}
  html[data-theme] .character-editor-dialog .character-preview-panel {grid-template-columns:96px minmax(0,1fr);gap:8px 12px}
  html[data-theme] .character-editor-dialog :is(.character-preview-stage,.character-preview-image) {width:96px;height:96px}
  html[data-theme] .character-editor-dialog .character-mode {grid-column:1/-1;max-width:100%;width:100%}
  html[data-theme] .character-editor-dialog .character-preview-caption {align-self:center}
  html[data-theme] .character-editor-dialog .character-preview-caption p {margin-top:4px}
  html[data-theme] .character-editor-dialog .character-options-colors .character-option-grid {grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
  html[data-theme] .character-editor-dialog .character-editor-footer {flex-wrap:wrap;gap:10px}
  html[data-theme] .character-editor-dialog .character-editor-footer>span {max-width:none;flex:1 1 150px}
  html[data-theme] .character-editor-dialog .character-save {flex:1 1 150px;min-height:46px}
}

@media screen and (max-width:400px) {
  html[data-theme] .notification-item {grid-template-columns:32px minmax(0,1fr);gap:10px;padding:14px}
  html[data-theme] .notification-item-marker {width:32px;height:32px}
  html[data-theme] .notification-item-marker svg {width:18px;height:18px}
  html[data-theme] .settings-page .app-status dl>div {flex-direction:column;gap:5px}
  html[data-theme] .settings-page .app-status dd {max-width:100%;text-align:left}
  html[data-theme] .help-page .help-grid {grid-template-columns:minmax(0,1fr)}
  html[data-theme] .help-page .help-step {grid-template-columns:34px minmax(0,1fr);padding:18px}
  html[data-theme] .help-page .help-step .step-number {width:34px;height:34px}
  html[data-theme] .character-editor-dialog .character-tabs button {padding-inline:4px;font-size:13px;overflow-wrap:anywhere}
}

@media screen {
 @container management-overview (max-width:600px) {
  /* The row contains selection and details controls; its inner select owns the text grid. */
  html[data-theme] .management-overview .oi-cabinet-row {grid-template-columns:minmax(0,1fr) 44px;gap:2px}
  html[data-theme] .management-overview .oi-cabinet-select {grid-template-columns:32px minmax(0,1fr);gap:4px 9px}
  html[data-theme] .management-overview .oi-cabinet-select .oi-emblem {grid-column:1;grid-row:1/4;width:32px;height:32px}
  html[data-theme] .management-overview .oi-cabinet-name {grid-column:2;grid-row:1}
  html[data-theme] .management-overview .oi-cabinet-amount {grid-column:2;grid-row:2;max-width:100%;margin-top:2px;font-size:19px;white-space:normal;overflow-wrap:anywhere}
  html[data-theme] .management-overview .oi-cabinet-track {grid-column:2;grid-row:3}
  html[data-theme] .management-overview .oi-chart-readout {grid-template-columns:minmax(0,1fr);gap:4px}
  html[data-theme] .management-overview .oi-chart-readout strong {grid-column:1;grid-row:auto;font-size:26px;white-space:normal;overflow-wrap:anywhere}
  html[data-theme] .management-overview .oi-recent-row {grid-template-columns:32px minmax(0,1fr);gap:6px 10px}
  html[data-theme] .management-overview .oi-recent-row .oi-emblem {grid-row:1/3}
  html[data-theme] .management-overview .oi-recent-amount {grid-column:2;grid-row:2;text-align:left}
  html[data-theme] .management-overview .oi-recent-amount strong {font-size:18px;white-space:normal;overflow-wrap:anywhere}
 }
}