/* ============================================
   Responsive — Tablet & Desktop
   ============================================ */

@media (min-width: 768px) {
  :root {
    --max-width: 900px;
    --nav-height: 64px;
  }

  .app {
    max-width: var(--max-width);
  }

  .auth-container {
    max-width: 400px;
  }

  .desktop-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }

  .desktop-span {
    grid-column: 1 / -1;
  }

  .modal-sheet {
    border-radius: var(--radius-lg);
    max-width: 460px;
    margin: auto;
    transform: translateY(20px) scale(0.96);
  }

  .modal-overlay.open .modal-sheet {
    transform: translateY(0) scale(1);
  }

  .fab {
    right: calc(50% - 420px);
    transform: none;
  }

  .fab:hover {
    transform: scale(1.08);
  }

  .bottom-nav .nav-inner {
    max-width: var(--max-width);
  }

  .summary-card .card-value {
    font-size: var(--font-size-lg);
  }

  .balance-hero .amount {
    font-size: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .summary-row {
    gap: var(--space-4);
  }

  .panel-body {
    padding: var(--space-5);
  }
}

/* Small screens */
@media (max-width: 380px) {
  .summary-card {
    padding: var(--space-3) var(--space-2);
  }

  .summary-card .card-value {
    font-size: var(--font-size-base);
  }

  .balance-hero .amount {
    font-size: var(--font-size-xl);
  }

  .breakdown-grid {
    grid-template-columns: 1fr;
  }
}