/* ═══════════════════════════════════════════════════════════════════════════
   MagicCardSearch — Design System
   Dark mode, inspired by Linear. Inter Variable font.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Design Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg-base:        #070707;
  --bg-deep:        #0b0b0b;
  --bg-subtle:      #0f1010;
  --bg-element:     #151516;
  --bg-dim:         #171718;
  --bg-surface:     #19191b;
  --bg-hover:       #1f2022;
  --bg-active:      #1f2022;

  /* Text */
  --text-primary:   #e3e3e6;
  --text-secondary: #e2e3e4;
  --text-muted:     #949496;
  --text-faint:     #7d7d80;

  /* Brand */
  --accent:         #e3e3e6;
  --accent-dim:     #999a9c;
  --accent-bright:  #ffffff;
  --accent-glow:    #1d1d1e;

  /* Borders */
  --border-dim:     #151516;
  --border-base:    #1d1d1e;
  --border-solid:   #262628;
  --border-medium:  #262628;

  /* Status */
  --green:          #27a644;
  --emerald:        #10b981;

  /* Rarity colours */
  --rarity-common-c:   #999a9c;
  --rarity-uncommon-c: #999a9c;
  --rarity-rare-c:     #d4af37;
  --rarity-mythic-c:   #e07a3a;

  /* EDHREC tier colours */
  --tier-s: #a78bfa;
  --tier-a: #f59e0b;
  --tier-b: #34d399;
  --tier-c: #949496;
  --tier-d: #949496;

  /* MTG colour identity */
  --color-w: #e3e3e6;
  --color-u: #3b82f6;
  --color-b: #7c3aed;
  --color-r: #ef4444;
  --color-g: #22c55e;
  --color-c: #949496;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-features: "cv01", "ss03";

  /* Spacing */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;

  /* Transitions */
  --transition: 180ms cubic-bezier(0.2, 0, 0, 1);
  --site-footer-height: 30px;
}

/* ── Reset & Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-optical-sizing: auto;
  font-feature-settings: var(--font-features);
  background: var(--bg-base);
    background: linear-gradient(180deg, var(--bg-subtle), transparent 210px), var(--bg-base);
  color: var(--text-secondary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Scrollbars */
* {
  /* scrollbar-width: thin; */
  scrollbar-color: var(--border-solid) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--border-solid);
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--border-solid);
  border: 3px solid transparent;
  background-clip: padding-box;
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

*::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
input, select, button { font-family: inherit; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Layout ─────────────────────────────────────────────────────────────────── */
.main-content {
  flex: 1;
  width: 100%;
}

/* ── Navbar ─────────────────────────────────────────────────────────────────── */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar-name {
  font-size: 51px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.navbar-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav-link {
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color var(--transition), background var(--transition);
}

.nav-link:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5625rem 1.25rem;
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  font-weight: 510;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}

.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--accent-dim);
  color: var(--accent-bright);
  border-color: var(--border-solid);
}

.btn-primary:hover {
  background: var(--accent);
  border-color: var(--border-solid);
}

.btn-ghost {
  background: var(--bg-subtle);
  color: var(--text-secondary);
  border-color: var(--border-base);
}

.btn-ghost:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* ── Hero ────────────────────────────────────────────────────────────────────── */
.hero {
  padding: 5rem 0 4rem;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, var(--bg-element) 0%, transparent 70%);
  pointer-events: none;
}

.hero-inner {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-image-wrap {
  flex-shrink: 0;
}

.hero-img {
  max-height: 220px;
  width: auto;
  filter: drop-shadow(0 0 40px var(--border-solid));
  border-radius: var(--radius-lg);
}

.hero-text {
  max-width: 480px;
}

.hero-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 510;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text-primary);
  margin-bottom: 1rem;
}

.hero-accent {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-bright) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: 1.125rem;
  color: var(--text-muted);
  margin-bottom: 2rem;
  line-height: 1.65;
}

/* ── Section divider ─────────────────────────────────────────────────────────── */
.section-divider {
  height: 1px;
  background: var(--border-dim);
  margin: 0 0 3rem;
}

/* ── Collections section ─────────────────────────────────────────────────────── */
.collections-section {
  padding-bottom: 4rem;
}

.section-header {
  margin-bottom: 2rem;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 590;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.section-subtitle {
  font-size: 0.9375rem;
  color: var(--text-muted);
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
}

.collection-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-lg);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}

.collection-card:hover {
  border-color: var(--border-solid);
  background: var(--bg-hover);
  transform: translateY(-2px);
}

.collection-card-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 20% 50%, var(--bg-element) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition);
}

.collection-card:hover .collection-card-glow { opacity: 1; }

.collection-card-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.2rem 0.5rem;
  background: var(--border-base);
  border: 1px solid var(--border-solid);
  border-radius: var(--radius-sm);
  font-size: 0.6875rem;
  font-weight: 590;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-bright);
}

.collection-logo-wrap {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-element);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-dim);
  padding: 0.5rem;
}

.collection-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.collection-info { flex: 1; min-width: 0; }

.collection-name {
  font-size: 1rem;
  font-weight: 590;
  color: var(--text-primary);
  margin-bottom: 0.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.collection-meta {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.25rem;
}

.collection-code {
  font-size: 0.75rem;
  font-weight: 590;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.125rem 0.4rem;
  background: var(--bg-active);
  border-radius: 4px;
  color: var(--text-muted);
}

.collection-date {
  font-size: 0.8125rem;
  color: var(--text-faint);
}

.collection-desc {
  font-size: 0.8125rem;
  color: var(--text-faint);
}

.collection-arrow {
  font-size: 1.25rem;
  color: var(--text-faint);
  transition: color var(--transition), transform var(--transition);
}

.collection-card:hover .collection-arrow {
  color: var(--accent);
  transform: translateX(3px);
}

/* ── Set Header ──────────────────────────────────────────────────────────────── */
/* ── Filter Bar ──────────────────────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.filter-search {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 320px;
}

.search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-faint);
  pointer-events: none;
}

.filter-input-text {
  width: 100%;
  height: 36px;
  padding: 0 4.6rem 0 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.875rem;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.filter-input-text::placeholder { color: var(--text-muted); }
.filter-input-text::-webkit-search-cancel-button,
.filter-input-text::-webkit-search-decoration,
.filter-input-text::-webkit-search-results-button,
.filter-input-text::-webkit-search-results-decoration,
.home-search-input input::-webkit-search-cancel-button,
.home-search-input input::-webkit-search-decoration,
.home-search-input input::-webkit-search-results-button,
.home-search-input input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.filter-input-text:focus {
  border-color: var(--border-solid);
  box-shadow: 0 0 0 3px var(--bg-element);
}

.filter-search-clear {
  position: absolute;
  right: 2.65rem;
  top: 50%;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}

.filter-search-clear:hover,
.filter-search-clear:focus-visible {
  color: var(--text-primary);
  background: var(--border-base);
  outline: none;
}

.filter-search-clear[hidden] {
  display: none;
}

.filter-search-clear svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
    width: 16px;
  height: 16px;
}

.filter-search-submit {
    position: absolute;
    right: 0.45rem;
    top: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 28px;
    transform: translateY(-50%);
    border: 0;
    border-radius: 0 7px 7px 0;
    color: var(--text-secondary);
    background: transparent;
    cursor: pointer;
    transition: color var(--transition), background var(--transition);
}

.filter-search-submit:hover,
.filter-search-submit:focus-visible {
  color: var(--accent-bright);
  background: var(--bg-surface);
  outline: none;
}

.filter-search-submit .ui-icon {
  width: 16px;
  height: 16px;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.language-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    min-height: 32px;
    padding: 2px;
    border: 1px solid var(--border-base);
    border-radius: var(--radius-md);
      background: var(--bg-deep);
}

.language-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 26px;
  min-width: 48px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--transition), background var(--transition), box-shadow var(--transition), transform var(--transition);
}

.language-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.flag-icon {
  width: 14px;
  height: 10px;
  display: block;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.55), inset 0 1px 0 var(--border-solid);
  filter: saturate(0.75);
}

.language-code {
  font-family: "Roboto Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1;
}

.language-option:hover {
  color: var(--text-primary);
  background: var(--bg-element);
}

.language-option:has(input:checked) {
  color: var(--accent-bright);
  background: var(--border-base);
  box-shadow: inset 0 0 0 1px var(--border-solid);
}

.language-option:has(input:checked) .flag-icon {
  filter: saturate(1.15);
}

.filter-label {
  font-size: 0.75rem;
  font-weight: 510;
  color: var(--text-faint);
  white-space: nowrap;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.filter-select {
  height: 36px;
  padding: 0 0.625rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.875rem;
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition);
  appearance: none;
  padding-right: 1.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2362666d' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
}

.filter-select:focus { border-color: var(--border-solid); }
.filter-select option { background: var(--bg-surface); }

/* Loading indicator */
.loading-bar {
  height: 2px;
  background: transparent;
  width: 100%;
  margin: 0 -2rem;
  width: calc(100% + 4rem);
  opacity: 0;
  transition: opacity 0.15s;
  position: relative;
  overflow: hidden;
  contain: paint;
}

.loading-bar.htmx-request {
  opacity: 1;
}

.loading-bar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 38%;
  background: var(--accent);
  transform: translateX(-120%);
}

.loading-bar.htmx-request::before {
  animation: loading-slide 1.2s ease infinite;
}

@keyframes loading-slide {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(280%); }
}

/* ── Results meta ─────────────────────────────────────────────────────────────── */

#results-container {
    padding: 0 30px;
}

.results-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0 1rem;
}

.results-count {
    font-size: 0.86rem;
    color: var(--text-muted);
}

.results-page {
  font-size: 0.8125rem;
  color: var(--text-faint);
  display: none;
}

/* ── Card Grid ───────────────────────────────────────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.125rem;
}

/* ── Card Item ───────────────────────────────────────────────────────────────── */
.card-item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.card-image-shell {
  position: relative;
}

.card-image-button {
  position: relative;
  display: block;
}

.card-image-button:focus-visible,
.card-name:focus-visible {
  outline: 2px solid var(--border-solid);
  outline-offset: 3px;
}

/* Card image container */
.card-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 63 / 88;
  display: block;
  overflow: hidden;
  border-radius: 7%;
}

.card-img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 7%;
  border: 1px solid var(--border-base);
  box-shadow: 0 0 24px 6px rgb(7 7 7);
  transform-origin: center;
  transition: transform 180ms cubic-bezier(0.2, 0, 0, 1), border-color var(--transition);
  will-change: transform;
}

.card-image-button:hover .card-img,
.card-image-button:focus-visible .card-img {
  transform: scale(1.018);
}

.synergy-strength-badge {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 22px;
  margin-bottom: 7px;
  padding: 4px 6px;
  border: 1px solid var(--border-solid);
  border-radius: 4px;
  color: var(--text-primary);
  background: var(--bg-subtle);
  font-family: "Roboto Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 680;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.synergy-strength-badge strong {
  color: var(--accent-bright);
  font-size: 0.78rem;
  font-weight: 850;
}

/* Double-faced card flip */
.card-dfc .card-img-front {
  transition: opacity 0.24s ease;
}

.card-dfc .card-img-back {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.24s ease;
}

.card-dfc.is-flipped .card-img-front { opacity: 0; }
.card-dfc.is-flipped .card-img-back  { opacity: 1; }

.card-flip-button {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-solid);
  border-radius: 50%;
  color: var(--text-primary);
  background: var(--bg-base);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

.card-flip-button:hover,
.card-flip-button:focus-visible,
.card-flip-button[aria-pressed="true"] {
  background: var(--border-solid);
  border-color: var(--border-solid);
  outline: none;
}

.card-flip-button:active {
  transform: scale(0.94);
}

.card-flip-button svg,
.card-flip-button .ui-icon {
  width: 17px;
  height: 17px;
  stroke-width: 2;
}

/* Image placeholder */
.card-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  background: linear-gradient(135deg, var(--bg-element) 0%, var(--bg-active) 100%);
}

.placeholder-name {
  font-size: 0.8125rem;
  font-weight: 510;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.3;
}

.placeholder-mana { font-size: 0.875rem; }

/* Card info panel */
.card-info {
  padding: 0.625rem 0.75rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.card-name {
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    line-height: 1.6;
    display: block;
}

.card-name-separator {
  display: inline-block;
  margin: 0 0.35em;
  color: var(--text-muted);
}

.card-type-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  display: none;
}

.set-icon {
  --set-icon-slot: 22px;
  --set-icon-size: 16px;
  --set-icon-color: var(--accent-dim);
  --set-icon-filter: none;
  --set-icon-y: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--set-icon-slot);
  height: var(--set-icon-slot);
  flex: 0 0 var(--set-icon-slot);
  vertical-align: middle;
}

.card-name .set-icon {
  margin-right: 4px;
  vertical-align: -3px;
  position: relative;
}

/* std : 20px */
.set-icon.set-10e { --set-icon-size: 16px; }
.set-icon.set-2ed { --set-icon-size: 16px; }
.set-icon.set-2x2 { --set-icon-size: 16px; }
.set-icon.set-2xm { --set-icon-size: 16px; }
.set-icon.set-3ed { --set-icon-size: 16px; }
.set-icon.set-4ed { --set-icon-size: 16px; }
.set-icon.set-5dn { --set-icon-size: 16px; }
.set-icon.set-5ed { --set-icon-size: 16px; }
.set-icon.set-6ed { --set-icon-size: 16px; }
.set-icon.set-7ed { --set-icon-size: 16px; }
.set-icon.set-8ed { --set-icon-size: 16px; }
.set-icon.set-9ed { --set-icon-size: 16px; }
.set-icon.set-a25 { --set-icon-size: 16px; }
.set-icon.set-acr { --set-icon-size: 16px; }
.set-icon.set-aer { --set-icon-size: 16px; }
.set-icon.set-afr { --set-icon-size: 16px; }
.set-icon.set-akh { --set-icon-size: 16px; }
.set-icon.set-akr { --set-icon-size: 16px; }
.set-icon.set-ala { --set-icon-size: 16px; }
.set-icon.set-all { --set-icon-size: 16px; }
.set-icon.set-apc { --set-icon-size: 16px; }
.set-icon.set-arb { --set-icon-size: 16px; }
.set-icon.set-arn { --set-icon-size: 16px; }
.set-icon.set-atq { --set-icon-size: 16px; }
.set-icon.set-avr { --set-icon-size: 16px; }
.set-icon.set-bbd { --set-icon-size: 16px; }
.set-icon.set-bfz { --set-icon-size: 16px; }
.set-icon.set-big { --set-icon-size: 16px; }
.set-icon.set-blb { --set-icon-size: 16px; }
.set-icon.set-bng { --set-icon-size: 16px; }
.set-icon.set-bok { --set-icon-size: 16px; }
.set-icon.set-bot { --set-icon-size: 16px; }
.set-icon.set-bro { --set-icon-size: 16px; }
.set-icon.set-brr { --set-icon-size: 16px; }
.set-icon.set-chk { --set-icon-size: 16px; }
.set-icon.set-chr { --set-icon-size: 16px; }
.set-icon.set-clu { --set-icon-size: 16px; }
.set-icon.set-cn2 { --set-icon-size: 16px; }
.set-icon.set-cns { --set-icon-size: 16px; }
.set-icon.set-con { --set-icon-size: 16px; }
.set-icon.set-csp { --set-icon-size: 16px; }
.set-icon.set-dbl { --set-icon-size: 16px; }
.set-icon.set-dft { --set-icon-size: 16px; }
.set-icon.set-dgm { --set-icon-size: 16px; }
.set-icon.set-dis { --set-icon-size: 16px; }
.set-icon.set-dka { --set-icon-size: 16px; }
.set-icon.set-dmr { --set-icon-size: 16px; }
.set-icon.set-dmu { --set-icon-size: 16px; }
.set-icon.set-dom { --set-icon-size: 16px; }
.set-icon.set-drk { --set-icon-size: 16px; }
.set-icon.set-dsk { --set-icon-size: 18px; }
.set-icon.set-dst { --set-icon-size: 16px; }
.set-icon.set-dtk { --set-icon-size: 16px; }
.set-icon.set-ecl { --set-icon-size: 16px; }
.set-icon.set-eld { --set-icon-size: 16px; }
.set-icon.set-ema { --set-icon-size: 16px; }
.set-icon.set-emn { --set-icon-size: 16px; }
.set-icon.set-eoe { --set-icon-size: 17px; }
.set-icon.set-eos { --set-icon-size: 16px; }
.set-icon.set-eve { --set-icon-size: 16px; }
.set-icon.set-exo { --set-icon-size: 16px; }
.set-icon.set-exp { --set-icon-size: 16px; }
.set-icon.set-fca { --set-icon-size: 16px; }
.set-icon.set-fdn { --set-icon-size: 16px; }
.set-icon.set-fem { --set-icon-size: 16px; }
.set-icon.set-fin { --set-icon-size: 16px; }
.set-icon.set-frf { --set-icon-size: 16px; }
.set-icon.set-fut { --set-icon-size: 16px; }
.set-icon.set-gpt { --set-icon-size: 16px; }
.set-icon.set-grn { --set-icon-size: 16px; }
.set-icon.set-gtc { --set-icon-size: 16px; }
.set-icon.set-h1r { --set-icon-size: 16px; }
.set-icon.set-h2r { --set-icon-size: 16px; }
.set-icon.set-hml { --set-icon-size: 16px; }
.set-icon.set-hou { --set-icon-size: 16px; }
.set-icon.set-ice { --set-icon-size: 16px; }
.set-icon.set-iko { --set-icon-size: 16px; }
.set-icon.set-ima { --set-icon-size: 16px; }
.set-icon.set-inr { --set-icon-size: 16px; }
.set-icon.set-inv { --set-icon-size: 16px; }
.set-icon.set-isd { --set-icon-size: 16px; }
.set-icon.set-j21 { --set-icon-size: 16px; }
.set-icon.set-j22 { --set-icon-size: 16px; }
.set-icon.set-j25 { --set-icon-size: 16px; }
.set-icon.set-jmp { --set-icon-size: 16px; }
.set-icon.set-jou { --set-icon-size: 16px; }
.set-icon.set-jud { --set-icon-size: 16px; }
.set-icon.set-khm { --set-icon-size: 16px; }
.set-icon.set-kld { --set-icon-size: 16px; }
.set-icon.set-klr { --set-icon-size: 16px; }
.set-icon.set-ktk { --set-icon-size: 16px; }
.set-icon.set-lci { --set-icon-size: 19px; }
.set-icon.set-lea { --set-icon-size: 16px; }
.set-icon.set-leb { --set-icon-size: 16px; }
.set-icon.set-leg { --set-icon-size: 16px; }
.set-icon.set-lgn { --set-icon-size: 16px; }
.set-icon.set-lrw { --set-icon-size: 16px; }
.set-icon.set-ltr { --set-icon-size: 17px; }
.set-icon.set-m10 { --set-icon-size: 16px; }
.set-icon.set-m11 { --set-icon-size: 16px; }
.set-icon.set-m12 { --set-icon-size: 16px; }
.set-icon.set-m13 { --set-icon-size: 16px; }
.set-icon.set-m14 { --set-icon-size: 16px; }
.set-icon.set-m15 { --set-icon-size: 16px; }
.set-icon.set-m19 { --set-icon-size: 16px; }
.set-icon.set-m20 { --set-icon-size: 16px; }
.set-icon.set-m21 { --set-icon-size: 16px; }
.set-icon.set-mar { --set-icon-size: 16px; }
.set-icon.set-mat { --set-icon-size: 15px; }
.set-icon.set-mb2 { --set-icon-size: 17px; }
.set-icon.set-mbs { --set-icon-size: 16px; }
.set-icon.set-me1 { --set-icon-size: 16px; }
.set-icon.set-me2 { --set-icon-size: 16px; }
.set-icon.set-me3 { --set-icon-size: 16px; }
.set-icon.set-me4 { --set-icon-size: 16px; }
.set-icon.set-mh1 { --set-icon-size: 16px; }
.set-icon.set-mh2 { --set-icon-size: 16px; }
.set-icon.set-mh3 { --set-icon-size: 16px; }
.set-icon.set-mid { --set-icon-size: 16px; }
.set-icon.set-mir { --set-icon-size: 16px; }
.set-icon.set-mkm { --set-icon-size: 16px; }
.set-icon.set-mm2 { --set-icon-size: 16px; }
.set-icon.set-mm3 { --set-icon-size: 16px; }
.set-icon.set-mma { --set-icon-size: 16px; }
.set-icon.set-mmq { --set-icon-size: 16px; }
.set-icon.set-mom { --set-icon-size: 16px; }
.set-icon.set-mor { --set-icon-size: 16px; }
.set-icon.set-mp2 { --set-icon-size: 16px; }
.set-icon.set-mps { --set-icon-size: 16px; }
.set-icon.set-mrd { --set-icon-size: 16px; }
.set-icon.set-mul { --set-icon-size: 16px; }
.set-icon.set-nem { --set-icon-size: 16px; }
.set-icon.set-neo { --set-icon-size: 16px; }
.set-icon.set-nph { --set-icon-size: 16px; }
.set-icon.set-ody { --set-icon-size: 16px; }
.set-icon.set-ogw { --set-icon-size: 16px; }
.set-icon.set-om1 { --set-icon-size: 16px; }
.set-icon.set-omb { --set-icon-size: 16px; }
.set-icon.set-one { --set-icon-size: 16px; }
.set-icon.set-ons { --set-icon-size: 16px; }
.set-icon.set-ori { --set-icon-size: 16px; }
.set-icon.set-otj { --set-icon-size: 19px; }
.set-icon.set-otp { --set-icon-size: 16px; }
.set-icon.set-p02 { --set-icon-size: 16px; }
.set-icon.set-pcy { --set-icon-size: 16px; }
.set-icon.set-pio { --set-icon-size: 16px; }
.set-icon.set-plc { --set-icon-size: 16px; }
.set-icon.set-pls { --set-icon-size: 16px; }
.set-icon.set-por { --set-icon-size: 16px; }
.set-icon.set-ptk { --set-icon-size: 16px; }
.set-icon.set-pza { --set-icon-size: 16px; }
.set-icon.set-rav { --set-icon-size: 16px; }
.set-icon.set-rex { --set-icon-size: 16px; }
.set-icon.set-rix { --set-icon-size: 16px; }
.set-icon.set-rna { --set-icon-size: 16px; }
.set-icon.set-roe { --set-icon-size: 16px; }
.set-icon.set-rtr { --set-icon-size: 16px; }
.set-icon.set-rvr { --set-icon-size: 15px; }
.set-icon.set-s00 { --set-icon-size: 16px; }
.set-icon.set-s99 { --set-icon-size: 16px; }
.set-icon.set-scg { --set-icon-size: 16px; }
.set-icon.set-shm { --set-icon-size: 16px; }
.set-icon.set-sir { --set-icon-size: 16px; }
.set-icon.set-sis { --set-icon-size: 16px; }
.set-icon.set-snc { --set-icon-size: 16px; }
.set-icon.set-soa { --set-icon-size: 18px; }
.set-icon.set-soi { --set-icon-size: 16px; }
.set-icon.set-sok { --set-icon-size: 16px; }
.set-icon.set-som { --set-icon-size: 16px; }
.set-icon.set-sos { --set-icon-size: 19px; top: 3px;}
.set-icon.set-spe { --set-icon-size: 16px; }
.set-icon.set-spm { --set-icon-size: 16px; }
.set-icon.set-sta { --set-icon-size: 16px; }
.set-icon.set-sth { --set-icon-size: 16px; }
.set-icon.set-stx { --set-icon-size: 16px; }
.set-icon.set-tdm { --set-icon-size: 16px; }
.set-icon.set-thb { --set-icon-size: 16px; }
.set-icon.set-ths { --set-icon-size: 16px; }
.set-icon.set-tla { --set-icon-size: 16px; }
.set-icon.set-tle { --set-icon-size: 22px; }
.set-icon.set-tmc { --set-icon-size: 16px; }
.set-icon.set-tmp { --set-icon-size: 16px; }
.set-icon.set-tmt { --set-icon-size: 16px; }
.set-icon.set-tor { --set-icon-size: 16px; }
.set-icon.set-tpr { --set-icon-size: 16px; }
.set-icon.set-tsb { --set-icon-size: 16px; }
.set-icon.set-tsp { --set-icon-size: 16px; }
.set-icon.set-tsr { --set-icon-size: 16px; }
.set-icon.set-uds { --set-icon-size: 16px; }
.set-icon.set-ulg { --set-icon-size: 16px; }
.set-icon.set-uma { --set-icon-size: 16px; }
.set-icon.set-usg { --set-icon-size: 16px; }
.set-icon.set-vis { --set-icon-size: 16px; }
.set-icon.set-vma { --set-icon-size: 16px; }
.set-icon.set-vow { --set-icon-size: 16px; }
.set-icon.set-war { --set-icon-size: 16px; }
.set-icon.set-woe { --set-icon-size: 17px; }
.set-icon.set-wot { --set-icon-size: 16px; }
.set-icon.set-wth { --set-icon-size: 16px; }
.set-icon.set-wwk { --set-icon-size: 16px; }
.set-icon.set-xln { --set-icon-size: 16px; }
.set-icon.set-zen { --set-icon-size: 16px; }
.set-icon.set-zne { --set-icon-size: 16px; }
.set-icon.set-znr { --set-icon-size: 16px; }

.set-icon::before {
  content: "";
  display: block;
  width: var(--set-icon-size);
  height: var(--set-icon-size);
  background: var(--set-icon-color);
  -webkit-mask: var(--set-icon-url) center / contain no-repeat;
  mask: var(--set-icon-url) center / contain no-repeat;
  filter: var(--set-icon-filter);
  transform: translateY(var(--set-icon-y));
}

.set-rarity-icon {
  --set-icon-color: var(--bg-hover);
  --set-icon-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.65));
}

.set-rarity-icon--common {
  --set-icon-color: var(--bg-hover);
  --set-icon-filter: drop-shadow(0 0 0.8px rgba(255, 255, 255, 0.9));
  filter: drop-shadow(0 0 0.8px white);
}
.set-rarity-icon--uncommon { --set-icon-color: var(--accent-dim); }
.set-rarity-icon--rare { --set-icon-color: var(--rarity-rare-c); }
.set-rarity-icon--mythic { --set-icon-color: var(--rarity-mythic-c); }

/* Per-set visual size tweaks. The slot stays fixed, so labels keep aligned.
   Example:
   .set-icon.set-sos { --set-icon-size: 16px; }
   .set-header-icon.set-sos { --set-icon-size: 24px; }
*/

.card-type-chips {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}

.card-type-chip {
  min-height: 19px;
  padding: 3px 6px;
  border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 850;
  line-height: 1;
  white-space: nowrap;
    font-family: "Roboto Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  border: 1px solid;
    color: var(--text-muted);
      text-transform: uppercase;
}
/* 
.card-type-chip--main {
  color: var(--text-secondary);
  background: var(--border-base);
  border: 1px solid var(--border-solid);
}

.card-type-chip--subtype {
  color: var(--accent-dim);
  background: var(--bg-element);
  border: 1px solid var(--border-base);
}

.card-type-chip--super {
  color: var(--rarity-rare-c);
  background: var(--bg-element);
  border: 1px solid var(--border-solid);
}

.card-type-chip--keyword {
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-solid);
}

.card-type-chip--mechanic {
  color: var(--text-secondary);
  background: var(--bg-element);
  border: 1px solid var(--border-solid);
} */

.card-meta-row {
  display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    margin-top: 2px;
    gap: 10px;
}

/* Price Badge */
.price-line {
    order: 2;
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
}

.price-badge {
    order: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 19px;
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 0.8rem;
    font-weight: 300;
    line-height: 1;
    white-space: nowrap;
    font-family: "Roboto Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    border: 1px solid var(--border-base);
    text-transform: uppercase;
    background: var(--accent-glow);
    color: var(--accent-dim);
    text-decoration: none;
}

.price-badge--secondary {
  max-width: 82px;
  color: var(--text-muted);
  background: var(--bg-base);
  border-color: var(--border-base);
  overflow: hidden;
  text-overflow: ellipsis;
}

a.price-badge {
  cursor: pointer;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}

a.price-badge .ui-icon {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  stroke-width: 2.4;
}

a.price-badge:hover,
a.price-badge:focus-visible {
  color: var(--bg-base);
  background: var(--accent-bright);
  border-color: var(--accent-bright);
  outline: none;
}

.price-badge--empty {
  color: var(--text-muted);
  background: transparent;
}

.grade-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-direction: column;
}

.grade-rating::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 30;
  transform: translate(-50%, 4px);
  padding: 5px 8px;
  border: 1px solid var(--border-base);
  border-radius: 6px;
  background: var(--bg-subtle);
  color: var(--text-primary);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
}

.grade-rating:hover::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.grade-rating-pair {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.grade-letter {
  display: block;
    min-height: 20px;
    padding: 3px 0px 2px;
    width: 20px;
    text-align: center;
    border-radius: 3px;
    font-size: 0.9rem;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
    font-family: "Roboto Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    text-transform: uppercase;
    color: var(--bg-base);
}

.grade-label {
  font-family: "Roboto Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.6rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}

.grade-percent {

}

div.grade-percent .grade-letter {
    width: auto;
    line-height: 1;
    font-weight: 700;
    color: var(--bg-base);
    padding: 4px 5px 2px;
}

.grade-a .grade-letter  { background: linear-gradient(to right, #009ffc, #1DA1F2); } .grade-a .grade-label  { color: #009ffc; }
.grade-b .grade-letter  { background: linear-gradient(to right, #37dd7d, #3fbe75); } .grade-b .grade-label  { color: #37dd7d; }
.grade-c .grade-letter  { background: linear-gradient(to right, #eef5b2, #e0e980); } .grade-c .grade-label  { color: #eef5b2; }
.grade-d .grade-letter  { background: linear-gradient(to right, #ffbc85, #ff9c65); } .grade-d .grade-label  { color: #ffbc85; }
.grade-f .grade-letter  { background: linear-gradient(to right, #566573, #5f6060); } .grade-f .grade-label  { color: #566573; }
.grade-na .grade-letter { background: linear-gradient(to right, #566573, #5f6060); } .grade-na .grade-label  { color: #566573; }


/* Collector number */
.collector-num {
  margin-left: auto;
  font-size: 0.625rem;
  color: var(--text-faint);
  font-family: ui-monospace, 'SF Mono', monospace;
  display: none;
}

/* ── Empty State ─────────────────────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 5rem 2rem;
  color: var(--text-faint);
  text-align: center;
}

.empty-state p { font-size: 0.9375rem; }

.empty-state-icon {
  width: 44px;
  height: 44px;
  color: currentColor;
  stroke-width: 1.45;
}

/* ── Pagination ──────────────────────────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2.5rem 0;
}

.page-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1.125rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 510;
  background: var(--bg-surface);
  border: 1px solid var(--border-base);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.page-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-medium);
  color: var(--text-primary);
}

.page-info {
  font-size: 0.875rem;
  color: var(--text-faint);
  min-width: 80px;
  text-align: center;
}

.card-grid-page {
  margin-top: 1.125rem;
}

.infinite-scroll-trigger {
  display: flex;
  justify-content: center;
  grid-column: 1 / -1;
  padding: 2rem 0 0.5rem;
  color: var(--text-faint);
}

.infinite-scroll-trigger span {
  font-size: 0.75rem;
  font-weight: 590;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-base);
  background: var(--bg-subtle);
}

/* ── Footer ──────────────────────────────────────────────────────────────────── */
.site-footer {
  flex: 0 0 var(--site-footer-height);
  height: var(--site-footer-height);
  padding: 0 clamp(14px, 3vw, 34px);
  border-top: 1px solid var(--border-dim);
  color: var(--text-faint);
  background: rgba(7, 7, 7, 0.94);
}

.site-footer-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.8vw, 18px);
  height: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 520;
  line-height: 1;
  scrollbar-width: none;
}

.site-footer-inner::-webkit-scrollbar {
  display: none;
}

.site-footer a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition);
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--text-secondary);
  outline: none;
}

.site-footer span,
.site-footer a {
  min-width: max-content;
}

/* ── Legal pages ─────────────────────────────────────────────────────────────── */
.legal-page {
  min-height: calc(100vh - var(--site-footer-height) - 100px);
  padding: 0 18px 56px;
}

.legal-page-inner {
  width: min(760px, 100%);
  margin: 0 auto;
}

.legal-back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 28px;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 620;
  transition: color var(--transition);
}

.legal-back-link:hover,
.legal-back-link:focus-visible {
  color: var(--text-primary);
  outline: none;
}

.legal-header {
  display: grid;
  gap: 10px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--border-base);
}

.legal-header h1 {
  color: var(--text-primary);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0;
}

.legal-header p {
  max-width: 620px;
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.65;
}

.legal-content {
  display: grid;
  gap: 28px;
  padding-top: 30px;
}

.legal-section {
  display: grid;
  gap: 10px;
}

.legal-section h2 {
  color: var(--text-primary);
  font-size: 0.92rem;
  font-weight: 720;
}

.legal-section p {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.72;
}

/* ── Auth pages ─────────────────────────────────────────────────────────────── */
body:has(.auth-page) .main-content {
  padding-top: 0 !important;
}

body:has(.auth-page) .site-footer {
  display: none;
}

.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 34px 18px;
  color: var(--text-primary);
  background: var(--bg-base);
}

.auth-shell {
  width: min(100%, 320px);
  display: grid;
  justify-items: center;
  gap: 26px;
  transform: translateY(-5vh);
}

.auth-logo {
  width: 54px;
  height: auto;
}

.auth-panel {
  width: 100%;
  display: grid;
  justify-items: stretch;
  gap: 16px;
}

.auth-panel[hidden] {
  display: none;
}

.auth-panel h1 {
  margin: 0 0 8px;
  color: var(--text-primary);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}

.auth-panel--email h1,
.auth-panel--sent h1 {
  font-size: 1.18rem;
}

.auth-button,
.auth-input {
  width: 100%;
  min-height: 44px;
  border-radius: 20px;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
}

.auth-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  color: var(--text-primary);
  background: #202021;
  cursor: pointer;
  transition: color var(--transition), background var(--transition), transform var(--transition);
}

.auth-button:hover,
.auth-button:focus-visible {
  color: var(--accent-bright);
  background: var(--border-solid);
  outline: none;
}

.auth-button:active {
  transform: scale(0.98);
}

.auth-button--google {
  color: #ffffff;
  background: #6268d9;
}

.auth-button--google:hover,
.auth-button--google:focus-visible {
  background: #7479e6;
}

.auth-button.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.auth-google-mark {
  font-weight: 900;
  font-size: 1rem;
}

.auth-input {
  padding: 0 14px;
  border: 1px solid var(--border-solid);
  color: var(--text-primary);
  background: var(--bg-base);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.auth-input::placeholder {
  color: var(--text-faint);
}

.auth-input:focus {
  border-color: #6268d9;
  background: var(--bg-subtle);
  box-shadow: 0 0 0 3px rgba(98, 104, 217, 0.16);
}

.auth-copy,
.auth-switch,
.auth-error {
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.5;
  text-align: center;
}

.auth-copy strong,
.auth-switch a {
  color: var(--text-primary);
  font-weight: 600;
}

.auth-switch {
  margin-top: 24px;
}

.auth-link-button {
  justify-self: center;
  border: 0;
  color: var(--text-primary);
  background: transparent;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 720;
  cursor: pointer;
}

.auth-link-button:hover,
.auth-link-button:focus-visible,
.auth-switch a:hover,
.auth-switch a:focus-visible {
  color: var(--accent-bright);
  outline: none;
}

.auth-error {
  color: #fca5a5;
}

.auth-code-box {
  display: grid;
  gap: 12px;
}

.auth-code-input {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

@media (max-width: 520px) {
  .site-footer {
    padding-inline: 8px;
  }

  .site-footer-inner {
    justify-content: flex-start;
    gap: 7px;
    font-size: 0.66rem;
  }
}

@media (max-width: 360px) {
  .site-footer-inner {
    gap: 6px;
    font-size: 0.62rem;
  }
}

/* ── HTMX indicators on full page ───────────────────────────────────────────── */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: block; }

/* Card modal */
.card-modal {
  position: fixed;
  inset: 0;
  width: min(1040px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--border-solid);
  border-radius: 10px;
  background: var(--bg-base);
  color: var(--text-primary);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.72);
}

.card-modal::backdrop {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
}

.card-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-solid);
  border-radius: 50%;
  background: var(--bg-subtle);
  color: var(--text-primary);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.card-modal-close:hover,
.card-modal-close:focus-visible {
  background: var(--border-base);
  border-color: var(--border-solid);
}

.card-modal-layout {
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(260px, 1fr);
  gap: 26px;
  padding: 28px;
}

.card-modal-images {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  min-width: 0;
}

.card-modal-image {
  width: min(100%, 420px);
  max-height: calc(100vh - 88px);
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

.card-modal-back-image:not([hidden]) {
  width: min(48%, 300px);
}

.card-modal-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 10px 8px 8px 0;

}

/* Card detail */
.card-detail-layout {
  display: grid;
  grid-template-rows: 64px minmax(0, 1fr);
  height: calc(100vh - var(--site-footer-height));
  min-height: 0;
  background: var(--bg-base);
}

.card-detail-layout > .search-topbar {
  position: sticky;
  top: 0;
  z-index: 80;
}

.card-detail-content {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-base);
}

.card-detail-main {
  height: 100%;
    min-height: 0;
    overflow-y: auto;
    background: var(--bg-subtle);
    border-radius: 10px;
    border: 1px solid var(--bg-surface);
    max-width: 1200px;
    margin: 20px auto;
}

.card-detail-overview {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
  padding: 34px;
}

.card-detail-art {
  display: grid;
  justify-items: start;
  gap: 16px;
}

.card-detail-art .card-image-wrap {
  width: min(100%, 340px);
  max-width: 340px;
}

.card-detail-face-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: min(100%, 340px);
}

.card-detail-face-thumb {
  position: relative;
  width: 50px;
  aspect-ratio: 63 / 88;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--border-solid);
  border-radius: 8px;
  background: var(--bg-base);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.card-detail-face-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 5px;
}

.card-detail-face-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  transition: background var(--transition);
}

.card-detail-face-thumb span {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  color: var(--accent-bright);
  font-family: "Roboto Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.card-detail-face-thumb:hover,
.card-detail-face-thumb:focus-visible {
  border-color: var(--text-faint);
  outline: none;
}

.card-detail-face-thumb:hover::after,
.card-detail-face-thumb:focus-visible::after {
  background: rgba(0, 0, 0, 0.34);
}

.card-detail-face-thumb.is-active {
  border-color: var(--accent-bright);
}

.card-detail-face-thumb:active {
  transform: translateY(1px);
}

.card-detail-data {
  min-width: 0;
  padding-top: 20px;
}

.card-detail-data > .set-link-list .set-link.is-current {
  color: var(--accent-bright);
  background: var(--border-base);
}

.card-detail-data > .set-link-list .set-count {
    min-width: 32px;
    padding: 0;
    margin: 0;
    font-size: 0.8rem;
    font-weight: 200;
    background: none;
}

.card-detail-data > .set-link-list .set-link.is-current .set-name,
.card-detail-data > .set-link-list .set-link.is-current .set-count {
  color: var(--accent-bright);
}

.card-detail-data > .set-link-list .set-link.is-current .set-code {
  color: var(--accent-bright);
}

.card-detail-title-block {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-base);
}

.card-detail-title-block h1 {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.8rem;
  font-weight: 760;
  line-height: 1.3;
}

.card-detail-meta-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
  min-width: 0;
}

.card-detail-meta-line .set-name {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1;
}

.card-detail-color {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 19px;
}

.card-type-chip--rarity {
  color: var(--text-secondary);
  background: var(--bg-element);
  border-color: var(--border-solid);
}

.card-detail-price-panel {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  margin-top: 18px;
}

.card-detail-price-link {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  border: 1px solid var(--border-base);
  border-radius: 7px;
  background: var(--bg-subtle);
}

.card-detail-price-line {
  display: inline-flex;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}

.card-detail-price-link {
  gap: 9px;
  padding: 9px 13px;
  color: var(--text-secondary);
  font-family: "Roboto Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.9rem;
  font-weight: 900;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

a.card-detail-price-link:hover,
a.card-detail-price-link:focus-visible {
  color: var(--accent-bright);
  border-color: var(--border-solid);
  background: var(--bg-element);
  outline: none;
}

.card-detail-price-link svg,
.card-detail-price-link .ui-icon {
  width: 17px;
  height: 17px;
}

.card-detail-price-link--static {
  color: var(--accent-dim);
}

.card-detail-price-link--secondary {
  min-height: 52px;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 800;
  background: var(--bg-base);
}

.card-detail-oracle {
  margin-top: 22px;
  padding: 16px 0;
  border-block: 1px solid var(--bg-surface);
  color: var(--text-secondary);
  line-height: 1.58;
}

.card-detail-rating-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 35px;
  border-top: 1px solid var(--border-base);
  padding: 35px;
}

.card-detail-rating-sections .grade-letter {
    width: 24px;
    padding: 5px 0 4px;
}

.card-detail-limited,
.card-detail-constructed {
    padding: 18px 24px 24px;
    min-width: 0;
    border: 1px solid var(--bg-hover);
    border-radius: 10px;
    background-color: var(--bg-dim);
}

.limited-overview {
  display: grid;
  gap: 12px;
}

.limited-metric-row {
    position: relative;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: baseline;
    column-gap: 12px;
    row-gap: 5px;
    padding-bottom: 6px;
}

.limited-metric-row:first-child {
  padding-bottom: 20px;
}

.limited-metric-row:first-child::after {
  content: "";
}

.limited-metric-row--has-note {
  padding-bottom: 16px;
}

.limited-metric-row span {
  min-width: 0;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.5;
}

.limited-metric-row .limited-metric-note {
    position: relative;
    grid-column: 1 / -1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 24px;
    padding: 0px 0px;
}

span.metric-annotation {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 3px 4px;
  color: var(--text-muted);
  background: var(--bg-subtle);
  font: inherit;
  font-family: "Roboto Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.3;
}

.metric-annotation-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: var(--text-faint);
  stroke-width: 2.2;
}



.card-detail-synergies {
  padding: 26px 34px 42px;
  border-top: 1px solid var(--border-base);
}

.card-detail-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--bg-hover);
    padding-bottom: 15px;
}

.card-detail-section-head h2 {
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 500;
}

.card-detail-section-title-row {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.card-detail-section-head p {
    margin-top: 5px;
    color: var(--text-faint);
    font-size: 0.75rem;
    font-weight: 500;
}

.constructed-format-table {
  width: max-content;
  max-width: 100%;
  border-collapse: collapse;
  color: var(--text-secondary);
  font-size: 0.78rem;
  line-height: 1.2;
  table-layout: auto;
}

.constructed-format-table td {
  padding: 3px 8px;
  text-align: left;
  vertical-align: middle;
  width: 1%;
  white-space: nowrap;
}

.constructed-format-table tbody tr {
  transition: background var(--transition);
}

.constructed-format-table tbody tr:last-child td {
  border-bottom: 0;
}

.constructed-format-table td:nth-child(1) {
  padding: 3px 8px 3px 0;
}

.constructed-format-table td:nth-child(2) {
    color: var(--text-primary);
    font-weight: 300;
    font-size: 0.85rem;
}

.constructed-format-table td:nth-child(3) {
  padding: 3px 8px 3px 20px;
}

.constructed-format-table td:nth-child(1),
.constructed-format-table td:nth-child(3),
.constructed-format-table td:nth-child(4),
.constructed-format-table td:nth-child(5) {
  font-family: "Roboto Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.constructed-format-table td:nth-child(4),
.constructed-format-table td:nth-child(5) {
  padding: 3px 8px 3px 0;
}

.constructed-legality {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    padding: 4px 6px;
    border-radius: 3px;
    border: 1px solid var(--border-solid);
    color: var(--text-muted);
    background: var(--bg-subtle);
    font-size: 0.75rem;
    font-weight: 760;
    line-height: 1;
    white-space: nowrap;
    background-color: var(--border-solid);
    text-transform: uppercase;
}

.constructed-legality--legal {
  color: #4cb782;
}

.constructed-legality--not_legal {
}

.constructed-legality--banned {
  color: #f87171;
}

.constructed-legality--restricted {
  color: #f0bf00;
}

.synergy-format-filter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  max-width: min(100%, 620px);
}

.synergy-format-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 25px;
  padding: 4px 7px;
  border: 1px solid var(--border-solid);
  border-radius: 4px;
  color: var(--text-secondary);
  background: var(--bg-subtle);
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1;
  text-decoration: none;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}

.synergy-format-option strong {
  min-width: 18px;
  padding: 2px 4px;
  border-radius: 3px;
  color: var(--accent-bright);
  background: var(--border-base);
  font-family: "Roboto Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1;
  text-align: center;
}

.synergy-format-option:hover,
.synergy-format-option:focus-visible,
.synergy-format-option.is-active {
  color: var(--bg-base);
  background: var(--accent-bright);
  border-color: var(--accent-bright);
  outline: none;
}

.synergy-format-option:hover strong,
.synergy-format-option:focus-visible strong,
.synergy-format-option.is-active strong {
  color: var(--accent-bright);
  background: var(--bg-base);
}

.synergy-format-option.is-disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.card-detail-synergy-grid {
  grid-template-columns: repeat(auto-fill, minmax(218px, 1fr));
  gap: 18px;
  padding: 0;
}

.card-detail-empty {
  color: var(--text-muted);
  margin: 0;
  font-size: 0.9rem;
}

@media (max-width: 1080px) {
  .card-detail-overview {
    grid-template-columns: minmax(220px, 340px) minmax(0, 1fr);
    gap: 28px;
  }
}

@media (max-width: 900px) {
  body:has(.card-detail-layout) {
    overflow: auto;
  }

  body:has(.card-detail-layout) .main-content {
    height: auto;
    overflow: visible;
  }

  .card-detail-layout {
    display: block;
    height: auto;
  }

  .card-detail-content {
    overflow: visible;
  }

  .card-detail-overview {
    grid-template-columns: 1fr;
    padding: 22px 18px;
  }

  .card-detail-art .card-image-wrap {
    width: min(100%, 360px);
  }

  .card-detail-limited,
  .card-detail-constructed,
  .card-detail-synergies {
    padding: 22px 18px 34px;
  }

  .card-detail-rating-sections {
    display: block;
  }

  .card-detail-rating-sections > section + section {
    border-top: 1px solid var(--border-base);
    border-left: 0;
  }

  .card-detail-section-head {
    display: block;
  }

  .synergy-format-filter {
    justify-content: flex-start;
    margin-top: 14px;
  }
}

@media (max-width: 560px) {
  .limited-metric-row {
    align-items: flex-start;
    gap: 6px;
  }

  .limited-metric-row strong {
    text-align: left;
  }

  .limited-metric-row .limited-metric-note {
    margin-left: 28px;
  }

  .card-detail-synergy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

.card-modal-set {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 760;
  text-transform: uppercase;
}

.card-modal-title {
  color: var(--accent-bright);
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1.08;
  letter-spacing: 0;
}

.card-modal-type {
  color: var(--accent-dim);
  font-size: 0.92rem;
}

.card-modal-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.card-modal-stats span {
  min-height: 26px;
  padding: 4px 8px;
  border: 1px solid var(--border-base);
  border-radius: 6px;
  background: var(--bg-element);
  color: var(--text-secondary);
  font-family: "Roboto Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 800;
}

.card-modal-stats span:empty {
  display: none;
}

.card-modal-oracle {
  max-width: 58ch;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.58;
  white-space: pre-line;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .main-content { padding: 0 1rem 3rem; }

  .navbar { padding: 0 1rem; }
  .navbar-links { display: none; }

  .hero { padding: 3rem 0 2.5rem; }
  .hero-inner { flex-direction: column; text-align: center; gap: 2rem; }

  .filter-bar { gap: 0.75rem; }
  .filter-search { max-width: 100%; min-width: 160px; }
  .filter-label { display: none; }

  .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
  }
}

@media (max-width: 480px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
  }
}

/* Collection workspace */
body:not(:has(.collection-layout)):not(:has(.card-detail-layout)) .main-content {
  padding-top: 100px;
}

body:has(.collection-layout),
body:has(.card-detail-layout) {
  overflow: hidden;
}

body:has(.collection-layout) .navbar,
body:has(.card-detail-layout) .navbar {
  display: none;
}

body:has(.collection-layout) .main-content,
body:has(.card-detail-layout) .main-content {
  height: calc(100vh - var(--site-footer-height));
  padding-top: 0;
  overflow: hidden;
}

.collection-layout {
  display: grid;
  grid-template-columns: 304px minmax(0, 1fr);
  height: calc(100vh - var(--site-footer-height));
  min-height: 0;
  background: var(--bg-base);
}

.collection-content {
  min-height: 0;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid var(--border-base);
}

.sidebar-logo {
  color: var(--accent-bright);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;

  span {
    display: inline-block;
    transform: rotate(-9deg);
  }
}

.sidebar-scroll {
  min-height: 0;
  overflow-y: auto;
  padding-top: 16px;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.sidebar-scroll.is-scrolling {
  scrollbar-color: var(--border-solid) transparent;
}

.sidebar-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.sidebar-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

.sidebar-scroll.is-scrolling::-webkit-scrollbar-thumb {
  background: var(--border-solid);
}

.sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--border-solid);
}

.sidebar-scroll::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.sidebar-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--text-primary);
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: uppercase;
}


.filter-reset {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 8px;
  border-radius: 6px;
  color: var(--accent-dim);
  font-size: 0.72rem;
  font-weight: 720;
  line-height: 1;
  transition: color var(--transition), background var(--transition);
}

.filter-reset:hover {
  color: var(--text-primary);
  background: var(--bg-surface);
}

.sidebar-reset-section {
  margin: 0 -22px;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--border-base);
}

.sidebar-reset-section .filter-reset {
  justify-content: center;
  width: 100%;
  min-height: 32px;
  color: var(--text-secondary);
  background: var(--bg-subtle);
}

.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 0 16px;
  border-top: 1px solid var(--border-base);
}

.sidebar-section > * {
  margin-inline: 20px;
}

.sidebar-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 15px;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.filter-clear-section {
  margin-left: auto;
  padding: 0;
  border: 0;
  color: var(--text-muted);
  background: transparent;
  font: inherit;
  font-size: 0.66rem;
  font-weight: 720;
  text-transform: none;
  cursor: pointer;
  opacity: 0.86;
  transition: color var(--transition), opacity var(--transition);
}

.filter-clear-section:hover,
.filter-clear-section:focus-visible {
  color: var(--text-primary);
  opacity: 1;
  outline: none;
}

.filter-clear-section[hidden] {
  display: none;
}

.sidebar-section--primary {
  border-top: 0;
}

.sidebar-section--primary .sidebar-title {
  margin-top: 0;
}

.filter-select--full {
  height: 34px;
}

.filter-check-list {
  display: grid;
  gap: 3px;
}

.filter-check {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 28px;
  padding: 3px 6px;
  border-radius: 6px;
  color: var(--accent-dim);
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}

.filter-check[hidden] {
  display: none;
}


.filter-check:hover {
  color: var(--text-primary);
  background: var(--bg-element);
}

.filter-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.filter-check:has(input:checked) {
  color: var(--text-primary);
  background: var(--border-base);
}

.filter-check-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.86rem;
  font-weight: 500;
}

.filter-count {
  margin-left: auto;
  color: var(--text-muted);
  font-family: "Roboto Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.filter-help {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border-solid);
  color: var(--text-muted);
  background: var(--bg-subtle);
  font-family: "Roboto Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  cursor: help;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}

.filter-help:hover,
.filter-help:focus-visible,
.filter-help.is-open {
  color: var(--text-secondary);
  border-color: var(--border-solid);
  background: var(--bg-surface);
  outline: none;
}

.filter-help-popover {
  position: fixed;
  z-index: 1000;
  max-width: min(280px, calc(100vw - 24px));
  padding: 9px 10px;
  border: 1px solid var(--border-base);
  border-radius: 7px;
  color: var(--text-secondary);
  background: var(--bg-base);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.48);
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.45;
  pointer-events: none;
}

.filter-mana-icon {
  width: 17px;
  text-align: center;
  font-size: 0.88rem;
}

.rarity-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.rarity-dot--common { background: var(--text-muted); }
.rarity-dot--uncommon { background: var(--accent-dim); }
.rarity-dot--rare { background: var(--rarity-rare-c); }
.rarity-dot--mythic { background: var(--rarity-mythic-c); }

.type-pill {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}

.type-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  font-family: "Roboto Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.66rem;
  font-weight: 900;
}

.type-pill--main {
  color: var(--text-secondary);
  background: var(--border-base);
  border: 1px solid var(--border-solid);
}

.type-pill--sub {
  color: var(--accent-dim);
  background: var(--bg-element);
  border: 1px solid var(--border-base);
}

.type-pill--super {
  color: var(--text-secondary);
  background: var(--bg-element);
  border: 1px solid var(--border-solid);
}

.type-pill--keyword {
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-solid);
}

.type-pill--mechanic {
  color: var(--text-secondary);
  background: var(--bg-element);
  border: 1px solid var(--border-solid);
}

.grade-filter-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.grade-filter {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 30px;
  padding: 0 8px;
  border-radius: 7px;
  border: 1px solid var(--border-base);
  background: var(--bg-subtle);
  color: var(--accent-dim);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}

.grade-filter input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.grade-filter span {
  font-family: "Roboto Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.9rem;
  font-weight: 900;
}

.grade-filter:hover,
.grade-filter:has(input:checked) {
  color: var(--text-primary);
  border-color: var(--border-solid);
  background: var(--bg-element);
}

.grade-filter--a span { color: #4ade80; }
.grade-filter--b span { color: #fde047; }
.grade-filter--c span { color: #fb923c; }
.grade-filter--d span,
.grade-filter--f span { color: #f87171; }

.grade-filter .filter-count {
  margin-left: 0;
  font-size: 0.58rem;
}


.collection-content .set-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 0 34px;
  border-bottom: 1px solid var(--border-base);
  background: var(--bg-base);
}

.collection-content .set-header-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.set-header-icon {
  --set-icon-slot: 22px;
  --set-icon-size: 22px;
  --set-icon-color: var(--text-muted);
}

.collection-content .set-title {
  color: var(--accent-bright);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
  white-space: nowrap;
}

.collection-content .set-header-info p,
.collection-content .set-meta {
  display: inline;
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: 1;
}

.set-header-info {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.set-header-links {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: 24px;
  color: var(--accent-dim);
  font-size: 0.9rem;
  font-weight: 650;
}

.set-header-links a {
  transition: color var(--transition);
}

.set-header-links a:hover {
  color: var(--accent-bright);
}

.results-toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 30px 48px 10px 34px;
  background: var(--bg-base);
  backdrop-filter: blur(18px);
}

.results-toolbar-primary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.results-toolbar .filter-search {
  flex: 0 1 360px;
  max-width: 420px;
}

.search-scope-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 36px;
  padding: 3px;
  border: 1px solid var(--border-base);
  border-radius: 7px;
  background: var(--bg-element);
}

.search-scope-option {
  display: inline-flex;
  align-items: center;
  height: 28px;
  cursor: pointer;
}

.search-scope-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.search-scope-option span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 9px;
  border-radius: 5px;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 780;
  line-height: 1;
  transition: color var(--transition), background var(--transition);
}

.search-scope-option input:checked + span {
  color: var(--text-primary);
  background: var(--border-base);
}

.search-scope-option:hover span {
  color: var(--text-primary);
}

.results-toolbar .results-meta {
  padding: 0;
  margin-left: auto;
  justify-content: flex-end;
}

.active-filter-strip[hidden] {
  display: none;
}

.active-filter-chip {

}

.active-filter-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.active-filter-chip svg,
.active-filter-chip .ui-icon {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  stroke-width: 1.8;
}

.active-filter-chip:hover,
.active-filter-chip:focus-visible {
  color: var(--accent-bright);
  border-color: var(--border-solid);
  background: var(--bg-element);
  outline: none;
}

#results-container {
  padding: 0;
}

.collection-content .loading-bar {
  position: relative;
  z-index: 40;
}

.collection-content .card-grid {
  grid-template-columns: repeat(auto-fill, minmax(218px, 1fr));
  gap: 18px;
  padding: 26px 34px 38px;
}

.collection-content .empty-state {
  margin: 30px;
}

.collection-content .card-image-wrap {
  background:
    radial-gradient(circle at 50% 20%, var(--bg-element), transparent 44%),
    var(--bg-subtle);
}

.collection-content .card-info {
  gap: 10px;
  padding: 11px 12px 12px;
}

.collection-content .card-meta-row {
  margin-top: 1px;
}

@media (max-width: 1080px) {
  .collection-layout {
    grid-template-columns: 270px minmax(0, 1fr);
  }

  .collection-content .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  }
}

@media (max-width: 900px) {
  body:has(.collection-layout) {
    overflow: auto;
  }

  body:has(.collection-layout) .main-content {
    height: auto;
    padding-top: 0;
    overflow: visible;
  }

  .collection-layout {
    display: block;
    height: auto;
    background: var(--bg-base);
  }

  .collection-content {
    overflow: visible;
  }

  .sidebar-scroll {
    padding-top: 16px;
  }

  .sidebar-section {
    margin-inline: -18px;
  }

  .sidebar-section > * {
    margin-inline: 18px;
  }


  .results-toolbar {
    top: 0;
    flex-direction: column;
    align-items: stretch;
    padding: 18px;
  }

  .results-toolbar-primary {
    flex-direction: column;
    align-items: stretch;
  }

  .results-toolbar .filter-search {
    max-width: none;
  }

  .search-scope-toggle {
    align-self: flex-start;
  }

  .active-filter-strip {
    top: 0;
    padding: 0 18px 14px;
  }

  .collection-content .set-header {
    min-height: 56px;
    padding: 0 18px;
  }

  .collection-content .card-grid {
    padding: 18px;
  }

  .card-modal {
    width: min(680px, calc(100vw - 20px));
    max-height: calc(100vh - 20px);
  }

  .card-modal-layout {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 18px;
  }

  .card-modal-images {
    flex-wrap: wrap;
  }

  .card-modal-image {
    width: min(100%, 360px);
    max-height: 58vh;
  }

  .card-modal-back-image:not([hidden]) {
    width: min(100%, 320px);
  }

  .card-modal-info {
    padding: 0;
  }
}

@media (max-width: 560px) {
  .collection-content .set-header-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .collection-content .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .grade-rating {
    min-width: 28px;
  }

  .grade-letter {
    font-size: 0.74rem;
  }

}

/* Search engine layout */
body:has(.search-home),
body:has(.search-results-layout),
body:has(.card-detail-layout) {
  /* background: var(--bg-base); */
}

body:has(.search-home) .main-content,
body:has(.search-results-layout) .main-content,
body:has(.card-detail-layout) .main-content {
  padding-top: 0;
}

body:has(.search-results-layout),
body:has(.card-detail-layout) {
  overflow: hidden;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  min-width: max-content;
  color: var(--text-primary);
  line-height: 1;
}

.brand-mark-logo {
  display: block;
  width: 28px;
  height: auto;
}

.home-brand-logo {
  display: block;
  width: 64px;
  height: auto;
  margin: 0 auto 10px;
}

.search-login-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--accent-dim);
  font-size: 0.88rem;
  font-weight: 620;
  transition: color var(--transition);
}

.search-login-link:hover,
.search-login-link:focus-visible {
  color: var(--text-primary);
  outline: none;
}

.ui-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  stroke-width: 1.8;
}

.ui-icon.lucide-move-right {
  width: 15px;
  height: 15px;
}

.search-home {
  min-height: calc(100vh - var(--site-footer-height));
  color: var(--text-secondary);

}

.search-home-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  padding: 0 clamp(18px, 4vw, 42px);
}

.search-home-hero {
  display: grid;
  width: min(720px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(70px, 12vh, 172px) 0 60px;
  gap: 24px;
}

.search-home-title-block {
  display: grid;
  gap: 12px;
  text-align: center;
}

.search-home-title-block h1 {
  color: var(--text-primary);
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: 0;
}

.search-home-title-block p {
  color: var(--text-muted);
  font-size: 1rem;
}

.home-search-form {
  display: flex;
  justify-content: center;
  width: min(820px, 100%);
  gap: 8px;
  align-items: center;
  margin: 8px auto 0;
}

.home-search-input {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}

.home-search-form .home-search-input {
  flex-basis: 680px;
}

.home-search-input input,
.search-topbar .filter-input-text {
  width: 100%;
  height: 42px;
  padding: 0 42px 0 18px;
  border: 1px solid var(--bg-surface);
  border-radius: 10px;
  color: var(--text-primary);
  background: var(--bg-subtle);
  box-shadow: inset 0 1px 0 var(--bg-subtle);
  font-size: 0.94rem;
  outline: none;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.home-search-input:has(.filter-search-submit) input,
.search-topbar .filter-search:has(.filter-search-submit) .filter-input-text {
  padding: 0 78px 0 18px;
}

.home-search-input input:focus,
.search-topbar .filter-input-text:focus {
  border-color: var(--border-solid);
  background: var(--bg-element);
  box-shadow: 0 0 0 4px var(--bg-subtle);
}

.set-link-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: baseline;
    margin-left: 8px;
}

.set-link {
  display: flex;
  align-items: center;
  min-height: 30px;
  gap: 8px;
  padding: 0 8px;
  border-radius: 8px;
  color: var(--text-secondary);
  transition: color var(--transition), background var(--transition);
}

.set-link:hover,
.set-link:focus-visible {
  color: var(--accent-bright);
  background: var(--bg-element);
  outline: none;
}

.set-name {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.set-code,
.set-date,
.set-count {
  flex: 0 0 auto;
  font-family: "Roboto Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  line-height: 1;
  white-space: nowrap;
}

.set-code {
  display: block;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.set-date {
  margin-left: 3px;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 760;
}

.set-count {
  margin-left: 2px;
  padding: 2px 5px;
  border-radius: 5px;
  color: var(--text-muted);
  background: var(--bg-subtle);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
}

.home-empty-note {
  color: var(--text-muted);
  font-size: 0.9rem;
  text-align: center;
}

.search-topbar {
  z-index: 60;
}

.search-topbar-inner {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(0, 760px) minmax(120px, 1fr);
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 20px 40px 15px;
}

.search-topbar-inner .brand-mark {
  justify-self: start;
}

.search-topbar-control {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.search-topbar-inner > .search-login-link {
  justify-self: end;
}

.results-toolbar-primary {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}

.search-topbar .filter-search {
  flex: 1 1 auto;
  min-width: 180px;
  max-width: none;
}

.search-scope-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 36px;
  padding: 3px;
  border: 1px solid var(--border-base);
  border-radius: 8px;
  background: var(--bg-element);
}

.search-scope-option {
  display: inline-flex;
  align-items: center;
  height: 28px;
  cursor: pointer;
}

.search-scope-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.search-scope-option span {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 9px;
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 780;
  line-height: 1;
  transition: color var(--transition), background var(--transition);
}

.search-scope-option input:checked + span {
  color: var(--text-primary);
  background: var(--border-base);
}

.search-topbar .language-toggle {
  width: max-content;
  min-width: 0;
  flex: 0 0 auto;
}

.topbar-filter-menu {
  display: block;
  min-width: 0;
  padding: 0 24px 10px;
  overflow: visible;
}

.topbar-filter-scroll {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  overflow: visible;
  scrollbar-width: none;
}

.topbar-filter-scroll::-webkit-scrollbar {
  display: none;
}

.topbar-filter-menu-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 32px;
  padding: 0 10px;
  border: none;
  border-radius: 8px;
  color: var(--accent-dim);
    background: var(--bg-subtle);
    border: 1px solid var(--border-base);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}

.filter-active-count {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 19px;
    height: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-base);
    border-radius: 50%;
    color: var(--bg-subtle);
    background: #BB87FC;
    font-family: "Roboto Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    font-size: 0.6rem;
    font-weight: 900;
    pointer-events: none;
}

.filter-active-count[hidden] {
  display: none;
}

.topbar-filter-menu-button:hover,
.topbar-filter-menu-button:focus-visible,
.ui-menu.is-open .topbar-filter-menu-button,
.topbar-filter-menu-button.is-active {
  color: var(--accent);
}

.topbar-filter-menu-button .ui-icon {
  width: 14px;
  height: 14px;
}

.topbar-filter-chevron {
  color: var(--text-muted);
}

.filter-popover {
  width: max-content;
  min-width: 286px;
}

.filter-popover--collections {
  min-width: min(620px, calc(100vw - 20px));
}

.filter-popover--tall {
  min-width: min(360px, calc(100vw - 20px));
}

.filter-popover--price {
  min-width: 300px;
}

.filter-popover--rating {
  min-width: min(430px, calc(100vw - 20px));
}

.filter-popover-search {
  position: sticky;
  top: -6px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -2px -2px 7px;
  padding: 7px 8px;
  border-bottom: 1px solid var(--bg-surface);
  background: var(--bg-surface);
}

.filter-popover-search .ui-icon {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}

.filter-popover-search input,
.price-input-grid input {
  width: 100%;
  min-width: 0;
  height: 32px;
  border: 1px solid var(--border-base);
  border-radius: 7px;
  color: var(--text-primary);
  background: var(--bg-base);
  font: inherit;
  font-size: 0.82rem;
  outline: none;
}

.filter-popover-search input {
  height: 28px;
  border: 0;
  background: transparent;
}

.filter-popover-search input::placeholder,
.price-input-grid input::placeholder {
  color: var(--text-muted);
}

.price-input-grid input {
  padding: 0 9px;
}

.filter-popover-search input:focus,
.price-input-grid input:focus {
  border-color: var(--border-solid);
}

.filter-mode-control {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: calc(100% - 4px);
  margin: 0 2px 8px;
  padding: 3px;
  border: 1px solid var(--border-base);
  border-radius: 8px;
  background: var(--bg-subtle);
}

.filter-popover-search + .filter-mode-control {
  margin-top: 8px;
}

.filter-mode-option {
  flex: 1 1 0;
  min-height: 26px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  color: var(--text-muted);
  background: transparent;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1;
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}

.filter-mode-option:hover,
.filter-mode-option:focus-visible,
.filter-mode-option[aria-pressed="true"] {
  color: var(--accent-bright);
  background: var(--border-base);
  outline: none;
}

.filter-mode-option:disabled {
  color: var(--text-faint);
  background: transparent;
  cursor: not-allowed;
}

.filter-mode-note {
  margin: -2px 4px 8px;
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.filter-option-list {
  display: grid;
  gap: 3px;
}

.filter-option-list--compact {
  gap: 2px;
}

.filter-menu-option,
.filter-menu-collection-row {
  position: relative;
}

.filter-menu-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  padding: 4px 7px;
  border-radius: 7px;
  color: var(--accent-dim);
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}

.filter-menu-option:hover,
.filter-menu-option:focus-within,
.filter-menu-collection-row:hover,
.filter-menu-collection-row:focus-within {
  color: var(--accent-bright);
  background: var(--bg-surface);
}

.filter-menu-option:has(input:checked),
.filter-menu-collection-row:has(input:checked) {
  color: var(--text-primary);
  background: var(--border-base);
}

.filter-menu-checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  cursor: pointer;
}

.filter-menu-checkbox input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.filter-menu-checkbox > span {
  width: 15px;
  height: 15px;
  border: 1px solid var(--border-solid);
  border-radius: 5px;
  background: var(--bg-subtle);
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.filter-menu-checkbox:hover > span,
.filter-menu-checkbox input:focus-visible + span {
  border-color: var(--border-solid);
  box-shadow: 0 0 0 3px var(--bg-element);
}

.filter-menu-checkbox input:checked + span {
  border-color: var(--text-primary);
  background: var(--text-primary);
  box-shadow: inset 0 0 0 3px var(--bg-element);
}

.filter-menu-collection-row {
  min-height: 26px;
  padding: 4px 7px;
  border-radius: 7px;
  color: var(--accent-dim);
  cursor: pointer;
}

.filter-menu-collection-row[hidden],
.filter-menu-option[hidden] {
  display: none;
}

.price-input-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 2px;
}

.price-input-grid label {
  display: grid;
  gap: 6px;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 720;
}

.filter-popover-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 2px 2px;
}

.filter-popover-ghost,
.filter-popover-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 720;
  cursor: pointer;
}

.filter-popover-ghost {
  color: var(--accent-dim);
  background: transparent;
}

.filter-popover-primary {
  color: var(--bg-subtle);
  background: var(--text-primary);
}

.filter-popover-ghost:hover,
.filter-popover-ghost:focus-visible {
  color: var(--accent-bright);
  background: var(--bg-surface);
  outline: none;
}

.filter-popover-primary:hover,
.filter-popover-primary:focus-visible {
  background: var(--accent-bright);
  outline: none;
}

.rating-filter-grid {
  display: grid;
  gap: 14px;
}

.rating-filter-grid h3 {
  margin: 0 0 8px;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 760;
  text-transform: uppercase;
}

.language-option.is-active,
.language-option:has(input:checked) {
  background: var(--border-base);
  box-shadow: inset 0 0 0 1px var(--border-solid);
}

.language-option.is-active .flag-icon,
.language-option:has(input:checked) .flag-icon {
  filter: saturate(1.12);
}

.search-results-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  height: calc(100vh - var(--site-footer-height));
  min-height: 0;
  background: var(--bg-base);
}

.search-results-layout.filters-open {
  grid-template-columns: minmax(0, 1fr);
}

.search-results-layout > .search-topbar {
  position: sticky;
  top: 0;
  grid-column: 1 / -1;
  grid-row: 1;
}

.search-results-layout > .collection-content {
  grid-column: 1;
  grid-row: 2;
}


.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 0 16px;
  border-top: 1px solid var(--border-base);
}

.sidebar-section > * {
  margin-inline: 20px;
}

.sidebar-section--primary {
  border-top: 0;
  padding-top: 12px;
}

.sidebar-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 730;
  text-transform: uppercase;
}

.sidebar-title-icon {
  width: 13px;
  height: 13px;
  color: var(--text-muted);
  stroke-width: 2;
}

.sidebar-section--primary .sidebar-title {
  margin-top: 0;
}

.filter-clear-section {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 0;
  border: 0;
  color: var(--text-muted);
  background: transparent;
  font: inherit;
  font-size: 0.66rem;
  font-weight: 720;
  text-transform: none;
  cursor: pointer;
}

.filter-clear-section .ui-icon {
  width: 12px;
  height: 12px;
}

.filter-clear-section:hover,
.filter-clear-section:focus-visible {
  color: var(--accent-bright);
  outline: none;
}

.filter-clear-section[hidden] {
  display: none;
}

.filter-select--full {
  height: 34px;
}

.filter-check-list {
  display: grid;
  gap: 3px;
}

.filter-check {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 28px;
  padding: 3px 6px;
  border-radius: 7px;
  color: var(--accent-dim);
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}

.filter-check[hidden] {
  display: none;
}

.filter-check:hover {
  color: var(--text-primary);
  background: var(--bg-element);
}

.filter-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.filter-check:has(input:checked) {
  color: var(--text-primary);
  background: var(--border-base);
}

.filter-check-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.86rem;
  font-weight: 540;
}

.filter-count {
  margin-left: auto;
  color: var(--text-muted);
  font-family: "Roboto Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.set-count.filter-count {
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-weight: 800;
}

.filter-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: 7px;
  color: var(--accent-dim);
  background: var(--bg-subtle);
  font-size: 0.72rem;
  font-weight: 760;
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}

.filter-reset:hover,
.filter-reset:focus-visible {
  color: var(--accent-bright);
  background: var(--border-base);
  outline: none;
}

.sidebar-reset-section {
  margin: 0 -22px;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--border-base);
}

.sidebar-reset-section .filter-reset {
  width: 100%;
  min-height: 32px;
}

.filter-help {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-solid);
  border-radius: 50%;
  color: var(--text-muted);
  background: var(--bg-subtle);
  font-family: "Roboto Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  cursor: help;
}

.filter-help:hover,
.filter-help:focus-visible,
.filter-help.is-open {
  color: var(--accent-bright);
  border-color: var(--border-solid);
  background: var(--border-base);
  outline: none;
}

.filter-help-popover {
  position: fixed;
  z-index: 1000;
  max-width: min(280px, calc(100vw - 24px));
  padding: 9px 10px;
  border: 1px solid var(--border-base);
  border-radius: 8px;
  color: var(--text-secondary);
  background: var(--bg-base);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.48);
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.45;
  pointer-events: none;
}

.filter-mana-icon {
  width: 17px;
  text-align: center;
  font-size: 0.88rem;
}

.rarity-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.rarity-dot--common { background: var(--text-muted); }
.rarity-dot--uncommon { background: var(--accent-dim); }
.rarity-dot--rare { background: var(--rarity-rare-c); }
.rarity-dot--mythic { background: var(--rarity-mythic-c); }

.type-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  font-family: "Roboto Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.66rem;
  font-weight: 900;
}

.type-pill--main {
  color: var(--text-primary);
  background: var(--border-base);
  border: 1px solid var(--border-solid);
}

.type-pill--sub {
  color: var(--accent-dim);
  background: var(--bg-element);
  border: 1px solid var(--border-base);
}

.type-pill--super {
  color: var(--text-secondary);
  background: var(--border-base);
  border: 1px solid var(--border-solid);
}

.type-pill--keyword,
.type-pill--mechanic {
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-base);
}

.grade-filter-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.grade-filter {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid var(--border-base);
  border-radius: 7px;
  color: var(--accent-dim);
  background: var(--bg-subtle);
  cursor: pointer;
}

.grade-filter input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.grade-filter span {
  font-family: "Roboto Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.9rem;
  font-weight: 900;
}

.grade-filter:hover,
.grade-filter:has(input:checked) {
  color: var(--accent-bright);
  border-color: var(--border-solid);
  background: var(--border-base);
}

.grade-filter .filter-count {
  margin-left: 0;
  font-size: 0.58rem;
}


.collection-content {
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.collection-main {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  background: var(--bg-subtle);
  margin: 5px;
  border-radius: 10px;
    border: 1px solid var(--bg-surface);
}

.collection-content .loading-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  margin: 0;
  width: 100%;
}

.results-header {
  display: grid;
  gap: 10px;
  padding: 18px 34px 10px;
}

.results-header-top,
.results-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.results-header-top {
  align-items: flex-start;
}

.results-intro-copy {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}

.results-intro h1 {
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 400;
    min-width: 0;
}

.results-title-placeholder {
  display: block;
  min-width: 0;
  min-height: 1px;
}

.results-intro-count {
  font-weight: 300;
  color: var(--text-muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

.results-intro-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
}

.ui-menu {
  position: relative;
}

.intro-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: min(380px, 44vw);
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid var(--border-base);
  border-radius: 8px;
  color: var(--accent-dim);
  background: var(--bg-surface);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 400;
  cursor: pointer;
  transition: color var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.intro-action-button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.intro-action-button strong {
    color: var(--text-secondary);
    font-weight: 400;
}

.intro-action-button:hover,
.intro-action-button:focus-visible,
.ui-menu.is-open .intro-action-button {
  color: var(--accent-bright);
  border-color: var(--border-solid);
  background: var(--bg-hover);
  outline: none;
}

.intro-action-button .ui-icon {
  width: 15px;
  height: 15px;
}

.intro-action-chevron {
  color: var(--text-muted);
}

.ui-popover-menu,
.ui-submenu {
  z-index: 120;
  width: max-content;
  min-width: 260px;
  max-width: calc(100vw - 16px);
  max-height: min(520px, calc(100vh - 16px));
  padding: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid var(--border-base);
  border-radius: 10px;
  color: var(--text-secondary);
  background: var(--bg-surface);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.46), 0 0 0 1px rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(18px);
}

.ui-popover-menu[hidden],
.ui-submenu[hidden] {
  display: none !important;
}

.ui-popover-header {
  padding: 8px 9px 7px;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 620;
  line-height: 1;
}

.ui-menu-list {
  display: grid;
  gap: 2px;
}

.ui-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 34px;
  padding: 0 9px;
  border: 0;
  border-radius: 7px;
  color: var(--text-secondary);
  background: transparent;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}

.ui-menu-item:hover,
.ui-menu-item:focus-visible,
.ui-menu-item[aria-checked="true"] {
  color: var(--accent-bright);
  background: var(--border-base);
  outline: none;
}

.ui-menu-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-menu-check {
  width: 14px;
  height: 14px;
  color: var(--text-primary);
  opacity: 0;
}

.ui-menu-item[aria-checked="true"] .ui-menu-check {
  opacity: 1;
}

.ui-menu-submenu-chevron {
  width: 13px;
  height: 13px;
  margin-left: auto;
  color: var(--text-muted);
}

.ui-menu-backdrop {
  display: none;
}

body.ui-menu-open {
  overflow: hidden;
}

.active-filter-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
  padding: 0;
}

.active-filter-strip[hidden] {
  display: none;
}

.active-filter-chip,
.active-filter-clear-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 9px 0 10px;
    border: 1px solid var(--border-base);
    border-radius: 8px;
    color: var(--accent-dim);
    background: var(--bg-surface);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1;
    transition: color var(--transition), background var(--transition), border-color var(--transition);
}

.active-filter-clear-all {
    color: var(--text-faint);
    background: var(--bg-deep);
}

.active-filter-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.active-filter-chip-label-value {
  color: var(--text-secondary);
}

.active-filter-chip svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.active-filter-chip:hover,
.active-filter-chip:focus-visible,
.active-filter-clear-all:hover,
.active-filter-clear-all:focus-visible {
  color: var(--accent-bright);
  border-color: var(--border-solid);
  background: var(--border-base);
  outline: none;
}

.active-filter-chip--compound {
  max-width: min(620px, calc(100vw - 80px));
  min-height: 32px;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-base);
  border-radius: 8px;
  background: var(--bg-surface);
  cursor: default;
}

.active-filter-chip-group {
  flex: 0 0 auto;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-right: 1px solid var(--border-solid);
  color: var(--text-faint);
  font-weight: 600;
}

.active-filter-chip-values {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  gap: 0;
  min-width: 0;
  overflow: hidden;
}

.active-filter-chip-value,
.active-filter-mode-button,
.active-filter-chip-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  border: 0;
  border-radius: 0;
  color: var(--text-secondary);
  background: transparent;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}

.active-filter-chip-value {
  max-width: 132px;
  padding: 0 10px;
  border-right: 1px solid var(--border-solid);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.active-filter-mode-button {
  flex: 0 0 auto;
  padding: 0 10px;
  border-right: 1px solid var(--border-solid);
  color: var(--text-muted);
  background: transparent;
}

.active-filter-chip-clear {
  flex: 0 0 30px;
  width: 30px;
  padding: 0;
  color: var(--accent-dim);
}

.active-filter-chip-value:hover,
.active-filter-chip-value:focus-visible,
.active-filter-mode-button:hover,
.active-filter-mode-button:focus-visible,
.active-filter-chip-clear:hover,
.active-filter-chip-clear:focus-visible {
  color: var(--accent-bright);
  background: var(--border-base);
  outline: none;
}

.active-filter-chip-clear .ui-icon {
  width: 14px;
  height: 14px;
}

.filter-mode-popover,
.filter-value-popover {
  z-index: 150;
  padding: 5px;
}

.filter-value-list {
  max-height: min(360px, calc(100vh - 96px));
  overflow-y: auto;
}

.filter-value-option:disabled {
  color: var(--text-faint);
  cursor: not-allowed;
  opacity: 0.7;
}

.collection-content .card-grid {
  grid-template-columns: repeat(auto-fill, minmax(218px, 1fr));
  gap: 18px;
  padding: 6px 34px 38px;
}

.collection-content .empty-state {
  margin: 30px;
}

.collection-content .card-image-wrap {
  background:
    radial-gradient(circle at 50% 20%, var(--border-base), transparent 44%),
    var(--bg-subtle);
}

.collection-content .card-info {
  gap: 10px;
  padding: 11px 12px 12px;
}


.card-detail-search-form {
  flex: 1 1 auto;
}

@media (max-width: 1180px) {
  .search-topbar-inner {
    grid-template-columns: minmax(96px, 1fr) minmax(0, 720px) minmax(96px, 1fr);
    padding: 0 18px;
  }

  .search-scope-toggle {
    display: none;
  }

  .search-results-layout {
    --sidebar-width: 286px;
  }
}

@media (max-width: 900px) {
  body:has(.search-results-layout),
  body:has(.card-detail-layout) {
    overflow: auto;
  }

  body:has(.search-results-layout) .main-content,
  body:has(.card-detail-layout) .main-content {
    height: auto;
    overflow: visible;
  }

  .search-results-layout,
  .card-detail-layout {
    display: block;
    height: auto;
    min-height: 100vh;
  }

  .search-topbar {
    position: sticky;
    top: 0;
  }

  .search-topbar-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 64px;
    height: auto;
    padding: 10px 12px;
  }

  .topbar-filter-menu {
    padding: 0 12px 10px;
  }

  .topbar-filter-scroll {
    justify-content: flex-start;
  }

  .search-topbar .language-toggle {
    display: none;
  }

  .search-login-link {
    display: none;
  }

  .results-toolbar-primary,
  .search-topbar-control {
    grid-column: 2;
  }

  .collection-content,
  .collection-main,
  .card-detail-content,
  .card-detail-main {
    overflow: visible;
    height: auto;
  }

  .results-header {
    padding: 18px 18px 10px;
  }

  .results-header-top,
  .results-intro {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .results-intro {
        padding: 0 10px;
  }

  .results-intro-copy {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
    width: 100%;
  }

  .results-intro-actions {
    justify-content: flex-start;
    width: 100%;
    margin-left: 0;
  }

  .results-intro-count {
    margin-left: 0;
  }

  .intro-action-button {
    max-width: calc(100vw - 112px);
  }

  .active-filter-strip {
    width: 100%;
  }

  .active-filter-chip--compound {
    max-width: calc(100vw - 36px);
  }

  .collection-content .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
    padding: 16px 18px 32px;
  }

}

@media (max-width: 700px) {
  .ui-menu-backdrop.is-visible {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: block;
    border: 0;
    background: rgba(0, 0, 0, 0.58);
  }

  .ui-popover-menu.is-mobile,
  .ui-submenu.is-mobile {
    position: fixed !important;
    inset: 12px;
    z-index: 120;
    width: auto;
    max-width: none;
    max-height: none;
    padding: 10px;
    border-radius: 12px;
    border-color: var(--border-solid);
    box-shadow: 0 0 0 1px var(--bg-subtle), 0 26px 70px rgba(0, 0, 0, 0.62);
  }

  .ui-popover-header {
    padding: 10px 10px 12px;
  }

  .ui-menu-item {
    min-height: 44px;
    font-size: 0.9rem;
  }
}

@media (max-width: 640px) {
  .search-home-header {
    height: 62px;
    padding-inline: 16px;
  }

  .search-home-hero {
    width: min(100% - 28px, 560px);
    padding-top: 116px;
  }

  .home-search-form {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .home-search-input {
    flex-basis: 100%;
  }

  .search-topbar-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .search-topbar .filter-input-text {
    height: 38px;
    font-size: 0.88rem;
  }

  .collection-content .card-grid,
  .card-detail-synergy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-inline: 12px;
  }

  .brand-mark-logo {
    width: 26px;
  }
}