/* Mobile breakpoints. Loaded after components.css so these override. */
@media (max-width: 680px) {
  .nav { flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
  .nav__links {
    order: 3; width: 100%; justify-content: center; gap: 16px;
    margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border);
  }
  .container { padding: 22px 16px 48px; }
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.3rem; }
  .card, .card--lg { padding: 22px; }
  .card--auth { margin: 28px auto; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
  .nav__right { gap: 10px; }
  .stats { grid-template-columns: 1fr; }
}