/* ── Tablet and Mobile portrait ─────────────────────────────────────────────────── */
@media (max-width: 1366px) and (orientation: portrait) {
  body {
    align-items: start;
    padding: 16px;
  }

  .app {
    grid-template-columns: 1fr;
    gap: 12px;
    height: auto;
  }

  .panel,
  .canvas-area {
    height: auto;
  }

  .panel {
    padding: 12px;
  }

  .qr-frame {
    min-height: 320px;
  }
}

/* ── Tablet landscape ────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) {
  body {
    padding: 18px;
  }

  .app {
    gap: 16px;
  }
  
  .panel,
  .preview-card {
    padding: 16px;
  }
}