/* ---------- Mobile & Tablet Responsive (≤ 1024px) ---------- */
@media (max-width: 1024px) {
  /* Hide decorative blobs in hero on small screens */
  .blob { opacity: 0.3; transform: scale(0.7); }

  /* Hero: smaller padding */
  .hero { min-height: auto; padding: 60px 16px 40px; }
  .hero h1 { font-size: 36px; }
  .hero p { font-size: 16px; }
  .hero-cta { gap: 8px; }
  .hero-cta .btn { padding: 14px 20px; font-size: 15px; }
  .features-grid { grid-template-columns: 1fr 1fr; gap: 12px; }

  /* Container & sections */
  .container { padding: 0 16px; }
  .step-card { padding: 24px 18px; }
  .step-header h2 { font-size: 20px; }
  .step-num { width: 38px; height: 38px; font-size: 18px; }
  .settings-section { padding: 16px 18px; }
  .settings-grid { grid-template-columns: 1fr; gap: 14px; }

  /* Mode tabs: stack vertically on small screens */
  .mode-tabs { grid-template-columns: 1fr; gap: 10px; }
  .mode-tab { padding: 18px 16px; }
  .mode-tab-title { font-size: 18px; }

  /* Templates: 2 columns on tablet, 1 on phone */
  .templates-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .template-card-title { font-size: 14px; }
  .template-card-desc { font-size: 11px; min-height: 28px; }
  .template-card-meta { font-size: 10px; }

  /* Dropzones: bigger touch targets */
  .dropzone { padding: 28px 18px; min-height: 140px; }
  .dz-icon { font-size: 36px; }
  .dz-text { font-size: 15px; }

  /* Mini dropzones */
  .dropzone-mini { padding: 16px 12px; }
  .dz-icon-mini { font-size: 24px; }

  /* Buttons: bigger touch targets */
  .btn { padding: 12px 18px; font-size: 14px; min-height: 44px; }
  .btn-sm { padding: 8px 12px; min-height: 36px; }
  .btn-xl { padding: 16px 24px; font-size: 17px; min-height: 56px; }

  /* Sliders: thicker track + bigger thumb */
  input[type="range"] { height: 8px; }
  input[type="range"]::-webkit-slider-thumb { width: 24px; height: 24px; }
  input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; }

  /* Seg buttons: bigger */
  .seg button { padding: 10px 12px; font-size: 13px; min-height: 44px; }

  /* Inputs */
  input[type="text"], input[type="number"], select {
    padding: 10px 12px; font-size: 15px; min-height: 44px;
  }

  /* Background grid: smaller thumbs */
  .bg-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
  .bg-card .bg-num { font-size: 11px; padding: 3px 8px; }
  .bg-del { width: 26px; height: 26px; font-size: 16px; }

  /* Preview: full width */
  .preview-grid { grid-template-columns: 1fr; }
  .preview-info { font-size: 13px; }
  .preview-stage { padding: 12px; }
  .preview-canvas-wrap { aspect-ratio: 16/9; }
  .preview-scene-tab { padding: 8px 12px; font-size: 12px; min-height: 40px; }
  .preview-mode-btns .btn { padding: 8px 10px; font-size: 12px; }

  /* Result grid: smaller */
  .result-images-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .result-video { max-width: 100%; }
  .result-actions { flex-direction: column; gap: 8px; }
  .result-actions .btn { width: 100%; }

  /* How section: smaller cards */
  .how-grid { grid-template-columns: 1fr; gap: 12px; }
  .how-card { padding: 18px; }

  /* Job banner */
  .job-banner { flex-direction: column; gap: 8px; padding: 10px 14px; }
  .job-banner code { font-size: 12px; }

  /* Person preview side-by-side */
  .person-preview-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .person-preview-grid img { aspect-ratio: 2/3; }

  /* Footer */
  footer { padding: 24px 16px; font-size: 13px; }
}

@media (max-width: 640px) {
  /* Phone: single column everywhere */
  .hero h1 { font-size: 28px; line-height: 1.2; }
  .hero-tag { font-size: 12px; }
  .features-grid { grid-template-columns: 1fr; }
  .templates-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .bg-grid { grid-template-columns: 1fr 1fr; }
  .summary { flex-direction: column; gap: 8px; align-items: stretch; }
  .summary-item { text-align: left; }
  .seg { flex-wrap: wrap; }
  .seg button { flex: 1 1 30%; min-width: 0; }
  .cfg-row-3 { flex-direction: column; gap: 6px; }
  .step-num { width: 34px; height: 34px; font-size: 16px; }
  .render-go-bar { position: sticky; bottom: 0; z-index: 100; }
  .render-go-bar .btn { width: 100%; }
}