/* ============================================================
   Collector Exchange — Global Stylesheet
   cx.css v1.0
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ── CSS Variables ── */
:root {
  /* Backgrounds — wide-spaced depth system */
  --bg-base:       #08080a;
  --bg-surface:    #141418;
  --bg-raised:     #1e1e24;
  --bg-hover:      #28282f;
  --bg-active:     #323238;

  /* Gold */
  --gold:          #C9A84C;
  --gold-light:    #E8C96A;
  --gold-dim:      rgba(201, 168, 76, 0.15);
  --gold-border:   rgba(201, 168, 76, 0.3);

  /* Text */
  --text-primary:  #f2f2f2;
  --text-muted:    rgba(255,255,255,0.4);
  --text-faint:    rgba(255,255,255,0.2);

  /* Borders */
  --border:        rgba(255,255,255,0.1);
  --border-hover:  rgba(255,255,255,0.18);

  /* Status */
  --green:         #4ade80;
  --green-dim:     rgba(74, 222, 128, 0.12);
  --red:           #f87171;
  --red-dim:       rgba(248, 113, 113, 0.12);
  --blue:          #60a5fa;
  --blue-dim:      rgba(96, 165, 250, 0.12);
  --purple:        #a78bfa;
  --purple-dim:    rgba(167, 139, 250, 0.12);
  --orange:        #fb923c;
  --orange-dim:    rgba(251, 146, 60, 0.12);

  /* TCG Colors */
  --tcg-pokemon:    #FFCB05;
  --tcg-mtg:        #a78bfa;
  --tcg-onepiece:   #f87171;
  --tcg-lorcana:    #60a5fa;
  --tcg-sorcery:    #fb923c;
  --tcg-gundam:     #4ade80;
  --tcg-dragonball: #fb923c;
  --tcg-lego:       #facc15;

  /* Sizing */
  --header-height: 64px;
  --topline-height: 2px;
  --radius-sm:     6px;
  --radius:        10px;
  --radius-lg:     16px;
  --radius-xl:     24px;
  --radius-full:   9999px;

  /* Shadows */
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.5);
  --shadow:        0 4px 16px rgba(0,0,0,0.6);
  --shadow-lg:     0 8px 32px rgba(0,0,0,0.8);
  --shadow-gold:   0 0 24px rgba(201,168,76,0.25);
  --shadow-green:  0 0 20px rgba(74,222,128,0.2);
  --shadow-red:    0 0 20px rgba(248,113,113,0.25);

  /* Transitions */
  --t-fast:        100ms ease;
  --t:             200ms ease;
  --t-slow:        350ms ease;
}

/* ── Light Mode ── */
html[data-theme="light"] {
  --bg-base:       #f5f5f0;
  --bg-surface:    #ffffff;
  --bg-raised:     #f0efe8;
  --bg-hover:      #e8e7e0;
  --bg-active:     #dddcd5;

  --gold:          #9A7B2D;
  --gold-light:    #B8942F;
  --gold-dim:      rgba(154,123,45,0.1);
  --gold-border:   rgba(154,123,45,0.2);

  --text-primary:  #1a1a1a;
  --text-secondary:#3a3a3a;
  --text-muted:    rgba(0,0,0,0.5);
  --text-faint:    rgba(0,0,0,0.25);

  --border:        rgba(0,0,0,0.1);
  --border-hover:  rgba(0,0,0,0.18);

  --green:         #16a34a;
  --green-dim:     rgba(22,163,74,0.1);
  --red:           #dc2626;
  --red-dim:       rgba(220,38,38,0.1);
  --blue:          #2563eb;
  --blue-dim:      rgba(37,99,235,0.1);
  --purple:        #7c3aed;
  --purple-dim:    rgba(124,58,237,0.1);
  --orange:        #ea580c;
  --orange-dim:    rgba(234,88,12,0.1);

  --shadow-sm:     0 1px 3px rgba(0,0,0,0.08);
  --shadow-gold:   0 0 20px rgba(154,123,45,0.15);
  --shadow-red:    0 0 20px rgba(220,38,38,0.15);
}
/* Light mode — topline softer */
html[data-theme="light"] body::before { background: linear-gradient(90deg, #9A7B2D 0%, #B8942F 50%, #9A7B2D 100%); }
/* Light mode — header */
html[data-theme="light"] .header { background: #ffffff; border-bottom: 1px solid rgba(0,0,0,0.08); }
/* Light mode — form inputs & selects */
html[data-theme="light"] .form-input,
html[data-theme="light"] .form-select,
html[data-theme="light"] .form-textarea,
html[data-theme="light"] .form-select-custom,
html[data-theme="light"] .form-textarea-custom,
html[data-theme="light"] select option { background: #ffffff; color: #1a1a1a; }
/* Light mode — buttons */
html[data-theme="light"] .btn-primary { background: #9A7B2D; border-color: #9A7B2D; color: #ffffff; }
html[data-theme="light"] .btn-primary:hover { background: #B8942F; border-color: #B8942F; }
html[data-theme="light"] .btn-outline { border-color: rgba(0,0,0,0.2); color: #1a1a1a; }
html[data-theme="light"] .btn-secondary { background: #f0efe8; border-color: rgba(0,0,0,0.1); color: #1a1a1a; }
/* Light mode — auction cards */
html[data-theme="light"] .auction-card { background: #ffffff; border-color: rgba(0,0,0,0.08); box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
html[data-theme="light"] .auction-card:hover { border-color: rgba(154,123,45,0.3); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
/* Light mode — scrollbar */
html[data-theme="light"] ::-webkit-scrollbar-track { background: #f0efe8; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, select, textarea { font-family: inherit; }
ul, ol { list-style: none; }

/* ── Gold Top Line ── */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topline-height);
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 50%, var(--gold) 100%);
  z-index: 1000;
}

/* ── Header ── */
.header {
  position: fixed;
  top: var(--topline-height);
  left: 0; right: 0;
  height: var(--header-height);
  background: rgba(6,6,6,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  z-index: 900;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  padding: 0 1.5rem;
  gap: 1rem;
  overflow: visible;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  flex-shrink: 0;
}
.header-logo-mark {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900;
  font-size: 0.875rem;
  color: var(--bg-base);
  letter-spacing: -0.5px;
  flex-shrink: 0;
}
.header-logo-name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}
.header-logo-name span {
  color: var(--gold);
}

/* Hub link — sits after logo, before nav */
.hub-link {
  color: var(--gold);
  opacity: 0.7;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  white-space: nowrap;
}
.hub-link:hover { opacity: 1; background: rgba(201,168,76,0.1); }

.header-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
}
.header-nav a, .header-nav .vault-link {
  padding: 0.375rem 0.625rem;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color var(--t), background var(--t);
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.header-nav a:hover, .header-nav .vault-link:hover { color: var(--text-primary); background: var(--bg-raised); }
.header-nav a.active { color: var(--gold); }
.nav-upgrade { color: var(--gold) !important; font-weight: 700 !important; border: 1px solid rgba(201,168,76,0.3); border-radius: 6px; background: rgba(201,168,76,0.08) !important; }
.nav-upgrade:hover { background: rgba(201,168,76,0.15) !important; border-color: var(--gold); }

/* Mobile menu hidden by default on all screen sizes */
.mobile-menu { display: none; position: fixed; inset: 0; z-index: 9500; background: var(--bg-base, #0a0a0a); overflow-y: auto; }

@media (max-width: 768px) {
  .header { padding: 0 1rem; gap: 0.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
  .header::-webkit-scrollbar { display: none; }
  .header-logo-name { display: none; }

  /* Hide most nav links, show hamburger */
  .header-nav { gap: 0.125rem; }
  .header-nav a { padding: 0.375rem 0.5rem; font-size: 0.75rem; }
  .header-nav a[href="terms.html"],
  .header-nav a[href="support.html"],
  .header-nav a[href="orders.html"],
  .header-nav a[href="breakroom.html"],
  .header-nav .nav-upgrade,
  .header-nav .cx-tools-drop,
  .header-nav .admin-nav-link { display: none; }
  .hub-link { font-size: 0.6875rem; padding: 0.25rem 0.375rem; display: none; }

  /* Compact sell button + avatar on mobile */
  #header-user .btn-sm { font-size: 0.7rem; padding: 0.3rem 0.5rem; }
  .header-avatar { width: 28px !important; height: 28px !important; font-size: 11px !important; }
  .header-actions { gap: 0.375rem; margin-left: 0.25rem; }
  #notif-bell { padding: 2px !important; }
  #notif-bell svg { width: 18px; height: 18px; }
  .mob-admin { color: var(--gold) !important; font-weight: 700; }

  /* Hamburger button */
  .hamburger-btn { display: flex !important; }

  /* Mobile menu overlay */
  .mobile-menu {
    display: none;
    position: fixed;
    top: var(--header-height, 56px);
    left: 0; right: 0; bottom: 0;
    background: var(--bg, #0a0a0a);
    z-index: 9990;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-menu.open { display: block; }
  .mobile-menu-inner {
    background: var(--bg-base, #0a0a0a);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 100%;
  }
  .mobile-menu-inner a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
  }
  .mobile-menu-inner a:hover,
  .mobile-menu-inner a:active { background: var(--bg-raised); color: var(--text-primary); }
  .mobile-menu-inner a.active { color: var(--gold); }
  .mobile-menu-inner .mob-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
  }
  .mobile-menu-inner .mob-upgrade {
    color: var(--gold) !important;
    font-weight: 700;
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: 8px;
    background: rgba(201,168,76,0.08);
    text-align: center;
    margin: 4px 0;
  }
  .mobile-menu-inner .mob-upgrade:hover { background: rgba(201,168,76,0.15); border-color: var(--gold); }
  .mobile-menu-inner .mob-whatsapp { color: #25D366 !important; font-weight: 700; }
  .mobile-menu-inner .mob-social { font-size: 0.8125rem; color: var(--text-faint) !important; }
}
/* Hamburger hidden on desktop */
.hamburger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  width: 36px; height: 36px;
  padding: 0;
  flex-shrink: 0;
  transition: color var(--t), border-color var(--t);
}
.hamburger-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.hamburger-btn svg { width: 20px; height: 20px; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-left: 0.5rem;
  flex-shrink: 0;
  white-space: nowrap;
}

.header-avatar {
  width: 34px; height: 34px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--bg-base);
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color var(--t);
  position: relative;
  overflow: visible;
}
.header-avatar:hover { border-color: var(--gold); }

/* ── Page Body Offset ── */
.page-body {
  padding-top: calc(var(--header-height) + var(--topline-height) + 1.5rem);
  min-height: 100vh;
}

/* ── Container ── */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.container--narrow { max-width: 800px; }
.container--wide   { max-width: 1440px; }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  transition: all var(--t);
  cursor: pointer;
  border: none;
  font-family: inherit;
  white-space: nowrap;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--bg-base);
  box-shadow: 0 2px 12px rgba(201,168,76,0.3);
}
.btn-primary:hover:not(:disabled) {
  filter: brightness(1.1);
  box-shadow: 0 4px 20px rgba(201,168,76,0.45);
  transform: translateY(-1px);
}
.btn-primary:active:not(:disabled) { transform: translateY(0); }

.btn-secondary {
  background: var(--bg-raised);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--border-hover);
}

.btn-gold {
  background: rgba(201,168,76,0.15) !important;
  border-color: rgba(201,168,76,0.4) !important;
  color: var(--gold) !important;
}
.btn-gold:hover:not(:disabled) {
  background: rgba(201,168,76,0.25) !important;
}

.btn-danger {
  background: var(--red-dim);
  color: var(--red);
  border: 1px solid rgba(248,113,113,0.2);
}
.btn-danger:hover:not(:disabled) {
  background: rgba(248,113,113,0.2);
}

.btn-outline {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold-border);
}
.btn-outline:hover:not(:disabled) {
  background: var(--gold-dim);
  border-color: var(--gold);
}

.btn-success {
  background: var(--green-dim);
  color: var(--green);
  border: 1px solid rgba(74,222,128,0.2);
}
.btn-success:hover:not(:disabled) { background: rgba(74,222,128,0.2); }

.btn-warning {
  background: rgba(251,191,36,0.12);
  color: #FBBF24;
  border: 1px solid rgba(251,191,36,0.2);
}
.btn-warning:hover:not(:disabled) { background: rgba(251,191,36,0.22); }

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
}
.btn-ghost:hover:not(:disabled) { color: var(--text-primary); background: var(--bg-raised); }

.btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
.btn-lg { padding: 0.875rem 1.75rem; font-size: 1rem; }
.btn-xl { padding: 1rem 2rem; font-size: 1.0625rem; border-radius: var(--radius); }
.btn-block { width: 100%; }
.btn-icon { padding: 0.5rem; border-radius: var(--radius-sm); }

/* ── Form Styles ── */
.form-group { display: flex; flex-direction: column; gap: 0.375rem; }
.form-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.form-input,
.form-select,
.form-textarea {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.625rem 0.875rem;
  color: var(--text-primary);
  font-size: 0.9375rem;
  font-family: inherit;
  transition: border-color var(--t), box-shadow var(--t);
  outline: none;
  width: 100%;
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--text-muted); }
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--gold-border);
  box-shadow: 0 0 0 3px var(--gold-dim);
}
.form-input.error,
.form-select.error,
.form-textarea.error { border-color: var(--red); }
.form-input.success,
.form-select.success,
.form-textarea.success { border-color: var(--green); }
.form-textarea { resize: vertical; min-height: 100px; }
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  padding-right: 2.25rem;
  cursor: pointer;
}
.form-hint { font-size: 0.8125rem; color: var(--text-muted); }
.form-error { font-size: 0.8125rem; color: var(--red); }
.form-success-msg { font-size: 0.8125rem; color: var(--green); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

.input-prefix-wrap { position: relative; }
.input-prefix {
  position: absolute;
  left: 0.875rem;
  top: 50%; transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.9375rem;
  pointer-events: none;
}
.input-prefix-wrap .form-input { padding-left: 1.75rem; }

/* ── Cards ── */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}
.card--raised {
  background: var(--bg-raised);
}
.card--hover { transition: border-color var(--t), box-shadow var(--t), transform var(--t); }
.card--hover:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

/* ── Auction Card ── */
.auction-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  word-break: break-word;
  -webkit-min-logical-width: 0;
}
.auction-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.auction-card--live {
  border-color: rgba(74,222,128,0.25);
  box-shadow: 0 0 0 1px rgba(74,222,128,0.1), var(--shadow-green);
}
.auction-card--ending {
  border-color: rgba(248,113,113,0.35);
  box-shadow: 0 0 0 1px rgba(248,113,113,0.1), var(--shadow-red);
  animation: pulse-red 2s ease-in-out infinite;
}
.auction-card--paused {
  border-color: rgba(245,158,11,0.3);
  box-shadow: 0 0 0 1px rgba(245,158,11,0.1);
  opacity: 0.85;
}
.auction-card--sold {
  border-color: rgba(74,222,128,0.25);
  opacity: 0.75;
}
.auction-card--ended {
  border-color: rgba(156,163,175,0.2);
  opacity: 0.65;
}

/* ── Card Watch Button — see bottom of file ── */
.card-watch-btn:disabled { opacity: 0.5; cursor: wait; }
.countdown--paused {
  color: #fbbf24 !important;
}
@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 0 1px rgba(248,113,113,0.1), 0 0 16px rgba(248,113,113,0.2); }
  50%       { box-shadow: 0 0 0 1px rgba(248,113,113,0.2), 0 0 28px rgba(248,113,113,0.35); }
}

.auction-card__image {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--bg-base);
}
.auction-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.auction-card:hover .auction-card__image img { transform: scale(1.03); }

.auction-card__badges {
  position: absolute;
  top: 0.5rem; left: 0.5rem;
  display: flex; gap: 0.25rem;
  flex-wrap: wrap;
}
.auction-card__bin-badge {
  position: absolute;
  top: 0.5rem; right: 0.5rem;
}

.auction-card__body {
  padding: 0.875rem;
  display: flex; flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;       /* iOS Safari: prevent content overflow breaking grid */
  overflow: hidden;
}
.auction-card__title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.auction-card__meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  overflow: hidden;
  max-width: 100%;
}
.auction-card__bid-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 0.25rem;
}
.auction-card__bid-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 1px;
}
.auction-card__bid {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.5px;
}
.auction-card__bid-count {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.auction-card__footer {
  display: flex;
  flex-direction: column;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
  margin-top: auto;
  gap: 0.375rem;
  min-width: 0;
}
.auction-card__seller-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  overflow: hidden;
}
.auction-card__seller-badge {
  font-size: 0.8125rem;
  flex-shrink: 0;
}
.auction-card__seller-name {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.8125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  text-decoration: none;
  transition: color 0.15s;
}
.auction-card__seller-name:hover { color: var(--gold); }
.auction-card__action-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
}
.auction-card__collection-link {
  text-decoration: none;
  color: var(--text-muted);
  font-size: 0.625rem;
  font-weight: 600;
  transition: color 0.15s;
  white-space: nowrap;
}
.auction-card__collection-link:hover { color: var(--gold); }
.auction-card__action-btns {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}
.auction-card__bin {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.auction-card__bin strong { color: var(--blue); font-weight: 600; }

/* ── Badge Pills ── */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.badge-pill--gold    { background: var(--gold-dim);   color: var(--gold-light); border: 1px solid var(--gold-border); }
.badge-pill--green   { background: var(--green-dim);  color: var(--green); border: 1px solid rgba(74,222,128,0.2); }
.badge-pill--red     { background: var(--red-dim);    color: var(--red); border: 1px solid rgba(248,113,113,0.2); }
.badge-pill--blue    { background: var(--blue-dim);   color: var(--blue); border: 1px solid rgba(96,165,250,0.2); }
.badge-pill--purple  { background: var(--purple-dim); color: var(--purple); border: 1px solid rgba(167,139,250,0.2); }
.badge-pill--orange  { background: var(--orange-dim); color: var(--orange); border: 1px solid rgba(251,146,60,0.2); }
.badge-pill--surface { background: var(--bg-raised);  color: var(--text-muted); border: 1px solid var(--border); }
.badge-pill--new {
  background: linear-gradient(135deg, rgba(50,110,200,0.85), rgba(109,76,198,0.85));
  color: #fff;
  border: 1px solid rgba(96,165,250,0.9);
}
.badge-pill--ending {
  background: rgba(200,40,40,0.9);
  color: #fff;
  border: 1px solid rgba(248,113,113,0.9);
  animation: pulse-text 1.5s ease-in-out infinite;
}
@keyframes pulse-text {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.7; }
}

/* ── TCG Label ── */
.tcg-label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tcg-label--pokemon    { background: rgba(255,203,5,0.85);   color: #1a1a00; border: 1px solid rgba(255,203,5,0.9); }
.tcg-label--mtg        { background: rgba(109,76,198,0.85);  color: #f0ecff; border: 1px solid rgba(167,139,250,0.9); }
.tcg-label--onepiece   { background: rgba(200,60,60,0.85);   color: #fff0f0; border: 1px solid rgba(248,113,113,0.9); }
.tcg-label--lorcana    { background: rgba(50,110,200,0.85);  color: #e0edff; border: 1px solid rgba(96,165,250,0.9); }
.tcg-label--sorcery    { background: rgba(180,90,20,0.85);   color: #fff3e0; border: 1px solid rgba(251,146,60,0.9); }
.tcg-label--gundam     { background: rgba(30,140,60,0.85);   color: #e0ffe8; border: 1px solid rgba(74,222,128,0.9); }
.tcg-label--dragonball { background: rgba(180,90,20,0.85);   color: #fff3e0; border: 1px solid rgba(251,146,60,0.9); }
.tcg-label--riftbound  { background: rgba(20,140,170,0.85);  color: #e0fbff; border: 1px solid rgba(34,211,238,0.9); }
.tcg-label--yugioh     { background: rgba(120,50,190,0.85);  color: #f0e4ff; border: 1px solid rgba(147,51,234,0.9); }
.tcg-label--other      { background: rgba(100,116,139,0.85); color: #f0f4f8; border: 1px solid rgba(148,163,184,0.9); }
.tcg-label--lego       { background: rgba(190,160,10,0.85);  color: #1a1a00; border: 1px solid rgba(250,204,21,0.9); }
.tcg-label--videogames { background: rgba(52,211,153,0.85);  color: #f0fdf4; border: 1px solid rgba(74,222,128,0.9); }
.tcg-label--accessories{ background: rgba(45,212,191,0.85);  color: #f0fdfa; border: 1px solid rgba(94,234,212,0.9); }

/* ── Condition Badge ── */
.condition-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.175rem 0.45rem;
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.condition--near_perfect { background: rgba(30,140,60,0.85); color: #e0ffe8; border: 1px solid rgba(74,222,128,0.9); }
.condition--excellent    { background: rgba(50,110,200,0.85); color: #e0edff; border: 1px solid rgba(96,165,250,0.9); }
.condition--average      { background: rgba(80,80,80,0.85); color: #e0e0e0; border: 1px solid rgba(255,255,255,0.3); }

/* ── Sub-category Badge ── */
.sub-badge {
  display: inline-flex; align-items: center;
  padding: 0.175rem 0.45rem;
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sub--sealed  { background: rgba(109,76,198,0.85); color: #f0ecff; border: 1px solid rgba(167,139,250,0.9); }
.sub--graded  { background: rgba(160,130,40,0.85); color: #fff8e0; border: 1px solid var(--gold-border); }
.sub--raw     { background: rgba(80,80,80,0.85); color: #e0e0e0; border: 1px solid rgba(255,255,255,0.3); }
.sub--accessories { background: rgba(20,140,100,0.85); color: #e0fff0; border: 1px solid rgba(52,211,153,0.9); }
.sub--new { background: rgba(52,211,153,0.85); color: #f0fdf4; border: 1px solid rgba(74,222,128,0.9); }
.sub--used { background: rgba(120,113,108,0.85); color: #e7e5e4; border: 1px solid rgba(168,162,158,0.9); }

/* ── Countdown ── */
.countdown {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.countdown .countdown-icon { font-size: 0.75rem; }
.countdown--urgent {
  color: var(--orange);
}
.countdown--critical {
  color: var(--red);
  animation: countdown-pulse 1s ease-in-out infinite;
}
@keyframes countdown-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}
.countdown-lg {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}
.countdown-lg.countdown--urgent { color: var(--orange); }
.countdown-lg.countdown--critical {
  color: var(--red);
  animation: countdown-pulse 1s ease-in-out infinite;
  text-shadow: 0 0 20px rgba(248,113,113,0.4);
}

/* ── Toasts ── */
.toast-container {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  pointer-events: none;
}
.toast {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 280px;
  max-width: 480px;
  pointer-events: auto;
  animation: toast-in 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(16px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.toast-out {
  animation: toast-out 0.2s ease forwards;
}
@keyframes toast-out {
  to { opacity: 0; transform: translateY(8px) scale(0.97); }
}
.toast--success { border-color: rgba(74,222,128,0.3); }
.toast--success .toast-icon { color: var(--green); }
.toast--error   { border-color: rgba(248,113,113,0.3); }
.toast--error   .toast-icon { color: var(--red); }
.toast--info    { border-color: var(--gold-border); }
.toast--info    .toast-icon { color: var(--gold); }
.toast--warning { border-color: rgba(251,146,60,0.3); }
.toast--warning .toast-icon { color: var(--orange); }

/* ── Skeleton Loading ── */
.skeleton {
  background: linear-gradient(90deg,
    var(--bg-raised) 0%,
    var(--bg-hover)  50%,
    var(--bg-raised) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.skeleton-img   { aspect-ratio: 4/5; width: 100%; }
.skeleton-body  { padding: 0.875rem; display: flex; flex-direction: column; gap: 0.5rem; }
.skeleton-line  { height: 12px; width: 100%; }
.skeleton-line--short { width: 60%; }
.skeleton-line--xs    { width: 40%; }

/* ── Grid Layouts ── */
.auction-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.875rem;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 1200px) { .auction-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .auction-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .auction-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 320px)  { .auction-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── Filter Tabs ── */
.filter-tabs {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}
.filter-tab {
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  border: 1px solid var(--border);
  background: transparent;
  transition: all var(--t);
  cursor: pointer;
  font-family: inherit;
}
.filter-tab:hover { color: var(--text-primary); border-color: var(--border-hover); }
.filter-tab.active {
  background: var(--gold-dim);
  color: var(--gold-light);
  border-color: var(--gold-border);
}

.filter-pills {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
}
.filter-pill {
  padding: 0.3125rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  border: 1px solid var(--border);
  background: transparent;
  transition: all var(--t);
  cursor: pointer;
  font-family: inherit;
}
.filter-pill:hover { color: var(--text-primary); background: var(--bg-raised); }
.filter-pill.active {
  color: var(--text-primary);
  background: var(--bg-raised);
  border-color: var(--border-hover);
}

/* ── Pagination ── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}
.pagination-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  transition: all var(--t);
  cursor: pointer;
}
.pagination-nav {
  width: auto;
  padding: 0 14px;
  font-weight: 700;
  font-size: 0.8125rem;
  gap: 4px;
}
.pagination-dots {
  padding: 0 2px;
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 36px;
}
.pagination-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.pagination-btn.active {
  background: var(--gold-dim);
  color: var(--gold-light);
  border-color: var(--gold-border);
  font-weight: 700;
}
.pagination-btn:disabled { opacity: 0.35; cursor: not-allowed; }
@media (max-width: 480px) {
  .pagination { gap: 0.25rem; }
  .pagination-btn { width: 32px; height: 32px; font-size: 0.8125rem; }
  .pagination-nav { padding: 0 10px; font-size: 0.75rem; }
}

/* ── Divider ── */
.divider {
  width: 100%; height: 1px;
  background: var(--border);
  margin: 1.25rem 0;
}

/* ── Section Headers ── */
.section-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
}
.section-subtitle { font-size: 0.875rem; color: var(--text-muted); }

/* ── Hero ── */
.hero {
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(201,168,76,0.08) 0%, transparent 70%);
  padding: 4rem 0 3rem;
  text-align: center;
}
.hero-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -1.5px;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}
.hero-title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-sub {
  font-size: 1.0625rem;
  color: var(--text-muted);
  margin-bottom: 2rem;
}
.hero-search {
  display: flex;
  max-width: 560px;
  margin: 0 auto;
  gap: 0.5rem;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 0.375rem 0.375rem 0.375rem 1.25rem;
  transition: border-color var(--t), box-shadow var(--t);
}
.hero-search:focus-within {
  border-color: var(--gold-border);
  box-shadow: 0 0 0 3px var(--gold-dim);
}
.hero-search input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 0.9375rem;
}
.hero-search input::placeholder { color: var(--text-muted); }

/* ── Auction Detail Layout ── */
.auction-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 1024px) { .auction-layout { grid-template-columns: 1fr; } }

.auction-sticky {
  position: sticky;
  top: calc(var(--header-height) + var(--topline-height) + 1.5rem);
}

/* Image Gallery */
.gallery { display: flex; flex-direction: column; gap: 0.75rem; }
.gallery-main {
  aspect-ratio: 1;
  background: var(--bg-raised);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}
.gallery-main img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.gallery-thumbs {
  display: flex; gap: 0.5rem;
}
.gallery-thumb {
  flex: 1;
  aspect-ratio: 1;
  background: var(--bg-raised);
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid var(--border);
  cursor: pointer;
  transition: border-color var(--t);
}
.gallery-thumb.active { border-color: var(--gold); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Bid Panel */
.bid-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.bid-panel__current-bid-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 600; }
.bid-panel__current-bid { font-size: 2.5rem; font-weight: 900; color: var(--gold); letter-spacing: -1.5px; line-height: 1; }
.bid-panel__bid-count { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.25rem; }

.reserve-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
}
.reserve-indicator--met { color: var(--green); }
.reserve-indicator--unmet { color: var(--orange); }

.anti-snipe-notice {
  background: rgba(251,146,60,0.08);
  border: 1px solid rgba(251,146,60,0.2);
  border-radius: var(--radius-sm);
  padding: 0.625rem 0.875rem;
  font-size: 0.8125rem;
  color: var(--orange);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bin-panel {
  background: var(--blue-dim);
  border: 1px solid rgba(96,165,250,0.2);
  border-radius: var(--radius);
  padding: 1rem;
}
.bin-panel__price { font-size: 1.5rem; font-weight: 800; color: var(--blue); }
.bin-panel__label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }

.bid-history { display: flex; flex-direction: column; gap: 0.5rem; }
.bid-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.8125rem;
}
.bid-history-item:last-child { border-bottom: none; }
.bid-history-item__user { color: var(--text-muted); }
.bid-history-item__amount { font-weight: 700; color: var(--text-primary); }
.bid-history-item__time { color: var(--text-faint); font-size: 0.75rem; }

/* ── Seller Card ── */
.seller-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.seller-avatar {
  width: 52px; height: 52px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--bg-base);
  flex-shrink: 0;
}
.seller-name { font-weight: 700; font-size: 0.9375rem; }
.seller-rep { color: var(--gold); font-size: 0.875rem; font-weight: 600; }
.seller-badge { font-size: 0.75rem; color: var(--text-muted); }

/* ── Step Form / Progress ── */
.step-progress {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 2.5rem;
}
.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  flex: 1;
  position: relative;
}
.step-item::after {
  content: '';
  position: absolute;
  top: 14px; left: calc(50% + 14px);
  right: calc(-50% + 14px);
  height: 2px;
  background: var(--border);
  transition: background var(--t-slow);
}
.step-item:last-child::after { display: none; }
.step-item.complete::after { background: var(--gold); }
.step-dot {
  width: 28px; height: 28px;
  border-radius: var(--radius-full);
  background: var(--bg-raised);
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  transition: all var(--t-slow);
  position: relative;
  z-index: 1;
}
.step-item.active .step-dot {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  border-color: var(--gold);
  color: var(--bg-base);
  box-shadow: 0 0 12px rgba(201,168,76,0.4);
}
.step-item.complete .step-dot {
  background: var(--gold-dim);
  border-color: var(--gold);
  color: var(--gold);
}
.step-label { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); }
.step-item.active .step-label { color: var(--gold); }
.step-item.complete .step-label { color: var(--text-muted); }

/* TCG Picker Grid */
.tcg-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}
@media (max-width: 600px) { .tcg-picker-grid { grid-template-columns: repeat(2, 1fr); } }
.tcg-picker-card {
  background: var(--bg-raised);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all var(--t);
  text-align: center;
}
.tcg-picker-card:hover { border-color: var(--border-hover); background: var(--bg-hover); }
.tcg-picker-card.selected {
  border-color: var(--gold);
  background: var(--gold-dim);
  box-shadow: 0 0 16px rgba(201,168,76,0.2);
}
.tcg-picker-card__icon { font-size: 1.75rem; }
.tcg-picker-card__name { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }

/* Duration Picker */
.duration-grid {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
}
.duration-card {
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  border: 2px solid var(--border);
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-muted);
  transition: all var(--t);
  text-align: center;
  min-width: 72px;
}
.duration-card:hover { border-color: var(--border-hover); color: var(--text-primary); }
.duration-card.selected {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--gold-dim);
}

/* Image Upload Slots */
.image-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
@media (max-width: 600px) { .image-slots { grid-template-columns: repeat(2, 1fr); } }
.image-slot {
  aspect-ratio: 1;
  background: var(--bg-raised);
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all var(--t);
  position: relative;
  overflow: hidden;
}
.image-slot:hover { border-color: var(--gold-border); background: var(--gold-dim); }
.image-slot.drag-over { border-color: var(--gold); background: var(--gold-dim); }
.image-slot.has-image { border-style: solid; border-color: var(--border-hover); }
.image-slot img { width: 100%; height: 100%; object-fit: cover; position: absolute; }
.image-slot__remove {
  position: absolute; top: 0.25rem; right: 0.25rem;
  background: rgba(0,0,0,0.7);
  border-radius: var(--radius-full);
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; color: var(--text-primary);
  z-index: 2; cursor: pointer;
}
.image-slot__label { font-size: 0.75rem; color: var(--text-muted); text-align: center; }
.image-slot__icon { font-size: 1.25rem; color: var(--text-muted); }
.image-slot:first-child .image-slot__label::after { content: ' (Main)'; color: var(--gold); }

/* Toggle Switch */
.toggle-wrap { display: flex; align-items: center; gap: 0.75rem; }
.toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--t);
}
.toggle-slider::before {
  content: '';
  position: absolute;
  height: 16px; width: 16px;
  left: 2px; bottom: 2px;
  background: var(--text-muted);
  border-radius: var(--radius-full);
  transition: all var(--t);
}
.toggle-switch input:checked + .toggle-slider { background: var(--gold-dim); border-color: var(--gold-border); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); background: var(--gold); }
.toggle-label { font-size: 0.9375rem; font-weight: 500; }

/* ── Admin Layout ── */
.admin-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: calc(100vh - var(--header-height) - var(--topline-height));
}
@media (max-width: 768px) { .admin-layout { grid-template-columns: 1fr; } }

.admin-sidebar {
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  position: sticky;
  top: calc(var(--header-height) + var(--topline-height));
  height: calc(100vh - var(--header-height) - var(--topline-height));
  overflow-y: auto;
}
.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: all var(--t);
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  width: 100%;
  text-align: left;
}
.admin-nav-item:hover { color: var(--text-primary); background: var(--bg-raised); }
.admin-nav-item.active { color: var(--text-primary); background: var(--bg-raised); border-left: 2px solid var(--gold); margin-left: -1px; }
.admin-nav-item .nav-icon { font-size: 1rem; width: 1.25rem; text-align: center; }

.admin-content { padding: 2rem 1.5rem; }

/* ── Stat Cards ── */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .stat-grid { grid-template-columns: 1fr; } }
.stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.stat-card__label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 600; }
.stat-card__value { font-size: 2rem; font-weight: 900; color: var(--text-primary); letter-spacing: -0.5px; }
.stat-card__icon { font-size: 1.25rem; }
.stat-card--gold  .stat-card__value { color: var(--gold); }
.stat-card--green .stat-card__value { color: var(--green); }
.stat-card--red   .stat-card__value { color: var(--red); }
.stat-card--blue  .stat-card__value { color: var(--blue); }

/* ── Table ── */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  background: var(--bg-raised);
}
.data-table th:first-child { border-radius: var(--radius-sm) 0 0 0; }
.data-table th:last-child  { border-radius: 0 var(--radius-sm) 0 0; }
.data-table td {
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.data-table tbody tr { transition: background var(--t-fast); }
.data-table tbody tr:hover { background: var(--bg-raised); }
.data-table tbody tr:last-child td { border-bottom: none; }
.table-wrap {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  overflow-x: auto;
}

/* ── Profile ── */
.profile-header {
  background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(201,168,76,0.1) 0%, transparent 70%);
  padding: 3rem 0 2rem;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.profile-avatar-lg {
  width: 84px; height: 84px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  font-weight: 800;
  color: var(--bg-base);
  margin: 0 auto 1rem;
  box-shadow: 0 0 32px rgba(201,168,76,0.3);
  border: 3px solid rgba(201,168,76,0.3);
}
.profile-name { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.5px; }
.profile-rep { font-size: 1rem; color: var(--gold); font-weight: 600; }
.profile-stats {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
.profile-stat { text-align: center; }
.profile-stat__value { font-size: 1.25rem; font-weight: 800; color: var(--text-primary); }
.profile-stat__label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }

/* ── Tabs ── */
.tabs { display: flex; border-bottom: 1px solid var(--border); gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab-btn {
  padding: 0.875rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--t);
  font-family: inherit;
  margin-bottom: -1px;
  white-space: nowrap;
  flex-shrink: 0;
}
.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active { color: var(--gold); border-bottom-color: var(--gold); }
.tab-panel { display: none; padding: 1.5rem 0; }
.tab-panel.active { display: block; }

@media (max-width: 768px) {
  .tab-btn { padding: 0.75rem 0.875rem; font-size: 0.8125rem; }
}

/* ── Star Rating ── */
.star-dist { display: flex; flex-direction: column; gap: 0.375rem; }
.star-dist-row { display: flex; align-items: center; gap: 0.625rem; font-size: 0.8125rem; }
.star-dist-bar-wrap { flex: 1; height: 6px; background: var(--bg-raised); border-radius: var(--radius-full); overflow: hidden; }
.star-dist-bar { height: 100%; background: var(--gold); border-radius: var(--radius-full); }
.star-dist-count { width: 24px; text-align: right; color: var(--text-muted); font-size: 0.75rem; }
.star-label { width: 16px; text-align: right; color: var(--text-muted); }

.review-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
}
.review-stars { color: var(--gold); letter-spacing: 2px; font-size: 0.875rem; }
.review-text { font-size: 0.875rem; color: var(--text-primary); margin-top: 0.375rem; line-height: 1.5; }
.review-meta { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.5rem; }

/* ── Auth Card ── */
.auth-wrap {
  min-height: calc(100vh - var(--header-height) - var(--topline-height));
  display: flex;
  align-items: stretch;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(201,168,76,0.06) 0%, transparent 60%);
}
.auth-pitch {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2.5rem;
  border-right: 1px solid var(--border);
  background: rgba(201,168,76,0.02);
}
.auth-pitch-inner { max-width: 440px; }
.auth-pitch-headline {
  font-size: 2rem;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin-bottom: 2rem;
}
.auth-features { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 2rem; }
.auth-feature { display: flex; align-items: flex-start; gap: 0.875rem; }
.auth-feature-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(201,168,76,0.08); border: 1px solid rgba(201,168,76,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.125rem; flex-shrink: 0;
}
.auth-feature-title { font-size: 0.9375rem; font-weight: 800; color: var(--text-primary); margin-bottom: 2px; }
.auth-feature-desc { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.5; }
.auth-tcg-strip { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.auth-tcg-pill {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 100px; padding: 0.375rem 0.75rem;
  font-size: 0.75rem; font-weight: 700; color: var(--text-muted);
}
.auth-pitch-footer { font-size: 0.8125rem; color: var(--text-muted); }
.auth-form-side {
  width: 480px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 2rem 1.5rem;
}
@media (max-width: 900px) {
  .auth-wrap { flex-direction: column; align-items: stretch; }
  .auth-pitch { border-right: none; border-bottom: 1px solid var(--border); padding: 2rem 1.5rem; }
  .auth-pitch-headline { font-size: 1.5rem; }
  .auth-features { gap: 0.875rem; }
  .auth-feature-icon { width: 36px; height: 36px; font-size: 1rem; }
  .auth-form-side { width: 100%; }
}
.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2rem;
}
.auth-logo {
  display: none;
}
.auth-toggle {
  display: flex;
  background: var(--bg-raised);
  border-radius: var(--radius-sm);
  padding: 0.25rem;
  margin-bottom: 1.5rem;
}
.auth-toggle-btn {
  flex: 1;
  padding: 0.5rem;
  border-radius: calc(var(--radius-sm) - 2px);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: all var(--t);
  font-family: inherit;
}
.auth-toggle-btn.active {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* ── Dispute Thread ── */
.dispute-message {
  padding: 0.875rem;
  background: var(--bg-raised);
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
}
.dispute-message--system {
  background: var(--gold-dim);
  border: 1px solid var(--gold-border);
}
.dispute-message__author { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); margin-bottom: 0.25rem; }
.dispute-message__text { font-size: 0.875rem; }

/* ── Live dot ── */
.live-dot {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-size: 0.75rem; font-weight: 700; color: var(--green);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.live-dot::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: var(--radius-full);
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  animation: live-blink 1.5s ease-in-out infinite;
}
@keyframes live-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--green); }
  50%       { opacity: 0.5; box-shadow: 0 0 12px var(--green); }
}

/* ── Misc Utilities ── */
.text-gold    { color: var(--gold); }
.text-muted   { color: var(--text-muted); }
.text-green   { color: var(--green); }
.text-red     { color: var(--red); }
.text-blue    { color: var(--blue); }
.text-purple  { color: var(--purple); }
.text-orange  { color: var(--orange); }
.font-mono    { font-family: 'JetBrains Mono', 'Fira Code', monospace; }
.font-bold    { font-weight: 700; }
.font-black   { font-weight: 900; }
.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1  { gap: 0.25rem; }
.gap-2  { gap: 0.5rem; }
.gap-3  { gap: 0.75rem; }
.gap-4  { gap: 1rem; }
.gap-6  { gap: 1.5rem; }
.mt-1  { margin-top: 0.25rem; }
.mt-2  { margin-top: 0.5rem; }
.mt-4  { margin-top: 1rem; }
.mt-6  { margin-top: 1.5rem; }
.mb-2  { margin-bottom: 0.5rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-6  { margin-bottom: 1.5rem; }
.p-4   { padding: 1rem; }
.rounded { border-radius: var(--radius); }
.w-full { width: 100%; }
.hidden { display: none !important; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }

/* ── Selection ── */
::selection { background: rgba(201,168,76,0.3); color: var(--text-primary); }

/* ── Focus visible ── */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ── Chat messages (shared: orders + listing chat) ── */
.chat-msg { display: flex; gap: 0.625rem; align-items: flex-start; }
.chat-msg--mine { flex-direction: row-reverse; }
.chat-bubble {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px); padding: 0.5rem 0.875rem;
  max-width: 75%; font-size: 0.875rem; line-height: 1.45;
}
.chat-msg--mine .chat-bubble { background: var(--gold-dim); border-color: var(--gold-border); color: var(--text-primary); }
.chat-bubble__name { font-size: 0.7rem; font-weight: 700; color: var(--gold); margin-bottom: 0.125rem; }
.chat-msg--mine .chat-bubble__name { display: none; }
.chat-bubble__time { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.25rem; }

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE IMPROVEMENTS (#8-11)
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  /* #8: Filter pills — hide divider, horizontal scroll */
  .filter-pills-divider { display: none; }
  .filter-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filter-pills::-webkit-scrollbar { display: none; }
  .filter-pill { flex-shrink: 0; font-size: 0.75rem; padding: 0.25rem 0.625rem; }

  /* Browse selects — compact row on mobile */
  .browse-selects {
    gap: 4px !important;
  }
  .browse-selects .form-select {
    font-size: 0.7rem;
    padding: 0.3rem 1.4rem 0.3rem 0.4rem;
    min-height: 0;
    flex: 1 1 0;
    min-width: 0;
    max-width: 33%;
    background-position: right 0.3rem center;
    background-size: 10px;
    text-overflow: ellipsis;
  }

  /* #8: Status + sort selects — full width stacked */
  .browse-controls-row {
    flex-direction: column;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }
  .browse-controls-row .form-select { width: 100% !important; font-size: 0.875rem; }
  .browse-controls-row .filter-pills-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* #9: Auction detail — gallery + bid panel */
  .auction-layout { gap: 1rem; }
  .gallery-main { border-radius: var(--radius); }
  .gallery-thumbs { gap: 0.375rem; }
  .gallery-thumb { border-radius: var(--radius-sm); }
  .bid-panel { padding: 1rem; gap: 1rem; }
  .bid-panel__current-bid { font-size: 2rem; }
  .bin-panel__price { font-size: 1.25rem; }
  /* Larger tap targets for bid inputs/buttons */
  .bid-panel input[type="number"],
  .bid-panel input[type="text"] {
    font-size: 16px; /* prevent iOS zoom */
    min-height: 44px;
    padding: 0.5rem 0.75rem 0.5rem 2rem;
  }
  .bid-panel .btn,
  .bin-panel .btn {
    min-height: 48px;
    font-size: 1rem;
    padding: 0.75rem 1rem;
  }
  /* Auction meta info */
  .auction-meta { font-size: 0.8125rem; }
  .auction-sticky { position: static; }

  /* #10: Create form — already has 2-col at 600px, tighten further */
  .tcg-picker-grid { gap: 0.5rem; }
  .tcg-picker-card { padding: 0.625rem; }
  .tcg-picker-card__name { font-size: 0.75rem; }
  .image-slots { gap: 0.5rem; }
  .image-slot { min-height: 80px; }
  /* Form inputs — prevent iOS zoom */
  .form-input, .form-select, .form-textarea, textarea, select, input[type="text"], input[type="number"], input[type="email"] {
    font-size: 16px;
  }

  /* #9: Seller info card on auction page */
  .seller-card { padding: 0.875rem; }

  /* General: containers tighter */
  .container { padding-left: 1rem; padding-right: 1rem; }

  /* General: page titles */
  .page-title { font-size: 1.25rem; }

  /* #11: Watchlist drawer — full width, larger tap targets */
  #wl-drawer-exchange {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: 75vh !important;
    right: -100vw !important;
  }
  #wl-drawer-exchange[style*="right: 12px"],
  #wl-drawer-exchange[style*="right:12px"],
  #wl-drawer-exchange[style*="right: 8px"],
  #wl-drawer-exchange[style*="right:8px"] {
    right: 8px !important;
  }
  #wl-drawer-exchange a { min-height: 44px; display: flex; align-items: center; }
  #wl-drawer-exchange button { min-width: 36px; min-height: 36px; }

  /* Notification drawer — full width bottom sheet on mobile */
  .notif-drawer {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 80vh;
    border-radius: 16px 16px 0 0 !important;
    transform: translateY(100%) !important;
    background: #0d0d0d !important;
  }
  .notif-drawer.open {
    transform: translateY(0) !important;
  }
  .notif-drawer #notif-list {
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .notif-item {
    padding: 0.875rem 1rem !important;
    gap: 0.75rem !important;
  }
  .notif-item-title { font-size: 0.9375rem !important; }
  .notif-item-body { font-size: 0.8125rem !important; white-space: normal !important; }
  .notif-drawer-header {
    padding: 1rem 1.25rem !important;
  }
  .notif-drawer-header h3 { font-size: 1rem !important; }
  .notif-footer { padding: 0.875rem 1rem !important; }
  .notif-footer a { font-size: 0.9375rem !important; }
}

@media (max-width: 480px) {
  /* #10: Image slots single column on tiny screens */
  .image-slots { grid-template-columns: 1fr 1fr; }

  /* Filter pills even smaller */
  .filter-pill { font-size: 0.6875rem; padding: 0.1875rem 0.5rem; }

  /* Auction cards — tighter */
  .auction-card { border-radius: var(--radius); }
  .auction-card__body { padding: 0.5rem; gap: 0.375rem; }
  .auction-card__title { font-size: 0.75rem; -webkit-line-clamp: 2; }
  .auction-card__meta { gap: 0.25rem; }
  .auction-card__meta .tcg-label,
  .auction-card__meta .sub-badge,
  .auction-card__meta .condition-badge { font-size: 0.5625rem; padding: 0.125rem 0.3rem; }
  .auction-card__bid { font-size: 1.125rem; }
  .auction-card__bid-label,
  .auction-card__bid-count { font-size: 0.625rem; }
  .auction-card__footer { padding-top: 0.375rem; gap: 0.25rem; }
  .auction-card__seller-row { gap: 0.25rem; }
  .auction-card__seller-name { font-size: 0.75rem; }
  .auction-card__seller-rep { font-size: 0.5625rem; }
  .auction-card__action-row { gap: 0.375rem; }
  .auction-card__collection-link { font-size: 0.5625rem; }
  .card-watch-btn { padding: 4px; }
  .card-watch-btn svg { width: 13px; height: 13px; }
  .card-buy-btn { padding: 4px; }
  .card-buy-btn svg { width: 12px; height: 12px; }
  .auction-card__bin { font-size: 0.625rem; }
}

/* ══════════════════════════════════════════════════════════════
   Browse Layout: Sidebar + Content
   ══════════════════════════════════════════════════════════════ */
.browse-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 1.5rem;
  align-items: start;
}
.browse-sidebar {
  position: sticky;
  top: calc(var(--header-height, 64px) + 12px);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem;
  max-height: calc(100vh - var(--header-height, 64px) - 24px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.sidebar-close { display: none; background: none; border: none; color: var(--text-muted); font-size: 1.5rem; cursor: pointer; }
.sidebar-group {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sidebar-group:last-child { border-bottom: none; margin-bottom: 0; }
.sidebar-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.sidebar-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.sidebar-pill {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  white-space: nowrap;
}
.sidebar-pill:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); border-color: rgba(255,255,255,0.15); }
.sidebar-pill.active { background: rgba(201,168,76,0.12); color: var(--gold); border-color: rgba(201,168,76,0.3); }
.browse-main { min-width: 0; }
#filter-toggle { display: none; }

/* ── Trust Badges Strip ── */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 1.25rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--border);
}
.trust-badge {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}
.trust-icon { font-size: 1.25rem; flex-shrink: 0; margin-top: 1px; }
.trust-title { font-size: 0.75rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1px; }
.trust-desc { font-size: 0.6875rem; color: var(--text-muted); line-height: 1.4; }

/* ── Sidebar Responsive ── */
@media (max-width: 960px) {
  .browse-layout { grid-template-columns: 1fr; }
  .browse-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 280px;
    max-height: 100vh;
    z-index: 200;
    border-radius: 0;
    border-right: 1px solid var(--border);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    padding: 1rem 1.25rem;
  }
  .browse-sidebar.open { transform: translateX(0); }
  .sidebar-close { display: block; }
  #filter-toggle { display: inline-flex !important; }
  .trust-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .trust-strip { grid-template-columns: 1fr; }
}

/* ── Card: bolder price ── */
.auction-card__bid {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.75px;
}

/* ── Card: seller row with rep ── */
.auction-card__seller-rep {
  font-size: 0.6875rem;
  color: var(--gold);
  font-weight: 600;
  margin-left: 2px;
}

/* ══════════════════════════════════════════════════════════════
   Card: SVG Heart Watchlist + Buy Button + Subtle Depth
   ══════════════════════════════════════════════════════════════ */

/* Heart watchlist button */
.card-watch-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-muted);
  padding: 5px 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.card-watch-btn:hover { background: rgba(248,113,113,0.12); color: #f87171; border-color: rgba(248,113,113,0.3); }
.card-watch-btn:hover svg { fill: rgba(248,113,113,0.3); }
.card-watch-btn--active { background: rgba(248,113,113,0.15); color: #f87171; border-color: rgba(248,113,113,0.4); }
.card-watch-btn--active svg { fill: #f87171; stroke: #f87171; }

/* Quick buy button on BIN cards */
.card-buy-btn {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: #fff;
  padding: 5px 6px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}
.card-buy-btn:hover { background: linear-gradient(135deg, #1d4ed8, #2563eb); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,235,0.35); }

/* ── Modern depth & polish ── */

/* Page: dark base with visible ambient glow */
body {
  background: var(--bg-base);
  background-image:
    radial-gradient(ellipse at 10% -5%, rgba(201,168,76,0.08) 0%, transparent 40%),
    radial-gradient(ellipse at 90% 105%, rgba(96,165,250,0.05) 0%, transparent 40%);
}

/* Sidebar: clearly distinct panel */
.browse-sidebar {
  background: var(--bg-raised);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 4px 0 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
}

/* Cards: elevated, distinct from page */
.auction-card {
  background: var(--bg-surface);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25), 0 8px 24px rgba(0,0,0,0.15);
}
.auction-card:hover {
  background: var(--bg-raised);
  border-color: rgba(201,168,76,0.2);
  box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(201,168,76,0.1), inset 0 1px 0 rgba(255,255,255,0.06);
  transform: translateY(-5px);
}

/* Card image: bottom gradient */
.auction-card__image::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* Hero: visible warm pool of light */
.hero {
  background: radial-gradient(ellipse at 50% 100%, rgba(201,168,76,0.1) 0%, transparent 50%);
  border-bottom: 1px solid rgba(201,168,76,0.08);
}

/* Header: frosted glass, distinct from page */
.header {
  background: rgba(8,8,10,0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

/* Trust strip: raised card */
.trust-strip {
  background: var(--bg-surface);
  border-radius: 14px;
  padding: 1.75rem;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

/* Price brightens on hover */
.auction-card:hover .auction-card__bid { color: var(--gold-light); }

/* Sidebar selects */
.browse-sidebar .form-select {
  background: var(--bg-surface);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 0.8125rem;
}

/* Sidebar pills: more contrast */
.sidebar-pill {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
}
.sidebar-pill:hover { background: rgba(255,255,255,0.1); }
.sidebar-pill.active { background: rgba(201,168,76,0.15); border-color: rgba(201,168,76,0.35); }

/* Skeleton shimmer */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.03) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

/* Gold topline glow */
body::before { box-shadow: 0 0 60px rgba(201,168,76,0.12); }

/* Footer: pull up tight */
.page-footer {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 1.25rem 0;
  margin-top: 0;
  background: var(--bg-surface);
}

/* ── Filter Bar (horizontal, top) ── */
.filter-bar {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.filter-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
}
.filter-row-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  flex-shrink: 0;
}
.filter-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.filter-pills-divider { width: 1px; height: 20px; background: var(--border); flex-shrink: 0; }
@media (max-width: 640px) {
  .filter-row { gap: 4px; }
  .filter-pills-divider { display: none; }
}

/* ── Browse Footer Section ── */
.browse-footer-section {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  padding: 1.75rem 0 1.25rem;
  margin-top: 2rem;
}
.browse-footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 1.5rem;
}
.browse-footer-heading {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}
.browse-footer-text {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.6;
}
.browse-footer-legal {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}
.browse-footer-legal p {
  font-size: 0.6875rem;
  color: var(--text-faint);
  line-height: 1.5;
}
@media (max-width: 768px) {
  .browse-footer-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ── Collector+ Badge ───────────────────────────────────────────────── */
.collector-plus-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.5625rem;
  font-weight: 800;
  color: #C9A84C;
  background: rgba(201,168,76,0.1);
  border: 1px solid rgba(201,168,76,0.2);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
  line-height: 1.4;
  vertical-align: baseline;
  white-space: nowrap;
}
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.625rem;
  font-weight: 800;
  color: #4ade80;
  background: rgba(74,222,128,0.1);
  border: 1px solid rgba(74,222,128,0.2);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
  line-height: 1.4;
  vertical-align: baseline;
}
.creator-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.625rem;
  font-weight: 800;
  color: #c084fc;
  background: rgba(192,132,252,0.1);
  border: 1px solid rgba(192,132,252,0.2);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
  line-height: 1.4;
  vertical-align: baseline;
}
.avatar-plus {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  background: #000;
  color: #C9A84C;
  font-size: 11px;
  font-weight: 900;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 2px solid var(--bg, #0d0d0d);
  pointer-events: none;
}
.seller-avatar { position: relative; }
.collector-plus-profile-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 14px;
  background: rgba(201,168,76,0.1);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #C9A84C;
  letter-spacing: 0.3px;
}
.collector-plus-profile-badge .cp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: #000;
  color: #C9A84C;
  font-size: 0.75rem;
  font-weight: 900;
  border-radius: 50%;
  line-height: 1;
}


/* ════════════════════════════════════════════════════════════════
   LIGHT MODE — activated via html[data-theme="light"]
   Overrides CSS variables only. No structural changes.
   Default is always dark. Users opt-in via profile toggle.
   ════════════════════════════════════════════════════════════════ */

html[data-theme="light"] {
  /* Backgrounds — warm off-white system */
  --bg-base:       #f4f3ee;
  --bg-surface:    #ffffff;
  --bg-raised:     #eeeee8;
  --bg-hover:      #e5e4de;
  --bg-active:     #dcdbd4;

  /* Gold — darkened for contrast on white */
  --gold:          #8B6914;
  --gold-light:    #A67D1A;
  --gold-dim:      rgba(139, 105, 20, 0.08);
  --gold-border:   rgba(139, 105, 20, 0.2);

  /* Text */
  --text-primary:  #1a1a1a;
  --text-secondary: #3d3d3d;
  --text-muted:    rgba(0, 0, 0, 0.5);
  --text-faint:    rgba(0, 0, 0, 0.22);

  /* Borders */
  --border:        rgba(0, 0, 0, 0.1);
  --border-hover:  rgba(0, 0, 0, 0.18);

  /* Status — darkened for readability on light backgrounds */
  --green:         #16a34a;
  --green-dim:     rgba(22, 163, 74, 0.08);
  --red:           #dc2626;
  --red-dim:       rgba(220, 38, 38, 0.08);
  --blue:          #2563eb;
  --blue-dim:      rgba(37, 99, 235, 0.08);
  --purple:        #7c3aed;
  --purple-dim:    rgba(124, 58, 237, 0.08);
  --orange:        #ea580c;
  --orange-dim:    rgba(234, 88, 12, 0.08);

  /* Shadows — much subtler on light */
  --shadow-sm:     0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ── Header in light mode ── */
html[data-theme="light"] .header {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

/* ── Gold topline — slightly darker in light mode ── */
html[data-theme="light"] body::before {
  background: linear-gradient(90deg, #8B6914 0%, #A67D1A 50%, #8B6914 100%);
}

/* ── Form inputs & selects — white backgrounds ── */
html[data-theme="light"] .form-input,
html[data-theme="light"] .form-select,
html[data-theme="light"] .form-textarea,
html[data-theme="light"] .form-select-custom,
html[data-theme="light"] .form-textarea-custom,
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="search"],
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.15);
  color: #1a1a1a;
}
html[data-theme="light"] .form-select-custom option,
html[data-theme="light"] select option {
  background: #ffffff;
  color: #1a1a1a;
}

/* ── Buttons ── */
html[data-theme="light"] .btn-primary {
  background: #8B6914;
  color: #ffffff;
  border-color: #8B6914;
}
html[data-theme="light"] .btn-primary:hover {
  background: #7A5C12;
}
html[data-theme="light"] .btn-secondary {
  background: transparent;
  border-color: rgba(0, 0, 0, 0.15);
  color: #1a1a1a;
}
html[data-theme="light"] .btn-outline {
  border-color: rgba(0, 0, 0, 0.2);
  color: #1a1a1a;
}

/* ── Auction cards ── */
html[data-theme="light"] .auction-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .auction-card:hover {
  border-color: rgba(139, 105, 20, 0.3);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* ── Mobile menu ── */
html[data-theme="light"] .mobile-menu {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
}
html[data-theme="light"] .mobile-menu-inner {
  background: #ffffff;
}
html[data-theme="light"] .mobile-menu-inner a {
  color: #3a3a3a;
}
html[data-theme="light"] .mobile-menu-inner a:hover,
html[data-theme="light"] .mobile-menu-inner a:active {
  background: #f0efe8;
  color: #1a1a1a;
}
html[data-theme="light"] .mobile-menu-inner a.active {
  color: #9A7B2D;
}
html[data-theme="light"] .mobile-menu-inner .mob-divider {
  background: rgba(0,0,0,0.08);
}
html[data-theme="light"] .mobile-menu-inner .mob-upgrade {
  border-color: rgba(154,123,45,0.25);
  background: rgba(154,123,45,0.06);
}
html[data-theme="light"] .hamburger-btn {
  color: #3a3a3a;
  border-color: rgba(0,0,0,0.15);
}
html[data-theme="light"] .hamburger-btn:hover {
  color: #1a1a1a;
  border-color: rgba(0,0,0,0.3);
}

/* ── Tools dropdown ── */
html[data-theme="light"] .cx-tools-drop-menu {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.12) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
}
html[data-theme="light"] .cx-tools-drop-menu a {
  color: #3a3a3a !important;
}
html[data-theme="light"] .cx-tools-drop-menu a:hover {
  background: rgba(154,123,45,0.08) !important;
  color: #1a1a1a !important;
}

/* ── Watchlist drawer ── */
html[data-theme="light"] #wl-drawer-exchange {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.12) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
}
html[data-theme="light"] #wl-drawer-exchange div[style*="background:#141414"],
html[data-theme="light"] #wl-drawer-exchange div[style*="background: #141414"] {
  background: #ffffff !important;
}
html[data-theme="light"] #wl-overlay-exchange {
  background: rgba(0,0,0,0.25) !important;
}

/* ── Header nav items ── */
html[data-theme="light"] .header-nav a,
html[data-theme="light"] .header-nav button {
  color: #3a3a3a;
}
html[data-theme="light"] .header-nav a:hover,
html[data-theme="light"] .header-nav button:hover {
  color: #1a1a1a;
}

/* ── Card watch/buy buttons ── */
html[data-theme="light"] .card-watch-btn {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.1);
  color: #737373;
}
html[data-theme="light"] .card-watch-btn:hover {
  background: rgba(0,0,0,0.06);
  color: #1a1a1a;
}
html[data-theme="light"] .card-buy-btn {
  background: rgba(37,99,235,0.06);
  border-color: rgba(37,99,235,0.15);
  color: #2563eb;
}

/* ── Bid panel, countdown ── */
html[data-theme="light"] .bid-panel {
  background: #ffffff;
  border-color: rgba(0,0,0,0.1);
}
html[data-theme="light"] .countdown {
  color: #3a3a3a;
}

/* ── Notification badges on light ── */
html[data-theme="light"] #mob-notif-badge {
  background: var(--red) !important;
}

/* ── Profile button ── */
html[data-theme="light"] #v-profile-btn {
  background: #9A7B2D !important;
  color: #ffffff !important;
}

/* ── Filter pills ── */
html[data-theme="light"] .filter-pill.active,
html[data-theme="light"] .sidebar-pill.active {
  background: #8B6914;
  color: #ffffff;
  border-color: #8B6914;
}

/* ── Scrollbar ── */
html[data-theme="light"] ::-webkit-scrollbar-track {
  background: var(--bg-base);
}
html[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

/* ── TCG labels — slightly adjusted for light backgrounds ── */
html[data-theme="light"] .tcg-label--pokemon    { background: rgba(255,203,5,0.2);   color: #8B6914; border-color: rgba(255,203,5,0.4); }
html[data-theme="light"] .tcg-label--mtg        { background: rgba(109,76,198,0.12);  color: #5b21b6; border-color: rgba(109,76,198,0.3); }
html[data-theme="light"] .tcg-label--onepiece   { background: rgba(200,60,60,0.1);    color: #b91c1c; border-color: rgba(200,60,60,0.3); }
html[data-theme="light"] .tcg-label--lorcana    { background: rgba(50,110,200,0.1);   color: #1d4ed8; border-color: rgba(50,110,200,0.3); }
html[data-theme="light"] .tcg-label--sorcery    { background: rgba(180,90,20,0.1);    color: #c2410c; border-color: rgba(180,90,20,0.3); }
html[data-theme="light"] .tcg-label--gundam     { background: rgba(30,140,60,0.1);    color: #15803d; border-color: rgba(30,140,60,0.3); }
html[data-theme="light"] .tcg-label--dragonball { background: rgba(180,90,20,0.1);    color: #c2410c; border-color: rgba(180,90,20,0.3); }
html[data-theme="light"] .tcg-label--riftbound  { background: rgba(20,140,170,0.1);   color: #0e7490; border-color: rgba(20,140,170,0.3); }
html[data-theme="light"] .tcg-label--yugioh     { background: rgba(120,50,190,0.1);   color: #7c3aed; border-color: rgba(120,50,190,0.3); }
html[data-theme="light"] .tcg-label--other      { background: rgba(100,116,139,0.1);  color: #475569; border-color: rgba(100,116,139,0.3); }
html[data-theme="light"] .tcg-label--lego       { background: rgba(190,160,10,0.15);  color: #854d0e; border-color: rgba(190,160,10,0.3); }
html[data-theme="light"] .tcg-label--videogames { background: rgba(52,211,153,0.12);  color: #065f46; border-color: rgba(52,211,153,0.3); }
html[data-theme="light"] .tcg-label--accessories{ background: rgba(45,212,191,0.12);  color: #0f766e; border-color: rgba(45,212,191,0.3); }

/* ── Toast ── */
html[data-theme="light"] .cx-toast {
  background: #1a1a1a;
  color: #f2f2f2;
}

/* Collector+ tools dropdown */
.cx-tools-drop{position:relative;display:inline-flex}
.cx-tools-drop-menu{display:none;position:absolute;top:calc(100% + 4px);right:0;background:#0d0d0d;border:1px solid rgba(201,168,76,0.2);border-radius:10px;padding:6px;min-width:200px;z-index:1000;box-shadow:0 8px 32px rgba(0,0,0,0.6)}
.cx-tools-drop.open .cx-tools-drop-menu{display:block}
.cx-tools-drop-menu a{display:block;padding:10px 14px;font-size:0.8125rem;font-weight:700;color:rgba(255,255,255,0.7)!important;text-decoration:none;white-space:nowrap;transition:all 0.1s;background:none!important;border-radius:8px!important}
.cx-tools-drop-menu a:hover{background:rgba(201,168,76,0.1)!important;color:#f2f2f2!important}