/* === Design System: Holo Rush ===
   Palette  : deep navy / holographic foil (cyan-pink-yellow-mint) / bright accents
   Type     : Archivo Black (display) + Space Grotesk (UI/body)
   Shape    : 20px cards / hard offset shadows (no blur) / 2px borders / slight tilt
   Emphasis : sticker chips, price bursts, animated foil, tabular numerals
   Dark-only. Legacy --av-* tokens are remapped so every .av-* component inherits
   the new palette; a Holo Rush override layer at the end of this file applies the
   sticker shadows, 2px borders, fonts and bright-fill treatments.
*/

/* === Tokens === */
:root {
    /* raw Holo palette */
    --av-navy: #0e0f2e;
    --av-cyan: #7df9ff;          /* primary accent: buttons, active nav, links */
    --av-pink: #ff5ac8;          /* hot CTA: Sell/Bid, live auctions, staff badge */
    --av-pink-soft: #ff8ae0;     /* usernames / highlights in text */
    --av-yellow: #ffd23e;        /* price bursts, wallet credits, stars */
    --av-yellow-pale: #ffe27a;   /* countdowns, ending-soon, category codes */
    --av-mint: #8affb1;          /* success / good deal / live pulse / positive */
    --av-red: #ff8a8a;           /* danger, urgent countdowns, negative, cancel */
    --av-holo: linear-gradient(120deg, #7df9ff, #ff8ae0, #ffe27a, #8affb1, #7df9ff);

    /* semantic remaps — legacy classes inherit Holo automatically */
    --av-ink: #ffffff;
    --av-bg: #0e0f2e;
    --av-surface: #171945;
    --av-surface-2: #12143a;
    --av-accent: #7df9ff;
    --av-accent-dark: #7df9ff;
    --av-accent-pale: rgba(125, 249, 255, .12);
    --av-amber: #ffd23e;
    --av-amber-ink: #ffe27a;
    --av-amber-soft: rgba(255, 210, 62, .14);
    --av-muted: #9aa0d8;
    --av-border: #262a63;
    --av-success: #8affb1;
    --av-success-soft: rgba(138, 255, 177, .12);
    --av-glow-warm: #171945;
    --av-glow-warm-border: #262a63;
    --av-glow-gold: #171945;
    --av-glow-gold-border: #262a63;
    --av-radius: 20px;
    --av-radius-input: 10px;
    --av-radius-sm: 8px;
    --av-radius-lot: 6px;
    --av-pill: 999px;
    --av-foil-1: rgba(125, 249, 255, .5);    /* cyan focus glow */
    --av-foil-2: rgba(125, 249, 255, .3);
    --av-shadow: 6px 6px 0 rgba(0, 0, 0, .35);
    --av-shadow-hover: 8px 8px 0 rgba(0, 0, 0, .4);
}

/* === Base === */
html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    color: var(--av-ink);
    background-color: var(--av-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: 'Archivo Black', sans-serif;
    font-weight: 700;
    color: var(--av-ink);
    line-height: 1.15;
}

a {
    text-decoration: none;
    color: var(--av-accent-dark);   /* AA-safe default; decorative accent stays for fills/hovers */
}

.av-main {
    flex: 1 0 auto;
}

/* === Navbar === */
.av-navbar {
    background: var(--av-surface);
    border-bottom: 1px solid var(--av-border);
    padding-top: .75rem;
    padding-bottom: .75rem;
}

/* Branded mobile menu toggle — replaces the stock Bootstrap gray hamburger with a
   bordered pill + coral bars + the coral/gold foil focus ring used elsewhere. */
.av-navbar .navbar-toggler {
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius-input);
    padding: .3rem .55rem;
    transition: border-color .12s, background .12s;
}
.av-navbar .navbar-toggler:hover { background: var(--av-accent-pale); border-color: var(--av-accent); }
.av-navbar .navbar-toggler:focus { box-shadow: 0 0 0 3px var(--av-foil-1); }
.av-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23c93f1b' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Theme (light/dark) toggle button in the nav */
.av-theme-toggle {
    width: 38px; height: 38px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--av-border); border-radius: var(--av-pill);
    background: transparent; color: var(--av-muted);
    transition: color .12s, border-color .12s, background .12s;
}
.av-theme-toggle:hover { color: var(--av-accent); border-color: var(--av-accent); background: var(--av-accent-pale); }
.av-theme-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--av-foil-1); }

/* === Dark-only ===
   Holo Rush ships dark. The light/dark toggle + its inline stamp script are removed
   from _Layout, so no data-theme is set — :root above is the single source of truth.
   These blocks stay pinned to the Holo palette in case a stale data-theme cookie is
   ever present, so the site never falls back to a light look. */
:root[data-theme="dark"],
:root[data-theme="light"] {
    --av-ink: #ffffff;
    --av-bg: #0e0f2e;
    --av-surface: #171945;
    --av-surface-2: #12143a;
    --av-accent: #7df9ff;
    --av-accent-dark: #7df9ff;
    --av-accent-pale: rgba(125, 249, 255, .12);
    --av-amber: #ffd23e;
    --av-amber-ink: #ffe27a;
    --av-amber-soft: rgba(255, 210, 62, .14);
    --av-muted: #9aa0d8;
    --av-border: #262a63;
    --av-success: #8affb1;
    --av-success-soft: rgba(138, 255, 177, .12);
    --av-glow-warm: #171945;
    --av-glow-warm-border: #262a63;
    --av-glow-gold: #171945;
    --av-glow-gold-border: #262a63;
}

/* Brighter hamburger bars on dark. */
:root[data-theme="dark"] .av-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ff7a52' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Bootstrap surfaces that assume a light background. */
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select {
    background-color: var(--av-surface-2);
    color: var(--av-ink);
    border-color: var(--av-border);
}
:root[data-theme="dark"] .form-control::placeholder { color: var(--av-muted); }
:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus {
    background-color: var(--av-surface-2);
    color: var(--av-ink);
    border-color: var(--av-accent);
    box-shadow: 0 0 0 3px var(--av-foil-1);
}
:root[data-theme="dark"] .modal-content { background-color: var(--av-surface); color: var(--av-ink); }
:root[data-theme="dark"] .dropdown-menu { background-color: var(--av-surface); border-color: var(--av-border); }

/* Dropdown menu items readable on the dark surface (Bootstrap's default is dark text). */
.dropdown-menu.av-admin-menu { padding: .35rem; box-shadow: var(--av-shadow-hover); }
.av-admin-menu .dropdown-item { color: var(--av-ink); border-radius: 7px; padding: .5rem .8rem; }
.av-admin-menu .dropdown-item .bi { margin-right: .5rem; color: var(--av-muted); }
.av-admin-menu .dropdown-item:hover,
.av-admin-menu .dropdown-item:focus { background: var(--av-surface-2); color: var(--av-cyan); }
.av-admin-menu .dropdown-item:hover .bi,
.av-admin-menu .dropdown-item:focus .bi { color: var(--av-cyan); }
:root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.7); }

.av-brand {
    display: inline-flex;
    align-items: baseline;
    line-height: 1;
}

.av-brand-arcane {
    font-family: 'Archivo Black', sans-serif;
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--av-accent-dark);
    letter-spacing: -.01em;
}

.av-brand-vault {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--av-accent-dark);
    margin-left: .4rem;
    align-self: center;
}

.av-navbar .nav-link {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: .875rem;
    color: var(--av-muted);
    padding: .4rem .5rem !important;
    border-radius: var(--av-radius);
    transition: color .12s, background .12s;
}

.av-navbar .nav-link:hover,
.av-navbar .nav-link.active {
    color: var(--av-accent);
    background: var(--av-accent-pale);
}

.av-user-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--av-muted);
    padding: .35rem .5rem;
}

.av-badge-staff {
    background: var(--av-accent);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    padding: .12rem .4rem;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: .07em;
}
/* Account-type tags shown beside the username. Business is emphasised; an
   individual (normal user) gets a quiet outline tag. */
.av-badge-business,
.av-badge-individual {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: .6rem;
    font-weight: 700;
    padding: .12rem .4rem;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: .07em;
}
.av-badge-business { background: var(--av-amber-ink); color: #fff; }
.av-badge-individual { background: transparent; color: var(--av-muted); border: 1px solid var(--av-border); }

/* === Buttons === */
.btn {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: .9rem;
    border-radius: var(--av-pill);
    padding: .55rem 1.4rem;
    letter-spacing: .01em;
    transition: transform .12s, box-shadow .12s, background .12s;
}

.av-btn-primary,
.btn-primary {
    background: var(--av-accent-dark);
    border: 1px solid var(--av-accent-dark);
    color: #fff;
}

.av-btn-primary:hover,
.btn-primary:hover {
    background: #a8330f;
    border-color: #a8330f;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(255,106,61,.38);
}

.av-btn-ghost {
    background: transparent;
    color: var(--av-ink);
    border: 1px solid var(--av-border);
}

.av-btn-ghost:hover {
    color: var(--av-accent);
    border-color: var(--av-accent);
    background: var(--av-accent-pale);
}

.av-provider-badge {
    background: var(--av-accent);
    color: #fff;
}

a.av-user-chip {
    text-decoration: none;
    cursor: pointer;
}

/* Outline-danger actions (Cancel, Remove, Take down, Suspend): darker red text for AA. */
.btn-outline-danger {
    color: #a5232f;
    border-color: #d6455180;
}
.btn-outline-danger:hover {
    color: #fff;
    background: #a5232f;
    border-color: #a5232f;
}

.btn-secondary {
    background: var(--av-surface);
    border: 1px solid var(--av-border);
    color: var(--av-ink);
}

.btn-secondary:hover {
    background: var(--av-surface-2);
    color: var(--av-ink);
}

.btn-danger {
    background: #8c2a1e;
    border: 1px solid #8c2a1e;
    color: #fff;
}

.btn-danger:hover {
    background: #742218;
    color: #fff;
}

/* === Cards === */
.av-card {
    background: var(--av-surface);
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius);
    box-shadow: var(--av-shadow);
    padding: 1.75rem;
}

/* === Footer === */
.av-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--av-border);
    background: var(--av-surface);
    padding: 1.25rem 0;
    margin-top: 3rem;
}

.av-footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.av-footer-brand {
    font-family: 'Archivo Black', sans-serif;
    font-size: 1.15rem;
    color: var(--av-ink);
    letter-spacing: -.01em;
}

.av-footer-muted {
    color: var(--av-muted);
    font-size: .8rem;
    letter-spacing: .02em;
}

/* === Hero === */
.av-hero {
    padding: 4.5rem 0 2.5rem;
}

.av-eyebrow {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--av-muted);
    margin-bottom: 1.5rem;
}

.av-hero-rule {
    width: 2.5rem;
    height: 2px;
    background: var(--av-accent);
    display: block;
    margin-bottom: 1.5rem;
}

.av-hero-title {
    font-size: clamp(2.8rem, 5.5vw, 4.4rem);
    font-weight: 600;
    line-height: 1.03;
    letter-spacing: -.01em;
    margin: 0 0 1.75rem;
}

.av-hero-title em {
    color: var(--av-accent-dark);
    font-weight: 700;
}

.av-hero-sub {
    font-size: 1.05rem;
    color: var(--av-muted);
    max-width: 30rem;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.av-hero-cta {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    align-items: center;
}

/* === Stats strip — numbers float on parchment, no card === */
.av-stats {
    display: flex;
    gap: 4rem;
    flex-wrap: wrap;
    justify-content: center;
    padding: 2.5rem 0;
    border-top: 1px solid var(--av-border);
    border-bottom: 1px solid var(--av-border);
    margin: 0 0 2.5rem;
}

.av-stat {
    text-align: center;
}

.av-stat-num {
    font-family: 'Archivo Black', sans-serif;
    font-weight: 800;
    font-size: 3.5rem;
    color: var(--av-accent);
    line-height: 1;
}

.av-stat-label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--av-muted);
    margin-top: .5rem;
}

/* === Section scaffolding === */
.av-section {
    padding: 3rem 0;
}

.av-section-title {
    font-size: 2.6rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: .5rem;
}

.av-section-sub {
    text-align: center;
    color: var(--av-muted);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 2.75rem;
}

/* === Features — 2x2 hairline grid, no icon circles === */
.av-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin: 0 auto 3rem;   /* auto L/R so the .container stays centred (aligns with the steps above) */
    padding-left: 0;       /* drop the .container side gutter so card edges line up with the steps grid */
    padding-right: 0;
}

.av-feature {
    background: var(--av-surface);
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius);
    box-shadow: var(--av-shadow);
    padding: 2rem;
    transition: background .12s;
}

.av-feature:hover {
    background: var(--av-accent-pale);
}

.av-feature h3 {
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: .4rem;
}

.av-feature p {
    color: var(--av-muted);
    font-size: .9rem;
    line-height: 1.6;
    margin: 0;
}

/* === Page header === */
.av-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 2rem 0 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--av-border);
}

.av-page-head h1 {
    margin: 0;
    font-size: 2rem;
}

.av-sub {
    color: var(--av-muted);
    font-size: .88rem;
    margin-top: .2rem;
}

/* === Analytics dashboard ("Vault Signals") === */
.av-kpi-strip {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    margin: 0 0 1.5rem;
}

.av-kpi {
    background: var(--av-surface);
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius);
    box-shadow: var(--av-shadow);
    padding: 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

/* the two marketplace-forward anchors read loudest */
.av-kpi.is-hero {
    background: linear-gradient(160deg, var(--av-glow-warm), var(--av-surface));
    border-color: var(--av-glow-warm-border);
}

.av-kpi-num {
    font-family: 'Archivo Black', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    line-height: 1;
    color: var(--av-ink);
    font-variant-numeric: tabular-nums;
}

.av-kpi.is-hero .av-kpi-num { color: var(--av-accent-dark); }

.av-kpi-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--av-muted);
    margin-top: .35rem;
}

/* chart grid */
.av-chart-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
.av-chart-grid.one { grid-template-columns: 1fr; }

.av-chart-card {
    background: var(--av-surface);
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius);
    box-shadow: var(--av-shadow);
    padding: 1.25rem 1.4rem 1.4rem;
    min-width: 0;
}

.av-chart-title {
    font-family: 'Archivo Black', sans-serif;
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--av-ink);
    margin-bottom: .15rem;
}

.av-chart-note {
    font-size: .78rem;
    color: var(--av-muted);
    margin-bottom: .9rem;
}

.av-chart-canvas-wrap {
    position: relative;
    height: 260px;
}
.av-chart-canvas-wrap.tall { height: 320px; }

.av-chart-empty {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--av-muted);
    font-size: .9rem;
    border: 1px dashed var(--av-border);
    border-radius: var(--av-radius-sm);
}

@media (max-width: 900px) {
    .av-kpi-strip { grid-template-columns: repeat(2, 1fr); }
    .av-chart-grid { grid-template-columns: 1fr; }
}

/* === Marketplace + wallet === */
.av-credit-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 700;
    font-size: .9rem;
    color: var(--av-amber-ink);   /* AA-safe on amber-soft (accent-dark was 4.43:1) */
    background: var(--av-amber-soft);
    border: 1px solid var(--av-glow-gold-border);
    border-radius: var(--av-pill);
    padding: .3rem .7rem;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.av-credit-chip:hover { background: #ffe7c4; color: var(--av-amber-ink); }
.av-credit-unit { font-size: .72rem; font-weight: 600; }

/* === Marketplace search / filter toolbar === */
.av-market-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin-top: 1.25rem;
}
.av-market-search {
    position: relative;
    flex: 1 1 220px;
    min-width: 180px;
}
.av-market-search .bi {
    position: absolute;
    left: .8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--av-muted);
    font-size: .95rem;
    pointer-events: none;
}
.av-market-search input {
    width: 100%;
    padding: .5rem .75rem .5rem 2.25rem;
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius-input);
    background: var(--av-surface);
    color: var(--av-ink);
    font-size: .92rem;
}
.av-select {
    padding: .5rem 2rem .5rem .75rem;
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius-input);
    background: var(--av-surface);
    color: var(--av-ink);
    font-size: .9rem;
    cursor: pointer;
    /* custom chevron so the control matches across browsers */
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b5f7d' d='M6 8.5 1.5 4h9z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .7rem center;
}
/* Segmented control: All / Buy now / Auction */
.av-seg {
    display: inline-flex;
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius-input);
    background: var(--av-surface);
    overflow: hidden;
}
.av-seg button {
    border: 0;
    background: transparent;
    padding: .5rem .85rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--av-muted);
    cursor: pointer;
    border-left: 1px solid var(--av-border);
}
.av-seg button:first-child { border-left: 0; }
.av-seg button.is-active {
    /* Ink on pale coral — accent-dark on accent-pale was 4.0:1, under AA's 4.5. */
    background: var(--av-accent-pale);
    color: var(--av-ink);
}
.av-price-range {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.av-price-range input {
    width: 4.5rem;
    padding: .5rem .55rem;
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius-input);
    background: var(--av-surface);
    color: var(--av-ink);
    font-size: .9rem;
}
.av-price-dash { color: var(--av-muted); }
.av-price-unit { color: var(--av-muted); font-size: .8rem; font-weight: 600; }
.av-market-toolbar input:focus,
.av-market-toolbar select:focus {
    outline: none;
    border-color: var(--av-accent);
    box-shadow: 0 0 0 3px var(--av-foil-1);
}
.av-market-resultbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .75rem;
    min-height: 1.5rem;
}
.av-result-count { color: var(--av-muted); font-size: .82rem; font-weight: 600; }
.av-clear-btn {
    border: 0;
    background: transparent;
    color: var(--av-accent-dark);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    padding: .2rem .3rem;
}
.av-clear-btn:hover { text-decoration: underline; }

.av-listing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.1rem;
    margin-top: 1.25rem;
}

.av-listing-card {
    background: var(--av-surface);
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius);
    box-shadow: var(--av-shadow);
    padding: 1.1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.av-listing-top { display: flex; align-items: center; justify-content: space-between; }
.av-listing-price {
    font-family: 'Archivo Black', sans-serif; font-weight: 700; font-size: 1.35rem;
    color: var(--av-accent-dark); display: inline-flex; align-items: baseline; gap: .25rem;
    font-variant-numeric: tabular-nums;
}
.av-listing-qty { font-size: .8rem; font-weight: 700; color: var(--av-muted); }
.av-listing-name { font-family: 'Archivo Black', sans-serif; font-weight: 600; font-size: 1.05rem; line-height: 1.2; color: var(--av-ink); }
.av-listing-cats { display: flex; flex-wrap: wrap; gap: .3rem; min-height: 1.2rem; }
.av-listing-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .5rem; margin-top: .35rem; padding-top: .7rem; border-top: 1px solid var(--av-border);
}
/* Seller info can shrink (name truncates); the action buttons never do. */
.av-listing-sellerwrap { display: inline-flex; align-items: center; gap: .3rem; min-width: 0; flex: 0 1 auto; }
.av-listing-foot > form, .av-listing-foot > div { flex: 0 0 auto; }
.av-listing-foot .btn { white-space: nowrap; }
.av-listing-seller { font-size: .8rem; color: var(--av-muted); display: inline-flex; align-items: center; gap: .3rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-sm { padding: .35rem .8rem; font-size: .8rem; }

.av-wallet-balance {
    display: flex; align-items: baseline; gap: .5rem;
    color: var(--av-accent-dark);
    background: linear-gradient(160deg, var(--av-glow-warm), var(--av-surface));
    border: 1px solid var(--av-glow-warm-border); border-radius: var(--av-radius);
    box-shadow: var(--av-shadow); padding: 1.5rem 1.75rem; margin-top: .5rem;
}
.av-wallet-balance .bi { font-size: 1.6rem; }
/* Dark: the deep-coral number sits on a dark band now — lift it to the bright accent. */
:root[data-theme="dark"] .av-wallet-balance { color: var(--av-accent); }
.av-wallet-num { font-family: 'Archivo Black', sans-serif; font-weight: 700; font-size: 2.6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.av-wallet-unit { font-size: 1rem; color: var(--av-muted); font-weight: 600; }

.av-ledger { width: 100%; border-collapse: collapse; font-size: .9rem; }
.av-ledger th {
    text-align: left; font-size: .68rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--av-muted); padding: .5rem .6rem; border-bottom: 1px solid var(--av-border);
}
.av-ledger td { padding: .6rem; border-bottom: 1px solid var(--av-border); vertical-align: top; }
.av-ledger .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.av-ledger .pos { color: var(--av-success); font-weight: 700; }
.av-ledger .neg { color: var(--av-accent-dark); font-weight: 700; }
.av-ledger-party { display: block; font-size: .78rem; color: var(--av-muted); }

/* Wallet summary tiles + ledger controls */
.av-wallet-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.25rem;
}
.av-wallet-tile {
    background: var(--av-surface);
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius);
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.av-wallet-tile-num {
    font-family: 'Archivo Black', sans-serif;
    font-weight: 700;
    font-size: 1.7rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.av-wallet-tile-num.pos { color: var(--av-success); }
.av-wallet-tile-num.neg { color: var(--av-accent-dark); }
.av-wallet-tile-label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--av-muted);
}
.av-wallet-ledger-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: .5rem;
}
.av-wallet-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
}
.av-wallet-search { flex: 0 1 220px; }
.av-wallet-resultbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .75rem;
}
.av-wallet-note { color: var(--av-muted); font-size: .78rem; }
@media (max-width: 640px) {
    .av-wallet-tiles { grid-template-columns: 1fr; }
}

/* auctions */
.av-listing-card.is-auction { border-color: var(--av-glow-gold-border); background: linear-gradient(170deg, var(--av-glow-gold), var(--av-surface)); }
.av-auction-tag {
    font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: #fff; background: var(--av-amber-ink); padding: .18rem .45rem; border-radius: var(--av-radius-lot);
}
.av-auction-meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.av-countdown {
    font-size: .8rem; font-weight: 700; color: var(--av-accent-dark);
    font-variant-numeric: tabular-nums;
}
.av-countdown.ended { color: var(--av-muted); font-weight: 600; }
.av-highbidder { font-size: .74rem; color: var(--av-muted); }
.av-bid-form { display: flex; gap: .4rem; align-items: center; }
.av-bid-form input { width: 5.5rem; }

/* offers */
.av-offer-badge {
    font-size: .72rem; font-weight: 700; color: var(--av-accent-dark);
    background: var(--av-accent-pale); border: 1px solid var(--av-glow-warm-border);
    padding: .2rem .5rem; border-radius: var(--av-pill); text-decoration: none;
}
.av-offer-list { display: flex; flex-direction: column; }
.av-offer-row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .8rem .2rem; border-bottom: 1px solid var(--av-border); font-size: .92rem;
}
.av-offer-row:last-child { border-bottom: 0; }
.av-offer-give { color: var(--av-accent-dark); font-weight: 700; }
/* Visual offer rows: card thumbnails on both sides of the swap. */
.av-offer-detail { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.av-offer-actor { color: var(--av-muted); }
.av-offer-cardcell { display: inline-flex; align-items: center; gap: .45rem; }
.av-offer-thumb {
    width: 38px; height: 53px; flex: 0 0 auto;
    object-fit: cover; border-radius: 4px;
    border: 1px solid var(--av-border); background: var(--av-surface-2); display: block;
}
.av-offer-thumb-empty { display: inline-flex; align-items: center; justify-content: center; color: var(--av-border); font-size: .95rem; }
.av-offer-swaparrow { color: var(--av-accent); font-size: 1rem; flex: 0 0 auto; }

/* "My activity" — active-bid rows + section link */
.av-bid-meta { font-size: .82rem; color: var(--av-muted); margin-top: .2rem; }
.av-bid-meta strong { color: var(--av-accent-dark); }
.av-bid-ends { margin-left: .35rem; white-space: nowrap; }
.av-when { color: var(--av-muted); margin-left: .1rem; white-space: nowrap; }
.av-bid-badge {
    font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
    padding: .2rem .55rem; border-radius: var(--av-pill); white-space: nowrap;
}
.av-bid-badge.winning { background: var(--av-success-soft); color: var(--av-success); }
.av-bid-badge.outbid { background: rgba(255, 138, 138, .15); color: var(--av-red); }
.av-chart-link { float: right; font-size: .8rem; font-weight: 700; color: var(--av-accent-dark); }

/* item photos */
.av-item-photo {
    display: block; width: 100%; max-width: 320px;
    border-radius: var(--av-radius); border: 1px solid var(--av-border);
    object-fit: cover; background: var(--av-surface-2);
}
.av-item-photo-empty {
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    color: var(--av-muted); font-size: .9rem; height: 180px;
}
.av-listing-photo {
    margin: -1.1rem -1.15rem .7rem;
    border-radius: var(--av-radius) var(--av-radius) 0 0;
    overflow: hidden; aspect-ratio: 5 / 7; background: var(--av-surface-2);
}
.av-listing-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-listing-photo-empty { display: flex; align-items: center; justify-content: center; color: var(--av-border); font-size: 1.9rem; }
/* 5:7 matches a physical card (63x88mm) and the marketplace photo box, so the
   art shows in full instead of cropping top and bottom. */
.av-item-thumb { margin: -1.75rem -1.75rem 1rem; border-radius: var(--av-radius) var(--av-radius) 0 0; overflow: hidden; aspect-ratio: 5 / 7; background: var(--av-surface-2); }
.av-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Keep the same image area for items with no photo, so the grid stays even. */
.av-item-thumb-empty { display: flex; align-items: center; justify-content: center; color: var(--av-muted); font-size: 1.9rem; }

/* live-update toast */
.av-toast {
    position: fixed; bottom: 1.5rem; left: 50%;
    transform: translateX(-50%) translateY(1rem);
    background: var(--av-ink); color: #fff; padding: .7rem 1.2rem;
    border-radius: var(--av-pill); font-weight: 700; font-size: .9rem;
    box-shadow: var(--av-shadow-hover); opacity: 0; pointer-events: none;
    transition: opacity .25s ease, transform .25s ease; z-index: 1080;
}
.av-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.av-toast.ok { background: var(--av-success); }
.av-toast.err { background: #8c2a1e; }
#antiForgeryForm { display: none; }

/* === Auth cards === */
.av-auth-wrap {
    display: flex;
    justify-content: center;
    padding: 4rem 1rem;
}

.av-auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--av-surface);
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius);
    box-shadow: var(--av-shadow);
    padding: 2.25rem;
}

.av-auth-head {
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--av-border);
}

.av-auth-head h1 {
    font-size: 1.8rem;
    margin: 0 0 .25rem;
}

.av-auth-head p {
    color: var(--av-muted);
    margin: 0;
    font-size: .9rem;
}

.av-auth-foot {
    text-align: center;
    margin-top: 1.25rem;
    color: var(--av-muted);
    font-size: .875rem;
}

/* Account-type picker on registration (Individual / Business). */
.av-party-toggle { display: flex; gap: .6rem; }
.av-party-opt {
    flex: 1 1 0; min-width: 0;
    display: flex; align-items: flex-start; gap: .5rem;
    padding: .65rem .75rem;
    border: 1px solid var(--av-border); border-radius: var(--av-radius-input);
    background: var(--av-surface); cursor: pointer;
    transition: border-color .12s, background .12s, box-shadow .12s;
}
.av-party-opt input { margin-top: .2rem; flex: 0 0 auto; }
.av-party-opt span { display: flex; flex-direction: column; line-height: 1.25; }
.av-party-opt small { color: var(--av-muted); font-size: .74rem; }
.av-party-opt:has(input:checked) {
    border-color: var(--av-accent);
    background: var(--av-accent-pale);
    box-shadow: 0 0 0 2px var(--av-foil-1);
}

/* === Forms === */
.form-label,
.control-label {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--av-muted);
    margin-bottom: .4rem;
}

.form-control {
    background: var(--av-surface);
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius-input);
    padding: .58rem .85rem;
    color: var(--av-ink);
    font-family: 'Space Grotesk', sans-serif;
    font-size: .9rem;
}

.form-control:focus {
    border-color: var(--av-accent);
    box-shadow: 0 0 0 3px var(--av-foil-1), 0 0 0 5px var(--av-foil-2);
    background: var(--av-surface-2);   /* was #fff — white bg + white text = invisible typing on the dark theme */
    outline: none;
}

.text-danger {
    color: #8a2d20 !important;
}

.alert-danger {
    background: #fdf0ee;
    border: 1px solid #f2c8c0;
    color: #7a2518;
    border-radius: var(--av-radius);
    padding: .75rem 1rem;
    font-size: .9rem;
}

/* === Item grid — bordered cards (robust for partial/short rows) === */
.av-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.av-item {
    background: var(--av-surface);
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius);
    padding: 1.35rem;
    display: flex;
    flex-direction: column;
    gap: .9rem;
    transition: background .1s;
}

.av-item:hover {
    background: var(--av-surface-2);   /* was #fff — white-out on the dark theme */
}

.av-item-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .5rem;
}

.av-item-name {
    font-family: 'Archivo Black', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.2;
}

.av-item-id {
    font-family: ui-monospace, 'Cascadia Code', monospace;
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--av-amber-ink);
    flex-shrink: 0;
    margin-top: .15rem;
}
/* "Listed" badge on a fully-escrowed collection item, links to the marketplace. */
.av-listed-badge {
    display: inline-flex; align-items: center; gap: .2rem;
    margin-left: .4rem; padding: .05rem .4rem; border-radius: var(--av-pill);
    background: var(--av-success-soft); color: var(--av-success);
    font-family: 'Space Grotesk', sans-serif; font-size: .62rem; letter-spacing: .04em;
    text-decoration: none; vertical-align: middle;
}

/* === Quantity bar === */
.av-qty {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.av-qty-label {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--av-muted);
    flex-shrink: 0;
}

.av-bar {
    flex: 1;
    height: 4px;
    background: var(--av-border);
    overflow: hidden;
    border-radius: 0;
}

.av-bar > span {
    display: block;
    height: 100%;
    background: var(--av-accent);
    border-radius: 0;
}

.av-qty-num {
    font-family: 'Archivo Black', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--av-amber-ink);
    flex-shrink: 0;
    line-height: 1;
}

/* === Item actions === */
.av-item-actions {
    display: flex;
    gap: 1rem;
    font-size: .82rem;
    margin-top: auto;
    padding-top: .75rem;
    border-top: 1px solid var(--av-border);
}

.av-item-actions a {
    color: var(--av-muted);
    transition: color .1s;
}

.av-item-actions a:hover {
    color: var(--av-accent);
}

/* === Search === */
.av-search {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}

.av-search .form-control {
    max-width: 320px;
}

/* === Empty state === */
.av-empty {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--av-muted);
    font-size: .95rem;
    border: 1px dashed var(--av-border);
    border-radius: var(--av-radius);
    margin-bottom: 2rem;
}

/* Only the lead icon is decorative; icons inside buttons/links keep their flow.
   (The badge styling itself lives in the "Empty states, upgraded" block below.) */
.av-empty > .bi:first-child {
    display: inline-flex;
}

/* === Tables (ledger) === */
.table {
    background: var(--av-surface);
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius);
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

.table thead th {
    background: var(--av-bg);
    border-bottom: 1px solid var(--av-border);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: .7rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--av-muted);
    padding: .85rem 1rem;
}

.table tbody td {
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--av-border);
    vertical-align: middle;
    font-size: .9rem;
}

.table tbody tr:last-child td {
    border-bottom: none;
}

.table tbody tr:hover {
    background: var(--av-accent-pale);
}

/* === Details list === */
.av-dl {
    background: var(--av-surface);
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius);
    padding: 1.75rem;
    box-shadow: var(--av-shadow);
    max-width: 520px;
}

.av-dl dt {
    color: var(--av-muted);
    font-weight: 600;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: .25rem;
}

.av-dl dd {
    font-size: 1.05rem;
    margin-bottom: .85rem;
    padding-bottom: .85rem;
    border-bottom: 1px solid var(--av-border);
}

.av-dl dd:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Category / code token — amber to match lot badges */
.av-code {
    font-family: ui-monospace, 'Cascadia Code', monospace;
    background: var(--av-amber-soft);
    color: var(--av-amber-ink);
    border-radius: 2px;
    padding: .15rem .5rem;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.av-actions {
    display: flex;
    gap: .6rem;
    margin-top: 1.25rem;
}

/* === Scroll reveal ===
   Elements fade in as they enter the viewport (IntersectionObserver in site.js).
   The hidden start-state is gated behind html.js — set by an inline <head> script —
   so if JS is blocked or fails, nothing is ever stuck at opacity:0: the whole page
   renders by default. */
.reveal {
    transition: opacity .5s ease, transform .5s ease;
}

html.js .reveal:not(.is-visible) {
    opacity: 0;
    transform: translateY(16px);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }

/* Reduced motion: reveal everything at once, no animation. The scoped selector
   matches the html.js gate above (same specificity, later in the cascade) so
   not-yet-observed elements still show immediately. */
@media (prefers-reduced-motion: reduce) {
    html.js .reveal:not(.is-visible) { opacity: 1; transform: none; }
    .reveal { transition: none; }
}

/* === Responsive === */
@media (max-width: 960px) {
    .av-hero { padding: 3.5rem 0 3rem; }
    .av-features { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .av-stats { gap: 2.5rem; padding: 2rem 0; }
    .av-hero-title { font-size: 2.8rem; }
    /* Restore a side gutter on the edge-to-edge landing sections so cards
       don't touch the screen edge on small viewports. */
    .av-section, .av-features { padding-left: 1.1rem; padding-right: 1.1rem; }
}

@media (max-width: 560px) {
    .av-grid { grid-template-columns: 1fr; }
}

/* === Accessibility === */
:focus-visible {
    outline: 2px solid var(--av-accent);
    outline-offset: 3px;
}

/* Skip-to-content: off-screen until focused by keyboard. */
.av-skip {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 2000;
    background: var(--av-accent-dark);
    color: #fff;
    padding: .6rem 1rem;
    border-radius: 0 0 var(--av-radius-sm) 0;
    font-weight: 700;
}
.av-skip:focus { left: 0; }
main:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---- Notifications: nav bell, dropdown, and page list ---- */
.av-bell-wrap { position: relative; display: inline-flex; }
.av-bell-af { display: none; }

.av-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--av-border);
    background: var(--av-surface);
    border-radius: var(--av-pill);
    color: var(--av-ink);
    font-size: 1.05rem;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.av-bell:hover { background: var(--av-accent-pale); border-color: var(--av-accent); color: var(--av-accent-dark); }
.av-bell:focus-visible { outline: 3px solid var(--av-foil-1); outline-offset: 2px; }

.av-bell-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--av-pill);
    background: var(--av-accent-dark);
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    border: 2px solid var(--av-surface);
    font-variant-numeric: tabular-nums;
}

.av-notif-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 344px;
    max-width: 90vw;
    background: var(--av-surface);
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius);
    box-shadow: var(--av-shadow-hover);
    z-index: 1050;
    overflow: hidden;
}

.av-notif-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--av-border);
    background: var(--av-surface-2);
}
.av-notif-title { font-family: 'Archivo Black', sans-serif; font-weight: 600; color: var(--av-ink); }
.av-notif-mark {
    border: none;
    background: none;
    color: var(--av-accent-dark);
    font-weight: 700;
    font-size: .8rem;
    cursor: pointer;
    padding: .1rem .2rem;
}
.av-notif-mark:hover { text-decoration: underline; }

.av-notif-list { max-height: 60vh; overflow-y: auto; }
.av-notif-empty { padding: 1.6rem 1rem; text-align: center; color: var(--av-muted); font-size: .9rem; }

/* Rows are shared by the dropdown and the full page. */
.av-notif-row {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--av-border);
    text-decoration: none;
    color: var(--av-ink);
    transition: background .12s ease;
}
.av-notif-row:last-child { border-bottom: none; }
.av-notif-row:hover { background: var(--av-accent-pale); }
.av-notif-row.unread { background: var(--av-amber-soft); }
.av-notif-row.unread:hover { background: #ffe7c4; }

.av-notif-ico {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: var(--av-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    background: var(--av-surface-2);
    color: var(--av-muted);
}
.av-notif-ico.ok { background: var(--av-success-soft); color: var(--av-success); }
.av-notif-ico.warn { background: var(--av-amber-soft); color: var(--av-amber-ink); }
.av-notif-ico.accent { background: var(--av-accent-pale); color: var(--av-accent-dark); }
.av-notif-ico.muted { background: var(--av-surface-2); color: var(--av-muted); }

.av-notif-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1 1 auto; }
.av-notif-msg { font-size: .88rem; line-height: 1.35; color: var(--av-ink); }
.av-notif-time { font-size: .72rem; color: var(--av-muted); }
.av-notif-dot {
    flex: 0 0 auto;
    align-self: center;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--av-accent);
}

.av-notif-foot {
    display: block;
    text-align: center;
    padding: .6rem;
    font-size: .82rem;
    font-weight: 700;
    color: var(--av-accent-dark);
    text-decoration: none;
    background: var(--av-surface-2);
    border-top: 1px solid var(--av-border);
}
.av-notif-foot:hover { text-decoration: underline; }

/* Full notifications page reuses .av-notif-row inside a bordered card. */
.av-notif-page {
    margin-top: 1rem;
    background: var(--av-surface);
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius);
    box-shadow: var(--av-shadow);
    overflow: hidden;
}
.av-notif-page .av-notif-row { padding: .9rem 1.1rem; }
.av-notif-page .av-notif-msg { font-size: .95rem; }

@media (max-width: 575px) {
    .av-notif-panel { position: fixed; top: 64px; right: 8px; left: 8px; width: auto; }
}

/* ---- Profiles, trades & ratings ---- */
/* Seller rating chip on marketplace cards. */
.av-seller-rating {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    margin-left: .4rem;
    font-size: .78rem;
    font-weight: 700;
    color: var(--av-amber-ink);
    font-variant-numeric: tabular-nums;
}
.av-seller-rating .bi-star-fill { color: var(--av-amber-ink); }
a.av-listing-seller { text-decoration: none; color: var(--av-muted); }
a.av-listing-seller:hover { color: var(--av-accent-dark); text-decoration: underline; }

/* Profile header. */
.av-profile-head {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-top: 1.2rem;
    padding: 1.4rem;
    background: var(--av-surface);
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius);
    box-shadow: var(--av-shadow);
    flex-wrap: wrap;
}
.av-profile-avatar { font-size: 3rem; color: var(--av-accent); line-height: 1; }
.av-profile-id { flex: 1 1 auto; min-width: 0; }
.av-profile-id h1 { margin: 0; display: flex; align-items: center; gap: .5rem; }
.av-profile-you { font-size: .7rem; font-weight: 700; color: var(--av-muted); background: var(--av-surface-2); border-radius: var(--av-pill); padding: .1rem .5rem; text-transform: uppercase; letter-spacing: .04em; }
.av-profile-tags { display: flex; align-items: center; gap: .6rem; margin-top: .35rem; }
.av-profile-provider { font-size: .82rem; color: var(--av-muted); }
.av-profile-company { font-size: .85rem; color: var(--av-ink); font-weight: 600; margin-top: .3rem; display: inline-flex; align-items: center; gap: .3rem; }
.av-profile-rep { text-align: right; }
.av-rep-stars { font-size: 1.1rem; color: var(--av-amber-ink); letter-spacing: .05em; }
.av-rep-stars .bi-star { color: var(--av-border); }
.av-rep-num { font-weight: 800; color: var(--av-ink); font-variant-numeric: tabular-nums; }
.av-rep-count { font-weight: 600; color: var(--av-muted); font-size: .82rem; }
.av-rep-none { color: var(--av-muted); font-size: .9rem; font-style: italic; }

.av-profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin-top: 1rem; }
.av-stat-tile {
    background: var(--av-surface);
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius);
    padding: 1rem;
    text-align: center;
    box-shadow: var(--av-shadow);
}
.av-stat-num { display: block; font-family: 'Archivo Black', sans-serif; font-size: 1.7rem; font-weight: 600; color: var(--av-accent-dark); font-variant-numeric: tabular-nums; }
.av-stat-label { display: block; font-size: .8rem; color: var(--av-muted); margin-top: .2rem; }

.av-profile-section { font-family: 'Archivo Black', sans-serif; font-size: 1.15rem; margin: 1.6rem 0 .8rem; color: var(--av-ink); }
.av-profile-section-note { font-family: 'Space Grotesk', sans-serif; font-size: .78rem; font-weight: 600; color: var(--av-muted); margin-left: .5rem; }

/* Owned-card marks on the set page: a success ring + check badge. */
.av-cardtile.is-owned { border-color: var(--av-success); }
.av-cardtile-img { position: relative; }
.av-owned-badge {
    position: absolute; top: .3rem; right: .3rem; z-index: 1;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--av-success); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: .8rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.av-set-owned-note strong { color: var(--av-success); }

/* Profile vault preview: reuses the catalogue card tiles; plain (unlinked)
   entries are inert. */
.av-cardtile-static { cursor: default; }
.av-cardtile-noart { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 1.6rem; color: var(--av-muted); }
.av-qty-chip {
    font-size: .68rem; font-weight: 800; color: var(--av-accent-dark);
    background: var(--av-accent-pale); border-radius: var(--av-pill);
    padding: 0 .4rem; margin-left: .25rem; vertical-align: middle;
}

/* Collector directory (/Collectors). */
.av-collector-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .8rem; }
.av-collector-card {
    display: flex; align-items: center; gap: .8rem;
    background: var(--av-surface); border: 1px solid var(--av-border);
    border-radius: var(--av-radius); padding: .85rem 1rem;
    text-decoration: none; color: var(--av-ink);
    transition: border-color .12s, box-shadow .12s;
}
.av-collector-card:hover { border-color: var(--av-accent); box-shadow: var(--av-shadow); color: var(--av-ink); }
.av-collector-card:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--av-foil-1); }
.av-collector-avatar {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
    background: var(--av-accent-pale); color: var(--av-accent-dark);
    font-family: 'Archivo Black', sans-serif; font-size: 1.25rem; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
}
.av-collector-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.av-collector-name { font-weight: 800; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.av-collector-company { font-size: .78rem; color: var(--av-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-collector-meta { display: flex; gap: .8rem; font-size: .78rem; color: var(--av-muted); font-variant-numeric: tabular-nums; }
.av-collector-stars { color: var(--av-amber-ink); font-weight: 700; }
.av-collector-unrated { font-style: normal; opacity: .75; }

/* Reviews list. */
.av-review-list { display: flex; flex-direction: column; gap: .7rem; }
.av-review {
    background: var(--av-surface);
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius-sm);
    padding: .8rem 1rem;
}
.av-review-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.av-review-stars { color: var(--av-amber-ink); font-size: .9rem; }
.av-review-stars .bi-star { color: var(--av-border); }
.av-review-rater { font-weight: 700; color: var(--av-accent-dark); text-decoration: none; }
.av-review-rater:hover { text-decoration: underline; }
.av-review-item { color: var(--av-muted); font-size: .85rem; }
.av-review-date { color: var(--av-muted); font-size: .78rem; margin-left: auto; }
.av-review-comment { margin-top: .35rem; color: var(--av-ink); font-size: .92rem; }

/* Trades list + inline rating form. */
.av-trade-list { display: flex; flex-direction: column; gap: .7rem; margin-top: 1rem; }
.av-trade-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--av-surface);
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius-sm);
    padding: .8rem 1rem;
    box-shadow: var(--av-shadow);
    flex-wrap: wrap;
}
.av-trade-item { font-weight: 700; color: var(--av-ink); }
.av-trade-meta { display: flex; align-items: center; gap: .5rem; margin-top: .2rem; font-size: .84rem; flex-wrap: wrap; }
.av-trade-role.sold { color: var(--av-success); font-weight: 700; }
.av-trade-role.bought { color: var(--av-accent-dark); font-weight: 700; }
.av-trade-role.swap { color: var(--av-amber-ink); font-weight: 700; }

/* Visual two-card trade preview on the Make-an-offer page */
.av-offer-card { max-width: 480px; }
.av-trade-preview { display: flex; align-items: flex-start; justify-content: center; gap: .6rem; margin: 0 0 1.5rem; }
.av-trade-side { flex: 1 1 0; min-width: 0; text-align: center; }
.av-trade-side-label { font-size: .66rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--av-muted); margin-bottom: .4rem; }
.av-trade-cardface {
    aspect-ratio: 5 / 7;
    border-radius: var(--av-radius-input);
    overflow: hidden;
    background: var(--av-surface-2);
    border: 1px solid var(--av-border);
    display: flex; align-items: center; justify-content: center;
}
.av-trade-cardface img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-trade-cardempty { color: var(--av-border); font-size: 1.7rem; }
.av-trade-cardname { font-weight: 700; font-size: .82rem; line-height: 1.2; margin-top: .5rem; }
.av-trade-cardextra { font-size: .74rem; color: var(--av-muted); margin-top: .1rem; }
.av-trade-swapicon { flex: 0 0 auto; color: var(--av-accent); font-size: 1.25rem; align-self: center; padding-top: 1rem; }
/* Barter line: what you gave (muted) -> what you got (emphasised). */
.av-trade-swap-line { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.av-trade-gave { color: var(--av-muted); font-weight: 600; }
.av-trade-got { color: var(--av-ink); font-weight: 700; }
.av-trade-swaparrow { color: var(--av-accent); font-size: .9rem; }
.av-trade-party { color: var(--av-ink); font-weight: 700; text-decoration: none; }
.av-trade-party:hover { color: var(--av-accent-dark); text-decoration: underline; }
.av-trade-date { color: var(--av-muted); }

.av-rated { display: inline-flex; align-items: center; gap: .15rem; color: var(--av-amber-ink); }
.av-rated .bi-star { color: var(--av-border); }
.av-rated-label { color: var(--av-muted); font-size: .8rem; margin-left: .4rem; }

.av-rate-form { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.av-rate-comment { width: 200px; max-width: 45vw; }

/* CSS-only star selector: stars laid out 5..1 then reversed so 1 is leftmost;
   hovering/checking a star fills it and every star to its left. */
.av-star-select { display: inline-flex; flex-direction: row-reverse; gap: .1rem; }
.av-star-select input { position: absolute; opacity: 0; width: 0; height: 0; }
.av-star-select label { color: var(--av-border); font-size: 1.15rem; cursor: pointer; transition: color .1s ease; }
.av-star-select label:hover,
.av-star-select label:hover ~ label,
.av-star-select input:checked ~ label { color: var(--av-amber-ink); }
.av-star-select input:focus-visible ~ label { outline: 2px solid var(--av-foil-2); }

/* ---- Staff moderation console ---- */
.av-mod-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .8rem;
    margin-top: 1.2rem;
}
.av-mod-tabs { margin-top: 1.6rem; border-bottom: 2px solid var(--av-border); }
.av-mod-tabs .nav-link { color: var(--av-muted); font-weight: 700; border: none; }
.av-mod-tabs .nav-link.active { color: var(--av-accent-dark); background: none; border-bottom: 3px solid var(--av-accent); }
.av-mod-tabcontent {
    background: var(--av-surface);
    border: 1px solid var(--av-border);
    border-top: none;
    border-radius: 0 0 var(--av-radius) var(--av-radius);
    padding: 1rem;
}
.av-mod-table { font-size: .88rem; margin: 0; }
.av-mod-table thead th { color: var(--av-muted); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; border-bottom: 2px solid var(--av-border); white-space: nowrap; }
.av-mod-table td { vertical-align: middle; border-color: var(--av-border); }
.av-mod-table a { color: var(--av-accent-dark); text-decoration: none; font-weight: 600; }
.av-mod-table a:hover { text-decoration: underline; }
.av-mod-when { color: var(--av-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.av-mod-arrow { color: var(--av-muted); font-size: .75rem; margin: 0 .1rem; }
.av-mod-stars { color: var(--av-amber-ink); white-space: nowrap; }
.av-mod-stars .bi-star { color: var(--av-border); }
.av-mod-comment { max-width: 320px; color: var(--av-ink); }
.av-mod-actform { display: flex; gap: .35rem; align-items: center; }
.av-mod-actform .form-control { width: 150px; }
.av-mod-actions { display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; }
.av-mod-removed { opacity: .55; }
.av-mod-removed .av-mod-comment { text-decoration: line-through; }
.av-mod-removed-tag { font-size: .78rem; color: #8c2a1e; font-weight: 700; }
.av-user-ok { font-size: .78rem; color: var(--av-success); font-weight: 700; }

/* Full-page status screens (403 / 404 / 500). */
.av-status-screen {
    max-width: 560px;
    margin: 3.5rem auto;
    text-align: center;
    background: var(--av-surface);
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius);
    box-shadow: var(--av-shadow);
    padding: 2.6rem 2rem;
}
.av-status-emoji { font-size: 3rem; color: var(--av-accent); line-height: 1; }
.av-status-code {
    font-family: 'Archivo Black', sans-serif;
    font-size: 2.4rem;
    font-weight: 600;
    color: var(--av-muted);
    letter-spacing: .04em;
    margin-top: .3rem;
}
.av-status-screen h1 { margin: .4rem 0 .3rem; }
.av-status-lead { color: var(--av-muted); margin-bottom: 1.4rem; }
.av-status-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.av-status-meta { margin-top: 1.4rem; font-size: .8rem; color: var(--av-muted); }

/* Alerts — one look for flash messages and inline form errors alike. */
.alert {
    border-radius: var(--av-radius-sm);
    border: 1px solid transparent;
    font-weight: 600;
    padding: .7rem 1rem;
}
.alert i { margin-right: .1rem; }
.alert-success { background: #dff2e8; color: var(--av-success); border-color: #b8e0cc; }
.alert-danger { background: #fbe4de; color: #8c2a1e; border-color: #f2c4b8; }
.av-flash { margin-top: 1rem; box-shadow: var(--av-shadow); }

/* Announce compose card. */
.av-announce {
    margin-top: 1.2rem;
    background: var(--av-amber-soft);
    border: 1px solid var(--av-glow-gold-border);
    border-radius: var(--av-radius);
    padding: 1rem 1.1rem;
}
.av-announce-head { font-family: 'Archivo Black', sans-serif; font-weight: 600; color: var(--av-amber-ink); margin-bottom: .5rem; }
.av-announce-form textarea { resize: vertical; }
.av-announce-row { display: flex; gap: .5rem; margin-top: .5rem; }
.av-announce-row .form-control { flex: 1 1 auto; }

/* User-search row in the Users tab. */
.av-user-search { display: flex; gap: .5rem; margin-bottom: .9rem; max-width: 460px; }
.av-user-search .form-control { flex: 1 1 auto; }

/* ---- Browse: Pokemon set gallery ---- */
.av-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .8rem;
    margin: 1.4rem 0 1.8rem;
}
.av-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.av-chip {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: .82rem;
    color: var(--av-muted);
    background: var(--av-surface);
    border: 1px solid var(--av-border);
    border-radius: var(--av-pill);
    padding: .35rem .85rem;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.av-chip:hover { background: var(--av-accent-pale); border-color: var(--av-accent); color: var(--av-accent-dark); }
.av-chip.is-active { background: var(--av-accent-dark); border-color: var(--av-accent-dark); color: #fff; }
.av-chip:focus-visible { outline: 3px solid var(--av-foil-1); outline-offset: 2px; }

.av-set-search { position: relative; display: inline-flex; align-items: center; flex: 0 1 260px; min-width: 200px; }
.av-set-search .bi { position: absolute; left: .75rem; color: var(--av-muted); pointer-events: none; }
.av-set-search input {
    width: 100%;
    padding: .45rem .8rem .45rem 2rem;
    border: 1px solid var(--av-border);
    border-radius: var(--av-pill);
    background: var(--av-surface);
    color: var(--av-ink);
    font-size: .88rem;
}
.av-set-search input:focus-visible { outline: none; border-color: var(--av-accent); box-shadow: 0 0 0 3px var(--av-foil-1); }

.av-era { margin-bottom: 2.4rem; }
.av-era-head {
    display: flex;
    align-items: baseline;
    gap: .7rem;
    padding-bottom: .5rem;
    margin-bottom: 1.1rem;
    border-bottom: 2px solid var(--av-border);
}
.av-era-head h2 { font-family: 'Archivo Black', sans-serif; font-weight: 600; font-size: 1.5rem; color: var(--av-ink); margin: 0; }
.av-era-years { font-size: .82rem; font-weight: 700; color: var(--av-muted); font-variant-numeric: tabular-nums; }

.av-set-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1.1rem;
}
.av-set-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    background: var(--av-surface);
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius);
    box-shadow: var(--av-shadow);
    padding: 1rem 1rem 1.1rem;
    transition: transform .15s ease, box-shadow .15s ease;
}
.av-set-card:hover { transform: translateY(-2px); box-shadow: var(--av-shadow-hover); }

.av-set-logo {
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .3rem;
    background: var(--av-surface-2);
    border-radius: var(--av-radius-sm);
}
.av-set-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.av-set-name { font-family: 'Archivo Black', sans-serif; font-weight: 500; font-size: 1.02rem; color: var(--av-ink); line-height: 1.2; }
.av-set-meta { display: flex; align-items: center; gap: .4rem; margin-top: .25rem; font-size: .82rem; color: var(--av-muted); font-variant-numeric: tabular-nums; }
.av-set-meta .av-dot { opacity: .5; }

.av-set-symbol { position: absolute; top: .7rem; right: .7rem; width: 26px; height: 26px; object-fit: contain; opacity: .9; }

@media (max-width: 560px) {
    .av-set-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
    .av-filter-bar { flex-direction: column; align-items: stretch; }
    .av-set-search { flex-basis: auto; }
    .av-era-head h2 { font-size: 1.25rem; }
}

/* ---- Set detail: header + individual card tiles ---- */
.av-back { color: var(--av-muted); text-decoration: none; font-weight: 700; font-size: .9rem; }
.av-back:hover { color: var(--av-accent-dark); }

.av-setdetail-head { display: flex; align-items: center; gap: 1.2rem; margin: .4rem 0 1.6rem; flex-wrap: wrap; }
.av-setdetail-logo {
    flex: 0 0 auto;
    width: 160px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--av-surface-2);
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius-sm);
    padding: .5rem;
}
.av-setdetail-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.av-cardtile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; }
.av-cardtile {
    background: var(--av-surface);
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius-sm);
    box-shadow: var(--av-shadow);
    padding: .6rem;
    transition: transform .15s ease, box-shadow .15s ease;
}
.av-cardtile:hover { transform: translateY(-2px); box-shadow: var(--av-shadow-hover); }
.av-cardtile-img {
    aspect-ratio: 5 / 7;
    border-radius: var(--av-radius-sm);
    overflow: hidden;
    background: var(--av-surface-2);
    display: flex; align-items: center; justify-content: center;
}
.av-cardtile-img img { width: 100%; height: 100%; object-fit: contain; }
.av-cardtile-name { font-weight: 700; font-size: .82rem; line-height: 1.2; margin-top: .45rem; color: var(--av-ink); }
.av-cardtile-meta { font-size: .72rem; color: var(--av-muted); margin-top: .1rem; }

/* Set cards on Browse became links */
a.av-set-card { text-decoration: none; color: inherit; }

/* ---- Add-Item: "find your card" picker ---- */
.av-cardpick-search { width: 100%; flex: 1 1 auto; }
.av-cardpick-results {
    margin-top: .5rem;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius-sm);
    background: var(--av-surface);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: .4rem;
    padding: .5rem;
}
.av-cardpick-hit {
    border: 1px solid transparent;
    background: none;
    border-radius: var(--av-radius-sm);
    padding: .3rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .2rem;
}
.av-cardpick-hit:hover { border-color: var(--av-accent); background: var(--av-accent-pale); }
.av-cardpick-hit img { width: 100%; aspect-ratio: 5 / 7; object-fit: contain; }
.av-cardpick-hit-name { font-size: .72rem; font-weight: 700; line-height: 1.15; color: var(--av-ink); }
.av-cardpick-hit-set { font-size: .64rem; color: var(--av-muted); }

/* ---- Add Item: two-column layout, steppers, category chips, live preview ---- */
.av-additem-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.5rem; align-items: start; margin-top: 1rem; }
.av-additem-form { max-width: none; margin: 0; }

/* Quantity steppers */
.av-qty-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.av-stepper { display: flex; align-items: stretch; border: 1px solid var(--av-border); border-radius: var(--av-radius-input); overflow: hidden; background: var(--av-surface); }
.av-stepper .form-control { border: none; border-radius: 0; text-align: center; font-weight: 700; box-shadow: none; -moz-appearance: textfield; appearance: textfield; }
.av-stepper .form-control::-webkit-outer-spin-button,
.av-stepper .form-control::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.av-step-btn { flex: 0 0 auto; width: 42px; border: none; background: var(--av-surface-2); color: var(--av-accent-dark); font-size: 1rem; cursor: pointer; transition: background .12s ease; }
.av-step-btn:hover { background: var(--av-accent-pale); }
.av-step-btn:focus-visible { outline: 3px solid var(--av-foil-1); outline-offset: -3px; }

/* Category chips, grouped */
.av-chipgroup { margin-bottom: .8rem; }
.av-chipgroup-label { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--av-muted); margin-bottom: .35rem; }
.av-chipset { display: flex; flex-wrap: wrap; gap: .4rem; }
.av-chip-cat {
    display: inline-flex; align-items: center; gap: .25rem; margin: 0;
    font-size: .82rem; font-weight: 700; color: var(--av-muted);
    background: var(--av-surface); border: 1px solid var(--av-border); border-radius: var(--av-pill);
    padding: .3rem .8rem; cursor: pointer; user-select: none;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.av-chip-cat input { position: absolute; opacity: 0; width: 0; height: 0; }
.av-chip-cat:hover { border-color: var(--av-accent); color: var(--av-accent-dark); }
.av-chip-cat.is-on { background: var(--av-accent-dark); border-color: var(--av-accent-dark); color: #fff; }
.av-chip-cat:focus-within { outline: 3px solid var(--av-foil-1); outline-offset: 1px; }
.av-chip-check { display: none; font-size: .8rem; }
.av-chip-cat.is-on .av-chip-check { display: inline; }

/* Live card preview panel */
.av-additem-preview { position: sticky; top: 1rem; }
.av-preview-card { background: var(--av-surface); border: 1px solid var(--av-border); border-radius: var(--av-radius); box-shadow: var(--av-shadow); padding: 1.2rem; text-align: center; }
.av-preview-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--av-muted); margin-bottom: .8rem; }
.av-preview-empty { color: var(--av-muted); padding: 2rem 1rem; }
.av-preview-empty .bi { font-size: 2.6rem; color: var(--av-border); display: block; margin-bottom: .6rem; }
.av-preview-frame { border-radius: var(--av-radius-input); overflow: hidden; background: var(--av-surface-2); margin-bottom: .8rem; }
.av-preview-frame img { width: 100%; display: block; }
.av-preview-name { font-family: 'Archivo Black', sans-serif; font-weight: 600; font-size: 1.15rem; color: var(--av-ink); line-height: 1.2; }
.av-preview-meta { font-size: .85rem; color: var(--av-muted); margin-top: .25rem; margin-bottom: .8rem; }

@media (max-width: 800px) {
    .av-additem-grid { grid-template-columns: 1fr; }
    .av-additem-preview { position: static; order: -1; }
    .av-preview-frame { max-width: 220px; margin-left: auto; margin-right: auto; }
}

/* ================= Landing page redesign ================= */
/* Hero with faded card-art collage + a fanned card stack */
.av-hero2 { position: relative; overflow: hidden; padding: 4rem 0 3.5rem; }
.av-collage {
    position: absolute; inset: -2% -1% 0; z-index: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 10px; opacity: .16; pointer-events: none; user-select: none;
}
.av-collage img { width: 100%; border-radius: 7px; display: block; }
.av-hero2::after { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--av-bg); opacity: .35; pointer-events: none; }
.av-hero2-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 2rem; align-items: center; }
.av-hero2-text .av-hero-sub strong { color: var(--av-accent-dark); font-weight: 800; }

.av-fan { position: relative; min-height: 380px; }
.av-fan-card { position: absolute; top: 24px; left: 50%; width: 210px; margin-left: -105px; transform-origin: bottom center; }
.av-fan-card img { width: 100%; display: block; border-radius: 12px; border: 3px solid #fff; box-shadow: var(--av-shadow-hover); }
.av-fan-0 { z-index: 3; transform: translateY(-10px); }
.av-fan-1 { z-index: 1; transform: rotate(-15deg) translateX(-96px) translateY(14px); }
.av-fan-2 { z-index: 2; transform: rotate(15deg) translateX(96px) translateY(14px); }
.av-fan:hover .av-fan-1 { transform: rotate(-19deg) translateX(-120px) translateY(6px); }
.av-fan:hover .av-fan-2 { transform: rotate(19deg) translateX(120px) translateY(6px); }
.av-fan-card { transition: transform .25s ease; }

/* Beefed-up stats band */
.av-stats2 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin: 1rem 0 .5rem; }
.av-stat2 { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .15rem; padding: 1rem .5rem; }
.av-stat2 .bi { font-size: 1.4rem; color: var(--av-accent); margin-bottom: .3rem; }
.av-stat2-num { font-family: 'Archivo Black', sans-serif; font-weight: 600; font-size: 2rem; line-height: 1; color: var(--av-ink); font-variant-numeric: tabular-nums; }
.av-stat2-label { font-size: .82rem; color: var(--av-muted); }

/* Scrolling card marquee */
.av-marquee-sec { margin: 2rem 0; }
.av-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.av-marquee-track { display: flex; gap: 12px; width: max-content; animation: av-scroll 70s linear infinite; }
.av-marquee-track img { height: 132px; border-radius: 8px; display: block; }
.av-marquee:hover .av-marquee-track { animation-play-state: paused; }
@keyframes av-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Grails row */
.av-grail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); gap: 1.1rem; margin-top: 1.4rem; }
.av-grail { text-align: center; }
.av-grail-img { border-radius: var(--av-radius-input); overflow: hidden; background: var(--av-surface-2); box-shadow: var(--av-shadow); transition: transform .18s ease, box-shadow .18s ease; }
.av-grail:hover .av-grail-img { transform: translateY(-4px); box-shadow: var(--av-shadow-hover); }
.av-grail-img img { width: 100%; display: block; }
.av-grail-name { font-family: 'Archivo Black', sans-serif; font-weight: 500; margin-top: .5rem; color: var(--av-ink); }
.av-grail-set { font-size: .78rem; color: var(--av-muted); }
.av-section-cta { text-align: center; margin-top: 1.8rem; }

/* Era timeline */
.av-timeline { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 1.4rem; }
.av-era-node { flex: 0 0 auto; width: 140px; text-decoration: none; background: var(--av-surface); border: 1px solid var(--av-border); border-radius: var(--av-radius); box-shadow: var(--av-shadow); padding: .9rem .6rem; text-align: center; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.av-era-node:hover { transform: translateY(-3px); box-shadow: var(--av-shadow-hover); border-color: var(--av-accent); }
.av-era-logo { height: 46px; display: flex; align-items: center; justify-content: center; margin-bottom: .5rem; }
.av-era-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.av-era-name { font-weight: 700; font-size: .84rem; color: var(--av-ink); line-height: 1.15; }
/* Landing timeline year range. Distinct class from Browse's .av-era-years (1897)
   so the two contexts stop overwriting each other's size/weight in the cascade. */
.av-era-node-years { font-size: .74rem; color: var(--av-muted); font-variant-numeric: tabular-nums; margin-top: .1rem; }

/* === Card detail modal (opened from Browse/Sets card tiles) === */
.av-cardtile { cursor: pointer; }
.av-cardtile:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--av-foil-1); }

.av-cardmodal { border: none; border-radius: var(--av-radius); background: var(--av-surface); box-shadow: var(--av-shadow-hover); overflow: hidden; }
.av-cardmodal-body { display: flex; gap: 1.5rem; padding: 1.5rem; position: relative; }
.av-cardmodal-art { flex: 0 0 44%; }
.av-cardmodal-art img { width: 100%; border-radius: var(--av-radius-input); display: block; background: var(--av-surface-2); }
.av-cardmodal-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.av-cardmodal-name { font-family: 'Archivo Black', sans-serif; font-weight: 600; font-size: 1.5rem; color: var(--av-ink); margin: 0 0 .35rem; }
.av-cardmodal-meta { color: var(--av-muted); font-size: .9rem; margin-bottom: 1.25rem; }
.av-cardmodal-actions { margin-top: auto; display: flex; gap: .6rem; flex-wrap: wrap; }
.av-cardmodal-watchcap { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; font-size: .85rem; color: var(--av-ink-soft); }
.av-cardmodal-x { position: absolute; top: .85rem; right: .85rem; z-index: 2; }
@media (max-width: 560px) {
    .av-cardmodal-body { flex-direction: column; }
    .av-cardmodal-art { flex-basis: auto; max-width: 210px; margin: 0 auto; }
}

/* Catalogue-wide card search (Browse) */
.av-catalogue-search { margin: 0 0 1.75rem; }
.av-catalogue-input { max-width: 32rem; }
.av-catalogue-hint { margin: 1rem 0 .75rem; font-weight: 700; color: var(--av-ink); }

/* Searchable item picker (Sell / Offer own-card selection) */
.av-itempicker-search { margin-bottom: .6rem; }
.av-itempicker-list { display: flex; flex-direction: column; gap: .3rem; max-height: 17rem; overflow-y: auto; border: 1px solid var(--av-border); border-radius: var(--av-radius-input); padding: .35rem; background: var(--av-surface); }
.av-itempicker-hit { display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; border-radius: var(--av-radius-sm); padding: .4rem .5rem; cursor: pointer; font: inherit; color: var(--av-ink); }
.av-itempicker-hit:hover { background: var(--av-surface-2); }
.av-itempicker-hit.is-selected { border-color: var(--av-accent); background: var(--av-accent-pale); }
.av-itempicker-hit:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--av-foil-1); }
.av-itempicker-thumb { flex: 0 0 34px; width: 34px; height: 46px; border-radius: var(--av-radius-lot); overflow: hidden; background: var(--av-surface-2); display: flex; align-items: center; justify-content: center; color: var(--av-muted); }
.av-itempicker-thumb img { width: 100%; height: 100%; object-fit: cover; }
.av-itempicker-hit-name { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-itempicker-hit-qty { flex: 0 0 auto; color: var(--av-muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.av-itempicker-empty { color: var(--av-muted); font-size: .9rem; padding: .5rem; }

/* Marketplace fair-price signal chip (ask vs. the card's typical sold price) */
.av-price-signal { display: inline-flex; align-items: center; font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: .12rem .45rem; border-radius: var(--av-pill); margin-left: .5rem; white-space: nowrap; }
.av-price-deal { background: var(--av-success-soft); color: var(--av-success); }
.av-price-fair { background: var(--av-surface-2); color: var(--av-muted); }
.av-price-high { background: var(--av-amber-soft); color: var(--av-amber-ink); }

/* My Vault (personal portfolio dashboard) */
.av-vault-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .9rem; margin-bottom: 1.5rem; }
.av-vault-hero .av-stat-num { color: var(--av-accent-dark); }
.av-vault-unit { font-size: .9rem; font-weight: 600; color: var(--av-muted); margin-left: .2rem; }
.av-vault-note { background: var(--av-amber-soft); color: var(--av-amber-ink); border-radius: var(--av-radius-input); padding: .7rem 1rem; font-size: .9rem; margin-bottom: 1.5rem; }
.av-vault-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.av-vault-panel { background: var(--av-surface); border: 1px solid var(--av-border); border-radius: var(--av-radius); box-shadow: var(--av-shadow); padding: 1.5rem; }
.av-vault-panel-title { font-size: 1.15rem; font-weight: 600; margin: 0 0 1rem; }
.av-vault-holdings { display: flex; flex-direction: column; gap: .5rem; }
.av-vault-holding { display: flex; align-items: center; gap: .75rem; }
.av-vault-thumb { flex: 0 0 32px; width: 32px; height: 44px; border-radius: var(--av-radius-lot); overflow: hidden; background: var(--av-surface-2); display: flex; align-items: center; justify-content: center; color: var(--av-muted); }
.av-vault-thumb img { width: 100%; height: 100%; object-fit: cover; }
.av-vault-hold-name { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-vault-hold-qty { color: var(--av-muted); font-weight: 600; margin-left: .25rem; }
.av-vault-hold-val { flex: 0 0 auto; font-weight: 700; color: var(--av-accent-dark); font-variant-numeric: tabular-nums; }
.av-vault-bars { display: flex; flex-direction: column; gap: .6rem; }
.av-vault-bar-row { display: flex; align-items: center; gap: .75rem; }
.av-vault-bar-label { flex: 0 0 32%; font-size: .85rem; font-weight: 600; }
.av-vault-bar-track { flex: 1 1 auto; height: 8px; background: var(--av-surface-2); border-radius: var(--av-pill); overflow: hidden; }
.av-vault-bar-fill { display: block; height: 100%; background: var(--av-accent); border-radius: var(--av-pill); }
.av-vault-bar-val { flex: 0 0 auto; font-size: .82rem; font-weight: 700; color: var(--av-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .av-vault-grid { grid-template-columns: 1fr; } }

/* Watchlist page */
.av-watch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; }
.av-watch-card { display: flex; align-items: center; gap: .85rem; background: var(--av-surface); border: 1px solid var(--av-border); border-radius: var(--av-radius); box-shadow: var(--av-shadow); padding: .85rem; }
.av-watch-thumb { flex: 0 0 44px; width: 44px; height: 60px; border-radius: var(--av-radius-lot); overflow: hidden; background: var(--av-surface-2); display: flex; align-items: center; justify-content: center; color: var(--av-muted); }
.av-watch-thumb img { width: 100%; height: 100%; object-fit: cover; }
.av-watch-body { flex: 1 1 auto; min-width: 0; }
.av-watch-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-watch-meta { font-size: .8rem; color: var(--av-muted); }
.av-watch-status { margin-top: .3rem; font-size: .82rem; }
.av-watch-live { color: var(--av-success); font-weight: 700; text-decoration: none; }
.av-watch-none { color: var(--av-muted); }
.av-watch-cap { display: flex; align-items: center; gap: .35rem; margin-top: .45rem; font-size: .78rem; color: var(--av-muted); flex-wrap: wrap; }
.av-watch-cap input { width: 6rem; }
.av-watch-remove { flex: 0 0 auto; margin: 0; }

/* Browse set-completion progress */
.av-setprog-summary { background: var(--av-amber-soft); color: var(--av-amber-ink); border-radius: var(--av-radius-input); padding: .6rem 1rem; font-size: .9rem; margin-bottom: 1.5rem; }
.av-setprog { margin-top: .45rem; }
.av-setprog-track { height: 5px; background: var(--av-surface-2); border-radius: var(--av-pill); overflow: hidden; }
.av-setprog-track span { display: block; height: 100%; background: var(--av-accent); border-radius: var(--av-pill); }
.av-setprog.is-complete .av-setprog-track span { background: var(--av-success); }
.av-setprog-label { display: block; margin-top: .2rem; font-size: .68rem; font-weight: 700; color: var(--av-muted); letter-spacing: .02em; }
.av-setprog.is-complete .av-setprog-label { color: var(--av-success); }

/* Ended-auction bid outcomes + resolved-offer status on My Activity */
.av-bid-badge.won { background: var(--av-success-soft); color: var(--av-success); }
.av-bid-badge.lost { background: var(--av-surface-2); color: var(--av-muted); }
.av-offer-status { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: .15rem .5rem; border-radius: var(--av-pill); background: var(--av-surface-2); color: var(--av-muted); }
.av-offer-status.accepted { background: var(--av-success-soft); color: var(--av-success); }

/* Icon feature cards */
.av-features2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.1rem; padding: 2.5rem 0; }
.av-feature2 { background: var(--av-surface); border: 1px solid var(--av-border); border-radius: var(--av-radius); box-shadow: var(--av-shadow); padding: 1.4rem; transition: transform .15s ease, box-shadow .15s ease; }
.av-feature2:hover { transform: translateY(-3px); box-shadow: var(--av-shadow-hover); }
.av-feature2-ico { width: 46px; height: 46px; border-radius: 12px; background: var(--av-accent-pale); color: var(--av-accent-dark); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: .8rem; }
.av-feature2 h3 { font-family: 'Archivo Black', sans-serif; font-weight: 500; font-size: 1.1rem; margin: 0 0 .3rem; color: var(--av-ink); }
.av-feature2 p { color: var(--av-muted); font-size: .92rem; margin: 0; }

/* Live marketplace activity */
.av-activity { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .7rem; margin-top: 1.4rem; }
.av-activity-row { display: flex; align-items: center; gap: .8rem; text-decoration: none; background: var(--av-surface); border: 1px solid var(--av-border); border-radius: var(--av-radius-sm); box-shadow: var(--av-shadow); padding: .6rem .8rem; transition: border-color .15s ease, transform .15s ease; }
.av-activity-row:hover { border-color: var(--av-accent); transform: translateY(-2px); }
.av-activity-img { flex: 0 0 auto; width: 38px; height: 53px; border-radius: 4px; overflow: hidden; background: var(--av-surface-2); }
.av-activity-img img { width: 100%; height: 100%; object-fit: cover; }
.av-activity-body { flex: 1 1 auto; min-width: 0; }
.av-activity-name { font-weight: 700; color: var(--av-ink); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.av-activity-meta { font-size: .78rem; color: var(--av-muted); }
.av-activity-kind { font-weight: 700; }
.av-activity-kind.sold { color: var(--av-success); }
.av-activity-kind.listed { color: var(--av-accent-dark); }
.av-activity-price { flex: 0 0 auto; font-family: 'Archivo Black', sans-serif; font-weight: 600; color: var(--av-amber-ink); font-variant-numeric: tabular-nums; }
.av-activity-price span { font-size: .7rem; color: var(--av-muted); }

/* Collector trust band */
.av-reviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.av-review2 { background: var(--av-surface); border: 1px solid var(--av-border); border-radius: var(--av-radius); box-shadow: var(--av-shadow); padding: 1.1rem 1.2rem; }
.av-review2-stars { color: var(--av-amber-ink); font-size: .9rem; letter-spacing: .1em; margin-bottom: .5rem; }
.av-review2-text { color: var(--av-ink); font-size: .95rem; line-height: 1.5; margin: 0 0 .7rem; }
.av-review2-who { font-size: .82rem; color: var(--av-muted); font-weight: 700; }
.av-review2-who .bi { font-size: .72rem; margin: 0 .1rem; }

/* Final CTA band */
.av-cta-band { text-align: center; }
.av-cta-band h2 { font-family: 'Archivo Black', sans-serif; font-weight: 600; font-size: 2rem; color: var(--av-ink); margin-bottom: 1.2rem; }
.av-cta-band .av-hero-cta { justify-content: center; }

@media (max-width: 860px) {
    .av-hero2-inner { grid-template-columns: 1fr; }
    .av-fan { min-height: 320px; margin-top: 1rem; transform: scale(.9); }
    .av-stats2 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
    .av-fan { display: none; }
    .av-stats2 { grid-template-columns: repeat(2, 1fr); }
    .av-collage { opacity: .12; }
}

/* ================= Analytics remodel ================= */
.av-an-toolbar { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.av-range { display: inline-flex; border: 1px solid var(--av-border); border-radius: var(--av-pill); overflow: hidden; background: var(--av-surface); }
.av-range-btn { border: none; background: none; padding: .4rem .9rem; font-weight: 700; font-size: .85rem; color: var(--av-muted); cursor: pointer; }
.av-range-btn.is-on { background: var(--av-accent-dark); color: #fff; }
.av-range-btn:not(.is-on):hover { background: var(--av-accent-pale); color: var(--av-accent-dark); }

.av-kpi-delta { font-size: .74rem; font-weight: 800; margin-left: .2rem; }
.av-kpi-delta.up { color: var(--av-success); }
.av-kpi-delta.down { color: var(--av-red); }   /* was #c0392b — old warm red, 3.06:1 on navy */

.av-tabs2 { display: flex; gap: .3rem; flex-wrap: wrap; border-bottom: 2px solid var(--av-border); margin: 1.6rem 0 1.2rem; }
.av-tab { border: none; background: none; padding: .6rem 1rem; font-family: 'Archivo Black', sans-serif; font-weight: 500; font-size: .98rem; color: var(--av-muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.av-tab.is-on { color: var(--av-accent-dark); border-bottom-color: var(--av-accent); }
.av-tab:not(.is-on):hover { color: var(--av-ink); }
.av-tab .bi { margin-right: .3rem; }

.av-tabpanel { display: none; }
.av-tabpanel.is-on { display: block; }

.av-chart-grid.three { grid-template-columns: repeat(3, 1fr); }
.av-chart-canvas-wrap.short { height: 180px; }

.av-stiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: .8rem; margin: .6rem 0; }
.av-stile { background: var(--av-surface-2); border-radius: var(--av-radius-sm); padding: .9rem; text-align: center; }
.av-stile-num { font-family: 'Archivo Black', sans-serif; font-weight: 600; font-size: 1.5rem; color: var(--av-accent-dark); font-variant-numeric: tabular-nums; line-height: 1; }
.av-stile-label { font-size: .78rem; color: var(--av-muted); margin-top: .3rem; }

.av-leaderboard { display: flex; flex-direction: column; }
.av-lb-title { font-weight: 700; font-size: .78rem; color: var(--av-muted); text-transform: uppercase; letter-spacing: .04em; margin: 1rem 0 .4rem; }
.av-lb-row { display: flex; align-items: center; gap: .6rem; padding: .45rem .2rem; border-bottom: 1px solid var(--av-border); font-size: .9rem; }
.av-lb-row:last-child { border-bottom: none; }
.av-lb-rank { flex: 0 0 auto; width: 20px; text-align: center; font-weight: 800; color: var(--av-muted); font-size: .8rem; }
.av-lb-img { flex: 0 0 auto; width: 26px; height: 36px; border-radius: 3px; overflow: hidden; background: var(--av-surface-2); }
.av-lb-img img { width: 100%; height: 100%; object-fit: cover; }
.av-lb-label { flex: 1 1 auto; min-width: 0; font-weight: 700; color: var(--av-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.av-lb-meta { flex: 0 0 auto; font-size: .78rem; color: var(--av-muted); }
.av-lb-val { flex: 0 0 auto; font-weight: 800; color: var(--av-accent-dark); font-variant-numeric: tabular-nums; }
.av-lb-empty { color: var(--av-muted); font-size: .88rem; padding: 1rem 0; }

.av-rep-head { display: flex; align-items: baseline; gap: .6rem; margin: .3rem 0 .8rem; }
.av-rep-big { font-family: 'Archivo Black', sans-serif; font-weight: 600; font-size: 2.4rem; color: var(--av-ink); line-height: 1; }
.av-rep-stars { color: var(--av-amber-ink); font-size: 1.1rem; letter-spacing: .05em; }
.av-rep-count { font-size: .82rem; color: var(--av-muted); }

@media (max-width: 800px) {
    .av-chart-grid.three { grid-template-columns: 1fr; }
    .av-an-toolbar { width: 100%; justify-content: space-between; }
}

/* === Wallet economy: buy credits, cash out, receipts (Component C) === */

/* Credit bundles as booster-pack pick cards */
.av-pack-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem;
    border: 0; padding: 0; margin: 0 0 1.25rem;
}
.av-pack {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .1rem;
    padding: 1.1rem .6rem .95rem; text-align: center; cursor: pointer;
    background: var(--av-surface); border: 2px solid var(--av-border); border-radius: var(--av-radius-sm);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.av-pack:hover { transform: translateY(-2px); box-shadow: var(--av-shadow); }
.av-pack input { position: absolute; opacity: 0; pointer-events: none; }
.av-pack .bi { font-size: 1.45rem; color: var(--av-amber-ink); }
.av-pack-name { font-weight: 800; font-size: .82rem; margin-top: .3rem; }
.av-pack-amount {
    font-family: 'Archivo Black', sans-serif; font-weight: 700; font-size: 1.8rem; line-height: 1.15;
    color: var(--av-accent-dark); font-variant-numeric: tabular-nums;
}
.av-pack-unit { font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--av-muted); }
.av-pack:has(input:checked) { border-color: var(--av-accent); background: var(--av-accent-pale); }
.av-pack:has(input:focus-visible) { outline: 3px solid var(--av-foil-1); outline-offset: 2px; }
@media (max-width: 575px) { .av-pack-grid { grid-template-columns: 1fr; } }

/* Mock payment / payout blocks — clearly pretend */
.av-mock-pay {
    background: var(--av-surface-2); border: 1px dashed var(--av-border);
    border-radius: var(--av-radius-sm); padding: 1rem 1rem .25rem; margin-bottom: 1.25rem;
}
.av-mock-pay-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .9rem; }
.av-mock-tag {
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--av-amber-soft); color: var(--av-amber-ink);
    font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    padding: .28rem .65rem; border-radius: var(--av-pill);
}

/* Withdraw: available balance banner */
.av-withdraw-avail {
    display: flex; flex-direction: column; gap: .15rem; align-items: center; text-align: center;
    background: var(--av-surface-2); border: 1px solid var(--av-border);
    border-radius: var(--av-radius-sm); padding: .9rem 1rem; margin-bottom: 1.25rem;
}
.av-withdraw-num {
    font-family: 'Archivo Black', sans-serif; font-weight: 700; font-size: 1.9rem; line-height: 1.1;
    color: var(--av-amber-ink); font-variant-numeric: tabular-nums;
}

/* Receipt: a hobby-shop till slip rendered from the ledger entry */
.av-receipt {
    max-width: 430px; margin: 2.5rem auto; padding: 1.75rem 1.5rem;
    background: var(--av-surface); border: 1px solid var(--av-border);
    border-radius: var(--av-radius); box-shadow: var(--av-shadow);
}
.av-receipt-head { text-align: center; padding-bottom: 1rem; border-bottom: 2px dashed var(--av-border); }
.av-receipt-head .bi { font-size: 1.9rem; color: var(--av-amber-ink); }
.av-receipt-title { font-family: 'Archivo Black', sans-serif; font-weight: 700; font-size: 1.35rem; }
.av-receipt-rows {
    display: flex; flex-direction: column; gap: .55rem;
    padding: 1rem 0; margin: 0; border-bottom: 2px dashed var(--av-border);
}
.av-receipt-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .92rem; }
.av-receipt-row dt { color: var(--av-muted); font-weight: 700; }
.av-receipt-row dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.av-receipt-amount { font-family: 'Archivo Black', sans-serif; font-size: 1.5rem; }
.av-receipt-amount.pos { color: var(--av-success); }
.av-receipt-amount.neg { color: var(--av-accent-dark); }
.av-receipt-foot { padding-top: 1rem; text-align: center; font-size: .82rem; color: var(--av-muted); }
.av-receipt-foot p { margin: .55rem 0 .9rem; }
.av-receipt-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

/* Seller-side fee disclosure on the sell form */
.av-fee-note {
    display: flex; align-items: center; gap: .45rem;
    font-size: .82rem; color: var(--av-muted); margin-bottom: 1rem;
}
.av-fee-note .bi { color: var(--av-amber-ink); }

/* AI price suggestion (Sell flow) */
.av-suggest-btn { width: auto; font-size: .85rem; }
.av-price-suggestion {
    margin-top: .6rem; padding: .7rem .85rem;
    background: var(--av-surface-2); border: 1px solid var(--av-border);
    border-radius: var(--av-radius-input); font-size: .88rem; color: var(--av-ink);
}
.av-price-suggestion.is-muted, .av-price-suggestion.is-loading { color: var(--av-muted); }
.av-suggest-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .4rem; }
.av-suggest-price { font-family: 'Archivo Black', sans-serif; font-size: 1.15rem; color: var(--av-cyan); }
.av-suggest-use { width: auto; padding: .3rem .8rem; font-size: .8rem; }
.av-suggest-why { margin: 0; color: var(--av-muted); line-height: 1.4; }
.av-suggest-ai {
    display: inline-block; font-family: 'Archivo Black', sans-serif; font-size: .6rem;
    letter-spacing: .06em; background: var(--av-pink); color: #fff;
    border-radius: 5px; padding: 1px 5px; margin-right: .35rem; vertical-align: middle;
}

/* ---- Staff dashboard ---- */
.av-dash-section-label {
    font-family: 'Archivo Black', sans-serif; font-size: .7rem; letter-spacing: .08em;
    text-transform: uppercase; color: var(--av-muted); margin: 1.4rem 0 .6rem;
}
.av-dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .9rem; }
.av-dash-tile {
    display: flex; flex-direction: column; gap: .35rem; text-decoration: none;
    background: var(--av-surface); border: 1px solid var(--av-border);
    border-radius: var(--av-radius); box-shadow: var(--av-shadow); padding: 1.1rem 1.2rem;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
a.av-dash-tile:hover { transform: translateY(-3px); box-shadow: var(--av-shadow-hover); border-color: var(--av-cyan); }
.av-dash-tile.attention { border-color: var(--av-pink); background: rgba(255, 90, 200, .06); }
.av-dash-tile.warnish { border-color: rgba(255, 138, 138, .5); }
.av-dash-num { font-family: 'Archivo Black', sans-serif; font-size: 1.8rem; color: var(--av-cyan); line-height: 1; }
.av-dash-tile.attention .av-dash-num { color: var(--av-pink); }
.av-dash-unit { font-size: .8rem; color: var(--av-muted); }
.av-dash-label { font-size: .82rem; color: var(--av-muted); }
.av-dash-label .bi { margin-right: .25rem; }

.av-dash-cols { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 1.4rem; margin-top: .6rem; }
@media (max-width: 800px) { .av-dash-cols { grid-template-columns: 1fr; } }
.av-dash-links { display: flex; flex-direction: column; gap: .5rem; }
.av-dash-link {
    display: flex; align-items: center; gap: .5rem; text-decoration: none;
    background: var(--av-surface); border: 1px solid var(--av-border); border-radius: var(--av-radius-input);
    padding: .7rem .9rem; color: var(--av-ink); font-weight: 600;
}
.av-dash-link:hover { border-color: var(--av-cyan); color: var(--av-cyan); }
.av-dash-activity { background: var(--av-surface); border: 1px solid var(--av-border); border-radius: var(--av-radius); padding: .4rem 1rem 1rem; }
.av-dash-empty { color: var(--av-muted); font-size: .88rem; padding: .8rem 0; }
.av-activity-list { list-style: none; margin: 0; padding: 0; }
.av-activity-row { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid var(--av-border); }
.av-activity-row:last-child { border-bottom: none; }
.av-activity-body { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex: 1 1 auto; min-width: 0; }
.av-activity-msg { font-size: .86rem; color: var(--av-ink); }
.av-activity-target { color: var(--av-muted); }
.av-activity-time { font-size: .72rem; color: var(--av-muted); white-space: nowrap; }

/* ============================================================
   Verified Dealer, storefront, reports (role-loops A + B)
   ============================================================ */

/* Verified Dealer badge — teal-ish trust chip, reuses the token palette. */
.av-badge-verified {
    display: inline-flex; align-items: center; gap: .25rem;
    background: var(--av-success-soft); color: var(--av-success);
    border: 1px solid var(--av-success);
    font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: .72rem;
    padding: .1rem .5rem; border-radius: var(--av-pill); text-decoration: none;
    letter-spacing: .02em; white-space: nowrap;
}
a.av-badge-verified:hover { background: var(--av-success); color: #fff; }

/* Moderation queue counts that need attention glow coral. */
.av-stat-attention { border-color: var(--av-accent); background: var(--av-accent-pale); }
.av-stat-attention .av-stat-num { color: var(--av-accent-dark); }

/* Report flag button (on listing cards + review rows). */
.av-report-flag {
    background: transparent; border: 0; color: var(--av-muted); cursor: pointer;
    padding: .15rem .35rem; border-radius: var(--av-radius-sm); font-size: .85rem; line-height: 1;
}
.av-report-flag:hover { color: var(--av-accent-dark); background: var(--av-accent-pale); }
.av-listing-card > .av-report-flag { position: absolute; top: .4rem; right: .4rem; z-index: 2; }
.av-listing-card { position: relative; }
.av-review-report { margin-left: auto; }
.av-review-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* Report modal. */
.av-report-title { font-size: 1.2rem; margin: 0 0 .3rem; }
.av-report-target { color: var(--av-muted); font-size: .9rem; margin-bottom: 1rem; }

/* Dealer apply page. */
.av-dealer-state { text-align: center; padding: 1rem .5rem; }
.av-dealer-state > .bi { font-size: 2.4rem; color: var(--av-accent); display: block; margin-bottom: .5rem; }
.av-dealer-state h2 { font-size: 1.3rem; margin: 0 0 .5rem; }
.av-dealer-verified > .bi { color: var(--av-success); }
.av-dealer-pending > .bi { color: var(--av-amber-ink); }
.av-dealer-perks { list-style: none; padding: 0; margin: 1rem auto; max-width: 26rem; text-align: left; display: flex; flex-direction: column; gap: .5rem; }
.av-dealer-perks li { display: flex; align-items: center; gap: .5rem; }
.av-dealer-perks .bi { color: var(--av-accent); }

/* Storefront. */
.av-store-head { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; }
.av-store-badge {
    flex: 0 0 auto; width: 56px; height: 56px; border-radius: var(--av-radius);
    background: var(--av-success-soft); color: var(--av-success);
    display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
}
.av-store-id h1 { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0; font-size: 1.6rem; }
.av-store-meta { color: var(--av-muted); font-size: .9rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .2rem; }
.av-store-meta a { color: var(--av-accent-dark); text-decoration: none; }
.av-store-stars { color: var(--av-amber-ink); font-weight: 700; }

/* Bulk-list tool on the collection page. */
.av-bulk-check { position: absolute; top: .5rem; left: .5rem; z-index: 2; margin: 0; }
.av-bulk-check input { width: 1.2rem; height: 1.2rem; cursor: pointer; }
.av-bulk-off .av-bulk-check { display: none; }
.av-bulk-off .av-bulk-bar { display: none; }
.av-bulk-on .av-item { position: relative; }
.av-bulk-bar {
    display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap;
    background: var(--av-surface); border: 1px solid var(--av-accent);
    border-radius: var(--av-radius); padding: .9rem 1.1rem; margin-bottom: 1rem;
}
.av-bulk-bar label { display: flex; flex-direction: column; font-size: .78rem; color: var(--av-muted); gap: .2rem; }
.av-bulk-bar input, .av-bulk-bar select { width: 8rem; }
.av-bulk-count { align-self: center; font-size: .9rem; }
.av-item { position: relative; }

/* ============================================================================
   HOLO RUSH — override layer
   Sits at the end of the cascade so it wins over the legacy component rules.
   The token remap above already recoloured every surface; this layer applies
   the sticker shadows, 2px borders, display fonts and bright-fill treatments.
   ============================================================================ */

@keyframes holo-slide { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes live-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* --- Base type --- */
body { font-family: 'Space Grotesk', system-ui, sans-serif; }
h1, h2, h3, h4 { font-family: 'Archivo Black', system-ui, sans-serif; font-weight: 400; letter-spacing: -0.01em; }
a { color: var(--av-cyan); }
a:hover { color: #fff; }
:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--av-foil-1) !important; }
.av-price-unit, .av-credit-unit, .av-vault-unit, .av-wallet-num, .av-kpi-num,
.av-stat-num, .av-stat2-num, .av-stile-num, .av-listing-price, .av-countdown,
.av-ledger, .av-receipt-amount, .av-withdraw-num { font-variant-numeric: tabular-nums; }

/* Animated holographic foil text (brand VAULT, hero, status codes) */
.av-holo-text {
    background: var(--av-holo);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    animation: holo-slide 6s linear infinite;
}

/* --- Navbar & brand --- */
.av-navbar { background: var(--av-navy); border-bottom: 2px solid var(--av-border); }
.av-brand, .av-brand-arcane { font-family: 'Archivo Black', sans-serif; font-size: 22px; color: #fff; letter-spacing: .01em; }
.av-brand-vault {
    background: var(--av-holo); background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: holo-slide 6s linear infinite;
}
.av-navbar .nav-link {
    font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 13px;
    letter-spacing: .02em; text-transform: uppercase; color: var(--av-muted);
    border-radius: 8px; transition: color .12s, background .12s;
}
.av-navbar .nav-link:hover { color: #fff; background: transparent; }
.av-navbar .nav-link.active {
    color: var(--av-navy); background: var(--av-cyan);
    box-shadow: 3px 3px 0 var(--av-pink);
}

/* --- Buttons --- */
.av-btn-primary, .btn-primary {
    background: var(--av-cyan); color: var(--av-navy);
    border: 2px solid var(--av-cyan); border-radius: var(--av-radius-sm);
    font-family: 'Space Grotesk', sans-serif; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, .3); transition: transform .12s, box-shadow .12s, background .12s;
}
.av-btn-primary:hover, .btn-primary:hover {
    background: #fff; color: var(--av-navy); border-color: #fff;
    transform: translate(-2px, -2px); box-shadow: 5px 5px 0 rgba(0, 0, 0, .3);
}
.av-btn-ghost, .btn-secondary, .btn-outline-secondary {
    background: transparent; color: var(--av-cyan);
    border: 2px solid var(--av-cyan); border-radius: var(--av-radius-sm);
    font-family: 'Space Grotesk', sans-serif; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
}
.av-btn-ghost:hover, .btn-secondary:hover, .btn-outline-secondary:hover {
    background: rgba(125, 249, 255, .12); color: #fff; border-color: var(--av-cyan);
}
/* Hot CTA modifier (Sell a card / Bid): pink fill, hard cyan shadow */
.av-cta-hot, .av-hero-cta .av-btn-primary {
    background: var(--av-pink); color: #fff; border: 2px solid var(--av-navy);
    box-shadow: 4px 4px 0 var(--av-cyan);
}
.av-cta-hot:hover, .av-hero-cta .av-btn-primary:hover {
    background: var(--av-pink); color: #fff; border-color: var(--av-navy);
    transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--av-cyan);
}
.btn-outline-danger, .av-watch-remove, .av-clear-btn {
    color: var(--av-red); border: 2px solid rgba(255, 138, 138, .5); background: transparent;
}
.btn-outline-danger:hover { background: rgba(255, 138, 138, .12); color: var(--av-red); border-color: var(--av-red); }

/* --- Cards & panels: surface, 2px border, radius 20, hard shadow --- */
.av-card, .av-item, .av-feature, .av-feature2, .av-chart-card, .av-collector-card,
.av-set-card, .av-watch-card, .av-offer-card, .av-preview-card, .av-vault-panel,
.av-mock-pay, .av-dealer-state, .av-receipt, .av-trade-row, .av-cardtile,
.av-notif-panel, .av-cardmodal, .av-store-head, .av-setdetail-head, .av-profile-head,
.av-review, .av-review2, .av-activity-row {
    background: var(--av-surface); border: 2px solid var(--av-border);
    border-radius: var(--av-radius); box-shadow: var(--av-shadow);
}

/* Product-grid tiles get the alternating tilt + un-tilt/lift on hover */
.av-listing-card, .av-cardtile, .av-item, .av-set-card, .av-watch-card,
.av-collector-card, .av-grail, .av-offer-card {
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.av-listing-grid > *:nth-child(odd), .av-cardtile-grid > .av-cardtile:nth-child(odd),
.av-grid > .av-item:nth-child(odd), .av-set-grid > *:nth-child(odd),
.av-watch-grid > *:nth-child(odd), .av-collector-grid > *:nth-child(odd) { transform: rotate(-.6deg); }
.av-listing-grid > *:nth-child(even), .av-cardtile-grid > .av-cardtile:nth-child(even),
.av-grid > .av-item:nth-child(even), .av-set-grid > *:nth-child(even),
.av-watch-grid > *:nth-child(even), .av-collector-grid > *:nth-child(even) { transform: rotate(.6deg); }
.av-listing-card:hover, .av-cardtile:hover, .av-item:hover, .av-set-card:hover,
.av-watch-card:hover, .av-collector-card:hover, .av-grail:hover {
    transform: rotate(0deg) translateY(-4px); border-color: var(--av-cyan);
}

/* Photo wells */
.av-listing-photo, .av-item-thumb, .av-cardtile-img, .av-watch-thumb, .av-offer-thumb,
.av-vault-thumb, .av-set-logo, .av-item-photo, .av-grail-img, .av-collector-avatar,
.av-preview-frame, .av-trade-cardface { background: var(--av-surface-2); }

/* --- Inputs --- */
.form-control, .form-select, .av-select, .av-search input, .av-set-search input,
.av-market-search input, .av-wallet-search input, .av-cardpick-search input,
.av-itempicker-search input, .av-catalogue-input, .av-user-search input, textarea,
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search] {
    background: var(--av-surface); border: 2px solid var(--av-border);
    border-radius: var(--av-radius-input); color: #fff;
}
.form-control::placeholder, input::placeholder { color: var(--av-muted); }
.form-control:focus, .form-select:focus, .av-select:focus, textarea:focus, input:focus {
    border-color: var(--av-cyan); box-shadow: 0 0 0 3px var(--av-foil-1); outline: none;
}
/* inputs sitting inside dark cards go a shade darker */
.av-card .form-control, .av-item .form-control, .av-bid-form input, .av-auth-card .form-control {
    background: var(--av-navy);
}

/* --- Sticker chips / segmented / filter buttons / tabs --- */
.av-chip, .av-seg button, .av-range-btn, .av-tab, .av-chip-cat, .av-filter-bar .av-chip,
.av-market-toolbar .av-seg button, .av-an-toolbar button, .nav-tabs .nav-link {
    background: var(--av-surface); border: 2px solid var(--av-border);
    border-radius: var(--av-radius-input); color: var(--av-muted);
    font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 12.5px;
    letter-spacing: .06em; text-transform: uppercase; transition: color .12s, border-color .12s, background .12s;
}
.av-chip:hover, .av-seg button:hover, .av-range-btn:hover, .av-tab:hover,
.av-chip-cat:hover, .nav-tabs .nav-link:hover { color: #fff; border-color: var(--av-cyan); background: var(--av-surface); }
.av-chip.is-on, .av-chip.active, .av-seg button.is-active, .av-seg button.active,
.av-range-btn.is-on, .av-tab.is-on, .av-tab.active, .av-chip-cat.is-on,
.nav-tabs .nav-link.active {
    background: #fff; color: var(--av-navy); border: 2px solid var(--av-navy);
    box-shadow: 3px 3px 0 var(--av-pink);
}

/* --- Tables & ledger --- */
.table, .av-ledger, .av-mod-table {
    background: var(--av-surface); border: 2px solid var(--av-border);
    border-radius: 12px; overflow: hidden; color: #fff;
}
.av-ledger thead th, .av-mod-table thead th, .table thead th {
    background: var(--av-surface-2); text-transform: uppercase; font-size: 11px;
    letter-spacing: .05em; color: var(--av-muted); border-color: var(--av-border);
}
.av-ledger td, .av-ledger th, .av-mod-table td, .table td, .table th { border-color: var(--av-border); }
.av-ledger tbody tr:hover, .av-mod-table tbody tr:hover, .table tbody tr:hover { background: rgba(125, 249, 255, .05); }
.av-ledger .pos, .pos { color: var(--av-mint); }
.av-ledger .neg, .neg { color: var(--av-red); }

/* --- KPI / stat / wallet tiles --- */
.av-kpi, .av-stat-tile, .av-wallet-tile, .av-stile, .av-stat2, .av-vault-panel,
.av-vault-hero, .av-vault-kpis > * {
    background: var(--av-surface); border: 2px solid var(--av-border);
    border-radius: 16px; box-shadow: var(--av-shadow);
}
.av-kpi-num, .av-stat-num, .av-stat2-num, .av-stile-num, .av-wallet-tile-num, .av-vault-hold-val {
    font-family: 'Archivo Black', sans-serif; color: #fff;
}
.av-kpi-label, .av-stat-label, .av-stat2-label, .av-stile-label, .av-wallet-tile-label {
    text-transform: uppercase; letter-spacing: .05em; font-size: 11px; color: var(--av-muted);
}
/* hero tiles: holo top strip */
.av-vault-hero, .av-wallet-balance {
    position: relative; overflow: hidden;
}
.av-vault-hero::before, .av-wallet-balance::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: var(--av-holo); background-size: 200% 100%; animation: holo-slide 6s linear infinite;
}

/* --- Badges & signals: sticker recipe --- */
.av-badge-staff, .av-badge-business, .av-badge-individual, .av-badge-verified,
.av-price-signal, .av-price-deal, .av-price-fair, .av-price-high, .av-auction-tag,
.av-listed-badge, .av-code, .av-qty-chip, .av-store-badge, .av-owned-badge,
.av-offer-badge, .av-bid-badge, .av-mock-tag, .av-provider-badge, .av-mod-removed-tag {
    font-family: 'Archivo Black', sans-serif; font-size: 10px; letter-spacing: .08em;
    text-transform: uppercase; border: 2px solid var(--av-navy); border-radius: 6px; padding: 4px 8px;
}
.av-badge-staff { background: var(--av-pink); color: #fff; }
.av-badge-business { background: var(--av-yellow); color: var(--av-navy); }
.av-badge-individual { background: transparent; color: var(--av-muted); border-color: var(--av-border); }
.av-badge-verified { background: var(--av-holo); background-size: 200% 100%; color: var(--av-navy); animation: holo-slide 6s linear infinite; }
.av-price-deal, .av-listed-badge, .av-owned-badge, .av-store-badge { background: var(--av-mint); color: var(--av-navy); }
.av-price-fair { background: var(--av-border); color: #fff; }
.av-price-high { background: rgba(255, 138, 138, .15); color: var(--av-red); border-color: rgba(255, 138, 138, .5); }
.av-auction-tag { background: var(--av-pink); color: #fff; }
.av-code { background: var(--av-surface-2); color: var(--av-yellow-pale); font-family: 'Space Grotesk', monospace; border-color: var(--av-border); }
.av-qty-chip { background: var(--av-surface-2); color: var(--av-mint); border-color: var(--av-border); }

/* --- Wallet chip / bell / user chip --- */
.av-credit-chip {
    background: var(--av-yellow); color: var(--av-navy); border: 2px solid var(--av-navy);
    border-radius: 10px; box-shadow: 3px 3px 0 rgba(125, 249, 255, .55); font-weight: 700;
}
.av-bell, .av-theme-toggle {
    width: 40px; height: 40px; border: 2px solid var(--av-border); border-radius: 10px;
    background: var(--av-surface); color: #fff;
}
.av-bell:hover, .av-theme-toggle:hover { border-color: var(--av-cyan); color: var(--av-cyan); background: var(--av-surface); }
.av-bell-badge, .av-notif-dot { background: var(--av-pink); color: #fff; }
.av-notif-panel { background: var(--av-surface); border: 2px solid var(--av-border); box-shadow: var(--av-shadow); }
.av-notif-row.unread { background: rgba(125, 249, 255, .06); }
.av-user-chip {
    border: 2px solid var(--av-border); border-radius: 10px; background: var(--av-surface); color: #fff;
}
.av-user-chip:hover { border-color: var(--av-cyan); }
.av-profile-avatar, .av-collector-avatar {
    background: linear-gradient(135deg, var(--av-pink-soft), var(--av-cyan));
    color: var(--av-navy); font-family: 'Archivo Black', sans-serif; border: 2px solid var(--av-border);
}

/* --- Toasts / flashes --- */
.av-toast, .av-flash, .alert {
    background: #fff; color: var(--av-navy); border: 2px solid var(--av-navy);
    border-radius: 12px; box-shadow: 4px 4px 0 rgba(0, 0, 0, .4); font-weight: 700;
}
.av-toast.ok, .alert-success { background: var(--av-mint); color: var(--av-navy); }
.av-toast.err, .alert-danger { background: var(--av-red); color: var(--av-navy); }
.alert-warning { background: var(--av-yellow); color: var(--av-navy); }

/* --- Auth card: holo top strip --- */
.av-auth-card {
    background: var(--av-surface); border: 2px solid var(--av-border);
    border-radius: var(--av-radius); box-shadow: var(--av-shadow);
    position: relative; overflow: hidden;
}
.av-auth-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: var(--av-holo); background-size: 200% 100%; animation: holo-slide 6s linear infinite;
}
.av-auth-head h1, .av-auth-head { font-family: 'Archivo Black', sans-serif; text-transform: uppercase; }
/* account-type sticker radios */
.av-party-opt { border: 2px solid var(--av-border); border-radius: 10px; background: var(--av-surface); }
.av-party-opt:has(input:checked) { border-color: var(--av-cyan); box-shadow: 0 0 0 3px var(--av-foil-1); }
.av-provider-badge { background: #fff; color: var(--av-navy); }

/* --- Empty states --- */
.av-empty, .av-chart-empty, .av-notif-empty, .av-watch-none, .av-rep-none,
.av-itempicker-empty, .av-lb-empty, .av-collector-unrated {
    border: 2px dashed var(--av-border); border-radius: 16px; color: var(--av-muted); background: transparent;
}

/* --- Progress / quantity bars: mint fill on navy track --- */
.av-bar, .av-qty .av-bar, .av-vault-bar-track, .av-setprog-track {
    background: var(--av-surface-2); border-radius: 999px; overflow: hidden;
}
.av-bar > span, .av-vault-bar-fill, .av-setprog-track > span { background: var(--av-mint); }

/* --- Progress bars in analytics tab, hero rules, section headers --- */
.av-hero-rule, .av-profile-section::after { background: var(--av-holo); }
.av-section-title, .av-profile-section, .av-era-name, .av-vault-panel-title,
.av-page-head h1, .av-hero-title {
    font-family: 'Archivo Black', sans-serif; text-transform: uppercase; letter-spacing: .01em;
}

/* --- Footer --- */
.av-footer { background: var(--av-navy); border-top: 2px solid var(--av-border); }
.av-footer-brand { font-family: 'Archivo Black', sans-serif; }
.av-footer-brand .av-brand-vault, .av-footer-brand span:last-child { color: var(--av-cyan); }
.av-footer-muted { color: var(--av-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }

/* --- Modals --- */
.modal-content, .av-cardmodal {
    background: var(--av-surface); border: 2px solid var(--av-border);
    border-radius: var(--av-radius); box-shadow: var(--av-shadow); color: #fff;
}

/* --- Reduced motion: freeze the foil + blink, drop tilt transitions --- */
@media (prefers-reduced-motion: reduce) {
    .av-holo-text, .av-brand-vault, .av-badge-verified,
    .av-vault-hero::before, .av-wallet-balance::before, .av-auth-card::before { animation: none !important; }
    .av-listing-card, .av-cardtile, .av-item, .av-set-card, .av-watch-card,
    .av-collector-card, .av-grail { transition: none !important; transform: none !important; }
}

/* ===== Marketplace listing card (Holo Rush anatomy) ===== */
/* Rendered by cardHtml() in Marketplace/Index.cshtml. */
.av-mk-card {
    position: relative; background: var(--av-surface); border: 2px solid var(--av-border);
    border-radius: 20px; box-shadow: 6px 6px 0 rgba(0, 0, 0, .35);
    display: flex; flex-direction: column; overflow: visible;
    transition: transform .15s ease, border-color .15s ease;
}
.av-listing-grid > .av-mk-card:nth-child(odd) { transform: rotate(-.7deg); }
.av-listing-grid > .av-mk-card:nth-child(even) { transform: rotate(.7deg); }
.av-mk-card:hover { transform: rotate(0deg) translateY(-4px); border-color: var(--av-cyan); }
.av-mk-photo-wrap { position: relative; }
.av-mk-photo { aspect-ratio: 5 / 7; background: var(--av-surface-2); border-radius: 18px 18px 0 0; overflow: hidden; }
.av-mk-photo img { width: 100%; height: 100%; object-fit: cover; }
.av-mk-sticker {
    position: absolute; top: 12px; left: 12px; z-index: 2; font-family: 'Archivo Black', sans-serif;
    font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--av-navy);
    background: var(--av-holo); background-size: 200% 100%; animation: holo-slide 6s linear infinite;
    padding: 5px 10px; border-radius: 6px; border: 2px solid var(--av-navy); pointer-events: none;
}
.av-mk-sticker.vintage { background: var(--av-border); color: #fff; animation: none; }
.av-mk-sticker.graded { background: var(--av-yellow-pale); color: var(--av-navy); animation: none; }
.av-mk-sticker.deal { background: var(--av-mint); color: var(--av-navy); animation: none; }
.av-mk-sticker.yours { background: var(--av-mint); color: var(--av-navy); animation: none; }
.av-mk-burst {
    position: absolute; bottom: -14px; right: 12px; z-index: 2; transform: rotate(-3deg);
    font-family: 'Archivo Black', sans-serif; font-size: 18px; color: var(--av-navy);
    background: var(--av-yellow); border: 2px solid var(--av-navy); border-radius: 10px;
    padding: 6px 14px; box-shadow: 3px 3px 0 rgba(0, 0, 0, .4);
    font-variant-numeric: tabular-nums; pointer-events: none;
}
.av-mk-body { padding: 20px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.av-mk-title { font-weight: 700; font-size: 17px; line-height: 1.15; color: #fff; }
.av-mk-meta { font-size: 12.5px; font-weight: 600; color: var(--av-muted); }
.av-mk-meta .under { color: var(--av-mint); }
.av-mk-meta .over { color: var(--av-red); }
.av-mk-meta .top { color: var(--av-pink-soft); }
.av-mk-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-top: auto; padding-top: 10px; border-top: 2px solid var(--av-border);
}
.av-mk-seller { font-size: 12px; font-weight: 700; color: var(--av-muted); }
.av-mk-seller .star { color: var(--av-yellow); }
.av-mk-acts { display: flex; gap: 6px; }
.av-mk-btn {
    font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 11.5px;
    letter-spacing: .06em; text-transform: uppercase; padding: 7px 14px;
    border-radius: 8px; cursor: pointer; border: 2px solid var(--av-cyan);
}
.av-mk-btn.buy { background: var(--av-cyan); color: var(--av-navy); }
.av-mk-btn.buy:hover { background: #fff; border-color: #fff; }
.av-mk-btn.offer { background: transparent; color: var(--av-cyan); }
.av-mk-btn.offer:hover { background: rgba(125, 249, 255, .12); }
.av-mk-btn.cancel { color: var(--av-red); border-color: rgba(255, 138, 138, .5); background: transparent; }
.av-mk-offers { font-size: 12px; font-weight: 700; color: var(--av-mint); background: rgba(138, 255, 177, .12); border: 2px solid rgba(138, 255, 177, .4); border-radius: 8px; padding: 5px 10px; }

/* Holo-tagged card: 3px animated foil shell */
.av-mk-card.holo {
    border: none; padding: 3px; background: var(--av-holo); background-size: 300% 300%;
    animation: holo-slide 6s linear infinite;
}
.av-mk-card.holo > .av-mk-inner { background: var(--av-surface); border-radius: 17px; overflow: hidden; display: flex; flex-direction: column; height: 100%; }

/* Auction card */
.av-mk-card.auction { border: 2px solid var(--av-pink); box-shadow: 6px 6px 0 rgba(255, 90, 200, .35); }
.av-mk-card.ending { border-color: var(--av-yellow-pale); box-shadow: 6px 6px 0 rgba(255, 226, 122, .3); }
.av-mk-card.yours { border: 2px dashed var(--av-muted); }
.av-mk-live {
    position: absolute; top: -14px; left: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 6px;
    font-family: 'Archivo Black', sans-serif; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: #fff; background: var(--av-pink); border: 2px solid var(--av-navy); border-radius: 8px; padding: 5px 12px;
}
.av-mk-card.ending .av-mk-live { background: var(--av-yellow-pale); color: var(--av-navy); }
.av-mk-live .dot { width: 8px; height: 8px; border-radius: 999px; background: #fff; animation: live-blink 1.2s ease-in-out infinite; }
.av-mk-bidbar {
    position: absolute; bottom: 12px; left: 12px; right: 12px; display: flex; align-items: center;
    justify-content: space-between; background: rgba(14, 15, 46, .9); border: 2px solid var(--av-border);
    padding: 8px 12px; border-radius: 12px; pointer-events: none;
}
.av-mk-bidbar .cur { font-family: 'Archivo Black', sans-serif; font-size: 17px; color: #fff; font-variant-numeric: tabular-nums; }
.av-mk-bidbar .time { font-size: 12px; font-weight: 700; color: var(--av-yellow-pale); font-variant-numeric: tabular-nums; }
.av-mk-card.ending .av-mk-bidbar .time { color: var(--av-red); }
.av-mk-bidform { display: flex; gap: 8px; align-items: center; margin-top: auto; padding-top: 10px; border-top: 2px solid var(--av-border); }
.av-mk-bidform input { flex: 1 1 auto; min-width: 0; padding: 9px 12px; border: 2px solid var(--av-border); border-radius: 8px; background: var(--av-navy); color: #fff; font-weight: 700; font-family: 'Space Grotesk', sans-serif; }
.av-mk-bidform button { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 9px 18px; background: var(--av-pink); color: #fff; border: 2px solid var(--av-navy); border-radius: 8px; box-shadow: 3px 3px 0 var(--av-cyan); cursor: pointer; }
.av-mk-bidform button:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--av-cyan); }

/* ===== Home hero (Holo Rush) ===== */
.av-hero, .av-hero2 { background: linear-gradient(180deg, #12143a, #0e0f2e); border-bottom: 2px solid var(--av-border); }
.av-hero-title, .av-hero2-text h1 { font-family: 'Archivo Black', sans-serif; font-size: clamp(48px, 8vw, 84px); line-height: .92; color: #fff; }
.av-live-stats { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--av-mint); }
.av-live-stats .dot { width: 9px; height: 9px; border-radius: 999px; background: var(--av-mint); animation: live-blink 1.6s ease-in-out infinite; }

/* hero headline word renders in animated foil */
.av-hero-title em { font-style: normal; }

/* ===== Holo Rush marketplace card — supporting bits ===== */
.av-mk-cats { display: flex; flex-wrap: wrap; gap: 5px; }
.av-mk-photo-empty { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 2.2rem; color: var(--av-border); }
i.av-mk-photo-empty { display: flex; }
a.av-mk-seller { text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
a.av-mk-seller:hover { color: var(--av-cyan); }
.av-mk-seller .star { color: var(--av-yellow); font-weight: 700; }
.av-mk-burst .av-credit-unit, .av-mk-bidbar .cur .av-credit-unit { font-size: .62em; }
/* Report flag sits over the photo — give it a legible navy pill. */
.av-mk-photo-wrap > .av-report-flag {
    position: absolute; top: 10px; right: 10px; z-index: 3;
    background: rgba(14, 15, 46, .72); color: #fff; border: 2px solid var(--av-border);
    width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; padding: 0;
}
.av-mk-photo-wrap > .av-report-flag:hover { background: var(--av-pink); border-color: var(--av-navy); color: #fff; }

/* ===== Holo Rush — post-ship fixes ===== */

/* --- Bootstrap dark bridge ---
   BS 5.3 derives .form-text / .text-muted / .text-body-secondary from
   --bs-secondary-color, which defaults to near-black at 75% alpha. On the navy
   surface that lands at ~1.08:1 — invisible. Point Bootstrap's core vars at the
   Holo palette so anything not explicitly skinned stays legible. */
:root {
    --bs-body-color: #fff;
    --bs-body-color-rgb: 255, 255, 255;
    --bs-body-bg: #0e0f2e;
    --bs-body-bg-rgb: 14, 15, 46;
    --bs-emphasis-color: #fff;
    --bs-secondary-color: rgba(255, 255, 255, .75);
    --bs-border-color: #262a63;
}
/* Helper text under inputs carries real instructions (2FA setup, etc.) — white. */
.form-text { color: var(--av-ink); }
.text-muted, .text-body-secondary { color: var(--av-muted) !important; }

/* --- Navbar fit + breathing room ---
   The redesign's uppercase + .08em nav links and Archivo Black chip badges
   inflated the bar past its 1140px container: content ran 1307px, the groups
   met at the same x with 0px gaps, and the whole PAGE scrolled sideways
   (docScrollWidth 1539 @1280). Fixed by trimming the type we inflated
   (letter-spacing + padding at source), compacting the chip badges, and letting
   the bar use the full width — then spending the reclaimed space on real gaps.
   lg+ only; the collapsed hamburger menu is unaffected. */
@media (min-width: 992px) {
    /* The bar is full-bleed already; only its inner .container pinned it to
       1140. Let it breathe to the viewport so 8 links + 5 controls fit. */
    .av-navbar > .container { max-width: none; padding-left: 1.5rem; padding-right: 1.5rem; }
    .av-navbar .navbar-nav.align-items-lg-center { gap: .4rem; }
    .av-navbar .navbar-nav.me-auto { gap: .1rem; }
    /* Logout: the ghost button's 22px side padding is dead weight up here. */
    .av-navbar .av-btn-ghost { padding: .45rem .7rem; letter-spacing: .03em; }
}
/* Chip badges use the sticker recipe (Archivo Black, 10px, .08em) — great on a
   card, but "INDIVIDUAL" alone rendered 93px and blew the user chip to 246px.
   Compact them in the navbar only; the sticker look stands everywhere else. */
.av-user-chip .av-badge-individual,
.av-user-chip .av-badge-business,
.av-user-chip .av-badge-staff {
    font-family: 'Space Grotesk', sans-serif; font-size: 9px; font-weight: 700;
    letter-spacing: .02em; padding: 2px 5px; border-width: 1px;
}
/* Below xxl there is genuinely no room for the account-type sticker between 8
   links and 5 controls — drop it (the profile page states account type, and
   Business accounts also get their own Dealer link). Staff keeps its badge:
   staff have fewer links, and the role is worth flagging. */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .av-user-chip .av-badge-individual,
    .av-user-chip .av-badge-business { display: none; }
}
/* A long username must never push the bar wide again. */
.av-user-chip { max-width: 15rem; overflow: hidden; }

/* --- Marketplace card footer ---
   seller + actions on one row overflowed the card, and the Buy button was
   squeezed uneven by its shrinking <form>. Stack them: seller on its own line,
   actions as a full-width row of equal-width buttons. */
.av-mk-foot { flex-wrap: wrap; }
.av-mk-foot > .av-mk-seller { flex: 1 1 100%; min-width: 0; overflow: hidden; }
/* Grid, not flex: the actions are an <a> (28px padding + 4px border) beside a
   bare <form>. Under `flex: 1 1 0` the basis resolves against the CONTENT box,
   so the <a>'s 32px of padding+border is added ON TOP of its equal share —
   Offer came out 128px vs Buy 97px. `1fr` tracks size the track itself, so both
   columns are exactly equal whatever the item's padding. */
.av-mk-acts {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    gap: 6px; width: 100%; align-items: stretch;
}
.av-mk-acts > form { display: flex; min-width: 0; }
.av-mk-acts > form > .av-mk-btn { width: 100%; }
.av-mk-btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; }
.av-mk-offers { display: inline-flex; align-items: center; justify-content: center; }

/* --- Text on pink fills ---
   The design rule allows white on pink only for LARGE/bold text. The live tag
   (11px) and Bid button (12px) are neither, so WCAG wants 4.5:1 and white on
   #ff5ac8 is only 2.78:1 — 19 axe color-contrast hits once live auctions render.
   Navy on pink is 6.57:1 and keeps the hot-pink read. */
.av-mk-live { color: var(--av-navy); }
.av-mk-live .dot { background: var(--av-navy); }
.av-mk-bidform button { color: var(--av-navy); }
.av-badge-staff { color: var(--av-navy); }

/* ===== Offer chat (Holo Rush) ===== */
.av-chat { max-width: 760px; margin: 1rem auto 0; background: var(--av-surface); border: 2px solid var(--av-border); border-radius: var(--av-radius); box-shadow: var(--av-shadow); overflow: hidden; }
.av-chat-head { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; border-bottom: 2px solid var(--av-border); background: var(--av-surface-2); }
.av-chat-thumb { flex: 0 0 auto; width: 42px; height: 58px; border-radius: var(--av-radius-sm); overflow: hidden; background: var(--av-navy); border: 1px solid var(--av-border); }
.av-chat-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-chat-head-text { flex: 1 1 auto; min-width: 0; }
.av-chat-title { font-family: 'Archivo Black', sans-serif; font-size: 1.05rem; margin: 0; color: #fff; }
.av-chat-sub { font-size: .8rem; color: var(--av-muted); }
.av-chat-sub a { color: var(--av-cyan); text-decoration: none; }
.av-chat-head-acts { flex: 0 0 auto; display: flex; align-items: center; gap: .5rem; }
.av-chat-status { font-family: 'Archivo Black', sans-serif; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; border: 2px solid var(--av-navy); }
.av-chat-status.open { background: var(--av-mint); color: var(--av-navy); }
.av-chat-status.closed { background: var(--av-border); color: #fff; }

.av-chat-log { padding: 1rem; display: flex; flex-direction: column; gap: .7rem; max-height: 52vh; overflow-y: auto; background: var(--av-navy); }
.av-chat-empty { text-align: center; color: var(--av-muted); font-size: .85rem; padding: 1.5rem 0; }
.av-chat-msg { display: flex; flex-direction: column; max-width: 76%; }
.av-chat-msg.mine { align-self: flex-end; align-items: flex-end; }
.av-chat-msg.theirs { align-self: flex-start; align-items: flex-start; }
.av-chat-bubble { padding: .55rem .8rem; border-radius: 14px; border: 2px solid var(--av-border); background: var(--av-surface); color: #fff; font-size: .9rem; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.av-chat-msg.mine .av-chat-bubble { background: var(--av-cyan); color: var(--av-navy); border-color: var(--av-cyan); font-weight: 600; }
.av-chat-msg.removed .av-chat-bubble { background: transparent; border-style: dashed; color: var(--av-muted); font-style: italic; font-weight: 400; }
.av-chat-meta { font-size: .68rem; color: var(--av-muted); margin-top: .2rem; }

.av-chat-locked { display: flex; align-items: center; gap: .5rem; padding: .8rem 1rem; border-top: 2px solid var(--av-border); background: var(--av-surface-2); color: var(--av-muted); font-size: .82rem; }
.av-chat-form { display: flex; gap: .5rem; align-items: flex-end; padding: .8rem 1rem; border-top: 2px solid var(--av-border); background: var(--av-surface-2); }
.av-chat-input { flex: 1 1 auto; min-width: 0; resize: vertical; max-height: 8rem; padding: .55rem .7rem; border: 2px solid var(--av-border); border-radius: var(--av-radius-input); background: var(--av-navy); color: #fff; font-family: 'Space Grotesk', sans-serif; font-size: .9rem; }
.av-chat-input:focus { outline: none; border-color: var(--av-cyan); }
.av-chat-form .btn { flex: 0 0 auto; }

/* ----- AI Vault Concierge ----- */
/* Reuses the .av-chat shell; adds the suggestion rail, reference chips, and the
   typing indicator. Grounded chips deep-link into the marketplace. */
.av-concierge-log { min-height: 320px; max-height: 56vh; }
.av-concierge-suggests { display: flex; flex-wrap: wrap; gap: .5rem; padding: .7rem 1rem; border-top: 2px solid var(--av-border); background: var(--av-surface-2); }
.av-suggest { border: 2px solid var(--av-border); background: var(--av-navy); color: var(--av-cyan); border-radius: 999px; padding: .35rem .8rem; font-family: 'Space Grotesk', sans-serif; font-size: .8rem; font-weight: 600; cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.av-suggest:hover, .av-suggest:focus-visible { border-color: var(--av-cyan); outline: none; }

.av-ref-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.av-ref-chip { display: inline-flex; align-items: center; gap: .3rem; border: 2px solid var(--av-border); background: var(--av-navy); color: #fff; border-radius: 10px; padding: .25rem .55rem; font-size: .78rem; text-decoration: none; transition: border-color .15s ease, color .15s ease; }
.av-ref-chip:hover, .av-ref-chip:focus-visible { border-color: var(--av-cyan); color: var(--av-cyan); outline: none; }
.av-ref-chip .bi { color: var(--av-cyan); }
.av-ref-sig { margin-left: .1rem; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 1px 5px; border-radius: 5px; }
.av-ref-sig.deal { background: var(--av-mint); color: var(--av-navy); }
.av-ref-sig.fair { background: var(--av-border); color: #fff; }
.av-ref-sig.high { background: var(--av-red); color: var(--av-navy); }

.av-cx-offline .av-chat-bubble { border-style: dashed; color: var(--av-muted); background: var(--av-surface-2); font-weight: 400; }

/* The hot-pink "Ask" CTA carries small bold text, which fails white-on-pink
   contrast. Per the design rule (white on pink only for large/bold), give it
   navy text — 6.8:1 on the pink fill — scoped to the concierge so no other CTA
   changes. */
.av-concierge-form .av-cta-hot,
.av-concierge-form .av-cta-hot:hover { color: var(--av-navy); }

/* ----- Branded confirm dialog (replaces the origin-stamped native confirm) ----- */
.av-confirm-overlay { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(6, 7, 20, .72); }
.av-confirm-box { width: 100%; max-width: 420px; background: var(--av-surface); border: 2px solid var(--av-border); border-radius: var(--av-radius); box-shadow: var(--av-shadow-hover); padding: 1.4rem 1.4rem 1.1rem; animation: av-confirm-in .16s ease-out; }
.av-confirm-msg { color: #fff; font-size: 1rem; line-height: 1.45; margin: 0 0 1.1rem; }
.av-confirm-actions { display: flex; justify-content: flex-end; gap: .6rem; }
@keyframes av-confirm-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .av-confirm-box { animation: none; } }

.av-typing { display: inline-flex; gap: 4px; align-items: center; }
.av-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--av-muted); display: inline-block; animation: av-cx-blink 1s infinite ease-in-out; }
.av-typing i:nth-child(2) { animation-delay: .2s; }
.av-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes av-cx-blink { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) {
    .av-suggest, .av-ref-chip { transition: none; }
    .av-typing i { animation: none; opacity: .6; }
}

/* Chat link + unread badge on the Offers rows */
.av-chat-link { position: relative; }
.av-chat-unread { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; margin-left: .35rem; padding: 0 4px; border-radius: 999px; background: var(--av-pink); color: #fff; font-size: 10px; font-weight: 700; }

/* Staff: reported thread in the moderation console */
.av-mod-convo { background: var(--av-surface-2); border: 2px solid var(--av-border); border-radius: var(--av-radius-sm); padding: .8rem; margin-top: .6rem; display: flex; flex-direction: column; gap: .5rem; max-height: 40vh; overflow-y: auto; }
.av-mod-convo-msg { display: flex; align-items: flex-start; gap: .5rem; font-size: .85rem; }
.av-mod-convo-who { flex: 0 0 auto; font-weight: 700; color: var(--av-cyan); }
.av-mod-convo-body { flex: 1 1 auto; color: #fff; white-space: pre-wrap; word-break: break-word; }
.av-mod-convo-msg.removed .av-mod-convo-body { color: var(--av-muted); font-style: italic; text-decoration: line-through; }

/* ===== Live trade table (Holo Rush) ===== */
.av-trade { max-width: 980px; margin: 1rem auto 0; }
.av-trade-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem; }
.av-trade-title { font-family: 'Archivo Black', sans-serif; font-size: 1.5rem; margin: 0; color: #fff; }
.av-trade-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--av-mint); }
.av-trade-live .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--av-mint); animation: live-blink 1.4s ease-in-out infinite; }
.av-trade-live.is-off { color: var(--av-muted); }
.av-trade-live.is-off .dot { background: var(--av-muted); animation: none; }

.av-trade-banner { padding: .6rem .9rem; border-radius: var(--av-radius-sm); border: 2px solid var(--av-border); background: var(--av-surface-2); color: #fff; font-weight: 600; font-size: .85rem; margin-bottom: .8rem; }
.av-trade-banner.err { border-color: var(--av-red); color: var(--av-red); }
.av-trade-banner.done { border-color: var(--av-mint); color: var(--av-mint); background: rgba(138,255,177,.08); }

/* The table: two halves facing each other */
.av-trade-table { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 720px) { .av-trade-table { grid-template-columns: 1fr; } }
.av-trade-side { background: var(--av-surface); border: 2px solid var(--av-border); border-radius: var(--av-radius); padding: .9rem; box-shadow: var(--av-shadow); }
.av-trade-side.theirs { border-color: var(--av-pink); box-shadow: 6px 6px 0 rgba(255,90,200,.25); }
.av-trade-side-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.av-trade-side-head h2 { font-family: 'Archivo Black', sans-serif; font-size: .95rem; margin: 0; color: #fff; }
.av-trade-lockchip { display: inline-flex; align-items: center; gap: 5px; font-family: 'Archivo Black', sans-serif; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; border: 2px solid var(--av-navy); background: var(--av-mint); color: var(--av-navy); }

.av-trade-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .5rem; min-height: 132px; padding: .5rem; background: var(--av-navy); border: 2px dashed var(--av-border); border-radius: var(--av-radius-sm); align-content: start; }
.av-trade-empty { grid-column: 1 / -1; align-self: center; text-align: center; color: var(--av-muted); font-size: .78rem; padding: 1rem .5rem; }
.av-trade-slot { position: relative; background: var(--av-surface); border: 2px solid var(--av-border); border-radius: 10px; padding: 4px; animation: trade-pop .18s ease-out; }
.av-trade-slot.mine { border-color: var(--av-cyan); }
.av-trade-slot-img { aspect-ratio: 5/7; border-radius: 6px; overflow: hidden; background: var(--av-surface-2); display: flex; align-items: center; justify-content: center; color: var(--av-border); }
.av-trade-slot-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-trade-slot-name { font-size: .62rem; font-weight: 700; color: #fff; margin-top: 3px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.av-trade-slot-x { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 999px; border: 2px solid var(--av-navy); background: var(--av-red); color: var(--av-navy); font-weight: 700; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.av-trade-slot-x:hover { background: #fff; }
@keyframes trade-pop { from { transform: scale(.82); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.av-trade-credits { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; font-size: .8rem; color: var(--av-muted); }
.av-trade-credits label { font-weight: 700; }
.av-trade-creditinput { width: 6.5rem; padding: .35rem .5rem; border: 2px solid var(--av-border); border-radius: var(--av-radius-input); background: var(--av-navy); color: #fff; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-variant-numeric: tabular-nums; }
.av-trade-creditinput:focus { outline: none; border-color: var(--av-cyan); }
.av-trade-balance { font-size: .72rem; }
.av-trade-theircredits { font-family: 'Archivo Black', sans-serif; color: var(--av-yellow); font-variant-numeric: tabular-nums; }

.av-trade-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 1rem 0; }
.av-trade-hint { font-size: .78rem; color: var(--av-muted); }
.av-trade-hint a { color: var(--av-cyan); }

.av-trade-picker { margin-top: .5rem; background: var(--av-surface); border: 2px solid var(--av-border); border-radius: var(--av-radius); padding: .9rem; }
.av-trade-picker-title { font-family: 'Archivo Black', sans-serif; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--av-muted); margin: 0 0 .6rem; }
.av-trade-pickgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .5rem; max-height: 260px; overflow-y: auto; }
.av-trade-pick { background: var(--av-surface-2); border: 2px solid var(--av-border); border-radius: 10px; padding: 5px; cursor: pointer; text-align: left; transition: transform .1s, border-color .1s; }
.av-trade-pick:hover { border-color: var(--av-cyan); transform: translateY(-2px); }
.av-trade-pick-img { display: block; aspect-ratio: 5/7; border-radius: 6px; overflow: hidden; background: var(--av-navy); display: flex; align-items: center; justify-content: center; color: var(--av-border); }
.av-trade-pick-img img { width: 100%; height: 100%; object-fit: cover; }
.av-trade-pick-name { display: block; font-size: .6rem; font-weight: 700; color: #fff; margin-top: 3px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.av-trade-pick-qty { display: block; font-size: .58rem; color: var(--av-muted); font-weight: 700; }

/* ===== Collector directory: real avatars + a fan of their card art ===== */

/* A real uploaded avatar where there's one; the initial stays as the fallback. */
.av-collector-avatar-img { object-fit: cover; border: 2px solid var(--av-border); background: var(--av-surface-2); }
.av-collector-card:hover .av-collector-avatar-img { border-color: var(--av-cyan); }

/* Their showcase pins (or latest pickups) bleeding into the right edge. Masked
   and dimmed at rest so long usernames stay readable over it — the art is
   atmosphere, not a competing element — then it lifts and fans on hover. */
.av-collector-card { position: relative; overflow: hidden; }
.av-collector-fan {
    position: absolute; top: 50%; right: -10px; transform: translateY(-50%);
    display: flex; align-items: center; pointer-events: none;
    opacity: .3; transition: opacity .18s ease;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
    mask-image: linear-gradient(90deg, transparent, #000 60%);
}
.av-collector-fan img {
    width: 38px; aspect-ratio: 5 / 7; object-fit: cover;
    border-radius: 5px; border: 1.5px solid var(--av-border);
    background: var(--av-surface-2);
    transition: transform .18s ease;
}
.av-collector-fan-0 { transform: rotate(-9deg); z-index: 3; }
.av-collector-fan-1 { transform: rotate(0deg) translateX(-12px); z-index: 2; }
.av-collector-fan-2 { transform: rotate(9deg) translateX(-24px); z-index: 1; }
.av-collector-card:hover .av-collector-fan { opacity: .6; }
.av-collector-card:hover .av-collector-fan-0 { transform: rotate(-15deg) translateX(-5px); }
.av-collector-card:hover .av-collector-fan-2 { transform: rotate(15deg) translateX(-19px); }

/* Keep the text clear of the densest part of the fan. */
.av-collector-body { padding-right: 2.6rem; }
.av-collector-name { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
    .av-collector-fan, .av-collector-fan img { transition: none; }
}

/* Avatars frame the ARTWORK, not the middle of the card. Seeded collectors wear a
   Pokemon card as their face, and a card is 5:7 — an untouched centre crop lands on
   the name/attack text. ~30% from the top sits on the art window, and it flatters an
   uploaded portrait too (faces sit high), so both cases use one rule. */
.av-collector-avatar-img,
.av-profile-avatar-img img { object-position: center 30%; }

/* ===== Holographic cards =====
   The signature effect: real holo cards throw colour as you tilt them, so these
   track the pointer to do the same. Two stacked layers over the art — a rainbow
   FOIL (colour-dodge) and a white GLARE (specular highlight) — both revealed and
   moved by --mx/--my (set in site.js). The .av-holo--tilt variant adds a 3D tilt
   via --rx/--ry, used only where the art has no competing transform (grails, card
   modal). isolation:isolate keeps the blend modes inside the card, not on the page. */
.av-holo { position: relative; isolation: isolate; }
.av-holo-foil, .av-holo-glare {
    position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    opacity: 0; transition: opacity .3s ease; z-index: 3;
}
.av-holo-foil {
    background: repeating-linear-gradient(108deg,
        rgba(125, 249, 255, .6) 0%, rgba(255, 138, 224, .6) 14%,
        rgba(255, 226, 122, .6) 28%, rgba(138, 255, 177, .6) 42%,
        rgba(125, 249, 255, .6) 56%);
    background-size: 260% 260%;
    background-position: var(--mx, 50%) var(--my, 50%);
    mix-blend-mode: color-dodge;
}
.av-holo-glare {
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
        rgba(255, 255, 255, .7), rgba(255, 255, 255, .12) 34%, transparent 55%);
    mix-blend-mode: overlay;
}
.av-holo.is-holo-active .av-holo-foil { opacity: .62; }
.av-holo.is-holo-active .av-holo-glare { opacity: .8; }

/* 3D tilt — grails wall + card modal only. Fast follow while tracking, smooth reset. */
.av-holo--tilt { transition: transform .4s ease, box-shadow .4s ease; transform-style: preserve-3d; }
.av-holo--tilt.is-holo-active {
    transition: transform .08s ease;
    transform: perspective(760px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) scale(1.05);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .55);
    z-index: 5;
}

@media (prefers-reduced-motion: reduce) {
    .av-holo-foil, .av-holo-glare { opacity: 0 !important; }
    .av-holo--tilt { transform: none !important; }
}

/* ===== Ambient page atmosphere =====
   Opt-in via <body class="av-atmo"> (set through ViewData["BodyClass"]). Thin/form
   pages are a small card in a wide navy void; a few soft holo glows behind the
   content turn that void into intentional atmosphere — the "premium dark" look —
   without competing with anything. Fixed so it stays put on scroll, pointer-events
   none, and it sits above the body fill but below all content (z-index -1). Purely
   decorative and static: nothing to gate behind reduced-motion. */
body.av-atmo::before {
    content: "";
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(62% 55% at 12% -5%, rgba(125, 249, 255, .12), transparent 60%),
        radial-gradient(52% 48% at 104% 12%, rgba(255, 90, 200, .12), transparent 58%),
        radial-gradient(60% 55% at 50% 112%, rgba(138, 255, 177, .08), transparent 60%);
}

/* ===== Empty states, upgraded =====
   The big full-page empty state (.av-empty) becomes a composed panel — a holo top
   strip, a badge icon, a headline and sub — so a page with no data reads as an
   invitation, not a dead end. Existing markups keep working (the lead <i> becomes
   the badge automatically); .av-empty-title / .av-empty-sub add structure where
   it's worth it. */
.av-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: .5rem;
    padding: 3.6rem 1.5rem;
    color: var(--av-muted); font-size: .95rem;
    background: var(--av-surface);
    border: 2px dashed var(--av-border);
    border-radius: var(--av-radius);
    margin-bottom: 2rem;
    position: relative; overflow: hidden;
}
.av-empty::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--av-holo); background-size: 200% 100%; opacity: .8;
}
/* The lead icon (first child, or an explicit .av-empty-ico) → a holo-lit badge. */
.av-empty > .bi:first-child,
.av-empty .av-empty-ico {
    font-size: 1.7rem; line-height: 1; color: var(--av-cyan);
    width: 66px; height: 66px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--av-accent-pale); border: 2px solid var(--av-border);
    margin-bottom: .3rem;
}
.av-empty-title { font-family: 'Archivo Black', sans-serif; font-size: 1.15rem; color: #fff; }
.av-empty-sub { color: var(--av-muted); font-size: .9rem; max-width: 42ch; margin: 0; line-height: 1.5; }
.av-empty .btn { margin-top: .55rem; }

/* Compact in-card empties (.av-chart-empty) get a quieter version of the same care. */
.av-chart-empty { background: var(--av-surface-2); border-width: 2px; border-radius: var(--av-radius-sm); }

/* ===== Live trade — the seal celebration ===== */
/* Holo confetti raining across the screen + a foil sweep over every card, fired
   once when a trade completes. All motion; reduced-motion users get the banner. */
.av-confetti { position: fixed; inset: 0; z-index: 9999; pointer-events: none; overflow: hidden; }
.av-confetti-bit {
    position: absolute; top: -24px; width: 9px; height: 15px; border-radius: 2px;
    opacity: 0; will-change: transform, opacity;
    animation: av-confetti-fall var(--dur, 2.4s) var(--delay, 0s) cubic-bezier(.35, .55, .5, 1) forwards;
}
@keyframes av-confetti-fall {
    0%   { transform: translate(0, -24px) rotate(0); opacity: 0; }
    12%  { opacity: 1; }
    100% { transform: translate(var(--drift, 0), 106vh) rotate(var(--rot, 360deg)); opacity: .9; }
}

/* One-shot specular sweep across a card as the trade seals. */
.av-trade-slot.is-sealed { position: relative; }
.av-trade-slot.is-sealed::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .65) 50%, transparent 68%);
    transform: translateX(-130%);
    animation: av-seal-sweep .75s var(--seal-delay, 0s) ease-out forwards;
}
@keyframes av-seal-sweep { to { transform: translateX(130%); } }

/* The "sealed" banner reads as a win: mint fill, not just mint text. */
.av-trade-banner.done {
    background: rgba(138, 255, 177, .12); border-color: var(--av-mint); color: var(--av-mint);
    font-family: 'Archivo Black', sans-serif; letter-spacing: .01em;
}

@media (prefers-reduced-motion: reduce) {
    .av-confetti { display: none !important; }
    .av-trade-slot.is-sealed::after { animation: none !important; opacity: 0 !important; }
}

/* ===== Cohesion pass — retune leftover warm-theme colours to Holo =====
   The Holo Rush token remap recoloured everything driven by --av-*, but a few
   Bootstrap-semantic rules carried hardcoded warm colours from the old coral
   theme. These later-wins overrides bring the error/success states onto the
   palette — the most visible being validation-error text, which was a muddy
   #8a2d20 (barely legible on navy). */
.text-danger { color: var(--av-red) !important; }
.btn-danger { background: var(--av-red); border: 2px solid var(--av-red); color: var(--av-navy); font-weight: 700; }
.btn-danger:hover { background: #fff; border-color: #fff; color: var(--av-navy); }
/* Alert bg + text were already themed; close the leftover warm borders. */
.alert-danger { border-color: var(--av-red); }
.alert-success { border-color: var(--av-mint); }
.alert-warning { border-color: var(--av-yellow); }
/* The one unthemed badge (the 2FA "Off" chip) — a quiet navy chip, not BS grey. */
.text-bg-secondary { background: var(--av-surface-2) !important; color: var(--av-muted) !important; border: 1px solid var(--av-border); }

/* ===== Trades — resume an open live table ===== */
.av-opentable-wrap { margin: 0 0 1.5rem; }
.av-opentable-wrap .av-chart-title { margin-bottom: .6rem; }
.av-opentable-list { display: flex; flex-direction: column; gap: .6rem; }
.av-opentable {
    display: flex; align-items: center; gap: .9rem; text-decoration: none;
    background: var(--av-surface); border: 2px solid var(--av-pink);
    box-shadow: 4px 4px 0 rgba(255, 90, 200, .22);
    border-radius: var(--av-radius); padding: .8rem 1rem;
    transition: transform .12s ease, box-shadow .12s ease;
}
.av-opentable:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 rgba(255, 90, 200, .3); }
.av-opentable-live {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
    font-family: 'Archivo Black', sans-serif; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
    color: #fff; background: var(--av-pink); border: 2px solid var(--av-navy); border-radius: 8px; padding: 4px 9px;
}
.av-opentable-live .dot { width: 7px; height: 7px; border-radius: 999px; background: #fff; animation: live-blink 1.2s ease-in-out infinite; }
.av-opentable-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.av-opentable-who { color: #fff; font-weight: 600; }
.av-opentable-who strong { color: var(--av-cyan); }
.av-opentable-meta { font-size: .8rem; color: var(--av-muted); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.av-opentable-flag { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--av-muted); background: var(--av-surface-2); border: 1px solid var(--av-border); border-radius: var(--av-pill); padding: .1rem .5rem; }
.av-opentable-flag.hot { color: var(--av-navy); background: var(--av-yellow); border-color: var(--av-navy); }
.av-opentable-cta { flex: 0 0 auto; font-family: 'Archivo Black', sans-serif; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--av-cyan); }

/* ===== QA fix — small pink badges use navy text =====
   The design rule allows white on pink only for LARGE/bold text; these badges are
   small (10px), so white-on-#ff5ac8 was 2.78:1 — a real contrast fail, and
   inconsistent with .av-mk-live / .av-badge-staff which were already navy. Navy on
   pink is 6.57:1. (.av-notif-dot is a textless dot — left as-is.) */
.av-auction-tag,
.av-bell-badge,
.av-chat-unread,
.av-opentable-live { color: var(--av-navy); }
.av-opentable-live .dot { background: var(--av-navy); }