/* BinderWorth 3.38.1 — Responsive Desktop Pass
   Desktop-only layout expansion. Mobile <= 780px intentionally unchanged. */

@media (min-width: 781px) {
  :root { --bw-desktop-gutter: clamp(24px, 2.4vw, 48px); }

  /* Use the workspace next to the permanent sidebar instead of a phone-width centre column. */
  .main-content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: var(--bw-desktop-gutter) !important;
    padding-right: var(--bw-desktop-gutter) !important;
    padding-bottom: 40px !important;
  }

  .topbar {
    min-height: 96px;
    gap: 28px;
  }

  .topbar h1 { font-size: clamp(27px, 1.9vw, 34px); }
  .topbar-actions { flex-wrap: wrap; justify-content: flex-end; }

  /* A fixed sidebar already supplies desktop navigation. */
  .mobile-bottom-nav { display: none !important; }
  body { padding-bottom: 0 !important; }

  /* Dashboard / binder home should read as a desktop workspace, not an enlarged phone. */
  #dashboardView,
  #collectionView,
  #setsView,
  #searchView,
  #scanView,
  #achievementsView,
  #challengesView {
    width: 100%;
    max-width: none !important;
  }

  .bw24-scan-hero {
    width: 100%;
    max-width: none !important;
    min-height: 230px;
    padding-left: clamp(28px, 3vw, 54px) !important;
    padding-right: clamp(28px, 3vw, 54px) !important;
  }

  .bw24-hero-copy h2 { font-size: clamp(38px, 3.2vw, 58px); }
  .bw24-hero-copy p { font-size: clamp(14px, 1.05vw, 17px); }

  .bw-home-object {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .bw-binder-page {
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
  }

  .bw-page-module,
  .bw-binder-summary,
  .home-purpose-strip,
  .home-1c-utility-grid,
  .home-recent-panel,
  .home-actions,
  .home-snapshot-grid {
    max-width: none !important;
  }

  /* More useful desktop density without changing the mobile component design. */
  .home-1c-utility-grid,
  .bw-home-tools { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .home-actions { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

  .home-completion-list,
  .bw-set-list { width: 100%; }

  .card-results {
    grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)) !important;
    gap: clamp(16px, 1.5vw, 24px) !important;
  }

  /* Collection rows get enough room for names, set info and values. */
  .collection-row {
    grid-template-columns: 76px minmax(220px, 1.5fr) minmax(170px, .9fr) minmax(130px, .65fr) minmax(130px, .65fr) auto !important;
    gap: clamp(14px, 1.5vw, 24px) !important;
    padding: 15px 18px !important;
  }
  .collection-row img { width: 64px; height: 88px; }
  .collection-name strong { font-size: 15px; }

  /* Set detail becomes a genuine desktop workspace. */
  .set-modal {
    width: min(1440px, calc(100vw - 80px)) !important;
    max-width: 1440px !important;
    max-height: calc(100vh - 40px) !important;
  }
  .set-modal-frame {
    width: 100%;
    max-height: calc(100vh - 40px);
    overflow: auto;
    padding: clamp(24px, 2vw, 34px) !important;
  }
  .set-detail-hero {
    grid-template-columns: minmax(150px, 210px) minmax(0, 1fr) auto !important;
    gap: clamp(22px, 2vw, 36px) !important;
    align-items: center;
  }
  .set-logo-wrap { min-width: 0; }
  .set-logo-wrap img {
    width: 100%;
    max-width: 190px !important;
    max-height: 118px !important;
    object-fit: contain;
  }
  .set-detail-identity h2 { font-size: clamp(30px, 2.4vw, 42px) !important; }

  .set-card-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 15px !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .set-card-tile { min-width: 0; padding: 10px !important; }
  .set-card-image {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 245 / 337;
  }
  .set-card-image img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
  }
  .set-card-info strong { font-size: 12px !important; }
  .set-card-info small { font-size: 9px !important; }

  /* Never stretch broken/missing card artwork into a large desktop artefact. */
  .result-image img,
  .set-card-image img,
  .modal-image-wrap img,
  .find-card-art img {
    object-fit: contain !important;
  }
}

@media (min-width: 1180px) {
  .sidebar { width: 250px !important; }
  .app-shell { grid-template-columns: 250px minmax(0, 1fr) !important; }
  .set-card-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}

@media (min-width: 1550px) {
  .set-card-grid { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
  .card-results { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; }
}

/* BinderWorth 3.38.1 — Desktop Component Reconciliation
   Fixes desktop-only component rules exposed by the first live 3.38.0 pass. */
@media (min-width: 781px) {
  /* Some older mobile-shell rules use !important. Be unequivocal on desktop. */
  html body nav.mobile-bottom-nav,
  html body .mobile-bottom-nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: static !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* Chase spotlight: desktop cards should be useful cards, not giant empty sleeves. */
  .home-1c-chase-panel,
  .wanted-spotlight-panel,
  .bw-missing-module {
    min-height: 0 !important;
  }

  .home-1c-chase-list,
  .wanted-spotlight-list,
  .bw-chase-shelf {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(12px, 1.2vw, 18px) !important;
    align-items: stretch !important;
    overflow: visible !important;
  }

  .home-1c-chase-list .wanted-spotlight-card,
  .wanted-spotlight-list .wanted-spotlight-card,
  .bw-chase-pocket {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 172px !important;
    height: auto !important;
    aspect-ratio: auto !important;
    display: grid !important;
    grid-template-columns: 116px minmax(0, 1fr) 18px !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 12px !important;
    overflow: hidden !important;
  }

  .home-1c-chase-list .wanted-spotlight-image,
  .wanted-spotlight-list .wanted-spotlight-image,
  .bw-chase-pocket .bw-card-sleeve {
    width: 116px !important;
    height: 156px !important;
    min-width: 116px !important;
    min-height: 156px !important;
    max-width: 116px !important;
    max-height: 156px !important;
    aspect-ratio: 245 / 337 !important;
    align-self: center !important;
    justify-self: center !important;
    padding: 5px !important;
    border-radius: 10px !important;
  }

  .home-1c-chase-list .wanted-spotlight-image img,
  .wanted-spotlight-list .wanted-spotlight-image img,
  .bw-chase-pocket .bw-card-sleeve img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }

  .home-1c-chase-list .wanted-spotlight-card > span:nth-child(2),
  .wanted-spotlight-list .wanted-spotlight-card > span:nth-child(2),
  .bw-chase-pocket > span:nth-child(2) {
    min-width: 0 !important;
    align-self: center !important;
  }

  .home-1c-chase-list .wanted-spotlight-card strong,
  .wanted-spotlight-list .wanted-spotlight-card strong,
  .bw-chase-pocket strong {
    font-size: clamp(13px, .9vw, 16px) !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }

  .home-1c-chase-list .wanted-spotlight-card small,
  .wanted-spotlight-list .wanted-spotlight-card small,
  .bw-chase-pocket small {
    margin-top: 6px !important;
    font-size: clamp(9px, .66vw, 11px) !important;
    line-height: 1.45 !important;
    white-space: normal !important;
  }

  .home-1c-chase-list .wanted-spotlight-card > b,
  .wanted-spotlight-list .wanted-spotlight-card > b,
  .bw-chase-pocket > b {
    align-self: center !important;
    justify-self: end !important;
    font-size: 22px !important;
  }
}

@media (min-width: 781px) and (max-width: 1120px) {
  .home-1c-chase-list,
  .wanted-spotlight-list,
  .bw-chase-shelf {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* BinderWorth 3.38.2 — Desktop Views & Polish
   Desktop-only refinement. Mobile <= 780px remains unchanged. */
@media (min-width: 781px) {
  /* Home rhythm: slightly denser, more deliberate desktop modules. */
  #dashboardView .bw-page-module,
  #dashboardView .home-recent-panel,
  #dashboardView .home-1c-utility-grid {
    margin-top: 10px !important;
  }
  #dashboardView .bw-module-heading,
  #dashboardView .panel-heading {
    margin-bottom: 12px !important;
  }

  /* Chase preview: make the physical card the visual focus without returning
     to the oversized empty-sleeve behaviour fixed in 3.38.1. */
  .home-1c-chase-list .wanted-spotlight-card,
  .wanted-spotlight-list .wanted-spotlight-card,
  .bw-chase-pocket {
    min-height: 188px !important;
    grid-template-columns: 132px minmax(0,1fr) 18px !important;
    gap: 16px !important;
    padding: 12px 14px !important;
  }
  .home-1c-chase-list .wanted-spotlight-image,
  .wanted-spotlight-list .wanted-spotlight-image,
  .bw-chase-pocket .bw-card-sleeve {
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
    height: 178px !important;
    min-height: 178px !important;
    max-height: 178px !important;
  }

  /* Recently scanned should read as a desktop shelf, not tiny mobile cards. */
  #recentCollection.dashboard-achievement-scroll {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 12px !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  #recentCollection > * {
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }
  #recentCollection img {
    max-height: 170px !important;
    object-fit: contain !important;
  }

  /* Sets/Missing workspace: use horizontal room and keep controls compact. */
  #setsView .sets-hero {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    align-items: center !important;
    gap: 28px !important;
    padding: clamp(22px, 2vw, 32px) !important;
  }
  #setsView .sets-hero h2 { font-size: clamp(30px, 2.4vw, 42px) !important; }
  #setsView .sets-hero-actions { justify-content: flex-end !important; flex-wrap: wrap !important; }
  #setsView .sets-toolbar {
    display: grid !important;
    grid-template-columns: minmax(260px,1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
  }
  #setsView .sets-toolbar .filter-field { min-width: 0 !important; }
  #setsView .sets-toolbar select { min-width: 210px !important; }
  #setsView .set-list { gap: 12px !important; }
  #setsView .set-row {
    grid-template-columns: 150px minmax(0,1fr) auto !important;
    gap: 24px !important;
    padding: 17px 20px !important;
  }
  #setsView .set-row-logo { height: 70px !important; }
  #setsView .set-row-logo img { max-width: 130px !important; max-height: 56px !important; }
  #setsView .set-row-title strong { font-size: 16px !important; }

  /* Chase List overview and cards make better use of desktop width. */
  #wantedWorkspace .wanted-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 14px !important;
  }
  #wantedWorkspace .wanted-summary-grid article { min-height: 112px !important; }
  #wantedWorkspace .wanted-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 12px !important;
  }
  #wantedWorkspace .wanted-card,
  #wantedWorkspace .wanted-list-card {
    min-width: 0 !important;
    height: 100% !important;
  }
  #wantedWorkspace .chase-list-toolbar {
    grid-template-columns: minmax(280px,1fr) auto !important;
  }
  #wantedWorkspace .chase-smart-find-panel,
  #wantedWorkspace .chase-budget-panel,
  #wantedWorkspace .chase-trader-baskets-panel {
    padding: clamp(18px, 1.6vw, 26px) !important;
  }

  /* Find: wide two-path hero and a denser results grid. */
  #searchView .find-hero {
    padding: clamp(26px, 2.4vw, 38px) !important;
  }
  #searchView .find-hero-copy { max-width: 900px !important; }
  #searchView .find-path-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 14px !important;
  }
  #searchView .find-path-card { min-height: 126px !important; }
  #searchView .find-search-panel {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    align-items: center !important;
    gap: 16px !important;
  }
  #searchView .search-box {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
  #searchView .find-results,
  #searchView .card-results {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
    gap: 18px !important;
  }

  /* Collection becomes easier to scan across a wide monitor. */
  #collectionView .collection-toolbar {
    display: grid !important;
    grid-template-columns: minmax(320px,1fr) auto auto !important;
    gap: 12px !important;
  }
  #collectionView .collection-row {
    min-height: 112px !important;
  }

  /* Desktop dialogs should feel like app workspaces, not mobile bottom sheets. */
  .find-card-modal { width: min(1080px, calc(100vw - 80px)) !important; }
  .find-card-frame { padding: clamp(24px, 2vw, 34px) !important; }
  .find-card-identity {
    grid-template-columns: 210px minmax(0,1fr) !important;
    gap: 28px !important;
  }
  .find-card-art { min-height: 280px !important; }
  .find-card-art img { max-height: 300px !important; }
}

@media (min-width: 1320px) {
  #recentCollection.dashboard-achievement-scroll {
    grid-template-columns: repeat(6, minmax(0,1fr)) !important;
  }
  #wantedWorkspace .wanted-list {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  }
}

@media (min-width: 1650px) {
  #searchView .find-results,
  #searchView .card-results {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
  }
}

/* BinderWorth 3.38.4 — Desktop Home Final Polish
   Final desktop-only correction for the Recently scanned shelf. Mobile <= 780px is untouched. */
@media (min-width: 781px) {
  #dashboardView .home-recent-panel {
    padding: clamp(16px, 1.35vw, 22px) !important;
  }

  #dashboardView #recentCollection.dashboard-achievement-scroll {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: clamp(12px, 1.15vw, 18px) !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  /* Override the old native-mobile carousel sizing with the same selector
     specificity so desktop cards can actually occupy their grid tracks. */
  #dashboardView #recentCollection > .recent-row,
  #dashboardView #recentCollection > .recent-row:only-child {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 188px auto auto !important;
    align-content: start !important;
    gap: 9px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 282px !important;
    height: auto !important;
    padding: 12px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    scroll-snap-align: none !important;
  }

  #dashboardView #recentCollection > .recent-row > img {
    display: block !important;
    width: 100% !important;
    height: 188px !important;
    max-width: 100% !important;
    max-height: 188px !important;
    object-fit: contain !important;
    justify-self: center !important;
    align-self: center !important;
  }

  #dashboardView #recentCollection > .recent-row > span {
    min-width: 0 !important;
  }

  #dashboardView #recentCollection > .recent-row > span:nth-of-type(1) {
    display: block !important;
  }

  #dashboardView #recentCollection > .recent-row strong {
    display: block !important;
    font-size: clamp(12px, .78vw, 14px) !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #dashboardView #recentCollection > .recent-row small {
    display: block !important;
    margin-top: 3px !important;
    font-size: clamp(8px, .58vw, 10px) !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #dashboardView #recentCollection > .recent-row .recent-value {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(166,173,186,.10) !important;
    text-align: left !important;
    font-size: 12px !important;
  }

  #dashboardView #recentCollection > .recent-row .recent-value small {
    margin: 0 !important;
    text-align: right !important;
  }
}

@media (min-width: 1180px) {
  #dashboardView #recentCollection.dashboard-achievement-scroll {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* BinderWorth 3.39.6d — Collection Desktop Grid Recovery
   STRICTLY collection-scoped. Restores the signed-off desktop binder density
   without changing Home, routing, card logic, set navigation or mobile. */
@media (min-width: 1041px) {
  html body .app-shell .main-content #collectionView.active .collection-open-page {
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }

  html body .app-shell .main-content #collectionView.active .collection-open-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
  }

  html body .app-shell .main-content #collectionView.active .collection-open-pocket {
    display: grid !important;
    grid-template-rows: minmax(0, auto) auto !important;
    align-content: start !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 10px !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  html body .app-shell .main-content #collectionView.active .collection-open-card {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 286px !important;
    min-height: 286px !important;
    max-height: 286px !important;
    padding: 4px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  html body .app-shell .main-content #collectionView.active .collection-open-card > img {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 276px !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 auto !important;
  }

  html body .app-shell .main-content #collectionView.active .collection-open-pocket-meta {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 0 2px 1px !important;
    box-sizing: border-box !important;
  }

  html body .app-shell .main-content #collectionView.active .collection-open-pocket-meta > strong {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  html body .app-shell .main-content #collectionView.active .collection-open-pocket-meta > small {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Empty/missing binder pockets must occupy the same footprint as owned cards. */
  html body .app-shell .main-content #collectionView.active .collection-open-pocket.filler,
  html body .app-shell .main-content #collectionView.active .collection-open-pocket.missing {
    min-height: 330px !important;
  }

  html body .app-shell .main-content #collectionView.active .collection-open-missing-card,
  html body .app-shell .main-content #collectionView.active .collection-open-pocket.filler > .collection-open-back {
    min-height: 286px !important;
    height: 286px !important;
    max-height: 286px !important;
  }
}

/* The signed-off wide desktop view was five binder pockets across. */
@media (min-width: 1320px) {
  html body .app-shell .main-content #collectionView.active .collection-open-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  html body .app-shell .main-content #collectionView.active .collection-open-card {
    height: 294px !important;
    min-height: 294px !important;
    max-height: 294px !important;
  }

  html body .app-shell .main-content #collectionView.active .collection-open-card > img {
    max-height: 284px !important;
  }

  html body .app-shell .main-content #collectionView.active .collection-open-pocket.filler,
  html body .app-shell .main-content #collectionView.active .collection-open-pocket.missing {
    min-height: 338px !important;
  }

  html body .app-shell .main-content #collectionView.active .collection-open-missing-card,
  html body .app-shell .main-content #collectionView.active .collection-open-pocket.filler > .collection-open-back {
    min-height: 294px !important;
    height: 294px !important;
    max-height: 294px !important;
  }
}

/* BinderWorth 3.38.15 — Desktop Set Row Finalisation + Persistent Autofill Guard
   Presentation only. Mobile/tablet <=780px remains owned by existing styles. */
@media (min-width: 781px) {
  #setsView #setProgressWorkspace { display:grid; gap:16px; }

  /* Keep the already-approved desktop summary/focus area compact. */
  #setsView .complete-set-focus {
    grid-template-columns:84px minmax(0,1fr) auto !important;
    gap:18px !important;
    min-height:0 !important;
    margin:0 !important;
    padding:16px 18px !important;
    border-radius:18px !important;
  }
  #setsView .set-focus-logo {
    width:84px !important; height:72px !important; min-width:84px !important;
    display:grid !important; place-items:center !important;
    border:1px solid rgba(166,173,186,.12) !important;
    border-radius:14px !important; background:rgba(255,255,255,.025) !important;
    overflow:hidden !important;
  }
  #setsView .set-focus-logo img { max-width:72px !important; max-height:50px !important; object-fit:contain !important; }
  #setsView .complete-set-focus h3 { margin:2px 0 3px !important; font-size:clamp(22px,1.8vw,28px) !important; }
  #setsView .complete-set-focus-copy > p:not(.eyebrow) { margin:0 0 8px !important; font-size:11px !important; }
  #setsView .complete-set-focus .set-progress-track { margin-bottom:6px !important; }
  #setsView .completion-intel-meta { margin-top:6px !important; }
  #setsView .complete-set-focus > .button { min-width:178px !important; min-height:46px !important; padding-inline:18px !important; }

  /* Compact desktop search/sort bar. */
  #setsView .sets-toolbar {
    display:grid !important;
    grid-template-columns:minmax(320px,680px) minmax(210px,240px) !important;
    justify-content:start !important;
    gap:10px !important; padding:10px !important; margin:0 !important; border-radius:16px !important;
  }
  #setsView .sets-toolbar .filter-field { min-width:0 !important; min-height:44px !important; margin:0 !important; }
  #setsView .sets-toolbar .filter-field input,
  #setsView .sets-toolbar select { min-height:44px !important; font-size:13px !important; }
  #setsView .set-list-status { margin:-4px 2px 0 !important; }

  /* Final desktop set row: pin | logo | identity | progress | action. */
  #setsView .set-list { gap:10px !important; }
  #setsView .set-row {
    grid-template-columns:30px 132px minmax(190px,.72fr) minmax(330px,1.28fr) 156px !important;
    grid-template-rows:1fr !important;
    align-items:center !important;
    gap:16px !important;
    min-height:118px !important;
    padding:14px 16px !important;
    border-radius:18px !important;
    cursor:pointer !important;
  }
  #setsView .set-row:hover { transform:translateY(-1px); border-color:rgba(234,179,75,.24) !important; }
  #setsView .set-pin-icon { grid-column:1 !important; align-self:center !important; }
  #setsView .set-row-logo {
    grid-column:2 !important;
    width:132px !important; height:78px !important; margin:0 !important;
    display:grid !important; place-items:center !important;
  }
  #setsView .set-row-logo img { max-width:112px !important; max-height:56px !important; object-fit:contain !important; }

  #setsView .set-row-main {
    grid-column:3 / 5 !important;
    min-width:0 !important;
    display:grid !important;
    grid-template-columns:minmax(190px,.72fr) minmax(330px,1.28fr) !important;
    grid-template-rows:auto auto auto !important;
    column-gap:26px !important; row-gap:5px !important;
    align-items:center !important;
  }
  #setsView .set-row-title { display:contents !important; }
  #setsView .set-row-title > div {
    grid-column:1 !important; grid-row:1 / 4 !important;
    align-self:center !important; min-width:0 !important;
  }
  #setsView .set-row-title > div > strong {
    display:block !important; margin:0 0 7px !important;
    font-size:clamp(16px,1.25vw,19px) !important; line-height:1.15 !important;
    white-space:normal !important;
  }
  #setsView .set-row-title > div > small { display:block !important; margin:0 !important; line-height:1.5 !important; }
  #setsView .set-row-title > b {
    grid-column:2 !important; grid-row:1 !important;
    justify-self:end !important; margin:0 !important; font-size:17px !important;
  }
  #setsView .set-row-main > .set-progress-track {
    grid-column:2 !important; grid-row:2 !important;
    width:100% !important; margin:0 !important; height:8px !important;
  }
  #setsView .set-row-main > .set-row-meta {
    grid-column:2 !important; grid-row:3 !important;
    width:100% !important; margin:0 !important; font-size:10px !important;
  }
  #setsView .set-row-meta span:last-child { color:#EAB34B !important; font-weight:850 !important; }

  #setsView .set-row .button.set-row-cta {
    grid-column:5 !important;
    width:100% !important; min-width:0 !important; min-height:46px !important;
    justify-self:stretch !important; margin:0 !important; padding:9px 12px !important;
    color:#17130A !important;
    background:linear-gradient(180deg,#F2B94B,#E3A333) !important;
    border-color:rgba(255,200,90,.6) !important;
    font-size:11px !important; font-weight:850 !important;
    box-shadow:0 8px 20px rgba(227,163,51,.12) !important;
  }

  @media (max-width: 1180px) {
    #setsView .set-row { grid-template-columns:28px 112px minmax(160px,.68fr) minmax(250px,1.32fr) 142px !important; gap:13px !important; }
    #setsView .set-row-logo { width:112px !important; }
    #setsView .set-row-logo img { max-width:96px !important; }
    #setsView .set-row-main { grid-template-columns:minmax(160px,.68fr) minmax(250px,1.32fr) !important; column-gap:18px !important; }
  }
}

/* BinderWorth 3.39.6h — Desktop Brand Prominence Recovery
   Desktop only. Restores readable BinderWorth lockups without changing shell geometry. */
@media (min-width: 781px) {
  html body .app-shell > aside.sidebar a.bw24-sidebar-brand > img {
    width: 188px !important;
    max-width: calc(100% - 8px) !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  html body .app-shell .main-content header.topbar .topbar-title img.topbar-brand-logo {
    width: 224px !important;
    max-width: 224px !important;
    max-height: 58px !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
  }
}



/* BinderWorth 3.39.6i — Sets Desktop Final Polish
   Desktop-only refinement. Keeps the recovered 3.39.6h structure, reduces dead space,
   strengthens BinderWorth hierarchy, and leaves mobile/application logic untouched. */
@media (min-width: 781px) {
  /* Keep search + sort visually grouped instead of stretching across the workspace. */
  #setsView .sets-toolbar {
    grid-template-columns:minmax(360px, 1fr) 240px !important;
    max-width:980px !important;
    padding:10px 12px !important;
    border-color:rgba(94,207,196,.10) !important;
    background:linear-gradient(180deg,rgba(17,25,23,.96),rgba(15,21,19,.96)) !important;
  }
  #setsView .sets-toolbar .filter-field {
    border-color:rgba(94,207,196,.12) !important;
    background:rgba(255,255,255,.025) !important;
  }
  #setsView .sets-toolbar .filter-field:focus-within {
    border-color:rgba(94,207,196,.34) !important;
    box-shadow:0 0 0 3px rgba(94,207,196,.06) !important;
  }

  /* Tighter five-part desktop row: pin | brand/set | progress | total | action. */
  #setsView .set-row {
    grid-template-columns:28px 122px minmax(210px,.82fr) minmax(300px,1.18fr) 156px !important;
    gap:14px !important;
    min-height:116px !important;
    padding:13px 16px !important;
    border-color:rgba(148,163,184,.11) !important;
    background:linear-gradient(90deg,rgba(23,31,28,.97),rgba(20,27,25,.97)) !important;
  }
  #setsView .set-row:hover {
    border-color:rgba(234,179,75,.28) !important;
    box-shadow:0 12px 28px rgba(0,0,0,.14) !important;
  }

  #setsView .set-row-logo {
    width:122px !important;
    height:76px !important;
    border-color:rgba(94,207,196,.10) !important;
    background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.018)) !important;
  }
  #setsView .set-row-logo img {
    max-width:108px !important;
    max-height:58px !important;
  }

  #setsView .set-row-main {
    grid-template-columns:minmax(210px,.82fr) minmax(300px,1.18fr) !important;
    column-gap:22px !important;
  }
  #setsView .set-row-title > div > strong {
    margin-bottom:6px !important;
    font-size:clamp(17px,1.22vw,19px) !important;
    letter-spacing:-.01em !important;
  }
  #setsView .set-row-title > div > small {
    opacity:.72 !important;
    font-size:10px !important;
  }
  #setsView .set-row-title > b {
    color:#F4F1E8 !important;
    font-size:17px !important;
    font-weight:850 !important;
  }
  #setsView .set-row-main > .set-progress-track {
    height:7px !important;
    background:rgba(255,255,255,.08) !important;
  }
  #setsView .set-row-main > .set-progress-track > i {
    box-shadow:0 0 14px rgba(94,207,196,.12) !important;
  }
  #setsView .set-row-main > .set-row-meta {
    font-size:9.5px !important;
    letter-spacing:.01em !important;
  }

  #setsView .set-row .button.set-row-cta {
    min-height:46px !important;
    border-radius:12px !important;
    background:linear-gradient(180deg,#F4BA48,#E8A735) !important;
    box-shadow:0 8px 20px rgba(227,163,51,.10) !important;
  }

  /* Focus card gets a little more brand character without increasing its footprint. */
  #setsView .complete-set-focus {
    border-color:rgba(94,207,196,.26) !important;
    background:linear-gradient(90deg,rgba(20,37,32,.97),rgba(16,28,25,.97)) !important;
    box-shadow:inset 3px 0 0 rgba(94,207,196,.78) !important;
  }
  #setsView .complete-set-focus .eyebrow {
    color:#72D8CE !important;
    letter-spacing:.12em !important;
  }
  #setsView .complete-set-focus h3 {
    color:#F3EFE5 !important;
  }

  @media (max-width: 1180px) {
    #setsView .set-row {
      grid-template-columns:26px 104px minmax(170px,.78fr) minmax(250px,1.22fr) 140px !important;
      gap:12px !important;
    }
    #setsView .set-row-logo { width:104px !important; }
    #setsView .set-row-logo img { max-width:92px !important; }
    #setsView .set-row-main {
      grid-template-columns:minmax(170px,.78fr) minmax(250px,1.22fr) !important;
      column-gap:16px !important;
    }
  }
}

/* BinderWorth 3.39.6l — Missing desktop control polish
   Desktop-only: compact Chase List search/sort/actions into one purposeful toolbar.
   Card grid, card actions, mobile layout and application logic are intentionally untouched. */
@media (min-width: 1000px) {
  #wantedWorkspace .chase-list-toolbar {
    display: grid !important;
    grid-template-columns: minmax(360px, 1fr) minmax(190px, 230px) auto auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
  }

  #wantedWorkspace .chase-list-toolbar .filter-field,
  #wantedWorkspace .chase-list-toolbar select {
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  #wantedWorkspace .chase-list-toolbar #buildWantedFromMissingBtn,
  #wantedWorkspace .chase-list-toolbar #clearWantedBtn {
    width: auto !important;
    min-width: 0 !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 15px !important;
    white-space: nowrap !important;
    justify-self: end !important;
  }

  #wantedWorkspace .chase-list-toolbar #buildWantedFromMissingBtn {
    border-color: rgba(241, 176, 55, 0.34) !important;
    color: var(--gold, #f1b037) !important;
    background: rgba(241, 176, 55, 0.055) !important;
  }

  #wantedWorkspace .chase-list-toolbar #clearWantedBtn {
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: rgba(236, 239, 235, 0.68) !important;
    background: rgba(255, 255, 255, 0.018) !important;
  }
}

/* Mid-width desktop: keep the actions compact on a second line rather than stretching full width. */
@media (min-width: 781px) and (max-width: 1199px) {
  #wantedWorkspace .chase-list-toolbar {
    grid-template-columns: minmax(280px, 1fr) minmax(190px, 220px) !important;
    gap: 9px !important;
  }
  #wantedWorkspace .chase-list-toolbar #buildWantedFromMissingBtn,
  #wantedWorkspace .chase-list-toolbar #clearWantedBtn {
    justify-self: start !important;
    padding-inline: 12px !important;
    font-size: 12px !important;
  }
}

/* BinderWorth 3.39.7 — Find Desktop Recovery
   Desktop-only recovery for the exact-printing trader-match workspace.
   Search/results logic, trader ranking, mobile Find and marketplace behaviour are untouched. */
@media (min-width: 781px) {
  /* The base Find dialog still carries the old 720px mobile-oriented frame cap.
     Remove that cap and let the trader workspace use desktop width. */
  html body .find-card-modal {
    width: min(1180px, calc(100vw - 72px)) !important;
    max-width: min(1180px, calc(100vw - 72px)) !important;
    margin-inline: auto !important;
  }

  html body .find-card-modal .find-card-frame {
    width: 100% !important;
    max-width: none !important;
    padding: clamp(24px, 2vw, 34px) !important;
  }

  /* Selected printing: prominent enough to confirm the card without consuming
     the whole workspace. */
  html body .find-card-modal .find-card-identity {
    display: grid !important;
    grid-template-columns: 160px minmax(0, 1fr) !important;
    gap: 24px !important;
    align-items: center !important;
    padding-right: 54px !important;
  }

  html body .find-card-modal .find-card-art {
    min-height: 0 !important;
    width: 160px !important;
    height: 218px !important;
    display: grid !important;
    place-items: center !important;
  }

  html body .find-card-modal .find-card-art img {
    width: auto !important;
    max-width: 150px !important;
    max-height: 210px !important;
    object-fit: contain !important;
  }

  html body .find-card-modal .find-card-identity-copy h2 {
    margin-block: 4px 5px !important;
    font-size: clamp(32px, 2.4vw, 42px) !important;
    line-height: 1 !important;
    letter-spacing: -.025em !important;
  }

  html body .find-card-modal .find-card-location-strip {
    margin-top: 18px !important;
    padding: 15px 18px !important;
    border-color: rgba(89, 217, 200, .18) !important;
    background: linear-gradient(90deg, rgba(35, 93, 84, .08), rgba(8, 18, 18, .28)) !important;
  }

  /* The verbose recommendation sentence repeated the same information shown in
     Closest approved stock. The structured trader card is the desktop authority. */
  html body .find-card-modal .find-card-status {
    display: none !important;
  }

  html body .find-card-modal .find-card-match-section {
    margin-top: 20px !important;
  }

  html body .find-card-modal .find-card-section-head {
    display: flex !important;
    align-items: end !important;
    justify-content: space-between !important;
    gap: 18px !important;
  }

  html body .find-card-modal .find-card-section-head > div {
    min-width: 0 !important;
  }

  html body .find-card-modal .find-card-section-head > div > strong {
    display: block !important;
    margin-top: 3px !important;
    font-size: clamp(22px, 1.65vw, 27px) !important;
    line-height: 1.08 !important;
  }

  html body .find-card-modal .find-card-offers {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin: 12px 0 0 !important;
  }

  /* Desktop trader card: price/status | trader detail | actions. */
  html body .find-card-modal .find-card-offer {
    display: grid !important;
    grid-template-columns: minmax(225px, .62fr) minmax(390px, 1.55fr) minmax(150px, auto) !important;
    grid-template-areas: "offer-top offer-main offer-actions" !important;
    gap: 24px !important;
    align-items: center !important;
    padding: 20px 20px 20px 22px !important;
    min-height: 166px !important;
    border-radius: 18px !important;
    background: linear-gradient(105deg, rgba(29, 35, 28, .98), rgba(13, 24, 22, .98) 58%, rgba(10, 18, 18, .98)) !important;
  }

  html body .find-card-modal .find-card-offer.recommended {
    border-color: rgba(234, 179, 75, .54) !important;
    box-shadow: inset 4px 0 0 rgba(234, 179, 75, .88), 0 12px 30px rgba(0, 0, 0, .12) !important;
  }

  html body .find-card-modal .find-card-offer-top {
    grid-area: offer-top !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-self: stretch !important;
    align-content: center !important;
    min-width: 0 !important;
  }

  html body .find-card-modal .find-card-offer-price {
    grid-row: 1 !important;
    display: grid !important;
    gap: 1px !important;
    text-align: left !important;
    justify-items: start !important;
  }

  html body .find-card-modal .find-card-offer-price > strong {
    font-size: clamp(30px, 2vw, 38px) !important;
    line-height: 1 !important;
    letter-spacing: -.02em !important;
    color: #f3efe5 !important;
  }

  html body .find-card-modal .find-card-offer-price > small {
    font-size: 10px !important;
    line-height: 1.35 !important;
    color: rgba(194, 202, 198, .62) !important;
  }

  html body .find-card-modal .find-card-offer-badges {
    grid-row: 2 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    max-width: 245px !important;
    align-content: start !important;
  }

  html body .find-card-modal .find-card-offer-badges span {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 4px 8px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
  }

  html body .find-card-modal .find-card-offer-main {
    grid-area: offer-main !important;
    display: grid !important;
    gap: 5px !important;
    min-width: 0 !important;
  }

  html body .find-card-modal .find-card-trader-name {
    font-size: clamp(20px, 1.55vw, 25px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.015em !important;
    color: #f2efe7 !important;
  }

  html body .find-card-modal .find-card-trader-location {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  html body .find-card-modal .find-card-trust-meta {
    width: max-content !important;
    max-width: 100% !important;
    margin-top: 3px !important;
    padding: 6px 9px !important;
    gap: 4px 9px !important;
  }

  html body .find-card-modal .find-card-stock-meta,
  html body .find-card-modal .find-card-service-meta,
  html body .find-card-modal .find-card-basket-context,
  html body .find-card-modal .trader-event-context {
    margin-top: 1px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  html body .find-card-modal .find-card-offer-actions {
    grid-area: offer-actions !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    align-self: center !important;
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 150px !important;
  }

  html body .find-card-modal .find-card-offer-actions .button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 9px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  /* Wider-market fallback should read as a deliberate secondary route rather than
     the footer of a narrow mobile sheet. */
  html body .find-card-modal .find-card-fallback {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 24px !important;
    margin-top: 22px !important;
    padding: 18px 20px !important;
    border: 1px solid rgba(148, 163, 184, .12) !important;
    border-radius: 16px !important;
    background: linear-gradient(90deg, rgba(18, 27, 25, .94), rgba(11, 20, 19, .96)) !important;
  }

  html body .find-card-modal .find-card-fallback > div {
    gap: 4px !important;
  }

  html body .find-card-modal .find-card-fallback > div > strong {
    font-size: 20px !important;
    line-height: 1.1 !important;
  }

  html body .find-card-modal .find-card-fallback small {
    max-width: 620px !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
  }

  html body .find-card-modal .find-card-fallback .button {
    min-width: 160px !important;
    min-height: 46px !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
}

/* Mid-width desktop/tablet landscape: retain the desktop recovery without
   squeezing the trader name or action labels. Mobile <=780px remains untouched. */
@media (min-width: 781px) and (max-width: 1050px) {
  html body .find-card-modal {
    width: calc(100vw - 36px) !important;
    max-width: calc(100vw - 36px) !important;
  }

  html body .find-card-modal .find-card-offer {
    grid-template-columns: minmax(210px, .72fr) minmax(0, 1.28fr) !important;
    grid-template-areas:
      "offer-top offer-main"
      "offer-actions offer-actions" !important;
    gap: 16px 20px !important;
  }

  html body .find-card-modal .find-card-offer-actions {
    grid-template-columns: repeat(2, minmax(0, 150px)) !important;
    justify-content: end !important;
    min-width: 0 !important;
  }
}

/* BinderWorth 3.39.7a — Find Desktop Width + Trader Actions Recovery
   Desktop-only correction for the Find exact-printing dialog. The previous
   recovery improved the trader card internals, but the legacy 720px dialog
   constraint could still win at runtime, clipping the action column. */
@media (min-width: 781px) {
  /* Force the actual native dialog workspace wider. Use both physical and
     logical sizing properties so the old .modal width/max-width cannot keep
     this Find-specific dialog at the mobile-oriented 720px cap. */
  html body dialog#findCardModal.modal.find-card-modal,
  html body dialog#findCardModal.modal.find-card-modal[open] {
    width: min(1180px, calc(100vw - 72px)) !important;
    inline-size: min(1180px, calc(100vw - 72px)) !important;
    min-width: min(980px, calc(100vw - 72px)) !important;
    max-width: min(1180px, calc(100vw - 72px)) !important;
    max-inline-size: min(1180px, calc(100vw - 72px)) !important;
    box-sizing: border-box !important;
  }

  html body #findCardModal .find-card-frame {
    width: 100% !important;
    inline-size: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    max-inline-size: none !important;
    box-sizing: border-box !important;
  }

  /* Keep all three desktop columns inside the card even if a browser/window
     gives the dialog less room than expected. This is what guarantees that
     View trader + Directions can never be pushed outside the visible card. */
  html body #findCardModal .find-card-offer {
    grid-template-columns: minmax(175px, .52fr) minmax(0, 1.48fr) minmax(150px, 170px) !important;
    grid-template-areas: "offer-top offer-main offer-actions" !important;
    column-gap: 18px !important;
    overflow: visible !important;
  }

  html body #findCardModal .find-card-offer-top,
  html body #findCardModal .find-card-offer-main,
  html body #findCardModal .find-card-offer-actions {
    min-width: 0 !important;
  }

  html body #findCardModal .find-card-offer-actions {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    grid-area: offer-actions !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 150px !important;
    max-width: 170px !important;
    justify-self: end !important;
    align-self: center !important;
  }

  html body #findCardModal .find-card-offer-actions > .button,
  html body #findCardModal .find-card-offer-actions > a.button {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 9px 12px !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }
}

/* Compact desktop / landscape tablet: actions remain visible on their own row
   rather than being clipped. Phone/mobile <=780px is intentionally untouched. */
@media (min-width: 781px) and (max-width: 1050px) {
  html body dialog#findCardModal.modal.find-card-modal,
  html body dialog#findCardModal.modal.find-card-modal[open] {
    width: calc(100vw - 36px) !important;
    inline-size: calc(100vw - 36px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 36px) !important;
    max-inline-size: calc(100vw - 36px) !important;
  }

  html body #findCardModal .find-card-offer {
    grid-template-columns: minmax(180px, .7fr) minmax(0, 1.3fr) !important;
    grid-template-areas:
      "offer-top offer-main"
      "offer-actions offer-actions" !important;
    row-gap: 14px !important;
  }

  html body #findCardModal .find-card-offer-actions {
    grid-template-columns: repeat(2, minmax(140px, 160px)) !important;
    max-width: none !important;
    width: auto !important;
    min-width: 0 !important;
    justify-self: end !important;
  }
}

/* BinderWorth 3.39.8 — Scan Desktop Recovery
   Desktop-only recovery for the Photo → Match → Confirm scanner journey.
   Mobile <=780px, OCR/matching logic, crop behaviour and camera behaviour are untouched. */
@media (min-width: 781px) {
  /* Keep the scanner intro and progress indicator in one deliberate desktop composition. */
  html body #scanView .scan-intro {
    grid-template-columns: minmax(420px, 720px) minmax(300px, 420px) !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: clamp(28px, 4vw, 72px) !important;
    padding: 24px 28px !important;
  }

  html body #scanView .scan-stepper {
    width: 100% !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    font-size: 10px !important;
  }

  html body #scanView .scan-stepper i {
    flex: 1 1 38px !important;
    max-width: 58px !important;
  }

  /* Before a match exists, do not leave a dead second grid column. The capture
     card becomes a real desktop workspace with the photo on the left and the
     controls/help rail on the right. */
  html body #scanView.scan-ux-capture .scan-grid,
  html body #scanView.scan-ux-camera .scan-grid,
  html body #scanView.scan-ux-photo .scan-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body #scanView.scan-ux-capture .capture-panel,
  html body #scanView.scan-ux-camera .capture-panel,
  html body #scanView.scan-ux-photo .capture-panel {
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: minmax(500px, 1.2fr) minmax(300px, .72fr) !important;
    grid-template-rows: auto auto auto 1fr !important;
    column-gap: clamp(22px, 2.4vw, 38px) !important;
    row-gap: 14px !important;
    align-items: start !important;
    padding: clamp(20px, 2vw, 28px) !important;
  }

  html body #scanView.scan-ux-capture .scan-capture-heading,
  html body #scanView.scan-ux-camera .scan-capture-heading,
  html body #scanView.scan-ux-photo .scan-capture-heading {
    grid-column: 1 / -1 !important;
    margin-bottom: 2px !important;
  }

  html body #scanView.scan-ux-capture .capture-stage,
  html body #scanView.scan-ux-camera .capture-stage,
  html body #scanView.scan-ux-photo .capture-stage {
    grid-column: 1 !important;
    grid-row: 2 / span 4 !important;
    width: 100% !important;
    min-height: 0 !important;
    height: clamp(500px, 61vh, 680px) !important;
    max-height: 680px !important;
    border-radius: 18px !important;
  }

  html body #scanView.scan-ux-capture .crop-tools,
  html body #scanView.scan-ux-camera .crop-tools,
  html body #scanView.scan-ux-photo .crop-tools,
  html body #scanView.scan-ux-capture .scan-actions,
  html body #scanView.scan-ux-camera .scan-actions,
  html body #scanView.scan-ux-photo .scan-actions,
  html body #scanView.scan-ux-capture .scan-privacy,
  html body #scanView.scan-ux-camera .scan-privacy,
  html body #scanView.scan-ux-photo .scan-privacy {
    grid-column: 2 !important;
    min-width: 0 !important;
    margin-top: 0 !important;
  }

  html body #scanView.scan-ux-capture .scan-actions,
  html body #scanView.scan-ux-camera .scan-actions,
  html body #scanView.scan-ux-photo .scan-actions {
    grid-template-columns: 1fr !important;
    align-self: start !important;
    padding: 16px !important;
    border: 1px solid rgba(166, 173, 186, .12) !important;
    border-radius: 16px !important;
    background: linear-gradient(145deg, rgba(14, 22, 29, .96), rgba(9, 16, 22, .96)) !important;
  }

  html body #scanView.scan-ux-capture .scan-actions .scan-identify,
  html body #scanView.scan-ux-camera .scan-actions .scan-identify,
  html body #scanView.scan-ux-photo .scan-actions .scan-identify {
    grid-column: auto !important;
  }

  html body #scanView.scan-ux-capture .scan-privacy,
  html body #scanView.scan-ux-camera .scan-privacy,
  html body #scanView.scan-ux-photo .scan-privacy {
    padding: 14px 16px !important;
    border: 1px solid rgba(166, 173, 186, .10) !important;
    border-radius: 14px !important;
    background: rgba(9, 16, 22, .68) !important;
  }

  /* Once matching starts, preserve the useful two-column structure but give the
     result/confirmation side more room than the photographed-card side. */
  html body #scanView.scan-ux-analyzing .scan-grid,
  html body #scanView.scan-ux-results .scan-grid,
  html body #scanView.scan-ux-error .scan-grid {
    grid-template-columns: minmax(390px, .82fr) minmax(560px, 1.28fr) !important;
    gap: clamp(18px, 1.7vw, 28px) !important;
    align-items: start !important;
  }

  html body #scanView.scan-ux-analyzing .capture-stage,
  html body #scanView.scan-ux-results .capture-stage,
  html body #scanView.scan-ux-error .capture-stage {
    min-height: 0 !important;
    height: clamp(500px, 58vh, 620px) !important;
    max-height: 620px !important;
  }

  html body #scanView .capture-panel,
  html body #scanView .scan-result-panel {
    min-width: 0 !important;
    padding: clamp(16px, 1.45vw, 22px) !important;
  }

  html body #scanView .scan-result-panel {
    background: linear-gradient(145deg, rgba(16, 24, 32, .97), rgba(10, 18, 25, .98)) !important;
  }

  /* The result readout used legacy light cards. Bring it back into the premium
     BinderWorth dark surface while preserving the confidence semantics. */
  html body #scanView .scan-readout {
    margin-bottom: 14px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body #scanView .scanner-confidence-card {
    margin-bottom: 10px !important;
    padding: 16px 18px !important;
    color: #E9EDF2 !important;
    background: linear-gradient(135deg, rgba(18, 28, 35, .98), rgba(12, 22, 28, .98)) !important;
    border-color: rgba(166, 173, 186, .14) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.02) !important;
  }

  html body #scanView .scanner-confidence-card strong {
    color: #F4F6F8 !important;
  }

  html body #scanView .scanner-confidence-card p {
    color: #8F99A7 !important;
    font-size: 10px !important;
  }

  html body #scanView .scanner-confidence-card > b {
    min-width: 64px !important;
    min-height: 64px !important;
    border: 1px solid rgba(166, 173, 186, .10) !important;
    background: #111A22 !important;
  }

  html body #scanView .scanner-confidence-card.very-high > b { color: #65E0AE !important; background: rgba(46, 196, 135, .10) !important; }
  html body #scanView .scanner-confidence-card.high > b { color: #73C9FF !important; background: rgba(71, 165, 230, .10) !important; }
  html body #scanView .scanner-confidence-card.medium > b { color: #F0C85B !important; background: rgba(240, 200, 91, .10) !important; }
  html body #scanView .scanner-confidence-card.low > b { color: #FF8B9B !important; background: rgba(255, 110, 130, .09) !important; }

  html body #scanView .scan-advanced-details,
  html body #scanView .scan-more-matches {
    overflow: hidden !important;
    border: 1px solid rgba(166, 173, 186, .12) !important;
    border-radius: 14px !important;
    background: #0C131A !important;
  }

  /* Explicit flex/grid separation prevents the runtime card-name/count strings
     from visually colliding with their summary labels (e.g. correctionsPrV / matches9). */
  html body #scanView .scan-advanced-details > summary,
  html body #scanView .scan-more-matches > summary {
    width: 100% !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 11px 14px !important;
    box-sizing: border-box !important;
  }

  html body #scanView .scan-advanced-details > summary > span {
    min-width: 0 !important;
    display: grid !important;
    gap: 2px !important;
  }

  html body #scanView .scan-advanced-details > summary small {
    display: block !important;
    max-width: 46ch !important;
    overflow: hidden !important;
    color: #7F8A98 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #scanView .scan-more-matches > summary > span {
    min-width: 0 !important;
  }

  html body #scanView .scan-more-matches > summary > b {
    flex: 0 0 auto !important;
    min-width: 28px !important;
    height: 28px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    color: #F5BF4B !important;
    background: rgba(245, 191, 75, .09) !important;
    border: 1px solid rgba(245, 191, 75, .18) !important;
  }

  html body #scanView .scan-advanced-body {
    padding: 14px !important;
    border-top: 1px solid rgba(166, 173, 186, .09) !important;
  }

  html body #scanView .scan-candidate,
  html body #scanView .scan-more-list .scan-candidate {
    grid-template-columns: 76px minmax(0, 1fr) minmax(142px, auto) !important;
    gap: 14px !important;
    padding: 14px !important;
    color: #F1F3F6 !important;
    background: linear-gradient(145deg, #101820, #0C141B) !important;
    border-color: rgba(166, 173, 186, .13) !important;
  }

  html body #scanView .scan-candidate.best {
    border-color: rgba(245, 191, 75, .34) !important;
    box-shadow: inset 3px 0 0 rgba(245, 191, 75, .72), 0 12px 28px rgba(0,0,0,.14) !important;
  }

  html body #scanView .scan-candidate h4 {
    color: #F4F6F8 !important;
    font-size: 15px !important;
  }

  html body #scanView .scan-candidate p,
  html body #scanView .candidate-estimate small {
    color: #9AA4B1 !important;
  }

  html body #scanView .scan-candidate-actions {
    min-width: 142px !important;
    align-self: center !important;
  }

  html body #scanView .scan-candidate-actions .button {
    width: 100% !important;
    min-height: 46px !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  html body #scanView .scan-retry-bar,
  html body #scanView .scan-feedback-panel,
  html body #scanView .scan-no-match,
  html body #scanView .scan-confirmation-banner {
    color: #AAB3BF !important;
    background: linear-gradient(145deg, rgba(14, 22, 29, .98), rgba(9, 16, 22, .98)) !important;
    border-color: rgba(166, 173, 186, .12) !important;
  }

  html body #scanView .scan-feedback-copy strong,
  html body #scanView .scan-no-match strong,
  html body #scanView .scan-confirmation-banner strong {
    color: #F1F3F6 !important;
  }

  html body #scanView .scan-feedback-copy p,
  html body #scanView .scan-feedback-copy small,
  html body #scanView .scan-retry-bar {
    color: #8F99A7 !important;
  }

  html body #scanView .scan-feedback-panel {
    padding: 16px 18px !important;
    border-radius: 16px !important;
  }

  html body #scanView .scan-feedback-panel .button {
    flex: 0 0 180px !important;
    min-width: 180px !important;
  }

  html body #scanView .scan-no-match {
    padding: 18px !important;
    border-style: dashed !important;
  }
}

/* Compact desktop / landscape tablet: keep both scanner columns usable without
   falling back to phone styling. */
@media (min-width: 781px) and (max-width: 1120px) {
  html body #scanView .scan-intro {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  html body #scanView .scan-stepper {
    justify-content: flex-start !important;
    max-width: 440px !important;
  }

  html body #scanView.scan-ux-capture .capture-panel,
  html body #scanView.scan-ux-camera .capture-panel,
  html body #scanView.scan-ux-photo .capture-panel {
    grid-template-columns: minmax(420px, 1fr) minmax(260px, .68fr) !important;
  }

  html body #scanView.scan-ux-analyzing .scan-grid,
  html body #scanView.scan-ux-results .scan-grid,
  html body #scanView.scan-ux-error .scan-grid {
    grid-template-columns: minmax(340px, .8fr) minmax(460px, 1.2fr) !important;
  }

  html body #scanView .scan-candidate,
  html body #scanView .scan-more-list .scan-candidate {
    grid-template-columns: 68px minmax(0, 1fr) !important;
  }

  html body #scanView .scan-candidate-actions {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* 3.39.8a — Scan desktop micro polish
   Keep the two capture-stage instructions visually distinct. The base scanner
   can render these as adjacent inline nodes, which makes the desktop overlay
   read as one concatenated sentence. */
@media (min-width: 781px) {
  html body #scanView .scan-stage-cta {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    text-align: center !important;
    line-height: 1.25 !important;
  }

  html body #scanView .scan-stage-cta > strong,
  html body #scanView .scan-stage-cta > span {
    display: block !important;
    width: 100% !important;
  }

  html body #scanView .scan-stage-cta > span {
    color: #AAB2BC !important;
    font-size: 12px !important;
    font-weight: 600 !important;
  }
}

/* 3.39.9 — Achievements desktop brand recovery
   Desktop-only visual integration. Achievement/XP logic and mobile remain unchanged. */
@media (min-width: 781px) {
  html body #achievementsView .achievements-page-grid {
    grid-template-columns: minmax(0, 1.72fr) minmax(330px, .78fr) !important;
    gap: 18px !important;
    align-items: start !important;
  }

  html body #achievementsView .achievements-all-panel,
  html body #achievementsView .achievements-stats-panel,
  html body #achievementsView .achievements-monthly-panel {
    border-color: rgba(92, 205, 193, .14) !important;
    background:
      radial-gradient(circle at 100% 0%, rgba(244, 178, 55, .045), transparent 34%),
      linear-gradient(145deg, rgba(20, 29, 28, .98), rgba(12, 20, 24, .98)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.018) !important;
  }

  html body #achievementsView .achievements-side-stack {
    gap: 16px !important;
  }

  /* Replace the legacy white milestone tiles with the BinderWorth dark collector treatment. */
  html body #achievementsView .achievements-stat-list {
    gap: 10px !important;
  }

  html body #achievementsView .achievements-stat-list > div {
    min-height: 98px !important;
    padding: 16px !important;
    border: 1px solid rgba(92, 205, 193, .14) !important;
    border-radius: 15px !important;
    background:
      linear-gradient(145deg, rgba(18, 29, 28, .98), rgba(13, 20, 24, .98)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.02) !important;
  }

  html body #achievementsView .achievements-stat-list > div:nth-child(2n) {
    border-color: rgba(244, 178, 55, .14) !important;
  }

  html body #achievementsView .achievements-stat-list span {
    color: #87938f !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .02em !important;
  }

  html body #achievementsView .achievements-stat-list strong {
    margin-top: 7px !important;
    color: #f2eee4 !important;
    font-size: 22px !important;
    line-height: 1 !important;
  }

  html body #achievementsView .achievements-stat-list > div:nth-child(1) strong,
  html body #achievementsView .achievements-stat-list > div:nth-child(4) strong {
    color: #62d5ca !important;
  }

  html body #achievementsView .achievements-stat-list > div:nth-child(2) strong,
  html body #achievementsView .achievements-stat-list > div:nth-child(3) strong {
    color: #efc260 !important;
  }

  /* Keep the achievement layout, but make unlocked/locked states clearer and less neon-purple. */
  html body #achievementsView .achievement-full-grid {
    gap: 11px !important;
  }

  html body #achievementsView .achievement-full-grid .achievement-badge {
    min-height: 92px !important;
    border-color: rgba(132, 147, 151, .13) !important;
    background: linear-gradient(145deg, rgba(16, 24, 30, .98), rgba(12, 20, 25, .98)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.018) !important;
  }

  html body #achievementsView .achievement-full-grid .achievement-badge.unlocked {
    border-color: rgba(92, 205, 193, .22) !important;
    background:
      linear-gradient(135deg, rgba(92, 205, 193, .055), rgba(16, 24, 30, .98) 42%, rgba(244, 178, 55, .025)) !important;
    opacity: 1 !important;
  }

  html body #achievementsView .achievement-full-grid .achievement-badge.locked {
    opacity: 1 !important;
    border-color: rgba(125, 137, 143, .09) !important;
    background: linear-gradient(145deg, rgba(13, 20, 25, .88), rgba(10, 17, 21, .92)) !important;
  }

  html body #achievementsView .achievement-full-grid .achievement-badge.locked .achievement-copy strong {
    color: #c2c8c7 !important;
  }

  html body #achievementsView .achievement-full-grid .achievement-badge.locked .achievement-copy small {
    color: #727e7e !important;
  }

  html body #achievementsView .achievement-full-grid .achievement-badge.locked .achievement-icon {
    opacity: .62 !important;
    filter: saturate(.55) !important;
    background: #121b21 !important;
    border-color: rgba(127, 143, 148, .10) !important;
  }

  html body #achievementsView .achievement-full-grid .achievement-state {
    border: 1px solid rgba(121, 135, 142, .11) !important;
    color: #98a5a6 !important;
    background: rgba(255,255,255,.035) !important;
  }

  /* Tier pills retain meaning without every unlocked badge shouting magenta. */
  html body #achievementsView .achievement-full-grid .achievement-badge.unlocked.bronze .achievement-state {
    color: #f1c3a2 !important;
    border-color: rgba(207, 135, 87, .24) !important;
    background: rgba(161, 91, 51, .15) !important;
  }

  html body #achievementsView .achievement-full-grid .achievement-badge.unlocked.silver .achievement-state {
    color: #c7e2e2 !important;
    border-color: rgba(145, 190, 194, .24) !important;
    background: rgba(88, 143, 149, .14) !important;
  }

  html body #achievementsView .achievement-full-grid .achievement-badge.unlocked.gold .achievement-state {
    color: #f4cc68 !important;
    border-color: rgba(244, 178, 55, .28) !important;
    background: rgba(244, 178, 55, .12) !important;
  }

  html body #achievementsView .achievement-full-grid .achievement-badge.unlocked.prismatic .achievement-state {
    color: #cabaff !important;
    border-color: rgba(132, 103, 238, .25) !important;
    background: linear-gradient(90deg, rgba(118, 85, 220, .13), rgba(47, 181, 184, .10)) !important;
  }

  /* Make the side challenge belong to the same dark collector surface. */
  html body #achievementsView .achievements-monthly-panel {
    border-left: 2px solid rgba(244, 178, 55, .56) !important;
  }

  html body #achievementsView .achievements-monthly-panel > p {
    color: #96a09e !important;
  }

  html body #achievementsView .challenge-reward {
    color: #efc260 !important;
    border-color: rgba(244, 178, 55, .20) !important;
    background: rgba(244, 178, 55, .08) !important;
  }

  html body #achievementsView .monthly-progress-track {
    background: rgba(255,255,255,.055) !important;
  }

  html body #achievementsView .monthly-progress-track i {
    background: linear-gradient(90deg, #59cfc4, #76d8cd, #e8b64d) !important;
  }

  html body #achievementsView .achievement-page-progress {
    background: rgba(255,255,255,.055) !important;
  }

  html body #achievementsView .achievement-page-progress i {
    background: linear-gradient(90deg, #58cec3, #78d9ce, #e6b34a) !important;
  }

  html body #achievementsView .achievements-level-meta .collector-rank-pill {
    color: #d9cffb !important;
    background: rgba(108, 83, 187, .12) !important;
    border-color: rgba(126, 102, 199, .18) !important;
  }
}

@media (min-width: 781px) and (max-width: 1120px) {
  html body #achievementsView .achievements-page-grid {
    grid-template-columns: 1fr !important;
  }

  html body #achievementsView .achievements-side-stack {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: stretch !important;
  }
}

/* BinderWorth 3.39.10 — Account & Settings desktop recovery.
   Desktop-only visual alignment; no account, sync, settings or backup logic changes. */
@media (min-width: 781px) {
  html body #settingsModal .modal-frame,
  html body #accountHubModal .modal-frame,
  html body #accountModal .modal-frame {
    border: 1px solid rgba(111, 138, 140, .20) !important;
    background:
      radial-gradient(circle at 100% 0%, rgba(93, 207, 196, .045), transparent 30%),
      linear-gradient(145deg, rgba(14, 22, 28, .995), rgba(11, 18, 23, .995)) !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .50), inset 0 1px 0 rgba(255,255,255,.025) !important;
  }

  html body #settingsModal .modal-frame {
    width: min(900px, calc(100vw - 72px)) !important;
  }

  html body #accountHubModal .modal-frame {
    width: min(780px, calc(100vw - 72px)) !important;
  }

  html body #accountModal .modal-frame {
    width: min(560px, calc(100vw - 72px)) !important;
  }

  html body #settingsModal .settings-section,
  html body #accountHubModal .settings-section {
    border-color: rgba(105, 129, 133, .17) !important;
    background: linear-gradient(145deg, rgba(17, 27, 33, .96), rgba(13, 22, 27, .96)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.018) !important;
  }

  html body #settingsModal .feedback-settings {
    border-color: rgba(92, 205, 193, .21) !important;
    background:
      linear-gradient(135deg, rgba(92, 205, 193, .045), rgba(15, 24, 30, .98) 42%, rgba(244, 178, 55, .025)) !important;
  }

  html body #settingsModal .danger-zone,
  html body #accountHubModal .danger-zone {
    border-color: rgba(211, 83, 103, .25) !important;
    background: linear-gradient(145deg, rgba(48, 20, 27, .34), rgba(18, 22, 27, .96)) !important;
  }

  html body #settingsModal .field input,
  html body #accountModal .field input {
    border-color: rgba(111, 138, 140, .24) !important;
    background: rgba(8, 16, 21, .88) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.015) !important;
  }

  html body #settingsModal .field input:focus,
  html body #accountModal .field input:focus {
    border-color: rgba(244, 178, 55, .72) !important;
    box-shadow: 0 0 0 3px rgba(244, 178, 55, .09) !important;
  }

  html body #settingsModal .diagnostic-actions {
    gap: 10px !important;
  }

  html body #settingsModal .modal-actions {
    margin-top: 14px !important;
    padding-top: 13px !important;
    border-top: 1px solid rgba(116, 137, 141, .12) !important;
  }

  html body #settingsModal #saveSettingsBtn {
    min-width: 148px !important;
  }

  html body #accountHubModal .account-panel {
    border-color: rgba(92, 205, 193, .23) !important;
    background: linear-gradient(90deg, rgba(92, 205, 193, .055), rgba(14, 23, 29, .97)) !important;
    box-shadow: inset 3px 0 0 rgba(92, 205, 193, .55) !important;
  }

  html body #accountHubModal .account-copy {
    min-width: 0 !important;
  }

  html body #accountHubModal .account-copy strong {
    color: #f0f1eb !important;
  }

  html body #accountModal .account-form-grid {
    gap: 12px !important;
  }

  html body #accountModal .account-message {
    color: #a8b2b1 !important;
    line-height: 1.48 !important;
    border-top: 1px solid rgba(111, 138, 140, .10) !important;
    padding-top: 11px !important;
  }

  /* Two explicit account routes instead of buttons floating at opposite edges. */
  html body #accountModal .account-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    margin-top: 14px !important;
  }

  html body #accountModal .account-actions .action-spacer {
    display: none !important;
  }

  html body #accountModal .account-actions .button {
    width: 100% !important;
    min-height: 46px !important;
    justify-content: center !important;
  }

  html body #accountModal #createAccountBtn {
    border-color: rgba(92, 205, 193, .25) !important;
    color: #d9e8e5 !important;
    background: rgba(92, 205, 193, .055) !important;
  }

  html body #accountModal #signInAccountBtn {
    box-shadow: 0 8px 24px rgba(244, 178, 55, .10) !important;
  }
}

/* BinderWorth 3.39.10a — Account modal horizontal overflow fix.
   Desktop-only: keep the existing account design, but make the dialog and frame share
   one bounded width so the 560px desktop frame cannot overflow the small-modal shell. */
@media (min-width: 781px) {
  html body #accountModal {
    width: min(560px, calc(100vw - 72px)) !important;
    max-width: min(560px, calc(100vw - 72px)) !important;
    overflow-x: hidden !important;
  }

  html body #accountModal .modal-frame {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  html body #accountModal .account-form-grid,
  html body #accountModal .field,
  html body #accountModal .field input,
  html body #accountModal .account-actions,
  html body #accountModal .account-actions .button {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}