/* Responsive design */
@media (max-width: 768px) {
  .container {
    padding-left: 6px;
    padding-right: 6px;
  }
  .menu-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .menu-btn {
    height: 100px;
  }
  .menu-btn i {
    font-size: 1.5rem;
  }
  .profile-avatar {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }
  .profile-name {
    font-size: 1.5rem;
  }
  .balance-amount {
    font-size: 2rem;
  }
}

@media (max-width: 600px) {
  .help-container {
    margin: 20px 4px 0 4px;
    padding: 20px 6px;
  }
  .help-title { font-size: 1.3rem; }
  .help-desc { font-size: 0.99rem; }
  .contact-label, .contact-link { font-size: 0.95rem; }
}

@media (max-width: 480px) {
  .header-title {
    font-size: 1.5rem;
  }
  .container, .account-container {
    padding-left: 2px;
    padding-right: 2px;
  }
  .subtitle {
    font-size: 1rem;
    padding: 10px;
  }
  .menu-btn {
    height: 90px;
    font-size: 1rem;
  }
  .menu-btn i {
    font-size: 1.1rem;
  }
  .form-title {
    font-size: 1.2rem;
  }
  .account-container {
    margin: 20px auto;
    padding-top: calc(var(--header-height) + 5px);
  }
  .profile-avatar {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }
  .profile-name {
    font-size: 1.2rem;
  }
  .balance-amount {
    font-size: 1.3rem;
  }
  .info-icon {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }
  .wallet-container {
    margin: 18px 5px 0 5px;
    padding: 14px 5px;
  }
  .wallet-methods {
    flex-direction: row !important;
    gap: 10px;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
  }
  .wallet-method {
    width: 100px;
    margin: 0;
    flex: 0 0 100px;
    max-width: 48vw;
  }
  .wallet-back {
    top: 7px;
    left: 7px;
    font-size: 1.1em;
  }
  .kpay-container { margin: 10px 3px 0 3px; padding: 10px 3px; }
  .kpay-title { font-size: 1.1rem; }
  .kpay-admin-phone { font-size: 1.04rem; }
}