/* ============================================================
   Mercato Design System — Stage 4.15
   mct.css: shared tokens, header, home, footer
   ============================================================ */

/* Ensure [hidden] works even when element has a display class */
[hidden] { display: none !important; }

:root {
  --mct-bg-0:          #060d19;
  --mct-bg-1:          #0a1526;
  --mct-bg-2:          #0f1e36;
  --mct-card:          rgba(12,21,38,.85);
  --mct-card-border:   rgba(148,163,184,.11);
  --mct-card-hover:    rgba(148,163,184,.2);
  --mct-accent:        #3b82f6;
  --mct-accent-2:      #06b6d4;
  --mct-accent-glow:   rgba(59,130,246,.12);
  --mct-text-1:        #f1f5f9;
  --mct-text-2:        #94a3b8;
  --mct-text-3:        #475569;
  --mct-green:         #22c55e;
  --mct-red:           #ef4444;
  --mct-header-h:      58px;
  --mct-radius:        10px;
  --mct-radius-sm:     6px;
  --mct-max:           1280px;
  --mct-pad-v:         72px;
  --mct-pad-h:         24px;

  /* ── Design tokens (Frontend Foundation) ─────────────────────────
     Canonical values for what the audit found duplicated as raw literals:
     status colors (var(--c-success) ×47, var(--c-danger) ×42, var(--c-warn) ×19), slate surfaces
     (rgba(148,163,184,…) ×155), radii (10 values), transitions (5 values).
     New/refactored styles should reference these instead of literals. */
  /* status colors */
  --c-success:   #22c55e;
  --c-danger:    #ef4444;
  --c-warn:      #f59e0b;
  --c-info:      #3b82f6;
  /* slate surfaces & borders */
  --surface-1:   rgba(148,163,184,.05);
  --surface-2:   rgba(148,163,184,.08);
  --surface-3:   rgba(148,163,184,.14);
  --border-soft: rgba(148,163,184,.11);
  --border-mid:  rgba(148,163,184,.18);
  /* radii */
  --r-xs: 4px;  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-pill: 999px;
  /* spacing scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;  --sp-5: 24px;
  /* type scale */
  --fs-xs: 11px;  --fs-sm: 12px;  --fs-base: 13px;  --fs-lg: 15px;  --fs-h1: 26px;
  /* motion */
  --t-fast: .13s;  --t-base: .18s;
  /* elevation */
  --sh-card: 0 8px 22px rgba(0,0,0,.28);
  /* z-index layers */
  --z-nav: 200;  --z-modal: 300;  --z-toast: 400;
  /* high-frequency literal values promoted to tokens (Phase 2, Task 4) */
  --surface-hairline: rgba(148,163,184,.07);
  --surface-soft:     rgba(148,163,184,.1);
  --border-strong:    rgba(148,163,184,.2);
  --border-ghost:     rgba(148,163,184,.055);
  --t-quick: .12s;  --t-mid: .15s;
}

/* ── Reset shell ─────────────────────────────────────────── */
/* The viewport reads scrollbar-gutter from the ROOT element only — on body
   (.mct-shell) it has no effect, so short pages (e.g. Settings → Language)
   rendered wider than tall ones (Settings → Profile) by the scrollbar width.
   Reserving the gutter at the root keeps every page/tab the same width. */
html {
  scrollbar-gutter: stable;
}

.mct-shell {
  color-scheme: dark;
  background: var(--mct-bg-0);
  color: var(--mct-text-1);
  margin: 0; /* drop UA default body margin so min-height:100vh fits the viewport exactly */
  min-height: 100vh;
  /* Sticky footer: column flex + footer margin-top:auto keeps the footer
     attached to the viewport bottom when page content is short. */
  display: flex;
  flex-direction: column;
  font-family: system-ui,-apple-system,'Segoe UI',sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.mct-shell *, .mct-shell *::before, .mct-shell *::after {
  box-sizing: border-box;
}

/* Under the column-flex shell, horizontal auto margins disable flex
   stretching, so centered page containers would shrink to their content
   width (e.g. the Inventory auto-fill grid collapses to one column).
   Explicit width restores the classic centered-container behavior for
   every page-level wrapper that uses max-width + margin:0 auto. */
.mct-shell > .inv-page, .mct-shell > .db-page, .mct-shell > .wl-page,
.mct-shell > .pf-page, .mct-shell > .st-page, .mct-shell > .az,
.mct-shell > .ent, .mct-shell > .brw, .mct-shell > .ip,
.mct-shell > .sys-wrap, .mct-shell > .hub-outer, .mct-shell > .hub-below {
  width: 100%;
}

/* ── Header ──────────────────────────────────────────────── */
.mct-header {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--mct-header-h);
  display: flex;
  /* Pinned explicitly: legacy styles.css styles the bare `header` element
     (incl. flex-direction:column ≤900px and flex-wrap:wrap ≤700px), and any
     property this class does not declare leaks through, breaking the row
     layout in the 769–900px range (QA follow-up, 2026-07-11). */
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0;
  align-items: center;
  padding: 0 var(--mct-pad-h);
  /* Premium glass bar: a slightly brighter slab than the page behind it, lit
     along its top edge, separated from the content by a soft dark shadow —
     never a glow. Saturation keeps colors alive through the blur. */
  background: linear-gradient(180deg, rgba(20,33,55,.94), rgba(11,21,38,.92));
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-bottom: 1px solid rgba(148,163,184,.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 28px rgba(0,0,0,.28);
}

.mct-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: 36px;
}

.mct-logo-mark {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--mct-accent), var(--mct-accent-2));
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.02em;
  flex-shrink: 0;
}

.mct-logo-text {
  font-size: 17px;
  font-weight: 700;
  color: var(--mct-text-1);
  letter-spacing: -.025em;
}

.mct-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.mct-nav a {
  padding: 6px 11px;
  border-radius: var(--mct-radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  color: #a6b4c8;   /* a step brighter than text-2: readable on the glass bar */
  text-decoration: none;
  white-space: nowrap;
  transition: color .13s ease-out, background .13s ease-out;
}

.mct-nav a:hover,
.mct-nav a.mct-active {
  color: var(--mct-text-1);
  background: var(--surface-2);
  /* Active pill catches the same top light as the bar it sits on. */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.mct-nav-pro {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--mct-accent-2) !important;
}

.mct-pro-badge {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 1px 5px;
  border-radius: var(--r-xs);
  background: linear-gradient(135deg, var(--mct-accent), var(--mct-accent-2));
  color: #fff;
}

.mct-header-end {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}

.mct-icon-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--mct-card-border);
  border-radius: var(--mct-radius-sm);
  background: transparent;
  color: var(--mct-text-2);
  cursor: pointer;
  font-size: 17px;
  transition: color .13s, border-color .13s;
  font-family: inherit;
  text-decoration: none;
}

.mct-icon-btn:hover {
  color: var(--mct-text-1);
  border-color: var(--mct-card-hover);
}

.mct-steam-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border-radius: var(--mct-radius-sm);
  border: 1px solid rgba(59,130,246,.35);
  background: rgba(59,130,246,.1);
  color: #93c5fd;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .13s, border-color .13s;
  font-family: inherit;
}

.mct-steam-btn:hover {
  background: rgba(59,130,246,.18);
  border-color: rgba(59,130,246,.55);
  color: #bfdbfe;
}

/* ── Buttons ─────────────────────────────────────────────── */
.mct-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: var(--mct-radius-sm);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .13s, transform var(--t-quick);
  white-space: nowrap;
}

.mct-btn:hover { opacity: .86; transform: translateY(-1px); }

.mct-btn-primary {
  background: linear-gradient(135deg,#2563eb,#0891b2);
  color: #fff;
  border-color: rgba(59,130,246,.3);
}

.mct-btn-ghost {
  background: var(--surface-hairline);
  color: var(--mct-text-2);
  border-color: var(--mct-card-border);
}

.mct-btn-ghost:hover { color: var(--mct-text-1); }

/* ── Hero ────────────────────────────────────────────────── */
.mct-hero {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 400px);
  gap: 56px;
  align-items: center;
  max-width: var(--mct-max);
  margin: 0 auto;
  padding: 88px var(--mct-pad-h) 72px;
}

.mct-hero-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 700;
  color: var(--mct-accent-2);
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.mct-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mct-accent-2);
  animation: mct-pulse 2.2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes mct-pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.45; transform:scale(.75); }
}

.mct-hero-h1 {
  font-size: clamp(30px,3.4vw,50px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--mct-text-1);
  margin: 0 0 18px;
}

.mct-hero-sub {
  font-size: 16px;
  color: var(--mct-text-2);
  line-height: 1.65;
  max-width: 480px;
  margin: 0 0 32px;
}

.mct-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--mct-card-hover);
  border-radius: var(--mct-radius);
  background: rgba(10,21,38,.9);
  margin-bottom: 24px;
  transition: border-color var(--t-mid), box-shadow var(--t-mid);
}

.mct-search-bar:focus-within {
  border-color: rgba(59,130,246,.5);
  box-shadow: 0 0 0 3px rgba(59,130,246,.08);
}

.mct-search-icon { color: var(--mct-text-3); font-size: 17px; flex-shrink: 0; }

/* Hero search bar: the left magnifier is decorative only (not a click
   target). The page-toolbar variant of .mct-search-icon (declared later)
   absolutely positions the icon — inside the hero bar it must flow normally. */
.mct-search-bar > .mct-search-icon {
  position: static;
  transform: none;
  pointer-events: none;
  font-size: 17px;
}

/* Right-side submit button of the hero search bar (Phase 5 final
   adjustments): the clickable Enter/submit control. */
.mct-search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 2px 9px;
  border: 1px solid var(--border-mid);
  border-radius: var(--r-xs);
  background: none;
  color: var(--mct-text-3);
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
  transition: color .13s, border-color .13s;
}
.mct-search-submit:hover,
.mct-search-submit:focus-visible { color: var(--mct-accent); border-color: rgba(59,130,246,.5); }

.mct-search-bar input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--mct-text-1);
  font-size: 15px;
  font-family: inherit;
  min-width: 0;
}

.mct-search-bar input::placeholder { color: var(--mct-text-3); }

.mct-hero-ctas {
  display: flex;
  gap: 12px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.mct-hero-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--mct-text-3);
  flex-wrap: wrap;
}

.mct-sep { opacity: .45; }

/* Hero right: live preview panel */
.mct-live-preview {
  border: 1px solid var(--mct-card-border);
  border-radius: 14px;
  background: var(--mct-card);
  overflow: hidden;
}

.mct-live-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
  border-bottom: 1px solid var(--mct-card-border);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--mct-text-2);
  letter-spacing: .02em;
}

.mct-live-badge {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .1em;
  padding: 2px 7px;
  border-radius: var(--r-xs);
  background: rgba(34,197,94,.13);
  color: #4ade80;
  border: 1px solid rgba(34,197,94,.22);
}

.mct-live-movers { min-height: 220px; }

.mct-live-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  font-size: 13px;
  color: var(--mct-text-3);
  text-align: center;
  gap: 8px;
  padding: 20px;
}

.mct-mover-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border-ghost);
  text-decoration: none;
  color: inherit;
  transition: background var(--t-quick);
}

.mct-mover-row:hover { background: rgba(148,163,184,.04); }
.mct-mover-row:last-child { border-bottom: none; }

.mct-mover-thumb {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background: linear-gradient(135deg,#0f172a,#1e3a5f);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: var(--mct-accent-2);
  flex-shrink: 0;
  overflow: hidden;
}

/* Real item images inside mover rows (Roadmap Post Phase 6, Section 3). */
.mct-mover-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Compact variant for dense list rows (Overview / Market Movers). */
.mct-mover-thumb.mct-mover-thumb-sm {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  font-size: 8px;
}

.mct-mover-info { flex: 1; min-width: 0; }

.mct-mover-name {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--mct-text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.mct-mover-game {
  font-size: 11px;
  color: var(--mct-text-3);
  display: block;
}

.mct-mover-right { text-align: right; flex-shrink: 0; }

.mct-mover-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--mct-text-1);
  display: block;
  white-space: nowrap;
}

.mct-mover-change {
  font-size: 11px;
  font-weight: 600;
  display: block;
  white-space: nowrap;
}

.mct-up   { color: var(--mct-green); }
.mct-dn   { color: var(--mct-red); }
.mct-na   { color: var(--mct-text-3); }

.mct-preview-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 11px 18px;
  border-top: 1px solid var(--mct-card-border);
  font-size: 12px;
  font-weight: 600;
  color: var(--mct-accent);
  text-decoration: none;
  transition: background var(--t-quick);
}

.mct-preview-footer:hover { background: var(--mct-accent-glow); }

/* ── Sections ────────────────────────────────────────────── */
.mct-section {
  padding: var(--mct-pad-v) var(--mct-pad-h);
}

.mct-section-inner {
  max-width: var(--mct-max);
  margin: 0 auto;
}

.mct-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.mct-section-head h2 {
  font-size: clamp(22px,2.4vw,30px);
  font-weight: 700;
  color: var(--mct-text-1);
  letter-spacing: -.025em;
  margin: 0 0 4px;
}

.mct-section-sub {
  font-size: 15px;
  color: var(--mct-text-2);
  max-width: 520px;
  margin: 0;
  line-height: 1.55;
}

.mct-section-head.mct-centered {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mct-section-head.mct-centered .mct-section-sub {
  text-align: center;
}

.mct-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mct-accent);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: gap var(--t-quick);
}

.mct-link-arrow:hover { gap: 7px; text-decoration: underline; }

/* ── Cards ───────────────────────────────────────────────── */
.mct-card {
  border: 1px solid var(--mct-card-border);
  border-radius: var(--mct-radius);
  background: var(--mct-card);
  padding: 20px;
}

.mct-card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  color: var(--mct-text-3);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.mct-badge {
  font-size: 9px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: var(--r-xs);
  background: rgba(59,130,246,.13);
  color: #93c5fd;
  border: 1px solid rgba(59,130,246,.18);
  letter-spacing: .05em;
}

.mct-badge-green {
  background: rgba(34,197,94,.12);
  color: #4ade80;
  border-color: rgba(34,197,94,.2);
}

/* ── Market Overview grid ────────────────────────────────── */
.mct-market-section {
  background:
    linear-gradient(180deg,transparent,rgba(59,130,246,.04) 50%,transparent);
  border-top: 1px solid var(--mct-card-border);
  border-bottom: 1px solid var(--mct-card-border);
}

.mct-overview-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.mct-overview-lower {
  display: grid;
  grid-template-columns: minmax(0,1.55fr) minmax(0,1fr);
  gap: 14px;
}

/* Rows inside cards */
.mct-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: var(--mct-text-2);
  padding: 8px 0;
  border-bottom: 1px solid var(--border-ghost);
}

.mct-stat-row:last-child { border-bottom: none; padding-bottom: 0; }
.mct-stat-row strong { color: var(--mct-text-1); font-weight: 600; }

.mct-overview-mover {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-ghost);
  font-size: 12.5px;
  text-decoration: none;
  color: inherit;
}

.mct-overview-mover:last-child { border-bottom: none; }
.mct-overview-mover:hover .mct-ov-name { color: var(--mct-accent); }

.mct-ov-name {
  color: var(--mct-text-1);
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

/* Price and change are COLUMNS, not trailing text. Left to size themselves they land at a
   different x on every row (a $9.99 row and a $1,299.00 row push the change chip to
   different places), so the widget read as ragged next to the movers table, which has true
   right-aligned numeric columns. Fixed minimums + tabular figures line them up — the name
   still absorbs the slack and ellipsises, so nothing reflows on narrow screens. */
.mct-ov-price {
  color: var(--mct-text-2);
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
  min-width: 76px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.mct-ov-change {
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  min-width: 62px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.mct-trending-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-ghost);
  text-decoration: none;
  color: var(--mct-text-2);
  transition: color var(--t-quick);
}

.mct-trending-row:last-child { border-bottom: none; }
.mct-trending-row:hover { color: var(--mct-text-1); }

.mct-trending-num {
  width: 18px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--mct-text-3);
  flex-shrink: 0;
  text-align: right;
}

.mct-trending-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  color: var(--mct-text-1);
}

.mct-activity-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-ghost);
  font-size: 12.5px;
}

.mct-activity-row:last-child { border-bottom: none; }

.mct-activity-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  background: rgba(59,130,246,.1);
  color: var(--mct-accent);
}

.mct-activity-icon.up { background: rgba(34,197,94,.1); color: #4ade80; }
.mct-activity-icon.dn { background: rgba(239,68,68,.1); color: #f87171; }

.mct-activity-body { flex: 1; min-width: 0; }
.mct-activity-title { color: var(--mct-text-1); font-weight: 500; margin-bottom: 1px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mct-activity-meta { color: var(--mct-text-3); font-size: 11px; }

.mct-collection-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-ghost);
  font-size: 12.5px;
  text-decoration: none;
  color: var(--mct-text-2);
  transition: color var(--t-quick);
}

.mct-collection-row:last-child { border-bottom: none; }
.mct-collection-row:hover { color: var(--mct-text-1); }
.mct-col-name { font-weight: 500; color: var(--mct-text-1); }
.mct-col-count { color: var(--mct-text-3); font-size: 11px; white-space: nowrap; }

/* ── Categories ──────────────────────────────────────────── */
.mct-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mct-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 15px;
  border: 1px solid var(--mct-card-border);
  border-radius: var(--r-pill);
  background: var(--mct-card);
  font-size: 13px;
  font-weight: 500;
  color: var(--mct-text-2);
  text-decoration: none;
  transition: border-color var(--t-quick), color var(--t-quick), background var(--t-quick);
  cursor: pointer;
}

.mct-chip:hover {
  border-color: rgba(59,130,246,.4);
  color: var(--mct-text-1);
  background: rgba(59,130,246,.07);
}

.mct-chip-count {
  font-size: 11px;
  color: var(--mct-text-3);
}

/* ── Why section ─────────────────────────────────────────── */
.mct-why-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 14px;
}

.mct-why-card {
  border: 1px solid var(--mct-card-border);
  border-radius: var(--mct-radius);
  background: var(--mct-card);
  padding: 26px 22px;
  transition: border-color .14s;
}

.mct-why-card:hover { border-color: var(--mct-card-hover); }

.mct-why-icon {
  font-size: 22px;
  color: var(--mct-accent);
  display: block;
  margin-bottom: 14px;
}

.mct-why-card h3 {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--mct-text-1);
  margin: 0 0 9px;
  letter-spacing: -.01em;
}

.mct-why-card p {
  font-size: 13px;
  color: var(--mct-text-2);
  line-height: 1.65;
  margin: 0;
}

/* ── Footer ──────────────────────────────────────────────── */
.mct-footer {
  border-top: 1px solid var(--mct-card-border);
  background: rgba(6,13,25,.85);
  margin-top: auto; /* pushes footer to viewport bottom on short pages (.mct-shell is column flex) */
}

.mct-footer-inner {
  max-width: var(--mct-max);
  margin: 0 auto;
  padding: 56px var(--mct-pad-h) 44px;
  display: grid;
  grid-template-columns: minmax(0,1.5fr) minmax(0,2fr);
  gap: 56px;
}

.mct-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mct-footer-brand-name {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mct-footer-brand-name strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--mct-text-1);
  letter-spacing: -.02em;
}

.mct-footer-brand p,
.mct-footer-tagline {
  font-size: 13px;
  color: var(--mct-text-3);
  line-height: 1.65;
  max-width: 300px;
  margin: 0;
}

/* Trustpilot link — static markup, no third-party script.
   Swap for the official TrustBox embed when review volume justifies it. */
.mct-trustpilot {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--mct-card-border);
  border-radius: var(--mct-radius-sm);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mct-text-2);
  text-decoration: none;
  transition: color var(--t-quick), border-color var(--t-quick), background var(--t-quick);
}

.mct-trustpilot:hover {
  color: var(--mct-text-1);
  border-color: rgba(0,182,122,.45);
  background: rgba(0,182,122,.08);
}

.mct-trustpilot-star {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: #00b67a;
}

.mct-footer-links {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 32px;
}

.mct-footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mct-footer-col strong {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mct-text-3);
  margin-bottom: 2px;
}

.mct-footer-col a {
  font-size: 13px;
  color: var(--mct-text-2);
  text-decoration: none;
  transition: color var(--t-quick);
}

.mct-footer-col a:hover { color: var(--mct-text-1); }

.mct-footer-bar {
  max-width: var(--mct-max);
  margin: 0 auto;
  padding: 16px var(--mct-pad-h);
  border-top: 1px solid var(--mct-card-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--mct-text-3);
}

/* ── Utility ─────────────────────────────────────────────── */
.mct-muted { color: var(--mct-text-3); }
.mct-text-sm { font-size: 12.5px; }
.mct-empty {
  font-size: 12.5px;
  color: var(--mct-text-3);
  padding: 8px 0;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1100px) {
  .mct-hero { grid-template-columns: minmax(0,1fr); gap: 36px; padding: 56px var(--mct-pad-h) 48px; }
  .mct-hero-right { max-width: 520px; }
  .mct-overview-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mct-why-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 768px) {
  :root { --mct-pad-v: 48px; --mct-pad-h: 16px; }
  .mct-nav { display: none; }
  /* minmax(0,…) — a bare `1fr` track floors at min-content, so a card whose
     head cannot wrap (icon + title + badge + "View all") pushed the track past
     the viewport and scrolled the page sideways. Matches the desktop rules,
     which already clamp with minmax(0,…). */
  .mct-overview-grid { grid-template-columns: minmax(0,1fr); }
  .mct-overview-lower { grid-template-columns: minmax(0,1fr); }
  .mct-why-grid { grid-template-columns: minmax(0,1fr); }
  .mct-footer-inner { grid-template-columns: minmax(0,1fr); gap: 36px; }
  .mct-footer-links { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mct-footer-bar { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ================================================================
   MARKET HUB — Stage 4.15
   ================================================================ */

/* ── Hub sub-header ─────────────────────────────────────────────── */
.hub-subheader {
  position: sticky;
  top: var(--mct-header-h);
  z-index: 190;
  background: rgba(6,13,25,.96);
  border-bottom: 1px solid var(--mct-card-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.hub-subheader-inner {
  max-width: var(--mct-max);
  margin: 0 auto;
  padding: 0 var(--mct-pad-h);
  height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hub-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--mct-text-1);
  white-space: nowrap;
  margin-right: 4px;
}
.hub-search-wrap {
  flex: 1;
  position: relative;
  min-width: 0;
}
.hub-search-wrap .hub-search-ico {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--mct-text-3);
  font-size: 14px;
  pointer-events: none;
}
.hub-search-input {
  width: 100%;
  height: 32px;
  padding: 0 10px 0 30px;
  background: rgba(15,30,54,.9);
  border: 1px solid var(--mct-card-border);
  border-radius: var(--mct-radius-sm);
  color: var(--mct-text-1);
  font-size: 12.5px;
  outline: none;
}
.hub-search-input::placeholder { color: var(--mct-text-3); }
.hub-search-input:focus { border-color: rgba(59,130,246,.4); }
.hub-sort-select {
  height: 32px;
  padding: 0 8px;
  background: rgba(15,30,54,.9);
  border: 1px solid var(--mct-card-border);
  border-radius: var(--mct-radius-sm);
  color: var(--mct-text-2);
  font-size: 12px;
  outline: none;
  cursor: pointer;
  flex-shrink: 0;
  width: 130px;
}
.hub-count-badge {
  font-size: 11.5px;
  color: var(--mct-text-3);
  white-space: nowrap;
  margin-left: auto;
}
.hub-filter-toggle-btn {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 500;
  background: rgba(15,30,54,.9);
  border: 1px solid var(--mct-card-border);
  border-radius: var(--mct-radius-sm);
  color: var(--mct-text-2);
  cursor: pointer;
}

/* ── Market Pulse ticker ────────────────────────────────────────── */
.hub-pulse {
  background: rgba(10,21,38,.85);
  border-bottom: 1px solid var(--mct-card-border);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 var(--mct-pad-h);
  height: 34px;
  overflow: hidden;
}
.hub-pulse-live {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--mct-green);
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.25);
  border-radius: 3px;
  padding: 2px 6px;
}
.hub-pulse-items {
  display: flex;
  align-items: center;
  gap: 14px;
  overflow: hidden;
  flex: 1;
}
.hub-pulse-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--mct-text-2);
  white-space: nowrap;
}
.hub-pulse-item strong { color: var(--mct-text-1); }
.hub-pulse-sep { color: var(--mct-text-3); font-size: 10px; }
/* .hub-pulse-time removed — the ticker shows only scrolling items
   (Phase 3 final adjustments). */

/* ── Shared Market Hub scrollbar (Phase 3 final adjustments) ─────
   Single scrollbar design for every scrollable Hub component
   (Collections filter, Table View, My Watchlist): the thin style the
   Collections panel introduced. Apply the class wherever a Hub
   component scrolls. */
.hub-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.18) transparent;
}

/* ── Hub outer wrapper ──────────────────────────────────────────── */
.hub-outer {
  max-width: var(--mct-max);
  margin: 0 auto;
  padding: 14px var(--mct-pad-h) 60px;
  display: grid;
  grid-template-columns: 220px minmax(0,1fr) 220px;
  gap: 14px;
  align-items: start;
}

/* ── Left sidebar — Filters ─────────────────────────────────────── */
.hub-sidebar-left {
  position: sticky;
  top: calc(var(--mct-header-h) + 52px + 34px + 14px);
  max-height: calc(100vh - var(--mct-header-h) - 52px - 34px - 28px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.18) transparent; /* same as .hub-scroll */
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--mct-card);
  border: 1px solid var(--mct-card-border);
  border-radius: var(--mct-radius);
}
.hub-filter-group {
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--surface-hairline);
  overflow: visible;
}
.hub-filter-group:last-of-type { border-bottom: none; }
.hub-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 9px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--mct-text-3);
  cursor: pointer;
  user-select: none;
  transition: color var(--t-mid);
}
.hub-filter-head[data-target]:hover { color: var(--mct-text-2); }
.hub-filter-head i { font-size: 12px; color: var(--mct-text-3); transition: transform .18s; }
/* Non-collapsible heads (PRO/SOON) */
.hub-filter-head:not([data-target]) { cursor: default; }

/* Default filter body (vertical list) */
.hub-filter-body { padding: 2px 10px 10px; }

/* Hide native radios/checkboxes everywhere — JS drives state via .active */
.hub-filter-body input[type=radio],
.hub-filter-body input[type=checkbox] { display: none; }

/* Vertical option list */
.hub-filter-opt {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--mct-text-2);
  transition: background var(--t-quick), color var(--t-quick);
  position: relative;
}
.hub-filter-opt::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  border: 1.5px solid rgba(148,163,184,.22);
  background: transparent;
  margin-right: 9px;
  flex-shrink: 0;
  transition: background var(--t-quick), border-color var(--t-quick);
}
.hub-filter-opt.active::before {
  background: var(--mct-accent);
  border-color: var(--mct-accent);
}
.hub-filter-opt:hover { background: var(--surface-1); color: var(--mct-text-1); }
.hub-filter-opt.active { color: var(--mct-text-1); font-weight: 500; }
.hub-filter-count {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--mct-text-3);
  font-weight: 400;
}

/* ── Chip-style filter body (Wear, Quality) ─────────────────────── */
.hub-filter-chips {
  padding: 4px 12px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.hub-filter-chips .hub-filter-opt {
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(15,30,54,.5);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--mct-text-2);
  gap: 5px;
}
.hub-filter-chips .hub-filter-opt::before { display: none; } /* no dot for chips */
.hub-filter-chips .hub-filter-opt:hover {
  border-color: rgba(148,163,184,.32);
  color: var(--mct-text-1);
  background: rgba(15,30,54,.8);
}
.hub-filter-chips .hub-filter-opt.active {
  background: rgba(59,130,246,.14);
  border-color: rgba(59,130,246,.42);
  color: var(--mct-accent);
  font-weight: 600;
}
/* Exterior / Wear filter — single shared wear bar */
.hub-fext-body {
  padding: 4px 12px 12px;
}
.hub-fext-any-row {
  margin-bottom: 6px;
}
.hub-fext-any-row .hub-filter-opt {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(15,30,54,.5);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--mct-text-2);
  cursor: pointer;
  transition: background var(--t-quick), border-color var(--t-quick), color var(--t-quick);
  user-select: none;
}
.hub-fext-any-row .hub-filter-opt:hover {
  border-color: rgba(148,163,184,.32);
  color: var(--mct-text-1);
  background: rgba(15,30,54,.8);
}
.hub-fext-any-row .hub-filter-opt.active {
  background: rgba(59,130,246,.14);
  border-color: rgba(59,130,246,.42);
  color: var(--mct-accent);
  font-weight: 600;
}
/* Grid: 5 equal columns for wear labels + bar spanning all */
.hub-fext-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  row-gap: 3px;
}
.hub-fext-btn {
  padding: 3px 2px;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  color: var(--mct-text-3);
  cursor: pointer;
  border-radius: var(--r-xs);
  transition: color var(--t-quick), background var(--t-quick);
  user-select: none;
}
.hub-fext-btn:hover { color: var(--mct-text-1); background: var(--surface-1); }
.hub-fext-btn.active { color: var(--mct-text-1); font-weight: 700; }
/* Shared wear bar spans all 5 columns — identical to card wear bar */
.hub-fext-bar {
  grid-column: 1 / -1;
  margin-top: 0;
}
/* CSS sibling selectors: highlight segment of the active wear button */
[data-ext="Factory New"].active  ~ .hub-fext-bar .hub-item-wear-seg[data-w="fn"],
[data-ext="Minimal Wear"].active ~ .hub-fext-bar .hub-item-wear-seg[data-w="mw"],
[data-ext="Field-Tested"].active ~ .hub-fext-bar .hub-item-wear-seg[data-w="ft"],
[data-ext="Well-Worn"].active    ~ .hub-fext-bar .hub-item-wear-seg[data-w="ww"],
[data-ext="Battle-Scarred"].active ~ .hub-fext-bar .hub-item-wear-seg[data-w="bs"] {
  opacity: 1;
}

/* Quality filter — badge style matching card quality badges */
.hub-filter-quality {
  padding: 4px 12px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.hub-fq-all, .hub-fq-normal {
  padding: 3px 9px;
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 600;
  border: 1px solid var(--mct-card-border);
  background: rgba(15,30,54,.5);
  color: var(--mct-text-2);
  cursor: pointer;
  transition: background .14s, border-color .14s, color .14s;
  user-select: none;
}
.hub-fq-all:hover, .hub-fq-normal:hover {
  border-color: rgba(148,163,184,.3);
  color: var(--mct-text-1);
}
.hub-fq-all.active {
  background: rgba(59,130,246,.12);
  border-color: rgba(59,130,246,.4);
  color: var(--mct-accent);
}
.hub-fq-normal.active {
  background: var(--surface-soft);
  border-color: rgba(148,163,184,.35);
  color: var(--mct-text-1);
}
/* StatTrak badge — mirrors hub-item-quality-st */
.hub-fq-st {
  padding: 3px 9px;
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  background: rgba(207,106,50,.12);
  border: 1px solid rgba(207,106,50,.3);
  color: #cf6a32;
  cursor: pointer;
  transition: background .14s, border-color .14s;
  user-select: none;
}
.hub-fq-st:hover  { background: rgba(207,106,50,.18); border-color: rgba(207,106,50,.45); }
.hub-fq-st.active { background: rgba(207,106,50,.22); border-color: rgba(207,106,50,.6); color: #e0834a; }
/* Souvenir badge — mirrors hub-item-quality-sv */
.hub-fq-sv {
  padding: 3px 9px;
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  background: rgba(180,155,60,.12);
  border: 1px solid rgba(180,155,60,.3);
  color: #b49c3c;
  cursor: pointer;
  transition: background .14s, border-color .14s;
  user-select: none;
}
.hub-fq-sv:hover  { background: rgba(180,155,60,.18); border-color: rgba(180,155,60,.45); }
.hub-fq-sv.active { background: rgba(180,155,60,.22); border-color: rgba(180,155,60,.6); color: #c8b145; }

/* Price range */
.hub-filter-range {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 0 2px;
}
.hub-filter-range input {
  width: 100%;
  height: 30px;
  padding: 0 8px;
  background: rgba(10,20,38,.8);
  border: 1px solid var(--surface-3);
  border-radius: 6px;
  color: var(--mct-text-1);
  font-size: 12px;
  outline: none;
  transition: border-color var(--t-mid);
}
.hub-filter-range input:focus { border-color: rgba(59,130,246,.4); background: rgba(10,20,38,.95); }
.hub-filter-range input::placeholder { color: var(--mct-text-3); }
.hub-filter-range span { color: var(--mct-text-3); font-size: 11px; flex-shrink: 0; }

/* PRO gate block */
.hub-filter-pro-gate {
  margin: 2px 4px 8px;
  padding: 7px 10px;
  background: rgba(124,58,237,.07);
  border: 1px solid rgba(124,58,237,.16);
  border-radius: 6px;
  font-size: 11px;
  color: #a78bfa;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: .85;
}

/* Apply / Reset buttons */
.hub-filter-apply-btn {
  margin: 4px 10px 8px;
  width: calc(100% - 20px);
  padding: 7px;
  background: rgba(59,130,246,.1);
  border: 1px solid rgba(59,130,246,.25);
  border-radius: var(--mct-radius-sm);
  color: var(--mct-accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-mid), border-color var(--t-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.hub-filter-apply-btn:hover { background: rgba(59,130,246,.18); border-color: rgba(59,130,246,.4); }

/* Reset all filters — sits at the bottom of sidebar */
#resetFilters {
  margin: 0;
  width: 100%;
  border-radius: 0;
  border: none;
  border-top: 1px solid var(--surface-hairline);
  background: transparent;
  color: var(--mct-text-3);
  font-size: 11.5px;
  padding: 10px;
  letter-spacing: .01em;
}
#resetFilters:hover { background: rgba(239,68,68,.06); color: #f87171; border-top-color: rgba(239,68,68,.15); }

/* ── Center main area ───────────────────────────────────────────── */
/* Override styles.css: main { margin: 0 auto; padding: 22px; max-width: 1440px }
   margin: 0 auto on a grid item disables stretch alignment → width becomes content-driven */
.hub-main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  max-width: none;
}

/* ── Collections row ────────────────────────────────────────────── */
.hub-coll-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hub-coll-chip {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--r-pill);
  border: 1px solid var(--mct-card-border);
  background: rgba(15,30,54,.7);
  color: var(--mct-text-2);
  cursor: pointer;
  transition: background .14s, border-color .14s, color .14s;
  white-space: nowrap;
  user-select: none;
}
.hub-coll-chip:hover { border-color: rgba(59,130,246,.4); color: var(--mct-accent); }
.hub-coll-chip.active {
  background: rgba(59,130,246,.12);
  border-color: rgba(59,130,246,.4);
  color: var(--mct-accent);
}

/* ── Catalog head ───────────────────────────────────────────────── */
.hub-catalog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 2px;
}
.hub-catalog-count { font-size: 12.5px; color: var(--mct-text-3); }
.hub-catalog-count strong { color: var(--mct-text-1); }
.hub-view-toggle {
  display: flex;
  gap: 3px;
  background: rgba(15,30,54,.9);
  border: 1px solid var(--mct-card-border);
  border-radius: var(--mct-radius-sm);
  padding: 2px;
}
.hub-view-btn {
  width: 30px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-xs);
  border: none;
  background: transparent;
  color: var(--mct-text-3);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--t-mid);
}
.hub-view-btn:hover { color: var(--mct-text-1); }
.hub-view-btn.active { background: rgba(59,130,246,.15); color: var(--mct-accent); }

/* ── Display mode: Listings / Skins ──────────────────────────────
   Listings is the canonical entity view; Skins is a read-side projection
   that groups a listing's Exterior/StatTrak/Souvenir variants. Same visual
   language as the view toggle so the two controls read as a pair. */
.hub-head-controls { display: flex; align-items: center; gap: 8px; }
.hub-mode-toggle {
  display: flex;
  gap: 3px;
  background: rgba(15,30,54,.9);
  border: 1px solid var(--mct-card-border);
  border-radius: var(--mct-radius-sm);
  padding: 2px;
}
.hub-mode-btn {
  display: flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 10px;
  border-radius: var(--r-xs);
  border: none;
  background: transparent;
  color: var(--mct-text-3);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--t-mid);
}
.hub-mode-btn i { font-size: 14px; }
.hub-mode-btn:hover { color: var(--mct-text-1); }
.hub-mode-btn.active { background: rgba(59,130,246,.15); color: var(--mct-accent); }

/* Skin card. The variant count is carried by the thumbnail badge alone.
   Confidence is deliberately absent: it is a per-Listing Collector value and
   must not be averaged across variants. */
.hub-skin-variants {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px;
  color: var(--mct-text-3);
}
.hub-skin-variants i { font-size: 13px; opacity: .8; }
.hub-skin-variants-tbl { justify-content: center; }
.hub-skin-badge {
  background: rgba(59,130,246,.9);
  color: #fff;
  font-weight: 700;
}

/* Skin card footer — two stacked lines instead of one crowded row.
   Line 1 is the price range as a single non-wrapping unit; line 2 is the
   source. This is what keeps a long maximum ($2,477.42) from wrapping under
   or colliding with the Steam label, and it fixes the card height regardless
   of how long either price is. */
.hub-skin-foot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 3px;
}
.hub-skin-prices {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  white-space: nowrap;         /* prices never wrap */
  overflow: hidden;
  text-overflow: ellipsis;
}
.hub-skin-prices .hub-item-price { font-size: 14px; }
.hub-skin-dash { color: var(--mct-text-3); font-size: 11px; }
.hub-skin-price-to {
  font-size: 12px;
  font-weight: 700;
  color: var(--mct-text-2);
}
.hub-skin-source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}
/* The source label yields first — it truncates instead of shoving the chip. */
.hub-skin-source .hub-item-collection {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hub-skin-scope {
  flex: none;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(234,179,8,.14);
  color: #eab308;
  font-size: 10px;
  font-weight: 600;
}

@media (max-width: 560px) {
  /* Keep both toggles reachable on a phone: drop the mode labels to icons. */
  .hub-mode-btn span { display: none; }
  .hub-mode-btn { padding: 0 8px; }
}

/* ── Item grid — fixed columns by breakpoint (not by item count) ── */
.hub-items-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

/* ── Item card ──────────────────────────────────────────────────── */
.hub-item-card {
  background: var(--mct-card);
  border: 1px solid var(--mct-card-border);
  border-radius: var(--mct-radius);
  cursor: pointer;
  transition: border-color .16s, transform .16s, box-shadow .16s, background .16s;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  color: inherit;
}
.hub-item-card:hover {
  border-color: rgba(59,130,246,.45);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.3);
  background: rgba(15,25,45,.95);
}
.hub-item-card:hover .hub-item-thumb {
  background: rgba(10,22,45,.95);
}
.hub-item-card:hover .hub-item-name {
  color: #e2e8f0;
}

/* Rarity strip at top of card */
.hub-item-rarity-strip {
  height: 4px;
  width: 100%;
  background: rgba(148,163,184,.12); /* neutral fallback; rarity color set inline from API rarity_color */
  flex-shrink: 0;
}

/* Thumbnail */
.hub-item-thumb {
  width: 100%;
  aspect-ratio: 3/2;
  background: rgba(10,20,40,.9);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  transition: background .16s;
}
.hub-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
  transition: transform .2s;
}
.hub-item-card:hover .hub-item-thumb img {
  transform: scale(1.05);
}
.hub-item-thumb-ph {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--mct-text-3);
  opacity: .45;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hub-item-thumb-ph i { font-size: 28px; opacity: .6; }

/* StatTrak / Souvenir overlay badge on image */
.hub-item-badge {
  position: absolute;
  bottom: 5px;
  left: 5px;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 3px;
  letter-spacing: .04em;
}
.hub-item-badge-st { background: rgba(207,106,50,.92); color: #fff; }
.hub-item-badge-sv { background: rgba(180,155,60,.92); color: #fff; }

/* Body */
.hub-item-body {
  padding: 7px 9px 5px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.hub-item-name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--mct-text-1);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .16s;
}

/* Quality pill row */
.hub-item-quality-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 16px;
}
.hub-item-quality-st {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(207,106,50,.15);
  border: 1px solid rgba(207,106,50,.35);
  color: #cf6a32;
}
.hub-item-quality-sv {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(180,155,60,.15);
  border: 1px solid rgba(180,155,60,.35);
  color: #b49c3c;
}

/* Game + category tags */
.hub-item-meta {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
}
.hub-item-tag {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(15,30,54,.9);
  border: 1px solid var(--mct-card-border);
  color: var(--mct-text-3);
  white-space: nowrap;
}
.hub-item-tag.game-cs2   { color: var(--c-warn); border-color: rgba(245,158,11,.2); background: rgba(245,158,11,.07); }

/* Wear bar (5-segment: FN/MW/FT/WW/BS) */
.hub-item-wear-bar {
  display: flex;
  gap: 2px;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  margin-top: 1px;
}
.hub-item-wear-seg {
  flex: 1;
  border-radius: 1px;
  opacity: .18;
  transition: opacity .16s;
}
.hub-item-wear-seg.active { opacity: 1; }
.hub-item-wear-seg[data-w="fn"] { background: #4ade80; }
.hub-item-wear-seg[data-w="mw"] { background: #86efac; }
.hub-item-wear-seg[data-w="ft"] { background: #fbbf24; }
.hub-item-wear-seg[data-w="ww"] { background: #f97316; }
.hub-item-wear-seg[data-w="bs"] { background: var(--c-danger); }

/* Price section — price left, source right on same row */
.hub-item-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 4px;
  border-top: 1px solid var(--surface-hairline);
  gap: 4px;
}
.hub-item-price {
  font-size: 15px;
  font-weight: 800;
  color: var(--mct-text-1);
  letter-spacing: -.01em;
}
.hub-item-price-na {
  font-size: 10.5px;
  color: var(--mct-text-3);
  font-style: italic;
}
.hub-item-change { font-size: 10px; font-weight: 700; }
.hub-item-change.up   { color: var(--mct-green); }
.hub-item-change.down { color: var(--mct-red); }

/* Footer row merged into price-row */
.hub-item-foot { display: none; }
.hub-item-collection {
  font-size: 9px;
  color: var(--mct-text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}
.hub-item-source-badge {
  font-size: 9px;
  color: var(--mct-text-3);
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: .7;
}

/* Confidence / liquidity bar */
.hub-item-confidence {
  height: 2px;
  border-radius: 2px;
  background: var(--surface-soft);
  overflow: hidden;
  margin-top: 3px;
}
.hub-item-confidence-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--mct-accent) 0%, #60a5fa 100%);
}

/* ── Item table ─────────────────────────────────────────────────── */
.hub-items-table-wrap {
  background: var(--mct-card);
  border: 1px solid var(--mct-card-border);
  border-radius: var(--mct-radius);
  overflow-x: auto;
  overflow-y: auto;
  /* Fill the viewport below the sticky header/subheader stack instead of a
     fixed 72vh cap — shows more rows and shrinks the leftover blank column
     around the Load-more button (Phase 3 final adjustments). */
  max-height: calc(100vh - var(--mct-header-h) - 52px - 48px);
}
.hub-items-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.hub-items-tbl thead { position: sticky; top: 0; z-index: 2; }
.hub-items-tbl th {
  padding: 8px 12px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--mct-text-3);
  white-space: nowrap;
  user-select: none;
  background: rgba(9,18,35,.98);
  box-shadow: inset 0 -1px 0 var(--mct-card-border);
  transition: color var(--t-mid);
}
.hub-items-tbl th[data-col] { cursor: pointer; }
.hub-items-tbl th[data-col]:hover,
.hub-items-tbl th[aria-sort]  { color: var(--mct-text-2); }
.hub-items-tbl th[aria-sort="ascending"]::after  { content: ' ↑'; opacity: .7; }
.hub-items-tbl th[aria-sort="descending"]::after { content: ' ↓'; opacity: .7; }
.hub-items-tbl td {
  padding: 6px 12px;
  color: var(--mct-text-2);
  border-bottom: 1px solid var(--border-ghost);
  vertical-align: middle;
}
/* Rarity strip as left border on row — color set inline from API rarity_color
   (single source; transparent neutral fallback when the item has no rarity). */
.hub-items-tbl tbody tr { border-left: 3px solid transparent; transition: border-color var(--t-mid); }
.hub-items-tbl tbody tr:hover td { background: var(--surface-1); }
.hub-items-tbl tbody tr:last-child td { border-bottom: none; }

/* Index cell */
.hub-tbl-idx {
  width: 36px; color: var(--mct-text-3); font-size: 11px;
  font-variant-numeric: tabular-nums; text-align: right;
}

/* Item cell */
.hub-tbl-item-cell { min-width: 200px; }
.hub-tbl-item-link {
  display: flex; align-items: center; gap: 9px;
  text-decoration: none; color: inherit;
}
.hub-tbl-item-link:hover .hub-tbl-item-name { color: var(--mct-accent); }
.hub-tbl-thumb-wrap {
  width: 36px; height: 36px; flex-shrink: 0;
  background: rgba(10,22,45,.7);
  border-radius: var(--r-xs); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.hub-tbl-thumb { width: 100%; height: 100%; object-fit: contain; }
.hub-tbl-ph-icon { font-size: 16px; color: var(--mct-text-3); opacity: .45; }
.hub-tbl-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hub-tbl-item-name {
  font-weight: 500; font-size: 12.5px; color: var(--mct-text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 300px; transition: color var(--t-mid);
}
.hub-tbl-item-rarity { font-size: 10px; color: var(--mct-text-3); }

/* Wear cell */
.hub-tbl-wear-cell { width: 80px; }
.hub-tbl-wear { display: flex; flex-direction: column; gap: 3px; }
.hub-tbl-wear .hub-item-wear-bar { width: 58px; height: 3px; }
.hub-tbl-wear-lbl { font-size: 10px; color: var(--mct-text-3); font-weight: 600; letter-spacing: .03em; }

/* Price cell */
.hub-tbl-num { font-variant-numeric: tabular-nums; text-align: right; }
/* A numeric HEADER must sit over its numeric column. `.hub-items-tbl th` sets
   text-align:left and, at (0,1,1), outranks `.hub-tbl-num` at (0,1,0) — so the Price and
   24h-change headers stayed left-aligned while their right-aligned cells sat underneath
   them. Matching the th to the column needs a rule that actually outranks the base one. */
.hub-items-tbl th.hub-tbl-num { text-align: right; }
.hub-tbl-price-cell { text-align: right; }
.hub-tbl-price { font-weight: 700; color: var(--mct-text-1); font-size: 13px; }
.hub-tbl-conf-dot {
  display: inline-block; width: 5px; height: 5px;
  border-radius: 50%; background: #4ade80;
  margin-right: 5px; vertical-align: middle; opacity: .65;
}

/* Action cell */
.hub-tbl-action-cell { width: 36px; text-align: center; }
/* Table empty / loading state — scoped to override .hub-items-tbl td specificity */
.hub-items-tbl .hub-tbl-empty-cell {
  text-align: center;
  padding: 40px 20px;
  color: var(--mct-text-3);
  font-size: 13px;
}
.hub-tbl-view-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 5px;
  background: rgba(59,130,246,.08); border: 1px solid rgba(59,130,246,.18);
  color: var(--mct-accent); font-size: 13px;
  text-decoration: none; transition: background var(--t-mid), border-color var(--t-mid);
}
.hub-tbl-view-btn:hover { background: rgba(59,130,246,.18); border-color: rgba(59,130,246,.35); }

/* hub-load-more and hub-load-btn defined in UI polish block below */

/* ── Right sidebar ──────────────────────────────────────────────── */
/* Static (non-sticky) so every widget is fully visible via normal page
   scroll — the previous viewport-capped inner scroll cut off the lower
   widgets (Recent Activity, My Watchlist). Phase 3 Task 8. */
.hub-sidebar-right {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hub-widget {
  background: var(--mct-card);
  border: 1px solid var(--mct-card-border);
  border-radius: var(--mct-radius);
  overflow: hidden;
}
.hub-widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--mct-card-border);
}
.hub-widget-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--mct-text-3);
  display: flex;
  align-items: center;
  gap: 6px;
}
.hub-widget-live {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mct-green);
  display: inline-block;
  animation: mct-pulse 2s infinite;
}
.hub-widget-badge-pro {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  color: #a78bfa;
  background: rgba(124,58,237,.15);
  border: 1px solid rgba(124,58,237,.3);
  border-radius: 3px;
  padding: 1px 5px;
}
.hub-widget-badge-soon {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--mct-text-3);
  background: rgba(71,85,105,.2);
  border: 1px solid rgba(71,85,105,.3);
  border-radius: 3px;
  padding: 1px 5px;
}
.hub-widget-badge-steam {
  font-size: 9px;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(56,189,248,.1);
  border: 1px solid rgba(56,189,248,.25);
  border-radius: 3px;
  padding: 1px 5px;
}
.hub-widget-body { padding: 8px 0; }
.hub-mover-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background var(--t-quick);
  text-decoration: none;
}
.hub-mover-row:hover { background: rgba(148,163,184,.04); }
.hub-mover-rank {
  font-size: 10px;
  color: var(--mct-text-3);
  width: 14px;
  flex-shrink: 0;
  text-align: right;
}
.hub-mover-name {
  flex: 1;
  font-size: 11.5px;
  color: var(--mct-text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hub-mover-price {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--mct-text-2);
  white-space: nowrap;
}
.hub-mover-change {
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  min-width: 44px;
  text-align: right;
}
.hub-mover-change.up { color: var(--mct-green); }
.hub-mover-change.down { color: var(--mct-red); }
.hub-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  font-size: 12px;
}
.hub-stat-label { color: var(--mct-text-3); }
.hub-stat-value { color: var(--mct-text-1); font-weight: 600; font-variant-numeric: tabular-nums; }
/* hub-gate-*, hub-sidebar-section defined in UI polish block below */

/* ── Float range filter ─────────────────────────────────────────── */
.hub-filter-float-wrap {
  padding: 4px 2px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hub-filter-float-track {
  position: relative;
  height: 4px;
  background: rgba(148,163,184,.15);
  border-radius: 2px;
  margin: 4px 0;
}
.hub-filter-float-fill {
  position: absolute;
  height: 100%;
  background: var(--mct-accent);
  border-radius: 2px;
}
.hub-filter-float-row {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--mct-text-3);
}

/* ── Full-width below-fold sections ─────────────────────────────── */
.hub-below {
  max-width: var(--mct-max);
  margin: 0 auto;
  padding: 0 var(--mct-pad-h) 48px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hub-below-section {
  background: var(--mct-card);
  border: 1px solid var(--mct-card-border);
  border-radius: var(--mct-radius);
  overflow: hidden;
}
/* Bare variant (Market stats, QA Revision 2): no heading and no outer box —
   the four stat cards stand alone, cleaner and more compact. */
.hub-below-section--bare {
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.hub-below-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--mct-card-border);
}
.hub-below-head h3 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--mct-text-3);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hub-below-body { padding: 16px; }

/* Recently viewed cards (Phase 3 Task 9) */
.hub-rv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.hub-rv-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: rgba(15,23,42,.5);
  border: 1px solid var(--mct-card-border);
  border-radius: var(--mct-radius-sm);
  text-decoration: none;
  transition: border-color var(--t-quick), transform var(--t-quick);
}
.hub-rv-card:hover {
  border-color: rgba(59,130,246,.4);
  transform: translateY(-1px);
}
.hub-rv-thumb {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hub-rv-thumb img { max-height: 56px; max-width: 100%; object-fit: contain; }
.hub-rv-name {
  font-size: 11.5px;
  color: var(--mct-text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hub-rv-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  color: var(--mct-text-2);
}
.hub-rv-price em { font-style: normal; font-weight: 500; color: var(--mct-text-3); }

/* Market statistics — four dedicated cards (Roadmap Post Phase 6, Section 7) */
.hub-stats-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.hub-stat-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hub-stat-card .mct-card-head { margin-bottom: 2px; }
.hub-stat-card-value {
  font-size: 26px;
  font-weight: 800;
  color: var(--mct-text-1);
  letter-spacing: -.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.hub-stat-card-sub { font-size: var(--fs-xs); color: var(--mct-text-3); }

/* ── UI polish: depth, hover, contrast ──────────────────────────── */

/* Filter group: subtle left accent on active group */
.hub-filter-group:has(.active) {
  border-left: 2px solid rgba(59,130,246,.35);
}

/* Right sidebar widget: hover glow on active items */
.hub-mover-row:hover .hub-mover-name { color: #e2e8f0; }
.hub-mover-row:hover .hub-mover-price { color: var(--mct-text-1); }

/* Gate blocks in right sidebar */
.hub-gate-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  text-align: center;
}
.hub-gate-ico {
  font-size: 22px;
  color: var(--mct-text-3);
  opacity: .5;
}
.hub-gate-text {
  font-size: 11.5px;
  color: var(--mct-text-3);
  line-height: 1.5;
}
.hub-gate-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: var(--mct-radius-sm);
  font-size: 11.5px;
  font-weight: 600;
  background: rgba(56,189,248,.1);
  border: 1px solid rgba(56,189,248,.3);
  color: #38bdf8;
  text-decoration: none;
  transition: background var(--t-mid), border-color var(--t-mid);
  cursor: pointer;
}
.hub-gate-btn:hover { background: rgba(56,189,248,.18); border-color: rgba(56,189,248,.5); }
.hub-gate-btn-pro {
  background: rgba(124,58,237,.12);
  border-color: rgba(124,58,237,.3);
  color: #a78bfa;
}
.hub-gate-btn-pro:hover { background: rgba(124,58,237,.2); border-color: rgba(124,58,237,.5); }

/* Load more button polish */
.hub-load-more { display: flex; justify-content: center; padding: 8px 0 16px; }
.hub-load-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 28px;
  background: rgba(59,130,246,.08);
  border: 1px solid rgba(59,130,246,.25);
  border-radius: var(--mct-radius-sm);
  color: var(--mct-accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-mid), border-color var(--t-mid), transform var(--t-quick);
}
.hub-load-btn:hover {
  background: rgba(59,130,246,.16);
  border-color: rgba(59,130,246,.45);
  transform: translateY(-1px);
}
.hub-load-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* Sidebar section labels */
.hub-sidebar-section {
  padding: 10px 4px 3px;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--mct-text-3);
  border-top: 1px solid var(--mct-card-border);
  margin-top: 2px;
}
.hub-sidebar-section:first-child { border-top: none; margin-top: 0; }



/* ── LIVE ticker marquee (Phase 3 Task 11) ──────────────────────
   Track holds two identical segments; translating -50% loops
   seamlessly. Content = shuffled top gainers + losers, clickable. */
.hub-pulse-items { mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%); }
.hub-pulse-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  animation: hub-ticker-scroll 60s linear infinite;
  will-change: transform;
}
@keyframes hub-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.hub-pulse:hover .hub-pulse-track { animation-play-state: paused; }
.hub-pulse-seg {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding-right: 22px;
}
a.hub-pulse-item { text-decoration: none; cursor: pointer; }
a.hub-pulse-item:hover strong { color: var(--mct-accent); }
.hub-pulse-price { margin-left: 5px; color: var(--mct-text-2); }
.hub-pulse-chg { margin-left: 5px; font-size: 11px; font-weight: 600; }
.hub-pulse-chg.up { color: var(--mct-green); }
.hub-pulse-chg.down { color: var(--mct-red); }
@media (prefers-reduced-motion: reduce) {
  .hub-pulse-track { animation: none; }
}

/* Empty state */
.hub-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 20px;
  color: var(--mct-text-3);
  font-size: 13px;
  grid-column: 1/-1;
}
.hub-empty i { font-size: 28px; opacity: .4; }

/* ── Hub responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .hub-outer { grid-template-columns: 200px minmax(0,1fr) 200px; }
  .hub-items-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hub-outer { grid-template-columns: minmax(0,1fr); }
  .hub-items-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hub-sidebar-left {
    position: static;
    max-height: none;
    display: none;
  }
  .hub-sidebar-left.open { display: flex; }
  .hub-sidebar-right { position: static; max-height: none; order: 3; }
  .hub-filter-toggle-btn { display: flex; }
}
@media (max-width: 640px) {
  .hub-items-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-stats-cards { grid-template-columns: repeat(2, 1fr); }

  /* The subheader wraps so the search controls keep full width on mobile. */
  .hub-subheader-inner {
    flex-wrap: wrap;
    height: auto;
    gap: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .hub-search-wrap { flex: 1 1 140px; max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Browse v2 — Mercato Catalog
   Two new components: brw-cat-card, brw-breadcrumb
   All others reuse existing mct.css shared card styles
   ═══════════════════════════════════════════════════════════════════ */

/* Shell & main */
.brw-shell {
  max-width: var(--mct-max);
  margin: 0 auto;
  padding: 32px var(--mct-pad-h) 56px;
}
#brwMain { min-height: 300px; }

/* Search fills space in Browse subheader */
body:has(#brwMain) .hub-subheader-inner .hub-search-label {
  flex: 1;
  max-width: 480px;
}

/* ── Breadcrumb ────────────────────────────────────────────────── */
.brw-breadcrumb {
  background: #05090f;
  border-bottom: 1px solid var(--surface-hairline);
}
.brw-bc-nav {
  max-width: var(--mct-max);
  margin: 0 auto;
  padding: 0 var(--mct-pad-h);
  display: flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  font-size: 12px;
}
.brw-bc-crumb {
  background: none; border: none; padding: 0;
  color: var(--mct-accent); font-size: 12px; cursor: pointer;
  transition: color .1s;
}
.brw-bc-crumb:hover { color: #bfdbfe; text-decoration: underline; }
.brw-bc-sep { color: var(--border-strong); font-size: 15px; line-height: 1; }
.brw-bc-cur { color: var(--mct-text-3); }

/* ── Section label ─────────────────────────────────────────────── */
.brw-section-label {
  font-size: 10.5px; font-weight: 700; color: var(--mct-text-3);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 12px;
}

/* ── Category grid ─────────────────────────────────────────────── */
.brw-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.brw-cat-wide { grid-column: span 2; }

/* ── Category card (NEW component) ────────────────────────────── */
.brw-cat-card {
  border: 1px solid var(--surface-soft);
  border-top: 2px solid var(--cat-accent, var(--border-strong));
  border-radius: var(--r-md);
  padding: 16px 16px 14px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 148px;
  transition: border-color var(--t-mid), transform var(--t-mid), box-shadow var(--t-mid);
}
.brw-cat-card:hover {
  border-color: var(--cat-accent, rgba(148,163,184,.3));
  border-top-color: var(--cat-accent, rgba(148,163,184,.5));
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,.32), 0 0 0 1px rgba(0,0,0,.08);
}
.brw-cat-glow {
  position: absolute; top: -20px; left: -10px; right: -10px; height: 80px;
  background: radial-gradient(ellipse at 50% 0, var(--cat-accent, #3b82f6) 0%, transparent 70%);
  opacity: .14; pointer-events: none; transition: opacity .18s;
}
.brw-cat-card:hover .brw-cat-glow { opacity: .24; }

.brw-cat-header {
  display: flex; align-items: center; gap: 9px; margin-bottom: 12px;
}
.brw-cat-icon {
  font-size: 18px; flex-shrink: 0;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.05); border-radius: var(--r-sm);
}
.brw-cat-name { font-size: 14px; font-weight: 700; color: var(--mct-text-1); flex: 1; letter-spacing: -.01em; }
.brw-cat-count {
  font-size: 10.5px; font-weight: 700;
  color: var(--cat-accent, var(--mct-accent));
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.06);
  padding: 2px 8px; border-radius: 10px; flex-shrink: 0;
}
.brw-cat-arrow {
  color: var(--border-strong); display: flex; align-items: center;
  flex-shrink: 0; transition: color var(--t-mid), transform var(--t-mid);
}
.brw-cat-card:hover .brw-cat-arrow {
  color: var(--cat-accent, var(--mct-accent));
  transform: translateX(3px);
}
.brw-cat-preview { flex: 1; margin-bottom: 10px; }
.brw-cat-prev-line {
  font-size: 11.5px; color: rgba(148,163,184,.55); line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brw-cat-prev-empty { font-size: 11px; color: rgba(148,163,184,.22); font-style: italic; }
.brw-cat-desc {
  font-size: 10px; color: rgba(148,163,184,.28);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: auto;
}

/* ── Subcategory grid (weapon types) ───────────────────────────── */
.brw-subcat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.brw-subcat-card {
  background: var(--mct-card); border: 1px solid var(--mct-card-border);
  border-radius: var(--mct-radius); padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
  cursor: pointer; transition: border-color .14s, background .14s;
}
.brw-subcat-card:hover {
  border-color: rgba(148,163,184,.22); background: rgba(15,30,54,.9);
}
.brw-subcat-icon { font-size: 20px; flex-shrink: 0; }
.brw-subcat-body { flex: 1; min-width: 0; }
.brw-subcat-name { font-size: 13px; font-weight: 600; color: var(--mct-text-1); margin-bottom: 2px; }
.brw-subcat-preview { font-size: 10.5px; color: var(--mct-text-3); margin-bottom: 3px; line-height: 1.4; }
.brw-subcat-count { font-size: 10.5px; color: rgba(148,163,184,.35); }
.brw-subcat-arrow { color: var(--border-strong); flex-shrink: 0; transition: color .14s; }
.brw-subcat-card:hover .brw-subcat-arrow { color: var(--mct-accent); }

/* ── Items grid (weapons, knives, stickers, etc.) ──────────────── */
.brw-item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 8px;
}
.brw-item-card {
  background: var(--mct-card); border: 1px solid var(--mct-card-border);
  border-radius: var(--mct-radius); overflow: hidden;
  transition: border-color .14s, transform var(--t-quick), box-shadow var(--t-quick);
}
.brw-item-card:hover {
  border-color: rgba(148,163,184,.22);
  transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,.22);
}
.brw-item-img {
  width: 100%; aspect-ratio: 4/3;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,20,38,.7); overflow: hidden;
}
.brw-item-img img { max-width: 88%; max-height: 88%; object-fit: contain; }
.brw-item-img-ph {
  font-size: 18px; font-weight: 700; color: var(--border-mid); text-transform: uppercase;
}
.brw-item-body { padding: 7px 9px 9px; }
.brw-item-weapon { font-size: 9.5px; color: var(--mct-text-3); margin-bottom: 1px; }
.brw-item-skin {
  font-size: 11.5px; font-weight: 600; color: var(--mct-text-1);
  line-height: 1.3; margin-bottom: 4px;
}
.brw-item-meta { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.brw-item-ext {
  font-size: 9px; color: var(--mct-text-3);
  background: var(--surface-hairline); border: 1px solid var(--surface-soft);
  padding: 1px 5px; border-radius: 3px;
}
.brw-item-rarity { font-size: 9px; font-weight: 600; color: var(--mct-text-3); }

/* ── Collections grid ──────────────────────────────────────────── */
.brw-coll-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}
.brw-coll-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}

/* Collection detail header */
.brw-coll-detail-head {
  margin-bottom: 16px; padding-bottom: 14px;
  border-bottom: 1px solid var(--surface-hairline);
}
.brw-coll-detail-title {
  font-size: 20px; font-weight: 700; color: var(--mct-text-1); margin-bottom: 5px;
}
.brw-coll-detail-meta { font-size: 12px; color: var(--mct-text-3); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.brw-coll-badge {
  display: inline-block; font-size: 10px; font-weight: 600;
  padding: 2px 8px; border-radius: var(--r-xs);
}
.brw-coll-badge--ok   { background: rgba(34,197,94,.1);  color: #4ade80; }
.brw-coll-badge--warn { background: rgba(234,179,8,.1);  color: #fbbf24; }
.brw-coll-badge--none { background: var(--surface-hairline); color: var(--mct-text-3); }

/* ── Search results ────────────────────────────────────────────── */
.brw-search-results { max-width: 700px; }
.brw-search-section { margin-bottom: 22px; }
.brw-search-section-title {
  font-size: 10.5px; font-weight: 700; color: var(--mct-text-3);
  text-transform: uppercase; letter-spacing: .07em;
  margin-bottom: 6px; padding-bottom: 6px;
  border-bottom: 1px solid var(--surface-hairline);
}
.brw-search-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: 7px; cursor: pointer;
  transition: background .1s;
}
.brw-search-item:hover { background: rgba(255,255,255,.04); }
.brw-si-icon { font-size: 16px; width: 26px; text-align: center; flex-shrink: 0; }
.brw-si-body { flex: 1; min-width: 0; }
.brw-si-label { font-size: 12px; color: var(--mct-text-1); margin-bottom: 1px; }
.brw-si-sub   { font-size: 10.5px; color: var(--mct-text-3); }
.brw-si-arrow { color: var(--border-strong); font-size: 16px; flex-shrink: 0; }

/* ── Loading & empty ───────────────────────────────────────────── */
.brw-loading {
  display: flex; align-items: center; gap: 10px;
  padding: 52px 0; color: var(--mct-text-3); font-size: 13px;
}
.brw-spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(148,163,184,.12);
  border-top-color: var(--mct-accent);
  animation: brw-spin .7s linear infinite; flex-shrink: 0;
}
@keyframes brw-spin { to { transform: rotate(360deg); } }
.brw-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 64px 20px; text-align: center; color: var(--mct-text-3);
}
.brw-empty-icon { font-size: 34px; opacity: .35; }
.brw-empty-title { font-size: 15px; font-weight: 600; color: var(--mct-text-2); }
.brw-empty-desc  { font-size: 12px; color: var(--mct-text-3); }

/* ── Collection summary cards (generated by collectionSummaryCard) ── */
.collection-summary-card {
  border-color: var(--mct-card-border) !important;
  background: var(--mct-card) !important;
  box-shadow: none !important;
  border-radius: var(--mct-radius) !important;
  transition: border-color .14s, transform .14s, box-shadow .14s !important;
}
.collection-summary-card:hover {
  border-color: var(--mct-card-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.22) !important;
}
.collection-summary-image {
  background: var(--mct-bg-2) !important;
  border-radius: var(--mct-radius) var(--mct-radius) 0 0 !important;
}
.collection-summary-status {
  border-color: var(--mct-card-border) !important;
  background: rgba(59,130,246,.08) !important;
  color: var(--mct-accent) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: var(--r-xs) !important;
  padding: 3px 8px !important;
  min-height: 0 !important;
}
.collection-summary-title {
  color: var(--mct-text-1) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.collection-summary-metrics span {
  border-color: var(--mct-card-border) !important;
  background: rgba(0,0,0,.18) !important;
  border-radius: var(--mct-radius-sm) !important;
}
.collection-summary-metrics b { color: var(--mct-text-1) !important; font-size: 13px !important; }
.collection-summary-metrics small { color: var(--mct-text-2) !important; }

/* ── Collection item cards (generated by collectionCard) ── */
.collection-item-card {
  background: var(--mct-card) !important;
  border-radius: var(--mct-radius) !important;
  transition: border-color .14s, transform .14s, box-shadow .14s !important;
}
.collection-item-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.22) !important;
}
.collection-item-image {
  background: var(--mct-bg-2) !important;
  border-radius: var(--mct-radius) var(--mct-radius) 0 0 !important;
}
.collection-item-body {
  background: transparent !important;
  padding: 10px 12px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.collection-item-status {
  border-color: var(--mct-card-border) !important;
  background: rgba(34,197,94,.08) !important;
  color: var(--mct-green) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  border-radius: var(--r-xs) !important;
  padding: 2px 7px !important;
  min-height: 0 !important;
}
.collection-item-title {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--mct-text-1) !important;
  line-height: 1.3 !important;
}
.collection-item-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
}
.collection-item-meta strong {
  color: var(--mct-text-1) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.rarity-pill {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
  background: color-mix(in srgb, var(--rarity-color, rgba(148,163,184,.3)) 20%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--rarity-color, rgba(148,163,184,.3)) 40%, transparent) !important;
  color: var(--rarity-color, var(--mct-text-2)) !important;
}

/* ── Selected collection state ── */
.collection-selected-state,
#collectionSelectedState {
  display: grid;
  gap: 10px;
}
.collection-back-link {
  color: var(--mct-accent) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.collection-back-link:hover { color: var(--mct-text-1) !important; }
.collection-selected-card {
  background: var(--mct-card) !important;
  border: 1px solid var(--mct-card-border) !important;
  border-radius: var(--mct-radius) !important;
}
.collection-selected-image {
  background: var(--mct-bg-2) !important;
  border: 1px solid var(--mct-card-border) !important;
  border-radius: var(--mct-radius-sm) !important;
}
.collection-selected-copy h3 {
  color: var(--mct-text-1) !important;
  font-size: 24px !important;
}
.collection-selected-copy p { color: var(--mct-text-2) !important; font-size: 13px !important; }

/* ── Empty state ── */
.collection-empty-state {
  border: 1px solid var(--mct-card-border) !important;
  background: var(--mct-card) !important;
  border-radius: var(--mct-radius) !important;
  color: var(--mct-text-2) !important;
}
.collection-empty-state h2 { color: var(--mct-text-1) !important; font-size: 16px !important; }

/* ── button-link (reuse Market Hub button style) ── */
.button-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--mct-card-border);
  border-radius: var(--mct-radius-sm);
  background: var(--mct-bg-2);
  color: var(--mct-text-2);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--t-quick), color var(--t-quick), background var(--t-quick);
}
.button-link:hover { border-color: rgba(148,163,184,.3); color: var(--mct-text-1); background: var(--mct-bg-1); }
.button-link.primary {
  border-color: rgba(59,130,246,.5);
  background: rgba(59,130,246,.14);
  color: var(--mct-accent);
  font-weight: 600;
}
.button-link.primary:hover { background: rgba(59,130,246,.22); border-color: rgba(59,130,246,.7); }

/* ── Browse v2 Responsive ──────────────────────────────────────── */
@media (max-width: 1100px) {
  .brw-cat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .brw-shell { padding: 24px var(--mct-pad-h) 32px; }
  .brw-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .brw-cat-wide { grid-column: span 1; }
  .brw-subcat-grid { grid-template-columns: repeat(2, 1fr); }
  .brw-item-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .brw-coll-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
@media (max-width: 640px) {
  .brw-shell { padding: 20px 12px 24px; }
  .brw-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .brw-cat-wide { grid-column: span 1; }
  .brw-subcat-grid { grid-template-columns: 1fr 1fr; }
  .brw-item-grid { grid-template-columns: repeat(2, 1fr); }
  .brw-coll-grid, .brw-coll-items-grid { grid-template-columns: repeat(2, 1fr); }
  .brw-coll-detail-title { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════
   MEGA MENU — Browse navigation panel
   ═══════════════════════════════════════════════════════════════════ */

/* Trigger button (replaces Browse <a> in nav) */
.mct-mega-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 11px;
  border-radius: var(--mct-radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--mct-text-2);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: color .13s, background .13s;
}
.mct-mega-trigger:hover,
.mct-mega-trigger.mct-active,
.mct-mega-trigger.mct-mega-open {
  color: var(--mct-text-1);
  background: var(--surface-2);
}
.mct-mega-chevron {
  width: 11px; height: 11px;
  color: rgba(148,163,184,.4);
  flex-shrink: 0;
  transition: transform .2s ease, color .13s;
}
.mct-mega-trigger.mct-mega-open .mct-mega-chevron {
  transform: rotate(180deg);
  color: rgba(148,163,184,.7);
}

/* Fixed panel — sits below sticky header */
.mct-mega-panel {
  position: fixed;
  top: var(--mct-header-h);
  left: 50%;
  width: min(1060px, calc(100vw - 32px));
  z-index: 199;
  background: rgba(7,13,26,.98);
  border: 1px solid var(--surface-soft);
  border-top: 2px solid rgba(59,130,246,.18);
  border-radius: 0 0 16px 16px;
  box-shadow: 0 32px 80px rgba(0,0,0,.6), 0 4px 24px rgba(0,0,0,.4);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-10px);
  transition: opacity .18s ease, transform .18s ease;
}
.mct-mega-panel.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Dim overlay behind panel */
.mct-mega-overlay {
  position: fixed;
  inset: 0;
  top: var(--mct-header-h);
  z-index: 198;
  background: rgba(0,0,0,.3);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.mct-mega-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* Search bar */
.mct-mega-search {
  padding: 14px 20px;
  border-bottom: 1px solid var(--surface-hairline);
  position: relative;
  display: flex;
  align-items: center;
}
.mct-mega-search-icon {
  position: absolute;
  left: 32px;
  color: rgba(148,163,184,.35);
  font-size: 14px;
  pointer-events: none;
}
.mct-mega-search-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface-1);
  border: 1px solid var(--surface-soft);
  border-radius: var(--r-sm);
  padding: 8px 72px 8px 36px; /* right: room for Ctrl+K badge */
  font-size: 13px;
  color: var(--mct-text-1);
  outline: none;
  transition: border-color var(--t-mid), background var(--t-mid);
  font-family: inherit;
}
.mct-mega-search-input::placeholder { color: rgba(148,163,184,.3); }
/* The "/" hint badge only shows while the field is empty; the native clear (×)
   button only shows once text is entered. So once there is text, tighten the
   right padding to seat the × near the field's right edge. */
.mct-mega-search-input:not(:placeholder-shown) { padding-right: 30px; }
/* Keep the native clear (×) button comfortably off the entered text. */
.mct-mega-search-input::-webkit-search-cancel-button { margin-left: 16px; }
.mct-mega-search-input:focus {
  border-color: rgba(59,130,246,.45);
  background: var(--surface-hairline);
}
.mct-mega-search-input:not(:placeholder-shown) + .mct-mega-search-kbd {
  opacity: 0;
}

/* Search bar Ctrl+K hint — absolute inside input */
.mct-mega-search-kbd {
  position: absolute;
  right: 28px; /* 20px search padding + 8px from input edge */
  top: 50%; transform: translateY(-50%);
  font-size: 10px; font-weight: 600;
  color: rgba(148,163,184,.3);
  background: rgba(148,163,184,.06);
  border: 1px solid var(--surface-soft);
  border-radius: 5px;
  padding: 2px 7px;
  font-family: inherit;
  pointer-events: none;
  white-space: nowrap;
  line-height: 1.5;
}

/* Category body */
.mct-mega-body {
  padding: 20px 24px 12px;
}
/* Live-search empty state (shown when a query matches no menu items). */
.mct-mega-noresults {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 16px;
  color: rgba(148,163,184,.55);
  font-size: 13px;
}
.mct-mega-noresults[hidden] { display: none; }
.mct-mega-noresults i { font-size: 16px; opacity: .75; }
.mct-mega-row {
  display: grid;
  gap: 0;
}
/* First 2 cols (Collections, Weapons) are ~2× wider — featured. Weapons takes
   a little of Collections' share so its two chip columns can hold the widest
   label ("Desert Eagle") with padding intact; the 8fr total keeps the panel
   width and the four narrow columns unchanged. */
.mct-mega-row-1 { grid-template-columns: 1.7fr 2.3fr 1fr 1fr 1fr 1fr; }
.mct-mega-row-2 {
  grid-template-columns: repeat(5, 1fr);
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(148,163,184,.06);
}

/* Individual category column */
.mct-mega-col {
  padding: 0 20px 14px;
  border-right: 1px solid rgba(148,163,184,.06);
  min-width: 0; overflow: hidden;
}
.mct-mega-col:last-child { border-right: none; }

/* Featured column (Collections, Weapons) */
.mct-mega-col--feat .mct-mega-col-accent-line {
  width: 28px; height: 3px;
}
.mct-mega-col--feat .mct-mega-col-label {
  font-size: 11px;
}

/* Column header */
.mct-mega-col-head { margin-bottom: 12px; }
.mct-mega-col-accent-line {
  height: 2px; width: 22px;
  background: var(--col-accent, var(--mct-accent));
  border-radius: 1px;
  margin-bottom: 8px;
}
.mct-mega-col-label {
  font-size: 10px; font-weight: 700;
  color: var(--mct-text-3);
  text-transform: uppercase; letter-spacing: .09em;
  display: flex; align-items: center; gap: 5px;
}
.mct-mega-col-icon { font-size: 11px; }

/* Items list */
.mct-mega-items {
  margin: 0 0 10px; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 1px;
}
.mct-mega-item { padding: 0; }
.mct-mega-item a {
  font-size: 12.5px; color: var(--mct-text-2);
  text-decoration: none;
  display: flex; align-items: center; gap: 7px;
  padding: 4px 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .1s;
}
.mct-mega-item a:hover { color: var(--col-accent, var(--mct-accent)); }
.mct-mega-item a:hover .mct-mega-item-dot { opacity: 1; }
.mct-mega-item--empty {
  font-size: 11px; color: var(--border-strong); font-style: italic; padding: 4px 0;
}

/* Colored accent dot for regular list items */
.mct-mega-item-dot {
  width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
  background: var(--col-accent, var(--mct-accent));
  opacity: .4; transition: opacity .1s;
}

/* Weapon type chip grid */
/* minmax(0,…) keeps both columns exactly equal: a plain 1fr floors at the
   chip's min-content width, so a wide label ("Desert Eagle") would otherwise
   stretch its column. grid-auto-rows equalises the rows the same way. */
.mct-mega-weapon-chips {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  grid-auto-rows: 1fr;
  gap: 6px; margin-bottom: 12px;
}
.mct-mega-chip {
  display: flex; align-items: center; gap: 6px;
  min-width: 0;
  padding: 7px 12px; border-radius: 7px;
  border: 1px solid var(--surface-soft);
  background: rgba(148,163,184,.04);
  font-size: 12px; font-weight: 500;
  color: var(--mct-text-2); text-decoration: none;
  transition: background var(--t-quick), border-color var(--t-quick), color var(--t-quick);
  white-space: nowrap;
}
.mct-mega-chip:hover {
  background: rgba(96,165,250,.1);
  border-color: rgba(96,165,250,.3);
  color: var(--mct-text-1);
}
/* Chip artwork is a full-colour raster, so the dim→bright hover that used to
   run through currentColor on the old silhouettes runs through opacity instead. */
.mct-mega-chip-icon {
  display: flex; align-items: center; flex-shrink: 0;
  opacity: .72;
  transition: opacity var(--t-quick);
}
.mct-mega-chip-icon img { height: 12px; width: auto; display: block; }
.mct-mega-chip:hover .mct-mega-chip-icon { opacity: 1; }

/* Collection items with thumbnail (live loaded) */
.mct-mega-coll-list {
  display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px;
}
.mct-mega-coll-item {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 6px; border-radius: 6px;
  color: var(--mct-text-2); text-decoration: none;
  font-size: 12.5px;
  transition: background .1s, color .1s;
}
.mct-mega-coll-item:hover {
  background: var(--surface-hairline);
  color: var(--mct-text-1);
}
.mct-mega-coll-thumb {
  width: 32px; height: 32px; border-radius: 6px; flex-shrink: 0;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(148,163,184,.09);
  object-fit: contain;
  padding: 4px; box-sizing: border-box;
}
.mct-mega-coll-dot {
  width: 32px; height: 32px; border-radius: 6px; flex-shrink: 0;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(148,163,184,.09);
}
.mct-mega-coll-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Recently Added items with thumbnail (live loaded) */
.mct-mega-recent-list {
  display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px;
}
.mct-mega-recent-item {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px; border-radius: 6px;
  color: var(--mct-text-2); text-decoration: none;
  transition: background .1s, color .1s;
}
.mct-mega-recent-item:hover {
  background: var(--surface-hairline);
  color: var(--mct-text-1);
}
.mct-mega-recent-thumb {
  width: 26px; height: 26px; border-radius: var(--r-xs); flex-shrink: 0;
  background: var(--surface-hairline); object-fit: contain;
}
.mct-mega-recent-name {
  font-size: 12px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* View all link */
.mct-mega-viewall {
  font-size: 10.5px; font-weight: 600;
  color: var(--col-accent, var(--mct-accent));
  text-decoration: none;
  opacity: .55; transition: opacity var(--t-quick);
  white-space: nowrap;
}
.mct-mega-viewall:hover { opacity: 1; }
.mct-mega-va-arrow { font-size: 13px; }

/* Skeleton loading placeholders */
.mct-mega-loading { margin: 0 0 10px; }
.mct-mega-skel {
  height: 10px; border-radius: var(--r-xs);
  background: var(--surface-hairline);
  margin-bottom: 8px;
  animation: mm-pulse 1.6s ease infinite;
}
.mct-mega-skel-tall { height: 32px; }
.mct-mega-skel-sm { width: 60%; }
@keyframes mm-pulse {
  0%, 100% { opacity: .5; }
  50%       { opacity: 1; }
}

/* Footer bar */
.mct-mega-footer {
  border-top: 1px solid var(--surface-hairline);
  padding: 10px 20px;
  display: flex; align-items: center; gap: 6px;
  background: rgba(4,9,18,.55);
  border-radius: 0 0 16px 16px;
}
.mct-mega-quick {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border-radius: var(--r-sm); border: 1px solid var(--surface-soft);
  font-size: 12px; font-weight: 500; color: var(--mct-text-2);
  text-decoration: none; background: rgba(148,163,184,.03);
  transition: color var(--t-quick), border-color var(--t-quick), background var(--t-quick);
}
.mct-mega-quick:hover {
  color: var(--mct-text-1);
  border-color: rgba(148,163,184,.25);
  background: var(--surface-hairline);
}
.mct-mega-quick i { font-size: 13px; color: rgba(148,163,184,.4); }
.mct-mega-footer-sep {
  flex: 1;
}
.mct-mega-close-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 6px;
  background: none; border: 1px solid var(--surface-soft);
  font-size: 11px; color: rgba(148,163,184,.35);
  cursor: pointer; font-family: inherit;
  transition: color var(--t-quick), border-color var(--t-quick);
}
.mct-mega-close-btn:hover {
  color: var(--mct-text-2);
  border-color: rgba(148,163,184,.25);
}
.mct-mega-close-btn i { font-size: 12px; }
.mct-mega-close-btn span {
  font-size: 10px; font-weight: 600;
  background: var(--surface-soft); border-radius: 3px;
  padding: 0 4px; line-height: 16px;
}

/* ── Mega Menu Responsive ──────────────────────────────────────── */
@media (max-width: 1100px) {
  .mct-mega-panel { width: calc(100vw - 32px); }
  /* Keep all 6 cols, reduce featured advantage slightly */
  .mct-mega-row-1 { grid-template-columns: 1.5fr 1.5fr 1fr 1fr 1fr 1fr; }
  .mct-mega-row-2 { grid-template-columns: repeat(5, 1fr); }
  .mct-mega-col { padding: 0 14px 14px; }
  /* At medium viewport, chips go single column to avoid clipping */
  .mct-mega-weapon-chips { grid-template-columns: 1fr; gap: 4px; }
  .mct-mega-chip { padding: 6px 10px; }
}
@media (max-width: 900px) {
  .mct-mega-panel {
    width: 100vw; left: 0;
    border-radius: 0;
    transform: translateY(-10px);
  }
  .mct-mega-panel.open { transform: translateY(0); }
  .mct-mega-row-1 { grid-template-columns: repeat(2, 1fr); }
  .mct-mega-row-2 { grid-template-columns: repeat(2, 1fr); }
  .mct-mega-col { padding: 0 12px 12px; }
  .mct-mega-body { padding: 16px 16px 4px; }
  .mct-mega-footer { padding: 10px 16px; flex-wrap: wrap; gap: 6px; }
  .mct-mega-search-kbd { display: none; }
}
@media (max-width: 640px) {
  .mct-mega-row-1,
  .mct-mega-row-2 { grid-template-columns: repeat(2, 1fr); }
  .mct-mega-search { padding: 12px 16px; }
  .mct-mega-search-icon { left: 28px; }
  .mct-mega-quick { padding: 5px 10px; font-size: 11px; }
}

/* ── Auth Area & User Menu ─────────────────────────────────────── */
.mct-auth-area {
  display: flex;
  align-items: center;
}

/* ── Auth pending placeholder ───────────────────────────────────────
   Shown until /api/me resolves, so an authenticated user is never painted
   into the guest header (and cannot re-enter the login flow from it).
   Box metrics deliberately mirror .mct-steam-btn — same padding, font-size
   and border width — so committing to the real state does not shift the
   header. It carries no text and no href: it is a neutral shape, not a
   control. */
.mct-auth-pending {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-width: 96px;
  padding: 7px 15px;
  font-size: 13px;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: var(--mct-radius-sm);
  background: rgba(148, 163, 184, .10);
  overflow: hidden;
  position: relative;
}
/* Establish the same line box the button's text creates, without any glyph. */
.mct-auth-pending::before {
  content: "";
  display: inline-block;
  height: 1em;
}
.mct-auth-pending::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
    rgba(148, 163, 184, 0) 0%,
    rgba(148, 163, 184, .14) 50%,
    rgba(148, 163, 184, 0) 100%);
  animation: mct-auth-shimmer 1.1s ease-in-out infinite;
}
@keyframes mct-auth-shimmer {
  100% { transform: translateX(100%); }
}
/* Drawer variant: a name-width bar inside the user meta block. */
.mct-auth-pending--drawer {
  min-width: 120px;
  padding: 0;
  height: 14px;
  border-radius: 4px;
}
.mct-auth-pending--drawer::before { height: 0; }
/* Drawer avatar placeholder: same circle as the real avatar, no glyph. */
.mct-auth-pending-avatar {
  background: rgba(148, 163, 184, .10);
  border-color: rgba(148, 163, 184, .15);
}
@media (prefers-reduced-motion: reduce) {
  .mct-auth-pending::after { animation: none; }
}

/* ── User Menu Trigger ──────────────────────────────────────────── */
.mct-user-menu {
  position: relative;
}

.mct-user-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: 20px;
  border: 1px solid rgba(148,163,184,.12);
  background: transparent;
  color: var(--mct-text-2);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  transition: background .13s, border-color .13s, color .13s;
  white-space: nowrap;
  line-height: 1;
}

.mct-user-trigger:hover {
  background: var(--surface-hairline);
  border-color: var(--border-strong);
  color: var(--mct-text-1);
}

.mct-user-trigger .mct-mega-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: .5;
  transition: transform var(--t-mid), opacity var(--t-mid);
}

.mct-user-trigger[aria-expanded="true"] .mct-mega-chevron {
  transform: rotate(180deg);
  opacity: .8;
}

/* ── Avatar ─────────────────────────────────────────────────────── */
.mct-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid rgba(148,163,184,.15);
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

.mct-user-avatar--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(59,130,246,.12);
  border: 1.5px solid rgba(59,130,246,.2);
  color: var(--mct-accent);
  font-size: 14px;
}

.mct-user-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Dropdown ───────────────────────────────────────────────────── */
.mct-user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 190px;
  background: var(--mct-bg-1);
  border: 1px solid var(--mct-card-border);
  border-radius: var(--mct-radius);
  box-shadow: 0 8px 32px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3);
  padding: 6px 0;
  z-index: 1100;
  opacity: 0;
  transform: translateY(-6px) scale(.97);
  pointer-events: none;
  transition: opacity var(--t-mid), transform var(--t-mid);
}

.mct-user-dropdown.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.mct-user-dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 450;
  color: var(--mct-text-2);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background .1s, color .1s;
}

.mct-user-dd-item i {
  font-size: 15px;
  width: 18px;
  flex-shrink: 0;
  opacity: .6;
}

.mct-user-dd-item:hover {
  background: var(--surface-hairline);
  color: var(--mct-text-1);
}

.mct-user-dd-item:hover i { opacity: 1; }

/* Active section cue for authenticated pages (Section 7, M2): the header
   nav only covers Home/Market Hub/Browse/Pricing, so Dashboard, Portfolio,
   Inventory, Watchlist, Settings and System highlight their dropdown item
   instead — making their data-active values meaningful (Design Standard §14). */
.mct-user-dd-item.mct-active { color: var(--mct-accent); background: var(--mct-accent-glow); }
.mct-user-dd-item.mct-active i { opacity: 1; color: var(--mct-accent); }

.mct-user-dd-sep {
  height: 1px;
  background: var(--mct-card-border);
  margin: 5px 0;
}

.mct-user-dd-signout {
  color: rgba(239,68,68,.7);
}

.mct-user-dd-signout i { color: inherit; opacity: .8; }

.mct-user-dd-signout:hover {
  background: rgba(239,68,68,.08);
  color: var(--c-danger);
}

/* ── Responsive: mobile header = hamburger + brand only ──────────────
   On mobile the drawer is the single navigation + account surface. The
   Mercato logo stays in the header for persistent branding, but the auth
   area (avatar / user menu or Sign in) is hidden here — identity lives in
   the drawer's user block instead. This keeps the brand visible while
   removing the header/drawer duplication of account information. Desktop is
   unchanged. */
@media (max-width: 768px) {
  .mct-header .mct-header-end { display: none; }
}

/* ── Mobile Navigation Drawer (≤768px) ──────────────────────────────
   Replaces the desktop nav where it is hidden (.mct-nav display:none at
   ≤768px). The hamburger lives in the header; the drawer + overlay are
   injected into <body> by mct-shell.js. Desktop (≥769px) renders neither,
   so the desktop header is unchanged. */
.mct-menu-btn {
  display: none;               /* shown only at the mobile breakpoint */
  margin-right: 12px;
  flex-shrink: 0;
}

.mct-menu-icon {
  width: 20px;
  height: 20px;
}

.mct-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.mct-drawer-overlay.open { opacity: 1; pointer-events: auto; }

.mct-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: calc(var(--z-modal) + 1);
  width: min(300px, 85vw);
  display: flex;
  flex-direction: column;
  background: var(--mct-bg-1);
  border-right: 1px solid var(--mct-card-border);
  box-shadow: 0 0 60px rgba(0,0,0,.5);
  transform: translateX(-100%);
  /* visibility keeps the closed drawer out of the tab order and the
     accessibility tree without aria-hidden bookkeeping */
  visibility: hidden;
  transition: transform .2s ease, visibility .2s;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  outline: none;
}
.mct-drawer.open {
  transform: translateX(0);
  visibility: visible;
}

.mct-drawer-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--mct-header-h);
  padding: 14px 12px 14px 16px;
  border-bottom: 1px solid var(--mct-card-border);
  flex-shrink: 0;
}
.mct-drawer-close { flex-shrink: 0; align-self: flex-start; }

/* User block — top of the drawer: avatar, display name, subscription plan */
.mct-drawer-user {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.mct-drawer-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(148,163,184,.15);
  flex-shrink: 0;
  display: block;
}
.mct-drawer-avatar--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(59,130,246,.12);
  border-color: rgba(59,130,246,.2);
  color: var(--mct-accent);
  font-size: 20px;
}
.mct-drawer-user-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.mct-drawer-user-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--mct-text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mct-drawer-user-plan {
  align-self: flex-start;
  max-width: 100%;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--mct-accent);
  background: var(--mct-accent-glow);
  border: 1px solid rgba(59,130,246,.25);
  padding: 1px 8px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mct-drawer-user-signin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mct-accent);
  text-decoration: none;
}
.mct-drawer-user-signin:hover { color: var(--mct-accent-2); }

.mct-drawer-nav { padding-bottom: 18px; }

.mct-drawer-sec {
  padding: 18px 16px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mct-text-3);
}

.mct-drawer-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--mct-text-2);
  text-decoration: none;
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--t-quick), color var(--t-quick);
}
.mct-drawer-link i {
  font-size: 17px;
  width: 20px;
  flex-shrink: 0;
  opacity: .6;
}
.mct-drawer-link:hover,
.mct-drawer-link:active {
  background: var(--surface-hairline);
  color: var(--mct-text-1);
}
.mct-drawer-link:hover i { opacity: 1; }
.mct-drawer-link.mct-active {
  color: var(--mct-accent);
  background: var(--mct-accent-glow);
}
.mct-drawer-link.mct-active i { opacity: 1; color: var(--mct-accent); }

.mct-drawer-signout { color: rgba(239,68,68,.7); }
.mct-drawer-signout i { color: inherit; opacity: .8; }
.mct-drawer-signout:hover {
  background: rgba(239,68,68,.08);
  color: var(--c-danger);
}

/* Background scroll lock while the drawer is open (mct-shell.js toggles it) */
html.mct-drawer-lock,
body.mct-drawer-lock { overflow: hidden; }

@media (max-width: 768px) {
  .mct-menu-btn { display: inline-flex; }
}
@media (min-width: 769px) {
  .mct-drawer,
  .mct-drawer-overlay { display: none; }
}

/* ============================================================
   Shared page components — Stage 4.5
   Used by inventory, portfolio, dashboard pages.
   Page-specific prefixed classes (inv-tab, pf-tab, …) are kept
   for backward compat; new pages should use these tokens.
   ============================================================ */

/* ── Game/category tab row ───────────────────────────────────── */
.mct-page-tabs { display: flex; gap: 4px; flex-wrap: wrap; }

.mct-page-tab {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--mct-card-border);
  background: transparent;
  color: var(--mct-text-2);
  cursor: pointer;
  font-family: inherit;
  transition: background var(--t-quick), color var(--t-quick), border-color var(--t-quick);
}
.mct-page-tab:hover { background: var(--surface-hairline); color: var(--mct-text-1); }
.mct-page-tab.active {
  background: rgba(59,130,246,.12);
  border-color: rgba(59,130,246,.4);
  color: var(--mct-accent);
}

.mct-tab-count {
  display: inline-block;
  margin-left: 5px;
  font-size: 11px;
  background: rgba(148,163,184,.15);
  border-radius: 10px;
  padding: 0 6px;
}

/* ── Toolbar (search + selects) ─────────────────────────────── */
.mct-page-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.mct-search-wrap { position: relative; flex: 1; min-width: 180px; }
.mct-search-icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--mct-text-3); pointer-events: none; font-size: 15px;
}
.mct-search-input {
  width: 100%; padding: 8px 12px 8px 34px;
  border-radius: var(--mct-radius-sm);
  background: var(--mct-bg-2); border: 1px solid var(--mct-card-border);
  color: var(--mct-text-1); font-size: 13px; font-family: inherit;
  box-sizing: border-box;
}
.mct-search-input:focus { outline: none; border-color: rgba(59,130,246,.4); }

.mct-select-input {
  padding: 8px 12px;
  border-radius: var(--mct-radius-sm);
  background: var(--mct-bg-2); border: 1px solid var(--mct-card-border);
  color: var(--mct-text-2); font-size: 13px; font-family: inherit; cursor: pointer;
}
.mct-select-input:focus { outline: none; border-color: rgba(59,130,246,.4); }

/* ── Spinner ─────────────────────────────────────────────────── */
@keyframes mct-spin { to { transform: rotate(360deg); } }
.mct-spinner {
  display: inline-block; width: 28px; height: 28px;
  border: 3px solid var(--mct-card-border);
  border-top-color: var(--mct-accent);
  border-radius: 50%;
  animation: mct-spin .8s linear infinite;
}

/* ── Auth wall (shown when user is not logged in) ────────────── */
.mct-auth-wall {
  display: flex; flex-direction: column; align-items: center;
  padding: 80px 24px; text-align: center; gap: 16px;
}
.mct-auth-wall h2 { font-size: 20px; font-weight: 700; color: var(--mct-text-1); margin: 0; }
.mct-auth-wall p  { font-size: 14px; color: var(--mct-text-2); margin: 0; }

/* ── Page empty state ────────────────────────────────────────── */
.mct-empty-state { text-align: center; padding: 60px 20px; color: var(--mct-text-3); }
.mct-empty-state i { font-size: 48px; display: block; margin-bottom: 12px; opacity: .3; }
.mct-empty-state p { font-size: 14px; margin: 0; }

/* ════════════════════════════════════════════════════════════════
   Shell-injected components (Section 3, QA Revision 2).
   These render on EVERY page via mct-shell.js (welcome step, toast,
   watermark), so their styles live here in the base stylesheet —
   components.css is not loaded by all pages.
   ════════════════════════════════════════════════════════════════ */

/* First-login welcome step (ProductSpecification §7) */
.mct-welcome-overlay { position:fixed; inset:0; z-index:var(--z-modal, 300); display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); padding:var(--sp-4); }
.mct-welcome { background:var(--mct-bg-1, var(--mct-card)); border:1px solid var(--mct-card-border); border-radius:var(--r-lg); padding:28px 26px; max-width:480px; width:100%; display:flex; flex-direction:column; gap:var(--sp-3); box-shadow:var(--sh-card); }
.mct-welcome h2 { margin:0; font-size:var(--fs-xl, 20px); font-weight:800; color:var(--mct-text-1); letter-spacing:-.01em; }
.mct-welcome-sub { margin:0; font-size:var(--fs-base); color:var(--mct-text-2); line-height:1.55; }
.mct-welcome-actions { display:flex; flex-direction:column; gap:8px; }
.mct-welcome-action { display:flex; align-items:center; gap:10px; padding:11px 14px; border:1px solid var(--mct-card-border); border-radius:var(--r-md); color:var(--mct-text-1); text-decoration:none; font-size:var(--fs-base); font-weight:600; background:var(--mct-card); }
.mct-welcome-action:hover { border-color:var(--mct-accent); }
.mct-welcome-action i { color:var(--mct-accent); font-size:17px; }
.mct-welcome-email label { display:block; font-size:var(--fs-xs); color:var(--mct-text-3); margin-bottom:6px; }
.mct-welcome-email-row { display:flex; gap:8px; }
.mct-welcome-email-row input { flex:1; min-width:0; background:var(--mct-card); border:1px solid var(--mct-card-border); border-radius:var(--r-md); color:var(--mct-text-1); font:inherit; font-size:var(--fs-base); padding:9px 12px; }
.mct-welcome-msg { margin:6px 0 0; font-size:var(--fs-xs); }
.mct-welcome-msg.ok { color:var(--c-success); }
.mct-welcome-msg.err { color:var(--c-danger, #ef4444); }
.mct-welcome-skip { appearance:none; border:0; background:none; color:var(--mct-text-3); font:inherit; font-size:var(--fs-sm); cursor:pointer; align-self:center; padding:4px 8px; }
.mct-welcome-skip:hover { color:var(--mct-text-1); }

/* Mercato.gg watermark — professional chart watermark (QA Revision 3):
   centered, large, very low opacity. Reads as part of the chart background
   (like financial/analytics platforms), never interferes with the data. */
.mct-watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(26px, 5vw, 44px);
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--mct-text-1);
  opacity: .07;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

/* Search autocomplete (lib/suggest.js) — reusable for any search field.
   Absolute dropdown → zero layout shift; open/close uses the same quick
   fade/slide as the rest of the UI. */
.mct-suggest-anchor { position: relative; }
.mct-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: var(--z-nav, 200);
  background: var(--mct-card);
  border: 1px solid var(--mct-card-border);
  border-radius: var(--mct-radius-sm);
  box-shadow: var(--sh-card, 0 12px 32px rgba(0,0,0,.35));
  max-height: 420px;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--t-fast, .12s) ease, transform var(--t-fast, .12s) ease;
  text-align: left;
}
.mct-suggest.is-open { opacity: 1; transform: none; }
.mct-suggest-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--mct-text-2);
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--mct-card-border);
}
.mct-suggest-item:last-child { border-bottom: 0; }
.mct-suggest-item:hover, .mct-suggest-item.is-active { background: rgba(59,130,246,.10); color: var(--mct-text-1); }
.mct-suggest-ico { color: var(--mct-text-3); font-size: 15px; flex-shrink: 0; }
.mct-suggest-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mct-suggest-name b { color: var(--mct-accent); font-weight: 800; }
.mct-suggest-game { flex-shrink: 0; font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--mct-text-3); border: 1px solid var(--mct-card-border); border-radius: var(--r-pill, 999px); padding: 2px 8px; }
.mct-suggest-empty { padding: 14px; font-size: var(--fs-sm); color: var(--mct-text-3); text-align: center; }

/* Shared toast — primary feedback for plan-gate rejections. */
#mct-toast-host { position:fixed; right:16px; bottom:16px; z-index:var(--z-toast, 400); display:flex; flex-direction:column; gap:10px; max-width:min(380px, calc(100vw - 32px)); }
.mct-toast { display:flex; gap:10px; align-items:flex-start; background:var(--mct-card); border:1px solid var(--mct-card-border); border-left:3px solid var(--mct-accent); border-radius:var(--r-md); padding:12px 12px 12px 14px; box-shadow:var(--sh-card); animation:mct-toast-in .22s ease; }
.mct-toast--gated { border-left-color:#f59e0b; }
.mct-toast--gated .mct-toast-icon { color:#f59e0b; }
.mct-toast--out { opacity:0; transform:translateY(6px); transition:opacity .22s ease, transform .22s ease; }
.mct-toast-icon { color:var(--mct-accent); font-size:18px; margin-top:1px; flex-shrink:0; }
.mct-toast-body { display:flex; flex-direction:column; gap:3px; min-width:0; }
.mct-toast-title { font-size:var(--fs-sm); font-weight:800; color:var(--mct-text-1); }
.mct-toast-msg { font-size:var(--fs-sm); color:var(--mct-text-2); line-height:1.45; }
.mct-toast-cta { font-size:var(--fs-sm); font-weight:700; color:var(--mct-accent); text-decoration:none; margin-top:2px; }
.mct-toast-cta:hover { text-decoration:underline; }
.mct-toast-close { appearance:none; border:0; background:none; color:var(--mct-text-3); cursor:pointer; padding:2px; margin-left:auto; flex-shrink:0; font-size:14px; }
.mct-toast-close:hover { color:var(--mct-text-1); }
@keyframes mct-toast-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* ════════════════════════════════════════════════════════════════
   Roadmap v2.0 Section 7 — Design & UX compliance
   Accessibility (Design Standard §25/§26) + unified search focus (§18).
   Appended last on purpose: these rules must win over the earlier
   `:focus { outline:none }` declarations on inputs/selects.
   ════════════════════════════════════════════════════════════════ */

/* §25 — a system-wide keyboard focus ring for every interactive element.
   Uses :focus-visible so a pointer click never draws the ring, but
   keyboard / assistive-tech focus always does. The outline follows each
   element's own border-radius in modern engines, so no shape override. */
.mct-shell a:focus-visible,
.mct-shell button:focus-visible,
.mct-shell input:focus-visible,
.mct-shell select:focus-visible,
.mct-shell textarea:focus-visible,
.mct-shell summary:focus-visible,
.mct-shell [tabindex]:focus-visible {
  outline: 2px solid var(--mct-accent);
  outline-offset: 2px;
}

/* §26 — honor prefers-reduced-motion globally: neutralize non-essential
   animation/transition while keeping instant (0-duration) state changes.
   The one bespoke pulse-track rule above is redundant but harmless. */
@media (prefers-reduced-motion: reduce) {
  .mct-shell *,
  .mct-shell *::before,
  .mct-shell *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* §18 (M5) — one focus language across every search context. The hub /
   toolbar search inputs adopt the accent border + subtle accent glow the
   hero search bar (.mct-search-bar:focus-within) already uses, so search
   looks and behaves like one system regardless of mount context. Full
   consolidation onto a single .mct-search class is a render-risky
   migration staged for Section 7.2. */
.mct-shell .hub-search-input:focus,
.mct-shell .mct-search-input:focus,
.mct-shell .mct-select-input:focus {
  border-color: rgba(59,130,246,.5);
  box-shadow: 0 0 0 3px rgba(59,130,246,.08);
}