:root {
    --bg: #0f1220;
    --bg-elevated: #171b2e;
    --bg-hover: #1e2340;
    --border: #2a3052;
    --text: #e8eaf6;
    --text-muted: #9aa0c3;
    --primary: #2d6bff;
    --primary-hover: #4a80ff;
    --accent: #00c8a0;
    --danger: #ff5470;
    --warning: #ffb454;
    --radius: 10px;
    font-size: 15px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
}

a { color: var(--primary-hover); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-weight: 600; }

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

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

/* Header */
.site-header {
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.site-nav {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.65rem 1rem;
    min-width: 0;
}

.brand {
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    min-width: 0;
}
.brand:hover { text-decoration: none; }

.brand-badge {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    font-weight: 800;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    font-size: 0.85rem;
}

.nav-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2.75rem;
    height: 2.75rem;
    margin-left: auto;
    padding: 0.55rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    flex-shrink: 0;
}
.nav-burger:hover {
    background: var(--bg-hover);
}
.nav-burger:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.nav-burger-bar {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-header.is-nav-open .nav-burger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.site-header.is-nav-open .nav-burger-bar:nth-child(2) {
    opacity: 0;
}
.site-header.is-nav-open .nav-burger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.nav-panel {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
    min-width: 0;
}

.nav-links {
    display: flex;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.nav-links a {
    color: var(--text-muted);
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius);
    font-weight: 500;
}
.nav-links a:hover { color: var(--text); background: var(--bg-hover); text-decoration: none; }
.nav-links a.active { color: var(--text); background: var(--bg-hover); }

.nav-user { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.user-email { color: var(--text-muted); font-size: 0.85rem; }

@media (max-width: 768px) {
    html, body {
        overflow-x: clip;
    }

    body.has-mobile-nav-open {
        overflow: hidden;
    }

    .site-header {
        overflow: visible;
    }

    .site-nav {
        flex-wrap: wrap;
        gap: 0.5rem;
        position: relative;
    }

    .nav-burger {
        display: inline-flex;
    }

    .nav-panel {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0.35rem;
        flex: 1 1 100%;
        width: 100%;
        padding: 0.5rem 0 0.35rem;
        border-top: 1px solid var(--border);
        margin-top: 0.15rem;
    }

    .site-header.is-nav-open .nav-panel {
        display: flex;
    }

    .nav-links {
        flex-direction: column;
        flex: none;
        gap: 0.15rem;
    }

    .nav-links a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0.65rem 0.85rem;
    }

    .nav-user {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding-top: 0.5rem;
        margin-top: 0.25rem;
        border-top: 1px solid var(--border);
    }

    .user-email {
        padding: 0.25rem 0.85rem;
        word-break: break-all;
    }

    .nav-user .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* Buttons */
.btn {
    display: inline-block;
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}
.btn:hover { text-decoration: none; }
.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.85rem; }
.btn-icon { display: inline-flex; align-items: center; justify-content: center; padding: 0.45rem; line-height: 0; }
.btn-icon svg { width: 1.25rem; height: 1.25rem; }
.btn-icon:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary { background: var(--bg-hover); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: var(--border); }
.btn-ghost { background: transparent; color: var(--text-muted); border-color: var(--border); }
.btn-ghost:hover { color: var(--text); background: var(--bg-hover); }
.btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }

/* Forms */
label { display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.9rem; }

input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="url"], select, textarea {
    width: 100%;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.55rem 0.75rem;
    font-size: 0.95rem;
    font-family: inherit;
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--primary);
    outline-offset: -1px;
}

.stack > * + * { margin-top: 0.9rem; }

.form-row { display: flex; gap: 1rem; }
.form-row > * { flex: 1; }

.form-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    max-width: 640px;
}

.platform-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1.25rem;
    margin-top: 0.35rem;
}

.platform-choice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-weight: 500;
    cursor: pointer;
}

.platform-choice input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--primary);
}

@media (max-width: 480px) {
    .platform-choices {
        grid-template-columns: 1fr;
    }
}

/* Auth */
.auth-card {
    max-width: 400px;
    margin: 8vh auto 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2.5rem 2.25rem;
}

.auth-card h1,
.auth-heading {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.3;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted);
}

.auth-lead {
    margin: 0.55rem 0 0;
    line-height: 1.5;
}

.auth-card .flash {
    margin-top: 1.1rem;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    margin-top: 1.75rem;
}

.auth-field {
    margin: 0;
}

.auth-code-input {
    letter-spacing: 0.18em;
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
    padding-block: 0.85rem;
}

.auth-code-input::placeholder {
    letter-spacing: 0.18em;
    color: color-mix(in srgb, var(--text-muted) 70%, transparent);
    font-weight: 500;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1.4;
}

.checkbox-label input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0.12rem 0 0;
    flex-shrink: 0;
    accent-color: var(--primary);
    cursor: pointer;
}

.auth-submit {
    width: 100%;
    padding-block: 0.75rem;
    margin-top: 0.25rem;
}

.auth-footer {
    margin: 1.75rem 0 0;
    text-align: center;
    font-size: 0.9rem;
}

.auth-footer a {
    color: var(--text-muted);
}

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

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Flash messages */
.flash {
    padding: 0.7rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-weight: 500;
}
.flash-success { background: rgba(0, 200, 160, 0.12); color: var(--accent); border: 1px solid rgba(0, 200, 160, 0.4); }
.flash-error { background: rgba(255, 84, 112, 0.12); color: var(--danger); border: 1px solid rgba(255, 84, 112, 0.4); }
.flash-info { background: rgba(45, 107, 255, 0.12); color: var(--primary-hover); border: 1px solid rgba(45, 107, 255, 0.4); }

/* Page headers */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.page-header h1 { margin: 0; font-size: 1.5rem; }
.page-actions { display: flex; gap: 0.5rem; }

.cex-listings-top {
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0;
    margin-bottom: 1.25rem;
}

.cex-listings-top:has(.cex-import-panel.is-open) {
    row-gap: 0.75rem;
}

.cex-listings-top > h1 {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.2;
}

.cex-listings-top > .page-actions {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: end;
}

.cex-import-mount {
    display: contents;
}

.cex-listings-top .cex-import-panel-toggle {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: start;
}

.cex-listings-top .cex-import-panel {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    min-height: 0;
    margin: 0;
    border: none;
    background: transparent;
    pointer-events: none;
    transition: grid-template-rows 0.2s ease;
}

.cex-listings-top .cex-import-panel.is-open {
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .cex-listings-top .cex-import-panel {
        transition: none;
    }
}

.cex-import-panel-inner {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    overflow: hidden;
    min-height: 0;
}

.cex-import-panel.is-open {
    grid-template-rows: 1fr;
}

.cex-import-panel:not(.is-open) .cex-import-panel-inner {
    visibility: hidden;
}

.cex-import-panel-summary {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    min-width: 0;
}

.cex-listings-top .cex-import-panel .cex-import-panel-toolbar {
    padding: 0.65rem 0.85rem;
}

/* Filter bar */
.filter-bar {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.filter-bar a {
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.87rem;
    font-weight: 600;
}
.filter-bar a:hover { color: var(--text); background: var(--bg-hover); text-decoration: none; }
.filter-bar a.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Admin section */
.admin-nav {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.admin-nav a {
    color: var(--text-muted);
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius);
    font-weight: 500;
}

.admin-nav a:hover { color: var(--text); background: var(--bg-hover); text-decoration: none; }
.admin-nav a.active { color: var(--text); background: var(--bg-hover); }

.admin-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.admin-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    color: var(--text);
    display: block;
}

.admin-card:hover {
    border-color: var(--primary);
    text-decoration: none;
}

.admin-card h2 {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
}

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

/* Game grid & cards */
.game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1rem;
}

.game-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.game-card:hover { border-color: var(--primary); }

.game-cover {
    aspect-ratio: 3 / 4;
    width: 100%;
    object-fit: cover;
    background: var(--bg-hover);
    display: block;
}
.game-cover-placeholder {
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-hover);
    color: var(--text-muted);
    font-size: 2.5rem;
}

.game-card-body { padding: 0.75rem; flex: 1; display: flex; flex-direction: column; gap: 0.45rem; }
.game-title { font-weight: 600; line-height: 1.3; margin: 0; font-size: 0.98rem; }
.game-meta { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.game-owned-detail { margin: 0; font-size: 0.78rem; color: var(--text-muted); }
.game-card-actions { padding: 0 0.75rem 0.75rem; display: flex; gap: 0.4rem; flex-wrap: wrap; }

.game-card-hitarea {
    display: block;
    color: inherit;
    text-decoration: none;
}
.game-card-hitarea:hover { text-decoration: none; }
.game-card-hitarea .game-card-body { padding-bottom: 0.35rem; }

/* Game detail page */
.game-detail {
    display: grid;
    grid-template-columns: minmax(180px, 220px) 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}
.game-detail-cover {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.game-detail-info { display: flex; flex-direction: column; gap: 0.85rem; }
.game-detail-summary { margin: 0; line-height: 1.6; white-space: pre-line; }
.game-detail-section {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.detail-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.45rem 1.5rem;
    margin: 0;
}
.detail-list-compact {
    gap: 0.35rem 1.25rem;
}
.detail-list dt {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
}
.detail-list dd { margin: 0; }

.detail-sections {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 2rem;
}
.detail-section-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
}
.detail-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.detail-section-header .game-detail-section { margin-bottom: 0; }
.detail-section-match { margin: 0 0 1rem; }
.detail-section-empty {
    margin: 0;
    color: var(--text-muted);
}

@media (max-width: 640px) {
    .game-detail {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .game-detail-cover { max-width: 220px; }
}

/* Owned game detail page */
.owned-game-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.owned-game-back {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.9rem;
}
.owned-game-back:hover { color: var(--text); text-decoration: none; }
.owned-game-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.owned-game-actions form { margin: 0; }

.owned-game-page {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.owned-game-hero {
    display: grid;
    grid-template-columns: minmax(140px, 160px) 1fr;
    gap: 1.25rem;
    align-items: start;
}
.owned-game-cover { width: 100%; max-width: 160px; }
.owned-game-cover-img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    display: block;
    background: var(--bg-hover);
}
.owned-game-cover-placeholder {
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-hover);
    color: var(--text-muted);
    font-size: 3rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
.owned-game-hero-info {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-height: 100%;
}
.owned-game-hero-header {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.owned-game-title {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.2;
    font-weight: 700;
}
.owned-game-badges { gap: 0.4rem; }
.owned-game-release { margin: 0; font-size: 0.92rem; }

.owned-game-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem 1.25rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
}
.owned-game-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.owned-game-stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
}
.owned-game-stat-value {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
}
.owned-game-stat-value.is-empty { color: var(--text-muted); font-weight: 500; }

.owned-game-hero-platforms {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.owned-game-body {
    display: grid;
    grid-template-columns: 1fr minmax(280px, 360px);
    gap: 1.25rem;
    align-items: start;
}
.owned-game-body .owned-game-about {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
}
.owned-game-about-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.owned-game-about-header .game-detail-section { margin-bottom: 0; }
.owned-game-match { margin: 0; }
.owned-game-market {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.owned-game-market .game-detail-section { margin-bottom: 0; }
.owned-game-market-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
}
.price-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}
.price-chip {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem 0.65rem;
}
.price-chip-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.price-chip-value {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}
.price-chip-value.is-empty { color: var(--text-muted); font-weight: 500; }
.owned-game-cex {
    border-top: 1px solid var(--border);
    padding-top: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.owned-game-cex-heading {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.owned-game-cex-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.game-detail-info-embedded { display: flex; flex-direction: column; gap: 0.85rem; }
.owned-game-summary-details { margin: 0; }
.owned-game-summary-details > summary {
    cursor: pointer;
    list-style: none;
}
.owned-game-summary-details > summary::-webkit-details-marker { display: none; }
.owned-game-summary-details > summary::after {
    content: ' Read more';
    color: var(--primary-hover);
    font-size: 0.85rem;
    font-weight: 600;
}
.owned-game-summary-details[open] > summary { display: none; }
.owned-game-summary-details[open] > .owned-game-summary { margin-top: 0; }

.owned-game-hero-info .owned-game-about {
    border-top: 1px solid var(--border);
    padding-top: 1rem;
}
.owned-game-panel-group + .owned-game-panel-group { margin-top: 0; }
.owned-game-panel-group {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.owned-game-panel-label {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
}
.owned-game-summary {
    margin: 0;
    line-height: 1.65;
    white-space: pre-line;
}

@media (min-width: 768px) {
    .owned-game-stats {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (max-width: 768px) {
    .owned-game-stats { grid-template-columns: repeat(2, 1fr); }
    .owned-game-body { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .owned-game-hero {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .owned-game-cover { max-width: 140px; }
    .price-strip { grid-template-columns: 1fr; }
}

/* Badges */
.badge {
    display: inline-block;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: var(--bg-hover);
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.badge-platform { color: var(--primary-hover); border-color: rgba(45, 107, 255, 0.5); white-space: nowrap; }

/* PlayStation — brand-representative badge colors */
.badge-platform.badge-platform-ps1 {
    color: #d4d4d4;
    background: rgba(150, 150, 150, 0.18);
    border-color: rgba(150, 150, 150, 0.45);
}
.badge-platform.badge-platform-ps2 {
    color: #8ec0ff;
    background: rgba(0, 55, 145, 0.35);
    border-color: rgba(0, 87, 184, 0.6);
}
.badge-platform.badge-platform-ps3 {
    color: #ececec;
    background: rgba(30, 30, 30, 0.75);
    border-color: rgba(130, 130, 130, 0.5);
}
.badge-platform.badge-platform-ps4 {
    color: #7ec4ff;
    background: rgba(0, 112, 209, 0.22);
    border-color: rgba(0, 112, 209, 0.55);
}
.badge-platform.badge-platform-ps5 {
    color: #f5f5f5;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.38);
}
.badge-platform.badge-platform-psp {
    color: #c8c8c8;
    background: rgba(40, 40, 40, 0.85);
    border-color: rgba(110, 110, 110, 0.55);
}
.badge-platform.badge-platform-psvita {
    color: #8fd0ff;
    background: rgba(0, 114, 206, 0.24);
    border-color: rgba(0, 114, 206, 0.58);
}

/* Other platforms */
.badge-platform.badge-platform-xbox,
.badge-platform.badge-platform-xboxone {
    color: #8fdd8f;
    background: rgba(16, 124, 16, 0.22);
    border-color: rgba(16, 124, 16, 0.55);
}
.badge-platform.badge-platform-xbox360 {
    color: #b8f0a8;
    background: rgba(82, 176, 67, 0.2);
    border-color: rgba(82, 176, 67, 0.5);
}
.badge-platform.badge-platform-xboxseries {
    color: #c8ff70;
    background: rgba(155, 240, 11, 0.12);
    border-color: rgba(155, 240, 11, 0.45);
}
.badge-platform.badge-platform-switch,
.badge-platform.badge-platform-switch2 {
    color: #ff8a96;
    background: rgba(230, 0, 18, 0.18);
    border-color: rgba(230, 0, 18, 0.5);
}
.badge-platform.badge-platform-nes,
.badge-platform.badge-platform-snes,
.badge-platform.badge-platform-n64,
.badge-platform.badge-platform-gamecube,
.badge-platform.badge-platform-wii,
.badge-platform.badge-platform-wiiu,
.badge-platform.badge-platform-gameboy,
.badge-platform.badge-platform-gbc,
.badge-platform.badge-platform-gba,
.badge-platform.badge-platform-nds,
.badge-platform.badge-platform-3ds {
    color: #ff9aab;
    background: rgba(230, 0, 18, 0.12);
    border-color: rgba(230, 0, 18, 0.35);
}
.badge-platform.badge-platform-unknown {
    color: var(--text-muted);
    background: var(--bg-hover);
    border-color: var(--border);
}
.badge-owned {
    color: var(--accent);
    background: rgba(0, 200, 160, 0.12);
    border-color: rgba(0, 200, 160, 0.5);
}
.badge-region {
    white-space: nowrap;
    color: var(--warning);
    border-color: rgba(255, 180, 84, 0.4);
}
.badge-region-pal {
    color: #6ba3ff;
    background: rgba(45, 107, 255, 0.15);
    border-color: rgba(45, 107, 255, 0.45);
}
.badge-region-ntsc-u {
    color: #ffb454;
    background: rgba(255, 180, 84, 0.14);
    border-color: rgba(255, 180, 84, 0.45);
}
.badge-region-ntsc-j {
    color: #ff8ec4;
    background: rgba(255, 126, 179, 0.14);
    border-color: rgba(255, 126, 179, 0.45);
}
.badge-region-ntsc-c {
    color: #e6c04a;
    background: rgba(230, 192, 74, 0.14);
    border-color: rgba(230, 192, 74, 0.45);
}
.badge-region-region-free {
    color: var(--accent);
    background: rgba(0, 200, 160, 0.12);
    border-color: rgba(0, 200, 160, 0.45);
}
.badge-region-unknown {
    color: var(--text-muted);
    border-color: var(--border);
}
.badge-condition { color: var(--accent); border-color: rgba(0, 200, 160, 0.4); }
.badge-custom { color: var(--danger); border-color: rgba(255, 84, 112, 0.4); }

/* Tables */
.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: visible;
}
.data-table th, .data-table td {
    text-align: left;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.data-table th { color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--bg-hover); position: relative; z-index: 1; }

.table-cover { width: 42px; height: 56px; object-fit: cover; border-radius: 4px; display: block; }

.cover-preview {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.cover-preview-enlarged {
    position: absolute;
    left: calc(100% + 0.6rem);
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    pointer-events: none;
}

.cover-preview-enlarged img {
    width: 200px;
    max-height: 300px;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.55);
    display: block;
}

.cover-preview:hover .cover-preview-enlarged,
.cover-preview:focus-within .cover-preview-enlarged {
    opacity: 1;
    visibility: visible;
}

.data-table th.data-table-price,
.data-table td.data-table-price {
    white-space: nowrap;
    width: 1%;
}

/* Mobile-only meta under PC pending titles (platform/region columns stay on desktop) */
.pc-pending-meta {
    display: none;
}

.data-table-sortable {
    white-space: nowrap;
}

.data-table-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: inherit;
    text-decoration: none;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
}

.data-table-sort:hover {
    color: var(--text);
    text-decoration: none;
}

.data-table-sort::after {
    content: '↕';
    font-size: 0.75rem;
    opacity: 0.35;
}

.data-table-sort.is-active::after {
    opacity: 1;
}

.data-table-sort.is-active.is-asc::after {
    content: '↑';
}

.data-table-sort.is-active.is-desc::after {
    content: '↓';
}

.pc-cib-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.pc-cib-match-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.pc-cib-cell:hover .pc-cib-match-trigger,
.pc-cib-match-trigger:focus-visible {
    opacity: 1;
}

.pc-cib-match-trigger:hover {
    color: var(--primary-hover);
    background: rgba(45, 107, 255, 0.12);
}

.pc-cib-match-trigger svg {
    width: 0.85rem;
    height: 0.85rem;
}

.cex-wishlist-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem;
    min-width: 2rem;
    min-height: 2rem;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.cex-wishlist-toggle:hover,
.cex-wishlist-toggle:focus-visible {
    color: var(--primary-hover);
    background: rgba(45, 107, 255, 0.12);
}

.cex-wishlist-toggle:disabled {
    opacity: 0.5;
    cursor: wait;
}

.cex-wishlist-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
}

.cex-wishlist-icon-filled {
    display: none;
}

.cex-wishlist-toggle.is-wishlisted {
    color: var(--primary);
}

.cex-wishlist-toggle.is-wishlisted .cex-wishlist-icon-outline {
    display: none;
}

.cex-wishlist-toggle.is-wishlisted .cex-wishlist-icon-filled {
    display: block;
}

.data-table tbody tr.is-wishlisted .cex-wishlist-toggle.is-wishlisted:hover,
.data-table tbody tr.is-wishlisted .cex-wishlist-toggle.is-wishlisted:focus-visible {
    color: var(--danger);
    background: rgba(220, 53, 69, 0.12);
}

.cex-owned-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem;
    min-width: 2rem;
    min-height: 2rem;
    border-radius: 4px;
    color: var(--success, #28a745);
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease;
}

.cex-owned-indicator:hover,
.cex-owned-indicator:focus-visible {
    color: var(--success-hover, #218838);
    background: rgba(40, 167, 69, 0.12);
}

.cex-owned-indicator svg {
    width: 1.25rem;
    height: 1.25rem;
}

.data-table-owned {
    width: 2.5rem;
    padding-left: 0;
    padding-right: 0.25rem;
}

.data-table tbody tr.is-wishlisted {
    background: rgba(45, 107, 255, 0.06);
}

.data-table tbody tr.is-wishlisted:hover {
    background: rgba(45, 107, 255, 0.1);
}

.data-table tbody tr.is-wishlisted td:first-child {
    box-shadow: inset 3px 0 0 var(--primary);
}

/* CEX listings / wishlist table wrapper */
.cex-table-wrap {
    width: 100%;
}

/* Shared admin table wrappers (pending match / IGDB select) */
.admin-table-wrap {
    width: 100%;
}

@media (min-width: 769px) and (max-width: 900px) {
    .cex-table-wrap,
    .admin-table-wrap,
    .owned-game-cex-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 768px) {
    /* --- CEX table -> card layout --- */
    .cex-table-wrap {
        width: 100%;
        overflow: visible;
    }

    .cex-table-wrap .data-table {
        display: block;
        width: 100%;
        border: none;
        background: transparent;
        overflow: visible;
    }

    /* Mobile sort bar — reusable thead sort links as chips */
    .cex-table-wrap .data-table thead {
        display: block;
        position: static;
        width: 100%;
        height: auto;
        padding: 0;
        margin: 0 0 0.75rem;
        overflow: visible;
        clip: auto;
        white-space: normal;
        border: 0;
    }

    .cex-table-wrap .data-table thead tr {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.35rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: 0.15rem;
        mask-image: linear-gradient(to right, #000 85%, transparent);
        -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
    }

    .cex-table-wrap .data-table thead th {
        display: none;
        padding: 0;
        border: none;
        background: transparent;
        text-transform: none;
        letter-spacing: normal;
    }

    .cex-table-wrap .data-table thead th.data-table-sortable {
        display: block;
        flex: 0 0 auto;
    }

    .cex-table-wrap .data-table thead .data-table-sort {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0.4rem 0.75rem;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: var(--bg-elevated);
        color: var(--text-muted);
        font-size: 0.82rem;
        font-weight: 600;
        white-space: nowrap;
    }

    .cex-table-wrap .data-table thead .data-table-sort:hover {
        color: var(--text);
        background: var(--bg-hover);
        text-decoration: none;
    }

    .cex-table-wrap .data-table thead .data-table-sort.is-active {
        color: #fff;
        background: var(--primary);
        border-color: var(--primary);
    }

    .cex-table-wrap .data-table thead .data-table-sort.is-active::after {
        opacity: 1;
    }

    .cex-table-wrap .data-table tbody {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 0.65rem;
    }

    .cex-table-wrap .data-table tbody tr {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        grid-template-rows: auto auto auto auto auto;
        width: 100%;
        column-gap: 0.65rem;
        row-gap: 0.15rem;
        padding: 0.7rem;
        background: var(--bg-elevated);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        position: relative;
    }

    .cex-table-wrap .data-table tbody tr:hover {
        background: var(--bg-elevated);
    }

    .cex-table-wrap .data-table tbody tr.is-wishlisted {
        background: rgba(45, 107, 255, 0.06);
        box-shadow: inset 3px 0 0 var(--primary);
    }

    .cex-table-wrap .data-table tbody tr.is-wishlisted:hover {
        background: rgba(45, 107, 255, 0.08);
    }

    .cex-table-wrap .data-table tbody tr.is-wishlisted td:first-child {
        box-shadow: none;
    }

    .cex-table-wrap .data-table tbody tr.is-unavailable {
        opacity: 0.7;
    }

    .cex-table-wrap .data-table td {
        display: block;
        padding: 0;
        border: none;
        width: auto;
        white-space: normal;
        min-width: 0;
    }

    .cex-table-wrap .data-table th.data-table-price,
    .cex-table-wrap .data-table td.data-table-price,
    .cex-table-wrap .data-table-owned {
        width: auto;
        white-space: normal;
        padding-left: 0;
        padding-right: 0;
    }

    /* Cover spans full card height beside content */
    .cex-table-wrap .data-table-cell--cover {
        grid-column: 1;
        grid-row: 1 / span 5;
        align-self: start;
    }

    .cex-table-wrap .data-table-cell--cover .table-cover {
        width: 80px;
        height: 106px;
        border-radius: 6px;
    }

    .cex-table-wrap .data-table-cell--platform {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
    }

    .cex-table-wrap .data-table-cell--title {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        font-weight: 600;
        font-size: 0.92rem;
        line-height: 1.3;
        word-break: break-word;
    }

    /* Wishlist + owned beside title block */
    .cex-table-wrap .data-table td.data-table-row-actions:not(.data-table-owned) {
        grid-column: 3;
        grid-row: 1 / span 2;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        align-self: start;
    }

    .cex-table-wrap .data-table td.data-table-row-actions.data-table-owned,
    .cex-table-wrap .data-table td.data-table-owned {
        grid-column: 4;
        grid-row: 1 / span 2;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        align-self: start;
    }

    /* Price / PC CIB / Diff on one compact row */
    .cex-table-wrap .data-table td[data-label] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.1rem;
        padding: 0.2rem 0 0;
        font-size: 0.85rem;
        text-align: left;
        line-height: 1.25;
    }

    .cex-table-wrap .data-table td[data-label]::before {
        content: attr(data-label);
        color: var(--text-muted);
        font-size: 0.65rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        line-height: 1.2;
    }

    .cex-table-wrap .data-table td[data-label="Price"] {
        grid-column: 2;
        grid-row: 3;
        margin-top: 0.2rem;
        padding-top: 0.35rem;
        border-top: 1px solid var(--border);
    }

    .cex-table-wrap .data-table td[data-label="PC CIB"] {
        grid-column: 3;
        grid-row: 3;
        margin-top: 0.2rem;
        padding-top: 0.35rem;
        border-top: 1px solid var(--border);
    }

    .cex-table-wrap .data-table td[data-label="Diff"] {
        grid-column: 4;
        grid-row: 3;
        margin-top: 0.2rem;
        padding-top: 0.35rem;
        border-top: 1px solid var(--border);
    }

    .cex-table-wrap .data-table td[data-label="Available in"] {
        grid-column: 2 / -1;
        grid-row: 4;
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.5rem;
        padding-top: 0.25rem;
        font-size: 0.82rem;
    }

    .cex-table-wrap .data-table td[data-label="Added"] {
        grid-column: 2 / -1;
        grid-row: 5;
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.5rem;
        padding-top: 0.1rem;
        font-size: 0.82rem;
    }

    .cex-table-wrap .data-table td[data-label="PC CIB"] .pc-cib-cell {
        flex-wrap: wrap;
    }

    .cex-table-wrap .cex-wishlist-toggle,
    .cex-table-wrap .cex-owned-indicator {
        min-width: 44px;
        min-height: 44px;
        padding: 0.45rem;
    }

    .cex-table-wrap .pc-cib-match-trigger {
        min-width: 32px;
        min-height: 32px;
        padding: 0.25rem;
        opacity: 1;
    }

    .cex-table-wrap .pc-cib-match-trigger svg {
        width: 1rem;
        height: 1rem;
    }

    /* --- Shared admin table card foundations --- */
    .admin-table-wrap,
    .owned-game-cex-table-wrap {
        width: 100%;
        overflow: visible;
    }

    .admin-table-wrap .data-table,
    .owned-game-cex-table-wrap .data-table {
        display: block;
        width: 100%;
        border: none;
        background: transparent;
        overflow: visible;
    }

    .admin-table-wrap .data-table thead,
    .owned-game-cex-table-wrap .data-table thead {
        display: none;
    }

    .admin-table-wrap .data-table tbody,
    .owned-game-cex-table-wrap .data-table tbody {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 0.65rem;
    }

    .admin-table-wrap .data-table tbody tr,
    .owned-game-cex-table-wrap .data-table tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        width: 100%;
        column-gap: 0.65rem;
        row-gap: 0.35rem;
        padding: 0.7rem;
        background: var(--bg-elevated);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        position: relative;
    }

    .admin-table-wrap .data-table tbody tr:hover,
    .owned-game-cex-table-wrap .data-table tbody tr:hover {
        background: var(--bg-elevated);
    }

    .admin-table-wrap .data-table td,
    .owned-game-cex-table-wrap .data-table td {
        display: block;
        padding: 0;
        border: none;
        width: auto;
        white-space: normal;
        min-width: 0;
    }

    .admin-table-wrap .data-table th.data-table-price,
    .admin-table-wrap .data-table td.data-table-price,
    .owned-game-cex-table-wrap .data-table th.data-table-price,
    .owned-game-cex-table-wrap .data-table td.data-table-price {
        width: auto;
        white-space: normal;
        padding-left: 0;
        padding-right: 0;
    }

    .admin-table-wrap .data-table td[data-label],
    .owned-game-cex-table-wrap .data-table td[data-label] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.1rem;
        padding: 0.15rem 0 0;
        font-size: 0.85rem;
        text-align: left;
        line-height: 1.25;
    }

    .admin-table-wrap .data-table td[data-label]::before,
    .owned-game-cex-table-wrap .data-table td[data-label]::before {
        content: attr(data-label);
        color: var(--text-muted);
        font-size: 0.65rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        line-height: 1.2;
    }

    .admin-table-wrap .data-table-cell--cover .table-cover,
    .admin-table-wrap .data-table-cell--cover .cover-preview img {
        width: 64px;
        height: 85px;
        border-radius: 6px;
        object-fit: cover;
    }

    .admin-table-wrap .data-table-cell--title {
        font-weight: 600;
        font-size: 0.92rem;
        line-height: 1.3;
        word-break: break-word;
    }

    .admin-table-wrap .data-table td.data-table-row-actions {
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
    }

    .admin-table-wrap .data-table td.data-table-row-actions .btn {
        min-height: 44px;
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    /* --- Match pending tables --- */
    .admin-table-wrap--match .data-table-cell--cover {
        order: 1;
        flex: 0 0 auto;
    }

    .admin-table-wrap--match .data-table-cell--title {
        order: 2;
        flex: 1 1 0;
        min-width: 0;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    .admin-table-wrap--match .data-table td.data-table-row-actions {
        order: 3;
        flex: 1 1 100%;
        justify-content: flex-end;
        padding-top: 0.15rem;
    }

    .admin-table-wrap--match .data-table td[data-label]:not(.data-table-match) {
        order: 4;
        flex: 1 1 calc(50% - 0.4rem);
        min-width: 0;
        padding-top: 0.35rem;
        border-top: 1px solid var(--border);
        margin-top: 0.1rem;
    }

    .admin-table-wrap--match .data-table td.data-table-match {
        order: 5;
        flex: 1 1 100%;
        min-width: 0;
        width: 100%;
        padding-top: 0.5rem;
        border-top: 1px solid var(--border);
        margin-top: 0.1rem;
    }

    .admin-table-wrap--match .data-table td.data-table-match::before {
        content: none;
    }

    .admin-table-wrap--match .data-table-match .import-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        margin-top: 0.5rem;
    }

    .admin-table-wrap--match .data-table-match .import-toolbar input[type="text"],
    .admin-table-wrap--match .data-table-match .import-toolbar input[type="search"] {
        min-width: 0;
        width: 100%;
    }

    .admin-table-wrap--match .data-table-match .import-toolbar .btn {
        width: 100%;
    }

    .admin-table-wrap--match .match-candidate {
        min-height: 44px;
        padding: 0.55rem 0.7rem;
    }

    .admin-table-wrap--match .match-search input[type="text"] {
        min-height: 44px;
    }

    .admin-table-wrap--match .match-search .btn-icon {
        min-width: 44px;
        min-height: 44px;
    }

    .admin-table-wrap--match .match-confirm {
        width: 100%;
        min-height: 44px;
        align-self: stretch;
    }

    .admin-table-wrap--match .match-search-region-toggle {
        min-height: 44px;
        align-items: center;
        white-space: normal;
    }

    .admin-table-wrap--match .suggestion-list .btn {
        min-height: 44px;
        width: 100%;
        text-align: left;
        white-space: normal;
    }

    .admin-table-wrap--match .manual-match-row label {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        min-height: 44px;
        padding: 0.35rem 0;
    }

    /* --- PriceCharting pending: denser cards (page-scoped) --- */
    .admin-table-wrap--pricecharting-pending .data-table tbody tr {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-template-rows: auto auto auto;
        align-items: start;
        padding: 0.55rem 0.6rem;
        row-gap: 0.3rem;
        column-gap: 0.45rem;
    }

    .admin-table-wrap--pricecharting-pending .data-table-cell--cover {
        grid-column: 1 / 2;
        grid-row: 1;
        order: unset;
        flex: unset;
    }

    .admin-table-wrap--pricecharting-pending .data-table-cell--cover .table-cover,
    .admin-table-wrap--pricecharting-pending .data-table-cell--cover .cover-preview img {
        width: 48px;
        height: 64px;
    }

    .admin-table-wrap--pricecharting-pending .data-table-cell--title {
        grid-column: 2 / 5;
        grid-row: 1;
        order: unset;
        flex: unset;
        min-width: 0;
        align-self: center;
    }

    .admin-table-wrap--pricecharting-pending .pc-pending-meta {
        display: block;
        margin-top: 0.15rem;
        font-size: 0.78rem;
        line-height: 1.25;
    }

    .admin-table-wrap--pricecharting-pending .data-table td.data-table-row-actions {
        grid-column: 5 / 7;
        grid-row: 1;
        order: unset;
        flex: unset;
        justify-content: flex-end;
        padding-top: 0;
        align-self: start;
    }

    .admin-table-wrap--pricecharting-pending .data-table td.pc-pending-meta-cell {
        display: none;
    }

    .admin-table-wrap--pricecharting-pending .data-table td.data-table-price {
        order: unset;
        flex: unset;
        min-width: 0;
        width: auto;
        padding-top: 0.25rem;
        border-top: 1px solid var(--border);
        margin-top: 0;
        grid-row: 2;
    }

    .admin-table-wrap--pricecharting-pending .data-table td.data-table-price[data-label="Loose"] {
        grid-column: 1 / 3;
    }

    .admin-table-wrap--pricecharting-pending .data-table td.data-table-price[data-label="CIB"] {
        grid-column: 3 / 5;
    }

    .admin-table-wrap--pricecharting-pending .data-table td.data-table-price[data-label="New"] {
        grid-column: 5 / 7;
    }

    .admin-table-wrap--pricecharting-pending .data-table td.data-table-match {
        grid-column: 1 / -1;
        grid-row: 3;
        order: unset;
        flex: unset;
        width: auto;
        padding-top: 0.35rem;
        margin-top: 0;
    }

    .admin-table-wrap--pricecharting-pending .data-table-match .import-toolbar {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0.4rem;
        margin-top: 0.35rem;
    }

    .admin-table-wrap--pricecharting-pending .data-table-match .import-toolbar input[type="text"],
    .admin-table-wrap--pricecharting-pending .data-table-match .import-toolbar input[type="search"] {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        min-height: 44px;
    }

    .admin-table-wrap--pricecharting-pending .data-table-match .import-toolbar .btn {
        flex: 0 0 auto;
        width: auto;
        min-height: 44px;
    }

    /* --- IGDB select table --- */
    .admin-table-wrap--select .data-table-cell--select {
        order: 1;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        align-self: center;
    }

    .admin-table-wrap--select .data-table-cell--select input[type="checkbox"] {
        width: 1.15rem;
        height: 1.15rem;
    }

    .admin-table-wrap--select .data-table-cell--cover {
        order: 2;
        flex: 0 0 auto;
    }

    .admin-table-wrap--select .data-table-cell--title {
        order: 3;
        flex: 1 1 0;
        min-width: 0;
        align-self: center;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    .admin-table-wrap--select .data-table td[data-label] {
        order: 4;
        flex: 1 1 calc(50% - 0.4rem);
        padding-top: 0.35rem;
        border-top: 1px solid var(--border);
        margin-top: 0.1rem;
    }

    .admin-table-wrap--select .data-table td[data-label="Platforms"] {
        flex: 1 1 100%;
    }

    /* --- Owned game detail CeX subtable --- */
    .owned-game-cex-table-wrap .data-table-cell--title {
        order: 1;
        flex: 1 1 100%;
        font-weight: 600;
        font-size: 0.92rem;
        line-height: 1.3;
        word-break: break-word;
    }

    .owned-game-cex-table-wrap .data-table td[data-label] {
        order: 2;
        flex: 1 1 calc(50% - 0.4rem);
        padding-top: 0.35rem;
        border-top: 1px solid var(--border);
        margin-top: 0.1rem;
    }

    .owned-game-cex-table-wrap .data-table td[data-label="Available in"] {
        flex: 1 1 100%;
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.5rem;
    }
}

@media (hover: none) {
    .cover-preview:hover .cover-preview-enlarged,
    .cover-preview:focus-within .cover-preview-enlarged {
        opacity: 0;
        visibility: hidden;
    }

    .pc-cib-match-trigger {
        opacity: 1;
    }
}

.pc-match-dialog {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0;
    width: min(32rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    background: var(--bg-elevated);
    color: var(--text);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}

.pc-match-dialog::backdrop {
    background: rgba(8, 10, 18, 0.72);
}

.pc-match-dialog-panel {
    padding: 1.25rem 1.35rem 1.1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

.pc-match-dialog-panel h2 {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
}

.pc-match-dialog-subtitle {
    margin: 0 0 1rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.pc-match-current {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    margin-bottom: 1rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
}

.pc-match-current-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.pc-match-current-link {
    font-weight: 600;
}

.pc-match-remove {
    margin-top: 0.25rem;
    color: var(--danger);
}

.pc-match-dialog-error {
    margin: 0.75rem 0 0;
    color: var(--danger);
    font-size: 0.9rem;
}

.pc-match-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

.price-diff-positive {
    color: var(--accent);
    font-weight: 600;
}

.price-diff-negative {
    color: var(--danger);
    font-weight: 600;
}

.store-availability {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.5rem;
    font-size: 0.9rem;
    line-height: 1.4;
}

.store-availability-details {
    display: inline;
}

.store-availability-details > summary {
    display: inline;
    cursor: pointer;
    list-style: none;
}

.store-availability-details > summary::-webkit-details-marker {
    display: none;
}

.store-availability-details > summary::before {
    content: '▸ ';
    color: var(--text-muted);
    font-size: 0.75rem;
}

.store-availability-details[open] > summary::before {
    content: '▾ ';
}

.store-availability-more {
    color: var(--text-muted);
}

.store-availability-full {
    margin: 0.35rem 0 0;
    padding-left: 1.1rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.store-availability-full li + li {
    margin-top: 0.15rem;
}

.store-availability-none {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-style: italic;
}

.data-table tbody tr.is-unavailable {
    opacity: 0.62;
}

.data-table tbody tr.is-unavailable td {
    color: color-mix(in srgb, var(--text) 72%, var(--text-muted));
}

.data-table tbody tr.is-unavailable:hover {
    opacity: 0.78;
}

.data-table tbody tr.is-unavailable.is-wishlisted {
    background: rgba(45, 107, 255, 0.04);
}

.data-table tbody tr.is-unavailable.is-wishlisted:hover {
    background: rgba(45, 107, 255, 0.06);
}

.cex-import-panel {
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    overflow: hidden;
}

.pricecharting-import-mount {
    margin-bottom: 1rem;
}

.pricecharting-import-mount .cex-import-panel {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    min-height: 0;
    margin: 0;
    border: none;
    background: transparent;
    pointer-events: none;
    transition: grid-template-rows 0.2s ease;
}

.pricecharting-import-mount .cex-import-panel.is-open {
    grid-template-rows: 1fr;
    pointer-events: auto;
    margin-top: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
    .pricecharting-import-mount .cex-import-panel {
        transition: none;
    }
}

.cex-import-panel-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.35rem 0.5rem 0.35rem 0.35rem;
    flex-wrap: wrap;
}

.cex-import-panel-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    text-align: left;
}

.cex-import-panel-toggle.is-expanded,
.cex-import-panel-toggle[aria-expanded="true"] {
    border-color: rgba(45, 107, 255, 0.45);
    background: rgba(45, 107, 255, 0.08);
}

.cex-import-panel-toggle.is-expanded:hover,
.cex-import-panel-toggle[aria-expanded="true"]:hover {
    background: rgba(45, 107, 255, 0.12);
}

.cex-import-panel-chevron {
    flex-shrink: 0;
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
    margin-left: 0.15rem;
}

.cex-import-panel-toggle.is-expanded .cex-import-panel-chevron,
.cex-import-panel-toggle[aria-expanded="true"] .cex-import-panel-chevron {
    transform: rotate(45deg);
    margin-top: -0.15rem;
}

.cex-import-panel-title {
    font-weight: 600;
    font-size: 0.92rem;
    white-space: nowrap;
}

.cex-import-panel-badge {
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.cex-import-panel-freshness {
    color: var(--text-muted);
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cex-import-panel-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.cex-import-panel-body {
    padding: 0 0.85rem 0.85rem;
    border-top: 1px solid var(--border);
}

.cex-import-panel-empty {
    margin: 0.85rem 0 0;
    font-size: 0.9rem;
}

.cex-import-sources {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.65rem;
    margin-top: 0.85rem;
}

.cex-import-source {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.75rem 0.85rem;
    border-radius: calc(var(--radius) - 2px);
    background: var(--bg);
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.cex-import-source:hover {
    background: var(--bg-hover);
    border-color: var(--border);
}

.cex-import-source-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
}

.cex-import-source-title-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.cex-import-source-label {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
}

.cex-import-source-last {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    white-space: nowrap;
}

.cex-import-status-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
}

.cex-import-status-dot.is-fresh {
    background: var(--accent);
    box-shadow: 0 0 0 2px rgba(0, 200, 160, 0.2);
}

.cex-import-status-dot.is-stale {
    background: var(--warning);
}

.cex-import-status-dot.is-never {
    background: var(--border);
}

.cex-import-status-dot.is-error {
    background: var(--danger, #c0392b);
}

.cex-import-stat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.cex-import-stat-chip {
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background: rgba(45, 107, 255, 0.1);
    border: 1px solid rgba(45, 107, 255, 0.22);
    color: var(--primary-hover);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
}

.cex-import-source-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: 0.15rem;
}

.cex-import-panel-message {
    margin: 0;
    padding: 0.65rem 0.85rem;
    font-size: 0.88rem;
    border-top: 1px solid var(--border);
}

.cex-import-panel-message.is-error {
    color: var(--danger);
    background: rgba(255, 84, 112, 0.08);
}

.cex-import-panel-message.is-success {
    color: var(--accent);
    background: rgba(0, 200, 160, 0.08);
}

/* Empty states */
.empty-state {
    text-align: center;
    padding: 3.5rem 1rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
}
.empty-state h2 { color: var(--text); }

/* Admin import (React) */
.import-toolbar { display: flex; gap: 0.75rem; margin-bottom: 1rem; flex-wrap: wrap; align-items: center; }
.import-toolbar input[type="text"],
.import-toolbar input[type="search"] { flex: 1; min-width: 240px; }
.import-toolbar select { width: auto; }
.import-toolbar-option { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; color: var(--text-muted); font-size: 0.95rem; cursor: pointer; }
.import-toolbar-option input { margin: 0; }

.import-status { font-size: 0.85rem; font-weight: 600; }
.import-status.ok { color: var(--accent); }
.import-status.exists { color: var(--text-muted); }
.import-status.error { color: var(--danger); }

.search-summary { margin: 0.5rem 0 1rem; color: var(--text-muted); font-size: 0.9rem; }

.data-table-match {
    vertical-align: top;
    min-width: 280px;
    width: 34%;
}

.match-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.match-candidates {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.match-candidate {
    display: block;
    width: 100%;
    margin: 0;
    text-align: left;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    line-height: 1.35;
    transition: background 0.15s ease, border-color 0.15s ease;
}

button.match-candidate {
    appearance: none;
}

.match-candidate:hover:not(:disabled) {
    background: var(--bg-hover);
    border-color: var(--primary);
}

.match-candidate:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.match-candidate-title {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
}

.match-candidate-score {
    font-weight: 500;
    color: var(--accent);
}

.match-candidate-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.match-candidate-radio {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.match-candidate-radio input {
    width: auto;
    margin: 0.2rem 0 0;
    flex-shrink: 0;
}

.match-candidate-radio .match-candidate-body {
    flex: 1;
    min-width: 0;
}

.match-candidate-radio:has(input:checked) {
    border-color: var(--primary);
    background: rgba(45, 107, 255, 0.08);
}

.match-show-more {
    align-self: flex-start;
}

.match-search {
    display: flex;
    align-items: stretch;
    width: 100%;
    margin: 0;
}

.match-search input[type="text"] {
    flex: 1;
    min-width: 0;
    width: auto;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding: 0.4rem 0.6rem;
    font-size: 0.875rem;
}

.match-search .btn-icon {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
    flex-shrink: 0;
}

.match-search-region-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
}

.match-search-region-toggle input {
    margin: 0;
}

.match-search-empty {
    margin: 0;
    font-size: 0.85rem;
}

.match-confirm {
    align-self: flex-start;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.pagination-pages {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.pagination-page,
.pagination-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0 0.4rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
a.pagination-page:hover,
a.pagination-arrow:hover {
    color: var(--text);
    background: var(--bg-hover);
    text-decoration: none;
}

.pagination-page.is-current {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.pagination-arrow {
    font-size: 1.05rem;
    line-height: 1;
}
span.pagination-arrow {
    opacity: 0.35;
    cursor: default;
}

.pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 2.1rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    user-select: none;
}

.pagination-jump {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.pagination-jump label {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.87rem;
    font-weight: 600;
    white-space: nowrap;
}
.pagination-jump input[type="number"] {
    width: 4rem;
    padding: 0.4rem 0.5rem;
    text-align: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.pagination-jump input[type="number"]::-webkit-outer-spin-button,
.pagination-jump input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.pagination-jump input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}
.pagination-jump button {
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-hover);
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
.pagination-jump button:hover {
    background: var(--border);
}

@media (max-width: 768px) {
    /* Admin nav — single-row horizontal scroll */
    .admin-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0.15rem;
        margin-bottom: 1.15rem;
        padding-bottom: 0.75rem;
        scrollbar-width: thin;
    }

    .admin-nav a {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: 0.87rem;
        padding: 0.45rem 0.7rem;
    }

    /* Page headers */
    .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .page-header .page-actions {
        width: 100%;
    }

    .page-header .page-actions .btn {
        width: 100%;
        text-align: center;
    }

    .cex-listings-top {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto;
        column-gap: 0.5rem;
        row-gap: 0.65rem;
        align-items: center;
    }

    .cex-listings-top > h1 {
        grid-column: 1 / -1;
        grid-row: 1;
        font-size: 1.35rem;
    }

    .cex-listings-top .cex-import-panel-toggle {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }

    .cex-listings-top > .page-actions {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
    }

    .cex-listings-top .cex-import-panel {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    /* Search toolbar */
    .import-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .import-toolbar input[type="text"],
    .import-toolbar input[type="search"] {
        min-width: 0;
        width: 100%;
    }

    .import-toolbar .btn {
        width: 100%;
    }

    /* Filter bars — horizontal scroll pills */
    .filter-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0.35rem;
        margin-bottom: 0.75rem;
        padding-bottom: 0.15rem;
        scrollbar-width: thin;
        mask-image: linear-gradient(to right, #000 85%, transparent);
        -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
    }

    .filter-bar a {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: 0.82rem;
        padding: 0.4rem 0.75rem;
    }

    .search-summary-total {
        display: block;
        margin-top: 0.2rem;
    }

    /* Pagination */
    .pagination {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    .pagination-pages {
        justify-content: center;
    }

    /* Import panel */
    .cex-import-panel-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .cex-import-panel-actions {
        width: 100%;
    }

    .cex-import-panel-actions .btn {
        flex: 1;
    }

    .cex-import-sources {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Toolbar checkbox options stack cleanly */
    .import-toolbar-option {
        white-space: normal;
        min-height: 44px;
        align-items: flex-start;
        line-height: 1.35;
    }

    /* Reset match column min-width inside cards */
    .admin-table-wrap .data-table-match {
        min-width: 0;
        width: 100%;
    }

    /* PC match dialog — full-width actions on small screens */
    .pc-match-dialog {
        width: calc(100vw - 1.5rem);
        max-height: calc(100vh - 1.5rem);
        margin: auto;
    }

    .pc-match-dialog-panel {
        padding: 1rem 1.05rem 0.95rem;
        max-height: calc(100vh - 1.5rem);
    }

    .pc-match-dialog-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .pc-match-dialog-actions .btn {
        width: 100%;
        min-height: 44px;
        text-align: center;
    }
}

@media (max-width: 640px) {
    .pagination {
        gap: 0.65rem;
    }

    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* Flatpickr date picker (dark theme) */
.flatpickr-calendar {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    background: var(--bg-elevated);
    color: var(--text);
}
.flatpickr-weekdays,
span.flatpickr-weekday {
    background: var(--bg-elevated);
    color: var(--text-muted);
}
.flatpickr-day {
    color: var(--text);
}
.flatpickr-day:hover,
.flatpickr-day:focus {
    background: var(--bg-hover);
    border-color: var(--bg-hover);
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange {
    background: var(--primary);
    border-color: var(--primary);
}
.flatpickr-day.today {
    border-color: var(--primary-hover);
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: var(--text-muted);
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    fill: var(--text-muted);
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    fill: var(--text);
}

.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08)}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1);animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none !important;box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9)}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{/*
      /*rtl:begin:ignore*/left:0/*
      /*rtl:end:ignore*/}/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,.flatpickr-months .flatpickr-next-month.flatpickr-next-month{/*
      /*rtl:begin:ignore*/right:0/*
      /*rtl:end:ignore*/}/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:#959ea9}.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#f64747}.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{width:14px;height:14px}.flatpickr-months .flatpickr-prev-month svg path,.flatpickr-months .flatpickr-next-month svg path{-webkit-transition:fill .1s;transition:fill .1s;fill:inherit}.numInputWrapper{position:relative;height:auto}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper input::-webkit-outer-spin-button,.numInputWrapper input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,0.15);-webkit-box-sizing:border-box;box-sizing:border-box}.numInputWrapper span:hover{background:rgba(0,0,0,0.1)}.numInputWrapper span:active{background:rgba(0,0,0,0.2)}.numInputWrapper span:after{display:block;content:"";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,0.6);top:26%}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,0.6);top:40%}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:rgba(0,0,0,0.5)}.numInputWrapper:hover{background:rgba(0,0,0,0.05)}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:7.48px 0 0 0;line-height:1;height:34px;display:inline-block;text-align:center;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:.5ch;padding:0}.flatpickr-current-month span.cur-month:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\0;display:inline-block}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:rgba(0,0,0,0.9)}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:rgba(0,0,0,0.9)}.flatpickr-current-month input.cur-year{background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 .5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,0.5);background:transparent;pointer-events:none}.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;background:transparent;border:none;border-radius:0;box-sizing:border-box;color:inherit;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:300;height:auto;line-height:inherit;margin:-1px 0 0 0;outline:none;padding:0 0 0 .5ch;position:relative;vertical-align:initial;-webkit-box-sizing:border-box;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto}.flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-current-month .flatpickr-monthDropdown-months:active{outline:none}.flatpickr-current-month .flatpickr-monthDropdown-months:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:none;padding:0}.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:28px}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:rgba(0,0,0,0.54);line-height:1;margin:0;text-align:center;display:block;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;font-weight:bolder}.dayContainer,.flatpickr-weeks{padding:1px 0 0 0}.flatpickr-days{position:relative;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;width:307.875px}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-wrap:wrap;-ms-flex-pack:justify;-webkit-justify-content:space-around;justify-content:space-around;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}.dayContainer + .dayContainer{-webkit-box-shadow:-1px 0 0 #e6e6e6;box-shadow:-1px 0 0 #e6e6e6}.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;-webkit-flex-basis:14.2857143%;-ms-flex-preferred-size:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:39px;margin:0;display:inline-block;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}.flatpickr-day.today{border-color:#959ea9}.flatpickr-day.today:hover,.flatpickr-day.today:focus{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay{background:#569ff7;-webkit-box-shadow:none;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)){-webkit-box-shadow:-10px 0 0 #569ff7;box-shadow:-10px 0 0 #569ff7}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange{border-radius:0;-webkit-box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:rgba(57,57,57,0.3);background:transparent;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:rgba(57,57,57,0.1)}.flatpickr-day.week.selected{border-radius:0;-webkit-box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7;box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;-webkit-box-shadow:1px 0 0 #e6e6e6;box-shadow:1px 0 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57,57,57,0.3);background:transparent;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:40px;max-height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-time:after{content:"";display:table;clear:both}.flatpickr-time .numInputWrapper{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:40%;height:40px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;-webkit-box-shadow:none;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:#393939;font-size:14px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:bold}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{height:inherit;float:left;line-height:inherit;color:#393939;font-weight:bold;width:2%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus{background:#eee}.flatpickr-input[readonly]{cursor:pointer}@-webkit-keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}