/* Axie Collection Value — scoped, theme-aware design system.
   Extracted from axie_evaluate/axie_collection_value.jte; scoped under .cv-page (+ its overlays). */
/* ===== Axie Collection Value — scoped, theme-aware design system ===== */
.cv-page {
    --cv-display: 'Archivo', system-ui, sans-serif;
    --cv-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;

    /* surfaces & ink built from Bulma scheme vars → adapt in .theme-dark automatically */
    --cv-surface:   var(--bulma-scheme-main);
    --cv-surface-2: var(--bulma-scheme-main-bis);
    --cv-ink:       var(--bulma-text-strong, var(--bulma-text));
    --cv-ink-soft:  var(--bulma-text);
    --cv-ink-weak:  var(--bulma-text-weak);
    --cv-line:      color-mix(in srgb, var(--bulma-text) 16%, transparent);
    --cv-line-soft: color-mix(in srgb, var(--bulma-text) 9%, transparent);
    --cv-shadow: none;            /* business-like = hairline borders, not drop shadows */
    --cv-radius: 8px;

    /* one restrained brand accent — drives affordances (focus, primary action,
       active state) AND the dominant "ordinary" bucket. */
    --cv-brand: #3a6ea5;          /* steel / data blue */

    /* desaturated, harmonised bucket accents — quiet, no loud multi-hue fighting;
       `listed` (the biggest bucket + every affordance) inherits the brand. */
    --accent-floor:     #6f73a3;  /* collectible · current floor   */
    --accent-listed:    var(--cv-brand);  /* ordinary · current listed */
    --accent-materials: #9c8763;  /* materials fallback            */
    --accent-history:   #4f947a;  /* history sales · "up" · compare */
    --accent-egg:       #5594a0;  /* eggs                          */
    --accent-muted:     color-mix(in srgb, var(--bulma-text-weak) 80%, transparent);

    position: relative;
    font-family: var(--cv-display);
    color: var(--cv-ink-soft);
}
.cv-page > * { position: relative; z-index: 1; }

/* numeric figures use the mono face + tabular figures everywhere */
.cv-num { font-family: var(--cv-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---------- Header ---------- */
.cv-head { margin: 0 0 1.4rem; }
.cv-head__eyebrow {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--cv-ink-weak); margin-bottom: 0.35rem;
}
.cv-head__title {
    font-family: var(--cv-display); font-weight: 700; font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    line-height: 1.1; letter-spacing: -0.01em; color: var(--cv-ink-soft);
}
/* the brand TLD — ".top" — steel-blue accent, same size as the rest of the title */
.cv-head__title .cv-brand { color: var(--cv-brand); }

/* ---------- Wallet bar — a single full-width "assess any wallet" control (the form IS the bar) ---------- */
.cv-walletbar { display: flex; flex-wrap: wrap; row-gap: 0.5rem; max-width: 600px; margin: 0 0 1.4rem auto; }
/* invalid typed wallet — red field outline + an inline message that wraps full-width under the assess bar */
.cv-walletform.is-invalid { border-color: color-mix(in srgb, #d4493f 60%, var(--cv-line)); }
.cv-walletform__error { flex-basis: 100%; display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.78rem; color: #d4493f; }
.cv-walletform__error[hidden] { display: none; }
.cv-walletform__error i { font-size: 0.95em; }
.theme-dark .cv-walletform__error { color: #f08a82; }
.cv-wallet { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; font-weight: 600; color: var(--cv-ink); }
.cv-wallet > i { color: var(--accent-floor); }
.cv-wallet__addr { font-family: var(--cv-mono); font-size: 0.95rem; letter-spacing: -0.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    cursor: pointer; border-radius: 6px; transition: color .15s ease; }
.cv-wallet__addr:hover { color: var(--accent-listed); }
/* An RNS (.ron) name reads as a word, not a hex string — drop the tight hex tracking + accent it. */
.cv-wallet__addr.is-rns { letter-spacing: normal; color: var(--accent-listed); }
.cv-wallet__addr:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent-listed) 60%, transparent); outline-offset: 2px; }
/* copied confirmation — lives on the pill (.cv-wallet), whose box isn't clipped like the ellipsised addr */
.cv-wallet.is-copied .cv-wallet__addr { color: var(--accent-history); }
.cv-wallet.is-copied::after {
    content: "Copied"; position: absolute; left: 50%; bottom: calc(100% + 7px); transform: translateX(-50%);
    font-family: var(--cv-display); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--accent-history); background: color-mix(in srgb, var(--accent-history) 16%, var(--cv-surface));
    border: 1px solid color-mix(in srgb, var(--accent-history) 40%, transparent);
    padding: 0.15rem 0.45rem; border-radius: 7px; white-space: nowrap; pointer-events: none; z-index: 5;
    animation: cvCopiedPop .18s ease both; }
@keyframes cvCopiedPop { from { opacity: 0; transform: translateX(-50%) translateY(3px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.cv-wallet__badge { flex: none; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 0.12rem 0.42rem; border-radius: 999px; color: var(--accent-listed);
    background: color-mix(in srgb, var(--accent-listed) 14%, var(--cv-surface));
    border: 1px solid color-mix(in srgb, var(--accent-listed) 32%, transparent); }
.cv-walletform { display: inline-flex; align-items: center; gap: 0.5rem; flex: 1 1 auto; max-width: none;
    padding: 0.35rem 0.35rem 0.35rem 0.7rem; border-radius: 12px; background: var(--cv-surface);
    border: 1px solid var(--cv-line); box-shadow: inset 0 1px 0 var(--cv-line-soft);
    transition: border-color .15s ease, background .2s ease; }
.cv-walletform:focus-within { border-color: color-mix(in srgb, var(--accent-listed) 50%, var(--cv-line)); }
.cv-walletform > i { color: var(--cv-ink-weak); font-size: 0.85rem; }
/* Locked state — while the shown wallet is within its re-assessment window the whole control is disabled;
   the leading icon flips search → lock and the field tints faintly. JS unlocks it in place on expiry. */
.cv-walletform__ico-lock { display: none; }
.cv-walletform.is-locked .cv-walletform__ico-search { display: none; }
.cv-walletform.is-locked .cv-walletform__ico-lock { display: inline-flex; color: var(--accent-listed); }
.cv-walletform.is-locked { background: color-mix(in srgb, var(--accent-listed) 5%, var(--cv-surface)); cursor: not-allowed; }
.cv-walletform input:disabled { cursor: not-allowed; }
.cv-walletform input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent;
    font-family: var(--cv-mono); font-size: 0.85rem; color: var(--cv-ink); }
.cv-walletform input:focus { outline: none; }
.cv-walletform input::placeholder { color: var(--cv-ink-weak); font-family: var(--cv-display); }
/* own-wallet ghost prefill — mono (address-legible) + accent-tinted so it reads as an intentional default */
.cv-walletform input.is-prefill::placeholder { font-family: var(--cv-mono); letter-spacing: -0.01em;
    color: color-mix(in srgb, var(--accent-listed) 48%, var(--cv-ink-weak)); opacity: 1; }
.cv-walletform:focus-within input.is-prefill::placeholder { color: var(--cv-ink-weak); }
/* locked countdown placeholder — mono + a firmer accent so the "re-assess in mm:ss" hint reads as a lock */
.cv-walletform.is-locked input::placeholder { font-family: var(--cv-mono); letter-spacing: -0.01em;
    color: color-mix(in srgb, var(--accent-listed) 62%, var(--cv-ink-weak)); opacity: 1; }
.cv-walletform__btn { flex: none; display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer;
    font-size: 0.82rem; font-weight: 600; color: #fff; border: 1px solid var(--cv-brand); border-radius: 9px; padding: 0.45rem 0.85rem;
    background: var(--cv-brand); transition: filter .15s ease; white-space: nowrap; }
.cv-walletform__btn:hover { filter: brightness(0.95); }
/* The Assess button has two faces toggled by .is-cooldown: the action face (coins · "Assess") and the
   locked face (lock · "Locked"). The live countdown itself lives in the input placeholder, not here. */
.cv-walletform__btn .cv-cooldown-ico, .cv-walletform__btn .cv-cooldown-lab { display: none; }
.cv-walletform__btn.is-cooldown .cv-assess-ico, .cv-walletform__btn.is-cooldown .cv-assess-lab { display: none; }
.cv-walletform__btn.is-cooldown .cv-cooldown-ico { display: inline-flex; }
.cv-walletform__btn.is-cooldown .cv-cooldown-lab { display: inline-flex; }
.cv-walletform__btn.is-cooldown { cursor: not-allowed; color: var(--cv-ink-weak);
    background: var(--cv-surface-2); border: 1px solid var(--cv-line); box-shadow: none; }
.cv-walletform__btn.is-cooldown:hover { filter: none; }
.cv-walletform__btn.is-cooldown .cv-cooldown-ico { color: var(--accent-listed); }
/* Assessing state — while a background assessment streams, the whole control is disabled so a second
   assessment can't be started mid-run. The leading icon flips search → spinner and the button swaps its
   action face for a spinner · "Assessing…" busy face. collectionValue.js releases it when pricing completes. */
.cv-walletform__ico-busy { display: none; }
.cv-walletform.is-assessing .cv-walletform__ico-search { display: none; }
.cv-walletform.is-assessing .cv-walletform__ico-busy { display: inline-flex; }
.cv-walletform.is-assessing { background: color-mix(in srgb, var(--accent-listed) 5%, var(--cv-surface)); cursor: progress; }
.cv-walletform.is-assessing input::placeholder { font-family: var(--cv-mono); letter-spacing: -0.01em;
    color: color-mix(in srgb, var(--accent-listed) 62%, var(--cv-ink-weak)); opacity: 1; }
.cv-walletform__btn .cv-assessing-ico, .cv-walletform__btn .cv-assessing-lab { display: none; }
.cv-walletform__btn.is-assessing .cv-assess-ico, .cv-walletform__btn.is-assessing .cv-assess-lab { display: none; }
.cv-walletform__btn.is-assessing .cv-assessing-ico { display: inline-flex; }
.cv-walletform__btn.is-assessing .cv-assessing-lab { display: inline-flex; }
.cv-walletform__btn.is-assessing { cursor: progress; color: var(--cv-ink-weak);
    background: var(--cv-surface-2); border: 1px solid var(--cv-line); box-shadow: none; }
.cv-walletform__btn.is-assessing:hover { filter: none; }
@media screen and (max-width: 560px) {
    .cv-walletbar { flex-direction: column; align-items: stretch; }
    /* In a column the form's flex-basis would become a 320px HEIGHT — pin it to content height instead.
       Let the form wrap: the input fills the first row beside its icon, and the Assess + History buttons
       drop to a shared full second row so the long locked countdown placeholder isn't squeezed to a sliver. */
    .cv-walletform { max-width: none; flex: 0 0 auto; flex-wrap: wrap; row-gap: 0.5rem; padding: 0.4rem; }
    .cv-walletform input { flex: 1 1 calc(100% - 2rem); padding-left: 0.15rem; }
    .cv-walletform__btn { flex: 1 1 auto; justify-content: center; padding-top: 0.5rem; padding-bottom: 0.5rem; }
    .cv-walletform__sep { display: none; }
    .cv-split { grid-template-columns: 1fr; }
}

/* ---------- Summary panel ---------- */
.cv-summary {
    display: grid;
    grid-template-columns: minmax(240px, 0.9fr) 1.6fr;
    gap: clamp(1rem, 2.4vw, 2rem);
    align-items: stretch;
    padding: clamp(1.1rem, 2.2vw, 1.7rem);
    border-radius: var(--cv-radius);
    border: 1px solid var(--cv-line);
    background: var(--cv-surface);
}
.cv-hero { display: flex; flex-direction: column; justify-content: center; gap: 0.3rem;
    padding-right: clamp(1rem, 2vw, 1.6rem); border-right: 1px solid var(--cv-line-soft); }
.cv-hero__label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cv-ink-weak); }
.cv-hero__total { font-family: var(--cv-mono); font-weight: 600; font-size: clamp(2.1rem, 4.6vw, 3.1rem);
    line-height: 1; letter-spacing: -0.03em; color: var(--cv-ink);
    font-variant-numeric: tabular-nums; }
.cv-hero__sub { font-size: 0.92rem; color: var(--cv-ink-weak); margin-top: 0.15rem; }
.cv-hero__sub b { color: var(--cv-ink-soft); font-weight: 600; }

/* distribution bar */
.cv-dist { display: flex; height: 8px; border-radius: 999px; overflow: hidden; margin-top: 1rem;
    background: var(--cv-line-soft); box-shadow: inset 0 0 0 1px var(--cv-line-soft); }
.cv-dist > span { height: 100%; transition: width 0.4s ease; }
.cv-dist .seg-floor  { background: var(--accent-floor); }
.cv-dist .seg-listed { background: var(--accent-listed); }
.cv-dist .seg-egg    { background: var(--accent-egg); }

/* ============================================================================
   Share Card — the screenshot-ready hero. Wallet pill, the big total, and the
   stacked Collectible/Ordinary split — the Collectible tile carries its own
   per-collection breakdown — followed by the value-distribution bar.
   ============================================================================ */
.cv-share {
    position: relative;
    margin: 0 0 1.5rem; padding: clamp(1rem, 2.1vw, 1.35rem) clamp(1.1rem, 2.3vw, 1.45rem);
    border-radius: 16px; color: var(--cv-ink-soft);
    /* atmosphere: a soft tri-tone gradient mesh — Collectible (floor) glow top-left, Ordinary (listed) glow
       top-right, brand wash rising from the base — over the flat surface, so the whole card has depth. */
    background:
        radial-gradient(130% 85% at 0% 0%, color-mix(in srgb, var(--accent-floor) 11%, transparent), transparent 52%),
        radial-gradient(130% 85% at 100% 0%, color-mix(in srgb, var(--accent-listed) 11%, transparent), transparent 52%),
        radial-gradient(125% 120% at 50% 118%, color-mix(in srgb, var(--cv-brand) 8%, transparent), transparent 60%),
        var(--cv-surface);
    border: 1px solid var(--cv-line);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent),
        0 1px 2px rgba(0, 0, 0, 0.18),
        0 26px 64px -38px color-mix(in srgb, var(--cv-brand) 28%, #000);
}

.cv-share__head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem 1rem; flex-wrap: wrap;
    margin-bottom: clamp(0.8rem, 1.8vw, 1.2rem); }
/* page title (moved out of the old top .cv-head) on the left; legend + wallet cluster on the right */
.cv-share__intro { min-width: 0; }
.cv-share__tools { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; justify-content: flex-end; }
.cv-share__wallet { background: color-mix(in srgb, var(--cv-surface) 55%, transparent); border: 1px solid var(--cv-line);
    border-radius: 999px; padding: 0.4rem 0.75rem; backdrop-filter: blur(6px); }
/* "How values are estimated" toggle — sits ABOVE the share card, right-aligned, outside the card box. */
.cv-share__legend { display: flex; justify-content: flex-end; margin: 0 0 0.75rem; }

.cv-share__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(1rem, 2.6vw, 2.2rem); align-items: stretch; }
.cv-share .cv-hero__total { font-size: clamp(1.9rem, 3.4vw, 2.5rem); color: var(--cv-ink); }

.cv-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; align-content: stretch; }
.cv-split__tile { position: relative; display: flex; flex-direction: column; border-radius: 12px; padding: 0.9rem 1rem;
    background: var(--cv-surface-2);
    border: 1px solid var(--cv-line); }
.cv-split__tile.is-floor  { --cv-accent: var(--accent-floor); }
.cv-split__tile.is-listed { --cv-accent: var(--accent-listed); }
.cv-split__top { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.6rem; }
.cv-split__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cv-accent); flex: none; }
.cv-split__name { font-size: 0.84rem; font-weight: 600; color: var(--cv-ink-soft); }
.cv-split__count { margin-left: auto; font-family: var(--cv-mono); font-size: 0.72rem; font-weight: 600; color: var(--cv-ink-weak);
    background: var(--cv-line-soft); padding: 0.1rem 0.5rem; border-radius: 999px; white-space: nowrap; }
/* Bucket header = two KPIs: the dominant "Total value" (the whole-bucket sum) on the left, and its "Share" of
   the portfolio on the right (an accent-coloured % — never confused with the neutral $ total, nor with the
   single most-valuable axie's price plate down in the showcase). */
.cv-split__kpis { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem; }
.cv-split__kpi { display: flex; flex-direction: column; min-width: 0; }
.cv-split__kpi--main { flex: 0 1 auto; }
.cv-split__kpi--share { flex: none; align-items: flex-end; text-align: right; }
.cv-split__lab { display: block; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--cv-ink-weak); margin-bottom: 0.12rem; }
.cv-split__val { font-family: var(--cv-mono); font-weight: 600; font-size: 1.55rem; line-height: 1;
    letter-spacing: -0.03em; color: var(--cv-ink); font-variant-numeric: tabular-nums; }
.cv-split__share { font-family: var(--cv-mono); font-weight: 600; font-size: 1.08rem; line-height: 1;
    letter-spacing: -0.02em; color: var(--cv-accent); font-variant-numeric: tabular-nums; }

.cv-share .cv-dist { height: 10px; margin: clamp(0.9rem, 2vw, 1.3rem) 0 0;
    box-shadow: inset 0 0 0 1px var(--cv-line-soft); }

.cv-walletform__sep { flex: none; width: 1px; align-self: stretch; margin: 0.2rem 0.15rem; background: var(--cv-line); }
.cv-walletform__history { flex: none; display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer;
    font-size: 0.78rem; font-weight: 600; white-space: nowrap; padding: 0.4rem 0.65rem; border-radius: 9px;
    color: var(--cv-ink-soft); background: var(--cv-surface-2); border: 1px solid var(--cv-line); text-decoration: none;
    transition: border-color .15s ease, color .15s ease; }
.cv-walletform__history { font-family: var(--cv-display); }
.cv-walletform__history:hover { border-color: color-mix(in srgb, var(--accent-history) 50%, transparent); color: var(--cv-ink); }
.cv-walletform__history i { color: var(--accent-history); font-size: 0.85em; }
/* narrow-screen: History grows to share the wrapped second row evenly with Assess — declared AFTER the base
   .cv-walletform__history rule above so its flex override wins the source-order cascade. */
@media screen and (max-width: 560px) {
    .cv-walletform__history { flex: 1 1 auto; justify-content: center; padding-top: 0.5rem; padding-bottom: 0.5rem; }
}

/* "Your assessments" — right-side slide-in panel (opened by the History button). */
.cv-histbackdrop { position: fixed; inset: 0; z-index: 200; background: rgba(8, 8, 14, 0.5);
    backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; }
.cv-histbackdrop.is-open { opacity: 1; visibility: visible; }
.cv-histpanel { position: fixed; top: 0; right: 0; z-index: 210; height: 100dvh; width: min(460px, 94vw);
    display: flex; flex-direction: column; transform: translateX(101%); will-change: transform;
    transition: transform .34s cubic-bezier(.2, .75, .2, 1);
    background: var(--cv-surface);
    border-left: 1px solid var(--cv-line);
    box-shadow: -20px 0 50px -30px rgba(0, 0, 0, 0.5); }
.cv-histpanel.is-open { transform: translateX(0); }
.cv-histpanel__close { position: absolute; top: 0.8rem; right: 0.85rem; z-index: 4; display: inline-grid; place-items: center;
    width: 34px; height: 34px; border-radius: 10px; cursor: pointer; color: var(--cv-ink); font-size: 1.05rem; line-height: 1;
    background: var(--cv-surface-2); border: 1px solid var(--cv-line); transition: border-color .15s ease, color .15s ease, background .15s ease; }
.cv-histpanel__close:hover { border-color: color-mix(in srgb, var(--accent-history) 50%, transparent);
    background: color-mix(in srgb, var(--accent-history) 12%, var(--cv-surface-2)); }
.cv-histpanel__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 0 1.1rem 2.5rem; }
/* the loaded "Your assessments" section drops its own card chrome and flows inside the panel */
.cv-histpanel__body .cv-history { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; }
/* sticky panel header — title + count stay pinned while the timeline scrolls underneath */
.cv-histpanel__body .cv-history__head { position: sticky; top: 0; z-index: 2; align-items: center;
    flex-wrap: wrap; gap: 0.2rem 0.8rem; margin: 0 -1.1rem 0.85rem; padding: 1rem 3.1rem 0.7rem 1.1rem;
    background: var(--cv-surface); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--cv-line); }
/* title may wrap on a very narrow panel rather than slide under the close button */
.cv-histpanel__body .cv-history__title { line-height: 1.15; }

@media screen and (max-width: 860px) { .cv-share__top { grid-template-columns: 1fr; } }

/* Share card columns are equal-height (align-items: stretch) so the hero's portfolio list and the tiles'
   crown-jewel showcases fill the block evenly. Hero pins its content to the top; its list fills downward. */
.cv-share .cv-hero { justify-content: flex-start; }

/* ---- Hero "Collectible by collection" portfolio list (moved out of the Collectible split tile) ---- */
.cv-hero__break { margin-top: 1.15rem; padding-top: 0.95rem; border-top: 1px solid var(--cv-line-soft); }
.cv-hero__break-lab { display: block; margin-bottom: 0.6rem;
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cv-ink-weak); }
.cv-hero__break-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.34rem; }
.cv-collrow { display: flex; align-items: center; gap: 0.6rem; padding: 0.34rem 0.5rem; border-radius: 9px;
    background: color-mix(in srgb, var(--accent-floor) 6%, var(--cv-surface));
    border: 1px solid color-mix(in srgb, var(--accent-floor) 16%, var(--cv-line-soft)); }
.cv-collrow .badge-collection { flex: none; padding: 5px; border-radius: 8px; gap: 0; }
.cv-collrow .badge-icon-wrapper { width: 16px; height: 16px; display: block; }
.cv-collrow .badge-icon-wrapper img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cv-collrow__name { min-width: 0; font-size: 0.82rem; font-weight: 600; color: var(--cv-ink-soft);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-collrow__val { margin-left: auto; font-family: var(--cv-mono); font-size: 0.84rem; font-weight: 600;
    color: var(--cv-ink); font-variant-numeric: tabular-nums; }
.cv-collrow__count { flex: none; font-family: var(--cv-mono); font-variant-numeric: tabular-nums;
    font-size: 0.72rem; font-weight: 600; color: var(--accent-floor); padding: 0.1rem 0.45rem; border-radius: 999px;
    background: color-mix(in srgb, var(--accent-floor) 14%, var(--cv-surface)); }
.cv-collrow .cv-coll__delta { flex: none; }
.cv-collrow .cv-coll__delta:empty { display: none; }

/* ---- Crown-jewel featured axie showcase — the most valuable axie in each tile (artwork + estimate) ---- */
.cv-feature { margin-top: 0.85rem; padding-top: 0.85rem; flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; gap: 0; color: inherit; text-decoration: none;
    border-top: 1px solid color-mix(in srgb, var(--cv-accent) 22%, var(--cv-line-soft)); }
.cv-feature__eyebrow { flex: none; display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 0.55rem;
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cv-ink-weak); }
.cv-feature__eyebrow i { color: var(--cv-accent); font-size: 0.95em; }
/* artwork + price plate form ONE card: media is rounded on top only, the plate flushes onto its bottom edge */
.cv-feature__media { position: relative; flex: 1 1 auto; min-height: 132px;
    border-radius: 12px 12px 0 0; overflow: hidden; display: grid; place-items: center;
    border: 1px solid var(--cv-line);
    background: radial-gradient(125% 120% at 50% -8%,
        color-mix(in srgb, var(--cv-accent) 22%, var(--cv-surface)) 0%, var(--cv-surface) 70%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cv-accent) 20%, transparent);
    transition: border-color .18s ease; }
.cv-feature__img { width: 100%; height: 100%; max-height: 230px; object-fit: contain; padding: 10px; display: block;
    transition: transform .28s cubic-bezier(.2, .7, .2, 1); }
.cv-feature:hover .cv-feature__media,
.cv-feature:hover .cv-feature__price { border-color: color-mix(in srgb, var(--cv-accent) 45%, var(--cv-line)); }
.cv-feature:hover .cv-feature__img { transform: scale(1.045); }
/* class icon + collectible badges (top-left) and genome (top-right) reuse the grid card's .cv-media-left
   / .cv-class / .cv-badges / .cv-genome overlays, so the showcase matches a card at a glance. */
.cv-feature__id { position: absolute; right: 8px; top: 8px; z-index: 2;
    font-family: var(--cv-mono); font-weight: 600; font-size: 0.78rem; letter-spacing: -0.01em; color: var(--cv-ink);
    padding: 3px 8px; border-radius: 8px; background: color-mix(in srgb, var(--cv-surface) 80%, transparent);
    border: 1px solid var(--cv-line); backdrop-filter: blur(6px); }
/* Price plate — flush under the artwork (accent-tinted, rounded bottom). The "Top axie · est." label makes
   this read as THIS axie's estimate, never the bucket "Total value" at the top of the tile. */
.cv-feature__price { flex: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.7rem 0.55rem;
    border: 1px solid var(--cv-line); border-top: none; border-radius: 0 0 12px 12px;
    background: color-mix(in srgb, var(--cv-accent) 10%, var(--cv-surface)); transition: border-color .18s ease; }
.cv-feature__price-lab { flex: none; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--cv-ink-weak); }
.cv-feature__val { font-family: var(--cv-mono); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.025em;
    line-height: 1; color: var(--cv-ink); font-variant-numeric: tabular-nums; }
.cv-feature__eth { margin-left: auto; font-family: var(--cv-mono); font-size: 0.8rem; color: var(--cv-ink-weak); font-variant-numeric: tabular-nums; }
/* Empty-bucket placeholder — fills a Collectible/Ordinary tile that has no axies, so it reads as an
   intentional "nothing here" state (accent-tinted dashed box) instead of a blank void. It inherits the
   tile's --cv-accent (floor / listed). */
.cv-split__empty { flex: 1 1 auto; min-height: 132px; margin-top: 0.85rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem;
    padding: 1rem 1.1rem; text-align: center; border-radius: 12px;
    border: 1px dashed color-mix(in srgb, var(--cv-accent) 30%, var(--cv-line));
    background: color-mix(in srgb, var(--cv-accent) 4%, transparent); color: var(--cv-ink-weak); }
.cv-split__empty i { font-size: 1.5rem; opacity: 0.5; color: var(--cv-accent); margin-bottom: 0.1rem; }
.cv-split__empty-lab { font-size: 0.86rem; font-weight: 600; color: var(--cv-ink-soft); }
.cv-split__empty-sub { font-size: 0.72rem; line-height: 1.35; max-width: 26ch; }
/* Transparent wrapper around the Ordinary tile's "most valuable" showcase (a JS swap target). display:contents
   removes its own box so the .cv-feature / .cv-split__empty inside stays a direct flex child of the tile. */
.cv-split__feature { display: contents; }
/* A hero with no "by collection" list (a wallet with no collectibles) centres the total so the column
   doesn't leave a void beneath it. */
.cv-share .cv-hero--bare { justify-content: center; }
/* On phones the split tiles stack so each crown-jewel showcase gets full width (this restates the intent of
   the earlier max-560 rule, which the base .cv-split declaration overrode by source order). */
@media screen and (max-width: 560px) { .cv-split { grid-template-columns: 1fr; } }

/* ---------- Section heading ---------- */
.cv-sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    margin: 2.2rem 0 1rem; }
.cv-sechead__title { position: relative; display: inline-flex; align-items: center; gap: 0.6rem;
    font-family: var(--cv-display); font-weight: 700; font-size: 1.32rem; color: var(--cv-ink); letter-spacing: -0.015em; }
/* editorial accent marker — a small gradient tick before the section title (Collectible floor → brand) */
.cv-sechead__title::before { content: ""; width: 4px; height: 1.05em; border-radius: 999px; flex: none;
    background: linear-gradient(180deg, var(--accent-floor), var(--cv-brand)); }
.cv-sechead__count { font-family: var(--cv-mono); font-size: 0.85rem; font-weight: 600; color: var(--cv-ink-weak);
    padding: 0.2rem 0.6rem; border-radius: 999px; border: 1px solid var(--cv-line); }
.cv-empty { color: var(--cv-ink-weak); padding: 2rem; text-align: center; }

/* ---------- Themed scrollbars — thin, rounded, theme-aware (this page's viewport + its scroll panes:
   the history drawer, filter sidebar, custom dropdowns). Chromium/Safari use the ::-webkit-scrollbar
   pseudos; Firefox uses the standard properties via @supports so the two don't disable each other.
   Inline-scoped, so it only affects this page. ---------- */
html::-webkit-scrollbar, body::-webkit-scrollbar, .cv-page *::-webkit-scrollbar { width: 12px; height: 12px; }
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, .cv-page *::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, .cv-page *::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--cv-ink-weak) 32%, transparent);
    border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, .cv-page *::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--cv-ink-weak) 55%, transparent); background-clip: padding-box; }
html::-webkit-scrollbar-corner, body::-webkit-scrollbar-corner, .cv-page *::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) {
    html, body, .cv-page * { scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--cv-ink-weak) 42%, transparent) transparent; }
}

/* ---------- Card grid (dense, scannable) ---------- */
.cv-grid { display: grid; gap: 0.85rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.cv-card {
    --cv-accent: var(--accent-muted);
    position: relative;
    container-type: inline-size; /* lets the estimate adapt to the CARD width (docked 3-up cards get narrow) */
    display: flex; flex-direction: column;
    border-radius: var(--cv-radius);
    padding-bottom: 0.9rem;
    background: var(--cv-surface);
    border: 1px solid var(--cv-line);
    overflow: hidden;
    color: var(--cv-ink-soft); text-decoration: none; /* header + "Cheapest listed" widget are the links */
    transition: border-color .2s ease;
}
.cv-card:hover { border-color: color-mix(in srgb, var(--cv-ink) 32%, transparent); }
.cv-card.is-floor    { --cv-accent: var(--accent-floor); }
.cv-card.is-listed   { --cv-accent: var(--accent-listed); }
.cv-card.is-materials{ --cv-accent: var(--accent-materials); }
.cv-card.is-history  { --cv-accent: var(--accent-history); }

.cv-card__media { position: relative;
    display: block; color: inherit; text-decoration: none; cursor: pointer; /* header is the marketplace link */ }
.cv-card__imgwrap { position: relative; border-radius: 13px; overflow: hidden;
    background: var(--cv-surface-2); }
.cv-card__img { width: 100%; height: 175px; object-fit: contain; display: block; padding: 8px; }
.cv-card__id {
    position: absolute; right: 8px; top: 8px; z-index: 2;
    font-family: var(--cv-mono); font-weight: 600; font-size: 0.8rem; letter-spacing: -0.01em;
    color: var(--cv-ink); padding: 3px 8px; border-radius: 8px;
    background: color-mix(in srgb, var(--cv-surface) 78%, transparent);
    border: 1px solid var(--cv-line); backdrop-filter: blur(6px);
}
/* media left column: class icon on top, then collection badges (mirrors the morph-finder overlay stack) */
.cv-media-left { position: absolute; top: 8px; left: 8px; z-index: 2;
    display: flex; flex-direction: column; gap: 6px; align-items: flex-start; pointer-events: none; }
.cv-media-left > * { pointer-events: auto; }
.cv-class { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none;
    background: color-mix(in srgb, var(--cv-surface) 80%, transparent);
    border: 1px solid var(--cv-line); backdrop-filter: blur(6px); box-shadow: 0 2px 6px -2px rgba(0,0,0,0.45); }
.cv-class img { width: 17px; height: 17px; object-fit: contain; }
/* collection badges — compact circular stack (mirrors the morph-finder card) */
.cv-badges { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.cv-badges .badge-collection { padding: 3px 7px; gap: 4px; box-shadow: 0 2px 6px -2px rgba(0,0,0,0.45); }
.cv-badges .badge-icon-wrapper { width: 14px; height: 14px; }
.cv-badges .badge-icon-wrapper img { width: 100%; height: 100%; object-fit: contain; }
.cv-badges .badge-number { font-size: 0.66rem; line-height: 1; color: #fff; }
/* icon-only collections (maxParts == 1) collapse to a clean circle */
.cv-badges .badge-collection-container:has(.badge-icon-wrapper):not(:has(.badge-number)) { padding: 0; }
.cv-badges .badge-collection-container:has(.badge-icon-wrapper):not(:has(.badge-number)) .badge-collection { padding: 5px; }

/* ---------- Estimate — the card's headline figure ---------- */
.cv-lead { padding: 0.7rem 0.75rem 0; display: flex; flex-direction: column; gap: 0.5rem; }

.cv-est {
    position: relative; overflow: hidden; cursor: help;
    border-radius: 10px; padding: 0.6rem 0.7rem;
    background: var(--cv-surface-2);
    border: 1px solid var(--cv-line);
    transition: border-color .16s ease;
}
.cv-est.tooltip-trigger:hover, .cv-est.tooltip-trigger:focus-visible { outline: none;
    border-color: color-mix(in srgb, var(--cv-brand) 50%, var(--cv-line)); }
.cv-est__head { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; row-gap: 0.25rem; }
.cv-est__eyebrow { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--cv-ink-weak); }
.cv-est__fiat { font-family: var(--cv-mono); font-weight: 600; font-size: 1.3rem; line-height: 1.04;
    letter-spacing: -0.035em; color: var(--cv-ink); font-variant-numeric: tabular-nums; margin-top: 0.1rem; }
.cv-est__fiat.is-na { font-size: 0.95rem; color: var(--cv-ink-weak); }
.cv-est__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-top: 0.15rem; }
.cv-est__crypto { font-family: var(--cv-mono); font-size: 0.8rem; color: var(--cv-ink-weak); font-variant-numeric: tabular-nums; }
.cv-est__hint { display: inline-flex; align-items: center; gap: 4px; flex: none;
    font-size: 0.58rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--cv-accent); opacity: 0.72; }
.cv-est__hint i { font-size: 0.95em; }
.cv-est.tooltip-trigger:hover .cv-est__hint { opacity: 1; }

/* method/basis — a constant "Based on:" label sitting next to a method-accented value token (separate tags) */
.cv-method__lab { /* neutral, dimmed micro mono label — never method-tinted */
    font-family: var(--cv-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--cv-ink-weak); white-space: nowrap; }
.cv-method__val { /* the basis word — a quiet neutral chip; the method colour survives only as the small dot */
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
    padding: 0.16rem 0.4rem; border-radius: 6px;
    color: var(--cv-ink-soft);
    background: var(--cv-surface);
    border: 1px solid var(--cv-line);
}
.cv-method__val::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cv-accent); }

/* Ethereum mark — replaces the "ETH" text on the estimate value, the crypto line and the breakdown total */
.cv-eth { color: #627eea; }
.theme-dark .cv-eth { color: #8aa0f0; }
.cv-est__fiat .cv-eth { font-size: 0.7em; margin-left: 0.14em; vertical-align: baseline; }
.cv-est__crypto .cv-eth { font-size: 0.95em; }
.cv-bd__total-v .cv-eth, .cv-bd__sub .cv-eth { font-size: 0.9em; }

/* Assessment widgets — shared block treatment for "Cheapest listed" (current market) and
   "Cleared price" (trading history). Each tints by its own --w-accent and opens a detail tooltip. */
.cv-sold, .cv-listed { display: flex; flex-direction: column; gap: 0.35rem;
    padding: 0.5rem 0.6rem; border-radius: 11px; cursor: help;
    border: 1px solid var(--cv-line);
    background: var(--cv-surface-2);
    transition: border-color .15s ease, background .15s ease; }
.cv-sold:hover, .cv-sold:focus-visible,
.cv-listed:hover, .cv-listed:focus-visible { outline: none;
    border-color: color-mix(in srgb, var(--w-accent) 42%, transparent);
    background: color-mix(in srgb, var(--w-accent) 9%, var(--cv-surface)); }
.cv-listed { --w-accent: var(--accent-listed); cursor: pointer; color: inherit; text-decoration: none; /* clickable → the comparable listing */ }
.cv-sold   { --w-accent: var(--accent-history); }

/* Empty-state placeholder for a missing listing / sales widget — keeps the card body uniform (no blank
   gap) and reads as "no data" via a dashed border + muted ink, vs. the solid-bordered real widgets. */
.cv-naw { display: flex; align-items: center; min-height: 2.35rem; padding: 0.5rem 0.6rem; border-radius: 11px;
    border: 1px dashed var(--cv-line); background: color-mix(in srgb, var(--cv-ink-weak) 4%, transparent); }
.cv-naw__k { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 600;
    color: var(--cv-ink-weak); }
.cv-naw__k i { opacity: 0.5; font-size: 0.85em; }
.cv-naw.is-listed  .cv-naw__k i { color: var(--accent-listed); }
.cv-naw.is-history .cv-naw__k i { color: var(--accent-history); }
.cv-sold__top, .cv-listed__top { display: flex; align-items: center; gap: 0.45rem; }
.cv-sold__k, .cv-listed__k { display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--cv-mono); font-size: 0.66rem; font-weight: 600; color: var(--cv-ink-weak); white-space: nowrap; }
.cv-sold__k i, .cv-listed__k i { color: var(--w-accent); }
.cv-sold__v, .cv-listed__v { margin-left: auto; font-family: var(--cv-mono); font-weight: 600; font-size: 0.96rem;
    color: var(--cv-ink); font-variant-numeric: tabular-nums; }

/* market-liquidity / depth meter — fill width = score, colour = the widget's own accent */
.cv-liq { display: flex; align-items: center; gap: 0.5rem; }
.cv-liq__lab { font-family: var(--cv-mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--cv-ink-weak); white-space: nowrap; }
.cv-liq__track { flex: 1 1 auto; height: 5px; border-radius: 999px; overflow: hidden;
    background: color-mix(in srgb, var(--cv-ink-weak) 18%, transparent); }
.cv-liq__fill { display: block; height: 100%; border-radius: 999px; min-width: 3px;
    background: var(--w-accent, var(--accent-history)); }
.cv-liq__n { font-family: var(--cv-mono); font-variant-numeric: tabular-nums; font-size: 0.68rem;
    font-weight: 600; color: var(--cv-ink-soft); white-space: nowrap; }
.cv-liq--lg { margin: 0.1rem 0 0.55rem; }
.cv-liq--lg .cv-liq__track { height: 7px; }
.cv-liq__pct { font-family: var(--cv-mono); font-variant-numeric: tabular-nums; font-size: 0.78rem;
    font-weight: 600; color: var(--cv-ink); white-space: nowrap; }
.cv-liq__pct-u { color: var(--cv-ink-weak); font-size: 0.78em; }

/* trading-history tooltip */
.cv-sales .cv-tip__panel { width: clamp(216px, 24vw, 258px); }
.cv-sales__title { display: inline-flex; align-items: center; gap: 0.36rem; font-size: 0.84rem; }
.cv-sales__title i { color: var(--cv-accent); font-size: 0.82em; }

/* estimate-breakdown tooltip — what the headline number is made of */
.cv-est-tip .cv-tip__panel { width: clamp(218px, 24vw, 264px); }
.cv-est-tip__title { display: inline-flex; align-items: center; gap: 0.36rem; font-size: 0.84rem; }
.cv-est-tip__title i { color: var(--cv-accent); font-size: 0.85em; }
.cv-bd__list { list-style: none; margin: 0.1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.22rem; }
.cv-bd__row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; }
.cv-bd__label { display: flex; flex-direction: column; line-height: 1.2; font-size: 0.78rem; color: var(--cv-ink-soft); }
.cv-bd__detail { font-size: 0.64rem; color: var(--cv-ink-weak); text-transform: capitalize; }
.cv-bd__val { font-family: var(--cv-mono); font-variant-numeric: tabular-nums; font-size: 0.78rem;
    color: var(--cv-ink); white-space: nowrap; }
.cv-bd__val .cv-bd__op { color: var(--cv-ink-weak); margin-right: 1px; }
.cv-bd__total { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem;
    margin-top: 0.5rem; padding-top: 0.5rem;
    border-top: 1px solid color-mix(in srgb, var(--cv-accent) 20%, var(--cv-line)); }
.cv-bd__total-k { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--cv-accent); }
.cv-bd__total-v { font-family: var(--cv-mono); font-variant-numeric: tabular-nums; font-weight: 600;
    font-size: 1.08rem; color: var(--cv-ink); }
.cv-bd__sub { text-align: right; font-family: var(--cv-mono); font-variant-numeric: tabular-nums;
    font-size: 0.7rem; color: var(--cv-ink-weak); margin-top: 1px; }

/* comparable-listing tooltip */
.cv-listed-tip .cv-tip__panel { width: clamp(216px, 24vw, 260px); }
.cv-listed-tip__title { display: inline-flex; align-items: center; gap: 0.36rem; font-size: 0.84rem; }
.cv-listed-tip__title i { color: var(--cv-accent); font-size: 0.85em; }

/* ---------- Genome — level/breed pill + vertical per-part evolution bar, right edge (morph-finder style) ---------- */
.cv-genome { position: absolute; right: 8px; top: 42px; z-index: 2;
    display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.cv-genome__stat { display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--cv-mono); font-size: 0.72rem; font-weight: 600; color: var(--cv-ink);
    padding: 3px 8px; border-radius: 8px; white-space: nowrap; letter-spacing: -0.01em;
    background: color-mix(in srgb, var(--cv-surface) 80%, transparent);
    border: 1px solid var(--cv-line); backdrop-filter: blur(6px); box-shadow: 0 2px 6px -2px rgba(0,0,0,0.4); }
.cv-genome__stat i { color: var(--cv-ink-weak); font-size: 0.9em; }
.cv-evobar { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; width: 24px;
    padding: 6px 4px; border-radius: 8px;
    background: color-mix(in srgb, var(--cv-surface) 70%, transparent);
    border: 1px solid var(--cv-line); backdrop-filter: blur(4px); }
.cv-evobar__pip { height: 6px; border-radius: 2px 1px 1px 2px; background: var(--evo-c); transition: width .12s ease; }
.cv-evobar__pip.cv-evo-1 { width: 34%; }
.cv-evobar__pip.cv-evo-2 { width: 68%; }
.cv-evobar__pip.cv-evo-3 { width: 100%; }
/* evolution-stage colours — shared by the evolution bar and the parts-tooltip stage badges */
.cv-evo-1 { --evo-c: color-mix(in srgb, var(--cv-ink-weak) 70%, transparent); }
.cv-evo-2 { --evo-c: #5f9079; }
.cv-evo-3 { --evo-c: #9c8763; }
.theme-dark .cv-evo-2 { --evo-c: #6fa890; }
.theme-dark .cv-evo-3 { --evo-c: #b59b6f; }

.cv-card__stats { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem; padding: 0.65rem 0.75rem 0; }
.cv-stat {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--cv-mono); font-size: 0.74rem; font-weight: 500;
    padding: 0.22rem 0.5rem; border-radius: 8px;
    color: var(--cv-ink-soft);
    background: var(--cv-line-soft);
    border: 1px solid var(--cv-line-soft);
}
.cv-stat i { color: var(--cv-ink-weak); font-size: 0.72rem; }
.cv-stat.is-trigger { cursor: help; }
.cv-stat.is-trigger:hover { border-color: var(--cv-line); }

/* ---------- Tooltips (reuse common.css .tooltip positioning) ---------- */
.cv-tip { z-index: 30; animation: cvTipIn .15s cubic-bezier(.2, .7, .2, 1) both; transform-origin: top center; }
@keyframes cvTipIn { from { opacity: 0; transform: translateY(3px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cv-tip { animation: none; } }
/* panels render outside the card now, so they carry their own method accent */
.cv-tip__panel { --cv-accent: var(--accent-muted); }
.cv-tip__panel.is-floor     { --cv-accent: var(--accent-floor); }
.cv-tip__panel.is-listed    { --cv-accent: var(--accent-listed); }
.cv-tip__panel.is-materials { --cv-accent: var(--accent-materials); }
.cv-tip__panel.is-history   { --cv-accent: var(--accent-history); }
.cv-tip__panel {
    position: relative;
    width: clamp(210px, 22vw, 248px);
    font-family: var(--cv-display);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--cv-accent) 7%, transparent), transparent 40%),
        var(--bulma-background-tooltip, var(--cv-surface));
    color: var(--cv-ink-soft);
    border: 1px solid color-mix(in srgb, var(--cv-ink) 15%, var(--cv-line));
    border-radius: 12px; padding: 0.72rem 0.8rem;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.22),
        0 16px 34px -14px rgba(0, 0, 0, 0.55),
        0 0 0 1px color-mix(in srgb, var(--cv-accent) 10%, transparent);
}
/* a centred, fading accent hairline at the very top — ties the tooltip to its valuation-method colour */
.cv-tip__panel::before {
    content: ""; position: absolute; left: 14px; right: 14px; top: -1px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, transparent,
        color-mix(in srgb, var(--cv-accent) 68%, transparent), transparent);
}
/* Light theme: the default --bulma-background-tooltip is a warm cream that clashes with the cool steel
   palette — use the clean card surface + a softer, cooler shadow, keeping the method-accent wash. */
.theme-light .cv-tip__panel {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--cv-accent) 9%, transparent), transparent 42%),
        var(--cv-surface);
    border-color: color-mix(in srgb, var(--cv-ink) 12%, var(--cv-line));
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.08),
        0 18px 36px -16px rgba(15, 23, 42, 0.22),
        0 0 0 1px color-mix(in srgb, var(--cv-accent) 12%, transparent);
}
.cv-tip__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    font-family: var(--cv-mono); font-weight: 600; color: var(--cv-ink);
    margin-bottom: 0.55rem; padding-bottom: 0.5rem;
    border-bottom: 1px solid color-mix(in srgb, var(--cv-accent) 16%, var(--cv-line-soft)); }
.cv-tip__method { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    padding: 0.16rem 0.45rem; border-radius: 999px;
    color: color-mix(in srgb, var(--cv-accent) 62%, var(--cv-ink-soft));
    background: color-mix(in srgb, var(--cv-accent) 10%, var(--cv-surface-2));
    border: 1px solid color-mix(in srgb, var(--cv-accent) 26%, var(--cv-line)); }
/* tooltip title icons stay neutral (the muted method accent reads on the dot/chip, not the icon) */
.cv-tip__head i, .cv-est-tip__title i, .cv-listed-tip__title i,
.cv-sales__title i, .cv-mat .cv-tip__head i { color: var(--cv-ink-weak); }
.cv-tip__expl { font-size: 0.76rem; color: var(--cv-ink-weak); line-height: 1.35; margin-bottom: 0.55rem; }
.cv-tip__row { display: flex; justify-content: space-between; gap: 0.8rem; font-size: 0.78rem; padding: 0.1rem 0; }
.cv-tip__row > span:first-child { color: var(--cv-ink-weak); }
.cv-tip__row > span:last-child { color: var(--cv-ink); font-family: var(--cv-mono); font-variant-numeric: tabular-nums; }
.cv-tip__cap { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--cv-ink-weak); margin: 0.1rem 0 0.25rem; }

/* ---------- Memento materials tooltip — per-class artwork yield ---------- */
.cv-mat .cv-tip__panel { width: clamp(206px, 62vw, 240px); padding: 0.6rem 0.65rem; }
.cv-mat .cv-tip__head { margin-bottom: 0.4rem; }
.cv-mat .cv-tip__expl { margin-bottom: 0.45rem; }
.cv-mat__title { display: inline-flex; align-items: center; gap: 0.34rem; font-size: 0.84rem; }
.cv-mat .cv-tip__head i { color: var(--cv-accent); font-size: 0.78em; }

.cv-mat__list { list-style: none; margin: 0.05rem 0 0; padding: 0;
    display: flex; flex-direction: column; gap: 0.26rem; }
.cv-mat__row { display: flex; align-items: center; gap: 0.5rem;
    padding: 0.22rem 0.34rem 0.22rem 0.24rem; border-radius: 9px;
    background: color-mix(in srgb, var(--mat, var(--cv-accent)) 8%, var(--cv-surface-2));
    border: 1px solid color-mix(in srgb, var(--mat, var(--cv-accent)) 24%, transparent);
    transition: transform .14s ease, border-color .14s ease; }
.cv-mat__row:hover { transform: translateX(2px);
    border-color: color-mix(in srgb, var(--mat, var(--cv-accent)) 55%, transparent); }

.cv-mat__icon { position: relative; flex: none; width: 28px; height: 28px;
    border-radius: 8px; overflow: hidden; display: grid; place-items: center;
    background:
        radial-gradient(130% 130% at 50% 14%, color-mix(in srgb, var(--mat, var(--cv-accent)) 34%, transparent),
            color-mix(in srgb, var(--mat, var(--cv-accent)) 9%, var(--cv-surface)));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mat, var(--cv-accent)) 38%, transparent); }
.cv-mat__icon img { position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: contain; padding: 2px;
    filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--mat, var(--cv-accent)) 40%, transparent)); }
.cv-mat__letter { font-family: var(--cv-display); font-weight: 800; font-size: 0.74rem; line-height: 1;
    text-transform: uppercase; color: color-mix(in srgb, var(--mat, var(--cv-accent)) 78%, var(--cv-ink)); }
/* artwork present → hide the fallback initial; onerror removes <img>, revealing it again */
.cv-mat__icon:has(img) .cv-mat__letter { opacity: 0; }

.cv-mat__name { flex: 1 1 auto; min-width: 0; text-transform: capitalize;
    font-size: 0.76rem; font-weight: 600; letter-spacing: -0.01em; color: var(--cv-ink-soft);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-mat__qty { flex: none; font-family: var(--cv-mono); font-variant-numeric: tabular-nums;
    font-size: 0.76rem; font-weight: 600; color: var(--cv-ink); }
.cv-mat__dash { color: var(--cv-ink-weak); margin: 0 3px; font-weight: 400; }

.cv-mat__totals { margin-top: 0.5rem; padding-top: 0.45rem;
    border-top: 1px solid color-mix(in srgb, var(--cv-accent) 20%, var(--cv-line)); }
.cv-mat__total { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.cv-mat__total-k { font-size: 0.63rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--cv-ink-weak); }
.cv-mat__total-v { font-family: var(--cv-mono); font-variant-numeric: tabular-nums; font-weight: 600;
    font-size: 1.02rem; letter-spacing: -0.02em; color: var(--cv-ink); }
.cv-mat__range { font-family: var(--cv-mono); font-variant-numeric: tabular-nums; font-size: 0.68rem;
    color: var(--cv-ink-weak); text-align: right; margin-top: 1px; }

/* class identity tints (drive each memento row's accent) */
.mat-beast   { --mat: #ff9a3d; }
.mat-aquatic { --mat: #38bdf8; }
.mat-plant   { --mat: #7dd13b; }
.mat-bug     { --mat: #ff6b5e; }
.mat-bird    { --mat: #ff8fb1; }
.mat-reptile { --mat: #c07ce8; }
.mat-mech    { --mat: #9aa7b8; }
.mat-dawn    { --mat: #b9c0ec; }
.mat-dusk    { --mat: #46a0b8; }

@media screen and (max-width: 860px) {
    .cv-summary { grid-template-columns: 1fr; }
    .cv-hero { border-right: none; border-bottom: 1px solid var(--cv-line-soft); padding: 0 0 1rem; }
}
@media screen and (max-width: 480px) {
    .cv-grid { grid-template-columns: 1fr; }
}

/* Trading-history chart (Chart.js) — bars = monthly sales volume, line = monthly average price.
   Fixed-height box so the canvas has a size to fill; colours are set in salesChart.js. */
.cv-sales-chart { position: relative; height: 6.4rem; margin: 0.15rem 0 0.5rem; }
.cv-sales-chart canvas { display: block; }
.cv-chart-legend { display: inline-flex; align-items: center; gap: 4px; text-transform: none; letter-spacing: 0; font-weight: 600; }
.cv-chart-key { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
.cv-chart-key.is-vol { background: color-mix(in srgb, var(--accent-history) 32%, transparent); }
.cv-chart-key.is-price { width: 10px; height: 0; border-radius: 0; border-top: 2px solid var(--accent-history); }

/* ===================== Additions: head legend · breakdown · controls · pager ===================== */

/* ---------- "How values are estimated" legend (replaces the verbose per-card tooltips) ---------- */
.cv-legend { flex: none; max-width: min(520px, 100%); }
.cv-legend__toggle {
    list-style: none; cursor: pointer; user-select: none;
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.82rem; font-weight: 600; color: var(--cv-ink-soft);
    padding: 0.5rem 0.85rem; border-radius: 999px;
    background: var(--cv-surface-2);
    border: 1px solid var(--cv-line);
    transition: border-color .15s ease, background .15s ease;
}
.cv-legend__toggle:hover { border-color: color-mix(in srgb, var(--accent-listed) 45%, transparent); }
.cv-legend__toggle > i:first-child { color: var(--cv-ink-weak); }
.cv-legend__chev { font-size: 0.7rem; color: var(--cv-ink-weak); transition: transform .2s ease; margin-left: 0.1rem; }
.cv-legend.is-open .cv-legend__chev { transform: rotate(180deg); }
/* click-triggered floating popover (position:fixed, placed by collectionValue.js; re-parented to .cv-page so
   it isn't trapped under later sections in the stacking order yet keeps the page's --cv-* tokens) — no layout shift */
.cv-legend__panel {
    position: fixed; z-index: 120; width: min(520px, calc(100vw - 2rem));
    padding: 1rem 1.1rem; border-radius: var(--cv-radius);
    background: var(--cv-surface); border: 1px solid var(--cv-line); box-shadow: 0 22px 50px -14px rgba(0, 0, 0, 0.5);
    animation: cvFade .18s ease both;
}
.cv-legend__panel[hidden] { display: none; }
@keyframes cvFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.cv-legend__intro { font-size: 0.82rem; line-height: 1.5; color: var(--cv-ink-weak); margin: 0 0 0.7rem; }
.cv-legend__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.cv-legend__item { display: flex; align-items: flex-start; gap: 0.6rem; }
.cv-legend__dot { flex: none; width: 9px; height: 9px; margin-top: 0.32rem; border-radius: 50%;
    background: var(--accent-muted); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-muted) 22%, transparent); }
.cv-legend__item.is-listed    .cv-legend__dot { background: var(--accent-listed);    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-listed) 22%, transparent); }
.cv-legend__item.is-history   .cv-legend__dot { background: var(--accent-history);   box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-history) 22%, transparent); }
.cv-legend__item.is-floor     .cv-legend__dot { background: var(--accent-floor);     box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-floor) 22%, transparent); }
.cv-legend__item.is-materials .cv-legend__dot { background: var(--accent-materials); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-materials) 22%, transparent); }
.cv-legend__item.is-egg       .cv-legend__dot { background: var(--accent-egg);       box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-egg) 22%, transparent); }
.cv-legend__item div { display: flex; flex-direction: column; line-height: 1.32; }
.cv-legend__item b { font-size: 0.8rem; font-weight: 600; color: var(--cv-ink); }
.cv-legend__item span:last-child { font-size: 0.76rem; color: var(--cv-ink-weak); }

/* Per-collection stat chip in the share card (informational, non-interactive). */
.cv-coll {
    display: inline-flex; align-items: center; gap: 0.55rem; cursor: default;
    padding: 0.45rem 0.5rem 0.45rem 0.5rem; border-radius: 13px; text-align: left;
    background: color-mix(in srgb, var(--accent-floor) 7%, var(--cv-surface));
    border: 1px solid color-mix(in srgb, var(--accent-floor) 22%, var(--cv-line));
    color: var(--cv-ink-soft); }
/* reuse the card-header collection badge (its per-collection coloured background) as the chip icon */
.cv-coll .badge-collection { flex: none; padding: 6px; border-radius: 9px; gap: 0; }
.cv-coll .badge-icon-wrapper { width: 18px; height: 18px; }
.cv-coll .badge-icon-wrapper img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cv-coll__val { font-family: var(--cv-mono); font-size: 0.82rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--cv-ink); }
.cv-coll__count { font-family: var(--cv-mono); font-variant-numeric: tabular-nums; font-size: 0.78rem; font-weight: 600;
    color: var(--accent-floor); padding: 0.12rem 0.5rem; border-radius: 999px; margin-left: 0.15rem;
    background: color-mix(in srgb, var(--accent-floor) 14%, var(--cv-surface)); }

/* ===================== Filter sidebar — docked (wide) / off-canvas drawer (narrow) ===================== */
.cv-shell { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: start; margin-top: 1.4rem; }
.cv-main { min-width: 0; }
.cv-main .cv-sechead { margin-top: 0; }

/* the sidebar panel */
.cv-sidebar {
    border-radius: var(--cv-radius); border: 1px solid var(--cv-line);
    background: var(--cv-surface);
    overflow: hidden;
}
.cv-sidebar__head { display: flex; align-items: center; gap: 0.6rem;
    padding: 0.85rem 1rem; border-bottom: 1px solid var(--cv-line);
    background: var(--cv-surface-2); }
.cv-sidebar__title { display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: var(--cv-display); font-weight: 700; font-size: 0.98rem; color: var(--cv-ink); letter-spacing: -0.01em; }
.cv-sidebar__title i { color: var(--cv-ink-weak); }
.cv-sidebar__count { font-family: var(--cv-mono); font-size: 0.7rem; font-weight: 600; color: #fff;
    min-width: 1.25rem; height: 1.25rem; padding: 0 0.35rem; border-radius: 999px;
    display: inline-grid; place-items: center; background: var(--accent-listed); }
.cv-sidebar__count[hidden] { display: none; }
.cv-sidebar__close { display: none; margin-left: auto; cursor: pointer; border: 0; background: transparent;
    color: var(--cv-ink-weak); font-size: 1.15rem; line-height: 1; padding: 0.25rem 0.4rem; border-radius: 8px; }
.cv-sidebar__close:hover { color: var(--cv-ink); background: var(--cv-line-soft); }

/* the form — a vertical stack of labelled fields */
.cv-controls { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; margin: 0; }
.cv-fgroup { display: flex; flex-direction: column; gap: 0.7rem; }
.cv-fgroup + .cv-fgroup { padding-top: 0.95rem; border-top: 1px solid var(--cv-line-soft); }
.cv-fgroup__lab { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cv-ink-weak); }

.cv-field { display: flex; flex-direction: column; gap: 0.34rem; min-width: 0; }
.cv-field__lab { display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; color: var(--cv-ink-weak); }
.cv-field__lab i { color: var(--cv-ink-weak); font-size: 0.82em; width: 0.9rem; text-align: center; }

/* ---- custom dropdown (.cv-select) — replaces native <select> so the option list is fully themed ---- */
.cv-select { position: relative; }
.cv-select__trigger {
    width: 100%; display: flex; align-items: center; gap: 0.5rem; cursor: pointer; text-align: left;
    border-radius: 10px; border: 1px solid var(--cv-line); background: var(--cv-surface);
    box-shadow: inset 0 1px 0 var(--cv-line-soft);
    font-family: var(--cv-display); font-size: 0.86rem; font-weight: 600; color: var(--cv-ink);
    padding: 0.5rem 0.7rem; transition: border-color .15s ease, box-shadow .15s ease; }
.cv-select__trigger:hover { border-color: color-mix(in srgb, var(--accent-listed) 45%, var(--cv-line)); }
.cv-select__value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-select__chev { flex: none; font-size: 0.7rem; color: var(--cv-ink-weak); transition: transform .2s ease; }
.cv-select.is-open .cv-select__trigger {
    border-color: color-mix(in srgb, var(--accent-listed) 60%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-listed) 16%, transparent); }
.cv-select.is-open .cv-select__chev { transform: rotate(180deg); color: var(--accent-listed); }
.cv-select__trigger:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent-listed) 55%, transparent); outline-offset: 1px; }

/* the floating, themed option list (position:fixed → escapes the sidebar's overflow clip; placed by JS) */
.cv-select__menu {
    position: fixed; z-index: 90; min-width: 9rem; max-height: 16rem; overflow-y: auto;
    padding: 0.35rem; border-radius: 12px;
    background: var(--cv-surface); border: 1px solid var(--cv-line);
    box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.5);
    display: flex; flex-direction: column; gap: 2px;
    animation: cvSelectIn .14s ease both; }
.cv-select__menu[hidden] { display: none; }
@keyframes cvSelectIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.cv-select__opt {
    display: flex; align-items: center; gap: 0.5rem; cursor: pointer; text-align: left; width: 100%;
    padding: 0.5rem 0.6rem; border: 0; border-radius: 8px; background: transparent;
    font-family: var(--cv-display); font-size: 0.85rem; font-weight: 500; color: var(--cv-ink-soft);
    transition: background .12s ease, color .12s ease; }
.cv-select__opt:hover, .cv-select__opt.is-active {
    background: color-mix(in srgb, var(--accent-listed) 13%, var(--cv-surface)); color: var(--cv-ink); }
.cv-select__opt.is-selected { color: var(--cv-ink); font-weight: 600; }
.cv-select__opt.is-selected::after { content: "✓"; margin-left: auto; font-weight: 700; color: var(--accent-listed); }
/* small group divider inside a menu (e.g. the "Collections" header in the merged Type/Collection dropdown) */
.cv-select__group { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--cv-ink-weak); padding: 0.55rem 0.6rem 0.25rem; margin-top: 0.15rem;
    border-top: 1px solid var(--cv-line-soft); }
/* leading class / collection icon (and an empty same-width spacer on the "All" option so labels line up) */
.cv-select__icon { flex: none; width: 18px; height: 18px; object-fit: contain; border-radius: 4px; }
.cv-select__value .cv-select__icon { width: 16px; height: 16px; } /* slightly smaller inside the trigger */

/* ---- range sliders (noUiSlider) ---- */
/* the accent lives on the field wrapper so both the slider track AND its readout pill pick it up */
.cv-field--slider { gap: 0.2rem; --sl-accent: var(--accent-listed); }
.cv-field--slider:has(.cv-slider--evo) { --sl-accent: var(--accent-history); }
.cv-slider__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.cv-slider__val { font-size: 0.78rem; font-weight: 600; color: var(--cv-ink); white-space: nowrap;
    padding: 0.1rem 0.45rem; border-radius: 999px;
    background: color-mix(in srgb, var(--sl-accent, var(--accent-listed)) 12%, var(--cv-surface));
    border: 1px solid color-mix(in srgb, var(--sl-accent, var(--accent-listed)) 28%, transparent); }
.cv-slider { margin: 1.05rem 0.5rem 0.55rem; }

/* noUiSlider theme overrides — scoped to .cv-slider */
.cv-slider.noUi-target { height: 5px; border: 0; border-radius: 999px; box-shadow: none;
    background: color-mix(in srgb, var(--cv-ink-weak) 24%, transparent); }
.cv-slider .noUi-connect { background: var(--sl-accent); }
.cv-slider .noUi-handle { width: 16px; height: 16px; right: -8px; top: -6px; border: 0; border-radius: 50%;
    background: var(--cv-surface); cursor: grab;
    box-shadow: 0 0 0 2px var(--sl-accent), 0 2px 6px -1px rgba(0, 0, 0, 0.45); }
.cv-slider .noUi-handle:hover { box-shadow: 0 0 0 2px var(--sl-accent),
    0 0 0 6px color-mix(in srgb, var(--sl-accent) 22%, transparent), 0 2px 6px -1px rgba(0, 0, 0, 0.45); }
.cv-slider .noUi-handle:active, .cv-slider .noUi-handle.noUi-active { cursor: grabbing;
    box-shadow: 0 0 0 2px var(--sl-accent),
    0 0 0 7px color-mix(in srgb, var(--sl-accent) 28%, transparent), 0 2px 8px -1px rgba(0, 0, 0, 0.5); }
.cv-slider .noUi-handle::before, .cv-slider .noUi-handle::after { display: none; }
.cv-slider .noUi-handle:focus-visible { outline: none;
    box-shadow: 0 0 0 2px var(--sl-accent), 0 0 0 7px color-mix(in srgb, var(--sl-accent) 30%, transparent); }

/* ---- Clear ---- */
.cv-reset { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; cursor: pointer; width: 100%;
    padding: 0.55rem 0.7rem; border-radius: 10px; font-size: 0.82rem; font-weight: 600;
    color: var(--cv-ink-soft); background: var(--cv-surface-2);
    border: 1px solid var(--cv-line); transition: background .15s ease; }
.cv-reset:hover { background: color-mix(in srgb, var(--cv-ink) 7%, var(--cv-surface)); }

/* ---- mobile "Filters" toggle (lives in the section head) ---- */
.cv-sechead__lead { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
.cv-filter-toggle { display: none; align-items: center; gap: 0.45rem; cursor: pointer;
    padding: 0.45rem 0.8rem; border-radius: 11px; font-size: 0.82rem; font-weight: 600; color: var(--cv-ink-soft);
    background: var(--cv-surface); border: 1px solid var(--cv-line); box-shadow: 0 1px 0 var(--cv-line-soft);
    transition: border-color .15s ease, color .15s ease; }
.cv-filter-toggle i { color: var(--cv-ink-weak); }
.cv-filter-toggle.is-active { border-color: color-mix(in srgb, var(--accent-listed) 50%, transparent); color: var(--cv-ink); }
.cv-filter-toggle__badge { font-family: var(--cv-mono); font-size: 0.68rem; font-weight: 700; color: #fff;
    min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem; border-radius: 999px; display: inline-grid; place-items: center;
    background: var(--accent-listed); }
.cv-filter-toggle__badge[hidden] { display: none; }

.cv-backdrop { display: none; }

/* ===== docked sidebar on wide screens ===== */
@media screen and (min-width: 1024px) {
    .cv-shell { grid-template-columns: 288px minmax(0, 1fr); gap: 1.5rem; }
    .cv-sidebar { position: sticky; top: 4.75rem; align-self: start;
        max-height: calc(100dvh - 5.75rem); overflow-y: auto; }
    /* docked desktop: exactly three (bigger) cards per row */
    .cv-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ===== off-canvas drawer on narrow screens ===== */
@media screen and (max-width: 1023px) {
    .cv-filter-toggle { display: inline-flex; }
    .cv-sidebar__close { display: inline-flex; align-items: center; }
    .cv-sidebar {
        position: fixed; top: 0; left: 0; z-index: 80;
        width: min(360px, 88vw); height: 100dvh; max-height: 100dvh; overflow-y: auto;
        border-radius: 0 var(--cv-radius) var(--cv-radius) 0;
        transform: translateX(-102%); transition: transform .3s cubic-bezier(.4, 0, .2, 1);
        box-shadow: 0 0 70px -12px rgba(0, 0, 0, 0.6);
    }
    .cv-shell.is-open .cv-sidebar { transform: none; }
    .cv-backdrop { display: block; position: fixed; inset: 0; z-index: 75;
        background: color-mix(in srgb, #0b1020 55%, transparent); backdrop-filter: blur(2px);
        opacity: 0; visibility: hidden; pointer-events: none;
        transition: opacity .3s ease, visibility .3s ease; }
    .cv-shell.is-open .cv-backdrop { opacity: 1; visibility: visible; pointer-events: auto; }
}
body.cv-noscroll { overflow: hidden; }

/* pagination hides out-of-page / filtered-out cards; CSS order does the sorting (no DOM moves → tooltips keep working) */
.cv-grid > .cv-card.cv-hide { display: none !important; }

.cv-noresults { text-align: center; color: var(--cv-ink-weak); padding: 3rem 1rem; font-size: 0.95rem; }
.cv-noresults i { color: var(--accent-floor); margin-right: 0.4rem; }

/* ---------- Pager ---------- */
.cv-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem; margin: 1.6rem 0 0.4rem; }
.cv-pager__info { width: 100%; text-align: center; font-size: 0.76rem; color: var(--cv-ink-weak);
    font-family: var(--cv-mono); font-variant-numeric: tabular-nums; margin-bottom: 0.5rem; }
.cv-pager__btn { font-family: var(--cv-mono); font-variant-numeric: tabular-nums; font-size: 0.84rem; font-weight: 600;
    min-width: 2.1rem; height: 2.1rem; padding: 0 0.55rem; border-radius: 10px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--cv-ink-soft); background: var(--cv-surface); border: 1px solid var(--cv-line);
    transition: border-color .14s ease, background .14s ease, color .14s ease; }
.cv-pager__btn:hover:not(:disabled):not(.is-current) { border-color: color-mix(in srgb, var(--accent-listed) 50%, transparent);
    color: var(--cv-ink); }
.cv-pager__btn.is-current { color: #fff; cursor: default;
    background: var(--cv-brand); border-color: var(--cv-brand); }
.cv-pager__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.cv-pager__gap { color: var(--cv-ink-weak); padding: 0 0.2rem; align-self: flex-end; }

/* ---------- Progressive ordinary-loading bar ---------- */
.cv-progress { margin: 0.9rem 0 0; padding: 0.7rem 0.95rem; border-radius: 13px;
    background: var(--cv-surface-2);
    border: 1px solid var(--cv-line);
    animation: cvFade .25s ease both; transition: opacity .4s ease; }
.cv-progress.is-done { opacity: 0; }
.cv-progress__top { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.5rem; }
.cv-progress__lab { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; font-weight: 600; color: var(--cv-ink-soft); }
.cv-progress__count { font-family: var(--cv-mono); font-variant-numeric: tabular-nums; font-size: 0.8rem; color: var(--cv-ink-weak); }
.cv-progress__count b { color: var(--cv-ink); font-weight: 600; }
.cv-progress__track { height: 7px; border-radius: 999px; overflow: hidden;
    background: color-mix(in srgb, var(--cv-ink-weak) 20%, transparent); }
.cv-progress__fill { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .35s ease;
    background: var(--cv-brand); }
.cv-spinner { width: 13px; height: 13px; border-radius: 50%; flex: none;
    border: 2px solid color-mix(in srgb, var(--accent-listed) 28%, transparent);
    border-top-color: var(--accent-listed); animation: cvSpin .7s linear infinite; }
@keyframes cvSpin { to { transform: rotate(360deg); } }

/* streamed-in ordinary cards fade in as they arrive */
@keyframes cvCardIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cv-card.cv-enter { animation: cvCardIn .3s ease both; }

/* grid-loading placeholder fills the wait while the initial /view request is in flight */
.cv-grid-loading { display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    padding: 3rem 1rem; color: var(--cv-ink-weak); font-size: 0.95rem; }

/* ---------- History + diff panel ---------- */
.cv-history { margin: 0 0 1.4rem; padding: 1rem 1.1rem; border-radius: var(--cv-radius);
    background: var(--cv-surface); border: 1px solid var(--cv-line); box-shadow: var(--cv-shadow);
    animation: cvFade .22s ease both; }
.cv-history__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.8rem; }
.cv-history__title { font-family: var(--cv-display); font-weight: 800; font-size: 1.14rem; letter-spacing: -0.01em; color: var(--cv-ink); }
.cv-history__title i { color: var(--accent-history); margin-right: 0.45rem; }
.cv-history__count { font-family: var(--cv-mono); font-size: 0.72rem; font-weight: 600; color: var(--cv-ink-weak);
    padding: 0.16rem 0.5rem; border-radius: 999px; white-space: nowrap;
    background: color-mix(in srgb, var(--accent-history) 10%, var(--cv-surface));
    border: 1px solid color-mix(in srgb, var(--accent-history) 22%, transparent); }
.cv-history__empty { color: var(--cv-ink-weak); font-size: 0.86rem; padding: 0.6rem 0; }
.cv-history__empty i { margin-right: 0.35rem; color: var(--accent-floor); }

/* ---- global history: search + per-wallet groups (scales to 300+ assessments) ---- */
.cv-histsearch { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.9rem; padding: 0.5rem 0.75rem;
    border-radius: 11px; background: var(--cv-surface-2); border: 1px solid var(--cv-line);
    transition: border-color .15s ease, background .15s ease; }
.cv-histsearch:focus-within { border-color: color-mix(in srgb, var(--accent-history) 50%, var(--cv-line)); background: var(--cv-surface); }
.cv-histsearch i { color: var(--cv-ink-weak); font-size: 0.82rem; }
.cv-histsearch input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent;
    font-family: var(--cv-mono); font-size: 0.85rem; color: var(--cv-ink); }
.cv-histsearch input:focus { outline: none; }
.cv-histsearch input::placeholder { color: var(--cv-ink-weak); font-family: var(--cv-display); }

.cv-wgroup { border-radius: 11px; border: 1px solid var(--cv-line-soft); background: var(--cv-surface-2);
    margin-bottom: 0.4rem; overflow: hidden; transition: border-color .15s ease; }
.cv-wgroup.is-current { border-color: color-mix(in srgb, var(--accent-history) 45%, transparent);
    background: color-mix(in srgb, var(--accent-history) 6%, var(--cv-surface-2)); }
.cv-wgroup__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.7rem;
    padding: 0.6rem 0.75rem; cursor: pointer; list-style: none; }
.cv-wgroup__row::-webkit-details-marker { display: none; }
.cv-wgroup__row:hover { background: color-mix(in srgb, var(--accent-history) 7%, transparent); }
.cv-wgroup__addr { flex: 1 1 150px; display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0;
    font-weight: 600; color: var(--cv-ink); }
.cv-wgroup__addr > i { color: var(--accent-floor); font-size: 0.85em; flex: none; }
.cv-wgroup__addr .cv-num { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-wgroup__here { flex: none; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--accent-history); padding: 0.1rem 0.36rem; border-radius: 999px;
    background: color-mix(in srgb, var(--accent-history) 14%, var(--cv-surface)); }
/* the signed-in user's own wallet, marked distinctly in the list */
.cv-wgroup__you { flex: none; display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.56rem;
    font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-listed);
    padding: 0.1rem 0.4rem; border-radius: 999px;
    background: color-mix(in srgb, var(--accent-listed) 16%, var(--cv-surface));
    border: 1px solid color-mix(in srgb, var(--accent-listed) 32%, transparent); }
.cv-wgroup__you i { font-size: 0.9em; }
.cv-wgroup.is-own { box-shadow: inset 3px 0 0 var(--accent-listed); }
.cv-wgroup.is-own.is-current { box-shadow: inset 3px 0 0 var(--accent-listed); } /* own wins the left rail */
.cv-wgroup__count { font-family: var(--cv-mono); font-size: 0.72rem; font-weight: 600; color: var(--cv-ink-weak);
    padding: 0.08rem 0.42rem; border-radius: 999px; background: var(--cv-line-soft); }
.cv-wgroup__total { font-family: var(--cv-mono); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--cv-ink); }
.cv-wgroup__when { font-size: 0.75rem; color: var(--cv-ink-weak); white-space: nowrap; }
.cv-wgroup__chev { font-size: 0.7rem; color: var(--cv-ink-weak); transition: transform .2s ease; }
.cv-wgroup[open] .cv-wgroup__chev { transform: rotate(180deg); }
.cv-wgroup__body { padding: 0.2rem 0.75rem 0.7rem; border-top: 1px solid var(--cv-line-soft); }

/* ---- snapshot timeline (inside an expanded wallet group): a rail of nodes, one card per assessment ---- */
.cv-wsnaps { padding: 0.15rem 0 0.1rem; }
.cv-tl { list-style: none; margin: 0.3rem 0 0; padding: 0; }
.cv-tl__item { position: relative; display: grid; grid-template-columns: 16px 1fr; gap: 0.55rem; padding-bottom: 0.5rem; }
.cv-tl__item:last-child { padding-bottom: 0; }
/* the rail — a continuous vertical line with a node dot per snapshot, trimmed above the first / below the last */
.cv-tl__rail { position: relative; display: flex; justify-content: center; }
.cv-tl__rail::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
    transform: translateX(-50%); background: var(--cv-line); }
.cv-tl__item:first-child .cv-tl__rail::before { top: 13px; }
.cv-tl__item:last-child .cv-tl__rail::before { bottom: calc(100% - 13px); }
.cv-tl__node { position: relative; z-index: 1; margin-top: 9px; width: 9px; height: 9px; border-radius: 50%;
    background: var(--cv-surface); border: 2px solid var(--cv-ink-weak); transition: border-color .15s ease, background .15s ease; }
.cv-tl__item.is-open .cv-tl__node { border-color: var(--accent-history); background: var(--accent-history);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-history) 22%, transparent); }
.cv-tl__card { padding: 0.55rem 0.7rem; border-radius: 12px; background: var(--cv-surface-2);
    border: 1px solid var(--cv-line-soft); transition: border-color .15s ease, background .15s ease; }
.cv-tl__card:hover { border-color: var(--cv-line); }
.cv-tl__item.is-open .cv-tl__card { border-color: color-mix(in srgb, var(--accent-history) 42%, transparent);
    background: color-mix(in srgb, var(--accent-history) 7%, var(--cv-surface-2)); }
/* compact meta row — date · time on the left, axie count on the right; wraps gracefully on a narrow panel */
.cv-tl__when { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.15rem 0.5rem; margin-bottom: 0.3rem; }
.cv-tl__date { font-size: 0.8rem; font-weight: 600; color: var(--cv-ink-soft); }
.cv-tl__time { font-size: 0.7rem; color: var(--cv-ink-weak); letter-spacing: 0.01em; }
.cv-tl__axies { margin-left: auto; font-size: 0.72rem; color: var(--cv-ink-weak); white-space: nowrap; }
.cv-tl__axies b { color: var(--cv-ink-soft); font-weight: 600; }
.cv-tl__figures { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3rem 0.55rem; }
.cv-tl__total { font-family: var(--cv-mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1.16rem;
    letter-spacing: -0.025em; color: var(--cv-ink); }
.cv-tl__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.55rem; }
.cv-tl__open, .cv-tl__cmp { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap;
    font-family: var(--cv-display); font-size: 0.74rem; font-weight: 600; padding: 0.32rem 0.62rem; border-radius: 8px;
    border: 1px solid transparent; text-decoration: none; transition: filter .15s ease, background .15s ease, border-color .15s ease, color .15s ease; }
.cv-tl__open i, .cv-tl__cmp i { font-size: 0.9em; }
/* Open = primary (select this snapshot as the main view) */
.cv-tl__open { color: #fff; background: var(--cv-brand); }
.cv-tl__open:hover { filter: brightness(0.95); }
.cv-tl__open.is-current { cursor: default; color: var(--accent-history); box-shadow: none; background: none;
    border-color: color-mix(in srgb, var(--accent-history) 34%, transparent); }
/* Compare = secondary (set this older snapshot as the baseline) */
.cv-tl__cmp { color: var(--cv-ink-soft); background: var(--cv-surface-2);
    border-color: var(--cv-line); }
.cv-tl__cmp:hover { background: color-mix(in srgb, var(--accent-history) 16%, var(--cv-surface));
    border-color: color-mix(in srgb, var(--accent-history) 52%, transparent); }

/* compare-form selects — native (this fragment is injected after the page-load JS runs), themed to match */
.cv-cmp { display: inline-flex; align-items: center; gap: 0.4rem; }
.cv-cmp__lab { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cv-ink-weak); }
.cv-cmp__sel { appearance: none; -webkit-appearance: none; cursor: pointer; border-radius: 9px;
    border: 1px solid var(--cv-line); background: var(--cv-surface); color: var(--cv-ink);
    font-family: var(--cv-display); font-size: 0.8rem; font-weight: 600; padding: 0.4rem 1.8rem 0.4rem 0.6rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2394a3b8' stroke-width='1.6'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.6rem center; background-size: 11px; }
.cv-cmp__sel:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent-listed) 55%, transparent); outline-offset: 1px; }


.cv-delta { font-family: var(--cv-mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.82rem;
    padding: 0.1rem 0.45rem; border-radius: 999px; white-space: nowrap; }
.cv-delta.is-up { color: var(--accent-history); background: color-mix(in srgb, var(--accent-history) 14%, transparent); }
.cv-delta.is-down { color: #d4493f; background: color-mix(in srgb, #d4493f 12%, transparent); }
.cv-delta.is-base { color: var(--cv-ink-weak); background: var(--cv-line-soft); }
.cv-delta--lg { font-size: 1.05rem; padding: 0.2rem 0.7rem; }
.theme-dark .cv-delta.is-down { color: #f08a82; }

/* ---- Share-card "comparison mode": a baseline is selected, so the header surfaces deltas (OOB-swapped in
       from the grid view). Empty slots collapse, returning the header to its plain (absolute) mode. ---- */
/* headline total delta + "since <baseline>" range, under the big total in the hero */
.cv-hero__delta:empty { display: none; }
.cv-hero__delta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.65rem; margin-top: 0.6rem;
    animation: cvFade .22s ease both; }
/* baseline reference — a distinct history-accent pill so it's obvious at a glance that the date is the
   comparison baseline (not a "last updated" stamp). Full timestamp lives in its title tooltip. */
.cv-hero__delta-since { display: inline-flex; align-items: center; gap: 0.34rem; white-space: nowrap;
    font-size: 0.74rem; color: var(--cv-ink-weak); padding: 0.2rem 0.55rem; border-radius: 999px;
    background: color-mix(in srgb, var(--accent-history) 9%, var(--cv-surface-2));
    border: 1px solid color-mix(in srgb, var(--accent-history) 24%, var(--cv-line)); cursor: help; }
.cv-hero__delta-since b { color: var(--cv-ink); font-weight: 600; font-family: var(--cv-mono); font-variant-numeric: tabular-nums; }
.cv-hero__delta-since i { color: var(--accent-history); }
/* elapsed span appended after the baseline date ("· 3 days") — quieter than the date so it reads as a suffix */
.cv-hero__delta-span { color: var(--cv-ink-weak); font-family: var(--cv-mono); font-variant-numeric: tabular-nums;
    font-weight: 500; letter-spacing: -0.01em; }

/* "As of" datestamp — WHEN this assessment was taken. Deliberately neutral (ink-weak, no accent, no pill) so it
   never reads as the history-accent comparison-baseline pill. A hairline rule sets "ASSESSED" off from the date;
   in compare mode it sits directly above the "since <baseline> · span" pill as the "to" end of the range. */
.cv-dateline { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; width: fit-content;
    font-size: 0.72rem; color: var(--cv-ink-weak); cursor: default; }
.cv-dateline__ico { font-size: 0.86em; opacity: 0.65; }
.cv-dateline__lab { text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; font-size: 0.6rem;
    padding-right: 0.4rem; border-right: 1px solid var(--cv-line); }
.cv-dateline__date { font-family: var(--cv-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
    font-weight: 600; color: var(--cv-ink-soft); }

/* Compare deltas now live ON the split tiles + collection chips. #cvShareCompare is a hidden data carrier
   (collectionValue.js reads it and paints the slots below), so it never renders. */
#cvShareCompare { display: none !important; }

/* per-bucket delta on the split tiles — value on the left, change pill on the right of the same line.
   The slot carries .cv-delta, so it reuses the up/down/base pill colours. */
.cv-split__valrow { display: flex; align-items: baseline; justify-content: flex-start; gap: 0.5rem; flex-wrap: wrap; }
.cv-split__delta { flex: none; }
.cv-split__delta:empty { display: none; }

/* per-collection delta appended to each "By collection" chip (quiet coloured text, no pill) */
.cv-coll__delta:empty { display: none; }
.cv-coll__delta { font-family: var(--cv-mono); font-variant-numeric: tabular-nums; font-weight: 600;
    font-size: 0.72rem; white-space: nowrap; margin-left: 0.1rem; }
.cv-coll__delta.is-up   { color: var(--accent-history); }
.cv-coll__delta.is-down { color: #d4493f; }
.cv-coll__delta.is-base { color: var(--cv-ink-weak); }
.theme-dark .cv-coll__delta.is-down { color: #f08a82; }

/* axies added/removed — a sibling chip after the baseline pill in the headline delta row */
.cv-hero__delta-axies { font-family: var(--cv-mono); font-variant-numeric: tabular-nums;
    display: inline-flex; align-items: center; gap: 0.3rem; }
.cv-hero__delta-axies .is-up   { color: var(--accent-history); }
.cv-hero__delta-axies .is-down { color: #d4493f; }
.theme-dark .cv-hero__delta-axies .is-down { color: #f08a82; }
/* ===================== Comparison: per-card change chip · baseline picker · summary ===================== */
/* Per-card delta vs. the chosen baseline; sits opposite the "Based on:" chip in the estimate head. */
.cv-cmp-delta { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 4px;
    font-family: var(--cv-mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.74rem;
    padding: 0.12rem 0.42rem; border-radius: 999px; white-space: nowrap; letter-spacing: -0.01em; }
.cv-cmp-delta i { font-size: 0.85em; }
.cv-cmp-delta.is-up { color: var(--accent-history); background: color-mix(in srgb, var(--accent-history) 15%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-history) 30%, transparent); }
.cv-cmp-delta.is-down { color: #d4493f; background: color-mix(in srgb, #d4493f 15%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #d4493f 28%, transparent); }
.theme-dark .cv-cmp-delta.is-down { color: #f08a82; }
.cv-cmp-delta.is-new { color: var(--accent-listed); background: color-mix(in srgb, var(--accent-listed) 15%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-listed) 30%, transparent); }
.cv-cmp-delta.is-flat { color: var(--cv-ink-weak); background: var(--cv-line-soft); }
/* Comparison baseline date — shown below the price (in the estimate foot), opposite the ETH figure. */
.cv-est__since { display: inline-flex; align-items: center; gap: 4px; flex: none;
    font-family: var(--cv-mono); font-size: 0.68rem; font-weight: 600; white-space: nowrap;
    color: var(--cv-ink-weak); font-variant-numeric: tabular-nums; }
.cv-est__since i { color: var(--accent-history); font-size: 0.92em; }
/* Compare mode: an S-curve (∫-shaped) divider sets the change column (delta chip + "since") apart from the
   estimate — flat in the top/bottom padding, steep through the middle so it threads the gap between the two
   columns. The shape is an SVG mask; the colour is the pseudo's own background, so it stays theme-aware.
   The estimate's real children are lifted above it so it only ever reads as a divider between them. */
.cv-est.is-comparing > * { position: relative; z-index: 1; }
.cv-est.is-comparing::after {
    content: ""; position: absolute; z-index: 0; pointer-events: none; inset: 0;
    background: color-mix(in srgb, var(--accent-history) 20%, transparent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20350%20100'%20preserveAspectRatio='none'%3E%3Cpath%20d='M115%20106C190%20106%20190%20-6%20265%20-6'%20fill='none'%20stroke='white'%20stroke-width='2.5'%20stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20350%20100'%20preserveAspectRatio='none'%3E%3Cpath%20d='M115%20106C190%20106%20190%20-6%20265%20-6'%20fill='none'%20stroke='white'%20stroke-width='2.5'%20stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* Narrow cards (e.g. the docked 3-up desktop grid drops cards well below 280px): the estimate's two-column
   compare layout can't hold, so stack it. Drop the divider once the card is too tight for its steep middle
   to clear the "since" label (which creeps leftward as the card shrinks)… */
@container (max-width: 320px) {
    .cv-est.is-comparing::after { display: none; }
}
/* …and once even tighter, let the "since" label fall under the ETH figure instead of overflowing and being
   clipped at the card edge. */
@container (max-width: 264px) {
    .cv-est.is-comparing .cv-est__foot { flex-wrap: wrap; row-gap: 0.1rem; }
}

/* Baseline picker hint + empty state in the controls form; gain sort only shows when comparing. */
.cv-field__hint { font-size: 0.7rem; color: var(--cv-ink-weak); margin-top: 0.15rem; }
.cv-cmp-none { font-size: 0.78rem; color: var(--cv-ink-weak); line-height: 1.4; padding: 0.2rem 0; }
.cv-cmp-none i { color: var(--accent-history); margin-right: 0.3rem; }
.cv-select--cmp.cv-select { --cv-accent: var(--accent-history); }
#cvControls:not(.cv-has-compare) .cv-sort-gain { display: none; }

@media screen and (max-width: 860px) {
    .cv-legend { max-width: 100%; }
}

/* ---------- Public demo — banner + example switcher (read-only mode) ---------- */
.cv-demo-banner { display: flex; align-items: center; gap: 0.9rem 1rem; flex-wrap: wrap;
    margin: 0 0 1.3rem; padding: 0.85rem 1.1rem; border-radius: var(--cv-radius);
    background: color-mix(in srgb, var(--cv-brand) 8%, var(--cv-surface));
    border: 1px solid color-mix(in srgb, var(--cv-brand) 30%, var(--cv-line)); }
.cv-demo-banner__ico { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px;
    border-radius: 9px; color: var(--cv-brand); font-size: 1rem;
    background: color-mix(in srgb, var(--cv-brand) 14%, var(--cv-surface));
    border: 1px solid color-mix(in srgb, var(--cv-brand) 30%, transparent); }
.cv-demo-banner__txt { flex: 1 1 260px; min-width: 0; font-size: 0.86rem; line-height: 1.45; color: var(--cv-ink-soft); }
.cv-demo-banner__txt b { color: var(--cv-ink); font-weight: 700; }
.cv-demo-banner__actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.cv-demo-banner__cta { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap;
    font-size: 0.82rem; font-weight: 600; text-decoration: none; padding: 0.45rem 0.85rem; border-radius: 9px;
    color: #fff; background: var(--cv-brand); border: 1px solid var(--cv-brand); transition: filter .15s ease; }
.cv-demo-banner__cta:hover { filter: brightness(0.95); }
.cv-demo-banner__link { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap;
    font-size: 0.82rem; font-weight: 600; text-decoration: none; padding: 0.45rem 0.7rem; border-radius: 9px;
    color: var(--cv-ink-soft); background: var(--cv-surface); border: 1px solid var(--cv-line);
    transition: border-color .15s ease, color .15s ease; }
.cv-demo-banner__link:hover { border-color: color-mix(in srgb, var(--cv-brand) 45%, var(--cv-line)); color: var(--cv-ink); }

.cv-demo-switch { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.5rem; margin: 0 0 1.4rem; }
.cv-demo-switch__lab { align-self: center; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--cv-ink-weak); margin-right: 0.15rem; }
.cv-demo-opt { display: inline-flex; flex-direction: column; gap: 0.12rem; text-decoration: none;
    padding: 0.5rem 0.9rem; border-radius: 10px; color: var(--cv-ink-soft);
    background: var(--cv-surface); border: 1px solid var(--cv-line);
    transition: border-color .15s ease, background .15s ease, color .15s ease; }
.cv-demo-opt:hover { border-color: color-mix(in srgb, var(--cv-brand) 45%, var(--cv-line)); color: var(--cv-ink); }
.cv-demo-opt.is-active { border-color: color-mix(in srgb, var(--cv-brand) 60%, transparent);
    background: color-mix(in srgb, var(--cv-brand) 10%, var(--cv-surface)); }
.cv-demo-opt__name { font-size: 0.84rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.4rem; }
.cv-demo-opt__name i { color: var(--cv-brand); font-size: 0.9em; }
.cv-demo-opt.is-active .cv-demo-opt__name { color: var(--cv-ink); }
.cv-demo-opt__sub { font-family: var(--cv-mono); font-variant-numeric: tabular-nums; font-size: 0.72rem; color: var(--cv-ink-weak); }

/* ---------- Inline notice / warning banner (e.g. "market prices still loading") ---------- */
.cv-notice { display: flex; align-items: flex-start; gap: 0.8rem; margin: 0 0 1.4rem;
    padding: 0.9rem 1.1rem; border-radius: var(--cv-radius); }
.cv-notice__ico { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px;
    border-radius: 9px; font-size: 1rem; }
.cv-notice__body { min-width: 0; font-size: 0.88rem; line-height: 1.45; }
.cv-notice__title { display: block; color: var(--cv-ink); font-weight: 700; margin-bottom: 0.1rem; }
.cv-notice__text { color: var(--cv-ink-soft); }
.cv-notice--warn { background: color-mix(in srgb, var(--accent-materials) 12%, var(--cv-surface));
    border: 1px solid color-mix(in srgb, var(--accent-materials) 40%, var(--cv-line)); }
.cv-notice--warn .cv-notice__ico { color: var(--accent-materials);
    background: color-mix(in srgb, var(--accent-materials) 16%, var(--cv-surface));
    border: 1px solid color-mix(in srgb, var(--accent-materials) 34%, transparent); }