:root {
  --bg:        #0b0d10;
  --bg1:       #0f1217;
  --bg2:       #14181e;
  --bg3:       #1a1f26;
  --bg4:       #232932;
  --brd:       #232a32;
  --brd2:      #2d353e;
  --teal:      #2eb8a4;
  --teal2:     #239585;
  --teal3:     #1a6f63;
  --tealdim:   rgba(46,184,164,.09);
  --tealglw:   rgba(46,184,164,.15);
  --grn:       #4cb87f;
  --grndim:    rgba(76,184,127,.1);
  --red:       #e8607a;
  --reddim:    rgba(232,96,122,.1);
  --yel:       #d6a93f;
  --yeldim:    rgba(214,169,63,.1);
  --blu:       #5096db;
  --bludim:    rgba(80,150,219,.1);
  --pur:       #9485d8;
  --purdim:    rgba(148,133,216,.1);
  --txt:       #e6edf3;
  --txt2:      #9aa4af;
  --txt3:      #616c77;
  --txt4:      #313a43;
  --fd:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --fm:        'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --fb:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* v2.20.0: Customize color-swatch inputs */
input.cz-sw { height: 34px; padding: 2px 4px; cursor: pointer; }

/* v2.20.7: widgets (composable pages) — host-scoped widget chrome + 12-col grid */
.ll-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.ll-grid-cell { min-width: 0; }
.ll-w { background: var(--bg2); border: 1px solid var(--brd); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.ll-w-head { padding: 8px 12px; font-weight: 600; font-size: 12px; color: var(--txt2); border-bottom: 1px solid var(--brd); background: var(--bg1); }
.ll-w-body { padding: 8px 12px; overflow: auto; max-height: 440px; }
.ll-w-empty { padding: 18px; text-align: center; color: var(--txt3); font-size: 12px; }
.ll-w-tbl { width: 100%; border-collapse: collapse; font-size: 11px; }
.ll-w-tbl th { text-align: left; color: var(--txt3); font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--brd); position: sticky; top: 0; background: var(--bg2); }
.ll-w-tbl td { padding: 4px 6px; border-bottom: 1px solid var(--brd); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.ll-kpi-v { font-family: var(--fd); font-size: 30px; color: var(--teal); line-height: 1; }
.ll-kpi-l { font-size: 11px; color: var(--txt3); margin-top: 4px; text-transform: uppercase; letter-spacing: .04em; }
/* v2.21.32: stack the widget grid on tablets / small windows (≤1024px) — side-by-side
   real tabs are cramped below a laptop width; desktops (>1024px) keep the multi-column layout. */
@media (max-width: 1024px) { .ll-grid { grid-template-columns: 1fr; } .ll-grid-cell { grid-column: 1 / -1 !important; } }

/* v2.20.1: collapsible admin modules — click a module header to minimize its body */
#admin-content .tw.collapsed > :not(.th) { display: none !important; }
#admin-content .tw > .th { cursor: pointer; user-select: none; }
#admin-content .tw > .th:hover .tw-chev { color: var(--teal); }
.tw-chev { margin-left: 8px; color: var(--txt3); font-size: 11px; transition: color .15s; }

html { overflow-x: hidden; }  /* v2.9.2: defensive — ensure no horizontal page scroll regardless of child widths */
body {
  background: var(--bg);
  color: var(--txt);
  font-family: var(--fb);
  /* v2.20.0: text-size knob — tenant Customize sets --ll-font-scale (default 1). */
  font-size: calc(13px * var(--ll-font-scale, 1));
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── SIDEBAR ── */
.sb {
  width: 220px;
  background: var(--bg1);
  border-right: 1px solid var(--brd);
  position: fixed; top: 0; left: 0; height: 100vh;
  display: flex; flex-direction: column; z-index: 100;
  overflow-y: auto;
  /* v2.9.3: animate slide-out for collapsible behavior */
  transition: transform 0.25s ease;
}
/* v2.9.3: hide sidebar (off-canvas) when .collapsed is added */
.sb.collapsed { transform: translateX(-100%); }
.main.expanded { margin-left: 0 !important; max-width: 100vw !important; }

/* v2.9.3: Hamburger button — always visible, top-left, toggles sidebar */
.mobile-hamburger {
  position: fixed; top: 14px; left: 14px;
  width: 36px; height: 36px;
  background: var(--bg2);
  border: 1px solid var(--brd2);
  border-radius: 6px;
  cursor: pointer;
  z-index: 200;
  display: flex;  /* v2.9.4: always visible so user can hide sidebar to free up space */
  align-items: center; justify-content: center;
  color: var(--teal);
  font-size: 18px;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
  /* slight transparency when sidebar is open so it doesn't block the logo */
  opacity: 0.55;
}
.mobile-hamburger:hover { background: var(--bg3); border-color: var(--teal); opacity: 1; }
.mobile-hamburger.always-visible { display: flex; opacity: 1; }
.sb.collapsed ~ * .mobile-hamburger,
.mobile-hamburger.always-visible { opacity: 1; }

/* v2.9.3: Backdrop dim when sidebar open on mobile (off-canvas mode) */
.mobile-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 90;
  display: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.mobile-overlay.show { display: block; opacity: 1; }

/* v2.9.3: At narrow viewports, sidebar starts collapsed and content takes full width */
@media (max-width: 900px) {
  .sb { transform: translateX(-100%); }                 /* hidden by default */
  .sb.open { transform: translateX(0); }                /* shown when toggled */
  .main { margin-left: 0 !important; max-width: 100vw !important; padding-left: 60px; }
  .mobile-hamburger { display: flex; }                  /* always visible on mobile */
  .ph { padding-left: 0; }
  .ph-r { gap: 6px; }
  .pt { font-size: 19px !important; letter-spacing: .2px !important; }
}

.sb-logo {
  padding: 22px 18px 18px;
  border-bottom: 1px solid var(--brd);
  position: relative;
}
.sb-logo::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: var(--brd);
}
.logo-mark {
  display: flex; align-items: center; gap: 10px; margin-bottom: 4px;
}
.logo-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--teal);
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.7;transform:scale(.9)} }
.logo-text { font-family: var(--fd); font-size: 18px; font-weight: 700; letter-spacing: .3px; color: var(--txt); line-height: 1; }
.logo-text span { color: var(--teal); }
.logo-sub { font-size: 9px; letter-spacing: 3px; color: var(--txt3); text-transform: uppercase; }

.sb-nav { padding: 10px 8px; flex: 1; }
.nav-sec { font-size: 10px; letter-spacing: .6px; color: var(--txt3); text-transform: uppercase; padding: 14px 10px 5px; }
/* v2.12.6: collapsible nav sections — click .nav-sec to toggle .nav-sec-items below */
.nav-sec.clickable { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; transition: color 0.15s; }
.nav-sec.clickable:hover { color: var(--txt2); }
.nav-sec-chevron { display: inline-block; font-size: 8px; line-height: 1; transition: transform 0.15s ease; opacity: 0.6; }
.nav-sec.collapsed .nav-sec-chevron { transform: rotate(-90deg); }
.nav-sec.collapsed + .nav-sec-items { display: none; }
.nav-sec-items { display: block; }

.ni {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 6px;
  cursor: pointer; color: var(--txt2);
  font-size: 12px; font-weight: 500;
  transition: all .15s; margin-bottom: 1px;
  border: 1px solid transparent;
  position: relative;
}
.ni:hover { background: var(--bg3); color: var(--txt); }
.ni.on {
  background: var(--tealdim);
  color: var(--teal);
  border-color: rgba(0,229,192,.2);
}
.ni.on::before {
  content: '';
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 2px; height: 60%; background: var(--teal);
  border-radius: 0 2px 2px 0;
}
/* Clean, typography-led nav — drop the per-row decorative glyphs (the strongest "generated" tell). */
.ni-ic { display: none; }
.ni-badge {
  margin-left: auto; background: var(--teal3);
  color: var(--teal); font-family: var(--fm); font-size: 9px;
  padding: 1px 5px; border-radius: 3px;
}
/* v2.16.46: low-friction sidebar pulse. Apply .ni-badge-pulse to a badge to
   surface threshold-crossed state (TCG drift > 100, Set Lots bucket ≥ 90%). */
@keyframes ni-badge-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(0,229,192,0.6); }
  50%     { box-shadow: 0 0 0 4px rgba(0,229,192,0); }
}
.ni-badge-pulse {
  animation: ni-badge-pulse 1.8s ease-in-out infinite;
  background: var(--teal); color: var(--bg); font-weight: 700;
}

.sb-status {
  padding: 12px 14px; border-top: 1px solid var(--brd);
}
.status-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--grn);
  box-shadow: 0 0 6px var(--grn);
}
.status-dot.warn { background: var(--yel); box-shadow: 0 0 6px var(--yel); }
.status-dot.off { background: var(--txt3); box-shadow: none; }
.status-label { font-size: 11px; color: var(--txt2); }
.status-label span { color: var(--grn); font-family: var(--fm); font-size: 10px; }

/* ── MAIN ── */
.main {
  margin-left: 220px;
  flex: 1;
  padding: 24px 28px;
  /* v2.8: prevent flex blowout — without this, wide children can force the
     main column wider than its share, sliding content under the fixed sidebar */
  min-width: 0;
  max-width: calc(100vw - 220px);
}
.page { display: none; }
.page.on { display: block; }

/* ── PAGE HEADER ── */
.ph { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; flex-wrap: wrap; gap: 12px; }
.pt { font-family: var(--fd); font-size: 21px; font-weight: 650; letter-spacing: .2px; line-height: 1.15; }
.pt em { color: inherit; font-style: normal; font-weight: inherit; }
.ps { font-size: 12px; color: var(--txt2); letter-spacing: 0; text-transform: none; margin-top: 4px; }
.ph-r { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* v2.9: Sync status pill — shows last-sync time + clickable to trigger sync now */
.sync-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 12px;
  background: var(--bg3); border: 1px solid var(--brd);
  font-size: 11px; color: var(--txt2);
  cursor: pointer; user-select: none;
  transition: background .15s, border-color .15s;
}
.sync-pill:hover { background: var(--bg2); border-color: var(--brd2); }
.sync-pill.fresh { border-color: rgba(0,232,122,.3); }
.sync-pill.fresh .sync-dot { background: var(--grn); box-shadow: 0 0 4px var(--grn); }
.sync-pill.stale { border-color: rgba(255,196,0,.3); }
.sync-pill.stale .sync-dot { background: var(--yel); box-shadow: 0 0 4px var(--yel); }
.sync-pill.old { border-color: rgba(255,69,102,.3); }
.sync-pill.old .sync-dot { background: var(--red); box-shadow: 0 0 4px var(--red); }
.sync-pill.syncing { border-color: rgba(0,229,192,.5); }
.sync-pill.syncing .sync-dot {
  background: var(--teal); box-shadow: 0 0 4px var(--teal);
  animation: sync-pulse 1s ease-in-out infinite;
}
@keyframes sync-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }
.sync-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--txt3); flex-shrink: 0; }
.sync-pill.flash { animation: sync-flash 1s ease-out; }
@keyframes sync-flash {
  0% { background: var(--grndim); border-color: var(--grn); }
  100% { background: var(--bg3); }
}

/* ── KPI CARDS ── */
.kg { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kpi {
  background: var(--bg2);
  border: 1px solid var(--brd);
  border-radius: 8px;
  padding: 16px;
  position: relative; overflow: hidden;
  transition: border-color .2s, transform .15s;
}
.kpi:hover { border-color: var(--brd2); transform: translateY(-1px); }
.kpi::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--teal3); }
.kpi.t::before { background: var(--teal); box-shadow: 0 0 8px var(--teal); }
.kpi.g::before { background: var(--grn); }
.kpi.r::before { background: var(--red); }
.kpi.y::before { background: var(--yel); }
.kpi.b::before { background: var(--blu); }
.kpi.p::before { background: var(--pur); }
.kpi-corner {
  position: absolute; top: 8px; right: 8px;
  font-size: 18px; opacity: .15;
}
.kl { font-size: 9px; letter-spacing: 2px; color: var(--txt3); text-transform: uppercase; margin-bottom: 8px; }
.kv {
  font-family: var(--fm); font-size: 20px; font-weight: 600;
  color: var(--txt); line-height: 1;
  /* v2.8: long values like "$12,345.67" don't burst out of narrow KPI columns */
  word-break: break-word;
  overflow-wrap: anywhere;
}
.kv.t { color: var(--teal); }
.kv.g { color: var(--grn); }
.kv.r { color: var(--red); }
.kv.y { color: var(--yel); }
.ks { font-size: 10px; color: var(--txt3); margin-top: 5px; }

/* ── TABLES ── */
.tw {
  background: var(--bg2);
  border: 1px solid var(--brd);
  border-radius: 8px;
  /* v2.8: was `overflow: hidden` which clipped wide tables.
     Allow horizontal scroll on overflow but keep vertical clipped so
     rounded corners stay clean. Inner divs with overflow-y:auto still work. */
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: 18px;
}
.th {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--brd);
  flex-wrap: wrap; gap: 8px;
  background: var(--bg3);
}
.tt { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.tt-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 6px var(--teal); flex-shrink: 0; }

/* v2.9.90: title-expand mode for mobile (and desktop on demand).
   When body has .title-expand, cells/divs with .expand-target class drop
   their ellipsis truncation and wrap to multiple lines. Applied to the
   four matching pages: Similar New, Exact New, Pick List, Approval Queue.
   Other pages keep ellipsis (info density preserved on desktop).

   Strategy: CSS class on body + marker class on target cells.
   No per-render JS overhead — CSS handles everything.
   max-width:none overrides the inline `max-width:240px` etc. on the cells. */

/* v2.9.96: REAL fix for the mobile-toggle-off-screen issue.
   Root cause: flex items default to `min-width: auto` (= their min-content).
   The inner button div in .th has 7 buttons with combined min-content ~700px;
   on a 400px viewport, the inner div CANNOT shrink below 700px, forcing .th
   (and therefore the surrounding .tw via the overflow:auto containment) to
   grow wider than viewport. Result: rightmost buttons (notably the
   title-expand toggle) sit off-screen and the user has to horizontally
   scroll the table area to reach them.

   Fix: explicitly allow the inner button container to shrink below its
   min-content width. flex-wrap:wrap (already set on each page's inner div)
   then takes effect and the buttons wrap onto multiple rows naturally.

   Targets `.th > div` only — preserves .tt (title span) natural width so
   the title doesn't get unexpectedly truncated. Applies uniformly to all
   four pages with the toggle (Exact, Similar, Queue, Pick List). */
.th > div { min-width: 0; }

.title-expand-toggle { flex-shrink: 0; }

body.title-expand .expand-target {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: none !important;
  word-break: break-word;
}
/* Re-add a sensible max-width on mobile so titles wrap inside the card
   instead of expanding the whole row. */
@media (max-width: 768px) {
  body.title-expand .expand-target {
    max-width: 60vw !important;
  }
}

table { width: 100%; border-collapse: collapse; }
thead th {
  background: var(--bg3);
  padding: 8px 14px; text-align: left;
  font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--txt3); font-weight: 500;
  border-bottom: 1px solid var(--brd);
  white-space: nowrap; cursor: pointer;
  transition: color .15s;
  /* v2.20.9: lock the header row (incl. select-all checkboxes) while scrolling.
     Tables inside max-height/overflow-y:auto wrappers get a pinned header; tables
     in non-scrolling wrappers are unaffected (sticky is inert there). */
  position: sticky; top: 0; z-index: 2;
}
thead th:hover { color: var(--teal); }
tbody tr { border-bottom: 1px solid var(--brd); transition: background .1s; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: rgba(0,229,192,.03); }
td { padding: 8px 14px; font-size: 12px; color: var(--txt2); }
td.em { color: var(--txt); font-weight: 500; }
td.mn { font-family: var(--fm); font-size: 11px; }

/* ── BADGES ── */
.bge {
  display: inline-flex; align-items: center;
  padding: 2px 7px; border-radius: 4px;
  font-size: 10px; font-weight: 600;
  font-family: var(--fm); letter-spacing: .5px;
}
.bg-t { background: var(--tealdim); color: var(--teal); border: 1px solid rgba(0,229,192,.2); }
.bg-g { background: var(--grndim); color: var(--grn); border: 1px solid rgba(0,232,122,.2); }
.bg-r { background: var(--reddim); color: var(--red); border: 1px solid rgba(255,69,102,.2); }
.bg-y { background: var(--yeldim); color: var(--yel); border: 1px solid rgba(255,200,48,.2); }
.bg-b { background: var(--bludim); color: var(--blu); border: 1px solid rgba(61,158,255,.2); }
.bg-p { background: var(--purdim); color: var(--pur); border: 1px solid rgba(167,139,250,.2); }
.bg-x { background: rgba(61,90,100,.25); color: var(--txt3); border: 1px solid var(--brd); }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 6px;
  font-family: var(--fb); font-size: 12px; font-weight: 600;
  cursor: pointer; border: none; transition: all .15s;
  white-space: nowrap; letter-spacing: .3px;
}
.btn-t { background: var(--teal); color: #020a09; }
.btn-t:hover { background: var(--teal2); }
.btn-o { background: transparent; color: var(--txt2); border: 1px solid var(--brd2); }
.btn-o:hover { border-color: var(--teal); color: var(--teal); }
.btn-g { background: var(--grndim); color: var(--grn); border: 1px solid rgba(0,232,122,.25); }
.btn-g:hover { background: rgba(0,232,122,.18); }
.btn-r { background: var(--reddim); color: var(--red); border: 1px solid rgba(255,69,102,.25); }
.btn-sm { padding: 5px 10px; font-size: 11px; }
.btn-xs { padding: 3px 8px; font-size: 10px; }

/* ── INPUTS ── */
.si {
  background: var(--bg3); border: 1px solid var(--brd2);
  border-radius: 6px; padding: 7px 12px;
  color: var(--txt); font-family: var(--fb); font-size: 12px;
  outline: none; transition: border-color .15s;
}
.si:focus { border-color: var(--teal); box-shadow: 0 0 0 2px var(--tealdim); }
.si::placeholder { color: var(--txt3); }
select.si option { background: var(--bg3); }

/* ── CHART ── */
.cw { background: var(--bg2); border: 1px solid var(--brd); border-radius: 8px; padding: 18px; margin-bottom: 18px; }
.ct { font-weight: 600; font-size: 13px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.ct::before { content: ''; width: 3px; height: 16px; background: var(--teal); border-radius: 2px; box-shadow: 0 0 8px var(--teal); }
.bc { display: flex; align-items: flex-end; gap: 8px; height: 140px; padding-bottom: 24px; border-bottom: 1px solid var(--brd); }
.bg2c { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.bbs { display: flex; gap: 2px; align-items: flex-end; width: 100%; }
.bar { border-radius: 3px 3px 0 0; flex: 1; min-width: 6px; cursor: pointer; transition: opacity .2s, filter .2s; }
.bar:hover { opacity: .8; filter: brightness(1.2); }
.bl { font-size: 9px; color: var(--txt3); margin-top: 5px; font-family: var(--fm); }
.cl { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.cli { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--txt2); }
.cld { width: 8px; height: 8px; border-radius: 2px; }

/* ── PL HERO ── */
.pl-hero {
  background: var(--bg2);
  border: 1px solid var(--brd);
  border-radius: 8px;
  padding: 24px 28px;
  margin-bottom: 20px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  position: relative; overflow: hidden;
}
.pl-hero::before, .pl-hero::after { display: none; }
.plh-label { font-size: 10px; letter-spacing: .8px; text-transform: uppercase; color: var(--txt3); margin-bottom: 8px; }
.plh-val {
  font-family: var(--fm); font-size: 38px; letter-spacing: 0; line-height: 1.05;
  /* v2.9.2: prevent very large dollar values from forcing the page wider
     than the viewport (which slid Singles/Master content under the sidebar) */
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}
.pl-hero > div { min-width: 0; }      /* let flex children shrink */
.kg > * { min-width: 0; }              /* let kpi cards shrink */
.plh-val.pos { color: var(--grn); }
.plh-val.neg { color: var(--red); }
.plh-sub { font-size: 10px; color: var(--txt3); margin-top: 6px; font-family: var(--fm); }
.plh-stats { display: flex; gap: 24px; flex-wrap: wrap; }
.plh-stat .v { font-family: var(--fm); font-size: 16px; font-weight: 600; }
.plh-stat .l { font-size: 9px; color: var(--txt3); letter-spacing: 1.5px; text-transform: uppercase; margin-top: 3px; }

/* ── SHARING MODE (v2.18.6) ──
   One toggle (body.sharing-mode) blurs every sensitive value so a tenant can
   screen-share / livestream without exposing money, P&L, order amounts,
   expenses or buyer names. Card titles, labels and structure stay readable so
   they can still talk through their workflow. Blur is unreadable at this size
   and reverses instantly when toggled off. .mn covers table money/qty/dates AND
   the buyer column; .kv covers KPI values; .ks covers KPI subtitles (which embed
   $ fees/shipping/ad-spend/refunds — v2.19.2); .plh-* covers the P&L hero. */
body.sharing-mode .kv,
body.sharing-mode .ks,
body.sharing-mode .mn,
body.sharing-mode .plh-sub,
body.sharing-mode .plh-stat .v,
body.sharing-mode [data-sensitive] {
  filter: blur(9px) !important;
  -webkit-filter: blur(9px) !important;
  user-select: none !important;
  cursor: default !important;
}
/* The P&L hero headline is ~52px — needs much heavier blur to be unreadable
   even on a paused stream frame. Blur scales with font size, so small text is
   fully obscured at 9px but the headline needs ~24px. */
body.sharing-mode .plh-val {
  filter: blur(24px) !important;
  -webkit-filter: blur(24px) !important;
  user-select: none !important;
  cursor: default !important;
}

/* ── LIVE INDICATOR ── */
.live-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--grndim); border: 1px solid rgba(0,232,122,.25);
  border-radius: 20px; padding: 3px 10px;
  font-size: 10px; color: var(--grn); font-family: var(--fm);
}
.live-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--grn); box-shadow: 0 0 6px var(--grn); animation: pulse 1.5s ease-in-out infinite; }
.pending-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--yeldim); border: 1px solid rgba(255,200,48,.25);
  border-radius: 20px; padding: 3px 10px;
  font-size: 10px; color: var(--yel); font-family: var(--fm);
}

/* ── MODAL ── */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.8); z-index: 500; display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(4px); }
.modal { background: var(--bg2); border: 1px solid var(--brd2); border-radius: 10px; padding: 26px; width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto; position: relative; }
.modal::before { display: none; }
.modal h2 { font-family: var(--fd); font-size: 17px; font-weight: 650; letter-spacing: .2px; color: var(--txt); margin-bottom: 16px; }
.modal-hidden { display: none; }
.fg { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.fg label { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--txt3); }
.fg-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }

/* ── ASSIGN MODAL SKU LIST ── */
.asgn-list-wrap { max-height: 280px; overflow-y: auto; background: var(--bg3); border: 1px solid var(--brd); border-radius: 6px; }
.asgn-row { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-bottom: 1px solid var(--brd); cursor: pointer; transition: background .1s; }
.asgn-row:last-child { border-bottom: none; }
.asgn-row:hover { background: var(--tealdim); }
.asgn-row.sel { background: var(--tealdim); }
.asgn-chk { font-size: 14px; flex-shrink: 0; color: var(--teal); }
.asgn-sku { font-family: var(--fm); font-size: 10px; color: var(--pur); min-width: 130px; flex-shrink: 0; }
.asgn-title { font-size: 11px; color: var(--txt2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }

/* ── CHILD PANEL ── */
.child-panel { background: var(--bg3); border: 1px solid var(--brd); border-radius: 6px; margin-top: 4px; display: none; }
.child-panel.open { display: block; }
.child-hdr { padding: 7px 12px; border-bottom: 1px solid var(--brd); display: flex; justify-content: space-between; align-items: center; }
.child-hdr-txt { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--txt3); }
.child-list { max-height: 220px; overflow-y: auto; }
.child-item { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-bottom: 1px solid var(--brd); }
.child-item:last-child { border-bottom: none; }
.child-item input[type=checkbox] { accent-color: var(--teal); width: 13px; height: 13px; cursor: pointer; flex-shrink: 0; }
.child-sku { font-family: var(--fm); font-size: 10px; color: var(--pur); min-width: 150px; }
.child-status { font-size: 10px; color: var(--txt3); margin-left: auto; }
.child-status.pulled { color: var(--grn); }
.picked-ct { font-family: var(--fm); font-size: 10px; color: var(--txt3); }

/* ── PAGINATION ── */
.pag { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--brd); }
.pag-info { font-family: var(--fm); font-size: 10px; color: var(--txt3); }
.pag-btns { display: flex; gap: 6px; }

/* ── DROP ZONE ── */
.dz { border: 2px dashed var(--brd2); border-radius: 8px; padding: 24px; text-align: center; cursor: pointer; transition: all .15s; }
.dz:hover, .dz.dv { border-color: var(--teal); background: var(--tealdim); }
.dz-ok { border-color: rgba(0,232,122,.4)!important; background: var(--grndim)!important; cursor: default; }
.dz-icon { font-size: 24px; margin-bottom: 6px; }
.dz-txt { font-size: 11px; color: var(--txt3); }
.dz-txt strong { color: var(--teal); }
.dz-ok .dz-txt { color: var(--grn); }

/* ── AGE COLORS ── */
.age-warn td { color: var(--yel)!important; }
.age-warn td.em { color: var(--yel)!important; }
.age-old td { color: var(--red)!important; }
.age-old td.em { color: var(--red)!important; }
.age-badge { display: inline-block; font-size: 9px; padding: 1px 5px; border-radius: 3px; margin-left: 4px; font-family: var(--fm); }
.age-warn-b { background: var(--yeldim); color: var(--yel); }
.age-old-b { background: var(--reddim); color: var(--red); }

/* ── LOT CARD ── */
.lc { background: var(--bg2); border: 1px solid var(--brd); border-radius: 8px; padding: 16px; margin-bottom: 12px; transition: border-color .2s; }
.lc:hover { border-color: var(--brd2); }
.lot-num { font-family: var(--fd); font-size: 28px; color: var(--teal); line-height: 1; letter-spacing: 2px; }
.lot-meta { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; }
.lot-mi { font-size: 11px; color: var(--txt3); }
.lot-mi strong { color: var(--txt); display: block; font-size: 13px; font-family: var(--fm); margin-bottom: 2px; }
.lprog { height: 3px; background: var(--bg4); border-radius: 2px; margin-top: 12px; overflow: hidden; }
.lpb { height: 100%; border-radius: 2px; transition: width .6s ease; }

/* ── EXPENSE TYPE CHIP ── */
.exp-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg3); border: 1px solid var(--brd2); border-radius: 20px; padding: 4px 10px; font-size: 11px; margin: 3px; cursor: pointer; transition: all .15s; }
.exp-chip:hover { border-color: var(--teal); }
.exp-chip .del { color: var(--txt3); font-size: 10px; }
.exp-chip .del:hover { color: var(--red); }

/* ── SELL MODAL INFO ── */
.sell-info { background: var(--bg3); border: 1px solid var(--brd); border-radius: 6px; padding: 12px; margin-bottom: 14px; font-size: 11px; color: var(--txt2); }

/* ── ORDER LOT BADGE ── */
.ord-lot { display: flex; align-items: center; gap: 4px; }

/* ── SEARCH PAGE ── */
.sr-hero { max-width: 640px; margin: 0 auto 28px; text-align: center; }
.sr-title { font-family: var(--fd); font-size: 24px; font-weight: 650; letter-spacing: .2px; margin-bottom: 10px; }
.sr-title em { color: inherit; font-style: normal; }

/* ── YEAR TABS ── */
.ytabs { display: inline-flex; gap: 2px; background: var(--bg3); border: 1px solid var(--brd); border-radius: 7px; padding: 3px; margin-bottom: 16px; }
.ytab { padding: 6px 16px; border-radius: 5px; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--txt3); transition: all .15s; }
.ytab.on { background: var(--tealdim); color: var(--teal); border: 1px solid rgba(0,229,192,.2); }

/* ── COMBINE TABS ── */
.ctabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.ctab { padding: 7px 16px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--txt3); background: var(--bg3); border: 1px solid var(--brd); transition: all .15s; }
.ctab.on { background: var(--tealdim); color: var(--teal); border-color: rgba(0,229,192,.25); }
.ctab-panel { display: none; }
.ctab-panel.on { display: block; }

/* ── IMPORT PAGE ── */
.imp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 20px; }
.ic { background: var(--bg2); border: 1px solid var(--brd); border-radius: 8px; padding: 20px; }
.ic h3 { font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.ic p { font-size: 11px; color: var(--txt3); margin-bottom: 12px; line-height: 1.6; }
.col-map { margin-top: 8px; font-size: 10px; color: var(--txt3); line-height: 1.9; }
.col-map code { background: var(--bg4); padding: 1px 5px; border-radius: 3px; font-family: var(--fm); font-size: 9px; color: var(--blu); }

/* ── API STATUS CARD ── */
.api-card {
  background: var(--bg2); border: 1px solid var(--brd); border-radius: 8px;
  padding: 20px; margin-bottom: 16px;
  display: flex; align-items: center; gap: 16px;
}
.api-icon { font-size: 28px; }
.api-name { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.api-desc { font-size: 11px; color: var(--txt3); }

/* ── MASTER DASH ── */
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.sec-hdr { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--brd); display: flex; align-items: center; gap: 6px; }
.sec-hdr::before { content: ''; width: 3px; height: 12px; border-radius: 2px; }
.sec-hdr.t::before { background: var(--teal); }
.sec-hdr.g::before { background: var(--grn); }
.sec-hdr.p::before { background: var(--pur); }

/* ── CSP refactor (v2.17.9): row-hover backgrounds — replace inline onmouseover/onmouseout ── */
.hover-bg2:hover { background: var(--bg2); }
.hover-bg4:hover { background: var(--bg4); }

/* ── TOAST ── */
.toast { position: fixed; bottom: 20px; right: 20px; background: var(--bg3); border: 1px solid var(--brd2); border-radius: 8px; padding: 11px 16px; font-size: 12px; z-index: 1000; transform: translateY(60px); opacity: 0; transition: all .3s; display: flex; align-items: center; gap: 8px; }
.toast.show { transform: translateY(0); opacity: 1; }
.toast.s { border-color: rgba(0,232,122,.4); color: var(--grn); }
.toast.e { border-color: rgba(255,69,102,.4); color: var(--red); }

/* ── MISC ── */
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.empty { text-align: center; padding: 48px 20px; color: var(--txt3); }
.empty-ic { font-size: 36px; margin-bottom: 10px; opacity: .3; }
.empty h3 { color: var(--txt2); font-size: 14px; margin-bottom: 4px; }

/* v2.12.0: diagnostic output containers in the Diagnostics tab.
   Each diagnostic button renders results into one of these. Compact code-style
   formatting with color cues for verdict status. */
.diag-out {
  padding: 12px 14px;
  background: var(--bg3);
  border: 1px solid var(--brd);
  border-radius: 6px;
  font-family: var(--fm);
  font-size: 11px;
  line-height: 1.6;
  margin-top: 4px;
}
.diag-out.diag-ok { background: rgba(0, 232, 122, 0.05); border-color: var(--grn); }
.diag-out.diag-warn { background: rgba(255, 209, 102, 0.05); border-color: var(--gold); }
.diag-out.diag-err { background: rgba(239, 68, 68, 0.05); border-color: var(--red); }
.diag-out h4 { font-size: 12px; margin-bottom: 6px; font-family: var(--fb); }
.diag-out .diag-stat { display: flex; gap: 8px; font-family: var(--fm); font-size: 11px; }
.diag-out .diag-stat-key { color: var(--txt3); }
.diag-out .diag-stat-val { color: var(--txt1); font-weight: 600; }
.diag-out table { width: 100%; margin-top: 8px; font-size: 10px; }
.diag-out th, .diag-out td { padding: 4px 6px; text-align: left; border-bottom: 1px solid var(--brd); }
.diag-out th { color: var(--txt2); font-weight: 600; font-family: var(--fb); }
.gap { margin-bottom: 18px; }
details summary { cursor: pointer; user-select: none; font-size: 11px; color: var(--txt3); padding: 6px 0; list-style: none; }
details summary::before { content: '▸ '; font-size: 10px; }
details[open] summary::before { content: '▾ '; }
/* v2.21.39: larger, visible scrollbars (Sam) — bigger track + a teal thumb that
   reads against the dark bg. Applies everywhere; Firefox via scrollbar-* below. */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 7px; }
::-webkit-scrollbar-thumb { background: var(--teal); border-radius: 7px; border: 3px solid var(--bg); background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--teal2, var(--teal)); border: 2px solid var(--bg); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
* { scrollbar-width: auto; scrollbar-color: var(--teal) rgba(255,255,255,0.05); }
/* v2.21.42 (#2): hover popup of top-5 scan candidates over the review scan photo */
/* v2.21.43: open the popup OVERLAPPING the image (left:78 < 84px image) so there's NO dead gap for
   the cursor to cross — fixes "popup disappears / hard to reach". Cap to the viewport so it stays
   within the window; it scrolls if tall. */
.scan-scanwrap .scan-cand-pop { display: none; position: absolute; top: 0; left: 78px; z-index: 30; width: 320px; max-width: min(340px, 84vw); max-height: 60vh; overflow: auto; background: var(--bg2); border: 1px solid var(--brd2); border-radius: 8px; padding: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.55); }
.scan-scanwrap:hover .scan-cand-pop { display: block; }
textarea.si { resize: vertical; min-height: 80px; }
/* v2.21.43: Import-data modal — roomier, grouped source tiles (was a cramped 720px box) */
.imp-grp { font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--txt3); margin: 16px 0 8px; }
.imp-grp:first-child { margin-top: 0; }
.imp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 10px; }
.imp-tile { text-align: left; padding: 12px 14px; border: 1px solid var(--brd2); border-radius: 10px; background: var(--bg1); cursor: pointer; transition: border-color .12s, background .12s; display: flex; flex-direction: column; gap: 3px; }
.imp-tile:hover { border-color: var(--teal); background: var(--bg2); }
.imp-tile.on { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }
.imp-tile b { font-size: 13px; }
.imp-tile .d { font-size: 11px; color: var(--txt3); line-height: 1.3; }
.imp-opt { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--txt2); cursor: pointer; padding: 4px 0; }
.imp-opt input { margin-top: 2px; flex: 0 0 auto; }
input[type=checkbox] { accent-color: var(--teal); }

/* ═══ Vending (card-show) module — mobile-first. v2.17.39 ═══ */
.vend-dash { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.vend-tile { background: var(--bg2); border: 1px solid var(--brd); border-radius: 8px; padding: 12px; }
.vend-tile-l { font-size: 10px; color: var(--txt3); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.vend-tile-v { font-size: 20px; font-weight: 600; }
.vend-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.vend-exports { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.vend-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vend-result { display: flex; gap: 10px; align-items: center; padding: 9px 6px; border-bottom: 1px solid var(--brd); cursor: pointer; }
.vend-result-body { display: flex; flex-direction: column; gap: 2px; }
.vend-card { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--bg2); border: 1px solid var(--brd); border-radius: 8px; padding: 12px; margin-bottom: 8px; }
.vend-card.vend-sold { opacity: 0.6; }
.vend-card-main { min-width: 0; flex: 1; }
.vend-card-title { font-size: 13px; font-weight: 500; color: var(--txt1); overflow: hidden; text-overflow: ellipsis; }
.vend-card-meta { font-size: 11px; color: var(--txt3); font-family: var(--fm); margin-top: 2px; }
.vend-children { font-size: 10px; color: var(--txt3); margin-top: 3px; }
.vend-card-actions { display: flex; gap: 6px; flex-shrink: 0; }
.vend-event-card { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--bg2); border: 1px solid var(--brd); border-radius: 8px; padding: 14px; margin-bottom: 8px; cursor: pointer; }
.vend-event-card:hover { border-color: var(--teal); }

/* Mobile: stack dashboard tiles 2-up, make Sold/Trade tap targets big */
@media (max-width: 720px) {
  .vend-dash { grid-template-columns: repeat(2, 1fr); }
  .vend-actions .btn, .vend-exports .btn { flex: 1 1 44%; justify-content: center; }
  .vend-card-actions .btn { padding: 9px 14px; font-size: 13px; }
  .vend-filters .si { flex: 1 1 100%; width: 100% !important; }
}

/* ═══ What's New home (v2.17.41) ═══ */
.wn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.wn-box { background: var(--bg2); border: 1px solid var(--brd); border-radius: 8px; padding: 16px; }
.wn-box-h { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.wn-box-body { font-size: 12px; color: var(--txt2); line-height: 1.6; }
@media (max-width: 900px) { .wn-grid { grid-template-columns: 1fr; } }

/* v2.19.11: global eBay-op lock visual cue. While any eBay API op runs, dim + disable
   every push/sync/list trigger. The JS mutex in the dispatcher is the real guard; this
   just makes the blocked state obvious (pointer-events:none is belt-and-suspenders). */
body.ebay-op-busy [data-act="syncAllFromEbay"],
body.ebay-op-busy [data-act="syncOrdersNow"],
body.ebay-op-busy [data-act="syncFinances"],
body.ebay-op-busy [data-act="pushApprovedToEbay"],
body.ebay-op-busy [data-act="endPendingChildren"],
body.ebay-op-busy [data-act="approveManualCombine"],
body.ebay-op-busy [data-act="listAllImports"],
body.ebay-op-busy [data-act="listSelectedImports"],
body.ebay-op-busy [data-act="listSingleImport"],
body.ebay-op-busy [data-act="listSelectedPreCombines"] {
  opacity: 0.45 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* v2.19.40: import-stepper "click me" pulse on the Push button (combine step done → push). */
@keyframes ll-strobe-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.0); background: var(--grn, #22c55e); }
  50%      { box-shadow: 0 0 14px 4px rgba(34,197,94,0.85); background: #16a34a; }
}
.ll-strobe {
  animation: ll-strobe-green 1s ease-in-out infinite;
  color: #fff !important;
  border-color: var(--grn, #22c55e) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   #48 RESPONSIVE PASS (2026-06-18) — laptop / tablet / phone usability.
   PURELY ADDITIVE: every rule is inside a max-width media query, so the
   desktop layout (above each breakpoint) is byte-for-byte unchanged.
   Builds on the existing breakpoints (1024 widget-grid, 900 sidebar+hamburger,
   768 title-expand, 720 vending). No DOM/class/handler changes.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Make EVERY data table survive narrow widths ──
   .tw already scrolls (overflow-x:auto) and most big tables live in .tw or an
   explicit overflow-x:auto inner div. This is a belt-and-suspenders net: any
   bare <table> sitting directly in a card scrolls horizontally instead of
   forcing the page wide. -webkit-overflow-scrolling gives momentum scroll on
   iOS. Only applies at/below tablet width so desktop tables are untouched. */
@media (max-width: 1024px) {
  .tw, .cw { -webkit-overflow-scrolling: touch; }
  /* a card whose direct child is a wide table: let the card scroll it */
  .cw > table, .tw > table { min-width: max-content; }
  /* explicit inner scroll wrappers (overflow-x:auto divs) keep momentum too */
  [style*="overflow-x:auto"], [style*="overflow-x: auto"] { -webkit-overflow-scrolling: touch; }
}

/* ── TABLET (≤900px): tighten main padding once the sidebar is off-canvas,
   stack the two-column form/import grids so they don't overflow. ── */
@media (max-width: 900px) {
  .main { padding: 18px 14px 18px 56px; }   /* leave room for the hamburger (left:~12px) */
  .ph { margin-bottom: 16px; }
  /* two-column layouts → single column so inputs/cards never overflow */
  .imp-grid, .two-col { grid-template-columns: 1fr; }
  .imp-tiles { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

/* ── PHONE (≤640px): comfortable tap targets, stacked grids, slimmer chrome ── */
@media (max-width: 640px) {
  .main { padding: 14px 10px 14px 50px; }
  .pt { font-size: 18px !important; }

  /* Tap targets — eBay-seller often works one-handed on a phone.
     min-height ~40px without changing the visual style on desktop. */
  .btn { min-height: 40px; padding: 9px 14px; }
  .si  { min-height: 40px; }
  /* inline-edit cells / small selects in tables stay compact (they're not .btn/.si) */

  /* KPI tiles: 2-up on a phone instead of demanding 160px each (which forces
     1-up + lots of scroll). 2 columns reads far better at a glance. */
  .kg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
  .ll-kpi-v { font-size: 22px; }   /* widget KPI tiles shrink to fit 2-up */

  /* Stacked form rows + 2-col grids inside modals */
  .fg-row { grid-template-columns: 1fr; }

  /* Modal: less padding, fill more of the screen on a phone */
  .modal-bg { padding: 10px; }
  .modal { padding: 18px; max-height: 92vh; }
  .modal h2 { font-size: 16px; }

  /* Combine/section tabs + filter rows wrap with a bit more breathing room */
  .ctabs { gap: 6px; }

  /* Charts: a touch shorter so a phone screen isn't all chart */
  .bc { height: 120px; }
}

/* ── VERY NARROW (≤400px): drop KPI tiles to 1-up so values aren't squeezed ── */
@media (max-width: 400px) {
  .kg { grid-template-columns: 1fr; }
  .imp-tiles { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   v2.21.176 — HOLOGRAPHIC CARD (foil display). For matched foil / reverse-holo /
   pattern cards that have no distinct foil photo: render the real base photo with an
   interactive holographic sheen so it reads like the physical foil. Pointer-tracked
   (--mx/--my = cursor %, --rx/--ry = tilt, --o = sheen opacity) wired in JS via
   addEventListener (strict-CSP safe — no inline handlers). Effect is pure CSS
   gradients over the real image; the card image itself is never altered.
   ══════════════════════════════════════════════════════════════════════════════ */
.holo-stage { perspective: 900px; display: flex; align-items: center; justify-content: center; }
.holo-card {
  --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg; --o: 0;
  position: relative; border-radius: 12px; overflow: hidden;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .15s ease-out, box-shadow .2s ease-out;
  box-shadow: 0 10px 30px rgba(0,0,0,.55);
  cursor: grab; touch-action: none; isolation: isolate;
  will-change: transform;
}
.holo-card.is-active { transition: none; box-shadow: 0 18px 50px rgba(0,0,0,.6), 0 0 26px rgba(120,180,255,calc(.22 * var(--o))); }
.holo-card__img { display: block; max-width: 90vw; max-height: 80vh; border-radius: 12px; background: var(--bg2,#1a1a1a); }
/* foil sheen — rainbow band that slides with the cursor */
.holo-card__foil {
  position: absolute; inset: 0; border-radius: 12px; pointer-events: none;
  opacity: calc(.55 * var(--o));
  mix-blend-mode: color-dodge;
  background:
    repeating-linear-gradient( 110deg,
      hsla(0,100%,70%,.5) 0%, hsla(50,100%,70%,.5) 8%, hsla(120,100%,70%,.5) 16%,
      hsla(200,100%,70%,.5) 24%, hsla(280,100%,70%,.5) 32%, hsla(330,100%,70%,.5) 40%, hsla(0,100%,70%,.5) 48% );
  background-size: 220% 220%;
  background-position: calc(var(--mx) * 1.4) calc(var(--my) * 1.4);
  filter: brightness(1.05) contrast(1.4) saturate(1.5);
}
/* glare — bright spot that tracks the cursor */
.holo-card__glare {
  position: absolute; inset: 0; border-radius: 12px; pointer-events: none;
  opacity: calc(.5 * var(--o));
  mix-blend-mode: overlay;
  background: radial-gradient( circle at var(--mx) var(--my),
    rgba(255,255,255,.8) 0%, rgba(255,255,255,.25) 18%, rgba(255,255,255,0) 45% );
}
/* reverse-holo: finer, sparkly, more uniform speckle (less rainbow banding) */
.holo-card[data-foil="reverse"] .holo-card__foil {
  background:
    repeating-linear-gradient( 125deg, hsla(190,90%,80%,.45) 0%, hsla(280,90%,80%,.45) 10%, hsla(40,90%,80%,.45) 20%, hsla(190,90%,80%,.45) 30% ),
    radial-gradient( circle at var(--mx) var(--my), rgba(255,255,255,.35), rgba(255,255,255,0) 35% );
  background-size: 180% 180%, 100% 100%;
  background-position: calc(var(--mx) * 1.2) calc(var(--my) * 1.2), 0 0;
  filter: brightness(1.08) contrast(1.2) saturate(1.3);
}
/* pattern (Poke Ball / Master Ball): stronger metallic, tighter bands */
.holo-card[data-foil="pattern"] .holo-card__foil {
  background-size: 160% 160%;
  filter: brightness(1.1) contrast(1.7) saturate(1.7);
}
.holo-hint { color: #cbd5e1; font-size: 11px; text-align: center; margin-top: 9px; opacity: .8; letter-spacing: .02em; }
@media (prefers-reduced-motion: reduce) {
  .holo-card { transition: none; }
}