@media (max-width: 768px) {
  .app-header { padding: 0 16px; }
  .generator-hero { padding: 40px 16px 28px; }
  .generator-hero h1 { font-size: 26px; }
  .generator-hero p { font-size: 15px; }
  .tools-home { padding: 0 16px 40px; }
  .tool-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
  .tool-page { padding: 24px 16px 48px; }
  .tool-header h1 { font-size: 22px; }
  .upload-zone { padding: 32px 16px; }
  .template-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .option-row { flex-direction: column; gap: 0; }
  .generator-canvas-wrap { min-height: 250px; }
}

@media (max-width: 480px) {
  .tool-grid { grid-template-columns: 1fr; }
  .tool-card { padding: 16px; gap: 12px; }
  .tool-card-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); }
  .tool-card-icon svg { width: 18px; height: 18px; }
  .tool-card-name { font-size: 14px; }
  .tool-card-desc { font-size: 12px; }
  .download-section { padding: 28px 16px; }
  .options-panel { padding: 16px; }
  .template-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .generator-canvas-wrap { min-height: 200px; }
  .device-frame-grid { flex-direction: column; }
}