.tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--border);
}
.tabs.component-mode { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.tab {
  height: 36px;
  padding: 0 3px;
  color: var(--muted);
  background: #f7f9fa;
  border: 0;
  border-bottom: 2px solid transparent;
}

.tab.active { color: var(--accent); background: #fff; border-bottom-color: var(--accent); }

.pages-panel,
.project-components-panel,
.components-panel,
#element-panel { padding-block: 18px; }
.layers-panel { padding-block: 18px; }
.html-panel {
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.html-panel[hidden] { display: none; }
.empty-selection { color: var(--muted); line-height: 1.5; }

.component-inspector-actions {
  border-top: 1px solid var(--border);
  background: #fff;
}
.component-save-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}
.component-save-actions .button {
  min-width: 0;
  white-space: normal;
}

.panel-title {
  margin-bottom: 14px;
}
.panel-title span {
  min-width: 22px;
  color: var(--muted);
  background: #eef2f5;
  border-radius: 3px;
  text-align: center;
}
.registry-section {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.layers-tree,
.layer-children {
  list-style: none;
}
.layers-tree[hidden],
.layer-children[hidden] { display: none; }
.layer-row {
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: stretch;
  min-height: 34px;
}
.layer-toggle,
.layer-toggle-placeholder {
  width: 24px;
  min-height: 32px;
}
.layer-toggle {
  color: #607080;
  background: transparent;
  border: 0;
}
.layer-toggle:hover { color: var(--accent); }
.layer-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.layer-item-button {
  padding: 5px 8px;
  color: #263340;
  background: transparent;
  border: 0;
  border-radius: 3px;
  text-align: left;
}
.layer-item-button:hover { background: #eef2f5; }
.layer-item-button.active { color: #fff; background: var(--accent); }
.layer-item-button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.layer-detail { color: var(--muted); }
.layer-item-button.active .layer-detail { color: rgba(255, 255, 255, 0.78); }
.layer-container-row {
  color: #52616e;
  background: #f6f8fa;
  border-radius: 3px;
}
.layer-container-label {
  min-width: 0;
  padding: 5px 8px;
}
.layer-container > .layer-children > .layer-adder { margin-left: 0; }
.layer-variant-button {
  min-height: 29px;
  padding: 5px 8px;
  color: #52616e;
  background: transparent;
  border: 0;
  border-radius: 3px;
  text-align: left;
}
.layer-variant-button:hover { color: #263340; background: #eef2f5; }
.layer-variant-button.active { color: #075f9f; background: #e5f2fb; font-weight: 700; }
.layer-variant-button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.layer-actions {
  padding: 3px 2px;
}
.layer-action {
  width: 28px;
  height: 28px;
  color: #536170;
  background: transparent;
  border: 0;
  border-radius: 3px;
}
.layer-action:hover { color: var(--accent); background: #e7f2fa; }
.layer-delete-action.delete-confirming,
.layer-delete-action.delete-confirming:hover { color: #fff; background: #c52f35; }
.layer-drag-handle { cursor: grab; touch-action: none; }
.layer-drag-handle:active { cursor: grabbing; }
.layer-action:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.layer-sortable-ghost { opacity: 0.35; }
.layer-sortable-chosen > .layer-row { background: #e7f2fa; }
.layer-sortable-drag { background: #fff; box-shadow: 0 5px 16px rgba(22, 34, 46, 0.2); }
.layer-adder {
  margin: 5px 2px 8px 24px;
}
.layer-add-trigger {
  min-height: 32px;
  padding: 6px 9px;
  color: var(--accent);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 3px;
  text-align: left;
}
.layer-add-trigger:hover { background: #f4f9fd; border-color: #9bc8e9; }
.layer-add-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.layer-component-picker {
  z-index: 12;
  top: 0;
  left: 0;
  padding: 8px;
  background: #fff;
  border: 1px solid #bac5cf;
  border-radius: 4px;
  box-shadow: 0 8px 22px rgba(23, 32, 42, 0.18);
}
.layer-component-picker[hidden] { display: none; }
.layer-component-search {
  height: 32px;
  padding: 0 9px;
  color: #17202a;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 3px;
}
.layer-component-search:focus { border-color: var(--accent); outline: 2px solid rgba(8, 120, 209, 0.14); }
.layer-component-results {
  max-height: 340px;
}
.layer-component-group > summary {
  min-height: 32px;
  padding: 7px 8px;
  color: #263340;
  border-radius: 3px;
  list-style: none;
}
.layer-component-group > summary::-webkit-details-marker { display: none; }
.layer-component-group > summary:hover { background: #f4f7f9; }
.layer-component-group > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.layer-component-group[open] > summary .tree-arrow { transform: rotate(180deg); }
.layer-component-group-children { margin-left: 16px; }
.layer-component-result {
  padding: 7px 8px;
  color: #263340;
  background: transparent;
  border: 0;
  border-radius: 3px;
  text-align: left;
}
.layer-component-result:hover,
.layer-component-result:focus-visible { background: #eaf4fb; outline: 0; }
.layer-component-result-meta { color: var(--muted); font-family: Consolas, monospace; line-height: 1.3; }
.layer-component-status { padding: 7px 8px 1px; color: var(--muted); }

.selection-heading { margin-bottom: 18px; }
.tag-name { color: #8a3ffc; font-family: Consolas, monospace; font-weight: 700; }
.selection-heading code { color: var(--muted); }

.panel label, .quick-classes > span {
  color: #495563;
}

#class-input {
  color: #d8e3ed;
  background: #17202a;
  border: 1px solid #0d141b;
  border-radius: 4px;
  font: 12px/1.6 Consolas, monospace;
}

.quick-classes { margin-top: 22px; }
.quick-classes button {
  margin: 0 4px 6px 0;
  padding: 5px 7px;
  color: #374453;
  background: #f1f4f6;
  border: 1px solid #d6dde4;
  border-radius: 3px;
  font: 11px Consolas, monospace;
}

.html-output {
  background: #17202a;
  border: 0;
  outline: 0;
}

#html-output {
  min-width: max-content;
  min-height: 100%;
  padding: 14px;
  color: #d8e3ed;
  background: transparent;
  font: 12px/1.55 Consolas, monospace;
  tab-size: 2;
  white-space: pre;
}
.html-output:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.html-panel-toolbar {
  background: #f7f9fa;
  border-bottom: 1px solid var(--border);
}
.html-parent-button {
  min-height: 30px;
  padding: 5px 9px;
  color: #354352;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 3px;
}
.html-parent-button:hover:not(:disabled) { color: var(--accent); border-color: #9bc8e9; }
.html-parent-button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.html-parent-button:disabled { opacity: 0.42; cursor: default; }
.html-panel-footer {
  background: #f7f9fa;
  border-top: 1px solid var(--border);
}
#html-output .builder-component-reference {
  color: #f0f;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}
#html-output .builder-component-reference:hover { color: #ff66ff; }

.stage {
  grid-template-rows: 46px minmax(0, 1fr);
}

.viewport-toolbar {
  justify-content: flex-start;
  background: #fff;
  border-bottom: 1px solid var(--border);
}

.component-authoring-view {
  padding: 2px;
  background: #eef2f5;
  border-radius: 4px;
}
.component-authoring-view button {
  height: 24px;
  padding: 0 9px;
  color: #566270;
  background: transparent;
  border: 0;
  border-radius: 3px;
}
.component-authoring-view button:hover { color: #253342; }
.component-authoring-view button.active {
  color: #fff;
  background: #344250;
}

.viewport-presets button {
  height: 28px;
  padding: 0 9px;
  color: #566270;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
}
.viewport-presets button:hover { background: #eef2f5; }
.viewport-presets button.active { color: #fff; background: #344250; }

.custom-width { color: var(--muted); }
.custom-width input {
  width: 68px;
  height: 28px;
  padding: 0 7px;
  border: 1px solid var(--border);
  border-radius: 0;
}
.custom-width span { height: 28px; padding: 6px; background: #eef2f5; border: 1px solid var(--border); border-left: 0; }
.custom-width .dimension-axis {
  width: 25px;
  padding: 6px 0;
  border-left: 1px solid var(--border);
  border-right: 0;
  border-radius: 3px 0 0 3px;
  text-align: center;
  font-weight: 700;
}
.custom-width span:last-child { border-radius: 0 3px 3px 0; }

select[data-enhanced-select] + .ts-wrapper,
.ts-wrapper {
  min-width: 0;
}
.ts-wrapper.grow { flex: 1 1 auto; }
.ts-wrapper .ts-control {
  min-height: 32px;
  padding: 6px 28px 6px 8px;
  border-color: var(--border);
  border-radius: 3px;
  background: #fff;
  box-shadow: none;
}
.ts-wrapper.focus .ts-control {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(8, 120, 209, .14);
}
.ts-wrapper.disabled { opacity: .55; }
.ts-dropdown {
  z-index: 30;
  margin-top: 3px;
  border-color: #bac5cf;
  border-radius: 3px;
  box-shadow: 0 8px 22px rgba(23, 32, 42, .18);
}
.ts-dropdown .active { color: #17202a; background: #eaf4fb; }
.project-page-browser .ts-wrapper,
.project-palette .ts-wrapper,
.component-group-editor .ts-wrapper { width: 100%; }

.outline-toggle {
  height: 28px;
  padding: 0 7px;
  color: #566270;
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
}
.outline-toggle:hover { background: #eef2f5; }

.theme-toggle {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  color: #435160;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 3px;
}
.theme-toggle:hover { background: #eef2f5; }
.theme-toggle.is-dark { color: #fff; background: #344250; border-color: #344250; }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.canvas {
  background-color: #dfe4e9;
  background-image: linear-gradient(45deg, #d4dae0 25%, transparent 25%), linear-gradient(-45deg, #d4dae0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #d4dae0 75%), linear-gradient(-45deg, transparent 75%, #d4dae0 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

.frame-shell {
  min-width: 280px;
  height: min(100%, 720px);
  background: #fff;
  box-shadow: 0 8px 28px rgba(36, 48, 60, 0.18);
  transition: width 180ms ease;
}

#preview-frame { border: 0; background: #fff; }

.resize-handle {
  z-index: 2;
  touch-action: none;
  outline: none;
}
.resize-handle::after {
  content: "";
  position: absolute;
  background: transparent;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}
.resize-handle:hover::after,
.resize-handle:focus-visible::after,
.frame-shell.is-resizing .resize-handle::after { background: var(--accent); }
.resize-handle-n,
.resize-handle-s { left: 10px; right: 10px; height: 10px; cursor: ns-resize; }
.resize-handle-n { top: -5px; }
.resize-handle-s { bottom: -5px; }
.resize-handle-n::after,
.resize-handle-s::after { left: 0; right: 0; top: 4px; height: 2px; }
.resize-handle-e,
.resize-handle-w { top: 10px; bottom: 10px; width: 10px; cursor: ew-resize; }
.resize-handle-e { right: -5px; }
.resize-handle-w { left: -5px; }
.resize-handle-e::after,
.resize-handle-w::after { top: 0; bottom: 0; left: 4px; width: 2px; }
.resize-handle-ne,
.resize-handle-se,
.resize-handle-sw,
.resize-handle-nw { width: 16px; height: 16px; }
.resize-handle-ne { top: -8px; right: -8px; cursor: nesw-resize; }
.resize-handle-se { right: -8px; bottom: -8px; cursor: nwse-resize; }
.resize-handle-sw { bottom: -8px; left: -8px; cursor: nesw-resize; }
.resize-handle-nw { top: -8px; left: -8px; cursor: nwse-resize; }
.resize-handle-ne::after,
.resize-handle-se::after,
.resize-handle-sw::after,
.resize-handle-nw::after {
  inset: 3px;
  background: #fff;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8);
}
.frame-shell.is-resizing { transition: none; user-select: none; }
.frame-shell.is-resizing #preview-frame { pointer-events: none; }

.builder-toast-region {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 40;
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}
.builder-toast {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 28px;
  gap: 10px;
  align-items: start;
  padding: 13px 12px 13px 14px;
  color: #17202a;
  background: #fff;
  border: 1px solid #cbd3dc;
  border-left: 4px solid #16845b;
  border-radius: 7px;
  box-shadow: 0 18px 48px rgb(13 20 27 / 24%);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: auto;
}
.builder-toast.is-visible { opacity: 1; transform: translateY(0); }
.builder-toast.is-leaving { opacity: 0; transform: translateY(6px); }
.builder-toast.is-error { border-left-color: #bd2d2d; }
.builder-toast-mark {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: #fff;
  background: #16845b;
  border-radius: 50%;
  font-weight: 800;
  line-height: 1;
}
.builder-toast.is-error .builder-toast-mark { background: #bd2d2d; }
.builder-toast-content { display: grid; gap: 3px; min-width: 0; line-height: 1.35; }
.builder-toast-content strong { font-size: 12px; }
.builder-toast-content span { color: #4b5966; overflow-wrap: anywhere; }
.builder-toast-close {
  width: 28px;
  height: 28px;
  margin: -3px -4px 0 0;
  padding: 0;
  color: #66717e;
  background: transparent;
  border: 0;
  border-radius: 4px;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}
.builder-toast-close:hover { color: #17202a; background: #eef2f5; }
.builder-toast-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.dialog-backdrop {
  inset: 0;
  z-index: 10;
  background: rgba(13, 20, 27, 0.58);
}
.dialog-backdrop[hidden] { display: none; }

.dialog {
  width: min(520px, 100%);
  padding: 22px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}
.dialog p { color: var(--muted); }
.icon-button { width: 30px; height: 30px; border: 0; background: transparent; font-size: 24px; }
.share-row input { height: 34px; padding: 0 9px; border: 1px solid var(--border); border-radius: 4px; }
.dialog a { margin-top: 14px; color: var(--accent); }
.component-save-dialog { align-self: center; }
.component-save-fields input,
.component-save-fields select {
  width: 100%;
  height: 36px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
}
.component-save-fields input:focus,
.component-save-fields select:focus { border-color: var(--accent); outline: 2px solid rgba(8, 120, 209, 0.14); }
.component-save-fields input:disabled { color: var(--muted); background: #eef2f5; }
.component-save-error { margin-top: 12px; padding: 8px 10px; color: #a52222; background: #fff0f0; border-radius: 4px; }
.dialog-actions { margin-top: 18px; }
.dialog-actions > span { min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.button.dialog-secondary { color: #273442; background: #eef2f5; border-color: var(--border); }
.html-import-dialog {
  align-self: center;
  width: min(960px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
}
.html-import-layout { grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr); }
.html-import-source { grid-column: 1 / -1; }
.html-import-source textarea {
  width: 100%;
  min-height: 320px;
  padding: 10px;
  box-sizing: border-box;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: Consolas, "Courier New", monospace;
  line-height: 1.45;
  tab-size: 2;
}
.html-import-result { grid-template-rows: auto auto minmax(0, 1fr); min-height: 0; }
.html-import-stats { color: var(--muted); }
.html-import-warning {
  padding: 8px;
  color: #7a4a00;
  background: #fff7e8;
  border: 1px solid #e3bd79;
  white-space: pre-wrap;
}
.html-import-preview {
  min-height: 320px;
  max-height: 480px;
  margin: 0;
  padding: 10px;
  color: #dce7ef;
  background: #17212a;
  border-radius: 4px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.html-import-dialog .dialog-actions {
  position: sticky;
  bottom: -22px;
  z-index: 1;
  padding: 12px 0 0;
  background: #fff;
}

@media (max-width: 760px) {
  .builder-toast-region { right: 16px; bottom: 16px; }
  .project-home-header { flex-wrap: wrap; gap: 8px; padding: 10px 16px; }
  .project-home-actions { flex-wrap: wrap; gap: 4px; }
  .project-home-main { width: min(100% - 32px, 1180px); padding-top: 34px; }
  .catalog-order-main { width: min(100% - 16px, 1040px); padding-top: 12px; }
  .catalog-order-heading { align-items: stretch; flex-direction: column; }
  .catalog-order-heading .button { align-self: flex-start; }
  .project-home-heading { align-items: stretch; flex-direction: column; }
  .project-home-heading .button { align-self: flex-start; }
  .workspace { --sidebar-width: 240px; --component-inspector-width: 220px; }
  .topbar { gap: 8px; }
  .brand strong { display: none; }
  .brand { min-width: auto; }
  .name-input { display: none; }
  .button { padding: 0 9px; }
  .viewport-presets button[data-width="1024"],
  .viewport-presets button[data-width="1440"] { display: none; }
  .html-import-layout { grid-template-columns: minmax(0, 1fr); }
  .html-import-source textarea { min-height: 180px; }
  .html-import-preview { min-height: 160px; max-height: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  .builder-toast { transition: none; }
}
.project-browser {
  border-bottom: 1px solid var(--elzEPBorderColor, #d7dbe2);
}

.project-notice {
  padding: 8px;
  border: 1px solid #d7dbe2;
  border-radius: 4px;
  background: #f7f8fa;
}

.project-conflict {
  border-color: #d78b32;
  background: #fff7eb;
}

.project-component-content {
  text-align: left;
}

.project-pool-item {
  grid-template-columns: minmax(0, 1fr) 30px 30px;
  min-height: 32px;
  border-bottom: 1px solid #e2e7ea;
}

.project-pool-item > .button {
  justify-content: flex-start;
  min-width: 0;
  text-align: left;
}

.project-pool-item > .icon-button {
  display: grid;
  place-items: center;
}

.project-page-editor input {
  min-width: 0;
  min-height: 30px;
  padding: 4px 7px;
  border: 1px solid var(--border);
  border-radius: 3px;
}

.project-page-actions {
  grid-template-columns: 32px 32px minmax(0, 1fr) minmax(0, 1fr);
}


.project-slot {
  border: 1px solid var(--border);
  border-radius: 4px;
}

.project-slot > div > span { color: var(--muted); }

/* Current adapters keep only behavior-only states that did not exist in SortableJS. */
[hidden] { display: none !important; }
.layer-row.is-drop-target { box-shadow: inset 0 -2px var(--accent); }
.layer-item.is-dragging { opacity: .45; }
#content-json { min-height: 420px; }
.definition-row-actions { justify-content: flex-end; }
.definition-icon-button {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
}
.definition-icon-button:disabled { cursor: default; opacity: .4; }
.definition-prop-row.is-editing { box-shadow: inset 3px 0 var(--accent); }