:root {
  --brand-size: clamp(24px, 4vw, 36px);
}
/* Typography */
body {
  font-family: "Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
.logo-text {
  font-weight: 700;
  font-size: var(--brand-size);
  letter-spacing: 0.5px;
}
/* Layout helpers */
.min-vh-50 { min-height: 50vh; }
/* Cards and animations */
.login-card { animation: fadeInUp 240ms ease both; }
#gallery-section { margin-top: clamp(24px, 4vw, 48px); }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Gallery */
.portrait-card {
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.portrait-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.08);
}
.portrait-img {
  object-fit: cover;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: .5rem;
  background-color: #f3f3f3;
}
#upload-status { display: none; } 
#upload-status.alert { display: block; }
#viewerModal .modal-content { background: transparent; border: 0; box-shadow: none; }
#viewerModal .modal-body { position: relative; }
#viewerModal .viewer-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  padding: 0.5rem 0.9rem; border-radius: 999px; opacity: 0.9;
}
#viewerModal .viewer-prev { left: 0.5rem; }
#viewerModal .viewer-next { right: 0.5rem; }
#viewerModal #viewerImage { border-radius: 8px; }
header .btn { min-height: 40px; padding: 0.375rem 0.75rem; }
@media (max-width: 576px) {
  .logo-text { font-size: clamp(20px, 6vw, 28px); }
  header .container { padding-block: 0.75rem !important; }
  #upload-panel .btn, header .btn { min-height: 44px; }
}