.custom-spread-page {
  display: grid;
  gap: var(--space-7);
}

.custom-spread-collection__head,
.custom-spread-builder__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-5);
}

.custom-spread-collection__head p,
.custom-spread-builder__head p {
  max-width: 720px;
  margin: var(--space-2) 0 0;
  color: var(--text-soft);
}

.custom-spread-collection__actions,
.custom-spread-empty__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.custom-builder-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 1px;
  list-style: none;
  border: 1px solid var(--glass-line-soft);
  border-radius: var(--radius-lg);
  background: var(--glass-line-soft);
  overflow: hidden;
}

.custom-builder-steps li { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); color: var(--text-muted); background: rgba(7, 20, 28, .92); }
.custom-builder-steps li.is-active { color: var(--text-main); background: linear-gradient(110deg, rgba(20, 64, 82, .74), rgba(69, 50, 25, .34)); }
.custom-builder-steps span { color: var(--accent-ice); font: 600 var(--text-xs)/1 var(--font-mono); }

.custom-spread-collection__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.custom-spread-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--glass-line-soft);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 90% 8%, rgba(115, 200, 228, .1), transparent 34%),
    linear-gradient(145deg, rgba(10, 29, 39, .82), rgba(13, 18, 26, .9));
}

.custom-spread-card h2 { margin: var(--space-2) 0; font-size: var(--text-xl); }
.custom-spread-card p { margin: 0; color: var(--text-soft); }
.custom-spread-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); color: var(--text-muted); font-size: var(--text-sm); }
.custom-spread-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.custom-spread-empty {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-6);
  border: 1px solid var(--glass-line-soft);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(13, 39, 51, .84), rgba(19, 20, 27, .92));
}

.custom-spread-empty h2 { margin-bottom: var(--space-2); }
.custom-spread-empty p { max-width: 680px; margin: 0; color: var(--text-soft); }

.custom-spread-builder {
  display: grid;
  grid-template-columns: minmax(220px, .34fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.custom-spread-templates,
.custom-spread-editor {
  border: 1px solid var(--glass-line-soft);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, rgba(9, 28, 38, .86), rgba(12, 18, 25, .94));
}

.custom-spread-templates {
  position: sticky;
  top: calc(var(--product-header-height, 88px) + var(--space-4));
  max-height: calc(100vh - var(--product-header-height, 88px) - var(--space-7));
  overflow: hidden;
}

.custom-spread-templates__head { padding: var(--space-5); border-bottom: 1px solid var(--glass-line-soft); }
.custom-spread-templates__head h2 { margin-bottom: var(--space-2); font-size: var(--text-lg); }
.custom-spread-templates__head p { margin: 0 0 var(--space-4); color: var(--text-muted); font-size: var(--text-sm); }
.custom-spread-templates__list { display: grid; gap: 1px; max-height: 54vh; overflow: auto; padding: var(--space-2); }

.custom-position-template {
  display: grid;
  gap: var(--space-1);
  width: 100%;
  padding: var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-main);
  text-align: left;
  background: transparent;
  transition: border-color .22s ease, background-color .22s ease, box-shadow .22s ease;
}

.custom-position-template:hover,
.custom-position-template:focus-visible {
  border-color: rgba(123, 207, 235, .26);
  background: rgba(21, 54, 68, .44);
  box-shadow: inset 0 0 24px rgba(93, 188, 220, .05);
}

.custom-position-template small { color: var(--text-muted); }

.custom-spread-editor { overflow: hidden; }
.custom-spread-editor__meta { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(180px, .6fr); gap: var(--space-4); padding: var(--space-5); border-bottom: 1px solid var(--glass-line-soft); }
.custom-spread-editor__meta .field--wide { grid-column: 1 / -1; }

.custom-spread-editor__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(90deg, rgba(21, 64, 80, .38), rgba(71, 50, 24, .2));
  border-bottom: 1px solid var(--glass-line-soft);
}

.custom-spread-editor__toolbar p { margin: 0; color: var(--text-soft); font-size: var(--text-sm); }
.custom-spread-positions { display: grid; gap: var(--space-3); padding: var(--space-5); }

.custom-position {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4);
  border: 1px solid var(--glass-line-soft);
  border-radius: var(--radius-md);
  background: rgba(6, 18, 26, .58);
}

.custom-position__number {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(214, 168, 95, .28);
  border-radius: 50%;
  color: var(--accent-amber-light);
  font: 600 var(--text-xs)/1 var(--font-mono);
}

.custom-position__fields { display: grid; grid-template-columns: minmax(180px, .75fr) minmax(220px, 1.25fr); gap: var(--space-3); }
.custom-position__fields .field { margin: 0; }
.custom-position__layout { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(90px, 1fr)); gap: var(--space-3); }
.custom-position__actions { display: grid; grid-template-columns: repeat(2, 34px); gap: var(--space-2); }
.custom-position__actions button { width: 34px; height: 34px; padding: 0; }
.custom-position__remove { grid-column: 1 / -1; width: 100% !important; color: var(--text-muted); }

.custom-spread-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  margin: 0 var(--space-5) var(--space-5);
  padding: var(--space-4);
  border: 1px solid rgba(112, 201, 229, .17);
  border-radius: var(--radius-md);
  background: radial-gradient(circle at 80% 50%, rgba(93, 188, 220, .11), transparent 34%), rgba(6, 19, 27, .72);
}

.custom-spread-preview__cards { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.custom-spread-preview__card { display: grid; place-items: center; width: 40px; aspect-ratio: 2 / 3; border: 1px solid rgba(214, 168, 95, .28); border-radius: 6px; color: var(--text-muted); background: linear-gradient(145deg, rgba(18, 49, 64, .86), rgba(30, 24, 27, .9)); font: 600 var(--text-xs)/1 var(--font-mono); }
.custom-spread-preview strong,
.custom-spread-preview small { display: block; }
.custom-spread-preview small { margin-top: var(--space-1); color: var(--text-muted); }

.custom-spread-editor__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: 0 var(--space-5) var(--space-5); }
.custom-spread-editor__actions .form-error { flex: 1; min-width: 220px; margin: 0; }
.custom-spread-warning { padding: var(--space-3) var(--space-4); border-left: 2px solid rgba(214, 168, 95, .62); color: var(--text-soft); background: rgba(75, 51, 22, .16); }

@media (max-width: 980px) {
  .custom-spread-collection__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .custom-spread-builder { grid-template-columns: 1fr; }
  .custom-spread-templates { position: static; max-height: none; }
  .custom-spread-templates__list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 320px; }
}

@media (max-width: 680px) {
  .custom-spread-collection__head,
  .custom-spread-builder__head,
  .custom-spread-empty,
  .custom-spread-editor__meta,
  .custom-position__fields,
  .custom-position__layout { grid-template-columns: 1fr; }
  .custom-spread-collection__head,
  .custom-spread-builder__head { align-items: start; flex-direction: column; }
  .custom-spread-collection__grid,
  .custom-spread-templates__list { grid-template-columns: 1fr; }
  .custom-position { grid-template-columns: auto minmax(0, 1fr); }
  .custom-position__actions { grid-column: 2; grid-template-columns: repeat(3, 34px); }
  .custom-position__remove { grid-column: auto; width: 34px !important; font-size: 0; }

  .custom-spread-preview { grid-template-columns: 1fr; }
  .custom-builder-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .custom-position-template { transition: none; }
}