/* Shared settings/security/integrations layer. Reduce toward reusable patterns only. */


html[data-theme="dark"] .component-settings-item {
  background: rgba(15, 23, 42, 0.7);
  border-color: rgba(148, 163, 184, 0.22);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] .component-flag {
  background: rgba(148, 163, 184, 0.14);
  color: rgba(226, 232, 240, 0.86);
}

html[data-theme="dark"] .component-flag--on {
  background: rgba(34, 197, 94, 0.16);
  color: rgba(187, 247, 208, 0.95);
}

html[data-theme="dark"] .component-flag--off {
  background: rgba(239, 68, 68, 0.16);
  color: #fca5a5;
}

html[data-theme="dark"] .component-template-pills li {
  background: rgba(2, 6, 23, 0.55);
  border-color: rgba(148, 163, 184, 0.22);
  color: rgba(226, 232, 240, 0.86);
}

html[data-theme="dark"] .component-template-pills__more {
  color: rgba(148, 163, 184, 0.92);
}

html[data-theme="dark"] .component-reason-count {
  color: rgba(226, 232, 240, 0.92);
}

html[data-theme="dark"] .component-reasons {
  background: rgba(2, 6, 23, 0.62);
  border-color: rgba(148, 163, 184, 0.22);
}

html[data-theme="dark"] .component-reasons[open] summary {
  border-bottom-color: rgba(148, 163, 184, 0.22);
}

html[data-theme="dark"] .component-reasons__meta {
  color: rgba(148, 163, 184, 0.92);
}

html[data-theme="dark"] .component-reasons-row input[type="text"] {
  background: rgba(15, 23, 42, 0.7);
  border-color: rgba(148, 163, 184, 0.28);
  color: var(--text);
}

html[data-theme="dark"] .component-stats__card {
  background: rgba(15, 23, 42, 0.65);
  border-color: rgba(148, 163, 184, 0.22);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] .component-stats__value {
  color: var(--text);
}

html[data-theme="dark"] .component-stats__label,
html[data-theme="dark"] .component-search__meta {
  color: rgba(148, 163, 184, 0.92);
}

html[data-theme="dark"] .component-search {
  background: rgba(2, 6, 23, 0.6);
  border-color: rgba(148, 163, 184, 0.22);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12);
}

html[data-theme="dark"] .component-search input {
  background: transparent;
  color: var(--text);
}

html[data-theme="dark"] .component-search__icon {
  border-color: rgba(148, 163, 184, 0.72);
}

html[data-theme="dark"] .component-search__icon::after {
  background: rgba(148, 163, 184, 0.72);
}

html[data-theme="dark"] .component-filter {
  border-color: rgba(148, 163, 184, 0.22);
  color: rgba(226, 232, 240, 0.86);
}

html[data-theme="dark"] .component-filter.is-active {
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(59, 130, 246, 0.35);
  color: #bfdbfe;
  box-shadow: none;
}

/* Shared settings shell */
.settings-form,
.component-settings-form {
  background: transparent;
  padding: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settings-upload {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.settings-card__header p {
  margin: 0.2rem 0 0;
  color: #4b5563;
}

.settings-card__header .eyebrow {
  margin: 0 0 0.35rem 0;
  color: var(--brand, #0052cc);
}

.form-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.fire-door-pricing-groups {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

.fire-door-pricing-group {
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 20px;
  margin-bottom: 16px;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.9), #fff);
  overflow: hidden;
  box-shadow: 0 16px 35px rgba(15, 23, 42, 0.08);
}

.fire-door-pricing-group summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  cursor: pointer;
}

.fire-door-pricing-group summary::-webkit-details-marker {
  display: none;
}

.fire-door-pricing-group summary strong {
  font-size: 1.05rem;
  color: #0f172a;
}

.fire-door-pricing-group summary p {
  margin: 4px 0 0 0;
  color: #64748b;
  font-size: 0.9rem;
}

.fire-door-pricing-group__count {
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: #fff;
}

.fire-door-pricing-group[open] summary {
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  background: rgba(255, 255, 255, 0.9);
}

.fire-door-pricing-grid {
  display: grid;
  gap: 16px;
  padding: 18px 22px 22px;
}

.fire-door-pricing-grid__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid rgba(204, 212, 230, 0.95);
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.9));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 12px 28px rgba(15, 23, 42, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fire-door-pricing-grid__item:hover,
.fire-door-pricing-grid__item:focus-within {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 18px 36px rgba(15, 23, 42, 0.12);
}

.fire-door-pricing-grid__label {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fire-door-pricing-grid__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fire-door-pricing-grid__icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(37, 99, 235, 0.8));
  color: #f8fafc;
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.25);
}

.fire-door-pricing-grid__info {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.18);
  border: 1px solid rgba(148, 163, 184, 0.5);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  font-weight: 700;
  margin-left: auto;
}

.fire-door-pricing-grid__info::after {
  content: 'i';
  font-size: 0.75rem;
}

.input-with-prefix {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0 12px;
  background: var(--card);
  gap: 6px;
  color: var(--text);
}

.input-with-prefix span {
  color: var(--text-muted);
}

.input-with-prefix input {
  border: none;
  flex: 1;
  min-width: 0;
  padding: 10px 0;
  font: inherit;
  background: transparent;
  color: inherit;
}

.fire-door-pricing-grid .input-with-prefix {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  padding: 0 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.fire-door-pricing-grid .input-with-prefix input {
  border: none;
  flex: 1;
  padding: 10px 8px;
  font: inherit;
  background: transparent;
  color: var(--text);
}

.fire-door-pricing-grid .input-with-prefix span {
  font-weight: 600;
  color: var(--text-muted);
}

.has-tooltip {
  position: relative;
}

.has-tooltip::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: rgba(15, 23, 42, 0.9);
  color: #fff;
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.has-tooltip:focus-visible::before,
.has-tooltip:hover::before {
  opacity: 1;
  transform: translate(-50%, -2px);
}

.component-checklist-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.component-checklist-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.component-checklist-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.component-checklist-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
}

.component-stats {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.component-stats__card {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  padding: 0.85rem 1rem;
  min-width: 160px;
  background: rgba(248, 250, 252, 0.85);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.component-stats__value {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  color: #0f172a;
}

.component-stats__label {
  margin: 0;
  font-size: 0.85rem;
  color: #6b7280;
}

.component-controls {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.component-search {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.component-search input {
  border: none;
  padding: 0.25rem 0.1rem;
  font-size: 0.95rem;
  min-width: 180px;
}

.component-search input:focus:not(:focus-visible) {
  outline: none;
}

.component-search__icon {
  width: 16px;
  height: 16px;
  border: 2px solid #94a3b8;
  border-radius: 50%;
  position: relative;
}

.component-search__icon::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 2px;
  background: #94a3b8;
  border-radius: 2px;
  right: -5px;
  bottom: -3px;
  transform: rotate(40deg);
}

.component-filter-group {
  display: inline-flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.component-filter {
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  background: transparent;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  color: #4b5563;
}

.component-filter.is-active {
  background: rgba(230, 86, 30, 0.12);
  border-color: rgba(230, 86, 30, 0.4);
  color: #b5471b;
  box-shadow: 0 6px 14px rgba(230, 86, 30, 0.18);
}

.component-search__meta {
  margin: 0;
  font-size: 0.85rem;
  color: #6b7280;
}

.component-empty {
  margin: 0;
  font-size: 0.9rem;
  color: #9ca3af;
}


.component-settings-item {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), #fff);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.component-settings-item--enabled {
  border-color: rgba(15, 118, 110, 0.3);
  box-shadow: 0 14px 34px rgba(15, 118, 110, 0.1);
}

.component-settings-item--warning {
  border-color: rgba(239, 68, 68, 0.28);
  box-shadow: 0 14px 34px rgba(239, 68, 68, 0.12);
}

.component-settings-item--disabled {
  opacity: 0.9;
  border-style: dashed;
}

.component-settings-item__header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.component-settings-item__key {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  color: #94a3b8;
}

.component-settings-item__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.component-settings-item__toggle span {
  font-size: 0.8rem;
}

.component-flag {
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: rgba(148, 163, 184, 0.15);
  color: #475569;
}

.component-flag--on {
  background: rgba(16, 185, 129, 0.15);
  color: #047857;
}

.component-flag--off {
  background: rgba(248, 113, 113, 0.15);
  color: #b91c1c;
}

.component-settings-item__insights {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

.component-template-pills {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 6px;
}

.component-template-pills li {
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.8rem;
  background: rgba(248, 250, 252, 0.9);
}

.component-template-pills__more {
  border-style: dashed;
  color: #475569;
}

.component-template-empty {
  margin: 0;
  font-size: 0.85rem;
  color: #9ca3af;
}

.component-reason-count {
  font-size: 0.85rem;
  font-weight: 600;
  color: #0f172a;
}

.component-reason-count--empty {
  color: #9ca3af;
}

.component-reasons {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  background: #fff;
}

.component-reasons summary {
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-weight: 600;
}

.component-reasons summary > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.component-reasons__meta {
  font-size: 0.85rem;
  color: #6b7280;
}

.component-reasons[open] summary {
  border-bottom: 1px solid var(--border);
}

.component-reasons__body {
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.component-reasons__label {
  display: none;
}

.component-reasons-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.component-reasons-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.component-reasons-row input[type="text"] {
  flex: 1;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  padding: 8px 10px;
  font-size: 0.9rem;
}


.settings-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.settings-card__header p {
    margin: 0.2rem 0 0;
    color: #4b5563;
}

.settings-card__header .eyebrow {
    margin: 0 0 0.35rem 0;
    color: var(--brand, #0052cc);
}

@media (min-width: 769px) and (max-width: 1366px) {
    .component-search {
      width: 100%;
    }

    :where(.component-search input) {
      min-width: 0;
      width: 100%;
      font-size: 16px;
    }
}

@media (max-width: 768px) {
    .component-settings-item__header {
      flex-direction: column;
    }
  
    .component-settings-item__actions {
      width: 100%;
      justify-content: space-between;
    }
  
    .component-settings-item__insights {
      flex-direction: column;
      align-items: flex-start;
    }
}

.brand-logo-preview {
  border: 1px dashed #d7d7d7;
  border-radius: 12px;
  padding: 12px;
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  width: fit-content;
  background: #fafafa;
}

.brand-logo-preview img {
  max-width: 200px;
  max-height: 120px;
  object-fit: contain;
}

.brand-logo-preview .logo-placeholder--large svg { height: 120px; width: auto; max-width: 200px; }

.pricing-settings-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pricing-settings-card--wide {
  gap: 24px;
}

.integrations .integration-card[hidden] {
  display: none !important;
}

.integrations-noscript {
  margin-top: 12px;
}

.integration-setup__scope-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 12px;
}

.integration-setup__scope-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #dbe3f0;
  border-radius: 14px;
  background: #ffffff;
}

.integration-setup__scope-item input {
  width: 18px;
  height: 18px;
}

.integration-setup__scope-warning {
  margin: 10px 0 0;
  color: #b45309;
}

.integration-setup__error {
  margin: 8px 0 0;
  color: #b91c1c;
}

/* Extracted from app/Views/integrations/index.php. */
	        .integration-card__identity {
	            display: flex;
	            gap: 12px;
	            align-items: flex-start;
	        }
	        .integration-card__logo-box {
	            width: 72px;
	            height: 72px;
	            border-radius: 12px;
	            border: 1px solid var(--border);
	            background: var(--surface-muted);
	            padding: 3px;
	            box-sizing: border-box;
	            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
	            flex: 0 0 auto;
                overflow: hidden;
                display: inline-flex;
                align-items: center;
                justify-content: center;
	        }
            .integration-card__logo {
                width: 100%;
                height: 100%;
                display: block;
                object-fit: contain;
                object-position: center;
            }
            .integration-card[data-integration="stripe"] .integration-card__logo {
                transform: scale(1.12);
            }
	        html[data-theme="dark"] .integration-card__logo-box {
	            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
	        }
        .integration-card__text {
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
        }
	        .integration-card__category {
	            margin: 0;
	            font-size: 0.78rem;
	            text-transform: uppercase;
	            letter-spacing: 0.12em;
	            color: var(--brand);
	        }
	        .integration-card__name {
	            margin: 0 0 6px 0;
	            font-size: 1.1rem;
	            font-weight: 700 !important;
	        }
        .integration-card__description {
            margin: 0;
            line-height: 1.35rem;
        }
        .integration-card__meta {
            margin: 2px 0 0;
            font-size: 0.9rem;
            line-height: 1.25rem;
        }
	        .integration-card__error {
	            margin: 6px 0 0;
	            color: var(--danger);
	        }
	        .badge--warning {
	            background: rgba(245, 158, 11, 0.14);
	            color: #92400e;
	        }
	        .badge--danger {
	            background: rgba(239, 68, 68, 0.12);
	            color: #991b1b;
	        }
	        .badge--info {
	            background: rgba(59, 130, 246, 0.12);
	            color: #1e40af;
	        }
	        html[data-theme="dark"] .badge--warning {
	            background: rgba(245, 158, 11, 0.22);
	            color: rgba(254, 243, 199, 0.95);
	        }
	        html[data-theme="dark"] .badge--danger {
	            background: rgba(239, 68, 68, 0.22);
	            color: rgba(254, 202, 202, 0.95);
	        }
	        html[data-theme="dark"] .badge--info {
	            background: rgba(59, 130, 246, 0.22);
	            color: rgba(191, 219, 254, 0.95);
	        }
	        html[data-theme="dark"] .badge--success {
	            background: rgba(34, 197, 94, 0.22);
	            color: rgba(220, 252, 231, 0.95);
	        }
	        html[data-theme="dark"] .badge--client {
	            background: rgba(148, 163, 184, 0.16);
	            color: rgba(226, 232, 240, 0.9);
	        }
        .integration-card__footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
        }
	        .integration-card__footer .btn {
	            margin-left: auto;
	        }
            .integrations-toolbar {
                margin: 14px 0 16px;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
            }
            .integrations-toolbar__controls {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
                align-items: flex-end;
                flex: 1 1 auto;
                min-width: 0;
            }
            .integrations-toolbar__meta {
                white-space: nowrap;
            }
            .integrations-filter {
                display: flex;
                align-items: center;
                font-size: 0.85rem;
            }
            .integrations-filter select {
                min-width: 180px;
                min-height: 44px;
                padding: 10px 14px;
                border-radius: 999px;
                border: 1px solid var(--border);
                background: var(--card);
                color: var(--text);
                font: inherit;
            }
            .integrations-search {
                min-width: min(360px, 100%);
                flex: 1 1 260px;
                position: relative;
            }
            .integrations-search .input--search {
                width: 100%;
                min-height: 44px;
                padding-right: 44px;
            }
            /* Prevent native search clear icons (we use our own clear button). */
            .integrations-search input[type="search"]::-webkit-search-cancel-button,
            .integrations-search input[type="search"]::-webkit-search-decoration,
            .integrations-search input[type="search"]::-webkit-search-results-button,
            .integrations-search input[type="search"]::-webkit-search-results-decoration {
                -webkit-appearance: none;
                appearance: none;
                display: none;
            }
            .integrations-search input[type="search"]::-ms-clear,
            .integrations-search input[type="search"]::-ms-reveal {
                display: none;
                width: 0;
                height: 0;
            }
            .integrations-search__clear {
                position: absolute;
                right: 10px;
                top: 50%;
                width: 30px;
                height: 30px;
                border-radius: 999px;
                border: 1px solid rgba(203, 213, 225, 0.9);
                background: rgba(248, 250, 252, 0.95);
                color: rgba(15, 23, 42, 0.75);
                cursor: pointer;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                font-size: 1.05rem;
                line-height: 1;
                transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
                transform: translateY(-50%);
            }
            .integrations-search__clear:hover {
                border-color: rgba(59, 130, 246, 0.4);
                color: rgba(15, 23, 42, 0.9);
                background: #ffffff;
                transform: translateY(-50%) scale(1.02);
            }
            .integrations-search__clear:focus-visible {
                outline: 2px solid rgba(59, 130, 246, 0.55);
                outline-offset: 2px;
            }
            .integrations-empty {
                margin: 0 0 10px;
            }
            @media (max-width: 720px) {
                .integrations-toolbar {
                    flex-direction: column;
                    align-items: stretch;
                }
                .integrations-toolbar__meta {
                    align-self: flex-start;
                }
                .integrations-filter select {
                    width: 100%;
                    min-width: 0;
                }
            }

            /* Keep anchor CTAs pixel-identical to button CTAs in the card footer. */
            .integration-card__footer :where(a.btn, button.btn) {
                line-height: 1;
                text-decoration: none;
                box-sizing: border-box;
            }

            .btn--coming-soon {
                background: #f7f5f0;
                border: 1px dashed rgba(0, 0, 0, 0.18);
                color: #3d3a34;
                box-shadow: none;
                opacity: 1;
                cursor: not-allowed;
                transform: none !important;
                pointer-events: none;
            }
        .fd-modal[hidden] { display: none !important; }
        .fd-modal {
            position: fixed;
            inset: 0;
            z-index: 9999;
            display: grid;
            place-items: center;
            padding: 18px;
        }
	        .fd-modal__backdrop {
	            position: absolute;
	            inset: 0;
	            background: rgba(15, 23, 42, 0.5);
	            backdrop-filter: blur(6px);
	        }
	        html[data-theme="dark"] .fd-modal__backdrop {
	            background: rgba(2, 6, 23, 0.72);
	        }
	        .fd-modal__panel {
	            position: relative;
	            width: min(760px, 100%);
	            max-height: min(85vh, 900px);
	            overflow: auto;
	            padding: 22px;
	            border-radius: 22px;
	            border: 1px solid var(--border);
	            background: var(--card);
	            box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
	        }
            .fd-modal__panel--wide {
                width: min(1040px, 100%);
            }
	        html[data-theme="dark"] .fd-modal__panel {
	            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
	        }
	        .fd-modal__head {
	            display: flex;
	            justify-content: space-between;
	            align-items: flex-start;
	            gap: 12px;
	            margin-bottom: 12px;
	        }
	        .fd-modal__heading {
	            display: flex;
	            gap: 12px;
	            align-items: center;
	            min-width: 0;
	        }
	        .fd-modal__logo {
	            width: 52px;
	            height: 52px;
	            border-radius: 14px;
	            border: 1px solid var(--border);
	            background: var(--surface-muted);
	            padding: 5px;
	            flex: 0 0 auto;
	            object-fit: contain;
	            object-position: center;
	        }
	        .fd-modal__title { margin: 0; }
        .fd-modal__loading {
            display: flex;
            gap: 10px;
            align-items: center;
            padding: 14px 0;
        }
        .fd-modal__loading[hidden] {
            display: none !important;
        }
	        .spinner {
	            width: 18px;
	            height: 18px;
	            border-radius: 50%;
	            border: 2px solid var(--border);
	            border-top-color: var(--text);
	            animation: spin 0.8s linear infinite;
	        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
	        body.fd-modal-open {
	            overflow: hidden;
	        }
        .xero-modal__row {
            margin-top: 10px;
        }
        .xero-modal__field {
            min-width: 220px;
            flex: 1;
        }
        @media (max-width: 640px) {
            .xero-modal__field {
                min-width: 100%;
            }
        }
	        .xero-modal__label {
	            margin-bottom: 6px;
	        }
	        .xero-modal__field-head {
	            display: flex;
	            align-items: center;
	            justify-content: space-between;
	            gap: 10px;
	            margin-bottom: 6px;
	        }
	        .xero-modal__actions {
	            margin-top: 14px;
	        }
        .xero-modal__danger {
            margin-top: 14px;
            padding-top: 12px;
            border-top: 1px solid var(--border);
        }
	        .xero-modal__ready {
	            margin-top: 10px;
	        }
		        .xero-modal__diag-error {
		            margin-top: 8px;
		            color: var(--danger);
		        }
        .xero-modal__grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 14px;
        }
        .xero-modal__col {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
        @media (min-width: 960px) {
            .xero-modal__grid {
                grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
                gap: 16px;
                align-items: start;
            }
        }
	        .xero-modal__section-head {
	            display: flex;
	            justify-content: space-between;
	            align-items: flex-start;
	            gap: 12px;
	        }
	        .xero-modal__section-head--compact {
	            align-items: center;
	        }
	        .xero-modal__hint {
	            margin: 10px 0 0;
	        }
        .xero-modal__scopes {
            font-size: 0.92rem;
            line-height: 1.25rem;
            word-break: break-word;
            max-width: 100%;
        }
	        .xero-modal__jobs {
	            list-style: none;
	            padding: 0;
	            margin: 14px 0 0;
	            display: flex;
	            flex-direction: column;
	            gap: 10px;
	            max-height: 280px;
	            overflow: auto;
	            padding-right: 4px;
	            overscroll-behavior: contain;
	        }
		        .xero-modal__job {
		            border: 1px solid var(--border);
		            border-radius: 16px;
		            padding: 12px;
	            background: var(--surface-muted);
	        }
        .xero-modal__job-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }
	        .xero-modal__job-type {
	            font-weight: 600;
	            color: var(--text);
	            font-size: 0.95rem;
                overflow-wrap: anywhere;
	        }
	        .xero-modal__job-pill {
	            font-size: 0.78rem;
	            text-transform: uppercase;
	            letter-spacing: 0.08em;
	            padding: 6px 10px;
	            border-radius: 999px;
	            border: 1px solid var(--border);
	            color: var(--text-muted);
	            background: var(--card);
	            white-space: nowrap;
	        }
	        .xero-modal__job-meta {
	            margin-top: 6px;
	        }
		        .xero-modal__job-actions {
		            margin-top: 8px;
		            display: flex;
		            justify-content: flex-end;
		        }
		        .xero-modal__job-error-summary {
		            margin-top: 8px;
		            color: var(--danger);
		            font-size: 0.9rem;
		            line-height: 1.25rem;
		            white-space: nowrap;
		            overflow: hidden;
		            text-overflow: ellipsis;
		        }
		        .xero-modal__job-error {
		            margin-top: 8px;
		            color: var(--danger);
		            font-size: 0.9rem;
	            line-height: 1.25rem;
	        }
        .xero-modal__clipboard {
            position: fixed;
            left: -10000px;
            top: -10000px;
        }
        .hubspot-menu {
            position: relative;
            display: inline-flex;
            align-items: center;
        }
        .hubspot-menu__panel {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            min-width: 240px;
            z-index: 10;
            border: 1px solid var(--border);
            background: var(--card);
            border-radius: 14px;
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
            padding: 6px;
        }
        .hubspot-menu__item {
            width: 100%;
            text-align: left;
            border: 0;
            background: transparent;
            padding: 10px 10px;
            border-radius: 10px;
            color: var(--text);
            cursor: pointer;
            font-size: 0.95rem;
            line-height: 1.2rem;
        }
        .hubspot-menu__item:hover {
            background: var(--surface-muted);
        }
        .hubspot-modal__outbox-hint {
            margin-top: 8px;
        }
	        .hubspot-modal__hint {
	            margin-top: 10px;
	            font-size: 0.92rem;
	            line-height: 1.25rem;
	        }
	        .hubspot-modal__steps,
	        .integration-modal__steps {
	            margin: 10px 0 0;
	            padding-left: 1.25rem;
	            color: var(--text-muted);
	            font-size: 0.95rem;
	            line-height: 1.35rem;
	        }
	        .hubspot-modal__callout {
	            margin-top: 12px;
	        }
	        .hubspot-modal__head,
	        .integration-modal__head {
	            display: flex;
	            flex-wrap: wrap;
	            gap: 8px;
	            justify-content: space-between;
	            align-items: center;
	        }
	        .hubspot-modal__title,
	        .integration-modal__title {
	            margin: 0;
	        }
	        .hubspot-modal__subtitle,
	        .integration-modal__subtitle {
	            margin: 6px 0 0;
	        }
	        .hubspot-modal__kpi-grid,
	        .integration-modal__kpi-grid {
	            display: grid;
	            grid-template-columns: minmax(0, 1fr);
	            gap: 14px;
	            margin-top: 12px;
	        }
	        @media (min-width: 960px) {
	            .hubspot-modal__kpi-grid,
	            .integration-modal__kpi-grid {
	                grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	                gap: 16px;
	            }
	        }
	        .hubspot-modal__kpi,
	        .integration-modal__kpi {
	            border: 1px solid var(--border);
	            border-radius: 16px;
	            padding: 12px 14px;
	            background: var(--surface-muted);
	        }
	        .hubspot-modal__kpi-title,
	        .integration-modal__kpi-title {
	            display: flex;
	            align-items: center;
	            justify-content: space-between;
	            gap: 10px;
	            margin-bottom: 8px;
	        }
	        .hubspot-modal__kpi-title h4,
	        .integration-modal__kpi-title h4 {
	            margin: 0;
	            font-size: 0.98rem;
	        }
	        .hubspot-modal__dl,
	        .integration-modal__dl {
	            margin: 0;
	        }
	        .hubspot-modal__dl-row,
	        .integration-modal__dl-row {
	            display: flex;
	            align-items: flex-start;
	            justify-content: space-between;
	            gap: 12px;
	            padding: 8px 0;
	            border-bottom: 1px dashed var(--border);
	        }
	        .hubspot-modal__dl-row:last-child,
	        .integration-modal__dl-row:last-child {
	            border-bottom: 0;
	        }
	        .hubspot-modal__dl dt,
	        .integration-modal__dl dt {
	            margin: 0;
	            font-size: 0.85rem;
	            letter-spacing: 0.02em;
	            color: var(--text-muted);
	        }
	        .hubspot-modal__dl dd,
	        .integration-modal__dl dd {
	            margin: 0;
	            font-weight: 600;
	            color: var(--text);
	            text-align: right;
	            overflow-wrap: anywhere;
	        }
	        .hubspot-modal__actions,
	        .integration-modal__actions {
	            margin-top: 14px;
	            display: flex;
	            flex-wrap: wrap;
	            align-items: center;
	            justify-content: space-between;
	            gap: 10px;
	        }
	        .hubspot-modal__actions--left,
	        .integration-modal__actions--left {
	            justify-content: flex-start;
	        }
	        .hubspot-modal__actions-group,
	        .integration-modal__actions-group {
	            display: flex;
	            flex-wrap: wrap;
	            gap: 8px;
	            align-items: center;
	        }
	        .hubspot-modal__details,
	        .integration-modal__details {
	            margin-top: 14px;
	        }
	        .hubspot-modal__details > summary,
	        .integration-modal__details > summary {
	            cursor: pointer;
	            list-style: none;
	            display: flex;
	            align-items: center;
	            justify-content: space-between;
	            gap: 12px;
	            padding: 10px 12px;
	            border: 1px solid var(--border);
	            border-radius: 14px;
	            background: var(--surface-muted);
	        }
	        .hubspot-modal__details > summary::-webkit-details-marker,
	        .integration-modal__details > summary::-webkit-details-marker {
	            display: none;
	        }
	        .hubspot-modal__details > summary::after,
	        .integration-modal__details > summary::after {
	            content: "▾";
	            flex: 0 0 auto;
	            color: var(--text-muted);
	            transition: transform 0.15s ease-out;
	        }
	        .hubspot-modal__details[open] > summary::after,
	        .integration-modal__details[open] > summary::after {
	            transform: rotate(180deg);
	        }
	        .hubspot-modal__details-title,
	        .integration-modal__details-title {
	            font-weight: 600;
	            color: var(--text);
	        }
	        .hubspot-modal__details-body,
	        .integration-modal__details-body {
	            margin-top: 12px;
	        }
	        .integration-modal__checks {
	            display: grid;
	            grid-template-columns: minmax(0, 1fr);
	            gap: 10px;
	            margin-top: 10px;
	        }
	        @media (min-width: 960px) {
	            .integration-modal__checks {
	                grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	            }
	        }
	        .integration-modal__checkbox {
	            display: flex;
	            gap: 10px;
	            align-items: flex-start;
	            padding: 10px 12px;
	            border: 1px solid var(--border);
	            border-radius: 14px;
	            background: var(--surface-muted);
	        }
	        .integration-modal__checkbox input[type="checkbox"] {
	            margin-top: 3px;
	        }
	        .integration-modal__checkbox strong {
	            display: block;
	            margin-bottom: 2px;
	        }
	        .integration-modal__checkbox-head {
	            display: flex;
	            align-items: center;
	            justify-content: space-between;
	            gap: 10px;
	        }
	        .integration-modal__pill {
	            display: inline-flex;
	            align-items: center;
	            justify-content: center;
	            padding: 2px 8px;
	            border-radius: 999px;
	            border: 1px solid var(--border);
	            background: var(--surface);
	            color: var(--text-muted);
	            font-size: 0.78rem;
	            line-height: 1.1rem;
	            white-space: nowrap;
	        }
	        .integration-modal__divider {
	            height: 1px;
	            background: var(--border);
	            margin: 12px 0;
	        }
	        .integration-modal__activity {
	            list-style: none;
	            padding-left: 0;
	            margin: 10px 0 0;
	            display: grid;
	            gap: 10px;
	        }
	        .integration-modal__activity-row {
	            display: flex;
	            align-items: flex-start;
	            justify-content: space-between;
	            gap: 12px;
	            padding: 10px 12px;
	            border: 1px solid var(--border);
	            border-radius: 14px;
	            background: var(--surface-muted);
	        }
	        .integration-modal__activity-row strong {
	            font-weight: 600;
	        }
	        .integration-modal__activity-meta {
	            margin-top: 4px;
	            font-size: 0.92rem;
	            line-height: 1.25rem;
	        }
	        .integration-modal__activity-error {
	            margin-top: 6px;
	            font-size: 0.92rem;
	            line-height: 1.25rem;
	            color: var(--danger);
	        }
	        .integration-modal__hint {
	            margin-top: 10px;
	        }
	        .integration-modal__split {
	            display: grid;
	            grid-template-columns: minmax(0, 1fr);
	            gap: 10px;
	        }
	        @media (min-width: 960px) {
	            .integration-modal__split {
	                grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	            }
	        }
	        .integration-modal__split-card {
	            padding: 10px 12px;
	            border: 1px solid var(--border);
	            border-radius: 14px;
	            background: var(--surface-muted);
	        }
	        .integration-modal__bullets {
	            margin: 8px 0 0;
	            padding-left: 18px;
	            color: var(--text-muted);
	        }
	        .hubspot-deals__head {
	            display: flex;
	            align-items: flex-start;
	            justify-content: space-between;
	            gap: 12px;
        }
	        .hubspot-deals__sub {
	            margin: 6px 0 0;
	        }
	        .hubspot-deals__form {
	            margin-top: 12px;
	        }
	        .hubspot-deals__title {
	            margin: 0;
	        }
	        .hubspot-deals__actions {
	            margin-top: 14px;
	        }
	        .hubspot-deals__grid {
	            display: grid;
	            grid-template-columns: minmax(0, 1fr);
	            gap: 14px;
            margin-top: 6px;
        }
        @media (min-width: 960px) {
            .hubspot-deals__grid {
                grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
                gap: 16px;
            }
        }


/* Extracted from app/Views/settings/index.php. Dynamic $inlineStyleRules remain inline in the view. */
	    .fire-door-pricing-group {
	        border: 1px solid #e2e8f0;
        border-radius: 16px;
        padding: 12px 16px;
        background: #fff;
    }
    .fire-door-pricing-group summary {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        cursor: pointer;
        list-style: none;
    }
    .fire-door-pricing-group[open] summary {
        margin-bottom: 12px;
    }
    .fire-door-pricing-group__count {
        font-size: 0.85rem;
        color: #64748b;
    }
    .fire-door-pricing-group__toolbar {
        display: flex;
        justify-content: flex-end;
        margin: 4px 0 10px;
        gap: 8px;
    }
    .fire-door-pricing-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 12px;
    }
    .fire-door-pricing-grid__item {
        display: flex;
        flex-direction: column;
        gap: 8px;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        padding: 12px;
        background: #f8fafc;
    }
    .fire-door-pricing-grid__label {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .fire-door-pricing-grid__icon {
        width: 36px;
        height: 36px;
        border-radius: 12px;
        background: #0f172a;
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
    }
    .fire-door-pricing-grid__text {
        display: flex;
        flex-direction: column;
        font-size: 0.85rem;
    }
    .fire-door-pricing-custom-label,
    .fire-door-pricing-custom-meta {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .fire-door-pricing-custom-label input,
    .fire-door-pricing-custom-meta input {
        border: 1px solid #d0d7e5;
        border-radius: 10px;
        padding: 6px 8px;
        font: inherit;
        background: #fff;
        width: 100%;
    }
    .pricing-panel {
        border: 1px solid #e2e8f0;
        border-radius: 18px;
        padding: 18px;
        background: #f8fafc;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .pricing-panel__header h4 {
        margin: 0;
    }
    .pricing-eyebrow {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        margin: 0;
        color: #94a3b8;
    }
    .pricing-steps {
        margin: 0 0 8px 1.2rem;
        color: #0f172a;
    }
    .pricing-table-card {
        border: 1px solid #e2e8f0;
        border-radius: 18px;
        padding: 20px;
        background: #fff;
        box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05);
    }
    .pricing-mobile-list {
        display: none;
    }
    .pricing-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
    }
    .pricing-toolbar > input[type="search"] {
        flex: 1;
        min-width: 220px;
        border: 1px solid #d0d7e5;
        border-radius: 12px;
        padding: 10px 12px;
        font: inherit;
    }
    .pricing-toolbar__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
	    .pricing-table {
	        width: 100%;
	        border-collapse: collapse;
	    }
	    .pricing-table th,
	    .pricing-table td {
	        padding: 10px 12px;
	        text-align: left;
	        border-bottom: 1px solid #e2e8f0;
	        vertical-align: top;
	    }
	    .pricing-table th {
	        font-size: 0.78rem;
	        text-transform: uppercase;
	        letter-spacing: 0.08em;
	        color: #6b7280;
	        background: rgba(248, 250, 252, 0.95);
	        border-bottom-color: rgba(148, 163, 184, 0.32);
	    }
    .pricing-table__actions {
        display: flex;
        gap: 6px;
        justify-content: flex-end;
    }
    .pricing-reason-picker {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 12px;
        border: 1px solid #dbe3f0;
        border-radius: 14px;
        background: #f8fafc;
    }
    .pricing-reason-picker__hint {
        margin: 0;
        font-size: 0.88rem;
        color: #475569;
    }
    .pricing-reason-picker__list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 8px;
    }
    .pricing-reason-option {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 10px 12px;
        border: 1px solid #dbe3f0;
        border-radius: 12px;
        background: #fff;
    }
    .pricing-reason-option input {
        margin-top: 2px;
    }
    .pricing-reason-option span {
        color: #0f172a;
        font-size: 0.92rem;
        line-height: 1.35;
    }
    .pricing-reason-picker__empty {
        margin: 0;
        color: #64748b;
        font-size: 0.88rem;
    }
    @media (max-width: 640px) {
        .pricing-toolbar {
            flex-direction: column;
            align-items: stretch;
        }
        .pricing-toolbar__actions {
            justify-content: flex-start;
            flex-direction: column;
        }
        .pricing-toolbar__actions > * {
            width: 100%;
        }
        .pricing-table__actions {
            flex-direction: column;
            align-items: flex-start;
        }
        .pricing-form__footer {
            flex-direction: column-reverse;
            align-items: stretch;
        }
        .pricing-form__footer .btn {
            width: 100%;
        }
        .pricing-reason-picker__list {
            grid-template-columns: minmax(0, 1fr);
        }
    }
    .profile-panel-intro {
        margin-bottom: 20px;
    }
    .profile-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
        margin-bottom: 10px;
    }
    .profile-card {
        border: 1px solid #dbe3f0;
        border-radius: 18px;
        padding: 20px;
        background: #fff;
        display: flex;
        flex-direction: column;
        gap: 16px;
        box-shadow: 0 14px 24px rgba(15, 23, 42, 0.04);
    }
    .profile-card__header {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .profile-card__label {
        margin: 0;
        font-weight: 600;
    }
    .profile-card__hint {
        margin: 0;
        color: #64748b;
        font-size: 0.9rem;
    }
    .profile-card__tips {
        margin: 0;
        padding-left: 1rem;
        color: #94a3b8;
        font-size: 0.85rem;
    }
    .profile-field {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .profile-field span {
        font-weight: 600;
    }
    .profile-field--upload span {
        font-weight: 600;
    }
    .profile-card__body {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .component-checklist__tips {
        margin: 8px 0 0;
        padding-left: 1rem;
        color: #94a3b8;
    }
    .component-checklist-flow {
        display: grid;
        grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
        gap: 20px;
        margin-top: 20px;
        align-items: flex-start;
    }
    @media (max-width: 1024px) {
        .component-checklist-flow {
            grid-template-columns: 1fr;
        }
        .component-panel--filters {
            position: static;
        }
    }
    .component-panel {
        border: 1px solid #dbe3f0;
        border-radius: 20px;
        padding: 20px;
        background: #fff;
        box-shadow: 0 18px 30px rgba(15, 23, 42, 0.06);
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .component-panel--filters {
        position: sticky;
        top: 16px;
        align-self: flex-start;
    }
    .component-panel__actions {
        margin-top: 12px;
        display: flex;
        justify-content: flex-end;
    }
    .preset-panel-intro {
        margin: 0 0 20px;
    }
    .preset-panel__tips {
        margin: 10px 0 0;
        padding-left: 1rem;
        color: #94a3b8;
    }
    .preset-layout-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 24px;
    }
    .preset-panel {
        border: 1px solid #dbe3f0;
        border-radius: 20px;
        padding: 20px;
        background: #fff;
        box-shadow: 0 18px 30px rgba(15, 23, 42, 0.06);
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    .preset-panel__header {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .preset-panel__footer {
        margin-top: 20px;
        padding: 16px 20px;
        border: 1px dashed #dbe3f0;
        border-radius: 16px;
        display: flex;
        justify-content: space-between;
        gap: 12px;
        align-items: center;
        flex-wrap: wrap;
    }
    .settings-form__actions {
        margin-top: 24px;
        padding: 18px 24px;
        border: 1px solid #dbe3f0;
        border-radius: 20px;
        background: #ffffff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        box-shadow: 0 18px 30px rgba(15, 23, 42, 0.08);
        position: sticky;
        bottom: 0;
        z-index: 2;
        backdrop-filter: blur(8px);
    }
    .settings-form__actions-copy {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .settings-form__actions-copy strong {
        font-size: 1rem;
        color: #0f172a;
    }
    .settings-form__actions-copy p {
        margin: 0;
        color: #475569;
        font-size: 0.9rem;
    }
    .settings-form__actions-buttons {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .settings-modals {
        position: static;
    }
	    .settings-modal {
	        position: fixed;
	        inset: 0;
	        z-index: 2000;
	        background: rgba(15, 23, 42, 0.65);
	        display: flex;
	        justify-content: center;
	        align-items: flex-start;
	        padding: 40px 20px;
	        overflow-y: auto;
	    }
    .settings-modal[hidden] {
        display: none;
    }
    .settings-modal__dialog {
        position: relative;
        width: min(1100px, 100%);
    }

    /* Branding modal: IPI-aligned shell (tokens from inspections_shell when in scope; fallbacks match warm tenant UI). */
    #branding.settings-modal {
        background: rgba(26, 24, 21, 0.52);
        background: color-mix(in srgb, var(--ipi-ink, #1a1815) 52%, transparent);
    }

    #branding .settings-modal__dialog--branding {
        display: flex;
        flex-direction: column;
        width: min(1040px, 100%);
        max-height: min(92vh, 920px);
        background: var(--ipi-bg-card, #ffffff);
        border-radius: 16px;
        border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
        box-shadow: var(--ipi-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04));
        overflow: hidden;
    }

    #branding .settings-modal__body--branding {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        max-height: none;
        overflow: hidden;
        padding: 0;
        pointer-events: auto;
    }

    #branding .branding-modal {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        margin: 0;
        gap: 0;
        background: var(--ipi-bg-card, #ffffff);
    }

    #branding .branding-modal__header {
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 16px;
        padding: 16px 24px 14px;
        border-bottom: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
        background: var(--ipi-bg-card, #ffffff);
    }

    #branding .branding-modal__header-copy {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }

    #branding .branding-modal__header-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }

    #branding .branding-modal__header-copy .eyebrow {
        margin: 0 0 0.35rem 0;
        color: var(--ipi-accent, #c49510);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    #branding .branding-modal__header-copy h3 {
        margin: 0 0 0.35rem 0;
        font-family: var(--font-display, inherit);
        font-size: 1.35rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--ipi-ink, #1a1815);
    }

    #branding .branding-modal__header-copy p {
        margin: 0;
        max-width: 62ch;
        line-height: 1.5;
        color: var(--ipi-ink-3, #6b6458);
    }

    #branding .branding-modal__scroll {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 20px 24px 28px;
        -webkit-overflow-scrolling: touch;
        background: var(--ipi-bg, #f7f5f0);
    }

    #branding .branding-modal__footer {
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
        padding: 16px 24px 20px;
        border-top: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
        background: var(--ipi-bg-card, #ffffff);
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.04);
    }

    #branding .branding-modal__footer-copy {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: min(100%, 280px);
    }

    #branding .branding-modal__footer-copy strong {
        font-size: 1rem;
        color: var(--ipi-ink, #1a1815);
    }

    #branding .branding-modal__footer-copy p {
        margin: 0;
        font-size: 0.9rem;
        color: var(--ipi-ink-3, #6b6458);
    }

    #branding .branding-modal__footer-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

	    .settings-modal__body {
	        pointer-events: auto;
	        max-height: calc(100vh - 120px);
	        overflow-y: auto;
	        padding-top: 32px;
	    }
	    /* ==========================================================================
	       Mobile (≤900px) — every modal opened from the settings page uses the
	       canonical bottom-sheet pattern documented in .claude/rules/css-standards.md.
	       Container slides up from the bottom, dialog has rounded top, capped at
	       92dvh, with safe-area aware padding and 44px touch targets.
	       ========================================================================== */
	    /* --- Body scroll lock applies at every viewport size and for both
	       the settings-modal flow (settings-page.js) and the pricing-modal
	       flow (pricing.js). Both stacks coexist when the user opens a
	       pricing-item dialog from inside pricing-mapping. --- */
	    body.settings-modal-open,
	    body.modal-open {
	        overflow: hidden;
	    }

	    @media (max-width: 900px) {

	        /* --- Mobile-only chrome suppression while a settings modal is open --- */
	        body.settings-modal-open .mobile-nav-trigger,
	        body.settings-modal-open .mobile-nav-overlay,
	        body.settings-modal-open .support-fab,
	        body.modal-open .mobile-nav-trigger,
	        body.modal-open .mobile-nav-overlay,
	        body.modal-open .support-fab {
	            pointer-events: none;
	            opacity: 0;
	        }

	        /* Sheet chrome (container, overlay, dialog sizing, transform, shadow,
	           border-radius) is handled globally by the canonical .modal--sheet
	           rule in style.css. Page-specific rules below only cover body
	           layout and content-specific adjustments. */

	        /* settings-modal body wrapper takes full sheet height */
	        .settings-modal__body {
	            flex: 1 1 auto;
	            min-height: 0;
	            max-height: none;
	            height: auto;
	            overflow: hidden;
	            padding: 0;
	            -webkit-overflow-scrolling: touch;
	        }

	        /* Button & input touch-target minimums (44px) and iOS-zoom font-size
	           are handled globally by the canonical .modal--sheet rule. */

	        .settings-modal :where(input[type="checkbox"], input[type="radio"]) {
	            inline-size: 20px;
	            block-size: 20px;
	            min-inline-size: 20px;
	            min-block-size: 20px;
	            accent-color: var(--brand, #0052cc);
	        }
	        .settings-modal :where(label > input[type="checkbox"], label > input[type="radio"]) {
	            vertical-align: middle;
	            margin-right: 10px;
	        }

	        /* ====================================================================
	           Branding modal
	           ==================================================================== */
	        /* Body wrapper grows naturally, but the DIALOG keeps its
	           bottom-sheet max-height (min(92dvh, 800px) from the generic
	           shell rule). If we let the dialog grow without limit it
	           pushes the header above the viewport when the active tab
	           has lots of content. */
	        #branding .settings-modal__body--branding {
	            max-height: none;
	            height: auto;
	        }
	        #branding .branding-modal__header {
	            padding: 14px 16px 12px;
	        }
	        #branding .branding-modal__scroll {
	            padding: 14px 16px 16px;
	        }
	        #branding .branding-modal__footer {
	            padding: 12px 16px;
	            padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	        }
	        #branding .branding-modal__footer-actions {
	            width: 100%;
	            justify-content: stretch;
	        }
	        #branding .branding-modal__footer-actions .btn {
	            flex: 1 1 auto;
	            justify-content: center;
	        }
	        #branding .branding-tabs__list {
	            flex-wrap: nowrap;
	            overflow-x: auto;
	            -webkit-overflow-scrolling: touch;
	            scrollbar-width: none;
	            -ms-overflow-style: none;
	            scroll-snap-type: x proximity;
	        }
	        #branding .branding-tabs__list::-webkit-scrollbar {
	            display: none;
	        }
	        #branding .branding-tabs__tab {
	            flex: 0 0 auto;
	            scroll-snap-align: start;
	            white-space: nowrap;
	        }
	        #branding .profile-grid--branding-tab:not(.profile-grid--branding-tab--single) {
	            grid-template-columns: minmax(0, 1fr);
	        }

	        /* ====================================================================
	           Components modal
	           ==================================================================== */
	        #components .settings-modal__body--components {
	            max-height: none;
	            height: auto;
	        }
	        #components .components-modal__header {
	            flex-direction: column;
	            align-items: stretch;
	            padding: 14px 16px 12px;
	        }
	        #components .components-modal__header-actions {
	            justify-content: flex-start;
	            flex-wrap: wrap;
	            gap: 8px;
	        }
	        #components .components-modal__scroll {
	            padding: 14px 16px 16px;
	        }
	        #components .components-modal__footer {
	            padding: 12px 16px;
	            padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	        }
	        #components .components-modal__footer-actions {
	            width: 100%;
	            justify-content: stretch;
	        }
	        #components .components-modal__footer-actions .btn {
	            flex: 1 1 auto;
	            justify-content: center;
	        }
	        #components .component-checklist-flow {
	            grid-template-columns: 1fr;
	        }

	        /* ====================================================================
	           Fire-door presets modal
	           ==================================================================== */
	        #fire-door-presets .settings-modal__body--fd-presets {
	            max-height: none;
	            height: auto;
	        }
	        #fire-door-presets .fd-presets-modal__header {
	            flex-direction: column;
	            align-items: stretch;
	            padding: 14px 16px 12px;
	        }
	        #fire-door-presets .fd-presets-modal__header-actions {
	            justify-content: flex-start;
	            flex-wrap: wrap;
	            gap: 8px;
	        }
	        #fire-door-presets .fd-presets-modal__scroll {
	            padding: 14px 16px 16px;
	        }
	        #fire-door-presets .fd-presets-modal__footer {
	            padding: 12px 16px;
	            padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	        }
	        #fire-door-presets .fd-presets-modal__footer-actions {
	            width: 100%;
	            justify-content: stretch;
	        }
	        #fire-door-presets .fd-presets-modal__footer-actions .btn {
	            flex: 1 1 auto;
	            justify-content: center;
	        }

	        /* ====================================================================
	           Pricing defaults modal
	           ==================================================================== */
	        #pricing-defaults .settings-modal__body--pricing-defaults {
	            max-height: none;
	            height: auto;
	        }
	        #pricing-defaults .pricing-defaults-modal__header {
	            flex-direction: column;
	            align-items: stretch;
	            padding: 14px 16px 12px;
	        }
	        #pricing-defaults .pricing-defaults-modal__header-actions {
	            justify-content: flex-start;
	            flex-wrap: wrap;
	            gap: 8px;
	        }
	        #pricing-defaults .pricing-defaults-modal__scroll {
	            padding: 14px 16px 16px;
	        }
	        #pricing-defaults .pricing-defaults-modal__footer {
	            padding: 12px 16px;
	            padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	        }
	        #pricing-defaults .pricing-defaults-modal__footer-actions {
	            width: 100%;
	            justify-content: stretch;
	        }
	        #pricing-defaults .pricing-defaults-modal__footer-actions .btn {
	            flex: 1 1 auto;
	            justify-content: center;
	        }

	        /* ====================================================================
	           Pricing overrides modal
	           ==================================================================== */
	        #pricing-overrides .settings-modal__body--pricing-overrides {
	            max-height: none;
	            height: auto;
	        }
	        #pricing-overrides .pricing-overrides-modal__header {
	            flex-direction: column;
	            align-items: stretch;
	            padding: 14px 16px 12px;
	        }
	        #pricing-overrides .pricing-overrides-modal__header-actions {
	            justify-content: flex-start;
	            flex-wrap: wrap;
	            gap: 8px;
	        }
	        #pricing-overrides .pricing-overrides-modal__scroll {
	            padding: 14px 16px 16px;
	        }
	        #pricing-overrides .pricing-overrides-modal__controls {
	            display: flex;
	            flex-direction: column;
	            align-items: stretch;
	            gap: 10px;
	        }
	        #pricing-overrides .pricing-overrides-modal__bulk {
	            display: grid;
	            grid-template-columns: repeat(2, minmax(0, 1fr));
	            gap: 8px;
	        }
	        #pricing-overrides .pricing-overrides-modal__bulk .btn {
	            width: 100%;
	            justify-content: center;
	        }
	        #pricing-overrides .pricing-overrides-modal__jump-links {
	            display: flex;
	            flex-wrap: nowrap;
	            overflow-x: auto;
	            -webkit-overflow-scrolling: touch;
	            scrollbar-width: none;
	            -ms-overflow-style: none;
	            scroll-snap-type: x proximity;
	            gap: 6px;
	        }
	        #pricing-overrides .pricing-overrides-modal__jump-links::-webkit-scrollbar {
	            display: none;
	        }
	        #pricing-overrides .pricing-overrides-modal__jump-links a {
	            flex: 0 0 auto;
	            scroll-snap-align: start;
	            white-space: nowrap;
	        }
	        #pricing-overrides .fire-door-pricing-grid {
	            grid-template-columns: 1fr;
	        }
	        #pricing-overrides .pricing-overrides-row__price {
	            align-items: flex-end;
	        }
	        #pricing-overrides .fire-door-pricing-grid .input-with-prefix {
	            max-width: 100%;
	        }
	        #pricing-overrides .pricing-overrides-modal__footer {
	            padding: 12px 16px;
	            padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	        }
	        #pricing-overrides .pricing-overrides-modal__footer-actions {
	            width: 100%;
	            justify-content: stretch;
	            flex-direction: column;
	            gap: 8px;
	        }
	        #pricing-overrides .pricing-overrides-modal__footer-actions .btn {
	            width: 100%;
	            justify-content: center;
	        }

	        /* ====================================================================
	           Pricing mapping modal — table → mobile card list
	           ==================================================================== */
	        #pricing-mapping .settings-modal__body--pricing-mapping {
	            max-height: none;
	            height: auto;
	        }
	        #pricing-mapping .pricing-mapping-modal__header {
	            flex-direction: column;
	            align-items: stretch;
	            padding: 14px 16px 12px;
	        }
	        #pricing-mapping .pricing-mapping-modal__header-actions {
	            justify-content: flex-start;
	            flex-wrap: wrap;
	            gap: 8px;
	        }
	        #pricing-mapping .pricing-mapping-modal__scroll {
	            padding: 14px 16px 16px;
	        }
	        #pricing-mapping .pricing-mapping-modal__footer {
	            padding: 12px 16px;
	            padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	            flex-direction: column;
	            align-items: stretch;
	            gap: 10px;
	        }
	        #pricing-mapping .pricing-mapping-modal__footer-actions {
	            width: 100%;
	            display: grid;
	            grid-template-columns: repeat(2, minmax(0, 1fr));
	            gap: 8px;
	        }
	        #pricing-mapping .pricing-mapping-modal__footer-actions .btn {
	            width: 100%;
	            justify-content: center;
	        }
	        #pricing-mapping .pricing-toolbar--mapping {
	            display: flex;
	            flex-direction: column;
	            align-items: stretch;
	            gap: 10px;
	        }
	        #pricing-mapping .pricing-toolbar__search {
	            width: 100%;
	        }
	        #pricing-mapping .pricing-toolbar__search input {
	            width: 100%;
	        }
	        #pricing-mapping .pricing-toolbar__actions {
	            display: grid;
	            grid-template-columns: repeat(2, minmax(0, 1fr));
	            gap: 8px;
	            width: 100%;
	        }
	        #pricing-mapping .pricing-toolbar__actions > * {
	            width: 100%;
	            justify-content: center;
	        }

	        /* Pricing table card-ification: hide desktop table, show mobile list */
	        .pricing-settings-card--wide .settings-card__header {
	            flex-direction: column;
	            align-items: stretch;
	            gap: 12px;
	        }
	        .pricing-settings-card--wide .settings-card__header .btn--compact {
	            display: none;
	        }
	        .pricing-panel,
	        .pricing-table-card {
	            border-radius: 16px;
	            padding: 16px;
	        }
	        .pricing-table-wrapper {
	            display: none;
	        }
	        .pricing-mobile-list {
	            display: flex;
	            flex-direction: column;
	            gap: 12px;
	        }
	        .pricing-mobile-card {
	            border: 1px solid #dbe3f0;
	            border-radius: 16px;
	            padding: 14px;
	            background: #fff;
	            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
	            display: flex;
	            flex-direction: column;
	            gap: 14px;
	        }
	        .pricing-mobile-card__top {
	            display: flex;
	            justify-content: space-between;
	            align-items: flex-start;
	            gap: 12px;
	        }
	        .pricing-mobile-card__label {
	            margin: 0 0 4px;
	            font-size: 0.75rem;
	            text-transform: uppercase;
	            letter-spacing: 0.08em;
	            color: #64748b;
	        }
	        .pricing-mobile-card__section > p:last-child,
	        .pricing-mobile-card__top p:last-child {
	            margin-bottom: 0;
	        }
	        .pricing-mobile-card__meta {
	            display: grid;
	            grid-template-columns: repeat(2, minmax(0, 1fr));
	            gap: 10px 12px;
	            margin: 0;
	        }
	        .pricing-mobile-card__meta div {
	            padding: 10px 12px;
	            border-radius: 12px;
	            background: #f8fafc;
	        }
	        .pricing-mobile-card__meta dt {
	            margin: 0 0 4px;
	            font-size: 0.76rem;
	            text-transform: uppercase;
	            letter-spacing: 0.06em;
	            color: #64748b;
	        }
	        .pricing-mobile-card__meta dd {
	            margin: 0;
	            color: #0f172a;
	            font-weight: 600;
	        }
	        .pricing-mobile-card__actions {
	            display: grid;
	            grid-template-columns: repeat(2, minmax(0, 1fr));
	            gap: 10px;
	        }
	        .pricing-mobile-card__actions .btn {
	            width: 100%;
	            justify-content: center;
	            min-height: 44px;
	        }
	        .pricing-mobile-list__empty {
	            margin: 0;
	            padding: 12px;
	            border: 1px dashed #dbe3f0;
	            border-radius: 14px;
	            background: #f8fafc;
	        }

	        /* ====================================================================
	           Pricing item modal (.modal.modal--pricing-item)
	           ==================================================================== */
	        .modal.modal--pricing-item .pricing-item-modal {
	            max-height: none;
	            display: flex;
	            flex-direction: column;
	            min-height: 0;
	        }
	        .modal.modal--pricing-item .pricing-item-modal__header {
	            flex-direction: column;
	            align-items: stretch;
	            padding: 14px 16px 12px;
	        }
	        .modal.modal--pricing-item .pricing-item-modal__header-actions {
	            justify-content: flex-start;
	            flex-wrap: wrap;
	            gap: 8px;
	        }
	        .modal.modal--pricing-item .pricing-item-modal__scroll {
	            padding: 14px 16px 16px;
	            flex: 1 1 auto;
	            min-height: 0;
	            overflow-y: auto;
	        }
	        .modal.modal--pricing-item .pricing-item-modal__footer {
	            padding: 12px 16px;
	            padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	            flex-direction: column;
	            align-items: stretch;
	            gap: 10px;
	        }
	        .modal.modal--pricing-item .pricing-item-modal__footer-actions {
	            width: 100%;
	            justify-content: stretch;
	            display: flex;
	            flex-direction: column;
	            gap: 8px;
	        }
	        .modal.modal--pricing-item .pricing-item-modal__footer-actions .btn {
	            width: 100%;
	            justify-content: center;
	        }
	        .modal.modal--pricing-item .pricing-item-modal__grid--meta {
	            grid-template-columns: 1fr;
	        }
	        .modal.modal--pricing-item .pricing-reason-add {
	            flex-direction: column;
	            align-items: stretch;
	        }
	        .modal.modal--pricing-item .pricing-reason-add input,
	        .modal.modal--pricing-item .pricing-reason-add .btn {
	            width: 100%;
	        }

	        /* ====================================================================
	           Pricing delete & pricing presets modals (small sheets)
	           ==================================================================== */
	        .modal[data-pricing-delete-modal] .modal__dialog,
	        .modal[data-pricing-presets-modal] .modal__dialog {
	            max-height: min(72dvh, 600px);
	        }
	        .modal[data-pricing-delete-modal] .modal__header,
	        .modal[data-pricing-presets-modal] .modal__header {
	            padding: 14px 16px 12px;
	        }
	        .modal[data-pricing-delete-modal] .modal__body,
	        .modal[data-pricing-presets-modal] .modal__body {
	            padding: 14px 16px 16px;
	            flex: 1 1 auto;
	            min-height: 0;
	            overflow-y: auto;
	        }
	        /* Pricing-delete and pricing-presets modals have no .modal__footer —
	           the action buttons live inside the body, in .modal-form-actions
	           and .pricing-form__footer respectively. Style those directly. */
	        .modal[data-pricing-delete-modal] .modal-form-actions,
	        .modal[data-pricing-presets-modal] .pricing-form__footer {
	            display: flex;
	            flex-direction: column;
	            gap: 8px;
	            padding-top: 4px;
	            padding-bottom: calc(env(safe-area-inset-bottom, 0px));
	        }
	        .modal[data-pricing-delete-modal] .modal-form-actions .btn,
	        .modal[data-pricing-presets-modal] .pricing-form__footer .btn {
	            width: 100%;
	            justify-content: center;
	        }

	        /* ====================================================================
	           Email templates modal — folded in from the old 768px block
	           ==================================================================== */
	        #email-templates .settings-modal__body--email-templates {
	            max-height: none;
	            height: auto;
	        }
	        #email-templates .email-templates-modal__header {
	            padding: 14px 16px 12px;
	            flex-direction: column;
	            align-items: stretch;
	        }
	        #email-templates .email-templates-modal__scroll {
	            padding: 14px 16px 16px;
	        }
	        #email-templates .email-templates-modal__footer {
	            padding: 12px 16px;
	            padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	        }
	        #email-templates .email-templates-modal__footer-actions {
	            width: 100%;
	            justify-content: stretch;
	            flex-direction: column;
	            gap: 8px;
	        }
	        #email-templates .email-templates-modal__footer-actions .btn {
	            width: 100%;
	            justify-content: center;
	        }
	        .email-templates-card {
	            gap: 14px;
	        }
	        .email-templates-header-actions {
	            justify-content: flex-start;
	            flex-direction: column;
	            align-items: stretch;
	            gap: 8px;
	        }
	        .email-templates-mode {
	            width: 100%;
	        }
	        .email-templates-mode__btn {
	            flex: 1 1 50%;
	            text-align: center;
	        }
	        .email-templates-layout {
	            grid-template-columns: minmax(0, 1fr);
	            gap: 12px;
	        }
	        .email-templates-stack {
	            grid-template-columns: 1fr;
	        }
	        .email-templates-editor__bodies {
	            grid-template-columns: 1fr;
	        }
	        .email-templates-mobile-bar {
	            display: flex;
	            flex-direction: column;
	            align-items: flex-start;
	            gap: 10px;
	            padding: 12px;
	            border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
	            border-radius: 14px;
	            background: var(--ipi-bg-inset, #edeae3);
	        }
	        .email-templates-mobile-bar__copy {
	            display: flex;
	            flex-direction: column;
	            gap: 4px;
	        }
	        .email-templates-mobile-bar__copy strong {
	            color: var(--ipi-ink, #1a1815);
	        }
	        .email-templates-filters {
	            grid-template-columns: 1fr;
	            gap: 8px;
	        }
	        .email-template-row {
	            padding: 14px 12px;
	        }
	        .email-template-row__toggle {
	            align-self: center;
	        }
	        .email-templates-editor__actions {
	            flex-direction: column;
	        }
	        .email-templates-editor__actions .btn {
	            width: 100%;
	            justify-content: center;
	        }
	        .email-templates-preview__controls > div {
	            display: flex;
	            flex-direction: column;
	            align-items: flex-start;
	            gap: 10px;
	            width: 100%;
	        }
	        .email-templates-preview__controls select {
	            width: 100%;
	        }
	        .email-templates-preview__tabs {
	            flex-wrap: wrap;
	        }
	        .email-templates-preview__iframe {
	            min-height: 240px;
	        }
	        .email-templates-list__items,
	        .email-templates-placeholders__list {
	            max-height: none;
	            overflow: visible;
	        }
	        [data-email-templates-root][data-email-mobile-view="list"] .email-templates-editor,
	        [data-email-templates-root][data-email-mobile-view="list"] .email-templates-placeholders {
	            display: none;
	        }
	        [data-email-templates-root][data-email-mobile-view="editor"] .email-templates-list {
	            display: none;
	        }
	        [data-email-templates-root][data-email-mobile-view="editor"] .email-templates-placeholders {
	            display: none;
	        }

	        /* ====================================================================
	           Compact headers and footers — match the canonical bottom-sheet
	           feel of .qbm-modal / [data-analytics-email-modal]. Hide cosmetic
	           copy that has no functional value at phone-sized viewports so the
	           body of the modal gets back the vertical space.
	           ==================================================================== */

	        /* (A) H3 title — drop from 1.35rem to 1.1rem */
	        #email-templates .email-templates-modal__header-copy h3,
	        #branding .branding-modal__header-copy h3,
	        #components .components-modal__header-copy h3,
	        #fire-door-presets .fd-presets-modal__header-copy h3,
	        #pricing-defaults .pricing-defaults-modal__header-copy h3,
	        #pricing-overrides .pricing-overrides-modal__header-copy h3,
	        #pricing-mapping .pricing-mapping-modal__header-copy h3,
	        .modal.modal--pricing-item .pricing-item-modal__header-copy h3,
	        .modal[data-pricing-delete-modal] .modal__title,
	        .modal[data-pricing-presets-modal] .modal__title {
	            font-size: 1.1rem;
	            line-height: 1.25;
	            margin: 0;
	        }

	        /* (B) Eyebrow paragraph — hide on mobile */
	        #email-templates .email-templates-modal__header-copy .eyebrow,
	        #branding .branding-modal__header-copy .eyebrow,
	        #components .components-modal__header-copy .eyebrow,
	        #fire-door-presets .fd-presets-modal__header-copy .eyebrow,
	        #pricing-defaults .pricing-defaults-modal__header-copy .eyebrow,
	        #pricing-overrides .pricing-overrides-modal__header-copy .eyebrow,
	        #pricing-mapping .pricing-mapping-modal__header-copy .eyebrow,
	        .modal.modal--pricing-item .pricing-item-modal__header-copy .eyebrow,
	        .modal[data-pricing-delete-modal] .modal__header .eyebrow,
	        .modal[data-pricing-presets-modal] .modal__header .eyebrow {
	            display: none;
	        }

	        /* (C) Header description paragraph — hide on mobile */
	        #email-templates .email-templates-modal__header-copy .text-muted,
	        #branding .branding-modal__header-copy p,
	        #components .components-modal__header-copy .text-muted,
	        #fire-door-presets .fd-presets-modal__header-copy .text-muted,
	        #pricing-defaults .pricing-defaults-modal__header-copy .text-muted,
	        #pricing-overrides .pricing-overrides-modal__header-copy .text-muted,
	        #pricing-mapping .pricing-mapping-modal__header-copy .text-muted,
	        .modal.modal--pricing-item .pricing-item-modal__subtitle,
	        .modal[data-pricing-delete-modal] .modal__header .text-muted,
	        .modal[data-pricing-presets-modal] .modal__header .text-muted {
	            display: none;
	        }

	        /* (D) Components modal — hide the bulleted tips list */
	        #components .component-checklist__tips {
	            display: none;
	        }

	        /* (E) Hide redundant header text "Close" button — footer Cancel still closes */
	        #branding .branding-modal__header-actions > .btn[data-modal-close],
	        #components .components-modal__header-actions > .btn[data-modal-close],
	        #fire-door-presets .fd-presets-modal__header-actions > .btn[data-modal-close],
	        #pricing-defaults .pricing-defaults-modal__header-actions > .btn[data-modal-close],
	        #pricing-overrides .pricing-overrides-modal__header-actions > .btn[data-modal-close],
	        #pricing-mapping .pricing-mapping-modal__header-actions > .btn[data-modal-close],
	        #email-templates .email-templates-header-actions > .btn[data-modal-close],
	        .modal.modal--pricing-item .pricing-item-modal__header-actions > .btn[data-modal-close] {
	            display: none;
	        }

	        /* (F) Footer copy + note — hide entirely on mobile */
	        #email-templates .email-templates-modal__footer-copy,
	        #branding .branding-modal__footer-copy,
	        #components .components-modal__footer-copy,
	        #fire-door-presets .fd-presets-modal__footer-copy,
	        #pricing-defaults .pricing-defaults-modal__footer-copy,
	        #pricing-overrides .pricing-overrides-modal__footer-note,
	        #pricing-mapping .pricing-mapping-modal__footer-note,
	        .modal.modal--pricing-item .pricing-item-modal__footer-note {
	            display: none;
	        }

	        /* (G) Tighten header + footer padding */
	        #email-templates .email-templates-modal__header,
	        #branding .branding-modal__header,
	        #components .components-modal__header,
	        #fire-door-presets .fd-presets-modal__header,
	        #pricing-defaults .pricing-defaults-modal__header,
	        #pricing-overrides .pricing-overrides-modal__header,
	        #pricing-mapping .pricing-mapping-modal__header,
	        .modal.modal--pricing-item .pricing-item-modal__header,
	        .modal[data-pricing-delete-modal] .modal__header,
	        .modal[data-pricing-presets-modal] .modal__header {
	            padding: 12px 16px 10px;
	        }

	        #email-templates .email-templates-modal__footer,
	        #branding .branding-modal__footer,
	        #components .components-modal__footer,
	        #fire-door-presets .fd-presets-modal__footer,
	        #pricing-defaults .pricing-defaults-modal__footer,
	        #pricing-overrides .pricing-overrides-modal__footer,
	        #pricing-mapping .pricing-mapping-modal__footer,
	        .modal.modal--pricing-item .pricing-item-modal__footer,
	        .modal[data-pricing-delete-modal] .modal__footer,
	        .modal[data-pricing-presets-modal] .modal__footer {
	            padding: 10px 16px;
	            padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	        }

	        /* (H) Header-copy gap collapse — only h3 remains */
	        #email-templates .email-templates-modal__header-copy,
	        #branding .branding-modal__header-copy,
	        #components .components-modal__header-copy,
	        #fire-door-presets .fd-presets-modal__header-copy,
	        #pricing-defaults .pricing-defaults-modal__header-copy,
	        #pricing-overrides .pricing-overrides-modal__header-copy,
	        #pricing-mapping .pricing-mapping-modal__header-copy,
	        .modal.modal--pricing-item .pricing-item-modal__header-copy {
	            gap: 0;
	        }

	        /* (I) Body wrapper — kill the 36px top padding from desktop CSS that
	           creates dead space above the modal form on mobile. Affects every
	           settings modal, not just branding. */
	        #email-templates .settings-modal__body--email-templates,
	        #branding .settings-modal__body--branding,
	        #components .settings-modal__body--components,
	        #fire-door-presets .settings-modal__body--fd-presets,
	        #pricing-defaults .settings-modal__body--pricing-defaults,
	        #pricing-overrides .settings-modal__body--pricing-overrides,
	        #pricing-mapping .settings-modal__body--pricing-mapping {
	            padding: 0;
	            padding-top: 0;
	        }

	    }
    #branding .branding-tabs {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    #branding .branding-tabs__list {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        padding: 5px;
        border-radius: 12px;
        background: var(--ipi-bg-card, #ffffff);
        border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
        box-shadow: var(--ipi-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04));
    }
    #branding .branding-tabs__tab {
        border: 0;
        background: transparent;
        color: var(--ipi-ink-3, #6b6458);
        font-weight: 600;
        font-size: 0.8rem;
        padding: 8px 12px;
        border-radius: 8px;
        cursor: pointer;
        line-height: 1.25;
    }
    #branding .branding-tabs__tab:hover {
        color: var(--ipi-ink, #1a1815);
        background: var(--ipi-bg-hover, #f2efe9);
    }
    #branding .branding-tabs__tab.is-active,
    #branding .branding-tabs__tab[aria-selected='true'] {
        color: var(--ipi-ink, #1a1815);
        background: var(--ipi-accent-bg, rgba(196, 149, 16, 0.08));
        box-shadow: inset 0 0 0 1px var(--ipi-accent-border, rgba(196, 149, 16, 0.2));
    }
    #branding .branding-tabs__panel {
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-width: 0;
    }
    #branding .branding-tabs__panel[hidden] {
        display: none !important;
    }
    #branding .branding-tabs__hint {
        margin: 0;
        font-size: 0.88rem;
        line-height: 1.45;
        color: var(--ipi-ink-3, #6b6458);
    }
    #branding .branding-tabs__panel--centered {
        align-items: center;
    }
    #branding .branding-tabs__panel--centered .branding-tabs__hint {
        text-align: center;
        max-width: 42rem;
        width: 100%;
    }
    #branding .branding-tabs__panel--centered .profile-grid--branding-tab--single {
        width: min(100%, 720px);
        margin-inline: auto;
    }
    #branding .profile-card {
        border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
        border-radius: 14px;
        background: var(--ipi-card, #ffffff);
        box-shadow: var(--ipi-shadow-card, 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.05));
    }
    #branding .profile-card__hint {
        color: var(--ipi-ink-3, #6b6458);
    }
    #branding .profile-card__label {
        color: var(--ipi-ink, #1a1815);
    }
    #branding .profile-card__tips {
        color: var(--ipi-ink-4, #9a9188);
    }
    #branding .profile-grid--branding-tab {
        margin-bottom: 0;
        gap: 16px;
    }
    #branding .profile-grid--branding-tab:not(.profile-grid--branding-tab--single) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* (branding profile-grid mobile rule consolidated into the @900px block above) */
    #branding .profile-grid--branding-tab--single {
        grid-template-columns: minmax(0, 1fr);
        max-width: 720px;
    }

    /* ==========================================================================
       Branding modal — mobile content overrides.
       PLACED AFTER all the desktop branding rules so this block wins the
       cascade (CSS source order beats @media wrapping when specificity is
       equal). Earlier @media blocks for these selectors get overridden by
       the desktop rules above; this block is the source-order-last say.
       ========================================================================== */
    @media (max-width: 900px) {
        /* Force the profile grid to a single column inside the branding tabs */
        #branding .profile-grid,
        #branding .profile-grid--branding-tab,
        #branding .profile-grid--branding-tab:not(.profile-grid--branding-tab--single),
        #branding .profile-grid--branding-tab--single,
        #branding .branding-tabs__panel--centered .profile-grid--branding-tab--single {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 12px;
            max-width: 100%;
            width: 100%;
            margin: 0;
            margin-inline: 0;
        }

        /* Flatten profile cards on mobile — no border, no padding, no shadow.
           This makes branding render as a direct form list (matching the
           other settings modals like email-templates / pricing-defaults
           which don't wrap form sections in nested visual cards). */
        #branding .profile-card {
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 0;
            margin: 0;
            border: none;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
        }

        /* Add a subtle separator between sibling profile cards (not the first) */
        #branding .profile-card + .profile-card {
            margin-top: 6px;
            padding-top: 14px;
            border-top: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.08));
        }

        #branding .profile-card__header {
            display: flex;
            flex-direction: column;
            gap: 2px;
            margin: 0;
            padding: 0;
        }

        /* Section label acts as a flat heading, like other modals' section titles */
        #branding .profile-card__label {
            margin: 0;
            font-size: 0.95rem;
            font-weight: 700;
            line-height: 1.3;
            color: var(--ipi-ink, #1a1815);
        }

        #branding .profile-card__hint {
            margin: 0;
            font-size: 0.8rem;
            line-height: 1.45;
            color: var(--ipi-ink-3, #6b6458);
        }

        /* Hide the bullet tips list — not useful at 375px, takes too much room */
        #branding .profile-card__tips {
            display: none;
        }

        #branding .profile-card__body {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin: 0;
        }

        /* Form fields fill the card width with comfortable touch targets */
        #branding .profile-field {
            display: flex;
            flex-direction: column;
            gap: 4px;
            width: 100%;
            margin: 0;
        }

        #branding .profile-field span {
            font-size: 0.78rem;
            font-weight: 600;
            color: var(--ipi-ink-3, #6b6458);
        }

        #branding .profile-field input[type="text"],
        #branding .profile-field input[type="email"],
        #branding .profile-field input[type="tel"],
        #branding .profile-field input[type="number"],
        #branding .profile-field input[type="password"],
        #branding .profile-field input[type="url"],
        #branding .profile-field input[type="file"],
        #branding .profile-field select,
        #branding .profile-field textarea {
            width: 100%;
            min-height: 44px;
            font-size: 16px; /* prevent iOS zoom-on-focus */
            box-sizing: border-box;
        }

        #branding .profile-field textarea {
            min-height: 80px;
            font-family: inherit;
            resize: vertical;
        }

        /* Logo preview — compact, doesn't dominate the card */
        #branding .brand-logo-preview {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            padding: 10px;
            border: 1px dashed var(--ipi-rule, rgba(0, 0, 0, 0.12));
            border-radius: 10px;
            background: var(--ipi-bg, #f7f5f0);
        }

        #branding .brand-logo-preview img {
            max-width: 100%;
            height: auto;
            max-height: 80px;
            display: block;
        }

        #branding .brand-logo-preview small {
            text-align: center;
        }

        /* Settings upload row — file input + hint */
        #branding .settings-upload {
            display: flex;
            flex-direction: column;
            gap: 6px;
            width: 100%;
        }

        #branding .settings-upload input[type="file"] {
            width: 100%;
        }

        /* Branding tabs strip — single row, horizontally scrollable */
        #branding .branding-tabs {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        /* Branding has 4 tabs — they overflow when forced onto a single
           horizontal row at phone widths. Wrap to a 2x2 grid instead so
           every tab is visible without scrolling. */
        #branding .branding-tabs__list {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 4px;
            padding: 4px;
            overflow: visible;
        }

        #branding .branding-tabs__tab {
            white-space: normal;
            text-align: center;
            padding: 10px 12px;
            font-size: 0.82rem;
            min-height: 40px;
            line-height: 1.2;
        }

        #branding .branding-tabs__hint {
            font-size: 0.82rem;
            line-height: 1.4;
        }

        #branding .branding-tabs__panel--centered {
            align-items: stretch;
        }
    }

    /* ==========================================================================
       Email-templates filters — collapsible <details> wrapper.
       Desktop: summary hidden, filters always visible (matches old behaviour).
       Mobile: summary shown as a toggle button, filters hidden when collapsed.
       Placed here so it's source-order-last and wins the cascade.
       ========================================================================== */
    .email-templates-filters-details {
        display: block;
        margin: 0;
    }

    .email-templates-filters-details > summary.email-templates-filters-summary {
        display: none;
    }

    /* Force the filters grid visible on desktop regardless of [open] state */
    .email-templates-filters-details > .email-templates-filters {
        display: grid;
    }

    @media (max-width: 900px) {
        /* Email-templates: Basic/Advanced toggle becomes a 2-col tab grid
           matching the branding tabs pattern */
        #email-templates .email-templates-mode {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            width: 100%;
            border-radius: 10px;
            border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
            background: var(--ipi-bg-card, #ffffff);
            overflow: hidden;
            gap: 0;
        }

        #email-templates .email-templates-mode__btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            min-height: 40px;
            padding: 10px 12px;
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--ipi-ink-3, #6b6458);
            background: transparent;
            border: 0;
            line-height: 1.2;
            text-align: center;
        }

        #email-templates .email-templates-mode__btn + .email-templates-mode__btn {
            border-left: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
        }

        #email-templates .email-templates-mode__btn.is-active {
            background: var(--ipi-accent-bg, rgba(196, 149, 16, 0.08));
            color: var(--ipi-ink, #1a1815);
            box-shadow: inset 0 0 0 2px var(--ipi-accent-border, rgba(196, 149, 16, 0.32));
        }

        /* Reveal the collapsible <details> summary as a tappable toggle */
        .email-templates-filters-details {
            border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
            border-radius: 10px;
            background: var(--ipi-bg-card, #ffffff);
            overflow: hidden;
            margin: 8px 0;
        }

        .email-templates-filters-details > summary.email-templates-filters-summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 10px 14px;
            min-height: 44px;
            cursor: pointer;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--ipi-ink, #1a1815);
            list-style: none;
            user-select: none;
        }

        .email-templates-filters-details > summary.email-templates-filters-summary::-webkit-details-marker {
            display: none;
        }

        .email-templates-filters-details > summary.email-templates-filters-summary::marker {
            display: none;
            content: '';
        }

        .email-templates-filters-summary__chevron {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.18s ease;
            color: var(--ipi-ink-3, #6b6458);
        }

        .email-templates-filters-details[open] > summary .email-templates-filters-summary__chevron {
            transform: rotate(180deg);
        }

        /* When closed, hide the filters grid */
        .email-templates-filters-details:not([open]) > .email-templates-filters {
            display: none;
        }

        /* When open, show as a single-column stack inside the disclosed panel */
        .email-templates-filters-details[open] > .email-templates-filters {
            display: grid;
            grid-template-columns: 1fr;
            gap: 8px;
            padding: 0 14px 14px;
            border: none;
            background: transparent;
        }
    }

    /* Dark mode mobile email-templates overrides (source-order-last) */
    @media (max-width: 900px) {
        html[data-theme="dark"] .email-templates-filters-details {
            background: rgba(15, 23, 42, 0.65);
            border-color: rgba(148, 163, 184, 0.22);
        }
        html[data-theme="dark"] .email-templates-filters-details > summary.email-templates-filters-summary {
            color: rgba(226, 232, 240, 0.96);
        }
        html[data-theme="dark"] .email-templates-filters-summary__chevron {
            color: rgba(148, 163, 184, 0.86);
        }
        html[data-theme="dark"] #email-templates .email-templates-mode {
            background: rgba(15, 23, 42, 0.65);
            border-color: rgba(148, 163, 184, 0.22);
        }
        html[data-theme="dark"] #email-templates .email-templates-mode__btn {
            color: rgba(148, 163, 184, 0.86);
        }
        html[data-theme="dark"] #email-templates .email-templates-mode__btn + .email-templates-mode__btn {
            border-left-color: rgba(148, 163, 184, 0.22);
        }
        html[data-theme="dark"] #email-templates .email-templates-mode__btn.is-active {
            background: rgba(212, 176, 60, 0.16);
            color: rgba(248, 250, 252, 0.96);
            box-shadow: inset 0 0 0 2px rgba(212, 176, 60, 0.4);
        }
    }

    /* Dark mode mobile branding overrides (source-order-last).
       Profile cards are flattened on mobile so no card-background needed. */
    @media (max-width: 900px) {
        html[data-theme="dark"] #branding .profile-card {
            background: transparent;
            border: none;
            box-shadow: none;
        }

        html[data-theme="dark"] #branding .profile-card + .profile-card {
            border-top-color: rgba(148, 163, 184, 0.18);
        }

        html[data-theme="dark"] #branding .profile-card__label {
            color: rgba(226, 232, 240, 0.96);
        }

        html[data-theme="dark"] #branding .profile-card__hint {
            color: rgba(148, 163, 184, 0.86);
        }

        html[data-theme="dark"] #branding .brand-logo-preview {
            background: rgba(2, 6, 23, 0.55);
            border-color: rgba(148, 163, 184, 0.28);
        }

        html[data-theme="dark"] #branding .profile-field span {
            color: rgba(148, 163, 184, 0.92);
        }

        html[data-theme="dark"] #branding .profile-field input,
        html[data-theme="dark"] #branding .profile-field select,
        html[data-theme="dark"] #branding .profile-field textarea {
            background: rgba(2, 6, 23, 0.6);
            border-color: rgba(71, 85, 105, 0.58);
            color: rgba(226, 232, 240, 0.96);
        }
    }

    .clipboard-fallback-textarea {
        position: fixed;
        left: -9999px;
        top: 0;
        opacity: 0;
        pointer-events: none;
    }
    .preset-settings-card {
        margin-top: 24px;
    }
    .preset-columns {
        display: grid;
        gap: 20px;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
    .preset-column__header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
    }
    .preset-list {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    .preset-form-card {
        border: 1px solid #dbe3f0;
        border-radius: 14px;
        padding: 16px;
        background: #f8fbff;
        display: flex;
        flex-direction: column;
        gap: 12px;
        position: relative;
    }
    .preset-form-card__head {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 12px;
    }
    .preset-form-card__title {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .preset-form-card__summary {
        margin: 0;
        font-size: 0.85rem;
        color: #475569;
    }
    .preset-form-card__category {
        font-weight: 600;
        color: #0f172a;
    }
    .preset-form-card__controls {
        display: flex;
        justify-content: flex-end;
        gap: 6px;
        align-items: flex-start;
    }
    .preset-form-card__toggle {
        border: 1px solid #cbd5f5;
        background: #fff;
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 0.8rem;
        cursor: pointer;
    }
    .preset-form-card__remove {
        position: absolute;
        top: 8px;
        right: 8px;
        border: none;
        background: transparent;
        color: #9ca3af;
        font-size: 1.1rem;
        cursor: pointer;
    }
    .preset-form-card__remove span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }
    .preset-form-card--template {
        display: none;
    }
    .preset-form-card__body[hidden] {
        display: none;
    }
    .preset-form-card input,
    .preset-form-card select {
        width: 100%;
        border: 1px solid #d0d7e5;
        border-radius: 8px;
        padding: 6px 10px;
    }
    .preset-config-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 12px;
    }
    .preset-config-grid label span {
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #475569;
        display: block;
        margin-bottom: 4px;
    }
    .settings-stripe-id {
        cursor: pointer;
        text-decoration: underline dotted;
    }
    .settings-copy-hint {
        margin-left: 6px;
        font-size: 0.75rem;
        color: #22c55e;
    }
	    .settings-modal__dialog--wide {
	        max-width: 1240px;
	    }

    /* Email templates modal: IPI shell (header / scroll / footer) + wide dialog */
    #email-templates.settings-modal {
        background: rgba(26, 24, 21, 0.52);
        background: color-mix(in srgb, var(--ipi-ink, #1a1815) 52%, transparent);
    }
    #email-templates .settings-modal__dialog--email-templates {
        display: flex;
        flex-direction: column;
        width: min(1240px, 100%);
        max-height: min(92vh, 960px);
        background: var(--ipi-bg-card, #ffffff);
        border-radius: 16px;
        border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
        box-shadow: var(--ipi-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04));
        overflow: hidden;
    }
    #email-templates .settings-modal__body--email-templates {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        max-height: none;
        overflow: hidden;
        padding: 0;
        padding-top: 36px;
        pointer-events: auto;
    }
    #email-templates .email-templates-modal {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        margin: 0;
        gap: 0;
        background: var(--ipi-bg-card, #ffffff);
        border: 0;
        box-shadow: none;
        padding: 0;
    }
    #email-templates .email-templates-modal__header {
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 16px;
        padding: 8px 24px 16px;
        border-bottom: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
        background: var(--ipi-bg-card, #ffffff);
    }
    #email-templates .email-templates-modal__header-copy .eyebrow {
        margin: 0 0 0.35rem 0;
        color: var(--ipi-accent, #c49510);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }
    #email-templates .email-templates-modal__header-copy h3 {
        margin: 0 0 0.35rem 0;
        font-family: var(--font-display, inherit);
        font-size: 1.35rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--ipi-ink, #1a1815);
    }
    #email-templates .email-templates-modal__header-copy .text-muted {
        margin: 0;
        max-width: 62ch;
        line-height: 1.5;
        color: var(--ipi-ink-3, #6b6458);
    }
    #email-templates .email-templates-modal__scroll {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 20px 24px 20px;
        -webkit-overflow-scrolling: touch;
        background: var(--ipi-bg, #f7f5f0);
    }
    #email-templates .email-templates-modal__footer {
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
        padding: 14px 24px 18px;
        border-top: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
        background: var(--ipi-bg-card, #ffffff);
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.04);
    }
    #email-templates .email-templates-modal__footer-copy strong {
        font-size: 1rem;
        color: var(--ipi-ink, #1a1815);
    }
    #email-templates .email-templates-modal__footer-copy p {
        margin: 0;
        font-size: 0.9rem;
        color: var(--ipi-ink-3, #6b6458);
    }
    #email-templates .email-templates-modal__footer-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    /* Inspection components modal */
    #components.settings-modal {
        background: rgba(26, 24, 21, 0.52);
        background: color-mix(in srgb, var(--ipi-ink, #1a1815) 52%, transparent);
    }
    #components .settings-modal__dialog--components {
        display: flex;
        flex-direction: column;
        width: min(1100px, 100%);
        max-height: min(92vh, 920px);
        background: var(--ipi-bg-card, #ffffff);
        border-radius: 16px;
        border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
        box-shadow: var(--ipi-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04));
        overflow: hidden;
    }
    #components .settings-modal__body--components {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        max-height: none;
        overflow: hidden;
        padding: 0;
        padding-top: 36px;
        pointer-events: auto;
    }
    #components .components-modal {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        margin: 0;
        gap: 0;
        background: var(--ipi-bg-card, #ffffff);
        border: 0;
        box-shadow: none;
        padding: 0;
    }
    #components .components-modal__header {
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 16px;
        padding: 8px 24px 16px;
        border-bottom: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
        background: var(--ipi-bg-card, #ffffff);
    }
    #components .components-modal__header-copy .eyebrow {
        margin: 0 0 0.35rem 0;
        color: var(--ipi-accent, #c49510);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }
    #components .components-modal__header-copy h3 {
        margin: 0 0 0.35rem 0;
        font-family: var(--font-display, inherit);
        font-size: 1.35rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--ipi-ink, #1a1815);
    }
    #components .components-modal__header-copy .text-muted {
        margin: 0;
        max-width: 62ch;
        line-height: 1.5;
        color: var(--ipi-ink-3, #6b6458);
    }
    #components .components-modal__header-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
    }
    #components .components-modal__scroll {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 20px 24px 20px;
        -webkit-overflow-scrolling: touch;
        background: var(--ipi-bg, #f7f5f0);
    }
    #components .components-modal__scroll .component-checklist-flow {
        margin-top: 0;
    }
    #components .components-modal__footer {
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
        padding: 14px 24px 18px;
        border-top: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
        background: var(--ipi-bg-card, #ffffff);
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.04);
    }
    #components .components-modal__footer-copy strong {
        font-size: 1rem;
        color: var(--ipi-ink, #1a1815);
    }
    #components .components-modal__footer-copy p {
        margin: 0;
        font-size: 0.9rem;
        color: var(--ipi-ink-3, #6b6458);
    }
    #components .components-modal__footer-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    /* Fire door presets modal */
    #fire-door-presets.settings-modal {
        background: rgba(26, 24, 21, 0.52);
        background: color-mix(in srgb, var(--ipi-ink, #1a1815) 52%, transparent);
    }
    #fire-door-presets .settings-modal__dialog--fd-presets {
        display: flex;
        flex-direction: column;
        width: min(1100px, 100%);
        max-height: min(92vh, 920px);
        background: var(--ipi-bg-card, #ffffff);
        border-radius: 16px;
        border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
        box-shadow: var(--ipi-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04));
        overflow: hidden;
    }
    #fire-door-presets .settings-modal__body--fd-presets {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        max-height: none;
        overflow: hidden;
        padding: 0;
        padding-top: 36px;
        pointer-events: auto;
    }
    #fire-door-presets .fd-presets-modal {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        margin: 0;
        gap: 0;
        background: var(--ipi-bg-card, #ffffff);
        border: 0;
        box-shadow: none;
        padding: 0;
    }
    #fire-door-presets .fd-presets-modal__header {
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 16px;
        padding: 8px 24px 16px;
        border-bottom: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
        background: var(--ipi-bg-card, #ffffff);
    }
    #fire-door-presets .fd-presets-modal__header-copy .eyebrow {
        margin: 0 0 0.35rem 0;
        color: var(--ipi-accent, #c49510);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }
    #fire-door-presets .fd-presets-modal__header-copy h3 {
        margin: 0 0 0.35rem 0;
        font-family: var(--font-display, inherit);
        font-size: 1.35rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--ipi-ink, #1a1815);
    }
    #fire-door-presets .fd-presets-modal__header-copy .text-muted {
        margin: 0;
        max-width: 62ch;
        line-height: 1.5;
        color: var(--ipi-ink-3, #6b6458);
    }
    #fire-door-presets .fd-presets-modal__header-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
    }
    #fire-door-presets .fd-presets-modal__scroll {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 20px 24px 20px;
        -webkit-overflow-scrolling: touch;
        background: var(--ipi-bg, #f7f5f0);
    }
    #fire-door-presets .fd-presets-modal__scroll .preset-settings-card {
        margin-top: 0;
    }
    #fire-door-presets .fd-presets-modal__footer {
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
        padding: 14px 24px 18px;
        border-top: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
        background: var(--ipi-bg-card, #ffffff);
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.04);
    }
    #fire-door-presets .fd-presets-modal__footer-copy strong {
        font-size: 1rem;
        color: var(--ipi-ink, #1a1815);
    }
    #fire-door-presets .fd-presets-modal__footer-copy p {
        margin: 0;
        font-size: 0.9rem;
        color: var(--ipi-ink-3, #6b6458);
    }
    #fire-door-presets .fd-presets-modal__footer-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    /* Inspection pricing defaults modal */
    #pricing-defaults.settings-modal {
        background: rgba(26, 24, 21, 0.52);
        background: color-mix(in srgb, var(--ipi-ink, #1a1815) 52%, transparent);
    }
    #pricing-defaults .settings-modal__dialog--pricing-defaults {
        display: flex;
        flex-direction: column;
        width: min(1100px, 100%);
        max-height: min(92vh, 920px);
        background: var(--ipi-bg-card, #ffffff);
        border-radius: 16px;
        border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
        box-shadow: var(--ipi-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04));
        overflow: hidden;
    }
    #pricing-defaults .settings-modal__body--pricing-defaults {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        max-height: none;
        overflow: hidden;
        padding: 0;
        padding-top: 36px;
        pointer-events: auto;
    }
    #pricing-defaults .pricing-defaults-modal {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        margin: 0;
        gap: 0;
        background: var(--ipi-bg-card, #ffffff);
        border: 0;
        box-shadow: none;
        padding: 0;
    }
    #pricing-defaults .pricing-defaults-modal__header {
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 16px;
        padding: 8px 24px 16px;
        border-bottom: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
        background: var(--ipi-bg-card, #ffffff);
    }
    #pricing-defaults .pricing-defaults-modal__header-copy .eyebrow {
        margin: 0 0 0.35rem 0;
        color: var(--ipi-accent, #c49510);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }
    #pricing-defaults .pricing-defaults-modal__header-copy h3 {
        margin: 0 0 0.35rem 0;
        font-family: var(--font-display, inherit);
        font-size: 1.35rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--ipi-ink, #1a1815);
    }
    #pricing-defaults .pricing-defaults-modal__header-copy .text-muted {
        margin: 0;
        max-width: 62ch;
        line-height: 1.5;
        color: var(--ipi-ink-3, #6b6458);
    }
    #pricing-defaults .pricing-defaults-modal__header-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
    }
    #pricing-defaults .pricing-defaults-modal__scroll {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 20px 24px 20px;
        -webkit-overflow-scrolling: touch;
        background: var(--ipi-bg, #f7f5f0);
    }
    #pricing-defaults .pricing-defaults-modal__scroll .pricing-settings-card {
        margin-top: 0;
    }
    #pricing-defaults .pricing-defaults-modal__footer {
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
        padding: 14px 24px 18px;
        border-top: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
        background: var(--ipi-bg-card, #ffffff);
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.04);
    }
    #pricing-defaults .pricing-defaults-modal__footer-copy strong {
        font-size: 1rem;
        color: var(--ipi-ink, #1a1815);
    }
    #pricing-defaults .pricing-defaults-modal__footer-copy p {
        margin: 0;
        font-size: 0.9rem;
        color: var(--ipi-ink-3, #6b6458);
    }
    #pricing-defaults .pricing-defaults-modal__footer-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    /* Configurator pricing overrides modal */
    #pricing-overrides.settings-modal {
        background: rgba(26, 24, 21, 0.52);
        background: color-mix(in srgb, var(--ipi-ink, #1a1815) 52%, transparent);
    }
    #pricing-overrides .settings-modal__dialog--pricing-overrides {
        display: flex;
        flex-direction: column;
        width: min(1100px, 100%);
        max-height: min(92vh, 920px);
        background: var(--ipi-bg-card, #ffffff);
        border-radius: 16px;
        border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
        box-shadow: var(--ipi-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04));
        overflow: hidden;
    }
    #pricing-overrides .settings-modal__body--pricing-overrides {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        max-height: none;
        overflow: hidden;
        padding: 0;
        padding-top: 36px;
        pointer-events: auto;
    }
    #pricing-overrides .pricing-overrides-modal {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        margin: 0;
        gap: 0;
        background: var(--ipi-bg-card, #ffffff);
        border: 0;
        box-shadow: none;
        padding: 0;
    }
    #pricing-overrides .pricing-overrides-modal__header {
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 16px;
        padding: 8px 24px 16px;
        border-bottom: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
        background: var(--ipi-bg-card, #ffffff);
    }
    #pricing-overrides .pricing-overrides-modal__header-copy .eyebrow {
        margin: 0 0 0.35rem 0;
        color: var(--ipi-accent, #c49510);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }
    #pricing-overrides .pricing-overrides-modal__header-copy h3 {
        margin: 0 0 0.35rem 0;
        font-family: var(--font-display, inherit);
        font-size: 1.35rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--ipi-ink, #1a1815);
    }
    #pricing-overrides .pricing-overrides-modal__header-copy .text-muted {
        margin: 0;
        max-width: 62ch;
        line-height: 1.5;
        color: var(--ipi-ink-3, #6b6458);
    }
    #pricing-overrides .pricing-overrides-modal__header-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
    }
    #pricing-overrides .pricing-overrides-modal__scroll {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 20px 24px 20px;
        -webkit-overflow-scrolling: touch;
        background: var(--ipi-bg, #f7f5f0);
    }
    #pricing-overrides .pricing-overrides-modal__lede {
        margin: 0 auto 14px;
        max-width: 62ch;
        line-height: 1.5;
    }
    #pricing-overrides .pricing-overrides-modal__controls {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
        justify-content: space-between;
        max-width: 920px;
        margin: 0 auto 14px;
    }
    #pricing-overrides .pricing-overrides-modal__filter {
        flex: 1 1 240px;
        min-width: 0;
    }
    #pricing-overrides .pricing-overrides-modal__filter-input {
        width: 100%;
        box-sizing: border-box;
        padding: 10px 12px;
        border-radius: 10px;
        border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
        background: var(--ipi-bg-card, #ffffff);
        font: inherit;
        color: var(--ipi-ink, #1a1815);
    }
    #pricing-overrides .pricing-overrides-modal__filter-input::placeholder {
        color: var(--ipi-ink-3, #6b6458);
        opacity: 0.85;
    }
    #pricing-overrides .pricing-overrides-modal__filter-input:focus {
        outline: 2px solid var(--ipi-accent, #c49510);
        outline-offset: 2px;
    }
    #pricing-overrides .pricing-overrides-modal__bulk {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-end;
    }
    #pricing-overrides .pricing-overrides-modal__jump {
        max-width: 920px;
        margin: 0 auto 16px;
        padding: 12px 14px;
        border-radius: 12px;
        border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
        background: var(--ipi-bg-card, #ffffff);
    }
    #pricing-overrides .pricing-overrides-modal__jump-label {
        display: block;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ipi-ink-3, #6b6458);
        margin-bottom: 8px;
    }
    #pricing-overrides .pricing-overrides-modal__jump-links {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    #pricing-overrides .pricing-overrides-modal__jump-link {
        display: inline-flex;
        align-items: center;
        padding: 6px 10px;
        border-radius: 999px;
        font-size: 0.8rem;
        font-weight: 600;
        text-decoration: none;
        color: var(--ipi-ink, #1a1815);
        background: var(--ipi-bg, #f7f5f0);
        border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
        transition: background 0.15s ease, border-color 0.15s ease;
    }
    #pricing-overrides .pricing-overrides-modal__jump-link:hover {
        background: var(--ipi-accent-bg, rgba(196, 149, 16, 0.12));
        border-color: var(--ipi-accent-border, rgba(196, 149, 16, 0.35));
    }
    #pricing-overrides .pricing-overrides-modal__jump-link--hidden {
        display: none;
    }
    #pricing-overrides .pricing-overrides-group--hidden {
        display: none !important;
    }
    #pricing-overrides .fire-door-pricing-grid__item--filtered-out {
        display: none !important;
    }
    /* Two columns of options; hairline grid — not individual cards */
    #pricing-overrides .fire-door-pricing-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1px;
        padding: 0;
        margin: 0;
        background: var(--ipi-rule, rgba(0, 0, 0, 0.08));
        border: none;
    }
    #pricing-overrides .fire-door-pricing-grid__item {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: 10px 12px;
        padding: 11px 14px;
        margin: 0;
        border: none;
        border-radius: 0;
        transform: none;
        box-shadow: none;
        background: var(--ipi-bg-card, #ffffff);
        min-width: 0;
    }
    #pricing-overrides .fire-door-pricing-grid__item:hover,
    #pricing-overrides .fire-door-pricing-grid__item:focus-within {
        background: var(--ipi-bg, #f7f5f0);
    }
    #pricing-overrides .fire-door-pricing-grid__item--custom {
        grid-column: 1 / -1;
        flex-direction: column;
        align-items: stretch;
        flex-wrap: wrap;
        padding: 14px 16px;
    }
    #pricing-overrides .fire-door-pricing-grid__item--custom .fire-door-pricing-grid__label {
        flex: 1 1 auto;
        width: 100%;
    }
    #pricing-overrides .fire-door-pricing-grid__label {
        flex: 1 1 auto;
        min-width: 0;
        align-items: center;
    }
    #pricing-overrides .fire-door-pricing-grid__icon {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        font-size: 0.75rem;
        border-radius: 10px;
    }
    #pricing-overrides .fire-door-pricing-grid__title {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--ipi-ink, #1a1815);
        line-height: 1.35;
    }
    #pricing-overrides .pricing-overrides-row__price {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        gap: 2px;
        align-items: flex-end;
        min-width: 5.5rem;
    }
    #pricing-overrides .fire-door-pricing-grid__item--custom .pricing-overrides-row__price {
        align-items: stretch;
        width: 100%;
        min-width: 0;
    }
    #pricing-overrides .pricing-overrides-row__price-label {
        font-size: 0.65rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--ipi-ink-3, #6b6458);
        white-space: nowrap;
    }
    #pricing-overrides .fire-door-pricing-grid .input-with-prefix {
        min-width: 0;
        width: 100%;
        max-width: 7.5rem;
    }
    #pricing-overrides .fire-door-pricing-grid__item--custom .input-with-prefix {
        max-width: none;
    }
    #pricing-overrides .pricing-overrides-modal__help {
        margin: 0 auto 18px;
        max-width: 920px;
        border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
        border-radius: 12px;
        background: var(--ipi-bg-card, #ffffff);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }
    #pricing-overrides .pricing-overrides-modal__help > summary {
        list-style: none;
        cursor: pointer;
        padding: 12px 16px;
        font-weight: 600;
        font-size: 0.9rem;
        color: var(--ipi-ink, #1a1815);
    }
    #pricing-overrides .pricing-overrides-modal__help > summary::-webkit-details-marker {
        display: none;
    }
    #pricing-overrides .pricing-overrides-modal__help[open] > summary {
        border-bottom: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
    }
    #pricing-overrides .pricing-overrides-modal__help-list {
        margin: 0;
        padding: 12px 16px 14px 2.25rem;
        font-size: 0.9rem;
        line-height: 1.5;
        color: var(--ipi-ink-3, #6b6458);
    }
    #pricing-overrides .pricing-overrides-modal__help-list li + li {
        margin-top: 6px;
    }
    #pricing-overrides .pricing-overrides-modal__form-card {
        margin-top: 0;
        max-width: 920px;
        margin-inline: auto;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        gap: 0;
    }
    #pricing-overrides .fire-door-pricing-groups {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    /* One flat panel per step — no nested “card per option” */
    #pricing-overrides .fire-door-pricing-group {
        margin-bottom: 0;
        padding: 0;
        border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.08));
        border-radius: 12px;
        background: var(--ipi-bg-card, #ffffff);
        box-shadow: none;
        overflow: hidden;
        background-image: none;
    }
    #pricing-overrides .fire-door-pricing-group summary {
        padding: 14px 16px;
    }
    #pricing-overrides .fire-door-pricing-group summary strong {
        font-size: 1rem;
    }
    #pricing-overrides .fire-door-pricing-group[open] summary {
        border-bottom: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.08));
        background: var(--ipi-bg, #f7f5f0);
    }
    #pricing-overrides .fire-door-pricing-group__toolbar {
        justify-content: flex-start;
        padding: 10px 14px;
        margin: 0;
        border-bottom: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.06));
        background: var(--ipi-bg-card, #ffffff);
    }
    #pricing-overrides .fire-door-pricing-group__toolbar:empty {
        display: none;
    }
    #pricing-overrides .fire-door-pricing-group__count {
        background: var(--ipi-bg, #f7f5f0);
        border-color: var(--ipi-rule, rgba(0, 0, 0, 0.1));
    }
    #pricing-overrides .pricing-overrides-modal__footer {
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
        padding: 14px 24px 18px;
        border-top: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
        background: var(--ipi-bg-card, #ffffff);
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.04);
    }
    #pricing-overrides .pricing-overrides-modal__footer-note {
        margin: 0;
        flex: 1 1 200px;
        font-size: 0.9rem;
        color: var(--ipi-ink-3, #6b6458);
    }
    #pricing-overrides .pricing-overrides-modal__footer-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    /* ==========================================================================
       Pricing-overrides modal — mobile content overrides.
       PLACED AFTER all the desktop pricing-overrides rules so this block
       wins the cascade. The earlier mobile rules in the main @media block
       at line 2401+ get overridden by the desktop rules above; this block
       is the source-order-last say.
       ========================================================================== */
    @media (max-width: 900px) {
        /* Reset all the auto-margin / max-width centering — full-width on mobile */
        #pricing-overrides .pricing-overrides-modal__lede,
        #pricing-overrides .pricing-overrides-modal__controls,
        #pricing-overrides .pricing-overrides-modal__jump,
        #pricing-overrides .pricing-overrides-modal__help,
        #pricing-overrides .pricing-overrides-modal__form-card {
            max-width: 100%;
            margin-inline: 0;
            margin-left: 0;
            margin-right: 0;
        }

        #pricing-overrides .pricing-overrides-modal__lede {
            margin: 0 0 12px;
            font-size: 0.85rem;
            line-height: 1.45;
        }

        /* Search + Expand/Collapse buttons — stack vertically with the
           buttons in a 2-col grid below the search input. */
        #pricing-overrides .pricing-overrides-modal__controls {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: flex-start;
            gap: 8px;
            margin: 0 0 12px;
            max-width: 100%;
        }

        #pricing-overrides .pricing-overrides-modal__filter {
            flex: 1 1 auto;
            width: 100%;
        }

        #pricing-overrides .pricing-overrides-modal__filter-input {
            width: 100%;
            /* min-height + font-size owned by canonical .modal--sheet input rule in style.css:4899 */
        }

        #pricing-overrides .pricing-overrides-modal__bulk {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
            width: 100%;
            justify-content: stretch;
            flex: none;
        }

        #pricing-overrides .pricing-overrides-modal__bulk .btn {
            width: 100%;
            min-height: 40px;
            justify-content: center;
        }

        /* Jump nav — make pills wrap and stay compact (don't overflow) */
        #pricing-overrides .pricing-overrides-modal__jump {
            padding: 10px 12px;
            margin: 0 0 12px;
            border-radius: 10px;
        }

        #pricing-overrides .pricing-overrides-modal__jump-label {
            font-size: 9px;
            margin-bottom: 6px;
        }

        #pricing-overrides .pricing-overrides-modal__jump-links {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            overflow: visible;
        }

        #pricing-overrides .pricing-overrides-modal__jump-link {
            font-size: 0.75rem;
            padding: 5px 9px;
        }

        /* Help disclosure — tighter padding */
        #pricing-overrides .pricing-overrides-modal__help {
            margin: 0 0 12px;
            border-radius: 10px;
        }

        #pricing-overrides .pricing-overrides-modal__help > summary {
            padding: 10px 12px;
            font-size: 0.85rem;
        }

        #pricing-overrides .pricing-overrides-modal__help-list {
            padding: 10px 12px 12px 1.5rem;
            font-size: 0.82rem;
        }

        /* Form card wrapper — full width, no max-width centering */
        #pricing-overrides .pricing-overrides-modal__form-card {
            max-width: 100%;
            margin: 0;
        }

        #pricing-overrides .fire-door-pricing-groups {
            gap: 8px;
        }

        /* Group collapsibles */
        #pricing-overrides .fire-door-pricing-group {
            border-radius: 10px;
        }

        /* Summary contains [div with strong + optional p] + [count pill].
           On a 375px modal body the title pushes the count pill off-screen
           because the inner div has min-width: auto by default in flex.
           Add min-width: 0 to let the title shrink/wrap, allow flex-wrap so
           the count pill drops below the title if needed, and tighten the
           pill itself so it stays within the card. */
        #pricing-overrides .fire-door-pricing-group summary {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 6px 10px;
            padding: 12px 14px;
        }

        #pricing-overrides .fire-door-pricing-group summary > div {
            flex: 1 1 auto;
            min-width: 0;
        }

        #pricing-overrides .fire-door-pricing-group summary strong {
            display: block;
            font-size: 0.9rem;
            line-height: 1.3;
            overflow-wrap: break-word;
            word-break: break-word;
            min-width: 0;
        }

        #pricing-overrides .fire-door-pricing-group summary p {
            font-size: 0.78rem;
            line-height: 1.4;
            margin: 2px 0 0;
            overflow-wrap: break-word;
        }

        #pricing-overrides .fire-door-pricing-group__count {
            flex: 0 0 auto;
            font-size: 10px;
            padding: 3px 8px;
            white-space: nowrap;
            max-width: 100%;
        }

        /* Jump-link pills inside the jump nav — let them wrap, no overflow */
        #pricing-overrides .pricing-overrides-modal__jump-link {
            max-width: 100%;
            overflow-wrap: break-word;
            word-break: break-word;
            text-align: center;
        }

        /* Pricing grid item label + icon — let the title wrap inside the row */
        #pricing-overrides .fire-door-pricing-grid__label {
            min-width: 0;
            flex: 1 1 auto;
        }

        #pricing-overrides .fire-door-pricing-grid__text {
            min-width: 0;
            flex: 1 1 auto;
            overflow-wrap: break-word;
            word-break: break-word;
        }

        #pricing-overrides .fire-door-pricing-grid__title {
            display: block;
            min-width: 0;
            overflow-wrap: break-word;
            word-break: break-word;
        }

        /* Pricing grid: stack to single column on mobile (was 2-col on desktop) */
        #pricing-overrides .fire-door-pricing-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1px;
        }

        /* Each grid item: stack the label+price input vertically with full width */
        #pricing-overrides .fire-door-pricing-grid__item {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 8px;
            padding: 12px 14px;
        }

        #pricing-overrides .fire-door-pricing-grid__label {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
        }

        #pricing-overrides .fire-door-pricing-grid__title {
            font-size: 0.88rem;
        }

        #pricing-overrides .pricing-overrides-row__price {
            align-items: stretch;
            width: 100%;
            min-width: 0;
        }

        #pricing-overrides .pricing-overrides-row__price-label {
            text-align: left;
        }

        #pricing-overrides .fire-door-pricing-grid .input-with-prefix {
            max-width: 100%;
            width: 100%;
        }

        /* #pricing-overrides .fire-door-pricing-grid .input-with-prefix input
           sizing owned by canonical .modal--sheet input rule in style.css:4899. */

        /* Group toolbar (Add custom option button) — full-width */
        #pricing-overrides .fire-door-pricing-group__toolbar {
            padding: 10px 12px;
        }

        #pricing-overrides .fire-door-pricing-group__toolbar .btn {
            width: 100%;
            min-height: 40px;
            justify-content: center;
        }

        /* Footer — compact, full-width stacked buttons */
        #pricing-overrides .pricing-overrides-modal__footer {
            padding: 10px 16px;
            padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
            flex-direction: column;
            align-items: stretch;
            gap: 8px;
        }

        #pricing-overrides .pricing-overrides-modal__footer-note {
            display: none;
        }

        #pricing-overrides .pricing-overrides-modal__footer-actions {
            display: flex;
            flex-direction: column;
            gap: 8px;
            width: 100%;
            justify-content: stretch;
        }

        #pricing-overrides .pricing-overrides-modal__footer-actions .btn {
            width: 100%;
            min-height: 44px;
            justify-content: center;
        }
    }

    /* Quote line item mapping modal */
    #pricing-mapping.settings-modal {
        background: rgba(26, 24, 21, 0.52);
        background: color-mix(in srgb, var(--ipi-ink, #1a1815) 52%, transparent);
    }
    #pricing-mapping .settings-modal__dialog--pricing-mapping {
        display: flex;
        flex-direction: column;
        width: min(1100px, 100%);
        max-height: min(92vh, 920px);
        background: var(--ipi-bg-card, #ffffff);
        border-radius: 16px;
        border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
        box-shadow: var(--ipi-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04));
        overflow: hidden;
    }
    #pricing-mapping .settings-modal__body--pricing-mapping {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        max-height: none;
        overflow: hidden;
        padding: 0;
        padding-top: 36px;
        pointer-events: auto;
    }
    #pricing-mapping .pricing-mapping-modal {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        margin: 0;
        gap: 0;
        background: var(--ipi-bg-card, #ffffff);
        border: 0;
        box-shadow: none;
        padding: 0;
    }
    #pricing-mapping .pricing-mapping-modal__header {
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 16px;
        padding: 8px 24px 16px;
        border-bottom: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
        background: var(--ipi-bg-card, #ffffff);
    }
    #pricing-mapping .pricing-mapping-modal__header-copy .eyebrow {
        margin: 0 0 0.35rem 0;
        color: var(--ipi-accent, #c49510);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }
    #pricing-mapping .pricing-mapping-modal__header-copy h3 {
        margin: 0 0 0.35rem 0;
        font-family: var(--font-display, inherit);
        font-size: 1.35rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--ipi-ink, #1a1815);
    }
    #pricing-mapping .pricing-mapping-modal__header-copy .text-muted {
        margin: 0;
        max-width: 62ch;
        line-height: 1.5;
        color: var(--ipi-ink-3, #6b6458);
    }
    #pricing-mapping .pricing-mapping-modal__header-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
    }
    #pricing-mapping .pricing-mapping-modal__scroll {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 20px 24px 20px;
        -webkit-overflow-scrolling: touch;
        background: var(--ipi-bg, #f7f5f0);
    }
    #pricing-mapping .pricing-mapping-modal__content {
        display: flex;
        flex-direction: column;
        gap: 16px;
        max-width: 100%;
    }
    #pricing-mapping .pricing-mapping-modal__lede {
        margin: 0;
        max-width: 70ch;
        line-height: 1.5;
        color: var(--ipi-ink-3, #6b6458);
    }
    #pricing-mapping .pricing-mapping-modal__help {
        border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
        border-radius: 12px;
        background: var(--ipi-bg-card, #ffffff);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }
    #pricing-mapping .pricing-mapping-modal__help > summary {
        list-style: none;
        cursor: pointer;
        padding: 12px 16px;
        font-weight: 600;
        font-size: 0.9rem;
        color: var(--ipi-ink, #1a1815);
    }
    #pricing-mapping .pricing-mapping-modal__help > summary::-webkit-details-marker {
        display: none;
    }
    #pricing-mapping .pricing-mapping-modal__help[open] > summary {
        border-bottom: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
    }
    #pricing-mapping .pricing-mapping-modal__help-steps {
        margin: 0 0 8px 0;
        padding: 8px 16px 0 2.25rem;
        font-size: 0.9rem;
        line-height: 1.5;
        color: var(--ipi-ink, #1a1815);
    }
    #pricing-mapping .pricing-mapping-modal__help-foot {
        margin: 0;
        padding: 4px 16px 14px;
        font-size: 0.88rem;
    }
    #pricing-mapping .pricing-mapping-modal__table-card.pricing-table-card {
        margin: 0;
        border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.08));
        border-radius: 14px;
        padding: 16px 18px 18px;
        background: var(--ipi-bg-card, #ffffff);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    }
    #pricing-mapping .pricing-toolbar--mapping.pricing-toolbar {
        margin-bottom: 14px;
        align-items: stretch;
    }
    #pricing-mapping .pricing-toolbar__search {
        flex: 1 1 240px;
        min-width: 0;
        display: block;
    }
    #pricing-mapping .pricing-toolbar__search input[type="search"] {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.1));
        border-radius: 10px;
        padding: 10px 12px;
        font: inherit;
        background: var(--ipi-bg-card, #ffffff);
        color: var(--ipi-ink, #1a1815);
    }
    #pricing-mapping .pricing-toolbar__search input[type="search"]:focus {
        outline: 2px solid var(--ipi-accent, #c49510);
        outline-offset: 2px;
    }
    #pricing-mapping .pricing-mapping-modal__footer {
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
        padding: 14px 24px 18px;
        border-top: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
        background: var(--ipi-bg-card, #ffffff);
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.04);
    }
    #pricing-mapping .pricing-mapping-modal__footer-note {
        margin: 0;
        flex: 1 1 220px;
        font-size: 0.9rem;
        color: var(--ipi-ink-3, #6b6458);
    }
    #pricing-mapping .pricing-mapping-modal__footer-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    /* Add / edit quote line item (nested modal) — IPI shell */
    .modal.modal--pricing-item .modal__overlay {
        background: rgba(26, 24, 21, 0.52);
        background: color-mix(in srgb, var(--ipi-ink, #1a1815) 52%, transparent);
    }
    .modal.modal--pricing-item .modal__dialog.modal__dialog--pricing-item {
        width: min(920px, calc(100vw - 32px));
        max-width: 100%;
        max-height: min(92vh, 880px);
        padding: 0;
        margin: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        background: var(--ipi-bg-card, #ffffff);
        border-radius: 16px;
        border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
        box-shadow: var(--ipi-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04));
    }
    .modal.modal--pricing-item .pricing-item-modal {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        background: var(--ipi-bg-card, #ffffff);
    }
    .modal.modal--pricing-item .pricing-item-modal__header {
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 16px;
        padding: 8px 24px 16px;
        padding-top: max(8px, env(safe-area-inset-top, 0px));
        border-bottom: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
        background: var(--ipi-bg-card, #ffffff);
    }
    .modal.modal--pricing-item .pricing-item-modal__header-copy .eyebrow {
        margin: 0 0 0.35rem 0;
        color: var(--ipi-accent, #c49510);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }
    .modal.modal--pricing-item .pricing-item-modal__header-copy h3 {
        margin: 0 0 0.35rem 0;
        font-family: var(--font-display, inherit);
        font-size: 1.35rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--ipi-ink, #1a1815);
    }
    .modal.modal--pricing-item .pricing-item-modal__subtitle {
        margin: 0;
        max-width: 56ch;
        line-height: 1.5;
        font-size: 0.95rem;
        color: var(--ipi-ink-3, #6b6458);
    }
    .modal.modal--pricing-item .pricing-item-modal__header-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
    }
    .modal.modal--pricing-item .pricing-item-modal__scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 20px 24px;
        -webkit-overflow-scrolling: touch;
        background: var(--ipi-bg, #f7f5f0);
    }
    .modal.modal--pricing-item .pricing-item-modal__form.pricing-form {
        gap: 1.25rem;
        margin: 0;
    }
    .modal.modal--pricing-item .pricing-item-modal__section {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 16px 18px 18px;
        border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.08));
        border-radius: 14px;
        background: var(--ipi-bg-card, #ffffff);
    }
    .modal.modal--pricing-item .pricing-item-modal__section-kicker {
        margin: 0;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--ipi-ink-3, #6b6458);
    }
    .modal.modal--pricing-item .pricing-item-modal__field {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin: 0;
        min-width: 0;
    }
    .modal.modal--pricing-item .pricing-field-label {
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--ipi-ink, #1a1815);
    }
    .modal.modal--pricing-item .pricing-field-required {
        color: var(--ipi-accent, #c49510);
        font-weight: 700;
    }
    .modal.modal--pricing-item .pricing-item-modal__field :where(select, input:not([type="checkbox"])) {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.1));
        border-radius: 10px;
        padding: 10px 12px;
        font: inherit;
        background: var(--ipi-bg-card, #ffffff);
        color: var(--ipi-ink, #1a1815);
    }
    .modal.modal--pricing-item .pricing-item-modal__field :where(select, input:not([type="checkbox"])):focus-visible {
        outline: 2px solid var(--ipi-accent, #c49510);
        outline-offset: 2px;
    }
    .modal.modal--pricing-item .pricing-item-modal__field select[multiple] {
        min-height: 0;
    }
    .modal.modal--pricing-item .pricing-item-modal__grid--meta {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }
    /* (pricing-item meta grid mobile rule consolidated into the @900px block above) */
    .modal.modal--pricing-item .pricing-reason-toolbar {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 14px;
        border-radius: 12px;
        border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.08));
        background: var(--ipi-bg, #f7f5f0);
    }
    .modal.modal--pricing-item .pricing-reason-toolbar .pricing-reason-picker {
        margin: 0;
        padding: 0;
        border: none;
        background: transparent;
    }
    .modal.modal--pricing-item .pricing-reason-toolbar .pricing-reason-picker__hint,
    .modal.modal--pricing-item .pricing-reason-toolbar__hint {
        margin: 0;
        font-size: 0.88rem;
        color: var(--ipi-ink-3, #6b6458);
    }
    .modal.modal--pricing-item .pricing-reason-toolbar .pricing-reason-picker__list {
        max-height: 220px;
        overflow-y: auto;
        padding: 4px 0;
    }
    .modal.modal--pricing-item .pricing-reason-add {
        flex-direction: row;
        align-items: stretch;
        gap: 10px;
        margin-top: 0;
    }
    .modal.modal--pricing-item .pricing-reason-add input {
        flex: 1;
        min-width: 0;
        border-radius: 10px;
        border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.1));
        padding: 10px 12px;
        font: inherit;
        background: var(--ipi-bg-card, #ffffff);
    }
    .modal.modal--pricing-item .pricing-item-modal__hint {
        margin: 0;
        display: block;
    }
    .modal.modal--pricing-item .pricing-item-modal__footer {
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
        padding: 14px 24px 18px;
        padding-bottom: max(18px, env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
        background: var(--ipi-bg-card, #ffffff);
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.04);
    }
    .modal.modal--pricing-item .pricing-item-modal__footer-note {
        margin: 0;
        flex: 1 1 200px;
        font-size: 0.9rem;
        color: var(--ipi-ink-3, #6b6458);
    }
    .modal.modal--pricing-item .pricing-item-modal__footer-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .modal.modal--pricing-item .pricing-reason-option {
        border-color: var(--ipi-rule, rgba(0, 0, 0, 0.1));
        background: var(--ipi-bg-card, #ffffff);
    }

	    .email-templates-header-actions {
	        display: flex;
	        gap: 12px;
	        align-items: center;
	        flex-wrap: wrap;
	        justify-content: flex-end;
	    }
	    .email-templates-mode {
	        display: inline-flex;
	        border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
	        border-radius: 999px;
	        background: var(--ipi-bg-card, #ffffff);
	        overflow: hidden;
	    }
	    .email-templates-mode__btn {
	        border: 0;
	        background: transparent;
	        padding: 8px 12px;
	        font-weight: 700;
	        font-size: 0.85rem;
	        cursor: pointer;
	        color: var(--ipi-ink-3, #6b6458);
	    }
	    .email-templates-mode__btn.is-active {
	        background: var(--ipi-accent-bg, rgba(196, 149, 16, 0.08));
	        color: var(--ipi-ink, #1a1815);
	        box-shadow: inset 0 0 0 1px var(--ipi-accent-border, rgba(196, 149, 16, 0.2));
	    }
        .email-templates-mobile-bar {
            display: none;
        }
	    .email-templates-layout {
	        display: grid;
	        grid-template-columns: 280px minmax(0, 1fr);
	        gap: 16px;
	        align-items: start;
	    }
	    .email-templates-stack {
	        display: grid;
	        grid-template-columns: minmax(0, 1fr) 260px;
	        gap: 16px;
	        align-items: start;
	        min-width: 0;
	    }
	    /* Fallback mode gating: ensures Basic never shows Advanced-only panels even if [hidden] is overridden. */
	    [data-email-templates-root][data-email-editor-mode="basic"] [data-email-mode-panel="advanced"] {
	        display: none !important;
	    }
	    [data-email-templates-root][data-email-editor-mode="advanced"] [data-email-mode-panel="basic"] {
	        display: none !important;
	    }
    .email-templates-list {
        border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
        border-radius: 14px;
        overflow: hidden;
        background: var(--ipi-bg-card, #ffffff);
        box-shadow: var(--ipi-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04));
    }
	    .email-templates-search {
	        display: block;
	        padding: 12px;
	        border-bottom: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
	        background: var(--ipi-bg-inset, #edeae3);
	    }
	    .email-templates-search input {
	        width: 100%;
	    }
	    .email-templates-filters {
	        display: grid;
	        grid-template-columns: repeat(2, minmax(0, 1fr));
	        gap: 8px;
	        padding: 10px 12px;
	        border-bottom: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
	        background: var(--ipi-bg-card, #ffffff);
	    }
	    .email-templates-filters select {
	        width: 100%;
	        border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
	        border-radius: 10px;
	        padding: 8px 10px;
	        font-size: 0.85rem;
	    }
	    .email-templates-recent {
	        border-bottom: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
	        background: var(--ipi-bg-card, #ffffff);
	    }
	    .email-templates-list__items {
	        max-height: 62vh;
	        overflow: auto;
	    }
	    .email-template-group__title {
	        padding: 10px 12px;
	        font-size: 0.72rem;
	        letter-spacing: 0.16em;
	        text-transform: uppercase;
	        color: var(--ipi-ink-3, #6b6458);
	        background: var(--ipi-bg-inset, #edeae3);
	        border-top: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
	        border-bottom: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
	    }
	    .email-template-group:first-child .email-template-group__title {
	        border-top: 0;
	    }
	    .email-template-row {
	        display: flex;
	        gap: 10px;
	        align-items: flex-start;
        justify-content: space-between;
        padding: 12px 12px;
        border-bottom: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
        cursor: pointer;
    }
    .email-template-row:hover,
    .email-template-row.is-active {
        background: var(--ipi-bg-hover, #f2efe9);
    }
	    .email-template-row__title {
	        font-weight: 650;
	        color: var(--ipi-ink, #1a1815);
	        font-size: 0.95rem;
	        display: flex;
	        flex-wrap: wrap;
	        gap: 8px;
	        align-items: center;
	    }
	    .email-template-row__meta {
	        color: var(--ipi-ink-3, #6b6458);
	        font-size: 0.8rem;
	        margin-top: 2px;
	        display: flex;
	        gap: 6px;
	        align-items: center;
	        flex-wrap: wrap;
	    }
	    .email-template-row__dot {
	        opacity: 0.7;
	    }
	    .email-template-chip {
	        display: inline-flex;
	        align-items: center;
	        padding: 3px 8px;
	        border-radius: 999px;
	        border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
	        background: var(--ipi-bg-card, #ffffff);
	        font-size: 0.72rem;
	        font-weight: 700;
	        color: var(--ipi-ink, #1a1815);
	    }
	    .email-template-chip--custom {
	        border-color: var(--ipi-accent-border, rgba(196, 149, 16, 0.2));
	        background: var(--ipi-accent-bg, rgba(196, 149, 16, 0.08));
	        color: var(--ipi-ink-2, #3d3a34);
	    }
	    .email-template-row__toggle input {
	        margin-top: 4px;
	    }
    .email-templates-editor {
        display: flex;
        flex-direction: column;
        gap: 10px;
        min-width: 0;
    }
    .email-templates-editor__status {
        font-size: 0.9rem;
    }
    .email-templates-editor__grid {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
		    .email-templates-editor__bodies {
		        display: grid;
		        grid-template-columns: 1fr 1fr;
		        gap: 12px;
		    }
		    .email-templates-editor__bodies[data-email-mode-panel="advanced"] .email-templates-advanced-toolbar,
		    .email-templates-editor__bodies[data-email-mode-panel="advanced"] .email-templates-insert-popover {
		        grid-column: 1 / -1;
		    }
		    .email-templates-editor__bodies[data-email-mode-panel="basic"] {
		        display: flex;
		        flex-direction: column;
		        gap: 12px;
		    }
		    .email-templates-advanced-toolbar {
		        display: flex;
		        align-items: center;
		        justify-content: space-between;
		        gap: 12px;
		        padding: 10px 12px;
		        border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
		        border-radius: 14px;
		        background: var(--ipi-bg-card, #ffffff);
		        flex-wrap: wrap;
		    }
		    .email-templates-advanced-toolbar__group {
		        display: inline-flex;
		        align-items: center;
		        gap: 10px;
		        flex-wrap: wrap;
		    }
		    .email-templates-basic-toolbar {
		        display: flex;
		        align-items: center;
		        gap: 10px;
		        flex-wrap: wrap;
	    }
	    .email-templates-basic-toolbar__spacer {
	        flex: 1 1 auto;
	    }
	    .email-templates-insert-popover {
	        border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
	        border-radius: 14px;
	        background: var(--ipi-bg-card, #ffffff);
	        padding: 12px;
	        box-shadow: var(--ipi-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04));
	    }
	    .email-templates-insert-popover__header {
	        display: flex;
	        align-items: center;
	        justify-content: space-between;
	        gap: 10px;
	        margin-bottom: 10px;
	    }
	    .email-templates-insert-popover__search input {
	        width: 100%;
	        border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
	        border-radius: 12px;
	        padding: 10px 12px;
	    }
	    .email-templates-insert-popover__list {
	        margin-top: 10px;
	        display: flex;
	        flex-direction: column;
	        gap: 10px;
	        max-height: 260px;
	        overflow: auto;
	    }
	    .email-templates-smart-blocks {
	        border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
	        border-radius: 14px;
	        background: var(--ipi-bg-inset, #edeae3);
	        padding: 12px;
	    }
	    .email-templates-smart-blocks__buttons {
	        display: flex;
	        flex-wrap: wrap;
	        gap: 8px;
	        margin-top: 8px;
	    }
	    .email-templates-primary-type {
	        display: inline-flex;
	        border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
	        border-radius: 999px;
	        overflow: hidden;
	        background: var(--ipi-bg-card, #ffffff);
	    }
	    .email-templates-primary-type__btn {
	        border: 0;
	        background: transparent;
	        padding: 6px 10px;
	        font-weight: 700;
	        font-size: 0.82rem;
	        cursor: pointer;
	        color: var(--ipi-ink-3, #6b6458);
	    }
	    .email-templates-primary-type__btn.is-active {
	        background: var(--ipi-accent-bg, rgba(196, 149, 16, 0.08));
	        color: var(--ipi-ink, #1a1815);
	        box-shadow: inset 0 0 0 1px var(--ipi-accent-border, rgba(196, 149, 16, 0.2));
	    }
	    .email-templates-default {
	        border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
	        border-radius: 14px;
	        background: var(--ipi-bg-card, #ffffff);
	        padding: 12px;
	    }
	    .email-templates-default__grid {
	        display: grid;
	        grid-template-columns: 1fr;
	        gap: 10px;
	    }
	    .email-templates-default__label {
	        font-weight: 700;
	        font-size: 0.8rem;
	        color: var(--ipi-ink, #1a1815);
	        margin-bottom: 6px;
	    }
	    .email-templates-default__pre {
	        margin: 0;
	        padding: 10px;
	        border-radius: 12px;
	        border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
	        background: var(--ipi-bg-inset, #edeae3);
	        white-space: pre-wrap;
	        font-size: 0.85rem;
	        color: var(--ipi-ink, #1a1815);
	        max-height: 22vh;
	        overflow: auto;
	    }
    .email-templates-editor__actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 14px;
        border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
        border-radius: 14px;
        background: var(--ipi-bg-card, #ffffff);
    }
    .email-templates-editor__actions-group {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }
    .email-templates-editor__actions-group--meta {
        padding-right: 12px;
        border-right: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
    }
    .email-templates-editor__actions-group--preview {
        flex: 1 1 auto;
        justify-content: flex-end;
    }
    @media (max-width: 640px) {
        .email-templates-editor__actions {
            flex-direction: column;
            align-items: stretch;
        }
        .email-templates-editor__actions-group--meta {
            padding-right: 0;
            border-right: 0;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
        }
        .email-templates-editor__actions-group--preview {
            justify-content: flex-start;
        }
    }
    .email-templates-preview {
        border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
        border-radius: 14px;
        background: var(--ipi-bg-card, #ffffff);
        overflow: hidden;
        box-shadow: var(--ipi-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04));
    }
	    .email-templates-preview__controls {
	        display: flex;
	        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
        padding: 12px;
        border-bottom: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
	        background: var(--ipi-bg-inset, #edeae3);
	    }
	    .email-templates-preview__warnings {
	        padding: 10px 12px;
	        border-bottom: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
	        background: var(--ipi-accent-bg, rgba(196, 149, 16, 0.08));
	        color: var(--ipi-ink-2, #3d3a34);
	        font-weight: 600;
	    }
	    .email-templates-preview__mode {
	        display: inline-flex;
	        gap: 6px;
        align-items: center;
        font-size: 0.9rem;
        color: var(--ipi-ink, #1a1815);
    }
    .email-templates-preview__tabs {
        display: flex;
        gap: 8px;
        padding: 10px 12px;
        border-bottom: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
    }
    .email-templates-preview__tab {
        border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
        border-radius: 999px;
        padding: 6px 12px;
        background: var(--ipi-bg-card, #ffffff);
        font-weight: 600;
        font-size: 0.85rem;
        color: var(--ipi-ink-3, #6b6458);
        cursor: pointer;
    }
    .email-templates-preview__tab:focus-visible {
        outline: 2px solid var(--ipi-accent, #c49510);
        outline-offset: 2px;
    }
    .email-templates-preview__tab.is-active {
        border-color: var(--ipi-accent-border, rgba(196, 149, 16, 0.2));
        background: var(--ipi-accent-bg, rgba(196, 149, 16, 0.08));
        color: var(--ipi-ink, #1a1815);
    }
    .email-templates-preview__pre {
        margin: 0;
        padding: 12px;
        white-space: pre-wrap;
        font-size: 0.9rem;
        color: var(--ipi-ink, #1a1815);
        background: var(--ipi-bg-card, #ffffff);
        max-height: 42vh;
        overflow: auto;
    }
    .email-templates-preview__iframe {
        width: 100%;
        min-height: 360px;
        border: 0;
        background: var(--ipi-bg-card, #ffffff);
    }
    .email-templates-placeholders {
        border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
        border-radius: 14px;
        background: var(--ipi-bg-card, #ffffff);
        overflow: hidden;
        box-shadow: var(--ipi-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04));
    }
	    .email-templates-placeholders__header {
	        padding: 12px;
	        border-bottom: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
	        background: var(--ipi-bg-inset, #edeae3);
	    }
	    .email-templates-placeholders__search {
	        display: block;
	        margin-top: 10px;
	    }
	    .email-templates-placeholders__search input {
	        width: 100%;
	    }
	    .email-templates-placeholders__list {
	        padding: 12px;
	        display: flex;
	        flex-direction: column;
	        gap: 10px;
	        max-height: 62vh;
	        overflow: auto;
	    }
	    .email-placeholder {
	        border: 1px dashed var(--ipi-rule-h, rgba(0, 0, 0, 0.11));
	        background: var(--ipi-bg-card, #ffffff);
	        border-radius: 12px;
	        padding: 8px 10px;
	        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	        font-size: 0.78rem;
	        color: var(--ipi-ink, #1a1815);
	        cursor: pointer;
	        text-align: left;
	        width: 100%;
	    }
	    .email-placeholder:hover {
	        border-color: var(--ipi-accent, #c49510);
	    }
	    .email-placeholder-group {
	        font-size: 0.72rem;
	        letter-spacing: 0.14em;
	        text-transform: uppercase;
	        font-weight: 700;
	        color: var(--ipi-ink-3, #6b6458);
	        margin-top: 6px;
	    }
	    .email-placeholder-row {
	        display: grid;
	        grid-template-columns: minmax(0, 1fr) 60px;
	        gap: 8px;
	        align-items: center;
	    }
	    .email-placeholder-row__meta {
	        grid-column: 1 / -1;
	        font-size: 0.78rem;
	        color: var(--ipi-ink-3, #6b6458);
	        margin: 0 2px;
	    }
	    .email-placeholder-copy {
	        border: 1px solid var(--ipi-rule, rgba(0, 0, 0, 0.07));
	        background: var(--ipi-bg-card, #ffffff);
	        border-radius: 10px;
	        padding: 8px 8px;
	        font-size: 0.8rem;
	        font-weight: 700;
	        cursor: pointer;
	        color: var(--ipi-ink, #1a1815);
	    }
	    .email-placeholder-copy:hover {
	        border-color: var(--ipi-accent, #c49510);
	    }
		    @media (max-width: 1200px) {
		        .email-templates-stack {
		            grid-template-columns: 1fr;
		        }
		    }
		    @media (max-width: 960px) {
		        .email-templates-layout {
		            grid-template-columns: 1fr;
		        }
		    }
		    @media (max-width: 1100px) {
		        .email-templates-editor__bodies {
		            grid-template-columns: 1fr;
		        }
		    }
        /* (email-templates mobile rules consolidated into the @900px block above) */

	    html[data-theme="dark"] .pricing-card__intro {
	        background: rgba(15, 23, 42, 0.55);
	        border-color: rgba(148, 163, 184, 0.22);
	        color: var(--text-muted);
	    }

	    html[data-theme="dark"] .pricing-form-grid label {
	        color: rgba(148, 163, 184, 0.92);
	    }

	    html[data-theme="dark"] .pricing-form-grid input,
	    html[data-theme="dark"] .pricing-form-grid select {
	        background: rgba(15, 23, 42, 0.7);
	        border-color: rgba(148, 163, 184, 0.36);
	        color: var(--text);
	    }

	    html[data-theme="dark"] .fire-door-pricing-group {
	        background: rgba(15, 23, 42, 0.6);
	        border-color: rgba(148, 163, 184, 0.22);
	    }

		    html[data-theme="dark"] #email-templates.settings-modal {
		        background: rgba(15, 23, 42, 0.72);
		    }
		    html[data-theme="dark"] #email-templates .settings-modal__dialog--email-templates {
		        background: rgba(15, 23, 42, 0.98);
		        border-color: rgba(148, 163, 184, 0.28);
		        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
		    }
		    html[data-theme="dark"] #email-templates .email-templates-modal,
		    html[data-theme="dark"] #email-templates .email-templates-modal__header,
		    html[data-theme="dark"] #email-templates .email-templates-modal__footer {
		        background: rgba(15, 23, 42, 0.98);
		    }
		    html[data-theme="dark"] #email-templates .email-templates-modal__header,
		    html[data-theme="dark"] #email-templates .email-templates-modal__footer {
		        border-color: rgba(148, 163, 184, 0.22);
		    }
		    html[data-theme="dark"] #email-templates .email-templates-modal__scroll {
		        background: rgba(2, 6, 23, 0.72);
		    }
		    html[data-theme="dark"] #email-templates .email-templates-modal__header-copy .eyebrow {
		        color: #d4b03c;
		    }
		    html[data-theme="dark"] #email-templates .email-templates-modal__header-copy h3,
		    html[data-theme="dark"] #email-templates .email-templates-modal__footer-copy strong {
		        color: rgba(248, 250, 252, 0.96);
		    }
		    html[data-theme="dark"] #email-templates .email-templates-modal__header-copy .text-muted,
		    html[data-theme="dark"] #email-templates .email-templates-modal__footer-copy p {
		        color: rgba(148, 163, 184, 0.88);
		    }

		    html[data-theme="dark"] #components.settings-modal {
		        background: rgba(15, 23, 42, 0.72);
		    }
		    html[data-theme="dark"] #components .settings-modal__dialog--components {
		        background: rgba(15, 23, 42, 0.98);
		        border-color: rgba(148, 163, 184, 0.28);
		        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
		    }
		    html[data-theme="dark"] #components .components-modal,
		    html[data-theme="dark"] #components .components-modal__header,
		    html[data-theme="dark"] #components .components-modal__footer {
		        background: rgba(15, 23, 42, 0.98);
		    }
		    html[data-theme="dark"] #components .components-modal__header,
		    html[data-theme="dark"] #components .components-modal__footer {
		        border-color: rgba(148, 163, 184, 0.22);
		    }
		    html[data-theme="dark"] #components .components-modal__scroll {
		        background: rgba(2, 6, 23, 0.72);
		    }
		    html[data-theme="dark"] #components .components-modal__header-copy .eyebrow {
		        color: #d4b03c;
		    }
		    html[data-theme="dark"] #components .components-modal__header-copy h3,
		    html[data-theme="dark"] #components .components-modal__footer-copy strong {
		        color: rgba(248, 250, 252, 0.96);
		    }
		    html[data-theme="dark"] #components .components-modal__header-copy .text-muted,
		    html[data-theme="dark"] #components .components-modal__footer-copy p {
		        color: rgba(148, 163, 184, 0.88);
		    }

		    html[data-theme="dark"] #fire-door-presets.settings-modal {
		        background: rgba(15, 23, 42, 0.72);
		    }
		    html[data-theme="dark"] #fire-door-presets .settings-modal__dialog--fd-presets {
		        background: rgba(15, 23, 42, 0.98);
		        border-color: rgba(148, 163, 184, 0.28);
		        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
		    }
		    html[data-theme="dark"] #fire-door-presets .fd-presets-modal,
		    html[data-theme="dark"] #fire-door-presets .fd-presets-modal__header,
		    html[data-theme="dark"] #fire-door-presets .fd-presets-modal__footer {
		        background: rgba(15, 23, 42, 0.98);
		    }
		    html[data-theme="dark"] #fire-door-presets .fd-presets-modal__header,
		    html[data-theme="dark"] #fire-door-presets .fd-presets-modal__footer {
		        border-color: rgba(148, 163, 184, 0.22);
		    }
		    html[data-theme="dark"] #fire-door-presets .fd-presets-modal__scroll {
		        background: rgba(2, 6, 23, 0.72);
		    }
		    html[data-theme="dark"] #fire-door-presets .fd-presets-modal__header-copy .eyebrow {
		        color: #d4b03c;
		    }
		    html[data-theme="dark"] #fire-door-presets .fd-presets-modal__header-copy h3,
		    html[data-theme="dark"] #fire-door-presets .fd-presets-modal__footer-copy strong {
		        color: rgba(248, 250, 252, 0.96);
		    }
		    html[data-theme="dark"] #fire-door-presets .fd-presets-modal__header-copy .text-muted,
		    html[data-theme="dark"] #fire-door-presets .fd-presets-modal__footer-copy p {
		        color: rgba(148, 163, 184, 0.88);
		    }

		    html[data-theme="dark"] #pricing-defaults.settings-modal {
		        background: rgba(15, 23, 42, 0.72);
		    }
		    html[data-theme="dark"] #pricing-defaults .settings-modal__dialog--pricing-defaults {
		        background: rgba(15, 23, 42, 0.98);
		        border-color: rgba(148, 163, 184, 0.28);
		        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
		    }
		    html[data-theme="dark"] #pricing-defaults .pricing-defaults-modal,
		    html[data-theme="dark"] #pricing-defaults .pricing-defaults-modal__header,
		    html[data-theme="dark"] #pricing-defaults .pricing-defaults-modal__footer {
		        background: rgba(15, 23, 42, 0.98);
		    }
		    html[data-theme="dark"] #pricing-defaults .pricing-defaults-modal__header,
		    html[data-theme="dark"] #pricing-defaults .pricing-defaults-modal__footer {
		        border-color: rgba(148, 163, 184, 0.22);
		    }
		    html[data-theme="dark"] #pricing-defaults .pricing-defaults-modal__scroll {
		        background: rgba(2, 6, 23, 0.72);
		    }
		    html[data-theme="dark"] #pricing-defaults .pricing-defaults-modal__header-copy .eyebrow {
		        color: #d4b03c;
		    }
		    html[data-theme="dark"] #pricing-defaults .pricing-defaults-modal__header-copy h3,
		    html[data-theme="dark"] #pricing-defaults .pricing-defaults-modal__footer-copy strong {
		        color: rgba(248, 250, 252, 0.96);
		    }
		    html[data-theme="dark"] #pricing-defaults .pricing-defaults-modal__header-copy .text-muted,
		    html[data-theme="dark"] #pricing-defaults .pricing-defaults-modal__footer-copy p {
		        color: rgba(148, 163, 184, 0.88);
		    }

		    html[data-theme="dark"] #pricing-overrides.settings-modal {
		        background: rgba(15, 23, 42, 0.72);
		    }
		    html[data-theme="dark"] #pricing-overrides .settings-modal__dialog--pricing-overrides {
		        background: rgba(15, 23, 42, 0.98);
		        border-color: rgba(148, 163, 184, 0.28);
		        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
		    }
		    html[data-theme="dark"] #pricing-overrides .pricing-overrides-modal,
		    html[data-theme="dark"] #pricing-overrides .pricing-overrides-modal__header,
		    html[data-theme="dark"] #pricing-overrides .pricing-overrides-modal__footer {
		        background: rgba(15, 23, 42, 0.98);
		    }
		    html[data-theme="dark"] #pricing-overrides .pricing-overrides-modal__header,
		    html[data-theme="dark"] #pricing-overrides .pricing-overrides-modal__footer {
		        border-color: rgba(148, 163, 184, 0.22);
		    }
		    html[data-theme="dark"] #pricing-overrides .pricing-overrides-modal__scroll {
		        background: rgba(2, 6, 23, 0.72);
		    }
		    html[data-theme="dark"] #pricing-overrides .pricing-overrides-modal__header-copy .eyebrow {
		        color: #d4b03c;
		    }
		    html[data-theme="dark"] #pricing-overrides .pricing-overrides-modal__header-copy h3,
		    html[data-theme="dark"] #pricing-overrides .pricing-overrides-modal__help > summary {
		        color: rgba(248, 250, 252, 0.96);
		    }
		    html[data-theme="dark"] #pricing-overrides .pricing-overrides-modal__header-copy .text-muted,
		    html[data-theme="dark"] #pricing-overrides .pricing-overrides-modal__lede,
		    html[data-theme="dark"] #pricing-overrides .pricing-overrides-modal__footer-note,
		    html[data-theme="dark"] #pricing-overrides .pricing-overrides-modal__help-list {
		        color: rgba(148, 163, 184, 0.88);
		    }
		    html[data-theme="dark"] #pricing-overrides .pricing-overrides-modal__help {
		        background: rgba(15, 23, 42, 0.85);
		        border-color: rgba(148, 163, 184, 0.22);
		    }
		    html[data-theme="dark"] #pricing-overrides .pricing-overrides-modal__help[open] > summary {
		        border-color: rgba(148, 163, 184, 0.22);
		    }
		    html[data-theme="dark"] #pricing-overrides .pricing-overrides-modal__filter-input {
		        background: rgba(15, 23, 42, 0.85);
		        border-color: rgba(148, 163, 184, 0.28);
		        color: rgba(248, 250, 252, 0.96);
		    }
		    html[data-theme="dark"] #pricing-overrides .pricing-overrides-modal__jump {
		        background: rgba(15, 23, 42, 0.85);
		        border-color: rgba(148, 163, 184, 0.22);
		    }
		    html[data-theme="dark"] #pricing-overrides .pricing-overrides-modal__jump-link {
		        background: rgba(2, 6, 23, 0.55);
		        border-color: rgba(148, 163, 184, 0.22);
		        color: rgba(248, 250, 252, 0.92);
		    }
		    html[data-theme="dark"] #pricing-overrides .fire-door-pricing-group {
		        background: rgba(15, 23, 42, 0.92);
		        border-color: rgba(148, 163, 184, 0.22);
		    }
		    html[data-theme="dark"] #pricing-overrides .fire-door-pricing-group[open] summary {
		        background: rgba(2, 6, 23, 0.55);
		        border-color: rgba(148, 163, 184, 0.2);
		    }
		    html[data-theme="dark"] #pricing-overrides .fire-door-pricing-group__toolbar {
		        background: rgba(15, 23, 42, 0.92);
		        border-color: rgba(148, 163, 184, 0.18);
		    }
		    html[data-theme="dark"] #pricing-overrides .fire-door-pricing-grid {
		        background: rgba(148, 163, 184, 0.2);
		    }
		    html[data-theme="dark"] #pricing-overrides .fire-door-pricing-grid__item {
		        background: rgba(15, 23, 42, 0.96);
		    }
		    html[data-theme="dark"] #pricing-overrides .fire-door-pricing-grid__item:hover,
		    html[data-theme="dark"] #pricing-overrides .fire-door-pricing-grid__item:focus-within {
		        background: rgba(30, 41, 59, 0.85);
		    }
		    html[data-theme="dark"] #pricing-overrides .fire-door-pricing-grid__title {
		        color: rgba(248, 250, 252, 0.96);
		    }

		    html[data-theme="dark"] #pricing-mapping.settings-modal {
		        background: rgba(15, 23, 42, 0.72);
		    }
		    html[data-theme="dark"] #pricing-mapping .settings-modal__dialog--pricing-mapping {
		        background: rgba(15, 23, 42, 0.98);
		        border-color: rgba(148, 163, 184, 0.28);
		        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
		    }
		    html[data-theme="dark"] #pricing-mapping .pricing-mapping-modal,
		    html[data-theme="dark"] #pricing-mapping .pricing-mapping-modal__header,
		    html[data-theme="dark"] #pricing-mapping .pricing-mapping-modal__footer {
		        background: rgba(15, 23, 42, 0.98);
		    }
		    html[data-theme="dark"] #pricing-mapping .pricing-mapping-modal__header,
		    html[data-theme="dark"] #pricing-mapping .pricing-mapping-modal__footer {
		        border-color: rgba(148, 163, 184, 0.22);
		    }
		    html[data-theme="dark"] #pricing-mapping .pricing-mapping-modal__scroll {
		        background: rgba(2, 6, 23, 0.72);
		    }
		    html[data-theme="dark"] #pricing-mapping .pricing-mapping-modal__header-copy .eyebrow {
		        color: #d4b03c;
		    }
		    html[data-theme="dark"] #pricing-mapping .pricing-mapping-modal__header-copy h3,
		    html[data-theme="dark"] #pricing-mapping .pricing-mapping-modal__help > summary {
		        color: rgba(248, 250, 252, 0.96);
		    }
		    html[data-theme="dark"] #pricing-mapping .pricing-mapping-modal__header-copy .text-muted,
		    html[data-theme="dark"] #pricing-mapping .pricing-mapping-modal__lede,
		    html[data-theme="dark"] #pricing-mapping .pricing-mapping-modal__footer-note,
		    html[data-theme="dark"] #pricing-mapping .pricing-mapping-modal__help-steps,
		    html[data-theme="dark"] #pricing-mapping .pricing-mapping-modal__help-foot {
		        color: rgba(148, 163, 184, 0.88);
		    }
		    html[data-theme="dark"] #pricing-mapping .pricing-mapping-modal__help {
		        background: rgba(15, 23, 42, 0.85);
		        border-color: rgba(148, 163, 184, 0.22);
		    }
		    html[data-theme="dark"] #pricing-mapping .pricing-mapping-modal__help[open] > summary {
		        border-color: rgba(148, 163, 184, 0.22);
		    }
		    html[data-theme="dark"] #pricing-mapping .pricing-mapping-modal__table-card.pricing-table-card {
		        background: rgba(15, 23, 42, 0.88);
		        border-color: rgba(148, 163, 184, 0.22);
		    }
		    html[data-theme="dark"] #pricing-mapping .pricing-toolbar__search input[type="search"] {
		        background: rgba(15, 23, 42, 0.85);
		        border-color: rgba(148, 163, 184, 0.28);
		        color: rgba(248, 250, 252, 0.96);
		    }

		    html[data-theme="dark"] .modal.modal--pricing-item .modal__overlay {
		        background: rgba(15, 23, 42, 0.72);
		    }
		    html[data-theme="dark"] .modal.modal--pricing-item .modal__dialog.modal__dialog--pricing-item {
		        background: rgba(15, 23, 42, 0.98);
		        border-color: rgba(148, 163, 184, 0.28);
		        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
		    }
		    html[data-theme="dark"] .modal.modal--pricing-item .pricing-item-modal,
		    html[data-theme="dark"] .modal.modal--pricing-item .pricing-item-modal__header,
		    html[data-theme="dark"] .modal.modal--pricing-item .pricing-item-modal__footer {
		        background: rgba(15, 23, 42, 0.98);
		    }
		    html[data-theme="dark"] .modal.modal--pricing-item .pricing-item-modal__header,
		    html[data-theme="dark"] .modal.modal--pricing-item .pricing-item-modal__footer {
		        border-color: rgba(148, 163, 184, 0.22);
		    }
		    html[data-theme="dark"] .modal.modal--pricing-item .pricing-item-modal__scroll {
		        background: rgba(2, 6, 23, 0.72);
		    }
		    html[data-theme="dark"] .modal.modal--pricing-item .pricing-item-modal__header-copy .eyebrow {
		        color: #d4b03c;
		    }
		    html[data-theme="dark"] .modal.modal--pricing-item .pricing-item-modal__header-copy h3 {
		        color: rgba(248, 250, 252, 0.96);
		    }
		    html[data-theme="dark"] .modal.modal--pricing-item .pricing-item-modal__subtitle,
		    html[data-theme="dark"] .modal.modal--pricing-item .pricing-item-modal__footer-note {
		        color: rgba(148, 163, 184, 0.88);
		    }
		    html[data-theme="dark"] .modal.modal--pricing-item .pricing-item-modal__section {
		        background: rgba(15, 23, 42, 0.88);
		        border-color: rgba(148, 163, 184, 0.22);
		    }
		    html[data-theme="dark"] .modal.modal--pricing-item .pricing-item-modal__section-kicker,
		    html[data-theme="dark"] .modal.modal--pricing-item .pricing-field-label {
		        color: rgba(226, 232, 240, 0.92);
		    }
		    html[data-theme="dark"] .modal.modal--pricing-item .pricing-item-modal__field :where(select, input:not([type="checkbox"])) {
		        background: rgba(15, 23, 42, 0.85);
		        border-color: rgba(148, 163, 184, 0.28);
		        color: rgba(248, 250, 252, 0.96);
		    }
		    html[data-theme="dark"] .modal.modal--pricing-item .pricing-reason-toolbar {
		        background: rgba(2, 6, 23, 0.55);
		        border-color: rgba(148, 163, 184, 0.2);
		    }
		    html[data-theme="dark"] .modal.modal--pricing-item .pricing-reason-toolbar .pricing-reason-picker__hint,
		    html[data-theme="dark"] .modal.modal--pricing-item .pricing-reason-toolbar__hint {
		        color: rgba(148, 163, 184, 0.88);
		    }
		    html[data-theme="dark"] .modal.modal--pricing-item .pricing-reason-add input {
		        background: rgba(15, 23, 42, 0.85);
		        border-color: rgba(148, 163, 184, 0.28);
		        color: rgba(248, 250, 252, 0.96);
		    }
		    html[data-theme="dark"] .modal.modal--pricing-item .pricing-reason-option {
		        background: rgba(15, 23, 42, 0.72);
		        border-color: rgba(148, 163, 184, 0.22);
		    }
		    html[data-theme="dark"] .modal.modal--pricing-item .pricing-reason-option span {
		        color: rgba(226, 232, 240, 0.9);
		    }

		    html[data-theme="dark"] :where(.email-templates-editor, .email-templates-placeholders) {
		        background: rgba(15, 23, 42, 0.65);
		        border-color: rgba(148, 163, 184, 0.22);
		    }

		    html[data-theme="dark"] .email-templates-mode,
		    html[data-theme="dark"] .email-templates-primary-type {
		        background: rgba(15, 23, 42, 0.7);
		        border-color: rgba(148, 163, 184, 0.22);
		    }

		    html[data-theme="dark"] .email-templates-mode__btn,
		    html[data-theme="dark"] .email-templates-primary-type__btn {
		        color: rgba(226, 232, 240, 0.82);
		    }

		    html[data-theme="dark"] .email-templates-mode__btn.is-active,
		    html[data-theme="dark"] .email-templates-primary-type__btn.is-active {
		        background: rgba(196, 149, 16, 0.14);
		        color: rgba(248, 250, 252, 0.96);
		        box-shadow: inset 0 0 0 1px rgba(212, 176, 60, 0.38);
		    }

		    html[data-theme="dark"] .email-templates-list,
		    html[data-theme="dark"] .email-templates-preview,
		    html[data-theme="dark"] .email-templates-default {
		        background: rgba(15, 23, 42, 0.65);
		        border-color: rgba(148, 163, 184, 0.22);
		    }

		    html[data-theme="dark"] .email-templates-search,
		    html[data-theme="dark"] .email-template-group__title,
		    html[data-theme="dark"] .email-templates-preview__controls,
		    html[data-theme="dark"] .email-templates-placeholders__header {
		        background: rgba(2, 6, 23, 0.5);
		        border-bottom-color: rgba(148, 163, 184, 0.22);
		    }

		    html[data-theme="dark"] .email-templates-filters,
		    html[data-theme="dark"] .email-templates-recent {
		        background: rgba(15, 23, 42, 0.65);
		        border-bottom-color: rgba(148, 163, 184, 0.22);
		    }

		    html[data-theme="dark"] .email-templates-filters select,
		    html[data-theme="dark"] .email-templates-search input,
		    html[data-theme="dark"] .email-templates-placeholders__search input,
		    html[data-theme="dark"] .email-templates-insert-popover__search input {
		        background: rgba(15, 23, 42, 0.7);
		        border-color: rgba(148, 163, 184, 0.28);
		        color: rgba(226, 232, 240, 0.92);
		    }

		    html[data-theme="dark"] .email-template-group__title {
		        color: rgba(148, 163, 184, 0.92);
		        border-top-color: rgba(148, 163, 184, 0.18);
		    }

		    html[data-theme="dark"] .email-template-row {
		        border-bottom-color: rgba(148, 163, 184, 0.14);
		    }

		    html[data-theme="dark"] .email-template-row:hover,
		    html[data-theme="dark"] .email-template-row.is-active {
		        background: rgba(59, 130, 246, 0.12);
		    }

		    html[data-theme="dark"] .email-template-row__title,
		    html[data-theme="dark"] .email-templates-default__label,
		    html[data-theme="dark"] .email-templates-preview__mode {
		        color: rgba(226, 232, 240, 0.92);
		    }

		    html[data-theme="dark"] .email-template-row__meta,
		    html[data-theme="dark"] .email-templates-mode-hint {
		        color: rgba(148, 163, 184, 0.92);
		    }

		    html[data-theme="dark"] .email-template-chip {
		        background: rgba(15, 23, 42, 0.7);
		        border-color: rgba(148, 163, 184, 0.22);
		        color: rgba(226, 232, 240, 0.9);
		    }

		    html[data-theme="dark"] .email-template-chip--custom {
		        background: rgba(251, 146, 60, 0.14);
		        border-color: rgba(251, 146, 60, 0.22);
		        color: #fdba74;
		    }

		    html[data-theme="dark"] .email-templates-advanced-toolbar,
		    html[data-theme="dark"] .email-templates-insert-popover,
		    html[data-theme="dark"] .email-templates-smart-blocks,
		    html[data-theme="dark"] .email-templates-editor__actions {
		        background: rgba(15, 23, 42, 0.65);
		        border-color: rgba(148, 163, 184, 0.22);
		        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
		    }
		    html[data-theme="dark"] .email-templates-editor__actions-group--meta {
		        border-right-color: rgba(148, 163, 184, 0.22);
		    }
            html[data-theme="dark"] .email-templates-mobile-bar {
                background: rgba(15, 23, 42, 0.65);
                border-color: rgba(148, 163, 184, 0.22);
            }
            html[data-theme="dark"] .email-templates-mobile-bar__copy strong {
                color: rgba(226, 232, 240, 0.92);
            }

		    html[data-theme="dark"] .email-templates-default__pre {
		        background: rgba(2, 6, 23, 0.55);
		        border-color: rgba(148, 163, 184, 0.22);
		        color: rgba(226, 232, 240, 0.92);
		    }

		    html[data-theme="dark"] .email-templates-preview__tabs {
		        border-bottom-color: rgba(148, 163, 184, 0.22);
		    }

		    html[data-theme="dark"] .email-templates-preview__tab {
		        background: rgba(15, 23, 42, 0.65);
		        border-color: rgba(148, 163, 184, 0.22);
		        color: rgba(226, 232, 240, 0.86);
		    }

		    html[data-theme="dark"] .email-templates-preview__tab.is-active {
		        border-color: rgba(212, 176, 60, 0.45);
		        background: rgba(196, 149, 16, 0.14);
		    }

		    html[data-theme="dark"] .email-templates-preview__pre {
		        background: rgba(2, 6, 23, 0.55);
		        color: rgba(226, 232, 240, 0.92);
		    }

		    html[data-theme="dark"] .pricing-panel {
		        background: rgba(15, 23, 42, 0.65);
		        border-color: rgba(148, 163, 184, 0.22);
		    }

		    html[data-theme="dark"] .pricing-steps {
		        color: rgba(226, 232, 240, 0.9);
		    }

		    html[data-theme="dark"] .pricing-table-card {
		        background: rgba(15, 23, 42, 0.65);
		        border-color: rgba(148, 163, 184, 0.22);
		        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
		    }
            html[data-theme="dark"] .pricing-mobile-card,
            html[data-theme="dark"] .pricing-reason-picker,
            html[data-theme="dark"] .pricing-reason-option,
            html[data-theme="dark"] .pricing-mobile-list__empty,
            html[data-theme="dark"] .pricing-mobile-card__meta div {
                background: rgba(15, 23, 42, 0.65);
                border-color: rgba(148, 163, 184, 0.22);
                color: rgba(226, 232, 240, 0.92);
            }
            html[data-theme="dark"] .pricing-reason-picker__hint,
            html[data-theme="dark"] .pricing-reason-picker__empty,
            html[data-theme="dark"] .pricing-mobile-card__label,
            html[data-theme="dark"] .pricing-mobile-card__meta dt {
                color: rgba(148, 163, 184, 0.92);
            }
            html[data-theme="dark"] .pricing-reason-option span,
            html[data-theme="dark"] .pricing-mobile-card__meta dd {
                color: rgba(226, 232, 240, 0.92);
            }

		    html[data-theme="dark"] .pricing-toolbar > input[type="search"] {
		        background: rgba(2, 6, 23, 0.55);
		        border-color: rgba(148, 163, 184, 0.28);
		        color: rgba(226, 232, 240, 0.92);
		    }

		    html[data-theme="dark"] .pricing-table th {
		        background: rgba(2, 6, 23, 0.65);
		        border-bottom-color: rgba(148, 163, 184, 0.22);
		        color: rgba(148, 163, 184, 0.92);
		    }

		    html[data-theme="dark"] .pricing-table th,
		    html[data-theme="dark"] .pricing-table td {
		        border-bottom-color: rgba(148, 163, 184, 0.18);
		    }

		    html[data-theme="dark"] .settings-card__header p,
		    html[data-theme="dark"] .settings-card__header .text-muted {
		        color: rgba(148, 163, 184, 0.92);
		    }

		    html[data-theme="dark"] .settings-card__header h3,
		    html[data-theme="dark"] .settings-card__header h4 {
		        color: rgba(226, 232, 240, 0.92);
		    }

		    html[data-theme="dark"] #branding.settings-modal {
		        background: rgba(15, 23, 42, 0.72);
		    }
		    html[data-theme="dark"] #branding .settings-modal__dialog--branding {
		        background: rgba(15, 23, 42, 0.98);
		        border-color: rgba(148, 163, 184, 0.28);
		        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
		    }
		    html[data-theme="dark"] #branding .branding-modal,
		    html[data-theme="dark"] #branding .branding-modal__header {
		        background: rgba(15, 23, 42, 0.98);
		        border-bottom-color: rgba(148, 163, 184, 0.22);
		    }
		    html[data-theme="dark"] #branding .branding-modal__header-copy .eyebrow {
		        color: #d4b03c;
		    }
		    html[data-theme="dark"] #branding .branding-modal__header-copy h3 {
		        color: rgba(248, 250, 252, 0.96);
		    }
		    html[data-theme="dark"] #branding .branding-modal__header-copy p {
		        color: rgba(148, 163, 184, 0.92);
		    }
		    html[data-theme="dark"] #branding .branding-modal__scroll {
		        background: rgba(2, 6, 23, 0.72);
		    }
		    html[data-theme="dark"] #branding .branding-modal__footer {
		        background: rgba(15, 23, 42, 0.98);
		        border-top-color: rgba(148, 163, 184, 0.22);
		        box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.35);
		    }
		    html[data-theme="dark"] #branding .branding-modal__footer-copy strong {
		        color: rgba(248, 250, 252, 0.96);
		    }
		    html[data-theme="dark"] #branding .branding-modal__footer-copy p {
		        color: rgba(148, 163, 184, 0.88);
		    }
		    html[data-theme="dark"] #branding .branding-tabs__hint {
		        color: rgba(148, 163, 184, 0.92);
		    }
		    html[data-theme="dark"] #branding .branding-tabs__list {
		        background: rgba(2, 6, 23, 0.65);
		        border-color: rgba(148, 163, 184, 0.25);
		        box-shadow: none;
		    }
		    html[data-theme="dark"] #branding .branding-tabs__tab {
		        color: rgba(148, 163, 184, 0.95);
		    }
		    html[data-theme="dark"] #branding .branding-tabs__tab:hover {
		        color: rgba(248, 250, 252, 0.96);
		        background: rgba(15, 23, 42, 0.85);
		    }
		    html[data-theme="dark"] #branding .branding-tabs__tab.is-active,
		    html[data-theme="dark"] #branding .branding-tabs__tab[aria-selected='true'] {
		        color: rgba(248, 250, 252, 0.96);
		        background: rgba(196, 149, 16, 0.14);
		        box-shadow: inset 0 0 0 1px rgba(212, 176, 60, 0.38);
		    }

		    html[data-theme="dark"] #branding .profile-card {
		        background: rgba(15, 23, 42, 0.72);
		        border-color: rgba(148, 163, 184, 0.22);
		        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
		    }
		    html[data-theme="dark"] #branding .profile-card__hint {
		        color: rgba(148, 163, 184, 0.92);
		    }
		    html[data-theme="dark"] #branding .profile-card__label {
		        color: rgba(248, 250, 252, 0.96);
		    }
		    html[data-theme="dark"] #branding .profile-card__tips {
		        color: rgba(148, 163, 184, 0.85);
		    }

		    html[data-theme="dark"] .email-templates-placeholders__header {
		        background: rgba(2, 6, 23, 0.5);
		        border-bottom-color: rgba(148, 163, 184, 0.22);
		    }

	    html[data-theme="dark"] .email-placeholder {
	        background: rgba(2, 6, 23, 0.55);
	        border-color: rgba(148, 163, 184, 0.32);
	        color: var(--text);
	    }

	    html[data-theme="dark"] .email-placeholder:hover {
	        border-color: rgba(226, 232, 240, 0.6);
	    }

	    html[data-theme="dark"] .email-placeholder-group,
	    html[data-theme="dark"] .email-placeholder-row__meta {
	        color: rgba(148, 163, 184, 0.92);
	    }

	    html[data-theme="dark"] .email-placeholder-copy {
	        background: rgba(15, 23, 42, 0.7);
	        border-color: rgba(148, 163, 184, 0.28);
	        color: rgba(248, 250, 252, 0.96);
	    }

		    html[data-theme="dark"] .email-placeholder-copy:hover {
		        border-color: rgba(226, 232, 240, 0.6);
		    }

		    html[data-theme="dark"] :where(
		        .profile-card,
		        .component-panel,
		        .preset-panel,
		        .preset-form-card
		    ) {
		        background: rgba(15, 23, 42, 0.65);
		        border-color: rgba(148, 163, 184, 0.22);
		        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
		    }

		    html[data-theme="dark"] .profile-card__hint,
		    html[data-theme="dark"] .preset-form-card__summary {
		        color: rgba(148, 163, 184, 0.92);
		    }

		    html[data-theme="dark"] .profile-card__label,
		    html[data-theme="dark"] .preset-form-card__category {
		        color: rgba(226, 232, 240, 0.92);
		    }

		    html[data-theme="dark"] .preset-panel__footer {
		        border-color: rgba(148, 163, 184, 0.22);
		    }

		    html[data-theme="dark"] .preset-form-card__toggle {
		        background: rgba(2, 6, 23, 0.65);
		        border-color: rgba(148, 163, 184, 0.22);
		        color: rgba(226, 232, 240, 0.86);
		    }

		    html[data-theme="dark"] .settings-form__actions {
		        background: rgba(2, 6, 23, 0.78);
		        border-color: rgba(148, 163, 184, 0.22);
		        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
		    }

		    html[data-theme="dark"] .settings-form__actions-copy strong {
		        color: rgba(226, 232, 240, 0.92);
		    }

		    html[data-theme="dark"] .settings-form__actions-copy p {
		        color: rgba(148, 163, 184, 0.92);
		    }


/* ==========================================================================
   Dark mode mobile content overrides
   (Bottom-sheet chrome — border-radius, border, shadow — is now handled by
    the canonical .modal--sheet rule in style.css for both light and dark.)
   ========================================================================== */
@media (max-width: 900px) {
    html[data-theme="dark"] .pricing-mobile-card {
        background: rgba(15, 23, 42, 0.65);
        border-color: rgba(148, 163, 184, 0.22);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
    }
    html[data-theme="dark"] .pricing-mobile-card__label,
    html[data-theme="dark"] .pricing-mobile-card__meta dt {
        color: rgba(148, 163, 184, 0.86);
    }
    html[data-theme="dark"] .pricing-mobile-card__meta dd {
        color: rgba(226, 232, 240, 0.96);
    }
    html[data-theme="dark"] .pricing-mobile-card__meta div {
        background: rgba(2, 6, 23, 0.55);
    }
    html[data-theme="dark"] .pricing-mobile-list__empty {
        background: rgba(2, 6, 23, 0.55);
        border-color: rgba(148, 163, 184, 0.22);
        color: rgba(148, 163, 184, 0.86);
    }
    html[data-theme="dark"] .email-templates-mobile-bar {
        background: rgba(15, 23, 42, 0.55);
        border-color: rgba(148, 163, 184, 0.22);
    }
    html[data-theme="dark"] .email-templates-mobile-bar__copy strong {
        color: rgba(226, 232, 240, 0.96);
    }
}

/* ============================================================================
   Settings canonical modal primitives — `.set-modal*`
   Mirrors the .qbm-modal / .ivm-modal language used by quotes/invoices so that
   every settings modal has identical input fields, label sizing, footer
   buttons, mobile bottom-sheet behaviour and filter rail/tray pattern.
   All values lifted from public/assets/css/quotes.css `.qbm-modal` block.
   ============================================================================ */

.set-modal {
    --set-accent: var(--accent, #c49510);
    --set-accent-soft: var(--accent-soft, rgba(196, 149, 16, 0.1));
    --set-accent-strong: rgba(196, 149, 16, 0.34);
    --set-ink: var(--ink, #1a1815);
    --set-ink-muted: var(--ink-3, #6b6458);
    --set-ink-faint: var(--ink-4, #9a9188);
    --set-border: var(--rule, rgba(26, 24, 21, 0.08));
    --set-border-rule: rgba(26, 24, 21, 0.07);
    --set-border-input: rgba(26, 24, 21, 0.14);
    --set-bg-warm: #f7f5f0;
    --set-surface: var(--surface-card, #ffffff);
    --set-surface-soft: #fcfaf4;

    /* --ipi-* token aliases so canonical primitives (.ipi-tabs, .ipi-tab,
       .ipi-filter-search, .ipi-filter-select) render correctly inside the
       modal. Without these the primitives reference undefined variables and
       fall back to transparent/broken styling. */
    --ipi-bg: var(--canvas, #f7f5f0);
    --ipi-bg-inset: var(--surface-inset, #edeae3);
    --ipi-bg-card: var(--surface-card, #ffffff);
    --ipi-bg-hover: rgba(26, 24, 21, 0.04);
    --ipi-rule: var(--rule, rgba(26, 24, 21, 0.08));
    --ipi-rule-h: rgba(26, 24, 21, 0.11);
    --ipi-ink: var(--ink, #1a1815);
    --ipi-ink-2: #3d3a34;
    --ipi-ink-3: var(--ink-3, #6b6458);
    --ipi-ink-4: var(--ink-4, #9a9188);
    --ipi-accent: var(--accent, #c49510);
    --ipi-accent-bg: rgba(196, 149, 16, 0.08);
    --ipi-accent-border: rgba(196, 149, 16, 0.34);
    --ipi-shadow-sm: 0 1px 3px rgba(26, 24, 21, 0.06), 0 1px 2px rgba(26, 24, 21, 0.04);
    --ipi-shadow-card: 0 1px 4px rgba(26, 24, 21, 0.06), 0 0 0 1px rgba(26, 24, 21, 0.05);
}

.set-modal .set-modal__dialog {
    width: min(880px, calc(100vw - 32px));
    height: min(85vh, 760px);
    max-height: min(90vh, 960px);
    min-height: min(60vh, 520px);
    border-radius: 16px;
    border: 1px solid var(--set-border);
    background: var(--set-surface);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.18),
        0 4px 16px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.set-modal .set-modal__dialog--narrow {
    width: min(560px, calc(100vw - 32px));
    height: auto;
    min-height: min(50vh, 380px);
}
.set-modal .set-modal__dialog--wide {
    width: min(1280px, calc(100vw - 32px));
}

/* Forms that wrap modal__body + modal__footer must flex so the body's
   `flex: 1; overflow-y: auto` rule has a constrained parent. Without this
   the body never scrolls and the dialog resizes to fit content (causing
   tab-switch jumps in the branding modal). */
.set-modal form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    width: 100%;
}

.set-modal .set-modal__header {
    padding: 20px 22px 16px;
    border-bottom: 1px solid var(--set-border-rule);
    flex-shrink: 0;
    background: var(--set-surface);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.set-modal .set-modal__header > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}

.set-modal .set-modal__header-tools {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.set-modal .set-modal__header-tools .modal__close {
    margin-left: 4px;
}

.set-modal .set-modal__header .eyebrow {
    margin: 0;
    color: var(--set-accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.set-modal .set-modal__header .modal__title,
.set-modal .set-modal__header h3 {
    margin: 0;
    font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
    font-size: 1.28rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--set-ink);
}

.set-modal .set-modal__header .text-muted,
.set-modal .set-modal__header > div > p:not(.eyebrow) {
    margin: 4px 0 0;
    max-width: 60ch;
    color: var(--set-ink-muted);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
}

.set-modal .modal__close {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--surface-inset, #edeae3);
    border: none;
    color: var(--set-ink-muted);
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.set-modal .modal__close:hover {
    background: rgba(26, 24, 21, 0.1);
    color: var(--set-ink);
}

.set-modal .set-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 20px 22px 22px;
    background: var(--set-bg-warm);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.set-modal .set-modal__footer {
    padding: 13px 22px 14px;
    border-top: 1px solid var(--set-border-rule);
    background: var(--set-surface);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.set-modal .set-modal__footer > .set-modal__footer-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.set-modal .set-modal__footer-copy strong {
    font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
    font-size: 13px;
    font-weight: 700;
    color: var(--set-ink);
}

.set-modal .set-modal__footer-copy p {
    margin: 0;
    font-size: 12px;
    color: var(--set-ink-faint);
}

.set-modal .set-modal__footer-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.set-modal .set-modal__footer .btn {
    min-height: 40px;
    padding: 8px 18px;
}

/* --------------------------------------------------------------------------
   .set-modal--danger — destructive action modifier (Pricing delete etc.)
   `!important` on color required to beat canonical eyebrow rule per css-standards gotcha #10.
   -------------------------------------------------------------------------- */
.modal.set-modal.set-modal--danger .set-modal__header .eyebrow {
    color: var(--danger, #b03030) !important;
}

.modal.set-modal.set-modal--danger .set-modal__footer-actions .btn-danger {
    background: var(--danger, #b03030);
    color: #ffffff;
    border: none;
    font-weight: 600;
}

.modal.set-modal.set-modal--danger .set-modal__footer-actions .btn-danger:hover {
    background: #952828;
}

html[data-theme="dark"] .modal.set-modal.set-modal--danger .set-modal__header .eyebrow {
    color: #f87171 !important;
}

html[data-theme="dark"] .modal.set-modal.set-modal--danger .set-modal__footer-actions .btn-danger {
    background: #dc2626;
}

html[data-theme="dark"] .modal.set-modal.set-modal--danger .set-modal__footer-actions .btn-danger:hover {
    background: #b91c1c;
}

/* Cards/sections inside the body */
.set-modal .set-section {
    border: 1px solid var(--set-border);
    border-radius: 10px;
    padding: 16px 18px;
    background: var(--set-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.set-modal .set-section__header {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.set-modal .set-section__header--row {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.set-modal .set-section__eyebrow {
    margin: 0;
    color: var(--set-accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.set-modal .set-section__title {
    margin: 0;
    font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--set-ink);
}

.set-modal .set-section__hint {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--set-ink-muted);
    max-width: 60ch;
}

/* Form grid + field wrappers */
.set-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

.set-form-grid--single { grid-template-columns: 1fr; }
.set-form-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.set-modal .set-field,
.set-modal .set-form-grid > label,
.set-modal .set-form-grid > .set-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--set-ink-faint);
    margin: 0;
}

.set-modal .set-field--full,
.set-modal .set-form-grid > label.set-field--full,
.set-modal .set-form-grid > .set-field--full { grid-column: 1 / -1; }

.set-modal .set-field > span,
.set-modal .set-form-grid > label > span:first-child {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--set-ink-faint);
}

.set-modal .set-field small,
.set-modal .set-field .form-hint,
.set-modal .set-form-grid > label small,
.set-modal .set-form-grid > label .form-hint,
.set-modal .form-hint {
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    font-size: 12px;
    color: var(--set-ink-faint);
    line-height: 1.45;
}

/* Form controls — inputs, selects, textareas */
.set-modal :where(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"], input[type="date"], input[type="time"], select, textarea) {
    min-height: 40px;
    padding: 10px 13px;
    border-radius: 9px;
    border: 1px solid var(--set-border-input);
    background: var(--set-surface);
    font-family: var(--font-sans, inherit);
    font-size: 13.5px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--set-ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
    width: 100%;
}

.set-modal :where(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"], select, textarea):focus {
    border-color: var(--set-accent-strong);
    box-shadow: 0 0 0 3px var(--set-accent-soft);
    outline: none;
}

.set-modal textarea {
    min-height: 72px;
    resize: vertical;
    font-family: var(--font-sans, inherit);
    line-height: 1.5;
}

.set-modal select {
    padding-right: 34px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%239a9188' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    cursor: pointer;
}

.set-modal select[multiple] {
    background-image: none;
    padding-right: 13px;
    min-height: 96px;
}

.set-modal input[type="file"] {
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 9px;
    border: 1px dashed var(--set-border-input);
    background: var(--set-surface-soft);
    font-size: 12px;
    color: var(--set-ink-muted);
    cursor: pointer;
    width: 100%;
}

/* Toggle / switch — match invoices/quotes pattern */
.set-modal .set-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--set-border);
    border-radius: 10px;
    background: var(--set-surface-soft);
    cursor: pointer;
    text-transform: none;
    letter-spacing: normal;
    font-size: 13px;
    font-weight: 500;
    color: var(--set-ink);
}

.set-modal .set-toggle input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: rgba(26, 24, 21, 0.18);
    position: relative;
    cursor: pointer;
    transition: background 0.18s ease;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    border: none;
    min-height: 0;
}

.set-modal .set-toggle input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    transition: transform 0.18s ease;
}

.set-modal .set-toggle input[type="checkbox"]:checked {
    background: var(--set-accent);
}

.set-modal .set-toggle input[type="checkbox"]:checked::after {
    transform: translateX(16px);
}

.set-modal .set-toggle input[type="checkbox"]:focus-visible {
    box-shadow: 0 0 0 3px var(--set-accent-soft);
}

/* Filter rail + tray (in-modal collapsible filters) */
.set-filter-rail {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 0;
    background: transparent;
}

.set-filter-rail__inline {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.set-filter-rail--inline-mobile .ipi-filter-search {
    flex: 1 1 auto;
}

.set-filter-rail__inline-item {
    display: flex;
    align-items: center;
    flex: 1 1 200px;
    min-width: 0;
}

.set-filter-rail__inline-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.set-filter-railbtn {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 40px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--set-border);
    background: var(--set-surface);
    color: var(--set-ink);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(26, 24, 21, 0.06));
    transition: background 0.15s ease, border-color 0.15s ease;
}

.set-filter-railbtn:hover {
    background: var(--set-surface-soft);
    border-color: var(--set-accent-strong);
}

.set-filter-railbtn__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--set-accent-soft);
    color: var(--set-accent);
    font-size: 10px;
    font-weight: 700;
}

.set-filter-railbtn__count:empty { display: none; }

.set-filter-tray {
    display: contents;
}

/* Pricing prefix input */
.set-modal .set-input-prefix {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--set-border-input);
    border-radius: 9px;
    background: var(--set-surface);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.set-modal .set-input-prefix:focus-within {
    border-color: var(--set-accent-strong);
    box-shadow: 0 0 0 3px var(--set-accent-soft);
}

.set-modal .set-input-prefix > span {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    background: var(--set-surface-soft);
    color: var(--set-ink-muted);
    font-size: 13px;
    font-weight: 600;
    border-right: 1px solid var(--set-border);
    text-transform: none;
    letter-spacing: normal;
}

.set-modal .set-input-prefix > input {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    flex: 1 1 auto;
    min-width: 0;
}

.set-modal .set-input-prefix > input:focus {
    box-shadow: none;
    border: none;
}

/* Helper text variants used in inner content */
.set-modal .set-modal__lede {
    margin: 0 0 4px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--set-ink-muted);
    max-width: 70ch;
}

.set-modal .set-meta-strong { font-weight: 700; color: var(--set-ink); }

/* Buttons inside modals — match canonical .btn from style.css; make sure
   pricing/header secondary buttons render at parity with quotes/invoices */
.set-modal .set-modal__header .btn {
    min-height: 36px;
    padding: 7px 14px;
    font-size: 12.5px;
}

/* Dark mode */
html[data-theme="dark"] .set-modal {
    --set-surface: #0f172a;
    --set-surface-soft: rgba(15, 23, 42, 0.6);
    --set-bg-warm: #0b1220;
    --set-ink: #e2e8f0;
    --set-ink-muted: #94a3b8;
    --set-ink-faint: #94a3b8;
    --set-border: rgba(148, 163, 184, 0.22);
    --set-border-rule: rgba(148, 163, 184, 0.18);
    --set-border-input: rgba(148, 163, 184, 0.28);
    --set-accent: #e3b008;
    --set-accent-soft: rgba(227, 176, 8, 0.18);
    --set-accent-strong: rgba(244, 217, 139, 0.5);

    /* Dark-mode --ipi-* token overrides */
    --ipi-bg: rgba(15, 23, 42, 0.55);
    --ipi-bg-inset: rgba(15, 23, 42, 0.62);
    --ipi-bg-card: rgba(15, 23, 42, 0.7);
    --ipi-bg-hover: rgba(148, 163, 184, 0.08);
    --ipi-rule: rgba(148, 163, 184, 0.22);
    --ipi-rule-h: rgba(148, 163, 184, 0.28);
    --ipi-ink: #e2e8f0;
    --ipi-ink-2: #cbd5e1;
    --ipi-ink-3: #94a3b8;
    --ipi-ink-4: #94a3b8;
    --ipi-accent: #e3b008;
    --ipi-accent-bg: rgba(227, 176, 8, 0.18);
    --ipi-accent-border: rgba(244, 217, 139, 0.5);
    --ipi-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --ipi-shadow-card: 0 1px 4px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(148, 163, 184, 0.1);
}

html[data-theme="dark"] .set-modal .set-modal__dialog {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] .set-modal .modal__close {
    background: rgba(148, 163, 184, 0.16);
    color: rgba(226, 232, 240, 0.92);
}

html[data-theme="dark"] .set-modal .modal__close:hover {
    background: rgba(148, 163, 184, 0.28);
}

html[data-theme="dark"] .set-modal .set-section {
    box-shadow: none;
}

/* Mobile modal behaviour (≤900px) — canonical + gold-spec in style.css handle
   dialog chrome, header, body/footer padding, footer-copy. Settings-specific
   content layout below. */
@media (max-width: 900px) {
    .set-modal .set-modal__body {
        gap: 12px;
    }

    .set-modal .set-section {
        padding: 12px 14px;
        border-radius: 8px;
    }

    .set-modal .set-modal__footer-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }

    .set-modal .set-modal__footer-actions > *:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .set-modal .set-modal__footer-actions .btn {
        width: 100%;
        justify-content: center;
        min-height: 44px;
        font-size: 13px;
        padding-left: 6px;
        padding-right: 6px;
    }

    .set-form-grid,
    .set-form-grid--three { grid-template-columns: 1fr; }

    /* Filter rail collapses to a single button + tray */
    .set-filter-rail {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .set-filter-rail__inline { display: none; }

    .set-filter-railbtn { display: inline-flex; }

    /* `.set-filter-rail--inline-mobile` opts out of the tray pattern. Used by
       pricing-overrides and pricing-mapping where the search field and action
       buttons must remain visible on mobile (no tray, no rail button). */
    .set-modal .set-filter-rail--inline-mobile {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .set-modal .set-filter-rail--inline-mobile .set-filter-rail__inline {
        display: flex;
        width: 100%;
    }

    .set-modal .set-filter-rail--inline-mobile .set-filter-railbtn {
        display: none;
    }

    .set-modal .set-filter-rail--inline-mobile .ipi-filter-search {
        width: 100%;
        min-height: 44px;
    }

    .set-modal .set-filter-tray {
        display: none;
        flex-direction: column;
        gap: 10px;
        padding: 12px 14px;
        background: var(--set-surface);
        border: 1px solid var(--set-border);
        border-radius: 10px;
    }

    .set-modal .set-filter-tray.is-open {
        display: flex;
    }

    .set-modal .set-filter-tray > * {
        width: 100%;
    }

    /* Branding tabs (.ipi-tabs swap) — allow horizontal scroll */
    .set-modal .ipi-tabs {
        display: flex;
        width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .set-modal .ipi-tabs::-webkit-scrollbar { display: none; }

    .set-modal .ipi-tab {
        flex-shrink: 0;
    }
}

/* ============================================================================
   Polish pass — additional primitives needed by the modal layout fixes
   ============================================================================ */

/* Two-column section grid (used by branding "Organisation & logo" tab and any
   other place where two .set-section cards should sit side-by-side on desktop) */
.set-modal .set-section-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
}

@media (min-width: 768px) {
    .set-modal .set-section-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.set-modal .set-section-grid > .set-section {
    height: 100%;
}

/* Brand logo preview — fill its column instead of squeezing to fit-content */
.set-modal .brand-logo-preview {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    align-items: flex-start;
    gap: 8px;
    padding: 14px;
    background: var(--set-surface-soft);
    border: 1px solid var(--set-border);
    border-radius: 9px;
}

.set-modal .brand-logo-preview img {
    max-width: 200px;
    max-height: 120px;
    object-fit: contain;
}

/* Header help icon (used by pricing-overrides and pricing-mapping for the
   tips/CSV-help disclosure that used to live inline) */
.set-modal .set-modal__header-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: none;
    background: var(--surface-inset, #edeae3);
    color: var(--set-ink-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.set-modal .set-modal__header-help:hover,
.set-modal .set-modal__header-help[aria-expanded="true"] {
    background: rgba(196, 149, 16, 0.12);
    color: var(--set-accent);
}

.set-modal .set-modal__header-help svg {
    width: 16px;
    height: 16px;
}

/* Inline help disclosure panel that toggles open from the header help icon */
.set-modal .set-modal__help-panel {
    border: 1px solid var(--set-border);
    border-radius: 10px;
    padding: 14px 16px;
    background: var(--set-surface-soft);
    margin: 0;
}

.set-modal .set-modal__help-panel ul,
.set-modal .set-modal__help-panel ol {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--set-ink-muted);
    font-size: 13px;
    line-height: 1.5;
}

.set-modal .set-modal__help-panel p {
    margin: 8px 0 0;
    color: var(--set-ink-faint);
    font-size: 12px;
}

/* Defensive overrides for canonical primitives that share input elements with
   `.set-modal :where(input, ...)`. The cascade SHOULD already favour these
   primitives via specificity, but inspections_shell.css's `.ipi-filter-search
   input` rule doesn't reset every property the .set-modal rule sets (e.g.
   border-radius, focus box-shadow). Make those resets explicit so the search
   input renders as a borderless inline pill, not a boxed input with a gold
   focus ring inside the pill border. */
.set-modal .ipi-filter-search input {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 1px 0;
    min-height: 20px;
    font-size: 12.5px;
    color: var(--set-ink);
    transition: none;
}

.set-modal .ipi-filter-search input:focus,
.set-modal .ipi-filter-search input:focus-visible {
    border: none;
    box-shadow: none;
    outline: none;
}

.set-modal .ipi-filter-search:focus-within {
    border-color: var(--set-accent-strong);
    box-shadow: 0 0 0 3px var(--set-accent-soft);
}

/* Preset card — uses .set-section as the base with a custom head layout */
.set-modal .preset-form-card .preset-form-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.set-modal .preset-form-card .preset-form-card__title {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}

.set-modal .preset-form-card .preset-form-card__title .set-section__title {
    font-size: 1.05rem;
}

.set-modal .preset-form-card .preset-form-card__controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.set-modal .preset-form-card .preset-form-card__remove {
    position: static;
    top: auto;
    right: auto;
    width: 32px;
    padding: 0;
    font-size: 18px;
    line-height: 1;
}

.set-modal .preset-form-card .preset-form-card__body {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--set-border);
}

.set-modal .preset-form-card--template {
    display: none;
}

/* Pricing-overrides "Jump to group" — collapsed disclosure summary styling */
.set-modal .pricing-overrides-modal__jump-details {
    border: 1px solid var(--set-border);
    border-radius: 9px;
    background: var(--set-surface);
    overflow: hidden;
}

.set-modal .pricing-overrides-modal__jump-details > summary.pricing-overrides-modal__jump-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--set-ink);
}

.set-modal .pricing-overrides-modal__jump-details > summary::-webkit-details-marker { display: none; }
.set-modal .pricing-overrides-modal__jump-details > summary::marker { content: ''; }

.set-modal .pricing-overrides-modal__jump-details > summary svg {
    transition: transform 0.18s ease;
    color: var(--set-ink-faint);
    flex-shrink: 0;
}

.set-modal .pricing-overrides-modal__jump-details[open] > summary svg {
    transform: rotate(180deg);
}

.set-modal .pricing-overrides-modal__jump-details > .pricing-overrides-modal__jump-links {
    padding: 10px 14px 12px;
    border-top: 1px solid var(--set-border);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Filter-rail button groups — visually group related actions in pricing-mapping */
.set-modal .set-filter-rail__btn-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.set-modal .set-filter-rail__inline-actions > .set-filter-rail__btn-group + .set-filter-rail__btn-group {
    margin-left: 8px;
    padding-left: 12px;
    border-left: 1px solid var(--set-border);
}

/* Pricing-mapping table card-ification at mobile (single source of truth —
   replaces the duplicate .pricing-mobile-card list) */
@media (max-width: 900px) {
    .set-modal .set-modal__header-help {
        width: 32px;
        height: 32px;
    }

    .set-modal .set-filter-rail__inline-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }

    .set-modal .set-filter-rail__btn-group {
        display: contents;
    }

    .set-modal .set-filter-rail__inline-actions > .set-filter-rail__btn-group + .set-filter-rail__btn-group {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
    }

    .set-modal .set-filter-rail__inline-actions .btn,
    .set-modal .set-filter-rail__inline-actions > label.btn {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }

    /* Table card-ification — applies to .pricing-table inside set-modal */
    .set-modal .pricing-table {
        display: block;
        width: 100%;
    }

    .set-modal .pricing-table thead {
        position: absolute;
        left: -9999px;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .set-modal .pricing-table tbody {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .set-modal .pricing-table tr {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 12px 14px;
        background: var(--set-surface);
        border: 1px solid var(--set-border);
        border-radius: 10px;
    }

    .set-modal .pricing-table td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        padding: 4px 0;
        border: none;
        font-size: 13px;
        color: var(--set-ink);
    }

    .set-modal .pricing-table td::before {
        content: attr(data-label);
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--set-ink-faint);
        flex-shrink: 0;
    }

    .set-modal .pricing-table td > strong {
        text-align: right;
    }

    .set-modal .pricing-table td > p {
        margin: 0;
        font-size: 11px;
        color: var(--set-ink-faint);
    }

    .set-modal .pricing-table td.pricing-table__actions {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 6px;
        padding-top: 8px;
        border-top: 1px solid var(--set-border);
    }

    .set-modal .pricing-table td.pricing-table__actions::before {
        display: none;
    }

    .set-modal .pricing-table td.pricing-table__actions .btn {
        flex: 1 1 auto;
        min-height: 38px;
        justify-content: center;
    }

    /* Override the legacy `.pricing-table-wrapper { display: none }` rule
       (settings-shell.css line ~2545) which hid the table on mobile because
       the old layout used a separate `.pricing-mobile-list`. The new modal
       relies on CSS card-ification of the same table, so the wrapper must
       remain visible. */
    .set-modal .pricing-table-wrapper {
        display: block;
        overflow: visible;
    }

    /* Email-templates mobile header restructure: title row → tab row */
    .set-modal#email-templates .set-modal__header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding-right: 56px;
        position: relative;
    }

    .set-modal#email-templates .set-modal__header > div:first-child {
        padding-right: 0;
    }

    .set-modal#email-templates .set-modal__header-tools {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        width: 100%;
    }

    .set-modal#email-templates .set-modal__header-tools .ipi-tabs {
        flex: 1 1 auto;
        display: flex;
        width: auto;
    }

    .set-modal#email-templates .set-modal__header-tools .ipi-tab {
        flex: 1 1 50%;
        text-align: center;
        justify-content: center;
    }

    .set-modal#email-templates .set-modal__header-tools .modal__close {
        position: absolute;
        top: calc(14px + env(safe-area-inset-top, 0px));
        right: 16px;
    }
}