/* BinderWorth visual polish · pass 1 · 2026-11-05
   Shared finish for the collector app. Keeps the signed-off binder Home,
   camera geometry, tray persistence and all functional behaviour untouched. */
:root {
  --bw-finish-line: rgba(196,217,212,.17);
  --bw-finish-line-strong: rgba(94,211,190,.4);
  --bw-finish-amber: #f1ba60;
  --bw-finish-mint: #8ee8cf;
  --bw-finish-text: #f2f5f1;
  --bw-finish-muted: #b3c1c1;
  --bw-finish-ease: cubic-bezier(.22,.72,.24,1);
}
html { -webkit-tap-highlight-color: transparent; }
body { text-rendering: optimizeLegibility; }
button, input, select, textarea { accent-color: #52cbb7; }
button:disabled { cursor: not-allowed; }
:where(button, a, input, select, textarea, summary, [role="button"], [role="tab"]):focus-visible {
  outline: 2px solid var(--bw-finish-mint);
  outline-offset: 3px;
}
:where(.view, .modal-frame) :where(h2,h3) {
  text-wrap: balance;
}
:where(.view, .modal-frame) :where(p,small) { overflow-wrap: anywhere; }

/* Shared page surfaces and a consistent hierarchy, without flattening heroes. */
:is(#collectionView,#setsView,#searchView,#achievementsView,#challengesView)
  :is(.panel,.set-stats-grid > article,.wanted-summary-grid > article) {
  border-color: var(--bw-finish-line);
  box-shadow: 0 12px 34px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.028);
}
:is(#collectionView,#setsView,#searchView,#achievementsView,#challengesView)
  :is(.panel-heading h3,.pricing-intelligence-head h3) {
  line-height: 1.19;
  letter-spacing: -.025em;
  color: var(--bw-finish-text);
}
:is(#collectionView,#setsView,#searchView,#achievementsView,#challengesView)
  :is(.eyebrow,.pricing-intelligence-head .eyebrow) {
  letter-spacing: .12em;
}
:is(#collectionView,#setsView,#searchView,#achievementsView,#challengesView)
  :is(.button,.text-button) {
  transition: background-color .2s var(--bw-finish-ease),
              color .2s var(--bw-finish-ease),
              border-color .2s var(--bw-finish-ease),
              box-shadow .2s var(--bw-finish-ease),
              transform .18s var(--bw-finish-ease);
}
:is(#collectionView,#setsView,#searchView,#achievementsView,#challengesView)
  .button.primary:not(:disabled) {
  box-shadow: inset 0 1px rgba(255,255,255,.22),
              0 8px 20px rgba(182,120,29,.14);
}
:is(#collectionView,#setsView,#searchView,#achievementsView,#challengesView)
  .button.ghost:not(:disabled) {
  border-color: rgba(194,209,205,.25);
}

/* Home: improve feedback without changing the approved binder layout. */
#dashboardView :is(.bw-home-link-card,.bw24-primary-scan,.home-purpose-scan) {
  transition: border-color .2s var(--bw-finish-ease),
              box-shadow .2s var(--bw-finish-ease),
              filter .2s var(--bw-finish-ease),
              transform .18s var(--bw-finish-ease);
}
#dashboardView :is(.bw-home-link-card,.bw24-primary-scan,.home-purpose-scan):focus-visible {
  outline: 2px solid var(--bw-finish-amber) !important;
  outline-offset: 4px;
}
#dashboardView :is(.binder-hero-card-meta,.bw-module-heading) small {
  line-height: 1.4;
}

/* Collection: prices and filters should feel like deliberate controls. */
#collectionView .collection-toolbar,
#setsView .sets-toolbar,
#searchView .find-search-panel {
  border-color: rgba(188,204,198,.22);
  box-shadow: 0 8px 26px rgba(0,0,0,.14), inset 0 1px rgba(255,255,255,.03);
}
#collectionView .pricing-intelligence-grid > div {
  border-radius: 13px;
  border-color: rgba(175,210,205,.17);
  background-color: rgba(11,26,30,.22);
}
#collectionView .pricing-intelligence-grid strong {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.025em;
}
#collectionView .pricing-intelligence-grid :is(span,small) {
  line-height: 1.35;
}
#collectionView .collection-list :is(.collection-row,.collection-card) {
  transition: border-color .2s var(--bw-finish-ease),
              box-shadow .2s var(--bw-finish-ease),
              background-color .2s var(--bw-finish-ease);
}
#collectionView .collection-summary :is(strong,b) { font-variant-numeric: tabular-nums; }

/* Missing & Sets: differentiate stats, actionable items and progress. */
#setsView .set-stats-grid > article,
#setsView .wanted-summary-grid > article {
  border-radius: 15px;
  background-image: linear-gradient(155deg,rgba(38,53,53,.22),rgba(12,19,22,.08));
}
#setsView .set-stats-grid > article strong,
#setsView .wanted-summary-grid > article strong {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
}
#setsView .workspace-tabs button {
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
#setsView :is(.set-progress-track,.monthly-progress-track) {
  box-shadow: inset 0 2px 5px rgba(0,0,0,.25);
}
#setsView .set-progress-track > i {
  background-image: linear-gradient(90deg,#279f94,#6be1c8);
  box-shadow: 0 0 12px rgba(71,208,182,.24);
}
#setsView :is(.set-card,.set-list-item,.wanted-card) {
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* Find: stronger search clarity, more tactile search paths. */
#searchView .find-path-card {
  transition: border-color .2s var(--bw-finish-ease),
              box-shadow .2s var(--bw-finish-ease),
              background-color .2s var(--bw-finish-ease),
              transform .18s var(--bw-finish-ease);
}
#searchView .quick-searches button {
  min-height: 34px;
  border: 1px solid rgba(179,208,200,.22);
  border-radius: 999px;
  transition: background-color .17s ease, border-color .17s ease, color .17s ease;
}
#searchView .quick-searches button:focus-visible { outline-offset: 2px; }
#searchView .find-results > :is(article,.card-result,.search-result) {
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* Achievements and challenges: make progress and rewards legible. */
#achievementsView :is(.achievements-stat-list strong,.monthly-progress-row strong) {
  font-variant-numeric: tabular-nums;
}
#achievementsView :is(.achievement-page-progress,.monthly-progress-track) {
  box-shadow: inset 0 2px 5px rgba(0,0,0,.27);
}
#achievementsView :is(.achievement-card,.badge-card) {
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
#challengesView :is(.challenge-directory-panel,.challenge-directory-detail) {
  border-color: rgba(165,210,201,.2);
}

/* Scanner: only review/confirmation UI. Live camera framing is locked. */
#scanView .scan-result-panel {
  border-color: rgba(117,223,198,.24);
}
#scanView .pokeum-card-option {
  transition: border-color .2s ease, box-shadow .2s ease, transform .16s ease;
}
#scanView .service-pill.ready {
  border: 1px solid rgba(82,216,185,.36);
  background: rgba(41,128,111,.16);
  color: #a4f5d9;
}
.bw-tray-dialog .bw-tray-row {
  border-color: rgba(139,204,197,.27);
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 8px 24px rgba(0,0,0,.08);
}
.bw-tray-dialog .bw-tray-selectors select {
  background: #10262b;
  border-color: rgba(134,216,199,.37);
}
.bw-tray-dialog .bw-tray-selectors select:focus-visible {
  outline: 2px solid var(--bw-finish-mint);
  outline-offset: 1px;
}
.bw-tray-dialog .bw-tray-commit:not(:disabled) {
  background: linear-gradient(160deg,#9af3d4,#55cfaf);
  box-shadow: 0 8px 22px rgba(40,204,159,.19), inset 0 1px rgba(255,255,255,.42);
}

/* Account, settings, details and confirmation dialogs. */
.modal[open] .modal-frame {
  box-shadow: 0 28px 75px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.035);
}
.modal :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea):focus-visible {
  outline: 2px solid var(--bw-finish-mint);
  outline-offset: 1px;
}
.modal :is(.button,.text-button):not(:disabled) { transition: filter .2s ease, transform .18s ease; }

/* Clearly interactive on desktop; no hover-only UI on touch screens. */
@media(hover:hover) and (pointer:fine) {
  #dashboardView :is(.bw-home-link-card,.bw24-primary-scan,.home-purpose-scan):hover { filter: brightness(1.045); }
  #collectionView .collection-list :is(.collection-row,.collection-card):hover,
  #setsView :is(.set-card,.set-list-item,.wanted-card):hover,
  #searchView .find-results > :is(article,.card-result,.search-result):hover,
  #achievementsView :is(.achievement-card,.badge-card):hover {
    border-color: var(--bw-finish-line-strong);
  }
  #searchView .find-path-card:hover {
    border-color: rgba(111,226,200,.53);
    box-shadow: 0 12px 25px rgba(0,0,0,.18);
  }
  #searchView .quick-searches button:hover {
    border-color: rgba(115,226,196,.55);
    background: rgba(40,110,99,.19);
  }
  .bw-tray-dialog .bw-tray-commit:not(:disabled):hover { filter: brightness(1.06); }
}
@media(max-width:780px) {
  /* Preserve locked bottom-nav/immersive-camera dimensions and touch geometry. */
  #searchView .quick-searches button { min-height: 38px; padding-inline: 11px; }
  :is(#collectionView,#setsView,#searchView) :is(.filter-field input,.search-box input) {
    min-width: 0;
  }
  #collectionView .pricing-intelligence-grid > div strong { line-height: 1.1; }
  #setsView :is(.set-stats-grid,.wanted-summary-grid) strong { line-height: 1.14; }
  #achievementsView .achievements-stat-list strong { line-height: 1.15; }
}
@media(prefers-reduced-motion:reduce) {
  #dashboardView :is(.bw-home-link-card,.bw24-primary-scan,.home-purpose-scan),
  :is(#collectionView,#setsView,#searchView,#achievementsView,#challengesView) :is(.button,.text-button),
  #searchView .find-path-card,
  #scanView .pokeum-card-option,
  .bw-tray-dialog .bw-tray-row {
    transition: none !important;
  }
}


/* Home refinement · the real 32-slot collection progress is available in
   the DOM already. The older status-strip styles were hiding it. Make it
   an understated, truthful meter without expanding Home into a dashboard. */
html body #dashboardView .bw-binder-summary .bw-pocket-sheet {
  display: block !important;
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 9px 0 1px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body #dashboardView .bw-binder-summary .bw-pocket-sheet .binder-slot-grid {
  display: grid !important;
  grid-template-columns: repeat(32,minmax(0,1fr)) !important;
  grid-template-rows: 7px !important;
  grid-auto-rows: 7px !important;
  gap: 3px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 7px !important;
  height: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
html body #dashboardView .bw-binder-summary .binder-slot-grid > .bw-concept-slot {
  display: block !important;
  position: relative !important;
  inset: auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 7px !important;
  min-height: 7px !important;
  max-height: 7px !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(160,183,176,.12) !important;
  border-radius: 2px !important;
  background: #2b3432 !important;
  box-shadow: none !important;
  transform: none !important;
}
html body #dashboardView .bw-binder-summary .binder-slot-grid > .bw-concept-slot.owned {
  border-color: #67dac7 !important;
  background: linear-gradient(180deg,#70e2cd,#30b4a7) !important;
  box-shadow: 0 0 5px rgba(72,213,189,.15) !important;
}
html body #dashboardView .bw-binder-summary .binder-slot-grid > .bw-concept-slot.partial {
  border-color: rgba(91,204,186,.65) !important;
  background: linear-gradient(90deg,#50cbbb 0 50%,#2b3432 51% 100%) !important;
}
html body #dashboardView .bw-binder-summary .binder-slot-grid > .bw-concept-slot > i {
  display: none !important;
}
html body #dashboardView .bw-binder-summary {
  row-gap: 1px !important;
}
html body #dashboardView .bw-binder-summary .binder-hero-card-meta {
  min-width: 0 !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  column-gap: 12px !important;
}
html body #dashboardView .bw-binder-summary .binder-hero-card-meta strong {
  min-width: 0 !important;
  line-height: 1.38 !important;
}
html body #dashboardView .bw-binder-summary .binder-hero-card-meta span {
  line-height: 1.38 !important;
}
@media(max-width:420px) {
  html body #dashboardView .bw-binder-summary .binder-hero-card-meta {
    grid-template-columns: 1fr !important;
    row-gap: 2px !important;
    justify-items: start !important;
  }
  html body #dashboardView .bw-binder-summary .binder-hero-card-meta span {
    text-align: left !important;
  }
  html body #dashboardView .bw-binder-summary .bw-pocket-sheet .binder-slot-grid {
    gap: 2px !important;
  }
}


/* Home mobile finishing pass · align the last card shelf with the footer.
   The fixed nav already has its own page reserve, so Home needs no second
   empty band after Recently Scanned. Keep locked tab positions untouched. */
@media (max-width:780px) {
  html body:has(#dashboardView.active) #dashboardView {
    padding-bottom: 12px !important;
    margin-bottom: 0 !important;
  }
  html body:has(#dashboardView.active) .site-footer {
    margin-top: 18px !important;
    /* The 18px gap remains between cards and footer. Reserve clearance only
       after the final legal link so the fixed dock cannot cover footer text. */
    padding: 17px 2px calc(112px + env(safe-area-inset-bottom, 0px)) !important;
    opacity: 1 !important;
    color: #9eaaa9 !important;
    font-size: 10.5px !important;
    line-height: 1.55 !important;
    gap: 9px !important;
  }
  html body:has(#dashboardView.active) .site-footer :is(strong, a, button) {
    text-underline-offset: 2px;
  }
  html body:has(#dashboardView.active) .site-footer strong {
    color: #c1c9c6;
    font-weight: 750;
  }
  /* Keep third card visibly peeked to communicate horizontal scrolling. */
  html body #dashboardView.active > .home-recent-panel .panel-heading {
    align-items: baseline !important;
    gap: 10px !important;
  }
  html body #dashboardView.active > .home-recent-panel .panel-heading h3 {
    line-height: 1.1 !important;
  }
  html body #dashboardView.active #recentCollection .recent-row {
    border-color: rgba(172,197,191,.22) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.025) !important;
  }
  html body #dashboardView.active #recentCollection .recent-row > span:first-of-type strong {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }
}

/* Collection finish · surface the physical binder sooner, without hiding data.
   The market-movers content remains managed by the existing app.js renderer;
   <details> is a native accessible disclosure, not a new JS state. */
#collectionView .bw-pricing-movers-details {
  margin: 11px 0 0;
  border: 1px solid rgba(123,199,182,.22);
  border-radius: 12px;
  background: rgba(12,29,32,.5);
  overflow: hidden;
}
#collectionView .bw-pricing-movers-details:has(#collectionPricingMovers:empty) {
  display: none;
}
#collectionView .bw-pricing-movers-details summary {
  min-height: 45px;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  color: #d3eae5;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
  user-select: none;
}
#collectionView .bw-pricing-movers-details summary::-webkit-details-marker { display:none; }
#collectionView .bw-pricing-movers-details summary small {
  margin-left: auto;
  color: #88bcb1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}
#collectionView .bw-pricing-movers-details summary::after {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-left: 3px;
  border-right: 2px solid #88d9c8;
  border-bottom: 2px solid #88d9c8;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s ease;
}
#collectionView .bw-pricing-movers-details[open] summary::after {
  transform: rotate(225deg) translateY(-1px);
}
#collectionView .bw-pricing-movers-details[open] summary {
  border-bottom: 1px solid rgba(125,197,181,.14);
}
#collectionView .bw-pricing-movers-details .pricing-movers {
  margin: 0;
  padding: 10px;
}
#collectionView .bw-pricing-movers-details .pricing-movers-head {
  display: none;
}
#collectionView .bw-pricing-movers-details .pricing-movers-list button {
  min-height: 44px;
}

/* Binder contents are the focal point: improve outlines, labels, arrows
   and horizontal set tabs, while retaining the 3-by-3 physical pocket grid. */
#collectionView .collection-open-binder {
  border-color: rgba(234,177,77,.38) !important;
  box-shadow: 0 16px 36px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.025);
}
#collectionView .collection-open-page {
  border-color: rgba(148,191,185,.2) !important;
}
#collectionView .collection-open-pocket {
  border-color: rgba(152,184,182,.22) !important;
  transition: border-color .18s ease, box-shadow .18s ease;
}
#collectionView .collection-open-pocket:focus-within {
  border-color: rgba(115,227,201,.65) !important;
}
#collectionView .collection-open-page-foot button:not(:disabled) {
  transition: border-color .18s ease, background-color .18s ease;
}
#collectionView .collection-open-page-foot button:not(:disabled):active {
  background: rgba(124,99,50,.23);
}
@media(hover:hover) and (pointer:fine) {
  #collectionView .collection-open-pocket:hover {
    border-color: rgba(117,211,188,.4) !important;
  }
  #collectionView .collection-open-page-foot button:not(:disabled):hover {
    border-color: rgba(240,191,100,.7);
  }
}
@media(max-width:780px) {
  /* Preserve mobile nav and binder card geometry; reduce dashboard heft. */
  html body #collectionView.active .pricing-intelligence-panel {
    padding: 18px 16px 15px !important;
    margin-bottom: 12px !important;
  }
  #collectionView .pricing-intelligence-head {
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  #collectionView .pricing-intelligence-head h3 {
    font-size: 1.02rem !important;
    line-height: 1.2 !important;
  }
  #collectionView .pricing-intelligence-head p:not(.eyebrow) {
    font-size: .74rem !important;
    line-height: 1.42 !important;
  }
  #collectionView .pricing-intelligence-state {
    padding: 5px 9px !important;
    font-size: .6rem !important;
  }
  #collectionView .collection-pricing-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 8px !important;
  }
  #collectionView .collection-pricing-grid > div {
    min-width: 0 !important;
    padding: 11px 10px !important;
    border-radius: 12px !important;
    gap: 6px !important;
  }
  #collectionView .collection-pricing-grid > div strong {
    font-size: clamp(1.12rem,5.1vw,1.4rem) !important;
    line-height: 1.14 !important;
    overflow-wrap: anywhere;
  }
  #collectionView .collection-pricing-grid > div > span {
    font-size: .6rem !important;
    letter-spacing: .04em !important;
  }
  #collectionView .collection-pricing-grid > div > small {
    font-size: .65rem !important;
    line-height: 1.35 !important;
  }
  #collectionView .pricing-intelligence-note {
    font-size: .63rem !important;
    line-height: 1.45 !important;
    margin-top: 9px !important;
  }
  #collectionView .bw-pricing-movers-details .pricing-movers-list {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }
  html body .app-shell .main-content #collectionView.active {
    /* Old binder styling reserves ~100px before the footer.
       The fixed bottom nav needs clearance AFTER footer content instead. */
    padding-bottom: 12px !important;
    margin-bottom: 0 !important;
  }
  html body:has(#collectionView.active) .site-footer {
    margin-top: 17px !important;
    padding: 17px 2px calc(106px + env(safe-area-inset-bottom,0px)) !important;
    color: #a4b0ae !important;
    font-size: 10.5px !important;
    line-height: 1.55 !important;
    opacity: 1 !important;
    gap: 9px !important;
  }
  html body:has(#collectionView.active) .site-footer strong {
    color: #c5cfcc;
  }
  #collectionView .collection-open-page-foot {
    gap: 7px !important;
  }
  #collectionView .collection-open-page-foot small {
    line-height: 1.4 !important;
  }
}
@media(prefers-reduced-motion:reduce) {
  #collectionView .bw-pricing-movers-details summary::after,
  #collectionView .collection-open-pocket,
  #collectionView .collection-open-page-foot button {
    transition:none !important;
  }
}

/* Collection set dividers: use meaningful codes while official artwork loads. */
#collectionView .collection-set-divider > i {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(10px,2.3vw,12px) !important;
  letter-spacing: .06em !important;
  color: #e2b568 !important;
}


/* Collection-first mobile experience: a native, accessible market disclosure.
   Keep existing history, valuation maths and market-mover data untouched. */
#collectionView .bw-collection-pricing-disclosure {
  display: block;
  min-width: 0;
  margin: 0 0 14px;
  border: 1px solid rgba(106,201,183,.28);
  border-left: 3px solid #56d5bd;
  border-radius: 15px;
  background: linear-gradient(140deg,rgba(20,38,42,.97),rgba(10,21,28,.97));
  box-shadow: 0 12px 28px rgba(0,0,0,.17);
  overflow: clip;
}
#collectionView .bw-collection-pricing-summary {
  display:flex;
  align-items:center;
  gap: 12px;
  min-height: 70px;
  padding: 13px 15px;
  cursor:pointer;
  list-style:none;
  user-select:none;
}
#collectionView .bw-collection-pricing-summary::-webkit-details-marker {display:none;}
#collectionView .bw-pricing-summary-heading,
#collectionView .bw-pricing-summary-value {
  display:grid;
  gap:3px;
  min-width:0;
}
#collectionView .bw-pricing-summary-heading {
  flex:1 1 auto;
}
#collectionView .bw-pricing-summary-heading small {
  color: #e7b15a;
  font-weight:850;
  font-size: 9px;
  letter-spacing:.115em;
}
#collectionView .bw-pricing-summary-heading strong {
  color: #f0f2ee;
  font-size: 15px;
  font-weight:850;
  line-height:1.25;
}
#collectionView .bw-pricing-summary-value {
  flex:0 0 auto;
  justify-items:end;
  text-align:right;
}
#collectionView .bw-pricing-summary-value strong {
  font-size: clamp(18px,4.5vw,22px);
  letter-spacing:-.04em;
  font-weight:900;
  font-variant-numeric: tabular-nums;
  color:#f6f2e8;
  line-height:1.1;
}
#collectionView .bw-pricing-summary-value small {
  color:#8daaa5;
  font-size:10px;
  line-height:1.2;
}
#collectionView .bw-pricing-summary-chevron {
  flex:0 0 8px;
  width:8px;height:8px;
  margin-left:2px;
  border-right:2px solid #83dbc8;
  border-bottom:2px solid #83dbc8;
  transform:rotate(45deg);
  transition:transform .2s ease;
}
#collectionView .bw-collection-pricing-disclosure[open] .bw-pricing-summary-chevron {
  transform:rotate(225deg);
}
#collectionView .bw-collection-pricing-summary:focus-visible {
  outline:2px solid #8ce4d0;
  outline-offset:-4px;
  border-radius:13px;
}
#collectionView .bw-collection-pricing-disclosure > #collectionPricingPanel {
  margin:0!important;
  border:0!important;
  border-top:1px solid rgba(106,201,183,.16)!important;
  border-radius:0!important;
  box-shadow:none!important;
}
#collectionView .bw-collection-pricing-disclosure > #collectionPricingPanel::before {
  content:none!important;
  display:none!important;
}
@media(max-width:780px) {
  html body #collectionView.active .bw-collection-pricing-disclosure {
    margin-bottom:12px!important;
  }
  html body #collectionView.active .bw-collection-pricing-summary {
    min-height:70px!important;
    padding:11px 12px!important;
  }
  html body #collectionView.active .bw-collection-pricing-disclosure[open] > #collectionPricingPanel {
    padding:15px 12px 13px!important;
  }
}
@media(max-width:360px) {
  #collectionView .bw-collection-pricing-summary {
    gap:8px;
  }
  #collectionView .bw-pricing-summary-heading strong {font-size:13px;}
  #collectionView .bw-pricing-summary-value strong {font-size:17px;}
}
@media(prefers-reduced-motion:reduce) {
  #collectionView .bw-pricing-summary-chevron {transition:none!important;}
}


/* BinderWorth physical nine-pocket binder sheet turn. A temporary DOM copy
   flips over the already-updated page. No card data or layout dimensions change. */
#collectionView .bw-page-turn-stage {
  position:absolute;
  z-index:22;
  isolation:isolate;
  pointer-events:none;
  perspective:1000px;
  perspective-origin:50% 50%;
  overflow:visible;
}
#collectionView .bw-page-turn-sheet {
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  will-change:transform,opacity;
  pointer-events:none;
}
#collectionView .bw-page-turn-stage[data-direction="next"] .bw-page-turn-sheet {
  transform-origin:0% 50%;
}
#collectionView .bw-page-turn-stage[data-direction="previous"] .bw-page-turn-sheet {
  transform-origin:100% 50%;
}
#collectionView .bw-page-turn-stage .bw-page-turn-front,
#collectionView .bw-page-turn-stage .bw-page-turn-back {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  box-sizing:border-box;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  pointer-events:none;
}
#collectionView .bw-page-turn-stage .bw-page-turn-front {
  transform:rotateY(0deg);
  overflow:hidden;
  box-shadow:0 8px 28px rgba(0,0,0,.35), inset 0 0 18px rgba(177,225,219,.07);
}
#collectionView .bw-page-turn-stage .bw-page-turn-front::before {
  content:"";
  position:absolute;
  z-index:9;
  inset:0;
  pointer-events:none;
  background:linear-gradient(112deg,transparent 10%,rgba(190,247,235,.025) 36%,rgba(219,255,247,.17) 52%,rgba(157,238,219,.015) 69%,transparent 90%);
  mix-blend-mode:screen;
}
#collectionView .bw-page-turn-stage .bw-page-turn-back {
  transform:rotateY(180deg);
  border:1px solid rgba(175,232,222,.34);
  border-radius:5px;
  overflow:hidden;
  background:linear-gradient(120deg,rgba(184,234,226,.20),rgba(25,46,51,.71) 42%,rgba(134,203,194,.21) 95%),#101c22;
  box-shadow:inset 0 1px 15px rgba(215,250,241,.20),0 12px 35px rgba(0,0,0,.35);
}
#collectionView .bw-page-turn-stage .bw-page-turn-back::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(239,255,249,.13),transparent 29%,transparent 69%,rgba(241,255,252,.11));
}
#collectionView .bw-page-turn-back-pockets {
  position:absolute;
  inset:12% 5% 12%;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(3,minmax(0,1fr));
  gap:6px;
}
#collectionView .bw-page-turn-back-pockets i {
  border:1px solid rgba(219,245,239,.30);
  border-radius:4px;
  background:linear-gradient(140deg,rgba(255,255,255,.095),transparent 30%,rgba(255,255,255,.025));
  box-shadow:inset 0 2px 9px rgba(255,255,255,.045);
}
#collectionView .bw-page-turn-underlay {
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  border-radius:5px;
  background:linear-gradient(90deg,rgba(0,0,0,.44),rgba(0,0,0,.09) 40%,rgba(0,0,0,.32));
  animation:bw-page-reveal 650ms ease-out both;
}
#collectionView .bw-page-turn-stage[data-direction="previous"] .bw-page-turn-underlay {
  background:linear-gradient(270deg,rgba(0,0,0,.44),rgba(0,0,0,.09) 40%,rgba(0,0,0,.32));
}
@keyframes bw-page-reveal {
  0% { opacity:.8; }
  60% { opacity:.47; }
  100% { opacity:0; }
}
@media(prefers-reduced-motion:reduce) {
  #collectionView .bw-page-turn-stage { display:none!important; }
  #collectionView .bw-page-turn-underlay { animation:none!important; }
}


/* Individual card inspection — collector-first artwork detail. */
#cardModal .modal-image-wrap {
  position:relative!important;
  isolation:isolate;
}
#cardModal .bw-card-inspect-trigger {
  position:absolute;
  inset:0;
  z-index:4;
  padding:0;
  border:0;
  border-radius:inherit;
  background:transparent;
  cursor:zoom-in;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  transition:background-color .18s ease;
}
#cardModal .bw-card-inspect-trigger:disabled {display:none!important;}
#cardModal .bw-card-inspect-trigger:focus-visible {
  outline:2px solid #e9bd67;
  outline-offset:-3px;
}
#cardModal .bw-card-inspect-chip {
  margin:0 0 8px;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(5,13,15,.90);
  border:1px solid rgba(225,184,111,.38);
  color:#f0d3a0;
  font-size:10px;
  line-height:1.25;
  font-weight:850;
  letter-spacing:.035em;
  box-shadow:0 5px 12px rgba(0,0,0,.24);
}
#cardModal .bw-card-inspect-hint {
  margin:8px 0 0;
  color:#b7a987;
  font-size:10px;
  line-height:1.35;
}
#cardModal .modal-card-preview:has(#cardInspectTrigger:disabled) .bw-card-inspect-hint {
  display:none;
}
@media (hover:hover) and (pointer:fine) {
  #cardModal .bw-card-inspect-trigger:not(:disabled):hover {
    background:rgba(216,176,103,.065);
  }
  #cardModal .bw-card-inspect-trigger:not(:disabled):hover .bw-card-inspect-chip {
    border-color:rgba(240,196,122,.7);
  }
}
#cardModal[open] .modal-card-preview .modal-image-wrap {
  animation:bw-card-lift-in 290ms cubic-bezier(.16,.85,.26,1) both;
}
#cardModal #saveCardBtn:not(:disabled):active {
  transform:scale(.985);
  transition:transform .12s ease;
}
#collectionView button.collection-open-pocket.owned:active {
  transform:scale(.985) translateY(-1px)!important;
  transition:transform .12s ease;
}
@keyframes bw-card-lift-in {
  0% {opacity:.55;transform:translateY(13px) scale(.94) rotate(-2deg);}
  70% {opacity:1;transform:translateY(-2px) scale(1.015) rotate(.4deg);}
  100% {opacity:1;transform:translateY(0) scale(1) rotate(0deg);}
}
#cardInspectDialog.bw-card-inspect-dialog {
  box-sizing:border-box;
  position:fixed;
  inset:0;
  width:min(94vw,540px);
  max-width:94vw;
  max-height:calc(100dvh - 20px);
  max-height:calc(100vh - 20px);
  margin:auto;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(219,168,80,.35);
  border-radius:22px;
  background:linear-gradient(160deg,#172327 0%,#0a1418 60%,#101a1d 100%);
  color:#eee8dd;
  box-shadow:0 26px 90px rgba(0,0,0,.72), inset 0 1px rgba(255,255,255,.04);
}
#cardInspectDialog.bw-card-inspect-dialog::backdrop {
  background:rgba(1,6,9,.88);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
#cardInspectDialog .bw-card-inspect-shell {
  box-sizing:border-box;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  width:100%;
  max-height:calc(100dvh - 20px);
  max-height:calc(100vh - 20px);
  min-height:0;
}
#cardInspectDialog .bw-card-inspect-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 17px;
  border-bottom:1px solid rgba(221,184,112,.15);
  color:#dbaf68;
  font-size:10px;
  font-weight:850;
  letter-spacing:.11em;
}
#cardInspectDialog .bw-card-inspect-top i {
  display:inline-block;
  vertical-align:middle;
  height:7px;
  width:7px;
  margin-right:6px;
  border-radius:50%;
  background:#d8a958;
  box-shadow:0 0 11px rgba(217,168,83,.48);
}
#cardInspectDialog .bw-card-inspect-top b {opacity:.45;font-weight:700;}
#cardInspectDialog .bw-card-inspect-close {
  flex:0 0 38px;
  width:38px;
  height:38px;
  padding:0;
  border:1px solid rgba(220,184,126,.25);
  border-radius:12px;
  background:#101c20;
  color:#f1e9dc;
  font-size:25px;
  line-height:1;
  cursor:pointer;
}
#cardInspectDialog .bw-card-inspect-close:focus-visible {
  outline:2px solid #e3b66c;
  outline-offset:2px;
}
#cardInspectDialog .bw-card-inspect-stage {
  position:relative;
  display:grid;
  place-items:center;
  min-height:0;
  padding:16px 24px;
  overflow:auto;
  background:radial-gradient(ellipse at center,rgba(77,105,105,.27),transparent 72%);
}
#cardInspectDialog .bw-card-inspect-art {
  position:relative;
  max-width:100%;
  max-height:100%;
  border-radius:13px;
  overflow:hidden;
  box-shadow:0 16px 35px rgba(0,0,0,.52),0 0 0 1px rgba(255,255,255,.14);
  animation:bw-card-inspect-rise 380ms cubic-bezier(.17,.85,.27,1) both;
}
#cardInspectDialog .bw-card-inspect-art img {
  display:block;
  width:auto;
  max-width:100%;
  max-height:min(69dvh,690px);
  max-height:min(69vh,690px);
  object-fit:contain;
}
#cardInspectDialog .bw-card-inspect-art::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(122deg,rgba(230,251,244,.11) 0%,transparent 19%,transparent 67%,rgba(233,247,246,.09) 100%);
}
#cardInspectDialog .bw-card-inspect-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 20px 17px;
  border-top:1px solid rgba(215,174,100,.15);
  background:rgba(8,18,21,.90);
}
#cardInspectDialog .bw-card-inspect-footer div {min-width:0;}
#cardInspectDialog .bw-card-inspect-footer strong {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#f1e7d5;
  font-size:18px;
  font-weight:850;
}
#cardInspectDialog .bw-card-inspect-footer small {
  display:block;
  margin-top:4px;
  color:#a4aca7;
  font-size:11px;
  line-height:1.4;
}
#cardInspectDialog .bw-card-inspect-footer > span {
  flex:0 0 auto;
  color:#d7ad68;
  font-size:10px;
  font-weight:850;
  letter-spacing:.09em;
  text-transform:uppercase;
}
@keyframes bw-card-inspect-rise {
  from {opacity:.5;transform:translateY(18px) scale(.91) rotate(-3deg);}
  to {opacity:1;transform:translateY(0) scale(1) rotate(0);}
}
@media (max-width:460px) {
  #cardInspectDialog.bw-card-inspect-dialog {
    width:calc(100vw - 16px);
    max-width:calc(100vw - 16px);
    border-radius:17px;
  }
  #cardInspectDialog .bw-card-inspect-stage {padding:12px 18px;}
  #cardInspectDialog .bw-card-inspect-top {padding:11px 13px;}
  #cardInspectDialog .bw-card-inspect-footer {padding:12px 15px 14px;}
  #cardInspectDialog .bw-card-inspect-footer > span {display:none;}
  #cardInspectDialog .bw-card-inspect-footer strong {font-size:16px;}
}
@media (prefers-reduced-motion:reduce) {
  #cardModal[open] .modal-card-preview .modal-image-wrap,
  #cardInspectDialog .bw-card-inspect-art {animation:none!important;}
  #cardModal .bw-card-inspect-trigger {transition:none!important;}
  #cardModal #saveCardBtn:not(:disabled):active,
  #collectionView button.collection-open-pocket.owned:active {transform:none!important;}
}


/* Interactive artwork loupe: native pointer pinch, double-tap, pan, button zoom.
   Cropping is contained inside the card's existing preview bounds. */
#cardInspectDialog #cardInspectZoomSurface {
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  cursor:zoom-in;
  overscroll-behavior:contain;
}
#cardInspectDialog #cardInspectZoomSurface:focus-visible {
  outline:2px solid #dfb46d;
  outline-offset:3px;
}
#cardInspectDialog #cardInspectZoomSurface.is-zoomed {cursor:grab;}
#cardInspectDialog #cardInspectZoomSurface.is-dragging {cursor:grabbing;}
#cardInspectDialog #cardInspectZoomSurface img {
  transform-origin:50% 50%;
  -webkit-user-drag:none;
  user-select:none;
  -webkit-user-select:none;
  will-change:transform;
}
#cardInspectDialog #cardInspectZoomSurface.is-zoom-animated img {
  transition:transform .22s cubic-bezier(.2,.82,.18,1);
}
#cardInspectDialog .bw-card-inspect-zoom-toolbar {
  display:flex;
  gap:5px;
  align-items:center;
  flex:0 0 auto;
}
#cardInspectDialog .bw-card-inspect-zoom-toolbar button {
  display:grid;
  place-items:center;
  border:1px solid rgba(211,170,104,.33);
  border-radius:9px;
  background:rgba(24,39,41,.92);
  color:#f4d19a;
  height:32px;
  min-width:32px;
  padding:0 7px;
  font:800 18px/1 system-ui,sans-serif;
  cursor:pointer;
}
#cardInspectDialog .bw-card-inspect-zoom-toolbar button:nth-child(2) {
  font-size:11px;
  min-width:49px;
  font-variant-numeric:tabular-nums;
}
#cardInspectDialog .bw-card-inspect-zoom-toolbar button:disabled {
  opacity:.42;
  cursor:default;
}
#cardInspectDialog .bw-card-inspect-zoom-toolbar button:focus-visible {
  outline:2px solid #e0b36d;
  outline-offset:2px;
}
@media (max-width:460px) {
  #cardInspectDialog .bw-card-inspect-footer {gap:8px;}
  #cardInspectDialog .bw-card-inspect-footer strong {font-size:15px;}
  #cardInspectDialog .bw-card-inspect-zoom-toolbar button {
    height:30px;min-width:29px;padding:0 5px;
  }
  #cardInspectDialog .bw-card-inspect-zoom-toolbar button:nth-child(2) {min-width:46px;}
}
@media (prefers-reduced-motion:reduce) {
  #cardInspectDialog #cardInspectZoomSurface.is-zoom-animated img {transition:none!important;}
}