/* --- Mobile improvements --- */
@media (max-width: 700px) {
  .hero-header-modern {
    border-radius: 0 0 18px 18px;
    margin-bottom: 1.2rem;
    padding: 0;
  }
  .hero-modern-content {
    flex-direction: column;
    align-items: stretch;
    padding: 1.2rem 0.5rem 1.2rem 0.5rem;
    gap: 1.2rem;
  }
  .hero-modern-left {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    justify-content: flex-start;
  }
  .site-title-group-modern {
    gap: 0.2rem;
  }
  .site-title-modern {
    font-size: 1.5rem;
  }
  .site-subtitle-modern {
    font-size: 1rem;
  }
  .hero-modern-controls {
    align-items: stretch;
    gap: 1rem;
    width: 100%;
  }
  .set-nav-modern {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    width: 100%;
  }
  .set-select-modern, .set-search-modern {
    width: 100%;
    margin-bottom: 0.5rem;
  }
  .hero-modern-stats-row {
    flex-direction: column;
    gap: 1rem;
    width: 100%;
  }
  .header-stats-modern {
    gap: 0.7rem;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .stat-card-modern {
    min-width: 44vw;
    padding: 0.7rem 0.7rem;
    font-size: 0.95rem;
  }
  .hero-set-logo-modern-container {
    height: 56px;
    width: 56px;
  }
  .hero-set-logo-modern {
    width: 44px;
    height: 44px;
  }
  .progress-bar-modern-wrap {
    max-width: 100%;
    margin-top: 0.7rem;
  }
  .progress-bar-modern-label {
    font-size: 0.95rem;
  }
  .card-search-bar {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    align-items: stretch;
    margin-bottom: 1.2rem;
    padding: 0 0.5rem;
  }
  #rarityFilter, #ownedFilter {
    min-width: 0;
    width: 100%;
    margin-left: 0;
    margin-bottom: 0.5rem;
  }
  #darkModeToggle {
    margin-left: 0;
  }
  .card-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
    padding: 0.5rem;
  }
  .card-tile {
    min-width: 0;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
  }
}
/* Modern Auth Bar */
#authbar-modern {
  background: linear-gradient(90deg, #232526 0%, #414345 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 0;
  border-bottom: 1px solid #2c2c2c;
}
.authbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0.5rem 2rem;
}
.auth-user span {
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}
.auth-nav a {
  color: #fff;
  text-decoration: none;
  margin-left: 2rem;
  font-weight: 500;
  font-size: 1rem;
  transition: color 0.2s;
}
.auth-nav a:hover {
  color: #ffd700;
}

/* Modern Hero Banner */
.hero-header-modern {
  position: relative;
  background: linear-gradient(120deg, #f8fafc 0%, #e0e7ef 100%);
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
  border-radius: 0 0 32px 32px;
  margin-bottom: 2.5rem;
  padding: 0;
}
.hero-modern-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #e0e7ef 0%, #f8fafc 100%);
  opacity: 0.7;
  z-index: 0;
  border-radius: 0 0 32px 32px;
}
.hero-modern-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
  padding: 2.5rem 2rem 2rem 2rem;
}
.hero-modern-left {
  display: flex;
  align-items: center;
  gap: 2.2rem;
}
.site-logo-modern {
  width: 80px;
  height: 80px;
  border-radius: 18px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
  background: #fff;
  object-fit: contain;
}
.site-title-group-modern {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.site-title-modern {
  font-family: 'Fredoka', sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  color: #232526;
  margin: 0;
  letter-spacing: 0.01em;
}
.site-subtitle-modern {
  font-size: 1.2rem;
  color: #414345;
  font-weight: 400;
  margin: 0;
}
.hero-modern-controls {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.5rem;
}
.set-nav-modern {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.set-label-modern {
  font-weight: 600;
  color: #232526;
  font-size: 1.1rem;
}
.set-select-modern {
  padding: 0.4rem 1.2rem;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  font-size: 1rem;
  background: #fff;
  color: #232526;
  font-weight: 500;
}
.set-search-modern {
  padding: 0.4rem 1rem;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  font-size: 1rem;
  background: #fff;
  color: #232526;
}
.hero-modern-stats-row {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}
.header-stats-modern {
  display: flex;
  gap: 1.5rem;
}
.stat-card-modern {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  padding: 1.1rem 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 110px;
  transition: box-shadow 0.2s;
}
.stat-card-modern.owned {
  border-left: 4px solid #4ade80;
}
.stat-card-modern.missing {
  border-left: 4px solid #f87171;
}
.stat-card-modern.total-cards {
  border-left: 4px solid #60a5fa;
}
.stat-card-modern.set-value {
  border-left: 4px solid #fbbf24;
}
.stat-label-modern {
  font-size: 1rem;
  font-weight: 600;
  color: #232526;
  margin-bottom: 0.2rem;
}
.stat-value-modern {
  font-size: 1.5rem;
  font-weight: 700;
  color: #232526;
}
.stat-money-modern {
  font-size: 1rem;
  color: #414345;
  font-weight: 500;
  margin-top: 0.2rem;
}
.hero-set-logo-modern-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  width: 80px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
}
.hero-set-logo-modern {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 12px;
}
.progress-bar-modern-wrap {
  width: 100%;
  max-width: 420px;
  margin-top: 1.2rem;
}
.progress-bar-modern-bg {
  background: #e5e7eb;
  border-radius: 8px;
  height: 16px;
  width: 100%;
  overflow: hidden;
}
.progress-bar-modern-fill {
  background: linear-gradient(90deg, #4ade80 0%, #60a5fa 100%);
  height: 100%;
  border-radius: 8px;
  transition: width 0.3s;
}
.progress-bar-modern-label {
  font-size: 1rem;
  color: #232526;
  font-weight: 500;
  margin-top: 0.3rem;
  text-align: right;
}

@media (max-width: 900px) {
  .hero-modern-content {
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem 1rem 1.5rem 1rem;
  }
  .hero-modern-controls {
    align-items: flex-start;
    width: 100%;
  }
  .hero-modern-stats-row {
    flex-direction: column;
    gap: 1.2rem;
    width: 100%;
  }
  .header-stats-modern {
    gap: 1rem;
    width: 100%;
    justify-content: flex-start;
  }
}
/* Cardmarket link styling */
.cardmarket-link a {
  color: inherit;
  text-decoration: none;
  font-weight: bold;
}
body.dark .cardmarket-link a {
  color: #fff !important;
  text-decoration: none !important;
}
/* Make Cardmarket link white in dark mode */
body.dark .cardmarket-link a {
  color: #fff !important;
}
@media (max-width: 900px) {
  html, body {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .hero-header, .hero-bg, .hero-content, .hero-controls, .set-nav-pill {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    left: 0 !important;
    right: 0 !important;
    position: relative !important;
  }
  #setSelect, #setSearch {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    margin: 0 0 8px 0 !important;
    display: block !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background-clip: padding-box !important;
  }
}
@media (max-width: 900px) {
  .hero-header, .hero-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .set-nav-pill {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin: 0 0 12px 0;
    box-sizing: border-box;
    padding: 0;
  }
  #setSelect, #setSearch {
    width: 100%;
    min-width: 0;
    margin: 0 0 8px 0;
    box-sizing: border-box;
    display: block;
    padding-left: 0;
    padding-right: 0;
    box-shadow: none;
    background-clip: padding-box;
  }
}
@media (max-width: 900px) {
  .hero-set-logo-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 18px 0 18px 0;
    padding: 12px 0 12px 0;
    background: none;
    order: 2;
  }
  .header-stats-cards {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    order: 3;
  }
  .hero-content {
    display: flex;
    flex-direction: column;
  }
}
@media (max-width: 900px) {
  .hero-header, .hero-content, .set-nav-pill, .hero-bg {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    left: 0 !important;
    right: 0 !important;
    position: relative !important;
    border-radius: 0 !important;
  }
  #setSelect, #setSearch {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 0 8px 0 !important;
    font-size: 1em;
    display: block;
  }
  .header-stats-cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    padding: 0 2vw;
  }
  .stat-card {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto 6px auto !important;
    font-size: 0.98em !important;
    box-sizing: border-box !important;
    justify-self: stretch !important;
  }
  body {
    overflow-x: hidden !important;
  }
}
@media (max-width: 900px) {
  .hero-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100vw;
    min-width: 0;
    box-sizing: border-box;
    padding: 8px 0 8px 0;
  }
  .hero-content {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100vw;
    min-width: 0;
    box-sizing: border-box;
    padding: 0 0 0 0;
  }
  .hero-set-logo-container {
    order: -1;
    align-self: center;
    margin: 0 0 10px 0;
    max-width: 60vw;
    min-width: 0;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .header-stats-cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    margin: 0 auto 10px auto;
    justify-items: center;
  }
  .stat-card {
    width: 98%;
    min-width: 0;
    margin: 0 auto;
    font-size: 0.98em;
  }
  .set-nav-pill {
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
    padding: 0 2vw;
  }
  #setSelect, #setSearch {
    width: 100%;
    min-width: 0;
    max-width: 100vw;
    margin: 0;
    font-size: 1em;
    box-sizing: border-box;
  }
}
@media (max-width: 900px) {
  .hero-controls, .set-nav-pill, #setSelect, #setSearch {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 auto 8px auto !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 2vw;
  }
  .set-nav-pill {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 0 2vw;
  }
  #setSelect, #setSearch {
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    max-width: 100vw;
    margin: 0;
    font-size: 1em;
  }
}
@media (max-width: 900px) {
  .hero-header {
    min-height: 100px;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 0 12px 0;
    border-radius: 0;
    margin-bottom: 12px;
    width: 100vw;
    box-sizing: border-box;
  }
  .hero-content {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 0 0 0 0;
    width: 100vw;
    box-sizing: border-box;
  }
  .site-logo { width: 48px; height: 48px; max-width: 48px; }
  .header-stats-cards { flex-direction: column; gap: 10px; }
  .hero-stats-logo-row { flex-direction: column; gap: 10px; }
  .card-search-bar { flex-direction: column; gap: 8px; max-width: 100vw; }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(98vw, 1fr)); gap: 10px; }
  .stat-card { min-width: 0; width: 100%; }
  .site-title-group { align-items: flex-start; }
}
@media (max-width: 600px) {
  .hero-header {
    border-radius: 0;
    margin-bottom: 12px;
    padding: 8px 0 8px 0;
    width: 100vw;
    min-width: 0;
  }
  .hero-content {
    padding: 0 0 0 0;
    gap: 8px;
    width: 100vw;
    min-width: 0;
  }
  .site-title { font-size: 1.1rem; }
  .site-subtitle { font-size: 0.95rem; }
  .stat-card { font-size: 0.98em; }
  .card-search-bar { padding: 0 2vw; }
  .card-grid { grid-template-columns: 1fr; }
  .pagination { flex-direction: column; gap: 4px; }
}
.dark-mode-label {
  font-family: 'Fredoka', 'Segoe UI', 'Arial Rounded MT Bold', Arial, sans-serif;
  font-size: 1.08em;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #222;
  text-shadow: 0 1px 4px #fff, 0 0px 2px #4b8cff33;
  user-select: none;
  transition: color 0.2s;
}
body.dark .dark-mode-label {
  color: #facc15;
  text-shadow: 0 1px 4px #23263a, 0 0px 2px #0008;
}
.dark .stat-card.owned,
.dark .stat-card.missing {
  background: #23263a !important;
  color: #facc15 !important;
  border-color: #444 !important;
}
.dark .stat-card.owned .stat-label,
.dark .stat-card.missing .stat-label {
  color: #facc15 !important;
}
.dark .stat-card.owned .stat-value,
.dark .stat-card.missing .stat-value,
.dark .stat-card.owned .stat-money,
.dark .stat-card.missing .stat-money {
  color: #fff !important;
}
.dark input,
.dark select,
.dark textarea {
  background: #23263a !important;
  color: #e5e7eb !important;
  border-color: #444 !important;
}
.dark input::placeholder,
.dark textarea::placeholder {
  color: #b6b6b6 !important;
}
.dark .stat-value,
.dark .stat-money,
.dark .stat-card .stat-value,
.dark .stat-card .stat-money {
  color: #fff !important;
}
.dark .stat-card.set-value .stat-value,
.dark .stat-card.total-cards .stat-value {
  color: #fff !important;
}
.dark .progress-bar-bg {
  background: #23263a !important;
}
.dark .progress-bar-fill {
  background: linear-gradient(90deg, #0ea5e9 0%, #6366f1 100%) !important;
}
.dark .pagination button {
  background: #23263a !important;
  color: #e5e7eb !important;
  border-color: #444 !important;
}
.dark .pagination .page-info {
  color: #e5e7eb !important;
}
.dark .tile-title .number,
.dark .tile-title .name {
  color: #fff !important;
}
.dark .price-row .label,
.dark .price-row .value {
  color: #e5e7eb !important;
}
.dark .price-source {
  color: #facc15 !important;
}
.dark .track-button {
  background: #181a23 !important;
  color: #facc15 !important;
  border-color: #444 !important;
}
.dark .track-button.tracked {
  background: #166534 !important;
  color: #fff !important;
}
.dark-mode-toggle {
  background: #fff;
  border: 2px solid #222;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px #2222;
  cursor: pointer;
  transition: box-shadow 0.18s, border-color 0.18s, background 0.18s;
}
.dark-mode-toggle:hover, .dark-mode-toggle:focus {
  background: #222;
  border-color: #fff;
  box-shadow: 0 4px 16px #0008;
  outline: none;
}
.dark-mode-toggle svg {
  display: block;
}
body.dark {
  background: #181a23;
  color: #e5e7eb;
}
.dark .hero-header {
  background: #23263a;
  border-color: #444;
}
.dark .site-title, .dark .site-subtitle {
  color: #fff;
}
.dark .stat-card, .dark .progress-bar-bg, .dark .card-search-bar, .dark .pagination button {
  background: #23263a;
  color: #e5e7eb;
  border-color: #444;
}
.dark .progress-bar-label {
  color: #e5e7eb;
}
.dark .card-grid {
  background: none;
}
.dark .card.card-tile {
  background: #23263a;
  border-color: #444;
}
.dark .card.card-tile .tile-info {
  color: #e5e7eb;
}
.dark .rarity-badge {
  background: #23263a;
  color: #facc15;
  border-color: #444;
}
.dark .stat-label {
  color: #facc15;
}
.card.card-tile .img-wrap img:hover {
  cursor: pointer;
  animation: card-bounce 0.32s cubic-bezier(.4,1.4,.6,1);
  z-index: 2;
}

@keyframes card-bounce {
  0%   { transform: scale(1) translateY(0); }
  20%  { transform: scale(1.03, 0.985) translateY(-1px); }
  40%  { transform: scale(0.99, 1.01) translateY(1px); }
  60%  { transform: scale(1.015, 0.995) translateY(-0.5px); }
  80%  { transform: scale(1.008, 1.002) translateY(0.5px); }
  100% { transform: scale(1) translateY(0); }
}

.user-profile-btn {
  position: absolute;
  top: 22px;
  right: 32px;
  z-index: 20;
  background: #fff;
  border: 2px solid #4b8cff;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px #4b8cff22;
  cursor: pointer;
  transition: box-shadow 0.18s, border-color 0.18s, background 0.18s;
}
.user-profile-btn:hover, .user-profile-btn:focus {
  background: #e0f2fe;
  border-color: #2563eb;
  box-shadow: 0 4px 16px #4b8cff44;
  outline: none;
}
.user-profile-btn svg {
  display: block;
}
/* Unified filter/search styling */
#rarityFilter, #ownedFilter, #priceSort, #cardNameSearch, #cardNumberSearch {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #bbb;
  font-size: 15px;
  background: #fff;
  color: #222;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  min-width: 140px;
  margin-left: 0;
  margin-bottom: 0.5rem;
}
#rarityFilter:focus, #ownedFilter:focus, #priceSort:focus, #cardNameSearch:focus, #cardNumberSearch:focus {
  border-color: #4b8cff;
  box-shadow: 0 0 0 2px #4b8cff33;
}
/* Set logo in hero banner */
/* Row for stats and logo in hero banner */
.hero-stats-logo-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 28px;
  margin: 12px 0 0 0;
}
.hero-set-logo-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 120px;
  min-height: 60px;
  max-width: 220px;
  max-height: 100px;
  background: none;
  border-radius: 0;
  margin: 0 0 0 18px;
  box-shadow: none;
}
.hero-set-logo {
  max-width: 200px;
  max-height: 90px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 2px 8px #0002);
}

/* Lightbox two-column layout for card and stats */
.lightbox__content {
  display: flex;
  flex-direction: row;
  gap: 2.5rem;
  align-items: flex-start;
  justify-content: center;
  padding: 1.2rem 0.5rem 1.2rem 0.5rem;
  max-width: 1100px;
  width: 100%;
  min-width: 0;
}
.lightbox__img-card {
  flex: 1 1 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border-radius: 18px;
  box-shadow: 0 4px 32px #0003;
  padding: 1.2rem 1.2rem 1.2rem 1.2rem;
  min-width: 340px;
  max-width: 420px;
}
.lightbox__img-card img {
  max-width: 320px;
  max-height: 70vh;
  border-radius: 12px;
  box-shadow: none;
  background: none;
}
.lightbox__stats-card {
  flex: 1 1 340px;
  min-width: 240px;
  max-width: 370px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  background: rgba(30, 41, 59, 0.32);
  border-radius: 18px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.10);
  padding: 1.2rem 1.5rem 1.2rem 1.5rem;
  margin-left: 0.2rem;
  border: 1.5px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}
@media (max-width: 1100px) {
  .lightbox__content {
    max-width: 98vw;
    flex-direction: column;
    gap: 1.2rem;
    align-items: center;
  }
  .lightbox__img-card, .lightbox__stats-card {
    max-width: 98vw;
    width: 100%;
    min-width: 0;
    justify-content: center;
  }
}
.card-stats {
  width: 100%;
  margin-top: 0;
  font-size: 1.08em;
  color: #f3f4f6;
  text-shadow: 0 1px 6px #000a, 0 1px 0 #0004;
  background: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  border: none;
  line-height: 1.7;
  font-weight: 500;
}
.card-stats__name {
  font-size: 1.22em;
  margin-bottom: 1.1em;
  color: #60a5fa;
  text-shadow: 0 2px 8px #000a, 0 1px 0 #0004;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 8px #fff8, 0 1px 0 #fff4;
}
.card-stats__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5em;
  font-size: 1em;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 0.2em;
}
.card-stats__row span:first-child {
  color: #cbd5e1;
  font-weight: 600;
}
.card-stats__row span:last-child {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.01em;
}
/* Card stats in lightbox */
.card-stats {
  margin-top: 1.2em;
  font-size: 1.08em;
  color: #222;
  background: none;
  border-radius: 10px;
  padding: 0.9em 1.3em;
  box-shadow: 0 4px 16px #0002;
  border: 1.5px solid #e0e7ef;
  max-width: 340px;
  line-height: 1.7;
  font-weight: 500;
}
.card-stats div {
  margin-bottom: 0.2em;
}
.card-stats strong {
  color: #4b8cff;
}

body {
  font-family: 'Fredoka', 'Segoe UI', Arial, sans-serif;
  background: #f8fafc;
  color: #222;
  font-size: 16px;
  letter-spacing: 0.01em;
  margin: 0;
  padding: 20px;
}

header {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  background: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-bottom: 0;
  position: relative;
  overflow: visible;
}

.header-left, .header-actions, .header-stats {
  display: flex;
  align-items: center;
  gap: 10px;
}

select {
  padding: 5px 10px;
  font-size: 1rem;
}

#setSearch {
  width: min(320px, 52vw);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.15);
  outline: none;
  font-size: 14px;
}
#setSearch:focus {
  border-color: #4b8cff;
  box-shadow: 0 0 0 3px rgba(75,140,255,0.15);
}

.card-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 8px 0;
  max-width: 420px;
}
#cardSearch {
  flex: 1;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #bbb;
  font-size: 15px;
}
#cardSearch:focus {
  border-color: #4b8cff;
  box-shadow: 0 0 0 2px #4b8cff33;
}
#cardSearchClear {
  background: none;
  border: none;
  font-size: 22px;
  color: #888;
  cursor: pointer;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  transition: background 0.15s;
}
#cardSearchClear:hover { background: #eee; color: #222; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 18px;
  margin-top: 20px;
}

/* Tile container */
.card.card-tile {
  display: grid;
  grid-template-columns: 160px 1fr;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 8px 20px -12px rgba(0,0,0,0.25);
}

/* Reuse skeleton wrapper but size for tile */
.card.card-tile .img-wrap {
  width: 160px;
  aspect-ratio: 63 / 88;
  border-radius: 10px;
}

/* Ensure the image doesn’t blow up */
.card.card-tile .img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  display: block;
  position: static !important;
}

/* Right: info column */
.card.card-tile .tile-info {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 8px;
  min-width: 0;
}

/* Make sure buttons aren’t absolutely positioned by old rules */
.card.card-tile .track-button {
  position: static !important;
  width: auto;
  min-width: 160px;
  align-self: end;
}

/* Titles, rarity, prices */
.tile-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-weight: 700;
  font-size: 1.05rem;
  color: #111827;
  overflow: hidden;
}
.tile-title .number { color: #6b7280; font-weight: 600; }
.tile-title .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.rarity-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
  background: #eef2ff;
  border: 1px solid #e5e7eb;
  width: fit-content;
}

.price-rows { display: grid; gap: 6px; }
.price-row { display: flex; justify-content: space-between; gap: 10px; font-size: .95rem; color: #111827; }
.price-row .label { color: #6b7280; }
.price-row .value { font-weight: 800; }
.price-source { font-size: 12px; color: #64748b; }
.price-source a {
  color: #0ea5e9;
  font-weight: 700;
  text-decoration: none;
}
.price-source a:hover { text-decoration: underline; }

.tile-actions { display: flex; justify-content: flex-end; }

/* Mobile: stack info under image */
@media (max-width: 640px) {
  .card.card-tile { grid-template-columns: 1fr; }
  .card.card-tile .img-wrap { width: 100% !important; max-width: 320px; margin: 0 auto; }
}
/* ...existing code... */
/* Update image references for new location */
.site-logo {
  background-image: url('../img/logo.png');
}
.stat-card.owned {
  background-image: url('../img/owned.png');
}
.stat-card.missing {
  background-image: url('../img/missing.png');
}

/* Lightbox */
.lightbox.hidden { display: none; }

.lightbox {
  position: fixed;
  inset: 0;
html, body {
  /* ...existing code... */
  max-width: 100vw;
  overflow-x: hidden;
}
  z-index: 1000;
  display: grid;
  place-items: center;
  /* Animate the whole layer in/out without removing it from layout */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.lightbox.open {
  visibility: visible;
  opacity: 1;
.apex-header {
  width: 100%;
  box-sizing: border-box;
  background: rgba(127, 90, 240, 0.7);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: 0 4px 24px 0 rgba(44, 181, 232, 0.10), 0 1.5px 0 #fff2 inset;
  border-bottom: 1.5px solid rgba(44, 181, 232, 0.18);
  margin-bottom: 2.5rem;
  transition: background 0.3s;
  /* Ensure no sticky or fixed positioning */
  position: static;
}
  pointer-events: auto;
}

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(1200px 800px at 50% 30%, rgba(0,0,0,0.75), rgba(0,0,0,0.9));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
.apex-header__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.1rem 2.2rem 1.1rem 2.2rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  /* Remove overflow-x: hidden to avoid layout bugs */
}
  transition: opacity 220ms ease;
  will-change: opacity;
}

.lightbox.open .lightbox__backdrop { opacity: 1; }

.lightbox__dialog {
  position: relative;
  display: grid;
  place-items: center;
  padding: 18px;
  border-radius: 14px;
  background: rgba(17, 24, 39, 0.72);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 10px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  max-width: min(92vw, 980px);
  max-height: 88vh;

  /* Smooth both directions */
  transform: translateY(8px) scale(0.97);
  opacity: 0;
  transition:
    transform 260ms cubic-bezier(.2,.8,.2,1),
    opacity 220ms ease;
  will-change: transform, opacity;
  contain: paint;
}

.lightbox.open .lightbox__dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.lightbox__dialog img {
  display: block;
  max-width: calc(92vw - 32px);
  max-height: 82vh;
  width: auto;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.lightbox__close {
  position: absolute;
  top: 8px; right: 8px;
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: #fff; font-size: 22px; line-height: 1;
  display: grid; place-items: center;
  cursor: pointer;
}

/* Large outside-nav buttons (if not already in your sheet) */
.lightbox__nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 64px; height: 64px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.45);
  color: #fff; font-size: 38px; display: grid; place-items: center;
  cursor: pointer; z-index: 2;
}
.lightbox__prev { left: max(16px, 3vw); }
.lightbox__next { right: max(16px, 3vw); }

@media (max-width: 540px) {
  #lightboxImg { max-width: 92vw; max-height: calc(100vh - 200px); }
  .lightbox__nav { width: 52px; height: 52px; font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox__backdrop, .lightbox__dialog { transition: none !important; }
  .lightbox__nav { transition: none !important; }
}

.loading {
  width: 100%;
  text-align: center;
  padding: 20px;
  font-size: 1.2rem;
  color: #666;
}

.card .track-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.12);
  color: #fff;
  background: linear-gradient(180deg, #4b8cff 0%, #2563eb 100%);
  box-shadow: 0 8px 18px -10px rgba(37,99,235,0.6);
  font-weight: 600;
  letter-spacing: .2px;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease, background 140ms ease;
}

.card .track-button::before {
  content: "＋";
  font-weight: 700;
  transform: translateY(-1px);
}

.card .track-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -12px rgba(37,99,235,0.7);
  filter: brightness(1.02);
}
.card .track-button:active {
  transform: translateY(0);
  filter: brightness(0.98);
}

.card .track-button.tracked {
  background: linear-gradient(180deg, #10b981 0%, #059669 100%);
  border-color: rgba(4,120,87,0.6);
  box-shadow: 0 8px 18px -10px rgba(5,150,105,0.6);
}
.card .track-button.tracked::before { content: "✓"; }

.card .track-button.tracked:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -12px rgba(5,150,105,0.7);
}

.card .track-button:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.card .track-button:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(59,130,246,0.35),
    0 8px 24px -12px rgba(37,99,235,0.6);
}
.card .track-button.tracked:focus-visible {
  box-shadow:
    0 0 0 3px rgba(16,185,129,0.35),
    0 8px 24px -12px rgba(5,150,105,0.6);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .card .track-button { transition: none !important; }
}

/* Improved Select Set styling */
#setSelect {
  appearance: none;
  -webkit-appearance: none;
  background: #fff; /* Plain white background */
  color: #222;
  border: 1.5px solid #d1d5db;
  border-radius: 10px;
  padding: 10px 38px 10px 14px;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 600;
  box-shadow: 0 2px 8px -4px rgba(37,99,235,0.10);
  outline: none;
  transition: box-shadow 0.15s, border 0.15s;
  cursor: pointer;
  min-width: 170px;
  margin-right: 8px;
  position: relative;
}

#setSelect:focus {
  box-shadow: 0 0 0 3px #4b8cff33;
  border-color: #4b8cff;
  background: #fff;
}

#setSelect option {
  color: #222;
  background: #fff;
  font-weight: 500;
}

/* Custom dropdown arrow (optional, keep or remove as you like) */
#setSelect {
  background-image:
    url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 8L10 12L14 8' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 1.2em;
  padding-right: 38px;
}


/* --- HERO HEADER --- */

/* --- HERO HEADER (FIXED) --- */

/* --- HERO HEADER (IMPROVED) --- */
/* Add margin-right to prevent overflow */
.hero-header {
  position: relative;
  width: 100%;
  min-height: 120px;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 32px;
  box-shadow: 0 8px 32px -8px #4b8cff33, 0 1.5px 0 #fff2 inset;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 4px solid #111; /* Bold black border for emphasis */
  box-shadow: 0 8px 32px -8px #4b8cff33, 0 1.5px 0 #fff2 inset, 0 2px 24px 0 rgba(44,181,232,0.07);
  backdrop-filter: blur(2.5px) saturate(1.15);
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg, #c554fa 0%, #4b8cff 60%, #38bdf8 100%);
  background-size: 200% 200%;
  animation: heroGradient 8s ease-in-out infinite alternate;
}
@keyframes heroGradient {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: 1100px;
  min-height: 120px;
  padding: 24px 32px 24px 32px;
  gap: 32px;
}
.hero-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
}
.site-logo {
  width: 140px;
  height: 140px;
  max-width: 140px;
  max-height: 140px;
  border-radius: 50%;
  box-shadow: 0 8px 32px #4b8cff33, 0 2px 8px #0002;
  background: none;
  object-fit: contain;
  margin-right: 24px;
}
.site-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}
.site-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.01em;
  margin: 0;
  text-shadow: 0 2px 12px #4b8cff55, 0 1px 0 #fff4;
}
.site-subtitle {
  font-size: 1rem;
  color: #e0e7ef;
  font-weight: 500;
  opacity: 0.92;
}
.hero-controls {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.set-nav-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 6px 14px;
  box-shadow: 0 2px 8px #4b8cff22;
}
.set-nav-pill label {
  font-weight: 700;
  color: #fff;
  font-size: 1em;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 4px #4b8cff55;
}
.header-stats-cards {
  display: flex;
  gap: 14px;
}
.stat-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 8px #4b8cff22;
  padding: 10px 16px 8px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 70px;
  min-height: 60px;
  position: relative;
}
.stat-card.owned {
  border: 2px solid #10b981;
  background: linear-gradient(135deg, #e0f7fa 0%, #f1fff7 100%);
  position: relative;
  z-index: 1;
  /* Remove solid color, use image and a semi-transparent overlay for readability */
}
.stat-card.missing {
  border: 2px solid #ef4444;
  background: linear-gradient(135deg, #fff1f1 0%, #f7faff 100%);
  position: relative;
  z-index: 1;
}
.stat-label {
  font-size: 0.98em;
  color: #64748b;
  font-weight: 700;
  margin-bottom: 2px;
}
.stat-value {
  font-size: 1.3em;
  font-weight: 900;
  color: #222;
  margin-bottom: 2px;
}
.stat-icon {
  font-size: 1.1em;
  margin-bottom: 2px;
}
.stat-money {
  font-size: 1em;
  color: #4b8cff;
  font-weight: 700;
}
.progress-bar-wrap {
  width: 220px;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.progress-bar-bg {
  width: 100%;
  height: 22px;
  background: linear-gradient(90deg, #e0e7ef 60%, #dbeafe 100%);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 16px #4b8cff55, 0 0 0 2px #4b8cff33 inset;
  border: 2px solid #4b8cff;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #facc15 0%, #10b981 40%, #4b8cff 80%, #6366f1 100%);
  border-radius: 14px;
  width: 0%;
  box-shadow: 0 0 18px 4px #4b8cff88, 0 2px 12px #22d3ee66 inset, 0 0 8px 2px #facc1555;
  transition: width 0.5s cubic-bezier(.4,1.4,.6,1), background 0.3s;
  position: relative;
  overflow: hidden;
}
.progress-bar-fill::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.18) 0 8px, transparent 8px 16px);
  opacity: 0.7;
  pointer-events: none;
  animation: bar-stripes 1.2s linear infinite;
}
@keyframes bar-stripes {
  0% { background-position: 0 0; }
  100% { background-position: 32px 0; }
}
.progress-bar-label {
  font-size: 1.13em;
  color: #0f172a;
  font-weight: 800;
  margin-top: 2px;
  letter-spacing: 0.7px;
  text-shadow: 0 2px 8px #fff, 0 0px 2px #4b8cff55;
  filter: drop-shadow(0 2px 4px #4b8cff44);
}
@media (max-width: 900px) {
  .hero-content { flex-direction: column; align-items: center; gap: 18px; padding: 18px 4vw 18px 4vw; }
  .hero-header { min-height: 100px; }
  .site-logo { width: 44px; height: 44px; max-width: 44px; }
}

/* Pagination styles */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 24px 0 0 0;
}
.pagination button {
  background: #fff;
  border: 1.5px solid #4b8cff;
  color: #2563eb;
  border-radius: 6px;
  padding: 6px 16px;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pagination .page-info {
  font-size: 1em;
  color: #222;
  font-weight: 500;
}