/* Collection panel — private PRO-only inventory. */

.collection-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

/* --- Collection intelligence dashboard --- */
.collection-stats-dashboard { width: 100%; padding-bottom: 18px; }
.collection-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.collection-kpi { position: relative; min-height: 126px; padding: 16px; border: 1px solid var(--border-color); border-radius: 12px; background: color-mix(in srgb, var(--widget-bg) 94%, transparent); display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; overflow: hidden; }
.collection-kpi-label { color: var(--chart-title-color); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.collection-kpi-value { color: var(--accent-color); font-size: clamp(24px, 2.2vw, 34px); font-weight: 750; font-variant-numeric: tabular-nums; }
.collection-kpi-value.positive { color: var(--success-color, #45bd79); }
.collection-kpi-value.negative { color: var(--danger-color, #f06a70); }
.collection-kpi-detail { color: var(--text-muted); font-size: 11px; line-height: 1.3; }
.collection-dashboard-grid { display: grid; gap: 14px; margin-bottom: 14px; }
.collection-dashboard-grid--ranked, .collection-dashboard-grid--charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.collection-dashboard-card { min-width: 0; padding: 14px; border: 1px solid var(--border-color); border-radius: 12px; background: color-mix(in srgb, var(--widget-bg) 94%, transparent); }
.collection-dashboard-card > header { margin-bottom: 12px; text-align: center; }
.collection-dashboard-card h3 { margin: 0; color: var(--text-primary); font-size: 14px; }
.collection-dashboard-card header p { margin: 4px 0 0; color: var(--text-muted); font-size: 11px; font-style: italic; }
.collection-ranked-row { display: grid; grid-template-columns: 22px 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 56px; padding: 7px 4px; border-top: 1px solid color-mix(in srgb, var(--border-color) 65%, transparent); }
.collection-ranked-thumb { padding: 0; border: 0; background: transparent; cursor: pointer; width: 52px; aspect-ratio: 63/88; border-radius: 6px; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.collection-ranked-thumb:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .45); }
.collection-ranked-row img { width: 100%; height: 100%; border-radius: 6px; object-fit: cover; object-position: top; }
.collection-ranked-position { color: var(--accent-color); font-size: 12px; font-weight: 800; text-align: center; }
.collection-ranked-copy { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.collection-ranked-copy strong { overflow: hidden; color: var(--text-primary); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.collection-ranked-copy span { color: var(--text-muted); font-size: 10px; }
.collection-ranked-metric { color: var(--text-primary); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Fanned "hand" preview panels — Most Owned / Expensive / Deck Favorites /
   Hidden Gems / price movers. Card images overlap like a held hand; each entry's
   data sits straight in an arc above its card, always visible and never
   overlapping (label width is kept below the card spacing at every size).
   All sizing is fluid off the panel width via container queries so the cards
   grow to use the available space; hovering straightens and lifts a card for
   extra emphasis, but no hover is required to read any entry. */
/* The panel is the query container so all `cqw` below resolve against the panel
   width. (An element with `container-type` queries its ancestor container, not
   itself, so the fan's own height must be measured from the panel, not here.) */
.collection-fan-panel { container-type: inline-size; }
.collection-fan {
  position: relative;
  width: 100%;
  /* Definite height (absolute children can't size it) — just tall enough for the
     fan, scaling with the panel width, with a floor so it never collapses. */
  height: max(248px, 52cqw);
  margin-top: 4px;
}
.collection-fan-card {
  /* Signed offset from the middle card, e.g. -2,-1,0,1,2 for five cards. */
  --o: calc(var(--i) - (var(--fan-n) - 1) / 2);
  --dx: calc(var(--o) * 18cqw);                       /* horizontal spread */
  --dip: calc(var(--o) * var(--o) * 1.8cqw);          /* outer cards dip down (arc) */
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: var(--i);
  width: 23cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transform: translateX(calc(-50% + var(--dx))) translateY(var(--dip));
  transition: transform .18s ease;
}
.collection-fan-card:hover {
  z-index: 30;
  transform: translateX(calc(-50% + var(--dx))) translateY(calc(var(--dip) - 20px));
}
.collection-fan-label {
  width: 16.5cqw;                                      /* < 18cqw spread → never overlaps */
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 5px 3px;
  text-align: center;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent);
  background: color-mix(in srgb, var(--widget-bg) 90%, #000);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .35);
}
.collection-fan-label strong { max-width: 100%; overflow: hidden; color: var(--text-primary); font-size: clamp(9px, 1.95cqw, 12px); text-overflow: ellipsis; white-space: nowrap; }
.collection-fan-label span { max-width: 100%; overflow: hidden; color: var(--text-muted); font-size: clamp(8px, 1.55cqw, 10px); text-overflow: ellipsis; white-space: nowrap; }
.collection-fan-metric { color: var(--accent-color); font-size: clamp(9px, 1.9cqw, 12px); font-weight: 800; font-variant-numeric: tabular-nums; }
.collection-fan-metric.positive { color: var(--success-color, #45bd79); }
.collection-fan-metric.negative { color: var(--danger-color, #f06a70); }
.collection-fan-thumb {
  width: 100%;
  aspect-ratio: 63/88;
  overflow: hidden;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
  background: color-mix(in srgb, var(--widget-bg) 90%, #000);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .5);
  /* Only the image fans (angled); the label above stays perfectly straight. */
  transform: rotate(calc(var(--o) * 6deg));
  transform-origin: center top;
  transition: transform .18s ease, box-shadow .18s ease;
}
.collection-fan-card:hover .collection-fan-thumb { transform: rotate(0deg) scale(1.04); box-shadow: 0 16px 34px rgba(0, 0, 0, .6); }
.collection-fan-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.collection-fan-thumb > .deck-card-preview-image,
.collection-fan-thumb .card-image-container { width: 100%; height: 100%; }
.collection-fan-placeholder { width: 100%; height: 100%; }

/* Narrow panels can't fit five single-row labels side by side, so the names get
   crushed. Below ~480px of panel width, stack the labels into a two-row zig-zag
   arc above the fan: same-row labels are two card-slots apart, so each label can
   be ~double the width and show the full name without a hover. Container-query
   based, so it only applies to genuinely narrow panels (mobile, or a cramped
   2-column layout) and leaves the desktop single-row arc alone. */
@container (max-width: 480px) {
  /* One tunable label height drives the row offset and the thumb's top padding,
     so the two rows never overlap and nothing clips. --label-h must fit three
     single lines (name, set/number, metric) plus the label's own padding. */
  .collection-fan { --label-h: 48px; --label-gap: 6px; height: max(268px, 76cqw); }
  .collection-fan-card {
    width: 24cqw;
    --dx: calc(var(--o) * 19cqw);
    --dip: 0px;                 /* flat rows read cleaner than an arc at this size */
    /* Reserve both label rows (+ the gap between them and the thumb). */
    padding-top: calc(var(--label-h) * 2 + var(--label-gap) + 6px);
    gap: 0;
  }
  .collection-fan-thumb { transform: rotate(calc(var(--o) * 5deg)); }
  .collection-fan-card:hover .collection-fan-thumb { transform: rotate(0deg) scale(1.04); }
  .collection-fan-label {
    position: absolute;         /* out of flow so its width can exceed the card */
    left: 50%;
    top: calc(var(--label-h) + var(--label-gap));   /* lower row (even slots) */
    transform: translateX(-50%);
    width: 30cqw;
    height: var(--label-h);
    justify-content: center;
    padding: 3px 5px;
    line-height: 1.2;
  }
  .collection-fan-card:nth-child(odd) .collection-fan-label { top: 0; }   /* upper row */
  .collection-fan-label strong { font-size: 10px; }
  .collection-fan-label span { font-size: 8px; }
  .collection-fan-metric { font-size: 10px; white-space: nowrap; }
}

.collection-widget-empty { min-height: 180px; display: grid; place-items: center; padding: 20px; color: var(--text-muted); font-size: 12px; text-align: center; }
.collection-chart-panel { min-height: 260px; }
.collection-bar-list { display: flex; flex-direction: column; gap: 9px; }
.collection-bar-list--compact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.collection-bar-row { display: grid; grid-template-columns: minmax(74px, 120px) minmax(50px, 1fr) 34px; gap: 8px; align-items: center; min-height: 17px; color: var(--text-muted); font-size: 11px; }
.collection-bar-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collection-bar-row > b { color: var(--text-primary); font-size: 10px; font-variant-numeric: tabular-nums; text-align: right; }
.collection-bar-track { height: 8px; overflow: hidden; border-radius: 99px; background: color-mix(in srgb, var(--border-color) 75%, transparent); }
.collection-bar-track i { display: block; height: 100%; min-width: 3px; border-radius: inherit; background: linear-gradient(90deg, var(--accent-color), var(--accent-hover)); }

/* Mana / generic symbols used as chart keys. */
.collection-mana-symbol { width: 15px; height: 15px; vertical-align: middle; }
.collection-mana-generic { display: inline-flex; align-items: center; gap: 1px; color: var(--text-muted); font-size: 11px; }

/* Donut pie charts (Color Identity, Rarity, Condition, Finish) now render via
   the shared DonutChart component — ring/legend styles live in components.css
   (.donut-*). Only the collection-specific legend width remains here. */
.collection-pie-panel .donut-legend { min-width: 172px; }
.collection-tag-panel { grid-column: 1 / -1; min-height: 210px; }
.collection-tag-cloud { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 9px; min-height: 145px; }
.collection-tag-cloud span { padding: 7px 10px; border: 1px solid var(--accent-color); border-radius: 10px; color: var(--accent-color); font-size: 12px; }
.collection-tag-cloud b { display: inline-grid; min-width: 20px; height: 20px; margin-left: 4px; place-items: center; border-radius: 6px; background: color-mix(in srgb, var(--accent-color) 16%, transparent); font-size: 10px; }
.collection-stats-empty { min-height: 380px; }
.collection-stats-empty h3 { margin: 12px 0 0; color: var(--text-primary); }
.collection-dashboard-grid--market { grid-template-columns: repeat(2,minmax(0,1fr)); }
.collection-market-arrow { font-size: 18px; font-weight: 900; text-align: center; }
.collection-market-arrow.positive,.collection-market-metric .positive { color: var(--success-color,#45bd79); }
.collection-market-arrow.negative,.collection-market-metric .negative { color: var(--danger-color,#f06a70); }
.collection-market-metric { display:flex; flex-direction:column; align-items:flex-end; gap:2px; font-variant-numeric:tabular-nums; }
.collection-market-metric b { font-size:12px; }
.collection-market-metric span { color:var(--text-muted); font-size:10px; }
/* Fills the Completion subtab: minimum height, but grows to use the space. */
.collection-set-completion { flex:1; display:flex; flex-direction:column; min-height:0; margin-top:4px; padding:16px; border:1px solid var(--border-color); border-radius:14px; background:color-mix(in srgb,var(--widget-bg) 94%,transparent); }
.collection-section-heading { display:flex; justify-content:space-between; align-items:end; margin:0 0 14px; }
.collection-section-heading h2 { margin:0; color:var(--text-primary); font-size:18px; }
.collection-section-heading p { margin:4px 0 0; color:var(--text-muted); font-size:12px; }
.collection-completion-kpis { grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:0; }
/* One row that fills the widget and can shrink (minmax 0) so the two columns
   scroll internally instead of stretching the widget to fit their content. */
.collection-set-layout { flex:1; display:grid; grid-template-columns:minmax(220px,300px) minmax(0,1fr); grid-template-rows:minmax(0,1fr); min-height:520px; overflow:hidden; border:1px solid var(--border-color); border-radius:12px; background:color-mix(in srgb,var(--panel-bg,#0d1117) 40%,transparent); }
.collection-set-list { min-height:0; overflow-y:auto; border-right:1px solid var(--border-color); }

/* Collapsible release-year sections */
.collection-year-group { border-bottom:1px solid color-mix(in srgb,var(--border-color) 55%,transparent); }
/* Tinted with the accent color so year headers read as distinct bands above the set rows. */
.collection-year-header { position:sticky; top:0; z-index:1; width:100%; display:grid; grid-template-columns:14px minmax(0,1fr) auto; align-items:center; gap:3px 8px; padding:9px 10px; border:0; background:color-mix(in srgb,var(--accent-color) 16%,var(--widget-bg)); color:var(--text-primary); text-align:left; cursor:pointer; }
.collection-year-header:hover { background:color-mix(in srgb,var(--accent-color) 24%,var(--widget-bg)); }
.collection-year-chevron { color:var(--text-muted); font-size:11px; line-height:1; transition:transform .15s ease; }
.collection-year-group.collapsed .collection-year-chevron { transform:rotate(-90deg); }
.collection-year-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:700; }
.collection-year-title em { margin-left:6px; color:var(--text-muted); font-style:normal; font-weight:500; font-size:10px; }
.collection-year-header b { color:var(--accent-color); font-size:11px; font-variant-numeric:tabular-nums; }
.collection-year-header > i { grid-column:2/-1; height:4px; overflow:hidden; border-radius:99px; background:var(--border-color); }
.collection-year-header > i em { display:block; height:100%; border-radius:inherit; background:var(--accent-gradient); }
.collection-year-sets { display:flex; flex-direction:column; padding:2px 6px 6px; }
.collection-year-group.collapsed .collection-year-sets { display:none; }

.collection-year-sets button { width:100%; display:grid; grid-template-columns:16px minmax(0,1fr) auto; align-items:center; gap:4px 8px; padding:9px 10px; border:0; border-radius:8px; background:transparent; color:var(--text-primary); text-align:left; cursor:pointer; }
.collection-year-sets button:hover,.collection-year-sets button.active { background:color-mix(in srgb,var(--accent-color) 13%,transparent); }
.collection-year-sets button div { min-width:0; display:flex; flex-direction:column; gap:3px; }
/* Masked set symbol (Scryfall icon SVG) in the theme text color; empty variant
   keeps the column width so set names stay aligned when a symbol is missing. */
.collection-set-symbol { width:16px; height:16px; background-color:var(--text-muted); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; }
.collection-set-symbol--empty { background:none; }
.collection-year-sets button strong { overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.collection-year-sets button span { color:var(--text-muted); font-size:10px; }
.collection-year-sets button b { color:var(--accent-color); font-size:11px; }
.collection-year-sets button > i { grid-column:1/-1; height:4px; overflow:hidden; border-radius:99px; background:var(--border-color); }
.collection-year-sets button > i em { display:block; height:100%; border-radius:inherit; background:var(--accent-gradient); }
.collection-binder-host { min-width:0; min-height:0; overflow-y:auto; padding:14px; }
.collection-binder-empty { min-height:480px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--text-muted); }
.collection-binder > header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.collection-binder > header h3 { margin:0; color:var(--text-primary); font-size:16px; }
.collection-binder > header span { color:var(--text-muted); font-size:11px; }
.collection-binder > header b { color:var(--accent-color); font-size:18px; }
.collection-binder-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; padding-right:4px; }
.collection-binder-card { min-width:0; cursor:pointer; }
.collection-binder-card .card-image-container { transition:transform .15s ease, box-shadow .15s ease; }
.collection-binder-card:hover .card-image-container { transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.4); }
.collection-binder-card .card-image-container { position:relative; width:100%; aspect-ratio:63/88; border-radius:8px; }
.collection-binder-card .card-image-wrapper { position:relative; width:100%; height:100%; }
.collection-binder-card img { width:100%; height:100%; border-radius:8px; object-fit:cover; }
.collection-binder-card > strong { display:block; margin-top:5px; overflow:hidden; color:var(--text-primary); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.collection-binder-card > span { color:var(--text-muted); font-size:9px; }
.collection-binder-card.unowned { opacity:.3; filter:grayscale(1); }
.collection-binder-card.unowned:hover { opacity:.65; }
.collection-binder-count { position:absolute; right:5px; bottom:5px; z-index:4; padding:3px 6px; border-radius:9px; background:rgba(7,12,18,.88); color:#fff; font-size:10px; font-weight:800; }

@media (max-width: 1100px) { .collection-kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) {
    .collection-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .collection-kpi { min-height: 105px; padding: 11px 8px; }
    .collection-kpi-value { font-size: 22px; }
    .collection-dashboard-grid--ranked, .collection-dashboard-grid--charts { grid-template-columns: 1fr; }
    .collection-tag-panel { grid-column: auto; }
    .collection-ranked-row { grid-template-columns: 18px 44px minmax(0, 1fr) auto; gap: 7px; }
    .collection-ranked-thumb { width: 44px; }
    .collection-bar-list--compact { grid-template-columns: 1fr; }
    .collection-dashboard-grid--market { grid-template-columns:1fr; }
    .collection-set-layout { grid-template-columns:1fr; min-height:0; }
    .collection-set-list { max-height:46vh; overflow-y:auto; border-right:0; border-bottom:1px solid var(--border-color); }
    .collection-completion-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .collection-binder-host { padding:10px; }
    .collection-binder-grid { grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); max-height:none; }
}

.collection-workspace {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.collection-subtab-wrapper {
    /* Pin the subtabs to the top of the scrolling panel, matching every other
       tab. `.collection-panel` is the scroll container; the opaque bg-color
       matches the panel's solid top strip so scrolled content is hidden behind. */
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--bg-color);
    padding: 8px 0 0;
    flex-shrink: 0;
}

.collection-subtab-content {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 12px 0;
}

/* --- Grace-period banner --- */
.collection-grace-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--warning, #d9a441) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning, #d9a441) 40%, transparent);
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.4;
    margin: 12px 12px 0;
}

/* --- Cards toolbar (Import/Export actions) --- */
.collection-export-btn,
.collection-import-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: none;
    border-radius: 8px;
    background: var(--widget-bg);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.collection-import-btn {
    background: var(--accent-gradient);
    color: var(--button-primary-text, #fff);
}

.collection-export-btn:hover,
.collection-import-btn:hover {
    filter: brightness(1.08);
}

/* Actions hamburger menu — the toggle reuses the deck toolbar's .deck-control-btn
   (the collection toolbar shares .deck-toolbar-container) so it looks identical. */
.collection-menu-backdrop { position: fixed; inset: 0; z-index: 150; background: transparent; }
.dropdown-content .menu-item--danger { color: var(--danger-color, #e05252); }
.dropdown-content .menu-item--danger:hover { background: color-mix(in srgb, var(--danger-color, #e05252) 14%, transparent); }

/* --- Deck-style browse (reused deck views inside the Collection panel) --- */

/* The flat Name view uses VirtualList, which virtualizes against its own
   scrollport and therefore needs a height-constrained host. Grouped modes
   scroll within the same host so List mode behaves consistently. */
.collection-list-host {
    min-height: 320px;
    overflow: visible;
}

.collection-browse .deck-toolbar-container {
    margin-bottom: 4px;
}

@media (max-width: 768px) {
    .collection-browse .collection-toolbar .toolbar-controls-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px !important;
        width: 100%;
    }

    .collection-browse .collection-toolbar .main-search-row {
        display: contents !important;
    }

    .collection-browse .collection-toolbar .search-input-container,
    .collection-browse .collection-toolbar .sort-select-container,
    .collection-browse .collection-toolbar .secondary-row {
        width: 100% !important;
        min-width: 0;
    }

    .collection-browse .collection-toolbar .toolbar-search-input {
        width: 100% !important;
        max-width: none !important;
    }

    .collection-browse .collection-toolbar .toolbar-sort-control {
        width: 100%;
    }

    .collection-browse .collection-toolbar .secondary-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center;
        justify-content: flex-start !important;
        gap: 8px !important;
    }

    .collection-browse .collection-toolbar .button-group-left,
    .collection-browse .collection-toolbar .button-group-right {
        display: flex !important;
        align-items: center;
        gap: 8px;
    }

    .collection-browse .collection-toolbar .button-group-left {
        min-width: 0;
        flex: 0 1 auto;
    }

    .collection-browse .collection-toolbar .button-group-right {
        margin-left: auto;
        flex: 0 0 auto;
    }

    .collection-browse .collection-toolbar .toolbar-filter-btn,
    .collection-browse .collection-toolbar .button-group-right .dropdown-group,
    .collection-browse .collection-toolbar .button-group-right .deck-control-btn {
        flex: 0 0 42px !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
    }
}

/* Shared card metadata cluster — used by the grid footer and by both the
   collection and deck list rows (see `CardMetaCluster`). Base = a compact
   inline row: #NUM SET [set symbol] [price]. */
.card-meta-cluster {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 11px;
    color: var(--text-muted);
}

.card-meta-symbol {
    width: 18px;
    flex: 0 0 18px;
    display: flex;
    justify-content: center;
}

/* Masked so the glyph inherits the theme text color instead of the symbol's
   shipped fill (contrast on any background). */
.card-meta-set-symbol {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: var(--text-muted);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.card-meta-set {
    min-width: 30px;
    text-align: left;
    white-space: nowrap;
}

.card-meta-number {
    width: 12ch;
    min-width: 12ch;
    text-align: right;
    white-space: nowrap;
}

.card-meta-condition {
    min-width: 34px;
    text-align: left;
    white-space: nowrap;
}

.card-meta-foil {
    flex: 0 0 16px;
    width: 16px;
    text-align: center;
    color: #8fd8ff;
    font-size: 13px;
    line-height: 1;
    text-shadow: 0 0 4px rgba(90, 205, 255, 0.85), 0 0 7px rgba(220, 120, 255, 0.55);
}

.entry-name .card-meta-foil,
.card-widget-name .card-meta-foil {
    display: inline-flex;
    margin-left: 5px;
    vertical-align: -1px;
}

.entry-name .card-entry-name-trade {
    display: inline-flex;
    margin-left: 5px;
    vertical-align: -2px;
}

.card-meta-price {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-width: 52px;
    text-align: right;
}

/* List context: sits between the (flex:1) name and the row controls. */
.card-meta-cluster--list {
    flex: 0 0 auto;
}

/* Grid context: a full-width metadata line beneath the card name; price is
   pushed to the far right. */
.card-meta-cluster--grid {
    width: 100%;
    margin-top: 4px;
    gap: 6px;
}

.card-meta-cluster--grid .card-meta-number {
    width: auto;
    min-width: 0;
    text-align: left;
}

.card-meta-cluster--grid .card-meta-price {
    margin-left: auto;
}

.card-widget-row-condition {
    margin-left: auto;
    min-width: 34px;
    color: var(--text-muted);
    font-size: 11px;
    text-align: right;
    white-space: nowrap;
}

.collection-entry-adjustment {
    flex: 0 0 auto;
}

/* Price as its own list cell (kept out of the cluster so condition can sit
   closest to the count controls). */
.card-entry-price {
    flex: 0 0 auto;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-width: 52px;
    text-align: right;
    font-size: 11px;
}

.card-entry-trade-slot {
    flex: 0 0 18px;
    width: 18px;
    min-width: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.card-entry-trade,
.card-entry-condition {
    flex: 0 0 auto;
}

.card-widget-row-trade.collection-trade-badge {
    margin-left: 0;
}

/* Line-break helper: hidden on wide layouts, forces a wrap on narrow ones. */
.card-list-break {
    display: none;
}

/* Narrow widths: two-row list rows shared by the Deck and Cards subtabs —
   card name, price, and trade on top; set info, condition, and controls below. */
@media (max-width: 768px) {
    /* Three columns: flexible name/meta on the left, optional top-row actions
       in the middle, and price/count controls flush to the right edge. */
    .card-list-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        column-gap: 6px;
        row-gap: 6px;
        align-items: center;
    }

    .card-list-row > .entry-name {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    .card-list-row > .card-entry-price {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        min-width: 6ch;
    }

    .card-list-row > .card-entry-condition {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
    }

    .card-list-row > .card-list-break {
        display: none;
    }

    .card-list-row > .card-meta-cluster {
        grid-column: 1;
        grid-row: 2;
        gap: 4px;
        min-width: 0;
    }

    /* Deck rows split role buttons to the title line while the count widget
       remains on the lower row. */
    .card-list-row > .entry-controls {
        display: contents;
    }

    /* Role buttons (commander/companion) sit immediately left of the count widget. */
    .card-list-row > .entry-controls > .entry-role-controls {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
        flex: 0 0 auto;
        width: auto;
        gap: 4px;
    }

    .card-list-row > .entry-controls > .entry-role-controls .companion-placeholder,
    .card-list-row > .entry-controls > .entry-role-controls .crown-placeholder {
        display: none;
    }

    .card-list-row > .entry-controls > .card-widget-controls {
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
    }

    /* Push collection count widgets to the right edge of the second row. */
    .card-list-row > .collection-entry-adjustment {
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
    }

    .card-list-row .card-meta-symbol {
        width: 16px;
        flex-basis: 16px;
    }

    .card-list-row .card-meta-set {
        min-width: 26px;
    }

    .card-list-row .card-meta-number {
        width: 10ch;
        min-width: 10ch;
        font-size: 10px;
    }

    .card-list-row .card-meta-condition {
        min-width: 28px;
    }

    .card-list-row .card-meta-foil {
        flex-basis: 14px;
        width: 14px;
    }
}

@media (max-width: 768px) {
    .collection-grid-host .card-widget-footer {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-rows: repeat(4, auto);
        gap: 5px 6px;
    }

    .collection-grid-host .card-widget-info,
    .collection-grid-host .card-meta-cluster--grid,
    .collection-grid-host .card-widget-actions-row {
        display: contents;
    }

    .collection-grid-host .card-widget-name {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .collection-grid-host .card-meta-number {
        grid-column: 1;
        grid-row: 2;
        min-width: 0;
        width: auto;
        justify-self: start;
    }

    .collection-grid-host .card-meta-set {
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
        min-width: 0;
    }

    .collection-grid-host .card-meta-symbol {
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
    }

    .collection-grid-host .card-widget-row-condition {
        grid-column: 1 / 3;
        grid-row: 3;
        justify-self: start;
        margin-left: 0;
        min-width: 0;
    }

    .collection-grid-host .card-meta-price {
        grid-column: 3;
        grid-row: 3;
        justify-self: end;
        margin-left: 0;
        min-width: 0;
    }

    .collection-grid-host .card-widget-controls {
        grid-column: 1 / 3;
        grid-row: 4;
        justify-self: start;
    }

    .collection-grid-host .card-widget-row-trade {
        grid-column: 3;
        grid-row: 4;
        justify-self: end;
        align-self: center;
    }
}

/* Condition-specific physical wear, modelled on how real cards actually wear:
   soft rounded corner/edge scuffs (whitening) escalating to a blotchy worn
   border, then creases, then water damage. No colour tinting — the marks convey
   the grade. Mint/NM show nothing at all.

   The wear layers are held in custom properties (percentage-based, so identical
   on list/grid/preview and stack) and composed per grade. Layer roles on the
   list/grid/preview surfaces:
     ::before  = corner scuffs / worn border — screen-blended so whitening reads
                 like exposed cardstock at the edges.
     ::after   = creases (HP+) and the water stain (DMG) — normal blend so the
                 darker fold lines actually show.
   Stack cards only have ::before free (::after is the foil shimmer), so their
   marks are all composed into ::before with a normal blend. */

/* Blotchy worn border (MP+): soft dabs of varying depth all the way around the
   perimeter — never a solid frame. Corners wear hardest. */
.collection-condition-moderate,
.collection-condition-heavy,
.collection-condition-damaged {
    --wear-border:
        radial-gradient(circle at 2% 2.5%, rgba(255,255,255,.5) 0, transparent 4.4%),
        radial-gradient(circle at 98% 2%, rgba(255,255,255,.4) 0, transparent 4%),
        radial-gradient(circle at 1.5% 98%, rgba(255,255,255,.46) 0, transparent 4.4%),
        radial-gradient(circle at 99% 99%, rgba(255,255,255,.42) 0, transparent 4%),
        radial-gradient(circle at 33% 0.8%, rgba(255,255,255,.3) 0, transparent 3%),
        radial-gradient(circle at 64% 1.6%, rgba(255,255,255,.19) 0, transparent 2.4%),
        radial-gradient(circle at 26% 99.2%, rgba(255,255,255,.32) 0, transparent 3%),
        radial-gradient(circle at 61% 98.6%, rgba(255,255,255,.2) 0, transparent 2.4%),
        radial-gradient(circle at 0.8% 31%, rgba(255,255,255,.3) 0, transparent 3%),
        radial-gradient(circle at 1.8% 72%, rgba(255,255,255,.19) 0, transparent 2.4%),
        radial-gradient(circle at 99.2% 43%, rgba(255,255,255,.3) 0, transparent 3%),
        radial-gradient(circle at 98.4% 78%, rgba(255,255,255,.2) 0, transparent 2.4%);
}

/* Crease "/" running lower-left → upper-right (HP+). */
.collection-condition-heavy,
.collection-condition-damaged {
    --crease-a: linear-gradient(125deg, transparent 43.8%, rgba(255,255,255,.4) 45.1%, rgba(45,28,18,.46) 46.4%, transparent 47.7%);
}

/* Second crease "\" running upper-left → lower-right, plus an off-centre,
   irregular water stain (DMG). */
.collection-condition-damaged {
    --crease-b: linear-gradient(46deg, transparent 55.3%, rgba(255,255,255,.36) 56.5%, rgba(45,26,15,.42) 57.8%, transparent 59.1%);
    --water:
        radial-gradient(ellipse 30% 23% at 62% 63%, rgba(96,84,54,.32) 0, rgba(86,74,48,.13) 56%, transparent 80%),
        radial-gradient(ellipse 15% 12% at 71% 57%, rgba(92,80,52,.26) 0, transparent 72%),
        radial-gradient(ellipse 34% 27% at 61% 63%, transparent 62%, rgba(58,48,28,.25) 71%, transparent 82%);
}

/* ── Lightly played: a couple of small, soft, rounded corner scuffs — minimal
   intrusion. The top-left one is always present so wear reads in a Stack pile. */
.collection-condition-lightly .card-image-wrapper::before,
.collection-condition-moderate .card-image-wrapper::before,
.collection-condition-heavy .card-image-wrapper::before,
.collection-condition-damaged .card-image-wrapper::before,
.card-preview-image-wrapper.collection-condition-lightly::before,
.card-preview-image-wrapper.collection-condition-moderate::before,
.card-preview-image-wrapper.collection-condition-heavy::before,
.card-preview-image-wrapper.collection-condition-damaged::before {
    content: "";
    position: absolute;
    inset: 1%;
    z-index: 7;
    pointer-events: none;
    border-radius: inherit;
    mix-blend-mode: screen;
    background:
        radial-gradient(circle at 3.5% 4%, rgba(255,255,255,.4) 0, transparent 3.6%),
        radial-gradient(circle at 96.5% 8.5%, rgba(255,255,255,.28) 0, transparent 2.8%),
        radial-gradient(circle at 3% 96.5%, rgba(255,255,255,.32) 0, transparent 3.4%);
}

/* ── Moderately played and up: swap the corner scuffs for the blotchy worn
   border. */
.collection-condition-moderate .card-image-wrapper::before,
.collection-condition-heavy .card-image-wrapper::before,
.collection-condition-damaged .card-image-wrapper::before,
.card-preview-image-wrapper.collection-condition-moderate::before,
.card-preview-image-wrapper.collection-condition-heavy::before,
.card-preview-image-wrapper.collection-condition-damaged::before {
    background: var(--wear-border);
}

/* ── Heavily played: one diagonal crease. */
.collection-condition-heavy .card-image-wrapper::after,
.card-preview-image-wrapper.collection-condition-heavy::after,
.collection-condition-damaged .card-image-wrapper::after,
.card-preview-image-wrapper.collection-condition-damaged::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 8;
    pointer-events: none;
    border-radius: inherit;
    background: var(--crease-a);
}

/* ── Damaged: two crossing creases + off-centre water stain. */
.collection-condition-damaged .card-image-wrapper::after,
.card-preview-image-wrapper.collection-condition-damaged::after {
    background: var(--crease-a), var(--crease-b), var(--water);
}

/* ── Stack cards: everything composed into ::before, normal blend. */
.stack-card.collection-condition-lightly::before,
.stack-card.collection-condition-moderate::before,
.stack-card.collection-condition-heavy::before,
.stack-card.collection-condition-damaged::before {
    content: "";
    position: absolute;
    inset: 1%;
    z-index: 4;
    pointer-events: none;
    border-radius: 9px;
    background:
        radial-gradient(circle at 3.5% 4%, rgba(255,255,255,.34) 0, transparent 3.6%),
        radial-gradient(circle at 96.5% 8.5%, rgba(255,255,255,.24) 0, transparent 2.8%),
        radial-gradient(circle at 3% 96.5%, rgba(255,255,255,.28) 0, transparent 3.4%);
}

.stack-card.collection-condition-moderate::before {
    background: var(--wear-border);
}

.stack-card.collection-condition-heavy::before {
    background: var(--crease-a), var(--wear-border);
}

.stack-card.collection-condition-damaged::before {
    background: var(--crease-a), var(--crease-b), var(--water), var(--wear-border);
}

.collection-page-value {
    padding: 8px 4px;
    text-align: right;
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.collection-load-sentinel {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.collection-load-more {
    padding: 8px 18px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--widget-bg);
    color: var(--text-primary);
    cursor: pointer;
}

/* --- Stats --- */
.collection-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.collection-stat-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    border-radius: 10px;
    background: var(--widget-bg);
}

.collection-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
}

.collection-stat-value.positive { color: var(--success, #4caf82); }
.collection-stat-value.negative { color: var(--danger, #e05252); }

.collection-stat-label {
    font-size: 12px;
    color: var(--text-muted);
}

/* --- History widget --- */
.collection-history-dashboard { width: 100%; padding: 4px 0 18px; }
.collection-history-widget { padding: 16px; }
.collection-history-widget > header { margin-bottom: 12px; text-align: left; }
.collection-history-list { display: flex; flex-direction: column; gap: 5px; }

.collection-history-entry { border: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent); border-radius: 9px; overflow: hidden; background: color-mix(in srgb, var(--widget-bg) 92%, transparent); }
/* Grid so every entry's columns line up like the List-view rows: chevron,
   a fixed-width type/source column, the card name (flexes), then the count
   delta and timestamp pinned right. */
.collection-history-head { width: 100%; display: grid; grid-template-columns: 14px 104px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 9px 12px; border: 0; background: transparent; color: var(--text-primary); text-align: left; cursor: pointer; font-size: 13px; }
.collection-history-head:hover { background: color-mix(in srgb, var(--accent-color) 8%, transparent); }
.collection-history-chevron { color: var(--text-muted); font-size: 11px; line-height: 1; transition: transform .15s ease; }
.collection-history-entry:not(.expanded) .collection-history-chevron { transform: rotate(-90deg); }
/* Type + optional source stack in one fixed-width column so the card names to
   their right always start at the same x regardless of whether a source shows. */
.collection-history-typecol { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.collection-history-type { font-weight: 700; text-transform: capitalize; white-space: nowrap; }
.collection-history-source { align-self: flex-start; max-width: 100%; padding: 1px 6px; border-radius: 6px; background: color-mix(in srgb, var(--border-color) 50%, transparent); color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.collection-history-summary { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.collection-history-delta { flex: 0 0 auto; min-width: 44px; font-weight: 700; text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.collection-history-delta.positive { color: var(--success-color, #4caf82); }
.collection-history-delta.negative { color: var(--danger-color, #e05252); }
.collection-history-time { flex: 0 0 auto; min-width: 116px; color: var(--text-muted); text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }

.collection-history-detail { display: none; flex-wrap: wrap; gap: 16px; padding: 14px 12px; border-top: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent); background: color-mix(in srgb, var(--panel-bg, #0d1117) 30%, transparent); }
.collection-history-entry.expanded .collection-history-detail { display: flex; }
.collection-history-transition { display: flex; align-items: center; gap: 10px; }
.collection-history-arrow { color: var(--text-muted); font-size: 18px; font-weight: 800; }

.collection-history-card { width: 104px; display: flex; flex-direction: column; gap: 2px; }
/* position:relative + overflow:hidden keep the foil shimmer / condition overlays
   (absolutely-positioned pseudo-elements) clipped to the card, not the viewport. */
.collection-history-thumb { position: relative; overflow: hidden; width: 104px; aspect-ratio: 63/88; border-radius: 8px; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.collection-history-thumb:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .45); }
.collection-history-thumb .card-image-wrapper { width: 100%; height: 100%; }
.collection-history-thumb img { display: block; width: 100%; height: 100%; border-radius: 8px; object-fit: cover; object-position: top; }
.collection-history-card strong { overflow: hidden; color: var(--text-primary); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.collection-history-card > span { color: var(--text-muted); font-size: 10px; }
.collection-history-card .collection-history-tag { color: var(--accent-color); font-weight: 700; }

/* Action bar pinned at the top of an expanded entry. */
.collection-history-actionbar { flex: 1 1 100%; display: flex; justify-content: flex-end; margin-bottom: 4px; padding-bottom: 10px; border-bottom: 1px solid color-mix(in srgb, var(--border-color) 45%, transparent); }
.collection-history-revert { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid color-mix(in srgb, var(--danger-color, #e05252) 55%, var(--border-color)); border-radius: 7px; background: color-mix(in srgb, var(--danger-color, #e05252) 12%, transparent); color: var(--danger-color, #e05252); font-size: 12px; font-weight: 600; cursor: pointer; transition: background .15s ease; }
.collection-history-revert:hover { background: color-mix(in srgb, var(--danger-color, #e05252) 22%, transparent); }

/* Location manager modal */
.collection-locations-modal { max-width: 520px; width: 92%; }
.collection-locations-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.collection-locations-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text-primary); }
.collection-locations-close { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; padding: 2px; line-height: 1; }
.collection-locations-close:hover { color: var(--text-primary); }
.collection-locations-hint { margin: 0 0 12px; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.collection-locations-list { max-height: 46vh; overflow-y: auto; border: 1px solid var(--border-color); border-radius: 8px; padding: 4px; margin-bottom: 12px; }
.collection-locations-empty { padding: 18px; text-align: center; color: var(--text-muted); font-size: 12px; }
.collection-location-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; color: var(--text-primary); font-size: 13px; }
.collection-location-row:hover { background: color-mix(in srgb, var(--accent-color) 8%, transparent); }
.collection-location-row > svg { color: var(--text-muted); flex: 0 0 auto; }
.collection-location-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collection-location-del { flex: 0 0 auto; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; padding: 2px 4px; border-radius: 5px; }
.collection-location-del:hover { color: var(--danger-color, #e05252); background: color-mix(in srgb, var(--danger-color, #e05252) 12%, transparent); }
.collection-location-create { display: flex; flex-direction: column; gap: 8px; }
.collection-location-parent { width: 100%; }
.collection-location-create-row { display: flex; gap: 8px; align-items: center; }
.collection-location-input { flex: 1 1 auto; min-width: 0; }
.collection-location-create-row .action-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; }

/* Revert confirmation modal */
.collection-revert-modal { max-width: 440px; width: 90%; text-align: center; }
.collection-revert-title { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 12px; color: var(--danger-color, #e05252); }
.collection-revert-modal p { margin: 0 0 10px; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.collection-revert-warning { color: var(--danger-color, #e05252) !important; font-weight: 700; }
.collection-revert-modal .modal-actions { display: flex; gap: 12px; justify-content: center; margin-top: 16px; }

/* Consolidated entry: final-state card + chronological action list. */
.collection-history-merged { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.collection-history-actions { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.collection-history-actions li { position: relative; padding-left: 14px; color: var(--text-secondary, var(--text-muted)); font-size: 12px; }
.collection-history-actions li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-color); }

/* Mobile: collapse to a compact three-line grid so the name gets its own row
   and nothing clips. Type + count share the top line; time drops beneath. */
@media (max-width: 640px) {
    .collection-history-head { grid-template-columns: 14px minmax(0, 1fr) auto; row-gap: 3px; }
    .collection-history-typecol { grid-column: 2; grid-row: 1; flex-direction: row; align-items: center; gap: 6px; }
    .collection-history-summary { grid-column: 2 / 4; grid-row: 2; }
    .collection-history-delta { grid-column: 3; grid-row: 1; }
    .collection-history-time { grid-column: 2 / 4; grid-row: 3; min-width: 0; font-size: 10px; text-align: left; }
    .collection-history-widget { padding: 12px; }
}

/* --- Card Detail modal: collection lot editing (condition + quantity) --- */
.collection-edit-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Tradable markers + controls. The "trade" icon badge is shared by the grid,
   stack (corner-positioned), and list (inline) surfaces, tinted the theme accent. */
.collection-trade-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--accent-color) 90%, #000);
    color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
    vertical-align: middle;
}

/* Inline (list) placement gets a little breathing room after the card name. */
.collection-trade-badge:not(.collection-trade-corner) {
    margin-left: 6px;
}

.card-widget-row-trade.collection-trade-badge,
.card-entry-trade.collection-trade-badge {
    margin-left: 0;
}

/* Corner placement over a card image (grid + stack). */
.collection-trade-corner {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 4;
}

.collection-tradable-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--widget-bg);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.collection-tradable-toggle.active {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 16%, transparent);
    color: var(--accent-color);
}

/* Location section header: label + inline "manage locations" shortcut. */
.collection-edit-location-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.collection-edit-location-manage {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 5px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--widget-bg);
    color: var(--text-muted);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
.collection-edit-location-manage:hover { color: var(--accent-color); border-color: var(--accent-color); }

/* Location-sort ancestor "container" headers (a location with no direct cards)
   read as folder rows: accent-tinted, bolder, no count badge. */
.deck-group-header.collection-location-container,
.stack-header.collection-location-container {
    background: color-mix(in srgb, var(--accent-color) 13%, transparent);
    font-weight: 700;
    border-radius: 6px;
}

/* Wider actions dropdown so item labels stay on one line. */
.collection-actions-menu .dropdown-content { min-width: 210px; }
.collection-actions-menu .menu-item { white-space: nowrap; }

/* .collection-tradable-select {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-color);
    padding: 0 8px;
    height: 34px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
} */

.collection-edit-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 140px;
}

.collection-edit-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.collection-count-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.collection-count-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--widget-bg);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.collection-count-btn:hover {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
}

.collection-count-input {
    width: 100%;
    height: 32px;
    box-sizing: border-box;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg, var(--widget-bg));
    color: var(--text-primary);
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.collection-count-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 20%, transparent);
}

/* --- Empty / error --- */
.collection-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 48px 16px;
    color: var(--text-muted);
    text-align: center;
}

.collection-error {
    padding: 14px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--danger, #e05252) 12%, transparent);
    color: var(--danger, #e05252);
    font-size: 13px;
}

/* --- Non-PRO upsell --- */
.collection-upsell-preview {
    display: flex;
    min-height: max(680px, calc(100vh - 170px));
    flex-direction: column;
    gap: 14px;
    padding: 18px 18px 0;
}

.collection-preview-tabs,
.collection-preview-toolbar {
    display: grid;
    gap: 10px;
    width: min(980px, 100%);
    margin: 0 auto;
}

.collection-preview-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.collection-preview-tabs span,
.collection-preview-toolbar span {
    min-height: 34px;
    border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--widget-bg) 78%, transparent);
}

.collection-preview-tabs span {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}

.collection-preview-tabs span.is-active {
    color: var(--text-primary);
    background: var(--accent-gradient);
}

.collection-preview-toolbar {
    grid-template-columns: minmax(180px, 1fr) 110px 110px 46px;
}

.collection-preview-search {
    max-width: none;
}

.collection-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
    width: min(980px, 100%);
    margin: 0 auto;
}

.collection-preview-card {
    display: flex;
    min-height: 260px;
    flex-direction: column;
    gap: 9px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--widget-bg) 82%, transparent);
}

.collection-preview-card-art,
.collection-preview-card-title,
.collection-preview-card-meta,
.collection-preview-pill {
    display: block;
    border-radius: 7px;
    background: color-mix(in srgb, var(--border-color) 62%, transparent);
}

.collection-preview-card-art {
    aspect-ratio: 63 / 88;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 28%, transparent), transparent),
        color-mix(in srgb, var(--border-color) 54%, transparent);
}

.collection-preview-card-title {
    width: 82%;
    height: 12px;
}

.collection-preview-card-meta {
    width: 58%;
    height: 10px;
    opacity: 0.72;
}

.collection-preview-pill {
    width: 44px;
    height: 18px;
}

.collection-preview-pill.muted {
    opacity: 0.42;
}

@media (max-width: 640px) {
    .collection-upsell-preview {
        padding-inline: 10px;
    }

    .collection-preview-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .collection-preview-toolbar {
        grid-template-columns: 1fr 44px 44px 44px;
    }

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

    .collection-preview-card {
        min-height: 210px;
    }
}