@font-face{font-family:'Belwe Bold';src:url('https://game-enthusiasts.com/fonts/belwe-bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap;}
/* ──────────────────────────────────────────────────────────
   COMP TERMINAL — card-prices.com
   Galaxy + neon rainbow + Pokémon flair + market terminal.
   ────────────────────────────────────────────────────────── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

:root {
  --navy: #0a0d2e;
  --deep-navy: #06091e;
  --abyss: #04061a;
  --card-bg: rgba(255, 255, 255, 0.04);
  --card-bg-2: rgba(255, 255, 255, 0.025);
  --neon-cyan: #00f5ff;
  --neon-cyan-soft: rgba(0, 245, 255, 0.5);
  --neon-orange: #ff6a00;
  --neon-yellow: #ffd700;
  --neon-pink: #ff3cac;
  --neon-violet: #6a5acd;
  --neon-red: #ff3030;
  --pkm-yellow: #ffcb05;
  --pkm-blue: #2a75bb;
  --pkm-red: #ee1515;
  --text-light: #fff;
  --text-muted: #8ab4c9;
  --text-dim: #5b6e85;
  --border-soft: rgba(255, 255, 255, 0.07);
  --border-mid: rgba(255, 255, 255, 0.12);
  --gain: #4ade80;
  --loss: #ff6b6b;
  --warn: #ffb347;
  --holo: linear-gradient(90deg, #ff6a00, #ff3cac, #6a5acd, #00bfff, #00f5cc, #ffd700, #ff6a00);
  --holo-gradient: var(--holo);

  --f-display: 'Cinzel Decorative', cursive;
  --f-head: 'Cinzel', serif;
  --f-body: 'Belwe Bold', 'Cinzel', serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* ── Comp theme tokens ─────────────────────────────────── */

  /* Panel backgrounds (navy family) */
  --comp-panel-bg-95: rgba(6, 9, 30, 0.95);
  --comp-panel-bg-85: rgba(6, 9, 30, 0.85);
  --comp-panel-bg-80: rgba(6, 9, 30, 0.8);
  --comp-panel-bg-75: rgba(6, 9, 30, 0.75);
  --comp-panel-bg-70: rgba(6, 9, 30, 0.7);
  --comp-panel-bg-60: rgba(6, 9, 30, 0.6);
  --comp-panel-bg-50: rgba(6, 9, 30, 0.5);
  --comp-panel-deep: rgba(4, 6, 26, 1);
  --comp-panel-deep-99: rgba(4, 6, 26, 0.99);
  --comp-panel-deep-95: rgba(4, 6, 26, 0.95);
  --comp-panel-deep-90: rgba(4, 6, 26, 0.9);
  --comp-panel-deep-70: rgba(4, 6, 26, 0.7);
  --comp-panel-deep-alt-60: rgba(4, 6, 20, 0.6);
  --comp-panel-mid-98: rgba(10, 13, 46, 0.98);
  --comp-panel-light-90: rgba(14, 17, 44, 0.9);
  --comp-panel-light-80: rgba(14, 17, 44, 0.8);
  --comp-panel-lighter: rgba(20, 24, 60, 1);
  --comp-panel-darkest: rgba(2, 3, 14, 1);
  --comp-backdrop: rgba(2, 4, 14, 0.78);
  --comp-popup-bg-98: rgba(8, 10, 28, 0.98);
  --comp-popup-bg-95: rgba(8, 10, 28, 0.95);

  /* Black overlays */
  --comp-black-70: rgba(0, 0, 0, 0.7);
  --comp-black-65: rgba(0, 0, 0, 0.65);
  --comp-black-60: rgba(0, 0, 0, 0.6);
  --comp-black-50: rgba(0, 0, 0, 0.5);
  --comp-black-45: rgba(0, 0, 0, 0.45);
  --comp-black-40: rgba(0, 0, 0, 0.4);
  --comp-black-38: rgba(0, 0, 0, 0.38);
  --comp-black-35: rgba(0, 0, 0, 0.35);
  --comp-black-32: rgba(0, 0, 0, 0.32);
  --comp-black-30: rgba(0, 0, 0, 0.3);
  --comp-black-28: rgba(0, 0, 0, 0.28);
  --comp-black-25: rgba(0, 0, 0, 0.25);

  /* Accent cyan (0, 245, 255) */
  --comp-accent-55: rgba(0, 245, 255, 0.55);
  --comp-accent-50: rgba(0, 245, 255, 0.5);
  --comp-accent-45: rgba(0, 245, 255, 0.45);
  --comp-accent-40: rgba(0, 245, 255, 0.4);
  --comp-accent-35: rgba(0, 245, 255, 0.35);
  --comp-accent-30: rgba(0, 245, 255, 0.3);
  --comp-accent-28: rgba(0, 245, 255, 0.28);
  --comp-accent-25: rgba(0, 245, 255, 0.25);
  --comp-accent-22: rgba(0, 245, 255, 0.22);
  --comp-accent-20: rgba(0, 245, 255, 0.2);
  --comp-accent-18: rgba(0, 245, 255, 0.18);
  --comp-accent-15: rgba(0, 245, 255, 0.15);
  --comp-accent-14: rgba(0, 245, 255, 0.14);
  --comp-accent-12: rgba(0, 245, 255, 0.12);
  --comp-accent-10: rgba(0, 245, 255, 0.1);
  --comp-accent-08: rgba(0, 245, 255, 0.08);
  --comp-accent-06: rgba(0, 245, 255, 0.06);
  --comp-accent-05: rgba(0, 245, 255, 0.05);
  --comp-accent-04: rgba(0, 245, 255, 0.04);
  --comp-accent-025: rgba(0, 245, 255, 0.025);
  --comp-accent-02: rgba(0, 245, 255, 0.02);
  --comp-accent-015: rgba(0, 245, 255, 0.015);
  --comp-accent-00: rgba(0, 245, 255, 0);
  --comp-accent-light: #00c8ff;

  /* Warm orange (255, 106, 0) */
  --comp-warm-50: rgba(255, 106, 0, 0.5);
  --comp-warm-40: rgba(255, 106, 0, 0.4);
  --comp-warm-30: rgba(255, 106, 0, 0.3);
  --comp-warm-25: rgba(255, 106, 0, 0.25);
  --comp-warm-15: rgba(255, 106, 0, 0.15);
  --comp-warm-10: rgba(255, 106, 0, 0.1);
  --comp-warm-08: rgba(255, 106, 0, 0.08);
  --comp-warm-07: rgba(255, 106, 0, 0.07);
  --comp-warm-06: rgba(255, 106, 0, 0.06);

  /* Gold (255, 215, 0) */
  --comp-gold-35: rgba(255, 215, 0, 0.35);
  --comp-gold-30: rgba(255, 215, 0, 0.3);
  --comp-gold-25: rgba(255, 215, 0, 0.25);
  --comp-gold-16: rgba(255, 215, 0, 0.16);
  --comp-gold-15: rgba(255, 215, 0, 0.15);
  --comp-gold-14: rgba(255, 215, 0, 0.14);
  --comp-gold-12: rgba(255, 215, 0, 0.12);
  --comp-gold-10: rgba(255, 215, 0, 0.1);
  --comp-gold-08: rgba(255, 215, 0, 0.08);
  --comp-gold-06: rgba(255, 215, 0, 0.06);

  /* Pink (255, 60, 172) */
  --comp-pink-40: rgba(255, 60, 172, 0.4);
  --comp-pink-30: rgba(255, 60, 172, 0.3);
  --comp-pink-25: rgba(255, 60, 172, 0.25);
  --comp-pink-24: rgba(255, 60, 172, 0.24);
  --comp-pink-12: rgba(255, 60, 172, 0.12);
  --comp-pink-06: rgba(255, 60, 172, 0.06);
  --comp-pink-05: rgba(255, 60, 172, 0.05);

  /* Violet (106, 90, 205) */
  --comp-violet-30: rgba(106, 90, 205, 0.3);
  --comp-violet-25: rgba(106, 90, 205, 0.25);
  --comp-violet-18: rgba(106, 90, 205, 0.18);
  --comp-violet-10: rgba(106, 90, 205, 0.1);

  /* Gain green (74, 222, 128) */
  --comp-gain-50: rgba(74, 222, 128, 0.5);
  --comp-gain-40: rgba(74, 222, 128, 0.4);
  --comp-gain-12: rgba(74, 222, 128, 0.12);

  /* Red (255, 48, 48) */
  --comp-red-12: rgba(255, 48, 48, 0.12);
  --comp-red-08: rgba(255, 48, 48, 0.08);

  /* White / border opacity scale */
  --comp-text: #ffffff;
  --comp-white-85: rgba(255, 255, 255, 0.85);
  --comp-white-70: rgba(255, 255, 255, 0.7);
  --comp-white-60: rgba(255, 255, 255, 0.6);
  --comp-border-bright: rgba(255, 255, 255, 0.15);
  --comp-border-med: rgba(255, 255, 255, 0.1);
  --comp-border: rgba(255, 255, 255, 0.08);
  --comp-border-soft: rgba(255, 255, 255, 0.06);
  --comp-border-subtle: rgba(255, 255, 255, 0.04);
  --comp-white-05: rgba(255, 255, 255, 0.05);
  --comp-white-03: rgba(255, 255, 255, 0.03);
  --comp-white-025: rgba(255, 255, 255, 0.025);
  --comp-white-015: rgba(255, 255, 255, 0.015);

  /* Atmosphere */
  --comp-atmos-blue: rgba(0, 180, 255, 0.26);
  --comp-holo-blue-30: rgba(0, 191, 255, 0.3);
  --comp-holo-green-30: rgba(0, 245, 204, 0.3);

  /* Vendor brand colors */
  --comp-tcg: #ee7a4a;
  --comp-tcg-25: rgba(238, 122, 74, 0.25);
  --comp-tcg-08: rgba(238, 122, 74, 0.08);
  --comp-ebay: #fbcb1c;
  --comp-ebay-25: rgba(251, 203, 28, 0.25);
  --comp-ebay-06: rgba(251, 203, 28, 0.06);
  --comp-psa-text: #ff5050;
  --comp-psa-25: rgba(238, 21, 21, 0.25);
  --comp-psa-07: rgba(238, 21, 21, 0.07);
  --comp-label-border: #444;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  background: var(--abyss);
  color: var(--text-light);
  font-family: var(--f-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* ── BACKGROUND ATMOSPHERE ─────────────────────────────────── */
body::before {
  content: '';
  position: fixed; inset: -5%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 55% at 18% 28%, var(--comp-violet-30) 0%, transparent 70%),
    radial-gradient(ellipse 45% 50% at 82% 16%, var(--comp-pink-24) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 12% 78%, var(--comp-atmos-blue) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 88% 88%, var(--comp-gold-16) 0%, transparent 60%),
    linear-gradient(to top, var(--abyss), var(--deep-navy));
  animation: nebula-drift 28s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes nebula-drift {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-1.5%, 1%); }
  100% { transform: translate(1%, -0.5%); }
}
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(0deg, var(--comp-accent-015) 0px, var(--comp-accent-015) 1px, transparent 1px, transparent 3px);
  opacity: 0.4;
}

.stars {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
}
@keyframes twinkle  { 0% { opacity: 0.55; } 100% { opacity: 1; } }
.stars::before, .stars::after {
  content: ''; position: absolute; inset: 0;
}
.stars::before {
  background-image:
    radial-gradient(1px 1px at 8% 14%, var(--comp-text) 0%, transparent 100%),
    radial-gradient(1px 1px at 23% 41%, var(--comp-white-70) 0%, transparent 100%),
    radial-gradient(1px 1px at 41% 72%, var(--comp-text) 0%, transparent 100%),
    radial-gradient(1px 1px at 56% 26%, var(--comp-white-85) 0%, transparent 100%),
    radial-gradient(1.4px 1.4px at 71% 56%, var(--comp-text) 0%, transparent 100%),
    radial-gradient(1px 1px at 86% 11%, var(--comp-white-60) 0%, transparent 100%),
    radial-gradient(1px 1px at 91% 81%, var(--comp-text) 0%, transparent 100%),
    radial-gradient(1.6px 1.6px at 14% 86%, var(--comp-white-85) 0%, transparent 100%);
  animation: twinkle 4.5s ease-in-out infinite alternate;
}
.stars::after {
  background-image:
    radial-gradient(1.6px 1.6px at 19% 9%, var(--neon-cyan) 0%, transparent 100%),
    radial-gradient(1.4px 1.4px at 33% 62%, var(--neon-pink) 0%, transparent 100%),
    radial-gradient(1.4px 1.4px at 48% 18%, var(--pkm-yellow) 0%, transparent 100%),
    radial-gradient(1.6px 1.6px at 63% 47%, var(--neon-cyan) 0%, transparent 100%),
    radial-gradient(1.4px 1.4px at 79% 27%, var(--neon-pink) 0%, transparent 100%),
    radial-gradient(1.6px 1.6px at 94% 64%, var(--pkm-yellow) 0%, transparent 100%),
    radial-gradient(1.4px 1.4px at 38% 91%, var(--neon-cyan) 0%, transparent 100%),
    radial-gradient(1.4px 1.4px at 6% 50%, var(--neon-pink) 0%, transparent 100%);
  animation: twinkle 5.5s ease-in-out 2.2s infinite alternate;
  opacity: 0.85;
}

/* drifting pokéballs in background */
.pokeballs {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden;
}
.pkb { position:absolute; width:70px; height:70px; opacity:0.62; filter:drop-shadow(0 0 14px var(--comp-accent-25)) drop-shadow(0 0 28px var(--comp-pink-12)) drop-shadow(4px 6px 8px var(--comp-black-50)); will-change:transform; }
@keyframes shooting-star{0%{transform:translateX(-100px) translateY(100px) rotate(-35deg);opacity:0;}5%{opacity:1;}15%{opacity:0;}100%{transform:translateX(calc(100vw + 200px)) translateY(-100vh) rotate(-35deg);opacity:0;}}
.shooting-star{position:fixed;top:10%;left:0;z-index:0;pointer-events:none;width:80px;height:1px;background:linear-gradient(90deg,transparent,var(--neon-cyan),transparent);animation:shooting-star 8s linear infinite;opacity:0;}
.shooting-star+.shooting-star{top:30%;animation-delay:12s;animation-duration:6s;}
.shooting-star+.shooting-star+.shooting-star{top:60%;animation-delay:20s;animation-duration:10s;}

/* ── SIDE POKÉMON ART ──────────────────────────────────────── */
.side-art { display:none !important; }
.side-art.left  { left: 0;  }
.side-art.right { right: 0; }
.side-art img.pkm {
  display: block;
  position: absolute;
  left: 50%;
  pointer-events: none;
  image-rendering: pixelated;       /* keep pixel-art crisp when scaled up */
  image-rendering: -moz-crisp-edges;
  /* transform managed by per-Pokémon wander animation */
}
/* Canon-relative sizing — Charizard (1.7m) towers over Pikachu (0.4m).
   Pushed to ~4× size contrast for visual clarity. !important wins over
   inline style="width:..." that the original markup carried. */
.side-art .pkm.pika   { width: 56px  !important; top: 24%; }
.side-art .pkm.eevee  { width: 50px  !important; bottom: 20%; }
.side-art .pkm.zard   { width: 180px !important; top: 16%; }
.side-art .pkm.gengar { width: 120px !important; bottom: 22%; opacity:0.6; mix-blend-mode:screen; }
.side-art.legacy { display: none !important; }

/* Neon outline filters — extract dark outline pixels from the sprite,
   recolor them to a neon hue, drop fills entirely. Defined in the SVG
   filter <defs> block in the body. */
/* All four Pokémon use the same galaxy-gradient outline filter — the
   gradient itself supplies the color variation across the outline, so
   each line segment is a different color depending on where it sits in
   the bounding box. No more whole-image hue rotation. */
.pkm-glow-cy,
.pkm-glow-or,
.pkm-glow-pn,
.pkm-glow-yl {
  filter: url(#pkm-galaxy)
    drop-shadow(0 0 6px var(--comp-pink-40))
    drop-shadow(0 0 14px var(--comp-accent-30))
    drop-shadow(0 0 28px var(--comp-violet-18));
}

/* ── Runner: when a card row is clicked, the matched Pokémon dashes across
   the bottom of the screen. Uses a clean wrapper div + child img so the
   side-art classes (which carry width%, mix-blend-mode, etc. that fight
   the runner's positioning) never apply. ──────────────────────────────── */
@property --rx { syntax: '<length>'; inherits: false; initial-value: -260px; }
@property --rh { syntax: '<length>'; inherits: false; initial-value: 0px; }

.pkm-run-wrap {
  position: fixed;
  bottom: 36px;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  --rx: -260px;
  --rh: 0px;
  transform: translate(var(--rx), var(--rh));
  animation: pkm-run-x 4.6s linear forwards, pkm-run-hop 0.36s ease-in-out infinite;
}
.pkm-run-wrap.flip { transform: translate(var(--rx), var(--rh)) scaleX(-1); }
.pkm-run-wrap img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  filter: url(#pkm-galaxy)
    drop-shadow(0 0 8px var(--comp-accent-55))
    drop-shadow(0 0 18px var(--comp-pink-30));
}
.pkm-run-wrap.pika   { width: 90px; }
.pkm-run-wrap.eevee  { width: 80px; }
.pkm-run-wrap.zard   { width: 220px; }
.pkm-run-wrap.gengar { width: 170px; }
.pkm-run-wrap.card-runner { width: 120px; }

@keyframes pkm-run-x {
  0%   { --rx: -260px; }
  100% { --rx: calc(100vw + 260px); }
}
@keyframes pkm-run-hop {
  0%, 100% { --rh: 0px; }
  50%      { --rh: -10px; }
}
/* charizard flies, doesn't hop */
.pkm-run-wrap.fly { animation: pkm-run-x 4.2s linear forwards, pkm-fly-bob 1.2s ease-in-out infinite; }
@keyframes pkm-fly-bob {
  0%, 100% { --rh: -8px; }
  50%      { --rh: 4px; }
}
/* ghost float */
.pkm-run-wrap.float { animation: pkm-run-x 5.2s linear forwards, pkm-float-bob 1.6s ease-in-out infinite; }
@keyframes pkm-float-bob {
  0%, 100% { --rh: 0px; }
  50%      { --rh: -16px; }
}

/* heavier silhouette fills — make Pokémon read as bodies, not line drawings */
.pkm path { stroke-linejoin: round; stroke-linecap: round; }
.pkm path[fill-opacity="0.10"] { fill-opacity: 0.24; }
.pkm path[fill-opacity="0.08"] { fill-opacity: 0.22; }
.pkm path[fill-opacity="0.12"] { fill-opacity: 0.28; }
.pkm path[fill-opacity="0.16"] { fill-opacity: 0.32; }

/* compose hop + lateral wander via CSS variables (modern @property) */
@property --hop-y    { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --wander-x { syntax: '<length>'; inherits: false; initial-value: 0px; }

/* ── Pikachu (idles, occasionally bursts and hops) ────────── */
.pkm.pika {
  --hop-y: 0px;
  --wander-x: 0px;
  transform: translate(calc(-50% + var(--wander-x)), var(--hop-y));
  animation:
    pika-hop 4s ease-in-out infinite,
    pika-wander 34s ease-in-out infinite;
}
/* Most of the cycle still, then 2-3 quick hops, then still again */
@keyframes pika-hop {
  0%, 70%        { --hop-y: 0px; }
  76%            { --hop-y: -8px; }
  80%            { --hop-y: 0px; }
  85%            { --hop-y: -8px; }
  90%, 100%      { --hop-y: 0px; }
}
/* Idle most of the cycle, then dart somewhere, sit, dart back */
@keyframes pika-wander {
  0%, 18%   { --wander-x: 0px; }
  22%, 38%  { --wander-x: 90px; }
  44%, 58%  { --wander-x: 30px; }
  64%, 80%  { --wander-x: -70px; }
  86%, 100% { --wander-x: 0px; }
}
.pika-out  { stroke: var(--pkm-yellow); }
.pika-tail { stroke: var(--pkm-yellow); }
.pika-cheek { fill: var(--neon-pink); fill-opacity: 0.85; filter: drop-shadow(0 0 4px var(--neon-pink)); }
.pika-tip   { fill: var(--neon-cyan);  fill-opacity: 0.55; }
.pika-eye   { fill: var(--neon-cyan); }
.pika-tail-shake { animation: tail-flick 1.4s ease-in-out infinite; transform-origin: 70% 60%; }
@keyframes tail-flick {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(7deg); }
}
.pika-leg-front { animation: leg-front 0.45s ease-in-out infinite; transform-origin: 92px 175px; }
.pika-leg-back  { animation: leg-back  0.45s ease-in-out infinite; transform-origin: 110px 175px; }
@keyframes leg-front { 0%,100% { transform: rotate(-18deg); } 50% { transform: rotate(14deg); } }
@keyframes leg-back  { 0%,100% { transform: rotate(14deg); }  50% { transform: rotate(-18deg); } }
.pika-spark { animation: pika-spark 2.6s ease-in-out infinite; transform-origin: center; }
@keyframes pika-spark {
  0%, 65%, 100% { opacity: 0; transform: scale(0.6); }
  70%, 80%      { opacity: 1; transform: scale(1.05); }
  85%           { opacity: 0; transform: scale(1.4); }
}

/* ── Eevee (mostly still, occasional pounce) ──────────────── */
.pkm.eevee {
  --hop-y: 0px;
  --wander-x: 0px;
  transform: translate(calc(-50% + var(--wander-x)), var(--hop-y));
  animation:
    eevee-bob 5s ease-in-out infinite,
    eevee-wander 38s ease-in-out infinite;
}
@keyframes eevee-bob {
  0%, 75%   { --hop-y: 0px; }
  82%       { --hop-y: -3px; }
  88%, 100% { --hop-y: 0px; }
}
@keyframes eevee-wander {
  0%, 22%   { --wander-x: 0px; }
  28%, 42%  { --wander-x: -60px; }
  48%, 62%  { --wander-x: 0px; }
  68%, 82%  { --wander-x: 50px; }
  88%, 100% { --wander-x: 0px; }
}
.eevee-out { stroke: var(--neon-cyan); }
.eevee-ruff { stroke: var(--neon-cyan); fill: var(--comp-accent-06); }
.eevee-eye  { fill: var(--neon-cyan); }
.eevee-tail-wag { animation: eevee-tail 1.1s ease-in-out infinite; transform-origin: 32% 60%; }
@keyframes eevee-tail {
  0%, 100% { transform: rotate(-12deg); }
  50%      { transform: rotate(14deg); }
}

/* ── Charizard (slow hover + glide drift, contained in panel) ─ */
.pkm.zard {
  --hop-y: 0px;
  --wander-x: 0px;
  transform: translate(calc(-50% + var(--wander-x)), var(--hop-y));
  animation:
    zard-hover 5s ease-in-out infinite,
    zard-wander 42s ease-in-out infinite;
}
@keyframes zard-hover {
  0%, 100% { --hop-y: -4px; }
  50%      { --hop-y: -12px; }
}
/* Reduced wander range so the 220px sprite doesn't clip the 22vw panel
   (panel min ~325px at 1480vw, so safe wander is ±~50px). */
@keyframes zard-wander {
  0%, 18%   { --wander-x: 0px; }
  24%, 38%  { --wander-x: -42px; }
  46%, 58%  { --wander-x: 0px; }
  64%, 78%  { --wander-x: 38px; }
  86%, 100% { --wander-x: 0px; }
}
.zard-out  { stroke: var(--neon-orange); }
.zard-out-soft { stroke: var(--neon-orange); stroke-opacity: 0.55; }
.zard-eye  { fill: var(--neon-cyan); }
.zard-claw { stroke: var(--neon-yellow); stroke-width: 1.8; }
.zard-wing-l { animation: wing-l 1.0s ease-in-out infinite; transform-origin: 60% 38%; }
.zard-wing-r { animation: wing-r 1.0s ease-in-out infinite; transform-origin: 40% 38%; }
@keyframes wing-l { 0%,100% { transform: rotate(-6deg) scaleY(0.96); } 50% { transform: rotate(14deg) scaleY(1.06); } }
@keyframes wing-r { 0%,100% { transform: rotate(6deg)  scaleY(0.96); } 50% { transform: rotate(-14deg) scaleY(1.06); } }
.zard-tail-flame { animation: flame-flicker 0.7s ease-in-out infinite alternate; transform-origin: center bottom; }
@keyframes flame-flicker {
  0%   { transform: scale(0.9, 0.85);  opacity: 0.7; }
  100% { transform: scale(1.05, 1.18); opacity: 1.0; }
}
.zard-breath { animation: zard-breath 4.2s ease-in-out infinite; transform-origin: 56% 48%; opacity: 0; }
@keyframes zard-breath {
  0%, 60%, 100% { opacity: 0; transform: scaleX(0.4) translateX(0); }
  70%           { opacity: 1; transform: scaleX(1.0) translateX(8px); }
  90%           { opacity: 0.4; transform: scaleX(1.4) translateX(20px); }
}

/* ── Gengar (slow ghostly float, occasional teleport drift) ── */
.pkm.gengar {
  --hop-y: 0px;
  --wander-x: 0px;
  --tilt: 0deg;
  transform: translate(calc(-50% + var(--wander-x)), var(--hop-y)) rotate(var(--tilt));
  animation:
    gengar-float 6s ease-in-out infinite,
    gengar-wander 36s ease-in-out infinite;
}
@property --tilt { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes gengar-float {
  0%, 100% { --hop-y: -2px; --tilt: -1.5deg; }
  50%      { --hop-y: -10px; --tilt: 1.5deg; }
}
@keyframes gengar-wander {
  0%, 24%   { --wander-x: 0px; }
  30%, 44%  { --wander-x: 65px; }
  50%, 64%  { --wander-x: 0px; }
  70%, 84%  { --wander-x: -55px; }
  90%, 100% { --wander-x: 0px; }
}
.gengar-out  { stroke: var(--neon-violet); }
.gengar-fill { fill: var(--comp-violet-10); }
.gengar-eye  { fill: var(--neon-pink); }
.gengar-tooth { stroke: var(--text-light); stroke-width: 1.6; fill: none; }
.gengar-wisp { animation: gengar-wisp 3s ease-in-out infinite; }
@keyframes gengar-wisp {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50%      { opacity: 0.8; transform: translateY(-4px); }
}

@keyframes holo-shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse-cyan {
  0%, 100% { box-shadow: 0 0 0 0 var(--comp-accent-45); }
  50%      { box-shadow: 0 0 0 6px var(--comp-accent-00); }
}
@keyframes blink {
  0%, 50%  { opacity: 1; }
  51%, 100%{ opacity: 0; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── TICKER STRIP ─────────────────────────────────────────── */
.tape {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 12px 0 28px;
  border:1px solid var(--comp-accent-10);
  border-radius: 10px;
  overflow: hidden;
  background:var(--comp-panel-bg-75); backdrop-filter:blur(6px);
  position: relative;
}
.tape::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--holo);
  background-size: 200% 100%;
  animation: holo-shimmer 6s linear infinite;
  opacity: 0.7;
}
.tape-cell {
  padding: 16px 20px;
  border-right:1px solid var(--comp-accent-08);
  display: flex; flex-direction: column; gap: 4px;
}
.tape-cell:last-child { border-right: none; }
.tape-label {
  font-family: var(--f-head);
  font-size: 0.55rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--neon-orange);
}
.tape-value {
  font-family: var(--f-mono);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-light);
}
.tape-sub {
  font-size: 0.7rem;
  color: var(--text-dim);
  font-family: var(--f-mono);
}
@media (max-width: 768px) {
  .tape { grid-template-columns: repeat(2, 1fr); }
  .tape-cell:nth-child(2n) { border-right: none; }
  .tape-cell:nth-child(-n+2) { border-bottom: 1px solid var(--border-soft); }
}

/* ── MODE TABS ─────────────────────────────────────────────── */
.modes {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  width: fit-content;
}
.mode-btn {
  font-family: var(--f-head);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 12px 26px;
  border: 1px solid var(--comp-border);
  background: linear-gradient(180deg, var(--comp-panel-light-90) 0%, var(--comp-panel-deep-95) 100%);
  color: var(--text-muted);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 2px 8px var(--comp-black-40);
}
.mode-btn::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: all 0.25s;
}
.mode-btn:hover { color: var(--text-light); border-color: var(--comp-accent-20); box-shadow: 0 4px 16px var(--comp-black-50), 0 0 12px var(--comp-accent-08); }
.mode-btn:hover::before { background: var(--comp-accent-50); }
.mode-btn.active {
  background: linear-gradient(180deg, var(--comp-panel-lighter) 0%, var(--comp-panel-deep) 60%, var(--comp-panel-darkest) 100%);
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
  box-shadow: 0 4px 16px var(--comp-black-60), 0 0 20px var(--comp-accent-15), 0 0 40px var(--comp-pink-06);
  text-shadow: 0 0 8px var(--comp-accent-30);
}
.mode-btn.active::before {
  background: var(--neon-cyan);
  box-shadow: 0 0 8px var(--neon-cyan);
  animation: pulse-cyan 2s infinite;
}

/* ── PANEL ─────────────────────────────────────────────────── */
.panel { background:var(--comp-panel-bg-75); backdrop-filter:blur(6px); border:1px solid var(--comp-accent-08); border-radius:14px;
  padding: 24px 26px;
  margin-bottom: 18px;
  position: relative;
  animation: fade-in-up 0.5s ease both;
}
.panel-eyebrow {
  font-family: var(--f-head);
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--neon-orange);
  margin-bottom: 6px; text-shadow:0 0 10px var(--comp-warm-30);
}
.panel-title {
  font-family: var(--f-display);
  font-size: 1.35rem;
  font-weight: 700;
  color:var(--comp-text);
  -webkit-text-fill-color:var(--comp-text);
  margin-bottom: 14px;
  position: relative;
  display: inline-block;
}
.panel-title::before {
  content: attr(data-text);
  position: absolute; inset: 0; z-index: -1;
  background: var(--holo); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.8px transparent;
  animation: holo-shimmer 3s linear infinite;
  pointer-events: none;
}
.panel-title::after {
  content: ''; display: block; height: 3px;
  background: var(--holo); background-size: 200% 100%;
  animation: holo-shimmer 4s linear infinite;
  border-radius: 2px; margin-top: 10px;
}
.grad-line { height:3px; background:var(--holo); background-size:200% 100%; animation:holo-shimmer 4s linear infinite; border-radius:2px; margin-bottom:20px; }

/* ── SEARCH FIELD ──────────────────────────────────────────── */
.search-wrap {
  position: relative;
  margin-bottom: 14px;
}
.search-prompt {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  font-family: var(--f-mono);
  font-size: 1rem;
  color: var(--neon-cyan);
  pointer-events: none;
  text-shadow: 0 0 8px var(--comp-accent-40);
  user-select: none;
}
#search {
  width: 100%;
  background: var(--comp-black-35);
  border: 1.5px solid var(--comp-accent-22);
  border-radius: 10px;
  padding: 16px 50px 16px 38px;
  font-family: var(--f-mono);
  font-size: 1rem;
  color: var(--text-light);
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
  letter-spacing: 0.01em;
}
#search::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
#search::placeholder { color: var(--text-dim); }
#search:focus {
  border-color: var(--neon-cyan);
  background: var(--comp-accent-04);
  box-shadow:0 0 0 3px var(--comp-accent-08), 0 0 24px var(--comp-accent-18), 0 0 60px var(--comp-accent-05);
}
.search-cursor {
  position: absolute; right: 50px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 16px;
  background: var(--neon-cyan);
  animation: blink 1.05s steps(1, end) infinite;
  pointer-events: none;
  opacity: 0.55;
  display: none;
}
.search-cursor.show { display: block; }
.clear-btn {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  background: none; border: none;
  color: var(--text-muted);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: none;
  transition: all 0.2s;
  line-height: 1;
}
.clear-btn:hover { color: var(--neon-cyan); background: var(--comp-accent-08); }
.clear-btn.visible { display: block; }

/* ── FILTERS ───────────────────────────────────────────────── */
.filters {
  display: flex; flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-bottom: 4px;
  padding: 6px 10px;
  background: var(--comp-white-015);
  border-radius: 8px;
}
.filter-group {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center;
}
.filter-label {
  font-family: var(--f-head);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink), var(--neon-yellow));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  padding-right: 6px;
  border-right: 1px solid var(--comp-accent-15);
}
.chip {
  font-family: var(--f-head);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 1px solid var(--comp-border-med);
  background: var(--comp-white-03);
  color: var(--text-muted);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}
.chip:hover {
  border-color: var(--comp-accent-30);
  color: var(--text-light);
  background: var(--comp-accent-06);
  box-shadow: 0 0 8px var(--comp-accent-08);
}
.chip.active {
  border-color: var(--neon-cyan);
  background: var(--comp-accent-10);
  color: var(--neon-cyan);
  box-shadow: 0 0 12px var(--comp-accent-20), inset 0 0 16px var(--comp-accent-05);
  text-shadow: 0 0 6px var(--comp-accent-40);
}

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 8px;
  border: 1px solid var(--comp-border-med);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  transition: all 0.25s ease;
  background: var(--comp-white-03);
}
.toggle:hover { border-color: var(--comp-accent-30); background: var(--comp-accent-05); }
.toggle.on {
  border-color: var(--neon-cyan);
  background: var(--comp-accent-08);
  box-shadow: 0 0 12px var(--comp-accent-15);
}
.toggle input {
  appearance: none;
  width: 28px; height: 14px;
  border-radius: 999px;
  background: var(--comp-border-med);
  position: relative;
  cursor: pointer;
  transition: background 0.25s;
  margin: 0;
  flex-shrink: 0;
}
.toggle input::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: all 0.25s ease;
}
.toggle.on input {
  background: linear-gradient(90deg, var(--comp-warm-50), var(--comp-accent-50));
}
.toggle.on input::after {
  background: var(--neon-cyan);
  left: 16px;
  box-shadow: 0 0 10px var(--neon-cyan), 0 0 3px var(--comp-pink-40);
}
.toggle-text {
  font-family: var(--f-head);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-light);
}
.toggle.on .toggle-text { color: var(--neon-cyan); }
.toggle-hint {
  font-size: 0.66rem;
  color: var(--text-dim);
  font-family: var(--f-body);
  font-style: italic;
  letter-spacing: 0.02em;
}
.filter-select {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  padding: 6px 28px 6px 10px;
  background: var(--comp-border-subtle);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--text-light);
  border: 1px solid var(--comp-border-med);
  border-radius: 8px;
  max-width: 200px;
  cursor: pointer;
  transition: all 0.25s ease;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.filter-select:hover { border-color: var(--comp-accent-30); background-color: var(--comp-accent-05); }
.filter-select:focus {
  border-color: transparent;
  outline: none;
  background-color: var(--comp-accent-08);
  box-shadow: 0 0 0 1px var(--neon-cyan), 0 0 12px var(--comp-accent-15);
}
.filter-sel-mobile { display: none; }
.filter-chips { display: contents; }
@media (max-width: 768px) {
  .filter-chips { display: none; }
  .filter-sel-mobile {
    display: inline-block;
    font-family: var(--f-head);
    font-size: 0.72rem;
    padding: 6px 10px;
    background: var(--comp-border-subtle);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    color: var(--text-light);
    border: 1px solid var(--comp-border-med);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ffffff'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 24px;
  }
  .filter-sel-mobile:focus {
    border-color: transparent;
    outline: none;
    box-shadow: 0 0 0 1px var(--neon-cyan), 0 0 12px var(--comp-accent-15);
  }
}

/* ── META LINE ─────────────────────────────────────────────── */
.meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin: 14px 0 12px;
  padding: 10px 14px;
  background: var(--comp-black-30);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  font-family: var(--f-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
}
.meta strong { color: var(--neon-cyan); font-weight: 600; }
.meta-right { display: flex; align-items: center; gap: 10px; }

/* ── RESULT TABLE ──────────────────────────────────────────── */
.results-wrap {
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  overflow: hidden;
}
.result-table.hide-mkt .col-mkt { display: none; }
.result-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  font-family: var(--f-body);
}
.result-table thead { background: var(--comp-black-45); }
.result-table th {
  text-align: left;
  padding: 11px 14px;
  color: var(--text-dim);
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-soft);
  position: sticky; top: 0;
  background:var(--comp-panel-bg-95); backdrop-filter:blur(8px);
  z-index: 1;
  user-select: none;
}
.result-table th.sortable { cursor: pointer; transition: color 0.2s; }
.result-table th.sortable:hover { color: var(--neon-cyan); }
.result-table th .sort-arrow { color: var(--neon-cyan); margin-left: 4px; }
.result-table th.num,
.result-table td.num { text-align: right; }
.result-table tbody tr.row {
  border-bottom:1px solid var(--comp-accent-05);
  transition: background 0.2s, box-shadow 0.2s;
  cursor: pointer;
}
.result-table tbody tr.row:hover { background:var(--comp-accent-06); box-shadow:inset 3px 0 0 var(--comp-accent-40); }
.result-table tbody tr.row.expanded { background:var(--comp-accent-08); box-shadow:inset 3px 0 0 var(--neon-cyan), 0 0 16px var(--comp-accent-04); }
.result-table tbody tr.row:last-child { border-bottom: none; }
.result-table td { padding: 10px 14px; vertical-align: middle; }
.cell-card {
  display: flex; gap: 11px; align-items: center;
  min-width: 240px;
}
.thumb {
  width: 38px; height: 53px;
  flex-shrink: 0;
  border-radius: 5px;
  background:
    linear-gradient(135deg, var(--comp-accent-08), var(--comp-pink-05)),
    var(--comp-border-subtle);
  border: 1px solid var(--comp-accent-12);
  object-fit: cover;
  display: block;
  box-shadow: 0 2px 8px var(--comp-black-40), 0 0 6px var(--comp-accent-06);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.row:hover .thumb { border-color: var(--comp-accent-25); box-shadow: 0 2px 12px var(--comp-black-50), 0 0 10px var(--comp-accent-10); }
.thumb.broken { object-fit: contain; padding: 6px; opacity: 0.5; }
.card-name { color: var(--text-light); font-weight: 600; line-height: 1.25; transition: color 0.2s; }
.row:hover .card-name { color: var(--neon-cyan); text-shadow: 0 0 12px var(--comp-accent-20); }
.card-set  { color: var(--text-muted); font-size: 0.76rem; line-height: 1.3; margin-top: 2px; }
.card-num  { color: var(--text-muted); font-family: var(--f-mono); font-size: 0.78rem; }
.card-variants {
  font-size: 0.66rem;
  color: var(--text-dim);
  font-family: var(--f-mono);
  margin-top: 2px;
}
.card-variants .v-pill {
  display: inline-block;
  padding: 0 5px;
  margin-right: 3px;
  border-radius: 3px;
  background: var(--comp-accent-05);
  color: var(--neon-cyan);
  border: 1px solid var(--comp-accent-18);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
}
.expand-caret {
  display: inline-block;
  margin-left: 8px;
  color: var(--text-dim);
  font-family: var(--f-mono);
  transition: transform 0.2s, color 0.2s;
}
.row.expanded .expand-caret { color: var(--neon-cyan); transform: rotate(90deg); }
.badge {
  display: inline-flex; align-items: center;
  font-family: var(--f-head);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}
.badge-variant   { color: var(--neon-cyan);   border-color: var(--comp-accent-35); background: var(--comp-accent-08); text-shadow: 0 0 6px var(--comp-accent-30); }
.badge-lang      { color: var(--neon-yellow); border-color: var(--comp-gold-35); background: var(--comp-gold-08); text-shadow: 0 0 6px var(--comp-gold-30); }
.price {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  white-space: nowrap;
}
.price-mkt { color:var(--neon-yellow); text-shadow:0 0 10px var(--comp-gold-35), 0 0 20px var(--comp-gold-10); font-weight: 700; }
.price-sub { color: var(--text-dim); font-size: 0.78rem; font-family: var(--f-mono); }
.price-na  { color: var(--text-dim); font-style: italic; font-family: var(--f-body); }
.price-link {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  color: var(--neon-cyan);
  text-decoration: none;
  border-bottom: 1px dashed var(--comp-accent-30);
  padding-bottom: 1px;
  transition: all 0.2s;
  white-space: nowrap;
}
.price-link:hover { color:var(--comp-text); border-bottom-color: var(--neon-cyan); text-shadow: 0 0 8px var(--comp-accent-50); }
.price-link.is-per-cond { color: var(--gain); border-bottom-color: var(--comp-gain-40); }
.price-link.is-per-cond:hover { color:var(--comp-text); border-bottom-color: var(--gain); text-shadow: 0 0 8px var(--comp-gain-50); }
.ext-arrow { font-size: 0.7em; opacity: 0.7; margin-left: 3px; }
.thin-mkt {
  display: inline-block;
  font-size: 0.7em;
  color: var(--warn);
  margin-top: 1px;
  cursor: help;
}
.ship-tag { font-size: 0.6em; color: var(--warn); opacity: 0.8; margin-left: 2px; }
.low-date { color: var(--text-dim); font-size: 0.66rem; display: block; text-align: right; margin-top: 1px; }
.no-data  { font-size: 0.6rem; white-space: nowrap; }

/* Price-gap reliability indicator — small triangle next to listed-low prices */
.gap-flag {
  display: inline-block;
  font-size: 0.55rem;
  margin-left: 3px;
  cursor: help;
  vertical-align: middle;
  line-height: 1;
  position: relative;
}
.gap-flag::after {
  content: '▲';
}
.gap-flag.gap-yellow  { color: var(--neon-yellow); }
.gap-flag.gap-orange  { color: var(--neon-orange); }
.gap-flag.gap-red     { color: var(--neon-red); }
.gap-flag-detail {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  margin-left: 6px;
  cursor: help;
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 1.3;
}
.gap-flag-detail.gap-yellow  { color: var(--neon-yellow); background: var(--comp-gold-08); }
.gap-flag-detail.gap-orange  { color: var(--neon-orange); background: var(--comp-warm-08); }
.gap-flag-detail.gap-red     { color: var(--neon-red);    background: var(--comp-red-08); }

/* sticker price cell — far-right column, click-to-edit override + print button */
.sticker-cell {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  min-width: 78px; flex-wrap: wrap;
}
.sticker-cell .sticker-actions { display: flex; gap: 4px; }
.sticker-price {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--neon-yellow);
  background: var(--comp-gold-06);
  border: 1px solid var(--comp-gold-35);
  border-radius: 5px;
  padding: 4px 9px;
  cursor: text;
  user-select: text;
  transition: all 0.15s;
  white-space: nowrap;
  min-width: 56px;
  text-align: center;
}
.sticker-price:hover { background: var(--comp-gold-14); border-color: var(--neon-yellow); }
.sticker-price.overridden {
  background: var(--comp-warm-10);
  border-color: var(--neon-orange);
  color: var(--neon-orange);
  box-shadow: 0 0 6px var(--comp-warm-25);
}
.sticker-input {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--neon-yellow);
  background:var(--comp-panel-bg-85);
  border: 1px solid var(--neon-yellow);
  border-radius: 5px;
  padding: 4px 8px;
  width: 64px;
  outline: none;
  text-align: center;
}
.sticker-input.overridden {
  border-color: var(--neon-orange);
  color: var(--neon-orange);
  box-shadow: 0 0 6px var(--comp-warm-25);
}
.sticker-input::-webkit-inner-spin-button,
.sticker-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sticker-input { -moz-appearance: textfield; }
.sticker-box {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
}
.stk-step {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  font-weight: 700;
  padding: 3px 5px;
  border: 1px solid var(--comp-gold-35);
  background: var(--comp-gold-06);
  color: var(--neon-yellow);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.stk-step:hover {
  background: var(--comp-gold-14);
  border-color: var(--neon-yellow);
}
.stk-step:active { transform: scale(0.95); }
.print-btn {
  font-family: var(--f-head);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 9px;
  border:1px solid var(--comp-accent-20); background:var(--comp-panel-bg-60); color:var(--comp-text);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.print-btn:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); background: var(--comp-accent-06); }
.cart-add-btn {
  font-size: 0.6rem; padding: 1px 6px;
  border: 1px solid rgba(0,245,255,0.18); background: rgba(0,245,255,0.06); color: var(--neon-cyan);
  border-radius: 3px; cursor: pointer; font-family: var(--f-mono);
  transition: all 0.15s; white-space: nowrap;
}
.cart-add-btn:hover { border-color: var(--neon-cyan); color: #fff; background: rgba(0,245,255,0.15); }
.col-sticker { text-align: right; }

/* tile action bar — sticker + print + CVL */
.mock-actions {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0; margin-left: auto;
}

/* ── ZEBRA LP2844 label (1.2 × 0.85 inch, 203 dpi) ─────────────
   Three-row layout (top → bottom):
     1. Card name (left) + condition (right)
     2. Set · number · foil · print  (full width)
     3. GE logo (left) + big bold price (right) */
.label-print {
  position: absolute;
  left: -9999px; top: -9999px;
  width: 1in; height: 0.5in;
  background: #fff;
  color: #000;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  padding: 0.03in 0.04in;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  line-height: 1.0;
  overflow: hidden;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.label-print .lp-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.04in;
  width: 100%;
}
.label-print .lp-r-bot {
  align-items: center;
  flex: 1 1 auto;
  min-height: 0;
}
.label-print .lp-name {
  font-weight: 800;
  font-size: 7pt;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
.label-print .lp-cond {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 6pt;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.label-print .lp-meta {
  font-weight: 500;
  font-size: 5pt;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.label-print .lp-logo {
  flex: 0 0 auto;
  height: 0.24in;
  max-height: 100%;
  width: auto;
  object-fit: contain;
  /* PNG is pre-grayscaled + contrast-boosted at build time */
}
.label-print .lp-price {
  flex: 0 0 auto;
  font-weight: 900;
  font-size: 16pt;
  line-height: 1.0;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

/* ── ON-PAGE LABEL PREVIEW (modal, not print) ───────────────────
   Shows the label at exact 1×0.5 in (so you can hold a real label up
   to the screen and verify scale) plus a 3× zoom for legibility. */
.label-preview {
  position: fixed;
  bottom: 28px; right: 28px;
  z-index: 9000;
  background:var(--comp-panel-bg-80);
  border: 1px solid var(--neon-cyan);
  border-radius: 12px;
  padding: 14px 16px 12px;
  box-shadow: 0 10px 40px var(--comp-black-60), 0 0 0 1px var(--comp-accent-18) inset;
  backdrop-filter: blur(10px) saturate(140%);
  font-family: var(--f-body);
}
.label-preview[hidden] { display: none; }
.lp-pv-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.lp-pv-title {
  font-family: var(--f-head);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--neon-orange);
}
.lp-pv-close {
  background: transparent;
  border: 1px solid var(--border-mid);
  color: var(--text-muted);
  width: 22px; height: 22px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0;
  transition: all 0.15s;
}
.lp-pv-close:hover { color: var(--neon-cyan); border-color: var(--neon-cyan); }
.lp-pv-body {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 12px;
}
.lp-pv-actual, .lp-pv-zoom {
  display: flex; flex-direction: column; gap: 4px;
}
.lp-pv-label {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.label-pv {
  background: #fff;
  color: #000;
  border: 1px solid var(--comp-label-border);
  font-family: 'Cinzel', 'Helvetica Neue', Arial, serif;
  box-sizing: content-box;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  line-height: 1.0;
  gap: 0.02in;
}
/* Left column: pokeball / logo / QR in equal-height boxes with dividers. */
.label-pv .lp-leftcol {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  flex: 0 0 auto;
  border-right: 1px solid #000;
}
.label-pv .lp-iconbox {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.label-pv .lp-leftcol .lp-logo   { flex: 0 0 auto; image-rendering: pixelated; }
.label-pv .lp-leftcol .lp-geball { flex: 0 0 auto; }
.label-pv .lp-leftcol .lp-qr    { flex: 0 0 auto; image-rendering: pixelated; }
.label-pv .lp-icondiv { width: 100%; height: 1px; background: #000; flex: 0 0 auto; margin: 0.015in 0; }
/* Right column: text info, divider, then cond+price below. */
.label-pv .lp-rightcol {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-align: left;
  padding: 0.01in 0.02in 0.01in 0;
}
.label-pv .lp-toptext {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  justify-content: space-evenly;
  padding-left: 0.03in;
  min-width: 0;
  overflow: hidden;
}
.label-pv .lp-divider {
  height: 1px;
  background: #000;
  flex: 0 0 auto;
  margin: 0.01in 0 0.015in;
}
/* Bottom band: cond | separator | price. */
.label-pv .lp-bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 0 0 auto;
  min-height: 38%;
  width: 100%;
  gap: 0;
}
.label-pv .lp-bottom-sep {
  width: 1px;
  align-self: stretch;
  background: #000;
  flex: 0 0 auto;
}
.label-pv .lp-bottom .lp-cond {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.0;
  padding: 0 0.03in;
  gap: 0;
}
.label-pv .lp-bottom .lp-price {
  flex: 0 0 auto;
  text-align: right;
  padding-left: 0.03in;
}
.label-pv .lp-cond-line { display: block; }
.label-pv .lp-cond-line:first-child { text-align: left; }
.label-pv .lp-cond-line:last-child  { text-align: right; }
.label-pv .lp-cond-line:only-child  { text-align: center; }
.label-pv .lp-name {
  font-family: 'Cinzel', 'Helvetica Neue', Arial, serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 0 auto;       /* don't grow in column layout */
  min-width: 0;
}
.label-pv .lp-set,
.label-pv .lp-num,
.label-pv .lp-pf,
.label-pv .lp-rar,
.label-pv .lp-cond {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.0;
  flex: 0 0 auto;
}
.label-pv .lp-set  {
  font-family: 'Cinzel', 'Helvetica Neue', Arial, serif;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.label-pv .lp-num  { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 600; }
.label-pv .lp-print {
  font-family: 'Cinzel', 'Helvetica Neue', Arial, serif;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 0 auto;
}
.label-pv .lp-print:empty { display: none; }
.label-pv .lp-pf   {
  font-family: 'Cinzel', 'Helvetica Neue', Arial, serif;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.label-pv .lp-pf:empty { display: none; }
.label-pv .lp-rar  {
  font-family: 'Cinzel', 'Helvetica Neue', Arial, serif;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.label-pv .lp-rar:empty { display: none; }
.label-pv .lp-pokeball {
  display: inline-block;
  vertical-align: middle;
  width: 0.8em;
  height: 0.8em;
  margin: 0 0.1em;
}
.label-pv .lp-cond {
  font-family: 'Cinzel', 'Helvetica Neue', Arial, serif;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: normal;
  text-align: center;
}
.label-pv .lp-price {
  font-family: 'Cinzel', 'Helvetica Neue', Arial, serif;
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.label-pv .lp-logo {
  flex: 0 0 auto;
  width: auto;
  object-fit: contain;
  filter: invert(1);
}
/* 1× — exact physical scale: 1 × 0.5 in. */
.label-pv-1x        { width: 1in; height: 0.5in; padding: 0.02in 0.02in 0.02in 0; }
.label-pv-1x .lp-leftcol { width: 0.27in; padding: 0.01in 0.02in 0.02in 0; }
.label-pv-1x .lp-geball { width: 0.23in; height: 0.23in; }
.label-pv-1x .lp-qr    { width: 0.23in; height: 0.23in; }
.label-pv-1x .lp-name  { font-size: 5.5pt; }
.label-pv-1x .lp-set   { font-size: 5pt; }
.label-pv-1x .lp-print { font-size: 4.5pt; }
.label-pv-1x .lp-pf    { font-size: 3.5pt; }
.label-pv-1x .lp-rar   { font-size: 3.5pt; }
.label-pv-1x .lp-cond  { font-size: 7pt; }
.label-pv-1x .lp-price { font-size: 10pt; }
/* 3× — for legibility */
.label-pv-3x        { width: 3in; height: 1.5in; padding: 0.06in 0.06in 0.06in 0; }
.label-pv-3x .lp-leftcol { width: 0.81in; padding: 0.03in 0.06in 0.06in 0; }
.label-pv-3x .lp-geball { width: 0.69in; height: 0.69in; }
.label-pv-3x .lp-qr    { width: 0.69in; height: 0.69in; }
.label-pv-3x .lp-name  { font-size: 16.5pt; }
.label-pv-3x .lp-set   { font-size: 15pt; }
.label-pv-3x .lp-print { font-size: 13.5pt; }
.label-pv-3x .lp-pf    { font-size: 10.5pt; }
.label-pv-3x .lp-rar   { font-size: 10.5pt; }
.label-pv-3x .lp-cond  { font-size: 21pt; }
.label-pv-3x .lp-price { font-size: 30pt; }

.lp-pv-actions { display: flex; gap: 8px; }
.lp-pv-print {
  font-size: 0.7rem !important;
  padding: 8px 14px !important;
}
.lp-pv-cancel {
  font-size: 0.7rem !important;
  padding: 8px 14px !important;
}
@media print {
  .label-preview { display: none !important; }
}
/* Tweakable in DevTools (Elements → :root → Styles) if a print run still
   has a stubborn margin. Negative values shift the label left/up off the
   default printable origin. Most LP2844 setups need -0.04 to -0.08in. */


:root {
  --label-nudge-x: 0in;
  --label-nudge-y: 0in;
}


/* ── SET LABELS TAB ───────────────────────────────────── */
.sl-controls {
  display: flex; gap: 12px; align-items: center;
  margin-bottom: 16px; flex-wrap: wrap;
}
.sl-search {
  font-family: var(--f-body); font-size: 0.82rem;
  background: var(--comp-panel-deep-70); border: 1px solid var(--comp-border-med);
  border-radius: 8px; padding: 8px 14px; color: var(--text-light);
  flex: 1 1 200px; outline: none; transition: border-color 0.3s;
}
.sl-search:focus { border-color: var(--neon-cyan); }
.sl-search::placeholder { color: var(--text-dim); }
.sl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.sl-series-hdr {
  grid-column: 1 / -1;
  font-family: var(--f-head); font-size: 0.72rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--neon-orange); text-shadow: 0 0 10px var(--comp-warm-30);
  padding: 10px 0 2px; border-bottom: 1px solid var(--comp-warm-15);
  margin-top: 4px;
}
.sl-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 8px 10px;
  background: linear-gradient(180deg, var(--comp-panel-light-80) 0%, var(--comp-panel-deep-90) 100%);
  border: 1px solid var(--comp-border-soft); border-radius: 10px;
  cursor: pointer; transition: all 0.25s; position: relative;
}
.sl-card:hover {
  border-color: var(--comp-accent-25);
  box-shadow: 0 4px 20px var(--comp-black-50), 0 0 12px var(--comp-accent-08);
  transform: translateY(-2px);
}
.sl-icon {
  width: 48px; height: 48px; object-fit: contain;
  filter: invert(1) drop-shadow(0 0 4px var(--comp-accent-30));
}
.sl-name {
  font-family: var(--f-head); font-size: 0.66rem; font-weight: 700;
  color: var(--text-light); text-align: center; line-height: 1.2;
  min-height: 2.4em; display: flex; align-items: center;
}
.sl-edition {
  font-family: var(--f-body); font-size: 0.56rem; font-weight: 600;
  padding: 2px 8px; border-radius: 4px; letter-spacing: 0.06em;
}
.sl-edition.ed-first {
  background: var(--comp-gold-15); color: var(--neon-yellow);
  border: 1px solid var(--comp-gold-30);
}
.sl-edition.ed-unlim {
  background: var(--comp-accent-08); color: var(--text-muted);
  border: 1px solid var(--comp-accent-15);
}
.sl-print-btn {
  font-size: 0.66rem; padding: 4px 12px;
  background: var(--comp-accent-10); border: 1px solid var(--comp-accent-20);
  border-radius: 6px; color: var(--neon-cyan); cursor: pointer;
  transition: all 0.2s; font-family: var(--f-body); font-weight: 600;
}
.sl-print-btn:hover {
  background: var(--comp-accent-20); border-color: var(--neon-cyan);
}
.sl-loading {
  grid-column: 1 / -1; text-align: center; padding: 40px 20px;
  color: var(--text-muted); font-family: var(--f-body);
}
/* set label preview overlay */
.sl-preview {
  position: fixed; bottom: 20px; right: 20px; z-index: 9000;
  background: linear-gradient(135deg, var(--comp-panel-mid-98) 0%, var(--comp-panel-deep-99) 100%);
  border: 1px solid var(--neon-cyan); border-radius: 14px; padding: 16px;
  box-shadow: 0 8px 40px var(--comp-black-70), 0 0 30px var(--comp-accent-10);
  min-width: 340px; animation: fade-in-up 0.3s ease both;
}
.sl-preview[hidden] { display: none; }
.sl-pv-head {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
}
.sl-pv-title {
  font-family: var(--f-head); font-size: 0.7rem;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--neon-cyan);
}
.sl-pv-close {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--comp-border-bright); background: transparent;
  color: var(--text-muted); cursor: pointer; font-size: 0.65rem;
  display: flex; align-items: center; justify-content: center;
}
.sl-pv-close:hover { color: var(--neon-cyan); border-color: var(--neon-cyan); }
.sl-pv-body {
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
  margin-bottom: 14px;
}
.sl-pv-section { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sl-pv-section-label {
  font-family: var(--f-head); font-size: 0.52rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim);
}
.sl-pv-box {
  background: #fff; border: 1px solid var(--comp-border-bright);
  border-radius: 3px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.sl-pv-box img { width: 100%; height: 100%; object-fit: fill; image-rendering: pixelated; }
.sl-pv-1x { width: 1in; height: 0.5in; }
.sl-pv-3x { width: 3in; height: 1.5in; }
.sl-pv-actions { display: flex; gap: 10px; justify-content: center; }

@media print {
  /* Page slightly oversized so any driver-added non-printable margin still
     leaves room for the full 1×0.5 label content. */
  @page { size: 1.04in 0.54in; margin: 0; }
  html, body {
    background: #fff !important;
    color: #000 !important;
    width: 1.04in !important;
    height: 0.54in !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  /* Body's ::before / ::after are fixed-position galaxy gradients +
     scanlines covering the whole viewport. They render OVER the label
     (and aren't matched by `body > *` since pseudo-elements aren't
     children). Without this they print as a solid near-black box
     filling the label. */
  html::before, html::after,
  body::before, body::after,
  .stars::before, .stars::after,
  .pokeballs::before, .pokeballs::after {
    display: none !important;
    content: none !important;
    background: none !important;
  }
  /* Collapse every other body child so the page is exactly 1×0.5″ tall
     (otherwise the browser paginates the comp page, getting "30+ blank
     pages"). `display: none` removes them from layout entirely. */
  body > * { display: none !important; }

  /* Pin the label to the printer's origin. position: fixed honors
     left/top — `position: static` (which I had before) makes them
     no-ops, so the label was inheriting page-level offsets and
     printing with that mystery left margin. */
  .label-print {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    position: fixed !important;
    visibility: visible !important;
    opacity: 1 !important;
    left: var(--label-nudge-x) !important;
    top:  var(--label-nudge-y) !important;
    right: auto !important;
    bottom: auto !important;
    width: 1in !important; height: 0.5in !important;
    margin: 0 !important;
    padding: 0.04in 0.05in !important;
    box-sizing: border-box !important;
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    page-break-inside: avoid !important;
    page-break-after: avoid !important;
    page-break-before: avoid !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    transform: none !important;
  }
  .label-print * {
    visibility: visible !important;
    opacity: 1 !important;
    color: #000 !important;
    background: transparent !important;
    animation: none !important;
    transition: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  /* Re-apply three-row layout after the * reset zeroed everything.
     Rows: 1) name + cond, 2) meta full-width, 3) logo + price. */
  .label-print .lp-row {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 0.04in !important;
    width: 100% !important;
  }
  .label-print .lp-r-bot {
    align-items: center !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
  .label-print .lp-name {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-weight: 800 !important;
    font-size: 7pt !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .label-print .lp-cond {
    flex: 0 0 auto !important;
    font-weight: 700 !important;
    font-size: 6pt !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
  }
  .label-print .lp-meta {
    width: 100% !important;
    font-weight: 500 !important;
    font-size: 5pt !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .label-print .lp-logo {
    flex: 0 0 auto !important;
    height: 0.24in !important;
    max-height: 0.24in !important;
    width: auto !important;
    object-fit: contain !important;
    background: transparent !important;
  }
  .label-print .lp-price {
    flex: 0 0 auto !important;
    font-weight: 900 !important;
    font-size: 16pt !important;
    line-height: 1.0 !important;
    letter-spacing: -0.04em !important;
    white-space: nowrap !important;
  }
}

/* compact "last 3 sold" cell */
.last-sold {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 1px;
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.last-sold li {
  display: flex; align-items: baseline; justify-content: flex-end; gap: 6px;
  font-size: 0.75rem;
  white-space: nowrap;
}
.ls-price { color: var(--text-light); font-weight: 500; }
.ls-link  { color: var(--neon-cyan); text-decoration: none; border-bottom: 1px dashed var(--comp-accent-25); }
.ls-link:hover { color:var(--comp-text); border-bottom-color: var(--neon-cyan); }
.ls-d     { color: var(--text-dim); font-size: 0.66rem; min-width: 38px; text-align: right; }
.ls-graded {
  font-size: 0.55rem;
  font-weight: 600;
  padding: 0 4px;
  border-radius: 3px;
  background: var(--comp-gold-10);
  color: var(--neon-yellow);
  border: 1px solid var(--comp-gold-30);
  margin-right: 3px;
}
.ls-empty { color: var(--text-dim); font-style: italic; font-size: 0.7rem; font-family: var(--f-body); }

/* per-row picker (radio pills on desktop, native select fallback on mobile) */
.row-overrides {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 5px;
  align-items: center;
}
.row-overrides-label {
  font-family: var(--f-head);
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.row-pickbox { display: inline-flex; align-items: center; }
.row-pills {
  display: inline-flex; gap: 1px;
  padding: 1px;
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  background: var(--comp-black-32);
}
.row-pill {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  font-weight: 500;
  padding: 2px 7px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: all 0.12s;
  white-space: nowrap;
}
.row-pill:hover { color: var(--text-light); background: var(--comp-border-subtle); }
.row-pill.on {
  color: var(--neon-cyan);
  background: var(--comp-accent-10);
  box-shadow: 0 0 4px var(--comp-accent-20) inset;
}
.row-pill.on.overridden {
  color: var(--neon-orange);
  background: var(--comp-warm-10);
  box-shadow: 0 0 6px var(--comp-warm-25) inset;
}
.row-sel {
  display: none; /* hidden on desktop */
  font-family: var(--f-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 2px 18px 2px 7px;
  border: 1px solid var(--border-mid);
  background:
    var(--comp-black-32)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4 L5 7 L8 4' fill='none' stroke='%238ab4c9' stroke-width='1.4' stroke-linecap='round'/></svg>")
    no-repeat right 4px center;
  background-size: 8px 8px;
  color: var(--text-muted);
  border-radius: 4px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  margin-top: 0;
}
.row-sel.overridden {
  border-color: var(--neon-orange);
  color: var(--neon-orange);
  background-color: var(--comp-warm-07);
}
@media (max-width: 768px) {
  .row-pills { display: none; }
  .row-sel { display: inline-block; }
}

/* load-more bar */
.load-more-bar {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 16px;
  border-top: 1px solid var(--border-soft);
  background: var(--comp-black-25);
}
.load-more-btn {
  font-family: var(--f-head);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 22px;
  background: var(--comp-accent-06);
  color: var(--neon-cyan);
  border: 1px solid var(--neon-cyan);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}
.load-more-btn:hover { background: var(--comp-accent-14); box-shadow: 0 0 14px var(--comp-accent-30); }
.load-more-meta {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
}

@media (max-width: 768px) {
  .col-mkt { display: none; }
  .results-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .result-table { min-width: 700px; }
  .result-table th, .result-table td { padding: 9px 10px; }
  .thumb { width: 32px; height: 45px; }
  .cell-card { min-width: 0; }
}

/* ── VARIANT CARD IMAGE + OVERLAY ──────────────────────────── */
.x-card-wrap {
  position: relative;
  width: 180px;
  margin: 0 auto 14px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 20px var(--comp-black-50);
}
.x-card-wrap img.x-card-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.x-card-wrap img.x-card-img.broken { display: none; }
.x-card-overlay {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
  mix-blend-mode: overlay;
}
.x-card-wrap[data-effect="holo"] .x-card-overlay {
  opacity: 0.45;
  background: linear-gradient(135deg,
    var(--comp-warm-30) 0%, var(--comp-pink-30) 20%,
    var(--comp-violet-30) 40%, var(--comp-holo-blue-30) 60%,
    var(--comp-holo-green-30) 80%, var(--comp-gold-30) 100%);
  background-size: 300% 300%;
  animation: holo-card-shimmer 3s ease-in-out infinite;
}
.x-card-wrap[data-effect="reverse"] .x-card-overlay {
  opacity: 0.55;
  background:
    radial-gradient(ellipse at center, transparent 30%, var(--comp-violet-25) 50%, transparent 70%),
    linear-gradient(45deg,
      var(--comp-accent-25) 0%, var(--comp-pink-25) 25%,
      var(--comp-gold-25) 50%, var(--comp-violet-25) 75%,
      var(--comp-accent-25) 100%);
  background-size: 100% 100%, 400% 400%;
  animation: holo-card-shimmer 2.5s ease-in-out infinite;
}
.x-card-wrap[data-effect="1st"] .x-card-overlay {
  opacity: 1;
  mix-blend-mode: normal;
  background: none;
}
.x-card-wrap[data-effect="1st"]::after {
  content: '1ST';
  position: absolute;
  top: 8px; left: 8px;
  font-family: var(--f-head);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: var(--pkm-yellow);
  background: var(--comp-black-70);
  border: 1px solid var(--pkm-yellow);
  padding: 2px 6px;
  border-radius: 4px;
  text-shadow: 0 0 6px var(--pkm-yellow);
}
.x-variant-badge {
  position: absolute;
  bottom: 8px; right: 8px;
  font-family: var(--f-mono);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--comp-text);
  background: var(--comp-black-65);
  backdrop-filter: blur(4px);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--comp-border-bright);
}
@keyframes holo-card-shimmer {
  0%   { background-position: 0% 0%, 0% 0%; }
  50%  { background-position: 100% 100%, 100% 100%; }
  100% { background-position: 0% 0%, 0% 0%; }
}

/* ── EXPANDED ROW ──────────────────────────────────────────── */
.expand-row td {
  padding: 0 !important;
  background: var(--comp-panel-deep-alt-60);
  border-bottom: 1px solid var(--comp-accent-08);
}
.expand-pane {
  padding: 24px 28px 28px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
  position: relative;
  animation: fade-in-up 0.3s ease both;
  background: linear-gradient(180deg, var(--comp-accent-02) 0%, transparent 40%);
}
.expand-pane::before {
  content: '';
  position: absolute; left: 24px; right: 24px; top: 0; height: 2px;
  background: var(--holo);
  background-size: 200% 100%;
  animation: holo-shimmer 5s linear infinite;
  opacity: 0.5;
  border-radius: 1px;
  box-shadow: 0 0 12px var(--comp-accent-15);
}
@media (max-width: 920px) {
  .expand-pane { grid-template-columns: 1fr; }
}

/* variant cycler */
.variant-cycler {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 14px;
  padding: 8px;
  background: var(--comp-black-35);
  border: 1px solid var(--comp-accent-08);
  border-radius: 10px;
  backdrop-filter: blur(6px);
}
.v-tab {
  font-family: var(--f-head);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 14px;
  border: 1px solid var(--border-mid);
  background: transparent;
  color: var(--text-muted);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex; align-items: center; gap: 7px;
}
.v-tab:hover { color: var(--text-light); border-color: var(--neon-cyan-soft); }
.v-tab.on {
  color: var(--neon-cyan);
  border-color: var(--neon-cyan);
  background: var(--comp-accent-08);
  box-shadow: 0 0 12px var(--comp-accent-18);
}
.v-tab .v-mkt {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--neon-yellow);
}

.x-section {
  display: flex; flex-direction: column;
  min-width: 0;
}
.x-section-title {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--f-head);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color:var(--neon-orange); text-shadow:0 0 8px var(--comp-warm-30);
  margin-bottom: 10px;
  gap: 10px;
}
.x-section-title .right {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--text-dim);
}

/* stat blocks */
.x-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.x-stat {
  background: var(--comp-black-30);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 10px 12px;
}
.x-stat-label {
  font-family: var(--f-head);
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 3px;
}
.x-stat-value {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-light);
}
.x-stat.gold .x-stat-value  { color: var(--neon-yellow); }
.x-stat.cyan .x-stat-value  { color: var(--neon-cyan); }

/* lowest-sold subtabs */
.cond-tabs {
  display: flex; gap: 2px;
  background: var(--comp-black-28);
  padding: 2px;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  margin-bottom: 6px;
  overflow: hidden;
  width: fit-content;
}
.cond-tab {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 600;
  padding: 4px 9px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.03em;
}
.cond-tab:hover { color: var(--text-light); }
.cond-tab.on {
  color: var(--neon-cyan);
  background: var(--comp-accent-10);
  box-shadow: 0 0 8px var(--comp-accent-20) inset;
}
.lowest-grid {
  display: flex; flex-direction: column;
  background: var(--comp-black-30);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
}

.x-links {
  display: flex; flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.x-link {
  font-family: var(--f-head);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 12px;
  border: 1px solid var(--border-mid);
  border-radius: 5px;
  background: transparent;
  color: var(--text-muted);
  text-decoration: none;
  transition: all 0.2s;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
}
.x-link:hover {
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
  background: var(--comp-accent-06);
  box-shadow: 0 0 14px var(--comp-accent-20);
}
.x-link.tcg:hover  { border-color: var(--comp-tcg); color: var(--comp-tcg); box-shadow: 0 0 14px var(--comp-tcg-25); background: var(--comp-tcg-08); }
.x-link.ebay:hover { border-color: var(--comp-ebay); color: var(--comp-ebay); box-shadow: 0 0 14px var(--comp-ebay-25); background: var(--comp-ebay-06); }
.x-link.psa:hover  { border-color: var(--pkm-red); color: var(--comp-psa-text); box-shadow: 0 0 14px var(--comp-psa-25); background: var(--comp-psa-07); }
.x-link.add {
  border-color: var(--neon-orange);
  color: var(--neon-orange);
  background: var(--comp-warm-06);
}
.x-link.add:hover {
  background: linear-gradient(135deg, var(--neon-orange), var(--neon-yellow));
  color: var(--navy);
  box-shadow: 0 0 16px var(--comp-warm-40);
  border-color: var(--neon-orange);
}
.x-link.add.added { background: var(--comp-gain-12); color: var(--gain); border-color: var(--gain); }

/* sales sections */
.x-sales {
  display: flex; flex-direction: column;
  background: var(--comp-black-30);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  overflow: hidden;
  min-height: 220px;
  position: relative;
}
.x-sales-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px 8px;
  border-bottom: 1px solid var(--border-soft);
  gap: 10px;
  flex-wrap: wrap;
}
.x-sales-source {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--f-head);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.x-sales-source .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-dim);
  flex-shrink: 0;
}
.x-sales-source.tcg .dot  { background: var(--comp-tcg); box-shadow: 0 0 6px var(--comp-tcg); }
.x-sales-source.ebay .dot { background: var(--comp-ebay); box-shadow: 0 0 6px var(--comp-ebay); }
.x-sales-source { color: var(--text-light); }

.cond-filter {
  display: flex; gap: 4px;
  flex-wrap: wrap;
}
.cond-pill {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 500;
  padding: 3px 8px;
  border: 1px solid var(--border-mid);
  background: transparent;
  color: var(--text-muted);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.04em;
}
.cond-pill:hover { color: var(--text-light); border-color: var(--neon-cyan-soft); }
.cond-pill.on {
  color: var(--neon-cyan);
  border-color: var(--neon-cyan);
  background: var(--comp-accent-08);
}

.sales-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.sales-list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px dashed var(--comp-border-subtle);
  align-items: center;
  font-family: var(--f-mono);
  font-size: 0.78rem;
}
.sales-list li:last-child { border-bottom: none; }
.sale-cond {
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  white-space: nowrap;
}
.sale-date {
  color: var(--text-muted);
  font-size: 0.72rem;
  white-space: nowrap;
}
.sale-price {
  color: var(--neon-yellow);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.sale-extra {
  font-size: 0.62rem;
  color: var(--text-dim);
  font-style: italic;
  margin-left: 4px;
}
.sale-graded {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--comp-gold-10);
  color: var(--neon-yellow);
  border: 1px solid var(--comp-gold-30);
  margin-right: 5px;
  letter-spacing: 0.04em;
}
.sales-empty {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 20px 16px;
  text-align: center;
}
.sales-empty .glyph {
  font-size: 1.4rem;
  color: var(--neon-cyan);
  opacity: 0.5;
  margin-bottom: 8px;
  font-family: var(--f-display);
}
.sales-empty .label {
  font-family: var(--f-head);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--neon-orange);
  margin-bottom: 5px;
}
.sales-empty .sub {
  font-family: var(--f-body);
  font-size: 0.78rem;
  color: var(--text-dim);
  line-height: 1.5;
  max-width: 220px;
}

/* "other prints" thumbnail row */
.prints-row {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 10px;
}
.print-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  padding: 5px 9px;
  border: 1px solid var(--border-mid);
  background: var(--comp-black-32);
  color: var(--text-muted);
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.print-pill:hover { color: var(--neon-cyan); border-color: var(--neon-cyan-soft); }
.print-pill img { width: 18px; height: 25px; border-radius: 2px; object-fit: cover; }

/* ── STATES ────────────────────────────────────────────────── */
.state {
  text-align: center;
  padding: 70px 20px;
  color: var(--text-muted);
  font-size: 0.92rem;
  font-family: var(--f-mono);
  letter-spacing: 0.04em;
}
.state .glyph {
  font-size: 2.4rem;
  color: var(--neon-cyan);
  display: block;
  margin-bottom: 14px;
  opacity: 0.5;
  letter-spacing: 0;
  font-family: var(--f-display);
}
.state em { color: var(--neon-cyan); font-style: normal; }
.spinner {
  width: 36px; height: 36px;
  border: 2.5px solid var(--comp-accent-18);
  border-top-color: var(--neon-cyan);
  border-right-color: var(--comp-accent-50);
  border-radius: 50%;
  animation: spin 0.85s linear infinite;
  margin: 0 auto 14px;
}

.hint {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  padding: 22px;
}
.hint-card {
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 16px 18px;
  background: var(--comp-black-28);
  transition: all 0.25s;
}
.hint-card:hover { border-color: var(--neon-cyan-soft); transform: translateY(-2px); }
.hint-eyebrow {
  font-family: var(--f-head);
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--neon-orange);
  margin-bottom: 8px;
}
.hint-body { font-size: 0.85rem; color: var(--text-muted); line-height: 1.55; }
.hint-body code {
  font-family: var(--f-mono);
  background: var(--comp-accent-08);
  border: 1px solid var(--comp-accent-18);
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--neon-cyan);
  font-size: 0.82rem;
  white-space: nowrap;
  display: inline-block;
  margin: 1px 1px;
}

/* ── COLLECTION (was Folio) ────────────────────────────────── */
.coll-hero {
  position: relative;
  padding: 30px 28px 28px;
  border: 1px solid var(--comp-accent-18);
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 20% 0%, var(--comp-accent-10) 0%, transparent 60%),
    radial-gradient(ellipse at 90% 100%, var(--comp-warm-08) 0%, transparent 60%),
    var(--comp-black-38);
  margin-bottom: 18px;
  overflow: hidden;
}
.coll-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg,
      var(--comp-accent-025) 0px,
      var(--comp-accent-025) 1px,
      transparent 1px,
      transparent 4px);
  pointer-events: none;
  opacity: 0.7;
}
.coll-hero::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--holo);
  background-size: 200% 100%;
  animation: holo-shimmer 5s linear infinite;
}
.coll-hero-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 30px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.coll-hero-eyebrow {
  font-family: var(--f-head);
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--neon-orange);
  margin-bottom: 8px;
}
.coll-hero-total {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: clamp(2.2rem, 6vw, 4rem);
  line-height: 1.0;
  background: var(--holo);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: holo-shimmer 8s linear infinite;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}
.coll-hero-currency { font-size: 0.5em; opacity: 0.7; vertical-align: top; margin-right: 6px; }
.coll-hero-meta {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-top: 12px;
  font-family: var(--f-mono);
  font-size: 0.85rem;
  color: var(--text-muted);
}
.coll-hero-meta span strong { color: var(--text-light); font-weight: 600; }
.coll-hero-stat {
  display: flex; flex-direction: column; gap: 6px;
  padding-left: 22px;
  border-left: 1px solid var(--border-soft);
  min-width: 0;
}
.coll-hero-stat-label {
  font-family: var(--f-head);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.coll-hero-stat-value {
  font-family: var(--f-mono);
  font-size: 1.05rem;
  color: var(--text-light);
  font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.coll-hero-stat-value.dim { color: var(--text-muted); font-size: 0.9rem; }
@media (max-width: 768px) {
  .coll-hero-grid { grid-template-columns: 1fr; gap: 18px; }
  .coll-hero-stat { padding-left: 0; border-left: none; border-top: 1px solid var(--border-soft); padding-top: 14px; }
}

/* sign-in gate */
.gate {
  text-align: center;
  padding: 50px 20px;
}
.gate h3 {
  font-family: var(--f-display);
  font-size: 1.4rem;
  background: var(--holo);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: holo-shimmer 6s linear infinite;
  margin-bottom: 8px;
}
.gate p { color: var(--text-muted); font-size: 0.9rem; max-width: 420px; margin: 8px auto 24px; line-height: 1.6; }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-ghost {
  font-family: var(--f-head);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 11px 18px;
  background: transparent;
  color: var(--neon-cyan);
  border: 1px solid var(--neon-cyan);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.25s;
  text-decoration: none;
  display: inline-block;
}
.btn-ghost:hover { background: var(--comp-accent-10); box-shadow: 0 0 18px var(--comp-accent-25); }

/* folder strip */
.folder-strip {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin: 0 0 14px;
}
.folder-pill {
  font-family: var(--f-head);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 14px;
  border:1px solid var(--comp-border-med); background:var(--comp-panel-bg-50); color:var(--text-muted);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex; align-items: center; gap: 8px;
}
.folder-pill:hover { color: var(--text-light); border-color: var(--neon-cyan-soft); }
.folder-pill.on {
  color: var(--neon-cyan);
  border-color: var(--neon-cyan);
  background: var(--comp-accent-08);
}
.folder-pill .count {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}
.folder-pill.on .count { color: var(--neon-cyan); }
.folder-pill .val {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  color: var(--neon-yellow);
}
.folder-add {
  font-family: var(--f-head);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px dashed var(--border-mid);
  background: transparent;
  color: var(--text-dim);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s;
}
.folder-add:hover { color: var(--neon-orange); border-color: var(--neon-orange); }

.coll-controls {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin: 0 0 14px;
}
.coll-controls select, .coll-controls input {
  background:var(--comp-panel-bg-80);
  border:1px solid var(--comp-accent-15);
  border-radius: 6px;
  padding: 8px 12px;
  color: var(--text-light);
  font-family: var(--f-mono);
  font-size: 0.82rem;
  outline: none;
  transition: border-color 0.2s;
}
.coll-controls select:focus, .coll-controls input:focus { border-color: var(--neon-cyan); }
.coll-controls .label {
  font-family: var(--f-head);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}


/* simple modal */
.modal-back {
  position: fixed; inset: 0;
  background: var(--comp-backdrop);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center; justify-content: center;
  z-index: 500;
  padding: 20px;
}
.modal-back.open { display: flex; }
.modal-card {
  background:var(--comp-panel-bg-95); backdrop-filter:blur(10px);
  border: 1px solid var(--comp-accent-28);
  border-radius: 14px;
  padding: 24px 26px;
  width: 100%; max-width: 420px;
  position: relative;
  box-shadow: 0 10px 40px var(--comp-black-70), 0 0 0 1px var(--comp-accent-08) inset;
  animation: fade-in-up 0.25s ease both;
}
.modal-card h3 {
  font-family: var(--f-display);
  font-size: 1.3rem;
  margin-bottom: 16px;
  background: linear-gradient(90deg, var(--comp-text), var(--neon-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.modal-card label {
  display: block;
  font-family: var(--f-head);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.modal-card input, .modal-card select {
  width: 100%;
  background:var(--comp-panel-bg-80);
  border:1px solid var(--comp-accent-15);
  border-radius: 6px;
  padding: 10px 12px;
  color: var(--text-light);
  font-family: var(--f-mono);
  font-size: 0.9rem;
  outline: none;
  margin-bottom: 14px;
}
.modal-card input:focus, .modal-card select:focus { border-color: var(--neon-cyan); }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* card value list nav button */
.nav-cart-btn {
  position: relative;
  background: none; border: 1px solid var(--border-mid);
  border-radius: 999px; padding: 6px 12px;
  color: var(--text-light); cursor: pointer;
  font-family: var(--f-head); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  transition: border-color 0.2s, box-shadow 0.2s;
  display: none;
}
.nav-cart-btn:hover { border-color: var(--neon-cyan); box-shadow: 0 0 14px var(--comp-accent-25); }
.nav-cart-badge {
  position: absolute; top: -5px; right: -5px;
  background: var(--neon-orange); color:var(--comp-text); font-size: 0.55rem;
  font-weight: 700; min-width: 16px; height: 16px; line-height: 16px;
  text-align: center; border-radius: 99px; padding: 0 4px;
  display: none;
}

/* card value list modal */
.cart-modal .modal-card { max-width: 560px; max-height: 80vh; overflow-y: auto; }
.cart-modal .modal-card h3 { margin-bottom: 12px; }
.cart-list { display: flex; flex-direction: column; gap: 8px; }
.cart-group-title {
  font-family: var(--f-head); font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim);
  margin: 10px 0 4px; padding-bottom: 4px;
  border-bottom: 1px solid var(--border-soft);
}
.cart-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  background:var(--comp-panel-bg-70); backdrop-filter:blur(4px); border:1px solid var(--comp-accent-08);
  transition: border-color 0.2s;
}
.cart-row:hover { border-color: var(--neon-cyan); }
.cart-row-info { flex: 1; min-width: 0; }
.cart-row-name {
  font-family: var(--f-head); font-size: 0.82rem; font-weight: 600;
  color: var(--text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cart-row-meta {
  font-family: var(--f-mono); font-size: 0.62rem; color: var(--text-muted);
}
.cart-status {
  font-family: var(--f-head); font-size: 0.52rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 99px;
}
.cart-status.active   { background: var(--comp-accent-12); color: var(--neon-cyan); }
.cart-status.inactive { background: var(--comp-gold-12); color: var(--neon-yellow); }
.cart-status.sold     { background: var(--comp-gain-12); color: var(--gain); }
.cart-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.cart-row-actions button {
  font-family: var(--f-head); font-size: 0.56rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border-mid); background: transparent;
  color: var(--text-muted); transition: all 0.15s;
}
.cart-row-actions button:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); }
.cart-row-actions button.danger:hover { border-color: var(--neon-red); color: var(--neon-red); }
.cart-new-btn {
  font-family: var(--f-head); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 8px 16px; border-radius: 8px; cursor: pointer;
  background:linear-gradient(180deg, var(--comp-panel-lighter) 0%, var(--comp-panel-deep) 60%, var(--comp-panel-darkest) 100%); color:var(--comp-text); border:0.5px solid; border-image:var(--holo) 1; border: none; margin-bottom: 10px;
  transition: box-shadow 0.2s;
}
.cart-new-btn:hover { box-shadow: 0 4px 20px var(--comp-warm-50); }

/* value list detail */
.cart-detail-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.cart-detail-header .back-btn {
  background: none; border:1px solid var(--comp-accent-20); border-radius: 6px;
  color: var(--text-muted); cursor: pointer; padding: 4px 10px;
  font-family: var(--f-head); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.cart-detail-header .back-btn:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); }
.cart-detail-name {
  font-family: var(--f-display); font-size: 1.1rem; font-weight: 700;
  color: var(--text-light); flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.cart-detail-name:hover { color: var(--neon-cyan); }
.cart-detail-meta {
  font-family: var(--f-mono); font-size: 0.62rem; color: var(--text-muted);
  margin-bottom: 10px;
}
.cart-items { display: flex; flex-direction: column; gap: 6px; }
.cart-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 6px;
  background: var(--card-bg); border: 1px solid var(--border-soft);
}
.cart-item-thumb {
  width: 44px; height: 44px; border-radius: 4px;
  object-fit: cover; flex-shrink: 0; background: var(--comp-black-30);
}
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name {
  font-family: var(--f-head); font-size: 0.74rem; font-weight: 600;
  color: var(--text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cart-item-sub {
  font-family: var(--f-mono); font-size: 0.58rem; color: var(--text-muted);
}
.cart-item-price {
  font-family: var(--f-mono); font-size: 0.82rem; font-weight: 700;
  color: var(--neon-cyan); flex-shrink: 0;
}
.cart-item-remove {
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  font-size: 0.9rem; padding: 2px 6px; border-radius: 4px;
  transition: color 0.15s;
}
.cart-item-remove:hover { color: var(--neon-red); }
.cart-item-qty { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.qty-btn {
  width: 22px; height: 22px; border-radius: 4px;
  border:1px solid var(--comp-accent-20); background:var(--comp-panel-bg-60); color:var(--comp-text); cursor: pointer; font-size: 0.8rem;
  display: flex; align-items: center; justify-content: center; transition: all 0.15s;
}
.qty-btn:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); }
.qty-val { font-family: var(--f-mono); font-size: 0.72rem; font-weight: 600; color: var(--text-light); min-width: 18px; text-align: center; }
.cart-tab-bar { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.cart-tab { font-family: var(--f-head); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 12px; border-radius: 99px; border:1px solid var(--comp-border-med); background:var(--comp-panel-bg-50); color:var(--text-muted); cursor: pointer; transition: all 0.15s; }
.cart-tab.active { border-color: var(--neon-cyan); color: var(--neon-cyan); background: var(--comp-accent-08); }
.cart-tab:hover { border-color: var(--neon-cyan); }
.cart-status.deleted { background: var(--comp-red-12); color: var(--neon-red); }
.cart-detail-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.cart-action-btn { font-family: var(--f-head); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 12px; border-radius: 6px; cursor: pointer; border:1px solid var(--comp-accent-20); background:var(--comp-panel-bg-60); color:var(--comp-text); transition: all 0.15s; }
.cart-action-btn:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); }
.cart-total {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--border-mid);
  font-family: var(--f-head); font-size: 0.9rem; font-weight: 700;
}
.cart-total-label { color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.68rem; }
.cart-total-value { color: var(--neon-cyan); font-family: var(--f-mono); font-size: 1.1rem; }

/* add-to-value-list button */
.x-link.cart {
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
  background: var(--comp-accent-06);
}
.x-link.cart:hover {
  background: linear-gradient(135deg, var(--neon-cyan), var(--comp-accent-light));
  color: var(--navy);
  box-shadow: 0 0 16px var(--comp-accent-40);
}

/* value list picker popover */
.cart-picker {
  position: fixed; z-index: 600;
  background: var(--comp-popup-bg-98); border: 1px solid var(--neon-cyan);
  border-radius: 10px; padding: 8px; min-width: 200px; max-width: 260px;
  box-shadow: 0 8px 30px var(--comp-black-70), 0 0 20px var(--comp-accent-10);
  display: none;
}
.cart-picker.open { display: block; }
.cart-picker-title {
  font-family: var(--f-head); font-size: 0.56rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim);
  padding: 2px 6px 6px; border-bottom: 1px solid var(--border-soft); margin-bottom: 4px;
}
.cart-picker-item {
  display: block; width: 100%; text-align: left;
  padding: 7px 10px; border: none; border-radius: 6px;
  background: none; color: var(--text-light); cursor: pointer;
  font-family: var(--f-head); font-size: 0.72rem; font-weight: 500;
  transition: background 0.15s;
}
.cart-picker-item:hover { background: var(--comp-accent-12); color: var(--neon-cyan); }
.cart-picker-item .cpk-count { color: var(--text-dim); font-size: 0.6rem; margin-left: 4px; }
.cart-picker-new {
  display: flex; gap: 4px; padding: 6px 4px 2px; margin-top: 4px;
  border-top: 1px solid var(--border-soft);
}
.cart-picker-new input {
  flex: 1; min-width: 0; font-family: var(--f-body); font-size: 0.75rem;
  padding: 5px 8px; border: 1px solid var(--border-mid); border-radius: 5px;
  background: var(--comp-white-05); color: var(--text-light); outline: none;
}
.cart-picker-new input:focus { border-color: var(--neon-cyan); }
.cart-picker-new button {
  font-family: var(--f-head); font-size: 0.6rem; font-weight: 700;
  padding: 5px 10px; border: none; border-radius: 5px; cursor: pointer;
  background: var(--neon-orange); color: var(--navy); white-space: nowrap;
}

/* value list toast */
.cart-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(60px);
  background: var(--comp-popup-bg-95); border: 1px solid var(--neon-cyan);
  border-radius: 10px; padding: 10px 20px;
  font-family: var(--f-head); font-size: 0.78rem; font-weight: 600;
  color: var(--neon-cyan); z-index: 600;
  opacity: 0; transition: all 0.3s ease;
  pointer-events: none;
}
.cart-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 768px) {
  main { padding: 18px 14px 60px; }
  .panel { padding: 18px 16px; }
  .coll-hero { padding: 22px 16px; }
}

/* ══════════════════════════════════════════════════════════
   COMP PRODUCT VIEW — VERBATIM from tools.html lines 2593-2671
   Only change: var(--mc-*) → equivalent comp tokens
   ══════════════════════════════════════════════════════════ */
.mock-wrap{background:rgba(4,6,26,0.95);border:1px solid rgba(255,255,255,0.12);border-radius:12px;padding:0;overflow:hidden;font-family:'Exo 2',sans-serif;margin-bottom:12px}
.mock-wrap+.mock-wrap{border-top:none}
.mock-wrap+.mock-wrap::before{content:'';display:block;height:2px;margin:-12px 20px 12px;background:linear-gradient(90deg,transparent,rgba(168,85,247,0.4) 15%,rgba(224,90,0,0.3) 50%,rgba(168,85,247,0.4) 85%,transparent);border-radius:1px}
@media(min-width:920px){.results-wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:12px}.mock-wrap{margin-bottom:0}.mock-wrap+.mock-wrap{border-top:1px solid rgba(255,255,255,0.12)}.mock-wrap+.mock-wrap::before{display:none}.load-more-bar{grid-column:1/-1}.mock-thumb{width:120px}.mock-name{font-size:clamp(0.9rem,2.5vw,1.15rem)}.mock-set{font-size:clamp(0.72rem,1.8vw,0.88rem)}.cp-dd-trigger{font-size:clamp(0.38rem,1.2vw,0.48rem)!important;padding:clamp(2px,0.4vw,4px) clamp(12px,2vw,16px) clamp(2px,0.4vw,4px) clamp(6px,1.2vw,8px)!important}}
.global-selectors{display:flex;gap:6px;margin:4px 0 10px;align-items:center;flex-wrap:wrap}
.gs-hidden{display:none !important;width:0 !important;height:0 !important;overflow:hidden !important;position:absolute !important}
.gs-helper-text{text-align:center;padding:2px 16px 8px;font-family:'Exo 2',sans-serif;color:rgba(60,40,80,0.55);font-size:0.68rem;letter-spacing:0.3px;margin:0;width:100%}
@media(max-width:768px){.gs-helper-text{font-size:0.75rem}}
.gs-dd .cp-dd-trigger::after{color:#fff !important}
.gs-filter-wrap{position:relative;display:flex;align-items:center}
.global-selectors select.gs-game,.global-selectors select.gs-lang{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ffffff'/%3E%3C/svg%3E") !important;background-size:8px 5px !important;background-position:right 8px center !important;background-repeat:no-repeat !important}
.filters.gs-filter-panel{position:absolute !important;top:calc(100% + 4px) !important;left:0 !important;z-index:200 !important;background:rgb(45,8,60) !important;border:1px solid rgba(168,85,247,0.3) !important;border-radius:8px !important;box-shadow:0 8px 24px rgba(0,0,0,0.6) !important;padding:10px 14px !important;display:none !important;grid-template-columns:1fr 1fr !important;gap:8px 16px !important}
.filters.gs-filter-panel.open{display:grid !important;min-width:min(340px,calc(100vw - 32px)) !important;width:auto !important;max-width:calc(100vw - 32px) !important}
.gs-filter-panel .filter-group{display:flex !important;flex-direction:column !important;gap:4px !important;width:100% !important;min-width:0 !important}
.gs-filter-panel .cp-dropdown{max-width:none !important;width:100% !important}
.gs-filter-panel .cp-dropdown-trigger{max-width:none !important;width:100% !important;overflow:visible !important;text-overflow:clip !important}
.gs-filter-panel .filter-label{font-size:0.55rem !important;-webkit-text-fill-color:#fff !important;color:#fff !important}.gs-filter-panel .filter-label::after{display:none !important}
.gs-filter-panel .filter-select,.gs-filter-panel select{max-width:none !important;width:100% !important;overflow:visible !important;text-overflow:clip !important;font-size:0.55rem !important;padding:4px 22px 4px 8px !important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ffffff'/%3E%3C/svg%3E") !important;background-position:right 6px center !important;background-size:8px 5px !important;background-repeat:no-repeat !important}
.gs-filter-panel .toggle{display:flex !important;align-items:center !important;justify-content:flex-end !important;gap:6px !important;margin-top:auto !important}
.gs-filter-panel .toggle-text{-webkit-text-fill-color:#fff !important;color:#fff !important;background:none !important;font-size:0.55rem !important}
.mock-layout{display:flex;gap:10px;padding:4px 10px 8px}
.mock-layout>.mock-thumb{min-width:0;min-height:0;margin-top:0;align-self:flex-start;border-radius:6px;flex-shrink:0;width:auto}
.mock-variant-text{font-size:0.75rem;color:var(--text-muted);margin-top:1px}
.mock-layout>.mock-thumb img{height:100%;width:auto;max-width:160px;object-fit:contain}
.mock-content{flex:1;min-width:0;display:flex;flex-direction:row;gap:6px}
.mock-top{display:flex;align-items:flex-start;gap:8px;flex:1;min-width:0}
.mock-top-right{flex:1;min-width:0}
.mock-pills-row{display:flex;align-items:center;gap:clamp(2px, 0.8vw, 6px);flex-wrap:wrap;justify-content:center;padding:6px 10px 2px}
.mock-body{display:flex;gap:8px;align-items:stretch}
.mock-body-right{flex:1;min-width:0}
.mock-row{display:flex;align-items:flex-start;gap:14px;padding:14px 18px;transition:background 0.2s;border-bottom:1px solid rgba(255,255,255,0.04)}
.mock-row:hover{background:rgba(0,245,255,0.04)}
.mock-thumb{width:120px;border-radius:6px;background:linear-gradient(135deg,rgba(0,245,255,0.08),rgba(255,60,172,0.05)),rgba(255,255,255,0.04);border:1px solid rgba(0,245,255,0.15);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.4rem;overflow:hidden;cursor:pointer}
.card-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.85);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.2s}
.card-lightbox.open{opacity:1;pointer-events:auto}
.card-lightbox img{max-width:90vw;max-height:85vh;border-radius:12px;box-shadow:0 8px 40px rgba(0,0,0,0.6);object-fit:contain}
.mock-thumb img{width:100%;height:100%;object-fit:cover}
.mock-info{flex:1;min-width:0}
.mock-name{color:#fff;font-family:'Belwe Bold','Cinzel',serif;font-weight:700;font-size:clamp(1.1rem, 3vw, 1.4rem);white-space:nowrap}
.mock-name-en{color:rgba(255,255,255,0.5);font-weight:400;font-size:0.78rem}
.mock-set-row{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:1px 0 2px}
.mock-set{color:rgba(255,255,255,0.65);font-family:'Exo 2',sans-serif;font-size:clamp(0.82rem, 2.2vw, 1.05rem)}
.mock-set-icon{height:1em;width:auto;vertical-align:middle;margin-right:4px;opacity:0.85}
.mock-era-badge{font-size:inherit;font-family:inherit;font-weight:inherit;color:inherit;vertical-align:baseline}
.mock-num{color:rgba(255,255,255,0.55);font-family:'Exo 2',sans-serif;font-size:clamp(0.78rem, 2vw, 0.95rem)}
.mock-variant-text{font-size:0.75rem;color:rgba(255,255,255,0.5);font-family:'Exo 2',sans-serif}
.mock-selectors{display:flex;gap:clamp(2px, 0.8vw, 4px);align-items:center;flex-wrap:nowrap;min-width:0}
.mock-pills{display:flex;gap:4px;margin-top:5px;flex-wrap:wrap;align-items:center}
.mock-pill{font-size:0.6rem;padding:1px 6px;border-radius:3px;background:rgba(0,245,255,0.06);color:var(--neon-cyan);border:1px solid rgba(0,245,255,0.18);font-family:var(--f-mono);cursor:pointer;transition:all 0.15s}
.mock-pill:hover,.mock-pill.active{background:rgba(0,245,255,0.15);border-color:var(--neon-cyan);color:#fff}
.mock-pill.linked{background:rgba(0,245,255,0.08);border-color:rgba(0,245,255,0.35);border-style:dashed;opacity:0.7;cursor:help}
.mock-pill.linked:hover{opacity:1}
.mock-pill.ghost{opacity:0.35;cursor:help;border-style:dashed;pointer-events:auto}
.mock-pill.ghost:hover{opacity:0.55;background:rgba(255,255,255,0.04)}
.mock-pill.lang{background:rgba(0,245,255,0.06);color:var(--neon-cyan);border-color:rgba(0,245,255,0.18)}
.mock-pill.lang:hover,.mock-pill.lang.active{background:rgba(0,245,255,0.15);border-color:var(--neon-cyan);color:#fff}
.pill-sep{width:1px;height:14px;background:rgba(255,255,255,0.1);margin:0 4px;flex-shrink:0;align-self:center}
.mock-price-col{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0}
.mock-price-summary{width:140px;background:rgba(0,245,255,0.04);border:1px solid rgba(0,245,255,0.15);border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.mps-cond{font-family:'Cinzel',serif;font-size:0.55rem;font-weight:700;color:#fff;letter-spacing:0.06em;text-transform:uppercase;opacity:0.8;margin-bottom:2px}
.mps-row{display:flex;flex-direction:column;align-items:center;width:100%}
.mps-prices{display:flex;gap:10px;width:100%;justify-content:center}
.mps-label{font-family:'Exo 2',sans-serif;font-size:0.58rem;color:rgba(255,255,255,0.6);font-weight:600;min-width:32px;display:flex;align-items:center;gap:3px;white-space:nowrap}
.mps-tcg-logo{height:24px;width:auto;vertical-align:middle}
.mps-val{font-family:var(--f-mono);font-weight:700;font-size:clamp(0.6rem,2vw,0.8rem)}
.mps-low{color:var(--neon-cyan)}
.mps-mkt{color:#fff}
.mps-variants{font-family:var(--f-mono);font-size:0.45rem;color:var(--text-dim);letter-spacing:0.04em;margin-top:1px}
.mps-vl{margin-top:0;width:auto;padding:2px 8px!important;font-size:0.42rem!important}
.mock-cond-detail{flex-shrink:0;width:160px;background:rgba(0,245,255,0.04);border:1px solid rgba(0,245,255,0.15);border-radius:8px;padding:5px 7px;align-self:stretch;max-height:120px;overflow:hidden}
.graded-toggle{display:inline-flex;align-items:center;gap:6px;cursor:pointer;padding:3px 10px;border-radius:6px;background:rgba(65,10,80,0.85);border:1px solid rgba(251,146,60,0.4);user-select:none}
.graded-toggle:hover{border-color:rgba(251,146,60,0.6);background:rgba(65,10,80,0.95)}
.gt-switch{width:26px;height:14px;border-radius:7px;background:rgba(255,255,255,0.15);position:relative;transition:background 0.2s;flex-shrink:0}
.gt-switch::after{content:'';position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:#888;transition:transform 0.2s,background 0.2s}
.graded-toggle.active .gt-switch{background:rgba(251,146,60,0.4)}
.graded-toggle.active .gt-switch::after{transform:translateX(12px);background:#fb923c}
.gt-label{font-family:'Cinzel',serif;font-size:0.5rem;font-weight:700;color:#fb923c;letter-spacing:0.04em;text-transform:uppercase;white-space:nowrap}
.cp-dd.gt-hidden,.gt-hidden{display:none!important}
.mock-body--raw{display:flex;flex-direction:column;gap:4px;padding:0;flex-shrink:0}
.mock-body--graded{padding:0}
.mock-sales-stack{display:flex;flex-direction:column;gap:4px;flex:1}
.mcd-sub-panel{background:rgba(0,245,255,0.04);border:1px solid rgba(0,245,255,0.15);border-radius:8px;padding:5px 7px;overflow:hidden;flex:1}
.mcd-sub-panel .mcd-last{display:flex;justify-content:space-between;font-size:0.55rem}
.mcd-sub-panel .last-sold li{display:flex;justify-content:space-between;font-size:0.5rem}
.mock-cond-detail--empty{max-height:none;align-self:center;padding:8px 12px;background:rgba(255,255,255,0.02);border-color:rgba(255,255,255,0.06)}
.mock-cond-detail--empty .mcd-name{font-size:0.62rem;color:var(--text-dim);font-weight:400}
.mgr-no-data{font-family:var(--f-mono);font-size:0.65rem;color:var(--text-dim);padding:6px 0;text-align:center;opacity:0.6}
.mcd-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
.mcd-name{font-family:var(--f-mono);font-size:0.72rem;font-weight:700;color:#fff;letter-spacing:0.04em}
.mcd-prices{display:flex;gap:10px}
.mcd-low{font-family:var(--f-mono);font-size:0.8rem;color:var(--neon-cyan);font-weight:700}
.mcd-mkt{font-family:var(--f-mono);font-size:0.8rem;color:#fff;font-weight:700}
.mcd-columns{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:4px;padding-top:4px;border-top:1px solid rgba(255,255,255,0.06)}
.mcd-col{min-width:0}
.mcd-last{font-family:'Exo 2',sans-serif;font-size:0.6rem;color:rgba(255,255,255,0.55);margin-bottom:2px}
.mcd-sales-label{font-family:'Cinzel',serif;font-size:0.58rem;font-weight:700;color:#e05a00;letter-spacing:0.04em;margin-bottom:1px}
.mcd-col .last-sold{text-align:left}
.mcd-col .last-sold li{justify-content:flex-start;font-size:0.58rem}
.mock-expand{background:rgba(6,9,30,0.9);padding:0 18px 18px;display:none;border-bottom:1px solid rgba(0,245,255,0.08)}
.mock-expand.open{display:block}
.mock-expand-section{margin-top:14px}
.mock-expand-title{font-family:var(--f-mono);font-size:0.65rem;color:var(--neon-cyan);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:6px}
.mgr-grade-bar{display:flex;gap:4px;margin-bottom:12px;flex-wrap:wrap}
.lang-short{display:none}
.lang-full{display:inline}
.cond-short{display:none}
.cond-full{display:inline}
@media(max-width:600px){.lang-short{display:inline}.lang-full{display:none}.cond-short{display:inline}.cond-full{display:none}}
.mgr-num{font-family:var(--f-mono);font-size:0.65rem;font-weight:700;min-width:28px;height:28px;padding:0 8px;display:flex;align-items:center;justify-content:center;border-radius:6px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.03);color:var(--text-muted);cursor:pointer;transition:all 0.15s;white-space:nowrap}
.mgr-num:hover{border-color:rgba(0,245,255,0.3);color:var(--neon-cyan)}
.mgr-num.active{background:rgba(0,245,255,0.15);border-color:var(--neon-cyan);color:#fff;box-shadow:0 0 8px rgba(0,245,255,0.2)}
.mgr-num.disabled{opacity:0.3;cursor:not-allowed}
.mgr-companies{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.mgr-company{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:8px;padding:10px;min-height:80px}
.mgr-co-name{font-family:var(--f-mono);font-size:0.72rem;font-weight:700;margin-bottom:6px;letter-spacing:0.04em}
.mgr-co-avg{font-family:var(--f-mono);font-size:1rem;font-weight:700;color:#fff;margin-bottom:8px}
.mgr-co-sold{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:0.68rem;padding:2px 0;border-top:1px solid rgba(255,255,255,0.03)}
.mgr-sold-price{color:rgba(255,255,255,0.7)}
.mgr-sold-date{color:var(--text-dim);font-size:0.62rem}
.mgr-co-none{font-family:var(--f-mono);font-size:0.65rem;color:var(--text-dim);font-style:italic}
.mock-listings{margin-top:6px;border-top:1px solid rgba(255,255,255,0.06);padding-top:4px}
.mock-listing{display:flex;align-items:center;gap:6px;padding:2px 0;font-family:var(--f-mono);font-size:0.62rem}
.ml-price{color:#fff;font-weight:600;min-width:55px}
.ml-ship{color:var(--text-dim);font-size:0.58rem;min-width:45px}
.ml-qty{color:var(--neon-yellow);font-size:0.58rem;min-width:20px}
.ml-seller{color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:3px}
.ml-none{color:var(--text-dim);font-style:italic;font-size:0.6rem;font-family:var(--f-mono);padding:2px 0}
a.mock-listing{text-decoration:none;border-radius:3px;padding:2px 4px;margin:0 -4px}
a.mock-listing:hover{background:rgba(0,245,255,0.06)}
.mgr-sold-link{text-decoration:none;display:flex;justify-content:space-between;width:100%;border-radius:3px;padding:1px 4px;margin:0 -4px}
.mgr-sold-link:hover{background:rgba(0,245,255,0.06)}
.mgr-sold-link .mgr-sold-price{color:rgba(255,255,255,0.7)}
.mgr-sold-link .mgr-sold-date{color:var(--text-dim);font-size:0.62rem}
@media (max-width: 920px) {
  .mock-layout{padding:4px 8px 8px;display:grid;grid-template-columns:auto 1fr 85px;grid-template-rows:min-content 1fr;gap:4px 8px}
  .mock-layout>.mock-thumb{grid-column:1;grid-row:1 / span 2;align-self:start;width:110px}
  .mock-layout>.mock-thumb img{height:auto;width:100%;max-width:110px;object-fit:contain}
  .mock-content{display:contents}
  .mock-top{grid-column:2;grid-row:1}
  .mock-body--raw{display:contents}
  .mock-body--raw .mock-price-col{grid-column:2;grid-row:2;align-self:start;align-items:stretch;min-width:0}
  .mock-body--raw .mock-price-summary{width:auto;padding:5px clamp(4px,1.8vw,10px)}
  /* Scale the price panel contents with viewport so Low+Market stay on one
     line side-by-side in the narrow text column — no wrapping, no gap. */
  .mock-body--raw .mps-cond{white-space:nowrap;font-size:clamp(0.4rem,1.7vw,0.6rem)}
  .mock-body--raw .mps-prices{gap:clamp(3px,1.4vw,10px)}
  .mock-body--raw .mps-label{font-size:clamp(0.36rem,1.45vw,0.58rem)}
  .mock-body--raw .mps-tcg-logo{height:clamp(9px,2.6vw,18px)}
  .mock-body--raw .mps-val{font-size:clamp(0.6rem,2.3vw,1.05rem)}
  .mock-body--raw .mock-sales-stack{grid-column:3;grid-row:1 / span 2;align-self:stretch}
  .mock-body--raw .mock-cond-detail{max-height:none;width:auto}
  .mock-body--graded{grid-column:1/-1;grid-row:3}
  .mock-cond-detail{font-size:0.6rem;padding:5px 6px}
  .mgr-co-row{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 480px) {
  .mock-layout>.mock-thumb{width:90px;min-width:90px}
  .mock-content{grid-template-columns:1fr 90px}
  .mgr-co-row{grid-template-columns:repeat(2,1fr)}
}
/* ════════════════════════════════════════════════════════════
   Mobile tile polish: foil-pill nowrap, vertical fill, and unify
   the sales panels + graded tables with the price-panel style.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 920px) {
  /* (1) Foil/variant pill must never wrap or be squeezed. Single-value
     variants render as <span class="cp-dd-static"> with white-space:normal,
     which wraps "Non-Holo" at the hyphen — force nowrap. */
  .mock-pills-row .cp-dd,.mock-pills-row .cp-dd-static{flex-shrink:0}
  .cp-dd-static,.mock-pills-row .cp-dd-trigger{white-space:nowrap}

  /* (2) Price panel fills row 2 down to the tile bottom */
  .mock-body--raw .mock-price-col{align-self:stretch}
  .mock-body--raw .mock-price-summary{flex:1;justify-content:center}

  /* (3) Image fills its column height (aspect preserved, no crop) */
  .mock-layout>.mock-thumb{align-self:stretch;background:transparent}
  .mock-layout>.mock-thumb img{height:100%;width:100%;max-width:110px;object-fit:contain}

  /* (4) Sales panels → match the price panel */
  .mock-body--raw .mock-sales-stack{gap:clamp(2px,0.8vw,4px)}
  .mock-body--raw .mcd-sub-panel{background:rgba(0,245,255,0.04);border:1px solid rgba(0,245,255,0.15);border-radius:8px;padding:5px clamp(4px,1.8vw,10px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;overflow:hidden}
  .mock-body--raw .mcd-sales-label{font-family:'Cinzel',serif;font-size:clamp(0.4rem,1.7vw,0.6rem);font-weight:700;color:#fff;opacity:0.8;letter-spacing:0.06em;text-transform:uppercase;margin-bottom:2px;white-space:nowrap}
  .mock-body--raw .mcd-last{font-family:var(--f-mono);font-size:clamp(0.6rem,2.3vw,1.05rem);font-weight:700;white-space:nowrap;justify-content:center;color:rgba(255,255,255,0.6);margin-bottom:1px}
  .mock-body--raw .mcd-sub-panel:first-child .mcd-last{color:var(--neon-cyan,#00f5ff)}
  .mock-body--raw .mcd-sub-panel:last-child .mcd-last{color:#fff}
  .mock-body--raw .mcd-sub-panel .last-sold{width:100%;gap:0;text-align:center}
  .mock-body--raw .mcd-sub-panel .last-sold li{font-size:clamp(0.36rem,1.45vw,0.58rem);justify-content:space-between;gap:clamp(2px,0.8vw,4px);white-space:nowrap}
  .mock-body--raw .mcd-sub-panel .ls-price,.mock-body--raw .mcd-sub-panel .ls-link{font-size:clamp(0.36rem,1.45vw,0.58rem);font-weight:600}
  .mock-body--raw .mcd-sub-panel .ls-d{font-size:clamp(0.32rem,1.2vw,0.5rem);min-width:0;text-align:center}
  .mock-body--raw .mcd-sub-panel .ls-graded{font-size:clamp(0.3rem,1vw,0.45rem);padding:0 2px;margin-right:1px}
  .mock-body--raw .mcd-sub-panel .ls-empty{font-size:clamp(0.36rem,1.45vw,0.58rem)}

  /* (5) Graded tables → price-panel chrome (keep per-company accent colors).
     Scoped to .mock-body--graded for specificity over the later bare .mgr-* rules. */
  .mock-body--graded .mgr-header{font-family:'Cinzel',serif;font-size:clamp(0.4rem,1.7vw,0.6rem);font-weight:700;color:#fff;opacity:0.8;letter-spacing:0.06em;text-transform:uppercase;margin-bottom:3px;white-space:nowrap}
  .mock-body--graded .mgr-co-row{grid-template-columns:repeat(3,1fr);gap:clamp(3px,1.4vw,6px)}
  .mock-body--graded .mgr-co-box{background:rgba(0,245,255,0.04);border-radius:8px;padding:5px clamp(4px,1.8vw,10px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;text-align:center}
  .mock-body--graded .mgr-co-name{font-family:'Cinzel',serif;font-size:clamp(0.4rem,1.7vw,0.6rem);font-weight:700;letter-spacing:0.06em;text-transform:uppercase;margin-bottom:2px;white-space:nowrap}
  .mock-body--graded .mgr-co-avg{font-family:var(--f-mono);font-size:clamp(0.6rem,2.3vw,1.05rem);font-weight:700;margin-bottom:2px}
  .mock-body--graded .mgr-co-solds{font-family:var(--f-mono);font-size:clamp(0.36rem,1.45vw,0.58rem);color:rgba(255,255,255,0.6);width:100%}
  .mock-body--graded .mgr-co-solds .mgr-sold-row{display:block;font-family:var(--f-mono);font-size:clamp(0.36rem,1.45vw,0.58rem);color:rgba(255,255,255,0.6);white-space:nowrap;padding:1px 0}
  .mock-body--graded .mgr-co-none{color:rgba(255,255,255,0.4);font-size:clamp(0.36rem,1.45vw,0.58rem);font-family:var(--f-mono)}
}
@media (max-width: 480px) {
  .mock-body--graded .mgr-co-box{padding:4px clamp(3px,1.5vw,8px)}
  .mock-body--graded .mgr-co-name{font-size:clamp(0.38rem,2vw,0.55rem)}
  .mock-body--graded .mgr-co-avg{font-size:clamp(0.55rem,2.8vw,0.95rem)}
  .mock-body--graded .mgr-co-solds .mgr-sold-row{font-size:clamp(0.34rem,1.6vw,0.5rem)}
}
/* Graded mode → raw-like layout: PSA under the text; the other four (BGS/CGC/
   TAG/GEN) in a 2x2 to the right of the text; card image natural height left.
   .graded-mode is toggled on .mock-wrap by the Raw Data switch. */
@media (max-width: 920px) {
  .mock-wrap.graded-mode .mock-layout{grid-template-columns:auto 1fr 1fr 1fr 1fr;grid-template-rows:min-content auto}
  .mock-wrap.graded-mode .mock-layout>.mock-thumb{grid-column:1;grid-row:1 / -1;align-self:start}
  .mock-wrap.graded-mode .mock-body--graded{display:contents !important}
  .mock-wrap.graded-mode .mgr-section{display:contents}
  .mock-wrap.graded-mode .mgr-co-row{display:contents}
  .mock-wrap.graded-mode .mock-top{grid-column:2 / 5;grid-row:1}
  .mock-wrap.graded-mode .mgr-header{display:none}
  .mock-wrap.graded-mode .mgr-grade-grid{grid-column:1 / -1}
  .mock-wrap.graded-mode .mgr-co-box{align-self:start}
  .mock-wrap.graded-mode .mgr-co-box:nth-child(1){grid-column:5;grid-row:1}  /* PSA, top-right */
  .mock-wrap.graded-mode .mgr-co-box:nth-child(5){grid-column:2;grid-row:2}  /* GEN, first in bottom row */
  .mock-wrap.graded-mode .mgr-co-box:nth-child(2){grid-column:3;grid-row:2}  /* BGS */
  .mock-wrap.graded-mode .mgr-co-box:nth-child(3){grid-column:4;grid-row:2}  /* CGC */
  .mock-wrap.graded-mode .mgr-co-box:nth-child(4){grid-column:5;grid-row:2}  /* TAG */
}
/* ── New graded layout ── */
.mgr-section{margin-top:4px}
.mgr-header{font-family:var(--f-mono);font-size:0.65rem;font-weight:700;letter-spacing:0.06em;color:var(--neon-yellow);margin-bottom:4px}
.mgr-grade-drop{cursor:pointer;color:var(--neon-cyan);text-decoration:underline;text-underline-offset:2px}
.mgr-grade-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin:6px 0 10px;padding:8px;background:rgba(0,0,0,0.4);border-radius:8px;border:1px solid var(--border-mid)}
.mgr-gg-cell{text-align:center;padding:8px 2px;font-family:var(--f-mono);font-size:0.75rem;font-weight:600;color:#fff;background:rgba(255,255,255,0.04);border-radius:4px;cursor:pointer;border:1px solid transparent}
.mgr-gg-cell:hover{background:rgba(0,245,255,0.1);border-color:var(--neon-cyan)}
.mgr-gg-cell.active{background:rgba(0,245,255,0.15);border-color:var(--neon-cyan);color:var(--neon-cyan)}
.mgr-gg-cell.disabled{opacity:0.3;cursor:default}
.mgr-gg-wide{grid-column:span 2}
.mgr-gg-prist{grid-column:span 4;font-size:0.68rem}
.mgr-co-row{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.mgr-big-box{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:4px;flex:1;display:flex;flex-direction:column;max-height:110px;overflow:hidden}
.mgr-big-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.mgr-co-select{background:transparent;border:1px solid var(--border-mid);border-radius:4px;color:var(--neon-yellow);font-family:var(--f-mono);font-size:0.65rem;font-weight:700;padding:2px 4px;cursor:pointer}
.mgr-co-select option{background:#1a1a2e;color:#fff}
.mgr-big-avg{font-family:var(--f-mono);font-size:0.85rem;font-weight:700;color:#fff}
.mgr-big-solds{max-height:90px;overflow-y:auto}
.mgr-sold-row{display:flex;align-items:center;gap:6px;padding:3px 4px;font-family:var(--f-mono);font-size:0.68rem;color:rgba(255,255,255,0.7);text-decoration:none;border-radius:3px}
.mgr-sold-row:hover{background:rgba(0,245,255,0.06)}
.mgr-ebay-logo{width:14px;height:14px;flex-shrink:0}
.mgr-sold-date{color:var(--text-dim);margin-left:auto}
.mgr-co-box{background:rgba(255,255,255,0.02);border-radius:6px;padding:6px;text-align:center;border:1px solid;display:flex;flex-direction:column;min-width:0}
.mgr-co-box:hover{border-color:var(--neon-cyan);background:rgba(0,245,255,0.04)}
.mgr-co-name{font-family:var(--f-mono);font-size:0.6rem;font-weight:700;letter-spacing:0.04em;margin-bottom:2px}
.mgr-co-avg{font-family:var(--f-mono);font-size:0.85rem;font-weight:700;color:#fff;margin-bottom:3px}
.mgr-co-solds{font-size:0.55rem;color:var(--text-dim)}
.mgr-co-solds .mgr-sold-row{display:block;color:var(--text-muted);text-decoration:none;padding:1px 0}
.mgr-co-solds .mgr-sold-row:hover{color:var(--neon-cyan)}
.mgr-co-solds .mgr-sold-date{opacity:0.6}
.mgr-co-none{color:var(--text-dim);font-size:0.55rem}

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

/* ── UNDO site.css globals that conflict with comp layout ── */
main > section { padding:28px; max-width:none; margin:0; }
main > .tape { padding:0; margin:12px 0 28px; }
main label { font-family:var(--f-head); font-size:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit; }
main input, main select, main textarea { background:var(--comp-black-35); border:1px solid var(--border-mid); border-radius:6px; font-family:var(--f-mono); font-size:0.85rem; width:auto; padding:8px 12px; }
main input:focus, main select:focus, main textarea:focus { border-color:var(--neon-cyan); }
main > .modes { max-width:none; margin-bottom:18px; }

/* ── COMP FOOTER: SUPPORT + DISCLAIMER ───────────────────── */
.comp-footer {
  text-align: center;
  padding: 28px 16px 8px;
  margin-top: 12px;
  border-top: 1px solid var(--border-soft);
}
.comp-footer .support-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-head);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-decoration: none;
  padding: 5px 14px;
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  transition: all 0.25s ease;
}
.comp-footer .support-link:hover {
  color: var(--neon-orange);
  border-color: var(--comp-warm-40);
  box-shadow: 0 0 12px var(--comp-warm-15);
}
.comp-footer .support-link svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  flex-shrink: 0;
}
.comp-footer .disclaimer {
  margin-top: 10px;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

/* Language pill: smaller, less prominent */
.cp-dd-lang .cp-dd-trigger{opacity:0.7;font-size:clamp(0.38rem, 1.4vw, 0.5rem) !important;padding:clamp(2px, 0.6vw, 4px) clamp(8px, 1.8vw, 12px) clamp(2px, 0.6vw, 4px) clamp(5px, 1.2vw, 7px) !important}
.cp-dd-lang{max-width:100px}

/* Bigger prices in condition detail */
@media (max-width: 920px) {
  .mcd-low,.mcd-mkt{font-size:0.85rem!important}
}