/* Modern editor layer
   Keeps the existing editor markup and interactions intact while giving the
   working area one consistent, quiet visual language inspired by the supplied
   reference: soft gray canvas, white cards, restrained borders and clear
   focus states. */
:root {
  --modern-bg: #f3f3f6;
  --modern-surface: #ffffff;
  --modern-surface-2: #fafafd;
  --modern-line: #e5e5eb;
  --modern-line-strong: #d8d8e2;
  --modern-text: #18181d;
  --modern-muted: #747582;
  --modern-purple: #5a3bc4;
  --modern-purple-dark: #362184;
  --modern-purple-soft: #eee9ff;
  --modern-shadow: 0 18px 42px rgba(29, 29, 37, .07), 0 2px 8px rgba(29, 29, 37, .035);
  --modern-focus: 0 0 0 3px rgba(90, 59, 196, .15);
}

/* The sidebar remains the existing navigation surface. The workspace gets a
   dedicated canvas so the editor cards read as a clear, calm workbench. */
.workspace {
  min-width: 0;
  background: var(--modern-bg);
  color: var(--modern-text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, "Segoe UI", sans-serif;
}

.topbar {
  min-height: 78px;
  padding: 14px 22px;
  background: rgba(255,255,255,.9);
  border-bottom: 1px solid var(--modern-line);
  box-shadow: 0 5px 20px rgba(29,29,37,.04);
  backdrop-filter: blur(18px);
}

.topbar h1 {
  color: var(--modern-text);
  font-size: 25px;
  font-weight: 750;
  letter-spacing: -.035em;
}

.topbar-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.topbar-title-row h1 {
  min-width: 0;
  margin: 0;
}

.save-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid #cfe8dc;
  border-radius: 999px;
  background: #f2fbf6;
  color: #23664c;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.save-status.is-dirty {
  border-color: #ead8b9;
  background: #fff8eb;
  color: #8a5b19;
}

.save-status[hidden],
#toolbar #saveButton[hidden] {
  display: none;
}

body[data-screen="editor"] #toolbar .save-action.is-dirty {
  background: #2d6b55;
  border-color: #2d6b55;
  box-shadow: 0 6px 14px rgba(45, 107, 85, .2);
}

body[data-screen="editor"] #toolbar .save-action.is-dirty:hover {
  background: #245844;
  border-color: #245844;
  box-shadow: 0 7px 16px rgba(45, 107, 85, .24);
}

.eyebrow {
  color: var(--modern-purple);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .11em;
}

.toolbar {
  padding: 6px;
  border: 1px solid var(--modern-line);
  border-radius: 16px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 5px 18px rgba(29,29,37,.05);
}

.view {
  padding: 18px 20px 28px;
}

.content-grid {
  gap: 12px;
  grid-template-columns: minmax(520px, var(--editor-column-width)) 12px minmax(360px, 1fr);
}

.model-column {
  gap: 12px;
  padding: 0 4px 28px 0;
}

.editor-tabs {
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--modern-line);
  border-radius: 15px;
  background: rgba(255,255,255,.9);
  box-shadow: var(--modern-shadow);
  backdrop-filter: blur(14px);
}

.editor-tabs button {
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #777986;
  font-size: 12px;
  font-weight: 750;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}

.editor-tabs button:hover {
  background: #f5f4f9;
  color: var(--modern-text);
}

.editor-tabs button.active {
  background: var(--modern-purple);
  color: #fff;
  box-shadow: 0 6px 16px rgba(90,59,196,.2);
}

.panel,
.editor-page-card,
.table-editor,
.scoped-image-editor,
.column-editors article,
.staffel-group-editor,
.general-info-editor,
.image-bank-upload,
.image-bank-card,
.sheet-card,
.modal-card {
  border: 1px solid var(--modern-line);
  border-radius: 16px;
  background: var(--modern-surface);
  box-shadow: var(--modern-shadow);
}

.panel {
  padding: 18px;
}

.panel-heading {
  margin: -2px 0 15px;
  padding-bottom: 12px;
  border-bottom: 1px solid #efeff3;
}

.panel-heading h2 {
  color: var(--modern-text);
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -.015em;
}

.panel-heading span {
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--modern-purple-soft);
  color: var(--modern-purple);
  font-size: 11px;
  font-weight: 750;
}

.editor-page-card {
  overflow: hidden;
}

.editor-page-card.product-editor {
  border-left: 0;
}

.editor-page-card.product-editor::before {
  width: 4px;
  background: linear-gradient(180deg, var(--modern-purple), var(--modern-purple-dark));
  opacity: 0;
  transition: opacity .16s ease;
}

.editor-page-card.product-editor.is-editor-active::before,
.editor-page-card.product-editor:focus-within::before {
  opacity: 1;
}

.editor-page-heading {
  margin: -18px -18px 16px;
  padding: 14px 16px 14px 20px;
  background: linear-gradient(180deg, #fff, #fafafd);
  border-bottom: 1px solid #efeff3;
}

/* A textarea is taller than a single-line input; keep the following field at
   the same visual distance instead of letting its label move too close. */
.editor-page-card > .field:not(:last-child) {
  margin-bottom: 14px;
}

/* Keep the slide-level choices visually separate from the table editors.
   This gives the page a clear setup area before the first editable table. */
.product-editor-setup {
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid #e4e1ee;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfaff 0%, #f7f6fb 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.product-editor-setup > .field-grid:first-child {
  margin-top: 0;
}

.product-editor-setup > .column-editor-block:last-child {
  margin-bottom: 0;
}

.product-editor-setup + .table-editor,
.product-editor-setup + .empty-editor-note {
  margin-top: 0;
}

/* Keep the general image section in the same quiet setup tone as product settings. */
.general-visual-editor {
  border-color: #e4e1ee;
  background: linear-gradient(180deg, #fbfaff 0%, #f7f6fb 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.general-visual-editor .field select {
  height: 38px;
  min-height: 38px;
  box-sizing: border-box;
}

.asset-placeholder-visual .ui-icon {
  width: 24px;
  height: 24px;
}

/* Keep the outer square, but remove the nested tile behind the icon. */
.asset-thumb:has(.asset-placeholder-visual) .asset-placeholder-visual {
  background: transparent;
}

.product-image-quick-thumb .asset-placeholder-visual .ui-icon {
  width: 20px;
  height: 20px;
}

.editor-page-title h2 {
  color: var(--modern-text);
  font-size: 16px;
  letter-spacing: -.02em;
}

.editor-page-title small {
  color: var(--modern-muted);
}

.page-collapse-button,
.page-drag-handle,
.page-duplicate-button,
.page-delete-button {
  border-radius: 10px;
  border-color: var(--modern-line);
  background: var(--modern-surface-2);
}

.page-delete-button {
  color: #b44f58;
  border-color: var(--modern-line-strong);
  background: #fff;
}

.page-delete-button:hover,
.page-delete-button:focus-visible {
  border-color: #e3b7b8;
  background: #fff;
  color: #b44f58;
}

.field-grid {
  gap: 14px;
}

.field {
  gap: 6px;
}

.field span,
.mini-edit-table caption,
.row-index-label {
  color: #6e7180;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .015em;
}

.field input,
.field textarea,
.field select,
.sheet-card select,
.sheet-card input,
.staffel-values-grid input,
.mini-edit-table input,
.mini-edit-table select {
  min-height: 38px;
  border: 1px solid var(--modern-line-strong);
  border-radius: 10px;
  background: #fcfcfe;
  color: var(--modern-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

/* Keep regular editor controls on one consistent baseline across every panel. */
.field input,
.field select {
  height: 38px;
  box-sizing: border-box;
}

.field input:hover,
.field textarea:hover,
.field select:hover,
.sheet-card input:hover,
.sheet-card select:hover {
  border-color: #c8c8d5;
  background: #fff;
}

.field input:focus,
.field textarea:focus,
.field select:focus,
.sheet-card select:focus,
.sheet-card input:focus,
.staffel-values-grid input:focus,
.mini-edit-table input:focus,
.mini-edit-table select:focus {
  border-color: var(--modern-purple);
  background: #fff;
  box-shadow: var(--modern-focus);
  outline: none;
}

.primary-action,
.secondary-action,
.danger-action,
.row-actions button,
.row-actions a,
.open-preview {
  min-height: 36px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 750;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.primary-action {
  background: var(--modern-purple);
  box-shadow: 0 8px 18px rgba(90,59,196,.17);
}

.primary-action:hover,
.open-preview:hover,
.secondary-action:hover,
.row-actions button:hover,
.row-actions a:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(29,29,37,.1);
}

.secondary-action {
  border-color: var(--modern-line-strong);
  background: #fff;
  color: var(--modern-text);
}

.danger-action {
  border-color: #efd9dc;
  background: #fff;
  color: #b44f58;
}

.column-editor-block {
  margin-top: 12px;
  border: 1px solid var(--modern-line);
  border-radius: 12px;
  background: var(--modern-surface-2);
  padding: 10px;
}

.column-editor-block summary {
  color: var(--modern-purple);
  font-size: 12px;
  font-weight: 800;
}

.scoped-image-editor {
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #fafafd);
  padding: 13px;
}

/* Image upload rows use one shared control height, including the native file
   picker, so the adjacent action buttons never sit higher or lower. */
.scoped-image-fields .field:first-child select,
.scoped-image-fields .field input[type="file"],
.scoped-image-fields > button {
  height: 40px;
  min-height: 40px;
  box-sizing: border-box;
}

.scoped-image-fields .field input[type="file"] {
  padding: 6px 8px;
}

.scoped-image-fields > button {
  display: inline-flex;
  align-items: center;
}

/* The explanatory note belongs to the image cards, so give it the same
   deliberate vertical gap used between the cards themselves. */
.panel[data-editor-panel-id="images"] > .empty-editor-note {
  margin-bottom: 12px;
}

/* Keep the two notes in Documentinstellingen visually separate. */
.panel[data-editor-panel-id="document-settings"] > .empty-editor-note + .empty-editor-note {
  margin-top: 12px;
}

.table-editor {
  overflow: hidden;
  margin-top: 12px;
  padding: 0;
}

.table-editor > summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  border-bottom: 1px solid transparent;
  background: linear-gradient(180deg, #fff, #fafafd);
  color: var(--modern-text);
  font-size: 13px;
  font-weight: 750;
}

/* Summary rows use flex layouts, so provide an explicit open/close indicator. */
.table-editor > summary::before,
.product-table-option-panel > summary::before {
  content: "";
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  margin-right: 2px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .16s ease;
}

.table-editor[open] > summary::before,
.product-table-option-panel[open] > summary::before {
  transform: rotate(45deg);
  margin-top: -3px;
}

/* These three controls already read as tabs; keep their labels clean. */
.product-table-option-panel > summary::before {
  display: none;
}

.table-editor > summary::-webkit-details-marker,
.product-table-option-panel > summary::-webkit-details-marker {
  display: none;
}

.editor-table-ordinal {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--modern-purple-soft);
  color: var(--modern-purple);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}

.editor-table-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-editor[open] > summary {
  margin-bottom: 14px;
  border-bottom-color: #efeff3;
}

.table-editor > :not(summary) {
  margin-left: 14px;
  margin-right: 14px;
}

.table-editor > :last-child {
  margin-bottom: 14px;
}

/* General information tables use the same even vertical rhythm as manual
   table editors: one consistent gap between each editor block. */
.general-info-editor > .field,
.general-info-editor > .table-settings-block,
.general-info-editor > .mini-table-wrap,
.general-info-editor > .manual-table-footer-actions {
  margin-top: 0;
}

.general-info-editor > .field,
.general-info-editor > .table-settings-block,
.general-info-editor > .mini-table-wrap {
  margin-bottom: 12px;
}

.general-info-editor > .manual-table-footer-actions {
  margin-bottom: 14px;
}

.table-meta-editor {
  border-color: var(--modern-line);
  border-radius: 12px;
  background: var(--modern-surface-2);
}

.mini-table-wrap {
  overflow: auto;
  border: 1px solid var(--modern-line);
  border-radius: 12px;
  background: #fff;
}

.mini-edit-table {
  border-collapse: separate;
  border-spacing: 0;
}

.mini-edit-table th,
.mini-edit-table td {
  border-width: 0 1px 1px 0;
  border-color: var(--modern-line);
  padding: 6px 7px;
}

.mini-edit-table th {
  background: #f1effa;
  color: #57438f;
  font-size: 11px;
  font-weight: 750;
}

.mini-edit-table tbody tr:last-child td {
  border-bottom: 0;
}

.mini-edit-table th:last-child,
.mini-edit-table td:last-child {
  border-right: 0;
}

/* Quiet-by-default editing: a cell still reads as an input on hover/focus,
   while long tables stop looking like a wall of form controls. Keyboard focus
   remains explicit and selected cells retain the blue selection treatment. */
.mini-edit-table .editor-table-cell-field input,
.mini-edit-table .editor-table-header-field input,
.mini-edit-table .mini-header-input {
  min-height: 31px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.mini-edit-table .editor-table-cell-field,
.mini-edit-table .editor-table-header-field {
  border-radius: 8px;
  transition: background .14s ease, box-shadow .14s ease;
}

.mini-edit-table tbody tr:hover td {
  background: #fcfcfe;
}

.mini-edit-table td:has(.editor-table-cell-field:hover),
.mini-edit-table td:has(.editor-table-cell-field:focus-within),
.mini-edit-table th:has(.editor-table-header-field:hover),
.mini-edit-table th:has(.editor-table-header-field:focus-within) {
  background: #f8f7fc;
}

.mini-edit-table .editor-table-cell-field:hover,
.mini-edit-table .editor-table-cell-field:focus-within,
.mini-edit-table .editor-table-header-field:hover,
.mini-edit-table .editor-table-header-field:focus-within {
  background: #fff;
  box-shadow: inset 0 0 0 1px #d7d3e8, 0 1px 4px rgba(29,29,37,.05);
}

/* Make the editable text at the top of each column unmistakably the title. */
.manual-column-title-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 5px;
}

.manual-column-title-label {
  color: var(--modern-purple);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .055em;
  line-height: 1.1;
  text-transform: uppercase;
}

.mini-edit-table .manual-column-editor-cell .decimal-field span,
.mini-edit-table .staffel-subcolumn-card .decimal-field span {
  display: block;
  color: #626474;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.1;
}

/* Text and quantity columns do not need decimal controls, but they keep the
   same reserved height so colour and action controls line up with money
   columns. */
.mini-edit-table .manual-column-editor-cell .column-type-spacer {
  min-height: 51px;
  margin-top: 4px;
}

.mini-edit-table .staffel-subcolumn-card .column-type-spacer {
  min-height: 56px;
}

.mini-edit-table .editor-table-cell-field:focus-within input,
.mini-edit-table .editor-table-header-field:focus-within input,
.mini-edit-table .mini-header-input:focus {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.mini-edit-table .editor-table-cell-field.is-editor-cell-selected,
.mini-edit-table .editor-table-header-field.is-editor-cell-selected {
  background: #eee9ff;
  box-shadow: inset 0 0 0 1px #9a86dc;
}

.manual-table-toolbar {
  margin-top: 0;
  margin-bottom: 12px;
  padding: 13px 14px;
  border: 1px solid var(--modern-line);
  border-radius: 12px;
  background: var(--modern-surface-2);
}

/* Keep the table editor's vertical rhythm intentional: title, options,
   column-group controls, and the table each get one predictable gap. */
.manual-table-editor .manual-table-title-row {
  gap: 14px;
  margin-bottom: 12px;
}

.manual-table-editor .product-table-option-panels {
  gap: 10px;
  margin-bottom: 12px;
}

/* When all three option panels are closed there is no second content row.
   Remove the empty grid row so it cannot create a misleading blank strip
   below the summaries. */
.manual-table-editor .product-table-option-panels:not(:has(.product-table-option-panel[open])) {
  grid-template-rows: auto;
  row-gap: 0;
}

.manual-table-editor .integrated-table-wrap {
  margin-top: 12px;
}

.manual-table-toolbar strong {
  color: var(--modern-text);
  font-size: 12px;
}

.manual-table-toolbar span {
  color: var(--modern-muted);
  font-size: 11px;
}

.manual-table-toolbar small {
  display: block;
  margin-top: 4px;
  color: var(--modern-muted);
  font-size: 10px;
}

/* Give the column editor a quiet zebra rhythm. The two tones are close enough
   to stay calm, but make adjacent columns and grouped headers easier to scan. */
.integrated-manual-table thead tr:nth-child(2) .manual-column-editor-cell:nth-of-type(odd) {
  background: #f8f6fd;
}

.integrated-manual-table thead tr:nth-child(2) .manual-column-editor-cell:nth-of-type(even) {
  background: #f1eefb;
}

.integrated-manual-table thead .manual-group-row .manual-group-cell:nth-of-type(odd) {
  background: #faf9fe;
}

.integrated-manual-table thead .manual-group-row .manual-group-cell:nth-of-type(even) {
  background: #f3f0fc;
}

/* A new custom table starts with one text column. Let that editor stay close
   to its content instead of forcing the full multi-column table width. */
.integrated-manual-table.integrated-manual-table-single-column {
  width: fit-content;
  min-width: 0;
  max-width: 100%;
  table-layout: auto;
}

.integrated-manual-table.integrated-manual-table-single-column .manual-column-editor-cell {
  width: min(360px, 45vw);
  min-width: 0;
}

.integrated-manual-table.integrated-manual-table-single-column .editor-table-cell-field input,
.integrated-manual-table.integrated-manual-table-single-column .manual-column-editor-cell input,
.integrated-manual-table.integrated-manual-table-single-column .manual-column-editor-cell select,
.integrated-manual-table.integrated-manual-table-single-column .mini-header-input {
  max-width: 100%;
}

/* Give data rows the same scanning aid in a much softer tone than the header
   zebra, so the table stays light while longer price lists remain readable. */
.integrated-manual-table tbody tr:nth-child(even) td {
  background: #fcfcfc;
}

/* Grouped columns use a compact control strip so one group never makes the
   complete table header feel tall or leave the loose columns in empty space. */
.manual-table-editor .manual-group-cell,
.manual-table-editor .manual-group-cell-empty {
  padding: 7px 8px;
  vertical-align: middle;
}

.manual-table-editor .manual-group-cell-empty {
  color: #6f6b85;
  text-align: center;
}

.manual-table-editor .manual-group-cell-empty > span {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 8px;
  border-radius: 7px;
  background: rgba(255,255,255,.58);
  font-size: 10px;
  font-weight: 750;
}

.manual-table-editor .manual-inline-group-editor {
  display: grid;
  gap: 6px;
}

.manual-group-heading {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.manual-group-title-editor {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: 5px;
}

.manual-group-title-field {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.manual-group-title-field > span {
  display: none;
}

.manual-group-title-field input {
  min-height: 30px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 11px;
  text-align: left;
}

.manual-group-title-visibility-field {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 1px solid var(--modern-line-strong);
  border-radius: 8px;
  background: #fff;
  color: #706d80;
  cursor: pointer;
}

.manual-group-title-visibility-field input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.manual-group-title-visibility-field svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.manual-group-title-visibility-field:has(input:checked) {
  color: var(--modern-purple);
  border-color: #a897df;
  background: var(--modern-purple-soft);
}

.manual-group-count {
  flex: 0 0 auto;
  margin: 0;
  color: #716d83;
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

.manual-table-editor .manual-inline-group-editor > .manual-table-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
}

.group-icon-action,
.manual-group-more-actions > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--modern-line-strong);
  border-radius: 8px;
  background: #fff;
  color: #605d70;
  cursor: pointer;
}

.group-icon-action .ui-icon {
  width: 15px;
  height: 15px;
}

.manual-table-editor .manual-inline-group-editor > .manual-table-actions > .secondary-action {
  min-height: 28px;
  padding-inline: 8px;
}

.manual-group-more-actions {
  position: relative;
}

.manual-group-more-actions > summary {
  list-style: none;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1px;
}

.manual-group-more-actions > summary::-webkit-details-marker {
  display: none;
}

.manual-group-more-actions[open] > summary {
  border-color: #a897df;
  background: var(--modern-purple-soft);
  color: var(--modern-purple);
}

.manual-group-grid-field {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 7px;
  border: 1px solid var(--modern-line);
  border-radius: 8px;
  background: #fff;
  color: var(--modern-muted);
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
}

.manual-group-grid-field:has(input:checked) {
  border-color: #b9abe9;
  background: var(--modern-purple-soft);
  color: var(--modern-purple);
}

.manual-group-grid-field input {
  width: 14px;
  height: 14px;
  min-height: 14px;
  margin: 0;
  accent-color: var(--modern-purple);
}

.manual-group-more-actions > div {
  position: absolute;
  z-index: 20;
  top: calc(100% + 5px);
  right: 0;
  display: none;
  min-width: 156px;
  padding: 6px;
  border: 1px solid var(--modern-line-strong);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(29,29,37,.14);
}

.manual-group-more-actions[open] > div {
  display: grid;
  gap: 4px;
}

.manual-group-more-actions .secondary-action {
  justify-content: flex-start;
  min-height: 30px;
  padding-inline: 8px;
  font-size: 11px;
}

.manual-table-actions {
  gap: 6px;
}

.ui-icon-text-align-left { -webkit-mask-image: url('/assets/icons/text-align-left.svg'); mask-image: url('/assets/icons/text-align-left.svg'); }
.ui-icon-text-align-center { -webkit-mask-image: url('/assets/icons/text-align-center.svg'); mask-image: url('/assets/icons/text-align-center.svg'); }
.ui-icon-text-align-right { -webkit-mask-image: url('/assets/icons/text-align-right.svg'); mask-image: url('/assets/icons/text-align-right.svg'); }

.alignment-field {
  gap: 6px;
}

.alignment-choice-group {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.alignment-choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 34px;
  border: 1px solid var(--modern-line-strong);
  border-radius: 9px;
  background: #fff;
  color: #626474;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.alignment-choice:hover {
  border-color: #bdb8d7;
  color: var(--modern-purple);
}

.alignment-choice:has(input:checked) {
  border-color: #9a86dc;
  background: var(--modern-purple-soft);
  color: var(--modern-purple);
  box-shadow: inset 0 0 0 1px rgba(90,59,196,.1);
}

.alignment-choice:focus-within {
  box-shadow: var(--modern-focus);
}

.alignment-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.alignment-choice .ui-icon {
  width: 18px;
  height: 18px;
}

.extra-info-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
}

.extra-info-remove-action {
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  aspect-ratio: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: end;
  margin-bottom: 0;
  padding: 0;
  border-radius: 9px;
  border: 1px solid #efd9dc;
  background: #fff;
  color: #b44f58;
  box-shadow: none;
}

.extra-info-remove-action:hover,
.extra-info-remove-action:focus-visible {
  background: #fff7f7;
  border-color: #d99aa1;
  color: #a53d48;
  box-shadow: 0 3px 10px rgba(181, 79, 88, .12);
}

.extra-info-remove-action svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.manual-table-actions .secondary-action {
  min-height: 32px;
  padding-inline: 10px;
  border-radius: 9px;
  font-size: 11px;
}

/* Treat row/column counters as one control instead of a bordered box around
   another bordered box. */
.table-count-control {
  min-height: 34px;
  gap: 8px;
  padding: 0 9px;
  border: 1px solid var(--modern-line-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--modern-purple);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.table-count-control input {
  width: 40px;
  height: 30px;
  min-height: 30px;
  padding: 0 3px;
  border: 0;
  border-left: 1px solid #ece9f4;
  border-radius: 0;
  background: transparent;
  color: var(--modern-text);
  text-align: center;
}

.table-count-control input:focus {
  outline: 0;
  box-shadow: 0 0 0 2px rgba(90,59,196,.14);
}

.manual-row-tools {
  background: #fbfbfd;
}

/* The actions cell is a flex container; keep it at the same row height as
   the 38px editor controls beside it. */
.mini-edit-table tbody .manual-row-tools {
  min-height: 38px;
  height: 100%;
  align-self: stretch;
  align-items: center;
  padding: 0 !important;
}

.mini-edit-table tbody .manual-row-tools button.row-icon-action {
  width: 26px;
  height: 38px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* The source icon artwork has a little more visual weight above its center;
   this optical nudge aligns it with the text baseline in the adjacent cells. */
.mini-edit-table tbody .manual-row-tools .ui-icon,
.mini-edit-table tbody .manual-row-tools svg {
  transform: translateY(3px);
}

/* Keep the action column a real table cell so its row borders and vertical
   alignment follow the label/value cells. */
.mini-edit-table tbody td.manual-row-tools {
  display: table-cell !important;
  min-height: 0;
  height: auto;
  align-self: auto;
  padding: 0 5px !important;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.mini-edit-table tbody td.manual-row-tools button.row-icon-action {
  width: 26px;
  height: 28px;
  min-height: 28px;
  vertical-align: middle;
}

.mini-edit-table tbody td.manual-row-tools button.row-icon-action + button.row-icon-action {
  margin-left: 2px;
}

.mini-edit-table tbody td.manual-row-tools .ui-icon,
.mini-edit-table tbody td.manual-row-tools svg {
  transform: none;
}

.row-icon-action {
  width: 26px;
  height: 28px;
  color: #747582;
  border-radius: 7px;
}

.row-icon-action:hover,
.row-icon-action:focus-visible {
  color: var(--modern-purple);
  background: var(--modern-purple-soft) !important;
}

.preview-column {
  position: sticky;
  top: 92px;
  height: calc(100vh - 108px);
  border: 1px solid var(--modern-line);
  border-radius: 18px;
  background: #e5e5eb;
  box-shadow: var(--modern-shadow);
}

.preview-status {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 10px 14px;
  background: rgba(255,255,255,.88);
  border-bottom: 1px solid var(--modern-line);
  color: #606270;
  font-size: 12px;
  font-weight: 700;
}

.preview-status:empty::before {
  content: "Live preview";
  color: #606270;
}

.preview-column iframe {
  min-height: 0;
  background: transparent;
}

.page-tree li.is-active {
  border-color: color-mix(in srgb, var(--modern-purple) 34%, var(--modern-line));
  background: var(--modern-purple-soft);
  box-shadow: inset 3px 0 0 var(--modern-purple);
}

.editor-splitter::before {
  width: 3px;
  background: rgba(90,59,196,.18);
}

/* Keep editor cards usable on smaller screens. */
@media (max-width: 940px) {
  .view { padding: 12px; }
  .topbar { padding-inline: 14px; }
  .table-editor > :not(summary) { margin-inline: 10px; }
}

.account-tabs {
  display: flex;
  gap: 6px;
  margin: -2px 0 18px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--modern-line);
}

.account-tab {
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--modern-muted);
  font-size: 12px;
  font-weight: 750;
}

.account-tab:hover {
  background: var(--modern-purple-soft);
  color: var(--modern-purple-dark);
}

.account-tab.active {
  border-color: rgba(90, 59, 196, .22);
  background: var(--modern-purple-soft);
  color: var(--modern-purple-dark);
}

.account-panel-intro {
  margin: 0 0 16px;
  color: var(--modern-muted);
  font-size: 12px;
  line-height: 1.5;
}

.admin-add-user-form {
  margin-bottom: 20px;
  padding: 14px;
  border: 1px solid var(--modern-line);
  border-radius: 12px;
  background: var(--modern-surface-2);
}

.admin-user-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.admin-user-form-actions,
.admin-user-password > div {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.admin-users-list {
  display: grid;
  gap: 10px;
}

.admin-user-row {
  display: grid;
  grid-template-columns: minmax(150px, .8fr) minmax(280px, 1.2fr);
  gap: 16px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--modern-line);
  border-radius: 12px;
  background: #fff;
}

.admin-user-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-bottom: 6px;
}

.admin-user-summary div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-user-summary strong,
.admin-user-summary small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-summary small {
  color: var(--modern-muted);
  font-size: 11px;
}

.admin-user-password .field {
  margin: 0;
}

@media (max-width: 700px) {
  .admin-user-form-grid,
  .admin-user-row {
    grid-template-columns: 1fr;
  }
}

/* Keep the editor toolbar compact so it supports the work area instead of
   competing with it. */
body[data-screen="editor"] #toolbar.toolbar {
  column-gap: 7px;
  row-gap: 3px;
  box-sizing: border-box;
  padding: 7px;
  border-radius: 14px;
}

body[data-screen="editor"] #toolbar.toolbar > * {
  margin: 0;
}

body[data-screen="editor"] #toolbar.toolbar > .select-label {
  margin-inline: 1px;
}

body[data-screen="editor"] #toolbar > .secondary-action,
body[data-screen="editor"] #toolbar > .danger-action,
body[data-screen="editor"] #toolbar > .open-preview,
body[data-screen="editor"] #toolbar > .save-action {
  height: 36px;
  min-height: 36px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 11px;
}

body[data-screen="editor"] #toolbar .segmented {
  height: 36px;
  min-height: 36px;
  gap: 2px;
  padding: 2px;
  border-radius: 10px;
}

body[data-screen="editor"] #toolbar .segmented button {
  min-width: 34px;
  height: 30px;
  min-height: 30px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 11px;
}

.ui-icon-bar-right { -webkit-mask-image: url('/assets/icons/bar-right.svg'); mask-image: url('/assets/icons/bar-right.svg'); }
.ui-icon-bar-bottom { -webkit-mask-image: url('/assets/icons/bar-bottom.svg'); mask-image: url('/assets/icons/bar-bottom.svg'); }
.ui-icon-translate { -webkit-mask-image: url('/assets/icons/vertalen.svg'); mask-image: url('/assets/icons/vertalen.svg'); }
.ui-icon-chat-conversation { -webkit-mask-image: url('/assets/icons/chat-conversation.svg'); mask-image: url('/assets/icons/chat-conversation.svg'); }
.ui-icon-show { -webkit-mask-image: url('/assets/icons/show.svg'); mask-image: url('/assets/icons/show.svg'); }

body[data-screen="editor"] #toolbar .slide-notes-overview-action .ui-icon {
  width: 16px;
  height: 16px;
}

body[data-screen="editor"] #toolbar .translation-toolbar-actions button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Give the translation action enough emphasis to read as available without
   competing with the primary PDF action. */
body[data-screen="editor"] #toolbar .translation-toolbar-actions {
  border-color: #d7cbff;
  background: #f4f0ff;
  box-shadow: 0 2px 8px rgba(90, 59, 196, .08);
}

body[data-screen="editor"] #toolbar .translation-toolbar-actions button {
  color: #4f36ad;
  background: transparent;
  font-weight: 800;
}

body[data-screen="editor"] #toolbar .translation-toolbar-actions button:hover {
  background: #e9e1ff;
  color: #39228d;
  box-shadow: none;
  transform: none;
}

body[data-screen="editor"] #toolbar .translation-toolbar-actions:hover {
  background: #e9e1ff;
}

body[data-screen="editor"] #toolbar .workspace-layout-tabs button {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 5px;
}

body[data-screen="editor"] #toolbar .workspace-layout-tabs .ui-icon {
  width: 18px;
  height: 18px;
}

body[data-screen="editor"] #toolbar .select-label {
  gap: 5px;
  font-size: 11px;
}

body[data-screen="editor"] #toolbar .select-label select {
  min-height: 36px;
  padding: 0 7px;
  border-radius: 8px;
  font-size: 11px;
}

body[data-screen="editor"] #toolbar .print-action-link {
  background: var(--modern-purple);
  box-shadow: none;
}

body[data-screen="editor"] #toolbar .print-action-link:hover {
  background: var(--modern-purple-dark);
  box-shadow: none;
  transform: none;
}

/* Keep the preview actions with the preview they control. The status text
   fills the left side and the actions stay grouped on the right. */
.preview-toolbar-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
  flex: 0 0 auto;
}

.preview-toolbar-actions .open-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 9px;
  font-size: 10px;
  white-space: nowrap;
}

.preview-toolbar-actions .preview-action-link {
  background: #151923;
  color: #fff;
}

.preview-toolbar-actions .print-action-link {
  background: linear-gradient(135deg, var(--modern-purple), var(--modern-purple-dark));
  color: #fff;
  box-shadow: none;
}

.preview-toolbar-actions .open-preview:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(20, 23, 32, .16);
}

.preview-toolbar-actions .ui-icon {
  width: 15px;
  height: 15px;
  background: currentColor;
}

/* The final global editor-shell rules also affect stacked mode. Give that
   mode one clear vertical scroll owner again so its long form remains usable. */
body[data-editor-layout="stacked"] #editorView.is-active {
  height: calc(100vh - 68px) !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

body[data-editor-layout="stacked"] .content-grid.is-stacked-layout {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

body[data-editor-layout="stacked"] .content-grid.is-stacked-layout .model-column,
body[data-editor-layout="stacked"] .content-grid.is-stacked-layout #contentPanel {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

/* In split mode the structure map is a fixed companion to the form. Keep the
   map in place while only the editor column on its right receives a scrollbar. */
@media (min-width: 941px) {
  /* Authoritative split-editor scroll ownership. */
  body[data-editor-layout="split"] #editorView.is-active {
    height: calc(100vh - 76px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body[data-editor-layout="split"] .editor-page-card.is-editor-active {
    outline-offset: -1px !important;
  }

  body[data-editor-layout="split"] #editorView.is-active {
    padding-bottom: 0 !important;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout {
    /* Keep the editor scrollbar close to the preview splitter while retaining
       a small visual breathing space between both controls. */
    grid-template-columns: minmax(460px, calc(var(--editor-column-width) + 14px)) 6px minmax(340px, 1fr) !important;
    column-gap: 0 !important;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout .model-column {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    /* The editor column should end at the splitter.  The old right padding
       created a visible strip behind the form and made the inner spacing look
       wider than the left gutter. */
    padding: 0 !important;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout .model-column > #contentPanel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout #contentPanel .editor-content-layout {
    height: 100% !important;
    min-height: 0 !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: stretch !important;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout #contentPanel .editor-structure-panel {
    position: sticky !important;
    top: 0 !important;
    align-self: start !important;
    height: max-content !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 12px !important;
    border: 1px solid var(--line) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 14px 34px rgba(20, 23, 32, .08) !important;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout #contentPanel .editor-structure-header {
    padding: 4px 4px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout #contentPanel .editor-form-column {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    /* The grid gap is the single, shared gutter between the structure map and
       the form.  Do not add another inset on the form itself. */
    padding-left: 0 !important;
    /* Keep a visible gutter between the editor cards and their scrollbar. The
       scrollbar remains outside the white editor cards/container edge. */
    padding-right: 14px !important;
    padding-bottom: 0 !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout #contentPanel .editor-form-column > * {
    flex: 0 0 auto !important;
  }
}

/* Decimal precision belongs with the table-level controls. Keeping these
   controls in the same pill style as Rijen and Kolommen makes the setting
   easy to find without adding another field to every column header. */
.manual-table-footer-actions .table-decimal-control {
  min-width: 150px;
  max-width: 210px;
  flex: 0 1 auto;
  white-space: nowrap;
}

.manual-table-footer-actions .table-decimal-control span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manual-table-footer-actions .table-decimal-control input {
  flex: 0 0 40px;
}

/* Keep the gaps between editor cards on the same canvas as the rest of the
   workspace. A nested panel background made every slide break into a darker
   horizontal band while scrolling. */
@media (min-width: 941px) {
  body[data-editor-layout="split"] #editorView.is-active,
  body[data-editor-layout="split"] .content-grid.is-split-layout,
  body[data-editor-layout="split"] .content-grid.is-split-layout .model-column,
  body[data-editor-layout="split"] .content-grid.is-split-layout .model-column > #contentPanel,
  body[data-editor-layout="split"] .content-grid.is-split-layout #contentPanel .editor-content-layout,
  body[data-editor-layout="split"] .content-grid.is-split-layout #contentPanel .editor-form-column {
    background: var(--modern-bg) !important;
  }

  /* The preview frame itself keeps its document styling; only the surrounding
     workspace canvas should match the editor background. */
  body[data-editor-layout="split"] .content-grid.is-split-layout .preview-column {
    background: var(--modern-bg) !important;
    /* Balance the preview-side gutter with the editor-side scrollbar gutter.
       Expand on the right so the preview keeps its existing outer edge. */
    transform: translateX(-8px) !important;
    width: calc(100% + 8px) !important;
  }
}

/* Keep a compact card shadow in the editor: enough separation to make each
   dia readable, without the broad/deep shadow from the default surface rule. */
.editor-page-card,
body[data-screen="editor"] #contentPanel .editor-form-column > .panel,
body[data-screen="editor"] #contentPanel .editor-form-column > .editor-page-card {
  box-shadow: 0 4px 14px rgba(20, 23, 32, .08) !important;
}

/* Keep the resize affordance visible between the editor and live preview. */
@media (min-width: 941px) {
  body[data-editor-layout="split"] .content-grid.is-split-layout .editor-splitter {
    position: relative !important;
    display: block !important;
    min-height: 100% !important;
    background: transparent !important;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout .editor-splitter::before {
    content: "" !important;
    position: absolute !important;
    /* Start level with the 52px editor and preview top bars, then continue
       the visible divider all the way to the bottom of the workspace. */
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    left: -1px !important;
    width: 3px !important;
    border-radius: 999px !important;
    background: rgba(90, 59, 196, .34) !important;
    transform: translateX(-50%) !important;
    box-shadow: none !important;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout .editor-splitter:hover::before,
  body[data-editor-layout="split"] .content-grid.is-split-layout .editor-splitter:focus-visible::before,
  body[data-editor-layout="split"] .content-grid.is-split-layout.is-resizing .editor-splitter::before {
    background: var(--purple) !important;
    box-shadow: 0 0 0 3px rgba(83, 65, 165, .12) !important;
  }

  /* Keep the preview on its own side of the splitter; the earlier left shift
     could paint the preview background over the resize line. */
  body[data-editor-layout="split"] .content-grid.is-split-layout .preview-column {
    transform: none !important;
    width: auto !important;
  }

  /* Keep the preview card aligned with its topbar, then reserve a separate
     outer gutter before the iframe's native scrollbar. The card ends 29px
     earlier; 14px is the visual gutter and the remaining 15px is the native
     scrollbar itself. */
  body[data-editor-layout="split"] .content-grid.is-split-layout .preview-column {
    width: calc(100% - 29px) !important;
    justify-self: start !important;
    overflow: visible !important;
    position: relative !important;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout {
    overflow: visible !important;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout .preview-toolbar {
    margin-right: 0 !important;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout .preview-column iframe {
    width: calc(100% + 29px) !important;
    max-width: none !important;
    justify-self: start !important;
    position: relative !important;
    z-index: 1 !important;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout .preview-column::after {
    content: "" !important;
    position: absolute !important;
    top: 52px !important;
    right: -14px !important;
    bottom: 0 !important;
    width: 14px !important;
    background: var(--modern-bg) !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }

  /* The iframe extends into the outer gutter, so draw the card's right edge
     above it to keep the preview container visually closed on both sides. */
  body[data-editor-layout="split"] .content-grid.is-split-layout .preview-column::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 1px !important;
    border-radius: 0 18px 18px 0 !important;
    background: var(--modern-line) !important;
    pointer-events: none !important;
    z-index: 3 !important;
  }
}

/* Align the live-preview status bar with the editor's tab bar. The split
   layout's older 34px grid row left the status content overflowing, so the
   two bars no longer shared the same visual height. */
@media (min-width: 941px) {
  body[data-editor-layout="split"] #editorView.is-active {
    /* Use the same 14px rhythm as the form's internal card spacing. */
    padding-top: 14px !important;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout .preview-column {
    grid-template-rows: 52px minmax(0, 1fr) !important;
    /* Mirror the editor-side scrollbar gutter between the splitter and the
       preview frame, so both sides of the divider breathe equally. */
    margin-left: 14px !important;
    /* Keep the blue canvas inside the iframe; it must not protrude around the
       rounded preview toolbar on either side. */
    background: var(--modern-bg) !important;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout .preview-toolbar {
    min-height: 52px !important;
    height: 52px !important;
    /* Match the editor side: breathing room plus the scrollbar gutter. */
    margin-right: 29px !important;
    box-sizing: border-box !important;
    border-radius: 15px !important;
    overflow: hidden !important;
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Cover the iframe only behind the toolbar. This keeps the rounded white
     bar clean without adding a second visible card or changing the scrollbar
     gutter below it. */
  body[data-editor-layout="split"] .content-grid.is-split-layout .preview-toolbar-canvas-cover {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: -29px !important;
    height: 52px !important;
    background: var(--modern-bg) !important;
    pointer-events: none !important;
    z-index: 3 !important;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout .preview-status {
    min-height: 52px !important;
    height: 52px !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Leave the editor scrollbar in the gutter between the editor content and
     the splitter.  The tabs stop at the same right edge as the cards below,
     so the scrollbar no longer appears to sit inside the editor header. */
  body[data-editor-layout="split"] .content-grid.is-split-layout .model-column > .editor-tabs {
    margin-bottom: 2px !important;
    margin-right: 29px !important;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout .model-column > .editor-panel {
    padding-bottom: 0 !important;
    overflow: visible !important;
  }

  /* The legacy split rules target #contentPanel directly and otherwise clip
     the form when its scroll layer is pulled up beneath the fixed tabbar. */
  body[data-editor-layout="split"] .content-grid.is-split-layout .model-column > #contentPanel {
    overflow: visible !important;
  }

  /* Keep the existing 14px visual gap below the tabs, while letting the
     editor scroll layer start underneath the fixed tabbar. The first editor
     control keeps its original position because the scroll layer reserves the
     tabbar height plus that gap as top padding. */
  body[data-editor-layout="split"] .content-grid.is-split-layout #contentPanel .editor-form-column {
    margin-top: -66px !important;
    height: calc(100% + 66px) !important;
    padding-top: 66px !important;
    box-sizing: border-box !important;
  }
}

/* Final preview alignment override: the toolbar and the visible preview card
   share one right edge; the gutter and native scrollbar sit outside it. */
@media (min-width: 941px) {
  body[data-editor-layout="split"] .content-grid.is-split-layout .preview-toolbar {
    margin-right: 0 !important;
  }
}

/* Let both split-layout scroll layers begin behind their fixed bars again.
   Their top padding keeps the first visible control/slide at the same place,
   while later content can pass underneath the bars during scrolling. */
@media (min-width: 941px) {
  body[data-editor-layout="split"] .content-grid.is-split-layout #contentPanel .editor-form-column {
    margin-top: -66px !important;
    height: calc(100% + 66px) !important;
    padding-top: 66px !important;
    box-sizing: border-box !important;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout .preview-column iframe {
    margin-top: -52px !important;
    height: calc(100% + 52px) !important;
    box-sizing: border-box !important;
  }

  /* Keep the preview toolbar above the overlapping iframe. The slides may
     scroll behind it, but the status and actions must remain visible. */
  body[data-editor-layout="split"] .content-grid.is-split-layout .preview-toolbar {
    position: relative !important;
    z-index: 4 !important;
  }
}

/*
 * Stacked layout repair.
 *
 * The stacked workspace is intentionally a normal vertical document: the
 * preview is followed by the editor and the editor view owns the scrollbar.
 * Older sticky-preview rules remain in styles.css for the split workspace,
 * so these final selectors keep them from pulling the stacked rows over one
 * another or leaving the preview canvas with an empty overlay.
 */
body[data-editor-layout="stacked"] #editorView.is-active {
  height: calc(100vh - 68px) !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 14px 14px 28px !important;
}

body[data-editor-layout="stacked"] .content-grid.is-stacked-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  grid-template-areas: "preview" "editor" !important;
  gap: 18px !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

body[data-editor-layout="stacked"] .content-grid.is-stacked-layout > .sticky-preview-backdrop {
  display: none !important;
}

body[data-editor-layout="stacked"] .content-grid.is-stacked-layout .preview-column {
  grid-area: preview !important;
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-rows: 52px minmax(0, 1fr) 14px !important;
  width: 100% !important;
  height: var(--preview-panel-height, 280px) !important;
  min-height: var(--preview-panel-height, 280px) !important;
  max-height: var(--preview-panel-height, 280px) !important;
  margin: 0 !important;
  overflow: hidden !important;
}

body[data-editor-layout="stacked"] .content-grid.is-stacked-layout .preview-column .preview-toolbar {
  grid-row: 1 !important;
  position: relative !important;
  top: auto !important;
  z-index: 2 !important;
  width: 100% !important;
  min-height: 52px !important;
  height: 52px !important;
  margin: 0 !important;
}

body[data-editor-layout="stacked"] .content-grid.is-stacked-layout .preview-column iframe {
  grid-row: 2 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
}

body[data-editor-layout="stacked"] .content-grid.is-stacked-layout .preview-column .preview-height-handle {
  grid-row: 3 !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: block !important;
  width: 100% !important;
  height: 14px !important;
  margin: 0 !important;
}

body[data-editor-layout="stacked"] .content-grid.is-stacked-layout .model-column {
  grid-area: editor !important;
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding: 0 0 56px !important;
}

body[data-editor-layout="stacked"] .content-grid.is-stacked-layout .editor-tabs {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
  margin: 0 0 12px !important;
}

body[data-editor-layout="stacked"] .content-grid.is-stacked-layout .editor-panel,
body[data-editor-layout="stacked"] .content-grid.is-stacked-layout #contentPanel {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

/* The settings, Excel and structure tabs do not use the content tab's inner
   form scroller. In split mode let the model column become their scroll owner
   while the active panel stays in normal flow, so the long settings form is
   fully reachable again. */
@media (min-width: 941px) {
  body[data-editor-layout="split"] .content-grid.is-split-layout .model-column[data-active-editor-tab="admin"],
  body[data-editor-layout="split"] .content-grid.is-split-layout .model-column[data-active-editor-tab="excel"],
  body[data-editor-layout="split"] .content-grid.is-split-layout .model-column[data-active-editor-tab="structure"] {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout .model-column[data-active-editor-tab="admin"] > #adminPanel,
  body[data-editor-layout="split"] .content-grid.is-split-layout .model-column[data-active-editor-tab="excel"] > #excelPanel,
  body[data-editor-layout="split"] .content-grid.is-split-layout .model-column[data-active-editor-tab="structure"] > #structurePanel {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Stacked workspace scroll ownership: the preview and document map stay
   fixed while only the long editor form moves. */
body[data-editor-layout="stacked"] #editorView.is-active {
  height: calc(100vh - 76px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 12px 14px 14px !important;
}

body[data-editor-layout="stacked"] .content-grid.is-stacked-layout {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  grid-template-rows: var(--preview-panel-height, 280px) minmax(0, 1fr) !important;
  grid-template-areas: "preview" "editor" !important;
  gap: 18px !important;
}

body[data-editor-layout="stacked"] .content-grid.is-stacked-layout .preview-column {
  grid-area: preview !important;
  position: relative !important;
  top: auto !important;
  height: var(--preview-panel-height, 280px) !important;
  min-height: var(--preview-panel-height, 280px) !important;
  max-height: var(--preview-panel-height, 280px) !important;
}

body[data-editor-layout="stacked"] .content-grid.is-stacked-layout .model-column {
  grid-area: editor !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  padding-bottom: 0 !important;
}

body[data-editor-layout="stacked"] .content-grid.is-stacked-layout .model-column > .editor-tabs {
  flex: 0 0 auto !important;
  position: relative !important;
  top: auto !important;
  z-index: 2 !important;
}

body[data-editor-layout="stacked"] .content-grid.is-stacked-layout .model-column > .editor-panel {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 28px !important;
}

body[data-editor-layout="stacked"] .content-grid.is-stacked-layout .model-column > #contentPanel {
  overflow: hidden !important;
  padding-bottom: 0 !important;
}

body[data-editor-layout="stacked"] .content-grid.is-stacked-layout #contentPanel .editor-content-layout {
  height: 100% !important;
  min-height: 0 !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: stretch !important;
}

body[data-editor-layout="stacked"] .content-grid.is-stacked-layout #contentPanel .editor-structure-panel {
  position: relative !important;
  top: auto !important;
  align-self: stretch !important;
  height: 100% !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

body[data-editor-layout="stacked"] .content-grid.is-stacked-layout #contentPanel .editor-form-column {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 8px !important;
  padding-bottom: 28px !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}