/* ── UGC PRODUCT VIDEO ─────────────────────────────────────────────── */

.ugc-step { margin-bottom: 14px; }
.ugc-step-head { display: flex; align-items: baseline; gap: 10px; }
.ugc-step-no { font-size: 11px; color: var(--newsprint-mute); flex: 0 0 auto; }
.ugc-step-title { font-size: 20px; letter-spacing: 0.02em; }
.ugc-step-sub { margin: 2px 0 10px; line-height: 1.4; }

/* Picker grids. Two up on a phone, three on a wide page — a face has to be big
   enough to actually judge, which rules out a dense grid. */
.ugc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 10px; }
@media (min-width: 700px) { .ugc-grid { grid-template-columns: repeat(3, 1fr); } }
.ugc-grid--wide { grid-template-columns: repeat(2, 1fr); }

.ugc-card {
  display: flex; flex-direction: column; gap: 2px;
  padding: 0 0 6px; overflow: hidden;
  background: var(--paper-2);
  border: var(--border-ink); border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  cursor: pointer; text-align: left;
  font-family: var(--f-body); color: var(--ink);
  transition: transform 0.12s, box-shadow 0.12s;
}
.ugc-card:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--panel-shadow); }
.ugc-card.is-on {
  border-color: var(--riso-pink-ink);
  box-shadow: var(--shadow-harder);
  transform: translate(-1px, -1px);
}
.ugc-card-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.ugc-card-name { font-family: var(--f-head); font-weight: 700; font-size: 13px; padding: 4px 8px 0; }
.ugc-card-sub { font-size: 10px; color: var(--newsprint-mute); padding: 0 8px; line-height: 1.3; }

.ugc-script { width: 100%; resize: vertical; line-height: 1.5; }
.ugc-script-actions { gap: 10px; margin-top: 8px; align-items: center; }

/* ── the model that films it ── */
.ugc-engines { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 12px; }
@media (min-width: 700px) { .ugc-engines { grid-template-columns: 1fr 1fr; } }
.ugc-engine {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  padding: 10px 12px; text-align: left;
  background: var(--speech-fill); color: var(--ink);
  border: 2px solid var(--ink-line); border-radius: var(--radius);
  box-shadow: 2px 2px 0 var(--panel-shadow);
  cursor: pointer; font-family: var(--f-body);
}
.ugc-engine:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--panel-shadow); }
.ugc-engine.is-on { background: var(--ink); color: var(--paper); box-shadow: 2px 2px 0 var(--riso-yellow); }
.ugc-engine.is-on .ugc-engine-sub { color: rgba(255,255,255,0.72); }
.ugc-engine-name { font-family: var(--f-head); font-weight: 700; font-size: 15px; }
.ugc-engine-sub { font-size: 11px; color: var(--newsprint-mute); line-height: 1.35; }

.ugc-go { margin-top: 4px; }
.ugc-status, .ugc-result { margin-top: 12px; }
.ugc-video {
  width: 100%; max-width: 420px; display: block; margin: 0 auto;
  border: var(--border-ink); border-radius: var(--radius);
  box-shadow: var(--shadow-hard); background: #000;
}
.ugc-result-actions { gap: 8px; margin-top: 10px; justify-content: center; }

/* ── wizard shell ── */
/* The step panels already sit inside .wiz-step, so they lose their own outer
   margin — otherwise every step opens with a gap the manga studio does not have. */
.ugc-panel { margin-bottom: 0; }
.ugc-note { margin-top: 8px; line-height: 1.45; }
.ugc-finish { display: flex; flex-direction: column; gap: 0; width: 100%; }

/* Right page: the running summary. Sticky so it stays beside the steps on a
   long page instead of scrolling away at step 1. */
@media (min-width: 900px) {
  .ugc-right { position: sticky; top: 84px; align-self: start; }
}
.ugc-review { display: flex; flex-direction: column; gap: 0; }
.ugc-rev-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 0; border-bottom: 1px dashed rgba(26,23,18,0.18);
}
.ugc-rev-row:last-child { border-bottom: 0; }
.ugc-rev-k {
  flex: 0 0 82px;
  font-family: var(--f-head); font-weight: 700; font-size: 11px;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--newsprint-mute);
}
.ugc-rev-v { font-size: 14px; }