.sb-editor {
  --sb-line: #e2e8f0;
  --sb-soft: #f4f6fa;
  --sb-ink: #172338;
  --sb-muted: #526076;
  color: var(--sb-ink);
  min-width: 0;
}

.sb-editor .page-heading { margin-bottom: 15px; }
.sb-editor .sb-feedback { margin: 0 0 10px; padding: 9px 12px; border-radius: 9px; }
.sb-feedback:empty { display: none; }
.sb-feedback:not(.error) { color: #275747; background: #e3f2e8; }
.sb-feedback.error { color: #8b2539; background: #fff0f3; }
.sb-load-state { padding: 14px 16px; color: var(--sb-muted); }

.sb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
  padding: 14px 17px;
}

.sb-bar h2 { margin: 0 0 5px; font-size: 1rem; }

.sb-actions,
.sb-publication {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.sb-publication { font-size: .83rem; color: var(--sb-muted); }
.sb-publication-state { display: flex; flex-wrap: wrap; gap: 5px; }
.sb-publication a { color: var(--accent-strong); text-underline-offset: 3px; }
.sb-state { padding: 4px 8px; background: var(--sb-soft); border-radius: 8px; font-weight: 700; }
.sb-state[data-state="published"] { background: #e3f2e8; color: #24543a; }
.sb-state-pending { background: #fff0d1; color: #69400b; }
.sb-confirm { width: min(100% - 26px, 430px); padding: 18px; }
.sb-confirm h2 { margin: 0; font-size: 1.18rem; }
.sb-confirm p { margin: 8px 0 14px; }
.sb-confirm .sb-actions { justify-content: end; }

.sb-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
  padding: 4px;
  border: 1px solid var(--sb-line);
  border-radius: 11px;
  background: white;
}

.sb-tabs button { min-height: 39px; flex: 1 1 auto; border-color: transparent; }

.sb-tabs button[aria-current],
.sb-device button[aria-pressed="true"] {
  border-color: #f1cfc3;
  background: #fff0e9;
  color: #9b3016;
}

.sb-layout {
  display: grid;
  grid-template-columns: minmax(290px, 1fr) minmax(0, 1.75fr);
  align-items: start;
  gap: 14px;
}

.sb-section {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(12px, 2vw, 18px);
  min-width: 0;
}

.sb-section h2, .sb-section h3,
.sb-preview h2 { margin: 0; font-size: 1.12rem; }
.sb-section h3 { font-size: 1rem; }
.sb-control-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 7px; align-items: center; }
.sb-count, .sb-block-kind { flex: none; padding: 3px 6px; border-radius: 6px; color: var(--sb-muted); background: var(--sb-soft); font-size: .73rem; font-weight: 650; }
.sb-block-kind[data-request-state="new"] { background: #eaf1ff; color: #235082; }
.sb-block-kind[data-request-state="closed"] { background: #e3f2e8; color: #24543a; }
.sb-block-kind[data-request-state="in_progress"] { background: #fff0d1; color: #69400b; }
.sb-page-picker, .sb-empty { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--sb-line); border-radius: 9px; background: var(--sb-soft); }
.sb-empty { color: var(--sb-muted); font-size: .87rem; }
.sb-section .sb-destructive { color: #9a2637; }
.sb-section p { margin: 0; overflow-wrap: anywhere; }
.sb-section label { display: grid; gap: 5px; min-width: 0; font-size: .86rem; font-weight: 650; }
.sb-section :is(input:not([type="checkbox"]), select, textarea) {
  width: 100%;
  min-width: 0;
  min-height: 41px;
  font-size: .9rem;
  font-weight: 400;
}

.sb-section input[type="file"] {
  max-width: 100%;
  border: 1px solid var(--sb-line);
  border-radius: 8px;
  background: white;
  padding: 6px;
}

.sb-section input[type="color"] { padding: 3px; cursor: pointer; }
.sb-section input[type="range"] { min-height: 30px; padding-inline: 0; accent-color: var(--accent-strong); }
.sb-section textarea { resize: vertical; min-height: 60px; }
.sb-section label.sb-check { display: flex; gap: 7px; align-items: center; cursor: pointer; min-height: 26px; }
.sb-check input { width: 17px; height: 17px; margin: 0; flex: none; accent-color: var(--accent-strong); }
.sb-check:has(:disabled) { cursor: default; color: var(--sb-muted); }
.sb-section :is(button, summary) { overflow-wrap: anywhere; }

.sb-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 136px), 1fr));
  gap: 9px;
}

.sb-options,
.sb-block,
.sb-image,
.sb-item {
  min-inline-size: 0;
  border: 1px solid var(--sb-line);
  border-radius: 9px;
}

.sb-options {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 9px;
}

.sb-options legend { padding-inline: 4px; color: var(--sb-muted); font-size: .83rem; font-weight: 650; }
.sb-section summary { cursor: pointer; font-weight: 700; }
.sb-section details > summary { padding-block: 6px; }
.sb-section details > summary + :is(label, div) { margin-top: 7px; }
.sb-blocks, .sb-item { display: grid; gap: 8px; }
.sb-section .sb-block summary { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 10px; }
.sb-block summary::before { content: "›"; flex: none; color: var(--sb-muted); }
.sb-block[open] summary::before { transform: rotate(90deg); }
.sb-block summary > span:first-child { flex: 1; min-width: 0; }
.sb-block summary small { display: block; margin-top: 2px; color: var(--sb-muted); font-size: .75rem; font-weight: 500; }
.sb-block-content, .sb-item { padding: 9px; }
.sb-block-content { display: grid; gap: 9px; border-top: 1px solid var(--sb-line); }
.sb-add { align-items: end; }
.sb-add > label { flex: 1 1 150px; }
.sb-catalog-row { display: grid; gap: 4px; padding-bottom: 7px; border-bottom: 1px solid var(--sb-line); }
.sb-catalog-row:last-child { padding-bottom: 0; border-bottom: 0; }
.sb-catalog-row details label + label { margin-top: 7px; }
.sb-catalog-row .sb-image { margin-top: 7px; }
.sb-image { padding: 8px; }
.sb-image-input { display: flex; gap: 9px; align-items: center; }
.sb-image-input label { flex: 1 1 auto; }
.sb-image-input img { width: 75px; height: 56px; border-radius: 7px; object-fit: cover; }
.sb-image-details { display: grid; gap: 7px; margin-top: 8px; }
.sb-image-details .sb-actions { align-items: end; }
.sb-image-details > button, .sb-section > button, .sb-options > button { justify-self: start; }

.sb-step-progress { display: flex; gap: 8px; align-items: center; color: var(--sb-muted); font-size: .78rem; font-weight: 650; }
.sb-step-progress progress { height: 8px; flex: 1; width: 100%; accent-color: #b83c1e; }
.sb-steps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.sb-steps button {
  padding: 5px 2px;
  min-width: 0;
  min-height: 39px;
  border: 1px solid var(--sb-line);
  border-radius: 7px;
  background: var(--sb-soft);
  color: var(--sb-muted);
  font-weight: 700;
}

.sb-steps button[aria-current] { background: #fff0e9; color: #9b3016; border-color: #f1cfc3; }
.sb-next { justify-content: flex-end; padding-top: 10px; border-top: 1px solid var(--sb-line); }

.sb-template-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.sb-editor[data-site-builder-upsell] .sb-template-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.sb-template-card {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 6px;
  text-align: left;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  border: 1px solid var(--sb-line);
  border-radius: 8px;
  background: white;
  padding: 7px;
}
.sb-template-card:hover, .sb-template-card[aria-pressed="true"] { background: #fff0e9; border-color: #f1cfc3; }
.sb-template-image { display: block; width: 100%; height: auto; aspect-ratio: 1.9; object-fit: cover; border-radius: 5px; }
.sb-template-card strong { font-size: .87rem; }
.sb-template-card small { font-size: .73rem; font-weight: 400; line-height: 1.3; color: var(--sb-muted); }
.sb-template-caption { display: grid; gap: 4px; overflow-wrap: anywhere; }
.sb-template-caption strong, .sb-template-caption small { display: block; }
.sb-template-demo, .sb-suggested { font-size: .76rem; color: var(--accent-strong); }
.sb-template-confirm { padding: 7px; background: var(--sb-soft); border-radius: 8px; font-size: .84rem; }

.sb-preview {
  position: sticky;
  top: 10px;
  min-width: 0;
  padding: 10px;
  scroll-margin-top: 12px;
}
.sb-preview-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 7px; padding: 3px 4px 9px; }
.sb-preview-header .subtle { margin: 3px 0 0; font-size: .8rem; }
.sb-device { display: flex; gap: 3px; border-radius: 9px; background: var(--sb-soft); padding: 3px; }
.sb-device button { min-height: 37px; padding: 4px 8px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--sb-muted); font-size: .8rem; }
.sb-preview-viewport { --sb-desktop-scale: 1; height: clamp(380px, 67vh, 655px); min-width: 0; overflow: clip; background: #e9eef6; border-radius: 9px; border: 1px solid var(--sb-line); }
.sb-preview-viewport iframe { display: block; height: 100%; border: 0; background: white; }
.sb-preview-viewport[data-device="desktop"] iframe { width: 1120px; height: calc(100% / var(--sb-desktop-scale)); transform: scale(var(--sb-desktop-scale)); transform-origin: left top; }
.sb-preview-viewport[data-device="mobile"] iframe { width: min(100%, 390px); margin-inline: auto; border-inline: 1px solid var(--sb-line); }
.sb-section .booking-edit-share { padding: 10px; box-shadow: none; }
.sb-section .booking-dns-record { min-width: 0; }

.sb-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 0; }
.sb-stats > div { padding: 9px 7px; border: 1px solid var(--sb-line); border-radius: 8px; background: var(--sb-soft); overflow-wrap: anywhere; }
.sb-stats dt { color: var(--sb-muted); font-size: .71rem; }
.sb-stats dd { margin: 3px 0 0; font-size: 1.12rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.sb-message { white-space: pre-wrap; }

@media (max-width: 1040px) {
  .sb-layout { grid-template-columns: minmax(255px, .9fr) minmax(0, 1.1fr); }
}

@media (max-width: 800px) {
  .sb-layout { grid-template-columns: 1fr; }
  .sb-preview { position: static; }
  .sb-preview-viewport { height: max(480px, 65vh); }
  .sb-section :is(input:not([type="checkbox"]), textarea, select) { font-size: 16px; }
  .sb-tabs button, .sb-steps button, .sb-device button { min-height: 44px; }
}

@media (max-width: 420px) {
  .sb-bar, .sb-bar .sb-actions { align-items: stretch; }
  .sb-bar .sb-actions { width: 100%; }
  .sb-bar .sb-actions button { flex: 1 1 auto; }
  .sb-section .sb-template-card { padding: 6px; }
  .sb-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}