/* ============================================================
   CheckAGrade · stylesheet
   ============================================================ */

:root {
  --bg-deep:    #07090c;
  --bg:         #0b0d11;
  --bg-soft:    #11151b;
  --panel:      #161a21;
  --panel-2:    #1c2129;
  --border:     #262b34;
  --border-hi:  #3a414e;
  --text:       #f1f3f7;
  --muted:      #8b94a6;
  --muted-2:    #5d6577;

  /* Brand — Pokémon-inspired red */
  --red:        #ef4444;
  --red-bright: #f87171;
  --red-deep:   #b91c1c;
  --red-warm:   #dc2626;
  --red-soft:   #fca5a5;
  --red-glow:   rgba(239, 68, 68, 0.30);

  /* Grader-specific colours stay anchored to each grader's brand */
  --tag:    #ffcc4d;     /* TAG (the grader) */
  --psa:    #4dd2ff;
  --cgc:    #c084fc;
  --bgs:    #fb7185;
  --ace:    #4ade80;
  --sgc:    #94a3b8;
  --warn:   #f59e0b;     /* used for "pending" status, distinct from --tag */

  --pos:    #34d399;
  --pos-bg: rgba(52, 211, 153, 0.10);
  --neg:    #f87171;
  --neg-bg: rgba(248, 113, 113, 0.10);
  --neut:   #cbd5e1;
  --neut-bg:rgba(203, 213, 225, 0.06);

  --shadow-sm: 0 2px 8px rgba(0,0,0,0.25);
  --shadow:    0 8px 32px rgba(0,0,0,0.35);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.45);

  --radius:   12px;
  --radius-sm:8px;
  --radius-lg:18px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 15px; line-height: 1.55;
  color: var(--text);
  background: var(--bg-deep);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
  /* Allow full-bleed children (e.g. .ticker-wrap) to escape the 1280px
     main container without triggering a horizontal scrollbar. */
  overflow-x: clip;
}
/* All ambient lighting lives on a single fixed layer so it never duplicates
   when the page is taller than the viewport. */
.bg-glow {
  position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(239, 68, 68, 0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(77, 210, 255, 0.05), transparent 60%),
    radial-gradient(700px 400px at 50% 110%, rgba(239, 68, 68, 0.05), transparent 60%);
}
a { color: var(--psa); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: #fff; }
code, .mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.92em; }
code { background: var(--panel-2); padding: 1px 7px; border-radius: 4px; color: var(--muted); }
em { color: var(--text); font-style: italic; opacity: 0.85; }

/* ============================================================
   Topbar
   ============================================================ */

.topbar {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 700px) 1fr;
  align-items: center; gap: 16px;
  padding: 12px 24px;
  background: rgba(11, 13, 17, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}
.brand { justify-self: start; }
.search { justify-self: center; width: 100%; max-width: 700px; }
.nav-wrap { justify-self: end; }
.brand {
  display: flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 17px;
  color: var(--text); letter-spacing: 0;
}
.brand:hover { color: var(--text); }
.brand-mark {
  display: inline-block;
  width: 28px; height: 28px;
  /* drop-shadow follows the SVG's alpha (the rounded shape), unlike
     box-shadow which would draw a square shadow around the img box. */
  filter: drop-shadow(0 4px 14px rgba(239, 68, 68, 0.35));
}
.brand-text { font-family: "Inter", sans-serif; }
.brand-accent { color: var(--red); }

.search {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.search:focus-within {
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12);
}
.search-icon {
  width: 18px; height: 18px; color: var(--muted); flex-shrink: 0;
}
.search input {
  flex: 1; min-width: 0;
  background: transparent; color: var(--text);
  border: 0; outline: 0;
  padding: 6px 0; font-size: 14px;
  font-family: inherit;
}
.search input::placeholder { color: var(--muted-2); }
.search kbd {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  background: var(--panel-2); color: var(--muted);
  padding: 2px 6px; border-radius: 4px;
  border: 1px solid var(--border);
}

.nav-wrap { position: relative; }
.nav-wrap > summary { list-style: none; }
.nav-wrap > summary::-webkit-details-marker { display: none; }
/* Default: open by default behavior is enforced by the JS in base.html;
   even if JS is unavailable, the nav still works at small sizes via the
   built-in <details> toggle. */
.nav-toggle {
  display: none;   /* desktop: hidden, nav shows inline */
  align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  font: 600 13px/1 inherit;
}
.nav-toggle:hover { border-color: var(--red); color: var(--red-bright); }
.nav-toggle-bars {
  display: inline-block;
  width: 16px; height: 12px;
  background:
    linear-gradient(to bottom, currentColor 0%, currentColor 14%,
                    transparent 14%, transparent 43%,
                    currentColor 43%, currentColor 57%,
                    transparent 57%, transparent 86%,
                    currentColor 86%, currentColor 100%);
}
.nav { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.nav-user { font-weight: 700; }
.nav-link {
  font-size: 13px; font-weight: 600;
  color: var(--muted); padding: 6px 0;
  transition: color 0.12s ease;
}
.nav-link:hover { color: var(--text); text-decoration: none; }
.nav-cta {
  background: linear-gradient(135deg, var(--red), var(--red-warm));
  color: #fff; padding: 7px 14px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.30);
}
.nav-cta:hover { color: #fff; transform: translateY(-1px); }
.nav-form { display: inline; margin: 0; }
.nav-link.as-btn {
  background: transparent; border: 0; cursor: pointer; font-family: inherit;
}
.rep-badge {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; font-weight: 700;
  padding: 3px 9px;
  background: rgba(239,68,68,0.10);
  color: var(--red-bright);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: 999px;
}

/* Flash messages */
.flash {
  margin: 0 0 18px;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
  font-size: 14px;
}
.flash-ok    { border-color: rgba(52,211,153,0.40);  background: rgba(52,211,153,0.06);  color: var(--pos); }
.flash-error { border-color: rgba(248,113,113,0.40); background: rgba(248,113,113,0.06); color: var(--neg); }
.flash-info  { border-color: rgba(77,210,255,0.40);  background: rgba(77,210,255,0.06);  color: var(--psa); }

/* Auth + submit panels */
.auth-panel {
  max-width: 460px; margin: 24px auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow);
}
.auth-form, .submit-form {
  display: flex; flex-direction: column; gap: 14px;
}
.auth-form label, .submit-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; color: var(--muted);
  font-weight: 500;
}
.auth-form input, .auth-form select,
.submit-form input, .submit-form select {
  background: var(--bg-soft);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  font: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.auth-form input:focus, .auth-form select:focus,
.submit-form input:focus, .submit-form select:focus,
.msg-form textarea:focus {
  outline: 0;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(239,68,68,0.18);
}
.btn-primary {
  background: linear-gradient(135deg, var(--red), var(--red-warm));
  color: #fff; border: 0;
  padding: 12px 20px;
  border-radius: 10px;
  font: 600 14px/1 inherit;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.30);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(239, 68, 68, 0.40);
}
.auth-alt { color: var(--muted); font-size: 13px; margin: 14px 0 0; }
.tiny { font-size: 11px; }

/* Submit page */
.submit-panel { padding: 0; overflow: hidden; }
.submit-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
.submit-tabs .tab {
  flex: 1;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  color: var(--muted);
  font: 600 13px/1 inherit;
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease;
  border-bottom: 2px solid transparent;
}
.submit-tabs .tab:hover { color: var(--text); }
.submit-tabs .tab.active {
  color: var(--text);
  background: var(--panel);
  border-bottom-color: var(--red);
}
.submit-form { padding: 22px; }
.tab-panel { display: flex; flex-direction: column; gap: 12px; }
.tab-panel[hidden] { display: none; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row .grow { flex: 1; min-width: 120px; }
.form-section {
  border-top: 1px solid var(--border);
  margin-top: 6px; padding-top: 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.form-section h3 { margin: 0; font-size: 14px; font-weight: 600; }
.submit-btn { width: 100%; margin-top: 4px; }

/* Tier badges */
.tier-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
  font-family: "JetBrains Mono", monospace;
  border: 1px solid var(--border);
}
.tier-badge .tier-emoji { font-size: 13px; }
.tier-rookie       { background: rgba(139,148,166,0.10); color: var(--muted); border-color: rgba(139,148,166,0.25); }
.tier-contributor  { background: rgba(77,210,255,0.10);  color: var(--psa);   border-color: rgba(77,210,255,0.30); }
.tier-verified     { background: rgba(239,68,68,0.12);   color: var(--red-bright); border-color: rgba(239,68,68,0.40); }
.tier-elite        { background: linear-gradient(135deg, rgba(239,68,68,0.18), rgba(255,204,77,0.18)); color: #fff5d2; border-color: rgba(239,68,68,0.45); }

.nav-cta-sm {
  background: linear-gradient(135deg, var(--red), var(--red-warm));
  color: #fff !important;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
}

/* Profile */
.profile-hero {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 28px;
  margin: 16px 0 32px;
  align-items: center;
}
.profile-avatar {
  width: 120px; height: 120px;
  border-radius: 26px;
  display: grid; place-items: center;
  font-size: 48px;
  background: var(--panel);
  border: 2px solid var(--border-hi);
  box-shadow: var(--shadow);
}
.profile-avatar.tier-verified { border-color: rgba(239,68,68,0.55); box-shadow: 0 12px 36px rgba(239,68,68,0.18); }
.profile-avatar.tier-elite    { border-color: rgba(192,132,252,0.55); box-shadow: 0 12px 36px rgba(192,132,252,0.20); }
.profile-meta h1 { margin: 4px 0 6px; }
.tier-progress { margin-top: 14px; max-width: 320px; }
.tier-progress-bar {
  height: 8px; border-radius: 999px;
  background: var(--bg-soft); border: 1px solid var(--border);
  overflow: hidden;
}
.tier-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--red), var(--red-bright));
  transition: width 0.4s ease;
}
.tier-progress-meta {
  display: flex; justify-content: space-between;
  margin-top: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; color: var(--muted);
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 32px;
}
.stat-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.stat-card .stat-label {
  font-size: 11px; font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted);
}
.stat-card .stat-num {
  font-size: 28px; font-weight: 800; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
}
.stat-card .stat-num.pos { color: var(--pos); }
.stat-card .stat-num.neg { color: var(--neg); }

.sub-list { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 8px; }
.sub-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.sub-row .thumb { width: 48px; height: 66px; object-fit: cover; border-radius: 5px; border: 1px solid var(--border); }
.sub-row .thumb-placeholder { display: grid; place-items: center; color: var(--muted-2); }
.sub-name { font-weight: 600; }
.sub-line {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  font-size: 12px; color: var(--muted);
  margin-top: 4px;
}
.sub-price { font-family: "JetBrains Mono", monospace; font-weight: 700; color: var(--text); }
.sub-source { font-style: italic; color: var(--muted-2); }
.sub-note { color: var(--muted); font-size: 12px; margin-top: 4px; }

.status-pill {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
}
.status-verified { background: rgba(52,211,153,0.12); color: var(--pos); }
.status-pending  { background: rgba(245,158,11,0.12); color: var(--warn); }
.status-rejected { background: rgba(248,113,113,0.12); color: var(--neg); }
.status-duplicate { background: rgba(148,163,184,0.10); color: var(--muted); }

/* Leaderboard */
.lb-seg {
  display: inline-flex;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  margin-top: 14px;
}
.lb-seg a {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  color: var(--muted);
}
.lb-seg a:hover { color: var(--text); text-decoration: none; }
.lb-seg a.active { background: var(--panel-2); color: var(--text); }

.lb-table { width: 100%; border-collapse: collapse; }
.lb-table th, .lb-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.lb-table th {
  background: var(--panel-2);
  color: var(--muted); font-weight: 500; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.lb-rank { font-family: "JetBrains Mono", monospace; font-weight: 700; width: 44px; text-align: center; }
.lb-row.lb-medal { background: rgba(239,68,68,0.04); }
.lb-user { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.lb-avatar {
  width: 32px; height: 32px; display: grid; place-items: center;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 8px; font-size: 16px;
}
.lb-avatar.tier-verified { border-color: rgba(239,68,68,0.50); }
.lb-avatar.tier-elite    { border-color: rgba(192,132,252,0.50); }
.lb-name { font-weight: 600; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-mini { list-style: none; padding: 0; margin: 6px 0 12px; display: grid; gap: 8px; }
.lb-mini li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.lb-mini li a { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.lb-mini-rank { font-family: "JetBrains Mono", monospace; color: var(--muted); width: 16px; text-align: center; }
.lb-mini-num { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--muted); }

.tier-explainer { margin-top: 32px; }
.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.tier-card {
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.tier-card.tier-verified { border-color: rgba(239,68,68,0.30); }
.tier-card.tier-elite { border-color: rgba(192,132,252,0.30); background: linear-gradient(180deg, var(--panel), rgba(192,132,252,0.04)); }
.tier-card-head { display: flex; align-items: center; gap: 8px; }
.tier-card-emoji { font-size: 20px; }
.tier-card-name { font-weight: 700; font-size: 15px; }
.tier-card-rep {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; color: var(--muted);
  margin-top: 4px;
}
.tier-card-perks { color: var(--muted); font-size: 13px; margin: 8px 0 0; }

/* Activity feed (homepage) */
.feed-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}
@media (max-width: 880px) { .feed-row { grid-template-columns: 1fr; } }
.activity-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.act-item {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  padding: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  align-items: center;
  font-size: 14px;
}
.act-icon {
  display: grid; place-items: center;
  font-size: 18px;
}
.act-user { font-weight: 600; }
.act-time { margin-top: 4px; }

/* Watch button on card detail */
.btn-watch {
  background: transparent;
  color: var(--red-bright);
  border: 1px solid rgba(239,68,68,0.40);
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 600; font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s ease;
}
.btn-watch:hover { background: rgba(239,68,68,0.10); color: var(--red-bright); }

/* Upgrade page */
.upgrade-hero { padding: 24px 0; }
.upgrade-pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 28px;
}
.price-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.price-card-premium {
  border-color: rgba(239,68,68,0.30);
  background:
    linear-gradient(180deg, var(--panel), rgba(239,68,68,0.05));
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.price-card-tier {
  border-color: rgba(192,132,252,0.30);
}
.ribbon {
  position: absolute; top: -10px; right: 16px;
  background: var(--red); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  padding: 3px 10px; border-radius: 999px;
  text-transform: uppercase;
}
.ribbon-gold { background: linear-gradient(135deg, var(--cgc), #e879f9); color: white; }
.price-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--muted);
}
.price-num {
  font-size: 44px; font-weight: 800; letter-spacing: -0.025em;
  margin: 6px 0 4px;
}
.price-cents { font-size: 20px; color: var(--muted); font-weight: 600; }
.price-period { font-size: 12px; color: var(--muted); }
.price-card ul {
  list-style: none; padding: 0; margin: 18px 0 0;
  display: grid; gap: 8px;
  font-size: 14px; color: var(--text);
}
.upgrade-btn { width: 100%; margin-top: 18px; }
.btn-secondary {
  display: inline-block; text-align: center;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-hi);
  padding: 12px 20px;
  border-radius: 10px;
  font: 600 14px/1 inherit;
  cursor: pointer;
}
.btn-secondary:hover { border-color: var(--red); color: var(--red-bright); text-decoration: none; }

/* Discord brand button — used in the hero CTA. Blurple (#5865F2) is the
   current Discord brand colour. Overrides .btn-secondary's hover. */
.discord-btn {
  background: #5865F2;
  color: #fff !important;
  border-color: #5865F2 !important;
  display: inline-flex;
  align-items: center;
}
.discord-btn:hover {
  background: #4752C4;
  border-color: #4752C4 !important;
  color: #fff !important;
}

.btn-danger {
  display: inline-block; text-align: center;
  background: var(--red, #dc2626);
  color: #fff;
  border: 1px solid var(--red, #dc2626);
  padding: 12px 20px;
  border-radius: 10px;
  font: 700 14px/1 inherit;
  cursor: pointer;
}
.btn-danger:hover { filter: brightness(1.1); text-decoration: none; }

.check-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  background: var(--surface, rgba(255,255,255,0.02));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 10px;
  margin-top: 10px;
  cursor: pointer;
}
.check-row input[type="checkbox"] { margin-top: 4px; }
.check-row span { display: flex; flex-direction: column; gap: 4px; }
.check-row strong { font-weight: 600; color: var(--text); }

.btn-danger-outline {
  display: inline-block;
  border: 1px solid rgba(248,113,113,0.35);
  color: var(--red-bright, #fca5a5);
  padding: 10px 16px;
  border-radius: 10px;
  font: 600 14px/1 inherit;
}
.btn-danger-outline:hover { background: rgba(239,68,68,0.08); text-decoration: none; }

.col-eyebrow.danger { color: var(--red-bright, #fca5a5); }
.settings-section.danger-zone {
  margin-top: 36px; padding-top: 22px;
  border-top: 1px solid rgba(248,113,113,0.20);
}

/* Notifications bell */
.nav-bell {
  position: relative;
  font-size: 16px;
  padding: 4px 8px !important;
}
.bell-dot {
  position: absolute; top: -2px; right: -4px;
  background: var(--neg);
  color: white;
  font-size: 10px; font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
  min-width: 18px; text-align: center;
  font-family: "JetBrains Mono", monospace;
}

/* Marketplace listings */
.listing-tile .listing-price {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 8px;
}
.listing-amount {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700; font-size: 16px;
  color: var(--pos);
}

.for-sale-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.for-sale-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  flex-wrap: wrap;
}
.for-sale-row:hover { border-color: var(--red); text-decoration: none; }
.for-sale-seller { font-weight: 600; flex: 1; }
.for-sale-price {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700; color: var(--pos);
}
.for-sale-time { font-size: 12px; }

/* Messages */
.msg-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.msg-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px; align-items: center;
  padding: 10px 12px;
  border-radius: var(--radius);
  color: var(--text);
}
.msg-row:hover { background: var(--bg-soft); text-decoration: none; }
.msg-row.unread { background: rgba(239,68,68,0.05); border-left: 2px solid var(--red); padding-left: 10px; }
.msg-avatar {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 10px; font-size: 20px;
}
.msg-avatar.tier-verified { border-color: rgba(239,68,68,0.55); }
.msg-avatar.tier-elite    { border-color: rgba(192,132,252,0.55); }
.msg-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.msg-name { font-weight: 600; }
.msg-time { margin-left: auto; }
.msg-preview { color: var(--muted); font-size: 13px; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 600px; }
.msg-unread-badge {
  background: var(--neg); color: white;
  padding: 2px 8px; border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; font-weight: 800;
}

.msg-thread { padding: 0; }
.thread {
  padding: 18px;
  display: flex; flex-direction: column; gap: 8px;
  max-height: 60vh; overflow-y: auto;
}
.bubble {
  max-width: 70%;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--bg-soft);
  border: 1px solid var(--border);
}
.bubble.mine {
  align-self: flex-end;
  background: rgba(239,68,68,0.10);
  border-color: rgba(239,68,68,0.30);
}
.bubble.theirs { align-self: flex-start; }
.bubble-meta { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.bubble-body { white-space: pre-wrap; line-height: 1.5; }

.msg-form {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border-top: 1px solid var(--border);
}
.msg-form textarea {
  background: var(--bg-soft); border: 1px solid var(--border);
  color: var(--text); padding: 10px 14px;
  border-radius: 8px; font: inherit; resize: vertical;
}
.msg-form button { align-self: flex-start; }

.listing-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; margin-top: 14px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
}
.listing-banner img { width: 44px; height: 60px; object-fit: cover; border-radius: 4px; }
.banner-title { font-weight: 600; }

/* Collection */
.collection-tile { position: relative; }
/* Collection tiles need more breathing room than the generic .grid (150px
   floor) because each tile has stacked action buttons and inline forms
   that expand on click. 230px floor lets the currency selector + price
   input + buyer-username field sit comfortably without overflowing. */
.grid.grid-collection {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.tile-actions {
  display: flex; flex-direction: column; gap: 4px;
  padding: 0 12px 12px;
}
.tile-btn {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 6px;
  font: 600 12px/1 inherit;
  cursor: pointer;
  text-align: center;
  transition: all 0.12s ease;
}
.tile-btn:hover { border-color: var(--red); color: var(--red-bright); text-decoration: none; }
.tile-btn-sell { color: var(--pos); border-color: rgba(52,211,153,0.30); }
.tile-btn-sell:hover { background: rgba(52,211,153,0.10); color: var(--pos); border-color: var(--pos); }
.tile-btn-danger:hover { color: var(--neg); border-color: rgba(248,113,113,0.30); }
.inline { display: inline; margin: 0; }

/* Upload dropzone */
.upload-dropzone {
  position: relative;
  border: 2px dashed var(--border-hi);
  border-radius: var(--radius);
  padding: 26px;
  text-align: center;
  background: var(--bg-soft);
  transition: all 0.15s ease;
  cursor: pointer;
}
.upload-dropzone:hover, .upload-dropzone.drag {
  border-color: var(--red);
  background: rgba(239,68,68,0.05);
}
.upload-dropzone input[type=file] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
  padding: 0; border: 0; background: transparent;
}
.upload-hint { color: var(--muted); font-size: 13px; }
.upload-hint strong { color: var(--text); }
.upload-preview {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.upload-thumb {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  text-align: left;
}
.upload-thumb img { width: 100%; height: 100px; object-fit: cover; display: block; }
.upload-thumb span {
  display: block;
  padding: 4px 6px;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Card detail action row */
.card-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 10px;
}

/* Notifications inbox */
.notif-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.notif {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.notif.unread {
  border-color: rgba(239,68,68,0.30);
  background: linear-gradient(180deg, rgba(239,68,68,0.04), var(--bg-soft));
}
.notif-icon { font-size: 18px; }
.notif-title { font-weight: 600; }
.notif-text { color: var(--muted); font-size: 13px; margin-top: 2px; }
.notif-time { margin-top: 6px; }

/* Verification trust pills */
.trust-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px; border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  vertical-align: middle;
}
.trust-pill.green  { background: rgba(52,211,153,0.12); color: var(--pos); }
.trust-pill.yellow { background: rgba(255,204,77,0.12); color: var(--tag); }
.trust-pill.grey   { background: rgba(148,163,184,0.10); color: var(--muted); }

/* Grader pills (used everywhere) */
.grader-pill {
  display: inline-block;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  font-family: "JetBrains Mono", monospace;
}
.grader-pill.tag { background: rgba(255,204,77,0.12); color: var(--tag); }
.grader-pill.psa { background: rgba(77,210,255,0.12); color: var(--psa); }
.grader-pill.cgc { background: rgba(192,132,252,0.12); color: var(--cgc); }
.grader-pill.bgs { background: rgba(251,113,133,0.12); color: var(--bgs); }
.grader-pill.ace { background: rgba(74,222,128,0.12); color: var(--ace); }
.grader-pill.sgc { background: rgba(148,163,184,0.12); color: var(--sgc); }
.grader-pill.raw { background: rgba(241,243,247,0.08); color: var(--text); border: 1px solid var(--border); }

/* ============================================================
   Layout
   ============================================================ */

main {
  padding: 32px 28px 64px;
  max-width: 1280px;
  margin: 0 auto;
}
section + section { margin-top: 56px; }

.site-footer {
  margin-top: 80px;
  padding: 48px 28px 32px;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, transparent, rgba(11,15,26,0.4));
  color: var(--muted);
}
.foot-grid {
  max-width: 1280px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 720px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
.foot-brand {
  display: flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 16px; color: var(--text);
  margin-bottom: 8px;
}
.foot-h {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 12px;
}
.foot-grid a {
  display: block;
  color: var(--muted); font-size: 14px;
  padding: 4px 0;
  transition: color 0.12s ease;
}
.foot-grid a:hover { color: var(--text); text-decoration: none; }
.foot-fine {
  max-width: 1280px; margin: 32px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  color: var(--muted-2);
  line-height: 1.6;
}
.foot-fine small { display: block; }
.foot-fine small + small { margin-top: 10px; }
.foot-attrib a { color: var(--muted); text-decoration: underline; }
.foot-attrib a:hover { color: var(--text); }

/* Legal page prose */
.legal-prose { line-height: 1.7; color: var(--muted); }
.legal-prose h2 { color: var(--text); font-size: 17px; margin: 26px 0 8px; }
.legal-prose h2:first-child { margin-top: 0; }
.legal-prose ul { padding-left: 22px; margin: 8px 0 12px; }
.legal-prose li { margin-bottom: 4px; }
.legal-prose strong { color: var(--text); }

/* Report widget */
.report-widget {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
}
.report-widget summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 14px;
  color: var(--muted);
  font-size: 13px; font-weight: 500;
  user-select: none;
}
.report-widget summary::-webkit-details-marker { display: none; }
.report-widget summary:hover { color: var(--neg); }
.report-widget[open] summary { color: var(--neg); border-bottom: 1px solid var(--border); }
.report-form {
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.report-form label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--muted);
}
.report-form select, .report-form textarea {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 12px; font: inherit;
}
.report-form button { align-self: flex-start; }
.report-panel { padding: 0; }
.report-panel .report-widget { border: 0; }

.col-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
h1 { font-size: 36px; font-weight: 800; letter-spacing: -0.02em; margin: 6px 0 12px; }
h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 4px 0 10px; }
.hint { color: var(--muted); font-size: 14px; }
.section-head { margin-bottom: 18px; max-width: 760px; }

.grad {
  background: linear-gradient(120deg, var(--red), var(--red-bright));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pos { color: var(--pos); }
.neg { color: var(--neg); }

/* ============================================================
   Live ticker
   ============================================================ */

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}

.ticker-wrap {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 24px;
  background: linear-gradient(180deg, rgba(11,15,26,0.85), rgba(11,15,26,0.4));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  /* Full-bleed escape from main's 1280px max-width — extends edge-to-edge
     on any viewport. Body has overflow-x: clip to suppress scrollbar. */
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  margin-top: -32px;
  margin-bottom: 32px;
}
.ticker-label {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.14em;
  color: var(--red-bright);
  text-transform: uppercase;
  font-weight: 700;
}
.ticker-label::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--pos);
  box-shadow: 0 0 12px var(--pos);
  animation: pulse 1.6s ease-in-out infinite;
}
.ticker {
  flex: 1; overflow: hidden; min-width: 0;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.ticker-track {
  display: inline-flex; gap: 36px;
  white-space: nowrap;
  animation: ticker-scroll 90s linear infinite;
  padding-right: 36px;
}
.ticker-track:hover { animation-play-state: paused; }

/* Respect the OS-level "reduce motion" preference — the scrolling ticker
   causes nausea for vestibular-sensitive users. WCAG 2.1 2.3.3. */
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .ticker { overflow-x: auto; }
}
.ticker-item {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text);
  font-size: 13px;
}
.ticker-item:hover { text-decoration: none; }
.ticker-item:hover .t-name { color: var(--red-bright); }
.ticker-item .t-name    { font-weight: 600; max-width: 28ch; overflow: hidden; text-overflow: ellipsis; }
.ticker-item .t-set     { color: var(--muted); max-width: 22ch; overflow: hidden; text-overflow: ellipsis; }
.ticker-item .t-sep     { color: var(--muted-2); }
.ticker-item .t-price   { font-family: "JetBrains Mono", monospace; font-weight: 700; color: var(--pos); }
.ticker-item .t-date    { color: var(--muted-2); font-family: "JetBrains Mono", monospace; font-size: 11px; }

/* ============================================================
   Hero
   ============================================================ */

.hero {
  padding: 64px 0 32px;
  text-align: center;
}
.hero-eyebrow {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(239, 68, 68, 0.10);
  color: var(--red-bright);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 18px;
}
.hero h1 {
  font-size: 56px; line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 18px;
}
.hero-sub {
  color: var(--muted);
  font-size: 17px;
  max-width: 640px;
  margin: 0 auto 28px;
}
.hero-search {
  display: flex; gap: 10px;
  max-width: 600px;
  margin: 0 auto;
}
.hero-cta { justify-content: center; }
.hero-stats { justify-content: center; }
.hero-search input {
  flex: 1; min-width: 0;
  padding: 14px 18px;
  font-size: 15px; font-family: inherit;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.hero-search input:focus {
  outline: 0;
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15);
}
.hero-search button {
  padding: 14px 26px;
  background: linear-gradient(135deg, var(--red), var(--red-warm));
  color: #fff;
  border: 0; border-radius: 12px;
  font-weight: 700; font-size: 15px;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(239, 68, 68, 0.30);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.hero-search button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(239, 68, 68, 0.40);
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  margin-top: 36px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.hero-stat {
  background: var(--panel);
  padding: 18px 20px;
  position: relative;
}
.hero-stat {
  text-align: center !important;
}
.hero-stat-num {
  font-size: 26px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  color: var(--text);
  text-align: center;
  /* flex centering is the inner mechanic; outer text-align catches Safari
     quirks where inherited text-align loses to the grid cell's defaults. */
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.hero-stat-label {
  text-align: center;
}
.hero-stat.tag .hero-stat-num {
  background: linear-gradient(120deg, var(--red), var(--red-soft));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-stat-label {
  margin-top: 4px;
  font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--muted);
  font-family: "JetBrains Mono", monospace;
}
.hero-stat .pulse {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pos);
  box-shadow: 0 0 10px var(--pos);
  animation: pulse 1.6s ease-in-out infinite;
}

/* ============================================================
   Premium / discount lists (homepage)
   ============================================================ */

.premium-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 880px) { .premium-row { grid-template-columns: 1fr; } }

.premium-col {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow);
}
.col-head h2 { margin-top: 4px; }

.ratio-list {
  list-style: none; padding: 0; margin: 18px 0 0;
  display: grid; gap: 8px;
}
.ratio-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  transition: background 0.12s ease, transform 0.12s ease;
  color: var(--text);
}
.ratio-item:hover {
  background: var(--panel-2);
  transform: translateX(2px);
  text-decoration: none;
}
.ratio-item .thumb {
  width: 56px; height: 78px; object-fit: cover;
  border-radius: 6px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
}
.ratio-name { font-weight: 600; line-height: 1.3; }
.ratio-set { color: var(--muted); font-size: 12px; margin-top: 2px; }
.ratio-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 18px; font-weight: 700;
  padding: 6px 10px; border-radius: 8px;
}
.ratio-num.pos { background: var(--pos-bg); color: var(--pos); }
.ratio-num.neg { background: var(--neg-bg); color: var(--neg); }

/* ============================================================
   Card grid (popular / search results)
   ============================================================ */

.grid {
  display: grid;
  /* 150px floor lets iPhone SE (375px) fit 2 cols cleanly; bigger viewports
     still get 3+ cols via the auto-fill. */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}

/* Always-even grid — used where item count is fixed (homepage showcases).
   Column counts chosen so common totals (8, 12, 24) tile cleanly. */
.grid-even {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1280px) { .grid-even { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 980px)  { .grid-even { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .grid-even { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card-tile {
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--text);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.card-tile:hover {
  transform: translateY(-4px);
  border-color: var(--border-hi);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--text);
}
.tile-art {
  aspect-ratio: 2.5 / 3.5;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(77, 210, 255, 0.06), transparent 60%),
    var(--bg-soft);
  overflow: hidden;
}
.tile-art img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.tile-art.no-art { background: var(--panel-2); }
.tile-body { padding: 12px 14px 14px; }
.card-name { font-weight: 600; line-height: 1.3; }
.card-meta { color: var(--muted); font-size: 12px; margin-top: 4px; }
.spark {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: end;
}
.spark-svg {
  width: 100%; height: 30px;
  display: block;
}
.spark-svg polyline {
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px currentColor);
}
.spark-svg.spark-up    polyline { stroke: var(--pos); }
.spark-svg.spark-down  polyline { stroke: var(--neg); }
.spark-svg.spark-flat  polyline { stroke: var(--muted); }
.spark-meta {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 2px;
  white-space: nowrap;
}
.spark-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px; letter-spacing: 0.08em;
  color: var(--muted-2);
  text-transform: uppercase;
}
.spark-price {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
}

.tile-foot {
  display: flex; justify-content: space-between;
  margin-top: 10px;
  font-size: 12px;
}
.card-num { color: var(--muted-2); font-family: "JetBrains Mono", monospace; }
.card-sales { color: var(--red-bright); font-weight: 600; }
.card-sales.zero { color: var(--muted-2); font-weight: 400; }

/* ============================================================
   Card detail page
   ============================================================ */

.page-head { padding: 24px 0 8px; }

.card-detail {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 36px;
  margin-top: 8px;
}
@media (max-width: 880px) {
  .card-detail { grid-template-columns: 1fr; gap: 24px; }
  .card-art-wrap { max-width: 320px; }
}

.card-art-wrap {
  position: relative;
}
.card-art {
  width: 100%;
  aspect-ratio: 2.5 / 3.5; object-fit: contain;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 204, 77, 0.08), transparent 60%),
    var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.card-info h1 {
  font-size: 38px; line-height: 1.1; margin: 4px 0 8px;
}
.card-info-meta {
  color: var(--muted); margin: 0 0 6px; font-size: 14px;
}
.card-info-meta.tiny { font-size: 12px; }
.dot { color: var(--muted-2); margin: 0 8px; }

/* Ratio hero */
.ratio-hero {
  margin-top: 24px;
  padding: 22px;
  background: linear-gradient(180deg, rgba(239,68,68,0.05), rgba(77,210,255,0.04));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  position: relative; overflow: hidden;
}
.ratio-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 0%, rgba(239,68,68,0.10), transparent 50%);
  pointer-events: none;
}
.ratio-hero-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.ratio-hero-num { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 6px; }
.ratio-hero-num .big {
  font-size: 56px; font-weight: 800; letter-spacing: -0.03em;
  font-family: "Inter", sans-serif;
  background: linear-gradient(120deg, var(--red), var(--red-soft));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ratio-hero-num .of { color: var(--muted); font-size: 16px; }

.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em;
}
.badge.pos  { background: var(--pos-bg);  color: var(--pos);  border: 1px solid rgba(52,211,153,0.30); }
.badge.neg  { background: var(--neg-bg);  color: var(--neg);  border: 1px solid rgba(248,113,113,0.30); }
.badge.neut { background: var(--neut-bg); color: var(--neut); border: 1px solid rgba(203,213,225,0.20); }

.ratio-bar {
  position: relative;
  margin: 22px 0 6px;
  height: 10px;
  background: var(--bg-soft);
  border-radius: 999px;
  border: 1px solid var(--border);
  overflow: hidden;
}
.ratio-bar-tick {
  position: absolute; top: 0; bottom: 0;
  width: 1px; background: var(--border-hi);
}
.ratio-bar-fill {
  position: absolute; top: 0; bottom: 0; left: 0;
  border-radius: 999px;
  transition: width 0.4s ease;
}
.ratio-bar-fill.pos  { background: linear-gradient(90deg, var(--pos),  #6ee7b7); }
.ratio-bar-fill.neg  { background: linear-gradient(90deg, var(--neg),  #fca5a5); }
.ratio-bar-fill.neut { background: linear-gradient(90deg, var(--neut), #e2e8f0); }
.ratio-bar-axis {
  display: flex; justify-content: space-between;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; color: var(--muted-2);
  margin-bottom: 18px;
}

.ratio-hero-detail {
  display: grid; gap: 6px;
  font-size: 14px; color: var(--muted);
  margin-top: 10px;
}
.ratio-hero-detail strong { color: var(--text); font-weight: 600; }

/* ============================================================
   Panels (tables, chart)
   ============================================================ */

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow);
}

.stats-table, .comps-table {
  width: 100%; border-collapse: collapse;
  margin-top: 6px;
}
.stats-table th, .stats-table td,
.comps-table th, .comps-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.stats-table th, .comps-table th {
  background: transparent;
  color: var(--muted); font-weight: 500; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.stats-table tbody tr:hover, .comps-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.stats-table .num, .comps-table td:nth-child(4) {
  font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap;
}
/* Headers in numeric columns also right-aligned so they sit over their data.
   The default <th> alignment is left, which is why "Sales / Min / Median /
   Max" looked detached from the digits below. */
.stats-table th.num, .comps-table th.num { text-align: right; }

/* Set-detail filter bar */
.set-filter-bar {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  justify-content: space-between;
  margin: 18px 0 22px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chips .chip {
  background: var(--bg-soft); border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 12px; border-radius: 999px;
  font: 600 13px/1 inherit; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.filter-chips .chip:hover { border-color: var(--border-hi); }
.filter-chips .chip.active {
  background: rgba(239,68,68,0.12);
  border-color: rgba(239,68,68,0.55);
  color: var(--red-bright);
}
.filter-chips .chip-count {
  margin-left: 6px; padding: 1px 6px;
  background: rgba(255,255,255,0.05);
  border-radius: 999px; font-size: 11px; font-weight: 700;
  color: var(--muted-2);
}
.filter-type { display: flex; align-items: center; gap: 8px; }
.filter-type select {
  background: var(--bg-soft); border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 10px; border-radius: 8px;
  font: 600 13px/1 inherit;
}

/* Collection — mark-for-sale inline expander (uses <details>/<summary>) */
.sale-toggle { display: inline-block; }
.sale-toggle > summary {
  list-style: none;
  cursor: pointer;
}
.sale-toggle > summary::-webkit-details-marker { display: none; }
.sale-toggle .sale-chevron {
  display: inline-block; margin-left: 4px;
  transition: transform .15s ease;
  font-size: 10px; color: var(--muted-2);
}
.sale-toggle[open] .sale-chevron { transform: rotate(180deg); }
.sale-form {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex; flex-direction: column; gap: 8px;
  /* Take the full tile width when expanded so the inputs don't get squashed
     by neighbouring flex items. width:100% beats min-width here because
     details/summary inside a flex column tile prefers explicit sizing. */
  width: 100%;
  box-sizing: border-box;
}
.sale-form-actions { flex-wrap: wrap; }
.sale-form .tile-btn { width: 100%; }
.sale-price-row { display: flex; gap: 4px; align-items: center; margin-top: 4px; }
.sale-input {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 8px; font: 600 13px/1 inherit;
}
.sale-currency { width: 50px; }
.sale-price { flex: 1; min-width: 0; }
.sale-form-actions { display: flex; gap: 6px; }
.sale-form-help { margin: 2px 0 0; color: var(--muted); }

.asking-price {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700; color: var(--pos);
  background: rgba(52,211,153,0.10);
  border: 1px solid rgba(52,211,153,0.25);
  padding: 2px 8px; border-radius: 6px;
}

/* Vouch panel — community feedback */
.vouch-summary {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 14px 0;
}
.vouch-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font: 600 12px/1 inherit;
  border: 1px solid var(--border);
}
.vouch-pill.pos { background: rgba(52,211,153,0.10);  border-color: rgba(52,211,153,0.30); color: var(--pos); }
.vouch-pill.neu { background: rgba(148,163,184,0.10); color: var(--muted); }
.vouch-pill.neg { background: rgba(239,68,68,0.10);   border-color: rgba(239,68,68,0.30);  color: var(--red-bright); }

.vouch-list { list-style: none; padding: 0; margin: 14px 0 0; }
.vouch-row {
  padding: 12px 14px;
  margin-bottom: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.vouch-row.vouch-positive { border-left: 3px solid var(--pos); }
.vouch-row.vouch-negative { border-left: 3px solid var(--red); }
.vouch-meta { display: flex; align-items: baseline; gap: 8px; }
.vouch-author { font-weight: 600; color: var(--text); text-decoration: none; }
.vouch-author:hover { color: var(--red-bright); }
.vouch-comment { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

/* Trust badges — single source of truth for the "Trusted Seller" star and
   the mod "Flagged" warning. Used on profile, for-sale and the bot embed. */
.badge-trusted {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  background: linear-gradient(180deg, rgba(250,204,21,0.18), rgba(250,204,21,0.08));
  border: 1px solid rgba(250,204,21,0.45);
  color: #FACC15;
  font: 700 12px/1 inherit;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.badge-flag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.45);
  color: var(--red-bright);
  font: 700 12px/1 inherit;
  border-radius: 999px;
}
.stats-table .num.muted { color: var(--muted); }
.stats-table .num.strong { color: var(--text); font-weight: 600; }
.grade-cell { font-family: "JetBrains Mono", monospace; font-weight: 600; }
.comps-table td { font-size: 13px; }
.comps-table td a { color: var(--text); }
.comps-table td a:hover { color: var(--psa); }

.chart-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.chart-controls {
  display: flex; gap: 8px; flex-wrap: wrap;
}

/* Segmented controls */
.seg {
  display: inline-flex;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.seg button {
  background: transparent;
  border: 0;
  color: var(--muted);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.seg button:hover { color: var(--text); }
.seg button.active {
  background: var(--panel-2);
  color: var(--text);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04);
}

/* Stats strip */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}
.stat {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  position: relative; overflow: hidden;
}
.stat::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent, var(--muted));
}
.stat.tag::before { background: var(--tag); }
.stat.psa::before { background: var(--psa); }
.stat.cgc::before { background: var(--cgc); }
.stat.bgs::before { background: var(--bgs); }
.stat.ace::before { background: var(--ace); }
.stat.sgc::before { background: var(--sgc); }
.stat-label {
  font-size: 11px; font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}
.stat-value {
  font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  margin: 4px 0 2px;
}
.stat-sub {
  font-size: 12px; color: var(--muted);
}

/* Series filter bar */
.series-bar {
  display: flex; align-items: center; gap: 14px;
  margin: 4px 0 16px;
  flex-wrap: wrap;
}
.series-presets {
  display: inline-flex;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.series-presets button {
  background: transparent; border: 0;
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.series-presets button:hover { color: var(--text); }
.series-presets button.active {
  background: var(--panel-2);
  color: var(--text);
}

.series-chips {
  display: flex; gap: 6px; flex-wrap: wrap; flex: 1;
}
.series-chip {
  --c: #888;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px; font-weight: 600;
  font-family: inherit;
  color: var(--muted);
  transition: all 0.12s ease;
  user-select: none;
}
.series-chip:hover { color: var(--text); border-color: var(--border-hi); }
.series-chip .chip-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
}
.series-chip .chip-grader { font-family: "JetBrains Mono", monospace; }
.series-chip .chip-grade { color: var(--text); font-family: "JetBrains Mono", monospace; }
.series-chip .chip-count {
  font-size: 10px;
  background: var(--panel-2);
  padding: 1px 6px;
  border-radius: 999px;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}
.series-chip.active {
  color: var(--text);
  background: color-mix(in srgb, var(--c) 12%, var(--bg-soft));
  border-color: color-mix(in srgb, var(--c) 50%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent);
}
.series-chip.active .chip-count {
  background: color-mix(in srgb, var(--c) 18%, var(--panel-2));
  color: var(--text);
}

/* Chart panel */
.chart-wrap {
  position: relative;
  margin-top: 6px;
  padding: 14px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-height: 380px;
}
.chart-empty {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--muted);
  font-size: 14px;
  pointer-events: none;
}

/* Search results (when also presented as a list) */
.search-results { list-style: none; padding: 0; }
.search-results li {
  padding: 10px 0; border-bottom: 1px solid var(--border);
  display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
}

/* ============================================================
   Animation + polish
   ============================================================ */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes tilePop {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Brand mark gently breathes */
.brand-mark { animation: float 4.5s ease-in-out infinite; }

/* Stagger tile entries — applies to both popular cards and set tiles */
.grid-even > *,
.set-strip > * {
  animation: tilePop 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.grid-even > *:nth-child(1),  .set-strip > *:nth-child(1)  { animation-delay: 0.02s; }
.grid-even > *:nth-child(2),  .set-strip > *:nth-child(2)  { animation-delay: 0.06s; }
.grid-even > *:nth-child(3),  .set-strip > *:nth-child(3)  { animation-delay: 0.10s; }
.grid-even > *:nth-child(4),  .set-strip > *:nth-child(4)  { animation-delay: 0.14s; }
.grid-even > *:nth-child(5),  .set-strip > *:nth-child(5)  { animation-delay: 0.18s; }
.grid-even > *:nth-child(6),  .set-strip > *:nth-child(6)  { animation-delay: 0.22s; }
.grid-even > *:nth-child(7),  .set-strip > *:nth-child(7)  { animation-delay: 0.26s; }
.grid-even > *:nth-child(8),  .set-strip > *:nth-child(8)  { animation-delay: 0.30s; }
.grid-even > *:nth-child(9),  .set-strip > *:nth-child(9)  { animation-delay: 0.34s; }
.grid-even > *:nth-child(10), .set-strip > *:nth-child(10) { animation-delay: 0.38s; }
.grid-even > *:nth-child(11), .set-strip > *:nth-child(11) { animation-delay: 0.42s; }
.grid-even > *:nth-child(12), .set-strip > *:nth-child(12) { animation-delay: 0.46s; }

/* Logo image grows a touch on hover */
.set-tile-art > img:not(.set-tile-symbol) {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.set-tile:hover .set-tile-art > img:not(.set-tile-symbol) {
  transform: scale(1.06);
}

/* Card tile artwork lifts on hover (separate from tile lift) */
.card-tile .tile-art img {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.card-tile:hover .tile-art img {
  transform: translateY(-2px) scale(1.04);
}

main > section, .card-detail {
  animation: fadeUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
main > section:nth-child(1) { animation-delay: 0s; }
main > section:nth-child(2) { animation-delay: 0.06s; }
main > section:nth-child(3) { animation-delay: 0.12s; }
main > section:nth-child(4) { animation-delay: 0.18s; }
main > section:nth-child(5) { animation-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Card art hover effect on detail page */
.card-art-wrap {
  perspective: 1000px;
}
.card-art {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease;
  will-change: transform;
}
.card-art:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(239, 68, 68, 0.25);
}

/* Subtle gradient ring around the ratio hero */
.ratio-hero {
  background:
    linear-gradient(180deg, rgba(11,13,17,0.4), rgba(11,13,17,0.4)) padding-box,
    linear-gradient(135deg, rgba(239,68,68,0.35), rgba(77,210,255,0.25)) border-box;
  border: 1px solid transparent;
}

/* Premium hero number gets a subtle shimmer */
.ratio-hero-num .big {
  background: linear-gradient(120deg, var(--red) 0%, var(--red-bright) 30%, var(--red) 60%, var(--red-bright) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 8s linear infinite;
}

/* Focus styles */
button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.search:focus-within { outline: 0; }

/* ============================================================
   Misc utility
   ============================================================ */

::selection { background: rgba(239, 68, 68, 0.45); color: #fff; }

/* Raw market panel */
.market-section-label {
  margin: 14px 0 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--muted);
}
.market-section-label:first-child { margin-top: 0; }
.market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.market-cell {
  padding: 12px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  position: relative;
}
.market-grade {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px;
}
.market-cond {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  color: var(--muted);
}
.market-cell.market-grade-nm .market-cond,
.market-cell.market-grade-m  .market-cond { color: var(--text); }
.market-price {
  font-size: 22px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  margin: 6px 0 4px;
}
.market-sub {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--muted-2);
}

/* Worth grading? insight */
.grade-roi {
  margin-top: 16px;
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(11,13,17,0.4), rgba(11,13,17,0.4)) padding-box,
    linear-gradient(135deg, rgba(239,68,68,0.30), rgba(77,210,255,0.20)) border-box;
  border: 1px solid transparent;
  border-radius: var(--radius);
}
.grade-roi-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.grade-roi-rows { display: grid; gap: 8px; }
.grade-roi-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.grade-roi-row.best {
  border-color: rgba(239, 68, 68, 0.40);
  background: rgba(239, 68, 68, 0.06);
}
.grade-roi-multi {
  font-family: "Inter", sans-serif;
  font-size: 22px; font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(120deg, var(--red), var(--red-bright));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ========================================================
   Set tiles + strip + detail hero
   ======================================================== */

.set-strip-section { margin-bottom: 48px; }
.set-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
}
@media (max-width: 1280px) { .set-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 980px)  { .set-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .set-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.set-tile {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--text);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.set-tile:hover {
  transform: translateY(-3px);
  border-color: var(--red);
  box-shadow: 0 14px 36px rgba(239, 68, 68, 0.20);
  text-decoration: none;
  color: var(--text);
}

.set-tile-art {
  position: relative;
  display: grid; place-items: center;
  height: 110px;
  padding: 18px;
  background:
    radial-gradient(circle at 30% 20%, rgba(239, 68, 68, 0.10), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(77, 210, 255, 0.06), transparent 60%),
    var(--bg-soft);
  border-bottom: 1px solid var(--border);
}
.set-tile-art > img:not(.set-tile-symbol) {
  /* Absolute pixel constraints — percentage max-height was being interpreted
     against the intrinsic image dimensions in some grid layouts, letting
     near-square logos (e.g. McDonald's Collection 2021 at 1047×1024) blow
     past the tile height. Pixel ceilings always wins. */
  display: block;
  max-width: calc(100% - 8px);
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.45));
}
.set-tile-art.no-logo { background: var(--panel-2); }
.set-tile-art.no-logo::before {
  /* Fallback rendering for sets that don't have a logo URL in our catalogue
     (or whose logo host is blocked). Shows the set's first letter as a
     monogram so the tile still feels balanced. */
  content: attr(data-monogram);
  font: 800 28px/1 "JetBrains Mono", monospace;
  color: var(--muted-2);
  letter-spacing: -0.02em;
}
.set-tile-symbol {
  position: absolute;
  bottom: 8px; right: 10px;
  width: 26px; height: 26px;
  object-fit: contain;
  opacity: 0.85;
}

.set-tile-meta {
  padding: 12px 14px;
}
.set-tile-name {
  font-weight: 600; font-size: 14px;
  line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.set-tile-sub {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}
.set-tile-count {
  font-family: "JetBrains Mono", monospace;
  color: var(--red-bright);
  font-weight: 600;
}

/* Inline set symbol next to a set name in headings */
.set-symbol-inline {
  width: 22px; height: 22px;
  object-fit: contain;
  vertical-align: -3px;
  margin-right: 4px;
}

/* /sets — series-grouped grids */
.set-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.set-series + .set-series { margin-top: 24px; }

/* /set/{id} hero */
.set-detail-hero {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
  align-items: center;
  margin: 16px 0 32px;
  padding: 24px;
  background:
    radial-gradient(circle at 30% 20%, rgba(239, 68, 68, 0.08), transparent 60%),
    var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
@media (max-width: 720px) {
  .set-detail-hero { grid-template-columns: 1fr; text-align: center; }
}
.set-detail-logo {
  display: grid; place-items: center;
  padding: 14px;
}
.set-detail-logo img {
  max-width: 100%; max-height: 140px;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.50));
}
.set-detail-meta h1 { margin: 4px 0 8px; }

/* ============================================================
   Responsive — tablet down to phone
   ============================================================ */

/* iPad / smaller laptop: 1100px breakpoint — narrow center column */
@media (max-width: 1100px) {
  .topbar {
    grid-template-columns: 1fr minmax(220px, 600px) auto;
    padding: 10px 18px;
  }
  main { padding: 24px 20px 56px; }
  .hero h1 { font-size: 44px; }
  .hero { padding: 40px 0 24px; }
  .premium-row { grid-template-columns: 1fr; }
  .feed-row { grid-template-columns: 1fr; }
}

/* Tablet portrait & large mobile: collapse nav to hamburger ~860px */
@media (max-width: 860px) {
  .topbar {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: 10px 12px;
  }
  .brand    { grid-row: 1; grid-column: 1; }
  .nav-wrap { grid-row: 1; grid-column: 3; justify-self: end; }
  .search   { grid-row: 2; grid-column: 1 / -1; max-width: none; }

  .nav-toggle { display: inline-flex; }
  .nav-wrap > .nav { display: none; }
  .nav-wrap[open] > .nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    position: absolute;
    top: 100%; right: 12px;
    width: min(280px, calc(100vw - 24px));
    margin-top: 6px;
    padding: 10px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 60;
  }
  .nav-wrap[open] > .nav .nav-link,
  .nav-wrap[open] > .nav .tier-badge,
  .nav-wrap[open] > .nav .nav-form { width: 100%; }
  .nav-wrap[open] > .nav .nav-link {
    padding: 10px 12px;
    border-radius: 8px;
  }
  .nav-wrap[open] > .nav .nav-link:hover { background: var(--bg-soft); }
  .nav-wrap[open] > .nav .nav-form .as-btn {
    text-align: left; width: 100%;
    padding: 10px 12px; border-radius: 8px;
  }

  .hero h1 { font-size: 36px; }
  .hero-sub { font-size: 15px; }
  .hero-search { flex-direction: column; }
  .hero-search button { width: 100%; }
  .hero-stats { grid-template-columns: 1fr 1fr; }

  /* Card detail: image stacks above info */
  .card-detail { grid-template-columns: 1fr; gap: 20px; }
  .card-art-wrap { max-width: 320px; margin: 0 auto; }
  .card-info h1 { font-size: 30px; }

  /* Profile hero stacks */
  .profile-hero { grid-template-columns: 1fr; text-align: center; }
  .profile-avatar { margin: 0 auto; }
  .profile-actions { justify-content: center; }
  .tier-progress { margin-left: auto; margin-right: auto; }

  /* Chart panel header stacks */
  .chart-head { flex-direction: column; align-items: stretch; }
  .chart-controls { justify-content: flex-start; }

  /* Forms — dropzone smaller padding */
  .upload-dropzone { padding: 18px; }

  /* Conversation thread — full-width bubbles get more breathing room */
  .bubble { max-width: 90%; }

  /* Footer wraps to 2 cols then stacks */
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 24px; }

  /* Wide tables become horizontally scrollable on tablet/mobile */
  .stats-table, .comps-table, .lb-table {
    display: block; overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}

/* Phone portrait: 540px */
@media (max-width: 540px) {
  main { padding: 18px 14px 48px; }
  .topbar { padding: 10px 14px; }
  .hero { padding: 28px 0 16px; }
  .hero h1 { font-size: 30px; line-height: 1.1; }
  .hero-eyebrow { font-size: 10px; }
  h1 { font-size: 26px; }
  h2 { font-size: 18px; }

  .hero-stats { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .stats-strip { grid-template-columns: 1fr; }
  .profile-stats { grid-template-columns: 1fr 1fr; }
  .upgrade-pricing { grid-template-columns: 1fr; }
  .price-card-premium { transform: none; }
  .ratio-hero-num .big { font-size: 42px; }
  .ratio-hero { padding: 16px; }

  /* Footer single column */
  .foot-grid { grid-template-columns: 1fr; gap: 18px; }
  .site-footer { padding: 32px 18px 24px; }

  /* Buttons full-width by default in forms */
  .btn-primary, .btn-secondary { width: 100%; }
  .submit-form .row { flex-direction: column; }

  /* Bigger tap targets on collection/sell tile buttons (44px Apple HIG) */
  .tile-btn { padding: 10px 12px; font-size: 13px; }
  /* Inline form inputs go full-width so cert # + paid don't squash */
  .collection-add-form > .inline-select { width: 100%; flex: 1 1 100%; }

  /* Card actions wrap */
  .card-actions { flex-direction: column; align-items: stretch; }
  .card-actions .btn-watch { width: 100%; text-align: center; }

  /* Listing detail price hero */
  .listing-tile .listing-price { flex-direction: column; align-items: flex-start; }
}

/* Tighter — very small phones */
@media (max-width: 380px) {
  .grid { grid-template-columns: 1fr 1fr; }
  .ratio-hero-num .big { font-size: 36px; }
  .stat-card .stat-num { font-size: 22px; }
  .hero-stat-num { font-size: 22px; }
}

/* =====================================================================
   Off-platform contact pills (used on profile, /for-sale, card detail)
   ===================================================================== */
.contact-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 6px;
}
.contact-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  font-size: 12px; font-weight: 600;
  font-family: "JetBrains Mono", monospace;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.contact-pill:hover { border-color: var(--red); color: var(--red-bright); text-decoration: none; }

/* /for-sale directory cards */
.for-sale-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  padding: 14px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
}
.for-sale-card .for-sale-art {
  display: block; width: 96px;
  border-radius: 6px; overflow: hidden;
  background: rgba(0,0,0,0.25);
}
.for-sale-card .for-sale-art img { width: 100%; height: auto; display: block; }
.for-sale-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.for-sale-seller {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.for-sale-row-flex {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 6px;
}
.seller-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; text-decoration: none; color: var(--text);
}

/* Settings form */
.settings-form { display: flex; flex-direction: column; gap: 18px; padding: 20px; }
.settings-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; font-weight: 600;
}
.settings-form label > span:first-child { color: var(--text-muted); font-weight: 500; }
/* Apply consistent dark-themed styling to every kind of form control here. */
.settings-form input[type="text"],
.settings-form input[type="email"],
.settings-form input[type="number"],
.settings-form input[type="search"],
.settings-form input[type="password"],
.settings-form textarea,
.settings-form select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 9px 12px;
  font: inherit;
  width: 100%;
  box-sizing: border-box;
}
.settings-form input:focus,
.settings-form textarea:focus,
.settings-form select:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(239,68,68,0.15);
}
/* Custom caret on selects (matches the dark theme — browser default has
   a chrome-y arrow that clashes). */
.settings-form select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 36px;
  cursor: pointer;
}
.settings-form select:focus {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--red) 50%),
    linear-gradient(135deg, var(--red) 50%, transparent 50%);
}
/* Color picker — Chrome shows a giant inset; flatten it. */
.settings-form input[type="color"] {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  width: 60px; height: 40px;
  border: 1px solid var(--border-hi);
  border-radius: 8px;
  background: var(--bg);
  cursor: pointer;
  padding: 4px;
}
.settings-form input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.settings-form input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 4px; }
.settings-form input[type="color"]::-moz-color-swatch     { border: 0; border-radius: 4px; }
.settings-form .form-section h2 { font-size: 16px; margin: 0 0 4px 0; }

/* Filter bar (e.g. on /for-sale) */
.filter-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.filter-bar select {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 6px;
  font: inherit;
}

@media (max-width: 540px) {
  .for-sale-card { grid-template-columns: 72px 1fr; }
  .for-sale-card .for-sale-art { width: 72px; }
}

/* =====================================================================
   Multiple named collections
   ===================================================================== */
.collections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.collection-card {
  display: block;
  padding: 16px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}
.collection-card:hover {
  border-color: var(--red);
  transform: translateY(-2px);
  text-decoration: none;
}
.collection-card-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.collection-card-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  flex: 1;
}
.collection-stats {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.collection-stat .stat-num {
  font-size: 18px;
  font-weight: 700;
  font-family: "JetBrains Mono", monospace;
}

.collection-header {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.collection-header h1 { margin: 0; }
.collection-switcher { margin-top: 4px; }

.inline-select {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
}
.collection-add-form { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Flex-friendly default so cert # + paid inputs share space without overflowing
   on narrow screens. min-width: 0 lets them shrink below intrinsic content size. */
.inline-select-grow { flex: 1 1 110px; min-width: 0; }

/* Inline "mark as sold" form on /me/collection. Desktop = side-by-side
   compact inputs. Mobile = full width via the 540px block below. */
.sell-input { padding: 4px 6px; font-size: 12px; min-width: 0; }
.sell-input-price    { flex: 0 1 80px; }
.sell-input-currency { flex: 0 0 auto; }
.sell-input-buyer    { flex: 1 1 140px; }
@media (max-width: 540px) {
  .sell-input-price, .sell-input-currency, .sell-input-buyer { flex: 1 1 100%; width: 100%; }
}

/* =====================================================================
 * Profile customization (Premium)
 * Each background applies subtle styling to the .profile-customized
 * container without overwhelming the content. Effects layer on top.
 * ===================================================================== */
.profile-customized { position: relative; padding: 16px; border-radius: 14px; }

.profile-bg-default      { /* fall back to site background */ }
/* Pokéball tile — inline SVG. Full circle (top half red, bottom half a
   light fill so the full ball is clearly readable on dark backgrounds),
   with a dark equator band and a button at the centre. Subtle opacity so
   it reads as a watermark behind the content. */
.profile-bg-pokeball-pattern {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80'><circle cx='40' cy='40' r='20' fill='%23ffffff' fill-opacity='0.06'/><path d='M 20 40 A 20 20 0 0 1 60 40 Z' fill='%23ef4444' fill-opacity='0.22'/><circle cx='40' cy='40' r='20' fill='none' stroke='%230b0d11' stroke-opacity='0.55' stroke-width='1.5'/><rect x='20' y='38' width='40' height='4' fill='%230b0d11' fill-opacity='0.65'/><circle cx='40' cy='40' r='6' fill='%23ffffff' fill-opacity='0.28' stroke='%230b0d11' stroke-opacity='0.6' stroke-width='1.5'/><circle cx='40' cy='40' r='2' fill='%23ef4444' fill-opacity='0.45'/></svg>");
  background-size: 80px 80px;
  background-color: var(--bg-soft);
  border: 1px solid var(--border);
}
.profile-bg-holographic {
  background:
    linear-gradient(135deg,
      rgba(239,68,68,0.10) 0%,
      rgba(99,102,241,0.10) 25%,
      rgba(34,197,94,0.10) 50%,
      rgba(234,179,8,0.10) 75%,
      rgba(239,68,68,0.10) 100%);
  background-size: 400% 400%;
  border: 1px solid var(--border-hi);
  animation: holoshift 16s ease-in-out infinite;
}
@keyframes holoshift {
  0%, 100% { background-position:   0% 50%; }
  50%      { background-position: 100% 50%; }
}
.profile-bg-night {
  background:
    radial-gradient(2px 2px at 20% 30%,  rgba(255,255,255,0.5) 50%, transparent 50%),
    radial-gradient(1px 1px at 60% 70%,  rgba(255,255,255,0.4) 50%, transparent 50%),
    radial-gradient(2px 2px at 80% 10%,  rgba(255,255,255,0.6) 50%, transparent 50%),
    radial-gradient(1px 1px at 35% 85%,  rgba(255,255,255,0.4) 50%, transparent 50%),
    linear-gradient(180deg, #0a0e1a 0%, #1a1f33 100%);
  background-size: 250px 250px, 180px 180px, 320px 320px, 200px 200px, 100% 100%;
  border: 1px solid #1a2238;
}
.profile-bg-forest {
  background: linear-gradient(135deg, #0b1f0d 0%, #1a3322 50%, #0f1f15 100%);
  border: 1px solid #1f3a2a;
}
.profile-bg-volcano {
  background: linear-gradient(135deg, #1f0a08 0%, #4a1308 40%, #1f0a08 100%);
  border: 1px solid #4a1308;
}
.profile-bg-ocean {
  background: linear-gradient(180deg, #051a2e 0%, #0a3556 60%, #051a2e 100%);
  border: 1px solid #0a3556;
}

/* Effects layer on top of background. */
.profile-effect-none     { /* nothing */ }
.profile-effect-glow     {
  box-shadow: 0 0 60px -10px rgba(239,68,68,0.35), 0 0 24px -8px rgba(239,68,68,0.20);
}
.profile-effect-shimmer  {
  position: relative;
  overflow: hidden;
}
.profile-effect-shimmer::before {
  content: ""; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
  animation: shimmer 6s infinite ease-in-out;
  pointer-events: none;
}
@keyframes shimmer {
  0%, 100% { left: -100%; }
  50%      { left: 100%; }
}

/* Showcase strip rendered above the profile header */
.profile-showcase { margin: 0 0 18px 0; }
.profile-showcase h3 {
  font-size: 13px; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--muted); margin: 0 0 10px 0;
}
.profile-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}
.showcase-tile {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.showcase-tile:hover { transform: translateY(-2px); border-color: var(--red); text-decoration: none; }
.showcase-tile img {
  width: 100%; height: auto; aspect-ratio: 245/342;
  object-fit: contain; border-radius: 4px; background: #000;
}
.showcase-tile .sc-name { font-size: 12px; font-weight: 600; margin-top: 8px; line-height: 1.3; }
.showcase-tile .sc-set  { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Settings: background option radio cards */
.bg-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.bg-option {
  cursor: pointer;
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  text-align: center;
  position: relative;
  transition: border-color 0.15s ease;
}
.bg-option:hover { border-color: var(--border-hi); }
.bg-option input { position: absolute; opacity: 0; pointer-events: none; }
.bg-option input:checked + .bg-preview ~ .bg-label { color: var(--red); font-weight: 700; }
.bg-option:has(input:checked) { border-color: var(--red); }
.bg-preview {
  height: 60px; border-radius: 6px; margin-bottom: 6px;
}
.bg-label { font-size: 12px; }

/* =====================================================================
 * Profile effects (extended). Applied to .profile-customized along with
 * the background. All pure CSS — no JS.
 * ===================================================================== */
.profile-effect-pulse-glow {
  animation: pulseGlow 3.2s ease-in-out infinite;
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 18px -8px rgba(239,68,68,0.30); }
  50%      { box-shadow: 0 0 70px -8px rgba(239,68,68,0.55), 0 0 26px -6px rgba(239,68,68,0.35); }
}

.profile-effect-holo-border {
  border: 2px solid transparent;
  background-clip: padding-box;
  position: relative;
}
.profile-effect-holo-border::before {
  content: ""; position: absolute; inset: -2px; border-radius: 14px;
  background: linear-gradient(120deg, #ef4444, #f59e0b, #22c55e, #3b82f6, #8b5cf6, #ef4444);
  background-size: 400% 400%;
  animation: holoBorder 6s linear infinite;
  z-index: -1;
}
@keyframes holoBorder {
  0%   { background-position:   0% 50%; }
  100% { background-position: 400% 50%; }
}

.profile-effect-vignette {
  position: relative;
}
.profile-effect-vignette::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: 14px;
  box-shadow: inset 0 0 80px 20px rgba(0,0,0,0.45);
}

.profile-effect-embers {
  position: relative; overflow: hidden;
}
.profile-effect-embers::before,
.profile-effect-embers::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 10% 100%, rgba(255,107,53,0.55) 1.5px, transparent 2.5px),
    radial-gradient(circle at 30% 100%, rgba(255,165,0,0.45) 1.5px, transparent 2.5px),
    radial-gradient(circle at 55% 100%, rgba(255,107,53,0.50) 1.5px, transparent 2.5px),
    radial-gradient(circle at 75% 100%, rgba(255,200,0,0.40) 1.5px, transparent 2.5px),
    radial-gradient(circle at 92% 100%, rgba(255,107,53,0.55) 1.5px, transparent 2.5px);
  background-size: 100% 220px;
  background-repeat: no-repeat;
  animation: embers 5s linear infinite;
  opacity: 0.85;
}
.profile-effect-embers::after { animation-delay: -2.5s; opacity: 0.5; }
@keyframes embers {
  0%   { transform: translateY(0);     opacity: 0.0; }
  10%  { opacity: 0.85; }
  100% { transform: translateY(-100%); opacity: 0.0; }
}

/* =====================================================================
 * Username particles. Wraps the profile <h1> in .name-particles + variant
 * class; six small absolutely-positioned span dots are animated by CSS.
 * ===================================================================== */
.name-particles {
  position: relative;
  display: inline-block;
  padding: 4px 12px;
}
.name-particles .particle {
  position: absolute;
  pointer-events: none;
  opacity: 0;
}

/* sparkles — gold dots fading in/out */
.name-particles-sparkles .particle {
  width: 5px; height: 5px;
  background: #fde047;
  border-radius: 50%;
  box-shadow: 0 0 6px #facc15;
  animation: ca-sparkle 3.2s ease-in-out infinite;
}
.name-particles-sparkles .p1 { left: -4%;  top: -8%;  animation-delay: 0s;   }
.name-particles-sparkles .p2 { left: 20%;  top: 110%; animation-delay: 0.6s; }
.name-particles-sparkles .p3 { left: 50%;  top: -16%; animation-delay: 1.2s; }
.name-particles-sparkles .p4 { left: 78%;  top: 100%; animation-delay: 1.8s; }
.name-particles-sparkles .p5 { left: 102%; top: 0%;   animation-delay: 2.4s; }
.name-particles-sparkles .p6 { left: 92%;  top: 80%;  animation-delay: 1.0s; }
@keyframes ca-sparkle {
  0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1.3) rotate(180deg); }
}

/* embers — small orange dots rising */
.name-particles-embers .particle {
  width: 4px; height: 4px;
  background: #ff6b35;
  border-radius: 50%;
  box-shadow: 0 0 6px #ff8c42;
  bottom: -4px;
  animation: ca-ember-rise 3.6s ease-out infinite;
}
.name-particles-embers .p1 { left: 8%;   animation-delay: 0s;   }
.name-particles-embers .p2 { left: 24%;  animation-delay: 0.7s; }
.name-particles-embers .p3 { left: 42%;  animation-delay: 1.4s; }
.name-particles-embers .p4 { left: 60%;  animation-delay: 2.1s; }
.name-particles-embers .p5 { left: 78%;  animation-delay: 2.8s; }
.name-particles-embers .p6 { left: 92%;  animation-delay: 0.4s; }
@keyframes ca-ember-rise {
  0%   { opacity: 0; transform: translateY(0) translateX(0); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-72px) translateX(6px); }
}

/* snow — white dots drifting down */
.name-particles-snow .particle {
  width: 4px; height: 4px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(255,255,255,0.6);
  top: -8px;
  animation: ca-snow-fall 5s linear infinite;
}
.name-particles-snow .p1 { left: 10%; animation-delay: 0s;   }
.name-particles-snow .p2 { left: 26%; animation-delay: 1s;   }
.name-particles-snow .p3 { left: 44%; animation-delay: 2s;   }
.name-particles-snow .p4 { left: 62%; animation-delay: 3s;   }
.name-particles-snow .p5 { left: 80%; animation-delay: 4s;   }
.name-particles-snow .p6 { left: 96%; animation-delay: 0.5s; }
@keyframes ca-snow-fall {
  0%   { opacity: 0; transform: translateY(0); }
  10%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(60px) translateX(-8px); }
}

/* bubbles — light blue circles rising slowly */
.name-particles-bubbles .particle {
  width: 8px; height: 8px;
  background: rgba(125,211,252,0.0);
  border: 1.5px solid rgba(125,211,252,0.7);
  border-radius: 50%;
  bottom: -8px;
  animation: ca-bubble-rise 5.5s ease-in infinite;
}
.name-particles-bubbles .p1 { left: 12%; animation-delay: 0s;   }
.name-particles-bubbles .p2 { left: 30%; animation-delay: 1.2s; }
.name-particles-bubbles .p3 { left: 48%; animation-delay: 2.4s; }
.name-particles-bubbles .p4 { left: 66%; animation-delay: 3.6s; }
.name-particles-bubbles .p5 { left: 84%; animation-delay: 4.8s; }
.name-particles-bubbles .p6 { left: 96%; animation-delay: 0.6s; }
@keyframes ca-bubble-rise {
  0%   { opacity: 0; transform: translateY(0)    scale(0.5); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-90px) scale(1.2); }
}

/* electric — yellow lightning-bolt glyphs that rapidly flicker */
.name-particles-electric .particle {
  width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1;
  color: #fde047;
  text-shadow:
    0 0 4px #fde047,
    0 0 10px #facc15,
    0 0 18px rgba(250,204,21,0.55);
  animation: ca-electric 1.6s steps(8, end) infinite;
}
.name-particles-electric .particle::before { content: "⚡"; }
.name-particles-electric .p1 { left: -2%;  top: -8%;  animation-delay: 0s;   transform: rotate(-12deg); }
.name-particles-electric .p2 { left: 22%;  top: 100%; animation-delay: 0.4s; transform: rotate(8deg); }
.name-particles-electric .p3 { left: 48%;  top: -14%; animation-delay: 0.8s; transform: rotate(-6deg); }
.name-particles-electric .p4 { left: 74%;  top: 90%;  animation-delay: 1.2s; transform: rotate(10deg); }
.name-particles-electric .p5 { left: 100%; top: -4%;  animation-delay: 0.2s; transform: rotate(-4deg); }
.name-particles-electric .p6 { left: 92%;  top: 80%;  animation-delay: 0.6s; transform: rotate(14deg); }
@keyframes ca-electric {
  0%, 14%, 24%, 100% { opacity: 0; }
  6%, 12%            { opacity: 1; }
  16%, 22%           { opacity: 0.85; }
}

/* === Three more original Pokémon-inspired backgrounds (no IP) === */
.profile-bg-card-foil {
  background:
    repeating-linear-gradient(
      55deg,
      rgba(239,68,68,0.06)    0px,
      rgba(168,85,247,0.06)  20px,
      rgba(34,211,238,0.06)  40px,
      rgba(250,204,21,0.06)  60px,
      rgba(34,197,94,0.06)   80px,
      rgba(239,68,68,0.06)  100px),
    var(--bg-soft);
  background-size: 400% 400%, auto;
  border: 1px solid var(--border-hi);
  animation: holoshift 14s ease-in-out infinite;
}
.profile-bg-energy-burst {
  background:
    radial-gradient(circle at 50% 50%, rgba(239,68,68,0.18) 0%, transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(239,68,68,0.10) 35%, transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.03) 60%, transparent 85%),
    radial-gradient(circle at 50% 50%, #1a1219 0%, #0b0d11 100%);
  border: 1px solid var(--border-hi);
}
.profile-bg-pixel-grid {
  background:
    linear-gradient(rgba(34,197,94,0.10) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, rgba(34,197,94,0.10) 1px, transparent 1px) 0 0 / 16px 16px,
    radial-gradient(circle at 50% 50%, rgba(34,197,94,0.08) 0%, transparent 70%),
    #0a1f0d;
  border: 1px solid rgba(34,197,94,0.3);
}

/* =====================================================================
 * User menu dropdown (in the navbar). Plain <button> + sibling panel,
 * JS-toggled. The .open class on the wrapper rotates the caret + the
 * panel's `hidden` attribute is removed by JS to show.
 * ===================================================================== */
.user-menu {
  position: relative;
  display: inline-block;
}
.user-menu-summary {
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--text);
  font: 600 13px/1 inherit;
  user-select: none;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.user-menu-summary:hover,
.user-menu.open .user-menu-summary {
  border-color: var(--border-hi);
  background: var(--panel);
}
.user-menu-handle {
  font-weight: 700;
  font-size: 13px;
}
.user-menu-caret {
  color: var(--muted);
  font-size: 11px;
  transition: transform 0.12s ease;
}
.user-menu.open .user-menu-caret { transform: rotate(180deg); }
.user-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--panel);
  border: 1px solid var(--border-hi);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  z-index: 60;
  padding: 6px;
  flex-direction: column;
  /* Hidden by default — visible only when the wrapper has .open. */
  display: none;
}
.user-menu.open .user-menu-panel { display: flex; }
.user-menu-section-label {
  padding: 8px 10px 4px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 700;
}
.user-menu-item {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.10s ease;
}
.user-menu-item:hover {
  background: var(--bg-soft);
  text-decoration: none;
}
.user-menu-item-danger { color: var(--red-bright); }
.user-menu-item-danger:hover { background: rgba(239,68,68,0.08); }

/* On narrow nav (mobile menu open), the dropdown appears inline rather
   than absolutely-positioned so it doesn't overflow off-screen. */
@media (max-width: 860px) {
  .user-menu { display: block; width: 100%; }
  .user-menu .user-menu-summary { width: 100%; justify-content: space-between; }
  .user-menu.open .user-menu-panel {
    position: static; min-width: 0;
    box-shadow: none; border: 1px solid var(--border);
    margin-top: 6px;
  }
}