/* Карусели: список, новый референс, форма генерации и редактор слайдов. Слайд рисует web/js/carousel/slide.js
   в натуральном размере (1080 по ширине), здесь — только коробка в пропорциях и масштаб transform'ом. */

.carousels { max-width: 1320px; display: grid; gap: var(--sp-5); min-width: 0; }

/* шапка экрана */
.cr-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); }
.cr-head__main { display: grid; gap: var(--sp-1); min-width: 0; flex: 1 1 320px; }
.cr-head__sub { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.cr-head__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cr-title {
  margin: 0; font-family: var(--font-display); font-size: var(--fs-l); font-weight: 600; line-height: 1.3;
  overflow-wrap: anywhere;
}
.cr-back { text-decoration: none; margin-left: calc(-1 * var(--sp-2)); }

/* сохранено / есть правки / не сохранено */
.cr-save { font-size: var(--fs-s); color: var(--mute); }
.cr-save.is-ok { color: var(--ok); }
.cr-save.is-wait { color: var(--safelight); }
.cr-save.is-bad { color: var(--bad); }

.cr-banner {
  display: grid; gap: var(--sp-3); margin: 0; padding: var(--sp-4);
  background: rgb(234 123 110 / 0.08); border: 1px solid rgb(234 123 110 / 0.4); border-radius: var(--r-panel);
}
p.cr-banner, .cr-banner__text { margin: 0; color: var(--paper); }
.cr-banner__warn { margin: 0; font-size: var(--fs-s); color: var(--safelight); }
.cr-banner__warn:empty { display: none; }
.cr-regen { max-width: 420px; }

/* коробка слайда */
.cr-stage { position: relative; overflow: hidden; width: 100%; background: var(--ink-deep); border-radius: 6px; }
.cr-stage.is-45 { aspect-ratio: 4 / 5; }
.cr-stage.is-square { aspect-ratio: 1; }
.cr-stage.is-916 { aspect-ratio: 9 / 16; }
.cr-canvas { position: absolute; top: 0; left: 0; transform-origin: 0 0; pointer-events: none; }
.cr-stage__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cr-stage--none { display: grid; place-items: center; font-size: var(--fs-s); color: var(--mute); outline: 1px dashed var(--line); }

/* список */
.cr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: var(--sp-6) var(--sp-4); align-items: start; }
.cr-list > .empty, .cr-list > p { grid-column: 1 / -1; }
.cr-item { display: grid; gap: var(--sp-3); min-width: 0; }
.cr-item__open { display: block; padding: 0; background: none; border: 0; border-radius: 8px; cursor: pointer; outline: 1px solid var(--line-soft); }
.cr-item__open:hover { outline-color: var(--line); }
.cr-item__open:focus-visible { outline: 2px solid var(--safelight); outline-offset: 2px; }
.cr-item__body { display: grid; gap: var(--sp-2); min-width: 0; }
.cr-item__title {
  font-weight: 600; line-height: 1.35; color: var(--paper); text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cr-item__title:hover { color: var(--safelight); }
.cr-item__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-width: 0; margin-right: calc(-1 * var(--sp-2)); }
.cr-item__meta { font-size: var(--fs-xs); color: var(--mute); }

/* новый референс */
.cr-new { max-width: 560px; }
.cr-form { display: grid; gap: var(--sp-4); position: static; }

/* ожидание задачи */
.cr-wait { display: grid; gap: var(--sp-4); max-width: 720px; }

/* разбор и форма генерации */
.cr-card { display: grid; gap: var(--sp-3); padding: var(--sp-5); background: var(--ink-2); border: 1px solid var(--line-soft); border-radius: var(--r-panel); min-width: 0; }
.cr-card__title { margin: 0; font-size: var(--fs-m); font-weight: 600; }
.cr-refs { display: flex; gap: var(--sp-2); margin: 0; padding: 0 0 var(--sp-1); list-style: none; overflow-x: auto; scrollbar-width: thin; }
.cr-refs li { flex: none; width: 88px; }
.cr-refs img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; background: var(--raise); }
.cr-summary { margin: 0; font-size: var(--fs-l); line-height: 1.45; color: var(--paper); }
.cr-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.cr-swatch { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--paper-dim); font-variant-numeric: tabular-nums; }
.cr-swatch__dot { width: 18px; height: 18px; border-radius: 50%; outline: 1px solid var(--line); }
.cr-wishes { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* редактор */
.cr-editor { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--sp-6); align-items: start; }
.cr-editor__main { display: grid; gap: var(--sp-4); min-width: 0; }
.cr-editor__side {
  position: sticky; top: 0; max-height: calc(100vh - 96px); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--sp-5); background: var(--ink-2); border: 1px solid var(--line-soft); border-radius: var(--r-panel);
}
.cr-fields { display: grid; gap: var(--sp-5); }
.cr-group { display: grid; gap: var(--sp-4); }
.cr-group + .cr-group { padding-top: var(--sp-5); border-top: 1px solid var(--line-soft); }
.cr-group__title { margin: 0; font-size: var(--fs-s); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mute); }
.cr-hint--warn { color: var(--safelight); }

/* лента миниатюр */
.cr-strip { display: flex; gap: var(--sp-2); margin: 0; padding: 4px 4px var(--sp-2); list-style: none; overflow-x: auto; scrollbar-width: thin; }
.cr-thumb { position: relative; flex: none; width: 92px; }
.cr-thumb.is-drag { opacity: 0.4; }
.cr-strip.is-locked .cr-thumb__btn { cursor: default; }
.cr-thumb__del:disabled { opacity: 0 !important; pointer-events: none; }
.cr-thumb.is-over .cr-thumb__btn { outline: 2px dashed var(--safelight); outline-offset: 2px; }
.cr-thumb__btn {
  position: relative; display: block; width: 100%; padding: 0; background: none; border: 0; border-radius: 6px;
  cursor: grab; outline: 1px solid var(--line-soft);
}
.cr-thumb__btn[aria-pressed="true"] { outline: 2px solid var(--safelight); outline-offset: 2px; }
.cr-thumb__btn.is-over:not([aria-pressed="true"]) { outline: 2px solid var(--bad); }
.cr-thumb__btn:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.cr-thumb__n {
  position: absolute; left: 4px; top: 4px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center;
  border-radius: 10px; background: rgb(15 12 18 / 0.78); color: var(--paper); font-size: var(--fs-xs); font-weight: 600;
}
.cr-thumb__over {
  position: absolute; left: 4px; right: 4px; bottom: 4px; padding: 1px 4px; border-radius: 4px;
  background: var(--bad); color: #2a0a06; font-size: 11px; font-weight: 600; text-align: center;
}
.cr-thumb__over[hidden] { display: none; }
.cr-thumb__del {
  position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; background: var(--ink-2); color: var(--paper-dim); cursor: pointer;
  opacity: 0; transition: opacity 0.15s;
}
.cr-thumb__del svg { width: 12px; height: 12px; }
.cr-thumb:hover .cr-thumb__del, .cr-thumb__del:focus-visible, .cr-thumb__btn[aria-pressed="true"] + .cr-thumb__del { opacity: 1; }
.cr-thumb__del:hover { color: var(--bad); border-color: var(--bad); }
.cr-thumb--add { display: flex; }
.cr-add {
  width: 92px; min-height: 92px; align-self: stretch; padding: 0 var(--sp-2);
  background: transparent; border: 1px dashed var(--line); border-radius: 6px; color: var(--paper-dim);
  font-weight: 500; cursor: pointer;
}
.cr-add:hover:not(:disabled) { border-color: var(--safelight); color: var(--safelight); }
.cr-add:disabled { opacity: 0.45; cursor: not-allowed; }

/* большое превью */
.cr-preview { display: grid; gap: var(--sp-3); justify-items: center; }
.cr-preview__frame { width: 100%; display: grid; gap: var(--sp-2); justify-items: center; }
.cr-stage--big { box-shadow: 0 18px 48px rgb(0 0 0 / 0.45); outline: 1px solid var(--line-soft); }
/* слайд целиком на экране под шапкой и лентой, но не мельче 300 px по ширине */
.cr-stage--big.is-45 { max-width: min(100%, max(300px, calc((100vh - 340px) * 0.8))); }
.cr-stage--big.is-square { max-width: min(100%, max(300px, calc(100vh - 340px))); }
.cr-stage--big.is-916 { max-width: min(100%, max(260px, calc((100vh - 340px) * 0.5625))); }
/* над слайдом, а не поверх него: плашка не закрывает текст, который не влез */
.cr-plates { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }
.cr-plates:empty { display: none; }
.cr-plate { padding: 4px 10px; border-radius: 5px; font-size: var(--fs-s); font-weight: 600; box-shadow: 0 4px 14px rgb(0 0 0 / 0.35); }
.cr-plate--bad { background: var(--bad); color: #2a0a06; }
.cr-plate--warn { background: var(--safelight); color: var(--safelight-ink); }
.cr-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-2); }
.cr-tools__n { margin-right: var(--sp-2); font-size: var(--fs-s); color: var(--mute); }
.cr-caption { max-width: 720px; width: 100%; justify-self: center; }

/* пункты */
.cr-bullets { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; counter-reset: b; }
.cr-bullet { display: flex; gap: var(--sp-1); align-items: center; }
.cr-bullet .input { flex: 1; min-width: 0; }
.cr-bullet-add { justify-self: start; }

/* цвет */
.cr-color-field { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-s); color: var(--paper-dim); cursor: pointer; }
.cr-color {
  width: 40px; height: 32px; padding: 2px; border: 1px solid var(--line); border-radius: var(--r-control);
  background: var(--raise); cursor: pointer;
}
.cr-color:focus-visible { outline: 2px solid var(--safelight); outline-offset: 2px; }

@media (max-width: 1023px) {
  .cr-editor { grid-template-columns: minmax(0, 1fr); }
  .cr-editor__side { position: static; max-height: none; overflow: visible; }
}
@media (max-width: 767px) {
  .carousels { gap: var(--sp-4); }
  .cr-editor__side, .cr-card { padding: var(--sp-4); }
  .cr-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-3); }
  .cr-thumb, .cr-add { width: 72px; }
  .cr-add { min-height: 72px; }
  .cr-thumb__del { opacity: 1; }
  .cr-stage--big.is-45, .cr-stage--big.is-square, .cr-stage--big.is-916 { max-width: 100%; }
  .cr-wishes { grid-template-columns: minmax(0, 1fr); }
  .cr-summary { font-size: var(--fs-m); }
}
@media (prefers-reduced-motion: reduce) {
  .cr-thumb__del { transition: none; }
}