/* ═══════════════════════════════════════════════════════
   Beetle Terminal — Apple-inspired long-scroll redesign
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700&display=swap');

:root {
  /* Typography */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* Text */
  --text:        #1d1d1f;
  --text-sec:    #6e6e73;
  --text-ter:    #aeaeb2;

  /* Backgrounds — progressive grey as page scrolls */
  --bg-hero:     #ffffff;
  --bg-section1: #ffffff;
  --bg-section2: #ffffff;
  --bg-section3: #f0f0f2;
  --bg-section4: #ebebed;
  --bg-footer:   #e8e8ea;

  /* Card */
  --card-bg:     #ffffff;
  --card-border: rgba(0,0,0,0.08);
  --card-shadow: 0 2px 20px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
  --card-radius: 20px;

  /* Accent */
  --blue:        #0071e3;
  --blue-dark:   #0058b0;
  --green:       #34c759;
  --red:         #ff3b30;

  /* Layout */
  --content-w:   900px;
  --header-h:    52px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg-hero);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ══════════════════════════════════════════
   HEADER — sticky, frosted, Apple-style
══════════════════════════════════════════ */
.topHeader {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(255,255,255,0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.10);
}

.topHeaderInner {
  max-width: var(--content-w);
  margin: 0 auto;
  height: 100%;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 20px;
}

.brandRow {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.brandLogo {
  width: 110px;
  height: auto;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.crumbs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 16px;
  border-left: 1px solid rgba(0,0,0,0.12);
}

.crumbLine {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.1px;
}

.crumbBack {
  font-size: 11px;
  color: var(--text-sec);
  text-decoration: none;
  transition: color .15s;
}
.crumbBack:hover { color: var(--blue); }

/* Header action buttons (right side) */
.headerActions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.headerBtn {
  height: 32px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 980px;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font);
  letter-spacing: -0.1px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.headerBtn:hover {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.20);
}
.headerBtn--active {
  background: var(--text);
  color: #fff;
  border-color: var(--text);
}
.headerBtn--active:hover {
  background: #3a3a3c;
}

.normBadge {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.70);
  letter-spacing: 0.04em;
}

.headerDividerSep {
  display: none;
}

/* Legacy .headerDivider — now hidden, actions moved inline */
.headerDivider { display: none; }

/* ══════════════════════════════════════════
   SEARCH BAR — full-width centered hero search
══════════════════════════════════════════ */
.heroSearch {
  background: var(--bg-section1);
  padding: 48px 24px 40px;
  text-align: center;
}

.heroSearchLabel {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.5px;
  color: var(--text);
  margin-bottom: 20px;
}

.heroSearchBar {
  position: relative;
  max-width: 560px;
  margin: 0 auto;

  /* Glass pill — matches index.html searchBar */
  height: 50px;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(28px) saturate(1.08);
  -webkit-backdrop-filter: blur(28px) saturate(1.08);
  border: 1px solid rgba(255,255,255,0.60);
  border-radius: 25px;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.88),
    inset 0 -1px 1px rgba(0,0,0,0.055),
    0 0 0 1px rgba(255,255,255,0.25),
    0 1px 3px rgba(0,0,0,0.045);
  display: flex;
  align-items: center;
  padding: 0 18px 0 16px;
  gap: 10px;
  transition: background .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* Rainbow gradient border ring */
.heroSearchBar::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 27px;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(104, 209,  93, 0.55),
    rgba(255, 195,  74, 0.55),
    rgba(255, 122,  74, 0.55),
    rgba(214,  84, 140, 0.55),
    rgba( 77, 124, 255, 0.55)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
  filter: blur(0.25px);
  opacity: 0.55;
}

.heroSearchBar:focus-within {
  background: rgba(255,255,255,0.96);
  border-color: rgba(255,255,255,0.74);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.92),
    inset 0 -1px 1px rgba(0,0,0,0.065),
    0 0 0 1px rgba(255,255,255,0.96),
    0 1px 4px rgba(0,0,0,0.06);
}

.heroSearchBar:focus-within::before {
  opacity: 0.85;
}

/* SVG magnifying glass — grey, flex child, always left-pinned */
.heroSearchIcon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: rgba(0,0,0,0.40);
  pointer-events: none;
  padding-left: 4px;
}

#artistSearch {
  flex: 1;
  height: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 15px;
  font-family: var(--font);
  color: var(--text);
  outline: none;
}
#artistSearch::placeholder { color: rgba(0,0,0,0.35); }

#artistSug {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  overflow: hidden;
  z-index: 200;
  text-align: left;
}

.sugRow {
  padding: 12px 18px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  align-items: baseline;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  transition: background .12s;
}
.sugRow:last-child { border-bottom: none; }
.sugRow:hover { background: #f5f5f7; }
.sugTicker { color: var(--text); font-weight: 600; }
.sugName   { color: var(--text-sec); font-weight: 400; }
.sugId     { margin-left: auto; color: var(--text-ter); font-size: 11px; }

/* ══════════════════════════════════════════
   MAIN SCROLL SHELL — no more 3-col grid
══════════════════════════════════════════ */
.shell {
  display: flex;
  flex-direction: column;
}

/* Legacy grid3 — now unused visually, kept for JS compatibility */
.grid3 {
  display: contents;
}
.side, .right {
  display: none; /* sidebar content migrated inline */
}

/* ══════════════════════════════════════════
   SECTION WRAPPER — each scroll section
══════════════════════════════════════════ */
.scrollSection {
  padding: 48px 24px;
}
.scrollSection--white { padding-top: 32px; }
.scrollSection--white  { background: var(--bg-section1); }
.scrollSection--light  { background: var(--bg-section2); }
.scrollSection--mid    { background: var(--bg-section2); }
.scrollSection--dark   { background: var(--bg-section2); }

.sectionInner {
  max-width: var(--content-w);
  margin: 0 auto;
}

/* Section label (e.g. "Price History") */
.sectionEyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-ter);
  margin-bottom: 10px;
}

/* Section heading */
.sectionHeading {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.05;
  margin-bottom: 10px;
}

.sectionHeading .dateString {
  font-weight: 400;
}

.sectionHeading2 {
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.05;
  margin-bottom: 10px;
}

.sectionSub {
  font-size: 14px;
  color: var(--text-sec);
  margin-bottom: 20px;
  line-height: 1.5;
}

/* ══════════════════════════════════════════
   ARTIST HERO — top of page after search
══════════════════════════════════════════ */
.artistHero {
  background: var(--bg-section1);
  padding: 40px 24px 32px;
}

.artistHeroInner {
  max-width: var(--content-w);
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}

.artistHeroLeft {}

.artistHeroLabel {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-ter);
  margin-bottom: 10px;
}

#artistName {
  font-size: 52px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.05;
  margin-bottom: 10px;
}

#artistSub {
  font-size: 14px;
  color: var(--text);
  letter-spacing: -0.1px;
}

.viewCount {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}

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

.artistHeroPriceLabel {
  font-size: 12px;
  color: var(--text-ter);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

#marketValue {
  font-size: 52px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.05;
}

.artistHeroMeta {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text);
}

/* ══════════════════════════════════════════
   CARD — shared card style
══════════════════════════════════════════ */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

/* ══════════════════════════════════════════
   CHART SECTION
══════════════════════════════════════════ */
.chartCard {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.chartCardHeader {
  padding: 0 0 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: none;
}

.chartCardTitle {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--text);
}

.chartCardMeta {
  font-size: 12px;
  color: var(--text-ter);
  margin-top: 2px;
}

.marketPills {
  display: flex;
  gap: 6px;
  align-items: center;
}

.mPill {
  height: 30px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  line-height: 1;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  color: rgba(0,0,0,0.48);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.mPill:hover {
  background: rgba(0,0,0,0.04);
  color: rgba(0,0,0,0.72);
}
.mPill.active {
  background: #0071e3;
  color: #fff;
  border-color: #0071e3;
}
.mPill.active:hover {
  background: #0077ed;
  border-color: #0077ed;
  box-shadow: 0 2px 10px rgba(0, 113, 227, 0.25);
}

.mPillDivider {
  width: 1px;
  height: 16px;
  align-self: center;
  background: rgba(0,0,0,0.12);
  margin: 0 2px;
}

.mPillEst {
  border: 1px dashed rgba(0,0,0,0.22);
}
.mPillEst.active {
  background: rgba(0,0,0,0.06);
  color: rgba(0,0,0,0.72);
  border: 1px dashed rgba(0,0,0,0.40);
}

/* ── Graph mode pills (Net / Sold / Unsold) ── */
.mPillMode {
  padding: 0 16px;
}
.mPillMode[data-gmode="sold"].active {
  background: #22c55e;
  color: #fff;
  border-color: #22c55e;
}
.mPillMode[data-gmode="sold"].active:hover {
  background: #16a34a;
  border-color: #16a34a;
  box-shadow: 0 2px 10px rgba(34, 197, 94, 0.3);
}
.mPillMode[data-gmode="unsold"].active {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}
.mPillMode[data-gmode="unsold"].active:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  box-shadow: 0 2px 10px rgba(220, 38, 38, 0.3);
}

.marketCanvasWrap {
  padding: 0;
}

#marketChart {
  width: 100%;
  height: 320px;
  display: block;
  background: transparent;
}

.marketHint {
  padding: 0 28px 20px;
  font-size: 11px;
  color: var(--text-ter);
  line-height: 1.5;
}

/* ══════════════════════════════════════════
   STATS ROW — open/high/low/volume strip
══════════════════════════════════════════ */
.statsStrip {
  display: flex;
  gap: 40px;
  margin-top: 24px;
  padding: 20px 0 4px 0;
  border-top: 1px solid rgba(0,0,0,0.07);
  flex-wrap: wrap;
}

.statCell {
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.statLabel {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-ter);
}

.statValue {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.5px;
  color: var(--text);
  line-height: 1.1;
}

.statSub {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-sec);
}

/* ══════════════════════════════════════════
   PRICE LOOKUP
══════════════════════════════════════════ */
.priceLookupSection {
  background: #f5f5f7;
  padding: 48px 24px;
}

.priceLookup {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.priceLookupHeader {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.priceLookupHeading {
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
  white-space: nowrap;
  line-height: 1.05;
}

.priceLookupControls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.priceLookupSelect {
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  border: 1.5px solid rgba(0,0,0,0.14);
  border-radius: 10px;
  padding: 11px 36px 11px 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  min-width: 140px;
  transition: border-color 0.15s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.priceLookupSelect:focus {
  outline: none;
  border-color: #22c55e;
}

.priceLookupBtn {
  background: var(--text, #111);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 11px 24px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.priceLookupBtn:hover { opacity: 0.8; }

/* Two-row grid of stats, no gap background */
.priceLookupResults {
  display: none;
  flex-wrap: wrap;
  row-gap: 28px;
  column-gap: 0;
}
.priceLookupResults.visible {
  display: flex;
}

.priceLookupResults .statCell {
  min-width: 200px;
  padding-right: 48px;
  flex: 0 0 auto;
}

.priceLookupResults .statLabel {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-ter);
  margin-bottom: 6px;
}

.priceLookupResults .statValue {
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.05;
}

.priceLookupEmpty {
  display: none;
  font-size: 14px;
  color: var(--text-sec);
}
.priceLookupEmpty.visible { display: block; }

/* ══════════════════════════════════════════
   TABLE SECTION
══════════════════════════════════════════ */
.tableCard { /* extends .card */ }

.tabsRow {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  background: transparent;
}

.tab {
  height: 36px;
  padding: 0 4px;
  margin: 0 10px 0 0;
  border-radius: 0;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-size: 13px;
  font-weight: 400;
  font-family: var(--font);
  color: var(--text-sec);
  cursor: pointer;
  transition: color .15s, border-color .15s;
  position: relative;
  top: 1px;
}
.tab:hover {
  color: var(--text);
  background: transparent;
}
.tab.active {
  color: var(--text);
  font-weight: 500;
  border-bottom-color: var(--text);
  background: transparent;
}

.tabsSpacer { margin-left: auto; }

/* Lot search */
.lotSearchWrap {
  position: relative;
  display: flex;
  align-items: center;
}
.lotSearchIcon {
  position: absolute;
  left: 10px;
  font-size: 13px;
  color: var(--text-ter);
  pointer-events: none;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
}
.lotSearchInput {
  height: 32px;
  width: 180px;
  border-radius: 980px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #f5f5f7;
  padding: 0 28px 0 28px;
  font-size: 12px;
  font-family: var(--font);
  color: var(--text);
  outline: none;
  transition: border-color .15s, box-shadow .15s, width .2s;
}
.lotSearchInput:focus {
  border-color: rgba(0,0,0,0.24);
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  width: 220px;
}
.lotSearchInput::placeholder { color: var(--text-ter); }
.lotSearchClear {
  position: absolute;
  right: 8px;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.15);
  color: rgba(0,0,0,0.55);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.miniBtn {
  height: 32px;
  padding: 0 14px;
  border-radius: 980px;
  border: 1px solid rgba(0,0,0,0.12);
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font);
  color: var(--text-sec);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.miniBtn:hover {
  background: rgba(0,0,0,0.05);
  color: var(--text);
}

/* Lots table */
.tableWrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.lotsTable {
  width: 100%;
  min-width: 680px;
  border-collapse: separate;
  border-spacing: 0;
}

.lotsTable th {
  padding: 10px 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-ter);
  background: #f5f5f7;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  position: sticky;
  top: 0;
  z-index: 5;
  white-space: nowrap;
}

.lotsTable td {
  padding: 14px 20px;
  font-size: 13.5px;
  color: var(--text);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  line-height: 1.4;
}

.lotsTable tr:last-child td { border-bottom: none; }
.lotsTable tr:hover td { background: rgba(0,0,0,0.015); }
.lotRow { cursor: pointer; }
.tdTitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 340px; }
.rightNum { text-align: right; font-variant-numeric: tabular-nums; }

/* Expand row */
.expandRow td { background: #fafafa; border-bottom: 1px solid rgba(0,0,0,0.05); }
.expandCell { padding: 16px 20px !important; }
.expandGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px 20px;
  font-size: 13px;
  color: var(--text-sec);
  margin-bottom: 12px;
}
.expandGrid div strong {
  color: var(--text-ter);
  font-weight: 500;
  margin-right: 4px;
}
.expandActions {
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,0.06);
  margin-top: 6px;
}

/* Pagination */
/* ── Google-style pagination ── */
.googlePager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 24px 0 16px;
  flex-wrap: wrap;
}
.gpBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 6px;
  border-radius: 50%;
  border: none;
  background: transparent;
  font-family: arial, sans-serif;
  font-size: 13px;
  color: #0071e3;
  cursor: pointer;
  transition: background .12s;
  text-decoration: none;
  font-weight: 400;
}
.gpBtn:hover:not(.gpNum--active):not(.gpArrow--disabled) {
  background: rgba(26, 13, 171, 0.07);
}
.gpNum--active {
  background: #0071e3;
  color: #fff !important;
  font-weight: 700;
  border-radius: 50%;
  cursor: default;
}
.gpArrow {
  font-size: 20px;
  color: #0071e3;
  font-weight: 400;
  padding: 0 10px;
  border-radius: 4px;
  min-width: 44px;
}
.gpArrow--disabled {
  color: rgba(0,0,0,0.18) !important;
  cursor: default;
  pointer-events: none;
}
.gpNumbers {
  display: flex;
  align-items: center;
  gap: 2px;
}
.pageMeta {
  margin-left: 16px;
  font-size: 12px;
  color: var(--text-ter);
  white-space: nowrap;
}

/* dark mode overrides for pagination */
[data-theme="dark"] .gpBtn { color: #2997ff; }
[data-theme="dark"] .gpNum--active { background: #2997ff; color: #202124 !important; }
[data-theme="dark"] .gpArrow { color: #2997ff; }
[data-theme="dark"] .gpBtn:hover:not(.gpNum--active):not(.gpArrow--disabled) { background: rgba(41,151,255,0.1); }

/* ══════════════════════════════════════════
   FILTER BROWSER — two-panel overlay
══════════════════════════════════════════ */
.fbOverlay {
  background: linear-gradient(160deg, #fafafa 0%, #f2f2f4 100%);
  border-radius: 16px;
  margin-bottom: 8px;
  animation: fbSlideIn .22s cubic-bezier(.16,1,.3,1);
  max-height: 55vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@keyframes fbSlideIn {
  from { opacity: 0; max-height: 0; }
  to   { opacity: 1; max-height: 55vh; }
}
.fbOverlay--hiding {
  animation: fbSlideOut .25s cubic-bezier(.4,0,1,1) forwards;
}
@keyframes fbSlideOut {
  from { opacity: 1; max-height: 55vh; transform: translateY(0); }
  to   { opacity: 0; max-height: 0; transform: translateY(-12px); }
}
[data-theme="dark"] .fbOverlay {
  background: linear-gradient(160deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%);
}

/* ── Panel: left nav + right content ── */
.fbPanel {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Left nav ── */
.fbNavWrap {
  display: contents; /* On desktop, wrapper is invisible — nav renders as direct child */
}
.fbNavArrow { display: none; } /* Hidden on desktop */
.fbNav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 0 16px 0;
  min-width: 140px;
  max-width: 160px;
  border-right: 1px solid rgba(0,0,0,0.04);
  overflow-y: auto;
  flex-shrink: 0;
}
[data-theme="dark"] .fbNav { border-right-color: rgba(255,255,255,0.06); }
.fbNavItem {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text-sec, #666);
  background: none;
  border: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: all .12s;
  text-align: left;
  white-space: nowrap;
  letter-spacing: .2px;
}
.fbNavItem:hover { color: var(--text-pri, #111); background: rgba(0,0,0,0.025); }
.fbNavItem.active {
  color: var(--text-pri, #111);
  font-weight: 500;
  border-left-color: #0071e3;
  background: rgba(0,113,227,0.03);
}
.fbNavItem.fb-has-active::after {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #0071e3;
  margin-left: auto;
  flex-shrink: 0;
}
[data-theme="dark"] .fbNavItem { color: rgba(255,255,255,0.5); }
[data-theme="dark"] .fbNavItem:hover { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.04); }
[data-theme="dark"] .fbNavItem.active {
  color: #e8eaed;
  border-left-color: #2997ff;
  background: rgba(41,151,255,0.06);
}
[data-theme="dark"] .fbNavItem.fb-has-active::after { background: #2997ff; }

/* ── Right content ── */
.fbContent {
  flex: 1;
  padding: 16px 20px;
  overflow-y: auto;
  min-height: 0;
}
.fbSectionTitle {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-ter, #999);
  margin: 0 0 14px 0;
}
[data-theme="dark"] .fbSectionTitle { color: rgba(255,255,255,0.35); }

/* ── Card grid ── */
/* ── Card row: single horizontal line with scroll arrows ── */
.fbCardRow {
  position: relative;
}
.fbCardScroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 6px 6px;
  margin: -6px -6px;
}
.fbCardScroll::-webkit-scrollbar { display: none; }
.fbCardArrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.85);
  box-shadow: 0 1px 6px rgba(0,0,0,0.12);
  font-size: 14px;
  font-weight: 400;
  color: var(--text-sec, #555);
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .15s, background .12s;
  line-height: 1;
  padding: 0;
}
.fbCardArrow:hover { background: #fff; }
.fbCardArrow--left { left: -4px; }
.fbCardArrow--right { right: -4px; }
.fbCardArrow--hidden { opacity: 0; pointer-events: none; }
[data-theme="dark"] .fbCardArrow { background: rgba(50,50,50,0.85); color: rgba(255,255,255,0.7); box-shadow: 0 1px 6px rgba(0,0,0,0.3); }
[data-theme="dark"] .fbCardArrow:hover { background: rgba(70,70,70,0.95); }
.fbCard {
  position: relative;
  border-radius: 14px;
  padding: 18px 14px;
  min-height: 72px;
  min-width: 120px;
  max-width: 160px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s ease, opacity .15s;
  overflow: hidden;
  border: none;
  text-align: left;
  font-family: var(--font);
}
.fbCard:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
.fbCard:active { transform: scale(0.98); }
.fbCardLabel {
  position: relative;
  z-index: 1;
  font-size: 12.5px;
  font-weight: 400;
  color: #fff;
  line-height: 1.35;
  word-break: break-word;
  letter-spacing: .15px;
}
.fbCardCount {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 1;
  font-size: 18px;
  font-weight: 300;
  color: rgba(255,255,255,0.7);
  letter-spacing: -.5px;
  line-height: 1;
}
.fbCard--active {
  box-shadow: 0 0 0 2.5px #fff, 0 0 0 4.5px #0071e3, 0 4px 16px rgba(0,113,227,0.25);
}
[data-theme="dark"] .fbCard--active {
  box-shadow: 0 0 0 2.5px rgba(30,30,30,0.9), 0 0 0 4.5px #2997ff, 0 4px 16px rgba(41,151,255,0.3);
}
.fbCard--active .fbCardLabel { font-weight: 500; }
.fbCard--active .fbCardCount { color: rgba(255,255,255,0.9); }
/* Cycle indicator check */
.fbCard--active::after {
  content: "✓";
  position: absolute;
  top: 10px; left: 12px;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.85);
  z-index: 2;
}
/* Three-state attribution/house cards */
.fbCard--show {
  box-shadow: 0 0 0 2.5px #fff, 0 0 0 4.5px #0071e3, 0 4px 16px rgba(0,113,227,0.25);
}
.fbCard--show::after { content: "Show"; position: absolute; top: 10px; left: 12px; font-size: 9px; font-weight: 400; color: rgba(255,255,255,0.85); z-index: 2; letter-spacing: .5px; text-transform: uppercase; background: rgba(255,255,255,0.15); padding: 2px 6px; border-radius: 4px; }
.fbCard--hide {
  box-shadow: 0 0 0 2.5px #fff, 0 0 0 4.5px #c53030, 0 4px 16px rgba(197,48,48,0.25);
  opacity: 0.7;
}
.fbCard--hide::after { content: "Hide"; position: absolute; top: 10px; left: 12px; font-size: 9px; font-weight: 400; color: rgba(255,255,255,0.85); z-index: 2; letter-spacing: .5px; text-transform: uppercase; background: rgba(197,48,48,0.35); padding: 2px 6px; border-radius: 4px; }
[data-theme="dark"] .fbCard--show { box-shadow: 0 0 0 2.5px rgba(30,30,30,0.9), 0 0 0 4.5px #2997ff, 0 4px 16px rgba(41,151,255,0.3); }
[data-theme="dark"] .fbCard--hide { box-shadow: 0 0 0 2.5px rgba(30,30,30,0.9), 0 0 0 4.5px #f87171, 0 4px 16px rgba(248,113,113,0.3); }

/* Gradient palette — muted, restrained tones */
.fbCard[data-grad="0"]  { background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%); }
.fbCard[data-grad="1"]  { background: linear-gradient(135deg, #5a6478 0%, #3d4556 100%); }
.fbCard[data-grad="2"]  { background: linear-gradient(135deg, #64748b 0%, #475569 100%); }
.fbCard[data-grad="3"]  { background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%); }
.fbCard[data-grad="4"]  { background: linear-gradient(135deg, #57606f 0%, #3b4252 100%); }
.fbCard[data-grad="5"]  { background: linear-gradient(135deg, #4c5c68 0%, #333f4a 100%); }
.fbCard[data-grad="6"]  { background: linear-gradient(135deg, #5b6b78 0%, #404e5c 100%); }
.fbCard[data-grad="7"]  { background: linear-gradient(135deg, #546270 0%, #374350 100%); }
.fbCard[data-grad="8"]  { background: linear-gradient(135deg, #626d7a 0%, #454f5c 100%); }
.fbCard[data-grad="9"]  { background: linear-gradient(135deg, #586575 0%, #3a4857 100%); }
.fbCard[data-grad="10"] { background: linear-gradient(135deg, #4e5a69 0%, #343e4c 100%); }
.fbCard[data-grad="11"] { background: linear-gradient(135deg, #5f6c7b 0%, #434f5e 100%); }
.fbCard[data-grad="12"] { background: linear-gradient(135deg, #515e6e 0%, #394551 100%); }
.fbCard[data-grad="13"] { background: linear-gradient(135deg, #687585 0%, #4c5968 100%); }
.fbCard[data-grad="14"] { background: linear-gradient(135deg, #5d6a79 0%, #414d5b 100%); }
.fbCard[data-grad="15"] { background: linear-gradient(135deg, #556370 0%, #3c4a56 100%); }
/* Neutral "Any / All" card — slightly darker */
.fbCard[data-grad="neutral"] { background: linear-gradient(135deg, #1f2937 0%, #111827 100%); }
[data-theme="dark"] .fbCard[data-grad="0"]  { background: linear-gradient(135deg, #374151 0%, #1f2937 100%); }
[data-theme="dark"] .fbCard[data-grad="1"]  { background: linear-gradient(135deg, #3d4556 0%, #252d3a 100%); }
[data-theme="dark"] .fbCard[data-grad="2"]  { background: linear-gradient(135deg, #475569 0%, #2d3748 100%); }
[data-theme="dark"] .fbCard[data-grad="3"]  { background: linear-gradient(135deg, #4b5563 0%, #2e3640 100%); }
[data-theme="dark"] .fbCard[data-grad="4"]  { background: linear-gradient(135deg, #3b4252 0%, #232a34 100%); }
[data-theme="dark"] .fbCard[data-grad="5"]  { background: linear-gradient(135deg, #3a4a56 0%, #242e38 100%); }
[data-theme="dark"] .fbCard[data-grad="6"]  { background: linear-gradient(135deg, #404e5c 0%, #283440 100%); }
[data-theme="dark"] .fbCard[data-grad="7"]  { background: linear-gradient(135deg, #374350 0%, #222c36 100%); }
[data-theme="dark"] .fbCard[data-grad="8"]  { background: linear-gradient(135deg, #454f5c 0%, #2b3540 100%); }
[data-theme="dark"] .fbCard[data-grad="9"]  { background: linear-gradient(135deg, #3a4857 0%, #242f3a 100%); }
[data-theme="dark"] .fbCard[data-grad="10"] { background: linear-gradient(135deg, #343e4c 0%, #1e2730 100%); }
[data-theme="dark"] .fbCard[data-grad="11"] { background: linear-gradient(135deg, #434f5e 0%, #2a3644 100%); }
[data-theme="dark"] .fbCard[data-grad="12"] { background: linear-gradient(135deg, #394551 0%, #232d36 100%); }
[data-theme="dark"] .fbCard[data-grad="13"] { background: linear-gradient(135deg, #4c5968 0%, #303c4a 100%); }
[data-theme="dark"] .fbCard[data-grad="14"] { background: linear-gradient(135deg, #414d5b 0%, #293440 100%); }
[data-theme="dark"] .fbCard[data-grad="15"] { background: linear-gradient(135deg, #3c4a56 0%, #26323c 100%); }
[data-theme="dark"] .fbCard[data-grad="neutral"] { background: linear-gradient(135deg, #111827 0%, #0a0f18 100%); }

/* ── Price range custom inputs inside fbContent ── */
.fbPriceInputRow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.fbPriceInputWrap {
  display: flex;
  align-items: center;
  border: 1.5px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  height: 36px;
  padding: 0 10px;
  gap: 4px;
  flex: 1;
  max-width: 140px;
}
.fbPricePrefix { font-size: 13px; color: var(--text-ter); font-weight: 500; }
.fbPriceInput {
  border: none; outline: none; background: transparent;
  width: 100%; font-size: 13px; color: var(--text-pri);
  font-family: var(--font);
  -moz-appearance: textfield;
}
.fbPriceInput::-webkit-outer-spin-button,
.fbPriceInput::-webkit-inner-spin-button { -webkit-appearance: none; }
.fbPriceDash { font-size: 14px; color: var(--text-ter); }
[data-theme="dark"] .fbPriceInputWrap { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); }
[data-theme="dark"] .fbPriceInput { color: rgba(255,255,255,0.85); }

/* ── Apple-style toggle list (mediums, attributions, houses) ── */
.fbList {
  background: linear-gradient(160deg, #eeeef0 0%, #e8e8ea 100%);
  border-radius: 14px;
  max-height: 260px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0;
}
[data-theme="dark"] .fbList {
  background: linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 100%);
}
.fbListItem {
  display: flex;
  align-items: center;
  padding: 10px 16px 10px 12px;
  cursor: pointer;
  transition: background .1s;
  gap: 10px;
  font-family: var(--font);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.fbListItem:hover { background: rgba(0,0,0,0.03); }
[data-theme="dark"] .fbListItem:hover { background: rgba(255,255,255,0.04); }
.fbListCheck {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .12s;
  font-size: 11px;
  color: transparent;
  background: transparent;
}
.fbListItem--active .fbListCheck {
  border-color: #0071e3;
  background: #0071e3;
  color: #fff;
}
.fbListItem--show .fbListCheck {
  border-color: #0071e3;
  background: #0071e3;
  color: #fff;
}
.fbListItem--hide .fbListCheck {
  border-color: #c53030;
  background: #c53030;
  color: #fff;
}
[data-theme="dark"] .fbListCheck { border-color: rgba(255,255,255,0.18); }
[data-theme="dark"] .fbListItem--active .fbListCheck { border-color: #2997ff; background: #2997ff; color: #202124; }
[data-theme="dark"] .fbListItem--show .fbListCheck { border-color: #2997ff; background: #2997ff; color: #202124; }
[data-theme="dark"] .fbListItem--hide .fbListCheck { border-color: #f87171; background: #f87171; color: #202124; }
.fbListLabel {
  flex: 1;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-pri, #1d1d1f);
  letter-spacing: .1px;
}
[data-theme="dark"] .fbListLabel { color: rgba(255,255,255,0.85); }
.fbListCount {
  font-size: 12px;
  font-weight: 300;
  color: var(--text-ter, #999);
  letter-spacing: -.3px;
  flex-shrink: 0;
}
[data-theme="dark"] .fbListCount { color: rgba(255,255,255,0.35); }
.fbListTag {
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
.fbListItem--show .fbListTag { background: rgba(0,113,227,0.08); color: #0071e3; }
.fbListItem--hide .fbListTag { background: rgba(197,48,48,0.08); color: #c53030; }
[data-theme="dark"] .fbListItem--show .fbListTag { background: rgba(41,151,255,0.12); color: #2997ff; }
[data-theme="dark"] .fbListItem--hide .fbListTag { background: rgba(248,113,113,0.12); color: #f87171; }

/* ── Close bar ── */
.fbCloseBar {
  padding: 8px 0;
  text-align: center;
  border-top: 1px solid rgba(0,0,0,0.04);
  flex-shrink: 0;
}
[data-theme="dark"] .fbCloseBar { border-top-color: rgba(255,255,255,0.06); }
.fbCloseBtn {
  padding: 7px 28px;
  border-radius: 980px;
  border: 1px solid rgba(0,0,0,0.12);
  background: var(--bg, #fff);
  color: var(--text, #1d1d1f);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: all .15s;
}
.fbCloseBtn:hover { background: var(--text, #1d1d1f); color: #fff; border-color: var(--text); }
[data-theme="dark"] .fbCloseBtn { border-color: rgba(255,255,255,0.18); }
[data-theme="dark"] .fbCloseBtn:hover { background: #e8e8ed; color: #1d1d1f; }

/* ── Show filter trigger (appears after hide) ── */
.fbShowTrigger {
  text-align: center;
  margin: 0 0 6px;
  animation: fbFadeIn .2s ease;
}
@keyframes fbFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.fbShowBtn {
  padding: 7px 24px;
  border-radius: 980px;
  border: 1px solid rgba(0,0,0,0.1);
  background: transparent;
  color: var(--text-sec, #666);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: all .15s;
  letter-spacing: .2px;
}
.fbShowBtn:hover { background: var(--text, #1d1d1f); color: #fff; border-color: var(--text); }
[data-theme="dark"] .fbShowBtn { border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.5); }
[data-theme="dark"] .fbShowBtn:hover { background: #e8e8ed; color: #1d1d1f; }

/* ── Auction house "show all" link ── */
.fbShowAll {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-ter);
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .12s;
}
.fbShowAll:hover { color: var(--text-pri); }
[data-theme="dark"] .fbShowAll { color: rgba(255,255,255,0.4); }
[data-theme="dark"] .fbShowAll:hover { color: rgba(255,255,255,0.8); }


/* ── Sales search bar (hero, sits above tabs) ── */
.salesSearchBar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.lotSearchWrap--hero {
  flex: 1;
}
.lotSearchWrap--hero .lotSearchInput {
  width: 100%;
  height: 48px;
  border-radius: 12px;
  border: 1.5px solid rgba(0,0,0,0.13);
  background: #fff;
  font-size: 15px;
  padding: 0 44px 0 42px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  transition: border-color .15s, box-shadow .15s;
}
.lotSearchWrap--hero .lotSearchInput:focus {
  width: 100%;
  border-color: rgba(0,102,204,0.4);
  box-shadow: 0 2px 12px rgba(0,102,204,0.1);
  background: #fff;
}
.lotSearchWrap--hero .lotSearchIcon {
  left: 14px;
  font-size: 17px;
  color: rgba(0,0,0,0.35);
}
.lotSearchWrap--hero .lotSearchClear {
  right: 12px;
  width: 20px;
  height: 20px;
  font-size: 12px;
  background: rgba(0,0,0,0.18);
}

/* ── Sales tabs row (no card border) ── */
.salesTabsRow {
  border-bottom: 1px solid rgba(0,0,0,0.08);
  padding: 0 0 0 0;
  margin-bottom: 0;
  background: transparent;
}

/* ── View mode tabs (Google / Table) ── */
.viewTabGroup {
  display: flex;
  align-items: center;
  gap: 2px;
}
.viewTab {
  height: 30px;
  padding: 0 14px;
  border-radius: 980px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 12.5px;
  font-weight: 500;
  font-family: var(--font);
  color: var(--text-ter);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.viewTab:hover {
  background: rgba(0,0,0,0.04);
  color: var(--text-sec);
}
.viewTab.active {
  color: #0066cc;
  background: rgba(0,102,204,0.07);
  border-color: rgba(0,102,204,0.18);
}

/* ── View toggle (replaced by .viewTab) ── */

/* ── Search / Google-style list view ── */
.lotsSearchList {
  padding: 4px 0;
}

.lotSearchResult {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  cursor: default;
  transition: background .12s;
}
.lotSearchResult:last-child { border-bottom: none; }

.lsrLeft {
  flex: 1;
  min-width: 0;
}

.lsrBreadcrumb {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--text-ter);
  margin-bottom: 4px;
  letter-spacing: 0.01em;
}
.lsrBreadcrumb .lsrSep {
  opacity: 0.4;
  font-size: 10px;
}

.lsrTitle {
  font-size: 16px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 4px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lsrTitleLink {
  text-decoration: none;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 4px;
}
.lsrTitleLink .lsrTitle {
  color: #5b8db8;
  margin-bottom: 0;
  text-decoration: none;
}
.lsrTitleLink:hover .lsrTitle {
  color: #4a7aa3;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lsrMeta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 5px;
}
.lsrPrice {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.lsrPriceSep {
  font-size: 11px;
  color: rgba(0,0,0,0.2);
}
.lsrEst {
  font-size: 12px;
  color: var(--text-ter);
  font-variant-numeric: tabular-nums;
}
.lsrDate {
  font-size: 12px;
  color: var(--text-ter);
  margin-left: auto;
}

.lsrSnippet {
  font-size: 13px;
  color: var(--text-sec);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: none;
}
.lsrSnippet--expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.lsrMoreBtn {
  font-size: 11.5px;
  font-weight: 500;
  color: #0066cc;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font);
  text-decoration: none;
  transition: opacity .12s;
  line-height: 1.6;
}
.lsrMoreBtn:hover { opacity: 0.7; }

.lsrRight {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 6px;
  padding-top: 2px;
}

.lsrHousePill {
  font-size: 11px;
  font-weight: 500;
  color: #bdbdbd;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 3px 8px;
  white-space: nowrap;
}

.lsrActions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.lsrAiSearchBtn {
  font-size: 11.5px;
  font-weight: 500;
  color: #0066cc;
  background: rgba(0,102,204,0.07);
  border: 1px solid rgba(0,102,204,0.18);
  border-radius: 980px;
  padding: 4px 12px;
  cursor: pointer;
  font-family: var(--font);
  transition: background .12s, border-color .12s;
  text-decoration: none;
  display: inline-block;
  line-height: 1.6;
}
.lsrAiSearchBtn:hover {
  background: rgba(0,102,204,0.13);
  border-color: rgba(0,102,204,0.3);
}
.lsrGoogleBtn {
  font-size: 11.5px;
  font-weight: 500;
  color: #6c8cac;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(0,102,204,0.18);
  border-radius: 980px;
  padding: 4px 12px;
  cursor: pointer;
  font-family: var(--font);
  transition: background .12s, border-color .12s;
  text-decoration: none;
  display: inline-block;
  line-height: 1.6;
}
.lsrGoogleBtn:hover {
  background: rgba(0,102,204,0.13);
  border-color: rgba(0,102,204,0.3);
}
.lsrLotrankBtn {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-sec);
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 980px;
  padding: 4px 12px;
  cursor: pointer;
  font-family: var(--font);
  transition: background .12s;
}
.lsrLotrankBtn:hover { background: rgba(0,0,0,0.04); }
.lsrLotrankBtn:disabled { opacity: 0.5; cursor: wait; }

.lsrExpandPanel {
  background: #fafafa;
  border-top: 1px solid rgba(0,0,0,0.05);
  padding: 14px 24px 16px;
  display: none;
}
.lsrExpandPanel.open { display: block; }
.lsrExpandGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 6px 20px;
  font-size: 13px;
  color: var(--text-sec);
  margin-bottom: 12px;
}
.lsrExpandGrid div strong {
  color: var(--text-ter);
  font-weight: 500;
  margin-right: 4px;
}
.lsrLotrankResults { margin-top: 10px; }

/* House-by-house in search view */
.lsrHouseRow {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.lsrHouseRow:last-child { border-bottom: none; }
.lsrHouseRank {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-ter);
  width: 20px;
  text-align: right;
  flex-shrink: 0;
}
.lsrHouseName {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
.lsrHouseTop {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}


.keyTableWrap { overflow-x: auto; }
.keyTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.keyTable th, .keyTable td {
  padding: 12px 20px;
  font-size: 13px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  white-space: nowrap;
}
.keyTable th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-ter);
  background: #f5f5f7;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.keyTable tr:last-child td { border-bottom: none; }
.keyTable a { color: var(--blue); text-decoration: none; }
.keyTable a:hover { text-decoration: underline; }
.right { text-align: right; }

.keyFooter {
  padding: 16px 20px;
  display: flex;
  justify-content: center;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.viewBtn {
  height: 36px;
  padding: 0 20px;
  border-radius: 980px;
  border: 1px solid rgba(0,0,0,0.14);
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font);
  color: var(--text);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.viewBtn:hover {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.22);
}

/* ══════════════════════════════════════════
   KEY DATA / METADATA SECTION
══════════════════════════════════════════ */
.kvGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.kvCard {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

.k {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-ter);
  margin-bottom: 6px;
}

.v {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.3px;
}

/* .kv / .kvRow — typographic hierarchy, no cards */
.kv {
  display: flex;
  flex-direction: column;
  padding: 8px 28px 20px;
  gap: 0;
}

.kvRow {
  display: flex;
  flex-direction: column;
  padding: 18px 0;
  gap: 5px;
}
.kvRow .k {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(29,29,31,0.38);
  font-family: var(--font);
  margin-bottom: 0;
}

.kvRow .v {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.5px;
  color: rgba(29,29,31,0.88);
  font-family: var(--font);
  line-height: 1.1;
  margin-left: 0;
}

.kvRow--artist .v {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.8px;
  color: rgba(29,29,31,0.92);
}

.kvRow--ticker .v {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(29,29,31,0.45);
  text-transform: uppercase;
}

/* Total value row */
.kvRow--total .v {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.5px;
  color: rgba(29,29,31,0.88);
}

/* ══════════════════════════════════════════
   ANALYSIS SECTION — unified gradient card
   MacBook Air sky-blue clean gradient
══════════════════════════════════════════ */

/* Single full-width unified card — no grid split */
.analysisGrid {
  display: block;
}

/* ── The one card: sharp corners, gradient bg ── */
.analysisHeroCard {
  position: relative;
  overflow: hidden;
  background: transparent !important;
  border: 1px solid rgba(180,210,240,0.60) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Gradient — faithful to MacBook Air: cool sky at top-left, fades to near-white */
.analysisHeroBg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 0% 0%,   rgba(168,210,250,0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 0%, rgba(190,222,255,0.12) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 100%, rgba(230,242,255,0.40) 0%, transparent 55%),
    linear-gradient(175deg, #e8f4ff 0%, #f0f8ff 25%, #f6fbff 55%, #fafcff 80%, #ffffff 100%);  z-index: 0;
}

.analysisHeroBg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 5%, rgba(255,255,255,0.70) 0%, transparent 40%);
  z-index: 1;
}

.analysisHeroInner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  grid-template-rows: auto 1fr;
  min-height: 420px;
}

/* ── Header bar spans full width ── */
.analysisHeroHeader {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px 16px;
  border-bottom: none;
}

.subTitleLight {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.5px;
  color: rgba(0, 0, 0, 0.9);
}

/* ── Left column: donut + legend ── */
.analysisLeftCol {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  padding-bottom: 28px;
}

/* Donut canvas */
.pieWrapHero {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32px 28px 16px;
}

.pieWrapHero #pieChart {
  width: 100%;
  max-width: 280px;
  height: 280px;
  display: block;
}

/* ── Divider ── */
.analysisDivider {
  display: none;
}

/* ── Right column: key data ── */
.analysisRightCol {
  grid-column: 3;
  grid-row: 2;
  display: flex;
  flex-direction: column;
}

.analysisRightCol .subTitle {
  border-bottom: none;
  background: transparent;
  color: rgba(29,29,31,0.88);
}
.analysisRightCol .kv {
  flex: 1;
}

.analysisRightCol .keyFooter {
  border-top: none;
  background: transparent;
}
/* ── House legend ── */
.houseLegend {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 20px 8px;
}

.houseLegendRow {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 1px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.houseLegendRow:hover {
  background: rgba(255,255,255,0.55);
}

.houseDot {
  grid-row: 1 / 3;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
}

.houseLegendName {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.houseLegendPct {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-align: right;
  padding-left: 12px;
}

.houseLegendSub {
  grid-column: 2;
  font-size: 11px;
  color: var(--text-ter);
}
.legendToggleBtn {
  margin: 8px 12px 4px;
  padding: 6px 14px;
  border: 1px solid rgba(160,200,240,0.50);
  border-radius: 980px;
  background: rgba(255,255,255,0.50);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font);
  color: rgba(29,29,31,0.60);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.legendToggleBtn:hover {
  background: rgba(255,255,255,0.80);
  color: rgba(29,29,31,0.90);
}
/* ── Toggle pill ── */
.togglePill {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.togglePill input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0;
}

.toggleTrack {
  position: relative;
  display: block;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: rgba(0,0,0,0.15);
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.togglePill input:checked ~ .toggleTrack {
  background: rgba(29,29,31,0.80);
}

.toggleThumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.20);
  transition: transform 0.2s ease;
}

.togglePill input:checked ~ .toggleTrack .toggleThumb {
  transform: translateX(16px);
}

.toggleLbl {
  font-size: 12px;
  font-weight: 500;
  color: rgba(29,29,31,0.65);
  min-width: 72px;
}

/* ── Key data card suppressed (merged in) ── */
.analysisKeyCard {
  display: none;
}
/* ══════════════════════════════════════════
   COLUMNS PANEL (show/hide columns)
══════════════════════════════════════════ */
#columnsPanel {
  position: fixed;
  top: calc(var(--header-h) + 12px);
  right: 24px;
  width: 240px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  padding: 16px;
  z-index: 200;
}

.sidePanelTitle {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-ter);
  margin-bottom: 12px;
}

.columnsList { display: flex; flex-direction: column; gap: 8px; }
.colItem {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text);
}
.colItem input { accent-color: var(--blue); }

/* ══════════════════════════════════════════
   SECTION DIVIDERS
══════════════════════════════════════════ */
.sectionDivider {
  height: 1px;
  background: rgba(0,0,0,0.07);
  max-width: var(--content-w);
  margin: 0 auto;
}

/* ══════════════════════════════════════════
   SUBHEADING inside card
══════════════════════════════════════════ */
.subTitle {
  padding: 22px 28px 14px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--text);
  border-bottom: none;
}

/* ══════════════════════════════════════════
   LOTRANK
══════════════════════════════════════════ */
.lotrankBtn { font-weight: 600; letter-spacing: 0.01em; }
.lotrankBtn:disabled { opacity: 0.5; cursor: wait; }
.lotrankResults { margin-top: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lotrankHeader { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.lotrankLabel {
  font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--blue);
}
.lotrankMeta { font-size: 11px; color: var(--text-sec); }
.lotrankMeta em { font-style: italic; color: var(--text); }
.lotrankTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.lotrankTable thead th {
  padding: 5px 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-ter);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  white-space: nowrap;
  text-align: left;
}
.lotrankTable thead th.rightNum { text-align: right; }
.lotrankRow td {
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text);
  border-bottom: 1px solid rgba(0,0,0,0.04);
  white-space: nowrap;
  cursor: pointer;
}
.lotrankRow:hover td { background: rgba(0,0,0,0.02); }
.lotrankRow.lrExpanded td { background: rgba(0,0,0,0.02); color: var(--blue); }
.lotrankTitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 360px; }
.lotrankPrice { font-variant-numeric: tabular-nums; }
.lotrankDate { color: var(--text-sec); font-size: 11px; }
.lotrankHouse { color: var(--text-sec); font-size: 11px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }

/* Expand panel */
.lotrankExpandRow td { padding: 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
.lotrankExpandCell { padding: 10px 14px !important; background: #fafafa; }
.lotrankExpandGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px 16px;
  font-size: 12px;
  color: var(--text-sec);
}
.lotrankExpandGrid div { display: flex; flex-direction: column; gap: 1px; }
.lotrankExpandGrid strong {
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-ter);
}
.lotrankEmpty, .lotrankError { font-size: 12px; color: var(--text-sec); padding: 8px 0; }

/* ══════════════════════════════════════════
   SCROLLBARS
══════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.14);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.24); }
* { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.14) transparent; }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
/* ══════════════════════════════════════════
   MOBILE — 768px and below
══════════════════════════════════════════ */
@media (max-width: 768px) {
  :root {
    --content-w: 100%;
    --header-h: 48px;
  }

  /* ── Header ── */
  .topHeaderInner { padding: 0 12px; gap: 8px; }
  .brandLogo { width: 72px; }
  .crumbs { padding-left: 8px; gap: 1px; min-width: 0; }
  .crumbLine { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
  .crumbBack { font-size: 10px; }

  /* Hide text labels in header buttons, keep icons */
  .headerBtn span:nth-child(2) { display: none; }
  .headerBtn { padding: 0 10px; gap: 4px; min-width: 32px; height: 30px; justify-content: center; }
  .headerDividerSep { margin: 0; }
  .headerActions { gap: 4px; flex-shrink: 0; }

  /* ── Hero search ── */
  .heroSearch { padding: 32px 16px 28px; }
  .heroSearchLabel { font-size: 22px; margin-bottom: 14px; }
  .heroSearchBar { max-width: 100%; height: 46px; }

  /* ── Artist hero ── */
  .artistHero { padding: 28px 16px 24px; }
  .artistHeroInner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .artistHeroRight { text-align: left; }
  #artistName { font-size: 28px; }
  #marketValue { font-size: 32px; }
  #artistSub { font-size: 13px; }
  .artistDisclaimer { max-width: 100%; font-size: 11px; }
  .artistHeroPriceLabel { font-size: 11px; }
  .artistHeroMeta { font-size: 12px; }

  /* ── Sections ── */
  .scrollSection { padding: 32px 10px; }
  .scrollSection--white { padding-top: 24px; }
  .sectionHeading { font-size: 22px; }
  .sectionHeading2 { font-size: 28px; }
  .sectionEyebrow { font-size: 10px; margin-bottom: 8px; }
  .sectionSub { font-size: 13px; margin-bottom: 16px; }

  /* ── Chart section ── */
  .chartCardHeader { flex-direction: column; align-items: flex-start; gap: 12px; }
  .marketPills { width: 100%; justify-content: flex-start; }
  .marketCanvasWrap { min-height: 220px; }

  /* ── Price Lookup ── */
  .priceLookupSection { padding: 32px 16px; }
  .priceLookupHeader { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 24px; }
  .priceLookupHeading { font-size: 24px; white-space: normal; }
  .priceLookupResults .statCell { min-width: calc(50% - 12px); padding-right: 12px; }
  .priceLookupResults .statValue { font-size: 22px; }

  /* ── Sales section ── */
  .salesSearchBar { flex-direction: column; gap: 10px; }
  .lotSearchWrap--hero { width: 100%; }
  .lotSearchWrap--hero .lotSearchInput { height: 44px; font-size: 14px; }

  /* Tabs wrap on small screens */
  .tabsRow { flex-wrap: wrap; gap: 4px; padding: 12px 0; }
  .tabsSpacer { display: none; }
  .tab { font-size: 12px; height: 32px; padding: 0 10px; }
  .viewTabGroup { margin-left: auto; }

  /* Filter browser — stack on mobile */
  .fbOverlay { border-radius: 12px; max-height: 50vh; }
  .fbPanel { flex-direction: column; }
  .fbNavWrap {
    display: flex;
    align-items: center;
    position: relative;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
  }
  [data-theme="dark"] .fbNavWrap { border-bottom-color: rgba(255,255,255,0.06); }
  .fbNavArrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    font-size: 13px;
    color: var(--text-sec, #555);
    cursor: pointer;
    flex-shrink: 0;
    z-index: 2;
    padding: 0;
    line-height: 1;
    transition: opacity .15s;
  }
  .fbNavArrow--hidden { opacity: 0; pointer-events: none; }
  .fbNavArrow--left { margin-left: 4px; }
  .fbNavArrow--right { margin-right: 4px; }
  [data-theme="dark"] .fbNavArrow { background: rgba(50,50,50,0.8); color: rgba(255,255,255,0.6); }
  .fbNav {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    min-width: 0;
    max-width: none;
    border-right: none;
    border-bottom: none;
    padding: 6px 4px;
    gap: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex: 1;
  }
  .fbNav::-webkit-scrollbar { display: none; }
  [data-theme="dark"] .fbNav { border-bottom-color: rgba(255,255,255,0.06); }
  .fbNavItem {
    border-left: none;
    border-bottom: 2px solid transparent;
    padding: 5px 10px;
    font-size: 11px;
    flex-shrink: 0;
  }
  .fbNavItem.active { border-left-color: transparent; border-bottom-color: #0071e3; }
  [data-theme="dark"] .fbNavItem.active { border-bottom-color: #2997ff; }
  .fbContent { padding: 10px 12px; }
  .fbSectionTitle { font-size: 9px; margin-bottom: 10px; }
  .fbCardScroll { gap: 8px; }
  .fbCard { min-height: 56px; min-width: 90px; max-width: 120px; padding: 12px 10px; border-radius: 11px; }
  .fbCardLabel { font-size: 10.5px; }
  .fbCardCount { font-size: 14px; top: 8px; right: 8px; }
  .fbCard--active::after { top: 8px; left: 8px; font-size: 11px; }
  .fbCardArrow { width: 24px; height: 24px; font-size: 12px; }
  .fbListItem { padding: 8px 12px 8px 10px; gap: 8px; }
  .fbListCheck { width: 18px; height: 18px; font-size: 10px; }
  .fbListLabel { font-size: 12px; }
  .fbListCount { font-size: 11px; }
  .fbCloseBtn { font-size: 11px; padding: 6px 22px; }
  .fbShowBtn { font-size: 11px; padding: 6px 20px; }

  /* Lot search results */
  .lotSearchResult { gap: 10px; padding: 16px 0; }
  .lsrTitle { font-size: 14px; }
  .lsrPrice { font-size: 12px; }
  .lsrDate { font-size: 11px; }
  .lsrSnippet { font-size: 12px; }

  /* Google pager */
  .googlePager { flex-wrap: wrap; gap: 8px; justify-content: center; }

  /* ── Analysis / Market Insight ── */
  .analysisGrid { grid-template-columns: 1fr; }
  .analysisHeroInner {
    display: flex;
    flex-direction: column;
    min-height: auto;
  }
  .analysisHeroHeader {
    padding: 18px 16px 14px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .subTitleLight { font-size: 20px; }
  .analysisLeftCol {
    grid-column: auto;
    grid-row: auto;
    padding-bottom: 16px;
  }
  .analysisRightCol {
    grid-column: auto;
    grid-row: auto;
  }
  .analysisDivider { display: none; }
  .pieWrapHero { padding: 20px 16px 12px; }
  .pieWrapHero #pieChart { max-width: 220px; height: 220px; }

  .statsStrip { grid-template-columns: 1fr 1fr; }
}

/* ── Scroll-reveal (Apple-style float-up) — all screen sizes ── */
.scroll-reveal {
  opacity: 0;
  transform: translateY(40px);
  will-change: opacity, transform;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.scroll-reveal--d1 { transition-delay: 0.06s; }
.scroll-reveal--d2 { transition-delay: 0.14s; }
.scroll-reveal--d3 { transition-delay: 0.22s; }
.scroll-reveal--d4 { transition-delay: 0.30s; }
.scroll-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Legacy mobile class — keep working */
.mob-reveal {
  opacity: 0;
  transform: translateY(40px);
  will-change: opacity, transform;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.mob-reveal--d1 { transition-delay: 0.06s; }
.mob-reveal--d2 { transition-delay: 0.14s; }
.mob-reveal--d3 { transition-delay: 0.22s; }
.mob-reveal--d4 { transition-delay: 0.30s; }
.mob-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════════════
   MOBILE — 480px and below (small iPhones)
══════════════════════════════════════════ */
@media (max-width: 480px) {
  /* ── Header — small iPhone ── */
  :root { --header-h: 44px; }
  .topHeaderInner { padding: 0 10px; gap: 6px; }
  .brandLogo { width: 60px; }
  .crumbs { padding-left: 6px; }
  .crumbLine { font-size: 10px; max-width: 110px; }
  .crumbBack { font-size: 9px; }
  .headerBtn { padding: 0 8px; height: 28px; font-size: 11px; }
  .headerDividerSep { display: none; }

  /* ── Chart — shorter canvas so Y labels breathe ── */
  #marketChart { height: 260px; }

  .heroSearchLabel { font-size: 20px; }
  #artistName { font-size: 24px; }
  #marketValue { font-size: 28px; }
  .sectionHeading2 { font-size: 24px; }
  .priceLookupHeading { font-size: 20px; }
  .priceLookupResults .statCell { min-width: 100%; }
  .priceLookupResults .statValue { font-size: 20px; }
  .statsStrip { grid-template-columns: 1fr; }
  .tab { padding: 0 8px; font-size: 11px; }

  /* Filter browser — extra compact for small iPhones */
  .fbOverlay { max-height: 45vh; border-radius: 10px; }
  .fbNavItem { padding: 4px 8px; font-size: 10.5px; }
  .fbContent { padding: 8px 10px; }
  .fbCard { min-height: 50px; min-width: 80px; max-width: 110px; padding: 10px 8px; border-radius: 10px; }
  .fbCardLabel { font-size: 10px; }
  .fbCardCount { font-size: 12px; top: 6px; right: 6px; }
  .fbCard--active::after { top: 6px; left: 6px; font-size: 10px; }
  .fbListItem { padding: 7px 10px 7px 8px; }
  .fbListLabel { font-size: 11.5px; }
  .fbList { max-height: 180px; }
}
/* ══════════════════════════════════════════
   VISIBLE SUGGESTION DROPDOWN (#artistSugVisible)
   Anchored to .heroSearchBar via position:absolute
   on the parent which is position:relative
══════════════════════════════════════════ */
.sideSug {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.14);
  overflow: hidden;
  z-index: 200;
  text-align: left;
  display: none;
}
/* ══════════════════════════════════════════
   CHART — open/flush layout (no card)
══════════════════════════════════════════ */
/* chartCardTitle sits like Apple's "NASDAQ: AAPL" label */
.chartCardTitle {
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: var(--text-sec) !important;
}

.chartCardMeta {
  display: none; /* redundant with sectionSub above chart */
}

/* Time range pills — sit right-aligned flush */
.marketPills {
  gap: 4px;
}

.mPill {
  height: 28px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.mPill.active {
  color: #fff !important;
}

/* Stats strip — horizontal, clean */
.statValue[style] {
  font-size: 20px !important;
}

.artistDisclaimer {
  margin-top: 14px;
  max-width: 420px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.01em;
}
/* ── Performance Tracker toggle button ── */
.pvToggleBtn {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 5px 14px;
  border-radius: 980px;
  border: none;
  background: linear-gradient(135deg, #7a8799, #5e6b7a);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  color: #fff;
  margin-right: 8px;
  letter-spacing: 0.02em;
}

.pvToggleBtn .pvDot { display: none; }

.pvToggleBtn--on {
  background: linear-gradient(135deg, #3ddb6b, #28b74d);
  color: #fff;
  box-shadow: 0 2px 10px rgba(52, 199, 89, 0.3);
}

.pvToggleBtn--off {
  background: linear-gradient(135deg, #7a8799, #5e6b7a);
  color: #fff;
}

[data-theme="dark"] .pvToggleBtn {
  border: none;
}

[data-theme="dark"] .pvToggleBtn--on {
  background: linear-gradient(135deg, #3deb6e, #28c050);
  color: #fff;
  box-shadow: 0 2px 10px rgba(48, 209, 88, 0.25);
}

[data-theme="dark"] .pvToggleBtn--on .pvDot { display: none; }

[data-theme="dark"] .pvToggleBtn--off {
  background: linear-gradient(135deg, #636e7e, #4a5565);
  color: #fff;
}


/* ── Copyright footer ─────────────────────────────────────── */
.beetle-footer {
  text-align: center;
  width: 100%;
  padding: 12px 16px 20px;
  font-size: 12px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  color: rgba(0, 0, 0, 0.35);
  letter-spacing: 0.02em;
}
.beetle-footer-link {
  color: inherit;
  text-decoration: none;
}
.beetle-footer-link:hover {
  text-decoration: underline;
}
══════════════════════════════════════════ */
.saleCarousel {
  width: 100%;
  margin: 32px 0 16px;
}

.saleCarousel__viewport {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 300px;
  border: none;
  border-radius: 0;
  overflow: hidden;
}

/* Faded table backdrop — sits to the RIGHT of the card */
.saleCarousel__backdrop {
  flex: 1;
  min-width: 0;
  margin-left: 300px;
  opacity: 0.65;
  transition: opacity 0.3s ease;
  font-size: 11px;
  color: var(--text, #1d1d1f);
  padding: 24px 20px;
  line-height: 1.5;
  overflow-y: auto;
  max-height: 340px;
  cursor: pointer;
}
.saleCarousel__backdrop:hover,
.saleCarousel__backdrop--active {
  opacity: 1;
}

.saleCarousel__card {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  min-height: 300px;
  background: #fff;
  border-right: 1px solid rgba(0,0,0,0.06);
  /* Quarter circle: flat left and bottom, full curve top-right */
  border-radius: 0 100% 0 0;
  padding: 80px 60px 24px 24px;
  cursor: pointer;
  transition: transform 0.85s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.7s ease;
  transform-origin: bottom left;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  z-index: 2;
}
.saleCarousel__card:hover {
  box-shadow: 2px 0 12px rgba(0,0,0,0.04);
}

/* Rotation animations — pivot from bottom-left, two-card wheel */
.saleCarousel__card--exitNext {
  transform: rotate(90deg);
  opacity: 0;
  transition: transform 0.85s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.7s ease;
}
.saleCarousel__card--enterNext {
  transform: rotate(-90deg);
  opacity: 0;
  transition: transform 0.85s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.55s ease 0.15s;
}
.saleCarousel__card--exitPrev {
  transform: rotate(-90deg);
  opacity: 0;
  transition: transform 0.85s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.7s ease;
}
.saleCarousel__card--enterPrev {
  transform: rotate(90deg);
  opacity: 0;
  transition: transform 0.85s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.55s ease 0.15s;
}

/* Controls */
.saleCarousel__controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 14px 0 0;
}

.saleCarousel__btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;
  color: var(--text, #1d1d1f);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, transform 0.15s, opacity 0.15s;
}
.saleCarousel__btn:hover {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.18);
  transform: scale(1.08);
}
.saleCarousel__btn:active {
  transform: scale(0.95);
}
.saleCarousel__btn--disabled {
  opacity: 0.25;
  pointer-events: none;
}

.saleCarousel__counter {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-ter, rgba(0,0,0,0.35));
  font-variant-numeric: tabular-nums;
  min-width: 48px;
  text-align: center;
}

/* Card inner text — clean white card style */
.saleCarousel__card .saleCard__label {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text, #1d1d1f);
  margin-bottom: 3px;
  line-height: 1.2;
}

.saleCarousel__card .saleCard__date {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-ter, rgba(0,0,0,0.38));
  margin-bottom: 16px;
  letter-spacing: 0.01em;
}

.saleCarousel__card .saleCard__rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.saleCarousel__card .saleCard__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.saleCarousel__card .saleCard__row:last-child { border-bottom: none; }

.saleCarousel__card .saleCard__lotDate {
  font-size: 12px;
  font-weight: 400;
  color: var(--text, #1d1d1f);
  flex: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.saleCarousel__card .saleCard__delta {
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.saleCard__delta--sold   { color: var(--green, #34c759); }
.saleCard__delta--unsold { color: var(--red, #ff3b30); }

.saleCarousel__card .saleCard__priceWrap {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.saleCarousel__card .saleCard__price {
  font-size: 12px;
  font-weight: 500;
  color: var(--text, #1d1d1f);
}

.saleCard__more {
  font-size: 11px;
  color: var(--text-ter, rgba(0,0,0,0.38));
  padding-top: 8px;
  text-align: center;
  font-weight: 500;
}



/* ══════════════════════════════════════════
   SALE MODAL — fullscreen expanded table
══════════════════════════════════════════ */
.saleModal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.saleModal.active { display: flex; }

.saleModalBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.saleModalContent {
  position: relative;
  width: 90vw;
  max-width: 960px;
  max-height: 80vh;
  background: linear-gradient(to bottom, #ffffff 0%, #f5f5f7 100%);
  border-radius: var(--card-radius, 20px);
  box-shadow: 0 24px 80px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: saleModalIn 0.25s ease;
}

@keyframes saleModalIn {
  from { opacity: 0; transform: scale(0.96) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.saleModalHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 28px 28px 20px;
  flex-shrink: 0;
}

.saleModalHeaderText {
  display: flex;
  flex-direction: column;
}

.saleModalEyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-ter, #aeaeb2);
  margin-bottom: 6px;
}

.saleModalTitle {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text, #1d1d1f);
  line-height: 1.05;
  margin-bottom: 6px;
}

.saleModalSub {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-sec, #6e6e73);
  line-height: 1.4;
}

.saleModalClose {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--bg-section3, #f0f0f2);
  color: var(--text-sec, #6e6e73);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.saleModalClose:hover {
  background: var(--bg-section4, #ebebed);
}

.saleModalTableWrap {
  overflow: auto;
  flex: 1;
  padding: 0 28px 24px;
}

.saleModalTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 4px;
}

.saleModalTable th {
  text-align: left;
  padding: 10px 10px 8px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--text-ter, #aeaeb2);
  border-bottom: 1px solid rgba(0,0,0,0.04);
  position: sticky;
  top: 0;
  background: linear-gradient(to bottom, #ffffff, #f8f8fa);
  z-index: 1;
}

.saleModalTable td {
  padding: 10px 10px;
  color: var(--text, #1d1d1f);
  border-bottom: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Subtle alternating row tint instead of lines */
.saleModalTable tbody tr:nth-child(even) {
  background: rgba(0,0,0,0.015);
}

.saleModalTable .sold   { color: var(--green, #34c759); font-weight: 500; }
.saleModalTable .unsold { color: var(--red, #ff3b30); font-weight: 500; }

.saleModalTable .lotTitleCol {
  white-space: nowrap;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ── Mobile: hide carousel, show white scroll panels ── */
.saleCardsRow--mobile { display: none; }

.saleCardsRow--mobile .saleCard {
  flex: 0 0 160px;
  min-height: auto;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 12px 12px 10px;
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
.saleCardsRow--mobile .saleCard:hover {
  transform: scale(1.02);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.saleCardsRow--mobile .saleCard__label {
  font-size: 12px; font-weight: 700; color: var(--text, #1d1d1f); margin-bottom: 1px;
}
.saleCardsRow--mobile .saleCard__date {
  font-size: 9px; color: var(--text-ter, rgba(0,0,0,0.38)); margin-bottom: 8px;
}
.saleCardsRow--mobile .saleCard__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 6px; padding: 3px 0; border-bottom: 1px solid rgba(0,0,0,0.04);
}
.saleCardsRow--mobile .saleCard__row:last-child { border-bottom: none; }
.saleCardsRow--mobile .saleCard__lotDate {
  font-size: 9px; color: var(--text, #1d1d1f); font-variant-numeric: tabular-nums;
}
.saleCardsRow--mobile .saleCard__price {
  font-size: 9px; font-weight: 500; color: var(--text, #1d1d1f);
}
.saleCardsRow--mobile .saleCard__delta {
  font-size: 8px; font-weight: 500; font-variant-numeric: tabular-nums;
}
.saleCardsRow--mobile .saleCard__priceWrap {
  white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
  .saleCarousel--desktop { display: none !important; }
  .saleCardsRow--mobile {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 16px 0 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.15) transparent;
  }
  .saleCardsRow--mobile::-webkit-scrollbar { height: 3px; }
  .saleCardsRow--mobile::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; }
  .saleModalContent { width: 100vw; max-width: 100vw; max-height: 100vh; border-radius: 0; }
  .saleModalHeader { padding: 16px 16px 12px; }
  .saleModalTitle { font-size: 22px; }
  .saleModalEyebrow { font-size: 9px; margin-bottom: 3px; }
  .saleModalSub { font-size: 11px; }
  .saleModalClose { width: 28px; height: 28px; font-size: 12px; }
  .saleModalTableWrap { padding: 0 12px 16px; }
  .saleModalTable { font-size: 11px; min-width: 0; }
  .saleModalTable th { padding: 8px 6px 6px; font-size: 10px; }
  .saleModalTable td { padding: 8px 6px; }
  .saleModalTable .col-est,
  .saleModalTable .col-house { display: none; }
  .saleModalTable .lotTitleCol { max-width: 120px; }
}

/* Small phones (iPhone SE, etc) */
@media (max-width: 390px) {
  .saleCarousel__card {
    padding: 50px 30px 16px 12px;
    min-height: 190px;
  }
  .saleCarousel__card .saleCard__label { font-size: 14px; }
  .saleCarousel__card .saleCard__lotDate { font-size: 9px; }
  .saleCarousel__card .saleCard__delta { font-size: 8px; }
  .saleCarousel__card .saleCard__price { font-size: 9px; }
  .saleCard__priceWrap { font-size: 7px; }
}

/* ══════════════════════════════════════════
   SSR SUMMARY — visible to crawlers, hidden once JS hydrates
══════════════════════════════════════════ */
.ssrSummary {
  padding: 24px 0 32px;
}
.ssrSummary .sectionInner {
  max-width: 920px;
}
.ssrTitle {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.ssrMeta {
  font-size: 13px;
  opacity: 0.55;
  margin: 0 0 20px;
}
.ssrStats {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.ssrStat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ssrStatLabel {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.45;
  font-weight: 500;
}
.ssrStatValue {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.ssrSubhead {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 12px;
}
.ssrTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.ssrTable th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.45;
  font-weight: 500;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.ssrTable td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  vertical-align: top;
}
.ssrTable tr:last-child td { border-bottom: none; }

/* Hide SSR summary once JS has hydrated */
.beetle-hydrated .ssrSummary {
  display: none;
}
.beetle-hydrated .ssrPagerBar {
  display: none;
}

/* SSR Pagination links — crawlable by Google */
.ssrPager {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,0.06);
}

/* Always-visible pagination bar — never hidden by hydration */
.ssrPagerBar {
  padding: 12px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.ssrPagerBarInner {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
}
.ssrPagerLink {
  font-size: 13px;
  font-weight: 500;
  color: #4a7c9b;
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid rgba(74,124,155,0.2);
  transition: background 0.15s, border-color 0.15s;
}
.ssrPagerLink:hover {
  background: rgba(74,124,155,0.06);
  border-color: rgba(74,124,155,0.35);
}
.ssrPagerInfo {
  font-size: 12px;
  opacity: 0.45;
  font-weight: 500;
}

@media (max-width: 600px) {
  .ssrStats { gap: 16px; }
  .ssrStatValue { font-size: 15px; }
  .ssrTitle { font-size: 18px; }
  .ssrTable { font-size: 11px; }
}