#profile-banners { margin: 24px 0; }
#profile-banners[hidden] { display: none; }
#profile-banners h2 { font-size: 1.1rem; letter-spacing: .05em; }
#profile-banner-list { display: grid; gap: 10px; }
#profile-banner-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(76px, 24vw, 124px);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid #36566f;
  border-radius: 18px;
  background: #11263b;
}
#profile-banner-list h3 { margin: 0 0 6px; color: #f4f8ff; overflow-wrap: anywhere; }
#profile-banner-list p { margin: 0; color: #c5d7e9; overflow-wrap: anywhere; }
#profile-banner-list img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid #6088aa;
  border-radius: 12px;
  background: #081321;
}

.banner-theme, #profile-banner-list article.banner-theme {
  background: linear-gradient(135deg, #124b88, #142957);
  color: #fff;
}
.banner-theme[data-theme="green"], #profile-banner-list article[data-theme="green"] {
  background: linear-gradient(135deg, #126b59, #10383e);
}
.banner-theme[data-theme="purple"], #profile-banner-list article[data-theme="purple"] {
  background: linear-gradient(135deg, #663eab, #30234f);
}
.banner-theme[data-theme="orange"], #profile-banner-list article[data-theme="orange"] {
  background: linear-gradient(135deg, #9b481e, #522939);
}
#profile-banner-list article.banner-theme p, .banner-admin-card p { color: #f1f5ff; }
.banner-admin main { max-width: 1150px; }
.banner-admin-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; align-items: start; }
.banner-admin-grid section { min-width: 0; }
.banner-admin-grid textarea, .banner-admin-grid select { width: 100%; box-sizing: border-box; font-size: 16px; }
.banner-admin-card { display: flex; gap: 14px; align-items: center; overflow-wrap: anywhere; margin-top: 10px; }
.banner-admin-card img { flex-shrink: 0; }
.banner-admin-card p { margin: 5px 0 0; }
#banner-preview, .banner-admin-card { padding: 14px; border-radius: 14px; }
#banner-preview img { display: block; width: 100px; aspect-ratio: 1; object-fit: cover; border-radius: 10px; margin-top: 8px; }
@media (max-width: 760px) { .banner-admin-grid { grid-template-columns: minmax(0, 1fr); } }

#profile-banner-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(88%, 440px);
  grid-template-columns: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  padding: 4px 2px 10px;
}
#profile-banner-list article {
  scroll-snap-align: start;
  min-width: 0;
}
#profile-banner-list article:only-child { width: min(100%, 440px); box-sizing: border-box; }
#profile-banner-list:has(article:only-child) { grid-auto-columns: 100%; }
#profile-banner-list:focus-visible { outline: 2px solid #78d6ff; outline-offset: 2px; }