/* NekoVault V28.0.3.8 — polissage ciblé de l’accueil V28.0.3.7
   Frontend uniquement : titre, densité, hauteur du hero et header. */

:root {
  --nv38-header-gap: 8px;
}

/* Laisser une vraie marge à droite et conserver un header propre. */
.topbar {
  padding-right: max(18px, env(safe-area-inset-right)) !important;
}

.top-actions {
  gap: var(--nv38-header-gap) !important;
  padding-right: 2px !important;
}

#serverAccountButton {
  min-width: 96px !important;
  max-width: 118px !important;
  height: 44px !important;
  padding: 0 12px !important;
  justify-content: center !important;
}

#serverAccountButton #serverAccountLabel {
  max-width: 72px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

#openUpload {
  margin-right: 0 !important;
  flex: 0 0 auto !important;
}

/* Réduire le premier écran d’environ 10 à 15 % sans perdre l’image. */
#home.feature-grid {
  margin-bottom: 14px !important;
  padding: 10px !important;
}

#home .hero-card {
  min-height: 520px !important;
  height: min(64vh, 620px) !important;
  max-height: 620px !important;
}

#home .hero-card > img {
  object-position: center 23% !important;
}

/* Colonne de droite plus respirante mais moins longue. */
#home .detail-panel {
  padding: clamp(22px, 2.3vw, 32px) clamp(22px, 2.5vw, 34px) !important;
}

#home .detail-panel > h1 {
  margin: 8px 0 8px !important;
  font-size: clamp(2.7rem, 3.35vw, 4rem) !important;
  line-height: .94 !important;
  letter-spacing: -.052em !important;
}

#home .description {
  margin: 8px 0 0 !important;
  line-height: 1.48 !important;
}

#home .stats {
  margin-top: 10px !important;
  gap: 10px !important;
}

#home .author-line {
  margin-top: 8px !important;
}

#home .tags {
  margin-top: 8px !important;
  gap: 6px !important;
}

#home .tag {
  padding: 6px 9px !important;
}

#home .nv37-relations {
  gap: 7px !important;
  margin: 9px 0 2px !important;
}

#home .nv37-relation {
  min-height: 42px !important;
  padding: 7px 10px !important;
}

#home .main-actions {
  margin-top: 9px !important;
  gap: 8px !important;
}

#home .main-actions .primary-button {
  min-height: 44px !important;
}

#home .artist-card {
  margin-top: 9px !important;
  padding: 9px 11px !important;
  gap: 10px !important;
}

#home .artist-card img {
  width: 44px !important;
  height: 44px !important;
}

#home .artist-card span {
  margin-top: 2px !important;
}

#home .artist-link {
  margin-top: 4px !important;
}

#home .metadata {
  margin-top: 8px !important;
  gap: 7px !important;
}

#home .meta-card {
  padding: 8px 9px !important;
}

#home .meta-card span {
  margin-top: 2px !important;
}

#home .similar {
  margin-top: 8px !important;
  padding: 9px !important;
}

#home .similar-head {
  margin-bottom: 7px !important;
}

#home .similar-item {
  aspect-ratio: 1.72 / 1 !important;
}

/* Le titre tient sur une ligne sur les écrans qui ont la place. */
@media (min-width: 1181px) {
  #home .detail-panel > h1 {
    white-space: nowrap !important;
  }
}

@media (max-width: 1280px) {
  #serverAccountButton {
    min-width: 48px !important;
    width: 48px !important;
    max-width: 48px !important;
    padding: 0 !important;
  }

  #serverAccountButton #serverAccountLabel {
    display: none !important;
  }

  #home .detail-panel > h1 {
    font-size: clamp(2.6rem, 4.8vw, 3.6rem) !important;
  }
}

@media (max-width: 900px) {
  #home .hero-card {
    height: min(66dvh, 620px) !important;
    max-height: 620px !important;
  }

  #home .detail-panel > h1 {
    white-space: normal !important;
  }
}

@media (max-width: 620px) {
  .topbar {
    padding-right: 8px !important;
  }

  #home .hero-card {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 4 / 5 !important;
  }
}