/* =============================================================
   Cardarium — Design System v2 "Aurora"
   =============================================================
   Visual redesign — same Kraken palette (DESIGN.md), new skin:
   - Ambient aurora glow background (purple + green washes)
   - Glassy translucent surfaces, hairline borders
   - Holo-shine sweep on card tiles (a nod to holofoil cards)
   - Gradient progress bars and stat cards
   - All selectors/IDs preserved — purely visual, zero JS changes
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap');

/* =============================================================
   1. Design Tokens — Dark (Kraken-inspired)
   ============================================================= */

:root {
    /* Backgrounds */
    --bg-base:        #0b0c10;
    --bg-surface-1:   #14151b;
    --bg-surface-2:   #1c1d25;
    --bg-surface-3:   #262834;
    --bg-header:      rgba(11, 12, 16, 0.78);
    --bg-overlay:     rgba(5, 5, 9, 0.72);

    /* Surface gradients — give panels a faint top-light */
    --surface-grad:   linear-gradient(180deg, #17181f 0%, #121318 100%);
    --surface-grad-2: linear-gradient(180deg, #1d1e28 0%, #171821 100%);

    /* Accents — Kraken Purple scale */
    --accent-primary:       #7132f5;  /* Kraken Purple */
    --accent-primary-dim:   rgba(133, 91, 251, 0.16);  /* Purple Subtle */
    --accent-primary-hover: #5741d8;  /* Purple Dark */
    --accent-primary-deep:  #5b1ecf;  /* Purple Deep */
    --accent-soft:          #a47cfc;  /* readable purple on dark */
    --accent-gold:          #149e61;  /* Kraken green (success) */
    --accent-gold-dim:      rgba(20, 158, 97, 0.16);
    --accent-gold-soft:     #4fd89e;
    --accent-glow:          rgba(113, 50, 245, 0.22);

    /* Brand gradients */
    --grad-brand:     linear-gradient(135deg, #8b5cf6 0%, #7132f5 55%, #5b1ecf 100%);
    --grad-brand-btn: linear-gradient(180deg, #7e45f7 0%, #6a2ce8 100%);
    --grad-bar:       linear-gradient(90deg, #5b1ecf 0%, #7132f5 55%, #a47cfc 100%);
    --grad-text:      linear-gradient(110deg, #f1f1f5 30%, #c9b4ff 70%, #a47cfc 100%);

    /* Text */
    --text-primary:   #f1f1f5;
    --text-secondary: #a3a6bd;
    --text-muted:     #686b82;

    /* Borders */
    --border-subtle:  rgba(255, 255, 255, 0.07);
    --border-default: rgba(255, 255, 255, 0.12);
    --border-strong:  rgba(255, 255, 255, 0.22);
    --border-accent:  rgba(133, 91, 251, 0.55);

    /* Shadows */
    --shadow-sm:   rgba(0, 0, 0, 0.35) 0px 1px 4px;
    --shadow-md:   rgba(0, 0, 0, 0.45) 0px 4px 24px;
    --shadow-lg:   rgba(0, 0, 0, 0.55) 0px 12px 40px, rgba(0, 0, 0, 0.35) 0px 4px 12px;
    --shadow-glow: 0 0 0 1px var(--border-accent), 0 8px 32px var(--accent-glow);
    --shadow-btn-glow: 0 4px 20px rgba(113, 50, 245, 0.38);

    /* Spacing (4px base unit, DESIGN.md §5) */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-8:   32px;
    --space-10:  40px;
    --space-12:  48px;
    --space-16:  64px;

    /* Border Radius — Kraken spec: max 12 on buttons */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-btn:  12px;
    --radius-lg:   16px;
    --radius-xl:   20px;
    --radius-full: 9999px;

    /* Typography */
    --font-ui:      'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-body:    'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-display: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

    /* Transitions */
    --t-fast:   150ms ease-out;
    --t-base:   200ms ease-out;
    --t-spring: 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* =============================================================
   2. Base Reset & Global polish
   ============================================================= */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

::selection {
    background: rgba(113, 50, 245, 0.45);
    color: #ffffff;
}

/* Thin, quiet scrollbars everywhere */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--bg-surface-3) transparent;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--bg-surface-3);
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Generic hidden helper — matches every `.hidden` toggle in JS */
.hidden { display: none !important; }

/* =============================================================
   3. Body + ambient aurora backdrop
   ============================================================= */

body {
    background-color: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.38;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
}

/* Fixed aurora washes — pure decoration, never intercepts input */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(900px 480px at 18% -10%, rgba(113, 50, 245, 0.13), transparent 65%),
        radial-gradient(720px 420px at 88% 4%,  rgba(91, 30, 207, 0.10), transparent 60%),
        radial-gradient(900px 600px at 80% 108%, rgba(20, 158, 97, 0.06), transparent 60%);
}

/* =============================================================
   4. Header — floating glass bar
   ============================================================= */

header {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    background-color: var(--bg-header);
    backdrop-filter: blur(22px) saturate(1.4);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    padding: 0 var(--space-8);
    height: 68px;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
    transition: background-color var(--t-base), border-color var(--t-base);
}

/* Gradient hairline along the bottom edge */
header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--accent-primary) 30%,
        var(--accent-soft) 70%,
        transparent 100%
    );
    opacity: 0.35;
    pointer-events: none;
}

/* --- Brand block --- */

.header-brand {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    gap: var(--space-3);
}

.header-brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1;
    gap: 4px;
}

/* "Beta*" status badge in the header — same filled-pill look as the wordmark tag, smaller */
.brand-badge {
    align-self: center;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: var(--accent-primary-dim);
    border: 1px solid rgba(133, 91, 251, 0.3);
    color: var(--accent-soft);
    font-family: var(--font-ui);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.6;
    white-space: nowrap;
}

/* Small "Beta*" tag beside the big landing wordmark */
.wordmark-badge {
    -webkit-text-fill-color: var(--accent-soft); /* opt out of the wordmark's gradient text fill */
    color: var(--accent-soft);
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    vertical-align: top;
    position: relative;
    top: 0.55em;
    margin-left: 0.6rem;
    padding: 4px 10px;
    background: var(--accent-primary-dim);
    border: 1px solid rgba(133, 91, 251, 0.3);
    border-radius: var(--radius-full);
    line-height: 1;
}

/* Shared inline asterisk for both badges */
.brand-badge sup,
.wordmark-badge sup {
    vertical-align: baseline;
    font-size: 1em;
    margin-left: 1px;
    opacity: 0.85;
}

/* "* in active development" disclaimer (under the Browse grid / in footers) */
.dev-disclaimer {
    margin-top: var(--space-6);
    text-align: center;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-secondary);
}
.dev-star {
    color: var(--accent-soft);
    font-weight: 700;
    margin-right: 4px;
}
.footer-dev {
    margin-top: 0;
    margin-bottom: var(--space-4);
}

.header-logo {
    display: block;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}

.header-brand h1 {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    white-space: nowrap;
    background: linear-gradient(100deg, #a47cfc 0%, #7132f5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--accent-primary); /* fallback */
}

.header-subtitle {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

/* --- Navigation actions --- */

.header-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: var(--space-1);
    margin-left: auto;
}

/* =============================================================
   5. Main Layout
   ============================================================= */

main {
    width: 100%;
    max-width: 1600px;
    padding: var(--space-8) var(--space-6) var(--space-16);
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

/* =============================================================
   6. Card Grid
   ============================================================= */

#card-display,
#collection-display {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-4);
    width: 100%;
}

/* =============================================================
   7. Empty State
   ============================================================= */

#empty-message {
    font-size: 0.9375rem;
    color: var(--text-muted);
    text-align: center;
    padding: var(--space-12) var(--space-8);
    width: 100%;
    max-width: 560px;
    margin: var(--space-8) auto;
    letter-spacing: 0.01em;
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.015);
}

/* =============================================================
   8. Card Tiles — holo-shine treatment
   ============================================================= */

.card {
    background: var(--surface-grad);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    position: relative;
    transition:
        transform var(--t-spring),
        box-shadow var(--t-base),
        border-color var(--t-base);
}

/* Holofoil shine — a light streak sweeps the tile on hover */
.card::before {
    content: '';
    position: absolute;
    top: -20%;
    bottom: 40%;
    left: -80%;
    width: 55%;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.09) 45%,
        rgba(164, 124, 252, 0.13) 55%,
        transparent 100%
    );
    transform: skewX(-18deg);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: none;
}

.card:hover::before {
    animation: holoSweep 650ms ease-out forwards;
}

@keyframes holoSweep {
    from { left: -80%; opacity: 1; }
    to   { left: 160%; opacity: 1; }
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg), 0 10px 36px rgba(113, 50, 245, 0.18);
    border-color: var(--border-accent);
}

.card:active {
    transform: translateY(-2px);
}

/* Qty badge */
.card-qty-badge {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    background: var(--grad-brand-btn);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    padding: 5px 9px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: var(--shadow-sm);
    pointer-events: none;
    z-index: 3;
}

/* Full-bleed image at top */
.card > img {
    order: 0;
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
    transition: transform var(--t-spring);
}

.card:hover > img {
    transform: scale(1.04);
}

/* Card name */
.card > h3 {
    order: 1;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.3;
    padding: var(--space-3) var(--space-4) var(--space-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Set name and card number */
.card > p {
    order: 2;
    font-size: 0.6875rem;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
    padding: var(--space-1) var(--space-4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

/* Card action button — Purple Subtle (DESIGN.md §4) */
.card > button {
    order: 4;
    align-self: stretch;
    margin: var(--space-3) var(--space-4) var(--space-4);
    min-height: 34px;
    height: auto;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
    padding: var(--space-2) var(--space-3);
    background: var(--accent-primary-dim);
    background-image: none;
    color: var(--accent-soft);
    border: 1px solid rgba(133, 91, 251, 0.22);
    border-radius: var(--radius-btn);
    cursor: pointer;
    box-shadow: none;
    transition:
        opacity var(--t-base),
        background-color var(--t-fast),
        color var(--t-fast),
        border-color var(--t-fast),
        transform var(--t-base);
}

.card > button:hover {
    background: var(--accent-primary);
    background-image: var(--grad-brand-btn);
    color: #ffffff;
    border-color: transparent;
    transform: none;
    box-shadow: var(--shadow-btn-glow);
}

.card > button:active {
    transform: scale(0.97);
    box-shadow: none;
}

/* On pointer devices: reveal button on hover only */
@media (pointer: fine) {
    .card > button {
        opacity: 0;
        transform: translateY(6px);
    }

    .card:hover > button {
        opacity: 1;
        transform: translateY(0);
    }

    .card > button:active {
        transform: scale(0.97);
    }
}

/* =============================================================
   9. Search Input & Set Filter
   ============================================================= */

#search-input {
    font-family: var(--font-ui);
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-primary);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

#search-input::placeholder {
    color: var(--text-muted);
}

.set-select-list {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 210px;
    max-width: 300px;
    max-height: 320px;
    overflow-y: auto;
    background-color: rgba(28, 29, 37, 0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    list-style: none;
    padding: var(--space-1) 0;
    z-index: 500;
    animation: backdropIn var(--t-spring) forwards;
}

.set-select-option.selected {
    color: var(--accent-soft);
    background-color: var(--accent-primary-dim);
}

/* Set logo in modal */
.modal-set-logo {
    display: block;
    max-width: 200px;
    max-height: 56px;
    width: auto;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
}

/* =============================================================
   11. Loading Indicator
   ============================================================= */

#loading-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-12) 0;
    width: 100%;
}

#loading-indicator p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

.spinner {
    width: 44px;
    height: 44px;
    border: 3px solid var(--border-default);
    border-top-color: var(--accent-primary);
    border-right-color: var(--accent-soft);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    box-shadow: 0 0 24px rgba(113, 50, 245, 0.18);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* =============================================================
   12. Buttons (Global) — Kraken Primary, 12px radius, gradient skin
   ============================================================= */

button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 42px;
    padding: 13px 16px;
    font-family: var(--font-ui);
    font-size: 0.9375rem;
    font-weight: 600;
    color: #ffffff;
    background-color: var(--accent-primary);
    background-image: var(--grad-brand-btn);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-btn);
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transition:
        background-color var(--t-fast),
        border-color var(--t-fast),
        color var(--t-fast),
        filter var(--t-fast),
        transform var(--t-fast),
        box-shadow var(--t-fast);
}

button:hover {
    filter: brightness(1.1);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: var(--shadow-btn-glow), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

button:active {
    transform: scale(0.98);
    filter: brightness(0.96);
    box-shadow: none;
}

button:focus-visible {
    outline: 2px solid var(--accent-soft);
    outline-offset: 2px;
}

/* Header nav buttons — quiet ghost links that light up purple */
.header-actions button {
    height: 38px;
    padding: 8px 14px;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0;
    border-radius: var(--radius-btn);
    background: transparent;
    background-image: none;
    border: 1px solid transparent;
    color: var(--text-secondary);
    white-space: nowrap;
    box-shadow: none;
}

.header-actions button:hover {
    background: var(--accent-primary-dim);
    background-image: none;
    border-color: rgba(133, 91, 251, 0.25);
    color: var(--accent-soft);
    transform: none;
    filter: none;
    box-shadow: none;
}

/* =============================================================
   13. Missing-cards toggle
   ============================================================= */

#missing-toggle-container {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    padding: var(--space-2) var(--space-4);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-btn);
    align-self: flex-start;
}

#missing-toggle-switch {
    width: 48px;
    height: 26px;
    background-color: var(--bg-surface-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}

#missing-toggle-switch:hover {
    border-color: var(--border-strong);
}

#missing-toggle-knob {
    width: 18px;
    height: 18px;
    background-color: var(--text-secondary);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 3px;
    transform: translateY(-50%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    transition: transform var(--t-spring), background-color var(--t-base);
}

body.show-missing #missing-toggle-switch {
    background: var(--grad-brand-btn);
    border-color: transparent;
    box-shadow: 0 0 14px rgba(113, 50, 245, 0.45);
}

body.show-missing #missing-toggle-knob {
    background-color: #ffffff;
    transform: translate(22px, -50%);
}

#missing-toggle-switch:focus-visible {
    outline: 2px solid var(--accent-soft);
    outline-offset: 2px;
}

#missing-toggle-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    user-select: none;
    cursor: pointer;
}

/* =============================================================
   14. Unowned (missing) cards — dimmed, desaturated
   ============================================================= */

.card.unowned > img {
    filter: grayscale(1) brightness(0.3) contrast(0.9);
    transition: filter var(--t-base);
}

.card.unowned:hover > img {
    filter: grayscale(0.6) brightness(0.5);
}

.card-unowned-badge {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(4px);
    color: #9a9aa5;
    font-size: 0.625rem;
    padding: 3px 7px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    z-index: 3;
    pointer-events: none;
}

.missing-loading {
    color: var(--text-muted);
    font-size: 0.875rem;
    font-style: italic;
    padding: var(--space-4);
}

/* =============================================================
   15. Modal
   ============================================================= */

.modal {
    position: fixed;
    inset: 0;
    background-color: var(--bg-overlay);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: var(--space-4);
    overflow: hidden; /* clip content at viewport edges */
    animation: backdropIn var(--t-spring) forwards;
}

@keyframes backdropIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal-content {
    background: var(--surface-grad);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg), 0 0 80px rgba(113, 50, 245, 0.10);
    padding: var(--space-8);
    max-width: min(95vw, 1200px);
    width: 100%;
    position: relative;
    animation: modalIn var(--t-spring) forwards;
}

/* Gradient hairline along the top of the modal */
.modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--space-8);
    right: var(--space-8);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(164, 124, 252, 0.5), transparent);
    pointer-events: none;
}

@keyframes modalIn {
    from { opacity: 0; transform: translateY(18px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* Close button */
.close-button {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1;
    color: var(--text-secondary);
    background: rgba(148, 151, 169, 0.08);
    background-image: none;
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
    box-shadow: none;
    z-index: 5;
    transition:
        color var(--t-fast),
        background-color var(--t-fast),
        border-color var(--t-fast),
        transform var(--t-fast);
}

.close-button:hover {
    color: var(--accent-soft);
    background: var(--accent-primary-dim);
    background-image: none;
    border-color: rgba(133, 91, 251, 0.3);
    transform: rotate(90deg);
    filter: none;
    box-shadow: none;
}

/* Modal title */
#modal-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 1.875rem);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.025em;
    line-height: 1.22;
}

/* Modal image */
#modal-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.5));
    transition: transform var(--t-spring), filter var(--t-base);
}

#modal-image:hover {
    filter: drop-shadow(0 16px 40px rgba(113, 50, 245, 0.28));
}

/* Modal metadata */
#modal-cardnumber {
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    margin: 0;
    padding: 2px 10px;
    background: rgba(104, 107, 130, 0.12);
    border-radius: var(--radius-sm);
}

#modal-set {
    margin: 0;
    display: flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

/* Modal action buttons */
#modal-save-button,
#modal-remove-button,
#modal-add-button {
    width: 100%;
    height: 52px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    border-radius: var(--radius-btn);
    transform: none;
}

#modal-save-button,
#modal-remove-button {
    margin-top: auto;
}

#modal-add-button {
    margin-top: auto;
    margin-bottom: 0;
}

#modal-remove-button {
    margin-top: 0;
    background-color: transparent;
    background-image: none;
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
    box-shadow: none;
}

#modal-remove-button:hover {
    background-color: rgba(255, 82, 82, 0.10);
    background-image: none;
    color: #ff8a8a;
    border-color: rgba(255, 82, 82, 0.35);
    filter: none;
    box-shadow: none;
    transform: translateY(-1px);
}

#modal-save-button:active,
#modal-remove-button:active,
#modal-add-button:active {
    transform: scale(0.98);
}

/* =============================================================
   15b. Modal Layout & Detail Pills
   ============================================================= */

.modal-body {
    display: flex;
    gap: var(--space-8);
    align-items: stretch;
}

.modal-image-col {
    flex-shrink: 0;
    width: 380px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
}

.modal-image-footer {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.modal-image-footer:empty {
    display: none;
}

.modal-info-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.modal-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
}

.modal-details {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Base detail chip — 8px radius per Kraken neutral-badge spec */
.modal-detail-pill {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
}

/* Rarity — success-green badge */
.modal-rarity-pill {
    background-color: var(--accent-gold-dim);
    color: var(--accent-gold-soft);
    border: 1px solid rgba(20, 158, 97, 0.40);
}

.modal-rarity-pill::before {
    content: '◆ ';
}

/* Illustrator — clickable link pill */
.modal-illustrator-pill {
    background-color: rgba(104, 107, 130, 0.12);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.modal-illustrator-pill:hover {
    background-color: var(--accent-primary-dim);
    color: var(--accent-soft);
    border-color: var(--border-accent);
}

.modal-illustrator-pill::before {
    content: 'illus. ';
    color: var(--text-muted);
    font-style: italic;
}

/* Variants row */
.modal-variants {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-8);
}

.modal-variant-pill:not(.static):hover {
    background-color: var(--bg-surface-3);
    color: var(--text-primary);
}

.modal-variant-pill.static {
    cursor: default;
}

.modal-variant-pill.active {
    background: var(--grad-brand-btn);
    color: #fff;
    border-color: transparent;
}

/* ── Full card body ───────────────────────────────────────── */

.modal-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.modal-card-body:empty {
    display: none;
}

/* Stat line: stage · type · HP */
.modal-stat-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.modal-stage-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    background: rgba(104, 107, 130, 0.16);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.modal-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: var(--type-color, #9497a9);
    color: #fff;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.modal-hp {
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-primary);
    margin-left: auto;
}

.modal-evolves-from {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
}

/* Abilities */
.modal-ability {
    background: rgba(133, 91, 251, 0.09);
    border: 1px solid rgba(133, 91, 251, 0.14);
    border-left: 3px solid var(--accent-primary);
    border-radius: 0 10px 10px 0;
    padding: var(--space-3) var(--space-4);
}

.modal-ability-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 4px;
}

.modal-ability-tag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-soft);
    background: rgba(133, 91, 251, 0.18);
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.modal-ability-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-ability-effect {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Attacks */
.modal-attacks {
    display: flex;
    flex-direction: column;
}

.modal-attack {
    padding: var(--space-3) 0;
    border-top: 1px solid var(--border-subtle);
}

.modal-attack:first-child {
    border-top: none;
    padding-top: 0;
}

.modal-attack-cost {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
}

.modal-attack-pip {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--type-color, #9497a9);
    display: inline-block;
    box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.28), inset 0 2px 2px rgba(255, 255, 255, 0.28), 0 1px 3px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.modal-attack-name-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
}

.modal-attack-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-attack-damage {
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--accent-soft);
    white-space: nowrap;
}

.modal-attack-effect {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 4px 0 0;
    line-height: 1.5;
}

/* Weakness / Resistance / Retreat */
.modal-wer-row {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: rgba(104, 107, 130, 0.10);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
}

.modal-wer-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.modal-wer-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
}

.modal-wer-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

/* Description / flavor text */
.modal-description {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.modal-description-flavor {
    font-style: italic;
}

/* Format legality */
.modal-legality-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.modal-reg-mark {
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-secondary);
    padding: 2px 8px;
    border: 1px solid var(--border-default);
    border-radius: 6px;
}

.modal-legal-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
}

.modal-legal-standard {
    background: var(--accent-gold-dim);
    color: var(--accent-gold-soft);
    border: 1px solid rgba(20, 158, 97, 0.35);
}

.modal-legal-expanded {
    background: var(--accent-primary-dim);
    color: var(--accent-soft);
    border: 1px solid rgba(133, 91, 251, 0.30);
}

/* Legacy theme hooks — permanent dark, values folded into base above */
[data-theme="dark"] .modal-ability { background: rgba(133, 91, 251, 0.09); }
[data-theme="dark"] .modal-wer-row { background: rgba(104, 107, 130, 0.10); }
[data-theme="dark"] .modal-stage-badge { color: var(--text-secondary); }

/* Market links row */
.modal-market-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.market-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-btn);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid;
    transition: opacity var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}

.market-link:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

.market-link-tcgplayer {
    background-color: rgba(26, 130, 230, 0.14);
    color: #7cc0ff;
    border-color: rgba(26, 130, 230, 0.35);
}

.market-link-cardmarket {
    background-color: rgba(32, 192, 122, 0.14);
    color: var(--accent-gold-soft);
    border-color: rgba(32, 192, 122, 0.35);
}

/* Pricing grid (variant × marketplace) */
.pricing-grid {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    column-gap: var(--space-3);
    row-gap: var(--space-2);
    align-items: center;
    width: 100%;
    padding: var(--space-4);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.pricing-grid-header,
.pricing-grid-row {
    display: contents;
}

.pricing-col-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity var(--t-fast), transform var(--t-fast);
}

.pricing-col-header:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

.pricing-variant-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
    padding: var(--space-1) 0;
}

.pricing-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-3);
    background-color: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-family: var(--font-mono);
    text-align: center;
}

.pricing-price {
    font-weight: 700;
}

.pricing-na {
    font-weight: 500;
    font-style: italic;
    font-family: var(--font-ui);
    opacity: 0.45;
    font-size: 0.8rem;
}

/* =============================================================
   16. Reduced Motion
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* =============================================================
   17. Toast Notifications
   ============================================================= */

#toast-container {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    z-index: 2000;
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-2);
    pointer-events: none;
    max-width: 320px;
}

.toast {
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-btn);
    font-family: var(--font-ui);
    font-size: 0.875rem;
    font-weight: 500;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateX(14px);
    transition: opacity var(--t-base), transform var(--t-spring);
    pointer-events: all;
    line-height: 1.4;
}

.toast.toast-visible {
    opacity: 1;
    transform: translateX(0);
}

.toast-success {
    background-color: rgba(20, 158, 97, 0.20);
    border: 1px solid rgba(20, 158, 97, 0.5);
    border-left: 3px solid var(--accent-gold);
    color: #d8ffe9;
}

.toast-error {
    background-color: rgba(220, 60, 80, 0.18);
    border: 1px solid rgba(220, 60, 80, 0.5);
    border-left: 3px solid #e35d6a;
    color: #ffe0e3;
}

.toast-info {
    background-color: rgba(28, 29, 37, 0.85);
    border: 1px solid var(--border-strong);
    border-left: 3px solid var(--accent-primary);
    color: var(--text-primary);
}

/* =============================================================
   18. Result Count
   ============================================================= */

.result-count {
    align-self: flex-start;
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: var(--space-2);
}

/* =============================================================
   19. Responsive — core breakpoints
   ============================================================= */

/* ── Tiny phones (≤375px) ── */
@media (max-width: 375px) {
    header {
        padding: var(--space-2) var(--space-3) var(--space-3);
        gap: var(--space-2);
    }

    .header-brand h1 {
        font-size: 1.125rem;
    }

    .header-actions button {
        font-size: 0.75rem;
        padding: 0 var(--space-3);
        height: 34px;
    }

    main {
        padding: var(--space-4) var(--space-3) var(--space-10);
    }

    .set-tile {
        padding: var(--space-4) var(--space-3) var(--space-3);
    }

    #card-display,
    #collection-display,
    .sets-grid {
        gap: var(--space-2);
    }
}

/* ── Header wrapping — phones + portrait tablets (≤1024px) ── */
@media (max-width: 1024px) {
    header {
        height: auto;
        flex-wrap: wrap;
        padding: var(--space-3) var(--space-4) var(--space-4);
        gap: var(--space-3);
    }

    .header-brand {
        flex: 1;
    }

    header .sets-search {
        order: 2;
        flex: 0 0 100%;
        max-width: 100%;
        height: 40px;
        border-radius: var(--radius-btn);
    }

    .header-actions {
        order: 3;
        width: 100%;
        margin-left: 0;
        flex-wrap: wrap;
    }

    .header-actions button {
        flex: 1 1 calc(50% - var(--space-1));
    }
}

/* ── All phones (≤600px) ── */
@media (max-width: 600px) {
    main {
        padding: var(--space-6) var(--space-4) var(--space-12);
    }

    #card-display,
    #collection-display {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }

    .sets-search {
        max-width: 100%;
        border-radius: var(--radius-btn);
    }

    .sets-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }

    .modal-content {
        padding: var(--space-6) var(--space-5);
    }

    .modal-body {
        flex-direction: column;
        align-items: center;
        gap: var(--space-5);
    }

    .modal-image-col {
        width: 100%;
        max-width: 180px;
        justify-content: center;
    }

    .modal-info-col {
        width: 100%;
        text-align: center;
    }

    .modal-details {
        justify-content: center;
    }

    #modal-save-button,
    #modal-remove-button,
    #modal-add-button {
        margin-top: 0;
    }
}

/* ── Wider phones (431px–600px) ── */
@media (min-width: 431px) and (max-width: 600px) {
    #card-display,
    #collection-display {
        grid-template-columns: repeat(3, 1fr);
    }

    .sets-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── Small tablets (601px–768px) ── */
@media (min-width: 601px) and (max-width: 768px) {
    main {
        padding: var(--space-8) var(--space-6) var(--space-16);
    }

    #card-display,
    #collection-display {
        grid-template-columns: repeat(3, 1fr);
    }

    .sets-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── Medium tablets (769px–912px) ── */
@media (min-width: 769px) and (max-width: 912px) {
    #card-display,
    #collection-display {
        grid-template-columns: repeat(4, 1fr);
    }

    .sets-grid {
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    }
}

/* ── Large tablets (913px–1024px) ── */
@media (min-width: 913px) and (max-width: 1024px) {
    main {
        padding: var(--space-8) var(--space-8) var(--space-16);
    }

    #card-display,
    #collection-display {
        grid-template-columns: repeat(5, 1fr);
    }

    .sets-grid {
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    }
}

/* =============================================================
   20. Illustrator Gallery notice
   ============================================================= */

.content-notice {
    color: var(--text-muted);
    text-align: center;
    padding: var(--space-16) var(--space-4);
}

/* ── Portfolio stats hero ───────────────────────────────────── */

.portfolio-stats {
    display: flex;
    gap: var(--space-4);
    width: 100%;
    margin-bottom: var(--space-6);
}

.portfolio-stat-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-6);
    background: var(--surface-grad);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}

/* Soft purple bloom in the corner of each stat card */
.portfolio-stat-card::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(113, 50, 245, 0.14), transparent 70%);
    pointer-events: none;
}

/* Gradient hairline across the top */
.portfolio-stat-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--grad-bar);
    opacity: 0.55;
}

.portfolio-stat-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-accent);
    box-shadow: var(--shadow-md), 0 6px 28px rgba(113, 50, 245, 0.12);
}

.portfolio-stat-val {
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--text-primary); /* fallback */
}

.portfolio-stat-lbl {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
}

@media (max-width: 600px) {
    .portfolio-stats {
        gap: var(--space-3);
    }
    .portfolio-stat-card {
        padding: var(--space-4) var(--space-4);
    }
    .portfolio-stat-val {
        font-size: 1.5rem;
    }
}

.coll-set-tile.active {
    border-color: var(--border-accent);
    background-color: rgba(113, 50, 245, 0.10);
    box-shadow: 0 0 0 1px var(--border-accent), 0 4px 18px rgba(113, 50, 245, 0.16);
}

.coll-set-tile.active:hover {
    transform: translateY(-2px);
    background-color: rgba(113, 50, 245, 0.13);
    box-shadow: 0 0 0 1px var(--border-accent), var(--shadow-sm);
}

.coll-set-tile.active .coll-tile-logo-area {
    background: radial-gradient(120% 90% at 50% 0%, rgba(133, 91, 251, 0.14), transparent 80%);
    border-bottom-color: rgba(113, 50, 245, 0.25);
}

.coll-set-tile.active .coll-tile-track {
    background: rgba(133, 91, 251, 0.18);
}

/* Meta row: count left{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.coll-set-tile.active .coll-tile-pct {
    color: #c9b4ff;
}

/* ── Collection responsive ──────────────────────────────────── */

@media (max-width: 1100px) {
    #completion-summary {
        width: 248px;
    }
}

.completion-row.active {
    background-color: var(--accent-primary-dim);
    border-color: var(--border-accent);
}

/* =============================================================
   22. Sets Browse Page
   ============================================================= */

/* Standalone search bar */
.sets-search {
    display: block;
    width: 100%;
    max-width: 600px;
    height: 48px;
    padding: 0 var(--space-5);
    align-self: center;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-btn);
    font-family: var(--font-ui);
    font-size: 1rem;
    color: var(--text-primary);
    outline: none;
    transition: border-color var(--t-base), box-shadow var(--t-base), background-color var(--t-base);
    box-sizing: border-box;
}

main .sets-search {
    margin-bottom: var(--space-4);
}

/* Series jump-nav — glassy chips */
#series-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    margin-bottom: var(--space-6);
}

#series-nav:empty {
    display: none;
}

.series-nav-btn {
    background: rgba(148, 151, 169, 0.08);
    background-image: none;
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 6px 14px;
    height: auto;
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: var(--font-body);
    cursor: pointer;
    box-shadow: none;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.series-nav-btn:hover {
    background: var(--accent-primary-dim);
    background-image: none;
    border-color: rgba(113, 50, 245, 0.35);
    color: var(--accent-soft);
    transform: none;
    filter: none;
    box-shadow: none;
}

.sets-search::placeholder {
    color: var(--text-muted);
}

.sets-search:focus {
    border-color: var(--border-accent);
    background-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 3px var(--accent-primary-dim);
}

/* --- Card name search form --- */

.card-name-search-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
}

.card-name-search-form--header {
    flex: 1;
    max-width: 600px;
    flex-direction: row;
    align-items: center;
    margin-bottom: 0;
    gap: 0;
}

.card-name-search-form--header .card-name-search-row {
    flex: 1;
}

.card-name-search-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.card-name-search-input {
    flex: 1;
    max-width: 600px;
    height: 48px;
    padding: 0 var(--space-5);
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-btn);
    font-family: var(--font-ui);
    font-size: 1rem;
    color: var(--text-primary);
    outline: none;
    transition: border-color var(--t-base), box-shadow var(--t-base), background-color var(--t-base);
}

.card-name-search-input::placeholder {
    color: var(--text-muted);
}

.card-name-search-input:focus {
    border-color: var(--border-accent);
    background-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 3px var(--accent-primary-dim);
}

.card-name-search-input::-webkit-search-cancel-button {
    display: none;
}

.card-name-search-btn {
    height: 42px;
    padding: 0 var(--space-5);
    background-color: var(--accent-primary);
    background-image: var(--grad-brand-btn);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-btn);
    font-family: var(--font-ui);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter var(--t-base), box-shadow var(--t-base);
    white-space: nowrap;
}

.card-name-search-btn:hover {
    filter: brightness(1.1);
    box-shadow: var(--shadow-btn-glow);
}

.card-name-search-btn:focus-visible {
    outline: 2px solid var(--accent-soft);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .card-name-search-row {
        flex-direction: column;
        align-items: stretch;
    }
    .card-name-search-input,
    .card-name-search-btn {
        max-width: 100%;
        width: 100%;
    }
    header .card-name-search-row {
        flex-direction: row;
        align-items: center;
    }
    header .card-name-search-input {
        width: auto;
        flex: 1;
    }
    header .card-name-search-btn {
        width: auto;
        flex-shrink: 0;
    }
}

/* Container for all series sections */
#sets-container {
    width: 100%;
}

/* Series era section */
.series-section {
    width: 100%;
    margin-bottom: var(--space-12);
}

/* Era label — open heading with fading rule, no box */
.series-heading {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-2) 0;
    margin-bottom: var(--space-5);
    position: relative;
}

/* Fading rule extends to the right of the heading content */
.series-heading::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border-default), transparent);
    margin-left: var(--space-2);
}

/* Purple tick at the start of each era */
.series-heading::before {
    content: '';
    width: 4px;
    height: 26px;
    border-radius: 2px;
    background: var(--grad-bar);
    flex-shrink: 0;
    box-shadow: 0 0 12px rgba(113, 50, 245, 0.45);
}

.series-heading-logo {
    height: 40px;
    max-width: 160px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
}

.series-heading-name {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* Grid of set tiles */
.sets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-5);
}

/* Individual set tile */
.set-tile {
    background: var(--surface-grad);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-6) var(--space-5) var(--space-5);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-align: center;
    position: relative;
    overflow: hidden;
    transition:
        transform var(--t-spring),
        box-shadow var(--t-base),
        border-color var(--t-base);
}

/* Top accent line — slides in on hover */
.set-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--grad-bar);
    transform: translateX(-50%);
    transition: width var(--t-spring);
}

.set-tile:hover::before {
    width: 100%;
}

.set-tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg), 0 10px 36px rgba(113, 50, 245, 0.14);
    border-color: var(--border-accent);
}

.set-tile:active {
    transform: translateY(-2px);
}

/* Image wrapper — min-height so tiles align; column layout for logo + label */
.set-tile-image {
    min-height: 80px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.set-tile-logo {
    max-height: 56px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.4));
    transition: transform var(--t-spring);
}

.set-tile:hover .set-tile-logo {
    transform: scale(1.06);
}

.set-tile-symbol {
    height: 44px;
    width: 44px;
    object-fit: contain;
    transition: transform var(--t-spring);
}

.set-tile:hover .set-tile-symbol {
    transform: scale(1.1);
}

/* Set name placeholder (no logo/symbol available) */
.set-tile-name-placeholder {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.015em;
    text-align: center;
    line-height: 1.22;
    padding: 0 var(--space-2);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    opacity: 0.85;
}

/* Set name */
.set-tile-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin-top: var(--space-1);
}

/* Card count */
.set-tile-count {
    font-size: 0.6875rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
}

/* Release year */
.set-tile-year {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    margin: 0;
}

/* Collection progress */
.set-tile-progress {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-1);
}

.set-tile-track {
    width: 100%;
    height: 5px;
    background-color: rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.set-tile-fill {
    height: 100%;
    background: var(--grad-bar);
    border-radius: var(--radius-full);
    box-shadow: 0 0 8px rgba(113, 50, 245, 0.45);
}

.set-tile-owned {
    font-size: 0.625rem;
    color: var(--accent-soft);
    font-family: var(--font-mono);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* =============================================================
   22b. Set Page Header
   ============================================================= */

#set-page-header {
    width: 100%;
    margin-bottom: var(--space-6);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.set-page-logo {
    max-height: 200px;
    width: auto;
    max-width: 600px;
    object-fit: contain;
    filter: drop-shadow(0 8px 28px rgba(0, 0, 0, 0.5));
}

.set-page-name {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: 0;
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--text-primary);
}

.set-page-symbol {
    max-height: 60px;
    width: auto;
    object-fit: contain;
}

#set-page-header span {
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--text-primary); /* fallback */
}

.set-page-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.set-page-meta-item {
    background: rgba(104, 107, 130, 0.12);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
}

/* =============================================================
   22c. Cards Controls Bar (search + sort)
   ============================================================= */

#cards-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    width: 50%;
    margin-bottom: var(--space-6);
}

#cards-controls .card-name-search-form {
    flex: 1;
    margin-bottom: 0;
    flex-direction: row;
}

#cards-controls .card-name-search-form .card-name-search-row {
    flex: 1;
}

#cards-controls .card-name-search-input {
    max-width: none;
}

/* Language filter — segmented All / English / Japanese control */
.lang-filter {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    height: 48px;
    padding: 4px;
    gap: 2px;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-btn);
}

.lang-btn {
    height: 100%;
    padding: 0 12px;
    border: none;
    background: transparent;
    border-radius: calc(var(--radius-btn) - 4px);
    font-family: var(--font-ui);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--t-fast), background-color var(--t-fast);
}

.lang-btn:hover {
    color: var(--text-primary);
}

.lang-btn--active,
.lang-btn--active:hover {
    background-color: var(--accent-primary-dim);
    color: var(--accent-soft);
}

.sort-dropdown {
    flex-shrink: 0;
    position: relative;
}

.sort-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 48px;
    padding: 0 14px;
    background-color: rgba(255, 255, 255, 0.04);
    background-image: none;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-btn);
    font-family: var(--font-ui);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
    box-shadow: none;
    transition: border-color var(--t-base), box-shadow var(--t-base), background-color var(--t-base);
}

.sort-btn:hover {
    background-color: rgba(255, 255, 255, 0.06);
    background-image: none;
    transform: none;
    filter: none;
    box-shadow: none;
    color: var(--text-primary);
}

.sort-btn[aria-expanded="true"] {
    border-color: var(--border-accent);
    box-shadow: 0 0 0 3px var(--accent-primary-dim);
}

.sort-btn-chevron {
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: transform 200ms ease;
}

.sort-btn[aria-expanded="true"] .sort-btn-chevron {
    transform: rotate(180deg);
}

.sort-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 180px;
    background-color: rgba(28, 29, 37, 0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-btn);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    z-index: 200;
    animation: backdropIn var(--t-fast) forwards;
}

.sort-option {
    display: block;
    width: 100%;
    height: auto;
    padding: 8px 10px;
    background: none;
    background-image: none;
    border: none;
    border-radius: 8px;
    font-family: var(--font-ui);
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    box-shadow: none;
    transition: background-color 120ms ease, color 120ms ease;
}

.sort-option:hover {
    background-color: rgba(255, 255, 255, 0.06);
    background-image: none;
    transform: none;
    filter: none;
    box-shadow: none;
    color: var(--text-primary);
}

.sort-option--active {
    background-color: var(--accent-primary-dim);
    color: var(--accent-soft);
    font-weight: 600;
}

.sort-option--active:hover {
    background-color: var(--accent-primary-dim);
    color: var(--accent-soft);
}

@media (max-width: 600px) {
    #cards-controls {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    .sort-dropdown {
        width: 100%;
    }
    .sort-btn {
        width: 100%;
        justify-content: space-between;
    }
    .sort-panel {
        left: 0;
        right: 0;
        min-width: 0;
    }
}

/* =============================================================
   23. Illustrators Gallery
   ============================================================= */

#illustrators-view,
#illustrators-container,
#cards-view {
    width: 100%;
}

.illustrators-alpha-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    width: 100%;
}

.illustrators-section {
    width: 100%;
}

.illustrators-letter-heading {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: linear-gradient(100deg, #a47cfc, #7132f5);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--accent-primary); /* fallback */
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: var(--space-1);
}

.illustrators-name-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.illustrator-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    border-left: 2px solid transparent;
    cursor: pointer;
    transition: background-color var(--t-fast), border-left-color var(--t-fast);
}

.illustrator-row:hover,
.illustrator-row:focus-visible {
    background-color: rgba(255, 255, 255, 0.04);
    border-left-color: var(--accent-primary);
    outline: none;
}

.illustrator-row-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.illustrator-row-arrow {
    font-size: 0.75rem;
    color: var(--accent-soft);
    opacity: 0;
    transition: opacity var(--t-fast), transform var(--t-fast);
    transform: translateX(-4px);
    flex-shrink: 0;
}

.illustrator-row:hover .illustrator-row-arrow,
.illustrator-row:focus-visible .illustrator-row-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Back button & cards view header */
.illustrator-cards-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}

.illustrator-cards-header h2 {
    font-family: var(--font-display);
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.025em;
    margin: 0;
}

/* Infinite-scroll sentinel — invisible trigger element */
.scroll-sentinel {
    height: 1px;
    width: 100%;
    grid-column: 1 / -1;
}

/* =============================================================
   24. Footer
   ============================================================= */

footer {
    width: 100%;
    margin-top: auto;
    padding: var(--space-8) var(--space-8) var(--space-6);
    border-top: 1px solid var(--border-subtle);
    background: linear-gradient(180deg, rgba(20, 21, 27, 0.6), rgba(11, 12, 16, 0.9));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    text-align: center;
    position: relative;
}

footer::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(113, 50, 245, 0.35), transparent);
    pointer-events: none;
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.footer-nav a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.825rem;
    font-weight: 500;
    transition: color var(--t-fast);
}

.footer-nav a:hover {
    color: var(--accent-soft);
}

.footer-nav-sep {
    color: var(--text-muted);
    font-size: 0.825rem;
    user-select: none;
}

.footer-disclaimer {
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.6;
    max-width: 680px;
}

.footer-disclaimer a {
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--t-fast);
}

.footer-disclaimer a:hover {
    color: var(--text-primary);
}

.footer-contact {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.footer-contact a {
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--t-fast);
}

.footer-contact a:hover {
    color: var(--text-primary);
}

/* =============================================================
   25. Landing Page
   ============================================================= */

.landing-main {
    width: 100%;
    max-width: 1400px;
    padding: var(--space-16) var(--space-12) var(--space-16);
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    flex: 1;
}

/* ── Hero ───────────────────────────────────────────────────── */

.landing-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-6);
    padding: var(--space-16) 0 var(--space-8);
    position: relative;
}

/* (Removed the blurry purple glow orb in favour of the crisp wordmark
   underline accent below — see .landing-wordmark::after.) */

.landing-wordmark {
    font-family: var(--font-display);
    font-size: clamp(3.25rem, 6.5vw, 5.5rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--text-primary); /* fallback */
    margin-bottom: var(--space-2);
}

/* Sleek minimal accent: a short gradient underline in place of the old glow. */
.landing-wordmark::after {
    content: '';
    display: block;
    width: clamp(52px, 7vw, 84px);
    height: 3px;
    margin: var(--space-4) auto 0;
    border-radius: 999px;
    background: var(--grad-bar);
}

/* Floating decorative Pokémon-card silhouettes behind the hero (pure decoration). */
.hero-deco {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.deco-card {
    position: absolute;
    width: clamp(64px, 8vw, 104px);
    aspect-ratio: 5 / 7;
    border-radius: 12px;
    background:
        linear-gradient(150deg, rgba(126, 69, 247, 0.20), rgba(90, 30, 207, 0.04)),
        var(--bg-surface-1);
    border: 1px solid rgba(164, 124, 252, 0.22);
    box-shadow: 0 16px 40px rgba(113, 50, 245, 0.12);
    opacity: 0.55;
    transform: rotate(var(--rot, 0deg));
    will-change: transform;
}

/* A soft holo band across each card face */
.deco-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.10) 50%, transparent 58%);
}

.deco-card:nth-child(1) { top: 6%;    left: 4%;   --rot: -16deg; animation: floatCard 7s   ease-in-out infinite; }
.deco-card:nth-child(2) { top: 20%;   right: 5%;  --rot: 13deg;  animation: floatCard 8.5s ease-in-out infinite 0.6s; }
.deco-card:nth-child(3) { bottom: 8%; left: 11%;  --rot: 9deg;   animation: floatCard 9s   ease-in-out infinite 0.3s; }
.deco-card:nth-child(4) { bottom: 12%; right: 12%; --rot: -11deg; animation: floatCard 7.8s ease-in-out infinite 1s; }

@keyframes floatCard {
    0%, 100% { transform: rotate(var(--rot)) translateY(0); }
    50%      { transform: rotate(var(--rot)) translateY(-16px); }
}

/* Keep the hero uncluttered on small screens */
@media (max-width: 640px) {
    .hero-deco { display: none; }
}

/* Portal tiles: the arrow slides on hover for a tactile, card-flip-y feel */
.portal-tile:hover .portal-tile-arrow { transform: translateX(5px); }

.landing-hero-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-soft);
    padding: 6px 14px;
    background: var(--accent-primary-dim);
    border: 1px solid rgba(133, 91, 251, 0.25);
    border-radius: var(--radius-btn);
}

/* Kraken display hero */
.landing-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.125rem, 4.25vw, 3.25rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.17;
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--text-primary); /* fallback */
}

.landing-hero-sub {
    font-size: 1.125rem;
    color: var(--text-secondary);
    max-width: 600px;
    line-height: 1.5;
}

/* Stats bar — glass strip */
.landing-stats {
    display: flex;
    align-items: center;
    margin-top: var(--space-8);
    background: rgba(20, 21, 27, 0.7);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-6) var(--space-10);
    gap: 0;
    position: relative;
    overflow: hidden;
}

.landing-stats::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(164, 124, 252, 0.45), transparent);
}

.landing-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 var(--space-10);
}

.landing-stat-divider {
    width: 1px;
    height: 52px;
    background: var(--border-default);
    flex-shrink: 0;
}

.landing-stat-value {
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--text-primary); /* fallback */
}

.landing-stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin-top: 8px;
    white-space: nowrap;
}

/* Hero search — reuses .card-name-search-* tokens, centered & width-capped */
.card-name-search-form--hero {
    width: 100%;
    max-width: 560px;
    margin: var(--space-2) 0 0;
}

.card-name-search-form--hero .card-name-search-input {
    max-width: none;
}

/* ── Section wrapper ────────────────────────────────────────── */

.landing-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    /* Pull the Browse block up closer to the stats bar */
    margin-top: calc(-1 * var(--space-10));
}

.landing-section-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.landing-section-label::before {
    content: '';
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: var(--grad-bar);
    display: inline-block;
}

/* ── Portal grid ────────────────────────────────────────────── */

.landing-portal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}

@media (min-width: 600px) {
    .landing-portal-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.portal-tile {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-8) var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--surface-grad);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    color: var(--text-primary);
    transition: transform var(--t-spring), box-shadow var(--t-base), border-color var(--t-base);
    position: relative;
    overflow: hidden;
}

.portal-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--grad-bar);
    opacity: 0;
    transition: opacity var(--t-base);
}

/* Corner bloom on hover */
.portal-tile::after {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(113, 50, 245, 0.13), transparent 70%);
    opacity: 0;
    transition: opacity var(--t-base);
    pointer-events: none;
}

.portal-tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg), 0 12px 40px rgba(113, 50, 245, 0.14);
    border-color: var(--border-accent);
}

.portal-tile:hover::before,
.portal-tile:hover::after {
    opacity: 1;
}

.portal-tile-tag {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-soft);
    background: var(--accent-primary-dim);
    border: 1px solid rgba(133, 91, 251, 0.22);
    border-radius: 8px;
    padding: 4px 10px;
    align-self: flex-start;
}

.portal-tile--gold .portal-tile-tag {
    color: var(--accent-gold-soft);
    background: var(--accent-gold-dim);
    border-color: rgba(20, 158, 97, 0.3);
}

.portal-tile-title {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.22;
    letter-spacing: -0.015em;
    margin-top: var(--space-2);
}

.portal-tile-desc {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.5;
    flex: 1;
}

.portal-tile-arrow {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--accent-soft);
    letter-spacing: 0;
    margin-top: var(--space-4);
    transition: transform var(--t-base);
}

.portal-tile:hover .portal-tile-arrow {
    transform: translateX(4px);
}

/* ══════════════════════════════════════════════════════════════
   COLLECTION — Sets Completion Dashboard (Direction A)
   ══════════════════════════════════════════════════════════════ */

/* Extra portfolio-hero stat sub (e.g. "/12" in Sets Completed) */
.portfolio-stat-val .stat-sub {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-muted);
    -webkit-text-fill-color: var(--text-muted);
}

/* Fill the full width of <main> (which centers + shrink-wraps its children) */
#sets-dashboard,
#set-detail-view { width: 100%; }

/* ── Toolbar ─────────────────────────────────────────────────── */
.sets-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}
.toolbar-controls { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.toolbar-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Export / Import actions — pushed to the right of the collection toolbar */
.toolbar-actions { margin-left: auto; display: flex; gap: var(--space-2); }
.toolbar-action-btn {
    height: 40px;
    padding: 0 16px;
    border-radius: var(--radius-btn);
    border: 1px solid var(--border-default);
    background: rgba(255, 255, 255, 0.04); /* shorthand clears the global button gradient */
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--t-base), background-color var(--t-base);
}
.toolbar-action-btn:hover {
    border-color: var(--border-accent);
    background-color: rgba(255, 255, 255, 0.07);
}
.toolbar-chip {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    border-radius: var(--radius-full);
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast);
}
.toolbar-chip:hover { border-color: var(--border-default); color: var(--text-primary); }
.toolbar-chip.active {
    background: var(--accent-primary-dim);
    border-color: var(--border-accent);
    color: var(--accent-soft);
}

/* ── Jump nav (reuses .series-nav-btn) ───────────────────────── */
.sets-jump-nav {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
}
.sets-jump-nav:empty { display: none; }

/* ── Language + series headers ───────────────────────────────── */
.dash-lang-header {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: var(--space-6) 0 var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-subtle);
}
.dash-lang-header:first-child { margin-top: 0; }
.dash-lang-count {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent-soft);
    background: var(--accent-primary-dim);
    padding: 2px 10px;
    border-radius: var(--radius-full);
    vertical-align: middle;
    margin-left: var(--space-2);
}

/* ── Set completion cards ────────────────────────────────────── */
.dash-set-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--space-4);
}
/* Card-shaped tile matching the browse-page .set-tile. NOTE: this is a <button>,
   so it must override the global button rule (height:42px, nowrap, centering). */
.dash-set-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: var(--space-3);
    width: 100%;
    height: auto;
    padding: var(--space-6) var(--space-5) var(--space-5);
    white-space: normal;
    font: inherit;
    letter-spacing: normal;
    cursor: pointer;
    color: var(--text-primary);
    background: var(--surface-grad);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    position: relative;
    transition: transform var(--t-base), border-color var(--t-fast), box-shadow var(--t-fast);
}
.dash-set-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-accent);
    box-shadow: var(--shadow-sm), 0 8px 28px rgba(113, 50, 245, 0.14);
}
.dash-set-card.complete { border-color: rgba(20, 158, 97, 0.45); }

.dash-card-logo-area {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    width: 100%;
}
.dash-card-logo {
    max-height: 56px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.4));
}
.dash-card-symbol { width: 44px; height: 44px; object-fit: contain; }
.dash-card-name-fallback {
    font-size: 0.8125rem;
    font-weight: 700;
    text-align: center;
    color: var(--text-secondary);
    line-height: 1.3;
}

.dash-card-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}
.dash-card-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dash-card-track {
    width: 100%;
    height: 7px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.dash-card-fill {
    height: 100%;
    background: var(--grad-bar);
    border-radius: var(--radius-full);
    box-shadow: 0 0 8px rgba(113, 50, 245, 0.5);
}
.dash-set-card.complete .dash-card-fill {
    background: linear-gradient(90deg, #0f7a4a, #149e61);
    box-shadow: 0 0 8px rgba(20, 158, 97, 0.5);
}
.dash-card-meta {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}
.dash-card-count { font-size: 0.75rem; font-family: var(--font-mono); color: var(--text-muted); }
.dash-card-pct { font-size: 0.8rem; font-family: var(--font-mono); font-weight: 700; color: var(--accent-soft); }
.dash-complete-badge {
    font-size: 0.68rem;
    font-weight: 700;
    color: #7ee0ab;
    background: rgba(20, 158, 97, 0.16);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* ── Detail (drill-down) view ────────────────────────────────── */
.detail-back {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: var(--space-4);
    transition: color var(--t-fast), border-color var(--t-fast);
}
.detail-back:hover { color: var(--text-primary); border-color: var(--border-accent); }

.detail-set-header {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-4) var(--space-5);
    background: var(--surface-grad);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
}
.detail-set-header.complete { border-color: rgba(20, 158, 97, 0.45); }
.detail-logo-area {
    flex-shrink: 0;
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.detail-logo { max-height: 64px; max-width: 120px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45)); }
.detail-logo-fallback { font-weight: 700; color: var(--text-secondary); font-size: 0.9rem; text-align: center; }
.detail-head-info { flex: 1; min-width: 0; }
.detail-set-name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-3);
}
.detail-progress { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.detail-track {
    flex: 1;
    min-width: 160px;
    max-width: 360px;
    height: 10px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.detail-fill { height: 100%; background: var(--grad-bar); border-radius: var(--radius-full); box-shadow: 0 0 8px rgba(113, 50, 245, 0.5); }
.detail-set-header.complete .detail-fill { background: linear-gradient(90deg, #0f7a4a, #149e61); }
.detail-progress-text { font-family: var(--font-mono); font-size: 0.9rem; color: var(--text-secondary); }
.detail-progress-text b { color: var(--accent-soft); }

.dashboard-empty { color: var(--text-muted); font-size: 1rem; padding: var(--space-6) 0; }

@media (max-width: 600px) {
    .dash-set-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); }
    .dash-card-logo-area { min-height: 68px; }
    .detail-set-header { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
    .detail-logo-area { width: auto; }
}

/* ── Restore-backup dialog ─────────────────────────────────────── */
.restore-overlay {
    position: fixed;
    inset: 0;
    background-color: var(--bg-overlay);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    padding: var(--space-4);
}

.restore-panel {
    width: 100%;
    max-width: 400px;
    background: var(--surface-grad);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-6);
    text-align: center;
}

.restore-panel h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
}

.restore-panel p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 var(--space-6);
}

.restore-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.restore-btn {
    width: 100%;
    padding: 12px 16px;
    border-radius: var(--radius-btn);
    border: 1px solid var(--border-default);
    background: rgba(255, 255, 255, 0.04); /* shorthand also clears the global button gradient */
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--t-base), background-color var(--t-base), box-shadow var(--t-base);
}

.restore-btn:hover {
    border-color: var(--border-accent);
    background-color: rgba(255, 255, 255, 0.07);
}

.restore-btn--primary {
    background: var(--grad-brand-btn);
    border: none;
    color: #fff;
}

.restore-btn--primary:hover {
    box-shadow: var(--shadow-btn-glow);
}

.restore-btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary);
    font-weight: 500;
}

.restore-btn--ghost:hover {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: transparent;
    color: var(--text-primary);
}

/* ── Legal / policy pages (privacy.html) ───────────────────────── */
.legal {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-4) var(--space-16);
    line-height: 1.65;
    color: var(--text-secondary);
}
.legal h1 {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}
.legal h2 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: var(--space-8) 0 var(--space-3);
}
.legal p { margin-bottom: var(--space-4); }
.legal a { color: var(--accent-soft); }
.legal ul { padding-left: var(--space-6); margin: var(--space-3) 0 var(--space-4); }
.legal li { margin-bottom: var(--space-2); }
.legal-updated {
    font-size: 0.875rem;
    color: var(--text-secondary);
    opacity: 0.8;
    margin-bottom: var(--space-6);
}
.legal-disclaimer {
    margin-top: var(--space-8);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
    font-size: 0.8125rem;
    opacity: 0.8;
}