/* Settings workspace UX — existing Angular app only.
 * Screen-only: print / PDF / barcode geometry is owned elsewhere.
 * Every rule is scoped under .sx-settings-workspace or .sx-settings-hub.
 * Parent owns templates; this sheet only improves hierarchy, section cards,
 * controls and responsive flow. Angular-managed visibility (.ng-hide from
 * ng-show / ng-hide / ng-if) is never overridden: any rule that sets a
 * display value on a potentially conditional element uses a :not(.ng-hide)
 * guard, and no display value is set on table / thead / tbody / tr / th / td.
 * Ancestors of dropdown / ui-select / typeahead keep visible overflow so
 * menus are never clipped. Long forms scroll naturally; nothing clips them.
 * Save/discard actions are static and wrap; nothing is sticky. */

@media screen {
  .sx-settings-workspace,
  .sx-settings-hub {
    --sx-set-ink: var(--sx-ink, var(--sx-text, #19312c));
    --sx-set-muted: var(--sx-muted, #53675f);
    --sx-set-border: var(--sx-border, #dce5df);
    --sx-set-border-strong: var(--sx-border-strong, #bdcbc4);
    --sx-set-surface: var(--sx-surface, #ffffff);
    --sx-set-muted-surface: var(--sx-surface-muted, #f8faf8);
    --sx-set-brand: var(--sx-brand, var(--sx-primary, #176b59));
    --sx-set-brand-strong: var(--sx-brand-strong, #105446);
    --sx-set-brand-soft: var(--sx-brand-soft, #e5f1ed);
    --sx-set-focus: var(--sx-focus, #167555);
    --sx-set-danger: var(--sx-danger, #b13c45);
    min-width: 0;
    color: var(--sx-set-ink);
  }
  .sx-settings-workspace [class*="col-"],
  .sx-settings-workspace form,
  .sx-settings-workspace .tab-content,
  .sx-settings-workspace .tab-pane,
  .sx-settings-hub [class*="col-"] {
    min-width: 0;
  }

  /* ---------- Page header (new .sx-settings-header hook + legacy bar) ---------- */
  .sx-settings-workspace :is(.sx-settings-header, form > .fixed.wrapper.b-b):not(.ng-hide) {
    display: block;
  }
  .sx-settings-workspace :is(.sx-settings-header, form > .fixed.wrapper.b-b) {
    min-width: 0;
    margin-block-end: 14px;
    padding-block-end: 12px;
    overflow: visible;
    border-block-end: 1px solid var(--sx-set-border);
    background: transparent;
  }
  .sx-settings-workspace :is(.sx-settings-header, form > .fixed.wrapper.b-b) .row:not(.ng-hide) {
    display: flex;
  }
  .sx-settings-workspace :is(.sx-settings-header, form > .fixed.wrapper.b-b) .row {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    min-width: 0;
    margin-inline: 0;
    overflow: visible;
  }
  .sx-settings-workspace :is(.sx-settings-header, form > .fixed.wrapper.b-b) .row::before,
  .sx-settings-workspace :is(.sx-settings-header, form > .fixed.wrapper.b-b) .row::after {
    display: none;
  }
  .sx-settings-workspace :is(.sx-settings-header, form > .fixed.wrapper.b-b) .row > [class*="col-"] {
    min-width: 0;
    float: none;
    padding-inline: 0;
  }
  .sx-settings-workspace :is(.sx-settings-header, form > .fixed.wrapper.b-b) .row > [class*="col-"]:first-child {
    flex: 1 1 18rem;
  }
  .sx-settings-workspace :is(.sx-settings-header, form > .fixed.wrapper.b-b) .row > [class*="col-"]:last-child:not(:first-child) {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    overflow: visible;
    text-align: start;
  }
  .sx-settings-workspace :is(.sx-settings-header, form > .fixed.wrapper.b-b) h1 {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: clamp(19px, 1.2rem + 0.6vw, 24px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
  }
  .sx-settings-workspace :is(.sx-settings-header, form > .fixed.wrapper.b-b) h1 i {
    margin-inline-end: 8px;
    color: var(--sx-set-brand);
  }

  /* ---------- Layout: sidebar + panel ---------- */
  .sx-settings-workspace .sx-settings-layout:not(.ng-hide) {
    display: flex;
  }
  .sx-settings-workspace .sx-settings-layout {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
    overflow: visible;
  }
  .sx-settings-workspace .sx-settings-sections:not(.ng-hide) {
    display: block;
  }
  .sx-settings-workspace .sx-settings-sections {
    flex: 0 0 240px;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    border: 1px solid var(--sx-set-border);
    border-radius: var(--sx-radius-lg, 12px);
    background: var(--sx-set-surface);
    padding: 10px;
  }
  .sx-settings-workspace .sx-settings-sections .form-control {
    width: 100%;
    margin-block-end: 8px;
  }
  .sx-settings-workspace .sx-settings-sections :is(a, button, .list-group-item):not(.ng-hide) {
    display: flex;
  }
  .sx-settings-workspace .sx-settings-sections :is(a, button, .list-group-item) {
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 38px;
    margin-block-end: 2px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: var(--sx-radius, 8px);
    background: transparent;
    color: var(--sx-set-ink);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
    text-align: start;
    overflow-wrap: anywhere;
    touch-action: manipulation;
  }
  .sx-settings-workspace .sx-settings-sections :is(a, button):is(:hover, :focus-visible) {
    border-color: var(--sx-set-border);
    background: var(--sx-set-brand-soft);
    color: var(--sx-set-brand-strong);
  }
  .sx-settings-workspace .sx-settings-sections :is(a, button, .list-group-item).active {
    border-color: var(--sx-set-brand);
    background: var(--sx-set-brand-soft);
    color: var(--sx-set-brand-strong);
    box-shadow: inset 3px 0 0 var(--sx-set-brand);
  }
  [dir="rtl"] .sx-settings-workspace .sx-settings-sections :is(a, button, .list-group-item).active,
  html[dir="rtl"] .sx-settings-workspace .sx-settings-sections :is(a, button).active,
  body.arabic-mode .sx-settings-workspace .sx-settings-sections :is(a, button).active {
    box-shadow: inset -3px 0 0 var(--sx-set-brand);
  }
  .sx-settings-workspace .sx-settings-sections :is(.badge, .label) {
    margin-inline-start: auto;
  }

  /* ---------- Panel + section cards ---------- */
  .sx-settings-workspace .sx-settings-panel:not(.ng-hide) {
    display: block;
  }
  .sx-settings-workspace .sx-settings-panel {
    flex: 1 1 22rem;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
  }
  .sx-settings-workspace :is(.sx-settings-panel > .panel, .sx-settings-panel .bg-white.padder-v, .tab-content .col-md-12.bg-white, .tab-pane .col-md-12.bg-white) {
    min-width: 0;
    margin-block-end: 14px;
    padding: 16px;
    overflow: visible;
    border: 1px solid var(--sx-set-border);
    border-radius: var(--sx-radius-lg, 12px);
    background: var(--sx-set-surface);
    overflow-wrap: anywhere;
  }
  .sx-settings-workspace :is(.sx-settings-panel, .tab-content, .tab-pane) h4 {
    min-width: 0;
    margin: 0 0 12px;
    padding-block-end: 10px;
    overflow-wrap: anywhere;
    border-block-end: 1px solid var(--sx-set-border);
    font-size: 15px;
    font-weight: 650;
    line-height: 1.4;
  }
  .sx-settings-workspace :is(.sx-settings-panel, .tab-content) :is(h5, .text-muted, .help-block) {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .sx-settings-workspace :is(.sx-settings-panel, .tab-content) h5 {
    margin: 14px 0 8px;
    font-size: 13.5px;
    font-weight: 650;
    line-height: 1.45;
  }
  .sx-settings-workspace :is(.sx-settings-panel, .tab-content) :is(.text-muted, .help-block) {
    line-height: 1.6;
  }

  /* Legacy nine-tab row stays usable until the section nav lands. */
  .sx-settings-workspace .nav-tabs:not(.ng-hide) {
    display: flex;
  }
  .sx-settings-workspace .nav-tabs {
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
    margin-block-end: 14px;
    overflow: visible;
  }
  .sx-settings-workspace .nav-tabs > li {
    margin: 0;
  }
  .sx-settings-workspace .nav-tabs > li > a {
    min-height: 36px;
    touch-action: manipulation;
  }
  .sx-settings-workspace .tab-content > .tab-pane:not(.ng-hide) {
    display: block;
  }
  .sx-settings-workspace .tab-content > .tab-pane,
  .sx-settings-workspace .tab-pane > .row.wrapper {
    min-width: 0;
    overflow: visible;
  }
  .sx-settings-workspace .tab-pane > .row.wrapper {
    margin-inline: 0;
  }

  /* ---------- Save / discard bar (static, wraps) ---------- */
  .sx-settings-workspace .sx-settings-savebar:not(.ng-hide) {
    display: flex;
  }
  .sx-settings-workspace .sx-settings-savebar {
    position: static;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-block: 4px 14px;
    padding: 12px;
    overflow: visible;
    border: 1px solid var(--sx-set-border);
    border-radius: var(--sx-radius, 8px);
    background: var(--sx-set-muted-surface);
  }
  .sx-settings-workspace .sx-settings-savebar .text-muted {
    flex: 1 1 16rem;
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 12.5px;
  }
  .sx-settings-workspace :is(.sx-settings-savebar, .sx-settings-header, form > .fixed.wrapper.b-b) .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    max-width: 100%;
    padding-inline: 18px;
    white-space: normal;
    overflow-wrap: anywhere;
    touch-action: manipulation;
  }

  /* ---------- Controls (scoped to inherited theme inputs) ---------- */
  .sx-settings-workspace .form-control {
    width: 100%;
    max-width: 100%;
    touch-action: manipulation;
  }
  .sx-settings-workspace textarea.form-control {
    min-height: 76px;
    line-height: 1.55;
    resize: vertical;
  }
  .sx-settings-workspace input[type="range"].form-control {
    min-height: 0;
    padding-inline: 0;
    border: 0;
    background: transparent;
  }
  .sx-settings-workspace .ui-select-bootstrap > .ui-select-match > .btn {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 38px;
    white-space: normal;
    text-align: start;
    overflow-wrap: anywhere;
  }
  .sx-settings-workspace .ui-select-match-text {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .sx-settings-workspace :is(.ui-select-bootstrap > .dropdown-menu, .dropdown-menu) {
    min-width: 12rem;
    max-width: min(24rem, calc(100vw - 2rem));
    text-align: start;
  }
  .sx-settings-workspace input[type="checkbox"],
  .sx-settings-hub input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--sx-set-brand);
    touch-action: manipulation;
  }
  .sx-settings-workspace checkbox {
    min-width: 0;
    touch-action: manipulation;
  }
  .sx-settings-workspace .settings-logo {
    display: block;
    max-width: 100%;
    width: auto;
    max-height: 96px;
    height: auto;
    border: 1px solid var(--sx-set-border);
    border-radius: var(--sx-radius, 8px);
    background: var(--sx-set-surface);
    padding: 6px;
  }
  .sx-settings-workspace .btn-file {
    overflow: hidden;
  }
  .sx-settings-workspace .barcode-background-preview,
  .sx-settings-workspace .barcode-preview-wrapper {
    min-height: 0;
    overflow: visible;
  }

  /* ---------- Parent settings hub ---------- */
  .sx-settings-hub .sx-settings-hub__header:not(.ng-hide) {
    display: block;
  }
  .sx-settings-hub .sx-settings-hub__header {
    min-width: 0;
    margin-block-end: 12px;
    overflow-wrap: anywhere;
  }
  .sx-settings-hub .sx-settings-hub__header h1 {
    margin: 0 0 4px;
    overflow-wrap: anywhere;
    font-size: clamp(19px, 1.2rem + 0.6vw, 24px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
  }
  .sx-settings-hub .sx-settings-hub__search:not(.ng-hide) {
    display: block;
  }
  .sx-settings-hub .sx-settings-hub__search {
    min-width: 0;
    max-width: 34rem;
    margin-block: 8px 14px;
  }
  .sx-settings-hub .sx-settings-hub__search .form-control {
    width: 100%;
  }
  .sx-settings-hub .sx-settings-hub__groups:not(.ng-hide) {
    display: grid;
  }
  .sx-settings-hub .sx-settings-hub__groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    min-width: 0;
    overflow: visible;
  }
  .sx-settings-hub .sx-settings-hub__group:not(.ng-hide) {
    display: block;
  }
  .sx-settings-hub .sx-settings-hub__group {
    min-width: 0;
    padding: 14px;
    overflow: visible;
    border: 1px solid var(--sx-set-border);
    border-radius: var(--sx-radius-lg, 12px);
    background: var(--sx-set-surface);
    overflow-wrap: anywhere;
  }
  .sx-settings-hub .sx-settings-hub__group-title {
    min-width: 0;
    margin: 0 0 8px;
    padding-block-end: 8px;
    overflow-wrap: anywhere;
    border-block-end: 1px solid var(--sx-set-border);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
  }
  .sx-settings-hub .sx-settings-hub__link:not(.ng-hide) {
    display: flex;
  }
  .sx-settings-hub .sx-settings-hub__link {
    align-items: center;
    gap: 8px;
    min-height: 38px;
    min-width: 0;
    padding: 8px 10px;
    border-radius: var(--sx-radius, 8px);
    color: var(--sx-set-ink);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: anywhere;
    text-underline-offset: 2px;
    touch-action: manipulation;
  }
  .sx-settings-hub .sx-settings-hub__link:is(:hover, :focus-visible) {
    background: var(--sx-set-brand-soft);
    color: var(--sx-set-brand-strong);
  }
  .sx-settings-hub .sx-settings-hub__link i {
    color: var(--sx-set-brand);
  }

  /* Organization and branding forms. Keep draft controls inside the Settings workspace. */
  .sx-settings-workspace .sx-settings-panel .sx-settings-form-section {
    min-width: 0;
    margin-block-end: 14px;
    padding: 16px;
    overflow: visible;
    border: 1px solid var(--sx-set-border);
    border-radius: var(--sx-radius-lg, 12px);
    background: var(--sx-set-surface);
    overflow-wrap: anywhere;
  }
  .sx-settings-workspace .sx-settings-form-section h4 {
    margin: 0 0 8px;
    padding-block-end: 10px;
    border-block-end: 1px solid var(--sx-set-border);
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.4;
  }
  .sx-settings-workspace .sx-settings-form-section h5 {
    margin: 0 0 8px;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: 13.5px;
    font-weight: 650;
    line-height: 1.45;
  }
  .sx-settings-workspace .sx-settings-form-section > .sx-settings-section-intro {
    min-width: 0;
    margin-block: 0 12px;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: 13px;
    line-height: 1.6;
  }
  .sx-settings-workspace .sx-settings-field-grid:not(.ng-hide),
  .sx-settings-workspace .sx-settings-logo-grid:not(.ng-hide) {
    display: grid;
  }
  .sx-settings-workspace .sx-settings-field-grid,
  .sx-settings-workspace .sx-settings-logo-grid {
    gap: 12px;
    min-width: 0;
    margin-inline: 0;
  }
  .sx-settings-workspace .sx-settings-field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sx-settings-workspace .sx-settings-logo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sx-settings-workspace .sx-settings-field {
    min-width: 0;
    max-width: 100%;
    margin: 0;
  }
  .sx-settings-workspace .sx-settings-field > .control-label:not(.ng-hide) {
    display: block;
  }
  .sx-settings-workspace .sx-settings-field > .control-label {
    min-width: 0;
    margin-block-end: 6px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.5;
  }
  .sx-settings-workspace .sx-settings-field > .form-control {
    width: 100%;
    max-width: 100%;
  }
  .sx-settings-workspace .sx-settings-field-help:not(.ng-hide) {
    display: block;
  }
  .sx-settings-workspace .sx-settings-field-help {
    min-width: 0;
    margin-block: 6px 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: 12.5px;
    line-height: 1.6;
  }
  /* Current, empty and pending logo states. */
  .sx-settings-workspace .sx-settings-logo-card {
    min-width: 0;
    max-width: 100%;
    padding: 12px;
    overflow: visible;
    border: 1px solid var(--sx-set-border);
    border-radius: var(--sx-radius, 8px);
    background: var(--sx-set-muted-surface);
    overflow-wrap: anywhere;
  }
  .sx-settings-workspace .sx-settings-logo-card h5 {
    margin: 0 0 8px;
    padding: 0 0 8px;
    border-block-end: 1px solid var(--sx-set-border);
  }
  .sx-settings-workspace .sx-settings-logo-preview:not(.ng-hide) {
    display: flex;
  }
  .sx-settings-workspace .sx-settings-logo-preview {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    min-width: 0;
    width: 100%;
    margin-block-end: 8px;
    padding: 8px;
    overflow: hidden;
    border: 1px dashed var(--sx-set-border-strong);
    border-radius: var(--sx-radius, 8px);
    background: var(--sx-set-surface);
  }
  .sx-settings-workspace .sx-settings-logo-preview .settings-logo {
    margin: 0;
  }
  .sx-settings-workspace .sx-settings-logo-card :is(p.text-muted, p.text-info) {
    min-width: 0;
    margin-block: 0 8px;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: 12.5px;
    line-height: 1.6;
  }
  .sx-settings-workspace .sx-settings-logo-actions:not(.ng-hide) {
    display: flex;
  }
  .sx-settings-workspace .sx-settings-logo-actions {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-block-start: 8px;
  }
  .sx-settings-workspace .sx-settings-logo-actions .btn {
    touch-action: manipulation;
  }
  /* File-chooser label keeps the native input clickable and keyboard-focusable;
   * the visible ring moves to the label via :focus-within so focus is never hidden. */
  .sx-settings-workspace label.btn-file:not(.ng-hide) {
    display: inline-flex;
  }
  .sx-settings-workspace label.btn-file {
    position: relative;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
  }
  .sx-settings-workspace label.btn-file > input[type="file"] {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
  }
  .sx-settings-workspace label.btn-file:focus-within {
    outline: 2px solid var(--sx-set-focus);
    outline-offset: 2px;
  }
  /* Frame the editor without applying draft CSS to the application. */
  .sx-settings-workspace .sx-settings-css-editor:not(.ng-hide) {
    display: block;
  }
  .sx-settings-workspace .sx-settings-css-editor {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid var(--sx-set-border);
    border-radius: var(--sx-radius, 8px);
    background: var(--sx-set-surface);
  }
  .sx-settings-workspace .sx-settings-css-editor .ace_editor {
    min-height: 16rem;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    border: 0;
    font-size: 13px;
    line-height: 1.6;
  }
  .sx-settings-workspace #settings-section-branding pre:not(.ng-hide) {
    display: block;
  }
  .sx-settings-workspace #settings-section-branding pre {
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 12px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    border: 1px solid var(--sx-set-border);
    border-radius: var(--sx-radius, 8px);
    background: var(--sx-set-muted-surface);
    font-size: 12.5px;
    line-height: 1.6;
  }

  /* ---------- Focus (scoped) ---------- */
  .sx-settings-workspace :is(a, button, input, select, textarea, [tabindex]):focus-visible,
  .sx-settings-hub :is(a, button, input, select, [tabindex]):focus-visible {
    outline: 2px solid var(--sx-set-focus);
    outline-offset: 2px;
  }

  @media (min-width: 1440px) {
    .sx-settings-workspace .sx-settings-panel .sx-settings-form-section {
      padding: 20px;
    }
    .sx-settings-workspace .sx-settings-field-grid {
      gap: 14px;
    }
    .sx-settings-workspace .sx-settings-panel,
    .sx-settings-hub {
      max-width: 1200px;
    }
    .sx-settings-hub {
      margin-inline: auto;
    }
  }
  @media (max-width: 1024px) {
    .sx-settings-workspace .sx-settings-sections {
      flex: 1 1 100%;
      width: 100%;
    }
    .sx-settings-hub .sx-settings-hub__groups {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sx-settings-workspace :is(.sx-settings-header, form > .fixed.wrapper.b-b) .row > [class*="col-"]:last-child:not(:first-child) {
      justify-content: flex-start;
    }
  }
  @media (max-width: 640px) {
    .sx-settings-workspace .sx-settings-field-grid,
    .sx-settings-workspace .sx-settings-logo-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  @media (max-width: 390px) {
    .sx-settings-workspace .sx-settings-panel .sx-settings-form-section {
      padding: 12px 10px;
    }
    .sx-settings-workspace .sx-settings-logo-card {
      padding: 10px;
    }
    .sx-settings-workspace :is(.sx-settings-panel > .panel, .sx-settings-panel .bg-white.padder-v, .tab-content .col-md-12.bg-white, .tab-pane .col-md-12.bg-white) {
      padding: 12px 10px;
    }
    .sx-settings-workspace .sx-settings-sections {
      padding: 8px;
    }
    .sx-settings-workspace .sx-settings-savebar .btn {
      flex: 1 1 100%;
      width: 100%;
    }
    .sx-settings-hub .sx-settings-hub__groups {
      grid-template-columns: minmax(0, 1fr);
    }
    .sx-settings-hub .sx-settings-hub__group {
      padding: 12px 10px;
    }
  }
  @media (max-width: 320px) {
    .sx-settings-workspace :is(.sx-settings-header, form > .fixed.wrapper.b-b) h1,
    .sx-settings-hub .sx-settings-hub__header h1 {
      font-size: 18px;
    }
    .sx-settings-workspace :is(.sx-settings-panel > .panel, .tab-content .col-md-12.bg-white, .tab-pane .col-md-12.bg-white) {
      padding: 10px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .sx-settings-workspace :is(.btn, a, .dropdown-menu),
    .sx-settings-hub :is(.btn, a) {
      transition-duration: 0.01ms;
      transition-delay: 0s;
      animation-duration: 0.01ms;
      animation-iteration-count: 1;
      scroll-behavior: auto;
    }
  }
}

/* Integration with the section editor and the app's existing shell. */
@media screen {
  .sx-settings-workspace fieldset.sx-settings-layout {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
    width: 100%;
  }
  .sx-settings-workspace .sx-settings-mobile-section { display: none; }
  .sx-settings-hub { padding: 24px 28px; }
  .sx-settings-hub .sx-settings-hub__groups { align-items: start; }
  .sx-settings-hub .sx-settings-hub__header:not(.ng-hide) { display: flex; align-items: start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .sx-settings-hub .sx-settings-hub__search { max-width: 560px; }
  .sx-settings-hub .sx-settings-hub__group-title { font-size: 17px; }
  .sx-settings-hub .sx-settings-hub__link { justify-content: space-between; }
  .sx-settings-hub .sx-settings-hub__group > p { color: var(--sx-set-muted); min-height: 42px; }
  .sx-settings-hub .sx-settings-hub__empty { padding: 28px 0; }
  @media (max-width: 991px) {
    .sx-settings-workspace .sx-settings-desktop-sections:not(.ng-hide) { display: none; }
    .sx-settings-workspace .sx-settings-mobile-section:not(.ng-hide) { display: block; }
    .sx-settings-workspace .sx-settings-sections { flex-basis: 100%; }
    .sx-settings-hub { padding: 20px 16px; }
  }
  @media (max-width: 640px) {
    .sx-settings-hub .sx-settings-hub__groups { grid-template-columns: minmax(0, 1fr); }
  }
}

.sx-watermark-controls { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(130px,100%),1fr)); gap:12px; min-width:0; margin-top:16px; }
.sx-watermark-controls > label { min-width:0; }
.sx-watermark-controls .form-control { width:100%; max-width:100%; min-width:0; }
@media (max-width:1100px) {
  .sx-settings-workspace .sx-settings-logo-grid { grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); }
}
.sx-watermark-page { position:relative; aspect-ratio:210/297; max-width:340px; margin:18px auto; border:1px solid #ccd9d0; background:white; overflow:hidden; box-shadow:0 6px 20px #183d3310; }
.sx-watermark-page > img { position:absolute; left:50%; pointer-events:none; }
.sx-watermark-sample { position:relative; padding:28px 20px; z-index:1; color:#52665b; }