.slide-preview {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background: radial-gradient(circle at 50% 30%, #3b0b12, #08080a 58%);
}

.slide-preview > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #050505;
}

.ready-label {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 5px 9px;
  color: #8ef0c2;
  font-size: 11px;
  border: 1px solid #3ddc9766;
  border-radius: 99px;
  background: #071b13dd;
}

.slide-placeholder {
  height: 100%;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--muted);
  text-align: center;
}

.slide-placeholder b { color: #fff; }
.slide-placeholder span { font-size: 12px; line-height: 1.8; }
.slide-placeholder.failed-preview { color: #ffacb5; background: #260b10; }

.spinner {
  width: 34px;
  height: 34px;
  border: 3px solid #ffffff22;
  border-top-color: var(--red);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.failed-preview .spinner { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.render-progress {
  display: grid;
  gap: 12px;
  margin: 20px 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #17171a;
}

.render-progress > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.render-progress span { color: var(--muted); font-size: 12px; }
.render-progress > i { display: block; height: 8px; overflow: hidden; border-radius: 99px; background: #292930; }
.render-progress > i > em { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #a20d1c, var(--red)); transition: width .4s; }

.prompt-help,
.prompt-field {
  grid-column: 1 / -1;
}

.prompt-help {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid #ef1b2d55;
  border-radius: 14px;
  background: #1b0c10;
}

.prompt-help p { margin: 8px 0 0; color: var(--muted); }
.prompt-help code { direction: ltr; display: inline-block; color: #ff9aa5; }
.prompt-field textarea { min-height: 300px; direction: ltr; text-align: left; font: 13px/1.75 Consolas, monospace; }

@media (max-width: 760px) {
  .render-progress > div { flex-direction: column; }
}