@media (max-width: 1024px) {
  .editor-sidebar-right { width: 240px; }
}

@media (max-width: 768px) {
  .editor-layout { flex-direction: column; }
  .editor-sidebar-left {
    width: 100%;
    flex-direction: row;
    height: 52px;
    padding: 0 8px;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--panel-border);
  }
  .editor-sidebar-right {
    width: 100%;
    max-height: 200px;
    border-left: none;
    border-top: 1px solid var(--color-border);
  }
  .editor-canvas-area { min-height: 300px; }
  .tool-btn { width: 44px; height: 44px; }
  .tool-separator { width: 1px; height: 32px; margin: 0 4px; }
  .welcome-actions { flex-direction: column; align-items: center; }
  .welcome-card { width: 100%; max-width: 200px; }
  .template-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

@media (max-width: 480px) {
  .app-header { height: 48px; }
  .editor-welcome h1 { font-size: 24px; }
  .editor-welcome p { font-size: 14px; }
  .size-picker { padding: 20px; }
  .size-presets { grid-template-columns: repeat(2, 1fr); }
  .export-format-grid { grid-template-columns: repeat(2, 1fr); }
  .context-toolbar { flex-wrap: wrap; max-width: 90vw; }
}