:root {
    /* Dark "Chase" theme — near-black navy canvas, vivid indigo + foil signature */
    --canvas: #0E0B1A;
    --surface: #181430;
    --surface-2: #221E3A;
    --surface-3: #2A2545;
    --line: #2A2741;
    --text: #F3F1FB;
    --text-muted: #A7A3C0;
    --ink: #171529;
    --accent: #7C5CFF;
    --accent-press: #5B2EE6;
    --accent-wash: rgba(124, 92, 255, 0.16);
    --accent-line: rgba(124, 92, 255, 0.45);
    --amber: #F5A623;
    --pos: #4FD79B;
    --neg: #FF6B57;
    --hot: #E3350D;
    --radius: 0.85rem;
    --display: "Bricolage Grotesque", "Segoe UI", Helvetica, Arial, sans-serif;
    --body: "Hanken Grotesk", "Segoe UI", Helvetica, Arial, sans-serif;
    --mono: "Space Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
    --foil: linear-gradient(115deg, #7af6ff 0%, #7C5CFF 28%, #ff5cc8 52%, #ffd166 74%, #7af6ff 100%);
}

html, body {
    font-family: var(--body);
    background: var(--canvas);
    color: var(--text);
}

a, .btn-link {
    color: #9b80ff;
}

.btn {
    border-radius: 0.5rem;
    font-weight: 600;
    padding: 0.6rem 1.1rem;
    font-size: 0.94rem;
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover {
    filter: brightness(1.12);
}

.btn-primary {
    color: #fff;
    background: #7C5CFF;
    border: 1px solid #7C5CFF;
    box-shadow: 0 2px 6px rgba(91, 46, 230, 0.22);
}

.btn-primary:hover {
    background: #5B2EE6;
    border-color: #5B2EE6;
}

.btn-outline-primary {
    color: #7C5CFF;
    border-color: #7C5CFF;
    background: transparent;
}

.btn-outline-primary:hover {
    background: rgba(124, 92, 255, 0.16);
    border-color: #7C5CFF;
    color: #7C5CFF;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus, .form-select:focus {
    box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.35);
}

.content {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
}

h1, h2, h3, h4 {
    color: #F3F1FB;
    font-family: var(--display);
    letter-spacing: -0.01em;
}

h1 {
    font-size: clamp(1.8rem, 2.8vw, 2.8rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
}

/* Monospace numerals read like price tags and grading certs across the site. */
.stat-value,
.auction-price strong,
.balance-panel .balance-amount,
.highlight-number,
.stats-grid dd,
.inventory-card-title {
    font-family: var(--mono);
    letter-spacing: -0.02em;
}

@media (prefers-reduced-motion: reduce) {
    .brand-mark::after,
    .hero-foil-rule,
    .hero-foil-text,
    .holo-card,
    .holo-card-inner::after {
        animation: none !important;
    }
}

h2 {
    font-size: 1.4rem;
}

h1:focus {
    outline: none;
}

.lead {
    color: #A7A3C0;
    max-width: 72rem;
    font-size: 1rem;
}

.eyebrow {
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.72rem;
    font-weight: 700;
    color: #7C5CFF;
}

.surface,
.hero-panel,
.info-card,
.auction-card,
.debate-card,
.form-shell,
.stat-card,
.cta-panel,
.page-hero,
.toolbar-card,
.empty-state,
.profile-hero,
.trust-banner {
    background: #181430;
    border: 1px solid #2A2741;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

.contact-msg--archived {
    opacity: 0.55;
}

.hero-panel,
.debate-card,
.form-shell,
.page-hero,
.toolbar-card,
.empty-state,
.profile-hero,
.trust-banner {
    padding: 1.4rem;
}

.page-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.8fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.hero-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.8fr);
    gap: 1rem;
    align-items: stretch;
    background: #181430;
    overflow: hidden;
}

.hero-panel-home {
    position: relative;
}

.hero-panel-home::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(91, 46, 230, 0.06), transparent 40%);
    pointer-events: none;
}

.hero-copy,
.hero-aside {
    position: relative;
    z-index: 1;
}

.hero-copy {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.hero-actions,
.section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.android-cta-actions {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.cta-panel .section-actions:not(.android-cta-actions) {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}

.cta-panel .section-actions:not(.android-cta-actions) .btn {
    text-align: center;
    white-space: nowrap;
}

.android-cta-logo {
    width: 7.5rem;
    height: auto;
}

.hero-aside {
    background: #7C5CFF;
    color: rgba(255,255,255,0.92);
    border-radius: 0.65rem;
    padding: 1.2rem;
}

.hero-aside h3,
.hero-aside h4,
.hero-aside strong {
    color: white;
}

.hero-aside .lead,
.hero-aside p,
.hero-aside li {
    color: rgba(255, 255, 255, 0.88);
}

.content-section {
    margin-top: 1.5rem;
}

.listing-capacity-panel {
    padding: 1.15rem 1.25rem;
    border: 2px solid #322E4D;
    border-radius: 1rem;
    background: linear-gradient(180deg, #181430 0%, #201C38 100%);
}

.listing-capacity-panel-danger {
    border: 4px solid #FF5A3D;
    box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.14);
    background: linear-gradient(180deg, rgba(227, 53, 13, 0.16) 0%, rgba(227, 53, 13, 0.16) 100%);
}

.listing-capacity-panel-danger .section-header h2,
.listing-capacity-panel-danger .listing-capacity-message {
    color: #FF8A73;
}

.listing-capacity-message {
    font-size: 1rem;
    font-weight: 600;
}

.listing-capacity-icon {
    font-size: 1.15rem;
    margin-right: 0.45rem;
    vertical-align: -0.08rem;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.market-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.85rem;
}

.home-carousel {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.home-carousel-viewport {
    position: relative;
    overflow: hidden;
    padding-inline: 2rem;
}

.home-carousel-track {
    display: flex;
    /* No gap: one full-width slide is visible at a time, so a gap would only push a sliver of the
       next slide into view at the edge. */
    gap: 0;
}

.home-carousel-slide {
    /* One large featured card at a time; the slot/order logic clips the rest via the viewport. */
    flex: 0 0 100%;
    min-width: 0;
}

/* Featured-card layout: large image on top, supporting text centered below it. Scoped to the
   carousel so list/auction media-cards (horizontal, small thumbnail) are unaffected. */
.home-carousel-slide.media-card {
    flex-direction: column;
    align-items: center;
    gap: 0;
    overflow: hidden;
    padding: 0;
}

.home-carousel-slide .media-card-figure {
    flex: none;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0E0B1A;
    border-bottom: 1px solid #2A2741;
}

.home-carousel-slide .media-card-figure > a {
    display: block;
    width: 100%;
}

.home-carousel-slide .auction-image {
    width: 100%;
    height: clamp(280px, 34vw, 440px);
    object-fit: contain;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 1rem;
}

.home-carousel-slide .auction-image-placeholder {
    height: clamp(280px, 34vw, 440px);
}

.home-carousel-slide .media-card-body {
    width: 100%;
    max-width: 640px;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    padding: 1.5rem 1.5rem 1.75rem;
}

.home-carousel-slide .card-kicker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0; /* spacing comes from the body's flex gap, not the base kicker margin */
}

.home-carousel-slide .media-card-body h2 {
    margin: 0;
}

.home-carousel-slide .card-summary {
    margin: 0;
    color: #A7A3C0;
}

.home-carousel-slide .pill-row,
.home-carousel-slide .auction-price,
.home-carousel-slide .auction-action-row {
    justify-content: center;
}

.home-carousel-slide .auction-action-row {
    width: 100%;
    max-width: 28rem;
    margin-top: 0.35rem;
}

.home-carousel-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.home-carousel-indicators {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.home-carousel-indicator {
    width: 0.8rem;
    height: 0.8rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #3A3658;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.home-carousel-indicator.active {
    background: #7C5CFF;
    transform: scale(1.1);
}

.home-carousel-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #7C5CFF;
    transform: translateY(-50%);
    font-size: 2.5rem;
    line-height: 1;
    box-shadow: none;
}

.home-carousel-nav:hover {
    background: transparent;
    color: #5B2EE6;
    filter: none;
}

.home-carousel-nav:focus,
.home-carousel-nav:active:focus {
    background: transparent;
    box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.35);
}

.home-carousel-nav-previous {
    left: 0.35rem;
}

.home-carousel-nav-next {
    right: 0.35rem;
}

.home-carousel-nav span {
    display: block;
    transform: translateY(-0.08rem);
}

.profile-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
}

.profile-card-full {
    grid-column: 1 / -1;
}

.market-grid-tight {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.85rem;
}

.info-card,
.auction-card,
.stat-card {
    padding: 1.2rem;
}

.info-card {
    background: #181430;
}

.form-disabled {
    border: 0;
    padding: 0;
    margin: 0;
    opacity: 0.66;
}

.stat-card {
    text-align: left;
}

.inventory-stat-card,
.inventory-card {
    border: 1px solid #2A2741;
}

.inventory-card-title {
    font-size: 1.3rem;
}

.stat-label {
    display: block;
    color: #A7A3C0;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.35rem;
    font-weight: 700;
}

.stat-value {
    font-size: 1.7rem;
    font-weight: 700;
    color: #F3F1FB;
}

.pill-row,
.image-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.listing-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.75rem;
}

.listing-preview-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.75rem;
    border: 1px solid #2A2741;
    border-radius: 0.75rem;
    background: #181430;
}

.listing-preview-thumb {
    width: 100%;
    height: 220px;
    object-fit: contain;
    border-radius: 0.5rem;
    border: 1px solid #2A2741;
    background: #0E0B1A;
}

.listing-preview-meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: rgba(124, 92, 255, 0.16);
    border: 1px solid rgba(124, 92, 255, 0.45);
    color: #7C5CFF;
    font-size: 0.8rem;
    font-weight: 600;
}

.status-pill.warm {
    background: rgba(245, 166, 35, 0.16);
    border-color: rgba(245, 166, 35, 0.45);
    color: #F5B85C;
}

.status-pill.success {
    background: rgba(46, 204, 113, 0.16);
    border-color: rgba(46, 204, 113, 0.45);
    color: #4FD79B;
}

.diagram {
    margin-bottom: 0;
    color: #A7A3C0;
    white-space: pre-wrap;
    font-size: 0.9rem;
    background: #201C38;
    border-radius: 0.5rem;
    padding: 0.9rem;
    border: 1px solid #2A2741;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin: 0;
}

.stats-grid dt {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #A7A3C0;
}

.stats-grid dd {
    margin: 0.15rem 0 0;
    font-weight: 700;
    color: #F3F1FB;
    font-size: 1rem;
}

.card-kicker {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.85rem;
}

.card-summary {
    color: #A7A3C0;
    margin-bottom: 0.85rem;
}

.auction-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    background: #181430;
}

.listing-card-link {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.listing-card-link:hover,
.listing-card-link:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.media-card {
    flex-direction: row;
    align-items: flex-start;
}

.media-card-figure {
    flex: 0 0 112px;
    width: 112px;
}

.media-card-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.auction-image {
    width: 112px;
    height: 112px;
    object-fit: contain;
    border-radius: 0.5rem;
    background: #0E0B1A;
    border: 1px solid #2A2741;
}

.auction-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #A7A3C0;
    font-weight: 600;
    text-align: center;
    padding: 0.75rem;
}

.auction-header,
.profile-header-row {
    display: flex;
    justify-content: space-between;
    gap: 0.85rem;
    align-items: start;
}

.auction-price {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.auction-action-row,
.checkout-actions,
.toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.auction-action-row .btn {
    flex: 1 1 12rem;
}

.listing-primary-actions {
    display: flex;
    flex: 1 1 100%;
    gap: 0.6rem;
}

.listing-primary-actions .btn {
    flex: 1 1 0;
}

@media (max-width: 767.98px) {
    .home-carousel-viewport {
        padding-inline: 2rem;
    }

    .home-carousel-slide {
        flex-basis: 100%;
    }

    .home-carousel-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .home-carousel-nav {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 2rem;
    }

    .media-card {
        flex-direction: column;
    }

    .media-card-figure,
    .auction-image {
        width: 100%;
    }

    .auction-image {
        height: 180px;
    }

    .listing-primary-actions {
        flex-direction: column;
    }
}

.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.9fr);
    gap: 0.85rem;
}

.auction-price strong {
    font-size: 1.7rem;
    color: #F3F1FB;
}

.auction-meta,
.muted {
    color: #A7A3C0;
}

.toolbar-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.85rem;
}

.my-listing-card {
    overflow: hidden;
}

.my-listing-card-image-wrap {
    margin: -1.2rem -1.2rem 0;
}

.my-listing-image-button {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.my-listing-image {
    width: 100%;
    height: 220px;
    object-fit: contain;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    background: #201C38;
}

.my-listing-card .auction-header {
    align-items: flex-start;
}

.my-listing-card .pill-row {
    max-width: 100%;
}

/* ---- My Listings: quick PriceCharting sync ------------------------------------------------
   Flip guide-following on or off (and pick how it follows) without opening the editor. */

.price-sync {
    margin-top: 0.9rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.03);
}

.price-sync-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

.price-sync-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--text-muted);
}

.price-sync-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.price-sync-controls .form-select {
    width: auto;
    min-width: 13rem;
    flex: 0 1 auto;
}

.price-sync-percent {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.price-sync-percent .form-control {
    width: 5rem;
}

.price-sync-suffix,
.price-sync-note {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.price-sync-note {
    margin: 0.55rem 0 0;
}

@media (max-width: 560px) {
    /* Stack rather than wrap mid-control on a phone. */
    .price-sync-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .price-sync-controls .form-select {
        min-width: 0;
        width: 100%;
    }
}

/* Bootstrap's .text-muted and .form-text are a mid grey meant for light backgrounds; on this
   dark theme they sit near-invisible. Point them at the theme's own muted token so every field
   hint and helper line stays readable. */
.text-muted,
.form-text {
    color: var(--text-muted) !important;
}

/* A label's "(optional)" suffix is part of the label, not a hint — same colour as the label
   text so it reads as one phrase instead of fading out. */
.form-label-optional {
    font-weight: 400;
    opacity: 0.85;
}

/* Explanatory line under a channel control. */
.channel-hint {
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ---- Edit listing: page layout -------------------------------------------------------------
   Photos take their own full-width row, then the details form spans the full width beneath it.
   These used to share a .market-grid, which on desktop squeezed both into roughly half a screen
   each — the form's own two-column rows then had nowhere to go and every field sat cramped.
   Stacking costs a little vertical scroll and gives the form the whole width. */
.edit-listing-layout {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* ---- Edit listing: pricing & channels ------------------------------------------------------
   One market price at the top, then a card per sales channel. Each channel owns its own pricing
   mode so the seller can see what a card costs on each platform side by side. */

.channel-market {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 1rem 1.15rem;
    background: rgba(255, 255, 255, 0.03);
    margin-bottom: 1rem;
}

.channel-market-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.channel-market-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.channel-market-value {
    font-family: var(--mono);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.channel-market-note {
    margin: 0.5rem 0 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.channel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.channel-card {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 1rem 1.15rem;
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* An unticked channel stays readable but visibly inactive, so "this is off" is obvious at a glance. */
.channel-card-off {
    opacity: 0.62;
    background: transparent;
}

.channel-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.channel-card-head-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.channel-card-title {
    font-weight: 700;
    font-size: 1.05rem;
}

.channel-modes {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* The value input belonging to a mode, indented to line up under its radio label. */
.channel-percent {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.35rem;
    max-width: 11rem;
}

.channel-percent-suffix {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.channel-price-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.channel-price-row .form-control {
    max-width: 9rem;
    font-family: var(--mono);
}

.channel-net,
.channel-off-note {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* Seller's own stock number, the same value eBay shows as the Custom Label. Monospaced so a code
   like PC-0142 stays scannable when matching a physical card to its listing. */
.my-listing-sku {
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

.lightbox-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(17, 24, 39, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.lightbox-image {
    max-width: min(92vw, 1200px);
    max-height: 88vh;
    width: auto;
    height: auto;
    border-radius: 0.75rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    background: #181430;
}

.lightbox-close {
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #111827;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}

.toolbar-card-stack {
    display: block;
}

.toolbar-search-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1.8fr) repeat(2, minmax(160px, 1fr));
    gap: 0.65rem;
}

.empty-state {
    text-align: center;
}

.empty-state-compact {
    padding: 0.9rem 1rem;
}

.split-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr);
    gap: 0.85rem;
}

.listing-detail-hero-image {
    width: 100%;
    height: 420px;
    object-fit: contain;
    border-radius: 0.75rem;
    border: 1px solid #2A2741;
    background: #201C38;
}

.listing-detail-thumb-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.listing-detail-thumb-button {
    padding: 0;
    border: 2px solid transparent;
    border-radius: 0.65rem;
    background: transparent;
    overflow: hidden;
}

.listing-detail-thumb-button.active {
    border-color: #7C5CFF;
    box-shadow: 0 0 0 2px rgba(91, 46, 230, 0.14);
}

.listing-detail-thumb {
    width: 88px;
    height: 88px;
    object-fit: cover;
    display: block;
    background: #0E0B1A;
}

.checklist,
.timeline-list,
.clean-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.checklist li,
.timeline-list li,
.clean-list li {
    padding: 0.6rem 0;
    border-bottom: 1px solid #2A2741;
    color: #A7A3C0;
}

.checklist li:last-child,
.timeline-list li:last-child,
.clean-list li:last-child {
    border-bottom: none;
}

.timeline-step {
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: 0.75rem;
    align-items: start;
}

.timeline-step .step-badge {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    background: #7C5CFF;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.82rem;
    box-shadow: 0 2px 6px rgba(91, 46, 230, 0.28);
}

.profile-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(210px, 0.7fr);
    gap: 0.85rem;
    margin-bottom: 0.85rem;
}

.profile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.85rem;
}

.notice-strip {
    padding: 0.8rem 1rem;
    border-radius: 0.6rem;
    background: rgba(124, 92, 255, 0.16);
    border: 1px solid rgba(124, 92, 255, 0.45);
    color: #7C5CFF;
}

.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
}

.highlight-number {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
}

.form-shell {
    padding: 1.5rem;
}

.form-shell .info-card {
    background: #181430;
}

.form-label {
    font-weight: 600;
    color: #F3F1FB;
}

.form-control,
.form-select,
.form-check-input {
    background-color: #221E3A;
    border-color: #322E4D;
    color: #F3F1FB;
    border-radius: 0.5rem;
}

.form-control::placeholder {
    color: #7E7AA0;
}

/* Bootstrap's default disabled/readonly background is a light grey, which against our near-white
   input text renders as white-on-white — effectively invisible. Locked fields are normal here
   (the SKU once eBay owns the inventory item, the PokeChase price while it tracks the market),
   so keep them dark and legibly dimmed instead of merely greyed. */
.form-control:disabled,
.form-control[readonly],
.form-select:disabled,
.form-check-input:disabled {
    background-color: #1B1830;
    border-color: #2B2745;
    color: #B9B4D6;
    opacity: 1;
    cursor: not-allowed;
}

.alert-dark {
    background-color: rgba(124, 92, 255, 0.16);
    color: #7C5CFF;
    border-color: rgba(124, 92, 255, 0.45);
}

.alert-danger,
.alert-success {
    border-radius: 0.6rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #4FD79B;
}

.invalid {
    outline: 1px solid #FF8A73;
}

.validation-message {
    color: #FF8A73;
}

.auth-grid {
    align-items: stretch;
}

.auth-primary-card {
    position: relative;
    overflow: hidden;
}

.auth-primary-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 0.35rem;
    background: linear-gradient(90deg, #7C5CFF, #8A6BFF);
}

.auth-form-stack {
    display: grid;
    gap: 1rem;
}

.auth-hero-aside {
    align-self: stretch;
}

.auth-inline-link {
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.auth-inline-link:hover {
    text-decoration: underline;
}

.auth-feature-list {
    display: grid;
    gap: 0.85rem;
}

.auth-feature-item {
    display: grid;
    gap: 0.2rem;
    padding: 0.9rem 1rem;
    border: 1px solid #2A2741;
    border-radius: 0.7rem;
    background: #201C38;
}

.auth-feature-item strong {
    color: #F3F1FB;
}

.auth-feature-item span,
.auth-password-rules {
    color: #A7A3C0;
}

.auth-password-rules {
    padding: 0.9rem 1rem;
    border-radius: 0.7rem;
    background: #201C38;
    border: 1px solid #d9e5fb;
    font-size: 0.94rem;
}

.auth-support-panel {
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid #d9e5fb;
    background: #201C38;
}

.auth-confirm-state {
    display: grid;
    gap: 1rem;
    justify-items: center;
}

.auth-confirm-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
}

.auth-confirm-icon-success {
    background: rgba(46, 204, 113, 0.16);
    color: #4FD79B;
}

.auth-confirm-icon-failure {
    background: rgba(227, 53, 13, 0.16);
    color: #FF8A73;
}

.blazor-error-boundary {
    background: #7b1d1d;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

.content-shell {
    max-width: 1280px;
    margin: 0 auto;
}

.business-subtitle {
    font-size: 0.92rem;
    color: #A7A3C0;
}

.inventory-group {
    margin-bottom: 1.75rem;
}

.cta-panel {
    background: #181430;
}

@media (max-width: 991.98px) {
    .page-hero,
    .split-panel,
    .checkout-layout,
    .profile-hero {
        grid-template-columns: 1fr;
    }

    .profile-card-grid {
        grid-template-columns: 1fr;
    }

    .listing-detail-hero-image {
        height: 320px;
    }
}

/* Wallet balance display in nav */
.wallet-balance-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    border-radius: 0.5rem;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.14);
    color: #D8CCFF;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0 0.75rem;
}

.wallet-balance-amount {
    color: #FFFFFF;
    font-weight: 700;
}

/* Verification badge */
.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: rgba(46, 204, 113, 0.16);
    border: 1px solid rgba(46, 204, 113, 0.45);
    color: #4FD79B;
    font-size: 0.78rem;
    font-weight: 700;
}

.unverified-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: rgba(245, 166, 35, 0.16);
    border: 1px solid rgba(245, 166, 35, 0.45);
    color: #F5B85C;
    font-size: 0.78rem;
    font-weight: 700;
}

/* Dashboard / balance card */
.balance-panel {
    background: #7C5CFF;
    color: #FFFFFF;
    border-radius: 0.75rem;
    padding: 1.2rem;
}

.balance-panel .balance-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.82;
    margin-bottom: 0.25rem;
}

.balance-panel .balance-amount {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
}

.balance-panel .balance-sub {
    font-size: 0.85rem;
    opacity: 0.82;
    margin-top: 0.25rem;
}

.balance-panel .stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
}

.balance-panel .stats-grid dt {
    color: rgba(255, 255, 255, 0.8);
}

.balance-panel .stats-grid dd {
    color: #FFFFFF;
}

.balance-panel .balance-status {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.balance-panel .balance-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

@media (max-width: 991.98px) {
    .checkout-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .hero-panel,
    .page-hero,
    .split-panel,
    .profile-hero {
        grid-template-columns: 1fr;
    }

    .toolbar-card,
    .auction-header,
    .profile-header-row {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar-search-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Home hero: the "chase card" signature (foil shine spent here only) ===== */
.home-hero {
    position: relative;
    overflow: hidden;
    border-radius: 1.1rem;
    color: #fff;
    background:
        radial-gradient(120% 140% at 88% 0%, rgba(91, 46, 230, 0.45), transparent 55%),
        radial-gradient(90% 120% at 0% 100%, rgba(255, 92, 200, 0.16), transparent 50%),
        var(--ink);
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(220px, 0.85fr);
    gap: 1.75rem;
    padding: 2.4rem;
    align-items: center;
}

.hero-foil-rule {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--foil);
    background-size: 200% 100%;
    animation: foil-slide 8s linear infinite;
}

@keyframes foil-slide {
    to { background-position: 200% 0; }
}

.home-hero-copy {
    position: relative;
    z-index: 1;
}

.home-hero-eyebrow {
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.74rem;
    font-weight: 700;
    color: #b69bff;
    margin: 0 0 0.9rem;
}

.home-hero-title {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(2.1rem, 3.6vw, 3.3rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: #fff;
    margin: 0 0 1rem;
}

.hero-foil-text {
    background: var(--foil);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: foil-slide 6s linear infinite;
}

.home-hero-lead {
    color: rgba(225, 224, 245, 0.82);
    font-size: 1.05rem;
    max-width: 34rem;
    margin: 0 0 1.5rem;
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.btn-ghost {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.home-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
    margin-top: 1.75rem;
}

.home-hero-stat-value {
    font-family: var(--mono);
    font-weight: 700;
    font-size: 1.35rem;
    color: #fff;
    display: block;
    line-height: 1.1;
}

.home-hero-stat-label {
    font-size: 0.76rem;
    color: rgba(200, 200, 235, 0.62);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Holographic card tile — the chase card you're hunting */
.holo-card {
    position: relative;
    justify-self: center;
    width: min(230px, 100%);
    aspect-ratio: 5 / 7;
    border-radius: 1rem;
    padding: 9px;
    background: var(--foil);
    background-size: 300% 300%;
    animation: holo-shift 7s ease infinite;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

@keyframes holo-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.holo-card-inner {
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: 0.7rem;
    background: linear-gradient(160deg, #201d3a, #100e22);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
}

.holo-card-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(125deg, transparent 42%, rgba(255, 255, 255, 0.5) 50%, transparent 58%);
    transform: translateX(-130%);
    animation: holo-sweep 4.5s ease-in-out infinite;
}

@keyframes holo-sweep {
    0%, 55% { transform: translateX(-130%); }
    80%, 100% { transform: translateX(130%); }
}

.holo-card-hp {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: #ffd166;
    align-self: flex-end;
}

.holo-card-name {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.15rem;
    color: #fff;
}

.holo-card-foot {
    font-family: var(--mono);
    font-size: 0.66rem;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.05em;
}

@media (max-width: 900px) {
    .home-hero {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1.8rem;
    }

    .holo-card {
        display: none;
    }
}

/* ===== Horizontal product rails (Rare Candy-style rows) ===== */
.rail-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.rail-head h2 {
    margin: 0;
    font-size: 1.5rem;
}

.rail-see-all {
    font-family: var(--body);
    color: #9b80ff;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
}

.rail-see-all:hover {
    color: #b6a3ff;
}

.product-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(225px, 1fr);
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.65rem;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--surface-3) transparent;
}

.product-rail::-webkit-scrollbar {
    height: 8px;
}

.product-rail::-webkit-scrollbar-thumb {
    background: var(--surface-3);
    border-radius: 999px;
}

/* ===== Collectr-style product card (rail + shop grid) ===== */
.product-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    color: var(--text);
    scroll-snap-align: start;
    transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}

.product-card:hover,
.product-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.45);
    border-color: var(--accent-line);
}

.product-card-media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--canvas);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product-card-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.6rem;
}

.product-card-media-empty {
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 0.72rem;
}

.product-card-tag {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    background: var(--accent-wash);
    color: #cbbcff;
    border: 1px solid var(--accent-line);
    backdrop-filter: blur(4px);
}

.product-card-tag.hot {
    background: rgba(227, 53, 13, 0.24);
    color: #ff9b86;
    border-color: rgba(227, 53, 13, 0.5);
}

.product-card-tag.win {
    background: rgba(46, 204, 113, 0.2);
    color: #7ce6b0;
    border-color: rgba(46, 204, 113, 0.5);
}

.product-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.85rem 0.9rem 1rem;
    flex: 1;
}

.product-card-kicker {
    font-family: var(--mono);
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

.product-card-title {
    font-family: var(--display);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.55rem;
}

.product-card-price {
    font-family: var(--mono);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--text);
}

.product-card-price.free {
    color: var(--pos);
}

.product-card-go {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    font-size: 1.05rem;
    line-height: 1;
    flex: none;
    transition: transform 0.12s ease, filter 0.12s ease;
}

.product-card:hover .product-card-go {
    filter: brightness(1.12);
    transform: scale(1.08);
}

/* ===== App promo: phone mockup + store badges (Collectr-style) ===== */
.app-phone {
    justify-self: center;
    width: min(248px, 100%);
    border-radius: 2rem;
    padding: 0.5rem;
    background: linear-gradient(160deg, #2a2545, #15122a);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.app-phone-screen {
    position: relative;
    border-radius: 1.55rem;
    overflow: hidden;
    background: #0c0a18;
    padding: 1.2rem 0.95rem 1.15rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.app-phone-screen::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 34%;
    height: 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
}

.app-scan-label {
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    color: #b69bff;
    margin-top: 0.55rem;
}

.app-scan-price {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    text-align: center;
}

.app-scan-price strong {
    font-family: var(--mono);
    font-size: 1.25rem;
    color: #fff;
}

.app-scan-price span {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
}

.app-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.1rem;
}

.store-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.95rem;
    border-radius: 0.65rem;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    text-decoration: none;
    transition: border-color 0.12s ease, transform 0.12s ease;
}

.store-badge:hover {
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-1px);
    color: #fff;
}

.store-badge-play {
    font-size: 1.3rem;
    line-height: 1;
    background: var(--foil);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* SVG brand marks (Apple / Windows) inside store badges */
.store-badge-icon {
    width: 1.2rem;
    height: 1.2rem;
    fill: #fff;
    flex: 0 0 auto;
}

.store-badge .b-sub {
    display: block;
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.1;
}

.store-badge .b-main {
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.98rem;
    line-height: 1.1;
}

.beta-pill {
    font-family: var(--mono);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--amber);
    border: 1px solid rgba(245, 166, 35, 0.4);
    background: rgba(245, 166, 35, 0.12);
    padding: 0.32rem 0.65rem;
    border-radius: 999px;
}

@media (max-width: 900px) {
    .app-phone {
        display: none;
    }
}

/* Fit the holo card inside the phone mockup without overflowing the screen */
.app-phone .holo-card {
    width: 132px;
    padding: 6px;
}

/* Real card art inside the foil frame */
.holo-card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.55rem;
}

.app-phone-screen {
    padding-top: 1.5rem;
    padding-bottom: 1.4rem;
    gap: 0.6rem;
}

/* ===== Seller "jump-start your business" feature + finance mockup ===== */
.seller-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 1.75rem;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 1.1rem;
    padding: 2rem;
}

.seller-feature-title {
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    margin: 0.35rem 0 0.85rem;
}

.seller-points {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: grid;
    gap: 0.85rem;
}

.seller-points li {
    position: relative;
    padding-left: 1.6rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.seller-points li strong {
    color: var(--text);
}

.seller-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.42rem;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 3px;
    background: var(--foil);
}

/* Finance dashboard mockup */
.finance-mock {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 0.9rem;
    background: linear-gradient(160deg, var(--surface-2), #15122a);
    border: 1px solid var(--line);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.finance-mock-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.finance-mock-title {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text);
}

.finance-mock-period {
    font-family: var(--mono);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.22rem 0.6rem;
}

.finance-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.finance-kpi {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.7rem 0.75rem;
    border-radius: 0.6rem;
    background: var(--surface);
    border: 1px solid var(--line);
}

.finance-kpi-label {
    font-family: var(--mono);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.finance-kpi-value {
    font-family: var(--mono);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--text);
    letter-spacing: -0.02em;
}

.finance-kpi-value.pos,
.finance-kpi-delta.pos,
.finance-row-amt.pos {
    color: var(--pos);
}

.finance-kpi-delta {
    font-size: 0.66rem;
    font-weight: 700;
}

.finance-spark {
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
    height: 72px;
    padding: 0.6rem 0.2rem 0;
}

.finance-spark span {
    flex: 1;
    border-radius: 4px 4px 0 0;
    background: var(--foil);
    background-size: 100% 220px;
    opacity: 0.85;
}

.finance-rows {
    display: grid;
    gap: 0.5rem;
}

.finance-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.75rem;
    border-radius: 0.55rem;
    background: var(--surface);
    border: 1px solid var(--line);
    font-size: 0.84rem;
}

.finance-row-name {
    color: var(--text-muted);
}

.finance-row-amt {
    font-family: var(--mono);
    font-weight: 700;
}

/* ===== How it works: numbered steps ===== */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.step-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem 1.35rem 1.4rem;
    overflow: hidden;
}

.step-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--foil);
    opacity: 0.85;
}

.step-num {
    font-family: var(--mono);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.05em;
}

.step-card h3 {
    margin: 0.5rem 0 0.45rem;
    font-size: 1.15rem;
}

.step-card p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.45;
    font-size: 0.92rem;
}

@media (max-width: 860px) {
    .seller-feature {
        grid-template-columns: 1fr;
        padding: 1.5rem;
    }

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

/* ===== /scan page (ScanCard.razor in the WASM client) =====
   These live here, not in ScanCard.razor.css: the host does not serve the client
   project's scoped-CSS bundle, so scoped styles on client pages never load.
   Everything is namespaced under .scan-page to avoid the CardScannerModal's
   identically-named scan-* classes. */

.scan-page {
    max-width: 620px;
    margin-inline: auto;
}

/* The result view (hero + horizontal shelves) gets more width so the shelves fill the screen on
   desktop instead of being squeezed into the narrow scanner column. The camera/upload view keeps
   the tidy 620px column. */
.scan-page.is-result {
    max-width: 1200px;
}

.scan-ui .scan-head {
    margin-bottom: 1.25rem;
}

.scan-ui .scan-lead {
    color: var(--text-muted);
    max-width: 34rem;
    margin: 0.4rem 0 0;
}

/* Mode switch (segmented pill) */
.scan-ui .scan-mode {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    margin-bottom: 1rem;
}

.scan-ui .scan-mode-btn {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.88rem;
    padding: 0.4rem 1.05rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.scan-ui .scan-mode-btn:hover {
    color: var(--text);
}

.scan-ui .scan-mode-btn.is-active {
    background: var(--accent);
    color: #fff;
}

.scan-ui .scan-mode-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-line);
}

/* Scanner settings row (currency + crop padding, persisted in localStorage) */
.scan-page .scan-settings {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: 0 0 1rem;
}

.scan-page .scan-settings-label {
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--text-muted);
}

.scan-page .scan-mini-toggle {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
}

.scan-page .scan-mini-btn {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.scan-page .scan-mini-btn.is-active {
    background: var(--accent);
    color: #fff;
}

.scan-page .scan-mini-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-line);
}

.scan-page .scan-select {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 0.45rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

.scan-page .scan-select:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-line);
}

.scan-page .scan-select:disabled {
    opacity: 0.45;
    cursor: default;
}

.scan-page .scan-settings-note {
    color: var(--text-muted);
    font-size: 0.78rem;
    margin: -0.4rem 0 1rem;
}

/* Viewfinder */
.scan-ui .scan-camera-wrap {
    position: relative;
    width: 100%;
    max-width: 440px;
    margin-inline: auto;
    aspect-ratio: 3 / 4;
    background: #05040c;
    border: 1px solid var(--line);
    border-radius: 1rem;
    overflow: hidden;
}

.scan-ui .scan-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Cropped snapshot shown under the sweep while recognition runs */
.scan-ui .scan-crop-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1.25rem;
}

/* Card-shaped (5:7) corner brackets — machine vision, not a file-drop zone */
.scan-ui .scan-frame-guide {
    --bracket: rgba(255, 255, 255, 0.85);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 62%;
    aspect-ratio: 5 / 7;
    pointer-events: none;
    background:
        linear-gradient(var(--bracket), var(--bracket)) left top / 2px 26px,
        linear-gradient(var(--bracket), var(--bracket)) left top / 26px 2px,
        linear-gradient(var(--bracket), var(--bracket)) right top / 2px 26px,
        linear-gradient(var(--bracket), var(--bracket)) right top / 26px 2px,
        linear-gradient(var(--bracket), var(--bracket)) left bottom / 2px 26px,
        linear-gradient(var(--bracket), var(--bracket)) left bottom / 26px 2px,
        linear-gradient(var(--bracket), var(--bracket)) right bottom / 2px 26px,
        linear-gradient(var(--bracket), var(--bracket)) right bottom / 26px 2px;
    background-repeat: no-repeat;
}

/* Foil scan line while recognition runs — the page's one foil moment */
.scan-ui .scan-sweep {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: rgba(14, 11, 26, 0.25);
}

.scan-ui .scan-sweep::before {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    top: 8%;
    height: 3px;
    border-radius: 2px;
    background: var(--foil);
    background-size: 200% 100%;
    box-shadow: 0 0 22px rgba(124, 92, 255, 0.9), 0 0 60px rgba(124, 92, 255, 0.5);
    animation: scan-sweep-move 1.8s ease-in-out infinite, foil-slide 2.5s linear infinite;
}

@keyframes scan-sweep-move {
    0%, 100% { top: 8%; }
    50% { top: 90%; }
}

/* Shutter */
.scan-ui .scan-shutter-row {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.scan-ui .scan-shutter {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.7);
    background: transparent;
    padding: 0;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.scan-ui .scan-shutter-core {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 4px 18px rgba(124, 92, 255, 0.45);
    transition: background 0.15s ease, transform 0.1s ease;
}

.scan-ui .scan-shutter:hover:not(:disabled) .scan-shutter-core {
    background: var(--accent-press);
}

.scan-ui .scan-shutter:active:not(:disabled) .scan-shutter-core {
    transform: scale(0.92);
}

.scan-ui .scan-shutter:disabled {
    border-color: var(--line);
    cursor: default;
}

.scan-ui .scan-shutter:disabled .scan-shutter-core {
    background: var(--surface-3);
    box-shadow: none;
}

.scan-ui .scan-shutter.is-busy .scan-shutter-core {
    animation: shutter-pulse 1.2s ease-in-out infinite;
}

@keyframes shutter-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.88); opacity: 0.65; }
}

.scan-ui .scan-shutter:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--accent-line);
}

.scan-ui .scan-hint {
    color: var(--text-muted);
    font-size: 0.8rem;
    text-align: center;
    margin: 0.6rem 0 0;
}

/* Status readout (also shows model-download progress) */
.scan-ui .scan-readout {
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    text-align: center;
    margin: 0.75rem 0 0;
    min-height: 1.25em;
}

.scan-ui .scan-footnote {
    color: var(--text-muted);
    font-size: 0.8rem;
    text-align: center;
    max-width: 34rem;
    margin: 1.5rem auto 0;
}

.scan-ui .scan-footnote p {
    margin: 0 0 0.75rem;
}

.scan-ui .scan-store-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}

/* Upload */
.scan-ui .scan-upload {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    text-align: center;
    padding: 2.75rem 1.5rem;
    background: var(--surface);
    border: 1.5px dashed var(--accent-line);
    border-radius: 1rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.scan-ui .scan-upload:hover:not(.is-disabled) {
    background: var(--surface-2);
    border-color: var(--accent);
}

.scan-ui .scan-upload:focus-within {
    box-shadow: 0 0 0 3px var(--accent-line);
}

.scan-ui .scan-upload.is-disabled {
    opacity: 0.6;
    cursor: default;
}

.scan-ui .scan-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.scan-ui .scan-upload-title {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text);
}

.scan-ui .scan-upload-hint {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Result */
.scan-ui .scan-result {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.scan-ui .scan-result-crop {
    margin: 0;
}

.scan-ui .scan-result-crop img {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.scan-ui .scan-result-crop figcaption,
.scan-ui .scan-result-label {
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-muted);
}

.scan-ui .scan-result-crop figcaption {
    text-align: center;
    margin-top: 0.5rem;
}

.scan-ui .scan-result-label {
    margin: 0 0 0.6rem;
}

.scan-ui .scan-empty {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    padding: 1rem;
    color: var(--text-muted);
}

.scan-ui .scan-match {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    padding: 0.7rem 0.85rem;
    margin-bottom: 0.5rem;
}

.scan-ui .scan-match-top {
    background: var(--surface-2);
    border-color: var(--accent-line);
    padding: 0.9rem 1rem;
}

/* Selectable match (the create-listing modal): same card, button semantics */
.scan-ui .scan-match-btn {
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.scan-ui .scan-match-btn:hover:not(:disabled) {
    border-color: var(--accent);
    background: var(--surface-2);
}

.scan-ui .scan-match-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-line);
}

.scan-ui .scan-match-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.scan-ui .scan-match-main {
    display: flex;
    gap: 0.75rem;
    min-width: 0;
}

.scan-ui .scan-match-thumb {
    width: 46px;
    border-radius: 0.3rem;
    flex: 0 0 auto;
    align-self: flex-start;
}

.scan-ui .scan-match-top .scan-match-thumb {
    width: 68px;
}

.scan-ui .scan-match-name {
    font-weight: 700;
}

.scan-ui .scan-match-top .scan-match-name {
    font-family: var(--display);
    font-size: 1.08rem;
}

.scan-ui .scan-match-set {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Two-phase scan: the card + set render first; this placeholder pulses in the price slot
   while step 2 (the catalog price bridge) loads, so the result feels responsive. */
.scan-ui .scan-price-loading {
    margin-top: 0.4rem;
    font-style: italic;
    animation: scan-price-pulse 1.1s ease-in-out infinite;
}

@keyframes scan-price-pulse {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 0.85; }
}

.scan-ui .scan-variants {
    margin-top: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.scan-ui .scan-variant {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.85rem;
}

.scan-ui .scan-variant-label {
    color: var(--text-muted);
}

/* Variant chooser (create-listing modal): one tappable row per print variant */
.scan-ui .scan-variant-picks {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.scan-ui .scan-variant-pick {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    font: inherit;
    font-size: 0.85rem;
    color: inherit;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    padding: 0.4rem 0.65rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.scan-ui .scan-variant-pick:hover {
    border-color: var(--accent);
    background: var(--surface-3);
}

.scan-ui .scan-variant-pick:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-line);
}

/* The variant saved to the scan history (✓) */
.scan-ui .scan-variant-pick.is-selected {
    border-color: rgba(79, 215, 155, 0.55);
    background: rgba(79, 215, 155, 0.08);
}

/* Prices read like price tags — mono, per the site convention */
.scan-ui .scan-price {
    font-family: var(--mono);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: -0.02em;
}

/* Graded (slab) price ladder under a match's raw/variant prices */
.scan-ui .scan-graded {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--line);
}

.scan-ui .scan-graded-label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.scan-ui .scan-graded-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.3rem;
}

.scan-ui .scan-graded-chip {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem;
    width: 100%;
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--line);
    border-radius: 0.4rem;
    background: var(--surface);
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.scan-ui .scan-graded-chip:hover {
    border-color: var(--accent);
    background: var(--surface-3);
}

.scan-ui .scan-graded-chip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-line);
}

/* The grade whose eBay listings are currently shown */
.scan-ui .scan-graded-chip.is-selected {
    border-color: rgba(79, 215, 155, 0.55);
    background: rgba(79, 215, 155, 0.08);
}

.scan-ui .scan-graded-grade {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.scan-ui .scan-graded-price {
    font-size: 0.78rem;
}

/* Confidence chip — color encodes score */
.scan-ui .scan-score {
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.18rem 0.45rem;
    border-radius: 0.35rem;
    border: 1px solid var(--line);
    flex: 0 0 auto;
}

.scan-ui .scan-score-high {
    color: var(--pos);
    border-color: rgba(79, 215, 155, 0.4);
    background: rgba(79, 215, 155, 0.1);
}

.scan-ui .scan-score-mid {
    color: var(--amber);
    border-color: rgba(245, 166, 35, 0.4);
    background: rgba(245, 166, 35, 0.1);
}

.scan-ui .scan-score-low {
    color: var(--text-muted);
}

/* ── /scan result: hero crop + horizontal "shelves" (matches, then eBay) ──────
   New classes layered over the shared .scan-match visuals. The create-listing modal
   keeps the stacked .scan-result / .scan-match row layout untouched. */
.scan-ui .scan-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* The scanned card is the hero of the result */
.scan-ui .scan-hero {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.scan-ui .scan-hero img {
    width: min(260px, 60vw);
    height: auto;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45);
}

.scan-ui .scan-hero figcaption {
    margin-top: 0.6rem;
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-muted);
    text-align: center;
}

/* Horizontal scroller shared by the matches and eBay shelves. The scrollbar is hidden — scan-scroll.js
   surfaces ‹/› arrows only when a shelf overflows — but native swipe / trackpad / arrow-key scrolling
   still works, so the arrows are pure enhancement. */
.scan-ui .scan-scroller {
    position: relative;
}

.scan-ui .scan-strip {
    display: flex;
    gap: 0.7rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;              /* Firefox */
    padding: 4px 0 6px;                 /* room so focus rings aren't clipped by overflow */
}

.scan-ui .scan-strip::-webkit-scrollbar {
    display: none;                      /* WebKit / Chromium */
}

.scan-ui .scan-strip > * {
    scroll-snap-align: start;
}

.scan-ui .scan-strip:focus-visible {
    outline: none;
    border-radius: var(--radius);
    box-shadow: 0 0 0 3px var(--accent-line);
}

/* ‹/› shelf arrows — hidden until scan-scroll.js flags the shelf as overflowing, and each hides
   once its end is reached. */
.scan-ui .scan-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: rgba(34, 30, 58, 0.9);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: var(--text);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.scan-ui .scan-arrow svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.scan-ui .scan-arrow:hover {
    background: var(--surface-3);
    border-color: var(--accent-line);
    color: var(--accent);
}

.scan-ui .scan-arrow-left { left: 0.15rem; }
.scan-ui .scan-arrow-right { right: 0.15rem; }

.scan-ui .scan-scroller.has-overflow .scan-arrow { opacity: 1; visibility: visible; }
.scan-ui .scan-scroller.at-start .scan-arrow-left { opacity: 0; visibility: hidden; }
.scan-ui .scan-scroller.at-end .scan-arrow-right { opacity: 0; visibility: hidden; }

/* When a shelf doesn't overflow, center the tiles so any leftover width is balanced on both sides
   rather than left as a gap on the right. Only while NOT overflowing — centering a scroll container
   whose content overflows would hide the start. */
.scan-ui .scan-scroller:not(.has-overflow) .scan-strip {
    justify-content: center;
}

/* A match rendered as a card in the strip (overrides the shared row layout). It grows to fill spare
   width when there are few matches, and holds its basis (so the shelf scrolls) when there are many. */
.scan-ui .scan-match-card {
    flex: 1 0 min(300px, 84vw);
    max-width: 360px;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.7rem;
    margin-bottom: 0;
}

.scan-ui .scan-match-head {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
}

.scan-ui .scan-match-head .scan-match-body {
    flex: 1 1 auto;
    min-width: 0;
}

.scan-ui .scan-match-card .scan-variants {
    margin-top: 0;
}

/* eBay affiliate listings — the "shop the card you just scanned" moment of a scan result.
   One holographic-foil accent (the eyebrow underline) ties it to the card-foil identity; the
   tiles read as portrait cards on a shelf. Everything else stays in the quiet Chase palette. */
.scan-ui .scan-ebay {
    margin-top: 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}

.scan-ui .scan-ebay-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.95rem;
}

.scan-ui .scan-ebay-eyebrow {
    position: relative;
    margin: 0;
    padding-bottom: 0.4rem;
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text);
}

/* Signature: a holographic-foil hairline under the eyebrow — the card's foil made structural. */
.scan-ui .scan-ebay-eyebrow::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 2.5rem;
    height: 2px;
    border-radius: 2px;
    background: var(--foil);
}

.scan-ui .scan-ebay-disclosure {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.scan-ui .scan-ebay-loading {
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 0.4rem 0 0.3rem;
}

/* eBay tiles in the horizontal shelf — grow to fill when few, hold basis (and scroll) when many */
.scan-ui .scan-ebay-strip .scan-ebay-item {
    flex: 1 0 clamp(144px, 46vw, 168px);
    max-width: 200px;
}

.scan-ui .scan-ebay-item {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.scan-ui .scan-ebay-item:hover {
    border-color: var(--accent-line);
    background: var(--surface-2);
}

.scan-ui .scan-ebay-item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-line);
}

/* Portrait "shelf" the card image sits on — cards and graded slabs both read as cards here. */
.scan-ui .scan-ebay-thumb-wrap {
    display: block;
    aspect-ratio: 3 / 4;
    background: var(--surface-3);
}

.scan-ui .scan-ebay-thumb {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.5rem;
}

.scan-ui .scan-ebay-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.6rem 0.7rem 0.2rem;
}

/* Price is the hero — the site's mono "price-tag" convention, sized up from the base .scan-price */
.scan-ui .scan-ebay-price {
    font-size: 0.98rem;
    color: var(--text);
}

.scan-ui .scan-ebay-title {
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.scan-ui .scan-ebay-cta {
    margin-top: auto;
    padding: 0.5rem 0.7rem 0.65rem;
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.68rem;
    color: var(--text-muted);
    transition: color 0.15s ease;
}

.scan-ui .scan-ebay-item:hover .scan-ebay-cta {
    color: var(--accent);
}

.scan-ui .scan-again-row {
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
}

/* History */
.scan-ui .scan-history {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}

.scan-ui .scan-history-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.scan-ui .scan-history-head h2 {
    font-size: 1.05rem;
    margin: 0;
}

.scan-ui .scan-history-note {
    color: var(--text-muted);
    font-size: 0.78rem;
    margin: 0.2rem 0 0.75rem;
}

.scan-ui .scan-history-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.scan-ui .scan-history-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0.6rem;
    padding: 0.55rem 0.8rem;
}

/* Recent-scan rows are buttons that reopen the scan as a recap */
.scan-ui .scan-history-btn {
    width: 100%;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.scan-ui .scan-history-btn:hover {
    border-color: var(--accent-line);
    background: var(--surface-2);
}

.scan-ui .scan-history-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-line);
}

.scan-ui .scan-history-actions {
    display: flex;
    gap: 0.4rem;
}

.scan-ui .scan-history-name {
    font-weight: 600;
}

.scan-ui .scan-history-variant {
    font-family: var(--mono);
    font-size: 0.68rem;
    color: var(--accent);
    border: 1px solid var(--accent-line);
    border-radius: 0.3rem;
    padding: 0.05rem 0.3rem;
    margin: 0 0.35rem;
    white-space: nowrap;
}

.scan-ui .scan-history-set {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.scan-ui .scan-history-meta {
    text-align: right;
}

.scan-ui .scan-history-time {
    font-family: var(--mono);
    color: var(--text-muted);
    font-size: 0.72rem;
}

@media (max-width: 640px) {
    .scan-ui .scan-result {
        grid-template-columns: 1fr;
    }

    .scan-ui .scan-result-crop {
        max-width: 180px;
        margin-inline: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scan-ui .scan-sweep::before,
    .scan-ui .scan-shutter.is-busy .scan-shutter-core {
        animation: none !important;
    }
}

/* ── My Sales: unified order timeline ──────────────────────────────────────
   Orders from every channel share one list ordered by recency, so the newest
   sale is always at the top whatever platform it came from. The channel reads
   off a coloured rail down the left edge of each row: in a mixed list that is
   the one marker the eye can scan without reading. */
.orders-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.orders-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.orders-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.orders-filter:hover {
    color: var(--text);
    border-color: var(--accent-line);
}

.orders-filter:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.orders-filter.is-active {
    color: var(--text);
    background: var(--accent-wash);
    border-color: var(--accent-line);
}

.orders-filter-count {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.orders-filter.is-active .orders-filter-count {
    color: var(--accent);
}

.orders-group + .orders-group {
    margin-top: 1.75rem;
}

.orders-group-head {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.9rem;
    border-bottom: 1px solid var(--line);
}

.orders-group-head h2 {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.orders-group-count {
    font-family: var(--mono);
    font-size: 0.76rem;
    color: var(--text-muted);
}

.order-row {
    display: grid;
    grid-template-columns: 3px minmax(0, 1fr);
    margin-bottom: 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
}

.order-rail {
    background: var(--accent);
}

.order-row--ebay .order-rail {
    background: var(--amber);
}

.order-body {
    min-width: 0;
    padding: 1rem 1.15rem 1.15rem;
}

.order-channel {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.order-channel-name {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
}

.order-row--ebay .order-channel-name {
    color: var(--amber);
}

.order-channel-time {
    font-family: var(--mono);
    font-size: 0.76rem;
    color: var(--text-muted);
}

/* The order cards already carry their own surface; inside a row the row IS the
   surface, so flatten only the outermost one and leave nested cards alone. */
.order-body > .auction-card,
.order-body > .info-card {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}