/* SPUM shared editor components.
 * Purpose: reusable workspace structures for Studio pages.
 * Primitives own atomic controls; this file owns editor composition blocks.
 */

:is(
  .spum-editor-page,
  .spum-editor-main,
  .spum-editor-workspace,
  .spum-editor-tabs,
  .spum-editor-body,
  .spum-editor-toolbar,
  .spum-editor-composer,
  .spum-control-strip__section,
  .spum-control-strip__button,
  .spum-control-strip__select,
  .spum-segmented-control__button,
  .spum-resource-list,
  .spum-resource-list__head,
  .spum-resource-list__tools,
  .spum-resource-list__items,
  .spum-resource-list__row,
  .spum-slot-rail,
  .spum-slot-row,
  .spum-asset-grid-panel,
  .spum-asset-grid,
  .spum-asset-card,
  .spum-preview-panel,
  .spum-inspector-panel,
  .spum-tool-panel,
  .spum-palette-panel,
  .spum-action-strip__button,
  .spum-overlay-backdrop,
  .spum-popover,
  .spum-popover__head,
  .spum-popover__title,
  .spum-popover__actions,
  .spum-popover__body,
  .spum-confirm,
  .spum-confirm__message,
  .spum-confirm__actions,
  .spum-confirm__button
) {
  box-sizing: border-box;
  min-width: 0;
  font-family: var(--spum-font);
}

:is(.spum-editor-page) {
  --spum-studio-side-width: 216px;
  --spum-editor-side-width: var(--spum-studio-side-width);
  --spum-editor-bg: var(--ui-workspace-bg, var(--ui-depth-3-bg));
  --spum-editor-side-bg: var(--ui-depth-2-bg);
  --spum-editor-list-bg: var(--ui-depth-3-bg);
  --spum-editor-panel-bg: var(--ui-panel-bg);
  --spum-editor-panel-bg-strong: var(--ui-panel-bg-strong);
  --spum-editor-card-bg: var(--ui-depth-4-bg);
  --spum-editor-grid-bg: var(--ui-inset-bg);
  --spum-editor-rail-bg: var(--ui-inset-bg);
  --spum-editor-border: var(--ui-border-weak);
  --spum-editor-border-subtle: color-mix(in srgb, var(--ui-border-weak), transparent 36%);
  --spum-editor-border-strong: var(--ui-border-mid);
  --spum-editor-panel-shadow: var(--ui-panel-highlight);
  display: grid;
  grid-template-columns: var(--spum-editor-side-width) minmax(0, 1fr);
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: var(--spum-editor-bg);
  color: var(--ui-text-secondary);
}

:is(.spum-editor-main) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  background: var(--spum-editor-bg);
}

:is(.spum-editor-workspace) {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  border-left: 0;
  background: var(--spum-editor-bg);
}

:is(.spum-editor-tabs) {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  height: 44px;
  min-height: 44px;
  padding: 0 var(--spum-space-16);
  overflow-x: auto;
  overflow-y: hidden;
  border: 0;
  border-bottom: 1px solid var(--spum-editor-border);
  border-radius: 0;
  background: transparent;
  scrollbar-width: none;
}

.spum-editor-tabs::-webkit-scrollbar {
  display: none;
}

.spum-editor-tabs .spum-tab {
  flex: 0 0 auto;
  min-width: 0;
  height: 100%;
  padding: 0 var(--spum-space-16);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ui-text-muted);
  font-size: var(--spum-fs-sm);
  font-weight: var(--spum-fw-medium);
}

.spum-editor-tabs .spum-tab:hover,
.spum-editor-tabs .spum-tab.is-hover {
  background: transparent;
  color: var(--ui-text-secondary);
}

.spum-editor-tabs .spum-tab.is-active,
.spum-editor-tabs .spum-tab.is-selected,
.spum-editor-tabs .spum-tab[aria-selected="true"] {
  border-bottom-color: var(--ui-accent);
  background: transparent;
  color: var(--ui-text-primary);
  box-shadow: none;
  font-weight: var(--spum-fw-semibold);
}

:is(.spum-editor-body) {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--spum-editor-bg);
}

:is(.spum-editor-toolbar) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  height: 56px;
  min-height: 56px;
  padding: var(--spum-space-12) var(--spum-space-16);
  overflow: hidden;
  border-bottom: 1px solid var(--spum-editor-border);
  background: transparent;
}

:is(.spum-filter-row) {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  gap: var(--spum-space-8);
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.spum-filter-row::-webkit-scrollbar {
  display: none;
}

.spum-filter-row > :is(.spum-chip) {
  flex: 0 0 auto;
}

:is(.spum-view-controls) {
  display: flex;
  align-items: center;
  gap: var(--spum-space-8);
  min-width: 0;
}

:is(.spum-segmented-control) {
  display: inline-flex;
  align-items: center;
  gap: var(--spum-space-4);
  min-width: 0;
}

:is(.spum-segmented-control__button) {
  display: grid;
  place-items: center;
  width: var(--spum-control-h-sm);
  height: var(--spum-control-h-sm);
  min-width: var(--spum-control-h-sm);
  padding: 0;
  border: 1px solid var(--ui-border-mid);
  border-radius: var(--spum-radius-sm);
  background: var(--ui-control-bg);
  color: var(--ui-text-muted);
  font-size: var(--spum-fs-xs);
  font-weight: var(--spum-fw-semibold);
  cursor: pointer;
}

:is(.spum-segmented-control__button:hover) {
  border-color: var(--ui-border-strong);
  background: var(--ui-control-bg-hover);
  color: var(--ui-text-secondary);
}

:is(.spum-segmented-control__button.is-active),
:is(.spum-segmented-control__button[aria-pressed="true"]) {
  border-color: var(--ui-accent-border);
  background: var(--ui-accent-bg);
  color: var(--ui-text-primary);
}

:is(.spum-resource-list) {
  display: grid;
  grid-template-rows: 48px auto minmax(0, 1fr) auto;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--spum-editor-border);
  background: var(--spum-editor-side-bg);
}

:is(.spum-resource-list__head) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spum-space-8);
  height: 48px;
  min-height: 48px;
  padding: 0 var(--spum-space-16);
  border-bottom: 1px solid var(--spum-editor-border);
  background: transparent;
}

:is(.spum-resource-list__tools) {
  display: flex;
  flex-direction: column;
  gap: var(--spum-space-8);
  padding: var(--spum-space-12) var(--spum-space-16);
}

:is(.spum-resource-list__search),
:is(.spum-resource-list__tabs) {
  width: 100%;
}

:is(.spum-resource-list__tabs) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  height: var(--spum-control-h-md);
}

:is(.spum-resource-list__items) {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  margin: var(--spum-space-8);
  padding: var(--spum-space-4) 0;
  overflow-y: auto;
  border: 1px solid var(--spum-editor-border-subtle);
  border-radius: var(--spum-radius-md);
  background: var(--spum-editor-list-bg);
  box-shadow: var(--spum-editor-panel-shadow);
}

:is(.spum-resource-list__row) {
  position: relative;
  display: grid;
  grid-template-columns: var(--spum-resource-row-template, 44px minmax(0, 1fr) 20px);
  align-items: center;
  gap: var(--spum-space-12);
  height: 64px;
  min-height: 64px;
  margin: 0;
  padding: 0 var(--spum-space-12);
  border: 0;
  border-bottom: 1px solid var(--spum-editor-border-subtle);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ui-text-secondary);
  cursor: pointer;
}

:is(.spum-resource-list__row--create) {
  border-bottom: 0;
  opacity: .7;
}

:is(.spum-resource-list__row--create:hover) {
  opacity: 1;
}

:is(.spum-resource-list__row:hover) {
  background: var(--ui-control-bg-hover);
  color: var(--ui-text-primary);
}

:is(.spum-resource-list__row.is-active),
:is(.spum-resource-list__row.is-selected),
:is(.spum-resource-list__row[aria-selected="true"]) {
  border-bottom-color: color-mix(in srgb, var(--ui-accent), transparent 84%);
  background: var(--ui-selected-tint, var(--ui-accent-bg));
  box-shadow: inset 3px 0 0 var(--ui-accent);
  color: var(--ui-text-primary);
}

:is(.spum-resource-list__avatar) {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  max-height: 38px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--spum-editor-border-strong);
  border-radius: var(--spum-radius-md);
  background: var(--spum-editor-card-bg);
  color: var(--ui-text-muted);
  font-size: 10px;
}

:is(.spum-resource-list__avatar--placeholder) {
  border-style: dashed;
  background: var(--ui-control-bg);
}

:is(.spum-resource-list__thumb) {
  width: 100%;
  height: 100%;
  padding: var(--spum-space-2);
  object-fit: contain;
  image-rendering: pixelated;
}

:is(.spum-resource-list__info) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spum-space-4);
  min-width: 0;
}

:is(.spum-resource-list__name),
:is(.spum-resource-list__meta) {
  overflow: hidden;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(.spum-resource-list__name) {
  font-size: var(--spum-fs-sm);
  font-weight: var(--spum-fw-semibold);
}

:is(.spum-resource-list__meta) {
  color: var(--ui-text-muted);
  font-size: var(--spum-fs-xs);
}

:is(.spum-resource-list__delete) {
  justify-self: end;
}

:is(.spum-resource-list__pagination) {
  display: flex;
  justify-content: center;
  gap: var(--spum-space-4);
  padding: var(--spum-space-8);
  margin-top: auto;
}

:is(.spum-resource-list__page-btn) {
  display: grid;
  place-items: center;
  width: var(--spum-control-h-sm);
  height: var(--spum-control-h-sm);
  border: 1px solid var(--ui-border-mid);
  border-radius: var(--spum-radius-sm);
  background: var(--ui-control-bg);
  color: var(--ui-text-muted);
  font-size: var(--spum-fs-xs);
  cursor: pointer;
}

:is(.spum-resource-list__page-btn.is-active) {
  border-color: var(--ui-accent-border);
  background: var(--ui-accent-bg);
  color: var(--ui-text-primary);
}

:is(.spum-editor-composer) {
  display: grid;
  grid-template-columns:
    var(--spum-editor-rail-width, 150px)
    minmax(0, 1fr)
    var(--spum-editor-preview-width, 300px);
  grid-template-rows: minmax(0, 1fr) var(--spum-editor-inspector-height, 180px);
  grid-template-areas:
    "rail assets preview"
    "inspector inspector tools";
  flex: 1 1 auto;
  min-height: 0;
  gap: var(--spum-space-8);
  padding: var(--spum-space-16);
  overflow: hidden;
  background: var(--spum-editor-bg);
}

:is(.spum-slot-rail) {
  grid-area: rail;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--spum-editor-border);
  border-radius: var(--spum-radius-md);
  background: var(--spum-editor-rail-bg);
  box-shadow: var(--spum-editor-panel-shadow);
}

:is(.spum-slot-rail__scroll) {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--spum-space-8) 0;
}

:is(.spum-slot-rail__controls) {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spum-space-4);
  padding: var(--spum-space-8);
  border-top: 1px solid var(--spum-editor-border);
  background: var(--ui-control-bg);
}

:is(.spum-slot-row) {
  display: flex;
  align-items: center;
  gap: var(--spum-space-8);
  height: 32px;
  min-height: 32px;
  padding: 0 var(--spum-space-12);
  border-bottom: 1px solid var(--spum-editor-border-subtle);
  background: transparent;
  color: var(--ui-text-secondary);
  cursor: pointer;
}

:is(.spum-slot-row:hover) {
  background: var(--ui-control-bg-hover);
}

:is(.spum-slot-row.is-active),
:is(.spum-slot-row.is-selected) {
  background: var(--ui-accent-bg);
  box-shadow: inset 2px 0 0 var(--ui-accent);
  color: var(--ui-text-primary);
}

:is(.spum-slot-row__label) {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: var(--spum-fs-xs);
  font-weight: var(--spum-fw-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(.spum-slot-row.has-item .spum-slot-row__label) {
  color: var(--ui-accent);
  font-weight: var(--spum-fw-semibold);
}

:is(.spum-slot-row__swatch) {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border: 1px solid var(--spum-editor-border-strong);
  border-radius: 50%;
  opacity: .44;
}

:is(.spum-slot-row__swatch.has-color) {
  opacity: 1;
}

:is(.spum-asset-grid-panel) {
  position: relative;
  grid-area: assets;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--spum-editor-border);
  border-radius: var(--spum-radius-md);
  background: var(--spum-editor-grid-bg);
  box-shadow: var(--spum-editor-panel-shadow);
}

:is(.spum-asset-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-w, 56px), 1fr));
  grid-auto-rows: var(--card-h, 72px);
  gap: var(--spum-space-8);
  height: 100%;
  min-height: 0;
  padding: var(--spum-space-16);
  overflow-y: auto;
  background: transparent;
  scrollbar-gutter: stable;
}

:is(.spum-asset-card) {
  display: grid;
  place-items: end start;
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--spum-editor-border-subtle);
  border-radius: var(--spum-radius-md);
  background-color: var(--spum-editor-card-bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: none;
  color: var(--ui-text-muted);
  cursor: pointer;
  image-rendering: pixelated;
  transition:
    background-color var(--spum-transition-fast),
    border-color var(--spum-transition-fast),
    box-shadow var(--spum-transition-fast);
}

:is(.spum-asset-card:hover) {
  border-color: var(--spum-editor-border-strong);
  background-color: var(--ui-control-bg-hover);
}

:is(.spum-asset-card.is-selected),
:is(.spum-asset-card.is-equipped),
:is(.spum-asset-card[aria-selected="true"]) {
  border-color: var(--ui-accent-border);
  background-color: var(--ui-accent-bg);
  box-shadow: inset 0 0 0 1px var(--ui-accent-border);
}

:is(.spum-asset-card__label) {
  display: none;
}

:is(.spum-floating-controls) {
  display: none;
}

:is(.spum-preview-panel) {
  position: relative;
  grid-area: preview;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--spum-editor-border);
  border-radius: var(--spum-radius-md);
  background: var(--spum-editor-panel-bg);
  box-shadow: var(--spum-editor-panel-shadow);
}

:is(.spum-preview-panel__canvas) {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
}

:is(.spum-control-strip) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--spum-space-8);
  min-height: 44px;
  padding: var(--spum-space-8) var(--spum-space-12);
  border-top: 1px solid var(--spum-editor-border);
  background: var(--ui-control-bg);
}

:is(.spum-control-strip__section) {
  display: flex;
  align-items: center;
  gap: var(--spum-space-4);
  min-width: 0;
}

:is(.spum-control-strip__section--start),
:is(.spum-control-strip__section--end) {
  flex: 1 1 0;
}

:is(.spum-control-strip__section--end) {
  justify-content: flex-end;
}

:is(.spum-control-strip__select) {
  height: var(--spum-control-h-md);
  min-width: 0;
  padding: 0 var(--spum-space-8);
  border: 1px solid var(--spum-editor-border);
  border-radius: var(--spum-radius-sm);
  background: var(--ui-control-bg);
  color: var(--ui-text-secondary);
  font-family: inherit;
  font-size: var(--spum-fs-xs);
  outline: none;
  cursor: pointer;
}

:is(.spum-control-strip__button) {
  display: grid;
  place-items: center;
  width: var(--spum-control-h-md);
  height: var(--spum-control-h-md);
  min-width: var(--spum-control-h-md);
  padding: 0;
  border: 1px solid var(--spum-editor-border);
  border-radius: var(--spum-radius-sm);
  background: var(--ui-control-bg);
  color: var(--ui-text-muted);
  cursor: pointer;
}

:is(.spum-control-strip__button:hover) {
  border-color: var(--spum-editor-border-strong);
  background: var(--ui-control-bg-hover);
  color: var(--ui-text-primary);
}

:is(.spum-control-strip__button--primary) {
  border-color: var(--ui-accent-border);
  background: var(--ui-accent);
  color: var(--ui-depth-1-bg);
}

:is(.spum-inspector-panel) {
  grid-area: inspector;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--spum-editor-border);
  border-radius: var(--spum-radius-md);
  background: var(--spum-editor-panel-bg);
  box-shadow: var(--spum-editor-panel-shadow);
}

:is(.spum-inspector-panel__inner) {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

:is(.spum-inspector-head) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spum-space-12);
  min-height: 48px;
  padding: 0 var(--spum-space-16);
  border-bottom: 1px solid var(--spum-editor-border);
  background: var(--ui-control-bg);
}

:is(.spum-inspector-head__main),
:is(.spum-inspector-head__actions) {
  display: inline-flex;
  align-items: center;
  gap: var(--spum-space-8);
  min-width: 0;
}

:is(.spum-inspector-head__title) {
  overflow: hidden;
  color: var(--ui-text-primary);
  font-size: var(--spum-fs-sm);
  font-weight: var(--spum-fw-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(.spum-tool-button) {
  display: inline-grid;
  place-items: center;
  width: var(--spum-control-h-md);
  height: var(--spum-control-h-md);
  min-width: var(--spum-control-h-md);
  padding: 0;
  border: 1px solid var(--ui-border-mid);
  border-radius: var(--spum-radius-sm);
  background: var(--ui-control-bg);
  color: var(--ui-text-muted);
  cursor: pointer;
}

:is(.spum-tool-button:hover),
:is(.spum-tool-button.is-hover) {
  border-color: var(--ui-border-strong);
  background: var(--ui-control-bg-hover);
  color: var(--ui-text-primary);
}

:is(.spum-tool-button.is-active),
:is(.spum-tool-button[aria-pressed="true"]) {
  border-color: var(--ui-accent-border);
  background: var(--ui-accent-bg);
  color: var(--ui-text-primary);
}

:is(.spum-detail-panel) {
  min-height: 0;
  overflow: hidden;
}

:is(.spum-detail-panel__body) {
  display: flex;
  align-items: stretch;
  gap: var(--spum-space-12);
  min-height: 0;
}

:is(.spum-detail-panel__media) {
  flex: 0 0 auto;
  width: 80px;
  min-height: 100%;
  border: 1px solid var(--spum-editor-border);
  border-radius: var(--spum-radius-md);
  background-color: var(--ui-inset-bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  image-rendering: pixelated;
}

:is(.spum-detail-panel__content) {
  display: grid;
  align-content: center;
  gap: var(--spum-space-6);
  min-width: 0;
}

:is(.spum-detail-panel__title) {
  overflow: hidden;
  color: var(--ui-text-primary);
  font-size: var(--spum-fs-sm);
  font-weight: var(--spum-fw-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(.spum-detail-panel__row) {
  display: flex;
  align-items: center;
  gap: var(--spum-space-6);
  min-width: 0;
}

:is(.spum-detail-panel__label) {
  flex: 0 0 auto;
  min-width: 32px;
  color: var(--ui-text-faint);
  font-size: var(--spum-fs-xs);
  font-weight: var(--spum-fw-semibold);
  text-transform: uppercase;
}

:is(.spum-detail-panel__value),
:is(.spum-detail-panel__badge),
:is(.spum-detail-panel__tag) {
  min-width: 0;
  overflow: hidden;
  padding: 2px var(--spum-space-6);
  border: 1px solid var(--spum-editor-border);
  border-radius: var(--spum-radius-sm);
  background: var(--ui-control-bg);
  color: var(--ui-text-secondary);
  font-size: var(--spum-fs-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(.spum-detail-panel__tags) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spum-space-4);
  min-width: 0;
}

:is(.spum-empty-state) {
  display: grid;
  place-items: center;
  min-height: 100%;
  padding: var(--spum-space-16);
  color: var(--ui-text-muted);
  font-size: var(--spum-fs-xs);
  text-align: center;
}

:is(.spum-tool-panel) {
  grid-area: tools;
  display: flex;
  flex-direction: column;
  gap: var(--spum-space-8);
  min-height: 0;
  overflow: hidden;
}

:is(.spum-action-strip) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spum-space-6);
  min-height: var(--spum-control-h-lg);
}

:is(.spum-action-strip__button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spum-space-4);
  min-width: 0;
  height: var(--spum-control-h-lg);
  min-height: var(--spum-control-h-lg);
  padding: 0 var(--spum-space-8);
  border: 1px solid var(--ui-border-mid);
  border-radius: var(--spum-radius-sm);
  background: var(--ui-control-bg);
  color: var(--ui-text-secondary);
  font-size: var(--spum-fs-xs);
  font-weight: var(--spum-fw-semibold);
  cursor: pointer;
}

:is(.spum-action-strip__button:hover) {
  border-color: var(--ui-border-strong);
  background: var(--ui-control-bg-hover);
  color: var(--ui-text-primary);
}

:is(.spum-overlay-backdrop) {
  position: fixed;
  inset: 0;
  z-index: var(--spum-overlay-z, 99);
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: default;
}

:is(.spum-overlay-backdrop--under-popover) {
  --spum-overlay-z: 30;
}

:is(.spum-overlay-backdrop--modal) {
  --spum-overlay-z: 99;
}

:is(.spum-popover) {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: var(--spum-popover-z, 100);
  display: flex;
  flex-direction: column;
  width: min(var(--spum-popover-w, 420px), calc(100vw - 32px));
  max-height: min(var(--spum-popover-max-h, 56vh), calc(100vh - 32px));
  overflow: hidden;
  border: 1px solid var(--spum-editor-border-strong);
  border-radius: var(--spum-radius-lg);
  background: var(--spum-editor-panel-bg-strong, var(--ui-panel-bg-strong));
  box-shadow: var(--spum-shadow-lg);
  transform: translate(-50%, -50%);
}

:is(.spum-popover__head) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spum-space-8);
  min-height: var(--spum-control-h-md);
  padding: var(--spum-space-12) var(--spum-space-16);
  border-bottom: 1px solid var(--spum-editor-border);
  flex-shrink: 0;
}

:is(.spum-popover__title) {
  overflow: hidden;
  color: var(--ui-text-primary);
  font-size: var(--spum-fs-sm);
  font-weight: var(--spum-fw-bold, 700);
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(.spum-popover__actions) {
  display: flex;
  align-items: center;
  gap: var(--spum-space-8);
  flex: 0 0 auto;
}

:is(.spum-popover__body) {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: var(--spum-space-12) var(--spum-space-16);
}

:is(.spum-confirm) {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: var(--spum-confirm-z, 101);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spum-space-16);
  width: var(--spum-confirm-w, max-content);
  max-width: calc(100vw - 32px);
  padding: var(--spum-space-24, 24px) var(--spum-space-32, 32px);
  border: 1px solid var(--spum-editor-border-strong);
  border-radius: var(--spum-radius-lg);
  background: var(--spum-editor-panel-bg-strong, var(--ui-panel-bg-strong));
  box-shadow: var(--spum-shadow-lg);
  transform: translate(-50%, -50%);
}

:is(.spum-confirm--danger) {
  border-color: color-mix(in srgb, var(--ui-danger), transparent 75%);
}

:is(.spum-confirm__message) {
  color: var(--ui-text-primary);
  font-size: var(--spum-fs-sm);
  font-weight: var(--spum-fw-semibold);
  text-align: center;
}

:is(.spum-confirm__actions) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spum-space-8);
}

:is(.spum-confirm__button) {
  min-height: var(--spum-control-h-sm);
  padding: 0 var(--spum-space-20, 20px);
  border: 1px solid transparent;
  border-radius: var(--spum-radius-sm);
  background: var(--ui-control-bg);
  color: var(--ui-text-secondary);
  font-size: var(--spum-fs-xs);
  font-weight: var(--spum-fw-semibold);
  cursor: pointer;
  transition:
    background-color var(--spum-transition-fast),
    border-color var(--spum-transition-fast),
    color var(--spum-transition-fast);
}

:is(.spum-confirm__button--danger) {
  border-color: color-mix(in srgb, var(--ui-danger), transparent 60%);
  background: color-mix(in srgb, var(--ui-danger), transparent 80%);
  color: var(--ui-danger);
}

:is(.spum-confirm__button--danger:hover) {
  background: color-mix(in srgb, var(--ui-danger), transparent 65%);
}

:is(.spum-confirm__button--secondary) {
  border-color: var(--ui-border-mid);
  background: var(--ui-control-bg);
  color: var(--ui-text-secondary);
}

:is(.spum-confirm__button--secondary:hover) {
  border-color: var(--ui-border-strong);
  background: var(--ui-control-bg-hover);
  color: var(--ui-text-primary);
}

:is(.spum-palette-panel) {
  display: grid;
  gap: var(--spum-space-8);
  min-height: 0;
  padding: var(--spum-space-12);
  overflow: hidden;
  border: 1px solid var(--spum-editor-border);
  border-radius: var(--spum-radius-md);
  background: var(--spum-editor-panel-bg);
  box-shadow: var(--spum-editor-panel-shadow);
}

:is(.spum-palette-panel__head),
:is(.spum-palette-bar__head) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spum-space-8);
}

:is(.spum-palette-panel__title),
:is(.spum-palette-bar__title) {
  overflow: hidden;
  color: var(--ui-text-secondary);
  font-size: var(--spum-fs-xs);
  font-weight: var(--spum-fw-bold);
  letter-spacing: 0;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

:is(.spum-palette-panel__body),
:is(.spum-palette-bar__body) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--spum-space-8);
  min-width: 0;
}

:is(.spum-palette-panel__current),
:is(.spum-palette-bar__current) {
  display: grid;
  gap: var(--spum-space-6);
}

:is(.spum-palette-panel__current-swatch),
:is(.spum-palette-bar__current-swatch) {
  width: 42px;
  height: 42px;
  border: 1px solid var(--spum-editor-border-strong);
  border-radius: var(--spum-radius-sm);
  cursor: pointer;
}

:is(.spum-palette-panel__current-swatch:hover),
:is(.spum-palette-bar__current-swatch:hover) {
  border-color: var(--ui-accent-border);
}

:is(.spum-palette-panel__current-swatch--prev),
:is(.spum-palette-bar__current-swatch--prev) {
  opacity: .6;
}

:is(.spum-palette-panel__current-swatch--prev:hover),
:is(.spum-palette-bar__current-swatch--prev:hover) {
  opacity: 1;
}

:is(.spum-palette-panel__grid),
:is(.spum-palette-bar__grid) {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--spum-space-4);
  min-width: 0;
}

:is(.spum-palette-panel__swatch) {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--spum-editor-border-subtle);
  border-radius: var(--spum-radius-sm);
  color: var(--ui-text-primary);
  cursor: pointer;
  transition:
    border-color var(--spum-transition-fast),
    transform var(--spum-transition-fast);
}

:is(.spum-palette-panel__swatch:hover) {
  border-color: var(--ui-border-strong);
  transform: scale(1.08);
}

:is(.spum-palette-panel__swatch.is-active) {
  border-color: var(--ui-accent-border);
  box-shadow: inset 0 0 0 1px var(--ui-accent-border);
}

:is(.spum-palette-panel__swatch--add) {
  border-style: dashed;
  background: var(--ui-control-bg);
  color: var(--ui-text-muted);
}

:is(.spum-palette-panel__swatch--empty) {
  cursor: default;
  opacity: .36;
}

:is(.spum-toggle) {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

:is(.spum-toggle input) {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

:is(.spum-toggle__track) {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 34px;
  height: 20px;
  padding: 2px;
  border: 1px solid var(--ui-border-mid);
  border-radius: 999px;
  background: var(--ui-control-bg);
}

:is(.spum-toggle__thumb) {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ui-text-muted);
  transition:
    background-color var(--spum-transition-fast),
    transform var(--spum-transition-fast);
}

:is(.spum-toggle input:checked + .spum-toggle__track) {
  border-color: var(--ui-accent-border);
  background: var(--ui-accent-bg);
}

:is(.spum-toggle input:checked + .spum-toggle__track .spum-toggle__thumb) {
  background: var(--ui-accent);
  transform: translateX(14px);
}

:is(
  .spum-slot-row,
  .spum-asset-card,
  .spum-tool-button,
  .spum-palette-panel__swatch,
  .spum-resource-list__page-btn,
  .spum-confirm__button
):focus-visible {
  outline: none;
  box-shadow: var(--ui-focus-ring);
}

@media (max-width: 1120px) {
  :is(.spum-editor-page) {
    grid-template-columns: minmax(184px, 28vw) minmax(0, 1fr);
  }

  :is(.spum-editor-composer) {
    grid-template-columns: minmax(112px, .42fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(180px, .38fr) auto;
    grid-template-areas:
      "rail assets"
      "preview preview"
      "inspector tools";
  }
}