/* =============================================================================
   RESPONSIVE.CSS — Media queries launcher
   ============================================================================= */

@media (max-width: 600px) {
  .header { padding: 12px 16px; }
  .header-title { font-size: 16px; }
  .user-badge { display: none; }
  .main { padding: 20px 16px; }
  .welcome-title { font-size: 22px; }
  .services-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .auth-box { padding: 28px 24px; }
  .service-card { padding: 20px; }
  .profile-section { padding: 16px; margin-top: 24px; }
  .profile-header { gap: 12px; }
  .profile-avatar { width: 40px; height: 40px; min-width: 40px; font-size: 15px; }
  .profile-name { font-size: 15px; }
  .profile-btn { width: 100%; text-align: center; }
  .modal-box { padding: 20px; }
}

@media (max-width: 360px) {
  .header-right { gap: 8px; }
  .btn-logout { padding: 6px 10px; font-size: 12px; }
}