/* Desktop "Binder view" -- a 9-pocket, 2-page spread alternative to the row-list,
   built on top of the existing mobile flip-card markup/classes from
   _CollectorMobileCard.cshtml (art, flip, info panel). Only active when
   .ce-binder-active is present, and only ever shown at desktop widths --
   mobile keeps its own carousel. */

.ce-list-view-toggle {
    display: none;
    align-items: center;
    gap: 2px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.25);
    padding: 3px;
}

@media (min-width: 901px) {
    .ce-list-view-toggle { display: inline-flex; }
}

.ce-list-view-toggle button {
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: rgba(255, 255, 255, 0.62);
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
}

.ce-list-view-toggle button.is-active {
    background: rgba(212, 168, 83, 0.16);
    color: #f4cf80;
}

.ce-classic-view,
.ce-binder-view {
    display: none;
}

.ce-classic-view.is-active,
.ce-binder-view.is-active {
    display: block;
}

@media (max-width: 900px) {
    .ce-binder-view { display: none !important; }
}

/* ---- Pocket grid ---- */

.ce-binder-viewport {
    position: relative;
    perspective: 1800px;
}

.ce-binder-book {
    position: relative;
}

.ce-binder-spread-current {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    /* Stretch so a page that is all (or mostly) empty pockets matches the
       height of its facing page. */
    align-items: stretch;
    gap: 0;
}

.ce-binder-spine {
    width: 10px;
    background: linear-gradient(90deg, rgba(0,0,0,0.5), rgba(0,0,0,0.15), rgba(0,0,0,0.5));
    border-radius: 3px;
}

.ce-binder-page {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* Equal rows: an all-empty row takes the height of a filled one. */
    grid-auto-rows: 1fr;
    gap: 7px;
    padding: 10px;
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(17, 24, 39, 0.72), rgba(7, 11, 18, 0.56));
    border: 1px solid rgba(255, 255, 255, 0.075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 40px rgba(0, 0, 0, 0.22);
}

.ce-binder-pocket {
    position: relative;
    container-type: inline-size;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 3px;
}

/* Unfilled pocket on a short spread (see _BinderSpreadView.cshtml): keeps the
   full 3x3 page geometry so every spread renders the same two-page binder.
   Its height comes from the page's equal rows (grid-auto-rows: 1fr). */
.ce-binder-pocket-empty {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.22));
    border: 1px dashed rgba(255, 255, 255, 0.11);
    align-self: stretch;
}

.ce-binder-slot[hidden] {
    display: none;
}

/* ---- Reuse of _CollectorMobileCard art/flip markup, resized for a pocket ---- */

.ce-binder-pocket .ce-mobile-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.ce-binder-pocket .ce-mobile-card-art {
    overflow: hidden;
    display: block;
    width: auto;
    max-width: 100%;
    height: clamp(110px, 15vh, 170px);
    margin: 0 auto;
    border: 1px solid rgba(212, 168, 83, 0.22);
    border-radius: 10px;
    aspect-ratio: 2.5 / 3.5;
    padding: 3px;
    background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.08), transparent 36%), #030712;
    cursor: pointer;
}

/* ============================================================
   Canonical card-flip mechanism -- the ONLY flip implementation in the
   codebase. Every flippable card-art surface (carousel tiles on
   Inventory/SetInventory/WishList via _CollectorMobileCard.cshtml,
   binder pockets, and the tap-open sheet) shares this single
   definition so they all animate identically. Do not add a page-local
   copy of transform/backface-visibility/transition rules for
   .ce-mobile-card-front/back -- .ce-mobile-card-art and
   .ce-mobile-sheet-art already opt into it below. Container sizing/
   border/background stays page-local; only the flip mechanics live
   here. Toggle .is-flipped on .ce-mobile-card (tiles/pockets) or on
   the art container itself (.ce-mobile-sheet-art) to flip.
   ============================================================ */
.ce-mobile-card-art,
.ce-mobile-sheet-art {
    position: relative;
    perspective: 1200px;
}

.ce-mobile-card-art .ce-mobile-card-front,
.ce-mobile-card-art .ce-mobile-card-back,
.ce-mobile-sheet-art .ce-mobile-card-front,
.ce-mobile-sheet-art .ce-mobile-card-back {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    backface-visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform: rotateY(0deg);
}

.ce-mobile-card-art .ce-mobile-card-back,
.ce-mobile-sheet-art .ce-mobile-card-back {
    transform: rotateY(180deg);
}

:is(.ce-mobile-card.is-flipped, .ce-mobile-sheet-art.is-flipped) .ce-mobile-card-front {
    transform: rotateY(-180deg);
}

:is(.ce-mobile-card.is-flipped, .ce-mobile-sheet-art.is-flipped) .ce-mobile-card-back {
    transform: rotateY(0deg);
}

.ce-binder-pocket .ce-mobile-card-art-fallback,
.ce-binder-pocket .ce-mobile-card-placeholder {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.68rem;
    font-weight: 800;
    text-align: center;
}

.ce-binder-pocket .ce-mobile-card-info {
    margin-top: 2px;
    padding: 0;
    border: 0;
    background: transparent;
    backdrop-filter: none;
    text-align: center;
}

.ce-mobile-card-titlerow {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}

/* Camera (lower-left) and sold-comps $ (upper-left) sit on the card art, matching the
   eye button's look (.cd-eye-btn, upper-right, in card-image-viewer.css). Shown in Binder
   pockets and the Set Checklist's phone carousel. */
.ce-mobile-card-scan-btn,
.ce-mobile-card-comps-btn {
    display: none;
    position: absolute;
    left: 8px;
    z-index: 6;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(3, 7, 14, 0.72);
    color: #fff;
    padding: 0;
    cursor: pointer;
}

.ce-mobile-card-scan-btn {
    bottom: 8px;
}

.ce-mobile-card-comps-btn {
    top: 8px;
    color: #f4cf80;
}

.ce-mobile-card-scan-btn svg,
.ce-mobile-card-comps-btn svg {
    width: 15px;
    height: 15px;
}

.ce-binder-pocket .ce-mobile-card-scan-btn,
.ce-binder-pocket .ce-mobile-card-comps-btn,
.ce-mobile-set-experience .ce-mobile-card-scan-btn,
.ce-mobile-set-experience .ce-mobile-card-comps-btn {
    display: inline-flex;
}

/* Mobile carousel tiles: the art box was flex-filling the tile (main.css/mobile-native-screen.css
   set aspect-ratio: auto), so a 5:7 card image left an empty band under it. Size the box to the
   card instead and let the tile hug its content; max-height keeps a short phone's tile inside its
   grid row, where the art then shrinks (flex-shrink) rather than overflowing. */
.ce-mobile-card-page .ce-mobile-card-art {
    flex: 0 1 auto !important;
    aspect-ratio: 5 / 7 !important;
}

.ce-mobile-card-page > .ce-mobile-card {
    height: auto !important;
    max-height: 100%;
    align-self: start;
}

.ce-binder-pocket .ce-mobile-card-info h2,
.ce-binder-pocket .ce-mobile-card-info h3 {
    margin: 0;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ce-binder-pocket .ce-mobile-card-info p,
.ce-binder-pocket .ce-mobile-card-number {
    display: none;
}

/* Set Checklist pockets render the number nested inside <h2> (see
   _CollectorMobileCard.cshtml's SetInventory branch) so it reads "#5 Cable"
   in line with the name -- only that nested case should override the hide
   above; Inventory/WishList still render the number as a separate sibling
   element and stay hidden here for space. */
.ce-binder-pocket .ce-mobile-card-info h2 .ce-mobile-card-number {
    display: inline;
    color: #f4cf80;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: normal;
    text-transform: none;
}

/* The mobile carousel's own CSS sizes .ce-mobile-card-titleline/.ce-mobile-card-button
   (the data-mobile-open-sheet click target) inside a max-width:900px media query, which
   never applies to this desktop pocket -- without this they collapse to a single
   ~12px text line with no padding, a real hit target but too small to reliably click. */
.ce-binder-pocket .ce-mobile-card-titleline,
.ce-binder-pocket .ce-mobile-card-button {
    display: flex;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

/* SetChecklist/Inventory pockets have a tap-to-open-sheet editor (see the sheet
   overrides below), so their full owned/wanted/trade editors don't need to fit
   in the pocket itself. WishList pockets have no sheet -- their inline
   editor/price/note controls stay visible, just shrunk to fit (further down). */
.ce-binder-pocket-setinventory .ce-mobile-card-editor,
.ce-binder-pocket-inventory .ce-mobile-card-editor,
.ce-binder-pocket-inventory .ce-mobile-card-counts,
.ce-binder-pocket-inventory .ce-mobile-price-row {
    display: none;
}

/* Parallel/variant stepper on Set Checklist and Inventory pockets -- full pocket
   width, same dropdown+stepper pill shape the mobile carousel uses. */
.ce-binder-pocket-setinventory .ce-mobile-card-parallel,
.ce-binder-pocket-inventory .ce-mobile-card-parallel {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 22px;
    align-items: center;
    width: 100%;
    min-height: 24px;
    margin-top: 2px;
    border: 1px solid rgba(212, 168, 83, 0.2);
    border-radius: 8px;
    background: rgba(2, 6, 23, 0.55);
    overflow: hidden;
    font-size: 0.66rem;
}

.ce-binder-pocket-setinventory .ce-mobile-card-parallel > button:not(.ce-mobile-parallel-picker),
.ce-binder-pocket-inventory .ce-mobile-card-parallel > button:not(.ce-mobile-parallel-picker) {
    display: grid;
    width: 100%;
    height: 22px;
    place-items: center;
    border: 0;
    background: transparent;
    color: #f4cf80;
}

.ce-binder-pocket-setinventory .ce-mobile-card-parallel > button:not(.ce-mobile-parallel-picker) svg,
.ce-binder-pocket-inventory .ce-mobile-card-parallel > button:not(.ce-mobile-parallel-picker) svg {
    width: 11px;
    height: 11px;
}

.ce-binder-pocket-setinventory .ce-mobile-parallel-picker,
.ce-binder-pocket-inventory .ce-mobile-parallel-picker {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 10px;
    column-gap: 3px;
    min-width: 0;
    height: 22px;
    align-items: center;
    width: 100%;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: inherit;
    font-weight: 800;
    padding: 0 4px;
    text-align: center;
}

.ce-binder-pocket-setinventory .ce-mobile-parallel-caret,
.ce-binder-pocket-inventory .ce-mobile-parallel-caret {
    width: 10px;
    height: 10px;
}

.ce-binder-pocket-setinventory [data-mobile-parallel-label],
.ce-binder-pocket-inventory [data-mobile-parallel-label] {
    color: rgba(255, 255, 255, 0.7);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Editable Own/Want quantity fields under Set Checklist and Inventory pockets --
   reuses the same .qty-input/.qty-btn hooks the classic row-list saves through
   (see set-checklist.js's document-level delegated listeners), so typing or
   tapping +/- here saves exactly like the classic table does, no extra JS. */
.ce-binder-pocket-editor {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
}

.ce-binder-pocket-field {
    display: flex;
    align-items: center;
    cursor: help;
}

.ce-binder-pocket-stepper {
    display: flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.04);
    overflow: hidden;
}

.ce-binder-pocket-stepper .qty-btn {
    width: 20px;
    height: 22px;
    border: 0;
    background: transparent;
    color: #f4cf80;
    font-size: 0.8rem;
    line-height: 1;
}

.ce-binder-pocket-qty {
    width: 2.2em;
    height: 22px;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    text-align: center;
    padding: 0;
}

.ce-binder-pocket-qty:focus {
    outline: 1px solid #f4cf80;
    outline-offset: -1px;
}

/* At the narrow end of the desktop range, two side-by-side steppers would
   overflow their pocket and place buttons over a neighboring card. */
@container (max-width: 145px) {
    .ce-binder-pocket-editor {
        flex-direction: column;
        gap: 3px;
    }

    .ce-binder-pocket-field {
        width: 100%;
        min-width: 0;
        gap: 3px;
    }

    .ce-binder-pocket-field::before {
        content: "Own";
        flex: 0 0 27px;
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.58rem;
        font-weight: 800;
    }

    .ce-binder-pocket-field[title="Copies you want"]::before { content: "Want"; }
    .ce-binder-pocket-field[title="Copies tradeable"]::before { content: "Trade"; }

    .ce-binder-pocket-stepper {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: space-between;
    }

    .ce-binder-pocket-stepper .qty-btn {
        flex: 0 0 20px;
    }

    .ce-binder-pocket-qty {
        flex: 1 1 auto;
        min-width: 0;
        width: 1px;
    }
}

/* ---- WishList pocket: compact read-only Want/Price badge, editing moved into
   the shared sheet -- mirrors .ce-binder-pocket-stats' look. ---- */

.ce-binder-pocket-wishlist .ce-mobile-card-counts {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 0.6rem;
    font-weight: 800;
}

.ce-binder-pocket-wishlist .ce-mobile-card-counts span {
    border-radius: 6px;
    padding: 1px 5px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
}

.ce-binder-pocket-wishlist .ce-mobile-card-note-link {
    display: block;
    margin-top: 2px;
    font-size: 0.62rem;
    text-align: center;
}

/* The sheet (and all of its layout CSS) is normally scoped inside a
   @media (max-width: 900px) block, so it needs its own non-media-query copy here
   to be usable from a desktop Binder pocket -- values mirror the mobile sheet CSS
   in SetInventory.cshtml exactly. Unlike the mobile version, this one must set
   both states explicitly (hidden by default, shown when open) since there's no
   base "display: none" rule for .ce-mobile-sheet outside the media query. */
.ce-mobile-sheet[aria-hidden="true"] {
    display: none;
}

.ce-mobile-sheet[aria-hidden="false"] {
    display: block;
}

/* Every rule below is scoped to .ce-mobile-sheet[aria-hidden="false"] and
   deliberately NOT scoped to body.ce-binder-active -- Inventory and WishList
   have no narrow-width sheet CSS of their own (only SetInventory does, see
   its own @media max-width:900px block), and their mobile-carousel sheet
   trigger is reachable regardless of the user's persisted Classic/Binder
   preference. Gating this on ce-binder-active caused two different bugs
   depending on that preference: (1) with Binder persisted, the backdrop/panel
   rendered as a permanent fixed overlay the instant the page loaded,
   regardless of aria-hidden, silently swallowing every click on the page;
   (2) with Classic persisted, none of this CSS applied at all, so opening
   the sheet toggled aria-hidden correctly but rendered nothing visible and
   left the page scroll-locked with no reachable close button. */
.ce-mobile-sheet[aria-hidden="false"] .ce-mobile-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    border: 0;
    background: rgba(0, 0, 0, 0.58);
}

/* A real centered modal on desktop (not a mobile bottom-drawer) with a much
   bigger card image -- this is the "card detail" view opened by tapping a
   pocket, so the scan/art should actually be readable. */
.ce-mobile-sheet[aria-hidden="false"] .ce-mobile-sheet-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    z-index: 1201;
    border: 1px solid rgba(212, 168, 83, 0.24);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(4, 8, 14, 0.98));
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
    padding: 1.5rem;
    width: min(92vw, 460px);
    max-height: 88vh;
    overflow-y: auto;
}

.ce-mobile-sheet[aria-hidden="false"] .ce-mobile-sheet-grabber {
    display: none;
}

/* align-items: stretch (not center) so the info column (title row, subtitle,
   parallel picker) spans the panel's full width like mobile's grid layout
   does -- with center it only shrinks to its content width, which left the
   scan/camera button sitting right next to the title instead of pushed to
   the panel's right edge like it is on mobile. */
.ce-mobile-sheet[aria-hidden="false"] .ce-mobile-sheet-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 0.35rem;
}

.ce-mobile-sheet[aria-hidden="false"] .ce-mobile-sheet-art-wrap {
    width: 100%;
    max-width: 320px;
    margin: 0 auto 0.5rem;
}

.ce-mobile-sheet[aria-hidden="false"] .ce-mobile-sheet-art {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    aspect-ratio: 2.5 / 3.5;
    background: rgba(255, 255, 255, 0.04);
    width: 100%;
}

.ce-mobile-sheet[aria-hidden="false"] .ce-mobile-sheet-art img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ce-mobile-sheet-art-wrap {
    position: relative;
}

/* .ce-mobile-sheet-art's flip mechanics (position, perspective,
   front/back transform+backface-visibility) come from the canonical
   block above -- see the comment there. Its own decorative box
   styling (border/background/aspect-ratio) is further down, in the
   desktop [aria-hidden="false"] override and main.css's mobile block. */

.ce-mobile-sheet-flip-btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    border: 1px solid rgba(212, 168, 83, 0.35);
    border-radius: 10px;
    background: rgba(8, 18, 38, 0.85);
    color: #f4cf80;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.3rem 0.6rem;
}

.ce-mobile-sheet-flip-btn.hidden {
    display: none;
}

.ce-mobile-sheet-titleline {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0;
}

.ce-mobile-sheet-titleline a {
    color: inherit;
    text-decoration: none;
}

.ce-mobile-sheet-titleline a:hover {
    color: #f4cf80;
    text-decoration: underline;
}

.ce-mobile-sheet-titlerow {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ce-mobile-sheet-titlerow .ce-mobile-sheet-titleline {
    flex: 1;
    min-width: 0;
}

.ce-mobile-sheet-scan-btn {
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: #f4cf80;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0.9;
    transition: opacity 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.ce-mobile-sheet-scan-btn:hover,
.ce-mobile-sheet-scan-btn:focus-visible {
    opacity: 1;
}

/* "?" report-image button beside the camera, and the report dialog it opens. The dialog
   sits inside the sheet panel (absolute, covering it) so it inherits the panel's stacking. */
.ce-mobile-sheet-report-btn {
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border: 1px solid rgba(244, 207, 128, 0.55);
    border-radius: 50%;
    background: transparent;
    color: #f4cf80;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0.85;
    transition: opacity 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.ce-mobile-sheet-report-btn:hover,
.ce-mobile-sheet-report-btn:focus-visible {
    opacity: 1;
}

.ce-report-image {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    padding: 1rem;
    border-radius: inherit;
    background: rgba(4, 8, 14, 0.82);
}

.ce-report-image.hidden {
    display: none;
}

.ce-report-image-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: min(100%, 360px);
    padding: 1.1rem;
    border: 1px solid rgba(212, 168, 83, 0.35);
    border-radius: 16px;
    background: #0b1424;
    color: #f5f5f5;
}

.ce-report-image-panel h3 {
    margin: 0;
    color: #f4cf80;
    font-size: 1.15rem;
}

.ce-report-image-card {
    margin: 0;
    color: rgba(245, 245, 245, 0.7);
    font-size: 0.9rem;
}

.ce-report-image-panel label {
    margin-top: 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.ce-report-image-panel select,
.ce-report-image-panel textarea {
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    background: #050b16;
    color: #f5f5f5;
    font: inherit;
    font-size: 0.9rem;
}

.ce-report-image-panel textarea {
    resize: vertical;
}

.ce-report-image-status {
    margin: 0;
    font-size: 0.85rem;
    color: #f4cf80;
}

.ce-report-image-status.is-error {
    color: #ff8a80;
}

.ce-report-image-status.hidden {
    display: none;
}

.ce-report-image-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.ce-report-image-actions button {
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
}

.ce-report-image-cancel {
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: transparent;
    color: #f5f5f5;
}

.ce-report-image-submit {
    border: 0;
    background: #d4a853;
    color: #111;
}

.ce-report-image-submit:disabled {
    opacity: 0.6;
    cursor: default;
}

.ce-mobile-tip-bubble {
    position: fixed;
    z-index: 1400;
    max-width: min(260px, calc(100vw - 24px));
    padding: 0.45rem 0.7rem;
    border: 1px solid rgba(212, 168, 83, 0.4);
    border-radius: 10px;
    background: rgba(8, 18, 38, 0.96);
    color: #f5f5f5;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

/* This is a <button> that opens the same ce-mobile-parallel-popover used by
   the grid card (see .ce-mobile-parallel-picker in mobile-native-screen.css
   for the label/caret layout) -- a native <select>'s open option list can't be
   restyled to match the site's dark/gold theme cross-browser, so the sheet
   reuses the same custom popover component instead of fighting that. */
.ce-mobile-sheet-parallel-select {
    margin-top: 0.5rem;
    width: 100%;
    border: 1px solid rgba(212, 168, 83, 0.28);
    border-radius: 14px;
    background: rgba(2, 6, 23, 0.68);
}

.ce-mobile-sheet-parallel-select.hidden {
    display: none;
}

/* .ce-mobile-parallel-picker (the label/caret row layout) lives entirely
   inside mobile-native-screen.css's @media (max-width: 900px) block, so the
   desktop sheet -- which shares this same button/class -- got none of it and
   rendered as a bare bordered box with the label and caret squished together
   using browser button defaults. This is the desktop-width equivalent,
   mirroring mobile's row layout (label left, caret right) at a size that
   suits the wider centered panel. */
@media (min-width: 901px) {
    .ce-mobile-sheet-parallel-select {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 44px;
        gap: 0.5rem;
        padding: 0 0.9rem;
        color: #fff;
        font-size: 0.85rem;
        font-weight: 900;
    }

    .ce-mobile-sheet-parallel-select > span:first-child {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.ce-mobile-sheet[aria-hidden="false"] .ce-mobile-sheet-card h2 {
    font-size: 1.2rem;
}

.ce-mobile-sheet[aria-hidden="false"] .ce-mobile-sheet-counts {
    display: grid;
    gap: 0.65rem;
    margin-top: 1rem;
}

.ce-mobile-sheet[aria-hidden="false"] .ce-mobile-sheet-counter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 43px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    padding: 0.4rem 0.5rem 0.4rem 0.72rem;
}

.ce-mobile-sheet[aria-hidden="false"] .ce-mobile-sheet-counter span {
    color: rgba(255, 255, 255, 0.76);
    font-weight: 900;
}

.ce-mobile-sheet[aria-hidden="false"] .ce-mobile-sheet-counter div {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.ce-mobile-sheet[aria-hidden="false"] .ce-mobile-sheet-counter button {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(212, 168, 83, 0.24);
    border-radius: 12px;
    background: rgba(212, 168, 83, 0.1);
    color: #f4cf80;
    font-size: 1rem;
    font-weight: 950;
    line-height: 1;
}

.ce-mobile-sheet[aria-hidden="false"] .ce-mobile-sheet-counter strong {
    min-width: 25px;
    color: #fff;
    font-size: 1.1rem;
    text-align: center;
}

/* Explicit !important overrides so the JS-driven wishlist-mode toggle (which
   just adds/removes the plain .hidden utility class) can still win against
   these more specific selectors -- matching the same pattern already used
   elsewhere in this file (e.g. .ce-mobile-card-editor.hidden). */
.ce-mobile-sheet[aria-hidden="false"] .ce-mobile-sheet-counter.hidden,
.ce-mobile-sheet[aria-hidden="false"] .ce-mobile-sheet-price-row.hidden,
.ce-mobile-sheet[aria-hidden="false"] .ce-mobile-sheet-note-link.hidden {
    display: none !important;
}

.ce-mobile-sheet[aria-hidden="false"] .ce-mobile-sheet-done {
    width: 100%;
    min-height: 44px;
    margin-top: 0.7rem;
    border: 0;
    border-radius: 18px;
    background: #d4a853;
    color: #0a0f1a;
    font-weight: 950;
}

.ce-mobile-sheet[aria-hidden="false"] .ce-mobile-sheet-price-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.65rem;
}

.ce-mobile-sheet[aria-hidden="false"] .ce-mobile-sheet-price-row .ce-mobile-price-prefix {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 850;
}

.ce-mobile-sheet[aria-hidden="false"] .ce-mobile-sheet-price-row .ce-mobile-price {
    flex: 1 1 auto;
    min-width: 0;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.94);
    font-weight: 850;
    text-align: center;
}

.ce-mobile-sheet[aria-hidden="false"] .ce-mobile-sheet-note-link {
    width: 100%;
    min-height: 42px;
    margin-top: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.7);
    font-weight: 800;
    font-size: 0.85rem;
}

/* Inventory has its own parallel sheet implementation (different class names,
   same "scoped inside @media max-width:900px" issue) -- same fix, mirrored. */
body.ce-binder-active .ce-mobile-inventory-sheet[aria-hidden="false"] {
    display: block;
}

body.ce-binder-active .ce-mobile-inventory-sheet {
    position: fixed;
    inset: 0;
    z-index: 1300;
}

body.ce-binder-active .ce-mobile-inventory-sheet-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.44);
    backdrop-filter: blur(2px);
}

body.ce-binder-active .ce-mobile-inventory-sheet-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: min(92vw, 460px);
    max-height: 88vh;
    overflow-y: auto;
    margin: 0;
    border: 1px solid rgba(212, 168, 83, 0.24);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(4, 8, 15, 0.98));
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
    padding: 1.5rem;
}

body.ce-binder-active .ce-mobile-inventory-sheet-grabber {
    display: none;
}

body.ce-binder-active .ce-mobile-inventory-sheet-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
}

body.ce-binder-active .ce-mobile-inventory-sheet-art {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 2.5 / 3.5;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    margin: 0 auto 0.5rem;
}

body.ce-binder-active .ce-mobile-inventory-sheet-art img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

body.ce-binder-active .ce-mobile-inventory-sheet-card h2 {
    margin: 0.08rem 0 0;
    color: rgba(255, 255, 255, 0.96);
    font-size: 1.2rem;
    font-weight: 950;
}

body.ce-binder-active .ce-mobile-inventory-sheet-card p {
    margin: 0.12rem 0 0;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.72rem;
}

body.ce-binder-active .ce-mobile-inventory-sheet-counter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.035);
    padding: 0.62rem 0.7rem;
}

body.ce-binder-active .ce-mobile-inventory-sheet-counter span {
    color: rgba(255, 255, 255, 0.82);
    font-weight: 950;
}

body.ce-binder-active .ce-mobile-inventory-sheet-counter div {
    display: grid;
    grid-template-columns: 42px 46px 42px;
    align-items: center;
    gap: 0.45rem;
    text-align: center;
}

body.ce-binder-active .ce-mobile-inventory-sheet-counter button {
    height: 42px;
    border: 1px solid rgba(212, 168, 83, 0.28);
    border-radius: 14px;
    background: rgba(212, 168, 83, 0.1);
    color: #f4cf80;
    font-size: 1.1rem;
    font-weight: 950;
}

body.ce-binder-active .ce-mobile-inventory-sheet-counter strong {
    color: rgba(255, 255, 255, 0.96);
    font-size: 1.15rem;
}

body.ce-binder-active .ce-mobile-inventory-sheet-done {
    width: 100%;
    margin-top: 0.65rem;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #f7d37f, #c8963c);
    color: #1f1604;
    padding: 0.68rem;
    font-weight: 950;
}

/* ---- Page-flip mechanism ---- */

.ce-binder-leaf {
    position: absolute;
    inset: 0 0 0 50%;
    transform-style: preserve-3d;
    transform-origin: left center;
    transform: rotateY(0deg);
    transition: transform 0.55s cubic-bezier(0.4, 0.2, 0.2, 1);
    pointer-events: none;
    visibility: hidden;
}

.ce-binder-leaf.is-flipping {
    visibility: visible;
    pointer-events: auto;
}

.ce-binder-leaf.is-flipping-backward {
    inset: 0 50% 0 0;
    transform-origin: right center;
}

/* Next turns the right page left; Previous turns the left page right. */
.ce-binder-leaf.is-turning-forward {
    transform: rotateY(-180deg);
}

.ce-binder-leaf.is-turning-backward {
    transform: rotateY(180deg);
}

.ce-binder-leaf-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    overflow: hidden;
    border-radius: 16px;
}

.ce-binder-leaf-back {
    transform: rotateY(180deg);
}

/* A cloned page fills the leaf so an all-empty page still turns at full size. */
.ce-binder-leaf-face > .ce-binder-page {
    height: 100%;
    box-sizing: border-box;
}

.ce-binder-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
}

.ce-binder-controls button {
    border: 1px solid rgba(212, 168, 83, 0.32);
    border-radius: 9px;
    background: rgba(212, 168, 83, 0.08);
    color: #f4cf80;
    padding: 5px 12px;
    font-size: 0.76rem;
    font-weight: 800;
    cursor: pointer;
}

.ce-binder-controls button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ce-binder-controls .ce-binder-index {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
}

/* Brief dim while a binder-page boundary crossing is in flight (AJAX swap,
   not a full page reload) -- self-clears since the whole node gets replaced. */
.ce-binder-loading {
    opacity: 0.5;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

/* ============================================================
   Mobile Scan Sheet
   ============================================================ */

.ce-mobile-scan-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.ce-mobile-scan-overlay.is-open {
    display: block;
    opacity: 1;
}

.ce-mobile-scan-sheet {
    position: fixed;
    left: 50%;
    bottom: calc(var(--ce-mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
    z-index: 1310;
    width: min(calc(100vw - 16px), 480px);
    max-height: calc(100dvh - var(--ce-header-height) - var(--ce-mobile-bottom-nav-height) - 24px);
    transform: translateX(-50%) translateY(calc(100% + var(--ce-mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px)));
    border: 1px solid rgba(212, 168, 83, 0.2);
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(7, 11, 18, 0.99));
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px);
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.ce-mobile-scan-sheet.is-open {
    transform: translateX(-50%) translateY(0);
}

.ce-mobile-scan-handle {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.2);
}

.ce-mobile-scan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 8px;
    position: sticky;
    top: 0;
    background: rgba(15, 23, 42, 0.98);
    z-index: 1;
}

.ce-mobile-scan-title {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    font-weight: 900;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.9);
}

.ce-mobile-scan-card-number {
    color: #f4cf80;
    font-weight: 950;
    white-space: nowrap;
}

.ce-mobile-scan-close {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(212, 168, 83, 0.35);
    border-radius: 8px;
    background: rgba(212, 168, 83, 0.1);
    color: #f4cf80;
    font-size: 1rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.ce-mobile-scan-close:hover,
.ce-mobile-scan-close:focus-visible {
    background: rgba(212, 168, 83, 0.25);
    border-color: rgba(212, 168, 83, 0.6);
}

.ce-mobile-scan-body {
    padding: 8px 18px calc(24px + env(safe-area-inset-bottom, 0px));
}

.ce-mobile-scan-file-group {
    margin-bottom: 12px;
}

.ce-mobile-scan-file-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.ce-mobile-scan-drop {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 64px;
    border: 1px dashed rgba(255, 255, 255, 0.22);
    border-radius: 12px;
    padding: 12px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.ce-mobile-scan-drop.ce-mobile-scan-drop-hasfile {
    border-color: rgba(110, 231, 183, 0.45);
    color: #6ee7b7;
}

.ce-mobile-scan-license {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    font-size: 0.72rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.6);
}

.ce-mobile-scan-license input {
    margin-top: 2px;
    accent-color: #d4a853;
}

.ce-mobile-scan-submit-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

.ce-mobile-scan-submit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    font-size: 0.85rem;
    font-weight: 700;
    border: 1px solid rgba(212, 168, 83, 0.5);
    border-radius: 12px;
    background: rgba(212, 168, 83, 0.15);
    color: #f4cf80;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.ce-mobile-scan-submit:hover:not(:disabled) {
    background: rgba(212, 168, 83, 0.28);
    border-color: rgba(212, 168, 83, 0.7);
}

.ce-mobile-scan-submit:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ce-mobile-scan-status {
    margin-top: 10px;
    font-size: 0.78rem;
    min-height: 1.1em;
}

.ce-mobile-scan-status-ok { color: #6ee7b7; }
.ce-mobile-scan-status-error { color: #fca5a5; }

/* Parallel tag for Inventory cards inside Binder pockets (the subtitle is hidden there for space). */
.ce-pocket-tag { display: none; }
.ce-binder-pocket .ce-pocket-tag { display: block; overflow: hidden; color: #f4cf80; font-size: .62rem; font-weight: 800; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }