.visual-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 0 12px;
}
.visual-head p { margin: 5px 0 0; }
.cost-pill {
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 20px;
  background: #edf1f5;
  color: #425066;
  font-size: 12px;
  font-weight: 800;
}
.visual-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.visual-card {
  padding: 10px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.visual-card.selected {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px #f4510b18;
}
.visual-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 9px;
  background: #edf1f5;
}
.visual-card .actions { justify-content: space-between; }
.visual-card a, .visual-card button { font-size: 12px; }
.visual-card a { text-decoration: none; }
.visual-card .screen-place { width: 100%; margin-top: 9px; }
.screen-editor { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 18px; background: rgba(3,14,25,.82); }
.screen-editor.hidden { display: none; }
.screen-editor-card { width: min(920px, 96vw); max-height: 96vh; overflow: auto; padding: 22px; border-radius: 18px; background: #fff; box-shadow: 0 24px 80px rgba(0,0,0,.4); }
.screen-editor-card h2 { margin-top: 0; }
#screen-editor-canvas { display: block; width: 100%; max-height: 68vh; object-fit: contain; border-radius: 10px; background: #071a2d; cursor: crosshair; }
.screen-step { min-height: 24px; font-weight: 800; color: var(--orange); }
.ai-box button:disabled { opacity: .6; cursor: wait; }
.video-actions { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.brand-swatches { display: flex; gap: 7px; }
.brand-swatches i { display: block; width: 28px; height: 28px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px var(--line); }
#video-preview { width: min(100%, 420px); margin-top: 14px; border-radius: 12px; background: #071a2d; }
@media (max-width: 700px) {
  .visual-grid { grid-template-columns: 1fr; }
  .visual-head { flex-direction: column; }
  .video-actions { align-items: stretch; flex-direction: column; }
}