/* Keep the original Xion design while making the archive usable on narrow screens. */
#banner { padding: 12px 20px; box-sizing: border-box; }
#banner p { margin: 0; line-height: 1.5; }
#archive-filters label { display: block; margin: 14px 0 4px; }
#archive-filters input, #archive-filters select { box-sizing: border-box; width: 190px; max-width: 100%; }
#archive-filters button, #archive-filters .archive-reset { display: inline-block; margin: 14px 8px 0 0; }
.archive-description { white-space: pre-line; overflow-wrap: anywhere; }
.archive-skin-detail { padding: 20px; }
.archive-preview { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.skin-pagejump-container { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.skin-pagejump-container a { margin: 0 6px; }
.skin-screenshot img { max-width: 130px; height: auto; }
.archive-lightbox { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.9); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; }
.archive-lightbox img { max-width: 95vw; max-height: 85vh; object-fit: contain; }
.archive-lightbox button { padding: 8px 16px; cursor: pointer; }
#xion-learn-more { display: block; }
@media (max-width: 800px) {
  .xion-content { width: auto; min-width: 0; margin: 0 8px; }
  nav ul { flex-wrap: wrap; } nav li { white-space: normal; }
  #skins-content, #skins-menu, #skins-gallery { display: block; width: auto; padding: 12px; box-sizing: border-box; }
  #skins-menu div { margin-bottom: 16px; }
  .skin-article, .skin-item, .skin-panel { max-width: 100%; }
  .skin-screenshot { max-width: 140px; }
  .section-page { overflow-wrap: anywhere; }
}