/* Holofoil theme — visual rules.
 *
 * All rules are scoped under `[data-theme="holofoil"]` so the scrapbook
 * (default) theme remains untouched when the flag is off. Stories 2-6 of the
 * Holofoil adoption plan fill in the surfaces:
 *
 *   Story 2 — header + global chrome (top tabs, search, rarity pills, nav back)
 *   Story 3 — card grid + list-view + card modal
 *   Story 4 — auth modal + landing overlay + guest banner + toasts
 *   Story 5 — scanner UI + result modal + grade picker
 *   Story 6 — Store Hunter + Symbol Dex + sealed-product + graded badges
 *
 * Story 1 (this commit) ships the file with only the keyframes and reduced-
 * motion guard wired so the kill-switch is provably attached but no chrome
 * changes are visible yet. See mockups/theme-holofoil-real.html for the
 * visual target Stories 2-6 are converging on.
 */

@keyframes holo-shimmer {
    0%   { background-position:   0% 50%; }
    100% { background-position: 200% 50%; }
}

/* Compositor-only variant of holo-shimmer for the header wash. The old layer
 * was the header box (width W) painted with a `background-size:300%` (3W-wide)
 * iridescent tile, slid via `background-position 0%→200%` over 8s — i.e. the
 * 3W tile translated -4W. We reproduce that on the GPU: a 900% (9W) wide
 * `::before` carrying the SAME 3W tile (background-size:33.333%), translated by
 * -44.444% of its own width (= -4W) over the same 8s. Identical sweep distance,
 * speed and direction, but a single composited transform instead of a repaint
 * of `background-position` every frame. */
@keyframes holo-shimmer-x {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-44.444%, 0, 0); }
}

@keyframes holo-float-pokeball {
    0%, 100% { transform: translateY(0)    rotate(0deg);  }
    50%      { transform: translateY(-5px) rotate(18deg); }
}

@keyframes holo-sparkle {
    0%, 100% { opacity: 0;    transform: scale(0.4); }
    50%      { opacity: 0.85; transform: scale(1.3); }
}

/* ════════════════════════════════════════════════════════════════════
 * Story 2 — Header + global chrome
 * ════════════════════════════════════════════════════════════════════
 *
 * Translates the mockup's header treatment (mockups/theme-holofoil-real.html)
 * onto the production DOM. Class names are the real ones from index.html —
 * the mockup used `header.site` / `.sync` but production uses bare `header`
 * and `.sync-status`. All overrides scoped under [data-theme="holofoil"]
 * so the scrapbook theme is untouched.
 */

/* Page background — saturated violet base with strong pink/violet corner glows.
 * Uses viewport-relative ellipse sizes so the glows cover every screen size.
 * bg-1 is now a visible purple (#200055) rather than near-black so the top
 * of the page reads "holofoil" even before the corner glows arrive. */
[data-theme="holofoil"] body {
    background:
        radial-gradient(ellipse 110% 65% at 0% 0%,   rgba(236, 72, 153, 0.52), transparent),
        radial-gradient(ellipse 110% 65% at 100% 100%, rgba(192, 132, 252, 0.46), transparent),
        radial-gradient(ellipse 90%  80% at 50% 40%,  rgba(168, 85, 247, 0.20), transparent),
        linear-gradient(180deg, var(--holo-bg-1) 0%, var(--holo-bg-2) 50%, var(--holo-bg-3) 100%);
    background-attachment: fixed;
    color: var(--holo-ink);
}

/* styles.css renders a `body::before` fixed-position layer of navy radial
 * gradients (lines ~6454–6470) that paints OVER the body's own purple
 * background. Replace those navy stops with violet/pink so the holofoil
 * theme's purple actually reaches the user instead of being masked. */
[data-theme="holofoil"] body::before {
    background-color: var(--holo-bg-1);
    background-image:
        radial-gradient(ellipse 60% 50% at 22% 28%, rgba(236, 72, 153, 0.35) 0%, transparent 55%),
        radial-gradient(ellipse 55% 45% at 78% 72%, rgba(192, 132, 252, 0.32) 0%, transparent 60%),
        radial-gradient(ellipse 70% 60% at 50% 110%, rgba(168, 85, 247, 0.25) 0%, transparent 65%);
}

/* Header chrome — replaces the scrapbook navy/gold gradient with a
 * translucent panel + iridescent shimmer pseudo. */
[data-theme="holofoil"] header {
    background:
        linear-gradient(135deg, rgba(192, 132, 252, 0.12) 0%, rgba(236, 72, 153, 0.08) 100%),
        rgba(15, 5, 35, 0.7);
    border: 1px solid var(--holo-line);
    box-shadow:
        0 0 40px rgba(192, 132, 252, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Iridescent shimmer wash — single continuous animation on one element
 * (cheap on every device per the perf plan). mix-blend-mode: screen keeps
 * it readable over the dark backdrop. */
[data-theme="holofoil"] header::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    /* Over-wide layer so the sweep can be done with a GPU transform instead of
     * a per-frame repaint of `background-position`. The old layer was the
     * header box (width W) painted with a `background-size:300%` tile (3W wide)
     * slid via background-position 0%→200%, which translates the 3W tile by
     * -4W over 8s. We reproduce that exactly: make the element 9W wide, paint
     * one identical 3W tile (background-size:33.333% = 3W of a 9W element) at
     * the left, and translate the element by -44.444% of its own width
     * (= -0.44444 × 9W = -4W) over the same 8s. Same tile size, same angle,
     * same -4W sweep, same direction and speed — pixel-identical, GPU-driven.
     *
     * Vertical sizing stays 300% (3H), matching the old `background-size:300% 300%`.
     * The 120deg gradient's band angle/spacing depends on the tile's aspect
     * ratio, so the tile must remain 3W×3H to keep the diagonal stripes
     * identical; the element is only H tall, so we show the vertical-center
     * slice via `background-position:center` exactly as the old 50% Y position
     * did. Repeat horizontally so each 3W tile abuts seamlessly as it slides. */
    width: 900%;
    background: linear-gradient(120deg,
        transparent 30%,
        rgba(192, 132, 252, 0.12),
        rgba(34, 211, 238, 0.10),
        rgba(236, 72, 153, 0.10),
        rgba(212, 255, 91, 0.08),
        transparent 70%);
    background-size: 33.333% 300%;
    background-position: center;
    background-repeat: repeat;
    animation: holo-shimmer-x 8s linear infinite;
    will-change: transform;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 0;
    border-radius: inherit;
}

/* Dragonite-on-card silhouettes — recolor the stroke/fill via filter so
 * the same inline SVG markup paints in the new palette. The base
 * .card-bg drops the gold-on-navy drop-shadow and gains a violet glow. */
[data-theme="holofoil"] .header-pokemon-bg .card-bg {
    filter:
        drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55))
        drop-shadow(0 0 6px var(--holo-glow-violet));
    opacity: 0.45;
}

/* Pokemon character glows — violet/pink replaces the scrapbook drop-shadow.
 * Specificity matches the existing .header-pokemon-bg .pokemon-char rule. */
[data-theme="holofoil"] .header-pokemon-bg .pokemon-char {
    filter:
        drop-shadow(0 2px 12px var(--holo-glow-violet))
        drop-shadow(0 0 6px var(--holo-glow-pink));
}
[data-theme="holofoil"] .header-pokemon-bg .pokemon-char:hover {
    filter:
        drop-shadow(0 4px 18px rgba(192, 132, 252, 0.85))
        drop-shadow(0 0 10px rgba(236, 72, 153, 0.55));
}

/* Pokeball accents — violet/pink glow instead of the dark drop-shadow. */
[data-theme="holofoil"] .header-pokemon-bg .pokeball-accent {
    filter:
        drop-shadow(0 0 8px var(--holo-glow-pink))
        drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* Sparkle palette — cycle through the neon stops instead of all-gold so the
 * shimmer reads as rainbow. nth-child specificity matches the existing rule.
 * Hidden inputs note: the SCRIPTS array of the document order matters; if
 * we ever add a 6th .header-sparkle, append to this list. */
[data-theme="holofoil"] .header-sparkle {
    background: var(--holo-pink);
    box-shadow: 0 0 8px var(--holo-pink);
}
[data-theme="holofoil"] .header-sparkle:nth-child(1) {
    background: var(--holo-pink);
    box-shadow: 0 0 8px var(--holo-pink);
}
[data-theme="holofoil"] .header-sparkle:nth-child(2) {
    background: var(--holo-violet);
    box-shadow: 0 0 8px var(--holo-violet);
}
[data-theme="holofoil"] .header-sparkle:nth-child(3) {
    background: var(--holo-cyan);
    box-shadow: 0 0 8px var(--holo-cyan);
}
[data-theme="holofoil"] .header-sparkle:nth-child(4) {
    background: var(--holo-lime);
    box-shadow: 0 0 8px var(--holo-lime);
}
[data-theme="holofoil"] .header-sparkle:nth-child(5) {
    background: var(--holo-pink);
    box-shadow: 0 0 8px var(--holo-pink);
}

/* Logo SVG — swap the gold drop-shadow for violet/pink. The brightness
 * adjustment carries over to keep the SVG's internal whites legible. */
[data-theme="holofoil"] .header-logo {
    filter:
        drop-shadow(0 0 14px rgba(192, 132, 252, 0.85))
        drop-shadow(0 0 6px rgba(236, 72, 153, 0.55))
        brightness(1.04);
}
[data-theme="holofoil"] .header-logo:hover {
    filter:
        drop-shadow(0 0 20px rgba(192, 132, 252, 1))
        drop-shadow(0 0 8px rgba(236, 72, 153, 0.75))
        brightness(1.08);
}

/* h1 (if present) — animated rainbow text replaces the static gold gradient. */
[data-theme="holofoil"] h1 {
    background: var(--holo-rainbow);
    background-size: 300% 100%;
    animation: holo-shimmer 6s linear infinite;
    /* background-clip:text rules out the transform-slide trick, so keep the
     * background-position animation but hint the compositor. Tiny area — this
     * is a modest help, and visually identical. */
    will-change: background-position;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Subtitle — wider tracking, uppercase, dim ink. */
[data-theme="holofoil"] .subtitle {
    color: var(--holo-ink-dim);
    text-transform: uppercase;
    letter-spacing: 2.8px;
    font-weight: 600;
    opacity: 1;
}

/* Sync status pill — neon-lime "live" feel replaces the muted white. */
[data-theme="holofoil"] .sync-status {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--holo-lime);
    color: var(--holo-lime);
    box-shadow: 0 0 12px rgba(212, 255, 91, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
[data-theme="holofoil"] .sync-indicator.synced {
    background: var(--holo-lime);
    box-shadow: 0 0 10px var(--holo-lime);
}
[data-theme="holofoil"] .sync-indicator.syncing {
    background: var(--holo-cyan);
    box-shadow: 0 0 10px var(--holo-cyan);
}
[data-theme="holofoil"] .sync-indicator.error {
    background: var(--holo-pink);
    box-shadow: 0 0 10px var(--holo-pink);
}

/* `.logo-link` is `inline-block` in styles.css; block + centering keeps
 * the logo image centered under the holofoil theme. */
[data-theme="holofoil"] .logo-link {
    display: block;
    text-align: center;
}

/* Top tab strip — translucent rail with violet-glow active state.
 * Mockup parity (PR B): thicker outlines on active states so the
 * tab strip reads as a panel of pickable cards rather than text. */
[data-theme="holofoil"] .top-tabs {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--holo-line);
    border-radius: 16px;
    padding: 6px;
    gap: 6px;
    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
[data-theme="holofoil"] .top-tab {
    color: rgba(245, 243, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: 700;
    padding: 14px 16px;
    border-radius: 12px;
    /* Allow long labels to wrap into two lines on narrow viewports —
     * matches the mockup's "DISNEY / LORCANA" and "CUSTOM / SETS"
     * stacking, instead of the current ellipsis truncation. */
    white-space: normal;
    line-height: 1.15;
}
[data-theme="holofoil"] .top-tab:hover {
    color: var(--holo-violet);
    background: rgba(192, 132, 252, 0.10);
}
[data-theme="holofoil"] .top-tab.active {
    background: linear-gradient(135deg,
        rgba(192, 132, 252, 0.22),
        rgba(236, 72, 153, 0.10));
    color: #fff;
    /* Visible 2px violet ring + outer glow (mockup direction). The
     * previous `inset 0 0 0 1px` was too subtle to register as the
     * "you are here" cue. */
    box-shadow:
        inset 0 0 0 2px var(--holo-violet),
        0 0 22px var(--holo-glow-violet);
}
[data-theme="holofoil"] .top-tab-divider {
    background: var(--holo-line);
    height: 1px;
    margin: 4px 0;
}
[data-theme="holofoil"] .top-tab-utility {
    color: rgba(245, 243, 255, 0.45);
}
[data-theme="holofoil"] .top-tab-utility:hover {
    color: var(--holo-cyan);
    background: rgba(34, 211, 238, 0.08);
}
[data-theme="holofoil"] .top-tab-utility.active {
    background: linear-gradient(135deg,
        rgba(34, 211, 238, 0.18),
        rgba(34, 211, 238, 0.06));
    color: #fff;
    box-shadow:
        inset 0 0 0 2px var(--holo-cyan),
        0 0 18px rgba(34, 211, 238, 0.42);
}

/* Card-controls bar — search input + rarity pills.
 * .card-controls is the wrapper above every set's card grid. */
[data-theme="holofoil"] .card-controls {
    /* container is layout-only in scrapbook; only the children need recolor */
}
[data-theme="holofoil"] .search-input {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--holo-line);
    color: var(--holo-ink);
}
[data-theme="holofoil"] .search-input::placeholder {
    color: var(--holo-ink-faint);
}
[data-theme="holofoil"] .search-input:focus {
    outline: none;
    border-color: var(--holo-violet);
    box-shadow: 0 0 12px var(--holo-glow-violet);
}
[data-theme="holofoil"] .search-clear {
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .search-clear:hover {
    color: var(--holo-violet);
}

/* Theme-toggle popover — retint the existing scrapbook popover so it
 * matches the new chrome when Holofoil is the active theme. */
[data-theme="holofoil"] .theme-menu {
    background: rgba(15, 5, 35, 0.95);
    border-color: var(--holo-line);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.7),
        0 0 24px var(--holo-glow-violet),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
[data-theme="holofoil"] .theme-menu-title {
    color: var(--holo-violet);
    letter-spacing: 1.6px;
}
[data-theme="holofoil"] .theme-option {
    color: var(--holo-ink);
}
[data-theme="holofoil"] .theme-option:hover {
    background: rgba(192, 132, 252, 0.10);
}
[data-theme="holofoil"] .theme-option:focus-within {
    background: rgba(192, 132, 252, 0.15);
    outline: 2px solid var(--holo-violet);
}
[data-theme="holofoil"] .theme-option input[type="radio"] {
    accent-color: var(--holo-violet);
}
[data-theme="holofoil"] .theme-option-sub {
    color: var(--holo-ink-faint);
}
[data-theme="holofoil"] .theme-menu-foot {
    color: var(--holo-ink-faint);
    border-top-color: var(--holo-line);
}
[data-theme="holofoil"] .user-bar-btn.theme-toggle-btn[aria-expanded="true"] {
    background: rgba(192, 132, 252, 0.18);
    border-color: var(--holo-violet);
}

/* Focus-visible — neon-cyan outline for keyboard nav. Cyan against the
 * dark backdrop hits ~9.3:1 contrast (AC1). */
[data-theme="holofoil"] :focus-visible {
    outline: 2px solid var(--holo-cyan);
    outline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════════════
 * Story 3 — Card grid + list-view + card modal (+ block + set buttons)
 * ════════════════════════════════════════════════════════════════════
 *
 * The shared `js/list-view.js` module renders Pokemon, Custom Sets, and
 * Lorcana the same way, so every override here themes all three TCG tabs
 * simultaneously. Each block keeps its --block-color CSS var (set inline by
 * js/pokemon-tcg.js) — we just retint the surrounding glass.
 */

/* ── Set-section glass container ─────────────────────────────────── */
/* Wraps the card grid (and sealed tab) in a dark glass panel matching
 * the mockup's .set-view treatment. Only applied when active so hidden
 * sections get no layout cost. */
[data-theme="holofoil"] .set-section.active {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--holo-line);
    border-radius: 20px;
    padding: 18px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(192, 132, 252, 0.06) inset;
    margin-top: 8px;
    position: relative;
}

/* Floating Eevee mascot in the corner of an active set view — matches
 * the mockup's `.set-view-mascot`. Uses the already-shipped header
 * eevee asset, so no new files. Hidden on small phones so it doesn't
 * collide with the set view tabs. */
[data-theme="holofoil"] .set-section.active::after {
    content: '';
    position: absolute;
    right: -8px;
    top: -28px;
    width: 70px;
    height: 70px;
    background: url('Images/header/eevee.png') center/contain no-repeat;
    pointer-events: none;
    opacity: 0.85;
    transform: rotate(8deg);
    filter:
        drop-shadow(0 0 12px rgba(192, 132, 252, 0.5))
        drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
    animation: holo-bob 5s ease-in-out infinite;
    z-index: 2;
}
@keyframes holo-bob {
    0%, 100% { transform: rotate(8deg) translateY(0); }
    50%      { transform: rotate(6deg) translateY(-4px); }
}
@media (max-width: 640px) {
    [data-theme="holofoil"] .set-section.active::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    [data-theme="holofoil"] .set-section.active::after { animation: none; }
}

/* Same treatment for Lorcana and Custom set sections */
[data-theme="holofoil"] #lorcana-content .set-section.active,
[data-theme="holofoil"] #custom-sets-grids .set-section.active {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--holo-line);
    border-radius: 20px;
    padding: 18px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
    margin-top: 8px;
    position: relative;
}
/* Eevee mascot on Lorcana / Custom set views too — same asset + animation
 * as the Pokemon set view above. Consistency across TCGs. */
[data-theme="holofoil"] #lorcana-content .set-section.active::after,
[data-theme="holofoil"] #custom-sets-grids .set-section.active::after {
    content: '';
    position: absolute;
    right: -8px;
    top: -28px;
    width: 70px;
    height: 70px;
    background: url('Images/header/eevee.png') center/contain no-repeat;
    pointer-events: none;
    opacity: 0.85;
    transform: rotate(8deg);
    filter:
        drop-shadow(0 0 12px rgba(192, 132, 252, 0.5))
        drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
    animation: holo-bob 5s ease-in-out infinite;
    z-index: 2;
}
@media (max-width: 640px) {
    [data-theme="holofoil"] #lorcana-content .set-section.active::after,
    [data-theme="holofoil"] #custom-sets-grids .set-section.active::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    [data-theme="holofoil"] #lorcana-content .set-section.active::after,
    [data-theme="holofoil"] #custom-sets-grids .set-section.active::after { animation: none; }
}

/* ── Set header (Pokemon) ────────────────────────────────────────
 * Shown above the cards grid when a set is selected. Three regions:
 *   left   → set logo (large)
 *   middle → set name + meta (cards count · code · release date)
 *   right  → "Set Progress" label + percent · fraction + gradient bar
 * Landscape (wider viewports): flex-row, three columns side-by-side.
 * Portrait (≤640px): stacks to a single column, progress full-width.
 */
[data-theme="holofoil"] .set-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 18px 20px;
    margin-bottom: 16px;
    border-radius: 16px;
    background:
        radial-gradient(ellipse 80% 100% at 0% 50%,
            color-mix(in srgb, var(--block-color, var(--holo-violet)) 18%, transparent) 0%,
            transparent 60%),
        rgba(0, 0, 0, 0.45);
    border: 1px solid var(--holo-line);
    box-shadow:
        0 6px 26px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    position: relative;
}
[data-theme="holofoil"] .set-header-logo {
    flex: 0 0 auto;
    width: 140px;
    max-width: 30vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
[data-theme="holofoil"] .set-header-logo img {
    max-width: 100%;
    max-height: 70px;
    object-fit: contain;
    filter:
        drop-shadow(0 0 10px rgba(255, 255, 255, 0.18))
        drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}
[data-theme="holofoil"] .set-header-info {
    flex: 1 1 auto;
    min-width: 0;
}
[data-theme="holofoil"] .set-header-name {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--holo-violet);
    text-shadow: 0 0 18px rgba(192, 132, 252, 0.4);
    letter-spacing: -0.2px;
    line-height: 1.15;
}
[data-theme="holofoil"] .set-header-meta {
    margin-top: 6px;
    font-size: 0.78rem;
    color: var(--holo-ink-dim);
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-weight: 600;
}
[data-theme="holofoil"] .set-header-progress {
    flex: 0 0 auto;
    min-width: 220px;
    text-align: right;
}
[data-theme="holofoil"] .set-header-progress-label {
    font-size: 0.62rem;
    color: var(--holo-ink-faint);
    text-transform: uppercase;
    letter-spacing: 1.8px;
    font-weight: 700;
    margin-bottom: 4px;
}
[data-theme="holofoil"] .set-header-progress-stats {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--holo-ink);
    font-variant-numeric: tabular-nums;
    margin-bottom: 8px;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}
[data-theme="holofoil"] .set-header-progress-pct {
    color: var(--holo-pink);
    text-shadow: 0 0 10px rgba(236, 72, 153, 0.45);
}
[data-theme="holofoil"] .set-header-progress-sep {
    color: var(--holo-ink-faint);
    font-weight: 600;
}
[data-theme="holofoil"] .set-header-progress-frac {
    color: var(--holo-ink);
}
[data-theme="holofoil"] .set-header-progress-bar {
    height: 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}
[data-theme="holofoil"] .set-header-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--holo-pink), var(--holo-cyan));
    border-radius: 999px;
    box-shadow:
        0 0 10px rgba(236, 72, 153, 0.4),
        0 0 16px rgba(34, 211, 238, 0.25);
    transition: width 0.4s ease;
}

/* Portrait / narrow viewports: stack the three regions vertically so
 * the set logo and name don't fight for space with the progress block.
 * 640px chosen because below that the right-aligned progress would
 * collide with the set name on smaller phones. */
@media (max-width: 640px) {
    [data-theme="holofoil"] .set-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 16px;
    }
    [data-theme="holofoil"] .set-header-logo {
        width: 100%;
        max-width: none;
    }
    [data-theme="holofoil"] .set-header-logo img {
        max-height: 56px;
    }
    [data-theme="holofoil"] .set-header-info {
        width: 100%;
        text-align: left;
    }
    [data-theme="holofoil"] .set-header-name {
        font-size: 1.3rem;
    }
    [data-theme="holofoil"] .set-header-meta {
        font-size: 0.7rem;
        letter-spacing: 1.2px;
    }
    [data-theme="holofoil"] .set-header-progress {
        width: 100%;
        min-width: 0;
        text-align: left;
    }
    [data-theme="holofoil"] .set-header-progress-stats {
        margin-bottom: 6px;
        font-size: 0.88rem;
    }
}

/* ── Navigation section labels & layout overrides ───────────────── */

/* "Choose a [block|set] to view its [sets|cards]" helper text → styled
 * section label with a pokeball bullet (matches the mockup
 * `.section-label::before` pattern). The original copy is hidden via
 * font-size:0; the `::before` carries the visible // LABEL text.
 *
 * The bullet is the pokeball PNG that already ships with the header
 * (Images/header/pokeball.png) — same asset, no new files. */
[data-theme="holofoil"] .top-tab-content > .helper-text {
    font-size: 0;
    font-style: normal;
    color: transparent;
    text-align: left;
    margin: 8px 4px 12px;
    line-height: 1;
}
[data-theme="holofoil"] .top-tab-content > .helper-text::before {
    display: inline-block;
    font-size: 0.7rem;
    line-height: 14px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--holo-violet);
    font-weight: 700;
    font-style: normal;
    padding-left: 22px;
    background: url('Images/header/pokeball.png') left center / 14px 14px no-repeat;
    filter: drop-shadow(0 0 4px rgba(192, 132, 252, 0.7));
}
[data-theme="holofoil"] #pokemon-tcg-content > .helper-text::before  { content: '// ERA'; }
[data-theme="holofoil"] #lorcana-content > .helper-text::before      { content: '// SET'; }
[data-theme="holofoil"] #custom-sets-content > .helper-text::before  { content: '// CUSTOM SET'; }

/* Epic #497 — category section headers in the Custom Sets rail. Match the
   theme's violet `//` label aesthetic. */
[data-theme="holofoil"] .custom-set-category-header {
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.72rem;
    /* Lighter than --holo-violet so the label clears 4.5:1 even over the
       page's brightest radial-glow zones (WCAG 1.4.3). */
    color: #d8b4fe;
    font-weight: 700;
    text-shadow: 0 0 6px rgba(192, 132, 252, 0.45);
    margin: 12px 0 4px;
}
[data-theme="holofoil"] .custom-set-category-label::before {
    content: '// ';
    opacity: 0.85;
}
[data-theme="holofoil"] .custom-set-category-header::after {
    background: linear-gradient(90deg, rgba(192,132,252,0.5), rgba(192,132,252,0));
    box-shadow: 0 0 4px rgba(192,132,252,0.3);
}
[data-theme="holofoil"] .custom-set-category-count {
    color: #d8b4fe;
    background: rgba(192, 132, 252, 0.22);
}

/* When js/pokemon-tcg.js stamps a `data-count` attribute on the helper
 * text (e.g. "15 eras · 132 sets"), render it as a faded subtitle on
 * the same line — matches the mockup's "// ERA  15 ERAS · 132 SETS". */
[data-theme="holofoil"] .top-tab-content > .helper-text[data-count]::after {
    content: attr(data-count);
    display: inline-block;
    margin-left: 12px;
    font-size: 0.7rem;
    line-height: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(245, 243, 255, 0.38);
    font-weight: 700;
    font-style: normal;
}

/* Block grid — tighter minmax so more eras show per row */
[data-theme="holofoil"] .block-buttons {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    justify-content: initial;
}
/* New tile structure (mockup parity): swap to the year-range meta line +
 * dual-line stats (fraction · percent), hide the legacy single-line
 * stats. Per-era glow uses --block-color (set inline by JS). */
[data-theme="holofoil"] .block-btn .block-btn-stats { display: none; }
[data-theme="holofoil"] .block-btn .block-btn-meta {
    display: block;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
    margin-bottom: 10px;
    letter-spacing: 0.2px;
}
[data-theme="holofoil"] .block-btn .block-btn-stats-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
    font-size: 0.84rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
[data-theme="holofoil"] .block-btn .block-btn-fraction { color: #fff; }
[data-theme="holofoil"] .block-btn .block-btn-percent {
    color: var(--block-color, var(--holo-violet));
    text-shadow: 0 0 8px color-mix(in srgb, var(--block-color, var(--holo-violet)) 60%, transparent);
}

/* Mobile: 2-column block grid with the brand logo dominating the tile —
 * matches the new mockup. Two large tiles per row read as a card-shop
 * display, not a dense settings menu. */
@media (max-width: 767px) {
    [data-theme="holofoil"] .block-buttons {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }
    [data-theme="holofoil"] .block-btn {
        padding: 14px 12px 12px !important;
        border-radius: 14px;
    }
    [data-theme="holofoil"] .block-btn .block-btn-logo-wrapper {
        height: 56px;
        margin-bottom: 8px;
    }
    [data-theme="holofoil"] .block-btn .block-btn-logo {
        max-height: 52px;
    }
    [data-theme="holofoil"] .block-btn .block-btn-name {
        font-size: 0.92rem;
        margin-bottom: 2px;
        line-height: 1.15;
    }
    [data-theme="holofoil"] .block-btn .block-btn-meta {
        font-size: 0.66rem;
        margin-bottom: 8px;
    }
    [data-theme="holofoil"] .block-btn .block-btn-progress {
        margin-top: 4px;
        height: 5px;
    }
    [data-theme="holofoil"] .block-btn .block-btn-stats-row {
        font-size: 0.78rem;
        gap: 8px;
    }
    /* When an era is picked we want only the active tile visible — the
     * base hide-rule in styles.css handles that. Keep the single-column
     * layout so the active tile stretches full width. */
    [data-theme="holofoil"] .block-buttons.has-selection {
        grid-template-columns: 1fr !important;
    }
}


/* Set selection label — shows "// [Block Name]" above the set rail */
[data-theme="holofoil"] .set-selection-header {
    border-bottom: none;
    padding-bottom: 0;
    margin-top: 18px;
    margin-bottom: 10px;
}
[data-theme="holofoil"] .set-selection-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--holo-violet);
    font-weight: 700;
    opacity: 1;
    padding-left: 22px;
    background: url('Images/header/pokeball.png') left center / 14px 14px no-repeat;
    filter: drop-shadow(0 0 4px rgba(192, 132, 252, 0.7));
}
[data-theme="holofoil"] .set-selection-title::before {
    content: '// ';
}

/* Set rail — horizontal scroll on desktop for Pokemon only.
 *
 * Pokemon hides `.set-buttons` behind a `.active` toggle (one container
 * per block, only the picked block's is shown) and uses a horizontal
 * rail. Lorcana and Custom Sets fall back to the base `.set-buttons`
 * grid in styles.css (wrapping rows of 200–260px tiles) — horizontal
 * scroll inside a vertical page is undiscoverable. */
[data-theme="holofoil"] #pokemon-tcg-content .set-buttons.active {
    display: flex !important;
    flex-direction: row;
    grid-template-columns: unset;
    justify-content: initial;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    gap: 10px;
    padding-bottom: 8px;
    margin-bottom: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(192, 132, 252, 0.3) transparent;
}
[data-theme="holofoil"] #pokemon-tcg-content .set-buttons::-webkit-scrollbar {
    height: 4px;
}
[data-theme="holofoil"] #pokemon-tcg-content .set-buttons::-webkit-scrollbar-thumb {
    background: rgba(192, 132, 252, 0.3);
    border-radius: 999px;
}

/* Tablet (769–1024px): keep the Pokemon rail but add a right-edge fade
 * so users see content extends beyond the viewport. Lorcana and Custom
 * Sets stay on the wrapping base grid. */
@media (min-width: 769px) and (max-width: 1024px) {
    [data-theme="holofoil"] #pokemon-tcg-content .set-buttons.active {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
                mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    }
    [data-theme="holofoil"] #pokemon-tcg-content .set-buttons.active .set-btn {
        width: 170px;
    }
}

/* Mobile (≤768px): drop the horizontal rail entirely for Pokemon, and
 * make sure all three TCGs render as a tight multi-column grid (the base
 * `auto-fit, minmax(200px, 260px)` collapses to single-column on narrow
 * viewports — explicit 3-col here keeps the mobile layout dense). */
@media (max-width: 768px) {
    [data-theme="holofoil"] #pokemon-tcg-content .set-buttons.active,
    [data-theme="holofoil"] #lorcana-content .set-buttons,
    [data-theme="holofoil"] #custom-sets-content .set-buttons {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        overflow-x: visible;
        scroll-snap-type: none;
        -webkit-mask-image: none;
                mask-image: none;
        padding-bottom: 0;
    }
    [data-theme="holofoil"] #pokemon-tcg-content .set-buttons.active .set-btn,
    [data-theme="holofoil"] #lorcana-content .set-buttons .set-btn,
    [data-theme="holofoil"] #custom-sets-content .set-buttons .set-btn {
        width: auto;
        flex: initial;
        scroll-snap-align: none;
        min-height: 96px;
    }
    [data-theme="holofoil"] .set-buttons.has-selection {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 480px) {
    [data-theme="holofoil"] #pokemon-tcg-content .set-buttons.active,
    [data-theme="holofoil"] #lorcana-content .set-buttons,
    [data-theme="holofoil"] #custom-sets-content .set-buttons {
        grid-template-columns: repeat(2, 1fr);
    }
    [data-theme="holofoil"] #pokemon-tcg-content .set-buttons.active .set-btn,
    [data-theme="holofoil"] #lorcana-content .set-buttons .set-btn,
    [data-theme="holofoil"] #custom-sets-content .set-buttons .set-btn {
        padding: 10px 8px;
    }
    [data-theme="holofoil"] #pokemon-tcg-content .set-buttons.active .set-btn .set-btn-logo-wrapper,
    [data-theme="holofoil"] #lorcana-content .set-buttons .set-btn .set-btn-logo-wrapper,
    [data-theme="holofoil"] #custom-sets-content .set-buttons .set-btn .set-btn-logo-wrapper {
        height: 48px;
        margin-bottom: 6px;
    }
    [data-theme="holofoil"] #pokemon-tcg-content .set-buttons.active .set-btn .set-btn-logo,
    [data-theme="holofoil"] #lorcana-content .set-buttons .set-btn .set-btn-logo,
    [data-theme="holofoil"] #custom-sets-content .set-buttons .set-btn .set-btn-logo {
        max-height: 44px;
    }
    [data-theme="holofoil"] .set-buttons.has-selection {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ── Block buttons (Pokemon era picker) ──────────────────────────── */

[data-theme="holofoil"] .block-btn {
    /* Holofoil card effect — DARK interior with the era color glowing
     * from the top edge (and a softer bottom-edge halo), plus an
     * iridescent diagonal shimmer. The contrast between the dark
     * vignette and the colored edges is what makes it read as a
     * "holographic card" rather than a flat color panel.
     *
     * --block-color is set inline by js/pokemon-tcg.js per era. */
    background:
        /* Iridescent diagonal shimmer streak (always visible, low
         * opacity). The moving shimmer on ::before still kicks in on
         * hover; this layer keeps the foil look at rest. */
        linear-gradient(120deg,
            transparent 30%,
            rgba(255, 255, 255, 0.06) 45%,
            rgba(192, 132, 252, 0.05) 50%,
            rgba(34, 211, 238, 0.04) 55%,
            transparent 70%),
        /* Top-edge color glow — positioned ABOVE the tile so only the
         * outer band of the radial reads inside the tile, giving a
         * sharp edge-glow rather than a uniform wash. */
        radial-gradient(ellipse 130% 70% at 50% -10%,
            color-mix(in srgb, var(--block-color, #c084fc) 85%, transparent) 0%,
            color-mix(in srgb, var(--block-color, #c084fc) 30%, transparent) 30%,
            transparent 60%),
        /* Bottom-edge soft halo — completes the "card framed in light"
         * silhouette so the tile reads as a single object, not a
         * top-only glow. */
        radial-gradient(ellipse 120% 55% at 50% 110%,
            color-mix(in srgb, var(--block-color, #c084fc) 50%, transparent) 0%,
            transparent 65%),
        /* Dark vignette center — keeps the logo + text contrast crisp
         * against the colored edges. */
        radial-gradient(ellipse 90% 85% at 50% 55%,
            rgba(0, 0, 0, 0.55) 25%,
            rgba(0, 0, 0, 0.85) 100%);
    border: 1px solid color-mix(in srgb, var(--block-color, #c084fc) 80%, transparent);
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.55),
        0 0 36px color-mix(in srgb, var(--block-color, #c084fc) 50%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 -10px 22px color-mix(in srgb, var(--block-color, #c084fc) 25%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 16px 14px 14px;
    border-radius: 16px;
}
[data-theme="holofoil"] .block-btn::before {
    background: linear-gradient(120deg,
        transparent 40%,
        color-mix(in srgb, var(--block-color, #c084fc) 25%, transparent) 50%,
        transparent 60%);
    background-size: 200% 100%;
    background-position: -100% 0;
    transition: background-position 0.7s;
}
[data-theme="holofoil"] .block-btn:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--block-color, #c084fc) 85%, #fff);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.55),
        0 0 42px color-mix(in srgb, var(--block-color, #c084fc) 65%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme="holofoil"] .block-btn:hover::before {
    background-position: 100% 0;
}
[data-theme="holofoil"] .block-btn.active {
    border-color: var(--block-color, var(--holo-violet));
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.6),
        0 0 52px color-mix(in srgb, var(--block-color, #c084fc) 75%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
[data-theme="holofoil"] .block-btn.active::before {
    background-position: 100% 0;
}
[data-theme="holofoil"] .block-btn-name {
    color: #fff;
    /* Mockup sizing — was 1.1rem in styles.css which made the era tiles
     * read as huge ad cards instead of a dense card-shop grid. */
    font-size: 0.86rem;
    margin-bottom: 4px;
}
[data-theme="holofoil"] .block-btn-stats {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.7rem;
}
[data-theme="holofoil"] .block-btn-logo-wrapper {
    /* Make the era brand logo dominate the tile (mockup parity). */
    height: 64px;
    margin-bottom: 10px;
}
[data-theme="holofoil"] .block-btn-logo {
    max-height: 60px;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.18))
            drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

/* Block progress bar */
[data-theme="holofoil"] .block-btn-progress {
    background: rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}
[data-theme="holofoil"] .block-btn-progress-fill {
    background: linear-gradient(90deg,
        var(--block-color, var(--holo-violet)),
        color-mix(in srgb, var(--block-color, var(--holo-violet)) 50%, #fff));
    box-shadow: 0 0 8px var(--block-color, var(--holo-violet));
}

/* ── Promos & Specials toggle (holofoil) ─────────────────────────── */
[data-theme="holofoil"] .promos-toggle-btn {
    background: rgba(192, 132, 252, 0.08);
    border: 1px dashed var(--holo-line-strong);
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .promos-toggle-btn:hover,
[data-theme="holofoil"] .promos-toggle-btn:focus-visible {
    background: rgba(192, 132, 252, 0.14);
    border-color: var(--holo-violet);
    color: var(--holo-violet);
    box-shadow: 0 0 14px var(--holo-glow-violet);
}
[data-theme="holofoil"] .promos-toggle-icon {
    color: var(--holo-violet);
}
[data-theme="holofoil"] .promos-toggle-count {
    background: rgba(192, 132, 252, 0.18);
    color: var(--holo-violet);
}

/* ── Set buttons (each set tile within a block) ──────────────────── */

[data-theme="holofoil"] .set-btn {
    /* Same holofoil-card treatment as the era tiles — dark interior,
     * color glow at top + bottom edges, iridescent diagonal shimmer.
     * --block-color is set inline by JS: era color (Pokemon),
     * per-set color (Lorcana), or user themeColor (Custom Sets). */
    background:
        linear-gradient(120deg,
            transparent 30%,
            rgba(255, 255, 255, 0.05) 45%,
            rgba(192, 132, 252, 0.04) 50%,
            rgba(34, 211, 238, 0.03) 55%,
            transparent 70%),
        radial-gradient(ellipse 120% 70% at 50% -10%,
            color-mix(in srgb, var(--block-color, var(--holo-violet)) 80%, transparent) 0%,
            color-mix(in srgb, var(--block-color, var(--holo-violet)) 25%, transparent) 30%,
            transparent 60%),
        radial-gradient(ellipse 115% 50% at 50% 110%,
            color-mix(in srgb, var(--block-color, var(--holo-violet)) 45%, transparent) 0%,
            transparent 65%),
        radial-gradient(ellipse 90% 85% at 50% 55%,
            rgba(0, 0, 0, 0.50) 25%,
            rgba(0, 0, 0, 0.80) 100%);
    border: 1px solid color-mix(in srgb, var(--block-color, var(--holo-violet)) 75%, transparent);
    color: var(--holo-ink);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.45),
        0 0 26px color-mix(in srgb, var(--block-color, var(--holo-violet)) 45%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -8px 18px color-mix(in srgb, var(--block-color, var(--holo-violet)) 22%, transparent);
    /* scroll-rail sizing */
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: 200px;
    padding: 14px;
    border-radius: 14px;
}
/* Condense the logo area in the horizontal rail */
[data-theme="holofoil"] .set-btn .set-btn-logo-wrapper {
    height: 58px;
    margin-bottom: 8px;
}
[data-theme="holofoil"] .set-btn .set-btn-logo {
    max-height: 54px;
    filter:
        drop-shadow(0 0 8px rgba(255, 255, 255, 0.16))
        drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
}
[data-theme="holofoil"] .set-btn .set-btn-logo-fallback {
    font-size: 1.8rem;
}
[data-theme="holofoil"] .set-btn:hover {
    /* Brighter color flare on hover — pulls in the era color rather
     * than the generic violet glow. */
    border-color: color-mix(in srgb, var(--block-color, var(--holo-violet)) 85%, #fff);
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.45),
        0 0 32px color-mix(in srgb, var(--block-color, var(--holo-violet)) 60%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}
[data-theme="holofoil"] .set-btn.active {
    /* Active state pumps the same edge-glow + shimmer pattern, doesn't
     * flood the interior — keeps the "holofoil" feel while signaling
     * selection. */
    background:
        linear-gradient(120deg,
            transparent 25%,
            rgba(255, 255, 255, 0.10) 45%,
            rgba(192, 132, 252, 0.07) 50%,
            rgba(34, 211, 238, 0.06) 55%,
            transparent 75%),
        radial-gradient(ellipse 130% 75% at 50% -8%,
            color-mix(in srgb, var(--block-color, var(--holo-violet)) 95%, transparent) 0%,
            color-mix(in srgb, var(--block-color, var(--holo-violet)) 35%, transparent) 35%,
            transparent 65%),
        radial-gradient(ellipse 120% 55% at 50% 108%,
            color-mix(in srgb, var(--block-color, var(--holo-violet)) 60%, transparent) 0%,
            transparent 65%),
        radial-gradient(ellipse 85% 80% at 50% 55%,
            rgba(0, 0, 0, 0.40) 25%,
            rgba(0, 0, 0, 0.70) 100%);
    border-color: var(--block-color, var(--holo-violet));
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.50),
        0 0 44px color-mix(in srgb, var(--block-color, var(--holo-violet)) 80%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme="holofoil"] .set-btn-name {
    color: var(--holo-ink);
}
[data-theme="holofoil"] .set-btn-logo-fallback {
    color: var(--holo-ink);
}
[data-theme="holofoil"] .set-btn-stats {
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .set-btn-progress {
    background: rgba(0, 0, 0, 0.5);
}
[data-theme="holofoil"] .set-btn-progress-fill {
    background: linear-gradient(90deg, var(--holo-violet), var(--holo-pink));
    box-shadow: 0 0 6px var(--holo-glow-violet);
}
[data-theme="holofoil"] .set-btn .set-release-date {
    color: var(--holo-ink-faint);
}

/* ── Rarity filter pills (.rarity-btn) ───────────────────────────── */

[data-theme="holofoil"] .rarity-btn {
    background: rgba(0, 0, 0, 0.4);
    border-color: var(--holo-line);
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .rarity-btn:focus-visible {
    outline-color: var(--holo-violet);
}
[data-theme="holofoil"] .rarity-btn:hover {
    background: rgba(192, 132, 252, 0.10);
    border-color: var(--holo-violet);
    color: var(--holo-violet);
}
[data-theme="holofoil"] .rarity-btn.active {
    background: linear-gradient(135deg, var(--holo-violet), var(--holo-pink));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 14px var(--holo-glow-violet);
}

/* Graded-filter pills stay amber (the project uses amber to mean "graded"
 * across the whole UI). Just retint the inactive state for dark backdrop. */
[data-theme="holofoil"] .filter-pill-graded {
    background: rgba(0, 0, 0, 0.4);
    border-color: var(--holo-line);
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .filter-pill-graded:hover {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.45);
    color: #ffeab3;
}
[data-theme="holofoil"] .filter-pill-graded.active {
    background: rgba(245, 158, 11, 0.35);
    border-color: rgba(245, 158, 11, 0.75);
    color: #ffeab3;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.4);
}

/* ── Card items (grid view) ──────────────────────────────────────── */

[data-theme="holofoil"] .card-item {
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid var(--holo-line);
    overflow: hidden;
}
/* Iridescent border-shimmer on hover ONLY (not continuous) so the cost
 * stays bounded even on a 266-card set view. Mask-composite hides the
 * gradient inside the border, leaving only the 1px outline visible. */
[data-theme="holofoil"] .card-item::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(120deg,
        transparent 30%,
        var(--holo-pink),
        var(--holo-violet),
        var(--holo-cyan),
        transparent 70%);
    background-size: 300% 300%;
    background-position: -100% 0;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    transition: background-position 0.8s;
    pointer-events: none;
    opacity: 0;
}
[data-theme="holofoil"] .card-item:hover {
    transform: translateY(-3px);
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.6),
        0 0 26px rgba(192, 132, 252, 0.25);
}
[data-theme="holofoil"] .card-item:hover::before {
    opacity: 1;
    background-position: 100% 0;
}
/* Touch devices — the hover-shimmer never fires there, so don't allocate
 * the compositor layer at all. Saves real paint cost on iPad. */
@media (hover: none) {
    [data-theme="holofoil"] .card-item::before { display: none; }
}
/* Completed cards — non-dimming lime tint + glow + lime "✓ COMPLETE" bar. */
[data-theme="holofoil"] .card-item.all-collected {
    background: rgba(212, 255, 91, 0.08);
    border-color: rgba(212, 255, 91, 0.55);
    box-shadow: 0 0 8px rgba(212, 255, 91, 0.15);
}
[data-theme="holofoil"] .card-item.all-collected::after,
[data-theme="holofoil"] .card.completed::after {
    color: #14180a;
    background: var(--holo-rainbow);
    background-size: 300% 100%;
    animation: holo-shimmer 6s linear infinite;
}
[data-theme="holofoil"] .completed-lock,
[data-theme="holofoil"] .completed-lock svg {
    color: rgba(212, 255, 91, 1);
    fill: rgba(212, 255, 91, 1);
}

/* ── Card-list rows (list view) ──────────────────────────────────── */

[data-theme="holofoil"] .card-list {
    background: rgba(0, 0, 0, 0.35);
    border-color: var(--holo-line);
}
[data-theme="holofoil"] .card-list-row {
    border-bottom-color: var(--holo-line);
}
[data-theme="holofoil"] .card-list-row:hover {
    background: rgba(192, 132, 252, 0.10);
}
[data-theme="holofoil"] .card-list-row:focus-visible {
    outline-color: var(--holo-cyan);
}
[data-theme="holofoil"] .card-list-row.all-collected {
    background: rgba(212, 255, 91, 0.06);
}
[data-theme="holofoil"] .card-list-row.all-collected::before {
    background: linear-gradient(180deg,
        rgba(212, 255, 91, 1),
        rgba(170, 214, 60, 1));
}
[data-theme="holofoil"] .card-list-row .row-num {
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .card-list-row .row-name-text {
    color: var(--holo-ink);
}

/* ── Variant checkboxes (under each card thumbnail) ──────────────── */

[data-theme="holofoil"] .variant-checkbox {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--holo-line);
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .variant-checkbox:hover {
    color: var(--holo-violet);
    border-color: var(--holo-violet);
}
[data-theme="holofoil"] .variant-checkbox.checked {
    background: linear-gradient(135deg, var(--holo-violet), var(--holo-pink));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 10px var(--holo-glow-violet);
}

/* ── Card modal (large image + variant grid) ─────────────────────── */

[data-theme="holofoil"] .card-modal {
    /* The overlay scrim — darken with violet undertone so the modal
     * doesn't feel detached from the rest of the chrome. */
    background: rgba(7, 0, 15, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
[data-theme="holofoil"] .card-modal-content {
    background:
        linear-gradient(135deg, rgba(192, 132, 252, 0.10), rgba(236, 72, 153, 0.06)),
        rgba(15, 5, 35, 0.92);
    border: 1px solid var(--holo-line);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.7),
        0 0 40px var(--holo-glow-violet),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color: var(--holo-ink);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
[data-theme="holofoil"] .card-modal-close {
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .card-modal-close:hover {
    color: var(--holo-violet);
}
[data-theme="holofoil"] .card-modal-title {
    color: var(--holo-ink);
}
[data-theme="holofoil"] .card-modal-number,
[data-theme="holofoil"] .card-modal-set,
[data-theme="holofoil"] .card-modal-rarity {
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .card-modal-variants-title {
    color: var(--holo-violet);
    text-transform: uppercase;
    letter-spacing: 1.4px;
}
[data-theme="holofoil"] .card-modal-variant-item {
    background: rgba(0, 0, 0, 0.5);
    border-color: var(--holo-line);
    color: var(--holo-ink);
}
[data-theme="holofoil"] .card-modal-variant-item:hover {
    background: rgba(192, 132, 252, 0.10);
    border-color: var(--holo-violet);
}
[data-theme="holofoil"] .card-modal-variant-item.collected {
    background: rgba(212, 255, 91, 0.10);
    border-color: rgba(212, 255, 91, 0.45);
}
[data-theme="holofoil"] .card-modal-variant-checkbox {
    accent-color: var(--holo-violet);
}

/* Modal price tag and owned/graded count pills — retint without losing
 * the badge meaning (owned-green, graded-amber). */
[data-theme="holofoil"] .card-modal-price {
    color: var(--holo-lime);
}
[data-theme="holofoil"] .card-modal-owned-badge {
    background: rgba(212, 255, 91, 0.15);
    border: 1px solid rgba(212, 255, 91, 0.4);
    color: var(--holo-lime);
}
[data-theme="holofoil"] .card-modal-graded-badge {
    background: rgba(245, 158, 11, 0.18);
    border: 1px solid rgba(245, 158, 11, 0.45);
    color: #ffeab3;
}

/* ════════════════════════════════════════════════════════════════════
 * Story 4 — Auth modal + landing overlay + guest banner + toasts
 * ════════════════════════════════════════════════════════════════════
 *
 * The auth modal and landing overlay are the first thing a new visitor sees.
 * The guest banner sticks around for everyone who opts to browse without
 * signing in. The collect-confirm chip is the highest-frequency interaction
 * surface — every time the user marks a card collected they see it.
 */

/* ── Auth modal ──────────────────────────────────────────────────── */

[data-theme="holofoil"] .auth-modal {
    background: rgba(7, 0, 15, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
[data-theme="holofoil"] .auth-modal-content {
    background:
        linear-gradient(135deg, rgba(192, 132, 252, 0.10), rgba(236, 72, 153, 0.06)),
        rgba(15, 5, 35, 0.95);
    border: 1px solid var(--holo-line);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.7),
        0 0 32px var(--holo-glow-violet);
    color: var(--holo-ink);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
[data-theme="holofoil"] .auth-modal-title {
    background: var(--holo-rainbow);
    background-size: 300% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
[data-theme="holofoil"] .auth-modal-text {
    color: var(--holo-ink-dim);
}

/* ── Guest banner ────────────────────────────────────────────────── */

[data-theme="holofoil"] .guest-banner {
    background:
        linear-gradient(90deg, rgba(192, 132, 252, 0.12), rgba(236, 72, 153, 0.08)),
        rgba(15, 5, 35, 0.92);
    border-bottom: 1px solid var(--holo-line);
    color: var(--holo-ink);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
[data-theme="holofoil"] .guest-banner-dot {
    background: var(--holo-pink);
    box-shadow: 0 0 8px var(--holo-glow-pink);
}
[data-theme="holofoil"] .guest-banner-btn {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--holo-line);
    color: var(--holo-ink);
}
[data-theme="holofoil"] .guest-banner-btn:hover {
    background: rgba(192, 132, 252, 0.15);
    border-color: var(--holo-violet);
}
[data-theme="holofoil"] .guest-banner-btn.primary {
    background: linear-gradient(135deg, var(--holo-violet), var(--holo-pink));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 14px var(--holo-glow-violet);
}
[data-theme="holofoil"] .guest-banner-btn.primary:hover {
    box-shadow: 0 0 20px rgba(192, 132, 252, 0.7);
}

/* ── Landing overlay (pre-sign-in marketing surface) ─────────────── */

[data-theme="holofoil"] .landing-overlay {
    background:
        radial-gradient(ellipse 110% 65% at 0% 0%,    rgba(236, 72, 153, 0.52), transparent),
        radial-gradient(ellipse 110% 65% at 100% 100%, rgba(192, 132, 252, 0.46), transparent),
        radial-gradient(ellipse 90%  80% at 50% 40%,   rgba(168, 85, 247, 0.20), transparent),
        linear-gradient(180deg, var(--holo-bg-1) 0%, var(--holo-bg-2) 50%, var(--holo-bg-3) 100%);
    color: var(--holo-ink);
}
[data-theme="holofoil"] .landing-card {
    /* js/landing.js (Story 7) emits violet fill/stroke directly when
     * holofoil is active — no hue-rotate needed. Just add the glow. */
    filter: drop-shadow(0 4px 12px var(--holo-glow-violet));
}
[data-theme="holofoil"] .landing-pokeball-accent {
    filter:
        drop-shadow(0 0 10px var(--holo-glow-pink))
        drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}
[data-theme="holofoil"] .landing-logo {
    filter:
        drop-shadow(0 0 14px var(--holo-glow-violet))
        drop-shadow(0 0 6px var(--holo-glow-pink))
        brightness(1.04);
}
[data-theme="holofoil"] .landing-headline {
    background: var(--holo-rainbow);
    background-size: 300% 100%;
    animation: holo-shimmer 8s linear infinite;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
[data-theme="holofoil"] .landing-subcopy {
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .landing-char {
    filter:
        drop-shadow(0 2px 12px var(--holo-glow-violet))
        drop-shadow(0 0 6px var(--holo-glow-pink));
}
[data-theme="holofoil"] .landing-marquee {
    border-top: 1px solid var(--holo-line);
    border-bottom: 1px solid var(--holo-line);
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
[data-theme="holofoil"] .landing-marquee-item img {
    /* Set logos on the marquee are typically white-on-transparent; the dark
     * holofoil backdrop already showcases them well. Add a subtle glow. */
    filter: drop-shadow(0 0 8px var(--holo-glow-violet));
}
[data-theme="holofoil"] .landing-features {
    color: var(--holo-ink);
}

/* ── Action-restored toast (post-sign-in confirmation) ───────────── */

[data-theme="holofoil"] .action-restored-toast {
    background: rgba(15, 5, 35, 0.92);
    border: 1px solid var(--holo-lime);
    color: var(--holo-lime);
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.6),
        0 0 18px var(--holo-glow-lime);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ── Collect-confirm chip (mark/unmark cards) ───────────────────────
 * Highest-frequency UI on the site. Keep the variant action button
 * visually punchy because tapping it is the core interaction. */

[data-theme="holofoil"] .collect-confirm-chip {
    background:
        linear-gradient(135deg, rgba(192, 132, 252, 0.12), rgba(236, 72, 153, 0.06)),
        rgba(15, 5, 35, 0.95);
    border: 1px solid var(--holo-line);
    color: var(--holo-ink);
    box-shadow:
        0 12px 36px rgba(0, 0, 0, 0.7),
        0 0 24px var(--holo-glow-violet);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
[data-theme="holofoil"] .collect-confirm-chip[data-state="error"] {
    border-color: var(--holo-pink);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7), 0 0 24px var(--holo-glow-pink);
}
[data-theme="holofoil"] .collect-confirm-title {
    color: var(--holo-ink);
}
[data-theme="holofoil"] .collect-confirm-meta {
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .collect-confirm-variant {
    color: var(--holo-violet);
    text-transform: uppercase;
    letter-spacing: 1.2px;
}
[data-theme="holofoil"] .collect-confirm-action {
    background: linear-gradient(135deg, var(--holo-violet), var(--holo-pink));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 14px var(--holo-glow-violet);
}
[data-theme="holofoil"] .collect-confirm-action:hover {
    box-shadow: 0 0 20px rgba(192, 132, 252, 0.75);
}
[data-theme="holofoil"] .collect-confirm-chip[data-mode="uncheck"] .collect-confirm-action {
    background: linear-gradient(135deg, var(--holo-pink), #f97316);
    box-shadow: 0 0 14px var(--holo-glow-pink);
}
[data-theme="holofoil"] .collect-confirm-cancel {
    background: rgba(0, 0, 0, 0.45);
    border-color: var(--holo-line);
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .collect-confirm-cancel:hover {
    border-color: var(--holo-violet);
    color: var(--holo-violet);
}
[data-theme="holofoil"] .collect-confirm-receipt {
    background:
        linear-gradient(135deg, rgba(212, 255, 91, 0.10), rgba(0, 0, 0, 0.85));
    border: 1px solid rgba(212, 255, 91, 0.35);
    color: var(--holo-ink);
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.6),
        0 0 18px var(--holo-glow-lime);
}
[data-theme="holofoil"] .collect-confirm-receipt-icon {
    color: var(--holo-lime);
}
[data-theme="holofoil"] .collect-confirm-receipt-undo {
    background: transparent;
    border: 1px solid var(--holo-line);
    color: var(--holo-cyan);
}
[data-theme="holofoil"] .collect-confirm-receipt-undo:hover {
    border-color: var(--holo-cyan);
    background: rgba(34, 211, 238, 0.1);
}

/* ════════════════════════════════════════════════════════════════════
 * Story 5 — Scanner UI + result modal + grade picker
 * ════════════════════════════════════════════════════════════════════
 *
 * The scanner is a modal-within-a-modal pattern: .scan-modal is the
 * full-screen overlay, .scan-modal-content is the floating panel.
 * Each stage (.scan-stage-*) is shown/hidden by JS via data-stage.
 * The grade picker and graded-instance section live inside the same
 * panel and inherit its glass treatment.
 */

/* ── Floating action button (camera icon, fixed bottom-right) ─────── */

[data-theme="holofoil"] .scan-fab {
    background: linear-gradient(135deg, var(--holo-violet), var(--holo-pink));
    border: none;
    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.5),
        0 0 28px var(--holo-glow-violet);
    color: #fff;
}
[data-theme="holofoil"] .scan-fab:hover {
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(192, 132, 252, 0.7);
}

/* ── Scanner modal overlay + panel ──────────────────────────────────── */

[data-theme="holofoil"] .scan-modal {
    background: rgba(7, 0, 15, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
[data-theme="holofoil"] .scan-modal-content {
    background:
        linear-gradient(135deg, rgba(192, 132, 252, 0.10), rgba(236, 72, 153, 0.06)),
        rgba(15, 5, 35, 0.95);
    border: 1px solid var(--holo-line);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.7),
        0 0 40px var(--holo-glow-violet),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color: var(--holo-ink);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
[data-theme="holofoil"] .scan-modal-close {
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .scan-modal-close:hover {
    color: var(--holo-violet);
}
[data-theme="holofoil"] .scan-modal-scope {
    color: var(--holo-ink-dim);
    letter-spacing: 0.6px;
}

/* ── Scanner action buttons (.scan-btn family) ────────────────────── */

[data-theme="holofoil"] .scan-btn {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--holo-line);
    color: var(--holo-ink);
}
[data-theme="holofoil"] .scan-btn:hover {
    border-color: var(--holo-violet);
    background: rgba(192, 132, 252, 0.10);
}
[data-theme="holofoil"] .scan-btn-primary {
    background: linear-gradient(135deg, var(--holo-violet), var(--holo-pink));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 16px var(--holo-glow-violet);
}
[data-theme="holofoil"] .scan-btn-primary:hover {
    box-shadow: 0 0 24px rgba(192, 132, 252, 0.75);
}
[data-theme="holofoil"] .scan-btn-secondary {
    background: rgba(0, 0, 0, 0.5);
    border-color: var(--holo-line);
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .scan-btn-secondary:hover {
    border-color: var(--holo-violet);
    color: var(--holo-violet);
}
[data-theme="holofoil"] .scan-btn-switch {
    background: rgba(0, 0, 0, 0.5);
    border-color: var(--holo-line);
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .scan-btn-switch:hover {
    border-color: var(--holo-cyan);
    color: var(--holo-cyan);
}
[data-theme="holofoil"] .scan-btn-link {
    background: none;
    border-color: transparent;
    color: var(--holo-cyan);
}
[data-theme="holofoil"] .scan-btn-link:hover {
    color: #fff;
    text-decoration: underline;
}

/* ── Loading + error stages ───────────────────────────────────────── */

[data-theme="holofoil"] .scan-spinner {
    border-color: var(--holo-line);
    border-top-color: var(--holo-violet);
}
[data-theme="holofoil"] .scan-error-message {
    color: var(--holo-ink);
}
[data-theme="holofoil"] .scan-error-help {
    color: var(--holo-ink-dim);
}

/* ── Manual entry stage ───────────────────────────────────────────── */

[data-theme="holofoil"] .scan-manual-note {
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .scan-manual-field {
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .scan-manual-field input,
[data-theme="holofoil"] .scan-manual-field select {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--holo-line);
    color: var(--holo-ink);
}
[data-theme="holofoil"] .scan-manual-field input:focus,
[data-theme="holofoil"] .scan-manual-field select:focus {
    outline: none;
    border-color: var(--holo-violet);
    box-shadow: 0 0 10px var(--holo-glow-violet);
}
[data-theme="holofoil"] .scan-manual-field select option {
    background: rgba(15, 5, 35, 0.98);
    color: var(--holo-ink);
}
[data-theme="holofoil"] .scan-manual-error {
    color: var(--holo-pink);
}

/* ── Live preview stage (video feed + card frame) ────────────────── */

[data-theme="holofoil"] .scan-card-frame {
    border-color: var(--holo-violet);
    box-shadow:
        0 0 0 1px rgba(192, 132, 252, 0.3),
        inset 0 0 24px rgba(192, 132, 252, 0.08);
}
[data-theme="holofoil"] .scan-status {
    background: rgba(15, 5, 35, 0.75);
    border: 1px solid var(--holo-line);
    color: var(--holo-ink);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
[data-theme="holofoil"] .scan-status-spinner {
    border-color: var(--holo-line);
    border-top-color: var(--holo-violet);
}
[data-theme="holofoil"] .scan-status-text {
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .scan-toast {
    background: rgba(15, 5, 35, 0.9);
    border: 1px solid var(--holo-lime);
    color: var(--holo-lime);
    box-shadow: 0 0 16px var(--holo-glow-lime);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
[data-theme="holofoil"] .scan-bulk-toggle {
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .scan-bulk-count {
    color: var(--holo-cyan);
}

/* ── Result stage ─────────────────────────────────────────────────── */

[data-theme="holofoil"] .scan-result-card-name {
    color: var(--holo-ink);
}
[data-theme="holofoil"] .scan-result-card-meta {
    color: var(--holo-ink-dim);
}

/* ── Disambiguation + custom-picker + CLIP carousel stages ──────── */

[data-theme="holofoil"] .scan-disambig-title,
[data-theme="holofoil"] .scan-picker-title,
[data-theme="holofoil"] .scan-clip-title {
    color: var(--holo-violet);
    text-transform: uppercase;
    letter-spacing: 1.4px;
}
[data-theme="holofoil"] .scan-disambig-list li,
[data-theme="holofoil"] .scan-picker-list li {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--holo-line);
    color: var(--holo-ink);
}
[data-theme="holofoil"] .scan-disambig-list li:hover,
[data-theme="holofoil"] .scan-picker-list li:hover {
    background: rgba(192, 132, 252, 0.12);
    border-color: var(--holo-violet);
}
[data-theme="holofoil"] .scan-clip-carousel {
    border-color: var(--holo-line);
}
[data-theme="holofoil"] .scan-clip-bad-frame-message {
    color: var(--holo-ink-dim);
}

/* ── Grade picker stage ───────────────────────────────────────────── */

[data-theme="holofoil"] .scan-grade-title {
    color: var(--holo-violet);
    text-transform: uppercase;
    letter-spacing: 1.4px;
}
[data-theme="holofoil"] .scan-grade-field {
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .scan-grade-field input {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--holo-line);
    color: var(--holo-ink);
}
[data-theme="holofoil"] .scan-grade-field input:focus {
    outline: none;
    border-color: var(--holo-violet);
    box-shadow: 0 0 10px var(--holo-glow-violet);
}
[data-theme="holofoil"] .scan-grade-company-btn {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--holo-line);
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .scan-grade-company-btn:hover,
[data-theme="holofoil"] .scan-grade-company-btn:focus-visible {
    border-color: var(--holo-violet);
    color: var(--holo-violet);
    background: rgba(192, 132, 252, 0.10);
}
[data-theme="holofoil"] .scan-grade-company-btn.active {
    background: linear-gradient(135deg, var(--holo-violet), var(--holo-pink));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 12px var(--holo-glow-violet);
}
[data-theme="holofoil"] .scan-grade-error {
    color: var(--holo-pink);
}

/* ── Graded-instance section (inside card modal) ─────────────────── */

[data-theme="holofoil"] .graded-instances-section {
    border-top: 1px solid var(--holo-line);
}
[data-theme="holofoil"] .graded-instances-title {
    color: var(--holo-violet);
    text-transform: uppercase;
    letter-spacing: 1.4px;
}
[data-theme="holofoil"] .graded-instance-row {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--holo-line);
    color: var(--holo-ink);
}
[data-theme="holofoil"] .graded-instance-row:hover {
    background: rgba(192, 132, 252, 0.08);
    border-color: var(--holo-violet);
}
[data-theme="holofoil"] .graded-instance-label {
    color: var(--holo-ink);
}
[data-theme="holofoil"] .graded-instance-cert {
    color: var(--holo-ink-faint);
}
[data-theme="holofoil"] .graded-instance-btn {
    background: rgba(0, 0, 0, 0.4);
    border-color: var(--holo-line);
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .graded-instance-btn:hover,
[data-theme="holofoil"] .graded-instance-btn:focus-visible {
    border-color: var(--holo-cyan);
    color: var(--holo-cyan);
}
[data-theme="holofoil"] .graded-instance-btn.graded-instance-remove:hover,
[data-theme="holofoil"] .graded-instance-btn.graded-instance-remove:focus-visible {
    border-color: var(--holo-pink);
    color: var(--holo-pink);
}

/* ── Graded pricing table (inside card modal) ────────────────────── */

[data-theme="holofoil"] .graded-pricing-cell {
    border-color: var(--holo-line);
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .graded-price-slot {
    color: var(--holo-lime);
}
[data-theme="holofoil"] .graded-comps-link {
    color: var(--holo-cyan);
}
[data-theme="holofoil"] .graded-comps-link:hover {
    color: #fff;
}

/* ── Card graded badge (amber pill shown on grid/list cards) ─────── */

[data-theme="holofoil"] .card-graded-badge {
    background: rgba(245, 158, 11, 0.22);
    border: 1px solid rgba(245, 158, 11, 0.50);
    color: #ffeab3;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.25);
}

/* ── Graded filter pills ──────────────────────────────────────────── */

[data-theme="holofoil"] .graded-filters {
    border-top: 1px solid var(--holo-line);
}

/* ════════════════════════════════════════════════════════════════════
 * Story 6 — Store Hunter + Symbol Dex + sealed-product + bulk bar
 * ════════════════════════════════════════════════════════════════════
 *
 * Three utility tabs that share the top-tab-content wrapper already
 * themed by Story 2's .top-tabs treatment. Each needs its own
 * inner chrome recolored to match the holofoil palette.
 */

/* ── Store Hunter (sf-*) ─────────────────────────────────────────── */

[data-theme="holofoil"] .sf-search-bar {
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid var(--holo-line);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
[data-theme="holofoil"] .sf-locate-btn {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--holo-line);
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .sf-locate-btn:hover {
    background: rgba(192, 132, 252, 0.12);
    border-color: var(--holo-violet);
    color: var(--holo-violet);
}
[data-theme="holofoil"] .sf-address-input {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--holo-line);
    color: var(--holo-ink);
}
[data-theme="holofoil"] .sf-address-input::placeholder {
    color: var(--holo-ink-faint);
}
[data-theme="holofoil"] .sf-address-input:focus {
    outline: none;
    border-color: var(--holo-violet);
    box-shadow: 0 0 10px var(--holo-glow-violet);
}
[data-theme="holofoil"] .sf-address-search-btn {
    background: linear-gradient(135deg, var(--holo-violet), var(--holo-pink));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 12px var(--holo-glow-violet);
}
[data-theme="holofoil"] .sf-address-search-btn:hover {
    box-shadow: 0 0 20px rgba(192, 132, 252, 0.7);
}
[data-theme="holofoil"] .sf-radius-wrap label {
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .sf-radius-select {
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid var(--holo-line);
    color: var(--holo-ink);
}
[data-theme="holofoil"] .sf-radius-select:focus {
    outline: none;
    border-color: var(--holo-violet);
    box-shadow: 0 0 8px var(--holo-glow-violet);
}
[data-theme="holofoil"] .sf-status-msg {
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .sf-status-error {
    color: var(--holo-pink);
}
[data-theme="holofoil"] .sf-status-info {
    color: var(--holo-cyan);
}
[data-theme="holofoil"] .sf-loading-overlay {
    background: rgba(7, 0, 15, 0.65);
    color: var(--holo-ink-dim);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
[data-theme="holofoil"] .sf-spinner {
    border-color: var(--holo-line);
    border-top-color: var(--holo-violet);
}
[data-theme="holofoil"] .sf-list-panel {
    background: rgba(0, 0, 0, 0.35);
    border-top: 1px solid var(--holo-line);
}
[data-theme="holofoil"] .sf-list-header {
    color: var(--holo-ink-dim);
    border-bottom: 1px solid var(--holo-line);
}
[data-theme="holofoil"] .sf-store-item {
    border-bottom: 1px solid var(--holo-line);
    color: var(--holo-ink);
}
[data-theme="holofoil"] .sf-store-item:hover {
    background: rgba(192, 132, 252, 0.08);
}
[data-theme="holofoil"] .sf-store-name {
    color: var(--holo-ink);
    font-weight: 700;
}
[data-theme="holofoil"] .sf-store-dist {
    color: var(--holo-cyan);
}
[data-theme="holofoil"] .sf-store-addr,
[data-theme="holofoil"] .sf-store-hours {
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .sf-store-link {
    color: var(--holo-violet);
}
[data-theme="holofoil"] .sf-store-link:hover {
    color: #fff;
}
[data-theme="holofoil"] .sf-popup-name {
    color: var(--holo-ink);
}
[data-theme="holofoil"] .sf-popup-links a {
    color: var(--holo-violet);
}
[data-theme="holofoil"] .sf-popup-links a:hover {
    color: #fff;
}
[data-theme="holofoil"] .sf-disclaimer {
    color: var(--holo-ink-faint);
    border-top: 1px solid var(--holo-line);
}

/* ── Symbol Dex (si-*) ───────────────────────────────────────────── */

[data-theme="holofoil"] .si-search-input {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--holo-line);
    color: var(--holo-ink);
}
[data-theme="holofoil"] .si-search-input::placeholder {
    color: var(--holo-ink-faint);
}
[data-theme="holofoil"] .si-search-input:focus {
    outline: none;
    border-color: var(--holo-violet);
    box-shadow: 0 0 10px var(--holo-glow-violet);
}
[data-theme="holofoil"] .si-description {
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .si-series-header {
    color: var(--holo-violet);
    text-transform: uppercase;
    letter-spacing: 1.4px;
    border-bottom: 1px solid var(--holo-line);
}
[data-theme="holofoil"] .si-symbol-item {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--holo-line);
}
[data-theme="holofoil"] .si-symbol-item:hover {
    background: rgba(192, 132, 252, 0.10);
    border-color: var(--holo-violet);
    box-shadow: 0 0 14px var(--holo-glow-violet);
    transform: translateY(-2px);
}
[data-theme="holofoil"] .si-symbol-code {
    color: var(--holo-violet);
    font-weight: 700;
}
[data-theme="holofoil"] .si-symbol-name {
    color: var(--holo-ink);
}
[data-theme="holofoil"] .si-symbol-year {
    color: var(--holo-ink-faint);
}
[data-theme="holofoil"] .si-error,
[data-theme="holofoil"] .si-empty {
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .si-loading {
    color: var(--holo-ink-faint);
}

/* ── Sealed products (sealed-*) ──────────────────────────────────── */

[data-theme="holofoil"] .sealed-item {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--holo-line);
    color: var(--holo-ink);
}
[data-theme="holofoil"] .sealed-item:hover {
    background: rgba(192, 132, 252, 0.08);
    border-color: var(--holo-violet);
    box-shadow: 0 0 18px var(--holo-glow-violet);
    transform: translateY(-3px);
}
[data-theme="holofoil"] .sealed-item.owned {
    background: linear-gradient(135deg,
        rgba(212, 255, 91, 0.06),
        rgba(0, 0, 0, 0.5));
    border-color: rgba(212, 255, 91, 0.35);
}
[data-theme="holofoil"] .sealed-img-placeholder {
    background: rgba(0, 0, 0, 0.4);
    border: 1px dashed var(--holo-line);
    color: var(--holo-ink-faint);
}
[data-theme="holofoil"] .sealed-name {
    color: var(--holo-ink);
    font-weight: 700;
}
[data-theme="holofoil"] .sealed-meta {
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .sealed-qty-btn {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--holo-line);
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .sealed-qty-btn:hover {
    background: rgba(192, 132, 252, 0.12);
    border-color: var(--holo-violet);
    color: var(--holo-violet);
}
[data-theme="holofoil"] .sealed-qty-value {
    color: var(--holo-ink);
}
[data-theme="holofoil"] .sealed-item.owned .sealed-qty-value {
    color: var(--holo-lime);
}
[data-theme="holofoil"] .sealed-empty,
[data-theme="holofoil"] .sealed-loading {
    color: var(--holo-ink-dim);
}

/* ── Bulk-edit action bar ─────────────────────────────────────────── */

[data-theme="holofoil"] .bulk-action-bar {
    background:
        linear-gradient(90deg, rgba(192, 132, 252, 0.12), rgba(236, 72, 153, 0.07)),
        rgba(15, 5, 35, 0.95);
    border-top: 1px solid var(--holo-line);
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.5), 0 0 24px var(--holo-glow-violet);
    color: var(--holo-ink);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
[data-theme="holofoil"] .bulk-action-bar-count {
    color: var(--holo-violet);
    font-weight: 700;
}
[data-theme="holofoil"] .bulk-action-btn {
    background: linear-gradient(135deg, var(--holo-violet), var(--holo-pink));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 12px var(--holo-glow-violet);
}
[data-theme="holofoil"] .bulk-action-btn:hover {
    box-shadow: 0 0 20px rgba(192, 132, 252, 0.7);
}
[data-theme="holofoil"] .bulk-action-btn-secondary {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--holo-line);
    color: var(--holo-ink-dim);
    box-shadow: none;
}
[data-theme="holofoil"] .bulk-action-btn-secondary:hover {
    border-color: var(--holo-violet);
    color: var(--holo-violet);
}
[data-theme="holofoil"] .bulk-action-select {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--holo-line);
    color: var(--holo-ink);
}
[data-theme="holofoil"] .bulk-action-select:focus-visible {
    outline: 2px solid var(--holo-cyan);
    outline-offset: 2px;
}
[data-theme="holofoil"] .bulk-action-select option {
    background: rgba(15, 5, 35, 0.98);
    color: var(--holo-ink);
}

/* ════════════════════════════════════════════════════════════════════
 * Story 6.5 — Coverage stragglers
 * ════════════════════════════════════════════════════════════════════
 *
 * Three surfaces a user can absolutely reach but that the Stories 2-6
 * coverage missed. Without these, clicking into any of them while on
 * Holofoil leaves a gold-on-navy island in the middle of the dark UI:
 *
 *   - Collection switcher panel (gear button → slide-out)
 *   - Custom-set editor modal (Create custom set flow)
 *   - Invite banner (collection-sharing accept/decline strip)
 *
 * Header dragonite silhouettes also pick up a hue-rotate on the image
 * element here, since their SVG `filter="url(#goldify)"` attribute is
 * hardcoded in index.html and CSS can't change that attribute directly.
 */

/* ── Header dragonite image — shift the goldified tint toward violet ── */

[data-theme="holofoil"] .header-pokemon-bg .card-bg image {
    filter: hue-rotate(220deg) saturate(1.15);
}

/* ── Collection switcher panel (slide-out from right) ────────────── */

[data-theme="holofoil"] .collection-panel {
    background:
        linear-gradient(180deg, rgba(192, 132, 252, 0.10), rgba(15, 5, 35, 0.96)),
        rgba(15, 5, 35, 0.96);
    border-left: 1px solid var(--holo-line);
    box-shadow:
        -4px 0 28px rgba(0, 0, 0, 0.7),
        -1px 0 20px var(--holo-glow-violet);
    color: var(--holo-ink);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
[data-theme="holofoil"] .collection-panel-header {
    border-bottom-color: var(--holo-line);
}
[data-theme="holofoil"] .collection-panel-title {
    color: var(--holo-violet);
    text-transform: uppercase;
    letter-spacing: 1.4px;
}
[data-theme="holofoil"] .collection-panel-close {
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .collection-panel-close:hover {
    color: var(--holo-violet);
}
[data-theme="holofoil"] .collection-list-item {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--holo-line);
    color: var(--holo-ink);
}
[data-theme="holofoil"] .collection-list-item:hover {
    background: rgba(192, 132, 252, 0.10);
    border-color: var(--holo-violet);
}
[data-theme="holofoil"] .collection-list-item.active {
    background: linear-gradient(135deg,
        rgba(192, 132, 252, 0.25),
        rgba(236, 72, 153, 0.15));
    border-color: var(--holo-violet);
    box-shadow: 0 0 16px var(--holo-glow-violet);
}
[data-theme="holofoil"] .collection-list-item-role {
    color: var(--holo-ink-faint);
}
[data-theme="holofoil"] .collection-panel-actions {
    border-top-color: var(--holo-line);
}
[data-theme="holofoil"] .collection-action-btn {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--holo-line);
    color: var(--holo-ink);
}
[data-theme="holofoil"] .collection-action-btn:hover {
    background: rgba(192, 132, 252, 0.12);
    border-color: var(--holo-violet);
    color: var(--holo-violet);
}
[data-theme="holofoil"] .collection-panel-overlay {
    background: rgba(7, 0, 15, 0.78);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ── Invite banner (collection sharing accept/decline) ───────────── */

[data-theme="holofoil"] .invite-banner {
    background:
        linear-gradient(135deg, rgba(192, 132, 252, 0.18), rgba(212, 255, 91, 0.10)),
        rgba(15, 5, 35, 0.96);
    border: 1px solid var(--holo-lime);
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.65),
        0 0 22px var(--holo-glow-lime);
    color: var(--holo-ink);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
[data-theme="holofoil"] .invite-btn.accept {
    background: var(--holo-lime);
    color: #0a1400;
    box-shadow: 0 0 14px var(--holo-glow-lime);
}
[data-theme="holofoil"] .invite-btn.accept:hover {
    box-shadow: 0 0 20px rgba(212, 255, 91, 0.65);
}
[data-theme="holofoil"] .invite-btn.decline {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--holo-line);
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .invite-btn.decline:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--holo-ink);
}

/* ── Custom-set editor modal (Create custom set flow) ────────────── */

[data-theme="holofoil"] .cse-modal {
    background: rgba(7, 0, 15, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
[data-theme="holofoil"] .cse-modal-content {
    background:
        linear-gradient(135deg, rgba(192, 132, 252, 0.10), rgba(236, 72, 153, 0.06)),
        rgba(15, 5, 35, 0.95);
    border: 1px solid var(--holo-line);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.7),
        0 0 32px var(--holo-glow-violet);
    color: var(--holo-ink);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
[data-theme="holofoil"] .cse-modal-header {
    border-bottom-color: var(--holo-line);
}
[data-theme="holofoil"] .cse-modal-header h2 {
    color: var(--holo-ink);
}
[data-theme="holofoil"] .cse-close {
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .cse-close:hover {
    color: var(--holo-violet);
}
/* Epic #497 Story 2 — Manage Categories rows pick up theme ink/line tokens
   instead of the hardcoded white-on-dark used by the default theme. */
[data-theme="holofoil"] .csc-row,
[data-theme="holofoil"] .csc-assign-row {
    border-bottom-color: var(--holo-line);
}
[data-theme="holofoil"] .csc-row-label,
[data-theme="holofoil"] .csc-assign-name {
    color: var(--holo-ink);
}
/* Reorder chevrons pick up theme ink/line tokens (default theme uses
   white-on-dark). */
[data-theme="holofoil"] .csc-move-btn {
    background: rgba(0, 0, 0, 0.35);
    border-color: var(--holo-line);
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .csc-move-btn:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.55);
    color: var(--holo-ink);
}
[data-theme="holofoil"] .csc-assign-hint,
[data-theme="holofoil"] .csc-empty {
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .cse-form-group label {
    color: var(--holo-ink-dim);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-size: 0.72rem;
}
[data-theme="holofoil"] .cse-input {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--holo-line);
    color: var(--holo-ink);
}
[data-theme="holofoil"] .cse-input:focus {
    border-color: var(--holo-violet);
    box-shadow: 0 0 12px var(--holo-glow-violet);
}
[data-theme="holofoil"] .cse-color-input {
    border: 1px solid var(--holo-line);
}
[data-theme="holofoil"] .cse-logo-preview {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--holo-line);
    color: var(--holo-ink-faint);
}
[data-theme="holofoil"] .cse-btn.primary {
    background: linear-gradient(135deg, var(--holo-violet), var(--holo-pink));
    color: #fff;
    box-shadow: 0 0 14px var(--holo-glow-violet);
}
[data-theme="holofoil"] .cse-btn.primary:hover {
    background: linear-gradient(135deg, var(--holo-pink), var(--holo-violet));
    box-shadow: 0 0 22px rgba(192, 132, 252, 0.7);
}
[data-theme="holofoil"] .cse-btn.secondary {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--holo-line);
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .cse-btn.secondary:hover {
    background: rgba(192, 132, 252, 0.10);
    color: var(--holo-violet);
}
[data-theme="holofoil"] .cse-selected-count {
    color: var(--holo-lime);
}
[data-theme="holofoil"] .cse-picker-card {
    background: rgba(0, 0, 0, 0.55);
    border-color: transparent;
}
[data-theme="holofoil"] .cse-picker-card:hover {
    border-color: var(--holo-violet);
}
[data-theme="holofoil"] .cse-picker-card.selected {
    border-color: var(--holo-lime);
    background: rgba(212, 255, 91, 0.08);
    box-shadow: 0 0 12px var(--holo-glow-lime);
}
[data-theme="holofoil"] .cse-selected-panel-toggle {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--holo-line);
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .cse-selected-panel-toggle:hover {
    background: rgba(192, 132, 252, 0.10);
    color: var(--holo-violet);
}

/* ════════════════════════════════════════════════════════════════════
 * Coverage completion — interactive states, badges, and surfaces
 * that the story-by-story rollout left unthemed.
 *
 * Root cause of the "fragmented" look: the scrapbook theme uses
 * #00ff88 (green) and rgba(255,215,0,...) (gold) for interactive
 * focus/active states throughout. These read as jarring scrapbook
 * islands against the dark violet holofoil backdrop. Every override
 * below replaces a green or gold accent with a holofoil violet/pink/
 * cyan equivalent.
 * ════════════════════════════════════════════════════════════════════
 */

/* ── View toggle (grid / list) ───────────────────────────────────── */

[data-theme="holofoil"] .view-toggle {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--holo-line);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
[data-theme="holofoil"] .view-toggle-btn {
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .view-toggle-btn:hover {
    background: rgba(192, 132, 252, 0.10);
    color: var(--holo-violet);
}
[data-theme="holofoil"] .view-toggle-btn.active {
    background: linear-gradient(135deg, var(--holo-violet), var(--holo-pink));
    color: #fff;
    box-shadow: 0 0 12px var(--holo-glow-violet);
}
[data-theme="holofoil"] .view-toggle-btn:focus-visible {
    outline: 2px solid var(--holo-cyan);
    outline-offset: 2px;
}

/* ── Set-view tabs (Cards / Sealed Products) ─────────────────────── */

[data-theme="holofoil"] .set-view-tabs {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--holo-line);
}
[data-theme="holofoil"] .set-view-tab {
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .set-view-tab:hover {
    background: rgba(192, 132, 252, 0.08);
    color: var(--holo-violet);
}
[data-theme="holofoil"] .set-view-tab.active {
    background: linear-gradient(135deg,
        rgba(192, 132, 252, 0.25),
        rgba(236, 72, 153, 0.15));
    color: #fff;
    box-shadow:
        inset 0 0 0 1px var(--holo-violet),
        0 0 12px var(--holo-glow-violet);
}

/* ── Filter button active state ──────────────────────────────────── */

[data-theme="holofoil"] .filter-btn.active {
    background: linear-gradient(135deg, var(--holo-violet), var(--holo-pink));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 14px var(--holo-glow-violet);
}
[data-theme="holofoil"] .filter-btn:hover {
    background: rgba(192, 132, 252, 0.10);
    border-color: var(--holo-violet);
    color: var(--holo-violet);
}

/* ── Auth buttons and inputs ─────────────────────────────────────── */

[data-theme="holofoil"] .auth-btn {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--holo-line);
    color: var(--holo-ink);
}
[data-theme="holofoil"] .auth-btn:hover {
    background: rgba(192, 132, 252, 0.10);
    border-color: var(--holo-violet);
}
[data-theme="holofoil"] .auth-btn.primary {
    background: linear-gradient(135deg, var(--holo-violet), var(--holo-pink));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 16px var(--holo-glow-violet);
}
[data-theme="holofoil"] .auth-btn.primary:hover {
    box-shadow: 0 0 24px rgba(192, 132, 252, 0.75);
}
[data-theme="holofoil"] .auth-btn.google {
    background: rgba(255, 255, 255, 0.92);
    color: #333;
    border-color: transparent;
}
[data-theme="holofoil"] .auth-btn.google:hover {
    background: #fff;
    box-shadow: 0 0 12px rgba(192, 132, 252, 0.3);
}
[data-theme="holofoil"] .auth-input {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--holo-line);
    color: var(--holo-ink);
}
[data-theme="holofoil"] .auth-input::placeholder {
    color: var(--holo-ink-faint);
}
[data-theme="holofoil"] .auth-input:focus {
    border-color: var(--holo-violet);
    box-shadow: 0 0 10px var(--holo-glow-violet);
}

/* ── Modal inputs and qty controls ──────────────────────────────── */

[data-theme="holofoil"] .modal-input {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--holo-line);
    color: var(--holo-ink);
}
[data-theme="holofoil"] .modal-input:focus {
    border-color: var(--holo-violet);
    box-shadow: 0 0 10px var(--holo-glow-violet);
}
[data-theme="holofoil"] .modal-qty-btn {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--holo-line);
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .modal-qty-btn:hover {
    background: rgba(192, 132, 252, 0.12);
    border-color: var(--holo-violet);
    color: var(--holo-violet);
}
[data-theme="holofoil"] .modal-qty-btn:focus-visible {
    box-shadow: 0 0 0 2px var(--holo-violet);
    outline: none;
}
[data-theme="holofoil"] .modal-edition-select {
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid var(--holo-line);
    color: var(--holo-ink);
}
[data-theme="holofoil"] .modal-edition-select:focus {
    border-color: var(--holo-violet);
    outline: none;
}
[data-theme="holofoil"] .modal-edition-remove {
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .modal-edition-remove:hover {
    color: var(--holo-pink);
}
[data-theme="holofoil"] .modal-input:focus {
    border-color: var(--holo-violet);
}

/* ── Collect-confirm stepper buttons ─────────────────────────────── */

[data-theme="holofoil"] .collect-confirm-step-btn {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--holo-line);
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .collect-confirm-step-btn:hover {
    background: rgba(192, 132, 252, 0.12);
    border-color: var(--holo-violet);
    color: var(--holo-violet);
}
[data-theme="holofoil"] .collect-confirm-step-btn:focus-visible {
    outline: 2px solid var(--holo-cyan);
    outline-offset: 2px;
}
[data-theme="holofoil"] .collect-confirm-stepper {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--holo-line);
}
[data-theme="holofoil"] .collect-confirm-btn {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--holo-line);
    color: var(--holo-ink);
}

/* ── Card owned badge + price tag ────────────────────────────────── */

[data-theme="holofoil"] .card-owned-badge {
    background: rgba(212, 255, 91, 0.15);
    border: 1px solid rgba(212, 255, 91, 0.4);
    color: var(--holo-lime);
}
[data-theme="holofoil"] .price-tag {
    color: var(--holo-lime);
}
[data-theme="holofoil"] .price-tag.na {
    background: rgba(0, 0, 0, 0.35);
    color: var(--holo-ink-faint);
}

/* ── Landing CTAs ─────────────────────────────────────────────────── */

[data-theme="holofoil"] .landing-btn-primary {
    background: linear-gradient(135deg, var(--holo-violet), var(--holo-pink));
    color: #fff;
    border: none;
    box-shadow: 0 0 20px var(--holo-glow-violet);
}
[data-theme="holofoil"] .landing-btn-primary:hover {
    box-shadow: 0 0 30px rgba(192, 132, 252, 0.75);
}
[data-theme="holofoil"] .landing-btn-secondary {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--holo-line);
    color: var(--holo-ink);
}
[data-theme="holofoil"] .landing-btn-secondary:hover {
    background: rgba(192, 132, 252, 0.10);
    border-color: var(--holo-violet);
}
[data-theme="holofoil"] .landing-btn-link {
    color: var(--holo-cyan);
    background: none;
    border-color: transparent;
}
[data-theme="holofoil"] .landing-btn-link:hover {
    color: #fff;
}
[data-theme="holofoil"] .landing-btn:focus-visible {
    outline: 2px solid var(--holo-cyan);
    outline-offset: 3px;
}
[data-theme="holofoil"] .landing-feature {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--holo-line);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
[data-theme="holofoil"] .landing-feature-icon {
    background: rgba(192, 132, 252, 0.12);
    border: 1px solid var(--holo-line);
    color: var(--holo-violet);
}
[data-theme="holofoil"] .landing-feature-icon-lorcana,
[data-theme="holofoil"] .landing-feature-icon-scanner {
    background: rgba(192, 132, 252, 0.12);
    color: var(--holo-violet);
}

/* ── Scanner interactive items (gold → violet) ───────────────────── */

[data-theme="holofoil"] .scan-picker-item:hover,
[data-theme="holofoil"] .scan-picker-item:focus-visible {
    background: rgba(192, 132, 252, 0.10);
    border-color: var(--holo-violet);
    outline: none;
}
[data-theme="holofoil"] .scan-disambig-item:hover,
[data-theme="holofoil"] .scan-disambig-item:focus-visible {
    background: rgba(192, 132, 252, 0.10);
    border-color: var(--holo-violet);
    outline: none;
}
[data-theme="holofoil"] .scan-clip-card:hover,
[data-theme="holofoil"] .scan-clip-card:focus-visible {
    background: rgba(192, 132, 252, 0.10);
    border-color: var(--holo-violet);
    outline: none;
}
[data-theme="holofoil"] .scan-result-mark-btn {
    background: linear-gradient(135deg, var(--holo-violet), var(--holo-pink));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 12px var(--holo-glow-violet);
}
[data-theme="holofoil"] .scan-result-badge {
    background: rgba(192, 132, 252, 0.18);
    border: 1px solid var(--holo-violet);
    color: var(--holo-violet);
}
[data-theme="holofoil"] .set-scan-btn {
    color: var(--holo-violet);
    border-color: var(--holo-violet);
}
[data-theme="holofoil"] .set-scan-btn:hover {
    background: rgba(192, 132, 252, 0.12);
    border-color: var(--holo-violet);
    box-shadow: 0 0 12px var(--holo-glow-violet);
}

/* ── Row variant pill + thumb popover (list view) ────────────────── */

[data-theme="holofoil"] .row-variant-pill {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--holo-line);
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .row-variant-pill:hover {
    background: rgba(192, 132, 252, 0.12);
    border-color: var(--holo-violet);
    color: var(--holo-violet);
}
[data-theme="holofoil"] .row-thumb-popover {
    background: rgba(15, 5, 35, 0.95);
    border: 1px solid var(--holo-line);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6), 0 0 20px var(--holo-glow-violet);
}

/* ── Custom sets surfaces ────────────────────────────────────────── */

[data-theme="holofoil"] .custom-sets-empty {
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .custom-sets-empty-cta {
    background: linear-gradient(135deg, var(--holo-violet), var(--holo-pink));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 16px var(--holo-glow-violet);
}
[data-theme="holofoil"] .custom-set-action-btn {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--holo-line);
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .custom-set-action-btn:hover {
    background: rgba(192, 132, 252, 0.10);
    border-color: var(--holo-violet);
    color: var(--holo-violet);
}
/* Epic #497 Story 5 — pin/archive active states under the holofoil theme. */
[data-theme="holofoil"] .custom-set-action-btn.pin.active {
    color: #ffcb05;
    border-color: rgba(255, 203, 5, 0.55);
    background: rgba(255, 203, 5, 0.12);
}
[data-theme="holofoil"] .custom-set-action-btn.archive.active {
    color: #6fb0ff;
    border-color: rgba(111, 176, 255, 0.55);
    background: rgba(111, 176, 255, 0.12);
}
[data-theme="holofoil"] .new-set-btn,
[data-theme="holofoil"] .manage-categories-btn {
    border-color: var(--holo-line) !important;
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .new-set-btn:hover,
[data-theme="holofoil"] .manage-categories-btn:hover {
    border-color: var(--holo-violet) !important;
    background: rgba(192, 132, 252, 0.08) !important;
    color: var(--holo-violet);
}

/* ── User bar ─────────────────────────────────────────────────────── */

[data-theme="holofoil"] .user-bar {
    /* No `backdrop-filter` here — it creates a containing block for
     * `position: fixed` descendants (per CSS Filter Effects L2), which
     * traps the theme-picker popover inside the user-bar. The popover
     * ends up anchored to the user-bar's bottom edge (~50px from the top
     * of the page) instead of the viewport bottom, so on mobile the
     * menu extends UP and clips off the top of the screen. A slightly
     * darker solid background gets us the same "panel" feel without
     * trapping descendants. Same goes for `transform`, `filter`, and
     * `will-change` — keep all of those off `.user-bar`. */
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid var(--holo-line);
    color: var(--holo-ink-dim);
}

/* ── Theme swatches in settings popover ─────────────────────────── */

[data-theme="holofoil"] .theme-swatch-holofoil {
    box-shadow: 0 0 0 2px var(--holo-violet), 0 0 12px var(--holo-glow-violet);
}

/* ── Region badge ────────────────────────────────────────────────── */

[data-theme="holofoil"] .region-badge {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--holo-line);
    color: var(--holo-ink-dim);
}

/* ── Rarity badges — keep identity colors, add holofoil micro-glow ── */

[data-theme="holofoil"] .rarity-badge {
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

/* ── Placeholder / empty state ───────────────────────────────────── */

[data-theme="holofoil"] .placeholder-content {
    background: rgba(0, 0, 0, 0.35);
    border: 1px dashed var(--holo-line);
    color: var(--holo-ink-faint);
}

/* ── Bulk confirm modal ──────────────────────────────────────────── */

[data-theme="holofoil"] .bulk-confirm-modal-backdrop {
    background: rgba(7, 0, 15, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
[data-theme="holofoil"] .bulk-confirm-modal {
    background:
        linear-gradient(135deg, rgba(192, 132, 252, 0.10), rgba(236, 72, 153, 0.06)),
        rgba(15, 5, 35, 0.95);
    border: 1px solid var(--holo-line);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 32px var(--holo-glow-violet);
    color: var(--holo-ink);
}
[data-theme="holofoil"] .bulk-confirm-modal-input {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--holo-line);
    color: var(--holo-ink);
}
[data-theme="holofoil"] .bulk-confirm-modal-input:focus {
    border-color: var(--holo-violet);
    box-shadow: 0 0 10px var(--holo-glow-violet);
    outline: none;
}
[data-theme="holofoil"] .bulk-confirm-modal-primary {
    background: linear-gradient(135deg, var(--holo-violet), var(--holo-pink));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 14px var(--holo-glow-violet);
}
[data-theme="holofoil"] .bulk-confirm-modal-cancel {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--holo-line);
    color: var(--holo-ink-dim);
}
[data-theme="holofoil"] .bulk-confirm-modal-cancel:hover {
    border-color: var(--holo-violet);
    color: var(--holo-violet);
}

/* Reduced-motion guard — kill all theme animations when the user asks for
 * less motion (AC4 of the story brief). Scoped to the holofoil theme so it
 * doesn't override scrapbook's existing motion rules.
 */
@media (prefers-reduced-motion: reduce) {
    [data-theme="holofoil"] *,
    [data-theme="holofoil"] *::before,
    [data-theme="holofoil"] *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}