@media (min-width: 768px) {
    .header__title { display: block; }
    .calendar__day { min-height: 50px; padding: 12px; }
    .slots { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

@media (max-width: 480px) {
    .header__container { padding: 8px; }
    .header__logo svg { width: 32px; height: 32px; }
    .header__user-btn { padding: 4px 8px; font-size: 0.75rem; }
    .header__user-name { display: none; }
    .main { padding: 8px; }
    .card { padding: 12px; }
    .calendar__day { min-height: 35px; padding: 4px; font-size: 0.875rem; }
    .slots { grid-template-columns: repeat(2, 1fr); }
    .appointment-card__header { flex-direction: column; gap: 8px; }
    .appointment-card__actions { flex-direction: column; }
    .appointment-card__actions .btn { width: 100%; }
    .modal { width: 95%; }
    .login { padding: 8px; }
    .login__card { padding: 16px; }
}

@supports (padding: env(safe-area-inset-top)) {
    .header { padding-top: calc(16px + env(safe-area-inset-top)); padding-left: calc(16px + env(safe-area-inset-left)); padding-right: calc(16px + env(safe-area-inset-right)); }
    .main { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}

@media print {
    .header, .btn, .appointment-card__actions { display: none !important; }
    .card { box-shadow: none; border: 1px solid #ddd; }
}