.coll-ident {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    text-align: right;
  }
  @media (min-width: 768px) {
    .coll-ident {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      gap: 0.65rem 0.9rem;
      text-align: left;
    }
  }
  .coll-notify-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 9999px;
    color: #94a3b8;
    background: transparent;
    border: 0;
    cursor: pointer;
    flex: 0 0 auto;
  }
  .coll-notify-btn:hover { color: #e2e8f0; background: rgb(148 163 184 / 0.12); }
  .coll-notify-btn[aria-pressed="true"] { color: #38bdf8; }
  .coll-notify-btn[aria-pressed="true"]:hover { color: #7dd3fc; background: rgb(56 189 248 / 0.12); }
  .coll-notify-btn[aria-pressed="false"] { color: #94a3b8; }
  .coll-notify-bell { width: 1.15rem; height: 1.15rem; display: block; }
  .coll-notify-x {
    position: absolute;
    inset: 0.18rem;
    width: auto;
    height: auto;
    color: #ef4444;
    pointer-events: none;
    display: none;
  }
  .coll-notify-btn[aria-pressed="false"] .coll-notify-x { display: block; }
  .coll-notify-btn[aria-pressed="false"] .coll-notify-bell { opacity: 0.7; }
  /* base.html's dark-mode `main .text-slate-*` rules are !important, and inactive tabs keep
     that class when they become active, so the active colour has to outrank them. */
  .coll-tab.is-active { background: #1e293b; color: #fff !important; }
  .dark .coll-tab.is-active { background: #e2e8f0; color: #0f172a !important; }
  .coll-pack {
    position: relative;
    display: block;
    width: 100%;
    max-width: 13.5rem;
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    aspect-ratio: 2 / 3.2;
    filter: drop-shadow(0 12px 20px rgb(15 23 42 / 0.42));
    transition: transform 0.15s ease, filter 0.15s ease;
  }
  .coll-pack-shell {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 0.55rem;
    pointer-events: none;
    user-select: none;
    background: #8ea0b4;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.55),
      inset 0 -1px 0 rgba(15,23,42,0.22),
      0 0 0 1px rgba(148,163,184,0.55);
  }
  .coll-pack-crimp {
    position: relative;
    z-index: 2;
    flex: 0 0 0.9rem;
    background:
      repeating-linear-gradient(
        90deg,
        #f1f5f9 0 2px,
        #c5d0dc 2px 3px,
        #8b9aab 3px 4px,
        #dbe4ee 4px 6px,
        #a8b6c4 6px 7px,
        #eef3f8 7px 9px
      );
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.85),
      inset 0 -1px 0 rgba(51,65,85,0.35);
  }
  .coll-pack-crimp.top::after,
  .coll-pack-crimp.bot::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 0.28rem;
    background: linear-gradient(180deg, rgba(15,23,42,0.18), transparent);
  }
  .coll-pack-crimp.top::after { bottom: -0.28rem; }
  .coll-pack-crimp.bot::before { top: -0.28rem; transform: rotate(180deg); }
  .coll-pack-body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .coll-pack-foil {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(120% 70% at 18% 12%, rgba(255,255,255,0.72), transparent 46%),
      radial-gradient(90% 50% at 88% 82%, rgba(255,255,255,0.18), transparent 55%),
      linear-gradient(165deg, #f7fafc 0%, #d5e0ec 26%, #9eafc4 54%, #7f91a8 76%, #c2cfdd 100%);
  }
  .coll-pack-foil::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      repeating-linear-gradient(
        -18deg,
        transparent 0 10px,
        rgba(255,255,255,0.07) 10px 12px,
        transparent 12px 22px
      );
    mix-blend-mode: soft-light;
  }
  .coll-pack-foil::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow:
      inset 10px 0 14px rgba(255,255,255,0.18),
      inset -8px 0 16px rgba(51,65,85,0.22),
      inset 0 18px 22px rgba(15,23,42,0.12),
      inset 0 -16px 20px rgba(15,23,42,0.16);
  }
  .coll-pack-sheen {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(108deg, transparent 6%, rgba(255,255,255,0.58) 16%, rgba(255,255,255,0.08) 27%, transparent 38%),
      linear-gradient(108deg, transparent 54%, rgba(255,255,255,0.22) 64%, transparent 76%);
    pointer-events: none;
  }
  .coll-pack-plate {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    text-align: center;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .coll-pack-band {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.42rem 0.45rem 0.4rem;
    background:
      linear-gradient(180deg, #1e3a5f 0%, #122a48 55%, #0b1d33 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.22),
      inset 0 -1px 0 rgba(0,0,0,0.28);
  }
  .coll-pack-mid {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.5rem;
  }
  .coll-pack-brand {
    font-family: 'Bebas Neue', 'Anton', Impact, sans-serif;
    font-size: clamp(1.45rem, 4.2vw, 1.95rem);
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: 0.92;
    text-shadow: 0 1px 0 rgba(0,0,0,0.35);
  }
  .coll-pack-brand .fhm { color: #38bdf8; }
  .coll-pack-brand .now { color: #fbbf24; }
  .coll-pack-logo {
    height: 3.85rem;
    width: auto;
    max-width: 8.25rem;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(15,23,42,0.28));
  }
  .coll-pack-league {
    margin-top: 0.35rem;
    max-width: 100%;
    font-family: Cinzel, 'Libre Baskerville', Georgia, serif;
    font-size: clamp(0.82rem, 2.3vw, 1.08rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
    color: #1e293b;
  }
  .coll-pack-logo + .coll-pack-league { margin-top: 0.7rem; }
  .coll-pack-year {
    margin-top: 0.22rem;
    font-family: Cinzel, 'Libre Baskerville', Georgia, serif;
    font-size: clamp(1.15rem, 2.8vw, 1.4rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #0f172a;
  }
  .coll-pack-cta {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(0.6rem, 1.55vw, 0.74rem);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fde68a;
  }
  .coll-pack-cta.is-wait { color: #cbd5e1; }
  .coll-pack-timer {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(0.78rem, 1.9vw, 0.98rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    color: #f8fafc;
  }
  .coll-pack-timer + .coll-pack-cta { margin-top: 0.12rem; }
  .coll-pack-simple-name { display: none; }
  .coll-pack-status-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .coll-pack.is-ready { cursor: pointer; }
  .coll-pack.is-ready:hover {
    transform: translateY(-3px);
    filter: drop-shadow(0 18px 24px rgb(15 23 42 / 0.5)) brightness(1.04);
  }
  .coll-pack.is-cooling {
    cursor: not-allowed;
    filter: brightness(0.9) drop-shadow(0 8px 14px rgb(15 23 42 / 0.35));
  }
  @media (max-width: 767px) {
    .coll-pack {
      aspect-ratio: auto;
      max-width: none;
      height: auto;
      filter: none;
    }
    .coll-pack.is-ready:hover {
      transform: none;
      filter: none;
    }
    .coll-pack.is-cooling { filter: none; opacity: 0.92; }
    .coll-pack-shell {
      position: relative;
      inset: auto;
      border-radius: 0.6rem;
      background: #1e293b;
      box-shadow: inset 0 0 0 1px rgba(148,163,184,0.28);
    }
    .coll-pack.is-ready .coll-pack-shell {
      background: linear-gradient(180deg, #1d4ed8 0%, #1e40af 100%);
    }
    .coll-pack-crimp,
    .coll-pack-foil,
    .coll-pack-sheen,
    .coll-pack-mid,
    .coll-pack-band-brand { display: none; }
    .coll-pack-body { min-height: 0; }
    .coll-pack-plate { height: auto; }
    .coll-pack-band-status {
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;
      gap: 0.75rem;
      padding: 0.85rem 1rem;
      background: none;
      box-shadow: none;
    }
    .coll-pack-simple-name {
      display: inline;
      font-size: 0.95rem;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #f8fafc;
      flex: 0 0 auto;
    }
    .coll-pack-status-meta { align-items: flex-end; }
    .coll-pack-cta { font-size: 0.8rem; letter-spacing: 0.08em; }
    .coll-pack-timer { font-size: 0.85rem; }
    .coll-pack-timer + .coll-pack-cta { margin-top: 0.08rem; }
  }
  .coll-feature-slot.is-picking { outline: 2px solid #2563eb; outline-offset: 2px; }
  .coll-inv-card {
    position: relative;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    height: 14.7rem; /* visual height of 17.5rem card at scale(0.6) */
    min-height: 0;
    overflow: hidden;
  }
  .coll-inv-card.is-pickable { outline: 2px solid #22c55e; outline-offset: 2px; border-radius: 0.35rem; }
  .coll-inv-card.is-selected {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
    border-radius: 0.35rem;
  }
  .coll-select-check {
    position: absolute;
    top: 0.35rem;
    left: 0.35rem;
    z-index: 2;
    display: none;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.25rem;
    border: 2px solid #64748b;
    background: #fff;
    color: transparent;
    font-size: 0.75rem;
    line-height: 1.05rem;
    text-align: center;
    font-weight: 700;
  }
  .coll-inv-card.is-selecting .coll-select-check { display: block; }
  .coll-inv-card.is-selected .coll-select-check {
    display: block;
    border-color: #2563eb;
    background: #2563eb;
    color: #fff;
  }
  .coll-inv-card .coll-card-scale {
    margin-bottom: 0 !important;
  }
  /* Render at full card size, then scale so aspect ratio stays correct */
  .coll-card-scale {
    width: 17.5rem;
    flex-shrink: 0;
    transform: scale(0.6);
    transform-origin: top center;
    margin-bottom: -6.5rem; /* reclaim layout space after scale */
  }
  .coll-card-scale .hp-card {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
  .coll-feature-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    min-width: 0;
    width: 100%;
  }
  .coll-feature-primary {
    min-height: 0;
    padding: 0.55rem;
  }
  .coll-feature-primary:not(.has-card) {
    min-height: 24rem;
  }
  .coll-feature-sub {
    min-height: 0;
    padding: 0.25rem;
  }
  .coll-feature-sub:not(.has-card) {
    min-height: 15.5rem;
  }
  .coll-feature-slot.has-card {
    min-height: 0;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .coll-feature-card {
    width: auto !important;
    max-width: 100%;
    padding: 0 !important;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-width: 0;
  }
  .coll-feature-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
  }
  .coll-feature-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    border: 2px solid transparent;
    background: transparent;
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
  }
  .coll-feature-page-btn:hover {
    color: #334155;
    background: rgb(148 163 184 / 0.12);
  }
  .coll-feature-page-btn.is-active {
    border-color: #2563eb;
    color: #1d4ed8;
    background: rgb(37 99 235 / 0.08);
    box-shadow: 0 0 0 1px rgb(37 99 235 / 0.15);
  }
  .dark .coll-feature-page-btn {
    color: #94a3b8;
  }
  .dark .coll-feature-page-btn:hover {
    color: #e2e8f0;
    background: rgb(148 163 184 / 0.14);
  }
  .dark .coll-feature-page-btn.is-active {
    border-color: #60a5fa;
    color: #93c5fd;
    background: rgb(96 165 250 / 0.12);
    box-shadow: 0 0 0 1px rgb(96 165 250 / 0.2);
  }
  .coll-page-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.4rem;
    border-radius: 0.375rem;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #334155;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
  }
  .coll-page-num:hover { background: #f1f5f9; }
  .coll-page-num.is-active {
    border-color: #2563eb;
    background: #2563eb;
    color: #fff;
  }
  .coll-page-num:disabled { opacity: 0.45; cursor: default; }
  .dark .coll-page-num {
    border-color: #475569;
    background: #0f172a;
    color: #e2e8f0;
  }
  .dark .coll-page-num:hover { background: #1e293b; }
  .dark .coll-page-num.is-active {
    border-color: #60a5fa;
    background: #2563eb;
    color: #fff;
  }
  .coll-page-nav:disabled { opacity: 0.45; cursor: default; }
  .coll-page-jump-input {
    width: 3.5rem;
    background: #fff;
    color: #0f172a;
    border-color: #cbd5e1;
    appearance: textfield;
    -moz-appearance: textfield;
  }
  .coll-page-jump-input::-webkit-outer-spin-button,
  .coll-page-jump-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .dark .coll-page-jump-input {
    background: #0f172a;
    color: #e2e8f0;
    border-color: #475569;
  }
  .coll-filter-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
  }
  .coll-filter-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.25rem);
    z-index: 30;
    min-width: 11.5rem;
    max-height: min(24rem, 70vh);
    overflow: auto;
    border-radius: 0.5rem;
    border: 1px solid #cbd5e1;
    background: #fff;
    padding: 0.35rem;
    box-shadow: 0 10px 24px rgb(15 23 42 / 0.14);
  }
  .dark .coll-filter-menu {
    border-color: #475569;
    background: #0f172a;
    box-shadow: 0 10px 24px rgb(0 0 0 / 0.45);
  }
  .coll-filter-opt {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.45rem;
    border-radius: 0.375rem;
    padding: 0.45rem 0.55rem;
    text-align: left;
    font-size: 0.875rem;
    color: #334155;
  }
  .coll-filter-opt:hover,
  .coll-filter-opt.is-active {
    background: rgb(148 163 184 / 0.16);
    color: #0f172a;
  }
  .dark .coll-filter-opt {
    color: #e2e8f0;
  }
  .dark .coll-filter-opt:hover,
  .dark .coll-filter-opt.is-active {
    background: rgb(148 163 184 / 0.18);
    color: #f8fafc;
  }
  .coll-filter-expand::after {
    content: "›";
    margin-left: auto;
    color: #94a3b8;
    font-size: 0.95rem;
  }
  .coll-filter-sub {
    margin: 0.15rem 0 0.35rem 0.5rem;
    padding-left: 0.45rem;
    border-left: 2px solid #e2e8f0;
  }
  .dark .coll-filter-sub {
    border-left-color: #334155;
  }
  .coll-filter-sub .coll-filter-opt {
    font-size: 0.8125rem;
    padding: 0.38rem 0.5rem;
  }
  .coll-filter-logo {
    width: 1.15rem;
    height: 1.15rem;
    object-fit: contain;
    flex-shrink: 0;
  }
  /* Primary featured: render full-size card, then scale so ratio stays correct */
  #coll-featured-primary .coll-feature-card,
  #coll-team-primary .coll-feature-card {
    width: auto;
    height: auto;
    max-width: 100%;
    overflow: visible;
  }
  #coll-featured-primary .coll-feature-card .coll-mag-holder,
  #coll-team-primary .coll-feature-card .coll-mag-holder {
    width: auto;
    max-width: 100%;
  }
  #coll-featured-primary .coll-feature-card .coll-mag-well,
  #coll-team-primary .coll-feature-card .coll-mag-well {
    width: 15.75rem; /* 17.5rem * 0.9 */
    height: 22.05rem; /* 24.5rem * 0.9 — true 2.5×3.5 */
    max-width: 100%;
  }
  #coll-featured-primary .coll-feature-card .coll-card-scale,
  #coll-team-primary .coll-feature-card .coll-card-scale {
    width: 17.5rem;
    max-width: none;
    flex: 0 0 17.5rem;
    transform: scale(0.9) !important;
    transform-origin: top left !important;
    margin: 0 !important;
  }
  #coll-featured-primary .coll-feature-card .hp-card,
  #coll-team-primary .coll-feature-card .hp-card {
    width: 17.5rem !important;
    max-width: none !important;
    margin: 0 !important;
    height: auto !important;
    aspect-ratio: 2.5 / 3.5 !important;
    flex-shrink: 0;
  }
  /* Sub cards: scale the full-size layout so type/photos don't get crushed. */
  #coll-featured-sub .coll-feature-card,
  #coll-team-sub .coll-feature-card {
    width: 12.25rem;
    height: 17.15rem;
    max-width: 100%;
    overflow: hidden;
  }
  #coll-featured-sub .coll-feature-card .coll-card-scale,
  #coll-team-sub .coll-feature-card .coll-card-scale {
    width: 17.5rem;
    flex: 0 0 17.5rem;
    transform: scale(0.7) !important;
    transform-origin: top center !important;
    margin: 0 !important;
  }
  #coll-featured-sub .coll-feature-card .hp-card,
  #coll-team-sub .coll-feature-card .hp-card {
    width: 17.5rem !important;
    max-width: none !important;
    margin: 0 !important;
    height: auto !important;
    aspect-ratio: 2.5 / 3.5 !important;
    flex-shrink: 0;
  }
  .coll-mag-holder {
    position: relative;
    display: inline-flex;
    width: auto;
    max-width: 16.9rem;
    box-sizing: border-box;
    padding: 0.85rem 0.55rem 0.5rem;
    border-radius: 0.32rem;
    background: linear-gradient(155deg, rgba(255,255,255,0.5) 0%, rgba(203,213,225,0.28) 40%, rgba(148,163,184,0.18) 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.75),
      inset 0 -1px 0 rgba(15,23,42,0.12),
      0 0 0 1px rgba(255,255,255,0.28),
      0 12px 26px rgb(15 23 42 / 0.3);
  }
  .dark .coll-mag-holder {
    background: linear-gradient(155deg, rgba(226,232,240,0.3) 0%, rgba(100,116,139,0.22) 42%, rgba(51,65,85,0.32) 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.28),
      inset 0 -1px 0 rgba(0,0,0,0.28),
      0 0 0 1px rgba(255,255,255,0.12),
      0 12px 26px rgb(0 0 0 / 0.45);
  }
  .coll-mag-magnet {
    position: absolute;
    top: 0.2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0.68rem;
    height: 0.68rem;
    border-radius: 999px;
    background: radial-gradient(circle at 32% 28%, #fffbeb, #fbbf24 40%, #b45309 78%, #78350f);
    box-shadow: 0 1px 2px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.85);
    z-index: 4;
  }
  .coll-mag-well {
    position: relative;
    width: 13rem;
    max-width: 100%;
    border-radius: 0.16rem;
    overflow: hidden;
    background: rgb(15 23 42 / 0.08);
    box-shadow: inset 0 0 0 1px rgba(15,23,42,0.22), inset 0 2px 8px rgba(15,23,42,0.18);
  }
  .coll-mag-notch {
    position: absolute;
    width: 0.62rem;
    height: 0.62rem;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(155deg, rgba(226,232,240,0.98), rgba(148,163,184,0.9));
  }
  .dark .coll-mag-notch {
    background: linear-gradient(155deg, rgba(148,163,184,0.55), rgba(71,85,105,0.8));
  }
  .coll-mag-notch.nw { top: 0; left: 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
  .coll-mag-notch.ne { top: 0; right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%); }
  .coll-mag-notch.sw { bottom: 0; left: 0; clip-path: polygon(0 0, 100% 100%, 0 100%); }
  .coll-mag-notch.se { bottom: 0; right: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
  .coll-new-badge {
    position: absolute; top: -0.35rem; left: 50%; transform: translateX(-50%);
    z-index: 5; background: #dc2626; color: #fff; font-size: 0.65rem; font-weight: 800;
    letter-spacing: 0.06em; padding: 0.15rem 0.45rem; border-radius: 999px;
  }
  #coll-reveal-stage {
    min-height: 28rem;
  }
  #coll-reveal-stage .coll-card-scale {
    width: 18rem;
    transform: none;
    margin-bottom: 0;
    cursor: pointer;
  }
  #coll-reveal-grid .coll-card-scale {
    width: 17.5rem;
    transform: scale(0.72);
    margin-bottom: -4.5rem;
  }
  #coll-lb-card .coll-card-scale {
    width: 18rem;
    transform: none;
    margin-bottom: 0;
  }
  #coll-reveal.is-open { display: flex !important; }
  .coll-held-badge {
    position: absolute; top: 1.4rem; left: 50%; transform: translateX(-50%);
    z-index: 5; background: #b45309; color: #fff; font-size: 0.6rem; font-weight: 700;
    letter-spacing: 0.04em; padding: 0.12rem 0.4rem; border-radius: 999px;
  }
  .coll-trade-pick { cursor: pointer; }
  .coll-trade-pick.is-on {
    background: #1d4ed8;
    border-color: #60a5fa;
    color: #fff;
    box-shadow: inset 0 0 0 1px rgb(147 197 253 / 0.55);
  }
  .coll-trade-pick.is-on .coll-trade-rarity { color: #dbeafe; }
  .coll-trade-feat {
    flex: 0 0 auto;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #b45309;
    background: #fef3c7;
    border-radius: 999px;
    padding: 0.05rem 0.35rem;
  }
  .coll-trade-pick.is-on .coll-trade-feat {
    background: #fde68a;
    color: #78350f;
  }
  .coll-trade-check {
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 800;
    color: #bbf7d0;
  }
  .coll-trade-view {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 0.25rem;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #334155;
    padding: 0.15rem 0.45rem;
    cursor: pointer;
  }
  .coll-trade-view:hover { background: #f1f5f9; }
  .dark .coll-trade-view {
    border-color: #475569;
    background: #1e293b;
    color: #e2e8f0;
  }
  .dark .coll-trade-view:hover { background: #334155; }
  .coll-trade-pick.is-on .coll-trade-view {
    border-color: #bfdbfe;
    background: rgb(255 255 255 / 0.15);
    color: #fff;
  }
  .coll-trade-pick.is-on .coll-trade-view:hover {
    background: rgb(255 255 255 / 0.28);
  }
  .coll-trade-cash {
    display: flex;
    align-items: center;
    gap: 0.55rem;
  }
  .coll-trade-cash input[type="range"] {
    flex: 1 1 auto;
    min-width: 0;
    accent-color: #10b981;
    height: 1.25rem;
  }
  .coll-trade-cash-box {
    width: 5.75rem;
    flex: 0 0 auto;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  #coll-trade-review .coll-inv-card {
    height: auto;
    overflow: visible;
  }
  #coll-trade-review .coll-inv-card .coll-card-scale {
    width: min(16rem, 100%);
    transform: none;
    margin-bottom: 0;
  }
  #coll-activity-review .coll-inv-card {
    height: auto;
    overflow: visible;
  }
  #coll-activity-review .coll-inv-card .coll-card-scale {
    width: min(16rem, 100%);
    transform: none;
    margin-bottom: 0;
  }
  .coll-auction-lot {
    position: relative;
    overflow: hidden;
  }
  .coll-auction-lot .coll-card-scale {
    transform: scale(0.62);
    margin-bottom: -6.2rem;
  }
  .coll-auction-tag {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 4;
    border-radius: 999px;
    background: #f59e0b;
    color: #1c1917;
    font-size: 0.8rem;
    font-weight: 800;
    padding: 0.2rem 0.6rem;
  }
  @media (max-width: 767px) {
    .coll-feature-primary:not(.has-card) { min-height: 5.5rem; }
    .coll-feature-sub:not(.has-card) { min-height: 4.5rem; }
    .coll-feature-slot { overflow: hidden; }
    .coll-mag-holder {
      width: 100%;
      max-width: min(20.5rem, 100%);
    }
    .coll-mag-well { width: 100%; max-width: none; height: auto; }
    #coll-featured-primary .coll-feature-card .coll-mag-well,
    #coll-team-primary .coll-feature-card .coll-mag-well {
      width: 100%;
      max-width: 18rem;
      height: auto;
      aspect-ratio: 2.5 / 3.5;
    }
    #coll-featured-primary .coll-feature-card .coll-card-scale,
    #coll-team-primary .coll-feature-card .coll-card-scale {
      width: 100%;
      max-width: 18rem;
      flex: 0 0 auto;
      transform: none !important;
    }
    #coll-featured-primary .coll-feature-card .hp-card,
    #coll-team-primary .coll-feature-card .hp-card {
      width: 100% !important;
      max-width: none !important;
    }
    #coll-featured-sub .coll-feature-card,
    #coll-team-sub .coll-feature-card {
      width: min(18rem, 100%);
      height: auto;
      overflow: visible;
    }
    #coll-featured-sub .coll-feature-card .coll-card-scale,
    #coll-team-sub .coll-feature-card .coll-card-scale {
      width: 100%;
      flex: 0 0 auto;
      transform: none !important;
    }
    #coll-featured-sub .coll-feature-card .hp-card,
    #coll-team-sub .coll-feature-card .hp-card {
      width: 100% !important;
    }
    .coll-inv-card {
      height: auto;
      overflow: visible;
    }
    .coll-inv-card .coll-card-scale {
      width: min(18rem, 100%);
      transform: none;
      margin-bottom: 0;
    }
    #coll-reveal-stage { min-height: 20rem; }
    #coll-reveal-stage .coll-card-scale,
    #coll-lb-card .coll-card-scale { width: min(18rem, 92vw); }
    #coll-reveal-grid .coll-card-scale {
      width: min(18rem, 100%);
      transform: none;
      margin-bottom: 0;
    }
    .coll-auction-lot { overflow: visible; }
    .coll-auction-lot .coll-card-scale {
      width: min(18rem, 100%);
      transform: none;
      margin-bottom: 0;
    }
  }

  /* —— Challenges ————————————————————————————————————————————— */

  /* Pack Refreshes, shown beside the wallet. */
  .coll-refresh-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.16rem 0.5rem 0.16rem 0.36rem;
    border-radius: 9999px;
    background: rgb(59 130 246 / 0.14);
    border: 1px solid rgb(59 130 246 / 0.4);
    color: #1d4ed8;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
  }
  .dark .coll-refresh-chip { color: #93c5fd; background: rgb(59 130 246 / 0.18); }
  .coll-refresh-chip svg { width: 1rem; height: 1rem; }
  .coll-refresh-chip.is-empty { opacity: 0.5; }

  /* The pack itself is a <button> and cannot contain another one, so Refresh is a sibling
     placed in normal flow below it — never overlaid on the pack's own bottom band, which is
     where the timer/"Refreshing" text lives on both the desktop card and mobile bar layout. */
  .coll-pack-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .coll-pack-refresh {
    margin-top: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.65rem;
    border: 0;
    border-radius: 9999px;
    background: #2563eb;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 14px rgb(15 23 42 / 0.4);
  }
  .coll-pack-refresh:hover { background: #1d4ed8; }
  .coll-pack-refresh svg { width: 0.9rem; height: 0.9rem; }
  @media (max-width: 767px) {
    .coll-pack-cell { align-items: stretch; }
    .coll-pack-refresh { align-self: center; }
  }

  /* Section chips (Teams, and whatever gets added later). */
  .coll-ch-section {
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    border: 1px solid rgb(148 163 184 / 0.5);
    background: transparent;
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
  }
  .dark .coll-ch-section { color: #cbd5e1; }
  .coll-ch-section.is-active { background: #1e293b; color: #fff !important; border-color: #1e293b; }
  .dark .coll-ch-section.is-active { background: #e2e8f0; color: #0f172a !important; border-color: #e2e8f0; }

  .coll-ch-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    margin-left: 0.25rem;
    border: 0;
    border-radius: 9999px;
    background: #64748b;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    font-style: italic;
    cursor: pointer;
    vertical-align: middle;
  }
  .coll-ch-info:hover { background: #475569; }

  /* Requirement rows and their card bays. */
  .coll-ch-slot {
    border: 1px solid rgb(148 163 184 / 0.35);
    border-radius: 0.6rem;
    padding: 0.6rem 0.7rem;
  }
  .coll-ch-slot-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
  }
  .coll-ch-slot-label { font-size: 0.85rem; font-weight: 700; }
  .coll-ch-slot-count {
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: #64748b;
  }
  .coll-ch-slot-count.is-full { color: #059669; font-weight: 700; }
  .coll-ch-slot-tag {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #b45309;
    background: rgb(245 158 11 / 0.16);
    padding: 0.1rem 0.35rem;
    border-radius: 0.2rem;
  }
  .coll-ch-bays {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: 0.4rem;
  }
  .coll-ch-bay {
    min-height: 3.1rem;
    border: 1px dashed rgb(148 163 184 / 0.6);
    border-radius: 0.45rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem;
  }
  .coll-ch-bay.is-filled { border-style: solid; border-color: rgb(148 163 184 / 0.35); }
  .coll-ch-bay.is-over { border-color: #2563eb; background: rgb(37 99 235 / 0.1); }
  .coll-ch-bay-empty {
    font-size: 0.68rem;
    color: #94a3b8;
    text-align: center;
    pointer-events: none;
  }

  /* A card in the pool or sitting in a bay. */
  .coll-ch-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    padding: 0.32rem 0.4rem;
    border-radius: 0.35rem;
    background: rgb(241 245 249 / 1);
    border-left: 3px solid #94a3b8;
    cursor: grab;
    user-select: none;
  }
  .dark .coll-ch-card { background: rgb(51 65 85 / 0.75); }
  .coll-ch-card:hover { outline: 1px solid #2563eb; }
  .coll-ch-card.is-dragging { opacity: 0.4; }
  .coll-ch-card.is-used { opacity: 0.32; cursor: default; }
  .coll-ch-card.is-used:hover { outline: 0; }
  .coll-ch-card-pos {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #64748b;
  }
  .dark .coll-ch-card-pos { color: #94a3b8; }
  .coll-ch-card-name {
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .coll-ch-card-rar { font-size: 0.62rem; color: #64748b; }
  .dark .coll-ch-card-rar { color: #94a3b8; }
  /* Rarity accent on the left edge so hits stand out while filling a board. */
  .coll-ch-card.rarity-gold { border-left-color: #d4af37; }
  .coll-ch-card.rarity-chrome { border-left-color: #94a3b8; }
  .coll-ch-card.rarity-outburst { border-left-color: #ef4444; }
  .coll-ch-card.rarity-outburst_gold { border-left-color: #fbbf24; }
  .coll-ch-card.rarity-black_ice { border-left-color: #0ea5e9; }
  .coll-ch-card.rarity-patch { border-left-color: #a855f7; }
  .coll-ch-card.rarity-autograph,
  .coll-ch-card.rarity-legend_auto { border-left-color: #f43f5e; }
  .coll-ch-card.rarity-silver_metal { border-left-color: #cbd5e1; }
  .coll-ch-card.rarity-trophy { border-left-color: #eab308; }
  .coll-ch-card.rarity-inferno { border-left-color: #f97316; }
  .coll-ch-card.rarity-legend { border-left-color: #b45309; }

  /* Completed stamp. */
  .coll-ch-complete {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-radius: 0.7rem;
    border: 2px solid #059669;
    background: rgb(16 185 129 / 0.12);
    color: #047857;
  }
  .dark .coll-ch-complete { color: #6ee7b7; }
  .coll-ch-complete svg { width: 2rem; height: 2rem; flex: 0 0 auto; }
  .coll-ch-complete-title {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .coll-ch-complete-sub { font-size: 0.8rem; opacity: 0.9; }

  /* Team Pack shelf. */
  .coll-ch-teampack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    min-width: 6.5rem;
    padding: 0.6rem 0.8rem;
    border-radius: 0.55rem;
    border: 1px solid rgb(59 130 246 / 0.45);
    background: linear-gradient(160deg, rgb(59 130 246 / 0.18), rgb(30 64 175 / 0.28));
    cursor: pointer;
  }
  .coll-ch-teampack:hover { border-color: #2563eb; }
  .coll-ch-teampack-team { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.04em; }
  .coll-ch-teampack-sub { font-size: 0.64rem; color: #64748b; }
  .dark .coll-ch-teampack-sub { color: #cbd5e1; }
  .coll-ch-teampack-cta {
    margin-top: 0.15rem;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2563eb;
  }
  .dark .coll-ch-teampack-cta { color: #93c5fd; }

  .coll-ch-reward-row {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.45rem 0.6rem;
    border-radius: 0.4rem;
    background: rgb(241 245 249 / 1);
    font-size: 0.9rem;
  }
  .dark .coll-ch-reward-row { background: rgb(51 65 85 / 0.7); }
  .coll-ch-reward-amt {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #059669;
  }
  .dark .coll-ch-reward-amt { color: #6ee7b7; }

  /* Team picker. Hand-rolled rather than a <select> so each row can carry a
     readiness dot; styled to sit flush with the native Difficulty select
     beside it. */
  .coll-ch-pick { position: relative; width: 14rem; }
  .coll-ch-pick-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid #cbd5e1;
    background: #fff;
    font-size: 0.875rem;
    font-weight: 400;
    color: #0f172a;
    text-align: left;
    cursor: pointer;
  }
  .dark .coll-ch-pick-btn { border-color: #475569; background: #1e293b; color: #f1f5f9; }
  .coll-ch-pick-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; }
  .coll-ch-pick-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .coll-ch-pick-caret { width: 1rem; height: 1rem; flex: 0 0 auto; color: #64748b; }
  .coll-ch-pick[data-open="1"] .coll-ch-pick-caret { transform: rotate(180deg); }

  .coll-ch-pick-list {
    position: absolute;
    z-index: 40;
    top: calc(100% + 0.25rem);
    left: 0;
    width: 100%;
    max-height: 17rem;
    overflow-y: auto;
    margin: 0;
    padding: 0.25rem;
    list-style: none;
    border-radius: 0.5rem;
    border: 1px solid #cbd5e1;
    background: #fff;
    box-shadow: 0 12px 28px rgb(15 23 42 / 0.18);
  }
  .dark .coll-ch-pick-list {
    border-color: #475569;
    background: #0f172a;
    box-shadow: 0 12px 28px rgb(2 6 23 / 0.6);
  }
  .coll-ch-pick-opt {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.5rem;
    border-radius: 0.35rem;
    font-size: 0.875rem;
    color: #0f172a;
    cursor: pointer;
  }
  .dark .coll-ch-pick-opt { color: #e2e8f0; }
  .coll-ch-pick-opt:hover,
  .coll-ch-pick-opt.is-active { background: rgb(148 163 184 / 0.22); }
  .coll-ch-pick-opt[aria-selected="true"] { font-weight: 700; }
  .coll-ch-pick-swept {
    margin-left: auto;
    padding-left: 0.4rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #059669;
  }
  .dark .coll-ch-pick-swept { color: #6ee7b7; }

  /* Readiness dot. Grey = short of cards, orange pulse = can be handed in now,
     solid green = already banked this season. */
  .coll-ch-dot {
    flex: 0 0 auto;
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 9999px;
    background: #94a3b8;
    box-shadow: none;
  }
  .dark .coll-ch-dot { background: #64748b; }
  /* The placeholder row has no team, so it holds the column open instead. */
  .coll-ch-dot.is-blank { visibility: hidden; }
  .coll-ch-dot[data-state="ready"] {
    background: #f97316;
    animation: coll-ch-dot-pulse 1.25s ease-in-out infinite;
  }
  .coll-ch-dot[data-state="done"] {
    background: #10b981;
    box-shadow: 0 0 0 2px rgb(16 185 129 / 0.25);
  }
  @keyframes coll-ch-dot-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgb(249 115 22 / 0.55); }
    50% { opacity: 0.45; box-shadow: 0 0 0 4px rgb(249 115 22 / 0); }
  }
  /* A blinking dot next to every row is exactly what this setting is for. */
  @media (prefers-reduced-motion: reduce) {
    .coll-ch-dot[data-state="ready"] {
      animation: none;
      box-shadow: 0 0 0 2px rgb(249 115 22 / 0.35);
    }
  }

  .coll-ch-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.9rem;
    font-size: 0.7rem;
    color: #64748b;
  }
  .dark .coll-ch-legend { color: #94a3b8; }
  .coll-ch-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }

  /* The Lab. Recipe list on the left, the bench on the right. */
  .coll-lab-recipes { display: flex; flex-direction: column; gap: 0.25rem; }
  .coll-lab-recipe {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.1rem 0.5rem;
    width: 100%;
    padding: 0.5rem 0.6rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    background: transparent;
    text-align: left;
    cursor: pointer;
  }
  .coll-lab-recipe:hover { background: rgb(148 163 184 / 0.14); }
  .coll-lab-recipe.is-active {
    border-color: #2563eb;
    background: rgb(37 99 235 / 0.09);
  }
  .coll-lab-recipe.is-locked { opacity: 0.55; }
  .coll-lab-recipe-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0f172a;
  }
  .dark .coll-lab-recipe-name { color: #f1f5f9; }
  .coll-lab-recipe-cost {
    grid-column: 1 / -1;
    font-size: 0.7rem;
    color: #64748b;
  }
  .dark .coll-lab-recipe-cost { color: #94a3b8; }
  .coll-lab-recipe-ready {
    grid-row: 1;
    grid-column: 2;
    align-self: center;
    border-radius: 9999px;
    padding: 0.05rem 0.4rem;
    background: rgb(16 185 129 / 0.16);
    color: #047857;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .dark .coll-lab-recipe-ready { color: #6ee7b7; }

  /* Which cost you are paying. */
  .coll-lab-cost {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.4rem 0.7rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(148 163 184 / 0.5);
    background: transparent;
    font-size: 0.8rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
  }
  .dark .coll-lab-cost { color: #e2e8f0; }
  .coll-lab-cost.is-active { border-color: #2563eb; background: rgb(37 99 235 / 0.1); }
  .coll-lab-cost.is-short { opacity: 0.5; }
  .coll-lab-cost-have {
    font-size: 0.62rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
  }
  .dark .coll-lab-cost-have { color: #94a3b8; }

  /* The bays holding what is about to be destroyed. */
  .coll-lab-tray {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.4rem;
  }
  .coll-lab-bay {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.1rem;
    min-height: 3.4rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.5rem;
    border: 1px dashed rgb(148 163 184 / 0.55);
  }
  .coll-lab-bay.is-filled {
    border-style: solid;
    border-color: rgb(244 63 94 / 0.5);
    background: rgb(244 63 94 / 0.07);
    cursor: pointer;
  }
  .coll-lab-bay-empty {
    font-size: 0.7rem;
    color: #94a3b8;
    text-align: center;
  }

  /* One card in the shelf below. */
  .coll-lab-card {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(148 163 184 / 0.35);
    background: rgb(248 250 252 / 1);
    text-align: left;
    cursor: pointer;
  }
  .dark .coll-lab-card { background: rgb(51 65 85 / 0.7); }
  .coll-lab-card:hover { outline: 1px solid #2563eb; }
  .coll-lab-card.is-used { opacity: 0.35; }
  .coll-lab-card.is-featured { border-color: rgb(217 119 6 / 0.6); }
  .coll-lab-chip-rar {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #64748b;
  }
  .dark .coll-lab-chip-rar { color: #94a3b8; }
  .coll-lab-chip-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dark .coll-lab-chip-name { color: #f1f5f9; }
  .coll-lab-chip-meta { font-size: 0.65rem; color: #64748b; }
  .dark .coll-lab-chip-meta { color: #94a3b8; }
  .coll-lab-chip-feat {
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #b45309;
  }
  .dark .coll-lab-chip-feat { color: #fbbf24; }

  /* Rarity accents, matching the Challenges board. */
  .coll-lab-chip-rar.rarity-gold { color: #b8860b; }
  .coll-lab-chip-rar.rarity-chrome { color: #64748b; }
  .coll-lab-chip-rar.rarity-outburst,
  .coll-lab-chip-rar.rarity-outburst_gold { color: #ea580c; }
  .coll-lab-chip-rar.rarity-black_ice { color: #0ea5e9; }
  .coll-lab-chip-rar.rarity-legend { color: #7c3aed; }
  .coll-lab-chip-rar.rarity-autograph,
  .coll-lab-chip-rar.rarity-legend_auto { color: #db2777; }
  .coll-lab-chip-rar.rarity-patch { color: #059669; }
  .coll-lab-chip-rar.rarity-silver_metal { color: #475569; }
  .dark .coll-lab-chip-rar.rarity-gold { color: #fbbf24; }
  .dark .coll-lab-chip-rar.rarity-chrome { color: #cbd5e1; }
  .dark .coll-lab-chip-rar.rarity-silver_metal { color: #cbd5e1; }
  .dark .coll-lab-chip-rar.rarity-legend { color: #c4b5fd; }
  .dark .coll-lab-chip-rar.rarity-autograph,
  .dark .coll-lab-chip-rar.rarity-legend_auto { color: #f9a8d4; }
  .dark .coll-lab-chip-rar.rarity-patch { color: #6ee7b7; }

  .coll-lab-refresh-out {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 1.4rem;
    border-radius: 0.75rem;
    border: 2px solid #2563eb;
    background: rgb(37 99 235 / 0.1);
    font-size: 1.05rem;
    font-weight: 800;
    color: #1d4ed8;
  }
  .dark .coll-lab-refresh-out { color: #93c5fd; }

  .coll-lab-burn-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.8rem;
  }
  .coll-lab-burn-list li {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
  }

  /* Trade compose: what is currently picked, pinned above each picker so a search or a
     long shelf can never hide it. */
  .coll-trade-sel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #64748b;
  }
  .dark .coll-trade-sel-head { color: #94a3b8; }
  .coll-trade-sel-clear {
    border: 0;
    background: transparent;
    padding: 0;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #2563eb;
    cursor: pointer;
  }
  .coll-trade-sel-clear:hover { text-decoration: underline; }
  .dark .coll-trade-sel-clear { color: #93c5fd; }
  .coll-trade-sel {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    max-height: 7.5rem;
    overflow-y: auto;
    margin-top: 0.2rem;
    padding: 0.3rem;
    border-radius: 0.5rem;
    border: 1px dashed rgb(148 163 184 / 0.5);
  }
  .coll-trade-sel-empty {
    margin: 0.1rem 0.15rem;
    font-size: 0.7rem;
    color: #94a3b8;
  }
  .coll-trade-sel-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
    padding: 0.15rem 0.2rem 0.15rem 0.4rem;
    border-radius: 9999px;
    border: 1px solid rgb(37 99 235 / 0.35);
    background: rgb(37 99 235 / 0.08);
    font-size: 0.72rem;
  }
  .coll-trade-sel-rar {
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
  }
  .dark .coll-trade-sel-rar { color: #94a3b8; }
  .coll-trade-sel-rar.rarity-gold { color: #b8860b; }
  .coll-trade-sel-rar.rarity-chrome,
  .coll-trade-sel-rar.rarity-silver_metal { color: #64748b; }
  .coll-trade-sel-rar.rarity-outburst,
  .coll-trade-sel-rar.rarity-outburst_gold { color: #ea580c; }
  .coll-trade-sel-rar.rarity-black_ice { color: #0ea5e9; }
  .coll-trade-sel-rar.rarity-legend { color: #7c3aed; }
  .coll-trade-sel-rar.rarity-autograph,
  .coll-trade-sel-rar.rarity-legend_auto { color: #db2777; }
  .coll-trade-sel-rar.rarity-patch { color: #059669; }
  .coll-trade-sel-rar.rarity-inferno { color: #dc2626; }
  .dark .coll-trade-sel-rar.rarity-gold { color: #fbbf24; }
  .dark .coll-trade-sel-rar.rarity-chrome,
  .dark .coll-trade-sel-rar.rarity-silver_metal { color: #cbd5e1; }
  .dark .coll-trade-sel-rar.rarity-legend { color: #c4b5fd; }
  .dark .coll-trade-sel-rar.rarity-autograph,
  .dark .coll-trade-sel-rar.rarity-legend_auto { color: #f9a8d4; }
  .dark .coll-trade-sel-rar.rarity-patch { color: #6ee7b7; }
  .coll-trade-sel-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: #0f172a;
  }
  .dark .coll-trade-sel-name { color: #f1f5f9; }
  .coll-trade-sel-year {
    font-size: 0.6rem;
    color: #64748b;
    font-variant-numeric: tabular-nums;
  }
  .dark .coll-trade-sel-year { color: #94a3b8; }
  .coll-trade-sel-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
    border: 0;
    border-radius: 9999px;
    background: rgb(148 163 184 / 0.25);
    color: #475569;
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
  }
  .coll-trade-sel-x:hover { background: rgb(244 63 94 / 0.25); color: #b91c1c; }
  .dark .coll-trade-sel-x { color: #e2e8f0; }
  .dark .coll-trade-sel-x:hover { color: #fecaca; }