/* Mobile-first already; refine larger screens */
@media (min-width: 480px) {
  .main {
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero h1 {
    font-size: 28px;
  }

  .categories {
    gap: 10px;
  }
}

@media (min-width: 640px) {
  .app-header {
    padding: 16px 24px;
  }

  .header-inner,
  .main {
    max-width: 520px;
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .scan-beam {
    animation: none !important;
    top: 40%;
    opacity: 0.7;
  }
}

/* Safe areas */
@supports (padding: env(safe-area-inset-bottom)) {
  .main {
    padding-bottom: calc(48px + env(safe-area-inset-bottom));
  }

  .toast {
    bottom: calc(28px + env(safe-area-inset-bottom));
  }
}