body { font-family: 'Inter', sans-serif; background: #F5F9FC; }
.font-display { font-family: 'Space Grotesk', sans-serif; }
.font-mono { font-family: 'IBM Plex Mono', monospace; }

select:focus, input:focus { outline: none; box-shadow: 0 0 0 3px rgba(37,105,196,0.15); border-color: #2569C4; }

.photo-placeholder {
  background:
    linear-gradient(155deg, #4FA6E0 0%, #2569C4 55%, #123A73 100%);
}
.photo-placeholder::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.14) 1px, transparent 0);
  background-size: 14px 14px;
}

.doctor-card:hover .card-photo { transform: scale(1.03); }
.card-photo { transition: transform .4s cubic-bezier(.16,1,.3,1); }

@media (prefers-reduced-motion: no-preference) {
  .fade-up { animation: fadeUp .45s ease both; }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
  #modalPanel.opening { animation: modalIn .22s cubic-bezier(.16,1,.3,1) both; }
  @keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
}